/* Design tokens shared by every page. Palette taken from PyCon HK 2026 (https://pycon.hk/2026/en):
   paper #faf7f0, ink #172033, blue #2f559a, red #d71920, yellow #ffd343.
   Light is the default; dark follows the OS unless <html data-theme="light|dark"> forces one. */
:root {
  --bg: #faf7f0;        /* page background (conference paper) */
  --panel: #ffffff;     /* cards, inputs */
  --ink: #172033;       /* main text */
  --muted: #64748b;     /* secondary text, original-language line */
  --line: #e2e8f0;      /* borders */
  --accent: #d71920;    /* primary action (PyCon red, like "Register now") */
  --accent-ink: #ffffff;/* text on the accent colour */
  --rec: #d71920;       /* recording / errors / threshold marker (PyCon red) */
  --chip: #fff1b8;      /* small pills (time, speaker, language): soft yellow */
  --cursor: #2f559a;    /* blinking cursor while a translation streams */
  --ok: #016735;        /* connected indicator */
  --blue: #2f559a;      /* labels, links, meter */
  --edge: #172033;      /* the 2px outline PyCon puts on buttons and cards */
  --shadow: 0 6px 18px rgba(23,32,51,.12);
  --radius: 14px;
  --font: Roboto, system-ui, -apple-system, "Segoe UI", "Noto Sans", "PingFang HK", "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101827; --panel: #172033; --ink: #f1ece0; --muted: #94a3b8; --line: #293548;
    --accent: #ff4d55; --accent-ink: #101827; --rec: #ff6b72; --chip: #293548; --cursor: #ffd343; --ok: #3ddc97; --blue: #8fb0ee; --edge: #94a3b8; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #101827; --panel: #172033; --ink: #f1ece0; --muted: #94a3b8; --line: #293548;
  --accent: #ff4d55; --accent-ink: #101827; --rec: #ff6b72; --chip: #293548; --cursor: #ffd343; --ok: #3ddc97; --blue: #8fb0ee; --edge: #94a3b8; --shadow: none;
}
::selection { background: #ffd343; color: #172033; }
[hidden] { display: none !important; }

/* direction label: "Cantonese → English · 1.3 s" (the arrow is an inline SVG drawn by js/common.js) */
.arrow { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; margin: 0 0.2em; opacity: .8; }
.dir-time { opacity: .75; }

/* ---- PyCon HK look: ribbon, 2px navy outlines, pill buttons, uppercase blue labels ---- */
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; display: block; height: 14px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, #d71920 0 10px, transparent 10px 14px, #2f559a 14px 18px, transparent 18px 28px, #d71920 28px 30px, transparent 30px 44px),
              repeating-linear-gradient(0deg, transparent 0 4px, rgba(250,247,240,.55) 4px 5px); }
body h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
body .sub, body footer { color: var(--muted); }
body header .sub { font-weight: 600; }
body a { color: var(--blue); }
body button, body .button, body select, body input[type=text], body input[type=password] {
  border: 2px solid var(--edge); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 600; }
body input[type=text], body input[type=password], body .settings input[type=text], body .settings input[type=password] { border: 2px solid var(--edge); border-radius: 999px; font-weight: 400; padding-left: 14px; padding-right: 14px; }
body button:hover { border-color: var(--edge); background: var(--chip); }
body button.primary, body .button { background: var(--accent); color: var(--accent-ink); border-color: var(--edge); text-decoration: none; padding: 10px 20px; }
body button.primary:hover, body .button:hover { background: var(--accent); filter: brightness(.92); }
body button.primary.live { background: var(--edge); border-color: var(--edge); color: var(--panel); }
body .bar { background: var(--bg); border-bottom: 1px solid var(--line); }
body .settings { border-bottom: 1px solid var(--line); }
body .settings label { text-transform: none; }
body .card, body .room, body .empty, body .join, body .note {
  background: var(--panel); border: 2px solid var(--edge); border-radius: 20px; box-shadow: var(--shadow); }
body .empty, body .join { border-style: solid; }
body .note { background: var(--chip); box-shadow: none; }
body .room:hover { border-color: var(--edge); transform: translateY(-1px); }
body .card .meta { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--blue); }
body .chip { background: transparent; border: 1.5px solid var(--edge); color: var(--ink); font-weight: 600; }
body .pill { background: transparent; border: 0; padding: 0; color: var(--ink); font-weight: 600; }
body .pill:empty { display: none; }
body .room-list .pill, body .bar .pill#status { border: 0; }
body .card .chip { color: var(--ink); }
body .tr { font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
body .src { color: var(--muted); }
body .meter { background: var(--chip); border: 1.5px solid var(--edge); }
body .meter > i { background: var(--blue); }
body .meter > b { background: var(--rec); }
body .settings input[type=range] { accent-color: var(--blue); }
body .room.live .state { color: var(--ok); font-weight: 700; }
body .dot.on { background: var(--ok); }
body .room .name { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- footer brand strip: PyCon HK 2026 / nuGPU / DeepComputing ---- */
.brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 40px; padding: 22px 16px 8px; border-top: 1px solid var(--line); }
.brand-item { display: inline-flex; align-items: center; }
.brand-text { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.logo-pycon { height: 64px; width: auto; }
.logo-nugpu { height: 40px; width: auto; }
.logo-dc { height: 24px; width: auto; }
.logo-darkmode { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-darkmode { display: inline; }
  :root:not([data-theme="light"]) .logo-pycon  { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-darkmode { display: inline; }
:root[data-theme="dark"] .logo-pycon  { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 520px) { .logo-pycon { height: 52px; } .logo-nugpu { height: 32px; } .logo-dc { height: 20px; } }