/* The page the top-up board links to: points ordered, then paid with a QR
     code. The QR codes and whom to write to are in buy.json. */
  :root {
    --sky: #1d8fe0;
    --deep: #0b3f8f;
    --navy: #0a2a5c;
    --ink: #ffffff;
    --gold: #ffe12e;
    --glass: rgba(4, 38, 96, .55);
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    min-height: 100vh;
    padding: 24px 16px 40px;
    background: linear-gradient(#35c3ff, var(--sky) 260px, #1479cf);
    color: var(--ink);
    font: 500 16px/1.6 "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  }
  main { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
  h1 {
    margin: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 900;
    text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy);
  }
  section {
    padding: 16px 20px;
    border: 3px solid var(--navy);
    border-radius: 16px;
    background: var(--glass);
  }
  h2 { margin: 0 0 10px; font-size: 19px; color: var(--gold); }
  .contact { font-size: 18px; font-weight: 800; color: var(--gold); word-break: break-all; }
  .note { font-size: 14px; opacity: .9; }
  .step { display: grid; gap: 18px; }

  /* Choosing: one card per product, the chosen one lit. */
  .packs { display: grid; gap: 10px; }
  .pack {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    cursor: pointer;
  }
  .pack:has(input:checked) { border-color: var(--gold); background: rgba(255, 225, 46, .14); }
  .pack input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold); }
  .pack-name { font-weight: 700; }
  .pack-price { font-size: 20px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

  .fields { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
  .fields label { font-weight: 700; }
  .fields input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 2px solid var(--navy);
    border-radius: 10px;
    background: #fff;
    color: #10284f;
    font: inherit;
  }
  .fields input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

  .knob {
    justify-self: center;
    min-width: 180px;
    height: 52px;
    padding: 0 28px;
    border: 3px solid #7a3c00;
    border-radius: 14px;
    background: linear-gradient(#fff6b8 0%, #ffe12e 45%, #ffb400 55%, #ff9800 100%);
    color: #fff;
    font-family: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    text-shadow: -1px -1px 0 #7a3c00, 1px -1px 0 #7a3c00, -1px 1px 0 #7a3c00, 1px 1px 0 #7a3c00;
    box-shadow: 0 4px 0 #5a2c00, inset 0 2px 0 rgba(255, 255, 255, .7);
    cursor: pointer;
  }
  .knob:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a2c00; }
  .knob:disabled { filter: grayscale(.7) brightness(.85); cursor: default; }
  .knob-quiet {
    display: block;
    margin: 6px auto 0;
    min-width: 140px;
    height: 40px;
    font-size: 16px;
    border-color: var(--navy);
    background: linear-gradient(#bff0ff 0%, #5fcbff 45%, #1693e8 55%, #0f7bd6 100%);
    text-shadow: -1px -1px 0 var(--navy), 1px -1px 0 var(--navy), -1px 1px 0 var(--navy), 1px 1px 0 var(--navy);
    box-shadow: 0 3px 0 var(--navy), inset 0 2px 0 rgba(255, 255, 255, .7);
  }
  .notice { margin: 0; min-height: 1.6em; text-align: center; font-weight: 700; color: #ffd0d8; }

  /* Paying: the amount is what matters, so it is the biggest thing on the page. */
  .due { display: grid; justify-items: center; gap: 6px; text-align: center; }
  .due h2 { justify-self: start; }
  .due-label { margin: 0; font-weight: 700; }
  .due-amount {
    margin: 0;
    font-size: 60px;
    line-height: 1.05;
    font-weight: 900;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy), 2px 2px 0 var(--navy);
  }
  .pay-state {
    margin: 4px 0 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-weight: 800;
  }
  .pay-state.done, .pay-state.warn { border-radius: 16px; }
  .pay-state.done { padding: 12px 22px; font-size: 20px; background: #1f9d4c; color: #fff; }
  .pay-state.warn { background: rgba(255, 120, 140, .25); color: #ffe3e8; }
  .facts {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    width: min(100%, 360px);
    margin: 0;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }
  .facts dt, .facts dd { margin: 0; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .facts dt:first-of-type, .facts dd:first-of-type { border-top: 0; }
  .facts dt { background: rgba(255, 255, 255, .08); opacity: .85; }
  .facts dd { font-weight: 800; overflow-wrap: anywhere; word-break: keep-all; }
  .pay-now { display: grid; justify-items: center; gap: 14px; width: 100%; margin-top: 8px; }
  .due-warn { margin: 0; }
  .due-warn strong { color: var(--gold); }
  .pay-now .note { margin: 0; max-width: 34em; }

  /* The QR codes: cards of one size side by side, the app's colour on top. */
  .codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 220px));
    justify-content: center;
    gap: 18px;
    width: 100%;
  }
  .code {
    margin: 0;
    overflow: hidden;
    border: 3px solid var(--navy);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 0 var(--navy);
  }
  .code figcaption {
    padding: 8px;
    background: #5b6f92;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .1em;
  }
  .code-alipay figcaption { background: #1677ff; }
  .code-wechat figcaption { background: #07c160; }
  .code img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 520; }
  .code-tip { margin: 0; padding: 6px 8px 8px; color: #33415c; font-size: 14px; font-weight: 700; }
  .code-tip.code-fixed { color: #128a3e; }
  .missing {
    display: grid;
    place-items: center;
    width: 220px;
    aspect-ratio: 1;
    border-radius: 16px;
    background: #fff;
    color: #5b6f92;
    font-size: 14px;
  }