*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#0a0a0a;color:#f1f5f9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.6;font-size:14px}

/* ── Login gate ── */
#login-gate{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0a0a0a}
.login-center{text-align:center;max-width:420px;padding:48px 32px}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:700;color:#f1f5f9;margin-bottom:32px}
.login-logo svg{color:#34d399}
.login-center h2{font-size:24px;font-weight:700;margin-bottom:12px;color:#f1f5f9}
.login-center p{color:#6b7280;margin-bottom:32px;font-size:15px;line-height:1.6}
.login-divider{width:48px;height:1px;background:#1e1e1e;margin:0 auto 32px}

/* ── App shell ── */
#app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ── */
#sidebar{width:220px;min-width:220px;background:#0f0f0f;border-right:1px solid #1e1e1e;display:flex;flex-direction:column}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 18px;font-size:15px;font-weight:700;color:#f1f5f9;text-decoration:none;border-bottom:1px solid #1e1e1e}
.sidebar-logo svg{flex-shrink:0;color:#34d399}
.sidebar-nav{flex:1;padding:10px 0}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 20px;color:#6b7280;text-decoration:none;font-size:13px;font-weight:500;transition:color 0.15s,background 0.15s;border-left:2px solid transparent}
.nav-item:hover{color:#f1f5f9;background:#161616}
.nav-item.active{color:#f1f5f9;background:#161616;border-left-color:#34d399}
.nav-svg{flex-shrink:0;opacity:0.6;transition:opacity 0.15s}
.nav-item:hover .nav-svg,.nav-item.active .nav-svg{opacity:1}
.sidebar-user{padding:16px 20px;border-top:1px solid #1e1e1e;font-size:12px;color:#6b7280}
.sidebar-user-name{font-weight:500;color:#9ca3af;margin-bottom:4px}
.btn-link{background:none;border:none;color:#6b7280;cursor:pointer;font-size:12px;padding:0;display:block;transition:color 0.15s}
.btn-link:hover{color:#34d399}

/* ── Main content ── */
#main-content{flex:1;overflow-y:auto;padding:36px 48px;background:#0a0a0a}

/* ── Page header ── */
.page-header{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #1a1a1a}
.page-header h1{font-size:20px;font-weight:700;color:#f1f5f9}
.page-header-sub{font-size:13px;color:#6b7280;margin-top:4px}
.back-link{display:inline-flex;align-items:center;gap:5px;color:#6b7280;text-decoration:none;font-size:13px;margin-bottom:12px;transition:color 0.15s}
.back-link:hover{color:#34d399}

/* ── Stat cards ── */
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:36px}
.stat-card{
  background:#111;
  border:1px solid #1e1e1e;
  border-top:2px solid #1e1e1e;
  border-radius:10px;
  padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor:default;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.stat-icon{
  margin-bottom:14px;
  color:#4b5563;
  transition:color 0.2s;
}
.stat-card:hover .stat-icon{color:var(--card-accent,#6b7280)}
.stat-val{font-size:26px;font-weight:700;letter-spacing:-0.5px;color:#f1f5f9;transition:color 0.3s}
.stat-label{font-size:11px;color:#6b7280;margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;font-weight:500}
.stat-health{font-size:11px;font-weight:700;margin-top:8px;text-transform:uppercase;letter-spacing:0.5px;min-height:14px;transition:color 0.3s}
.stat-health.good{color:#34d399}
.stat-health.warn{color:#f59e0b}
.stat-health.bad{color:#f87171}
.stat-health.neutral{color:#6b7280}

/* Card accent system — set via JS style.setProperty */
.stat-card{--card-accent:#1e1e1e}

/* ── Section ── */
.section{margin-top:32px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section h2{font-size:11px;font-weight:700;color:#4b5563;text-transform:uppercase;letter-spacing:1px}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;background:#111;border:1px solid #1e1e1e;border-radius:10px;overflow:hidden;font-size:13px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid #1a1a1a}
th{background:#0f0f0f;font-size:11px;color:#4b5563;font-weight:700;text-transform:uppercase;letter-spacing:0.6px}
tr:last-child td{border-bottom:none}
tr:hover td{background:#141414}
td{color:#d1d5db}
.row-link{cursor:pointer}
.row-link:hover td{background:#161616}

/* ── Pass rate / drift inline colors ── */
.val-good{color:#34d399;font-weight:600}
.val-warn{color:#f59e0b;font-weight:600}
.val-bad{color:#f87171;font-weight:600}
.val-neutral{color:#9ca3af}

/* ── Health dot ── */
.health-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.health-dot.good{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,0.6)}
.health-dot.warn{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,0.5)}
.health-dot.bad{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,0.5)}
.health-dot.inactive{background:#374151}

/* ── Links ── */
.link{color:#34d399;text-decoration:none;font-weight:500}
.link:hover{color:#6ee7b7}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px}
.badge-pass{background:#052e16;color:#34d399;border:1px solid #065f36}
.badge-warn{background:#2d1f00;color:#f59e0b;border:1px solid #451f00}
.badge-fail{background:#2d0a0a;color:#f87171;border:1px solid #450a0a}

/* ── Empty state ── */
.empty-state{text-align:center;padding:64px 24px;color:#6b7280;font-size:13px;background:#111;border:1px solid #1e1e1e;border-radius:10px;line-height:1.7}
.empty-state-icon{display:flex;justify-content:center;margin-bottom:16px;color:#2d2d2d}
.empty-state-title{font-size:14px;font-weight:600;color:#4b5563;margin-bottom:6px}

/* ── Check detail ── */
.check-summary{background:#111;border:1px solid #1e1e1e;border-radius:10px;padding:24px;margin-bottom:24px}
.check-meta{font-size:13px;color:#6b7280;margin-bottom:20px;line-height:1.7;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.check-stats{display:flex;gap:32px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #1a1a1a}
.mini-stat{text-align:center;min-width:80px}
.mini-val{font-size:20px;font-weight:700;color:#34d399}
.mini-label{font-size:11px;color:#6b7280;margin-top:3px;text-transform:uppercase;letter-spacing:0.4px}

/* ── Item list ── */
.item-list{list-style:none;background:#111;border:1px solid #1e1e1e;border-radius:10px;overflow:hidden}
.item-list li{padding:9px 16px;border-bottom:1px solid #1a1a1a;font-size:13px;color:#d1d5db}
.item-list li:last-child{border-bottom:none}

/* ── Alignment label ── */
.align-label{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px}
.align-strong{background:#052e16;color:#34d399;border:1px solid #065f36}
.align-moderate{background:#2d1f00;color:#f59e0b;border:1px solid #451f00}
.align-low{background:#2d0a0a;color:#f87171;border:1px solid #450a0a}

/* ── Settings ── */
.settings-card{background:#111;border:1px solid #1e1e1e;border-radius:10px;padding:28px;max-width:520px}
.settings-card+.settings-card{margin-top:16px}
.settings-card h2{font-size:11px;font-weight:700;color:#4b5563;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.plan-name{font-size:20px;font-weight:700;color:#f1f5f9;margin-bottom:6px}
.plan-desc{font-size:13px;color:#6b7280;margin-bottom:20px;line-height:1.7}
.plan-badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:12px}
.plan-free{background:#1a1a1a;color:#6b7280;border:1px solid #2a2a2a}
.plan-pro{background:#052e16;color:#34d399;border:1px solid #065f36}
.pro-features{list-style:none;margin-bottom:24px}
.pro-features li{padding:6px 0;font-size:13px;color:#9ca3af;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;gap:8px}
.pro-features li:last-child{border-bottom:none}
.pro-features li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#34d399;flex-shrink:0}
.plan-renew{font-size:12px;color:#4b5563;margin-top:8px}

/* ── Buttons ── */
.btn{display:inline-block;background:#34d399;color:#0a0a0a;padding:10px 22px;border-radius:7px;text-decoration:none;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:background 0.15s,transform 0.1s}
.btn:hover{background:#6ee7b7;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:transparent;color:#f1f5f9;border:1px solid #2a2a2a;padding:9px 20px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:border-color 0.15s,color 0.15s}
.btn-secondary:hover{border-color:#34d399;color:#34d399}

/* ── Code ── */
code{background:#1a1a1a;color:#a3e635;padding:2px 7px;border-radius:4px;font-size:12px;font-family:"SF Mono",Monaco,"Courier New",monospace;border:1px solid #2a2a2a}

/* ── Goal panel (cockpit) ── */
.goal-card{background:#0e0e10;border:1px solid #2a2a2a;border-left:3px solid #818cf8;border-radius:8px;padding:18px 20px;margin-bottom:14px}
.goal-card + .goal-card{margin-top:0}
.goal-title{font-size:15px;font-weight:600;color:#e5e7eb;margin-bottom:8px}
.goal-narrative{font-size:13px;line-height:1.55;color:#cbd5e1;margin-bottom:12px;white-space:pre-wrap;word-break:break-word}
.goal-meta{font-size:11px;color:#6b7280;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.goal-meta .goal-id{font-size:10px;padding:1px 6px}

@media(max-width:768px){
  #sidebar{display:none}
  #main-content{padding:20px 16px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}