:root{
  --bg:#0f1115; --card:#181b22; --line:#262b35; --fg:#e8eaed; --muted:#8b93a1;
  --accent:#2ea6ff; --green:#33c27f; --yellow:#e6b800; --red:#ff5c5c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 -apple-system,Segoe UI,Roboto,system-ui,sans-serif}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:12px}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.msg{min-height:18px;font-size:13px;margin:8px 2px}
.msg.err{color:var(--red)} .msg.ok{color:var(--green)}
.btn{background:#222733;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer}
.btn:active{opacity:.7}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04121f;font-weight:600}
.btn.small{padding:6px 10px;font-size:13px}
.btn.ghost{background:transparent}
.btn.wide{width:100%;margin-top:12px}
input,select{width:100%;background:#0c0e12;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:10px;font-size:15px;margin:6px 0}
label{font-size:12px;color:var(--muted);display:block;margin-top:8px}

.screen{padding:14px;max-width:680px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
h1{margin:.2em 0;font-size:26px} h2{margin:.2em 0 .6em;font-size:18px}

/* login */
#login .card{margin-top:12vh;text-align:center}
#login input{text-align:center}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.bal{display:flex;gap:16px}
.bal div{display:flex;flex-direction:column}
.bal b{font-size:16px}
.shift{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.on{color:var(--green);font-size:12px}

/* tabs */
.tabs{display:flex;gap:8px;margin:14px 0 8px}
.tab{flex:1;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:9px;cursor:pointer}
.tab.active{background:#1d2331;color:var(--fg);border-color:var(--accent)}
.filters{display:flex;gap:8px}

/* orders */
.orders{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.order{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}
.order.expired{opacity:.55}
.o-top{display:flex;justify-content:space-between;align-items:center}
.o-mid{margin:6px 0;font-size:16px}
.o-bot{display:flex;justify-content:space-between;align-items:center}
.status{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.status.s1{color:var(--accent)} .status.s2{color:var(--green)} .status.s0{color:var(--red)} .status.s3{color:var(--yellow)}
.timer.red{color:var(--red)} .timer.yellow{color:var(--yellow)}

/* detail modal */
.modal{position:fixed;inset:0;background:rgba(8,10,14,.96);overflow:auto}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.kv.timer b{font-size:18px}
.row{display:flex;gap:8px;align-items:center}
.row input{flex:1}
.row .btn{white-space:nowrap}
.qr-preview{max-width:180px;border-radius:10px;margin:10px 0;border:1px solid var(--line)}
#d-actions label{margin-top:14px}