/* TestForge AI — Design System v2 · HF + shadcn + DM Mono/Jakarta Sans */
:root {
    --bg-root:#09090b;--bg-surface:#0c0c0e;--bg-card:#111113;--bg-elevated:#18181b;
    --bg-hover:#1e1e22;--bg-active:#27272a;--bg-input:#0c0c0e;
    --border:#27272a;--border-subtle:#1e1e22;--border-focus:#3b82f6;
    --text-primary:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;--text-dim:#52525b;--text-inverse:#09090b;
    --accent:#3b82f6;--accent-hover:#2563eb;--accent-bg:rgba(59,130,246,0.1);--accent-border:rgba(59,130,246,0.25);
    --secondary:#fbbf24;--secondary-bg:rgba(251,191,36,0.1);--secondary-border:rgba(251,191,36,0.25);
    --green:#22c55e;--green-bg:rgba(34,197,94,0.1);--green-border:rgba(34,197,94,0.25);
    --red:#ef4444;--red-bg:rgba(239,68,68,0.1);--red-border:rgba(239,68,68,0.25);
    --orange:#f97316;--purple:#a855f7;--purple-bg:rgba(168,85,247,0.1);
    --font-sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
    --font-mono:'DM Mono','JetBrains Mono',monospace;
    --text-2xs:0.625rem;--text-xs:0.6875rem;--text-sm:0.75rem;--text-base:0.8125rem;
    --text-md:0.875rem;--text-lg:1rem;--text-xl:1.125rem;--text-2xl:1.375rem;--text-3xl:1.75rem;
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
    --r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);--shadow-md:0 2px 8px rgba(0,0,0,0.4);
    --shadow-ring:0 0 0 2px var(--border-focus);
    --sidebar-w:220px;--header-h:44px;--toolbar-h:36px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background:var(--bg-root);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
::selection{background:var(--accent);color:#fff}
input,select,textarea,button{font-family:inherit;font-size:inherit}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* LAYOUT */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;overflow-y:auto}
.sidebar-brand{padding:var(--sp-4) var(--sp-4) var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.sidebar-brand .brand-icon{width:22px;height:22px;border-radius:var(--r-md);background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700}
.sidebar-brand span{color:var(--text-primary);font-weight:600}
.sidebar-section{padding:var(--sp-2)}
.sidebar-label{font-size:var(--text-2xs);font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;padding:var(--sp-3) var(--sp-2) var(--sp-1);font-family:var(--font-mono)}
.sidebar-link{display:flex;align-items:center;gap:var(--sp-2);padding:5px 8px;border-radius:var(--r-md);font-size:var(--text-sm);color:var(--text-secondary);transition:all 120ms;cursor:pointer;text-decoration:none}
.sidebar-link:hover{background:var(--bg-hover);color:var(--text-primary);text-decoration:none}
.sidebar-link.active{background:var(--bg-active);color:var(--text-primary);font-weight:600}
.sidebar-link .link-icon{font-size:var(--text-md);width:18px;text-align:center}
.sidebar-link .link-badge{margin-left:auto;font-size:var(--text-2xs);font-family:var(--font-mono);background:var(--accent-bg);color:var(--accent);padding:1px 6px;border-radius:var(--r-sm);border:1px solid var(--accent-border)}
.sidebar-footer{margin-top:auto;padding:var(--sp-3);border-top:1px solid var(--border-subtle)}
.sidebar-user{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1)}
.avatar{width:24px;height:24px;border-radius:var(--r-md);background:var(--accent-bg);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:700;color:var(--accent);font-family:var(--font-mono);flex-shrink:0}
.avatar-lg{width:32px;height:32px;font-size:var(--text-xs)}
.user-meta{display:flex;flex-direction:column;min-width:0}
.user-meta .name{font-size:var(--text-xs);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta .role{font-size:var(--text-2xs);color:var(--text-dim);font-family:var(--font-mono)}
.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column}
.header{height:var(--header-h);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-4);background:var(--bg-surface);position:sticky;top:0;z-index:40}
.header-left{display:flex;align-items:center;gap:var(--sp-3)}
.header-title{font-size:var(--text-md);font-weight:700}
.header-breadcrumb{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}
.header-breadcrumb a{color:var(--text-muted);text-decoration:none}.header-breadcrumb a:hover{color:var(--text-primary)}
.header-breadcrumb .sep{color:var(--text-dim)}
.header-right{display:flex;align-items:center;gap:var(--sp-2)}
.toolbar{height:var(--toolbar-h);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:0;padding:0 var(--sp-4);background:var(--bg-surface)}
.toolbar-tab{padding:0 var(--sp-3);height:var(--toolbar-h);display:flex;align-items:center;font-size:var(--text-xs);font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer;transition:all 120ms;text-decoration:none}
.toolbar-tab:hover{color:var(--text-primary);text-decoration:none}
.toolbar-tab.active{color:var(--text-primary);border-bottom-color:var(--accent);font-weight:600}
.toolbar-actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
.content{padding:var(--sp-5);flex:1}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:5px 12px;border-radius:var(--r-md);font-size:var(--text-xs);font-weight:500;border:1px solid transparent;cursor:pointer;transition:all 120ms;text-decoration:none;white-space:nowrap;line-height:1.4}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--text-primary);color:var(--text-inverse);border-color:var(--text-primary)}.btn-primary:hover{background:#e4e4e7}
.btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border)}.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:transparent}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.btn-sm{padding:3px 8px;font-size:var(--text-2xs)}.btn-lg{padding:8px 18px;font-size:var(--text-sm)}.btn-full{width:100%}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-4)}
.card-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--border-subtle)}
.card-title{font-size:var(--text-sm);font-weight:600}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:var(--r-sm);font-size:var(--text-2xs);font-weight:500;font-family:var(--font-mono);letter-spacing:0.02em;background:var(--bg-active);color:var(--text-muted);border:1px solid var(--border)}
.badge-blue{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
.badge-green{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.badge-red{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.badge-yellow{background:var(--secondary-bg);color:var(--secondary);border-color:var(--secondary-border)}
.badge-purple{background:var(--purple-bg);color:var(--purple);border-color:rgba(168,85,247,0.25)}
.badge-draft{background:var(--bg-active);color:var(--text-dim)}
.badge-paid,.badge-succeeded{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
.badge-recruiting,.badge-accepted{background:var(--secondary-bg);color:var(--secondary);border-color:var(--secondary-border)}
.badge-in_progress{background:var(--purple-bg);color:var(--purple);border-color:rgba(168,85,247,0.25)}
.badge-completed,.badge-validated{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.badge-cancelled,.badge-rejected,.badge-failed,.badge-abandoned{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}

/* STATS */
.stats-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.stat-block{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);flex:1;min-width:140px}
.stat-label{font-size:var(--text-2xs);font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-mono)}
.stat-value{font-size:var(--text-2xl);font-weight:700;margin-top:2px;font-family:var(--font-mono)}
.stat-value.accent{color:var(--accent)}.stat-value.green{color:var(--green)}

/* TABLE */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:var(--text-2xs);font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-mono);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border)}
td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm);vertical-align:middle}
tr:hover td{background:var(--bg-hover)}

/* PROGRESS */
.progress{background:var(--bg-active);border-radius:var(--r-sm);height:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:var(--r-sm);transition:width 0.4s}

/* FORMS */
.form-group{margin-bottom:var(--sp-3)}
.form-label{display:block;font-size:var(--text-2xs);font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-mono);margin-bottom:var(--sp-1)}
.form-input,.form-select,.form-textarea{width:100%;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-primary);font-size:var(--text-sm);transition:border 120ms}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);outline:none;box-shadow:var(--shadow-ring)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim)}
.form-textarea{resize:vertical;min-height:60px;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.form-hint{font-size:var(--text-2xs);color:var(--text-dim);margin-top:2px}
.form-error{font-size:var(--text-2xs);color:var(--red);margin-top:2px}

/* WIZARD STEPS */
.wizard-steps{display:flex;gap:0;margin-bottom:var(--sp-5)}
.wizard-step{flex:1;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);font-size:var(--text-xs);color:var(--text-dim);border-bottom:2px solid var(--border-subtle);cursor:pointer;transition:all 120ms}
.wizard-step.active{color:var(--text-primary);border-bottom-color:var(--accent);font-weight:600}
.wizard-step.done{color:var(--green);border-bottom-color:var(--green)}
.wizard-step .step-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:700;font-family:var(--font-mono);background:var(--bg-active);color:var(--text-dim);border:1px solid var(--border);flex-shrink:0}
.wizard-step.active .step-num{background:var(--accent);color:#fff;border-color:var(--accent)}
.wizard-step.done .step-num{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}

/* ACCORDION */
.accordion{border:1px solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-2);background:var(--bg-card)}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);cursor:pointer;transition:background 120ms}
.accordion-header:hover{background:var(--bg-hover)}
.accordion-body{border-top:1px solid var(--border-subtle);padding:var(--sp-4);background:var(--bg-surface)}
.expand-icon{font-size:var(--text-sm);color:var(--text-dim);transition:transform 150ms}
.expand-icon.rotated{transform:rotate(90deg)}

/* FEED */
.feed-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
.feed-item:last-child{border-bottom:none}

/* TAGS */
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-sm);font-size:var(--text-2xs);background:var(--bg-active);color:var(--text-secondary);border:1px solid var(--border);font-family:var(--font-mono)}

/* LIKERT */
.likert{display:flex;gap:4px}
.likert-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:700;font-family:var(--font-mono);background:var(--bg-active);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;transition:all 120ms}
.likert-dot:hover{border-color:var(--accent);color:var(--text-primary)}
.likert-dot.selected,input[type="radio"]:checked+.likert-dot{background:var(--accent);color:#fff;border-color:var(--accent)}
input[type="radio"]{display:none}

/* RECOS */
.reco{padding:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--border-subtle);background:var(--bg-card);margin-bottom:var(--sp-2)}
.reco-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-1)}
.reco-title{font-size:var(--text-sm);font-weight:600}
.reco-body{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5}
.reco-action{font-size:var(--text-xs);margin-top:var(--sp-2);padding:var(--sp-2);background:var(--bg-hover);border-radius:var(--r-sm);font-family:var(--font-mono);color:var(--text-secondary)}
.reco-principle{font-size:var(--text-2xs);color:var(--accent);margin-top:var(--sp-1);font-style:italic}
.reco.quick-win{border-left:3px solid var(--secondary)}.reco.plan{border-left:3px solid var(--accent)}.reco.backlog{border-left:3px solid var(--text-dim)}

/* MATRICE */
.matrice{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.matrice-q{padding:var(--sp-4);border-radius:var(--r-lg);border:1px solid var(--border-subtle)}
.matrice-q.qw{background:rgba(251,191,36,0.05);border-color:var(--secondary-border)}
.matrice-q.pl{background:var(--accent-bg);border-color:var(--accent-border)}
.matrice-q.nh{background:var(--green-bg);border-color:var(--green-border)}
.matrice-q h4{font-size:var(--text-sm);margin-bottom:var(--sp-1)}
.matrice-q .q-desc{font-size:var(--text-2xs);color:var(--text-dim);margin-bottom:var(--sp-2);font-family:var(--font-mono)}
.matrice-item{padding:var(--sp-2) var(--sp-3);background:var(--bg-card);border-radius:var(--r-md);margin-bottom:var(--sp-1);font-size:var(--text-xs);border:1px solid var(--border-subtle)}

/* MISSION */
.mission{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-3);border-bottom:1px solid var(--border-subtle)}
.mission:last-child{border-bottom:none}
.mission-info{flex:1}.mission-info strong{font-size:var(--text-sm)}
.mission-meta{font-size:var(--text-2xs);color:var(--text-dim);font-family:var(--font-mono);margin-top:1px}
.mission-payout{font-size:var(--text-lg);font-weight:700;color:var(--green);font-family:var(--font-mono)}

/* GUIDANCE */
.guidance-panel{border:1px solid var(--accent-border);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--bg-card) 0%,rgba(59,130,246,0.03) 100%);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.guidance-creds{background:var(--bg-root);padding:var(--sp-3);border-radius:var(--r-md);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--secondary);white-space:pre-line;border:1px solid var(--border)}
.guidance-dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
.guidance-do,.guidance-dont{padding:var(--sp-3);border-radius:var(--r-md);font-size:var(--text-xs)}
.guidance-do{background:var(--green-bg);border:1px solid var(--green-border)}.guidance-do li{color:var(--green)}
.guidance-dont{background:var(--red-bg);border:1px solid var(--red-border)}.guidance-dont li{color:var(--red)}
.guidance-tip{padding:var(--sp-2) var(--sp-3);background:var(--bg-hover);border-radius:var(--r-md);margin-top:var(--sp-2);border-left:2px solid var(--accent)}

/* TEST BAR */
.test-bar{position:sticky;top:0;z-index:40;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) var(--sp-4);height:var(--header-h)}
.test-timer{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}

/* STEP */
.step{display:flex;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--border-subtle)}.step:last-child{border-bottom:none}
.step-num{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:700;font-family:var(--font-mono);background:var(--bg-active);color:var(--text-dim);border:1px solid var(--border)}
.step-num.done{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.step-num.error{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.step-body{flex:1}.step-action{font-size:var(--text-sm);font-weight:500}.step-expected{font-size:var(--text-2xs);color:var(--text-dim);margin-top:1px}

/* AUTH */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-root)}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-8);width:100%;max-width:380px}
.auth-logo{font-family:var(--font-mono);font-size:var(--text-sm);text-align:center;margin-bottom:var(--sp-5);color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}
.auth-card h2{font-size:var(--text-md);text-align:center;margin-bottom:var(--sp-4)}
.auth-links{margin-top:var(--sp-4);text-align:center;display:flex;flex-direction:column;gap:var(--sp-2)}
.auth-links a{font-size:var(--text-xs);color:var(--text-muted)}

/* EMPTY */
.empty{text-align:center;padding:var(--sp-8);color:var(--text-dim)}
.empty-icon{font-size:32px;margin-bottom:var(--sp-3)}.empty h3{font-size:var(--text-md);font-weight:600;color:var(--text-muted);margin-bottom:var(--sp-1)}.empty p{font-size:var(--text-xs)}

/* TOASTS */
.toasts{position:fixed;top:var(--sp-3);right:var(--sp-3);z-index:100;display:flex;flex-direction:column;gap:var(--sp-2)}
.toast{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);font-size:var(--text-xs);display:flex;align-items:center;gap:var(--sp-2);box-shadow:var(--shadow-md);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);min-width:260px}
.toast button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:var(--text-md);margin-left:auto}
.toast-success{border-color:var(--green-border);background:var(--green-bg);color:var(--green)}
.toast-danger{border-color:var(--red-border);background:var(--red-bg);color:var(--red)}
.toast-warning{border-color:var(--secondary-border);background:var(--secondary-bg);color:var(--secondary)}

/* ONBOARDING */
.onboarding-page{min-height:100vh;background:var(--bg-root);padding:var(--sp-8) var(--sp-4);display:flex;justify-content:center}
.onboarding-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6);width:100%;max-width:600px}
.radio-group{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.radio-card{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all 120ms;font-size:var(--text-xs)}
.radio-card:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.radio-card input[type="radio"]{display:inline-block;accent-color:var(--accent);width:14px;height:14px}
.checkbox-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.checkbox-tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--text-xs);cursor:pointer;transition:all 120ms;font-family:var(--font-mono)}
.checkbox-tag:has(input:checked){background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.checkbox-tag input{display:none}
.checkbox-label{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-sm);cursor:pointer}
fieldset{border:none;margin-bottom:var(--sp-5)}
legend{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle);width:100%}

/* PACKAGES */
.packages-select{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.package-option{cursor:pointer}.package-option input{display:none}
.package-opt-inner{padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-lg);text-align:center;transition:all 120ms;font-size:var(--text-xs);background:var(--bg-card)}
.package-option input:checked+.package-opt-inner{border-color:var(--accent);background:var(--accent-bg)}
.package-opt-inner .price{font-size:var(--text-xl);font-weight:700;color:var(--accent);margin-top:var(--sp-2);display:block;font-family:var(--font-mono)}

/* UTILS */
.mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-dim{color:var(--text-dim)}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.text-center{text-align:center}

@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}.stats-row{flex-direction:column}.form-row,.grid-2,.matrice,.guidance-dos{grid-template-columns:1fr}.content{padding:var(--sp-3)}}

/* ═══════════ HIGH CONTRAST OVERRIDES ═══════════ */
/* Boost text readability across the board */
.stat-label{color:var(--text-muted)}
.stat-value{color:var(--text-primary)}
.card-title{color:var(--text-primary)}
.form-label{color:var(--text-muted)}
.form-hint{color:var(--text-muted)}
.sidebar-label{color:var(--text-muted)}
.sidebar-link{color:var(--text-secondary)}
.text-muted{color:#a1a1aa}
.text-dim{color:#71717a}
th{color:var(--text-muted)}
td{color:var(--text-secondary)}
.badge{color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border)}
.toolbar-tab{color:var(--text-secondary)}
.toolbar-tab:hover,.toolbar-tab.active{color:var(--text-primary)}
.header-breadcrumb{color:var(--text-muted)}
.header-breadcrumb a{color:var(--text-secondary)}
.header-breadcrumb a:hover{color:var(--text-primary)}
.accordion-header:hover{background:var(--bg-elevated)}

/* Terminal panel */
.terminal{background:#0a0a0c;border:1px solid var(--border);border-radius:var(--r-lg);font-family:var(--font-mono);font-size:var(--text-2xs);color:#d4d4d8;overflow:hidden}
.terminal-header{background:var(--bg-elevated);padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.terminal-header .dots{display:flex;gap:5px}.terminal-header .dot{width:8px;height:8px;border-radius:50%}
.terminal-header .dot.red{background:#ef4444}.terminal-header .dot.yellow{background:#fbbf24}.terminal-header .dot.green{background:#22c55e}
.terminal-body{padding:12px;max-height:500px;overflow-y:auto;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.terminal-body .line-ok{color:#22c55e}.terminal-body .line-err{color:#ef4444}.terminal-body .line-warn{color:#fbbf24}.terminal-body .line-info{color:#3b82f6}
.terminal-body .line-dim{color:#52525b}
.terminal-footer{background:var(--bg-elevated);padding:4px 12px;border-top:1px solid var(--border);font-size:var(--text-2xs);color:var(--text-dim);display:flex;justify-content:space-between}

/* Run buttons row */
.run-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-3);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg)}
.run-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-card);cursor:pointer;transition:all 120ms;text-decoration:none;min-width:90px}
.run-btn:hover{background:var(--bg-hover);border-color:var(--accent);text-decoration:none}
.run-btn .run-icon{font-size:18px}
.run-btn .run-label{font-size:var(--text-2xs);color:var(--text-muted);font-family:var(--font-mono)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}



/* ═══════════ AUDIT LAYOUT ═══════════ */
/* Split: sessions tabs (left) | session content (right) */

.audit-tabs{background:var(--bg-elevated);border-right:1px solid var(--border);overflow-y:auto;max-height:700px}
.audit-tab{display:flex;align-items:center;gap:var(--sp-2);padding:10px 12px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background 120ms;text-decoration:none;color:var(--text-secondary)}
.audit-tab:hover{background:var(--bg-hover);text-decoration:none}
.audit-tab.active{background:var(--bg-card);border-right:2px solid var(--accent);color:var(--text-primary)}
.audit-tab .tab-type{width:22px;height:22px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:var(--font-mono);flex-shrink:0}
.audit-tab .tab-type.smart{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)}
.audit-tab .tab-type.ux_review{background:#7c3aed15;color:#a78bfa;border:1px solid #7c3aed40}
.audit-tab .tab-type.design_review{background:#ec489915;color:#f472b6;border:1px solid #ec489940}
.audit-tab .tab-type.selftest{background:#06b6d415;color:#67e8f9;border:1px solid #06b6d440}
.audit-tab .tab-meta{flex:1;min-width:0}
.audit-tab .tab-num{font-size:var(--text-2xs);font-family:var(--font-mono);font-weight:600}
.audit-tab .tab-info{font-size:9px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-tab .tab-status{font-size:8px}


/* Terminal + Findings split */






/* Compact finding row */
.finding-row{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border-subtle);font-size:var(--text-2xs)}
.finding-row:hover{background:var(--bg-hover)}
.finding-row .f-sev{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.finding-row .f-sev.critical{background:var(--red)}.finding-row .f-sev.high{background:#fbbf24}.finding-row .f-sev.medium{background:#3b82f6}.finding-row .f-sev.low{background:#71717a}
.finding-row .f-id{font-family:var(--font-mono);color:var(--text-dim);width:42px;flex-shrink:0}
.finding-row .f-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.finding-row .f-title.fixed{text-decoration:line-through;color:var(--text-dim)}
.finding-row .f-status{font-size:8px}

/* Session artifacts */
.artifacts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.artifact-card{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--text-2xs);color:var(--text-muted);text-decoration:none;transition:all 120ms}
.artifact-card:hover{border-color:var(--accent);background:var(--accent-bg);text-decoration:none;color:var(--text-primary)}

/* Section headings inside audit */
.section-label{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--border-subtle)}



/* ═══════════ AUDIT 100VH LAYOUT ═══════════ */
.content-flush{padding:0!important}

/* Top bar: KPIs + actions on one line */
.audit-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);background:var(--bg-card);gap:var(--sp-3);flex-wrap:wrap}
.stats-compact{gap:var(--sp-3);margin-bottom:0}.stats-compact .stat-block{padding:0}.stats-compact .stat-label{font-size:8px}.stats-compact .stat-value{font-size:var(--text-sm)}
.run-actions-compact{display:flex;gap:4px;flex-wrap:wrap}
.run-btn-sm{padding:4px 8px;font-size:var(--text-2xs);font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);text-decoration:none;transition:all 120ms;white-space:nowrap}
.run-btn-sm:hover{border-color:var(--accent);color:var(--text-primary);background:var(--accent-bg);text-decoration:none}

/* Main split fills remaining height */
.audit-main{display:grid;grid-template-columns:210px 1fr;height:calc(100vh - 130px);border-top:1px solid var(--border);overflow:hidden}

/* Left tabs */
.audit-tabs{background:var(--bg-elevated);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.audit-tab{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background 120ms;text-decoration:none;color:var(--text-secondary);flex-shrink:0}
.audit-tab:hover{background:var(--bg-hover);text-decoration:none}
.audit-tab.active{background:var(--bg-card);border-right:2px solid var(--accent);color:var(--text-primary)}
.audit-tab .tab-type{width:20px;height:20px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--font-mono);flex-shrink:0}
.audit-tab .tab-type.smart{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)}
.audit-tab .tab-type.ux_review{background:#7c3aed15;color:#a78bfa;border:1px solid #7c3aed40}
.audit-tab .tab-type.design_review{background:#ec489915;color:#f472b6;border:1px solid #ec489940}
.audit-tab .tab-type.selftest{background:#06b6d415;color:#67e8f9;border:1px solid #06b6d440}
.audit-tab .tab-meta{flex:1;min-width:0}
.audit-tab .tab-num{font-size:var(--text-2xs);font-family:var(--font-mono);font-weight:600}
.audit-tab .tab-info{font-size:8px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-tab .tab-status{font-size:7px}

/* Right column: session pane (top, scrollable) + findings rail (bottom, fixed height) */
.audit-right{display:flex;flex-direction:column;overflow:hidden}
.audit-pane{flex:1;overflow-y:auto;padding:var(--sp-3)}
.findings-rail{flex-shrink:0;border-top:1px solid var(--border);background:var(--bg-elevated);max-height:200px;display:flex;flex-direction:column}
.findings-rail .panel-header{padding:6px 12px;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.findings-scroll{overflow-y:auto;flex:1}

.finding-row{display:flex;align-items:center;gap:6px;padding:5px 12px;border-bottom:1px solid var(--border-subtle);font-size:var(--text-2xs);cursor:pointer;transition:background 80ms}
.finding-row:hover{background:var(--bg-hover)}
.finding-row .f-sev{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.finding-row .f-sev.critical{background:var(--red)}.finding-row .f-sev.high{background:#fbbf24}.finding-row .f-sev.medium{background:#3b82f6}.finding-row .f-sev.low{background:#71717a}
.finding-row .f-id{font-family:var(--font-mono);color:var(--text-dim);width:40px;flex-shrink:0}
.finding-row .f-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.finding-row .f-title.fixed{text-decoration:line-through;color:var(--text-dim)}
.finding-row .f-status{font-size:7px}

.artifacts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-1);margin-bottom:var(--sp-2)}
.artifact-card{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:9px;color:var(--text-muted);text-decoration:none;transition:all 120ms}
.artifact-card:hover{border-color:var(--accent);background:var(--accent-bg);text-decoration:none;color:var(--text-primary)}

.section-label{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:var(--sp-1);padding-bottom:2px;border-bottom:1px solid var(--border-subtle)}

@media(max-width:900px){
    .audit-main{grid-template-columns:1fr;height:auto}
    .audit-tabs{max-height:180px;border-right:none;border-bottom:1px solid var(--border)}
    .audit-topbar{flex-direction:column;align-items:flex-start}
    .audit-pane{max-height:500px}
}

/* ═══════════ SPRINT 13 — Triage des findings ═══════════ */
.f-chip{font-family:var(--font-mono);font-size:8px;padding:2px 6px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-dim);text-decoration:none;transition:all 100ms;white-space:nowrap}
.f-chip:hover{border-color:var(--accent);color:var(--text-secondary);text-decoration:none}
.f-chip.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:700}

.bulk-bar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--accent-bg);border-bottom:1px solid var(--accent);font-size:var(--text-2xs);position:sticky;top:0;z-index:2}
.bulk-btn{font-family:var(--font-mono);font-size:8px;padding:3px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all 100ms;white-space:nowrap}
.bulk-btn:hover{border-color:var(--accent);color:var(--text-primary)}

.findings-rail .panel-header input[type="checkbox"]{width:11px;height:11px;accent-color:var(--accent)}
.finding-row input[type="checkbox"]{width:11px;height:11px;accent-color:var(--accent)}

/* ═══════════ SPRINT 14 — Cloche de notifications ═══════════ */
.notif-bell{position:relative;display:inline-flex}
.bell-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer;padding:4px 8px;font-size:13px;line-height:1;transition:all 120ms}
.bell-btn:hover{border-color:var(--accent);color:var(--text-primary)}
.bell-dot{position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.notif-panel{position:absolute;right:0;top:calc(100% + 6px);width:320px;max-height:380px;overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-2);z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.notif-item{padding:8px;border-bottom:1px solid var(--border-subtle);cursor:pointer;font-size:var(--text-2xs)}
.notif-item:hover{background:var(--bg-hover)}
.notif-item.unread{border-left:2px solid var(--accent)}
.notif-item strong{display:block;font-size:var(--text-xs);margin-bottom:2px}
.notif-item p{color:var(--text-muted);margin:0 0 2px}
.notif-item small{color:var(--text-dim);font-size:9px}

/* ═══════════ SPRINT 16 — Atlas ═══════════ */
.atlas-content{padding:0 !important}
.atlas-wrap{display:grid;grid-template-columns:1fr 420px;height:calc(100vh - 60px)}
.atlas-canvas{position:relative;overflow:auto;padding:var(--sp-4);display:flex;gap:56px;align-items:flex-start}
#atlas-edges{position:absolute;top:0;left:0;pointer-events:none;z-index:0}
.atlas-edge{fill:none;stroke:var(--border);stroke-width:1.5;opacity:.6}
.atlas-col{display:flex;flex-direction:column;gap:var(--sp-3);z-index:1;min-width:180px}
.atlas-col-label{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}
.atlas-node{width:180px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:var(--bg-card);transition:all 120ms}
.atlas-node:hover{border-color:var(--accent);transform:translateY(-1px)}
.atlas-node.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.atlas-node img{width:100%;height:100px;object-fit:cover;object-position:top;display:block;background:#111}
.atlas-node-meta{display:flex;align-items:center;gap:5px;padding:5px 8px}
.atlas-node-title{flex:1;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atlas-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.atlas-dot.ok{background:var(--green)}
.atlas-dot.unchecked{background:var(--text-dim)}
.atlas-dot.slow{background:#fbbf24}
.atlas-dot.error_text,.atlas-dot.broken,.atlas-dot.redirect{background:var(--red)}
.atlas-panel{border-left:1px solid var(--border);overflow-y:auto;background:var(--bg-card)}
.bulk-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}