/* Tenka Cloud — TV Display Receiver (16:9, large, readable, dark) */
:root {
  color-scheme: dark;
  --bg: #0b0f17;
  --surface: #141b29;
  --border: #243049;
  --text: #eef3fb;
  --muted: #93a0b8;
  --brand: #3b82f6;
  --ok: #22c55e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  height: 100vh; width: 100vw;
}

.screen { height: 100vh; width: 100vw; display: none; }
.screen.active { display: flex; }

/* top brand bar shared */
.tvbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4vh 2.5vw; z-index: 5;
}
.tvbar .logo { font-weight: 800; font-size: 2vw; color: var(--brand); letter-spacing: .5px; }
.tvbar .sep { color: var(--muted); font-size: 1.6vw; }
.tvbar .feature { color: var(--muted); font-size: 1.6vw; }
.tvbar .spacer { flex: 1; }
.tvbar .conn { display: flex; align-items: center; gap: .6vw; font-size: 1.3vw; color: var(--muted); }
.tvbar .conn .dot { width: 1vw; height: 1vw; border-radius: 50%; background: #f59e0b; }
.tvbar .conn.online .dot { background: var(--ok); }

/* ---------- WAITING / PAIRING screen ---------- */
#waiting { align-items: center; justify-content: center; flex-direction: column; gap: 4vh; }
#waiting .headline { font-size: 3.4vw; font-weight: 700; text-align: center; }
#waiting .headline span { color: var(--brand); }
#waiting .pair-card {
  display: flex; align-items: center; gap: 5vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 4vh 4vw;
}
#waiting .qr { background: #fff; padding: 1.6vw; border-radius: 18px; }
#waiting .qr img { display: block; width: 26vh; height: 26vh; }
#waiting .pair-info { text-align: left; }
#waiting .pair-info .step { color: var(--muted); font-size: 1.5vw; }
#waiting .pair-info .code-label { color: var(--muted); font-size: 1.4vw; margin-top: 3vh; }
#waiting .pair-info .code {
  font-size: 6vw; font-weight: 800; letter-spacing: 1vw; color: var(--text);
}
#waiting .waiting-pulse { color: var(--muted); font-size: 1.6vw; }
#waiting .waiting-pulse::after { content: '…'; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ---------- PAIRED / IDLE screen ---------- */
#idle { align-items: center; justify-content: center; flex-direction: column; gap: 3vh; }
#idle .big { font-size: 3vw; font-weight: 700; }
#idle .sub { font-size: 1.8vw; color: var(--muted); }
#idle .check { font-size: 7vw; color: var(--ok); }

/* ---------- DOCUMENT screen ---------- */
#document { flex-direction: column; padding: 8vh 6vw 5vh; }
#document .doc-title {
  font-size: 3vw; font-weight: 800; margin: 0 0 2vh; color: var(--text);
  border-bottom: 2px solid var(--border); padding-bottom: 1.5vh;
}
#document .doc-body {
  flex: 1; overflow: auto; font-size: 2.1vw; line-height: 1.6; white-space: pre-wrap;
  font-family: ui-serif, Georgia, "Times New Roman", serif; color: #dde6f5;
}
#document .doc-body::-webkit-scrollbar { width: 10px; }
#document .doc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
#document .live-badge {
  position: fixed; bottom: 3vh; right: 3vw; display: flex; align-items: center; gap: .6vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 1vh 1.4vw; font-size: 1.3vw; color: var(--muted);
}
#document .live-badge .pip { width: 1vw; height: 1vw; border-radius: 50%; background: var(--ok); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

#document iframe.collabora { flex: 1; width: 100%; border: none; border-radius: 12px; background: #fff; }

/* ---------- ENDED overlay ---------- */
#ended { align-items: center; justify-content: center; flex-direction: column; gap: 2vh; }
#ended .lock { font-size: 7vw; }
#ended .msg { font-size: 2.6vw; font-weight: 700; }
#ended .sub { font-size: 1.6vw; color: var(--muted); }