:root {
  --sidebar: #1a1a2e;
  --sidebar-2: #16213e;
  --cyan: #00b4d8;
  --cyan-2: #0096c7;
  --bg: #f4f6fb;
  --card: #ffffff;
  --ink: #1a1a2e;
  --muted: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
}

.layout { display: flex; min-height: 100vh; }

/* --- Sidebar --- */
.sidebar {
  width: 250px;
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; padding: 20px 20px 6px; color: #fff;
}
.sidebar-brand i { color: var(--cyan); font-size: 26px; }
.sidebar-brand b { color: var(--cyan); }
.sidebar-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #64748b; padding: 0 20px 14px; }
.sidebar-nav { display: flex; flex-direction: column; flex: 1; padding: 6px 10px; }
.sidebar-nav a {
  color: #cbd5e1; text-decoration: none; padding: 11px 14px; border-radius: 8px;
  display: flex; align-items: center; gap: 12px; font-size: 15px; margin-bottom: 3px;
  transition: background .15s, color .15s;
}
.sidebar-nav a i { font-size: 17px; width: 20px; text-align: center; }
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav a.active { background: var(--cyan); color: #06222b; font-weight: 600; }
.sidebar-foot { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot a { color: #94a3b8; text-decoration: none; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.sidebar-foot a:hover { color: #fff; }

/* --- Main --- */
.main { flex: 1; padding: 22px 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.topbar h1 { font-size: 24px; margin: 0; font-weight: 700; }
.topbar-right { display: flex; gap: 8px; }
.badge-pqc { background: #e0f2fe; color: #075985; font-weight: 500; }
.badge-ai { background: #ecfeff; color: #155e75; font-weight: 500; }
.badge-role { background: #fef3c7; color: #92400e; font-weight: 600; }
.badge-name { background: #f1f5f9; color: #334155; font-weight: 600; }

/* --- KPI cards --- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
  background: var(--card); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); border: 1px solid #eef2f7;
}
.kpi .kpi-label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.kpi .kpi-value { font-size: 30px; font-weight: 800; margin-top: 4px; }
.kpi .kpi-icon { float: right; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.kpi.kpi-cyan  .kpi-value { color: var(--cyan-2); }
.kpi.kpi-blue  .kpi-value { color: #2563eb; }
.kpi.kpi-green .kpi-value { color: #059669; }
.kpi.kpi-violet .kpi-value { color: #7c3aed; }
.kpi.kpi-cyan  .kpi-icon { background: linear-gradient(135deg,#67e8f9,#22d3ee); color:#083344; }
.kpi.kpi-blue  .kpi-icon { background: linear-gradient(135deg,#93c5fd,#3b82f6); color:#172554; }
.kpi.kpi-green .kpi-icon { background: linear-gradient(135deg,#6ee7b7,#10b981); color:#064e3b; }
.kpi.kpi-violet .kpi-icon { background: linear-gradient(135deg,#c4b5fd,#8b5cf6); color:#312e81; }

/* --- Cards / panels --- */
.card { border: 1px solid #eef2f7; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.card-header { background: #fff; border-bottom: 1px solid #eef2f7; font-weight: 600; border-radius: 14px 14px 0 0 !important; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 22px; }
.chart-box { background: var(--card); border: 1px solid #eef2f7; border-radius: 14px; padding: 18px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.chart-box h6 { font-weight: 700; margin-bottom: 12px; color: var(--ink); }
.chart-box canvas { max-height: 260px; }

/* --- Tables --- */
.table thead th { background: #f8fafc; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #eef2f7; }
.table td { vertical-align: middle; }

.btn-cyan { background: var(--cyan); border-color: var(--cyan); color: #06222b; font-weight: 600; }
.btn-cyan:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: #fff; }

.badge-sev-mild    { background: #dcfce7; color: #166534; }
.badge-sev-moderate{ background: #fef9c3; color: #854d0e; }
.badge-sev-severe  { background: #fee2e2; color: #991b1b; }

.ai-result {
  background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 18px;
  white-space: pre-wrap; line-height: 1.6; font-size: 15px;
}
.ai-result h1, .ai-result h2, .ai-result h3, .ai-result h4 { color: #67e8f9; }
.ai-result strong, .ai-result b { color: #fff; }

.window-title {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, var(--sidebar), var(--sidebar-2)); color: #fff;
  padding: 9px 14px; border-radius: 10px 10px 0 0; font-weight: 600;
}
.window-dots i { font-size: 10px; margin-left: 5px; opacity: .7; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e, #0f172a); }
.login-card { width: 380px; background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.login-card h3 { font-weight: 800; margin-bottom: 4px; }
.login-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }