/* Dread Development — Portal Design System */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-0:#000000;
  --bg-1:#060609;
  --bg-2:#0c0c12;
  --bg-3:#12121f;
  --surface:#0a0a14;
  --border:#1a1a2e;
  --border-2:#252540;
  --text:#c8c8dc;
  --text-2:#6a6a82;
  --text-3:#3a3a52;
  --white:#f0f0f8;
  --green:#22c55e;
  --red:#ef4444;
  --amber:#f59e0b;
  --blue:#4488ff;
  --cyan:#06b6d4;
  --purple:#a78bfa;
  --glow-xs:0 0 12px rgba(255,255,255,0.06);
  --glow-sm:0 0 24px rgba(255,255,255,0.08);
  --radius:8px;
  --radius-lg:12px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','Cascadia Code','Fira Code',monospace;
}
html{font-size:15px}
body{background:var(--bg-0);color:var(--text);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none;transition:color .15s}
a:hover{color:var(--white)}

/* ── Top Nav ── */
.topnav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:24px;
  padding:0 32px;height:56px;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-brand{
  font-weight:700;font-size:14px;letter-spacing:0.08em;
  color:var(--white);text-transform:uppercase;
  margin-right:8px;
}
.nav-brand span{color:var(--text-3)}
.nav-links{display:flex;gap:4px}
.nav-links a{
  padding:6px 14px;border-radius:6px;
  font-size:13px;color:var(--text-2);
  transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--white);background:var(--bg-3)}
.nav-links a.active{color:var(--white);background:var(--bg-3)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px}
.nav-right .user-name{color:var(--text-2)}
.nav-right .logout{
  color:var(--text-3);font-size:12px;letter-spacing:0.04em;
  padding:4px 12px;border:1px solid var(--border);border-radius:6px;
  transition:all .15s;
}
.nav-right .logout:hover{color:var(--red);border-color:rgba(239,68,68,0.3)}

/* ── Page Container ── */
.page{max-width:1400px;margin:0 auto;padding:32px}
.page-header{margin-bottom:32px}
.page-header h1{font-size:24px;font-weight:700;color:var(--white);letter-spacing:-0.01em}
.page-header p{font-size:14px;color:var(--text-2);margin-top:4px}

/* ── Cards ── */
.card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .2s;
}
.card:hover{border-color:var(--border-2)}
.card-head{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-2);
}
.card-head .icon{font-size:15px;opacity:0.7}
.card-body{padding:16px 20px}

/* ── Stat Chips ── */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat-chip{
  background:var(--bg-1);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;text-align:center;
  transition:border-color .2s;
}
.stat-chip:hover{border-color:var(--border-2)}
.stat-val{
  font-size:26px;font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.stat-lbl{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.06em;margin-top:6px}
.c-green{color:var(--green)}.c-red{color:var(--red)}.c-amber{color:var(--amber)}
.c-blue{color:var(--blue)}.c-cyan{color:var(--cyan)}.c-purple{color:var(--purple)}

/* ── Mini stats ── */
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
.mini-stat{text-align:center;padding:10px 4px}
.mini-stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.mini-stat .l{font-size:10px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.05em;margin-top:3px}

/* ── Tables ── */
.tbl{width:100%;font-size:12px;border-collapse:collapse}
.tbl th{
  text-align:left;padding:8px 10px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-3);border-bottom:1px solid var(--border);
}
.tbl td{padding:8px 10px;border-bottom:1px solid rgba(26,26,46,0.5);font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:rgba(68,136,255,0.03)}

/* ── Badges ── */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.badge-green{background:rgba(34,197,94,.12);color:var(--green)}
.badge-red{background:rgba(239,68,68,.12);color:var(--red)}
.badge-amber{background:rgba(245,158,11,.12);color:var(--amber)}
.badge-blue{background:rgba(68,136,255,.12);color:var(--blue)}
.badge-purple{background:rgba(167,139,250,.12);color:var(--purple)}
.badge-ghost{background:var(--bg-3);color:var(--text-2)}

/* ── Log Feed ── */
.log-feed{
  max-height:220px;overflow-y:auto;
  font-family:var(--mono);font-size:12px;line-height:1.8;
}
.log-feed::-webkit-scrollbar{width:3px}
.log-feed::-webkit-scrollbar-track{background:transparent}
.log-feed::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.log-line{padding:1px 0;border-bottom:1px solid rgba(26,26,46,0.3)}
.log-line .ts{color:var(--text-3)}.log-line .ip{color:var(--amber)}.log-line .act{color:var(--red)}.log-line .rsn{color:var(--cyan)}

/* ── Pulse indicator ── */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.pulse.live{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Grid layouts ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:12px}

/* ── Forms ── */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.field input{
  width:100%;padding:10px 14px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--white);font-size:14px;font-family:var(--font);
  outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--blue)}
.field input::placeholder{color:var(--text-3)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border:none;border-radius:var(--radius);
  font-size:13px;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:all .15s;letter-spacing:0.02em;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#5599ff;box-shadow:0 0 20px rgba(68,136,255,0.2)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-2);color:var(--white)}
.btn-danger{background:transparent;color:var(--red);border:1px solid rgba(239,68,68,0.2)}
.btn-danger:hover{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.4)}
.btn-sm{padding:6px 14px;font-size:12px}

/* ── Responsive ── */
@media(max-width:768px){
  .topnav{padding:0 16px;gap:12px}
  .page{padding:20px 16px}
  .stats-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
}