/* ===========================
   ULTRA_EXTRACT — Shared Styles
   =========================== */

body {
    font-family: 'Inter', sans-serif;
    background-color: #131313;
    color: #e5e2e1;
}

/* Typography */
.font-space-grotesk,
.headline-font {
    font-family: 'Space Grotesk', sans-serif;
}

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glass Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-panel {
    background: rgba(42, 42, 42, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Glow Effects */
.glow-cyan {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.15);
}

.glow-gold,
.gold-glow {
    box-shadow: 0 0 20px rgba(233, 195, 73, 0.15);
}

/* Neon Effects */
.neon-glow-primary {
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 20px rgba(0, 242, 255, 0.3);
}

.neon-glow-primary-hover:hover {
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
}

/* Borders */
.ghost-border {
    outline: 1px solid rgba(58, 73, 75, 0.2);
}

.ghost-border-focus:focus-within {
    outline: 1px solid #00dbe7;
    box-shadow: 0 0 8px rgba(0, 219, 231, 0.3);
}

/* Gradients */
.subterranean-gradient {
    background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%);
}

/* Mobile Menu */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 45;
    width: 280px;
    height: 100%;
    background: #1c1b1b;
    border-left: 1px solid rgba(58, 73, 75, 0.3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu-panel.active {
    transform: translateX(0);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection */
::selection {
    background-color: #00f2ff;
    color: #006a71;
}