/* Shared tokens with the dashboard suite. Pages use these variables only, never raw colours. */
:root{
  --bg:#f4f6fa;--card:#fff;--ink:#16181d;--mute:#7a7f8c;--soft:#a9aeba;--line:#eceef3;--code:#f4f6fa;
  --acc:#6d5efc;--accbg:#f0eeff;--ok:#16a34a;--okbg:#e9f9ef;--bad:#e11d48;--badbg:#ffecef;
  --glass:rgba(255,255,255,.75);--glow1:#e9ecff;--glow2:#e3f7f4;--toast:#16181d;--toastfg:#fff;
  --shadow:0 1px 2px rgba(20,24,40,.04),0 8px 28px rgba(20,24,40,.06);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0f1116;--card:#171a21;--ink:#e7e9ef;--mute:#8d93a1;--soft:#5c6270;--line:#272b35;--code:#21252e;
  --acc:#8b7fff;--accbg:#262249;--ok:#34d399;--okbg:#10291f;--bad:#fb7185;--badbg:#341720;
  --glass:rgba(23,26,33,.75);--glow1:#1a1838;--glow2:#0f2623;--toast:#e7e9ef;--toastfg:#16181d;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:14px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 500px at 15% -10%,var(--glow1) 0,transparent 60%),radial-gradient(900px 500px at 100% 0,var(--glow2) 0,transparent 55%),var(--bg)}
main{max-width:960px;margin:0 auto;padding:22px 16px 60px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
h1{font-size:28px;margin:0;letter-spacing:-.03em}
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:22px}
input,button,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 13px}
input:focus,select:focus{outline:none;border-color:var(--acc)}
select{cursor:pointer}
button{cursor:pointer;font-weight:550}
button:hover{border-color:var(--acc)}
button.p{background:var(--acc);border-color:var(--acc);color:#fff}
button.bad{color:var(--bad)}
button.bad:hover{border-color:var(--bad);background:var(--badbg)}
.row{display:flex;gap:10px;align-items:center}
.row input{flex:1;min-width:0}
.list{list-style:none;padding:0;margin:16px 0 0}
.list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.list li span{flex:1;min-width:0;overflow-wrap:anywhere}
.empty{color:var(--mute);text-align:center;padding:24px}
#theme-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:99px;background:var(--glass);color:var(--mute);box-shadow:var(--shadow)}
#theme-btn:hover{color:var(--ink)}
#theme-btn svg{width:16px;height:16px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--toast);color:var(--toastfg);padding:10px 18px;border-radius:99px;font-size:13px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:150px;margin-bottom:18px;cursor:pointer;color:var(--mute);border:2px dashed var(--line);transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--accbg);color:var(--ink)}
.bar{visibility:hidden;width:min(320px,80%);height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.drop.busy .bar{visibility:visible}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .15s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.grid .empty{grid-column:1/-1}
.tile{margin:0;background:var(--card);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.tile img,.tile video{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--code)}
.tile figcaption{display:flex;align-items:center;gap:6px;padding:8px}
.tile figcaption a{flex:1;text-align:center;color:var(--mute);text-decoration:none;font:12px ui-monospace,monospace}
.tile figcaption a:hover{color:var(--acc)}
.tile button{padding:5px 10px;font-size:12px;border-radius:9px}
[hidden]{display:none!important}
body.viewer{display:grid;place-items:center;padding:16px}
.viewer img,.viewer video{max-width:100%;max-height:calc(100vh - 32px);border-radius:12px;box-shadow:var(--shadow)}
@media (max-width:640px){h1{font-size:24px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card{padding:18px;border-radius:20px}}