:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #1a2230;
  --muted: #6b7686;
  --accent: #1565c0;
  --danger: #c62828;
  --ok: #2e7d32;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11151b; --card: #1b212b; --ink: #e6ebf2; --muted: #95a0b0; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }

/* --- Login --- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  background: var(--card); border-radius: 16px; padding: 32px;
  width: 100%; max-width: 360px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login-card p.sub { margin: 0 0 24px; color: var(--muted); }
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 12px 0 4px; }
input {
  width: 100%; padding: 12px 14px; border: 1px solid #cfd6e0; border-radius: 10px;
  font-size: 1rem; background: var(--bg); color: var(--ink);
}
button {
  font-size: 1rem; font-weight: 600; border: none; border-radius: 10px;
  padding: 13px 18px; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; width: 100%; margin-top: 20px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid currentColor; }
.error { color: var(--danger); margin-top: 14px; min-height: 1.2em; font-size: 0.9rem; }

/* --- App shell --- */
header.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--card); border-bottom: 1px solid rgba(0,0,0,0.08);
}
header .title { font-weight: 700; font-size: 1.15rem; flex: 1; }
.layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 18px; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }

.devices { display: flex; flex-direction: column; gap: 10px; }
.device {
  background: var(--card); border-radius: 12px; padding: 14px 16px; cursor: pointer;
  border: 2px solid transparent; display: flex; align-items: center; gap: 10px;
}
.device.selected { border-color: var(--accent); }
.device .name { font-weight: 600; flex: 1; }
.pill { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.pill.offline { background: #e0e0e0; color: #555; }
.pill.online { background: #e8f5e9; color: var(--ok); }
.pill.active { background: #e3f2fd; color: var(--accent); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.stage { background: var(--card); border-radius: 14px; padding: 18px; min-height: 60vh; display: flex; flex-direction: column; }
.stage .placeholder { margin: auto; color: var(--muted); text-align: center; max-width: 320px; }
.viewer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.viewer-head .who { font-weight: 700; font-size: 1.1rem; flex: 1; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.2rem; color: var(--accent); }
.screen-frame { flex: 1; display: grid; place-items: center; background: #000; border-radius: 10px; overflow: hidden; }
.screen-frame img { max-width: 100%; max-height: 70vh; object-fit: contain; }

/* --- Modal --- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: grid; place-items: center; padding: 24px; }
.modal { background: var(--card); border-radius: 16px; padding: 28px; max-width: 360px; width: 100%; text-align: center; }
.modal h2 { margin: 0 0 6px; }
.modal .code { font-size: 2.8rem; font-weight: 800; letter-spacing: 0.35rem; margin: 12px 0; }
.modal img.qr { width: 220px; height: 220px; background: #fff; border-radius: 10px; padding: 8px; }
.modal .hint { color: var(--muted); font-size: 0.9rem; margin: 12px 0 20px; }
.hidden { display: none !important; }