/* ==================================================================== ASTA MART — DARK MODE / LIQUID GLASS Premium dark theme with frosted glass effects Toggle via [data-theme="dark"] on ==================================================================== */ /* ══════════════════════════════════════════════════════════════════ DARK MODE VARIABLES ══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --am-accent: #E07A62; --am-accent-dark: #C8553D; --am-accent-light: #F09A82; --am-accent-glow: rgba(224, 122, 98, 0.3); --am-accent-soft: rgba(224, 122, 98, 0.1); --am-bg-0: #0c0a0e; --am-bg-1: #141218; --am-bg-2: #1c1922; --am-bg-3: #2a2633; --am-bg-card: rgba(22, 20, 28, 0.85); --am-bg-glass: rgba(255, 255, 255, 0.02); --am-text-1: #f0edf5; --am-text-2: #c4bfd0; --am-text-3: #8e87a0; --am-text-4: #5e586e; --am-text-muted: rgba(240, 237, 245, 0.35); --am-border: rgba(255, 255, 255, 0.06); --am-border-hover: rgba(255, 255, 255, 0.12); --am-glass-bg: rgba(22, 20, 28, 0.55); --am-glass-border: rgba(224, 122, 98, 0.1); --am-shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --am-shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.25); --am-shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3); --am-shadow-xl: 0 24px 60px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4); /* Legacy mapping for older CSS */ --bg-deep: var(--am-bg-0); --bg-card: var(--am-bg-card); --bg-0: var(--am-bg-0); --bg-1: var(--am-bg-1); --bg-2: var(--am-bg-2); --bg-3: var(--am-bg-3); --bg-primary: var(--am-bg-0); --bg-secondary: var(--am-bg-1); --text-1: var(--am-text-1); --text-2: var(--am-text-2); --text-3: var(--am-text-3); --text-4: var(--am-text-4); --text-primary: var(--am-text-1); --text-secondary: var(--am-text-3); --text-muted: var(--am-text-muted); --white-pure: var(--am-text-1); --white-dim: var(--am-text-2); --white-muted: var(--am-text-muted); --glass-border: var(--am-border); --glass-bg: var(--am-bg-glass); --border-dim: var(--am-border); --border-mid: var(--am-border-hover); --accent: var(--am-accent); --accent-glow: var(--am-accent-glow); --red: var(--am-accent); --red-dark: var(--am-accent-dark); --bg-glass: var(--am-bg-glass); /* AUDIT FIX: browse.html and listing.html declare their own :root using the BARE legacy names --bg / --text / --text-dim / --glass / --border with light-only values. dark-mode.css previously mapped the numbered legacy names (--bg-0, --text-1, ...) but NOT these bare ones, so those two pages kept near-black text on the (forced-dark) body — unreadable — and invisible borders in dark mode. Mapping them here fixes both pages centrally, exactly like the mappings above. `html[data-theme="dark"]` (specificity 0,1,1) outranks a page-level `:root` (0,1,0), so this wins. */ --bg: var(--am-bg-0); --text: var(--am-text-1); --text-dim: var(--am-text-2); --glass: var(--am-bg-glass); --border: var(--am-border); --bg-hover: var(--am-bg-2); color-scheme: dark; } /* ── BODY & BASE ────────────────────────────────────────────── */ html[data-theme="dark"] body { background: #0c0a0e !important; color: var(--am-text-1); background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,122,98,0.04) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 90%, rgba(120,80,200,0.03) 0%, transparent 50%) !important; } html[data-theme="dark"] ::selection { background: var(--am-accent); color: #0c0a0e; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0c0a0e; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2633; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--am-accent); } /* ══════════════════════════════════════════════════════════════════ LIQUID GLASS — DARK MODE Stunning frosted glassmorphism on dark backgrounds ══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .liquid-glass, html[data-theme="dark"] .listing-card, html[data-theme="dark"] .dash-stat, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .vp-card, html[data-theme="dark"] .create-section, html[data-theme="dark"] .browse-card, html[data-theme="dark"] .saved-card, html[data-theme="dark"] .vault-card { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%) !important; backdrop-filter: blur(16px) saturate(150%) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; } /* NOTE: the dark glass surface is applied ONLY to the explicit card classes listed above. It must NOT be blanket-applied to every `.card`, because several components (`.region-card .card`, `.package-card .card`, `.cine-card`, agent `.card`) use `.card` as an inner element with their own 3D/flip styling — layering the glass box on top produced a stray, boxy background that appeared ONLY in dark mode. */ /* Glass highlight shimmer */ html[data-theme="dark"] .liquid-glass::before, html[data-theme="dark"] .listing-card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent) !important; } /* Glass hover — glow effect */ html[data-theme="dark"] .liquid-glass:hover, html[data-theme="dark"] .listing-card:hover, html[data-theme="dark"] .feature-card:hover, html[data-theme="dark"] .vp-card:hover { border-color: rgba(224, 122, 98, 0.15) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(224, 122, 98, 0.06) !important; } /* doc-content-card (accordion) */ html[data-theme="dark"] .doc-content-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.05) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .doc-content-card:hover { border-color: rgba(224, 122, 98, 0.12) !important; } html[data-theme="dark"] .doc-section-content .doc-content-card, html[data-theme="dark"] .doc-section-content ul.doc-content-card, html[data-theme="dark"] ul.doc-content-card, html[data-theme="dark"] ol.doc-content-card { background: transparent !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; } html[data-theme="dark"] .doc-section-content .doc-content-card li, html[data-theme="dark"] ul.doc-content-card li, html[data-theme="dark"] ol.doc-content-card li { color: var(--am-text-2); } /* ── NAVBAR GLASS — DARK ────────────────────────────────────── */ html[data-theme="dark"] .navbar-glass { background: rgba(12, 10, 14, 0.7) !important; backdrop-filter: blur(40px) saturate(160%) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } html[data-theme="dark"] .navbar-glass.scrolled { background: rgba(12, 10, 14, 0.88) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .navbar-glass .ng-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .navbar-glass .ng-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .navbar-glass .ng-link:hover, html[data-theme="dark"] .navbar-glass .ng-link.active { color: #f0edf5 !important; background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .navbar-glass .ng-btn-ghost { color: rgba(240,237,245,0.7) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .navbar-glass .ng-btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #f0edf5 !important; } html[data-theme="dark"] .navbar-glass .ng-hamburger { color: #f0edf5 !important; } /* ── MOBILE NAV — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .ng-mobile-nav { background: rgba(12, 10, 14, 0.95) !important; backdrop-filter: blur(40px) !important; border-left: 1px solid rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .ng-mobile-nav a { color: var(--am-text-2) !important; } html[data-theme="dark"] .ng-mobile-nav a:hover, html[data-theme="dark"] .ng-mobile-nav a.active { color: var(--am-accent) !important; } html[data-theme="dark"] .ng-mobile-close { color: var(--am-text-3) !important; } /* ── USER MENU — DARK ──────────────────────────────────────── */ html[data-theme="dark"] .ng-user-menu { background: rgba(22, 20, 28, 0.95) !important; backdrop-filter: blur(40px) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] .ng-user-menu a, html[data-theme="dark"] .ng-user-menu button { color: var(--am-text-2) !important; } html[data-theme="dark"] .ng-user-menu a:hover, html[data-theme="dark"] .ng-user-menu button:hover { background: rgba(255,255,255,0.05) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .ng-menu-divider { background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .ng-avatar { background: rgba(224,122,98,0.15) !important; } /* ── AUTH MODAL — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .auth-overlay-unified { background: rgba(0,0,0,0.75) !important; } html[data-theme="dark"] .auth-modal-unified, html[data-theme="dark"] .auth-modal, html[data-theme="dark"] .modal-box { background: rgba(22, 20, 28, 0.95) !important; backdrop-filter: blur(40px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: var(--am-shadow-xl) !important; } html[data-theme="dark"] .auth-tab-btn { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-tab-btn.active { color: var(--am-accent) !important; border-color: var(--am-accent) !important; } html[data-theme="dark"] .auth-input-field, html[data-theme="dark"] .auth-input, html[data-theme="dark"] input.auth-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .auth-input-field:focus, html[data-theme="dark"] .auth-input:focus { border-color: rgba(224,122,98,0.4) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 4px rgba(224,122,98,0.1) !important; } html[data-theme="dark"] .auth-input-field::placeholder { color: var(--am-text-4) !important; } html[data-theme="dark"] .auth-close-btn { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-divider-line span { color: var(--am-text-4) !important; background: rgba(22,20,28,0.95) !important; } html[data-theme="dark"] .auth-divider-line::before { background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .google-signin-premium { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .google-signin-premium:hover { background: rgba(255,255,255,0.07) !important; } /* ── PAGE HEADERS — DARK ───────────────────────────────────── */ html[data-theme="dark"] .doc-page-header { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(24px) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .doc-page-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .doc-page-subtitle { color: var(--am-text-3) !important; } /* ── FORMS — DARK ──────────────────────────────────────────── */ html[data-theme="dark"] .form-group input, html[data-theme="dark"] .form-group select, html[data-theme="dark"] .form-group textarea, html[data-theme="dark"] .search-input, html[data-theme="dark"] .filter-input, html[data-theme="dark"] .filters-bar input, html[data-theme="dark"] .filters-bar select, html[data-theme="dark"] .doc-search-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .form-group input:focus, html[data-theme="dark"] .form-group select:focus, html[data-theme="dark"] .form-group textarea:focus, html[data-theme="dark"] .search-input:focus, html[data-theme="dark"] .doc-search-input:focus { border-color: rgba(224,122,98,0.4) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 4px rgba(224,122,98,0.08) !important; } html[data-theme="dark"] .form-group input::placeholder, html[data-theme="dark"] .form-group textarea::placeholder, html[data-theme="dark"] .search-input::placeholder, html[data-theme="dark"] .doc-search-input::placeholder { color: var(--am-text-4) !important; } html[data-theme="dark"] .form-group label, html[data-theme="dark"] .form-label { color: var(--am-text-2) !important; } /* ── BUTTONS — DARK ────────────────────────────────────────── */ html[data-theme="dark"] .btn-ghost { color: var(--am-text-2) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--am-text-1) !important; } /* ── SKIN CARDS — DARK ─────────────────────────────────────── */ html[data-theme="dark"] .skin-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(20px) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .skin-card:hover { border-color: rgba(224,122,98,0.2) !important; } html[data-theme="dark"] .skin-card .skin-name { color: var(--am-text-1) !important; } /* ── TABS & PROGRESS — DARK ────────────────────────────────── */ html[data-theme="dark"] .inv-tab { background: var(--am-bg-2) !important; color: var(--am-text-3) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .inv-tab.active { background: rgba(22, 20, 28, 0.8) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .progress-step { background: rgba(255,255,255,0.04) !important; color: var(--am-text-4) !important; } html[data-theme="dark"] .form-progress { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── UPLOAD ZONE — DARK ────────────────────────────────────── */ html[data-theme="dark"] .upload-zone { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.02) !important; } html[data-theme="dark"] .upload-zone:hover { border-color: var(--am-accent) !important; background: rgba(224,122,98,0.04) !important; } /* ── CALLOUTS — DARK ───────────────────────────────────────── */ html[data-theme="dark"] .doc-callout { background: rgba(224,122,98,0.06) !important; border-left-color: var(--am-accent) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .doc-callout.success { background: rgba(76,175,80,0.08) !important; } html[data-theme="dark"] .doc-callout.warning { background: rgba(200,135,61,0.08) !important; } /* ── ACCOUNT SUMMARY — DARK ────────────────────────────────── */ html[data-theme="dark"] .account-summary-card { background: rgba(224,122,98,0.06) !important; border-color: rgba(224,122,98,0.15) !important; } html[data-theme="dark"] .summary-val { color: var(--am-text-1) !important; } html[data-theme="dark"] .divider { background: rgba(255,255,255,0.06) !important; } /* ── INSTRUCTION BOX — DARK ────────────────────────────────── */ html[data-theme="dark"] .instruction-box { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── CONTACT FORM — DARK ───────────────────────────────────── */ html[data-theme="dark"] .contact-form-card { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── LOGIN REQUIRED — DARK ─────────────────────────────────── */ html[data-theme="dark"] .login-required-box { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .login-required-box h2 { color: var(--am-text-1) !important; } html[data-theme="dark"] .login-required-box p { color: var(--am-text-3) !important; } /* ── SELL ONBOARDING — DARK ────────────────────────────────── */ html[data-theme="dark"] .sell-onboarding.login-required-box { background: radial-gradient(circle at 90% 8%, rgba(224,122,98,0.1), transparent 35%), linear-gradient(135deg, rgba(22,20,28,0.95), rgba(18,16,22,0.9)) !important; border-color: rgba(224,122,98,0.12) !important; } html[data-theme="dark"] .sell-onboarding-step { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.06) !important; } /* ── FOOTER — DARK ─────────────────────────────────────────── */ html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer { background: rgba(12, 10, 14, 0.8) !important; border-top-color: rgba(255,255,255,0.06) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .footer-col h4 { color: var(--am-text-1) !important; } html[data-theme="dark"] .footer-col ul li a { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col ul li a:hover { color: var(--am-accent) !important; } html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; color: var(--am-text-4) !important; } html[data-theme="dark"] .footer-bottom strong { color: var(--am-text-2) !important; } html[data-theme="dark"] .brand-col p { color: var(--am-text-3) !important; } html[data-theme="dark"] .social-icon { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; } /* ── TOASTS — DARK ─────────────────────────────────────────── */ html[data-theme="dark"] .am-toast.success { background: rgba(76,175,80,0.12) !important; border-color: rgba(76,175,80,0.25) !important; } html[data-theme="dark"] .am-toast.error { background: rgba(224,122,98,0.12) !important; border-color: rgba(224,122,98,0.25) !important; } /* ── INDEX PAGE HERO — DARK ────────────────────────────────── */ html[data-theme="dark"] .cine-hero { background: #0c0a0e !important; } html[data-theme="dark"] .cine-card { background: rgba(22, 20, 28, 0.5) !important; backdrop-filter: blur(32px) saturate(160%) !important; border-color: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .cine-badge { background: rgba(22,20,28,0.7) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-2) !important; } html[data-theme="dark"] .cine-matte, html[data-theme="dark"] .cine-hero h1, html[data-theme="dark"] .hero-title { color: #f0edf5 !important; } html[data-theme="dark"] .cine-silver, html[data-theme="dark"] .cine-hero h2 { color: rgba(240,237,245,0.7) !important; } html[data-theme="dark"] .cine-stat-val { color: var(--am-accent) !important; } html[data-theme="dark"] .cine-stat-label { color: var(--am-text-3) !important; } /* ── MISC DARK OVERRIDES ───────────────────────────────────── */ html[data-theme="dark"] .navbar { background: rgba(12,10,14,0.88) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .nav-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .nav-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: #f0edf5 !important; } /* Select option styling */ html[data-theme="dark"] option { background: #1c1922; color: var(--am-text-1); } /* Table dark */ html[data-theme="dark"] table { border-color: rgba(255,255,255,0.06); } html[data-theme="dark"] th { background: rgba(255,255,255,0.03); color: var(--am-text-2); } html[data-theme="dark"] td { color: var(--am-text-2); border-color: rgba(255,255,255,0.04); } /* UPI box */ html[data-theme="dark"] .upi-box { background: rgba(22,20,28,0.7) !important; border-color: var(--am-accent) !important; } /* ══════════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════════════ */ .theme-toggle { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; flex-shrink: 0; padding: 0; } .theme-toggle:hover { transform: scale(1.08); background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .sun-icon, .theme-toggle .moon-icon { width: 18px; height: 18px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: absolute; } .theme-toggle .sun-icon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .moon-icon { opacity: 0; transform: rotate(-90deg) scale(0.5); } html[data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); } html[data-theme="dark"] .theme-toggle .sun-icon { opacity: 0; transform: rotate(90deg) scale(0.5); } html[data-theme="dark"] .theme-toggle .moon-icon { opacity: 1; transform: rotate(0deg) scale(1); } /* ══════════════════════════════════════════════════════════════════ SMOOTH TRANSITION for theme switch ══════════════════════════════════════════════════════════════════ */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.4s ease !important; transition-delay: 0s !important; } /* ══════════════════════════════════════════════════════════════════ PERFORMANCE: prefer-reduced-motion ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════ ADMIN PANEL — DARK MODE (FULL OVERRIDE) Page uses inline :root vars that shadow dark-mode CSS vars. We must force-override every admin element specifically. ══════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .page-admin, html[data-theme="dark"] body.page-admin { background: #0f172a !important; color: #e2e8f0 !important; } html[data-theme="dark"] .page-admin .admin-login { background: #0f172a !important; } html[data-theme="dark"] .page-admin .login-card { background: #1e293b !important; border-color: rgba(148,163,184,0.12) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .page-admin .login-card h1 { color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .login-card p { color: #94a3b8 !important; } html[data-theme="dark"] .page-admin .login-card input { background: #0f172a !important; border-color: rgba(148,163,184,0.15) !important; color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .login-card input::placeholder { color: #64748b !important; } html[data-theme="dark"] .page-admin .login-card input:focus { border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,0.15) !important; } html[data-theme="dark"] .page-admin .sidebar { background: #0f172a !important; border-right-color: rgba(148,163,184,0.08) !important; } html[data-theme="dark"] .page-admin .sidebar-brand span { color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .sidebar-section { color: #64748b !important; } html[data-theme="dark"] .page-admin .sidebar-link { color: #94a3b8 !important; } html[data-theme="dark"] .page-admin .sidebar-link:hover { background: rgba(148,163,184,0.08) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .page-admin .sidebar-link.active { background: rgba(249,115,22,0.1) !important; color: #f97316 !important; } html[data-theme="dark"] .page-admin .admin-main { background: #0f172a !important; } html[data-theme="dark"] .page-admin .page-title { color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .page-subtitle { color: #94a3b8 !important; } html[data-theme="dark"] .page-admin .stat-card { background: #1e293b !important; border-color: rgba(148,163,184,0.1) !important; } html[data-theme="dark"] .page-admin .stat-card:hover { border-color: rgba(249,115,22,0.2) !important; } html[data-theme="dark"] .page-admin .stat-label { color: #64748b !important; } html[data-theme="dark"] .page-admin .stat-value { color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .card { background: #1e293b !important; border-color: rgba(148,163,184,0.1) !important; } html[data-theme="dark"] .page-admin .card-title { color: #e2e8f0 !important; } html[data-theme="dark"] .page-admin .data-table th { background: rgba(15,23,42,0.5) !important; color: #94a3b8 !important; border-bottom-color: rgba(148,163,184,0.1) !important; } html[data-theme="dark"] .page-admin .data-table td { color: #cbd5e1 !important; border-bottom-color: rgba(148,163,184,0.06) !important; } html[data-theme="dark"] .page-admin .data-table tr:hover td { background: rgba(148,163,184,0.04) !important; } html[data-theme="dark"] .page-admin .input { background: #0f172a !important; border-color: rgba(148,163,184,0.15) !important; color: #f1f5f9 !important; } html[data-theme="dark"] .page-admin .input::placeholder { color: #64748b !important; } html[data-theme="dark"] .page-admin .input:focus { border-color: #f97316 !important; } html[data-theme="dark"] .page-admin .tab { color: #64748b !important; } html[data-theme="dark"] .page-admin .tab:hover { color: #cbd5e1 !important; } html[data-theme="dark"] .page-admin .tab.active { color: #f97316 !important; border-bottom-color: #f97316 !important; } html[data-theme="dark"] .page-admin .tabs { border-bottom-color: rgba(148,163,184,0.1) !important; } html[data-theme="dark"] .page-admin .btn-ghost { color: #94a3b8 !important; border-color: rgba(148,163,184,0.15) !important; } html[data-theme="dark"] .page-admin .btn-ghost:hover { background: rgba(148,163,184,0.08) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .page-admin .pagination button { border-color: rgba(148,163,184,0.15) !important; color: #94a3b8 !important; } html[data-theme="dark"] .page-admin .pagination button:hover { background: rgba(148,163,184,0.08) !important; } html[data-theme="dark"] .page-admin .pagination button.active { background: #f97316 !important; color: #fff !important; border-color: #f97316 !important; } html[data-theme="dark"] .page-admin .toast-success { background: rgba(34,197,94,0.15) !important; color: #22c55e !important; border-color: rgba(34,197,94,0.3) !important; } html[data-theme="dark"] .page-admin .toast-error { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; border-color: rgba(239,68,68,0.3) !important; } html[data-theme="dark"] .page-admin .empty-state { color: #64748b !important; } html[data-theme="dark"] .page-admin option { background: #1e293b !important; color: #e2e8f0 !important; } /* Admin chart fix */ html[data-theme="dark"] .page-admin canvas { filter: brightness(1.1); } /* Badge visibility in dark admin */ html[data-theme="dark"] .page-admin .badge { font-weight: 700 !important; } /* ══════════════════════════════════════════════════════════════════ DARK MODE — INDEX.HTML SPECIFIC OVERRIDES (Cards, Stats, Sections) ══════════════════════════════════════════════════════════════════ */ /* Stats strip — kept plain/borderless, matching the light-mode treatment (only colors change between themes, not the presence of a box). Light mode renders these as plain text on the page background with no visible box, so dark mode must NOT draw a border/background either — otherwise a boxed artifact appears in dark mode only. */ html[data-theme="dark"] .stat-item { background: transparent !important; border: 1px solid transparent !important; color: var(--am-text-1) !important; box-shadow: none !important; } html[data-theme="dark"] .stat-item:hover { border-color: transparent !important; box-shadow: none !important; transform: translateY(-3px); } html[data-theme="dark"] .stat-num { color: var(--am-accent) !important; } html[data-theme="dark"] .stat-label { color: var(--am-text-2) !important; } /* Process steps — unified premium glass surface */ html[data-theme="dark"] .process-step { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.07) !important; } html[data-theme="dark"] .process-step:hover { border-color: rgba(224,122,98,0.28) !important; box-shadow: 0 18px 44px -14px rgba(0,0,0,0.75), 0 0 30px -8px rgba(224,122,98,0.12) !important; } html[data-theme="dark"] .process-step h3 { color: var(--am-text-1) !important; } html[data-theme="dark"] .process-step p { color: var(--am-text-2) !important; } html[data-theme="dark"] .process-step::before { color: var(--am-accent) !important; } /* Discover tiles */ html[data-theme="dark"] .discover-tile { box-shadow: 0 14px 40px rgba(0,0,0,0.3) !important; } /* Testimonial cards — unified premium glass surface */ html[data-theme="dark"] .testimonial-card { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.07) !important; } html[data-theme="dark"] .testimonial-card:hover { border-color: rgba(224,122,98,0.28) !important; box-shadow: 0 18px 44px -14px rgba(0,0,0,0.75), 0 0 30px -8px rgba(224,122,98,0.12) !important; } html[data-theme="dark"] .testimonial-text { color: var(--am-text-2) !important; } html[data-theme="dark"] .testimonial-name { color: var(--am-text-1) !important; } html[data-theme="dark"] .testimonial-rank { color: var(--am-text-3) !important; } html[data-theme="dark"] .testimonial-avatar { background: rgba(224,122,98,0.15) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .testimonial-card::before { color: var(--am-accent) !important; } /* ── VOUCH BELT EDGE FADE (item 3) ──────────────────────────────────── The belt's fade-out edges are ::before/::after on .testimonial-belt-section in index.html. They previously used var(--beige, #FAF7F4) — and `--beige` is not defined anywhere in the codebase, so they ALWAYS resolved to the hardcoded near-white #FAF7F4, producing two white bars over the dark background. index.html now drives them from --am-bg-0; this block is the explicit dark-mode override, following the same pattern as the other component overrides in this file. */ html[data-theme="dark"] .testimonial-belt-section::before { background: linear-gradient(to right, var(--am-bg-0), transparent) !important; } html[data-theme="dark"] .testimonial-belt-section::after { background: linear-gradient(to left, var(--am-bg-0), transparent) !important; } /* Listing cards on homepage storefront — match unified premium surface */ html[data-theme="dark"] .listing-card { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; } html[data-theme="dark"] .listing-card:hover { border-color: rgba(224,122,98,0.28) !important; box-shadow: 0 22px 60px -18px rgba(0,0,0,0.7), 0 0 30px -8px rgba(224,122,98,0.12) !important; } html[data-theme="dark"] .listing-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .listing-meta { color: var(--am-text-2) !important; } html[data-theme="dark"] .listing-price { color: var(--am-accent) !important; } html[data-theme="dark"] .listing-body { color: var(--am-text-2) !important; } html[data-theme="dark"] .listing-img { background: rgba(22,20,28,0.7) !important; } /* Skeleton cards */ html[data-theme="dark"] .skeleton-img, html[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, rgba(42,38,51,1) 0%, rgba(28,25,34,1) 50%, rgba(42,38,51,1) 100%) !important; background-size: 200% 100% !important; } /* Empty state */ html[data-theme="dark"] .empty-state { background: rgba(22,20,28,0.5) !important; border-color: rgba(255,255,255,0.06) !important; color: var(--am-text-3) !important; } html[data-theme="dark"] .empty-state strong { color: var(--am-text-1) !important; } /* CTA banner */ html[data-theme="dark"] .cta-banner { box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important; } /* Section labels & titles */ html[data-theme="dark"] .section-label { color: var(--am-accent) !important; } html[data-theme="dark"] .section-title { color: var(--am-text-1) !important; } /* Footer dark */ html[data-theme="dark"] .footer { background: rgba(12,10,14,0.8) !important; border-top-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .footer-brand p { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col a { color: var(--am-text-3) !important; } html[data-theme="dark"] .footer-col a:hover { color: var(--am-accent) !important; } html[data-theme="dark"] .footer-col h4 { color: var(--am-text-1) !important; } html[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.04) !important; color: var(--am-text-4) !important; } /* Features section */ html[data-theme="dark"] .features-section { background: #0c0a0e !important; } html[data-theme="dark"] .feature-icon { background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.22), inset 0 -8px 16px rgba(224,122,98,0.07), 0 12px 26px -10px rgba(0,0,0,0.7) !important; } html[data-theme="dark"] .feature-icon::before { opacity: 0.20; } html[data-theme="dark"] .feature-icon::after { background: radial-gradient(circle, rgba(224,122,98,0.34), transparent 72%); opacity: 0.65; } html[data-theme="dark"] .feature-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .feature-desc { color: var(--am-text-2) !important; } /* Navbar (index.html has its own old-style navbar) */ html[data-theme="dark"] .navbar { background: rgba(12,10,14,0.88) !important; border-bottom-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .navbar.scrolled { background: rgba(12,10,14,0.96) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .nav-brand-text { color: #f0edf5 !important; } html[data-theme="dark"] .nav-link { color: rgba(240,237,245,0.6) !important; } html[data-theme="dark"] .nav-link:hover { color: #f0edf5 !important; background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] .nav-link.active { color: var(--am-accent) !important; background: rgba(224,122,98,0.1) !important; } html[data-theme="dark"] .nav-btn-ghost { color: rgba(240,237,245,0.7) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .nav-btn-ghost:hover { background: rgba(255,255,255,0.06) !important; color: #f0edf5 !important; } /* Mobile nav dark */ html[data-theme="dark"] .mobile-nav { background: rgba(12,10,14,0.98) !important; } html[data-theme="dark"] .mobile-nav a { color: var(--am-text-2) !important; } html[data-theme="dark"] .mobile-nav a:hover { color: var(--am-accent) !important; } /* Auth modal dark */ html[data-theme="dark"] .auth-overlay { background: rgba(0,0,0,0.7) !important; } html[data-theme="dark"] .auth-modal { background: rgba(22,20,28,0.95) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .auth-tab { color: var(--am-text-3) !important; } html[data-theme="dark"] .auth-tab.active { color: var(--am-accent) !important; border-bottom-color: var(--am-accent) !important; } html[data-theme="dark"] .auth-input { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--am-text-1) !important; } html[data-theme="dark"] .auth-close { color: var(--am-text-3) !important; } /* User menu dark */ html[data-theme="dark"] .user-menu { background: rgba(22,20,28,0.95) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] .user-menu a, html[data-theme="dark"] .user-menu button { color: var(--am-text-2) !important; } html[data-theme="dark"] .user-menu a:hover, html[data-theme="dark"] .user-menu button:hover { background: rgba(255,255,255,0.05) !important; color: var(--am-accent) !important; } html[data-theme="dark"] .user-menu .divider { background: rgba(255,255,255,0.06) !important; } /* Loader screen dark */ html[data-theme="dark"] .loader-screen { background: #0c0a0e !important; } html[data-theme="dark"] .loader-text { color: var(--am-text-3) !important; } html[data-theme="dark"] .loader-bar { background: rgba(255,255,255,0.06) !important; } /* Hero background dark — pure jet black, clean & flat (no gradient/grid). */ html[data-theme="dark"] .cine-hero { background: #000000 !important; } html[data-theme="dark"] .cine-matte { color: #f0edf5 !important; } html[data-theme="dark"] .cine-scroll-hint { color: var(--am-text-3) !important; } html[data-theme="dark"] .cine-scroll-hint .hint-line { background: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .cine-cta-wrapper h2 { background: linear-gradient(180deg, #f0edf5 0%, var(--am-accent) 120%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="dark"] .cine-cta-wrapper p { color: var(--am-text-3) !important; } html[data-theme="dark"] .cine-credit { color: var(--am-text-4) !important; } html[data-theme="dark"] .cine-credit b { color: var(--am-text-1) !important; } /* Storefront header dark */ html[data-theme="dark"] .btn-hero-glass { background: rgba(255,255,255,0.05) !important; color: var(--am-text-2) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] .btn-hero-glass:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; } /* Card body text in listing cards (browse page style) */ html[data-theme="dark"] .card-body { color: var(--am-text-2) !important; } html[data-theme="dark"] .card-title { color: var(--am-text-1) !important; } html[data-theme="dark"] .card-price { color: var(--am-accent) !important; } html[data-theme="dark"] .card-stat { color: var(--am-text-3) !important; } html[data-theme="dark"] .card-stat span { color: var(--am-text-1) !important; } html[data-theme="dark"] .pill { background: rgba(91,138,114,0.06) !important; color: #5B8A72 !important; border-color: rgba(91,138,114,0.15) !important; } html[data-theme="dark"] .rank-badge { color: inherit !important; } html[data-theme="dark"] .region-badge { background: rgba(91,138,114,0.06) !important; color: #5B8A72 !important; border-color: rgba(91,138,114,0.15) !important; } html[data-theme="dark"] .card-footer { border-top-color: rgba(255,255,255,0.04) !important; } html[data-theme="dark"] .bookmarkBtn { background: rgba(255,255,255,0.04) !important; color: var(--am-text-3) !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .bookmarkBtn.saved { background: rgba(224,122,98,0.1) !important; color: var(--am-accent) !important; border-color: var(--am-accent) !important; } /* Card image wrap dark */ html[data-theme="dark"] .card-img-wrap { background: linear-gradient(135deg, rgba(22,20,28,0.6), rgba(28,25,34,0.8)) !important; } html[data-theme="dark"] .card-img-wrap::after { background: linear-gradient(to top, rgba(22,20,28,0.95), transparent) !important; } /* ══════════════════════════════════════════════════════════════════ DARK MODE — UNIVERSAL CARD/SURFACE FIX (v3.1) Catch-all so NO card renders as a flat light-gray block with unreadable text. Covers every card-like class site-wide. ══════════════════════════════════════════════════════════════════ */ /* IMPORTANT: this catch-all deliberately EXCLUDES the flip/3D card wrappers and their inner `.card` element (`.region-card`, `.package-card`, `.cine-card` and the `.card` nested inside them). Those components ship their own transparent/gradient + transform styling; layering an opaque glass box on top produced a stray boxy background that only showed up in dark mode. We scope `.card` to direct/known containers instead of every `.card` on the page. */ html[data-theme="dark"] .tile, html[data-theme="dark"] .box, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .panel:not(#dashboard *), html[data-theme="dark"] .info-card, html[data-theme="dark"] .glass-card, html[data-theme="dark"] .account-card, html[data-theme="dark"] .product-card, html[data-theme="dark"] .owner-stock-card { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.85) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: var(--am-text-1) !important; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* Text inside cards must stay readable */ html[data-theme="dark"] .tile, html[data-theme="dark"] .box, html[data-theme="dark"] .stat-card, html[data-theme="dark"] [class*="-card"] { --tile-fg: var(--am-text-1); } html[data-theme="dark"] .tile *:not(a):not(button), html[data-theme="dark"] .box *:not(a):not(button) { color: inherit; } html[data-theme="dark"] .tile-title, html[data-theme="dark"] .card-title, html[data-theme="dark"] .stat-value, html[data-theme="dark"] .stat-num { color: var(--am-text-1) !important; } html[data-theme="dark"] .tile-desc, html[data-theme="dark"] .tile-label, html[data-theme="dark"] .stat-label { color: var(--am-text-3) !important; } /* Kill any hard-coded light backgrounds that leak through in dark mode */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background:#f8f"], html[data-theme="dark"] [style*="background:#f1f"], html[data-theme="dark"] [style*="background:#f5f"], html[data-theme="dark"] [style*="background:#eee"], html[data-theme="dark"] [style*="background:#e2e"] { background: var(--am-bg-2) !important; color: var(--am-text-1) !important; } /* Owner's Stock badge / featured ribbon dark styling */ html[data-theme="dark"] .owner-stock-badge { background: linear-gradient(135deg, #E07A62, #C8553D) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════════════ VAULT PAGES — DARK MODE Both Vault pages (public/vault.html preview + public/vault-dashboard.html owner view) declare their surfaces via page-local --v* tokens that are derived from the shared --am-* variables. Dark mode is applied here, in the shared stylesheet, using the SAME html[data-theme="dark"] mechanism as every other page — the pages themselves hold no dark palette and there is no second theme toggle. ══════════════════════════════════════════════════════════════════ */ /* ── vault.html (public shareable preview) ──────────────────────── */ html[data-theme="dark"] { /* Surfaces / text */ --vbg: #0c0a0e; --vbg-2: var(--am-bg-1); --vcard: rgba(22, 20, 28, 0.82); --vcard-solid: #14121a; --vborder: rgba(255, 255, 255, 0.08); --vborder-strong: rgba(255, 255, 255, 0.16); --vtext: var(--am-text-1); --vtext-dim: var(--am-text-2); --vtext-muted: var(--am-text-muted); /* Ambient glow reads stronger on a near-black canvas */ --vglow-1: rgba(224, 122, 98, 0.10); --vglow-2: rgba(200, 135, 61, 0.07); /* Sticky anchor-tab bar */ --vnav-bg: rgba(12, 10, 14, 0.88); /* Hero scrim darkens further so the artwork blends into the page */ --vhero-scrim-mid: rgba(12, 10, 14, 0.62); --vhero-scrim-top: rgba(12, 10, 14, 0.38); --vshadow-card: 0 14px 44px rgba(0, 0, 0, 0.55); --vshadow-hero: 0 12px 40px rgba(0, 0, 0, 0.60); /* vault-dashboard surfaces */ --v-surface: rgba(26, 23, 32, 0.85); --v-surface-soft: rgba(22, 20, 28, 0.62); --v-modal-bg: #16141c; --v-modal-scrim: rgba(6, 5, 8, 0.88); --v-input-bg: rgba(255, 255, 255, 0.05); } /* Item / info cards pick up the same frosted-glass treatment as the site's other card surfaces (.listing-card, .vault-card, etc.). */ html[data-theme="dark"] .info-tile, html[data-theme="dark"] .item-card, html[data-theme="dark"] .vault-unavailable-card, html[data-theme="dark"] .vault-login-card { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* The accent tile keeps its warm wash on top of the glass. */ html[data-theme="dark"] .info-tile.tile-accent { background: linear-gradient(160deg, rgba(224,122,98,0.16), rgba(21,19,27,0.86)) !important; border-color: rgba(224, 122, 98, 0.30); } html[data-theme="dark"] .item-card:hover { border-color: rgba(224, 122, 98, 0.22); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(224, 122, 98, 0.07); } html[data-theme="dark"] .item-card img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); } html[data-theme="dark"] .vault-section-head .vsec-count, html[data-theme="dark"] .empty-msg { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); } /* Anchor tabs */ html[data-theme="dark"] .vnav-tab { color: var(--am-text-3); } html[data-theme="dark"] .vnav-tab:hover { color: var(--am-text-1); } html[data-theme="dark"] .vnav-tab.active { color: var(--am-accent); border-bottom-color: var(--am-accent); } html[data-theme="dark"] .vnav-tab .vnav-count { color: var(--am-text-4); } /* Tier accents: the light theme uses darkened values for contrast on beige; dark mode restores the brighter, saturated originals. */ html[data-theme="dark"] .tier-premium { --tier-color: #E8709F; } html[data-theme="dark"] .tier-exclusive { --tier-color: #F59E5B; } html[data-theme="dark"] .tier-ultra { --tier-color: #F5D463; } html[data-theme="dark"] .tier-battlepass{ --tier-color: #A2856C; } html[data-theme="dark"] .tier-agent { --tier-color: #6FC0E0; } html[data-theme="dark"] .tier-buddy { --tier-color: var(--am-accent-light); } /* "Needs country" indicator (mirrors admin.html .badge-pending) */ html[data-theme="dark"] .vault-needs-country { background: rgba(255, 193, 7, 0.16); color: #FFD98A; border-color: rgba(255, 193, 7, 0.34); } /* Unavailable / login-gate icon wells */ html[data-theme="dark"] .vault-unavailable-icon, html[data-theme="dark"] .vault-login-icon { background: rgba(224, 122, 98, 0.12); border-color: rgba(224, 122, 98, 0.30); } html[data-theme="dark"] .vault-unavailable-actions .vu-ghost, html[data-theme="dark"] .vault-login-actions .vg-ghost { color: var(--am-text-2); border-color: rgba(255, 255, 255, 0.16); } html[data-theme="dark"] .vault-unavailable-actions .vu-ghost:hover, html[data-theme="dark"] .vault-login-actions .vg-ghost:hover { color: var(--am-accent-light); border-color: var(--am-accent-light); } /* ── vault-dashboard.html (owner management view) ───────────────── */ /* NOTE: .vault-card itself already receives the shared dark glass surface from the LIQUID GLASS block near the top of this file. The rules below cover the parts of the card it does not reach. */ html[data-theme="dark"] .vault-card-actions { background: rgba(21, 19, 27, 0.88); border-top-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .btn-delete { background: rgba(255, 255, 255, 0.05); color: var(--am-text-2); border-color: rgba(255, 255, 255, 0.10) !important; } html[data-theme="dark"] .btn-delete:hover { background: rgba(224, 122, 98, 0.14); color: var(--am-accent-light); border-color: rgba(224, 122, 98, 0.34) !important; } html[data-theme="dark"] .vault-card-empty { border-color: rgba(224, 122, 98, 0.28); background: rgba(224, 122, 98, 0.05); } html[data-theme="dark"] .vault-card-empty:hover { border-color: var(--am-accent-light); background: rgba(224, 122, 98, 0.11); } html[data-theme="dark"] .vault-card-empty .plus-icon { background: rgba(224, 122, 98, 0.16); color: var(--am-accent-light); } html[data-theme="dark"] .vault-card-empty:hover .plus-icon { background: var(--am-accent); color: #0c0a0e; } html[data-theme="dark"] .vault-card-empty span { color: var(--am-accent-light); } html[data-theme="dark"] .vault-header-meta { border-bottom-color: rgba(255, 255, 255, 0.08); } /* Sync modal — theme-aware (previously hardcoded dark on both themes) */ html[data-theme="dark"] .sync-modal { border-color: rgba(224, 122, 98, 0.28); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.70), 0 0 60px rgba(224, 122, 98, 0.06); } html[data-theme="dark"] .sync-steps { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .sync-close { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.10); color: var(--am-text-2); } html[data-theme="dark"] .sync-input { border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .sync-input:focus { border-color: var(--am-accent); box-shadow: 0 0 20px rgba(224, 122, 98, 0.16); } html[data-theme="dark"] .sync-step-text a.riot-link { border-color: #ff4655; color: #ff4655; } html[data-theme="dark"] .sync-step-text a.riot-link:hover { background: rgba(255, 70, 85, 0.12); } /* ══════════════════════════════════════════════════════════════════ VAULT TABBED DETAIL VIEW — DARK OVERRIDES ══════════════════════════════════════════════════════════════════ Companion to /static/vault-tabs.css, which holds the LIGHT baseline and no dark values at all. Everything structural (.vpanel, .vinfo-*, .vrank-*, .vpen-*, .vmatch-*, .vprog-*, .vlink-*) is already driven by the --v* tokens redefined above, so only three things need explicit dark treatment here: 1. panel/tile surfaces that want the frosted-glass card look 2. semantic colours whose LIGHT values were darkened for legibility on beige and would now be too dark on near-black 3. the amber/green/red tint washes, which need lower alpha and lighter foregrounds in dark mode ══════════════════════════════════════════════════════════════════ */ /* 1. Panel + tile surfaces — same glass as .info-tile / .item-card. */ html[data-theme="dark"] .vpanel, html[data-theme="dark"] .vsum-tile, html[data-theme="dark"] .vstate { background: linear-gradient(180deg, rgba(33,29,42,0.78) 0%, rgba(21,19,27,0.82) 100%); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .vstate-inline { background: transparent; box-shadow: none; } /* Inset rows sit INSIDE a glass panel, so they use a flat translucent fill rather than a second layer of blur (which muddies the text). */ html[data-theme="dark"] .vrank-cur-tile, html[data-theme="dark"] .vpen-item, html[data-theme="dark"] .vprog-row, html[data-theme="dark"] .vmatch-row, html[data-theme="dark"] .vlink-card, html[data-theme="dark"] .vpen-clean, html[data-theme="dark"] .vpen-flag { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.09); } html[data-theme="dark"] .vprog-icon, html[data-theme="dark"] .vmatch-agent { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .vrank-scroll { border-color: rgba(255, 255, 255, 0.09); } html[data-theme="dark"] .vrank-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); } html[data-theme="dark"] .vstate-icon { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .vpanel-count, html[data-theme="dark"] .vhint, html[data-theme="dark"] .vpen-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); color: var(--am-text-4); } /* 2. Semantic accents lightened for a near-black canvas. */ html[data-theme="dark"] .vbadge-yes { color: #6EE7A0; background: rgba(46,160,87,0.16); border-color: rgba(110,231,160,0.32); } html[data-theme="dark"] .vbadge-no { color: #FF8F8F; background: rgba(200,60,60,0.16); border-color: rgba(255,143,143,0.30); } html[data-theme="dark"] .vbadge-lock { color: var(--am-accent-light); background: rgba(224,122,98,0.14); border-color: rgba(224,122,98,0.34); } html[data-theme="dark"] .vstate-lock .vstate-icon { background: rgba(224,122,98,0.14); border-color: rgba(224,122,98,0.32); } html[data-theme="dark"] .vstate-lock .vstate-icon svg { stroke: var(--am-accent-light); } html[data-theme="dark"] .vpen-clean { border-color: rgba(110,231,160,0.26); background: rgba(46,160,87,0.09); } html[data-theme="dark"] .vpen-clean-icon { background: rgba(46,160,87,0.20); color: #6EE7A0; } html[data-theme="dark"] .vpen-flag { border-color: rgba(245,212,99,0.30); background: rgba(255,193,7,0.08); } html[data-theme="dark"] .vpen-flag-icon { background: rgba(255,193,7,0.20); color: #F5D463; } html[data-theme="dark"] .vstate-missing { border-color: rgba(245,212,99,0.30); } html[data-theme="dark"] .vstate-missing .vstate-icon { background: rgba(255,193,7,0.10); border-color: rgba(245,212,99,0.28); } html[data-theme="dark"] .vstate-missing .vstate-icon svg { stroke: #F5D463; } html[data-theme="dark"] .vpen-notice { border-color: rgba(245,212,99,0.28); background: rgba(255,193,7,0.07); } html[data-theme="dark"] .vpen-chip-warn { background: rgba(255,193,7,0.16); border-color: rgba(245,212,99,0.34); color: #F5D463; } html[data-theme="dark"] .vmatch-warn { color: #F5D463; } /* Penalty severity rail + match result rail. */ html[data-theme="dark"] .vpen-item.sev-critical { --pen-color: #FF7A6B; } html[data-theme="dark"] .vpen-item.sev-high { --pen-color: #F59E5B; } html[data-theme="dark"] .vpen-item.sev-medium { --pen-color: #F5D463; } html[data-theme="dark"] .vpen-item.sev-low { --pen-color: #9AA7B4; } html[data-theme="dark"] .vpen-item.sev-unknown { --pen-color: #B9A692; } html[data-theme="dark"] .vmatch-row.res-win { --res-color: #6EE7A0; } html[data-theme="dark"] .vmatch-row.res-loss { --res-color: #FF7A6B; } html[data-theme="dark"] .vmatch-row.res-draw { --res-color: #F5D463; } /* Map art washes out on a light canvas but glares on a dark one. */ html[data-theme="dark"] .vmatch-map { opacity: .16; } html[data-theme="dark"] .vprice-pct { background: rgba(46,160,87,0.16); border-color: rgba(110,231,160,0.30); color: #6EE7A0; } /* Acquisitions ledger provenance tags. Same reason as .vprice-pct above: the light-mode greens/browns are picked for a beige card and go muddy on the dark canvas, so both get a lifted variant. */ html[data-theme="dark"] .vacq-store { background: rgba(46,160,87,0.16); border-color: rgba(110,231,160,0.30); color: #6EE7A0; } html[data-theme="dark"] .vacq-battlepass { background: rgba(197,168,140,0.14); border-color: rgba(197,168,140,0.30); color: #C5A88C; } html[data-theme="dark"] .vlink-badge { background: rgba(224,122,98,0.14); border-color: rgba(224,122,98,0.30); color: var(--am-accent-light); } html[data-theme="dark"] .vtab-spinner { border-color: rgba(255,255,255,0.10); border-top-color: var(--am-accent); } html[data-theme="dark"] .vprog-bar { background: rgba(255, 255, 255, 0.09); } html[data-theme="dark"] .vscope-note { background: rgba(224, 122, 98, 0.10); border-color: rgba(224, 122, 98, 0.26); } html[data-theme="dark"] .vscope-note svg { stroke: var(--am-accent-light); } /* ====================================================================== PROFILE HUB CARDS — dark mode (audit item 6 follow-up) ====================================================================== Surfaced by the item-6 screenshots once the capture gate was fixed: profile-orders-*-dark.png and profile-messages-*-dark.png showed the two Orders/Messages cards rendering a LIGHT beige panel in dark mode, with light text on top — milky and low-contrast. Cause: style.css:2363 hardcodes `.hub-card { background: rgba(250,247,244,0.7) }` and `border: 1px solid rgba(0,0,0,0.06)` with NO dark counterpart anywhere. Verified pre-existing, not a regression from this audit: `git show b38f095:public/static/dark-mode.css | grep -c hub-` -> 0. Measured before this fix (390x844, dark): bg = rgba(250, 247, 244, 0.7) fg = rgb(244, 240, 248) Same treatment as the other item-3/item-4 fixes: shared --am-* tokens rather than fresh hex values, so the cards track the palette from now on. `.hub-card` is used only by profile.html, so the blast radius is that page. Not !important — dark-mode.css loads after style.css and the selector is more specific, so it wins on the cascade without escalating. */ html[data-theme="dark"] .hub-card { background: var(--am-bg-card, rgba(22, 20, 28, 0.85)); border-color: var(--am-border, rgba(255, 255, 255, 0.08)); } /* Hover lift used a black shadow + light-green glow tuned for the beige canvas; both read as grime on a dark panel. */ html[data-theme="dark"] .hub-card:hover { border-color: var(--am-border-hover, rgba(255, 255, 255, 0.16)); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(224, 122, 98, 0.10); } /* Row separators were rgba(0,0,0,0.03) — invisible against a dark card. */ html[data-theme="dark"] .hub-stat-row { border-bottom-color: rgba(255, 255, 255, 0.07); } html[data-theme="dark"] .hub-stat-row:last-of-type { border-bottom: none; }