/* Aqua v2 — built phone-first. Every control a driver touches is at least
   56px tall, because this gets used one-handed, in sunlight, sometimes wet. */
:root {
    color-scheme: light;
    --plane: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --ink: #0b1520;
    --ink-2: #55636f;
    --muted: #8a97a3;
    --border: rgba(11, 21, 32, .10);
    --brand: #0b6bcb;
    --brand-ink: #ffffff;
    --brand-soft: #e6f0fb;
    --good: #0f8a3c;
    --good-soft: #e4f5ea;
    --warn: #b26a00;
    --warn-soft: #fdf1de;
    --danger: #c0362c;
    --danger-soft: #fbeae8;
    --shadow: 0 1px 2px rgba(11,21,32,.05), 0 6px 20px rgba(11,21,32,.06);
    --radius: 14px;
    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --plane: #0b0f14;
        --surface: #151b22;
        --surface-2: #1e262f;
        --ink: #f2f5f8;
        --ink-2: #aab6c2;
        --muted: #7d8b99;
        --border: rgba(255,255,255,.12);
        --brand: #3f96e8;
        --brand-ink: #08131f;
        --brand-soft: #14293d;
        --good: #45c46f;
        --good-soft: #12291a;
        --warn: #e0a33d;
        --warn-soft: #2c2113;
        --danger: #ef6b5f;
        --danger-soft: #2e1614;
        --shadow: none;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
    font-family: var(--font);
    background: var(--plane);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--brand); text-decoration: none; }

.appbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top));
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.appbar .title { font-size: 16px; font-weight: 640; letter-spacing: -.01em; flex: 1; }
.appbar .back {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--ink); font-size: 18px;
}
.wrap { max-width: 520px; margin: 0 auto; padding: 16px; }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px; margin-bottom: 14px;
}
.card.tight { padding: 14px; }

.eyebrow {
    font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted);
}
.name { font-size: 21px; font-weight: 650; letter-spacing: -.02em; margin: 6px 0 2px; }
.meta { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* Balance display — the number the whole app exists to move. */
.balance {
    display: flex; align-items: baseline; gap: 8px;
    margin: 14px 0 4px;
}
.balance .n { font-size: 46px; font-weight: 680; letter-spacing: -.04em; line-height: 1; }
.balance .u { font-size: 14px; color: var(--ink-2); font-weight: 550; }
.balance.low .n { color: var(--warn); }
.balance.empty .n { color: var(--danger); }

/* Stepper */
.stepper {
    display: grid; grid-template-columns: 68px 1fr 68px;
    align-items: center; gap: 12px; margin: 6px 0 18px;
}
.stepper button {
    height: 68px; border-radius: 16px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--ink);
    font-size: 30px; font-weight: 500; cursor: pointer;
    display: grid; place-items: center; user-select: none;
}
.stepper button:active { background: var(--brand-soft); }
.stepper button:disabled { opacity: .35; }
.stepper .count {
    text-align: center; font-size: 52px; font-weight: 680;
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.stepper-label { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: -10px; margin-bottom: 16px; }

.btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 56px; padding: 0 18px;
    border: none; border-radius: 14px; cursor: pointer;
    background: var(--brand); color: var(--brand-ink);
    font-size: 16px; font-weight: 620; font-family: var(--font);
}
.btn:active { filter: brightness(.94); }
.btn:disabled { opacity: .5; }
.btn.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn + .btn { margin-top: 10px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input {
    width: 100%; min-height: 56px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--ink);
    font-size: 19px; font-family: var(--font);
    letter-spacing: .08em; text-transform: uppercase;
}
.field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 12px; margin-bottom: 14px;
    font-size: 13.5px; font-weight: 550; line-height: 1.4;
}
.banner.info { background: var(--brand-soft); color: var(--ink); }
.banner.good { background: var(--good-soft); color: var(--good); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--danger-soft); color: var(--danger); }
.banner .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 640;
    background: var(--surface-2); color: var(--ink-2);
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

.rows { display: flex; flex-direction: column; }
.row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row .l { font-size: 14px; font-weight: 550; }
.row .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.row .r { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Scanner */
#scanwrap {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: #000; aspect-ratio: 4/3; display: none;
}
#scanwrap.on { display: block; }
#video { width: 100%; height: 100%; object-fit: cover; }
.reticle {
    position: absolute; inset: 18%;
    border: 3px solid rgba(255,255,255,.9); border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr { display: grid; place-items: center; padding: 8px; background: #fff; border-radius: 12px; }
.qr svg { width: 100%; height: auto; max-width: 260px; }
.code {
    text-align: center; font-size: 20px; font-weight: 680;
    letter-spacing: .14em; margin-top: 10px; font-variant-numeric: tabular-nums;
}
.empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 26px 8px; }

.toast {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(120%);
    background: var(--ink); color: var(--plane);
    padding: 13px 20px; border-radius: 999px; font-size: 14px; font-weight: 570;
    box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 50;
    transition: transform .22s cubic-bezier(.2,.8,.2,1); max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }