*{box-sizing:border-box}
:root{
  --bg:#0b1020;--card:#11182b;--muted:#9aa5bd;--text:#f5f7fb;
  --line:#25304a;--accent:#6d7cff;--accent2:#8b5cf6;--ok:#19c37d;--danger:#ff5d73;
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 20% 10%,rgba(109,124,255,.20),transparent 34%),
radial-gradient(circle at 80% 20%,rgba(139,92,246,.15),transparent 30%),var(--bg);color:var(--text)}
body{padding:42px 18px}
.wrap{max-width:840px;margin:auto}
.hero{text-align:center;margin-bottom:24px}
.badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;padding:7px 10px;border:1px solid #34405e;border-radius:999px;color:#bec8ff;background:rgba(255,255,255,.03)}
h1{font-size:clamp(34px,6vw,58px);line-height:1.02;margin:14px 0 12px}
.hero p{max-width:650px;margin:auto;color:var(--muted);font-size:17px;line-height:1.65}
.card{background:rgba(17,24,43,.92);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.25);backdrop-filter:blur(16px)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#0d1426;padding:6px;border-radius:14px;margin-bottom:18px}
.tab{border:0;border-radius:10px;background:transparent;color:var(--muted);padding:12px 10px;font-weight:700;cursor:pointer}
.tab.active{background:#202b46;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.panel{display:none}.panel.active{display:block}
.dropzone,.paste-box{min-height:275px;border:1.5px dashed #34415f;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:24px;background:#0e1528;cursor:pointer;transition:.2s}
.dropzone:hover,.dropzone.dragging,.paste-box:focus{border-color:var(--accent);background:#111a31;outline:none;transform:translateY(-1px)}
.dropzone input{display:none}
.drop-icon,.paste-icon{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:30px;font-weight:800;box-shadow:0 12px 30px rgba(109,124,255,.25)}
.dropzone strong,.paste-box strong{font-size:19px}
.dropzone span,.paste-box span,.dropzone small{color:var(--muted)}
.primary,.secondary,#copyBtn{border:0;border-radius:13px;padding:13px 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.primary{width:100%;margin-top:14px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.primary:disabled{opacity:.45;cursor:not-allowed}
.primary.compact{width:auto;margin:0;min-width:110px}
.field-label{display:block;font-weight:700;margin:4px 0 9px}
.url-row,.copy-row{display:flex;gap:9px}
input[type=url],.copy-row input{flex:1;min-width:0;background:#0c1323;color:#fff;border:1px solid #2b3651;border-radius:13px;padding:14px;font-size:15px;outline:none}
input:focus{border-color:var(--accent)}
.hint{font-size:13px;color:var(--muted);line-height:1.55}
.status{margin-top:16px;border-radius:12px;padding:12px 14px;font-size:14px}
.status.info{background:#16223f;color:#cbd5ff}
.status.success{background:rgba(25,195,125,.12);color:#94f0c4}
.status.error{background:rgba(255,93,115,.12);color:#ffb1bd}
.hidden{display:none!important}
.preview-wrap,.result-preview{margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a1020;text-align:center}
.preview-wrap img,.result-preview img{display:block;max-width:100%;max-height:420px;margin:auto}
.result{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.success-mark{width:44px;height:44px;background:rgba(25,195,125,.15);color:#45e2a4;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;float:left;margin-right:12px}
.result h2{margin:0 0 5px;font-size:21px}
.result p{margin:0;color:var(--muted)}
.result-preview{clear:both;margin-bottom:16px}
#copyBtn{background:#273351;color:#fff;min-width:86px}
.result-actions{display:flex;gap:9px;margin-top:12px}
.secondary{background:#18213a;color:#e9edff;border:1px solid #2b3651;flex:1}
footer{text-align:center;color:#65708a;margin-top:18px;font-size:13px}
@media(max-width:600px){
  body{padding:24px 12px}.card{padding:12px;border-radius:19px}.url-row,.copy-row,.result-actions{flex-direction:column}
  .primary.compact,#copyBtn{width:100%}.dropzone,.paste-box{min-height:230px}.tab{font-size:13px}
}


/* ===== FAST DESKTOP LAYOUT ===== */
@media (min-width: 701px){
  body{padding:18px 18px}
  .wrap{max-width:920px}
  .hero{margin-bottom:12px}
  .hero h1{font-size:36px;margin:8px 0 5px}
  .hero p{font-size:14px;line-height:1.45}
  .badge{padding:5px 9px;font-size:10px}
  .card{padding:14px;border-radius:20px}
  .tabs{margin-bottom:12px;padding:5px}
  .tab{padding:10px}

  /* Device/drop area also slightly shorter so results fit on one screen. */
  .dropzone{min-height:185px;padding:16px;gap:6px}
  .drop-icon{width:48px;height:48px;border-radius:14px;font-size:25px}
  .dropzone strong{font-size:17px}

  /* Requested: much smaller paste box */
  .paste-box{min-height:105px;padding:12px;gap:4px;flex-direction:row;text-align:left;justify-content:flex-start}
  .paste-icon{width:42px;height:42px;min-width:42px;border-radius:12px;font-size:18px;margin-right:7px}
  .paste-box strong{font-size:16px}
  .paste-box span{font-size:13px;margin-left:2px}
  #uploadPasteBtn{margin-top:9px;padding:11px 16px}

  .primary{margin-top:10px;padding:11px 16px}
  .status{margin-top:10px;padding:9px 12px}
  .result{margin-top:10px;padding-top:10px}
  .result h2{font-size:18px}
  .result p{font-size:13px}
  .success-mark{width:35px;height:35px;font-size:18px}
  .result-preview{max-height:135px;margin-top:10px;margin-bottom:9px}
  .result-preview img{max-height:135px}
  .copy-row input{padding:11px 12px}
  #copyBtn{padding:10px 16px}
  .result-actions{margin-top:8px}
  .secondary{padding:10px 14px}
  footer{margin-top:9px}
}


/* ===== COMPACT 100PX DEVICE BOX + IN-BOX PREVIEW ===== */
.dropzone{
  min-height:100px !important;
  height:100px;
  padding:8px 12px !important;
  overflow:hidden;
  position:relative;
}
.drop-content{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-direction:row;
  text-align:left;
}
.drop-content .drop-icon{
  width:40px !important;
  height:40px !important;
  min-width:40px;
  border-radius:11px !important;
  font-size:21px !important;
}
.drop-content strong{
  font-size:15px !important;
  white-space:nowrap;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.drop-content span{
  font-size:13px;
}
.drop-content small{
  font-size:11px;
}
.drop-preview{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:10px;
}
.dropzone.has-preview{
  padding:4px !important;
  border-style:solid;
  cursor:pointer;
  background:#0a1020;
}

/* lower duplicate image preview no longer used */
.result-preview{display:none !important;}

@media(max-width:700px){
  .dropzone{
    min-height:100px !important;
    height:100px;
  }
  .drop-content{
    gap:7px;
  }
  .drop-content span,
  .drop-content small{
    display:none;
  }
  .drop-content strong{
    max-width:190px;
  }
}


/* ===== V3: Unified Device / Paste area ===== */
.tabs.two-tabs{
  grid-template-columns:repeat(2,1fr) !important;
}

.unified-dropzone{
  min-height:100px !important;
  height:100px !important;
  cursor:pointer;
}

.unified-dropzone .drop-content{
  justify-content:center;
  text-align:left;
}

.drop-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.drop-copy strong{
  font-size:15px !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drop-copy span{
  font-size:13px;
  color:var(--muted);
}

.drop-copy small{
  font-size:11px;
  color:var(--muted);
}

@media(max-width:600px){
  .drop-copy span{display:block !important}
  .drop-copy small{display:none !important}
}