/* SOC Cameras TV player - dark, large type, 16:9 first. */
:root {
  color-scheme: dark;
  --bg: #000; --fg: #e8e8e8; --muted: #9a9a9a; --warn: #ffb347;
  --accent: #3aa0ff; --panel: #121417; --border: #2a2e33; --live: #37d67a;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.4vw, 26px); }
#app, section { height: 100%; }
section[hidden] { display: none; }
a { color: var(--accent); }
h1 { margin: 0 0 .3em; font-size: 2em; }
.lead { color: var(--muted); margin-top: 0; font-size: 1.15em; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.warn { color: var(--warn); }

/* ---- player ---- */
#player { position: relative; background: #000; overflow: hidden; }
#video { display: block; width: 100vw; height: 100vh; object-fit: contain; background: #000; }
.overlay { position: absolute; left: 2vw; top: 2vh; display: flex; gap: 1em; align-items: baseline;
  pointer-events: none; text-shadow: 0 1px 4px #000; transition: opacity .5s; }
.overlay.quiet { opacity: 0; }
#player.show-ui .overlay { opacity: 1; }
.feed-name { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 1.1em; }
.status { color: var(--muted); }
.status.warn { color: var(--warn); }
.controls { position: absolute; right: 2vw; bottom: 3vh; display: flex; gap: .6em; opacity: 0; transition: opacity .3s; }
#player.show-ui .controls { opacity: 1; }
.btn, button { font: inherit; padding: .5em 1em; border-radius: .5em; border: 1px solid var(--border);
  background: rgba(18, 20, 23, .9); color: var(--fg); cursor: pointer; text-decoration: none; }
.btn:hover, button:hover, .btn:focus, button:focus { border-color: var(--accent); outline: none; }

/* ---- sign-in ---- */
#login, #feeds, #message { padding: 6vh 6vw; box-sizing: border-box; overflow: auto; }
.login-grid { display: grid; grid-template-columns: minmax(180px, 34vh) 1fr; gap: 5vw; align-items: center; margin-top: 4vh; }
.qr { background: #fff; padding: 1.5vh; border-radius: 1vh; aspect-ratio: 1 / 1; box-sizing: border-box; }
.qr svg { width: 100%; height: 100%; display: block; }
.steps ol { font-size: 1.35em; line-height: 1.7; padding-left: 1.2em; margin: 0; }
.code { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.8em;
  letter-spacing: .12em; padding: .05em .4em; border: 2px solid var(--accent); border-radius: .3em; vertical-align: middle; }

/* ---- feed list ---- */
#feeds header { display: flex; justify-content: space-between; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 1.2em; margin-top: 3vh; }
.tile { display: block; padding: 1em 1.2em; background: var(--panel); border: 1px solid var(--border);
  border-radius: .8em; color: var(--fg); text-decoration: none; }
.tile:hover, .tile:focus { border-color: var(--accent); outline: none; }
.tile .name { font-size: 1.3em; font-weight: 600; text-transform: uppercase; }
.tile .meta { color: var(--muted); margin-top: .3em; font-size: .9em; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; background: #666; vertical-align: middle; }
.dot.live { background: var(--live); box-shadow: 0 0 .6em var(--live); }

@media (max-width: 700px) { .login-grid { grid-template-columns: 1fr; } .qr { max-width: 60vw; } }