:root {
    color-scheme: light;
    --site-bg: #f3f5f7;
    --site-surface: #ffffff;
    --site-surface-muted: #f8fafc;
    --site-border: #dce3eb;
    --site-text: #172b46;
    --site-text-muted: #53657c;
    --site-primary: #2563eb;
    --site-primary-soft: #eef4fb;
    --site-danger: #b42318;
    --site-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

/* Light-theme contrast normalization for older app templates. */
html[data-theme="light"] :is(.site-nav-count, .badge-top) {
    color: #fff !important;
    background: #b4232f !important;
}

html[data-theme="light"] :is(
    .site-footer,
    .site-nav-panel-empty,
    .page-note,
    .auth-subtitle,
    .auth-links,
    .profile-label,
    .profile-status-note,
    .app-meta-row,
    .meta-item,
    .meta-tag,
    .stat-label,
    .cat-desc,
    .cat-desc-empty,
    .category-link,
    .search-stats-bar,
    .chat-preview,
    .chat-main-subtitle,
    .game-panel-note,
    .game-summary-label,
    .announcement-meta,
    .field-help,
    .dashboard-subtitle,
    [class$="-help"],
    [class$="-hint"],
    [class$="-meta"]
) {
    color: var(--site-text-muted) !important;
}

html[data-theme="light"] :is(.read-more-btn, .app-btn-ghost, .sidebar-counter) {
    color: #1d4ed8 !important;
}

html[data-theme="light"] :is(.app-tag, .tag-pill, .chat-switcher-tab) {
    color: #465a73 !important;
}

html[data-theme="light"] .toolbar-info {
    color: #52647a !important;
}

html[data-theme="light"] :is(.nav-disabled, .nav-label) {
    color: #66778b !important;
}

html[data-theme="light"] .btn-action.btn-edit {
    color: #7c4a03 !important;
    background: #fff3cd !important;
}

html[data-theme="light"] .btn-action.btn-delete {
    color: #a61b16 !important;
}

html[data-theme="light"] :is(.badge-success, .status-ok) {
    color: #fff !important;
    background: #16743a !important;
}

html[data-theme="light"] .snake-guide-number {
    color: #08766d !important;
}

html[data-theme="light"] :is(.auth-card a, .profile-edit-card a) {
    color: #1d4ed8 !important;
}

html[data-theme="light"] .friends-summary span {
    color: var(--site-text-muted) !important;
}

html[data-theme="light"] :is(
    .blog-header span,
    .glass-card.about-card > p,
    .comments-section .empty-state p,
    .chat-empty-state p,
    .chat-empty-state small,
    .chat-contact-card small,
    .chat-conversation-card small,
    .chat-section-head p,
    .chat-info-panel p,
    .snake-guide-list article p,
    .admin-header p,
    .user-create-header p,
    .comment-empty p
) {
    color: var(--site-text-muted) !important;
}

html[data-theme="light"] .blog-container > .glass-card:first-child span,
html[data-theme="light"] .glass-card > div:first-child > p[style],
html[data-theme="light"] [style*="color: #7f8c8d"] {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --site-bg: #090f1c;
    --site-surface: #111827;
    --site-surface-muted: #172033;
    --site-border: #2b3950;
    --site-text: #e7eef8;
    --site-text-muted: #a9b7ca;
    --site-primary: #79adff;
    --site-primary-soft: rgba(96, 165, 250, 0.15);
    --site-danger: #fca5a5;
    --site-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    --editor-bg: #090f1c;
    --editor-surface: #111827;
    --editor-border: #334155;
    --editor-border-muted: #2b3950;
    --editor-text: #e7eef8;
    --editor-muted: #a9b7ca;
    --editor-blue: #79adff;
    --editor-blue-soft: rgba(96, 165, 250, 0.15);
    --editor-green: #22c55e;
    --editor-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

html.theme-ready,
html.theme-ready body,
html.theme-ready .site-nav,
html.theme-ready .site-main,
html.theme-ready .site-footer,
html.theme-ready .glass-card,
html.theme-ready .app-card,
html.theme-ready .auth-card {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.site-theme-toggle {
    min-width: 36px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--site-border);
    border-radius: 8px;
    background: var(--site-surface-muted);
    color: var(--site-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.site-theme-toggle:hover,
.site-theme-toggle:focus-visible {
    color: var(--site-primary);
    background: var(--site-primary-soft);
    outline: none;
}

.site-theme-toggle .theme-icon-light,
html[data-theme="dark"] .site-theme-toggle .theme-icon-dark,
.editor-theme-toggle .theme-icon-light,
html[data-theme="dark"] .editor-theme-toggle .theme-icon-dark {
    display: none;
}

html[data-theme="dark"] :is(.site-theme-toggle, .editor-theme-toggle) .theme-icon-light {
    display: inline-block;
}

@media (max-width: 768px) {
    .site-theme-toggle {
        width: 34px;
        padding: 0;
    }

    .site-theme-toggle [data-theme-label] {
        display: none;
    }
}

html[data-theme="dark"] body {
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}

html[data-theme="dark"] .site-shell,
html[data-theme="dark"] .site-main {
    background-color: transparent;
    color: var(--site-text);
}

html[data-theme="dark"] .site-nav {
    background: rgba(9, 15, 28, 0.96) !important;
    border-bottom-color: var(--site-border) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] :is(.site-brand, .site-link, .site-user-link, .site-nav-trigger) {
    color: var(--site-text) !important;
}

html[data-theme="dark"] :is(.site-link:hover, .site-user-link:hover, .site-link-active, .site-user-link-active, .site-nav-trigger:hover) {
    color: var(--site-primary) !important;
    background: var(--site-primary-soft) !important;
}

html[data-theme="dark"] :is(.site-nav-panel, .site-nav-panel-item, .site-nav-panel-empty) {
    color: var(--site-text) !important;
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] .site-nav-panel-item:hover {
    background: var(--site-primary-soft) !important;
}

html[data-theme="dark"] :is(.site-nav-panel-title, .site-nav-panel-item strong) {
    color: var(--site-text) !important;
}

html[data-theme="dark"] .site-nav-panel-link {
    color: var(--site-primary) !important;
}

html[data-theme="dark"] :is(.site-nav-panel-item span, .site-nav-panel-meta, .site-nav-panel-empty, .site-footer) {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] :is(
    .glass-card,
    .app-card,
    .auth-card,
    .page-hero,
    .panel,
    .portal-card,
    .metric-card,
    .table-card,
    .search-card,
    .profile-card,
    .profile-edit-card,
    .friends-card,
    .friend-section,
    .info-block,
    .chat-surface,
    .chat-info-panel,
    .chat-main-panel,
    .article-card,
    .category-card,
    .editor-command-bar,
    .editor-document-fields,
    .editor-workspace,
    .editor-pane,
    .editor-preview,
    .editor-statusbar
) {
    color: var(--site-text) !important;
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    box-shadow: var(--site-shadow);
}

html[data-theme="dark"] [class$="-card"],
html[data-theme="dark"] [class*="-card "],
html[data-theme="dark"] [class$="-panel"],
html[data-theme="dark"] [class*="-panel "] {
    color: var(--site-text) !important;
    background-color: var(--site-surface) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.app-card-footer, .panel-header, .user-dashboard, .notice-board, .info-item, .summary-item) {
    color: var(--site-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, legend, label, th, dt) {
    color: var(--site-text) !important;
}

html[data-theme="dark"] main :is(p, dd) {
    color: var(--site-text-muted);
}

html[data-theme="dark"] :is(
    .page-note,
    .page-kicker,
    .auth-subtitle,
    .auth-links,
    .app-meta-row,
    .app-empty,
    .empty-note,
    .sidebar-muted,
    .profile-label,
    .login-field-hint,
    .login-help,
    [class$="-subtitle"],
    [class$="-help"],
    [class$="-hint"],
    [class$="-meta"]
) {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] :is(input, textarea, select, .form-control, .site-search-field) {
    color: var(--site-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #7f8da2 !important;
    opacity: 1;
}

html[data-theme="dark"] :is(input, textarea, select, .form-control):focus {
    border-color: var(--site-primary) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16) !important;
}

html[data-theme="dark"] :is(table, thead, tbody, tr, th, td) {
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(th, thead tr) {
    background: var(--site-surface-muted) !important;
}

html[data-theme="dark"] tbody tr:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

html[data-theme="dark"] :is(hr, .divider) {
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(pre, code, blockquote) {
    color: #d8e3f2;
    background: #0b1220;
    border-color: var(--site-border);
}

html[data-theme="dark"] :is(.app-btn-secondary, .app-btn-ghost, .toolbar-btn, .editor-action, .site-search-submit) {
    color: var(--site-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.app-btn-primary, .auth-submit, .site-cta, .primary-btn, .btn-submit) {
    color: #fff !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
}

html[data-theme="dark"] :is(.secondary-btn, .app-btn-secondary, .btn-secondary) {
    color: #dbe7f5 !important;
    background: #1b2739 !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.danger-btn, .app-btn-danger, .btn-delete) {
    color: #fecaca !important;
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
}

html[data-theme="dark"] :is(.site-nav-count, .badge-top) {
    color: #fff !important;
    background: #b4232f !important;
}

html[data-theme="dark"] :is(.app-tag, .tag-pill, .chat-main-chip) {
    color: #cfe0ff !important;
    background: #1b304f !important;
    border-color: #355278 !important;
}

html[data-theme="dark"] :is(
    .profile-item,
    .friends-summary,
    .chat-empty-state,
    .announcement-item,
    .remark-field,
    .game-empty-box,
    .history-empty,
    .ultimate-empty,
    .tictactoe-empty,
    .monopoly-empty
) {
    color: var(--site-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(
    .profile-value,
    .friends-summary strong,
    .article-title-link,
    .item-title,
    .stat-num,
    .card-title,
    .result-title,
    .category-card a,
    .sidebar-member-name,
    .sidebar-member-name strong,
    .game-summary-value,
    .announcement-item strong
) {
    color: var(--site-text) !important;
}

html[data-theme="dark"] :is(
    .card-excerpt,
    .result-excerpt,
    .article-excerpt,
    .announcement-item small,
    .announcement-item time
) {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] :is(
    .glass-card li,
    .glass-card strong,
    .cat-title a,
    .card-title a,
    .result-title a,
    .chat-contact-card strong,
    .chat-conversation-card strong
) {
    color: var(--site-text) !important;
}

html[data-theme="dark"] :is(.friends-summary span, .monopoly-panel li, .monopoly-panel p) {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] :is(
    .chat-switcher-tab,
    .chat-stats div,
    .sidebar-counter,
    .history-badge,
    .status-badge,
    .role-badge
) {
    color: #dbe7f5 !important;
    background: #243249 !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] .chat-switcher {
    border: 1px solid var(--site-border);
    background: color-mix(in srgb, var(--site-surface-muted) 82%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .chat-switcher-tab {
    color: var(--site-text-muted) !important;
    background: transparent !important;
}

html[data-theme="dark"] .chat-switcher-tab:hover {
    color: var(--site-text) !important;
    background: color-mix(in srgb, var(--site-primary) 10%, transparent) !important;
}

html[data-theme="dark"] .chat-switcher-tab.is-active {
    color: #eff6ff !important;
    background: color-mix(in srgb, var(--site-primary) 72%, #17233a) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}

html[data-theme="dark"] .chat-switcher-tab.is-active > span {
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .chat-switcher {
    border: 1px solid #dbe3ee;
    background: #eef2f7;
}

html[data-theme="light"] .chat-switcher-tab.is-active {
    color: #1d4ed8 !important;
    background: #fff;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] :is(.badge-success, .status-ok) {
    color: #dcfce7 !important;
    background: #166534 !important;
}

html[data-theme="dark"] .notice-title {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .btn-action.btn-edit {
    color: #fde68a !important;
    background: #713f12 !important;
    border-color: #a16207 !important;
}

html[data-theme="dark"] :is(.role-admin, .status-off) {
    color: #fee2e2 !important;
    background: #7f1d1d !important;
}

/* Chat surfaces */
html[data-theme="dark"] :is(.chat-main-header, #chat-input-area) {
    background: rgba(17, 24, 39, 0.98) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] #chat-log {
    background: linear-gradient(180deg, #0d1524, #101a2b) !important;
}

html[data-theme="dark"] :is(.other-msg .msg-bubble, .chat-empty-placeholder .msg-bubble, .message-copy-btn, .pending-upload) {
    color: var(--site-text) !important;
    background: #1b2739 !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] .msg-info {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] .chat-file-card {
    color: var(--site-text) !important;
}

/* Blog and Markdown */
html[data-theme="dark"] :is(.article-content, .markdown-body, .article-body, .article-excerpt) {
    color: #d9e3f0 !important;
}

html[data-theme="dark"] :is(.article-content, .markdown-body, .article-body) a {
    color: #8ab8ff !important;
}

html[data-theme="dark"] :is(.article-content, .markdown-body, .article-body) img {
    opacity: 0.94;
}

html[data-theme="dark"] :is(.editor-textarea, .editor-preview-content, .editor-document-fields .form-control) {
    color: var(--editor-text) !important;
    background: var(--editor-surface) !important;
    border-color: var(--editor-border) !important;
}

html[data-theme="dark"] :is(.editor-toolbar, .editor-pane-header, .editor-preview-header) {
    color: var(--editor-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--editor-border) !important;
}

html[data-theme="dark"] :is(
    .editor-workspace-tabs,
    .editor-toolbar,
    .editor-panes,
    .editor-pane,
    .preview-pane,
    .preview-document,
    .editor-status-bar
) {
    color: var(--editor-text) !important;
    background: var(--editor-surface) !important;
    border-color: var(--editor-border) !important;
}

html[data-theme="dark"] :is(.editor-view-btn, .editor-tool-btn, .toolbar-btn) {
    color: var(--editor-muted) !important;
    background: transparent !important;
    border-color: var(--editor-border) !important;
}

html[data-theme="dark"] :is(.editor-view-btn, .editor-tool-btn, .toolbar-btn):is(:hover, :focus-visible, .is-active) {
    color: var(--editor-text) !important;
    background: var(--site-surface-muted) !important;
}

html[data-theme="dark"] :is(.article-content-input, .preview-render, .preview-title, .preview-empty) {
    color: var(--editor-text) !important;
    background: var(--editor-surface) !important;
    border-color: var(--editor-border) !important;
}

html[data-theme="dark"] .editor-drop-overlay {
    color: #a9c9ff !important;
    background: rgba(30, 64, 112, 0.94) !important;
}

html[data-theme="dark"] .category-matches {
    color: var(--editor-text) !important;
    background: var(--editor-surface) !important;
    border-color: var(--editor-border) !important;
}

/* Game workspaces */
html[data-theme="dark"] :is(
    .game-shell,
    .room-shell,
    .ultimate-shell,
    .monopoly-shell,
    .snake-shell,
    .game-layout,
    .room-layout,
    .ultimate-layout,
    .monopoly-layout
) {
    color: var(--site-text);
}

html[data-theme="dark"] :is(
    .tictactoe-rule-card,
    .board-status-card,
    .seat-card,
    .ultimate-card,
    .ultimate-room-panel,
    .ultimate-summary-card,
    .ultimate-seat-card,
    .monopoly-config-card,
    .monopoly-dashboard-card,
    .monopoly-notice-card,
    .monopoly-property-panel,
    .monopoly-property-card,
    .snake-guide-card
) {
    color: var(--site-text) !important;
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.snake-guide-list article, .snake-keyboard-hint) {
    color: var(--site-text) !important;
    background: var(--site-surface-muted) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.snake-guide-list article p, .snake-guide-head p, .monopoly-schema-card li) {
    color: var(--site-text-muted) !important;
}

html[data-theme="dark"] .snake-guide-number {
    color: #5eead4 !important;
}

html[data-theme="dark"] dialog:not(.voice-dialog) {
    color: var(--site-text);
    background: var(--site-surface);
    border-color: var(--site-border);
}

html[data-theme="dark"] :is(.navbar, .bg-dark) {
    background-color: #090f1c !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.bg-light, footer) {
    color: var(--site-text-muted) !important;
    background-color: var(--site-surface) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] :is(.dropdown-menu, .dropdown-item) {
    color: var(--site-text) !important;
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
}

html[data-theme="dark"] ::selection {
    color: #fff;
    background: #2563eb;
}