/* Linguistic Lenses Visualizer - Swiss International Style
   Clean minimalism, strong typography, red accent
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ═══════════════════════════════════════════════════════
       COLOR SYSTEM - Swiss International
       ═══════════════════════════════════════════════════════ */

    /* Core Colors */
    --black: #000;
    --white: #fff;
    --red: #e53935;
    --red-dark: #cc0000;
    --red-light: #fee;

    /* Gray Scale (10 levels) */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eee;
    --gray-300: #ddd;
    --gray-400: #999;
    --gray-500: #666;
    --gray-600: #444;
    --gray-700: #333;
    --gray-800: #222;
    --gray-900: #111;

    /* Semantic Colors */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Background System */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-100);
    --bg-tertiary: var(--gray-200);
    --bg-card: var(--white);
    --bg-card-hover: var(--gray-50);

    /* Text System */
    --text-primary: var(--black);
    --text-secondary: var(--gray-500);
    --text-muted: var(--gray-400);

    /* Border System */
    --border-light: var(--gray-300);
    --border-medium: var(--gray-400);
    --border-dark: var(--black);

    /* Primary Accent */
    --accent-primary: var(--red);
    --accent-primary-soft: var(--red-light);
    --accent-primary-hover: var(--red-dark);

    /* ═══════════════════════════════════════════════════════
       LANGUAGE COLORS - Grouped by Geographic/Linguistic Family
       ═══════════════════════════════════════════════════════ */

    /* INDO-ARYAN (South Asian) - WARM ORANGES */
    --accent-pali: hsl(28, 95%, 50%);
    --accent-pali-bg: hsl(28, 95%, 50%, 0.08);
    --accent-pali-border: hsl(28, 95%, 50%, 0.4);

    --accent-sanskrit: hsl(22, 90%, 45%);
    --accent-sanskrit-bg: hsl(22, 90%, 45%, 0.08);
    --accent-sanskrit-border: hsl(22, 90%, 45%, 0.4);

    --accent-hindi: hsl(30, 90%, 48%);
    --accent-hindi-bg: hsl(30, 90%, 48%, 0.08);
    --accent-hindi-border: hsl(30, 90%, 48%, 0.4);

    /* EUROPEAN (Indo-European West) - BLUES & PURPLES */
    --accent-latin: hsl(220, 75%, 50%);
    --accent-latin-bg: hsl(220, 75%, 50%, 0.08);
    --accent-latin-border: hsl(220, 75%, 50%, 0.4);

    --accent-greek: hsl(205, 80%, 52%);
    --accent-greek-bg: hsl(205, 80%, 52%, 0.08);
    --accent-greek-border: hsl(205, 80%, 52%, 0.4);

    --accent-german: hsl(240, 60%, 55%);
    --accent-german-bg: hsl(240, 60%, 55%, 0.08);
    --accent-german-border: hsl(240, 60%, 55%, 0.4);

    --accent-english: hsl(255, 65%, 58%);
    --accent-english-bg: hsl(255, 65%, 58%, 0.08);
    --accent-english-border: hsl(255, 65%, 58%, 0.4);

    --accent-russian: hsl(275, 60%, 52%);
    --accent-russian-bg: hsl(275, 60%, 52%, 0.08);
    --accent-russian-border: hsl(275, 60%, 52%, 0.4);

    --accent-french: hsl(210, 80%, 55%);
    --accent-french-bg: hsl(210, 80%, 55%, 0.08);
    --accent-french-border: hsl(210, 80%, 55%, 0.4);

    --accent-spanish: hsl(15, 85%, 50%);
    --accent-spanish-bg: hsl(15, 85%, 50%, 0.08);
    --accent-spanish-border: hsl(15, 85%, 50%, 0.4);

    /* EAST ASIAN (Sinitic + Japanese) - REDS & PINKS */
    --accent-mandarin: hsl(355, 80%, 52%);
    --accent-mandarin-bg: hsl(355, 80%, 52%, 0.08);
    --accent-mandarin-border: hsl(355, 80%, 52%, 0.4);

    --accent-cantonese: hsl(345, 75%, 55%);
    --accent-cantonese-bg: hsl(345, 75%, 55%, 0.08);
    --accent-cantonese-border: hsl(345, 75%, 55%, 0.4);

    --accent-japanese: hsl(5, 75%, 50%);
    --accent-japanese-bg: hsl(5, 75%, 50%, 0.08);
    --accent-japanese-border: hsl(5, 75%, 50%, 0.4);

    --accent-korean: hsl(320, 75%, 50%);
    --accent-korean-bg: hsl(320, 75%, 50%, 0.08);
    --accent-korean-border: hsl(320, 75%, 50%, 0.4);

    /* SOUTHEAST ASIAN - TEALS & CYANS */
    --accent-vietnamese: hsl(175, 80%, 38%);
    --accent-vietnamese-bg: hsl(175, 80%, 38%, 0.08);
    --accent-vietnamese-border: hsl(175, 80%, 38%, 0.4);

    --accent-indonesian: hsl(185, 75%, 42%);
    --accent-indonesian-bg: hsl(185, 75%, 42%, 0.08);
    --accent-indonesian-border: hsl(185, 75%, 42%, 0.4);

    --accent-thai: hsl(25, 95%, 55%);
    --accent-thai-bg: hsl(25, 95%, 55%, 0.08);
    --accent-thai-border: hsl(25, 95%, 55%, 0.4);

    --accent-burmese: hsl(350, 70%, 45%);
    --accent-burmese-bg: hsl(350, 70%, 45%, 0.08);
    --accent-burmese-border: hsl(350, 70%, 45%, 0.4);

    /* URALIC - GREENS */
    --accent-finnish: hsl(130, 60%, 40%);
    --accent-finnish-bg: hsl(130, 60%, 40%, 0.08);
    --accent-finnish-border: hsl(130, 60%, 40%, 0.4);

    --accent-hungarian: hsl(140, 55%, 38%);
    --accent-hungarian-bg: hsl(140, 55%, 38%, 0.08);
    --accent-hungarian-border: hsl(140, 55%, 38%, 0.4);

    /* HMONG-MIEN */
    --accent-hmong: hsl(70, 70%, 40%);
    --accent-hmong-bg: hsl(70, 70%, 40%, 0.08);
    --accent-hmong-border: hsl(70, 70%, 40%, 0.4);

    /* INDIGENOUS / SPECIAL */
    --accent-piraha: hsl(45, 90%, 48%);
    --accent-piraha-bg: hsl(45, 90%, 48%, 0.08);
    --accent-piraha-border: hsl(45, 90%, 48%, 0.4);

    --accent-guugu: hsl(35, 85%, 50%);
    --accent-guugu-bg: hsl(35, 85%, 50%, 0.08);
    --accent-guugu-border: hsl(35, 85%, 50%, 0.4);

    --accent-xoo: hsl(315, 70%, 50%);
    --accent-xoo-bg: hsl(315, 70%, 50%, 0.08);
    --accent-xoo-border: hsl(315, 70%, 50%, 0.4);

    /* SEMITIC */
    --accent-arabic: hsl(38, 90%, 50%);
    --accent-arabic-bg: hsl(38, 90%, 50%, 0.08);
    --accent-arabic-border: hsl(38, 90%, 50%, 0.4);

    --accent-hebrew: hsl(48, 80%, 45%);
    --accent-hebrew-bg: hsl(48, 80%, 45%, 0.08);
    --accent-hebrew-border: hsl(48, 80%, 45%, 0.4);

    /* TURKIC */
    --accent-turkish: hsl(330, 80%, 55%);
    --accent-turkish-bg: hsl(330, 80%, 55%, 0.08);
    --accent-turkish-border: hsl(330, 80%, 55%, 0.4);

    /* TIBETIC */
    --accent-tibetan: hsl(280, 65%, 55%);
    --accent-tibetan-bg: hsl(280, 65%, 55%, 0.08);
    --accent-tibetan-border: hsl(280, 65%, 55%, 0.4);

    /* AUSTRONESIAN */
    --accent-tagalog: hsl(195, 75%, 45%);
    --accent-tagalog-bg: hsl(195, 75%, 45%, 0.08);
    --accent-tagalog-border: hsl(195, 75%, 45%, 0.4);

    /* BANTU */
    --accent-swahili: hsl(85, 65%, 45%);
    --accent-swahili-bg: hsl(85, 65%, 45%, 0.08);
    --accent-swahili-border: hsl(85, 65%, 45%, 0.4);

    /* Case Colors */
    --case-nominative: hsl(0, 70%, 50%);
    --case-accusative: hsl(217, 80%, 55%);
    --case-genitive: hsl(142, 70%, 40%);
    --case-dative: hsl(280, 65%, 55%);
    --case-ablative: hsl(38, 85%, 50%);
    --case-vocative: hsl(187, 75%, 42%);
    --case-instrumental: hsl(320, 70%, 50%);
    --case-locative: hsl(200, 75%, 50%);

    /* ═══════════════════════════════════════════════════════
       TYPOGRAPHY - Swiss Style
       ═══════════════════════════════════════════════════════ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Type Scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */

    /* ═══════════════════════════════════════════════════════
       SPACING - 8px Grid System
       ═══════════════════════════════════════════════════════ */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Legacy spacing */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);
    --space-3xl: var(--space-16);

    /* ═══════════════════════════════════════════════════════
       BORDER & SHADOW SYSTEM
       ═══════════════════════════════════════════════════════ */
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* ═══════════════════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════════════════ */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.pali-course {
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 2px solid var(--black);
    padding: var(--space-4) var(--space-8);
}

.pali-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pali-logo {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.pali-nav-links {
    display: flex;
    gap: var(--space-6);
    list-style: none;
}

.pali-nav-links a {
    color: var(--gray-500);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) 0;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.pali-nav-links a:hover {
    color: var(--black);
}

.pali-nav-links a.active {
    color: var(--black);
    border-bottom-color: var(--red);
}

.pali-nav-links a.nav-home {
    color: var(--red);
}

/* ═══════════════════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════════════════ */
.pali-main {
    padding-top: 80px;
    min-height: 100vh;
}

.pali-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-8);
}

/* ═══════════════════════════════════════════════════════
   HERO SECTION - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-hero {
    padding: var(--space-16) 0;
    text-align: center;
}

.pali-hero h1 {
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
    color: var(--black);
    line-height: 1.1;
}

.pali-hero .subtitle {
    font-size: var(--text-lg);
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

.pali-hero--compact {
    padding: var(--space-8) 0;
}

.pali-hero--compact h1 {
    font-size: clamp(32px, 5vw, 48px);
}

.pali-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--gray-500);
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════
   PILL/TAG - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════
   CARD PATTERN - Swiss Style
   ═══════════════════════════════════════════════════════ */
.card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: 24px;
    transition: all 0.2s ease;
}

.card:hover {
    border-color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

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

/* ═══════════════════════════════════════════════════════
   MODULE CARDS GRID
   ═══════════════════════════════════════════════════════ */
.pali-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    margin: var(--space-12) 0;
}

.pali-module-card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.pali-module-card:hover {
    border-color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.pali-module-number {
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-2);
}

.pali-module-card h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--black);
}

.pali-module-card p {
    color: var(--gray-500);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Module Card Variants - Border accents */
.pali-module-card--vietnamese { border-left: 4px solid var(--accent-vietnamese); }
.pali-module-card--english { border-left: 4px solid var(--accent-english); }
.pali-module-card--pali { border-left: 4px solid var(--accent-pali); }
.pali-module-card--latin { border-left: 4px solid var(--accent-latin); }

/* ═══════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════ */
.pali-section {
    margin: var(--space-16) 0;
}

.pali-section-header {
    margin-bottom: var(--space-8);
}

.pali-section-header h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--black);
    letter-spacing: -0.02em;
}

.pali-section-header p {
    color: var(--gray-500);
    font-size: var(--text-lg);
}

/* ═══════════════════════════════════════════════════════
   TAB/BUTTON PATTERN - Swiss Style
   ═══════════════════════════════════════════════════════ */
.tab-btn {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--black);
    background: var(--gray-100);
}

.tab-btn.active {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}

/* ═══════════════════════════════════════════════════════
   PALI BUTTON - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    color: var(--gray-500);
}

.pali-btn:hover {
    border-color: var(--black);
    background: var(--gray-100);
    color: var(--black);
}

.pali-btn.active {
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
}

/* Language-specific buttons */
.pali-btn.vietnamese { border-color: var(--accent-vietnamese-border); color: var(--accent-vietnamese); }
.pali-btn.vietnamese.active { background: var(--accent-vietnamese); border-color: var(--accent-vietnamese); color: var(--white); }

.pali-btn.english { border-color: var(--accent-english-border); color: var(--accent-english); }
.pali-btn.english.active { background: var(--accent-english); border-color: var(--accent-english); color: var(--white); }

.pali-btn.pali { border-color: var(--accent-pali-border); color: var(--accent-pali); }
.pali-btn.pali.active { background: var(--accent-pali); border-color: var(--accent-pali); color: var(--white); }

.pali-btn.latin { border-color: var(--accent-latin-border); color: var(--accent-latin); }
.pali-btn.latin.active { background: var(--accent-latin); border-color: var(--accent-latin); color: var(--white); }

.pali-btn.mandarin { border-color: var(--accent-mandarin-border); color: var(--accent-mandarin); }
.pali-btn.mandarin.active { background: var(--accent-mandarin); border-color: var(--accent-mandarin); color: var(--white); }

.pali-btn.sanskrit { border-color: var(--accent-sanskrit-border); color: var(--accent-sanskrit); }
.pali-btn.sanskrit.active { background: var(--accent-sanskrit); border-color: var(--accent-sanskrit); color: var(--white); }

.pali-btn.german { border-color: var(--accent-german-border); color: var(--accent-german); }
.pali-btn.german.active { background: var(--accent-german); border-color: var(--accent-german); color: var(--white); }

.pali-btn.japanese { border-color: var(--accent-japanese-border); color: var(--accent-japanese); }
.pali-btn.japanese.active { background: var(--accent-japanese); border-color: var(--accent-japanese); color: var(--white); }

.pali-btn.finnish { border-color: var(--accent-finnish-border); color: var(--accent-finnish); }
.pali-btn.finnish.active { background: var(--accent-finnish); border-color: var(--accent-finnish); color: var(--white); }

.pali-btn.cantonese { border-color: var(--accent-cantonese-border); color: var(--accent-cantonese); }
.pali-btn.cantonese.active { background: var(--accent-cantonese); border-color: var(--accent-cantonese); color: var(--white); }

.pali-btn.hmong { border-color: var(--accent-hmong-border); color: var(--accent-hmong); }
.pali-btn.hmong.active { background: var(--accent-hmong); border-color: var(--accent-hmong); color: var(--white); }

/* ═══════════════════════════════════════════════════════
   PRIMARY & SECONDARY BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 16px 32px;
    background: var(--black);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    border: 2px solid var(--black);
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--white);
    color: var(--black);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    background: var(--white);
    color: var(--black);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--gray-300);
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--black);
    background: var(--gray-100);
}

/* ═══════════════════════════════════════════════════════
   SPECTRUM VISUALIZER
   ═══════════════════════════════════════════════════════ */
.spectrum-container {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.spectrum-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spectrum-bar {
    position: relative;
    height: 60px;
    background: linear-gradient(90deg,
        var(--accent-vietnamese) 0%,
        var(--accent-english) 50%,
        var(--accent-pali) 100%
    );
    margin-bottom: var(--space-8);
}

.spectrum-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-400);
    margin-bottom: var(--space-4);
}

/* Language Dot Indicators - Swiss Style */
.spectrum-dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.spectrum-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.spectrum-dot:hover {
    border-color: var(--black);
}

.spectrum-dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.spectrum-dot.vietnamese { border-color: var(--accent-vietnamese-border); color: var(--accent-vietnamese); }
.spectrum-dot.vietnamese::before { background: var(--accent-vietnamese); }

.spectrum-dot.english { border-color: var(--accent-english-border); color: var(--accent-english); }
.spectrum-dot.english::before { background: var(--accent-english); }

.spectrum-dot.pali { border-color: var(--accent-pali-border); color: var(--accent-pali); }
.spectrum-dot.pali::before { background: var(--accent-pali); }

.spectrum-dot.latin { border-color: var(--accent-latin-border); color: var(--accent-latin); }
.spectrum-dot.latin::before { background: var(--accent-latin); }

.spectrum-dot.mandarin { border-color: var(--accent-mandarin-border); color: var(--accent-mandarin); }
.spectrum-dot.mandarin::before { background: var(--accent-mandarin); }

.spectrum-dot.sanskrit { border-color: var(--accent-sanskrit-border); color: var(--accent-sanskrit); }
.spectrum-dot.sanskrit::before { background: var(--accent-sanskrit); }

.spectrum-dot.german { border-color: var(--accent-german-border); color: var(--accent-german); }
.spectrum-dot.german::before { background: var(--accent-german); }

.spectrum-dot.japanese { border-color: var(--accent-japanese-border); color: var(--accent-japanese); }
.spectrum-dot.japanese::before { background: var(--accent-japanese); }

.spectrum-dot.finnish { border-color: var(--accent-finnish-border); color: var(--accent-finnish); }
.spectrum-dot.finnish::before { background: var(--accent-finnish); }

.spectrum-dot.cantonese { border-color: var(--accent-cantonese-border); color: var(--accent-cantonese); }
.spectrum-dot.cantonese::before { background: var(--accent-cantonese); }

.spectrum-dot.hmong { border-color: var(--accent-hmong-border); color: var(--accent-hmong); }
.spectrum-dot.hmong::before { background: var(--accent-hmong); }

/* ═══════════════════════════════════════════════════════
   LANGUAGE TEXT COLOR CLASSES
   ═══════════════════════════════════════════════════════ */
.lang-vietnamese, .vietnamese-text { color: var(--accent-vietnamese); }
.lang-english, .english-text { color: var(--accent-english); }
.lang-pali, .pali-text { color: var(--accent-pali); }
.lang-latin, .latin-text { color: var(--accent-latin); }
.lang-mandarin, .mandarin-text { color: var(--accent-mandarin); }
.lang-sanskrit, .sanskrit-text { color: var(--accent-sanskrit); }
.lang-german, .german-text { color: var(--accent-german); }
.lang-japanese, .japanese-text { color: var(--accent-japanese); }
.lang-finnish, .finnish-text { color: var(--accent-finnish); }
.lang-cantonese, .cantonese-text { color: var(--accent-cantonese); }
.lang-hmong, .hmong-text { color: var(--accent-hmong); }
.lang-korean, .korean-text { color: var(--accent-korean); }
.lang-turkish, .turkish-text { color: var(--accent-turkish); }
.lang-arabic, .arabic-text { color: var(--accent-arabic); }
.lang-hebrew, .hebrew-text { color: var(--accent-hebrew); }
.lang-thai, .thai-text { color: var(--accent-thai); }
.lang-tibetan, .tibetan-text { color: var(--accent-tibetan); }
.lang-burmese, .burmese-text { color: var(--accent-burmese); }
.lang-french, .french-text { color: var(--accent-french); }
.lang-spanish, .spanish-text { color: var(--accent-spanish); }
.lang-hindi, .hindi-text { color: var(--accent-hindi); }
.lang-hungarian, .hungarian-text { color: var(--accent-hungarian); }
.lang-tagalog, .tagalog-text { color: var(--accent-tagalog); }
.lang-swahili, .swahili-text { color: var(--accent-swahili); }

/* ═══════════════════════════════════════════════════════
   TABLES - Swiss Style
   ═══════════════════════════════════════════════════════ */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--gray-300);
}

.comparison-table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    background: var(--gray-100);
    border-bottom: 2px solid var(--black);
}

.comparison-table tr:hover {
    background: var(--gray-50);
}

.pronoun-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
}

.pronoun-table th,
.pronoun-table td {
    padding: 12px 16px;
    text-align: left;
    border: 1px solid var(--gray-300);
}

.pronoun-table th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: var(--gray-100);
}

.pronoun-table tr:hover {
    background: var(--gray-50);
}

/* ═══════════════════════════════════════════════════════
   CODE BLOCKS - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-code {
    font-family: var(--font-mono);
    background: var(--gray-100);
    padding: var(--space-6);
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--red);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.8;
}

.pali-code .root {
    color: var(--accent-pali);
    font-weight: 600;
}

.pali-code .meaning {
    color: var(--gray-500);
}

/* Inline Language Words */
.pali-word {
    font-family: var(--font-mono);
    color: var(--accent-pali);
    background: var(--accent-pali-bg);
    padding: 0.1em 0.4em;
    font-size: 0.9em;
}

.viet-word {
    color: var(--accent-vietnamese);
    background: var(--accent-vietnamese-bg);
    padding: 0.1em 0.4em;
}

.eng-word {
    color: var(--accent-english);
    background: var(--accent-english-bg);
    padding: 0.1em 0.4em;
}

.latin-word {
    color: var(--accent-latin);
    background: var(--accent-latin-bg);
    padding: 0.1em 0.4em;
}

.code-lang-latin { color: var(--accent-latin); }
.code-lang-pali { color: var(--accent-pali); }
.code-lang-sanskrit { color: var(--accent-sanskrit); }
.code-lang-vietnamese { color: var(--accent-vietnamese); }
.code-lang-english { color: var(--accent-english); }

/* ═══════════════════════════════════════════════════════
   EXAMPLE BOXES - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-example {
    background: var(--gray-100);
    border-left: 4px solid var(--red);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.pali-example-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════
   INFO CARDS - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-info-card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: var(--space-8);
    margin: var(--space-6) 0;
}

.pali-info-card:hover {
    border-color: var(--black);
}

.pali-info-card h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--black);
}

.pali-info-card p {
    color: var(--gray-500);
    line-height: 1.7;
}

.pali-glass-card {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: var(--space-8);
}

/* ═══════════════════════════════════════════════════════
   CASE CARDS - Swiss Style with Color Accents
   ═══════════════════════════════════════════════════════ */
.case-card {
    background: var(--white);
    padding: 20px;
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--red);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.case-card:hover {
    border-color: var(--black);
    border-left-width: 4px;
}

.case-card.nominative { border-left-color: var(--case-nominative); }
.case-card.accusative { border-left-color: var(--case-accusative); }
.case-card.genitive { border-left-color: var(--case-genitive); }
.case-card.dative { border-left-color: var(--case-dative); }
.case-card.ablative { border-left-color: var(--case-ablative); }
.case-card.vocative { border-left-color: var(--case-vocative); }
.case-card.instrumental { border-left-color: var(--case-instrumental); }
.case-card.locative { border-left-color: var(--case-locative); }

.case-card .case-name {
    font-weight: 600;
    font-size: var(--text-sm);
}

.case-card.nominative .case-name { color: var(--case-nominative); }
.case-card.accusative .case-name { color: var(--case-accusative); }
.case-card.genitive .case-name { color: var(--case-genitive); }
.case-card.dative .case-name { color: var(--case-dative); }
.case-card.ablative .case-name { color: var(--case-ablative); }
.case-card.vocative .case-name { color: var(--case-vocative); }
.case-card.instrumental .case-name { color: var(--case-instrumental); }
.case-card.locative .case-name { color: var(--case-locative); }

/* Case Card BEM Variant */
.case-card__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.case-card__name {
    font-weight: 600;
    font-size: var(--text-sm);
}

.case-card__question {
    color: var(--gray-400);
}

.case-card__description {
    color: var(--gray-500);
    margin: 0.5rem 0;
    font-size: var(--text-sm);
}

.case-card__example {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.case-card--nominative { border-left-color: var(--case-nominative); }
.case-card--nominative .case-card__name { color: var(--case-nominative); }
.case-card--nominative .case-card__example { color: var(--accent-latin); }

.case-card--accusative { border-left-color: var(--case-accusative); }
.case-card--accusative .case-card__name { color: var(--case-accusative); }
.case-card--accusative .case-card__example { color: var(--accent-latin); }

.case-card--genitive { border-left-color: var(--case-genitive); }
.case-card--genitive .case-card__name { color: var(--case-genitive); }
.case-card--genitive .case-card__example { color: var(--accent-latin); }

.case-card--dative { border-left-color: var(--case-dative); }
.case-card--dative .case-card__name { color: var(--case-dative); }
.case-card--dative .case-card__example { color: var(--accent-latin); }

.case-card--ablative { border-left-color: var(--case-ablative); }
.case-card--ablative .case-card__name { color: var(--case-ablative); }
.case-card--ablative .case-card__example { color: var(--accent-latin); }

.case-card--vocative { border-left-color: var(--case-vocative); }
.case-card--vocative .case-card__name { color: var(--case-vocative); }
.case-card--vocative .case-card__example { color: var(--accent-latin); }

.case-card--instrumental { border-left-color: var(--case-instrumental); }
.case-card--instrumental .case-card__name { color: var(--case-instrumental); }
.case-card--instrumental .case-card__example { color: var(--accent-pali); }

.case-card--locative { border-left-color: var(--case-locative); }
.case-card--locative .case-card__name { color: var(--case-locative); }
.case-card--locative .case-card__example { color: var(--accent-pali); }

/* ═══════════════════════════════════════════════════════
   DICTIONARY - Swiss Style
   ═══════════════════════════════════════════════════════ */
.dictionary-search {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.dictionary-search input {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-family: var(--font-sans);
    background: var(--gray-100);
    border: 2px solid var(--gray-300);
    color: var(--black);
    outline: none;
    transition: all 0.2s ease;
}

.dictionary-search input:focus {
    border-color: var(--black);
    background: var(--white);
}

.dictionary-search input::placeholder {
    color: var(--gray-400);
}

.dictionary-entries {
    display: grid;
    gap: var(--space-4);
}

.dictionary-entry {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: var(--space-6);
    transition: all 0.2s ease;
}

.dictionary-entry:hover {
    border-color: var(--black);
}

.dictionary-headword {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--accent-pali);
    margin-bottom: var(--space-2);
}

.dictionary-meaning {
    color: var(--black);
    margin-bottom: var(--space-2);
}

.dictionary-etymology {
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-style: italic;
}

.dictionary-root {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-latin);
    background: var(--accent-latin-bg);
    padding: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
}

.dictionary-placeholder {
    color: var(--gray-400);
    text-align: center;
    padding: var(--space-8);
}

/* ═══════════════════════════════════════════════════════
   PROGRESS INDICATOR
   ═══════════════════════════════════════════════════════ */
.pali-progress {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-6) 0;
}

.pali-progress-step {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    overflow: hidden;
}

.pali-progress-step.completed {
    background: var(--black);
}

.pali-progress-step.current {
    background: linear-gradient(90deg, var(--black) 50%, var(--gray-200) 50%);
}

/* ═══════════════════════════════════════════════════════
   FOOTER - Swiss Style
   ═══════════════════════════════════════════════════════ */
.pali-footer {
    padding: var(--space-12) 0;
    text-align: center;
    color: var(--gray-400);
    font-size: var(--text-sm);
    border-top: 2px solid var(--black);
    margin-top: var(--space-16);
}

/* Level Dot */
.level-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════
   REGION CARD COMPONENT
   ═══════════════════════════════════════════════════════ */
.region-card {
    background: var(--white);
    padding: 20px;
    border: 1px solid var(--gray-300);
}

.region-card:hover {
    border-color: var(--black);
}

.region-card--muted {
    background: var(--gray-100);
}

.region-card__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.region-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════
   LANGUAGE LEGEND ITEM
   ═══════════════════════════════════════════════════════ */
.lang-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-item__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lang-item__name {
    font-weight: 600;
    min-width: 70px;
}

.lang-item__years {
    color: var(--gray-500);
    font-size: 0.8rem;
    flex: 1;
}

.lang-item__period {
    color: var(--gray-400);
    font-size: 0.75rem;
}

/* Language-specific dot colors */
.lang-item__dot--vietnamese { background: var(--accent-vietnamese); }
.lang-item__name--vietnamese { color: var(--accent-vietnamese); }

.lang-item__dot--english { background: var(--accent-english); }
.lang-item__name--english { color: var(--accent-english); }

.lang-item__dot--pali { background: var(--accent-pali); }
.lang-item__name--pali { color: var(--accent-pali); }

.lang-item__dot--latin { background: var(--accent-latin); }
.lang-item__name--latin { color: var(--accent-latin); }

.lang-item__dot--mandarin { background: var(--accent-mandarin); }
.lang-item__name--mandarin { color: var(--accent-mandarin); }

.lang-item__dot--sanskrit { background: var(--accent-sanskrit); }
.lang-item__name--sanskrit { color: var(--accent-sanskrit); }

.lang-item__dot--german { background: var(--accent-german); }
.lang-item__name--german { color: var(--accent-german); }

.lang-item__dot--japanese { background: var(--accent-japanese); }
.lang-item__name--japanese { color: var(--accent-japanese); }

.lang-item__dot--finnish { background: var(--accent-finnish); }
.lang-item__name--finnish { color: var(--accent-finnish); }

.lang-item__dot--cantonese { background: var(--accent-cantonese); }
.lang-item__name--cantonese { color: var(--accent-cantonese); }

.lang-item__dot--hmong { background: var(--accent-hmong); }
.lang-item__name--hmong { color: var(--accent-hmong); }

.lang-item__dot--indonesian { background: var(--accent-indonesian); }
.lang-item__name--indonesian { color: var(--accent-indonesian); }

.lang-item__dot--russian { background: var(--accent-russian); }
.lang-item__name--russian { color: var(--accent-russian); }

.lang-item__dot--greek { background: var(--accent-greek); }
.lang-item__name--greek { color: var(--accent-greek); }

.lang-item__dot--piraha { background: var(--accent-piraha); }
.lang-item__name--piraha { color: var(--accent-piraha); }

.lang-item__dot--guugu { background: var(--accent-guugu); }
.lang-item__name--guugu { color: var(--accent-guugu); }

.lang-item__dot--xoo { background: var(--accent-xoo); }
.lang-item__name--xoo { color: var(--accent-xoo); }

.lang-item__dot--korean { background: var(--accent-korean); }
.lang-item__name--korean { color: var(--accent-korean); }

.lang-item__dot--turkish { background: var(--accent-turkish); }
.lang-item__name--turkish { color: var(--accent-turkish); }

.lang-item__dot--arabic { background: var(--accent-arabic); }
.lang-item__name--arabic { color: var(--accent-arabic); }

.lang-item__dot--hebrew { background: var(--accent-hebrew); }
.lang-item__name--hebrew { color: var(--accent-hebrew); }

.lang-item__dot--thai { background: var(--accent-thai); }
.lang-item__name--thai { color: var(--accent-thai); }

.lang-item__dot--tibetan { background: var(--accent-tibetan); }
.lang-item__name--tibetan { color: var(--accent-tibetan); }

.lang-item__dot--burmese { background: var(--accent-burmese); }
.lang-item__name--burmese { color: var(--accent-burmese); }

.lang-item__dot--french { background: var(--accent-french); }
.lang-item__name--french { color: var(--accent-french); }

.lang-item__dot--spanish { background: var(--accent-spanish); }
.lang-item__name--spanish { color: var(--accent-spanish); }

.lang-item__dot--hindi { background: var(--accent-hindi); }
.lang-item__name--hindi { color: var(--accent-hindi); }

.lang-item__dot--hungarian { background: var(--accent-hungarian); }
.lang-item__name--hungarian { color: var(--accent-hungarian); }

.lang-item__dot--tagalog { background: var(--accent-tagalog); }
.lang-item__name--tagalog { color: var(--accent-tagalog); }

.lang-item__dot--swahili { background: var(--accent-swahili); }
.lang-item__name--swahili { color: var(--accent-swahili); }

/* ═══════════════════════════════════════════════════════
   CALCULATION BOX
   ═══════════════════════════════════════════════════════ */
.calc-box {
    background: var(--gray-100);
    padding: 16px;
    margin: 8px 0;
    border-left: 4px solid var(--red);
}

.calc-box--vietnamese { border-left-color: var(--accent-vietnamese); }
.calc-box--english { border-left-color: var(--accent-english); }
.calc-box--pali { border-left-color: var(--accent-pali); }
.calc-box--latin { border-left-color: var(--accent-latin); }
.calc-box--mandarin { border-left-color: var(--accent-mandarin); }

.calc-box__title {
    font-weight: 600;
    margin-bottom: 8px;
}

.calc-box__title--vietnamese { color: var(--accent-vietnamese); }
.calc-box__title--english { color: var(--accent-english); }
.calc-box__title--pali { color: var(--accent-pali); }
.calc-box__title--latin { color: var(--accent-latin); }
.calc-box__title--mandarin { color: var(--accent-mandarin); }

.calc-box__table {
    width: 100%;
    margin-top: 8px;
    font-size: var(--text-sm);
}

.calc-box__table td {
    padding: 4px;
}

.calc-box__table tr {
    border-bottom: 1px solid var(--gray-300);
}

.calc-box__total {
    font-weight: bold;
}

.calc-box__total td {
    padding: 8px 4px;
}

.calc-box__total--vietnamese { color: var(--accent-vietnamese); }
.calc-box__total--english { color: var(--accent-english); }
.calc-box__total--pali { color: var(--accent-pali); }
.calc-box__total--latin { color: var(--accent-latin); }

.calc-box__note {
    color: var(--gray-400);
    font-size: 0.85rem;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════
   INFO BOX
   ═══════════════════════════════════════════════════════ */
.info-box {
    padding: 24px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
}

.info-box__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 12px;
}

.info-box__text {
    color: var(--gray-500);
}

.info-box__text--muted {
    color: var(--gray-400);
}

/* ═══════════════════════════════════════════════════════
   COLOR CHIP
   ═══════════════════════════════════════════════════════ */
.color-chip {
    padding: 4px 8px;
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.color-chip--japanese { background: var(--accent-japanese); }
.color-chip--pali { background: var(--accent-pali); }
.color-chip--finnish { background: var(--accent-finnish); }
.color-chip--latin { background: var(--accent-latin); }
.color-chip--vietnamese { background: var(--accent-vietnamese); }
.color-chip--sanskrit { background: var(--accent-sanskrit); }
.color-chip--english { background: var(--accent-english); }
.color-chip--mandarin { background: var(--accent-mandarin); }

/* ═══════════════════════════════════════════════════════
   WORLD MAP CONTAINER
   ═══════════════════════════════════════════════════════ */
.world-map {
    background: var(--gray-100);
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid var(--gray-300);
}

.world-map__svg {
    width: 100%;
    height: auto;
    max-height: 400px;
}

/* ═══════════════════════════════════════════════════════
   STAT CARD
   ═══════════════════════════════════════════════════════ */
.stat-card {
    text-align: center;
}

.stat-card__value {
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-card__value--pali { color: var(--accent-pali); }
.stat-card__value--vietnamese { color: var(--accent-vietnamese); }
.stat-card__value--english { color: var(--accent-english); }
.stat-card__value--latin { color: var(--accent-latin); }

.stat-card__label {
    color: var(--gray-500);
}

/* ═══════════════════════════════════════════════════════
   BILINGUAL TEXT
   ═══════════════════════════════════════════════════════ */
.bilingual {
    line-height: 1.6;
}

.bilingual__en {
    color: var(--gray-400);
}

/* ═══════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════ */
.grid-regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.grid-cases {
    display: grid;
    gap: 12px;
}

.grid-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* ═══════════════════════════════════════════════════════
   TEXT UTILITIES
   ═══════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-secondary { color: var(--gray-500); }
.text-muted { color: var(--gray-400); }

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 600; }

.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }

/* ═══════════════════════════════════════════════════════
   SPACING UTILITIES
   ═══════════════════════════════════════════════════════ */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

/* ═══════════════════════════════════════════════════════
   FLEX UTILITIES
   ═══════════════════════════════════════════════════════ */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* ═══════════════════════════════════════════════════════
   FULL EXAMPLE CARDS
   ═══════════════════════════════════════════════════════ */
.full-example {
    background: var(--white);
    border: 1px solid var(--gray-300);
    padding: var(--space-8);
    margin: var(--space-6) 0;
}

.full-example:hover {
    border-color: var(--black);
}

/* Spectrum Point */
.spectrum-point {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.spectrum-point:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

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

.pali-animate-in {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pali-nav-links {
        display: none;
    }

    .pali-hero h1 {
        font-size: 32px;
    }

    .pali-modules-grid {
        grid-template-columns: 1fr;
    }

    .spectrum-labels {
        font-size: 10px;
    }

    .grid-2, .grid-4, .grid-2col {
        grid-template-columns: 1fr;
    }

    .pali-container {
        padding: var(--space-4);
    }
}

@media (max-width: 1024px) {
    .pali-container {
        padding: var(--space-6);
    }
}

/* ═══════════════════════════════════════════════════════
   HERO SECTION - Swiss International Style
   ═══════════════════════════════════════════════════════ */
.hero {
    padding: var(--space-12) 0 var(--space-8);
    border-bottom: 2px solid var(--black);
    margin-bottom: var(--space-8);
}

.hero-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--red);
    margin-bottom: var(--space-4);
}

.hero-title,
.hero h1.hero-title {
    font-size: clamp(54px, 10vw, 120px) !important;
    font-weight: 900 !important;
    line-height: 0.85 !important;
    letter-spacing: -0.04em !important;
    color: var(--black) !important;
    margin: 0 0 var(--space-8) 0 !important;
    text-transform: uppercase !important;
}

.hero-title span {
    color: var(--red) !important;
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--gray-500);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 0 var(--space-4) 0;
}

.hero-ai-note {
    font-size: var(--text-sm);
    color: var(--gray-400);
    font-style: italic;
    margin: 0 0 var(--space-6) 0;
}

.hero-author {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin: 0 0 var(--space-8) 0;
}

.hero-author strong {
    color: var(--black);
    font-weight: 600;
}

.hero-stats {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-300);
}

.hero-stats .stat {
    text-align: left;
}

.hero-stats .stat-number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--black);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.hero-stats .stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}

@media (max-width: 768px) {
    .hero {
        padding: var(--space-8) 0 var(--space-6);
    }

    .hero-title,
    .hero h1.hero-title {
        font-size: clamp(40px, 12vw, 60px) !important;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .hero-stats .stat {
        min-width: 100px;
    }
}