:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #121620;
  --panel-2: #181e2a;
  --line: #293142;
  --text: #f4f6fb;
  --muted: #929bad;
  --accent: #ff4668;
  --accent-2: #ff9d4d;
  --good: #4de2a8;
  --warn: #ffbd59;
  --bad: #ff5d67;
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

/* Synology-persisted BIGO QR login */
.bigo-session-card { width: min(440px, calc(100vw - 32px)); }
.bigo-qr-wrap { display: grid; justify-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: #121722; text-align: center; }
.bigo-qr-wrap span { color: #5d687a; font-size: 13px; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 8% 0%, #24111a 0, transparent 30rem), var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { height: 68px; padding: 0 28px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(9,11,16,.86); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.dashboard-topbar { gap:0; padding:0 0 0 24px; }
.dashboard-topbar .brand { flex:0 0 auto; }
.topbar-brand-group { display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.top-host-identity { min-width:220px; margin-left:auto; padding:0 22px; display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; overflow:hidden; }
.top-host-identity strong { flex:0 0 auto; font-size:16px; }
.top-host-identity span { min-width:0; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.top-account-actions { align-self:stretch; display:flex; border-left:1px solid var(--line); }
.top-account-button { min-width:102px; padding:0 16px; border:0; border-right:1px solid var(--line); background:rgba(14,18,26,.72); color:var(--muted); font-weight:800; }
.top-account-button span { margin-right:7px; color:#dce3ef; }
.top-account-button:hover { color:#fff; background:#171d28; }
.top-summary { margin-left:0; display:grid; grid-template-columns:repeat(4,minmax(115px,1fr)); align-self:stretch; }
.top-summary-item { min-width:115px; padding:0 18px; border-left:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; }
.top-summary-item span { color:var(--muted); font-size:11px; font-weight:700; }
.top-summary-item strong { font-size:15px; white-space:nowrap; }
.dashboard-shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 68px); }
.dashboard-sidebar { padding:24px 14px; border-right:1px solid var(--line); background:rgba(11,14,20,.8); }
.dashboard-sidebar nav { position:sticky; top:92px; }
.dashboard-sidebar nav { display:grid; gap:6px; }
.sidebar-link { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:800; }
.sidebar-link.active { color:#fff; background:linear-gradient(135deg,#ff466829,#ff9d4d16); box-shadow:inset 3px 0 0 var(--accent); }
.sidebar-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#2b303d; color:#fff; }
.sidebar-logout { width:100%; margin-top:18px; border:1px solid var(--line); background:transparent; cursor:pointer; font-family:inherit; text-align:left; }
.sidebar-logout:hover { color:#fff; border-color:#ff536277; background:#ff536215; }
.dashboard-content { min-width:0; }
.settings-placeholder { min-height:340px; padding:42px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.settings-placeholder h1 { margin:8px 0 12px; font-size:clamp(30px,4vw,46px); letter-spacing:-.04em; }
.settings-placeholder p { max-width:620px; margin:0; color:var(--muted); line-height:1.7; }
.settings-kicker { color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.08em; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 850; letter-spacing: .08em; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 0 30px #ff466844; }
.container { width: min(1420px, calc(100% - 40px)); margin: 32px auto 70px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(28px,4vw,48px); line-height: 1.05; letter-spacing: -.04em; }
.hero p { margin: 0; color: var(--muted); }
.panel { border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(24,30,42,.96),rgba(15,19,27,.96)); box-shadow: 0 20px 60px #0004; }
.add-form { padding: 18px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-bottom: 22px; }
input, select, textarea { width: 100%; color: var(--text); background: #0c1017; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #ff466822; }
.primary, .ghost, .danger { border: 0; border-radius: 12px; padding: 12px 16px; color: white; font-weight: 750; }
.primary { background: linear-gradient(135deg,var(--accent),#ff6b45); }
.ghost { background: #252c3a; }
.danger { background: #4a2028; color: #ffabb3; }
.admin-menu { display:flex; align-items:center; gap:8px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:112px; padding:9px 12px; white-space:nowrap; }
.theme-toggle [data-theme-icon] { font-size:16px; line-height:1; }
.theme-toggle-login { position:fixed; top:18px; right:18px; z-index:2; }
.host-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.host-card { padding: 18px 20px; min-width: 0; display:grid; grid-template-columns:minmax(210px,1fr) minmax(290px,1.2fr) minmax(210px,1fr) minmax(330px,1.35fr); grid-template-areas:"head metrics topic actions" "credentials credentials credentials actions"; gap:14px 20px; align-items:center; }
.host-head { grid-area:head; display:flex; gap:14px; align-items:center; min-width:0; }
.avatar { width: 56px; height: 56px; flex:0 0 56px; border-radius: 50%; background:#252c3a; object-fit:cover; }
.host-name { min-width:0; flex:1; }
.host-name h3 { margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.host-name small { color:var(--muted); }
.badge { font-size:12px; border-radius:999px; padding:5px 9px; font-weight:800; background:#303746; color:#cbd2de; }
.badge.collecting,.badge.online { background:#16382f; color:var(--good); }
.badge.parking { background:#3a2d14; color:var(--warn); }
.badge.error,.badge.reconnecting { background:#472129; color:#ff9aa3; }
.host-metrics { grid-area:metrics; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.metric { padding:11px; border-radius:12px; background:#0c1017; }
.metric span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.metric strong { font-size:15px; }
.host-topic { grid-area:topic; color:var(--muted); min-width:0; min-height:56px; padding:7px 20px; border-left:1px solid var(--line); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.host-topic small { display:inline-block; margin-top:4px; }
.host-actions { grid-area:actions; display:grid; grid-template-columns:repeat(3,minmax(88px,1fr)); gap:8px; margin:0; align-self:stretch; align-content:center; }
.host-actions button,.host-actions a { min-width:0; text-align:center; text-decoration:none; font-size:12px; padding:10px 8px; border-radius:9px; border:0; background:#252c3a; color:white; white-space:nowrap; }
.host-actions a { background:#343d50; font-weight:750; }
.host-credentials { grid-area:credentials; display:grid; grid-template-columns:auto minmax(150px,1fr) minmax(190px,1fr) auto; gap:8px; align-items:center; padding-top:12px; border-top:1px solid var(--line); }
.host-credentials span { color:var(--muted); font-size:12px; font-weight:750; white-space:nowrap; }
.host-credentials input { padding:10px 12px; border-radius:9px; font-size:12px; }
.host-credentials button { padding:10px 13px; border-radius:9px; font-size:12px; white-space:nowrap; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); padding:30px; }
.login-card h1 { margin:18px 0 8px; }
.login-card p { color:var(--muted); margin:0 0 22px; }
.stack { display:grid; gap:12px; }
.error { color:#ff9aa3; font-size:13px; min-height:20px; }
.hidden { display:none !important; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr); gap:18px; }
.dashboard-hero { display:none; }
.host-inline { min-width:0; display:flex; align-items:baseline; gap:16px; white-space:nowrap; }
.host-inline h1 { flex:0 0 auto; margin:0; }
.host-inline p { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.broadcast-picker { min-width:0; display:grid; grid-template-columns:auto minmax(260px,1fr); gap:10px; align-items:center; }
.broadcast-picker span { color:var(--muted); font-size:12px; font-weight:750; white-space:nowrap; }
.viewer-panel { min-width:0; overflow:hidden; display:flex; flex-direction:column; }
.profile-settings { width:min(760px,100%); margin:0 auto; overflow:hidden; }
.profile-heading { padding:34px 38px 24px; border-bottom:1px solid var(--line); }
.profile-heading h1 { margin:7px 0 8px; font-size:34px; letter-spacing:-.04em; }
.profile-heading p { margin:0; color:var(--muted); }
.profile-form { padding:30px 38px 38px; display:grid; gap:18px; }
.profile-form label { display:grid; gap:8px; color:#dce3ef; font-size:13px; font-weight:800; }
.profile-form label small { color:var(--muted); font-size:11px; font-weight:500; }
.profile-message { min-height:20px; margin:0; color:#ff9aa3; font-size:13px; }
.profile-message.success { color:var(--good); }
.profile-actions { display:flex; gap:10px; justify-content:flex-end; }
.profile-actions button { min-width:126px; }
.container.dashboard-content { width:calc(100% - 36px); max-width:none; margin:32px 18px 70px; }
.dashboard-columns { width:100%; height:min(74vh,620px); display:grid; grid-template-columns:minmax(340px,440px) minmax(440px,1fr) minmax(300px,400px); grid-template-rows:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.dashboard-columns > .panel { height:100%; }
.dashboard-columns > .viewer-panel { grid-column:1; grid-row:1 / 3; }
.dashboard-columns > .chat-panel { grid-column:2; grid-row:1; }
.dashboard-columns > .gift-panel { grid-column:2; grid-row:2; }
.dashboard-columns > .ongoing-events-panel { grid-column:3; grid-row:1 / 3; min-width:0; overflow:hidden; }
.dashboard-columns .events { height:calc(100% - 61px); max-height:none; }
.dashboard-columns .chat-panel .events { height:calc(100% - 119px); }
.dashboard-columns .viewer-list { flex:1 1 auto; min-height:0; max-height:none; }
.ongoing-events { height:calc(100% - 61px); overflow:auto; }
.ongoing-events .empty { min-height:180px; display:grid; place-items:center; padding:24px; color:var(--muted); text-align:center; }
.ongoing-event-actions { display:flex; align-items:center; gap:7px; }
.ongoing-event-actions button { padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:#242b38; color:var(--text); font-family:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.ongoing-event-actions button:hover { border-color:#8db8ff; }
.ongoing-event-actions button:disabled { cursor:wait; opacity:.55; }
#ongoing-event-countdown { min-width:26px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; text-align:right; }
.ongoing-event { display:grid; grid-template-columns:1fr auto; gap:8px 14px; padding:18px 20px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; transition:background .15s ease; }
.ongoing-event:hover { background:rgba(77,220,165,.07); }
.ongoing-event strong { grid-column:1 / 3; font-size:15px; line-height:1.45; }
.ongoing-event-state { display:flex; align-items:center; gap:7px; color:var(--good); font-size:12px; font-weight:850; }
.ongoing-event-state i { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 10px color-mix(in srgb,var(--good) 65%,transparent); }
.ongoing-event-toggle { justify-self:end; padding:4px 8px; border:1px solid var(--line); border-radius:7px; background:#242b38; color:var(--muted); font-family:inherit; font-size:10px; font-weight:750; cursor:pointer; }
.ongoing-event-toggle:hover { border-color:#8db8ff; color:var(--text); }
.ongoing-event.is-collapsed .event-my-rankings { display:none; }
.ongoing-event-period { color:var(--muted); font-size:12px; }
.ongoing-event-open { padding:0; border:0; background:transparent; color:#8db8ff; font-family:inherit; font-size:12px; font-weight:750; text-align:right; cursor:pointer; }
.ongoing-event-open:hover { color:#bdd6ff; text-decoration:underline; }
.event-my-rankings { grid-column:1 / 3; display:grid; gap:10px; margin-top:4px; }
.event-ranking-loading,.event-ranking-empty { padding:12px; border-radius:10px; background:rgba(7,11,17,.55); color:var(--muted); font-size:11px; text-align:center; }
.event-ranking-module { overflow:hidden; border:1px solid var(--line); border-radius:11px; background:rgba(7,11,17,.42); }
.event-ranking-title { display:flex; justify-content:space-between; gap:10px; padding:9px 10px; border-bottom:1px solid var(--line); }
.event-ranking-title strong { grid-column:auto; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.event-ranking-title span { flex:0 0 auto; color:var(--good); font-size:11px; font-weight:800; }
.event-ranking-rows { display:grid; }
.event-ranking-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px 10px; border-top:1px solid rgba(255,255,255,.05); font-size:11px; }
.event-ranking-row:first-child { border-top:0; }
.event-ranking-row.is-me { background:rgba(77,220,165,.12); box-shadow:inset 3px 0 0 var(--good); }
.event-ranking-row b { color:#9bbcff; }
.event-ranking-row span { overflow:hidden; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.event-ranking-row em { color:var(--muted); font-style:normal; font-variant-numeric:tabular-nums; }
.stream { overflow:hidden; }
.panel-title { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.panel-title h2 { font-size:16px; margin:0; }
.chat-panel-actions { display:flex; align-items:center; gap:7px; }
.chat-panel-actions button { padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:#242b38; color:#dce3ef; font-family:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.chat-panel-actions button:hover { border-color:#8db8ff; background:#2c3545; }
:root[data-theme="light"] .chat-panel-actions button { background:#e9edf4; color:#283244; }
.chat-send-form { height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 12px; border-top:1px solid var(--line); background:rgba(8,11,17,.72); }
.chat-send-form input { min-width:0; height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:#0c1119; color:var(--text); font-family:inherit; }
.chat-send-form input:focus { border-color:#6ea8ff; box-shadow:0 0 0 3px rgba(110,168,255,.12); }
.chat-send-form button { height:38px; padding:0 16px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-family:inherit; font-weight:800; cursor:pointer; }
.chat-send-form button:disabled,.chat-send-form input:disabled { cursor:not-allowed; opacity:.55; }
.chat-send-form #chat-send-status { position:absolute; left:-9999px; }
:root[data-theme="light"] .chat-send-form { background:#f8fafc; }
:root[data-theme="light"] .chat-send-form input { background:#fff; }
.event-tabs { display:flex; gap:7px; }
.event-tabs button { background:#242b38; color:var(--muted); border:0; border-radius:8px; padding:7px 11px; }
.event-tabs button.active { background:#fff; color:#111; }
.events { max-height:680px; overflow:auto; }
.event { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; padding:15px 20px; border-bottom:1px solid #222936; }
.event-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#242b38; }
.event.gift .event-icon { background:#432537; color:#ff9cbc; }
.event strong { font-size:14px; }
.event p { margin:5px 0 0; color:#d8dde7; word-break:break-word; }
.event p.chat-translation { display:flex; gap:7px; align-items:flex-start; color:#9eb6df; font-size:13px; }
.chat-translation span { flex:0 0 auto; padding:2px 6px; border-radius:6px; background:#24344d; color:#b9d2ff; font-size:10px; font-weight:800; }
.event.chat { cursor:pointer; }
.tts-chat-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:9px; }
.tts-chat-actions[hidden] { display:none; }
.tts-chat-actions button { height:28px; padding:4px 9px; border:0; border-radius:999px; background:#293142; color:#dce3ef; font-size:11px; font-weight:750; }
.tts-chat-actions button[data-tts-action="exclude"] { color:#fecdd3; background:rgba(251,113,133,.12); }
.tts-chat-action-status { color:var(--muted); font-size:11px; }
.event small { color:var(--muted); }
.dashboard-columns .event { grid-template-columns:minmax(0,1fr) 90px; gap:8px; padding:8px 16px; align-items:start; }
.dashboard-columns .event-icon { display:none; }
.dashboard-columns .event > small { padding-top:2px; text-align:right; white-space:nowrap; }
.dashboard-columns .event-body { min-width:0; display:grid; align-items:start; column-gap:12px; }
.dashboard-columns .event-body strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-columns .event-body p { min-width:0; margin:0; overflow-wrap:anywhere; }
.dashboard-columns .event.chat .event-body { grid-template-columns:140px minmax(0,1fr); }
.dashboard-columns .event.chat .chat-translation { grid-column:2; }
.dashboard-columns .event.chat .tts-chat-actions { grid-column:1 / -1; }
.dashboard-columns .event.gift { padding-top:9px; padding-bottom:9px; }
.dashboard-columns .event.gift .event-body { grid-template-columns:minmax(115px,145px) minmax(100px,135px) minmax(0,1fr); align-items:center; }
.dashboard-columns .event.gift .gift-meta { margin-top:0; }
.gift-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gift-meta span { padding:4px 7px; border-radius:7px; background:#242b38; color:#cfd5df; font-size:11px; font-weight:700; }
.gift-meta .train { background:#3b3015; color:#ffd27a; }
.gift-meta .return { background:#17372f; color:#84e5c0; }
.gift-meta .inventory { background:#2e2444; color:#c9afff; }
.gift-meta .instant { background:#23364a; color:#9fd4ff; }
.side-stack { display:grid; gap:18px; align-content:start; }
.summary { padding:20px; }
.summary-line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.summary-line:last-child { border:0; }
.summary-line span { color:var(--muted); }
.summary-strip { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); padding:0; margin-bottom:18px; overflow-x:auto; }
.summary-strip .summary-line { min-width:150px; align-items:center; padding:18px 22px; border-bottom:0; border-right:1px solid var(--line); }
.summary-strip .summary-line:last-child { border-right:0; }
.viewer-list { max-height:460px; overflow:auto; }
.viewer-entry-alerts { flex:0 0 auto; display:grid; gap:6px; padding:0 10px; background:#0d121b; }
.viewer-entry-alerts:empty { display:none; }
.viewer-entry-alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; margin-top:8px; padding:9px 11px; border:1px solid #24483f; border-radius:10px; background:#10251f; color:#b8f3dd; }
.viewer-entry-alert:last-child { margin-bottom:8px; }
.viewer-entry-alert div { min-width:0; display:grid; gap:2px; }
.viewer-entry-alert small { color:#72cdb0; font-size:10px; }
.viewer-entry-alert strong { overflow:hidden; color:#eafff8; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.viewer-entry-alert > span:last-child { color:#93d9c3; font-size:11px; white-space:nowrap; }
.viewer-entry-dot { color:#47d9a8; font-size:9px; }
.viewer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px 18px; border-bottom:1px solid #222936; cursor:default; outline:none; }
.viewer:hover,.viewer:focus { background:#1b2230; box-shadow:inset 3px 0 0 var(--accent); }
.viewer-main { min-width:0; display:flex; align-items:center; }
.viewer-main strong { width:100%; min-width:0; display:inline-flex; align-items:center; overflow-wrap:anywhere; }
.viewer-rank-stack { width:32px; flex:0 0 32px; margin-right:3px; display:inline-grid; grid-template-rows:1fr 1fr; align-items:center; color:#cdd7ff; font-size:.5em; font-weight:800; line-height:1; }
.viewer-rank-stack sup,.viewer-rank-stack sub { display:block; min-height:.8em; position:static; overflow:hidden; text-overflow:clip; white-space:nowrap; }
.viewer-rank-stack sup { grid-row:1; align-self:end; }
.viewer-rank-stack sub { grid-row:2; align-self:start; }
.viewer-nickname { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-meta-stack { max-width:145px; flex:0 1 auto; margin-left:6px; display:inline-grid; grid-template-rows:1fr 1fr; align-items:center; color:#9eb6df; font-size:.55em; font-weight:650; line-height:1; }
.viewer-meta-stack sup,.viewer-meta-stack sub { display:block; min-height:.8em; position:static; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-meta-stack sup { grid-row:1; align-self:end; }
.viewer-meta-stack sub { grid-row:2; align-self:start; color:#8e9bb0; }
.viewer small { display:inline; color:var(--muted); margin:0; }
.viewer-stats { display:flex; align-items:flex-end; flex-direction:column; gap:5px; }
.viewer-stats small { color:#8e9bb0; font-size:10px; white-space:nowrap; }
.viewer.offline { opacity:.42; }
.viewer-tooltip { position:fixed; z-index:45; width:min(660px,calc(100vw - 16px)); max-height:min(620px,calc(100vh - 16px)); overflow:auto; padding:18px; border:1px solid #39445a; border-radius:16px; background:#111722; box-shadow:0 22px 70px #000b; pointer-events:auto; overscroll-behavior:contain; }
.viewer-tooltip[hidden] { display:none; }
.viewer-tooltip-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.viewer-tooltip-head strong { font-size:15px; }
.viewer-tooltip-head small { color:var(--muted); font-size:11px; white-space:nowrap; }
.viewer-tooltip-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.viewer-tooltip-totals div { padding:11px; border-radius:10px; background:#0b0f16; }
.viewer-tooltip-totals span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; }
.viewer-tooltip-totals strong { font-size:14px; }
.viewer-tooltip-section { padding-top:11px; border-top:1px solid var(--line); }
.viewer-tooltip-section + .viewer-tooltip-section { margin-top:11px; }
.viewer-tooltip-section h3 { margin:0 0 7px; color:#cdd5e4; font-size:12px; }
.viewer-gift-table-wrap { max-width:100%; overflow-x:auto; border:1px solid #273044; border-radius:10px; }
.viewer-gift-table { width:100%; min-width:570px; border-collapse:collapse; font-size:12px; }
.viewer-gift-table th,.viewer-gift-table td { padding:9px 10px; border-bottom:1px solid #252d3d; text-align:right; white-space:nowrap; }
.viewer-gift-table th { color:#93a1b8; background:#0b0f16; font-size:11px; font-weight:600; }
.viewer-gift-table th:first-child,.viewer-gift-table td:first-child { width:38%; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.viewer-gift-table tbody tr:last-child td { border-bottom:0; }
.viewer-gift-table tbody tr:hover { background:#18202d; }
.viewer-gift-table .viewer-inventory-row { background:#151225; color:#c9afff; }
.viewer-gift-table .viewer-inventory-row td:first-child { padding-left:24px; }
.viewer-gift-table .viewer-inventory-row span { color:#eadfff; font-weight:700; }
.viewer-gift-table .viewer-inventory-row td:not(:first-child) { color:#ad9fc9; }
.viewer-gift-table .viewer-instant-row { background:#102033; color:#9ed0ff; }
.viewer-gift-table .viewer-instant-row td:first-child { padding-left:24px; }
.viewer-gift-table .viewer-instant-row span { color:#d8edff; font-weight:700; }
.viewer-gift-table .viewer-instant-row td:not(:first-child) { color:#8bb4d8; }
.viewer-tooltip-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 0; font-size:12px; }
.viewer-tooltip-row span { min-width:0; color:#dce1ea; overflow-wrap:anywhere; }
.viewer-tooltip-row strong { flex:0 0 auto; color:#fff; }
.viewer-tooltip-empty { margin:0; padding:5px 0; color:var(--muted); font-size:12px; }
.command-settings { padding:30px; }
.command-list-heading p { margin:0; color:var(--muted); }
.command-account-settings { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(320px,1.25fr); gap:12px 18px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.command-account-settings h2 { margin:0 0 6px; font-size:16px; }
.command-account-settings p { margin:0; color:var(--muted); font-size:12px; }
.command-account-settings form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.command-account-settings form button { min-width:86px; }
.command-account-settings > #chat-nickname-message { grid-column:2; min-height:18px; color:#ff8799; }
.command-account-settings > #chat-nickname-message.success { color:#54d9aa; }
.command-form { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(360px,1.35fr); gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.command-form label { display:grid; align-content:start; gap:8px; color:#b8c2d2; font-size:12px; font-weight:800; }
.command-form label > small { color:var(--muted); font-weight:500; }
.command-input-wrap { display:grid; grid-template-columns:42px minmax(0,1fr); overflow:hidden; border:1px solid #2a3446; border-radius:11px; background:#0d121a; }
.command-input-wrap:focus-within { border-color:#6ea8ff; box-shadow:0 0 0 3px rgba(110,168,255,.12); }
.command-input-wrap b { display:grid; place-items:center; border-right:1px solid #2a3446; color:#fff; font-size:18px; }
.command-input-wrap input { border:0; border-radius:0; background:transparent; box-shadow:none; }
.command-form textarea { min-height:92px; resize:vertical; }
.command-form-actions { grid-column:1 / -1; display:flex; align-items:center; gap:14px; }
.command-form-actions button { min-width:130px; }
.command-form-actions p { margin:0; color:#ff8799; font-size:13px; }
.command-list-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 0 14px; }
.command-list-heading h2 { margin:0 0 6px; font-size:17px; }
.command-list { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.command-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:15px 17px; border-bottom:1px solid var(--line); }
.command-row:last-child { border-bottom:0; }
.command-row strong { color:#9fc4ff; }
.command-row p { margin:5px 0 0; color:#d6dce7; font-size:13px; overflow-wrap:anywhere; }
.command-row button { padding:7px 10px; border:0; border-radius:8px; background:rgba(251,113,133,.12); color:#ff9aaa; font-weight:750; cursor:pointer; }
.command-row-actions { display:flex; gap:7px; }
.command-row button.command-edit { background:rgba(110,168,255,.14); color:#a9cbff; }
.command-row button:disabled { opacity:.55; }
.tts-settings { padding:30px; }
.tts-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.tts-heading h1 { margin:7px 0 8px; font-size:34px; letter-spacing:-.04em; }
.tts-heading p { margin:0; color:var(--muted); }
.tts-state { display:flex; align-items:center; gap:10px; }
.tts-state .badge { min-width:58px; text-align:center; }
.tts-form-grid { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr); gap:18px; padding:24px 0 0; align-items:start; }
.tts-settings-card { display:grid; gap:18px; padding:20px; border:1px solid #252e3e; border-radius:16px; background:#0d121a; }
.tts-settings-card > h2 { margin:0; color:#dfe7f4; font-size:14px; }
.tts-audience-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tts-audience-options label { display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 13px; border:1px solid #2a3446; border-radius:11px; background:#111722; color:#cbd4e3; font-size:13px; font-weight:750; cursor:pointer; }
.tts-audience-options label:has(input:checked) { border-color:#ff5362; background:#2b1920; color:#fff; box-shadow:0 0 0 1px #ff536244 inset; }
.tts-audience-options input { width:17px; height:17px; margin:0; accent-color:#ff5362; }
.tts-control { display:grid; align-content:start; gap:8px; padding:17px; border:1px solid #252e3e; border-radius:14px; background:#0d121a; }
.tts-control > span { color:#b8c2d2; font-size:12px; font-weight:800; }
.tts-control > span strong { float:right; color:#fff; }
.tts-control small { color:var(--muted); font-size:11px; line-height:1.45; }
.tts-target-panel .tts-audience-control { padding:0; border:0; border-radius:0; background:transparent; }
.tts-audience-control textarea { min-height:150px; resize:vertical; }
.tts-audio-panel .tts-control { padding:0 0 17px; border:0; border-bottom:1px solid #242d3d; border-radius:0; background:transparent; }
.tts-audio-panel .tts-control:last-child { padding-bottom:0; border-bottom:0; }
.tts-preview > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.empty { padding:50px 20px; text-align:center; color:var(--muted); }
.toast { position:fixed; right:20px; bottom:20px; background:#fff; color:#111; padding:12px 16px; border-radius:11px; box-shadow:0 12px 40px #0008; z-index:30; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:#03050acc; backdrop-filter:blur(8px); }
.modal-card { width:min(470px,100%); padding:24px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.modal-head h2 { margin:0 0 8px; font-size:22px; }
.modal-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.modal-close { border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; padding:0 4px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.tts-start-card { width:min(420px,100%); padding:32px; text-align:center; }
.tts-start-card h2 { margin:14px 0 8px; font-size:24px; }
.tts-start-card > p { margin:0; color:var(--muted); line-height:1.6; }
.tts-start-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto; border-radius:18px; background:linear-gradient(135deg,#ff3e69,#ff7a58); color:white; font-size:28px; box-shadow:0 12px 30px #ff45673d; }
.tts-start-card #tts-start-confirm { width:100%; margin-top:24px; min-height:48px; font-size:16px; }
.tts-start-card .tts-start-message { min-height:20px; margin-top:10px; color:#ff7890; font-size:13px; }

:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f4f6fa;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --line:#dce2eb;
  --text:#18202d;
  --muted:#687386;
  --good:#16865f;
  --warn:#a96a00;
  --bad:#d63d4c;
}
:root[data-theme="light"] body { background:radial-gradient(circle at 8% 0%,#ffe9ee 0,transparent 30rem),var(--bg); }
:root[data-theme="light"] .topbar { background:rgba(255,255,255,.9); box-shadow:0 5px 24px #26344d0b; }
:root[data-theme="light"] .dashboard-sidebar { background:rgba(255,255,255,.82); }
:root[data-theme="light"] .top-account-button { background:rgba(255,255,255,.72); color:#647084; }
:root[data-theme="light"] .top-account-button span { color:#3f4a5c; }
:root[data-theme="light"] .top-account-button:hover { color:#111827; background:#f3f5f9; }
:root[data-theme="light"] .sidebar-link.active { color:#202938; background:linear-gradient(135deg,#ff46681c,#ff9d4d12); }
:root[data-theme="light"] .sidebar-icon { background:#e8edf5; color:#344054; }
:root[data-theme="light"] .panel { background:linear-gradient(145deg,#fff,#f8faff); box-shadow:0 18px 48px #26344d12; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { color:var(--text); background:#fff; }
:root[data-theme="light"] .ghost { background:#e9edf4; color:#283244; }
:root[data-theme="light"] .danger { background:#ffe7ea; color:#c73345; }
:root[data-theme="light"] .avatar { background:#e8edf4; }
:root[data-theme="light"] .badge { background:#e8edf4; color:#526073; }
:root[data-theme="light"] .badge.collecting,
:root[data-theme="light"] .badge.online { background:#dcf7ed; }
:root[data-theme="light"] .badge.parking { background:#fff1d7; }
:root[data-theme="light"] .badge.error,
:root[data-theme="light"] .badge.reconnecting { background:#ffe2e6; color:#c33747; }
:root[data-theme="light"] .metric { background:#f1f4f8; }
:root[data-theme="light"] .host-actions button { background:#e9edf4; color:#283244; }
:root[data-theme="light"] .host-actions a { background:#dfe6f0; color:#283244; }
:root[data-theme="light"] .event-tabs button,
:root[data-theme="light"] .event-icon { background:#e9edf4; }
:root[data-theme="light"] .event-tabs button.active { background:#283244; color:#fff; }
:root[data-theme="light"] .event { border-bottom-color:var(--line); }
:root[data-theme="light"] .event.gift .event-icon { background:#ffe4ef; color:#bd3e70; }
:root[data-theme="light"] .event p { color:#354052; }
:root[data-theme="light"] .event p.chat-translation { color:#406396; }
:root[data-theme="light"] .chat-translation span { background:#e3edfb; color:#315886; }
:root[data-theme="light"] .tts-chat-actions button { background:#e8edf4; color:#354052; }
:root[data-theme="light"] .gift-meta span { background:#e9edf4; color:#526073; }
:root[data-theme="light"] .gift-meta .train { background:#fff1cb; color:#825600; }
:root[data-theme="light"] .gift-meta .return { background:#dff7ee; color:#147557; }
:root[data-theme="light"] .gift-meta .inventory { background:#eee7fb; color:#65439a; }
:root[data-theme="light"] .gift-meta .instant { background:#e1effc; color:#346b99; }
:root[data-theme="light"] .viewer-entry-alerts { background:#f7f9fc; }
:root[data-theme="light"] .viewer-entry-alert { border-color:#b8e2d4; background:#e8f8f2; color:#216c56; }
:root[data-theme="light"] .viewer-entry-alert small,
:root[data-theme="light"] .viewer-entry-alert > span:last-child { color:#397e69; }
:root[data-theme="light"] .viewer-entry-alert strong { color:#174f3e; }
:root[data-theme="light"] .viewer { border-bottom-color:var(--line); }
:root[data-theme="light"] .viewer:hover,
:root[data-theme="light"] .viewer:focus { background:#f0f4f9; }
:root[data-theme="light"] .viewer-rank-stack { color:#4e6091; }
:root[data-theme="light"] .viewer-meta-stack { color:#406396; }
:root[data-theme="light"] .viewer-meta-stack sub { color:#6d7788; }
:root[data-theme="light"] .viewer-stats small { color:#6e7a8d; }
:root[data-theme="light"] .viewer-tooltip { border-color:#cfd7e4; background:#fff; box-shadow:0 22px 70px #26344d2b; }
:root[data-theme="light"] .viewer-tooltip-totals div,
:root[data-theme="light"] .viewer-gift-table th { background:#f2f5f9; }
:root[data-theme="light"] .viewer-tooltip-section h3,
:root[data-theme="light"] .viewer-tooltip-row span { color:#354052; }
:root[data-theme="light"] .viewer-tooltip-row strong { color:#18202d; }
:root[data-theme="light"] .viewer-gift-table-wrap { border-color:#d7deea; }
:root[data-theme="light"] .viewer-gift-table th,
:root[data-theme="light"] .viewer-gift-table td { border-bottom-color:#e0e5ed; }
:root[data-theme="light"] .viewer-gift-table tbody tr:hover { background:#f1f4f8; }
:root[data-theme="light"] .viewer-gift-table .viewer-inventory-row { background:#f3eefb; color:#65439a; }
:root[data-theme="light"] .viewer-gift-table .viewer-inventory-row span { color:#57348f; }
:root[data-theme="light"] .viewer-gift-table .viewer-inventory-row td:not(:first-child) { color:#78679a; }
:root[data-theme="light"] .viewer-gift-table .viewer-instant-row { background:#eaf5ff; color:#346b99; }
:root[data-theme="light"] .viewer-gift-table .viewer-instant-row span { color:#285d89; }
:root[data-theme="light"] .viewer-gift-table .viewer-instant-row td:not(:first-child) { color:#4c7191; }
:root[data-theme="light"] .command-form label { color:#526073; }
:root[data-theme="light"] .command-input-wrap { border-color:#d7deea; background:#fff; }
:root[data-theme="light"] .command-input-wrap b { border-right-color:#d7deea; color:#18202d; }
:root[data-theme="light"] .command-row p { color:#3d485a; }
:root[data-theme="light"] .tts-settings-card { border-color:#d8e0eb; background:#fff; }
:root[data-theme="light"] .tts-settings-card > h2 { color:#283244; }
:root[data-theme="light"] .tts-audience-options label { border-color:#d7deea; background:#f7f9fc; color:#3d485a; }
:root[data-theme="light"] .tts-audience-options label:has(input:checked) { border-color:#ff5362; background:#fff0f2; color:#9f2635; }
:root[data-theme="light"] .tts-control > span { color:#526073; }
:root[data-theme="light"] .tts-audio-panel .tts-control { border-bottom-color:#e0e5ed; }
:root[data-theme="light"] .modal-backdrop { background:#26344d66; }
:root[data-theme="light"] .toast { background:#202938; color:#fff; }
@media(max-width:1180px){.host-card{grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);grid-template-areas:"head metrics" "topic actions" "credentials credentials"}.host-topic{border-left:0;border-top:1px solid var(--line);padding:15px 0 0}}
@media(max-width:1050px){.dashboard-hero{grid-template-columns:1fr}}
@media(max-width:1200px){.top-host-identity{display:none}.top-account-button{min-width:88px;padding:0 12px}.top-summary{grid-template-columns:repeat(4,minmax(95px,1fr))}.top-summary-item{min-width:95px;padding:0 12px}}
@media(min-width:951px) and (max-width:1500px){.dashboard-columns{height:auto;grid-template-columns:minmax(270px,.75fr) minmax(390px,1.25fr);grid-template-rows:335px 268px 260px}.dashboard-columns>.ongoing-events-panel{grid-column:1 / 3;grid-row:3}}
@media(max-width:950px){.dashboard-topbar{align-items:stretch;flex-direction:column;padding:12px 16px;display:flex;height:auto}.topbar-brand-group{justify-content:space-between}.top-account-actions{order:2;align-self:auto;border:1px solid var(--line);border-radius:10px;overflow:hidden}.top-account-button{height:42px;flex:1}.top-summary{order:3;width:100%;margin:0;align-self:auto}.top-summary-item{align-items:flex-start;border-left:0;border-top:1px solid var(--line);padding:10px 8px}.dashboard-shell{grid-template-columns:1fr}.dashboard-sidebar{padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}.dashboard-sidebar nav{position:static;display:flex;width:max-content}.sidebar-link{width:max-content}.dashboard-content{margin-top:22px}}
@media(max-width:850px){.dashboard-grid,.dashboard-columns,.tts-form-grid{grid-template-columns:1fr}.tts-heading{flex-direction:column}.dashboard-columns{height:auto;grid-template-rows:none}.dashboard-columns>.viewer-panel,.dashboard-columns>.chat-panel,.dashboard-columns>.gift-panel,.dashboard-columns>.ongoing-events-panel{grid-column:1;grid-row:auto}.dashboard-columns > .panel{height:560px}.dashboard-columns .event.chat .event-body,.dashboard-columns .event.gift .event-body{grid-template-columns:1fr}.dashboard-columns .event.chat .chat-translation,.dashboard-columns .event.chat .tts-chat-actions{grid-column:1}.add-form{grid-template-columns:1fr}.hero{align-items:start;flex-direction:column}.host-inline{width:100%;align-items:flex-start;flex-direction:column;gap:7px;white-space:normal}.broadcast-picker{width:100%;grid-template-columns:1fr}.container{width:min(100% - 24px,1420px)}.container.dashboard-content{width:calc(100% - 24px);margin:22px auto 70px}.topbar{height:auto;min-height:68px;padding:10px 14px;gap:10px}.brand{font-size:14px;letter-spacing:.03em}.admin-menu{gap:6px}.admin-menu button{padding:9px 10px;font-size:12px}.event{grid-template-columns:38px minmax(0,1fr)}.event>small{grid-column:2}.host-card{grid-template-columns:1fr;grid-template-areas:"head" "metrics" "topic" "credentials" "actions";gap:14px}.host-topic{min-height:0}.host-credentials{grid-template-columns:1fr}.host-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.top-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.top-summary-item:nth-child(even){border-left:1px solid var(--line)}}
@media(max-width:850px){.command-form{grid-template-columns:1fr}.command-form-actions{grid-column:1}}
@media(max-width:850px){.command-account-settings{grid-template-columns:1fr}.command-account-settings>#chat-nickname-message{grid-column:1}}