/* hide Blazor's default error banner */
#blazor-error-ui { display: none !important; }

/* ── App splash (before WASM loads) ── */
#app-splash {
    position: fixed; inset: 0;
    background: #0B1025;
    display: flex; align-items: center; justify-content: center;
}
#app-splash-ring {
    width: 56px; height: 56px;
    border: 3px solid rgba(99,102,241,.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: splash-spin .8s linear infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }

/* ── Full-page loading overlay ── */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ═══════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════ */
:root {
    --bg:           #0B1025;
    --card:         #131B3F;
    --card2:        #1a2550;
    --accent:       #6366F1;
    --accent-dim:   rgba(99,102,241,.15);
    --accent-glow:  rgba(99,102,241,.25);
    --success:      #22C55E;
    --success-dim:  rgba(34,197,94,.12);
    --warning:      #F59E0B;
    --warning-dim:  rgba(245,158,11,.12);
    --error:        #EF4444;
    --error-dim:    rgba(239,68,68,.12);
    --text:         #F1F5F9;
    --text-muted:   #64748B;
    --text-sub:     #94A3B8;
    --border:       rgba(255,255,255,.07);
    --border-light: rgba(255,255,255,.12);
    --r:            20px;
    --r-sm:         12px;
    --r-xs:         8px;
    --ease:         cubic-bezier(0.23, 1, 0.32, 1);
    --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
    --bg-nav:       rgba(11,16,37,.88);
    color-scheme: dark;
}

/* ── Light theme ─────────────────────────────────── */
html[data-theme="light"] {
    --bg:           #EEF2FF;
    --card:         #FFFFFF;
    --card2:        #F5F8FF;
    --accent-dim:   rgba(99,102,241,.1);
    --accent-glow:  rgba(99,102,241,.18);
    --text:         #0F172A;
    --text-sub:     #334155;
    --text-muted:   #94A3B8;
    --border:       rgba(0,0,0,.07);
    --border-light: rgba(0,0,0,.13);
    --bg-nav:       rgba(238,242,255,.94);
    color-scheme: light;
}

/* Light-mode overrides for elements using hardcoded rgba(255,…) */
html[data-theme="light"] .nav-link:hover { background: rgba(0,0,0,.05); }
html[data-theme="light"] .lang-switcher  { background: rgba(0,0,0,.06); }
html[data-theme="light"] .lang-btn:hover { color: var(--text-sub); }

html[data-theme="light"] .btn-ghost         { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .btn-ghost:hover   { background: rgba(0,0,0,.09); color: var(--text); }
html[data-theme="light"] .nav-logout-btn    { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .nav-logout-btn:hover { background: rgba(0,0,0,.09); }
html[data-theme="light"] .modal-close       { background: rgba(0,0,0,.05); }
html[data-theme="light"] .modal-close:hover { background: rgba(0,0,0,.09); color: var(--text); }
html[data-theme="light"] .modal-close-btn   { background: rgba(0,0,0,.05); }
html[data-theme="light"] .modal-close-btn:hover { background: rgba(0,0,0,.09); }

html[data-theme="light"] .group-tab         { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .group-tab:hover   { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); }
html[data-theme="light"] .group-tab:not(.active) .group-tab-count { background: rgba(99,102,241,.12); color: var(--text-muted); }

html[data-theme="light"] .indicators-table th     { background: rgba(0,0,0,.025); }
html[data-theme="light"] .indicators-table tr:hover td { background: rgba(0,0,0,.02); }
html[data-theme="light"] .indicators-table td     { border-bottom-color: rgba(0,0,0,.05); }

html[data-theme="light"] .ai-conclusion-card { background: linear-gradient(135deg, #e8eeff, #f0ecff); border-color: rgba(99,102,241,.2); }
html[data-theme="light"] .field-input        { background: rgba(0,0,0,.03); color-scheme: light; }
html[data-theme="light"] .field-input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .5; }
html[data-theme="light"] .upload-strip       { background: rgba(99,102,241,.08); }
html[data-theme="light"] .google-btn         { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: var(--text); }
html[data-theme="light"] .google-btn:hover   { background: rgba(0,0,0,.07); }

/* ═══════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════ */
.page-shell { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 24px 80px; }

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    height: 70px;
}
.nav-inner {
    max-width: 1160px; margin: 0 auto; padding: 0 24px;
    height: 100%; display: flex; align-items: center; gap: 32px;
}
.nav-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--text);
    white-space: nowrap; flex-shrink: 0;
}
.nav-brand-icon {
    width: 34px; height: 34px; background: var(--accent);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; box-shadow: 0 0 14px var(--accent-glow);
}
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link {
    padding: 6px 14px; border-radius: var(--r-xs); font-size: 14px; font-weight: 500;
    color: var(--text-sub); border: none; background: none;
    transition: color 150ms ease, background 150ms ease; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
}
.nav-link.active { color: var(--text); background: var(--accent-dim); }
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang-switcher { display: flex; gap: 2px; background: rgba(255,255,255,.05); border-radius: var(--r-xs); padding: 3px; }
.lang-btn {
    padding: 4px 10px; border-radius: 6px; border: none; background: none;
    color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em;
    transition: color 150ms var(--ease), background 150ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lang-btn:hover { color: var(--text-sub); }
}
.lang-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-glow); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border-light); object-fit: cover; }
.nav-user-name { font-size: 13px; font-weight: 500; color: var(--text-sub); }
.nav-signin-btn {
    padding: 8px 18px; background: var(--accent); color: #fff; border: none;
    border-radius: var(--r-xs); font-size: 13px; font-weight: 600;
    transition: opacity .15s, box-shadow .15s, transform .16s var(--ease);
}
.nav-signin-btn:hover { opacity: .9; box-shadow: 0 4px 14px var(--accent-glow); }
.nav-signin-btn:active { transform: scale(0.97); }
.nav-logout-btn {
    padding: 6px 12px; background: rgba(255,255,255,.06); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--r-xs); font-size: 12px; font-weight: 500;
    transition: background 150ms var(--ease), color 150ms var(--ease), transform 160ms var(--ease);
}
.nav-logout-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.nav-logout-btn:active { transform: scale(0.97); }
.nav-profile-btn {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(99,102,241,.15);
    color: var(--accent); border: 1px solid rgba(99,102,241,.3); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms var(--ease), transform 160ms var(--ease);
}
.nav-profile-btn:hover { background: rgba(99,102,241,.25); }
.nav-profile-btn:active { transform: scale(0.96); }

/* ── Profile modal ─────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    transition: opacity 180ms ease;
}
.modal-card {
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: var(--r); width: 100%; max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.modal-close {
    width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06);
    color: var(--text-muted); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(255,255,255,.12); color: var(--text); }
.modal-body   { padding: 20px 24px; display: flex; flex-direction: column; }
.modal-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.field-label  { font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.field-input  {
    width: 100%; padding: 10px 14px; background: rgba(255,255,255,.04);
    border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text);
    font-size: 14px; transition: border-color 150ms var(--ease);
    font-family: inherit;
    -webkit-appearance: none; appearance: none;
    color-scheme: dark;
}
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.5);
    cursor: pointer;
}
.field-input[type="number"]::-webkit-inner-spin-button,
.field-input[type="number"]::-webkit-outer-spin-button { opacity: .4; }
.field-hint   { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.sex-btns     { display: flex; gap: 8px; }
.sex-btn {
    flex: 1; padding: 10px; border-radius: var(--r-xs); font-size: 14px; font-weight: 500;
    border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted);
    transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), transform 160ms var(--ease);
}
.sex-btn.active { border-color: var(--accent); background: rgba(99,102,241,.15); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
    .sex-btn:hover:not(.active) { background: rgba(255,255,255,.08); color: var(--text); }
}
.sex-btn:active { transform: scale(0.97); }
.profile-saved-msg { font-size: 13px; color: var(--success); }

/* ── Paywall modal ── */
.paywall-card   { text-align: center; padding: 40px 32px 32px; max-width: 480px; }
.paywall-icon   { font-size: 48px; margin-bottom: 16px; }
.paywall-title  { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.paywall-sub    { font-size: 14px; color: var(--text-sub); margin-bottom: 28px; line-height: 1.6; }
.paywall-plans  { display: flex; gap: 12px; margin-bottom: 24px; }
.paywall-plan   {
    flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 16px 12px; position: relative;
}
.paywall-plan--featured {
    border-color: var(--accent); background: rgba(99,102,241,.08);
}
.paywall-plan-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 10px; border-radius: 20px; letter-spacing: .05em; text-transform: uppercase;
}
.paywall-plan-name  { font-size: 12px; color: var(--text-sub); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.paywall-plan-price { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.paywall-plan-hint  { font-size: 11px; color: var(--text-muted); }
.paywall-contact    { font-size: 13px; color: var(--text-sub); margin-bottom: 20px; }
.paywall-contact a  { color: var(--accent); text-decoration: none; }
.paywall-contact a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center; padding: 80px 0 60px;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-dim); border: 1px solid rgba(99,102,241,.25);
    border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
    color: #a5b4fc; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 24px;
}
.hero-title {
    font-size: clamp(28px, 4vw, 48px); font-weight: 800;
    line-height: 1.15; letter-spacing: -.02em; color: var(--text); margin-bottom: 20px;
}
.hero-title span {
    background: linear-gradient(135deg, #818cf8, #6366f1 40%, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin-bottom: 36px; max-width: 440px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.btn-hero {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; background: var(--accent); color: #fff; border: none;
    border-radius: var(--r-sm); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
    box-shadow: 0 4px 24px var(--accent-glow);
    transition: opacity .15s, box-shadow .2s, transform .16s var(--ease);
}
.btn-hero:hover { opacity: .92; box-shadow: 0 6px 32px rgba(99,102,241,.4); }
@media (hover: hover) and (pointer: fine) {
    .btn-hero:hover { transform: translateY(-2px); }
}
.btn-hero:active { transform: scale(0.98); }
.btn-hero:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.hero-labs {
    font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
}
.hero-labs::before {
    content: ''; width: 6px; height: 6px; background: var(--success);
    border-radius: 50%; box-shadow: 0 0 6px var(--success); flex-shrink: 0;
}
/* Hero visual */
.hero-visual {
    position: relative; display: flex; align-items: center;
    justify-content: center; height: 380px;
}
.hero-glow {
    position: absolute; width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.hero-pdf-card {
    position: relative; width: 210px;
    background: var(--card); border: 1px solid var(--border-light);
    border-radius: var(--r); padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.08);
    z-index: 2;
}
.hero-pdf-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.hero-pdf-icon {
    width: 30px; height: 30px; background: var(--error-dim); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.hero-pdf-title { font-size: 11px; font-weight: 600; color: var(--text-sub); }
.hero-pdf-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.hero-metric-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 11px;
}
.hero-metric-row:last-child { border-bottom: none; }
.hero-metric-name { color: var(--text-sub); }
.hero-metric-val { font-weight: 700; }
.hero-metric-val.ok  { color: var(--success); }
.hero-metric-val.warn { color: var(--warning); }
.hero-metric-val.err  { color: var(--error); }
.hero-float-badge {
    position: absolute; background: var(--card); border: 1px solid var(--border-light);
    border-radius: var(--r-sm); padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4); font-size: 11px; z-index: 3;
    animation: float 4s ease-in-out infinite;
}
.hero-float-badge.badge-ai {
    top: 20px; right: 10px;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-color: rgba(99,102,241,.35); animation-delay: -2s;
}
.hero-float-badge.badge-ok  { bottom: 50px; right: -10px; border-color: rgba(34,197,94,.2); animation-delay: -1s; }
.hero-float-badge.badge-warn { top: 110px; left: -20px; border-color: rgba(245,158,11,.2); animation-delay: -3s; }
.badge-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.badge-val { font-size: 14px; font-weight: 700; margin-top: 2px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ═══════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════ */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.section-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.section-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ═══════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 32px; }
.card-sm { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 20px 24px; }

/* ═══════════════════════════════════════════════
   UPLOAD ZONE
   ═══════════════════════════════════════════════ */
.upload-hero-zone {
    background: var(--card); border: 2px dashed rgba(99,102,241,.3);
    border-radius: var(--r); padding: 48px 32px; text-align: center;
    transition: border-color .2s, background .2s; cursor: pointer;
    position: relative; overflow: hidden; margin-bottom: 16px;
}
.upload-hero-zone:hover { border-color: var(--accent); background: rgba(99,102,241,.04); }
.upload-compact-bar {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.upload-file-name {
    flex: 1; font-size: 13px; color: var(--text-sub); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; background: var(--accent); color: #fff; border: none;
    border-radius: var(--r-xs); font-size: 14px; font-weight: 600;
    transition: opacity .15s, box-shadow .2s, transform .16s var(--ease); white-space: nowrap; flex-shrink: 0;
}
.btn-primary:hover { opacity: .88; box-shadow: 0 4px 16px var(--accent-glow); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; background: rgba(255,255,255,.06);
    color: var(--text-sub); border: 1px solid var(--border);
    border-radius: var(--r-xs); font-size: 13px; font-weight: 500;
    transition: background .15s, color .15s, transform .16s var(--ease); white-space: nowrap; flex-shrink: 0;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--text); }
.btn-ghost:active:not(:disabled) { transform: scale(0.97); }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }

.btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; background: var(--error-dim); color: var(--error);
    border: 1px solid rgba(239,68,68,.2); border-radius: var(--r-xs);
    font-size: 12px; font-weight: 500;
    transition: background 150ms var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .btn-danger:hover { background: rgba(239,68,68,.2); }
}
.btn-danger:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════
   STATS ROW
   ═══════════════════════════════════════════════ */
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 32px; }
.stat-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 20px 22px;
    display: flex; flex-direction: column; gap: 6px;
}
.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.stat-value.warn { color: var(--warning); }
.stat-value.ok   { color: var(--success); }

/* ═══════════════════════════════════════════════
   AI CONCLUSION CARD
   ═══════════════════════════════════════════════ */
.ai-conclusion-card {
    background: linear-gradient(135deg, #131B3F 0%, #1a1f4e 100%);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: var(--r); padding: 28px 32px; margin-bottom: 36px;
    position: relative; overflow: hidden;
}
.ai-conclusion-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.5), transparent);
}
.ai-conclusion-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ai-conclusion-icon {
    width: 38px; height: 38px; background: var(--accent-dim);
    border: 1px solid rgba(99,102,241,.3); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.ai-conclusion-title { font-size: 17px; font-weight: 700; color: var(--text); }
.ai-conclusion-badge {
    margin-left: auto; padding: 3px 10px;
    background: var(--accent-dim); border: 1px solid rgba(99,102,241,.2);
    border-radius: 20px; font-size: 11px; font-weight: 600; color: #a5b4fc;
    text-transform: uppercase; letter-spacing: .04em;
}
.ai-conclusion-text {
    font-size: 15px; color: var(--text-sub); line-height: 1.75;
    margin-bottom: 20px; white-space: pre-line;
}
.ai-conclusion-placeholder {
    font-size: 15px; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; font-style: italic;
}
.ai-conclusion-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════
   DEVIATION CARDS
   ═══════════════════════════════════════════════ */
.deviations-section { margin-bottom: 40px; }
.deviation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin-top: 20px;
}
.deviation-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r); padding: 22px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .2s, transform .22s var(--ease), box-shadow .22s var(--ease);
    position: relative; overflow: hidden;
}
.deviation-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 3px; height: 100%; border-radius: 0 2px 2px 0;
}
.deviation-card.dv-high::before  { background: var(--error); }
.deviation-card.dv-low::before   { background: var(--warning); }
.deviation-card.dv-other::before { background: var(--warning); }
.deviation-card:hover { border-color: var(--border-light); }
@media (hover: hover) and (pointer: fine) {
    .deviation-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.3); }
}
.deviation-icon {
    width: 38px; height: 38px; border-radius: var(--r-xs);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: var(--warning-dim); flex-shrink: 0;
}
.deviation-card.dv-high .deviation-icon { background: var(--error-dim); }
.deviation-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.deviation-value { font-size: 28px; font-weight: 800; color: var(--warning); letter-spacing: -.02em; line-height: 1; }
.deviation-card.dv-high .deviation-value { color: var(--error); }
.deviation-unit { font-size: 12px; color: var(--text-muted); margin-top: -4px; }
.deviation-range {
    font-size: 12px; color: var(--text-muted); background: rgba(255,255,255,.04);
    border-radius: 6px; padding: 5px 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.deviation-range-val { font-weight: 600; color: var(--text-sub); }
.deviation-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; border-radius: 20px;
    padding: 3px 10px; width: fit-content;
    background: var(--warning-dim); color: var(--warning);
}
.deviation-card.dv-high .deviation-status { color: var(--error); background: var(--error-dim); }
.btn-explain {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    background: var(--accent-dim); color: #a5b4fc;
    border: 1px solid rgba(99,102,241,.2); border-radius: var(--r-xs);
    font-size: 12px; font-weight: 600; width: 100%; justify-content: center;
    transition: background .15s, border-color .15s, transform .16s var(--ease); margin-top: 4px;
}
.btn-explain:hover { background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.4); }
.btn-explain:active:not(:disabled) { transform: scale(0.97); }
.btn-explain:disabled { opacity: .5; cursor: not-allowed; }
.explain-bubble {
    background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.15);
    border-radius: var(--r-xs); padding: 12px 14px;
    font-size: 12px; color: var(--text-sub); line-height: 1.65; position: relative;
}
.explain-close-btn {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 2px;
}
.explain-close-btn:hover { color: var(--text); }

/* ═══════════════════════════════════════════════
   ALL INDICATORS TABLE
   ═══════════════════════════════════════════════ */
.indicators-section { margin-bottom: 40px; }
.indicators-table-wrap {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden;
}
.indicators-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.indicators-table th {
    padding: 12px 16px; text-align: left;
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    background: rgba(255,255,255,.03); border-bottom: 1px solid var(--border);
}
.indicators-table th.right, .indicators-table td.right { text-align: right; }
.indicators-table th.center, .indicators-table td.center { text-align: center; }
.indicators-table td {
    padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--text-sub); vertical-align: middle;
}
.indicators-table tr:last-child td { border-bottom: none; }
.indicators-table tr:hover td { background: rgba(255,255,255,.02); }
.indicators-table tr.row-abn td { background: rgba(245,158,11,.025); }
.indicators-table .test-name { font-weight: 500; color: var(--text); }
.indicators-table .val-ok   { color: var(--success); font-weight: 600; }
.indicators-table .val-warn { color: var(--warning); font-weight: 700; }
.indicators-table .muted    { color: var(--text-muted); }
.status-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.status-chip.ok   { background: var(--success-dim); color: var(--success); }
.status-chip.warn { background: var(--warning-dim); color: var(--warning); }
.tbl-explain-row td { padding: 0 16px 12px; background: rgba(99,102,241,.03) !important; }
.tbl-explain-cell {
    background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.12);
    border-radius: var(--r-xs); padding: 10px 14px;
    font-size: 12px; color: var(--text-sub); line-height: 1.65;
    display: flex; align-items: flex-start; gap: 8px;
}
.btn-explain-sm {
    background: none; border: none; color: var(--text-muted);
    font-size: 15px; padding: 2px 4px; border-radius: 4px;
    transition: color .15s, background .15s;
}
.btn-explain-sm:hover { color: #a5b4fc; background: var(--accent-dim); }
.btn-explain-sm:disabled { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   HISTORY PAGE
   ═══════════════════════════════════════════════ */
.history-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.history-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-sm); overflow: hidden; transition: border-color .2s;
}
.history-card:hover { border-color: var(--border-light); }
.history-card-header {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; cursor: pointer; user-select: none;
}
.history-card-date { font-size: 15px; font-weight: 700; color: var(--text); flex: 1; }
.history-card-chevron { color: var(--text-muted); font-size: 12px; transition: transform .2s; }
.history-card.open .history-card-chevron { transform: rotate(90deg); }
.history-card-body { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.chip-ok      { background: var(--success-dim); color: var(--success); }
.chip-warn    { background: var(--warning-dim); color: var(--warning); }
.chip-neutral { background: rgba(255,255,255,.06); color: var(--text-muted); }

/* ═══════════════════════════════════════════════
   CATEGORY CARDS
   ═══════════════════════════════════════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 14px; margin-bottom: 32px; }
.cat-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 18px; cursor: pointer;
    transition: border-color .2s, transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cat-card:hover { border-color: var(--border-light); }
@media (hover: hover) and (pointer: fine) {
    .cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
}
.cat-card:active { transform: scale(0.98); }
.cat-card-warn { border-color: rgba(245,158,11,.2); }
.cat-card-warn:hover { border-color: rgba(245,158,11,.4); }
.cat-svg-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; padding: 11px; flex-shrink: 0;
}
.cat-svg-icon svg { width: 100%; height: 100%; }
.cat-name  { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cat-date  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cat-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* ═══════════════════════════════════════════════
   SHARE
   ═══════════════════════════════════════════════ */
.share-card {
    background: var(--card); border: 1px solid rgba(99,102,241,.2);
    border-radius: var(--r-sm); padding: 14px 18px;
    margin-bottom: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.share-url {
    flex: 1; font-size: 12px; color: var(--text-sub); font-family: monospace;
    background: rgba(255,255,255,.04); border-radius: 6px; padding: 6px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ═══════════════════════════════════════════════
   DEMO BANNER
   ═══════════════════════════════════════════════ */
.demo-banner {
    background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2);
    border-radius: var(--r-sm); padding: 12px 18px; margin-bottom: 24px;
    font-size: 13px; color: #fcd34d; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.demo-banner a { color: var(--accent); font-weight: 600; margin-left: auto; }

/* ═══════════════════════════════════════════════
   LOADING / EMPTY / ERRORS
   ═══════════════════════════════════════════════ */
.loading-row {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-muted); font-size: 14px; padding: 20px 0;
}
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: .4; }
.empty-state-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-state-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.error-bar {
    background: var(--error-dim); border: 1px solid rgba(239,68,68,.2);
    border-radius: var(--r-xs); padding: 12px 16px; color: #fca5a5;
    font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.msg-ok  { font-size: 13px; color: var(--success); padding: 8px 0; }
.msg-err { font-size: 13px; color: var(--error); padding: 8px 0; }

/* ═══════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════ */
.chart-select {
    width: 100%; max-width: 360px; background: var(--card);
    border: 1px solid var(--border); color: var(--text);
    border-radius: var(--r-xs); padding: 10px 14px; font-size: 14px; margin-bottom: 20px; appearance: none;
}
.chart-select option { background: var(--card); color: var(--text); }
.js-plotly-plot .plotly { background: transparent !important; }
.js-plotly-plot .main-svg { background: transparent !important; }
.js-plotly-plot .bg { fill: transparent !important; }

/* ═══════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════ */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center;
    justify-content: center; background: var(--bg); padding: 20px;
}
.login-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r); padding: 44px 40px; width: 100%; max-width: 400px;
    text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.5); position: relative; overflow: hidden;
}
.login-card::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.login-logo {
    width: 56px; height: 56px; background: var(--accent-dim);
    border: 1px solid rgba(99,102,241,.3); border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 auto 20px;
    box-shadow: 0 0 24px var(--accent-glow);
}
.login-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -.02em; }
.login-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; line-height: 1.5; }
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 13px 20px; background: rgba(255,255,255,.07);
    border: 1px solid var(--border-light); border-radius: var(--r-sm);
    color: var(--text); font-size: 14px; font-weight: 600;
    transition: background .15s, border-color .15s, transform .16s var(--ease);
}
.google-btn:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.2); }
.google-btn:active { transform: scale(0.98); }
.demo-link {
    display: block; text-align: center; margin-top: 16px;
    color: var(--text-muted); font-size: 13px; font-weight: 500; transition: color .15s;
}
.demo-link:hover { color: var(--text-sub); }

/* ═══════════════════════════════════════════════
   FLUENT UI OVERRIDES
   ═══════════════════════════════════════════════ */
fluent-progress-ring { --neutral-fill-rest: var(--accent); }

/* ═══════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-content { padding: 0 16px 80px; }
    .nav-links { display: none; }
    .nav-inner { gap: 16px; }
    .hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 28px; }
    .hero-visual { height: 240px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stats-row .stat-card:last-child { grid-column: 1/-1; }
    .deviation-grid { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: 1fr 1fr; }
    .upload-compact-bar { flex-direction: column; align-items: stretch; }
    .indicators-table th:nth-child(3), .indicators-table td:nth-child(3) { display: none; }
    .login-card { padding: 32px 24px; }
}
@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr; }
    .stats-row .stat-card:last-child { grid-column: auto; }
    .cat-grid { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .deviation-grid { grid-template-columns: 1fr; }
    .modal-card { max-width: 100%; border-radius: var(--r-sm); }
    .modal-overlay { padding: 12px; align-items: flex-end; }
    .paywall-plans { flex-direction: column; }
    .paywall-card { padding: 28px 20px 24px; }
}

.app-footer {
    text-align: center;
    padding: 16px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: .4;
}

/* ═══════════════════════════════════════════════
   MOTION (Emil Kowalski design principles)
   ═══════════════════════════════════════════════ */

/* Modal entry — fires when the element is first inserted into the DOM */
@starting-style {
    .modal-overlay { opacity: 0; }
    .modal-card    { opacity: 0; transform: scale(0.96) translateY(6px); }
}

/* Card entrance keyframe */
@keyframes card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Deviation card stagger */
.deviation-grid .deviation-card {
    animation: card-in 300ms var(--ease) both;
}
.deviation-grid .deviation-card:nth-child(2) { animation-delay:  40ms; }
.deviation-grid .deviation-card:nth-child(3) { animation-delay:  80ms; }
.deviation-grid .deviation-card:nth-child(4) { animation-delay: 120ms; }
.deviation-grid .deviation-card:nth-child(5) { animation-delay: 160ms; }
.deviation-grid .deviation-card:nth-child(6) { animation-delay: 200ms; }
.deviation-grid .deviation-card:nth-child(n+7) { animation-delay: 240ms; }

/* Category card stagger */
.cat-grid .cat-card {
    animation: card-in 280ms var(--ease) both;
}
.cat-grid .cat-card:nth-child(2) { animation-delay:  30ms; }
.cat-grid .cat-card:nth-child(3) { animation-delay:  60ms; }
.cat-grid .cat-card:nth-child(4) { animation-delay:  90ms; }
.cat-grid .cat-card:nth-child(5) { animation-delay: 120ms; }
.cat-grid .cat-card:nth-child(6) { animation-delay: 150ms; }
.cat-grid .cat-card:nth-child(7) { animation-delay: 180ms; }
.cat-grid .cat-card:nth-child(n+8) { animation-delay: 210ms; }

/* History card body entrance when expanded */
.history-card-body {
    animation: card-in 200ms var(--ease) both;
}

/* Stat cards entrance */
.stats-row .stat-card {
    animation: card-in 260ms var(--ease) both;
}
.stats-row .stat-card:nth-child(2) { animation-delay: 40ms; }
.stats-row .stat-card:nth-child(3) { animation-delay: 80ms; }

/* AI conclusion card entrance */
.ai-conclusion-card {
    animation: card-in 280ms var(--ease) both;
    animation-delay: 60ms;
}


/* Accessibility: respect system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Upload strip (dashboard top) ──────────────── */
.upload-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 24px;
    animation: card-in 280ms var(--ease) both;
}
.upload-strip-hint {
    font-size: 14px;
    color: var(--text-sub);
    white-space: nowrap;
}
.btn-upload-label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-size: 14px;
    padding: 9px 20px;
    flex-shrink: 0;
}
.btn-upload-label:active { transform: scale(0.97); }

/* ── Parsed results modal ───────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2,6,23,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.modal-sheet {
    background: var(--card2);
    border: 1px solid rgba(99,102,241,.25);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 900px;
    height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-up 320ms cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes modal-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.modal-sheet .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 0;
    flex-shrink: 0;
}
.modal-sheet .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.modal-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}
.modal-close-btn {
    background: rgba(255,255,255,.06);
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 180ms var(--ease), color 150ms var(--ease), transform 160ms var(--ease);
}
.modal-close-btn:hover { background: rgba(255,255,255,.12); color: var(--text); }
.modal-close-btn:active { transform: scale(0.92); }
.modal-stats {
    display: flex;
    gap: 24px;
    padding: 14px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.modal-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modal-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.modal-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.modal-stat-val.warn { color: #F59E0B; }
.modal-stat-val.ok   { color: #22C55E; }
.modal-msg {
    margin: 8px 24px 0;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    flex-shrink: 0;
}
.modal-sheet .modal-body {
    display: block;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 0;
    padding: 0 24px 16px;
}
.modal-sheet .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-sheet .modal-footer .btn-ghost:first-child {
    margin-right: auto;
}

/* Modal AI strip */
.modal-ai-strip {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: rgba(99,102,241,.04);
    max-height: 160px;
    overflow-y: auto;
}
.modal-ai-text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════
   APEX CHART
   ═══════════════════════════════════════════════ */
.apex-chart-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px 16px 16px;
    margin-top: 20px;
    height: 360px;
    display: flex;
    flex-direction: column;
}
.apex-chart-wrap > * {
    flex: 1;
    min-height: 0;
}
/* Override ApexCharts internal styles for dark theme */
.apex-chart-wrap .apexcharts-tooltip {
    background: var(--card2) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--r-xs) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
.apex-chart-wrap .apexcharts-tooltip-title {
    background: rgba(99,102,241,.12) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.apex-chart-wrap .apexcharts-tooltip-text {
    color: var(--text) !important;
}
.apex-chart-wrap .apexcharts-xaxistooltip {
    background: var(--card2) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-sub) !important;
}
.apex-chart-wrap .apexcharts-marker {
    filter: drop-shadow(0 0 6px rgba(99,102,241,.6));
}

/* ═══════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════ */

/* ── Nav ── */
.lp-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-nav); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border); height: 64px;
}
.lp-nav-inner {
    height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.lp-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--text);
    transition: opacity 150ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lp-brand:hover { opacity: .8; }
}
.lp-nav-right { display: flex; align-items: center; gap: 16px; }
.lp-nav-link {
    font-size: 14px; font-weight: 500; color: var(--text-sub);
    transition: color 150ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lp-nav-link:hover { color: var(--text); }
}

/* ── Container ── */
.lp-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Hero ── */
.lp-hero { padding: 90px 0 60px; }
.lp-hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
}
.lp-hero-title {
    font-size: clamp(32px, 4.5vw, 54px); font-weight: 800;
    line-height: 1.1; letter-spacing: -.03em; color: var(--text);
    margin: 16px 0 20px;
}
.lp-hero-title span {
    background: linear-gradient(135deg, #818cf8, #6366f1 40%, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lp-hero-sub {
    font-size: 17px; color: var(--text-sub); line-height: 1.7;
    margin-bottom: 36px; max-width: 460px;
}
.lp-hero-actions {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.lp-hero-visual {
    position: relative; display: flex; align-items: center;
    justify-content: center; height: 380px;
}

/* ── Trust bar ── */
.lp-trust {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 24px 0;
}
.lp-trust-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.lp-trust-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.lp-trust-logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-trust-logos span { font-size: 15px; font-weight: 700; color: var(--text-sub); }
.lp-trust-more { color: var(--text-muted) !important; font-weight: 500 !important; font-size: 13px !important; }

/* ── Section shared ── */
.lp-section { padding: 80px 0; }
.lp-section-head { text-align: center; margin-bottom: 60px; }
.lp-section-title {
    font-size: clamp(26px, 3vw, 40px); font-weight: 800;
    letter-spacing: -.02em; margin-top: 14px; color: var(--text);
}

/* ── Steps ── */
.lp-steps { display: flex; align-items: flex-start; }
.lp-step { flex: 1; text-align: center; padding: 0 16px; }
.lp-step-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent-dim); border: 1px solid rgba(99,102,241,.25);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.lp-step-num {
    font-size: 11px; font-weight: 800; color: var(--accent);
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.lp-step-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.lp-step-sub { font-size: 14px; color: var(--text-sub); line-height: 1.6; }
.lp-step-connector {
    display: flex; align-items: center; justify-content: center;
    padding-top: 26px; color: var(--border-light); flex-shrink: 0;
}

/* ── Features ── */
.lp-features-section { background: rgba(255,255,255,.02); }
.lp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-feature { display: flex; flex-direction: column; gap: 10px; }
.lp-feature-icon {
    width: 44px; height: 44px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-bottom: 4px;
}
.lp-feature-icon--accent  { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(99,102,241,.2); }
.lp-feature-icon--success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(34,197,94,.15); }
.lp-feature-icon--warning { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(245,158,11,.15); }
.lp-feature-icon--muted   { background: rgba(255,255,255,.05); color: var(--text-sub); border: 1px solid var(--border); }
.lp-feature-title { font-size: 16px; font-weight: 700; color: var(--text); }
.lp-feature-sub { font-size: 14px; color: var(--text-sub); line-height: 1.6; }

/* ── CTA ── */
.lp-cta { padding: 100px 0; }
.lp-cta-inner {
    position: relative; text-align: center;
    background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(167,139,250,.06) 100%);
    border: 1px solid rgba(99,102,241,.2); border-radius: var(--r);
    padding: 80px 40px; overflow: hidden;
}
.lp-cta-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 400px; height: 300px;
    background: radial-gradient(ellipse, rgba(99,102,241,.15) 0%, transparent 70%);
    pointer-events: none;
}
.lp-cta-title {
    font-size: clamp(24px, 3vw, 38px); font-weight: 800;
    letter-spacing: -.02em; margin-bottom: 14px; color: var(--text); position: relative;
}
.lp-cta-sub {
    font-size: 16px; color: var(--text-sub); margin-bottom: 36px; position: relative;
}
.lp-cta-demo {
    display: block; margin-top: 20px; font-size: 14px; color: var(--text-sub);
    transition: color 150ms var(--ease); position: relative;
}
@media (hover: hover) and (pointer: fine) {
    .lp-cta-demo:hover { color: var(--text); }
}

/* ── Articles section on landing ── */
.lp-articles-section {
    padding: 80px 0;
    background: linear-gradient(180deg, rgba(99,102,241,.06) 0%, rgba(99,102,241,.02) 100%);
    border-top: 1px solid rgba(99,102,241,.15);
    border-bottom: 1px solid rgba(99,102,241,.15);
}
.lp-articles-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}
.lp-articles-head-text { flex: 1; }
.lp-articles-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.lp-articles-all-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: var(--r-xs);
    border: 1px solid rgba(99,102,241,.35);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease;
    white-space: nowrap;
}
.lp-articles-all-btn:hover { background: var(--accent-dim); border-color: var(--accent); }
.lp-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.lp-article-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
    position: relative;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.lp-article-card:hover {
    border-color: rgba(99,102,241,.4);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(99,102,241,.12);
}
.lp-article-card:hover .lp-article-arrow { opacity: 1; transform: translateX(0); }
.lp-article-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    width: fit-content;
}
.lp-tag--indigo { background: rgba(99,102,241,.15);  color: #818cf8; }
.lp-tag--amber  { background: rgba(245,158,11,.15);  color: #fbbf24; }
.lp-tag--green  { background: rgba(34,197,94,.13);   color: #4ade80; }
.lp-tag--blue   { background: rgba(59,130,246,.15);  color: #60a5fa; }
.lp-tag--purple { background: rgba(168,85,247,.14);  color: #c084fc; }
.lp-tag--red    { background: rgba(239,68,68,.13);   color: #f87171; }
.lp-article-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
    flex: 1;
}
.lp-article-arrow {
    font-size: 16px;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
    align-self: flex-end;
}
.lp-articles-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.lp-articles-footer-text { font-size: 14px; color: var(--text-sub); }
@media (max-width: 900px) {
    .lp-articles-head { flex-direction: column; align-items: flex-start; }
    .lp-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-articles-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 500px) { .lp-articles-grid { grid-template-columns: 1fr; } }

/* ── FAQ ── */
.lp-faq-section { background: transparent; }
.lp-faq { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin: 0 auto; }
.lp-faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    transition: border-color 150ms var(--ease);
}
.lp-faq-item[open] { border-color: rgba(99,102,241,.4); }
.lp-faq-q {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::after {
    content: '+';
    font-size: 18px;
    font-weight: 300;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 200ms var(--ease);
}
.lp-faq-item[open] .lp-faq-q::after { transform: rotate(45deg); }
.lp-faq-a {
    padding: 0 20px 16px;
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}
.lp-disclaimer {
    margin-top: 40px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ── Footer ── */
.lp-footer { border-top: 1px solid var(--border); padding: 28px 0; }
.lp-footer-inner { display: flex; align-items: center; }
.lp-footer-copy { font-size: 13px; color: var(--text-muted); flex: 1; }
.lp-footer-links { display: flex; gap: 24px; }
.lp-footer-links a {
    font-size: 13px; color: var(--text-sub); transition: color 150ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lp-footer-links a:hover { color: var(--text); }
}

/* ── Interactive effects ── */

/* Feature cards: shimmer sweep + tilt lift + icon spring */
.lp-features .lp-feature {
    position: relative; overflow: hidden;
    transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 220ms var(--ease);
    will-change: transform;
}
.lp-features .lp-feature::after {
    content: '';
    position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    transform: skewX(-12deg);
    transition: left 600ms ease;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .lp-features .lp-feature:hover {
        transform: translateY(-6px) rotate(-0.5deg);
        box-shadow: 0 24px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(99,102,241,.3);
        border-color: rgba(99,102,241,.35);
    }
    .lp-features .lp-feature:hover::after { left: 150%; }
    .lp-features .lp-feature:hover .lp-feature-icon { transform: scale(1.12) rotate(-8deg); }
    .lp-features .lp-feature:nth-child(even):hover { rotate: 0.5deg; }
}
.lp-features .lp-feature .lp-feature-icon { transition: transform 300ms var(--spring); }

/* Feature cards stagger entrance */
.lp-features .lp-feature { animation: card-in 360ms var(--ease) both; }
.lp-features .lp-feature:nth-child(1) { animation-delay: 0ms; }
.lp-features .lp-feature:nth-child(2) { animation-delay: 70ms; }
.lp-features .lp-feature:nth-child(3) { animation-delay: 140ms; }
.lp-features .lp-feature:nth-child(4) { animation-delay: 210ms; }

/* Step icons: spring scale + glow */
.lp-step-icon { transition: transform 280ms var(--spring), box-shadow 280ms var(--ease); }
.lp-step-title { transition: color 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .lp-step:hover .lp-step-icon {
        transform: scale(1.15);
        box-shadow: 0 0 28px rgba(99,102,241,.45);
    }
    .lp-step:hover .lp-step-title { color: #a5b4fc; }
}

/* Hero PDF card: 3D tilt on container hover */
.hero-pdf-card {
    transition: transform 450ms var(--ease), box-shadow 450ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lp-hero-visual:hover .hero-pdf-card {
        transform: perspective(900px) rotateY(-10deg) rotateX(6deg) translateY(-8px);
        box-shadow: 28px 44px 80px rgba(0,0,0,.6), 0 0 56px rgba(99,102,241,.14);
    }
}

/* Trust logos: bounce lift */
.lp-trust-logos span {
    display: inline-block;
    transition: color 150ms var(--ease), transform 220ms var(--spring);
    cursor: default;
}
@media (hover: hover) and (pointer: fine) {
    .lp-trust-logos span:hover { color: var(--text); transform: translateY(-4px); }
}

/* CTA box: pulsing glow border */
@keyframes cta-pulse {
    0%, 100% { border-color: rgba(99,102,241,.2); box-shadow: none; }
    50%       { border-color: rgba(99,102,241,.5); box-shadow: 0 0 48px rgba(99,102,241,.12); }
}
.lp-cta-inner { animation: cta-pulse 5s ease-in-out infinite; }

/* Nav logo: spring rotate on hover */
.lp-brand .nav-brand-icon {
    transition: transform 280ms var(--spring), box-shadow 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .lp-brand:hover .nav-brand-icon {
        transform: rotate(-10deg) scale(1.1);
        box-shadow: 0 0 22px var(--accent-glow);
    }
}

/* Hero content stagger entrance */
@keyframes hero-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-hero-content > * { animation: hero-in 480ms var(--ease) both; }
.lp-hero-content > *:nth-child(1) { animation-delay: 0ms; }
.lp-hero-content > *:nth-child(2) { animation-delay: 80ms; }
.lp-hero-content > *:nth-child(3) { animation-delay: 150ms; }
.lp-hero-content > *:nth-child(4) { animation-delay: 220ms; }
.lp-hero-content > *:nth-child(5) { animation-delay: 280ms; }
.lp-hero-visual { animation: hero-in 560ms var(--ease) 100ms both; }

/* Metric rows: highlight on card hover */
.hero-pdf-card .hero-metric-row {
    transition: background 200ms var(--ease), padding-left 200ms var(--ease);
    border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
    .hero-pdf-card:hover .hero-metric-row:hover {
        background: rgba(255,255,255,.04);
        padding-left: 4px;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .lp-hero { padding: 60px 0 40px; }
    .lp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .lp-hero-visual { display: none; }
    .lp-hero-sub { font-size: 15px; }
    .lp-trust-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .lp-steps { flex-direction: column; gap: 0; }
    .lp-step { padding: 20px 0; }
    .lp-step-connector { transform: rotate(90deg); padding: 4px 0; }
    .lp-features { grid-template-columns: 1fr; }
    .lp-cta-inner { padding: 52px 24px; }
    .lp-section { padding: 60px 0; }
    .lp-footer-links { gap: 16px; }
}

/* ── Chart group tabs ───────────────────────────── */
.group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.group-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-xs);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms var(--ease), color 150ms var(--ease),
                border-color 150ms var(--ease), box-shadow 150ms var(--ease),
                transform .16s var(--ease);
    white-space: nowrap;
}
.group-tab:hover {
    border-color: rgba(99,102,241,.35);
    color: var(--text);
    background: rgba(99,102,241,.08);
}
.group-tab:active { transform: scale(0.97); }
.group-tab.active {
    background: var(--tab-color, var(--accent));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.group-tab-count {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,.18);
    border-radius: 6px;
    padding: 1px 6px;
    line-height: 1.4;
}
.group-tab:not(.active) .group-tab-count {
    background: rgba(99,102,241,.15);
    color: var(--text-muted);
}

/* ── Modal group header ─────────────────────────── */
.modal-group-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 4px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.modal-group-header:first-child { padding-top: 4px; }


/* ── Duplicate warning ──────────────────────────── */
.modal-duplicate-warn {
    margin: 0 24px 8px;
    padding: 10px 14px;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 8px;
    font-size: 13px;
    color: #fbbf24;
    flex-shrink: 0;
}
.btn-ghost--warn {
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.4);
}
.btn-ghost--warn:hover { background: rgba(245,158,11,.1); color: #fbbf24; }

/* ── Theme toggle button ────────────────────────── */
.theme-toggle-btn {
    width: 34px; height: 34px; border-radius: var(--r-xs);
    background: rgba(255,255,255,.06); border: 1px solid var(--border);
    color: var(--text-sub); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms var(--ease), color 150ms var(--ease), transform 160ms var(--ease);
    flex-shrink: 0;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.theme-toggle-btn:active { transform: scale(0.94); }
html[data-theme="light"] .theme-toggle-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,.09); color: var(--text); }

/* ── Group tabs: horizontal scroll on mobile ─────── */
@media (max-width: 600px) {
    .group-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .group-tabs::-webkit-scrollbar { display: none; }
}