/* =====================================================================
EMILE YX? — GLOBAL HIP-HOP THEME (single source of truth)
Complete APEX override. Pages should carry ONLY page-specific CSS.
Compact field/button sizing baked in (no per-page !important overrides needed).
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=block');.t-Header, .t-Header-wrap, .t-Header-branding, .t-Header-logo, .t-Header-nav,
.t-NavigationBar, .t-NavigationBar-item, .t-TreeNav, .t-BreadcrumbRegion,
.t-Body-nav, .t-Body-actions, .apex-nav-bar, .t-Header-navBar,
.t-Region-header .t-Icon, .t-Button-label .t-Icon,
.t-Footer, #t_Footer, .t-Footer-body, .t-Footer-content,
.t-Footer-apex, .t-Footer-version, .t-Footer-customize,
.t-Footer-top, .t-Footer-topButton, #t_Footer_topButton {display: none !important;visibility: hidden !important;opacity: 0 !important;height: 0 !important;overflow: hidden !important;}:root {--cape-orange: #FF6B35;--cape-gold: #FFD700;--deep-blue: #1A1A2E;--street-purple: #6C5CE7;--cape-red: #E63946;--fresh-cyan: #00CEC9;--township-green: #00B894;--bg-gradient: linear-gradient(135deg, #0D1421 0%, #1A1A2E 40%, #16213e 100%);--panel: rgba(255, 255, 255, 0.06);--panel-hover: rgba(255, 107, 53, 0.1);--text: #FFFFFF;--text-muted: #B8B8C8;--border: rgba(255, 255, 255, 0.1);--shadow: 0 25px 50px rgba(0, 0, 0, 0.5);--glow: 0 0 40px rgba(255, 107, 53, 0.3);--radius: 18px;--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);    --apex-primary: var(--cape-orange);--apex-secondary: var(--cape-gold);--apex-success: var(--township-green);--apex-danger: var(--cape-red);--apex-info: var(--fresh-cyan);--panel-bg: var(--panel);--text-primary: var(--text);--text-accent: var(--cape-gold);--border-color: var(--border);--shadow-primary: var(--shadow);--glow-effect: var(--glow);--border-radius: var(--radius);--transition-smooth: var(--transition);--ease: cubic-bezier(0.4, 0, 0.2, 1);}*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html, body, .t-PageBody, .t-Body {background: var(--bg-gradient) !important;background-attachment: fixed !important;color: var(--text) !important;font-family: 'Inter', system-ui, sans-serif !important;line-height: 1.6 !important;margin: 0 !important;padding: 0 !important;overflow-x: hidden !important;min-height: 100vh !important;}.t-Body-contentInner, .t-Body-main {padding: 0 !important;margin: 0 !important;background: transparent !important;}.eyx-wordmark { font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-weight: 700; }body::before {content: '';position: fixed;inset: 0;z-index: 0;pointer-events: none;background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23FF6B35' fill-opacity='0.04'/%3E%3C/svg%3E");opacity: .5;animation: eyx-drift 40s linear infinite;}@keyframes eyx-drift { 0% { transform: rotate(0) scale(1.2); } 100% { transform: rotate(360deg) scale(1.2); } }.emileyx-nav {position: fixed !important;top: 0 !important; left: 0 !important; right: 0 !important;z-index: 99999 !important;backdrop-filter: blur(20px) !important;background: rgba(26, 26, 46, 0.95) !important;border-bottom: 1px solid rgba(255, 215, 0, 0.15) !important;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;transition: var(--transition) !important;}.emileyx-nav-inner {max-width: 1400px !important;margin: 0 auto !important;padding: 1rem 2rem !important;display: flex !important;align-items: center !important;justify-content: space-between !important;}.emileyx-brand {font-family: 'Bebas Neue', Impact, sans-serif !important;font-size: 2rem !important;letter-spacing: 2px !important;color: var(--cape-orange) !important;text-shadow: var(--glow) !important;text-decoration: none !important;transition: var(--transition) !important;}.emileyx-brand:hover { transform: scale(1.05) !important; color: var(--cape-orange) !important; text-decoration: none !important; }.emileyx-nav-links { display: flex !important; gap: 0.5rem !important; list-style: none !important; }.emileyx-nav-link {padding: 0.8rem 1.4rem !important;border-radius: 30px !important;color: var(--text-muted) !important;text-decoration: none !important;font-weight: 600 !important;text-transform: uppercase !important;letter-spacing: 1px !important;font-size: 0.85rem !important;transition: var(--transition) !important;}.emileyx-nav-link:hover, .emileyx-nav-link.active {background: var(--panel-hover) !important;color: var(--cape-gold) !important;transform: translateY(-2px) !important;text-decoration: none !important;}.emileyx-menu-toggle {display: none;flex-direction: column;justify-content: center;align-items: center;gap: 5px;background: #FF6B35 !important;border: 3px solid #FFD700 !important;padding: 0.75rem !important;border-radius: 12px !important;cursor: pointer !important;width: 50px !important;height: 50px !important;z-index: 10001 !important;position: relative !important;box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5) !important;transition: all 0.3s ease !important;}.emileyx-menu-toggle:hover { background: #FFD700 !important; transform: scale(1.1) !important; }.emileyx-menu-toggle span { display: block !important; width: 26px !important; height: 3px !important; background: white !important; border-radius: 3px !important; transition: all 0.3s ease !important; }.emileyx-menu-toggle.active { background: #FFD700 !important; transform: rotate(90deg) !important; }.emileyx-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px) !important; }.emileyx-menu-toggle.active span:nth-child(2) { opacity: 0 !important; }.emileyx-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px) !important; }.emileyx-nav-overlay {position: fixed !important;top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;background: rgba(0, 0, 0, 0.92) !important;backdrop-filter: blur(10px) !important;z-index: 9999 !important;opacity: 0 !important;visibility: hidden !important;transition: all 0.3s ease !important;pointer-events: none !important;}.emileyx-nav-overlay.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }@media (max-width: 768px) {.emileyx-menu-toggle { display: flex !important; }.emileyx-nav-links {position: fixed !important;top: -200% !important;left: 50% !important;transform: translateX(-50%) !important;width: 90% !important;max-width: 500px !important;height: auto !important;max-height: 90vh !important;display: flex !important;flex-direction: column !important;gap: 0 !important;padding: 5rem 2rem 3rem !important;margin: 0 !important;opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;background: linear-gradient(180deg, rgba(26, 26, 46, 0.98) 0%, rgba(13, 20, 33, 0.98) 100%) !important;backdrop-filter: blur(30px) !important;border: 4px solid #FF6B35 !important;border-top: none !important;border-radius: 0 0 25px 25px !important;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), inset 0 0 0 2px #FFD700, 0 0 40px rgba(255, 107, 53, 0.6) !important;z-index: 10000 !important;transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.4s ease, visibility 0.4s ease !important;overflow-y: auto !important;overflow-x: hidden !important;}.emileyx-nav-links.active { display: flex !important; top: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }.emileyx-nav-link {width: 100% !important;padding: 1.5rem 2rem !important;border-radius: 15px !important;font-size: 1.2rem !important;text-align: center !important;margin: 0 0 1rem 0 !important;background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 215, 0, 0.3)) !important;border: 2px solid #FFD700 !important;color: white !important;font-weight: 800 !important;letter-spacing: 2px !important;text-transform: uppercase !important;text-decoration: none !important;box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;display: block !important;transition: all 0.3s ease !important;}.emileyx-nav-link:hover, .emileyx-nav-link:focus {transform: scale(1.05) !important;background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 107, 53, 0.4)) !important;color: #FFD700 !important;box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4) !important;}.emileyx-nav-link.active { background: #FF6B35 !important; color: white !important; box-shadow: 0 6px 30px rgba(255, 107, 53, 0.7) !important; }.emileyx-nav-links::before {content: 'EMILE YX? MENU' !important;position: absolute !important;top: 1.5rem !important;left: 50% !important;transform: translateX(-50%) !important;font-family: 'Bebas Neue', Impact, sans-serif !important;font-size: 1.8rem !important;color: #FFD700 !important;text-shadow: 0 0 20px rgba(255, 215, 0, 0.8) !important;white-space: nowrap !important;letter-spacing: 3px !important;display: block !important;}.emileyx-nav-links::after {content: '✕ TAP ANYWHERE TO CLOSE' !important;position: absolute !important;bottom: 1rem !important;left: 50% !important;transform: translateX(-50%) !important;font-size: 0.75rem !important;color: rgba(255, 255, 255, 0.5) !important;white-space: nowrap !important;display: block !important;}    .emileyx-hero-content { padding: 3rem 1.5rem !important; }.emileyx-cta-buttons { flex-direction: column !important; align-items: center !important; gap: 1rem !important; }.emileyx-btn { width: 100% !important; max-width: 300px !important; }.emileyx-stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 1.5rem !important; }.emileyx-cards-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }.form-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }.contact-form-container { padding: 2rem !important; }.education-preview { padding: 3rem 2rem !important; }.progress-ring { width: 100px !important; height: 100px !important; font-size: 2rem !important; }.social-links { gap: 0.5rem !important; }.social-link { padding: 0.8rem 1.2rem !important; font-size: 0.8rem !important; }}@media (max-width: 480px) {.emileyx-nav-links { width: 95% !important; padding: 4.5rem 1.5rem 2.5rem !important; }.emileyx-nav-link { font-size: 1.1rem !important; padding: 1.3rem 1.5rem !important; }.emileyx-nav-links::before { font-size: 1.5rem !important; }}@media (min-width: 769px) {.emileyx-menu-toggle { display: none !important; }.emileyx-nav-overlay { display: none !important; }.emileyx-nav-links {position: static !important;display: flex !important;flex-direction: row !important;opacity: 1 !important;visibility: visible !important;transform: none !important;background: transparent !important;border: none !important;box-shadow: none !important;padding: 0 !important;width: auto !important;max-width: none !important;}}.emileyx-hero {position: relative !important;min-height: 100vh !important;display: flex !important;align-items: center !important;justify-content: center !important;overflow: hidden !important;padding-top: 80px !important;background:
radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(108, 92, 231, 0.15) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(0, 206, 201, 0.08) 0%, transparent 50%),
var(--bg-gradient) !important;}.emileyx-hero::before {content: '' !important;position: absolute !important;inset: 0 !important;    animation: float-pattern 25s linear infinite !important;z-index: 1 !important;}@keyframes float-pattern { 0% { transform: rotate(0deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1.2); } }.emileyx-hero-content { position: relative !important; z-index: 10 !important; text-align: center !important; padding: 4rem 2rem !important; max-width: 1200px !important; margin: 0 auto !important; }.emileyx-hero-kicker {display: inline-block !important;background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold)) !important;-webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;background-clip: text !important;text-transform: uppercase !important;letter-spacing: 3px !important;font-weight: 800 !important;font-size: 1rem !important;margin-bottom: 1.5rem !important;}.emileyx-hero-title {font-family: 'Bebas Neue', Impact, sans-serif !important;font-size: clamp(2.6rem, 8vw, 6rem) !important;line-height: 0.85 !important;margin: 1rem 0 2rem !important;text-shadow: 0 0 30px rgba(255, 107, 53, 0.5), 0 8px 16px rgba(0, 0, 0, 0.4) !important;letter-spacing: 3px !important;color: var(--text) !important;}.emileyx-hero-title .gold-text { color: var(--cape-gold) !important; text-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4) !important; }.emileyx-hero-subtitle { font-size: clamp(1.05rem, 2.4vw, 1.35rem) !important; color: var(--text-muted) !important; margin: 0 auto 2.5rem !important; max-width: 900px !important; line-height: 1.5 !important; }.emileyx-hero-stats { color: var(--text-muted) !important; margin-top: 2rem !important; font-size: 0.9rem !important; font-weight: 600 !important; }.emileyx-cta-buttons { display: flex !important; gap: 1.5rem !important; justify-content: center !important; flex-wrap: wrap !important; margin: 3rem 0 !important; }.emileyx-btn {padding: 0.7rem 1.6rem !important;border-radius: 30px !important;font-weight: 700 !important;text-decoration: none !important;display: inline-flex !important;align-items: center !important;gap: 0.5rem !important;transition: var(--transition) !important;cursor: pointer !important;font-family: 'Inter', system-ui, sans-serif !important;text-transform: uppercase !important;letter-spacing: 1px !important;font-size: 0.8rem !important;border: none !important;position: relative !important;overflow: hidden !important;}.emileyx-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important; transition: left 0.6s ease !important; }.emileyx-btn:hover::before { left: 100% !important; }.emileyx-btn-primary { background: linear-gradient(135deg, var(--cape-orange), var(--cape-red)) !important; color: white !important; box-shadow: var(--glow) !important; }.emileyx-btn-primary:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 20px 40px rgba(255, 107, 53, 0.4) !important; color: white !important; text-decoration: none !important; }.emileyx-btn-secondary { background: transparent !important; border: 2px solid var(--cape-gold) !important; color: var(--cape-gold) !important; }.emileyx-btn-secondary:hover { background: var(--cape-gold) !important; color: var(--deep-blue) !important; transform: translateY(-4px) scale(1.03) !important; text-decoration: none !important; }.emileyx-stats-section { padding: 6rem 2rem !important; background: rgba(255, 215, 0, 0.02) !important; border-top: 1px solid rgba(255, 215, 0, 0.1) !important; border-bottom: 1px solid rgba(255, 215, 0, 0.1) !important; }.emileyx-stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 2.5rem !important; max-width: 1400px !important; margin: 0 auto !important; }.emileyx-stat-card { background: var(--panel) !important; border: 1px solid rgba(255, 215, 0, 0.15) !important; border-radius: var(--radius) !important; padding: 3rem 2rem !important; text-align: center !important; transition: var(--transition) !important; backdrop-filter: blur(15px) !important; position: relative !important; overflow: hidden !important; }.emileyx-stat-card::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold), var(--street-purple)) !important; transform: scaleX(0) !important; transition: transform 0.6s ease !important; }.emileyx-stat-card:hover::after { transform: scaleX(1) !important; }.emileyx-stat-card:hover { transform: translateY(-12px) !important; background: var(--panel-hover) !important; border-color: var(--cape-orange) !important; box-shadow: var(--shadow) !important; }.emileyx-stat-number { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 4rem !important; color: var(--cape-gold) !important; margin-bottom: 0.8rem !important; text-shadow: var(--glow) !important; line-height: 0.9 !important; }.emileyx-stat-label { font-weight: 700 !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; font-size: 0.85rem !important; }.audio-player { background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 215, 0, 0.1)) !important; border: 1px solid rgba(255, 215, 0, 0.15) !important; border-radius: var(--radius) !important; padding: 2rem !important; margin: 3rem auto !important; backdrop-filter: blur(15px) !important; max-width: 600px !important; transition: var(--transition) !important; }.audio-player:hover { transform: translateY(-5px) !important; box-shadow: var(--shadow) !important; border-color: var(--cape-orange) !important; }.player-controls { display: flex !important; align-items: center !important; gap: 1.5rem !important; }.play-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--cape-orange), var(--cape-red)) !important; border: none !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 1.2rem !important; transition: var(--transition) !important; box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important; }.play-btn:hover { background: linear-gradient(135deg, var(--cape-red), var(--cape-orange)) !important; transform: scale(1.1) !important; box-shadow: 0 6px 25px rgba(255, 107, 53, 0.5) !important; }.play-btn:active { transform: scale(0.95) !important; }.track-info { flex: 1 !important; }.track-title { font-weight: 700 !important; font-size: 1.1rem !important; color: var(--text) !important; margin-bottom: 0.5rem !important; letter-spacing: 0.5px !important; }.track-artist { color: var(--text-muted) !important; font-size: 0.9rem !important; font-weight: 500 !important; }.track-duration { color: var(--text-muted) !important; font-size: 0.9rem !important; font-weight: 600 !important; font-family: 'Bebas Neue', monospace !important; letter-spacing: 1px !important; }.emileyx-about-section { padding: 6rem 2rem !important; }.emileyx-section-title { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: clamp(2.5rem, 6vw, 4rem) !important; text-align: center !important; color: var(--cape-orange) !important; text-shadow: var(--glow) !important; letter-spacing: 3px !important; margin-bottom: 4rem !important; }.emileyx-cards-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important; gap: 2.5rem !important; max-width: 1400px !important; margin: 0 auto !important; }.emileyx-culture-card { background: var(--panel) !important; border: 1px solid rgba(255, 215, 0, 0.15) !important; border-radius: var(--radius) !important; padding: 3rem 2.5rem !important; transition: var(--transition) !important; backdrop-filter: blur(15px) !important; position: relative !important; overflow: hidden !important; }.emileyx-culture-card:hover { transform: translateY(-10px) !important; background: var(--panel-hover) !important; border-color: var(--cape-orange) !important; box-shadow: var(--shadow) !important; }.emileyx-card-icon { font-size: 3rem !important; margin-bottom: 1.5rem !important; display: block !important; }.emileyx-card-title { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 1.8rem !important; color: var(--cape-gold) !important; margin-bottom: 1.5rem !important; letter-spacing: 1.5px !important; }.emileyx-card-description { color: var(--text-muted) !important; line-height: 1.6 !important; font-size: 1rem !important; }.emileyx-fade-in-up { opacity: 0 !important; transform: translateY(40px) !important; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; }.emileyx-fade-in-up.visible { opacity: 1 !important; transform: translateY(0) !important; }.emileyx-slide-in-left { opacity: 0 !important; transform: translateX(-40px) !important; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; }.emileyx-slide-in-left.visible { opacity: 1 !important; transform: translateX(0) !important; }.content-section { padding: 6rem 2rem !important; }.content-wrap { max-width: 1400px !important; margin: 0 auto !important; }.education-preview { background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 201, 0.15)) !important; border: 1px solid rgba(108, 92, 231, 0.25) !important; border-radius: var(--radius) !important; padding: 4rem 3rem !important; text-align: center !important; margin: 4rem auto !important; max-width: 800px !important; backdrop-filter: blur(15px) !important; transition: var(--transition) !important; position: relative !important; overflow: hidden !important; }.education-preview::before { content: '' !important; position: absolute !important; top: -50% !important; left: -50% !important; width: 200% !important; height: 200% !important; background: radial-gradient(circle, rgba(108, 92, 231, 0.1) 0%, transparent 70%) !important; animation: rotate 20s linear infinite !important; z-index: -1 !important; }@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.education-preview:hover { transform: translateY(-8px) !important; border-color: var(--street-purple) !important; box-shadow: 0 20px 60px rgba(108, 92, 231, 0.3) !important; }.progress-ring { width: 140px !important; height: 140px !important; border: 6px solid rgba(255, 215, 0, 0.2) !important; border-top: 6px solid var(--cape-gold) !important; border-right: 6px solid var(--cape-orange) !important; border-radius: 50% !important; margin: 0 auto 2.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 2.5rem !important; color: var(--cape-gold) !important; animation: spin-progress 4s linear infinite !important; position: relative !important; }.progress-ring::before { content: '' !important; position: absolute !important; inset: -10px !important; border-radius: 50% !important; background: conic-gradient(from 0deg, transparent, var(--cape-gold), transparent) !important; animation: spin-glow 3s linear infinite reverse !important; z-index: -1 !important; opacity: 0.3 !important; }@keyframes spin-progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }@keyframes spin-glow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.education-preview h3 { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 2.2rem !important; margin-bottom: 1.5rem !important; color: var(--cape-gold) !important; letter-spacing: 2px !important; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important; }.education-preview p { color: var(--text-muted) !important; margin: 0 auto 3rem !important; font-size: 1.1rem !important; line-height: 1.6 !important; max-width: 600px !important; }#contact { background: rgba(255, 107, 53, 0.02) !important; border-top: 1px solid rgba(255, 107, 53, 0.1) !important; }.section-title { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: clamp(2.5rem, 6vw, 4rem) !important; text-align: center !important; color: var(--cape-orange) !important; text-shadow: var(--glow) !important; letter-spacing: 3px !important; margin-bottom: 4rem !important; }.contact-form-container { max-width: 700px !important; margin: 0 auto !important; background: var(--panel) !important; border: 1px solid rgba(255, 215, 0, 0.15) !important; border-radius: var(--radius) !important; padding: 3rem !important; backdrop-filter: blur(15px) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important; }.form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; margin-bottom: 1.5rem !important; }.form-group { margin-bottom: 1.25rem !important; }.form-label { display: block !important; color: var(--cape-gold) !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-size: 0.8rem !important; }.form-input {width: 100% !important;background: rgba(255, 255, 255, 0.05) !important;border: 2px solid rgba(255, 215, 0, 0.15) !important;border-radius: 10px !important;color: var(--text) !important;padding: 0.65rem 0.9rem !important;font-size: 0.9rem !important;transition: var(--transition) !important;font-family: 'Inter', system-ui, sans-serif !important;}.form-input::placeholder { color: rgba(184, 184, 200, 0.6) !important; }.form-input:focus { border-color: var(--cape-orange) !important; box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important; background: rgba(255, 255, 255, 0.08) !important; outline: none !important; }textarea.form-input { resize: vertical !important; min-height: 90px !important; }.submit-btn {width: 100% !important;margin-top: 1.25rem !important;padding: 0.8rem 1.6rem !important;background: linear-gradient(135deg, var(--cape-orange), var(--cape-red)) !important;color: white !important;border: none !important;border-radius: 14px !important;font-weight: 700 !important;text-transform: uppercase !important;letter-spacing: 1.5px !important;font-size: 0.85rem !important;cursor: pointer !important;transition: var(--transition) !important;box-shadow: 0 0 30px rgba(255, 107, 53, 0.3) !important;}.submit-btn:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 15px 35px rgba(255, 107, 53, 0.4) !important; background: linear-gradient(135deg, var(--cape-red), var(--cape-orange)) !important; }.submit-btn:active { transform: translateY(-1px) scale(0.98) !important; }.footer { background: rgba(0, 0, 0, 0.4) !important; border-top: 2px solid rgba(255, 215, 0, 0.15) !important; padding: 4rem 2rem 2rem !important; margin-top: 4rem !important; position: relative !important; }.footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--cape-gold), var(--cape-orange), var(--cape-gold), transparent) !important; }.footer-content { max-width: 1200px !important; margin: 0 auto !important; text-align: center !important; }.footer-brand { font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: 2.5rem !important; color: var(--cape-gold) !important; letter-spacing: 2px !important; margin-bottom: 2rem !important; }.social-links { display: flex !important; justify-content: center !important; gap: 1rem !important; flex-wrap: wrap !important; margin-bottom: 3rem !important; }.social-link { background: var(--panel) !important; padding: 1rem 1.5rem !important; border-radius: 25px !important; border: 1px solid rgba(255, 215, 0, 0.15) !important; color: var(--text-muted) !important; text-decoration: none !important; transition: var(--transition) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-size: 0.85rem !important; }.social-link:hover { background: var(--cape-orange) !important; color: white !important; transform: translateY(-3px) !important; border-color: var(--cape-orange) !important; text-decoration: none !important; box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3) !important; }.footer-copyright { color: var(--text-muted) !important; font-size: 0.9rem !important; padding-top: 2rem !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }.footer-credit-link { color: var(--cape-gold) !important; text-decoration: none !important; font-weight: 600 !important; }.footer-credit-link:hover { color: var(--cape-orange) !important; text-decoration: underline !important; }@media (prefers-reduced-motion: reduce) {* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}.t-Region.t-Region--noUI, .t-Region.t-Region--removeHeader, .t-ContentBlock {background: transparent !important;border: none !important;border-radius: 0 !important;box-shadow: none !important;backdrop-filter: none !important;margin: 0 !important;padding: 0 !important;}.t-Region.t-Region--noUI::after, .t-Region.t-Region--removeHeader::after { display: none !important; }.t-Region.t-Region--noUI .t-Region-body, .t-Region.t-Region--removeHeader .t-Region-body { padding: 0 !important; margin: 0 !important; }.t-Region.t-Region--noUI:hover, .t-Region.t-Region--removeHeader:hover { transform: none !important; box-shadow: none !important; background: transparent !important; }.t-Body-title, .t-Body-header, .t-Body-side { display: none !important; }.eyx-login-page { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 104px 1.25rem 3rem; }.eyx-card { position: relative; width: 100%; max-width: 480px; background: var(--panel); backdrop-filter: blur(22px); border: 1px solid rgba(255, 215, 0, .14); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }.eyx-card--wide { max-width: 520px; }.eyx-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold), var(--street-purple)); }.eyx-head { text-align: center; padding: 2.25rem 2.25rem 1.5rem; background: linear-gradient(180deg, rgba(255, 107, 53, .10), transparent); border-bottom: 1px solid rgba(255, 215, 0, .10); }.eyx-logo { font-size: 3.1rem; line-height: 1; letter-spacing: 3px; background: linear-gradient(135deg, var(--cape-gold), var(--cape-orange) 55%, var(--street-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }.eyx-tag { margin-top: .3rem; color: var(--text-muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }.eyx-body { padding: 1.5rem 2.25rem 2.25rem; }.eyx-welcome { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 1.4rem; }.btn-login { width: 100%; border: none; border-radius: 11px; padding: .8rem 1.5rem; cursor: pointer; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; background: linear-gradient(135deg, var(--cape-orange), var(--cape-red)); box-shadow: 0 10px 26px rgba(255, 107, 53, .32); transition: transform .2s, box-shadow .2s; }.btn-login:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 107, 53, .42); }.btn-login:disabled { opacity: .65; cursor: not-allowed; }.t-Region {background: var(--panel-bg) !important;border: 1px solid var(--border-color) !important;border-radius: var(--border-radius) !important;backdrop-filter: blur(15px);transition: var(--transition-smooth);position: relative;overflow: hidden;}.t-Region::after {content: '';position: absolute;top: 0; left: 0; right: 0;height: 4px;background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold), var(--street-purple));transform: scaleX(0);transition: var(--transition-smooth);}.t-Region:hover::after { transform: scaleX(1); }.t-Region:hover { transform: translateY(-6px); background: var(--panel-hover) !important; box-shadow: var(--shadow-primary); }.t-Region-header { font-family: 'Bebas Neue', Impact, sans-serif !important; color: var(--cape-orange) !important; text-shadow: var(--glow-effect); letter-spacing: 2px; margin-bottom: 1.25rem !important; }.t-Region-title { font-size: 1.8rem !important; line-height: 1.2; }.t-Button {border: 2px solid transparent !important;padding: 0.7rem 1.6rem !important;border-radius: 30px !important;font-weight: 700 !important;display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;transition: var(--transition-smooth) !important;text-transform: uppercase; letter-spacing: 1px;position: relative; overflow: hidden;font-size: 0.8rem !important;}.t-Button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: var(--transition-smooth); }.t-Button:hover::before { left: 100%; }.t-Button--hot, .t-Button--primary { background: linear-gradient(135deg, var(--cape-orange), var(--cape-red)) !important; color: white !important; box-shadow: var(--glow-effect); }.t-Button--hot:hover, .t-Button--primary:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 16px 34px rgba(255, 107, 53, 0.4) !important; }.t-Button--secondary { background: rgba(255, 215, 0, 0.1) !important; border: 2px solid var(--cape-gold) !important; color: var(--cape-gold) !important; backdrop-filter: blur(10px); }.t-Button--secondary:hover { background: var(--cape-gold) !important; color: var(--deep-blue) !important; transform: translateY(-3px) scale(1.02) !important; }.t-Form-field { margin-bottom: 1.5rem; }.t-Form-label { color: var(--cape-gold) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem !important; margin-bottom: 0.5rem; }.t-Form-input, .t-Form-textarea, .t-Form-select {background: rgba(255, 255, 255, 0.06) !important;border: 2px solid var(--border-color) !important;border-radius: 10px !important;color: var(--text-primary) !important;padding: 0.65rem 0.9rem !important;font-size: 0.9rem !important;transition: var(--transition-smooth) !important;font-family: inherit !important;width: 100%;}.t-Form-input:focus, .t-Form-textarea:focus, .t-Form-select:focus {border-color: var(--cape-orange) !important;box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;background: rgba(255, 255, 255, 0.1) !important;outline: none !important;}.t-Report-wrap { background: var(--panel-bg) !important; border-radius: var(--border-radius) !important; overflow: hidden; }.t-Report-report table { background: transparent !important; }.t-Report-report th { background: var(--cape-orange) !important; color: white !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; }.t-Report-report td { background: rgba(255, 255, 255, 0.02) !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }.t-Report-report tr:hover td { background: var(--panel-hover) !important; }.t-Card { background: var(--panel-bg) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; transition: var(--transition-smooth) !important; backdrop-filter: blur(15px); position: relative; overflow: hidden; }.t-Card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold), var(--street-purple)); transform: scaleX(0); transition: var(--transition-smooth); }.t-Card:hover::after { transform: scaleX(1); }.t-Card:hover { transform: translateY(-8px) scale(1.01); background: var(--panel-hover) !important; border-color: var(--cape-orange) !important; box-shadow: var(--shadow-primary) !important; }.t-Card-title { font-family: 'Bebas Neue', Impact, sans-serif !important; color: var(--cape-gold) !important; font-size: 1.8rem !important; letter-spacing: 2px; line-height: 1.2; }.t-Card-desc { color: var(--text-muted) !important; line-height: 1.7; }.gradient-text { background: linear-gradient(135deg, var(--cape-gold), var(--cape-orange), var(--street-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }.culture-stat { text-align: center; padding: 3rem 2rem; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: var(--transition-smooth); backdrop-filter: blur(15px); position: relative; overflow: hidden; }.culture-stat:hover { transform: translateY(-12px) scale(1.02); background: var(--panel-hover); border-color: var(--cape-orange); box-shadow: var(--shadow-primary); }.stat-number { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 4rem; color: var(--cape-gold); margin-bottom: 0.5rem; text-shadow: var(--glow-effect); line-height: 1; }.stat-label { font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; }.music-player { background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 215, 0, 0.1)); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 2rem; backdrop-filter: blur(15px); position: relative; overflow: hidden; }.music-player::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cape-orange), var(--cape-gold), var(--street-purple)); }.t-Button:focus, .t-Form-input:focus, .t-Form-textarea:focus, .t-Form-select:focus { outline: 3px solid var(--cape-gold) !important; outline-offset: 2px; }@media (prefers-contrast: high) {:root { --panel: rgba(255, 255, 255, 0.15); --panel-bg: rgba(255, 255, 255, 0.15); --border: rgba(255, 255, 255, 0.4); --border-color: rgba(255, 255, 255, 0.4); --text-muted: #CCCCCC; }}@media print {.emileyx-nav, .footer, .t-Header, .t-NavigationBar { display: none !important; }.t-Region { background: white !important; color: black !important; box-shadow: none !important; }}.eyx-display { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; }.eyx-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem; border: 1px solid rgba(255,215,0,.12); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.18); }.eyx-cell { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .9rem .4rem; text-align: center; }.eyx-cell + .eyx-cell { border-left: 1px solid rgba(255,255,255,.07); }.eyx-cell svg { width: 20px; height: 20px; stroke: var(--cape-orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.eyx-cell .stat-number { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-size: 1.55rem; line-height: 1; color: var(--cape-gold); }.eyx-cell-lbl { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }#errorMessage { display: none; background: rgba(230,57,70,.15); border: 1px solid var(--cape-red); border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1.25rem; color: #ff9d9d; font-size: .88rem; }#errorMessage.show { display: block; animation: eyx-shake .5s; }@keyframes eyx-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }.message-area { border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.2rem; font-size: .85rem; display: none; align-items: center; gap: .6rem; }.message-area.error { background: rgba(230,57,70,.15); border: 1px solid var(--cape-red); color: #ff9999; }.message-area.success { background: rgba(0,184,148,.15); border: 1px solid var(--township-green); color: var(--township-green); }.message-area.info { background: rgba(0,206,201,.15); border: 1px solid var(--fresh-cyan); color: var(--fresh-cyan); }.message-icon { font-size: 1.2rem; flex-shrink: 0; } .message-text { flex: 1; }.form-input.error { border-color: var(--cape-red); box-shadow: 0 0 0 4px rgba(230,57,70,.18); }.form-input.success { border-color: var(--township-green); box-shadow: 0 0 0 4px rgba(0,184,148,.16); }.password-wrapper { position: relative; }.password-wrapper .form-input { padding-right: 3rem; }#togglePassword, .password-toggle { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: .4rem; border-radius: 8px; z-index: 10; transition: color .2s; }#togglePassword:hover, .password-toggle:hover { color: var(--cape-gold); }.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }.remember-me { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .85rem; cursor: pointer; }.remember-me input { width: 18px; height: 18px; accent-color: var(--cape-orange); cursor: pointer; }.forgot-password { color: var(--cape-gold); text-decoration: none; font-size: .85rem; font-weight: 600; }.forgot-password:hover { color: var(--cape-orange); text-decoration: underline; }.btn-login { position: relative; overflow: hidden; }.btn-login::before { content: ''; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition: left .6s var(--ease); }.btn-login:hover:not(:disabled)::before { left: 120%; }.btn-login:active { transform: translateY(0); }.btn-login.loading { background: linear-gradient(135deg, var(--street-purple), #7B1FA2); }.btn-text, .btn-loader { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: eyx-spin .8s linear infinite; }@keyframes eyx-spin { to { transform: rotate(360deg); } }.eyx-badge-row { display: flex; justify-content: center; margin-top: 1.5rem; }.eyx-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; background: linear-gradient(135deg, var(--street-purple), rgba(108,92,231,.75)); border-radius: 25px; font-weight: 700; letter-spacing: 1.5px; font-size: .72rem; }.eyx-badge svg { width: 15px; height: 15px; fill: var(--cape-gold); }.register-link { text-align: center; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,215,0,.1); color: var(--text-muted); font-size: .86rem; }.register-link a, .back-link { color: var(--cape-gold); text-decoration: none; font-weight: 700; }.register-link a:hover, .back-link:hover { color: var(--cape-orange); }.social-login-section { margin-bottom: 1.25rem; }.btn-google { width: 100%; padding: .7rem 1rem; background: #fff; border: 1.5px solid #dadce0; border-radius: 11px; font-size: .9rem; font-weight: 500; color: #3c4043; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all .2s ease; }.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.1); }.google-icon { width: 18px; height: 18px; }.divider { display: flex; align-items: center; margin: 1.1rem 0; color: var(--text-muted); }.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,215,0,.15); }.divider-text { padding: 0 1rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }.form-help { font-size: .74rem; color: var(--text-muted); margin-top: .35rem; display: block; }.password-strength { margin-top: .6rem; }.strength-bar { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin-bottom: .4rem; }.strength-fill { height: 100%; width: 0; border-radius: 3px; transition: all .3s ease; }.strength-fill.weak { width: 33%; background: var(--cape-red); }.strength-fill.medium { width: 66%; background: var(--cape-gold); }.strength-fill.strong { width: 100%; background: var(--township-green); }.strength-text { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }.strength-text.weak { color: var(--cape-red); } .strength-text.medium { color: var(--cape-gold); } .strength-text.strong { color: var(--township-green); }.username-feedback, .email-feedback, .confirm-password-feedback { margin-top: .4rem; font-size: .78rem; font-weight: 500; padding: .4rem .5rem; border-radius: 6px; transition: all .3s ease; }.username-feedback.checking, .email-feedback.checking { color: var(--cape-gold); background: rgba(255,215,0,.1); border-left: 3px solid var(--cape-gold); }.username-feedback.success, .email-feedback.success { color: var(--township-green); background: rgba(0,184,148,.1); border-left: 3px solid var(--township-green); }.username-feedback.error, .email-feedback.error { color: var(--cape-red); background: rgba(230,57,70,.1); border-left: 3px solid var(--cape-red); }.checkbox-group { display: flex; align-items: flex-start; gap: .7rem; margin: .25rem 0 1.3rem; }.checkbox-group input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cape-orange); cursor: pointer; margin-top: .2rem; flex-shrink: 0; }.checkbox-label { color: var(--text-muted); font-size: .85rem; line-height: 1.6; }.checkbox-label a { color: var(--cape-gold); text-decoration: none; font-weight: 600; }.checkbox-label a:hover { color: var(--cape-orange); text-decoration: underline; }:focus-visible { outline: 3px solid var(--cape-gold); outline-offset: 3px; border-radius: 6px; }@media (max-width: 760px) {.form-row { grid-template-columns: 1fr; }.eyx-card .form-input { font-size: 16px; }}.t-Body-alert { position: relative; z-index: 60; max-width: 480px; margin: 96px auto 0; padding: 0 1.25rem; }.t-Alert.t-Alert--page {background: rgba(26, 26, 46, 0.96) !important;border: 1px solid var(--cape-red) !important;border-radius: 12px !important;backdrop-filter: blur(20px) !important;box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;color: var(--text) !important;overflow: hidden;}.t-Alert--page .t-Alert-wrap { display: flex !important; align-items: center !important; gap: .75rem !important; padding: .9rem 1.15rem !important; }.t-Alert--page .t-Alert-icon, .t-Alert--page .t-Alert-icon .t-Icon { color: #ff9d9d !important; font-size: 1.4rem !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; height: auto !important; }.t-Alert--page .t-Alert-content { flex: 1 !important; }.t-Alert--page .t-Alert-title, .t-Alert--page .t-Alert-body { color: var(--text) !important; font-size: .9rem !important; font-weight: 600 !important; }.t-Alert--page .t-Button--closeAlert { background: transparent !important; border: none !important; color: var(--text-muted) !important; box-shadow: none !important; padding: .25rem !important; }.t-Alert--page .t-Button--closeAlert:hover { color: var(--cape-gold) !important; transform: none !important; }.t-Alert--danger.t-Alert--page, .t-Alert--warning.t-Alert--page {border-color: var(--cape-red) !important;background: linear-gradient(180deg, rgba(230, 57, 70, 0.18), rgba(26, 26, 46, 0.96)) !important;}.t-Alert--danger.t-Alert--page .t-Alert-icon, .t-Alert--warning.t-Alert--page .t-Alert-icon { color: #ff9d9d !important; }.t-Alert--success.t-Alert--page {border-color: var(--township-green) !important;background: linear-gradient(180deg, rgba(0, 184, 148, 0.18), rgba(26, 26, 46, 0.96)) !important;}.t-Alert--success.t-Alert--page .t-Alert-icon { color: var(--township-green) !important; }.emileyx-nav--admin { border-bottom-color: rgba(108, 92, 231, 0.45) !important; }.emileyx-admin-tag {font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 800; letter-spacing: 1px;background: var(--street-purple); color: #fff; padding: .15rem .5rem; border-radius: 20px;vertical-align: middle; margin-left: .4rem;}.emileyx-nav-link--logout { color: #ff9d9d !important; }.emileyx-nav-link--logout:hover { background: rgba(230, 57, 70, .15) !important; color: #fff !important; }.eyx-notification-container { display: flex; flex-direction: column; gap: .75rem; width: 360px; max-width: calc(100vw - 40px); }.eyx-notification {position: relative;overflow: hidden;display: flex;align-items: flex-start;gap: .5rem;background: rgba(26, 26, 46, 0.96);backdrop-filter: blur(20px);border: 1px solid var(--border);border-left: 4px solid var(--street-purple);border-radius: 12px;box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);color: var(--text);padding: .9rem 1rem;transform: translateX(120%);opacity: 0;animation: eyx-toast-in .35s var(--ease) forwards;}@keyframes eyx-toast-in { to { transform: translateX(0); opacity: 1; } }.eyx-notification.removing { animation: eyx-toast-out .3s var(--ease) forwards; }@keyframes eyx-toast-out { to { transform: translateX(120%); opacity: 0; } }.eyx-notification-content { display: flex; align-items: flex-start; gap: .6rem; flex: 1; min-width: 0; }.eyx-notification-icon { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: .85rem; font-weight: 800; color: #fff; background: var(--street-purple); }.eyx-notification-body { flex: 1; min-width: 0; }.eyx-notification-title { font-weight: 700; font-size: .85rem; margin-bottom: .1rem; color: var(--text); }.eyx-notification-message { font-size: .82rem; color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere; }.eyx-notification-close { flex-shrink: 0; background: none; border: none; color: var(--text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 .15rem; transition: color .2s; }.eyx-notification-close:hover { color: var(--cape-gold); }.eyx-notification-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .08); }.eyx-notification-progress-bar { height: 100%; width: 100%; transform-origin: left; background: var(--street-purple); animation: eyx-toast-progress 5s linear forwards; }@keyframes eyx-toast-progress { to { transform: scaleX(0); } }.eyx-notification.success { border-left-color: var(--township-green); }.eyx-notification.success .eyx-notification-icon, .eyx-notification.success .eyx-notification-progress-bar { background: var(--township-green); }.eyx-notification.error { border-left-color: var(--cape-red); }.eyx-notification.error .eyx-notification-icon, .eyx-notification.error .eyx-notification-progress-bar { background: var(--cape-red); }.eyx-notification.warning { border-left-color: var(--cape-gold); }.eyx-notification.warning .eyx-notification-icon, .eyx-notification.warning .eyx-notification-progress-bar { background: var(--cape-gold); color: var(--deep-blue); }.eyx-notification.info { border-left-color: var(--fresh-cyan); }.eyx-notification.info .eyx-notification-icon, .eyx-notification.info .eyx-notification-progress-bar { background: var(--fresh-cyan); color: var(--deep-blue); }