/* howtall.net — quiz theme tokens, direction A "Scoreboard" (canvas duyệt 19-09).
   Same palette as static/css/site.css; quiz.css defaults are Midnight, so the overrides under
   the token block re-point the shared controls at this ink + orange. Layout is untouched. */
:root {
  --q-bg: #0B0E14;
  --q-paper: #131926;
  --q-ink: #FFFFFF;
  --q-ink2: #A6B0C0;
  --q-ink3: #8E99AB;
  --q-line: #2B3444;
  --q-line2: #1B2230;
  --q-accent: #FF5A2B;
  --q-accent-ink: #0B0E14;
  --q-accent-soft: #1A1410;
  --q-dark: #0B0E14;
  --q-dark-2: #1D2534;
  --q-grow: #3DDC84;
  --q-grow-soft: #16351F;
  --q-font-display: 'Archivo', 'Arial Black', sans-serif;
  --q-font-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --q-radius-card: 18px;
  --q-radius-btn: 14px;
  --q-bubble: #131926;
  --q-bubble-me: #FF5A2B;
  --q-bubble-me-ink: #0B0E14;
  --q-accent-line: #55311F;
  --q-wheel-far: #3A4557;
}
body { background: var(--q-bg); color: var(--q-ink); font-family: var(--q-font-body); }

/* Shared quiz controls on the ink theme. */
.q-wrap { max-width: 520px; min-height: 0; padding: 14px 20px 28px; }
.q-prog { background: var(--q-line2); }
.q-prog > div { background: var(--q-accent); box-shadow: none; }
.q-count { color: var(--q-ink3); }
.q-title, .q-chain-h1 { font-family: var(--q-font-display); color: var(--q-ink); letter-spacing: -0.035em; }
.q-sub, .q-label, .q-chain-sub { color: var(--q-ink2); }
.q-opt { background: var(--q-paper); border-color: var(--q-line); color: var(--q-ink); }
.q-opt.sel { border-color: var(--q-accent); background: var(--q-accent-soft); box-shadow: none; }
.q-opt.sel .q-rad { border-color: var(--q-accent); background: var(--q-accent); box-shadow: none; }
.q-chip { background: var(--q-paper); border-color: var(--q-line); color: var(--q-ink); }
.q-chip.sel { background: var(--q-accent); color: var(--q-accent-ink); border-color: var(--q-accent); box-shadow: none; }
.q-wheel-sel { background: var(--q-accent-soft); border-color: var(--q-accent-line); box-shadow: none; }
.q-wheel-it { color: var(--q-ink3); }
.q-wheel-it.c { color: var(--q-ink); }
.q-chat .q-wheel-it.nn { color: var(--q-wheel-far); }
.q-bubble-q { font-family: var(--q-font-body); }
.q-wheel-nudge { color: var(--q-ink2); }
.q-wrap select { background-color: var(--q-paper); border-color: var(--q-line); color: var(--q-ink); }
.seg { display: flex; gap: 0; border: 1px solid var(--q-line); border-radius: 8px; overflow: hidden; width: max-content; font-size: 12px; font-weight: 600; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label { padding: 6px 10px; color: var(--q-ink2); cursor: pointer; }
.seg label:has(input:checked), .seg input:checked + label { background: var(--q-accent); color: var(--q-accent-ink); }
.q-units { margin: 0 0 10px; }
.btn { font: inherit; border: 0; cursor: pointer; }
.btn-ghost { font: inherit; background: none; border: 0; cursor: pointer; }
.card-glass { background: var(--q-paper); }
.field-error { color: #FF8A7A; font-size: 13px; margin: 8px 0 0; }
.q-compare-num { font-family: var(--q-font-display); color: var(--q-ink); }
.q-compare-cap { color: var(--q-ink3); }
.q-bar { background: var(--q-dark-2); }
.q-bar > div { background: var(--q-accent); }
.q-compare-line { color: var(--q-ink); }
.q-computing { color: var(--q-ink); }
.q-orb-glow { background: radial-gradient(closest-side, rgba(255, 90, 43, .40), transparent 72%); }
.q-orb-disc { background: var(--q-paper); color: var(--q-ink); display: flex; align-items: center; justify-content: center; }
.q-tick { color: var(--q-ink3); }
.q-tick.done, .q-tick.doing { color: var(--q-ink); }
.site-header, .site-footer { border-color: var(--q-line2); }
.site-header .brand { color: var(--q-ink); font-family: var(--q-font-display); }
.site-footer .small { color: #7C8799; }

/* Desktop: the phone card needs a ground to read as a card. */
@media (min-width: 720px) { body:has(.q-chat-root), body:has(.q-chain-root) { background: #070A0F; } }

/* #result ruler + #pay rows (layout from the approved canvas, colours only). */
.q-ruler-band .q-band-hands { background: var(--q-grow); }
.q-ruler-band .q-band-could { background: var(--q-accent); }
.q-ruler-band .q-band-today { background: var(--q-ink); }
.q-ruler-band .q-band-avg { background: var(--q-wheel-far); }
.q-ruler-band .q-band-booked { background: var(--q-dark-2); }
.q-ruler-vals b { font-family: var(--q-font-display); color: var(--q-ink); }
.q-ruler-vals span { color: var(--q-ink3); }
.q-ruler-vals .acc b { color: var(--q-grow); }
.q-ruler-vals .avg b { color: var(--q-ink2); }
.q-tick-l { color: var(--q-ink3); }
.q-tick-m { background: var(--q-line2); }
.q-chain-booked, .q-chain-line { color: var(--q-ink2); }
.q-chain-top { color: var(--q-ink3); }
.q-chain-signed { border: 1px solid var(--q-line); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 700; color: #C6CEDB; }
.q-signout { color: var(--q-ink3); }
.q-chain-cta { background: var(--q-accent); color: var(--q-accent-ink); font-family: var(--q-font-display); font-weight: 800; }
.q-skip { color: var(--q-ink3); text-decoration: underline; }
.q-pay-card { background: var(--q-paper); border: 1px solid var(--q-line); border-radius: 16px; }
.q-pay-card b { font-family: var(--q-font-display); color: var(--q-ink); }
.q-pay-k { color: var(--q-ink3); }
.q-pay-hands { background: var(--q-grow-soft); border-radius: 12px; }
.q-pay-hands b, .q-pay-hands span { color: var(--q-grow); }
.q-pay-row i { background: var(--q-dark-2); color: #FF8A5C; border-radius: 9px; }
.q-pay-row b { color: var(--q-ink); }
.q-pay-row span span { color: var(--q-ink3); }
.q-pay-line { color: #C6CEDB; }
.q-price { background: var(--q-paper); border-color: var(--q-line); color: var(--q-ink); }
.q-price.sel { border-color: var(--q-accent); border-width: 2px; background: var(--q-accent-soft); }
.q-price-badge { background: var(--q-accent); color: var(--q-accent-ink); }
.q-price-name span, .q-price-amt span { color: var(--q-ink2); }
.q-price-amt b { font-family: var(--q-font-display); }
.q-pay-disc, .q-pay-links, .q-pay-links a, .q-link { color: var(--q-ink3); }
.q-tools-title { color: var(--q-ink3); }
.q-tool { border: 1px solid var(--q-line); border-radius: 12px; color: var(--q-ink); }
.q-tool.done { border-color: var(--q-accent-line); background: var(--q-accent-soft); }

/* /quiz/success + /get — the app sign-in screen drawn on the page. */
.q-mock-stage { background: #070A0F; }
.q-mock { background: var(--q-paper); border-color: var(--q-ink); }
.q-mock-sub { color: var(--q-ink2); }
.q-mock-btn { border-color: var(--q-line); background: var(--q-bg); color: var(--q-ink3); }
body:not([data-provider="apple"]) .q-mock-google, body[data-provider="apple"] .q-mock-apple { border-color: var(--q-accent); color: var(--q-ink); outline: 3px solid var(--q-accent); outline-offset: 3px; }
.q-mock-pick { border-color: var(--q-accent); background: var(--q-accent-soft); }
.q-mock-pick-k { color: #FFA47F; }
.q-mock-pick b { color: var(--q-ink); }
.q-mini > div { background: var(--q-paper); }
.q-mini-n { font-family: var(--q-font-display); color: var(--q-ink); }
.q-mini-t { color: var(--q-ink); }
.q-next { font-family: var(--q-font-display); color: var(--q-ink); }
.q-next::before { background: var(--q-accent); }
.q-storebtn { background: var(--q-ink); color: #0B0E14; }
.q-other { color: var(--q-ink2); }
body:not([data-os="android"]):not([data-os="ios"]) .q-qr-wrap { background: var(--q-paper); }
.q-qr-wrap .q-qr { border-color: var(--q-line); background: #FFFFFF; }
.q-qr-sub { color: var(--q-ink2); }
.q-paid { background: var(--q-grow-soft); color: var(--q-grow); }
#plan-line { color: var(--q-ink); }
#success .q-acct b { color: var(--q-ink); }