/** * Light / dark theme — set data-theme on via theme_head.php + theme.js */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; --bg-base: #eef0f7; --bg-surface: #ffffff; --bg-surface-solid: #ffffff; --bg-elevated: #ffffff; --bg-hover: rgba(106, 88, 232, 0.06); --bg-input: #f7f7fd; --bg-muted: #eaeaf2; --border-subtle: #e2e2ee; --border-default: #cecede; --border-accent: rgba(106, 88, 232, 0.45); --accent: #6a58e8; --accent-bright: #6a58e8; --accent-dim: #4e3ec8; --accent-glow: rgba(106, 88, 232, 0.22); --text-primary: #0f0f18; --text-secondary: #3c3c52; --text-muted: #6a6a80; --shadow-sm: 0 1px 3px rgba(15, 15, 28, 0.09), 0 2px 8px rgba(15, 15, 28, 0.06); --shadow-md: 0 4px 16px rgba(15, 15, 28, 0.10), 0 8px 28px rgba(15, 15, 28, 0.07); --shadow-lg: 0 8px 32px rgba(15, 15, 28, 0.12), 0 20px 56px rgba(15, 15, 28, 0.08); --shadow-glow: 0 4px 24px rgba(106, 88, 232, 0.22); --card-img-bg: linear-gradient(165deg, #ededf5 0%, #e4e4ef 100%); } html[data-theme="light"] body::before { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 106, 255, 0.20), transparent 55%), radial-gradient(ellipse 60% 40% at 100% 0%, rgba(90, 69, 224, 0.13), transparent 50%), radial-gradient(ellipse 50% 30% at 0% 100%, rgba(255, 107, 53, 0.07), transparent 45%), var(--bg-base); } html[data-theme="light"] body::after { opacity: 0.25; } /* —— app.css surfaces —— */ html[data-theme="light"] body { background: var(--bg-base); color: var(--text-primary); } html[data-theme="light"] a { color: var(--accent-text); } html[data-theme="light"] a.btn-primary, html[data-theme="light"] a.btn-primary:hover, html[data-theme="light"] a.btn-danger, html[data-theme="light"] a.btn-danger:hover { color: var(--accent-text); } html[data-theme="light"] a.btn-outline, html[data-theme="light"] a.btn-outline:hover { color: var(--accent-text); } html[data-theme="light"] a.btn-outline:hover { color: var(--accent-text); } html[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(106, 88, 232, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 20px rgba(15, 15, 28, 0.07); } html[data-theme="light"] .logo { color: #12121a; } html[data-theme="light"] .logo:hover { color: #12121a; } html[data-theme="light"] .nav-link { color: #5c5c6e; } html[data-theme="light"] .nav-link:hover { color: #12121a; background: rgba(0, 0, 0, 0.05); } html[data-theme="light"] .nav-link.is-active { color: var(--accent); background: rgba(106, 88, 232, 0.10); box-shadow: inset 0 0 0 1px rgba(106, 88, 232, 0.22); } html[data-theme="light"] .nav-account { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); color: #1e1e28; } html[data-theme="light"] .nav-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.1); } html[data-theme="light"] .nav-toggle__bar { background: #1e1e28; } html[data-theme="light"] .nav-links--account { border-left-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .nav-actions { border-left-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .card-item, html[data-theme="light"] .game-card, html[data-theme="light"] .feature, html[data-theme="light"] .set-card, html[data-theme="light"] .form-card, html[data-theme="light"] .auth-box, html[data-theme="light"] .search-panel, html[data-theme="light"] .order-row, html[data-theme="light"] .follow-list__item, html[data-theme="light"] .summary-stat { background: #ffffff; border-color: #e4e4ec; } html[data-theme="light"] .card-item:hover, html[data-theme="light"] .set-card:hover { border-color: var(--border-accent); } html[data-theme="light"] .card-info { border-top-color: #ececf2; } html[data-theme="light"] .card-name { color: #12121a; } html[data-theme="light"] .card-set, html[data-theme="light"] .card-seller, html[data-theme="light"] .card-cond, html[data-theme="light"] .results-count, html[data-theme="light"] .browse-subtitle, html[data-theme="light"] .page-sub { color: #6b6b7d; } html[data-theme="light"] .card-img { background: linear-gradient(180deg, #f0f0f5 0%, #e8e8f0 100%); } html[data-theme="light"] .page-title, html[data-theme="light"] .section-title, html[data-theme="light"] .game-card h3, html[data-theme="light"] .feature h3, html[data-theme="light"] .game-heading, html[data-theme="light"] .card-detail-info h1, html[data-theme="light"] .profile-meta h1, html[data-theme="light"] .auth-box h1 { color: #12121a; } html[data-theme="light"] .search-input, html[data-theme="light"] .select-sm, html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group select, html[data-theme="light"] .form-group textarea, html[data-theme="light"] .input-sm { background: #ffffff; border-color: #d8d8e4; color: #12121a; } html[data-theme="light"] .form-group label, html[data-theme="light"] .form-group small { color: #6b6b7d; } html[data-theme="light"] .tab { background: #ffffff; border-color: #e4e4ec; color: #6b6b7d; } html[data-theme="light"] .page-btn { background: #ffffff; border-color: #e4e4ec; color: #5c5c6e; } html[data-theme="light"] .page-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(124, 106, 255, 0.10) 0%, transparent 58%), linear-gradient(180deg, #ffffff 0%, rgba(244, 244, 252, 0.97) 100%); border-bottom-color: rgba(106, 88, 232, 0.10); box-shadow: 0 4px 20px rgba(15, 15, 28, 0.05); backdrop-filter: none; } html[data-theme="light"] .page-hero::after { background: linear-gradient(90deg, transparent, rgba(106, 88, 232, 0.30), transparent); } html[data-theme="light"] .stats-bar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(236, 236, 248, 0.90) 100%); border-color: var(--border-default); backdrop-filter: none; } html[data-theme="light"] .section.bg-alt { background: linear-gradient(180deg, #e8e8f4 0%, #e3e3f0 100%); border-color: #d0d0e0; } html[data-theme="light"] .hero { border-bottom-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .hero h1 { color: #12121a; } html[data-theme="light"] .hero-sub, html[data-theme="light"] .game-card p, html[data-theme="light"] .feature p { color: #5c5c6e; } html[data-theme="light"] .flash-success { background: linear-gradient(90deg, #eef7ee 0%, #f4fbf4 100%); color: #2d6a30; border-bottom-color: #4caf50; } html[data-theme="light"] .flash-error { background: linear-gradient(90deg, #fceaea 0%, #fff2f2 100%); color: #9e3030; border-bottom-color: #e57373; } html[data-theme="light"] .footer { background: linear-gradient(180deg, #f2f2fa 0%, #ebebf4 100%); border-top-color: #d0d0e0; } html[data-theme="light"] .footer__brand { color: #12121a; } html[data-theme="light"] .listings-table th, html[data-theme="light"] .portfolio-table th { color: #6b6b7d; } html[data-theme="light"] .listings-table td, html[data-theme="light"] .portfolio-table td { border-bottom-color: #f0f0f5; } html[data-theme="light"] .messenger { background: #ffffff; border-color: #e4e4ec; } html[data-theme="light"] .messenger-sidebar { background: #f8f8fc; border-right-color: #e4e4ec; } html[data-theme="light"] .messenger-search input { background: #ffffff; border-color: #d8d8e4; color: #12121a; } html[data-theme="light"] .admin-body { background: #f0f0f5; } html[data-theme="light"] .admin-sidebar { background: #ffffff; border-right-color: #e4e4ec; } html[data-theme="light"] .admin-logo a { color: #12121a; } html[data-theme="light"] .admin-nav a { color: #5c5c6e; } html[data-theme="light"] .admin-nav a:hover, html[data-theme="light"] .admin-nav a.active { background: rgba(106, 88, 232, 0.1); color: #fff; } html[data-theme="light"] .admin-topbar { background: #ffffff; border-bottom-color: #e4e4ec; } html[data-theme="light"] .admin-page-title { color: #12121a; } html[data-theme="light"] .pk-rarity--overlay { background: rgba(255, 255, 255, 0.95); } html[data-theme="light"] .profile-hero__name, html[data-theme="light"] .sell-header h1, html[data-theme="light"] .card-page__title { color: var(--text-primary); } @media (max-width: 1100px) { html[data-theme="light"] .navbar.is-open .nav-panel { background: rgba(255, 255, 255, 0.98); } } /* —— Theme toggle button —— */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1)); border-radius: 10px; background: var(--bg-hover, rgba(255, 255, 255, 0.05)); color: var(--text-secondary, #a8a8b8); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; flex-shrink: 0; } .theme-toggle:hover { color: var(--text-primary, #fff); border-color: var(--border-accent, rgba(124, 106, 255, 0.35)); background: rgba(124, 106, 255, 0.1); } .theme-toggle__icon { font-size: 1rem; line-height: 1; } html[data-theme="dark"] .theme-toggle__icon--light, html[data-theme="light"] .theme-toggle__icon--dark { display: inline-block; } html[data-theme="dark"] .theme-toggle__icon--dark, html[data-theme="light"] .theme-toggle__icon--light { display: none; } @media (max-width: 1100px) { .nav-panel .theme-toggle-wrap { width: 100%; padding: 8px 0 0; border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); margin-top: 8px; } .nav-panel .theme-toggle { width: 100%; height: 44px; gap: 8px; } .nav-panel .theme-toggle::after { content: 'Appearance'; font-size: 0.875rem; font-weight: 500; margin-left: 8px; } }