:root{
  --bg:#10141B;
  --bg-raise:#171D27;
  --card:#1B222E;
  --line:#2B3444;
  --line-soft:#232A38;
  --text:#E7EAF0;
  --text-dim:#8D96A8;
  --text-faint:#5C6577;
  --teal:#2FD4BE;
  --teal-dim:#0E4A44;
  --coral:#F2655F;
  --coral-dim:#4A1E1D;
  --amber:#F0A83C;
  --amber-dim:#4A3312;
  --blue:#4E9BF2;
  --font-display:'Chakra Petch',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;}
.wrap{max-width:1240px;margin:0 auto;padding:24px 32px 80px;}

/* Top nav */
nav.topnav{
  background:var(--bg-raise);border-bottom:1px solid var(--line);
  padding:14px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
nav.topnav .brand{font-family:var(--font-display);font-weight:600;font-size:16px;}
nav.topnav .brand .tag{font-family:var(--font-mono);font-size:11px;color:var(--teal);background:var(--teal-dim);padding:2px 8px;border-radius:4px;margin-left:8px;}
nav.topnav .links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
nav.topnav a{
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);text-decoration:none;
  padding:7px 12px;border-radius:7px;transition:background .15s,color .15s;
}
nav.topnav a:hover{background:var(--card);color:var(--text);}
nav.topnav a.active{background:var(--teal-dim);color:var(--teal);}
nav.topnav .user{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}
nav.topnav .user b{color:var(--text-dim);}

/* Cards / panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;}
.panel h3{font-family:var(--font-display);font-weight:500;font-size:14px;margin-bottom:14px;}
.sec-head{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px;}
.sec-head .num{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.sec-head h2{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:.02em;}
.sec-head .rule{flex:1;height:1px;background:var(--line);}
.chart-holder{position:relative;min-height:60px;overflow-x:auto;}
.chart-empty{color:var(--text-faint);font-family:var(--font-mono);font-size:12px;padding:30px 0;text-align:center;}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.kpi .label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.kpi .value{font-family:var(--font-display);font-size:26px;font-weight:600;}
.kpi .sub{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-top:4px;}
.kpi.accent-coral .value{color:var(--coral);}
.kpi.accent-teal .value{color:var(--teal);}
.kpi.accent-amber .value{color:var(--amber);}

.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;padding:7px 10px;border-bottom:1px solid var(--line);}
td{padding:8px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-dim);font-family:var(--font-mono);}
tr:hover td{color:var(--text);}
.pill{padding:2px 8px;border-radius:4px;font-size:10.5px;font-family:var(--font-mono);display:inline-block;}
.pill.accept{background:var(--teal-dim);color:var(--teal);}
.pill.deny{background:var(--coral-dim);color:var(--coral);}
.pill.other{background:var(--line-soft);color:var(--text-dim);}
.pill.admin{background:var(--amber-dim);color:var(--amber);}
.pill.viewer{background:var(--line-soft);color:var(--text-dim);}
td a.drill{color:var(--text);text-decoration:none;border-bottom:1px dashed var(--text-faint);transition:color .15s,border-color .15s;}
td a.drill:hover{color:var(--teal);border-color:var(--teal);}

/* Filter form */
.filter-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.filter-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.f-field label{display:block;font-size:11px;color:var(--text-dim);margin-bottom:6px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em;}
.f-field input,.f-field select{width:100%;background:var(--bg-raise);border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;color:var(--text);font-family:var(--font-body);outline:none;}
.f-field input:focus,.f-field select:focus{border-color:var(--teal);}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.result-badge{font-family:var(--font-mono);font-size:11.5px;color:var(--teal);background:var(--teal-dim);padding:4px 11px;border-radius:20px;}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.pagination a,.pagination span{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);background:var(--bg-raise);border:1px solid var(--line);border-radius:6px;padding:5px 11px;text-decoration:none;}
.pagination a:hover{border-color:var(--teal);color:var(--teal);}
.pagination span.active{background:var(--teal-dim);color:var(--teal);border-color:var(--teal);}
.pagination span.disabled{opacity:.35;}

/* Buttons */
.btn{font-family:var(--font-mono);font-size:12.5px;border-radius:8px;padding:9px 16px;cursor:pointer;border:1px solid var(--line);background:var(--bg-raise);color:var(--text-dim);text-decoration:none;display:inline-block;}
.btn:hover{color:var(--text);border-color:var(--text-dim);}
.btn-primary{background:var(--teal-dim);color:var(--teal);border-color:var(--teal-dim);}
.btn-primary:hover{border-color:var(--teal);}
.btn-danger{background:var(--coral-dim);color:var(--coral);border-color:var(--coral-dim);}
.btn-danger:hover{border-color:var(--coral);}

/* Forms (login / setup / users) */
.auth-wrap{max-width:380px;margin:80px auto;}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:32px;}
.auth-card h1{font-family:var(--font-display);font-size:20px;margin-bottom:6px;}
.auth-card p.sub{font-size:12.5px;color:var(--text-dim);margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;font-family:var(--font-mono);}
.field input,.field select{width:100%;background:var(--bg-raise);border:1px solid var(--line);border-radius:7px;padding:10px 12px;font-size:14px;color:var(--text);outline:none;}
.field input:focus,.field select:focus{border-color:var(--teal);}
.alert{padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:16px;font-family:var(--font-mono);}
.alert-error{background:var(--coral-dim);color:var(--coral);border:1px solid var(--coral);}
.alert-success{background:var(--teal-dim);color:var(--teal);border:1px solid var(--teal);}

.dropzone{border:1px dashed var(--line);border-radius:10px;padding:26px;text-align:center;background:var(--bg-raise);margin-bottom:20px;}
.dropzone h3{font-family:var(--font-display);font-size:15px;font-weight:500;margin-bottom:4px;}
.dropzone p{font-size:12px;color:var(--text-dim);}

@media(max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .grid2,.grid3,.filter-grid{grid-template-columns:1fr;}
}