:root{
  --side-w:248px;
  --brand:#4f46e5;
}
[data-bs-theme="light"]{ --app-bg:#f4f5fb; --side-bg:#1e2130; --side-fg:#c9cede; --side-active:#2b2f45; }
[data-bs-theme="dark"]{  --app-bg:#0f1116; --side-bg:#12141b; --side-fg:#aab0c2; --side-active:#20232e; }
body{ background:var(--app-bg); }

/* ---- Auth screens ---- */
.auth-body{ min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#4f46e5,#7c3aed); padding:20px; }
.auth-card{ width:100%; max-width:400px; border:none; border-radius:18px; }
.auth-brand{ width:56px;height:56px;border-radius:16px;display:inline-grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);font-size:26px }

/* ---- App shell ---- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:var(--side-w); flex:none; background:var(--side-bg); color:var(--side-fg);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar .brand{ padding:20px 20px 14px; font-weight:700; font-size:17px; color:#fff; display:flex; align-items:center; gap:10px; }
.sidebar .brand i{ color:#8b8ff7; }
.sidebar .nav{ padding:6px 10px; gap:2px; }
.sidebar .nav-link{ color:var(--side-fg); border-radius:10px; padding:10px 12px; font-size:14px; display:flex; align-items:center; gap:10px; }
.sidebar .nav-link:hover{ background:var(--side-active); color:#fff; }
.sidebar .nav-link.active{ background:var(--brand); color:#fff; }
.sidebar-foot{ margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,.08); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:10; background:var(--bs-body-bg); border-bottom:1px solid var(--bs-border-color);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between; }
.content{ padding:24px; flex:1; }

/* ---- Stat cards (equal height) ---- */
.stat-card{ border:1px solid var(--bs-border-color); border-radius:16px; }
.stat-card .stat-icon{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:rgba(79,70,229,.12); color:var(--brand); margin-bottom:12px; }
.stat-card .stat-value{ font-size:30px; font-weight:700; line-height:1; letter-spacing:-.5px; }
.stat-card .stat-value .stat-sub{ font-size:15px; font-weight:500; color:var(--bs-secondary-color); margin-left:2px; }
.stat-card .stat-label{ font-size:13px; color:var(--bs-secondary-color); margin-top:6px; }
.stat-card.tone-green .stat-icon{ background:rgba(12,157,88,.14); color:#0c9d58; }
.stat-card.tone-blue .stat-icon{ background:rgba(37,99,235,.14); color:#2563eb; }
.stat-card.tone-amber .stat-icon{ background:rgba(232,140,0,.16); color:#e88c00; }
.stat-card.tone-indigo .stat-icon{ background:rgba(124,58,237,.14); color:#7c3aed; }

.card{ border-radius:14px; }
.card-header{ background:transparent; font-weight:600; }

/* ---- Empty states ---- */
.empty-state{ text-align:center; padding:40px 20px; color:var(--bs-secondary-color); }
.empty-state i{ font-size:44px; opacity:.4; display:block; margin-bottom:10px; }
.empty-state h3{ font-size:17px; color:var(--bs-body-color); font-weight:600; margin-bottom:6px; }
.empty-state p{ max-width:420px; margin:0 auto 14px; font-size:14px; }

/* ---- Badges ---- */
.tone-badge{ text-transform:capitalize; }
.tone-badge.tone-green{ background:rgba(12,157,88,.15); color:#0c9d58; }
.tone-badge.tone-muted{ background:var(--bs-secondary-bg); color:var(--bs-secondary-color); }

.activity-list .list-group-item{ font-size:13.5px; }

@media (max-width: 900px){
  .sidebar{ position:fixed; left:-260px; z-index:1050; transition:left .2s; }
  .sidebar.open{ left:0; }
  .content{ padding:16px; }
}

/* ---- Phase 2: monitoring UI ---- */
.score-pill{ display:inline-block; min-width:38px; padding:4px 8px; border-radius:9px; font-weight:700; font-size:15px; text-align:center; }
.score-pill.good{ background:rgba(12,157,88,.15); color:#0c9d58; }
.score-pill.avg{ background:rgba(232,140,0,.16); color:#e88c00; }
.score-pill.poor{ background:rgba(220,53,69,.15); color:#dc3545; }
.score-pill.muted{ background:var(--bs-secondary-bg); color:var(--bs-secondary-color); }

.website-tabs .nav-link{ cursor:pointer; }
.website-tabs .nav-link.disabled{ color:var(--bs-secondary-color); opacity:.6; }

.robots-pre{ max-height:340px; overflow:auto; background:var(--bs-tertiary-bg); padding:14px; border-radius:10px;
  font-size:12.5px; white-space:pre-wrap; word-break:break-word; }

.run-btn:disabled{ opacity:.7; }
canvas{ max-width:100%; }

/* ---- Phase 2b: "material" speed tab ---- */
.gauge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gauge{ background:var(--bs-tertiary-bg); border-radius:16px; padding:16px 10px 12px; text-align:center; }
.gauge-svg{ width:100px; height:100px; }
.gauge-num{ font-size:30px; font-weight:800; }
.gauge-label{ margin-top:4px; font-size:13px; color:var(--bs-secondary-color); font-weight:600; }
.gauge-trend{ font-size:12px; font-weight:800; }

.section-label{ display:flex; align-items:center; gap:6px; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--bs-secondary-color); font-weight:700; margin:18px 0 10px; }

.metric-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-tile{ background:var(--bs-tertiary-bg); border-radius:12px; padding:10px 12px; }
.metric-top{ font-size:12px; color:var(--bs-secondary-color); font-weight:600; display:flex; align-items:center; gap:6px; }
.metric-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.metric-val{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:22px; font-weight:700; margin-top:4px; line-height:1.1; }

.spark-card{ background:var(--bs-tertiary-bg); border-radius:12px; padding:12px 14px; margin-top:14px; }
.spark-head{ display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bs-secondary-color); font-weight:700; }
.spark-wrap{ height:56px; margin-top:8px; }
.trend-badge{ font-weight:800; font-size:12px; }
.trend-badge.down{ color:#dc3545; } .trend-badge.up{ color:#0c9d58; } .trend-badge.flat{ color:var(--bs-secondary-color); }

.crux{ font-size:13px; margin-top:14px; color:var(--bs-body-color); line-height:1.5; }
.crux.muted{ color:var(--bs-secondary-color); }
.crux-pass{ color:#0c9d58; font-weight:700; } .crux-fail{ color:#dc3545; font-weight:700; }