:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#132238;background:#eef4f8;font-synthesis:none}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-height:100vh;background:radial-gradient(circle at 20% 0,#d9f1f5 0,transparent 38%),linear-gradient(145deg,#f8fbfd,#e8f1f7);color:#15253a}.topbar{height:72px;padding:0 max(24px,5vw);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dfe8ee;box-shadow:0 2px 12px #1232}.brand{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:800;color:#075f9e}.brand-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:linear-gradient(135deg,#05a6b7,#075f9e);color:#fff;font-size:22px}.server{font-size:13px;color:#496174}.server i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#24b47e;margin-right:5px;box-shadow:0 0 0 4px #24b47e22}main{min-height:calc(100vh - 120px);display:grid;place-items:center;padding:32px 18px}.card{width:min(480px,100%);padding:38px;background:#fff;border:1px solid #dce7ed;border-radius:22px;box-shadow:0 22px 55px #183b5620}.eyebrow{color:#0790a8;font-weight:800;font-size:12px;letter-spacing:.12em}h1{font-size:30px;line-height:1.15;margin:11px 0 12px}h2{margin-top:0}.lead,.card p{color:#647589;line-height:1.55}label{display:block;font-size:13px;font-weight:700;margin:24px 0 8px}input{width:100%;height:56px;border:2px solid #d7e3ea;border-radius:12px;padding:0 16px;font-size:22px;letter-spacing:.08em;outline:none;background:#fbfdfe}input:focus{border-color:#0789b1;box-shadow:0 0 0 4px #0789b117}.invalid{border-color:#d94242}.primary,.secondary,.danger{border:0;border-radius:11px;min-height:48px;padding:0 22px;font-size:16px;font-weight:750;cursor:pointer}.primary{width:100%;margin-top:15px;color:#fff;background:linear-gradient(135deg,#078cb8,#075f9e);box-shadow:0 8px 20px #075f9e38}.secondary{background:#e9f1f5;color:#214157}.danger{background:#d93e3e;color:#fff}.privacy{text-align:center;font-size:12px;margin:18px 0 0}.actions{display:flex;gap:10px}.actions .primary{margin:0}.hidden{display:none!important}.spinner{width:42px;height:42px;border-radius:50%;border:4px solid #dcebf0;border-top-color:#078daf;animation:spin .8s linear infinite;margin:0 auto 24px}@keyframes spin{to{transform:rotate(360deg)}}#status-panel{text-align:center}.session{position:fixed;inset:0;background:#111;display:flex;flex-direction:column;z-index:10}.session-bar{min-height:58px;padding:6px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;background:#fff}.session-tools{display:flex;gap:8px}.session-tools button{min-height:42px}.input-notice{color:#a93232;font-size:13px;font-weight:700}.mobile-keyboard{position:fixed;left:-9999px;bottom:0;width:1px;height:1px;opacity:.01}.screen{flex:1;overflow:auto;display:grid;place-items:center;background:#171b20;touch-action:none}.screen canvas#player{max-width:100%;max-height:100%;outline:none;touch-action:none;cursor:default}.screen canvas#test-yuv-decoder-canvas{display:none}footer{text-align:center;padding:16px;color:#718394;font-size:12px}@media (max-width:600px){.topbar{height:62px;padding:0 16px}.brand{font-size:19px}.server{font-size:0}.server i{font-size:initial}.card{padding:26px 20px;border-radius:18px}h1{font-size:26px}main{padding:22px 14px}.actions{flex-direction:column}.session-bar{min-height:52px}.session-bar strong{display:none}.input-notice{font-size:11px}.session-tools{width:100%;justify-content:flex-end}}