:root{color-scheme:dark;--background:#10131a;--surface:#191e28;--line:#383f50;--text:#f2f3f7;--muted:#acb5c8;--accent:#a9bcff;--accent-text:#18264d;--font:"Segoe UI",Inter,sans-serif;font:16px/1.5 var(--font);color:var(--text);background:var(--background)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
.top{padding:16px max(16px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.top a{color:var(--accent);font-size:.875rem}
.brand{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px}
.brand span,.hint,.profile,.status{color:var(--muted)}
main{max-width:1152px;margin:auto;padding:24px 16px 40px}
h1{font-size:1.625rem;margin:0 0 16px}h2{font-size:1.125rem;margin:0 0 8px}
.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;min-width:0}
.login{max-width:420px;display:grid;gap:8px}.login button{justify-self:start}.login p{margin:0;color:var(--muted)}.login p:empty{display:none}
button,input,select{border:1px solid var(--line);border-radius:8px;min-height:44px;background:var(--background);color:inherit;font:inherit;padding:6px 12px;min-width:0}
button{cursor:pointer;font-size:.875rem}button:disabled{opacity:.5;cursor:default}button:hover:not(:disabled){border-color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.screen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:650}
.settings{display:flex;align-items:center;gap:8px;margin-bottom:12px}.settings select{flex:1;width:100%}.settings label{font-weight:600}
.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start}
.display-header,.screen-actions,.modes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modes{margin-right:auto}.modes button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.status,.profile,.hint{font-size:.875rem;margin:8px 0}.status{min-height:1.5em}
.screen{height:min(62vh,550px);min-height:230px;background:#080a0e;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;place-items:center;touch-action:none}
.screen video,.screen canvas{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;pointer-events:none}
.screen-actions{justify-content:center;margin-top:8px}
table{border-collapse:collapse;width:100%;font-size:.875rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}tbody th{font-weight:500}thead th{color:var(--muted)}
@media(max-width:780px){.layout{grid-template-columns:minmax(0,1fr)}.settings{flex-wrap:wrap}.settings select{flex:1 1 70%}.top{align-items:flex-start}.top a{text-align:right}}
@media(max-width:420px){.top,main{padding-inline:12px}.panel{padding:12px}.screen{height:54vh}.display-header,.modes{gap:6px}}