@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Lexend:wght@500;600;700&display=swap");
:root {
  --bg: #F2F5F4;
  --surface: #FFFFFF;
  --surface-2: #EBF0EF;
  --surface-3: #E0EAE8;
  --ink: #122426;
  --muted: #4D6365;
  --line: #DCE5E3;
  --line-strong: #C2D0CE;
  --accent: #17685B;
  --accent-2: #3B9B88;
  --accent-ink: #FFFFFF;
  --accent-soft: #DFEFEA;
  --hero-bg: #152A2C;
  --hero-bg-2: #214043;
  --hero-ink: #FFFFFF;
  --hero-muted: #A8C2C0;
  --hero-pill: #459885;
  --hero-glass: rgba(255, 255, 255, 0.14);
  --hero-line: rgba(255, 255, 255, 0.18);
  --card-grad: linear-gradient(102deg, #86B470 0%, #3C8D7D 54%, #226058 100%);
  --amber-grad: linear-gradient(135deg, #D85F27 0%, #E8963A 100%);
  --fab-ring: #152A2C;
  --fab-grad: linear-gradient(145deg, #43A692 0%, #17685B 100%);
  --brass: #845918;
  --brass-soft: #F7EFE0;
  --brass-line: #E0CCA6;
  --good: #1B6E40;
  --good-soft: #E0F2E7;
  --warn: #8A5608;
  --warn-soft: #FBF0D9;
  --bad: #B42E26;
  --bad-soft: #FCE6E4;
  --connection-online: #35D48A;
  --connection-warn: #F4B649;
  --connection-glow: rgba(53, 212, 138, 0.7);
  --overlay-bg: rgba(11, 22, 23, 0.56);
  --qr-paper: #FFFFFF;
  --shadow-1: 0 2px 8px rgba(18, 36, 38, 0.06), 0 8px 20px rgba(18, 36, 38, 0.04);
  --shadow-2: 0 8px 20px rgba(18, 36, 38, 0.1), 0 20px 44px rgba(18, 36, 38, 0.14);
  --shadow-fab: 0 8px 22px rgba(23, 104, 91, 0.42), 0 2px 6px rgba(18, 36, 38, 0.28);
  --r-sheet: 26px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --font-display: "Lexend", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E191B;
    --surface: #162629;
    --surface-2: #1E3337;
    --surface-3: #264045;
    --ink: #EEF6F5;
    --muted: #A3BCBE;
    --line: #294246;
    --line-strong: #39595E;
    --accent: #52C9B3;
    --accent-2: #72DEC9;
    --accent-ink: #05221D;
    --accent-soft: #193D38;
    --hero-bg: #122427;
    --hero-bg-2: #1D3A3E;
    --hero-ink: #F2F8F7;
    --hero-muted: #9EBAB8;
    --hero-pill: #388977;
    --hero-glass: rgba(255, 255, 255, 0.12);
    --hero-line: rgba(255, 255, 255, 0.18);
    --card-grad: linear-gradient(102deg, #568544 0%, #2B7062 55%, #1B4B45 100%);
    --amber-grad: linear-gradient(135deg, #C85620 0%, #DA8B30 100%);
    --fab-ring: #122427;
    --fab-grad: linear-gradient(145deg, #72DEC9 0%, #389B88 100%);
    --brass: #E6BF72;
    --brass-soft: #2E2515;
    --brass-line: #544222;
    --good: #62D495;
    --good-soft: #153624;
    --warn: #F0BC60;
    --warn-soft: #382910;
    --bad: #F58C84;
    --bad-soft: #3F1E1C;
    --overlay-bg: rgba(4, 10, 11, 0.74);
    --qr-paper: #FFFFFF;
    --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.24);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45), 0 22px 48px rgba(0, 0, 0, 0.4);
    --shadow-fab: 0 8px 24px rgba(82, 201, 179, 0.36), 0 2px 8px rgba(0, 0, 0, 0.48);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E191B;
  --surface: #162629;
  --surface-2: #1E3337;
  --surface-3: #264045;
  --ink: #EEF6F5;
  --muted: #A3BCBE;
  --line: #294246;
  --line-strong: #39595E;
  --accent: #52C9B3;
  --accent-2: #72DEC9;
  --accent-ink: #05221D;
  --accent-soft: #193D38;
  --hero-bg: #122427;
  --hero-bg-2: #1D3A3E;
  --hero-ink: #F2F8F7;
  --hero-muted: #9EBAB8;
  --hero-pill: #388977;
  --hero-glass: rgba(255, 255, 255, 0.12);
  --hero-line: rgba(255, 255, 255, 0.18);
  --card-grad: linear-gradient(102deg, #568544 0%, #2B7062 55%, #1B4B45 100%);
  --amber-grad: linear-gradient(135deg, #C85620 0%, #DA8B30 100%);
  --fab-ring: #122427;
  --fab-grad: linear-gradient(145deg, #72DEC9 0%, #389B88 100%);
  --brass: #E6BF72;
  --brass-soft: #2E2515;
  --brass-line: #544222;
  --good: #62D495;
  --good-soft: #153624;
  --warn: #F0BC60;
  --warn-soft: #382910;
  --bad: #F58C84;
  --bad-soft: #3F1E1C;
  --overlay-bg: rgba(4, 10, 11, 0.74);
  --qr-paper: #FFFFFF;
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45), 0 22px 48px rgba(0, 0, 0, 0.4);
  --shadow-fab: 0 8px 24px rgba(82, 201, 179, 0.36), 0 2px 8px rgba(0, 0, 0, 0.48);
  color-scheme: dark;
}