* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif; background:#0f1419; color:#e6e6e6; }
.hidden { display:none !important; }
.muted { color:#8b949e; }
.err { color:#f85149; margin-top:8px; font-size:13px; }
.spacer { flex:1; }

.center-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; }
.center-panel h1 { margin-bottom:2px; }
.theme .sub, .sub { color:#8b949e; margin-top:0; }
.card { background:#161b22; border:1px solid #30363d; border-radius:10px; padding:24px; width:320px; margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.card input { padding:10px 12px; border-radius:6px; border:1px solid #30363d; background:#0d1117; color:#e6e6e6; font-size:14px; }
.card button, button { cursor:pointer; }

button { border:none; border-radius:6px; padding:8px 14px; font-size:14px; background:#238636; color:#fff; }
button:hover { filter:brightness(1.1); }
button.ghost { background:#21262d; color:#c9d1d9; border:1px solid #30363d; }
button.danger { background:#da3633; }
button.small { padding:4px 10px; font-size:12px; }

header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#161b22; border-bottom:1px solid #30363d; }
.brand { font-size:18px; font-weight:600; }
main { padding:20px; max-width:1100px; margin:0 auto; }
.toolbar { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.toolbar h2 { margin:0; font-size:18px; }

table.hosts { width:100%; border-collapse:collapse; background:#161b22; border:1px solid #30363d; border-radius:8px; overflow:hidden; }
table.hosts th, table.hosts td { text-align:left; padding:10px 12px; border-bottom:1px solid #21262d; font-size:14px; }
table.hosts th { background:#21262d; color:#8b949e; font-weight:500; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.dot.on { background:#3fb950; }
.dot.off { background:#484f58; }
.hostname { font-weight:600; }

.window { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:50; display:flex; flex-direction:column; }
.window-head { display:flex; align-items:center; gap:10px; padding:12px 18px; background:#161b22; border-bottom:1px solid #30363d; }
.screen-body { flex:1; display:flex; align-items:center; justify-content:center; padding:16px; position:relative; flex-direction:column; }
#screen-video { max-width:100%; max-height:82vh; border-radius:6px; background:#000; }
.loading { color:#8b949e; padding:30px; }
#no-hosts { margin-top:20px; }