:root{--bg: #070a0e;--bg-2: #0c1118;--panel: #111721;--panel-2: #151d29;--line: #1e2836;--line-2: #2a3547;--txt: #e6edf6;--txt-dim: #93a1b5;--txt-mute: #63718a;--accent: #64d2ff;--accent-2: #3aa8f0;--ok: #3ddc97;--warn: #f5c451;--err: #ff6b6b;--radius: 14px;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}body{min-height:100vh;min-height:100dvh;overscroll-behavior-y:none}#app{min-height:100vh;min-height:100dvh}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font-family:inherit;font-size:15px;color:inherit}.btn{appearance:none;border:1px solid var(--line-2);background:linear-gradient(180deg,#18212e,#121a25);color:var(--txt);border-radius:10px;padding:9px 13px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform .06s ease,background .15s ease,border-color .15s ease,opacity .15s ease;min-height:40px;touch-action:manipulation}.btn:hover:not(:disabled){border-color:var(--accent-2);background:linear-gradient(180deg,#1d2938,#16202c)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#2b8fd6,#1d6fb2);border-color:#3aa8f0;color:#04121c}.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#4aa8e8,#2479bd)}.btn.ok{border-color:#276b50}.btn.danger{border-color:#6b2c2c}.btn.ghost{background:transparent}.btn.tiny{padding:5px 9px;min-height:30px;font-size:13px;border-radius:8px}.btn.icon{min-width:40px;padding:8px 10px;font-size:15px}input[type=text],input[type=password],input[type=url],select{background:#0b1017;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;min-height:40px;width:100%}input:focus,select:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px #3aa8f026}.toasts{position:fixed;left:50%;transform:translate(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9999;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 24px));pointer-events:none}.toast{pointer-events:auto;background:#16202c;border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:10px;padding:10px 12px;font-size:14px;box-shadow:0 10px 30px #00000080;animation:toast-in .18s ease-out;word-break:break-word}.toast-error{border-left-color:var(--err)}.toast-ok{border-left-color:var(--ok)}.toast.out{opacity:0;transition:opacity .2s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.login-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(1200px 600px at 15% -10%,rgba(58,168,240,.16),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(61,220,151,.09),transparent 55%),var(--bg)}.login-card{width:100%;max-width:400px;background:linear-gradient(180deg,#151d29f5,#0d121af5);border:1px solid var(--line);border-radius:18px;padding:26px 22px;box-shadow:0 24px 60px #0000008c}.login-card h1{margin:0 0 4px;font-size:22px;letter-spacing:-.01em}.login-card .hin{color:var(--txt-mute);font-size:13px;margin-bottom:20px;font-family:var(--mono)}.login-card label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-mute);margin:0 0 6px}.login-card .btn{width:100%;margin-top:16px;min-height:44px}.login-err{margin-top:14px;border:1px solid #5c2626;background:#ff6b6b1a;color:#ffc9c9;border-radius:10px;padding:9px 11px;font-size:13.5px;word-break:break-word}.login-foot{margin-top:18px;font-size:12px;color:var(--txt-mute);font-family:var(--mono)}.logo-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#64d2ff,#1d6fb2);color:#04121c;font-family:var(--mono);font-weight:700;font-size:20px;margin-bottom:14px}.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:#090d12eb;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#64d2ff,#1d6fb2);color:#04121c;font-family:var(--mono);font-weight:700}.brand h1{margin:0;font-size:15.5px;white-space:nowrap}.brand .sub{font-size:11px;color:var(--txt-mute);font-family:var(--mono)}.appbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}.conn{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-family:var(--mono);color:var(--txt-dim);border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;white-space:nowrap}.conn .dot{width:8px;height:8px;border-radius:50%;background:var(--txt-mute)}.conn[data-state=live] .dot{background:var(--ok);box-shadow:0 0 #3ddc97b3;animation:pulse 1.8s infinite}.conn[data-state=connecting] .dot,.conn[data-state=reconnecting] .dot{background:var(--warn);animation:blink 1s infinite}.conn[data-state=closed] .dot{background:var(--err)}@keyframes pulse{70%{box-shadow:0 0 0 8px #3ddc9700}to{box-shadow:0 0 #3ddc9700}}@keyframes blink{50%{opacity:.35}}.container{padding:14px 14px calc(28px + env(safe-area-inset-bottom,0px));max-width:1280px;margin:0 auto}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}.stat label{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:4px}.stat b{font-family:var(--mono);font-size:15px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stat small{display:block;color:var(--txt-mute);font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards{display:grid;grid-template-columns:1fr;gap:14px}@media (min-width: 860px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1400px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:14px;min-width:0;transition:border-color .2s ease,box-shadow .2s ease}.card[data-status=running]{border-color:#24503f;box-shadow:inset 0 1px #3ddc9714}.card[data-status=error]{border-color:#5c2626}.card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.card-head h3{margin:0;font-size:15.5px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-head .spacer{margin-left:auto}.badge{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);background:#0d141d;color:var(--txt-dim);white-space:nowrap}.badge[data-s=running]{color:#062f21;background:var(--ok);border-color:var(--ok)}.badge[data-s=starting],.badge[data-s=stopping]{color:#2a1e04;background:var(--warn);border-color:var(--warn)}.badge[data-s=error]{color:#2b0808;background:var(--err);border-color:var(--err)}.badge[data-s=stopped]{color:var(--txt-dim)}.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-bottom:12px}@media (min-width: 560px){.kv{grid-template-columns:repeat(4,minmax(0,1fr))}}.kv .cell{min-width:0}.kv .cell label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:3px}.kv .cell .v{font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kv .wide{grid-column:1 / -1}.kv .wide .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.err-line{color:#ffb4b4;font-family:var(--mono);font-size:12px;white-space:normal;word-break:break-word}.field{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.field input{flex:1 1 180px;min-width:0;font-family:var(--mono);font-size:13.5px}.field .hint{font-size:11px;color:var(--txt-mute);font-family:var(--mono);width:100%}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions .grow{flex:1 1 auto}.shot-wrap{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#05080c;position:relative}.shot-wrap img{display:block;width:100%;height:auto}.shot-wrap .empty{padding:16px;text-align:center;font-size:12px;color:var(--txt-mute);font-family:var(--mono)}.shot-wrap .stamp{position:absolute;right:6px;bottom:6px;font-family:var(--mono);font-size:10.5px;background:#05080cbf;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;color:var(--txt-dim)}.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;animation:rot .7s linear infinite;vertical-align:-2px}@keyframes rot{to{transform:rotate(360deg)}}.view{position:fixed;inset:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:#04070a;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}.vbar{flex:0 0 auto;background:#0a0e14f5;border-bottom:1px solid var(--line);padding:6px calc(6px + env(safe-area-inset-right,0px)) 6px calc(6px + env(safe-area-inset-left,0px));padding-top:calc(6px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px}.vrow{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.vrow::-webkit-scrollbar{display:none}.vrow .url{flex:1 1 auto;min-width:120px;font-family:var(--mono);font-size:13px;min-height:34px;padding:6px 9px}.vrow select{width:auto;min-height:34px;padding:5px 8px;font-size:13px}.vrow .btn{min-height:34px;padding:5px 10px;font-size:13.5px;flex:0 0 auto}.vstat{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--txt-dim);white-space:nowrap;overflow-x:auto}.vstat .sep{color:var(--line-2)}.vstat .wsstate[data-s=live]{color:var(--ok)}.vstat .wsstate[data-s=connecting],.vstat .wsstate[data-s=reconnecting]{color:var(--warn)}.vstat .wsstate[data-s=closed]{color:var(--err)}.vstat .meta{overflow:hidden;text-overflow:ellipsis;color:var(--txt-mute)}.stage{position:relative;flex:1 1 auto;min-height:0;background:#04070a;overscroll-behavior:none;touch-action:none;display:flex}.canvas-wrap{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#04070a;touch-action:none;overscroll-behavior:none;contain:strict}.canvas-wrap:fullscreen,.canvas-wrap:-webkit-full-screen{width:100vw;height:100vh;background:#000}.zoomer{position:absolute;inset:0;transform-origin:center center;will-change:transform}#screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center;background:#000;display:block;touch-action:none;image-rendering:-webkit-optimize-contrast;cursor:crosshair;z-index:2}#screen.rot90{transform:translate(-50%,-50%) rotate(90deg)}#screen.rot270{transform:translate(-50%,-50%) rotate(-90deg)}.view-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22px;font-family:var(--mono);font-size:13.5px;color:var(--txt-dim);background:#04070ad1;z-index:3;gap:10px;align-content:center}.view-overlay .big{font-size:16px;color:var(--txt)}.view-overlay.hidden{display:none}.vfoot{flex:0 0 auto;display:flex;gap:6px;align-items:center;padding:6px calc(6px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(6px + env(safe-area-inset-left,0px));background:#0a0e14f5;border-top:1px solid var(--line)}.vfoot input{flex:1 1 auto;min-width:0;font-size:14px;min-height:38px}.vfoot .btn{min-height:38px;flex:0 0 auto}.kbfield,input.kbfield{position:fixed;left:0;bottom:0;width:1px;height:1px;min-height:1px;max-width:1px;opacity:.01;padding:0;margin:0;border:0;background:transparent;color:transparent;caret-color:transparent;z-index:1;font-size:16px;pointer-events:none}@media (orientation: landscape) and (max-height: 520px){.vbar{padding-top:4px;padding-bottom:4px;gap:4px}.vrow .btn,.vrow select,.vrow .url{min-height:30px;font-size:12.5px;padding:4px 8px}.vstat{font-size:10.5px}.vfoot{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}.vfoot input,.vfoot .btn{min-height:32px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}