/* KayaBuy Dark Mode — controlled via data-theme="dark" on JS auto-sets based on system preference on first load, persists to localStorage. */ html[data-theme="dark"] { --c-ink: #F1F5F9; --c-ink-2: #E2E8F0; --c-ink-3: #CBD5E1; --c-muted: #94A3B8; --c-muted-2: #64748B; --c-border: #334155; --c-border-2: #475569; --c-bg: #0B1120; --c-surface: #111827; --c-surface-2: #1E293B; --c-accent: #D4A96A; --c-accent-dark: #C09050; --c-accent-soft: rgba(212,169,106,.15); --c-success: #34D399; --c-error: #F87171; --c-warning: #FBBF24; --c-primary: var(--c-ink); --c-text: var(--c-ink); color-scheme: dark; } html[data-theme="dark"] body { background: var(--c-bg); background-image: none; } html[data-theme="dark"] .site-header { background: rgba(17,24,39,.92); border-color: var(--c-border); } html[data-theme="dark"] .header-search { border-color: var(--c-border); background: var(--c-surface-2); } html[data-theme="dark"] .header-search input { background: transparent; color: var(--c-ink); } html[data-theme="dark"] .header-search input::placeholder { color: var(--c-muted); } html[data-theme="dark"] .header-search button { background: var(--c-accent); color: #0B1120; } html[data-theme="dark"] .btn { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); } html[data-theme="dark"] .btn:hover { border-color: var(--c-border-2); background: var(--c-surface); } html[data-theme="dark"] .btn-primary { background: var(--c-accent); color: #0B1120; border-color: var(--c-accent); } html[data-theme="dark"] .btn-primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #0B1120; } html[data-theme="dark"] .btn-accent { background: var(--c-accent); color: #0B1120; border-color: var(--c-accent); } html[data-theme="dark"] .btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-ink); } html[data-theme="dark"] .hero-editorial { background: linear-gradient(180deg, #0B1120 0%, var(--c-surface) 100%); border-color: var(--c-border); } html[data-theme="dark"] .hero-editorial::before { background: radial-gradient(circle, rgba(212,169,106,.08) 0%, transparent 70%); } html[data-theme="dark"] .hero-headline { color: var(--c-ink); } html[data-theme="dark"] .hero-headline span { color: var(--c-accent); } html[data-theme="dark"] .hero-lead { color: var(--c-muted); } html[data-theme="dark"] .hero-badge { background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink-3); } html[data-theme="dark"] .hero-searchbar { background: var(--c-surface); border-color: var(--c-border); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); } html[data-theme="dark"] .hsb-field { border-color: var(--c-border); } html[data-theme="dark"] .hsb-field select, html[data-theme="dark"] .hsb-field input { color: var(--c-ink); background: transparent; } html[data-theme="dark"] .hsb-field label { color: var(--c-muted-2); } html[data-theme="dark"] .hero-stats { background: rgba(17,24,39,.6); border-color: var(--c-border); } html[data-theme="dark"] .hs-item strong { color: var(--c-ink); } html[data-theme="dark"] .hs-sep { background: var(--c-border); } html[data-theme="dark"] .cat-tile, html[data-theme="dark"] .cat-card { background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink); } html[data-theme="dark"] .cat-tile:hover { border-color: var(--c-accent); box-shadow: 0 10px 40px -10px rgba(0,0,0,.6); } html[data-theme="dark"] .cat-tile-icon { background: var(--c-accent); color: #0B1120; } html[data-theme="dark"] .cat-tile-vehicle .cat-tile-icon { background: var(--c-accent-dark); } html[data-theme="dark"] .cat-tile-body h3 { color: var(--c-ink); } html[data-theme="dark"] .cat-tile-body p { color: var(--c-muted); } html[data-theme="dark"] .listing-card, html[data-theme="dark"] .card, html[data-theme="dark"] .pricing-card, html[data-theme="dark"] .blog-card, html[data-theme="dark"] .review-item, html[data-theme="dark"] .faq-item, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .auth-box { background: var(--c-surface); border-color: var(--c-border); color: var(--c-ink); } html[data-theme="dark"] .listing-placeholder { background: linear-gradient(135deg, #1E293B, #111827) !important; color: rgba(255,255,255,.3); } html[data-theme="dark"] .listing-cover { background: var(--c-surface-2); } html[data-theme="dark"] .listing-title { color: var(--c-ink); } html[data-theme="dark"] .listing-price { color: var(--c-accent); } html[data-theme="dark"] .listing-meta { color: var(--c-muted); } html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=datetime-local], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(212,169,106,.15); } html[data-theme="dark"] .data-table { background: var(--c-surface); border-color: var(--c-border); } html[data-theme="dark"] .data-table thead th { background: var(--c-surface-2); color: var(--c-muted); } html[data-theme="dark"] .data-table th, html[data-theme="dark"] .data-table td { border-color: var(--c-border); } html[data-theme="dark"] .data-table tbody tr:hover { background: var(--c-surface-2); } html[data-theme="dark"] .user-dropdown, html[data-theme="dark"] .notif-dropdown { background: var(--c-surface); border-color: var(--c-border); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); } html[data-theme="dark"] .user-dropdown a, html[data-theme="dark"] .notif-item { color: var(--c-ink-3); } html[data-theme="dark"] .user-dropdown a:hover, html[data-theme="dark"] .notif-item:hover { background: var(--c-surface-2); color: var(--c-ink); } html[data-theme="dark"] .how-it-works { background: var(--c-surface); border: 1px solid var(--c-border); } html[data-theme="dark"] .how-it-works p { color: var(--c-muted); } html[data-theme="dark"] .msg.them .msg-bubble { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); } html[data-theme="dark"] .msg.me .msg-bubble { background: var(--c-accent); color: #0B1120; } html[data-theme="dark"] .cookie-banner { background: var(--c-surface); border: 1px solid var(--c-border); } html[data-theme="dark"] .header-nav a { color: var(--c-ink-3); } html[data-theme="dark"] .header-nav a:hover { color: var(--c-ink); } html[data-theme="dark"] .lang-select { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); } html[data-theme="dark"] .site-footer { background: #060A14; border-top: 1px solid var(--c-border); } html[data-theme="dark"] img.brand-logo, html[data-theme="dark"] img.footer-logo, html[data-theme="dark"] .admin-brand img { filter: brightness(0) invert(1); } html[data-theme="dark"] .badge-featured { background: var(--c-accent); color: #0B1120; } html[data-theme="dark"] .verified-tick { color: #60A5FA; } html[data-theme="dark"] .verified-chip { background: rgba(96,165,250,.15); color: #93C5FD; } html[data-theme="dark"] .alert-error { background: rgba(248,113,113,.1); color: #FCA5A5; border-color: rgba(248,113,113,.3); } html[data-theme="dark"] .alert-success { background: rgba(52,211,153,.1); color: #6EE7B7; border-color: rgba(52,211,153,.3); } html[data-theme="dark"] .ld-cover { background-color: var(--c-surface-2); } html[data-theme="dark"] .ld-nav { background: rgba(17,24,39,.9); color: var(--c-ink); border-color: var(--c-border); } /* Theme toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--c-border); padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; line-height: 1; color: var(--c-ink-3); transition: all .15s; } .theme-toggle:hover { border-color: var(--c-accent); color: var(--c-ink); } html[data-theme="dark"] .theme-toggle { color: var(--c-ink-3); }