:root { color-scheme: dark; --background:#080d16; --surface:#101827; --border:#223047; --text:#f6f8ff; --muted:#8f9bb0; --primary:#6d6cff; --primary-light:#9c9bff; --cyan:#39d5df; --green:#49d49d; --danger:#ff7d91; --shadow:0 24px 80px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--background); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 12% -5%,rgba(109,108,255,.18),transparent 28rem),radial-gradient(circle at 95% 15%,rgba(57,213,223,.08),transparent 25rem),var(--background); font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif; font-size:14px; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 36px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(8,13,22,.86); backdrop-filter:blur(18px); }
.brand,.admin-menu,.login-brand,.user-badges { display:flex; align-items:center; } .brand { gap:12px; }
.brand-mark,.login-mark { display:grid; place-items:center; color:white; background:linear-gradient(145deg,var(--primary),#8c67ff); box-shadow:0 10px 30px rgba(109,108,255,.28); font-weight:800; }
.brand-mark { width:40px; height:40px; border-radius:12px; font-size:18px; }
.brand strong,.brand small { display:block; } .brand strong { font-size:15px; } .brand small { margin-top:2px; color:var(--muted); font-size:11px; }
.admin-menu { gap:16px; } .admin-email { color:#c5ccda; font-size:13px; }
.page-shell { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding:38px 0 64px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.page-heading h1 { margin:5px 0 7px; font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.035em; } .page-heading p { margin:0; color:var(--muted); }
.eyebrow { color:var(--primary-light)!important; font-size:10px; font-weight:800; letter-spacing:.16em; }
.live-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(73,212,157,.22); border-radius:99px; color:#a8efd2; background:rgba(73,212,157,.08); font-size:12px; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.metrics-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metric-card,.panel { border:1px solid var(--border); background:linear-gradient(155deg,rgba(20,31,49,.96),rgba(14,22,35,.96)); box-shadow:var(--shadow); }
.metric-card { position:relative; min-height:154px; padding:22px; border-radius:18px; overflow:hidden; }
.metric-card::after { position:absolute; width:110px; height:110px; right:-45px; bottom:-60px; border-radius:50%; background:rgba(109,108,255,.07); content:""; }
.metric-primary { border-color:rgba(109,108,255,.45); background:linear-gradient(145deg,rgba(73,71,177,.42),rgba(18,25,43,.98)); }
.metric-card p { margin:0 0 13px; color:#aab4c6; font-size:12px; } .metric-card strong { display:block; margin-bottom:7px; font-size:clamp(22px,2vw,30px); letter-spacing:-.035em; } .metric-card small { color:var(--muted); }
.metric-icon { position:absolute; top:18px; right:18px; display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.08); border-radius:9px; color:#b8b7ff; background:rgba(255,255,255,.04); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.7fr); gap:18px; margin-bottom:18px; }
.panel { border-radius:18px; } .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.panel-heading p,.panel-heading h2 { margin:0; } .panel-heading h2 { margin-top:4px; font-size:18px; } .panel-note { color:var(--muted); font-size:11px; }
.chart { display:flex; align-items:flex-end; height:245px; gap:clamp(6px,1.1vw,15px); padding:32px 26px 22px; }
.chart-column { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:10px; } .chart-column span { color:#7d899d; font-size:10px; transform:rotate(-35deg); }
.chart-bar { width:100%; max-width:34px; min-height:5px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,var(--cyan),var(--primary)); box-shadow:0 8px 24px rgba(83,134,255,.2); opacity:.9; }
.bar-h-10{height:10%}.bar-h-20{height:20%}.bar-h-30{height:30%}.bar-h-40{height:40%}.bar-h-50{height:50%}.bar-h-60{height:60%}.bar-h-70{height:70%}.bar-h-80{height:80%}.bar-h-90{height:90%}.bar-h-100{height:100%}
.direction-list { padding:8px 20px 18px; } .direction-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.055); } .direction-row:last-child { border-bottom:0; }
.direction-row>div { text-align:right; } .direction-row strong,.direction-row small { display:block; } .direction-row small { margin-top:4px; color:var(--muted); font-size:10px; }
.direction-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid rgba(57,213,223,.17); border-radius:9px; color:#a9e8ec; background:rgba(57,213,223,.065); font-size:11px; } .direction-badge b { color:var(--primary-light); } .direction-badge.small { padding:5px 8px; }
.users-panel,.sessions-panel { overflow:hidden; } .users-heading { align-items:flex-end; } .search { display:flex; gap:8px; }
.search input,.login-form input { color:var(--text); border:1px solid #2b3b55; outline:none; background:#0c1421; transition:border .2s,box-shadow .2s; }
.search input { width:min(290px,42vw); padding:10px 13px; border-radius:10px; } .search input:focus,.login-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(109,108,255,.13); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 15px; border:1px solid transparent; border-radius:10px; color:white; cursor:pointer; font-weight:650; }
.button-primary { background:linear-gradient(135deg,var(--primary),#876aff); box-shadow:0 12px 30px rgba(109,108,255,.23); } .button-secondary { border-color:#354767; background:#19253a; } .button-ghost { border-color:#2b394f; background:transparent; } .button-wide { width:100%; min-height:46px; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:15px 20px; border-bottom:1px solid rgba(255,255,255,.055); text-align:left; white-space:nowrap; }
th { color:#79869b; background:rgba(4,9,16,.2); font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; } td { color:#bdc6d5; font-size:12px; }
td strong,td small { display:block; } td strong { color:var(--text); } td small { margin-top:4px; color:#748198; } tbody tr { transition:background .15s; } tbody tr:hover { background:rgba(109,108,255,.035); }
.row-link { color:#aaa9ff; font-weight:650; } .empty-cell { padding:42px; color:var(--muted); text-align:center; }
.plan-badge,.status { display:inline-flex; align-items:center; padding:5px 8px; border-radius:7px; font-size:10px; font-weight:750; text-transform:uppercase; }
.plan-badge { color:#bbbaff; background:rgba(109,108,255,.12); } .status { color:#b4bfce; background:rgba(143,155,176,.1); }
.status-active,.status-completed { color:#8ce1bb; background:rgba(73,212,157,.11); } .status-failed,.status-forbidden,.status-limit_reached { color:#ff9cac; background:rgba(255,125,145,.11); } .status-cancelled { color:#f3ca83; background:rgba(243,202,131,.1); }
.breadcrumbs { display:flex; gap:9px; margin-bottom:24px; color:#758196; font-size:12px; } .breadcrumbs a { color:#aaa9ff; } .user-heading { align-items:center; } .user-badges { gap:9px; } .user-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.direction-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px 24px 24px; }
.direction-cards article { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:16px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(5,10,18,.22); }
.direction-cards article b { color:var(--cyan); } .direction-cards article strong,.direction-cards article small { grid-column:1/-1; } .direction-cards article strong { margin-top:8px; font-size:18px; } .direction-cards article small { color:var(--muted); }
.sessions-panel { margin-top:18px; } .empty-state { color:var(--muted); text-align:center; } .empty-state.compact { padding:28px 14px; }
.login-page { display:grid; place-items:center; padding:28px; } .login-shell { width:100%; }
.login-card { width:min(470px,100%); margin:auto; padding:34px; border:1px solid rgba(122,132,255,.25); border-radius:24px; background:linear-gradient(155deg,rgba(20,31,49,.98),rgba(10,17,29,.98)); box-shadow:0 40px 110px rgba(0,0,0,.46); }
.login-brand { gap:17px; margin-bottom:30px; } .login-mark { flex:0 0 auto; width:58px; height:58px; border-radius:18px; font-size:25px; } .login-brand h1 { margin:5px 0; font-size:25px; letter-spacing:-.025em; } .login-brand p { margin:0; color:var(--muted); }
.login-form { display:grid; gap:18px; } .login-form label span { display:block; margin-bottom:8px; color:#a8b3c6; font-size:11px; font-weight:700; text-transform:uppercase; } .login-form input { width:100%; height:48px; padding:0 14px; border-radius:11px; }
.alert { margin-bottom:20px; padding:12px 14px; border:1px solid rgba(255,125,145,.25); border-radius:10px; color:#ffb2be; background:rgba(255,125,145,.08); }
.security-note { margin:22px 0 0; color:#748198; text-align:center; font-size:11px; } .security-note span { color:var(--green); }
.not-found { padding:120px 24px; text-align:center; } .not-found span { color:var(--primary-light); font-size:70px; font-weight:850; } .not-found h1 { margin:8px 0; } .not-found p { margin:0 0 24px; color:var(--muted); }
@media(max-width:1120px){.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.direction-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.topbar{padding:0 18px}.admin-email{display:none}.page-shell{width:min(100% - 24px,1480px);padding-top:24px}.page-heading{align-items:flex-start;flex-direction:column}.metrics-grid,.user-metrics{grid-template-columns:1fr 1fr}.users-heading{align-items:stretch;flex-direction:column}.search input{width:100%}.direction-cards{grid-template-columns:1fr}.chart{gap:5px;padding-inline:14px}.chart-column span{display:none}.login-card{padding:25px}}
@media(max-width:460px){.metrics-grid,.user-metrics{grid-template-columns:1fr}.brand small{display:none}.login-brand{align-items:flex-start}}