:root{color-scheme:dark;--bg:#101916;--panel:#17221d;--line:#2b3c33;--text:#edf5ef;--muted:#9eb2a6;--green:#9ae3b4;--danger:#ffadb0}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,input,select{font:inherit}
button,a,input,select{ -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:not-allowed}
button,a{transition:background .15s,border-color .15s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}
button{min-height:38px;border:1px solid var(--line);border-radius:8px;padding:8px 14px;background:#24372c;color:var(--text);font-weight:600;white-space:nowrap}
button:hover:not(:disabled){background:#304c3c}
.quiet{background:#1b2a22}
.good{background:#9ae3b4;color:#103322;border-color:#9ae3b4}
.good:hover:not(:disabled){background:#bbf4ce}
.danger{color:var(--danger);background:#382326;border-color:#644044}
.danger:hover:not(:disabled){background:#543034}
.page-width{width:min(1320px,calc(100% - 64px));margin-inline:auto}
.masthead{background:linear-gradient(110deg,#103b2a,#102f24);border-bottom:1px solid #315443}
.header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:28px}
.brand{display:flex;align-items:center;gap:12px}
.mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid #69947a;border-radius:12px;background:#ffffff0a;color:#a8e8bc;font-size:31px}
h1{margin:0;font-size:23px;letter-spacing:-.8px;white-space:nowrap}
h1 span{font-weight:400;color:#abc5b5}
.subhead{color:#a0bdac;font-size:12px;margin-top:3px}
.stats{display:flex;gap:28px}
.stat{min-width:52px}
.stat-value{font-size:24px;font-weight:650;line-height:1.2}
.stat-label{font-size:11px;color:#a6c3b1;margin-top:4px}
.num{font-variant-numeric:tabular-nums}
.lobby-link{display:inline-flex;align-items:center;gap:22px;text-decoration:none;white-space:nowrap;color:#123322;background:#b5edc7;border:1px solid #d3f8df;border-radius:9px;padding:11px 16px;font-weight:700;box-shadow:0 4px 14px #0002}
.lobby-link:hover{background:#d3f8df}
.lobby-link span{font-size:19px}
.tabs{display:flex;gap:8px}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;padding:13px 20px;color:#a8c2b2;display:flex;align-items:center;gap:10px}
.tabs button[aria-selected=true]{border-bottom-color:#a5eac0;color:#e4ffed;background:#ffffff08}
.tabs button:hover{background:#ffffff0c}
.tab-count{font-size:11px;background:#ffffff12;padding:1px 7px;border-radius:5px}
.main{padding-block:28px 48px}
h2{margin:0;font-size:22px;letter-spacing:-.5px}
.section-heading p{margin:4px 0 0;color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;gap:16px;margin:22px 0 16px}
input,select{color:var(--text);background:#111c16;border:1px solid var(--line);border-radius:8px;min-height:40px;padding:9px 12px;min-width:0}
input::placeholder{color:#8ba394}
.toolbar input{width:min(360px,100%)}
.table-shell{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
th{color:#a9beb0;background:#1d2b23;font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
td,th{padding:16px;border-bottom:1px solid #29382f}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#ffffff03}
td{font-size:13px}
.action-column{text-align:right}
td:last-child{text-align:right}
.name-cell{display:flex;flex-direction:column;gap:3px}
.table-name{font-weight:650;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.table-id,.muted{color:var(--muted);font-size:12px}
.table-id{font-weight:400}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:6px;padding:4px 9px;background:#ffffff08;color:#c8d6cc}
.badge.live{background:#2c8d4f22;color:#a7e9be}
.badge.live:before{content:'';height:6px;width:6px;border-radius:50%;background:#85d9a0}
.badge.paused{background:#e3b45518;color:#edd094}
.passcode-pill{font:12px ui-monospace,SFMono-Regular,monospace;padding:5px 8px;border:1px solid #46513a;border-radius:6px;background:#d5c78a0a;color:#e0d7ab;display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.observe-button{min-height:32px;padding:5px 10px;background:#244a34;color:#b9eecb;border-color:#396347}
.icon-button{font-size:20px;min-width:36px;min-height:34px;padding:0 7px;line-height:1}
.action-menu{position:fixed;z-index:10;width:216px;padding:5px;background:#213329;border:1px solid #45624f;border-radius:10px;box-shadow:0 16px 48px #0007}
.action-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:5px;font-size:13px;font-weight:500;min-height:40px}
.action-menu button:hover,.action-menu button:focus{background:#324c3b}
.action-menu .danger{border-top:1px solid #405044;border-radius:0 0 5px 5px;margin-top:4px;padding-top:12px}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.auth{display:flex;align-items:center;gap:12px;padding:20px;border:1px solid #496d54;border-radius:12px;background:#1d3225;margin-bottom:28px}
.auth>div{margin-right:auto}
.auth input{width:200px}
.hidden,[hidden]{display:none!important}
.toast{position:fixed;bottom:24px;right:24px;max-width:min(420px,calc(100% - 48px));padding:14px 18px;border:1px solid #54795e;border-radius:10px;background:#243a2c;box-shadow:0 8px 30px #0005;z-index:30}
dialog{width:min(520px,calc(100% - 32px));color:var(--text);background:#17271e;border:1px solid #46604d;border-radius:16px;padding:24px;box-shadow:0 24px 100px #0008}
dialog::backdrop{background:#0009}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.player-action{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.player-action label{font-weight:650}
.player-action p{margin:5px 0 12px}
.picker-row{display:flex;gap:10px}
.picker-row select{flex:1;width:100%}

@media(max-width:1100px){.header{gap:20px;flex-wrap:wrap}
.stats{gap:20px}
.lobby-link{margin-left:auto}
.auth{flex-wrap:wrap}
.auth>div{width:100%}
}
@media(max-width:700px){.page-width{width:calc(100% - 32px)}
.header{padding-block:20px;gap:20px}
.brand{flex:1}
h1{font-size:21px}
.stats{order:3;width:100%;justify-content:space-between;border-top:1px solid #ffffff12;padding-top:18px}
.lobby-link{font-size:12px;padding:8px 10px;gap:10px}
.tabs{margin-top:4px}
.main{padding-top:22px}
td,th{padding:12px}
.auth input{width:100%}
.auth>button{width:100%}
.picker-row{flex-wrap:wrap}
.picker-row select{flex-basis:100%}
}