/* ====================================================
   SunnyBase - ČISTÝ, MINIMALISTICKÝ CSS
   Základní kostra pro všechny stránky
   ==================================================== */

/* ====================================================
   1. ZÁKLADNÍ NASTAVENÍ
   ==================================================== */

:root {
    --primary-purple: #8b1a1a;
    --secondary-purple: #a83232;
    --gold: #d4af37;
    --gold-hover: #f0c850;
    --light-gold: #f4d46b;
    --accent: #f39c12;
    --teal: #00c9a7;
    --teal-glow: rgba(0, 201, 167, 0.3);
    --dark-bg: #1a1a2e;
    --card-bg: #2a1a1e;
    --text-light: #e0e0e0;
    --text-gray: #a0a0a0;
    --border-color: rgba(212, 175, 55, 0.3);
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --track-bg: rgba(0, 0, 0, 0.3);

    /* Page-specific color tokens */
    --science-blue: #0ea5e9;
    --science-dark: #0c4a6e;
    --science-accent: #06b6d4;
    --science-light: #e0f2fe;
    --law-gold: #f59e0b;
    --law-blue: #06b6d4;
    --law-purple: #8b5cf6;
    --existential-blue: #3b82f6;
    --existential-purple: #a855f7;
    --existential-dark: #1e293b;
    --limit-red: #ef4444;
    --limit-orange: #f97316;
    --limit-yellow: #eab308;
    --extended-purple: #8b5cf6;
    --extended-pink: #ec4899;
    --extended-orange: #f97316;

    /* Doplněné chybějící vars — používané ve stránkách bez definice */
    --purple: #8b5cf6;
    --primary-color: #8b5cf6;
    --primary-purple: #8b5cf6;
    --light-gray: #a0a0b0;
    --text-muted: #8a8a9a;
    --text-light-muted: rgba(224, 224, 240, 0.65);
    --bg-primary: #1a0404;
    --sense-blue: #38bdf8;
    --sense-pink: #f472b6;
    --sense-purple: #c084fc;
    --time-blue: #60a5fa;
    --freq-color: #4ade80;
    --mu: rgba(255, 255, 255, 0.45);   /* admin-wysiwyg muted text */
    --bd: rgba(255, 255, 255, 0.12);   /* admin-wysiwyg border */
    --bg: rgba(0, 0, 0, 0.4);          /* generic dark bg */
    --s: #1a1a2e;                       /* admin-wysiwyg sidebar bg */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth odstraněno — způsobovalo laggy odezvu kolečka myši */
    scroll-padding-top: 70px; /* výška unified-menu — zabrání scrollu pod menu */
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #1a0404; /* fallback — pokud ::before selže */
    font-size: 18px !important; /* ukotvit rem — brání přepisování prohlížečem (LibreWolf RFP) */
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: transparent; /* průhledné — ::before { z-index:-1 } je vidět skrz */
    color: var(--text-light);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    overflow-anchor: none; /* zabraňuje auto-scroll při dynamickém přidání admin baru */
    position: relative;
}

/* Dark overlay + background image via fixed pseudo-element
   (background-attachment:fixed breaks when html/body have overflow set) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(8, 2, 2, 0.92), rgba(8, 2, 2, 0.92));
    pointer-events: none;
}

/* Texture overlay — viditelná NA VRCHU všech elementů stránky (page-hero, cards, atd.)
   pointer-events: none = neklikatelné, interakce fungují normálně */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1500; /* nad obsahem (auto), pod menu (2000) a admin barem */
    background: url('../images/background.png') center center / cover no-repeat;
    opacity: 0.17;
    pointer-events: none;
}

/* ====================================================
   GLOBAL TAG STYLES - JEDNOTNÝ VZHLED VŠEHO
   ==================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
    margin: 1.5rem 0 1rem 0;
    font-weight: 600;
    line-height: 1.3;
}

/* Menu h3 nesmí dědit globální margin a line-height */
.menu-column > h3, .menu-column > h3 a {
    margin: 0 !important;
    line-height: 1.45 !important;
    text-shadow: none;
}

h1 {
    font-size: 2.8em;
    letter-spacing: 2px;
    margin: 1rem 0 0.5rem 0;
}

h2 {
    font-size: 2.2em;
    letter-spacing: 1.5px;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.8em;
    letter-spacing: 1px;
    color: var(--light-gold);
}

h4 {
    font-size: 1.4em;
    letter-spacing: 0.5px;
}

h5 {
    font-size: 1.2em;
}

h6 {
    font-size: 1em;
}

p {
    margin: 0.8rem 0;
    line-height: 1.8;
    color: var(--text-light);
}

/* ====================================================
   2. LAYOUT - HLAVNÍ STRUKTURA
   ==================================================== */

.container {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 20px 40px;
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    display: block;
    left: 0;
    right: 0;
}

.content-section {
    position: relative;
    clear: both;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Centrované nadpisy a odstavce v content-section */
.content-section > h2,
.content-section > h3,
.content-section > p,
.content-section > section > h2,
.content-section > section > h3,
.content-section > div > h2:not([class*="text-left"]):not([class*="border-left"]),
.content-section > div > h3:not([class*="text-left"]):not([class*="border-left"]) {
    text-align: center;
}

/* Výjimky: kartové nadpisy a callout boxy zůstávají vlevo */
.encyclopedia-card h2, .encyclopedia-card h3,
.path-card h2, .path-card h3,
.archetype-card h2, .archetype-card h3,
.feature-card h2, .feature-card h3,
.insight-box h2, .insight-box h3,
.aha-box h2, .aha-box h3,
.connection-box h2, .connection-box h3,
.callout-box h2, .callout-box h3,
table h2, table h3 {
    text-align: left !important;
}

/* ====================================================
   3. HERO SEKCE - STICKY HEADER
   ==================================================== */

/* body::before - odstraněno, background.png se načítá přímo v body */
/* Tmavý overlay pro čitelnost textu - ne na homepage */
body:not(.homepage)::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 3, 3, 0.88);
    z-index: -1;
    pointer-events: none;
}
body {
    position: relative;
}
/* Hero sections need relative positioning for pseudo-elements */
[class*="-hero"], .page-hero {
    position: relative !important;
}

/* Clickable encyclopedia cards */
.encyclopedia-card {
    cursor: pointer;
}
.encyclopedia-card[data-href] {
    transition: transform 0.2s, box-shadow 0.2s;
}
.encyclopedia-card[data-href]:hover {
    transform: translateX(8px) scale(1.01);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}
/* Wrap entire card as link */
a.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.card-link .encyclopedia-card {
    height: 100%;
}

.page-hero {
    position: relative !important;
    z-index: 10;
    margin-top: 0;
    padding: 50px 20px 40px 20px;
    background:
        linear-gradient(135deg, rgba(74, 44, 94, 0.65), rgba(26, 26, 46, 0.70));
    border-bottom: 3px solid var(--gold);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Gene Keys Trinity - Hero Variant */
.page-hero--gene-keys {
    background: linear-gradient(135deg, #8b1a1a, #2e0a0a);
    padding: 60px 20px;
}

.page-hero__title {
    color: var(--gold);
}

.page-hero__subtitle {
    color: var(--text-light);
    font-size: 1.2em;
}

.page-hero__description {
    color: var(--light-gold);
    font-style: italic;
    margin-top: 10px;
    font-size: 0.95em;
    letter-spacing: 0.3px;
}

/* Emphasis & Quote Styles */
.emphasis-gold {
    font-style: italic;
    color: var(--gold);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.emphasis-gold--with-margin {
    font-style: italic;
    color: var(--gold);
    margin-top: 15px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Improve contrast for low-contrast elements */
.page-hero h1,
.page-hero h2,
.page-hero h3 {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.encyclopedia-card h3 {
    color: var(--light-gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Centered Section Titles */
.section-title {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Centered Content Section */
.content-center {
    text-align: center;
}

/* CTA Button - Centered */
.btn-cta {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 40px;
    background: linear-gradient(135deg, var(--gold), var(--primary-purple));
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.2em;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Card Color Variants - Čakry barvy */
.card-red {
    border-left-color: #ef4444;
}

.card-orange {
    border-left-color: #f97316;
}

.card-yellow {
    border-left-color: #eab308;
}

.card-green {
    border-left-color: #22c55e;
}

.card-blue {
    border-left-color: #3b82f6;
}

.card-indigo {
    border-left-color: #6366f1;
}

.card-purple {
    border-left-color: #a855f7;
}

/* Page Hero Variants */
.page-hero--achievements {
    background: linear-gradient(135deg, #8b1a1a, #2e0a0a);
}


/* Achievement Stats Grid */
.encyclopedia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 2rem auto !important;
    align-items: stretch; /* Všechny karty v řádku stejná výška */
    max-width: 1200px !important;
    width: 100%;
}

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

.encyclopedia-grid.grid-cols-6 {
    grid-template-columns: repeat(3, 1fr);
}

.encyclopedia-grid.two-columns {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
}

/* Category Tabs Container */
.category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2rem 0;
    justify-content: center;
}

.category-tabs .btn {
    flex: 1;
    min-width: 150px;
}

/* Special Card - Why 64 Section */
.card-why-64 {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
}

.card-why-64 h3 {
    color: var(--gold);
}

/* Text Color Styles */
.text-gold {
    color: var(--gold);
}

.text-light {
    color: var(--text-light);
}

/* Gold Bold Text */
.text-gold-bold {
    color: var(--gold);
    font-weight: bold;
}

/* Centered Text with Bottom Margin */
.text-center-margin {
    text-align: center;
    margin-bottom: 2rem;
}

/* ===== ACHIEVEMENTS PAGE STYLES ===== */

/* Achievement Stat Cards */
.achievement-stat {
    text-align: center;
}

.achievement-stat__icon {
    font-size: 3em;
    display: block;
    margin-bottom: 10px;
}

.achievement-stat__value {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    margin: 10px 0;
}

.achievement-stat__label {
    display: block;
    color: #e0e0e0;
    margin-top: 10px;
}

/* Achievement card color variants */
.achievement-card--gold {
    border-left-color: #ffd700;
}

.achievement-card--purple {
    border-left-color: #d946ef;
}

.achievement-card--green {
    border-left-color: #10b981;
}

.achievement-card--red {
    border-left-color: #ef4444;
}

.achievement-card--blue {
    border-left-color: #3b82f6;
}

.achievement-card--orange {
    border-left-color: #f97316;
}

.achievement-card--cyan {
    border-left-color: #06b6d4;
}

/* Progress bar styling */
.level-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #f1d98f);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.page-hero h1 {
    font-size: 2.5em;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.page-hero p {
    font-size: 1.1em;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}

.hero-subtitle {
    color: var(--text-light);
    font-size: 1.2em;
    margin-bottom: 15px;
    line-height: 1.6;
}

.hero-badge {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--gold);
    border-radius: 8px;
    color: var(--text-light);
    font-weight: 500;
    transition: all 0.3s ease;
}

.hero-badge a {
    color: var(--text-light);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.hero-badge a:hover {
    color: var(--gold);
}

.hero-badge-separator {
    color: #e0e0e0;
    margin: 0 10px;
}


.section-description {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 1.2em;
    line-height: 1.7;
}

.zodiac-section {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(26, 26, 46, 0.8));
    padding: 50px 20px;
    border-radius: 20px;
    border: 3px solid var(--gold);
    margin-top: 3rem;
}

.featured-section {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(42, 26, 62, 0.6));
    padding: 50px 30px;
    border-radius: 20px;
    border: 3px solid var(--gold);
    margin-top: 3rem;
}

.category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CATEGORY CARDS */
.category-card {
    cursor: pointer;
}

.category-icon {
    font-size: 3em;
    margin-bottom: 10px;
}

.category-card h3 {
    color: var(--gold);
    font-size: 1.5em;
}

.category-card p {
    color: #e0e0e0;
    margin: 10px 0;
    line-height: 1.6;
}

.category-note {
    font-size: 0.9em;
    margin-top: 10px;
}

/* Category colors */
.cat-purple {
    background: rgba(139, 79, 191, 0.6);
    border-left-color: #9b59b6;
}

.cat-purple .category-note {
    color: #c4b5fd;
}

.cat-blue {
    background: rgba(99, 102, 241, 0.6);
    border-left-color: #6366f1;
}

.cat-blue .category-note {
    color: #c4b5fd;
}

.cat-green {
    background: rgba(16, 185, 129, 0.6);
    border-left-color: #10b981;
}

.cat-green .category-note {
    color: #a7f3d0;
}

.cat-red {
    background: rgba(239, 68, 68, 0.6);
    border-left-color: #ef4444;
}

.cat-red .category-note {
    color: #fecaca;
}

.cat-lime {
    background: rgba(34, 197, 94, 0.6);
    border-left-color: #22c55e;
}

.cat-lime .category-note {
    color: #bbf7d0;
}

.cat-amber {
    background: rgba(245, 158, 11, 0.6);
    border-left-color: #f59e0b;
}

.cat-amber .category-note {
    color: #fef3c7;
}

.cat-gold {
    background: rgba(251, 191, 36, 0.6);
    border-left-color: #fbbf24;
}

.cat-gold .category-note {
    color: #fef08a;
}

.cat-indigo {
    background: rgba(129, 140, 248, 0.6);
    border-left-color: #818cf8;
}

.cat-indigo .category-note {
    color: #c7d2fe;
}

/* CTA BOX */
.cta-box {
    text-align: center;
    margin-top: 3rem;
    padding: 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border: 2px solid var(--gold);
}

.cta-text {
    font-size: 1.3em;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}

/* Encyclopedia Card - Centered text for better appearance */
.encyclopedia-card {
    text-align: center;
}

/* Standalone encyclopedia-card (mimo grid) - omez šířku */
.content-section > .encyclopedia-card {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.encyclopedia-card .category-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    display: block;
}


.encyclopedia-card p {
    text-align: center;
    line-height: 1.6;
}

.encyclopedia-card .category-note {
    text-align: center;
    font-style: italic;
    margin-top: 15px;
    font-size: 0.95em;
}

/* Philosophy box - Centered content */
.philosophy-box {
    text-align: center;
}

.philosophy-box p {
    text-align: center;
    margin: 15px 0;
}

.philosophy-quote {
    font-size: 1.4em;
    color: var(--gold);
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
}

.philosophy-italic {
    font-style: italic;
    color: var(--text-light);
    line-height: 1.7;
}

.philosophy-note {
    font-size: 0.95em;
    color: #b0b0b0;
}

/* Key systems box - Centered display */
.key-systems-box {
    text-align: center;
    background: rgba(74, 44, 94, 0.2);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.key-systems-title {
    color: var(--gold);
    font-size: 1.3em;
    margin-bottom: 15px;
    text-align: center;
}

.system-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.system-tag {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.system-tag-purple {
    background: rgba(168, 85, 247, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.6);
    color: #d8b4fe;
}

.system-tag-blue {
    background: rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.6);
    color: #bfdbfe;
}

.system-tag-green {
    background: rgba(16, 185, 129, 0.3);
    border: 1px solid rgba(16, 185, 129, 0.6);
    color: #a7f3d0;
}

.system-tag-amber {
    background: rgba(245, 158, 11, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.6);
    color: #fef3c7;
}

.system-tag-red {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: #fecaca;
}

/* Button styles for recommended pages and modals */
.btn-gold {
    padding: 10px 25px;
    background: linear-gradient(135deg, var(--gold), #e6a82e);
    border: 2px solid var(--gold);
    border-radius: 8px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    font-size: 1em;
}

.btn-gold:hover {
    background: linear-gradient(135deg, #e6a82e, var(--gold));
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, var(--gold), #f1d98f);
    color: #1a1a2e;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.6);
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.8);
}

/* Generic button styling */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    color: #1a1a2e;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
    background: linear-gradient(135deg, var(--light-gold), var(--gold));
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cta-footer {
    font-size: 1em;
    color: #aaa;
    margin-top: 15px;
    text-align: center;
}


/* TEASER SECTION */
.teaser-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(139, 79, 191, 0.2));
    border-left: 5px solid var(--gold);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 40px;
    text-align: center;
}

.teaser-main {
    font-size: 1.3em;
    line-height: 1.8;
    color: var(--light-gold);
    margin: 0;
}

.teaser-sub {
    color: var(--text-light);
    font-size: 0.95em;
}

/* FOOTER */
.page-footer {
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.5), rgba(0, 0, 0, 0.8));
    border-top: 3px solid var(--gold);
    padding: 40px 20px;
    margin-top: 60px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-copyright {
    color: var(--text-light);
    font-size: 1em;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.footer-tagline {
    color: var(--text-gray);
    font-size: 0.9em;
    margin: 0;
    font-style: italic;
}
.footer-company-info {
    color: rgba(255,255,255,0.65);
    font-size: 0.72em;
    margin: 6px 0 0;
    letter-spacing: 0.2px;
}

/* ACHIEVEMENTS BADGE - Floating Button */
.achievements-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: fixed;
    bottom: 88px;
    left: 18px;
    width: 40px;
    height: 40px;
    background: rgba(26, 10, 42, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    font-size: 1.1em;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0.7;
}

.achievements-badge:hover {
    transform: scale(1.08);
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
    opacity: 1;
}

.achievements-badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: bold;
    border: 2px solid var(--dark-bg);
}

/* STAT GRID */
.stat-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.5rem;
    gap: 15px;
}

/* SYSTEM TAGS - COLORS */


.stat-title {
    font-size: 2.8em;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    text-align: center;
}

.stat-subtitle {
    font-size: 1.3em;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    font-weight: 300;
    text-align: center;
}


/* ====================================================
   4. NAVIGACE - JEDNOTNÉ MENU
   ==================================================== */

/* ====================================================
   UNIFIED MENU - BEAUTIFUL HORIZONTAL NAVIGATION
   ==================================================== */

.unified-menu {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: linear-gradient(180deg, rgba(15, 4, 4, 0.78), rgba(10, 2, 2, 0.72));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 4px solid var(--gold);
    padding: 0 20px;
    margin: 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 175, 55, 0.1);
    overflow: visible;
    transform: translateZ(0);
    width: 100%;
    box-sizing: border-box;
}

.menu-brand {
    padding: 10px 20px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
}

.menu-brand a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-logo-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    border: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
    flex-shrink: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.menu-brand a:hover .menu-logo-img {
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.7);
    transform: scale(1.05);
}

.menu-brand-text {
    display: flex;
    flex-direction: column;
}

.menu-brand h1 {
    margin: 0;
    font-size: 1.4em;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    letter-spacing: 3px;
    font-weight: bold;
}

.menu-brand .tagline {
    display: block;
}

.menu-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    grid-auto-rows: 46px;
    gap: 8px 10px;
    padding: 12px 20px;
    list-style: none;
    margin: 0;
    justify-content: center;
    align-items: stretch;
    overflow: visible;
    max-height: none;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.menu-column {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    border-right: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 4px 3px;
    transition: all 0.25s ease;
    background: rgba(74, 44, 94, 0.3);
    border-left: 2px solid var(--gold);
    border-radius: 4px;
    margin: 0;
    min-height: 0;
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
}

/* INVISIBLE BRIDGE - Easy hover area between menu and submenu */
.menu-column::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 50px;
    background: transparent;
    z-index: 9998;
    pointer-events: auto;
}

.menu-column:last-child {
    border-right: none;
}

.menu-column > h3 {
    margin: 0;
    padding: 0;
    color: var(--gold);
    font-size: 0.62em; /* fallback; JS přepisuje menu_link_size z branding.json */
    font-weight: 700;
    letter-spacing: 0.1px;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    white-space: nowrap;
    overflow: visible;
    border: none;
    text-align: center;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
}

.menu-column > h3 a {
    display: block;
    text-align: center;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    width: 100%;
}

.menu-column > h3:hover {
    background: transparent;
    border: none;
    color: #ffd93d;
    transform: scale(1.12);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.menu-column:hover {
    border-left-color: #ffd93d;
    z-index: 9999;
}

/* Otevřené submenu — výrazné zvýraznění boxu */
.menu-column.col-open {
    background: rgba(212, 175, 55, 0.18) !important;
    border-left-color: #ffd93d !important;
    border-left-width: 4px;
    box-shadow: inset 0 0 12px rgba(212, 175, 55, 0.15), 0 0 8px rgba(212, 175, 55, 0.2);
    z-index: 9999;
}

.menu-column.col-open > h3,
.menu-column.col-open > h3 a {
    color: #ffd93d !important;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
}

.menu-dropdown {
    position: absolute;
    z-index: 99999;
    display: none; /* skrytý výchozí stav; col-open přepíše na grid */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    background: rgba(10, 4, 28, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-top: 3px solid var(--gold);
    border-radius: 0 0 10px 10px;
    width: min(1200px, calc(100vw - 40px));
    list-style: none;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
    overflow-y: visible;
}

/* Dropdown edge positioning handled by JS (viewport clamp) */

/* Definice barev v kořenovém elementu pro snadnou údržbu */
/* 1. Gradient fade odstraňován — zastínil poslední řádek položek */
.menu-dropdown::after {
    display: none;
}

/* Hint "více položek" — skrytý, scrollbar odstraněn */
.dropdown-more-hint { display: none; }

/* Scrollbar odstraňován — všechny položky viditelné najednou */
.menu-dropdown::-webkit-scrollbar { display: none; }

/* 3. Podpora pro Firefox */
.menu-dropdown { /* scrollbar Firefox */
    scrollbar-width: none;
}

/* Dropdown se otevírá kliknutím — JS přidává třídu col-open */
.menu-column.col-open .menu-dropdown {
    display: grid; /* přepíše display:none */
}

/* h3 nadpis — kurzor pointer aby bylo jasné že je klikatelný */
.menu-dropdown li {
    margin: 0;
    padding: 0;
}

.menu-dropdown li:first-child {
    grid-column: 1;
}

.menu-dropdown a {
    display: block;
    padding: 4px 8px;
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 400;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-left: 2px solid rgba(212, 175, 55, 0.25);
    background: transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.4;
    min-height: 24px;
}

.menu-dropdown a:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.12);
    border-left-color: var(--gold);
}

/* Střídání pozadí pro vizuální oddělení — podobně jako hlavní menu */
.menu-dropdown a:not(:first-child):nth-child(odd) {
    background: rgba(74, 44, 94, 0.22);
}
.menu-dropdown a:not(:first-child):nth-child(even) {
    background: rgba(15, 8, 32, 0.55);
}
.menu-dropdown a:not(:first-child):nth-child(odd):hover,
.menu-dropdown a:not(:first-child):nth-child(even):hover {
    background: rgba(212, 175, 55, 0.14);
    border-left-color: var(--gold);
    color: #fff;
}

/* První položka = nadpis sekce */
.menu-dropdown a:first-child {
    color: var(--gold);
    font-weight: 700;
    font-size: 11px;
    background: rgba(212, 175, 55, 0.08);
    border-left-color: var(--gold);
    border-radius: 5px 5px 0 0;
    padding: 5px 10px;
    grid-column: 1 / -1; /* přes celou šířku */
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    margin-bottom: 2px;
}

.menu-dropdown a:first-child:hover {
    background: rgba(212, 175, 55, 0.18);
    color: #ffd93d;
}

.menu-dropdown a span {
    font-size: 1em;
    flex-shrink: 0;
    opacity: 0.9;
}

.menu-dropdown a:last-child {
    border-bottom: none;
}

.menu-dropdown a.active {
    color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
    border-left-color: var(--light-gold);
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menu Grid Responsive — auto-fit se přizpůsobuje rozlišení */
@media (min-width: 1600px) {
    .menu-sections {
        /* 175px: při 1920px dává 10 sloupců (10+9 řádky), text 10px se vejde */
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    }
}

@media (max-width: 1599px) and (min-width: 1200px) {
    .menu-sections {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
}

@media (max-width: 1199px) and (min-width: 900px) {
    .menu-sections {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .menu-sections {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 10px 8px;
    }
    .menu-column > h3 {
        font-size: 0.6em;
    }
    /* Na menších obrazovkách - dropdown vždy doleva */
    .menu-column .menu-dropdown {
        left: 0;
        right: auto;
        transform: none;
    }
    .menu-column:nth-last-child(-n+2) .menu-dropdown {
        left: auto;
        right: 0;
    }
}

@media (max-width: 599px) {
    .menu-sections {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        padding: 8px 5px;
    }
    .menu-column {
        padding: 6px 4px;
    }
    .menu-column > h3 {
        font-size: 0.55em;
    }
    .menu-dropdown {
        min-width: 200px;
        max-width: calc(100vw - 20px);
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }
}

/* ====================================================
   5. BREADCRUMBS & RELATED TOPICS
   ==================================================== */

.breadcrumbs {
    padding: 16px 0;
    font-size: 0.95em;
    color: var(--text-gray);
    margin: 20px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.breadcrumbs a {
    color: var(--gold);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    position: relative;
}

.breadcrumbs a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--light-gold);
    transition: width 0.3s ease;
}

.breadcrumbs a:hover {
    color: var(--light-gold);
}

.breadcrumbs a:hover::before {
    width: 100%;
}

.breadcrumbs span {
    color: var(--text-gray);
    margin: 0 4px;
}

.related-topics-container,
.path-selection-container,
.guide-section {
    background: linear-gradient(135deg, rgba(74, 44, 94, 0.2), rgba(26, 26, 46, 0.2));
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--gold);
    border-radius: 12px;
    padding: 32px 24px;
    margin: 35px auto;
    max-width: 1400px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.related-topics-container:hover,
.path-selection-container:hover,
.guide-section:hover {
    border-left-color: var(--light-gold);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
}

.section-container h2,
.related-topics-container h2,
.path-selection-container h2 {
    color: var(--gold);
    font-size: 1.8em;
    margin-bottom: 12px;
    text-align: center;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
    letter-spacing: 1px;
}

.section-container > p:first-of-type,
.related-topics-container > p:first-of-type {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 24px;
    font-size: 1.08em;
    line-height: 1.6;
}

.secondary-topics-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    justify-content: center;
}

.secondary-topic {
    display: inline-block;
    padding: 10px 16px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--gold);
    border-radius: 20px;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.95em;
    transition: all 0.3s ease;
    font-weight: 500;
}

.secondary-topic:hover {
    background: rgba(212, 175, 55, 0.25);
    border-color: var(--light-gold);
    color: var(--light-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

/* ====================================================
   6. KARTY - UNIFIED DESIGN
   ==================================================== */

.card, 
.encyclopedia-card, 
.feature-card, 
.path-card, 
.connection-card,
.philosophy-card,
.archetype-card,
.topic-card,
.system-card {
    background: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--gold);
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.card:hover, 
.encyclopedia-card:hover, 
.feature-card:hover, 
.path-card:hover, 
.connection-card:hover,
.philosophy-card:hover,
.archetype-card:hover,
.topic-card:hover,
.system-card:hover {
    transform: translateX(10px) scale(1.02);
    background: rgba(0, 0, 0, 0.5);
    border-left-color: var(--light-gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Enhanced Philosopher Cards */
.philosopher-card {
    text-align: center;
    background: linear-gradient(135deg, rgba(74, 44, 94, 0.3), rgba(0, 0, 0, 0.3));
    border-left: 5px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.philosopher-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.philosopher-card:hover::before {
    opacity: 1;
}

.philosopher-card:hover {
    transform: translateY(-5px) scale(1.03);
    border-left-color: var(--light-gold);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
}

.philosopher-icon {
    transition: transform 0.3s ease;
}

.philosopher-card:hover .philosopher-icon {
    transform: scale(1.2) rotate(5deg);
}

.philosopher-school {
    transition: all 0.3s ease;
}

.philosopher-card:hover .philosopher-school {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--light-gold);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Philosopher Card Elements - NO INLINE STYLES */
.philosopher-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.philosopher-name {
    margin: 0 0 5px 0;
    color: var(--gold);
    font-size: 1.3em;
}

.philosopher-years {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.9em;
    margin: 5px 0;
}

.philosopher-school {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.75em;
    margin: 10px 0;
    transition: all 0.3s ease;
}

.philosopher-content {
    text-align: left;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.philosopher-label {
    margin: 0 0 8px 0;
}

.philosopher-works-label {
    margin: 15px 0 8px 0;
}

.philosopher-concepts {
    line-height: 1.6;
    margin: 0;
    font-size: 1em;
    color: var(--text-light);
}

.philosopher-works {
    line-height: 1.5;
    margin: 0;
    font-style: italic;
    color: var(--text-gray);
}

.card h3, 
.encyclopedia-card h3, 
.feature-card h3,
.path-card h3,
.connection-card h3 {
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 1.2em;
}

.card p, 
.encyclopedia-card p, 
.feature-card p,
.path-card p,
.connection-card p {
    color: var(--text-light);
    font-size: 0.95em;
}

/* ====================================================
   7. SECTION KONTEJNERY - CENTER ALIGNED
   ==================================================== */

.path-hero-section {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.path-title {
    text-align: center;
    color: var(--gold);
    font-size: 2.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.path-subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 1.2em;
    margin-bottom: 30px;
    line-height: 1.7;
}

.path-hero-section .encyclopedia-grid {
    max-width: 100%;
}

/* ====================================================
   8. GRID LAYOUTY - JEDNOTNÝ SYSTÉM
   ==================================================== */

/* 
   UNIFIED GRID SYSTEM - Konzistentní počet boxů na všech breakpointech:
   - Desktop (>1200px): 4 sloupce
   - Medium (992-1200px): 3 sloupce  
   - Tablet (768-992px): 2 sloupce
   - Mobile (<768px): 1 sloupec
*/

.encyclopedia-grid, 
.archetype-grid, 
.features-grid, 
.systems-grid,
.path-selector,
.connections-grid,
.philosophy-grid,
.grid-autofit-280,
.grid-autofit-250,
.grid-autofit-250-gap15,
.grid-autofit-300-gap15,
.grid-autofit-200-gap15,
.unified-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 2rem auto;
    max-width: 1400px;
}

/* Medium screens - 3 columns */
@media (max-width: 1200px) {
    .encyclopedia-grid, 
    .archetype-grid, 
    .features-grid, 
    .systems-grid,
    .path-selector,
    .connections-grid,
    .philosophy-grid,
    .grid-autofit-280,
    .grid-autofit-250,
    .grid-autofit-250-gap15,
    .grid-autofit-300-gap15,
    .grid-autofit-200-gap15,
    .unified-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .path-selector,
    body .connections-grid,
    body .philosophy-grid,
    body .grid-autofit-280,
    body .grid-autofit-250,
    body .grid-autofit-250-gap15,
    body .grid-autofit-300-gap15,
    body .grid-autofit-200-gap15,
    body .grid-auto-fit-300,
    body .grid-auto-fit-220,
    body .grid-auto-fit-200,
    body .unified-grid,
    body [class*="grid-autofit"],
    body [class*="grid-auto-fit"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    body .planet-info-grid,
    body .examples-grid,
    body .chakra-info-grid,
    body .rune-grid,
    body .process-grid,
    body .experiment-grid,
    body .comparison-grid,
    body .calculator-grid,
    body .tarot-grid,
    body .symbol-grid,
    body .numbers-grid,
    body .example-grid,
    body .visualization-grid,
    body .vertebrae-grid,
    body .treatment-grid,
    body .tradition-grid,
    body .tcm-grid,
    body .stats-grid,
    body .sephirot-grid,
    body .sense-grid,
    body .results-grid,
    body .planet-grid,
    body .personality-grid,
    body .paradox-grid,
    body .meridian-grid,
    body .mbti-grid,
    body .inventor-grid,

    body .house-grid,
    body .herbs-grid,
    body .fractal-grid,
    body .dna-grid,
    body .degree-grid,
    body .consciousness-grid,
    body .calendar-grid,
    body .aspect-grid,
    body .grid-test-cards,
    body .grid-tao-examples,
    body [class$="-grid"],
    body [class*="-grid "] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* Tablet - 2 columns */
@media (max-width: 992px) {
    .encyclopedia-grid, 
    .archetype-grid, 
    .features-grid, 
    .systems-grid,
    .path-selector,
    .connections-grid,
    .philosophy-grid,
    .grid-autofit-280,
    .grid-autofit-250,
    .grid-autofit-250-gap15,
    .grid-autofit-300-gap15,
    .grid-autofit-200-gap15,
    .unified-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .path-selector,
    body .connections-grid,
    body .philosophy-grid,
    body .grid-autofit-280,
    body .grid-autofit-250,
    body .grid-autofit-250-gap15,
    body .grid-autofit-300-gap15,
    body .grid-autofit-200-gap15,
    body .grid-auto-fit-300,
    body .grid-auto-fit-220,
    body .grid-auto-fit-200,
    body .unified-grid,
    body [class*="grid-autofit"],
    body [class*="grid-auto-fit"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .planet-info-grid,
    body .examples-grid,
    body .chakra-info-grid,
    body .rune-grid,
    body .process-grid,
    body .experiment-grid,
    body .comparison-grid,
    body .calculator-grid,
    body .tarot-grid,
    body .symbol-grid,
    body .numbers-grid,
    body .example-grid,
    body .visualization-grid,
    body .vertebrae-grid,
    body .treatment-grid,
    body .tradition-grid,
    body .tcm-grid,
    body .stats-grid,
    body .sephirot-grid,
    body .sense-grid,
    body .results-grid,
    body .planet-grid,
    body .personality-grid,
    body .paradox-grid,
    body .meridian-grid,
    body .mbti-grid,
    body .inventor-grid,

    body .house-grid,
    body .herbs-grid,
    body .fractal-grid,
    body .dna-grid,
    body .degree-grid,
    body .consciousness-grid,
    body .calendar-grid,
    body .aspect-grid,
    body .grid-test-cards,
    body .grid-tao-examples,
    body [class$="-grid"],
    body [class*="-grid "] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .grid-cols-4,
    body .grid-cols-6,
    body .encyclopedia-grid.grid-cols-4,
    body .encyclopedia-grid.grid-cols-6,
    body [class*="grid-cols-"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .path-selector,
    body .connections-grid,
    body .philosophy-grid,
    body .unified-grid,
    body .grid-3col,
    body .grid-gap-20,
    body [class*="grid-autofit"],
    body [class*="grid-auto-fit"],
    body [class*="grid-cols-"],
    body [class$="-grid"]:not([class*="grid-2col"]),
    body [class*="-grid "]:not([class*="grid-2col"]),
    body [class*=" grid-"]:not([class*="grid-2col"]) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 2-col gridy zůstanou na 2 */
    body .grid-2col,
    body .grid-2col-gap30,
    body .grid-2col-gap-30,
    body [class*="grid-2col"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .stat-grid,
    body .encyclopedia-grid.stat-grid,
    body .encyclopedia-grid.grid-cols-4,
    body [class*="stat-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .unified-grid,
    body [class$="-grid"]:not(.stat-grid):not(.footer-grid),
    body [class*="-grid "]:not(.stat-grid):not(.footer-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .encyclopedia-grid > *,
    body .archetype-grid > *,
    body .features-grid > *,
    body .systems-grid > *,
    body .unified-grid > *,
    body [class$="-grid"]:not(.stat-grid) > * {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    body .encyclopedia-grid.grid-cols-6 > *,
    body .grid-cols-6 > * {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    body .encyclopedia-grid:not(.stat-grid) > *,
    body .archetype-grid > *,
    body .features-grid > *,
    body .systems-grid > *,
    body .unified-grid > *,
    body [class$="-grid"]:not(.stat-grid) > * {
        flex: 1 1 calc(50% - 20px) !important;
        max-width: calc(50% - 10px) !important;
    }

    html body .encyclopedia-grid:not(.stat-grid):not(.grid-2col),
    html body .archetype-grid,
    html body .features-grid,
    html body .systems-grid,
    html body .unified-grid,
    html body [class$="-grid"]:not(.stat-grid):not(.grid-2col):not(.footer-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    html body .grid-2col,
    html body .grid-2col-gap30,
    html body [class*="grid-2col"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    html body .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    html body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body .encyclopedia-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
    html body .encyclopedia-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),
    html body [class*="encyclopedia-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body [class*="encyclopedia-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))),
    html body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body [class$="-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    html body .related-topics-primary,
    html body .related-topics-secondary {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    html body .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    html body .aha-box,
    html body .insight-box,
    html body .wisdom-quote {
        padding: 15px 20px !important;
        margin: 20px 0 !important;
    }

    html body .planet-grid {
        grid-template-columns: 1fr !important;
    }
    
    html body .sephirot-grid {
        grid-template-columns: 1fr !important;
    }
    
    html body .planet-info-grid,
    html body .chakra-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .encyclopedia-grid:has(> :nth-child(4):last-child),
    body .archetype-grid:has(> :nth-child(4):last-child),
    body .features-grid:has(> :nth-child(4):last-child),
    body .systems-grid:has(> :nth-child(4):last-child),
    body .unified-grid:has(> :nth-child(4):last-child),
    body .path-selector:has(> :nth-child(4):last-child),
    body .connections-grid:has(> :nth-child(4):last-child),
    body .philosophy-grid:has(> :nth-child(4):last-child),
    body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(4):last-child),
    body [class*="-grid "]:not([class*="grid-2col"]):has(> :nth-child(4):last-child),
    body .encyclopedia-grid:has(> :nth-child(8):last-child),
    body .archetype-grid:has(> :nth-child(8):last-child),
    body .features-grid:has(> :nth-child(8):last-child),
    body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(8):last-child) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body .grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    /* ===== GLOBAL GRID FIX: force 1 column for all auto-fit grids on mobile ===== */
    /* Covers both CSS classes and inline styles using auto-fit/auto-fill */
    [style*="auto-fit"],
    [style*="auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    /* Page-specific grid classes that aren't in the unified list */
    [class*="-grid"]:not(.menu-sections):not(.legend):not(.stats-panel):not(.menu-dropdown),
    [class*="grid-"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .encyclopedia-grid, 
    .archetype-grid, 
    .features-grid, 
    .systems-grid,
    .path-selector,
    .connections-grid,
    .philosophy-grid,
    .grid-autofit-280,
    .grid-autofit-250,
    .grid-autofit-250-gap15,
    .grid-autofit-300-gap15,
    .grid-autofit-200-gap15,
    .unified-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .container {
        padding: 10px;
        margin: 10px auto 0;
    }

    .page-hero {
        padding: 20px 10px;
    }

    .page-hero h1 {
        font-size: 1.8em;
        letter-spacing: 1px;
    }

    /* Grid handled by unified system in section 8 */

    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.2em; }

    .secondary-topics-wrapper {
        flex-direction: column;
    }

    .secondary-topic {
        width: 100%;
        text-align: center;
    }

    .menu-dropdown {
        min-width: 200px;
    }

    .encyclopedia-grid,
    .category-grid,
    .stat-grid,
    .archetype-grid,
    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .container {
        margin: 20px auto !important;
        padding: 15px 20px !important;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filter-group {
        flex-direction: column;
        gap: 15px;
    }
    
    .filter-group select {
        min-width: 100%;
    }
    
    .example-grid {
        grid-template-columns: 1fr;
    }
    
    .paradox-card {
        padding: 15px;
    }
    
    .statement-box {
        font-size: 1em;
    }

    .grid-2col-gap-30 {
        grid-template-columns: 1fr;
    }

    .nodes-container {
        grid-template-columns: 1fr;
    }

    .planet-grid { grid-template-columns: 1fr; }
    .planet-info-grid { grid-template-columns: 1fr; }

    .controls {
        grid-template-columns: 1fr;
        padding: 15px;
    }
    
    #graph-canvas {
        height: 400px;
        border-radius: 8px;
    }
    
    .legend {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .info-panel {
        width: 300px;
    }
    
    .close-btn {
        top: 5px;
        right: 5px;
    }

    .consciousness-grid {
        grid-template-columns: 1fr;
    }
    
    .connection-links {
        grid-template-columns: 1fr;
    }

    .dream-header {
        flex-direction: column;
    }

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

    .search-box {
        flex-direction: column;
    }

    .search-input, .filter-select {
        width: 100%;
        min-width: auto;
    }

    .concept-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dna-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }

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

    .page-hero h1 { font-size: 2.5em; }
    .chakra-grid { grid-template-columns: 1fr; gap: 20px; }
    .chakra-card { padding: 20px; }

    .piktogram-container {
        padding: 15px;
    }
    
    .frequency-controls {
        padding: 15px;
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .btn-primary, .btn-secondary, .btn-shield {
        width: 100%;
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .path-selector,
    body .connections-grid,
    body .philosophy-grid,
    body .grid-autofit-280,
    body .grid-autofit-250,
    body .grid-autofit-250-gap15,
    body .grid-autofit-300-gap15,
    body .grid-autofit-200-gap15,
    body .grid-auto-fit-300,
    body .grid-auto-fit-220,
    body .grid-auto-fit-200,
    body .unified-grid,
    body [class*="grid-autofit"],
    body [class*="grid-auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    body .planet-info-grid,
    body .examples-grid,
    body .chakra-info-grid,
    body .rune-grid,
    body .process-grid,
    body .experiment-grid,
    body .comparison-grid,
    body .calculator-grid,
    body .tarot-grid,
    body .symbol-grid,
    body .numbers-grid,
    body .example-grid,
    body .visualization-grid,
    body .vertebrae-grid,
    body .treatment-grid,
    body .tradition-grid,
    body .tcm-grid,
    body .stats-grid,
    body .sephirot-grid,
    body .sense-grid,
    body .results-grid,
    body .planet-grid,
    body .personality-grid,
    body .paradox-grid,
    body .meridian-grid,
    body .mbti-grid,
    body .inventor-grid,

    body .house-grid,
    body .herbs-grid,
    body .fractal-grid,
    body .dna-grid,
    body .degree-grid,
    body .consciousness-grid,
    body .calendar-grid,
    body .aspect-grid,
    body .grid-test-cards,
    body .grid-tao-examples,
    body [class$="-grid"],
    body [class*="-grid "] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    body .grid-cols-4,
    body .grid-cols-6,
    body .encyclopedia-grid.grid-cols-4,
    body .encyclopedia-grid.grid-cols-6,
    body [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .path-selector,
    body .connections-grid,
    body .philosophy-grid,
    body .unified-grid,
    body .grid-2col,
    body .grid-3col,
    body .grid-2col-gap30,
    body .grid-2col-gap-30,
    body .grid-gap-20,
    body [class*="grid-autofit"],
    body [class*="grid-auto-fit"],
    body [class*="grid-cols-"],
    body [class$="-grid"],
    body [class*="-grid "],
    body [class*=" grid-"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    body .stat-grid,
    body .encyclopedia-grid.stat-grid,
    body .encyclopedia-grid.grid-cols-4,
    body [class*="stat-grid"] {
        grid-template-columns: 1fr !important;
    }

    body .encyclopedia-grid > *,
    body .archetype-grid > *,
    body .features-grid > *,
    body [class$="-grid"] > * {
        max-width: none !important;
    }

    body .encyclopedia-grid,
    body .archetype-grid,
    body .features-grid,
    body .systems-grid,
    body .unified-grid,
    body [class$="-grid"]:not(.stat-grid):not(.footer-grid),
    body [class*="-grid "]:not(.stat-grid):not(.footer-grid) {
        grid-template-columns: 1fr !important;
    }

    body .encyclopedia-grid > *,
    body .archetype-grid > *,
    body .features-grid > *,
    body .systems-grid > *,
    body .unified-grid > *,
    body [class$="-grid"]:not(.stat-grid) > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body .encyclopedia-grid.grid-cols-6 > *,
    body .grid-cols-6 > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body .encyclopedia-grid:not(.stat-grid) > *,
    body .archetype-grid > *,
    body .features-grid > *,
    body .systems-grid > *,
    body .unified-grid > *,
    body [class$="-grid"]:not(.stat-grid) > *,
    body .stat-grid > * {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
    
    body .stat-grid {
        grid-template-columns: 1fr !important;
    }

    body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    body .encyclopedia-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),
    body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    body [class$="-grid"]:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
        grid-template-columns: 1fr !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    html body .encyclopedia-grid,
    html body .encyclopedia-grid:not(.stat-grid),
    html body .archetype-grid,
    html body .features-grid,
    html body .systems-grid,
    html body .unified-grid,
    html body .grid-2col,
    html body .grid-2col-gap30,
    html body .stat-grid,
    html body [class$="-grid"]:not(.footer-grid),
    html body [class*="encyclopedia-grid"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    html body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body .encyclopedia-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
    html body .encyclopedia-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),
    html body [class*="encyclopedia-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body [class*="encyclopedia-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))),
    html body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    html body [class$="-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
        grid-template-columns: 1fr !important;
    }

    html body .related-topics-primary,
    html body .related-topics-secondary {
        grid-template-columns: 1fr !important;
    }

    html body .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    html body .content-section {
        padding: 15px 0 !important;
    }
    
    html body .encyclopedia-card,
    html body [class*="-card"] {
        padding: 15px !important;
    }

    html body .planet-info-grid,
    html body .chakra-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-placeholder {
        display: none;
    }
}

/* Fixed column grids - vždy stejný počet */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Grid with custom gap for 2-column layout */
.grid-2col-gap30 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Responsive overrides for fixed grids */

/* Fallback grid class (bez specifikované struktury, jen display) */
.grid-gap-20 {
    display: grid;
    gap: 20px;
}

/* ====================================================
   COMPONENT CLASSES - Dark Boxes & Separators
   ==================================================== */

/* Dark content box with border-radius */
.dark-box {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
}

.dark-box-sm {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 8px;
}

/* Dark box alternative (lighter) */
.dark-box-light {
    background: rgba(26, 26, 46, 0.8);
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
}

/* Gold-bordered content box */
.gold-border-box {
    background: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--gold);
    padding: 20px;
    border-radius: 10px;
}

/* Section separator with gold border */
.section-separator {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.6);
}

/* Border-left color variants for cards */
.border-left-red { border-left-color: #ef4444; }
.border-left-purple { border-left-color: #8b5cf6; }
.border-left-green { border-left-color: #10b981; }
.border-left-orange { border-left-color: #f59e0b; }
.border-left-blue { border-left-color: #3b82f6; }
.border-left-pink { border-left-color: #ec4899; }

/* ====================================================
   8. SEKUNDÁRNÍ TÉMATA (TAGY)
   ==================================================== */


.secondary-topic, 
.tag-item,
.badge-item {
    display: inline-block;
    padding: 10px 16px;
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.secondary-topic:hover, 
.tag-item:hover,
.badge-item:hover {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--gold);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* ====================================================
   9. SEKČNÍ KONTEJNERY
   ==================================================== */

.section-container, 
.related-topics-container,
.path-selection-container,

.section-container h2,
.related-topics-container h2,

.section-container > p:first-of-type,

/* ====================================================
   10. NADPISY
   ==================================================== */


.subsection-title {
    color: var(--gold);
    font-size: 1.1em;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: bold;
}

.secondary-title {
    color: var(--text-light);
    font-size: 1em;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: normal;
    opacity: 0.8;
}

/* ====================================================
   11. TEXT STYLY
   ==================================================== */


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

a:hover {
    color: var(--light-gold);
    text-decoration: none;
}

ul, ol {
    margin-left: 20px;
    margin-bottom: 15px;
    padding-left: 25px !important; /* Force padding pro viditelné bullets */
}

ol {
    list-style-type: decimal; /* Explicitně číslované seznamy */
    padding-left: 30px !important; /* Větší padding pro čísla */
}

ul {
    list-style-type: disc; /* Explicitně bullet points */
}

li {
    margin-bottom: 8px;
    color: var(--text-light);
    margin-left: 5px; /* Extra spacing od odrážky */
}

code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: var(--light-gold);
    font-size: 0.9em;
}

blockquote {
    border-left: 4px solid var(--gold);
    padding: 20px 25px;
    margin: 25px 0;
    background: rgba(74, 44, 94, 0.15);
    font-style: italic;
    color: var(--text-light);
    font-size: 1.25em;
    line-height: 1.7;
}

/* ====================================================
   12. TLAČÍTKA
   ==================================================== */

.btn, 
button,
input[type="button"],
input[type="submit"] {
    background: var(--primary-purple);
    color: var(--gold);
    border: 2px solid var(--gold);
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn:hover, 
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: var(--gold);
    color: var(--primary-purple);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ====================================================
   13. FORMULÁŘE
   ==================================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea,
select {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1em;
    margin-bottom: 15px;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* Odstraň všechny debug/accessibility outlines */
*:focus {
    outline: none !important;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* ====================================================
   14. UTILITY TŘÍDY
   ==================================================== */

.text-center {
    text-align: center !important;
}

/* Responsive SVG for interactive graphs */
.responsive-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* List styling for explanations in cards */
.list-explanations {
    text-align: left;
    margin-top: 1rem;
    padding-left: 20px;
    list-style-type: disc;
}

.list-explanations li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }

.hidden { display: none; }
.visible { display: block; }

/* ====================================================
   15. RESPONSIVE - TABLET
   ==================================================== */

@media (max-width: 1024px) {
    .container {
        padding: 15px;
        margin: 20px auto 0;
    }

    .page-hero {
        padding: 30px 15px;
    }

    .page-hero h1 {
        font-size: 2em;
    }

    /* Grid handled by unified system in section 8 */
    /* NOTE: .menu-toggle and .menu-close are handled in @media (max-width: 768px) only */
    
    /* Menu grid handled by dedicated responsive rules */

    .encyclopedia-grid,
    .category-grid,
    .stat-grid,
    .archetype-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .controls {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #graph-canvas {
        height: 550px;
    }
}

/* ====================================================
   16. RESPONSIVE - MOBILE
   ==================================================== */


/* ====================================================
   17. RESPONSIVE - MALÝ MOBILNÍ
   ==================================================== */

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 8px;
    }

    .page-hero {
        padding: 15px 8px;
    }

    .page-hero h1 {
        font-size: 1.5em;
    }

    .page-hero p {
        font-size: 0.95em;
    }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.3em; }
    h3 { font-size: 1.1em; }

    .card {
        padding: 15px;
    }

    /* Menu grid handled by dedicated responsive rules */

    .encyclopedia-grid,
    .category-grid,
    .stat-grid,
    .archetype-grid,
    .features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .encyclopedia-card,
    .category-card,
    .stat-item,
    .archetype-card,
    .feature-card {
        padding: 15px;
    }

    .controls {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 12px;
    }
    
    #graph-canvas {
        height: 300px;
    }
    
    .info-panel {
        width: 280px;
        max-height: 400px;
    }
    
    .legend {
        grid-template-columns: 1fr;
    }
    
    .stats-panel {
        grid-template-columns: 1fr;
    }
    
    .control-group label {
        font-size: 0.85em;
    }
    
    .stat-number {
        font-size: 1.8em;
    }

    ul, ol {
        margin-left: 10px;
        padding-left: 20px;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: block;
        margin-bottom: 10px;
        border-left: 5px solid var(--gold);
        padding: 10px;
        background: rgba(0, 0, 0, 0.3);
    }

    td {
        display: block;
        text-align: right;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: var(--gold);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .tooltip-term::after {
        left: 0;
        transform: none;
        width: 200px;
    }
    .tooltip-term::before {
        left: 12px;
        transform: none;
    }
}

/* ====================================================
   12. UTILITY CLASSES - COMPREHENSIVE STYLING SYSTEM
   ==================================================== */

/* ===== TEXT COLORS WITH ENHANCEMENTS ===== */

.text-light-gold { 
    color: var(--light-gold);
    font-weight: 400;
}


.text-light-gray { 
    color: #e0e0e0;
}

.text-amber { 
    color: #fbbf24;
    font-weight: 500;
}

.text-red { 
    color: #ef4444;
}

.text-danger {
    color: #e74c3c;
}

.text-blue { 
    color: #3b82f6;
}

.text-blue-light { 
    color: #bfdbfe;
}

.text-purple { 
    color: #a855f7;
}

.text-purple-dark {
    color: #8b5cf6;
}

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

.text-green {
    color: #10b981;
}

.text-green-light {
    color: #22c55e;
}

.text-green-lighter {
    color: #86efac;
}

.text-green-lightest {
    color: #6ee7b7;
}

.text-green-mint {
    color: #a7f3d0;
}

.text-green-mint-light {
    color: #bbf7d0;
}

.text-green-dark {
    color: #16a34a;
}

.text-orange {
    color: #f97316;
}

.text-orange-light {
    color: #fb923c;
}

.text-orange-amber {
    color: #ffa500;
}

.text-pink {
    color: #ec4899;
}

.text-pink-light {
    color: #f472b6;
}

.text-pink-lighter {
    color: #fca5a5;
}

.text-pink-rose {
    color: #ff6b6b;
}

.text-violet {
    color: #a855f7;
}

.text-violet-dark {
    color: #8b5cf6;
}

.text-violet-light {
    color: #c084fc;
}

.text-violet-lighter {
    color: #a78bfa;
}

.text-violet-lightest {
    color: #ddd6fe;
}

.text-violet-pale {
    color: #e9d5ff;
}

.text-indigo {
    color: #6366f1;
}

.text-indigo-light {
    color: #a5b4fc;
}

.text-cyan {
    color: #06b6d4;
}

.text-cyan-light {
    color: #67e8f9;
}

.text-cyan-lighter {
    color: #a5f3fc;
}

.text-cyan-dark {
    color: #0ea5e9;
}

.text-cyan-bright {
    color: #00bcd4;
}

.text-sky {
    color: #0ea5e9;
}

.text-sky-light {
    color: #a0d8e8;
}

.text-sky-bright {
    color: #4facfe;
}

.text-teal {
    color: #14b8a6;
}

.text-teal-light {
    color: #7dd3c0;
}

.text-yellow {
    color: #ffff00;
}

.text-yellow-light {
    color: #fde047;
}

.text-yellow-amber {
    color: #fbbf24;
}

.text-yellow-gold {
    color: #ffd700;
}

.text-yellow-dark {
    color: #facc15;
}

.text-yellow-darker {
    color: #eab308;
}

.text-yellow-orange {
    color: #fdba74;
}

.text-yellow-pale {
    color: #fde68a;
}

.text-yellow-cream {
    color: #fed7aa;
}

.text-yellow-light-cream {
    color: #fef3c7;
}

.text-brown {
    color: #92400e;
}

.text-brown-dark {
    color: #ca8a04;
}

.text-red-dark {
    color: #dc2626;
}

.text-red-darker {
    color: #991b1b;
}

.text-red-crimson {
    color: #dc143c;
}

.text-red-bright {
    color: #ff4757;
}

.text-red-blood {
    color: #8b0000;
}

.text-red-maroon {
    color: #7f1d1d;
}

.text-red-light {
    color: #f87171;
}

.text-red-lighter {
    color: #fca5a5;
}

.text-red-lightest {
    color: #fecaca;
}

.text-red-pink {
    color: #fcb8b8;
}

.text-red-pure {
    color: #ff0000;
}

.text-red-orange {
    color: #ff7f00;
}

.text-coral {
    color: #e74c3c;
}

.text-magenta {
    color: #d946ef;
}

.text-magenta-light {
    color: #f3e8ff;
}

.text-purple-indigo {
    color: #9333ea;
}

.text-purple-violet {
    color: #9400d3;
}

.text-purple-dark-violet {
    color: #8b008b;
}

.text-purple-deep {
    color: #4b0082;
}

.text-purple-vivid {
    color: #5f27cd;
}

.text-purple-light-vivid {
    color: #b8a0ff;
}

.text-blue-royal {
    color: #4169e1;
}

.text-blue-sky {
    color: #3498db;
}

.text-blue-pure {
    color: #0000ff;
}

.text-blue-lighter {
    color: #c7d2fe;
}

.text-green-pure {
    color: #00ff00;
}

.text-gray {
    color: #999;
}

.text-gray-dark {
    color: #666;
}

.text-gray-darker {
    color: #888;
}

.text-gray-slate {
    color: #64748b;
}

.text-gray-medium {
    color: #9ca3af;
}

.text-gray-lighter {
    color: #b0b0b0;
}

.text-gray-silver {
    color: #d1d5db;
}

.text-white {
    color: #fff;
}

.text-dark-navy {
    color: #1a1a2e;
}

.text-dark-purple {
    color: #1a0a0a;
}

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

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

.text-sense-purple {
    color: var(--sense-purple);
}

.text-sense-pink {
    color: var(--sense-pink);
}

.text-sense-blue {
    color: var(--sense-blue);
}

.text-limit-red {
    color: var(--limit-red);
}

.text-limit-orange {
    color: var(--limit-orange);
}

.text-law-purple {
    color: var(--law-purple);
}

.text-law-gold {
    color: var(--law-gold);
}

.text-law-blue {
    color: var(--law-blue);
}

.text-existential-purple {
    color: var(--existential-purple);
}

.text-extended-pink {
    color: var(--extended-pink);
}

.text-extended-orange {
    color: var(--extended-orange);
}

/* ===== FONT SIZES ===== */
.text-3xl { 
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.2;
    margin: 0.5rem 0;
}

.text-xl { 
    font-size: 1.5em;
    font-weight: 600;
}

.text-lg {
    font-size: 1.2em;
    font-weight: 500;
}

/* ===== SPACING - MARGINS ===== */
.mt-1rem { 
    margin-top: 1rem;
}

.mt-15px { 
    margin-top: 15px;
}

.pt-1rem { 
    padding-top: 1rem;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.pb-1rem {
    padding-bottom: 1rem;
}

/* ===== COMBINED UTILITIES ===== */
.text-gold-large { 
    color: var(--gold);
    font-size: 1.5em;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.15);
}

.text-gold-title { 
    color: var(--gold);
    margin-top: 15px;
    font-weight: 600;
    font-size: 1.1em;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.1);
}

.text-light-tall { 
    color: #bfdbfe;
    line-height: 1.7;
}

.text-gold-amber { 
    color: #fbbf24;
    margin-top: 1rem;
    font-weight: 500;
}

/* ===== TEXT ALIGNMENT ===== */
.text-left { 
    text-align: left;
}


.text-right {
    text-align: right;
}

/* ===== LINE HEIGHT UTILITIES ===== */
.leading-relaxed { 
    line-height: 1.8;
}

.leading-tall { 
    line-height: 1.7;
}

.leading-normal {
    line-height: 1.5;
}

/* ===== BORDERS ===== */
.border-cyan { 
    border-left: 4px solid #06b6d4;
}

/* ===== BACKGROUNDS ===== */
.bg-dark-box { 
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.bg-dark-subtle {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
}

/* ===== DIVIDERS & SEPARATORS ===== */
.divider-gold-top { 
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.divider-gold-bottom {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

/* ===== EMPHASIS & TEXT STYLES ===== */
.font-bold {
    font-weight: bold;
}

.italic-text {
    font-style: italic;
}

/* ====================================================
   13. GLOBAL INLINE STYLE NORMALIZATION (Fallback)
   ==================================================== */

/* Zajistit že i zbývající inline style="" vypadají jednotně */
h1[style], h2[style], h3[style], h4[style], h5[style], h6[style] {
    font-family: inherit;
}

p[style] {
    margin: 0.5rem 0;
}

/* Jednotné barvy - přepsat inline */
[style*="color: var(--gold)"] { color: var(--gold) !important; }
[style*="color: #d4af37"] { color: var(--gold) !important; }
[style*="color: #fbbf24"] { color: #fbbf24; }
[style*="color: #e0e0e0"] { color: #e0e0e0; }
[style*="color: #a0a0a0"] { color: var(--text-gray); }

/* Jednotné font-size hodnoty */
[style*="font-size: 3em"] { font-size: 2.5em; font-weight: bold; }
[style*="font-size: 1.5em"] { font-size: 1.3em; }
[style*="font-size: 1.2em"] { font-size: 1.1em; }

/* Jednotné spacing */
[style*="margin-top"] { margin-top: 1.5rem !important; }
[style*="margin-bottom"] { margin-bottom: 1rem !important; }
[style*="padding: 20px"] { padding: 1.5rem !important; }

/* Jednotný border-left styl */
[style*="border-left"] { 
    border-left: 5px solid var(--gold) !important;
    padding-left: 1.5rem !important;
}

/* Background elementy */
[style*="background: rgba"] {
    border-radius: 8px;
}

/* ====================================================
   MODAL STYLES - gene-keys.html
   ==================================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 2147483647;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow: auto;
}

.modal-content {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98), rgba(45, 27, 78, 0.95));
    margin: 5% auto;
    padding: 30px;
    border: 2px solid var(--gold);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.3);
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 15px;
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
    outline: none !important;
    min-width: auto;
    min-height: auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--gold);
    color: #1a1a2e;
    transform: scale(1.1);
}

/* ====================================================
   18. PRINT STYLE
   ==================================================== */

@media print {
    .unified-menu,
    .page-hero,
    .breadcrumbs,
    .related-topics-container,
    .achievements-badge,
    .menu-toggle,
    .menu-close {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: blue;
        text-decoration: underline;
    }

    .container {
        margin: 0;
        padding: 0;
        max-width: none;
    }
}

/* ====================================================
   19. INDEX.HTML CLEANUP CLASSES
   ==================================================== */

/* === STAT CARDS === */
.stat-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid;
    cursor: default;
}

.stat-number {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.15em;
    font-weight: 500;
}

.stat-note {
    font-size: 0.95em;
    margin-top: 8px;
}

.stat-green {
    border-left-color: #10b981;
}

.stat-green .stat-number {
    color: #10b981;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

.stat-green .stat-label {
    color: #d1fae5;
}

.stat-green .stat-note {
    color: #10b981;
}

.stat-blue {
    border-left-color: #3b82f6;
}

.stat-blue .stat-number {
    color: #3b82f6;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

.stat-blue .stat-label {
    color: #dbeafe;
}

.stat-blue .stat-note {
    color: #60a5fa;
}

.stat-amber {
    border-left-color: #f59e0b;
}

.stat-amber .stat-number {
    color: #f59e0b;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

.stat-amber .stat-label {
    color: #fef3c7;
}

.stat-amber .stat-note {
    color: #fbbf24;
}

.stat-red {
    border-left-color: #ef4444;
}

.stat-red .stat-number {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.stat-red .stat-label {
    color: #fecaca;
}

.stat-red .stat-note {
    color: #f87171;
}

/* === TEXT COLORS === */


.text-muted {
    color: #aaa;
}

/* === HERO BADGE === */

.hero-badge strong {
    color: var(--gold);
}


/* === SYSTEM TAGS === */


/* === PHILOSOPHY BOX === */


/* H2 and P for main sections */


/* Key Systems Section */


/* Menu Toggle Button - Hamburger */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 34px;
    background: rgba(13,4,32,.85);
    border: 1px solid rgba(212,175,55,.55);
    border-radius: 7px;
    cursor: pointer;
    padding: 6px 6px;
    position: fixed;
    right: 14px;
    top: 44px;          /* pod #sb-network-bar (36px) + 8px mezera */
    z-index: 200000;    /* ABOVE admin-bar (100000), network-bar (9990) */
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle:hover span {
    background-color: #f1d98f;
}

/* Animate hamburger → X when open */
.menu-toggle.open span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Menu Close Button */
.menu-close {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 2em;
    cursor: pointer;
    padding: 10px;
    margin-bottom: 20px;
}

.menu-close:hover {
    color: #f1d98f;
}

/* Mobile Menu Toggle Visibility */
@media (max-width: 768px) {

    /* ── Hamburger skrytý (je v network-bar) ── */
    .menu-toggle {
        display: none !important;
    }

    /* ── Slide-in drawer ── */
    .unified-menu {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: min(82vw, 320px) !important;
        height: 100dvh !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10100 !important;
        transition: left 0.3s cubic-bezier(.4,0,.2,1) !important;
        padding: 0 !important;
        flex-direction: column !important;
        -webkit-overflow-scrolling: touch !important;
        background: #0e0820 !important;
        border-right: 1px solid rgba(212,175,55,.12) !important;
        box-shadow: 4px 0 32px rgba(0,0,0,.6) !important;
    }

    .unified-menu.open {
        left: 0 !important;
    }

    /* ── Menu sections kontejner ── */
    .unified-menu .menu-sections {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 0 100px !important;
        overflow-y: visible !important;
    }

    /* ── Overlay ── */
    .menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.7);
        z-index: 10099;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .menu-overlay.open {
        display: block;
    }

    /* ── Zavírací tlačítko ── */
    .menu-close {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 0 16px;
        font-size: 1.4rem;
        color: rgba(255,255,255,.4);
        box-sizing: border-box;
        border: none;
        background: none;
        min-height: 44px;
        cursor: pointer;
        position: absolute;
        top: 8px;
        right: 0;
        width: auto;
    }
    .menu-close:active { color: #d4af37; }

    /* ── Brand sekce (logo + název) ── */
    .menu-brand {
        padding: 16px 16px 14px;
        padding-top: 44px;        /* prostor pod close btn */
        border-bottom: 1px solid rgba(212,175,55,.12);
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(180deg, rgba(212,175,55,.06) 0%, transparent 100%);
    }
    .menu-brand .menu-logo-img {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border-radius: 50%;
    }
    .menu-brand h1 {
        font-size: 1.05rem;
        margin: 0;
        color: #d4af37;
        font-weight: 600;
        letter-spacing: .02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    .menu-brand .tagline { display: none; }
    .menu-auth-links { display: none !important; }

    /* ── Search bar ── */
    #mob-menu-search-wrap {
        padding: 10px 14px 10px;
        border-bottom: 1px solid rgba(212,175,55,.1);
        background: rgba(0,0,0,.15);
    }
    #mob-menu-search {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(212,175,55,.2);
        border-radius: 8px;
        color: #e8e0f0;
        font-size: .88rem;
        padding: 9px 14px 9px 36px;
        outline: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(212,175,55,.5)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 12px center;
        transition: border-color .2s;
    }
    #mob-menu-search:focus {
        border-color: rgba(212,175,55,.5);
        background-color: rgba(255,255,255,.09);
    }
    #mob-menu-search::placeholder { color: rgba(255,255,255,.3); }

    /* ── Menu sloupeček (accordion položka) ── */
    .menu-column {
        border-bottom: 1px solid rgba(255,255,255,.055);
    }

    /* ── H3 záhlaví kategorie ── */
    .menu-column h3 {
        font-size: .92rem !important;
        font-weight: 500;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Celý klikatelný řádek h3 */
    .menu-column h3 > a,
    .menu-column h3:not(:has(a)) {
        display: flex !important;
        align-items: center !important;
        min-height: 50px !important;
        padding: 12px 14px 12px 16px !important;
        color: #e0d4f0 !important;
        text-decoration: none !important;
        gap: 8px !important;
        pointer-events: none; /* klik řídí h3, ne odkaz */
        flex: 1;
    }

    /* Wrapper h3 musí být flex */
    .menu-column h3 {
        display: flex !important;
        align-items: center !important;
    }

    /* Šipka vpravo */
    .menu-column h3::after {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        border-right: 2px solid rgba(212,175,55,.5);
        border-bottom: 2px solid rgba(212,175,55,.5);
        transform: rotate(-45deg);
        transition: transform .22s ease, border-color .22s;
        margin-left: auto;
        margin-right: 18px;
        flex-shrink: 0;
    }

    /* Šipka dolů při otevření */
    .menu-column.col-open > h3::after {
        transform: rotate(45deg);
        border-color: rgba(212,175,55,.9);
    }

    /* Hover stav řádku */
    .menu-column h3:active {
        background: rgba(212,175,55,.07);
    }

    /* Otevřená kategorie — zvýraznění záhlaví */
    .menu-column.col-open > h3 {
        background: rgba(212,175,55,.06);
        border-bottom: 1px solid rgba(212,175,55,.1);
        color: #d4af37 !important;
    }
    .menu-column.col-open > h3 > a {
        color: #d4af37 !important;
    }

    /* ── Dropdown (podmenu) s animací ── */
    .menu-column .menu-dropdown {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        /* Animace přes max-height */
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
        opacity: 0;
        display: block !important; /* nepřepínat display, jen max-height */
        flex-direction: column;
        background: rgba(0,0,0,.25);
    }

    .menu-column.col-open .menu-dropdown {
        max-height: 800px;
        opacity: 1;
    }

    /* Položky v podmenu */
    .menu-column .menu-dropdown a {
        display: flex !important;
        align-items: center !important;
        padding: 11px 16px 11px 28px !important;
        font-size: .86rem !important;
        min-height: 44px !important;
        color: rgba(220,210,240,.85) !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,.04) !important;
        -webkit-tap-highlight-color: rgba(212,175,55,.12);
        transition: background .15s, color .15s;
        gap: 6px;
    }
    .menu-column .menu-dropdown a:last-child {
        border-bottom: none !important;
    }
    .menu-column .menu-dropdown a:active {
        background: rgba(212,175,55,.12) !important;
        color: #d4af37 !important;
    }

    /* ── Sticky footer s akcemi ── */
    #mob-menu-footer {
        position: sticky;
        bottom: 0;
        background: #0a0218;
        border-top: 1px solid rgba(212,175,55,.15);
        padding: 10px 12px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        box-shadow: 0 -4px 16px rgba(0,0,0,.4);
    }
    #mob-menu-footer a {
        font-size: .78rem;
        color: rgba(212,175,55,.8);
        text-decoration: none;
        padding: 6px 12px;
        border: 1px solid rgba(212,175,55,.25);
        border-radius: 6px;
        white-space: nowrap;
        transition: background .15s, color .15s;
    }
    #mob-menu-footer a:active {
        background: rgba(212,175,55,.15);
        color: #d4af37;
    }

    /* ── Zamezit scroll těla při otevřeném menu ── */
    body.menu-open {
        overflow: hidden;
    }
    body {
        padding-top: 44px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .unified-menu {
        width: 88vw !important;
        max-width: none !important;
    }
}


/* ====================================================
   DETAIL PANEL - PRO KLIKNUTÍ NA ZNAMENÍ V ORLOJI
   ==================================================== */

.detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(74, 44, 94, 0.95), rgba(26, 26, 46, 0.95));
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 5000;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease-out;
}

.detail-panel.hidden {
    display: none !important;
}

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

.detail-panel .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.detail-panel .close-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #fff;
    transform: rotate(90deg);
}

.detail-panel #detail-content {
    color: var(--text-light);
}

.detail-panel .zodiac-detail h2 {
    margin-bottom: 5px;
    font-size: 1.8em;
    text-align: center;
}

.detail-panel .zodiac-detail h3 {
    text-align: center;
    color: #a0a0a0;
    margin-bottom: 20px;
}

.detail-panel .zodiac-detail p {
    margin: 8px 0;
    line-height: 1.6;
}

.detail-panel .zodiac-detail strong {
    color: var(--gold);
}

/* Tmavé pozadí modal overlay */
.detail-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

/* ====================================================
   SVG ZODIAC WHEEL - INTERAKTIVNÍ ORLOJ
   ==================================================== */

/* SVG kontejner */
svg#zodiac-wheel {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* SVG cesty znamení - MUSÍ BÝT KLIKACÍ */
path.zodiac-segment {
    cursor: pointer;
    transition: fill-opacity 0.2s ease, filter 0.2s ease;
    pointer-events: auto !important;
}

path.zodiac-segment:hover {
    fill-opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
}

/* SVG text - NESMÍ BÝT KLIKACÍ */
text.zodiac-label {
    pointer-events: none;
    user-select: none;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Detail panel CSS je výše */
/* ====================================================
   TOOLTIPS - VYSVĚTLENÍ PRVKŮ V ZODIÁKU
   ==================================================== */

/* SVG title tooltip - nativní SVG tooltip */
svg text[data-tooltip],
svg circle[data-tooltip],
svg path[data-tooltip],
svg g[data-tooltip] {
    cursor: help;
}

/* Vlastní tooltip container (pro lepší styling) */
.svg-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.98), rgba(75, 44, 94, 0.95));
    color: var(--light-gold);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
}

/* ===== SITEMAP PAGE STYLES ===== */

.page-hero--sitemap {
    background: linear-gradient(135deg, #8b1a1a, #2e0a0a);
}

.stat-value {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--gold);
}


.nav-card-title {
    color: var(--gold);
}

.nav-card-desc {
    color: var(--text-gray);
    margin-top: 8px;
    font-size: 0.9em;
}

.nav-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--gold);
    color: var(--dark-bg);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
}


.svg-tooltip.visible {
    opacity: 1;
}

/* Malá šipka na tooltipu */
.svg-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--gold);
}

/* Pro prvky v zodiáku - lepší interaktivita */
[data-tooltip] {
    transition: opacity 0.2s ease, filter 0.2s ease;
    cursor: help;
}

[data-tooltip]:hover {
    filter: brightness(1.15);
}

/* Zodiac segment tooltips */
path.zodiac-segment[data-tooltip] {
    cursor: pointer;
}

/* ====================================================
   UTILITY TŘÍDY - TEXT BARVY (Color)
   ==================================================== */

.light-gold { color: var(--light-gold); }
.text-emerald { color: #10b981; }
.text-light-blue { color: #bfdbfe; }
.text-fuchsia { color: #ec4899; }
.text-light-red { color: #fecaca; }
.text-sky-blue { color: #60a5fa; }
.text-dark { color: #a0a0a0; }
.text-rose { color: #f43f5e; }
.text-purple-light { color: #c4b5fd; }
.text-blue-dark { color: #3b5998; }

/* ====================================================
   UTILITY TŘÍDY - VELIKOSTI FONTŮ (Font Size)
   ==================================================== */

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

.font-09rem { font-size: 0.9rem; }
.font-1-1rem { font-size: 1.1rem; }
.font-base { font-size: 0.9em; }
.font-normal { font-size: 0.95em; }
.font-md { font-size: 1.05em; }
.font-lg { font-size: 1.1em; }
.font-xl { font-size: 1.15em; }
.font-1-2 { font-size: 1.2em; }
.font-1-3 { font-size: 1.3em; }
.font-1-4 { font-size: 1.4em; }
.font-1-5 { font-size: 1.5em; }
.font-1-8 { font-size: 1.8em; }
.font-2xl { font-size: 2em; }
.font-2-5 { font-size: 2.5em; }
.font-3xl { font-size: 3em; }

/* Zbývající font-size varianty */
.font-0-95 { font-size: 0.95em; }
.font-1-6 { font-size: 1.6em; }
.font-1-15 { font-size: 1.15em; }
.font-2rem { font-size: 2rem; }
.font-3rem { font-size: 3rem; }.font-1-15rem { font-size: 1.15rem; }
.font-2-2rem { font-size: 2.2rem; }

/* ====================================================
   UTILITY TŘÍDY - ZAROVNÁNÍ TEXTU (Text Align)
   ==================================================== */

.text-justify { text-align: justify; }

/* ====================================================
   ICON STYLING
   ==================================================== */

.icon {
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.icon.font-3xl {
    font-size: 3em;
}

/* ====================================================
   LOADING SPINNER - Global loader component
   ==================================================== */

.loading-spinner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 46, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.loading-spinner.active {
    display: flex;
}

.spinner-circle {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--gold);
    border-right-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.spinner-text {
    color: var(--gold);
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

/* Mini spinner (inline) */
.spinner-inline {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

/* Success/Error messages */
.message-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    z-index: 9999;
    max-width: 400px;
    animation: slideIn 0.3s ease-out;
}

.message-toast.success {
    border-left-color: #22c55e;
}

.message-toast.error {
    border-left-color: #ef4444;
}

.message-toast.warning {
    border-left-color: #f59e0b;
}

/* slideIn animation defined above - removed duplicate */

/* ====================================================
   RESPONSIVE GRID LAYOUTS - Mobile/Tablet Breakpoints
   ==================================================== */

/* Tablet: 1024px and below */

/* Mobile: 768px and below */

/* Small mobile: 480px and below */

/* ====================================================
   DREAM ANALYZER - FORM & SYMBOL STYLES (SESSION 20)
   ==================================================== */

/* Form Styling */
#birth-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    margin: 30px auto;
    text-align: center;
}

.dream-form {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
}

.form-group {
    margin-bottom: 20px;
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}


.form-group label {
    display: block;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.dream-textarea,
input[type="text"],
input[type="range"],

.dream-textarea:focus,
input[type="text"]:focus,
input[type="range"]:focus,

.dream-textarea {
    min-height: 150px;
    resize: vertical;
}

/* Lucidity Slider Styling */
.lucidity-slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--gold), var(--accent));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.lucidity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.lucidity-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.lucidity-value {
    text-align: center;
    color: var(--gold);
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 10px;
}

/* Filter Bar Styling */
.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
    justify-content: center;
}

.filter-bar .btn {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(212, 175, 55, 0.3);
    color: var(--text-light);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95em;
}

.filter-bar .btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}

.filter-bar .btn.active {
    background: var(--gold);
    color: var(--primary-purple);
    border-color: var(--gold);
    font-weight: 600;
}

/* Symbol Display Classes */
.symbol-icon {
    font-size: 1.5em;
    margin-bottom: 10px;
    display: block;
}

.symbol-name {
    color: var(--gold);
    margin-bottom: 5px;
    font-weight: 600;
}

.symbol-description {
    font-size: 0.9em;
    color: var(--text-gray);
    margin-bottom: 10px;
    line-height: 1.5;
}

.symbol-category-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.85em;
    color: var(--text-light);
    margin-bottom: 10px;
}

/* Chakra Indicator Styling */
.chakra-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.chakra-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

.chakra-indicator span {
    color: var(--text-light);
    font-size: 0.95em;
}

/* Interpretation Styling */
.interpretation-positive {
    color: #4ade80;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(74, 222, 128, 0.1);
    border-left: 3px solid #4ade80;
    border-radius: 4px;
}

.interpretation-negative {
    color: #ff6b6b;
    margin-top: 5px;
    padding: 8px 12px;
    background: rgba(255, 107, 107, 0.1);
    border-left: 3px solid #ff6b6b;
    border-radius: 4px;
}

.interpretation-text {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 4px solid var(--gold);
    line-height: 1.8;
    color: var(--text-light);
}

/* Results Section Toggle */
.section-container {
    display: block;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
}

.section-container.hidden {
    display: none;
}

.section-container.active {
    display: block;
    animation: slideDown 0.5s ease;
}

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

/* PARADOXES.HTML - Inline Style Replacements */
.text-red-coral { color: #ff6b6b; } /* WCAG AAA: 5.4:1 */
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-30 { margin-top: 30px; }
.margin-top-50 { margin-top: 50px; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-30 { margin-bottom: 30px; }
.line-height-1-7 { line-height: 1.7; }
.line-height-1-8 { line-height: 1.8; }
.text-purple-light-margin { color: #d8b4ff; margin-top: 15px; } /* WCAG AAA */

/* Accessibility & Contrast Fixes */

select option {
    background: var(--dark-bg);
    color: var(--text-light);
}

/* ====================================================
   PARADOXES.HTML - CARD COMPONENTS (MISSING CSS)
   ==================================================== */

/* Main paradox card - follows encyclopedia-card pattern */
.paradox-card {
    background: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--gold);
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.paradox-card:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    border-left-color: var(--light-gold);
}

/* Statement box - uvozovka s paradoxem */
.statement-box {
    background: rgba(139, 79, 191, 0.2);
    border-left: 4px solid var(--gold);
    padding: 15px;
    margin: 15px 0;
    font-style: italic;
    font-size: 1.1em;
    color: var(--text-light);
    border-radius: 4px;
    line-height: 1.6;
}

/* Resolution/explanation box */
.resolution-box {
    background: rgba(34, 197, 94, 0.15);
    border-left: 4px solid #22c55e;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.resolution-box h4 {
    color: #22c55e;
    margin: 0 0 10px 0;
    font-size: 1.1em;
}

/* Filter section */
.filters {
    background: rgba(75, 44, 94, 0.3);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
    margin-bottom: 30px;
}

.filters h3 {
    color: var(--gold);
    margin-top: 0;
    margin-bottom: 15px;
}

/* Filter group - организация фильтров */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.filter-group label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-light);
}

.filter-group select {
    background: var(--dark-bg);
    border: 2px solid var(--gold);
    color: var(--text-light);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    min-width: 150px;
}

.filter-group select:hover,
.filter-group select:focus {
    border-color: var(--light-gold);
    outline: none;
}

/* Famous examples section */
.famous-examples {
    margin: 30px 0;
    padding: 20px 0;
}

.famous-examples h3 {
    color: var(--gold);
    font-size: 1.4em;
    margin: 20px 0;
    text-align: center;
}

/* Example grid */
.example-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* Individual example item */
.example-item {
    background: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--gold);
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.example-item:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    border-left-color: var(--light-gold);
}

.example-item h4 {
    color: var(--light-gold);
    margin-top: 0;
    margin-bottom: 12px;
}

.example-item p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 10px 0;
}

/* Paradox type label/badge */
.paradox-type {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.paradox-type.logical {
    background: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    border: 1px solid #3b82f6;
}

.paradox-type.temporal {
    background: rgba(168, 85, 247, 0.3);
    color: #d8b4ff;
    border: 1px solid #a855f7;
}

.paradox-type.quantum {
    background: rgba(14, 165, 233, 0.3);
    color: #38bdf8;
    border: 1px solid #0ea5e9;
}

.paradox-type.semantic {
    background: rgba(236, 72, 153, 0.3);
    color: #f472b6;
    border: 1px solid #ec4899;
}

.paradox-type.infinite {
    background: rgba(250, 204, 21, 0.3);
    color: #fbbf24;
    border: 1px solid #f59e0b;
}

/* Responsive adjustments */

/* ====================================================
   ICHING.HTML - COIN TOSS GAME COMPONENTS
   ==================================================== */

/* Coin container for the 3 coins */
.coin-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 40px 0;
    perspective: 1000px;
}

/* Individual coin styling */
.coin {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    border: 3px solid var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.coin:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.6);
}

/* Coin flipping animation */
.coin.flipping {
    animation: flip 0.6s ease-in-out;
}

@keyframes flip {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(180deg) rotateX(180deg); }
    100% { transform: rotateY(360deg) rotateX(0deg); }
}

/* Hexagram result display */
.hexagram-display {
    text-align: center;
    margin-bottom: 30px;
}

/* Loading spinner styling */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-style: italic;
    color: var(--text-gray);
    min-height: 100px;
    animation: pulse 1.5s ease-in-out infinite;
}

.loading::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--gold);
    border-radius: 50%;
    animation: bounce 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hexagram-lines {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    gap: 8px;
}

.hexagram-lines .line {
    width: 80px;
    height: 8px;
    background: var(--gold);
    border-radius: 4px;
    position: relative;
}

.hexagram-lines .line.broken {
    background: linear-gradient(90deg, var(--gold) 30%, transparent 30%, transparent 70%, var(--gold) 70%);
}

/* ====================================================
   ICHING.HTML - HEXAGRAM CARD COMPONENTS
   ==================================================== */

/* Hexagram symbol display */
.hexagram-symbol {
    font-size: 4em;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

/* Main hexagram card container */
.hexagram-card {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin-top: 20px;
}

.hexagram-card:first-child {
    margin-top: 0;
}

.hexagram-card h3 {
    margin-bottom: 15px;
    color: var(--gold);
}

.hexagram-card.light-gold h3 {
    color: var(--light-gold);
}

.hexagram-card.light-gold {
    border-left-color: var(--light-gold);
}

.hexagram-card p {
    line-height: 1.8;
    color: var(--text-light);
    margin: 10px 0;
}

/* Hexagram grid for all 64 */
.hexagram-grid-item {
    background: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--gold);
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hexagram-grid-item:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
    border-left-color: var(--light-gold);
}

.hexagram-grid-item .icon {
    margin-bottom: 10px;
    font-size: 3em;
}

.hexagram-number {
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 5px;
}

.hexagram-name {
    color: var(--light-gold);
    font-size: 1.1em;
}

/* Insight callout boxes (dříve aha-box) */
.aha-box, .insight-box {
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
    border-left: 5px solid;
}

.aha-box h3, .insight-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.aha-box.war {
    background: rgba(239, 68, 68, 0.2);
    border-left-color: #ef4444;
}

.aha-box.war h3 {
    color: #ef4444;
}

.aha-box.transformation {
    background: rgba(217, 70, 239, 0.2);
    border-left-color: #d946ef;
}

.aha-box.transformation h3 {
    color: #d946ef;
}

.aha-box.oracle {
    background: rgba(59, 130, 246, 0.2);
    border-left-color: #3b82f6;
}

.aha-box.oracle h3 {
    color: #3b82f6;
}

.aha-box a, .insight-box a {
    text-decoration: underline;
}

/* CALLOUT BOXES - Generic callout system */
.callout-box {
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    border-left: 4px solid var(--gold);
    background: rgba(74, 44, 94, 0.2);
}

.callout-box h2, .callout-box h3 {
    margin-top: 0;
}

.callout-gold {
    background: linear-gradient(135deg, rgba(74, 44, 94, 0.3), rgba(42, 26, 62, 0.3));
    border-left-color: var(--gold);
}

.callout-purple {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(109, 40, 217, 0.2));
    border-left-color: #8b5cf6;
}

.callout-blue {
    background: rgba(59, 130, 246, 0.2);
    border-left-color: #3b82f6;
}

.callout-red {
    background: rgba(239, 68, 68, 0.2);
    border-left-color: #ef4444;
}

/* ====================================================
   UTILITY CLASSES - Replacement for inline styles
   Date: 14.2.2026
   Purpose: Replace 3831+ inline style attributes
   ==================================================== */

/* TEXT COLORS - Based on analysis of 125+ HTML files */
.text-black { color: #1a1a2e; }

/* Specific hex colors (most used) */
.text-purple-lighter { color: #c4b5fd; }
.text-purple-lightest { color: #d8b4fe; }
.text-amber-light { color: #fbbf24; }
.text-gray-light { color: #c0c0c0; }

/* FONT SIZES - Based on analysis */
.font-sm-plus { font-size: 0.9em; }
.font-sm-95 { font-size: 0.95em; }
.font-lg-15 { font-size: 1.15em; }
.font-lg-2 { font-size: 1.2em; }
.font-xl-5 { font-size: 1.5em; }
.font-xl-6 { font-size: 1.6em; }
.font-xl-8 { font-size: 1.8em; }
.font-2xl-5 { font-size: 2.5em; }
.font-4xl { font-size: 4em; }
.font-5xl { font-size: 5em; }

/* TEXT ALIGNMENT */

/* FONT WEIGHT */
.font-light { font-weight: 300; }

/* MARGINS - Top */
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-0-5rem { margin-top: 0.5rem; }
.mt-2rem { margin-top: 2rem; }
.mt-4rem { margin-top: 4rem; }

/* MARGINS - Bottom */
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-1-5rem { margin-bottom: 1.5rem; }
.mb-2rem { margin-bottom: 2rem; }
.mb-3rem { margin-bottom: 3rem; }

/* MARGINS - All */
.m-0 { margin: 0; }
.m-5-0 { margin: 5px 0; }
.m-15-0 { margin: 15px 0; }
.m-15-0-0-0 { margin: 15px 0 0 0; }

/* MARGINS - Left */
.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }

/* MARGINS - Y-axis (top + bottom) */
.my-10 { 
    margin-top: 10px; 
    margin-bottom: 10px; 
}

.my-15 { 
    margin-top: 15px; 
    margin-bottom: 15px; 
}

.my-20 { 
    margin-top: 20px; 
    margin-bottom: 20px; 
}

.my-30 { 
    margin-top: 30px; 
    margin-bottom: 30px; 
}

.my-2rem { 
    margin-top: 2rem; 
    margin-bottom: 2rem; 
}

.my-80 { 
    margin-top: 80px; 
    margin-bottom: 80px; 
}

/* MARGINS - X-axis (Auto Centering) */
.mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
}

.max-w-900 {
    max-width: 900px;
}
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }
.p-30 { padding: 30px; }

/* PADDING - Y-axis (top + bottom) */
.py-5 { 
    padding-top: 5px; 
    padding-bottom: 5px; 
}

.py-6 { 
    padding-top: 6px; 
    padding-bottom: 6px; 
}

.py-8 { 
    padding-top: 8px; 
    padding-bottom: 8px; 
}

/* PADDING - Top */
.pt-15 { padding-top: 15px; }

/* PADDING - Bottom */
.pb-10 { padding-bottom: 10px; }

/* PADDING - Left */
.pl-20 { padding-left: 20px; }

/* LINE HEIGHT */
.lh-normal { line-height: 1.6; }
.lh-relaxed { line-height: 1.7; }
.lh-loose { line-height: 2; }

/* FONT STYLE */
.italic { font-style: italic; }

/* TEXT DECORATION */
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }

/* DISPLAY */
.inline-block { display: inline-block; }

/* CURSOR */
.cursor-pointer { cursor: pointer; }

/* LIST STYLE */
.list-none { 
    list-style: none; 
    padding: 0; 
}

/* ====================================================
   COMPONENT CLASSES - Ritual Calendar & Similar Pages
   ==================================================== */

/* Grid Layouts */
.grid-2col-gap-30 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}


/* Content Boxes */
.ritual-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

.info-box-gold {
    background: rgba(212, 175, 55, 0.1);
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 5px solid var(--gold);
}

.info-box-green {
    background: rgba(16, 185, 129, 0.15);
    border-left: 4px solid #10b981;
    padding: 25px;
    margin-bottom: 30px;
}

.info-box-purple {
    background: rgba(139, 79, 191, 0.15);
    border-left: 4px solid #8b4fbf;
    padding: 25px;
    margin-bottom: 30px;
}

.info-box-gold-outline {
    background: rgba(212, 175, 55, 0.15);
    border-left: 4px solid var(--gold);
    padding: 25px;
    margin-top: 30px;
}
.border-left-yellow { border-left-color: #eab308 !important; }
.border-left-gray { border-left-color: #6b7280 !important; }

.border-top-gold-light {
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

/* ====================================================
   COMPONENT CLASSES - Dark Boxes & Content Containers
   ==================================================== */

/* Dark content boxes (general purpose) */


/* Dark box alternative (lighter background) */

/* Gold-bordered content box */

/* Section separator with gold border */

/* Border-left color variants (for encyclopedia-card, feature-card, etc.) */
.border-left-violet { border-left-color: #a855f7 !important; }
.border-left-gold { border-left-color: var(--gold) !important; }

/* Border-left style with gold + padding */
.border-left-gold-padded {
    border-left: 5px solid var(--gold);
    padding-left: 20px;
    text-align: left; /* Design s levým borderem - záměrně vlevo */
}

/* Border-top gold variants */
.border-top-gold {
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.6);
}

/* Heading separator - bottom border with spacing */
.heading-separator {
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin: 50px 0 30px 0;
}

.heading-separator-alt {
    margin-top: 4rem;
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
    padding-bottom: 10px;
}

/* Tag style - for badges/tags with border */
.tag-style {
    padding: 8px;
    border: 1px solid rgba(212, 175, 55, 0.6);
}

/* Circular badge/icon container */
.circular-badge {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inline block with margin (common for buttons/tags) */
.inline-block-spaced {
    display: inline-block;
    margin: 10px;
}

/* Heading separator - bottom border with spacing */


/* Tag style - for badges/tags with border */

/* Circular badge/icon container */

/* Inline block with margin (common for buttons/tags) */

/* ====================================================
   CONTAINER WIDTHS - Centered Content
   ==================================================== */

.container-sm {
    max-width: 800px;
    margin: 0 auto;
}

.container-md {
    max-width: 900px;
    margin: 0 auto;
}

.container-lg {
    max-width: 1200px;
    margin: 0 auto;
}

/* ====================================================
   BACKGROUND COLOR VARIANTS - Light Boxes
   ==================================================== */

/* Purple/Violet backgrounds */
.bg-purple-dark {
    background: rgba(139, 79, 191, 0.6);
    border-radius: 10px;
}

.bg-purple-light {
    background: rgba(139, 79, 191, 0.2);
    border-radius: 10px;
}

.bg-indigo-light {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 10px;
}

.bg-violet-light {
    background: rgba(168, 85, 247, 0.2);
    border-radius: 10px;
}

/* Red/Pink backgrounds */
.bg-red-light {
    background: rgba(239, 68, 68, 0.2);
    border-radius: 10px;
}

.bg-pink-light {
    background: rgba(236, 72, 153, 0.2);
    border-radius: 10px;
}

.bg-magenta-light {
    background: rgba(217, 70, 239, 0.2);
    border-radius: 10px;
}

/* Green backgrounds */
.bg-green-light {
    background: rgba(34, 197, 94, 0.2);
    border-radius: 10px;
}

/* Blue backgrounds */
.bg-blue-light {
    background: rgba(59, 130, 246, 0.15);
    border-radius: 10px;
}

/* Gold backgrounds */
.bg-gold-light {
    background: rgba(212, 175, 55, 0.15);
    border-radius: 10px;
}

.bg-gold-medium {
    background: rgba(212, 175, 55, 0.6);
    border-radius: 10px;
}

/* Dark backgrounds */
.bg-dark-light {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.bg-dark-medium {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

/* Complex box variants with border-left */
.box-dark-gold-border {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}

.box-purple-gold-border {
    background: rgba(139, 79, 191, 0.6);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}

.box-dark-gold-5px {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin-top: 50px;
}

.box-dark-gold-border-8 {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 5px solid #d4af37;
}

/* Border utilities for chakras and color coding */
.border-gold-solid {
    border: 2px solid #d4af37;
}

.border-radius-12 {
    border-radius: 12px;
}

/* Border colors - for frequency boxes */
.border-color-red { border-color: #ef4444; }
.border-color-orange { border-color: #f97316; }
.border-color-yellow { border-color: #fbbf24; }
.border-color-green { border-color: #22c55e; }
.border-color-blue { border-color: #3b82f6; }
.border-color-indigo { border-color: #6366f1; }
.border-color-purple { border-color: #a855f7; }
.border-color-cyan { border-color: #06b6d4; }

/* Box variants with colored border-left (5px) */
.box-dark-red-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #ef4444;
    border-radius: 10px;
}

.box-dark-orange-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #f97316;
    border-radius: 10px;
}

.box-dark-yellow-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #fbbf24;
    border-radius: 10px;
}

.box-dark-green-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #22c55e;
    border-radius: 10px;
}

.box-dark-blue-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #3b82f6;
    border-radius: 10px;
}

.box-dark-purple-border {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #a855f7;
    border-radius: 10px;
}

/* Link card pattern - dark background with colored left border */
.link-card {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.link-card-red { border-left: 3px solid #ef4444; }
.link-card-green { border-left: 3px solid #22c55e; }
.link-card-purple { border-left: 3px solid #8b5cf6; }
.link-card-cyan { border-left: 3px solid #06b6d4; }
.link-card-pink { border-left: 3px solid #ec4899; }

/* Frequency box for chakras */
.frequency-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

/* Grid utilities for chakra layout */
.grid-auto-fit-300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.grid-auto-fit-220 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

/* Gradient backgrounds */
.gradient-blue-cyan {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.1));
}

/* Max-width utilities */
.max-w-800 {
    max-width: 800px;
}
.max-w-1200 {
    max-width: 1200px;
}

/* Margin horizontal utilities */
.mx-20 {
    margin-left: 20px;
    margin-right: 20px;
}

/* Border-left 4px variants */
.border-left-4-cyan {
    border-left: 4px solid #06b6d4;
}

/* Flex utilities */
.flex-col-gap-20 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flex-align-center-gap-10 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Border-left-color variants for herb categories */
.border-left-lavender { border-left-color: #a78bfa; }
.border-left-yellow-bright { border-left-color: #facc15; }
.border-left-rose { border-left-color: #f472b6; }
.border-left-teal { border-left-color: #14b8a6; }
.border-left-amber { border-left-color: #fbbf24; }
.border-left-orange-light { border-left-color: #fb923c; }
.border-left-slate { border-left-color: #64748b; }
.border-left-purple-light { border-left-color: #c084fc; }

/* Background color variants for aromatherapy */
.bg-green-herb {
    background: rgba(30, 140, 100, 0.15);
}

.bg-blue-herb {
    background: rgba(59, 130, 246, 0.1);
}

/* Border-radius utilities (if not exist) */
.border-radius-15 {
    border-radius: 15px;
}

/* Grid span utility */
.grid-span-full {
    grid-column: 1 / -1;
}

/* Border-top with padding */
.border-top-green-light {
    border-top: 1px solid rgba(16, 185, 129, 0.3);
    padding-top: 25px;
}

/* Filter button styles */
.filter-button {
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 2px solid;
    transition: 0.3s;
    cursor: pointer;
}

.filter-gold { border-color: var(--gold); }
.filter-pink { border-color: #d946ef; }
.filter-purple { border-color: #8b5cf6; }
.filter-blue { border-color: #3b82f6; }
.filter-green { border-color: #10b981; }
.filter-red { border-color: #ef4444; }

/* Flex wrap center layout */
.flex-wrap-center-gap-10 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Grid utilities - various minmax patterns */
.grid-auto-fit-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Box with left border 4px (lighter version) */
.box-blue-border-4 {
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
}

/* Gradient boxes */
.gradient-blue-purple {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
    padding: 40px;
    border-radius: 20px;
    border: 2px solid #3b82f6;
}

/* Grid column span utility (for JS-inserted content) */
.grid-col-span-full {
    grid-column: 1 / -1;
}

/* Border-left-color: gold variant */
.border-left-color-gold {
    border-left-color: #ffd700;
}

/* Brown/earth tones */
.bg-brown-dark {
    background: rgba(139, 69, 19, 0.2);
}

.border-left-brown {
    border-left: 5px solid #92400e;
}

/* Additional border utilities */
.border-top-gold-faint {
    border-top: 1px solid rgba(212, 175, 55, 0.6);
}

/* Badge/chip styles */
.badge-dark {
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    text-transform: uppercase;
}

.explanation-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* Dynamic JS classes for relationship types */
.relationship-badge {
    padding: 8px 16px;
    border-radius: 8px;
    text-align: center;
}

/* ====================================================
   FAUST TRILOGY - CATEGORY BADGES & CARDS
   ==================================================== */

/* Category badges for Faustian concepts */
.badge-pact,
.badge-search,
.badge-transcendence,
.badge-sacrifice,
.badge-redemption,
.badge-dogma {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pact {
    background: #e74c3c;
}

.badge-search {
    background: #f39c12;
}

.badge-transcendence {
    background: #9b59b6;
}

.badge-sacrifice {
    background: #1abc9c;
}

.badge-redemption {
    background: #2ecc71;
}

.badge-dogma {
    background: #95a5a6;
}

/* Concept cards with category border colors */
.concept-pact {
    border-left-color: #e74c3c !important;
}

.concept-search {
    border-left-color: #f39c12 !important;
}

.concept-transcendence {
    border-left-color: #9b59b6 !important;
}

.concept-sacrifice {
    border-left-color: #1abc9c !important;
}

.concept-redemption {
    border-left-color: #2ecc71 !important;
}

.concept-dogma {
    border-left-color: #95a5a6 !important;
}

/* Text transform utilities */
.text-uppercase {
    text-transform: uppercase;
}

/* Complex margin patterns */
.my-40-30 {
    margin: 40px 0 30px 0;
}

.my-30-40 {
    margin: 30px 0 40px 0;
}

/* Gradient backgrounds - purple variants */
.gradient-purple-dark {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(88, 28, 135, 0.15));
}

.gradient-gold-purple {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
}

/* Blue/cyan box */
.bg-cyan-light-box {
    background: rgba(79, 172, 254, 0.2);
}

.border-left-cyan-bright {
    border-left: 5px solid #4facfe;
}

/* Border-top color variants */
.border-top-orange-light {
    border-top: 1px solid rgba(245, 158, 11, 0.6);
}

.border-top-cyan-light {
    border-top: 1px solid rgba(6, 182, 212, 0.6);
}

/* Dashed border utility */
.border-dashed-gold {
    border: 2px dashed var(--gold);
}

/* Dark box variants */

/* Centered content box */
.centered-dark-gold-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 15px;
    text-align: center;
}

/* Flex utilities */
.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Small badge */
.badge-small {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
}

/* Philosophy-specific: Triangle diagram (responsive, no fixed width) */
.philosophy-triangle {
    max-width: 320px;
    width: 90%; /* Responsive width */
    margin: 20px auto; /* Centered */
    border: 3px solid rgba(200, 132, 252, 0.6); 
    border-top: 80px solid rgba(200, 132, 252, 0.4); 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    position: relative;
}

.philosophy-triangle-text-top { margin: 20px 0 0 0; }
.philosophy-triangle-text-bottom { margin: 5px 0 20px 0; }

/* Philosophy philosophers grid - 4 columns for 38 items (better than 3) */
#philosophers-section .encyclopedia-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Border-left-color utilities for herb cards */
.border-left-color-yellow { border-left-color: #facc15; }
.border-left-color-teal { border-left-color: #14b8a6; }
.border-left-color-amber { border-left-color: #fbbf24; }
.border-left-color-orange-light { border-left-color: #fb923c; }
.border-left-color-orange { border-left-color: #f97316; }
.border-left-color-slate { border-left-color: #64748b; }
.border-left-color-purple-light { border-left-color: #c084fc; }

/* Background color utilities for aromatherapy */
.bg-green-rgba-06 { background: rgba(16, 185, 129, 0.6); }
.bg-amber-rgba-06 { background: rgba(251, 191, 36, 0.6); }
.bg-red-rgba-06 { background: rgba(239, 68, 68, 0.6); }

/* Centered max-width container */
.max-width-900-center {
    max-width: 900px;
    margin: 0 auto;
}

/* Deep Connections specific utilities */

/* Gradient backgrounds */
.gradient-gold-purple-06 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
}

.gradient-purple-gold-06 {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(212, 175, 55, 0.6));
}

.gradient-orange-purple-06 {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), rgba(139, 79, 191, 0.6));
}

.gradient-red-dark {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.6), rgba(192, 57, 43, 0.6));
}

.gradient-gold-purple-015 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 79, 191, 0.15));
}

.gradient-red-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.gradient-blue-light {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
}

/* Card compositions */
.card-dark-dashed-gold {
    background: rgba(0, 0, 0, 0.6);
    border: 2px dashed var(--gold);
    margin-top: 1.5rem;
}

.card-gradient-gold-purple-bordered {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
    border: 2px solid var(--gold);
}

.card-gradient-gold-purple-bordered-thick {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
    border: 3px solid var(--gold);
    padding: 40px;
    margin: 3rem 0;
}

.card-gradient-orange-purple-bordered {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), rgba(139, 79, 191, 0.6));
    border: 2px solid var(--gold);
}

.card-gradient-gold-purple-dashed {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 79, 191, 0.15));
    border: 2px dashed var(--gold);
}

.card-dark-gold-rounded {
    background: rgba(0,0,0,0.6);
    border-radius: 15px;
    border: 2px solid var(--gold);
}

.card-purple-subtle-bordered-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    background: rgba(139, 79, 191, 0.15);
    border-left: 5px solid var(--gold);
}

/* Flex layouts */
.flex-column-gap-10-dark {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
}

.flex-center-wrap-gap {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Grid layouts */
.grid-min-280 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-min-320 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-min-150-gap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* Badge/pill styles */
.badge-red-gradient {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    padding: 10px 25px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.6);
}

/* Text effects */
.text-shadow-gold {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.letter-spacing-wide {
    letter-spacing: 5px;
}

.letter-spacing-normal {
    letter-spacing: 2px;
}

/* SVG/Canvas specific */
.svg-full-height-600 {
    width: 100%;
    height: 600px;
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
}

/* Spacing utilities */
.mx-15 {
    margin: 0 15px;
}

.my-1rem {
    margin: 1rem 0;
}

.my-3rem {
    margin: 3rem 0;
}

.mt-2rem-0-1rem {
    margin: 2rem 0 1rem;
}

.my-3rem-letter-2 {
    margin: 3rem 0;
    letter-spacing: 2px;
}

/* Border utilities */


.border-left-magenta {
    border-left: 5px solid #d946ef;
}

.border-left-blue-dark {
    border-left: 5px solid #3b5998;
}

/* Background utilities specific */


.bg-blue-dark-light {
    background: rgba(59, 89, 152, 0.2);
}

/* Complex compositions */
.p-40-border-top-gold {
    padding: 40px 20px;
    border-top: 2px solid var(--gold);
    background: rgba(0, 0, 0, 0.6);
}

.p-40-letter-5-gradient-text-shadow {
    padding: 40px;
    letter-spacing: 5px;
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(212, 175, 55, 0.6));
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.p-20-gradient-blue-border-left-rounded {
    padding: 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    margin: 40px 0 30px 0;
    max-width: 800px;
}

/* Opacity utility */
.opacity-09 {
    opacity: 0.9;
}

/* Display utility */
.display-none {
    display: none;
}

/* Border-radius utilities */
.border-radius-8 {
    border-radius: 8px;
}

.border-radius-10 {
    border-radius: 10px;
}

/* Critical Thinking specific utilities */
.text-shadow-dark {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.border-3-red {
    border: 3px solid #ef4444;
}

.border-2-purple {
    border: 2px solid #a855f7;
}

.border-2-gold {
    border: 2px solid var(--gold);
}

.ml-1-5rem {
    margin-left: 1.5rem;
}

.lh-2-2 {
    line-height: 2.2;
}

/* Complex card compositions for Critical Thinking */
.card-dark-gold-left-lg {
    background: rgba(0,0,0,0.6);
    padding: 2rem;
    margin: 1.5rem 0;
    border-left: 5px solid var(--gold);
}

.card-dark-gold-left-medium {
    padding: 1.5rem;
    background: rgba(0,0,0,0.6);
    border-left: 4px solid var(--gold);
}

.card-dark-purple-left {
    background: rgba(0,0,0,0.6);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-left: 5px solid #a855f7;
}

.card-dark-orange-border-left {
    background: rgba(0, 0, 0, 0.6);
    border-left-color: #f97316;
}

/* Octopus metaphor specific utilities */
.border-top-red-subtle {
    border-top: 1px solid rgba(239, 68, 68, 0.6);
}

.border-top-purple-subtle {
    border-top: 1px solid rgba(168, 85, 247, 0.6);
}

.border-bottom-gold-thick {
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
}


.mt-1-5 {
    margin-top: 1.5rem;
}


.mb-0-5 {
    margin-bottom: 0.5rem;
}

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

.border-gold-rounded {
    border: 2px solid var(--gold);
    border-radius: 10px;
}


.gradient-purple-dark-gold-border {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.6), rgba(26, 26, 46, 0.95));
    border: 3px solid var(--gold);
    border-radius: 15px;
}

.card-dark-red-border-4 {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 4px solid #ef4444;
}

.card-dark-purple-border-4 {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 4px solid #a855f7;
}

.card-dark-red-border-5 {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid #ef4444;
}

.card-dark-purple-border-5 {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid #a855f7;
}


/* Scale comprehension specific utilities */
.bg-black-60 {
    background: rgba(0, 0, 0, 0.6);
}

.text-shadow-subtle {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.card-black-rounded {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.card-black-gold-border {
    padding: 1.5rem;
    background: rgba(0,0,0,0.6);
    border-left: 4px solid var(--gold);
}

.grid-autofit-200-1rem-mt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.border-gold-2px {
    border: 2px solid var(--gold);
}

/* Happiness page specific utilities */

.border-left-blue-5 {
    border-left: 5px solid #3b82f6;
}

.border-left-green-5 {
    border-left: 5px solid #22c55e;
}

.border-left-orange-5 {
    border-left: 5px solid #f59e0b;
}

.border-left-pink-5 {
    border-left: 5px solid #ec4899;
}

.border-left-purple-light-5 {
    border-left: 5px solid #a78bfa;
}

.border-left-red-5 {
    border-left: 5px solid #ef4444;
}


.border-radius-5 {
    border-radius: 5px;
}

.card-gray-pink-border {
    background: rgba(75, 85, 99, 0.3);
    border-left: 5px solid #ec4899;
    border-radius: 8px;
    margin-bottom: 25px;
}

.card-purple-border {
    background: rgba(102, 51, 153, 0.3);
    border-left: 5px solid #a78bfa;
    border-radius: 8px;
    margin-bottom: 25px;
}

.card-red-light {
    background: rgba(220, 38, 38, 0.2);
    border-left: 5px solid #ef4444;
    border-radius: 8px;
}

.bg-emerald-light {
    background: rgba(16, 185, 129, 0.15);
}

.bg-orange-light {
    background: rgba(249, 158, 11, 0.15);
}

.bg-red-light-subtle {
    background: rgba(200, 100, 100, 0.15);
}

.bg-black-30 {
    background: rgba(0,0,0,0.3);
}

/* Torox geometry - gradient cards */
.gradient-cyan-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.6), rgba(14, 165, 233, 0.15));
    border-left: 5px solid #06b6d4;
}

.gradient-sky-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.6), rgba(6, 182, 212, 0.15));
    border-left: 5px solid #0ea5e9;
}

.gradient-purple-card {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.15), rgba(74, 44, 94, 0.6));
    border-left: 5px solid #8b4fbf;
}

.gradient-cyan-reverse-gold {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(14, 165, 233, 0.6));
    border-left: 5px solid var(--gold);
    padding: 40px 30px;
}

.gradient-red-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(127, 29, 29, 0.15));
    border-left: 5px solid #ef4444;
}

/* Torox geometry - black card variants */
.card-black-rounded-8 {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

.card-black-gold {
    background: rgba(0,0,0,0.6);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

.card-black-red-thin {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid #ef4444;
}

.card-black-fullwidth {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    grid-column: 1 / -1;
}

/* Torox geometry - borders and utilities */
.border-left-cyan-5 {
    border-left: 5px solid #06b6d4;
}

.border-gold-fullwidth {
    border-left: 5px solid var(--gold);
    grid-column: 1 / -1;
}

.text-shadow-cyan-glow {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.mb-25 {
    margin-bottom: 25px;
}

.lh-1 {
    line-height: 1;
}

.flex-start-gap-20 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Runes-quantum - margins and spacing */
.my-40-0-20 {
    margin: 40px 0 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

/* Runes-quantum - border-top patterns */
.border-top-blue-3 {
    border-top: 1px solid rgba(96, 165, 250, 0.3);
    padding-top: 10px;
}

.border-top-orange-3 {
    border-top: 1px solid rgba(249, 115, 22, 0.3);
    padding-top: 10px;
}

.border-top-purple-3 {
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    padding-top: 10px;
}

/* Runes-quantum - card borders */
.card-blue-left {
    border-radius: 10px;
    border-left: 5px solid #3b82f6;
}

.card-orange-left {
    border-radius: 10px;
    border-left: 5px solid #f97316;
}

.card-purple-left {
    border-radius: 10px;
    border-left: 5px solid #a855f7;
}

/* Runes-quantum - hero gradient */
.hero-runes-gradient {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.1));
    padding: 40px;
    border: 2px solid rgba(96, 165, 250, 0.5);
    border-radius: 15px;
    margin: 40px 0;
}

.card-gold-light {
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Runes-quantum - black backgrounds */
.badge-black {
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 10px;
    border-radius: 15px;
}

.card-black-blue-border {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #60a5fa;
    border-radius: 12px;
}

.card-black-rounded-5 {
    background: rgba(0,0,0,0.6);
    border-radius: 5px;
}

.card-black-gold-thin-8 {
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
}

.card-black-gold-thin-5 {
    background: rgba(0,0,0,0.6);
    border-left: 3px solid var(--gold);
    border-radius: 5px;
}

.card-black-light-gold-thin {
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid var(--light-gold);
    border-radius: 5px;
}

/* Shadows page - text effects */
.text-shadow-dark-glow {
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.hero-title-shadow {
    font-size: 3.5em;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

/* Shadows page - specific margins */
.mt-20-0-0 {
    margin: 20px 0 0 0;
}

.mt-10-0-0 {
    margin: 10px 0 0 0;
}

/* Shadows page - border-left colors */
.border-left-navy {
    border-left-color: #1a1a2e;
}

.border-left-dark-red {
    border-left-color: #7f1d1d;
}

.border-left-red-900 {
    border-left-color: #991b1b;
}

.border-left-cyan {
    border-left-color: #06b6d4;
}

/* Shadows page - grid layouts */

.grid-col-1 {
    grid-column: 1;
}

.grid-col-2 {
    grid-column: 2;
}

/* Shadows page - flex layout */
.flex-col-center-gap-20 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Shadows page - divider */
.divider-gradient-red {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7f1d1d, transparent);
}

/* Shadows page - cards */
.card-dark-red-shadow {
    background: rgba(0, 0, 0, 0.4);
    border-left: 5px solid #7f1d1d;
    border-radius: 10px;
    margin-bottom: 25px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.card-green-border {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
    border: 1px solid #10b981;
}

.card-red-border {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 10px;
    border: 1px solid #ef4444;
}

.card-dark-red-border {
    background: rgba(139, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid #7f1d1d;
}


/* Complete-features - buttons */
.btn-green {
    padding: 8px 16px;
    background: #22c55e;
    border-radius: 8px;
}

.btn-gold-large {
    padding: 15px 30px;
    background: var(--gold);
    border-radius: 10px;
    transition: transform 0.3s;
}

.btn-purple-outline {
    padding: 15px 30px;
    background: rgba(74, 44, 94, 0.8);
    border-radius: 10px;
    border: 2px solid var(--gold);
    transition: transform 0.3s;
}

/* Complete-features - margins */
.my-30-0-20 {
    margin: 30px 0 20px 0;
}

.mt-80 {
    margin-top: 80px;
}

/* Complete-features - status */
.status-green {
    background: #22c55e;
}

/* Complete-features - sections */
.hero-cta-box {
    padding: 60px 20px;
    margin-top: 80px;
    background: rgba(74, 44, 94, 0.6);
    border-radius: 20px;
}

.footer-section {
    padding: 40px 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.6);
    margin-top: 80px;
}

.white-box-light {
    background: rgba(255,255,255,0.15);
    border-radius: 15px;
}

/* Complete-features - flex */
.flex-center-wrap-gap-20 {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Complete-features - feature cards */
.feature-card-green {
    border-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.6), rgba(74, 44, 94, 0.6));
}

.border-green {
    border-color: #22c55e;
}

/* ====================================================
   NETWORK-GRAPH UTILITIES
   ==================================================== */

/* Network-graph - margins */
.m-0-0-15-0 {
    margin: 0 0 15px 0;
}

/* Network-graph - position */
.pos-relative {
    position: relative;
}

/* Network-graph - info box */
.info-box-purple-gold {
    background: rgba(74, 44, 94, 0.2);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
}

/* Network-graph - flex utilities */
.flex-col-gap-4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Network-graph - legend colors (7 variants) */
.legend-bg-green {
    background: #22c55e;
}

.legend-bg-pink {
    background: #ec4899;
}

.legend-bg-purple {
    background: #8b5cf6;
}

.legend-bg-orange {
    background: #f59e0b;
}

.legend-bg-blue {
    background: #3b82f6;
}

.legend-bg-red {
    background: #ef4444;
}

.legend-bg-gold {
    background: #d4af37;
}

/* Network-graph - SVG container */
.svg-graph-container {
    display: block;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.8);
}

/* Network-graph - debug panel */
.debug-panel-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00ff00;
    border-radius: 8px;
    font-family: monospace;
    font-size: 11px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 9999;
    max-width: 350px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

/* Network-graph - error box */
.error-box-fixed {
    position: absolute;
    top: 120px;
    right: 20px;
    background: rgba(239, 68, 68, 0.95);
    border: 2px solid #ef4444;
    border-radius: 8px;
    max-width: 400px;
    z-index: 1001;
    pointer-events: auto;
}

/* Network-graph - close button */
.btn-close-absolute {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
}

/* Network-graph - gradient callouts (3 purple variants) */
.gradient-purple-callout-1 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
    border-left: 4px solid #8b5cf6;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

.gradient-purple-callout-2 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-left: 4px solid #a855f7;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

.gradient-purple-callout-3 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(88, 28, 135, 0.1));
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* ====================================================
   TRANSITS UTILITIES
   ==================================================== */

/* Transits - card backgrounds */
.card-indigo-left {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #4f46e5;
    border-radius: 10px;
}

.card-gold-left-thin {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

.transit-duration-box {
    background: rgba(0, 0, 0, 0.6);
}

.practice-box-gold {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 15px;
    margin: 40px 0;
}

/* Transits - margins */
.m-50-0-30-0 {
    margin: 50px 0 30px 0;
}

.m-40-0-20-0 {
    margin: 40px 0 20px 0;
}

.m-60-0-20-0 {
    margin: 60px 0 20px 0;
}

.m-60-0-30-0 {
    margin: 60px 0 30px 0;
}


/* Transits - border-left colors */
.border-left-yellow {
    border-left-color: #fbbf24;
}


/* ====================================================
   PROPORTIONS-PHILOSOPHY UTILITIES
   ==================================================== */

/* Proportions - text effects */
.text-shadow-dark-strong {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Proportions - intro gradient box */
.intro-box-gold-gradient {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(26, 26, 46, 0.9));
    border-left: 5px solid var(--gold);
    border-radius: 15px;
    margin-bottom: 3rem;
}

/* Proportions - black nested boxes */
.box-black-rounded-mt {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    margin-top: 1.5rem;
}

/* Proportions - gold border boxes */
.box-gold-border-rounded {
    border: 2px solid var(--gold);
    border-radius: 10px;
    margin-top: 1.5rem;
}

/* Proportions - h2 section header */
.h2-bottom-border-gold {
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
}

/* Proportions - table styles */
.table-collapse {
    width: 100%;
    border-collapse: collapse;
}

.tr-bg-black {
    background: rgba(0, 0, 0, 0.6);
}

.th-border-gold {
    border: 1px solid rgba(212, 175, 55, 0.6);
}

/* Proportions - monospace code box */
.code-box-monospace {
    font-family: monospace;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}

/* Proportions - conclusion gradient box */
.conclusion-box-gold-gradient {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(26, 26, 46, 0.95));
    border: 3px solid var(--gold);
    border-radius: 15px;
}

/* Proportions - list item gold left */
.list-item-gold-left {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

/* Proportions - centered gold-light box */
.box-gold-light-centered {
    border-radius: 10px;
}

/* ====================================================
   CONSCIOUSNESS-EVOLUTION UTILITIES
   ==================================================== */

/* Consciousness - border-radius */
.br-8 {
    border-radius: 8px;
}

/* Consciousness - display */

/* Consciousness - callout boxes */
.box-purple-red-left {
    border-left: 5px solid #ef4444;
    border-radius: 8px;
}

.box-green-left {
    background: rgba(16, 185, 129, 0.2);
    border-left: 5px solid #10b981;
    border-radius: 8px;
}

.box-pink-left {
    border-left: 5px solid #ec4899;
    border-radius: 8px;
}

/* Consciousness - flex layouts (for JS templates) */

.flex-principles {
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 8px;
}

.flex-1 {
    flex: 1;
}

/* Consciousness - badges */
.badge-risk-red {
    background: rgba(239, 68, 68, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
}

.badge-gold-inline {
    padding: 5px 10px;
    border-radius: 5px;
}

/* Consciousness - gold left border boxes */
.box-gold-left-thin-8 {
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

/* Consciousness - danger box */
.box-danger-red {
    background: rgba(239, 68, 68, 0.6);
    border-radius: 8px;
}

/* Consciousness - margins (for JS templates) */
.mt-8 {
    margin-top: 8px;
}

/* Consciousness - gradient callout */
.gradient-blue-callout {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    margin: 40px 0 30px 0;
    max-width: 800px;
}

/* ====================================================
   SPECTRA UTILITIES
   ==================================================== */

/* Spectra - frequency definition box */
.freq-definition-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.15));
    border-left: 5px solid #06b6d4;
    border-radius: 12px;
    margin: 30px 0 40px 0;
}

/* Spectra - flex bar chart */
.flex-freq-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    gap: 8px;
}

/* Spectra - frequency bars (6 variants) */
.freq-bar-base {
    flex: 1;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.freq-bar-hz {
    background: rgba(239, 68, 68, 0.4);
    height: 30px;
}

.freq-bar-khz {
    background: rgba(249, 115, 22, 0.4);
    height: 60px;
}

.freq-bar-mhz {
    background: rgba(251, 191, 36, 0.4);
    height: 90px;
}

.freq-bar-ghz {
    background: rgba(34, 197, 94, 0.4);
    height: 120px;
}

.freq-bar-thz {
    background: rgba(59, 130, 246, 0.4);
    height: 150px;
}

.freq-bar-phz {
    background: rgba(139, 92, 246, 0.4);
    height: 180px;
}

/* Spectra - CTA box */
.cta-box-purple-gold {
    margin: 60px 20px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(74, 44, 94, 0.6));
    border-radius: 20px;
    border: 3px solid #d4af37;
}

/* Spectra - CTA button */
.btn-gold-gradient {
    padding: 20px 40px;
    background: linear-gradient(135deg, #d4af37, #f4c542);
    border-radius: 12px;
    transition: all 0.3s;
}

/* Spectra - margins */

/* ====================================================
   SCHAUBERGER UTILITIES
   ==================================================== */

/* Schauberger - backgrounds */

/* Schauberger - vortex principle box */
.vortex-principle-box {
    background: linear-gradient(135deg, rgba(74, 44, 94, 0.2), rgba(42, 26, 62, 0.15));
    padding: 40px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 15px;
    margin: 40px 0;
}

/* Schauberger - principle detail cards */
.principle-card-yellow {
    border-radius: 10px;
    border-left: 5px solid #fbbf24;
}

/* Schauberger - border-top dividers */
.divider-top-yellow {
    border-top: 1px solid rgba(251, 191, 36, 0.3);
}

/* Schauberger - context box */
.context-box-gold {
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

/* Schauberger - grid 2 columns */

/* Schauberger - SVG container */
.svg-container-gold {
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* Schauberger - SVG sizing */
.svg-max-400 {
    max-width: 400px;
    width: 100%;
    height: auto;
}

/* Schauberger - SVG gradient stops */
.stop-gold-full {
    stop-color: var(--gold);
    stop-opacity: 1;
}

.stop-purple-fade {
    stop-color: var(--primary-purple);
    stop-opacity: 0.3;
}

/* Schauberger - flex badges */
.flex-badges-center {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Schauberger - number badge circle */
.badge-number-circle {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Schauberger - text shadow gold */
.text-shadow-gold-glow {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* ==== GENE-KEYS UTILITIES ==== */

/* Gene Keys - hero subtitle */
.gk-hero-subtitle {
    color: #e0e0e0;
    margin-bottom: 5px;
}

/* Gene Keys - tagline (italic gold) */
.gk-tagline-gold {
    margin-top: 1rem;
    font-style: italic;
    color: #d4af37;
}

/* List utilities */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

/* Margin utilities */
.mt-3rem { margin-top: 3rem; }

/* Gene Keys - back button */
.btn-back-home {
    background: linear-gradient(135deg, var(--primary-purple), #5c0000);
    padding: 1rem 2rem;
    border-radius: 50px;
    transition: transform 0.3s;
}

/* Gene Keys - callout boxes */
.box-blue-facebook {
    background: rgba(59, 89, 152, 0.2);
    border-left: 5px solid #3b5998;
    border-radius: 8px;
}

.box-magenta-left {
    border-left: 5px solid #d946ef;
    border-radius: 8px;
}


/* Gene Keys - button gold full width */
.btn-gold-full {
    background: var(--gold);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    margin-top: 1.5rem;
    width: 100%;
}

/* Gene Keys - font size utilities */
.font-1-3rem { font-size: 1.3rem; }

/* Gene Keys - cross-reference boxes */
.crossref-box-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    margin: 40px 0 30px 0;
    max-width: 800px;
}

.crossref-box-cyan {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.1));
    border-left: 4px solid #06b6d4;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

.crossref-box-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-left: 4px solid #a855f7;
    border-radius: 10px;
    margin: 40px auto 30px auto;
    max-width: 800px;
}

/* ==== TIME-PARADOXES UTILITIES ==== */

/* Font size utilities */
.font-09rem { font-size: 0.9rem; }

/* Padding utilities */
.p-40 { padding: 40px; }

/* Black background boxes (biblical references, genetic notes) */
.bgbox-black-rounded {
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    border-radius: 5px;
}

/* Sea Peoples border box */
.seapeople-box {
    border: 2px solid var(--time-blue);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1rem 0;
    background: rgba(0, 0, 0, 0.6);
}

/* ==== DEATH-REBIRTH-CYCLE UTILITIES ==== */

/* Text shadows */
.text-shadow-indigo {
    text-shadow: 0 2px 10px rgba(99, 102, 241, 0.5);
}

/* Border radius utilities */
.br-10 { border-radius: 10px; }

/* Gradient boxes */
.box-indigo-gradient {
    background: rgba(99, 102, 241, 0.1);
    border-left: 5px solid #6366f1;
    border-radius: 10px;
}

.box-blue-faint {
    background: rgba(59, 89, 152, 0.2);
    border-radius: 8px;
}

.box-red-warning {
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.box-blue-gradient {
    background: rgba(59, 89, 152, 0.1);
    border-left: 5px solid #3b5998;
    margin: 40px 0;
    border-radius: 10px;
}

.box-gradient-dual-blue {
    background: linear-gradient(135deg, rgba(59, 89, 152, 0.2), rgba(99, 102, 241, 0.15));
    border-left: 5px solid #3b5998;
    border-radius: 10px;
    margin: 40px 0;
}

/* List utilities */
.list-2col {
    list-style: none;
    padding: 0;
    columns: 2;
    column-gap: 15px;
}

/* Border left utilities */
.border-left-indigo { border-left: 5px solid #6366f1; }

/* Margin utilities */
.m-40-0 { margin: 40px 0; }
.m-60-0 { margin: 60px 0; }

/* ==== COLOR-THERAPY UTILITIES ==== */

/* 7 color card variants - spectrum */
.card-red-left {
    border-left: 5px solid #ef4444;
    background: rgba(239, 68, 68, 0.15);
}


.card-yellow-left {
    border-left: 5px solid #facc15;
    background: rgba(250, 204, 21, 0.15);
}

.card-green-left {
    border-left: 5px solid #22c55e;
    background: rgba(34, 197, 94, 0.15);
}


.card-violet-left {
    border-left: 5px solid #a855f7;
    background: rgba(168, 85, 247, 0.15);
}

/* Color therapy quantum box */
.color-quantum-box {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2),rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
}

/* ==== JUNG UTILITIES ==== */
/* Margins */
.m-20-0-0-0 { margin: 20px 0 0 0; }
.m-10-0-0-0 { margin: 10px 0 0 0; }

/* Gradient boxes */
.box-purple-red-gradient {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(239, 68, 68, 0.6));
    padding: 40px 20px;
    border-radius: 20px;
    margin-top: 3rem;
    border: 2px solid rgba(212, 175, 55, 0.6);
}

.text-center-max-900 {
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.insight-box-red-purple {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(139, 79, 191, 0.6));
    border-left: 5px solid #fb7185;
}


/* ==== TEST-LOADING-SPINNER UTILITIES ==== */
/* Grid layout */
.grid-test-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Interactive test cards */
.test-card-hover {
    transition: all 0.3s;
}

.test-card-hover:hover {
    transform: scale(1.05);
}

/* Full-width button variants */
.btn-full {
    width: 100%;
    border: none;
    border-radius: 5px;
}

.btn-full-gold {
    background: var(--gold);
}

.btn-full-green {
    background: #22c55e;
}

.btn-full-red {
    background: #ef4444;
}

.btn-full-blue {
    background: #3b82f6;
}

.btn-full-purple {
    background: #8b4fbf;
}

.btn-full-amber {
    background: #f59e0b;
}

/* Results box */
.results-box {
    border-left: 3px solid var(--gold);
    border-radius: 8px;
}

/* ==== FEMININE-POWER UTILITIES ==== */
/* Text shadows */
.text-shadow-pink {
    text-shadow: 0 2px 10px rgba(236, 72, 153, 0.5);
}

/* Phase boxes */
.moon-phase-box {
    border-radius: 10px;
}

/* Indigo kundalini box */
.kundalini-box {
    border-radius: 8px;
    border-left: 3px solid #6366f1;
}

/* Pink boxes */
.pink-box-rounded {
    border-radius: 8px;
}

/* Related topics box */
.related-pink-box {
    background: rgba(236, 72, 153, 0.1);
    border-left: 5px solid #ec4899;
    margin: 40px 0;
    border-radius: 10px;
}

/* Conclusion gradient box */
.feminine-conclusion-box {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.15));
    border-left: 5px solid #ec4899;
    border-radius: 10px;
    margin: 40px 0;
}

/* Chaos link boxes */
.chaos-pink-box {
    border-left: 5px solid #ec4899;
    border-radius: 8px;
}

.chaos-magenta-box {
    border-left: 5px solid #d946ef;
    border-radius: 8px;
}

.chaos-green-box {
    border-left: 5px solid #22c55e;
    border-radius: 8px;
}

/* ==== TAOISM UTILITIES ==== */
/* List indentation */
.ml-30 { margin-left: 30px; }

/* Green filter boxes */
.tao-filter-box {
    background: rgba(0, 168, 132, 0.15);
    border-left: 5px solid #10b981;
    border-radius: 8px;
}

/* Grid layout */
.grid-tao-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

/* Gold example boxes */
.tao-gold-box {
    border-left: 5px solid var(--gold);
    border-radius: 8px;
}

/* ==== INFINITE-CONNECTION UTILITIES ==== */
/* Text shadows */
.text-shadow-strong {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

/* Gradient intro box */
.infinite-intro-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(26, 26, 46, 0.9));
    border-left: 5px solid var(--gold);
    border-radius: 15px;
    margin-bottom: 3rem;
}

/* Black info boxes */
.black-info-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    margin-top: 1.5rem;
}

/* Gold border box */

/* Section with bottom border */
.section-border-bottom {
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
}

/* Monospace code box */
.mono-code-box {
    font-family: monospace;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
}

/* Gradient conclusion box */
.infinite-conclusion-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(26, 26, 46, 0.95));
    border: 3px solid var(--gold);
    border-radius: 15px;
}

/* Conclusion sub-boxes */
.conclusion-sub-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

/* Final box centered */
.final-centered-box {
    border-radius: 10px;
}

/* ==== DREAM-JOURNAL UTILITIES ==== */
/* Flex button container */
.flex-btn-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Dream architecture gradient box */
.dream-arch-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
    padding: 40px;
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 15px;
    margin: 40px 0;
}

/* Dream timeline boxes */
.dream-timeline-box {
    border-radius: 10px;
    border-left: 5px solid #8b5cf6;
}

/* Small margin for paragraphs */
.m-8-0 {
    margin: 8px 0;
}

/* Gold info box */
.dream-gold-info {
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
}

/* Dream notes box in JS template */
.dream-notes-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-left: 3px solid #8b5cf6;
}

/* ==== DARK-MATTER UTILITIES ==== */

/* Intro and conclusion boxes with gold left border */
.dark-intro-gold {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin-bottom: 40px;
}

/* Universe composition box with gold all-around border */
.dark-comp-box {
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 20px;
    margin: 40px 0;
    border: 3px solid var(--gold);
}

/* Flex container with center alignment */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid for 3 universe cards */
.grid-3col-universe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
}

/* Universe evidence cards */
.universe-card {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
}

/* Alternatives box with red left border */
.dark-alt-red {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid #ef4444;
    margin: 40px 0;
}

/* Future of universe gradient box */
.dark-future-gradient {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(6, 182, 212, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Simple dark boxes (philosophy, scientists) */
.dark-simple {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    margin: 40px 0;
}

/* Conclusion box with gold left border (no margins - handled externally) */
.dark-conclusion-gold {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* ==== EXISTENTIAL-QUESTIONS UTILITIES ==== */

/* Purple border for connection box */
.existential-purple-border {
    border-left-color: var(--existential-purple);
}

/* Meta intro gradient box */
.meta-intro-gradient {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(139, 79, 191, 0.6));
    margin-top: 3rem;
}

/* Question cards with dark background and gold border */
.question-card-dark-gold {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border: 2px solid var(--gold);
}

/* Final meta gradient box */
.meta-final-gradient {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(168, 85, 247, 0.6));
    border: 3px solid var(--gold);
    margin-top: 3rem;
}

/* Font style normal */

/* ==== MEDICINE UTILITIES ==== */

/* Margin 20px all sides */
.m-20 {
    margin: 20px;
}

/* Herb filter select styling */
.herb-filter-select {
    font-size: 16px;
    border-radius: 8px;
}

/* Responsive SVG */
.svg-responsive {
    max-width: 100%;
}

/* Acupuncture white box */
.acupuncture-white-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
}

/* Margin bottom 8px */
.mb-8 {
    margin-bottom: 8px;
}

/* Line height 1.5 */
.lh-1-5 {
    line-height: 1.5;
}

/* Crystals promo gradient box */
.crystals-promo-gradient {
    margin: 60px 20px;
    padding: 40px;
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(74, 44, 94, 0.6));
    border-radius: 20px;
    border: 3px solid #d4af37;
}

/* Crystals CTA button */
.crystals-cta-button {
    padding: 20px 40px;
    background: linear-gradient(135deg, #d4af37, #f4c542);
    border-radius: 12px;
    transition: all 0.3s;
}

/* ==== MONEY-CONSCIOUSNESS UTILITIES ==== */

/* Green text shadow for hero */
.text-shadow-green {
    text-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
}

/* Green background box */
.money-green-box {
    background: rgba(16, 185, 129, 0.2);
    border-radius: 10px;
}

/* Border radius 10px utility */
.border-r-10 {
    border-radius: 10px;
}

/* Border radius 8px utility */
.border-r-8 {
    border-radius: 8px;
}

/* Indigo box with border */
.indigo-box-border {
    border-radius: 8px;
    border-left: 3px solid #6366f1;
}

/* Money connections box */
.money-connections-box {
    background: rgba(16, 185, 129, 0.1);
    border-left: 5px solid #10b981;
    margin: 40px 0;
    border-radius: 10px;
}

/* Two column ul */
.ul-2col {
    list-style: none;
    padding: 0;
    columns: 2;
    column-gap: 15px;
}

/* Money conclusion gradient */
.money-conclusion-gradient {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 197, 94, 0.15));
    border-left: 5px solid #10b981;
    border-radius: 10px;
    margin: 40px 0;
}

/* Chaos link borders */
.chaos-pink-border {
    border-left: 5px solid #ec4899;
    border-radius: 8px;
}

.chaos-red-border {
    border-left: 5px solid #ef4444;
    border-radius: 8px;
}

.chaos-magenta-border {
    border-left: 5px solid #d946ef;
    border-radius: 8px;
}

/* ==== PEACE-THROUGH-WAR UTILITIES ==== */

/* Red text shadow for hero */
.text-shadow-red {
    text-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
}

/* War connections box (red variant) */
.war-connections-box {
    background: rgba(239, 68, 68, 0.1);
    border-left: 5px solid #ef4444;
    margin: 40px 0;
    border-radius: 10px;
}

/* War conclusion gradient (red-indigo) */
.war-conclusion-gradient {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(99, 102, 241, 0.15));
    border-left: 5px solid #ef4444;
    border-radius: 10px;
    margin: 40px 0;
}

/* Chaos link with blue background */
.chaos-blue-bg-border {
    background: rgba(59, 130, 246, 0.2);
    border-left: 5px solid #3b82f6;
    border-radius: 8px;
}

/* Chaos link with cyan background */
.chaos-cyan-bg-border {
    background: rgba(6, 182, 212, 0.2);
    border-left: 5px solid #06b6d4;
    border-radius: 8px;
}

/* ==== CONSCIOUSNESS UTILITIES ==== */

/* Purple gradient evolution definition box */
.consciousness-evolution-def {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.15));
    border-left: 5px solid #a855f7;
    border-radius: 12px;
    margin: 30px auto 40px auto;
    max-width: 1000px;
    text-align: center;
}

/* Flex container for evolution visualization */
.flex-evolution-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 300px;
    gap: 20px;
    max-width: 800px;
    margin: 20px auto;
}

/* Evolution bars - base */
.evolution-bar {
    flex: 1;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Evolution bar - survival (red, short) */
.evolution-bar-survival {
    background: rgba(50, 50, 100, 0.4);
    height: 80px;
}

/* Evolution bar - growth (blue, medium) */
.evolution-bar-growth {
    background: rgba(100, 100, 180, 0.4);
    height: 160px;
}

/* Evolution bar - enlightenment (yellow, tall) */
.evolution-bar-enlightenment {
    background: rgba(250, 200, 100, 0.3);
    height: 280px;
    color: #fcd34d;
}

/* Yellow color utility */
.text-yellow-bright {
    color: #fcd34d;
}

/* Blue border-left-color for card */
.border-left-blue-light {
    border-left-color: #60a5fa;
}

/* Gray border-left-color for card */
.border-left-gray {
    border-left-color: #64748b;
}

/* Dark background for gold card */
.bg-dark-06 {
    background: rgba(0, 0, 0, 0.6);
}

/* Frequency crossref gradient box */
.freq-crossref-gradient {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.1));
    border-left: 4px solid #06b6d4;
    border-radius: 10px;
    margin: 40px auto 30px auto;
    max-width: 800px;
    text-align: center;
}

/* ==== PERSONALITY-TYPES UTILITIES ==== */

/* Enneagram point positions (9 points in circle) */
.enneagram-point-9 {
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0);
}

.enneagram-point-1 {
    top: 15%;
    right: 10%;
}

.enneagram-point-2 {
    top: 40%;
    right: 5%;
}

.enneagram-point-3 {
    bottom: 30%;
    right: 10%;
}

.enneagram-point-4 {
    bottom: 10%;
    right: 30%;
}

.enneagram-point-5 {
    bottom: 10%;
    left: 30%;
}

.enneagram-point-6 {
    bottom: 30%;
    left: 10%;
}

.enneagram-point-7 {
    top: 40%;
    left: 5%;
}

.enneagram-point-8 {
    top: 15%;
    left: 10%;
}

/* Critical warning box (red) */
.critical-warning-box {
    background: rgba(239, 68, 68, 0.6);
    border-left: 3px solid #ef4444;
}

/* ==== SOUND-HEALING UTILITIES ==== */

/* Intro/studies dark boxes with gold border */
.sound-dark-gold-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* Gold-green gradient highlight sections */
.sound-gradient-highlight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(16, 185, 129, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* 432 Hz (green border) */
.sound-hz432-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid #10b981;
}

/* 440 Hz (red border) */
.sound-hz440-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid #ef4444;
}

/* Verdict center box */
.sound-verdict-center {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

/* Quote/conclusion center box with gold border */
.sound-quote-gold {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* Line height utility */
.lh-1-9 {
    line-height: 1.9;
}

/* Margin utilities */

.my-40 {
    margin: 40px 0;
}

/* ==== STRING-THEORY UTILITIES ==== */

/* Gold-cyan gradient */
.string-gradient-gold-cyan {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(6, 182, 212, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Purple-cyan gradient */
.string-purple-cyan-gradient {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(6, 182, 212, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Landscape explanation dark box */
.string-landscape-dark {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
}

/* Anthropic argument (green) */
.string-anthropic-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid #10b981;
}

/* Critique box (red) */
.string-critique-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid #ef4444;
}

/* Quotes/simple dark box */
.string-quotes-dark {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
}

/* ==== WATER-CONSCIOUSNESS UTILITIES ==== */

/* Cyan text shadow for hero */
.text-shadow-cyan {
    text-shadow: 0 2px 10px rgba(6, 182, 212, 0.5);
}

/* Indigo box with border and radius */
.water-indigo-box {
    border-radius: 8px;
    border-left: 3px solid #6366f1;
}

/* Purple quantum box */
.water-purple-box {
    background: rgba(168, 85, 247, 0.1);
    border-left: 5px solid #a855f7;
    border-radius: 10px;
}

/* Blue connections box */
.water-blue-box {
    background: rgba(59, 130, 246, 0.1);
    border-left: 5px solid #3b82f6;
    margin: 40px 0;
    border-radius: 10px;
}

/* 2-column list variant */

/* Cyan-green gradient conclusion */
.water-gradient-conclusion {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(16, 185, 129, 0.15));
    border-left: 5px solid #06b6d4;
    border-radius: 10px;
    margin: 40px 0;
}

/* Light blue chaos box */
.chaos-light-blue-box {
    background: rgba(79, 172, 254, 0.2);
    border-left: 5px solid #4facfe;
    border-radius: 8px;
}

/* Indigo border for chaos (with existing bg class) */
.chaos-indigo-border {
    border-left: 5px solid #6366f1;
    border-radius: 8px;
}

/* Pink border for chaos (with existing bg class) */
.chaos-pink-border-8 {
    border-left: 5px solid #ec4899;
    border-radius: 8px;
}

/* ==== PHILOSOPHY-SCHOOLS UTILITIES ==== */

/* Gold-purple gradient for practical application */
.philo-gold-purple-gradient {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Table container dark box */
.philo-table-container {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    margin: 40px 0;
}

/* Table styling */
.philo-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table header row background */
.philo-table-header {
    background: rgba(0, 0, 0, 0.6);
}

/* Table row with gold border-bottom */
.philo-table-row {
    border-bottom: 1px solid rgba(212, 175, 55, 0.6);
}

/* Margin bottom utility */

/* ==== LILITH UTILITIES ==== */

/* Blockquote crimson border */
.blockquote-crimson {
    border-left-color: #dc143c;
}

/* Archetype card border colors */
.archetype-white {
    border-left-color: #fff;
}

.archetype-magenta {
    border-left-color: #8b008b;
}

.archetype-dark-red {
    border-left-color: #8b0000;
}

.archetype-royal-blue {
    border-left-color: #4169e1;
}

.archetype-orange {
    border-left-color: #ffa500;
}

/* Encyclopedia card with dark background */
.encyclopedia-card-dark {
    background: rgba(0, 0, 0, 0.6);
}

/* Encyclopedia card crimson border + dark bg */
.encyclopedia-card-crimson {
    border-left-color: #dc143c;
    background: rgba(0, 0, 0, 0.6);
}

/* Purple-pink gradient crossref box */
.lilith-gradient-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
    border-left: 4px solid #8b5cf6;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* ==== EXTENDED-ARCHETYPES UTILITIES ==== */

/* Archetype definition gradient box */
.archetype-definition-gradient {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15));
    border-left: 5px solid #8b5cf6;
    border-radius: 12px;
}

/* Visual theater section container */
.archetype-visual-container {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05));
    border: 2px solid rgba(236, 72, 153, 0.3);
    border-radius: 15px;
}

/* Flex wrapper for archetype boxes */
.archetype-flex-wrapper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

/* Individual archetype flex box */
.archetype-flex-box {
    flex: 1;
    min-width: 150px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
}

/* Connection box color variants */
.connection-box-pink {
    border-left-color: var(--extended-pink);
}

.connection-box-orange {
    border-left-color: var(--extended-orange);
}

/* ==== COSMIC-VORTEX UTILITIES ==== */

/* Dark box with gold border (simple variant) */
.vortex-dark-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* Dark box with gold border + border-left */
.vortex-gold-box {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    border-radius: 8px;
}

/* Encyclopedia card border colors for principle types */
.card-border-gold {
    border-left-color: #ffd700;
}

.card-border-magenta {
    border-left-color: #d946ef;
}

.card-border-blue {
    border-left-color: #3b82f6;
}

/* Encyclopedia card border colors for cycle phases */
.card-border-red {
    border-left-color: #ef4444;
}

.card-border-green {
    border-left-color: #10b981;
}

/* Encyclopedia card border purple */
.card-border-purple {
    border-left-color: #a78bfa;
}

/* Chaos link green border (with bg class) */
.chaos-green-border {
    border-left: 5px solid #16a34a;
    border-radius: 8px;
}

/* Chaos link goldenrod bg + border */
.chaos-goldenrod-box {
    background: rgba(218, 165, 32, 0.2);
    border-left: 5px solid #d4af37;
    border-radius: 8px;
}

/* ==== COGNITIVE-BIASES UTILITIES ==== */

/* Intro explanation box (dark bg + gold border + margin) */
.bias-intro-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin-bottom: 40px;
}

/* Gold light box addon (radius + border for bg-gold-light) */
.bias-gold-radius {
    border-radius: 12px;
    border-left: 4px solid var(--gold);
}

/* Central dark content box */
.bias-central-dark {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    margin: 50px 0;
}

/* Gold-red gradient highlight section (important + dangerous) */
.bias-gold-red-gradient {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(239, 68, 68, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Meta-tools purple box addon (radius + border for bg-purple-dark) */
.bias-meta-tools-box {
    border-radius: 12px;
    border: 2px solid var(--gold);
}

/* Meta-cognitive tool link box (TOROX, octopus, infinite) */
.bias-meta-link {
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border: 2px solid var(--gold);
    transition: all 0.3s;
}

.bias-meta-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Conclusion box addon (radius + border for bg-gold-medium + text-center) */
.bias-conclusion-box {
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* ==== TIER 1 SINGLE-STYLE UTILITIES ==== */

/* Key insights box - emerald (green) variant */
.key-insights-emerald {
    background: rgba(16, 185, 129, 0.05);
    border-left: 5px solid #10b981;
    border-radius: 5px;
}

/* Key insights box - cyan variant */
.key-insights-cyan {
    background: rgba(6, 182, 212, 0.05);
    border-left: 5px solid #06b6d4;
    border-radius: 5px;
}

/* Key insights box - purple variant */
.key-insights-purple {
    background: rgba(74, 44, 94, 0.05);
    border-left: 5px solid #8b1a1a;
    border-radius: 5px;
}

/* Concept browser philosophy cross-reference box */
.concept-philo-crossref {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(88, 28, 135, 0.1));
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Error message box - red variant (for API errors) */
.error-box-red {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-left: 5px solid #ff6b6b;
}

/* Left border width utilities */
.border-left-10 {
    border-left-width: 10px;
}

/* Chakra frequency cross-reference specific margin */
.chakra-crossref-margin {
    margin: 40px 20px 30px 20px;
}

/* Info box dark variant with amber border (for warnings/notes) */
.info-box-dark-amber {
    background: rgba(0, 0, 0, 0.6);
    border-color: #fbbf24;
}

/* ==== TIER 2 UTILITIES ==== */

/* Cyan principle box (lighter variant with padding) */
.principle-box-cyan {
    background: rgba(6, 182, 212, 0.1);
    border-left: 3px solid #06b6d4;
}

/* Hero paragraph centered with max-width */
.hero-paragraph-centered {
    color: #e0e0e0;
    max-width: 900px;
    margin: 0 auto;
}

/* Encyclopedia card purple variant (dark bg + purple border) */
.encyclopedia-card-purple {
    background: rgba(0, 0, 0, 0.6);
    border-color: #8b4fbf;
}

/* Lifecycle card - death/stress (red semi-transparent) */
.lifecycle-card-death {
    background: rgba(239, 68, 68, 0.6);
}

/* Lifecycle card - rebirth (green semi-transparent) */
.lifecycle-card-rebirth {
    background: rgba(34, 197, 94, 0.6);
}

/* Centered axis label (absolute positioning) */
.axis-label-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
}

/* Section heading with specific vertical margin */
.section-heading-spaced {
    margin: 40px 0 30px 0;
}

/* Connection box orange border variant */

/* Hero title with shadow */

/* Hero subtitle light grey */
.hero-subtitle-light {
    color: #e0e0e0;
}

/* Ritual mudrolství box (gold-purple gradient) */
.ritual-mudro-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 79, 191, 0.1));
    padding: 40px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 15px;
    margin: 40px 0;
}

/* Master insight heading (large) */
.master-insight-heading {
    font-size: 2.2em;
}

/* ==== TIER 3 UTILITIES ==== */

/* Subtitle text light grey (hero) */
.subtitle-light-grey {
    color: rgba(255, 255, 255, 0.7);
}

/* Blockquote purple variant (Capra philosophy) */
.blockquote-purple {
    background: rgba(155, 89, 182, 0.1);
    border-left: 5px solid #9b59b6;
}

/* Navigation links wrapper with vertical margin */
.nav-links-spaced {
    margin: 40px 0;
}

/* ==== TIER 4 UTILITIES ==== */

/* Hero subtitle top margin only */
.hero-subtitle-mt-20 {
    margin: 20px 0 0 0;
}

/* Hero subtitle small top margin */
.hero-subtitle-mt-10 {
    margin: 10px 0 0 0;
}

/* Search input full width with gold border */
.search-input-gold {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--gold);
    border-radius: 10px;
}

/* Alphabet index container (flex centered) */
.alphabet-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Master insight card with amber-purple gradient */
.master-insight-card-gradient {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(139, 79, 191, 0.6));
    border: 3px solid var(--gold);
}

/* Frequency cross-reference box (blue-cyan gradient) */
.frequency-crossref-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.1));
    border-left: 4px solid #06b6d4;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Blockquote cyan variant (quantum philosophy) */
.blockquote-cyan {
    background: rgba(6, 182, 212, 0.1);
    border-left: 5px solid #06b6d4;
}

/* DNA/Quantum cross-reference box (blue-indigo gradient) */
.quantum-crossref-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    margin: 40px 0 30px 0;
    max-width: 800px;
}

/* Frequency card with dynamic color (CSS variable) */
.freq-card {
    border-left: 4px solid var(--freq-color);
}

/* Frequency heading with dynamic color */
.freq-heading {
    color: var(--freq-color);
}

/* Blockquote gold variant (Tesla wisdom, innovation) */
.blockquote-gold {
    background: rgba(234, 179, 8, 0.1);
    border-left: 5px solid #eab308;
}

/* Table full width */
.table-full-width {
    width: 100%;
}

/* Table header row with purple border */
.table-header-purple {
    border-bottom: 1px solid #8b5cf6;
}

/* Table header cell with padding */
.table-th-padded {
    padding: 8px;
}

/* ==== TIER 5 UTILITIES ==== */

/* Blue hero title with glow shadow */
.hero-title-blue-glow {
    text-shadow: 0 2px 10px rgba(96, 165, 250, 0.5);
}

/* Stage box - Red (resistance, challenge) */
.stage-box-red {
    background: rgba(239, 68, 68, 0.1);
    border-left: 5px solid #ef4444;
    border-radius: 10px;
}

/* Stage box - Purple (transformation, psychology) */
.stage-box-purple {
    background: rgba(168, 85, 247, 0.1);
    border-left: 5px solid #a855f7;
    border-radius: 10px;
}

/* Stage box - Green (practice, liberation) */
.stage-box-green {
    background: rgba(34, 197, 94, 0.1);
    border-left: 5px solid #22c55e;
    border-radius: 10px;
}

/* Section divider with top border and spacing */
.section-divider-gold {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid rgba(212, 175, 55, 0.3);
}

/* Achievement tier badge style */
.achievement-tier-badge {
    padding: 5px 15px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Achievement lock icon (positioned absolute) */
.achievement-lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Progress bar container (dark background) */
.progress-bar-container {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

/* Progress bar fill (gold gradient) */
.progress-bar-fill-gold {
    background: linear-gradient(90deg, var(--gold), #f1d98f);
    height: 100%;
    transition: width 0.3s ease;
}

/* Info/card box with gold-purple alchemy gradient */
.alchemy-gradient-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
}

/* List with left margin (indented) */
.list-ml-20 {
    margin-left: 20px;
}

/* Jung cross-reference box (purple-indigo gradient) */
.jung-crossref-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-left: 4px solid #a855f7;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Large blockquote with cyan gradient (Bohm wisdom) */
.blockquote-cyan-large {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    border: none;
    padding: 40px;
    border-radius: 15px;
}

/* Quote author attribution (small, block display) */
.quote-author {
    font-size: 0.7em;
    display: block;
}

/* Rose hero title with glow shadow */
.hero-title-rose-glow {
    text-shadow: 0 2px 10px rgba(244, 63, 94, 0.5);
}

/* Stage box - Rose (compassion, emotion) */
.stage-box-rose {
    background: rgba(244, 63, 94, 0.1);
    border-left: 5px solid #f43f5e;
    border-radius: 10px;
}

/* Green hero title with glow shadow */
.hero-title-green-glow {
    text-shadow: 0 2px 10px rgba(34, 197, 94, 0.5);
}

/* Stage box - Dark green variant (healing action) */
.stage-box-green-dark {
    background: rgba(29, 185, 84, 0.1);
    border-left: 5px solid #16a34a;
    border-radius: 10px;
}

/* Hermetic section gradient box (purple-gold) */
.hermetic-section-gradient {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.15), rgba(212, 175, 55, 0.6));
    border: 2px solid var(--gold);
    border-radius: 20px;
    padding: 40px 20px;
}

/* Encyclopedia card cyan border */

/* Process grid flexible layout */
.process-grid-flex-280 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Philosophy cross-reference deep purple */
.philosophy-crossref-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(88, 28, 135, 0.1));
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    margin: 40px auto 30px auto;
    max-width: 800px;
    padding: 20px;
}

/* Quote box with rounded corners */
.quote-rounded {
    border-radius: 8px;
}

/* Wisdom quote - larger text for thought/quote boxes */
.wisdom-quote {
    font-size: 1.4em;
    font-style: italic;
    line-height: 1.7;
    text-align: center;
    padding: 25px 30px;
}

.wisdom-quote p {
    font-size: inherit;
    margin: 0;
}

.wisdom-quote .quote-author {
    font-size: 0.85em;
    font-style: normal;
    margin-top: 15px;
    color: var(--gold);
    font-weight: 600;
}

/* Button with left margin spacing */
.btn-ml-10 {
    margin-left: 10px;
}

/* Gradient button purple to gold (archetype) */
.btn-gradient-purple-gold {
    background: linear-gradient(135deg, #9b59b6, #d4af37);
}

/* Section visible (display block) */
.section-visible {
    display: block;
}

/* Analysis box with gold-purple gradient */
.analysis-gradient-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.15));
    border-left: 5px solid #d4af37;
}

/* Hero title with gold glow */
.hero-title-gold-glow {
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
}

/* Hero title with red glow */
.hero-title-red-glow {
    text-shadow: 0 2px 10px rgba(239, 68, 68, 0.5);
}

/* Analysis box variants with color borders */
.analysis-box-purple {
    background: rgba(139, 79, 191, 0.1);
    border-left: 5px solid #d4af37;
    border-radius: 10px;
}

.analysis-box-blue {
    background: rgba(99, 102, 241, 0.1);
    border-left: 5px solid #6366f1;
    border-radius: 10px;
}

.analysis-box-red {
    background: rgba(239, 68, 68, 0.1);
    border-left: 5px solid #ef4444;
    border-radius: 10px;
}

.analysis-box-green {
    background: rgba(34, 197, 94, 0.1);
    border-left: 5px solid #22c55e;
    border-radius: 10px;
}

.analysis-box-orange {
    background: rgba(249, 115, 22, 0.1);
    border-left: 5px solid #f97316;
    border-radius: 10px;
}

.analysis-box-purple-alt {
    background: rgba(192, 132, 250, 0.1);
    border-left: 5px solid #a855f7;
    border-radius: 10px;
}

/* Analogy boxes for quantum physics */
.analogy-box-cyan {
    background: rgba(6, 182, 212, 0.1);
    border-left: 5px solid #06b6d4;
    border-radius: 8px;
}

.analogy-box-purple {
    background: rgba(168, 85, 247, 0.1);
    border-left: 5px solid #a855f7;
}

.analogy-box-green {
    background: rgba(52, 211, 153, 0.1);
    border-left: 5px solid #10b981;
}

.analogy-box-red {
    background: rgba(239, 68, 68, 0.1);
    border-left: 5px solid #ef4444;
}

.analogy-box-red-dark {
    background: rgba(239, 68, 68, 0.15);
    border-left: 5px solid #dc2626;
    border-radius: 8px;
}

/* Hero title orange glow */
.hero-title-orange-glow {
    text-shadow: 0 2px 10px rgba(249, 115, 22, 0.5);
}

/* Dream metadata flex layout */
.dream-meta-flex {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Chaos connection boxes */
.chaos-link-violet {
    border-left: 5px solid #a855f7;
    margin: 30px 20px;
    border-radius: 8px;
}

.chaos-link-blue {
    background: rgba(59, 130, 246, 0.2);
    border-left: 5px solid #3b82f6;
    margin: 30px 20px;
    border-radius: 8px;
}

.chaos-link-fuchsia {
    border-left: 5px solid #d946ef;
    margin: 30px 20px;
    border-radius: 8px;
}

/* Kabbalah boxes */
.kabbalah-box-dark {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

.kabbalah-box-dashed {
    background: rgba(0, 0, 0, 0.6);
    border: 2px dashed #666;
    border-radius: 10px;
}

.kabbalah-box-amber {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 3px solid #fbbf24;
}

.kabbalah-box-gold-border {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #fbbf24;
    border-radius: 10px;
}

/* Negentropy mirror utilities */
.font-half {
    font-size: 0.5em;
}


.bg-pink-intense {
    background: rgba(236, 72, 153, 0.6);
}

.negentropy-gradient {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 79, 191, 0.6));
    padding: 40px;
    border-radius: 20px;
}


/* Text centering narrow */
.text-centered-narrow {
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}

/* Quote with gold border */
.quote-gold-border {
    border-left: 3px solid var(--gold);
    padding-left: 15px;
}

/* Position utilities */
.pos-relative-z1 {
    position: relative;
    z-index: 1;
}

/* Paragraph indentation */
.p-indent-20 {
    margin-left: 20px;
}

/* Hero description narrow */
.hero-desc-narrow {
    color: #e0e0e0;
    max-width: 900px;
    margin: 0 auto;
}

/* Margin utilities */
.mt-20-only {
    margin: 20px 0 0 0;
}

/* Encyclopedia card green variant */
.encyclopedia-card-green {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}

/* Subtitle modern */
.subtitle-modern {
    font-size: 1.5rem;
}

/* Font size utilities */
.font-1-05 {
    font-size: 1.05rem;
}


/* Defense intro box */
.defense-intro-box {
    background: rgba(0, 0, 0, 0.6);
}

/* Crossref boxes - Frequency cyan */
.crossref-box-frequency {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(6, 182, 212, 0.1));
    border-left: 4px solid #06b6d4;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Crossref boxes - Evolution purple */
.crossref-box-evolution {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
    border-left: 4px solid #a855f7;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Defense card title */
.defense-title {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

/* Danger box red border */
.danger-box-red {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border-left: 5px solid #ff6b6b;
}

/* Multiverse boxes */
.multiverse-box-cyan {
    background: rgba(6, 182, 212, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin-bottom: 40px;
}

.multiverse-box-green {
    background: rgba(16, 185, 129, 0.6);
    border-radius: 15px;
    border-left: 5px solid #10b981;
}

.multiverse-box-red {
    background: rgba(239, 68, 68, 0.6);
    border-radius: 15px;
    border-left: 5px solid #ef4444;
}

.multiverse-gradient-master {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(6, 182, 212, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

.multiverse-box-dark {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
    margin: 40px 0;
}

.multiverse-box-purple {
    border-radius: 15px;
    margin: 40px 0;
}

.multiverse-box-gold-center {
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

/* Hero title purple glow */
.hero-title-purple-glow { text-shadow: 0 2px 10px rgba(168, 85, 247, 0.5); }

/* Border bottom purple */
.border-bottom-purple { border-bottom: 2px solid #a855f7; }

/* Blockquote purple */

/* Related section purple container */
.related-section-purple { 
    background: rgba(168, 85, 247, 0.15); 
    border: 2px solid #a855f7; 
    border-radius: 20px; 
    padding: 40px 20px; 
}

/* Chaos link boxes */
.chaos-link-red { border-left: 5px solid #ef4444; border-radius: 8px; }

/* Table row borders */
.tr-border-gold-thick { border-bottom: 2px solid #d4af37; }
.tr-border-gold-thin { border-bottom: 1px solid rgba(212, 175, 55, 0.3); }

/* Test suite hero gradient */
.test-hero-gradient { 
    background: linear-gradient(135deg, #8b1a1a, #2e0a0a); 
    border-bottom: 3px solid var(--gold); 
}

/* Test grid summary layout */
.test-grid-summary { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 20px; 
}

/* Stats grid layout */
.stats-grid-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Display utilities */
.display-block { display: block; }

/* Filter button container */
.btn-filter-flex {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Padding utilities */
.p-60 { padding: 60px; }

/* Grid utilities */
.grid-col-full { grid-column: 1/-1; }

/* DNA specific boxes */
.dna-definition-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.15));
    border-left: 5px solid #3b82f6;
    border-radius: 12px;
    margin-bottom: 40px;
}

.dna-antenna-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.05));
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 15px;
}

/* Entropie-Kristus specific styles */ .border-magenta { border-color: #8b008b; }
.blockquote-magenta { border-left: 4px solid #8b008b; }
.border-crimson { border-color: #dc143c; }
.border-left-crimson { border-left-color: #dc143c; }
.encyclopedia-card-crimson-dark { 
    border-color: #dc143c; 
    background: rgba(0, 0, 0, 0.6); 
}
.border-gold-var { border-color: var(--gold); }
.font-style-normal { font-style: normal; }

/* Parasites-hosts specific styles */
.danger-box-red-border {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border: 2px solid #e74c3c;
}

.intro-text-centered {
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.8;
}

/* Crossref boxes - Archetype purple-pink */
.crossref-box-archetype {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1));
    border-left: 4px solid #8b5cf6;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Opacity utilities */
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }

/* Spacing utilities (for inline style replacements) */
.mb-05rem { margin-bottom: 0.5rem; }
.mt-05rem { margin-top: 0.5rem; }.ml-10px { margin-left: 10px; }

/* Padding utilities */  
.p-5-10 { padding: 5px 10px; }
.p-1rem { padding: 1rem; }
.pl-1rem { padding-left: 1rem; }

/* Border radius utilities */
.rounded-5 { border-radius: 5px; }

/* Border utilities */
.border-left-vortex-purple { border-left: 4px solid #8b5cf6; }

/* Background utilities */
.bg-gold-60 { background: rgba(212, 175, 55, 0.6); }
.bg-danger-60 { background: rgba(231, 76, 60, 0.6); }

/* Display utilities */
.inline-block { display: inline-block; }
.block { display: block; }
.grid { display: grid; }
/* Grid utilities */
.grid-cols-2 { grid-template-columns: 1fr 1fr; }
.grid-auto-fit-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gap-1rem { gap: 1rem; }
.gap-15px { gap: 15px; }

/* Font size utilities */
.font-2-5em { font-size: 2.5em; }
.font-1-5em { font-size: 1.5em; }

/* Margin utilities */
.mb-10px { margin-bottom: 10px; }
.my-10px { margin: 10px 0; }

/* Analogy boxes */


.analogy-box-purple-rounded {
    background: rgba(168, 85, 247, 0.15);
    border-left: 5px solid #a855f7;
    margin: 25px 0;
    border-radius: 8px;
}

.analogy-box-blue {
    background: transparent;
    border-left: 5px solid #3b82f6;
    margin: 25px 0;
}


.analogy-box-emerald {
    background: rgba(34, 197, 94, 0.1);
    border-left: 5px solid #22c55e;
    margin: 25px 0;
}

/* Systems Theory Boxes */
.systems-intro-box {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(26, 26, 46, 0.9));
    border-left: 5px solid var(--gold);
    border-radius: 15px;
    margin-bottom: 3rem;
}

.systems-conclusion-box {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.6), rgba(26, 26, 46, 0.95));
    border: 3px solid var(--gold);
    border-radius: 15px;
    margin-top: 4rem;
}

.insight-box-gold {
    border: 2px solid var(--gold);
    border-radius: 10px;
    margin-top: 1.5rem;
}

.warning-box-dark-red {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid #ef4444;
    padding: 20px;
    margin-bottom: 1.5rem;
}

.warning-box-dark-gold {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border-left: 5px solid var(--gold);
    padding: 20px;
    margin-bottom: 1.5rem;
}

/* Section Headers */
.section-header-underline {
    border-bottom: 2px solid rgba(212, 175, 55, 0.6);
    padding-bottom: 10px;
    margin-bottom: 2rem;
}

/* Border Radius Utilities */

/* Small Margin Utilities */
.mt-8px {
    margin-top: 8px;
}

/* Text Color Utilities */
.text-light-70 {
    color: rgba(255, 255, 255, 0.7);
}

/* Crossref Box - Philosophy */
.crossref-box-philosophy {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(88, 28, 135, 0.1));
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
    margin: 40px 20px 30px 20px;
    max-width: 800px;
}

/* Encyclopedia Card Variants */
.encyclopedia-card-purple-60 {
    background: rgba(139, 92, 246, 0.6);
    border-color: #8b5cf6;
}

.encyclopedia-card-indigo-60 {
    background: rgba(99, 102, 241, 0.6);
    border-color: #6366f1;
}

/* Border Left Color Utilities */
.border-left-color-purple {
    border-left-color: #8b5cf6;
}

.border-left-color-pink {
    border-left-color: #ec4899;
}

.border-left-color-blue {
    border-left-color: #3b82f6;
}

/* Marketing Magic Boxes */
.intro-box-purple-dark {
    background: rgba(74, 44, 94, 0.1);
    border-left: 5px solid #8b1a1a;
    border-radius: 5px;
}

.intro-box-purple-light {
    background: rgba(74, 44, 94, 0.05);
    border-left: 5px solid #8b1a1a;
    border-radius: 5px;
}

.section-box-gold-light {
    background: rgba(212, 175, 55, 0.05);
    border-radius: 10px;
}

/* Meditation Boxes */
.meditation-intro-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

.meditation-tips-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.6), rgba(139, 92, 246, 0.6));
    padding: 40px;
    border-radius: 20px;
    margin: 50px 0;
    border: 2px solid var(--gold);
}

/* Index Page Specific */
.recommended-pages-box {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    border: 2px solid var(--gold);
    text-align: center;
}


/* SVG Utilities */
.svg-wheel {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

/* Width percentage utilities (for progress meters/bars) */
.w-25 { width: 25%; }
.w-40 { width: 40%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-85 { width: 85%; }

/* Flexbox utilities */
.flex-center-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Gap utilities */
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }

/* Tag padding */
.tag-padding {
    padding: 5px 12px;
}

/* Back to top button */
.back-to-top-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, var(--primary-purple), var(--secondary-purple));
    border-radius: 10px;
    border: 2px solid var(--gold);
    transition: all 0.3s;
}
.back-to-top-btn:hover {
    transform: scale(1.05);
}

/* Test result boxes */
.test-result-box {
    background: #1a1a2e;
    border-radius: 5px;
}
.test-summary-box {
    background: #2a2a3e;
    border-left: 5px solid #d4af37;
}

/* Grid utilities */

/* Margin Utilities */
.mt-60 {
    margin-top: 60px;
}

/* Animation utilities */
.animation-fade-in {
    animation: fadeIn 0.8s ease-out;
}

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

/* Opacity utilities */
.opacity-1 {
    opacity: 1 !important;
}
.opacity-06 {
    opacity: 0.6 !important;
}

/* Button state classes */
.btn-active-gold {
    background: linear-gradient(135deg, var(--gold), #f1d98f) !important;
    color: #1a1a2e !important;
}
.btn-inactive-dark {
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--text-light) !important;
}

/* Debug and cursor utilities */
.debug-log-line {
    color: #00ff00;
    word-break: break-word;
    line-height: 1.3;
}
.cursor-grab {
    cursor: grab !important;
}
.cursor-zoom-in {
    cursor: zoom-in !important;
}
.cursor-zoom-out {
    cursor: zoom-out !important;
}

/* Font and margin utilities */
.font-1-1em {
    font-size: 1.1em !important;
}
.margin-15-0 {
    margin: 15px 0 !important;
}

/* Highlight effects */
.reflection-highlight {
    background: rgba(6, 182, 212, 0.15) !important;
    transition: background 0.5s ease;
}

/* ==================================================== 
   TAROT-SPECIFIC STYLES 
   ==================================================== */
.tarot-hero {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.6),
        rgba(124, 58, 237, 0.6),
        rgba(109, 40, 217, 0.6));
    padding: 60px 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
}

.tarot-hero h1 {
    color: var(--gold);
    font-size: 3em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.tarot-intro {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #a855f7;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
}

.tarot-section {
    margin: 50px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(124, 58, 237, 0.6));
    border-radius: 15px;
    border: 2px solid #a855f7;
}

.section-header h2 {
    color: var(--gold);
    font-size: 2.5em;
    margin-bottom: 10px;
}

.section-header p {
    color: var(--text-light);
    font-size: 1.2em;
}

.tarot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.tarot-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #a855f7;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tarot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a855f7, #d946ef, #a855f7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tarot-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: var(--gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.tarot-card:hover::before {
    opacity: 1;
}

.card-number {
    font-size: 3em;
    font-weight: bold;
    color: #a855f7;
    margin-bottom: 10px;
    text-align: center;
}

.card-name {
    font-size: 1.6em;
    color: var(--gold);
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

.card-keywords {
    color: #c4b5fd;
    font-style: italic;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.95em;
}

.card-meaning {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.card-reversed {
    color: #fbbf24;
    font-size: 0.9em;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    border-left: 3px solid #fbbf24;
}

.card-correspondence {
    color: var(--text-gray);
    font-size: 0.85em;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.suit-wands { border-left-color: #ef4444; }
.suit-cups { border-left-color: #3b82f6; }
.suit-swords { border-left-color: #fbbf24; }
.suit-pentacles { border-left-color: #22c55e; }

.court-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(0, 0, 0, 0.6));
}

.reading-method {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #a855f7;
    padding: 25px;
    border-radius: 10px;
    margin: 20px 0;
}

.reading-method h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.spread-positions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.position {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #a855f7;
}

.position-number {
    color: var(--gold);
    font-weight: bold;
    font-size: 1.2em;
}

/* ==================================================== 
   CHINESE MEDICINE SPECIFIC STYLES 
   ==================================================== */
.tcm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.tcm-card {
    background: linear-gradient(135deg, 
        rgba(124, 45, 18, 0.6),
        rgba(153, 27, 27, 0.6));
    border-left: 5px solid #ef4444;
    border-radius: 15px;
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tcm-card::before {
    content: '☯';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 140px;
    opacity: 0.08;
}

.tcm-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #fca5a5;
    box-shadow: 0 15px 45px rgba(239, 68, 68, 0.5);
}

.tcm-card h3 {
    color: #fca5a5;
    font-size: 1.7em;
    margin-bottom: 12px;
}

.element-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 5px 5px 12px 0;
}

.element-badge.wood { background: #10b981; color: white; }
.element-badge.fire { background: #ef4444; color: white; }
.element-badge.earth { background: #d97706; color: white; }
.element-badge.metal { background: #94a3b8; color: white; }
.element-badge.water { background: #3b82f6; color: white; }

.five-elements-diagram {
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid #ef4444;
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    position: relative;
}

.pentagram-container {
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    position: relative;
    aspect-ratio: 1;
}

.element-point {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid;
}

.element-point:hover {
    transform: scale(1.15);
    box-shadow: 0 0 30px currentColor;
}

.element-point.wood {
    top: 0%; left: 50%; transform: translate(-50%, -50%);
    background: #10b981; border-color: #34d399;
}

.element-point.fire {
    top: 30%; right: 0%; transform: translate(0%, -50%);
    background: #ef4444; border-color: #fca5a5;
}

.element-point.earth {
    bottom: 0%; left: 50%; transform: translate(-50%, 50%);
    background: #d97706; border-color: #fbbf24;
}

.element-point.metal {
    top: 30%; left: 0%; transform: translate(-100%, -50%);
    background: #94a3b8; border-color: #cbd5e1;
}

.element-point.water {
    bottom: 35%; left: 50%; transform: translate(-50%, 50%);
    background: #3b82f6; border-color: #60a5fa;
}

.element-label {
    font-size: 0.4em;
    color: white;
    font-weight: bold;
    margin-top: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.meridian-map {
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.6), rgba(239, 68, 68, 0.6));
    border: 2px solid #ef4444;
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
}

.meridian-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.meridian-item {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #ef4444;
    transition: all 0.3s ease;
}

.meridian-item:hover {
    transform: translateX(8px);
    border-left-color: #fca5a5;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.6);
}

.principle-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(124, 45, 18, 0.6));
    border: 2px solid #fca5a5;
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
}

.yin-yang-visual {
    width: 200px;
    height: 200px;
    margin: 30px auto;
    background: conic-gradient(
        from 0deg,
        black 0deg 180deg,
        white 180deg 360deg
    );
    border-radius: 50%;
    border: 5px solid #ef4444;
    position: relative;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

.comparison-table th {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(124, 45, 18, 0.6));
    color: #fca5a5;
    padding: 15px;
    text-align: left;
    font-weight: bold;
}

.comparison-table td {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--text-light);
}

.comparison-table tr:hover {
    background: rgba(239, 68, 68, 0.15);
}

.connection-links {
    display: flex;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.connection-links a {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.connection-links a:hover {
    background: rgba(239, 68, 68, 0.6);
    border-color: #fca5a5;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.6);
}

/* ==================================================== 
   KABBALAH SPECIFIC STYLES 
   ==================================================== */
.kabbalah-hero {
    background: linear-gradient(135deg, 
        rgba(251, 191, 36, 0.6),
        rgba(217, 119, 6, 0.6),
        rgba(180, 83, 9, 0.6));
    padding: 60px 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
}

.kabbalah-hero h1 {
    color: var(--gold);
    font-size: 3em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.kabbalah-intro {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #fbbf24;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
}

.tree-section {
    margin: 50px 0;
}

.sephirot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.sephira-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #fbbf24;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.sephira-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: var(--gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.sephira-number {
    font-size: 2.5em;
    font-weight: bold;
    color: #fbbf24;
    text-align: center;
    margin-bottom: 10px;
}

.sephira-name {
    font-size: 1.8em;
    color: var(--gold);
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

.sephira-hebrew {
    text-align: center;
    font-size: 1.3em;
    color: #fbbf24;
    margin-bottom: 15px;
    font-style: italic;
}

.sephira-meaning {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.sephira-correspondences {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 0.9em;
    color: var(--text-gray);
    border-left: 3px solid #fbbf24;
}

.pillar {
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.pillar-severity {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(0, 0, 0, 0.6));
    border-left: 5px solid #ef4444;
}

.pillar-mercy {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(0, 0, 0, 0.6));
    border-left: 5px solid #3b82f6;
}

.pillar-equilibrium {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(0, 0, 0, 0.6));
    border-left: 5px solid #fbbf24;
}

.four-worlds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.world-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #fbbf24;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.world-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.tree-visualization {
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--gold);
    border-radius: 15px;
    padding: 40px;
    margin: 40px auto;
    max-width: 800px;
    text-align: center;
}

.tree-ascii {
    font-family: 'Courier New', monospace;
    color: #fbbf24;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre;
    overflow-x: auto;
}

/* ==================================================== 
   SECRET SOCIETIES SPECIFIC STYLES 
   ==================================================== */
.societies-hero {
    background: linear-gradient(135deg, 
        rgba(220, 38, 38, 0.6),
        rgba(153, 27, 27, 0.6),
        rgba(127, 29, 29, 0.6));
    padding: 60px 20px;
    text-align: center;
    border-bottom: 3px solid #ef4444;
}

.societies-hero h1 {
    color: #fca5a5;
    font-size: 3em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.societies-intro {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #ef4444;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
}

.societies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.society-card {
    background: rgba(0, 0, 0, 0.7);
    border-left: 5px solid #ef4444;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.society-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #fca5a5;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6);
}

.society-symbol {
    font-size: 3.5em;
    text-align: center;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6));
}

.society-name {
    font-size: 1.8em;
    color: #fca5a5;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

.society-subtitle {
    color: #dc2626;
    text-align: center;
    font-style: italic;
    margin-bottom: 15px;
    font-size: 0.95em;
}

.degree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.degree-badge {
    background: rgba(220, 38, 38, 0.6);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #ef4444;
    transition: all 0.3s ease;
}

.degree-badge:hover {
    background: rgba(239, 68, 68, 0.6);
    transform: scale(1.05);
}

.truth-level {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #dc2626;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.truth-level strong {
    color: #fca5a5;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.example-card {
    background: rgba(220, 38, 38, 0.6);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ef4444;
    text-align: center;
    transition: all 0.3s ease;
}

.example-card:hover {
    background: rgba(239, 68, 68, 0.6);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.6);
}

/* ==================================================== 
   AYURVEDA SPECIFIC STYLES 
   ==================================================== */
.dosha-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.dosha-card {
    background: linear-gradient(135deg, 
        rgba(113, 63, 18, 0.6),
        rgba(146, 64, 14, 0.6));
    border-left: 5px solid #f59e0b;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dosha-card.vata {
    border-left-color: #60a5fa;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(29, 78, 216, 0.6));
}

.dosha-card.pitta {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(220, 38, 38, 0.6));
}

.dosha-card.kapha {
    border-left-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(6, 95, 70, 0.6));
}

.dosha-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.5);
}

.dosha-card h3 {
    font-size: 2em;
    margin-bottom: 15px;
}

.dosha-card.vata h3 { color: #93c5fd; }
.dosha-card.pitta h3 { color: #fca5a5; }
.dosha-card.kapha h3 { color: #6ee7b7; }

.element-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.element-tag {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
}

.element-tag.air { background: #bfdbfe; color: #1e40af; }
.element-tag.space { background: #ddd6fe; color: #5b21b6; }
.element-tag.fire { background: #fecaca; color: #991b1b; }
.element-tag.water { background: #a7f3d0; color: #065f46; }
.element-tag.earth { background: #fde68a; color: #78350f; }

.prakriti-quiz, .treatment-grid, .taste-wheel {
    /* Ayurveda-specific elements */
}

/* ==================================================== 
   NUMEROLOGY SPECIFIC STYLES 
   ==================================================== */
.numerology-hero {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.6),
        rgba(99, 102, 241, 0.6),
        rgba(79, 70, 229, 0.6));
    padding: 60px 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
}

.numerology-hero h1 {
    color: var(--gold);
    font-size: 3em;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.numerology-intro {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #8b5cf6;
    padding: 25px;
    margin: 30px 0;
    border-radius: 10px;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.number-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #8b5cf6;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.number-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: var(--gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.number-value {
    font-size: 4em;
    font-weight: bold;
    color: #8b5cf6;
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.number-name {
    font-size: 1.6em;
    color: var(--gold);
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

.number-keywords {
    color: #c4b5fd;
    font-style: italic;
    margin-bottom: 15px;
    text-align: center;
    font-size: 0.95em;
}

.number-meaning {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 15px;
}

.master-number {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.6), rgba(0, 0, 0, 0.6));
    border-left-color: #fbbf24;
}

.master-number .number-value {
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

.number-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.type-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #8b5cf6;
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.type-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6);
}

/* ==================================================== 
   EXPERIMENTS SPECIFIC STYLES (Scientific experiments)
   ==================================================== */
.experiment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.experiment-card {
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.6),
        rgba(30, 64, 175, 0.6));
    border-left: 5px solid #3b82f6;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.experiment-card::before {
    content: '🔬';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 140px;
    opacity: 0.08;
}

.experiment-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #93c5fd;
    box-shadow: 0 15px 45px rgba(59, 130, 246, 0.5);
}

.experiment-card h3 {
    color: #93c5fd;
    font-size: 1.8em;
    margin-bottom: 15px;
}

.year-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    color: #bfdbfe;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 12px;
}

.scientist-name {
    color: #60a5fa;
    font-weight: bold;
    font-size: 1.1em;
    margin: 10px 0;
}

.experiment-details {
    background: rgba(0, 0, 0, 0.5);
    border-left: 3px solid #3b82f6;
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
}

.experiment-details h4 {
    color: #93c5fd;
    margin-bottom: 12px;
}

.result-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(59, 130, 246, 0.6));
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.result-box h4 {
    color: #6ee7b7;
    margin-bottom: 10px;
}

.paradigm-shift {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.paradigm-shift h4 {
    color: #fca5a5;
    margin-bottom: 10px;
}

.category-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: bold;
    margin: 5px 5px 12px 0;
}

.category-badge.physics { background: #3b82f6; color: white; }
.category-badge.biology { background: #10b981; color: white; }
.category-badge.chemistry { background: #f59e0b; color: white; }
.category-badge.psychology { background: #8b5cf6; color: white; }
.category-badge.consciousness { background: #ec4899; color: white; }

.timeline-section {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #3b82f6;
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
}

.timeline-item {
    position: relative;
    padding-left: 40px;
    margin: 30px 0;
    border-left: 3px solid #3b82f6;
}

.timeline-item::before {
    content: '●';
    position: absolute;
    left: -9px;
    top: 0;
    color: #3b82f6;
    font-size: 1.5em;
}

.timeline-item h4 {
    color: #93c5fd;
    font-size: 1.3em;
    margin-bottom: 8px;
}

.controversial-badge {
    background: #ef4444;
    color: white;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 10px;
}

/* ==================================================== 
   LUNAR NODES SPECIFIC STYLES 
   ==================================================== */
.nodes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 2rem 0;
}

.node-north {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.6), rgba(16, 185, 129, 0.6));
    border-left: 5px solid #22c55e;
    padding: 30px;
    border-radius: 10px;
}

.node-south {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(220, 38, 38, 0.6));
    border-left: 5px solid #ef4444;
    padding: 30px;
    border-radius: 10px;
}

.node-symbol {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 20px;
}

.axis-diagram {
    width: 100%;
    max-width: 600px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.axis-line {
    position: absolute;
    width: 80%;
    height: 3px;
    background: linear-gradient(to right, #ef4444, var(--gold), #22c55e);
    transform: rotate(-15deg);
}

.node-point {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    border: 3px solid;
}

.node-north-point {
    right: 10%;
    top: 20%;
    background: rgba(0, 0, 0, 0.6);
    border-color: #22c55e;
    color: #22c55e;
}

.node-south-point {
    left: 10%;
    bottom: 20%;
    background: rgba(0, 0, 0, 0.6);
    border-color: #ef4444;
    color: #ef4444;
}

.sign-interpretation {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin: 20px 0;
    border-radius: 10px;
}

.house-interpretation {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #06b6d4;
    padding: 25px;
    margin: 20px 0;
    border-radius: 10px;
}

.calculator-nodes {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 30px;
    margin: 2rem 0;
    border-radius: 10px;
}


/* ==================================================== 
   PLANETS SPECIFIC STYLES 
   ==================================================== */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.planet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.planet-card {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.6),
        rgba(29, 78, 216, 0.6));
    border: 2px solid;
    border-radius: 20px;
    padding: 35px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.planet-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.planet-card:hover::before {
    opacity: 1;
}

.planet-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px currentColor;
}

.planet-symbol {
    font-size: 5em;
    text-align: center;
    margin: 20px 0;
    filter: drop-shadow(0 0 20px currentColor);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.planet-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.info-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    border-left: 3px solid currentColor;
}

/* Planet-specific color variants */
.sun-card { border-color: #fbbf24; color: #fde68a; }
.moon-card { border-color: #cbd5e1; color: #f1f5f9; }
.mercury-card { border-color: #a3e635; color: #d9f99d; }
.venus-card { border-color: #f472b6; color: #fbcfe8; }
.mars-card { border-color: #ef4444; color: #fca5a5; }
.jupiter-card { border-color: #fb923c; color: #fed7aa; }
.saturn-card { border-color: #6366f1; color: #a5b4fc; }
.uranus-card { border-color: #06b6d4; color: #67e8f9; }
.neptune-card { border-color: #8b5cf6; color: #c4b5fd; }
.pluto-card { border-color: #dc2626; color: #fca5a5; }


/* ==================================================== 
   NETWORK GRAPH SPECIFIC STYLES (Interactive D3.js) - 537 lines
   ==================================================== */
#graph-canvas-wrapper {
    position: relative;
    width: 100%;
    overflow: auto;
    border-radius: 12px;
    min-height: 600px;
}

/* Controls Panel */
.controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 25px;
    background: rgba(74, 44, 94, 0.3);
    border: 2px solid var(--gold);
    border-radius: 12px;
    margin-bottom: 20px;
    width: 100%;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group label {
    color: var(--gold);
    font-weight: bold;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.control-group select,
.control-group input[type="range"] {
    background: rgba(0, 0, 0, 0.4);
    color: #e0e0e0;
    border: 1px solid var(--gold);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: inherit;
}

.control-group select:focus,
.control-group input[type="range"]:focus {
    outline: none;
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--light-gold);
}

.control-group span {
    color: #a0a0a0;
    font-size: 0.9em;
}

/* Graph Canvas */
#graph-canvas {
    width: 100% !important;
    height: 800px;
    border: 2px solid var(--gold);
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.8);
    display: block;
    margin: 0;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    overflow: visible;
}

#graph-canvas:active {
    cursor: grabbing;
}

/* D3 SVG Links and Nodes */
.link {
    stroke: rgba(212, 175, 55, 0.4);
    stroke-width: 1.5;
    opacity: 0.6;
}

.link:hover {
    opacity: 1;
    stroke-width: 2.5;
}

.node {
    cursor: pointer;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3));
    transition: filter 0.2s;
}

.node:hover {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8));
}

.node-label {
    fill: var(--gold);
    font-size: 11px;
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Legend */
.legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 20px;
    background: rgba(74, 44, 94, 0.3);
    border: 2px solid var(--gold);
    border-radius: 12px;
    margin: 20px 0;
    width: 100%;
}

.legend .encyclopedia-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    transition: all 0.2s;
}

.legend .encyclopedia-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold);
    cursor: pointer;
}

.legend-card.active {
    background: rgba(212, 175, 55, 0.25) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5) !important;
    transform: scale(1.05);
}

.legend-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}

/* Statistics Panel */
.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    padding: 0;
    margin: 20px 0;
    width: 100%;
}

.stats-panel .encyclopedia-card {
    text-align: center;
    padding: 25px 20px;
    background: rgba(74, 44, 94, 0.3);
    border: 2px solid var(--gold);
    border-radius: 10px;
    transition: all 0.3s;
}

.stats-panel .encyclopedia-card:hover {
    background: rgba(212, 175, 55, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
}

.stat-number {
    display: block;
    font-size: 2.2em;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 8px;
}

.stat-label {
    display: block;
    font-size: 0.9em;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info Panel */
.info-panel {
    position: fixed;
    width: 360px;
    max-height: 500px;
    background: rgba(26, 26, 46, 0.98);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    overflow-y: auto;
    z-index: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: none;
}

.info-panel.active {
    display: block;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.info-panel h3 {
    color: var(--gold);
    margin: 0 0 15px 0;
    font-size: 1.3em;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    word-break: break-word;
}

.info-panel p {
    color: #a0a0a0;
    margin: 10px 0;
    line-height: 1.5;
}

.info-panel #connections {
    margin-top: 15px;
    max-height: 350px;
    overflow-y: auto;
}

.info-panel .encyclopedia-card {
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--gold);
    padding: 12px;
}

.connection-type {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    display: inline-block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.8em;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    transform: scale(1.2);
    color: var(--light-gold);
}

/* Loading Spinner */
.spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 26, 46, 0.98);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    z-index: 2000;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.spinner.active {
    display: block;
}

.spinner-circle {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

.spinner p {
    color: var(--gold);
    margin: 0;
    font-size: 1.1em;
}

/* Info Panel Scrollbar styling */
.info-panel::-webkit-scrollbar {
    width: 8px;
}

.info-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.info-panel::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 10px;
    cursor: pointer;
}

/* Network Graph Responsive Design */
@media (max-width: 1280px) {
    .info-panel {
        width: 320px;
    }
}


/* ==================================================== 
   QUANTUM PHYSICS RULES SPECIFIC STYLES - 366 lines
   ==================================================== */

/* Motto animace - "Vše je jedno" se objevuje v pozadí */
body.quantum::before {
    content: "Vše je jedno • Vše se vším souvisí • Vše je nic • Nic je vše";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: bold;
    color: rgba(6, 182, 212, 0.05);
    text-align: center;
    width: 90%;
    line-height: 1.4;
    z-index: 0;
    pointer-events: none;
    white-space: pre-wrap;
    animation: float 20s ease-in-out infinite;
}

.motto-highlight {
    color: var(--science-accent);
    font-style: italic;
    font-size: 1.1em;
    margin-top: 20px;
    padding: 15px;
    border-left: 4px solid var(--gold);
    background: rgba(6, 182, 212, 0.1);
    display: inline-block;
}

.section-intro {
    background: rgba(12, 74, 110, 0.4);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin: 40px 0;
    border-radius: 8px;
}

.section-intro p {
    color: var(--text-light);
    font-size: 1.1em;
    line-height: 1.8;
    margin: 0;
}

h2.section-title {
    color: var(--science-accent);
    font-size: 2.2rem;
    margin: 50px 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--science-accent);
    position: relative;
    z-index: 1;
}

h3.subsection-title {
    color: var(--gold);
    font-size: 1.5rem;
    margin: 30px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.analogy-box {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.1));
    border: 2px solid var(--science-accent);
    border-radius: 12px;
    padding: 30px;
    margin: 25px 0;
    position: relative;
    z-index: 1;
}

.analogy-box h4 {
    color: var(--gold);
    font-size: 1.2rem;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.analogy-box p {
    color: var(--text-light);
    line-height: 1.8;
    font-style: italic;
    margin: 15px 0;
}

.quote-block {
    border-left: 4px solid var(--gold);
    padding: 20px;
    margin: 20px 0;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    font-size: 1.05em;
    line-height: 1.8;
}

.connection-tag {
    display: inline-block;
    background: rgba(6, 182, 212, 0.3);
    color: var(--science-accent);
    padding: 8px 15px;
    border-radius: 20px;
    margin: 5px 5px 5px 0;
    font-size: 0.9em;
    border: 1px solid var(--science-accent);
    transition: all 0.3s ease;
}

.connection-tag:hover {
    background: rgba(212, 175, 55, 0.3);
    color: var(--gold);
    border-color: var(--gold);
    transform: scale(1.05);
}

.measurement-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(12, 74, 110, 0.3);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.measurement-table th,
.measurement-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
}

.measurement-table th {
    background: rgba(6, 182, 212, 0.3);
    color: var(--gold);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.measurement-table td {
    color: var(--text-light);
}

.measurement-table tr:hover {
    background: rgba(6, 182, 212, 0.15);
}

.family-dialog {
    background: rgba(12, 74, 110, 0.4);
    border: 2px solid var(--science-accent);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
    position: relative;
    z-index: 1;
}

.family-member {
    margin: 20px 0;
    padding: 15px;
    background: rgba(6, 182, 212, 0.1);
    border-left: 4px solid var(--science-accent);
    border-radius: 4px;
}

.family-member-name {
    color: var(--gold);
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.family-member-role {
    color: var(--science-accent);
    font-size: 0.85em;
    font-style: italic;
    margin-bottom: 10px;
}

.family-member-text {
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.unity-indicator {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.2), rgba(212, 175, 55, 0.2));
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    color: var(--science-accent);
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.reflection-section {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(212, 175, 55, 0.1));
    border: 2px dashed var(--science-accent);
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    position: relative;
    z-index: 1;
}

.reflection-section h4 {
    color: var(--gold);
    font-size: 1.2rem;
    margin-top: 0;
}

.reflection-item {
    margin: 15px 0;
    padding-left: 20px;
    border-left: 3px solid var(--science-accent);
    color: var(--text-light);
    line-height: 1.7;
}

.connected-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    position: relative;
    z-index: 1;
}

.intro-unity {
    font-size: 1.15em;
    color: var(--science-accent);
    font-weight: bold;
    margin: 20px 0;
}

/* ==================================================== 
   CELLULAR CONSCIOUSNESS SPECIFIC STYLES - 284 lines
   ==================================================== */
.consciousness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.consciousness-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #10b981;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.consciousness-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(40%, -40%);
}

.consciousness-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #34d399;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.6);
}

.consciousness-card h3 {
    color: #10b981;
    font-size: 1.6em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.consciousness-card .icon {
    font-size: 1.8em;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.6));
}

.consciousness-card .level-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 10px;
}

.level-badge.cell { background: #10b981; color: #022c22; }
.level-badge.bacteria { background: #3b82f6; color: #0c1844; }
.level-badge.virus { background: #ef4444; color: #450a0a; }
.level-badge.organism { background: #f59e0b; color: #451a03; }
.level-badge.collective { background: #8b5cf6; color: #2e1065; }
.level-badge.quantum { background: #ec4899; color: #831843; }

.consciousness-card p {
    color: #d1fae5;
    line-height: 1.7;
    margin-bottom: 15px;
}

.mechanism-box {
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid #34d399;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
}

.mechanism-box h4 {
    color: #34d399;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.mechanism-box ul {
    list-style: none;
    padding-left: 0;
}

.mechanism-box li {
    color: #a7f3d0;
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.mechanism-box li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #10b981;
}

.connection-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(59, 130, 246, 0.6));
    border: 2px solid #8b5cf6;
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
}

.connection-box h3 {
    color: #a78bfa;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.connection-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.connection-links a {
    background: rgba(0, 0, 0, 0.6);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #8b5cf6;
    color: #c4b5fd;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.connection-links a:hover {
    background: rgba(139, 92, 246, 0.6);
    transform: translateX(5px);
    border-left-color: #a78bfa;
}

.filters {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 12px;
    margin: 30px 0;
    border: 2px solid #10b981;
}

.filters h3 {
    color: #10b981;
    margin-bottom: 15px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.filter-group label {
    color: #d1fae5;
    margin-right: 10px;
    font-weight: bold;
}

.filter-group select {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #10b981;
    color: #d1fae5;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-group select:hover {
    border-color: #34d399;
    background: rgba(16, 185, 129, 0.6);
}

.scientist-quote {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(6, 95, 70, 0.6));
    border-left: 4px solid #10b981;
    padding: 20px;
    margin: 25px 0;
    border-radius: 10px;
    font-style: italic;
    color: #d1fae5;
}

.scientist-quote strong {
    color: #10b981;
    display: block;
    margin-top: 10px;
    font-style: normal;
}

.comparison-table {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    overflow: hidden;
    margin: 30px 0;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    background: rgba(16, 185, 129, 0.6);
    color: #10b981;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #10b981;
}

.comparison-table td {
    padding: 15px;
    color: #d1fae5;
    border-bottom: 1px solid rgba(16, 185, 129, 0.6);
}

.comparison-table tr:hover {
    background: rgba(16, 185, 129, 0.6);
}


/* ==================================================== 
   DREAM JOURNAL SPECIFIC STYLES - 266 lines
   ==================================================== */
.journal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.journal-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.6));
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 2px solid rgba(139, 92, 246, 0.6);
}

.dream-form {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 2px solid rgba(139, 92, 246, 0.6);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.6);
    border-radius: 8px;
    min-height: 45px;
}

.tag {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 12px;
    border-radius: 20px;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tag-remove {
    cursor: pointer;
    color: #ef4444;
    font-weight: bold;
}

.tag-remove:hover {
    color: #dc2626;
}

.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.dream-entry {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    border-left: 5px solid #8b5cf6;
    transition: all 0.3s;
}

.dream-entry:hover {
    transform: translateX(5px);
    border-left-color: var(--gold);
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.6);
}

.dream-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.dream-title {
    color: var(--gold);
    font-size: 1.5em;
    margin: 0;
}

.dream-meta {
    display: flex;
    gap: 15px;
    color: var(--text-gray);
    font-size: 0.9em;
    flex-wrap: wrap;
}

.dream-type-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
}

.type-lucid { background: rgba(0, 0, 0, 0.6); color: #22c55e; }
.type-nightmare { background: rgba(0, 0, 0, 0.6); color: #ef4444; }
.type-prophetic { background: rgba(0, 0, 0, 0.6); color: #a855f7; }
.type-recurring { background: rgba(0, 0, 0, 0.6); color: #fbbf24; }
.type-normal { background: rgba(0, 0, 0, 0.6); color: #6366f1; }

.dream-content {
    line-height: 1.8;
    margin: 15px 0;
}

.dream-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.dream-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.dream-actions button {
    padding: 8px 16px;
    font-size: 0.9em;
}

.filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: end;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-gray);
}

.empty-state .icon {
    font-size: 4em;
    margin-bottom: 20px;
}


/* ==================================================== 
   VERTEBRAE SPECIFIC STYLES - 250 lines
   ==================================================== */
.spine-visualization {
    max-width: 1200px;
    margin: 40px auto;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #8b5cf6;
    border-radius: 15px;
    padding: 30px;
}

.spine-ascii {
    font-family: monospace;
    color: #a78bfa;
    font-size: 0.85em;
    line-height: 1.3;
    white-space: pre;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

.vertebrae-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.vertebra-card {
    background: linear-gradient(135deg, 
        rgba(76, 29, 149, 0.6),
        rgba(91, 33, 182, 0.6));
    border-left: 5px solid #8b5cf6;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.vertebra-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.vertebra-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #a78bfa;
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
}

.vertebra-card h3 {
    color: #a78bfa;
    font-size: 1.6em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vertebra-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 5px 5px 10px 0;
}

.vertebra-badge.cervical { background: #8b5cf6; color: white; }
.vertebra-badge.thoracic { background: #3b82f6; color: white; }
.vertebra-badge.lumbar { background: #10b981; color: white; }
.vertebra-badge.sacral { background: #f59e0b; color: #451a03; }
.vertebra-badge.coccyx { background: #ef4444; color: white; }

.chakra-connection {
    background: rgba(139, 92, 246, 0.6);
    border-left: 3px solid #a78bfa;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
}

.chakra-connection h4 {
    color: #a78bfa;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.organ-list {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.organ-list h4 {
    color: #c4b5fd;
    margin-bottom: 10px;
}

.organ-list ul {
    list-style: none;
    padding: 0;
}

.organ-list li {
    color: #ddd6fe;
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.organ-list li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: #8b5cf6;
}

.comparison-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 25px;
    margin: 40px 0;
}

.comparison-box h3 {
    color: #60a5fa;
    margin-bottom: 20px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.comparison-item {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    border-left: 3px solid #3b82f6;
}


/* ==================================================== 
   CONCEPT BROWSER SPECIFIC STYLES - 240 lines
   ==================================================== */
.search-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 20px;
}

.search-box {
    display: flex;
    gap: 15px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 250px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--light-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.filter-select {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
    min-width: 200px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--light-gold);
}

.search-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    border: none;
    border-radius: 10px;
    color: #1a1a2e;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.5);
}

.search-stats {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.results-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.concept-result {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.concept-result:hover {
    transform: translateX(10px);
    border-left-color: var(--light-gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.concept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.concept-name {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: bold;
}

.concept-badge {
    background: rgba(212, 175, 55, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    color: var(--light-gold);
    font-size: 0.9rem;
}

.concept-category {
    color: var(--text-gray);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.concept-desc {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.concept-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 175, 55, 0.6);
}

.occurrences-count {
    color: var(--gold);
    font-weight: bold;
}

.view-detail-btn {
    background: transparent;
    border: 1px solid var(--gold);
    padding: 8px 20px;
    border-radius: 5px;
    color: var(--gold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-detail-btn:hover {
    background: var(--gold);
    color: #1a1a2e;
}

.loading-spinner {
    text-align: center;
    padding: 3rem;
    color: var(--gold);
    font-size: 1.2rem;
}

.error-message {
    display: none;
    background: rgba(239, 68, 68, 0.6);
    border-left: 5px solid #ef4444;
    padding: 20px;
    margin: 2rem auto;
    max-width: 800px;
    border-radius: 10px;
    color: #fca5a5;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

.error-message.active {
    display: block;
}

/* Detail Modal */
.detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    overflow-y: auto;
}

.detail-modal.active {
    display: block;
}

/* Responsive */

/* ==================================================== 
   UNIVERSAL LAWS SPECIFIC STYLES - 227 lines
   ==================================================== */

/* Law cards */
.law-card {
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.6), 
        rgba(6, 182, 212, 0.6));
    border-left: 5px solid var(--law-gold);
    padding: 30px;
    border-radius: 15px;
    margin: 25px 0;
    transition: all 0.3s ease;
}

.law-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.6);
    border-left-color: var(--law-blue);
}

.law-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.law-name {
    font-size: 2em;
    color: var(--law-gold);
    font-weight: bold;
}

.law-category {
    background: rgba(245, 158, 11, 0.6);
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85em;
    color: #ffffff;
    font-weight: bold;
}

.law-category.physical { background: rgba(6, 182, 212, 0.6); color: #22d3ee; }
.law-category.metaphysical { background: rgba(139, 92, 246, 0.6); color: #a78bfa; }
.law-category.psychological { background: rgba(236, 72, 153, 0.6); color: #f9a8d4; }
.law-category.spiritual { background: rgba(34, 197, 94, 0.6); color: #4ade80; }

.law-statement {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-left: 4px solid var(--law-purple);
    border-radius: 10px;
    font-size: 1.3em;
    color: var(--text-light);
    font-style: italic;
    margin: 20px 0;
}

.law-description {
    color: var(--text-light);
    line-height: 1.8;
    margin: 15px 0;
    font-size: 1.05em;
}

.applications {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.application {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid var(--law-blue);
}

.application h4 {
    color: var(--law-gold);
    margin: 0 0 10px 0;
    font-size: 1em;
}

.application p {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0;
}

.hermetic-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.hermetic-card {
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid var(--law-gold);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.hermetic-card h4 {
    color: var(--law-gold);
    font-size: 1.3em;
    margin: 0 0 10px 0;
}

.hermetic-card p {
    color: var(--text-light);
    font-style: italic;
}

/* ==================================================== 
   EXISTENTIAL QUESTIONS SPECIFIC STYLES - 226 lines
   ==================================================== */

/* Question cards */
.question-card {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15), 
        rgba(168, 85, 247, 0.15));
    border-left: 5px solid var(--existential-purple);
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.question-card:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
    border-left-color: var(--existential-blue);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.question-text {
    font-size: 1.6em;
    color: var(--existential-blue);
    font-weight: bold;
    line-height: 1.4;
    flex: 1;
}

.question-category {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    color: var(--existential-purple);
    font-weight: bold;
    white-space: nowrap;
    margin-left: 15px;
}

.question-category.metaphysical { background: rgba(0, 0, 0, 0.6); color: #c084fc; }
.question-category.epistemological { background: rgba(0, 0, 0, 0.6); color: #60a5fa; }
.question-category.ontological { background: rgba(0, 0, 0, 0.6); color: #818cf8; }
.question-category.ethical { background: rgba(0, 0, 0, 0.6); color: #4ade80; }
.question-category.existential { background: rgba(0, 0, 0, 0.6); color: #f87171; }

.question-description {
    color: var(--text-light);
    line-height: 1.7;
    margin: 15px 0;
    font-size: 1.05em;
}

.perspectives {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.perspective {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 10px;
    border-left: 3px solid var(--existential-blue);
}

.perspective h4 {
    color: var(--existential-purple);
    margin: 0 0 10px 0;
    font-size: 1em;
}

.perspective p {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0;
}

.philosopher-link {
    color: var(--existential-blue);
    text-decoration: none;
    font-weight: bold;
}

.philosopher-link:hover {
    color: var(--existential-purple);
    text-decoration: underline;
}

.quote-box {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--existential-purple);
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    font-style: italic;
    color: var(--text-light);
    font-size: 1.1em;
}

.quote-box .author {
    text-align: right;
    margin-top: 10px;
    color: var(--existential-blue);
    font-weight: bold;
}

/* ==================================================== 
   DNA HELIX SPECIFIC STYLES - 224 lines
   ==================================================== */
.dna-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.dna-card {
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.6),
        rgba(49, 46, 129, 0.6));
    border-left: 5px solid #3b82f6;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dna-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
    border-radius: 50%;
}

.dna-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-left-color: #60a5fa;
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}

.dna-card h3 {
    color: #60a5fa;
    font-size: 1.7em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dna-card .icon {
    font-size: 2em;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.7));
}

.geometry-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 5px 5px 10px 0;
}

.geometry-badge.golden { background: #f59e0b; color: #451a03; }
.geometry-badge.fibonacci { background: #10b981; color: #022c22; }
.geometry-badge.vortex { background: #8b5cf6; color: #2e1065; }
.geometry-badge.sacred { background: #ec4899; color: #500724; }

.helix-visualization {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(30, 58, 138, 0.6));
    border: 2px solid #60a5fa;
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
    text-align: center;
}

.helix-visualization h3 {
    color: #60a5fa;
    margin-bottom: 20px;
}

.helix-ascii {
    font-family: monospace;
    color: #3b82f6;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre;
    overflow-x: auto;
    text-align: left;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}


/* ==================================================== 
   HERBS SPECIFIC STYLES - 223 lines
   ==================================================== */
.herbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.herb-card {
    background: linear-gradient(135deg, 
        rgba(6, 78, 59, 0.6),
        rgba(6, 95, 70, 0.6));
    border-left: 5px solid #10b981;
    border-radius: 15px;
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.herb-card::before {
    content: '🌿';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 140px;
    opacity: 0.08;
}

.herb-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #34d399;
    box-shadow: 0 15px 45px rgba(16, 185, 129, 0.5);
}

.herb-card h3 {
    color: #34d399;
    font-size: 1.7em;
    margin-bottom: 12px;
}

.herb-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 5px 5px 12px 0;
}

.herb-badge.adaptogen { background: #8b5cf6; color: white; }
.herb-badge.nervine { background: #3b82f6; color: white; }
.herb-badge.immune { background: #ef4444; color: white; }
.herb-badge.digestive { background: #f59e0b; color: #451a03; }
.herb-badge.detox { background: #10b981; color: white; }
.herb-badge.anti-inflammatory { background: #ec4899; color: white; }

.properties-box {
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid #34d399;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
}

.properties-box h4 {
    color: #6ee7b7;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.properties-box ul {
    list-style: none;
    padding: 0;
}

.properties-box li {
    color: #d1fae5;
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.properties-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.dosage-warning {
    background: rgba(239, 68, 68, 0.6);
    border: 2px solid #ef4444;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
}

.dosage-warning h4 {
    color: #fca5a5;
    margin-bottom: 8px;
}

.tradition-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(16, 185, 129, 0.6));
    border: 2px solid #8b5cf6;
    border-radius: 12px;
    padding: 25px;
    margin: 40px 0;
}

.tradition-box h3 {
    color: #a78bfa;
    margin-bottom: 20px;
}

.tradition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.tradition-item {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    border-left: 3px solid #a78bfa;
}


/* ==================================================== 
   PERCEPTION LIMITS SPECIFIC STYLES - 219 lines
   ==================================================== */

.limit-card {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.15), 
        rgba(249, 115, 22, 0.15));
    border-left: 5px solid var(--limit-red);
    padding: 30px;
    border-radius: 15px;
    margin: 25px 0;
    transition: all 0.3s ease;
}

.limit-card:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 10px 35px rgba(239, 68, 68, 0.6);
    border-left-color: var(--limit-orange);
}

.limit-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.limit-title {
    font-size: 2em;
    color: var(--limit-red);
    font-weight: bold;
}

.limit-type {
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 0.85em;
    color: var(--limit-orange);
    font-weight: bold;
}

.limit-type.biological { background: rgba(0, 0, 0, 0.6); color: #f87171; }
.limit-type.cognitive { background: rgba(0, 0, 0, 0.6); color: #fb923c; }
.limit-type.technological { background: rgba(0, 0, 0, 0.6); color: #fbbf24; }
.limit-type.quantum { background: rgba(0, 0, 0, 0.6); color: #c084fc; }

.limit-description {
    color: var(--text-light);
    line-height: 1.8;
    margin: 15px 0;
    font-size: 1.05em;
}

.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.human-limit, .beyond-human {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.human-limit {
    border-left: 4px solid var(--limit-red);
}

.human-limit h4 {
    color: var(--limit-red);
    margin: 0 0 15px 0;
}

.beyond-human {
    border-left: 4px solid var(--limit-yellow);
}

.beyond-human h4 {
    color: var(--limit-yellow);
    margin: 0 0 15px 0;
}

.stat {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px;
}

.stat-label {
    color: var(--text-gray);
}

.stat-value {
    color: var(--limit-orange);
    font-weight: bold;
}

.overcoming {
    background: linear-gradient(135deg, 
        rgba(234, 179, 8, 0.6), 
        rgba(34, 197, 94, 0.6));
    border: 2px solid var(--limit-yellow);
    padding: 25px;
    border-radius: 15px;
    margin: 30px 0;
}

.overcoming h3 {
    color: var(--limit-yellow);
    text-align: center;
    margin-bottom: 20px;
}

.method {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    border-left: 4px solid #22c55e;
}

.method h4 {
    color: #22c55e;
    margin: 0 0 10px 0;
}

.method p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* ==================================================== 
   EXTENDED ARCHETYPES SPECIFIC STYLES - 209 lines
   ==================================================== */

/* Archetype cards */
.archetype-card {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.6), 
        rgba(236, 72, 153, 0.6));
    border-left: 5px solid var(--extended-pink);
    padding: 20px;
    border-radius: 15px;
    margin: 15px 0;
    transition: all 0.3s ease;
}

.archetype-card:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6);
    border-left-color: var(--extended-orange);
}

.archetype-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.archetype-name {
    font-size: 1.5em;
    color: var(--extended-purple);
    font-weight: bold;
}

.archetype-type {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    color: var(--extended-pink);
    font-weight: bold;
}

.archetype-type.jungian { background: rgba(139, 92, 246, 0.6); color: #a78bfa; }
.archetype-type.literary { background: rgba(236, 72, 153, 0.6); color: #f9a8d4; }
.archetype-type.cultural { background: rgba(249, 115, 22, 0.6); color: #fdba74; }
.archetype-type.psychological { background: rgba(99, 102, 241, 0.6); color: #a5b4fc; }

.archetype-description {
    color: var(--text-light);
    line-height: 1.6;
    margin: 10px 0;
}

.archetype-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.example-tag {
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    color: var(--extended-orange);
    border: 1px solid rgba(249, 115, 22, 0.6);
}

.shadow-light {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.shadow, .light {
    padding: 10px;
    border-radius: 10px;
}

.shadow {
    background: rgba(0, 0, 0, 0.5);
    border-left: 3px solid #ef4444;
}

.light {
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid #22c55e;
}

.shadow h4, .light h4 {
    margin: 0 0 10px 0;
    font-size: 1em;
}

.shadow h4 { color: #ef4444; }
.light h4 { color: #22c55e; }

/* ==================================================== 
   BRONZE AGE COLLAPSE SPECIFIC STYLES - 208 lines
   ==================================================== */
.bronze-hero {
    background: linear-gradient(135deg, 
        rgba(139, 79, 191, 0.6),
        rgba(74, 44, 94, 0.9),
        rgba(26, 26, 46, 0.95));
    padding: 80px 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.bronze-hero::before {
    content: '⚡';
    position: absolute;
    font-size: 18rem;
    opacity: 0.04;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.bronze-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.bronze-hero p {
    font-size: 1.4em;
    color: var(--text-light);
    position: relative;
    z-index: 1;
}

.collapse-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin: 1.5rem 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.collapse-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #8b4fbf;
    box-shadow: 0 8px 25px rgba(139, 79, 191, 0.6);
}

.collapse-card h3 {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.timeline-section {
    margin: 3rem 0;
}

.timeline-event {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 20px;
    margin: 1rem 0;
    border-radius: 10px;
    position: relative;
}

.timeline-event::before {
    content: '◉';
    position: absolute;
    left: -14px;
    top: 20px;
    font-size: 1.5rem;
    color: var(--gold);
    background: var(--dark-bg);
    padding: 5px;
    border-radius: 50%;
}

.timeline-event h4 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.dna-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 2rem 0;
}

.genetic-table {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    overflow: hidden;
    margin: 2rem 0;
}

.genetic-table th {
    background: linear-gradient(135deg, #c0392b, #8b1a1a);
    color: var(--gold);
    padding: 15px;
    text-align: left;
    font-size: 1.1rem;
}

.genetic-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.6);
    color: var(--text-light);
}

.genetic-table tr:hover {
    background: rgba(139, 79, 191, 0.6);
}

.biblical-connection {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(212, 175, 55, 0.6));
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin: 2rem 0;
}

.biblical-connection h3 {
    color: var(--gold);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.city-map {
    background: rgba(0, 0, 0, 0.5);
    padding: 25px;
    margin: 2rem 0;
    border-radius: 10px;
    border: 2px solid var(--gold);
}

.city-map h4 {
    color: var(--gold);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.conflict-explanation {
    background: rgba(139, 79, 191, 0.6);
    border-left: 6px solid var(--gold);
    padding: 30px;
    margin: 2rem 0;
    border-radius: 10px;
}

.conflict-explanation strong {
    color: var(--gold);
    font-size: 1.3rem;
}

.warning-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(127, 29, 29, 0.6));
    border: 2px solid #ef4444;
    border-radius: 10px;
    padding: 25px;
    margin: 2rem 0;
}

.warning-box h4 {
    color: #ff6b6b;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ==== PARADOXES SPECIFIC STYLES ==== */
.paradox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 30px;
    margin: 3rem 0;
}

.paradox-card {
    background: linear-gradient(135deg, 
        rgba(124, 45, 18, 0.6),
        rgba(153, 27, 27, 0.6));
    border-left: 5px solid #ef4444;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.paradox-card::before {
    content: '♾️';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 120px;
    opacity: 0.1;
}

.paradox-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #fca5a5;
    box-shadow: 0 15px 45px rgba(239, 68, 68, 0.5);
}

.paradox-card h3 {
    color: #fca5a5;
    font-size: 1.7em;
    margin-bottom: 15px;
}

.paradox-type {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 5px 5px 15px 0;
}

.paradox-type.logical { background: #ef4444; color: white; }
.paradox-type.temporal { background: #3b82f6; color: white; }
.paradox-type.quantum { background: #8b5cf6; color: white; }
.paradox-type.semantic { background: #f59e0b; color: #451a03; }
.paradox-type.infinite { background: #10b981; color: white; }

/* ==== PSYCHEDELICS SPECIFIC STYLES ==== */
.psychedelic-hero {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.6),
        rgba(99, 102, 241, 0.9),
        rgba(74, 44, 94, 0.95));
    padding: 80px 20px;
    text-align: center;
    border-bottom: 3px solid var(--gold);
    position: relative;
    overflow: hidden;
}

.psychedelic-hero::before {
    content: '🍄';
    position: absolute;
    font-size: 18rem;
    opacity: 0.04;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.psychedelic-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.substance-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin: 1.5rem 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.substance-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #8b5cf6;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6);
}

.substance-card h3 {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.effects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 1.5rem 0;
}

.effect-box {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 8px;
    border-top: 3px solid #8b5cf6;
}

.effect-box h4 {
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.therapeutic-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(5, 150, 105, 0.6));
    border: 2px solid #10b981;
    border-radius: 15px;
    padding: 30px;
    margin: 2rem 0;
}

.therapeutic-section h3 {
    color: #10b981;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.risk-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(127, 29, 29, 0.6));
    border: 2px solid #ef4444;
    border-radius: 10px;
    padding: 25px;
    margin: 2rem 0;
}

.risk-warning h4 {
    color: #ff6b6b;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.consciousness-connection {
    background: rgba(0, 0, 0, 0.6);
    border-left: 6px solid var(--gold);
    padding: 30px;
    margin: 2rem 0;
    border-radius: 10px;
}

.consciousness-connection h3 {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.dosage-table {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    overflow: hidden;
    margin: 2rem 0;
}

.dosage-table th {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: var(--gold);
    padding: 15px;
    text-align: left;
    font-size: 1.1rem;
}

.dosage-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.6);
    color: var(--text-light);
}

.dosage-table tr:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ==== HUMAN SENSES SPECIFIC STYLES ==== */
.sense-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.sense-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #3b82f6;
    padding: 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.sense-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
    border-left-color: #8b5cf6;
}

.sense-icon {
    font-size: 4em;
    text-align: center;
    margin-bottom: 15px;
}

.sense-name {
    font-size: 2em;
    color: #3b82f6;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.sense-description {
    color: #e0e0e0;
    line-height: 1.7;
    margin: 15px 0;
    text-align: center;
    font-weight: 500;
}

.sense-details {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.sense-details h4 {
    color: #8b5cf6;
    margin: 0 0 10px 0;
}

.sense-details p {
    color: #e0e0e0;
    font-size: 0.95em;
    line-height: 1.6;
}

.chakra-link {
    background: rgba(139, 92, 246, 0.6);
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-block;
    margin: 10px 5px;
    color: #ec4899;
    font-size: 0.9em;
}

.beyond-five {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.6), 
        rgba(168, 85, 247, 0.6));
    border: 2px solid #ec4899;
    padding: 25px;
    border-radius: 15px;
    margin: 30px 0;
}

.beyond-five h3 {
    color: #ec4899;
    text-align: center;
    margin-bottom: 20px;
}

.extra-sense {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    border-left: 4px solid #8b5cf6;
}

.extra-sense h4 {
    color: #8b5cf6;
    margin: 0 0 10px 0;
}

.extra-sense p {
    color: #e0e0e0;
    line-height: 1.6;
    margin: 0;
    font-size: 1em;
}

/* ==== TRAUMAS SPECIFIC STYLES ==== */
.trauma-hero {
    background: linear-gradient(135deg, 
        rgba(60, 0, 0, 0.95),
        rgba(100, 20, 20, 0.95),
        rgba(26, 26, 46, 0.98)
    );
    padding: 80px 20px;
    text-align: center;
    border-bottom: 3px solid #d4af37;
    position: relative;
    overflow: hidden;
}

.trauma-hero::before {
    content: "💔";
    position: absolute;
    font-size: 20rem;
    opacity: 0.03;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.trauma-hero h1 {
    font-size: 3.5rem;
    color: #d4af37;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.trauma-hero .subtitle {
    font-size: 1.5rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
}

.trauma-intro {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #8b0000;
    padding: 30px;
    margin: 30px 0;
    border-radius: 8px;
}

.trauma-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid #d4af37;
    padding: 25px;
    margin: 20px 0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.trauma-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: #ff6b6b;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
}

.trauma-card h3 {
    color: #d4af37;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trauma-type-badge {
    display: inline-block;
    background: rgba(139, 0, 0, 0.6);
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: #ff6b6b;
    text-transform: uppercase;
}

.symptoms-box {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    border-left: 3px solid #ff6b6b;
}

.healing-path {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    border-left: 3px solid #22c55e;
}

.connection-tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    margin: 5px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #e0e0e0;
    transition: all 0.3s ease;
}

.connection-tag:hover {
    background: rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
}

#loadingSpinner {
    text-align: center;
    padding: 40px;
    color: #d4af37;
}

.origin-phase {
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    border-left: 3px solid #8b4fbf;
}

.severity-indicator {
    display: inline-flex;
    gap: 5px;
    margin-left: 10px;
}

.severity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
}

.severity-dot.active {
    background: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

/* ==== FRACTALS SPECIFIC STYLES ==== */
.fractal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 25px;
    margin: 3rem 0;
}

.fractal-card {
    background: linear-gradient(135deg, 
        rgba(88, 28, 135, 0.6),
        rgba(107, 33, 168, 0.6));
    border-left: 5px solid #8b5cf6;
    border-radius: 15px;
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fractal-card::before {
    content: '🌀';
    position: absolute;
    top: -30px;
    right: -30px;
    font-size: 140px;
    opacity: 0.08;
}

.fractal-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-left-color: #c4b5fd;
    box-shadow: 0 15px 45px rgba(139, 92, 246, 0.5);
}

.fractal-card h3 {
    color: #c4b5fd;
    font-size: 1.8em;
    margin-bottom: 12px;
}

.fractal-visual {
    width: 100%;
    height: 250px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mandelbrot-animation {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, 
        #8b5cf6 0%, 
        #6b21a8 20%, 
        #581c87 40%, 
        #3730a3 60%, 
        #1e1b4b 80%, 
        #000 100%);
    animation: mandelbrotZoom 10s ease-in-out infinite;
}

@keyframes mandelbrotZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

.formula-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #8b5cf6;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Courier New', monospace;
    color: #c4b5fd;
}

.dimension-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    color: #c4b5fd;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin: 8px 5px;
}

.nature-examples {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(139, 92, 246, 0.6));
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
}

.chaos-theory-box {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
}

/* ==== ARCHETYPE QUIZ SPECIFIC STYLES ==== */

#quiz-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

#results-section {
    max-width: 900px;
    margin: 0 auto;
}

.progress-bar {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    margin: 30px 0;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #9b59b6, #d4af37);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    transition: width 0.3s ease;
    width: 0%;
}

.question-card {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 15px;
    margin: 20px 0;
    border-left: 5px solid var(--gold);
}

.question-number {
    color: var(--gold);
    font-size: 0.9em;
    margin-bottom: 10px;
}

.question-text {
    font-size: 1.2em;
    color: var(--text-light);
    margin-bottom: 20px;
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.answer-btn {
    padding: 15px 20px;
    background: rgba(155, 89, 182, 0.3);
    border: 2px solid rgba(155, 89, 182, 0.5);
    border-radius: 10px;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 1em;
    line-height: 1.5;
}

.answer-btn:hover {
    background: rgba(212, 175, 55, 0.4);
    border-color: var(--gold);
    transform: translateX(10px);
    color: #fff !important;
}

.answer-btn.selected {
    background: rgba(212, 175, 55, 0.5);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    color: #fff !important;
}

/* Prakriti Quiz (Ayurveda) */
.prakriti-quiz {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.quiz-question {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid var(--gold);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.quiz-option {
    padding: 15px 20px;
    background: rgba(155, 89, 182, 0.3);
    border: 2px solid rgba(155, 89, 182, 0.5);
    border-radius: 10px;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quiz-option:hover {
    background: rgba(212, 175, 55, 0.4);
    border-color: var(--gold);
    transform: translateX(5px);
    color: #fff !important;
}

.quiz-option.selected {
    background: rgba(212, 175, 55, 0.5);
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    color: #fff !important;
}

#calculatePrakriti {
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #9b59b6, #d4af37);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

#calculatePrakriti:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

#prakritiResult {
    margin-top: 30px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    border: 2px solid var(--gold);
}

.submit-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #9b59b6, #d4af37);
    border: none;
    border-radius: 15px;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    margin: 30px 0;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#results-section {
    display: none;
}

.visualization {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 15px;
    margin: 20px 0;
    border-left: 5px solid var(--gold);
}

.score-bar {
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    margin: 10px 0;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    background: linear-gradient(90deg, #9b59b6, #d4af37);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    transition: width 0.5s ease;
}

.score-label {
    color: var(--gold);
    font-weight: bold;
    margin-top: 15px;
}

.spectrum {
    width: 100%;
    height: 50px;
    background: linear-gradient(90deg, #DC143C 0%, #4169E1 50%, #FFD700 100%);
    border-radius: 10px;
    position: relative;
    margin: 20px 0;
}

.spectrum-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border: 3px solid var(--gold);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.5s ease;
}

.spectrum-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: var(--text-light);
}

.back-btn {
    display: inline-block;
    padding: 15px 30px;
    background: rgba(155, 89, 182, 0.3);
    border: 2px solid var(--gold);
    border-radius: 10px;
    color: var(--text-light);
    text-decoration: none;
    margin: 10px 10px 10px 0;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

/* ==== RITUAL CALENDAR SPECIFIC STYLES ==== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 2rem 0;
}

.month-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.month-card:hover {
    transform: translateX(10px) scale(1.02);
    border-left-color: var(--gold);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.month-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.month-icon {
    font-size: 2em;
}

.month-name {
    color: var(--gold);
    font-size: 1.4em;
    font-weight: 700;
}

.zodiac-season {
    background: rgba(212, 175, 55, 0.6);
    padding: 8px;
    border-radius: 5px;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.rituals-list {
    list-style: none;
    padding: 0;
}

.rituals-list li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.6);
}

.rituals-list li:last-child {
    border-bottom: none;
}

.ritual-date {
    color: var(--gold);
    font-weight: 600;
    margin-right: 8px;
}

.moon-phase-tracker {
    background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(212, 175, 55, 0.6));
    padding: 30px;
    border-radius: 15px;
    margin: 2rem 0;
}

.moon-phases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}


@media (max-width: 600px) {
    .moon-phases {
        grid-template-columns: repeat(2, 1fr);
    }

    html body .footer-grid {
        grid-template-columns: 1fr !important;
    }

    body .encyclopedia-grid:has(> :nth-child(4):last-child),
    body .archetype-grid:has(> :nth-child(4):last-child),
    body .features-grid:has(> :nth-child(4):last-child),
    body .systems-grid:has(> :nth-child(4):last-child),
    body .unified-grid:has(> :nth-child(4):last-child),
    body .path-selector:has(> :nth-child(4):last-child),
    body .connections-grid:has(> :nth-child(4):last-child),
    body .philosophy-grid:has(> :nth-child(4):last-child),
    body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(4):last-child),
    body [class*="-grid "]:not([class*="grid-2col"]):has(> :nth-child(4):last-child),
    body .encyclopedia-grid:has(> :nth-child(8):last-child),
    body .archetype-grid:has(> :nth-child(8):last-child),
    body .features-grid:has(> :nth-child(8):last-child),
    body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(8):last-child) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    body .grid-4col { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

.moon-phase {
    text-align: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.moon-phase h3 {
    font-size: 0.95em;
    margin: 6px 0 4px;
    line-height: 1.2;
}

.moon-phase p {
    font-size: 0.82em;
    margin: 3px 0;
    line-height: 1.3;
}

.moon-emoji {
    font-size: 3em;
    margin-bottom: 10px;
}

.seasonal-wheel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 2rem 0;
}

.season-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    border-radius: 10px;
}

.sabbat-card {
    background: rgba(212, 175, 55, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.6);
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
}

/* ==== PROGRESSIONS SPECIFIC STYLES ==== */
.progression-calculator {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 30px;
    margin: 2rem 0;
    border-radius: 10px;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    color: var(--gold);
    font-weight: 600;
}

.input-group input {
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 5px;
    color: var(--text-light);
    font-size: 1rem;
}

.input-group input:focus {
    outline: none;
    border-color: var(--gold);
}

.calculate-btn {
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    color: #1a1a2e;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.6);
}

.results-container {
    display: none;
    margin-top: 30px;
}

.results-container.active {
    display: block;
}

.progression-card {
    background: rgba(0, 0, 0, 0.6);
    border-left: 5px solid var(--gold);
    padding: 25px;
    margin: 20px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.progression-card:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

.progression-card h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.planet-progression {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.6);
}

.planet-name {
    color: var(--gold);
    font-weight: 600;
}

.planet-position {
    color: var(--text-light);
}

.info-box {
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid #06b6d4;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

.info-box h4 {
    color: #06b6d4;
    margin-bottom: 10px;
}

.timeline {
    margin: 30px 0;
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    padding-left: 40px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 1.5rem;
}

.timeline-age {
    color: var(--gold);
    font-weight: 700;
    min-width: 80px;
}

.timeline-event {
    color: var(--text-light);
}

/* ==== ACCEPTANCE SPECIFIC STYLES ==== */
.acceptance-gradient {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-left: 5px solid #3b82f6;
    padding: 40px;
    border-radius: 15px;
    margin: 40px 0;
}

.serenity-section {
    background: rgba(96, 165, 250, 0.1);
    border-left: 5px solid #60a5fa;
    padding: 25px;
    margin: 20px 0;
    border-radius: 10px;
}

/* ==== LOVE-CONSCIOUSNESS.HTML ==== */
.page-hero--love-consciousness {
    background: linear-gradient(135deg, rgba(236,72,153,0.3), rgba(244,114,182,0.2));
    border-bottom: 3px solid #ec4899;
}

/* ====================================================
.page-hero {
    background: linear-gradient(135deg, #ef4444, #f97316, #fbbf24, #22c55e, #3b82f6, #6366f1, #a855f7);
    padding: 80px 20px;
    border-bottom: 3px solid #d4af37;
}

.page-hero h1 {
    font-size: 3em;
    color: transparent;
    background: linear-gradient(135deg, #ef4444, #f97316, #fbbf24, #22c55e, #3b82f6, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.chakra-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 40px 0;
}

/* ==== CHAKRAS.HTML SPECIFIC STYLES ==== */
.chakra-card {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    transition: all 0.3s ease;
    border-left: 8px solid #d4af37;
}

.chakra-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    transition: width 0.3s ease;
}

.chakra-card:hover {
    transform: translateX(15px);
    border-left-width: 15px;
}

.chakra-card.root::before { background: #ef4444; }
.chakra-card.sacral::before { background: #f97316; }
.chakra-card.solar::before { background: #fbbf24; }
.chakra-card.heart::before { background: #22c55e; }
.chakra-card.throat::before { background: #3b82f6; }
.chakra-card.third-eye::before { background: #6366f1; }
.chakra-card.crown::before { background: #a855f7; }

.chakra-symbol {
    font-size: 4em;
    filter: drop-shadow(0 4px 15px currentColor);
    margin: 20px 0;
}

.chakra-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.frequency-box {
    border: 2px solid currentColor;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
}

.kundalini-section {
    background: linear-gradient(135deg, #ef4444, #a855f7);
    border: 2px solid #d4af37;
    border-radius: 15px;
    padding: 40px;
    margin: 50px 0;
    text-align: center;
}


/* ==== ICHING.HTML SPECIFIC STYLES ==== */
.coin-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.coin {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.coin:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.8);
}

.coin.flipping {
    animation: flip 0.6s ease-in-out;
}

@keyframes flip {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

.hexagram-lines {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin: 20px auto;
    max-width: 300px;
}

.line {
    height: 15px;
    background: var(--gold);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
}

.line.broken {
    background: linear-gradient(to right, var(--gold) 45%, transparent 45%, transparent 55%, var(--gold) 55%);
}

.hexagram-display {
    text-align: center;
    padding: 30px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    margin: 20px 0;
}

.hexagram-display button {
    background: linear-gradient(135deg, var(--gold), var(--light-gold));
    color: var(--dark-bg);
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.hexagram-display button:hover {
    transform: translateY(-3px);
}

/* ==== MEDITATION.HTML SPECIFIC STYLES ==== */
.meditation-hero {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(99, 102, 241, 0.6), rgba(26, 26, 46, 0.95));
    padding: 80px 20px;
    border-bottom: 3px solid #d4af37;
}

.meditation-hero h1 {
    font-size: 3.5em;
    color: var(--gold);
    margin: 0;
}

.meditation-hero .subtitle {
    color: #8b5cf6;
    font-size: 1.4em;
    margin: 10px 0 0 0;
}.font-lg { font-size: 1.125em; }.font-0-95 { font-size: 0.95em; }
.font-base { font-size: 1em; }

.text-gold { color: var(--gold); }.text-purple-light { color: #d8b4fe; }

.meditation-techniques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.technique-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
}

.technique-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.philosophy-box {
    background: linear-gradient(rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
    padding: 40px;
    border: 2px solid rgba(139, 92, 246, 0.5);
    border-radius: 15px;
    text-align: center;
    margin: 20px 0;
}

.crossref-box {
    background: rgba(139, 92, 246, 0.1);
    border-left: 5px solid #8b5cf6;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
}

.filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.filter-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--text-light);
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
    background: linear-gradient(135deg, var(--gold), #f1d98f);
    color: var(--dark-bg);
    border-color: var(--gold);
}

/* ==== NATAL-CHART.HTML SPECIFIC STYLES ==== */
.natal-form {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-group label {
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.form-group input, .form-group select {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.5);
    color: var(--text-light);
    padding: 12px;
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    outline: none;
}

.calculate-btn {
    background: linear-gradient(135deg, var(--gold), #f1d98f);
    color: var(--dark-bg);
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calculate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.calculate-btn:active {
    transform: translateY(-1px);
}

.chart-display {
    display: none;
    margin-top: 40px;
}

.chart-display.active {
    display: block;
}

.aspects-list {
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin: 20px 0;
    border-radius: 15px;
    border-left: 5px solid var(--gold);
}

.aspect-item {
    padding: 15px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 3px solid rgba(212, 175, 55, 0.8);
}

.loading-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* ==== AUTHENTIC-SELF.HTML SPECIFIC STYLES ==== */
.auth-page-hero {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.2)), linear-gradient(to bottom, #0f172a, #1a1a2e);
    border-bottom: 3px solid #ec4899;
}

/* ==== EMERGENCE-COMPLEXITY.HTML SPECIFIC STYLES ==== */
.emergence-page-hero {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(34, 197, 94, 0.2)), linear-gradient(to bottom, #0f172a, #1a1a2e);
    border-bottom: 3px solid #a855f7;
}

/* ==== ACHIEVEMENTS.HTML SPECIFIC STYLES ==== */
.level-progress {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    overflow: hidden;
    margin: 10px 0;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #f1d98f);
    width: 0%;
    transition: width 0.3s ease;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.achievement-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.achievement-card.unlocked {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

.achievement-card.unlocked:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.achievement-card.locked {
    opacity: 0.6;
    border-color: rgba(212, 175, 55, 0.2);
}

.achievement-tier {
    display: inline-block;
    background: rgba(212, 175, 55, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.achievement-icon {
    display: inline-block;
    font-size: 3em;
    margin: 10px 0;
}

.achievement-points {
    font-weight: bold;
    color: #d946ef;
    margin: 10px 0;
    font-size: 1.2em;
}

.achievement-locked-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
}

.achievement-progress {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    height: 8px;
    margin: 10px 0;
    overflow: hidden;
}

.achievement-progress-fill {
    background: linear-gradient(90deg, var(--gold), #f1d98f);
    height: 100%;
    transition: width 0.3s ease;
}

.category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 2rem 0;
    justify-content: center;
}

.category-tab {
    flex: 1;
    min-width: 150px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--text-light);
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.category-tab:hover, .category-tab.active {
    background: linear-gradient(135deg, var(--gold), #f1d98f);
    color: var(--dark-bg);
    border-color: var(--gold);
}

.stat-card {
    text-align: center;
    border-left-color: var(--gold);
}

.stat-card.stat-blue { border-left-color: #3b82f6; }
.stat-card.stat-purple { border-left-color: #d946ef; }
.stat-card.stat-green { border-left-color: #10b981; }
.stat-card.stat-red { border-left-color: #ef4444; }
/* ==================================================== */

/* ====================================================
   END OF STYLESHEET
   ==================================================== */
/* ==== FREQUENCIES.HTML SPECIFIC STYLES ==== */
/* Minimal CSS - mostly inline styling */

/* ==== FREUD-POHOVKA.HTML SPECIFIC STYLES ==== */
.couch-hero { background: linear-gradient(135deg, rgba(74, 44, 94, 0.98), rgba(88, 28, 135, 0.98), rgba(127, 29, 29, 0.98)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #d4af37; position: relative; }
.couch-hero::before { content: "🛋️"; position: absolute; font-size: 18rem; opacity: 0.04; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.symbol-card { background: rgba(139, 79, 191, 0.15); border-left: 5px solid #8b4fbf; padding: 25px; margin: 25px 0; border-radius: 8px; transition: all 0.3s ease; }
.symbol-card:hover { transform: translateX(10px) scale(1.02); box-shadow: 0 8px 25px rgba(139, 79, 191, 0.6); border-left-color: #d4af37; }

/* ==== GENE-KEYS.HTML SPECIFIC STYLES ==== */
.profile-calculator { background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 10px; margin: 20px 0; }

/* ==== GENE-KEYS-TRINITY.HTML SPECIFIC STYLES ==== */
/* Minimal CSS at top */

/* ==== GROF.HTML SPECIFIC STYLES ==== */
/* Minimal CSS - mostly inline */

/* ==== HAPPINESS.HTML SPECIFIC STYLES ==== */

/* ==== HEALING.HTML SPECIFIC STYLES ==== */
.healing-gradient { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(6, 182, 212, 0.2)); border-left: 5px solid #22c55e; padding: 40px; border-radius: 15px; margin: 40px 0; }
.remedy-section { background: rgba(34, 197, 94, 0.1); border-left: 5px solid #059669; padding: 25px; margin: 20px 0; border-radius: 10px; }
/* ==== ENTROPIC-SYSTEMS.HTML SPECIFIC STYLES ==== */
.text-amber { color: #f59e0b; }

/* ==== ENTROPIE-KRISTUS.HTML SPECIFIC STYLES ==== */
.entropy-hero { background: linear-gradient(135deg, rgba(10, 25, 41, 0.98), rgba(15, 41, 66, 0.98), rgba(26, 58, 82, 0.98)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #d4af37; position: relative; overflow: hidden; }
.entropy-hero::before { content: "⚛️"; position: absolute; font-size: 20rem; opacity: 0.03; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.physics-card { background: rgba(6, 182, 212, 0.15); border-left: 5px solid #06b6d4; padding: 25px; margin: 20px 0; border-radius: 8px; transition: all 0.3s ease; }
.physics-card:hover { transform: translateX(10px); box-shadow: 0 8px 25px rgba(6, 182, 212, 0.6); }

/* ==== EXISTENTIAL-QUESTIONS.HTML SPECIFIC STYLES ==== */
.existential-blue { color: #3b82f6; }
.existential-purple { color: #a855f7; }
.existential-dark { background-color: #1e293b; }
.page-hero { background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(168, 85, 247, 0.6)); padding: 80px 20px; text-align: center; position: relative; overflow: hidden; }
/* .page-hero::before decorative emoji removed - replaced by hero-bg.jpg via unified hero CSS */

/* ==== EXPERIMENTS.HTML SPECIFIC STYLES ==== */
.experiment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 25px; margin: 3rem 0; }
.experiment-card { background: linear-gradient(135deg, rgba(30, 58, 138, 0.6), rgba(30, 64, 175, 0.6)); border-left: 5px solid #3b82f6; border-radius: 15px; padding: 30px; transition: all 0.3s ease; }
.experiment-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5); }
.experiment-card h3 { color: #60a5fa; font-size: 1.3em; margin-bottom: 15px; }

/* ==== EXTENDED-ARCHETYPES.HTML SPECIFIC STYLES ==== */
.extended-purple { color: #8b5cf6; }
.extended-pink { color: #ec4899; }
.extended-orange { color: #f97316; }

/* ==== FEAR-TYPES.HTML SPECIFIC STYLES ==== */
.fear-hero { background: linear-gradient(135deg, rgba(30, 0, 50, 0.95), rgba(60, 20, 80, 0.95), rgba(26, 26, 46, 0.98)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #d4af37; position: relative; overflow: hidden; }
.fear-hero::before { content: "😨"; position: absolute; font-size: 20rem; opacity: 0.03; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.fear-hero h1 { font-size: 3.5rem; color: #d4af37; margin-bottom: 0.5rem; text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
.fear-hero .subtitle { font-size: 1.5rem; color: #e0e0e0; margin-bottom: 2rem; }

/* ==== FEMININE-POWER.HTML SPECIFIC STYLES ==== */
.feminine-gradient { background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.2)); border-left: 5px solid #ec4899; padding: 40px; border-radius: 15px; margin: 40px 0; }
.moon-section { background: rgba(148, 51, 234, 0.1); border-left: 5px solid #9333ea; padding: 25px; margin: 20px 0; border-radius: 10px; }

/* ==== FORGIVENESS-CONSCIOUSNESS.HTML SPECIFIC STYLES ==== */

/* ==== FRACTALS.HTML SPECIFIC STYLES ==== */
.fractal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 25px; margin: 3rem 0; }
.fractal-card { background: linear-gradient(135deg, rgba(88, 28, 135, 0.6), rgba(107, 33, 168, 0.6)); border-left: 5px solid #8b5cf6; border-radius: 15px; padding: 28px; transition: all 0.3s ease; }
.fractal-card:hover { transform: translateY(-5px) scale(1.02); border-left-color: #c4b5fd; box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5); }
.fractal-card h3 { color: #c4b5fd; font-size: 1.5em; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.fractal-card .icon { font-size: 2em; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.6)); }
/* ==== DIGITALNE-TICHO.HTML SPECIFIC STYLES ==== */
.section-title { color: #06b6d4; font-size: 2rem; border-bottom: 2px solid #06b6d4; padding-bottom: 15px; margin: 30px 0 20px 0; }
.section-intro { font-size: 1.1em; line-height: 1.8; color: var(--text-light); margin-bottom: 30px; padding: 20px; background: rgba(6, 182, 212, 0.1); border-left: 5px solid #06b6d4; }
.digital-wall { background: rgba(6, 182, 212, 0.1); border: 2px solid #06b6d4; padding: 20px; margin: 15px 0; border-radius: 8px; font-weight: bold; color: #06b6d4; }
.secondary-topic { background: rgba(6, 182, 212, 0.2); border: 1px solid #06b6d4; padding: 12px 18px; border-radius: 25px; color: #06b6d4; text-decoration: none; transition: all 0.3s ease; display: inline-block; margin: 5px; }
.secondary-topic:hover { background: rgba(6, 182, 212, 0.4); transform: scale(1.05); }

/* ==== DNA-HELIX.HTML SPECIFIC STYLES ==== */
.dna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 30px; margin: 3rem 0; }.comparison-box { background: rgba(0, 0, 0, 0.6); border: 2px solid #3b82f6; border-radius: 12px; padding: 25px; margin: 30px 0; }
.comparison-box h3 { color: #60a5fa; margin-bottom: 20px; font-size: 1.5em; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }.comparison-item h4 { color: #60a5fa; margin-bottom: 10px; }
.comparison-item ul { list-style: none; padding: 0; }
.comparison-item li { color: #bfdbfe; padding: 5px 0; padding-left: 20px; position: relative; }
.comparison-item li::before { content: '◆'; position: absolute; left: 0; color: #3b82f6; }.connection-box { background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(139, 92, 246, 0.6)); border: 2px solid #10b981; border-radius: 12px; padding: 25px; margin: 40px 0; }
.connection-box h3 { color: #34d399; margin-bottom: 15px; }
.connection-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.connection-links a { background: rgba(0, 0, 0, 0.6); padding: 15px; border-radius: 10px; border-left: 3px solid #10b981; color: #6ee7b7; text-decoration: none; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; }
.connection-links a:hover { transform: translateX(5px); border-left-color: #34d399; }
/* ==== DREAM-JOURNAL.HTML SPECIFIC STYLES ==== */
.journal-container { max-width: 1200px; margin: 0 auto; padding: 20px; }.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 30px 0; }
.stat-card { background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 10px; text-align: center; border-left: 4px solid #8b5cf6; }
.stat-number { font-size: 2.5em; color: var(--gold); font-weight: bold; }
.stat-label { color: var(--text-light); margin-top: 5px; }.form-group { margin-bottom: 20px; }
.form-group label { display: block; color: var(--gold); margin-bottom: 8px; font-weight: bold; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(139, 92, 246, 0.6); border-radius: 8px; color: var(--text-light); font-family: inherit; font-size: 1em; }
.form-group textarea { min-height: 150px; resize: vertical; }.filters { background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 15px; margin-bottom: 30px; border: 2px solid rgba(139, 92, 246, 0.6); }.filter-group { flex: 1; min-width: 200px; }
/* ==== EMERGENCE-COMPLEXITY.HTML SPECIFIC STYLES ==== */
.secondary-topics-wrapper { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.subsection-title { color: #d8b4fe; }
/* ==== ELITE-PROFIT-CRISIS.HTML SPECIFIC STYLES ==== */
.elite-hero { background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(127, 29, 29, 0.9), rgba(69, 10, 10, 0.95)); padding: 80px 20px; text-align: center; border-bottom: 3px solid var(--gold); position: relative; overflow: hidden; }
.elite-hero::before { content: '💰'; position: absolute; font-size: 18rem; opacity: 0.04; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.elite-hero h1 { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--gold), var(--light-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 1; }
.elite-hero p { font-size: 1.4em; color: var(--text-light); position: relative; z-index: 1; }
.mechanism-card { background: rgba(0, 0, 0, 0.6); border-left: 5px solid var(--gold); padding: 25px; margin: 1.5rem 0; border-radius: 10px; transition: all 0.3s ease; }
.mechanism-card:hover { transform: translateX(10px) scale(1.02); border-left-color: #ef4444; box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6); }
.mechanism-card h3 { color: var(--gold); font-size: 1.8rem; margin-bottom: 1rem; }
.family-table { width: 100%; background: rgba(0, 0, 0, 0.6); border-radius: 10px; overflow: hidden; margin: 2rem 0; }
.family-table th { background: linear-gradient(135deg, #7f1d1d, #450a0a); color: var(--gold); padding: 15px; text-align: left; font-size: 1.1rem; }
.family-table td { padding: 15px; border-bottom: 1px solid rgba(212, 175, 55, 0.6); color: var(--text-light); }
.family-table tr:hover { background: rgba(0, 0, 0, 0.6); }
.critical-analysis { background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(212, 175, 55, 0.6)); border: 2px solid var(--gold); border-radius: 15px; padding: 30px; margin: 2rem 0; }
.critical-analysis h3 { color: var(--gold); font-size: 2rem; margin-bottom: 1.5rem; text-align: center; }
.principle-box { background: rgba(0, 0, 0, 0.5); padding: 20px; margin: 1rem 0; border-left: 4px solid #ef4444; border-radius: 8px; }
.principle-box strong { color: var(--gold); font-size: 1.2rem; }
.modern-parallel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 2rem 0; }
.parallel-card { background: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 10px; border-top: 3px solid var(--gold); }
.parallel-card h4 { color: var(--gold); font-size: 1.5rem; margin-bottom: 1rem; }
.quote-large { background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(127, 29, 29, 0.6)); border-left: 6px solid var(--gold); padding: 30px; margin: 2rem 0; font-size: 1.3rem; font-style: italic; color: var(--light-gold); border-radius: 10px; }
/* ==== COMPASSION.HTML SPECIFIC STYLES ==== */
.compassion-gradient { background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(217, 70, 239, 0.2)); border-left: 5px solid #f43f5e; padding: 40px; border-radius: 15px; margin: 40px 0; }
.heart-section { background: rgba(244, 63, 94, 0.1); border-left: 5px solid #ec4899; padding: 25px; margin: 20px 0; border-radius: 10px; }
/* ==== CRITICAL-THINKING.HTML SPECIFIC STYLES ==== */
.font-2-5 { font-size: 2.5em; }
.icon { font-size: 2.5em; margin: 10px 0; }

/* ==== DARK-MATTER.HTML SPECIFIC STYLES ==== */
.font-2xl { font-size: 2em; }

/* ==== DEEP-CONNECTIONS.HTML SPECIFIC STYLES ==== */
.deep-connections-svg { width: 100%; height: 600px; background: rgba(0,0,0,0.6); border-radius: 10px; }
.deep-stat { text-align: center; background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 15px; }
.deep-stat-value { color: var(--gold); font-weight: bold; font-size: 2em; margin: 15px 0; }
.deep-stat-label { color: #aaa; font-size: 0.9em; }

/* ==== DEFENSE-MECHANISMS.HTML SPECIFIC STYLES ==== */
.defense-hero { background: linear-gradient(135deg, rgba(80, 40, 0, 0.95), rgba(120, 60, 20, 0.95), rgba(26, 26, 46, 0.98)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #d4af37; position: relative; overflow: hidden; }
.defense-hero::before { content: "🛡️"; position: absolute; font-size: 20rem; opacity: 0.03; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.defense-hero h1 { font-size: 3.5rem; color: #d4af37; margin-bottom: 0.5rem; text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
.defense-intro { background: rgba(0, 0, 0, 0.6); border-left: 5px solid #d4af37; padding: 30px; margin: 30px auto; border-radius: 8px; max-width: 1200px; }
.defense-card { background: rgba(0, 0, 0, 0.6); border-left: 5px solid #d4af37; padding: 25px; margin: 20px 0; border-radius: 8px; transition: all 0.3s ease; }
.defense-card:hover { transform: translateX(10px) scale(1.02); border-left-color: #f1d98f; box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6); }
.maturity-badge { display: inline-block; background: rgba(139, 79, 191, 0.6); padding: 5px 12px; border-radius: 5px; font-size: 0.8rem; text-transform: uppercase; }
.maturity-primitive { color: #ff6b6b; }
.maturity-neurotic { color: #f59e0b; }
.maturity-immature { color: #eab308; }

/* ==== DEITIES.HTML SPECIFIC STYLES ==== */
.section-container { margin-bottom: 40px; }
.subsection-title { margin-bottom: 20px; }
.btn { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(212, 175, 55, 0.3); color: var(--text-light); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; }
.btn:hover { background: var(--gold); color: var(--dark-bg); }
/* ==== ARCHETYPE-SELECTION.HTML SPECIFIC STYLES ==== */
.archetype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 30px 0; }
.archetype-card { background: rgba(0, 0, 0, 0.4); border-left: 5px solid var(--gold); padding: 20px; border-radius: 15px; transition: all 0.3s ease; cursor: pointer; }
.archetype-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); }

/* ==== ARCHETYPE-DASHBOARD.HTML SPECIFIC STYLES ==== */
.dashboard-section { margin: 40px 0; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.dashboard-card { background: rgba(0, 0, 0, 0.4); border-left: 5px solid var(--gold); padding: 20px; border-radius: 12px; }

/* ==== AROMATHERAPY.HTML SPECIFIC STYLES ==== */
.essential-oils-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 30px 0; }
.oil-card { background: rgba(0, 0, 0, 0.4); border-left: 5px solid var(--gold); padding: 20px; border-radius: 12px; }

/* ==== ASPECTS.HTML SPECIFIC STYLES ==== */
.aspects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0; }
.aspect-card { background: rgba(0, 0, 0, 0.4); border-left: 5px solid var(--gold); padding: 15px; border-radius: 10px; }

/* ==== ASTROLOGY-GLOSSARY.HTML SPECIFIC STYLES ==== */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 20px 0; }
.glossary-term { background: rgba(0, 0, 0, 0.4); border-left: 3px solid var(--gold); padding: 15px; border-radius: 8px; }

/* ==== COLOR-THERAPY.HTML SPECIFIC STYLES ==== */
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }
.color-card { background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 12px; border-left: 5px solid; }
.color-card.red { border-left-color: #ef4444; }
.color-card.orange { border-left-color: #f97316; }
.color-card.yellow { border-left-color: #eab308; }
.color-card.green { border-left-color: #22c55e; }
.color-card.blue { border-left-color: #3b82f6; }
.color-card.purple { border-left-color: #a855f7; }
/* ==== ALCHEMY.HTML SPECIFIC STYLES ==== */
.alchemy-stage { background: rgba(0, 0, 0, 0.6); border-left: 5px solid var(--gold); padding: 25px; margin: 20px 0; border-radius: 12px; transition: all 0.3s ease; }
.alchemy-stage:hover { transform: translateX(10px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6); }
.stage-number { font-size: 3em; color: var(--gold); font-weight: bold; display: inline-block; margin-right: 15px; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
.stage-latin { color: #f1d98f; font-style: italic; font-size: 1.2em; margin: 10px 0; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin: 2rem 0; }
.process-card { background: rgba(0, 0, 0, 0.6); border: 2px solid #8b4fbf; padding: 20px; border-radius: 12px; transition: all 0.3s ease; }
.process-card:hover { transform: scale(1.05); border-color: var(--gold); box-shadow: 0 5px 20px rgba(212, 175, 55, 0.6); }
.symbol-icon { font-size: 3em; text-align: center; margin: 15px 0; filter: drop-shadow(0 0 10px currentColor); }
.correspondence-table { width: 100%; border-collapse: collapse; margin: 2rem 0; background: rgba(0, 0, 0, 0.6); border-radius: 12px; overflow: hidden; }
.correspondence-table th { background: linear-gradient(135deg, #c0392b, #8b1a1a); color: var(--gold); padding: 15px; text-align: left; }
.correspondence-table td { padding: 12px 15px; border-bottom: 1px solid rgba(139, 79, 191, 0.6); }
.correspondence-table tr:hover { background: rgba(139, 79, 191, 0.6); }

/* ==== ASTRAL-PROJECTION.HTML SPECIFIC STYLES ==== */
.font-3xl { font-size: 3em; }
/* ==== AYURVEDA.HTML SPECIFIC STYLES ==== */
.ayuveda-page-body { background: linear-gradient(135deg, #713f12 0%, #1a1a2e 50%, #92400e 100%); background-attachment: fixed; overflow-y: auto; }
.ayurveda-page-hero { background: linear-gradient(135deg, rgba(217, 119, 6, 0.6), rgba(146, 64, 14, 0.5), rgba(113, 63, 18, 0.6)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #f59e0b; box-shadow: 0 10px 40px rgba(245, 158, 11, 0.6); }
.ayurveda-page-hero h1 { font-size: 3.5em; color: #fbbf24; text-shadow: 0 0 20px rgba(245, 158, 11, 0.6); margin-bottom: 20px; }
.dosha-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin: 3rem 0; }
/* ==== BIBLICAL-CATASTROPHES.HTML SPECIFIC STYLES ==== */
.apocalypse-hero { background: linear-gradient(135deg, rgba(220, 38, 38, 0.6), rgba(139, 0, 0, 0.6), rgba(26, 26, 46, 0.98)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #dc2626; position: relative; overflow: hidden; }
.apocalypse-hero::before { content: "🌋"; position: absolute; font-size: 20rem; opacity: 0.05; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.apocalypse-hero h1{ font-size: 3.5rem; background: linear-gradient(135deg, #dc2626, #f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
.event-card { background: rgba(0, 0, 0, 0.6); border-left: 5px solid #dc2626; padding: 25px; margin: 30px 0; border-radius: 8px; transition: all 0.3s ease; }
.event-card:hover { transform: translateX(10px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.6); }
.biblical-reference { background: rgba(0, 0, 0, 0.6); border-left: 4px solid var(--gold); padding: 15px 20px; margin: 20px 0; border-radius: 4px; font-style: italic; }
.theory-box { background: rgba(0, 0, 0, 0.6); border: 2px solid #3b82f6; padding: 25px; border-radius: 10px; margin: 30px 0; }

/* ==== BRONZE-AGE-COLLAPSE.HTML SPECIFIC STYLES ==== */
.bronze-hero { background: linear-gradient(135deg, rgba(139, 79, 191, 0.6), rgba(74, 44, 94, 0.9), rgba(26, 26, 46, 0.95)); padding: 80px 20px; text-align: center; border-bottom: 3px solid var(--gold); position: relative; overflow: hidden; }
/* ==== CELLULAR-CONSCIOUSNESS.HTML SPECIFIC STYLES ==== */
.cellular-body { background: linear-gradient(135deg, #0a4d3c 0%, #1a1a2e 50%, #0f2027 100%); background-attachment: fixed; overflow-y: auto; }
.cellular-page-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(6, 95, 70, 0.5), rgba(15, 32, 39, 0.8)); padding: 80px 20px; text-align: center; border-bottom: 3px solid #10b981; box-shadow: 0 10px 40px rgba(16, 185, 129, 0.6); }
.cellular-page-hero h1 { font-size: 3.5em; color: #10b981; text-shadow: 0 0 20px rgba(16, 185, 129, 0.5); margin-bottom: 20px; }
.consciousness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin: 3rem 0; }.level-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.85em; font-weight: bold; margin-bottom: 10px; }

/* ==== COGNITIVE-BIASES.HTML SPECIFIC STYLES ==== */
/* (no page-specific overrides - uses universal styles) */

/* ==== COLORS-FREQUENCY.HTML SPECIFIC STYLES ==== */
.colors-redirect { text-align: center; color: var(--text-light); }

/* ==== CONSCIOUSNESS-EVOLUTION.HTML SPECIFIC STYLES ==== */
/* (no page-specific overrides - uses universal styles) */

/* ==== QUANTUM-CONSCIOUSNESS.HTML SPECIFIC STYLES ==== */
/* (no page-specific overrides - uses universal styles) */

/* ==== CONSCIOUSNESS-OBSERVER.HTML SPECIFIC STYLES ==== */
/* (unique page-specific styles) */
.card-link { text-decoration: none; }

/* ==== CONSCIOUSNESS.HTML SPECIFIC STYLES ==== */
/* (unique page-specific styles) */
.loading { color: var(--text-light); text-align: center; padding: 40px; }
#consciousness-scale { margin: 30px 0; }
.interpretation { margin: 10px 0; padding: 10px; }
.interpretation.positive { background: rgba(16, 185, 129, 0.1); }
.interpretation h4 { color: var(--gold); margin: 5px 0; }

/* ==== ARTIFICIAL-INTELLIGENCE.HTML SPECIFIC STYLES ==== */
/* (unique page-specific styles) */
.text-cyan { color: #06b6d4; }

/* ==== COSMIC-VORTEX.HTML SPECIFIC STYLES ==== */
/* (unique page-specific styles) */
.principles-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

/* ==== CRYSTALS.HTML SPECIFIC STYLES ==== */
/* (unique page-specific styles) */
#crystals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0; }

/* ==== DREAMS.HTML SPECIFIC STYLES ==== */
.feature-card { background: rgba(0, 0, 0, 0.4); border-left: 5px solid var(--gold); padding: 20px; border-radius: 12px; text-align: center; }
.feature-card .icon { font-size: 3em; margin: 10px 0; }
.interpretation { margin: 15px 0; padding: 10px 0; }
.interpretation h4 { color: var(--gold); margin: 8px 0; font-size: 0.95em; }
.interpretation p { color: var(--text-light); margin: 5px 0; line-height: 1.6; }

/* ====================================================
   SMARAGDOVÁ DESKA - SACRED GEOMETRY (Added 26.2.2026)
   ==================================================== */

/* Piktogram Container */
.piktogram-container {
    max-width: 600px;
    margin: 2rem auto;
    border: 2px solid var(--gold);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

#sri-yantra-canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Frequency Controls */
.frequency-controls {
    max-width: 700px;
    margin: 2rem auto;
    padding: 25px;
    background: rgba(139, 79, 191, 0.2);
    border-left: 5px solid var(--gold);
    border-radius: 10px;
}

.control-group {
    margin-bottom: 20px;
}

.control-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 1rem;
}

.freq-select {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--gold);
    border-radius: 5px;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
}

.freq-select:focus {
    outline: none;
    border-color: var(--light-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.freq-slider {
    width: 80%;
    margin-right: 10px;
    cursor: pointer;
}

.slider-value {
    display: inline-block;
    min-width: 50px;
    text-align: center;
    font-weight: bold;
    color: var(--gold);
}

.button-group {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary, .btn-shield {
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.btn-secondary:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
}

.btn-secondary:active {
    transform: scale(0.98);
}

.btn-shield {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.btn-shield:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5);
}

.btn-shield:active {
    transform: scale(0.98);
}

/* Warning Box */
.warning-box {
    background: rgba(239, 68, 68, 0.2);
    border-left: 5px solid #ef4444;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.warning-box p {
    margin: 0 0 10px 0;
    color: var(--text-light);
    font-weight: bold;
}

.warning-box ul {
    margin: 10px 0 0 20px;
    color: var(--text-light);
    line-height: 1.8;
}

/* Help Box */
.help-box {
    background: rgba(59, 130, 246, 0.2);
    border-left: 5px solid #3b82f6;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.help-box h3 {
    margin-top: 0;
    color: var(--gold);
}

.help-box ol {
    margin: 10px 0 0 20px;
    color: var(--text-light);
    line-height: 1.8;
}

.help-box ol li {
    margin-bottom: 10px;
}

/* Status indicators */
.status-active {
    color: #10b981;
    font-weight: bold;
}

.status-inactive {
    color: #6b7280;
}

/* Responsive */


/* ==== RESPONSIVE: btn buttons at tablet sizes ==== */
@media (max-width: 1023px) and (min-width: 768px) {
    .btn, button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

@media (max-width: 767px) and (min-width: 481px) {
    .btn, button {
        padding: 8px 16px;
        font-size: 0.85em;
    }
}

/* ==== RESPONSIVE: lists and tables on mobile ==== */

/* ==== MOBILE-SPECIFIC IMPROVEMENTS ==== */

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
    button,
    .btn,
    a[class*="btn"],
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    .menu-dropdown a {
        padding: 14px 16px;
    }
    
    .encyclopedia-card:hover {
        transform: none;
    }
}

/* ==== LANDSCAPE ORIENTATION ==== */

@media (max-height: 600px) and (orientation: landscape) {
    .page-hero {
        padding: 20px 15px;
    }
    
    .page-hero h1 {
        font-size: 1.5em;
        margin-bottom: 5px;
    }
    
    .page-hero p {
        font-size: 0.85em;
    }
    
    h2 { font-size: 1.3em; }
    h3 { font-size: 0.95em; }
    
    .achievements-badge {
        bottom: 76px;
        left: 8px;
        width: 32px;
        height: 32px;
        font-size: 0.9em;
    }
}

/* ==== PRINT STYLES ==== */


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

/* CRITICAL: Centrování obsahu - vždy platí, přebíjí všechny media queries */
.container,
body .container,
html body .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.content-section,
body .content-section,
.container .content-section {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.encyclopedia-grid,
.content-section .encyclopedia-grid,
body .encyclopedia-grid {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==================================================== 
   UNIFIED GRID OVERRIDE - Konzistentní počet boxů na všech stránkách
   Přebíjí všechny předchozí auto-fit definice
   ==================================================== */

/* Desktop: 4 boxy na řádek */
body .encyclopedia-grid,
body .archetype-grid,
body .features-grid,
body .systems-grid,
body .path-selector,
body .connections-grid,
body .philosophy-grid,
body .grid-autofit-280,
body .grid-autofit-250,
body .grid-autofit-250-gap15,
body .grid-autofit-300-gap15,
body .grid-autofit-200-gap15,
body .grid-auto-fit-300,
body .grid-auto-fit-220,
body .grid-auto-fit-200,
body .unified-grid,
body [class*="grid-autofit"],
body [class*="grid-auto-fit"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* 1200px a méně: 3 boxy na řádek */

/* 992px a méně: 2 boxy na řádek */

/* 768px a méně: 1 box na řádek */

/* ==================================================== 
   UNIFIED GRID - VŠECHNY SPECIÁLNÍ GRIDY
   Přebíjí všechny ostatní definice pro konzistentní layout
   ==================================================== */

/* Desktop: 4 boxy na řádek - VŠECHNY grid třídy */
body .planet-info-grid,
body .examples-grid,
body .chakra-info-grid,
body .rune-grid,
body .process-grid,
body .experiment-grid,
body .comparison-grid,
body .calculator-grid,
body .tarot-grid,
body .symbol-grid,
body .numbers-grid,
body .example-grid,
body .visualization-grid,
body .vertebrae-grid,
body .treatment-grid,
body .tradition-grid,
body .tcm-grid,
body .stats-grid,
body .sephirot-grid,
body .sense-grid,
body .results-grid,
body .planet-grid,
body .personality-grid,
body .paradox-grid,
body .meridian-grid,
body .mbti-grid,
body .inventor-grid,
body .chakra-grid,
body .house-grid,
body .herbs-grid,
body .fractal-grid,
body .dna-grid,
body .degree-grid,
body .consciousness-grid,
body .calendar-grid,
body .aspect-grid,
body .grid-test-cards,
body .grid-tao-examples,
body [class$="-grid"],
body [class*="-grid "] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* 1200px: 3 boxy */

/* 992px: 2 boxy */

/* 768px: 1 box */

/* ==================================================== 
   FINAL GRID OVERRIDE - grid-cols třídy
   ==================================================== */

body .grid-cols-4,
body .grid-cols-6,
body .encyclopedia-grid.grid-cols-4,
body .encyclopedia-grid.grid-cols-6,
body [class*="grid-cols-"] {
    grid-template-columns: repeat(3, 1fr) !important;
}


/* ==================================================== 
   ABSOLUTNÍ FINÁLNÍ GRID OVERRIDE
   Přebíjí VŠECHNY grid definice na celém webu
   3 sloupce desktop → 2 tablet → 1 mobil
   ==================================================== */

/* DESKTOP: Vždy 3 sloupce (kromě explicitních 2-col) */
body .encyclopedia-grid,
body .archetype-grid,
body .features-grid,
body .systems-grid,
body .path-selector,
body .connections-grid,
body .philosophy-grid,
body .unified-grid,
body .grid-3col,
body .grid-gap-20,
body [class*="grid-autofit"],
body [class*="grid-auto-fit"],
body [class*="grid-cols-"],
body [class$="-grid"]:not([class*="grid-2col"]),
body [class*="-grid "]:not([class*="grid-2col"]),
body [class*=" grid-"]:not([class*="grid-2col"]) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* EXPLICITNÍ 2-SLOUPCOVÉ GRIDY - vždy 2 sloupce */
body .grid-2col,
body .grid-2col-gap30,
body .grid-2col-gap-30,
body [class*="grid-2col"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* TABLET 992px: 2 sloupce */

/* MOBIL 768px: 1 sloupec */

/* Centrování posledního lichého boxu v řádku */
body .encyclopedia-grid > *:last-child:nth-child(3n+1),
body .encyclopedia-grid > *:last-child:nth-child(3n+2),
body [class$="-grid"] > *:last-child:nth-child(3n+1),
body [class$="-grid"] > *:last-child:nth-child(3n+2) {
    /* Lichý box zůstane na místě - grid se postará o zarovnání */
}

/* ==================================================== 
   SMART GRID - 4 položky = 2+2, ne 3+1
   ==================================================== */

/* Stat-grid a podobné sekce s přesně 4 položkami - vždy 2+2 */
body .stat-grid,
body .encyclopedia-grid.stat-grid,
body .encyclopedia-grid.grid-cols-4,
body [class*="stat-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Na tabletu zůstane 2 sloupce */

/* Na mobilu 1 sloupec */

/* ==================================================== 
   SINGLE-ITEM GRIDS - 1 položka = plná šířka
   ==================================================== */
body .encyclopedia-grid:has(> :first-child:last-child),
body .archetype-grid:has(> :first-child:last-child),
body [class$="-grid"]:has(> :first-child:last-child) {
    grid-template-columns: 1fr !important;
}

body .encyclopedia-grid:has(> :first-child:last-child) > *,
body .archetype-grid:has(> :first-child:last-child) > *,
body [class$="-grid"]:has(> :first-child:last-child) > * {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* ==================================================== 
   CENTROVÁNÍ NEÚPLNÝCH ŘÁDKŮ
   Když počet boxů není dělitelný počtem sloupců,
   poslední řádek se vycentruje místo zarovnání vlevo
   ==================================================== */

/* Základní centrování pro všechny gridy - DISABLED, causes narrow boxes */
/* justify-items: center způsobuje úzké boxy - nepoužívat! */

/* Karty v gridu - jednotná šířka - plná šířka buňky */
body .encyclopedia-grid > *,
body .archetype-grid > *,
body .features-grid > *,
body [class$="-grid"] > * {
    width: 100% !important;
    max-width: none !important;
}

/* Na mobilu bez max-width omezení */

/* ==================================================== 
   GRID LAYOUT - ČISTÝ GRID, NE FLEXBOX
   ==================================================== */

body .encyclopedia-grid,
body .archetype-grid,
body .features-grid,
body .systems-grid,
body .unified-grid,
body [class$="-grid"]:not(.stat-grid):not(.footer-grid),
body [class*="-grid "]:not(.stat-grid):not(.footer-grid) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}

/* TABLET: 2 sloupce */

/* MOBIL: 1 sloupec */

/* Karty - plná šířka v buňce gridu */
body .encyclopedia-grid > *,
body .archetype-grid > *,
body .features-grid > *,
body .systems-grid > *,
body .unified-grid > *,
body [class$="-grid"]:not(.stat-grid):not(.footer-grid) > * {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Tablet: 2 na řádek */

/* Mobil: 1 na řádek */

/* Stat-grid zůstává 2+2 s gridem */
body .stat-grid,
body .encyclopedia-grid.stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ==================================================== 
   SPECIÁLNÍ OVERRIDE PRO grid-cols-6 (archetypy na homepage)
   ==================================================== */

body .encyclopedia-grid.grid-cols-6,
body .grid-cols-6 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

body .encyclopedia-grid.grid-cols-6 > *,
body .grid-cols-6 > * {
    flex: 0 0 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
}


/* ==================================================== 
   OPRAVA ŠÍŘKY BOXŮ - Plná šířka bez omezení
   ==================================================== */

/* Stat-grid - plná šířka buněk */
body .stat-grid,
body .encyclopedia-grid.stat-grid,
body [class*="stat-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .stat-grid > *,
body .encyclopedia-grid.stat-grid > *,
body [class*="stat-grid"] > * {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/* Běžné gridy - plná šířka */
body .encyclopedia-grid:not(.stat-grid) > *,
body .archetype-grid > *,
body .features-grid > *,
body .systems-grid > *,
body .unified-grid > *,
body [class$="-grid"]:not(.stat-grid) > * {
    max-width: none !important;
    width: 100% !important;
}

/* Desktop: 3 na řádek - správný výpočet */
body .encyclopedia-grid:not(.stat-grid),
body .archetype-grid,
body .features-grid,
body .systems-grid,
body .unified-grid,
body [class$="-grid"]:not(.stat-grid) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body .encyclopedia-grid:not(.stat-grid) > *,
body .archetype-grid > *,
body .features-grid > *,
body .systems-grid > *,
body .unified-grid > *,
body [class$="-grid"]:not(.stat-grid) > * {
    flex: 1 1 calc(33.333% - 20px) !important;
    min-width: 280px !important;
    max-width: calc(33.333% - 14px) !important;
}

/* Tablet */

/* Mobil */

/* ==================================================== 
   SMART GRID - Automatické 2+2 pro sekce se 4 položkami
   Používá CSS :has() selector pro detekci počtu
   ==================================================== */

/* Grid se 4 položkami = 2+2 layout */
body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
body .archetype-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
body .features-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *,
body .archetype-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *,
body .features-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) > *,
body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))) > * {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Grid se 2 položkami = 2 sloupce */
body .encyclopedia-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),
body [class$="-grid"]:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Grid s 1 položkou = 1 sloupec, centrovaný */
body .encyclopedia-grid:has(> :first-child:last-child),
body [class$="-grid"]:has(> :first-child:last-child) {
    display: flex !important;
    justify-content: center !important;
}

body .encyclopedia-grid:has(> :first-child:last-child) > *,
body [class$="-grid"]:has(> :first-child:last-child) > * {
    max-width: 600px !important;
}

/* Mobile override - vždy 1 sloupec */

/* ==================================================== 
   HERO SEKCE - Plná šířka na všech stránkách
   ==================================================== */

/* Hero vždy přes celou šířku */
body .page-hero,
body [class*="-hero"],
body [class*="hero-"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Pokud je hero první element v body (mimo container) */
body > .page-hero,
body > [class*="-hero"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Hero po menu-placeholder */
#menu-placeholder + .page-hero,
#menu-placeholder + [class*="-hero"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Centrování obsahu v hero */
body .page-hero > *,
body [class*="-hero"] > * {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==================================================== 
   UNIFIED FOOTER COMPONENT
   Jednotný footer pro všechny stránky SunnyBase
   ==================================================== */

.astrokeys-footer {
    background: linear-gradient(135deg, rgba(20, 5, 5, 0.96) 0%, rgba(10, 2, 2, 0.97) 50%, rgba(20, 5, 5, 0.96) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 3px solid var(--gold, #d4af37);
    margin-top: 60px;
    padding: 0;
    width: 100%;
    position: relative;
}

.astrokeys-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #d4af37), transparent);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 30px 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}


.footer-section {
    padding: 0;
}

.footer-title {
    color: var(--gold, #d4af37);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.footer-quote {
    color: rgba(212, 175, 55, 0.8);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding: 10px;
    background: rgba(212, 175, 55, 0.1);
    border-left: 2px solid var(--gold, #d4af37);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--gold, #d4af37);
    transform: translateX(5px);
}

/* Spodní lišta */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    gap: 20px;
}


.footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.footer-copyright p {
    margin: 0 0 5px 0;
}

.footer-copyright strong {
    color: var(--gold, #d4af37);
}

.footer-tagline {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.footer-social {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-badge {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold, #d4af37);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Skrytí starých footerů */
footer:not(.astrokeys-footer) {
    display: none !important;
}

/* ==================================================== 
   CARD FIXES - Spacing, Cursor, Height
   ==================================================== */

/* Odstraň cursor: pointer z neklikatelných karet (jen pokud NEJSOU uvnitř <a>) */
:not(a) > .encyclopedia-card:not(a):not([onclick]),
:not(a) > .feature-card:not(a):not([onclick]),
:not(a) > .path-card:not(a):not([onclick]),
:not(a) > section.encyclopedia-card,
:not(a) > div.encyclopedia-card:not(a) {
    cursor: default !important;
}

/* Karty s odkazem nebo uvnitř <a> mají pointer */
a.encyclopedia-card,
a .encyclopedia-card,
a > .encyclopedia-card,
a > div.encyclopedia-card,
.encyclopedia-card a,
.encyclopedia-card[onclick],
[data-href].encyclopedia-card {
    cursor: pointer !important;
}

/* Spacing mezi standalone kartami (mimo grid) */
.content-section > .encyclopedia-card,
.content-section > section.encyclopedia-card,
.container > .encyclopedia-card,
section.encyclopedia-card {
    margin-bottom: 25px !important;
}

/* Poslední karta nepotřebuje margin-bottom */
.content-section > .encyclopedia-card:last-child,
.content-section > section.encyclopedia-card:last-child {
    margin-bottom: 0 !important;
}

/* Reset min-height pro flexibilnější karty */
.encyclopedia-card,
.feature-card,
.path-card {
    min-height: auto !important;
}

/* Karty v gridu - rozumná minimální výška */
.encyclopedia-grid > .encyclopedia-card,
.features-grid > .feature-card,
[class$="-grid"] > * {
    min-height: 180px !important;
}

/* Větší gap v gridech pro lepší vizuální oddělení */
body .encyclopedia-grid,
body .features-grid,
body .archetype-grid,
body [class$="-grid"] {
    gap: 25px !important;
}

/* Karty zabírají celou šířku buňky gridu */
body .encyclopedia-grid > *,
body .features-grid > *,
body [class$="-grid"] > * {
    width: 100% !important;
    max-width: none !important;
}

/* Související témata - vždy před footerem */
.related-topics-section {
    margin-top: 40px !important;
    margin-bottom: 30px !important;
}

/* Footer musí být vždy poslední */
.astrokeys-footer {
    margin-top: 40px !important;
}

/* ==================================================== 
   🔥 FINÁLNÍ GRID FIX - NEJVYŠŠÍ PRIORITA
   Přebíjí VŠECHNY předchozí definice
   ==================================================== */

/* Reset všech flex omezení na gridech */
html body .encyclopedia-grid,
html body .encyclopedia-grid:not(.stat-grid),
html body .archetype-grid,
html body .features-grid,
html body .systems-grid,
html body .unified-grid,
html body .grid-2col,
html body .grid-2col-gap30,
html body [class$="-grid"]:not(.footer-grid),
html body [class*="encyclopedia-grid"] {
    display: grid !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3 sloupce desktop - plná šířka boxů */
html body .encyclopedia-grid:not(.stat-grid):not(.grid-2col),
html body .archetype-grid,
html body .features-grid,
html body .systems-grid,
html body .unified-grid,
html body [class$="-grid"]:not(.stat-grid):not(.grid-2col):not(.footer-grid) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}

/* 2 sloupce pro grid-2col třídy */
html body .grid-2col,
html body .grid-2col-gap30,
html body .grid-2col-gap-30,
html body [class*="grid-2col"],
html body .encyclopedia-grid.grid-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
}

/* Stat-grid je vždy 2 sloupce */
html body .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

/* Karty - PLNÁ ŠÍŘKA, žádné omezení */
html body .encyclopedia-grid > *,
html body .encyclopedia-grid:not(.stat-grid) > *,
html body .archetype-grid > *,
html body .features-grid > *,
html body .systems-grid > *,
html body .unified-grid > *,
html body .grid-2col > *,
html body .grid-2col-gap30 > *,
html body [class$="-grid"]:not(.footer-grid) > *,
html body [class*="encyclopedia-grid"] > * {
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box !important;
}

/* TABLET: 2 sloupce */

/* MOBIL: 1 sloupec */

/* Footer grid - speciální 4 sloupce */
html body .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
}


/* ==================================================== 
   🎯 SMART GRID - NEJVYŠŠÍ PRIORITA (po FINÁLNÍ GRID FIX)
   Automatické 2+2 pro sekce se 4 položkami
   ==================================================== */

/* 4 položky = 2+2 layout */
html body .encyclopedia-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
html body .archetype-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
html body .features-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))),
html body [class$="-grid"]:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
}

/* 3 položky = 3 sloupce */
html body .encyclopedia-grid:has(> :nth-child(3)):not(:has(> :nth-child(4))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))),
html body [class$="-grid"]:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}

/* 2 položky = 2 sloupce */
html body .encyclopedia-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(2)):not(:has(> :nth-child(3))),
html body [class$="-grid"]:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
}

/* 1 položka = 1 sloupec, centrovaný */
html body .encyclopedia-grid:has(> :first-child:last-child),
html body [class*="encyclopedia-grid"]:has(> :first-child:last-child),
html body [class$="-grid"]:has(> :first-child:last-child) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
}

html body .encyclopedia-grid:has(> :first-child:last-child) > *,
html body [class*="encyclopedia-grid"]:has(> :first-child:last-child) > *,
html body [class$="-grid"]:has(> :first-child:last-child) > * {
    max-width: 600px !important;
}

/* 6 položek = 3+3 */
html body .encyclopedia-grid:has(> :nth-child(6)):not(:has(> :nth-child(7))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 5 položek = 3+2 (lepší než 5 v řadě) */
html body .encyclopedia-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 7 položek = 4+3 nebo 3+3+1 - použij 4 sloupce */
html body .encyclopedia-grid:has(> :nth-child(7)):not(:has(> :nth-child(8))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(7)):not(:has(> :nth-child(8))) {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* 8 položek = 4+4 */
html body .encyclopedia-grid:has(> :nth-child(8)):not(:has(> :nth-child(9))),
html body [class*="encyclopedia-grid"]:has(> :nth-child(8)):not(:has(> :nth-child(9))) {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Tablet - max 2 sloupce pro malé počty */

/* Mobil - vždy 1 sloupec */

/* ==================================================== 
   📚 SOUVISEJÍCÍ TÉMATA - FINÁLNÍ PRAVIDLA
   ==================================================== */

/* Container */
html body .related-topics-section {
    margin-top: 50px !important;
    margin-bottom: 30px !important;
    padding: 30px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    border-top: 3px solid var(--gold, #d4af37) !important;
}

/* Nadpis */
html body .related-topics-section h3,
html body .related-topics-section .related-topics-title {
    color: var(--gold, #d4af37) !important;
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 25px !important;
}

/* Grid - primární témata 3 sloupce, sekundární 3 sloupce */
html body .related-topics-primary {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

html body .related-topics-secondary {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

/* Karty v related topics */
html body .related-topics-section a,
html body .related-topics-section .related-topic-card {
    display: block !important;
    padding: 15px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-left: 3px solid var(--gold, #d4af37) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

html body .related-topics-section a:hover,
html body .related-topics-section .related-topic-card:hover {
    transform: translateX(5px) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border-left-color: var(--light-gold, #f0d875) !important;
}

/* Tablet */

/* Mobil */

/* ==================================================== 
   📋 SEZNAM BEZ ODRÁŽEK V KARTÁCH
   Odstraní puntíky a čísla z ul/ol uvnitř karet
   ==================================================== */

html body .encyclopedia-card ul,
html body .encyclopedia-card ol,
html body .feature-card ul,
html body .feature-card ol,
html body .path-card ul,
html body .path-card ol,
html body .archetype-card ul,
html body .archetype-card ol,
html body [class*="-card"] ul,
html body [class*="-card"] ol,
html body .encyclopedia-grid ul,
html body .encyclopedia-grid ol,
html body [class$="-grid"] ul,
html body [class$="-grid"] ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Listy uvnitř karet - bez odrážek, s padding pro text */
html body .encyclopedia-card li,
html body .feature-card li,
html body .path-card li,
html body [class*="-card"] li {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

/* Pokud li má emoji na začátku, přidej padding */
html body .encyclopedia-card li:not(:empty),
html body [class*="-card"] li:not(:empty) {
    padding-left: 5px !important;
}

/* ==================================================== 
   🎯 FINÁLNÍ GRID CENTROVÁNÍ - VŠECHNY STRÁNKY
   Přebíjí všechny předchozí definice
   ==================================================== */

/* Hlavní kontejner - vždy centrovaný s max-width */
html body .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Content section - plná šířka uvnitř kontejneru */
html body .content-section {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
}

/* GRIDY - plná šířka, centrované */
html body .encyclopedia-grid,
html body .archetype-grid,
html body .features-grid,
html body .systems-grid,
html body .connections-grid,
html body .philosophy-grid,
html body [class$="-grid"],
html body [class*="grid-autofit"],
html body [class*="grid-auto-fit"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* KARTY v gridu - plná šířka buňky */
html body .encyclopedia-grid > *,
html body .archetype-grid > *,
html body .features-grid > *,
html body [class$="-grid"] > *,
html body [class*="grid-autofit"] > *,
html body [class*="grid-auto-fit"] > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ==================================================== 
   💡 AHA/INSIGHT BOX - UNIFIED STYLING
   Konzistentní vzhled pro všechny insight boxy na webu
   ==================================================== */

/* Základní AHA box */
.aha-box,
.insight-box,
.aha-insight-box,
[class*="insight-box"],
.wisdom-quote {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 79, 191, 0.1)) !important;
    border-left: 4px solid var(--gold, #d4af37) !important;
    border-radius: 8px !important;
    padding: 20px 25px !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    position: relative !important;
}

/* Standalone insight/aha/wisdom box v content-section – centrovat na šířku containeru */
.content-section > .aha-box,
.content-section > .insight-box,
.content-section > .aha-insight-box,
.content-section > [class*="insight-box"],
.content-section > .wisdom-quote,
.content-section > .encyclopedia-card.wisdom-quote,
.content-section > .encyclopedia-card[class*="insight-box"] {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1000px !important;
}

/* AHA box nadpis */
.aha-box h3,
.insight-box h3,
.aha-insight-box h3,
[class*="insight-box"] h3,
.wisdom-quote h3 {
    color: var(--gold, #d4af37) !important;
    font-size: 1.3rem !important;
    margin: 0 0 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* AHA box text */
.aha-box p,
.insight-box p,
.aha-insight-box p,
[class*="insight-box"] p,
.wisdom-quote p {
    color: var(--text-light, #e0e0e0) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin: 10px 0 !important;
}

/* Barevné varianty AHA boxů */
.aha-box.red, .insight-box.red, .insight-box-red, [class*="insight-box-red"] {
    border-left-color: #ef4444 !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.red, .insight-box.red h3, .insight-box-red h3, [class*="insight-box-red"] h3 {
    color: #ef4444 !important;
}

.aha-box.purple, .insight-box.purple, .insight-box-purple, [class*="insight-box-purple"] {
    border-left-color: #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.purple, .insight-box.purple h3, .insight-box-purple h3, [class*="insight-box-purple"] h3 {
    color: #8b5cf6 !important;
}

.aha-box.blue, .insight-box.blue, .insight-box-blue, [class*="insight-box-blue"] {
    border-left-color: #3b82f6 !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.blue, .insight-box.blue h3, .insight-box-blue h3, [class*="insight-box-blue"] h3 {
    color: #3b82f6 !important;
}

.aha-box.green, .insight-box.green, .insight-box-green, [class*="insight-box-green"] {
    border-left-color: #10b981 !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.green, .insight-box.green h3, .insight-box-green h3, [class*="insight-box-green"] h3 {
    color: #10b981 !important;
}

.aha-box.pink, .insight-box.pink, .insight-box-pink, [class*="insight-box-pink"] {
    border-left-color: #ec4899 !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.pink, .insight-box.pink h3, .insight-box-pink h3, [class*="insight-box-pink"] h3 {
    color: #ec4899 !important;
}

.aha-box.cyan, .insight-box.cyan, .insight-box-cyan, [class*="insight-box-cyan"] {
    border-left-color: #06b6d4 !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(139, 79, 191, 0.08)) !important;
}
.aha-box.cyan, .insight-box.cyan h3, .insight-box-cyan h3, [class*="insight-box-cyan"] h3 {
    color: #06b6d4 !important;
}

/* ==================================================== 
   📏 SPACING - Konzistentní mezery
   ==================================================== */

/* Sekce */
html body .content-section {
    margin-bottom: 30px !important;
}

/* Nadpisy v sekcích */
html body .content-section h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Gridy - mezery */
html body .encyclopedia-grid,
html body [class$="-grid"] {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

/* Karty v gridu - vnitřní padding */
html body .encyclopedia-card,
html body .feature-card,
html body .path-card,
html body [class*="-card"]:not(.recommended-card) {
    padding: 20px !important;
}

/* ==================================================== 
   📱 RESPONSIVE FIXES
   ==================================================== */


/* ==================================================== 
   🎯 SPECIFIC GRID EXCEPTIONS
   Gridy které potřebují jiný počet sloupců než default 3
   ==================================================== */

/* Chakra-grid: 1 sloupec (velké karty) */
html body .chakra-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 900px;
    margin: 0 auto;
}

/* Planet-grid: 2 sloupce (velké karty) */
html body .planet-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
}

/* Sephirot-grid: 2 sloupce */
html body .sephirot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
}

/* Info gridy uvnitř karet: 3 nebo více sloupců */
html body .planet-info-grid,
html body .chakra-info-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

/* Info-box text centering */
html body .planet-info-grid .info-box,
html body .chakra-info-grid .info-box {
    text-align: center;
    padding: 15px 10px;
}

html body .planet-info-grid .info-box h4,
html body .chakra-info-grid .info-box h4 {
    margin-bottom: 8px;
}

html body .planet-info-grid .info-box p,
html body .chakra-info-grid .info-box p {
    margin: 0;
}

/* Responsive pro specifické gridy */

/* ============================================
   Grid Placeholder Cards
   Pro zachování sudého počtu v gridech
   ============================================ */

.grid-placeholder,
.encyclopedia-card.grid-placeholder,
.feature-card.grid-placeholder,
.archetype-card.grid-placeholder,
.dark-box.grid-placeholder {
    visibility: hidden;
    height: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden;
}

/* Na menších obrazovkách placeholder není potřeba */

/* ============================================
   Broken Mirrors Page - Custom Styles
   ============================================ */

.mirror-quote {
    background: rgba(139, 79, 191, 0.15);
    border-left: 4px solid var(--gold);
    padding: 20px 25px;
    margin: 25px 0;
    font-style: italic;
    color: var(--text-light);
    line-height: 1.7;
}

.mirror-quote em {
    display: block;
    margin-top: 15px;
    color: var(--gold);
    font-style: normal;
    font-size: 0.9em;
}

.connection-path {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 25px;
    margin: 25px 0;
}

.connection-path h3 {
    color: var(--gold);
    margin-bottom: 20px;
    text-align: center;
}

.path-step {
    background: rgba(139, 79, 191, 0.1);
    border-left: 3px solid #8b4fbf;
    padding: 12px 15px;
    margin: 10px 0;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.path-step:hover {
    transform: translateX(5px);
    border-left-color: var(--gold);
}

.astrokeys-connection {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(139, 79, 191, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.astrokeys-connection h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.astrokeys-connection ul {
    list-style: none;
    padding-left: 0;
}

.astrokeys-connection li {
    padding: 5px 0;
    color: var(--text-light);
}

.frankl-wisdom {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 25px;
    margin: 25px 0;
    text-align: center;
}

.frankl-wisdom blockquote {
    font-style: italic;
    color: var(--text-light);
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
}

.law-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.law-list .encyclopedia-card {
    padding: 15px;
}

.keyword {
    display: inline-block;
    background: rgba(139, 79, 191, 0.3);
    color: var(--gold);
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    margin: 3px;
}

.card-title-gold {
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 10px;
}

/* Border color variants for cards */
.border-pink { border-left-color: #d946ef !important; }
.border-gold { border-left-color: #ffd700 !important; }
.border-blue { border-left-color: #3b82f6 !important; }
.border-green { border-left-color: #10b981 !important; }
.border-red { border-left-color: #ef4444 !important; }
.border-orange { border-left-color: #f59e0b !important; }

/* ============================================
   Common Inline Style Replacements (Auto-Fix)
   ============================================ */

/* Padding variants */
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }

/* Text with padding */
.p-12-white { padding: 12px; color: white; }
.p-12-light { padding: 12px; color: rgba(255,255,255,0.8); }
.p-12-lighter { padding: 12px; color: rgba(255,255,255,0.9); }
.p-12-gold { padding: 12px; text-align: left; color: var(--gold); }
.p-12-left { padding: 12px; text-align: left; }

/* Gold title styles */
.gold-title-mb10 { color: var(--gold); margin-bottom: 10px; }
.gold-title-border { color: var(--gold); border-bottom: 3px solid var(--gold); padding-bottom: 10px; }
.gold-mb8 { color: var(--gold); margin-bottom: 8px; }
.gold-1-5em { color: var(--gold); font-size: 1.5em; }

/* Color title variants */
.green-title-mb8 { color: #10b981; margin-bottom: 8px; }
.purple-title-mb8 { color: #8b5cf6; margin-bottom: 8px; }
.purple-title-mb15 { color: #8b5cf6; margin-bottom: 15px; }
.blue-title-mb8 { color: #3b82f6; margin-bottom: 8px; }

/* Border bottoms */
.border-subtle { border-bottom: 1px solid rgba(255,255,255,0.1); }
.border-green-subtle { border-bottom: 1px solid rgba(16, 185, 129, 0.2); }

/* Font sizes with line-height */
.font-095-light { font-size: 0.95rem; color: rgba(255,255,255,0.8); }
.font-095-lh16 { font-size: 0.95rem; line-height: 1.6; text-align: center; }
.font-1-lh17 { font-size: 1rem; line-height: 1.7; }
.font-105-lh17 { font-size: 1.05rem; line-height: 1.7; }
.font-11-lh17 { font-size: 1.1rem; line-height: 1.7; }
.font-11-lh17-mb15 { font-size: 1.1rem; line-height: 1.7; margin-bottom: 15px; }
.font-115-lh18-mb15 { font-size: 1.15rem; line-height: 1.8; margin-bottom: 15px; }

/* Icon size */
.icon-3em { font-size: 3em; margin-bottom: 10px; }

/* Box styles */
.box-dark-rounded { background: rgba(0,0,0,0.4); padding: 20px; border-radius: 8px; margin: 15px 0; }
.box-purple-rounded { background: rgba(139, 92, 246, 0.15); padding: 20px; border-radius: 8px; border-left: 3px solid #8b5cf6; }

/* Paragraph styles */
.para-light { color: #e0e0e0; margin: 10px 0; line-height: 1.6; }

/* Margins */
.my-15 { margin: 15px 0; }
.my-20 { margin: 20px 0; }

/* ============================================
   Additional Inline Style Replacements (Batch 2)
   ============================================ */

/* Combined color + margin */
.red-mb10 { color: #ef4444; margin-bottom: 10px; }
.purple-mb10 { color: #8b5cf6; margin-bottom: 10px; }
.blue-mb15 { color: #3b82f6; margin-bottom: 15px; }
.gold-mb15 { color: var(--gold); margin-bottom: 15px; }

/* Font combinations */
.font-095-mt5 { font-size: 0.95em; margin-top: 5px; }
.font-105-lh17-mb10 { font-size: 1.05rem; line-height: 1.7; margin-bottom: 10px; }
.font-1-lh18-ml20 { font-size: 1rem; line-height: 1.8; margin-left: 20px; }
.font-105-italic { font-size: 1.05rem; font-style: italic; line-height: 1.7; }

/* Icon center */
.icon-center-3rem { text-align: center; font-size: 3rem; margin-bottom: 10px; }

/* Box variants */
.box-dark-lg { background: rgba(0,0,0,0.5); padding: 25px; border-radius: 8px; margin: 20px 0; }
.box-blue-light { background: rgba(59, 130, 246, 0.1); padding: 25px; border-radius: 8px; margin: 20px 0; }
.box-blue-border { background: rgba(59, 130, 246, 0.15); padding: 20px; border-radius: 8px; border-left: 3px solid #3b82f6; }
.box-blue-left { margin: 15px 0; padding: 15px; background: rgba(59, 130, 246, 0.1); border-left: 3px solid #3b82f6; }

/* Border colors */
.border-bottom-red { border-bottom: 1px solid rgba(239, 68, 68, 0.2); }

/* Padding with text align */
.p-10-left { padding: 10px; text-align: left; }
.p-10-red { padding: 10px; color: #ef4444; }

/* ============================================
   Additional Inline Style Replacements (Batch 3)
   ============================================ */

/* Icon/Emoji sizes */
.font-3em { font-size: 3em; }
.font-18em { font-size: 1.8em; margin: 40px 0 20px 0; }

/* Text styles */
.text-blue-light { color: #bfdbfe; line-height: 1.7; }
.text-light-gold { color: var(--light-gold); }
.text-italic-gray { font-style: italic; color: #aaa; margin-top: 10px; }
.text-italic-blue { margin-top: 10px; font-style: italic; color: #6ab3e6; }
.text-purple-soft { font-size: 0.9em; color: #c4b5fd; margin-top: 10px; }
.text-blue-heading { color: #60a5fa; margin: 40px 0 20px; }

/* Font combinations */
.font-095-lh17-mt15 { font-size: 0.95em; line-height: 1.7; margin-top: 15px; }
.font-095-lh17-m0 { font-size: 0.95em; line-height: 1.7; margin: 0; }

/* Padding with color */
.p-10-green { padding: 10px; color: #10b981; }

/* Border colors */
.border-left-orange { border-left-color: #f97316 !important; }
.border-bottom-purple { border-bottom: 1px solid rgba(139, 79, 191, 0.2); }

/* Box variants */
.box-purple-mt20 { background: rgba(139, 79, 191, 0.15); border-left-color: #8b4fbf; margin-top: 20px; }

/* Margins */
.mb-40 { margin-bottom: 40px; }
.lh-18 { line-height: 1.8; }

/* Hero inline styles replacement */
.hero-gold-center { text-align: center; color: var(--gold); font-size: 2.8em; margin-bottom: 15px; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); }
.hero-light-center { text-align: center; color: var(--text-light); margin-bottom: 30px; font-size: 1.2em; line-height: 1.7; }

/* ============================================
   Time Paradoxes Page - Specific Styles
   ============================================ */

/* Accuracy bar (calendar precision) */
.accuracy-bar {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
}

.accuracy-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Collapse timeline events */
.collapse-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.collapse-event {
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid #ef4444;
    padding: 20px;
    border-radius: 0 8px 8px 0;
}

.collapse-event h3 {
    color: var(--gold);
    margin-bottom: 15px;
}

.collapse-event h4 {
    color: #f87171;
    margin: 15px 0 10px;
}

.collapse-event ul {
    margin: 10px 0;
    padding-left: 20px;
}

/* DNA bar visualization */
.dna-bar {
    display: flex;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
    margin: 15px 0;
}

.dna-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
}

.dna-levantine { background: #3b82f6; }
.dna-arabian { background: #f59e0b; }
.dna-european { background: #10b981; }
.dna-african { background: #8b5cf6; }

/* Box for biblical/historical notes */
.bgbox-black-rounded {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

/* Filters buttons row */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filters .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.filters .btn.active {
    background: var(--gold);
    color: #1a1a2e;
}

/* ==================================================
   4-ITEM GRID FIX - 4 boxy vždy vedle sebe (ne 3+1)
   Používá CSS :has() - podporováno v Chrome 105+, Firefox 121+, Safari 15.4+
   ================================================== */

/* Přesně 4 položky → 4 sloupce */
body .encyclopedia-grid:has(> :nth-child(4):last-child),
body .archetype-grid:has(> :nth-child(4):last-child),
body .features-grid:has(> :nth-child(4):last-child),
body .systems-grid:has(> :nth-child(4):last-child),
body .unified-grid:has(> :nth-child(4):last-child),
body .path-selector:has(> :nth-child(4):last-child),
body .connections-grid:has(> :nth-child(4):last-child),
body .philosophy-grid:has(> :nth-child(4):last-child),
body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(4):last-child),
body [class*="-grid "]:not([class*="grid-2col"]):has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Přesně 8 položek → 4 sloupce */
body .encyclopedia-grid:has(> :nth-child(8):last-child),
body .archetype-grid:has(> :nth-child(8):last-child),
body .features-grid:has(> :nth-child(8):last-child),
body .systems-grid:has(> :nth-child(8):last-child),
body .unified-grid:has(> :nth-child(8):last-child),
body [class$="-grid"]:not([class*="grid-2col"]):has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Tablet (≤ 992px): 4 boxy → 2+2 */

/* Mobil (≤ 600px): 2 sloupce stále (boxy jsou menší ale symetrické) */

/* ==================================================
   EXPLICITNÍ GRID-4COL UTILITA
   Použijte třídu grid-4col pro vždy-4-sloupcový grid
   ================================================== */
body .grid-4col {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

/* ============================================================
   HOVER CLEANUP: Pohyb jen pro klikatelné karty
   ============================================================ */

/* Výchozí: žádný pointer cursor u karet (přepíše line ~187) */
.encyclopedia-card,
.feature-card,
.path-card,
.connection-card,
.philosophy-card,
.archetype-card,
.topic-card,
.system-card,
.mini-card,
.card {
    cursor: default !important;
}

/* Výchozí hover: žádný pohyb (jen jemný stín je ok) */
.card:hover,
.encyclopedia-card:hover,
.feature-card:hover,
.path-card:hover,
.connection-card:hover,
.philosophy-card:hover,
.archetype-card:hover,
.topic-card:hover,
.system-card:hover,
.mini-card:hover {
    transform: none !important;
    cursor: default !important;
}

/* Klikatelné karty: pointer cursor */
a .encyclopedia-card, a .feature-card, a .path-card,
a .connection-card, a .philosophy-card, a .archetype-card,
a .topic-card, a .system-card, a .mini-card, a .card,
a.encyclopedia-card, a.feature-card, a.path-card,
a.archetype-card, a.card,
.encyclopedia-card[onclick], .encyclopedia-card[data-href],
[onclick] > .encyclopedia-card, [onclick] > .feature-card,
[onclick] > .path-card, [onclick] > .archetype-card {
    cursor: pointer !important;
}

/* Pohyb jen pro klikatelné karty */
a:hover > .encyclopedia-card,
a:hover > .feature-card,
a:hover > .path-card,
a:hover > .connection-card,
a:hover > .philosophy-card,
a:hover > .archetype-card,
a:hover > .topic-card,
a:hover > .system-card,
a:hover > .mini-card,
a:hover > .card,
a.encyclopedia-card:hover,
a.feature-card:hover,
a.path-card:hover,
a.archetype-card:hover,
a.card:hover,
.encyclopedia-card[onclick]:hover,
.encyclopedia-card[data-href]:hover {
    transform: translateX(10px) scale(1.02) !important;
    border-left-color: var(--light-gold) !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
    cursor: pointer !important;
}

/* ── TOOLTIP SYSTEM ─────────────────────────────────────────────────────── */
.tooltip-term {
    border-bottom: 1px dotted var(--gold, #d4af37);
    cursor: help;
    position: relative;
    display: inline;
}

.tooltip-term::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 5, 25, 0.97);
    color: #e8e0d0;
    border: 1px solid var(--gold, #d4af37);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 0.78em;
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    max-width: 280px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
}

.tooltip-term::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gold, #d4af37);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.tooltip-term:hover::after,
.tooltip-term:hover::before {
    opacity: 1;
}

/* Tooltip se nevykreslí mimo levý okraj */

/* ══════════════════════════════════════════════════════
   GLOBAL TABLE FIXES — Klíčová díla & podobné tabulky
   ══════════════════════════════════════════════════════ */
table[style*="border-collapse"] thead tr,
table[style*="border-collapse"] th {
    background: rgba(139, 79, 191, 0.3);
    color: var(--gold, #d4af37);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid rgba(212, 175, 55, 0.4);
    font-weight: 600;
}
table[style*="border-collapse"] td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-light, #e2e8f0);
    vertical-align: top;
}
table[style*="border-collapse"] tr:hover td {
    background: rgba(212, 175, 55, 0.06);
}

/* ══════════════════════════════════════
   PLANET CARD — h2 uvnitř karty
   ══════════════════════════════════════ */
.planet-card h2 {
    font-size: 1.4em;
    color: currentColor;
    margin: 10px 0 6px;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 0 10px currentColor;
}
.planet-card h4 {
    color: var(--gold, #d4af37);
    font-size: 0.95em;
    margin: 14px 0 4px;
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════
   VÝJIMKY — gridy které musí zůstat 1 sloupcové
   Globální override výše nutí *-grid na 3 sloupce s !important.
   Zvýšená specifičnost (dvojitá třída) přebije override.
   ══════════════════════════════════════════════════════ */
body .chakra-grid.chakra-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
}

/* ══════════════════════════════════════════════════════
   MYTHS PAGE — myth-card, myth-intro, story-box, badges
   ══════════════════════════════════════════════════════ */
.myth-intro {
    background: rgba(0,0,0,0.3);
    border-left: 4px solid var(--gold, #d4af37);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 30px 0;
}
.myth-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(212,175,55,0.2);
    border-left: 5px solid var(--gold, #d4af37);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    transition: transform 0.25s, box-shadow 0.25s;
}
.myth-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212,175,55,0.2);
}
.myth-card h3 {
    color: var(--gold, #d4af37);
    font-size: 1.25rem;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.culture-badge {
    font-size: 0.72rem;
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.35);
    color: var(--gold, #d4af37);
    border-radius: 20px;
    padding: 3px 10px;
    margin-left: auto;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.story-box {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    font-size: 0.95rem;
}
.archetype-meaning {
    background: rgba(212,175,55,0.07);
    border-left: 3px solid var(--gold, #d4af37);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9rem;
}
.psychological-meaning {
    background: rgba(6,182,212,0.07);
    border-left: 3px solid #06b6d4;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 0.9rem;
}


/* ====================================================
   GLOBAL RESPONSIVE FIX - všechny stránky
   Řeší rozbité layouty na mobilech bez nutnosti
   upravovat každou stránku zvlášť.
   ==================================================== */

/* -------------------------------------------------------
   1. FLEX WRAP — všechny inline flex kontejnery
      Bez flex-wrap se prvky zužují místo přelomení.
   ------------------------------------------------------- */
@media (max-width: 768px) {
    /* Flex kontejnery: vždy wrap na mobilu */
    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* Flex children: minimální šířka aby nezůstaly příliš úzké */
    [style*="display:flex"] > *,
    [style*="display: flex"] > * {
        min-width: min(200px, 100%) !important;
        flex-shrink: 1 !important;
    }
}

/* -------------------------------------------------------
   2. GRID — všechny page-specific *-grid třídy
      Generovaný selektor pokrývá všechny třídy
      končící na -grid nebo začínající grid-.
   ------------------------------------------------------- */
@media (max-width: 768px) {
    .absence-grid, .advaita-grid, .analysis-grid,
    .application-grid, .aspect-grid, .blog-grid,
    .brain-grid, .Buddha-grid, .calendar-grid,
    .calculator-grid, .category-grid, .chaos-grid,
    .characteristics-grid, .comparison-grid,
    .concept-grid, .connection-grid, .consciousness-grid,
    .corr-grid, .cultivation-grid, .cycle-grid,
    .deficiency-grid, .degree-grid, .deity-grid,
    .disruptor-grid, .dna-grid, .empathy-types-grid,
    .ethics-grid, .evolution-grid, .examples-grid,
    .experiment-grid, .footer-grid, .houses-grid-12,
    .hp-paths-grid, .input-grid, .key-equations-grid,
    .kundalini-grid, .lunar-grid, .mahavakya-grid,
    .mechanism-grid, .mo-result-grid, .mysticism-grid,
    .page-grid, .parameters-grid, .phase-grid,
    .planets-grid, .psych-grid, .related-grid-primary,
    .related-grid-secondary, .rel-grid, .rt-primary-grid,
    .solution-grid, .stage-grid, .stat-bar-grid,
    .symptom-grid, .tantra-grid, .three-column-grid,
    .traditions-grid, .ucet-grid, .viz-grid,
    .grid-2-cols, .grid-3-cols,
    /* Catch-all pattern pro budoucí gridy */
    [class$="-grid"]:not(.menu-sections):not(.menu-dropdown),
    [class*="-grid-"]:not(.menu-sections):not(.menu-dropdown) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* -------------------------------------------------------
   3. INLINE GRIDY (style attributy přímo v HTML)
      auto-fit a pevné sloupce → 1 sloupec na mobilu
   ------------------------------------------------------- */
@media (max-width: 768px) {
    /* auto-fit / auto-fill gridy */
    [style*="auto-fit"],
    [style*="auto-fill"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Pevné 2/3/4 sloupce inline */
    [style*="1fr 1fr 1fr 1fr"],
    [style*="repeat(4"],
    [style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    [style*="1fr 1fr"],
    [style*="repeat(2"] {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------------------
   4. PAGE-HERO PADDING — velké paddingy na hero sekcích
      60-100px → 20px na mobilu
   ------------------------------------------------------- */
@media (max-width: 768px) {
    [style*="padding: 60px"],
    [style*="padding: 70px"],
    [style*="padding: 80px"],
    [style*="padding: 90px"],
    [style*="padding: 100px"],
    [style*="padding:60px"],
    [style*="padding:70px"],
    [style*="padding:80px"],
    [style*="padding:100px"] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* -------------------------------------------------------
   5. HARDCODED PIXEL WIDTHS — pevné šířky na kontejnerech
      Mohou způsobit horizontální scroll na mobilu
   ------------------------------------------------------- */
@media (max-width: 768px) {
    /* Kontejnery s pevnou šířkou → max 100% */
    [style*="width: 340px"],
    [style*="width: 280px"],
    [style*="width: 260px"],
    [style*="width: 240px"],
    [style*="width: 220px"],
    [style*="width: 200px"],
    [style*="width: 180px"],
    [style*="width: 160px"],
    [style*="width:340px"],
    [style*="width:280px"],
    [style*="width:260px"],
    [style*="width:240px"],
    [style*="width:220px"],
    [style*="width:200px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* -------------------------------------------------------
   6. FONT SIZES — velká px písma na mobilu
   ------------------------------------------------------- */
@media (max-width: 480px) {
    [style*="font-size: 80px"],
    [style*="font-size: 70px"],
    [style*="font-size: 60px"],
    [style*="font-size: 50px"] {
        font-size: 2.5rem !important;
    }

    [style*="font-size: 40px"],
    [style*="font-size: 36px"],
    [style*="font-size: 30px"] {
        font-size: 1.8rem !important;
    }

    [style*="font-size: 26px"],
    [style*="font-size: 24px"] {
        font-size: 1.3rem !important;
    }
}

/* -------------------------------------------------------
   7. TABULKY — horizontální scroll místo rozbití
   ------------------------------------------------------- */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* -------------------------------------------------------
   8. OBRÁZKY — nikdy wider než container
   ------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}



/* ====================================================
   CHYBĚJÍCÍ UTILITY TŘÍDY — globálně doplněno
   Třídy jsou používané ve 100+ stránkách ale
   nebyly definovány v style.css.
   ==================================================== */

/* --- Typografie --- */
.font-italic,
.italic { font-style: italic; }

.font-bold { font-weight: 700; }

.font-1-1 { font-size: 1.1em; }
.font-1-2 { font-size: 1.2em; }
.font-sm  { font-size: 0.875em; }
.font-lg  { font-size: 1.125em; }
.font-xl  { font-size: 1.25em; }
.font-2xl { font-size: 1.5em; }
.font-3xl { font-size: 1.875em; }
.font-2-5 { font-size: 2.5em; }
.text-3xl { font-size: 1.875em; font-weight: 700; }

/* --- Barvy textu --- */
.text-light-muted { color: var(--text-light-muted); }
.text-muted       { color: var(--text-muted); }

/* --- Padding utility --- */
.p-10  { padding: 10px; }
.p-15  { padding: 15px; }
.p-20  { padding: 20px; }
.p-30  { padding: 30px; }
.pl-1rem { padding-left: 1rem; }

/* --- Margin utility --- */
.mt-0    { margin-top: 0; }
.mt-10   { margin-top: 10px; }
.mt-15   { margin-top: 15px; }
.mt-20   { margin-top: 20px; }
.mt-1rem { margin-top: 1rem; }
.mt-2rem { margin-top: 2rem; }
.mb-10   { margin-bottom: 10px; }
.mb-15   { margin-bottom: 15px; }
.mb-20   { margin-bottom: 20px; }
.mb-1rem { margin-bottom: 1rem; }
.mb-1-5rem { margin-bottom: 1.5rem; }
.mb-2rem { margin-bottom: 2rem; }
.my-20   { margin-top: 20px; margin-bottom: 20px; }
.my-2rem { margin-top: 2rem; margin-bottom: 2rem; }
.mt-40   { margin-top: 40px; }
.mb-30   { margin-bottom: 30px; }
.mb-3rem { margin-bottom: 3rem; }
.mt-30   { margin-top: 30px; }

/* --- Line height --- */
.lh-relaxed { line-height: 1.7; }
.lh-normal  { line-height: 1.5; }

/* --- Border helpers --- */
.border-left-gold   { border-left: 4px solid var(--gold); }
.border-left-green  { border-left: 4px solid #10b981; }
.border-left-blue   { border-left: 4px solid #3b82f6; }
.border-left-red    { border-left: 4px solid #ef4444; }
.border-left-violet { border-left: 4px solid #7c3aed; }
.border-left-purple { border-left: 4px solid #8b5cf6; }
.border-radius-8    { border-radius: 8px; }

/* --- Background helpers --- */
.bg-dark-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}
.bg-black-30 { background: rgba(0, 0, 0, 0.3); }

/* --- Flex/layout --- */
.no-underline    { text-decoration: none; }
.text-left       { text-align: left; }

/* ====================================================
   CHYBĚJÍCÍ KOMPONENTNÍ TŘÍDY
   ==================================================== */

/* --- Quote system --- */
.quote-card {
    background: rgba(0, 0, 0, 0.35);
    border-left: 4px solid var(--gold);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 16px 0;
}

.quote-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.quote-item:last-child { border-bottom: none; }

.quote-text {
    color: var(--text-light);
    font-style: italic;
    line-height: 1.7;
    font-size: 1.05em;
}

.quote-number {
    color: var(--gold);
    font-weight: 700;
    font-size: 1.1em;
    margin-right: 8px;
}

.quote-author {
    color: var(--text-gray);
    font-size: 0.9em;
    margin-top: 8px;
    font-style: normal;
}

/* --- Theme badge --- */
.theme-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--gold);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.8em;
    font-weight: 600;
    margin: 3px 4px 3px 0;
    white-space: nowrap;
}

/* --- Page link (sitemap atd.) --- */
.page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-light);
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    margin: 4px 0;
}

.page-link:hover {
    background: rgba(212, 175, 55, 0.1);
    border-left-color: var(--gold);
    color: #fff;
    transform: translateX(4px);
}

.page-link .icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* --- Subsection title --- */
.subsection-title {
    color: var(--gold);
    font-size: 1.15em;
    font-weight: 700;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.section-title {
    color: var(--gold);
    font-size: 1.3em;
    font-weight: 700;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

/* --- Category section (konfucius, fyzika atd.) --- */
.category-section {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 20px;
    margin: 16px 0;
    border-left: 4px solid var(--gold);
}

.category-section h3 {
    color: var(--gold);
    margin-bottom: 10px;
}

/* --- Tooltip system (lt-wrap / lt-tooltip) --- */
.lt-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.5);
}

.lt-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 10, 40, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85em;
    color: var(--text-light);
    white-space: normal;
    min-width: 200px;
    max-width: 280px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    line-height: 1.5;
}

.lt-wrap:hover .lt-tooltip,
.lt-wrap.lt-open .lt-tooltip {
    display: block;
}

@media (max-width: 480px) {
    .lt-tooltip {
        left: 0;
        transform: none;
        max-width: calc(100vw - 40px);
    }
}

/* --- Card link helper --- */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.card-link:hover {
    color: inherit;
    text-decoration: none;
}


/* ====================================================
   GLOBAL MOBILE FIX — SunnyBase
   Priority: prevent horizontal overflow + grid collapse
   ==================================================== */

/* Root overflow prevention */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* All images never overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Readable minimum font size on all devices */
@media (max-width: 480px) {
    body, p, li, td, .card-text, .article-text, .text-body {
        font-size: max(14px, 0.88rem);
        line-height: 1.65;
    }

    h1 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
    h2 { font-size: clamp(1.15rem, 5vw, 1.7rem); }
    h3 { font-size: clamp(1rem, 4.5vw, 1.3rem); }

    /* Collapse wide grids to 1 column */
    [class*="-grid"]:not(.menu-sections):not(.menu-dropdown),
    [class*="grid-"]:not(.menu-sections),
    .encyclopedia-grid,
    .category-grid,
    .stat-grid,
    .archetype-grid,
    .features-grid,
    .rt-primary-grid,
    .connections-grid,
    .systems-grid,
    .hooks-grid,
    .hp-paths-grid,
    .hp-hooks-grid,
    .three-grid,
    .two-col-grid,
    .insight-grid,
    .philosophy-grid,
    .blog-grid,
    .product-grid,
    .plans-grid,
    .post-related-list {
        grid-template-columns: 1fr !important;
    }

    /* Full-width containers */
    .container, .content-section, .page-section, .rt-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Cards */
    .encyclopedia-card, .card, .insight-box,
    .hp-hook, .hook-box, .path-card, .rt-card {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    /* Horizontal scroll bars hidden */
    .topic-filter, .tag-list, .pill-row, .hp-tags {
        flex-wrap: wrap;
    }

    /* Table overflow */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Popups & overlays */
    #pw-box, #ei-box {
        padding: 20px 16px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Buttons row: wrap on small screens */
    .btn-row, .action-btns, .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .btn-row a, .btn-row button {
        width: 100%;
        text-align: center;
    }

    /* Network bar — hide less important items */
    #sb-nb-right .sb-nb-plan { display: none; }
}

/* Small tablets (481–768) — 2-column grids (not super narrow ones) */
@media (min-width: 481px) and (max-width: 768px) {
    [class*="-grid"]:not(.menu-sections):not(.menu-dropdown) {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 45%), 1fr)) !important;
    }
    .hp-hooks-grid, .hooks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hp-paths-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ====================================================
   CONSERVATIVE DENSE-LAYOUT FIX
   Aktivuje se hlavně tam, kde je reálně box-v-box nebo husté sekce
   ==================================================== */

main.container .content-section:has(.section-container .section-container) > .section-container,
main.container .content-section:has(.section-container .section-container) > section.section-container,
main.container .content-section:has(.encyclopedia-card .encyclopedia-card) > .section-container,
main.container .content-section:has(.encyclopedia-card .encyclopedia-card) > section.section-container,
main.container .content-section:has(> .section-container + .section-container + .section-container) > .section-container,
main.container .content-section:has(> section.section-container + section.section-container + section.section-container) > section.section-container {
    margin: 2.1rem 0 !important;
    padding: 1.25rem 1.4rem !important;
    border: 1px solid rgba(212, 175, 55, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.24) !important;
}

main.container .content-section:has(> .section-container + .section-container + .section-container) > .section-container + .section-container,
main.container .content-section:has(> section.section-container + section.section-container + section.section-container) > section.section-container + section.section-container,
main.container .content-section:has(.section-container .section-container) > .section-container + .section-container,
main.container .content-section:has(.section-container .section-container) > section.section-container + section.section-container {
    margin-top: 2.6rem !important;
}

main.container .content-section .section-container .section-container {
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

main.container .content-section .encyclopedia-card .encyclopedia-card {
    margin: 0.85rem 0 !important;
    padding: 0.8rem 0.95rem !important;
    border-left: 3px solid rgba(212, 175, 55, 0.6) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

main.container .content-section:has(.encyclopedia-card .encyclopedia-card) .encyclopedia-grid,
main.container .content-section:has(.section-container .section-container) .encyclopedia-grid {
    gap: 1.2rem !important;
}

@media (max-width: 768px) {
    main.container .content-section:has(.section-container .section-container) > .section-container,
    main.container .content-section:has(.section-container .section-container) > section.section-container,
    main.container .content-section:has(.encyclopedia-card .encyclopedia-card) > .section-container,
    main.container .content-section:has(.encyclopedia-card .encyclopedia-card) > section.section-container {
        padding: 1rem !important;
        margin: 1.35rem 0 !important;
    }
}