:root{
  --ink:#1c1b18;--night:#211f1a;--violet:#0f6e56;--blue:#13855f;--pink:#d85a30;
  --green:#0f6e56;--red:#b3402b;--bg:#f4efe4;--muted:#8a8270;--text:#1c1b18;
  --card:#fffdf8;--line:#e5ddcc;--track:#e5ddcc;--on-accent:#fff;
  --side-text:#d8cfbc;--side-text-dim:#b9b2a0;--side-card:#2a2823;--side-border:#3a382f;
}
[data-theme="cipher"]{
  --ink:#0a0a0b;--night:#141417;--violet:#c6f24e;--blue:#a6d93b;--pink:#3f3f46;
  --green:#4fa32e;--red:#e24b4a;--bg:#f4f4f5;--muted:#6a6a72;--text:#0a0a0b;
  --card:#fff;--line:#e4e4e7;--track:#e4e4e7;--on-accent:#0a0a0b;
  --side-text:#ededed;--side-text-dim:#8a8a93;--side-card:#1a1a1d;--side-border:#26262b;
}
[data-theme="halo"]{
  --ink:#2b2540;--night:#352c52;--violet:#f0567a;--blue:#14b8a6;--pink:#ff6b6b;
  --green:#14b8a6;--red:#fb4d6a;--bg:#fbf7ff;--muted:#8e86a8;--text:#2b2540;
  --card:#fff;--line:#ece4f7;--track:#eee7fa;--on-accent:#fff;
  --side-text:#e6defb;--side-text-dim:#c9c2e0;--side-card:#352c52;--side-border:#403962;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
.sidebar{width:248px;background:linear-gradient(180deg,var(--ink),var(--night));color:var(--side-text);padding:22px;display:flex;flex-direction:column;gap:24px;position:fixed;inset:0 auto 0 0}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;font-weight:900;font-size:24px;color:var(--on-accent)}
.brand b{color:#fff}
.brand span,.admin-chip span{display:block;color:var(--side-text-dim);font-size:12px;margin-top:2px}
nav{display:flex;flex-direction:column;gap:8px}
nav a{padding:13px 14px;border-radius:14px;color:var(--side-text);text-decoration:none;cursor:pointer}
nav a.active,nav a:hover{background:linear-gradient(90deg,var(--violet),var(--blue));color:var(--on-accent)}
.theme-switch{display:flex;gap:6px;margin-top:8px}
.theme-switch button{flex:1;border:1px solid var(--side-border);background:var(--side-card);color:var(--side-text);border-radius:12px;padding:8px 4px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.theme-switch button .dots{display:flex;gap:3px}
.theme-switch button .dots i{width:10px;height:10px;border-radius:50%}
.theme-switch button.active{border-color:var(--violet);color:#fff}
.admin-chip{margin-top:auto;display:flex;align-items:center;gap:10px;background:var(--side-card);border:1px solid var(--side-border);padding:12px;border-radius:18px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--violet));display:grid;place-items:center;font-weight:800;color:var(--on-accent)}
.admin-chip b{color:#fff}
main{margin-left:248px;width:calc(100% - 248px);padding:28px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
h1,h2,p{margin:0}
header p{color:var(--muted);margin-top:4px}
.header-actions{display:flex;gap:10px}
button{border:0;background:var(--card);padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px #00000010;font-weight:700;color:var(--text);cursor:pointer}
button.primary{background:linear-gradient(90deg,var(--violet),var(--blue));color:var(--on-accent)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.cards article,.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 36px #00000010}
.cards article{padding:20px}
.cards span{color:var(--muted);font-size:13px}
.cards b{display:block;font-size:28px;margin:8px 0}
.cards em{color:var(--green);font-style:normal;font-weight:700;font-size:12px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px}
.panel{padding:20px}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel-title h2{font-size:18px}
.panel-title span{color:var(--muted);font-size:12px}
.line-chart{height:240px}
.line-chart svg{width:100%;height:100%}
.area{fill:url(#grad)}
.line{fill:none;stroke:var(--violet);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.donut{width:180px;height:180px;margin:25px auto;border-radius:50%;background:conic-gradient(var(--violet) 0 88%,var(--track) 88%);display:grid;place-items:center;position:relative}
.donut:before{content:"";position:absolute;inset:26px;background:var(--card);border-radius:50%}
.donut span{position:relative;text-align:center;color:var(--muted)}
.donut b{font-size:28px;color:var(--text)}
.tables{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
input,select{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);color:var(--text)}
table{width:100%;border-collapse:collapse}
th{text-align:left;color:var(--muted);font-size:12px;padding:12px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px}
.ok,.warn,.bad{font-weight:800;font-size:12px}
.ok{color:var(--green)}.warn{color:#d39200}.bad{color:var(--red)}
[hidden]{display:none!important}
.login-gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--ink),var(--night));padding:20px}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px}
.login-logo{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;font-weight:900;font-size:28px;color:var(--on-accent);margin-bottom:18px}
.login-card h2{font-size:22px;margin-bottom:4px}
.login-card p{color:var(--muted);font-size:13px;margin-bottom:22px}
.login-card label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
.login-card input{width:100%}
.login-card .primary{width:100%;margin-top:22px;padding:14px;font-size:15px}
.login-hint{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}
.login-error{margin-top:14px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);font-size:13px;font-weight:700}
.data-banner{position:fixed;top:0;left:248px;right:0;z-index:40;background:linear-gradient(90deg,var(--violet),var(--blue));color:var(--on-accent);padding:8px 16px;font-size:13px;font-weight:700;text-align:center}
.seg{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{background:transparent;box-shadow:none;padding:7px 14px;border-radius:9px;font-size:13px;color:var(--muted)}
.seg button.active{background:linear-gradient(90deg,var(--violet),var(--blue));color:var(--on-accent)}
.tbl-avatar{display:inline-flex;align-items:center;gap:10px}
.tbl-avatar .a{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:12px}
.row-actions{display:flex;gap:6px}
.row-actions button{padding:7px 10px;font-size:12px;border:1px solid var(--line);border-radius:9px;box-shadow:none}
.row-actions button.danger{color:var(--red);border-color:var(--red)}
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:var(--muted);font-size:13px}
.pagination .pages{display:flex;gap:6px}
.pagination .pages button{padding:8px 13px;font-size:13px;box-shadow:none;border:1px solid var(--line)}
.pagination .pages button.active{background:linear-gradient(90deg,var(--violet),var(--blue));color:var(--on-accent);border:0}
.pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
.pill.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.pill.warn{background:color-mix(in srgb,#d39200 16%,transparent);color:#d39200}
.pill.bad{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.bars{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:10px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars .stack{width:100%;display:flex;flex-direction:column-reverse;gap:3px;align-items:center}
.bars .b{width:60%;border-radius:6px 6px 0 0}
.bars .b.audio{background:var(--violet)}
.bars .b.video{background:var(--blue)}
.bars .lbl{color:var(--muted);font-size:12px}
.legend{display:flex;gap:18px;margin-top:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.page-note{color:var(--muted);font-size:14px;padding:30px;text-align:center}
@media(max-width:1000px){.sidebar{position:static;width:100%;height:auto}body{display:block}main{margin:0;width:100%;padding:18px}.cards,.grid,.tables{grid-template-columns:1fr}.data-banner{position:static;left:0}}