:root{color-scheme:dark;--bg:#0b0d11;--panel:#14181f;--panel2:#1a2029;--line:#29313d;--text:#f2f5f8;--muted:#8e9aaa;--cyan:#27c4df;--orange:#ffad32;--green:#43d17c;--red:#ff5a66;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 25% -10%,#182431 0,transparent 32%),var(--bg);color:var(--text);min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 clamp(18px,4vw,52px);gap:28px;background:rgba(11,13,17,.9);position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),#3872f1);font-weight:800}.brand div{display:grid}.brand small,.eyebrow,small,.hint{color:var(--muted)}#setup-select{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 36px 10px 12px;color:var(--text);font:inherit}.clock{font-variant-numeric:tabular-nums;color:var(--muted);min-width:55px}main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(330px,.85fr);gap:22px;padding:28px clamp(18px,4vw,52px) 52px;max-width:1780px;margin:auto}.panel{background:linear-gradient(145deg,rgba(24,29,37,.97),rgba(17,20,26,.97));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.2)}.hero{padding:20px;align-self:start}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.panel-title h1,.panel-title h2{margin:3px 0 0;font-size:clamp(1.25rem,2vw,1.65rem)}.eyebrow{font-size:.68rem;letter-spacing:.16em;font-weight:800;color:var(--cyan)}.status-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.status{font-size:.76rem;background:var(--panel2);border:1px solid var(--line);padding:7px 10px;border-radius:999px;color:var(--muted)}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#59616d;margin-right:6px}.status.online i{background:var(--green);box-shadow:0 0 8px var(--green)}.status.error i{background:var(--red)}.video-wrap{aspect-ratio:16/9;background:#050608;border-radius:13px;overflow:hidden;position:relative;border:1px solid #242a33}.video-wrap img{width:100%;height:100%;display:block;object-fit:contain;position:relative;z-index:2}.placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}.video-overlay{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;display:flex;justify-content:space-between;pointer-events:none;font-size:.75rem;text-shadow:0 1px 4px #000}.video-overlay span{background:rgba(0,0,0,.6);padding:5px 8px;border-radius:7px}#recording-badge{color:#ff5967;font-weight:800}.camera-actions{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}.camera-actions details{margin-left:auto;position:relative}.camera-actions summary{cursor:pointer;color:var(--muted);font-size:.85rem}.camera-controls{position:absolute;right:0;top:32px;z-index:5;padding:14px;background:#1d232c;border:1px solid var(--line);border-radius:12px;display:flex;gap:8px;align-items:end;box-shadow:0 12px 30px #0008}.camera-controls label{font-size:.7rem;color:var(--muted);display:grid;gap:4px}.camera-controls select,.camera-controls input{background:#10141a;border:1px solid var(--line);color:var(--text);padding:8px;border-radius:8px;width:100px}.button,button{font:inherit;color:var(--text);cursor:pointer}.button{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--panel2);font-weight:700}.button:hover,button:hover{filter:brightness(1.16)}.button:disabled,button:disabled{opacity:.38;cursor:not-allowed}.button.primary{background:var(--cyan);border-color:var(--cyan);color:#071015}.button.success{background:#196c42;border-color:#288956}.button.danger{background:#5f2630;border-color:#8d3541}.button.secondary{background:#252c36}.button.quiet{background:transparent;color:var(--muted);padding:8px 10px}.side-column{display:grid;gap:22px}.power-panel,.remote-panel,.recordings-panel{padding:20px}.power-panel #watts{font-size:1.4rem;color:var(--orange)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.metrics span{background:var(--panel2);padding:10px;border-radius:10px;display:grid;gap:2px}.metrics small{font-size:.67rem}.metrics b{font-size:.9rem}.power-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.power-actions .success{grid-column:1/-1}.hint{font-size:.72rem;line-height:1.4;margin:12px 0 0}.job-box{display:flex;gap:10px;align-items:center;background:#202936;border:1px solid #354359;padding:12px;border-radius:11px;margin-bottom:14px}.job-box div{display:grid}.job-box small{margin-top:2px}.spinner{width:20px;height:20px;border:2px solid #526071;border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.remote-ready{font-size:.7rem;color:var(--muted)}.remote{max-width:340px;margin:auto}.remote button{background:#242b35;border:1px solid #343d49;border-radius:10px;min-height:38px;padding:6px 10px}.remote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}.remote-row.spread{grid-template-columns:1fr 1fr 1fr}.remote-row .round{border-radius:50%;width:42px;justify-self:start}.remote-row .power{color:var(--red);font-size:1.15rem}.nav-pad{width:164px;height:164px;margin:15px auto;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);background:#1b2028;border-radius:50%;padding:7px;border:1px solid #353e49}.nav-pad button{border:0;background:transparent}.nav-pad .up{grid-column:2}.nav-pad .left{grid-row:2;grid-column:1}.nav-pad .ok{grid-row:2;grid-column:2;border-radius:50%;background:#2c3642}.nav-pad .right{grid-row:2;grid-column:3}.nav-pad .down{grid-row:3;grid-column:2}.rockers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.rockers>div{display:grid;grid-template-columns:1fr;gap:5px;text-align:center}.rockers small{font-size:.62rem;letter-spacing:.1em}.rockers span{height:38px;display:grid;place-items:center;color:var(--muted)}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:11px 0}.colors button{min-height:9px;height:9px;border:0;padding:0}.colors [data-ir=red]{background:#eb4d5d}.colors [data-ir=green]{background:#42c873}.colors [data-ir=yellow]{background:#e9bd3d}.colors [data-ir=blue]{background:#3979e9}.digits{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.media button{font-size:1.05rem}.recordings-panel{grid-column:1/-1}.recordings{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}.recording{display:flex;align-items:center;gap:12px;padding:12px;background:var(--panel2);border-radius:11px;color:var(--text);text-decoration:none}.recording-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#293748;color:var(--cyan)}.recording div{display:grid;min-width:0}.recording strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.83rem}.recording small{font-size:.7rem}.empty{color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;background:#28313d;border:1px solid #435064;border-radius:12px;padding:13px 17px;box-shadow:0 12px 40px #0009;z-index:20;max-width:420px}.toast.error{border-color:#9b3b49;background:#431f26}@media(max-width:980px){main{grid-template-columns:1fr}.side-column{grid-template-columns:1fr 1fr}.recordings-panel{grid-column:1}.remote-panel{grid-row:span 2}}@media(max-width:720px){.topbar{height:66px;gap:12px}.clock{display:none}.brand small{display:none}main{padding:14px;gap:14px}.side-column{grid-template-columns:1fr}.hero,.power-panel,.remote-panel,.recordings-panel{padding:14px}.status-row{display:none}.camera-actions details{width:100%;margin:5px 0}.camera-controls{position:static;margin-top:10px;flex-wrap:wrap}.power-actions{grid-template-columns:1fr}.power-actions .success{grid-column:auto}}