/* theme tokens: redefine this block to add a new theme */
:root {
    --t-bg: #fafafa;
    --t-bg-card: #ffffff;
    --t-bg-inset: #ffffff;
    --t-bg-hover: #FFFFCC;
    --t-bg-sidebar: #eeeeee;
    --t-bg-code: #e8e8e8;
    --t-bg-selected: #E0E0FF;

    --t-text: #111111;
    --t-text-muted: #111111;
    --t-text-dim: #111111;
    --t-text-heading: #7a1a1a;

    --t-link: #0000DD;
    --t-link-visited: #660066;
    --t-link-hover: #CC0000;

    --t-border: #444444;
    --t-border-light: #888888;

    --t-btn-bg: #C0C0C0;
    --t-btn-text: #000000;
    --t-btn-border: #808080;
    --t-btn-hover: #A0A0A0;

    --t-status-on-bg: #00FF00;
    --t-status-on-text: #006600;
    --t-status-on-border: #006600;
    --t-status-off-bg: #FF0000;
    --t-status-off-text: #FFFFFF;
    --t-status-off-border: #800000;
    --t-status-suspended-bg: #FF8C00;
    --t-status-suspended-border: #CC6600;

    --t-ctrl-on-bg: #00CC00;
    --t-ctrl-on-border: #006600;
    --t-ctrl-off-bg: #CC0000;
    --t-ctrl-off-border: #800000;

    --t-saved-bg: #00FF00;
    --t-saved-text: #006600;
    --t-saved-border: #006600;
    --t-error-bg: #FF0000;
    --t-error-text: #FFFFFF;
    --t-error-border: #800000;
    --t-error-inline: #FF0000;

    --t-notice-bg: #FFFFE0;
    --t-notice-text: #800000;
    --t-notice-border: #FFCC00;

    --t-notif-bg: #FFFFF0;
    --t-notif-hover: #FFFF99;
    --t-notif-read-bg: #F0F0F0;
    --t-notif-body: inherit;

    --t-yellow: #FFFF00;

    --t-danger-btn-bg: #CC0000;
    --t-danger-btn-text: #FFFFFF;
    --t-danger-btn-border: #800000;
    --t-danger-btn-hover: #AA0000;

    --t-success: #2a2;
    --t-danger: #c33;

    --t-announce-bg: #FFFFCC;
    --t-announce-text: #333300;
    --t-announce-border: #C0C000;
    --t-announce-dismiss: #666600;
    --t-announce-dismiss-hover: #CC0000;

    --t-admin-banner-bg: #fffbe6;
    --t-admin-banner-border: #e0d890;
    --t-admin-banner-text: inherit;

    --t-auth-bg: #FFFF99;
    --t-auth-text: #800000;
    --t-auth-strong: #CC0000;
    --t-auth-border: #FFCC00;

    --t-search-dd-bg: #f0f0f0;
    --t-search-dd-border: #c0c0c0;
    --t-search-dd-divider: #d0d0d0;
    --t-search-dd-hover: #d8d8d8;

    --t-cmd-extra-bg: #E8E8E8;
    --t-cmd-extra-border: #C0C0C0;

    --t-hint-example-bg: #E8E8E8;
    --t-hint-example-border: #808080;
    --t-hint-example-text: #000000;

    --t-chip-bg: #E0E0FF;
    --t-chip-delete-hover: #FF0000;
    --t-bl-tag-bg: #FFE0E0;
    --t-bl-tag-text: inherit;
    --t-bl-emote-bg: #F8F0F0;

    --t-picker-hover: #FFFF99;
    --t-picker-border: #E0E0E0;

    --t-preset-bg: #F8F8F8;
    --t-preset-hover: #FFFFCC;
    --t-preset-voice: #333333;
    --t-preset-code-bg: #E0E0E0;

    --t-tip-bg: #FFFFCC;
    --t-tip-text: #000;
    --t-tip-border: #808080;

    --t-vp-active-bg: #ffff00;
    --t-vp-active-text: inherit;
    --t-vp-hover-bg: #ffff00;
    --t-vp-hover-text: inherit;

    --t-bl-tab-bg: #D8D8D8;
    --t-bl-tab-active-bg: #F0F0F0;
    --t-bl-tab-count-bg: #800000;
    --t-bl-tab-count-text: #FFFFFF;
    --t-bl-tab-body-bg: #F0F0F0;

    --t-platform-pill-bg: #f5f5f5;
    --t-platform-pill-text: #333;
    --t-platform-pill-border: #ccc;
    --t-platform-pill-hover: #e0e0e0;

    --t-notif-dd-bg: #F0F0F0;
    --t-notif-dd-header-bg: #E0E0E0;
    --t-notif-dd-header-border: #C0C0C0;

    --t-timeline-bg: #FFFFFF;
    --t-timeline-divider: #E0E0E0;
    --t-timeline-tier-bg: #E0E0FF; --t-timeline-tier-text: #000080; --t-timeline-tier-border: #8080CC;
    --t-timeline-event-bg: #E0FFE0; --t-timeline-event-text: #006600; --t-timeline-event-border: #80CC80;
    --t-timeline-login-bg: #FFF0D0; --t-timeline-login-text: #806000; --t-timeline-login-border: #CCB060;
    --t-timeline-patreon-bg: #FFE0E0; --t-timeline-patreon-text: #800000; --t-timeline-patreon-border: #CC8080;
    --t-timeline-stripe-bg: #E0F0FF; --t-timeline-stripe-text: #004080; --t-timeline-stripe-border: #80B0CC;

    --t-audit-hover: #FFFFC0;
    --t-audit-open-bg: #E0E0FF;
    --t-audit-detail-bg: #F4F4F4;

    --t-playlist-check: #2a8f2a;

    --t-viewer-preview-bg: #c0c0c0;

    /* platform accent: resolved from --pa-* raw values set per platform */
    --t-accent: var(--pa-accent);
    --t-accent-bg: var(--pa-accent-bg);

    /* landing page decorative - separate so a new theme can override them */
    --t-landing-title: #FF00FF;
    --t-landing-tagline: #000080;
    --t-landing-step-bg: #000080;
    --t-landing-step-border: #4040C0;
    --t-landing-tier-price: #800080;
    --t-landing-footer: inherit;
}

:root[data-theme="dark"] {
    --t-bg: #121212;
    --t-bg-card: #1e1e1e;
    --t-bg-inset: #1e1e1e;
    --t-bg-hover: #443300;
    --t-bg-sidebar: #2a2a2a;
    --t-bg-code: #2a2a2a;
    --t-bg-selected: #2a2a4a;

    --t-text: #ececec;
    --t-text-muted: #ececec;
    --t-text-dim: #cccccc;
    --t-text-heading: #f0a0a0;

    --t-link: #6aa9ff;
    --t-link-visited: #c98aff;
    --t-link-hover: #ff9b6a;

    --t-border: #aaaaaa;
    --t-border-light: #666666;

    --t-btn-bg: #3a3a3a;
    --t-btn-text: #e0e0e0;
    --t-btn-border: #606060;
    --t-btn-hover: #4a4a4a;

    --t-status-on-bg: #1f6f1f;
    --t-status-on-text: #ffffff;
    --t-status-on-border: #2faa2f;
    --t-status-off-bg: #6f1f1f;
    --t-status-off-text: #ffffff;
    --t-status-off-border: #aa2f2f;
    --t-status-suspended-bg: #8b5a00;
    --t-status-suspended-border: #cc8800;

    --t-ctrl-on-bg: #1f6f1f;
    --t-ctrl-on-border: #2faa2f;
    --t-ctrl-off-bg: #6f1f1f;
    --t-ctrl-off-border: #aa2f2f;

    --t-saved-bg: #1f6f1f;
    --t-saved-text: #ffffff;
    --t-saved-border: #2faa2f;
    --t-error-bg: #6f1f1f;
    --t-error-text: #ffffff;
    --t-error-border: #aa2f2f;
    --t-error-inline: #ff7070;

    --t-notice-bg: #3a3000;
    --t-notice-text: #ffd58c;
    --t-notice-border: #b89000;

    --t-notif-bg: #2f2f1f;
    --t-notif-hover: #443300;
    --t-notif-read-bg: #2a2a2a;
    --t-notif-body: #d4d4d4;

    --t-yellow: #ffff7a;

    --t-danger-btn-bg: #802020;
    --t-danger-btn-text: #ffd0d0;
    --t-danger-btn-border: #b04040;
    --t-danger-btn-hover: #a02828;

    --t-success: #5c5;
    --t-danger: #f55;

    --t-announce-bg: #3a3a00;
    --t-announce-text: #ffd700;
    --t-announce-border: #666600;
    --t-announce-dismiss: #cccc00;
    --t-announce-dismiss-hover: #ff5050;

    --t-admin-banner-bg: #2a2a1a;
    --t-admin-banner-border: #555530;
    --t-admin-banner-text: #c0c0a0;

    --t-auth-bg: #3a3000;
    --t-auth-text: #ffd58c;
    --t-auth-strong: #ff9090;
    --t-auth-border: #b89000;

    --t-search-dd-bg: #23272a;
    --t-search-dd-border: #444;
    --t-search-dd-divider: #333;
    --t-search-dd-hover: #3a3a3a;

    --t-cmd-extra-bg: #242424;
    --t-cmd-extra-border: #444;

    --t-hint-example-bg: #303030;
    --t-hint-example-border: #606060;
    --t-hint-example-text: #e0e0e0;

    --t-chip-bg: #2a2a4a;
    --t-chip-delete-hover: #ff5050;
    --t-bl-tag-bg: #4a2a2a;
    --t-bl-tag-text: #e0e0e0;
    --t-bl-emote-bg: #3a2a2a;

    --t-picker-hover: #3a3a1a;
    --t-picker-border: #333;

    --t-preset-bg: #2a2a2a;
    --t-preset-hover: #3a3a1a;
    --t-preset-voice: #c0c0c0;
    --t-preset-code-bg: #333;

    --t-tip-bg: #4a3a1a;
    --t-tip-text: #ffd58c;
    --t-tip-border: #806030;

    --t-vp-active-bg: #806000;
    --t-vp-active-text: #ffffff;
    --t-vp-hover-bg: #443300;
    --t-vp-hover-text: #ffb070;

    --t-bl-tab-bg: #333;
    --t-bl-tab-active-bg: #2a2a2a;
    --t-bl-tab-count-bg: #ff9090;
    --t-bl-tab-count-text: #1a1a1a;
    --t-bl-tab-body-bg: #2a2a2a;

    --t-platform-pill-bg: #2a2a2a;
    --t-platform-pill-text: #ccc;
    --t-platform-pill-border: #555;
    --t-platform-pill-hover: #3a3a3a;

    --t-notif-dd-bg: #2a2a2a;
    --t-notif-dd-header-bg: #333;
    --t-notif-dd-header-border: #555;

    --t-timeline-bg: #1f1f1f;
    --t-timeline-divider: #404040;
    --t-timeline-tier-bg: #1a1a40; --t-timeline-tier-text: #aac8ff; --t-timeline-tier-border: #404080;
    --t-timeline-event-bg: #1a401a; --t-timeline-event-text: #80ff80; --t-timeline-event-border: #408040;
    --t-timeline-login-bg: #403a1a; --t-timeline-login-text: #ffd080; --t-timeline-login-border: #806830;
    --t-timeline-patreon-bg: #401a1a; --t-timeline-patreon-text: #ff9090; --t-timeline-patreon-border: #804040;
    --t-timeline-stripe-bg: #1a2840; --t-timeline-stripe-text: #80c0ff; --t-timeline-stripe-border: #405880;

    --t-audit-hover: #443300;
    --t-audit-open-bg: #1a1a40;
    --t-audit-detail-bg: #1f1f1f;

    --t-playlist-check: #5cb85c;

    --t-viewer-preview-bg: #303030;

    --t-accent: var(--pa-accent-dk);
    --t-accent-bg: var(--pa-accent-bg-dk);

    --t-landing-title: #ff7be9;
    --t-landing-tagline: #aac8ff;
    --t-landing-step-bg: #000040;
    --t-landing-step-border: #4040a0;
    --t-landing-tier-price: #c98aff;
    --t-landing-footer: #cccccc;
}

/* platform accent raw values (--pa-*). --t-accent resolves from these. */
:root {
    --pa-accent: #6441a5; --pa-accent-bg: #6441a5;
    --pa-accent-dk: #b9a3e3; --pa-accent-bg-dk: #3a2066;
}
:root[data-platform="kick"] {
    --pa-accent: #1a6b1a; --pa-accent-bg: #1a6b1a;
    --pa-accent-dk: #53fc18; --pa-accent-bg-dk: #0a3a0a;
}
:root[data-platform="youtube"] {
    --pa-accent: #cc0000; --pa-accent-bg: #cc0000;
    --pa-accent-dk: #ff6666; --pa-accent-bg-dk: #660000;
}
:root[data-platform="rumble"] {
    --pa-accent: #4a7a1a; --pa-accent-bg: #4a7a1a;
    --pa-accent-dk: #85c742; --pa-accent-bg-dk: #263d0d;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--t-bg); color: var(--t-text); margin: 0;
}
a { color: var(--t-link); }
a:visited { color: var(--t-link-visited); }
a:hover { color: var(--t-link-hover); }
hr { border: 1px inset; }


.login-notice { display: inline-block; max-width: 420px; margin: 20px auto; padding: 8px 14px; border: 2px ridge var(--t-notice-border); background: var(--t-notice-bg); color: var(--t-notice-text); font-size: 15px; }

.landing { max-width: 900px; margin: 0 auto; padding: 0 20px 30px; }
.landing hr { margin: 30px 0; }
.landing-hero { text-align: center; padding: 60px 0 30px; }
.landing-title { font-size: 48px; color: var(--t-landing-title); margin: 0 0 8px; }
.landing-tagline { font-size: 22px; color: var(--t-landing-tagline); font-weight: bold; margin: 0 0 12px; }
.landing-subtitle { font-size: 16px; color: var(--t-text-muted); max-width: 520px; margin: 0 auto 24px; }
.landing-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-hero-btns .btn { font-size: 20px; padding: 10px 24px; }
.landing-dev-note { margin-top: 18px; font-size: 14px; color: var(--t-text-dim); }
.landing-section { text-align: center; }
.landing-section-title { font-size: 28px; color: var(--t-landing-tagline); margin: 0 0 12px; }
.landing-section-desc { font-size: 16px; max-width: 620px; margin: 0 auto 24px; color: var(--t-text-dim); }
.landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.landing-card { background: var(--t-bg-card); border: 2px ridge var(--t-border); padding: 14px; }
.landing-card h3 { color: var(--t-text-heading); margin: 0 0 6px; font-size: 17px; }
.landing-card p { margin: 0; font-size: 14px; color: var(--t-text-dim); }
.landing-platforms { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.landing-platform { text-align: center; width: 220px; background: var(--t-bg-card); border: 2px ridge var(--t-border); padding: 18px 14px; }
.landing-platform h3 { margin: 8px 0 6px; color: var(--t-text-heading); }
.landing-platform p { font-size: 14px; color: var(--t-text-dim); margin: 0; }
.landing-platform-icon { width: 48px; height: 48px; }
.landing-steps { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.landing-step { width: 220px; text-align: center; }
.landing-step-num { display: inline-block; width: 40px; height: 40px; line-height: 40px; background: var(--t-landing-step-bg); color: #FFFFFF; font-size: 22px; font-weight: bold; border: 2px outset var(--t-landing-step-border); }
.landing-step h3 { color: var(--t-landing-tagline); margin: 8px 0 4px; }
.landing-step p { font-size: 14px; color: var(--t-text-dim); margin: 0; }
.landing-cta { text-align: center; padding: 10px 0; }
.landing-footer-links { text-align: center; font-size: 14px; padding-bottom: 20px; color: var(--t-landing-footer); }
.landing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.landing-tier { background: var(--t-bg-card); border: 2px ridge var(--t-border); padding: 14px; }
.landing-tier h3 { color: var(--t-text-heading); margin: 0 0 4px; font-size: 18px; }
.landing-tier-price { display: inline-block; font-size: 14px; font-weight: bold; color: var(--t-landing-tier-price); margin-bottom: 8px; }
.landing-tier ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--t-text-dim); }
.landing-tier ul li { margin-bottom: 3px; }
.landing-tier-lead { margin: 0 0 4px; font-size: 13px; color: var(--t-text-dim); }
.btn-kick { background: #53fc18; color: #000000; border-color: #3ab810; font-weight: bold; font-size: 19px; }

@media (max-width: 900px) {
    .landing-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .landing-title { font-size: 32px; }
    .landing-tagline { font-size: 18px; }
    .landing-grid { grid-template-columns: 1fr; }
    .landing-tiers { grid-template-columns: 1fr; }
    .landing-platforms { flex-direction: column; align-items: center; }
    .landing-steps { flex-direction: column; align-items: center; }
    .landing-hero { padding-top: 30px; }
}

.streams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.streams-card { background: var(--t-bg-card); border: 2px ridge var(--t-border); padding: 16px; text-align: center; }
.streams-name { color: var(--t-text-heading); margin: 0 0 10px; font-size: 18px; }
.streams-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.streams-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 10px; border: 1px solid var(--t-border); color: var(--t-text); text-decoration: none; }
.streams-link:hover { background: var(--t-btn-hover); }
.streams-link svg { flex-shrink: 0; }
.streams-link-twitch { color: #9146ff; border-color: #9146ff; }
.streams-link-kick { color: #2d8a0e; border-color: #2d8a0e; }
[data-theme="dark"] .streams-link-kick { color: #53fc18; border-color: #53fc18; }
.streams-link-youtube { color: #ff0000; border-color: #ff0000; }
.streams-link-rumble { color: #85c742; border-color: #85c742; }
@media (max-width: 900px) { .streams-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .streams-grid { grid-template-columns: 1fr; } }

.btn { padding: 8px 16px; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; border: 2px outset var(--t-btn-border); background: var(--t-btn-bg); color: var(--t-btn-text); }
.btn:hover { background: var(--t-btn-hover); }
.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: var(--t-bg-sidebar); border-right: 3px ridge var(--t-border); padding: 0; overflow-y: auto; }
.sidebar-header { padding: 10px; border-bottom: 2px groove var(--t-border); background: var(--t-accent-bg); color: #FFFFFF; position: relative; }
.sidebar-header h2 { font-size: 19px; margin: 0; color: #ffffff; }
.username { font-size: 14px; color: var(--t-yellow); }
.char-usage { font-size: 12px; color: #CCCCCC; margin-top: 4px; }
.char-usage-line { display: block; }
/* the header's name, channel and usage all go to the General page */
.sidebar-home, .sidebar-home:visited { display: block; color: inherit; text-decoration: none; }
.sidebar-home:hover, .sidebar-home:focus-visible { text-decoration: underline; }

/* admin Patreon page: layout only, every colour is the site's own classes */
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.pt-problems ul { margin: 6px 0 0; padding-left: 18px; }
.pt-layout { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 12px; align-items: start; }
.pt-detail table { min-width: 560px; }
.pt-wide { min-width: 720px; }
/* tier family page: layout only */
.tv-section { margin-top: 18px; }
.tv-section th { text-align: left; width: 240px; vertical-align: top; }
.tv-channels { columns: 3 180px; margin: 0; padding-left: 18px; }
.tv-no-delete { align-self: center; font-weight: 600; }
.pt-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pt-detail-head h2 { margin: 0; }
.pt-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pt-link-row select { max-width: 100%; }
.pt-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 900px) {
    .pt-layout { grid-template-columns: 1fr; }
}
.sidebar ul { list-style: none; padding: 5px 0; margin: 0; }
.nav-link { display: block; padding: 4px 10px; color: var(--t-link); font-size: 16px; text-decoration: underline; }
.nav-link:hover { background: var(--t-bg-hover); color: var(--t-link-hover); text-decoration: underline; }
.nav-divider { height: 2px; background: var(--t-border); margin: 4px 8px; }
.control-panel { padding: 8px 10px; border-top: 2px groove var(--t-border); border-bottom: 2px groove var(--t-border); background: var(--t-bg-card); }
.control-panel-title { font-size: 15px; font-weight: bold; color: var(--t-accent); 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: var(--t-ctrl-on-bg); color: #FFFFFF; border-color: var(--t-ctrl-on-border); }
.ctrl-off { background: var(--t-ctrl-off-bg); color: #FFFFFF; border-color: var(--t-ctrl-off-border); }
.ctrl-input { width: 80px; font-size: 14px; padding: 2px 3px; }

.sidebar-footer { padding: 8px 10px; border-top: 2px groove var(--t-border); font-size: 14px; }

.sidebar-header-top { display: flex; align-items: center; justify-content: space-between; }
.sidebar-header-top h2 { margin: 0; font-size: 19px; }
.notif-bell { background: none; border: none; color: var(--t-text); cursor: pointer; padding: 2px; position: relative; line-height: 1; font-size: 18px; }
.notif-bell:hover { color: var(--t-yellow); }
.sidebar-header .notif-bell { color: #ffffff; }
.sidebar-header .notif-bell:hover { color: var(--t-yellow); }
.notif-badge { position: absolute; top: -6px; right: -8px; background: #FF0000; color: #FFFFFF; font-size: 10px; font-weight: bold; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 3px; pointer-events: none; }
.notif-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--t-notif-dd-bg); border: 2px ridge var(--t-border); z-index: 1000; font-size: 14px; }
.notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--t-notif-dd-header-border); background: var(--t-notif-dd-header-bg); }
.notif-dropdown-header strong { font-size: 14px; color: var(--t-accent); }
.notif-read-all { font-size: 12px; }
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-item { display: block; padding: 8px; border-bottom: 1px solid var(--t-border-light); text-decoration: none; color: var(--t-text); background: var(--t-notif-bg); }
.notif-item:hover { background: var(--t-notif-hover); }
.notif-item.notif-read { background: var(--t-notif-read-bg); opacity: 0.7; }
.notif-title { font-size: 13px; font-weight: bold; margin-bottom: 2px; }
.notif-body { font-size: 12px; margin-bottom: 2px; color: var(--t-notif-body); }
.notif-time { font-size: 11px; color: var(--t-text-muted); }
.notif-empty { padding: 16px; text-align: center; color: var(--t-text-muted); font-size: 13px; }

.admin-banner { margin-left: 180px; padding: 8px 15px; background: var(--t-admin-banner-bg); border-bottom: 1px solid var(--t-admin-banner-border); font-size: 13px; color: var(--t-admin-banner-text); }

.discord-top-banner { margin-left: 180px; padding: 6px 15px; background: #5865F2; color: #FFFFFF; display: flex; align-items: center; gap: 10px; font-size: 14px; border-bottom: 2px groove #4752C4; flex-wrap: wrap; }
.discord-top-icon { flex-shrink: 0; }
.discord-top-banner span { flex: 1; }
.btn-discord-join { background: #FFFFFF; color: #5865F2; border: 2px outset var(--t-border-light); padding: 3px 12px; font-size: 13px; font-weight: bold; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-discord-join:hover { background: var(--t-bg-sidebar); }

.announcement-bar { margin-left: 180px; padding: 4px 15px; background: var(--t-announce-bg); color: var(--t-announce-text); border-bottom: 2px groove var(--t-announce-border); font-size: 14px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.announcement-bar marquee { flex: 1; }
.announcement-bar #announcement-text a { color: inherit; text-decoration: underline; }
.announcement-dismiss { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--t-announce-dismiss); padding: 0 4px; line-height: 1; }
.announcement-dismiss:hover { color: var(--t-announce-dismiss-hover); }

.announcement-admin { margin-left: 180px; padding: 4px 15px; background: var(--t-bg-card); border-bottom: 1px solid var(--t-border-light); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.announcement-admin input[type="text"] { flex: 1; padding: 2px 6px; font-size: 13px; min-width: 0; }

.content { margin-left: 180px; padding: 15px; }
.content h1 { color: var(--t-accent); font-size: 28px; margin-bottom: 10px; }

.auth-banner { background: var(--t-auth-bg); border: 3px ridge var(--t-auth-border); 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: var(--t-auth-text); }
.auth-banner-inner strong { color: var(--t-auth-strong); }
.auth-banner-inner .btn { margin-left: auto; }
@media (max-width: 768px) {
    .auth-banner-inner .btn { margin-left: 0; }
}

.chatmode-disabled { filter: blur(3px); pointer-events: none; user-select: none; opacity: 0.4; }
.chatmode-disabled-wrap { position: relative; }
.chatmode-disabled-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--t-text); font-weight: bold; font-size: 1.1em; text-align: center; z-index: 2; pointer-events: none; }
.chatmode-warn { background: #8b2020; color: #fff; padding: 20px; text-align: center; font-weight: bold; font-size: 1.3em; margin: -2px -10px 10px -10px; }
.card { border: 2px ridge var(--t-border); padding: 10px; margin-bottom: 10px; background: var(--t-bg-card); }
.card h2 { font-size: 19px; color: var(--t-text-heading); margin: 0 0 8px 0; border-bottom: 1px dashed var(--t-border); padding-bottom: 4px; }

.cmd-extra-row td { background: var(--t-cmd-extra-bg); padding: 6px 8px; border-top: 1px solid var(--t-cmd-extra-border); }
.cmd-extra-row .form-row { padding: 3px 0; }
.cmd-extra-row .form-row label { width: 150px; flex-shrink: 0; font-weight: bold; }

.form-row { display: flex; justify-content: flex-start; gap: 10px; align-items: center; padding: 3px 0; }
.input-narrow { width: 100px; }
.input-small { width: 60px; }
.label-zero { width: 0; min-width: 0; }
.mt-8 { margin-top: 8px; }
.form-sticky { position: sticky; bottom: 0; background: var(--t-bg); padding: 12px 0; z-index: 10; }
.detail-table { margin: 8px 0; }
.detail-label { font-weight: 600; padding: 2px 12px 2px 0; white-space: nowrap; }
.detail-val { padding: 2px 0; }
.tier-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tier-btns { display: flex; gap: 4px; }
.form-row label { font-size: 16px; }
/* the voice builder's option sliders: one label column so the tracks line
   up, the value to the right of the track */
#builder-extra-options .form-row label { width: 110px; flex-shrink: 0; }
#builder-extra-options .form-row input[type="range"] { flex: 1; min-width: 0; max-width: 320px; }
#builder-extra-options .builder-extra-val { min-width: 48px; }
.check-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 16px; cursor: pointer; }
.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-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 var(--t-border-light); padding-top: 6px; }
.exemptions-details summary { cursor: pointer; font-size: 14px; color: var(--t-text-dim); }
.exemptions-details .form-row { margin-top: 4px; }
.exemptions-details .hint { font-size: 13px; color: var(--t-text-muted); margin: 4px 0; }
.spam-try-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.spam-try-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.spam-try-field-grow { flex: 1 1 260px; }
.spam-try-field-grow input { flex: 1; min-width: 0; }
.spam-try-input { display: block; width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.spam-try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spam-try-actions .hint { margin: 0; }
.spam-try .spam-try-from, .spam-try .spam-try-input, .spam-try .spam-try-actions, .spam-try .spam-try-result { margin-top: 10px; }
.spam-try-list { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.spam-try-item { overflow-wrap: anywhere; }
.spam-try-text { white-space: pre-wrap; }
.spam-try-label, .spam-try-chip { font-weight: bold; }
.spam-try-error, .spam-try-warn { margin: 0 0 6px; font-weight: bold; }
.spam-try-result .hint { margin: 10px 0 0; }
.hint-example { display: block; margin: 4px 0 6px 16px; padding: 4px 8px; background: var(--t-hint-example-bg); border-left: 3px solid var(--t-hint-example-border); font-family: 'Courier New', monospace; font-size: 15px; color: var(--t-hint-example-text); white-space: pre-wrap; }
.inline-form { display: flex; gap: 4px; align-items: center; }
.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 var(--t-border); padding-top: 8px; }
/* switched off: struck through, still full contrast */
.voice-row.voice-off td:nth-child(2), .voice-row.voice-off td:nth-child(3), .effect-row.voice-off td:first-child { text-decoration: line-through; text-decoration-thickness: 2px; }

.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 var(--t-border); padding: 3px 5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px; background: var(--t-bg-inset); color: var(--t-text);
}
.overlay-url { width: 100%; font-family: 'Courier New', monospace; font-size: 15px; cursor: pointer; box-sizing: border-box; }
.hint { font-size: 16px; color: var(--t-text-muted); margin-top: 3px; }
.obs-setup-steps { margin: 6px 0 10px; padding-left: 22px; }
.obs-setup-steps li { margin: 3px 0; }

.status { font-size: 15px; font-weight: bold; padding: 1px 6px; }
.status-on { background: var(--t-status-on-bg); color: var(--t-status-on-text); border: 1px solid var(--t-status-on-border); }
.status-off { background: var(--t-status-off-bg); color: var(--t-status-off-text); border: 1px solid var(--t-status-off-border); }
.status-suspended { background: var(--t-status-suspended-bg); color: #FFFFFF; border: 1px solid var(--t-status-suspended-border); }

.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 var(--t-border); overflow-wrap: anywhere; position: relative; }
/* a status with text in it is meant to be read. pages reveal these three
   different ways (inline display, the hidden attribute, a class), and the
   ones that only cleared [hidden] never showed anything. inline display:none
   still wins, so pages that hide that way keep working */
.settings-status:not(:empty) { display: block; }
.settings-status[hidden], .settings-status.hidden { display: none; }
.settings-saved { background: var(--t-saved-bg); color: var(--t-saved-text); border-color: var(--t-saved-border); }
.settings-error { background: var(--t-error-bg); color: var(--t-error-text); border-color: var(--t-error-border); }
.settings-status-x { background: none; border: none; color: inherit; font-size: 18px; font-weight: bold; cursor: pointer; padding: 0 6px; margin-left: 4px; line-height: 1; vertical-align: middle; float: right; }
#toast-box { position: fixed; top: 12px; right: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; max-width: 420px; pointer-events: none; }
.toast-item { pointer-events: auto; padding: 8px 32px 8px 12px; font-size: 15px; font-weight: bold; border: 2px ridge var(--t-border); overflow-wrap: anywhere; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.toast-ok { background: var(--t-saved-bg); color: var(--t-saved-text); border-color: var(--t-saved-border); }
.toast-error { background: var(--t-error-bg); color: var(--t-error-text); border-color: var(--t-error-border); }
.toast-x { position: absolute; top: 4px; right: 4px; background: none; border: none; color: inherit; font-size: 18px; font-weight: bold; cursor: pointer; padding: 0 6px; line-height: 1; }
.btn:disabled { opacity: 0.6; cursor: default; }
code { font-family: 'Courier New', monospace; font-size: 15px; background: var(--t-bg-code); color: var(--t-text); padding: 1px 3px; border: 1px inset var(--t-border-light); }

.embedded-scroll { max-height: 400px; overflow-y: auto; }
.embedded-scroll table { width: 100%; }
.embedded-scroll thead th { position: sticky; top: 0; z-index: 1; }
.th-asmr, .td-asmr { width: 90px; text-align: center; }
#embedded-search { max-width: 300px; }

.censor-word-flow { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 2px inset var(--t-border); background: var(--t-bg-inset); min-height: 40px; }
.censor-word-chip { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--t-chip-bg); border: 1px outset var(--t-border); font-family: monospace; font-size: 15px; cursor: default; }
.censor-word-chip .chip-x { margin-left: 6px; color: transparent; cursor: pointer; font: inherit; font-weight: bold; background: none; border: none; padding: 0; line-height: 1; }
.censor-word-chip .chip-x:focus-visible { color: var(--t-chip-delete-hover); }
.censor-word-chip:hover .chip-x { color: var(--t-chip-delete-hover); }
.censor-word-chip .chip-x:hover { color: var(--t-chip-delete-hover); }
/* a phone or tablet cannot hover: its remove button is always shown */
@media (hover: none) { .censor-word-chip .chip-x { color: var(--t-chip-delete-hover); } }
.bl-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--t-bl-tag-bg); border: 1px outset var(--t-btn-border); font-size: 15px; cursor: default; gap: 4px; color: var(--t-bl-tag-text); }
.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: var(--t-chip-delete-hover); }
.bl-x:hover { color: var(--t-chip-delete-hover); }

.bl-emote { display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 6px; background: var(--t-bl-emote-bg); border: 1px outset var(--t-btn-border); 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: var(--t-text-dim); 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 var(--t-border-light); }
.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: var(--t-text-muted); margin-right: 6px; }
.censor-subhead { margin-top: 14px; }
.censor-subhead-tight { margin-top: 10px; }

.globals-table td { vertical-align: middle; }
.globals-table code { font-size: 15px; }
.global-onoff { min-width: 52px; }
.global-volume-cell { white-space: nowrap; }
/* a chat command shown inline, kept on one line so it reads and copies whole */
.cmd-inline { white-space: nowrap; }
.global-volume-readout { font-size: 14px; width: 48px; display: inline-block; }

.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: var(--t-link); }
.suspended-card form { margin-top: 18px; }

.user-tip-toggle { cursor: pointer; color: var(--t-link); text-decoration: underline; font-size: 15px; position: relative; }

.voice-form-section-title { font-size: 16px; color: var(--t-accent); margin: 12px 0 2px; border-bottom: 1px dashed var(--t-border-light); padding-bottom: 2px; }
.voice-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
@media (max-width: 600px) { .voice-form-grid { grid-template-columns: 1fr; } }
.voice-form-grid .form-row label { width: 70px; flex-shrink: 0; }

.voice-picker-box { max-height: 240px; overflow-y: auto; border: 2px inset var(--t-border); background: var(--t-bg-inset); margin-bottom: 8px; }
.voice-picker-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--t-picker-border); cursor: pointer; font-size: 15px; }
.voice-picker-row:last-child { border-bottom: none; }
.voice-picker-row:hover { background: var(--t-picker-hover); }
.voice-picker-row.voice-picker-selected { background: var(--t-bg-selected); border-left: 3px solid var(--t-accent-bg); padding-left: 3px; }
.voice-picker-name { flex: 1; }

.voice-test-area { border-top: 2px groove var(--t-border); margin-top: 8px; padding-top: 8px; }
.voice-test-area textarea { width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; border: 2px inset var(--t-border); padding: 4px; resize: vertical; }

.preset-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.preset-card { border: 2px ridge var(--t-border); padding: 8px; background: var(--t-preset-bg); }
.preset-card:hover { background: var(--t-preset-hover); }
.preset-card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.preset-card-header b { font-size: 16px; }
.preset-card-voice { font-size: 15px; color: var(--t-preset-voice); margin: 2px 0; }
.preset-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.preset-card-tags code { font-size: 13px; background: var(--t-preset-code-bg); padding: 1px 5px; border: 1px inset var(--t-border-light); color: var(--t-text-dim); }
.preset-card-actions { display: flex; gap: 4px; margin-top: 4px; }
input[type="range"] { width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 16px; border: 2px ridge var(--t-border); }
th { text-align: left; padding: 4px; background: var(--t-accent-bg); color: #FFFFFF; font-weight: bold; }
td { padding: 4px; border: 1px solid var(--t-border-light); }
tr:hover td { background: var(--t-bg-hover); }
thead tr:hover th { background: var(--t-accent-bg); }

.btn-danger { background: var(--t-danger-btn-bg); color: var(--t-danger-btn-text); border-color: var(--t-danger-btn-border); }
.btn-danger:hover { background: var(--t-danger-btn-hover); }

.audit-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 10px; padding: 6px; border: 2px inset var(--t-border); background: var(--t-bg-sidebar); }
.audit-filter label { display: flex; flex-direction: column; font-size: 15px; color: var(--t-accent); }
.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; }

.audit-row { cursor: pointer; }
.audit-row:hover td { background: var(--t-audit-hover); }
.audit-row-open td { background: var(--t-audit-open-bg); }
.audit-detail td { padding: 0; }
.audit-detail-body { padding: 4px 8px 6px 24px; background: var(--t-audit-detail-bg); border-bottom: 1px solid var(--t-border-light); }
.audit-detail-fields { border-collapse: collapse; font-size: 14px; }
.audit-detail-fields td { padding: 1px 8px 1px 0; border: none; vertical-align: top; }
.audit-detail-key { font-weight: bold; color: var(--t-accent); white-space: nowrap; }
.audit-detail-val { word-break: break-word; }

.lookup-panel { margin-top: 8px; padding: 6px; border: 2px inset var(--t-border); background: var(--t-bg-card); 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: var(--t-bg-card); border: 3px ridge var(--t-border); padding: 15px; min-width: 350px; }

.vp-box { width: 480px; max-width: 92vw; }
.vp-providers { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.vp-providers .active { background: var(--t-vp-active-bg); color: var(--t-vp-active-text); }
.vp-list { max-height: 320px; overflow-y: auto; border: 2px inset var(--t-border); background: var(--t-bg-inset); margin-top: 6px; }
.vp-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--t-picker-border); cursor: pointer; }
.vp-row:hover { background: var(--t-vp-hover-bg); color: var(--t-vp-hover-text); }
.vp-row .vp-name { flex: 1; }

.mobile-header { display: none; }

.hidden { display: none !important; }
.mt24 { margin-top: 24px; }
.my8 { margin: 8px 0; }
.m0 { margin: 0; }
.flex1 { flex: 1; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.row-space-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.danger-text { color: var(--t-danger); }
.card-danger { border-color: #CC0000; }
.search-dropdown { background: var(--t-search-dd-bg); border: 1px solid var(--t-search-dd-border); border-radius: 4px; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; z-index: 10; }
#player-results { max-height: 240px; }
.search-dropdown > div { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--t-search-dd-divider); }
.search-dropdown > div:hover { background: var(--t-search-dd-hover); }
.ml-auto { margin-left: auto; }
.modal-narrow { max-width: 360px; }
.err-inline { color: var(--t-error-inline); }
.modal-mid { max-width: 420px; }
.my8-tight { margin: 8px 0 4px; }
.card-delete-zone { margin-top: 24px; border: 1px solid var(--t-danger); }
.hint-tight { margin: 4px 0 0; }
.ml4 { margin-left: 4px; }
.ml8 { margin-left: 8px; }
.bp-group { border: 1px solid var(--t-border); border-radius: 6px; margin: 10px 0; padding: 8px 12px; }
.bp-toggle { font-size: 12px; margin-left: 6px; font-weight: normal; }
.bp-perk-label { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; flex-wrap: wrap; }
.bp-perk-label input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
.bp-perk-row { padding: 5px 0; border-bottom: 1px solid rgba(128,128,128,0.15); }
.bp-perk-row:last-child { border-bottom: none; }
.bp-info { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bp-scope-select { font-size: 13px; padding: 1px 4px; }
.bp-title { font-weight: 600; white-space: nowrap; }
.bp-desc { color: var(--t-text-dim); font-size: 14px; }
.viewer-preview { margin-top: 6px; padding: 6px 8px; border: 1px inset var(--t-border); background: var(--t-viewer-preview-bg); display: flex; align-items: center; gap: 8px; }
.viewer-preview-pic { width: 32px; height: 32px; border: 1px solid var(--t-border-light); }
.inline-display { display: inline; }
.link-btn { background: none; border: none; color: var(--t-link); 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: var(--t-text-muted); }
.muted-center { color: var(--t-text-muted); text-align: center; }
.muted-italic { color: var(--t-text-muted); 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 var(--t-border); padding-top: 6px; margin-top: 4px; }
.divider-bottom { border-bottom: 1px dashed var(--t-border); padding-bottom: 8px; margin-bottom: 8px; }
.row-end { justify-content: flex-end; padding-top: 8px; border-top: 1px dashed var(--t-border); }
.inline-form-tight { display: flex; gap: 4px; align-items: center; border-top: 1px dashed var(--t-border); padding-top: 6px; margin-top: 4px; }
.result-box { display: none; margin-top: 8px; padding: 6px; border: 2px inset var(--t-border); background: var(--t-bg-card); }
.result-box.visible { display: block; }
.error-text { display: none; margin-top: 8px; color: var(--t-error-inline); 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; }
/* the voice picker opens from inside edit modals, it goes over them */
#voice-picker { z-index: 1001; }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--t-bg-card); border: 3px ridge var(--t-border); padding: 15px; min-width: 350px; }
.modal-title { font-size: 19px; color: var(--t-text-heading); margin: 0 0 10px 0; border-bottom: 1px dashed var(--t-border); padding-bottom: 4px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; border-top: 1px dashed var(--t-border); padding-top: 8px; }
.roulette-box { width: 720px; max-height: 80vh; overflow-y: auto; padding: 15px; }
.card-spaced { margin-bottom: 10px; }
.roulette-btn { min-width: 70px; text-align: center; }
.subs-tip { font-size: 16px; background: var(--t-bg-code); color: var(--t-text); border: 1px solid var(--t-border); }
.search-results { display: none; border: 1px solid var(--t-border); max-height: 150px; overflow-y: auto; margin-top: 4px; width: 320px; background: var(--t-bg-inset); }
.search-results.visible { display: block; }
.search-row { padding: 4px 8px; cursor: pointer; }
.search-row:hover { background: var(--t-vp-hover-bg); color: var(--t-vp-hover-text); }
.voice-config-panel { max-width: 500px; margin-left: auto; }
.user-tip-link { cursor: pointer; color: var(--t-link); text-decoration: underline; font-size: 15px; position: relative; }
.user-tip { display: none; position: absolute; top: 18px; left: 0; background: var(--t-tip-bg); border: 2px ridge var(--t-tip-border); padding: 6px; white-space: nowrap; z-index: 10; color: var(--t-tip-text); 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: var(--t-error-inline); font-weight: bold; font-size: 16px; }
.subs-error.visible { display: block; }
.queue-stats-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.stat-pill { font-size: 16px; background: var(--t-bg-code); color: var(--t-text); border: 1px solid var(--t-border); }
.now-playing-box { padding: 4px; }
.nothing-playing { color: var(--t-text-muted); font-size: 16px; }
.activity-log { max-height: 200px; overflow-y: auto; font-size: 15px; font-family: 'Courier New', monospace; background: var(--t-bg-inset); border: 2px inset var(--t-border); padding: 4px; color: var(--t-text); }
.gap-6-row { gap: 6px; }
.divider-above { margin-top: 8px; border-top: 1px dashed var(--t-border); padding-top: 8px; }
.divider-below { margin-bottom: 8px; border-bottom: 1px dashed var(--t-border); 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; }
.subs-edit-modal-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--t-bg-card); border: 3px ridge var(--t-border); padding: 15px; min-width: 350px; max-width: 440px; }
.subs-edit-modal-title { font-size: 19px; color: var(--t-text-heading); margin: 0 0 10px 0; border-bottom: 1px dashed var(--t-border); padding-bottom: 4px; }
.subs-edit-modal-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; border-top: 1px dashed var(--t-border); 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 var(--t-border); max-height: 150px; overflow-y: auto; margin-top: 4px; width: 320px; background: var(--t-bg-inset); }
.voice-search-results-box.visible { display: block; }

.platform-selector { display: inline-flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--t-platform-pill-border); border-radius: 6px; overflow: hidden; }
.platform-pill { padding: 6px 16px; text-decoration: none; color: var(--t-platform-pill-text); background: var(--t-platform-pill-bg); font-size: 14px; border-right: 1px solid var(--t-platform-pill-border); text-transform: capitalize; }
.platform-pill:last-child { border-right: none; }
.platform-pill.active { background: var(--t-accent-bg); color: #fff; }
.platform-pill:hover:not(.active) { background: var(--t-platform-pill-hover); }

.discord-corner { position: fixed; z-index: 1000; color: #5865F2; opacity: 0.7; transition: opacity 0.15s; }
.discord-corner:hover { opacity: 1; }
.discord-corner-bottom { bottom: 12px; right: 52px; }
.discord-corner svg { display: block; }

.theme-toggle-btn {
    position: fixed; bottom: 12px; right: 12px; z-index: 1000;
    padding: 4px 10px; font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border: 2px outset var(--t-btn-border); background: var(--t-btn-bg); color: var(--t-btn-text);
    cursor: pointer; opacity: 0.85;
}
.theme-toggle-btn:hover { opacity: 1; background: var(--t-btn-hover); }
.theme-toggle-btn:active { border-style: inset; }

@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; }
    .discord-top-banner { margin-left: 0; }
    .announcement-bar { margin-left: 0; }
    .announcement-admin { margin-left: 0; }
    .content { margin-left: 0; padding: 10px; }
    .content h1 { font-size: 20px; }
    .mobile-header { display: flex; align-items: center; gap: 8px; background: var(--t-accent-bg); color: #FFFFFF; padding: 8px 10px; border-bottom: 3px ridge var(--t-border); position: sticky; top: 0; z-index: 800; }
    .mobile-header h2 { font-size: 19px; margin: 0; }
    .menu-btn { background: none; border: 2px outset var(--t-btn-border); 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; }
    /* the option sliders: label and value share the line above the track */
    #builder-extra-options .form-row { gap: 4px 10px; }
    #builder-extra-options .form-row label { width: auto; order: 1; }
    #builder-extra-options .builder-extra-val { order: 2; min-width: 0; }
    #builder-extra-options .form-row input[type="range"] { order: 3; flex-basis: 100%; max-width: none; }
    .modal-box { min-width: 0; width: 90%; }
    table { font-size: 15px; }
    input[type="range"] { width: 100%; }
    .overlay-url { font-size: 10px; }
}

.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 var(--t-border); background: var(--t-bg-inset); }
.clip-card { border: 2px outset var(--t-border-light); background: var(--t-bg-card); padding: 6px; cursor: pointer; min-width: 0; }
.clip-card:hover { background: var(--t-bg-hover); }
.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: var(--t-text-muted); margin-top: 2px; }
.clip-game { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--t-text-muted); margin-top: 2px; }
.clip-boxart { width: 20px; height: 28px; object-fit: cover; border: 1px solid var(--t-border); flex: none; }
.clip-actions { display: flex; gap: 4px; margin-top: 5px; }
/* The store reuses the clip GRID but not the clip CARD: a clip title is one
   nowrap line with an ellipsis, which silently cut the name off the product a
   buyer is about to pay for, and .clip-card claims cursor:pointer while the
   store card has nothing clickable but its Buy button. */
.store-card { border: 2px outset var(--t-border-light); background: var(--t-bg-card); padding: 16px; min-width: 0; }
.store-title { font-size: 1.1em; font-weight: bold; overflow-wrap: anywhere; }
.store-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--t-text-muted); margin: 8px 0; }
.store-price { font-size: 1.3em; font-weight: bold; margin: 8px 0; }
.store-card-stacked { margin-bottom: 12px; }
.gift-code { white-space: nowrap; }
.stat-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.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; }

.playlist-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--t-border-light); }
.playlist-num { font-size: 13px; color: var(--t-text-muted); min-width: 24px; text-align: right; }
.playlist-thumb { width: 64px; height: 36px; object-fit: cover; border: 1px solid var(--t-border); flex: none; }
.playlist-title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-dur { font-size: 13px; color: var(--t-text-dim); }

.playlist-played { opacity: 0.45; }
.playlist-check { color: var(--t-playlist-check); }

.clip-mobile-notice { display: none; background: var(--t-notice-bg); color: var(--t-notice-text); border: 2px ridge var(--t-notice-border); padding: 8px 12px; margin-bottom: 10px; font-size: 15px; }

.clip-tabs { display: flex; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--t-border); align-items: center; flex-wrap: wrap; }
.clip-tab-btn { opacity: 0.85; }
.clip-tab-active { opacity: 1; border-style: inset; }
.clip-subtabs { margin-top: 0; padding-top: 4px; border-top: none; }
.clip-tab-add { opacity: 0.85; font-weight: bold; min-width: 28px; }
.clip-friend-x { margin-left: 5px; font-size: 0.8em; opacity: 0.5; cursor: pointer; outline-offset: 1px; }
.clip-friend-x:hover, .clip-friend-x:focus { opacity: 1; color: #e55; }
.clip-console-sticky { position: sticky; top: 0; z-index: 10; }
.clip-filters { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--t-border); }
.clip-filters .form-row { flex-wrap: wrap; }
.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; }
/* a phone is narrower than the player column: the console stacks instead of
   pushing the volume slider and the playlist off the screen */
@media (max-width: 700px) {
    .clip-console-layout { flex-wrap: wrap; }
    .clip-console-col-player { width: 100%; }
    .clip-console-col-playlist { flex-basis: 100%; }
}
.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: #FFFFFF; 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 var(--t-border); padding: 2px; min-height: 60px; max-height: 270px; }
.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); }
}

.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 var(--t-btn-border); }
.bl-tab { border: 2px outset var(--t-border); border-bottom: none; border-radius: 0; margin-bottom: -2px; padding: 3px 10px; font-size: 14px; position: relative; z-index: 1; background: var(--t-bl-tab-bg); opacity: 0.85; }
.bl-tab-active { background: var(--t-bl-tab-active-bg); opacity: 1; border-bottom: 2px solid var(--t-bl-tab-active-bg); z-index: 2; }
.bl-tab-count { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 12px; background: var(--t-bl-tab-count-bg); color: var(--t-bl-tab-count-text); border-radius: 0; min-width: 14px; text-align: center; }
.bl-tab-body { border: 2px solid var(--t-btn-border); border-top: none; padding: 10px; min-height: 160px; max-height: 50vh; overflow-y: auto; background: var(--t-bl-tab-body-bg); }
.bl-heading { font-weight: bold; font-size: 15px; margin: 8px 0 4px 0; border-bottom: 1px solid var(--t-border-light); 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; }
.obs-save-bar { position: sticky; bottom: 0; background: var(--t-bg); padding: 8px 0; border-top: 2px ridge var(--t-btn-border); z-index: 10; }

.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; }

.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; }

.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-form .form-row > label:first-child { width: 180px; flex-shrink: 0; }

.sub-form .form-row > label:first-child { width: 120px; flex-shrink: 0; }
.sub-form .form-row input[type="text"] { flex: 1; min-width: 0; }

.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; }
.automsg-form .form-row textarea { width: 360px; resize: vertical; }
.automsg-form .form-row:has(textarea) { align-items: flex-start; }
.subs-edit-modal .form-row textarea { width: 100%; resize: vertical; }
.subs-edit-modal .form-row:has(textarea) { align-items: flex-start; }
#pr-edit-modal .subs-edit-modal-frame { min-width: 500px; max-width: 640px; width: 90vw; }
#pr-edit-modal .pr-msg-input { min-height: 72px; }
#pr-edit-modal .subs-edit-modal-actions .btn { padding: 4px 12px; font-size: 14px; }

.channel-detail-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.channel-detail-avatar { width: 64px; height: 64px; border: 2px ridge var(--t-border); }
.channel-detail-header-info { flex: 1; }
.channel-detail-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 15px; }
.channel-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.mt-12 { margin-top: 12px; }

.timeline-filters { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.timeline-list { max-height: 600px; overflow-y: auto; border: 2px inset var(--t-border); background: var(--t-timeline-bg); }
.timeline-row { padding: 5px 8px; border-bottom: 1px solid var(--t-timeline-divider); font-size: 15px; }
.timeline-row:last-child { border-bottom: none; }
.timeline-ts { margin-right: 8px; }
.timeline-ts code { font-size: 13px; }
.timeline-cat { display: inline-block; padding: 1px 6px; font-size: 12px; font-weight: bold; min-width: 50px; text-align: center; border: 1px solid; }
.timeline-cat-tier { background: var(--t-timeline-tier-bg); color: var(--t-timeline-tier-text); border-color: var(--t-timeline-tier-border); }
.timeline-cat-event { background: var(--t-timeline-event-bg); color: var(--t-timeline-event-text); border-color: var(--t-timeline-event-border); }
.timeline-cat-login { background: var(--t-timeline-login-bg); color: var(--t-timeline-login-text); border-color: var(--t-timeline-login-border); }
.timeline-cat-patreon { background: var(--t-timeline-patreon-bg); color: var(--t-timeline-patreon-text); border-color: var(--t-timeline-patreon-border); }
.timeline-cat-stripe { background: var(--t-timeline-stripe-bg); color: var(--t-timeline-stripe-text); border-color: var(--t-timeline-stripe-border); }
.timeline-title { margin-left: 6px; }
.timeline-actor { margin-left: 6px; font-size: 13px; }
.timeline-detail { margin-top: 2px; padding-left: 16px; }
.timeline-detail code { font-size: 13px; word-break: break-all; }

/* these replace inline style attributes, which csp strips. kept last so
   they win the same ties the inline styles did */
.mt-05rem { margin-top: 0.5rem; }
.mt-1rem { margin-top: 1rem; }
.mt-2rem { margin-top: 2rem; }
.mb-1rem { margin-bottom: 1rem; }
.mb-15rem { margin-bottom: 1.5rem; }
.w-2rem { width: 2rem; }
.w-48 { width: 48px; }
.w-6em { width: 6em; }
.fw-600 { font-weight: 600; }
.fs-085rem { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.italic { font-style: italic; }
.dim-50 { color: var(--t-text-dim); font-style: italic; }
.overflow-x-auto { overflow-x: auto; }
.gap-05rem { gap: 0.5rem; }
.text-ok { color: var(--t-success); }
.text-bad,
.hint.text-bad { color: var(--t-danger); }
.row-gap-sm { display: flex; gap: 0.5rem; align-items: center; }
.row-gap-sm-wrap { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row-gap-sm-top-wrap { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; }
.row-gap-xs { display: flex; gap: 0.25rem; }
.row-between-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.toolbar-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap-200 { position: relative; flex: 1; min-width: 200px; }
.grow-160 { flex: 1; min-width: 160px; }
.grow-200 { flex: 1; min-width: 200px; }
/* input. prefix matches the input[type=text] base rule's weight */
input.input-mono { flex: 1; font-family: monospace; font-size: 0.85rem; }
.count-dim { font-size: 0.85rem; white-space: nowrap; }
.mono-dim { font-family: monospace; }
.extra-dim { font-size: 0.85rem; }
.drag-handle { cursor: grab; color: var(--t-text-muted); }
.card h2.m0 { margin: 0; }
.admin-banner.banner-danger,
[data-theme="dark"] .admin-banner.banner-danger { background: #8b2020; color: #fff; }
.sfx-regex-badge { font-size: 0.75em; font-style: italic; color: var(--t-text-muted); }

/* admin system alerts: the search box takes the room the filters leave */
.alerts-search { flex: 1 1 260px; min-width: 200px; }

/* admin todo list: layout only, colours come from the existing tokens */
.todo-add { display: flex; gap: 6px; align-items: center; }
.todo-add input[type="text"] { min-width: 0; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--t-border); }
.todo-item:last-child { border-bottom: none; }
.todo-main { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; min-width: 0; }
.todo-main input[type="checkbox"] { margin-top: 4px; flex: none; }
.todo-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-meta { grid-column: 1; margin: 0 0 0 26px; }
.todo-delete { grid-column: 2; grid-row: 1; }