/* d2 — one stylesheet. Dark by default, light via [data-theme="light"], tokens only.
   Shares the NodeRemote palette so the two pages read as one family. */
:root{
  --bg:#0b0f14; --panel:#111823; --panel2:#0e141d; --border:#1e2a3a;
  --text:#e6edf3; --muted:#8b98a9; --green:#2ea043; --amber:#d29922;
  --red:#f85149; --blue:#539bf5; --chip:#0e141d; --ink:#02130a;
  --glow:rgba(46,160,67,.16); --shadow:0 18px 44px rgba(0,0,0,.42);
}
:root[data-theme="light"]{
  --bg:#f6f8fa; --panel:#ffffff; --panel2:#f6f8fa; --border:#d8dee4;
  --text:#1f2328; --muted:#59636e; --green:#1a7f37; --amber:#9a6700;
  --red:#cf222e; --blue:#0969da; --chip:#f6f8fa; --ink:#ffffff;
  --glow:rgba(26,127,55,.10); --shadow:0 14px 36px rgba(31,35,40,.10);
}

*{box-sizing:border-box}

/* scrollbar — themed, never the OS one */
html{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}

body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:15px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:34px 20px 56px;transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%,var(--glow),transparent 70%);
}
.wrap{width:100%;max-width:720px;margin:0 auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;letter-spacing:-.6px}

/* ── brand + hero ────────────────────────────────────────────────────────── */
.hero{text-align:center;margin-bottom:26px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:22px;font-weight:800;
  letter-spacing:-.5px;color:var(--text);margin-bottom:20px}
.brand:hover{text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--green);color:var(--ink);
  display:grid;place-items:center;font-size:14px}
.hero h1{font-size:clamp(28px,5.4vw,40px);font-weight:800;line-height:1.12}
.sub{color:var(--muted);font-size:14.5px;margin:12px auto 0;max-width:520px}
.facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:20px 0 0;padding:0}
.facts li{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--border);border-radius:999px;padding:6px 13px;
  font-size:12.5px;font-weight:500;color:var(--muted)}
.facts i{color:var(--green);font-size:11.5px}

/* ── dropzone ────────────────────────────────────────────────────────────── */
.dropzone{
  position:relative;background:var(--panel);border:1.5px dashed var(--border);border-radius:16px;
  padding:46px 24px;text-align:center;cursor:pointer;transition:.18s;outline:none;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--green);background:var(--panel)}
.dropzone.over{border-color:var(--green);background:var(--panel);box-shadow:0 0 0 4px var(--glow);transform:translateY(-1px)}
.dz-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:15px;background:var(--panel2);border:1px solid var(--border);
  color:var(--green);font-size:21px;transition:.18s}
.dropzone:hover .dz-icon,.dropzone.over .dz-icon{background:var(--green);color:var(--ink);border-color:var(--green)}
.dz-title{margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px}
.dz-hint{margin:6px 0 0;color:var(--muted);font-size:13px}
.dz-hint .link{color:var(--green);font-weight:600}

.quota{margin:12px 2px 0;text-align:center;color:var(--muted);font-size:12px}
.quota.warn{color:var(--amber)}

/* ── queue ───────────────────────────────────────────────────────────────── */
.queue{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.item{background:var(--panel);border:1px solid var(--border);border-radius:13px;
  padding:14px 15px;box-shadow:var(--shadow);animation:rise .22s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.item-top{display:flex;align-items:center;gap:11px}
.item-ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);font-size:14px}
.item.done .item-ico{background:var(--green);border-color:var(--green);color:var(--ink)}
.item.err .item-ico{background:rgba(248,81,73,.12);border-color:rgba(248,81,73,.42);color:var(--red)}
.item-meta{min-width:0;flex:1}
.item-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-sub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.err .item-sub{color:var(--red)}
.item-actions{display:flex;gap:6px;flex:0 0 auto}

.bar{height:5px;border-radius:99px;background:var(--panel2);border:1px solid var(--border);
  margin-top:11px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--green);border-radius:99px;
  transition:width .2s ease}
.item.done .bar,.item.err .bar{display:none}

.linkrow{display:flex;gap:8px;margin-top:11px}
.linkrow input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border);
  border-radius:9px;color:var(--text);padding:9px 11px;
  font:400 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none}
.linkrow input:focus{border-color:var(--green)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:9px;
  padding:9px 13px;font:600 12.5px "Inter",sans-serif;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--green);color:var(--ink);border-color:var(--green)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08);color:var(--ink)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:11.5px}
.btn.danger{color:var(--red);border-color:rgba(248,81,73,.42)}
.btn.danger:hover:not(:disabled){background:rgba(248,81,73,.10);border-color:var(--red);color:var(--red)}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;background:var(--panel);
  color:var(--muted);border:1px solid var(--border);border-radius:9px;cursor:pointer;
  font-size:13px;transition:.15s}
.iconbtn:hover{color:var(--green);border-color:var(--green)}
.themetoggle{position:fixed;top:16px;right:16px;z-index:40}

/* ── history ─────────────────────────────────────────────────────────────── */
.history{margin-top:30px;border-top:1px solid var(--border);padding-top:22px}
.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.history-head h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px}
.history-list{display:flex;flex-direction:column;gap:7px}
.hitem{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--border);
  border-radius:11px;padding:10px 12px}
.hitem .item-meta{min-width:0}
.hitem .hname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem .hsub{font-size:11.5px;color:var(--muted);margin-top:2px}
.hitem.expired{opacity:.55}
.note{color:var(--muted);font-size:11.5px;margin:12px 0 0}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{margin-top:34px;text-align:center;color:var(--muted);font-size:11.5px;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.foot .dot{opacity:.5}

/* ── toasts ──────────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;
  gap:9px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--green);border-radius:10px;padding:11px 14px;font-size:13px;
  box-shadow:var(--shadow);max-width:340px;pointer-events:auto;animation:slide .2s ease both}
.toast.err{border-left-color:var(--red)}
.toast.err i{color:var(--red)}
.toast.warn{border-left-color:var(--amber)}
.toast.warn i{color:var(--amber)}
.toast i{color:var(--green);font-size:13px;flex:0 0 auto}
.toast.out{animation:fade .2s ease both}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:0;transform:translateX(14px)}}

/* ── modal (replaces confirm()) ──────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(2,6,12,.62);backdrop-filter:blur(3px);animation:fadein .15s ease both}
:root[data-theme="light"] .modal{background:rgba(31,35,40,.34)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:20px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.modal-card h3{font-size:16px;font-weight:700}
.modal-card p{color:var(--muted);font-size:13.5px;margin:9px 0 18px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}

@media (max-width:560px){
  body{padding:26px 14px 44px}
  .dropzone{padding:34px 16px}
  .item-actions .label{display:none}
  .linkrow{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}