/* ═══════════════════════════════════════════════════════════
   FINANCIAL EDUCATION INDONESIA — Premium Fintech Theme
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ──
   Dark is this app's native theme (bare :root = dark), light is the alternate. A visitor gets
   whichever their OS prefers by default; the header toggle can override that choice explicitly
   (stored in localStorage, wins in both directions — see the [data-theme] blocks below). */
:root {
    /* Background layers — deep navy-charcoal, not pure black */
    --bg-base: #090b10;
    /* Page ambience (see body::before/::after) */
    --ambient-gold: rgba(227, 165, 66, 0.11);
    --ambient-blue: rgba(64, 110, 214, 0.12);
    --ambient-teal: rgba(38, 160, 150, 0.09);
    --ambient-grid: rgba(255, 255, 255, 0.035);
    --ambient-noise-opacity: 0.05;
    --bg-surface: #0f131a;
    --bg-elevated: #161b24;
    --bg-panel: #12161e;
    --bg-input: #0d1117;
    --bg-hover: #1c222d;
    --bg-active: #262e3b;

    /* Borders */
    --border-primary: #232a37;
    --border-subtle: #191f29;
    --border-accent: #E3A542;
    --border-hover: #333d4c;

    /* Accent — refined gold (premium, wealth-associated, used sparingly) */
    --accent: #E3A542;
    --accent-dim: #B9832F;
    --accent-glow: rgba(227, 165, 66, 0.18);
    --accent-subtle: rgba(227, 165, 66, 0.10);
    --accent-hover: #F0BC63;
    /* Accent used as free-standing TEXT color (links, labels, prices) needs real contrast
       against the page background — the raw --accent gold above fails that on a light bg, so
       this is a separate, theme-aware token kept equal to --accent only in dark mode. */
    --accent-text: #E3A542;

    /* Text */
    --text-primary: #EDEFF3;
    --text-secondary: #97A0AF;
    --text-muted: #656E7C;
    --text-dim: #414957;
    --text-accent: #E3A542;

    /* Status */
    --status-success: #26C281;
    --status-danger: #F0495A;
    --status-warning: #F5A524;
    --status-info: #4F8EF7;
    --status-pending: #F5A524;

    /* Decorative surfaces that don't map 1:1 onto the generic bg-* roles */
    --header-glass-bg: rgba(15, 19, 26, 0.82);
    --placeholder-gradient: linear-gradient(135deg, #10141b 0%, #1b212c 50%, #10141b 100%);
    --pdf-surround-stripe: repeating-linear-gradient(45deg, #171b23 0, #171b23 10px, #14171e 10px, #14171e 20px);

    /* Typography */
    --font-ui: 'Inter', Arial, Helvetica, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    /* Serif display face for large marketing headings only (hero, section headlines). */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    /* Width of the content column that header, pages and footer all align to. */
    --container: 1200px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Sizing */
    --header-height: 60px;
    --sidebar-width: 200px;

    /* Radius — soft, modern (a deliberate step away from the old hard-edged terminal look) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);

    /* Transitions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── LIGHT THEME ──
   Applies when the OS prefers light and the user hasn't explicitly forced dark, OR when the
   user has explicitly forced light via the toggle (wins regardless of OS preference). */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-base: #EEF0F3;
        --ambient-gold: rgba(227, 165, 66, 0.16);
        --ambient-blue: rgba(64, 110, 214, 0.09);
        --ambient-teal: rgba(38, 160, 150, 0.07);
        --ambient-grid: rgba(20, 24, 31, 0.05);
        --ambient-noise-opacity: 0.035;
        --bg-surface: #F8F9FB;
        --bg-elevated: #FFFFFF;
        --bg-panel: #FFFFFF;
        --bg-input: #F2F4F7;
        --bg-hover: #E9EBEF;
        --bg-active: #DFE2E8;

        --border-primary: #DCE0E6;
        --border-subtle: #E7E9ED;
        --border-hover: #B9C0CB;

        --accent-text: #A15C00;

        --text-primary: #14181F;
        --text-secondary: #4A5160;
        --text-muted: #767E8C;
        --text-dim: #9BA2AD;
        --text-accent: #A15C00;

        --header-glass-bg: rgba(255, 255, 255, 0.82);
        --placeholder-gradient: linear-gradient(135deg, #E9EBEF 0%, #DEE1E7 50%, #E9EBEF 100%);
        --pdf-surround-stripe: repeating-linear-gradient(45deg, #E4E6EB 0, #E4E6EB 10px, #DBDEE4 10px, #DBDEE4 20px);

        --shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.08);
        --shadow-md: 0 8px 24px rgba(20, 24, 31, 0.10);
        --shadow-lg: 0 20px 48px rgba(20, 24, 31, 0.14);
        --shadow-inset: inset 0 1px 0 rgba(20, 24, 31, 0.04);
    }
}

:root[data-theme="light"] {
    --ambient-gold: rgba(227, 165, 66, 0.16);
    --ambient-blue: rgba(64, 110, 214, 0.09);
    --ambient-teal: rgba(38, 160, 150, 0.07);
    --ambient-grid: rgba(20, 24, 31, 0.05);
    --ambient-noise-opacity: 0.035;
    --bg-base: #EEF0F3;
    --bg-surface: #F8F9FB;
    --bg-elevated: #FFFFFF;
    --bg-panel: #FFFFFF;
    --bg-input: #F2F4F7;
    --bg-hover: #E9EBEF;
    --bg-active: #DFE2E8;

    --border-primary: #DCE0E6;
    --border-subtle: #E7E9ED;
    --border-hover: #B9C0CB;

    --accent-text: #A15C00;

    --text-primary: #14181F;
    --text-secondary: #4A5160;
    --text-muted: #767E8C;
    --text-dim: #9BA2AD;
    --text-accent: #A15C00;

    --header-glass-bg: rgba(255, 255, 255, 0.82);
    --placeholder-gradient: linear-gradient(135deg, #E9EBEF 0%, #DEE1E7 50%, #E9EBEF 100%);
    --pdf-surround-stripe: repeating-linear-gradient(45deg, #E4E6EB 0, #E4E6EB 10px, #DBDEE4 10px, #DBDEE4 20px);

    --shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.08);
    --shadow-md: 0 8px 24px rgba(20, 24, 31, 0.10);
    --shadow-lg: 0 20px 48px rgba(20, 24, 31, 0.14);
    --shadow-inset: inset 0 1px 0 rgba(20, 24, 31, 0.04);
}

/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.55;
    position: relative;
}

/* ── Page ambience ──
   Three quiet layers behind all content (z-index -1, no pointer events):
   1. body::before — scrolls WITH the page (absolute, full document height). Soft light pools
      placed at different heights and alternating sides, so the backdrop shifts gently as you
      scroll instead of being one flat colour.
   2. .main-container::before — a fine 64px grid over the first screenful that dissolves
      downward (masked), for a precise, "financial" feel without busy-ness.
   3. body::after — fixed, very faint film grain. Adds surface texture and hides the banding
      large soft gradients otherwise show on 8-bit displays.
   Colours come from the --ambient-* tokens so light and dark themes each get their own mix. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 12% 0%, var(--ambient-gold), transparent 70%),
        radial-gradient(820px 600px at 96% 10%, var(--ambient-blue), transparent 70%),
        radial-gradient(1000px 760px at 0% 36%, var(--ambient-teal), transparent 70%),
        radial-gradient(1000px 760px at 100% 55%, var(--ambient-blue), transparent 70%),
        radial-gradient(1000px 720px at 8% 74%, var(--ambient-gold), transparent 70%),
        radial-gradient(900px 620px at 50% 96%, var(--ambient-gold), transparent 70%);
    background-repeat: no-repeat;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--ambient-noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

::selection {
    background: var(--accent);
    color: #0a0a0a;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ══════════════════════════════════════
   HEADER / NAVIGATION BAR
   ══════════════════════════════════════ */

.header {
    height: var(--header-height);
    background: var(--header-glass-bg);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), var(--shadow-sm);
    transition: height 0.25s ease, box-shadow 0.25s ease;
}

/* Header shrinks once the page is scrolled — toggled via .header-scrolled by app.js */
.header.header-scrolled {
    height: 48px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), var(--shadow-md);
}

.header.header-scrolled .header-brand-logo {
    height: 22px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    transition: opacity 0.2s;
}

.header-brand:hover {
    opacity: 0.85;
}

.header-brand-logo-wrap {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.header-brand-logo {
    display: block;
    height: 28px;
    width: auto;
    transition: height 0.25s ease;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    position: relative;
}

.header-nav-item {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-secondary);
    padding: 0 14px;
    height: 36px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 9px;
    transition: color 0.2s var(--ease-out);
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.header-nav-item:hover {
    color: var(--text-primary);
}

.header-nav-item.active {
    color: var(--accent-text);
}

/* One shared highlight pill that slides to the hovered item and settles back on the active one.
   Position/width are measured from the real items by App.moveNavIndicator(), so it fits any
   number of items and any label length (language switch included). Hidden until first placed. */
.header-nav-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    height: 36px;
    width: 0;
    border-radius: 9px;
    background: var(--bg-hover);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, -50%);
    transition: transform 0.32s var(--ease-out), width 0.32s var(--ease-out), opacity 0.2s var(--ease-out);
    z-index: 0;
}

.header-nav-indicator::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

/* The small gold bar only shows while the pill rests on the current page's item. */
.header-nav-indicator.on-active::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .header-nav-indicator { transition: opacity 0.2s; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 var(--space-md);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.header-user-badge:hover {
    border-color: var(--text-dim);
    background: var(--bg-hover);
}

.header-user-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Header controls — one height, one radius, one font for every control in the bar ── */
.header-btn,
.header-icon-btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.header-btn {
    padding: 0 16px;
    min-width: 84px;
}

.header-icon-btn {
    width: 36px;
    padding: 0;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.header-btn:hover,
.header-icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-dim);
    color: var(--text-primary);
}

.header-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #16110a;
}

.header-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #16110a;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.header-btn:focus-visible,
.header-icon-btn:focus-visible,
.lang-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.header-actions-sep {
    width: 1px;
    height: 20px;
    background: var(--border-primary);
    margin: 0 4px;
}

/* ══════════════════════════════════════
   SITE FOOTER
   Replaces the old fixed "status bar". It's a normal in-flow footer, not position:fixed —
   the old bar permanently occupied a strip of every screen (worst on phones, where vertical
   space is scarcest) and covered page content at the bottom of long pages.
   ══════════════════════════════════════ */

.site-footer {
    background: var(--bg-surface);
    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
    border-top: 1px solid var(--border-primary);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    margin-top: var(--space-3xl);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-primary);
}

.site-footer-disclaimer {
    margin: var(--space-md) 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 920px;
}

.site-footer-disclaimer strong {
    color: var(--text-secondary);
    font-weight: 700;
}

.site-footer-brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.site-footer-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.site-footer-copy {
    font-size: 11px;
    color: var(--text-muted);
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}

.site-footer-links a {
    font-size: 11px;
    font-weight: 600;
}

.site-footer-sep {
    color: var(--text-dim);
}

.site-footer-badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--status-warning);
    background: rgba(245, 165, 36, 0.10);
    border: 1px solid rgba(245, 165, 36, 0.35);
    border-radius: var(--radius-full);
    padding: 3px 10px;
}

@media (max-width: 640px) {
    .site-footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer {
        padding: var(--space-lg);
        /* Clearance for the fixed WhatsApp button (52px + its 16px offset). Without this, the
           footer's last line sits underneath it once the page is scrolled to the bottom. */
        padding-bottom: 84px;
    }
}

/* ── Floating WhatsApp contact button — deliberately uses WhatsApp's own green rather than
   the site's gold accent, so it reads instantly as "this opens WhatsApp" regardless of theme. ── */
.wa-float-btn {
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: #25D366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 1001;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.wa-float-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.wa-float-btn .icon {
    stroke: #ffffff;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(38, 194, 129, 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 6px 2px rgba(38, 194, 129, 0.2); }
}

/* ══════════════════════════════════════
   MAIN CONTAINER
   ══════════════════════════════════════ */

.main-container {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    padding-bottom: 44px;
    animation: fadeIn 0.3s ease-out;
}

.main-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 820px;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(var(--ambient-grid) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, var(--ambient-grid) 1px, transparent 1px) 0 0 / 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}

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

@keyframes routeFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.route-fade {
    animation: routeFadeIn 0.28s var(--ease-out);
}

/* ══════════════════════════════════════
   TERMINAL PANELS (Cards)
   ══════════════════════════════════════ */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm), var(--shadow-inset);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.panel:hover {
    border-color: #2c3341;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

.panel-title {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.panel-badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--accent-subtle);
    color: var(--accent-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.panel-body {
    padding: var(--space-lg);
}

.panel-footer {
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}

/* ══════════════════════════════════════
   GRID SYSTEM
   ══════════════════════════════════════ */

.grid {
    display: grid;
    gap: 1px;
    background: var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-primary);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid > * {
    background: var(--bg-panel);
}

.grid-gap {
    gap: var(--space-md);
    background: transparent;
    border: none;
    border-radius: 0;
}

.grid-gap > * {
    background: transparent;
}

/* Responsive grid for modules */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.category-cluster:not(:last-child) {
    border-bottom: 1px solid var(--border-primary);
}

.category-cluster-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-lg) 0;
}

.category-cluster-title {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.category-cluster-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: 1px 8px;
}

/* ══════════════════════════════════════
   STAT CELLS (data blocks)
   ══════════════════════════════════════ */

.stat-cell {
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-panel);
    transition: background 0.2s;
}

.stat-cell:hover {
    background: var(--bg-elevated);
}

.stat-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-value.accent {
    color: var(--accent-text);
}

.stat-value.success {
    color: var(--status-success);
}

.stat-sub {
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: var(--space-sm);
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════
   MODULE CARDS — Interactive
   ══════════════════════════════════════ */

.module-card {
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    transition: all 0.25s var(--ease-out);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.module-card:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-dim);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.module-card:active {
    transform: translateY(-1px);
}

.module-card-inner {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.module-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.module-card-category {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.module-card-id {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-dim);
}

.module-card-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.35;
    transition: color 0.2s;
}

.module-card:hover .module-card-title {
    color: var(--accent-text);
}

.module-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: var(--space-md);
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.module-card-price {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    transition: color 0.2s;
}

.module-card:hover .module-card-price {
    color: var(--accent-text);
}

.module-card-price .currency {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 2px;
}

.module-card-meta {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.module-card-meta-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 3px 7px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s;
}

.module-card:hover .module-card-meta-tag {
    border-color: var(--text-dim);
}

.module-card-meta-tag.has-access {
    border-color: var(--status-success);
    color: var(--status-success);
    background: rgba(38, 194, 129, 0.08);
}

/* ══════════════════════════════════════
   THUMBNAIL
   ══════════════════════════════════════ */

.module-thumbnail {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-primary);
    display: block;
    background: var(--bg-elevated);
    transition: transform 0.4s var(--ease-out), filter 0.4s;
}

.module-card:hover .module-thumbnail {
    transform: scale(1.04);
    filter: brightness(1.08);
}

.module-thumbnail-placeholder {
    width: 100%;
    height: 160px;
    background: var(--placeholder-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-primary);
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.3em;
    position: relative;
    overflow: hidden;
}

.module-thumbnail-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(227, 165, 66, 0.05), transparent);
    animation: shimmer 3.5s infinite;
}

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

/* ══════════════════════════════════════
   BUTTONS — Interactive & Premium
   ══════════════════════════════════════ */

.btn {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px var(--space-lg);
    border: 1px solid var(--border-primary);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border-radius: var(--radius-md);
    white-space: nowrap;
    position: relative;
}

.btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-dim);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn:active {
    transform: translateY(0);
    background: var(--bg-active);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #D6913A 100%);
    border-color: var(--accent);
    color: #16110a;
    font-weight: 700;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
    border-color: var(--accent-hover);
    box-shadow: 0 6px 20px var(--accent-glow), var(--shadow-sm);
}

.btn-primary:active {
    background: var(--accent-dim);
    box-shadow: none;
}

.btn-danger {
    border-color: rgba(240, 73, 90, 0.4);
    color: var(--status-danger);
}

.btn-danger:hover {
    background: rgba(240, 73, 90, 0.12);
    border-color: var(--status-danger);
    box-shadow: 0 4px 16px rgba(240, 73, 90, 0.15);
}

.btn-success {
    border-color: rgba(38, 194, 129, 0.4);
    color: var(--status-success);
}

.btn-success:hover {
    background: rgba(38, 194, 129, 0.12);
    border-color: var(--status-success);
    box-shadow: 0 4px 16px rgba(38, 194, 129, 0.15);
}

.btn-sm {
    font-size: 10.5px;
    padding: 6px var(--space-md);
    border-radius: var(--radius-sm);
}

.btn-lg {
    font-size: 13px;
    padding: 15px var(--space-2xl);
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Glow pulse on CTA buttons */
.btn-glow {
    animation: btnGlow 2.5s ease-in-out infinite;
}

@keyframes btnGlow {
    0%, 100% { box-shadow: 0 4px 16px var(--accent-glow); }
    50% { box-shadow: 0 6px 28px var(--accent-glow), 0 0 40px rgba(227, 165, 66, 0.1); }
}

/* ══════════════════════════════════════
   FORMS — Polished
   ══════════════════════════════════════ */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    transition: color 0.2s;
}

.form-group:focus-within .form-label {
    color: var(--accent-text);
}

.form-input {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 13.5px;
    padding: 11px var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    outline: none;
    transition: all 0.2s var(--ease-out);
}

.form-input:hover {
    border-color: var(--border-hover);
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-elevated);
}

.form-input::placeholder {
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 12.5px;
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-ui);
}

.form-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    border: 1.5px dashed var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
    font-family: var(--font-ui);
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.form-file-label:hover {
    border-color: var(--accent);
    color: var(--text-secondary);
    background: var(--accent-subtle);
}

.form-file-label.has-file {
    border-color: var(--status-success);
    border-style: solid;
    color: var(--status-success);
    background: rgba(38, 194, 129, 0.05);
}

.form-file-label.drag-over {
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent-text);
    background: var(--accent-subtle);
    transform: scale(1.01);
}

.form-file-input {
    display: none;
}

.form-error {
    font-size: 11px;
    color: var(--status-danger);
    margin-top: var(--space-xs);
    font-family: var(--font-ui);
}

.form-help {
    font-size: 10.5px;
    color: var(--text-dim);
    margin-top: var(--space-xs);
}

/* ══════════════════════════════════════
   TABLES — Data Dense
   ══════════════════════════════════════ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

/* For tables with many columns (payment/module lists) inside an overflow-x:auto wrapper — forces
   a real horizontal scrollbar on narrow screens instead of every cell's text squeezing/wrapping
   into an unreadable stack. The simple 2-column key/value tables (e.g. module info) deliberately
   don't get this — they read fine at 100% width and don't need a scroll container at all. */
.data-table--wide {
    min-width: 640px;
}

.data-table th {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-surface);
    position: sticky;
    top: 0;
}

.data-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
    transition: background 0.15s;
}

.data-table tr:hover td {
    background: var(--bg-hover);
}

.data-table .td-mono {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
}

.data-table .td-amount {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
}

/* ══════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════ */

.badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    display: inline-block;
    transition: all 0.2s;
}

.badge-success {
    background: rgba(38, 194, 129, 0.12);
    color: var(--status-success);
    border: 1px solid rgba(38, 194, 129, 0.3);
}

.badge-pending {
    background: rgba(245, 165, 36, 0.12);
    color: var(--status-warning);
    border: 1px solid rgba(245, 165, 36, 0.3);
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.badge-danger {
    background: rgba(240, 73, 90, 0.12);
    color: var(--status-danger);
    border: 1px solid rgba(240, 73, 90, 0.3);
}

.badge-info {
    background: rgba(79, 142, 247, 0.12);
    color: var(--status-info);
    border: 1px solid rgba(79, 142, 247, 0.3);
}

/* ══════════════════════════════════════
   PAGE SECTIONS
   ══════════════════════════════════════ */

.page-section {
    padding: var(--space-lg);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-surface);
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.section-title {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.section-subtitle {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

/* ══════════════════════════════════════
   AUTH PAGES — Polished
   ══════════════════════════════════════ */

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-xl);
    position: relative;
}

.auth-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.6;
}

.auth-panel {
    width: 100%;
    max-width: 420px;
    position: relative;
    animation: slideUp 0.4s var(--ease-out);
}

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

.auth-panel .panel {
    box-shadow: var(--shadow-lg), var(--shadow-inset);
}

.auth-panel .panel-body {
    padding: var(--space-xl);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-primary);
}

.auth-divider span {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.auth-switch {
    text-align: center;
    margin-top: var(--space-lg);
    font-size: 12px;
    color: var(--text-muted);
}

.auth-switch a {
    color: var(--accent-text);
    font-weight: 600;
}

/* ══════════════════════════════════════
   MODULE DETAIL PAGE
   ══════════════════════════════════════ */

.module-detail {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-lg);
    padding: var(--space-lg);
    min-height: calc(100vh - var(--header-height) - 44px);
}

.module-detail-content {
    animation: fadeIn 0.3s ease-out;
}

.module-detail-sidebar {
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    align-self: start;
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.module-detail-price-block {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-panel) 100%);
    border: 1px solid var(--border-subtle);
}

.sidebar-access-badge {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(38, 194, 129, 0.12);
    border: 1px solid rgba(38, 194, 129, 0.3);
    color: var(--status-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-detail-price {
    font-family: var(--font-mono);
    font-size: 40px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.module-detail-price .currency {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    vertical-align: top;
    margin-right: 4px;
}

.module-detail-price-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.sidebar-actions {
    padding: var(--space-lg) 0 var(--space-md);
}

.sidebar-status-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.sidebar-status-line.success { color: var(--status-success); }

.sidebar-file-caption {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    margin: -4px 0 var(--space-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.sidebar-payments {
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-lg);
    margin-top: var(--space-sm);
}

.sidebar-payments-row {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ══════════════════════════════════════
   ADMIN PREVIEW TOOLBAR
   ══════════════════════════════════════ */

.admin-preview-toolbar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    margin: var(--space-lg) var(--space-lg) 0;
    padding: 10px var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    animation: fadeIn 0.2s ease-out;
}

.admin-preview-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-text);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-preview-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ══════════════════════════════════════
   IN-WEBSITE MODULE READER & VIEWER
   ══════════════════════════════════════ */

.module-viewer-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 6px 6px 0;
}

.module-viewer-tab {
    padding: 10px var(--space-lg);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.module-viewer-tab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.module-viewer-tab.active {
    color: var(--accent-text);
    background: var(--bg-panel);
}

.module-doc-container {
    width: 100%;
    height: 680px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.module-doc-container:fullscreen,
.module-doc-container:-webkit-full-screen {
    height: 100vh;
    border-radius: 0;
    border: none;
}

/* CSS-only pseudo-fullscreen — used instead of (well, in addition to) the native Fullscreen
   API, which several embedded/sandboxed browser contexts silently refuse via Permissions
   Policy with no reliable feature-detection. A fixed full-viewport overlay works everywhere. */
.module-doc-container.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    border: none;
}

body.doc-fullscreen-lock {
    overflow: hidden;
}

.module-doc-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.module-doc-filename {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-doc-iframe {
    width: 100%;
    flex: 1;
    min-height: 0;
    border: none;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── In-website PDF viewer (canvas-based, self-hosted pdf.js) ── */
.pdf-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-primary);
    position: sticky;
    top: 0;
    z-index: 2;
}

.pdf-page-indicator {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pdf-canvas-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--pdf-surround-stripe);
}

.pdf-canvas-wrap canvas {
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-radius: 2px;
    max-width: 100%;
    height: auto;
}

/* Video player container */
.video-container {
    width: 100%;
    background: #000;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.video-container video {
    width: 100%;
    max-height: 500px;
    display: block;
}

.video-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 320px;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-panel) 100%);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.video-locked-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.video-locked-text {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ══════════════════════════════════════
   ADMIN DASHBOARD
   ══════════════════════════════════════ */

.admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.admin-section {
    border-bottom: 1px solid var(--border-primary);
}

.upload-form {
    max-width: 640px;
}

.upload-preview {
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--status-success);
}

/* ══════════════════════════════════════
   HERO / LANDING SECTION — Premium
   ══════════════════════════════════════ */

.hero {
    padding: 72px var(--space-xl) 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid texture — depth layer, shifts gently with cursor via --mx/--my */
.hero-grid {
    position: absolute;
    z-index: 0;
    inset: -20px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
    pointer-events: none;
    transform: translate(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px));
    transition: transform 0.3s var(--ease-out);
}

/* Soft accent glow behind the headline — a calm, neutral backdrop (replaces the old price-chart
   illustration, which read like a promise of market returns). */
.hero-glow {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: -35%;
    width: min(1100px, 140%);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(227, 165, 66, 0.16) 0%, rgba(227, 165, 66, 0.06) 35%, transparent 68%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-primary) 20%, var(--border-primary) 80%, transparent);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-grid { transition: none; }
}

.hero-title {
    font-family: var(--font-ui);
    font-size: 42px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-title .accent,
.text-gradient {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 60%, var(--accent-dim) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Scroll reveal — elements fade + rise into place as they enter the viewport.
   Toggled via .in-view by App.initScrollReveal() (IntersectionObserver), re-run after every
   route render since #app-content is replaced wholesale on navigation. ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hero-subtitle {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
}

.hero-cta-row {
    margin-top: var(--space-2xl);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}

.hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    flex-shrink: 0;
}

.benefit-cell {
    display: flex;
    flex-direction: column;
}

.benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.benefit-icon.accent {
    background: var(--accent-subtle);
    border-color: rgba(227, 165, 66, 0.25);
    color: var(--accent-text);
}

.callout-benefits {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.callout-benefits > div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.callout-benefits .icon {
    color: var(--status-success);
    margin-top: 2px;
}

/* ── Curriculum teaser (non-members) — hype showcase, not a content spoiler ── */
.curriculum-teaser {
    margin: var(--space-lg);
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-panel);
    box-shadow: var(--shadow-sm);
}

.curriculum-teaser-visual {
    position: relative;
    background: linear-gradient(160deg, var(--bg-elevated) 0%, var(--bg-base) 100%);
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 260px;
    overflow: hidden;
}

.curriculum-teaser-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(227, 165, 66, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%);
}

.curriculum-teaser-play {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-subtle);
    border: 1px solid rgba(227, 165, 66, 0.3);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: btnGlow 2.5s ease-in-out infinite;
}

.curriculum-teaser-visual-label {
    position: relative;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.curriculum-teaser-body {
    padding: var(--space-2xl);
}

.curriculum-teaser-title {
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin: var(--space-sm) 0 var(--space-md);
    max-width: 520px;
}

.curriculum-teaser-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: var(--space-lg);
}

.curriculum-teaser-price-row {
    background: var(--accent-subtle);
    border: 1px solid rgba(227, 165, 66, 0.25);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    max-width: 520px;
}

.curriculum-teaser-price {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.curriculum-teaser-price strong {
    color: var(--accent-text);
    font-size: 18px;
}

.curriculum-teaser-price span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}

.curriculum-teaser-price-row .callout-benefits {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(227, 165, 66, 0.2);
}

.curriculum-teaser-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: var(--space-sm) var(--space-lg);
}

.curriculum-teaser-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.curriculum-teaser-highlight .icon {
    color: var(--accent-text);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .curriculum-teaser {
        grid-template-columns: minmax(0, 1fr);
    }
    .curriculum-teaser-visual {
        border-right: none;
        border-bottom: 1px solid var(--border-primary);
        min-height: 180px;
    }
    .curriculum-teaser-highlights {
        grid-template-columns: minmax(0, 1fr);
    }
    .curriculum-teaser-body .btn {
        white-space: normal;
        text-align: center;
    }
}

/* ══════════════════════════════════════
   TICKER BAR — Animated
   ══════════════════════════════════════ */

.ticker-bar {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-surface);
    overflow: hidden;
    gap: var(--space-xl);
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 10.5px;
    transition: opacity 0.2s;
}

.ticker-item:hover {
    opacity: 0.7;
}

.ticker-label {
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 9px;
}

.ticker-value {
    color: var(--text-primary);
    font-weight: 700;
}

.ticker-change {
    font-size: 9px;
}

.ticker-change.up { color: var(--status-success); }
.ticker-change.down { color: var(--status-danger); }

/* ══════════════════════════════════════
   CONFIRM MODAL
   ══════════════════════════════════════ */

.app-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 10, 0.75);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: fadeIn 0.15s ease-out;
}

.app-confirm-panel {
    width: 100%;
    max-width: 380px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
    animation: slideUp 0.2s var(--ease-out);
}

.app-confirm-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.app-confirm-icon.danger {
    background: rgba(240, 73, 90, 0.12);
    color: var(--status-danger);
}

.app-confirm-message {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.app-confirm-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.app-confirm-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-top: var(--space-xl);
}

/* ══════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: calc(var(--header-height) + var(--space-md));
    right: var(--space-lg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.toast {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    font-size: 12.5px;
    font-family: var(--font-ui);
    color: var(--text-primary);
    min-width: 280px;
    max-width: 400px;
    animation: toastIn 0.35s var(--ease-spring);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
}

.toast-success { border-left: 3px solid var(--status-success); }
.toast-error { border-left: 3px solid var(--status-danger); }
.toast-info { border-left: 3px solid var(--status-info); }

@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ══════════════════════════════════════
   LOADING SPINNER
   ══════════════════════════════════════ */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    gap: var(--space-md);
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: fadeIn 0.3s;
}

/* ══════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.25;
}

.empty-state-title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.empty-state-text {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 400px;
}

/* ══════════════════════════════════════
   LANGUAGE TOGGLE
   ══════════════════════════════════════ */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    padding: 3px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: transparent;
}

.lang-toggle-btn {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 34px;
    height: 100%;
    padding: 0 8px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.lang-toggle-btn:hover {
    color: var(--text-primary);
}

.lang-toggle-btn.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ══════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════ */

.text-mono { font-family: var(--font-mono); }
.text-accent { color: var(--accent-text); }
.text-success { color: var(--status-success); }
.text-danger { color: var(--status-danger); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.number {
    font-family: var(--font-mono);
    font-weight: 700;
}

.hidden { display: none !important; }

.icon {
    display: inline-block;
    vertical-align: -3px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   HOMEPAGE — "WHY US" TIMELINE
   ══════════════════════════════════════ */

.whyus-section {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

.whyus-header {
    max-width: 620px;
    margin: 0 auto var(--space-3xl);
}

.whyus-title {
    font-family: var(--font-ui);
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-top: var(--space-sm);
}

.whyus-timeline {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.whyus-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-primary);
    transform: translateX(-50%);
}

.whyus-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-xl);
    position: relative;
    padding: var(--space-xl) 0;
    text-align: left;
}

/* All three children must be pinned to row 1. On even rows the DOM order is
   text(col 3) → badge(col 2) → visual(col 1), and grid's default *sparse* auto-placement never
   walks backwards: after the badge lands in column 2, a column-1 item no longer fits on that row,
   so .whyus-visual silently wrapped onto a second row — which is what left a tall empty gap in
   the middle of every even step and pushed its cards far below their own heading. */
.whyus-row > * { grid-row: 1; }

.whyus-row:nth-child(even) .whyus-text { grid-column: 3; text-align: left; }
.whyus-row:nth-child(even) .whyus-visual { grid-column: 1; }
.whyus-row:nth-child(odd) .whyus-text { grid-column: 1; }
.whyus-row:nth-child(odd) .whyus-visual { grid-column: 3; }

.whyus-badge {
    grid-column: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--bg-base);
    z-index: 1;
}

.whyus-text p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 420px;
}

.whyus-text strong {
    color: var(--text-primary);
}

.whyus-text .accent-text {
    color: var(--accent-text);
    font-weight: 700;
}

.whyus-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

.whyus-mockup-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 300px;
}

/* Second card is nudged right for a light "stacked" feel. It used to also carry
   margin-top: -12px, which pulled it up *into* the card above — with both cards casting a
   shadow, that read as two boxes colliding rather than a deliberate stack. */
.whyus-mockup-card:nth-child(2) {
    align-self: flex-end;
}

.whyus-mockup-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--accent-subtle);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.whyus-mockup-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.whyus-mockup-sub {
    font-family: var(--font-ui);
    font-size: 9.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ══════════════════════════════════════
   HOMEPAGE — "2 TYPES OF PEOPLE"
   ══════════════════════════════════════ */

.types-section {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
}

.types-grid {
    max-width: 820px;
    margin: var(--space-2xl) auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.types-card {
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    border: 1px solid var(--border-primary);
    background: var(--bg-panel);
}

.types-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent-text);
}

.types-card-title {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
}

.types-card-desc {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 320px;
}

/* ══════════════════════════════════════
   HOMEPAGE — STANDALONE PRICING CARD
   ══════════════════════════════════════ */

.pricing-section {
    padding: var(--space-3xl) var(--space-lg) var(--space-3xl);
    text-align: center;
}

.pricing-card {
    max-width: 420px;
    margin: var(--space-2xl) auto 0;
    background: var(--bg-panel);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: left;
    box-shadow: 0 0 40px rgba(227, 165, 66, 0.12), var(--shadow-lg);
}

.pricing-card-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.pricing-card-brand img {
    height: 22px;
}

.pricing-card-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-text);
}

.pricing-card-amount {
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.pricing-card-divider {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-lg) 0;
}

.pricing-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.pricing-card-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.pricing-card-list-item span {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pricing-card-list-item span strong {
    color: var(--text-primary);
}

.pricing-card-list-item .icon {
    color: var(--status-success);
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .whyus-row,
    .whyus-row:nth-child(even) .whyus-text,
    .whyus-row:nth-child(even) .whyus-visual,
    .whyus-row:nth-child(odd) .whyus-text,
    .whyus-row:nth-child(odd) .whyus-visual {
        grid-template-columns: 1fr;
        grid-column: 1;
    }

    /* Single-column stack. The desktop version is a two-sided timeline around a center line;
       on a phone there's no room for two sides, so the connecting line is dropped entirely and
       each step becomes a plain block with its number badge sitting inline above the heading.
       (Previously the badge was absolutely positioned into the gutter, where it collided with
       the timeline line and clipped against the screen edge.) */
    .whyus-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        padding: var(--space-lg) 0;
    }
    .whyus-timeline::before { display: none; }
    .whyus-badge {
        position: static;
        width: 34px;
        height: 34px;
        box-shadow: none;
        flex-shrink: 0;
        /* In the DOM the badge sits between .whyus-text and .whyus-visual (desktop places all
           three by grid-column, so source order is irrelevant there). Once this becomes a flex
           column, source order takes over and the step number would render *below* the heading
           it labels — so pull it back to the top explicitly. */
        order: -1;
    }

    .whyus-text p { max-width: none; }

    /* Cards go full-width and un-staggered — the deliberate desktop overlap just reads as
       misalignment once they're stacked in a narrow column. */
    .whyus-visual {
        width: 100%;
        align-items: stretch;
    }
    .whyus-mockup-card { max-width: none; }
    .whyus-mockup-card:nth-child(2) {
        align-self: stretch;
        margin-top: 0;
    }

    .types-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

@media (max-width: 768px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(1, 1fr); }

    .module-grid {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }

    .module-detail {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }

    .header {
        padding: 0 var(--space-md);
    }

    .header-brand-logo {
        height: 24px;
    }

    .header-nav-item {
        padding: 0 var(--space-sm);
        font-size: 10.5px;
    }

    .hero {
        padding: 48px var(--space-md) 40px;
    }

    .hero-title {
        font-size: 28px;
    }

    .stat-value {
        font-size: 22px;
    }

    .module-detail-price {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr; }
    .header-brand-logo-wrap { padding: 4px 8px; }
    .header-brand-logo { height: 20px; }
    .ticker-bar { display: none; }
}

/* ══════════════════════════════════════
   MOBILE HEADER — hamburger drawer
   Below this breakpoint, nav links + actions (lang/theme toggle, login/register or user
   badge+logout) no longer fit the header in one row (this is what previously caused the header
   to overflow horizontally on phones). They collapse into a toggleable full-width drawer instead.
   ══════════════════════════════════════ */

.mobile-menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 860px) {
    .header {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding: var(--space-sm) var(--space-lg);
    }

    .header-brand { order: 1; }

    .mobile-menu-toggle {
        display: flex;
        order: 2;
    }

    .header-nav,
    .header-actions {
        display: none;
        width: 100%;
        /* Must sort after .header-brand/.mobile-menu-toggle (order 1-2) — otherwise, once
           display:flex + width:100% below force them onto their own wrapped row, DOM order
           alone would push the toggle button down after them instead of staying anchored
           top-right next to the logo. */
        order: 3;
    }

    .header.mobile-menu-open .header-nav,
    .header.mobile-menu-open .header-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
        padding-top: var(--space-md);
        margin-top: var(--space-md);
        border-top: 1px solid var(--border-primary);
    }

    .header-nav-item {
        height: auto;
        font-size: 14.5px;
        padding: 12px var(--space-md);
        border-radius: var(--radius-md);
    }
    .header-nav-indicator { display: none; }
    .header-nav-item.active { background: var(--accent-subtle); }

    .header.mobile-menu-open .header-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Only the real action buttons (Login/Register/Logout) share the row width. The two toggles
       are fixed-size controls — the earlier blanket `.header-actions .btn` rule also matched the
       round theme toggle and inflated it from 30px into a 130px-wide pill. */
    /* Two rows in the drawer: display settings (theme, language) first, then the account
       actions side by side. The separator becomes a full-width line break between them. */
    .header-actions .header-btn { flex: 1 1 0; height: 42px; }
    .header-actions .header-icon-btn { flex: 0 0 auto; width: 42px; height: 42px; }
    .header-actions .lang-toggle { flex: 0 0 auto; height: 42px; }
    .header-actions-sep { flex-basis: 100%; height: 0; margin: 0; background: none; }

    .header-user-badge {
        order: -1;
        width: 100%;
        justify-content: center;
        height: 44px;
    }

    /* The open drawer must be OPAQUE. The header's default translucent "glass" background is
       right for a 60px bar, but once expanded into a full panel it let the page underneath show
       straight through it — the header is sticky, so content keeps scrolling behind the drawer
       and collided visually with the menu items.
       max-height + scroll keeps the drawer usable on short screens (e.g. landscape phones)
       instead of running off the bottom with no way to reach the last item. */
    .header.mobile-menu-open,
    /* The scroll-shrink rule (.header.header-scrolled { height: 48px }) is more specific than
       the plain `.header { height: auto }` above, so once the page was scrolled it clamped the
       OPEN drawer to 48px too — tapping the hamburger mid-page appeared to do nothing, because
       the menu was rendering inside a 48px-tall box. This selector outranks it so an open drawer
       always gets its full height, scrolled or not. */
    .header.mobile-menu-open.header-scrolled {
        height: auto;
        background: var(--bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }
}


/* ════════════════════════════════════════════════════════════════════════════════════
   REFINEMENT LAYER — elegance & consistency pass
   Kept together at the end so it reads as one design decision and overrides the older,
   denser defaults above. Principles: one aligned content column; serif display type for
   big headlines, Inter everywhere else (tabular figures for numbers, no "code" font in the
   UI); sentence-case text with uppercase reserved for tiny labels; calmer buttons.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ── One content column shared by header, pages and footer ── */
.main-container {
    max-width: calc(var(--container) + 48px);
    margin: 0 auto;
    padding: 0 24px 72px;
}

/* The top grid texture stays full-bleed even though the column is centred. */
.main-container::before {
    left: calc(50% - 50vw);
    right: auto;
    width: 100vw;
}

.site-footer-inner {
    max-width: var(--container);
}

@media (min-width: 861px) {
    .header {
        padding-left: max(24px, calc((100% - var(--container)) / 2));
        padding-right: max(24px, calc((100% - var(--container)) / 2));
    }

    /* Nav sits right next to the logo (not floating in the middle), so it never shifts
       around when the number of items changes between guest / user / admin. */
    .header-nav {
        margin: 0 auto 0 32px;
    }
}

@media (max-width: 640px) {
    .main-container {
        padding: 0 16px 56px;
    }
}

.header-brand-logo-wrap {
    border-radius: 8px;
    padding: 4px 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── Page headers: a real title instead of a tiny grey caps label ── */
.section-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 32px 0 18px;
    align-items: flex-end;
}

.section-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--text-primary);
    line-height: 1.25;
}

.section-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-top: 4px;
}

.panel-header {
    background: transparent;
    padding: 14px 20px;
}

.panel-title {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}

.category-cluster-title {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Display typography ── */
.hero {
    padding: 104px 0 88px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.2vw, 60px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.06;
    max-width: 900px;
    margin-bottom: 18px;
}

.hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.whyus-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.1vw, 36px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.curriculum-teaser-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.pricing-card-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 40px;
    letter-spacing: -0.02em;
}

.types-card-title {
    font-size: 17px;
    font-weight: 700;
}

/* ── Numbers: UI face with tabular figures instead of a code font ── */
.stat-value,
.module-card-price,
.module-detail-price,
.data-table .td-mono,
.data-table .td-amount,
.badge,
.module-card-id {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 11px;
    letter-spacing: 0.06em;
}

.badge {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 10px;
}

.module-thumbnail-placeholder {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* ── Cards & grids ── */
.grid {
    border-radius: 14px;
}

.stat-cell {
    padding: 22px 24px;
}

.benefit-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-top: 14px;
}

.benefit-title.accent {
    color: var(--accent-text);
}

.benefit-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 6px;
}

.module-grid {
    padding: 24px 0;
    gap: 20px;
}

.module-card {
    border-radius: 14px;
}

.module-card:hover {
    transform: translateY(-2px);
}

.panel {
    border-radius: 14px;
}

/* ── Forms ── */
.form-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

.form-input {
    font-size: 14px;
    padding: 12px 14px;
}

/* ── Tables ── */
.data-table {
    font-size: 13px;
}

.data-table th {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    background: transparent;
    padding: 12px 16px;
}

.data-table td {
    padding: 14px 16px;
}

/* ── Buttons: calm, no pulsing glow ── */
.btn {
    font-size: 13px;
    letter-spacing: 0;
}

.btn-sm {
    font-size: 12px;
}

.btn-lg {
    font-size: 14.5px;
    padding: 14px 28px;
    border-radius: 11px;
}

.btn-glow {
    animation: none;
}

.btn-primary {
    background: var(--accent);
    box-shadow: 0 10px 28px -12px var(--accent-glow);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* ── Empty states ── */
.empty-state-title {
    font-size: 16px;
    color: var(--text-primary);
}

.whyus-row-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
}

/* ── Page-level alignment: content starts on the same edge as the page title ── */
.module-detail {
    padding: 24px 0;
}

.category-cluster-header {
    padding: 24px 0 0;
}

.module-card-price .currency,
.module-detail-price .currency {
    margin-right: 5px;
}

.module-card-meta-tag {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
}

/* ── Refinement layer: small screens ── */
@media (max-width: 768px) {
    .hero { padding: 56px 0 44px; }
    .hero-subtitle { font-size: 15px; }
    .stat-value { font-size: 24px; }
    .section-header { padding: 24px 0 14px; }
    .section-title { font-size: 19px; }
    .pricing-card-amount { font-size: 34px; }
    .whyus-row-title { font-size: 16px; }
}