/* COMPONENTS.CSS - Reusable Cosmic Workshop Components
 * Consolidates inline styles from templates into maintainable external CSS.
 */

/* === 1. HERO & HEADER COMPONENTS === */
.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--cosmic-blue), var(--cosmic-purple), var(--cosmic-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(26, 95, 180, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--cosmic-text-muted);
    max-width: 800px;
    margin: 0 auto;
}

.hidden {
    display: none !important;
}

.simple-header {
    background: rgba(10, 10, 26, 0.95);
    border-bottom: 1px solid var(--cosmic-blue);
    padding: 1rem 0;
}

.cosmic-header {
    background: linear-gradient(135deg, var(--cosmic-dark) 0%, rgba(0, 0, 30, 0.9) 100%);
    border-bottom: 1px solid var(--cosmic-primary);
    padding: 2rem 0;
    color: white;
}

/* === 2. CARD COMPONENTS === */
.simple-card {
    background: rgba(30, 30, 60, 0.5);
    border: 1px solid rgba(100, 100, 255, 0.2);
    border-radius: 0.625rem; /* 10px */
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    color: var(--cosmic-light);
}

.simple-card:hover {
    border-color: var(--cosmic-success);
    background: rgba(30, 30, 60, 0.7);
}

.simple-card p,
.simple-card li,
.simple-card span {
    color: var(--cosmic-light);
}

.card-cosmic {
    background: rgba(30, 30, 60, 0.7);
    border: 1px solid rgba(100, 100, 255, 0.3);
    border-radius: 0.9375rem; /* 15px */
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s;
}

.card-cosmic:hover {
    transform: translateY(-5px);
    border-color: var(--cosmic-teal);
    box-shadow: 0 10px 25px rgba(38, 162, 105, 0.2);
}

.participant-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.9375rem; /* 15px */
    padding: 1.25rem; /* 20px */
    margin-bottom: 1.25rem; /* 20px */
    border-left: 0.3125rem solid; /* 5px */
}

.mercury { border-left-color: var(--cosmic-danger); }
.venus { border-left-color: var(--cosmic-warning); }
.earth { border-left-color: var(--cosmic-success); }
.mars { border-left-color: var(--cosmic-danger); }
.jupiter { border-left-color: var(--cosmic-warning); }
.saturn { border-left-color: var(--cosmic-purple); }
.uranus { border-left-color: var(--cosmic-primary); }
.neptune { border-left-color: var(--cosmic-info); }
.pluto { border-left-color: var(--cosmic-purple); }
.meta { border-left-color: var(--cosmic-danger); }

.connection-map {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5625rem; /* 25px */
    border-radius: 0.9375rem; /* 15px */
}

.orchestra-section {
    background: linear-gradient(135deg, var(--cosmic-dark), var(--cosmic-dark), var(--cosmic-bg-card));
    color: white;
}

.card-emoji {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* === 3. BUTTON & BADGE COMPONENTS === */
.btn-cosmic-action {
    background: linear-gradient(90deg, var(--cosmic-blue), var(--cosmic-purple));
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-cosmic-action:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(145, 65, 172, 0.5);
}

.planet-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: bold;
    margin: 0.25rem;
    transition: all 0.3s;
}

.planet-badge:hover {
    transform: scale(1.05);
    cursor: pointer;
}

/* === 4. FORM & INPUT COMPONENTS === */
.input-area {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 0.625rem; /* 10px */
    padding: 1rem;
    font-family: monospace;
    color: var(--cosmic-success);
    min-height: 12.5rem; /* 200px */
    resize: vertical;
}

.result-area {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(38, 162, 105, 0.3);
    border-radius: 0.625rem; /* 10px */
    padding: 1rem;
    font-family: monospace;
    color: var(--cosmic-danger);
    min-height: 9.375rem; /* 150px */
    overflow: auto;
}

/* === 5. UTILITY & HELPER CLASSES === */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.back-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.subtitle {
    font-size: 1.2rem;
    color: var(--cosmic-text-muted);
}

.btn-terminal {
    background: #1a1a2e;
    border: 1px solid #4f4f7a;
    color: #00ff9d;
    font-family: monospace;
    border-radius: 5px;
    padding: 0.5rem 1rem;
}

/* === 6. MEGA MENU (Navigation) === */
.mega-menu {
    width: 800px;
    max-width: 90vw;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.mega-menu .dropdown-header {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

.mega-menu .dropdown-item {
    padding: 0.5rem 0.75rem;
    white-space: normal;
    color: var(--cosmic-light) !important;
}

.mega-menu .dropdown-item:hover {
    background-color: rgba(79, 195, 247, 0.2);
}

/* === 7. ERROR PAGES === */
.error-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--cosmic-dark) 0%, var(--cosmic-dark) 100%);
}

.error-code {
    font-size: 8rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--cosmic-purple), var(--cosmic-primary), var(--cosmic-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1.5rem;
    color: var(--cosmic-text-muted);
    margin-bottom: 2rem;
    max-width: 600px;
}

.suggestions {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 3rem;
    max-width: 600px;
}

/* === 8. RESPONSIVE ADJUSTMENTS === */

/* === CSS UTILITY CLASSES (Generated from inline style analysis) === */
/* These replace 610 inline style attributes for 100% resonance */

/* Font sizes */
.font-size-2rem { font-size: 2rem !important; }
.font-size-19rem { font-size: 1.9rem !important; }
.font-size-09rem { font-size: 0.9rem !important; }

/* Icon sizing */
.width-40px { width: 40px !important; }
.width-20px { width: 20px !important; }
.width-100pct { width: 100% !important; }
.width-200px { width: 200px !important; }
.min-width-200px { min-width: 200px !important; }

.height-25px { height: 25px !important; }
.height-20px { height: 20px !important; }
.min-height-44px { min-height: 44px !important; }

/* Spacing */
.margin-right-10px { margin-right: 10px !important; }
.margin-top-1rem { margin-top: 1rem !important; }
.margin-top-2rem { margin-top: 2rem !important; }

.padding-10px-15px { padding: 10px 15px !important; }
.padding-05rem { padding: 0.5rem !important; }
.padding-0 { padding: 0 !important; }

/* Display */
.display-inline-block { display: inline-block !important; }
.display-none { display: none !important; }

/* Colors */
.color-white { color: white !important; }
.color-var-cosmic-danger { color: var(--cosmic-danger) !important; }
.color-var-cosmic-primary { color: var(--cosmic-primary) !important; }
.color-var-cosmic-success { color: var(--cosmic-success) !important; }
.color-var-cosmic-text { color: var(--cosmic-text) !important; }
.color-var-cosmic-border { color: var(--cosmic-border) !important; }
.color-var-cosmic-purple { color: var(--cosmic-purple) !important; }

/* Backgrounds */
.background-var-cosmic-bg-light { background: var(--cosmic-bg-light) !important; }

/* Borders */
.border-1px-solid-var-cosmic-text-muted { border: 1px solid var(--cosmic-text-muted) !important; }
.border-1px-solid-var-cosmic-primary { border: 1px solid var(--cosmic-primary) !important; }
.border-radius-10px { border-radius: 10px !important; }

/* Text alignment */
.text-align-center { text-align: center !important; }

/* Text decoration */
.text-decoration-underline { text-decoration: underline !important; }

/* ===== SEMANTIC UTILITY CLASSES (Recommended) ===== */
/* Use these instead of inline styles for better maintainability */

.icon-size-md { width: 40px !important; height: 25px !important; }
.icon-size-sm { width: 20px !important; height: 20px !important; }

.text-icon { font-size: 2rem !important; }
.text-small { font-size: 0.9rem !important; }

.spacing-inline { margin-right: 10px !important; }
.spacing-section { margin-top: 2rem !important; }

.card-padding { padding: 10px 15px !important; }
.btn-padding { padding: 0.5rem !important; }

.text-primary { color: var(--cosmic-primary) !important; }
.text-danger { color: var(--cosmic-danger) !important; }
.text-success { color: var(--cosmic-success) !important; }

.border-muted { border: 1px solid var(--cosmic-text-muted) !important; }
.border-primary { border: 1px solid var(--cosmic-primary) !important; }

.rounded-md { border-radius: 10px !important; }



/* === ADDITIONAL UTILITY CLASSES (OVERNIGHT 2026-04-18) === */
.width-20pct { width: 20% !important; }
.width-30pct { width: 30% !important; }
.width-40pct { width: 40% !important; }
.width-50pct { width: 50% !important; }
.width-60pct { width: 60% !important; }
.width-65pct { width: 65% !important; }
.width-70pct { width: 70% !important; }
.width-75pct { width: 75% !important; }
.width-80pct { width: 80% !important; }
.width-85pct { width: 85% !important; }
.width-90pct { width: 90% !important; }
.width-95pct { width: 95% !important; }
.width-0pct { width: 0% !important; }
.width-5pct { width: 5% !important; }
.width-15pct { width: 15% !important; }
.width-25pct { width: 25% !important; }
.width-35pct { width: 35% !important; }
.width-45pct { width: 45% !important; }
.width-78pct { width: 78% !important; }
.width-87pct { width: 87% !important; }
.width-88pct { width: 88% !important; }
.width-92pct { width: 92% !important; }
.width-99pct { width: 99% !important; }
.font-size-12rem { font-size: 1.2rem !important; }
.font-size-15rem { font-size: 1.5rem !important; }
.font-size-18rem { font-size: 1.8rem !important; }
.font-size-20rem { font-size: 2.0rem !important; }
.font-size-25rem { font-size: 2.5rem !important; }
.font-size-30rem { font-size: 3.0rem !important; }
.color-gold { color: var(--cosmic-gold) !important; }
.color-warning { color: var(--cosmic-warning) !important; }
.color-teal { color: var(--cosmic-teal) !important; }
.color-info { color: var(--cosmic-info) !important; }
.color-primary { color: var(--cosmic-primary) !important; }
.color-success { color: var(--cosmic-success) !important; }
.color-danger { color: var(--cosmic-danger) !important; }
.color-purple { color: var(--cosmic-purple) !important; }
.scroll-behavior-smooth { scroll-behavior: smooth !important; }
.min-height-200px { min-height: 200px !important; }
.margin-bottom-1rem { margin-bottom: 1rem !important; }
.opacity-09 { opacity: 0.9 !important; }
.max-width-800px { max-width: 800px !important; }
.margin-0-auto { margin: 0 auto !important; }
.max-width-1200px { max-width: 1200px !important; }
.padding-0-2rem { padding: 0 2rem !important; }
.complex-header { font-size: 1.2rem !important; opacity: 0.9 !important; max-width: 800px !important; margin: 0 auto !important; }
.complex-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 2rem !important; }

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .mega-menu {
        grid-template-columns: 1fr;
        width: 95vw;
    }
    
    .content-container {
        padding: 1rem;
    }
}

/* === 9. GUIDE-SPECIFIC COMPONENTS === */
.harmonic-realignment-badge {
    background: rgba(38, 162, 105, 0.2);
    color: var(--cosmic-success);
    border: 1px solid var(--cosmic-success);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    display: inline-block;
    margin-top: 0.5rem;
}

.delight-element {
    color: var(--cosmic-gold);
    font-style: italic;
}

.card-title {
    color: var(--cosmic-blue);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--cosmic-border);
    font-size: 0.95rem;
}

/* === 10. PLAYGROUND COMPONENTS === */
.json-viewer {
    background: rgba(10, 10, 20, 0.9);
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--cosmic-border);
    overflow-x: auto;
    max-height: 400px;
}

.planet-color-1 { background: linear-gradient(90deg, var(--cosmic-danger), #f97316); color: white; }
.planet-color-2 { background: linear-gradient(90deg, var(--cosmic-warning), #eab308); color: #222; }
.planet-color-3 { background: linear-gradient(90deg, var(--cosmic-success), #10b981); color: white; }
.planet-color-4 { background: linear-gradient(90deg, var(--cosmic-danger), #ef4444); color: white; }
.planet-color-5 { background: linear-gradient(90deg, var(--cosmic-warning), #f59e0b); color: #222; }
.planet-color-6 { background: linear-gradient(90deg, var(--cosmic-purple), #8b5cf6); color: white; }
.planet-color-7 { background: linear-gradient(90deg, var(--cosmic-primary), #0ea5e9); color: white; }
.planet-color-8 { background: linear-gradient(90deg, var(--cosmic-info), #06b6d4); color: white; }
.planet-color-9 { background: linear-gradient(90deg, var(--cosmic-purple), #a855f7); color: white; }
.planet-color-10 { background: linear-gradient(90deg, #6366f1, var(--cosmic-blue)); color: white; }
.planet-color-11 { background: linear-gradient(90deg, var(--cosmic-teal), var(--cosmic-success)); color: white; }

.cosmic-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(79, 195, 247, 0.3);
    border-radius: 50%;
    border-top-color: var(--cosmic-primary);
    animation: spin 1s linear infinite;
}

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

/* === 11. ACCESSIBILITY OVERRIDES === */
/* Ensure good contrast for dark theme */
/* .text-dark, .text-muted, .text-secondary moved to Section 101 for consolidation */

/* For light backgrounds (alerts, cards), ensure dark text */
.alert-warning,
.alert-info,
.alert-success,
.alert-error {
    color: #222;
}
.alert-warning a,
.alert-info a,
.alert-success a,
.alert-error a {
    color: #111;
    text-decoration: underline;
}

/* Focus states for accessibility */
*:focus {
    outline: 2px solid var(--cosmic-primary);
    outline-offset: 2px;
}
.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(79, 195, 247, 0.25);
}

/* === 99. UTILITY CLASSES (replace inline styles) === */

/* For 105 instances of font-size: 2rem */
.font-size-2rem {
    font-size: 2rem !important;
}

/* For 50 instances of icon sizing: width: 40px; height: 25px; margin-right: 10px; */
.icon-small {
    width: 40px !important;
    height: 25px !important;
    margin-right: 10px !important;
}

/* For 34 instances already covered by .hidden */
.hidden {
    display: none !important;
}

/* For 18 instances of min-height: 44px; padding: 10px 15px; */
.compact-panel {
    min-height: 44px !important;
    padding: 10px 15px !important;
}

/* For 17 instances of padding: 0.5rem; */
.padding-half {
    padding: 0.5rem !important;
}

/* For 16 instances of border: 1px solid var(--cosmic-text-muted); */
.border-muted {
    border: 1px solid var(--cosmic-text-muted) !important;
}

/* For 14 instances of color: var(--cosmic-primary); */
.text-primary {
    color: var(--cosmic-primary) !important;
}

/* For 14 instances of background: var(--cosmic-bg-light); */
.bg-light {
    background: var(--cosmic-bg-light) !important;
}

/* For 13 instances of text-align: center; */
.text-center {
    text-align: center !important;
}

/* For 13 instances of width: 20px; */
.width-20 {
    width: 20px !important;
}

/* Common color utilities */
.text-danger {
    color: var(--cosmic-danger) !important;
}
.text-success {
    color: var(--cosmic-success) !important;
}
.text-white {
    color: white !important;
}
.text-border {
    color: var(--cosmic-border) !important;
}

/* Spacing utilities */
.mt-1 {
    margin-top: 1rem !important;
}

/* Display utilities */
.inline-block {
    display: inline-block !important;
}

/* Border radius utility */
.radius-10 {
    border-radius: 10px !important;
}

/* Dashed border card for contribution/attention sections */
.dashed-border-card {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px dashed var(--cosmic-primary) !important;
}

/* === 100. ADDITIONAL COLOR UTILITIES (for index.html inline styles) === */

/* For cosmic-gold, cosmic-blue, cosmic-teal, cosmic-purple */
.text-gold {
    color: var(--cosmic-gold) !important;
}

.text-blue {
    color: var(--cosmic-blue) !important;
}

.text-teal {
    color: var(--cosmic-teal) !important;
}

.text-purple {
    color: var(--cosmic-purple) !important;
}

.text-warning {
    color: var(--cosmic-warning) !important;
}

/* Planet icon color classes */
.planet-icon-primary {
    color: var(--cosmic-primary) !important;
}

.planet-icon-danger {
    color: var(--cosmic-danger) !important;
}

.planet-icon-success {
    color: var(--cosmic-success) !important;
}

.planet-icon-warning {
    color: var(--cosmic-warning) !important;
}

.planet-icon-purple {
    color: var(--cosmic-purple) !important;
}

/* Alert with teal border */
.alert-teal-border {
    background: rgba(38, 162, 105, 0.2) !important;
    border-color: var(--cosmic-teal) !important;
}

/* Semitransparent white background */
.bg-semitransparent {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* === 101. ANIMATIONS & MICRO‑INTERACTIONS === */

/* Gentle pulse animation for planet icons */
@keyframes gentle-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.planet-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    animation: gentle-pulse 3s ease-in-out infinite;
}

/* Subtle hover effect for cards */
.cosmic-card-hover {
    transition: all 0.3s ease;
}

.cosmic-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(var(--cosmic-primary-rgb), 0.3);
}

/* Gradient text animation */
.gradient-text-animated {
    background: linear-gradient(90deg, var(--cosmic-blue), var(--cosmic-purple), var(--cosmic-teal), var(--cosmic-blue));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === 101. TEXT CONTRAST UTILITIES === */
/* .text-dark is light text by default (for dark backgrounds) */
.text-dark, .text-black, .text-body {
    color: var(--cosmic-text) !important; /* Light text for dark backgrounds */
}
/* .text-dark becomes dark text when on light backgrounds */
.bg-light .text-dark,
.bg-white .text-dark,
.alert-light .text-dark,
.card.bg-light .text-dark,
.card.bg-white .text-dark {
    color: var(--cosmic-dark) !important; /* Dark text for light backgrounds */
}
.text-muted, .text-secondary, .text-gray {
    color: var(--cosmic-text-muted) !important;
}
/* .text-muted adjustments for light backgrounds */
.bg-light .text-muted,
.bg-white .text-muted,
.alert-light .text-muted,
.card.bg-light .text-muted,
.card.bg-white .text-muted {
    color: hsl(var(--band-33-hue), 40%, 40%) !important; /* Darker muted text */
}
.text-light, .text-white {
    color: var(--cosmic-light) !important;
}

/* === 102. MONSTER GATEKEEPER STYLES === */

.monster-gatekeeper {
    background: rgba(30, 30, 60, 0.7) !important;
    border-radius: 0.9375rem; /* 15px */
    border-left: 0.3125rem solid var(--cosmic-warning) !important;
    padding: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.monster-gatekeeper img {
    max-height: 200px;
    border-radius: 0.625rem; /* 10px */
    border: 2px solid rgba(255, 193, 7, 0.3);
}

.monster-gatekeeper h4 {
    color: var(--cosmic-warning);
}

.monster-gatekeeper p {
    color: var(--cosmic-text);
}

/* Individual monster color accents */
.monster-medusa { border-left-color: var(--cosmic-purple) !important; }
.monster-cerberus { border-left-color: var(--cosmic-danger) !important; }
.monster-grendel { border-left-color: var(--cosmic-blue) !important; }
.monster-baba-yaga { border-left-color: var(--cosmic-teal) !important; }
.monster-minotaur { border-left-color: var(--cosmic-warning) !important; }

/* === DROPDOWN MENU ULTIMATE FIX (2026‑04‑18) === */
/* Ensure dropdowns are hidden by default, overriding any conflicting rules */
.dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 1000 !important;
}
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Mega‑menu grid layout when shown */
.dropdown-menu.mega-menu.show {
    display: grid !important;
}
/* Mobile: full width but still hidden */
@media (max-width: 767.98px) {
    .dropdown-menu {
        width: 100% !important;
    }
    .dropdown-menu.mega-menu {
        width: 100% !important;
    }
}

/* === DROPDOWN CONTRAST ENHANCEMENT (2026‑04‑18) === */
/* Fix light-on-dark text readability in dropdowns */
.dropdown-menu, .dropdown-menu-dark {
    background-color: rgba(10, 10, 26, 0.98) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--cosmic-primary) !important;
}

.dropdown-menu .dropdown-item,
.dropdown-menu-dark .dropdown-item {
    color: #ffffff !important; /* Pure white for max contrast */
    font-weight: 500 !important; /* Medium weight, not thin */
    font-size: 0.95rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:hover {
    background-color: rgba(79, 195, 247, 0.25) !important;
    color: #ffffff !important;
    transform: translateX(5px);
}

.dropdown-menu .dropdown-header,
.dropdown-menu-dark .dropdown-header {
    color: var(--cosmic-primary) !important; /* Bright primary color */
    font-weight: 600 !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-menu .dropdown-divider,
.dropdown-menu-dark .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
}

/* Mega-menu specific enhancements */
.dropdown-menu.mega-menu,
.dropdown-menu-dark.mega-menu {
    background-color: rgba(5, 5, 20, 0.98) !important;
}

.dropdown-menu.mega-menu .dropdown-item,
.dropdown-menu-dark.mega-menu .dropdown-item {
    font-size: 0.9rem !important; /* Slightly smaller for dense menus */
    line-height: 1.4;
}

/* Top navigation button contrast */
.navbar .btn {
    font-weight: 600 !important;
}

.navbar .btn-outline-info {
    color: #ffffff !important;
    border-color: var(--cosmic-primary) !important;
}

.navbar .btn-outline-info:hover {
    background-color: var(--cosmic-primary) !important;
    color: #000000 !important;
}

/* === TEXT CONTRAST FIXES (2026‑04‑18) === */
/* Fix light‑text classes on light backgrounds */
.bg-light .text-light,
.bg-white .text-light,
.bg-light .text-white,
.bg-white .text-white {
    color: var(--cosmic-dark) !important;
}

/* Ensure text‑body is readable on dark backgrounds */
.text-body {
    color: var(--cosmic-text) !important;
}

/* Fix muted text on light backgrounds */
.bg-light .text-muted,
.bg-white .text-muted {
    color: #666666 !important;
}

/* Fix secondary text */
.bg-light .text-secondary,
.bg-white .text-secondary {
    color: #888888 !important;
}

/* === BRIGHTEN TEXT IN DARK CARDS (2026‑04‑18) === */
/* Ensure all text in dark cards is readable */
.card {
    color: #ffffff !important;
}

.card .text-muted,
.card .text-secondary {
    color: #cccccc !important;
}

.card .text-dark {
    color: #ffffff !important;
}

.card .text-light {
    color: #ffffff !important;
}

.card .text-body {
    color: #ffffff !important;
}

/* Ensure button stands out in cards */
.card .btn-cosmic {
    background: linear-gradient(90deg, #8a2be2, #4fc3f7) !important;
    border: 2px solid #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.card .btn-cosmic:hover {
    background: linear-gradient(90deg, #9c3cf3, #5fd3ff) !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* === SPACING UTILITIES (2026‑04‑18) === */
/* Consistent padding around objects */
.padding-section {
    padding: 2rem 0;
}
.padding-card {
    padding: 1.5rem;
}
.padding-button {
    padding: 0.75rem 1.5rem;
}
.padding-nav-item {
    padding: 0.5rem 1rem;
}

/* Responsive spacing adjustments */


/* COMPLEX STYLE UTILITY CLASSES - Generated from analysis */
/* These replace multi-property inline styles */

.height-25px-margin-right-10px-width-40px { height: 25px; margin-right: 10px; width: 40px; } /* 50 uses */
.min-height-44px-padding-10px-15px { min-height: 44px; padding: 10px 15px; } /* 18 uses */
.complex-8006 { border: 1px solid var(--cosmic-text-muted); padding: 0.5rem; } /* 16 uses */
.complex-6506 { background: var(--cosmic-bg-light); border: 1px solid var(--cosmic-primary); color: var(--cosmic-text); } /* 9 uses */
.display-inline-block-height-20px-width-20px { display: inline-block; height: 20px; width: 20px; } /* 7 uses */
.complex-1898 { color: #000000; margin: 0 10px; text-decoration: underline; } /* 5 uses */
.color-white-text-decoration-underline { color: white; text-decoration: underline; } /* 4 uses */
.complex-2235 { border-bottom:1px solid var(--cosmic-border); padding:0.5rem; } /* 4 uses */
.complex-1929 { background: rgba(38, 162, 105, 0.2); border-color: var(--cosmic-teal); } /* 3 uses */
.background-rgba255255255003-border-radius-10px { background: rgba(255,255,255,0.03); border-radius: 10px; } /* 3 uses */

/* === NEW UTILITY CLASSES FOR REMAINING INLINE STYLES (2026-04-18) === */
.text-align-center-margin-3rem-0 { text-align: center !important; margin: 3rem 0 !important; }
.text-align-center-margin-4rem-0 { text-align: center !important; margin: 4rem 0 !important; }
.margin-top-3rem-padding-1rem-bg-cosmic-bg-radius-10 { margin-top: 3rem !important; padding: 1rem !important; background: var(--cosmic-bg) !important; border-radius: 10px !important; }
.background-rgba00003-border-2px-dashed-primary { background: rgba(0,0,0,0.3) !important; border: 2px dashed var(--cosmic-primary) !important; }
.cursor-pointer { cursor: pointer !important; }
.width-40px-height-30px { width: 40px !important; height: 30px !important; }
.color-cosmic-light { color: var(--cosmic-light) !important; }
.border-color-rgba25525525501 { border-color: rgba(255,255,255,0.1) !important; }
.color-cosmic-border-margin-top-15rem { color: var(--cosmic-border) !important; margin-top: 1.5rem !important; }
.border-color-cosmic-light { border-color: var(--cosmic-light) !important; }
.color-ff66cc { color: #ff66cc !important; }
.color-66ccff { color: #66ccff !important; }
.color-cc66ff { color: #cc66ff !important; }
.margin-2rem-0 { margin: 2rem 0 !important; }
.max-width-400px { max-width: 400px !important; }
.display-flex-height-40px-margin-top-1rem { display: flex !important; height: 40px !important; margin-top: 1rem !important; }
.background-cosmic-primary-padding-1rem-2rem-color-cosmic-bg-radius-10 { display: inline-block !important; padding: 1rem 2rem !important; background: var(--cosmic-primary) !important; color: var(--cosmic-bg) !important; text-decoration: none !important; border-radius: 10px !important; font-weight: bold !important; margin: 0.5rem !important; }
.background-unity-primary { background: var(--unity-primary) !important; }
.background-unity-secondary { background: var(--unity-secondary) !important; }
.background-unity-accent { background: var(--unity-accent) !important; }
.background-unity-healing-green { background: var(--unity-healing-green) !important; }
.background-unity-peace-purple { background: var(--unity-peace-purple) !important; }
.background-unity-gradient-healing { background: var(--unity-gradient-healing) !important; }
.background-unity-gradient-peace { background: var(--unity-gradient-peace) !important; }
.border-2px-solid-gold { border: 2px solid var(--cosmic-gold) !important; }
.bg-rgba255255255008 { background: rgba(255,255,255,0.08) !important; }
.bg-rgba255255255003 { background: rgba(255,255,255,0.03) !important; }
.bg-rgba255255255005-border-radius-10 { background: rgba(255,255,255,0.05) !important; border-radius: 10px !important; }
.text-align-center-margin-30px-0 { text-align: center !important; margin: 30px 0 !important; }
.text-align-center-margin-top-30px { text-align: center !important; margin-top: 30px !important; }
.bg-rgba10218710601-border-radius-15 { display: none !important; text-align: center !important; padding: 30px !important; background: rgba(102,187,106,0.1) !important; border-radius: 15px !important; }
.position-fixed-bottom-20-right-20-z-1000 { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 1000 !important; display: none !important; }
.width-300px-bg-card-border-1 { width: 300px !important; background: var(--cosmic-bg-card) !important; border: 1px solid var(--cosmic-border) !important; }
.color-cosmic-text { color: var(--cosmic-text) !important; }
.position-fixed-bottom-20-right-20-z-999-circle-60 { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 999 !important; border-radius: 50% !important; width: 60px !important; height: 60px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
.border-top-color-symphony-1 { border-top-color: var(--symphony-1) !important; }
.border-top-color-symphony-2 { border-top-color: var(--symphony-2) !important; }
.border-top-color-symphony-3 { border-top-color: var(--symphony-3) !important; }
.border-top-color-symphony-4 { border-top-color: var(--symphony-4) !important; }
.border-top-color-symphony-5 { border-top-color: var(--symphony-5) !important; }
.border-top-color-symphony-6 { border-top-color: var(--symphony-6) !important; }
.border-top-color-symphony-7 { border-top-color: var(--symphony-7) !important; }
.grid-auto-fit-250px-gap-2rem-mt-15 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 2rem !important; margin-top: 1.5rem !important; }

/* ===== NAVIGATION CONTRAST FIXES ===== */
/* FORCE WHITE TEXT - User reports black on black */
.cosmic-nav .nav-link,
.cosmic-nav .navbar-brand,
.cosmic-nav .dropdown-toggle,
.cosmic-nav .dropdown-item,
.cosmic-nav .dropdown-header,
.cosmic-nav .bi {
    color: #ffffff !important;
}
.cosmic-nav .dropdown-menu {
    background-color: rgba(0, 0, 30, 0.98) !important;
}
.cosmic-nav .dropdown-item:hover {
    background-color: rgba(79, 195, 247, 0.3) !important;
}

/* ===== SEMANTIC UTILITY CLASSES ===== */

/* Card styles */
.card-icon { 
    width: 40px; 
    height: 25px; 
    margin-right: 10px; 
    display: inline-block; 
}

/* Button styles */
.btn-icon-small { 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    margin-right: 10px; 
}

/* Text decorations */
.text-danger-underline { 
    color: var(--cosmic-danger); 
    text-decoration: underline; 
}

/* Spacing utilities */
.spacing-inline-right { 
    margin-right: 10px; 
    display: inline-block; 
}

/* Border utilities */
.border-muted-rounded { 
    border: 1px solid var(--cosmic-text-muted); 
    border-radius: 10px; 
    padding: 10px 15px; 
}

/* Color + background combos */
.text-primary-bg-light { 
    color: var(--cosmic-primary); 
    background: var(--cosmic-bg-light); 
}


/* === AUTO-GENERATED UTILITY CLASSES === */
.inline-width-20- {
    width: 20%;
}
.inline-width-30- {
    width: 30%;
}
.inline-style-fd847d81 {
    display: inline-block; padding: 1rem 2rem; background: var(--cosmic-primary); color: var(--cosmic-bg); text-decoration: none; border-radius: 10px; font-weight: bold; margin: 0.5rem;
}
.inline-background-t-color- {
    background: ${t.color};
}
.inline-color-data-color- {
    color:${data.color};
}
.inline-background-hsl-0-70-40-border-radius-5px- {
    background: hsl(0, 70%, 40%); border-radius: 5px;
}
.inline-background-hsl-90-70-40-border-radius-5px- {
    background: hsl(90, 70%, 40%); border-radius: 5px;
}
.inline-background-hsl-180-70-40-border-radius-5px- {
    background: hsl(180, 70%, 40%); border-radius: 5px;
}
.inline-background-hsl-270-70-40-border-radius-5px- {
    background: hsl(270, 70%, 40%); border-radius: 5px;
}
.inline-background-rgba-255-255-255-0-08- {
    background: rgba(255,255,255,0.08);
}
.inline-border-2px-solid-var-cosmic-gold- {
    border: 2px solid var(--cosmic-gold);
}
.inline-background-rgba-255-255-255-0-03- {
    background: rgba(255,255,255,0.03);
}
.inline-style-e2ac9adb {
    background: rgba(255,255,255,0.05); border-radius: 10px;
}
.inline-text-align-center-margin-30px-0- {
    text-align: center; margin: 30px 0;
}
.inline-style-88d2ae68 {
    display: none; text-align: center; padding: 30px; background: rgba(102,187,106,0.1); border-radius: 15px;
}
.inline-text-align-center-margin-top-30px- {
    text-align: center; margin-top: 30px;
}
.inline-style-c395915e {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: none;
}
.inline-style-49841131 {
    width: 300px; background: var(--cosmic-bg-card); border: 1px solid var(--cosmic-border);
}
.inline-color-var-cosmic-text- {
    color: var(--cosmic-text);
}
.inline-style-419b0689 {
    position: fixed; bottom: 20px; right: 20px; z-index: 999; border-radius: 50%; width: 60px; height: 60px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.inline-border-top-color-var-symphony-1- {
    border-top-color: var(--symphony-1);
}
.inline-border-top-color-var-symphony-2- {
    border-top-color: var(--symphony-2);
}
.inline-border-top-color-var-symphony-3- {
    border-top-color: var(--symphony-3);
}
.inline-border-top-color-var-symphony-4- {
    border-top-color: var(--symphony-4);
}
.inline-border-top-color-var-symphony-5- {
    border-top-color: var(--symphony-5);
}
.inline-border-top-color-var-symphony-6- {
    border-top-color: var(--symphony-6);
}
.inline-border-top-color-var-symphony-7- {
    border-top-color: var(--symphony-7);
}
.inline-style-ac37695d {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 1.5rem;
}
.inline-style-b9d80015 {
    display: inline-block; width: 20px; height: 40px; background: white; margin: 0 2px; border-radius: 10px; animation: wave 2s infinite ease-in-out;
}
.inline-style-00662df0 {
    display: inline-block; width: 20px; height: 40px; background: white; margin: 0 2px; border-radius: 10px; animation: wave 2s infinite ease-in-out; animation-delay: 0.1s;
}