@font-face{font-family:System;src:local("Segoe UI"),local("Arial")}html,body{margin:0;min-height:100svh;background:#111;color:#eee;font-family:System,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{padding:1.5rem;box-sizing:border-box}.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.header h1{font-size:1.1rem;font-weight:600;margin:0}.panel{margin-bottom:1.5rem}.panel h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#999;margin:0 0 .5rem}.pill{display:inline-block;padding:.3rem .7rem;border-radius:999px;font-size:.85rem;font-weight:600}.pill-unknown{background:#333;color:#aaa}.pill-connecting{background:#4a3b00;color:#fc3}.pill-open{background:#0d3d1f;color:#4ade80}.pill-closed{background:#4a0d0d;color:#f87171}.pill-status-idle{background:#1e2a3d;color:#7dd3fc}.pill-status-recording{background:#4a0d0d;color:#f87171}.pill-status-uploading{background:#4a3b00;color:#fc3}.badges{display:flex;gap:.5rem}.badge{padding:.3rem .7rem;border-radius:.4rem;font-size:.85rem;font-family:monospace;border:1px solid #333}.badge-on{background:#0d3d1f;color:#4ade80;border-color:#4ade80}.badge-off{background:#1a1a1a;color:#666}.log-panel{flex:1}.log{list-style:none;margin:0;padding:0;max-height:60svh;overflow-y:auto;border:1px solid #333;border-radius:.4rem}.log li{padding:.4rem .7rem;font-family:monospace;font-size:.8rem;border-bottom:1px solid #222;white-space:pre-wrap;word-break:break-all}.log li:last-child{border-bottom:none}.hint{text-transform:none;letter-spacing:normal;color:#666;font-weight:400}.kv{list-style:none;margin:0 0 .75rem;padding:0;border:1px solid #333;border-radius:.4rem;overflow:hidden}.kv li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem .7rem;border-bottom:1px solid #222;font-size:.85rem}.kv li:last-child{border-bottom:none}.kv li span{color:#999}.kv li code{font-family:monospace;word-break:break-all;text-align:right}button{background:#1a1a1a;color:#eee;border:1px solid #444;border-radius:.4rem;padding:.5rem .9rem;font-size:.85rem;font-family:System,sans-serif;cursor:pointer}button:hover{border-color:#666}button:disabled{opacity:.5;cursor:default}.error-log{border-color:#4a0d0d}.error-entry{color:#ccc}.error-entry.error-error{color:#f87171}.error-entry.error-warn{color:#fc3}.error-entry.error-info{color:#4ade80}.fatal-error{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;background:#2a0d0d;color:#fff;padding:1.5rem;overflow-y:auto;box-sizing:border-box}.fatal-error h2{margin-top:0}.fatal-error ul{list-style:none;margin:1rem 0 0;padding:0;font-family:monospace;font-size:.85rem}.fatal-error li{padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.15)}