/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:       #0d0d0d;
  --surface:  #161616;
  --surface2: #1e1e1e;
  --border:   #2a2a2a;
  --accent:   #7c5cfc;
  --accent-h: #9b7dff;
  --accent-d: #7c5cfc22;
  --red:      #ff4d6d;
  --green:    #22c55e;
  --yellow:   #f59e0b;
  --blue:     #3b82f6;
  --text:     #f0f0f0;
  --text-2:   #999;
  --text-3:   #444;
  --r:        10px;
  --rs:       6px;
  --sidebar:  210px;
  --font:     'Inter',system-ui,sans-serif;
  --mono:     'JetBrains Mono',monospace;
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}

/* ── Layout ─────────────────────────────────────── */
body{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:0 20px 24px;border-bottom:1px solid var(--border);margin-bottom:12px}
.logo-mark{width:36px;height:36px;background:var(--accent);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.sidebar-logo span{font-size:14px;font-weight:600;line-height:1.4}
.sidebar-logo small{color:var(--text-2);font-size:11px;font-weight:400}
nav{flex:1;padding:0 10px;display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rs);color:var(--text-2);font-size:13px;text-decoration:none;transition:background .15s,color .15s}
.nav-link svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.nav-link:hover{background:var(--surface2);color:var(--text)}
.nav-link.active{background:var(--accent-d);color:var(--accent-h);font-weight:500}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-2)}
.logout-btn{color:var(--red);text-decoration:none;font-size:12px}
.logout-btn:hover{text-decoration:underline}

/* ── Main ─────────────────────────────────────── */
.main-content{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.page-title{font-size:18px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-time{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.content-wrap{padding:28px;flex:1;overflow-y:auto}

/* ── Cards ─────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.card-label{font-size:10px;font-weight:600;letter-spacing:1.2px;color:var(--text-3);margin-bottom:14px}
.card-title{font-size:16px;font-weight:600;margin-bottom:4px}
.card-sub{font-size:12px;color:var(--text-2)}

/* ── Stat cards ─────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.stat-card .value{font-size:28px;font-weight:700;font-family:var(--mono);margin-bottom:4px}
.stat-card .label{font-size:12px;color:var(--text-2)}
.stat-card .delta{font-size:11px;margin-top:6px}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}
.stat-accent{ border-color:var(--accent); }
.stat-green { border-color:var(--green); }
.stat-yellow{ border-color:var(--yellow);}
.stat-red   { border-color:var(--red);   }

/* ── Table ─────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface2);padding:12px 16px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.8px;color:var(--text-3);white-space:nowrap;border-bottom:1px solid var(--border)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surface2)}
td{padding:12px 16px;font-size:13px;color:var(--text-2);vertical-align:middle}
td.mono{font-family:var(--mono);font-size:12px;color:var(--text)}
td .actions{display:flex;gap:6px}

/* ── Badges ─────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500}
.badge-green {background:#22c55e22;color:var(--green);border:1px solid #22c55e44}
.badge-red   {background:#ff4d6d22;color:var(--red);  border:1px solid #ff4d6d44}
.badge-yellow{background:#f59e0b22;color:var(--yellow);border:1px solid #f59e0b44}
.badge-blue  {background:#3b82f622;color:var(--blue); border:1px solid #3b82f644}
.badge-purple{background:var(--accent-d);color:var(--accent-h);border:1px solid #7c5cfc44}

/* ── Forms ─────────────────────────────────────── */
.form-group{margin-bottom:18px}
.form-group:last-child{margin-bottom:0}
label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px}
.input,.select-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:10px 13px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s}
.input:focus,.select-input:focus{border-color:var(--accent)}
.hint{font-size:11px;color:var(--text-3);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--rs);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;border:none;transition:background .15s,transform .1s;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;fill:currentColor}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-h)}
.btn-danger {background:var(--red);color:#fff}
.btn-green  {background:var(--green);color:#000}
.btn-ghost  {background:var(--surface2);border:1px solid var(--border);color:var(--text-2)}.btn-ghost:hover{color:var(--text)}
.btn-sm     {padding:5px 12px;font-size:12px}
.btn-icon   {padding:6px;border-radius:var(--rs)}

/* ── Alerts ─────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--rs);margin-bottom:18px;font-size:13px}
.alert-success{background:#22c55e18;border:1px solid #22c55e44;color:var(--green)}
.alert-error  {background:#ff4d6d18;border:1px solid #ff4d6d44;color:var(--red)}
.alert-info   {background:#3b82f618;border:1px solid #3b82f644;color:var(--blue)}

/* ── Grid layouts ─────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-18{margin-bottom:18px}.mb-24{margin-bottom:24px}
.flex{display:flex}.flex-between{justify-content:space-between}.flex-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}

/* ── Copy key ─────────────────────────────────────── */
.key-display{font-family:var(--mono);font-size:13px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.key-display span{color:var(--accent-h);letter-spacing:1px}
.copy-btn{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:3px;transition:color .15s}
.copy-btn:hover{color:var(--accent-h)}

/* ── Login page ─────────────────────────────────────── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);grid-column:1/-1}
.login-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:36px}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .logo-mark{width:52px;height:52px;font-size:18px;margin:0 auto 12px}
.login-logo h1{font-size:20px}
.login-logo p{font-size:13px;color:var(--text-2);margin-top:4px}

/* ── Pagination ─────────────────────────────────────── */
.pagination{display:flex;gap:6px;align-items:center;margin-top:18px}
.page-btn{padding:6px 12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface2);color:var(--text-2);cursor:pointer;font-size:12px;text-decoration:none}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.page-btn:hover:not(.active){background:var(--border)}

/* ── Chart placeholder ─────────────────────────────────────── */
.chart-box{height:220px;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13px;background:var(--surface2);border-radius:var(--rs)}

/* ── Empty state ─────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-3)}
.empty-state svg{width:44px;height:44px;fill:var(--text-3);margin-bottom:12px}
.empty-state p{font-size:13px}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:900px){
  body{grid-template-columns:1fr}
  .sidebar{display:none}
  .stats-row{grid-template-columns:1fr 1fr}
}