:root{--ground:#F4F5F8;--ink:#1B1F2A;--muted:#5B6275;--line:#E1E4EB;--line2:#EEF0F4;--field:#CDD1DB;--accent:#A3204F;--accent-h:#7E173D;--pink:#F07AA2;--ok:#1F7A5C;--amber-bg:#FFF1D6;--amber-fg:#7A4B00;--side:#1B1F2A;--side-on:#2B3142;
--display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
a{color:var(--accent)}a:hover{color:var(--accent-h)}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:4px}
button,input,select{font:inherit;color:inherit}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell{min-height:100vh;display:flex;flex-wrap:wrap}
nav.side{flex:1 1 220px;max-width:240px;background:var(--side);color:#E7E9EF;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.brand{white-space:nowrap;font-family:var(--display);font-size:19px;font-weight:700;padding:0 12px 20px}
.brand span{color:var(--pink)}
.navlist{display:flex;flex-direction:column;gap:4px}
.navitem{color:#C9CDD8;padding:10px 12px;text-decoration:none;border-radius:8px;display:flex;justify-content:space-between;gap:8px;align-items:center}
a.navitem:hover{color:#fff;background:#252B3A}
a.navitem.on{color:#fff;background:var(--side-on);font-weight:600}
.navitem.off{color:#8F95A6;cursor:default}
.soon{font-size:11px;border:1px solid #3A4156;border-radius:10px;padding:0 8px;white-space:nowrap}
.sidefoot{margin-top:auto;padding:12px;font-size:13px;color:#A6ABBA;display:flex;flex-direction:column;gap:8px;word-break:break-all}
.linkbtn{white-space:nowrap;background:none;border:0;padding:0;color:var(--pink);text-align:left;cursor:pointer;text-decoration:underline;width:max-content}
.linkbtn:hover{color:#fff}
main{flex:999 1 560px;min-width:0;padding:28px 32px;display:flex;flex-direction:column;gap:24px}
h1{margin:0;font-family:var(--display);font-size:30px;font-weight:700}
h2{margin:0;font-size:16px;font-weight:600}
h3{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px}
.kpi .l{font-size:13px;color:var(--muted)}
.kpi .v{font-family:var(--mono);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.frow{display:grid;grid-template-columns:200px 1fr 56px;gap:12px;align-items:center;font-size:14px}
.frow .n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.track{background:var(--line2);border-radius:4px;height:14px}
.bar{height:14px;border-radius:4px;background:var(--accent);min-width:2px}
table.t-users{min-width:860px}table.t-chats{min-width:620px}table.t-access{min-width:520px}table.t-audit{min-width:760px}
td.nw,td.pname{white-space:nowrap}td.pname{white-space:normal;min-width:110px;max-width:200px;overflow-wrap:anywhere}
td.wrapok{white-space:normal;overflow-wrap:anywhere}
.strong{font-weight:600}.linkbtn.alt{color:var(--accent)}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.loglist{gap:4px;max-height:220px;overflow:auto}
.scrim{position:fixed;inset:0;background:rgba(27,31,42,.35);z-index:20}
.scrim[hidden],.drawer[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100vw;z-index:21;border-radius:12px 0 0 12px;border-width:0 0 0 1px;overflow-y:auto;padding:20px 22px;box-shadow:-8px 0 32px rgba(27,31,42,.18);outline:none}
body.drawer-open{overflow:hidden}
.head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.search{display:flex;gap:8px;align-items:center;font-size:14px}
.search input,.field input,.field select{padding:9px 10px;border:1px solid var(--field);border-radius:8px;background:#fff;min-height:40px}
.search input{width:240px;max-width:100%}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-weight:600;text-align:left;padding:8px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
td{padding:10px 8px;border-top:1px solid var(--line2);vertical-align:top}
td.num{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums}
td.muted,.muted{color:var(--muted)}
td.muted{white-space:nowrap}
td.people{white-space:normal;min-width:140px;max-width:220px;overflow-wrap:anywhere}
tr.click{cursor:pointer}
tr.click:hover td{background:#F8F9FB}
tr.sel td{background:#FBF2F5}
.rowbtn{background:none;border:0;padding:0;font-weight:500;text-align:left;cursor:pointer;color:var(--ink)}
.rowbtn:hover{color:var(--accent)}
.pill{display:inline-block;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--line2);color:#3C4254}
.pill.paid{background:#DDF3EA;color:#13573F}
.pill.revoked{background:var(--amber-bg);color:var(--amber-fg)}
.pill.deleting{background:#FBE3EA;color:#8C1B43}
.btn{padding:10px 14px;border-radius:8px;border:1px solid var(--field);background:#fff;cursor:pointer;font-weight:500;min-height:40px}
.btn:hover{border-color:#9AA0B0}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.danger{border-color:#E3A9B8;color:var(--accent)}
.btn:disabled{opacity:.6;cursor:default}
.btn.sm{padding:6px 10px;min-height:32px;font-size:14px}
.err{background:#FBE3EA;color:#8C1B43;border-radius:8px;padding:10px 12px;font-size:14px}
.note{background:var(--amber-bg);color:var(--amber-fg);border-radius:8px;padding:10px 12px;font-size:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.panel-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.panel-head .t{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.close{background:none;border:0;font-size:22px;line-height:1;padding:4px 10px;cursor:pointer;border-radius:6px}
.row2{display:flex;justify-content:space-between;gap:8px;font-size:14px;border-bottom:1px solid var(--line2);padding-bottom:8px}
.stack{display:flex;flex-direction:column;gap:12px}
.sub{font-size:13px;color:var(--muted)}
.signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.signin .card{width:100%;max-width:400px;padding:28px 24px;gap:16px}
.signin .brand{padding:0;color:var(--ink)}
.signin .brand span{color:var(--accent)}
.signin .field input{width:100%}
.loading{color:var(--muted)}
@media (max-width:760px){
 .shell{flex-direction:column;flex-wrap:nowrap}
 nav.side{flex:none;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;gap:6px 12px}
 .brand{padding:0}
 .navlist{flex-direction:row;overflow-x:auto;gap:2px;order:3;width:100%}
 .navitem{white-space:nowrap;padding:8px 10px}
 .sidefoot{margin:0 0 0 auto;padding:0;font-size:12px;flex-direction:row;gap:10px;align-items:center;order:2;max-width:62%;word-break:normal;font-size:11px}
 .sidefoot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 main{padding:16px;gap:16px}
 h1{font-size:24px}
 .frow{grid-template-columns:1fr 48px}
 .frow .track{grid-column:1/-1;grid-row:2}
 .frow .n{grid-row:1;grid-column:2}
 .search,.search input{width:100%}
 .drawer{border-radius:0;padding:16px}
 .card{padding:14px}
}
@media (prefers-reduced-motion:no-preference){.bar{transition:width .4s ease}.btn,.navitem{transition:background-color .15s,border-color .15s}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}