/* ============================================================================
   COMPETENCY COMPANION — STYLE.CSS
   ============================================================================
   
   VERSION HISTORY:
   ----------------
   v9.1  (Jun 2026) — Typography unified to Inter across all variables
                          variables, modernised component library (Phases 1–7.5)
   v9.1  (30 Mar 2026) — Phase A: ~405 lines of confirmed dead CSS removed
   v9.2  (30 Mar 2026) — Phase B: ~262 lines of duplicate selectors collapsed
   v9.3  (30 Mar 2026) — Phase C: @media blocks consolidated (12→9 at 600px)
   v9.4  (30 Mar 2026) — Phase D: CSS variable system rationalised
                          · Migrated 4 safe legacy vars to v9 equivalents (55 substitutions):
                            --color-surface → --surface  (identical value: #FFFFFF)
                            --color-bg      → --ground   (imperceptible: F8FAFC→F4F5F7)
                            --color-border  → --border   (imperceptible: E2E8F0→E4E7EE)
                            --color-text    → --ink      (imperceptible: 0F172A→0B1120)
                          · Removed orphaned --color-accent (0 uses)
                          · Removed 4 migrated vars from :root
                          · KEPT as intentional dual-system entries:
                            --color-primary (≠ --navy: different brand shade, 8 uses)
                            --color-text-light (no v9 equivalent, 11 uses)
                            --font-main: Inter (all variables unified)
                            --font-doc: Inter (previously Merriweather)
                            --tier-bronze/silver/gold (functional badge system)
                            --shadow-sm/md/gold (different values to v9 equivalents)
   v9.5  (30 Mar 2026) — Hotfix: nav bar flex-wrap restored; white-space:nowrap removed
   
   :root now contains 37 variables (down from 45 at v9.0)
   
   Last updated: 30 Mar 2026
   ============================================================================ */

/* --- BRAND IDENTITY: ROYAL & GOLD --- */

/* 1. Import Fonts */


:root {
    /* ═══════════════════════════════════════════════════════════
       LEGACY VARIABLES (v8.5) — PRESERVED FOR COMPATIBILITY
       ═══════════════════════════════════════════════════════════ */
    --font-main: "Inter", sans-serif;
    --font-doc: "Inter", sans-serif; /* Reports/Inputs — previously Merriweather */

    /* BRAND PALETTE */
    --color-primary: #0F2C59; /* Deep Royal Blue */
    
    /* UI PALETTE */
    --color-text-light: #64748B; /* Slate-500 (Subtitles) */

    /* TIERS (Remapped) */
    --tier-bronze: #334155;   /* Slate (Standard) */
    --tier-silver: #0F2C59;   /* Royal Blue (Full) */
    --tier-gold:   #D4AF37;   /* Gold (Pro) */
    
    /* UTILITY */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1);
    --shadow-gold: 0 4px 15px rgba(212, 175, 55, 0.25); /* Special Glow */

    /* ═══════════════════════════════════════════════════════════
       NEW DESIGN SYSTEM (v9.0) — ADDED FOR MODERNIZATION
       ═══════════════════════════════════════════════════════════ */
    
    /* Typography - v10 dual-font system */
    --font-head: 'Bricolage Grotesque', 'Inter', sans-serif;   /* Headings, titles, labels — distinct display voice */
    --font-body: 'Inter', sans-serif;                          /* Body text, UI copy */
    
    /* Core Palette - Modern refinement */
    --ink:         #0B1120;                 /* Deep text color */
    --surface:     #FFFFFF;                 /* Card backgrounds */
    --ground:      #F4F5F7;                 /* Page background */
    --border:      #E4E7EE;                 /* Light borders */
    --border-mid:  #C8CDD8;                 /* Medium borders */
    
    /* Brand Colors - Enhanced */
    --navy:        #0D2347;                 /* Primary brand dark */
    --navy-tint:   #EEF1F7;                 /* v10 — soft tinted backdrop, page headers */
    --indigo:      #3B4FD4;                 /* Interactive elements */
    --indigo-soft: #EEF0FD;                 /* Indigo backgrounds */
    --gold:        #C9991A;                 /* Accent/premium */
    --gold-soft:   #FDF5DC;                 /* Gold backgrounds */
    --gold-light:  #F7D97A;                 /* Light gold accents */
    
    /* Status Colors */
    --green:       #0F7B55;                 /* Success/strong */
    --green-soft:  #E8F7F1;                 /* Success backgrounds */
    --amber:       #C97B1B;                 /* Warning/developing */
    --amber-soft:  #FEF3E2;                 /* Warning backgrounds */
    --red:         #C4253B;                 /* Error/needs work */
    --red-soft:    #FDE8EB;                 /* Error backgrounds */

    /* v10 — momentum accent (new): streaks, correct-answer pulses, primary CTA hover.
       Kept distinct from --green so it never collides with success/correct-answer meaning. */
    --coral:       #E8623D;
    --coral-soft:  #FDE9E2;

    /* v10 — mascot-derived module accents (Arthur/Interview, Rachel/Profile only).
       Sarah's gold and Trevor's green are NOT promoted to module chrome here —
       they'd collide with --gold (premium) and --green (success) respectively.
       Scope those two to the mascots' own headshot rings/cards only. */
    --rust:        #AA4600;
    --rust-soft:   #F7E9DE;
    --plum:        #6E0064;
    --plum-soft:   #F3E3F2;
    
    /* Border Radius - Design system scale */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 22px;
    
    /* Shadows - Enhanced elevation system */
    --shadow-xs:  0 1px 2px rgba(11,17,32,0.06);
    --shadow-sm-new:  0 2px 8px rgba(11,17,32,0.08);
    --shadow-md-new:  0 6px 20px rgba(11,17,32,0.10);
    --shadow-lg:  0 16px 48px rgba(11,17,32,0.14);
}

body { 
    font-family: var(--font-main); 
    background-color: var(--navy-tint); 
    color: var(--ink); 
    margin: 0; 
    padding: 0; 
    font-size: 16px;
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
#app-container { 
    width: 100%;
    max-width: 800px; 
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 40px;
    background: var(--surface); 
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    box-sizing: border-box;
    overflow-x: hidden;
}
/* Page Management */
.app-page { 
    display: none; 
    padding: 20px 0;
}
.app-page.active { 
    display: block; 
}

/* Headers and Titles */
.header-container { 
    text-align: center;
    margin-bottom: 24px; 
    padding: 22px 20px;
    background: var(--navy-tint);
    border-radius: var(--r-lg);
    border-bottom: none;
}
.header-container h2 { 
    font-family: var(--font-head);
    font-size: 2.1rem;
    color: var(--navy); 
    margin-bottom: 8px; 
    font-weight: 800;
    letter-spacing: -0.01em;
}
.header-container .subtitle { 
    color: var(--color-text-light); 
    font-size: 1.05rem;
    margin: 0;
}
.header-container h2 i {
    color: var(--gold);
}
/* --- COMPACT HEADERS (Mobile First) --- */
@media (max-width: 600px) {
    /* Shrink the container padding */
    .header-container {
        padding-bottom: 5px !important;
        margin-bottom: 10px !important;
        border-bottom: none !important; /* Remove the divider line */
    }

    /* Make the H1 tiny and grey (Breadcrumb style) */
    .header-container h2 {
        font-size: 1rem !important;
        color: var(--color-text-light) !important;
        margin-bottom: 0 !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Hide subtitles on mobile to save space */
    .header-container .subtitle {
        display: none !important;
    }
    
    /* Keep the Logo Header big though! */
    .brand-logo-container .brand-title {
        font-size: 1.2rem !important; /* Keep brand visible */
        color: var(--ink) !important;
    }
}


/* --- 2. Navigation Bar (FIXED) & Forms --- */
/* --- THIS IS THE NEW, MORE ROBUST BLOCK --- */
/* Active State: Blue Bar + Gold Icon */


/* *** FIX: ADDED THIS ENTIRE BLOCK *** */

/* Forms */
.control-group { 
    margin-bottom: 20px;
/* More spacing */
}
label { 
    display: block; 
    font-weight: 600; 
    margin-bottom: 8px;
/* More spacing */
    color: var(--ink);
}
.form-input, .form-select { 
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border); 
    border-radius: var(--r-md); 
    box-sizing: border-box; 
    font-size: 1rem;
    background-color: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--ink);
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(232,98,61,0.15);
}
textarea.form-input {
    min-height: 150px;
    resize: vertical;
    font-family: var(--font-doc); /* Inter — not monospace; this is prose input */
    font-size: 1rem;
    line-height: 1.8;
    color: #334155;
}

/* Apply to Scorecard Output */
#scorecard-primary-text {
    font-family: var(--font-doc) !important;
    line-height: 1.8;
}

/* Toggle Switch */
.radio-group-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.radio-group-toggle input[type="radio"] {
    display: none;
}
.radio-group-toggle label {
    flex: 1;
    text-align: center;
    padding: 10px;
margin: 0;
    font-weight: 600;
    cursor: pointer;
    background: #f9faff;
    color: var(--color-text-light);
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.95rem;
}
.radio-group-toggle .toggle-label-left {
    border-right: 1px solid var(--border);
}
.radio-group-toggle input[type="radio"]:checked + label {
    background: var(--color-primary);
color: #fff;
    border-bottom-color: var(--color-primary);
}
.radio-group-toggle label.text-muted {
    color: #a0aec0;
}
.radio-group-toggle label.text-muted .fa-crown {
    color: var(--color-pro);
    opacity: 0.5;
}
/* --- 3. Buttons --- */
.button-group { 
    margin-top: 25px; 
    display: flex; 
    gap: 12px;
}
.btn { 
    padding: 12px 22px; /* Larger, more comfortable */
    border: none;
border-radius: 8px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 1rem;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}
.btn-lg {
    padding: 14px 28px;
    font-size: 1.1rem;
}
.btn-sm {
    padding: 8px 14px;
    font-size: 0.85rem;
}
.btn-primary { 
    background-color: var(--color-primary); 
    color: white; 
}
.btn-primary:hover { 
    background-color: var(--color-primary-dark);
}
.btn-secondary { 
    background-color: var(--surface); 
    color: var(--color-text-light);
    border: 1px solid var(--border);
}
.btn-secondary:hover { 
    background-color: var(--ground);
    color: var(--ink);
}
.btn-tertiary {
    background-color: var(--color-pro);
    color: white;
}
.btn-tertiary:hover {
    background-color: var(--color-pro-dark);
}
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: #e2e8f0;
    color: #a0aec0;
box-shadow: none;
    transform: none;
}
.btn:disabled:hover {
    background-color: #e2e8f0;
    box-shadow: none;
    transform: none;
}

/* --- 4. Dashboard Page Styles --- */

#tier-badge {
    padding: 4px 12px;
    border-radius: 20px; /* Pill shape */
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#tier-badge.trial { background-color: var(--tier-bronze); color: white; }
#tier-badge.full  { background-color: var(--tier-silver); color: white; }
#tier-badge.pro   { background-color: var(--tier-gold); color: #0F172A; } /* Dark text on gold */


/* NEW: Strengths & Gaps Module */
.dashboard-module {
    background: linear-gradient(135deg, #f9faff, #f4f7fa);
    border: 1px solid var(--border);
border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}
.dashboard-module h4 {
    margin: 0 0 15px 0;
    font-weight: 600;
font-size: 1.1rem;
    color: var(--ink);
}
.dashboard-module h5 {
    margin: 15px 0 10px 0;
    font-weight: 600;
    font-size: 0.9rem;
color: var(--color-text-light);
}
.strengths-list, .gaps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.strengths-list li, .gaps-list li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 1rem;
}
.strengths-list li:not(:last-child), .gaps-list li:not(:last-child) {
    border-bottom: 1px solid var(--border);
}
.strengths-list li .fas {
    margin-right: 12px;
    font-size: 1.1rem;
}
.gaps-list li.gap .fas {
    color: var(--color-trial);
margin-right: 12px;
    font-size: 1.1rem;
}
.strengths-list li span, .gaps-list li span {
    flex: 1;
    font-weight: 500;
}
.strengths-list li strong, .gaps-list li strong {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
}
/* NEW: Dashboard Actions */
.dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 10px;
}
@media (min-width: 600px) {
    .dashboard-actions {
        grid-template-columns: 1fr 1fr;
    }
}
/* --- 5. Modals & Info Text --- */
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--ink);
}
/* NEW: Pro Feature List Modal */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.feature-list li {
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 0;
    display: flex;
    align-items: center;
}
.feature-list .fas {
    color: var(--color-pro);
    margin-right: 12px;
}


/* Utility Classes */
.mt-4 { margin-top: 1.5rem;
}
.mt-5 { margin-top: 3rem; }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-light); }
.text-small { font-size: 0.9rem;
}

/* Info / Status Text */
.info-text {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 15px;
    line-height: 1.5;
}
.info-text a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.info-text a:hover {
    text-decoration: underline;
}

/* --- 6. History Page Styling --- */
#history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}
.history-item:hover {
    box-shadow: var(--shadow-md);
}
.history-title {
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    font-size: 1.1rem;
}
.history-title strong {
    color: var(--color-primary);
}
.history-meta {
    font-size: 0.85rem;
    color: var(--color-text-light);
margin: 5px 0 0 0;
}
.history-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}
/* --- 7. RAG Colors & Icons --- */
.rag-green { background-color: #28a745; color: white; }
.rag-amber { background-color: #ffc107; color: #333;
}
.rag-red { background-color: #dc3545; color: white; }
.success-icon { color: #28a745; }
.fail-icon { color: #dc3545;
}
/* --- SCORECARD HEADER (Side-by-Side) --- */
.scorecard-summary {
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    
    /* Flex Layout: Side by Side */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.score-ring {
    width: 90px;       /* Slightly smaller to fit better */
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    border: 8px solid;
    background-color: #ffffff;
    flex-shrink: 0;    /* Prevent squishing */
    margin: 0;         /* Remove auto margins */
}

/* Summary Text Adjustment */
#scorecard-summary {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
}

/* Specific Colors (Ensure they override) */
.score-ring.rag-green { border-color: #28a745; color: #28a745; }
.score-ring.rag-amber { border-color: #f59e0b; color: #d97706; }
.score-ring.rag-red   { border-color: #dc3545; color: #dc3545; }

/* Mobile Fallback: Stack if screen is TINY (< 350px) */
@media (max-width: 350px) {
    .scorecard-summary {
        flex-direction: column;
        text-align: center;
    }
    .score-ring { margin-bottom: 15px; }
}

/* NEW: STAR Structure Analysis */
#star-structure-analysis {
    margin-bottom: 30px;
}
#indicator-breakdown-container {
    margin-top: 15px;
}
#indicator-breakdown-container h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}
#indicator-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 15px;
}
/* --- 9. Upgrade Prompts & Feature Table --- */
.upgrade-prompt {
    padding: 24px;
    background: linear-gradient(135deg, #fffaf0, #fff3e0);
border: 1px solid #ffe4b3;
    border-radius: 12px;
    text-align: center;
    margin-top: 20px;
    box-shadow: var(--shadow-md);
}
.upgrade-prompt p {
    font-weight: 500;
font-size: 1.1rem;
    margin: 0 0 15px 0;
    color: var(--ink);
}


/* Feature Table */
.feature-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9rem;
    border: 1px solid var(--border);
border-radius: 8px;
    overflow: hidden;
}
.feature-table th, .feature-table td {
    border: 1px solid var(--border);
    padding: 12px;
    text-align: center;
vertical-align: middle;
}
.feature-table th {
    background-color: var(--ground);
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9rem;
}
.feature-name {
    text-align: left !important;
    font-weight: 600;
    color: var(--ink);
    background: #f9faff;
}
.pro-column {
    background-color: #f4f0ff;
}
.feature-table th.pro-column {
    color: var(--color-pro);
    background-color: #f4f0ff;
}
.check-icon { color: #28a745; font-size: 1.2rem; }
.lock-icon { color: #a0aec0; font-size: 1.1rem;
}

/* --- 10. Insights & Portfolio Report --- */

/* Insights Heatmap Grid */
.heatmap-grid { 
    display: grid;
grid-template-columns: 3fr 1fr; 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    overflow: hidden; 
    margin-top: 20px;
}
.heatmap-header { 
    background-color: #ebf0ff;
    font-weight: 700; 
    padding: 12px; 
    border-bottom: 1px solid var(--border); 
    text-align: center;
    font-size: 0.9rem;
}
.heatmap-header.heatmap-comp-name {
    text-align: left;
}
.heatmap-cell {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.heatmap-cell.heatmap-comp-name {
    text-align: left;
    font-weight: 600;
background-color: #f9faff;
    justify-content: flex-start;
    color: var(--ink);
}
.heatmap-grid > .heatmap-cell:nth-last-child(-n+3) {
    border-bottom: none;
}
.heatmap-score {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-block;
}

/* Portfolio Report Page */
.portfolio-report-item {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 15px;
    background: var(--surface);
overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.portfolio-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9faff;
border-bottom: 1px solid var(--border);
}
.portfolio-competency-title {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: 1.1rem;
}
.portfolio-rag {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 15px;
}
.portfolio-example-preview {
    padding: 16px;
    font-style: italic;
    color: var(--color-text-light);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- 11. NEW: Coaching Wizard Page --- */
.original-example-box {
    background: #f9faff;
    border: 1px solid var(--border);
border-radius: 8px;
    padding: 16px;
    margin-bottom: 25px;
    font-size: 0.95rem;
}
.original-example-box strong {
    color: var(--ink);
    font-weight: 600;
}
.original-example-box p {
    font-style: italic;
    color: var(--color-text-light);
    margin: 8px 0 0 0;
}
#coach-prompts-container p {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
}
#coach-prompts-container .control-group {
    padding: 16px;
background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 15px;
}
#coach-prompts-container .control-group label {
    font-size: 1rem;
font-weight: 600;
    line-height: 1.5;
}
/* --- CHAT HEADER LAYOUT --- */

.chat-header-row {
    display: flex !important;
    flex-direction: row !important; /* Force row always */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: #fff;
}

.chat-title-group {
    text-align: left;
}

.chat-title-group h2 {
    margin: 0;
    font-size: 1.2rem; /* Reasonable size */
}

/* Exit Button Style */
.btn-icon-only {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: -10px; /* Align with edge */
    transition: color 0.2s;
}
.btn-icon-only:hover {
    color: #ef4444; /* Turn red on hover */
}

/* --- LOCKED NAV BUTTON STATE --- */
.nav-link.nav-locked {
    background-color: #f8f9fa; /* Very light grey background */
    border: 1px dashed #cbd5e1; /* Subtle dashed border */
    color: #94a3b8; /* Muted grey text */
}

.nav-link.nav-locked:hover {
    background-color: #e2e8f0; /* Slightly darker grey on hover */
    color: #64748b;
}

/* The Gold Lock Icon */
.nav-link.nav-locked .fas {
    color: #d97706; /* Rich Gold/Amber color */
    font-size: 1rem; /* Keep it standard size */
    margin-bottom: 2px;
}
.btn-gold { 
    border-left-color: #d97706 !important; 
}
.btn-gold i:first-child, 
.btn-gold strong { 
    color: #b45309 !important; 
}
.btn-gold:hover { 
    background-color: #fffbeb !important; /* Gold tint */
    box-shadow: var(--shadow-gold) !important;
}

/* --- MOBILE OPTIMIZATIONS (Aggressive) --- */

@media (max-width: 600px) {
    /* Make the H1 tiny and grey */
    .header-container h2 {
        font-size: 0.85rem !important; /* Tiny size */
        color: var(--color-text-light) !important;
        margin-bottom: 0 !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* EXCEPTION: Keep the Main Dashboard Logo big! */
    #dashboard-page .header-container {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
}

.pricing-grid {
    display: grid;
    /* Desktop: Comfortable Ratio */
    grid-template-columns: 2fr 1fr 1fr 1fr; 
    gap: 1px;
    background-color: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    width: 100%; /* Force full width */
}

.pricing-header {
    padding: 12px 4px; /* Tight padding */
    font-weight: 700;
    text-align: center;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colors match Badges */
.pricing-header.tier-trial { background: linear-gradient(135deg, #b47d3e 0%, #8c5b28 100%); }
.pricing-header.tier-full { background: linear-gradient(135deg, #94a3b8 0%, #475569 100%); }
.pricing-header.tier-pro { background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%); }
.pricing-header:first-child { background: #f8fafc; color: var(--ink); text-shadow: none; }

.pricing-row { display: contents; }

.pricing-row > div {
    background-color: #fff;
    padding: 10px 2px; /* Minimal side padding */
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack icon and text if needed */
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--ink);
    line-height: 1.2;
}

.pricing-row > .feature-name {
    justify-content: center; /* Center align text on mobile looks better if squished */
    text-align: center; 
    font-weight: 600;
    padding-left: 4px;
    align-items: center; /* Center visually */
}

/* Highlight Row */
.pricing-row.highlight > div { background-color: #fffbeb; }
.pricing-row.highlight > .feature-name { color: #d97706; }

/* MOBILE SQUEEZE (Max Width 600px) */
@media (max-width: 600px) {
    /* Hide sub-page headers on mobile — dashboard header kept visible */
    #scorecard-page .header-container,
    #history-page .header-container,
    #insights-page .header-container {
        display: none !important;
    }

    .pricing-grid {
        /* The Ratio: Feature gets 1.4 shares, Tiers get 1 share each */
        grid-template-columns: 1.4fr 1fr 1fr 1fr; 
        font-size: 0.7rem !important; /* Tiny font */
    }
    
    .pricing-header {
        font-size: 0.7rem;
        padding: 8px 2px;
        word-break: break-word; /* Allow "Full Access" to wrap */
    }
    
    .pricing-row > div {
        font-size: 0.7rem;
        padding: 8px 1px;
    }

    .feature-name {
        font-size: 0.65rem; /* Even smaller for labels */
        hyphens: auto; /* Allow breaking */
    }
}

.text-green { color: #16a34a; font-size: 0.9rem; margin-bottom: 2px; }
.text-gold { color: #d97706; }
.text-muted { color: #cbd5e1; }
/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — PHASE 2 REDESIGN
   ══════════════════════════════════════════════════════════════════════════ */

#landing-page {
    background-color: var(--navy);
    color: white;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9999;
}

/* This is a fixed-height flex column relying on overflow-y:auto for tall
   content — direct children must never flex-shrink below their natural
   size, or content overflows internally (bleeding into the next section)
   instead of the page simply scrolling. */
#landing-page > * {
    flex-shrink: 0;
}

/* ── Hero video background (scoped to hero zone only) ── */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Soft fade at top and bottom so video dissolves into the navy
       rather than ending with a hard rectangle edge */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.hero-vid {
    /* Cover-fill: object-fit cover always fills the container.
       translateZ(0) promotes to its own composite layer — prevents
       subpixel shimmer on GPU compositing. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) translateZ(0);
    opacity: 0;
    /* Slower transition reduces perceived flash — both clips briefly
       overlap at low combined opacity rather than peaking together */
    transition: opacity 0.6s ease;
    will-change: opacity;
    background: transparent;
}

.hero-vid--visible {
    /* Low opacity keeps the animation as ambience, aiding readability */
    opacity: 0.30;
}

/* Unified hero box — wraps logo, headline, mascots, and the setup card as
   ONE navy panel, rather than splitting text and CTA into separate boxes
   side by side. Solid fill (not a radial fade) since it now needs to cover
   a much larger, taller area reliably. */
.hero-text-backdrop {
    position: relative;
    z-index: 1;
    padding: 36px 40px 32px;
    border-radius: 24px;
    background: rgba(9, 25, 54, 0.82);
    border: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Noise texture overlay for depth */
#landing-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* Atmospheric glow blobs */
.landing-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.18;
    z-index: 1;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: var(--indigo);
    top: -100px;
    right: -80px;
}

.blob-2 {
    width: 380px;
    height: 380px;
    background: var(--gold);
    bottom: -60px;
    left: -60px;
    opacity: 0.12;
}

.blob-3 {
    width: 260px;
    height: 260px;
    background: #6B8AE8;
    top: 40%;
    left: 30%;
    opacity: 0.10;
}

/* Header bar */
.landing-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 28px;
}

.landing-header-spacer {
    flex: 1;
}

.landing-pill {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
}

.landing-pill:hover {
    background: rgba(255,255,255,0.14);
    color: white;
}

/* Logo — centred hero treatment inside the main content area */
.landing-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.landing-logo-img {
    height: 92px;
    width: 92px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.landing-logo-img:hover {
    transform: scale(1.04);
}

/* Hero section */
.landing-hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px 48px;
    gap: 0;
    min-height: 55vh;
    /* #landing-page is a flex column holding a fixed-height viewport; without
       this, flex's default shrink behaviour squeezes the hero below the
       height its content (headline + setup card) actually needs on desktop,
       and the overflow bleeds down into .landing-features below it — exactly
       the "benefits bar overlaps the hero" bug. Scrolling (already enabled
       on #landing-page) is the correct way to handle tall content here, not
       compression. */
    flex-shrink: 0;
}

/* .hero-eyebrow ("NICS & UK Success Profiles" pill) removed — redundant
   with the "Framework aligned" feature card below, and read as an
   AI-template pattern. */

.hero-headline {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    font-weight: 800;
    color: white;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
    animation: fadeUp 0.6s 0.1s ease both;
    max-width: 720px;
}

/* .hero-headline em (gradient-clipped text) removed — the headline no
   longer uses a colour break, by design (see change note on the h1
   markup). Kept out rather than left as dead CSS. */

/* .hero-sub removed — the subtext was cut along with the headline reword;
   the setup-card footnote now carries the "free, no account" reassurance
   instead of repeating it in three places. */

.hero-mascot-intro {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-light);
    margin: 10px 0 0;
    text-align: center;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    max-width: 560px;
    margin: 0 auto 4px;
    text-align: center;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    animation: fadeUp 0.6s 0.3s ease both;
    width: 100%;
    margin-top: 8px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Mascot stage — plain layout wrapper now (the outer hero-text-backdrop
   provides the one unified navy box everything sits inside) */
.mig-stage {
    position: relative;
    width: 100%;
    margin: 20px 0 4px;
}

.mig-wrap {
    display: none;
}

/* Mobile only (<768px): interactive headshot row — the "intention" of the
   full hover experience, scaled down to circular headshots rather than the
   full composed illustration, which doesn't read well at this width.
   Tablet and up get the full composition (see 768px breakpoint below). */
.mig-wrap-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}

.mig-wrap-mobile .mig-figure {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
}

.mig-wrap-mobile .mig-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tablet and up (768px+): full-pose lineup instead of the headshot row.
   Uses the individual full-pose character illustrations (the same assets
   used on the feature pages) laid out as a simple flex row, rather than
   cropping them out of the combined group photo — cropping from the group
   photo left visible hand/limb artifacts at the crop boundaries; the
   individual full-pose images are complete illustrations with no such
   issue. */
@media (min-width: 768px) {
    .mig-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 20px;
        width: 100%;
        filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35));
    }

    .mig-wrap .mig-figure {
        flex: 0 0 auto;
        transform-origin: bottom center;
    }

    .mig-wrap .mig-figure img {
        display: block;
        width: auto;
        height: 200px;
    }

    .mig-wrap-mobile {
        display: none;
    }
}

/* Shared hover mechanics — works for both the mobile headshot row and the
   desktop group composition, since both use the same .mig-figure class */
.mig-figure {
    cursor: pointer;
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.mig-stage:hover .mig-figure {
    opacity: 0.4;
    filter: grayscale(75%) brightness(0.75);
}

.mig-figure:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1.12);
    z-index: 5;
    position: relative;
}

/* Caption panel — fixed height so nothing shifts as the text changes */
.mig-caption-panel {
    display: block;
    min-height: 40px;
    max-width: 400px;
    margin: 8px auto 4px;
    padding: 0 8px;
    text-align: center;
}

.mig-caption {
    display: none;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.mig-caption strong {
    color: white;
}

.mig-caption-default {
    display: block;
}

.mig-stage:has(.mig-figure[data-mascot="sarah"]:hover)  .mig-caption-default,
.mig-stage:has(.mig-figure[data-mascot="trevor"]:hover) .mig-caption-default,
.mig-stage:has(.mig-figure[data-mascot="arthur"]:hover) .mig-caption-default,
.mig-stage:has(.mig-figure[data-mascot="rachel"]:hover) .mig-caption-default {
    display: none;
}

.mig-stage:has(.mig-figure[data-mascot="sarah"]:hover)  .mig-caption[data-for="sarah"],
.mig-stage:has(.mig-figure[data-mascot="trevor"]:hover) .mig-caption[data-for="trevor"],
.mig-stage:has(.mig-figure[data-mascot="arthur"]:hover) .mig-caption[data-for="arthur"],
.mig-stage:has(.mig-figure[data-mascot="rachel"]:hover) .mig-caption[data-for="rachel"] {
    display: block;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
    border: none;
    border-radius: 100px;
    padding: 16px 36px;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 28px rgba(201,153,26,0.45);
    letter-spacing: -0.01em;
}

.btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 40px rgba(201,153,26,0.6);
}

.btn-cta-primary .arrow-icon {
    width: 26px;
    height: 26px;
    background: var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.btn-cta-primary:hover .arrow-icon {
    transform: translateX(3px);
}

.btn-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    padding: 15px 30px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cta-ghost:hover {
    border-color: rgba(255,255,255,0.35);
    color: white;
}

/* Feature cards */
.landing-features {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lf-card {
    padding: 28px;
    background: rgba(255,255,255,0.02);
    transition: background 0.2s;
}

.lf-card:hover {
    background: rgba(255,255,255,0.05);
}

.lf-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.lf-title {
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-bottom: 6px;
}

.lf-body {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.55;
}

/* Trust strip */
/* .landing-trust / .trust-item removed — the trust strip they styled was
   already replaced by the companion showcase, and the hero's own inline
   trust row (which reused .trust-item) was cut in the same pass that
   removed .hero-sub, since all three were repeating the same "free, no
   account" message the setup-card footnote already carries. The companion
   showcase strip itself (.landing-companions and children) was later
   removed too — the mascots now live in the hero at every screen size
   instead of a separate section further down the page. */

/* SEO footer (minimal visibility, for search engines) */
.seo-footer {
    position: relative;
    z-index: 2;
    padding: 20px 36px;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.25);
    line-height: 1.6;
}

.seo-footer p {
    margin-bottom: 10px;
}

.landing-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.landing-footer-links a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.landing-footer-links a:hover {
    color: rgba(255,255,255,0.8);
    text-decoration: underline;
}

.footer-dot-landing {
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
}

.landing-copyright {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.2);
    margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   SOCIAL LINKS — sitewide (footer, hero, blog)
   ════════════════════════════════════════════════════════════════════════ */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.social-links a:hover {
    color: var(--indigo);
    border-color: var(--indigo);
    background: var(--indigo-soft);
}

/* Dark-background variant — landing footer, hero */
.social-links--on-dark a {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.55);
}

.social-links--on-dark a:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
}

.blog-footer-social {
    margin: 16px 0;
}

/* Fade-up animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Override the default .app-page hiding logic */
#landing-page.active {
    display: flex !important; 
}

/* Hide footer when landing page is active (all browsers, all devices) */
#app-footer {
    display: none;
}

/* Only show footer when landing page is NOT active */
body:not(:has(#landing-page.active)) #app-footer,
.app-page:not(#landing-page) ~ #app-footer {
    display: block;
}

/* Force app-container to be invisible when landing is active */
#app-container:has(#landing-page.active) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .landing-features {
        grid-template-columns: 1fr;
    }
    
    .landing-header {
        padding: 14px 16px;
    }

    .landing-logo-img {
        height: 68px;
        width: 68px;
    }

    .landing-hero {
        padding: 24px 20px 40px;
        min-height: unset;
        align-items: center;
        text-align: center;
    }
    
    .hero-headline {
        font-size: 2rem;
        text-align: center;
    }
    
    .hero-sub {
        text-align: center;
    }

    .hero-text-backdrop {
        padding: 24px 20px 20px;
        border-radius: 16px;
        width: 100%;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta-row {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-cta-primary,
    .btn-cta-ghost {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    
    .landing-trust {
        gap: 20px;
        padding: 16px 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   END OF LANDING PAGE STYLES
   ══════════════════════════════════════════════════════════════════════════ */


/* --- SCORECARD ACCORDIONS --- */

.accordion-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    background: white;
    overflow: hidden;
}

.accordion-header {
    padding: 15px;
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.accordion-header:hover {
    background: #f1f5f9;
}

.accordion-title {
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.accordion-score {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 2px 8px;
    border-radius: 4px;
}

.accordion-content {
    display: none; /* Hidden by default */
    padding: 20px;
    border-top: 1px solid var(--border);
}

/* Open State */
.accordion-item.active .accordion-content {
    display: block;
}
.accordion-item.active .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- GLOBAL CAROUSEL (Netflix Style) --- */
.snap-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 5px 2px 20px 2px; /* Bottom padding for shadow breathing room */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    scrollbar-width: none; /* Firefox: Hide scrollbar */
}

/* Hide Scrollbar for Chrome/Safari */
.snap-scroll-container::-webkit-scrollbar { 
    display: none; 
}

.snap-card {
    flex: 0 0 85%; /* Shows 85% of the card, leaving 15% to hint at the next one */
    scroll-snap-align: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s;
}

.snap-card:active {
    transform: scale(0.98);
}

/* Dot Navigation Indicators */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
    padding-bottom: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.dot.active {
    background-color: var(--color-primary);
}

/* Desktop Tweak: Show more cards at once */
@media (min-width: 600px) {
    .snap-card {
        flex: 0 0 45%; /* Show 2 cards at once on desktop */
    }
}

/* Dot Separator */
.footer-dot {
    color: #e2e8f0;
    font-size: 0.8rem;
}

/* Mobile Tweak: Shrink text/gap slightly to keep it on one line */

/* --- LAYOUT FIXES --- */
html, body {
    margin: 0;
    padding: 0;
}


/* --- STRICT FOOTER LAYOUT --- */

/* Ensure the inner content is centered but doesn't stretch the parent */
.footer-row {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 15px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}


/* 2. Link Colors (Force Gold/White) */
.footer-primary a {
    color: #D4AF37 !important; /* Gold */
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    -webkit-text-fill-color: #D4AF37; /* Safety for mobile browsers */
}
.footer-primary a:hover {
    color: #fbbf24 !important;
    text-decoration: underline;
}

.footer-secondary a {
    color: #94a3b8 !important; /* Silver */
    font-size: 0.85rem;
    text-decoration: none;
}
.footer-secondary a:hover {
    color: white !important;
    text-decoration: underline;
}

.footer-tertiary {
    color: rgba(255,255,255,0.3) !important;
    font-size: 0.8rem;
    margin-top: 20px;
}

.footer-dot { 
    color: rgba(255,255,255,0.2); 
}

/* 3. Gold Badge Fix */
.hero-badge {
    background-color: #D4AF37 !important; /* Gold Background */
    color: #0F2C59 !important; /* Blue Text */
    font-weight: 800 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    white-space: nowrap;
}
/* --- GLOBAL LAYOUT FIX (Prevents Horizontal Scroll) --- */
html {
    box-sizing: border-box;
    overflow-x: hidden; /* Forcefully cuts off any side-spill */
}
*, *:before, *:after {
    box-sizing: inherit;
}


/* ============================================================================
   COMPONENT LIBRARY (v9.0+) — Phase 5 Redesign
   ============================================================================
   Modern component styles used by view-dashboard.js, view-scorecard.js,
   view-history.js and view-insights.js. First-draft duplicates consolidated
   into single canonical blocks during Phase B cleanup (30 Mar 2026).
   ============================================================================ */

/* ── MODERNIZED ACTION CARDS (for dashboard) ──────────────────────────── */
.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  text-align: left;
}

.action-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  transition: opacity 0.2s;
  opacity: 0;
}

.action-card:hover {
  box-shadow: var(--shadow-md-new);
  transform: translateY(-2px);
  border-color: transparent;
}

.action-card:hover::after {
  opacity: 1;
}

.ac-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.ac-green .ac-icon  { background: var(--green-soft); color: var(--green); }
.ac-blue .ac-icon   { background: var(--indigo-soft); color: var(--indigo); }
.ac-gold .ac-icon   { background: var(--gold-soft); color: var(--gold); }
.ac-slate .ac-icon  { background: var(--ground); color: #6B7A99; }

.ac-green::after  { background: var(--green); }
.ac-blue::after   { background: var(--indigo); }
.ac-gold::after   { background: var(--gold); }

.ac-label {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.ac-sub {
  font-size: 0.75rem;
  color: #8A93A8;
  line-height: 1.45;
  margin-top: 2px;
}

.ac-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--border);
  font-size: 0.75rem;
  transition: all 0.2s;
}

.action-card:hover .ac-arrow {
  color: var(--border-mid);
  transform: translate(2px, -2px);
}

/* ── READINESS CARD (for dashboard hero) ──────────────────────────────── */
.readiness-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
  border-radius: var(--r-xl);
  padding: 28px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: white;
}

.readiness-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  background: var(--indigo);
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(50px);
}

.readiness-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.readiness-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}

.readiness-grade {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.readiness-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.stat-block {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 16px;
}

.stat-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  color: white;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-num span {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.readiness-progress {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  height: 5px;
  overflow: hidden;
}

.readiness-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), #7B9AF0);
  border-radius: 100px;
  position: relative;
}

.readiness-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(123,154,240,0.4);
}

/* ── SCORE SUMMARY CARD (for scorecard page) ──────────────────────────── */


/* ── STAR ANALYSIS (for scorecard page) ──────────────────────────────── */


.slb-green  { background: var(--green-soft); color: var(--green); }
.slb-amber  { background: var(--amber-soft); color: var(--amber); }

/* ── INDICATOR LIST (for scorecard page) ──────────────────────────────── */


.indicator-row:hover {
  background: var(--ground);
}


.ind-hit  { color: var(--green); }
.ind-miss { color: var(--red); }

/* ── HISTORY CARDS ──────────────────────────────────────────────────── */

/* ── SECTION LABELS ──────────────────────────────────────────────────── */
.section-label-new {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--border-mid);
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label-new::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--indigo);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── UTILITY CLASSES ──────────────────────────────────────────────────── */

/* ============================================================================
   END OF NEW COMPONENT STYLES
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════
   GAP CARD STYLES — PHASE 3 (Behaviour Coverage Cards)
   ════════════════════════════════════════════════════════════════════════ */

.gap-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-xs);
}

.gap-card:hover {
    box-shadow: var(--shadow-md-new);
    transform: translateY(-2px);
    border-color: transparent;
}

.gap-card-strong {
    border-left: 4px solid var(--green);
}

.gap-card-strong:hover {
    background: var(--green-soft);
}

.gap-card-developing {
    border-left: 4px solid var(--amber);
}

.gap-card-developing:hover {
    background: var(--amber-soft);
}

.gap-card-weak {
    border-left: 4px solid var(--red);
}

.gap-card-weak:hover {
    background: var(--red-soft);
}

.gap-card-empty {
    border-left: 4px solid var(--border);
}

.gap-card-empty:hover {
    background: var(--ground);
}

/* ════════════════════════════════════════════════════════════════════════
   END OF GAP CARD STYLES
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   TIER BADGES — PHASE 3 (Premium/Trial Status Badges)
   ════════════════════════════════════════════════════════════════════════ */

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid;
}

.tier-badge-premium {
    background: linear-gradient(135deg, var(--gold-soft), #FEF3E2);
    color: var(--gold);
    border-color: rgba(201,153,26,0.3);
    box-shadow: 0 2px 8px rgba(201,153,26,0.15);
}

.tier-badge-trial {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.2);
}

/* ════════════════════════════════════════════════════════════════════════
   END OF TIER BADGES
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   BADGE VARIANTS — PHASE 3 (Premium vs Trial Distinction)
   ════════════════════════════════════════════════════════════════════════ */

/* Base hero-badge styles are already defined above */
/* Add color variants for Premium vs Trial */

.badge-premium {
    background-color: #D4AF37 !important; /* Gold */
    color: #0F2C59 !important; /* Navy text */
}

.badge-trial {
    background: rgba(255,255,255,0.15) !important; /* Semi-transparent white on navy */
    color: rgba(255,255,255,0.9) !important; /* White text */
    border: 1px solid rgba(255,255,255,0.25) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   END OF BADGE VARIANTS
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED FOOTER STYLES — PHASE 3 (Matches Landing Page)
   ════════════════════════════════════════════════════════════════════════ */

#app-footer {
    background: var(--ground);
    border-top: 1px solid var(--border);
    padding: 24px 36px;
    text-align: center;
    font-size: 0.8rem;
    color: #8A93A8;
}

.app-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.app-footer-links a {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.app-footer-links a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.footer-dot-app {
    color: var(--border);
    font-size: 0.7rem;
}

.app-footer-copyright {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Mobile responsive */
@media (max-width: 600px) {
    #app-footer {
        padding: 20px 24px;
    }
    
    .app-footer-links {
        gap: 8px;
        font-size: 0.75rem;
    }

    /* Legacy footer-row responsive */
    .footer-row { gap: 15px; }
    .footer-primary a { font-size: 0.85rem; }
    .footer-secondary a { font-size: 0.75rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF UNIFIED FOOTER STYLES
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   SCORECARD COMPONENTS — PHASE 4
   ════════════════════════════════════════════════════════════════════════ */

/* Score Cards (Main result containers) */
.score-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px 28px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.score-card-inconclusive {
    border-left: 4px solid var(--color-text-light);
}

.score-card-trial-good {
    border-left: 4px solid var(--gold);
}

.score-card-trial-warn {
    border-left: 4px solid var(--red);
}

.score-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 2rem;
}

.score-icon-inconclusive {
    background: var(--ground);
    color: var(--color-text-light);
    border: 2px solid var(--border);
}

.score-icon-trial-good {
    background: var(--gold-soft);
    color: var(--gold);
    border: 2px solid var(--gold);
}

.score-icon-trial-warn {
    background: var(--red-soft);
    color: var(--red);
    border: 2px solid var(--red);
}

.score-card-title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px 0;
}

.score-card-description {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

.score-tip-box {
    background: var(--amber-soft);
    border: 1px solid rgba(201,123,27,0.3);
    border-radius: var(--r-lg);
    padding: 18px;
    text-align: left;
    margin-top: 20px;
}

.score-tip-header {
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-tip-body {
    font-size: 0.88rem;
    color: #78350f;
    line-height: 1.5;
}

/* Score Summary Card (Pro view) */
.score-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.sc-verdict-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.sc-verdict-meta {
    flex: 1;
    min-width: 0;
}

.sc-verdict-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8A93A8;
    margin-bottom: 6px;
}

.sc-verdict-comp {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px 0;
    line-height: 1.2;
}

.sc-verdict-grade {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 600;
}

.score-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.score-status-green {
    background: var(--green-soft);
    color: var(--green);
}

.score-status-amber {
    background: var(--amber-soft);
    color: var(--amber);
}

.score-status-red {
    background: var(--red-soft);
    color: var(--red);
}


/* ════════════════════════════════════════════════════════════════════════
   END OF SCORECARD COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   STAR ANALYSIS & INDICATOR COMPONENTS — PHASE 4
   ════════════════════════════════════════════════════════════════════════ */

/* STAR Analysis Card */
.star-analysis {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
}

.star-analysis-header {
    background: var(--ground);
    padding: 14px 20px;
    font-family: var(--font-head);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.star-analysis-header i {
    color: var(--indigo);
}

.star-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ground);
}

.star-row:last-child {
    border-bottom: none;
}

.star-letter-badge {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.slb-green {
    background: var(--green-soft);
    color: var(--green);
    border: 2px solid var(--green);
}

.slb-amber {
    background: var(--amber-soft);
    color: var(--amber);
    border: 2px solid var(--amber);
}

/* ── Scorecard Panel — indicator list ─────────────────────────────────────
   Shared across: STAR scorecard, cluster view, sift checker, interview.
   The hand-drawn SVG tick/checkbox replaces the old Font Awesome icon.
────────────────────────────────────────────────────────────────────────── */

/* Legacy aliases — kept so any unreachable render paths don't break */
.indicator-list        { margin-bottom: 16px; }
.indicator-list-header { display: none; }  /* replaced by scorecard-panel header */
.indicator-count       { display: none; }
.indicator-row         { display: flex; align-items: flex-start; gap: 12px; padding: 13px 20px; border-bottom: 1px solid #E3DFD7; }
.indicator-row:last-child { border-bottom: none; }
.ind-icon              { display: none; }
.ind-hit, .ind-miss    { color: inherit; }

/* Panel shell */
.scorecard-panel {
    background: #FAFAF8;
    border: 1px solid #D8D4C8;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13,35,71,0.06), 0 4px 12px rgba(13,35,71,0.04);
    margin-bottom: 16px;
}

.scorecard-panel::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--indigo) 60%, transparent 100%);
}

/* Header */
.sc-panel-header {
    background: #F5F3EE;
    padding: 12px 20px;
    border-bottom: 1px solid #D8D4C8;
}

.sc-panel-title {
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--navy);
}

/* Indicator rows */
.sc-ind-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #E3DFD7;
}

.sc-ind-row:last-child { border-bottom: none; }

.sc-ind-checkbox {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.sc-ind-checkbox svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    display: block;
}

.sc-hd-box {
    fill: none;
    stroke: #B0A898;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-hd-tick {
    fill: none;
    stroke: var(--green);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: sc-draw-tick 0.3s ease-out forwards;
}

@keyframes sc-draw-tick { to { stroke-dashoffset: 0; } }

/* Stagger ticks — supports up to 10 indicators */
.sc-ind-row:nth-child(1)  .sc-hd-tick { animation-delay: 0.04s; }
.sc-ind-row:nth-child(2)  .sc-hd-tick { animation-delay: 0.13s; }
.sc-ind-row:nth-child(3)  .sc-hd-tick { animation-delay: 0.22s; }
.sc-ind-row:nth-child(4)  .sc-hd-tick { animation-delay: 0.31s; }
.sc-ind-row:nth-child(5)  .sc-hd-tick { animation-delay: 0.40s; }
.sc-ind-row:nth-child(6)  .sc-hd-tick { animation-delay: 0.49s; }
.sc-ind-row:nth-child(7)  .sc-hd-tick { animation-delay: 0.58s; }
.sc-ind-row:nth-child(8)  .sc-hd-tick { animation-delay: 0.67s; }
.sc-ind-row:nth-child(9)  .sc-hd-tick { animation-delay: 0.76s; }
.sc-ind-row:nth-child(10) .sc-hd-tick { animation-delay: 0.85s; }

.sc-ind-text {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--ink);
    padding-top: 1px;
}

.sc-ind-text-miss { color: #8A8278; }

/* Footer verdict */
.sc-panel-footer {
    background: #F5F3EE;
    border-top: 1px solid #D8D4C8;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sc-verdict {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    font-style: italic;
    color: var(--green);
}

.sc-verdict-amber { color: var(--gold); }
.sc-verdict-red   { color: var(--red); }

.sc-tally {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: #6B6456;
    font-weight: 500;
    flex-shrink: 0;
}

/* Hand-drawn circle around score */
.sc-circle-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.sc-circle-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sc-hd-circle {
    fill: none;
    stroke: #8A8278;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    animation: sc-draw-circle 0.5s ease-out 0.9s forwards;
}

@keyframes sc-draw-circle { to { stroke-dashoffset: 0; } }

.sc-circle-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--navy);
    transform: rotate(-3deg);
}

/* ── Scorecard: collapsible STAR / evidence ──────────────────────────────── */

.sc-collapsible-card {
    margin-bottom: 10px;
}

.sc-collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-collapsible-body {
    display: none;
}

.sc-collapsible-body.sc-collapsible-open {
    display: block;
}

/* Evidence toggle button */
.sc-evidence-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 13px 18px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: var(--shadow-xs);
    margin-bottom: 0;
}

.sc-evidence-btn:hover {
    background: var(--ground);
    border-color: var(--border-mid);
}

.sc-evidence-btn i.fa-quote-left {
    color: var(--indigo);
    margin-right: 8px;
}

.sc-evidence-body {
    display: none;
    background: var(--ground);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 18px 20px;
    font-style: italic;
    color: #475569;
    line-height: 1.75;
    font-size: 0.9rem;
}

.sc-evidence-body.sc-evidence-open {
    display: block;
}

/* Alternative matches list */
.sc-alt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-alt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-xs);
}

.sc-alt-row:hover {
    background: #F8FAFE;
    box-shadow: var(--shadow-sm);
}

.sc-alt-pct {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
    min-width: 46px;
    text-align: center;
    flex-shrink: 0;
}

.sc-alt-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.sc-alt-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}

.sc-alt-badge-green {
    background: var(--green-soft);
    color: var(--green);
}

.sc-alt-badge-amber {
    background: var(--amber-soft);
    color: var(--amber);
}

.sc-alt-arrow {
    color: var(--border-mid);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Score Dial (Circular percentage) */
.score-dial {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 800;
    position: relative;
    flex-shrink: 0;
}

.score-dial::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(currentColor var(--score-angle, 0deg), var(--border) 0deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.score-dial-green {
    background: var(--green-soft);
    color: var(--green);
    border: 3px solid var(--green);
    --score-angle: calc(var(--score) * 3.6deg);
}

.score-dial-amber {
    background: var(--amber-soft);
    color: var(--amber);
    border: 3px solid var(--amber);
    --score-angle: calc(var(--score) * 3.6deg);
}

.score-dial-red {
    background: var(--red-soft);
    color: var(--red);
    border: 3px solid var(--red);
    --score-angle: calc(var(--score) * 3.6deg);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .sc-verdict-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .sc-verdict-meta {
        width: 100%;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF STAR ANALYSIS & INDICATOR COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   HISTORY PAGE COMPONENTS — PHASE 5
   ════════════════════════════════════════════════════════════════════════ */

/* Filter Header Card — removed (2026): .history-filter-card/-icon/-label/-value
   were never referenced by any markup; the db-context-strip pattern used
   elsewhere on this page superseded it. */

/* Empty State */
.history-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--ground);
    border-radius: var(--r-xl);
    border: 1px dashed var(--border-mid);
    margin-top: 20px;
}

.history-empty-icon {
    font-size: 3rem;
    color: var(--border-mid);
    margin-bottom: 20px;
}

.history-empty-title {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 10px 0;
}

.history-empty-description {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* History Item Cards */
.history-item-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    box-shadow: var(--shadow-xs);
}

.history-item-card:hover {
    box-shadow: var(--shadow-md-new);
    transform: translateY(-1px);
    border-color: var(--coral);
}

.history-checkbox-wrapper {
    padding-right: 12px;
    align-self: center;
}

.history-delete-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--indigo);
}

.history-card-content {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}

.history-card-title {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-card-meta {
    font-size: 0.78rem;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-card-meta i {
    font-size: 0.75rem;
}

.history-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Refined Badge */
.history-refined-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0284c7;
    font-size: 0.68rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.05em;
    border: 1px solid rgba(2,132,199,0.2);
}

/* Score Badges */
.history-score-badge {
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 100px;
    min-width: 52px;
    text-align: center;
}

.history-score-green {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green);
}

.history-score-amber {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber);
}

.history-score-red {
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid var(--red);
}

.history-score-locked {
    width: 40px;
    text-align: center;
    color: var(--gold);
    font-size: 1rem;
}

/* View Button */
.history-view-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ground);
    border: 1px solid var(--border);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.history-view-btn:hover {
    background: var(--coral-soft);
    color: var(--coral);
    border-color: var(--coral);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .history-item-card {
        flex-wrap: wrap;
    }
    
    .history-card-actions {
        width: 100%;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF HISTORY PAGE COMPONENTS
   ════════════════════════════════════════════════════════════════════════ */

/* Inconclusive score badge */
.history-score-inconclusive {
    background: var(--ground);
    color: #8A93A8;
    border: 1px solid var(--border-mid);
}


/* ════════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   TOP NAVIGATION BAR — PHASE 5 REDESIGN (SLEEK & ELEGANT)
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   NAVIGATION — sidebar (desktop) + top bar (mobile/tablet) + features panel
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layout shell ─────────────────────────────────────────────────────────── */
#cc-app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Desktop sidebar ──────────────────────────────────────────────────────── */
#cc-sidebar {
    display: none; /* hidden on mobile/tablet */
}

@media (min-width: 1025px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    #app-container {
        flex: 1;
    }

    #cc-sidebar {
        display: flex;
        flex-direction: column;
        width: 220px;
        min-width: 220px;
        flex-shrink: 0;
        background: var(--navy);
        border-right: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        transition: width 0.22s cubic-bezier(0.4,0,0.2,1), min-width 0.22s;
        overflow: hidden;
    }

    #cc-sidebar.collapsed {
        width: 60px;
        min-width: 60px;
    }

    /* Push main content right of sidebar */
    #nav-bar        { display: none !important; }
    #app-container  {
        margin-left: 220px;
        width: calc(100% - 220px);
        max-width: calc(100% - 220px);
        box-sizing: border-box;
    }
    /* collapsed sibling trick doesn't work with fixed — use body class instead */
    body.sidebar-collapsed #app-container { margin-left: 60px; }
    body.sidebar-collapsed #cc-sidebar    { width: 60px; min-width: 60px; }
    body.sidebar-collapsed .sidebar-logo-img { display: none; }
    body.sidebar-collapsed .sidebar-brand { padding: 10px 8px; }
    body.sidebar-collapsed .sidebar-section-label,
    body.sidebar-collapsed .sidebar-link span,
    body.sidebar-collapsed .sidebar-upgrade-btn span,
    body.sidebar-collapsed .sidebar-account-btn span { display: none; }
    body.sidebar-collapsed .sidebar-collapse-btn i   { transform: rotate(180deg); }
    body.sidebar-collapsed .sidebar-lock-badge       { display: none; }
}

#cc-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
    gap: 10px;
}

.sidebar-brand-text {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.04em;
}

.sidebar-collapse-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    font-size: 0.65rem;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { border-color: #fff; color: #fff; }
.sidebar-collapse-btn i { transition: transform 0.22s; }

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    padding: 12px 10px 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.72);
    font-size: 0.855rem;
    font-weight: 500;
    font-family: var(--font-body);
    text-align: left;
    width: 100%;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
    position: relative;
}

.sidebar-link i {
    font-size: 0.95rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.sidebar-link.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 600;
}

.sidebar-link--sm { font-size: 0.8rem; }

.sidebar-lock-badge {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--gold-light);
    flex-shrink: 0;
}

.sidebar-link--profile.locked {
    color: rgba(255,255,255,0.45);
}

.sidebar-footer {
    padding: 8px 8px 16px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.sidebar-upgrade-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
    font-size: 0.855rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.sidebar-upgrade-btn i { font-size: 0.85rem; color: var(--navy); }
.sidebar-upgrade-btn:hover { opacity: 0.9; }

.sidebar-account-btn {
    display: none; /* shown for pro via JS */
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    color: rgba(255,255,255,0.72);
    font-size: 0.855rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s;
}
.sidebar-account-btn i { font-size: 0.85rem; color: var(--gold-light); }
.sidebar-account-btn:hover { background: rgba(255,255,255,0.08); }

/* ── Mobile / tablet top nav bar ──────────────────────────────────────────── */
#nav-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: var(--navy);
    border-bottom: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px;
    z-index: 300;
    box-shadow: 0 2px 12px rgba(13,35,71,0.18);
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    color: rgba(255,255,255,0.65);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    position: relative;
    transition: color 0.15s, background 0.15s;
    min-width: 48px;
    text-align: center;
}

.nav-link i {
    font-size: 1.1rem;
    transition: transform 0.15s;
}

.nav-link span {
    font-size: 0.65rem;
    line-height: 1;
}

.nav-link:hover  { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.14); }

.nav-link.active i { transform: translateY(-1px); }

/* Upgrade dot */
.nav-upgrade-indicator {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    display: none;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.3); }
}

.nav-link.nav-locked { opacity: 0.45; pointer-events: none; }

/* ── Features slide-up panel ──────────────────────────────────────────────── */
#features-panel-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 400;
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

#features-panel {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    border-top: 2px solid var(--indigo);
    z-index: 401;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.14);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    max-height: 80vh;
    overflow-y: auto;
    pointer-events: none; /* prevent invisible panel intercepting clicks when closed */
}

#features-panel.open {
    transform: translateY(0);
    pointer-events: auto;
}

#features-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.features-panel-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
    margin: 10px auto 0;
}

.features-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%);
    border-radius: 16px 16px 0 0;
}

.features-panel-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    font-family: var(--font-head);
}

.features-panel-close {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.features-panel-close:hover { background: rgba(255,255,255,0.25); }

.features-panel-body {
    padding: 8px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 10px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.14s, transform 0.1s;
    font-family: var(--font-body);
}

.fp-item:hover {
    background: var(--ground);
    transform: translateX(2px);
}

.fp-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

/* Per-item icon colours */
.fp-icon--score     { background: #eef0fd; color: #3B4FD4; }
.fp-icon--sift      { background: #f0fdf4; color: #16a34a; }
.fp-icon--tests     { background: #fdf4ff; color: #9333ea; }
.fp-icon--interview { background: #fff7ed; color: #ea580c; }
.fp-icon--profile   { background: var(--gold-soft); color: var(--gold); }
.fp-icon--resources { background: #eff6ff; color: #2563eb; }
.fp-icon--tour       { background: var(--indigo-soft); color: var(--indigo); }
.fp-icon--install    { background: var(--green-soft); color: var(--green); }

.dash-install-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--green-soft);
    border: 1px solid rgba(15,123,85,0.18);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-top: 16px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.dash-install-banner:hover {
    box-shadow: var(--shadow-sm-new);
    transform: translateY(-1px);
}
.dash-install-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.dash-install-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.dash-install-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--navy);
}
.dash-install-sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #4b5f57;
    line-height: 1.4;
}

.fp-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-text strong {
    font-size: 0.875rem;
    color: var(--navy);
    font-weight: 600;
}

.fp-text span {
    font-size: 0.775rem;
    color: var(--color-text-light);
}

.fp-arrow {
    color: #cbd5e1;
    font-size: 0.72rem;
    flex-shrink: 0;
    transition: transform 0.14s;
}

.fp-item:hover .fp-arrow { transform: translateX(2px); color: var(--indigo); }

.fp-lock {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-right: 4px;
    flex-shrink: 0;
}

.fp-item.fp-item--locked .fp-icon {
    background: #f1f5f9;
    color: #94a3b8;
}

.fp-item.fp-item--locked .fp-text strong {
    color: var(--color-text-light);
}

.fp-item.fp-item--locked:hover { transform: none; }

/* ── Tablet adjustments (features panel becomes a dropdown instead) ────────── */
@media (min-width: 600px) and (max-width: 1024px) {
    #nav-bar {
        justify-content: center;
        gap: 8px;
        padding: 8px 16px;
    }
    .nav-link {
        flex-direction: row;
        gap: 6px;
        font-size: 0.82rem;
        padding: 8px 14px;
    }
    .nav-link i { font-size: 0.95rem; }
    .nav-link--features i {
        padding: 4px 6px;
        font-size: 0.8rem;
    }
    #features-panel {
        bottom: auto;
        top: 56px;
        left: auto;
        right: 16px;
        width: 300px;
        border-radius: 12px;
        max-height: 70vh;
        box-shadow: 0 8px 32px rgba(0,0,0,0.14);
        transform: translateY(-10px) scale(0.97);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.2s, opacity 0.2s;
    }
    #features-panel.open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    .features-panel-handle { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF TOP NAVIGATION BAR
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   PHASE 6: INPUT PAGE REDESIGN (FINAL CORRECTED VERSION)
   ════════════════════════════════════════════════════════════════════════
   
   FIXES APPLIED:
   - Shortened STAR tip text (removed AI reference)
   - Fixed honesty pledge paragraph formatting (inline <strong> tags)
   - Removed import history button styling (obsolete feature)
   - CORRECTED footer positioning (works on mobile and desktop)
   - Trial user empty history state with CTA
   
   ══════════════════════════════════════════════════════════════════════ */

/* ── SUB-PAGE HEADERS ────────────────────────────────────────────────── */
/* scorecard:      JS renders section-label + comp name — hide static     */
/* history:        JS renders section-label + filter card — hide static    */
/* insights:       HTML gets section-label-new div (matches help/history)  */
/* key-activation: HTML gets section-label-new div (matches help/history)  */
#scorecard-page .header-container,
#history-page .header-container,
#insights-page .header-container,
#key-activation-page .header-container {
    display: none;
}

/* Portfolio report keeps its header — no JS equivalent */
#portfolio-report-page .header-container {
    text-align: left;
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--indigo);
    background: none;
    border-radius: 0;
    box-shadow: none;
}

#portfolio-report-page .header-container h2 {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 4px 0;
}

#portfolio-report-page .header-container .subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    display: block;
}

/* ── INPUT PAGE HEADER ──────────────────────────────────────────────── */
#input-page .header-container {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%);
  color: white;
  padding: 28px 32px;
  border-radius: var(--r-lg);
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-md-new), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

#input-page .header-container::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,0.15), transparent);
  border-radius: 50%;
  pointer-events: none;
}

#input-page .header-container h2 {
  color: white;
  margin-bottom: 6px;
  font-size: 1.8rem;
  position: relative;
  z-index: 1;
}

#input-page .header-container .subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}

/* ── CONTEXT HEADER (Drafting For...) ─────────────────────────────────── */
#input-context-header {
  margin-bottom: 24px;
}

#input-context-header > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--navy) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.2s;
}

#input-context-header > div:hover {
  box-shadow: var(--shadow-md-new) !important;
  transform: translateY(-1px);
}

#input-context-header .fa-pen-fancy {
  color: var(--navy) !important;
}

/* ── FORM CONTROLS ENHANCED ─────────────────────────────────────────── */
#input-page .control-group {
  margin-bottom: 24px;
}

#input-page label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Textarea styling */
#portfolio-text {
  font-family: var(--font-doc) !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  min-height: 240px !important;
  resize: vertical;
  transition: all 0.2s;
  box-shadow: var(--shadow-xs);
}

#portfolio-text:focus {
  outline: none !important;
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.08), var(--shadow-md-new) !important;
  background: white !important;
}

#portfolio-text::placeholder {
  color: var(--border-mid);
  font-style: italic;
  opacity: 0.7;
}

/* ── STAR WARNING (Tip Box) ────────────────────────────────────────── */
#star-warning {
  background: linear-gradient(135deg, var(--amber-soft) 0%, #FEF8E7 100%) !important;
  border: 1px solid rgba(217,119,6,0.2) !important;
  border-left: 4px solid var(--amber) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.88rem !important;
  color: #92400e !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-xs);
}

#star-warning::before {
  content: '💡';
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── HONESTY PLEDGE CARD ────────────────────────────────────────────── */
#honesty-pledge {
  background: linear-gradient(135deg, var(--indigo-soft) 0%, #F8F9FF 100%) !important;
  border: 1px solid rgba(99,102,241,0.15) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  margin-top: 20px !important;
  margin-bottom: 28px !important;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s;
}

#honesty-pledge:hover {
  box-shadow: var(--shadow-md-new);
  transform: translateY(-1px);
}

#honesty-pledge .fa-shield-alt {
  color: var(--indigo) !important;
  font-size: 1.2rem !important;
  flex-shrink: 0;
}

#honesty-pledge strong {
  font-family: var(--font-head);
  color: var(--navy) !important;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline !important;
  margin-bottom: 0 !important;
}

#honesty-pledge p {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  margin-top: 6px !important;
}

#honesty-pledge p strong {
  display: inline !important;
  font-weight: 700;
  color: var(--navy) !important;
}

/* ── HISTORY IMPORT SECTION (REMOVED - OBSOLETE) ────────────────────── */
#portfolio-history-selector {
  display: none !important;
}

#btn-import-history {
  display: none !important;
}

/* ── BUTTON GROUP ENHANCED ─────────────────────────────────────────── */
#input-page .button-group {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
}

#process-input-btn {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 15px 40px !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: var(--shadow-md-new), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

#process-input-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1));
  opacity: 0;
  transition: opacity 0.2s;
}

#process-input-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,44,89,0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

#process-input-btn:hover::before {
  opacity: 1;
}

#process-input-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm-new), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Cancel button */
#input-page .btn-secondary {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border-radius: var(--r-md) !important;
  transition: all 0.2s;
}

#input-page .btn-secondary:hover {
  background: var(--ground) !important;
  border-color: var(--border-mid) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm-new);
}

/* ── TEXTAREA LABEL ROW ────────────────────────────────────────────── */
#input-page > div[style*="justify-content: space-between"] {
  margin-bottom: 12px !important;
}

#input-textarea-label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--ink) !important;
}

/* ── HISTORY EMPTY STATE (FOR TRIAL USERS) ────────────────────────────── */
.history-upgrade-prompt {
  background: linear-gradient(135deg, var(--indigo-soft) 0%, #F8F9FF 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 20px 0;
  text-align: center;
}

.history-upgrade-prompt h3 {
  color: var(--navy);
  margin: 0 0 12px 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
}

.history-upgrade-prompt p {
  color: #475569;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.history-upgrade-prompt .btn {
  margin-top: 8px;
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  #input-page .header-container {
    padding: 20px 20px;
    margin-bottom: 20px;
  }

  #input-page .header-container h2 {
    font-size: 1.5rem;
  }

  #input-context-header > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #portfolio-text {
    font-size: 0.92rem !important;
    padding: 14px 16px !important;
    min-height: 200px !important;
  }

  #input-page .button-group {
    flex-direction: column;
    width: 100%;
  }

  #process-input-btn,
  #input-page .btn-secondary {
    width: 100%;
    padding: 14px 24px !important;
  }

  #honesty-pledge {
    padding: 14px 16px !important;
  }

  #star-warning {
    padding: 12px 14px !important;
    font-size: 0.84rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF PHASE 6: INPUT PAGE REDESIGN (FINAL CORRECTED)
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   PREMIUM ACTIVATION PAGE — Success State & Animations
   ════════════════════════════════════════════════════════════════════════ */

/* ── ACTIVATION CARDS ──────────────────────────────────────────────────── */
.activation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-md-new);
  transition: all 0.3s ease;
}

.activation-success-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border: 2px solid #86efac;
  border-radius: var(--r-xl);
  padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(34, 197, 94, 0.15);
  text-align: center;
  display: none; /* Hidden by default */
  animation: slideUp 0.5s ease-out;
}

/* ── ACTIVATION STEPS ──────────────────────────────────────────────────── */
.activation-steps {
  margin: 25px 0;
}

.activation-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.activation-step:last-child {
  margin-bottom: 0;
}

.step-number {
  background: var(--navy);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-head);
  flex-shrink: 0;
  font-size: 0.9rem;
}

.activation-step strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 0.95rem;
}

.activation-step p {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
}

/* ── SUCCESS ANIMATION ─────────────────────────────────────────────────── */
.success-animation {
  margin-bottom: 10px;
}

.success-checkmark {
  display: inline-block;
  animation: checkmarkPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-checkmark i {
  font-size: 5rem;
  color: #22c55e;
  filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.3));
}

/* ── PREMIUM FEATURES LIST ─────────────────────────────────────────────── */
.premium-features-list {
  text-align: left;
  background: white;
  border: 1px solid #d1fae5;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 25px 0;
}

.premium-feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #d1fae5;
  transition: background 0.2s;
}

.premium-feature-item:last-child {
  border-bottom: none;
}

.premium-feature-item:hover {
  background: #f0fdf4;
}

.premium-feature-item > i {
  color: #22c55e;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.premium-feature-item strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.premium-feature-item span {
  display: block;
  font-size: 0.82rem;
  color: #64748b;
}


/* ── UPGRADE MODAL — upsell redesign ──────────────────────────────────────── */

.upsell-trigger-msg {
    text-align: center;
    color: #475569;
    font-size: 0.95rem;
    margin: 0 0 18px 0;
    padding: 12px 16px;
    background: var(--indigo-soft);
    border-radius: var(--r-lg);
    border-left: 3px solid var(--indigo);
}

.upsell-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upsell-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #1E293B;
    line-height: 1.4;
}

.upsell-feature-list li i {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Upgrade modal: CTA button with price baked in ───────────────────────── */
.upsell-cta-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 20px !important;
    width: 100%;
}

.upsell-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.upsell-cta-label {
    font-size: 1rem;
    font-weight: 700;
}

.upsell-cta-price {
    font-size: 1.25rem;
    font-weight: 800;
    background: rgba(255,255,255,0.18);
    padding: 2px 10px;
    border-radius: 6px;
    letter-spacing: -0.02em;
}

.upsell-cta-sub {
    font-size: 0.72rem;
    opacity: 0.82;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Not right now dismiss link ───────────────────────────────────────── */
.upsell-not-now {
    display: block;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    padding: 10px 0 4px;
    font-family: var(--font-body);
    line-height: 1.5;
    transition: color 0.15s;
}
.upsell-not-now:hover { color: #64748b; }
.upsell-not-now i { margin-right: 5px; }
.upsell-not-now strong { color: #64748b; }

/* ── Copy-code-at-checkout reminder (shown once the gate is unlocked) ────── */
.upsell-code-reminder {
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
    margin: 8px 0 0;
    line-height: 1.4;
}
.upsell-code-reminder i {
    margin-right: 4px;
}
.upsell-code-reminder strong {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.03em;
    color: #1E293B;
}

/* ── ANIMATIONS ────────────────────────────────────────────────────────── */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ── TRANSITION CLASSES ────────────────────────────────────────────────── */
.activation-card.hiding {
  animation: fadeOut 0.3s ease-out forwards;
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .activation-card,
  .activation-success-card {
    padding: 24px 20px;
  }

  .success-checkmark i {
    font-size: 3.5rem;
  }

  .activation-step {
    gap: 12px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .premium-feature-item {
    padding: 14px 16px;
  }

  .premium-feature-item > i {
    font-size: 1.2rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF PREMIUM ACTIVATION PAGE STYLES
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   PHASE 7: MODERN MODAL SYSTEM
   ════════════════════════════════════════════════════════════════════════
   
   Design Goals:
   - Match Phase 1-5 aesthetic (navy, indigo, gold)
   - Smooth animations (fade + scale + backdrop blur)
   - Mobile responsive (full-screen on small screens)
   - Clean close buttons with hover states
   - Inter unified typography throughout
   
   ══════════════════════════════════════════════════════════════════════ */

/* ── MODAL CONTAINER ───────────────────────────────────────────────────── */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* No animation here — modalSlideUp on .modal-content is sufficient.
     Animating the backdrop wrapper caused a jitter on inject + display:flex. */
}

.modal[style*="display: flex"] {
  display: flex !important;
}

/* ── MODAL BACKDROP ────────────────────────────────────────────────────── */
.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 35, 70, 0.85); /* Navy tinted backdrop */
  backdrop-filter: blur(4px);
  animation: backdropFadeIn 0.3s ease-out;
}

/* ── MODAL CARD ────────────────────────────────────────────────────────── */
.modal-content {
  position: relative;
  background: white;
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(15, 35, 70, 0.3);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px;
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.modal-content.wide {
  max-width: 650px;
}

.modal-content.narrow {
  max-width: 400px;
}

/* ── MODAL HEADER (Navy Gradient) ──────────────────────────────────────── */
.modal-header-modern {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%);
  color: white;
  padding: 24px 28px;
  margin: -32px -32px 24px -32px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.modal-header-modern::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,0.2), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.modal-header-modern h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 1;
}

.modal-header-modern p {
  margin: 6px 0 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  position: relative;
  z-index: 1;
}

/* ── CLOSE BUTTON ──────────────────────────────────────────────────────── */
.close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  z-index: 2;
  line-height: 1;
}

.close-btn:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  transform: rotate(90deg);
}

/* Close button for light backgrounds */
.close-btn-dark {
  color: #64748b;
}

.close-btn-dark:hover {
  background: var(--ground);
  color: var(--navy);
}

/* ── MODAL BODY ────────────────────────────────────────────────────────── */
.modal-body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  /* Some modals give modal-body its own overflow-y/max-height inline
     (e.g. the legal modal) rather than scrolling on modal-content — this
     stops scroll chaining through to the page behind in either case. */
  overscroll-behavior: contain;
}

.modal-body p {
  margin: 0 0 16px 0;
}

.modal-body ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
}

/* ── MODAL FOOTER ──────────────────────────────────────────────────────── */
.modal-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-footer .btn {
  flex: 1;
  max-width: 200px;
}

.modal-footer-center {
  justify-content: center;
}

.modal-footer-full {
  flex-direction: column;
}

.modal-footer-full .btn {
  max-width: none;
}

/* ── FEATURE LIST (For Feature Table Modal) ────────────────────────────── */
.feature-list-modern {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: white;
}

.feature-item-modern {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 0.2s;
}

.feature-item-modern:last-child {
  border-bottom: none;
}

.feature-item-modern:hover {
  background: var(--ground);
}

.feature-item-modern i {
  color: #22c55e;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.feature-item-modern strong {
  display: block;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.feature-item-modern span {
  display: block;
  font-size: 0.82rem;
  color: #64748b;
}

/* ── COMPARISON TABLE (For Feature Modal) ──────────────────────────────── */
.comparison-table-modern {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.comparison-table-modern thead {
  background: var(--ground);
}

.comparison-table-modern th {
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.comparison-table-modern th:nth-child(2),
.comparison-table-modern th:nth-child(3) {
  text-align: center;
  width: 80px;
}

.comparison-table-modern th:nth-child(3) {
  color: var(--gold);
}

.comparison-table-modern tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.comparison-table-modern tbody tr:last-child {
  border-bottom: none;
}

.comparison-table-modern tbody tr:hover {
  background: var(--ground);
}

.comparison-table-modern td {
  padding: 14px 16px;
  font-size: 0.9rem;
}

.comparison-table-modern td:nth-child(2),
.comparison-table-modern td:nth-child(3) {
  text-align: center;
}

.comparison-table-modern .check-icon {
  color: #22c55e;
  font-size: 1.1rem;
}

.comparison-table-modern .cross-icon {
  color: #cbd5e1;
  font-size: 1.1rem;
}

.comparison-table-modern .star-icon {
  color: var(--gold);
  font-size: 1.1rem;
}

/* ── UPGRADE PROMPT (For Upgrade Modal) ────────────────────────────────── */
.upgrade-prompt-modern {
  background: linear-gradient(135deg, var(--indigo-soft) 0%, #F8F9FF 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin: 16px 0;
  text-align: center;
}

.upgrade-prompt-modern h3 {
  margin: 0 0 8px 0;
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.2rem;
}

.upgrade-prompt-modern p {
  margin: 0 0 16px 0;
  color: #475569;
  font-size: 0.95rem;
}

.upgrade-prompt-modern .price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.upgrade-prompt-modern .price-sub {
  font-size: 0.8rem;
  color: #64748b;
}


/* ── UPGRADE MODAL — upsell redesign ──────────────────────────────────────── */

.upsell-trigger-msg {
    text-align: center;
    color: #475569;
    font-size: 0.95rem;
    margin: 0 0 18px 0;
    padding: 12px 16px;
    background: var(--indigo-soft);
    border-radius: var(--r-lg);
    border-left: 3px solid var(--indigo);
}

.upsell-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upsell-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #1E293B;
    line-height: 1.4;
}

.upsell-feature-list li i {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.upsell-price-block {
    background: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
    border-radius: var(--r-lg);
    padding: 18px 24px;
    text-align: center;
    margin-bottom: 14px;
}

.upsell-price {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    font-family: var(--font-head);
    letter-spacing: -0.5px;
    line-height: 1;
}

.upsell-price-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    margin-top: 5px;
}

.upsell-reset-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748B;
    text-align: left;
    margin: 0;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.upsell-reset-note i {
    color: #94A3B8;
    flex-shrink: 0;
    margin-top: 2px;
}

.upsell-reset-note strong {
    color: #475569;
}

/* ── ANIMATIONS ────────────────────────────────────────────────────────── */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal {
    padding: 0;
    align-items: flex-end; /* Bottom sheet style */
  }

  .modal-content {
    max-width: 100%;
    max-height: calc(95vh - 56px); /* 56px = consent banner height when visible */
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin: 0;
    animation: modalSlideUpMobile 0.3s ease-out;
  }

  .modal-header-modern {
    padding: 20px 20px;
    margin: -32px -32px 20px -32px;
  }

  .modal-header-modern h2 {
    font-size: 1.3rem;
  }

  .close-btn {
    top: 18px;
    right: 20px;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    max-width: none;
  }

  .feature-item-modern {
    padding: 14px 16px;
  }

  .comparison-table-modern {
    font-size: 0.85rem;
  }

  .comparison-table-modern th,
  .comparison-table-modern td {
    padding: 10px 12px;
  }
}

@keyframes modalSlideUpMobile {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF PHASE 7: MODERN MODAL SYSTEM
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   ENHANCED GAP ANALYSIS MODAL STYLES
   ════════════════════════════════════════════════════════════════════════ */

/* ── GAP SCORE CARD ────────────────────────────────────────────────────── */
.gap-score-card {
  background: linear-gradient(135deg, var(--ground) 0%, #ffffff 100%);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.gap-score-card.score-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #86efac;
}

.gap-score-card.score-amber {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fcd34d;
}

.gap-score-card.score-red {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #fca5a5;
}

.gap-score-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.score-green .gap-score-icon {
  background: #dcfce7;
  color: #16a34a;
}

.score-amber .gap-score-icon {
  background: #fef3c7;
  color: #d97706;
}

.score-red .gap-score-icon {
  background: #fee2e2;
  color: #dc2626;
}

.gap-score-details {
  flex: 1;
}

.gap-score-number {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-head);
  line-height: 1;
  margin-bottom: 4px;
}

.score-green .gap-score-number {
  color: #16a34a;
}

.score-amber .gap-score-number {
  color: #d97706;
}

.score-red .gap-score-number {
  color: #dc2626;
}

.gap-score-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 600;
}

.gap-score-breakdown {
  display: flex;
  gap: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.gap-stat {
  text-align: center;
}

.gap-stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1;
}

.gap-stat-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ── GAP SECTIONS ──────────────────────────────────────────────────────── */
.gap-section {
  margin-bottom: 24px;
}

.gap-section-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
}

/* ── EXAMPLE BOX ───────────────────────────────────────────────────────── */
.gap-example-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--indigo);
  border-radius: var(--r-md);
  padding: 16px 20px;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
}

/* ── INFO BOX ──────────────────────────────────────────────────────────── */
.gap-info-box {
  background: linear-gradient(135deg, var(--indigo-soft) 0%, #F8F9FF 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ── INDICATOR CHECKLIST ───────────────────────────────────────────────── */
.indicator-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: white;
}

.indicator-checklist li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: background 0.2s;
}

.indicator-checklist li:last-child {
  border-bottom: none;
}

.indicator-checklist li:hover {
  background: var(--ground);
}

.indicator-checklist li i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.indicator-present i {
  color: #22c55e;
}

.indicator-missing i {
  color: #cbd5e1;
}

.indicator-present span {
  color: #0f172a;
}

.indicator-missing span {
  color: #94a3b8;
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .gap-score-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .gap-score-breakdown {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
    margin-top: 16px;
    width: 100%;
    justify-content: center;
  }

  .gap-score-icon {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }

  .gap-score-number {
    font-size: 2rem;
  }

  .gap-stat-number {
    font-size: 1.4rem;
  }

  .indicator-checklist li {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF ENHANCED GAP ANALYSIS MODAL STYLES
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   PHASE 7.5: SMART REFINER ENHANCEMENT
   ════════════════════════════════════════════════════════════════════════ */

/* ── REFINER MODAL CONTAINER ───────────────────────────────────────────── */
.modal-content-refiner {
  position: relative;
  background: white;
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(15, 35, 70, 0.3);
  max-width: 900px;
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

/* ── REFINER HEADER ────────────────────────────────────────────────────── */
.refiner-header {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a6b 100%);
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.refiner-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.2), transparent);
  border-radius: 50%;
  pointer-events: none;
}

.refiner-header h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  position: relative;
  z-index: 1;
}

.refiner-header h2 i {
  color: var(--gold);
  margin-right: 10px;
}

.refiner-header p {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}

/* ── REFINER BODY ──────────────────────────────────────────────────────── */
.refiner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── SETUP SCREEN ──────────────────────────────────────────────────────── */
.refiner-setup {
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.refiner-setup h3 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 32px 0;
}

.refiner-format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 500px;
  margin-bottom: 32px;
}

.refiner-format-card {
  cursor: pointer;
  border: 2px solid var(--border);
  background: white;
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  transition: all 0.2s;
  position: relative;
}

.refiner-format-card:hover {
  border-color: var(--indigo);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-2px);
}

.refiner-format-card.selected {
  border-color: var(--navy);
  background: var(--indigo-soft);
  box-shadow: 0 4px 16px rgba(15, 44, 89, 0.15);
}

.refiner-format-card input {
  display: none;
}

.format-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.format-icon i {
  font-size: 1.8rem;
}

.format-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 6px;
}

.format-desc {
  font-size: 0.85rem;
  color: #64748b;
}

/* ── WORD LIMIT ────────────────────────────────────────────────────────── */
.refiner-word-limit {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ground);
  padding: 12px 20px;
  border-radius: 24px;
  border: 1px solid var(--border);
  margin-bottom: 32px;
}

.word-limit-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
  font-family: var(--font-head);
}

.word-limit-input {
  width: 70px;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.word-limit-hint {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
}

/* ── START BUTTON ──────────────────────────────────────────────────────── */
.refiner-start-btn {
  width: 100%;
  max-width: 350px;
  padding: 16px;
  font-size: 1rem;
}

.refiner-start-btn i {
  margin-left: 10px;
}

/* ── RESULTS SCREEN ────────────────────────────────────────────────────── */
.refiner-results {
  display: none;
  flex: 1;
  overflow: hidden;
}

.refiner-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.refiner-column:first-child {
  border-right: 1px solid var(--border);
}

.refiner-column-header {
  padding: 14px 16px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.original-header {
  background: var(--ground);
  color: #64748b;
}

.refined-header {
  background: #f0fdf4;
  color: #166534;
}

.refiner-column-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.9rem;
  white-space: pre-wrap;
  color: #334155;
  line-height: 1.6;
  font-family: var(--font-body);
}

/* ── COACH NOTES ───────────────────────────────────────────────────────── */
.coach-notes {
  background: #fffbeb;
  padding: 14px 16px;
  border-bottom: 1px solid #fcd34d;
  display: none;
}

.coach-notes strong {
  font-family: var(--font-head);
  color: #92400e;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 6px;
}

.coach-notes strong i {
  color: #d97706;
  margin-right: 6px;
}

.coach-notes p {
  margin: 0;
  font-size: 0.85rem;
  color: #78350f;
  line-height: 1.4;
}

/* ── LOADING STATE ─────────────────────────────────────────────────────── */
.refiner-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.refiner-loading i {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: 16px;
}

.refiner-loading p {
  font-size: 0.95rem;
  margin: 0;
}

/* ── ERROR STATE ───────────────────────────────────────────────────────── */
.refiner-error {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  text-align: center;
}

.refiner-error i {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.refiner-error p {
  font-size: 0.95rem;
  margin: 0;
}

/* ── REFINER FOOTER ────────────────────────────────────────────────────── */
.refiner-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.refiner-disclaimer {
  font-size: 0.8rem;
  color: #64748b;
  font-family: var(--font-body);
}

.refiner-disclaimer i {
  color: var(--indigo);
  margin-right: 6px;
}

.refiner-actions {
  display: flex;
  gap: 12px;
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-content-refiner {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .refiner-format-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .refiner-format-card {
    padding: 14px; /* Compact padding */
    display: flex; /* Horizontal layout */
    flex-direction: row;
    align-items: center;
    text-align: left; /* Left-align text */
    gap: 14px; /* Space between icon and text */
  }
  
  .format-icon {
    width: 42px;  /* Smaller icon circle */
    height: 42px;
    margin: 0; /* No margin - gap handles spacing */
    flex-shrink: 0; /* Don't shrink icon */
  }
  
  .format-icon i {
    font-size: 1.3rem; /* Appropriately sized */
  }
  
  .format-title {
    font-size: 1rem;
    margin-bottom: 2px;
    font-weight: 600;
  }
  
  .format-desc {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  .refiner-setup {
    padding: 20px 16px; /* Reduced from 24px 20px */
  }
  
  .refiner-setup h3 {
    font-size: 1.1rem; /* Smaller heading */
    margin-bottom: 16px;
  }

  .refiner-results {
    flex-direction: column;
  }

  .refiner-column:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40%;
  }

  .refiner-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .refiner-actions {
    width: 100%;
  }

  .refiner-actions button {
    flex: 1;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF PHASE 7.5: SMART REFINER ENHANCEMENT
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   CLUSTER VIEW — Scorecard Toggle & Accordion Styles
   ════════════════════════════════════════════════════════════════════════ */

/* ── SCORECARD VIEW TOGGLE (Single / Cluster) ────────────────────────── */
.scorecard-view-toggle {
  display: flex;
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}

.svc-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  gap: 4px;
}

.svc-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.svc-btn-active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px var(--border);
}

.svc-btn-locked {
  color: #94a3b8;
}

.svc-btn-locked:hover {
  background: var(--ground);
  color: #64748b;
}

.svc-premium-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 100px;
  margin-left: 4px;
  border: 1px solid rgba(201,123,27,0.25);
}

/* ── CLUSTER INTRO CARD ───────────────────────────────────────────────── */
.cluster-intro-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border: 1px solid #c7d7fd;
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.cluster-intro-icon {
  width: 40px;
  height: 40px;
  background: var(--navy);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.cluster-intro-title {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 5px;
}

.cluster-intro-sub {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.55;
}

/* ── CLUSTER ACCORDION ────────────────────────────────────────────────── */
.cluster-accordion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}

.cluster-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.cluster-accordion-header:hover {
  background: var(--ground);
}

.cluster-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cluster-accordion-name {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.cluster-accordion-meta {
  font-size: 0.72rem;
  color: #8A93A8;
  margin-top: 2px;
}

.cluster-chevron {
  color: #8A93A8;
  font-size: 0.8rem;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

/* ── CLUSTER AVERAGE BADGE ────────────────────────────────────────────── */
.cluster-avg-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  min-width: 80px;
  flex-shrink: 0;
}

.cluster-score-green {
  background: var(--green-soft);
  border: 1px solid rgba(22,163,74,0.25);
}

.cluster-score-amber {
  background: var(--amber-soft);
  border: 1px solid rgba(201,123,27,0.25);
}

.cluster-score-red {
  background: var(--red-soft);
  border: 1px solid rgba(220,38,38,0.25);
}

.cluster-avg-pct {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.cluster-score-green .cluster-avg-pct { color: var(--green); }
.cluster-score-amber .cluster-avg-pct { color: var(--amber); }
.cluster-score-red   .cluster-avg-pct { color: var(--red); }

.cluster-avg-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
  white-space: nowrap;
}

.cluster-score-green .cluster-avg-label { color: var(--green); }
.cluster-score-amber .cluster-avg-label { color: var(--amber); }
.cluster-score-red   .cluster-avg-label { color: var(--red); }

/* ── CLUSTER ACCORDION BODY ───────────────────────────────────────────── */
.cluster-accordion-body {
  border-top: 1px solid var(--border);
}

/* ── CLUSTER COMPETENCY CARD (inside accordion) ───────────────────────── */
.cluster-competency-card {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}

.cluster-competency-card:last-child {
  border-bottom: none;
}

.cluster-comp-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 16px 20px;
  background: var(--ground);
  border-bottom: 1px solid var(--border);
}

/* ── RESPONSIVE ADJUSTMENTS ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .svc-btn {
    font-size: 0.75rem;
    padding: 9px 10px;
  }

  .cluster-avg-badge {
    min-width: 68px;
    padding: 5px 8px;
  }

  .cluster-avg-pct {
    font-size: 0.9rem;
  }

  .cluster-accordion-header {
    padding: 14px 14px;
  }

  .cluster-intro-card {
    flex-direction: column;
    gap: 10px;
  }

  .cluster-comp-header {
    padding: 14px 14px 12px 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END OF CLUSTER VIEW STYLES
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — Competency / Cluster View Toggle
   ════════════════════════════════════════════════════════════════════════ */

.insights-view-toggle {
  display: flex;
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.ivt-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}

.ivt-btn:hover {
  background: var(--surface);
  color: var(--ink);
}

.ivt-btn-active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px var(--border);
}

/* ════════════════════════════════════════════════════════════════════════
   END OF INSIGHTS CLUSTER TOGGLE STYLES
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   CLUSTER VIEW — Low Coverage State
   ════════════════════════════════════════════════════════════════════════ */

.cluster-coverage-low {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-left: 4px solid #D4AF37;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 16px;
}

.cluster-coverage-low-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #fef3c7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 0.95rem;
}

.cluster-coverage-low-body {
  flex: 1;
  min-width: 0;
}

.cluster-coverage-low-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F172A;
  margin-bottom: 4px;
}

.cluster-coverage-low-text {
  font-family: var(--font-head);
  font-size: 0.82rem;
  color: #78716c;
  line-height: 1.5;
}


/* ============================================================================
   SIFT / APPLICATION CHECKER & RECRUITMENT JOURNEY CARD
   Added: v2.1
   All class names prefixed with .sift- or .journey- to avoid collision
   ============================================================================ */

/* ── Recruitment Journey Card ─────────────────────────────────────────────── */

.recruitment-journey-card {
    background: var(--white, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.recruitment-journey-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light, #64748b);
    margin: 0 0 14px 0;
}

.recruitment-journey-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 600px) {
    .recruitment-journey-buttons {
        flex-direction: row;
    }
    .journey-btn {
        min-width: 0;
    }
}

/* ── Your Target card (dashboard only) ───────────────────────────────────── */

.db-target-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.db-target-card:hover {
    border-color: var(--coral);
    box-shadow: var(--shadow-md-new);
    transform: translateY(-1px);
}

.db-target-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light, #64748b);
    margin: 0 0 14px 0;
}

.db-target-title i {
    margin-right: 6px;
}

.db-target-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.db-target-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.db-target-framework {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--indigo);
}

.db-target-grade {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.25;
}

.db-target-desc {
    font-size: 0.82rem;
    color: var(--color-text-light, #64748b);
    line-height: 1.4;
    max-width: 460px;
}

.db-target-edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--coral);
    white-space: nowrap;
}

/* .journey-btn and its children (icon/text/label/title/status/arrow) are
   defined once, in full, in the "JOURNEY CARDS — CANONICAL BLOCK" further
   down this file (v10). Do not re-add rules for them here — that
   duplication was exactly the problem the v10 pass removed. */


/* ── Sift page layout ─────────────────────────────────────────────────────── */

.sift-intro-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f0f4ff;
    border: 1px solid #c7d7fd;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

.sift-intro-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary, #0f2c59);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.sift-intro-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0f2c59);
    margin: 0 0 6px 0;
}

.sift-intro-body {
    font-size: 0.875rem;
    color: var(--color-text-light, #64748b);
    margin: 0;
    line-height: 1.5;
}

.sift-step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.sift-step-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-light, #64748b);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sift-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-primary, #0f2c59);
    color: #fff;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sift-step-body {
    font-size: 0.875rem;
    color: var(--color-text-light, #64748b);
    margin: 0 0 14px 0;
    line-height: 1.5;
}

.sift-textarea {
    width: 100%;
    resize: vertical;
    font-size: 1rem;
    line-height: 1.6;
    box-sizing: border-box;
}

.sift-limit-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sift-limit-type-select {
    width: 130px;
    flex-shrink: 0;
}

.sift-limit-input {
    flex: 1;
    max-width: 160px;
}

.sift-optional-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text-light, #64748b);
}


/* ── Detection result card ────────────────────────────────────────────────── */

.sift-detection-card {
    border-radius: 10px;
    padding: 14px 16px;
    border: 1.5px solid transparent;
    margin-top: 14px;
    margin-bottom: 8px;
}

.sift-detection-high   { background: #f0fdf4; border-color: #86efac; }
.sift-detection-medium { background: #fffbeb; border-color: #fcd34d; }
.sift-detection-low    { background: #fef2f2; border-color: #fca5a5; }

.sift-detection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sift-detection-high   .sift-detection-header > i { color: #16a34a; font-size: 1.1rem; }
.sift-detection-medium .sift-detection-header > i { color: #d97706; font-size: 1.1rem; }
.sift-detection-low    .sift-detection-header > i { color: #dc2626; font-size: 1.1rem; }

.sift-detection-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sift-detection-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #64748b);
}

.sift-detection-comp {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.sift-confidence-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.07);
    color: var(--color-text-light, #64748b);
    white-space: nowrap;
}

.sift-badge-manual {
    background: #dbeafe;
    color: #1d4ed8;
}

.sift-match-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sift-match-chip {
    font-size: 0.7rem;
    padding: 3px 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 20px;
    color: var(--color-text, #1e293b);
    font-weight: 500;
}

.sift-composite-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-text, #1e293b);
    line-height: 1.5;
}

.sift-composite-note i {
    color: var(--color-primary, #0f2c59);
    margin-top: 2px;
    flex-shrink: 0;
}


/* ── Manual override ──────────────────────────────────────────────────────── */

.sift-override-container {
    margin-top: 8px;
}

.sift-override-label {
    font-size: 0.82rem;
    color: var(--color-text-light, #64748b);
    margin: 0 0 8px 0;
}

.sift-link-btn {
    background: none;
    border: none;
    color: var(--color-primary, #0f2c59);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.sift-link-btn:hover { opacity: 0.75; }


/* ── Word count display ───────────────────────────────────────────────────── */

.sift-word-count {
    font-size: 0.78rem;
    color: var(--color-text-light, #64748b);
    margin-top: 6px;
    text-align: right;
}

.sift-count-over {
    color: #dc2626;
    font-weight: 600;
}

.sift-count-good {
    color: #16a34a;
    font-weight: 600;
}


/* ============================================================================
   SIFT v2.0 ADDITIONS — multi-criteria, experience banner, result cards
   ============================================================================ */

/* ── Add criterion button ─────────────────────────────────────────────────── */

.sift-add-criterion-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border: 2px dashed var(--color-border, #e2e8f0);
    border-radius: 12px;
    background: transparent;
    color: var(--color-primary, #0f2c59);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    margin-bottom: 24px;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}

.sift-add-criterion-btn:hover {
    border-color: var(--color-primary, #0f2c59);
    background: #f0f4ff;
}

/* ── Criterion card header ────────────────────────────────────────────────── */

.sift-criterion-card {
    position: relative;
}

.sift-criterion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sift-criterion-number {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-primary, #0f2c59);
}

.sift-remove-btn {
    background: none;
    border: none;
    color: var(--color-text-light, #94a3b8);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: color 0.15s, background 0.15s;
}

.sift-remove-btn:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* ── Experience requirement banner ───────────────────────────────────────── */

.sift-experience-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--color-text, #1e293b);
    line-height: 1.5;
}

.sift-experience-banner i {
    color: #2563eb;
    font-size: 1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ── Response section label ───────────────────────────────────────────────── */

.sift-response-label-row {
    margin-bottom: 8px;
}

.sift-response-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-light, #64748b);
}

/* ── Inline limit control (lives under response textarea) ─────────────────── */

.sift-limit-inline {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
}

.sift-limit-inline-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light, #64748b);
    margin-bottom: 8px;
}

/* ── Loading / error states ───────────────────────────────────────────────── */

.sift-api-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.sift-result-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--color-text-light, #64748b);
}

.sift-result-loading i {
    color: var(--color-primary, #0f2c59);
    font-size: 1.2rem;
}

.sift-result-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font-size: 0.875rem;
    color: #dc2626;
}

/* ── Result card ──────────────────────────────────────────────────────────── */

.sift-result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.sift-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--navy-tint);
    border-bottom: 1px solid var(--border);
}

.sift-result-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sift-result-comp {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.sift-result-grade {
    font-size: 0.75rem;
    color: var(--color-text-light, #64748b);
}

.sift-score-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 5px solid;
    background: var(--surface);
    flex-shrink: 0;
}

/* Consistent with .score-ring colour language on the scorecard —
   same semantic tokens used for the journey-card status dots */
.sift-rag-green  { border-color: var(--green);  color: var(--green); }
.sift-rag-amber  { border-color: var(--amber);  color: var(--amber); }
.sift-rag-red    { border-color: var(--red);    color: var(--red); }

.sift-score-num {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    /* colour inherited from rag-green/amber/red on parent ring */
}

.sift-score-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    /* colour inherited from rag class, slightly softened */
    opacity: 0.75;
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
}

/* ── Experience check result ─────────────────────────────────────────────── */

.sift-exp-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 18px;
    font-size: 0.85rem;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.sift-exp-met {
    background: #f0fdf4;
    color: #15803d;
}

.sift-exp-met i { color: #16a34a; }

.sift-exp-unmet {
    background: #fffbeb;
    color: #92400e;
}

.sift-exp-unmet i { color: #d97706; font-size: 1rem; }

/* ── Result sections ─────────────────────────────────────────────────────── */

.sift-result-section {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.sift-result-section:last-child {
    border-bottom: none;
}

.sift-result-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #64748b);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sift-result-feedback {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text, #1e293b);
    margin: 0;
}

/* ── Indicator rows ──────────────────────────────────────────────────────── */

/* Sift indicator list — now uses shared scorecard panel markup */
.sift-indicator-list { display: flex; flex-direction: column; }
/* Legacy row classes kept as aliases in case of cached markup */
.sift-indicator-row  { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; font-size: 0.84rem; line-height: 1.4; }
.sift-indicator-row i { font-size: 0.85rem; margin-top: 1px; flex-shrink: 0; }
.ind-present { color: #15803d; }
.ind-present i { color: #16a34a; }
.ind-missing { color: #8A8278; }
.ind-missing i { color: #dc2626; }

/* ── Limit feedback ──────────────────────────────────────────────────────── */

.sift-limit-feedback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--color-text-light, #64748b);
    background: #f8fafc;
}

.sift-limit-feedback i {
    color: var(--color-primary, #0f2c59);
    flex-shrink: 0;
}

/* ── Disclaimer ──────────────────────────────────────────────────────────── */

.sift-result-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 0.78rem;
    color: var(--color-text-light, #94a3b8);
    background: #f8fafc;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.sift-result-disclaimer i {
    color: var(--color-primary, #0f2c59);
    flex-shrink: 0;
}


/* ============================================================================
   SIFT HISTORY CARD STYLES
   ============================================================================ */

.history-sift-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.history-sift-card > div:first-child + div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.history-sift-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 2px 7px;
    border-radius: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

.history-sift-exp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

.history-sift-exp-pill.exp-met   { background: #dcfce7; color: #15803d; }
.history-sift-exp-pill.exp-unmet { background: #fef3c7; color: #92400e; }

.history-sift-ind-pill {
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-light, #64748b);
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 20px;
}

/* Expand-in-place detail panel */
.history-sift-detail {
    padding: 14px 16px 16px 16px;
    border-top: 1px solid var(--color-border, #e2e8f0);
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.history-sift-feedback {
    font-size: 0.875rem;
    color: var(--color-text, #1e293b);
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.history-sift-exp-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.history-sift-exp-detail.exp-met   { background: #f0fdf4; color: #15803d; }
.history-sift-exp-detail.exp-unmet { background: #fffbeb; color: #92400e; }

.history-sift-limit {
    font-size: 0.8rem;
    color: var(--color-text-light, #64748b);
    margin: 6px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ============================================================================
   HISTORY PAGE TOGGLE & APPLICATION TRACKER STYLES
   ============================================================================ */

/* ── View toggle pill ─────────────────────────────────────────────────────── */

.history-view-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: var(--ground, #f1f5f9);
    border-radius: 10px;
    padding: 4px;
}

.history-toggle-btn {
    flex: 1;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-light, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.history-toggle-btn:hover:not(.history-toggle-active) {
    background: rgba(255,255,255,0.6);
    color: var(--color-text, #1e293b);
}

.history-toggle-active {
    background: #fff;
    color: var(--color-primary, #0f2c59);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Tracker section labels ───────────────────────────────────────────────── */

.tracker-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light, #64748b);
    margin: 20px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tracker-section-label:first-child {
    margin-top: 0;
}

/* ── Indicator breakdown in tracker detail panel ─────────────────────────── */

.tracker-ind-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}


/* ============================================================================
   SIFT v3.0 ADDITIONS — upgrade nudge, improvement block
   ============================================================================ */

.sift-upgrade-nudge {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fffbeb;
    border-radius: 8px;
    padding: 14px;
}

.sift-upgrade-nudge i {
    color: #d97706;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.sift-upgrade-nudge strong {
    display: block;
    color: var(--color-text, #1e293b);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.sift-improvement-block {
    padding: 14px 0 0 0;
}


/* ── Limit coaching note in improvement block ─────────────────────────────── */

.sift-limit-coaching {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #f0f4ff;
    border-radius: 8px;
    font-size: 0.84rem;
    color: var(--color-text, #1e293b);
    line-height: 1.5;
}

.sift-limit-coaching i {
    color: var(--color-primary, #0f2c59);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================================
   TRACKER MANAGE CONTROLS & APP NAME — v69 additions
   ============================================================================ */

/* Checkbox wrapper in tracker cards — mirrors .history-checkbox-wrapper */
.tracker-checkbox-wrapper {
    flex-shrink: 0;
    align-items: center;
    padding-right: 6px;
}

.tracker-checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Application name as primary card heading */
.tracker-app-name {
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

/* Tracker edit actions row */
#tracker-edit-actions {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}


/* ============================================================================
   SIFT v3.1 — button waiting state, word counter, profile prompt
   ============================================================================ */

/* ── Button waiting state (below word threshold) ─────────────────────────── */

.btn-waiting {
    opacity: 0.65;
    cursor: not-allowed;
    /* Override primary colour with neutral to signal inactive state */
    background: #94a3b8 !important;
    border-color: #94a3b8 !important;
    color: #fff !important;
}

/* ── Word count — below threshold ────────────────────────────────────────── */

.sift-count-needed {
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
    margin-top: 6px;
    text-align: right;
}

/* ── Profile prompt ──────────────────────────────────────────────────────── */

.sift-profile-prompt {
    margin-top: 12px;
}

.sift-profile-prompt-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1.5px solid #7dd3fc;
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 0;          /* prevents flex children overflowing on mobile */
}

.sift-profile-prompt-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #0284c7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sift-profile-prompt-body {
    flex: 1;
    min-width: 0;               /* essential: allows flex child to shrink */
    overflow-wrap: break-word;  /* wraps long unbreakable strings */
    word-break: break-word;
}

.sift-profile-prompt-body strong {
    display: block;
    font-size: 0.9rem;
    color: #0c4a6e;
    margin-bottom: 4px;
}

.sift-profile-prompt-body p {
    font-size: 0.82rem;
    color: #0369a1;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.sift-profile-prompt-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Profile added confirmation ─────────────────────────────────────────── */

.sift-profile-added {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #15803d;
    font-weight: 500;
}

.sift-profile-added i {
    font-size: 1rem;
    flex-shrink: 0;
}


/* ── Profile prompt — competency divergence note ──────────────────────────── */

.sift-profile-comp-note {
    font-size: 0.8rem;
    color: #0369a1;
    background: rgba(2, 132, 199, 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0 10px 0;
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.sift-profile-comp-note i {
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================================
   APPLICATION DETAIL PAGE & TRACKER CARD v70
   ============================================================================ */

/* ── Application detail header ───────────────────────────────────────────── */

.app-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}

.app-detail-back {
    background: none;
    border: none;
    color: var(--color-primary, #0f2c59);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-detail-back:hover { background: #f0f4ff; }

.app-detail-meta {
    flex: 1;
    min-width: 0;
}

.app-detail-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-detail-sub {
    font-size: 0.78rem;
    color: var(--color-text-light, #64748b);
    margin-top: 2px;
}

.app-detail-score-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 5px solid;
    background: #fff;
    flex-shrink: 0;
}

/* Inherits .score-ring colour classes: rag-green, rag-amber, rag-red */

.app-detail-score-num {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    /* colour inherited from rag class */
}

.app-detail-score-label {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-light, #64748b);
    text-align: center;
    margin-top: 1px;
}

/* ── Application stage sections ──────────────────────────────────────────── */

.app-stage-section {
    background: var(--white, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}

.app-stage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.app-stage-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.app-stage-icon.icon-sift      { background: #dbeafe; color: #1d4ed8; }
.app-stage-icon.icon-tests     { background: #dcfce7; color: #15803d; }
.app-stage-icon.icon-interview { background: #fef3c7; color: #b45309; }

.app-stage-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-light, #64748b);
}

.app-stage-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

.app-stage-status {
    margin-left: auto;
}

.app-stage-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-done    { background: #dcfce7; color: #15803d; }
.badge-pending { background: #f1f5f9; color: #64748b; }

.app-stage-empty {
    padding: 20px 16px;
    text-align: center;
}

.app-stage-empty p {
    font-size: 0.85rem;
    color: var(--color-text-light, #64748b);
    margin: 0 0 12px 0;
}

/* ── Criterion rows within detail page ───────────────────────────────────── */

.app-crit-row {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.app-crit-row:last-child { border-bottom: none; }

.app-crit-row-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.app-crit-row-left {
    flex: 1;
    min-width: 0;
}

.app-crit-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-crit-number {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #64748b);
    margin-bottom: 2px;
}

.app-crit-comp {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
    margin-bottom: 4px;
}

.app-crit-criterion-preview {
    font-size: 0.75rem;
    color: var(--color-text-light, #94a3b8);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 6px;
}

.app-crit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.app-crit-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid;
    background: #fff;
    flex-shrink: 0;
}

/* Inherits .score-ring colour classes: rag-green, rag-amber, rag-red */
.app-crit-score-num   { font-size: 0.82rem; font-weight: 800; line-height: 1; }
.app-crit-score-label { font-size: 0.52rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-light, #64748b); margin-top: 1px; }

.app-crit-score-locked {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}

.app-crit-detail {
    padding: 0 16px 16px 16px;
    background: #f8fafc;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.app-crit-response-preview {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e2e8f0);
}

.app-crit-response-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #64748b);
    margin-bottom: 6px;
}

.app-crit-response-text {
    font-size: 0.82rem;
    color: var(--color-text, #1e293b);
    line-height: 1.6;
    margin: 0;
}

/* ── Tracker application card (grouped) ──────────────────────────────────── */

.tracker-app-card {
    flex-direction: row;
    align-items: flex-start;
}

.tracker-app-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text, #1e293b);
}

/* ── Stage progress dots ──────────────────────────────────────────────────── */

.tracker-card-stages {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
}

.tracker-stage-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.tracker-stage-dot.stage-done    { background: #dcfce7; color: #15803d; }
.tracker-stage-dot.stage-pending { background: #f1f5f9; color: #94a3b8; }

.tracker-stage-connector {
    width: 16px;
    height: 2px;
    background: var(--color-border, #e2e8f0);
    flex-shrink: 0;
}

/* ── Tracker score badge ─────────────────────────────────────────────────── */

.tracker-card-score {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
    white-space: nowrap;
}


/* ── Application detail criterion row chevron (non-interactive, decorative) ── */

.app-crit-chevron-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-text-light, #94a3b8);
    font-size: 0.8rem;
    pointer-events: none; /* click is handled by parent row-main */
    flex-shrink: 0;
}

/* =============================================================================
   ONLINE TESTS — SHARED & HUB STYLES
   Prefix: .vt- (verbal test) for verbal-specific, .vt-hub- for hub cards
   All class names prefixed to avoid collision with existing styles.
   ============================================================================= */

/* ── App context banner (shown when launched from an application) ─────────── */
.vt-app-context-banner {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Test hub grid ────────────────────────────────────────────────────────── */
.vt-hub-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vt-hub-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.vt-hub-card--active {
    cursor: pointer;
    border-color: #bfdbfe;
}

.vt-hub-card--active:hover,
.vt-hub-card--active:focus {
    box-shadow: 0 4px 12px rgba(15,44,89,0.1);
    border-color: var(--color-primary);
    outline: none;
}

.vt-hub-card--soon {
    opacity: 0.75;
    cursor: default;
}

.vt-hub-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.vt-hub-card-body {
    flex: 1;
    min-width: 0;
}

.vt-hub-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.vt-hub-card-desc {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 10px;
}

.vt-hub-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vt-hub-card-arrow {
    color: #94a3b8;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.vt-hub-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
}

.vt-hub-pill--active {
    background: #dcfce7;
    color: #15803d;
}

.vt-hub-pill--info {
    background: #f1f5f9;
    color: #475569;
}

.vt-hub-pill--soon {
    background: #fef3c7;
    color: #92400e;
}
/* ── Redesigned hub: section layout with inline mode buttons ──────────────── */

.vt-hub-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
}

.vt-hub-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.vt-hub-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.vt-hub-section-meta {
    flex: 1;
    min-width: 0;
}

.vt-hub-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 3px;
}

.vt-hub-section-desc {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.45;
}

.vt-hub-info-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 1rem;
    flex-shrink: 0;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    margin-top: -2px;
}

.vt-hub-info-btn:hover,
.vt-hub-info-btn[aria-expanded="true"] {
    color: var(--color-primary);
    background: #f0f7ff;
}

.vt-hub-info-panel {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.vt-hub-info-panel ul {
    margin: 0 0 8px 0;
    padding-left: 18px;
}

.vt-hub-info-panel li {
    margin-bottom: 4px;
}

.vt-hub-info-panel p {
    margin: 0;
    font-size: 0.78rem;
}

.vt-hub-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.vt-hub-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--color-primary);
}

.vt-hub-mode-btn:hover:not(.vt-hub-mode-btn--locked) {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(15,44,89,0.1);
    background: #f0f7ff;
}

.vt-hub-mode-btn i.fa-graduation-cap { color: #1d4ed8; font-size: 1rem; }
.vt-hub-mode-btn i.fa-bolt           { color: #b45309; font-size: 1rem; }
.vt-hub-mode-btn i.fa-stopwatch      { color: #7c3aed; font-size: 1rem; }

.vt-hub-mode-btn--locked {
    opacity: 0.6;
}

.vt-hub-mode-label {
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.vt-hub-mode-detail {
    font-size: 0.72rem;
    color: var(--color-text-light);
    font-weight: 400;
}

.vt-hub-crown {
    font-size: 0.65rem;
    color: #b45309;
}

@media (max-width: 420px) {
    .vt-hub-mode-row {
        grid-template-columns: 1fr;
    }
    .vt-hub-mode-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }
}


/* =============================================================================
   VERBAL REASONING — SETUP SCREEN
   ============================================================================= */

.vt-setup-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    max-width: 680px;
    margin: 0 auto;
}

@media (min-width: 1025px) {
    .vt-setup-card {
        max-width: 100%;
        margin: 0;
    }
}

.vt-setup-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.vt-setup-icon {
    font-size: 1.8rem;
    color: #1d4ed8;
    background: #dbeafe;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vt-setup-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.vt-setup-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.vt-setup-what {
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.vt-setup-what h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 10px 0;
}

.vt-setup-what ul {
    margin: 0 0 0 16px;
    padding: 0;
    line-height: 1.8;
}

.vt-setup-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .vt-setup-fields {
        grid-template-columns: 1fr;
    }
}

.vt-setup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vt-setup-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Mode selection cards ─────────────────────────────────────────────────── */
.vt-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 520px) {
    .vt-mode-grid {
        grid-template-columns: 1fr;
    }
}

.vt-mode-card {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vt-mode-card:hover:not(.vt-mode-card--locked),
.vt-mode-card:focus:not(.vt-mode-card--locked) {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(15,44,89,0.1);
    outline: none;
}

.vt-mode-card--locked {
    opacity: 0.6;
    cursor: pointer; /* still clickable — triggers upsell */
}

.vt-mode-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.vt-mode-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vt-mode-desc {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.vt-premium-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

.vt-free-notice {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.55;
}

.vt-free-notice i {
    margin-right: 5px;
    color: var(--color-primary);
}

.vt-free-notice a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* =============================================================================
   VERBAL REASONING — SESSION CHROME (shared between learning & timed)
   ============================================================================= */

.vt-session-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.vt-session-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.vt-progress-bar-track {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.vt-progress-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ── Difficulty pill ──────────────────────────────────────────────────────── */
.vt-difficulty-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.vt-difficulty-foundation   { background: #dcfce7; color: #15803d; }
.vt-difficulty-intermediate { background: #fef3c7; color: #92400e; }
.vt-difficulty-advanced     { background: #fde8eb; color: #c4253b; }

/* ── Timer ────────────────────────────────────────────────────────────────── */
.vt-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    justify-content: center;
}

.vt-timer--urgent {
    background: #fef3c7;
    color: #92400e;
}

.vt-timer--critical {
    background: #fde8eb;
    color: var(--red);
    animation: vt-pulse 1s infinite;
}

@keyframes vt-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* =============================================================================
   VERBAL REASONING — PASSAGE CARD
   ============================================================================= */

.vt-passage-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.vt-passage-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.vt-passage-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #1e293b;
}

/* =============================================================================
   VERBAL REASONING — STATEMENT CARDS
   ============================================================================= */

.vt-statements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.vt-stmt-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
}

.vt-stmt-card--timed {
    margin-bottom: 0;
}

.vt-stmt-number {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.vt-stmt-text {
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
}

/* ── Answer buttons ───────────────────────────────────────────────────────── */
.vt-answer-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vt-answer-btn {
    flex: 1;
    min-width: 90px;
    padding: 9px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
}

.vt-answer-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #f0f7ff;
}

.vt-answer-btn:disabled {
    cursor: default;
}

.vt-answer-btn.vt-btn--correct {
    border-color: #15803d;
    background: #dcfce7;
    color: #15803d;
}

.vt-answer-btn.vt-btn--incorrect {
    border-color: var(--red);
    background: #fde8eb;
    color: var(--red);
}

/* ── Feedback block ───────────────────────────────────────────────────────── */
.vt-stmt-feedback {
    margin-top: 12px;
}

.vt-feedback {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.85rem;
}

.vt-feedback--correct {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.vt-feedback--incorrect {
    background: #fff5f5;
    border: 1px solid #fecdd3;
}

.vt-feedback-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 6px;
}

.vt-feedback--correct .vt-feedback-icon { color: #15803d; }
.vt-feedback--incorrect .vt-feedback-icon { color: var(--red); }

.vt-feedback-explanation {
    margin: 0;
    color: #374151;
    line-height: 1.55;
}

/* ── Next passage button area ─────────────────────────────────────────────── */
.vt-passage-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    margin-bottom: 24px;
}

/* =============================================================================
   VERBAL REASONING — RESULTS SCREEN
   ============================================================================= */

.vt-results-card {
    max-width: 680px;
    margin: 0 auto;
}

.vt-results-header {
    text-align: center;
    margin-bottom: 24px;
}

.vt-results-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 6px 0;
}

.vt-results-score-block {
    margin-bottom: 20px;
}

/* ── Performance message ──────────────────────────────────────────────────── */
.vt-perf-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.875rem;
    line-height: 1.55;
}

.vt-perf-msg i {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.vt-perf-msg p { margin: 0; }

.vt-perf--green  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.vt-perf--amber  { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.vt-perf--red    { background: #fff5f5; border: 1px solid #fecdd3; color: #991b1b; }

/* ── Timed mode breakdown ─────────────────────────────────────────────────── */
.vt-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vt-breakdown-row {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

.vt-breakdown--correct {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.vt-breakdown--incorrect {
    background: #fff5f5;
    border-color: #fecdd3;
}

.vt-breakdown-num {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.vt-breakdown-passage {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-bottom: 4px;
    font-style: italic;
}

.vt-breakdown-stmt {
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.5;
}

.vt-breakdown-answers {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.vt-breakdown-given  { color: #374151; }
.vt-breakdown-correct { color: #15803d; }

.vt-breakdown-explanation {
    color: #374151;
    font-size: 0.8rem;
    line-height: 1.5;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* =============================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 520px) {

    .vt-setup-card {
        padding: 16px;
    }

    .vt-setup-header {
        flex-direction: column;
        gap: 10px;
    }

    .vt-hub-card {
        padding: 14px;
    }

    .vt-hub-card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .vt-answer-btn {
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.82rem;
    }

    .vt-passage-text {
        font-size: 0.85rem;
    }

    .vt-stmt-text {
        font-size: 0.85rem;
    }

    .vt-timer {
        font-size: 0.9rem;
        padding: 4px 10px;
    }

    .vt-results-title {
        font-size: 1.1rem;
    }
}

/* ── Test row mode pill (Learning / Timed label beside test type name) ─── */
.app-test-mode-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* ── Timed mode inline exit confirmation ──────────────────────────────────── */
.vt-exit-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vt-exit-confirm-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--red);
    white-space: nowrap;
}

/* ── Inline delete confirmation label (shared — STAR history & tracker) ─── */
.history-delete-confirm-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--red);
    white-space: nowrap;
}

/* =============================================================================
   SITUATIONAL JUDGEMENT TEST — STYLES
   Prefix: .sjt- for SJT-specific elements.
   Shared chrome (.vt-session-header, .vt-timer, etc.) already defined above.
   ============================================================================= */

/* ── Competency pill ─────────────────────────────────────────────────────── */
.sjt-competency-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: #dcfce7;
    color: #15803d;
    white-space: nowrap;
}

/* ── Scenario card ───────────────────────────────────────────────────────── */
.sjt-scenario-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #15803d;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.sjt-scenario-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #1e293b;
}

/* ── Options list ────────────────────────────────────────────────────────── */
.sjt-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Option card (shared by both mechanics) ──────────────────────────────── */
.sjt-option-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.sjt-option-label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.sjt-option-id {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.sjt-option-text {
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.6;
}

/* =============================================================================
   RATE-EACH MECHANIC
   ============================================================================= */

.sjt-rate-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

@media (max-width: 560px) {
    .sjt-rate-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sjt-rate-btn {
    padding: 8px 6px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1.3;
}

.sjt-rate-btn:hover:not(:disabled) {
    border-color: #b45309;
    color: #b45309;
    background: #fef9ec;
}

.sjt-rate-btn--selected {
    border-color: #b45309 !important;
    background: #fef3c7 !important;
    color: #92400e !important;
}

.sjt-rate-btn--correct {
    border-color: #15803d !important;
    background: #dcfce7 !important;
    color: #15803d !important;
}

.sjt-rate-btn--incorrect {
    border-color: var(--red) !important;
    background: #fde8eb !important;
    color: var(--red) !important;
}

.sjt-rate-btn:disabled {
    cursor: default;
}

/* =============================================================================
   MOST / LEAST MECHANIC
   ============================================================================= */

.sjt-ml-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 0 16px 6px;
    font-size: 0;  /* hide the empty first span */
}

.sjt-ml-col-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    width: 56px;
}

.sjt-ml-col-most  { color: #15803d; }
.sjt-ml-col-least { color: var(--red); }

.sjt-option-card--ml {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.sjt-option-card--ml .sjt-option-label {
    margin-bottom: 0;
}

.sjt-ml-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sjt-ml-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #cbd5e1;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sjt-ml-btn--most:hover:not(:disabled)  { border-color: #b45309; color: #92400e; background: #fef9ec; }
.sjt-ml-btn--least:hover:not(:disabled) { border-color: #b45309; color: #92400e; background: #fef9ec; }

.sjt-ml-btn--most-selected  { border-color: #b45309 !important; background: #fef3c7 !important; color: #92400e !important; }
.sjt-ml-btn--least-selected { border-color: #b45309 !important; background: #fef3c7 !important; color: #92400e !important; }

.sjt-ml-btn--reveal-correct   { border-color: #15803d !important; background: #dcfce7 !important; color: #15803d !important; }
.sjt-ml-btn--reveal-incorrect  { border-color: var(--red) !important; background: #fde8eb !important; color: var(--red) !important; }

.sjt-ml-btn:disabled { cursor: default; opacity: 0.6; }

@media (max-width: 480px) {
    .sjt-ml-btn {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }
}

/* =============================================================================
   SUBMIT ROW & FEEDBACK
   ============================================================================= */

.sjt-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.sjt-feedback {
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sjt-feedback--good    { background: #f0fdf4; border: 1px solid #bbf7d0; }
.sjt-feedback--partial { background: #fffbeb; border: 1px solid #fde68a; }
.sjt-feedback--poor    { background: #fff5f5; border: 1px solid #fecdd3; }

/* ── Score header row: badge + summary label in one line ─────────────────── */
.sjt-feedback-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sjt-feedback-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 52px;
}

.sjt-feedback-score-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.sjt-feedback-score-label {
    font-size: 0.68rem;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 2px;
}

/* ── Ideal answers grid: full-width row beneath score header ─────────────── */
.sjt-ideal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    width: 100%;
}

.sjt-ideal-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sjt-ideal-option {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sjt-ideal-label {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

.sjt-ideal--effective   { background: #dcfce7; color: #15803d; }
.sjt-ideal--fairly      { background: #f0f9ff; color: #0369a1; }
.sjt-ideal--ineffective { background: #fef3c7; color: #92400e; }
.sjt-ideal--counter     { background: #fde8eb; color: var(--red); }

/* ── Explanation: full width at bottom ───────────────────────────────────── */
.sjt-feedback-explanation {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #374151;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 10px;
}

@media (max-width: 480px) {
    .sjt-ideal-grid { grid-template-columns: 1fr; }
}

/* ── SJT mechanic badge (Rate each / Most & Least indicator) ─────────────── */
.sjt-mechanic-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.sjt-mechanic-badge--rate { background: #dbeafe; color: #1d4ed8; }
.sjt-mechanic-badge--ml   { background: #fef3c7; color: #92400e; }

/* =============================================================================
   NUMERICAL REASONING — STYLES
   Prefix: .num- for numerical-specific elements.
   Shared chrome (.vt-session-header, .vt-timer, etc.) already defined above.
   ============================================================================= */

/* ── Calculator notice ───────────────────────────────────────────────────── */
.num-calculator-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #92400e;
}

/* ── Dataset card ────────────────────────────────────────────────────────── */
.num-dataset-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #b45309;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.num-dataset-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.num-dataset-context {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0 0 14px 0;
    line-height: 1.5;
}

/* ── Data table ──────────────────────────────────────────────────────────── */
.num-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.num-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: #fff;
    min-width: 320px;
}

.num-table thead tr {
    background: var(--color-primary);
    color: #fff;
}

.num-table thead th {
    padding: 9px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}

.num-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

.num-table tbody tr:last-child {
    border-bottom: none;
}

.num-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.num-table tbody td {
    padding: 8px 12px;
    color: #1e293b;
    white-space: nowrap;
}

.num-table tbody td:first-child {
    font-weight: 500;
    color: var(--color-primary);
}

/* ── Questions list ──────────────────────────────────────────────────────── */
.num-questions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

/* ── Question card ───────────────────────────────────────────────────────── */
.num-q-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
}

.num-q-number {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.num-q-text {
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* ── Options grid ────────────────────────────────────────────────────────── */
.num-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .num-options-grid {
        grid-template-columns: 1fr;
    }
}

.num-option-btn {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.num-option-btn:hover:not(:disabled) {
    border-color: #b45309;
    color: #b45309;
    background: #fffbeb;
}

.num-option-btn:disabled {
    cursor: default;
}

.num-option-btn.num-btn--selected {
    border-color: #b45309 !important;
    background: #fef3c7 !important;
    color: #92400e !important;
}

.num-option-btn.num-btn--correct {
    border-color: #15803d !important;
    background: #dcfce7 !important;
    color: #15803d !important;
}

.num-option-btn.num-btn--incorrect {
    border-color: var(--red) !important;
    background: #fde8eb !important;
    color: var(--red) !important;
}

/* ── Explanation ─────────────────────────────────────────────────────────── */
.num-q-explanation {
    margin-top: 12px;
}

.num-explanation {
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.85rem;
}

.num-explanation--correct {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.num-explanation--incorrect {
    background: #fff5f5;
    border: 1px solid #fecdd3;
}

.num-explanation-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 6px;
}

.num-explanation--correct .num-explanation-icon { color: #15803d; }
.num-explanation--incorrect .num-explanation-icon { color: var(--red); }

.num-explanation-text {
    margin: 0;
    color: #374151;
    line-height: 1.6;
}

/* ── Timed breakdown ─────────────────────────────────────────────────────── */
.num-breakdown-dataset {
    margin-bottom: 24px;
}

.num-breakdown-dataset-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.num-breakdown-q {
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

@media (max-width: 520px) {
    .num-table thead th,
    .num-table tbody td {
        padding: 7px 8px;
        font-size: 0.78rem;
    }

    .num-dataset-card {
        padding: 14px;
    }

    .num-option-btn {
        font-size: 0.82rem;
        padding: 9px 10px;
    }
}

/* ── Application detail — persistent test CTA button ─────────────────────── */
.app-stage-cta {
    padding: 12px 0 4px;
    display: flex;
    justify-content: flex-start;
}

/* =============================================================================
   INTERVIEW PRACTICE — STYLES
   Prefix: .iv- for interview-specific elements.
   ============================================================================= */

/* ── Competency pill (session header) ───────────────────────────────────── */
.iv-comp-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: #ede9fe;
    color: #7c3aed;
    white-space: nowrap;
}

/* ── Setup — section labels ──────────────────────────────────────────────── */
.iv-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

/* ── Competency checkbox grid ────────────────────────────────────────────── */
.iv-comp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    .iv-comp-grid { grid-template-columns: 1fr; }
}

.iv-comp-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #1e293b;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: background 0.12s, border-color 0.12s;
}

.iv-comp-checkbox:hover { background: #f8fafc; border-color: #7c3aed; }
.iv-comp-checkbox input { flex-shrink: 0; accent-color: #7c3aed; }

.iv-comp-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

/* ── Session length buttons ──────────────────────────────────────────────── */
.iv-length-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .iv-length-grid { grid-template-columns: 1fr; }
}

.iv-length-btn {
    padding: 12px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.iv-length-btn:hover:not(.iv-length-btn--locked) {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #faf5ff;
}

.iv-length-btn--selected {
    border-color: #7c3aed !important;
    background: #ede9fe !important;
    color: #7c3aed !important;
}

.iv-length-btn--locked { opacity: 0.6; cursor: pointer; }

.iv-length-note {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text-light);
}

/* ── Question card ───────────────────────────────────────────────────────── */
.iv-question-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #7c3aed;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.iv-question-card--followup {
    border-left-color: #0284c7;
    background: #f0f9ff;
}

.iv-question-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv-question-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #1e293b;
    font-weight: 500;
}

.iv-question-text--sm {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-light);
}

/* ── STAR hint ───────────────────────────────────────────────────────────── */
.iv-star-hint {
    font-size: 0.82rem;
    color: var(--color-text-light);
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.iv-star-s { color: #7c3aed; font-weight: 600; }
.iv-star-t { color: #0284c7; font-weight: 600; }
.iv-star-a { color: #15803d; font-weight: 600; }
.iv-star-r { color: #b45309; font-weight: 600; }

/* ── Answer textarea ─────────────────────────────────────────────────────── */
.iv-answer-block {
    margin-bottom: 16px;
}

.iv-answer-textarea {
    width: 100%;
    min-height: 180px;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.7;
    font-family: var(--font-main);
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
    margin-top: 6px;
}

.iv-answer-textarea--sm { min-height: 120px; }

.iv-answer-textarea:focus {
    outline: none;
    border-color: #7c3aed;
}

.iv-word-count {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-align: right;
    margin-top: 4px;
}

/* ── Submit row ──────────────────────────────────────────────────────────── */
.iv-submit-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* ── Score card (follow-up screen) ──────────────────────────────────────── */
.iv-score-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.iv-score-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.iv-score-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.iv-score-summary {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ── Indicator breakdown ─────────────────────────────────────────────────── */
.iv-indicators-block {
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.iv-indicators-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

/* Interview indicator rows — now use shared scorecard panel markup */
.iv-indicator-row     { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 0.83rem; line-height: 1.5; }
.iv-indicator-dot     { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; margin-top: 1px; }
.iv-dot--present      { background: #dcfce7; color: #15803d; }
.iv-dot--missing      { background: #fde8eb; color: var(--red); }
.iv-indicator-text    { color: #374151; }
.iv-indicator--missing { color: var(--color-text-light); text-decoration: line-through; }

/* ── Result card (between questions) ────────────────────────────────────── */
.iv-result-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    max-width: 680px;
    margin: 0 auto;
}

.iv-result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.iv-score-comparison {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.82rem;
}

.iv-score-chip {
    background: #f1f5f9;
    color: #475569;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.iv-score-chip--best {
    background: #dcfce7;
    color: #15803d;
}

.iv-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ── Session results list ────────────────────────────────────────────────── */
.iv-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iv-results-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.iv-results-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.iv-results-row-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.iv-results-row-info {
    flex: 1;
    min-width: 0;
}

.iv-results-row-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.iv-results-q-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-light);
    flex-shrink: 0;
    padding-top: 2px;
}

.iv-results-comp {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 2px;
    display: block;
}

.iv-results-q-text {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* ── Indicator detail toggle button ───────────────────────────────────────── */
.iv-detail-toggle {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-light);
    font-size: 0.7rem;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.iv-detail-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Indicator detail panel ───────────────────────────────────────────────── */
.iv-detail-panel {
    border-top: 1px solid #e2e8f0;
    background: #fff;
    padding: 12px 14px 14px;
}

.iv-detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.iv-detail-ind-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 3px 0;
    color: #374151;
}

.iv-detail-ind--hit { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.iv-detail-ind--miss { color: #dc2626; flex-shrink: 0; margin-top: 2px; }
.iv-detail-ind-text--miss { color: #6b7280; }

/* =============================================================================
   INTERVIEW PRACTICE — CLUSTER & SELECTOR ADDITIONS (v3.0)
   ============================================================================= */

/* ── Cluster pill variant ────────────────────────────────────────────────── */
.iv-cluster-pill {
    background: #ede9fe;
    color: #7c3aed;
}

/* ── Cascade start actions row ───────────────────────────────────────────── */
.iv-start-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.iv-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iv-choose-btn--active {
    background: #f1f5f9;
    border-color: #7c3aed;
    color: #7c3aed;
}

.iv-choose-chevron {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

/* ── Competency / cluster selector panel ────────────────────────────────── */
.iv-comp-selector {
    margin-top: 4px;
    padding-top: 4px;
}

/* ── Selector tabs ───────────────────────────────────────────────────────── */
.iv-selector-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.iv-selector-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iv-selector-tab:hover { color: #7c3aed; }

.iv-selector-tab--active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    font-weight: 600;
}

.iv-cluster-badge {
    background: #ede9fe;
    color: #7c3aed;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.iv-selector-hint {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin: 0 0 12px;
    line-height: 1.45;
}

/* ── Cluster checkbox variant ────────────────────────────────────────────── */
.iv-cluster-checkbox { align-items: flex-start; padding: 8px 10px; }

.iv-cluster-name {
    display: block;
    font-weight: 600;
    font-size: 0.83rem;
    color: #1e293b;
}

.iv-cluster-comps {
    display: block;
    font-size: 0.73rem;
    color: var(--color-text-light);
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Cluster coverage note (question screen) ─────────────────────────────── */
.iv-cluster-coverage-note {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #5b21b6;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.5;
}

.iv-cluster-coverage-note i { margin-top: 2px; flex-shrink: 0; }

.iv-mini-pill {
    display: inline-block;
    background: #ede9fe;
    color: #6d28d9;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.73rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Cluster bar chart ───────────────────────────────────────────────────── */
.iv-cluster-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.iv-cluster-bar-label {
    font-size: 0.78rem;
    color: var(--color-text);
    flex: 1 1 140px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iv-cluster-bar-track {
    flex: 1 1 80px;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.iv-cluster-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.45s ease;
}

.iv-bar-rag-green { background: #28a745; }
.iv-bar-rag-amber { background: #f59e0b; }
.iv-bar-rag-red   { background: #dc3545; }

.iv-cluster-bar-pct {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

.iv-cluster-bar-pct.rag-green { color: #28a745; }
.iv-cluster-bar-pct.rag-amber { color: #d97706; }
.iv-cluster-bar-pct.rag-red   { color: #dc3545; }

@media (max-width: 480px) {
    .iv-cluster-bar-label { max-width: 110px; }
}

/* =============================================================================
   DASHBOARD v115 — CONTEXT STRIP + PROFILE CTA
   ============================================================================= */

/* ── Compact context strip ───────────────────────────────────────────────── */
.db-context-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.db-context-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.db-grade-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #0F2C59);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.db-grade-chip:hover { background: #e2e8f0; }

.db-grade-edit {
    font-size: 0.65rem;
    color: #94a3b8;
}

.db-fw-label {
    display: none;
}

.db-context-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.db-readiness-pct {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.db-readiness-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ── Profile CTA card ────────────────────────────────────────────────────── */
.db-profile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 4px;
}

.db-profile-cta--pro {
    background: #f8fafc;
}

.db-profile-cta--free {
    background: linear-gradient(135deg, #fff7ed, #fffbeb);
    border-color: #fde68a;
}

.db-profile-cta-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.db-profile-cta-left > .fas {
    font-size: 1.3rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.db-profile-cta--free .db-profile-cta-left > .fas {
    color: #d97706;
}

.db-profile-cta-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink, #0F172A);
}

.db-profile-cta-sub {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}




/* ── SJT timed results — option-by-option breakdown ────────────────────── */
.sjt-result-answers {
    padding: 4px 0 8px;
}

.sjt-result-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 8px 10px;
    margin: 4px 0;
    border-radius: 6px;
    font-size: 0.83rem;
    line-height: 1.5;
    border-left: 3px solid #e2e8f0;
}

.sjt-result-option-row.sjt-result--correct {
    background: #f0fdf4;
    border-left-color: #15803d;
}

.sjt-result-option-row.sjt-result--wrong {
    background: #fff7ed;
    border-left-color: #b45309;
}

.sjt-result-opt-id {
    font-weight: 700;
    font-size: 0.8rem;
    background: #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.sjt-result--correct .sjt-result-opt-id { background: #bbf7d0; }
.sjt-result--wrong   .sjt-result-opt-id { background: #fde68a; }

.sjt-result-opt-text {
    color: #475569;
    flex: 1;
    min-width: 120px;
}

.sjt-result-given  { color: #1e293b; white-space: nowrap; }
.sjt-result-ideal  { color: #15803d; white-space: nowrap; }

.sjt-result-score-line {
    font-size: 0.82rem;
    color: var(--color-text-light);
    padding: 4px 10px 0;
}

/* ── Verbal timed option buttons — reuse num-option-btn but in a row ─────── */
.vt-timed-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vt-timed-options .num-option-btn {
    flex: 1;
    min-width: 80px;
    font-size: 0.85rem;
}

/* ── Breakdown row answer line ───────────────────────────────────────────── */
.vt-breakdown-answers {
    font-size: 0.83rem;
    color: #475569;
    margin: 4px 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vt-breakdown-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.vt-breakdown--correct { border-left-color: #15803d !important; background: #f0fdf4 !important; }
.vt-breakdown--incorrect { border-left-color: #b45309 !important; background: #fff7ed !important; }

/* ════════════════════════════════════════════════════════════════════════
   UI POLISH BATCH — toasts, transitions, animations, word counter
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page transition fade ─────────────────────────────────────────────── */
.app-page {
    animation: cc-page-in 0.18s ease both;
}
@keyframes cc-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast notifications ──────────────────────────────────────────────── */
#cc-toast-container {
    position: fixed;
    bottom: 80px; /* above nav bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: 90%;
    max-width: 420px;
}

.cc-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--r-lg);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: white;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: cc-toast-in 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
    width: 100%;
}
.cc-toast.hiding {
    animation: cc-toast-out 0.2s ease forwards;
}
.cc-toast-success { background: #16a34a; }
.cc-toast-error   { background: #dc2626; }
.cc-toast-info    { background: var(--navy); }
.cc-toast-warning { background: #d97706; }
.cc-toast i { font-size: 1.1rem; flex-shrink: 0; }

@keyframes cc-toast-in {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cc-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* ── Word counter ─────────────────────────────────────────────────────── */
.cc-word-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: right;
    margin-top: 4px;
    transition: color 0.2s;
}
.cc-word-counter.warn  { color: #d97706; }
.cc-word-counter.over  { color: #dc2626; }

/* ── Journey button status states ─────────────────────────────────────── */
.journey-btn-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
}
.journey-btn-status-dot.dot-done    { background: #16a34a; }
.journey-btn-status-dot.dot-started { background: #d97706; }
.journey-btn-status-dot.dot-none    { background: #cbd5e1; }

.journey-btn.jb-done {
    border-left: 3px solid #16a34a;
}
.journey-btn.jb-started {
    border-left: 3px solid #d97706;
}


/* ── Empty states ─────────────────────────────────────────────────────── */
.cc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
    gap: 16px;
}
.cc-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.cc-empty-title {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}
.cc-empty-body {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 280px;
    margin: 0;
}

/* ── First-run dashboard card ─────────────────────────────────────────── */
.cc-firstrun-card {
    background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fe 100%);
    border: 1px solid #c7d9f8;
    border-radius: var(--r-xl);
    padding: 28px 24px;
    margin-bottom: 16px;
    text-align: center;
}
.cc-firstrun-title {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 6px 0;
}
.cc-firstrun-sub {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin: 0 0 22px 0;
    line-height: 1.5;
}
.cc-firstrun-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    text-align: left;
}
.cc-firstrun-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid #dbeafe;
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--navy);
    font-weight: 600;
}
.cc-firstrun-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--navy);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-firstrun-step-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text-light);
    display: block;
    margin-top: 1px;
}

/* ── Disclaimer footnote style ────────────────────────────────────────── */
.cc-disclaimer-footnote {
    font-size: 0.78rem;
    color: var(--color-text-light);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
    padding: 0 8px;
}
.cc-disclaimer-footnote i {
    margin-right: 4px;
    opacity: 0.6;
}


/* ── Nav upgrade indicator dot ────────────────────────────────────────── */
#nav-activate {
    position: relative;
}
/* Free user — amber pulse dot */
.nav-upgrade-indicator {
    display: none;
    position: absolute;
    top: 6px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
    border: 1.5px solid white;
    animation: cc-dot-pulse 2s ease-in-out infinite;
}
@keyframes cc-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}
/* Pro user — crown turns gold */
#nav-activate.nav-is-pro #nav-activate-icon {
    color: #d97706;
}
#nav-activate.nav-is-pro {
    color: #d97706;
}


/* ── Landing page testimonial strip ──────────────────────────────────── */
.landing-testimonials {
    margin: 28px 0 8px 0;
    padding: 0 4px;
}
.landing-testimonials-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    text-align: center;
    margin: 0 0 14px 0;
}
.landing-testimonial-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.landing-testimonial-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.ltc-stars {
    color: var(--gold, #d97706);
    font-size: 0.75rem;
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.ltc-quote {
    font-size: 0.88rem;
    color: var(--navy);
    line-height: 1.55;
    margin: 0 0 8px 0;
    font-style: italic;
}
.ltc-attr {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ── SVG Score Ring ───────────────────────────────────────────────────── */
.cc-svg-ring-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-svg-ring {
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}
.cc-svg-ring-arc {
    stroke-dasharray: 0 999;
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── Landing setup card ───────────────────────────────────────────────── */
.landing-setup-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    padding: 20px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.landing-setup-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.landing-setup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.landing-setup-label {
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.landing-setup-label i {
    margin-right: 5px;
    color: var(--indigo);
    opacity: 0.8;
}
.landing-setup-select {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-md);
    padding: 10px 36px 10px 12px;
    font-size: 0.9rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: border-color 0.15s;
}
.landing-setup-select:focus {
    outline: none;
    border-color: var(--indigo);
}
.landing-setup-footnote {
    font-size: 0.72rem;
    color: var(--color-text-light);
    text-align: center;
    margin: 8px 0 0 0;
}


/* ── Shared page context bar ──────────────────────────────────────────── */
/* Used on Input, Sift, and Interview pages to show active framework/grade */
.page-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 16px;
}
.pcb-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.pcb-icon { display: none; }
.pcb-label { display: none; }
.pcb-grade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}
.pcb-fw {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 400px) {
    .pcb-fw { display: none; }
}


/* ── Help & Support page ──────────────────────────────────────────────── */
.help-resource-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.15s, transform 0.15s;
}
.help-resource-link:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}
.help-resource-link i {
    color: var(--gold, #d97706);
    font-size: 0.8rem;
    flex-shrink: 0;
}


/* ── Test setup screen — back to hub button ───────────────────────────── */
.vt-back-to-hub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-light);
    background: none;
    border: none;
    padding: 4px 0 12px 0;
    cursor: pointer;
    transition: color 0.15s;
}
.vt-back-to-hub:hover { color: var(--navy); }
.vt-back-to-hub i { font-size: 0.7rem; }

/* ── Interview: free user focused view ────────────────────────────────────── */
.iv-free-counter {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
}

.iv-free-intro {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.iv-free-sample {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 12px;
}

.iv-free-sample-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.iv-free-sample-q {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.55;
    font-weight: 500;
}

/* ── Interview: premium upsell card (free user only) ─────────────────────── */
.iv-premium-upsell-card {
    background: linear-gradient(135deg, #0d2347 0%, #1a3a6b 100%);
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 16px;
    color: #fff;
}

.iv-premium-upsell-header {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.iv-premium-upsell-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-premium-upsell-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}

.iv-premium-upsell-list li i {
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.8rem;
}

/* ── Upgrade modal: benefit card grid ────────────────────────────────────── */
.upgrade-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.upgrade-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    background: var(--ground);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.upgrade-feature-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.upgrade-feature-card strong {
    font-size: 0.9rem;
    color: var(--navy);
}

.upgrade-feature-card span {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.upgrade-feature-icon {
    font-size: 1.1rem;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    text-align: center;
}

.upgrade-free-note {
    font-size: 0.8rem;
    color: var(--color-text-light);
    background: var(--ground);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.upgrade-free-note i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold);
}

/* Numerical table mobile scroll */
.num-data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.num-data-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
    pointer-events: none;
    border-radius: 0 8px 8px 0;
}
.num-data-table-wrap.scrolled::after { display: none; }

/* ── Results page — consistent breakdown row states ───────────────────────── */
.num-breakdown-q {
    border-left: 4px solid #e2e8f0;
    padding: 14px 16px;
    margin: 8px 0;
    border-radius: 0 8px 8px 0;
    background: #fafafa;
}

.num-breakdown-q.vt-breakdown--correct {
    border-left-color: #15803d;
    background: #f0fdf4;
}

.num-breakdown-q.vt-breakdown--incorrect {
    border-left-color: #dc2626;
    background: #fef2f2;
}

/* ── SJT results option rows ──────────────────────────────────────────────── */
.sjt-result-option-row.sjt-result--correct {
    background: #f0fdf4;
    border-left-color: #15803d;
}

.sjt-result-option-row.sjt-result--wrong {
    background: #fff7ed;
    border-left-color: #b45309;
}

/* ── Numerical table mobile scroll hint ──────────────────────────────────── */
.num-table-scroll-hint {
    display: none;
    font-size: 0.75rem;
    color: var(--color-text-light);
    padding: 4px 0 6px;
    gap: 4px;
    align-items: center;
}

@media (max-width: 600px) {
    .num-table-scroll-hint {
        display: flex;
    }
    .num-data-table-wrap.scrolled .num-table-scroll-hint {
        display: none;
    }
}

/* ── Verbal / SJT timed results — score summary row ─────────────────────── */
.vt-score-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 20px 0 28px;
    flex-wrap: wrap;
}

.vt-score-block {
    flex: 1;
    min-width: 90px;
    max-width: 130px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
}

.vt-score-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.vt-score-denom {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.vt-score-label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vt-results-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.vt-results-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.vt-results-icon {
    font-size: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.vt-results-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.vt-results-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0;
}

.vt-breakdown-list {
    margin-top: 8px;
}

.vt-results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.vt-breakdown-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.vt-breakdown-stmt {
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.5;
}

.vt-breakdown-answers {
    font-size: 0.83rem;
    color: #475569;
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vt-breakdown-explanation {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.55;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.num-breakdown-q {
    border-left: 4px solid #e2e8f0;
    padding: 14px 16px;
    margin: 8px 0;
    border-radius: 0 8px 8px 0;
    background: #fafafa;
}

.num-breakdown-q.vt-breakdown--correct {
    border-left-color: #15803d;
    background: #f0fdf4;
}

.num-breakdown-q.vt-breakdown--incorrect {
    border-left-color: #dc2626;
    background: #fef2f2;
}

/* ── SJT timed results — card-per-scenario layout ───────────────────────── */
.sjt-result-intro {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
}

.sjt-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sjt-result-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

/* Left accent colour by score band */
.sjt-result-card.sjt-card-full    { border-left: 4px solid #15803d; }
.sjt-result-card.sjt-card-partial { border-left: 4px solid #b45309; }
.sjt-result-card.sjt-card-low     { border-left: 4px solid #dc2626; }
.sjt-result-card.sjt-card-na      { border-left: 4px solid #94a3b8; }

.sjt-result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.sjt-result-card-num {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sjt-result-score-chip {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
}

.sjt-result-score-chip.sjt-card-full    { background: #dcfce7; color: #15803d; }
.sjt-result-score-chip.sjt-card-partial { background: #fef3c7; color: #92400e; }
.sjt-result-score-chip.sjt-card-low     { background: #fee2e2; color: #dc2626; }
.sjt-result-score-chip.sjt-card-na      { background: #f1f5f9; color: #94a3b8; }

/* Collapsible scenario toggle */
.sjt-result-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
}

.sjt-result-toggle:hover { background: #f8fafc; }

.sjt-result-panel {
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.sjt-result-scenario-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: #1e293b;
    margin: 0 0 12px;
}

.sjt-result-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sjt-result-opt-item {
    font-size: 0.83rem;
    color: #475569;
    line-height: 1.5;
}

/* Answer rows */
.sjt-ans-note {
    padding: 12px 16px;
    font-size: 0.84rem;
    color: #94a3b8;
    margin: 0;
}

.sjt-ans-grid {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sjt-ans-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.83rem;
    border-left: 3px solid #e2e8f0;
    background: #f8fafc;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sjt-ans-row.sjt-mark-full    { background: #f0fdf4; border-left-color: #15803d; }
.sjt-ans-row.sjt-mark-partial { background: #fffbeb; border-left-color: #b45309; }
.sjt-ans-row.sjt-mark-miss    { background: #fff7ed; border-left-color: #dc2626; }

.sjt-ans-opt {
    font-size: 0.75rem;
    font-weight: 700;
    background: #e2e8f0;
    border-radius: 4px;
    padding: 1px 7px;
    flex-shrink: 0;
    color: #475569;
}

.sjt-mark-full .sjt-ans-opt    { background: #bbf7d0; color: #15803d; }
.sjt-mark-partial .sjt-ans-opt { background: #fde68a; color: #92400e; }
.sjt-mark-miss .sjt-ans-opt    { background: #fecaca; color: #dc2626; }

.sjt-ans-text  { color: #1e293b; word-break: break-word; overflow-wrap: anywhere; line-height: 1.5; }
.sjt-ans-yours { color: #475569; }
.sjt-ans-ideal { color: #15803d; font-weight: 600; }
.sjt-ans-pts   { color: var(--color-text-light); font-size: 0.78rem; font-style: italic; }

/* Explanation */
.sjt-result-explanation {
    padding: 12px 16px;
    font-size: 0.83rem;
    color: #475569;
    line-height: 1.6;
    border-top: 1px solid #f1f5f9;
    background: #fefefe;
}

/* =============================================================================
   AI SCORING — v91.0 NEW ELEMENTS
   Scoring method banners, loading states, narrative block, detection loading
   ============================================================================= */

/* ── Scoring method banners ─────────────────────────────────────────────────── */
.scoring-method-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.83rem;
    line-height: 1.5;
    margin-bottom: 14px;
}
.scoring-method-banner i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Teal — offline test mode */
.scoring-method-offline {
    background: #f0fdfa;
    border: 1px solid #5eead4;
    color: #0f766e;
}
.scoring-method-offline i { color: #0d9488; }

/* Amber — keyword fallback (excluded from profile) */
.scoring-method-keyword {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}
.scoring-method-keyword i { color: #d97706; }

/* ── STAR scorecard loading state ────────────────────────────────────────────── */
.scorecard-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    min-height: 300px;
}
.scorecard-loading-icon {
    font-size: 2.5rem;
    color: var(--gold, #d97706);
    margin-bottom: 20px;
}
.scorecard-loading-title {
    font-family: var(--font-head, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink, #1e293b);
    margin: 0 0 8px 0;
}
.scorecard-loading-sub {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 20px 0;
    max-width: 320px;
}

/* ── Sift detection loading ──────────────────────────────────────────────────── */
.sift-detection-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #475569;
}
.sift-detection-loading i { color: var(--gold, #d97706); }

/* ── AI detection reason note ───────────────────────────────────────────────── */
.sift-detection-reason {
    font-size: 0.8rem;
    color: #475569;
    margin: 8px 0 0 0;
    line-height: 1.4;
    font-style: italic;
}
.sift-detection-reason i { margin-right: 5px; color: #94a3b8; }

/* ── AI narrative block (scorecard primary view) ─────────────────────────────── */
.sc-narrative-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--gold, #d97706);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0 4px 0;
}
.sc-narrative-icon {
    color: var(--gold, #d97706);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.sc-narrative-text {
    font-size: 0.87rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPANION BUBBLE — v11
   Reusable tip/feedback callout, used at the moments that actually matter
   (a tip while you write, feedback on your result) rather than as a one-off
   header decoration. Scoped per module via data-mascot; only the icon
   backdrop uses the module's colour — the bubble chrome itself stays on
   neutral tokens so it never collides with the gold/green meanings used
   elsewhere.
   ════════════════════════════════════════════════════════════════════════════ */

.companion-bubble {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--navy-tint);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin: 16px 0;
}

.companion-bubble--test {
    border-left: 4px solid #5eead4;
}

.companion-bubble-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.companion-bubble[data-mascot="sarah"]  .companion-bubble-icon { background: var(--gold-soft); color: var(--gold, #c9991a); }
.companion-bubble[data-mascot="trevor"] .companion-bubble-icon { background: var(--green-soft); color: var(--green, #0f7b55); }
.companion-bubble[data-mascot="arthur"] .companion-bubble-icon { background: var(--rust-soft); color: var(--rust, #aa4600); }
.companion-bubble[data-mascot="rachel"] .companion-bubble-icon { background: var(--plum-soft); color: var(--plum, #6e0064); }

.companion-bubble-content {
    flex: 1;
    min-width: 0;
}

.companion-bubble-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--indigo);
    margin-bottom: 3px;
}

.companion-bubble-text {
    font-size: 0.87rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* ── OFFLINE GUARD MODAL — blocks entry to AI-dependent pages when offline ── */
.offline-guard-content {
    text-align: center;
    max-width: 440px;
    padding-top: 44px;
}
.offline-guard-sub {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #64748b;
    margin: 4px 0 26px 0;
}
.offline-guard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.offline-guard-actions .btn-secondary {
    flex: 0 0 auto;
    max-width: none;
}
.offline-guard-btn-primary {
    flex: 1;
    max-width: none;
    background: var(--navy);
    color: white;
    border: none;
}
.offline-guard-btn-primary:hover {
    background: #1a3a6b;
}

/* ── TUTORIAL WALKTHROUGH — 5-step mascot-themed onboarding modal ──────────── */
.tutorial-modal-content {
    text-align: center;
    padding-top: 44px;
    max-width: 480px;
    /* Swipe zone — allow the browser to still handle vertical scroll/refresh
       gestures, only horizontal swipes are intercepted in JS. */
    touch-action: pan-y;
}

.tutorial-content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 340px;
}

.tutorial-close-btn {
    top: 16px;
    right: 16px;
}

.tutorial-step-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-tint);
    border: 3px solid white;
    box-shadow: var(--shadow-sm);
    font-size: 2.1rem;
}
.tutorial-step-avatar[data-mascot="sarah"]  { background: var(--gold-soft); color: var(--gold, #c9991a); }
.tutorial-step-avatar[data-mascot="trevor"] { background: var(--green-soft); color: var(--green, #0f7b55); }
.tutorial-step-avatar[data-mascot="arthur"] { background: var(--rust-soft); color: var(--rust, #aa4600); }
.tutorial-step-avatar[data-mascot="rachel"] { background: var(--plum-soft); color: var(--plum, #6e0064); }
.tutorial-step-avatar[data-mascot="setup"]  {
    background: var(--indigo-soft);
    color: var(--indigo);
    font-size: 1.8rem;
}

.tutorial-setup-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 6px;
    text-align: left;
}

.tutorial-avatar-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}
.tutorial-step-avatar--sm {
    width: 52px;
    height: 52px;
    margin: 0;
    border-width: 2px;
    font-size: 1.2rem;
}

.tutorial-step-eyebrow {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    color: var(--indigo);
}
.tutorial-step-eyebrow[data-mascot="sarah"]  { color: var(--gold); }
.tutorial-step-eyebrow[data-mascot="trevor"] { color: var(--green); }
.tutorial-step-eyebrow[data-mascot="arthur"] { color: var(--rust); }
.tutorial-step-eyebrow[data-mascot="rachel"] { color: var(--plum); }

.tutorial-step-title {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px 0;
}

.tutorial-step-body {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 18px 0;
}

.tutorial-tier-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 8px;
    padding: 8px 14px;
    border-radius: 999px;
    margin: 0 0 8px 0;
    font-size: 0.78rem;
}
.tutorial-tier-badge i { font-size: 0.75rem; }
.tutorial-tier-label {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.72rem;
}
.tutorial-tier-note {
    color: #64748b;
    font-weight: 500;
}
.tutorial-tier-badge--free {
    background: var(--green-soft);
    border: 1px solid rgba(15,123,85,0.25);
}
.tutorial-tier-badge--free i,
.tutorial-tier-badge--free .tutorial-tier-label { color: var(--green); }

.tutorial-tier-badge--premium {
    background: var(--gold-soft);
    border: 1px solid rgba(201,153,26,0.3);
}
.tutorial-tier-badge--premium i,
.tutorial-tier-badge--premium .tutorial-tier-label { color: var(--gold); }

.tutorial-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 22px 0;
}
.tutorial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}
.tutorial-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--indigo);
}

.tutorial-nav-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.tutorial-skip-btn {
    flex: 0 0 auto;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 6px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s;
}
.tutorial-skip-btn:hover {
    color: #64748b;
    background: none;
}
.tutorial-next-btn {
    flex: 1;
    max-width: none;
    background: var(--navy);
    color: white;
    border: none;
}
.tutorial-next-btn:hover {
    background: #1a3a6b;
}

@media (max-width: 600px) {
    .tutorial-modal-content { padding-top: 40px; }
    .tutorial-nav-footer { flex-direction: row; }
}

/* ── AI summary block in sift result ───────────────────────────────────────── */
.sift-ai-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--gold, #d97706);
    border-radius: 10px;
    padding: 14px 16px;
}


/* =============================================================================
   v92.0 — INTERVIEW AI + HISTORY LOCK + APPLICATION CHECKER
   ============================================================================= */

/* ── History lock/blur ──────────────────────────────────────────────────────── */
.history-item-locked {
    position: relative;
    overflow: hidden;
}
.history-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #475569;
    background: rgba(248, 250, 252, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    pointer-events: auto;
}
.history-lock-overlay i {
    color: var(--gold, #d97706);
    font-size: 0.95rem;
}
.history-upgrade-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--gold, #d97706);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.history-card-blurred {
    filter: blur(3px);
    user-select: none;
    pointer-events: none;
}

/* ── History type + method badges ───────────────────────────────────────────── */
.history-type-badge,
.history-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 5px;
}
.history-type-interview  { background: var(--rust-soft); color: var(--rust); }
.history-type-sift       { background: var(--gold-soft); color: #8a6c14; }
.history-method-keyword  { background: #fffbeb; color: #92400e; }
.history-method-offline  { background: #f0fdfa; color: #0f766e; }

/* ── Interview verbal delivery block ────────────────────────────────────────── */
.iv-delivery-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: #334155;
}
.iv-delivery-block i {
    color: var(--gold, #d97706);
    font-size: 1rem;
    flex-shrink: 0;
}
.iv-delivery-note {
    color: #64748b;
    font-size: 0.8rem;
}

/* ── Interview AI narrative block ───────────────────────────────────────────── */
.iv-narrative-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--gold, #d97706);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
}
.iv-narrative-mock {
    border-left-color: #5eead4;
    background: #f0fdfa;
}
.iv-narrative-icon {
    color: var(--gold, #d97706);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.iv-narrative-text {
    font-size: 0.87rem;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

/* ── Probable probe questions ───────────────────────────────────────────────── */
.iv-probe-block {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}
.iv-probe-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.iv-probe-sub {
    font-size: 0.8rem;
    color: #78350f;
    margin: 0 0 12px 0;
}
.iv-probe-list {
    margin: 0;
    padding-left: 18px;
}
.iv-probe-item {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 8px;
}
.iv-probe-item:last-child { margin-bottom: 0; }

/* ── Application Checker "run all" button ───────────────────────────────────── */
.sift-run-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: var(--coral);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.2s, transform 0.1s;
}
.sift-run-all-btn:hover  { background: #D4552F; }
.sift-run-all-btn:active { transform: scale(0.98); }
.sift-run-all-btn:disabled {
    background: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ── Attempts counter badge (sift/interview) ─────────────────────────────────  */
.ai-attempts-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 3px 10px;
    margin-top: 8px;
}
.ai-attempts-badge i { color: var(--indigo); }


/* =============================================================================
   v93.0 — APPLICATION CHECKER REDESIGN
   ============================================================================= */

/* ── Criterion toggle button ────────────────────────────────────────────────── */
.ac-criterion-toggle-wrap {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border, #e2e8f0);
}
.ac-criterion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--indigo);
    cursor: pointer;
    transition: color 0.15s;
}
.ac-criterion-toggle:hover { color: var(--navy); }
.ac-criterion-toggle-open  { color: var(--navy); }
.ac-criterion-toggle i     { font-size: 1rem; }

/* ── Eligibility requirements panel ─────────────────────────────────────────── */
.ac-elig-panel {
    background: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}
.ac-panel-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink, #1e293b);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ac-elig-overall {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.ac-elig-strong  { background: #dcfce7; color: #166534; }
.ac-elig-partial { background: #fef9c3; color: #854d0e; }
.ac-elig-weak    { background: #fee2e2; color: #991b1b; }

.ac-elig-list { display: flex; flex-direction: column; gap: 10px; }

.ac-elig-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
}
.ac-elig-met   { background: #f0fdf4; border: 1px solid #bbf7d0; }
.ac-elig-unmet { background: #fff1f2; border: 1px solid #fecdd3; }

.ac-elig-icon { flex-shrink: 0; margin-top: 1px; font-size: 1rem; }
.ac-elig-met   .ac-elig-icon { color: #16a34a; }
.ac-elig-unmet .ac-elig-icon { color: #dc2626; }

.ac-elig-body { display: flex; flex-direction: column; gap: 3px; }
.ac-elig-req  { font-weight: 600; color: #1e293b; line-height: 1.4; }
.ac-elig-note { font-size: 0.78rem; color: #475569; font-style: italic; }

/* ── Secondary competency matches (no-criterion flow) ───────────────────────── */
.ac-secondary-section {
    margin-top: 16px;
}
.ac-secondary-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ac-secondary-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.ac-secondary-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.ac-secondary-toggle:hover { background: #f1f5f9; }
.ac-secondary-toggle-left  { display: flex; align-items: center; gap: 10px; flex: 1; }
.ac-secondary-comp         { font-size: 0.88rem; font-weight: 600; color: #1e293b; }
.ac-secondary-pct          { font-size: 0.85rem; font-weight: 700; }
.ac-secondary-toggle-label {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 6px;
}
.ac-secondary-chevron {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.ac-secondary-body {
    padding: 0 16px 16px 16px;
    border-top: 1px solid #e2e8f0;
}


/* =============================================================================
   DESKTOP ENHANCEMENT — v1.0 (June 2026)
   All rules scoped to @media (min-width: 1025px) unless noted as mobile base.
   ============================================================================= */

/* ── FIX 2: Profile Empty State ─────────────────────────────────────────────── */

.profile-empty-state {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.profile-empty-icon {
    font-size: 2.4rem;
    color: var(--color-primary);
    opacity: 0.7;
}

.profile-empty-title {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.profile-empty-body {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    max-width: 480px;
}

.profile-empty-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

.profile-empty-step {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ground);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
}

.profile-empty-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-empty-step-text {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.4;
}

.profile-empty-competencies {
    width: 100%;
    max-width: 560px;
}

.profile-empty-comp-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 10px;
}

.profile-empty-comp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.profile-empty-comp-chip {
    background: var(--ground);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 500;
}

/* ── MOBILE BASE STYLES (outside media query) ────────────────────────────────── */

.db-desktop-grid    { display: block; }
.landing-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 2; width: 100%; }
#scorecard-desktop-grid { display: block; }

/* ── PHASE 1: FOUNDATION ─────────────────────────────────────────────────────── */

@media (min-width: 1025px) {
    #app-container {
        /* max-width intentionally NOT set here — #app-container already gets
           its width from the sidebar-aware rule earlier in this file
           (margin-left: 220px; width/max-width: calc(100% - 220px)). This
           rule used to also set max-width: 960px, which — being later in
           the file — silently won the cascade and capped every feature
           page well short of the sidebar's edge, while #app-footer (which
           has no such cap) spanned the full width. That's what caused the
           compressed-content-vs-full-width-footer mismatch. */
        padding: 28px 36px 48px;
    }

    .header-container {
        text-align: left;
    }

    /* Keep centred on pages that shouldn't left-align */
    #landing-page .header-container,
    #activation-page .header-container,
    #feedback-page .header-container {
        text-align: center;
    }
}

/* Old "APPLICATION CHECKER SPLIT" (input col 1 / results col 2 once results
   exist) has been removed — #sift-content-container now stacks as a plain
   full-width column (see FEATURE PAGE BANNER). Kept removed here rather
   than left duplicated, to avoid two competing grid definitions for the
   same element. */

/* ── PHASE 2b: INTERVIEW PRACTICE — vertical stack ──────────────────────────── */
/* Side-by-side removed — question card sits above answer block on all screen sizes */

@media (min-width: 1025px) {
    #interview-content-container .iv-answer-textarea {
        min-height: 220px;
    }
}

/* ── PHASE 2c: VERBAL REASONING SPLIT ──────────────────────────────────────── */

/* ── PHASE 2c/d/e: TEST QUESTION SCREENS — vertical stack (passage above answers) */
/* Side-by-side removed — passage sits above statements/answers on all screen sizes */

@media (min-width: 1025px) {
    .vt-question-screen,
    .sjt-question-screen,
    .num-question-screen {
        max-width: 740px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── PHASE 2f: COMPETENCY PROFILE SPLIT ─────────────────────────────────────── */

@media (min-width: 1025px) {
    #gap-analysis-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        align-items: start;
    }

    #gap-analysis-container > .feature-banner {
        grid-column: 1 / -1;
        margin-bottom: 24px;
    }

    #insights-left-col {
        position: sticky;
        top: 24px;
        align-self: start;
    }

    #insights-right-col {
        /* scrolls normally */
    }

    .profile-empty-state {
        grid-column: 1 / -1;
    }

    .profile-empty-steps {
        flex-direction: row;
        gap: 16px;
    }

    .profile-empty-step {
        flex: 1;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ── PHASE 3a: DASHBOARD 2-COL ──────────────────────────────────────────────── */

.db-readiness-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-top: 16px;
    text-align: center;
}

.db-readiness-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.db-readiness-panel .db-readiness-pct {
    font-family: var(--font-head);
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
}

.db-readiness-panel .db-readiness-pct span {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-light);
}

.db-readiness-panel .db-readiness-status {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.db-readiness-bar-track {
    height: 6px;
    background: var(--ground);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

.db-readiness-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.4s ease;
}

.db-readiness-note {
    font-size: 0.78rem;
    color: var(--color-text-light);
}

@media (min-width: 1025px) {
    .db-desktop-grid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 20px;
        align-items: start;
    }

    .db-desktop-left,
    .db-desktop-right {
        min-width: 0;
    }
}

/* ── PHASE 3b: LANDING HERO ──────────────────────────────────────────────────── */

/* Tablet (768–1024px): single-column, everything centred, backdrop and
   mascot lineup widened to use the extra space over mobile. */
@media (min-width: 600px) and (max-width: 1024px) {
    .landing-hero {
        align-items: center;
        text-align: center;
    }

    .landing-hero-inner {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
    }

    .hero-text-backdrop {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .mig-wrap .mig-figure img {
        height: 160px;
    }
}

@media (min-width: 1025px) {
    .landing-hero-inner {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .hero-text-backdrop {
        max-width: 1000px;
        padding: 48px 56px 44px;
    }

    .hero-headline {
        font-size: clamp(2.4rem, 3.5vw, 3.8rem);
    }

    /* Mascots take up essentially the full width of the box here — the
       centrepiece the hero is actually built around */
    .mig-wrap {
        gap: 28px;
    }

    .mig-wrap .mig-figure img {
        height: 260px;
    }
}

/* ── PHASE 3c: SCORECARD 2-COL ──────────────────────────────────────────────── */

@media (min-width: 1025px) {
    #scorecard-desktop-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        align-items: start;
    }

    #scorecard-left-col {
        position: sticky;
        top: 24px;
        align-self: start;
    }
}

/* ── SIDEBAR LOGO ────────────────────────────────────────────────────────────── */

.sidebar-logo-img {
    display: block;
    width: 112px;
    height: 112px;
    max-width: 112px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

/* ── DASHBOARD ACCESS / UPGRADE PANEL ───────────────────────────────────────── */

.db-access-panel {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: white;
    margin-top: 16px;
    overflow: hidden;
}

.db-access-panel--active {
    border-color: #fbbf24;
    background: #fffbeb;
}

.db-access-active-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.db-access-crown {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff7ed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #d97706;
    font-size: 1.1rem;
    border: 1px solid #fde68a;
}

.db-access-info {
    flex: 1;
    min-width: 0;
}

.db-access-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--navy);
}

.db-access-expiry {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

.db-access-pill {
    background: #16a34a;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Free state — v10: a distinct navy/indigo gradient banner, not another
   white card. This is the one place on the dashboard that should look
   unmistakably like a premium upsell, not a fourth journey button. */
.db-access-panel--free {
    padding: 20px 20px 16px;
    background: linear-gradient(135deg, var(--navy) 0%, #1d3a6e 60%, var(--indigo) 100%);
    border: none;
    position: relative;
}

.db-access-free-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.db-access-free-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}
.db-access-free-title i { color: var(--gold-light); }

.db-access-free-price {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
}

.db-access-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-bottom: 18px;
}

.db-access-feature {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-access-feature i {
    color: var(--gold-light);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.db-access-key-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.db-access-key-input {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
}

.db-access-key-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 8px 14px;
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #64748b;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.db-access-key-btn.ready {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ── SIDEBAR: COLLAPSE REMOVAL CLEANUP ──────────────────────────────────────── */

/* Remove transition that was there for collapse animation */
@media (min-width: 1025px) {
    #app-container {
        transition: none;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    /* Lock badges: both history and profile */
    #snav-history-lock,
    #snav-profile-lock {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        font-size: 0.65rem;
        color: #94a3b8;
    }
}

/* ── LANDING SETUP CARD — DESKTOP CARD EXPANSION ────────────────────────────── */

@media (min-width: 1025px) {
    .landing-setup-card {
        max-width: 400px;
        border-radius: var(--r-lg);
        padding: 16px 18px 14px;
        box-shadow: 0 8px 32px rgba(15, 44, 89, 0.18), 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid var(--border);
    }

    .landing-setup-card::before {
        content: 'Choose your framework to begin';
        display: block;
        font-family: var(--font-head);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-light);
        margin-bottom: 10px;
    }

    .landing-setup-row {
        flex-direction: row;
        gap: 10px;
    }

    .landing-setup-label {
        font-size: 0.68rem;
    }

    .landing-setup-select {
        padding: 7px 30px 7px 10px;
        font-size: 0.82rem;
        background-color: var(--ground);
    }

    #btn-enter-app {
        margin-top: 12px !important;
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .landing-setup-footnote {
        font-size: 0.7rem;
        margin-top: 8px;
    }
}

/* ── DASHBOARD UPGRADE PANEL: PURCHASE BUTTON + DIVIDER ─────────────────────── */

.db-access-purchase-btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: var(--r-md);
    margin-bottom: 0;
    line-height: 1.4;
    transition: opacity 0.15s, transform 0.1s;
    cursor: pointer;
}

.db-access-purchase-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.db-access-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.db-access-btn-row .db-access-purchase-btn {
    flex: 1.3;
    min-width: 150px;
    margin-bottom: 0;
}

.db-access-more-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.28);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 16px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.db-access-more-btn:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.45);
}

.db-access-tertiary-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    color: rgba(255,255,255,0.68);
    border: 1.5px solid transparent;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.db-access-tertiary-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

.db-access-row-note {
    text-align: center;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.55);
    margin: 10px 0 0;
}

/* ── DASHBOARD CONTEXT STRIP — DESKTOP CARD EXPANSION ───────────────────────── */

@media (min-width: 1025px) {
    .db-context-strip {
        padding: 18px 22px;
        border-radius: 14px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(15,44,89,0.06);
    }

    .db-grade-chip {
        padding: 8px 16px;
        font-size: 0.9rem;
        border-radius: 10px;
        background: var(--ground);
        border: 1.5px solid var(--border);
    }

    .db-grade-chip:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
    }

    .db-fw-label {
        font-size: 0.85rem;
        font-weight: 500;
        color: #64748b;
    }
}

/* .db-access-purchase-btn padding/line-height/font-size are set once,
   in the canonical definition above — the duplicate override that used
   to live here has been folded in. */

.db-access-key-input,
.db-access-key-btn {
    height: 42px;
    box-sizing: border-box;
    line-height: 1;
}

.db-access-key-input {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── DASHBOARD GRID: SINGLE COLUMN FOR FREE USERS ───────────────────────────── */

@media (min-width: 1025px) {
    .db-desktop-grid--free {
        grid-template-columns: 1fr;
    }
}

/* ── INTERVIEW FREE USER — APPLICATION APPROACH STYLES ──────────────────────── */

.iv-free-footer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.iv-free-remaining-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f4ff;
    border: 1px solid #c7d7fd;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
}

.iv-free-nudge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.5;
    margin-top: 16px;
}

.iv-free-nudge a {
    color: var(--color-primary);
}

/* ── FREE GATE FEEDBACK WIDGET ──────────────────────────────────────────────── */

.gate-feedback {
    margin-top: 24px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
}

.gate-feedback-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
}

.gate-feedback-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 1.4rem;
    color: #d1d5db;
    cursor: pointer;
    margin-bottom: 12px;
}

.gate-feedback-stars i:hover,
.gate-feedback-stars i.fas { color: #fbbf24; }

.gate-feedback-form-${context} {
    display: none;
}

.gate-feedback-textarea {
    width: 100%;
    font-size: 0.85rem !important;
    margin-bottom: 8px;
    resize: vertical;
}

.gate-feedback-submit {
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 16px;
}

.gate-feedback-dismiss {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #94a3b8;
    cursor: pointer;
    text-decoration: underline;
}

.gate-feedback-dismiss:hover { color: #64748b; }

.gate-feedback-thanks {
    font-size: 0.88rem;
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   CC UI ENHANCEMENT PASS 1 — Visual / CSS layer only
   All new rules are additive. Existing selectors above are untouched.
   Sections:
     A. Journey card illustration panels
     B. Button fill-sweep interactions
     C. Sidebar nav micro-interaction
     D. Score ring SVG animation helpers
     E. Skeleton loader shimmer
     F. Glassmorphism Pro access panel
     G. Feedback / star rating form
     H. Scroll reveal
   ════════════════════════════════════════════════════════════════════════════ */


/* ── B. BUTTON FILL-SWEEP INTERACTIONS ──────────────────────────────────────
   Adds a subtle fill sweep to .btn-primary and lift to .btn-gold.
   Uses overflow:hidden + ::before on primary; does not touch layout.
   ─────────────────────────────────────────────────────────────────────────── */

/* btn-primary fill-sweep — background-position approach, no pseudo-elements,
   zero overflow risk regardless of element width or display type */
.btn-primary {
    background-image: linear-gradient(to right, var(--indigo) 50%, var(--color-primary, #0f2c59) 50%);
    background-size: 200% 100%;
    background-position: right center;
    transition: background-position 260ms cubic-bezier(0.4,0,0.2,1),
                box-shadow 160ms,
                transform 120ms;
}
.btn-primary:hover {
    background-position: left center;
    color: #fff;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--navy);
    transition: transform 140ms, box-shadow 180ms, background-color 180ms, opacity 0.15s;
}
.btn-gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(201,153,26,0.35) !important;
}
.btn-gold:disabled {
    background: var(--border-mid, #cbd5e1);
    color: var(--color-text-light);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Subtle border-left accent on btn-secondary hover */
.btn-secondary {
    transition: background 180ms, color 180ms, border-color 180ms, box-shadow 180ms;
}
.btn-secondary:hover {
    border-color: var(--indigo) !important;
    color: var(--indigo) !important;
}


/* sidebar-link micro-interaction — see canonical rules below */


/* ── D. SCORE RING SVG ANIMATION HELPERS ─────────────────────────────────────
   These classes support an SVG ring (Pass 2 will swap the HTML).
   Added now so the CSS is ready; existing border-based .score-ring still works.
   ─────────────────────────────────────────────────────────────────────────── */

.score-ring-svg-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-ring-svg-wrap svg {
    transform: rotate(-90deg);
}

.score-ring-track {
    fill: none;
    stroke: var(--border);
}

.score-ring-fill {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0; /* set by JS */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.4,0,0.2,1);
}

.score-ring-fill.rag-green  { stroke: #28a745; }
.score-ring-fill.rag-amber  { stroke: #f59e0b; }
.score-ring-fill.rag-red    { stroke: #dc3545; }
.score-ring-fill.rag-indigo { stroke: var(--indigo); }

.score-ring-inner-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.score-ring-pct {
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--navy);
}

.score-ring-unit {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-top: 2px;
}


/* ── E. SKELETON LOADER SHIMMER ──────────────────────────────────────────────
   Drop-in shimmer animation. Apply .skeleton to any placeholder element.
   Specific skeleton shapes (.skel-h, .skel-body etc.) added here;
   the containing .skel-card wrapper matches the product's card style.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes cc-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--border) 25%,
        #ebebeb 50%,
        var(--border) 75%
    );
    background-size: 600px 100%;
    animation: cc-shimmer 1.4s infinite linear;
    border-radius: 5px;
}

/* Skeleton shape utilities */
.skel-h        { height: 14px; width: 55%; }
.skel-h-sm     { height: 10px; width: 35%; }
.skel-body     { height: 10px; width: 90%; }
.skel-body-2   { height: 10px; width: 75%; }
.skel-body-3   { height: 10px; width: 60%; }
.skel-score    { height: 80px; width: 80px; border-radius: 50%; }
.skel-btn      { height: 38px; width: 140px; border-radius: 8px; }
.skel-tag      { height: 22px; width: 70px;  border-radius: 999px; }

/* AI result skeleton card — mirrors scorecard layout */
.skel-result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.skel-result-top {
    display: flex;
    gap: 16px;
    align-items: center;
}

.skel-result-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-tags-row {
    display: flex;
    gap: 6px;
}


/* ── F. GLASSMORPHISM PRO ACCESS PANEL ───────────────────────────────────────
   Upgrades .db-access-panel--active to the dark glass treatment.
   Text contrast is protected via high background opacity + text-shadow.
   ─────────────────────────────────────────────────────────────────────────── */

.db-access-panel--active {
    background:
        radial-gradient(ellipse at 85% 15%, rgba(201,153,26,0.22) 0%, transparent 55%),
        linear-gradient(135deg, var(--navy) 0%, #1a3660 100%) !important;
    border-color: rgba(201,153,26,0.35) !important;
    box-shadow: 0 8px 32px rgba(13,35,71,0.28);
    position: relative;
    overflow: hidden;
}

/* frosted inner card effect */
.db-access-active-row {
    background: rgba(8,20,48,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    margin: 12px;
    padding: 14px 16px;
}

/* text colours on dark background */
.db-access-panel--active .db-access-title  { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.db-access-panel--active .db-access-expiry { color: rgba(255,255,255,0.65); }

/* crown icon circle */
.db-access-panel--active .db-access-crown {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
    color: var(--gold-light);
}

/* Active pill */
.db-access-panel--active .db-access-pill {
    background: rgba(22,163,74,0.25);
    color: #6ee7b7;
    border: 1px solid rgba(22,163,74,0.3);
}


/* ── G. FEEDBACK / STAR RATING FORM ─────────────────────────────────────────
   Replaces the existing .gate-feedback FontAwesome star styles.
   The modal star rating in feature-testimonials.js gets the same treatment
   via .cc-star-strip (Pass 2 will update the JS template strings).
   ─────────────────────────────────────────────────────────────────────────── */

/* Shared star strip — used in both modal and gate widget */
.cc-star-strip {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 10px;
}

.cc-star {
    font-size: 1.75rem;
    color: var(--border-mid);
    cursor: pointer;
    line-height: 1;
    transition: color 110ms, transform 110ms;
    background: none;
    border: none;
    padding: 0;
    user-select: none;
}

.cc-star:hover        { transform: scale(1.15); }
.cc-star:active       { transform: scale(1.03); }
.cc-star.cc-star--lit { color: var(--gold); }

@keyframes cc-star-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.cc-star.cc-star--pop { animation: cc-star-pop 0.32s cubic-bezier(0.4,0,0.2,1); }

/* Rating caption that appears below stars */
.cc-star-caption {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    min-height: 1.2em;
    text-align: center;
    margin-bottom: 14px;
    transition: opacity 200ms;
}
.cc-star-caption.cc-hidden { opacity: 0; pointer-events: none; }

/* Chip row (quick-select tags) */
.cc-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
    justify-content: center;
}

.cc-chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.77rem;
    font-weight: 500;
    background: var(--ground);
    border: 1.5px solid var(--border);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background 140ms, border-color 140ms, color 140ms, transform 100ms;
    user-select: none;
}
.cc-chip:hover {
    background: var(--indigo-soft);
    border-color: var(--indigo);
    color: var(--indigo);
}
.cc-chip.cc-chip--selected {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
    font-weight: 600;
}
.cc-chip:active { transform: scale(0.95); }

/* Textarea with focus ring */
.cc-feedback-textarea {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    background: var(--ground);
    resize: vertical;
    min-height: 80px;
    transition: border-color 170ms, background 170ms, box-shadow 170ms;
    outline: none;
    line-height: 1.5;
}
.cc-feedback-textarea::placeholder { color: var(--border-mid); }
.cc-feedback-textarea:focus {
    border-color: var(--indigo);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(59,79,212,0.1);
}

/* Character counter */
.cc-char-count {
    font-size: 0.72rem;
    color: var(--border-mid);
    text-align: right;
    margin-top: 4px;
    margin-bottom: 12px;
    transition: color 200ms;
}
.cc-char-count.cc-warn { color: var(--amber, #C97B1B); }

/* Success state */
.cc-feedback-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px 0 8px;
}
.cc-feedback-success.cc-show { display: flex; }

.cc-feedback-success-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--green-soft, #E8F7F1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--green, #0F7B55);
    animation: cc-star-pop 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Gate widget upgrade: replace flat star hover with the new approach */
.gate-feedback-stars {
    gap: 6px;
}
.gate-feedback-stars i {
    transition: color 110ms, transform 110ms;
}
.gate-feedback-stars i:hover {
    transform: scale(1.18);
    color: var(--gold) !important;
}
.gate-feedback-stars i.fas {
    color: var(--gold) !important;
}


/* ── H. SCROLL REVEAL ────────────────────────────────────────────────────────
   Apply .cc-reveal to any element you want to fade up on scroll.
   JS (in app.js / app-shell.js, Pass 2) will add the IntersectionObserver.
   Stagger via sibling delay utilities .cc-reveal--d1 through --d4.
   ─────────────────────────────────────────────────────────────────────────── */

.cc-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity  0.45s cubic-bezier(0.4,0,0.2,1),
        transform 0.45s cubic-bezier(0.4,0,0.2,1);
}

.cc-reveal.cc-in-view {
    opacity: 1;
    transform: translateY(0);
}

.cc-reveal--d1 { transition-delay: 0.08s; }
.cc-reveal--d2 { transition-delay: 0.16s; }
.cc-reveal--d3 { transition-delay: 0.24s; }
.cc-reveal--d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .cc-reveal,
    .cc-reveal.cc-in-view {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .skeleton { animation: none; background: var(--border); }
    .cc-star-pop { animation: none; }
    .btn-primary::before { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   END ENHANCEMENT PASS 1
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   JOURNEY CARDS — CANONICAL BLOCK v10 (replaces all prior panel/image iterations)
   Single source of truth for all breakpoints.
   Mobile first → Tablet (600px) → Desktop (1024px)

   v10 changes:
   · Illustration panel replaced with mascot headshot avatar (existing asset,
     no new artwork) — Sarah/Trevor/Arthur, matching each module.
   · Hover/active state moves to the coral momentum accent instead of a flat
     indigo tint, so "progress" reads consistently across the app.
   · Radius bumped to --r-lg / --r-xl and shadows softened per the v10 scale.
   · Status colours reference the semantic tokens (--green/--amber) directly
     instead of repeating literal hex values.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── BASE (mobile, <600px) ───────────────────────────────────────────────── */

.journey-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
    color: var(--ink);
    font-family: inherit;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.journey-btn:hover {
    border-color: var(--coral);
    background: var(--coral-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md-new);
}

/* Mascot avatar panel — circular headshot on a soft neutral backdrop.
   The tint here is the mascot's OWN colour (matches their established
   headshot ring / action card), not a module-wide chrome colour — see
   the per-character rules below. */
.journey-btn .journey-btn-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin: 12px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ground);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-btn-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    pointer-events: none;
    transition: transform 220ms cubic-bezier(0.4,0,0.2,1);
}
.journey-btn[data-mascot="sarah"]  .journey-btn-illustration { color: var(--gold, #c9991a); }
.journey-btn[data-mascot="trevor"] .journey-btn-illustration { color: var(--green, #0f7b55); }
.journey-btn[data-mascot="arthur"] .journey-btn-illustration { color: var(--rust, #aa4600); }
.journey-btn[data-mascot="rachel"] .journey-btn-illustration { color: var(--plum, #6e0064); }

.journey-btn:hover .journey-btn-illustration {
    transform: scale(1.06);
}

/* Per-mascot backdrop tint — scoped to this avatar only, not button chrome */
.journey-btn[data-mascot="sarah"]  .journey-btn-icon { background: var(--gold-soft); }
.journey-btn[data-mascot="trevor"] .journey-btn-icon { background: var(--green-soft); }
.journey-btn[data-mascot="arthur"] .journey-btn-icon { background: var(--rust-soft); }
.journey-btn[data-mascot="rachel"] .journey-btn-icon { background: var(--plum-soft); }

/* Locked / premium-gated journey item — hover goes gold (matches the
   "gold = premium" rule) instead of coral, so it reads as "unlock this"
   rather than "next step in progress" */
.journey-btn--locked:hover {
    border-color: var(--gold);
    background: var(--gold-soft);
}
.journey-btn--locked .journey-btn-status {
    color: var(--gold);
    font-weight: 600;
}
.journey-btn--locked .journey-btn-lock-icon {
    color: var(--gold);
    font-size: 0.75rem;
    margin-right: 4px;
}
.journey-btn--locked:hover .journey-btn-arrow {
    color: var(--gold);
}

/* Text block */
.journey-btn-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 12px 12px 0;
    overflow: hidden;
}

.journey-btn-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-light, #64748b);
    line-height: 1;
}

.journey-btn-title {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.journey-btn-status {
    font-size: 0.7rem;
    color: var(--color-text-light, #64748b);
    line-height: 1.3;
}

/* Description — hidden on mobile and tablet, shown only on desktop */
.journey-btn-desc  { display: none; }
.journey-btn-pills { display: none; }
.journey-btn-pill  { display: none; }

/* Arrow */
.journey-btn-arrow,
.journey-btn i.journey-btn-arrow,
.journey-btn .fa-chevron-right.journey-btn-arrow {
    flex-shrink: 0;
    flex-grow: 0;
    width: 28px;
    text-align: center;
    color: var(--color-text-light, #94a3b8);
    font-size: 0.75rem;
    padding-right: 4px;
    align-self: center;
    transition: color 180ms, transform 180ms;
}

.journey-btn:hover .journey-btn-arrow,
.journey-btn:hover i.journey-btn-arrow,
.journey-btn:hover .fa-chevron-right.journey-btn-arrow {
    color: var(--coral);
    transform: translateX(2px);
}

/* Status dot */
.journey-btn-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
    margin-right: 4px;
}

/* State variants — reference semantic tokens, not repeated hex */
.journey-btn.jb-done    { border-left: 3px solid var(--green); background: var(--green-soft); }
.journey-btn.jb-started { border-left: 3px solid var(--amber); }

.journey-btn.jb-done .journey-btn-label { color: var(--green); }
.journey-btn-status-dot.dot-done    { background: var(--green); }
.journey-btn-status-dot.dot-started { background: var(--amber); box-shadow: 0 0 0 3px rgba(201,123,27,0.15); }
.journey-btn-status-dot.dot-none    { background: var(--border-mid); }

/* Suppress any residual decorative accent element inside icon zones
   (the icon itself — .journey-btn-illustration — is intentional and shown) */
.journey-btn .journey-btn-icon .jcard-accent { display: none; }

/* Suppress all ::before/::after panel pseudo-elements */
.journey-btn .journey-btn-icon::before,
.journey-btn .journey-btn-icon::after { display: none; }


/* ── TABLET (600px–1023px): vertical stack, wider image panel ────────────── */

@media (min-width: 600px) and (max-width: 1023px) {
    .recruitment-journey-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .journey-btn {
        flex: none;
        width: 100%;
        min-height: 100px;
    }

    .journey-btn .journey-btn-icon {
        width: 76px;
        height: 76px;
        margin: 14px;
    }

    .journey-btn-text {
        padding: 14px 14px 14px 0;
    }

    .journey-btn-title {
        font-size: 0.95rem;
        white-space: normal;
    }

    .journey-btn-status {
        white-space: normal;
        font-size: 0.75rem;
    }
}


/* ── DESKTOP (≥1024px): vertical stack, enlarged image, rich content ──────── */

@media (min-width: 1024px) {
    .recruitment-journey-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .journey-btn {
        flex: none;
        width: 100%;
        min-height: 120px;
        border-radius: var(--r-xl);
    }

    /* Larger circular avatar, still contained not cropped */
    .journey-btn .journey-btn-icon {
        width: 88px;
        height: 88px;
        margin: 16px;
    }

    /* More breathing room in text zone */
    .journey-btn-text {
        padding: 18px 18px 18px 0;
        gap: 3px;
    }

    .journey-btn-label {
        font-size: 0.68rem;
        margin-bottom: 2px;
    }

    .journey-btn-title {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .journey-btn-status {
        white-space: normal;
        font-size: 0.72rem;
    }

    /* Rich content revealed only on desktop — full paragraph, no clamp */
    .journey-btn-desc {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
        font-size: 0.78rem;
        color: var(--color-text-light, #64748b);
        line-height: 1.5;
        margin-top: 5px;
        max-width: 420px;
    }

    .journey-btn-pills {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin-top: 7px;
    }

    .journey-btn-pill {
        display: inline-block;
        font-size: 0.63rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: var(--r-full, 999px);
        background: var(--coral-soft);
        color: var(--coral);
        letter-spacing: 0.02em;
        border: 1px solid rgba(232,98,61,0.15);
    }

    /* Arrow anchored to right with proper vertical centering */
    .journey-btn-arrow,
    .journey-btn i.journey-btn-arrow,
    .journey-btn .fa-chevron-right.journey-btn-arrow {
        padding-right: 18px;
        width: 36px;
        font-size: 0.85rem;
    }

    /* Status dot slightly larger */
    .journey-btn-status-dot {
        width: 10px;
        height: 10px;
        margin-right: 8px;
    }

    /* Done: accent ring around the mascot avatar */
    .journey-btn.jb-done .journey-btn-icon {
        box-shadow: 0 0 0 3px var(--green);
    }
}


/* ── FEATURE PAGE BANNER ──────────────────────────────────────────────────
   Full-width intro strip at the top of each module page: an icon badge
   in the module's colour plus a short speech-bubble-style intro. No mascot
   art, no sticky side column — just a compact banner, so the page reads as
   typography and colour rather than a character illustration. Content
   below (.companion-main-col) is a plain full-width column at every
   breakpoint.
   ───────────────────────────────────────────────────────────────────────── */

.feature-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .feature-banner { gap: 18px; }
}

.feature-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--ground);
}
.feature-banner[data-mascot="sarah"]  .feature-banner-icon { background: var(--gold-soft); color: var(--gold, #c9991a); }
.feature-banner[data-mascot="trevor"] .feature-banner-icon { background: var(--green-soft); color: var(--green, #0f7b55); }
.feature-banner[data-mascot="arthur"] .feature-banner-icon { background: var(--rust-soft); color: var(--rust, #aa4600); }
.feature-banner[data-mascot="rachel"] .feature-banner-icon { background: var(--plum-soft); color: var(--plum, #6e0064); }

@media (min-width: 768px) {
    .feature-banner-icon { width: 56px; height: 56px; font-size: 1.4rem; }
}

.feature-banner-body {
    flex: 1;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.feature-banner-eyebrow {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo, #3B4FD4);
}

.feature-banner-title {
    font-family: var(--font-head, 'Bricolage Grotesque', sans-serif);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--navy, #0D2347);
    line-height: 1.2;
}

.feature-banner-sub {
    font-size: 0.8rem;
    color: var(--color-text-light, #64748b);
    line-height: 1.55;
    max-width: 500px;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   END CANONICAL JOURNEY CARD BLOCK
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR NAV MICRO-INTERACTION — CANONICAL
   Uses box-shadow inset for the left accent so border: none is preserved
   and no layout shift or overflow can occur.
   ════════════════════════════════════════════════════════════════════════════ */

.sidebar-link {
    transition: background 150ms, color 150ms, box-shadow 150ms;
}

.sidebar-link:hover {
    background: var(--ground);
    color: var(--navy);
    box-shadow: inset 3px 0 0 rgba(59,79,212,0.2);
}

.sidebar-link.active {
    background: var(--indigo-soft);
    color: var(--indigo);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--indigo);
}

.sidebar-link.active i { color: var(--indigo); }
.sidebar-link:hover i  { color: var(--navy); }

/* ════════════════════════════════════════════════════════════════════════════
   END SIDEBAR NAV MICRO-INTERACTION
   ════════════════════════════════════════════════════════════════════════════ */

/* ── DISCOUNT CODE COPY COMPONENT ───────────────────────────────────────────── */
.cc-discount-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 14px 0 4px;
    font-size: 0.85rem;
}
.cc-discount-badge .cc-discount-label {
    color: inherit;
    opacity: 0.85;
    white-space: nowrap;
}
.cc-discount-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 5px 10px 5px 12px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Light version (used inside dark modals/cards) */
.cc-discount-code-pill--light {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
/* Dark version (used on white/light backgrounds) */
.cc-discount-code-pill--dark {
    background: #f0fdf4;
    border: 1.5px dashed #16a34a;
    color: #166534;
}
.cc-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1.5px dashed currentColor;
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-body, inherit);
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.cc-copy-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.12);
}
.cc-copy-btn--dark {
    color: #16a34a;
}
.cc-copy-btn--dark:hover {
    background: rgba(22,163,74,0.08);
}
.cc-copy-btn.cc-copied {
    opacity: 1;
    border-style: solid;
}
/* ── END DISCOUNT CODE COPY COMPONENT ───────────────────────────────────────── */

/* ── SOCIAL-GATED DISCOUNT BADGE ─────────────────────────────────────────────── */
.cc-discount-badge--locked {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #fcd34d;
    border-radius: var(--r-lg, 12px);
    padding: 16px 18px;
    margin: 0 0 20px;
    font-size: 0.85rem;
}
.cc-discount-badge--locked .cc-discount-label {
    white-space: normal;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 700;
    color: #92400e;
    opacity: 1;
}
.cc-social-unlock-row.social-links {
    margin: 2px 0 0;
}
.cc-social-unlock-row.social-links a {
    border-color: rgba(146,64,14,0.3);
    color: #92400e;
    background: rgba(255,255,255,0.6);
}
.cc-social-unlock-row.social-links a:hover {
    color: #fff;
    background: #92400e;
    border-color: #92400e;
}
.cc-social-unlock-status {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.78rem;
    color: #92400e;
    opacity: 0.85;
    text-align: center;
}
.cc-discount-badge--locked.is-waiting .cc-social-unlock-row {
    opacity: 0.45;
    pointer-events: none;
}
.cc-discount-badge--locked.is-waiting .cc-social-unlock-status {
    display: flex;
}
/* ── END SOCIAL-GATED DISCOUNT BADGE ─────────────────────────────────────────── */

/* ── BLOG PRODUCT CTA (3-card comparison + preview modals) ──────────────────── */
.pcta-section { margin-top: 50px; }
.pcta-section h2 { font-family: var(--font-head, 'Bricolage Grotesque', sans-serif); font-size: 20px; color: var(--navy); text-align: center; margin: 0 0 4px; }
.pcta-section p.pcta-lead { text-align: center; color: #5A6472; font-size: 13.5px; margin: 0 0 24px; }
.pcta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .pcta-grid { grid-template-columns: 1fr; } }

.pcta-card { border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-align: center; background: #fff; box-shadow: 0 1px 3px rgba(13,35,71,0.08); }
.pcta-card .pcta-card-img { width: 100%; aspect-ratio: 900/636; object-fit: cover; display: block; border-bottom: 3px solid var(--accent); }
.pcta-card .pcta-card-body { padding: 16px 16px 20px; flex: 1; display: flex; flex-direction: column; }
.pcta-card h3 { font-family: var(--font-head, 'Bricolage Grotesque', sans-serif); font-size: 15px; margin: 0 0 6px; color: var(--accent-dark); }
.pcta-card p.pcta-diff { font-size: 12.5px; color: #5A6472; line-height: 1.5; margin: 0 0 16px; min-height: 55px; }
.pcta-card .pcta-btn-pill { text-decoration: none; display: inline-block; padding: 11px 20px; background: var(--accent); color: #fff; border-radius: 50px; font-weight: 700; font-size: 13px; }
.pcta-card.pcta-website { --accent: #0D2347; --accent-dark: #0D2347; }
.pcta-card.pcta-pdf { --accent: #AA4600; --accent-dark: #AA4600; }
.pcta-card.pcta-testpack { --accent: #0F7B55; --accent-dark: #0F7B55; }
.pcta-card .pcta-find-out-more { background: none; border: none; color: var(--accent-dark); font-size: 12px; text-decoration: underline; cursor: pointer; margin-top: 10px; font-family: inherit; }

/* Mid-article contextual snippet */
.pcta-inline { background: #EEF1F7; border-left: 4px solid #D4AF37; border-radius: 8px; padding: 14px 16px; margin: 22px 0; font-size: 14px; line-height: 1.6; color: #1B2430; }
.pcta-inline a { color: var(--navy); font-weight: 700; }

/* Preview modal */
.pcta-modal-overlay { position: fixed; inset: 0; background: rgba(13,35,71,0.6); display: none; align-items: center; justify-content: center; z-index: 999; padding: 20px; }
.pcta-modal-overlay.pcta-open { display: flex; }
.pcta-modal-box { background: #fff; border-radius: 14px; max-width: 420px; width: 100%; overflow: hidden; max-height: 92vh; display: flex; flex-direction: column; }
.pcta-modal-scroll { overflow-y: auto; }
.pcta-modal-body { padding: 18px 22px 24px; }
.pcta-modal-body h3 { font-family: var(--font-head, 'Bricolage Grotesque', sans-serif); color: #1B2430; font-size: 17px; margin: 0 0 10px; }
.pcta-modal-body ul { padding-left: 18px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; color: #1B2430; }
.pcta-modal-buy-btn { text-decoration: none; display: block; text-align: center; padding: 13px; border-radius: 50px; font-weight: 800; font-size: 14px; color: #fff; }
.pcta-modal-close { position: absolute; top: 14px; right: 16px; background: rgba(0,0,0,0.45); color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; z-index: 2; }
.pcta-modal-img-wrap { position: relative; }

/* Preview carousel */
.pcta-carousel { position: relative; }
.pcta-car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.pcta-car-track::-webkit-scrollbar { display: none; }
.pcta-car-slide { flex: 0 0 100%; scroll-snap-align: start; }
.pcta-car-slide img { width: 100%; display: block; aspect-ratio: 900/636; object-fit: cover; }
.pcta-car-caption { margin: 0; padding: 10px 16px; font-size: 12.5px; color: #5A6472; text-align: center; background: #F7F8FB; }
.pcta-car-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
.pcta-car-dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: #D8DEE8; padding: 0; cursor: pointer; }
.pcta-car-dot.pcta-active { background: var(--accent, var(--navy)); }
/* ── END BLOG PRODUCT CTA ─────────────────────────────────────────────────── */

/* ── RESOURCES PAGE (premium downloadable extras) ────────────────────────────── */
.resource-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.resource-card .resource-icon {
    width: 48px; height: 48px; border-radius: 50%; background: var(--ground);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.resource-card .resource-icon i { font-size: 1.3rem; color: var(--gold, #C9991A); }
.resource-card .resource-text { flex: 1; min-width: 180px; }
.resource-card .resource-text strong { display: block; margin-bottom: 3px; font-size: 1rem; }
.resource-card .resource-text span { color: var(--color-text-light); font-size: 0.88rem; line-height: 1.5; }
.resource-inline-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px;
    background: var(--ground); border-radius: 10px; font-size: 0.85rem; color: var(--ink, #0B1120);
    text-decoration: none; border: 1px solid var(--border);
}
.resource-inline-link i { color: var(--gold, #C9991A); }
.resource-inline-link:hover { border-color: var(--gold, #C9991A); }

/* Compact resource teaser card — used on the Interview/Tests setup screens to
   point at the matching download without duplicating the full Resources-page
   card. Same visual language as .resource-card (icon circle, title, blurb)
   but condensed to a single row so it sits comfortably inside a setup flow. */
.resource-teaser-card {
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--r-lg, 16px);
    padding: 14px 16px; margin: 4px 0 20px; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.resource-teaser-card:hover {
    box-shadow: var(--shadow-sm-new, 0 2px 8px rgba(11,17,32,0.08));
    transform: translateY(-1px);
    border-color: var(--gold, #C9991A);
}
.resource-teaser-icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: var(--gold-soft, #FDF5DC); display: flex; align-items: center; justify-content: center;
}
.resource-teaser-icon i { font-size: 1.1rem; color: var(--gold, #C9991A); }
.resource-teaser-text { flex: 1; min-width: 0; }
.resource-teaser-text strong { display: block; font-size: 0.92rem; color: var(--ink, #0B1120); margin-bottom: 2px; }
.resource-teaser-text span { display: block; font-size: 0.8rem; color: var(--color-text-light, #64748B); line-height: 1.4; }
.resource-teaser-card .resource-teaser-arrow { flex: 0 0 auto; color: var(--color-text-light, #64748B); font-size: 0.85rem; }
@media (max-width: 480px) {
    .resource-teaser-text span { display: none; }
}
.resources-locked {
    background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 40px 24px; text-align: center;
}
.resources-locked .resource-icon { width: 60px; height: 60px; margin: 0 auto 18px; }
.resources-locked .resource-icon i { font-size: 1.6rem; }
.resources-locked h3 { margin: 0 0 10px; font-size: 1.2rem; }
.resources-locked p { color: var(--color-text-light); font-size: 0.92rem; margin: 0 0 22px; line-height: 1.55; }
/* ── END RESOURCES PAGE ───────────────────────────────────────────────────────── */