:root {
  color-scheme: light;
  --bg: #f3f0e8;
  --surface: #ffffff;
  --surface-soft: #ebe8e0;
  --ink: #151515;
  --muted: #77736c;
  --line: rgba(21, 21, 21, 0.12);
  --line-strong: rgba(21, 21, 21, 0.22);
  --accent: #ff5b3d;
  --accent-soft: #ffe1d9;
  --green: #18a76e;
  --yellow: #f3c640;
  --red: #ee3d59;
  --blue: #6377f3;
  --shadow: 0 18px 55px rgba(19, 18, 16, 0.16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --topbar-height: 60px;
  --nav-height: 68px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #121212; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden;
  background: #121212; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,input,select,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 3px solid rgba(99,119,243,.34); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .42; }
svg { display: block; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.app-shell {
  width: min(100%, 820px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; position: relative;
  overflow-x: clip; background: var(--bg); box-shadow: 0 0 80px rgba(0,0,0,.3);
}
.topbar {
  position: sticky; z-index: 60; top: 0; min-height: calc(var(--topbar-height) + var(--safe-top));
  padding: calc(8px + var(--safe-top)) calc(14px + var(--safe-right)) 8px calc(14px + var(--safe-left));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); background: #f7f5ef;
}
.wordmark { appearance:none; border:0; background:none; padding:0; width:fit-content; display:flex; align-items:baseline; gap:8px; cursor:pointer; }
.wordmark-main { font-size:24px; line-height:1; font-weight:950; letter-spacing:-.09em; }
.wordmark-main span { color:var(--accent); }
.wordmark-sub { color:var(--muted); font-size:9px; line-height:1; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.topbar-title { font-size:14px; line-height:1; font-weight:800; letter-spacing:-.02em; text-align:center; }
.topbar-actions { justify-self:end; display:flex; align-items:center; gap:8px; }
.icon-button,.close-button,.square-action {
  appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.72); width:40px; height:40px; padding:0;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
}
.icon-button svg,.close-button svg,.square-action svg { width:20px; height:20px; stroke-width:1.8; }
.offline-pill { padding:5px 7px; border-radius:999px; background:#262626; color:#fff; font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.content { min-height: calc(100dvh - var(--topbar-height) - var(--safe-top)); }
.screen { width:100%; padding:22px max(16px,var(--safe-right)) calc(var(--nav-height) + var(--safe-bottom) + 30px) max(16px,var(--safe-left)); }
.tab-map .content { height:calc(100dvh - var(--topbar-height) - var(--nav-height) - var(--safe-top) - var(--safe-bottom)); min-height:480px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.tab-map .topbar { position:relative; }
.page-heading { margin:0 0 18px; }
.compact-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.page-heading h1,.home-hero h1 { margin:3px 0 0; font-size:clamp(34px,9vw,54px); line-height:.98; font-weight:920; letter-spacing:-.065em; }
.eyebrow { margin:0; color:var(--muted); font-size:10px; line-height:1.25; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }

.primary-button,.secondary-button,.quiet-button,.text-button,.ghost-button,.link-button { appearance:none; border:0; cursor:pointer; text-decoration:none; }
.primary-button,.secondary-button { min-height:46px; padding:0 16px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:800; white-space:nowrap; }
.primary-button { background:var(--ink); color:#fff; }
.primary-button:hover { background:#292929; }
.secondary-button { border:1px solid var(--line-strong); background:#fff; color:var(--ink); }
.primary-button svg,.secondary-button svg { width:18px; height:18px; stroke-width:1.8; }
.secondary-button.icon-only { width:46px; padding:0; }
.full-width { width:100%; }
.quiet-button { min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.72); display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; }
.quiet-button.active { border-color:var(--ink); background:var(--ink); color:#fff; }
.quiet-button svg { width:17px; height:17px; }
.text-button,.link-button { padding:6px 0; background:transparent; color:var(--ink); font-size:12px; font-weight:850; }

.home-hero { overflow:hidden; position:relative; padding:28px 24px 23px; border-radius:22px; background:#171717; color:#fff; box-shadow:var(--shadow); }
.home-hero::after { content:""; width:180px; height:180px; position:absolute; right:-70px; top:-70px; border-radius:50%; background:var(--accent); opacity:.9; }
.home-hero .eyebrow,.home-hero .hero-copy { color:rgba(255,255,255,.63); }
.home-hero h1 { max-width:590px; position:relative; z-index:1; }
.hero-copy { max-width:520px; margin:16px 0 0; font-size:14px; line-height:1.55; }
.countdown-line { margin:24px 0 0; padding-top:17px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid rgba(255,255,255,.15); }
.countdown-line span { color:rgba(255,255,255,.6); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.countdown-line strong { font-size:26px; letter-spacing:-.05em; }
.hero-actions,.modal-actions,.stage-actions { margin-top:18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.home-hero .primary-button { background:var(--accent); }
.home-hero .secondary-button { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; }
.quick-grid { margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.quick-card { appearance:none; min-width:0; min-height:82px; padding:13px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.74); display:grid; grid-template-columns:34px minmax(0,1fr) 15px; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.quick-card>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; }
.quick-card>span svg { width:17px; height:17px; }
.quick-card>svg { width:15px; height:15px; color:var(--muted); }
.quick-card strong,.quick-card small { display:block; }
.quick-card strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.quick-card small { margin-top:3px; color:var(--muted); font-size:10px; }
.section-block { margin-top:28px; }
.section-head { margin-bottom:9px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.section-head h2 { margin:0; font-size:21px; line-height:1; font-weight:880; letter-spacing:-.045em; }
.section-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.simple-list,.event-list,.friend-list,.friend-mini-list,.now-list { display:grid; gap:7px; }
.now-row,.list-row,.event-row,.friend-row { min-width:0; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.82); }
.now-row { padding:15px 12px 12px 15px; display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:9px; border-left:4px solid var(--stage-color,var(--accent)); }
.now-main,.list-main,.event-copy,.event-time,.stage-program,.friend-map-button { appearance:none; border:0; background:transparent; padding:0; color:inherit; text-align:left; cursor:pointer; }
.now-main { min-width:0; display:grid; gap:4px; }
.now-main>strong { overflow:hidden; font-size:16px; line-height:1.15; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.now-main>span:not(.now-stage):not(.progress-track) { color:var(--muted); font-size:11px; }
.now-stage,.event-copy span,.list-main span,.event-detail-stage,.stage-title span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.now-stage i,.event-copy i,.list-main i,.event-detail-stage i,.stage-title i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--stage-color,var(--accent)); }
.progress-track { width:100%; height:3px; margin-top:5px; overflow:hidden; border-radius:999px; background:var(--surface-soft); }
.progress-track i { display:block; width:var(--progress,0%); height:100%; border-radius:inherit; background:var(--stage-color,var(--accent)); }
.favorite-button { appearance:none; align-self:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent; color:#a4a097; display:grid; place-items:center; cursor:pointer; }
.favorite-button.active { background:#fff2bd; color:#d18f00; }
.favorite-button svg { width:20px; height:20px; stroke-width:1.7; }
.list-row { min-height:67px; display:grid; grid-template-columns:58px minmax(0,1fr) 42px; align-items:center; overflow:hidden; }
.list-time { align-self:stretch; padding:12px 8px; border-right:1px solid var(--line); display:grid; place-content:center; gap:2px; text-align:center; }
.list-time strong { font-size:15px; letter-spacing:-.03em; }
.list-time span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.list-main { min-width:0; padding:10px 11px; }
.list-main strong,.event-copy strong { display:block; overflow:hidden; font-size:13px; line-height:1.25; letter-spacing:-.015em; text-overflow:ellipsis; white-space:nowrap; }
.list-main span { margin-top:5px; }
.preview-banner,.inline-alert,.map-offline,.safety-note { border-radius:13px; display:flex; align-items:center; gap:10px; }
.preview-banner { margin-bottom:14px; padding:10px 12px; justify-content:space-between; background:#1f1f1f; color:#fff; }
.banner-copy { display:flex; align-items:center; gap:9px; }
.banner-copy strong,.banner-copy span { display:block; }
.banner-copy strong { font-size:12px; }
.banner-copy span { margin-top:2px; color:rgba(255,255,255,.62); font-size:10px; }
.inline-icon svg,.banner-copy>svg { width:18px; height:18px; }
.preview-banner .link-button { color:#fff; }
.empty-state { min-height:150px; padding:22px; border:1px dashed var(--line-strong); border-radius:17px; display:grid; place-content:center; justify-items:center; text-align:center; color:var(--muted); }
.empty-state.compact { min-height:120px; }
.empty-state>span { width:38px; height:38px; margin-bottom:10px; display:grid; place-items:center; border-radius:50%; background:var(--surface-soft); color:var(--ink); }
.empty-state svg { width:20px; height:20px; }
.empty-state strong { color:var(--ink); font-size:14px; }
.empty-state p { max-width:330px; margin:5px 0 0; font-size:11px; line-height:1.45; }

/* Schedule */
.schedule-controls { position:sticky; z-index:18; top:calc(var(--topbar-height) + var(--safe-top)); margin:0 -16px 4px; padding:0 16px 12px; border-bottom:1px solid var(--line); background:rgba(243,240,232,.95); }
.day-switch { padding:3px; border-radius:15px; background:#dfdcd3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.day-switch button { appearance:none; min-height:48px; border:0; border-radius:12px; background:transparent; display:grid; place-content:center; gap:1px; cursor:pointer; }
.day-switch button.active { background:#fff; box-shadow:0 2px 12px rgba(20,20,20,.1); }
.day-switch strong,.day-switch span { display:block; }
.day-switch strong { font-size:11px; letter-spacing:.06em; }
.day-switch span { color:var(--muted); font-size:9px; }
.search-field { height:46px; margin-top:9px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:#fff; display:flex; align-items:center; gap:9px; }
.search-field svg { width:18px; height:18px; color:var(--muted); stroke-width:1.8; }
.search-field input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }
.search-field input::placeholder { color:#aaa69e; }
.filter-line { margin-top:8px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.select-field,.input-field,.note-field { display:grid; gap:6px; }
.select-field>span,.input-field>span,.note-field>span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.select-field select,.input-field input { width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px; outline:0; background:#fff; color:var(--ink); font-size:12px; font-weight:700; }
.filter-favorite { appearance:none; height:44px; align-self:end; padding:0 11px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; font-weight:750; cursor:pointer; }
.filter-favorite.active { background:#fff2bd; color:#9b6900; }
.filter-favorite svg { width:17px; height:17px; }
.result-line { min-height:32px; display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; }
.result-line strong { color:var(--ink); }
.result-line button { appearance:none; margin-left:auto; border:0; background:transparent; color:var(--accent); font-size:10px; font-weight:800; cursor:pointer; }
.time-divider { height:34px; display:flex; align-items:center; }
.time-divider span { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.event-row { min-height:66px; display:grid; grid-template-columns:58px minmax(0,1fr) 43px; align-items:center; overflow:hidden; border-left:3px solid var(--stage-color,transparent); }
.event-row.live { border-color:var(--stage-color,var(--accent)); background:#fff8f5; }
.event-time { align-self:stretch; padding:10px 7px; border-right:1px solid var(--line); display:grid; place-content:center; gap:2px; text-align:center; }
.event-time strong,.event-time span { display:block; }
.event-time strong { font-size:14px; }
.event-time span { color:var(--muted); font-size:9px; }
.event-copy { min-width:0; padding:10px 11px; }
.event-copy span { margin-top:5px; }

/* Map */
.map-screen { width:100%; min-height:100%; height:auto; position:relative; overflow:visible; padding-bottom:10px; background:var(--bg); }
.map-surface { position:relative; width:min(100%,620px); height:auto; aspect-ratio:1/1; margin:0 auto; overflow:hidden; background:#c7c0b4; }
.festival-map { width:100%; height:100%; display:block; user-select:none; touch-action:none; cursor:grab; }
.festival-map:active { cursor:grabbing; }
.map-surface.pin-mode .festival-map { cursor:crosshair; }
.official-map-image,.heatmap-layer { pointer-events:none; }
.heatmap-layer { mix-blend-mode:multiply; }
.heat-cell { filter:blur(3px); }
.stage-tap-area { fill:transparent; pointer-events:all; cursor:pointer; }
.stage-selected-ring { fill:rgba(255,255,255,.38); stroke:#111; stroke-width:6; vector-effect:non-scaling-stroke; pointer-events:none; }
.stage-status-dot { fill:var(--stage-color,var(--accent)); stroke:#fff; stroke-width:5; vector-effect:non-scaling-stroke; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.36)); }
.official-stage-hotspot.live .stage-status-dot { animation:stagePulse 1.7s ease-in-out infinite; }
@keyframes stagePulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.official-map-pin { cursor:pointer; }
.official-map-pin circle:not(.self-pulse) { stroke:#fff; stroke-width:6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 4px 5px rgba(0,0,0,.38)); }
.official-map-pin text { fill:#fff; font-size:12px; font-weight:900; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.self-pin circle:not(.self-pulse) { fill:var(--accent); }
.friend-pin circle { fill:var(--blue); }
.self-pulse { fill:rgba(255,91,61,.25); stroke:none; animation:selfPulse 1.9s ease-out infinite; }
@keyframes selfPulse { 0%{opacity:.9;transform:scale(.72)} 100%{opacity:0;transform:scale(1.35)} }
.map-live-panel { position:absolute; z-index:8; top:11px; left:11px; max-width:calc(100% - 95px); padding:5px; border:1px solid rgba(255,255,255,.22); border-radius:16px; background:#1b1b1b; color:#fff; display:flex; align-items:center; gap:5px; box-shadow:0 10px 25px rgba(0,0,0,.22); }
.map-pill { appearance:none; height:38px; padding:0 10px; border:0; border-radius:11px; background:transparent; color:rgba(255,255,255,.68); display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; cursor:pointer; }
.map-pill.active,.map-pill.sharing { background:rgba(255,255,255,.14); color:#fff; }
.map-pill.sharing { color:#82e5b8; }
.map-pill svg { width:17px; height:17px; }
.map-live-copy { min-width:48px; padding:0 7px; border-left:1px solid rgba(255,255,255,.13); }
.map-live-copy strong,.map-live-copy span { display:block; }
.map-live-copy strong { font-size:13px; }
.map-live-copy span { margin-top:1px; color:rgba(255,255,255,.55); font-size:8px; white-space:nowrap; }
.map-zoom-controls { position:absolute; z-index:8; top:11px; right:11px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:15px; background:#1b1b1b; color:#fff; display:grid; box-shadow:0 10px 25px rgba(0,0,0,.22); }
.map-zoom-controls button,.map-zoom-controls span { width:44px; height:37px; display:grid; place-items:center; border:0; border-bottom:1px solid rgba(255,255,255,.1); background:transparent; color:inherit; }
.map-zoom-controls button { font-size:23px; line-height:1; cursor:pointer; }
.map-zoom-controls span { height:26px; color:rgba(255,255,255,.58); font-size:8px; font-weight:800; }
.map-zoom-controls>:last-child { border-bottom:0; font-size:17px; }
.map-source-chip { display:none; }
.map-placeholder-notice { position:absolute; z-index:9; top:11px; left:11px; padding:7px 9px; background:rgba(43,9,19,.94); color:#fff; display:flex; flex-direction:column; gap:1px; pointer-events:none; }
.map-placeholder-notice strong { color:var(--accent); font-size:9px; letter-spacing:1px; }
.map-placeholder-notice span { font-size:8px; font-weight:750; }
.map-action-bar { position:absolute; z-index:10; left:50%; bottom:10px; transform:translateX(-50%); padding:5px; border:1px solid rgba(255,255,255,.2); border-radius:17px; background:#1b1b1b; display:flex; align-items:center; gap:4px; box-shadow:0 14px 36px rgba(0,0,0,.26); }
.map-action-bar button { appearance:none; min-width:68px; height:43px; padding:0 10px; border:0; border-radius:12px; background:transparent; color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; font-weight:850; cursor:pointer; }
.map-action-bar button.active,.map-action-bar button:last-child { background:var(--accent); color:#fff; }
.map-action-bar svg { width:17px; height:17px; }
.map-offline { position:absolute; z-index:9; top:64px; left:50%; transform:translateX(-50%); padding:8px 10px; background:rgba(20,20,20,.9); color:#fff; font-size:10px; font-weight:800; white-space:nowrap; }
.map-offline svg { width:16px; height:16px; }
.pin-instruction { position:absolute; z-index:12; top:70px; left:50%; width:min(calc(100% - 24px),390px); transform:translateX(-50%); padding:10px 11px; border-radius:14px; background:#171717; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.pin-instruction>div { min-width:0; display:flex; align-items:center; gap:9px; }
.pin-instruction svg { width:20px; height:20px; }
.pin-instruction strong,.pin-instruction small { display:block; }
.pin-instruction strong { font-size:12px; }
.pin-instruction small { margin-top:2px; color:rgba(255,255,255,.58); font-size:9px; }
.pin-instruction button { appearance:none; border:0; background:transparent; color:#fff; font-size:10px; font-weight:800; cursor:pointer; }
.stage-dock { position:relative; width:calc(100% - 20px); max-width:610px; min-height:0; margin:10px auto 0; padding:15px; border:1px solid var(--line); border-radius:18px; background:#fbfaf7; color:var(--ink); box-shadow:none; }
.stage-dock-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.stage-title h2 { margin:3px 0 0; font-size:26px; line-height:1; letter-spacing:-.055em; }
.stage-crowd { text-align:right; }
.stage-crowd span,.stage-crowd strong { display:block; }
.stage-crowd span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.stage-crowd strong { margin-top:4px; font-size:12px; }
.stage-program { width:100%; min-height:45px; margin-top:10px; padding:0 11px; border:1px solid var(--line); border-radius:12px; background:#fff; display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:8px; }
.stage-program.empty { grid-template-columns:34px minmax(0,1fr); }
.stage-program span { color:var(--accent); font-size:10px; font-weight:900; text-transform:uppercase; }
.stage-program strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.stage-program svg { width:16px; height:16px; color:var(--muted); }
.stage-actions { margin-top:10px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); }
.stage-actions .primary-button,.stage-actions .secondary-button { min-width:0; padding:0 10px; }

/* Friends */
.group-onboarding,.active-group { max-width:610px; margin:0 auto; }
.group-onboarding { padding:19px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.78); }
.onboarding-copy { padding-bottom:18px; border-bottom:1px solid var(--line); }
.onboarding-copy>span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; }
.onboarding-copy svg { width:20px; height:20px; }
.onboarding-copy h2 { margin:15px 0 0; font-size:26px; line-height:1.05; letter-spacing:-.05em; }
.onboarding-copy p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.group-form { margin-top:17px; display:grid; gap:11px; }
.or-line { height:34px; margin:11px 0 -2px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.or-line::before,.or-line::after { content:""; height:1px; flex:1; background:var(--line); }
.or-line span { padding:0 10px; }
.group-header-card { padding:18px; border-radius:20px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.group-header-card>div span,.group-header-card>div strong,.group-header-card>div small { display:block; }
.group-header-card>div span { color:rgba(255,255,255,.55); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.group-header-card>div strong { margin-top:4px; font-size:30px; line-height:1; letter-spacing:.08em; }
.group-header-card>div small { margin-top:5px; color:rgba(255,255,255,.55); font-size:10px; }
.group-header-card .primary-button { background:var(--accent); }
.sharing-card { margin-top:10px; padding:15px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.76); }
.sharing-status { display:flex; align-items:center; gap:10px; }
.sharing-status>i { width:10px; height:10px; border-radius:50%; background:#b8b4ab; box-shadow:0 0 0 5px rgba(184,180,171,.18); }
.sharing-card.active .sharing-status>i { background:var(--green); box-shadow:0 0 0 5px rgba(24,167,110,.13); }
.sharing-status strong,.sharing-status span { display:block; }
.sharing-status strong { font-size:13px; }
.sharing-status span { margin-top:2px; color:var(--muted); font-size:10px; }
.duration-switch { margin-top:13px; padding:3px; border-radius:13px; background:var(--surface-soft); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
.duration-switch button { appearance:none; min-width:0; height:40px; padding:0 5px; border:0; border-radius:10px; background:transparent; display:flex; align-items:center; justify-content:center; gap:4px; font-size:10px; font-weight:800; cursor:pointer; }
.duration-switch button:active { background:#fff; }
.duration-switch svg { width:15px; height:15px; }
.stop-link,.leave-link { appearance:none; border:0; background:transparent; color:#b63748; font-size:10px; font-weight:800; cursor:pointer; }
.stop-link { margin-top:10px; padding:4px 0; }
.friend-section { margin-top:24px; }
.friend-row { min-height:66px; padding:9px 9px 9px 11px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; }
.friend-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:11px; font-weight:900; }
.friend-copy { min-width:0; }
.friend-copy strong,.friend-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-copy strong { font-size:13px; }
.friend-copy span { margin-top:4px; color:var(--muted); font-size:10px; }
.friend-map-button { min-height:38px; padding:0 8px; display:flex; align-items:center; gap:4px; color:var(--ink); }
.friend-map-button strong { font-size:10px; }
.friend-map-button svg { width:14px; height:14px; color:var(--muted); }
.active-group>.leave-link { width:100%; margin-top:25px; padding:12px; text-align:center; }
.inline-alert { width:100%; min-height:45px; margin-bottom:12px; padding:10px 12px; background:#fff4d7; color:#735400; font-size:10px; line-height:1.4; }
.inline-alert svg { width:18px; height:18px; flex:0 0 auto; }

/* Bottom navigation */
.bottom-nav { position:fixed; z-index:65; left:50%; bottom:0; width:min(100%,820px); min-height:calc(var(--nav-height) + var(--safe-bottom)); padding:5px max(8px,var(--safe-right)) calc(5px + var(--safe-bottom)) max(8px,var(--safe-left)); transform:translateX(-50%); border-top:1px solid var(--line); background:#fbfaf7; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.nav-button { appearance:none; min-width:0; min-height:57px; padding:4px 3px; border:0; border-radius:13px; background:transparent; color:#89857e; display:grid; place-content:center; justify-items:center; gap:3px; cursor:pointer; }
.nav-button.active { color:var(--ink); }
.nav-icon { width:30px; height:26px; position:relative; display:grid; place-items:center; }
.nav-icon svg { width:22px; height:22px; stroke-width:1.7; }
.nav-button.active .nav-icon { border-radius:999px; background:var(--ink); color:#fff; }
.nav-label { font-size:9px; font-weight:820; }
.nav-badge { position:absolute; top:-4px; right:-5px; min-width:17px; height:17px; padding:0 4px; border:2px solid #fff; border-radius:999px; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:8px; font-weight:900; }

/* Modal and feedback */
.modal-backdrop { position:fixed; z-index:100; inset:0; padding:50px max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left)); background:rgba(12,12,12,.62); display:flex; align-items:flex-end; justify-content:center; }
.modal-sheet { width:min(100%,610px); max-height:min(88dvh,850px); overflow:hidden; border-radius:24px 24px 18px 18px; background:#fbfaf7; box-shadow:0 24px 80px rgba(0,0,0,.34); animation:sheetIn 180ms ease-out; }
.modal-sheet.wide { width:min(100%,680px); }
@keyframes sheetIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.modal-handle { width:38px; height:4px; margin:8px auto 2px; border-radius:999px; background:#ccc8c0; }
.modal-head { min-height:62px; padding:10px 15px 11px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.modal-head h2,.modal-head p { margin:0; }
.modal-head h2 { font-size:21px; letter-spacing:-.045em; }
.modal-head p { margin-top:3px; color:var(--muted); font-size:10px; }
.modal-body { max-height:calc(88dvh - 77px); overflow-y:auto; overscroll-behavior:contain; padding:17px 18px calc(22px + var(--safe-bottom)); }
.feedback-form { display:grid; gap:18px; }
.feedback-location-line { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:end; gap:8px; }
.grow { min-width:0; }
.feedback-group { display:grid; gap:9px; }
.field-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.field-heading strong { font-size:13px; }
.field-heading span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.crowd-choice-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.crowd-choice-row button { appearance:none; min-width:0; min-height:55px; padding:7px 3px; border:1px solid var(--line); border-radius:12px; background:#fff; display:grid; place-content:center; justify-items:center; gap:6px; font-size:9px; font-weight:800; cursor:pointer; }
.crowd-choice-row i { width:12px; height:12px; border-radius:50%; background:#83d6a5; }
.crowd-choice-row button:nth-child(2) i { background:#f1cb4d; }
.crowd-choice-row button:nth-child(3) i { background:#ff8a48; }
.crowd-choice-row button:nth-child(4) i { background:#f13f62; }
.feedback-chip-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.feedback-chip { appearance:none; min-width:0; min-height:43px; padding:0 10px; border:1px solid var(--line); border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; font-size:10px; font-weight:750; cursor:pointer; }
.feedback-chip.selected { border-color:var(--ink); background:var(--ink); color:#fff; }
.feedback-chip.selected.positive { background:#0b7c53; border-color:#0b7c53; }
.feedback-chip.selected.warning { background:#8b6400; border-color:#8b6400; }
.feedback-chip.selected.danger { background:#a92d43; border-color:#a92d43; }
.feedback-chip svg { width:15px; height:15px; flex:0 0 auto; }
.note-field { position:relative; }
.note-field span small { font-weight:600; text-transform:none; letter-spacing:0; }
.note-field textarea { width:100%; min-height:84px; resize:vertical; padding:11px 12px 25px; border:1px solid var(--line); border-radius:12px; outline:0; background:#fff; color:var(--ink); font-size:12px; line-height:1.45; }
.note-field b { position:absolute; right:10px; bottom:8px; color:var(--muted); font-size:8px; }
.safety-note { padding:10px 12px; background:#ffe6e9; color:#8e2335; font-size:10px; line-height:1.4; }
.safety-note svg { width:18px; height:18px; flex:0 0 auto; }
.privacy-line,.version-line { margin:-7px 0 0; color:var(--muted); font-size:9px; line-height:1.5; text-align:center; }
.trend-note,.compact-trends { padding:11px; border-radius:12px; background:var(--surface-soft); }
.trend-note { display:flex; align-items:center; gap:9px; }
.trend-note>span { color:var(--muted); }
.trend-note svg { width:18px; height:18px; }
.trend-note p { margin:0; color:var(--muted); font-size:9px; line-height:1.4; }
.compact-trends>div:first-child { display:flex; justify-content:space-between; gap:10px; }
.compact-trends strong { font-size:11px; }
.compact-trends>div:first-child span { color:var(--muted); font-size:9px; }
.trend-chips { margin-top:8px; display:flex; flex-wrap:wrap; gap:5px; }
.trend-chips span { padding:5px 7px; border-radius:999px; background:#fff; font-size:9px; }
.trend-chips b { margin-left:2px; }
.about-intro { padding:13px; border-radius:15px; background:var(--ink); color:#fff; display:flex; align-items:center; gap:12px; }
.about-mark { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:#fff; color:var(--ink); font-size:17px; font-weight:950; letter-spacing:-.08em; }
.about-mark span { color:var(--accent); }
.about-intro strong,.about-intro p { display:block; margin:0; }
.about-intro strong { font-size:14px; }
.about-intro p { margin-top:4px; color:rgba(255,255,255,.6); font-size:9px; }
.info-list { margin-top:15px; display:grid; }
.info-list-row { padding:12px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; }
.info-list-row>span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--surface-soft); }
.info-list-row svg { width:15px; height:15px; }
.info-list-row h3,.info-list-row p { margin:0; }
.info-list-row h3 { font-size:12px; }
.info-list-row p { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.5; }
.info-list-row a { color:inherit; font-weight:800; }
.portfolio-card { margin-top:14px; padding:14px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.portfolio-card strong,.portfolio-card span { display:block; }
.portfolio-card strong { font-size:12px; }
.portfolio-card span { margin-top:4px; color:var(--muted); font-size:10px; }
.portfolio-card a { display:inline-block; margin-top:10px; color:var(--accent); font-size:10px; font-weight:850; text-decoration:none; }
.modal-actions { display:flex; flex-wrap:nowrap; }
.modal-actions>* { min-width:0; flex:1; }
.modal-body>.leave-link { width:100%; margin-top:14px; padding:9px; text-align:center; }
.version-line { margin-top:4px; }
.event-detail { padding:18px; border-radius:18px; background:#fff; border-top:5px solid var(--stage-color,var(--accent)); }
.event-detail h3 { margin:10px 0 0; font-size:29px; line-height:1.02; letter-spacing:-.055em; }
.event-detail-time { margin-top:18px; padding:12px; border-radius:12px; background:var(--surface-soft); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.event-detail-time strong { font-size:15px; }
.event-detail-time span { color:var(--muted); font-size:10px; }
.install-card { padding:24px 18px; border-radius:17px; background:#fff; text-align:center; }
.install-card>span { width:48px; height:48px; margin:0 auto; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.install-card svg { width:23px; height:23px; }
.install-card h3 { margin:14px 0 0; font-size:20px; }
.install-card p { margin:7px 0 16px; color:var(--muted); font-size:11px; line-height:1.5; }
.install-steps { display:grid; gap:8px; }
.install-steps>div { padding:12px; border:1px solid var(--line); border-radius:13px; background:#fff; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:9px; }
.install-steps b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:11px; }
.install-steps strong,.install-steps small { display:block; }
.install-steps strong { font-size:12px; }
.install-steps small { margin-top:3px; color:var(--muted); font-size:9px; }

.project-credit { width:100%; max-width:610px; margin:30px auto 0; padding:18px 0 4px; border-top:1px solid var(--line); text-align:center; }
.project-credit a { color:inherit; text-decoration:none; }
.project-credit strong,.project-credit span { display:block; }
.project-credit strong { font-size:11px; letter-spacing:-.01em; }
.project-credit span { margin-top:4px; color:var(--muted); font-size:9px; }
.map-screen>.project-credit { width:calc(100% - 20px); margin:12px auto calc(8px + var(--safe-bottom)); }

/* Boot and toasts */
.boot-screen { min-height:100vh; min-height:100dvh; display:grid; place-content:center; justify-items:center; gap:13px; background:var(--bg); color:var(--muted); text-align:center; }
.boot-screen p { margin:0; font-size:12px; }
.boot-mark { width:70px; height:70px; position:relative; display:grid; place-items:center; border-radius:20px; background:var(--ink); color:#fff; box-shadow:var(--shadow); }
.boot-mark span { font-size:23px; font-weight:950; letter-spacing:-.08em; }
.boot-mark b { position:absolute; top:8px; right:9px; color:var(--accent); }
.toast-root { position:fixed; z-index:140; top:calc(12px + var(--safe-top)); left:50%; width:min(calc(100% - 24px),450px); transform:translateX(-50%); pointer-events:none; }
.toast { padding:12px 14px; border-radius:13px; background:rgba(19,19,19,.94); color:#fff; box-shadow:0 12px 35px rgba(0,0,0,.25); font-size:11px; line-height:1.4; text-align:center; animation:toastIn 150ms ease-out; }
.toast.error { background:#9d293e; }
@keyframes toastIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:430px) {
  .wordmark-sub { display:none; }
  .topbar-title { font-size:13px; }
  .page-heading h1,.home-hero h1 { font-size:38px; }
  .home-hero { padding:24px 20px 20px; }
  .quick-card { grid-template-columns:31px minmax(0,1fr); }
  .quick-card>svg { display:none; }
  .map-live-copy { display:none; }
  .map-pill { padding:0 8px; width:38px; justify-content:center; }
  .map-pill span { display:none; }
  .stage-actions .primary-button span,.stage-actions .secondary-button span { overflow:hidden; text-overflow:ellipsis; }
  .modal-actions { flex-wrap:wrap; }
  .modal-actions>* { flex:1 1 42%; }
}
@media (max-height:700px) {
  .stage-dock { min-height:0; padding:12px; }
  .stage-title h2 { font-size:22px; }
  .stage-program { margin-top:7px; min-height:39px; }
  .stage-actions { margin-top:7px; }
  .stage-actions .primary-button,.stage-actions .secondary-button { min-height:40px; }
  .map-action-bar { bottom:10px; }
}
@media (min-width:720px) {
  .screen:not(.map-screen) { padding-left:34px; padding-right:34px; }
  .home-screen .section-block,.schedule-controls,.schedule-screen .event-list,.schedule-screen .result-line { max-width:660px; margin-left:auto; margin-right:auto; }
  .schedule-controls { margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* --------------------------------------------------------------------------
   VindJeFriends visual system
   Original interface language: high-energy display moments, calm utility UI.
   Original identity; no official event marks, typefaces or artwork are reproduced here.
   -------------------------------------------------------------------------- */
:root {
  --bg: #300814;
  --surface: #fff1dc;
  --surface-soft: #e8ddce;
  --ink: #2e0815;
  --muted: #75646a;
  --line: rgba(46, 8, 21, .18);
  --line-strong: rgba(46, 8, 21, .34);
  --accent: #ff7258;
  --accent-soft: #ffd0c5;
  --cyan: #34ead7;
  --electric: #2765ff;
  --cream: #fff1dc;
  --green: #149a68;
  --yellow: #ffd45e;
  --red: #ee3d59;
  --blue: #2765ff;
  --shadow: 0 16px 42px rgba(24, 2, 10, .24);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

html, body { background: #160309; }
body { color: var(--ink); font-family: var(--body); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--cyan);
}
.app-shell {
  background: var(--surface);
  box-shadow: 0 0 100px rgba(0, 0, 0, .55);
}

/* Navigation is intentionally quiet; the expressive layer lives in headings. */
.topbar {
  min-height: calc(64px + var(--safe-top));
  padding-top: calc(9px + var(--safe-top));
  border: 0;
  border-bottom: 2px solid var(--cyan);
  background: var(--bg);
  color: var(--cream);
}
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--electric) 44%, var(--accent));
}
.wordmark { gap: 7px; color: var(--cream); }
.wordmark-main {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--display);
  font-size: 27px;
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.05em;
  transform: skewX(-7deg) scaleX(.9);
  transform-origin: left center;
  color: var(--accent);
}
.wordmark-main b, .wordmark-main i { font: inherit; }
.wordmark-main i { color: var(--cyan); }
.wordmark-sub { color: rgba(255, 241, 220, .62); }
.topbar-title { color: var(--cream); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.icon-button, .close-button, .square-action { border-radius: 50%; }
.icon-button { border-color: rgba(255, 241, 220, .35); background: transparent; color: var(--cream); }
.offline-pill { background: var(--accent); color: var(--bg); }

.screen { padding-top: 18px; }
.page-heading {
  min-height: 116px;
  margin: -18px -16px 18px;
  padding: 25px 18px 18px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  color: var(--cream);
}
.page-heading::before {
  content: "";
  position: absolute;
  width: 390px;
  height: 210px;
  right: -150px;
  top: -88px;
  transform: rotate(-8deg);
  background: repeating-radial-gradient(
    ellipse at 50% 50%,
    transparent 0 8px,
    var(--cyan) 9px 11px,
    transparent 12px 18px,
    var(--electric) 19px 24px,
    transparent 25px 31px
  );
  opacity: .9;
}
.page-heading > * { position: relative; z-index: 1; }
.page-heading h1, .home-hero h1 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.page-heading h1 { color: var(--accent); font-size: clamp(42px, 11vw, 62px); line-height: .84; }
.page-heading .eyebrow { color: rgba(255, 241, 220, .7); }
.eyebrow { font-size: 9px; letter-spacing: .14em; }

.primary-button, .secondary-button {
  min-height: 46px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.primary-button { background: var(--accent); color: var(--bg); }
.primary-button:hover { background: #ff826b; }
.secondary-button { border: 1px solid var(--line-strong); background: var(--surface); }
.quiet-button {
  border-radius: 0;
  border-color: rgba(255, 241, 220, .34);
  background: transparent;
  color: var(--cream);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quiet-button.active { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.text-button, .link-button { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* Opening poster: expressive, but kept to one deliberate composition. */
.home-hero {
  min-height: 430px;
  padding: 28px 24px 24px;
  border-radius: 0;
  background: var(--bg);
  color: var(--cream);
  box-shadow: none;
  isolation: isolate;
}
.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 570px;
  height: 510px;
  right: -310px;
  top: -90px;
  transform: rotate(-12deg);
  background: repeating-radial-gradient(
    ellipse at 50% 50%,
    transparent 0 10px,
    var(--cyan) 11px 13px,
    transparent 14px 21px,
    var(--electric) 22px 30px,
    transparent 31px 39px
  );
  filter: saturate(1.08);
}
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 270px;
  height: 360px;
  right: -160px;
  bottom: -180px;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(20deg);
}
.home-hero .eyebrow { color: var(--cyan); }
.home-hero h1 {
  max-width: 540px;
  margin-top: 16px;
  color: var(--accent);
  font-size: clamp(52px, 14vw, 82px);
  line-height: .82;
  text-wrap: balance;
  transform: skewX(-3deg) scaleX(.96);
  transform-origin: left top;
}
.home-hero .hero-copy {
  max-width: 390px;
  margin-top: 20px;
  color: var(--cream);
  font-size: 13px;
  line-height: 1.52;
  font-weight: 650;
}
.countdown-line { border-color: rgba(255, 241, 220, .25); }
.countdown-line span { color: rgba(255, 241, 220, .62); }
.countdown-line strong { color: var(--cyan); font-family: var(--display); font-size: 30px; }
.home-hero .primary-button { background: var(--accent); color: var(--bg); }
.home-hero .secondary-button { border-color: rgba(255, 241, 220, .45); background: transparent; color: var(--cream); }

.quick-grid { gap: 2px; margin-top: 2px; background: var(--bg); }
.quick-card {
  min-height: 88px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--bg);
}
.quick-card:nth-child(2) { background: var(--electric); color: #fff; }
.quick-card > span { border-radius: 50%; background: var(--bg); color: var(--cyan); }
.quick-card:nth-child(2) > span { background: var(--cream); color: var(--electric); }
.quick-card > svg, .quick-card small { color: currentColor; opacity: .68; }
.quick-card strong { font-size: 12px; letter-spacing: .015em; text-transform: uppercase; }
.quick-card small { font-size: 9px; }

.section-head h2 { font-family: var(--display); font-size: 25px; font-weight: 900; letter-spacing: -.015em; text-transform: uppercase; }
.section-head p { color: var(--muted); }
.simple-list, .event-list, .friend-list, .friend-mini-list, .now-list { gap: 2px; background: var(--bg); }
.now-row, .list-row, .event-row, .friend-row {
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.now-row { border-left: 6px solid var(--stage-color, var(--accent)); }
.now-main > strong, .list-main strong, .event-copy strong { font-weight: 850; }
.now-stage i, .event-copy i, .list-main i, .event-detail-stage i, .stage-title i { border-radius: 0; }
.favorite-button { border-radius: 0; }
.favorite-button.active { background: var(--accent-soft); color: var(--bg); }
.list-time { border-color: var(--line-strong); background: var(--bg); color: var(--cream); }
.list-time span { color: var(--cyan); }
.preview-banner { border-radius: 0; background: var(--electric); }
.empty-state { border-radius: 0; }
.empty-state > span { border-radius: 50%; }
.project-credit {
  border: 0;
  border-top: 3px solid var(--cyan);
  padding: 17px 14px;
  background: var(--bg);
  color: var(--cream);
  text-align: left;
}
.project-credit span { color: var(--cyan); }

/* Programme: sticky controls stay plain and readable. */
.schedule-controls {
  border-color: var(--line-strong);
  background: rgba(255, 241, 220, .97);
}
.day-switch { border-radius: 0; background: var(--bg); gap: 2px; }
.day-switch button { border-radius: 0; color: rgba(255, 241, 220, .65); }
.day-switch button.active { background: var(--accent); color: var(--bg); box-shadow: none; }
.day-switch button.active span { color: var(--bg); opacity: .72; }
.search-field, .select-field select, .input-field input, .filter-favorite { border-radius: 0; }
.search-field { border-color: var(--line-strong); }
.filter-favorite.active { background: var(--accent-soft); color: var(--bg); }
.result-line button { color: var(--electric); }
.event-row { border-left-width: 5px; }
.event-time { border-color: var(--line-strong); }
.event-row.live { background: #fff7ee; }

/* Map controls form one compact instrument panel. */
.map-screen { background: var(--bg); padding-bottom: 0; }
.map-surface { width: min(100%, 620px); background: #918f88; }
.map-live-panel, .map-zoom-controls, .map-action-bar {
  border-radius: 0;
  border-color: rgba(255, 241, 220, .35);
  background: rgba(48, 8, 20, .94);
  box-shadow: none;
}
.map-pill { border-radius: 0; }
.map-pill.active { background: var(--electric); }
.map-pill.sharing { background: var(--cyan); color: var(--bg); }
.map-action-bar button { border-radius: 0; }
.map-action-bar button.active, .map-action-bar button:last-child { background: var(--accent); color: var(--bg); }
.map-offline, .pin-instruction { border-radius: 0; background: var(--bg); }
.stage-dock {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  border-top: 5px solid var(--stage-color, var(--accent));
  background: var(--surface);
}
.stage-title h2 { font-family: var(--display); font-size: 31px; text-transform: uppercase; letter-spacing: -.01em; }
.stage-program { border-radius: 0; border-color: var(--line-strong); }
.stage-program span { color: var(--electric); }
.stage-actions .primary-button { background: var(--bg); color: var(--cream); }

/* Groups */
.group-onboarding, .sharing-card, .group-header-card { border-radius: 0; }
.group-onboarding { border-color: var(--line-strong); }
.onboarding-copy > span, .friend-avatar { border-radius: 50%; }
.onboarding-copy > span { background: var(--electric); }
.onboarding-copy h2 { font-family: var(--display); text-transform: uppercase; }
.group-header-card { background: var(--electric); }
.group-header-card .primary-button { background: var(--accent); color: var(--bg); }
.sharing-card { border-color: var(--line-strong); }
.duration-switch { border-radius: 0; background: var(--bg); gap: 2px; }
.duration-switch button { border-radius: 0; background: var(--surface); }
.friend-avatar { background: var(--electric); }
.inline-alert { border-radius: 0; }

/* Bottom bar: one active line, no floating app-card treatment. */
.bottom-nav {
  min-height: calc(70px + var(--safe-bottom));
  padding: 0 6px var(--safe-bottom);
  border: 0;
  border-top: 2px solid var(--cyan);
  background: var(--bg);
}
.nav-button { min-height: 68px; border-radius: 0; color: rgba(255, 241, 220, .58); }
.nav-button.active { color: var(--accent); }
.nav-button.active .nav-icon { border-radius: 0; background: transparent; color: var(--accent); }
.nav-label { font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.nav-badge { border-color: var(--bg); background: var(--cyan); color: var(--bg); }

/* Feedback is a utility sheet, not a collection of SaaS chips. */
.modal-backdrop { background: rgba(16, 1, 7, .78); }
.modal-sheet {
  border-radius: 0;
  border-top: 5px solid var(--cyan);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
.modal-handle { border-radius: 0; background: var(--bg); }
.modal-head { border-color: var(--line-strong); }
.modal-head h2 { font-family: var(--display); font-size: 27px; text-transform: uppercase; letter-spacing: -.01em; }
.close-button { border-color: var(--line-strong); background: transparent; }
.feedback-location-line .square-action { border-radius: 0; }
.crowd-choice-row { gap: 2px; background: var(--bg); }
.crowd-choice-row button { border: 0; border-radius: 0; }
.feedback-chip-grid { gap: 2px; background: var(--bg); }
.feedback-chip { min-height: 47px; border: 0; border-radius: 0; padding-inline: 11px; }
.feedback-chip.selected { background: var(--electric); }
.feedback-chip.selected.positive { background: #08754f; }
.feedback-chip.selected.warning { background: #986600; }
.feedback-chip.selected.danger { background: #a82d48; }
.note-field textarea { border-radius: 0; border-color: var(--line-strong); }
.safety-note, .trend-note, .compact-trends, .about-intro, .portfolio-card, .event-detail, .event-detail-time, .install-card, .install-steps > div { border-radius: 0; }
.about-intro { background: var(--bg); }
.about-mark { border-radius: 0; background: var(--accent); color: var(--bg); }
.about-mark span { color: var(--electric); }
.portfolio-card { border-color: var(--line-strong); }
.portfolio-card a { color: var(--electric); }
.event-detail { border-top-color: var(--stage-color, var(--accent)); }

.boot-screen { background: var(--bg); color: rgba(255, 241, 220, .65); }
.boot-mark { border-radius: 0; background: var(--accent); color: var(--bg); box-shadow: none; }
.boot-mark b { color: var(--electric); }
.toast { border-radius: 0; background: var(--bg); }

@media (max-width: 430px) {
  .home-hero { min-height: 410px; padding: 25px 20px 22px; }
  .home-hero h1 { font-size: 52px; }
  .page-heading h1 { font-size: 44px; }
  .quick-grid { margin-left: 0; margin-right: 0; }
}

/* Heat data must remain legible over the printed terrain map. */
.heatmap-layer { mix-blend-mode: normal; }
.heat-cell { filter: blur(2px) drop-shadow(0 0 5px rgba(48, 8, 20, .35)); }