/* beta site layout: top bar, account menu, the streamer shell (grouped
   sidebar, live controls, notices), the home page, the chatter home, and a
   layout-only restyle of the shared page parts. every colour is a site
   token; this sheet chooses none of its own beyond the beta accent */

:root {
    --beta-bar-h: 56px;
    --beta-side-w: 250px;
    --beta-gutter: 32px;
    --beta-radius: 12px;
    --beta-accent: #b8360f;
    --beta-accent-text: #ffffff;
    --beta-surface: var(--t-bg-card);
    --beta-line: #555555;
}
:root[data-theme="dark"] {
    --beta-accent: #ff7a57;
    --beta-accent-text: #111111;
    --beta-line: #5a5a5a;
}

body.beta { padding-top: var(--beta-bar-h); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ---------- top bar ---------- */
.beta-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--beta-bar-h); z-index: 1000;
    box-sizing: border-box; padding: 0 20px;
    display: flex; align-items: center; gap: 16px;
    background: var(--beta-surface); color: var(--t-text);
    border-bottom: 1px solid var(--beta-line);
    font-size: 15px;
}
.beta-topbar a { color: var(--t-text); text-decoration: none; }
.beta-topbar a:hover { text-decoration: underline; }
.beta-brand { font-size: 19px; font-weight: 800; white-space: nowrap; }
.beta-menu-toggle {
    display: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center;
    border: 1px solid var(--beta-line); border-radius: 8px; background: transparent; color: var(--t-text); cursor: pointer;
}

.beta-switch { display: flex; padding: 3px; border: 1px solid var(--beta-line); border-radius: 9px; }
.beta-switch-btn { padding: 6px 14px; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.beta-topbar .beta-switch-btn.is-active { background: var(--beta-accent); color: var(--beta-accent-text); text-decoration: none; }

.beta-links { display: flex; gap: 18px; flex: 1; }
.beta-topbar-app .beta-links { flex: 0 0 auto; }
.beta-live-slot { margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; }

.beta-menu { position: relative; }
/* a closed popover is out of the layout entirely */
.beta-menu:not([open]) > .beta-menu-panel, .beta-live-more:not([open]) > .beta-live-more-panel { display: none; }
.beta-menu > summary { list-style: none; cursor: pointer; }
.beta-menu > summary::-webkit-details-marker { display: none; }
.beta-menu-btn {
    padding: 8px 14px; border: 1px solid var(--beta-line); border-radius: 8px;
    font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.beta-menu-btn::after { content: " \25BE"; }
.beta-menu-btn-login { background: var(--beta-accent); color: var(--beta-accent-text); border-color: var(--beta-accent); }
.beta-menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); width: 340px; box-sizing: border-box;
    padding: 10px; background: var(--beta-surface); color: var(--t-text);
    border: 1px solid var(--beta-line); border-radius: var(--beta-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column; gap: 4px;
}
.beta-menu-label { padding: 8px 8px 2px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.beta-menu-terms { margin: 0; padding: 4px 8px; font-size: 13px; }
.beta-menu-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; }
.beta-menu-row:hover { background: var(--t-bg-selected); text-decoration: none; }
.beta-menu-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.beta-menu-who strong { overflow: hidden; text-overflow: ellipsis; }
.beta-menu-who span { font-size: 14px; }
.beta-menu-go { font-size: 14px; font-weight: 700; }
.beta-topbar .beta-menu-add { padding: 6px 8px; font-weight: 600; color: var(--beta-accent); }
.beta-menu-sep { height: 1px; margin: 6px 0; background: var(--beta-line); }
.beta-menu-form { margin: 0; }
.beta-menu-logout {
    width: 100%; text-align: left; padding: 8px; border: 0; border-radius: 8px;
    background: transparent; color: var(--t-text); font: inherit; cursor: pointer;
}
.beta-menu-logout:hover { background: var(--t-bg-selected); }
/* toasts start under the top bar and stay beneath its search results and
   menus, so an error never covers the search box */
body.beta #toast-box { top: calc(var(--beta-bar-h) + 12px); z-index: 999; }
body.beta .toast-item { border-radius: 10px; border-width: 1px; border-style: solid; }
/* the theme switch lives in the account menu here; the corner buttons are
   the main site's */
body.beta .theme-toggle-btn { display: none; }
body.beta .discord-corner { display: none; }

.beta-choice { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.beta-choice-title { font-weight: 700; font-size: 16px; }
.beta-choice-desc { font-size: 14px; }
.beta-choice-btns { display: flex; gap: 8px; }
.beta-choice-btns .btn { flex: 1; text-align: center; font-size: 16px; }
.beta-choices {
    max-width: 520px; margin: 0 auto; text-align: left;
    background: var(--beta-surface); border: 1px solid var(--beta-line); border-radius: var(--beta-radius); padding: 8px;
}

/* ---------- live controls and the bell, in the top bar ---------- */
.beta-live { display: flex; align-items: center; gap: 6px; position: relative; }
.beta-live .ctrl-btn, .beta-live-more-btn {
    height: 34px; box-sizing: border-box; padding: 0 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 32px; cursor: pointer;
}
.beta-live .ctrl-btn.ctrl-on, .beta-live .ctrl-btn.ctrl-off { border-width: 1px; border-style: solid; }
.beta-live-more { position: relative; }
.beta-live-more > summary { list-style: none; }
.beta-live-more > summary::-webkit-details-marker { display: none; }
.beta-live-more-btn { display: inline-block; border: 1px solid var(--beta-line); background: transparent; color: var(--t-text); }
.beta-live-more-btn::after { content: " \25BE"; }
.beta-live-more-panel {
    position: absolute; right: 0; top: calc(100% + 8px); width: 320px; box-sizing: border-box;
    padding: 12px; background: var(--beta-surface); color: var(--t-text);
    border: 1px solid var(--beta-line); border-radius: var(--beta-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.beta-live-more-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.beta-live-more-row { display: flex; gap: 6px; }
.beta-live-more-row .ctrl-input { flex: 1; min-width: 0; width: auto; height: 36px; box-sizing: border-box; font-size: 15px; }
.beta-live-more-row select.ctrl-input { flex: 0 0 auto; }
.beta-live-more-row .ctrl-btn { height: 36px; line-height: 34px; border-radius: 8px; }
/* the bell's dropdown hangs off this wrapper (the nav script makes the
   bell's parent the anchor), so the live bar's own position is never
   touched */
.beta-bell-wrap { position: relative; display: inline-flex; margin-left: 4px; }
.beta-bell {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--beta-line); border-radius: 999px; background: transparent; color: var(--t-text);
    position: relative; cursor: pointer; padding: 0; font-size: 0;
}
.beta-bell:hover { background: var(--t-bg-selected); color: var(--t-text); }
.beta-bell .notif-badge { top: -4px; right: -4px; }
.beta-bell-wrap .notif-dropdown {
    left: auto; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 20px);
    border: 1px solid var(--beta-line); border-radius: var(--beta-radius); overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ---------- sidebar ---------- */
body.beta .beta-side {
    position: fixed; top: var(--beta-bar-h); left: 0; bottom: 0; width: var(--beta-side-w); box-sizing: border-box;
    display: flex; flex-direction: column; overflow-y: auto;
    background: var(--t-bg-sidebar); border-right: 1px solid var(--beta-line); z-index: 900;
}
.beta-chan { padding: 18px 16px 14px; border-bottom: 1px solid var(--beta-line); display: flex; flex-direction: column; gap: 4px; }
.beta-chan-name { font-size: 18px; font-weight: 800; color: var(--t-text); text-decoration: none; overflow-wrap: anywhere; }
.beta-chan-name:hover { text-decoration: underline; color: var(--t-text); }
.beta-chan-meta { font-size: 13px; }
.beta-usage { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.beta-usage-bar { height: 6px; border-radius: 3px; background: var(--t-bg-code); overflow: hidden; }
.beta-usage-fill { height: 100%; width: 0; border-radius: 3px; background: var(--beta-accent); transition: width 0.3s; }
.beta-usage-fill.is-high { background: var(--t-danger); }
.beta-usage-pool { font-size: 12px; }
body.beta .beta-chan-switch { margin-top: 8px; display: inline-block; padding: 0; font-size: 14px; font-weight: 600; color: var(--beta-accent); text-decoration: none; }
body.beta .beta-chan-switch:hover { text-decoration: underline; color: var(--beta-accent); }
.beta-navgroups { flex: 1; padding: 8px 10px 12px; }
.beta-navgroup ul { list-style: none; margin: 0; padding: 0; }
.beta-navgroup-title {
    padding: 14px 10px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--t-text);
}
.beta-navgroup-admin > summary { cursor: pointer; list-style: none; }
.beta-navgroup-admin > summary::-webkit-details-marker { display: none; }
.beta-navgroup-admin > summary::after { content: " \25BE"; }
.beta-navgroup-admin[open] > summary::after { content: " \25B4"; }
body.beta .beta-navlink {
    display: block; padding: 7px 10px; border-radius: 8px;
    color: var(--t-text); font-size: 15px; font-weight: 500; text-decoration: none;
}
body.beta .beta-navlink:hover { background: var(--t-bg-selected); color: var(--t-text); text-decoration: none; }
body.beta .beta-navlink.is-active { background: var(--beta-accent); color: var(--beta-accent-text); font-weight: 700; }
.beta-side-foot { padding: 12px 16px 16px; border-top: 1px solid var(--beta-line); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.beta-side-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.beta-side-links a { color: var(--t-text); }
.beta-side-logout-form { margin: 0; }
.beta-side-logout {
    width: 100%; height: 36px; border: 1px solid var(--beta-line); border-radius: 8px;
    background: transparent; color: var(--t-text); font: inherit; font-weight: 600; cursor: pointer;
}
.beta-side-logout:hover { background: var(--t-bg-selected); }
body.beta .mobile-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 899; }
body.beta .mobile-overlay.open { display: block; }

/* ---------- notices above the page ---------- */
body.beta .beta-notices { margin-left: var(--beta-side-w); padding: 16px var(--beta-gutter) 0; display: flex; flex-direction: column; gap: 8px; }
body.beta .beta-notices:empty { display: none; }
body.beta .beta-notices .admin-banner,
body.beta .beta-notices .announcement-bar,
body.beta .beta-notices .announcement-admin {
    margin-left: 0; border-width: 1px; border-style: solid; border-radius: 10px; padding: 10px 14px; font-size: 14px;
}
body.beta .beta-notices .announcement-bar { display: flex; align-items: center; gap: 10px; font-weight: 600; }
body.beta .beta-notices .announcement-bar #announcement-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.beta .beta-notices .announcement-admin input[type="text"] { height: 34px; }
body.beta .beta-notices .hidden { display: none !important; }
body.beta .beta-notices .admin-banner a { color: var(--t-link); }

/* ---------- page layout ---------- */
body.beta .content { margin-left: var(--beta-side-w); padding: 24px var(--beta-gutter) 64px; box-sizing: border-box; min-width: 0; }
body.beta .content > * { max-width: 1120px; }
body.beta .content h1 { font-size: 28px; margin: 0 0 16px; line-height: 1.2; }
body.beta .content > h1 + .platform-selector { margin-top: -4px; }
body.beta .beta-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
body.beta .beta-pagehead h1 { margin: 0; }
body.beta .beta-pagehead-sub { margin: 4px 0 0; font-size: 15px; }
body.beta .beta-pagehead .platform-selector { margin: 4px 0 0; }
body.beta .platform-selector { border-radius: 999px; }
body.beta .platform-pill { padding: 7px 16px; font-size: 14px; font-weight: 600; }

body.beta .card { border: 1px solid var(--beta-line); border-radius: var(--beta-radius); padding: 18px 20px; margin-bottom: 16px; }
body.beta .card h2 { font-size: 18px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--beta-line); }
body.beta .card h2.m0 { margin: 0; }
body.beta .card .card { padding: 14px 16px; }
body.beta .hint { font-size: 14px; color: var(--t-text); line-height: 1.45; }
body.beta .hint-example { border-radius: 8px; }

body.beta .form-row { gap: 10px 14px; padding: 7px 0; }
body.beta .form-row > label:first-child { flex: 0 0 200px; font-size: 15px; font-weight: 600; }
body.beta .form-row > label:first-child.label-zero { flex-basis: 0; }
body.beta .alert-form .form-row > label:first-child { flex-basis: 140px; }
body.beta .sfx-form .form-row > label:first-child { flex-basis: 110px; }
body.beta .spam-form .form-row > label:first-child { flex-basis: 240px; }
body.beta .cmd-extra-row .form-row > label:first-child { flex-basis: 150px; }
body.beta #builder-extra-options .form-row > label:first-child { flex-basis: 110px; }
body.beta .check-row { font-size: 15px; padding: 6px 0; }

body.beta input[type="text"], body.beta input[type="number"], body.beta input[type="search"], body.beta input[type="date"],
body.beta input[type="url"], body.beta input[type="email"], body.beta input[type="password"], body.beta select, body.beta textarea {
    border: 1px solid var(--beta-line); border-radius: 8px; padding: 6px 10px; font-size: 15px; box-sizing: border-box; min-height: 36px;
}
body.beta textarea { min-height: 80px; }
body.beta input[type="text"]:focus, body.beta input[type="number"]:focus, body.beta input[type="search"]:focus,
body.beta select:focus, body.beta textarea:focus { outline: 2px solid var(--beta-accent); outline-offset: 1px; }
body.beta .overlay-url { font-size: 14px; }
body.beta .ctrl-input { min-height: 0; }

body.beta .btn {
    border: 1px solid var(--t-btn-border); border-radius: 8px; padding: 8px 14px; font-size: 15px; font-weight: 600; line-height: 1.2;
    text-decoration: none; display: inline-block; box-sizing: border-box;
}
body.beta .btn:active { border-style: solid; }
body.beta .btn-small { padding: 6px 12px; font-size: 14px; }
body.beta .btn-twitch, body.beta .btn-kick { font-size: 16px; }
body.beta .ctrl-btn { border-width: 1px; border-style: solid; }
body.beta .link-btn { border-radius: 0; }
body.beta .logout-btn { font-size: 1em; }

body.beta table { border: 1px solid var(--beta-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; }
body.beta th { padding: 9px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }
body.beta td { padding: 8px 12px; border: 0; border-top: 1px solid var(--t-border-light); }
body.beta tr:first-child td { border-top: 0; }
body.beta thead + tbody tr:first-child td { border-top: 0; }
body.beta .audit-detail-fields { border: 0; border-radius: 0; }
body.beta .audit-detail-fields td { border: 0; padding: 1px 8px 1px 0; }
body.beta .detail-table { border: 0; }
body.beta .detail-table td { border: 0; padding: 3px 12px 3px 0; }

body.beta .modal-box, body.beta .subs-edit-modal-frame { border: 1px solid var(--beta-line); border-radius: 14px; padding: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); }
body.beta .modal-title, body.beta .subs-edit-modal-title { font-size: 19px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--beta-line); }
body.beta .modal-actions, body.beta .subs-edit-modal-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--beta-line); }
body.beta .vp-list, body.beta .activity-log, body.beta .result-box, body.beta .lookup-panel, body.beta .audit-filter, body.beta .clip-grid,
body.beta .viewer-preview, body.beta .search-results, body.beta .voice-search-results-box { border-width: 1px; border-style: solid; border-radius: 8px; }
body.beta .bp-group, body.beta .clip-card, body.beta .store-card, body.beta .streams-card { border-width: 1px; border-style: solid; border-radius: 10px; }
body.beta .clip-grid > p:only-child { grid-column: 1 / -1; margin: 4px; }
body.beta .auth-banner, body.beta .login-notice, body.beta .clip-mobile-notice { border-width: 1px; border-style: solid; border-radius: 10px; }
body.beta .divider-top, body.beta .divider-above, body.beta .row-end, body.beta .inline-form-tight { border-top-style: solid; }
body.beta .divider-bottom, body.beta .divider-below { border-bottom-style: solid; }
body.beta .form-sticky { border-top: 1px solid var(--beta-line); margin-top: 8px; }
body.beta hr { border: 0; border-top: 1px solid var(--beta-line); }
body.beta .stat-pill, body.beta .subs-tip { border-radius: 999px; padding: 4px 12px; }

/* ---------- home ---------- */
.beta-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
body.beta .beta-stat { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.beta-stat-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.beta-stat-value { font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.beta-stat-note { font-size: 14px; }
.beta-stat-link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--beta-accent); text-decoration: none; }
.beta-stat-link:hover { text-decoration: underline; color: var(--beta-accent); }
.beta-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.beta .beta-home-grid .card { margin: 0; }
.beta-checklist { list-style: none; margin: 0; padding: 0; }
.beta-check { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--beta-line); }
.beta-check:last-child { border-bottom: 0; padding-bottom: 0; }
.beta-check-mark { flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid var(--beta-line); border-radius: 999px; position: relative; }
.beta-check.is-done .beta-check-mark { background: var(--beta-accent); border-color: var(--beta-accent); }
.beta-check.is-done .beta-check-mark::after {
    content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
    border: solid var(--beta-accent-text); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.beta-check-body { flex: 1; min-width: 0; }
.beta-check-title { font-weight: 700; font-size: 15px; }
.beta-check-desc { font-size: 14px; margin-top: 2px; }
.beta-recent { list-style: none; margin: 0; padding: 0; }
.beta-recent-row { padding: 10px 0; border-bottom: 1px solid var(--beta-line); font-size: 14px; }
.beta-recent-row:last-child { border-bottom: 0; }
.beta-recent-main { overflow-wrap: anywhere; }
.beta-recent-details { margin-top: 2px; overflow-wrap: anywhere; }
.beta-recent-when { display: block; margin-top: 2px; font-size: 13px; }
.beta-card-foot-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--beta-accent); text-decoration: none; }
.beta-card-foot-link:hover { text-decoration: underline; color: var(--beta-accent); }
.beta-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.beta-jump-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
    border: 1px solid var(--beta-line); border-radius: 10px; color: var(--t-text); text-decoration: none; min-width: 0;
}
.beta-jump-tile:hover { background: var(--t-bg-selected); color: var(--t-text); text-decoration: none; }
.beta-jump-title { font-weight: 700; font-size: 15px; }
.beta-jump-desc { font-size: 13px; }
body.beta .beta-home .card { margin-bottom: 16px; }

/* ---------- chatter home ---------- */
.beta-page {
    max-width: 1100px; margin: 0 auto; padding: 28px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--t-text);
}
.beta-h1 { font-size: 30px; margin: 0 0 4px; color: var(--t-text); }
.beta-sub { margin: 0 0 20px; font-size: 16px; }
.beta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.beta-card {
    background: var(--beta-surface); border: 1px solid var(--beta-line); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 12px; font-size: 16px;
}
.beta-card h2 { margin: 0; font-size: 21px; color: var(--t-text); }
.beta-card p { margin: 0; }
.beta-list { list-style: none; margin: 0; padding: 0; }
.beta-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--beta-line); }
.beta-list .beta-row:last-child { border-bottom: 0; }
.beta-row-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.beta-row-go, .beta-link-btn { font-weight: 700; color: var(--beta-accent); }
.beta-link-btn { border: 0; background: transparent; font: inherit; cursor: pointer; padding: 0; }
.beta-inline-form { margin: 0; }
.beta-find { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.beta-find label { font-weight: 600; font-size: 15px; }
.beta-find-row { display: flex; gap: 8px; }
.beta-find-row input {
    flex: 1; min-width: 0; height: 42px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid var(--beta-line); border-radius: 8px; background: var(--t-bg-inset); color: var(--t-text); font-size: 16px;
}
.beta-btn {
    height: 42px; padding: 0 18px; border: 0; border-radius: 8px;
    background: var(--beta-accent); color: var(--beta-accent-text); font-weight: 700; font-size: 16px; cursor: pointer;
}
.beta-error { color: var(--t-error-inline); font-weight: 600; }

/* ---------- settings search in the top bar ---------- */
.beta-search { position: relative; flex: 0 1 300px; min-width: 170px; }
.beta-search-open {
    display: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center;
    border: 1px solid var(--beta-line); border-radius: 8px; background: transparent; color: var(--t-text); cursor: pointer;
}
.beta-search-input {
    width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px;
    border: 1px solid var(--beta-line); border-radius: 8px; background: var(--t-bg-inset); color: var(--t-text); font: inherit;
}
.beta-search-input::placeholder { color: var(--t-text); }
.beta-search-results {
    position: absolute; left: 0; top: calc(100% + 8px); width: 420px; max-width: calc(100vw - 20px);
    max-height: min(70vh, 560px); overflow-y: auto; box-sizing: border-box;
    margin: 0; padding: 6px; list-style: none;
    background: var(--beta-surface); color: var(--t-text);
    border: 1px solid var(--beta-line); border-radius: var(--beta-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.beta-search-item a, .beta-search-item .beta-search-act { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 8px; }
.beta-search-item .beta-search-act { width: 100%; box-sizing: border-box; border: 0; background: transparent; font: inherit; color: var(--t-text); text-align: left; cursor: pointer; }
.beta-topbar .beta-search-item a:hover { text-decoration: none; }
.beta-search-item a:hover, .beta-search-item.is-active a, .beta-search-item .beta-search-act:hover, .beta-search-item.is-active .beta-search-act { background: var(--t-bg-selected); }
.beta-search-top { display: flex; align-items: baseline; gap: 10px; }
.beta-search-title { flex: 1; min-width: 0; font-weight: 700; }
.beta-search-page { font-size: 13px; font-weight: 600; white-space: nowrap; }
.beta-search-desc { font-size: 14px; line-height: 1.35; }
.beta-search-none { padding: 10px; }
body.beta [id] { scroll-margin-top: calc(var(--beta-bar-h) + 16px); }
body.beta .beta-search-flash { outline: 3px solid var(--beta-accent); outline-offset: 3px; transition: outline-color 0.3s; }

/* ---------- narrower screens ---------- */
/* with TTS off the top bar also holds the sound effects switch, so the
   site links give way first and the search box shrinks */
@media (max-width: 1480px) {
    .beta-topbar-app .beta-links { display: none; }
    .beta-topbar-app .beta-search { min-width: 120px; }
}
/* a mid-width window: the channel / voices switch folds into the account
   menu (which lists both) and the search becomes a button, so the live
   controls and the menu always fit on one line */
@media (max-width: 1240px) {
    .beta-topbar-app .beta-switch { display: none; }
    .beta-topbar-app .beta-search { flex: 0 0 auto; min-width: 0; position: static; }
    .beta-topbar-app .beta-search-open { display: inline-flex; }
    .beta-topbar-app .beta-search-box {
        display: none; position: fixed; left: 0; right: 0; top: var(--beta-bar-h); padding: 10px;
        background: var(--beta-surface); border-bottom: 1px solid var(--beta-line);
    }
    .beta-topbar-app .beta-search.is-open .beta-search-box { display: block; }
    .beta-topbar-app .beta-search-input { height: 44px; font-size: 16px; }
    .beta-topbar-app .beta-search-results { position: static; width: auto; max-width: none; margin-top: 8px; max-height: calc(100vh - var(--beta-bar-h) - 90px); box-shadow: none; }
}
@media (max-width: 1000px) {
    .beta-topbar-app .beta-brand { display: none; }
    .beta-topbar-app .beta-menu-btn { max-width: 130px; }
}
@media (max-width: 1100px) {
    .beta-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .beta-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root { --beta-gutter: 20px; }
}
@media (max-width: 900px) {
    .beta-topbar-app { gap: 10px; padding: 0 10px; }
    .beta-topbar-app .beta-menu-toggle { display: inline-flex; }
    .beta-topbar-app .beta-brand { display: none; }
    body.beta .beta-side { transform: translateX(-100%); transition: transform 0.15s; width: min(300px, 86vw); box-shadow: none; }
    body.beta .beta-side.open { transform: translateX(0); box-shadow: 0 0 32px rgba(0, 0, 0, 0.35); }
    body.beta .beta-side-foot { padding-bottom: 76px; }
    body.beta .content, body.beta .beta-notices { margin-left: 0; }
    body.beta .beta-notices { padding-top: 12px; }
    body.beta .content { padding-top: 16px; padding-bottom: 96px; }
    body.beta .content h1 { font-size: 24px; }
    .beta-home-grid { grid-template-columns: minmax(0, 1fr); }
    /* the live controls become a bar along the bottom of the screen */
    .beta-live-slot { margin-left: auto; }
    .beta-live {
        position: fixed; left: 0; right: 0; bottom: 0; height: 60px; box-sizing: border-box; padding: 0 10px; z-index: 998;
        background: var(--beta-surface); border-top: 1px solid var(--beta-line); gap: 6px; justify-content: space-between;
    }
    .beta-live .ctrl-btn, .beta-live-more-btn { flex: 0 1 auto; min-width: 0; padding: 0 9px; font-size: 12px; }
    .beta-live .ctrl-btn.hidden { display: none !important; }
    .beta-live-more { flex: 0 1 auto; min-width: 0; display: flex; }
    .beta-live-more-panel { position: fixed; left: 10px; right: 10px; bottom: 68px; top: auto; width: auto; }
    .beta-bell-wrap { flex: 0 0 36px; margin-left: 0; }
    .beta-bell-wrap .notif-dropdown { position: fixed; left: 10px; right: 10px; top: calc(var(--beta-bar-h) + 6px); bottom: auto; width: auto; max-width: none; }
    .beta-bell-wrap .notif-list { max-height: calc(100vh - var(--beta-bar-h) - 140px); }
    body.beta .form-row > label:first-child { flex-basis: 100%; }
    body.beta .alert-form p.hint, body.beta .sfx-form p.hint { margin-left: 0; }
    body.beta table { font-size: 14px; }
    body.beta th { padding: 7px 8px; font-size: 12px; letter-spacing: 0; }
    body.beta td { padding: 6px 8px; }
}
@media (max-width: 768px) {
    /* a wide table scrolls inside its card on a phone instead of pushing
       the page sideways */
    body.beta .beta-vtable, body.beta #personal-sfx-table, body.beta #sfx-table { display: block; overflow-x: auto; max-width: 100%; }
    .beta-topbar { gap: 10px; padding: 0 10px; }
    .beta-brand { display: none; }
    .beta-links { display: none; }
    .beta-switch { flex: 1; min-width: 0; }
    .beta-switch-btn { flex: 1; text-align: center; padding: 6px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .beta-menu-btn { max-width: 120px; box-sizing: border-box; }
    .beta-menu-panel { position: fixed; left: 10px; right: 10px; top: calc(var(--beta-bar-h) + 4px); width: auto; }
    .beta-grid { grid-template-columns: minmax(0, 1fr); }
    .beta-search { flex: 0 0 auto; min-width: 0; position: static; }
    .beta-search-open { display: inline-flex; }
    .beta-search-box {
        display: none; position: fixed; left: 0; right: 0; top: var(--beta-bar-h); padding: 10px;
        background: var(--beta-surface); border-bottom: 1px solid var(--beta-line);
    }
    .beta-search.is-open .beta-search-box { display: block; }
    .beta-search-input { height: 44px; font-size: 16px; }
    .beta-search-results { position: static; width: auto; max-width: none; margin-top: 8px; max-height: calc(100vh - var(--beta-bar-h) - 90px); box-shadow: none; }
    body.beta [id] { scroll-margin-top: calc(var(--beta-bar-h) + 70px); }
    .beta-topbar-app .beta-switch { flex: 0 0 auto; }
    .beta-topbar-app .beta-menu-btn { max-width: 104px; box-sizing: border-box; padding: 8px 10px; }
    .beta-topbar-app .beta-menu-toggle, .beta-topbar-app .beta-search-open { width: 36px; height: 36px; }
}
@media (max-width: 520px) {
    /* the switch keeps whole words in every language: smaller type, a
       narrower account button */
    .beta-switch-btn { font-size: 13px; padding: 6px 7px; }
    .beta-menu-btn { max-width: 92px; padding: 8px 9px; }
    .beta-stats { grid-template-columns: minmax(0, 1fr); }
    .beta-jump { grid-template-columns: minmax(0, 1fr); }
    :root { --beta-gutter: 16px; }
    .beta-topbar-app .beta-switch-btn { padding: 6px 8px; font-size: 13px; }
}

/* ---------- settings pages: sections, setting rows, switches ---------- */
body.beta .beta-section { padding: 18px 20px 8px; }
.beta-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--beta-line); }
body.beta .beta-section-head h2 { margin: 0; padding: 0; border: 0; }
.beta-badge { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--beta-line); font-size: 13px; font-weight: 700; white-space: nowrap; }
.beta-badge.is-on { background: var(--t-ctrl-on-bg); color: #FFFFFF; border-color: var(--t-ctrl-on-border); }
.beta-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--beta-line); }
.beta-section > .beta-setting:first-of-type, .beta-section > p + .beta-setting, .beta-details > .beta-setting:first-of-type { border-top: 0; }
.beta-setting.hidden + .beta-setting { border-top: 0; }
.beta-setting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.beta-setting-text label, .beta-setting-title { font-weight: 700; font-size: 15px; }
.beta-setting-text span { font-size: 14px; line-height: 1.4; }
.beta-setting-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.beta-voice-name { font-size: 15px; }
body.beta .beta-num { width: 96px; }
body.beta .beta-text { width: 260px; max-width: 100%; }
.beta-sw { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: var(--t-text); }
.beta-sw-track { width: 44px; height: 26px; box-sizing: border-box; border-radius: 999px; background: var(--t-bg-code); border: 1px solid var(--beta-line); position: relative; transition: background 0.15s; }
.beta-sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; background: var(--t-bg-card); border: 1px solid var(--beta-line); transition: left 0.15s; }
.beta-sw[aria-checked="true"] .beta-sw-track { background: var(--t-ctrl-on-bg); border-color: var(--t-ctrl-on-border); }
.beta-sw[aria-checked="true"] .beta-sw-track::after { left: 20px; }
.beta-sw-text { font-weight: 700; font-size: 14px; min-width: 24px; text-align: left; }
.beta-sw:disabled { opacity: 0.6; cursor: default; }
.beta-sw:focus-visible { outline: 2px solid var(--beta-accent); outline-offset: 3px; border-radius: 999px; }
.beta-details { border: 1px solid var(--beta-line); border-radius: 10px; padding: 0 14px; margin: 12px 0; }
.beta-details > summary { cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 15px; list-style: none; }
.beta-details > summary::-webkit-details-marker { display: none; }
.beta-details > summary::before { content: "\25B8"; display: inline-block; width: 16px; }
.beta-details[open] > summary::before { content: "\25BE"; }
.beta-details[open] > summary { border-bottom: 1px solid var(--beta-line); }
.beta-steps { margin: 12px 0; padding-left: 22px; line-height: 1.55; font-size: 15px; }
.beta-steps li + li { margin-top: 4px; }
.beta-url-row { display: flex; gap: 8px; position: relative; }
.beta-url-row input { flex: 1; min-width: 0; }
.beta-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 8px; }
.beta-saved { font-size: 13px; font-weight: 700; opacity: 0; transition: opacity 0.2s; min-width: 42px; color: var(--t-success); }
.beta-saved.is-on { opacity: 1; }
.toast-undo { margin-left: 8px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 2px 8px; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 700px) {
    .beta-setting { flex-direction: column; align-items: stretch; gap: 10px; }
    .beta-setting-ctl { max-width: none; flex-wrap: wrap; }
    .beta-setting-ctl select, body.beta .beta-text { width: 100%; }
    .beta-url-row { flex-wrap: wrap; }
    .beta-url-row .btn { flex: 1; }
}

/* ---------- voices ---------- */
body.beta .beta-search-field { width: 100%; margin: 4px 0 12px; }
.beta-provs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.beta-prov { border: 1px solid var(--beta-line); border-radius: 10px; }
.beta-prov > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.beta-prov > summary::-webkit-details-marker { display: none; }
.beta-prov > summary::before { content: "\25B8"; width: 14px; }
.beta-prov[open] > summary::before { content: "\25BE"; }
.beta-prov-name { flex: 1; min-width: 0; }
.beta-prov-count { font-size: 13px; font-weight: 600; white-space: nowrap; }
.beta-prov-body { padding: 0 14px 12px; border-top: 1px solid var(--beta-line); }
.beta-prov-actions { padding: 10px 0; }
body.beta .beta-vtable { margin: 0; }
body.beta .beta-vtable th { white-space: nowrap; }
.beta-vname { font-weight: 600; }
.beta-vcode { font-size: 12px; padding: 1px 5px; border: 1px solid var(--beta-line); border-radius: 5px; margin-left: 2px; }
.beta-vvol { white-space: nowrap; }
.beta-vvol input[type="range"] { width: 90px; vertical-align: middle; }
.beta-vact { white-space: nowrap; }
.beta-vact .btn { margin-right: 2px; }
body.beta .voice-row.voice-off .beta-vname { text-decoration: line-through; text-decoration-thickness: 2px; }
body.beta .voice-row.voice-off td:nth-child(2), body.beta .voice-row.voice-off td:nth-child(3) { text-decoration: none; }
body.beta .beta-presets { margin-bottom: 12px; }
body.beta .preset-card { border: 1px solid var(--beta-line); border-radius: 10px; padding: 12px 14px; }
body.beta .preset-card-tags code { border: 1px solid var(--beta-line); border-radius: 5px; }
body.beta .preset-card-actions { margin-top: 8px; gap: 6px; }
.beta-builder { padding-bottom: 8px; }
.beta-builder-step { padding: 12px 0 4px; border-top: 1px solid var(--beta-line); }
.beta-builder-step-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.beta-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.beta-filter-row .hint { flex-basis: 100%; }
body.beta .beta-picker-box { border: 1px solid var(--beta-line); border-radius: 8px; max-height: 280px; margin-bottom: 4px; }
body.beta .voice-picker-row { padding: 7px 10px; }
.beta-slider { width: 60%; }
.beta-slider input[type="range"] { flex: 1; min-width: 0; }
.beta-slider span { min-width: 48px; text-align: right; font-weight: 600; font-size: 14px; }
body.beta .beta-extra-options .form-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--beta-line); }
body.beta .beta-extra-options .form-row label { flex: 1; font-weight: 700; font-size: 15px; }
body.beta .beta-extra-options .form-row input[type="range"] { flex: 0 1 50%; max-width: none; }
body.beta .beta-extra-options .builder-extra-val { min-width: 48px; text-align: right; font-weight: 600; font-size: 14px; }
@media (max-width: 700px) {
    /* the voice cell already names the language, so the two columns go */
    body.beta .beta-vtable-voices th:nth-child(3), body.beta .beta-vtable-voices td:nth-child(3),
    body.beta .beta-vtable-voices th:nth-child(4), body.beta .beta-vtable-voices td:nth-child(4) { display: none; }
    body.beta .beta-vvol { display: none; }
    .beta-vact .btn { padding: 5px 8px; }
    .beta-slider { width: 100%; }
    .beta-filter-row select { flex: 1 1 100%; }
    .beta-prov > summary { padding: 10px 12px; }
    .beta-prov-body { padding: 0 10px 10px; }
}

/* ---------- spam protection: one rule per card ---------- */
body.beta .beta-rule-head { padding-top: 0; }
.beta-rule-body { border-top: 1px solid var(--beta-line); }
.beta-example { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--beta-line); font-family: "Courier New", monospace; font-size: 14px; white-space: pre-wrap; }
body.beta .beta-inline-num { width: 84px; margin: 0 4px; vertical-align: middle; }
.beta-exempt { margin: 4px 0 12px; }
.beta-exempt > summary { font-size: 14px; }
.beta-exempt .beta-setting { padding: 8px 0; }

/* ---------- substitutions ---------- */
/* a checkbox the shared scripts drive, drawn as a switch */
body.beta .beta-cb-switch {
    appearance: none; -webkit-appearance: none; width: 44px; height: 26px; margin: 0; box-sizing: border-box; min-height: 0; padding: 0;
    border-radius: 999px; background: var(--t-bg-code); border: 1px solid var(--beta-line); position: relative; cursor: pointer; transition: background 0.15s;
}
body.beta .beta-cb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; background: var(--t-bg-card); border: 1px solid var(--beta-line); transition: left 0.15s; }
body.beta .beta-cb-switch:checked { background: var(--t-ctrl-on-bg); border-color: var(--t-ctrl-on-border); }
body.beta .beta-cb-switch:checked::after { left: 20px; }
body.beta .beta-cb-switch:disabled { opacity: 0.6; }
body.beta .beta-cb-switch:focus-visible { outline: 2px solid var(--beta-accent); outline-offset: 3px; }
.beta-setting-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.beta-setting-checks { flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; }
.beta-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.beta-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0 4px; }
.beta-addrow input[type="text"] { flex: 1 1 220px; min-width: 0; }
.beta-addrow input[type="file"] { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.beta-addform { padding-bottom: 8px; }
.beta-try { margin-top: 12px; padding: 14px; border: 1px solid var(--beta-line); border-radius: 10px; }
.beta-try-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.beta-try-row { display: flex; gap: 8px; }
.beta-try-row input { flex: 1; min-width: 0; }
body.beta .beta-try-result { border: 0; border-top: 1px solid var(--beta-line); border-radius: 0; margin-top: 10px; padding: 10px 0 0; background: transparent; font-size: 15px; }
.beta-bleeps { display: flex; flex-direction: column; gap: 6px; }
.beta-radio-row { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.beta-bleep-list:empty { display: none; }
body.beta .censor-bleep-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
body.beta .censor-word-flow { padding: 4px 0; }
body.beta .subs-edit-modal-frame { width: min(520px, 92vw); max-width: none; }
@media (max-width: 700px) {
    .beta-try-row { flex-wrap: wrap; }
    .beta-try-row .btn { flex: 1; }
}

/* ---------- users ---------- */
.beta-twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.beta-col { min-width: 0; }
.beta-col-head { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.beta-assign { padding-top: 4px; }
@media (max-width: 900px) {
    .beta-twocol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- sound effects: the library scrolls in its own box ---------- */
body.beta #globals-body { max-height: 560px; overflow-y: auto; border: 1px solid var(--beta-line); border-radius: 10px; padding: 0 12px 12px; }
body.beta #globals-bar { position: sticky; top: 0; z-index: 2; margin: 0 -12px 8px; padding: 12px; background: var(--t-bg-card); border-bottom: 1px solid var(--beta-line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.beta #globals-bar input[type="text"] { flex: 1 1 220px; min-width: 0; }
body.beta #globals-body .globals-table { border: 0; }
body.beta .global-volume-cell { white-space: nowrap; }
body.beta .global-volume-cell input[type="range"] { width: 110px; vertical-align: middle; }

/* ---------- alerts: the cards the script draws ---------- */
body.beta .beta-pill-btn { border-radius: 999px; padding: 6px 14px; }
body.beta .beta-alert-list .card > div:first-child { border-bottom: 1px solid var(--beta-line); padding-bottom: 10px; margin-bottom: 12px; gap: 12px; }
body.beta .beta-alert-list .card > div:first-child h2 { margin: 0; padding: 0; border: 0; flex: 1; min-width: 0; }
body.beta .beta-alert-list .card > div:first-child > input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 44px; height: 26px; margin: 0; box-sizing: border-box; min-height: 0; padding: 0; flex: 0 0 auto;
    border-radius: 999px; background: var(--t-bg-code); border: 1px solid var(--beta-line); position: relative; cursor: pointer;
}
body.beta .beta-alert-list .card > div:first-child > input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 999px; background: var(--t-bg-card); border: 1px solid var(--beta-line); transition: left 0.15s; }
body.beta .beta-alert-list .card > div:first-child > input[type="checkbox"]:checked { background: var(--t-ctrl-on-bg); border-color: var(--t-ctrl-on-border); }
body.beta .beta-alert-list .card > div:first-child > input[type="checkbox"]:checked::after { left: 20px; }
body.beta .alert-form .form-row { padding: 8px 0; }

/* ---------- sync groups, collab, log filters ---------- */
.beta-members { margin: 0; padding-left: 20px; }
.beta-group { padding-bottom: 4px; }
.beta-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.beta-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; flex: 1 1 160px; min-width: 0; }
.beta-filter-field select, .beta-filter-field input { width: 100%; font-weight: 400; }
.beta-filter-date { flex: 0 1 160px; }
.beta-filter-actions { display: flex; gap: 8px; align-items: center; }
.beta-bl-list { margin-top: 8px; }
body.beta .token-display { display: block; padding: 8px 10px; border: 1px solid var(--beta-line); border-radius: 8px; overflow-wrap: anywhere; }
body.beta .beta-help .card p, body.beta .beta-help .card li { font-size: 15px; line-height: 1.5; }
body.beta .beta-help .card ul { padding-left: 20px; }
body.beta .beta-perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 10px 0; }
body.beta .beta-perm-grid h3 { margin: 8px 0 4px; font-size: 15px; }
body.beta .beta-perm-grid ul { margin: 4px 0; padding-left: 20px; font-size: 14px; }
body.beta .beta-h2-mid { margin-top: 10px; }
@media (max-width: 700px) {
    body.beta .beta-perm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- signed-out landing ---------- */
.beta-landing { display: flex; flex-direction: column; gap: 48px; }
.bl-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-top: 24px; }
.bl-title { font-size: 46px; line-height: 1.1; margin: 0 0 8px; color: var(--t-text); }
.bl-tagline { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.bl-lead { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.bl-hero-signin .beta-choices { max-width: none; }
.bl-note { font-size: 14px; margin: 12px 0 0; text-align: center; }
.bl-section { display: flex; flex-direction: column; gap: 16px; }
.bl-h2 { font-size: 26px; margin: 0; color: var(--t-text); }
.bl-desc { font-size: 16px; margin: 0; }
.bl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bl-step { gap: 8px; }
.bl-step h3, .bl-card h3, .bl-platform h3, .bl-tier h3 { margin: 0; font-size: 18px; color: var(--t-text); }
.bl-step-num {
    width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--beta-accent); color: var(--beta-accent-text); font-weight: 800; font-size: 18px;
}
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bl-card { gap: 8px; font-size: 15px; }
.bl-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bl-platform { flex-direction: row; align-items: center; gap: 16px; font-size: 15px; }
.bl-platform p { margin-top: 4px; }
.bl-platform-icon { width: 44px; height: 44px; flex: 0 0 auto; }
.bl-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.bl-tier { gap: 8px; font-size: 15px; }
.bl-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bl-tier a.beta-badge { color: var(--t-text); text-decoration: none; }
.bl-tier a.beta-badge:hover { text-decoration: underline; }
.bl-tier ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bl-cta { align-items: center; text-align: center; }
.bl-cta .beta-choices { width: 100%; }
.bl-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 14px; padding-bottom: 12px; }
@media (max-width: 800px) {
    .beta-landing { gap: 36px; }
    .bl-hero { grid-template-columns: 1fr; padding-top: 0; }
    .bl-title { font-size: 34px; }
    .bl-tagline { font-size: 19px; }
    .bl-steps, .bl-platforms { grid-template-columns: 1fr; }
}

/* ---------- area tabs (Filters, Events): one sidebar entry, a page per tab ---------- */
.beta-tabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--beta-line); overflow-x: auto; scrollbar-width: thin; }
body.beta .beta-tab {
    padding: 10px 14px; margin-bottom: -1px; white-space: nowrap; font-size: 15px; font-weight: 600;
    color: var(--t-text); text-decoration: none; border-bottom: 3px solid transparent;
}
body.beta .beta-tab:hover { background: var(--t-bg-selected); text-decoration: none; }
body.beta .beta-tab.is-active { border-bottom-color: var(--beta-accent); font-weight: 800; }
@media (max-width: 600px) {
    .beta-tabs { gap: 0; overflow-x: visible; }
    body.beta .beta-tab { flex: 1 1 0; min-width: 0; padding: 10px 6px; white-space: normal; text-align: center; font-size: 14px; }
}

/* ---------- Try a message (Filters) ---------- */
.beta-preview { gap: 10px; }
.beta-preview-result { padding-top: 10px; border-top: 1px solid var(--beta-line); font-size: 15px; display: flex; flex-direction: column; gap: 8px; }
.beta-preview-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.beta-preview-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .beta-preview .beta-try-row input { flex-basis: 100%; }
}
.beta-alert-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 6px 0 4px; }
.beta-alert-preview .beta-preview-line { font-size: 15px; }

/* ---------- language menu ---------- */
.beta-lang .beta-menu-btn { max-width: 140px; }
.beta-lang-panel { width: 200px; }
.beta-lang-panel .is-current { font-weight: 800; }
.beta-lang-short { display: none; text-transform: uppercase; }
@media (max-width: 600px) {
    .beta-lang-long { display: none; }
    .beta-lang-short { display: inline; }
    .beta-lang .beta-menu-btn { padding: 8px 10px; }
}
/* on a phone the language moves into the account menu: the bar has no room */
.beta-menu-langs { display: none; }
.beta-menu-langs .is-current { font-weight: 800; }
@media (max-width: 600px) {
    .beta-lang { display: none; }
    .beta-menu-langs { display: block; }
}
.beta-me-foot { margin: 24px 0 0; font-size: 14px; }