:root {
    --bg: #0d1117;
    --panel: #141a23;
    --panel-2: #192231;
    --line: rgba(255,255,255,.09);
    --text: #eef3fb;
    --muted: #9aa7b8;
    --brand: #18c6a7;
    --brand-2: #4f7cff;
    --warn: #ffb84d;
    --danger: #ff5d6c;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
.shell { min-height: 100vh; background:
    radial-gradient(circle at 20% 0%, rgba(24,198,167,.16), transparent 28rem),
    radial-gradient(circle at 85% 12%, rgba(79,124,255,.18), transparent 24rem),
    var(--bg);
}
.nav {
    height: 64px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(13,17,23,.72);
    position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px);
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 800; letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white; }
.nav-links { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line);
    color: var(--text); background: rgba(255,255,255,.04); padding: 10px 14px; border-radius: 8px;
    font-weight: 700; cursor: pointer; min-height: 40px;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.btn.primary { border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.btn.danger { background: rgba(255,93,108,.12); border-color: rgba(255,93,108,.28); color: #ff9aa4; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.wrap.admin-wrap { width: 100%; max-width: none; padding: 24px 28px 56px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 24px; align-items: stretch; min-height: 390px; }
.hero-stage { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #05070a; }
.hero-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.72)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='720'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%2318c6a7'/%3E%3Cstop offset='.55' stop-color='%234f7cff'/%3E%3Cstop offset='1' stop-color='%23ffb84d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='720' fill='%23060a10'/%3E%3Ccircle cx='240' cy='210' r='160' fill='url(%23g)' opacity='.42'/%3E%3Ccircle cx='820' cy='260' r='220' fill='%234f7cff' opacity='.22'/%3E%3Crect x='116' y='420' width='980' height='110' rx='12' fill='%23ffffff' opacity='.08'/%3E%3Crect x='150' y='452' width='310' height='18' rx='4' fill='%23ffffff' opacity='.34'/%3E%3Crect x='150' y='486' width='590' height='14' rx='4' fill='%23ffffff' opacity='.18'/%3E%3C/svg%3E") center/cover; }
.hero-copy { position: relative; padding: 34px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.eyebrow { color: var(--brand); font-weight: 800; font-size: 13px; text-transform: uppercase; }
h1 { font-size: 44px; line-height: 1.05; margin: 14px 0; letter-spacing: 0; }
.lead { color: #c7d2e4; font-size: 17px; line-height: 1.7; max-width: 680px; }
.panel { background: rgba(20,26,35,.86); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.stat { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.stat b { display: block; font-size: 24px; }
.stat span { color: var(--muted); font-size: 13px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 16px; }
.page-title { margin-top: 0; }
.page-title h1 { margin: 8px 0 6px; font-size: 34px; line-height: 1.15; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(20,26,35,.8); }
.thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(24,198,167,.25), rgba(79,124,255,.3)), #0b0f16; position: relative; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.live-dot { width: 7px; height: 7px; background: #ff4056; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,64,86,.18); }
.thumb .badge { position: absolute; left: 12px; top: 12px; }
.thumb .viewers { position: absolute; right: 12px; top: 12px; }
.card-body { padding: 14px; }
.meta { color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.room { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.room-stage { min-width: 0; }
.player { background: #000; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.watch-player {
    position: relative; aspect-ratio: 16 / 9; isolation: isolate; outline: none;
    background: #030507; box-shadow: 0 18px 54px rgba(0,0,0,.3); touch-action: manipulation;
}
.watch-player:focus-visible { box-shadow: 0 0 0 2px rgba(24,198,167,.58), 0 18px 54px rgba(0,0,0,.3); }
.watch-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.watch-topbar {
    position: absolute; left: 16px; right: 16px; top: 14px; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; pointer-events: none;
    color: rgba(255,255,255,.86); font-size: 12px; opacity: 0; transform: translateY(-5px);
    transition: opacity .2s ease, transform .2s ease;
}
.watch-player.controls-visible .watch-topbar,
.watch-player:not(.is-playing) .watch-topbar { opacity: 1; transform: translateY(0); }
.player-live-badge, .player-quality-badge {
    display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(7,10,14,.66);
    box-shadow: 0 6px 18px rgba(0,0,0,.18); backdrop-filter: blur(10px);
}
.player-quality-badge { color: rgba(255,255,255,.72); }
.player-center {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 13px; padding: 28px; text-align: center; pointer-events: none;
    color: #fff; background: rgba(3,5,7,.2); opacity: 0; transition: opacity .18s ease;
}
.watch-player.is-loading .player-center,
.watch-player.is-buffering .player-center,
.watch-player.is-paused .player-center,
.watch-player.is-blocked .player-center,
.watch-player.is-offline .player-center,
.watch-player.has-error .player-center { opacity: 1; }
.player-spinner {
    display: none; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.2);
    border-top-color: #35d6b8; border-radius: 50%; animation: player-spin .8s linear infinite;
}
.is-loading .player-spinner, .is-buffering .player-spinner { display: block; }
.player-center-action {
    width: 58px; height: 58px; padding: 0; display: grid; place-items: center; color: #fff;
    border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(8,12,18,.74);
    box-shadow: 0 12px 34px rgba(0,0,0,.35); cursor: pointer; pointer-events: auto;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.player-center-action[hidden] { display: none; }
.player-center-action:hover { transform: scale(1.06); background: rgba(24,198,167,.86); border-color: transparent; }
.player-center-action svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.player-center-action .center-play-icon { fill: currentColor; stroke: none; margin-left: 3px; }
.player-center-action .center-retry-icon { display: none; }
.player-center-action[data-action="retry"] .center-play-icon { display: none; }
.player-center-action[data-action="retry"] .center-retry-icon { display: block; }
.player-center-copy { display: grid; gap: 6px; max-width: 520px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.player-center-copy strong { font-size: 17px; }
.player-center-copy span { color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.5; }
.watch-player.is-paused .player-center { background: transparent; }
.watch-player.is-paused .player-center-copy { display: none; }
.watch-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 6px; min-height: 70px;
    padding: 28px 15px 12px; background: linear-gradient(180deg, transparent, rgba(3,5,8,.9));
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.watch-player.controls-visible .watch-controls,
.watch-player:not(.is-playing) .watch-controls,
.watch-controls:focus-within { opacity: 1; transform: translateY(0); pointer-events: auto; }
.watch-player.is-playing:not(.controls-visible) { cursor: none; }
.player-tool {
    flex: 0 0 38px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
    border: 0; border-radius: 7px; background: transparent; color: rgba(255,255,255,.9); cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.player-tool:hover, .player-tool:focus-visible { color: #fff; background: rgba(255,255,255,.12); outline: none; }
.player-tool.is-active { color: #35d6b8; background: rgba(53,214,184,.14); }
.player-tool[hidden] { display: none; }
.player-tool svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.player-tool .pause-icon, .player-tool .minimize-icon { display: none; }
.player-tool.is-playing .play-icon, .player-tool.is-fullscreen .maximize-icon { display: none; }
.player-tool.is-playing .pause-icon, .player-tool.is-fullscreen .minimize-icon { display: block; }
.player-tool .play-icon { fill: currentColor; stroke: none; margin-left: 2px; }
.player-tool.sound .sound-off { display: none; }
.player-tool.sound.muted .sound-on { display: none; }
.player-tool.sound.muted .sound-off { display: block; }
.sound-group {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 38px;
    padding-right: 6px; border-radius: 7px; background: rgba(0,0,0,.22);
}
.volume-control {
    width: 68px; height: 34px; display: inline-flex; align-items: center;
    padding: 0; border: 0; background: transparent;
}
.volume-control input {
    appearance: none; -webkit-appearance: none; width: 64px; height: 18px;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
.volume-control input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.volume-control input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.volume-control input::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.volume-control input::-moz-range-progress { height: 3px; border-radius: 3px; background: #35d6b8; }
.volume-control input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.player-live-text { display: inline-flex; align-items: center; gap: 8px; margin-left: 5px; color: rgba(255,255,255,.76); font-size: 11px; font-weight: 800; }
.player-live-text .live-dot { width: 6px; height: 6px; }
.player-control-spacer { flex: 1 1 auto; min-width: 4px; }
.protocol-switch { flex: 0 0 auto; display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(7,10,14,.64); }
.protocol-switch button { min-width: 42px; height: 28px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: rgba(255,255,255,.64); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.protocol-switch button:hover, .protocol-switch button:focus-visible { color: #fff; outline: none; }
.protocol-switch button.active { color: #06110f; background: #71e4ce; }
.protocol-switch button:disabled { opacity: .3; cursor: not-allowed; }
.player-route-status { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.62); font-size: 11px; }
.player-route-status span + span::before { content: "/"; margin-right: 7px; color: rgba(255,255,255,.26); }
.player-status {
    position: absolute; left: 50%; bottom: 72px; z-index: 7; max-width: min(560px, calc(100% - 28px));
    display: none; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
    transform: translateX(-50%); background: rgba(8,12,18,.88); color: #fff; font-size: 13px;
    box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(12px);
}
.player-status.show { display: block; }
.player-status[data-type="warning"] { border-color: rgba(255,184,77,.35); color: #ffe1a8; }
.room-summary { margin-top: 14px; padding: 18px 20px; box-shadow: none; }
.room-summary-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.room-summary h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.2; }
.room-announcement { display: flex; gap: 10px; align-items: flex-start; margin: 15px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: #c8d3e1; font-size: 13px; line-height: 1.6; }
.room-announcement strong { flex: 0 0 auto; color: #ffd188; font-size: 12px; }
.watch-player:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.watch-player:fullscreen video { width: 100vw; height: 100vh; aspect-ratio: auto; }
.watch-player:-webkit-full-screen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.watch-player:-webkit-full-screen video { width: 100vw; height: 100vh; aspect-ratio: auto; }
@keyframes player-spin { to { transform: rotate(360deg); } }
.chat { height: calc(100vh - 142px); min-height: 560px; display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.msg { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: start; padding: 10px 11px; border-radius: 8px; background: rgba(255,255,255,.045); color: #dbe5f3; font-size: 14px; line-height: 1.45; border: 1px solid rgba(255,255,255,.035); }
.msg b { color: var(--brand); white-space: nowrap; }
.msg.gift-msg { background: linear-gradient(135deg, rgba(255,184,77,.14), rgba(79,124,255,.08)); border: 1px solid rgba(255,184,77,.15); }
.gift-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 20px; margin-right: 6px; border-radius: 999px; color: #261a02; background: #ffcf76; font-size: 12px; font-weight: 900; }
.interaction-box { display: grid; gap: 10px; margin-top: 12px; }
.interaction-box button:disabled { opacity: .55; cursor: not-allowed; }
.interaction-closed { border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; padding: 16px; text-align: center; color: var(--muted); background: rgba(255,255,255,.03); }
.form { display: grid; gap: 12px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: 13px; }
input, select, textarea {
    width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text);
    border-radius: 8px; padding: 12px 13px; outline: none; font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
.table { width: 100%; border-collapse: collapse; overflow: hidden; }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 13px; text-align: left; font-size: 14px; }
.table th { color: var(--muted); font-weight: 700; }
.table.compact th, .table.compact td { padding: 10px; font-size: 13px; }
.split { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
.notice { border-left: 3px solid var(--brand); padding: 12px 14px; background: rgba(24,198,167,.1); color: #c9fff4; border-radius: 6px; }
.danger-note { border-left-color: var(--danger); background: rgba(255,93,108,.12); color: #ffd7dc; }
.csrf-flash { margin: 0 0 16px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 18px; align-items: start; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.kv span { color: var(--muted); font-size: 13px; }
code { display: inline-block; max-width: 100%; overflow: auto; background: rgba(0,0,0,.24); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; color: #b8fff2; }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.pill.active { color: #9dffdf; background: rgba(24,198,167,.12); border-color: rgba(24,198,167,.28); }
.pill.muted { color: #ffe1a6; background: rgba(255,184,77,.12); border-color: rgba(255,184,77,.28); }
.pill.banned { color: #ffb3bc; background: rgba(255,93,108,.12); border-color: rgba(255,93,108,.28); }
.filterbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; gap: 10px; align-items: center; }
.inline-form { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px; align-items: center; margin: 2px 0; }
.inline-form input { width: 96px; padding: 9px; }
.inline-form select { width: 96px; padding: 9px; }
.pager { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.checkline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.checkline input { width: auto; }
.pill.live { color: #b8fff2; background: rgba(79,124,255,.14); border-color: rgba(79,124,255,.3); }
.admin-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; width: 100%; }
.admin-side { position: sticky; top: 82px; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, rgba(18,26,38,.94), rgba(10,15,22,.9)); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.admin-side-title { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; padding: 4px 8px 8px; letter-spacing: .04em; }
.admin-menu { display: grid; gap: 4px; padding: 12px; border: 1px solid transparent; border-radius: 8px; color: var(--text); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.admin-menu span { color: var(--muted); font-size: 12px; }
.admin-menu:hover, .admin-menu.active { background: rgba(255,255,255,.06); border-color: var(--line); transform: translateX(2px); }
.admin-menu.active strong { color: #b8fff2; }
.admin-main { min-width: 0; width: 100%; }
.stat.mini { margin: 0; min-width: 160px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rich-settings { align-items: stretch; }
.setting-card {
    position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 58px; gap: 14px; align-items: center;
    padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20,26,35,.86); cursor: pointer;
}
.setting-card input { position: absolute; opacity: 0; pointer-events: none; }
.setting-card.on { border-color: rgba(24,198,167,.34); background: linear-gradient(135deg, rgba(24,198,167,.1), rgba(20,26,35,.88)); }
.setting-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--brand); font-size: 20px; font-weight: 900; }
.setting-copy { display: grid; gap: 5px; }
.setting-copy strong { font-size: 17px; }
.setting-copy em { color: var(--muted); font-style: normal; font-size: 13px; line-height: 1.5; }
.switch { width: 54px; height: 30px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .18s ease; }
.switch i { display: block; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.setting-card.on .switch { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.setting-card.on .switch i { transform: translateX(24px); }
.settings-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.setting-panel {
    border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: rgba(20,26,35,.86);
    display: grid; gap: 12px;
}
.setting-panel-head, .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.setting-panel h2, .panel-head h2, .stream-state-panel h2, .bandwidth-panel h2 { margin: 6px 0 0; font-size: 21px; }
.mini-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.mini-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mini-switch span { width: 48px; height: 28px; border-radius: 999px; padding: 3px; background: rgba(255,255,255,.12); }
.mini-switch i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.mini-switch.on span { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.mini-switch.on i { transform: translateX(20px); }
.setting-inline { display: grid; grid-template-columns: auto 120px auto; align-items: center; gap: 10px; color: var(--muted); }
.setting-inline input { padding: 10px 12px; }
.hint { margin: 0; color: #c7d2e4; font-size: 13px; line-height: 1.6; }
.clean-list { margin: 0; padding-left: 18px; color: #c7d2e4; line-height: 1.8; }
.ops-split { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); margin-top: 18px; }
.admin-stats { grid-template-columns: repeat(5, minmax(0,1fr)); margin-bottom: 18px; }
.admin-stats .stat { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)); }
.dashboard-stats { grid-template-columns: repeat(6, minmax(150px, 1fr)); margin: 0 0 18px; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(520px, .9fr); margin-top: 18px; }
.wide-kv { grid-template-columns: 132px minmax(0, 1fr); }
.table-panel { overflow: auto; padding: 0; }
.table-panel .table { min-width: 980px; }
.admin-table th, .admin-table td { white-space: nowrap; vertical-align: top; }
.admin-table td:nth-child(6), .admin-table td:nth-child(7), .admin-table td:nth-child(8) { white-space: normal; }
.actions-cell { min-width: 260px; }
.user-filter { grid-template-columns: minmax(280px, 1fr) 150px 150px auto auto; margin-bottom: 16px; }
.inline-stats { display: flex; grid-template-columns: none; gap: 10px; margin: 0; }
.muted-cell { color: var(--muted); max-width: 320px; white-space: normal !important; }
.key-status { display: grid; gap: 5px; border: 1px solid rgba(24,198,167,.24); background: rgba(24,198,167,.08); border-radius: 8px; padding: 12px; }
.key-status span { color: var(--muted); font-size: 13px; }
.key-status strong { color: #b8fff2; }
.key-status.danger { border-color: rgba(255,93,108,.32); background: rgba(255,93,108,.1); }
.key-status.danger strong { color: #ffb3bc; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nav-action-form { display: inline-flex; margin: 0; }
.compact-toolbar { margin: 0 0 14px; }
.stream-state-panel, .bandwidth-panel { margin-top: 18px; }
.empty-cell { color: var(--muted); text-align: center !important; padding: 22px !important; }
.table tbody tr:hover { background: rgba(255,255,255,.035); }

/* Admin workspace refinement */
.wrap.admin-wrap { width: 100%; max-width: none; padding: 22px 28px 56px; }
.admin-shell { grid-template-columns: 292px minmax(0, 1fr); gap: 24px; }
.admin-side {
    gap: 8px; padding: 18px 12px; border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(18,25,36,.98), rgba(9,13,20,.94));
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.admin-side-title { display: grid; gap: 4px; color: #dbe7f8; padding: 8px 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 6px; }
.admin-side-title strong { font-size: 16px; line-height: 1.2; }
.admin-side-title span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.admin-menu-group { display: grid; gap: 5px; padding: 8px 0 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.admin-menu-group:last-child { border-bottom: 0; }
.admin-menu-group-title { color: #6fead7; font-size: 12px; font-weight: 900; padding: 5px 12px 4px; letter-spacing: .04em; }
.admin-menu {
    position: relative; grid-template-columns: 1fr; gap: 4px; min-height: 58px; padding: 12px 12px 12px 38px;
    border-radius: 8px;
}
.admin-menu::before {
    content: ""; position: absolute; left: 14px; top: 17px; width: 9px; height: 9px;
    border-radius: 3px; background: rgba(255,255,255,.18); box-shadow: 0 0 0 4px rgba(255,255,255,.03);
}
.admin-menu strong { font-size: 15px; line-height: 1.25; white-space: nowrap; }
.admin-menu span { color: #9daabe; font-size: 12px; line-height: 1.45; }
.admin-menu:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.08); transform: translateX(2px); }
.admin-menu.active {
    background: linear-gradient(135deg, rgba(24,198,167,.16), rgba(79,124,255,.1));
    border-color: rgba(24,198,167,.26);
}
.admin-menu.active::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(24,198,167,.14); }
.admin-hero-title h1, .page-title h1 { font-size: 36px; line-height: 1.15; }
.admin-page-head { margin-bottom: 20px; }
.admin-page-head .meta { max-width: 820px; }
.settings-layout { display: grid; gap: 18px; }
.settings-section { padding: 22px; }
.settings-grid.two { grid-template-columns: repeat(2, minmax(320px, 1fr)); }
.setting-card:has(input:checked) { border-color: rgba(24,198,167,.34); background: linear-gradient(135deg, rgba(24,198,167,.1), rgba(20,26,35,.88)); }
.setting-card:has(input:checked) .switch { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.setting-card:has(input:checked) .switch i { transform: translateX(24px); }
.mini-switch:has(input:checked) span { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.mini-switch:has(input:checked) i { transform: translateX(20px); }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 18px; padding-top: 4px; }
.setting-inline.compact { grid-template-columns: 1fr auto; }
.setting-inline.compact input { font-size: 18px; font-weight: 800; text-align: center; }
.settings-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.live-square-hero { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); }
.square-status-panel h2 { margin: 10px 0 12px; font-size: 26px; }
.square-stats { grid-template-columns: repeat(3, 1fr); margin: 16px 0; }
.empty-state { display: grid; gap: 10px; min-height: 190px; align-content: center; }
.empty-state h3 { margin: 0; font-size: 26px; }
.room-state-title { font-size: 34px; }
.live-card .card-body h3 { margin: 0 0 10px; font-size: 20px; }
.admin-only-meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.log-detail summary { cursor: pointer; color: #cfe8ff; font-weight: 700; }
.log-detail code { margin-top: 8px; display: block; max-width: 520px; white-space: pre-wrap; word-break: break-word; }
.console-grid { grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr); margin-top: 18px; }
.console-room-card, .console-stream-card { min-height: 100%; }
.detail-kv { grid-template-columns: 128px minmax(0, 1fr); gap: 12px 16px; }
.detail-kv span { align-self: start; padding-top: 4px; }
.detail-kv strong { color: #f4f8ff; }
.danger-text { color: #ff9aa4 !important; }
.stream-tools-layout { display: grid; grid-template-columns: minmax(560px, 1.15fr) minmax(420px, .85fr); gap: 18px; align-items: start; }
.stream-primary-card { min-height: 100%; }
.stream-copy-list { display: grid; gap: 12px; }
.stream-copy-list.compact { gap: 10px; }
.stream-copy-item { display: grid; grid-template-columns: 116px minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
.stream-copy-item label { color: var(--muted); font-size: 13px; }
.stream-copy-item input { min-width: 0; font-family: Consolas, "Courier New", monospace; font-size: 13px; }
.stream-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stream-help { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 14px; background: rgba(255,255,255,.04); color: var(--muted); }
.stream-help strong { display: block; color: #f5fbff; margin-bottom: 6px; }
.stream-help p { margin: 0; line-height: 1.7; }
.btn:disabled { opacity: .48; cursor: not-allowed; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.chat-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.moderation-table th:nth-child(5), .moderation-table td:nth-child(5) { min-width: 260px; }
.message-cell { max-width: 420px; white-space: normal; line-height: 1.55; }
.moderation-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; }
.muted-panel { position: sticky; top: 82px; }
.muted-list { display: grid; gap: 10px; }
.muted-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.04); }
.muted-row strong { display: block; color: #f5fbff; margin-bottom: 4px; }
.interaction-box { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.interaction-box form { align-items: center; }
.interaction-box input, .interaction-box select { min-height: 42px; background: rgba(255,255,255,.065); }
.interaction-box .btn { min-height: 42px; }
.interaction-closed { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 12px; color: var(--muted); text-align: center; background: rgba(255,255,255,.04); }
.chat .toolbar h2 { font-size: 24px; letter-spacing: 0; }
.msg b { color: #25e5c8; }
.msg.gift-msg { border-color: rgba(255,184,77,.18); background: rgba(255,184,77,.08); }
.gift-tag { color: #ffcf82; font-weight: 800; margin-right: 4px; }
.console-actions { margin-top: 16px; }
.padded-toolbar { padding: 18px 18px 0; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-metrics div { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: rgba(255,255,255,.04); }
.mini-metrics strong { display: block; font-size: 30px; margin-bottom: 8px; }
.mini-metrics span { color: var(--muted); font-size: 13px; }
.legacy-live-panel { margin-bottom: 18px; }
.compact-empty { min-height: 150px; }
.live-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.live-admin-card {
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
    background: rgba(15,21,31,.86);
}
.live-preview {
    position: relative; aspect-ratio: 16 / 9; background:
        linear-gradient(135deg, rgba(24,198,167,.18), rgba(79,124,255,.16)),
        #070b12;
    display: grid; place-items: center;
}
.live-preview .badge { position: absolute; left: 12px; top: 12px; }
.preview-icon {
    width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #b8fff2; font-weight: 900; letter-spacing: .04em;
}
.live-admin-body { padding: 16px; display: grid; gap: 12px; }
.live-admin-body h3 { margin: 0; font-size: 19px; }
.meta.stacked { display: grid; gap: 7px; }
.obs-help-panel { margin-top: 18px; }
.obs-help-panel h3 { margin: 0 0 10px; font-size: 16px; }
@media (max-width: 900px) {
    .hero, .room, .split, .admin-grid, .filterbar, .admin-shell, .stream-tools-layout, .chat-admin-layout { grid-template-columns: 1fr; }
    .wrap.admin-wrap { padding: 18px 14px 42px; }
    .admin-side, .muted-panel { position: static; }
    .stream-copy-item { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
    .nav { padding: 0 16px; }
    .nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .nav-links { flex-wrap: wrap; justify-content: flex-end; }
    h1 { font-size: 34px; }
    .chat { height: auto; }
    .stats { grid-template-columns: 1fr 1fr; }
    .kv { grid-template-columns: 1fr; }
    .watch-topbar { top: 8px; left: 8px; right: 8px; }
    .watch-controls { min-height: 64px; padding: 24px 8px 8px; gap: 3px; }
    .player-status { bottom: 66px; font-size: 12px; }
    .player-live-text, .player-route-status { display: none; }
    .sound-group { padding-right: 4px; }
    .volume-control { width: 54px; }
    .volume-control input { width: 50px; }
    .protocol-switch button { min-width: 38px; padding: 0 5px; }
    .room-summary { padding: 16px; }
    .room-summary h1 { font-size: 22px; }
    .settings-grid { grid-template-columns: 1fr; }
    .setting-card { grid-template-columns: 42px minmax(0,1fr) 52px; padding: 14px; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .ops-split { grid-template-columns: 1fr; }
    .setting-inline { grid-template-columns: 1fr; }
    .page-title h1 { font-size: 28px; }
    .user-filter { grid-template-columns: 1fr; }
    .settings-grid.two, .settings-columns, .setting-row, .live-square-hero { grid-template-columns: 1fr; }
    .live-admin-grid { grid-template-columns: 1fr; }
    .console-grid { grid-template-columns: 1fr; }
    .mini-metrics { grid-template-columns: 1fr; }
    .admin-hero-title h1, .page-title h1 { font-size: 28px; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .room { grid-template-columns: 1fr; }
    .watch-player:fullscreen, .watch-player:-webkit-full-screen { aspect-ratio: auto; }
    .panel.chat { min-height: 320px; }
}

/* Commercial administration layout */
.shell { background: var(--bg); }
.brand-copy { display: grid; gap: 1px; line-height: 1.15; }
.brand-copy strong { font-size: 15px; }
.brand-copy small { color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-side {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    background: #111823;
    box-shadow: none;
}
.admin-menu-group-title { color: #7e8da1; font-size: 11px; text-transform: uppercase; }
.admin-menu { min-height: 54px; }
.admin-menu strong { font-size: 14px; }
.admin-menu.active { background: #172737; border-color: rgba(24,198,167,.3); }
.admin-menu.active strong { color: #dcfff8; }
.admin-main > .page-title { min-height: 92px; }
.admin-main > .page-title h1 { font-size: 34px; }
.admin-stats .stat strong, .room-ops-stats .stat strong { display: block; margin-top: 7px; font-size: 22px; }
.status-value.online { color: #66ead2; }

/* Reusable commercial forms */
.form-grid { display: grid; gap: 14px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2, .span-all { grid-column: 1 / -1; }
.field small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

/* Platform settings */
.settings-nav {
    position: sticky; top: 64px; z-index: 12; display: flex; gap: 4px; margin: 0 0 18px;
    padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(13,17,23,.96);
}
.settings-nav a { padding: 9px 13px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 750; }
.settings-nav a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.settings-anchor { scroll-margin-top: 126px; }
.commercial-settings { gap: 16px; }
.commercial-settings .settings-section { background: #131a24; }
.settings-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.security-settings-grid { display: grid; gap: 12px; }
.commercial-row { padding: 14px 0 0; border-top: 1px solid var(--line); }
.commercial-row:first-child { border-top: 0; }
.commercial-row p { margin: 5px 0 0; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.integration-block { min-width: 0; padding-left: 16px; border-left: 2px solid rgba(24,198,167,.34); }
.integration-block h3 { margin: 0 0 14px; font-size: 16px; }
.integration-block .field + .field { margin-top: 10px; }
.integration-block input { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.settings-savebar {
    position: sticky; bottom: 14px; z-index: 11; display: flex; justify-content: space-between; align-items: center;
    gap: 14px; padding: 12px 14px; border: 1px solid rgba(24,198,167,.24); border-radius: 8px;
    background: rgba(17,24,35,.97); box-shadow: 0 12px 34px rgba(0,0,0,.3); color: var(--muted); font-size: 13px;
}

/* Room operations */
.room-ops-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 18px; align-items: start; }
.room-operations-form { gap: 18px; }
.room-access-box { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.room-access-copy p { margin: 5px 0 0; }
.setting-check {
    display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px;
    border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); cursor: pointer;
}
.setting-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.setting-check span { display: grid; gap: 4px; }
.setting-check small { color: var(--muted); }
.setting-check.danger-option { border-color: rgba(255,93,108,.2); }
.operations-rail { display: grid; gap: 18px; }
.room-status-card .detail-kv { margin-top: 16px; }
.status-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.65; }
.operations-links { padding-bottom: 8px; }
.operations-links > a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 2px; border-top: 1px solid var(--line);
}
.operations-links > a:hover strong, .operations-links > a:hover b { color: #73ead8; }
.operations-links > a span { display: grid; gap: 4px; }
.operations-links > a small { color: var(--muted); line-height: 1.4; }
.operations-links > a b { color: #b9c6d7; font-size: 12px; }

/* Dashboard health and credentials */
.health-list { display: grid; }
.health-list > div {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.health-list > div > span:nth-child(2) { display: grid; gap: 4px; }
.health-list small { color: var(--muted); font-size: 12px; }
.health-list b { color: #cbd6e5; font-size: 12px; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: #7d8998; }
.health-dot.ok { background: var(--brand); box-shadow: 0 0 0 4px rgba(24,198,167,.1); }
.health-dot.warn { background: var(--warn); }
.health-dot.bad { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,93,108,.1); }
.health-footer { display: flex; justify-content: space-between; padding-top: 15px; color: #cfe0f4; font-size: 13px; }
.health-footer b { color: var(--brand); }
.obs-practice { margin-top: 18px; }
.obs-profile-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.obs-profile-grid > div { display: grid; gap: 5px; padding: 14px; background: #111823; }
.obs-profile-grid span, .obs-profile-grid small { color: var(--muted); font-size: 12px; }
.obs-profile-grid strong { font-size: 15px; }

/* Front office */
.square-overview {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
    padding: 24px 0 28px; border-bottom: 1px solid var(--line);
}
.square-heading h1 { margin: 8px 0; font-size: 36px; }
.square-heading .lead { margin: 0; max-width: 760px; font-size: 15px; }
.square-admin-summary { display: grid; grid-template-columns: repeat(3, minmax(92px, auto)) auto; align-items: center; gap: 12px; }
.square-admin-summary > div { display: grid; gap: 4px; padding-right: 16px; border-right: 1px solid var(--line); }
.square-admin-summary span { color: var(--muted); font-size: 12px; }
.square-admin-summary strong { font-size: 22px; }
.square-viewer-note { display: flex; align-items: center; gap: 12px; }
.square-viewer-note > span:last-child { display: grid; gap: 4px; }
.square-viewer-note small { color: var(--muted); }
.status-signal { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(24,198,167,.1); }
.auth-unavailable { max-width: 680px; margin: 48px auto; }

@media (max-width: 1180px) {
    .obs-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .settings-grid.three { grid-template-columns: 1fr; }
    .square-overview { grid-template-columns: 1fr; }
    .square-admin-summary { justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

@media (max-width: 900px) {
    .admin-side { max-height: none; overflow: visible; }
    .settings-nav { top: 0; overflow-x: auto; white-space: nowrap; }
    .form-grid.two-col, .integration-grid, .room-ops-layout { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .settings-savebar { bottom: 8px; }
    .obs-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .square-admin-summary { grid-template-columns: repeat(3, 1fr); }
    .square-admin-summary .btn { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .nav-links .btn { padding: 9px 10px; }
    .brand-copy small { display: none; }
    .settings-savebar { align-items: stretch; flex-direction: column; }
    .obs-profile-grid { grid-template-columns: 1fr; }
    .square-admin-summary { grid-template-columns: 1fr 1fr 1fr; }
    .square-heading h1 { font-size: 28px; }
}

/* Access control and account operations */
.settings-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.locked-policy-banner {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 14px; align-items: center;
    margin: 12px 0; padding: 11px 12px; border: 1px solid #29445f; border-radius: 6px; background: #0b1826;
}
.locked-policy-banner > span { padding: 3px 7px; border-radius: 999px; color: #8bbcff; background: rgba(65,139,255,.12); font-size: 10px; font-weight: 800; }
.locked-policy-banner strong { font-size: 12px; color: #e8f2ff; }
.locked-policy-banner p { margin: 0; color: #7691ad; font-size: 10px; line-height: 1.5; }

.security-stats, .user-account-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin: 0 0 12px; }
.security-stats .warning-stat strong, .user-account-stats .warning-stat strong { color: #ffbd55; }
.security-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 12px; margin-bottom: 12px; }
.policy-list { display: grid; margin-top: 10px; }
.policy-list > div {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    min-height: 55px; padding: 8px 0; border-top: 1px solid #22364a;
}
.policy-list > div:first-child { border-top: 0; }
.policy-list > div > span:nth-child(2) { display: grid; gap: 3px; }
.policy-list strong { font-size: 12px; color: #e8f1fb; }
.policy-list small { color: #6f8aa6; font-size: 10px; line-height: 1.45; }
.policy-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #2d4a65; border-radius: 6px; color: #62aef4; background: #10243a; font-size: 11px; font-weight: 900; }
.policy-icon.locked { color: #63dbc6; border-color: rgba(36,218,136,.3); background: rgba(36,218,136,.08); }
.status-text { font-size: 10px; white-space: nowrap; }
.status-text.good { color: #63ddae; }
.status-text.bad { color: #ff7d89; }
.status-text.muted { color: #8ba0b6; }
.session-policy-kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 11px 14px; margin-top: 16px; align-items: center; }
.session-policy-kv > span { color: #7591ad; font-size: 11px; }
.session-policy-kv > strong { font-size: 12px; }
.policy-actions { display: flex; gap: 7px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #22364a; }

.ip-rule-create { margin-bottom: 12px; padding: 0 !important; overflow: hidden; }
.ip-rule-form { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(260px, 1.3fr) minmax(200px, .8fr) auto; gap: 10px; align-items: end; padding: 13px 14px 15px; }
.ip-rule-form .btn { margin-bottom: 1px; }
.security-table-tools { display: flex; gap: 6px; align-items: center; }
.security-table-tools input { width: min(340px, 32vw); }
.security-table-panel .table { min-width: 1040px; }
.ip-rules-table td { vertical-align: middle; }
.ip-rules-table td:nth-child(3) { min-width: 220px; white-space: normal; }

.commercial-filter { display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(140px, .6fr) minmax(170px, .7fr) auto; gap: 9px; align-items: end; margin-bottom: 12px; }
.user-table-panel .table { min-width: 1220px; }
.user-account-table td { vertical-align: middle; }
.account-cell { display: grid; grid-template-columns: 34px minmax(150px, 1fr); gap: 9px; align-items: center; }
.account-cell > span:last-child { display: grid; gap: 2px; }
.account-cell strong { color: #edf5ff; font-size: 12px; }
.account-cell small, .cell-note { display: block; color: #6f8ca9; font-size: 9px; line-height: 1.45; }
.account-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #2f5c83; border-radius: 6px; background: #12304c; color: #7cc6ff; font-weight: 900; }
.mono-compact { font: 10px/1.45 Consolas, "Courier New", monospace; color: #b9cada; }
.protected-account { color: #738ba4; font-size: 10px; }
.table-head-note { color: #6885a2; font-size: 10px; }
.table-pager { margin: 0; padding: 10px 14px 14px; border-top: 1px solid #22364a; }
.btn.warning { color: #ffd17e; background: rgba(255,184,62,.1); border-color: rgba(255,184,62,.32); }

.user-manage-dialog {
    width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); margin: auto;
    padding: 0; overflow: auto; color: #e7f0fa; border: 1px solid #38516a; border-radius: 8px;
    background: #0d1927; box-shadow: 0 26px 90px rgba(0,0,0,.58);
}
.user-manage-dialog[open] { display: grid; }
.user-manage-dialog::backdrop { background: rgba(2,7,12,.76); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; gap: 18px; padding: 18px 20px 15px; border-bottom: 1px solid #273b50; background: #111f2f; }
.dialog-head h2 { margin: 3px 0; font-size: 18px; }
.dialog-head p { margin: 0; color: #7490ac; font-size: 10px; }
.dialog-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #344b62; border-radius: 6px; color: #9cb0c5; background: #172638; font-size: 20px; cursor: pointer; }
.dialog-close:hover { color: white; background: #21364d; }
.dialog-account-summary { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 1px; background: #263b50; border-bottom: 1px solid #263b50; }
.dialog-account-summary > div { display: grid; gap: 5px; padding: 13px 15px; background: #0b1724; }
.dialog-account-summary span { color: #708ba6; font-size: 10px; }
.dialog-account-summary strong { font-size: 11px; }
.dialog-section { display: grid; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #23364a; }
.dialog-section:last-child { border-bottom: 0; }
.dialog-section > div:first-child strong { font-size: 12px; }
.dialog-section > div:first-child p { margin: 4px 0 0; color: #718ca8; font-size: 10px; line-height: 1.55; }
.dialog-section.dialog-split { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.account-state-actions, .dialog-balance-form { display: flex; gap: 7px; flex-wrap: wrap; }
.dialog-balance-form { flex-wrap: nowrap; }
.dialog-balance-form input { width: 180px; }

.access-denied-shell { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #08111d; }
.access-denied-panel {
    width: min(680px, 100%); display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 28px; align-items: center;
    padding: 32px; border: 1px solid #2b4057; border-radius: 8px; background: #0e1a28; box-shadow: 0 28px 80px rgba(0,0,0,.35);
}
.access-denied-code { color: #ff7280; font: 900 64px/1 Consolas, "Courier New", monospace; }
.access-denied-panel h1 { margin: 7px 0 10px; font-size: 24px; }
.access-denied-panel p { margin: 0 0 14px; color: #829bb5; font-size: 13px; line-height: 1.7; }

/* Stable commercial sidebar hierarchy */
.admin-menu { grid-template-columns: 18px minmax(0, 1fr) !important; gap: 9px !important; align-items: center; padding-left: 9px !important; }
.admin-menu::before { display: none !important; }
.admin-menu-icon { width: 15px; height: 15px; fill: none; stroke: #6686a5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-menu-copy { display: grid !important; gap: 2px; min-width: 0; color: inherit !important; }
.admin-menu-copy strong { font-size: 11px !important; color: #cbd9e7; }
.admin-menu-copy small { overflow: hidden; color: #5f7b96; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.admin-menu.active .admin-menu-icon { stroke: #62b4ff; }
.admin-menu.active .admin-menu-copy strong { color: #f2f8ff; }

@media (min-width: 901px) {
    .nav.admin-nav { grid-template-columns: 236px minmax(0, 1fr) auto; }
    .admin-shell { grid-template-columns: 236px minmax(0, 1fr); }
    .admin-menu { min-height: 42px; }
    .admin-side { scrollbar-width: thin; scrollbar-color: #29445f transparent; }
}

@media (max-width: 1320px) {
    .settings-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-rule-form { grid-template-columns: 1fr 1fr; }
    .ip-rule-form .btn { justify-self: start; }
    .security-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .settings-grid.four, .security-stats, .user-account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .commercial-filter, .ip-rule-form { grid-template-columns: 1fr 1fr; }
    .admin-menu { min-height: 34px; padding: 7px 9px !important; }
    .admin-menu-copy small { display: none; }
    .admin-menu::after { display: none; }
}

@media (max-width: 620px) {
    .watch-controls { min-height: 62px; padding: 22px 7px 7px; gap: 2px; }
    .player-tool { flex-basis: 34px; width: 34px; height: 34px; }
    .sound-group { height: 34px; padding-right: 3px; gap: 1px; }
    .volume-control { width: 44px; height: 30px; }
    .volume-control input { width: 40px; }
    .player-live-text, .player-route-status { display: none; }
    .protocol-switch { padding: 1px; }
    .protocol-switch button { min-width: 32px; height: 27px; padding: 0 4px; font-size: 10px; }
    .settings-grid.four, .security-stats, .user-account-stats, .commercial-filter, .ip-rule-form { grid-template-columns: 1fr; }
    .locked-policy-banner { grid-template-columns: auto 1fr; }
    .locked-policy-banner p { grid-column: 1 / -1; }
    .security-table-tools { width: 100%; flex-wrap: wrap; }
    .security-table-tools input { width: 100%; }
    .dialog-account-summary, .dialog-section.dialog-split { grid-template-columns: 1fr; }
    .dialog-balance-form { flex-wrap: wrap; }
    .dialog-balance-form input { width: 100%; }
    .access-denied-panel { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
    .access-denied-code { font-size: 48px; }
}

@media (max-width: 360px) {
    .watch-controls { min-height: 58px; padding: 20px 5px 6px; gap: 2px; }
    .player-tool { flex-basis: 34px; width: 34px; height: 34px; }
    .player-tool svg { width: 18px; height: 18px; }
    .sound-group { height: 34px; padding-right: 3px; gap: 1px; }
    .volume-control { width: 40px; height: 30px; }
    .volume-control input { width: 36px; }
    .protocol-switch { padding: 1px; }
    .protocol-switch button { min-width: 28px; height: 26px; padding: 0 2px; font-size: 9px; }
    .player-status { bottom: 60px; }
}

/* Dense dark control center inspired by commercial operations software */
.admin-nav-context { display: grid; gap: 2px; min-width: 0; }
.admin-nav-context strong { color: #f1f7ff; font-size: 14px; line-height: 1.2; }
.admin-nav-context span { color: #5f83a8; font: 11px/1.2 Consolas, "Courier New", monospace; }
.admin-online { display: inline-flex; align-items: center; gap: 6px; color: #8da3bb; font-size: 11px; white-space: nowrap; }
.admin-online i { width: 6px; height: 6px; border-radius: 50%; background: #20d982; box-shadow: 0 0 7px rgba(32,217,130,.8); }
.admin-account {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center;
    padding: 10px 8px; border-top: 1px solid #24364a; background: #0a1522;
}
.admin-account > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: #2679e8; color: white; font-weight: 900; }
.admin-account > strong { display: grid; gap: 2px; font-size: 12px; min-width: 0; }
.admin-account small { color: #6f88a3; font-size: 10px; font-weight: 600; }
.admin-account b { color: #68819a; }

@media (min-width: 901px) {
    .nav.admin-nav {
        height: 52px; min-height: 52px; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto;
        gap: 0; padding: 0; background: #08111d; border-color: #22364a; backdrop-filter: none;
    }
    .admin-nav .brand { height: 52px; padding: 0 14px; border-right: 1px solid #284158; }
    .admin-nav .brand-mark { width: 28px; height: 28px; border-radius: 6px; font-size: 11px; background: #2679e8; }
    .admin-nav .brand-copy strong { font-size: 13px; }
    .admin-nav .brand-copy small { color: #6884a1; }
    .admin-nav-context { padding: 0 20px; align-content: center; }
    .admin-nav .nav-links { height: 52px; padding-right: 16px; gap: 7px; }
    .admin-nav .btn { min-height: 28px; padding: 5px 9px; border-radius: 6px; font-size: 11px; }
    .admin-nav .nav-refresh { color: #9eb8d3; background: #152438; border-color: #36506a; }

    .wrap.admin-wrap { padding: 0; }
    .admin-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 52px); align-items: stretch; }
    .admin-side {
        position: sticky; top: 52px; height: calc(100vh - 52px); max-height: none; display: flex; flex-direction: column;
        gap: 0; padding: 10px 8px 0; overflow-y: auto; border: 0; border-right: 1px solid #284158;
        border-radius: 0; background: #091725; box-shadow: none;
    }
    .admin-side-title { padding: 7px 8px 9px; margin: 0 0 5px; border-bottom: 0; }
    .admin-side-title strong { font-size: 12px; }
    .admin-side-title span { font-size: 9px; color: #54718d; }
    .admin-menu-group { gap: 2px; padding: 6px 0 9px; border-bottom: 0; }
    .admin-menu-group-title { padding: 4px 6px 5px; color: #5596d2; font-size: 10px; letter-spacing: 0; }
    .admin-menu {
        min-height: 38px; padding: 9px 9px 9px 34px; border-radius: 6px; border: 1px solid transparent;
        transition: background .12s ease, border-color .12s ease;
    }
    .admin-menu::before { left: 12px; top: 14px; width: 7px; height: 7px; border-radius: 2px; box-shadow: none; background: #49637e; }
    .admin-menu::after { content: ""; position: absolute; left: -9px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
    .admin-menu strong { font-size: 12px; line-height: 1.2; }
    .admin-menu span { display: none; }
    .admin-menu:hover { transform: none; background: #112338; border-color: #203c57; }
    .admin-menu.active { background: #12345b; border-color: #285c8e; }
    .admin-menu.active::before { background: #50a7ff; box-shadow: 0 0 8px rgba(80,167,255,.55); }
    .admin-menu.active::after { background: #2f90ff; }
    .admin-account { position: sticky; bottom: 0; margin: auto -8px 0; }
    .admin-main { padding: 18px 20px 38px; background: #08111c; }
}

.admin-main { color: #e5eef8; }
.admin-main > .page-title { min-height: 56px; margin: 0 0 14px; padding-bottom: 13px; border-bottom: 1px solid #203348; }
.admin-main > .page-title h1 { margin: 4px 0 3px; font-size: 20px; line-height: 1.2; }
.admin-main .page-title .meta { font-size: 11px; color: #7290ad; }
.admin-main .eyebrow { color: #4b9fea; font-size: 10px; }
.admin-main .panel { padding: 14px 16px; background: #0e1a28; border-color: #22364b; }
.admin-main .panel-head h2, .admin-main .compact-toolbar h2 { margin: 3px 0 0; font-size: 15px; }
.admin-main .panel-head .meta { margin-top: 5px; font-size: 11px; }
.admin-main .btn { min-height: 32px; padding: 6px 11px; border-radius: 6px; font-size: 12px; background: #17273a; border-color: #344a61; }
.admin-main .btn:hover { transform: none; background: #1d3249; border-color: #466884; }
.admin-main .btn.primary { color: white; background: linear-gradient(180deg, #3f98ff, #2077e8); border-color: #55a5ff; }
.admin-main .btn.danger { color: #ff9ba5; background: rgba(220,53,69,.12); border-color: rgba(255,93,108,.34); }
.admin-main input, .admin-main select, .admin-main textarea {
    min-height: 36px; padding: 8px 10px; border-radius: 6px; border-color: #2b4057; background: #091522; font-size: 12px;
}
.admin-main textarea { min-height: 92px; }
.admin-main .field { gap: 5px; }
.admin-main .field label { color: #829bb5; font-size: 11px; }
.admin-main .field small { font-size: 10px; }
.admin-main .notice { margin: 0 0 12px; padding: 9px 12px; font-size: 12px; background: #0d2a2d; }
.admin-main .pill { min-height: 20px; padding: 2px 7px; border-radius: 999px; font-size: 10px; }

.admin-main .stats { gap: 10px; }
.admin-main .stat { min-width: 0; min-height: 86px; padding: 13px 14px; border-color: #263a50; background: #101d2b; }
.admin-main .stat b, .admin-main .stat strong { font-size: 22px; color: #43a2ff; }
.admin-main .stat span { color: #7291b0; font-size: 11px; }
.admin-main .stat small { display: block; margin-top: 6px; color: #607c98; font-size: 10px; }
.admin-main .dashboard-stats { grid-template-columns: repeat(8, minmax(105px, 1fr)); margin: 0 0 14px; }
.admin-main .dashboard-stats .stat:nth-child(2) b, .admin-main .dashboard-stats .stat:nth-child(4) b { color: #24da88; }
.admin-main .dashboard-stats .stat:nth-child(6) b { color: #ffc34e; }
.admin-main .dashboard-stats .danger-stat b { color: #ff6674; }
.admin-main .console-grid { gap: 14px; margin-top: 14px; }
.admin-main .detail-kv { grid-template-columns: 110px minmax(0, 1fr); gap: 8px 13px; }
.admin-main .detail-kv span { font-size: 11px; }
.admin-main .detail-kv strong { font-size: 12px; }
.admin-main .health-list > div { padding: 9px 0; }

.admin-main .table-panel { padding: 0; }
.admin-main .table-section-head {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
    border-bottom: 1px solid #263a50; background: #111f2f;
}
.table-section-head > div { display: flex; align-items: baseline; gap: 10px; }
.table-section-head strong { font-size: 13px; }
.table-section-head span { color: #6685a3; font-size: 10px; }
.admin-main .table th, .admin-main .table td { padding: 9px 10px; border-color: #22364a; font-size: 11px; line-height: 1.45; }
.admin-main .table th { color: #7395b7; background: #162538; font-size: 10px; text-transform: uppercase; }
.admin-main .table tbody tr:nth-child(even) { background: rgba(27,45,64,.22); }
.admin-main .table tbody tr:hover { background: #152a3f; }
.admin-main code { padding: 3px 5px; border-color: #29445f; border-radius: 4px; background: #091420; color: #9bd8ff; font-size: 10px; }
.admin-main .padded-toolbar { padding: 12px 14px 0; }
.admin-main .mini-metrics { gap: 8px; }
.admin-main .mini-metrics div { padding: 13px; background: #101d2b; border-color: #263a50; }
.admin-main .mini-metrics strong { font-size: 22px; }

.admin-main .setting-card { grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 10px; padding: 12px; background: #101d2b; }
.admin-main .setting-icon { width: 34px; height: 34px; border-radius: 6px; font-size: 14px; }
.admin-main .setting-copy strong { font-size: 13px; }
.admin-main .setting-copy em { font-size: 10px; }
.admin-main .switch { width: 42px; height: 24px; }
.admin-main .switch i { width: 18px; height: 18px; }
.admin-main .setting-card:has(input:checked) .switch i { transform: translateX(18px); }
.admin-main .settings-section { padding: 15px 16px; }
.admin-main .settings-layout { gap: 12px; }
.admin-main .settings-nav { top: 52px; margin-bottom: 12px; background: #0b1724; border-color: #243b53; }
.admin-main .settings-savebar { background: #0b1724; }
.admin-main .stream-tools-layout, .admin-main .room-ops-layout { gap: 14px; }
.admin-main .obs-practice, .admin-main .stream-state-panel { margin-top: 14px; }

/* Full audit center */
.audit-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin: 0 0 12px; }
.audit-stats .danger-stat strong { color: #ff6674; }
.audit-stats .warning-stat strong { color: #ffb83e; }
.log-filterbar {
    display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(135px, .8fr)) minmax(130px, .7fr) repeat(2, minmax(135px, .75fr)) auto;
    gap: 9px; align-items: end; margin-bottom: 12px;
}
.filter-actions { display: flex; gap: 6px; align-items: center; padding-bottom: 1px; }
.audit-table-panel .table { min-width: 1240px; }
.audit-table td { vertical-align: middle; }
.audit-row.critical { box-shadow: inset 2px 0 #ff5264; }
.audit-row.warning { box-shadow: inset 2px 0 #ffb02e; }
.risk-pill { display: inline-flex; min-width: 46px; justify-content: center; padding: 3px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.risk-pill.info { color: #71d5ff; background: rgba(53,153,255,.12); border: 1px solid rgba(53,153,255,.28); }
.risk-pill.warning { color: #ffc45c; background: rgba(255,176,46,.12); border: 1px solid rgba(255,176,46,.3); }
.risk-pill.critical { color: #ff929d; background: rgba(255,82,100,.12); border: 1px solid rgba(255,82,100,.3); }
.audit-table td:nth-child(3) { min-width: 160px; }
.audit-table td:nth-child(3) strong, .audit-table td:nth-child(4) strong { display: block; margin-bottom: 4px; }
.audit-message { min-width: 210px; max-width: 340px; white-space: normal !important; color: #c8d7e6; }
.mono-cell { font-family: Consolas, "Courier New", monospace; color: #8fb3d5; }
.audit-details { min-width: 140px; }
.audit-request-id { display: inline-flex; margin: 0 0 5px; padding: 2px 5px; border: 1px solid #2d4d69; border-radius: 4px; background: #0b1724; color: #85c5ff; font: 10px/1.4 Consolas, "Courier New", monospace; }
.audit-details details + details { margin-top: 4px; }
.audit-details summary { color: #62aef4; cursor: pointer; font-size: 10px; }
.audit-details code { display: block; max-width: 420px; max-height: 190px; margin-top: 5px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.audit-pager { padding: 10px 14px 14px; margin: 0; border-top: 1px solid #22364a; }

@media (max-width: 1450px) {
    .log-filterbar { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
    .filter-actions { grid-column: span 1; }
    .admin-main .console-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .nav.admin-nav { grid-template-columns: 200px minmax(0, 1fr) auto; }
    .admin-shell { grid-template-columns: 200px minmax(0, 1fr); }
    .admin-nav .nav-links a[href="/profile"] { display: none; }
    .admin-main { padding: 15px; }
    .admin-main .dashboard-stats, .audit-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .admin-nav-context { order: 3; width: 100%; padding: 6px 0 0; }
    .admin-online, .nav-refresh { display: none; }
    .admin-side {
        display: flex; flex-direction: row; align-items: center; gap: 6px; max-width: 100%; padding: 7px;
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 8px; border-color: #263d54; background: #0b1826;
    }
    .admin-side::-webkit-scrollbar { display: none; }
    .admin-side-title, .admin-account, .admin-menu-group-title { display: none; }
    .admin-menu-group { display: flex; flex: 0 0 auto; gap: 5px; padding: 0; border: 0; }
    .admin-menu { min-height: 34px; width: auto; padding: 8px 10px 8px 26px; white-space: nowrap; }
    .admin-menu::before { left: 10px; top: 13px; width: 6px; height: 6px; }
    .admin-menu strong { font-size: 11px; }
    .admin-menu span { display: none; }
    .admin-main > .page-title { align-items: flex-start; flex-direction: column; }
    .admin-main .dashboard-stats, .audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .log-filterbar { grid-template-columns: 1fr 1fr; }
    .filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .admin-main .dashboard-stats, .audit-stats, .log-filterbar { grid-template-columns: 1fr; }
    .filter-actions { grid-column: auto; }
    .admin-main .stat { min-height: 72px; }
}

/* Authentication portal */
.auth-page { min-width: 320px; background: #080d14; }
.auth-page .auth-shell { min-height: 100vh; background: #080d14; }
.auth-page .auth-nav {
    position: sticky; height: 60px; padding: 0 28px; border-color: #203044;
    background: #0a121d; backdrop-filter: none;
}
.auth-page .brand-mark { background: #2f7df4; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.auth-page .brand-copy strong { font-size: 14px; }
.auth-nav .nav-links { min-width: 0; }
.auth-mode-label, .auth-nav-label { letter-spacing: 0; }
.auth-mode-label, .auth-nav .auth-mode-label { color: #7290af; font-size: 11px; font-weight: 800; }
.auth-nav .auth-mode-label { display: inline-flex; }
.auth-nav .nav-links .auth-mode-label { padding: 0; }
.auth-nav .nav-links { margin-left: auto; }
.auth-nav-label { display: inline-flex; align-items: center; color: #7290af; font-size: 11px; font-weight: 800; }
.auth-nav-label::before { content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #30d1ad; box-shadow: 0 0 0 4px rgba(48,209,173,.1); }
.auth-transport-state { display: inline-flex; align-items: center; gap: 7px; color: #7890a8; font-size: 11px; font-weight: 800; }
.auth-transport-state svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-transport-state.secure { color: #64d8c0; }
.auth-transport-state.local { color: #e2ad5c; }
.auth-page .auth-wrap {
    width: 100%; max-width: none; min-height: calc(100vh - 60px); margin: 0; padding: 28px;
    display: grid; place-items: center;
}
.auth-portal {
    width: min(1160px, 100%); min-height: clamp(560px, calc(100vh - 116px), 650px); display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(430px, .86fr);
    overflow: hidden; border: 1px solid #26384d; border-radius: 8px; background: #0d1723; box-shadow: 0 26px 80px rgba(0,0,0,.34);
}
.auth-register-portal { min-height: 720px; }
.auth-visual {
    position: relative; min-width: 0; min-height: 100%; overflow: hidden;
    background: #08111b url("./auth-studio.webp") 45% center / cover no-repeat;
    border-right: 1px solid #26384d;
}
.auth-visual::after { content: ""; position: absolute; inset: 0; background: rgba(3,8,14,.36); pointer-events: none; }
.auth-visual-content {
    position: absolute; z-index: 1; left: 42px; right: 42px; bottom: 94px;
    padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28); text-shadow: 0 3px 20px rgba(0,0,0,.88);
}
.auth-visual-content h1 { max-width: 560px; margin: 10px 0 8px; font-size: 42px; line-height: 1.14; overflow-wrap: anywhere; }
.auth-visual-content p { margin: 0; color: rgba(255,255,255,.75); font-size: 15px; }
.auth-kicker { color: #6fe3cf; font-size: 11px; font-weight: 900; }
.auth-visual-footer {
    position: absolute; z-index: 1; left: 42px; right: 42px; bottom: 30px;
    display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800;
}
.auth-visual-footer strong { color: #f4bd65; font-size: 11px; }
.auth-entry { min-width: 0; display: grid; place-items: center; padding: 46px; background: #0d1723; }
.auth-entry-inner { width: min(100%, 440px); }
.auth-tabs {
    width: 100%; height: 42px; display: grid; grid-template-columns: repeat(2, 1fr); padding: 3px;
    border: 1px solid #263b51; border-radius: 7px; background: #09131f;
}
.auth-tabs a { display: grid; place-items: center; border-radius: 5px; color: #7f96ae; font-size: 13px; font-weight: 800; }
.auth-tabs a:hover, .auth-tabs a:focus-visible { color: #dbe9f7; outline: none; }
.auth-tabs a.active { color: #fff; background: #1b2c40; box-shadow: inset 0 0 0 1px #355272; }
.auth-heading { margin: 38px 0 28px; }
.auth-heading.compact { margin: 24px 0 20px; }
.auth-heading .eyebrow { color: #36cfb1; font-size: 11px; }
.auth-heading h2, .auth-state-entry h2 { margin: 9px 0 7px; font-size: 30px; line-height: 1.18; }
.auth-heading p, .auth-state-entry p { margin: 0; color: #8298ae; font-size: 13px; line-height: 1.65; }
.auth-form { display: grid; gap: 17px; }
.auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
.auth-form-grid .span-all { grid-column: 1 / -1; }
.auth-field { min-width: 0; gap: 7px; }
.auth-field label { color: #a9bbcd; font-size: 12px; font-weight: 700; }
.auth-label-row { min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-label-row > span { color: #647d95; font-size: 11px; }
.auth-text-button { padding: 0; border: 0; background: transparent; color: #66aaf5; font: inherit; font-size: 11px; cursor: pointer; }
.auth-text-button:hover, .auth-text-button:focus-visible { color: #9bcdff; outline: none; text-decoration: underline; }
.auth-input-wrap { position: relative; min-width: 0; }
.auth-input-wrap > svg {
    position: absolute; z-index: 1; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
    fill: none; stroke: #617c97; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.auth-input-wrap input {
    height: 46px; min-width: 0; padding: 0 42px 0 42px; border: 1px solid #2a4058; border-radius: 7px;
    background: #09131f; color: #eef5fc; font-size: 13px; box-shadow: none;
}
.auth-input-wrap input::placeholder { color: #536a82; }
.auth-input-wrap input:hover { border-color: #38536f; }
.auth-input-wrap input:focus { border-color: #3c8dea; box-shadow: 0 0 0 3px rgba(60,141,234,.13); }
.auth-input-wrap input:-webkit-autofill,
.auth-input-wrap input:-webkit-autofill:hover,
.auth-input-wrap input:-webkit-autofill:focus { -webkit-text-fill-color: #eef5fc; transition: background-color 9999s ease-out; }
.password-toggle {
    position: absolute; z-index: 2; right: 6px; top: 5px; width: 36px; height: 36px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #7189a1; cursor: pointer;
}
.password-toggle:hover, .password-toggle:focus-visible { color: #dce9f5; background: #152638; outline: none; }
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-closed { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-closed { display: block; }
.caps-lock-warning { color: #f3b75d; font-size: 11px; }
.auth-help { padding: 11px 12px; border-left: 2px solid #e1a64c; background: #17202a; color: #aab8c7; font-size: 11px; line-height: 1.65; }
.auth-message { margin: -11px 0 20px; padding: 11px 12px; border-left: 3px solid; border-radius: 5px; font-size: 12px; line-height: 1.55; }
.auth-message.error { border-color: #ef6b77; background: #28171d; color: #ffc2c8; }
.auth-message.success { border-color: #36cfb1; background: #102a29; color: #baf6e8; }
.auth-submit {
    width: 100%; min-height: 46px; justify-content: space-between; padding: 0 15px; border: 1px solid #438de4;
    background: #2f7df4; color: #fff; box-shadow: 0 9px 24px rgba(47,125,244,.18);
}
.auth-page .btn.primary.auth-submit { border-color: #438de4; background: #2f7df4; }
.auth-page .btn.primary.auth-submit:hover { border-color: #67a7f0; background: #3988f6; }
.auth-submit:hover { transform: none; border-color: #67a7f0; background: #3988f6; }
.auth-submit:focus-visible { outline: 2px solid #8bc0fb; outline-offset: 2px; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-entry-footer { margin-top: 25px; padding-top: 18px; border-top: 1px solid #22364a; color: #7189a1; font-size: 12px; text-align: center; }
.auth-entry-footer a { margin-left: 6px; color: #70b2fa; font-weight: 800; }
.auth-entry-footer a:hover, .auth-entry-footer a:focus-visible { color: #a6d2ff; outline: none; }
.auth-entry-footer strong { margin-left: 6px; color: #aab9c8; }
.password-strength { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.password-strength > div { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.password-strength i { height: 3px; border-radius: 3px; background: #263a4f; }
.password-strength span { flex: 0 0 auto; min-width: 52px; color: #6f869d; font-size: 10px; text-align: right; }
.password-strength[data-level="1"] i:nth-child(1) { background: #e66b76; }
.password-strength[data-level="2"] i:nth-child(-n+2) { background: #e2aa51; }
.password-strength[data-level="3"] i { background: #39c9aa; }
.password-strength[data-level="1"] span { color: #ee8b95; }
.password-strength[data-level="2"] span { color: #eac06f; }
.password-strength[data-level="3"] span { color: #6fe0c8; }
.auth-state-entry .auth-entry-inner { display: grid; justify-items: start; }
.auth-state-icon { width: 46px; height: 46px; margin-bottom: 26px; display: grid; place-items: center; border: 1px solid #35516e; border-radius: 8px; background: #132235; color: #77b8ff; }
.auth-state-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-state-entry p { margin: 0 0 28px; }
.auth-state-entry .auth-submit { max-width: 190px; justify-content: center; }

@media (max-width: 1080px) {
    .auth-portal { grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr); }
    .auth-entry { padding: 38px; }
    .auth-visual-content, .auth-visual-footer { left: 30px; right: 30px; }
    .auth-visual-content h1 { font-size: 34px; }
}

@media (max-width: 820px) {
    .auth-page .auth-wrap { display: block; padding: 20px; }
    .auth-portal { min-height: 0; grid-template-columns: 1fr; }
    .auth-visual { min-height: 220px; border-right: 0; border-bottom: 1px solid #26384d; background-position: center 45%; }
    .auth-visual-content { bottom: 58px; padding-top: 14px; }
    .auth-visual-content h1 { margin: 7px 0 5px; font-size: 28px; }
    .auth-visual-footer { bottom: 20px; }
    .auth-entry { padding: 38px 34px; }
    .auth-entry-inner { width: min(100%, 520px); }
}

@media (max-width: 560px) {
    .auth-page .auth-nav { height: 56px; padding: 0 16px; }
    .auth-page .auth-wrap { min-height: calc(100vh - 56px); padding: 12px; }
    .auth-visual { min-height: 180px; }
    .auth-visual-content { left: 20px; right: 20px; bottom: 48px; }
    .auth-visual-content h1 { font-size: 24px; }
    .auth-visual-content p { font-size: 12px; }
    .auth-visual-footer { left: 20px; right: 20px; bottom: 16px; }
    .auth-entry { padding: 28px 20px 24px; }
    .auth-heading { margin: 28px 0 23px; }
    .auth-heading.compact { margin: 22px 0 18px; }
    .auth-heading h2, .auth-state-entry h2 { font-size: 25px; }
    .auth-form-grid { grid-template-columns: 1fr; }
    .auth-form-grid .span-all { grid-column: auto; }
    .auth-entry-footer { margin-top: 21px; }
}

/* Product-wide visual system: readable operations UI and a quiet viewing surface. */
:root {
    --bg: #111617;
    --panel: #1b2223;
    --panel-2: #222b2c;
    --line: #303b3c;
    --text: #f2f5f4;
    --muted: #a3b1b0;
    --brand: #48c9ad;
    --brand-2: #5f9cea;
    --warn: #e8b85f;
    --danger: #f07985;
}
.shell { background: var(--bg); }
.nav { background: #171e20; border-color: var(--line); }
.brand-mark { background: #327e78; }
.wrap { width: min(1560px, calc(100% - 40px)); }
.panel { background: var(--panel); border-color: var(--line); }
.btn { background: #293234; border-color: #465253; font-size: 13px; }
.btn.primary { background: #278b79; border-color: #3eac96; color: white; }
.btn.primary:hover { background: #329b86; }
.eyebrow, .admin-side-title, .admin-menu-group-title { letter-spacing: 0 !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid #6dd9be; outline-offset: 2px;
}

@media (min-width: 901px) {
    .nav.admin-nav { grid-template-columns: 248px minmax(0, 1fr) auto; background: #171e20; border-color: var(--line); }
    .admin-nav .brand { border-color: var(--line); padding: 0 18px; }
    .admin-nav .brand-mark { background: #278b79; }
    .admin-nav-context { padding: 0 24px; }
    .admin-shell { grid-template-columns: 248px minmax(0, 1fr); gap: 0; }
    .admin-side {
        top: 52px; height: calc(100vh - 52px); padding: 22px 12px 0;
        border: 0; border-right: 1px solid var(--line); border-radius: 0;
        background: #171e20; box-shadow: none; overflow-y: auto;
    }
    .admin-main { padding: 24px clamp(20px, 2.2vw, 38px) 56px; background: var(--bg); }
}
.admin-nav-context strong { color: var(--text); font-size: 14px; }
.admin-nav-context span { color: #86a09f; font-size: 11px; }
.admin-online { color: #a6b6b4; font-size: 12px; }
.admin-nav .nav-refresh { background: #283334; border-color: #435152; }
.admin-side-title { padding: 0 12px 14px; margin: 0 0 7px; border-bottom: 1px solid var(--line); }
.admin-side-title strong { color: var(--text); font-size: 15px; }
.admin-side-title span { color: #84a09d; font-size: 11px; }
.admin-menu-group { gap: 3px; padding: 9px 0 12px; border-bottom: 1px solid #293435; }
.admin-menu-group-title { padding: 5px 11px 6px; color: #84a09d; font-size: 11px; font-weight: 800; }
.admin-menu {
    grid-template-columns: 20px minmax(0, 1fr) !important; align-items: center;
    gap: 11px !important; min-height: 54px; padding: 8px 11px !important;
    border: 1px solid transparent; border-radius: 6px; color: #c9d4d2;
}
.admin-menu::before, .admin-menu::after { display: none !important; }
.admin-menu:hover { background: #253032; border-color: #354345; transform: none; }
.admin-menu.active { background: #1d3b38; border-color: #32685e; }
.admin-menu-icon { width: 18px; height: 18px; fill: none; stroke: #8ba7a3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-menu.active .admin-menu-icon { stroke: #70dbc1; }
.admin-menu-copy { display: grid !important; gap: 3px; min-width: 0; color: inherit !important; }
.admin-menu-copy strong { color: inherit; font-size: 13px !important; line-height: 1.25; }
.admin-menu-copy small { color: #86a09d; font-size: 11px; line-height: 1.3; white-space: normal; }
.admin-menu.active .admin-menu-copy strong { color: #f4fffb; }
.admin-account { border-color: var(--line); background: #171e20; }
.admin-account > span { background: #357d77; }
.admin-account > strong { font-size: 13px; }
.admin-account small { color: #9caeab; font-size: 11px; }

.admin-main { color: var(--text); }
.admin-main > .page-title { min-height: 78px; margin-bottom: 18px; padding-bottom: 17px; border-color: var(--line); }
.admin-main > .page-title h1 { margin: 5px 0 7px; font-size: 28px; line-height: 1.2; }
.admin-main .page-title .meta { color: var(--muted); font-size: 13px; line-height: 1.55; }
.admin-main .eyebrow { color: #67cbb8; font-size: 11px; }
.admin-main .panel { padding: 19px 21px; background: var(--panel); border-color: var(--line); }
.admin-main .panel-head h2, .admin-main .compact-toolbar h2 { font-size: 18px; }
.admin-main .panel-head .meta { color: var(--muted); font-size: 12px; }
.admin-main .btn { min-height: 38px; padding: 8px 13px; border-radius: 6px; background: #293435; border-color: #455354; font-size: 13px; }
.admin-main .btn:hover { background: #354142; border-color: #5a6d6d; }
.admin-main .btn.primary { background: #278b79; border-color: #3eac96; color: white; }
.admin-main .btn.primary:hover { background: #329b86; }
.admin-main input, .admin-main select, .admin-main textarea { min-height: 40px; padding: 9px 11px; border-color: #435253; background: #141b1d; color: var(--text); font-size: 13px; }
.admin-main .field label { color: #b5c4c1; font-size: 12px; }
.admin-main .field small { color: #8ea19e; font-size: 11px; }
.admin-main .notice { background: #17312d; font-size: 13px; }
.admin-main .pill { min-height: 23px; padding: 3px 8px; font-size: 11px; }
.admin-main .stats { gap: 12px; }
.admin-main .stat { min-height: 96px; padding: 16px; border-color: var(--line); background: #1d2627; }
.admin-main .stat b, .admin-main .stat strong { color: #70d7be; font-size: 26px; }
.admin-main .stat span { color: #b0c0bd; font-size: 12px; }
.admin-main .stat small { color: #91a8a3; font-size: 11px; }
.admin-main .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-main .dashboard-stats .stat:nth-child(2) b, .admin-main .dashboard-stats .stat:nth-child(4) b { color: #79dca4; }
.admin-main .dashboard-stats .stat:nth-child(6) b { color: #efc87a; }
.server-runtime-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 64px; margin: 0 0 18px; padding: 10px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #192122; }
.server-runtime-title { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.server-runtime-title > span:last-child { display: grid; gap: 2px; }
.server-runtime-title strong { font-size: 13px; }
.server-runtime-title small { color: var(--muted); font-size: 10px; }
.server-runtime-signal { width: 9px; height: 9px; border-radius: 50%; background: #d3a85e; box-shadow: 0 0 0 4px rgba(211, 168, 94, .12); }
.server-runtime-signal.ok { background: #58cba9; box-shadow: 0 0 0 4px rgba(88, 203, 169, .12); }
.server-runtime-items { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.server-runtime-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 9px; border: 1px solid #3b4949; border-radius: 5px; background: #202a2a; white-space: nowrap; }
.server-runtime-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #d3a85e; }
.server-runtime-chip.ok::before { background: #58cba9; }
.server-runtime-chip.bad::before { background: #e47d7d; }
.server-runtime-chip b { color: #dbe7e4; font-size: 11px; }
.server-runtime-chip em { color: #91aaa4; font-size: 10px; font-style: normal; }
.server-runtime-request { color: #829792; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; white-space: nowrap; }
.admin-main .console-grid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 16px; margin-top: 16px; }
.admin-main .detail-kv { grid-template-columns: 128px minmax(0, 1fr); gap: 9px 16px; }
.admin-main .detail-kv span { color: #a9b9b6; font-size: 12px; }
.admin-main .detail-kv strong { font-size: 13px; overflow-wrap: anywhere; }
.admin-main .table-panel { padding: 0; overflow-x: auto; }
.admin-main .table-section-head { padding: 15px 19px; border-color: var(--line); background: #202a2b; }
.table-section-head strong { font-size: 15px; }
.table-section-head span { color: #a3b7b2; font-size: 12px; }
.admin-main .table th, .admin-main .table td { padding: 11px 13px; border-color: var(--line); color: #e4edeb; font-size: 12px; line-height: 1.5; }
.admin-main .table th { color: #a6c0ba; background: #232e2e; font-size: 11px; }
.admin-main .table tbody tr:nth-child(even) { background: #1e2829; }
.admin-main .table tbody tr:hover { background: #293637; }
.admin-main code { border-color: #395352; background: #132321; color: #9ee5d0; font-size: 11px; }
.admin-main .setting-card { background: #20292a; border-color: #3a4748; }
.admin-main .setting-copy em { color: #a4b7b2; font-size: 11px; }
.admin-main .settings-nav, .admin-main .settings-savebar { background: #192223; border-color: var(--line); }
.operations-timeline .panel-head { align-items: center; }
.operations-timeline .panel-head a { color: #78d9c2; font-size: 12px; font-weight: 700; }
.operations-events { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.operations-events li { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.operations-events li span { color: #92a8a3; font-size: 11px; }
.operations-events li strong { font-size: 12px; font-weight: 600; }

.room { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); gap: 20px; }
.watch-player { border: 1px solid #303a3b; box-shadow: none; }
.room-summary { margin-top: 14px; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 2px 0; }
.room-summary h1 { font-size: 25px; }
.chat { height: min(740px, calc(100vh - 104px)); min-height: 480px; padding: 0; background: #1b2223; box-shadow: none; }
.room-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.room-chat-head h2 { margin: 3px 0 0; font-size: 18px; }
.room-balance { color: #e9c988; font-size: 12px; white-space: nowrap; }
.messages { padding: 12px 17px; gap: 0; }
.messages:empty::before { content: '暂无互动消息'; display: block; margin: auto; color: #879b97; font-size: 13px; }
.msg { display: flex; flex-wrap: wrap; gap: 5px 8px; padding: 10px 1px; border: 0; border-bottom: 1px solid #2b3536; border-radius: 0; background: transparent; font-size: 13px; }
.msg b { color: #77d9c2; }
.msg.gift-msg { background: #2d2923; border-color: #514333; }
.gift-tag { border-radius: 4px; font-size: 11px; }
.interaction-box { gap: 9px; margin-top: 0; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.interaction-form { display: grid; gap: 8px; }
.gift-form { grid-template-columns: minmax(0, 1fr) 76px; }
.chat-form { grid-template-columns: minmax(0, 1fr) 54px; }
.interaction-form input, .interaction-form select { min-height: 40px; background: #111819; }
.interaction-form .btn { min-height: 40px; padding: 8px; }
.room-toast { position: fixed; right: 20px; top: 76px; z-index: 99; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #4a6861; border-radius: 6px; background: #20332e; box-shadow: 0 16px 40px #0008; color: white; font-size: 13px; }
.thumb { background: #202a2a; }
.card { background: var(--panel); border-color: var(--line); }
.live-card:hover { border-color: #579385; }
.square-heading h1 { font-size: 32px; }

@media (max-width: 1180px) {
    .admin-main .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-main .console-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .wrap { width: min(100% - 28px, 760px); }
    .wrap.admin-wrap { width: 100%; padding: 0; }
    .admin-shell { display: grid; grid-template-columns: 1fr; }
    .admin-side { position: sticky; top: 64px; z-index: 18; display: flex; padding: 7px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #171e20; }
    .admin-side::-webkit-scrollbar { display: none; }
    .admin-side-title, .admin-account, .admin-menu-group-title { display: none; }
    .admin-menu-group { display: flex; flex: 0 0 auto; gap: 5px; padding: 0; border: 0; }
    .admin-menu { grid-template-columns: 16px auto !important; min-height: 38px; padding: 7px 10px !important; white-space: nowrap; }
    .admin-menu-icon { width: 16px; height: 16px; }
    .admin-menu-copy { display: block !important; }
    .admin-menu-copy small { display: none; }
    .admin-main { padding: 18px 16px 44px; }
    .admin-main .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .server-runtime-band { grid-template-columns: 1fr auto; gap: 10px 14px; }
    .server-runtime-items { grid-column: 1 / -1; grid-row: 2; }
    .server-runtime-request { grid-column: 2; grid-row: 1; }
    .admin-main .console-grid { grid-template-columns: 1fr; }
    .room { grid-template-columns: 1fr; }
    .chat { height: auto; min-height: 0; }
    .messages { min-height: 180px; max-height: 360px; }
}
@media (max-width: 560px) {
    .wrap { width: calc(100% - 24px); }
    .admin-main > .page-title h1 { font-size: 24px; }
    .admin-main .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-main .stat { min-height: 86px; padding: 12px; }
    .admin-main .stat b, .admin-main .stat strong { font-size: 21px; }
    .server-runtime-band { grid-template-columns: 1fr; padding: 12px 2px; background: transparent; }
    .server-runtime-items, .server-runtime-request { grid-column: 1; grid-row: auto; }
    .server-runtime-request { display: none; }
    .server-runtime-chip { flex: 1 1 calc(50% - 7px); justify-content: flex-start; }
    .room-summary h1 { font-size: 21px; }
    .volume-control { width: 44px; }
    .volume-control input { width: 40px; }
}

/* Live directory */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.square-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 12px 0 22px; border-bottom: 1px solid var(--line); }
.square-head h1 { margin: 7px 0 6px; font-size: 31px; line-height: 1.2; }
.square-head .meta { margin: 0; }
.square-head-actions { display: flex; align-items: center; gap: 18px; }
.square-live-count { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: 13px; }
.square-live-count strong { color: var(--text); font-size: 16px; }
.square-live-count .status-signal { display: inline-block; width: 8px; height: 8px; margin-right: 4px; box-shadow: none; }
.square-directory { padding: 18px 0 48px; }
.square-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 16px; }
.square-search { display: block; min-width: 0; }
.square-search input { display: block; width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.square-search input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(69, 191, 169, .14); }
.square-search input::placeholder { color: var(--muted); }
.square-filter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.square-filter button { min-width: 58px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.square-filter button[aria-pressed="true"] { background: #2b4945; color: #a8f0df; }
.square-filter button:focus-visible, .square-refresh:focus-visible, .live-room-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.square-refresh { min-height: 42px; border-radius: 6px; font-size: 12px; }
.square-directory .notice { margin: 0 0 16px; }
.square-directory .notice[hidden] { display: none; }
.live-room-list { border-top: 1px solid var(--line); }
.live-room-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 112px; padding: 16px 12px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.live-room-row:hover { background: #202a2a; }
.live-room-row[hidden] { display: none; }
.live-room-mark { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #426b63; border-radius: 6px; background: #213b36; color: #b3f0df; font-size: 19px; font-weight: 800; }
.live-room-content { display: grid; min-width: 0; gap: 5px; }
.live-room-kicker { display: inline-flex; align-items: center; gap: 8px; color: #8de4cc; font-size: 11px; font-weight: 700; }
.live-room-kicker .live-dot { flex: 0 0 auto; width: 6px; height: 6px; box-shadow: none; }
.live-room-kicker > span { color: var(--muted); font-weight: 500; }
.live-room-title { overflow-wrap: anywhere; color: var(--text); font-size: 18px; line-height: 1.3; }
.live-room-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.live-room-meta i { width: 3px; height: 3px; border-radius: 50%; background: #7b8e8a; }
.live-room-tail { display: flex; align-items: center; gap: 26px; justify-self: end; white-space: nowrap; }
.live-room-access { color: #a6dccc; font-size: 12px; }
.live-room-access.private { color: #ffd18b; }
.live-room-enter { display: inline-flex; align-items: center; gap: 8px; color: #dcebe7; font-size: 12px; font-weight: 700; }
.live-room-enter > span { font-size: 17px; line-height: 1; }
.square-empty { display: grid; place-items: center; min-height: 240px; border-bottom: 1px solid var(--line); text-align: center; gap: 14px; }
.square-empty[hidden] { display: none; }
.square-empty h2 { margin: 0; color: var(--muted); font-size: 18px; font-weight: 650; }
@media (max-width: 700px) {
    .square-head { align-items: start; flex-wrap: wrap; }
    .square-head h1 { font-size: 26px; }
    .square-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    .square-filter { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    .square-refresh { grid-column: 2; grid-row: 1; }
    .live-room-row { grid-template-columns: 42px minmax(0, 1fr); gap: 9px 12px; min-height: 0; padding: 15px 4px; }
    .live-room-mark { width: 42px; height: 42px; font-size: 17px; }
    .live-room-tail { grid-column: 2; justify-self: start; gap: 16px; }
    .live-room-title { font-size: 16px; }
}

/* Account center */
.profile-heading { margin-bottom: 12px; }
.profile-summary { display: flex; align-items: center; gap: 15px; padding: 12px 0 24px; border-bottom: 1px solid var(--line); }
.profile-avatar { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #56877a; border-radius: 8px; background: #26423c; color: #bbf1e1; font-size: 22px; font-weight: 800; }
.profile-identity { min-width: 0; }
.profile-identity h2 { margin: 0 0 4px; overflow-wrap: anywhere; font-size: 20px; }
.profile-identity p { margin: 0; color: var(--muted); font-size: 12px; }
.profile-identity p span { padding: 0 5px; }
.profile-summary-meta { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.profile-summary-meta strong { font-size: 15px; white-space: nowrap; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); padding: 26px 0 50px; }
.profile-section { min-width: 0; }
.profile-section > header { margin-bottom: 20px; }
.profile-section > header h2 { margin: 5px 0 0; font-size: 19px; }
.profile-section .form { gap: 15px; }
.profile-section .field input[readonly] { color: var(--muted); cursor: default; }
.profile-section textarea { min-height: 96px; }
.profile-form-actions { margin-top: 5px; }
.profile-session { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 18px 0; border-top: 1px solid var(--line); }
.profile-session > div { display: grid; min-width: 0; gap: 5px; }
.profile-session strong { font-size: 14px; }
.profile-session span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.profile-session form { flex: 0 0 auto; }
@media (max-width: 820px) {
    .profile-grid { grid-template-columns: 1fr; gap: 32px; }
    .profile-section + .profile-section { padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
    .profile-summary { flex-wrap: wrap; }
    .profile-summary-meta { width: 100%; justify-content: space-between; margin-left: 0; padding-left: 67px; }
    .profile-session { align-items: start; flex-direction: column; }
}

/* Password-protected room entry */
.room-gate { min-height: calc(100dvh - 150px); display: grid; place-items: start center; padding: clamp(32px, 9vh, 92px) 0 64px; }
.room-gate-inner { width: min(100%, 520px); min-width: 0; }
.room-gate-status { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; color: #a8efdc; font-size: 12px; font-weight: 700; }
.room-gate-status .live-dot { width: 7px; height: 7px; box-shadow: none; }
.room-gate-status > span { color: var(--muted); }
.room-gate h1 { margin: 8px 0 10px; overflow-wrap: anywhere; font-size: 29px; line-height: 1.24; }
.room-gate-description { margin: 0; color: var(--muted); font-size: 14px; }
.room-gate-meta { display: flex; gap: 18px; margin: 17px 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); color: #b5c2cf; font-size: 12px; }
.room-gate .notice { margin: 0 0 20px; }
.room-gate-form { gap: 18px; }
.room-gate-form .field label { font-weight: 700; }
.room-gate-password { position: relative; }
.room-gate-password input { height: 48px; padding-right: 52px; background: var(--panel); }
.room-gate-password input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(24,198,167,.18); }
.room-gate-submit { width: 100%; min-height: 46px; }
.room-gate-back { display: inline-block; margin-top: 22px; color: #a9b8c6; font-size: 13px; }
.room-gate-back:hover, .room-gate-back:focus-visible { color: #d7e5f1; text-decoration: underline; }
@media (max-width: 560px) {
    .room-gate { min-height: calc(100dvh - 120px); padding-top: 44px; }
    .room-gate h1 { font-size: 25px; }
}