/* ============================================================
   MCDM Decision Support System — Dash UI (Inverted-U Layout)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --bg-main: #EEF2F7;
    --bg-sidebar: #0B1929;
    --sidebar-text: #C8D6E5;
    --sidebar-text-bright: #FFFFFF;
    --sidebar-border: rgba(255,255,255,0.08);
    --sidebar-accent: #3B82F6;
    --card-bg: rgba(255,255,255,0.82);
    --card-bg-solid: #FFFFFF;
    --glass-blur: blur(16px);
    --glass-border: rgba(255,255,255,0.45);
    --text-main: #111827;
    --text-muted: #4B5563;
    --text-light: #6B7280;
    --border: #E5E7EB;
    --border-strong: #D1D5DB;
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-soft: #EFF6FF;
    --accent-glow: rgba(59,130,246,0.18);
    --success-bg: #ECFDF5; --success-text: #065F46;
    --warn-bg: #FFFBEB; --warn-text: #92400E;
    --danger-bg: #FEF2F2; --danger-text: #991B1B;
    /* 5-step wizard colors (calm, matte) */
    --step1-bg: #EEF2FF; --step1-border: #818CF8; --step1-text: #4338CA;
    --step2-bg: #ECFDF5; --step2-border: #34D399; --step2-text: #065F46;
    --step3-bg: #FFFBEB; --step3-border: #F59E0B; --step3-text: #92400E;
    --step4-bg: #EFF6FF; --step4-border: #3B82F6; --step4-text: #1E40AF;
    --step5-bg: #FFF1F2; --step5-border: #FB7185; --step5-text: #9F1239;
    /* Standard font sizes — BUL-06 fix: minimum 12px for readability */
    --fs-title: 0.95rem;
    --fs-body: 0.875rem;
    --fs-small: 0.8rem;
    --fs-tiny: 0.75rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --banner-h: 56px;
    --sidebar-w: 240px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    background: radial-gradient(ellipse at 0% 0%, rgba(59,130,246,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 100% 100%, rgba(99,102,241,0.04) 0%, transparent 50%),
                linear-gradient(180deg, #F8FAFC 0%, var(--bg-main) 100%);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ─── FIXED BANNER ───────────────────────────────── */
.global-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--banner-h);
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    color: #F1F5F9;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid rgba(59,130,246,0.25);
    box-shadow: var(--shadow-xl), 0 0 60px -10px rgba(59,130,246,0.12);
}
.global-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(99,102,241,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.banner-left, .banner-right { position: relative; z-index: 1; }
.banner-left { display: flex; flex-direction: column; gap: 2px; flex: 1; }

/* ── DecisionMind Brand ── */
.banner-brand { display: flex; align-items: center; gap: 0; margin-bottom: 3px; }
.brand-decide { font-size: 1.15rem; font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; }
.brand-core { font-size: 1.15rem; font-weight: 800; color: #93C5FD; letter-spacing: -0.02em; }
.brand-dot {
    display: inline-block; width: 9px; height: 9px;
    background: #F59E0B; border-radius: 50%; margin-left: 4px;
    box-shadow: 0 0 8px rgba(245,158,11,0.5), 0 0 20px rgba(245,158,11,0.15);
    flex-shrink: 0;
}

.banner-tagline { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(148,163,184,0.6); }
.banner-professor { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; color: rgba(203,213,225,0.85); }
.banner-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; justify-content: center; }
.banner-dedication { font-size: 0.68rem; font-style: italic; color: rgba(214,224,238,0.5); }
.banner-subtitle { font-size: 0.7rem; font-weight: 600; color: rgba(220,229,242,0.7); letter-spacing: 0.03em; }

/* ─── PAGE LAYOUT ────────────────────────────────── */
.page-wrapper { display: flex; margin-top: var(--banner-h); min-height: calc(100vh - var(--banner-h)); }

/* ─── SIDEBAR ────────────────────────────────────── */
.sidebar {
    position: fixed; top: var(--banner-h); left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-sidebar); color: var(--sidebar-text);
    overflow-y: auto; overflow-x: hidden;
    padding: 0.8rem 0.6rem 1.5rem; z-index: 900;
    border-right: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.sidebar h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sidebar-text-bright); margin: 0.6rem 0 0.4rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--sidebar-border); }
.sidebar-divider { border: none; border-top: 1px solid var(--sidebar-border); margin: 0.6rem 0; }
.sidebar-footer { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--sidebar-border); font-size: 0.65rem; color: rgba(148,163,184,0.7); line-height: 1.4; text-align: center; }
.sidebar-footer a { color: #60A5FA; text-decoration: none; display: block; margin-top: 2px; }

/* ── Auth0 Login Section ── */
.sidebar-auth { margin-bottom: 0.3rem; }
.btn-auth-login {
    width: 100%; padding: 0.55rem 0.8rem;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff; border: none; border-radius: var(--radius-sm);
    font-size: var(--fs-small); font-weight: 700; cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.btn-auth-login:hover { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); transform: translateY(-1px); }
.auth-user-info {
    display: flex; align-items: center; gap: 8px;
    padding: 0.4rem 0; margin-bottom: 0.3rem;
}
.auth-avatar { font-size: 1.5rem; flex-shrink: 0; }
.auth-username { font-size: var(--fs-small); font-weight: 700; color: var(--sidebar-text-bright); line-height: 1.2; }
.auth-email { font-size: var(--fs-tiny); color: rgba(148,163,184,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.auth-plan-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0.2rem 0.6rem; border-radius: 12px;
    font-size: var(--fs-tiny); font-weight: 700;
    margin-bottom: 0.4rem;
}
.auth-plan-badge .plan-label { letter-spacing: 0.03em; }
.auth-plan-badge.plan-free { background: rgba(148,163,184,0.15); color: #94A3B8; }
.auth-plan-badge.plan-pro { background: rgba(245,158,11,0.2); color: #F59E0B; }
.auth-plan-badge.plan-enterprise { background: rgba(139,92,246,0.2); color: #A78BFA; }
.btn-auth-logout {
    width: 100%; padding: 0.3rem 0.5rem;
    font-size: var(--fs-tiny); font-weight: 600;
    background: transparent; border: 1px solid var(--sidebar-border);
    color: rgba(148,163,184,0.7); border-radius: var(--radius-sm);
    cursor: pointer; transition: all var(--transition);
}
.btn-auth-logout:hover { border-color: #EF4444; color: #EF4444; }

/* ── Sidebar auth section ── */
.sidebar-auth-section { margin-bottom: 0.4rem; }
.btn-auth-login {
    width: 100%; padding: 0.45rem 0.7rem;
    background: #334155; color: #F1F5F9;
    border: none; border-radius: var(--radius-sm);
    font-size: var(--fs-small); font-weight: 700; cursor: pointer;
    transition: all var(--transition);
}
.btn-auth-login:hover { background: #1E293B; transform: translateY(-1px); }
.auth-user-row { display: flex; align-items: center; gap: 6px; margin-bottom: 0.2rem; }
.auth-avatar-sm { font-size: 1.1rem; flex-shrink: 0; }
.auth-username-sm { font-size: var(--fs-small); font-weight: 700; color: var(--sidebar-text-bright); line-height: 1.2; }
.auth-email-sm { font-size: 0.65rem; color: rgba(148,163,184,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.auth-plan-badge-sm {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px;
    font-size: 0.65rem; font-weight: 700; margin-bottom: 0.2rem;
    background: rgba(148,163,184,0.15); color: #94A3B8;
}
.session-info { font-size: 0.63rem; color: rgba(148,163,184,0.6); margin-bottom: 0.2rem; }
.btn-auth-logout-sm {
    width: 100%; padding: 0.2rem 0.4rem;
    font-size: 0.65rem; font-weight: 600;
    background: transparent; border: 1px solid var(--sidebar-border);
    color: rgba(148,163,184,0.6); border-radius: var(--radius-sm);
    cursor: pointer; transition: all var(--transition);
}
.btn-auth-logout-sm:hover { border-color: #EF4444; color: #EF4444; }

/* ── Sidebar profile ── */
.sidebar-profile summary { list-style: none; }
.sidebar-profile summary::-webkit-details-marker { display: none; }
.sidebar-radio label { display: block !important; padding: 0.15rem 0; color: var(--sidebar-text); font-size: 0.7rem; }
.sidebar-radio input[type="radio"] { accent-color: var(--sidebar-accent); margin-right: 4px; }

/* ── Language switcher ── */
.lang-switcher { display: flex; gap: 3px; margin-bottom: 0.6rem; }
.lang-btn { flex: 1; padding: 0.3rem 0; border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); background: transparent; color: var(--sidebar-text); font-size: 0.7rem; font-weight: 600; cursor: pointer; transition: all var(--transition); text-align: center; }
.lang-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--sidebar-accent); }
.lang-btn.active { background: var(--sidebar-accent); color: #fff; border-color: var(--sidebar-accent); }

/* (old sidebar-weight styles removed — now using .sw-group / .sw-radio) */

/* ── Status badges ── */
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0.15rem 0.45rem; border-radius: 20px; font-size: 0.68rem; font-weight: 600; }
.status-badge.success { background: rgba(16,185,129,0.15); color: #34D399; }
.status-badge.pending { background: rgba(251,191,36,0.15); color: #FBBF24; }
.status-badge.info { background: rgba(59,130,246,0.15); color: #60A5FA; }

/* ── Status Checklist ── */
.status-checklist { display: flex; flex-direction: column; gap: 4px; }
.status-row {
    display: flex; align-items: center; gap: 6px;
    padding: 0.25rem 0.4rem; border-radius: 5px;
    font-size: 0.72rem; font-weight: 500;
    transition: background var(--transition);
}
/* BUL-07 fix: color + shape dual encoding for color-blind users */
.status-row.done { color: #047857; font-weight: 600; }
.status-row.pending { color: var(--text-light); }
.status-row.pending .status-icon { font-size: 0.6rem; }
.status-icon { flex-shrink: 0; width: 18px; text-align: center; }
.status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Step Tracker ── */
.stepper-wrap { display: flex; flex-direction: column; gap: 5px; margin: 0.4rem 0; }
.step-item { display: flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 500; color: var(--sidebar-text); }
.step-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.step-done { background: #34D399; box-shadow: 0 0 5px rgba(52,211,153,0.4); }
.step-active { background: #3B82F6; box-shadow: 0 0 5px var(--accent-glow); animation: pulse-dot 2s ease-in-out infinite; }
.step-pending { background: rgba(255,255,255,0.15); }
@keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* ─── BODY CONTENT ───────────────────────────────── */
.body-content {
    margin-left: var(--sidebar-w); flex: 1;
    padding: 1rem 1.5rem 2.5rem;
    min-height: calc(100vh - var(--banner-h));
    max-width: min(1080px, calc(100vw - var(--sidebar-w)));
}

/* ─── RANKING SECTION (family tabs + pill grid) ──── */
.ranking-section {
    position: sticky; top: 0; z-index: 900;
    margin-bottom: 1.2rem;
    background: linear-gradient(180deg, #1E293B 0%, #334155 50%, var(--bg-main) 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 4px 20px rgba(15,23,42,0.12);
    overflow: visible;
    padding: 0 0 0.8rem;
}

/* Family tabs — wrapping pill-style for many families */
.family-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 0.5rem 0.6rem;
    justify-content: center;
}
.fam-tab {
    flex: 0 1 auto; padding: 0.35rem 0.65rem;
    font-size: var(--fs-tiny); font-weight: 600;
    color: var(--text-muted); background: var(--card-bg-solid);
    border: 1px solid var(--border); border-radius: 16px;
    cursor: pointer; transition: all 0.2s ease;
    text-align: center; white-space: nowrap;
}
.fam-tab:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.fam-tab-active {
    color: #fff !important; background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 2px 6px rgba(29,78,216,0.2);
}

/* Pill grid */
.pill-grid { padding: 0.5rem 0.8rem 0; }
.pill-cluster { margin-bottom: 0.5rem; }
.pill-cluster-label {
    font-size: 0.66rem; font-weight: 700; color: rgba(148,163,184,0.6);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0 0.2rem 0.25rem; margin-bottom: 0.2rem;
}
.pill-checklist { display: flex; flex-wrap: wrap; gap: 5px; }
/* ── Pill search input ── */
.pill-search-input {
    width: 100%; padding: 0.45rem 0.8rem; margin-bottom: 0.5rem;
    font-size: var(--fs-body); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--card-bg-solid);
    outline: none; transition: border-color 0.2s;
}
.pill-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pill-search-input::placeholder { color: var(--text-light); font-size: var(--fs-small); }

/* ── Locked method pills (tier gating) ── */
.mopt-locked { opacity: 0.55; }
.pill-lock-icon { font-size: 0.6rem; margin-right: 2px; }
.pill-checklist label:has(.mopt-locked),
.pill-radio label:has(.mopt-locked) {
    background: #F8FAFC; border: 1px dashed #CBD5E1;
    cursor: not-allowed; opacity: 0.5; color: #94A3B8;
}
.pill-checklist label:has(.mopt-locked):hover,
.pill-radio label:has(.mopt-locked):hover {
    background: #FFFBEB; border-color: #92400E; opacity: 0.7;
}

/* Ranking pill checklist — soft tones, dark bg → white text when selected */
.pill-checklist label {
    display: inline-flex !important; align-items: center;
    padding: 0.3rem 0.7rem !important; border-radius: 20px;
    border: 1px solid var(--border);
    background: #FAFBFC; color: var(--text-main);
    cursor: pointer !important; transition: all 0.2s ease;
    position: relative;
}
.pill-checklist label:hover {
    border-color: #5B9A6A; background: #F0FDF4;
}
.pill-checklist input:checked + .mopt .mopt-name,
.pill-checklist label:has(input:checked) .mopt-name { color: #1E40AF; }
.pill-checklist label:has(input:checked) {
    background: #EFF6FF; border-color: #93C5FD; color: #1E40AF;
    box-shadow: 0 1px 4px rgba(59,130,246,0.15);
}
.pill-checklist input[type="checkbox"] { display: none; }

/* ─── SIDEBAR WEIGHT PILLS ───────────────────────── */
.sidebar-weight-pills {
    padding: 0.3rem; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm);
}
/* Weight pill radio — soft amber tones when selected */
.pill-radio { display: flex; flex-wrap: wrap; gap: 5px; }
.pill-radio label {
    display: inline-flex !important; align-items: center;
    padding: 0.3rem 0.65rem !important; border-radius: 20px;
    border: 1px solid var(--border);
    background: #FAFBFC; color: var(--text-main);
    cursor: pointer !important; transition: all 0.2s ease;
}
.pill-radio label:hover {
    border-color: #5B9A6A; background: #F0FDF4;
}
.pill-radio input:checked + .mopt .mopt-name,
.pill-radio label:has(input:checked) .mopt-name { color: #1E40AF; }
.pill-radio label:has(input:checked) {
    background: #EFF6FF; border-color: #93C5FD; color: #1E40AF;
    box-shadow: 0 1px 4px rgba(59,130,246,0.15);
}
.pill-radio input[type="radio"] { display: none; }

/* ─── METHOD OPTION (native title tooltip via ⓘ) ─── */
.mopt { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.mopt-name { font-size: var(--fs-small); font-weight: 600; color: inherit; white-space: nowrap; }
.mopt-help-wrap { position: relative; display: inline-flex; align-items: center; }
.mopt-help { font-size: 0.65rem; color: var(--text-light); cursor: help; opacity: 0.5; transition: all 0.15s; }
label:hover .mopt-help { opacity: 1; color: var(--accent); }

/* Tooltip — appears on hover next to ⓘ icon */
.mopt-tooltip {
    display: none; position: absolute; z-index: 200;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 320px; min-width: 180px;
    padding: 0.5rem 0.7rem;
    background: var(--card-bg-solid); border: 1px solid var(--border-strong);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    font-size: var(--fs-tiny); font-weight: 400; color: var(--text-main);
    line-height: 1.45; white-space: normal; text-align: left;
    pointer-events: none;
}
.mopt-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--border-strong);
}
.mopt-help-wrap:hover .mopt-tooltip { display: block; }
/* Ensure tooltip doesn't overflow viewport */
@media (max-width: 768px) {
    .mopt-tooltip { max-width: 220px; left: 0; transform: none; }
    .mopt-tooltip::after { left: 12px; }
}

.pill-checklist .mopt-name { color: var(--text-main); font-weight: 600; }
.pill-radio .mopt-name { color: var(--text-main); font-weight: 600; }
/* Selected state overrides — dark rose text on light mint bg */
.pill-checklist label:has(input:checked) .mopt-name { color: #9F1239 !important; }
.pill-radio label:has(input:checked) .mopt-name { color: #9F1239 !important; }
.pill-checklist label:has(input:checked) .mopt-help { color: rgba(159,18,57,0.5); }
.pill-radio label:has(input:checked) .mopt-help { color: rgba(159,18,57,0.5); }

/* ─── WELCOME CARD — premium dark slate ─── */
.welcome-card {
    text-align: center; padding: 2rem 2rem 1.4rem;
    margin-top: 2rem;
    max-width: 100%;
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 40%, #0F172A 100%);
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: var(--radius-lg);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.2),
        0 0 60px rgba(15,23,42,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);
    color: #E2E8F0;
    position: relative; overflow: hidden;
}
.welcome-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #D97706 0%, #F59E0B 30%, #FBBF24 50%, #F59E0B 70%, #D97706 100%);
}
.welcome-card::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(217,119,6,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(99,102,241,0.04) 0%, transparent 50%);
    pointer-events: none;
}
.welcome-card:hover { transform: none; }
.welcome-card > * { position: relative; z-index: 1; }

/* ── Hero frame — elegant glass on dark ── */
.hero-frame {
    max-width: 480px; margin: 0 auto 0.8rem;
    padding: 1.2rem 2rem 0.8rem;
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    text-align: center; position: relative;
}
.hero-frame::before {
    content: ''; position: absolute; inset: -1px; border-radius: 17px;
    background: linear-gradient(135deg, rgba(217,119,6,0.15) 0%, transparent 40%, transparent 60%, rgba(99,102,241,0.1) 100%);
    z-index: -1;
}
.hero-author {
    margin-top: 0.6rem; padding-top: 0.5rem;
    border-top: 1px solid rgba(148,163,184,0.15);
}
.hero-author-name {
    font-size: 0.88rem; font-weight: 400; color: #D97706;
    letter-spacing: 0.06em; font-style: italic;
    text-shadow: 0 1px 2px rgba(29,78,216,0.08);
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ── About frame — dark gradient with bold text ── */
.hero-about-frame {
    max-width: 520px; margin: 0 auto 1rem;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    border: 1px solid rgba(59,130,246,0.2);
    box-shadow: 0 8px 32px rgba(15,23,42,0.15), 0 0 40px rgba(59,130,246,0.06);
    position: relative; overflow: hidden;
}
.hero-about-frame::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.hero-about-text {
    font-size: var(--fs-body); line-height: 1.7;
    color: #CBD5E1; text-align: center; margin: 0;
    position: relative; z-index: 1;
    font-weight: 400; letter-spacing: 0.01em;
}

/* ── Hero stats grid ── */
.hero-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    max-width: 580px; margin: 0 auto 0.8rem;
}
@media (max-width: 640px) { .hero-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.hero-stat {
    text-align: center; padding: 0.6rem 0.3rem;
    background: rgba(255,255,255,0.04); border-radius: var(--radius-sm);
    border: 1px solid rgba(148,163,184,0.1);
}
.hero-stat-num {
    font-size: 1.6rem; font-weight: 800; color: #FBBF24;
    line-height: 1.1; letter-spacing: -0.03em;
}
.hero-stat-label {
    font-size: 0.7rem; font-weight: 700; color: #CBD5E1;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-top: 0.1rem;
}
.hero-stat-desc {
    font-size: 0.62rem; color: #64748B; line-height: 1.3;
    margin-top: 0.15rem;
}

/* ── Privacy note ── */
.privacy-note {
    font-size: 0.68rem; color: #64748B; text-align: center;
    padding: 0.4rem 0; margin-top: 0.3rem;
    border-top: 1px solid rgba(148,163,184,0.1);
    font-style: italic;
}

.welcome-hero { margin-bottom: 2rem; }
.welcome-brand { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 0.4rem; }
.wb-decide { font-size: 2.2rem; font-weight: 800; color: #F1F5F9; letter-spacing: -0.03em; }
.wb-core { font-size: 2.2rem; font-weight: 800; color: #FBBF24; letter-spacing: -0.03em; }
.wb-dot {
    display: inline-block; width: 10px; height: 10px;
    background: #F59E0B; border-radius: 50%; margin-left: 3px;
    box-shadow: 0 0 10px rgba(245,158,11,0.4);
    vertical-align: super;
}
.welcome-tagline-en { font-size: 0.78rem; font-weight: 600; color: rgba(148,163,184,0.7); letter-spacing: 0.06em; text-transform: uppercase; }
.welcome-motto { font-size: 0.88rem; font-weight: 500; font-style: italic; color: #94A3B8; letter-spacing: 0.02em; margin-top: 0.2rem; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.45; }

/* Workflow list */
.welcome-steps { margin: 1.5rem 0; }
.welcome-workflow {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-width: 400px; margin: 0 auto; text-align: left;
}
.wflow-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem; font-weight: 500; color: rgba(203,213,225,0.85);
    padding: 0.35rem 0;
}
.wflow-dot { color: #F59E0B; font-size: 0.6rem; flex-shrink: 0; }

/* Selected methods display */
.welcome-methods { margin: 1.2rem 0; max-width: 500px; margin-left: auto; margin-right: auto; }
.welcome-methods-list { display: flex; flex-direction: column; gap: 0.4rem; }
.wmethod-row {
    display: flex; align-items: center; gap: 8px;
    padding: 0.4rem 0.8rem; border-radius: 6px;
    font-size: 0.82rem; text-align: left;
}
.wmethod-row.done { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15); }
.wmethod-row.pending { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.wmethod-icon { flex-shrink: 0; width: 20px; text-align: center; }
.wmethod-label { color: rgba(148,163,184,0.8); }
.wmethod-row.done .wmethod-label { color: rgba(203,213,225,0.9); }
.wmethod-value { font-weight: 700; color: #60A5FA; }

/* Data upload collapsible panel */
.data-upload-panel {
    max-width: 580px; margin: 0.6rem auto 0.3rem;
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
.data-upload-trigger {
    display: flex; align-items: center; justify-content: center;
    padding: 0.6rem 1.2rem; cursor: pointer;
    font-size: var(--fs-body); font-weight: 700; color: #FBBF24;
    transition: all 0.2s;
    list-style: none;
    border-bottom: 1px solid transparent;
}
.data-upload-trigger::-webkit-details-marker { display: none; }
.data-upload-trigger:hover { background: rgba(251,191,36,0.08); border-bottom-color: rgba(251,191,36,0.3); }
.data-upload-trigger-text { font-size: var(--fs-body); }
.data-upload-arrow { font-size: 0.8rem; margin-left: 6px; transition: transform 0.2s; }
.data-upload-panel[open] .data-upload-arrow { transform: rotate(90deg); }
.data-upload-inner {
    padding: 0 1.5rem 1.2rem;
    border-top: 1px solid var(--border);
}
.upload-section { margin-top: 0.8rem; }

/* Data type selector — pill tabs + detail panel */
.dtype-selector-wrap {
    max-width: 600px; margin: 1.5rem auto 0; text-align: center;
}
.dtype-label {
    font-size: var(--fs-small); font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem;
}
.dtype-tabs {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
    margin-bottom: 0.6rem;
}
.dtype-tab {
    padding: 0.35rem 0.8rem; border-radius: 20px;
    border: 1px solid var(--border-strong); background: var(--card-bg-solid);
    font-size: var(--fs-small); font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: all 0.2s;
}
.dtype-tab:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dtype-tab-active {
    background: var(--accent) !important; color: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 2px 8px rgba(29,78,216,0.25);
}

/* Detail panel under selected tab */
.dtype-detail {
    max-width: 560px; margin: 0 auto; text-align: left;
    padding: 0.8rem 1rem; border-radius: var(--radius-md);
    background: var(--accent-soft); border: 1px solid rgba(29,78,216,0.12);
    margin-bottom: 1rem;
}
.dtype-detail-desc { font-size: var(--fs-body); margin-bottom: 0.4rem; color: var(--text-main); }
.dtype-detail-hint { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.4; }
.dtype-detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-sample-action {
    padding: 0.4rem 1rem; font-size: var(--fs-small); font-weight: 700;
    background: #334155; color: #F1F5F9; border: none; border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.2s;
}
.btn-sample-action:hover { background: #1E293B; transform: translateY(-1px); }
.btn-download-action {
    padding: 0.4rem 1rem; font-size: var(--fs-small); font-weight: 600;
    background: transparent; color: #334155; border: 1px dashed #94A3B8;
    border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
    text-decoration: none;
}
.btn-download-action:hover { background: #F1F5F9; border-color: #475569; }

.welcome-hint {
    font-size: var(--fs-small); color: var(--text-light);
    text-align: center; margin-bottom: 0.5rem; line-height: 1.4;
}
.upload-title {
    font-size: var(--fs-body); font-weight: 700; color: var(--text-main);
    text-align: center; margin-bottom: 0.4rem;
}

/* Remove old card grid styles (replaced by tabs) */
.datatype-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 0.6rem auto; max-width: 660px;
}
@media (max-width: 640px) { .datatype-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .datatype-grid { grid-template-columns: 1fr; } }

.datatype-card {
    position: relative; padding: 0.6rem 0.7rem;
    border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: all 0.2s; color: var(--text-main);
    background: var(--card-bg-solid);
}
.datatype-card:hover {
    border-color: rgba(59,130,246,0.4); box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.datatype-card-active {
    background: var(--accent-soft) !important; border-color: var(--accent) !important;
    box-shadow: 0 0 12px rgba(59,130,246,0.15);
}

.datatype-card-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.datatype-icon { font-size: 1.1rem; }
.datatype-title { font-weight: 700; font-size: 0.78rem; color: inherit; }
.datatype-desc { font-size: var(--fs-tiny); color: var(--text-light); line-height: 1.3; margin-bottom: 6px; min-height: 2.2em; }

/* Help hover tooltip — BUL-03 fix: also works via .tooltip-open for touch */
.datatype-help-icon {
    font-size: 0.78rem; color: var(--text-light); cursor: help;
    margin-left: auto; flex-shrink: 0;
}
.datatype-tooltip {
    display: none; position: absolute; z-index: 100;
    top: 100%; left: 0; right: 0; margin-top: 4px;
    background: var(--card-bg-solid); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 0.5rem 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.datatype-card:hover .datatype-tooltip,
.datatype-card.tooltip-open .datatype-tooltip { display: block; }
.datatype-tooltip-desc { font-size: var(--fs-small); color: var(--text-main); margin-bottom: 4px; }
.datatype-tooltip-compat { font-size: var(--fs-tiny); color: var(--accent); margin-bottom: 2px; }
.datatype-tooltip-example { font-size: var(--fs-tiny); color: var(--text-muted); }

/* Sample buttons per data type card */
.datatype-card-actions {
    display: flex; gap: 4px; margin-top: 4px;
}
.btn-sample-dtype {
    flex: 1; padding: 4px 8px;
    font-size: var(--fs-tiny); color: var(--text-muted); background: transparent;
    border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; transition: all 0.2s; text-align: center;
    text-decoration: none; display: inline-block; line-height: 1.4;
}
.btn-sample-dtype:hover {
    color: var(--accent); border-color: var(--accent);
    background: var(--accent-soft);
}
.btn-sample-dtype.btn-load { font-weight: 600; }
.btn-sample-dtype.btn-download { border-style: dashed; }

/* Upload area inside welcome */
.welcome-upload-area { max-width: 480px; margin: 1.5rem auto; }
.welcome-upload-label { font-size: var(--fs-body); font-weight: 600; color: var(--text-main); text-align: center; margin-bottom: 0.6rem; }
.upload-zone-dark { border-color: var(--border-strong) !important; background: rgba(255,255,255,0.6) !important; }
.upload-zone-dark:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.upload-zone-dark .upload-text { color: var(--text-muted); }
.upload-zone-dark .upload-hint { color: var(--text-light); }
.welcome-samples { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.6rem; }
.btn-sample { padding: 0.35rem 0.8rem; font-size: var(--fs-small); font-weight: 600; background: var(--card-bg-solid); border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.btn-sample:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.welcome-shape-info { font-size: 0.88rem; font-weight: 600; color: var(--success-text); text-align: center; margin-bottom: 0.6rem; }

/* Go button */
.welcome-actions { display: flex; gap: 0.6rem; justify-content: center; margin: 1rem 0; }
.btn-go-analysis { min-width: 260px; padding: 0.8rem 2rem !important; font-size: 1rem !important; background: #065F46; color: #ECFDF5; box-shadow: 0 2px 8px rgba(6,95,70,0.2); }
.btn-go-analysis:hover { background: #064E3B; box-shadow: 0 4px 16px rgba(6,95,70,0.3); transform: translateY(-2px); }

/* Wizard */
.wiz-mode-tabs { display: flex; gap: 4px; margin-bottom: 0.8rem; }
.wiz-mode-btn { flex: 1; padding: 0.45rem; font-size: 0.76rem; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg-solid); color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.wiz-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.wiz-mode-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.wiz-radio label { display: block !important; padding: 0.35rem 0.5rem !important; border-radius: 5px; cursor: pointer !important; transition: background 0.2s; }
.wiz-radio label:hover { background: var(--accent-soft); }
/* ── Wizard info/guidance boxes ── */
.wiz-info {
    font-size: var(--fs-small); line-height: 1.5; color: var(--text-light);
    padding: 0.35rem 0.7rem; margin: 0.2rem 0 0.5rem;
    background: rgba(0,0,0,0.02); border-left: 3px solid rgba(0,0,0,0.08);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wiz-step-1 .wiz-info { border-left-color: var(--step1-border); background: rgba(129,140,248,0.05); }
.wiz-step-2 .wiz-info { border-left-color: var(--step2-border); background: rgba(52,211,153,0.05); }
.wiz-step-3 .wiz-info { border-left-color: var(--step3-border); background: rgba(245,158,11,0.05); }
.wiz-step-4 .wiz-info { border-left-color: var(--step4-border); background: rgba(59,130,246,0.05); }
.wiz-step-5 .wiz-info { border-left-color: var(--step5-border); background: rgba(251,113,133,0.05); }

/* ── Method choice boxes (Top 10 vs Manuel) ── */
.method-choice-boxes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 500px) { .method-choice-boxes { grid-template-columns: 1fr; } }
.method-choice-box {
    padding: 0.8rem 1rem; border-radius: var(--radius-md);
    border: 2px solid var(--border); background: var(--card-bg-solid);
    cursor: pointer; transition: all 0.2s; text-align: left;
}
.method-choice-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.method-choice-smart { border-color: #D97706; }
.method-choice-smart:hover { background: #FFFBEB; border-color: #B45309; }
.method-choice-manual { border-color: #475569; }
.method-choice-manual:hover { background: #F1F5F9; border-color: #1E293B; }
.method-choice-title { font-size: var(--fs-body); font-weight: 800; color: var(--text-main); margin-bottom: 0.15rem; }
.method-choice-desc { font-size: 0.68rem; color: var(--text-light); line-height: 1.35; }

/* ── Top 10 method cards grid ── */
.top10-grid {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.top10-card {
    padding: 0.3rem 0.6rem; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card-bg-solid);
    cursor: pointer; transition: all 0.15s;
    font-size: var(--fs-small); font-weight: 600; color: var(--text-main);
    position: relative;
}
.top10-card:hover { border-color: #D97706; background: #FFFBEB; }
.top10-card.selected { background: #ECFDF5; border-color: #86EFAC; color: #9F1239; }
.top10-card .top10-rank {
    font-size: 0.6rem; font-weight: 800; color: #D97706; margin-right: 3px;
}

/* ── Method count badge ── */
.method-count-badge {
    font-size: 0.76rem; color: var(--text-light); font-weight: 500;
    padding: 0.3rem 0.6rem; margin-bottom: 0.4rem;
    background: rgba(30,41,59,0.03); border-radius: var(--radius-sm);
    border-left: 3px solid #64748B;
    line-height: 1.4;
}

/* ── Collapsible wizard steps (html.Details) ── */
details.glass-card { cursor: default; }
details.glass-card > summary.wiz-step-summary {
    cursor: pointer; list-style: none;
    font-size: var(--fs-title); font-weight: 700; color: var(--text-main);
    padding: 0.2rem 0; margin-bottom: 0.4rem;
    display: flex; align-items: center; gap: 6px;
    user-select: none;
}
details.glass-card > summary.wiz-step-summary::-webkit-details-marker { display: none; }
details.glass-card > summary.wiz-step-summary::before {
    content: '▸'; font-size: 0.8rem; color: var(--text-light);
    transition: transform 0.2s;
    flex-shrink: 0;
}
details.glass-card[open] > summary.wiz-step-summary::before { transform: rotate(90deg); }
details.glass-card:not([open]) {
    padding: 0.6rem 1.2rem;
    opacity: 0.85;
}
details.glass-card:not([open]):hover { opacity: 1; box-shadow: var(--shadow-md); }
/* Step-specific summary colors */
.wiz-step-1 > summary.wiz-step-summary { color: #312E81; }
.wiz-step-2 > summary.wiz-step-summary { color: #064E3B; }
.wiz-step-3 > summary.wiz-step-summary { color: #78350F; }
.wiz-step-4 > summary.wiz-step-summary { color: #1E3A5F; }
.wiz-step-5 > summary.wiz-step-summary { color: #831843; }

.diag-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.diag-card { background: var(--card-bg-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; text-align: center; transition: all 0.2s; }
.diag-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.diag-card-icon { font-size: 1.3rem; margin-bottom: 0.3rem; }
.diag-card-title { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.diag-card-value { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin-top: 0.2rem; }
.diag-card-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.66rem; font-weight: 600; margin-top: 0.3rem; }
.diag-ok { background: var(--success-bg); color: var(--success-text); }
.diag-warn { background: var(--warn-bg); color: var(--warn-text); }
.diag-card-highlight { border-left: 3px solid var(--accent); background: linear-gradient(135deg, var(--accent-soft) 0%, var(--card-bg-solid) 100%); }
.diag-card-rationale { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--border); }
.diag-card-rec { text-align: left; grid-column: 1 / -1; }
.diag-card-rec .diag-card-icon { float: left; margin-right: 0.5rem; }

/* Stats bar (now used as about-frame wrapper) */
.welcome-stats-bar { }

/* ─── GLASS CARD ─────────────────────────────────── */
.glass-card {
    background: var(--card-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    padding: 1rem 1.2rem; margin-bottom: 0.8rem; box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
/* BUL-23 fix: hover lift only on clickable cards */
.export-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.glass-card h2 { font-size: var(--fs-title); font-weight: 700; margin: 0 0 0.4rem; color: var(--text-main); letter-spacing: -0.01em; }
.glass-card h3 { font-size: var(--fs-title); font-weight: 700; margin: 0 0 0.4rem; color: var(--text-main); }
.glass-card p, .glass-card label, .glass-card span { font-size: var(--fs-body); }

/* ── Wizard step colors (strong contrast, dark text) ── */
.wiz-step-1 { background: #F8F9FF; border-left: 4px solid var(--step1-border); }
.wiz-step-1 h2, .wiz-step-1 h3 { color: #312E81; }
.wiz-step-1 label, .wiz-step-1 span, .wiz-step-1 p { color: #1E1B4B; }
.wiz-step-2 { background: #F7FDFB; border-left: 4px solid var(--step2-border); }
.wiz-step-2 h2, .wiz-step-2 h3 { color: #064E3B; }
.wiz-step-2 label, .wiz-step-2 span, .wiz-step-2 p { color: #064E3B; }
.wiz-step-3 { background: #FFFDF7; border-left: 4px solid var(--step3-border); }
.wiz-step-3 h2, .wiz-step-3 h3 { color: #78350F; }
.wiz-step-3 label, .wiz-step-3 span, .wiz-step-3 p { color: #451A03; }
.wiz-step-4 { background: #F8FAFF; border-left: 4px solid var(--step4-border); }
.wiz-step-4 h2, .wiz-step-4 h3 { color: #1E3A8A; }
.wiz-step-4 label, .wiz-step-4 span, .wiz-step-4 p { color: #172554; }
.wiz-step-5 { background: #FFF8F9; border-left: 4px solid var(--step5-border); }
.wiz-step-5 h2, .wiz-step-5 h3 { color: #881337; }
.wiz-step-5 label, .wiz-step-5 span, .wiz-step-5 p { color: #4C0519; }

/* ─── BUTTONS ────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 600;
    border-radius: var(--radius-sm); border: none; cursor: pointer;
    transition: all var(--transition); text-decoration: none;
}
.btn-primary { background: #1E293B; color: #F1F5F9; border: none; }
.btn-primary:hover { background: #0F172A; transform: translateY(-1px); }
.btn-secondary { background: var(--card-bg-solid); color: var(--text-main); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: #475569; color: #1E293B; }
.btn-success { background: #065F46; color: #ECFDF5; border: none; }
.btn-success:hover { background: #064E3B; }
.btn-danger { background: #7F1D1D; color: #FEF2F2; border: none; }
.btn-block { width: 100%; }

/* ─── UPLOAD ZONE ────────────────────────────────── */
.upload-zone {
    border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
    padding: 2rem; text-align: center; transition: all var(--transition);
    cursor: pointer; background: rgba(255,255,255,0.5);
}
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-glow); }
.upload-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.upload-text { font-size: 0.85rem; color: var(--text-muted); }
.upload-hint { font-size: 0.72rem; color: var(--text-light); margin-top: 0.3rem; }

/* ─── CRITERIA GRID ──────────────────────────────── */
.criteria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem; margin: 0.8rem 0; }
.criteria-card { background: var(--card-bg-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; transition: all var(--transition); }
.criteria-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* ── Criteria table (compact) ── */
.crit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: 0.3rem 0; }
.crit-table th { text-align: left; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.4rem; border-bottom: 2px solid var(--border); }
.crit-th-name { }
.crit-th-dir { text-align: center; }
.crit-row { border-bottom: 1px solid var(--border); transition: background 0.15s; }
.crit-row:hover { background: var(--accent-soft); }
.crit-col-name { font-weight: 600; font-size: var(--fs-small); padding: 0.25rem 0.4rem; color: var(--text-main); }
.crit-check label { margin: 0 !important; }
.crit-dir-pills { display: flex !important; gap: 4px; justify-content: center; }
.crit-dir-pills label {
    display: inline-flex !important; align-items: center;
    padding: 0.12rem 0.45rem !important; border-radius: 12px;
    font-size: 0.7rem !important; border: 1px solid var(--border);
    background: var(--card-bg-solid); cursor: pointer !important; transition: all 0.15s;
}
.crit-dir-pills label:hover { border-color: #5B9A6A; background: #F0FDF4; }
.crit-dir-pills label:has(input:checked) { background: #ECFDF5; color: #9F1239; border-color: #86EFAC; }

/* ─── KPI STRIP ──────────────────────────────────── */
.kpi-strip {
    display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.kpi-card {
    flex: 1; min-width: 100px; text-align: center;
    padding: 0.7rem 0.5rem;
    background: var(--card-bg-solid); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.kpi-value { font-size: var(--fs-title); font-weight: 800; color: var(--accent); line-height: 1.2; }
.kpi-value.kpi-sm { font-size: var(--fs-body); }
.kpi-label { font-size: var(--fs-tiny); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }

/* ─── RESULTS TAB BAR ────────────────────────────── */
.rtab-bar {
    display: flex; flex-wrap: wrap; gap: 2px;
    background: var(--card-bg-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 3px;
}
.rtab-btn {
    flex: 0 1 auto; min-width: 90px;
    padding: 0.5rem 0.7rem;
    font-size: var(--fs-small); font-weight: 600;
    color: var(--text-muted); background: transparent;
    border: 1px solid transparent; border-radius: 6px;
    cursor: pointer; transition: all var(--transition);
    text-align: center; white-space: nowrap;
}
.rtab-btn:hover { background: #F1F5F9; color: #1E293B; }
.tab-start-badge {
    font-size: 0.65rem; font-weight: 700; color: #10B981;
    animation: pulse-dot 2s ease-in-out infinite;
    margin-left: 2px;
}
.rtab-btn.rtab-active {
    background: #1E293B; color: #F1F5F9;
    box-shadow: inset 0 -2px 0 #0F172A;
    border-color: #1E293B;
}

/* ─── Sticky KPI strip ──────────────────────────────── */
.kpi-sticky {
    position: sticky; top: calc(var(--banner-h) + 4px); z-index: 40;
    background: var(--card-bg-solid); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: 0.4rem;
}

/* ─── Executive Summary card ────────────────────────── */
.results-summary { margin-bottom: 1rem; }
.summary-card {
    background: linear-gradient(135deg, #F0F4FF 0%, #FFFFFF 50%, #F8FAFC 100%);
    border: 1px solid rgba(29,78,216,0.12); padding: 1rem 1.4rem;
}
.summary-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.summary-title { font-size: 1.1rem; font-weight: 800; color: var(--text-main); margin: 0; }
.summary-verdict {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.3rem 0.9rem; border-radius: 20px;
    font-size: var(--fs-small); font-weight: 700;
}
.verdict-high { background: #ECFDF5; color: #065F46; }
.verdict-moderate { background: #FFFBEB; color: #92400E; }
.verdict-low { background: #FEF2F2; color: #991B1B; }
.summary-content { font-size: var(--fs-body); line-height: 1.65; color: var(--text-muted); }
.summary-next-steps {
    margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border);
}
.next-step-item {
    display: flex; align-items: center; gap: 8px;
    padding: 0.3rem 0; font-size: var(--fs-small); color: var(--text-muted);
}
.next-step-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800; flex-shrink: 0;
}

/* Why Not panel */
.why-not-panel { border-color: rgba(29,78,216,0.15); }
.why-not-panel[open] { border-color: var(--accent); }
.why-not-body { padding: 0.6rem 0; }
.why-section { margin-bottom: 0.3rem; }
.why-section ul { margin: 0.3rem 0 0 1.2rem; padding: 0; }
.why-section li { margin-bottom: 0.2rem; }

/* Tab bar divider between main/detail groups */
.rtab-divider {
    width: 1px; height: 24px; background: var(--border-strong);
    margin: 0 4px; flex-shrink: 0; align-self: center;
}

/* Graph containers */
.dash-graph { min-height: 250px; }
.dash-graph .js-plotly-plot { min-height: 250px; }

/* ─── RESULTS ────────────────────────────────────── */
.result-top5 { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.7rem; margin: 0.8rem 0; }
.rank-card { background: var(--card-bg-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem; text-align: center; transition: all var(--transition); }
.rank-card:first-child { border-color: #F59E0B; box-shadow: 0 0 12px rgba(245,158,11,0.15); }
.rank-pos { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.2rem; }
.rank-alt { font-size: 0.82rem; font-weight: 600; color: var(--text-main); }
.rank-score { font-size: 0.73rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

/* ─── COMMENTARY BOX ─────────────────────────────── */
.commentary-box {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 0.8rem; padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(99,102,241,0.03) 100%);
    border: 1px solid rgba(59,130,246,0.12);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted);
}
.commentary-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
.commentary-text { flex: 1; }

/* ─── ALERTS ─────────────────────────────────────── */
.alert { padding: 0.65rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.8rem; margin: 0.5rem 0; display: flex; align-items: center; gap: 7px; }
.alert-success { background: var(--success-bg); color: var(--success-text); border-left: 3px solid #10B981; }
.alert-warning { background: var(--warn-bg); color: var(--warn-text); border-left: 3px solid #F59E0B; }
.alert-danger { background: var(--danger-bg); color: var(--danger-text); border-left: 3px solid #EF4444; }
.alert-info { background: var(--accent-soft); color: var(--accent); border-left: 3px solid var(--accent); }

/* ─── EXPORT ─────────────────────────────────────── */
.export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; margin: 0.8rem 0; }
.export-card { background: var(--card-bg-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.8rem; text-align: center; transition: all var(--transition); cursor: pointer; }
.export-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.export-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
.export-label { font-size: 0.8rem; font-weight: 600; }
.export-desc { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; }
.export-card-highlight { border-color: var(--accent); background: var(--accent-soft); }
.export-card-highlight .export-label { color: var(--accent); }

/* ─── HOVER MENU ─────────────────────────────────── */
.hover-menu { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 7px; }
.hover-menu-trigger { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #2563EB 100%); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow); transition: all var(--transition); }
.hover-menu-trigger:hover { transform: scale(1.08); }
.hover-menu-items { display: none; flex-direction: column; align-items: flex-end; gap: 5px; }
.hover-menu.open .hover-menu-items { display: flex; animation: fadeSlideUp 0.2s ease-out; }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hover-menu-item { display: flex; align-items: center; gap: 7px; padding: 0.45rem 0.9rem; background: var(--card-bg-solid); border: 1px solid var(--border); border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--text-main); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-md); transition: all var(--transition); }
.hover-menu-item:hover { border-color: var(--accent); color: var(--accent); transform: translateX(-4px); }

/* ─── DATATABLE OVERRIDES ────────────────────────── */
.dash-spreadsheet-container .dash-spreadsheet-inner th { background: #F8FAFC !important; font-weight: 600 !important; font-size: 0.76rem !important; border-bottom: 2px solid var(--border) !important; padding: 0.4rem 0.7rem !important; }
.dash-spreadsheet-container .dash-spreadsheet-inner td { font-size: 0.76rem !important; padding: 0.35rem 0.7rem !important; }
.dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td { background: var(--accent-soft) !important; }

/* ─── FORM ELEMENTS ──────────────────────────────── */
.form-group { margin-bottom: 0.7rem; }
.form-group label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.25rem; }
.form-group select, .form-group input { width: 100%; padding: 0.45rem 0.7rem; font-size: 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--text-main); outline: none; }
.form-group select:focus, .form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ─── RESPONSIVE — BUL-02 fix: mobile bottom nav ──── */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; --banner-h: 48px; }
    .sidebar { display: none; }
    .body-content { margin-left: 0; padding: 0.8rem; max-width: 100vw; padding-bottom: 4.5rem; }
    .global-banner { padding: 0 0.8rem; height: var(--banner-h); }
    .banner-right { display: none; }
    .banner-brand { margin-bottom: 0; }
    .brand-decide, .brand-core { font-size: 1.1rem; }
    .banner-tagline { display: none; }
    .mega-bar { flex-wrap: wrap; }
    /* Welcome card responsive */
    .welcome-card { padding: 1.2rem 0.8rem 1rem; }
    .wb-decide, .wb-core { font-size: 1.6rem; }
    .datatype-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    /* Wizard responsive */
    .glass-card { padding: 1rem; }
    .pill-checklist label { padding: 0.25rem 0.5rem !important; }
    .family-tabs { flex-wrap: wrap; }
    .fam-tab { flex: 0 1 auto; font-size: var(--fs-tiny); padding: 0.4rem 0.5rem; }
    /* Results responsive */
    .rtab-bar { gap: 2px; }
    .rtab-btn { min-width: 70px; padding: 0.4rem 0.4rem; font-size: var(--fs-tiny); }
    .kpi-card { min-width: 70px; }
}

/* ─── MOBILE BOTTOM NAV BAR ─────────────────────── */
.mobile-bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 1000; background: var(--bg-sidebar);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 0.4rem 0.5rem; gap: 2px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; justify-content: space-around; }
    .hover-menu { display: none; }
}
.mobile-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.3rem 0.2rem; border: none; background: transparent;
    color: rgba(148,163,184,0.7); cursor: pointer; transition: all 0.2s;
    font-size: 0.6rem; font-weight: 600; border-radius: 6px;
}
.mobile-nav-btn:hover, .mobile-nav-btn.active { color: #60A5FA; background: rgba(59,130,246,0.1); }
.mobile-nav-icon { font-size: 1.1rem; }

/* ─── FOCUS STATES (Accessibility) ────────────────── */
.btn:focus-visible, .lang-btn:focus-visible, .wiz-mode-btn:focus-visible,
.fam-tab:focus-visible, .rtab-btn:focus-visible, .export-card:focus-visible,
.hover-menu-trigger:focus-visible, .btn-sample:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.form-group select:focus-visible, .form-group input:focus-visible {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); outline: none;
}

/* ─── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* BUL-24 fix: WCAG AA contrast ratios */
.banner-tagline { color: #CBD5E1 !important; }
.banner-dedication { color: #E2E8F0 !important; }
.banner-motto { color: #CBD5E1 !important; }
.pill-cluster-label { color: var(--text-muted) !important; }

/* BUL-09 fix: wider content area for large screens */
@media (min-width: 1600px) {
    .body-content { max-width: 1320px; }
}
@media (min-width: 2200px) {
    .body-content { max-width: 1500px; }
}

/* ─── DANGER BUTTON HOVER ────────────────────────── */
.btn-danger:hover { background: #991B1B; transform: translateY(-1px); }

/* BUL-08: Wizard progress bar (sticky, always visible) */
.wizard-progress {
    display: flex; align-items: center; gap: 0;
    background: var(--card-bg-solid); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 0.4rem 0.8rem;
    margin-bottom: 1rem; box-shadow: var(--shadow-sm);
    position: sticky; top: calc(var(--banner-h) + 4px); z-index: 50;
}
.wprog-step {
    flex: 1; display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-tiny); font-weight: 600; color: var(--text-light);
    padding: 0.3rem 0.4rem; border-radius: 6px;
    transition: all 0.2s;
}
.wprog-step.done { color: var(--success-text); }
.wprog-step.active { color: var(--accent); background: var(--accent-soft); }
.wprog-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--border-strong);
}
.wprog-step.done .wprog-dot { background: #10B981; }
.wprog-step.active .wprog-dot { background: var(--accent); animation: pulse-dot 2s ease-in-out infinite; }
.wprog-connector {
    width: 16px; height: 2px; background: var(--border);
    flex-shrink: 0;
}
.wprog-step.done + .wprog-connector { background: #10B981; }
@media (max-width: 768px) {
    .wprog-step span { display: none; }
    .wizard-progress { padding: 0.3rem 0.5rem; }
    .wprog-connector { width: 8px; }
}

/* BUL-12: Locked wizard sections — visible but disabled */
.wiz-locked {
    opacity: 0.4; pointer-events: none; position: relative;
}
.wiz-locked::after {
    content: '🔒'; position: absolute; top: 0.8rem; right: 1rem;
    font-size: 1.1rem; opacity: 0.6;
}

/* Expert tabs for subjective weights */
.subj-expert-tabs {
    display: flex; flex-wrap: wrap; gap: 3px; margin: 0.4rem 0;
}
.subj-expert-tab {
    padding: 0.3rem 0.6rem; border-radius: 14px;
    border: 1px solid var(--border); background: var(--card-bg-solid);
    font-size: var(--fs-tiny); font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: all 0.2s;
}
.subj-expert-tab:hover { border-color: var(--accent); color: var(--accent); }
.subj-expert-tab.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.subj-expert-tab.filled {
    border-color: #10B981; color: #065F46; background: #ECFDF5;
}
.subj-expert-tab.filled.active {
    background: #059669; color: #fff; border-color: #059669;
}

/* Parameter panels (collapsible, per-family) */
.param-panel {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 0.5rem; background: rgba(255,255,255,0.6);
}
.param-panel-title {
    cursor: pointer; padding: 0.45rem 0.7rem;
    font-size: var(--fs-small); font-weight: 600; color: var(--text-main);
    list-style: none;
}
.param-panel-title::-webkit-details-marker { display: none; }
.param-panel-title::before { content: "▸ "; color: var(--text-light); }
.param-panel[open] .param-panel-title::before { content: "▾ "; }
.param-panel-body { padding: 0.3rem 0.7rem 0.6rem; border-top: 1px solid var(--border); }

/* Ranking mode tabs (Suggest / Popular / Expert) */
.ranking-mode-tabs {
    display: flex; gap: 6px; margin: 0.6rem 0; flex-wrap: wrap;
}
.btn-rank-mode {
    flex: 1; min-width: 120px; padding: 0.5rem 0.5rem;
    border: 2px solid var(--border); border-radius: var(--radius-md);
    background: var(--card-bg-solid); cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.btn-rank-mode:hover { border-color: #475569; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-rank-mode-active {
    border-color: #1E293B !important; background: #1E293B !important; color: #F1F5F9 !important;
    box-shadow: 0 2px 8px rgba(30,41,59,0.2);
}

/* Choice row: label + two visible buttons */
.choice-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.btn-choice-compact {
    padding: 0.55rem 1.4rem; border-radius: var(--radius-sm);
    font-size: var(--fs-body); font-weight: 700; cursor: pointer;
    border: 2px solid var(--border); background: var(--card-bg-solid);
    transition: all 0.2s; white-space: nowrap;
    letter-spacing: 0.01em;
}
.btn-choice-compact:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-choice-compact.btn-choice-auto {
    border-color: #065F46; color: #065F46;
    background: #ECFDF5;
}
.btn-choice-compact.btn-choice-auto:hover { background: #065F46; color: #ECFDF5; }
.btn-choice-compact.btn-choice-manual {
    border-color: #312E81; color: #312E81;
    background: #EEF2FF;
}
.btn-choice-compact.btn-choice-manual:hover { background: #312E81; color: #EEF2FF; }

/* Legacy choice buttons (kept for compat) */
.context-choice { text-align: center; }
.btn-choice {
    flex: 1; min-width: 200px; padding: 0.7rem 1rem;
    border-radius: var(--radius-md); border: 2px solid var(--border);
    background: var(--card-bg-solid); cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.btn-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-choice-auto {
    border-color: rgba(16,185,129,0.3);
}
.btn-choice-auto:hover {
    border-color: #10B981; background: #ECFDF5;
}
.btn-choice-manual {
    border-color: rgba(59,130,246,0.3);
}
.btn-choice-manual:hover {
    border-color: var(--accent); background: var(--accent-soft);
}

/* Context questions — compact 2×2 grid */
.context-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
}
@media (max-width: 640px) { .context-grid { grid-template-columns: 1fr; } }
.context-q-mini {
    padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.6); border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.context-q-mini:hover { border-color: var(--accent); }
.context-q-header { display: flex; align-items: center; gap: 4px; margin-bottom: 0.15rem; }
.context-q-label {
    font-size: 0.7rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.context-q-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    font-size: 0.6rem; font-weight: 700;
    background: #E2E8F0; color: #475569;
    cursor: help; flex-shrink: 0;
    position: relative;
}
.context-q-help:hover { background: #1E293B; color: #F1F5F9; }
.context-q-help[title] { position: relative; }
.context-q-help[title]:hover::after {
    content: attr(title);
    position: absolute; z-index: 100;
    top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 260px;
    padding: 0.4rem 0.6rem; border-radius: 6px;
    background: #1E293B; color: #F1F5F9;
    font-size: 0.7rem; font-weight: 400; line-height: 1.4;
    text-transform: none; letter-spacing: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: normal;
    pointer-events: none;
}
.context-q-help[title]:hover::before {
    content: ''; position: absolute; z-index: 100;
    top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-bottom-color: #1E293B;
}
/* Compact inline pill-style radio/checklist */
.wiz-radio-compact { display: flex !important; flex-wrap: wrap; gap: 4px; }
.wiz-radio-compact label {
    display: inline-flex !important; align-items: center;
    padding: 0.22rem 0.6rem !important;
    border-radius: 14px; font-size: 0.75rem !important;
    line-height: 1.3; cursor: pointer !important;
    border: 1px solid var(--border); background: var(--card-bg-solid);
    color: var(--text-main);
    transition: all 0.15s; white-space: nowrap;
}
.wiz-radio-compact label:hover { border-color: #5B9A6A; background: #F0FDF4; }
.wiz-radio-compact input:checked + span,
.wiz-radio-compact label:has(input:checked) {
    background: #ECFDF5 !important; color: #9F1239 !important;
    border-color: #86EFAC !important;
}
/* ── Extra settings: two-tab panel ── */
.extra-tabs-wrap {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.5); overflow: hidden;
}
.extra-tab-bar {
    display: flex; border-bottom: 1px solid var(--border);
}
.extra-tab {
    flex: 1; padding: 0.35rem 0.6rem; border: none; background: transparent;
    font-size: 0.72rem; font-weight: 600; color: var(--text-light);
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.extra-tab:hover { background: rgba(0,0,0,0.02); color: var(--text-main); }
.extra-tab.active {
    color: #1E293B; background: rgba(30,41,59,0.04);
    box-shadow: inset 0 -2px 0 #1E293B;
}
.extra-panel { padding: 0.5rem; }

/* Legacy context-q (kept for compat) */
.context-q {
    padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.6); border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.context-q:hover { border-color: var(--accent); }
.context-q .wiz-radio label {
    padding: 0.4rem 0.6rem !important; margin-bottom: 2px;
    border-radius: 6px; font-size: var(--fs-small) !important;
    line-height: 1.4;
}

/* Normalization toggle in criteria section */
.norm-toggle {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.2rem 0.6rem; background: rgba(67,56,202,0.03);
}
.norm-toggle[open] { background: rgba(67,56,202,0.05); }
.norm-toggle summary { list-style: none; }
.norm-toggle summary::-webkit-details-marker { display: none; }
.norm-toggle summary::before { content: "▸ "; }
.norm-toggle[open] summary::before { content: "▾ "; }
.norm-radio label {
    display: block !important; padding: 0.35rem 0.6rem !important;
    border-radius: 6px; margin-bottom: 2px; cursor: pointer !important;
    transition: background 0.15s;
}
.norm-radio label:hover { background: rgba(67,56,202,0.06); }
.norm-radio input[type="radio"] { margin-right: 8px; accent-color: var(--accent); }

/* BUL-22: Page transition animation */
#section-welcome, #section-data, #section-results {
    animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── UTILITIES ──────────────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.78rem; }
.text-xs { font-size: 0.7rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   P0 — SCORE LABELS, BARS, GLANCE CARD, COMMENTARY, LOADING
   ═══════════════════════════════════════════════════════════════ */

/* Score context label (e.g., "cok iyi") */
.score-label { font-size: var(--fs-tiny); color: var(--text-light); font-style: italic; margin-left: 0.3rem; }
.score-label-good { color: #065F46; }
.score-label-ok { color: #92400E; }
.score-label-weak { color: #991B1B; }

/* Inline score bar in ranking table */
.score-bar { display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; }
.score-bar-track { flex: 1; height: 7px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #34D399); transition: width 0.5s ease; }
.score-bar-value { font-size: var(--fs-small); font-weight: 600; min-width: 3.5rem; text-align: right; }

/* Reliability badge */
.reliability-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-small); font-weight: 600; }
.reliability-badge.strong { color: #065F46; }
.reliability-badge.moderate { color: #92400E; }
.reliability-badge.weak { color: #991B1B; }

/* ── Glance Card (executive summary at top of results) ── */
.glance-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #F1F5F9; border: 1px solid rgba(59,130,246,0.2);
    border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
    margin-bottom: 1rem; box-shadow: 0 0 40px -10px rgba(59,130,246,0.12);
}
.glance-card .glance-leader { font-size: 1.1rem; font-weight: 700; color: #FFF; }
.glance-card .glance-score { color: #34D399; font-weight: 600; }
.glance-card .glance-warning { color: #FBBF24; }
.glance-card .glance-meta { color: #94A3B8; font-size: var(--fs-small); margin-top: 0.5rem; }
.glance-card .glance-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; margin-top: 0.5rem; }
.glance-card .glance-item { display: flex; align-items: center; gap: 0.3rem; }

/* ── Result Commentary Box (Thesis — visual separation) ── */
.result-commentary {
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.75rem 1rem; margin-top: 0.75rem;
    font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6;
}

/* ── Consensus Summary Box (Verdict) ── */
.consensus-box {
    background: #F0FDF4; border: 1px solid #86EFAC;
    border-radius: var(--radius-md); padding: 1rem 1.25rem;
    margin-top: 1rem;
}
.consensus-box .consensus-title { font-weight: 700; color: #065F46; margin-bottom: 0.5rem; }
.consensus-box .consensus-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.consensus-bar-track { flex: 1; max-width: 200px; height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.consensus-bar-fill { height: 100%; border-radius: 4px; background: #34D399; }
.consensus-reason { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--text-muted); font-style: italic; border-left: 2px solid #93C5FD; padding-left: 0.75rem; }

/* ── Analysis Loading State (Opus) ── */
.btn-analyzing { pointer-events: none; opacity: 0.7; position: relative; overflow: hidden; }
.btn-analyzing::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Wizard Why-Box (Clarity) ── */
.wiz-why {
    background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
    font-size: var(--fs-small); color: #0369A1; line-height: 1.5;
}
.wiz-why::before { content: '💡 '; }

/* ── KPI Hero Card ── */
.kpi-card-hero {
    flex: 1.8 !important; background: linear-gradient(135deg, #0F172A, #1E293B) !important;
    color: #FFF !important; border-color: rgba(59,130,246,0.25) !important;
    text-align: left !important; padding: 0.5rem 0.8rem !important;
}
.kpi-card-hero .kpi-value { color: #FFF; font-size: 1.05rem; }
.kpi-card-hero .kpi-label { color: #94A3B8; }