:root{--bg:#eceff2;--panel:#fbfcfd;--ink:#13202b;--muted:#5b6b78;--line:#d3dbe1;--field:#f1f4f6;--side:#101b25;--accent:#2457ff;--accent-ink:#fff;--good:#1b7f45;--warn:#a85a08;--bad:#b3261e;--good-bg:#dff1e6;--warn-bg:#f8e8d2;--bad-bg:#f8dcda;--sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b131a;--panel:#14202a;--ink:#e6edf2;--muted:#8ea0ae;--line:#26343f;--field:#1b2a35;--side:#070d12;--accent:#7a9bff;--accent-ink:#0a1020;--good:#52c27d;--warn:#e69a4d;--bad:#f0746b;--good-bg:#17382a;--warn-bg:#40301a;--bad-bg:#432220;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.45}
.bar{background:var(--side);color:#fff;display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px clamp(16px,3vw,28px);flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:17px}
.brand small{display:block;font-weight:400;font-size:11.5px;color:#a9b8c4}
main{max-width:1100px;margin:0 auto;padding:20px clamp(16px,3vw,28px) 48px;display:flex;flex-direction:column;gap:16px}
h1{font-size:23px;margin:0;letter-spacing:-.015em}h2{font-size:15px;margin:0 0 4px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
.hint{color:var(--muted);font-size:13px;margin:0 0 12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:end}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
input,select{width:100%;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:7px;padding:8px 10px;min-height:40px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;cursor:pointer}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:7px;padding:9px 16px;font-weight:600;min-height:40px}
.btn:disabled{opacity:.6}
.ghost{background:transparent;color:inherit;border:1px solid var(--line);border-radius:7px;padding:6px 12px;min-height:36px}
.bar .ghost{border-color:#3b4b58;color:#fff}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}td small{display:block;color:var(--muted);font-size:12px}
.n{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:var(--field);border:1px solid var(--line)}
.pill.good{background:var(--good-bg);color:var(--good);border-color:transparent}.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}.pill.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.banner{border-radius:10px;padding:12px 16px;font-weight:500}
.banner.warn{background:var(--warn-bg);color:var(--warn)}.banner.bad{background:var(--bad-bg);color:var(--bad)}
.msg{font-size:13px;color:var(--muted);min-height:1.2em;margin:8px 0 0}.msg.err{color:var(--bad)}
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.log li{background:var(--field);border-radius:7px;padding:7px 10px;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
:root[data-theme="dark"]{--bg:#0b131a;--panel:#14202a;--ink:#e6edf2;--muted:#8ea0ae;--line:#26343f;--field:#1b2a35;--side:#070d12;--accent:#7a9bff;--accent-ink:#0a1020;--good:#52c27d;--warn:#e69a4d;--bad:#f0746b;--good-bg:#17382a;--warn-bg:#40301a;--bad-bg:#432220;color-scheme:dark}

:root{--bg:#f1efff;--panel:#ffffff;--ink:#15123d;--muted:#5f5b8f;--line:#dcd8f6;--field:#f6f4ff;--side:#1c1170;--side-bg:linear-gradient(100deg,#1c1170 0%,#3a1aa6 60%,#7a1fb8 100%);--accent:#5b3df5;--accent-ink:#fff;--accent2:#00b4d8;--accent3:#ff4f8b;--amber:#ffa41b;--good:#0b9d69;--warn:#b86200;--bad:#d42a58;--good-bg:#d6f5e8;--warn-bg:#ffeccb;--bad-bg:#ffdce6;--glow:rgba(91,61,245,.16);--shadow:rgba(60,30,160,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0c0a24;--panel:#171440;--ink:#eeebff;--muted:#a8a4d8;--line:#2f2a66;--field:#201c52;--side:#0a0730;--side-bg:linear-gradient(100deg,#0a0730 0%,#1d1060 60%,#4a1590 100%);--accent:#8f7bff;--accent-ink:#0c0a24;--accent2:#35d4f0;--accent3:#ff6fa0;--amber:#ffb84d;--good:#3fe0a5;--warn:#ffb84d;--bad:#ff6b92;--good-bg:#0f3a30;--warn-bg:#40320f;--bad-bg:#46182c;--glow:rgba(143,123,255,.2);--shadow:rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0c0a24;--panel:#171440;--ink:#eeebff;--muted:#a8a4d8;--line:#2f2a66;--field:#201c52;--side:#0a0730;--side-bg:linear-gradient(100deg,#0a0730 0%,#1d1060 60%,#4a1590 100%);--accent:#8f7bff;--accent-ink:#0c0a24;--accent2:#35d4f0;--accent3:#ff6fa0;--amber:#ffb84d;--good:#3fe0a5;--warn:#ffb84d;--bad:#ff6b92;--good-bg:#0f3a30;--warn-bg:#40320f;--bad-bg:#46182c;--glow:rgba(143,123,255,.2);--shadow:rgba(0,0,0,.5);color-scheme:dark}
body{background:radial-gradient(900px 420px at 88% -8%,var(--glow),transparent 70%),radial-gradient(700px 380px at 10% 0%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
.bar{background:var(--side-bg)}
h1{background:linear-gradient(90deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel{box-shadow:0 1px 2px rgba(20,10,80,.06),0 12px 28px -18px var(--shadow)}
.panel h2{display:flex;align-items:center;gap:8px}
.panel h2::before{content:"";width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--accent),var(--accent3));flex:none}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 8px 18px -10px var(--shadow)}
.btn:hover{filter:brightness(1.08)}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.bar .ghost:hover{color:#fff;border-color:var(--accent2)}
th{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.kpi{position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--accent)) 10%,var(--panel)),var(--panel))}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c,var(--accent))}
.kpi:nth-child(4n+1){--c:var(--accent)}.kpi:nth-child(4n+2){--c:var(--accent2)}.kpi:nth-child(4n+3){--c:var(--accent3)}.kpi:nth-child(4n+4){--c:var(--amber)}
.kpi b{color:var(--c,var(--accent))}
.link{color:var(--accent);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.stat{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.stat.s-connected{background:var(--good-bg);color:var(--good)}.stat.s-requested{background:var(--warn-bg);color:var(--warn)}
.login{max-width:420px;margin:9vh auto 0;padding:0 16px}