:root {
  --access-bg: #0f141e;
  --access-surface: #171d28;
  --access-field: #1c2330;
  --access-line: #2a3240;
  --access-text: #f6f8fb;
  --access-muted: #98a1ae;
  --access-accent: #08c96f;
  --access-accent-strong: #05b963;
  --access-danger: #ff6c70;
}

html[data-theme="light"] {
  --access-bg: #f7f9f8;
  --access-surface: #ffffff;
  --access-field: #f1f4f2;
  --access-line: #e0e5e2;
  --access-text: #101511;
  --access-muted: #6d7771;
}

.access-flow {
  background: var(--access-bg);
  color: var(--access-text);
  display: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 10000;
}

body.auth-gated .access-flow { display: block; }
body.auth-gated #authModal { display: none !important; }
body.access-flow-complete .access-flow { display: none !important; }

.access-screen {
  box-sizing: border-box;
  display: none;
  height: 100dvh;
  margin: 0 auto;
  max-width: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.access-screen::-webkit-scrollbar { display: none; }
.access-screen.active { display: flex; flex-direction: column; }

.access-visual {
  align-items: flex-end;
  background: linear-gradient(155deg, #17354a, #0d1725 64%);
  border-radius: 0 0 38px 38px;
  display: flex;
  flex: 1 1 46%;
  justify-content: center;
  margin: calc(max(18px, env(safe-area-inset-top)) * -1) -22px 32px;
  min-height: 300px;
  overflow: hidden;
  padding: 38px 24px 0;
  position: relative;
}

html[data-theme="light"] .access-visual { background: linear-gradient(155deg, #eaf3ef, #dce9e3 64%); }
.access-visual-map::before { background: repeating-linear-gradient(35deg, transparent 0 44px, rgba(255,255,255,.07) 45px 47px); content: ""; inset: -30%; position: absolute; transform: rotate(8deg); }
.access-phone-preview { background: #101722; border: 5px solid #303947; border-bottom: 0; border-radius: 30px 30px 0 0; box-shadow: 0 28px 70px rgba(0,0,0,.45); height: 88%; max-width: 270px; overflow: hidden; position: relative; width: 76%; }
.access-phone-preview::before { background: repeating-linear-gradient(30deg, transparent 0 38px, rgba(106,130,150,.22) 39px 41px); content: ""; inset: 0; position: absolute; }
.access-phone-preview > b { color: var(--access-accent); left: 18px; position: absolute; top: 18px; }
.access-preview-status { align-items: center; color: #f5f7fa; display: flex; font-size: 9px; justify-content: space-between; left: 14px; position: absolute; right: 14px; top: 15px; z-index: 2; }.access-preview-status b { color: var(--access-accent); font-size: 10px; }.access-preview-status span { letter-spacing: 2px; }
.access-preview-search { align-items: center; background: rgba(16,23,34,.94); border: 1px solid #303a48; border-radius: 9px; color: #c8d0d8; display: flex; font-size: 8px; font-weight: 700; gap: 5px; left: 14px; padding: 8px 10px; position: absolute; right: 14px; top: 39px; z-index: 3; }
.access-preview-search svg { height: 10px; width: 10px; }
.access-route-line { background: var(--access-accent); border-radius: 999px; height: 5px; left: 18%; position: absolute; top: 54%; transform: rotate(-25deg); width: 72%; }
.access-map-pin { align-items: center; background: var(--access-accent); border: 3px solid white; border-radius: 50% 50% 50% 8px; color: #07150d; display: flex; font-style: normal; font-weight: 900; height: 34px; justify-content: center; left: 50%; position: absolute; top: 43%; transform: rotate(-45deg); width: 34px; }
.access-map-pin::first-letter { transform: rotate(45deg); }
.access-map-pin-b { background: #ff5a5f; left: 71%; top: 30%; }.access-preview-sheet { background: #111824; border: 1px solid #2b3543; border-radius: 18px 18px 0 0; bottom: 0; display: grid; gap: 6px; left: 0; padding: 10px 12px 12px; position: absolute; right: 0; z-index: 4; }.access-preview-sheet > i { background: #68717d; border-radius: 99px; height: 3px; justify-self: center; margin-bottom: 3px; width: 28px; }.access-preview-sheet strong { color: #f7f8fa; font-size: 10px; }.access-preview-sheet span { background: #1c2430; border: 1px solid #2e3845; border-radius: 7px; color: #9ea7b3; font-size: 7px; padding: 7px; }.access-preview-sheet button,.access-choice-sheet button,.access-payment-sheet button { background: var(--access-accent); border: 0; border-radius: 7px; color: #06170e; font-size: 7px; font-weight: 800; min-height: 24px; pointer-events: none; }
.access-choice-preview { padding: 0; }.access-choice-route { background: var(--access-accent); border-radius: 99px; height: 4px; left: 14%; position: absolute; top: 37%; transform: rotate(-18deg); width: 74%; }.access-choice-sheet { background: #111824; border-radius: 18px 18px 0 0; bottom: 0; display: grid; gap: 6px; left: 0; padding: 11px 12px 12px; position: absolute; right: 0; z-index: 4; }.access-choice-sheet > small,.access-payment-sheet > small { color: #f5f7fa; font-size: 8px; font-weight: 800; margin-bottom: 2px; }.access-choice-sheet > span { align-items: center; background: #1b2430; border: 1px solid #303a47; border-radius: 8px; color: #f5f7fa; display: grid; grid-template-columns: 1fr auto; padding: 7px 9px; }.access-choice-sheet > span:first-of-type { border-color: var(--access-accent); }.access-choice-sheet span b { font-size: 8px; }.access-choice-sheet span em { color: #89939f; font-size: 6px; font-style: normal; grid-column: 1; }.access-choice-sheet span i { font-size: 8px; font-style: normal; grid-column: 2; grid-row: 1 / span 2; }
.access-payment-visual { align-items: flex-end; }.access-payment-preview { padding: 0; }.access-payment-preview::before { opacity: .5; }.access-payment-sheet { background: #111824; border-radius: 18px 18px 0 0; bottom: 0; display: grid; gap: 7px; left: 0; padding: 13px 12px 14px; position: absolute; right: 0; z-index: 4; }.access-payment-sheet > span { align-items: center; background: #1b2430; border: 1px solid #303a47; border-radius: 8px; color: #f5f7fa; display: grid; grid-template-columns: 1fr auto 16px; padding: 9px; }.access-payment-sheet > span.selected { border-color: var(--access-accent); }.access-payment-sheet span b { font-size: 8px; }.access-payment-sheet span i { color: #929ca7; font-size: 6px; font-style: normal; grid-column: 1; }.access-payment-sheet span em { color: var(--access-accent); font-size: 8px; font-style: normal; grid-column: 3; grid-row: 1 / span 2; }.access-shield { align-items: center; background: var(--access-accent); border: 4px solid #111824; border-radius: 50%; color: #07150d; display: flex; font-size: 16px; font-weight: 900; height: 42px; justify-content: center; position: absolute; right: 16px; top: 54px; width: 42px; z-index: 5; }

.access-copy { display: grid; gap: 10px; }.access-copy small { color: var(--access-accent); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.access-copy h1 { color: var(--access-text); font-size: clamp(30px,8vw,40px); letter-spacing: -.045em; line-height: 1.05; margin: 0; }.access-copy p { color: var(--access-muted); font-size: 15px; line-height: 1.55; margin: 0; }.access-copy-center { justify-items: center; text-align: center; }
.access-footer { display: grid; gap: 24px; margin-top: auto; padding-top: 28px; }.access-dots { display: flex; gap: 7px; }.access-dots i { background: #3a424e; border-radius: 99px; height: 6px; width: 7px; }.access-dots i.active { background: var(--access-accent); width: 24px; }.access-nav { display: grid; gap: 10px; grid-template-columns: .72fr 1.28fr; }
.access-primary,.access-secondary,.access-text-btn,.access-social-stack button,.access-inline-link { appearance: none; border: 0; font: inherit; }.access-primary,.access-secondary { border-radius: 13px; font-size: 15px; font-weight: 800; min-height: 54px; padding: 0 18px; width: 100%; }.access-primary { background: var(--access-accent); color: #06170e; }.access-primary:active { background: var(--access-accent-strong); transform: scale(.985); }.access-primary:disabled { opacity: .48; }.access-secondary,.access-text-btn { background: var(--access-surface); border: 1px solid var(--access-line); color: var(--access-text); }.access-text-btn { border-radius: 13px; font-weight: 750; min-height: 54px; }.access-primary:focus-visible,.access-secondary:focus-visible,.access-form input:focus-visible { outline: 3px solid color-mix(in srgb,var(--access-accent) 36%,transparent); outline-offset: 2px; }
.access-quick-login { align-items: center; display: flex; gap: 10px; justify-content: center; }
.access-quick-login > span { align-items: center; border: 2px solid currentColor; border-radius: 50%; display: flex; font-size: 18px; height: 28px; justify-content: center; width: 28px; }
.access-returning-screen .access-brand { margin-top: 12px; }
.access-returning-profile { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; text-align: center; }
.access-returning-profile .access-welcome-avatar { margin: 0 0 20px; }
.access-returning-profile h1 { color: var(--access-text); font-size: clamp(26px,7vw,34px); letter-spacing: -.035em; margin: 0; }
.access-returning-profile p { color: var(--access-muted); font-size: 15px; line-height: 1.5; margin: 10px 0 0; }
.access-returning-actions { display: grid; gap: 18px; padding-bottom: max(18px,env(safe-area-inset-bottom)); }

.access-form-screen { gap: 24px; padding-top: max(20px,env(safe-area-inset-top)); }.access-brand { align-items: center; display: flex; gap: 10px; margin: 36px 0 12px; }.access-brand img { border-radius: 12px; height: 46px; object-fit: contain; width: 46px; }.access-brand strong { color: var(--access-text); font-size: 20px; }.access-form-screen > .access-primary:first-of-type { margin-top: auto; }
.access-header { align-items: center; display: grid; grid-template-columns: 44px 1fr 44px; min-height: 44px; }.access-header button { background: transparent; border: 0; color: transparent; font-size: 0; height: 44px; padding: 0; position: relative; width: 44px; }
.access-header button::before { border-bottom: 2px solid var(--access-text); border-left: 2px solid var(--access-text); content: ""; height: 9px; left: 4px; position: absolute; top: 16px; transform: rotate(45deg); width: 9px; }
.access-social-stack { display: grid; gap: 10px; }.access-social-stack button { background: var(--access-surface); border: 1px solid var(--access-line); border-radius: 13px; color: var(--access-muted); display: grid; font-weight: 700; grid-template-columns: 32px 1fr 32px; min-height: 50px; padding: 0 14px; }.access-social-stack button b { color: var(--access-text); }.access-divider { border-top: 1px solid var(--access-line); height: 1px; margin: 4px 0; text-align: center; }.access-divider span { background: var(--access-bg); color: var(--access-muted); font-size: 12px; padding: 0 12px; position: relative; top: -9px; }.access-legal { color: var(--access-muted); font-size: 10px; line-height: 1.45; margin: 0; text-align: center; }
.access-form { display: grid; gap: 16px; }.access-form label { display: grid; gap: 7px; }.access-form label > span { color: var(--access-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.access-form input { background: var(--access-field); border: 1px solid var(--access-line); border-radius: 12px; box-sizing: border-box; color: var(--access-text); font: inherit; font-size: 15px; height: 52px; outline: none; padding: 0 14px; width: 100%; }.access-form input:focus { border-color: var(--access-accent); }.access-form label.invalid input,.access-form label.invalid .access-phone-field { border-color: var(--access-danger); }.access-form em { color: var(--access-danger); font-size: 11px; font-style: normal; min-height: 0; }.access-phone-field { align-items: center; background: var(--access-field); border: 1px solid var(--access-line); border-radius: 12px; display: grid; grid-template-columns: auto 1fr; }.access-phone-field b { border-right: 1px solid var(--access-line); font-size: 14px; padding: 0 12px; }.access-phone-field input { background: transparent; border: 0; }.access-inline-link { background: transparent; color: var(--access-muted); font-size: 13px; padding: 8px; }.access-inline-link b { color: var(--access-accent); }
.access-otp-status { background: var(--access-surface); border: 1px solid var(--access-line); border-radius: 16px; display: grid; gap: 8px; justify-items: center; padding: 28px 18px; text-align: center; }.access-otp-status i { align-items: center; background: color-mix(in srgb,var(--access-accent) 18%,transparent); border-radius: 50%; color: var(--access-accent); display: flex; font-size: 22px; font-style: normal; height: 52px; justify-content: center; width: 52px; }.access-otp-status span { color: var(--access-muted); font-size: 12px; line-height: 1.5; }
.access-avatar { margin: 8px auto 0; position: relative; }.access-avatar > span,.access-welcome-avatar { align-items: center; background: color-mix(in srgb,var(--access-accent) 18%,var(--access-surface)); border: 1px solid color-mix(in srgb,var(--access-accent) 40%,var(--access-line)); border-radius: 50%; color: var(--access-accent); display: flex; font-size: 34px; font-weight: 850; height: 92px; justify-content: center; width: 92px; }.access-avatar button { background: var(--access-accent); border: 3px solid var(--access-bg); border-radius: 50%; bottom: 0; color: #07150d; height: 32px; position: absolute; right: 0; width: 32px; }.access-welcome-avatar { height: 110px; margin: auto auto 8px; width: 110px; }
.access-location-art { align-items: center; background: radial-gradient(circle,rgba(8,201,111,.22) 0 22%,rgba(8,201,111,.1) 23% 45%,transparent 46%); display: flex; height: min(40vh,330px); justify-content: center; position: relative; }.access-location-art span { background: var(--access-surface); border: 1px solid var(--access-line); border-radius: 50%; height: 86px; width: 86px; }.access-location-art i { color: var(--access-accent); font-size: 30px; font-style: normal; position: absolute; }.access-status { color: var(--access-muted); font-size: 12px; margin: -12px 0 0; min-height: 18px; text-align: center; }
.access-location-screen .access-copy h1 { font-size: clamp(27px, 7.2vw, 34px); max-width: 100%; text-wrap: balance; }

@media (max-height: 820px) {
  .access-visual { margin-bottom: 22px; min-height: 260px; }.access-copy h1 { font-size: 30px; }.access-form-screen { gap: 18px; }.access-form { gap: 12px; }.access-brand { margin-top: 16px; }
}