/* UniFind v2 — generated from tokens.json */
:root, [data-theme="dark"] {
  --lime: #b4f06a; /* Brand lime — the one bright "go" accent. Fill only (nav active pill, welcome glow, you-are-here halo on dark map). Never text on light grounds. */
  --forest: #0f241a; /* Brand deep forest green. Welcome hero ground and the cover; fixed in both themes. */
  --charcoal: #0b100e; /* Brand near-black charcoal. Welcome hero ground, light-mode pill nav; fixed in both themes. */
  --on-lime: #0b1a10; /* Text and icons on a lime fill (nav active tab, lime chips). 13:1 on lime. */
  --bg: #0b100e; /* App ground behind everything that is not the map (Ask, Schedule, Profile). */
  --surface: #121916; /* Sheets, solid cards, list backgrounds. */
  --surface-raised: #1a231f; /* Cards on a surface, inputs, menus. */
  --surface-sunken: #0e1412; /* Inset wells: segmented-control track, input fill on surface, skeletons. */
  --surface-forest: #10261b; /* Green-tinted panels: Next Class card, event countdown strip, "You are here" card, initials avatar. */
  --line: #26322c; /* Hairline dividers between rows and around cards. Decorative only. */
  --line-strong: #6d7c75; /* Borders that identify a control (inputs, secondary button, toggle track, Walk/Drive buttons, upload dropzone, the dashed Community report outline). 3:1+ on surface, surface-raised and bg. */
  --ink: #eef4f0; /* Primary text and icons on bg, surface, surface-raised, surface-forest and glass. Also the fill of the "Ad" and "Sponsored" tags (text ink-inverse). */
  --ink-muted: #a9b8b0; /* Secondary text: metadata under a title, descriptions of secondary weight, placeholders. 4.5:1+ on bg, surface, surface-raised, surface-forest and glass. Level 2 of the text hierarchy. */
  --ink-subtle: #8e9d96; /* Tertiary text: card eyebrows, units ("min"), day headers, timestamps. One step quieter than ink-muted; 4.5:1+ on bg, surface, surface-raised, surface-forest and glass-strong. Not on thin glass — use ink-muted there. */
  --ink-inverse: #0e1311; /* Text on an ink fill (tooltip, toast). */
  --go: #b4f06a; /* "This is where to go": route line, destination, primary button fill, active states, walk and drive times, and the two verified trust badges. As text: on bg, surface, surface-raised, surface-forest, go-soft. */
  --on-go: #0b1a10; /* Text and icons on a go fill (primary button label). */
  --go-soft: #1c3317; /* Tinted background behind go text: selected chip, selected row, active segment, chosen Walk/Drive mode, role-holder trust badges. */
  --go-halo: rgba(180, 240, 106, 0.22); /* Soft go tint: the glow ring on the live dot and the next step in a route timeline. Fill only. */
  --you: #5aa8ff; /* The you-are-here pointer on the map: a solid blue disc with a heading arrow. Blue so it never reads as the destination (lime) or the route (go). Marker fill only, not text. */
  --on-you: #04192e; /* Heading arrow on the you fill. */
  --you-halo: rgba(90, 168, 255, 0.22); /* Accuracy circle around the you-are-here pointer. Fill only. */
  --info: #8fcaff; /* Start-point marker, informational banners, the "Recently updated" label, Scheduled status; as text on surfaces and info-soft. */
  --info-soft: #14273a; /* Background behind info text. */
  --warn: #f4c55a; /* Changes and cautions: venue or time changed, the urgent notice, Starts soon, In review, offline, the long-walk hint icon; on surfaces and warn-soft. */
  --warn-soft: #33270c; /* Background behind warn text (offline banner). */
  --danger: #ff9384; /* Errors, "Cancelled" and "Rejected" status, destructive actions; on surfaces and danger-soft. Always paired with an icon or word. */
  --danger-soft: #3a1712; /* Background behind danger text. */
  --glass: rgba(18, 25, 22, 0.80); /* Frosted-glass fill for floating cards and chips over the map. Always with glass-line and the glass-blur token; falls back to glass-solid where blur is off. */
  --glass-strong: rgba(18, 25, 22, 0.92); /* Denser glass for the search bar and bottom sheet: text sits on it for longer. */
  --glass-solid: #141c18; /* Lite-mode / no-blur fallback for every glass surface. */
  --glass-line: rgba(255, 255, 255, 0.10); /* 1px edge on glass so it separates from the map. */
  --scrim: rgba(0, 0, 0, 0.55); /* Dims the map behind a full sheet or the search overlay. */
  --nav-bg: rgba(26, 35, 31, 0.94); /* Pill nav fill. Dark pill in both themes (ref 6), glass-tinted in dark. */
  --nav-ink: #c9d6cf; /* Inactive nav icon and label on nav-bg. 7:1+. */
  --nav-line: rgba(255, 255, 255, 0.10); /* Edge on the pill nav. */
  --map-ground: #20251f; /* Campus ground inside the ring road — bare earth and paving, like satellite imagery. Relief texture sits on top. */
  --map-veg: #26391f; /* Vegetation: bush around campus and lawns inside it. Textured with map-veg-deep and map-veg-light, edges feathered. */
  --map-veg-deep: #131f0f; /* Dark vegetation speckle and tree-canopy shade. */
  --map-veg-light: #3e5a2e; /* Light vegetation speckle and the sunlit top of tree canopies. */
  --map-water: #17252c; /* Lakes, streams and ponds, with softly blurred edges. */
  --map-shore: #3a4d55; /* Thin shoreline stroke around water. */
  --map-road: #7c8681; /* Roads: thin light lines (3.6px) like the reference maps, curving with the land. */
  --map-road-edge: #0c110f; /* Dark edge under each road so thin roads read over any terrain. */
  --map-trail: #c3ccc7; /* Footpaths and trails, dashed. */
  --map-block: #353c38; /* Building roofs, seen from above. */
  --map-roof-edge: #4b544f; /* Roof outline and ridge line. */
  --map-block-shadow: rgba(0, 0, 0, 0.55); /* Soft shadow cast by buildings and tree canopies (offset down-right). */
  --map-block-selected: #3d5034; /* Destination building roof, outlined in go. */
  --map-halo: rgba(10, 14, 12, 0.82); /* Halo behind every map label so text reads over textured terrain. */
  --map-label: #b6c3bc; /* Map labels on map-halo. Buildings 11.5px semibold; areas 11px italic; nearby places 10.5px medium beside an icon. AA on the halo in both themes. */
  --map-marker: #eef4f0; /* Light marker discs: start point, nearby-place icons, place pins. */
  --map-boundary: #9db0a7; /* Dotted campus boundary line. Shown when the map is zoomed out to the whole campus; billboards stand outside it. */
  --route-walked: #cbd5d0; /* The part of the route already walked: a dotted line (ref 4). */
  --route: var(--go); /* The walking route (alias of go): a thin 4px line that fades in from the start (35%) to full go at the destination, over a dark casing and a soft 15px glow. */
  --route-casing: #0b100e; /* 2px outline under the route line so it reads over any map colour. */
  --ad-board: #eef4f0; /* Face of a map billboard and of an on-campus business pin: a plain light board in both themes so a logo sits on it cleanly. */
  --ad-ink: #0e1311; /* Text on ad-board (business name). 16:1. */
  --ad-ink-muted: #46524c; /* The short line under the business name on a billboard. 7:1+ on ad-board. */
  --ad-frame: #0b100e; /* Billboard frame, post, logo tile and the "Ad" tag on a billboard (white text). Neutral on purpose: an ad never borrows go, lime or a status colour. */
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.45); /* Floating glass cards, search bar, chips over the map. */
  --shadow-sheet: 0 -6px 24px rgba(0, 0, 0, 0.5); /* Bottom sheet. */
  --shadow-nav: 0 6px 20px #00000040; /* Pill nav — one flat shadow, no 3D bevel. */
  --focus-ring: 0 0 0 2px #0b100e, 0 0 0 3px #b4f06a; /* Keyboard/switch-access focus: 2px gap, then 2px solid go (3:1+ on every surface). */
}
[data-theme="light"] {
  --bg: #f3f5f2;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1ed;
  --surface-forest: #e4f0e6;
  --line: #e0e6e1;
  --line-strong: #7a8781;
  --ink: #0e1311;
  --ink-muted: #4c5a53;
  --ink-subtle: #5f6c66;
  --ink-inverse: #eef4f0;
  --go: #136f34;
  --on-go: #ffffff;
  --go-soft: #e3f4da;
  --go-halo: rgba(19, 111, 52, 0.18);
  --you: #1663c7;
  --on-you: #ffffff;
  --you-halo: rgba(22, 99, 199, 0.16);
  --info: #1d5fa8;
  --info-soft: #e3eefa;
  --warn: #8a5300;
  --warn-soft: #fbf0d9;
  --danger: #b42318;
  --danger-soft: #fde7e4;
  --glass: rgba(255, 255, 255, 0.84);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --glass-solid: #fbfcfa;
  --glass-line: rgba(14, 19, 17, 0.10);
  --scrim: rgba(14, 19, 17, 0.35);
  --nav-bg: #121916;
  --nav-line: rgba(255, 255, 255, 0.06);
  --map-ground: #ebeae3;
  --map-veg: #c7dcb5;
  --map-veg-deep: #9fbf8a;
  --map-veg-light: #e3efd6;
  --map-water: #b5cfd9;
  --map-shore: #8fb2bf;
  --map-road: #ffffff;
  --map-road-edge: #c4cbc1;
  --map-trail: #76827b;
  --map-block: #fbfbf8;
  --map-roof-edge: #d9ded5;
  --map-block-shadow: rgba(40, 56, 46, 0.22);
  --map-block-selected: #e8f4dd;
  --map-halo: rgba(255, 255, 255, 0.9);
  --map-label: #46524c;
  --map-marker: #ffffff;
  --map-boundary: #5f6f67;
  --route-walked: #5f6b65;
  --route: var(--go);
  --route-casing: #ffffff;
  --ad-board: #ffffff;
  --ad-frame: #46524c;
  --shadow-float: 0 4px 16px rgba(14, 19, 17, 0.12);
  --shadow-sheet: 0 -6px 24px rgba(14, 19, 17, 0.10);
  --shadow-nav: 0 6px 20px #0e13111c;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #136f34;
}
:root {
  --space-1: 4px; /* Icon-to-label gap inside chips. */
  --space-2: 8px; /* Gap between chips; icon-to-text in buttons. */
  --space-3: 12px; /* Row inner padding (vertical); gap between stacked cards. */
  --space-4: 16px; /* Card and sheet padding; mobile screen gutter. */
  --space-5: 20px; /* Screen gutter on Welcome, Ask, Schedule. */
  --space-6: 24px; /* Between sections inside a sheet. */
  --space-8: 32px; /* Between major blocks on a screen. */
  --space-12: 48px; /* Welcome hero to headline; empty-state top padding. */
  --radius-sm: 10px; /* Marker labels, small badges, icon tiles. */
  --radius-md: 16px; /* Inputs on a sheet, list rows when highlighted, small cards. */
  --radius-lg: 22px; /* Glass cards, location card, route card, desktop panels. */
  --radius-xl: 28px; /* Bottom sheet top corners, Welcome hero. */
  --radius-full: 9999px; /* Pill nav, chips, search bar, buttons, avatar, markers. */
  --tap-min: 44px; /* Minimum touch target, every control. */
  --control-h: 52px; /* Search bar, primary button, inputs. */
  --nav-h: 72px; /* Pill nav height (tabs are 76x64 tap targets with 40px icon circles; 62px wide with the Admin tab). */
  --icon: 22px; /* Default icon size (UniFind icon set: 24px grid, 1.75 stroke). 16px minimum. */
  --marker-you: 18px; /* You-are-here dot diameter (halo extra). */
  --sheet-peek: 148px; /* Bottom sheet peek height on Explore. */
  --icon-sm: 16px; /* Smallest icon: status pills, meta lines, footnotes. */
  --marker-pin: 36px; /* Place-category map marker width (44px tall). */
  --billboard-w: 176px; /* Width of a map billboard board: logo tile, business name and one short line (about 5 words). */
  --biz-pin: 30px; /* On-campus business pin on the zoomed-out map. */
  --glass-blur: 12px; /* backdrop-filter blur on glass, glass-strong surfaces. */
  --font-sans: Figtree, "Segoe UI", Roboto, system-ui, sans-serif;
  --text-display: 700 2.5rem/2.75rem var(--font-sans); /* Welcome headline only. */
  --text-title-1: 700 1.75rem/2.125rem var(--font-sans); /* Screen titles: Today greeting, Ask, Schedule. */
  --text-title-2: 700 1.375rem/1.75rem var(--font-sans); /* Place or person name on a card, sheet titles. */
  --text-title-3: 600 1.125rem/1.5rem var(--font-sans); /* Card headings, list section headings. */
  --text-body: 400 1rem/1.5rem var(--font-sans); /* All running text. Never smaller on mobile. */
  --text-body-strong: 600 1rem/1.5rem var(--font-sans); /* Row titles, button labels, emphasis. */
  --text-label: 600 0.9375rem/1.25rem var(--font-sans); /* Chips, segmented controls, small buttons. */
  --text-caption: 500 0.875rem/1.25rem var(--font-sans); /* Metadata under a row title. Smallest running text. */
  --text-nav-label: 600 0.8125rem/1rem var(--font-sans); /* Pill-nav labels and map labels only (always beside an icon or on the map). */
  --text-eyebrow: 700 0.8125rem/1rem var(--font-sans); /* Uppercase label at the top of a card or list section, in ink-subtle. Two or three words. */
  --text-numeral-lg: 700 2.25rem/2.5rem var(--font-sans); /* Walk or drive time on the route card, countdowns. */
  --text-numeral: 700 1.25rem/1.5rem var(--font-sans); /* Class times, walk time at the end of a row, Walk/Drive button times. */
}
.display {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.title-1 {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.title-2 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0;
}
.title-3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}
.nav-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.numeral-lg {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.numeral {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* UniFind v2 design system component styles (copied from the design file; the Figtree
   import is removed because index.html already loads the font). */

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5rem; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.uf-icon { display: block; flex: none; }
[data-icon] { display: inline-flex; }
.uf-num { font-variant-numeric: tabular-nums; }
.uf-muted { color: var(--ink-muted); }
.uf-subtle { color: var(--ink-subtle); }
.uf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type classes (mirror tokens.json type styles) */
.uf-t-display { font-size: 2.5rem; line-height: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
.uf-t-title-1 { font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; letter-spacing: -0.01em; }
.uf-t-title-2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; }
.uf-t-title-3 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.uf-t-body { font-size: 1rem; line-height: 1.5rem; }
.uf-t-strong { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.uf-t-label { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; }
.uf-t-caption { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); }
.uf-t-numeral-lg { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uf-t-numeral { font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uf-t-caption, .uf-t-body, .uf-t-strong { margin: 0; }
.uf-t-eyebrow, .uf-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
/* Text hierarchy inside cards: eyebrow (ink-subtle) → title / number (ink) → meta (ink-muted) → body (ink).
   Meta hugs its title (2px); groups are separated by space-4. */
:is(.uf-t-title-1, .uf-t-title-2, .uf-t-title-3, .uf-t-strong, .uf-t-numeral-lg, .uf-t-numeral) + :is(.uf-t-caption, .uf-t-meta) { margin-top: 2px; }
:is(.uf-t-eyebrow, .uf-eyebrow, .uf-card__eyebrow) + * { margin-top: var(--space-3); }
.uf-t-meta { margin: 0; font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.uf-t-meta .uf-icon { width: 16px; height: 16px; color: var(--ink-subtle); }
.uf-divider { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0; }
h1, h2, h3, p { margin: 0; }

/* focus */
:where(button, a, input, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ============ Glass ============ */
.uf-glass { background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-float); }
.uf-glass-strong { background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-float); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uf-glass, .uf-glass-strong { background: var(--glass-solid); }
}
/* Lite mode: set .uf-lite on <html> on low-end devices or Data Saver; also honoured for reduced transparency. */
.uf-lite .uf-glass, .uf-lite .uf-glass-strong { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .uf-glass, .uf-glass-strong { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============ Buttons ============ */
.uf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-6); border-radius: var(--radius-full); border: 1px solid transparent; background: transparent; font-size: 1rem; line-height: 1.5rem; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .12s, transform .12s; }
.uf-btn:active { transform: scale(.98); }
.uf-btn--primary { background: var(--go); color: var(--on-go); }
.uf-btn--secondary { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.uf-btn--text { color: var(--go); padding: 0 var(--space-3); min-height: var(--tap-min); }
.uf-btn--danger { border-color: var(--danger); color: var(--danger); }
.uf-btn--sm { min-height: var(--tap-min); padding: 0 var(--space-4); font-size: .9375rem; }
.uf-btn--block { display: flex; width: 100%; }
.uf-btn[disabled] { opacity: .45; cursor: not-allowed; }
.uf-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; padding: 0; flex: none; }
.uf-btn-icon.uf-glass, .uf-btn-icon.uf-glass-strong { border-color: var(--glass-line); }
.uf-action { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 64px; background: none; border: 0; cursor: pointer; padding: 0; color: var(--ink); font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.uf-action .uf-btn-icon { width: 48px; height: 48px; }
.uf-link { background: none; border: 0; padding: var(--space-2) 0; min-height: var(--tap-min); color: var(--ink-muted); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }

/* ============ Search bar ============ */
.uf-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-1) 0 var(--space-4); border-radius: var(--radius-full); color: var(--ink); }
.uf-search__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); height: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: text; color: var(--ink-muted); font-size: 1rem; }
.uf-search__field .uf-icon { color: var(--ink); }
.uf-search__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--ink); }
.uf-search__input::placeholder { color: var(--ink-muted); opacity: 1; }
.uf-search__sep { width: 1px; height: 24px; background: var(--line); flex: none; }
.uf-search .uf-btn-icon { background: transparent; border-color: transparent; }
.uf-avatar { width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; background: var(--go-soft); color: var(--go); border: 1px solid var(--glass-line); flex: none; cursor: pointer; padding: 0; }

/* ============ Chips ============ */
.uf-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.uf-chips::-webkit-scrollbar { display: none; }
.uf-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full); font-size: .9375rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; flex: none; }
.uf-chip .uf-icon { width: 18px; height: 18px; color: var(--ink-muted); }
.uf-chip.uf-glass { border-color: var(--glass-line); }
.uf-chip[aria-pressed="true"], .uf-chip.is-selected { background: var(--go-soft); color: var(--go); border-color: var(--go); }
.uf-chip[aria-pressed="true"] .uf-icon, .uf-chip.is-selected .uf-icon { color: var(--go); }
.uf-chip--status { min-height: 36px; padding: 0 var(--space-3); font-size: .875rem; cursor: default; }
.uf-dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px var(--go-halo); flex: none; }

/* ============ Cards ============ */
.uf-card { border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); }
.uf-card.uf-glass, .uf-card.uf-glass-strong { border-color: var(--glass-line); }
.uf-card--forest { background: var(--surface-forest); border-color: transparent; }
.uf-card__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.uf-card__eyebrow .uf-icon { width: 16px; height: 16px; }
.uf-card__eyebrow .uf-badge { margin-left: auto; text-transform: none; letter-spacing: 0; }
.uf-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.uf-eta { display: inline-flex; align-items: baseline; gap: 4px; }
.uf-eta__n { font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--go); }
.uf-eta__u { font-size: .8125rem; font-weight: 600; color: var(--ink-subtle); }
.uf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: .875rem; line-height: 1.25rem; font-weight: 600; background: var(--surface-sunken); color: var(--ink); }
.uf-badge--go { background: var(--go-soft); color: var(--go); }

/* ============ Bottom sheet ============ */
.uf-sheet { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-2) var(--space-4) var(--space-4); box-shadow: var(--shadow-sheet); color: var(--ink); }
.uf-sheet.uf-glass-strong { box-shadow: var(--shadow-sheet); border-bottom: 0; }
.uf-sheet--solid { background: var(--surface); border: 1px solid var(--line); border-bottom: 0; }
.uf-sheet__handle { display: block; width: 40px; height: 5px; border-radius: var(--radius-full); background: var(--line-strong); margin: 0 auto var(--space-3); opacity: .7; }
.uf-sheet__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/* ============ Place row ============ */
.uf-list { list-style: none; margin: 0; padding: 0; }
.uf-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); cursor: pointer; width: 100%; background: none; border: 0; text-align: left; color: var(--ink); }
.uf-row + .uf-row, .uf-list li + li .uf-row { border-top: 1px solid var(--line); border-radius: 0; }
.uf-row__tile { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uf-row__body { flex: 1; min-width: 0; }
.uf-row__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-row__meta { margin-top: 2px; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-row__end { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.uf-row mark { background: none; color: var(--go); font-weight: 700; }

/* ============ Location card ============ */
.uf-photo { height: 132px; border-radius: var(--radius-md); background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 10px, var(--surface-raised) 10px 20px); display: flex; align-items: flex-end; padding: var(--space-2); color: var(--ink-muted); font-size: .875rem; font-weight: 600; border: 1px solid var(--line); }
.uf-loc__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.uf-inside { display: flex; gap: var(--space-2); font-size: 1rem; line-height: 1.5rem; }
.uf-inside b { font-weight: 600; color: var(--ink); }
.uf-inside { color: var(--ink-muted); }
.uf-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.uf-stack > * + * { margin-top: var(--space-3); }
.uf-stack--lg > * + * { margin-top: var(--space-4); }

/* ============ From / To ============ */
.uf-fromto { position: relative; border-radius: var(--radius-lg); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.uf-fromto__fields { flex: 1; min-width: 0; position: relative; }
.uf-fromto__row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: var(--ink); }
.uf-fromto__row + .uf-fromto__row { border-top: 1px solid var(--line); }
.uf-fromto__k { font-size: .875rem; font-weight: 600; color: var(--ink-muted); width: 40px; flex: none; }
.uf-fromto__v { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.uf-fromto__v .uf-icon { color: var(--ink-muted); }
.uf-fromto__mark { width: 14px; height: 14px; flex: none; border-radius: 50%; }
.uf-fromto__mark--start { border: 3px solid var(--info); }
.uf-fromto__mark--end { background: var(--go); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.uf-fromto__rail { position: absolute; left: 6px; top: 34px; bottom: 34px; border-left: 2px dotted var(--line-strong); }

/* ============ Route card ============ */
.uf-route__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.uf-steps { list-style: none; margin: 0; padding: 0; }
.uf-steps li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; color: var(--ink); }
.uf-steps li + li { border-top: 1px solid var(--line); }
.uf-steps li:last-child { font-weight: 600; }
.uf-steps .uf-icon { color: var(--go); margin-top: 1px; }
.uf-arrived { display: flex; align-items: center; gap: var(--space-3); }
.uf-arrived__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--go); color: var(--on-go); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Route card: eyebrow → walk time → destination → timeline → End */
.uf-route__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.uf-route__eta { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.uf-route__dest { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--go-soft); }
.uf-route__dest .uf-row__tile { background: var(--go); color: var(--on-go); }
.uf-route .uf-divider { margin: var(--space-4) 0 var(--space-2); }
.uf-route .uf-btn { margin-top: var(--space-5); }
.uf-timeline { list-style: none; margin: 0; padding: 0; }
.uf-timeline li { position: relative; padding: var(--space-2) 0 var(--space-2) 32px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.uf-timeline li::before { content: ""; position: absolute; left: 6px; top: 13px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); box-sizing: border-box; }
.uf-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 27px; bottom: -11px; width: 2px; background: var(--line); }
.uf-timeline li.is-done::before { background: var(--go); border-color: var(--go); }
.uf-timeline li.is-done::after { background: var(--go); opacity: .6; }
.uf-timeline li.is-next::before { border-color: var(--go); box-shadow: 0 0 0 4px var(--go-halo); }
.uf-timeline__t { font-size: 1rem; line-height: 1.5rem; color: var(--ink); }
.uf-timeline li.is-done .uf-timeline__t { color: var(--ink-muted); }
.uf-timeline li.is-next .uf-timeline__t, .uf-timeline li:last-child .uf-timeline__t { font-weight: 600; }
.uf-timeline__m { flex: none; font-size: .8125rem; line-height: 1rem; font-weight: 600; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }

/* ============ Next class ============ */
.uf-nextclass__course { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.uf-nextclass__time { text-align: right; flex: none; }
.uf-nextclass__time .uf-t-numeral { font-size: 1.5rem; line-height: 1.75rem; }
.uf-day { margin-top: var(--space-4); }
.uf-day__h { font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--space-2); }

/* ============ Pill nav ============ */
.uf-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); width: auto; max-width: calc(100% - 32px); height: 72px; padding: 0 10px; border-radius: var(--radius-full); background: var(--nav-bg); border: 1px solid var(--nav-line); box-shadow: var(--shadow-nav); }
.uf-nav__item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 76px; min-width: 0; height: 64px; padding: 0; border: 0; background: transparent; color: var(--nav-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-lg); }
.uf-nav__dot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--nav-line); transition: background-color .15s, color .15s, border-color .15s; }
.uf-nav__dot .uf-icon { width: 22px; height: 22px; }
.uf-nav__label { font-size: .8125rem; line-height: 1rem; font-weight: 600; white-space: nowrap; transition: color .15s; }
.uf-nav__item[aria-current="page"] .uf-nav__dot { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.uf-nav__item[aria-current="page"] .uf-nav__label { color: var(--lime); font-weight: 700; }
.uf-nav__item:focus-visible { outline: 0; box-shadow: none; }
.uf-nav__item:focus-visible .uf-nav__dot { box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 4px var(--lime); }
.uf-nav-dock { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.uf-nav-dock > * { pointer-events: auto; }

/* ============ Map + markers ============ */
.uf-map { display: block; width: 100%; height: 100%; }
/* Map palette, mirrored from tokens.json (map-* and route-walked) and scoped to the map so it renders
   correctly even while the generated tokens.css lags behind tokens.json. Keep in sync when map tokens change. */
.uf-map, .uf-marker { --you: #5aa8ff; --on-you: #04192e; --you-halo: rgba(90, 168, 255, 0.22); --map-marker: #eef4f0; }
[data-theme="light"] .uf-map, [data-theme="light"] .uf-marker { --you: #1663c7; --on-you: #ffffff; --you-halo: rgba(22, 99, 199, 0.16); --map-marker: #ffffff; }
.uf-map {
  --map-ground: #20251f;
  --map-veg: #26391f;
  --map-veg-deep: #131f0f;
  --map-veg-light: #3e5a2e;
  --map-water: #17252c;
  --map-shore: #3a4d55;
  --map-road: #7c8681;
  --map-road-edge: #0c110f;
  --map-trail: #c3ccc7;
  --map-block: #353c38;
  --map-roof-edge: #4b544f;
  --map-block-shadow: rgba(0, 0, 0, 0.55);
  --map-block-selected: #3d5034;
  --map-halo: rgba(10, 14, 12, 0.82);
  --map-label: #b6c3bc;
  --map-marker: #eef4f0;
  --route-walked: #cbd5d0;
}
[data-theme="light"] .uf-map {
  --map-ground: #ebeae3;
  --map-veg: #c7dcb5;
  --map-veg-deep: #9fbf8a;
  --map-veg-light: #e3efd6;
  --map-water: #b5cfd9;
  --map-shore: #8fb2bf;
  --map-road: #ffffff;
  --map-road-edge: #c4cbc1;
  --map-trail: #76827b;
  --map-block: #fbfbf8;
  --map-roof-edge: #d9ded5;
  --map-block-shadow: rgba(40, 56, 46, 0.22);
  --map-block-selected: #e8f4dd;
  --map-halo: rgba(255, 255, 255, 0.9);
  --map-label: #46524c;
  --map-marker: #ffffff;
  --route-walked: #5f6b65;
}

.uf-map .m-ground { fill: var(--map-ground); }
/* terrain */
.uf-map .m-veg-base { fill: var(--map-veg-deep); }
.uf-map .m-veg { fill: var(--map-veg); }
.uf-map .m-flood-deep { flood-color: var(--map-veg-deep); }
.uf-map .m-flood-light { flood-color: var(--map-veg-light); }
.uf-map .m-campus { fill: var(--map-ground); }
.uf-map .m-water { fill: var(--map-water); }
.uf-map .m-shore { fill: none; stroke: var(--map-shore); stroke-width: 1.2; opacity: .6; }
.uf-map .m-relief { fill: #000; opacity: .7; }
[data-theme="light"] .uf-map .m-relief { opacity: .3; }
.uf-map .m-stop-tree-hi { stop-color: var(--map-veg-light); }
.uf-map .m-stop-tree-lo { stop-color: var(--map-veg-deep); }
.uf-map .m-tree-shadow { fill: var(--map-block-shadow); }
/* streets: thin light lines on a dark edge, dashed trails */
.uf-map .m-road-edge { fill: none; stroke: var(--map-road-edge); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.uf-map .m-road { fill: none; stroke: var(--map-road); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.uf-map .m-trail { fill: none; stroke: var(--map-trail); stroke-width: 1.4; stroke-dasharray: 3 3.5; stroke-linecap: round; opacity: .85; }
/* buildings: roof + soft shadow + ridge */
.uf-map .m-shadow { fill: var(--map-block-shadow); }
.uf-map .m-block { fill: var(--map-block); stroke: var(--map-roof-edge); stroke-width: .8; stroke-linejoin: round; }
.uf-map .m-block--minor { opacity: .82; }
.uf-map .m-ridge { fill: none; stroke: var(--map-roof-edge); stroke-width: 1.2; stroke-linecap: round; }
.uf-map .m-block.is-selected { fill: var(--map-block-selected); stroke: var(--go); stroke-width: 2; }
/* route: soft glow, dark casing, thin line that fades in from the start */
.uf-map .m-stop-from { stop-color: var(--go); stop-opacity: .35; }
.uf-map .m-stop-to { stop-color: var(--go); stop-opacity: 1; }
.uf-map .m-route-glow { fill: none; stroke: var(--go); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.uf-map .m-route-casing { fill: none; stroke: var(--route-casing); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.uf-map .m-route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.uf-map .m-route-walked { fill: none; stroke: var(--route-walked); stroke-width: 2.6; stroke-dasharray: .5 7; stroke-linecap: round; }
/* labels: destination > buildings > areas > nearby places */
.uf-map text { font-family: var(--font-sans); paint-order: stroke; stroke: var(--map-halo); stroke-linejoin: round; }
.uf-map .m-label { fill: var(--map-label); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; stroke-width: 3.2px; }
.uf-map .m-label.is-strong { fill: var(--ink); font-size: 14px; font-weight: 800; stroke-width: 4px; }
.uf-map .m-label--area { font-size: 11px; font-weight: 500; font-style: italic; }
.uf-map .m-poi-label { fill: var(--map-label); font-size: 10.5px; font-weight: 500; stroke-width: 3px; }
.uf-map .m-poi-ring { fill: var(--map-marker); stroke: var(--ink-muted); stroke-width: 1.6; }
.uf-map .m-poi-glyph { stroke: var(--charcoal); }
.uf-map .m-poi--warn .m-poi-ring { stroke: var(--warn); }
.uf-map .m-poi--danger .m-poi-ring { stroke: var(--danger); }
.uf-map .m-poi--go .m-poi-ring { stroke: var(--go); }
.uf-map .m-poi--info .m-poi-ring { stroke: var(--info); }
/* markers (refs 4 + 5): you = light disc with heading arrow in a dashed accuracy circle; destination = lime disc */
.uf-map .m-you-acc { fill: var(--you-halo); stroke: var(--you); stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .95; }
.uf-map .m-you { fill: var(--you); stroke: var(--map-marker); stroke-width: 2.5; }
.uf-map .m-you-arrow { fill: var(--on-you); }
.uf-map .m-start { fill: var(--map-marker); stroke: var(--charcoal); stroke-width: 2.5; }
.uf-map .m-start-dot { fill: var(--charcoal); }
.uf-map .m-dest-halo { fill: var(--lime); opacity: .2; }
.uf-map .m-dest-disc { fill: var(--lime); stroke: var(--charcoal); stroke-width: 2; }
.uf-map .m-dest-glyph { stroke: var(--on-lime); }
.uf-lite .uf-map .m-relief { display: none; }
.uf-lite .uf-map .m-veg { filter: none; }
/* Welcome hero: fixed dark map with glowing points (stays dark in both themes) */
.uf-map--hero .m-ground { fill: var(--charcoal); }
.uf-map--hero .m-water { fill: #0d1a1a; }
.uf-map--hero .m-green { fill: var(--forest); }
.uf-map--hero .m-block { fill: none; stroke: none; }
.uf-map--hero .m-road-edge, .uf-map--hero .m-terrain { stroke: none; fill: none; }
.uf-map--hero .m-road { stroke: #1f3a29; stroke-width: 2.5; }
.uf-map--hero .m-path { stroke: #1a2e22; stroke-width: 1.2; }
.uf-map--hero .m-green, .uf-map--hero .m-water { fill: none; }
.uf-map--hero .m-net { fill: none; stroke: #1d3426; stroke-width: 1.1; stroke-linecap: round; }
.uf-map--hero .m-artery { fill: none; stroke: #2c5a3b; stroke-width: 2.2; }
.uf-map--hero .m-dot { fill: var(--lime); }
.uf-map--hero .m-dot--sm { opacity: .55; }
.uf-map--hero .m-glow { fill: var(--lime); opacity: .18; animation: uf-glow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes uf-glow { 0%, 100% { opacity: .1; transform: scale(.7); } 50% { opacity: .32; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .uf-map--hero .m-glow { animation: none; opacity: .22; } }
.uf-lite .uf-map--hero .m-glow { animation: none; opacity: .22; }

/* HTML markers (used over a real map tile layer) */
.uf-marker { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.uf-marker__label { font-size: .8125rem; line-height: 1rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--ink); white-space: nowrap; }
.uf-marker--you .uf-marker__dot { width: var(--marker-you); height: var(--marker-you); border-radius: 50%; background: var(--you); border: 3px solid var(--map-marker); box-shadow: 0 0 0 12px var(--you-halo); }
.uf-marker--start .uf-marker__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-raised); border: 4px solid var(--ink); }
.uf-marker--dest .uf-marker__pin { width: 32px; height: 40px; display: block; }
.uf-marker--dest .uf-marker__pin path { fill: var(--ink); stroke: var(--route-casing); stroke-width: 2; }
.uf-marker--dest .uf-marker__pin circle { fill: var(--go); }
[data-theme="light"] .uf-marker--dest .uf-marker__pin circle { fill: var(--lime); }
.uf-marker--place .uf-marker__tile, .uf-marker--landmark .uf-marker__tile { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--ink); border: 2px solid var(--line-strong); }
.uf-marker--place .uf-marker__tile { border-radius: var(--radius-sm); }
.uf-marker--landmark .uf-marker__tile { border-radius: 50%; }
.uf-marker--place.is-selected .uf-marker__tile { background: var(--go); color: var(--on-go); border-color: var(--route-casing); }
.uf-marker__tile .uf-icon { width: 20px; height: 20px; }

/* ============ Ask ============ */
.uf-ask { display: flex; align-items: center; gap: var(--space-2); min-height: 60px; padding: 0 var(--space-2) 0 var(--space-5); border-radius: var(--radius-full); background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-float); }
[data-theme="light"] .uf-ask { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-float); }
.uf-ask:focus-within { box-shadow: var(--focus-ring); }
.uf-lite .uf-ask { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .uf-ask { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Ask backdrop: static soft green glow so the glass input has something to frost (no animation, no image) */
.uf-ask-glow, .uf-phone.uf-ask-glow { background: radial-gradient(55% 35% at 85% 30%, rgba(180, 240, 106, 0.16), transparent 70%), radial-gradient(120% 60% at 10% 0%, var(--go-soft), transparent 60%), radial-gradient(90% 50% at 100% 100%, var(--surface-forest), transparent 65%), var(--bg); }
.uf-ask__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 1rem; color: var(--ink); height: 56px; }
.uf-ask__input::placeholder { color: var(--ink-muted); opacity: 1; }
.uf-ask .uf-btn-icon--go { width: 44px; height: 44px; background: var(--go); color: var(--on-go); border: 0; }
.uf-bubble { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: 20px; font-size: 1rem; line-height: 1.5rem; }
.uf-bubble--me { margin-left: auto; background: var(--go-soft); color: var(--ink); border-bottom-right-radius: 6px; }
.uf-bubble--bot { background: var(--surface-raised); border: 1px solid var(--line); border-bottom-left-radius: 6px; }

/* ============ Toast / banner / empty ============ */
.uf-toast { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); background: var(--ink); color: var(--ink-inverse); font-weight: 600; box-shadow: var(--shadow-float); }
.uf-toast__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uf-toast__icon .uf-icon { width: 18px; height: 18px; }
.uf-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: .9375rem; line-height: 1.25rem; font-weight: 600; }
.uf-banner--warn { background: var(--warn-soft); color: var(--warn); }
.uf-banner--info { background: var(--info-soft); color: var(--info); }
.uf-banner--danger { background: var(--danger-soft); color: var(--danger); }
.uf-banner__text { flex: 1; color: var(--ink); }
.uf-banner__text b { display: block; }
.uf-banner__text span { font-weight: 500; color: var(--ink-muted); font-size: .875rem; }
.uf-empty { text-align: center; padding: var(--space-8) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.uf-empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--go-soft); color: var(--go); display: inline-flex; align-items: center; justify-content: center; }
.uf-empty__icon--warn { background: var(--warn-soft); color: var(--warn); }
.uf-empty__icon .uf-icon { width: 28px; height: 28px; }

/* ============ Theme toggle ============ */
.uf-theme-switch { position: relative; display: inline-flex; align-items: center; width: 84px; height: var(--tap-min); padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface-sunken); cursor: pointer; color: var(--ink-muted); flex: none; }
.uf-theme-switch__opt { position: relative; z-index: 1; flex: 1; height: 100%; display: inline-flex; align-items: center; justify-content: center; transition: color .2s; }
.uf-theme-switch__opt .uf-icon { width: 20px; height: 20px; }
.uf-theme-switch__knob { position: absolute; top: 3px; left: 3px; width: 38px; height: 36px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
[data-theme="dark"] .uf-theme-switch__knob, :root:not([data-theme="light"]) .uf-theme-switch__knob { transform: translateX(38px); background: var(--lime); }
[data-theme="light"] .uf-theme-switch__knob { transform: none; background: var(--surface-raised); }
:root:not([data-theme="light"]) .uf-theme-switch__opt--dark, [data-theme="light"] .uf-theme-switch__opt--light { color: var(--on-lime); }
[data-theme="light"] .uf-theme-switch__opt--light { color: var(--ink); }
.uf-theme-switch.uf-glass { border-color: var(--glass-line); }
@media (prefers-reduced-motion: reduce) { .uf-theme-switch__knob { transition: none; } }
.uf-seg { display: flex; padding: 4px; gap: 4px; border-radius: var(--radius-full); background: var(--surface-sunken); border: 1px solid var(--line); }
.uf-seg__opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--ink-muted); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.uf-seg__opt .uf-icon { width: 18px; height: 18px; }
.uf-seg__opt[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* ============ Screens (showcase frames) ============ */
.uf-preview { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.uf-preview--col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.uf-phone { position: relative; width: 390px; height: 820px; border-radius: 40px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); flex: none; }
.uf-phone__status { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: .875rem; font-weight: 700; z-index: 6; color: var(--ink); font-variant-numeric: tabular-nums; }
.uf-screen-map { position: absolute; inset: 0; }
.uf-top { position: absolute; top: 52px; left: var(--space-4); right: var(--space-4); z-index: 4; display: flex; flex-direction: column; gap: var(--space-3); }
.uf-top__bar { display: flex; align-items: center; gap: var(--space-2); }
.uf-controls { position: absolute; right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 4; }
.uf-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.uf-label-sm { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); }

/* ============ Icon set helpers ============ */
.uf-pin { display: block; flex: none; overflow: visible; }
.uf-pin__body { fill: var(--map-marker, #ffffff); stroke: var(--ink-muted); stroke-width: 2; }
.uf-pin__glyph { stroke: var(--charcoal); fill: none; }
.uf-pin--go .uf-pin__body { stroke: var(--go); }
.uf-pin--info .uf-pin__body { stroke: var(--info); }
.uf-pin--warn .uf-pin__body { stroke: var(--warn); }
.uf-pin--danger .uf-pin__body { stroke: var(--danger); }
.uf-pin.is-selected .uf-pin__body { fill: var(--lime); stroke: var(--charcoal); }
.uf-pin.is-selected .uf-pin__glyph { stroke: var(--on-lime); }
[data-marker] { display: inline-flex; --map-marker: #eef4f0; }
[data-theme="light"] [data-marker] { --map-marker: #ffffff; }
.uf-iconset { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-2); }
.uf-iconset__cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); min-width: 0; }
.uf-iconset__row { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); min-height: 44px; }
.uf-iconset__name { font-size: .8125rem; line-height: 1rem; font-weight: 600; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-iconset__active { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--go-soft); color: var(--go); }

/* ============ Status pill ============ */
.uf-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 8px; border-radius: var(--radius-full); font-size: .875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); }
.uf-status .uf-icon { width: 16px; height: 16px; }
.uf-status--in-office, .uf-status--live { background: var(--go-soft); color: var(--go); }
.uf-status--in-class, .uf-status--office-hours, .uf-status--upcoming { background: var(--info-soft); color: var(--info); }
.uf-status--soon, .uf-status--changed, .uf-status--pending { background: var(--warn-soft); color: var(--warn); }
.uf-status--cancelled, .uf-status--rejected { background: var(--danger-soft); color: var(--danger); }
.uf-status--lg { min-height: 36px; padding: 6px 14px 6px 10px; font-size: .9375rem; }
.uf-status--lg .uf-icon { width: 18px; height: 18px; }

/* ============ Countdown ============ */
.uf-countdown { display: inline-flex; flex-direction: column; gap: 2px; }
.uf-countdown__k { font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.uf-countdown__v { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; color: var(--ink); }
.uf-countdown__n { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -.02em; }
.uf-countdown__u { font-size: 1rem; font-weight: 600; color: var(--ink-muted); }
.uf-countdown--soon .uf-countdown__n { color: var(--warn); }
.uf-countdown--live .uf-countdown__n { color: var(--go); }
.uf-countdown--over .uf-countdown__n { color: var(--ink-muted); font-size: 1.375rem; line-height: 1.75rem; }

/* ============ People + events ============ */
.uf-person { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-forest); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; flex: none; position: relative; }
.uf-person--lg { width: 60px; height: 60px; font-size: 1.125rem; }
.uf-person__dot { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--surface); background: var(--ink-subtle); }
.uf-person__dot--in { background: var(--go); }
.uf-person__dot--class { background: var(--info); }
.uf-datetile { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-sunken); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1; }
.uf-datetile__d { font-size: 1.0625rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.uf-datetile__m { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-top: 2px; }
.uf-row__tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.uf-group__h { display: flex; align-items: center; justify-content: space-between; margin: var(--space-4) 0 var(--space-1); font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.uf-group__h:first-child { margin-top: 0; }
.uf-group__h span + span { letter-spacing: 0; text-transform: none; font-weight: 600; }
.uf-kv { display: grid; grid-template-columns: 22px 1fr; column-gap: var(--space-3); row-gap: var(--space-3); align-items: start; }
.uf-kv > .uf-icon, .uf-kv > [data-icon] { color: var(--ink-subtle); margin-top: 1px; }
.uf-kv__t { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--ink); }
.uf-kv__m { font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }
.uf-event__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.uf-event__code { font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; letter-spacing: -.01em; }
.uf-event__strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-forest); }
.uf-changed { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--warn); }
.uf-changed__t { color: var(--ink); font-weight: 600; }
.uf-changed__m { color: var(--ink-muted); font-size: .9375rem; line-height: 1.25rem; }
.uf-changed s { color: var(--ink-muted); }
.uf-footnote { font-size: .8125rem; line-height: 1rem; font-weight: 500; color: var(--ink-subtle); display: flex; align-items: center; gap: 6px; }
.uf-footnote .uf-icon { width: 14px; height: 14px; }
.uf-btnrow { display: flex; gap: var(--space-2); }
.uf-btnrow > * { flex: 1; }

/* ============ Reminder banner ============ */
.uf-reminder { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.uf-reminder__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--go-soft); color: var(--go); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uf-reminder__body { flex: 1; min-width: 0; }

/* ============ Form fields (staff tools) ============ */
.uf-field { display: flex; flex-direction: column; gap: 6px; }
.uf-field__label { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); }
.uf-field__label em { font-style: normal; font-weight: 500; color: var(--ink-subtle); }
.uf-input, .uf-select, .uf-textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5rem; }
.uf-textarea { padding: var(--space-3) var(--space-4); min-height: 96px; resize: vertical; }
.uf-select { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); text-align: left; cursor: pointer; }
.uf-select .uf-icon { color: var(--ink-muted); }
.uf-input::placeholder, .uf-textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.uf-input:focus-visible, .uf-textarea:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.uf-field__help { font-size: .875rem; line-height: 1.25rem; color: var(--ink-muted); }
.uf-field--error .uf-input { border-color: var(--danger); }
.uf-field--error .uf-field__help { color: var(--danger); display: flex; gap: 6px; align-items: center; font-weight: 600; }
.uf-field--error .uf-field__help .uf-icon { width: 16px; height: 16px; }
.uf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.uf-switch { position: relative; width: 52px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: var(--surface-sunken); cursor: pointer; flex: none; padding: 0; }
.uf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s, background-color .15s; }
.uf-switch[aria-checked="true"] { background: var(--go); border-color: var(--go); }
.uf-switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-go); }
.uf-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-2) 0; }
.uf-toggle-row + .uf-toggle-row { border-top: 1px solid var(--line); }
.uf-statuspick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.uf-statuspick__opt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 84px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; }
.uf-statuspick__opt .uf-icon { color: var(--ink-muted); }
.uf-statuspick__opt[aria-checked="true"] { border-color: var(--go); background: var(--go-soft); box-shadow: inset 0 0 0 1px var(--go); }
.uf-statuspick__opt[aria-checked="true"] .uf-icon { color: var(--go); }

/* ============ Admin console (desktop) ============ */
.uf-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.uf-table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.25rem; }
.uf-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; }
.uf-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.uf-table tr:last-child td { border-bottom: 0; }
.uf-table td .uf-t-meta { font-size: .875rem; }
.uf-table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.uf-table__actions .uf-btn-icon { width: 36px; height: 36px; }
.uf-toolbar { display: inline-flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--radius-lg); }
.uf-toolbar--row { flex-direction: row; }
.uf-tool { position: relative; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.uf-tool[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.uf-tool--danger { color: var(--danger); }
.uf-toolbar__sep { height: 1px; background: var(--glass-line); margin: 4px 6px; }
.uf-toolbar--row .uf-toolbar__sep { width: 1px; height: auto; margin: 6px 4px; }
.uf-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.uf-toolgrid__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); font-size: .9375rem; font-weight: 600; color: var(--ink); }

/* ---- Added 2026-10-05: notification bell, urgent change banner, locate control, mode icon ---- */
.uf-bell { position: relative; }
.uf-bell--on { color: var(--go); border-color: var(--go); }
.uf-bell__dot { position: absolute; top: 7px; right: 8px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--warn); border: 2px solid var(--glass-solid); }
.uf-reminder--urgent { background: #3c2a00; border: 1.5px solid var(--warn); border-radius: 18px; box-shadow: var(--shadow-float); }
[data-theme="light"] .uf-reminder--urgent { background: var(--warn-soft); }
.uf-reminder--urgent .uf-reminder__icon { background: var(--warn); color: var(--warn-soft); }
.uf-reminder--urgent .uf-t-eyebrow { color: var(--warn); }
.uf-reminder--urgent .uf-t-meta { color: var(--ink); }
.uf-locate { color: #5aa8ff; border-color: #5aa8ff; }
[data-theme="light"] .uf-locate { color: #1663c7; border-color: #1663c7; }
.uf-mode-sun { display: none; }
[data-theme="light"] .uf-mode-sun { display: inline-flex; }
[data-theme="light"] .uf-mode-moon { display: none; }
.uf-note__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); display: inline-block; }

/* ================= v2 · brief v4 ================= */
/* Animations Off (Profile → Animations): .uf-still on <html> stops every transition and animation. */
.uf-still *, .uf-still *::before, .uf-still *::after { animation: none !important; transition: none !important; }
.uf-still .uf-map--hero .m-glow { opacity: .22; }

/* Pill nav: 4 tabs for everyone, 5 with Admin */
.uf-nav--5 .uf-nav__item { flex-basis: 66px; }
.uf-nav--5 { gap: 0; padding: 0 6px; }

/* General go icon button (Directions at the end of a row, send) */
.uf-btn-icon--go { background: var(--go); color: var(--on-go); border-color: transparent; }
.uf-btn--wa .uf-icon { color: inherit; }

/* Map: campus boundary, town outside it, car park where a drive ends. Palette scoped like the rest of the map. */
.uf-map { --map-boundary: #9db0a7; }
[data-theme="light"] .uf-map { --map-boundary: #5f6f67; }
.uf-map .m-boundary { fill: none; stroke: var(--map-boundary); stroke-width: 2.4; stroke-dasharray: 1 8; stroke-linecap: round; }
.uf-map .m-block--town { opacity: .55; }
.uf-map .m-park rect { fill: var(--map-marker); stroke: var(--charcoal); stroke-width: 2; }
.uf-map .m-park path { fill: none; stroke: var(--charcoal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Trust: three levels that always look different + two labels */
.uf-trust { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 10px 3px 7px; border-radius: var(--radius-full); font-size: .8125rem; line-height: 1rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.uf-trust .uf-icon { width: 16px; height: 16px; }
.uf-trust--university { background: var(--go); color: var(--on-go); }
.uf-trust--role { background: var(--go-soft); color: var(--go); }
.uf-trust--community { background: transparent; color: var(--ink-muted); border: 1px dashed var(--line-strong); }
.uf-trust--updated { background: var(--info-soft); color: var(--info); }
.uf-trust--ended { background: var(--surface-sunken); color: var(--ink-muted); }
.uf-trustrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.uf-level { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; }
.uf-level + .uf-level { border-top: 1px solid var(--line); }
.uf-level__n { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; }

/* Ad labelling */
.uf-adtag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 7px; font-size: .8125rem; line-height: 1.125rem; font-weight: 700; background: var(--ink); color: var(--ink-inverse); white-space: nowrap; flex: none; }
.uf-billboard, .uf-bizpin { --ad-board: #eef4f0; --ad-ink: #0e1311; --ad-ink-muted: #46524c; --ad-frame: #0b100e; --ad-post: #eef4f0; }
[data-theme="light"] .uf-billboard, [data-theme="light"] .uf-bizpin { --ad-board: #ffffff; --ad-frame: #46524c; --ad-post: #46524c; }
.uf-billboard { position: relative; display: inline-flex; flex-direction: column; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.uf-billboard__board { display: flex; align-items: center; gap: var(--space-2); width: var(--billboard-w, 176px); padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--ad-board); color: var(--ad-ink); border: 2px solid var(--ad-frame); box-shadow: var(--shadow-float); text-align: left; }
.uf-billboard__logo { width: 34px; height: 34px; border-radius: 9px; background: var(--ad-frame); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; flex: none; overflow: hidden; }
.uf-billboard__logo .uf-icon { width: 18px; height: 18px; }
.uf-billboard__name { display: block; font-size: .8125rem; line-height: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-billboard__line { display: block; font-size: .8125rem; line-height: 1rem; font-weight: 500; color: var(--ad-ink-muted); }
.uf-billboard__post { width: 4px; height: 14px; background: var(--ad-post); }
.uf-billboard__foot { width: 14px; height: 5px; border-radius: 50%; background: var(--ad-post); opacity: .55; margin-top: -2px; }
.uf-billboard .uf-adtag { position: absolute; top: -9px; right: -6px; background: var(--ad-frame); color: #ffffff; border: 1.5px solid var(--ad-board); }
.uf-bizpin { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ad-board); color: var(--ad-ink); border: 2px solid var(--ad-frame); padding: 0; cursor: pointer; box-shadow: var(--shadow-float); }
.uf-bizpin .uf-icon { width: 16px; height: 16px; }
.uf-bizpin .uf-adtag { position: absolute; top: -14px; right: -24px; background: var(--ad-frame); color: #ffffff; border: 1.5px solid var(--ad-board); }
.uf-maplabel { font-size: .8125rem; line-height: 1rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--ink); white-space: nowrap; }

/* Campus pill + picker */
.uf-campus { font-weight: 700; padding: 0 var(--space-3); }
.uf-campus .uf-icon:last-child { color: var(--ink-muted); }
.uf-pick { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) var(--space-2); background: none; border: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.uf-list li + li .uf-pick { border-top: 1px solid var(--line); }
.uf-pick[aria-checked="true"] .uf-row__tile { background: var(--go-soft); color: var(--go); }
.uf-pick__check { color: var(--go); display: inline-flex; }
.uf-pick[aria-disabled="true"] { cursor: not-allowed; }
.uf-pick[aria-disabled="true"] .uf-row__title, .uf-pick[aria-disabled="true"] .uf-row__tile { color: var(--ink-muted); }

/* Walk / Drive mode buttons */
.uf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.uf-mode { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.uf-mode > .uf-icon, .uf-mode > [data-icon] { color: var(--ink-muted); }
.uf-mode__k { display: block; font-size: .875rem; line-height: 1.125rem; font-weight: 600; color: var(--ink-muted); }
.uf-mode__v { display: block; font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uf-mode[aria-checked="true"] { border-color: var(--go); background: var(--go-soft); box-shadow: inset 0 0 0 1px var(--go); }
.uf-mode[aria-checked="true"] > .uf-icon, .uf-mode[aria-checked="true"] > [data-icon], .uf-mode[aria-checked="true"] .uf-mode__v { color: var(--go); }
.uf-mode[disabled] { cursor: not-allowed; border-style: dashed; background: transparent; }
.uf-mode[disabled] .uf-mode__v { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; color: var(--ink-muted); }
.uf-hint { display: flex; align-items: center; gap: var(--space-2); font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); }
.uf-hint .uf-icon { width: 18px; height: 18px; color: var(--warn); flex: none; }

/* Today */
.uf-greet { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.uf-next { display: block; width: 100%; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.uf-next__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.uf-next__go { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.uf-next__go .uf-btn-icon { width: 48px; height: 48px; }
.uf-sec { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.uf-sec .uf-link { min-height: 0; padding: 0; color: var(--go); text-decoration: none; }
.uf-usage { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); }
.uf-usage b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.uf-mapcard { position: relative; display: block; width: 100%; height: 132px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); padding: 0; cursor: pointer; background: var(--surface-sunken); }
.uf-mapcard__cta { position: absolute; left: 10px; bottom: 10px; }
.uf-prompt { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); background: transparent; }
.uf-prompt__body { flex: 1; min-width: 0; }
.uf-tile--go { background: var(--go-soft); color: var(--go); }
.uf-tile--warn { background: var(--warn-soft); color: var(--warn); }
.uf-tile--info { background: var(--info-soft); color: var(--info); }
.uf-row--top { align-items: flex-start; }
.uf-row__end .uf-btn-icon { width: 44px; height: 44px; }
.uf-row__title--wrap { white-space: normal; }

/* Sharing */
.uf-sharecard { position: relative; width: 100%; aspect-ratio: 1.91; border-radius: var(--radius-md); overflow: hidden; background: #0b100e; color: #eef4f0; border: 1px solid var(--line); }
.uf-sharecard__art { position: absolute; inset: 0; opacity: .9; }
.uf-sharecard__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 14, .94) 0%, rgba(11, 16, 14, .78) 55%, rgba(11, 16, 14, .2) 100%); }
.uf-sharecard__body { position: absolute; inset: 0; padding: var(--space-4); display: flex; flex-direction: column; justify-content: space-between; }
.uf-sharecard__brand { display: flex; align-items: center; gap: var(--space-2); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: #b4f06a; }
.uf-sharecard__t { font-size: 1.375rem; line-height: 1.625rem; font-weight: 700; letter-spacing: -.01em; }
.uf-sharecard__m { margin-top: 4px; font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: #c9d6cf; }
.uf-sharecard__f { font-size: .8125rem; font-weight: 600; color: #a9b8b0; }
.uf-sharegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.uf-sharegrid .uf-action { min-width: 0; }
.uf-linkbox { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-1) 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-muted); font-size: .9375rem; font-weight: 500; }
.uf-linkbox span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-qr { width: 132px; height: 132px; padding: 10px; border-radius: var(--radius-md); background: #ffffff; flex: none; }
.uf-qr svg { display: block; width: 100%; height: 100%; }
.uf-shared { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.uf-install { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.uf-install__body { flex: 1; min-width: 0; }
.uf-appicon { width: 44px; height: 44px; border-radius: 12px; background: var(--charcoal); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uf-appicon::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(180, 240, 106, .25); }

/* Businesses, services, ad booking */
.uf-photo--store { height: 148px; }
.uf-price { font-variant-numeric: tabular-nums; }
.uf-taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.uf-row--sponsored { background: var(--surface-sunken); border-radius: var(--radius-md) !important; padding-left: var(--space-3); padding-right: var(--space-3); }
.uf-progress { display: flex; align-items: center; gap: var(--space-3); }
.uf-progress__bar { flex: 1; display: flex; gap: 6px; }
.uf-progress__bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-sunken); border: 1px solid var(--line); }
.uf-progress__bar i.is-on { background: var(--go); border-color: var(--go); }
.uf-progress__n { font-size: .875rem; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.uf-optcard { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.uf-optcard + .uf-optcard { margin-top: var(--space-2); }
.uf-optcard > .uf-icon, .uf-optcard > [data-icon] { color: var(--ink-muted); margin-top: 2px; }
.uf-optcard__body { flex: 1; min-width: 0; }
.uf-optcard__price { flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.uf-optcard__price small { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-subtle); }
.uf-optcard[aria-checked="true"] { border-color: var(--go); background: var(--go-soft); box-shadow: inset 0 0 0 1px var(--go); }
.uf-optcard[aria-checked="true"] > .uf-icon, .uf-optcard[aria-checked="true"] > [data-icon] { color: var(--go); }
.uf-sum { margin: 0; }
.uf-sum > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; font-size: .9375rem; line-height: 1.25rem; }
.uf-sum > div + div { border-top: 1px solid var(--line); }
.uf-sum dt { color: var(--ink-muted); font-weight: 500; }
.uf-sum dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.uf-sum .uf-sum__total dt, .uf-sum .uf-sum__total dd { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; color: var(--ink); }
.uf-stat { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.uf-stat__n { font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Document upload + role picker */
.uf-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); border: 1.5px dashed var(--line-strong); background: var(--surface-sunken); color: var(--ink); text-align: center; cursor: pointer; font: inherit; }
.uf-drop > .uf-icon, .uf-drop > [data-icon] { color: var(--go); }
.uf-file { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-2) 10px var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); }
.uf-file__body { flex: 1; min-width: 0; }
.uf-file__name { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-file__meta { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.uf-file__meta .uf-icon { width: 16px; height: 16px; }
.uf-file--ok .uf-file__meta { color: var(--go); }
.uf-file--error { border-color: var(--danger); }
.uf-file--error .uf-file__meta { color: var(--danger); font-weight: 600; }
.uf-file .uf-btn-icon { background: transparent; border-color: transparent; }
.uf-bar { height: 5px; border-radius: 3px; background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; margin-top: 6px; }
.uf-bar i { display: block; height: 100%; background: var(--go); }
.uf-menu { border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); box-shadow: var(--shadow-float); padding: 6px; }
.uf-menu__group { padding: 10px var(--space-3) 4px; font-size: .8125rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.uf-menu__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 0; background: none; color: var(--ink); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.uf-menu__opt[aria-selected="true"] { background: var(--go-soft); color: var(--go); font-weight: 600; }
.uf-menu__opt small { font-size: .875rem; color: var(--ink-muted); font-weight: 500; }
.uf-select.is-open { box-shadow: var(--focus-ring); }

/* Map chip: exam in progress on a building + next exams */
.uf-mapchip { width: 300px; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); }
.uf-mapchip__head { display: flex; align-items: center; gap: var(--space-3); width: 100%; background: none; border: 0; padding: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.uf-mapchip__body { flex: 1; min-width: 0; }
.uf-mapchip ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.uf-mapchip li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.25rem; }
.uf-mapchip li b { font-weight: 600; white-space: nowrap; }
.uf-mapchip .uf-t-eyebrow { white-space: nowrap; }
.uf-mapchip li span { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 500; }

/* Settings */
.uf-set { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-2) 0; }
.uf-set + .uf-set { border-top: 1px solid var(--line); }
.uf-set > .uf-icon, .uf-set > [data-icon] { color: var(--ink-muted); }
.uf-set__body { flex: 1; min-width: 0; }
.uf-set__val { font-size: .9375rem; font-weight: 600; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.uf-textsize .uf-seg__opt:nth-child(1) { font-size: .875rem; }
.uf-textsize .uf-seg__opt:nth-child(3) { font-size: 1.125rem; }

/* Public building page (plain web page) */
.uf-web { width: 390px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; flex: none; }
.uf-web__bar { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--ink-muted); }
.uf-web__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); }
.uf-web__main { padding: 0 var(--space-4) var(--space-5); }
.uf-web__map { height: 170px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.uf-web ul.uf-plain { margin: 0; padding-left: 1.1rem; color: var(--ink); }
.uf-web ul.uf-plain li { padding: 2px 0; }
.uf-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.0625rem; }

/* ============ Logo ============ */
/* The mark follows the theme: lime tile + on-lime pin on dark, forest-green tile + white pin on light. The word is ink. */
.uf-logo{display:inline-block;vertical-align:middle;flex:none;overflow:visible}
.uf-logo__tile{fill:var(--go)}
.uf-logo__pin{fill:var(--on-go)}
.uf-logo__word{fill:var(--ink)}
/* On the fixed dark grounds (forest, charcoal: Welcome hero, final bands, footers) the mark stays lime in both themes. */
.uf-logo--on-dark .uf-logo__tile,.uf-on-dark .uf-logo__tile{fill:var(--lime)}
.uf-logo--on-dark .uf-logo__pin,.uf-on-dark .uf-logo__pin{fill:var(--on-lime)}
.uf-logo--on-dark .uf-logo__word,.uf-on-dark .uf-logo__word{fill:#eef4f0}
/* One colour, for stamps, print and QR door codes. */
.uf-logo--mono .uf-logo__tile{fill:currentColor}
.uf-logo--mono .uf-logo__pin{fill:var(--bg)}
.uf-logo--mono .uf-logo__word{fill:currentColor}


html,body{margin:0}


a.uf-btn,a.uf-row,a.uf-nav__item,a.uf-chip,a.uf-avatar,a.uf-btn-icon,a.uf-search__field,a.uf-link{text-decoration:none}
a.uf-row{color:var(--ink);box-sizing:border-box}
a.uf-chip{color:inherit}
h1,h2,p{margin:0}
.uf-btn--block{width:312px;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
.uf-btnrow{width:312px;max-width:100%;margin-left:auto;margin-right:auto}
.uf-input,.uf-select,.uf-textarea{box-sizing:border-box}

.uf-locate{color:#5aa8ff;border-color:#5aa8ff}
[data-theme="light"] .uf-locate{color:#1663c7;border-color:#1663c7}

.uf-mode-sun{display:none}
[data-theme="light"] .uf-mode-sun{display:inline-flex}
[data-theme="light"] .uf-mode-moon{display:none}

/* Screens 2 · layout and hierarchy layer: 20px gutters, 4-col content (350px), 8pt rhythm, one loud accent per screen */
.uf-top{left:20px;right:20px}
.uf-controls{right:20px}
.uf-sheet{padding-left:20px;padding-right:20px}
.uf-btn--block,.uf-btnrow{width:100%}
.uf-row{padding-left:0;padding-right:0;gap:14px}
.uf-row__tile{border-radius:12px}
.uf-row__meta{color:var(--ink-muted)}
.uf-list .uf-eta__n{color:var(--ink)}
.uf-row__end .uf-btn-icon--go{background:var(--go-soft);color:var(--go)}
.uf-row__tags{margin-top:8px}
.uf-row__tags .uf-trust{background:transparent;border-color:transparent;padding:0;min-height:18px;font-weight:600;color:var(--ink-subtle)}
.uf-row__tags .uf-trust--role .uf-icon,.uf-row__tags .uf-trust--university .uf-icon{color:var(--go)}
.uf-row__tags .uf-trust--updated .uf-icon{color:var(--info)}
.uf-usage{font-size:.8125rem;line-height:1.125rem;font-weight:500;gap:8px;color:var(--ink-subtle)}
.uf-usage .uf-dot-live{width:6px;height:6px;margin-left:3px;box-shadow:0 0 0 3px var(--go-halo)}
.uf-usage b{color:var(--ink-muted);font-weight:700}
.uf-t-title-1{letter-spacing:-0.02em}
.uf-sec{margin-bottom:8px}
.uf-sec .uf-link{font-size:.9375rem;font-weight:600}
.uf-group__h{font-size:.75rem;margin:20px 0 4px}
.uf-footnote{font-size:.875rem;line-height:1.25rem;color:var(--ink-muted)}
.uf-footnote .uf-icon{width:16px;height:16px}
.s2-sec{margin-top:8px}

[data-theme]{--wb-status:#eef4f0}
[data-theme="light"]{--wb-status:var(--ink)}
.wb-wrap{background:linear-gradient(180deg,#123222 0%,#0f241a 45%,var(--bg) 100%)}
.wb .g-t{fill:#1a2a22}.wb .g-l{fill:#0f1814}.wb .g-r{fill:#14201a}
.wb .lawn{fill:#1d3326}.wb .path{fill:#2a3b32}
.wb .b-t{fill:#4a6155}.wb .b-l{fill:#26362e}.wb .b-r{fill:#314439}
.wb .w{fill:#122019}.wb .w.wr{fill:#16261e}.wb .wl{fill:#b4f06a;opacity:.9}
.wb .p-t{fill:#5a7366}.wb .p-l{fill:#2e4037}.wb .p-r{fill:#384c41}
.wb .c-t{fill:#dfe8e3}.wb .c-l{fill:#c3d0c9}.wb .c-r{fill:#93a59b}
.wb .ped{fill:#3a4f44}.wb .roof{fill:#5a7366}.wb .roof2{fill:#46594f}
.wb .door{fill:#0b100e}.wb .pole{stroke:#93a59b;stroke-width:1.5}.wb .flag{fill:#b4f06a}
.wb .sh{fill:rgba(0,0,0,.35)}.wb .tr{stroke:#5a4636;stroke-width:2.5;stroke-linecap:round}
.wb .lf{fill:#2e6a44}.wb .lf2{fill:#3f8a58}
.wb .halo{fill:rgba(180,240,106,.16)}.wb .pin{fill:#b4f06a}.wb .pin-c{fill:#0f241a}
[data-theme="light"] .wb-wrap{background:linear-gradient(180deg,#d6e9dc 0%,#e7f1ea 50%,var(--bg) 100%)}
[data-theme="light"] .wb .g-t{fill:#dfe8e1}[data-theme="light"] .wb .g-l{fill:#bccbc1}[data-theme="light"] .wb .g-r{fill:#cbd8cf}
[data-theme="light"] .wb .lawn{fill:#c9e2cd}[data-theme="light"] .wb .path{fill:#f3f6f3}
[data-theme="light"] .wb .b-t{fill:#ffffff}[data-theme="light"] .wb .b-l{fill:#eef2ef}[data-theme="light"] .wb .b-r{fill:#d8e1db}
[data-theme="light"] .wb .w{fill:#a9bdb1}[data-theme="light"] .wb .w.wr{fill:#9fb3a7}[data-theme="light"] .wb .wl{fill:#e9c45a;opacity:1}
[data-theme="light"] .wb .p-t{fill:#f7faf8}[data-theme="light"] .wb .p-l{fill:#dde5df}[data-theme="light"] .wb .p-r{fill:#cdd8d1}
[data-theme="light"] .wb .c-t{fill:#ffffff}[data-theme="light"] .wb .c-l{fill:#f2f5f3}[data-theme="light"] .wb .c-r{fill:#cbd6cf}
[data-theme="light"] .wb .ped{fill:#e8eee9}[data-theme="light"] .wb .roof{fill:#c4d2c9}[data-theme="light"] .wb .roof2{fill:#aebfb4}
[data-theme="light"] .wb .door{fill:#2f4138}[data-theme="light"] .wb .pole{stroke:#6b7c73}[data-theme="light"] .wb .flag{fill:#2e8b1f}
[data-theme="light"] .wb .sh{fill:rgba(15,36,26,.14)}[data-theme="light"] .wb .tr{stroke:#8a6a4e}
[data-theme="light"] .wb .lf{fill:#5aa36a}[data-theme="light"] .wb .lf2{fill:#7cc287}
[data-theme="light"] .wb .halo{fill:rgba(46,139,31,.16)}[data-theme="light"] .wb .pin{fill:#2e8b1f}[data-theme="light"] .wb .pin-c{fill:#ffffff}

html,body{margin:0}
a{color:var(--go)}a:hover{color:var(--ink)}
.lp{--lp-mark-dot:var(--go);background:var(--bg);color:var(--ink);font-family:Figtree,'Segoe UI',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.lp *{box-sizing:border-box}
.lp h1,.lp h2,.lp h3,.lp p,.lp figure,.lp ul{margin:0}
.lp img{display:block;max-width:100%}
.lp a.uf-btn{text-decoration:none}
.lp-wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.lp-muted{color:var(--ink-muted)}
/* type scale */
.lp-h1{font-size:4rem;line-height:1.04;letter-spacing:-.035em;font-weight:800}
.lp-h1__accent{display:block;color:var(--go)}
.lp-h2{font-size:3rem;line-height:1.06;letter-spacing:-.03em;font-weight:800}
.lp-h3{font-size:2rem;line-height:1.12;letter-spacing:-.02em;font-weight:800}
.lp-h4{font-size:1.1875rem;line-height:1.35;letter-spacing:-.01em;font-weight:700}
.lp-lede{font-size:1.1875rem;line-height:1.6;color:var(--ink-muted)}
.lp-body{font-size:1rem;line-height:1.6}
.lp-small{font-size:.875rem;line-height:1.45;color:var(--ink-muted)}
.lp-eyebrow{display:inline-block;font-size:.8125rem;line-height:1;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--go)}
.lp-eyebrow--lime{color:#b4f06a}
.lp-on-dark{color:#eef4f0}.lp-on-dark-muted{color:#a9b8b0}
/* header */
.lp-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.lp-nav__in{display:flex;align-items:center;gap:32px;height:72px}
.lp-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.lp-brand:hover{color:var(--ink)}
.lp-mark{width:34px;height:34px;border-radius:11px;background:var(--go);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;flex:none}
.lp-mark svg path{fill:var(--on-go)}
.lp-mark--lg{width:56px;height:56px;border-radius:18px}
.lp-links{display:flex;gap:4px;margin-left:auto}
.lp-links a{color:var(--ink-muted);text-decoration:none;font-weight:600;font-size:.9375rem;padding:10px 14px;border-radius:999px}
.lp-links a:hover{color:var(--ink);background:var(--surface-raised)}
.lp-cta{gap:10px}
.lp-cta--sm{min-height:44px;padding:0 18px;font-size:.9375rem}
.lp-cta--lg{min-height:56px;padding:0 28px;font-size:1.0625rem}
.lp-cta--ghost{background:transparent}
.lp-cta--lime{background:#b4f06a;color:#0b1a10;border-color:transparent}
.lp-cta--lime:hover{color:#0b1a10}
/* hero */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:112px}
.lp-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--surface-raised);border:1px solid var(--line);font-size:.875rem;font-weight:600;color:var(--ink-muted);margin-bottom:28px}
.lp-hero .lp-lede{margin-top:24px;max-width:500px}
.lp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.lp-proof{display:flex;align-items:center;gap:16px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);max-width:500px}
.lp-faces{display:flex;flex:none}
.lp-face{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--bg);margin-left:-12px}
.lp-face:first-child{margin-left:0}
.lp-hero__art{position:relative;height:640px}
.lp-hero__photo{position:absolute;right:0;top:0;width:86%;height:560px;border-radius:32px;overflow:hidden}
.lp-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.lp-hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(11,16,14,.35))}
.lp-hero__phone{position:absolute;left:0;top:96px}
.lp-float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.lp-float__t{font-weight:700;font-size:.9375rem;line-height:1.3}
.lp-float__m{font-size:.8125rem;color:var(--ink-muted);line-height:1.35;margin-top:2px}
.lp-float--a{right:24px;top:388px}
.lp-float--b{right:-12px;top:478px}
/* phone */
.lp-phone{position:relative;padding:8px;border-radius:46px;background:#0b100e;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -30px rgba(0,0,0,.55),0 12px 24px -12px rgba(0,0,0,.35);pointer-events:none;flex:none}
.lp-phone__screen{border-radius:38px;overflow:hidden;position:relative}
.lp-phone__island{position:absolute;left:50%;top:15px;width:76px;height:22px;margin-left:-38px;border-radius:999px;background:#000;z-index:2}
/* story */
.lp-story{padding:120px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-head{max-width:680px;margin-bottom:56px;display:flex;flex-direction:column;gap:16px}
.lp-head--center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.lp-chapters{display:flex;flex-direction:column;gap:72px}
.lp-chapter{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.lp-chapter--flip .lp-chapter__img{order:2}
.lp-chapter__img{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3}
.lp-chapter__img img{width:100%;height:100%;object-fit:cover}
.lp-chapter__time{position:absolute;left:20px;top:20px;padding:8px 14px;border-radius:999px;background:rgba(11,16,14,.72);color:#eef4f0;font-weight:700;font-size:.875rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lp-chapter__copy{display:flex;flex-direction:column;gap:16px;max-width:440px}
.lp-chapter__n{font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-subtle)}
.lp-chapter__copy .lp-body{font-size:1.125rem;color:var(--ink-muted)}
.lp-turn{display:flex;align-items:center;gap:24px;margin-top:88px;padding:36px 40px;border-radius:28px;background:var(--surface-forest)}
.lp-turn__t{font-size:1.75rem;line-height:1.3;font-weight:700;letter-spacing:-.015em;max-width:820px}
.lp-over{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);color:var(--ink)}
.lp-over--search{right:20px;bottom:20px;padding:12px 20px 12px 16px;border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--ink)}
.lp-over--search .uf-icon{color:var(--go)}
.lp-over--card{left:20px;bottom:20px}
.lp-over--alert{right:20px;bottom:20px;max-width:300px;background:#3c2a00;border:1px solid #f5a524;color:#fff3dc}
.lp-over--alert .lp-float__m{color:#f6d8a8}
.lp-over__ic{width:40px;height:40px;border-radius:12px;background:#f5a524;color:#2a1d00;display:inline-flex;align-items:center;justify-content:center;flex:none}
.lp-over__eb{font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f5a524;margin-bottom:2px}
[data-theme="light"] .lp-over--alert{background:#fff4dc;border-color:#d98a00;color:#3a2600}
[data-theme="light"] .lp-over--alert .lp-float__m{color:#6b4a00}
[data-theme="light"] .lp-over__eb{color:#a35f00}
/* features */
.lp-section{padding-top:120px;padding-bottom:120px}
.lp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-feat{padding:32px;border-radius:24px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.lp-feat__ic{width:52px;height:52px;border-radius:16px;background:var(--go-soft);color:var(--go);display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
/* how */
.lp-how{padding:120px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lp-step{border-radius:28px;background:var(--bg);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.lp-step__stage{display:flex;justify-content:center;padding:36px 0 0;height:440px;overflow:hidden;background:radial-gradient(70% 60% at 50% 100%,var(--go-soft),transparent 70%)}
.lp-step__copy{display:flex;gap:16px;padding:24px 28px 28px;border-top:1px solid var(--line);align-items:flex-start}
.lp-step__n{width:36px;height:36px;border-radius:50%;background:var(--go);color:var(--on-go);font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.lp-step__copy .lp-body{margin-top:6px}
/* people */
.lp-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lp-persona{border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}
.lp-persona__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.lp-persona__media img{width:100%;height:100%;object-fit:cover}
.lp-persona__tag{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(11,16,14,.72);color:#eef4f0;font-weight:700;font-size:.8125rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lp-persona figcaption{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
/* about */
.lp-about{padding:0 0 120px}
.lp-about__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:center}
.lp-about__img{border-radius:32px;overflow:hidden;aspect-ratio:4/5}
.lp-about__img img{width:100%;height:100%;object-fit:cover;object-position:55% 40%}
.lp-about__copy{display:flex;flex-direction:column;gap:20px}
.lp-points{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;margin:8px 0}
.lp-points li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--ink-muted)}
.lp-points b{color:var(--ink)}
.lp-points__ic{width:28px;height:28px;border-radius:50%;background:var(--go-soft);color:var(--go);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:-1px}
/* final */
.lp-final{background:radial-gradient(55% 90% at 85% 50%,rgba(180,240,106,.18),transparent 70%),#0f241a}
.lp-final__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:104px;padding-bottom:104px}
.lp-final__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.lp-final__copy .lp-cta{margin-top:12px}
.lp-final__faces{position:relative;height:340px}
.lp-ring{position:absolute;border-radius:50%;object-fit:cover;border:4px solid #0f241a;box-shadow:0 0 0 2px rgba(180,240,106,.55)}
.lp-ring--1{width:150px;height:150px;left:6%;top:20px}
.lp-ring--2{width:118px;height:118px;left:56%;top:0}
.lp-ring--3{width:132px;height:132px;left:30%;top:184px}
.lp-ring--4{width:108px;height:108px;left:74%;top:172px}
.lp-ring__pin{position:absolute;left:46%;top:116px;width:60px;height:60px;border-radius:50%;background:#b4f06a;color:#0f241a;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(180,240,106,.16)}
/* footer */
.lp-foot{background:#0b100e;color:#a9b8b0;--lp-mark-dot:#b4f06a}
.lp-foot .lp-brand{color:#eef4f0}
.lp-foot .lp-mark{background:#b4f06a}
.lp-foot .lp-mark svg path{fill:#0b1a10}
.lp-foot .lp-muted{color:#a9b8b0}
.lp-foot__top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;padding:72px 0 56px}
.lp-foot__brand{display:flex;flex-direction:column;gap:16px;max-width:340px}
.lp-foot__col{display:flex;flex-direction:column;gap:12px}
.lp-foot__h{font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#eef4f0;margin-bottom:4px}
.lp-foot__col a{color:#a9b8b0;text-decoration:none;font-size:.9375rem;font-weight:500}
.lp-foot__col a:hover{color:#b4f06a}
.lp-foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 0 32px;border-top:1px solid #26322c;font-size:.875rem;color:#8e9d96}
/* light mode tweaks */
[data-theme="light"] .lp-hero__photo::after{background:linear-gradient(200deg,transparent 60%,rgba(11,16,14,.25))}
[data-theme="light"] .lp-phone{background:#1a1f1d}
/* responsive */
@media (max-width:1040px){
.lp-hero,.lp-final__in,.lp-about__in,.lp-chapter{grid-template-columns:minmax(0,1fr)}
.lp-chapter--flip .lp-chapter__img{order:0}
.lp-chapter{gap:28px}
.lp-hero{gap:48px;padding-top:48px}
.lp-grid,.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-people{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-links{display:none}
.lp-nav .lp-cta{margin-left:auto}
.lp-foot__top{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-foot__brand{grid-column:1/-1}
.lp-about__img{aspect-ratio:16/11}
}
@media (max-width:640px){
.lp-wrap{padding-left:20px;padding-right:20px}
.lp-nav__in{height:64px}
.lp-h1{font-size:2.625rem}
.lp-h2{font-size:2.125rem}
.lp-h3{font-size:1.625rem}
.lp-lede{font-size:1.0625rem}
.lp-hero{padding-top:32px;padding-bottom:80px}
.lp-hero__art{height:560px}
.lp-hero__photo{width:100%;height:330px}
.lp-hero__phone{left:50%;top:160px;transform:translateX(-50%) scale(.8);transform-origin:top center}
.lp-float{display:none}
.lp-ctas .uf-btn{width:100%;justify-content:center}
.lp-proof{max-width:none}
.lp-story,.lp-how,.lp-section{padding-top:80px;padding-bottom:80px}
.lp-head{margin-bottom:40px}
.lp-chapters{gap:56px}
.lp-turn{flex-direction:column;align-items:flex-start;margin-top:56px;padding:28px}
.lp-turn__t{font-size:1.375rem}
.lp-grid,.lp-steps{grid-template-columns:minmax(0,1fr)}
.lp-feat{padding:24px}
.lp-about{padding-bottom:80px}
.lp-about__in{gap:40px}
.lp-final__in{padding-top:72px;padding-bottom:72px}
.lp-final__faces{height:300px}
.lp-ring--1{width:120px;height:120px}.lp-ring--2{width:96px;height:96px}.lp-ring--3{width:108px;height:108px}.lp-ring--4{width:88px;height:88px}
.lp-foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding-top:56px}
}