:root{
  --sm-bg:#0b1020;
  --sm-surface:#0f1730;
  --sm-surface-2:#0b1228;
  --sm-border:rgba(148,163,184,.18);
  --sm-border-2:rgba(148,163,184,.28);
  --sm-text:#e5e7eb;
  --sm-muted:rgba(226,232,240,.75);
  /* Brand colors (ScreenMP)
     Teal:  #0888b8
     Blue:  #2878c8
     Orange:#f88808
  */
  --sm-primary:#0888b8;
  --sm-primary-2:#2878c8;
  --sm-warn:#f88808;
  --sm-accent:var(--sm-primary);
  --sm-accent-2:var(--sm-primary-2);
  --sm-radius:16px;
}

.sm-wrap.sm-site{
  --sm-bg:#ffffff;
  --sm-surface:#ffffff;
  --sm-surface-2:#f6f7fb;
  --sm-border:rgba(15,23,42,.12);
  --sm-border-2:rgba(15,23,42,.18);
  --sm-text:#0f172a;
  --sm-muted:rgba(15,23,42,.68);
  --sm-primary:#0090B7;
  --sm-primary-2:#005a45;
  --sm-warn:#f59e0b;
  --sm-accent:var(--sm-primary);
  --sm-accent-2:var(--sm-primary-2);
  --sm-radius:18px;
  box-shadow: 0 20px 60px rgba(15,23,42,.08);
}


.sm-wrap{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue','Noto Sans',sans-serif;
  color:var(--sm-text);
}

.sm-dark{
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(40,120,200,.20), transparent 55%),
    radial-gradient(900px 380px at 90% 10%, rgba(8,136,184,.16), transparent 55%),
    linear-gradient(180deg, #0b1020, #070b16);
  border:1px solid var(--sm-border);
  border-radius:var(--sm-radius);
  padding:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

/* Dropzone */
.sm-drop{
  position:relative;
  border-radius:calc(var(--sm-radius) - 2px);
  padding:0;
  cursor:pointer;
  outline:none;
}

/* Gradient border */
.sm-drop::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(135deg, rgba(40,120,200,.92), rgba(8,136,184,.92));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.55;
  transition:opacity .2s ease;
  pointer-events:none;
}

.sm-drop__inner{
  border:1px dashed rgba(148,163,184,.35);
  border-radius:calc(var(--sm-radius) - 2px);
  padding:26px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(15,23,48,.92), rgba(11,18,40,.92));
  backdrop-filter: blur(8px);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.sm-drop:hover::before{ opacity:.85; }
.sm-drop:hover .sm-drop__inner{ transform:translateY(-1px); border-color:rgba(148,163,184,.55); }

.sm-drop:focus-visible::before{ opacity:1; }
.sm-drop:focus-visible .sm-drop__inner{ border-color:rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(8,136,184,.22); }

.sm-drop.sm-drag::before{ opacity:1; }
.sm-drop.sm-drag .sm-drop__inner{
  border-color:rgba(8,136,184,.85);
  background:linear-gradient(180deg, rgba(20,28,56,.92), rgba(10,15,35,.92));
  transform:translateY(-2px) scale(1.01);
}

.sm-drop__icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:radial-gradient(circle at 30% 20%, rgba(40,120,200,.28), transparent 60%),
             radial-gradient(circle at 70% 80%, rgba(8,136,184,.24), transparent 60%),
             rgba(15,19,39,.9);
  border:1px solid rgba(148,163,184,.22);
  color:#e8eeff;
}

.sm-drop__title{
  font-weight:850;
  letter-spacing:.2px;
  font-size:18px;
  line-height:1.2;
}

.sm-drop__meta{
  margin-top:6px;
  color:var(--sm-muted);
  font-size:13px;
}

.sm-drop__actions{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.sm-drop__or{
  color:rgba(226,232,240,.7);
  font-size:12px;
}

.sm-btn{
  padding:11px 16px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--sm-primary), var(--sm-primary-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(8,136,184,.22);
  transition:transform .15s ease, filter .15s ease;
}
.sm-btn:hover{ background: rgba(0,144,183,.14); }
.sm-btn:active{ transform:translateY(0px) scale(.99); }

.sm-hint{opacity:.82;font-size:12px;}
.sm-drop__hint{ margin-top:10px; }

/* Results */
.sm-results{margin-top:16px;gap:12px;display:grid}
.sm-card{background:rgba(17,23,50,.82);border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:12px;color:#fff;backdrop-filter:blur(8px)}
.sm-card--error{border-color:rgba(248,136,8,.70);background:rgba(26,19,10,.85)}
.sm-row{display:flex;gap:8px;align-items:center}
.sm-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px}
.sm-pill--info{background:rgba(8,136,184,.14);color:#cfefff;border:1px solid rgba(8,136,184,.26)}
.sm-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sm-thumb{width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:#0f1115}
.sm-title{font-weight:850;letter-spacing:.2px;word-break:break-word}
.sm-field{display:flex;gap:8px;margin:8px 0;align-items:center}
.sm-label{width:84px;opacity:.8;font-size:12px;flex:0 0 auto}
.sm-input{flex:1;min-width:0;padding:9px 10px;border-radius:10px;background:rgba(15,19,39,.8);border:1px solid rgba(148,163,184,.22);color:#e8edf7}
.sm-copy{padding:9px 12px;border-radius:10px;border:1px solid rgba(8,136,184,.32);background:rgba(8,136,184,.20);color:#eaffff;cursor:pointer;white-space:nowrap;transition:filter .15s ease, transform .15s ease, background .15s ease}
.sm-copy:hover{filter:brightness(1.08);background:rgba(40,120,200,.18)}
.sm-copy:active{transform:scale(.99)}
.sm-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.sm-actions a{font-size:13px;color:#dbe6ff;text-decoration:none;border-bottom:1px dashed rgba(219,230,255,.35)}
.sm-actions a:hover{border-bottom-color:rgba(219,230,255,.7)}

.sm-progress{width:100%;height:9px;background:rgba(18,25,58,.75);border:1px solid rgba(148,163,184,.22);border-radius:999px;margin-top:12px;overflow:hidden}
.sm-progress__in{width:30%;height:100%;background:linear-gradient(90deg,var(--sm-primary),var(--sm-primary-2));animation:smbar 1.5s infinite}
@keyframes smbar{0%{transform:translateX(-30%)}50%{transform:translateX(30%)}100%{transform:translateX(100%)}}

@media (max-width:520px){
  .sm-dark{padding:16px}
  .sm-drop__inner{padding:18px}
  .sm-head{gap:10px}
  .sm-thumb{width:64px;height:64px}
  .sm-label{width:72px}
}