body { font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Chalkboard', cursive; background: #ffffff; color: #000000; margin: 0; }
a { color: #0000FF; }
a:visited { color: #800080; }
a:hover { color: #FF0000; }
hr { border: 1px inset; }


.login-container { text-align: center; padding-top: 100px; }
.login-container h1 { font-size: 36px; color: #FF00FF; }
.login-subtitle { font-size: 16px; color: #808080; }
.login-notice { display: inline-block; max-width: 420px; margin: 20px auto; padding: 8px 14px; border: 2px ridge #FFCC00; background: #FFFFE0; color: #800000; font-size: 15px; }
.login-dev-note { margin-top: 18px; font-size: 14px; color: #666666; }


.btn { padding: 8px 16px; cursor: pointer; font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Chalkboard', cursive; font-size: 16px; border: 2px outset #808080; background: #C0C0C0; color: #000000; }
.btn:hover { background: #A0A0A0; }
.btn:active { border-style: inset; }
.btn-twitch { background: #9146ff; color: #FFFFFF; border-color: #6a2bc7; font-weight: bold; font-size: 19px; }
.btn-small { padding: 2px 8px; font-size: 15px; }

.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 180px; background: #E8E8E8; border-right: 3px ridge #808080; padding: 0; overflow-y: auto; }
.sidebar-header { padding: 10px; border-bottom: 2px groove #808080; background: #000080; color: #FFFFFF; }
.sidebar-header h2 { font-size: 19px; margin: 0; }
.username { font-size: 14px; color: #FFFF00; }
.char-usage { font-size: 12px; color: #CCCCCC; margin-top: 4px; }
.char-usage-line { display: block; }
.sidebar ul { list-style: none; padding: 5px 0; margin: 0; }
.nav-link { display: block; padding: 4px 10px; color: #0000FF; font-size: 16px; text-decoration: underline; }
.nav-link:hover { background: #FFFF00; color: #FF0000; text-decoration: underline; }
.nav-divider { height: 2px; background: #808080; margin: 4px 8px; }
.control-panel { padding: 8px 10px; border-top: 2px groove #808080; border-bottom: 2px groove #808080; background: #D8D8D8; }
.control-panel-title { font-size: 15px; font-weight: bold; color: #000080; margin-bottom: 4px; }
.control-btns { display: flex; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; }
.ctrl-btn { font-size: 14px; padding: 2px 6px; }
.ctrl-on { background: #00CC00; color: #FFFFFF; border-color: #006600; }
.ctrl-off { background: #CC0000; color: #FFFFFF; border-color: #800000; }
.ctrl-input { width: 80px; font-size: 14px; padding: 2px 3px; }

.sidebar-footer { padding: 8px 10px; border-top: 2px groove #808080; font-size: 14px; }

.admin-banner { margin-left: 180px; padding: 8px 15px; background: #fffbe6; border-bottom: 1px solid #e0d890; font-size: 13px; }
.content { margin-left: 180px; padding: 15px; }
.content h1 { color: #000080; font-size: 28px; margin-bottom: 10px; }

.auth-banner { background: #FFFF99; border: 3px ridge #FFCC00; padding: 8px 12px; margin: 0 0 12px 0; }
.auth-banner-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; color: #800000; }
.auth-banner-inner strong { color: #CC0000; }
.auth-banner-inner .btn { margin-left: auto; }
@media (max-width: 768px) {
    .auth-banner-inner .btn { margin-left: 0; }
}

.card { border: 2px ridge #808080; padding: 10px; margin-bottom: 10px; background: #F0F0F0; }
.card h2 { font-size: 19px; color: #800000; margin: 0 0 8px 0; border-bottom: 1px dashed #808080; padding-bottom: 4px; }

.form-row { display: flex; justify-content: flex-start; gap: 10px; align-items: center; padding: 3px 0; }
.form-row label { font-size: 16px; }
/* A checkbox sitting directly beside its own label, as one clickable row. */
.check-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 16px; cursor: pointer; }
/* Alert panes: fixed-width label column so inputs align. */
.alert-form .form-row label { width: 120px; flex-shrink: 0; }
.alert-form .form-row input[type="text"] { flex: 1; min-width: 0; }
.alert-form p.hint { margin-left: 130px; }
/* Spam Protection page: fixed-width label column. */
.spam-form .form-row label { width: 220px; flex-shrink: 0; }
.spam-form p.hint { margin: 0 0 6px 0; }
.exemptions-details { margin-top: 8px; border-top: 1px solid #D0D0D0; padding-top: 6px; }
.exemptions-details summary { cursor: pointer; font-size: 14px; color: #555555; }
.exemptions-details .form-row { margin-top: 4px; }
.exemptions-details .hint { font-size: 13px; color: #777777; margin: 4px 0; }
/* Inline chat-log example used by the Spam Protection hints. Indented,
   monospace, subtle inset background -- reads as "this is a chat log"
   without taking the eye away from the surrounding prose. */
.hint-example { display: block; margin: 4px 0 6px 16px; padding: 4px 8px; background: #E8E8E8; border-left: 3px solid #808080; font-family: 'Courier New', monospace; font-size: 15px; color: #000000; white-space: pre-wrap; }
.inline-form { display: flex; gap: 4px; align-items: center; }
/* Voices page: jump-to-provider button row + provider section headings. */
.voice-jump { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.voice-section td { font-weight: bold; border-top: 2px solid #808080; padding-top: 8px; }
/* A voice the broadcaster has curated off -- still listed, visibly dimmed. */
.voice-row.voice-off { opacity: 0.4; }

/* Sound-effect forms: fixed-width label column. */
.sfx-form .form-row label { width: 90px; flex-shrink: 0; }
.sfx-form .form-row input[type="text"],
.sfx-form .form-row select { flex: 1; min-width: 0; }
.sfx-form .form-row.row-end { justify-content: flex-end; }
.sfx-form p.hint { margin-left: 100px; }

input[type="text"], input[type="number"], select, textarea {
    border: 2px inset #808080; padding: 3px 5px; font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Chalkboard', cursive;
    font-size: 16px; background: #FFFFFF;
}
.overlay-url { width: 100%; font-family: 'Courier New', monospace; font-size: 15px; cursor: pointer; }
.hint { font-size: 16px; color: #404040; margin-top: 3px; }

.status { font-size: 15px; font-weight: bold; padding: 1px 6px; }
.status-on { background: #00FF00; color: #006600; border: 1px solid #006600; }
.status-off { background: #FF0000; color: #FFFFFF; border: 1px solid #800000; }

.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.input-wrap { display: flex; align-items: center; gap: 6px; }
input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.settings-status { display: none; padding: 4px 8px; margin-bottom: 8px; font-size: 16px; font-weight: bold; border: 2px ridge #808080; overflow-wrap: anywhere; }
.settings-saved { background: #00FF00; color: #006600; border-color: #006600; }
.settings-error { background: #FF0000; color: #FFFFFF; border-color: #800000; }
.btn:disabled { opacity: 0.6; cursor: default; }
code { font-family: 'Courier New', monospace; font-size: 15px; background: #E0E0E0; padding: 1px 3px; border: 1px inset #C0C0C0; }

/* TTS Monster sound catalog: a wrap-around chip grid, scrolled so the long
   list does not blow out the card height. */
.monster-sound-grid { display: flex; flex-wrap: wrap; gap: 5px; max-height: 320px; overflow-y: auto; padding: 5px; border: 2px inset #808080; background: #FFFFFF; }
.monster-sound { white-space: nowrap; }

/* Censor word chips: hover reveals a delete X. The X is part of the
   chip text so the layout doesn't reflow when it appears. */
.censor-word-flow { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 2px inset #808080; background: #FFFFFF; min-height: 40px; }
.censor-word-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: #E0E0FF; border: 1px outset #808080; font-family: monospace; font-size: 15px; cursor: default; }
.censor-word-chip .chip-x { margin-left: 6px; color: transparent; cursor: pointer; font-weight: bold; }
.censor-word-chip:hover .chip-x { color: #CC0000; }
.censor-word-chip .chip-x:hover { color: #FF0000; text-decoration: underline; }
.bl-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: #FFE0E0; border: 1px outset #808080; font-size: 15px; cursor: default; gap: 4px; }
.bl-x { background: none; border: none; color: transparent; cursor: pointer; font-weight: bold; font-size: 14px; padding: 0 2px; line-height: 1; }
.bl-tag:hover .bl-x { color: #CC0000; }
.bl-x:hover { color: #FF0000; text-decoration: underline; }

.bl-emote { display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 6px; background: #F8F0F0; border: 1px outset #808080; cursor: default; }
.bl-emote-img { width: 56px; height: 56px; object-fit: contain; filter: blur(8px); cursor: pointer; transition: filter 0.15s; flex: none; }
.bl-emote-img.revealed { filter: none; }
.bl-emote-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bl-emote-name { font-size: 15px; font-weight: bold; }
.bl-emote-id { font-size: 13px; color: #606060; font-family: monospace; }
.bl-emote-rm { align-self: flex-start; }
.censor-bleep-row { display: flex; align-items: center; gap: 8px; padding: 4px; border-bottom: 1px solid #C0C0C0; }
.censor-bleep-row:last-child { border-bottom: none; }
.censor-bleep-row .bleep-name { flex: 1; font-family: monospace; }
.censor-bleep-row .bleep-tag { font-size: 12px; color: #808080; margin-right: 6px; }
.censor-subhead { margin-top: 14px; }
.censor-subhead-tight { margin-top: 10px; }

/* Per-channel disable grid for global sound effects: a 7-column table so
   the long catalog scans alphabetically column-by-column instead of a
   wrap-around flex chip cloud. */
.globals-toggle-table { table-layout: fixed; max-height: 420px; overflow-y: auto; display: block; }
.globals-toggle-table tbody { display: table; width: 100%; table-layout: fixed; }
.globals-toggle-table td { padding: 4px 6px; vertical-align: middle; }
.globals-toggle-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.globals-toggle-cell code { font-size: 15px; }
.globals-toggle-cell input[type="checkbox"] { flex: 0 0 auto; width: auto; }

.suspended-wrap { display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; }
.suspended-card { max-width: 540px; padding: 28px 32px; }
.suspended-card h1 { margin-top: 0; }
.suspended-card .suspended-lead { font-size: 19px; font-weight: bold; margin: 8px 0 16px; }
.suspended-card a { color: #0000FF; }
.suspended-card form { margin-top: 18px; }

.voice-config-row { display: none; }
.voice-config-row.shown { display: table-row; }
.voice-config-panel { background: #E8E8E8; border: 2px inset #808080; padding: 8px; }
.voice-config-panel .form-row { padding: 4px 0; }
.user-tip-toggle { cursor: pointer; color: #0000FF; text-decoration: underline; font-size: 15px; position: relative; }
input[type="range"] { width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 16px; border: 2px ridge #808080; }
th { text-align: left; padding: 4px; background: #000080; color: #FFFFFF; font-weight: bold; }
td { padding: 4px; border: 1px solid #C0C0C0; }
tr:hover td { background: #FFFF99; }
thead tr:hover th { background: #000080; }

.btn-danger { background: #CC0000; color: #FFFFFF; border-color: #800000; }
.btn-danger:hover { background: #AA0000; }

/* Audit page filter form: label/input pairs flow in a single wrappable
   row so the form stays compact on a wide dashboard and breaks cleanly
   on narrower windows. label is the grouping container so its child
   <select>/<input> sit directly under the field name. */
.audit-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 10px; padding: 6px; border: 2px inset #808080; background: #E8E8E8; }
.audit-filter label { display: flex; flex-direction: column; font-size: 15px; color: #000080; }
.audit-filter input[type="text"],
.audit-filter input[type="date"],
.audit-filter select { font-size: 16px; padding: 2px 4px; min-width: 140px; }
.audit-filter select[name="action"] { min-width: 240px; }
.audit-filter-actions { display: flex; gap: 6px; align-items: center; }

.lookup-panel { margin-top: 8px; padding: 6px; border: 2px inset #808080; background: #E8E8E8; font-size: 16px; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #F0F0F0; border: 3px ridge #808080; padding: 15px; min-width: 350px; }

/* Alerts page: voice-picker modal -- a compact extension-panel-style list. */
.vp-box { width: 480px; max-width: 92vw; }
.vp-providers { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.vp-providers .active { background: #ffff00; }
.vp-list { max-height: 320px; overflow-y: auto; border: 2px inset #808080; background: #fff; margin-top: 6px; }
.vp-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid #E0E0E0; cursor: pointer; }
.vp-row:hover { background: #ffff00; }
.vp-row .vp-name { flex: 1; }

.mobile-header { display: none; }

/* ------------------------------------------------------------------ */
/* Utility classes extracted from inline style="..." attributes so the
   CSP can keep its strict posture (templates still allow inline styles
   for a small tail of bespoke per-page layout, but the bulk is here).  */
.hidden { display: none; }
.inline-display { display: inline; }
.link-btn { background: none; border: none; color: #0000FF; text-decoration: underline; cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; }
.logout-btn { font-size: 3em; }
.no-underline { text-decoration: none; }
.muted { color: #808080; }
.muted-center { color: #808080; text-align: center; }
.muted-italic { color: #808080; font-style: italic; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.gap-4 { display: flex; gap: 4px; }
.gap-6 { display: flex; gap: 6px; }
.w-30 { width: 30px; }
.w-50 { width: 50px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w-240 { width: 240px; }
.w-250 { width: 250px; }
.w-260 { width: 260px; }
.w-300 { width: 300px; }
.w-320 { width: 320px; }
.w-350 { width: 350px; }
.pad-6 { padding: 6px; }
.pad-8 { padding: 8px; }
.center-text { text-align: center; }
.ellipsis-nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider-top { border-top: 1px dashed #808080; padding-top: 6px; margin-top: 4px; }
.divider-bottom { border-bottom: 1px dashed #808080; padding-bottom: 8px; margin-bottom: 8px; }
.row-end { justify-content: flex-end; padding-top: 8px; border-top: 1px dashed #808080; }
.inline-form-tight { display: flex; gap: 4px; align-items: center; border-top: 1px dashed #808080; padding-top: 6px; margin-top: 4px; }
.result-box { display: none; margin-top: 8px; padding: 6px; border: 2px inset #808080; background: #E8E8E8; }
.result-box.visible { display: block; }
.error-text { display: none; margin-top: 8px; color: #FF0000; font-weight: bold; font-size: 16px; }
.error-text.visible { display: block; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.modal-overlay.visible { display: block; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #F0F0F0; border: 3px ridge #808080; padding: 15px; min-width: 350px; }
.modal-title { font-size: 19px; color: #800000; margin: 0 0 10px 0; border-bottom: 1px dashed #808080; padding-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; border-top: 1px dashed #808080; padding-top: 8px; }
.subs-tip { font-size: 16px; background: #E0E0E0; color: #000; border: 1px solid #808080; }
.search-results { display: none; border: 1px solid #808080; max-height: 150px; overflow-y: auto; margin-top: 4px; width: 320px; }
.search-results.visible { display: block; }
.search-row { padding: 4px 8px; cursor: pointer; }
.search-row:hover { background: #ffff00; }
.voice-config-panel { max-width: 500px; margin-left: auto; }
.user-tip-link { cursor: pointer; color: #0000FF; text-decoration: underline; font-size: 15px; position: relative; }
.user-tip { display: none; position: absolute; top: 18px; left: 0; background: #FFFFCC; border: 2px ridge #808080; padding: 6px; white-space: nowrap; z-index: 10; color: #000; text-decoration: none; font-size: 15px; }
.user-tip.visible { display: block; }
.row-flex-wrap { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.flex-1 { flex: 1; }
.ml-8 { margin-left: 8px; }
.volume-readout { font-size: 14px; width: 25px; display: inline-block; }
.no-margin-tight { margin: 0 0 4px; }
.subs-error { display: none; margin-top: 8px; color: #FF0000; font-weight: bold; font-size: 16px; }
.subs-error.visible { display: block; }
.queue-stats-row { display: flex; gap: 20px; align-items: center; }
.stat-pill { font-size: 16px; background: #E0E0E0; color: #000; border: 1px solid #808080; }
.now-playing-box { padding: 4px; }
.nothing-playing { color: #808080; font-size: 16px; }
.activity-log { max-height: 200px; overflow-y: auto; font-size: 15px; font-family: 'Courier New', monospace; background: #FFFFFF; border: 2px inset #808080; padding: 4px; }
.gap-6-row { gap: 6px; }
.divider-above { margin-top: 8px; border-top: 1px dashed #808080; padding-top: 8px; }
.divider-below { margin-bottom: 8px; border-bottom: 1px dashed #808080; padding-bottom: 8px; }
.subs-edit-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.subs-edit-modal.visible { display: block; }
/* max-width pins the frame: without it an absolutely-positioned box with no
   width shrink-to-fits to its widest content, so a long status message would
   stretch the dialog instead of wrapping inside it. */
.subs-edit-modal-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #F0F0F0; border: 3px ridge #808080; padding: 15px; min-width: 350px; max-width: 440px; }
.subs-edit-modal-title { font-size: 19px; color: #800000; margin: 0 0 10px 0; border-bottom: 1px dashed #808080; padding-bottom: 4px; }
.subs-edit-modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; border-top: 1px dashed #808080; padding-top: 8px; }
.user-agent-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-agent-cell-narrow { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form-wrap { flex-wrap: wrap; gap: 6px; }
.mb-tight { margin-bottom: 6px; }
.voice-search-results-box { display: none; border: 1px solid #808080; max-height: 150px; overflow-y: auto; margin-top: 4px; width: 320px; }
.voice-search-results-box.visible { display: block; }

/* ------------------------------------------------------------------ */
/* Dark-mode toggle button -- floating bottom-right on every page.
   Sits above modal overlays (z=999) at z=1000, but stays small so
   it never clips content. */
.theme-toggle-btn {
    position: fixed; bottom: 12px; right: 12px; z-index: 1000;
    padding: 4px 10px; font-size: 14px;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Chalkboard', cursive;
    border: 2px outset #808080; background: #C0C0C0; color: #000000;
    cursor: pointer; opacity: 0.85;
}
.theme-toggle-btn:hover { opacity: 1; background: #A0A0A0; }
.theme-toggle-btn:active { border-style: inset; }

/* ------------------------------------------------------------------ */
/* Dark mode -- overrides every color/background the light theme sets.
   Sizes, fonts, borders, layout: UNCHANGED. Only the palette flips.
   Selector form: [data-theme="dark"] on <html> so it cascades to the
   whole tree. theme.js attaches/removes the attribute. */
[data-theme="dark"] body { background: #1a1a1a; color: #e0e0e0; }
[data-theme="dark"] a { color: #6aa9ff; }
[data-theme="dark"] a:visited { color: #c98aff; }
[data-theme="dark"] a:hover { color: #ff9b6a; }

[data-theme="dark"] .login-container h1 { color: #ff7be9; }
[data-theme="dark"] .login-subtitle { color: #a0a0a0; }
[data-theme="dark"] .login-notice { background: #3a3000; color: #ffd58c; border-color: #b89000; }
[data-theme="dark"] .login-dev-note { color: #999999; }

[data-theme="dark"] .btn { background: #3a3a3a; color: #e0e0e0; border-color: #606060; }
[data-theme="dark"] .btn:hover { background: #4a4a4a; }
[data-theme="dark"] .btn-twitch { background: #9146ff; color: #ffffff; border-color: #6a2bc7; }
[data-theme="dark"] .btn-danger { background: #802020; color: #ffd0d0; border-color: #b04040; }
[data-theme="dark"] .btn-danger:hover { background: #a02828; }

[data-theme="dark"] .sidebar { background: #222; border-right-color: #555; }
[data-theme="dark"] .sidebar-header { background: #000040; border-bottom-color: #555; }
[data-theme="dark"] .sidebar-header h2 { color: #ffffff; }
[data-theme="dark"] .username { color: #ffff7a; }
[data-theme="dark"] .char-usage { color: #999; }
[data-theme="dark"] .nav-link { color: #6aa9ff; }
[data-theme="dark"] .nav-link:hover { background: #443300; color: #ffb070; }
[data-theme="dark"] .nav-divider { background: #555; }
[data-theme="dark"] .control-panel { background: #2a2a2a; border-top-color: #555; border-bottom-color: #555; }
[data-theme="dark"] .control-panel-title { color: #aac8ff; }
[data-theme="dark"] .ctrl-on { background: #1f6f1f; color: #ffffff; border-color: #2faa2f; }
[data-theme="dark"] .ctrl-off { background: #6f1f1f; color: #ffffff; border-color: #aa2f2f; }
[data-theme="dark"] .sidebar-footer { border-top-color: #555; }

[data-theme="dark"] .content h1 { color: #aac8ff; }

[data-theme="dark"] .admin-banner { background: #2a2a1a; border-color: #555530; color: #c0c0a0; }
[data-theme="dark"] .auth-banner { background: #3a3000; color: #ffd58c; border-color: #b89000; }
[data-theme="dark"] .auth-banner-inner { color: #ffd58c; }
[data-theme="dark"] .auth-banner-inner strong { color: #ff9090; }

[data-theme="dark"] .card { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .card h2 { color: #ff9090; border-bottom-color: #555; }

[data-theme="dark"] .hint-example { background: #303030; border-left-color: #606060; color: #e0e0e0; }

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #1f1f1f; color: #e0e0e0; border-color: #555;
}
[data-theme="dark"] .hint { color: #a0a0a0; }

[data-theme="dark"] .status-on { background: #1f6f1f; color: #ffffff; border-color: #2faa2f; }
[data-theme="dark"] .status-off { background: #6f1f1f; color: #ffffff; border-color: #aa2f2f; }

[data-theme="dark"] .settings-status { border-color: #555; }
[data-theme="dark"] .settings-saved { background: #1f6f1f; color: #ffffff; border-color: #2faa2f; }
[data-theme="dark"] .settings-error { background: #6f1f1f; color: #ffffff; border-color: #aa2f2f; }

[data-theme="dark"] code { background: #303030; color: #e0e0e0; border-color: #505050; }

[data-theme="dark"] .monster-sound-grid { background: #1f1f1f; border-color: #555; }

[data-theme="dark"] .censor-word-flow { background: #1f1f1f; border-color: #555; }
[data-theme="dark"] .censor-word-chip { background: #2a2a4a; border-color: #606060; }
[data-theme="dark"] .censor-word-chip .chip-x:hover { color: #ff5050; }
[data-theme="dark"] .bl-tag { background: #4a2a2a; border-color: #606060; color: #e0e0e0; }
[data-theme="dark"] .bl-x:hover { color: #ff5050; }
[data-theme="dark"] .bl-emote { background: #3a2a2a; border-color: #606060; }
[data-theme="dark"] .bl-emote-id { color: #a0a0a0; }
[data-theme="dark"] .censor-bleep-row { border-bottom-color: #404040; }
[data-theme="dark"] .censor-bleep-row .bleep-tag { color: #a0a0a0; }

[data-theme="dark"] .suspended-card a { color: #6aa9ff; }

[data-theme="dark"] .voice-config-panel { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .user-tip-toggle,
[data-theme="dark"] .user-tip-link { color: #6aa9ff; }
[data-theme="dark"] .user-tip { background: #4a3a1a; border-color: #806030; color: #ffd58c; }

[data-theme="dark"] table { border-color: #555; }
[data-theme="dark"] th { background: #000040; color: #ffffff; }
[data-theme="dark"] td { border-color: #404040; }
[data-theme="dark"] tr:hover td { background: #443300; }
[data-theme="dark"] thead tr:hover th { background: #000040; }

[data-theme="dark"] .audit-filter { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .audit-filter label { color: #aac8ff; }

[data-theme="dark"] .lookup-panel { background: #2a2a2a; border-color: #555; }

[data-theme="dark"] .modal-box { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .modal-title { color: #ff9090; border-bottom-color: #555; }
[data-theme="dark"] .modal-actions { border-top-color: #555; }

[data-theme="dark"] .vp-providers .active { background: #806000; color: #ffffff; }
[data-theme="dark"] .vp-list { background: #1f1f1f; border-color: #555; }
[data-theme="dark"] .vp-row { border-bottom-color: #404040; }
[data-theme="dark"] .vp-row:hover { background: #443300; color: #ffb070; }

[data-theme="dark"] .mobile-header { background: #000040; border-bottom-color: #555; }
[data-theme="dark"] .menu-btn { background: #2a2a2a; color: #ffffff; border-color: #606060; }

[data-theme="dark"] .link-btn { color: #6aa9ff; }
[data-theme="dark"] .muted,
[data-theme="dark"] .muted-center,
[data-theme="dark"] .muted-italic { color: #a0a0a0; }

[data-theme="dark"] .divider-top,
[data-theme="dark"] .divider-bottom,
[data-theme="dark"] .divider-above,
[data-theme="dark"] .divider-below,
[data-theme="dark"] .inline-form-tight,
[data-theme="dark"] .row-end { border-color: #555; }

[data-theme="dark"] .result-box { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .error-text { color: #ff7070; }

[data-theme="dark"] .subs-tip { background: #303030; color: #e0e0e0; border-color: #555; }
[data-theme="dark"] .search-results { border-color: #555; background: #1f1f1f; }
[data-theme="dark"] .search-row:hover { background: #443300; color: #ffb070; }

[data-theme="dark"] .subs-edit-modal-frame { background: #2a2a2a; border-color: #555; }
[data-theme="dark"] .subs-edit-modal-title { color: #ff9090; border-bottom-color: #555; }
[data-theme="dark"] .subs-edit-modal-actions { border-top-color: #555; }

[data-theme="dark"] .activity-log { background: #1f1f1f; border-color: #555; color: #e0e0e0; }
[data-theme="dark"] .stat-pill { background: #303030; color: #e0e0e0; border-color: #555; }
[data-theme="dark"] .nothing-playing { color: #a0a0a0; }

[data-theme="dark"] .voice-search-results-box { background: #1f1f1f; border-color: #555; }

[data-theme="dark"] .theme-toggle-btn { background: #3a3a3a; color: #e0e0e0; border-color: #606060; }
[data-theme="dark"] .theme-toggle-btn:hover { background: #4a4a4a; }

@media (max-width: 700px) {
    .sidebar { transform: translateX(-100%); z-index: 900; transition: transform 0.15s; }
    .sidebar.open { transform: translateX(0); }
    .admin-banner { margin-left: 0; }
    .content { margin-left: 0; padding: 10px; }
    .content h1 { font-size: 20px; }
    .mobile-header { display: flex; align-items: center; gap: 8px; background: #000080; color: #FFFFFF; padding: 8px 10px; border-bottom: 3px ridge #808080; position: sticky; top: 0; z-index: 800; }
    .mobile-header h2 { font-size: 19px; margin: 0; }
    .menu-btn { background: none; border: 2px outset #808080; color: #FFFFFF; font-size: 18px; padding: 2px 8px; cursor: pointer; font-family: monospace; }
    .mobile-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 899; }
    .mobile-overlay.open { display: block; }
    .form-row { flex-wrap: wrap; gap: 4px; }
    .modal-box { min-width: 0; width: 90%; }
    table { font-size: 15px; }
    input[type="range"] { width: 100%; }
    .overlay-url { font-size: 10px; }
}

/* ------------------------------------------------------------------ */
/* Clips page: thumbnail grid + inline embed preview. */
.clip-console-head { display: flex; justify-content: space-between; align-items: center; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-height: 70vh; overflow-y: auto; overflow-x: hidden; padding: 6px; border: 2px inset #808080; background: #FFFFFF; }
.clip-card { border: 2px outset #C0C0C0; background: #F0F0F0; padding: 6px; cursor: pointer; min-width: 0; }
.clip-card:hover { background: #FFFFCC; }
.clip-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000000; overflow: hidden; }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-badge { position: absolute; top: 3px; left: 3px; background: #9146ff; color: #FFFFFF; font-size: 12px; padding: 1px 5px; border: 1px solid #6a2bc7; }
.clip-dur { position: absolute; bottom: 3px; right: 3px; background: rgba(0,0,0,0.75); color: #FFFFFF; font-size: 12px; padding: 1px 5px; }
.clip-title { font-size: 15px; font-weight: bold; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clip-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #606060; margin-top: 2px; }
.clip-game { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #606060; margin-top: 2px; }
.clip-boxart { width: 20px; height: 28px; object-fit: cover; border: 1px solid #808080; flex: none; }
.clip-actions { display: flex; gap: 4px; margin-top: 5px; }
.clip-fav-btn { font-size: 16px; line-height: 1; padding: 2px 6px; }
.clip-fav-on { color: #e00040; }
.clip-embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 2; }
.clip-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Clip playlist rows. */
.playlist-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #C0C0C0; }
.playlist-num { font-size: 13px; color: #808080; min-width: 24px; text-align: right; }
.playlist-thumb { width: 64px; height: 36px; object-fit: cover; border: 1px solid #808080; flex: none; }
.playlist-title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-dur { font-size: 13px; color: #606060; }

.playlist-played { opacity: 0.45; }
.playlist-check { color: #2a8f2a; }

[data-theme="dark"] .playlist-row { border-bottom-color: #555; }
[data-theme="dark"] .playlist-num { color: #a0a0a0; }
[data-theme="dark"] .playlist-dur { color: #a0a0a0; }
[data-theme="dark"] .playlist-check { color: #5cb85c; }

[data-theme="dark"] .clip-playlist-scroll { border-color: #555; }
[data-theme="dark"] .clip-grid { background: #1f1f1f; border-color: #555; }
[data-theme="dark"] .clip-card { background: #2a2a2a; border-color: #606060; }
[data-theme="dark"] .clip-card:hover { background: #3a3a2a; }
[data-theme="dark"] .clip-meta { color: #a0a0a0; }
[data-theme="dark"] .clip-game { color: #a0a0a0; }

/* Clips mobile notice: shown only on narrow screens via JS touch detection. */
.clip-mobile-notice { display: none; background: #3a3000; color: #ffd58c; border: 2px ridge #b89000; padding: 8px 12px; margin-bottom: 10px; font-size: 15px; }
[data-theme="dark"] .clip-mobile-notice { background: #3a3000; color: #ffd58c; border-color: #b89000; }

/* Clips live console: sticky header with player, volume, playlist. */
.clip-tabs { display: flex; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #808080; }
.clip-tab-btn { opacity: 0.6; }
.clip-tab-active { opacity: 1; border-style: inset; }
.clip-console-sticky { position: sticky; top: 0; z-index: 10; }
.clip-console-layout { display: flex; align-items: stretch; gap: 10px; }
.clip-console-col-player { display: flex; flex-direction: column; gap: 4px; width: 420px; flex: none; }
.clip-console-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.clip-console-player video { width: 100%; height: 100%; object-fit: contain; display: none; }
#clip-console-yt { width: 100%; height: 100%; }
#clip-console-yt iframe { width: 100%; height: 100%; }
.clip-console-empty { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #808080; font-size: 14px; }
.clip-console-ctrls { display: flex; gap: 4px; }
.clip-console-col-playlist { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clip-playlist-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.clip-playlist-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; border: 1px inset #808080; padding: 2px; min-height: 60px; }
.vol-on-stream { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 10px; }
.vol-slider { writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; width: 12px; height: 120px; }
.vol-label { font-size: 13px; font-weight: bold; letter-spacing: 1px; animation: volGlow 2.2s ease-in-out infinite; }
@keyframes volGlow {
    0%, 100% { color: #1a8a1a; text-shadow: 0 0 2px rgba(57,255,20,0.4); }
    50%      { color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,0.95), 0 0 14px rgba(57,255,20,0.6); }
}

/* Configure-placement modal: 16:9 canvas (black + neon-green border = the whole
   screen) with a draggable, aspect-locked play-area box. */
.placement-box { width: min(720px, 92vw); max-width: 720px; }
.placement-canvas { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000000; border: 3px solid #39ff14; box-shadow: 0 0 10px rgba(57,255,20,0.5); margin: 8px 0; box-sizing: border-box; }
.placement-area { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border: 2px solid #00e5ff; background: rgba(0,229,255,0.18); cursor: move; box-sizing: border-box; }
.placement-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #ffffff; font-size: 14px; text-shadow: 0 0 3px #000; pointer-events: none; white-space: nowrap; }
.placement-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #00e5ff; border: 1px solid #006b80; cursor: nwse-resize; }

.bl-modal-box { width: 520px; max-width: 95vw; }
.bl-tabs { display: flex; gap: 0; margin: 8px 0 0; border-bottom: 2px solid #808080; }
.bl-tab { border: 2px outset #808080; border-bottom: none; border-radius: 0; margin-bottom: -2px; padding: 3px 10px; font-size: 14px; position: relative; z-index: 1; background: #D8D8D8; opacity: 0.7; }
.bl-tab-active { background: #F0F0F0; opacity: 1; border-bottom: 2px solid #F0F0F0; z-index: 2; }
.bl-tab-count { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 12px; background: #800000; color: #FFFFFF; border-radius: 0; min-width: 14px; text-align: center; }
.bl-tab-body { border: 2px solid #808080; border-top: none; padding: 10px; min-height: 160px; max-height: 50vh; overflow-y: auto; background: #F0F0F0; }
.bl-heading { font-weight: bold; font-size: 15px; margin: 8px 0 4px 0; border-bottom: 1px solid #c0c0c0; padding-bottom: 2px; }
.bl-section:first-child .bl-heading { margin-top: 0; }
.bl-section .form-row { gap: 4px; margin-bottom: 6px; }
.bl-section .bl-input { flex: 1; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 20px; }
[data-theme="dark"] .bl-tab { background: #333; border-color: #606060; }
[data-theme="dark"] .bl-tab-active { background: #2a2a2a; border-bottom-color: #2a2a2a; }
[data-theme="dark"] .bl-tab-count { background: #ff9090; color: #1a1a1a; }
[data-theme="dark"] .bl-tabs { border-bottom-color: #606060; }
[data-theme="dark"] .bl-tab-body { border-color: #606060; background: #2a2a2a; }
[data-theme="dark"] .bl-heading { border-bottom-color: #555; }
.obs-save-bar { position: sticky; bottom: 0; background: #ffffff; padding: 8px 0; border-top: 2px ridge #808080; z-index: 10; }
[data-theme="dark"] .obs-save-bar { background: #1a1a1a; border-top-color: #606060; }

/* Admin tiers page: pin labels left, group controls tightly. */
.tier-form .form-row > label:first-child { width: 160px; flex-shrink: 0; }
.tier-form .form-row input[type="text"],
.tier-form .form-row input[type="number"] { width: 200px; }
.tier-form .form-row select { width: 120px; }
.tier-form #prov-table { width: auto; max-width: 420px; }
.tier-form #prov-table th,
.tier-form #prov-table td { text-align: center; }
.tier-form #prov-table th:first-child,
.tier-form #prov-table td:first-child { text-align: left; min-width: 120px; }
.tier-form .radio-group { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tier-form .radio-group > label:first-child { width: 160px; flex-shrink: 0; font-weight: 600; }
.tier-form .cap-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 24px; justify-content: start; }
.tier-form .cap-grid label { white-space: nowrap; }
.tier-form .row-end { justify-content: flex-start; }

/* Admin usage page: align label+input columns. */
.usage-form .form-row > label:first-child { width: 180px; flex-shrink: 0; }
.usage-form .form-row input[type="text"],
.usage-form .form-row input[type="number"],
.usage-form .form-row select { width: 200px; }

/* Admin store page: align label+input columns. */
.store-form .form-row > label:first-child { width: 120px; flex-shrink: 0; }
.store-form .form-row input[type="text"],
.store-form .form-row input[type="number"] { width: 200px; }

/* General settings page: align label+input columns. */
.general-form .form-row > label:first-child { width: 180px; flex-shrink: 0; }

/* Substitutions page: short labels, consistent alignment. */
.sub-form .form-row > label:first-child { width: 120px; flex-shrink: 0; }
.sub-form .form-row input[type="text"] { flex: 1; min-width: 0; }

/* Auto-messages page: longer labels. */
.automsg-form .form-row > label:first-child { width: 220px; flex-shrink: 0; }
.automsg-form .form-row input[type="text"],
.automsg-form .form-row select { width: 260px; }