:root{
    --bg:#0d1117;
    --bg-card:#161b22;
    --bg-card-hover:#1c2229;
    --border:#30363d;
    --fg:#c9d1d9;
    --fg-strong:#f0f6fc;
    --muted:#8b949e;
    --accent:#58a6ff;
    --accent-strong:#1f6feb;
    --green:#3fb950;
    --orange:#d29922;
    --red:#f85149;
    --shadow:0 1px 0 rgba(255,255,255,.02);
}
@media (prefers-color-scheme: light){
    :root{
        --bg:#fafbfc;
        --bg-card:#ffffff;
        --bg-card-hover:#f6f8fa;
        --border:#e1e4e8;
        --fg:#24292f;
        --fg-strong:#0d1117;
        --muted:#586069;
        --accent:#0366d6;
        --accent-strong:#0353b4;
        --green:#28a745;
        --orange:#b08800;
        --red:#cb2431;
        --shadow:0 1px 0 rgba(27,31,35,.04);
    }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:14px;line-height:1.45}
code{font-family:'SF Mono',Menlo,Consolas,monospace;background:rgba(110,118,129,.1);padding:1px 4px;border-radius:3px;font-size:.85em}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--fg-strong);margin-top:0}
h1{font-size:1.6rem}
h2{font-size:1.15rem;margin-bottom:.75rem}
h3{font-size:1rem;margin-top:1.5rem}
.muted{color:var(--muted)}
.small{font-size:.85em}
.right{text-align:right}

/* Topbar */
.topbar{display:flex;align-items:center;gap:2rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg-card)}
.topbar .brand{font-weight:600;color:var(--fg-strong);font-size:1.05rem}
.topbar .tabs{display:flex;gap:.25rem;flex:1;flex-wrap:wrap}
.topbar .tabs a{color:var(--fg);padding:.4rem .8rem;border-radius:6px;font-weight:500}
.topbar .tabs a.active{background:var(--accent);color:white}
.topbar .tabs a:hover:not(.active){background:var(--bg-card-hover);text-decoration:none}
.topbar .user{display:flex;align-items:center;gap:.75rem}

/* Cards & grids */
.dash{padding:1.5rem;max-width:1400px;margin:0 auto}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
.card-header h2{margin-bottom:0}
.grid{display:grid;gap:1rem;margin-bottom:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* KPI */
.kpi{padding:1rem 1.25rem}
.kpi-label{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi-value{font-size:2rem;font-weight:600;color:var(--fg-strong);margin:.25rem 0 .25rem}
.kpi-sub{font-size:.85rem;line-height:1.4}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table.small{font-size:.85rem}
.table th{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);vertical-align:top}
.table tbody tr:hover{background:var(--bg-card-hover)}

/* Tags & status */
.tag{display:inline-block;background:rgba(110,118,129,.15);color:var(--fg);padding:1px 7px;border-radius:4px;font-size:.78rem;font-family:'SF Mono',Menlo,monospace}
.status{display:inline-block;padding:1px 7px;border-radius:10px;font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.status-draft{background:rgba(139,148,158,.2);color:var(--muted)}
.status-needs_review,.status-warn{background:rgba(210,153,34,.2);color:var(--orange)}
.status-approved{background:rgba(63,185,80,.18);color:var(--green)}
.status-rejected,.status-error,.status-invalid{background:rgba(248,81,73,.18);color:var(--red)}
.status-published,.status-info{background:rgba(88,166,255,.18);color:var(--accent)}
.status-new{background:rgba(139,148,158,.15);color:var(--fg)}
.status-enriched{background:rgba(63,185,80,.15);color:var(--green)}
.status-contacted{background:rgba(88,166,255,.15);color:var(--accent)}
.status-replied{background:rgba(63,185,80,.25);color:var(--green)}
.status-unsubscribed{background:rgba(248,81,73,.15);color:var(--red)}

/* Score badges */
.score{display:inline-block;font-weight:600;padding:1px 8px;border-radius:4px;font-family:'SF Mono',Menlo,monospace}
.score-hi{background:rgba(63,185,80,.2);color:var(--green)}
.score-md{background:rgba(210,153,34,.2);color:var(--orange)}
.score-lo{background:rgba(139,148,158,.15);color:var(--muted)}

/* Buttons */
.btn{display:inline-block;background:var(--bg-card-hover);border:1px solid var(--border);color:var(--fg);padding:.4rem .9rem;border-radius:6px;font-size:.85rem;cursor:pointer;font-weight:500;line-height:1.2;text-decoration:none}
.btn:hover{background:var(--border);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:white}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.danger{background:rgba(248,81,73,.15);border-color:var(--red);color:var(--red)}
.btn.danger:hover{background:var(--red);color:white}
.btn.ghost{background:transparent}
.btn.small{padding:.25rem .6rem;font-size:.8rem}
.btn.block{display:block;width:100%}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:2.5rem;max-width:380px;width:100%}
.login-card h1{margin-bottom:.25rem;font-size:1.5rem}
.login-card label{display:block;margin-bottom:1rem;color:var(--fg-strong);font-size:.9rem;font-weight:500}
.login-card input{width:100%;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--border);color:var(--fg);border-radius:6px;font-size:1rem;margin-top:.25rem}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card .alert{background:rgba(248,81,73,.15);border:1px solid var(--red);color:var(--red);padding:.6rem .8rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}

.alert{background:rgba(210,153,34,.15);border:1px solid var(--orange);color:var(--orange);padding:.5rem .75rem;border-radius:6px;font-size:.85rem;margin-top:.5rem}

/* Pill tabs */
.pill-tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.pill-tabs a{padding:.25rem .7rem;border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--fg)}
.pill-tabs a.active{background:var(--accent);color:white;border-color:var(--accent)}

/* Forms */
.inline-form{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.inline-form input{padding:.4rem .7rem;background:var(--bg);border:1px solid var(--border);color:var(--fg);border-radius:6px;font-size:.9rem}
.form-actions{margin-top:.75rem;display:flex;align-items:center;gap:1rem}
textarea#dials-json{width:100%;min-height:500px;background:#0d1117;color:#c9d1d9;border:1px solid var(--border);border-radius:6px;padding:1rem;font-family:'SF Mono',Menlo,monospace;font-size:.85rem;line-height:1.5}
@media (prefers-color-scheme: light){textarea#dials-json{background:#fafbfc;color:#24292f}}

/* Event feed */
.event-feed{list-style:none;margin:0;padding:0;max-height:480px;overflow-y:auto}
.event-feed li{padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:.85rem;display:flex;gap:.75rem;align-items:flex-start}
.event-feed li .ts{font-family:'SF Mono',Menlo,monospace;color:var(--muted);flex-shrink:0;font-size:.78rem}
.event-feed li .kind{flex-shrink:0;min-width:0}
.event-feed li .summary{flex:1;min-width:0;word-break:break-word}

/* Key-value list */
.kv{display:grid;grid-template-columns:200px 1fr;gap:.5rem 1rem;margin:0}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;color:var(--fg-strong)}

/* Bars */
.bar-mini{display:block;height:3px;background:var(--accent);margin-top:.25rem;border-radius:2px;opacity:.6}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal.hidden{display:none}
.modal-body{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1.5rem;max-width:880px;width:100%;max-height:90vh;overflow-y:auto;position:relative}
.modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
.modal-close:hover{color:var(--fg-strong)}
.preview-meta{display:flex;gap:1.5rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.preview-body{background:var(--bg);border:1px solid var(--border);padding:1rem;border-radius:6px;white-space:pre-wrap;font-family:'SF Mono',Menlo,monospace;font-size:.85rem;line-height:1.5;max-height:50vh;overflow-y:auto}

/* ---- v2: admin / services / seeds / landing forms ---- */
.field{margin:.6rem 0}
.field>label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.25rem}
.field input[type=text],.field input[type=password],.field input[type=number],
.field select,.field textarea{
  width:100%;padding:.5rem .7rem;background:var(--bg);border:1px solid var(--border);
  color:var(--fg);border-radius:6px;font-size:.9rem;box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{font-family:'SF Mono',Menlo,monospace;line-height:1.5;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.5rem 1.25rem}
.btn.tiny{padding:.15rem .5rem;font-size:.75rem;border-radius:5px}
.test-result{margin-left:.5rem;font-size:.85rem}
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}
.data-table th{font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.code-block{background:#0d1117;color:#c9d1d9;border:1px solid var(--border);border-radius:6px;padding:1rem;overflow-x:auto;font-size:.82rem;line-height:1.6}
@media (prefers-color-scheme: light){.code-block{background:#f6f8fa;color:#24292f}}
.mode-badge{font-size:.78rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--border)}
.mode-badge.mode-moderated{color:var(--muted)}
.mode-badge.mode-autonomous{color:var(--green);border-color:var(--green);background:rgba(63,185,80,.12)}
.mode-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.mode-option{border:1px solid var(--border);border-radius:8px;padding:1rem}
.mode-option.selected{border-color:var(--accent);background:var(--bg-card-hover)}
.mode-option h3{margin:0 0 .35rem}
.badge-current{display:inline-block;font-size:.75rem;font-weight:600;color:var(--accent);padding:.2rem .5rem;border:1px solid var(--accent);border-radius:5px}

/* v3.7 services page */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 18px;margin:10px 0}
.svc-grid fieldset{border:1px solid var(--border,#243247);border-radius:10px;padding:12px 14px;margin:0}
.svc-grid legend{font-weight:600;padding:0 6px}
.field.wide{grid-column:1 / -1}
.badge{display:inline-block;padding:1px 8px;border-radius:12px;font-size:11px;font-weight:700;margin-left:6px}
.badge.ok{background:rgba(34,197,94,.15);color:#22c55e}
.badge.warn{background:rgba(245,158,11,.15);color:#f59e0b}
.test-result.ok{color:#22c55e}.test-result.err{color:#ef4444}
.sticky-save{position:sticky;bottom:0;background:var(--panel,#121a26);padding:12px;border-top:1px solid var(--border,#243247);margin-top:14px}


/* v3.28: live generation progress on the Assets tab */
.gen-progress { margin: .6rem 0 .2rem; }
.gen-progress-track { height: 6px; border-radius: 999px; background: rgba(127,127,127,.18); overflow: hidden; margin-top: .35rem; }
.gen-progress-fill { height: 100%; width: 2%; border-radius: 999px;
    background: linear-gradient(90deg, #2f6df6, #16b8a6); transition: width .45s ease; }


/* ── v3.28 onboarding tutorial ───────────────────────────────────────── */
@keyframes tut-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tut-spin { to { transform: rotate(360deg); } }
@keyframes tut-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,109,246,.45); }
                       50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(47,109,246,0); } }
@keyframes tut-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.tut-hero { display: flex; gap: 2rem; align-items: center; justify-content: space-between;
    background: linear-gradient(120deg, #101a3a, #1c2c66 40%, #0f3b46);
    color: #eef3ff; border: none; overflow: hidden; }
.tut-hero h2 { color: #fff; margin-top: 0; }
.tut-hero .muted { color: #b9c6e8; max-width: 62ch; }
.tut-hero-copy { animation: tut-rise .5s ease both; }
.tut-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tut-badge { padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    color: #08101f; animation: tut-rise .5s ease both;
    background-image: linear-gradient(90deg, #7ee8fa, #80ffdb, #7ee8fa);
    background-size: 200% 100%; animation: tut-rise .5s ease both, tut-sheen 6s linear infinite; }
.tut-badge-2 { background-image: linear-gradient(90deg, #ffd166, #ffb4a2, #ffd166); animation-delay: .08s, 0s; }
.tut-badge-3 { background-image: linear-gradient(90deg, #c8b6ff, #b8c0ff, #c8b6ff); animation-delay: .16s, 0s; }
.tut-badge-4 { background-image: linear-gradient(90deg, #a0ffb0, #7ee8fa, #a0ffb0); animation-delay: .24s, 0s; }
.tut-badge-5 { background-image: linear-gradient(90deg, #ffc4e1, #ffd166, #ffc4e1); animation-delay: .32s, 0s; }

.tut-orbit { position: relative; width: 190px; height: 190px; flex: 0 0 auto; }
.tut-core { position: absolute; inset: 42%; border-radius: 50%; background: #7ee8fa; animation: tut-pulse 2.8s ease-in-out infinite; }
.tut-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(160,190,255,.28); }
.tut-ring span { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; }
.tut-ring-a { animation: tut-spin 7s linear infinite; }
.tut-ring-a span { background: #80ffdb; }
.tut-ring-b { inset: 22px; animation: tut-spin 11s linear infinite reverse; }
.tut-ring-b span { background: #ffd166; }
.tut-ring-c { inset: 44px; animation: tut-spin 15s linear infinite; }
.tut-ring-c span { background: #ffc4e1; }

.tut-steps { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }
.tut-step { display: flex; gap: .9rem; padding: 1rem; border-radius: 12px; text-decoration: none; color: inherit;
    border: 1px solid rgba(127,127,127,.22); background: rgba(127,127,127,.04);
    animation: tut-rise .5s ease both; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tut-step:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,40,90,.14); border-color: #2f6df6; }
.tut-step h3 { margin: 0 0 .3rem; font-size: 1rem; }
.tut-step-num { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; color: #fff; background: linear-gradient(135deg, #2f6df6, #16b8a6); }
.tut-done .tut-step-num { background: linear-gradient(135deg, #17a673, #7ed957); }
.tut-step-go { display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #2f6df6; }

.tut-flow { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: .8rem; }
.tut-flow-step { padding: .8rem .9rem; border-radius: 10px; border: 1px solid rgba(127,127,127,.2);
    display: flex; flex-direction: column; gap: .25rem; animation: tut-rise .5s ease both; }
.tut-flow-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #2f6df6, #16b8a6);
    animation: tut-pulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .tut-hero-copy, .tut-badge, .tut-step, .tut-flow-step, .tut-core, .tut-ring, .tut-flow-dot { animation: none !important; }
}


/* ── v3.29: explicit theme choice (overrides the OS preference) ─────────── */
html[data-theme="light"] {
        --bg:#fafbfc;
        --bg-card:#ffffff;
        --bg-card-hover:#f6f8fa;
        --border:#e1e4e8;
        --fg:#24292f;
        --fg-strong:#0d1117;
        --muted:#586069;
        --accent:#0366d6;
        --accent-strong:#0353b4;
        --green:#28a745;
        --orange:#b08800;
        --red:#cb2431;
        --shadow:0 1px 0 rgba(27,31,35,.04);
    }
html[data-theme="dark"] {
    --bg:#0d1117;
    --bg-card:#161b22;
    --bg-card-hover:#1c2229;
    --border:#30363d;
    --fg:#c9d1d9;
    --fg-strong:#f0f6fc;
    --muted:#8b949e;
    --accent:#58a6ff;
    --accent-strong:#1f6feb;
    --green:#3fb950;
    --orange:#d29922;
    --red:#f85149;
    --shadow:0 1px 0 rgba(255,255,255,.02);
}
.theme-toggle { line-height: 1; }

/* ── v3.29: phone and tablet layout ────────────────────────────────────── */
@media (max-width: 900px) {
    .topbar { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; }
    .tabs { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
            white-space: nowrap; padding-bottom: .3rem; }
    .tabs a { display: inline-block; }
    .user { margin-left: auto; }
    .svc-grid, .asset-grid, .tut-steps, .tut-flow { grid-template-columns: 1fr !important; }
    .card { padding: .9rem; }
    .tut-hero { flex-direction: column; text-align: center; }
    .tut-orbit { margin: 0 auto; }
    .table { display: block; overflow-x: auto; white-space: nowrap; }
    .form-actions.sticky-save { position: sticky; bottom: 0; background: var(--bg);
        padding: .6rem 0; border-top: 1px solid var(--border); z-index: 5; }
}
@media (max-width: 560px) {
    .kpi-row, .kpis { grid-template-columns: repeat(2, 1fr) !important; }
    h1 { font-size: 1.3rem; } h2 { font-size: 1.08rem; }
    .btn { padding: .5rem .7rem; }
    input, select, textarea { font-size: 16px; } /* stops iOS zooming on focus */
}


/* ── v3.30: system monitor ─────────────────────────────────────────────── */
.sys-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sys-gauge { padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.sys-gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sys-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.sys-bar { height: 8px; border-radius: 999px; background: rgba(127,127,127,.18); overflow: hidden; margin: .45rem 0 .35rem; }
.sys-fill { height: 100%; border-radius: 999px; transition: width .6s ease;
    background: linear-gradient(90deg, #2f6df6, #16b8a6); }
.sys-advice { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border-radius: 9px;
    margin-bottom: .45rem; border-left: 4px solid var(--border); background: rgba(127,127,127,.06); }
.sys-advice strong { flex: 0 0 130px; }
.sys-critical { border-left-color: var(--red); }
.sys-warn { border-left-color: var(--orange); }
.sys-ok { border-left-color: var(--green); }
.sys-info { border-left-color: var(--accent); }


/* ── v3.33: monitoring view ────────────────────────────────────────────── */
@keyframes sys-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sys-hero { animation: sys-in .4s ease both; }
.sys-hero-head { display: flex; align-items: flex-start; gap: 1rem; }
.sys-hero-head h2 { margin: 0 0 .15rem; }
.sys-auto { margin-left: auto; white-space: nowrap; }
.sys-error { border-left: 4px solid var(--red); }

.sys-dials { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 1rem 0 .4rem; }
.dial { position: relative; text-align: center; padding: .4rem; animation: sys-in .45s ease both; }
.dial-svg { width: 128px; height: 128px; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: rgba(127,127,127,.18); stroke-width: 10; }
.dial-value { fill: none; stroke: url(#g); stroke-width: 10; stroke-linecap: round;
    stroke: #4f8cff; transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1); }
.dial[data-metric="mem"] .dial-value { stroke: #16b8a6; }
.dial[data-metric="disk"] .dial-value { stroke: #c084fc; }
.dial[data-metric="gpu"] .dial-value { stroke: #ffb020; }
.dial-centre { position: absolute; top: 52px; left: 0; right: 0; pointer-events: none; }
.dial-pct { display: block; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dial-pct small { font-size: .8rem; opacity: .65; }
.dial-label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dial-sub { margin-top: .3rem; min-height: 2.2em; }

.sys-rates { display: flex; flex-wrap: wrap; gap: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .86rem; }
.sys-rates b { font-variant-numeric: tabular-nums; }
#sys-history { width: 100%; height: 170px; }
.sys-legend { display: flex; gap: 1rem; font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.sys-legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; }
.key-cpu { background: #4f8cff; } .key-mem { background: #16b8a6; }
.key-gpu { background: #ffb020; } .key-disk { background: #c084fc; }

.sys-two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.sys-table td { font-variant-numeric: tabular-nums; }
.store-row { margin-bottom: .55rem; }
.store-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; }
.store-bar { height: 8px; border-radius: 999px; background: rgba(127,127,127,.16); overflow: hidden; margin-top: .25rem; }
.store-fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, #ffb020, #ff7a59); }
@media (prefers-reduced-motion: reduce) { .sys-hero, .dial, .dial-value, .store-fill { animation: none !important; transition: none !important; } }


/* ── v3.34: guided auto-run + inline help ──────────────────────────────── */
@keyframes ar-spin { to { transform: rotate(360deg); } }
@keyframes ar-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ar-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ar-head h2 { margin: 0; }
.ar-start { margin-left: auto; }
.ar-track { height: 10px; border-radius: 999px; background: rgba(127,127,127,.16); overflow: hidden; margin: .8rem 0 .35rem; }
.ar-fill { height: 100%; width: 2%; border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(90deg, #4f8cff, #16b8a6, #ffb020); background-size: 200% 100%; }
.ar-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.ar-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg-strong); }
.ar-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.ar-step { display: flex; gap: .75rem; padding: .7rem .85rem; border-radius: 10px;
    border: 1px solid var(--border); background: rgba(127,127,127,.04); animation: ar-pop .35s ease both; }
.ar-icon { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    font-size: .8rem; background: rgba(127,127,127,.18); }
.ar-running .ar-icon { background: #4f8cff; color: #fff; animation: ar-spin 1.6s linear infinite; }
.ar-done .ar-icon { background: #17a673; color: #fff; }
.ar-failed .ar-icon { background: var(--red); color: #fff; }
.ar-time { float: right; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ar-result { margin-top: .3rem; font-size: .86rem; }
.ar-hint { margin-top: .25rem; font-size: .8rem; color: var(--accent); }

[data-help] { cursor: help; }
.help-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: .35rem;
    border-radius: 50%; font-size: .7rem; font-weight: 700; background: rgba(127,127,127,.22); color: var(--fg); }
.help-pop { position: absolute; z-index: 40; max-width: 330px; padding: .7rem .85rem; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.35);
    font-size: .86rem; line-height: 1.45; animation: ar-pop .18s ease both; }
@media (prefers-reduced-motion: reduce) { .ar-step, .ar-fill, .help-pop, .ar-running .ar-icon { animation: none !important; transition: none !important; } }


/* ── v3.34: marketing playbook ─────────────────────────────────────────── */
.play-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: .8rem; }
.play { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 12px;
    background: rgba(127,127,127,.04); transition: transform .18s ease, border-color .18s ease; }
.play:hover { transform: translateY(-2px); border-color: var(--accent); }
.play h3 { margin: 0 0 .3rem; font-size: .96rem; }
.play-go { font-size: .8rem; font-weight: 600; color: var(--accent); text-decoration: none; }


/* ── v3.36: identity and depth ─────────────────────────────────────────── */
@keyframes bm-orbit { to { transform: rotate(360deg); } }
@keyframes bm-pulse { 0%,100% { r: 6.5; opacity: 1; } 50% { r: 7.4; opacity: .82; } }
@keyframes bm-travel { to { transform: rotate(-360deg); } }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 34px; overflow: visible; }
.bm-core { animation: bm-pulse 3.4s ease-in-out infinite; transform-origin: 22px 22px; }
.bm-ring { transform-origin: 22px 22px; opacity: .75; }
.bm-r1 { transform: rotate(28deg); }
.bm-r2 { transform: rotate(-52deg); }
.bm-sat { transform-origin: 22px 22px; animation: bm-travel 7s linear infinite; }
.brand-word { font-weight: 800; letter-spacing: .01em; font-size: 1.06rem;
    background: linear-gradient(92deg, #a8e8ff, #b9b6ff 45%, #f0b5ff);
    -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Starfield: one canvas behind everything, drawn once and parallaxed on
   scroll. Cheap enough to leave on, and off entirely for reduced motion. */
#space { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
body::after { content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none; opacity: .55;
    background:
      radial-gradient(45% 38% at 18% 12%, rgba(84,120,255,.20), transparent 60%),
      radial-gradient(38% 34% at 82% 22%, rgba(200,109,215,.16), transparent 60%),
      radial-gradient(50% 40% at 60% 88%, rgba(22,184,166,.14), transparent 65%); }
html[data-theme="light"] body::after { opacity: .35; }
html[data-theme="light"] #space { opacity: .35; }

/* Panels read as glass over the field rather than flat boxes. */
.card { backdrop-filter: blur(9px); }
.topbar { backdrop-filter: blur(12px); }
@media (prefers-reduced-motion: reduce) {
    .bm-core, .bm-sat { animation: none !important; }
    #space { display: none; }
}


/* ── v3.36: guided dials ───────────────────────────────────────────────── */
.dial-section { margin: 1.4rem 0 .3rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dial-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dial-item { padding: .85rem .95rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(127,127,127,.04); }
.dial-label { display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; font-weight: 600; font-size: .93rem; }
.dial-item input[type=number], .dial-item input[type=text], .dial-item select { width: 100%; }
.dial-num { display: flex; align-items: center; gap: .5rem; }
.dial-num input { flex: 1; }
.dial-help { margin: .45rem 0 0; line-height: 1.45; }


/* ── v3.37: model management ───────────────────────────────────────────── */
.model-row { display: flex; gap: 1rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.model-row:last-of-type { border-bottom: none; }
.model-actions { margin-left: auto; white-space: nowrap; }
.tag-rec { background: linear-gradient(90deg, #16b8a6, #4f8cff); color: #04121f; }


/* ── v3.38: roadmap ────────────────────────────────────────────────────── */
.rm { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.rm-ok { background: rgba(23,166,115,.18); color: #3ddc97; }
.rm-part { background: rgba(255,176,32,.18); color: #ffb020; }
.rm-no { background: rgba(127,127,127,.18); color: var(--muted); }
.rm-na { background: transparent; color: var(--muted); }


/* ══ v3.40 design system ═══════════════════════════════════════════════════
   A consistent scale applied to the components already in the markup, so the
   whole dashboard moves at once rather than page by page. */
:root {
    --sp-1: .35rem; --sp-2: .6rem; --sp-3: .95rem; --sp-4: 1.35rem; --sp-5: 2rem;
    --r-sm: 9px; --r-md: 14px; --r-lg: 20px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ring: 0 0 0 3px rgba(79,140,255,.35);
    --lift: 0 18px 40px -22px rgba(4, 12, 34, .75);
}
body { font-feature-settings: "cv02","cv03","cv04","ss01"; letter-spacing: -0.006em; }
h1, h2, h3 { letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .98rem; }

/* Cards: one elevation language, a subtle top highlight, and motion on entry. */
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card {
    border-radius: var(--r-md);
    box-shadow: var(--lift);
    padding: var(--sp-4);
    position: relative;
    animation: card-in .38s var(--ease) both;
}
.card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r-md) var(--r-md) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
main.dash { display: grid; gap: var(--sp-3); padding: var(--sp-4); max-width: 1400px; margin: 0 auto; }
main.dash.swapping { opacity: .35; transform: translateY(6px); }
main.dash { transition: opacity .18s var(--ease), transform .18s var(--ease); }

/* Controls */
.btn {
    border-radius: var(--r-sm); font-weight: 600; letter-spacing: -0.01em;
    transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(92deg, #4f8cff, #6f7bff); border: none; color: #fff;
    box-shadow: 0 8px 20px -10px rgba(79,140,255,.9); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: none; box-shadow: var(--ring); }
input, select, textarea { border-radius: var(--r-sm); transition: box-shadow .14s var(--ease), border-color .14s var(--ease); }

/* Tables read as data, not as a spreadsheet. */
.table th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.table tbody tr { transition: background .14s var(--ease); }
.table tbody tr:hover { background: rgba(127,127,127,.06); }

/* Tabs */
.tabs a { border-radius: 999px; padding: .34rem .7rem; transition: background .16s var(--ease), color .16s var(--ease); }
.tabs a:hover { background: rgba(127,127,127,.14); }
.tabs a.active { background: linear-gradient(92deg, #4f8cff, #6f7bff); color: #fff; }

/* Navigation progress: the page is fetched, so show the fetch. */
#nav-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
    background: linear-gradient(90deg, #7ee8fa, #6f7bff, #c86dd7);
    transition: width .3s var(--ease), opacity .3s var(--ease); }
body.is-loading { cursor: progress; }

/* Command palette */
.palette { position: fixed; inset: 0; z-index: 80; background: rgba(4,8,20,.55);
    backdrop-filter: blur(6px); display: grid; place-items: start center; padding-top: 12vh; }
.palette-box { width: min(560px, 92vw); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); overflow: hidden;
    animation: card-in .18s var(--ease) both; }
.palette-box input { width: 100%; border: none; background: transparent; padding: var(--sp-3) var(--sp-4);
    font-size: 1.02rem; color: var(--fg-strong); }
.palette-box ul { list-style: none; margin: 0; padding: 0 var(--sp-2) var(--sp-2); max-height: 46vh; overflow: auto; }
.palette-box li { padding: .55rem .75rem; border-radius: var(--r-sm); cursor: pointer; }
.palette-box li.on, .palette-box li:hover { background: rgba(79,140,255,.18); }
.palette-hint { padding: .5rem var(--sp-4); border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted); }
.kbd-hint { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
    .card, .palette-box { animation: none !important; }
    main.dash, .btn, .tabs a { transition: none !important; }
}


/* ── v3.41: release notes on the roadmap ───────────────────────────────── */
.rel { border: 1px solid var(--border); border-radius: var(--r-sm); padding: .5rem .75rem; margin-bottom: .5rem; }
.rel summary { cursor: pointer; }
.rel-items { margin: .5rem 0 .2rem 1rem; padding: 0; font-size: .88rem; color: var(--muted); }
.rel-items li { margin-bottom: .25rem; }


/* ── v3.48: explainer controls ─────────────────────────────────────────── */
.explainer-box { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    padding: .7rem .85rem; margin: .8rem 0; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: rgba(127,127,127,.04); }
.explainer-box .ar-track { flex: 1 1 100%; margin: .4rem 0 0; }
#explainer-status { flex: 1 1 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.58 — Design system
   ═══════════════════════════════════════════════════════════════════════════
   One pass over the whole dashboard rather than page-by-page patches. The
   tokens below are the only place sizes, colours and motion are decided;
   components use them and nothing else.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* Type scale — 1.25 ratio from a 15px base, so headings relate to body
       text instead of being picked by eye. Tabular numerals everywhere data
       appears, so figures line up column to column. */
    --t-xs:   0.75rem;   /* labels, meta */
    --t-sm:   0.85rem;   /* secondary text */
    --t-base: 0.95rem;   /* body */
    --t-md:   1.05rem;   /* card titles */
    --t-lg:   1.35rem;   /* section headings */
    --t-xl:   1.9rem;    /* figures */
    --t-2xl:  2.6rem;    /* the one number that matters on a page */

    --lh-tight: 1.25;
    --lh-body:  1.6;
    --track-tight: -0.02em;
    --track-caps:   0.09em;

    /* Spacing — a 4px rhythm. Every margin and padding is one of these. */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

    /* Surfaces: three depths, not seven shades invented per component. */
    --surface-1: rgba(255,255,255,.035);
    --surface-2: rgba(255,255,255,.06);
    --surface-3: rgba(255,255,255,.09);
    --line:      rgba(255,255,255,.10);
    --line-soft: rgba(255,255,255,.055);

    /* Semantic colour — a hue per meaning, used consistently. */
    --info:    #4f8cff;
    --success: #3ddc97;
    --warn:    #ffb020;
    --danger:  #ff6b6b;
    --brand-a: #7ee8fa;
    --brand-b: #6f7bff;
    --brand-c: #c86dd7;

    --elev-1: 0 1px 2px rgba(2,6,20,.4);
    --elev-2: 0 10px 24px -14px rgba(2,6,20,.85);
    --elev-3: 0 26px 60px -30px rgba(2,6,20,.95);

    --dur-fast: .14s; --dur: .22s; --dur-slow: .4s;
}
html[data-theme="light"] {
    --surface-1: rgba(15,23,42,.03);
    --surface-2: rgba(15,23,42,.05);
    --surface-3: rgba(15,23,42,.08);
    --line: rgba(15,23,42,.12);
    --line-soft: rgba(15,23,42,.07);
    --elev-1: 0 1px 2px rgba(15,23,42,.08);
    --elev-2: 0 10px 24px -14px rgba(15,23,42,.25);
    --elev-3: 0 26px 60px -30px rgba(15,23,42,.35);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
    font-size: var(--t-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: 0 0 var(--s-2); }
h1 { font-size: var(--t-xl); font-weight: 750; }
h2 { font-size: var(--t-lg); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 650; }
p  { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
code, kbd, pre, .num, td .num { font-variant-numeric: tabular-nums; }

/* Section label: the small uppercase caption above a group. */
.eyebrow, .table th, .dial-label, .sys-legend, .dial-section {
    font-size: var(--t-xs);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
main.dash { gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-8); }
.card {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: var(--s-5);
    box-shadow: var(--elev-2);
}
.card > h2:first-child, .card > .card-head:first-child { margin-top: 0; }
.card + .card { margin-top: 0; }
.card-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.card-head .spacer { margin-left: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: .48rem .9rem;
    font-size: var(--t-sm); font-weight: 600; line-height: 1;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--fg-strong);
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast),
                transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--line); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary {
    background: linear-gradient(92deg, var(--info), var(--brand-b));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px -10px rgba(79,140,255,.85);
}
.btn.primary:hover { box-shadow: 0 12px 24px -10px rgba(79,140,255,.95); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.btn.tiny, .btn.small { padding: .32rem .6rem; font-size: var(--t-xs); border-radius: 8px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
label { font-size: var(--t-sm); font-weight: 600; }
input, select, textarea {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .5rem .65rem;
    color: var(--fg-strong);
    font-size: var(--t-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--line); background: var(--surface-2); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field.wide { grid-column: 1 / -1; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th {
    position: sticky; top: 0; z-index: 1;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(6px);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.table td { padding: var(--s-3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--surface-1); }

/* ── Badges and pills ───────────────────────────────────────────────────── */
.tag, .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: var(--t-xs); font-weight: 650; letter-spacing: .01em;
    background: var(--surface-2); color: var(--fg);
    border: 1px solid var(--line-soft);
}
.tag.ok, .badge.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.tag.warn, .badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tag.bad, .badge.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ── Empty states ───────────────────────────────────────────────────────── */
.empty {
    display: grid; place-items: center; gap: var(--s-2);
    padding: var(--s-7) var(--s-5);
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface-1);
}
.empty-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; font-size: 20px;
    background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
    color: #06101f;
}
.empty h3 { margin: 0; }
.empty p { max-width: 46ch; color: var(--muted); margin: 0; }
.empty .btn { margin-top: var(--s-2); }

/* ── Skeletons: shape of the content, not the word "Loading" ────────────── */
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton, .skel-line {
    background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-3) 37%, var(--surface-1) 63%);
    background-size: 300% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    border-radius: 8px;
}
.skel-line { height: 12px; margin-bottom: var(--s-2); }
.skel-line.w-40 { width: 40%; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; }
.skel-row { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast-host { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 90;
    display: grid; gap: var(--s-2); max-width: min(380px, 90vw); }
.toast {
    display: flex; gap: var(--s-2); align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    border-radius: 12px; border: 1px solid var(--line);
    background: var(--bg-card); box-shadow: var(--elev-3);
    font-size: var(--t-sm);
    animation: toast-in var(--dur) var(--ease, cubic-bezier(.4,0,.2,1)) both;
}
.toast.ok  { border-left: 3px solid var(--success); }
.toast.bad { border-left: 3px solid var(--danger); }
.toast .x { margin-left: auto; cursor: pointer; color: var(--muted); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.topbar { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); gap: var(--s-4); }
.tabs { gap: var(--s-1); }
.tabs a { font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.tabs a:hover { color: var(--fg-strong); }
.tabs a.active { color: #fff; }

/* Figures on Overview read as data, not paragraphs. */
.kpi .value, .kpi-value { font-size: var(--t-2xl); font-weight: 750;
    letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi .label, .kpi-label { font-size: var(--t-xs); letter-spacing: var(--track-caps);
    text-transform: uppercase; color: var(--muted); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .skeleton, .skel-line, .toast { animation: none !important; }
    .btn, .table tbody tr, input, select, textarea { transition: none !important; }
}


/* ── v3.60: Overview as mission control ────────────────────────────────── */
.ov-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-6); align-items: center;
    background: linear-gradient(135deg, rgba(79,140,255,.14), rgba(200,109,215,.10) 60%, rgba(22,184,166,.10));
    border-color: rgba(127,150,255,.28); }
.ov-hero h1 { font-size: var(--t-2xl); margin: var(--s-1) 0 var(--s-2); }
.ov-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ov-funnel { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: 14px;
    background: var(--surface-1); border: 1px solid var(--line-soft); }
.ov-funnel-row { display: grid; grid-template-columns: 84px 1fr 48px; align-items: center; gap: var(--s-3); }
.ov-funnel-label { font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ov-funnel-track { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ov-funnel-fill { height: 100%; border-radius: 999px; transition: width .9s var(--ease, cubic-bezier(.4,0,.2,1)); }
.ov-funnel-n { text-align: right; font-weight: 700; }
.ov-kpis { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,140,255,.18), transparent 70%); pointer-events: none; }
.kpi-sub { margin-top: var(--s-2); }
.event-feed { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; }
.event-feed li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm);
    display: grid; grid-template-columns: 8px 1fr; gap: var(--s-3); align-items: start; }
.event-feed li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: .45em;
    background: var(--info); }
.event-feed li.warn::before { background: var(--warn); }
.event-feed li.error::before { background: var(--danger); }
@media (max-width: 900px) { .ov-hero { grid-template-columns: 1fr; } }


/* v3.61: new-assets pill — an offer, not an interruption */
@keyframes pill-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.refresh-offer, .assets-new-pill { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--s-3); animation: pill-in .3s var(--ease, ease) both; }


/* ── v3.61: per-tab guide ──────────────────────────────────────────────── */
@keyframes guide-step { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes guide-glow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.guide { border: 1px solid rgba(127,150,255,.28); border-radius: 14px;
    background: linear-gradient(120deg, rgba(79,140,255,.10), rgba(200,109,215,.07)); overflow: hidden; }
.guide-toggle { width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
    background: transparent; border: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.guide-icon { color: var(--brand-a); animation: guide-glow 3s ease-in-out infinite; }
.guide-title { font-weight: 700; }
.guide-sub { font-size: var(--t-sm); }
.guide-chev { margin-left: auto; color: var(--muted); transition: transform var(--dur) var(--ease, ease); }
.guide-hidden .guide-chev { transform: rotate(-90deg); }
.guide-body { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-3); }
.guide-hidden .guide-body { display: none; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.guide-steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm);
    animation: guide-step .4s var(--ease, ease) both; }
.guide-n { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--t-xs); font-weight: 700; color: #06101f;
    background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); }
.guide-goal { font-size: var(--t-sm); padding-top: var(--s-2); border-top: 1px solid var(--line-soft); }
.guide-goal .eyebrow { display: block; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .guide-steps li, .guide-icon { animation: none !important; } }


/* ── v3.63: pipeline flow ──────────────────────────────────────────────── */
@keyframes pl-pulse { 0% { left: -20%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes pl-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(79,140,255,.45); } 50% { box-shadow: 0 0 0 12px rgba(79,140,255,0); } }
.pl-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: var(--s-3) 0; }
.pl-node { flex: 0 0 132px; display: grid; justify-items: center; gap: 2px; padding: var(--s-3) var(--s-2);
    border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-1); text-align: center; }
.pl-ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
    background: var(--surface-2); border: 2px solid var(--line); margin-bottom: var(--s-1); }
.pl-node.ok .pl-ring { border-color: var(--success); }
.pl-node.running .pl-ring { border-color: var(--info); animation: pl-breathe 1.8s ease-out infinite; }
.pl-node.error .pl-ring { border-color: var(--danger); }
.pl-node.idle { opacity: .55; }
.pl-nm { font-weight: 700; font-size: var(--t-sm); }
.pl-ct { font-size: var(--t-lg); font-weight: 750; line-height: 1.1; }
.pl-when { font-size: var(--t-xs); }
.pl-err { margin-top: var(--s-1); font-size: var(--t-xs); font-weight: 700; color: var(--danger); }
.pl-link { flex: 0 0 34px; position: relative; align-self: center; height: 3px; margin: 0 2px;
    background: var(--line); border-radius: 2px; overflow: hidden; }
.pl-link.active { background: color-mix(in srgb, var(--info) 45%, var(--line)); }
.pl-link.active i { position: absolute; top: -2px; width: 22%; height: 7px; border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--brand-a), transparent);
    animation: pl-pulse 1.6s linear infinite; }
.pl-errors { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: rgba(255,107,107,.08); font-size: var(--t-sm); }
.pl-errors a { color: var(--danger); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pl-link.active i, .pl-node.running .pl-ring { animation: none !important; } }


/* ── v3.64: content review desk ────────────────────────────────────────── */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.seg a { padding: .3rem .7rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 650; color: var(--muted); }
.seg a:hover { color: var(--fg-strong); }
.seg a.active { background: linear-gradient(92deg, var(--info), var(--brand-b)); color: #fff; }
.review-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-top: var(--s-3); }
@keyframes review-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes review-out { to { opacity: 0; transform: scale(.96) translateY(-6px); height: 0; margin: 0; padding: 0; } }
.review-card { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--elev-1);
    animation: review-in .3s var(--ease, ease) both; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.review-card:hover { border-color: rgba(127,150,255,.4); transform: translateY(-1px); }
.review-card.review-leaving { animation: review-out .4s var(--ease, ease) forwards; overflow: hidden; }
.review-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.review-kind { font-size: var(--t-xs); font-weight: 700; text-transform: capitalize; }
.review-title { margin: 0; font-size: var(--t-md); }
.review-snippet { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.review-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding-top: var(--s-2); border-top: 1px solid var(--line-soft); }
@media (prefers-reduced-motion: reduce) { .review-card, .review-card.review-leaving { animation: none !important; } }


/* ── v3.65: CRM board ──────────────────────────────────────────────────── */
.crm-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); scroll-snap-type: x proximity; }
.crm-col { flex: 0 0 272px; scroll-snap-align: start; border-radius: 14px; border: 1px solid var(--line-soft);
    background: var(--surface-1); border-top: 3px solid var(--stage, var(--line)); display: flex; flex-direction: column; max-height: 72vh; }
.crm-col.dragover { background: color-mix(in srgb, var(--stage) 12%, var(--surface-1)); border-color: var(--stage); }
.crm-col-head { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-2); }
.crm-col-head .nm { font-weight: 750; text-transform: capitalize; color: var(--stage); }
.crm-col-head .ct { font-size: var(--t-xs); font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--surface-3); }
.crm-col-val { margin-left: auto; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.crm-col-body { padding: 0 var(--s-2) var(--s-2); overflow-y: auto; display: grid; gap: var(--s-2); align-content: start; flex: 1; }
.crm-drop-hint { border: 1px dashed var(--line); border-radius: 10px; padding: var(--s-4); text-align: center;
    color: var(--muted); font-size: var(--t-xs); }
@keyframes cardlet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.crm-cardlet { padding: var(--s-3); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--line-soft);
    cursor: grab; animation: cardlet-in .25s var(--ease, ease) both;
    transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.crm-cardlet:hover { transform: translateY(-1px); border-color: rgba(127,150,255,.45); box-shadow: var(--elev-2); }
.crm-cardlet:active { cursor: grabbing; }
.crm-row { display: grid; grid-template-columns: 34px 1fr 34px; gap: var(--s-2); align-items: center; }
.crm-id { min-width: 0; }
.crm-cardlet .nm { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-cardlet .co { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--t-xs); font-weight: 800; color: #fff; letter-spacing: .02em;
    background: linear-gradient(135deg, hsl(var(--h, 220) 70% 52%), hsl(calc(var(--h, 220) + 40) 70% 42%)); }
.crm-avatar.lg { width: 52px; height: 52px; font-size: var(--t-md); }
.crm-score { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--success) calc(var(--p, 0) * 1%), var(--surface-3) 0); }
.crm-score i { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-card); display: grid; place-items: center;
    font-style: normal; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-cardlet .meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: var(--s-2); }
.crm-touch { margin-left: auto; font-size: var(--t-xs); }
.crm-chip { font-size: var(--t-xs); padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); }
.crm-chip.deal { color: var(--warn); font-weight: 700; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#crm-drawer-panel { animation: drawer-in .28s var(--ease, ease) both; }
.crm-drawer-head { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s-3); align-items: start; }
.crm-drawer-who h2 { margin: 0 0 2px; font-size: var(--t-lg); }
.crm-drawer-meta { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .crm-cardlet, #crm-drawer-panel { animation: none !important; } }


/* ── v3.66: grouped navigation ─────────────────────────────────────────── */
.nav-groups { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.nav-start { display: inline-flex; align-items: center; gap: 6px; padding: .38rem .75rem; border-radius: 999px;
    font-weight: 700; font-size: var(--t-sm); color: var(--brand-a); }
.nav-start.active { background: linear-gradient(92deg, var(--info), var(--brand-b)); color: #fff; }
.nav-group { position: relative; }
.nav-group-btn { display: inline-flex; align-items: center; gap: 6px; padding: .38rem .8rem; border-radius: 999px;
    border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-sm);
    font-weight: 650; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-group-btn:hover, .nav-group:focus-within .nav-group-btn { color: var(--fg-strong); background: var(--surface-2); }
.nav-group-btn.active { color: #fff; background: linear-gradient(92deg, var(--info), var(--brand-b)); }
.nav-crumb { font-weight: 500; opacity: .9; }
.nav-chev { font-size: .7em; opacity: .7; transition: transform var(--dur-fast); }
.nav-group.expanded .nav-chev { transform: rotate(180deg); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.nav-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 210px;
    padding: var(--s-2); border-radius: 14px; border: 1px solid var(--line); background: var(--bg-card);
    box-shadow: var(--elev-3); animation: menu-in .16s var(--ease, ease) both; }
.nav-group.expanded .nav-menu, .nav-group:hover .nav-menu { display: grid; gap: 2px; } /* v3.83: no :focus-within — a clicked link kept its menu open */
.nav-menu a { display: flex; align-items: center; gap: var(--s-2); padding: .5rem .65rem; border-radius: 10px;
    font-size: var(--t-sm); font-weight: 600; color: var(--fg); }
.nav-menu a:hover { background: var(--surface-2); color: var(--fg-strong); }
.nav-menu a.active { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--fg-strong); }
.nav-ic { width: 1.4em; display: inline-grid; place-items: center; font-size: .95em; }
@media (max-width: 760px) {
    .nav-menu { position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 0 var(--s-3); }
    .nav-group:hover .nav-menu { display: none; }
    .nav-group.expanded .nav-menu { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none !important; } }


/* v3.67: the header must sit above the page, or dropdown menus render under
   the content. Found by driving the real dashboard in headless Chromium: a
   guide <li> intercepted clicks meant for the navigation menu. */
.topbar { position: relative; z-index: 80; }
.nav-menu { z-index: 90; }


/* v3.69: Simple / Everything switch */
.nav-view { margin-left: var(--s-2); padding: .3rem .7rem; border-radius: 999px; border: 1px dashed var(--line);
    background: transparent; color: var(--muted); font: inherit; font-size: var(--t-xs); font-weight: 650; cursor: pointer; }
.nav-view:hover { color: var(--fg-strong); border-style: solid; }


/* v3.69: "do this next" */
.next-card { display: grid; gap: var(--s-2); justify-items: start;
    border-left: 4px solid var(--success); background: linear-gradient(90deg, rgba(61,220,151,.10), transparent 60%); }
.next-card h2 { margin: 0; }


/* v3.70: the funnel summary is seven tiles; a fixed column count clipped
   the last ones at ordinary widths. Seen in a browser screenshot. */
.crm-funnel { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: var(--s-2); }


/* ── v3.73: calendar ───────────────────────────────────────────────────── */
.cal-legend { display: flex; gap: var(--s-4); font-size: var(--t-xs); color: var(--muted); margin: var(--s-2) 0 var(--s-3); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); flex: 0 0 8px; }
.cal-dot.email { background: var(--info); } .cal-dot.blog { background: var(--brand-c); }
.cal-dot.social { background: var(--warn); } .cal-dot.landing { background: var(--brand-a); } .cal-dot.booking { background: var(--success); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 6px 4px; }
.cal-day { min-height: 96px; padding: 6px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--surface-1);
    display: flex; flex-direction: column; gap: 3px; transition: background var(--dur-fast), border-color var(--dur-fast); }
.cal-day.cal-out { opacity: .45; }
.cal-day.cal-today { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.cal-day.cal-over { background: color-mix(in srgb, var(--info) 14%, var(--surface-1)); border-color: var(--info); }
.cal-num { font-size: var(--t-xs); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2; padding: 3px 6px; border-radius: 6px;
    background: var(--surface-2); border: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip[draggable="true"] { cursor: grab; }
.cal-chip.published { opacity: .65; }
.cal-chip.draft { border-style: dashed; }
.cal-chip.booking { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); }
@media (max-width: 760px) { .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-day { min-height: 60px; } .cal-chip { font-size: 10px; } }


/* v3.76: SSO on the login page */
.sso-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--muted); font-size: var(--t-xs); }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso-btn { width: 100%; justify-content: center; }


/* v3.78: reply drafts */
.reply-body { width: 100%; font: inherit; font-size: var(--t-sm); line-height: 1.5; resize: vertical; }
.reply-card { border-left: 3px solid var(--success); }


/* v3.81: login-page diagnosis */
.doctor { margin: 0 0 var(--s-3); padding: var(--s-3); border: 1px solid var(--danger); border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, transparent); text-align: left; font-size: var(--t-sm); }
.doctor pre { white-space: pre-wrap; word-break: break-all; max-height: 12rem; overflow: auto; margin: .3rem 0 0; padding: .5rem; background: rgba(0,0,0,.25); border-radius: 8px; }


/* v3.92: the goal */
.goal-card { border-left: 4px solid var(--brand-a); }
.goal-row { display: flex; gap: var(--s-4); align-items: flex-start; }
.goal-big { font-size: var(--t-2xl); font-weight: 800; line-height: 1; min-width: 5.5rem; }
.goal-meta { flex: 1; display: grid; gap: .35rem; }
.goal-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.goal-bar > div { height: 100%; background: linear-gradient(90deg, var(--brand-a), var(--success)); border-radius: 999px; transition: width var(--dur-slow); }