/* Shared by the visitor page and the card desk. One column, phone first. */
:root {
  --bg: #EEF3F1; --panel: #FFFFFF; --fg: #16262A; --muted: #5C6F72; --line: #CFDAD7;
  --accent: #1D6A64; --accent-fg: #FFFFFF; --warm: #B85F0E; --bad: #B3261E; --stage: #10242A;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --body: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0E1719; --panel: #16262A; --fg: #E6EFEC; --muted: #93A6A6; --line: #2A3D41;
  --accent: #4FB3A9; --accent-fg: #0E1719; --warm: #F0A04B; --bad: #F2857D; --stage: #0A1418; color-scheme: dark } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.6 var(--body); }
main { max-width: 460px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
main.wide { max-width: 720px; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 13px; margin: 0 0 8px; color: var(--muted); font-weight: 600; letter-spacing: .08em; }
p { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bird { display: flex; gap: 16px; align-items: center; }
.bird canvas { width: 110px; height: 130px; image-rendering: pixelated; background: var(--stage); border-radius: 8px; flex: none; }
.bird .name { font-size: 20px; font-weight: 700; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-family: var(--mono); font-weight: 700; background: var(--fg); color: var(--bg); border-radius: 4px; padding: 0 8px; }
.code { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: .12em; text-align: center; color: var(--warm); line-height: 1.2; }
ol.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ol.steps li { display: flex; gap: 10px; color: var(--muted); }
ol.steps li::before { content: '○'; flex: none; }
ol.steps li.done { color: var(--fg); } ol.steps li.done::before { content: '●'; color: var(--accent); }
ol.steps li.now { color: var(--fg); font-weight: 700; } ol.steps li.now::before { content: '▶'; color: var(--warm); }
button, .btn { font: inherit; color: var(--accent-fg); background: var(--accent); border: 0; border-radius: 6px; padding: 10px 16px; cursor: pointer; text-decoration: none; text-align: center; }
button.plain { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button:focus-visible, input:focus-visible, .btn:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
input { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; min-width: 0; width: 100%; }
input.big { font-family: var(--mono); font-size: 28px; letter-spacing: .12em; text-align: center; }
.rowx { display: flex; gap: 8px; flex-wrap: wrap; } .rowx > * { flex: 1 1 140px; }
.err { color: var(--bad); font-weight: 600; } .ok { color: var(--accent); font-weight: 700; }
.note { font-size: 18px; font-weight: 700; }
button:disabled { opacity: .5; cursor: default; }

/* the ICP filing number at the foot of the visitors' pages */
.filing { text-align: center; font-size: 12px; padding: 18px 0 14px; }
.filing a { color: inherit; opacity: .6; text-decoration: none; }