@font-face { font-family: "Montserrat Alternates"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/MontserratAlternates-Regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Alternates"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/MontserratAlternates-Medium.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Alternates"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/MontserratAlternates-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat Alternates"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/MontserratAlternates-Bold.woff2") format("woff2"); }

/* Passly design tokens — generated from tokens.json. Do not hand-edit values; change tokens.json. */
:root, [data-theme="dark"] {
  --brand-lime: #daff39;
  --brand-blue: #0145ec;
  --canvas: #091221;
  --surface: #111e31;
  --surface-nav: #0b1627;
  --surface-raised: #18273d;
  --surface-pressed: #0f1b2d;
  --text: #f5f7fc;
  --text-muted: #94a3b9;
  --text-disabled: #5e6e86;
  --text-on-blue: var(--text);
  --text-on-blue-muted: #c5d5ff;
  --text-on-lime: var(--canvas);
  --accent-text: #7ea2ff;
  --lime-hover: #e4ff6b;
  --lime-pressed: #c2e62e;
  --blue-pressed: #0139c4;
  --control-edge: #5f7190;
  --focus-ring: var(--brand-lime);
  --success: #3dd9b0;
  --warning: #ffb547;
  --warning-on-blue: #ffd58a;
  --error: #ff7b72;
  --frozen: #8cc8ff;
  --frozen-on-blue: #cfe6ff;
  --info: var(--accent-text);
  --info-on-blue: #d6e2ff;
  --verified: var(--brand-lime);
  /* Charts (dashboard): the data colours reuse the palette, the grid and bar tracks sit on raised. */
  --chart-a: var(--frozen);
  --chart-b: var(--success);
  --chart-c: var(--warning);
  --chart-grid: var(--surface-raised);
  --chart-track: var(--surface-raised);
  --photo-placeholder: var(--surface-raised);
  --photo-scrim: rgba(9, 18, 33, 0.72);
  --pin-cluster: var(--text);
  --scrim: rgba(3, 8, 16, 0.72);
  --qr-ink: #000000;
  --qr-paper: #ffffff;
  --skeleton: var(--surface-raised);
  --map-land: #0d1829;
  --map-road: #22324b;
  --map-water: #143066;
  --cat-sports: #ff8a4c;
  --cat-arts: #ff7ab8;
  --cat-music: #b79cff;
  --cat-dance: #ffd166;
  --cat-languages: #4fa3ff;
  --cat-exam: #a5b4ff;
  --cat-tutoring: #7fe0c2;
  --cat-it: #6ee7f9;
  --cat-professional: #d6deea;
  --cat-vocational: #ffa98a;
  --cat-driving: #e9d8a6;
  --cat-kids: #ff9aa2;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --page-x: 20px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-round: 999px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --touch-min: 44px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --nav-h: 64px;
  --sidebar-w: 232px;
  --content-max: 1120px;
  --pin: 32px;
  --cover-h: 132px;
  --thumb: 72px;
  --bp-compact: 360px;
  --bp-tablet: 768px;
  --bp-desktop: 1100px;
  --z-nav: 10;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --font-sans: "Montserrat Alternates", "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.t-numeral { font-family: var(--font-sans); font-size: 72px; line-height: 64px; font-weight: 700; letter-spacing: -0.04em; }
.t-screen-title { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.t-title { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.t-figure { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.t-section { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.t-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.t-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.t-support { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0; }
.t-meta { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }


/* Base styles */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--text); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }