/* ============================================================
   FinSight Design System — Phase 1 Foundation
   ============================================================
   
   Source of Truth:
   - palette.scss  → Darkmode color mapping
   - Next steps, Fin-Sight.rtf → Typography & Grid spec
   - Font/Satoshi → Primary UI + Heading font (local .woff2)

   Tokens defined here:
   --type-*       Typography scale (Major Third ~1.25, rem)
   --space-*      8pt spacing scale (rem)
   --grid-*       12/8/4 column grid tokens
   --dm-*         Darkmode palette tokens mapped to palette.scss
   --lh-*         Line-height tokens

   Readability targets (WCAG):
   - html base: 16px (100%)
   - Body text ≥ 1rem, line-height ≥ 1.5
   - Nav / Buttons / Inputs / Table cells / Card body ≥ 0.875rem (14px)
   - Secondary labels ≥ 0.8125rem (13px)
   - No critical UI below 14px

   Darkmode mapping (palette.scss → CSS tokens):
   - onyx #141414       → --dm-bg-body   (body background)
   - carbon-black #222  → --dm-bg-surface (panels / cards)
   - graphite #383838   → --dm-bg-strategy (strategy cards, visibly lighter)
   - charcoal #4f4f4f   → --dm-border (borders / dividers)
   - silver #ababab     → --dm-text-secondary
   - platinum #f0f4f5   → --dm-text-primary
   - cool-sky #5cb0ff   → --dm-accent
   - icy-blue #abe2ff   → --dm-accent-soft
   - gold #fcd200       → Supporter badge ONLY (--color-supporter-gold)

   ============================================================ */

/* --- Utility: screen-reader only --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   0. FONTS  — Satoshi (local, primary) + legacy fallbacks
   ============================================================ */

/* Satoshi Variable (covers 300-900 weight range) */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* Satoshi Medium (500) — explicit for environments without variable font support */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Satoshi Bold (700) */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Satoshi Black (900) — for display headings */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Legacy fallbacks kept for pages that may still reference them */
@font-face {
    font-family: 'Switzer';
    src: url('../fonts/Switzer/Switzer-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plein';
    src: url('../fonts/Plein/Plein-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plein';
    src: url('../fonts/Plein/Plein-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. DESIGN TOKENS (ROOT)
   ============================================================ */

:root {
    /* --- 1.1 Grid System (12 col desktop, 8 tablet, 4 mobile) --- */
    --grid-desktop: 12;
    --grid-tablet: 8;
    --grid-mobile: 4;
    --grid-gap: 1.5rem; /* 24px default gap */

    /* --- 1.2 Spacing Scale (8pt / 0.5rem base) --- */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px */
    --space-6: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */
    --space-12: 6rem;    /* 96px */

    /* --- 1.3 Typography Scale (Major Third ~1.25) --- */
    --type-small: 0.875rem;    /* 14px — increased for readability */
    --type-base: 1.0625rem;    /* 17px — increased globally */
    --type-md: 1.25rem;        /* 20px */
    --type-lg: 1.5625rem;      /* 25px */
    --type-xl: 1.953rem;       /* 31.25px */
    --type-xxl: 2.441rem;      /* 39px */
    --type-display: 3.052rem;  /* 48.8px */

    /* Line Heights */
    --lh-body: 1.5;          /* ~150% for body text */
    --lh-heading: 1.2;       /* tighter for headings */
    --lh-tight: 1.1;         /* display / hero */

    /* Letter Spacing */
    --ls-heading: -0.015em;  /* slightly tighter for large headings */
    --ls-display: -0.025em;  /* tighter for display text */

    /* Fonts — Satoshi as primary UI + heading font */
    --font-primary: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* --- 1.4 Color Roles (60-30-10 Preparation) --- */
    /* Light Mode Defaults */
    --role-neutral-bg: #ffffff;
    --role-neutral-surface: #f8fafc;
    --role-primary: #1e3a8a;       /* Deep financial blue */
    --role-secondary: #64748b;     /* Slate gray */
    --role-accent: #0ea5e9;        /* Bright blue */
    --role-text-main: #0f172a;
    --role-text-muted: #334155;
    --role-border: #e2e8f0;

    /* Legacy Variables Mapped to New System where possible */
    --color-bg-body: var(--role-neutral-bg);
    --color-bg-card: #ffffff;
    --color-bg-subtle: var(--role-neutral-surface);
    --color-text-primary: var(--role-text-main);
    --color-text-secondary: var(--role-text-muted);
    --color-brand-primary: var(--role-primary);
    --border-subtle: var(--role-border);

    /* Keep existing specialized vars for now */
    --color-brand-secondary: #0ea5e9;
    --color-brand-accent: #0284c7;
    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;

    /* Supporter badge — gold reserved exclusively for this */
    --color-supporter-gold: #fcd200;

    /* --- 1.5 Fear & Greed Semantic Colors --- */
    --fg-extreme-fear: #ef4444;
    --fg-fear: #f97316;
    --fg-neutral: #eab308;
    --fg-greed: #84cc16;
    --fg-extreme-greed: #22c55e;
    --fg-default: #94a3b8;
    --fg-track: #f1f5f9;

    /* Gradient for primary buttons */
    --gradient-blue: linear-gradient(135deg, #1e3a8a, #0ea5e9);

    --shadow-sm: 0 1px 2px 0 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 25px -5px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   2. DARK MODE THEME — mapped from palette.scss
   ============================================================
   onyx #141414       → body bg
   carbon-black #222  → surface / panels
   graphite #383838   → strategy cards (visibly lighter than surface)
   charcoal #4f4f4f   → borders / dividers
   platinum #f0f4f5   → primary text
   silver #ababab     → secondary text
   cool-sky #5cb0ff   → accent
   icy-blue #abe2ff   → accent soft (links, highlights)
   gold #fcd200       → supporter badge only
   ============================================================ */

html.dark {
    /* --- 2.1 Dark Mode Palette Tokens (from palette.scss) --- */
    --dm-bg-body: #141414;        /* onyx */
    --dm-bg-surface: #222222;     /* carbon-black */
    --dm-bg-elevated: #2c2c2c;   /* between carbon-black & graphite */
    --dm-bg-strategy: #383838;   /* graphite — visibly lighter than surface */
    --dm-border: #4f4f4f;         /* charcoal */
    --dm-text-primary: #ffffff;   /* pure white */
    --dm-text-secondary: #ffffff; /* almost white */
    --dm-text-muted: #f8fafc;     /* boosted for readability */
    --dm-accent: #5cb0ff;         /* cool-sky */
    --dm-accent-soft: #abe2ff;    /* icy-blue */

    /* Fear & Greed — slightly brighter for dark backgrounds */
    --fg-extreme-fear: #f87171;
    --fg-fear: #fb923c;
    --fg-neutral: #facc15;
    --fg-greed: #a3e635;
    --fg-extreme-greed: #4ade80;
    --fg-default: #64748b;
    --fg-track: #1e2130;

    /* --- 2.2 Role Mapping --- */
    --role-neutral-bg: var(--dm-bg-body);
    --role-neutral-surface: var(--dm-bg-surface);
    --role-primary: var(--dm-accent);
    --role-text-main: var(--dm-text-primary);
    --role-text-muted: var(--dm-text-muted);
    --role-border: var(--dm-border);

    /* --- 2.3 Legacy Overrides Remapped --- */
    --color-bg-body: var(--dm-bg-body);
    --color-bg-card: var(--dm-bg-surface);
    --color-bg-subtle: var(--dm-bg-elevated);
    --color-text-primary: var(--dm-text-primary);
    --color-text-secondary: var(--dm-text-secondary);
    --color-brand-primary: var(--dm-accent);
    --border-subtle: var(--dm-border);
    --border-focus: var(--dm-border);
    --border-metallic: 1px solid var(--dm-border);

    /* Specific overrides for consistent graphite theme */
    --color-metallic-light: var(--dm-bg-elevated);
    --color-metallic-medium: var(--dm-bg-strategy);
    --color-metallic-dark: var(--dm-border);

    /* Shadows softened for dark mode */
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.4);
    --shadow-md: 0 4px 8px -1px rgba(0,0,0,0.5);
    --shadow-card-hover: 0 8px 30px -4px rgba(0,0,0,0.5);

    /* Gradients remapped to graphite tones */
    --gradient-silver: linear-gradient(135deg, var(--dm-bg-surface) 0%, var(--dm-bg-elevated) 100%);
    --gradient-metallic: linear-gradient(145deg, var(--dm-bg-surface) 0%, var(--dm-bg-elevated) 100%);
    --gradient-premium-card: linear-gradient(145deg, var(--dm-bg-surface) 0%, var(--dm-bg-body) 100%);
    --gradient-blue: linear-gradient(135deg, var(--dm-accent), #0ea5e9);
}

/* ============================================================
   3. GLOBAL TYPOGRAPHY & RESET
   ============================================================ */

html {
    font-size: 100%; /* 16px base — do not change */
}

body {
    font-family: var(--font-primary);
    font-weight: 500;              /* Satoshi Medium — better readability default */
    font-size: var(--type-base);   /* 1rem = 16px */
    line-height: var(--lh-body);   /* 1.5 = 150% */
    color: var(--color-text-primary);
    background-color: var(--color-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

h1 { font-size: var(--type-xxl); letter-spacing: var(--ls-display); }
h2 { font-size: var(--type-xl); }
h3 { font-size: var(--type-lg); }
h4 { font-size: var(--type-md); }
h5, h6 { font-size: var(--type-base); }

p { margin-bottom: var(--space-2); }

/* ============================================================
   3a. READABILITY ENFORCEMENT
   ============================================================
   Tailwind's text-xs = 12px — too small for most UI.
   We override critical Tailwind utilities so inline classes
   meet our 13-14px minimum without touching HTML files.
   ============================================================ */

/* text-xs: raise from 12px → 13px (secondary labels minimum) */
.text-xs {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.25rem !important;
}

/* text-sm: raise from 14px → 15px for better body readability */
.text-sm {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.375rem !important;
}

/* text-[10px] and text-[9px]: raise to 13px minimum */
.text-\[10px\] {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.125rem !important;
}
.text-\[9px\] {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.125rem !important;
}
.text-\[11px\] {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.125rem !important;
}

/* Nav, buttons, inputs, table cells, card body: enforce ≥ 14px */
nav a, nav button,
.nav-link,
button, [type="button"], [type="submit"],
input, select, textarea,
table td, table th,
.card-strategy p, .card-strategy span {
    font-size: max(0.875rem, 1em); /* at least 14px */
}

/* ============================================================
   3b. TYPOGRAPHY UTILITY CLASSES (fs- prefix)
   ============================================================ */

/* Grid container */
.fs-grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop), 1fr);
    gap: var(--grid-gap);
}
@media (max-width: 1024px) {
    .fs-grid-container { grid-template-columns: repeat(var(--grid-tablet), 1fr); }
}
@media (max-width: 640px) {
    .fs-grid-container { grid-template-columns: repeat(var(--grid-mobile), 1fr); }
}

/* Spacing utilities */
.fs-space-1  { padding: var(--space-1); }
.fs-space-2  { padding: var(--space-2); }
.fs-space-3  { padding: var(--space-3); }
.fs-space-4  { padding: var(--space-4); }
.fs-space-5  { padding: var(--space-5); }
.fs-space-6  { padding: var(--space-6); }
.fs-space-8  { padding: var(--space-8); }
.fs-space-10 { padding: var(--space-10); }
.fs-space-12 { padding: var(--space-12); }

.fs-gap-1  { gap: var(--space-1); }
.fs-gap-2  { gap: var(--space-2); }
.fs-gap-3  { gap: var(--space-3); }
.fs-gap-4  { gap: var(--space-4); }
.fs-gap-5  { gap: var(--space-5); }

/* Type scale utilities */
.fs-type-display {
    font-size: var(--type-display);
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
}
.fs-type-xxl {
    font-size: var(--type-xxl);
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
}
.fs-type-xl {
    font-size: var(--type-xl);
    font-family: var(--font-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}
.fs-type-lg  { font-size: var(--type-lg);  font-family: var(--font-heading); line-height: var(--lh-heading); }
.fs-type-md  { font-size: var(--type-md);  line-height: var(--lh-body); }
.fs-type-base { font-size: var(--type-base); line-height: var(--lh-body); }
.fs-type-small { font-size: var(--type-small); line-height: 1.4; }

/* ============================================================
   4. COMPONENT OVERRIDES & LEGACY SUPPORT
   ============================================================ */

/* Ensure smooth transitions */
body, nav, footer, .card-strategy, .card-preview-wrap, .table-wrapper, .modal-content, input, select, textarea {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

/* --- Dark Mode Specific Component Overrides (single canonical rules) --- */

/* Strategy Cards — MUST be graphite (#383838), visibly lighter than surface (#222) */
html.dark .card-strategy {
    background-color: var(--dm-bg-strategy) !important;
    border-color: var(--dm-border) !important;
}

/* Table Wrapper */
html.dark .table-wrapper {
    background-color: var(--dm-bg-surface);
    border-color: var(--dm-border);
}

/* Modals */
html.dark .modal-content {
    background-color: var(--dm-bg-surface);
    border-color: var(--dm-border);
}

/* Tailwind-style class overrides for Dark Mode (Legacy Compatibility) */
html.dark .bg-white { background-color: var(--dm-bg-surface) !important; }
html.dark .bg-slate-50 { background-color: var(--dm-bg-body) !important; }
html.dark .bg-slate-100 { background-color: var(--dm-bg-elevated) !important; }
html.dark .border-slate-200 { border-color: var(--dm-border) !important; }
html.dark .text-slate-900 { color: var(--dm-text-primary) !important; }
html.dark .text-slate-800 { color: var(--dm-text-primary) !important; }
html.dark .text-slate-700 { color: var(--dm-text-secondary) !important; }
html.dark .text-slate-600 { color: var(--dm-text-secondary) !important; }
html.dark .text-slate-500 { color: var(--dm-text-muted) !important; }
html.dark .text-slate-400 { color: var(--dm-text-muted) !important; }

/* Stock Detail Specifics */
html.dark #stockContent .bg-white { background-color: var(--dm-bg-surface) !important; }
html.dark #stockContent .bg-slate-50 { background-color: var(--dm-bg-elevated) !important; }

/* Inputs */
html.dark input, html.dark select, html.dark textarea {
    background-color: var(--dm-bg-body) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* Navbar / Footer */
html.dark footer { background-color: var(--dm-bg-surface) !important; border-color: var(--dm-border) !important; }
html.dark #slideMenu { background-color: var(--dm-bg-surface) !important; }

/* Dark mode link accents — use cool-sky / icy-blue */
html.dark a:not([class]) { color: var(--dm-accent-soft); }
html.dark .text-blue-600, html.dark .text-blue-700 { color: var(--dm-accent) !important; }
html.dark .hover\:text-blue-700:hover { color: var(--dm-accent-soft) !important; }

/* Dark mode surfaces for common patterns */
html.dark .bg-blue-50, html.dark .bg-emerald-50, html.dark .bg-amber-50 {
    background-color: var(--dm-bg-elevated) !important;
}
html.dark .bg-orange-50, html.dark .bg-purple-50, html.dark .bg-violet-50,
html.dark .bg-teal-50, html.dark .bg-indigo-50, html.dark .bg-green-50,
html.dark .bg-red-50 {
    background-color: var(--dm-bg-elevated) !important;
}
html.dark .bg-blue-100, html.dark .bg-emerald-100, html.dark .bg-amber-100,
html.dark .bg-purple-100, html.dark .bg-indigo-100, html.dark .bg-teal-100,
html.dark .bg-green-100, html.dark .bg-red-100, html.dark .bg-yellow-100,
html.dark .bg-orange-100 {
    background-color: var(--dm-bg-strategy) !important;
}
html.dark .border-slate-300 { border-color: var(--dm-border) !important; }

/* Gradient overrides for inhalt.html quick-nav cards */
html.dark .from-blue-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .to-indigo-50 { --tw-gradient-to: var(--dm-bg-elevated) !important; }
html.dark .from-emerald-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .to-teal-50 { --tw-gradient-to: var(--dm-bg-elevated) !important; }
html.dark .from-amber-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .to-orange-50 { --tw-gradient-to: var(--dm-bg-elevated) !important; }
html.dark .from-purple-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .to-violet-50 { --tw-gradient-to: var(--dm-bg-elevated) !important; }
html.dark .from-green-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .from-red-50 { --tw-gradient-from: var(--dm-bg-surface) !important; }
html.dark .via-white { --tw-gradient-via: var(--dm-bg-surface) !important; }
html.dark .to-white { --tw-gradient-to: var(--dm-bg-surface) !important; }

/* Dark mode text overrides for colored text on dark backgrounds */
html.dark .text-blue-900 { color: var(--dm-accent) !important; }
html.dark .text-blue-800 { color: var(--dm-accent) !important; }
html.dark .text-purple-600, html.dark .text-purple-700 { color: #c084fc !important; }
html.dark .text-orange-600, html.dark .text-orange-700 { color: #fb923c !important; }
html.dark .text-amber-600, html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-teal-600 { color: #2dd4bf !important; }
html.dark .text-green-600, html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-red-600, html.dark .text-red-700 { color: #f87171 !important; }

/* Dark mode border overrides for colored borders */
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: var(--dm-border) !important; }
html.dark .border-purple-100 { border-color: var(--dm-border) !important; }
html.dark .border-orange-100 { border-color: var(--dm-border) !important; }
html.dark .border-amber-100 { border-color: var(--dm-border) !important; }
html.dark .border-emerald-100 { border-color: var(--dm-border) !important; }
html.dark .border-blue-500 { border-color: var(--dm-accent) !important; }

/* Dark mode hover border overrides */
html.dark .hover\:border-blue-300:hover { border-color: var(--dm-accent) !important; }
html.dark .hover\:border-purple-300:hover { border-color: #c084fc !important; }
html.dark .hover\:border-orange-300:hover { border-color: #fb923c !important; }
html.dark .hover\:border-amber-300:hover { border-color: #fbbf24 !important; }
html.dark .hover\:border-emerald-300:hover { border-color: #34d399 !important; }

/* Dark mode: slate-colored badge backgrounds */
html.dark .bg-slate-200 { background-color: var(--dm-bg-strategy) !important; }

/* --- Hover State Overrides for Dark Mode --- */
/* Tailwind hover:bg- classes produce white flash in dark. Remap to elevated. */
html.dark .hover\:bg-slate-50:hover { background-color: var(--dm-bg-elevated) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: var(--dm-bg-elevated) !important; }
html.dark .hover\:bg-slate-200:hover { background-color: var(--dm-bg-strategy) !important; }
html.dark .hover\:bg-white:hover { background-color: var(--dm-bg-elevated) !important; }
html.dark .hover\:bg-blue-50:hover { background-color: var(--dm-bg-elevated) !important; }
/* Search results & suggestions container bg in dark */
html.dark .divide-slate-50 { --tw-divide-opacity: 1; --tw-divide-color: var(--dm-border); }
html.dark .bg-slate-50\/50 { background-color: var(--dm-bg-body) !important; }
html.dark .border-slate-100 { border-color: var(--dm-border) !important; }

/* --- Body BG: ensure bg-white on <body> maps to onyx, not surface --- */
html.dark body.bg-white { background-color: var(--dm-bg-body) !important; }

/* Nav / Footer dark hover: text accent links */
html.dark .hover\:text-\[\#1e3a8a\]:hover { color: var(--dm-accent) !important; }
html.dark .group:hover .group-hover\:text-\[\#1e3a8a\] { color: var(--dm-accent) !important; }
html.dark .text-\[\#1e3a8a\] { color: var(--dm-accent) !important; }
html.dark .text-\[\#0ea5e9\] { color: var(--dm-accent-soft) !important; }
html.dark .from-\[\#1e3a8a\] { --tw-gradient-from: var(--dm-accent) !important; }
html.dark .to-\[\#0ea5e9\] { --tw-gradient-to: var(--dm-accent-soft) !important; }

/* ============================================================
   5. EXISTING COMPONENT STYLES (Preserved & Mapped)
   ============================================================ */

/* ---- 5a. Card Preview Architecture (from finsight-dark reference) ---- */

/* Card wrapper — replaces old card-strategy for index.html grid cards */
.card-preview-wrap {
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.875rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    display: block;
    text-decoration: none;
    color: inherit;
}
.card-preview-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.08);
}
html.dark .card-preview-wrap {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border);
}
html.dark .card-preview-wrap:hover {
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.35);
    border-color: var(--dm-accent) !important;
}

/* Visual preview area (top half of card) */
.card-preview {
    position: relative;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decorative gradient backgrounds per strategy */
.preview-defensive { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #e8f5e9 100%); }
.preview-smartrisk { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #e3f2fd 100%); }
.preview-stalwart  { background: linear-gradient(135deg, #ecfeff 0%, #bae6fd 50%, #ecfeff 100%); }
.preview-dynamisch { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 50%, #fff3e0 100%); }
.preview-hyperscale{ background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 50%, #fff1f2 100%); }
.preview-buffett   { background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #fff8e1 100%); }

html.dark .preview-defensive { background: linear-gradient(135deg, #0f1520 0%, #162030 50%, #0a1018 100%); }
html.dark .preview-smartrisk { background: linear-gradient(135deg, #0e1a0e 0%, #142814 50%, #0a120a 100%); }
html.dark .preview-stalwart  { background: linear-gradient(135deg, #0b1720 0%, #123041 50%, #09131a 100%); }
html.dark .preview-dynamisch { background: linear-gradient(135deg, #1a0e20 0%, #280e36 50%, #120a1a 100%); }
html.dark .preview-hyperscale{ background: linear-gradient(135deg, #220f16 0%, #3a1222 50%, #180b12 100%); }
html.dark .preview-buffett   { background: linear-gradient(135deg, #1a1200 0%, #2a1c00 50%, #120e00 100%); }

.preview-chart {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;
}
.chart-svg { width: 100%; height: 100%; }

/* Stock count badge on preview */
.stock-count-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 0.5rem;
    padding: 4px 10px;
    font-size: var(--type-small);
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--role-text-muted);
    backdrop-filter: blur(6px);
}
html.dark .stock-count-badge {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
    color: var(--dm-text-muted);
}

/* Card info bar (bottom section) */
.card-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-subtle);
}
html.dark .card-info { border-color: var(--dm-border); }

.card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}
html.dark .card-icon {
    background-color: var(--dm-bg-elevated) !important;
}

.card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}
.card-desc {
    font-size: var(--type-small);
    color: var(--role-text-muted);
    margin-top: 1px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* ---- 5b. Sentiment / Fear & Greed Panel ---- */
.fg-panel {
    background: var(--color-bg-card);
    border-radius: 0.75rem;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
html.dark .fg-panel {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border);
}
.fg-panel-inner {
    /* gauge side pane (uses bg-slate-50/50 in HTML) */
}

/* Recently viewed chip */
.recently-viewed-chip {
    transition: border-color 0.15s, box-shadow 0.15s;
}
html.dark .recently-viewed-chip {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
}
html.dark .recently-viewed-chip:hover {
    border-color: var(--dm-accent) !important;
}

/* ---- 5c. Card Stats (old cards still used on some pages) ---- */
.card-stats {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}
html.dark .card-stats { border-color: var(--dm-border); }
.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-label {
    font-size: var(--type-small);
    color: var(--role-text-muted);
}
.stat-value {
    font-size: var(--type-small);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Navigation */
.nav-link {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.875rem; /* 14px minimum */
    color: var(--color-text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}
.nav-link:hover {
    color: var(--color-brand-primary);
    background: var(--color-bg-subtle);
}

/* Strategy Cards (Base) */
.card-strategy {
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: var(--space-4); /* 32px */
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.card-strategy:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-brand-primary);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-blue);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: var(--font-primary);
}

.btn-secondary {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--border-subtle);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: var(--font-primary);
}

/* Data Tables */
.table-wrapper {
    background: var(--color-bg-card);
    border-radius: 0.75rem;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

table.data-table th {
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem; /* 13px — raised from 12px for readability */
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

table.data-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--color-text-primary);
}

/* Strategy Table: column separators for clarity */
table.data-table.defensive-table th,
table.data-table.defensive-table td {
    border-right: 1px solid var(--border-subtle);
}
table.data-table.defensive-table th:last-child,
table.data-table.defensive-table td:last-child {
    border-right: none;
}

/* ─── Sticky Header & Column for strategy tables ─── */
.strategy-table-scroll {
    overflow-x: auto;
}
table.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--color-bg-subtle);
}
table.data-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: var(--color-bg-subtle);
    border-right: 1px solid var(--border-subtle);
}
/* Header + sticky column intersection needs highest z-index */
table.data-table thead th.sticky-col {
    z-index: 30;
}

/* Badge: criteria met (green) / not met (red) */
.badge-success {
    background-color: #dcfce7;
    color: #166534;
}
.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}
html.dark .badge-success {
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
html.dark .badge-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Stock name link styling */
.stock-link {
    color: var(--role-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s;
}
.stock-link:hover {
    color: var(--color-brand-secondary);
}
html.dark .stock-link {
    color: var(--dm-accent);
}
html.dark .stock-link:hover {
    color: var(--dm-accent-soft);
}

/* ─── Strategy Guide Table: compact layout (shared across all guide pages) ─── */
table.data-table.defensive-table {
    font-size: 0.9rem;
}
table.data-table.defensive-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    word-break: break-word;
    text-align: center;
}
table.data-table.defensive-table th {
    padding: 0.75rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    word-break: break-word;
    text-align: center;
}
table.data-table.defensive-table .sticky-col {
    padding: 0.5rem 0.75rem;
}

/* Compact badge for metric values (guide tables + builder) */
.badge-metric-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.8rem;
    min-width: 45px;
}

/* Ticker column: always show clipboard icon */
.ticker-col svg.clipboard-icon {
    opacity: 0.4;
    transition: opacity 0.15s;
}
.ticker-col:hover svg.clipboard-icon {
    opacity: 1;
}

/* Layout Containers */
.container-custom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}
.container-wide {
    width: 100%;
    max-width: 98%;
    margin: 0 auto;
    padding: 0 var(--space-3);
}
.section-padding {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* Dark Mode Toggle (Pill) */
.darkmode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.darkmode-toggle::after {
    content: '';
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.3s;
}
html.dark .darkmode-toggle { background: var(--role-primary); }
html.dark .darkmode-toggle::after { transform: translateX(18px); background: #f8fafc; }

/* Dollar Shine Animation (Preserved) */
@keyframes dollarShine {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.flash-highlight {
    background: linear-gradient(90deg, transparent 0%, rgba(22, 163, 74, 0.1) 15%, rgba(245, 158, 11, 0.3) 50%, rgba(22, 163, 74, 0.1) 85%, transparent 100%);
    background-size: 200% auto;
    animation: dollarShine 2s linear infinite;
    border-top: 2px solid #f59e0b !important;
    border-bottom: 2px solid #f59e0b !important;
}

/* ---- 6. Section Label (finsight-dark pattern) ---- */
.section-label {
    font-size: var(--type-small); /* 13px */
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}
html.dark .section-label {
    color: var(--dm-text-secondary);
}

/* ---- 7. Card Grid (full-width rows) ---- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
}

/* Full-width strategy row card */
.card-preview-wrap.card-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: stretch;
    border-radius: 0.875rem;
    overflow: hidden;
}
.card-row .card-preview {
    height: 100%;
    min-height: 120px;
    border-radius: 0;
}
.card-row .card-info {
    border-top: none;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.card-row .card-name {
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}
.card-row .card-desc {
    font-size: var(--type-small);
    line-height: 1.55;
    color: var(--color-text-secondary);
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    max-width: none;
}
html.dark .card-row .card-desc {
    color: var(--dm-text-secondary);
    opacity: 0.7;
}
.card-row .stock-count-badge {
    position: static;
    display: inline-block;
    margin-top: 10px;
    background: rgba(30,58,138,0.06);
    border: 1px solid rgba(30,58,138,0.1);
    color: var(--role-primary);
    font-size: var(--type-small);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
}
html.dark .card-row .stock-count-badge {
    background: rgba(92,176,255,0.08);
    border-color: rgba(92,176,255,0.15);
    color: var(--dm-accent);
}
@media (max-width: 640px) {
    .card-preview-wrap.card-row {
        grid-template-columns: 1fr;
    }
    .card-row .card-preview {
        min-height: 140px;
    }
}

/* Lock badge (top-left on card preview) */
.lock-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

/* ---- 8. Sentiment Card (finsight-dark meter layout) ---- */
.sentiment-card {
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.875rem;
    overflow: hidden;
}
.sentiment-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
}
html.dark .sentiment-card {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border);
}

.sentiment-left h3 {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}
html.dark .sentiment-left h3 { color: var(--dm-text-primary); }
.sentiment-left p {
    font-size: var(--type-small);
    color: var(--color-text-secondary);
    line-height: 1.55;
    opacity: 0.85;
}
html.dark .sentiment-left p {
    color: var(--dm-text-primary);
    opacity: 0.95;
}

.sentiment-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    opacity: 0.7;
}
.sentiment-stat {
    display: flex;
    justify-content: space-between;
    font-size: var(--type-small);
    color: var(--role-text-muted);
}
html.dark .sentiment-stat { color: var(--dm-text-secondary); }
.sentiment-stat span:last-child {
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
html.dark .sentiment-stat span:last-child { color: var(--dm-text-primary); }

.sentiment-meter {
    position: relative;
}
.meter-label {
    font-size: 11px;
    color: var(--role-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
html.dark .meter-label { color: var(--dm-text-secondary); }

.meter-bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #16a34a);
    position: relative;
    margin-bottom: 4px;
}
.meter-needle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 18px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    left: 50%;
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--role-text-muted);
    margin-top: 4px;
}
html.dark .meter-labels { color: var(--dm-text-secondary); }

.meter-score {
    text-align: center;
    margin-top: 16px;
}
.meter-score-value {
    font-size: 2.75rem; /* 44px */
    font-weight: 900;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}
html.dark .meter-score-value { color: var(--dm-text-primary); }
.meter-score-label {
    display: block;
    font-size: 0.875rem; /* 14px */
    color: var(--role-text-muted);
    margin-top: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
html.dark .meter-score-label { color: var(--dm-text-secondary); }

/* Factor breakdown section (inside sentiment card) */
.fg-factors-section {
    padding: 20px 24px;
    border-top: 1px solid var(--border-subtle);
}
html.dark .fg-factors-section {
    border-color: var(--dm-border);
}

@media (max-width: 640px) {
    .sentiment-card-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: var(--type-xl); }
    .container-wide { padding: 0 var(--space-2); }
}

/* ============================================================
   9. COGNITIVE FLUENCY — Visual Hierarchy & Polish
   ============================================================ */

/* --- 9a. Card Hierarchy — consolidated into Section 7 above --- */

/* --- 9b. Skeleton Loading System --- */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite ease-in-out;
    border-radius: 6px;
}
html.dark .skeleton {
    background: linear-gradient(90deg, var(--dm-bg-surface) 25%, var(--dm-bg-elevated) 50%, var(--dm-bg-surface) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.5s infinite ease-in-out !important;
}

.skeleton-score {
    width: 72px;
    height: 44px;
    margin: 0 auto 8px;
}
.skeleton-label {
    width: 100px;
    height: 16px;
    margin: 0 auto;
}
.skeleton-bar {
    height: 10px;
    width: 100%;
    margin-bottom: 6px;
}
.skeleton-meter-bar {
    height: 10px;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 16px;
}
.skeleton-factor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.skeleton-factor-label {
    width: 120px;
    height: 12px;
    flex-shrink: 0;
}
.skeleton-factor-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
}
.skeleton-factor-val {
    width: 28px;
    height: 12px;
    flex-shrink: 0;
}

/* --- 9c. Micro-Interactions & Focus States --- */

/* All clickable elements: pointer cursor */
a[href], button, [role="button"], .card-preview-wrap {
    cursor: pointer;
}

/* Focus-visible ring (keyboard navigation) */
.card-preview-wrap:focus-visible {
    outline: 2px solid var(--role-primary);
    outline-offset: 2px;
    border-color: var(--role-primary);
}
html.dark .card-preview-wrap:focus-visible {
    outline-color: var(--dm-accent);
    border-color: var(--dm-accent) !important;
}

/* Active state (click) — subtle press feedback */
.card-preview-wrap:active {
    transform: translateY(0px);
    box-shadow: var(--shadow-sm);
    transition-duration: 0.08s;
}

/* Button hover/focus consistency */
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--role-primary);
    outline-offset: 2px;
}
html.dark button:focus-visible, html.dark a:focus-visible {
    outline-color: var(--dm-accent);
}

/* Smooth transitions on interactive elements */
a, button, .card-preview-wrap, .recently-viewed-chip {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Recently-viewed chip hover improvement */
.recently-viewed-chip:hover {
    transform: translateY(-1px);
}
.recently-viewed-chip:active {
    transform: translateY(0);
}

/* --- 9d. Fear & Greed Trust Badge --- */
.fg-trust-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 12px;
    background: rgba(30,58,138,0.04);
    border: 1px solid rgba(30,58,138,0.08);
    border-radius: 8px;
    font-size: var(--type-small);
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.fg-trust-info svg {
    flex-shrink: 0;
    opacity: 0.5;
}
html.dark .fg-trust-info {
    background: rgba(92,176,255,0.06);
    border-color: rgba(92,176,255,0.1);
    color: var(--dm-text-secondary);
}

/* --- 9e. Sentiment & Meter — consolidated into Section 8 above --- */

/* --- 9f. Testimonial / Social Proof Section --- */
.testimonial-section {
    margin-bottom: var(--space-8);
}
.testimonial-section .section-label {
    margin-bottom: 20px;
}
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.testimonial-card {
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.875rem;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
html.dark .testimonial-card {
    background: var(--dm-bg-surface);
    border-color: var(--dm-border);
}
html.dark .testimonial-card:hover {
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
}

.testimonial-quote {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    color: var(--color-text-primary);
    font-style: italic;
    position: relative;
    padding-left: 0;
}
.testimonial-quote::before {
    content: '\201C';
    font-size: 2rem;
    line-height: 1;
    color: var(--role-primary);
    opacity: 0.25;
    font-style: normal;
    position: absolute;
    top: -6px;
    left: -4px;
}
html.dark .testimonial-quote {
    color: var(--dm-text-primary);
}
html.dark .testimonial-quote::before {
    color: var(--dm-accent);
    opacity: 0.3;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    color: white;
    letter-spacing: 0.02em;
}
.testimonial-avatar.av-1 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.testimonial-avatar.av-2 { background: linear-gradient(135deg, #065f46, #10b981); }
.testimonial-avatar.av-3 { background: linear-gradient(135deg, #92400e, #f59e0b); }

.testimonial-meta {
    display: flex;
    flex-direction: column;
}
.testimonial-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    line-height: 1.3;
}
html.dark .testimonial-name { color: var(--dm-text-primary); }
.testimonial-role {
    font-size: var(--type-small);
    color: var(--color-text-secondary);
    line-height: 1.3;
}
html.dark .testimonial-role { color: var(--dm-text-secondary); }

/* --- 9g. Section label — consolidated into Section 6 above --- */

/* ============================================================
   10. PAGE-SPECIFIC DARK MODE — Consolidated from inline <style>
   ============================================================ */

/* ─── 10a. Blog Dark Mode ─── */
html.dark .blog-accordion          { background: var(--dm-bg-surface);  border-color: var(--dm-border); }
html.dark .accordion-header        { background: var(--dm-bg-surface);  color: var(--dm-text-primary); }
html.dark .accordion-header:hover  { background: var(--dm-bg-strategy); }
html.dark .accordion-content > div { background: var(--dm-bg-body);     border-color: var(--dm-border); }
html.dark .accordion-content .bg-white   { background: var(--dm-bg-surface); border-color: var(--dm-border); }
html.dark .accordion-content .bg-slate-50 { background: var(--dm-bg-body); }
html.dark .accordion-icon          { color: var(--dm-text-secondary); }
html.dark h1[data-i18n="blog_title"] { color: var(--dm-accent); }

/* ─── 10b. Nützliche Links Dark Mode ─── */
html.dark .link-card               { background-color: var(--dm-bg-surface); border-color: var(--dm-border); }
html.dark .link-card:hover         { box-shadow: 0 8px 16px rgba(0,0,0,0.4); }
html.dark .premium-badge           { background: linear-gradient(135deg, #b8a589 0%, #a08868 100%); color: var(--dm-bg-surface); }

/* ─── 10c. Shared Tailwind utility dark overrides ─── */
html.dark [style*="color: #002e5d"],
html.dark [style*="color:#002e5d"]     { color: var(--dm-accent) !important; }
html.dark .bg-blue-50                  { background-color: rgba(92,176,255,0.06) !important; }
html.dark .bg-yellow-50               { background-color: rgba(252,210,0,0.06) !important; }
html.dark .text-blue-800              { color: var(--dm-accent) !important; }
html.dark .text-yellow-800,
html.dark .text-yellow-700            { color: #fde68a !important; }
html.dark .bg-gradient-to-br.from-blue-50 { background: linear-gradient(to bottom right, var(--dm-bg-body), var(--dm-bg-surface)) !important; border-color: var(--dm-accent) !important; }

/* ============================================================
   11. NEW HEADER STYLES (From fin-sight-dark.html)
   ============================================================ */
:root {
    --header-bg: rgba(17,17,19,.88); /* Or white for light mode? User asked for "finsight-dark" look, so dark header even on light mode? Or adaptive? */
    /* Implementation note: The user likely wants the dark header style globally, or adaptive. 
       finsight-dark.html has hardcoded dark colors. 
       I will set defaults for LIGHT mode, and overrides for DARK mode, OR just use the dark style if that's the "look" desired.
       Given "finsight-dark.html" references, I'll stick to the dark theme for the header specifically, or try to adapt.
       Let's stick to the dark aesthetic for the header as requested, or maybe make it adaptive.
       The "finsight-dark.html" is fully dark. The current site has light mode.
       If I use dark header in light mode, it might look odd but distinct.
       However, the prompt said "Update header from `finsight-dark.html`", which implies the dark look.
    */
    --header-bg: #fff;
    --header-surface: #fff;
    --header-surface2: #f1f5f9;
    --header-border: #e2e8f0;
    --header-text: #0f172a;
    --header-muted: #64748b;
    --header-accent: #5b6bff;
}

html.dark {
    --header-bg: rgba(17,17,19,.88);
    --header-surface: #1a1a1e;
    --header-surface2: #222228;
    --header-border: #2e2e38;
    --header-text: #f0f0f4;
    --header-muted: #7a7a90;
}

/* Force dark header if that was the specific intent? The user said "design from finsight-dark.html". 
   If I apply light colors in light mode, I might deviate. 
   But the current site is light by default. 
   I'll assume adaptive is better, BUT with the dark html structure it looks like it wants to be dark.
   Let's use the colors from the HTML for the "Dark Mode" and decent light equivalents.
*/

/* ── NAVBAR ── */
.fs-global-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 28px;
    height: 56px;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--header-border);
    transition: background .2s, border-color .2s, box-shadow .3s;
}
/* Spacer to offset fixed header */
.nav-spacer {
    height: 56px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 20;
}
.nav-logo .nav-logo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Dark mode logo toggle */
html.dark .dark-logo-hide {
    display: none !important;
}
html.dark .dark-logo-show {
    display: block !important;
}

@font-face {
  font-family: 'Alpino-Black';
  src: url('../fonts/Logo_font/Fonts/WEB/fonts/Alpino-Black.woff2') format('woff2'),
       url('../fonts/Logo_font/Fonts/WEB/fonts/Alpino-Black.woff') format('woff'),
       url('../fonts/Logo_font/Fonts/WEB/fonts/Alpino-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

/* Logo text – clean, Anthropic-inspired */
.logo-text {
    font-size: 2rem;
    font-weight: 1000;
    font-family: 'Alpino-Black', sans-serif;
    color: var(--header-text);
    letter-spacing: -0.00001em;
    display: inline-flex;
    white-space: nowrap;
    line-height: 1.35;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-char {
    display: inline-block;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.logo-collapse {
    display: inline-block;
    max-width: 4em;           /* large enough to show full text */
    opacity: 1;
    transition: max-width .4s cubic-bezier(.4,0,.2,1),
                opacity .25s cubic-bezier(.4,0,.2,1),
                margin .35s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    vertical-align: baseline;
}

/* ── Scrolled state: collapse logo text only ── */
.fs-global-nav.nav-scrolled .logo-collapse {
    max-width: 0;
    opacity: 0;
    margin: 0;
}
.fs-global-nav.nav-scrolled .logo-text {
    font-style: italic;
    transform: skewX(-8deg); /* Ensure it slants cleanly when scrolled */
}
.fs-global-nav.nav-scrolled {
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

/* nav-links removed from header — navigation via hamburger side panel only */

/* ── SEARCH ── */
.search-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    display: flex;
    justify-content: center;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through to buttons beneath if overlapped */
}

/* Revert to flex on smaller screens to prevent overlap */
@media (max-width: 1024px) {
    .search-wrap {
        position: static;
        transform: none;
        flex: 1;
        margin: 0 16px;
    }
}

@media (max-width: 480px) {
    .search-wrap { max-width: 100%; margin: 0 12px; }
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--header-surface2);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 14px;
    height: 40px;
    transition: all .15s ease;
    pointer-events: auto; /* Re-enable pointer events for the search box itself */
}
html.dark .search-box {
    background: var(--header-surface2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.search-box:focus-within {
    border-color: var(--header-accent) !important;
    box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.15) !important;
}

html.dark .search-box:focus-within {
    background: var(--header-surface2) !important;
    border-color: var(--header-accent) !important;
    box-shadow: 0 0 0 3px rgba(91, 107, 255, 0.2) !important;
}

.search-box svg { color: var(--header-muted); flex-shrink: 0; }
.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--header-text);
    font-size: 14px;
    width: 100%;
}
html.dark .search-box input {
    background-color: transparent !important;
}
.search-box input::placeholder { color: var(--header-muted); opacity: 0.8; }

/* ── ACTIONS ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
    z-index: 20;
}

.icon-btn {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--header-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.icon-btn:hover { background: var(--header-surface2); color: var(--header-text); }

.upgrade-btn {
    padding: 0 20px;
    height: 40px;
    background: linear-gradient(135deg, var(--header-text), #334155); /* Shine base */
    color: var(--header-bg);
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800; /* Bolder */
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Shine effect */
.upgrade-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: none;
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.upgrade-btn:hover { 
    opacity: 1; 
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--header-accent), #22d3a5);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: #fff;
    cursor: pointer;
    margin-left: 8px;
    overflow: hidden;
    z-index: 20;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── MOBILE MENU (HAMBURGER) ── */
.hamburger-btn {
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--header-border);
    border-radius: 10px;
    cursor: pointer;
    display: flex; /* Always visible */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all .15s;
    margin-left: 8px;
    z-index: 20;
}
.hamburger-btn:hover { background: var(--header-surface2); }
.hamburger-btn span {
    display: block;
    width: 18px; height: 2px;
    background: var(--header-text);
    border-radius: 2px;
}

/* ── SIDE PANEL ── */
.side-panel {
    position: fixed;
    top: 0; right: 0;
    width: 300px;
    height: 100dvh; /* dynamic viewport height */
    background: var(--header-surface);
    border-left: 1px solid var(--header-border);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 50px rgba(0,0,0,.25);
}
.side-panel.open { transform: translateX(0); }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--header-border);
}
.panel-header-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--header-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.panel-close {
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--header-border);
    color: var(--header-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    transition: all .15s;
}
.panel-close:hover { background: var(--header-surface2); color: var(--header-text); }

.panel-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--header-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 24px 24px 8px;
}

.panel-nav {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.panel-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--header-text);
    transition: background .15s;
}
.panel-item:hover { background: var(--header-surface2); }
.panel-item.active { background: var(--header-surface2); color: var(--header-accent); }

.panel-item-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    /* icon background handled inline or via var */
}
.panel-item-title { font-size: 15px; font-weight: 600; }

.panel-divider {
    height: 1px;
    background: var(--header-border);
    margin: 8px 24px;
}

.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.panel-overlay.open { opacity: 1; pointer-events: all; }