/* Lumen Lines (docs/DESIGN.md): every colour, corner and font from tokens.css (made by tools/design-tokens.mjs);
   these names are the site's own for them. It follows the system's light or dark theme; the Quest's page is dark. */
:root { --bg: var(--deep); --card: var(--glass-screen); --line: var(--edge-soft); --dim: var(--text-soft); --accent: var(--ice); --on: var(--live); --off: var(--muted); --bad: var(--alert); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(120% 80% at 50% -10%, var(--glass-hot), var(--bg) 60%) fixed; color: var(--text); font: 500 15px/1.5 var(--font-text); accent-color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
header { display: flex; align-items: center; gap: 12px; }
header h1 { margin: 0; font-size: 22px; font-weight: 600; flex: 1; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
section { border-top: 1px solid var(--line); }
.note { color: var(--dim); font-size: 13px; margin: 4px 0 10px; }
.error { color: var(--bad); }
input { padding: 8px 14px; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--glass-hi); color: inherit; font: inherit; min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=color] { padding: 2px; width: 42px; height: 34px; border-radius: 12px; }
button { padding: 8px 18px; border: 0; border-radius: var(--radius-control); background: var(--accent); color: var(--ice-ink); font: inherit; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.quiet { background: var(--glass-hi); color: var(--text); border: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.row label { display: flex; flex-direction: column; font-size: 12px; color: var(--dim); gap: 2px; }
ul { list-style: none; padding: 0; margin: 6px 0; }
li { padding: 4px 0; }
.cards li { background: var(--card); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-radius: var(--radius-row); padding: 14px 18px; margin: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.cards .meta { color: var(--dim); font-size: 13px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--off); margin-right: 6px; }
.dot.on { background: var(--on); box-shadow: 0 0 8px var(--on); }
.roles { grid-column: 1 / -1; font-size: 13px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.roles select, .roles button { font-size: 13px; padding: 4px 8px; }
select { padding: 6px 10px; border-radius: var(--radius-control); background: var(--glass-hi); color: inherit; font: inherit; border: 1px solid var(--line); }
.key { background: var(--glass-hi); border: 1px solid var(--edge); border-radius: 14px; padding: 10px 14px; font: 13px var(--font-mono); word-break: break-all; }
#providers button { display: block; width: 100%; max-width: 320px; margin: 8px 0; }
#transit { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, var(--glass-hot) 0%, var(--deep) 70%); z-index: 10; animation: fade 0.25s ease-out; }
#transit p { color: var(--text-soft); letter-spacing: 0.08em; }
#transit .ring { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--ice); box-shadow: 0 0 40px color-mix(in srgb, var(--ice) 55%, transparent), inset 0 0 30px color-mix(in srgb, var(--ice) 40%, transparent); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes fade { from { opacity: 0; } }
[hidden] { display: none !important; }
body.quest main { text-align: center; padding-top: 12vh; }
body.quest h1 { font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.code { font: 700 min(18vw, 120px)/1.1 var(--font-mono); letter-spacing: 0.12em; color: var(--ice); margin: 28px 0; text-shadow: 0 0 24px color-mix(in srgb, var(--ice) 50%, transparent); }
.small { font-size: 12px; margin-top: 40px; }