:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#f5f7fb;background:#070910;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:
radial-gradient(circle at 15% 10%,rgba(107,81,255,.22),transparent 36rem),
radial-gradient(circle at 90% 20%,rgba(24,178,255,.13),transparent 32rem),#070910}
a{color:#cfc8ff;text-decoration:none}button,input{font:inherit}
.center{min-height:100vh;display:grid;place-items:center;padding:24px}.glass{background:rgba(17,20,32,.76);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.4);backdrop-filter:blur(24px);border-radius:24px}
.login{width:min(420px,100%);padding:34px}.logo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#826cff,#41c8ff);box-shadow:0 10px 35px rgba(102,89,255,.35)}
h1{font-size:clamp(2rem,5vw,4.3rem);letter-spacing:-.055em;margin:.35em 0 .15em}h2{margin:0 0 .35rem}.muted{color:#9ba3b5}.eyebrow{letter-spacing:.16em;font-weight:800;font-size:.75rem;color:#9d8cff}
label{display:grid;gap:8px;color:#cbd1df;font-size:.9rem}input{width:100%;padding:13px 14px;border-radius:13px;border:1px solid #30364a;background:#0c0f18;color:white;outline:none}input:focus{border-color:#8d7cff;box-shadow:0 0 0 3px rgba(141,124,255,.15)}
form{display:grid;gap:16px}button{border:0;border-radius:13px;padding:12px 16px;background:linear-gradient(135deg,#816bff,#4bbfff);color:white;font-weight:800;cursor:pointer}button:disabled{opacity:.55}.secondary{background:#24293a}.danger{background:#7b2636}.link{background:none;padding:0;color:#cfc8ff}
.alert,.error{padding:12px 14px;border-radius:12px;background:rgba(255,82,112,.13);border:1px solid rgba(255,82,112,.25);color:#ffb4c2}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,9,16,.75);backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.topbar nav{display:flex;gap:18px;align-items:center}.inline{display:inline}.wrap{max-width:1180px;margin:auto;padding:46px 22px 80px}.hero{margin-bottom:34px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.camera{background:#0d1019;border:1px solid rgba(255,255,255,.09);border-radius:23px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.28)}.video-shell{aspect-ratio:16/9;background:#05070b;display:grid}.video-shell iframe,.video-shell video,.placeholder{width:100%;height:100%;border:0}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle,rgba(104,86,255,.13),transparent 55%)}.placeholder[hidden]{display:none}.pulse{width:12px;height:12px;border-radius:50%;background:#53e19b;box-shadow:0 0 0 8px rgba(83,225,155,.1)}.status{color:#929bad;font-size:.85rem}.camera-meta{padding:17px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.camera-meta div{display:grid;gap:4px}.camera-meta small,.device small,.stream-row small{color:#858ea1}.camera .error{margin:0 18px 18px}.admin{display:grid;gap:20px}.panel{padding:24px}.panel-head,.row,.stream-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.badge{padding:7px 10px;border-radius:999px;background:#2a2e3c;color:#aeb5c6;font-size:.8rem}.badge.ok{background:rgba(62,221,145,.13);color:#69e6a8}.form-grid{grid-template-columns:1fr 1fr auto;align-items:end}.device-list{display:grid;gap:10px;margin:16px 0}.device,.stream-row{padding:14px;border-radius:14px;background:#0d111c;border:1px solid rgba(255,255,255,.07)}.device{display:grid;grid-template-columns:1fr auto;gap:5px}.device small{grid-column:1/-1}.stream-row div{display:grid;gap:5px}.stream-row pre{white-space:pre-wrap;max-width:780px;color:#ffb5c1}.warning{border-color:rgba(255,190,70,.25)}code{background:#090b12;padding:.15em .4em;border-radius:6px}
@media(max-width:760px){.grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.panel-head,.row,.stream-row{align-items:stretch;flex-direction:column}.topbar .muted{display:none}}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.facts>div{display:grid;gap:6px;padding:14px;border-radius:14px;background:#0d111c;border:1px solid rgba(255,255,255,.07)}.facts small{color:#858ea1}.stream-row details{margin-top:8px}.stream-row summary{cursor:pointer;color:#bfc6d6}.stream-row pre{margin:.5rem 0 0;max-height:260px;overflow:auto}.camera iframe,.camera video{background:#05070b}.camera video{object-fit:contain}@media(max-width:760px){.hero-row{align-items:flex-start;flex-direction:column}.facts{grid-template-columns:1fr 1fr}}@media(max-width:480px){.facts{grid-template-columns:1fr}}


/* SKYDESK-START */
.skydesk-panel{margin-top:24px;display:grid;gap:20px}
.skydesk-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.8fr);gap:20px;align-items:start}
.skydesk-screen{position:relative;overflow:hidden;min-height:360px;aspect-ratio:16/9;border-radius:18px;background:#020409;border:1px solid rgba(255,255,255,.09);display:grid;place-items:center}
#skydesk-canvas{display:block;width:100%;height:100%;object-fit:contain;outline:none;background:#020409;cursor:default}
#skydesk-canvas.control-active{cursor:crosshair;box-shadow:inset 0 0 0 2px rgba(83,225,155,.7)}
.skydesk-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(2,4,9,.76);backdrop-filter:blur(8px);font-weight:800;color:#d9ddec;pointer-events:none}
.skydesk-overlay[hidden]{display:none}
.skydesk-controls{display:grid;gap:14px}
.skydesk-controls select{width:100%;padding:12px 13px;border-radius:13px;border:1px solid #30364a;background:#0c0f18;color:#fff}
.toggle-row{grid-template-columns:auto 1fr;align-items:center;padding:12px 13px;border-radius:13px;background:#0d111c;border:1px solid rgba(255,255,255,.07)}
.toggle-row input{width:auto;margin:0}
.skydesk-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.skydesk-button-grid.actions button:last-child{grid-column:1/-1}
.skydesk-controls hr{width:100%;border:0;border-top:1px solid rgba(255,255,255,.08);margin:2px 0}
.skydesk-state{display:grid;gap:6px;padding:12px 14px;border-radius:13px;background:#0d111c;border:1px solid rgba(255,255,255,.07);color:#aeb6c8}
.skydesk-safety{margin:0;font-size:.85rem}
.skydesk-pair-row{margin-top:18px;padding:16px;border-radius:14px;background:#0d111c;border:1px solid rgba(255,255,255,.07)}
.pair-code{display:block;margin-top:16px;padding:18px;text-align:center;font-size:clamp(1.5rem,5vw,2.5rem);letter-spacing:.18em;background:#080b12;border:1px solid rgba(129,107,255,.35);border-radius:16px;color:#dcd5ff;user-select:all}
@media(max-width:900px){.skydesk-layout{grid-template-columns:1fr}.skydesk-screen{min-height:240px}}
@media(max-width:520px){.skydesk-button-grid{grid-template-columns:1fr}.skydesk-button-grid.actions button:last-child{grid-column:auto}}
/* SKYDESK-END */