* { box-sizing: border-box; }
:root { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; }
body { margin:0; background:#0c0c0c; color:#f5f5f5; min-height:100vh; }
button,input { font:inherit; }
button { border:0; border-radius:10px; padding:11px 16px; cursor:pointer; background:#f4f4f4; color:#111; font-weight:700; }
button.secondary { background:#242424; color:#f2f2f2; border:1px solid #343434; }
.shell { max-width:1400px; margin:auto; padding:28px; }
.hidden { display:none !important; }
.login-card { max-width:420px; margin:12vh auto; background:#151515; border:1px solid #262626; border-radius:18px; padding:28px; }
.login-card h1 { margin:0 0 4px; font-size:32px; }
.login-card p { color:#999; margin:0 0 24px; }
.login-card form { display:grid; gap:12px; }
input { padding:13px 14px; background:#0d0d0d; color:#fff; border:1px solid #333; border-radius:10px; outline:none; }
.error { color:#ff8080; min-height:22px; padding-top:10px; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; }
.topbar h1 { margin:0; font-size:30px; }
.topbar span { color:#888; }
.actions { display:flex; gap:10px; align-items:center; }
.computer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.card { background:#151515; border:1px solid #282828; border-radius:16px; padding:18px; }
.card h3 { margin:0 0 7px; }
.status { color:#73dc95; margin-bottom:18px; font-size:14px; }
.card button { width:100%; }
dialog { border:1px solid #303030; border-radius:16px; padding:0; background:#101010; color:#fff; width:min(96vw,1400px); height:min(92vh,900px); }
dialog::backdrop { background:rgba(0,0,0,.82); }
.viewer-head { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-bottom:1px solid #2a2a2a; }
.live { margin-left:12px; font-size:12px; color:#ff6666; }
.viewer-stage { height:calc(100% - 66px); display:grid; place-items:center; background:#050505; overflow:hidden; }
.viewer-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.live-grid { padding:12px; display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:12px; overflow:auto; height:calc(100% - 66px); }
.live-tile { background:#050505; border:1px solid #222; border-radius:12px; overflow:hidden; }
.live-tile header { padding:8px 10px; font-size:13px; background:#161616; }
.live-tile img { width:100%; aspect-ratio:16/9; display:block; object-fit:contain; background:#000; }
@media(max-width:700px){
  .shell{padding:16px}
  .topbar{align-items:flex-start;flex-direction:column}
  .actions{width:100%}
  .actions button{flex:1}
  .live-grid{grid-template-columns:1fr}
}