:root{--bg:#f4f6f8;--card:#fff;--text:#16202a;--muted:#66727f;--line:#dde3e9;--accent:#0f8b7d;--accent-text:#fff;
  --bad:#c0392b;--ok:#1e8e4e;--busy:#b7791f;--soft:#eef6f5}
@media (prefers-color-scheme:dark){:root{--bg:#0f141a;--card:#171e26;--text:#e6edf3;--muted:#93a0ad;--line:#2a3440;
  --accent:#2bb3a3;--accent-text:#06201d;--bad:#ff7b6b;--ok:#5fd38d;--busy:#f0b45a;--soft:#13302d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.top .brand{font-weight:700;flex:1}.top form{margin:0}
.top a,.top button{font-size:13px}
.wrap{max-width:960px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
h1{margin:0 0 6px;font-size:22px}h2{font-size:16px;margin:22px 0 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)}.small{font-size:12px}.bad{color:var(--bad)}
.row{display:flex;gap:10px;align-items:center;margin-top:12px}.wrap-row{flex-wrap:wrap}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;
  padding:9px 14px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.ghost{background:none}.btn:disabled{opacity:.5;cursor:default}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.mode{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.mode span{display:flex;flex-direction:column}.mode small{color:var(--muted)}
.mode:has(input:checked){border-color:var(--accent);background:var(--soft)}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed var(--line);border-radius:12px;
  padding:26px 12px;text-align:center;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--soft)}.drop input{display:none}.drop-big{font-weight:600}
.queue{list-style:none;padding:0;margin:12px 0 0}
.queue li{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.qname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qstate{font-size:12px;color:var(--muted)}
.qstate.ok{color:var(--ok)}.qstate.bad{color:var(--bad)}.qstate.busy{color:var(--busy)}
.x{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stats div{border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.stats b{display:block;font-size:26px}.stats span{color:var(--muted);font-size:13px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{color:var(--muted);font-weight:600;font-size:12px}
.scroll{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.tag{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:4px;white-space:nowrap}
select,input[type=text],input[type=password]{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px}
.rules p{margin:6px 0}
.auth{max-width:380px;margin:8vh auto;padding:0 16px}
.auth label{display:block;margin:10px 0 4px;font-weight:600}.auth input{width:100%}
.auth .btn{width:100%;margin-top:16px}
.msg{padding:10px 12px;border-radius:8px;border:1px solid var(--line);margin:10px 0}
.msg.err{color:var(--bad)}.msg.ok{color:var(--ok)}
@media (max-width:600px){.modes{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.wrap{padding:10px}}