/* Shared theme tokens. Loaded after component styles. */
:root {
    color-scheme: dark;
    --primary-color: #7150a7;
    --accent-color: #d1b5f1;
    --focus-color: #ac8add;
    --bg-dark: #20203c;
    --bg-darker: rgba(18, 21, 46, .66);
    --text-main: #f0edf8;
    --text-muted: #b5acc8;
    --theme-background: var(--background-luna);
    --page-color: #12152e;
    --panel: rgba(21, 23, 48, .89);
    --panel-solid: #1e203d;
    --panel-raised: #2d2b4d;
    --chat-surface: rgba(15, 19, 43, .74);
    --nickname-shadow: none;
    --bar-surface: rgba(33, 30, 65, .70);
    --field: rgba(10, 12, 32, .52);
    --hover-surface: rgba(177, 143, 222, .16);
    --border-color: rgba(177, 156, 218, .38);
    --soft-border: rgba(177, 156, 218, .20);
    --theme-shadow: 0 12px 36px rgba(4, 5, 20, .30);
    --code-color: #f3afd2;
    --danger-text: #ffb4b4;
    --warning-text: #f1d58c;
    --mention-surface: rgba(209, 181, 241, .12);
    --mention-hover: rgba(209, 181, 241, .18);
    --mention-border: #ad8dcc;
    --reply-surface: rgba(149, 163, 216, .09);
    --reply-hover: rgba(149, 163, 216, .15);
    --reply-border: #7e8eb6;
    --message-flash: rgba(177, 143, 222, .28);
}
:root[data-theme="celestia"] {
    color-scheme: light;
    --primary-color: #795098;
    --accent-color: #673586;
    --focus-color: #9166b1;
    --bg-dark: #fff9f6;
    --bg-darker: rgba(250, 240, 250, .64);
    --text-main: #35233f;
    --text-muted: #715c7d;
    --theme-background: var(--background-celestia);
    --page-color: #f6eef8;
    --panel: rgba(255, 250, 246, .92);
    --panel-solid: #fffaf6;
    --panel-raised: #f2e8f3;
    --chat-surface: rgba(255, 249, 245, .81);
    --nickname-shadow: 0 1px 1px rgba(38, 20, 52, .48), 0 0 3px rgba(38, 20, 52, .18);
    --bar-surface: rgba(240, 225, 244, .73);
    --field: rgba(255, 255, 255, .76);
    --hover-surface: rgba(122, 77, 154, .12);
    --border-color: rgba(120, 77, 143, .38);
    --soft-border: rgba(120, 77, 143, .20);
    --theme-shadow: 0 12px 36px rgba(65, 37, 77, .16);
    --code-color: #9d2455;
    --danger-text: #ae2341;
    --warning-text: #805600;
    --mention-surface: rgba(121, 80, 152, .08);
    --mention-hover: rgba(121, 80, 152, .13);
    --mention-border: #a183b4;
    --reply-surface: rgba(126, 108, 154, .05);
    --reply-hover: rgba(126, 108, 154, .10);
    --reply-border: #b2a3c0;
    --message-flash: rgba(145, 102, 177, .20);
}
html, body {
    background-color: var(--page-color);
    background-image: var(--theme-background);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-main);
}
/* Paint the scene once, including in the standalone chat window. */
body { background-image: none; background-color: transparent; }
a { color: var(--accent-color); }
button, input, textarea, select { accent-color: var(--primary-color); }
:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }
.site-logo { display: block; line-height: 0; }
.site-logo .logo { width: 100%; height: auto; object-fit: contain; display: block; }
.site-logo .theme-logo-celestia { display: none; }
[data-theme="celestia"] .site-logo .theme-logo-luna { display: none; }
[data-theme="celestia"] .site-logo .theme-logo-celestia { display: block; }
.video-container .header > a { width: clamp(180px, 28vw, 430px); }
.main-header .logo-area { width: clamp(180px, 24vw, 330px); }
.main-header .site-logo .logo { max-height: none; height: auto; }
.theme-switch {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: 10px;
    background: var(--bar-surface); color: var(--text-main); border: 1px solid var(--border-color);
    cursor: pointer; font: inherit; font-size: 19px; line-height: 1;
}
.theme-switch:hover { background: var(--panel-raised); }
.theme-switch { list-style: none; }
.theme-switch::-webkit-details-marker { display: none; }
.theme-picker { position: relative; flex: 0 0 auto; z-index: 1000; }
.theme-choices { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; background: var(--panel-solid); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--theme-shadow); }
.theme-choices button, .chat-theme-choices button { display: block; width: 100%; text-align: left; color: var(--text-main); background: transparent; border: 0; border-radius: 6px; padding: 10px; font: inherit; cursor: pointer; }
.theme-choices button:hover, .theme-choices button[aria-pressed="true"],
.chat-theme-choices button:hover, .chat-theme-choices button[aria-pressed="true"] { background: var(--hover-surface); color: var(--accent-color); }
.chat-theme-choices { display: none; border-top: 1px solid var(--soft-border); margin-top: 5px; padding: 6px; }
.chat-theme-label { display: block; padding: 5px 10px; font-size: 12px; color: var(--text-muted); }
.chat-dropdown-content a { color: var(--text-main) !important; }
@media (min-width: 769px) {
    .player-layout .video-container .header > .theme-picker { display: none; }
    .chat-theme-choices { display: block; }
}
.video-container .header > .theme-picker { order: 4; margin-left: auto; }
.video-container .header .site-nav-stream { min-width: 0; flex-wrap: wrap; }
.header { color: var(--text-main); }
.site-nav { padding: 6px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bar-surface); flex: 0 1 auto; }
.site-nav-link, .video-container .header .site-nav-stream .site-nav-link,
.site-menu-item { color: var(--text-main); text-shadow: none; }
.site-nav-link:hover, .site-nav-link:focus-visible, .site-nav-link.active,
.site-menu-item:hover, .site-menu-item:focus-visible, .site-menu-item.active {
    color: var(--accent-color); background: var(--hover-surface);
}
.site-burger-btn { background: var(--bar-surface); border-color: var(--border-color); }
.site-burger-btn i { background: var(--text-main); }
.site-burger-panel, .site-nav-dropdown { background: var(--panel-solid); border-color: var(--border-color); box-shadow: var(--theme-shadow); }
.main-header .user-area { background: var(--bar-surface); color: var(--text-main); border-color: var(--border-color); }
.main-header .btn-logout, .calendar-layout .main-header .btn-logout { color: var(--text-main); background: var(--field); border-color: var(--border-color); }

/* Chat: one translucent scene layer with quieter header and composer. */
.chat-container { background: var(--chat-surface); border-color: var(--border-color); box-shadow: var(--theme-shadow); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.chat-top-bar, .chat-input-area, .quote-preview-area { background: var(--bar-surface); border-color: var(--soft-border); }
.chat-text, .quote-content, .search-result-text, .modal-content, .modal-subtitle { color: var(--text-main); }
.chat-text, .quote-card, .search-result-text, #chat-input, #chat-mobile-input { font-size: 1rem; }
.chat-container :is(.username, .quote-author, .pinned-author, .search-result-author),
.reaction-tooltip-name { text-shadow: var(--nickname-shadow); }
.timestamp, .chat-welcome, .message-edited, .chat-action-btn,
.cmd-preview-desc, .cmd-preview-hint, .quote-preview-author, .reaction-tooltip-header { color: var(--text-muted); }
.chat-login-prompt a, .md-bold, .md-link, .cmd-preview-prefix, .sticker-pack-credit a { color: var(--accent-color); }
.md-code { background: var(--field); color: var(--code-color); border-color: var(--soft-border); }
.md-quote, .quote-card, .online-badge, .profile-link, .sticker-tabs { background: var(--field); border-color: var(--soft-border); }
.chat-format-btn:hover, .chat-action-btn:hover, .profile-link:hover, .icon-btn:hover,
.reaction-item:hover, .sticker-tab-btn:hover, .sticker-tab-btn.active,
.chat-context-menu li:hover, .chat-message:hover { color: var(--text-main); background: var(--hover-surface); }
.chat-message.message-mentioned { --message-rest-surface: var(--mention-surface); background-color: var(--mention-surface); }
.chat-message.message-mentioned:hover { background-color: var(--mention-hover); }
.chat-message.message-quoted { --message-rest-surface: var(--reply-surface); background-color: var(--reply-surface); }
.chat-message.message-quoted:hover { background-color: var(--reply-hover); }
.login-btn-chat { color: var(--accent-color); background: var(--hover-surface); border-color: var(--border-color); }
.chat-search-overlay, .chat-confirm-box, .chat-mobile-input-box, .sticker-picker,
.chat-context-menu, .reaction-user-tooltip, .cmd-preview, .cmd-preview-hint, #sticker-zoom-preview,
.online-tooltip { background: var(--panel-solid); color: var(--text-main); border-color: var(--border-color); box-shadow: var(--theme-shadow); }
.reaction-user-tooltip::after { border-top-color: var(--panel-solid); }
.online-tooltip::before { border-bottom-color: var(--panel-solid); }
.chat-search-header { background: var(--bar-surface); border-color: var(--soft-border); }
.search-result-highlight { color: var(--text-main); background: rgba(219, 174, 60, .28); }
.chat-pinned-banner { background: var(--bar-surface); border-color: var(--border-color); }
.command-interaction-error, .chat-context-menu li.danger { color: var(--danger-text); }
.chat-context-menu li.warning { color: var(--warning-text); }
.reaction-item { border-color: var(--soft-border); }
.reaction-item.active { color: var(--accent-color); background: var(--hover-surface); }
.cmd-preview-item.active .cmd-preview-desc, .cmd-preview-item:hover .cmd-preview-desc { color: var(--text-main); }

/* Forms, authentication, profile and administration share the same surfaces. */
.card, .login-page-card, .error-content { background: var(--panel); color: var(--text-main); border-color: var(--border-color); box-shadow: var(--theme-shadow); }
.modal-content { background: var(--panel-solid); border-color: var(--border-color); box-shadow: var(--theme-shadow); }
.form-input, input[type="text"], input[type="number"], input[type="password"], input[type="email"],
select, .select-selected, .color-manual-input,
.modal-content .color-manual-input, .modal-content .search-input,
#chat-input, #chat-mobile-input, #chat-search-input {
    color: var(--text-main); background-color: var(--field); border-color: var(--border-color);
}
.form-input:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, .select-selected:hover,
#chat-input:focus, #chat-mobile-input:focus, #chat-search-input:focus {
    color: var(--text-main); background-color: var(--field); border-color: var(--focus-color);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
select option, .select-items { color: var(--text-main); background: var(--panel-solid); }
.form-label, .modal-content .form-label, .profile-tab-content .form-label,
.modal-desc, .auth-separator, .auth-switch-link.secondary, .modal-content .manual-input-wrapper span { color: var(--text-muted); }
.profile-tab-content small { color: var(--text-muted) !important; }
.color-picker-ui, .modal-content .color-picker-ui, .search-bar, .playlist-info,
.profile-tabs, .modal-content #add-sticker-form, .modal-content #zip-upload-card { background: var(--field); border-color: var(--soft-border); }
.search-input { color: var(--text-main); }
.profile-tab-btn { color: var(--text-muted); }
.profile-tab-btn:hover { color: var(--text-main); background: var(--hover-surface); }
.profile-tab-btn.active { color: #fff; background: var(--primary-color); }
.btn-outline-primary:hover, .forgot-link:hover, .auth-switch-link:hover,
.close-modal:hover, .close-modal-profile:hover, .password-toggle-btn:hover { color: var(--accent-color); }
.dashboard-title { text-shadow: none; color: var(--accent-color); }
.dashboard-table { background: var(--field); }
.dashboard-table th, .dashboard-table td { color: var(--text-main); border-color: var(--soft-border); }
.dashboard-table th { color: var(--accent-color); background: var(--hover-surface); }
.dashboard-table tr:hover { background: var(--hover-surface); }
.nav-tile { color: var(--text-main); background: var(--bar-surface); border-color: var(--border-color); }
.nav-tile:hover, .nav-tile.active { color: var(--accent-color); background: var(--panel-raised); }
.pack-item, .btn-xs { color: var(--text-main); border-color: var(--soft-border); }
.pack-item:hover, .pack-item.active { background: var(--hover-surface); }
.db-filter-form { background: var(--field); border-color: var(--border-color); }
.table-link { color: var(--text-main); }
.table-link:hover, .table-link.active { color: var(--accent-color); background: var(--hover-surface); }
.announcement-overview a { color: var(--accent-color); }
.poll-card { background: var(--field); border-color: var(--border-color); }
.pc-modal, .poll-voters-tip { color: var(--text-main); background: var(--panel-solid); border-color: var(--border-color); }
.pc-question, .pc-opt-text, .pc-opt-img-btn, .pc-opt-remove { color: var(--text-main); background: var(--field); border-color: var(--border-color); }
.pc-add-option, .pc-close { color: var(--accent-color); }
.poll-close-btn, .poll-card-error { color: var(--danger-text); }
.appearance-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.appearance-settings-grid fieldset { min-width: 0; border: 1px solid var(--border-color); border-radius: 10px; padding: 18px; }
.appearance-settings-grid legend { color: var(--accent-color); font-weight: 600; padding: 0 8px; }
.appearance-help { color: var(--text-muted); line-height: 1.6; }
.appearance-settings-grid .form-input { background-image: none; }

/* Public catalogue and schedule components. */
.episode-catalogue { color: var(--text-main); background: var(--panel); border-color: var(--border-color); }
.episode-catalogue h1, .episode-catalogue h3, .episode-catalogue label, .episode-catalogue table { color: var(--text-main); }
.episode-catalogue a { color: var(--accent-color); }
.episode-catalogue input, .episode-catalogue select, .episode-catalogue button { color: var(--text-main); background: var(--panel-raised); border-color: var(--border-color); }
.episode-catalogue th button { background: transparent; }
.episode-catalogue-note, .episode-catalogue-observation { color: var(--text-muted); }
.episode-catalogue small { color: var(--warning-text); }
.episode-catalogue td, .episode-catalogue th { border-color: var(--soft-border); }
.episode-catalogue tr:target { background: var(--hover-surface); }
.schedule-heading { background: var(--panel); border-radius: 18px; padding: 24px; }
.schedule-heading h1, .schedule-next h2, .schedule-month-nav h2,
.schedule-date strong, .schedule-dialog h2 { color: var(--text-main); }
.schedule-intro, .schedule-status, .schedule-date, .schedule-countdown,
.schedule-event-duration, .schedule-event-desc, .schedule-playlist-note { color: var(--text-muted); }
.schedule-next { background: var(--panel); border-color: var(--border-color); box-shadow: var(--theme-shadow); }
.schedule-month, .schedule-dialog { background: var(--panel); color: var(--text-main); border-color: var(--border-color); }
.schedule-dialog { background: var(--panel-solid); }
.schedule-next-meta, .schedule-description { color: var(--text-main); }
.schedule-timezone, .schedule-icon-button, .schedule-today, .schedule-event-card,
.schedule-modal-meta { color: var(--text-main); background: var(--panel-raised); border-color: var(--border-color); }
.schedule-event-card { border-left-color: var(--event-color, var(--focus-color)); }
.schedule-event-badges span, .schedule-event-arrow, .schedule-modal-close, .schedule-status button { color: var(--accent-color); }
.schedule-day-group { border-color: var(--soft-border); }
.schedule-empty { color: var(--text-muted); border-color: var(--border-color); }

/* Legacy inline neutral text colors must follow the selected palette. */
:is(.card, .modal-content) :is(p, small, label, span, h3, h4)[style*="color: #666"],
:is(.card, .modal-content) :is(p, small, label, span)[style*="color: #777"],
:is(.card, .modal-content) :is(p, small, label, span)[style*="color: #888"] { color: var(--text-muted) !important; }

@media (max-width: 1100px) and (min-width: 769px) {
    .video-container .header { flex-wrap: wrap; align-content: center; gap: 8px; }
    .video-container .header .site-nav-stream { order: 5; flex-basis: 100%; }
    .main-header .header-content { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .video-container .header { gap: 10px; }
    .video-container .header > a { width: min(54vw, 290px); min-width: 0; flex-shrink: 1; }
    .header .site-logo .logo { height: auto; }
    .main-header .header-content { flex-direction: row; flex-wrap: wrap; padding: 0 16px; gap: 12px; }
    .main-header .logo-area { flex: 1; min-width: 0; }
    .main-header .user-area { flex-basis: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; padding: 10px; }
    .appearance-settings-grid { grid-template-columns: minmax(0, 1fr); }
}