/* Midnight Glass — shared panel styles */
:root{
  --bg:#030405; --surface:rgba(255,255,255,.04); --raised:rgba(255,255,255,.06); --line:rgba(255,255,255,.09);
  --glass-top:rgba(255,255,255,.045); --glass-bottom:rgba(255,255,255,.015);
  --fg:#eef0f4; --muted:#8a909c; --dim:#5c626e;
  --cyan:#00e5ff; --magenta:#ff2bd6; --violet:#b14dff; --green:#39ff88; --amber:#ffcc33; --red:#ff3b5c;
  --t-cyan:#7ff4ff; --t-magenta:#ff8cec; --t-violet:#d8a6ff; --t-green:#9dffc4; --t-amber:#ffe08a; --t-red:#ff9aab;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,"SF Pro Text",Figtree,system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.45}
body{min-height:100vh}
button,input,select,textarea{font-family:inherit;font-size:14px;color:var(--fg)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03);position:sticky;top:0;z-index:5}
.mark{font-weight:700;font-size:12px;letter-spacing:.16em}
.wrap{padding:12px;display:flex;flex-direction:column;gap:12px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.title{font-size:22px;font-weight:700;line-height:1.15;margin:0}
.small{font-size:12px;color:var(--muted)}
.panel{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.panel h3{margin:0;font-size:14px;font-weight:600}
.row{display:flex;align-items:center;gap:8px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.btn{min-height:34px;padding:0 12px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--raised)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{min-height:42px;width:100%;font-weight:600;border:1.5px solid var(--cyan);background:rgba(0,229,255,.08);color:var(--t-cyan);box-shadow:0 0 10px rgba(0,229,255,.5),inset 0 0 12px rgba(0,229,255,.15);transition:box-shadow .2s}
.btn.primary:hover{box-shadow:0 0 14px rgba(0,229,255,.7),inset 0 0 12px rgba(0,229,255,.2)}
.btn.icon{width:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-color:transparent;color:var(--muted)}
.btn.icon:hover{color:var(--fg);background:var(--surface)}
.btn.danger{color:var(--t-red)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;font-size:12px}
.chip.on{border:1.5px solid var(--cyan);background:rgba(0,229,255,.08);color:var(--t-cyan)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.seg button{height:32px;border:none;background:var(--surface);color:var(--fg);cursor:pointer;font-size:12px}
.seg button.on{background:rgba(0,229,255,.14);color:var(--t-cyan)}
.tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;padding:1px 8px;border-radius:999px;border:1.5px solid;white-space:nowrap}
.tag.green{border-color:var(--green);background:rgba(57,255,136,.08);color:var(--t-green)}
.tag.red{border-color:var(--red);background:rgba(255,59,92,.08);color:var(--t-red)}
.tag.amber{border-color:var(--amber);background:rgba(255,204,51,.08);color:var(--t-amber)}
.tag.cyan{border-color:var(--cyan);background:rgba(0,229,255,.08);color:var(--t-cyan)}
.tag.violet{border-color:var(--violet);background:rgba(177,77,255,.08);color:var(--t-violet)}
.dot{width:8px;height:8px;border-radius:999px;flex:none}
.dot.amber{background:var(--amber);box-shadow:0 0 8px rgba(255,204,51,.6)}
label.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],select,textarea{width:100%;padding:7px 9px;border-radius:7px;border:1px solid var(--line);background:var(--raised);color:var(--fg);outline:none}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:1.5px solid var(--cyan);outline-offset:1px}
textarea{resize:vertical;line-height:1.45}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--cyan)}
input[type=color]{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:none;cursor:pointer}
.list{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.mono{font-family:var(--mono);font-size:11px}
.muted{color:var(--muted)}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast{position:fixed;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);background:#0c0e12;box-shadow:0 6px 24px rgba(0,0,0,.6);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:20}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--red);color:var(--t-red)}
.toast.ok{border-color:var(--green);color:var(--t-green)}
.bar{height:6px;border-radius:999px;background:var(--raised);overflow:hidden}
.bar>div{height:100%;background:var(--cyan);box-shadow:0 0 8px rgba(0,229,255,.6);width:0;transition:width .2s}
.empty{padding:16px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed rgba(255,255,255,.15);border-radius:11px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--t-cyan)}
.tabs{display:flex;gap:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}