:root {
  color-scheme: dark;
  --bg: #061226;
  --panel: rgba(9, 30, 54, 0.78);
  --panel-strong: rgba(11, 36, 66, 0.92);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4f9ff;
  --muted: #b7c8d8;
  --blue: #2f80ff;
  --cyan: #38d6ff;
  --green: #35d66b;
  --amber: #f7bd45;
  --violet: #a16dff;
  --red: #ff5a5f;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100vh;
}

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 74% 8%, rgba(27, 98, 220, 0.22), transparent 36%),
    radial-gradient(circle at 8% 86%, rgba(38, 214, 255, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(3, 9, 20, 0.9), rgba(3, 13, 28, 0.96)),
    #020814;
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "PingFang SC",
    "HarmonyOS Sans SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  font: inherit;
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -14%, rgba(35, 112, 255, 0.28), transparent 42%),
    linear-gradient(180deg, #06142a 0%, #041025 48%, #020a18 100%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.startup-state {
  display: grid;
  gap: 10px;
  margin: max(24px, env(safe-area-inset-top)) 16px 16px;
  padding: 20px;
  border: 1px solid rgba(56, 214, 255, 0.34);
  border-radius: var(--radius);
  background: rgba(9, 30, 54, 0.92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.startup-state strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.startup-state span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.mini-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 48px 1fr 72px;
  align-items: center;
  min-height: 56px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 14, 31, 0.82);
  color: #f4f9ff;
  backdrop-filter: blur(16px);
}

.mini-bar strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
}

.bar-icon {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #f4f9ff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.mini-menu {
  justify-self: end;
  min-width: 62px;
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  color: #f4f9ff;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
}

.app-view {
  min-height: calc(100vh - 56px);
}

.screen {
  position: relative;
  min-height: calc(100vh - 56px);
  padding: 48px 18px 22px;
  overflow: hidden;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 74% 0%, rgba(47, 128, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(4, 17, 36, 0.62) 0%, rgba(4, 17, 36, 0.9) 46%, rgba(4, 17, 36, 0.98) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen > * {
  position: relative;
  z-index: 1;
}

.home-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 14px;
  --screen-image: url("./assets/stadium-night.jpg");
}

.home-actions {
  display: grid;
  gap: 10px;
  align-self: end;
  padding-top: 0;
}

.home-actions .glass-button {
  min-height: 72px;
  border-color: rgba(119, 184, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(41, 119, 255, 0.58), rgba(9, 34, 67, 0.88)),
    rgba(10, 37, 69, 0.82);
}

.home-actions .glass-button + .glass-button {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(48, 103, 177, 0.3), rgba(7, 24, 46, 0.86)),
    rgba(9, 30, 54, 0.76);
}

.home-visual {
  position: absolute;
  inset: 220px 0 228px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.home-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 18, 34, 0), rgba(5, 18, 34, 0.18) 46%, rgba(5, 18, 34, 0.86)),
    radial-gradient(circle at 50% 52%, rgba(54, 140, 255, 0.18), transparent 44%);
}

.home-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(1.04) brightness(0.78) contrast(1.08);
}

.mode-screen,
.menu-screen {
  display: grid;
  align-content: center;
  gap: 18px;
  --screen-image: url("./assets/stadium-night.jpg");
}

.map-screen,
.summary-screen,
.transport-screen {
  display: grid;
  align-content: start;
  gap: 12px;
}

.summary-screen {
  padding-top: 76px;
}

.route-screen {
  gap: 11px;
  padding-top: 54px;
  padding-inline: 16px;
}

.route-screen .progress-row {
  display: none;
}

.brand-mark {
  margin-top: 18px;
}

.eyebrow {
  margin: 0 0 8px;
  color: #5aa2ff;
  font-size: 20px;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 9em;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 800;
}

.subtitle {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.38;
}

.screen-title {
  display: grid;
  gap: 6px;
}

.screen-title h2 {
  font-size: 23px;
  line-height: 1.18;
  font-weight: 760;
}

.screen-title p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.progress-row {
  display: none;
  gap: 6px;
  align-items: center;
  opacity: 0.72;
}

.progress-dot {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}

.progress-dot.active {
  background: var(--blue);
}

.broadcast-layer {
  position: absolute;
  right: 18px;
  top: 68px;
  z-index: 8;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.broadcast-layer.is-open {
  left: 18px;
  right: 18px;
}

.broadcast-ticker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(5, 18, 34, 0.44);
  color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0.86;
  pointer-events: all;
}

.broadcast-layer.is-open .broadcast-ticker {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  justify-items: stretch;
  width: 100%;
  padding: 3px 6px;
}

.broadcast-ticker.warning {
  border-color: rgba(247, 189, 69, 0.26);
  background:
    linear-gradient(90deg, rgba(247, 189, 69, 0.08), rgba(5, 18, 34, 0.44) 36%),
    rgba(5, 18, 34, 0.44);
}

.broadcast-ticker.info {
  border-color: rgba(56, 214, 255, 0.3);
}

.speaker-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(247, 189, 69, 0.18);
  color: #f7bd45;
  font-size: 9px;
  font-weight: 800;
}

.speaker-icon .app-icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

.ticker-viewport {
  display: none;
  overflow: hidden;
  white-space: nowrap;
}

.broadcast-layer.is-open .ticker-viewport {
  display: block;
}

.ticker-text {
  display: inline-block;
  min-width: 100%;
  color: #f8fbff;
  font-size: 9px;
  font-weight: 560;
  animation: ticker-scroll 18s linear infinite;
}

.broadcast-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(122, 203, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(7, 23, 43, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  pointer-events: all;
}

.broadcast-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.broadcast-panel-head div {
  display: grid;
  gap: 3px;
}

.broadcast-panel-head span {
  color: #8bdcff;
  font-size: 12px;
  font-weight: 800;
}

.broadcast-panel-head strong {
  font-size: 17px;
}

.broadcast-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}

.broadcast-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
}

.broadcast-item {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-left: 3px solid var(--cyan);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}

.broadcast-item.warning {
  border-left-color: var(--amber);
}

.broadcast-item.safe {
  border-left-color: var(--green);
}

.broadcast-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.broadcast-item strong {
  font-size: 14px;
}

.broadcast-item span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.broadcast-item p {
  color: #dcecff;
  font-size: 12px;
  line-height: 1.5;
}

.control-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  align-items: start;
  padding: 66px 20px 20px;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, 0.2), rgba(2, 8, 18, 0.7));
  overflow: auto;
  pointer-events: none;
}

.control-panel {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 92px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(122, 203, 255, 0.3);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(11, 36, 66, 0.97), rgba(5, 18, 34, 0.98));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  pointer-events: all;
}

.control-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.control-panel-head div {
  display: grid;
  gap: 3px;
}

.control-panel-head span {
  color: #8bdcff;
  font-size: 12px;
  font-weight: 800;
}

.control-panel-head strong {
  font-size: 18px;
}

.control-presets {
  display: grid;
  gap: 9px;
}

.control-section-title {
  color: #8bdcff;
  font-size: 12px;
  font-weight: 900;
}

.control-stats {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(122, 203, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
}

.control-stats-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.control-stats-head span {
  color: #8bdcff;
  font-size: 12px;
  font-weight: 900;
}

.control-stats-head strong {
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
}

.control-stat-groups {
  display: grid;
  gap: 10px;
}

.control-stat-group {
  display: grid;
  gap: 7px;
}

.control-stat-row {
  display: grid;
  grid-template-columns: 58px 1fr 24px;
  gap: 8px;
  align-items: center;
}

.control-stat-row span {
  overflow: hidden;
  color: #dcecff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-stat-row i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
}

.control-stat-row b {
  position: absolute;
  inset-block: 0;
  left: 0;
  min-width: 0;
  border-radius: inherit;
  box-shadow: 0 0 12px currentColor;
}

.control-stat-row strong {
  color: #ffffff;
  font-size: 12px;
  text-align: right;
}

.control-recent {
  display: grid;
  gap: 5px;
}

.control-recent p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.control-preset {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.control-preset.warning {
  border-color: rgba(247, 189, 69, 0.42);
  background: linear-gradient(135deg, rgba(247, 189, 69, 0.14), rgba(255, 255, 255, 0.05));
}

.control-preset.info {
  border-color: rgba(56, 214, 255, 0.36);
  background: linear-gradient(135deg, rgba(56, 214, 255, 0.12), rgba(255, 255, 255, 0.05));
}

.control-preset.safe {
  border-color: rgba(53, 214, 107, 0.34);
  background: linear-gradient(135deg, rgba(53, 214, 107, 0.11), rgba(255, 255, 255, 0.05));
}

.control-preset.refresh {
  border-color: rgba(139, 220, 255, 0.38);
  background: linear-gradient(135deg, rgba(47, 128, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.control-preset span {
  font-size: 15px;
  font-weight: 900;
}

.control-preset small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.control-status {
  padding: 9px 10px;
  border: 1px solid rgba(53, 214, 107, 0.28);
  border-radius: 7px;
  background: rgba(53, 214, 107, 0.08);
  color: #9ff2bb;
  font-size: 13px;
  font-weight: 800;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-55%);
  }
}

.choice-stack {
  display: grid;
  gap: 12px;
}

.guide-import {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(92, 166, 255, 0.24);
  border-radius: var(--radius);
  background: rgba(8, 25, 46, 0.68);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.guide-import.compact {
  min-height: 54px;
}

.control-panel .guide-import {
  min-height: 58px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.guide-import.is-ready {
  border-color: rgba(53, 214, 107, 0.42);
  background: linear-gradient(135deg, rgba(53, 214, 107, 0.12), rgba(8, 25, 46, 0.78));
}

.guide-import input {
  display: none;
}

.guide-import-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(47, 128, 255, 0.18);
  color: #7bc4ff;
  font-weight: 900;
}

.guide-import.is-ready .guide-import-icon {
  background: rgba(53, 214, 107, 0.16);
  color: #63e78f;
}

.guide-import-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.guide-import-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.guide-import-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-button,
.option-button,
.primary-action,
.secondary-action,
.text-action {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.glass-button,
.option-button {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  min-height: 70px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(28, 86, 164, 0.34), rgba(7, 24, 46, 0.82)),
    rgba(10, 37, 69, 0.78);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

.glass-button::before,
.option-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 82%), transparent 46%),
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--option-color, #2f80ff), transparent 72%), transparent 32%);
  opacity: 0.9;
}

.option-button::after {
  display: none;
}

.zone-option::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 0;
  display: block;
  width: 128px;
  border-radius: 7px;
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent, #000 28%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
}

.zone-option.option-vip::after {
  background:
    linear-gradient(135deg, rgba(247, 189, 69, 0.2), rgba(0, 0, 0, 0.08)),
    url("./assets/stadium-night.jpg") center / cover;
}

.zone-option.option-inner::after {
  background:
    linear-gradient(135deg, rgba(53, 214, 107, 0.2), rgba(0, 0, 0, 0.08)),
    url("./assets/stadium-night.jpg") center / cover;
}

.zone-option.option-east::after {
  background:
    linear-gradient(135deg, rgba(56, 214, 255, 0.2), rgba(0, 0, 0, 0.08)),
    url("./assets/stadium-night.jpg") center / cover;
}

.zone-option.option-west::after {
  background:
    linear-gradient(135deg, rgba(161, 109, 255, 0.24), rgba(0, 0, 0, 0.08)),
    url("./assets/stadium-night.jpg") center / cover;
}

.glass-button > *,
.option-button > * {
  position: relative;
  z-index: 1;
}

.glass-button:active,
.option-button:active,
.primary-action:active,
.secondary-action:active {
  transform: translateY(1px);
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(113, 178, 255, 0.64);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.2), transparent 28%),
    rgba(29, 103, 225, 0.14);
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
}

.app-icon {
  width: 1.18em;
  height: 1.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-text {
  line-height: 1;
}

.button-text {
  display: grid;
  gap: 5px;
}

.button-text strong {
  font-size: 18px;
  font-weight: 760;
}

.button-text span,
.option-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.button-arrow {
  color: rgba(255, 255, 255, 0.66);
  font-size: 22px;
}

.step-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 25, 46, 0.78);
}

.step-card h3 {
  font-size: 18px;
}

.step-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.56;
}

.zone-route-map {
  position: relative;
  min-height: 338px;
  overflow: hidden;
  border: 1px solid rgba(92, 166, 255, 0.24);
  border-radius: var(--radius);
  background: #06101f;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.zone-route-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: saturate(1.05) brightness(0.66) contrast(1.1);
}

.zone-route-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--route-color);
}

.zone-route-core {
  fill: color-mix(in srgb, var(--route-color), transparent 78%);
  stroke: rgba(210, 235, 255, 0.7);
  stroke-width: 2;
}

.zone-route-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px currentColor);
}

.zone-route-pin circle {
  fill: rgba(21, 58, 120, 0.92);
  stroke: #d8ecff;
  stroke-width: 2;
  filter: drop-shadow(0 0 10px currentColor);
}

.zone-route-pin text {
  fill: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}

.route-callout {
  position: absolute;
  z-index: 2;
  padding: 7px 9px;
  border: 1px solid rgba(144, 204, 255, 0.34);
  border-radius: 7px;
  background: rgba(7, 24, 45, 0.82);
  color: #f5fbff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.route-callout-start {
  left: 54px;
  bottom: 68px;
}

.route-callout-end {
  right: 42px;
  top: 126px;
}

.zone-route-preview {
  background:
    linear-gradient(180deg, rgba(11, 36, 66, 0.86), rgba(7, 24, 45, 0.9));
}

.map-block {
  display: grid;
  gap: 10px;
}

.map-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 330px;
  overflow: hidden;
  overflow: clip;
  border: 1px solid rgba(92, 166, 255, 0.22);
  border-radius: var(--radius);
  background: #06101f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

.map-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 46%, transparent 34%, rgba(2, 8, 18, 0.22) 72%),
    linear-gradient(180deg, rgba(2, 8, 18, 0.03), rgba(2, 8, 18, 0.28));
}

.directory-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(9, 30, 54, 0.82), rgba(5, 18, 34, 0.92));
}

.directory-card .map-shell {
  min-height: 154px;
}

.zone-option {
  min-height: 62px;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-color), transparent 80%), rgba(7, 24, 46, 0.86)),
    rgba(10, 37, 69, 0.78);
}

.zone-option .icon-badge {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.zone-option .button-text strong {
  font-size: 17px;
}

.zone-option .button-text span {
  font-size: 12px;
}

.directory-card .map-info-card,
.directory-card .map-label {
  display: none;
}

.map-shell img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-shell svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.uploaded-map-shell img,
.summary-custom-image,
.service-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploaded-map-shell svg {
  display: none;
}

.service-card-image {
  position: relative;
  z-index: 1;
  height: 54px;
  max-width: 86px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
}

.summary-custom-image {
  min-height: 160px;
  border-radius: 8px;
}

.guide-map-shell img {
  object-fit: contain;
}

.guide-map-shell {
  min-height: auto;
  aspect-ratio: var(--guide-ratio, 16 / 9);
}

.route-screen .map-block {
  margin-inline: -16px;
  gap: 0;
}

.entry-gate-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(92, 166, 255, 0.2);
  border-radius: 12px;
  background: rgba(5, 24, 46, 0.76);
}

.entry-gate-option {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.entry-gate-option.is-active {
  border-color: rgba(92, 183, 255, 0.68);
  background: linear-gradient(180deg, rgba(62, 156, 255, 0.92), rgba(37, 103, 225, 0.92));
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 103, 219, 0.24);
}

.route-screen .guide-map-shell {
  aspect-ratio: var(--guide-ratio, 16 / 9);
  min-height: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  border-color: rgba(92, 166, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.route-screen .map-info-card {
  display: none;
}

.map-info-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(122, 203, 255, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(13, 48, 88, 0.72), rgba(7, 24, 45, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.map-info-card strong {
  font-size: 15px;
}

.map-info-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.map-label {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  display: grid;
  gap: 4px;
  max-width: 72%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(17, 64, 116, 0.82), rgba(6, 17, 31, 0.86));
}

.route-preview {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(92, 166, 255, 0.11);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10, 34, 62, 0.72), rgba(6, 20, 38, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.route-screen .route-preview {
  border-color: rgba(92, 166, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(8, 28, 54, 0.62), rgba(5, 18, 34, 0.78));
}

.route-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #edf7ff;
}

.route-preview-head strong {
  font-size: 14px;
  font-weight: 760;
}

.route-preview-head span {
  color: var(--muted);
  font-size: 11px;
}

.route-preview ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-preview li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: center;
  color: #d8e8f6;
  font-size: 12px;
}

.route-preview li i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(47, 128, 255, 0.18);
  color: #64b7ff;
  font-style: normal;
  font-weight: 900;
}

.route-screen .route-preview ol {
  gap: 5px;
}

.route-screen .route-preview li {
  grid-template-columns: 20px 1fr;
  gap: 8px;
  color: rgba(225, 239, 250, 0.9);
  font-size: 11px;
}

.route-screen .route-preview li i {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.route-screen .legend-strip {
  display: none;
}

.map-label strong {
  font-size: 15px;
}

.map-label span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.node {
  fill: rgba(7, 18, 32, 0.92);
  stroke: currentColor;
  stroke-width: 3;
}

.node-text {
  fill: #fff;
  font-size: 16px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 4px;
}

.landmark-node {
  fill: rgba(8, 25, 46, 0.94);
}

.landmark-label {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 3px;
}

.venue-core {
  fill: rgba(39, 128, 255, 0.22);
  stroke: rgba(124, 199, 255, 0.92);
  stroke-width: 3;
}

.route {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px currentColor);
}

.guide-node circle {
  fill: rgba(7, 18, 32, 0.82);
  stroke: currentColor;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px currentColor);
}

.guide-node-icon {
  fill: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.75);
  stroke-width: 3px;
}

.guide-node-label,
.guide-label {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 760;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.82);
  stroke-width: 3px;
}

.guide-route,
.guide-boundary {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-route {
  stroke-width: 3.6;
  filter: drop-shadow(0 0 4px currentColor);
}

.guide-route.is-primary {
  stroke-width: 4.2;
}

.guide-route-glow {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.08;
}

.guide-endpoint circle {
  fill: rgba(4, 14, 28, 0.92);
  stroke: currentColor;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px currentColor);
}

.guide-endpoint.is-end circle {
  fill: currentColor;
}

.guide-endpoint text {
  fill: #ffffff;
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.62);
  stroke-width: 2px;
}

.guide-endpoint-label {
  fill: #eef8ff;
  font-size: 11px;
  font-weight: 760;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.82);
  stroke-width: 3px;
}

.guide-boundary {
  stroke-width: 3;
  opacity: 0.32;
  stroke-dasharray: 16 12;
}

.guide-area polygon {
  fill: currentColor;
  opacity: 0.07;
  stroke: currentColor;
  stroke-width: 3;
}

.route.dim {
  opacity: 0.28;
  stroke-width: 4;
  filter: none;
}

.route.dashed {
  stroke-dasharray: 12 10;
}

.zone-shape {
  fill: currentColor;
  opacity: 0.24;
  stroke: currentColor;
  stroke-width: 3;
}

.control-shape {
  fill: none;
  stroke: var(--red);
  stroke-width: 4;
  stroke-dasharray: 9 8;
}

.legend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 12px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.summary-actions {
  margin-top: 2px;
}

.route-screen .action-row {
  gap: 8px;
}

.primary-action,
.secondary-action,
.text-action {
  min-height: 44px;
  padding: 10px 12px;
}

.route-screen .primary-action,
.route-screen .secondary-action {
  min-height: 48px;
}

.primary-action {
  background:
    linear-gradient(180deg, rgba(76, 154, 255, 0.98), rgba(35, 96, 229, 0.98));
  border-color: rgba(117, 215, 255, 0.56);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(35, 96, 229, 0.24);
}

.secondary-action,
.text-action {
  background: rgba(255, 255, 255, 0.055);
}

.text-action {
  width: fit-content;
  min-height: 36px;
  color: var(--muted);
}

.summary-reset {
  justify-self: center;
  min-height: 32px;
  padding-inline: 18px;
  border-color: transparent;
  background: transparent;
}

.share-status {
  min-height: 36px;
  padding: 9px 11px;
  border: 1px solid rgba(53, 214, 107, 0.28);
  border-radius: var(--radius);
  background: rgba(53, 214, 107, 0.08);
  color: #9ff2bb;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.summary-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 11px;
  align-self: start;
  padding: 15px;
  border: 1px solid rgba(122, 203, 255, 0.13);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(13, 44, 80, 0.64), rgba(7, 23, 43, 0.82)),
    #081a30;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(47, 128, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%);
}

.summary-card > * {
  position: relative;
  z-index: 1;
}

.completion-title {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  text-align: center;
}

.completion-title h2 {
  font-size: 28px;
}

.completion-title p {
  color: var(--muted);
  font-size: 15px;
}

.summary-head {
  display: grid;
  gap: 6px;
}

.summary-head span {
  color: #8bdcff;
  font-size: 13px;
  font-weight: 800;
}

.summary-head h2 {
  font-size: 22px;
}

.summary-snapshot {
  display: grid;
  gap: 9px;
}

.summary-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.summary-snapshot-head strong {
  color: #edf7ff;
  font-size: 14px;
}

.summary-snapshot-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-snapshot-map {
  position: relative;
}

.summary-snapshot .map-block {
  gap: 0;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 168px;
  aspect-ratio: 16 / 9;
  border-color: color-mix(in srgb, var(--route-color), transparent 68%);
}

.summary-snapshot .guide-map-shell img {
  object-fit: cover;
  opacity: 0.68;
}

.summary-snapshot .map-info-card {
  display: none;
}

.summary-zone-chip {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: color-mix(in srgb, var(--zone-color), transparent 24%);
  color: #ffffff;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 0 18px color-mix(in srgb, var(--zone-color), transparent 54%);
}

.summary-grid {
  display: grid;
  gap: 9px;
}

.summary-timeline {
  position: relative;
  display: grid;
  gap: 14px;
}

.summary-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 19px;
  bottom: 19px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(56, 214, 255, 0.48), rgba(47, 128, 255, 0.2));
}

.summary-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.summary-step i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(47, 128, 255, 0.88), rgba(24, 65, 150, 0.92));
  color: #ffffff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(47, 128, 255, 0.16);
}

.summary-step div {
  display: grid;
  gap: 4px;
  padding-top: 2px;
}

.summary-step strong {
  font-size: 15px;
}

.summary-step span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.data-box {
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Visual refinement pass: move the H5 from wireframe toward a polished venue-guide app. */
body {
  background:
    linear-gradient(180deg, #020814 0%, #041022 48%, #020712 100%),
    #020814;
}

.phone-shell {
  background:
    linear-gradient(180deg, rgba(5, 18, 39, 0.98) 0%, rgba(2, 9, 22, 0.99) 100%),
    #020814;
}

.mini-bar {
  min-height: 54px;
  border-bottom-color: rgba(130, 185, 255, 0.08);
  background: rgba(3, 12, 27, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.mini-bar strong {
  font-size: 15px;
  font-weight: 760;
}

.mini-menu {
  min-width: 58px;
  border-color: rgba(185, 216, 255, 0.2);
  background: rgba(255, 255, 255, 0.045);
}

.screen {
  padding: 54px 24px 24px;
}

.screen::before {
  background:
    linear-gradient(180deg, rgba(5, 18, 39, 0.34) 0%, rgba(5, 18, 39, 0.86) 46%, rgba(2, 9, 22, 0.98) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.home-screen {
  padding: 66px 26px 34px;
  gap: 18px;
}

.home-screen::before {
  background:
    linear-gradient(180deg, rgba(5, 18, 39, 0.44) 0%, rgba(5, 18, 39, 0.22) 34%, rgba(2, 9, 22, 0.98) 84%),
    url("./assets/stadium-night.jpg") center bottom / cover no-repeat;
}

.brand-mark {
  margin-top: 2px;
}

.eyebrow {
  margin-bottom: 10px;
  color: #5aa2ff;
  font-size: 17px;
  font-weight: 760;
}

h1 {
  max-width: 8em;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 820;
}

.subtitle {
  margin-top: 12px;
  color: rgba(233, 242, 255, 0.86);
  font-size: 15px;
}

.home-visual {
  inset: 236px 0 204px;
}

.home-visual img {
  opacity: 0.58;
  filter: saturate(1.08) brightness(0.68) contrast(1.18);
}

.home-actions {
  gap: 11px;
}

.home-actions .glass-button {
  min-height: 76px;
}

.screen-title {
  gap: 8px;
  margin-bottom: 6px;
}

.screen-title h2 {
  font-size: 26px;
  line-height: 1.14;
  font-weight: 820;
}

.screen-title p {
  max-width: 25em;
  color: rgba(210, 225, 242, 0.82);
  font-size: 13px;
}

.transport-screen {
  gap: 16px;
}

.choice-stack {
  gap: 12px;
}

.glass-button,
.option-button {
  min-height: 78px;
  padding: 14px 16px;
  border-color: rgba(135, 188, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(26, 76, 140, 0.38), rgba(6, 19, 38, 0.82)),
    rgba(9, 28, 52, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 26px rgba(0, 0, 0, 0.18);
}

.glass-button::before,
.option-button::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 86%), transparent 48%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 36%);
}

.icon-badge {
  width: 50px;
  height: 50px;
  border-color: color-mix(in srgb, var(--option-color, #71b2ff), transparent 36%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 68%), rgba(10, 28, 55, 0.74));
}

.button-text {
  gap: 6px;
}

.button-text strong {
  font-size: 20px;
  font-weight: 820;
}

.button-text span,
.option-meta {
  color: rgba(212, 226, 242, 0.78);
  font-size: 12px;
}

.button-arrow {
  color: rgba(230, 242, 255, 0.72);
  font-size: 24px;
}

.route-screen,
.zone-route-screen {
  padding-top: 52px;
  padding-inline: 16px;
  gap: 14px;
}

.route-screen .screen-title,
.zone-route-screen .screen-title {
  padding-inline: 8px;
}

.route-screen .map-block {
  margin-inline: -16px;
}

.route-screen .guide-map-shell {
  min-height: 278px;
  aspect-ratio: auto;
  border-top: 1px solid rgba(112, 178, 255, 0.12);
  border-bottom: 1px solid rgba(112, 178, 255, 0.12);
  background: #020814;
}

.map-shell::after {
  background:
    linear-gradient(180deg, rgba(2, 8, 18, 0.02), rgba(2, 8, 18, 0.26));
}

.route-preview {
  gap: 11px;
  padding: 14px 16px;
  border-color: rgba(125, 188, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(11, 39, 72, 0.72), rgba(5, 18, 34, 0.78));
}

.route-preview-head strong {
  font-size: 15px;
}

.route-preview-head span {
  color: rgba(215, 229, 244, 0.8);
  font-size: 12px;
}

.route-screen .route-preview li {
  color: rgba(234, 244, 255, 0.9);
  font-size: 12px;
}

.route-screen .route-preview li i {
  color: #cfe8ff;
  background: linear-gradient(180deg, rgba(47, 128, 255, 0.78), rgba(20, 70, 155, 0.82));
}

.primary-action,
.secondary-action {
  min-height: 50px;
  font-weight: 820;
}

.primary-action {
  background:
    linear-gradient(180deg, rgba(70, 148, 255, 1), rgba(31, 92, 225, 1));
  box-shadow: 0 12px 26px rgba(37, 101, 230, 0.28);
}

.secondary-action,
.text-action {
  border-color: rgba(190, 217, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}

.directory-card {
  gap: 10px;
  padding: 12px;
  border-color: rgba(125, 188, 255, 0.16);
  background: rgba(7, 22, 42, 0.72);
}

.directory-card .map-shell {
  min-height: 174px;
}

.zone-option {
  min-height: 68px;
}

.zone-route-map {
  min-height: 376px;
  border-color: rgba(125, 188, 255, 0.16);
}

.summary-screen {
  padding-top: 72px;
  gap: 16px;
}

.completion-title h2 {
  font-size: 30px;
  font-weight: 820;
}

.completion-title p {
  color: rgba(210, 225, 242, 0.82);
  font-size: 14px;
}

.summary-card {
  gap: 13px;
  padding: 16px;
  border-color: rgba(125, 188, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 42, 76, 0.74), rgba(6, 20, 38, 0.88));
}

.summary-head span {
  color: #72caff;
}

.summary-head h2 {
  font-size: 24px;
  font-weight: 820;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 178px;
}

.summary-step strong {
  font-size: 16px;
}

.summary-step span {
  color: rgba(210, 225, 242, 0.76);
}

/* Map annotation polish: primary route first, support elements quiet. */
.guide-map-shell svg {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.guide-route {
  stroke-width: 4.2;
  filter:
    drop-shadow(0 0 5px currentColor)
    drop-shadow(0 0 12px color-mix(in srgb, currentColor, transparent 58%));
}

.guide-route.is-primary {
  stroke-width: 5.8;
}

.guide-route-glow {
  stroke-width: 17;
  opacity: 0.18;
  filter: blur(0.4px);
}

.guide-boundary {
  opacity: 0.22;
  stroke-width: 2.4;
}

.guide-area polygon {
  opacity: 0.055;
  stroke-width: 2;
}

.guide-node circle {
  fill: rgba(4, 15, 31, 0.9);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

.guide-node-icon {
  font-size: 12px;
  stroke-width: 2.4px;
}

.guide-node-label,
.guide-label,
.guide-endpoint-label {
  font-size: 10.5px;
  font-weight: 820;
  stroke: rgba(0, 0, 0, 0.9);
  stroke-width: 3.4px;
}

.guide-endpoint circle {
  fill: rgba(5, 18, 34, 0.96);
  stroke-width: 2.2;
  filter:
    drop-shadow(0 0 5px currentColor)
    drop-shadow(0 0 12px color-mix(in srgb, currentColor, transparent 54%));
}

.guide-endpoint.is-end circle {
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.9);
}

.guide-endpoint text {
  font-size: 8px;
  stroke-width: 1.8px;
}

.zone-route-path {
  stroke-width: 6.4;
  filter:
    drop-shadow(0 0 6px currentColor)
    drop-shadow(0 0 16px color-mix(in srgb, currentColor, transparent 52%));
}

.zone-route-core {
  fill: color-mix(in srgb, var(--route-color), transparent 80%);
  stroke: rgba(225, 244, 255, 0.62);
}

.route-callout {
  border-color: rgba(154, 214, 255, 0.32);
  background: rgba(5, 18, 34, 0.86);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}

/* Secondary pages should feel designed, not like leftover configuration screens. */
.menu-screen {
  align-content: end;
  padding-bottom: 96px;
}

.menu-screen .screen-title h2 {
  font-size: 28px;
}

.map-screen:not(.route-screen):not(.zone-route-screen) > .map-block .guide-map-shell {
  min-height: 252px;
  border-color: rgba(125, 188, 255, 0.2);
}

.map-screen:not(.route-screen):not(.zone-route-screen) > .map-block .map-info-card {
  grid-template-columns: 1fr;
  padding: 13px 14px;
  border-color: rgba(125, 188, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(13, 48, 88, 0.7), rgba(5, 18, 34, 0.72));
}

.map-screen:not(.route-screen):not(.zone-route-screen) > .legend-strip {
  gap: 8px;
}

.map-screen:not(.route-screen):not(.zone-route-screen) .legend-pill {
  padding: 7px 10px;
  border-color: rgba(180, 214, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.broadcast-layer.is-open {
  top: 116px;
}

.phone-shell:has(.route-screen) .broadcast-layer.is-open,
.phone-shell:has(.zone-route-screen) .broadcast-layer.is-open {
  top: 176px;
}

.broadcast-layer.is-open .broadcast-ticker {
  background: rgba(5, 18, 34, 0.82);
  backdrop-filter: blur(12px);
}

.broadcast-panel {
  border-color: rgba(125, 188, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(12, 39, 70, 0.94), rgba(5, 18, 34, 0.96));
  backdrop-filter: blur(18px);
}

.broadcast-item {
  border-left-width: 4px;
  background: rgba(255, 255, 255, 0.055);
}

.transport-option {
  min-height: 88px;
}

.option-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.option-route-meta b,
.option-route-meta i {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--option-color, #2f80ff), transparent 62%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--option-color, #2f80ff), transparent 88%);
  color: rgba(236, 247, 255, 0.9);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}

.option-route-meta i {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 225, 242, 0.78);
}

.transport-option.is-recommended {
  border-color: color-mix(in srgb, var(--option-color, #2f80ff), transparent 44%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 70%), rgba(6, 19, 38, 0.82)),
    rgba(9, 28, 52, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 32px color-mix(in srgb, var(--option-color, #2f80ff), transparent 88%);
}

.recommend-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--option-color, #2f80ff), transparent 48%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--option-color, #2f80ff), transparent 78%);
  color: #dff7ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  vertical-align: middle;
}

/* Pass 24: product polish toward the reference screens. */
.route-screen,
.zone-route-screen {
  padding-top: 42px;
  gap: 11px;
}

.route-screen .screen-title,
.zone-route-screen .screen-title {
  gap: 5px;
  margin-bottom: 0;
  padding-inline: 4px;
}

.route-screen .screen-title h2,
.zone-route-screen .screen-title h2 {
  max-width: 10em;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 820;
}

.route-screen .screen-title p,
.zone-route-screen .screen-title p {
  max-width: 24em;
  font-size: 12px;
  line-height: 1.45;
}

.route-screen .map-block {
  margin-inline: 0;
  gap: 8px;
}

.route-screen .guide-map-shell {
  min-height: 236px;
  border: 1px solid rgba(112, 178, 255, 0.18);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  gap: 9px;
  padding: 12px 13px;
  border-color: rgba(125, 188, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 34, 62, 0.64), rgba(5, 18, 34, 0.82));
}

.route-screen .route-preview-head strong,
.zone-route-screen .route-preview-head strong {
  font-size: 14px;
}

.route-screen .route-preview-head span,
.zone-route-screen .route-preview-head span {
  font-size: 11px;
}

.route-screen .route-preview ol,
.zone-route-screen .route-preview ol {
  gap: 6px;
}

.route-screen .route-preview li,
.zone-route-screen .route-preview li {
  grid-template-columns: 20px 1fr;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
}

.route-screen .route-preview li i,
.zone-route-screen .route-preview li i {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.route-screen .primary-action,
.route-screen .secondary-action,
.zone-route-screen .primary-action,
.zone-route-screen .secondary-action {
  min-height: 44px;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 800;
}

.guide-route {
  stroke-width: 3;
  filter:
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 10px color-mix(in srgb, currentColor, transparent 68%));
}

.guide-route.is-primary {
  stroke-width: 3.6;
}

.guide-route-glow {
  stroke-width: 11;
  opacity: 0.12;
}

.route-screen .guide-route {
  stroke-width: 3.2;
}

.route-screen .guide-route.is-primary {
  stroke-width: 3.8;
}

.guide-endpoint circle {
  stroke-width: 1.6;
}

.guide-endpoint-label {
  font-size: 10px;
  stroke-width: 2.6px;
}

/* Pass 25: make choice pages quieter and closer to the reference density. */
.transport-screen {
  gap: 14px;
}

.transport-screen .screen-title {
  gap: 7px;
  margin-bottom: 2px;
}

.transport-screen .screen-title h2,
.map-screen:not(.route-screen):not(.zone-route-screen) .screen-title h2 {
  font-size: 25px;
  line-height: 1.14;
}

.transport-screen .screen-title p,
.map-screen:not(.route-screen):not(.zone-route-screen) .screen-title p {
  max-width: 24em;
  font-size: 12px;
  line-height: 1.45;
}

.transport-screen .choice-stack,
.map-screen:not(.route-screen):not(.zone-route-screen) .choice-stack {
  gap: 10px;
}

.transport-option {
  min-height: 78px;
  padding: 12px 14px;
}

.transport-option .icon-badge,
.zone-option .icon-badge {
  width: 44px;
  height: 44px;
}

.transport-option .button-text,
.zone-option .button-text {
  gap: 4px;
}

.transport-option .button-text strong,
.zone-option .button-text strong {
  font-size: 18px;
  line-height: 1.12;
  font-weight: 800;
}

.transport-option .button-text span,
.zone-option .button-text span {
  font-size: 11px;
  line-height: 1.35;
}

.transport-option .button-arrow,
.zone-option .button-arrow {
  font-size: 20px;
  opacity: 0.78;
}

.transport-option.is-recommended {
  border-color: color-mix(in srgb, var(--option-color, #2f80ff), transparent 50%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 76%), rgba(6, 19, 38, 0.84)),
    rgba(9, 28, 52, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px color-mix(in srgb, var(--option-color, #2f80ff), transparent 91%);
}

.recommend-tag {
  min-height: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 760;
}

.option-route-meta {
  gap: 5px;
  margin-top: 1px;
}

.option-route-meta b,
.option-route-meta i {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 720;
}

.zone-option {
  min-height: 62px;
  padding: 10px 12px;
}

.zone-option::after {
  width: 118px;
  opacity: 0.26;
}

.home-actions {
  gap: 10px;
}

.home-actions .glass-button {
  min-height: 70px;
  padding: 12px 14px;
}

.menu-screen .glass-button {
  min-height: 68px;
}

.menu-screen .button-text strong,
.home-actions .button-text strong {
  font-size: 18px;
}

.menu-screen .button-text span,
.home-actions .button-text span {
  font-size: 11px;
}

/* Pass 26: make the final route card more screenshot-ready. */
.summary-screen {
  padding-top: 58px;
  gap: 12px;
}

.completion-title {
  gap: 4px;
  padding-top: 0;
}

.completion-title h2 {
  font-size: 27px;
  line-height: 1.14;
  font-weight: 820;
}

.completion-title p {
  font-size: 13px;
}

.summary-card {
  gap: 11px;
  padding: 14px;
  border-color: rgba(125, 188, 255, 0.17);
  background:
    linear-gradient(180deg, rgba(13, 43, 78, 0.74), rgba(6, 20, 38, 0.9));
}

.summary-head {
  gap: 5px;
}

.summary-head span {
  font-size: 12px;
}

.summary-head h2 {
  font-size: 22px;
  line-height: 1.16;
}

.summary-snapshot {
  gap: 8px;
}

.summary-snapshot-head strong {
  font-size: 13px;
}

.summary-snapshot-head span {
  font-size: 11px;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 160px;
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.summary-metrics div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(125, 188, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.summary-metrics span {
  overflow: hidden;
  color: rgba(185, 207, 229, 0.76);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-metrics strong {
  overflow: hidden;
  color: #eff8ff;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.summary-timeline {
  gap: 11px;
}

.summary-step {
  grid-template-columns: 30px 1fr;
  gap: 10px;
}

.summary-step i {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.summary-timeline::before {
  left: 14px;
  top: 17px;
  bottom: 17px;
}

.summary-step strong {
  font-size: 14px;
}

.summary-step span {
  font-size: 11px;
}

.summary-actions .primary-action,
.summary-actions .secondary-action {
  min-height: 46px;
  font-size: 14px;
}

/* Pass 28: bring the entry pages closer to the polished mobile guide reference. */
.mini-bar {
  border-bottom-color: rgba(100, 150, 210, 0.1);
  background:
    linear-gradient(180deg, rgba(3, 13, 29, 0.92), rgba(3, 13, 29, 0.74));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.mini-bar strong {
  font-size: 15px;
  font-weight: 760;
}

.bar-icon {
  width: 36px;
  height: 36px;
  font-size: 22px;
}

.mini-menu {
  min-width: 58px;
  min-height: 36px;
  border-color: rgba(180, 210, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-screen {
  grid-template-rows: auto 1fr auto;
  padding: 62px 22px 28px;
}

.home-screen::before {
  background:
    linear-gradient(180deg, rgba(3, 13, 29, 0.3) 0%, rgba(3, 13, 29, 0.18) 30%, rgba(2, 8, 19, 0.96) 86%),
    url("./assets/stadium-night.jpg") center 42% / 215% auto no-repeat;
}

.brand-mark {
  margin-top: 0;
}

.eyebrow {
  margin-bottom: 8px;
  color: #6bbaff;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 760;
}

h1 {
  max-width: 7em;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 840;
}

.subtitle {
  margin-top: 9px;
  color: rgba(221, 234, 248, 0.86);
  font-size: 15px;
}

.home-visual {
  inset: 214px 22px 246px;
  border: 1px solid rgba(125, 188, 255, 0.12);
  border-radius: 8px;
  background: #061226;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 46px rgba(0, 0, 0, 0.28);
}

.home-visual::before {
  background:
    linear-gradient(180deg, rgba(4, 15, 32, 0.04), rgba(4, 15, 32, 0.3) 52%, rgba(4, 15, 32, 0.84)),
    linear-gradient(90deg, rgba(34, 112, 255, 0.12), transparent 35%, rgba(56, 214, 255, 0.1));
}

.home-visual img {
  object-position: center 45%;
  opacity: 0.9;
  transform: scale(1.58);
  filter: saturate(1.1) brightness(0.74) contrast(1.16);
}

.home-actions {
  gap: 10px;
}

.glass-button,
.option-button {
  border-color: rgba(130, 184, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(15, 51, 94, 0.82), rgba(6, 18, 36, 0.9)),
    rgba(8, 26, 50, 0.8);
}

.glass-button::before,
.option-button::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 84%), transparent 45%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 38%);
  opacity: 0.78;
}

.home-actions .glass-button {
  min-height: 72px;
  padding: 12px 14px;
  border-color: rgba(92, 160, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(44, 118, 255, 0.9), rgba(16, 72, 174, 0.9)),
    rgba(10, 38, 75, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 34px rgba(22, 84, 210, 0.26);
}

.home-actions .glass-button + .glass-button {
  border-color: rgba(165, 202, 255, 0.13);
  background:
    linear-gradient(135deg, rgba(24, 59, 104, 0.72), rgba(7, 22, 43, 0.92)),
    rgba(7, 24, 46, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.2);
}

.icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--option-color, #7dbdff), transparent 40%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 58%), rgba(9, 31, 64, 0.82));
}

.home-actions .icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(11, 49, 118, 0.48);
}

.button-text {
  gap: 5px;
}

.button-text strong {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 820;
}

.button-text span {
  color: rgba(205, 222, 240, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.home-actions .button-text strong {
  font-size: 19px;
}

.home-actions .button-text span {
  font-size: 12px;
}

.button-arrow {
  color: rgba(226, 241, 255, 0.78);
  font-size: 20px;
}

.menu-screen {
  align-content: center;
  gap: 14px;
  padding: 74px 22px 54px;
}

.menu-screen::before {
  background:
    linear-gradient(180deg, rgba(3, 13, 29, 0.52) 0%, rgba(3, 13, 29, 0.36) 42%, rgba(2, 8, 19, 0.98) 88%),
    url("./assets/stadium-night.jpg") center top / auto 100% no-repeat;
}

.menu-screen .screen-title h2 {
  max-width: 7.5em;
  font-size: 31px;
  line-height: 1.12;
}

.menu-screen .screen-title p {
  color: rgba(213, 228, 243, 0.76);
  font-size: 13px;
}

.menu-screen .glass-button {
  min-height: 74px;
}

.transport-screen {
  padding: 52px 20px 24px;
  gap: 14px;
}

.transport-screen .screen-title h2 {
  max-width: 9em;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 840;
}

.transport-screen .screen-title p {
  font-size: 13px;
}

.transport-option {
  min-height: 76px;
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--option-color, #2f80ff), transparent 74%);
}

.transport-option .icon-badge {
  width: 46px;
  height: 46px;
}

.transport-option .button-text strong {
  font-size: 19px;
}

.transport-option.is-recommended {
  border-color: color-mix(in srgb, var(--option-color, #2f80ff), transparent 48%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 70%), rgba(7, 23, 45, 0.88)),
    rgba(9, 32, 62, 0.88);
}

.recommend-tag {
  border-radius: 4px;
  color: #dffbff;
  background: color-mix(in srgb, var(--option-color, #38d6ff), transparent 62%);
}

/* Pass 29: make route detail pages feel like focused mobile wayfinding screens. */
.route-screen,
.zone-route-screen {
  padding: 48px 16px 22px;
  gap: 10px;
}

.route-screen .screen-title,
.zone-route-screen .screen-title {
  gap: 4px;
  padding-inline: 4px;
}

.route-screen .screen-title h2,
.zone-route-screen .screen-title h2 {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 840;
}

.route-screen .screen-title p,
.zone-route-screen .screen-title p {
  max-width: 26em;
  color: rgba(207, 226, 244, 0.78);
  font-size: 12px;
}

.route-screen .map-block {
  gap: 0;
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.zone-route-map {
  min-height: 336px;
  border-color: rgba(125, 188, 255, 0.18);
  border-radius: 8px;
  background: #030b18;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 42px rgba(0, 0, 0, 0.26);
}

.route-screen .map-shell::after,
.route-screen .guide-map-shell::after,
.zone-route-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 7, 17, 0.02), rgba(1, 7, 17, 0.12) 48%, rgba(1, 7, 17, 0.36)),
    radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--route-color, #38d6ff), transparent 84%), transparent 34%);
}

.route-screen .guide-route {
  stroke-width: 3.6;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 13px color-mix(in srgb, currentColor, transparent 62%));
}

.route-screen .guide-route.is-primary {
  stroke-width: 4.2;
}

.route-screen .guide-route-glow {
  stroke-width: 13;
  opacity: 0.14;
}

.zone-route-path {
  stroke-width: 5;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 15px color-mix(in srgb, currentColor, transparent 58%));
}

.zone-route-core {
  fill: color-mix(in srgb, var(--route-color), transparent 72%);
  stroke: rgba(222, 240, 255, 0.72);
  stroke-width: 1.8;
}

.route-callout {
  border-color: rgba(165, 214, 255, 0.24);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(10, 40, 82, 0.92), rgba(5, 20, 45, 0.92));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  position: relative;
  z-index: 2;
  margin-top: -12px;
  gap: 10px;
  padding: 13px 14px 14px;
  border-color: rgba(125, 188, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(12, 43, 80, 0.9), rgba(5, 19, 38, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.route-screen .route-preview-head,
.zone-route-screen .route-preview-head {
  align-items: start;
}

.route-screen .route-preview-head strong,
.zone-route-screen .route-preview-head strong {
  color: #f4f9ff;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 820;
}

.route-screen .route-preview-head span,
.zone-route-screen .route-preview-head span {
  color: rgba(207, 226, 244, 0.74);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.route-screen .route-preview ol,
.zone-route-screen .route-preview ol {
  gap: 7px;
}

.route-screen .route-preview li,
.zone-route-screen .route-preview li {
  grid-template-columns: 21px 1fr;
  gap: 8px;
  color: rgba(235, 246, 255, 0.9);
  font-size: 11px;
}

.route-screen .route-preview li i,
.zone-route-screen .route-preview li i {
  width: 19px;
  height: 19px;
  background:
    linear-gradient(180deg, rgba(58, 155, 255, 0.92), rgba(29, 92, 202, 0.9));
  color: #eef8ff;
  font-size: 10px;
  box-shadow: 0 0 12px rgba(47, 128, 255, 0.22);
}

.route-screen .action-row,
.zone-route-screen .action-row {
  gap: 9px;
  margin-top: 0;
}

.route-screen .primary-action,
.route-screen .secondary-action,
.zone-route-screen .primary-action,
.zone-route-screen .secondary-action {
  min-height: 46px;
  border-radius: 7px;
}

/* Pass 30: polish zone selection, final route card, and live broadcast layer. */
.map-screen:has(.directory-card) {
  padding: 50px 20px 22px;
  gap: 12px;
}

.map-screen:has(.directory-card) .screen-title {
  gap: 5px;
}

.map-screen:has(.directory-card) .screen-title h2 {
  max-width: 9em;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 840;
}

.map-screen:has(.directory-card) .screen-title p {
  color: rgba(207, 226, 244, 0.78);
  font-size: 12px;
}

.directory-card {
  gap: 9px;
  padding: 12px;
  border-color: rgba(125, 188, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(11, 37, 69, 0.74), rgba(5, 18, 34, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

.directory-card .map-shell {
  min-height: 150px;
  border-color: rgba(125, 188, 255, 0.13);
  box-shadow: none;
}

.map-screen:has(.directory-card) .choice-stack {
  gap: 10px;
}

.zone-option {
  min-height: 64px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--option-color), transparent 72%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--option-color), transparent 82%), rgba(7, 24, 46, 0.9)),
    rgba(7, 25, 49, 0.82);
}

.zone-option::after {
  top: 7px;
  right: 7px;
  bottom: 7px;
  width: 112px;
  opacity: 0.22;
}

.zone-option .icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.zone-option .button-text strong {
  font-size: 18px;
  font-weight: 820;
}

.zone-option .button-text span {
  color: rgba(207, 226, 244, 0.72);
  font-size: 11px;
}

.summary-screen {
  padding: 52px 24px 22px;
  gap: 10px;
}

.completion-title {
  gap: 3px;
  padding-top: 4px;
}

.completion-title h2 {
  font-size: 26px;
  line-height: 1.12;
  font-weight: 840;
}

.completion-title p {
  color: rgba(207, 226, 244, 0.76);
  font-size: 12px;
}

.summary-card {
  gap: 10px;
  padding: 14px;
  border-color: rgba(125, 188, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(12, 42, 76, 0.82), rgba(5, 18, 35, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.summary-card::before {
  background:
    linear-gradient(135deg, rgba(47, 128, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%);
}

.summary-head {
  gap: 4px;
}

.summary-head span {
  color: #72caff;
  font-size: 11px;
  font-weight: 820;
}

.summary-head h2 {
  font-size: 23px;
  line-height: 1.14;
  font-weight: 840;
}

.summary-snapshot {
  gap: 7px;
}

.summary-snapshot-head strong {
  font-size: 12px;
}

.summary-snapshot-head span {
  max-width: 11em;
  color: rgba(202, 220, 238, 0.72);
  font-size: 10px;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 148px;
  border-color: color-mix(in srgb, var(--route-color), transparent 70%);
}

.summary-zone-chip {
  right: 12px;
  bottom: 10px;
  width: 32px;
  height: 32px;
}

.summary-metrics {
  gap: 6px;
}

.summary-metrics div {
  gap: 3px;
  padding: 8px;
  border-color: rgba(125, 188, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.summary-metrics span {
  font-size: 9px;
}

.summary-metrics strong {
  font-size: 12px;
}

.summary-timeline {
  gap: 10px;
}

.summary-step {
  grid-template-columns: 28px 1fr;
  gap: 9px;
}

.summary-step i {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.summary-timeline::before {
  left: 13px;
  top: 16px;
  bottom: 16px;
}

.summary-step strong {
  font-size: 13px;
}

.summary-step span {
  color: rgba(207, 226, 244, 0.74);
  font-size: 10.5px;
}

.summary-actions {
  gap: 10px;
}

.summary-actions .primary-action,
.summary-actions .secondary-action {
  min-height: 46px;
  border-radius: 7px;
}

.summary-reset {
  min-height: 34px;
  color: rgba(207, 226, 244, 0.74);
}

.broadcast-layer {
  right: 20px;
  top: 70px;
}

.broadcast-ticker {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-color: rgba(247, 189, 69, 0.24);
  background: rgba(5, 18, 34, 0.58);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

.broadcast-layer.is-open {
  top: 118px;
  left: 18px;
  right: 18px;
}

.phone-shell:has(.route-screen) .broadcast-layer.is-open,
.phone-shell:has(.zone-route-screen) .broadcast-layer.is-open {
  top: 150px;
}

.broadcast-layer.is-open .broadcast-ticker {
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(247, 189, 69, 0.1), rgba(5, 18, 34, 0.86) 38%),
    rgba(5, 18, 34, 0.86);
}

.speaker-icon {
  width: 18px;
  height: 18px;
}

.ticker-text {
  font-size: 10px;
}

.broadcast-panel {
  gap: 11px;
  padding: 13px;
  border-color: rgba(125, 188, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(12, 39, 70, 0.96), rgba(4, 16, 32, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 54px rgba(0, 0, 0, 0.42);
}

.broadcast-panel-head span {
  color: #72caff;
  font-size: 11px;
}

.broadcast-panel-head strong {
  font-size: 16px;
}

.broadcast-close {
  width: 32px;
  height: 32px;
}

.broadcast-list {
  gap: 8px;
  max-height: 286px;
}

.broadcast-item {
  gap: 6px;
  padding: 10px 11px;
  border-left-width: 0;
  border-top: 3px solid var(--cyan);
  background: rgba(255, 255, 255, 0.05);
}

.broadcast-item.warning {
  border-top-color: var(--amber);
}

.broadcast-item.safe {
  border-top-color: var(--green);
}

.broadcast-item strong {
  font-size: 13px;
}

.broadcast-item span {
  font-size: 10px;
}

.broadcast-item p {
  color: rgba(220, 236, 255, 0.82);
  font-size: 11px;
}

@media (min-width: 720px) {
  body {
    padding: 28px;
  }

  .phone-shell {
    min-height: 920px;
    border-radius: 22px;
  }

  .app-view,
  .screen {
    min-height: 864px;
  }
}

/* pass32: simplify the final route credential and reduce small-card noise. */
.summary-screen {
  padding: 50px 22px 22px;
  gap: 12px;
}

.completion-title {
  gap: 2px;
  padding-top: 8px;
  text-align: center;
}

.completion-title h2 {
  font-size: 25px;
  line-height: 1.08;
  font-weight: 850;
}

.completion-title p {
  color: rgba(210, 228, 246, 0.72);
  font-size: 11px;
}

.summary-card {
  gap: 12px;
  padding: 16px;
  border-color: rgba(123, 196, 255, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(11, 39, 72, 0.78), rgba(5, 18, 35, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.22);
}

.summary-card::before {
  background:
    linear-gradient(135deg, rgba(56, 214, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 24%);
}

.summary-head {
  gap: 3px;
}

.summary-head span {
  color: #6fd4ff;
  font-size: 10px;
  line-height: 1;
}

.summary-head h2 {
  font-size: 24px;
  line-height: 1.08;
  font-weight: 850;
}

.summary-snapshot {
  gap: 0;
}

.summary-snapshot-head {
  display: none;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 168px;
  border-color: color-mix(in srgb, var(--route-color), transparent 64%);
  border-radius: 8px;
}

.summary-zone-chip {
  right: 12px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.summary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid rgba(123, 196, 255, 0.12);
  border-bottom: 1px solid rgba(123, 196, 255, 0.12);
}

.summary-metrics div {
  gap: 2px;
  padding: 2px 10px;
  border: 0;
  border-right: 1px solid rgba(123, 196, 255, 0.1);
  border-radius: 0;
  background: transparent;
}

.summary-metrics div:last-child {
  border-right: 0;
}

.summary-metrics span {
  color: rgba(191, 211, 231, 0.64);
  font-size: 9px;
}

.summary-metrics strong {
  font-size: 13px;
  line-height: 1.1;
}

.summary-timeline {
  gap: 9px;
  padding: 2px 0 0;
}

.summary-timeline::before {
  left: 11px;
  top: 14px;
  bottom: 14px;
  background: rgba(83, 149, 255, 0.22);
}

.summary-step {
  grid-template-columns: 24px 1fr;
  gap: 10px;
}

.summary-step i {
  width: 24px;
  height: 24px;
  font-size: 10px;
  box-shadow: 0 0 14px rgba(47, 128, 255, 0.28);
}

.summary-step strong {
  font-size: 13px;
  line-height: 1.15;
}

.summary-step span {
  color: rgba(208, 225, 242, 0.7);
  font-size: 10.5px;
  line-height: 1.35;
}

.summary-actions {
  gap: 9px;
}

.summary-actions .primary-action,
.summary-actions .secondary-action {
  min-height: 44px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 760;
}

.summary-reset {
  justify-self: center;
  min-height: 32px;
  padding-inline: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(206, 224, 242, 0.68);
  font-size: 12px;
}

.transport-option,
.zone-card,
.glass-button {
  border-radius: 9px;
}

.button-text strong,
.option-title strong {
  font-weight: 820;
}

/* pass33: make route guidance feel more like an immersive mobile navigation page. */
.route-screen {
  padding: 46px 16px 22px;
  gap: 8px;
}

.route-screen .screen-title {
  gap: 2px;
  padding-inline: 2px;
}

.route-screen .screen-title h2 {
  font-size: 26px;
  line-height: 1.06;
}

.route-screen .screen-title p {
  max-width: 24em;
  font-size: 11px;
  line-height: 1.35;
}

.route-screen .map-block {
  margin-top: 6px;
}

.route-screen .map-shell,
.route-screen .guide-map-shell {
  min-height: 378px;
  border-radius: 10px;
  border-color: rgba(125, 188, 255, 0.16);
  background: #020814;
}

.route-screen .guide-map-shell::after {
  background:
    linear-gradient(180deg, rgba(1, 7, 17, 0.04), rgba(1, 7, 17, 0.08) 42%, rgba(1, 7, 17, 0.48)),
    radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--route-color, #38d6ff), transparent 82%), transparent 38%);
}

.route-screen .guide-route {
  stroke-width: 3.2;
}

.route-screen .guide-route.is-primary {
  stroke-width: 4;
}

.route-screen .guide-route-glow {
  stroke-width: 14;
  opacity: 0.14;
}

.route-screen .guide-endpoint circle {
  r: 8;
}

.route-screen .route-preview {
  margin-top: -58px;
  margin-inline: 10px;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 10px;
  border-color: rgba(125, 188, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(13, 44, 82, 0.92), rgba(5, 18, 36, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.route-screen .route-preview-head strong {
  font-size: 14px;
}

.route-screen .route-preview-head span {
  font-size: 10.5px;
}

.route-screen .route-preview ol {
  gap: 6px;
}

.route-screen .route-preview li {
  grid-template-columns: 20px 1fr;
  gap: 8px;
  font-size: 11px;
}

.route-screen .route-preview li i {
  width: 19px;
  height: 19px;
  font-size: 10px;
}

.route-screen .action-row {
  gap: 10px;
  margin-top: 2px;
}

.route-screen .primary-action,
.route-screen .secondary-action {
  min-height: 45px;
  border-radius: 8px;
  font-size: 14px;
}

/* pass34: make the zone picker feel like visual ticket-area selection. */
.zone-list-screen {
  padding: 48px 20px 22px;
  gap: 11px;
}

.zone-list-screen .screen-title {
  gap: 4px;
}

.zone-list-screen .screen-title h2 {
  font-size: 27px;
  line-height: 1.08;
}

.zone-list-screen .screen-title p {
  max-width: 24em;
  font-size: 11.5px;
}

.zone-list-screen .directory-card {
  grid-template-columns: minmax(0, 1fr) 136px;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 10px;
  border-radius: 10px;
  border-color: rgba(125, 188, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(16, 56, 103, 0.78), rgba(5, 18, 35, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 32px rgba(0, 0, 0, 0.2);
}

.zone-list-screen .directory-card .map-block {
  min-width: 0;
}

.zone-list-screen .directory-card .map-shell {
  min-height: 76px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border-color: rgba(125, 188, 255, 0.12);
}

.zone-list-screen .choice-stack {
  gap: 10px;
}

.zone-list-screen .zone-option {
  min-height: 78px;
  padding: 12px 13px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--option-color), transparent 66%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--option-color), transparent 76%), rgba(7, 23, 45, 0.86) 58%, rgba(7, 22, 42, 0.6)),
    rgba(8, 29, 55, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

.zone-list-screen .zone-option::after {
  top: 6px;
  right: 6px;
  bottom: 6px;
  width: 154px;
  border-radius: 9px;
  opacity: 0.36;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 100%);
}

.zone-list-screen .zone-option .icon-badge {
  width: 45px;
  height: 45px;
  border-radius: 12px;
}

.zone-list-screen .zone-option .button-text {
  gap: 5px;
}

.zone-list-screen .zone-option .button-text strong {
  font-size: 19px;
  line-height: 1.08;
  font-weight: 850;
}

.zone-list-screen .zone-option .button-text span {
  color: rgba(220, 236, 255, 0.78);
  font-size: 11px;
}

.zone-list-screen .zone-option .button-arrow {
  color: rgba(236, 248, 255, 0.84);
  font-size: 21px;
}

.zone-list-screen > .text-action {
  justify-self: start;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(207, 226, 244, 0.78);
  font-size: 12px;
}

/* pass35: turn overview into a concise landmark dashboard, not a route map. */
.overview-screen {
  padding: 48px 20px 22px;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}

.overview-screen .screen-title {
  gap: 4px;
}

.overview-screen .screen-title h2 {
  font-size: 28px;
  line-height: 1.08;
}

.overview-screen .screen-title p {
  max-width: 23em;
  color: rgba(207, 226, 244, 0.76);
  font-size: 11.5px;
}

.overview-screen > .map-block {
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.overview-screen > .map-block .map-shell,
.overview-screen > .map-block .guide-map-shell {
  min-height: 342px;
  border-radius: 11px;
  border-color: rgba(125, 188, 255, 0.18);
  background: #020814;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 44px rgba(0, 0, 0, 0.24);
}

.overview-screen > .map-block .map-shell img,
.overview-screen > .map-block .guide-map-shell img {
  object-fit: cover;
}

.overview-screen > .map-block .map-shell::after,
.overview-screen > .map-block .guide-map-shell::after {
  background:
    radial-gradient(circle at 50% 44%, rgba(56, 214, 255, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(1, 7, 17, 0.02), rgba(1, 7, 17, 0.34));
}

.overview-screen > .map-block .map-info-card {
  display: none;
}

.overview-screen .guide-node circle,
.overview-screen .node {
  stroke-width: 2;
  filter:
    drop-shadow(0 0 4px currentColor)
    drop-shadow(0 0 11px color-mix(in srgb, currentColor, transparent 60%));
}

.overview-screen .guide-node-label,
.overview-screen .guide-label,
.overview-screen .landmark-label {
  font-size: 10.5px;
  font-weight: 820;
  stroke-width: 3.2px;
}

.overview-pois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.overview-pois > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--poi-color), transparent 72%);
  border-radius: 9px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--poi-color), transparent 86%), rgba(7, 23, 45, 0.84)),
    rgba(9, 30, 55, 0.78);
  color: #f4f9ff;
}

.overview-pois .app-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--poi-color);
  stroke-width: 2.4;
}

.overview-pois .icon-text {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--poi-color);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.overview-pois > span > b {
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-screen .action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.overview-screen .primary-action,
.overview-screen .secondary-action {
  min-width: 0;
  min-height: 44px;
  border-radius: 8px;
  font-size: 13px;
}

/* pass36: simplify the main mobile flow toward the reference guide aesthetic. */
.phone-shell {
  background:
    radial-gradient(circle at 52% -8%, rgba(43, 119, 255, 0.24), transparent 38%),
    linear-gradient(180deg, #051326 0%, #031023 52%, #020814 100%);
}

.mini-bar {
  min-height: 54px;
  background: rgba(2, 12, 27, 0.74);
}

.mini-bar strong {
  font-size: 15px;
  font-weight: 720;
}

.screen {
  padding-inline: 20px;
}

.screen::before {
  background:
    linear-gradient(180deg, rgba(4, 15, 31, 0.56) 0%, rgba(4, 16, 34, 0.9) 48%, rgba(2, 8, 20, 0.98) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen-title {
  gap: 5px;
}

.screen-title h2 {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 820;
}

.screen-title p,
.subtitle {
  color: rgba(214, 229, 244, 0.76);
}

.eyebrow {
  margin-bottom: 7px;
  color: #67b6ff;
  font-size: 15px;
  font-weight: 760;
}

h1 {
  max-width: 8em;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 840;
}

.home-screen {
  padding-top: 42px;
  gap: 16px;
}

.brand-mark {
  margin-top: 10px;
}

.home-visual {
  inset: 196px 0 222px;
}

.home-actions {
  gap: 12px;
  padding-bottom: 36px;
}

.glass-button,
.option-button {
  min-height: 76px;
  padding: 14px;
  border-radius: 8px;
  border-color: rgba(132, 188, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(12, 38, 72, 0.88), rgba(5, 17, 34, 0.92)),
    rgba(6, 22, 42, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.glass-button::before,
.option-button::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 86%), transparent 44%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 42%);
  opacity: 0.72;
}

.home-actions .glass-button {
  min-height: 82px;
  padding: 15px 16px;
  border-color: rgba(113, 178, 255, 0.26);
  background:
    linear-gradient(135deg, rgba(43, 119, 255, 0.94), rgba(20, 78, 186, 0.94)),
    rgba(10, 40, 79, 0.94);
}

.home-actions .glass-button + .glass-button {
  background:
    linear-gradient(135deg, rgba(13, 42, 78, 0.86), rgba(5, 17, 34, 0.94)),
    rgba(6, 22, 42, 0.88);
}

.icon-badge {
  width: 48px;
  height: 48px;
  border-color: rgba(116, 180, 255, 0.24);
  background: rgba(47, 128, 255, 0.11);
}

.button-text {
  gap: 5px;
}

.button-text strong,
.option-title strong {
  align-items: center;
  font-size: 20px;
  line-height: 1.08;
  font-weight: 820;
}

.button-text span {
  color: rgba(214, 229, 244, 0.7);
  font-size: 13px;
}

.button-arrow {
  color: rgba(228, 240, 255, 0.72);
  font-size: 26px;
}

.transport-screen {
  padding-top: 50px;
  gap: 14px;
}

.transport-list {
  gap: 12px;
}

.transport-list .option-button {
  min-height: 84px;
}

.transport-list .icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.option-route-meta {
  display: flex;
  gap: 8px;
  margin-top: 7px;
  color: rgba(216, 232, 248, 0.78);
}

.option-route-meta b,
.option-route-meta i {
  font-size: 12px;
  font-style: normal;
  font-weight: 720;
}

.recommend-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(47, 128, 255, 0.2);
  color: #94cfff;
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.route-screen {
  padding: 44px 14px 18px;
  gap: 8px;
}

.route-screen .screen-title {
  padding-inline: 6px;
}

.route-screen .screen-title h2 {
  font-size: 24px;
}

.route-screen .screen-title p {
  font-size: 12px;
}

.route-screen .map-shell,
.route-screen .guide-map-shell {
  min-height: 438px;
  border-radius: 8px;
  border-color: rgba(126, 190, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.route-screen .map-block {
  margin-inline: -2px;
}

.route-screen .route-preview {
  margin-top: -86px;
  margin-inline: 8px;
  padding: 13px 14px;
  border-radius: 8px;
  border-color: rgba(126, 190, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(11, 38, 71, 0.9), rgba(5, 18, 34, 0.96));
  backdrop-filter: blur(10px);
}

.route-preview-head strong {
  font-size: 15px;
  font-weight: 800;
}

.route-preview-head span {
  font-size: 12px;
}

.route-screen .route-preview ol {
  gap: 7px;
}

.route-screen .route-preview li {
  grid-template-columns: 22px 1fr;
  color: rgba(231, 241, 251, 0.86);
  font-size: 12px;
}

.route-screen .route-preview li i {
  width: 20px;
  height: 20px;
  background: rgba(47, 128, 255, 0.16);
  color: #7ec5ff;
  font-size: 11px;
}

.route-screen .legend-strip {
  display: none;
}

.route-screen .action-row {
  margin-inline: 8px;
  gap: 10px;
}

.primary-action,
.secondary-action,
.text-action {
  border-radius: 8px;
}

.primary-action {
  min-height: 48px;
  background:
    linear-gradient(180deg, rgba(70, 145, 255, 1), rgba(32, 93, 226, 1));
}

.secondary-action,
.text-action {
  background: rgba(255, 255, 255, 0.05);
}

.overview-screen > .map-block .map-shell,
.overview-screen > .map-block .guide-map-shell,
.overview-pois > span,
.summary-card {
  border-radius: 8px;
}

/* pass37: restructure the framework before the next visual refinement round. */
.mode-screen {
  align-content: center;
  padding: 78px 22px 58px;
  --screen-image: url("./assets/stadium-night.jpg");
}

.mode-screen .choice-stack {
  gap: 12px;
}

.mode-screen .glass-button {
  min-height: 74px;
}

.service-button .icon-badge,
.service-card .icon-badge {
  color: #8bdcff;
}

.services-screen {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 58px;
  --screen-image: url("./assets/stadium-night.jpg");
}

.service-list {
  gap: 12px;
}

.service-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(132, 188, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(12, 38, 72, 0.84), rgba(5, 17, 34, 0.92)),
    rgba(6, 22, 42, 0.88);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.service-card div {
  display: grid;
  gap: 5px;
}

.service-card strong {
  color: #f4f9ff;
  font-size: 18px;
  line-height: 1.08;
}

.service-card span:not(.icon-badge):not(.icon-text) {
  color: rgba(214, 229, 244, 0.7);
  font-size: 12px;
  line-height: 1.35;
}

.service-detail-screen {
  display: grid;
  align-content: start;
  gap: 14px;
  padding-top: 58px;
  --screen-image: url("./assets/stadium-night.jpg");
}

.service-detail-image {
  overflow: hidden;
  min-height: 210px;
  border: 1px solid rgba(125, 188, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 14, 29, 0.86);
}

.service-detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.service-detail-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(132, 188, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(12, 38, 72, 0.86), rgba(5, 17, 34, 0.94)),
    rgba(6, 22, 42, 0.9);
}

.service-detail-card div {
  display: grid;
  gap: 7px;
}

.service-detail-card strong {
  font-size: 20px;
  line-height: 1.15;
}

.service-detail-card p {
  margin: 0;
  color: rgba(214, 229, 244, 0.75);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.framework-overview {
  padding-top: 48px;
  gap: 11px;
}

.framework-overview .screen-title h2 {
  font-size: 26px;
}

.overview-image-card {
  overflow: hidden;
  border: 1px solid rgba(125, 188, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 14, 29, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 42px rgba(0, 0, 0, 0.22);
}

.overview-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #020814;
  cursor: pointer;
}

.overview-image-button img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #020814;
}

.image-upload-button {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(125, 188, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #d8ebff;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.image-upload-button input {
  display: none;
}

.overview-transport-list {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}

.overview-transport-list > strong {
  color: #f4f9ff;
  font-size: 16px;
  line-height: 1.2;
}

.overview-next-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(93, 166, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(30, 103, 214, 0.16), rgba(4, 14, 29, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.overview-next-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.overview-next-card strong {
  color: #f4f9ff;
  font-size: 16px;
  line-height: 1.2;
}

.overview-next-card span {
  color: rgba(214, 229, 244, 0.7);
  font-size: 12px;
  line-height: 1.45;
}

.overview-next-card .primary-action {
  min-width: 122px;
}

.transport-list.compact {
  gap: 8px;
}

.transport-list.compact .option-button {
  min-height: 54px;
  padding: 9px 11px;
}

.transport-list.compact .icon-badge {
  width: 34px;
  height: 34px;
}

.transport-list.compact .button-text strong {
  font-size: 15px;
}

.transport-list.compact .button-text span {
  font-size: 10px;
}

.transport-list.compact .option-route-meta {
  display: none;
}

.framework-overview .action-row {
  margin-top: 2px;
}

.phone-shell img {
  cursor: zoom-in;
}

.venue-svg-preview {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  background: #020814;
  color: #f4f9ff;
  touch-action: none;
}

.venue-svg-preview__stage,
.venue-svg-preview__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.venue-svg-preview__stage {
  overflow: hidden;
  touch-action: none;
}

.venue-svg-preview__canvas {
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.venue-svg-preview__content {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  background: #020814;
  transform: translate(-50%, -50%);
}

.venue-svg-preview__content object {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020814;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.venue-svg-preview.is-ready .venue-svg-preview__content object {
  opacity: 1;
}

.venue-svg-preview__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: #020814;
  color: rgba(220, 237, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.venue-svg-preview__loading i {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(114, 188, 246, 0.2);
  border-top-color: #38d6ff;
  border-radius: 50%;
  animation: venue-svg-preview-spin 0.8s linear infinite;
}

.venue-svg-preview.is-ready .venue-svg-preview__loading {
  visibility: hidden;
  opacity: 0;
}

.venue-svg-preview.is-error .venue-svg-preview__loading i {
  display: none;
}

@keyframes venue-svg-preview-spin {
  to { transform: rotate(360deg); }
}

.venue-svg-preview__toolbar {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.venue-svg-preview__title {
  min-width: 0;
  overflow: hidden;
  color: rgba(244, 249, 255, 0.88);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-svg-preview__close {
  flex: none;
  min-width: 42px;
  height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(140, 184, 230, 0.28);
  border-radius: 999px;
  background: rgba(17, 29, 49, 0.92);
  color: #f4f9ff;
  font: 800 25px/1 system-ui, sans-serif;
  pointer-events: auto;
}

@media (max-width: 520px) {
  .venue-svg-preview__toolbar {
    align-items: flex-start;
  }

  .venue-svg-preview__title {
    max-width: 24vw;
    padding-top: 14px;
  }

  .venue-svg-preview__close {
    min-width: 38px;
    height: 38px;
    padding: 0 9px;
  }
}

.venue-photo-preview {
  --pswp-bg: #020814;
  --pswp-icon-color: #f4f9ff;
  --pswp-icon-color-secondary: #071425;
}

.venue-photo-preview .pswp__button--close {
  width: 54px;
  height: 54px;
  margin-top: max(8px, env(safe-area-inset-top));
  margin-right: 8px;
  border: 1px solid rgba(140, 184, 230, 0.26);
  border-radius: 50%;
  background: rgba(17, 29, 49, 0.9);
}

.venue-photo-preview .pswp__venue-preview-hint {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 8px 16px;
  border: 1px solid rgba(140, 184, 230, 0.22);
  border-radius: 999px;
  background: rgba(4, 16, 34, 0.9);
  color: #f4f9ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.venue-photo-preview .pswp__img {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

.summary-more-actions {
  gap: 10px;
}

/* pass42: unified customer-test visual language. */
:root {
  --p42-bg: #030b18;
  --p42-panel: rgba(8, 27, 50, 0.86);
  --p42-panel-strong: rgba(12, 42, 77, 0.94);
  --p42-line: rgba(122, 184, 255, 0.18);
  --p42-line-strong: rgba(122, 184, 255, 0.32);
  --p42-text: #f5f9ff;
  --p42-muted: #a9bdd2;
  --p42-subtle: rgba(213, 229, 246, 0.68);
  --p42-blue: #2f80ff;
  --p42-cyan: #39d6ff;
  --p42-green: #37d77a;
}

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(47, 128, 255, 0.22), transparent 38%),
    linear-gradient(180deg, #020713 0%, #030b18 58%, #01050d 100%);
  color: var(--p42-text);
  letter-spacing: 0;
}

.phone-shell {
  width: min(100vw, 430px);
  background:
    radial-gradient(circle at 50% -10%, rgba(45, 120, 255, 0.2), transparent 38%),
    linear-gradient(180deg, #06172c 0%, #041024 48%, #020814 100%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
}

.mini-bar {
  min-height: 56px;
  padding-inline: 14px;
  border-bottom: 1px solid rgba(130, 185, 255, 0.12);
  background: rgba(3, 13, 29, 0.86);
}

.mini-bar strong {
  color: var(--p42-text);
  font-size: 14px;
  font-weight: 780;
}

.bar-icon,
.mini-menu {
  border: 1px solid rgba(162, 205, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: #e7f2ff;
}

.screen {
  padding: 56px 20px 24px;
}

.screen::before {
  opacity: 0.9;
  background:
    linear-gradient(180deg, rgba(3, 12, 27, 0.42) 0%, rgba(3, 13, 29, 0.74) 43%, rgba(2, 8, 19, 0.98) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen-title {
  gap: 8px;
  margin-bottom: 4px;
}

.screen-title h2,
.completion-title h2 {
  color: var(--p42-text);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.screen-title p,
.completion-title p {
  max-width: 34ch;
  color: #c2d4e6;
  font-size: 14px;
  line-height: 1.55;
}

.brand-mark {
  gap: 8px;
}

.brand-mark .eyebrow {
  color: var(--p42-cyan);
  font-size: 14px;
  font-weight: 780;
}

.brand-mark h1 {
  max-width: 8em;
  color: var(--p42-text);
  font-size: 38px;
  line-height: 1.04;
}

.brand-mark .subtitle {
  color: #cfdeee;
  font-size: 16px;
}

.home-visual {
  overflow: hidden;
  border-top: 1px solid rgba(122, 184, 255, 0.16);
  border-bottom: 1px solid rgba(122, 184, 255, 0.12);
}

.home-visual img {
  opacity: 0.82;
  filter: saturate(0.95) brightness(0.82) contrast(1.08);
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card {
  border-color: var(--p42-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(12, 43, 82, 0.86), rgba(5, 18, 38, 0.94)),
    rgba(7, 24, 46, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.glass-button,
.option-button {
  min-height: 74px;
  padding: 13px 14px;
  gap: 14px;
}

.glass-button::before,
.option-button::before {
  opacity: 0.55;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, #2f80ff), transparent 86%), transparent 48%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--option-color, #39d6ff), transparent 78%), transparent 30%);
}

.icon-badge {
  width: 44px;
  height: 44px;
  border-color: rgba(98, 171, 255, 0.32);
  background: rgba(47, 128, 255, 0.16);
  color: #8bdcff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button-text {
  min-width: 0;
}

.button-text strong,
.service-card strong,
.option-title strong {
  color: var(--p42-text);
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0;
}

.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.option-button .button-text > span,
.route-preview li span {
  color: var(--p42-subtle);
  font-size: 12px;
  line-height: 1.42;
}

.button-arrow {
  color: rgba(231, 242, 255, 0.72);
  font-size: 22px;
}

.primary-action,
.secondary-action,
.text-action,
.image-upload-button {
  border-radius: 8px;
  letter-spacing: 0;
}

.primary-action {
  border-color: rgba(122, 184, 255, 0.44);
  background: linear-gradient(180deg, #3d8dff 0%, #1d62e6 100%);
  box-shadow: 0 12px 28px rgba(24, 95, 220, 0.28);
}

.secondary-action,
.text-action {
  background: rgba(255, 255, 255, 0.055);
  color: #d8e9fa;
}

.overview-image-button img,
.uploaded-map-shell img,
.service-detail-image img,
.summary-custom-image {
  background: #030b18;
}

.overview-image-button img {
  aspect-ratio: 16 / 9;
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.uploaded-map-shell,
.zone-route-map {
  border-color: var(--p42-line);
  border-radius: 8px;
  background: #030b18;
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.uploaded-map-shell {
  min-height: 320px;
}

.route-preview {
  padding: 14px;
}

.route-preview-head strong {
  font-size: 15px;
}

.route-preview-head span {
  color: #b8cbe0;
}

.route-preview li {
  gap: 10px;
}

.route-preview li i {
  background: rgba(47, 128, 255, 0.24);
  color: #9bd7ff;
}

.service-card {
  min-height: 86px;
  padding: 15px;
}

.service-card-image {
  width: 82px;
  height: 54px;
  border-color: rgba(122, 184, 255, 0.18);
  opacity: 0.92;
}

.service-detail-image {
  min-height: 220px;
  border-color: var(--p42-line);
}

.service-detail-card {
  padding: 16px;
}

.service-detail-card strong {
  font-size: 21px;
}

.service-detail-card p {
  color: #c5d6e8;
  font-size: 13px;
}

.summary-card {
  overflow: hidden;
}

.summary-metrics {
  gap: 8px;
}

.summary-metrics div {
  border-color: rgba(122, 184, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.summary-step {
  border-color: rgba(122, 184, 255, 0.12);
}

.overview-pois {
  gap: 8px;
}

.overview-pois span {
  border-color: rgba(122, 184, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 430px) {
  .screen {
    padding-inline: 18px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 28px;
  }

  .brand-mark h1 {
    font-size: 36px;
  }
}

/* pass43: refine toward the approved premium mobile guide references. */
:root {
  --p43-bg: #020815;
  --p43-deep: #051329;
  --p43-panel: rgba(8, 28, 55, 0.82);
  --p43-panel-soft: rgba(8, 25, 48, 0.66);
  --p43-line: rgba(104, 168, 255, 0.22);
  --p43-line-hot: rgba(72, 139, 255, 0.56);
  --p43-text: #f8fbff;
  --p43-muted: rgba(210, 226, 244, 0.72);
  --p43-faint: rgba(185, 204, 226, 0.56);
  --p43-blue: #2f7dff;
  --p43-blue-2: #155ee8;
  --p43-cyan: #5bdfff;
  --p43-green: #38d487;
  --p43-red: #ff4f73;
  --p43-amber: #f0b843;
}

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(48, 124, 255, 0.2), transparent 36%),
    radial-gradient(circle at 78% 18%, rgba(91, 223, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #061326 0%, #020815 64%, #01040b 100%);
}

.phone-shell {
  background:
    radial-gradient(circle at 50% -10%, rgba(43, 112, 255, 0.24), transparent 36%),
    radial-gradient(circle at 92% 26%, rgba(91, 223, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #06142b 0%, #031025 50%, #020713 100%);
}

.mini-bar {
  min-height: 55px;
  grid-template-columns: 46px minmax(0, 1fr) 62px;
  padding: 6px 14px;
  border-bottom-color: rgba(116, 180, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(4, 17, 36, 0.86), rgba(4, 17, 36, 0.58));
  backdrop-filter: blur(18px);
}

.mini-bar strong {
  font-size: 14px;
  font-weight: 720;
}

.bar-icon {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border-color: rgba(165, 207, 255, 0.2);
  background: rgba(255, 255, 255, 0.025);
}

.mini-menu {
  min-width: 56px;
  min-height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.screen {
  padding: 48px 18px 22px;
}

.screen::before {
  background:
    radial-gradient(circle at 64% 7%, rgba(48, 124, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 12, 27, 0.34) 0%, rgba(3, 13, 30, 0.72) 42%, rgba(2, 7, 17, 0.99) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen-title {
  gap: 7px;
}

.screen-title h2,
.completion-title h2 {
  font-size: 30px;
  line-height: 1.08;
  font-weight: 840;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
}

.screen-title p,
.completion-title p,
.subtitle {
  color: var(--p43-muted);
  font-size: 14px;
  line-height: 1.55;
}

.home-screen {
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 54px 18px 34px;
}

.brand-mark {
  margin-top: 0;
}

.brand-mark .eyebrow {
  color: var(--p43-cyan);
  font-size: 13px;
  font-weight: 780;
}

.brand-mark h1 {
  max-width: 7.4em;
  font-size: 35px;
  line-height: 1.06;
  font-weight: 860;
}

.brand-mark .subtitle {
  margin-top: 8px;
  font-size: 14px;
}

.home-visual {
  inset: 174px 0 202px;
  border: 0;
}

.home-visual::before {
  background:
    radial-gradient(circle at 50% 36%, rgba(78, 156, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(4, 15, 31, 0), rgba(4, 15, 31, 0.08) 44%, rgba(2, 8, 18, 0.94));
}

.home-visual img {
  opacity: 0.9;
  filter: saturate(1.05) brightness(0.88) contrast(1.05);
}

.home-actions {
  gap: 11px;
  padding-bottom: 6px;
}

.home-actions .glass-button {
  min-height: 58px;
  padding: 10px 14px;
  border-color: rgba(89, 154, 255, 0.5);
  background:
    linear-gradient(135deg, rgba(55, 132, 255, 0.96), rgba(18, 78, 207, 0.96)),
    rgba(17, 80, 211, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 34px rgba(20, 92, 230, 0.36);
}

.home-actions .glass-button + .glass-button,
.mode-screen .glass-button:not(:first-child) {
  background:
    linear-gradient(135deg, rgba(13, 38, 75, 0.78), rgba(4, 17, 35, 0.86)),
    rgba(6, 21, 43, 0.82);
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card,
.zone-route-preview {
  border-color: var(--p43-line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(10, 40, 82, 0.82), rgba(4, 17, 37, 0.92)),
    rgba(6, 22, 46, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.glass-button,
.option-button {
  min-height: 82px;
  padding: 15px;
  gap: 15px;
}

.glass-button::before,
.option-button::before {
  opacity: 0.85;
  background:
    radial-gradient(circle at 16% 44%, color-mix(in srgb, var(--option-color, var(--p43-blue)), transparent 72%), transparent 30%),
    linear-gradient(120deg, color-mix(in srgb, var(--option-color, var(--p43-blue)), transparent 84%), transparent 48%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 48%);
}

.mode-screen {
  align-content: center;
  gap: 20px;
  padding: 72px 22px 52px;
}

.mode-screen .choice-stack,
.transport-list,
.service-list {
  gap: 13px;
}

.mode-screen .glass-button {
  min-height: 78px;
}

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border-color: rgba(108, 174, 255, 0.24);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(50, 125, 255, 0.34), rgba(26, 76, 162, 0.18));
  color: #d8edff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(38, 118, 255, 0.16);
}

.icon-badge .icon-image,
.summary-step .icon-image {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.summary-step .icon-image {
  width: 18px;
  height: 18px;
}

.button-text strong,
.service-card strong,
.option-title strong {
  font-size: 21px;
  font-weight: 820;
}

.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.option-button .button-text > span {
  color: var(--p43-muted);
  font-size: 13px;
}

.button-arrow {
  color: rgba(216, 235, 255, 0.76);
  font-size: 24px;
}

.transport-screen,
.framework-overview,
.overview-screen,
.services-screen,
.service-detail-screen,
.zone-list-screen,
.summary-screen {
  gap: 15px;
}

.transport-screen {
  padding-top: 58px;
}

.transport-list .option-button {
  min-height: 86px;
  border-color: color-mix(in srgb, var(--option-color), transparent 58%);
}

.transport-list .option-button:first-child {
  border-color: rgba(78, 142, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(42, 107, 255, 0.78), rgba(7, 31, 67, 0.92)),
    rgba(8, 27, 56, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 42px rgba(24, 98, 230, 0.24);
}

.transport-list.compact .option-button {
  min-height: 58px;
  border-radius: 10px;
}

.overview-image-card {
  overflow: hidden;
}

.overview-image-button img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.overview-transport-list > strong {
  margin-top: 2px;
  font-size: 18px;
}

.route-screen,
.zone-route-screen {
  padding: 56px 14px 20px;
  gap: 10px;
}

.route-screen .screen-title,
.zone-route-screen .screen-title {
  padding-inline: 8px;
}

.route-screen .screen-title h2,
.zone-route-screen .screen-title h2 {
  font-size: 26px;
}

.route-screen .screen-title p,
.zone-route-screen .screen-title p {
  font-size: 12px;
  color: var(--p43-muted);
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.zone-route-screen .zone-route-map {
  min-height: 360px;
  border-radius: 8px;
  border-color: rgba(103, 166, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.28);
}

.route-screen .map-block {
  gap: 0;
}

.route-screen .route-preview {
  margin: -76px 12px 0;
  padding: 14px 15px;
  border-radius: 10px;
  border-color: rgba(104, 168, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(10, 38, 76, 0.94), rgba(5, 19, 39, 0.98));
  backdrop-filter: blur(14px);
}

.route-preview-head {
  align-items: baseline;
}

.route-preview-head strong {
  font-size: 15px;
}

.route-preview-head span {
  color: #bdd2e8;
  font-size: 12px;
}

.route-screen .route-preview ol {
  gap: 8px;
}

.route-screen .route-preview li {
  color: rgba(238, 247, 255, 0.9);
  font-size: 12px;
}

.route-screen .route-preview li i {
  background: rgba(47, 125, 255, 0.28);
  color: #a7dcff;
}

.route-screen .action-row {
  margin: 2px 12px 0;
}

.primary-action,
.secondary-action,
.text-action,
.image-upload-button {
  min-height: 46px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 820;
}

.primary-action {
  border-color: rgba(124, 183, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(67, 141, 255, 1), rgba(28, 91, 224, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 30px rgba(30, 96, 230, 0.34);
}

.secondary-action,
.text-action {
  border-color: rgba(159, 204, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

.zone-list-screen {
  padding-top: 56px;
}

.zone-list-screen .choice-stack {
  gap: 14px;
}

.zone-card,
.zone-option {
  min-height: 118px;
  border-radius: 13px;
}

.zone-option {
  padding: 16px;
}

.zone-option::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
  border-radius: 0 13px 13px 0;
  opacity: 0.58;
}

.zone-list-screen .zone-option .icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 9px;
}

.zone-list-screen .zone-option .button-text strong {
  font-size: 22px;
}

.services-screen {
  padding-top: 58px;
}

.service-card {
  min-height: 86px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 15px;
}

.service-card .icon-badge,
.service-detail-card .icon-badge {
  color: var(--p43-cyan);
}

.service-card-image {
  width: 92px;
  height: 58px;
  border-radius: 8px;
}

.service-detail-image {
  min-height: 230px;
  border-radius: 12px;
}

.service-detail-card {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 16px;
}

.summary-screen {
  padding-top: 66px;
}

.completion-title {
  margin-bottom: 4px;
  text-align: center;
}

.summary-card {
  padding: 16px;
}

.summary-head h2 {
  font-size: 24px;
}

.summary-snapshot {
  border-radius: 10px;
}

.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  min-height: 198px;
  border-radius: 8px;
}

.summary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.summary-metrics div {
  padding: 8px 9px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
}

.summary-step {
  padding-block: 8px;
}

.summary-actions,
.summary-more-actions {
  gap: 10px;
}

.broadcast-ticker {
  background: rgba(7, 21, 43, 0.62);
  backdrop-filter: blur(12px);
}

@media (max-width: 430px) {
  .screen {
    padding-inline: 18px;
  }

  .home-screen {
    padding-inline: 18px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 29px;
  }

  .brand-mark h1 {
    font-size: 34px;
  }

  .route-screen,
  .zone-route-screen {
    padding-inline: 14px;
  }
}

/* PASS49 UI polish: shared H5 visual skin. Keep content/editor data untouched. */
:root {
  --pass49-bg-top: #071b36;
  --pass49-bg-mid: #031026;
  --pass49-bg-deep: #010612;
  --pass49-panel: rgba(7, 28, 58, 0.82);
  --pass49-panel-strong: rgba(10, 42, 84, 0.9);
  --pass49-line: rgba(129, 194, 255, 0.24);
  --pass49-line-strong: rgba(134, 205, 255, 0.42);
  --pass49-text: #f6fbff;
  --pass49-muted: #a9c2d9;
  --pass49-cyan: #4ce6ff;
  --pass49-blue: #2e86ff;
  --pass49-blue-deep: #1550d8;
  --pass49-green: #34d99f;
  --pass49-amber: #ffc85a;
  --pass49-red: #ff5d6d;
  --pass49-card-radius: 8px;
  --pass49-font:
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI",
    "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--pass49-font);
  letter-spacing: 0;
}

body {
  color: var(--pass49-text);
  background:
    radial-gradient(circle at 50% -12%, rgba(66, 145, 255, 0.28), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(76, 230, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #061a34 0%, #020a18 66%, #01040b 100%);
}

.phone-shell {
  color: var(--pass49-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(58, 134, 255, 0.24), transparent 34%),
    radial-gradient(circle at 92% 22%, rgba(68, 221, 255, 0.12), transparent 30%),
    linear-gradient(180deg, var(--pass49-bg-top) 0%, var(--pass49-bg-mid) 48%, var(--pass49-bg-deep) 100%);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(124, 190, 255, 0.13);
}

.mini-bar {
  min-height: 58px;
  padding: 7px 15px;
  grid-template-columns: 42px minmax(0, 1fr) 60px;
  border-bottom: 1px solid rgba(126, 188, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(6, 22, 46, 0.94), rgba(4, 16, 34, 0.76));
  backdrop-filter: blur(18px);
}

.mini-bar strong {
  color: rgba(246, 251, 255, 0.96);
  font-size: 14px;
  font-weight: 820;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
}

.bar-icon,
.mini-menu {
  border: 1px solid rgba(154, 207, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(22, 53, 92, 0.72), rgba(7, 24, 50, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.18);
}

.bar-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--pass49-card-radius);
}

.mini-menu {
  min-width: 56px;
  min-height: 36px;
  border-radius: 18px;
  color: rgba(246, 251, 255, 0.92);
}

.screen {
  padding: 50px 18px 24px;
}

.screen::before {
  background:
    radial-gradient(circle at 68% 6%, rgba(62, 132, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 13, 29, 0.36) 0%, rgba(3, 13, 29, 0.76) 44%, rgba(1, 6, 16, 0.99) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen-title,
.completion-title,
.brand-mark {
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.screen-title h2,
.completion-title h2 {
  color: var(--pass49-text);
  font-size: 31px;
  line-height: 1.08;
  font-weight: 900;
}

.screen-title p,
.completion-title p,
.brand-mark .subtitle,
.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.option-button .button-text > span,
.route-preview-head span,
.route-preview li,
.summary-step span {
  color: var(--pass49-muted);
}

.brand-mark .eyebrow {
  color: var(--pass49-cyan);
  font-size: 14px;
  font-weight: 900;
}

.brand-mark h1 {
  color: var(--pass49-text);
  font-size: 38px;
  line-height: 1.04;
  font-weight: 950;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.42);
}

.brand-mark .subtitle {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 720;
}

.home-screen {
  grid-template-rows: auto 1fr auto;
  padding: 58px 20px 34px;
  gap: 18px;
}

.home-visual {
  inset: 178px 0 192px;
  border-top: 1px solid rgba(126, 190, 255, 0.12);
  border-bottom: 1px solid rgba(126, 190, 255, 0.12);
}

.home-visual::before {
  background:
    radial-gradient(circle at 52% 36%, rgba(69, 154, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 13, 29, 0.16) 0%, rgba(3, 13, 29, 0.08) 26%, rgba(2, 8, 18, 0.36) 64%, rgba(1, 6, 15, 0.96) 100%);
}

.home-visual img {
  opacity: 0.92;
  filter: saturate(0.98) brightness(0.78) contrast(1.08);
}

.home-actions {
  gap: 12px;
  padding: 0 4px 4px;
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card,
.zone-route-preview,
.overview-pois > span,
.primary-action,
.secondary-action,
.text-action,
.image-upload-button {
  border-radius: var(--pass49-card-radius);
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card,
.zone-route-preview {
  border: 1px solid var(--pass49-line);
  background:
    linear-gradient(135deg, rgba(12, 45, 88, 0.88), rgba(4, 18, 39, 0.94)),
    rgba(6, 24, 50, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.25);
}

.glass-button::before,
.option-button::before,
.service-card::before {
  background:
    radial-gradient(circle at 14% 40%, color-mix(in srgb, var(--option-color, var(--pass49-blue)), transparent 72%), transparent 34%),
    linear-gradient(110deg, color-mix(in srgb, var(--option-color, var(--pass49-blue)), transparent 84%), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%);
  opacity: 0.92;
}

.glass-button,
.option-button {
  min-height: 84px;
  padding: 15px;
  gap: 15px;
}

.home-actions .glass-button {
  min-height: 74px;
  padding: 13px 14px;
  border-color: rgba(124, 201, 255, 0.5);
  background:
    radial-gradient(circle at 18% 38%, rgba(89, 218, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #3b93ff 0%, #236ee9 44%, #123e9d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 46px rgba(22, 95, 226, 0.38);
}

.home-actions .glass-button + .glass-button,
.mode-screen .glass-button:not(:first-child) {
  border-color: rgba(126, 190, 255, 0.18);
  background:
    radial-gradient(circle at 18% 38%, rgba(84, 177, 255, 0.1), transparent 32%),
    linear-gradient(135deg, rgba(12, 42, 80, 0.78), rgba(4, 17, 36, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.icon-badge {
  width: 54px;
  height: 54px;
  border-radius: var(--pass49-card-radius);
  border: 1px solid rgba(126, 198, 255, 0.24);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(61, 142, 255, 0.44), rgba(19, 63, 137, 0.28));
  color: #def2ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 26px rgba(41, 119, 255, 0.17);
}

.icon-badge .icon-image,
.summary-step .icon-image {
  display: block;
  width: 74%;
  height: 74%;
  object-fit: contain;
}

.button-text strong,
.service-card strong,
.option-title strong {
  color: var(--pass49-text);
  font-size: 22px;
  font-weight: 900;
}

.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.option-button .button-text > span {
  font-size: 13px;
  line-height: 1.48;
  font-weight: 650;
}

.button-arrow {
  color: rgba(220, 239, 255, 0.72);
  font-size: 24px;
}

.mode-screen {
  align-content: center;
  gap: 20px;
  padding: 74px 22px 54px;
}

.mode-screen .choice-stack,
.transport-list,
.service-list,
.choice-stack {
  gap: 13px;
}

.transport-list .option-button,
.service-card {
  min-height: 88px;
}

.transport-list .option-button {
  border-color: color-mix(in srgb, var(--option-color, var(--pass49-blue)), transparent 54%);
}

.transport-list .option-button:first-child,
.option-button.is-recommended {
  border-color: rgba(93, 192, 255, 0.58);
  background:
    radial-gradient(circle at 18% 40%, rgba(76, 230, 255, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(43, 119, 255, 0.86), rgba(7, 31, 68, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 44px rgba(24, 98, 230, 0.26);
}

.transport-list.compact .option-button {
  min-height: 60px;
}

.overview-image-card,
.map-shell,
.guide-map-shell,
.zone-route-map,
.summary-snapshot,
.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  border-radius: var(--pass49-card-radius);
  border-color: rgba(118, 190, 255, 0.22);
}

.overview-image-card {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 37, 76, 0.9), rgba(5, 18, 39, 0.96));
}

.overview-transport-list > strong {
  color: var(--pass49-text);
  font-size: 20px;
  font-weight: 900;
}

.route-screen,
.zone-route-screen {
  padding-top: 58px;
  gap: 11px;
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.zone-route-screen .zone-route-map {
  min-height: 360px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 54px rgba(0, 0, 0, 0.34);
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  margin: -72px 12px 0;
  padding: 15px;
  border-color: rgba(122, 199, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(10, 43, 82, 0.95), rgba(4, 18, 38, 0.98));
  backdrop-filter: blur(16px);
}

.route-preview-head strong {
  color: var(--pass49-text);
  font-size: 16px;
  font-weight: 900;
}

.route-preview-head span {
  font-size: 12px;
  font-weight: 650;
}

.route-preview li {
  font-size: 12px;
  font-weight: 650;
}

.route-preview li i {
  background:
    linear-gradient(180deg, rgba(71, 151, 255, 0.95), rgba(24, 95, 217, 0.95));
  color: white;
  box-shadow: 0 7px 18px rgba(42, 121, 255, 0.24);
}

.zone-option {
  min-height: 116px;
  border-radius: var(--pass49-card-radius);
}

.zone-option::after {
  border-radius: 0 var(--pass49-card-radius) var(--pass49-card-radius) 0;
}

.zone-list-screen .zone-option .icon-badge {
  border-radius: var(--pass49-card-radius);
}

.service-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 15px;
}

.service-card-image,
.service-detail-image {
  border-radius: var(--pass49-card-radius);
}

.service-detail-card {
  padding: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

.summary-card {
  padding: 16px;
  background:
    radial-gradient(circle at 50% -10%, rgba(76, 230, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(10, 38, 76, 0.92), rgba(4, 17, 38, 0.98));
}

.summary-card::before {
  opacity: 0.72;
}

.summary-head h2 {
  color: var(--pass49-text);
  font-size: 24px;
  font-weight: 900;
}

.summary-metrics div {
  border-radius: var(--pass49-card-radius);
  background: rgba(255, 255, 255, 0.055);
}

.primary-action {
  border-color: rgba(132, 206, 255, 0.58);
  background:
    linear-gradient(180deg, #3a96ff 0%, #1d61e1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 14px 34px rgba(28, 95, 224, 0.34);
}

.secondary-action,
.text-action,
.image-upload-button {
  border-color: rgba(159, 204, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.broadcast-ticker {
  border-top: 1px solid rgba(126, 190, 255, 0.14);
  background: rgba(6, 23, 47, 0.76);
  backdrop-filter: blur(14px);
}

@media (max-width: 430px) {
  .screen {
    padding-inline: 18px;
  }

  .home-screen {
    padding-inline: 20px;
  }

  .brand-mark h1 {
    font-size: 37px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 30px;
  }

  .button-text strong,
  .service-card strong,
  .option-title strong {
    font-size: 21px;
  }
}

/* PASS50 blue iOS-like skin: visual-only layer. No flow or logic changes. */
:root {
  --pass50-bg: #020814;
  --pass50-bg-soft: #061934;
  --pass50-panel: rgba(7, 29, 57, 0.78);
  --pass50-panel-2: rgba(12, 53, 107, 0.58);
  --pass50-panel-muted: rgba(10, 32, 62, 0.62);
  --pass50-line: rgba(120, 190, 255, 0.18);
  --pass50-line-soft: rgba(255, 255, 255, 0.08);
  --pass50-line-hot: rgba(131, 206, 255, 0.42);
  --pass50-action: #2e86ff;
  --pass50-action-hi: #3a93ff;
  --pass50-action-deep: #1d61e1;
  --pass50-cyan: #4ce6ff;
  --pass50-green: #34d99f;
  --pass50-amber: #ffc85a;
  --pass50-red: #ff6a55;
  --pass50-text: #f7fbff;
  --pass50-muted: #afc8e0;
  --pass50-dim: #738ba5;
  --pass50-radius: 8px;
  --pass50-radius-large: 10px;
  --pass50-font:
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI",
    "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--pass50-font);
  letter-spacing: 0;
}

body {
  color: var(--pass50-text);
  background:
    radial-gradient(circle at 50% -14%, rgba(46, 134, 255, 0.24), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(76, 230, 255, 0.08), transparent 31%),
    linear-gradient(180deg, #061934 0%, var(--pass50-bg) 62%, #01040b 100%);
}

.phone-shell {
  color: var(--pass50-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(46, 134, 255, 0.22), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(76, 230, 255, 0.08), transparent 28%),
    radial-gradient(circle at 0% 78%, rgba(46, 134, 255, 0.08), transparent 34%),
    linear-gradient(180deg, var(--pass50-bg-soft) 0%, #031024 52%, var(--pass50-bg) 100%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(143, 199, 255, 0.1);
}

.phone-shell::before {
  opacity: 0.52;
}

.mini-bar {
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr) 60px;
  padding: 7px 15px;
  border-bottom: 1px solid rgba(143, 199, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(7, 29, 57, 0.86), rgba(4, 17, 36, 0.64));
  backdrop-filter: blur(22px);
}

.mini-bar strong {
  color: rgba(247, 251, 255, 0.96);
  font-size: 14px;
  font-weight: 760;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

.bar-icon,
.mini-menu {
  border: 1px solid rgba(143, 199, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(18, 48, 88, 0.62), rgba(7, 29, 57, 0.48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.bar-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--pass50-radius);
}

.mini-menu {
  min-width: 56px;
  min-height: 36px;
  border-radius: 18px;
}

.screen {
  padding: 52px 18px 24px;
}

.screen::before {
  filter: saturate(0.92) brightness(0.76) contrast(1.04);
  background:
    radial-gradient(circle at 65% 6%, rgba(46, 134, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(3, 13, 29, 0.30) 0%, rgba(3, 13, 29, 0.70) 44%, rgba(1, 6, 15, 0.99) 100%),
    var(--screen-image, none) center bottom / cover no-repeat;
}

.screen-title,
.completion-title,
.brand-mark {
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.brand-mark .eyebrow {
  color: var(--pass50-cyan);
  font-size: 14px;
  font-weight: 760;
}

.brand-mark h1 {
  max-width: 8em;
  color: var(--pass50-text);
  font-size: 36px;
  line-height: 1.08;
  font-weight: 860;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.42);
}

.brand-mark .subtitle,
.screen-title p,
.completion-title p {
  color: var(--pass50-muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 520;
}

.screen-title h2,
.completion-title h2 {
  color: var(--pass50-text);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: 0;
}

.home-screen {
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 58px 20px 34px;
}

.home-visual {
  inset: 184px 0 196px;
  border: 0;
}

.home-visual::before {
  background:
    radial-gradient(circle at 50% 36%, rgba(46, 134, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(2, 8, 20, 0.06) 0%, rgba(2, 8, 20, 0.02) 38%, rgba(2, 8, 20, 0.38) 66%, rgba(1, 5, 14, 0.97) 100%);
}

.home-visual img {
  opacity: 0.92;
  filter: saturate(0.9) brightness(0.74) contrast(1.08);
}

.home-actions {
  gap: 12px;
  padding: 0 4px 4px;
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card,
.zone-route-preview,
.overview-pois > span,
.primary-action,
.secondary-action,
.text-action,
.image-upload-button,
.zone-option {
  border-radius: var(--pass50-radius);
}

.glass-button,
.option-button,
.service-card,
.service-detail-card,
.directory-card,
.summary-card,
.route-preview,
.overview-image-card,
.map-info-card,
.zone-route-preview {
  border: 1px solid var(--pass50-line);
  background:
    linear-gradient(180deg, rgba(13, 39, 74, 0.70), rgba(5, 18, 38, 0.82)),
    rgba(7, 29, 57, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 18px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.glass-button::before,
.option-button::before,
.service-card::before {
  opacity: 0.75;
  background:
    radial-gradient(circle at 18% 34%, color-mix(in srgb, var(--option-color, var(--pass50-action)), transparent 82%), transparent 34%),
    linear-gradient(110deg, color-mix(in srgb, var(--option-color, var(--pass50-action)), transparent 90%), transparent 52%);
}

.glass-button,
.option-button {
  min-height: 82px;
  padding: 15px;
  gap: 15px;
}

.home-actions .glass-button,
.primary-action {
  border-color: var(--pass50-line-hot);
  background:
    radial-gradient(circle at 18% 28%, rgba(76, 230, 255, 0.20), transparent 30%),
    linear-gradient(180deg, var(--pass50-action-hi) 0%, var(--pass50-action-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 46px rgba(32, 107, 255, 0.34);
}

.home-actions .glass-button {
  min-height: 74px;
  padding: 13px 14px;
}

.home-actions .glass-button + .glass-button,
.mode-screen .glass-button:not(:first-child),
.secondary-action,
.text-action,
.image-upload-button {
  border-color: rgba(143, 199, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(12, 38, 72, 0.60), rgba(5, 18, 38, 0.72)),
    rgba(7, 29, 57, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.18);
}

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--pass50-radius);
  border: 1px solid rgba(143, 199, 255, 0.18);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(46, 134, 255, 0.28), rgba(74, 112, 177, 0.12));
  color: rgba(232, 244, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 12px 28px rgba(46, 134, 255, 0.12);
}

.home-actions .icon-badge,
.transport-list .option-button:first-child .icon-badge,
.option-button.is-recommended .icon-badge {
  background:
    radial-gradient(circle at 40% 24%, rgba(255, 255, 255, 0.20), transparent 30%),
    linear-gradient(145deg, rgba(76, 230, 255, 0.24), rgba(46, 134, 255, 0.32));
  border-color: rgba(135, 214, 255, 0.28);
}

.app-icon,
.icon-text {
  color: currentColor;
}

.button-text strong,
.service-card strong,
.option-title strong {
  color: var(--pass50-text);
  font-size: 21px;
  font-weight: 780;
  letter-spacing: 0;
}

.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.option-button .button-text > span,
.route-preview li,
.summary-step span,
.route-preview-head span {
  color: var(--pass50-muted);
  font-size: 13px;
  line-height: 1.48;
  font-weight: 500;
}

.button-arrow {
  color: rgba(220, 239, 255, 0.66);
  font-size: 23px;
}

.mode-screen {
  align-content: center;
  gap: 20px;
  padding: 74px 22px 54px;
}

.mode-screen .choice-stack,
.transport-list,
.service-list,
.choice-stack {
  gap: 13px;
}

.transport-list .option-button,
.service-card {
  min-height: 86px;
}

.transport-list .option-button {
  border-color: color-mix(in srgb, var(--option-color, var(--pass50-action)), transparent 68%);
  background:
    linear-gradient(180deg, rgba(9, 34, 68, 0.70), rgba(4, 17, 36, 0.82)),
    rgba(7, 29, 57, 0.58);
}

.transport-list .option-button:first-child,
.option-button.is-recommended {
  border-color: rgba(123, 203, 255, 0.34);
  background:
    radial-gradient(circle at 18% 36%, rgba(76, 230, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(46, 134, 255, 0.78), rgba(13, 52, 114, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 18px 42px rgba(32, 107, 255, 0.22);
}

.transport-list.compact .option-button {
  min-height: 60px;
}

.overview-image-card,
.map-shell,
.guide-map-shell,
.zone-route-map,
.summary-snapshot,
.summary-snapshot .map-shell,
.summary-snapshot .guide-map-shell {
  border-radius: var(--pass50-radius-large);
  border-color: rgba(143, 199, 255, 0.16);
  overflow: hidden;
}

.overview-image-card {
  background:
    linear-gradient(180deg, rgba(8, 31, 60, 0.76), rgba(4, 17, 36, 0.90));
}

.overview-transport-list > strong {
  color: var(--pass50-text);
  font-weight: 760;
}

.overview-pois > span {
  border-color: rgba(143, 199, 255, 0.12);
  background: rgba(7, 29, 57, 0.56);
}

.route-screen,
.zone-route-screen {
  padding-top: 58px;
  gap: 11px;
}

.route-screen .map-shell,
.route-screen .guide-map-shell,
.zone-route-screen .zone-route-map {
  min-height: 360px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 24px 56px rgba(0, 0, 0, 0.32);
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  margin: -72px 12px 0;
  padding: 15px;
  border-color: rgba(143, 199, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(9, 34, 68, 0.78), rgba(4, 17, 36, 0.92));
  backdrop-filter: blur(22px);
}

.route-preview-head strong,
.summary-head h2 {
  color: var(--pass50-text);
  font-size: 16px;
  font-weight: 760;
}

.route-preview li i,
.summary-step i {
  background:
    linear-gradient(180deg, rgba(58, 147, 255, 0.94), rgba(29, 97, 225, 0.94));
  color: white;
  box-shadow: 0 8px 20px rgba(46, 134, 255, 0.22);
}

.zone-option {
  min-height: 116px;
  background:
    linear-gradient(180deg, rgba(9, 34, 68, 0.68), rgba(4, 17, 36, 0.82));
}

.zone-option::after {
  border-radius: 0 var(--pass50-radius) var(--pass50-radius) 0;
  opacity: 0.48;
}

.zone-list-screen .zone-option .icon-badge {
  border-radius: var(--pass50-radius);
}

.service-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 15px;
}

.service-card-image,
.service-detail-image {
  border-radius: var(--pass50-radius);
}

.service-detail-card {
  padding: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

.summary-card {
  padding: 16px;
  background:
    radial-gradient(circle at 50% -8%, rgba(76, 230, 255, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(9, 34, 68, 0.76), rgba(4, 17, 36, 0.94));
}

.summary-card::before {
  opacity: 0.52;
}

.summary-metrics div {
  border-radius: var(--pass50-radius);
  background: rgba(255, 255, 255, 0.045);
}

.summary-actions,
.summary-more-actions {
  gap: 10px;
}

.primary-action,
.secondary-action,
.text-action,
.image-upload-button {
  min-height: 46px;
  font-size: 14px;
  font-weight: 720;
}

.broadcast-ticker {
  border-top: 1px solid rgba(143, 199, 255, 0.12);
  background: rgba(7, 29, 57, 0.70);
  backdrop-filter: blur(18px);
}

@media (max-width: 430px) {
  .screen {
    padding-inline: 18px;
  }

  .home-screen {
    padding-inline: 20px;
  }

  .brand-mark h1 {
    font-size: 35px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 29px;
  }

  .button-text strong,
  .service-card strong,
  .option-title strong {
    font-size: 20px;
  }
}

/* PASS50.1 typography pass: bundled Chinese font + restrained iOS-like text rhythm. */
@font-face {
  font-family: "H5PuHuiTi";
  src: url("./assets/fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2"),
       url("./assets/fonts/AlibabaPuHuiTi-3-55-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "H5PuHuiTi";
  src: url("./assets/fonts/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2"),
       url("./assets/fonts/AlibabaPuHuiTi-3-65-Medium.ttf") format("truetype");
  font-weight: 500 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "H5PuHuiTi";
  src: url("./assets/fonts/AlibabaPuHuiTi-3-85-Bold.woff2") format("woff2"),
       url("./assets/fonts/AlibabaPuHuiTi-3-85-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display-cn: "H5PuHuiTi", "Alibaba PuHuiTi 3.0", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-display-cn);
  font-synthesis-weight: none;
  font-synthesis-style: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mini-bar strong,
.brand-mark h1,
.screen-title h2,
.completion-title h2,
.service-title,
.service-detail-title,
.modal-title,
.summary-head h2 {
  font-family: var(--font-display-cn);
  font-weight: 700;
  letter-spacing: 0;
}

.brand-mark h1 {
  font-size: clamp(36px, 9.4vw, 46px);
  line-height: 1.02;
}

.screen-title h2,
.completion-title h2 {
  line-height: 1.12;
}

.brand-mark .eyebrow,
.screen-title p,
.completion-title p,
.button-text span,
.service-card span,
.option-title span,
.summary-subtitle,
.route-preview-head span,
.metric-label,
.metric-value,
.mini-bar strong {
  letter-spacing: 0;
}

.button-text strong,
.service-card strong,
.option-title strong,
.transport-option strong,
.zone-option strong {
  font-weight: 700;
  line-height: 1.18;
}

.button-text span,
.service-card span,
.option-title span,
.transport-option span,
.zone-option span,
.route-preview li,
.summary-step span,
.service-detail-copy,
.broadcast-ticker {
  font-weight: 400;
  line-height: 1.42;
}

.transport-option {
  gap: 13px;
}

.transport-meta strong,
.distance-bar strong,
.summary-metrics strong {
  font-weight: 650;
  letter-spacing: 0;
}

.badge,
.tag-pill,
.recommend-tag {
  font-weight: 650;
  letter-spacing: 0;
}

.mini-bar strong {
  font-size: 15px;
}

@media (max-width: 430px) {
  .brand-mark h1 {
    font-size: 36px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 28px;
  }

  .button-text strong,
  .service-card strong,
  .option-title strong,
  .transport-option strong,
  .zone-option strong {
    font-size: 20px;
  }
}

/* PASS52 Figma UI component library merge.
   Source: PASS52_UI_v0.1 tokens. Visual-only layer, keeps PASS51 flow logic intact. */
:root {
  --p52-bg-base: #061226;
  --p52-bg-deep: #03101e;
  --p52-panel: rgba(11, 36, 66, 0.78);
  --p52-panel-strong: rgba(18, 56, 95, 0.92);
  --p52-line: rgba(255, 255, 255, 0.12);
  --p52-line-cyan: rgba(56, 214, 255, 0.28);
  --p52-text: #f4f9ff;
  --p52-muted: #b7c8d8;
  --p52-dim: #8fafc6;
  --p52-blue: #2f80ff;
  --p52-blue-strong: #1b62e8;
  --p52-cyan: #38d6ff;
  --p52-green: #35d66b;
  --p52-amber: #f7bd45;
  --p52-vip: #b777ff;
  --p52-red: #ff5a5f;
  --p52-radius-card: 16px;
  --p52-radius-large: 18px;
  --p52-shadow-glass: 0 16px 38px rgba(0, 0, 0, 0.32);
  --p52-glass: linear-gradient(135deg, rgba(18, 56, 95, 0.78), rgba(7, 27, 53, 0.90));
  --p52-primary: linear-gradient(135deg, #2f80ff, #1b62e8);
  --p52-route-glow: 0 0 16px rgba(56, 214, 255, 0.28), 0 0 34px rgba(56, 214, 255, 0.16);
}

html,
body {
  background:
    radial-gradient(circle at 18% 5%, rgba(56, 214, 255, 0.12), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(47, 128, 255, 0.18), transparent 32%),
    linear-gradient(180deg, var(--p52-bg-base), var(--p52-bg-deep) 70%);
  color: var(--p52-text);
}

.phone-shell {
  background:
    radial-gradient(circle at 48% 0%, rgba(47, 128, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(7, 24, 48, 0.98), rgba(2, 8, 18, 0.98));
}

.phone-shell::before {
  opacity: 0.46;
}

.mini-bar {
  min-height: 58px;
  padding: 9px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 21, 42, 0.78);
  backdrop-filter: blur(24px);
}

.mini-bar strong {
  color: var(--p52-text);
  font-size: 14px;
  font-weight: 650;
}

.bar-icon,
.mini-menu {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.screen {
  color: var(--p52-text);
}

.brand-mark .eyebrow,
.screen-title .eyebrow,
.preview-head span {
  color: var(--p52-cyan);
}

.brand-mark h1 {
  max-width: 8em;
  font-size: clamp(34px, 8.8vw, 44px);
  font-weight: 800;
  line-height: 1.16;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.screen-title h2,
.completion-title h2 {
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.16;
}

.screen-title p,
.completion-title p,
.brand-mark .subtitle {
  color: var(--p52-muted);
  font-size: 15px;
  line-height: 1.45;
}

.home-visual,
.overview-image-card,
.uploaded-map-shell,
.zone-route-map,
.service-detail-image,
.summary-snapshot-map {
  border-radius: var(--p52-radius-large);
  border: 1px solid var(--p52-line);
  box-shadow: var(--p52-shadow-glass);
}

.home-visual::before,
.uploaded-map-shell::after,
.zone-route-map::after {
  background:
    linear-gradient(180deg, rgba(3, 16, 30, 0.02), rgba(3, 16, 30, 0.26) 62%, rgba(3, 16, 30, 0.72));
}

.glass-button,
.service-card,
.transport-option,
.zone-option,
.overview-next-card,
.route-preview,
.summary-card,
.service-detail-card,
.broadcast-card,
.control-panel {
  border: 1px solid var(--p52-line-cyan);
  border-radius: var(--p52-radius-card);
  background: var(--p52-glass);
  box-shadow: var(--p52-shadow-glass);
}

.glass-button::before,
.service-card::before,
.transport-option::before,
.summary-card::before {
  opacity: 0.58;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at 12% 0%, rgba(56, 214, 255, 0.15), transparent 38%);
}

.glass-button,
.service-card,
.transport-option,
.zone-option {
  min-height: 86px;
  padding: 14px 16px;
}

.home-actions .glass-button:first-child,
.mode-screen .glass-button:first-child,
.transport-option.is-recommended {
  border-color: rgba(56, 214, 255, 0.56);
  background:
    radial-gradient(circle at 8% 0%, rgba(56, 214, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(47, 128, 255, 0.86), rgba(19, 60, 128, 0.92));
  box-shadow:
    0 0 22px rgba(47, 128, 255, 0.28),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.home-actions .glass-button + .glass-button,
.mode-screen .glass-button:not(:first-child),
.secondary-action,
.text-action {
  border-color: rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(135deg, rgba(12, 35, 64, 0.82), rgba(5, 20, 39, 0.92));
}

.icon-badge {
  border: 1px solid rgba(56, 214, 255, 0.30);
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(47, 128, 255, 0.58), rgba(9, 35, 68, 0.82));
  color: var(--p52-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button-text strong,
.service-card strong,
.transport-option strong,
.zone-option strong,
.option-title strong,
.overview-next-card strong {
  color: var(--p52-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.button-text span,
.service-card span:not(.icon-badge):not(.icon-text),
.transport-option span,
.zone-option span,
.overview-next-card span,
.route-preview li,
.summary-step span {
  color: var(--p52-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}

.button-arrow {
  color: rgba(244, 249, 255, 0.62);
}

.primary-action,
.secondary-action,
.text-action,
.image-upload-button {
  min-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
}

.primary-action {
  border-color: rgba(98, 169, 255, 0.58);
  background: var(--p52-primary);
  box-shadow: 0 0 22px rgba(47, 128, 255, 0.28);
}

.secondary-action,
.text-action {
  color: #d6e8ff;
}

.overview-next-card {
  display: grid;
  gap: 12px;
}

.legend-dot,
.route-preview li i,
.summary-step i {
  box-shadow: var(--p52-route-glow);
}

.uploaded-map-shell svg path,
.zone-route-path {
  filter: drop-shadow(0 0 10px rgba(56, 214, 255, 0.26));
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  border-color: rgba(56, 214, 255, 0.26);
  background:
    linear-gradient(135deg, rgba(18, 56, 95, 0.84), rgba(5, 20, 39, 0.94));
}

.route-preview-head strong,
.summary-head h2 {
  font-size: 18px;
  font-weight: 800;
}

.route-preview-head span,
.summary-subtitle,
.metric-label {
  color: var(--p52-dim);
}

.transport-option[data-transport="metro"],
.transport-option.option-metro {
  --route-color: var(--p52-cyan);
}

.transport-option[data-transport="bus"],
.transport-option.option-bus {
  --route-color: var(--p52-vip);
  border-color: rgba(183, 119, 255, 0.36);
}

.transport-option[data-transport="drive"],
.transport-option.option-drive {
  --route-color: var(--p52-amber);
  border-color: rgba(247, 189, 69, 0.36);
}

.transport-option[data-transport="ridehail"],
.transport-option.option-ridehail {
  --route-color: var(--p52-cyan);
  border-color: rgba(56, 214, 255, 0.34);
}

.zone-option.option-vip,
.zone-option[data-zone="vip"] {
  border-color: rgba(183, 119, 255, 0.36);
}

.zone-option.option-inner,
.zone-option[data-zone="inner"] {
  border-color: rgba(247, 189, 69, 0.36);
}

.summary-card {
  background:
    radial-gradient(circle at 50% -8%, rgba(56, 214, 255, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(18, 56, 95, 0.80), rgba(5, 20, 39, 0.94));
}

.summary-metrics div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

.broadcast-ticker {
  border-top: 1px solid rgba(56, 214, 255, 0.16);
  background: rgba(3, 16, 30, 0.72);
}

.recommend-tag,
.tag-pill,
.badge {
  border-radius: 999px;
  border-color: rgba(56, 214, 255, 0.30);
  background: rgba(47, 128, 255, 0.18);
  color: #bfe9ff;
}

@media (max-width: 430px) {
  .screen {
    padding-inline: 18px;
  }

  .brand-mark h1 {
    font-size: 34px;
  }

  .screen-title h2,
  .completion-title h2 {
    font-size: 28px;
  }

  .glass-button,
  .service-card,
  .transport-option,
  .zone-option {
    min-height: 84px;
  }
}

/* PASS52 hotfix: cover title uses UI color, not the uploaded/photo background.
   The uploaded cover image remains only in the large .home-visual block. */
.home-screen::before {
  filter: none !important;
  background:
    radial-gradient(circle at 72% 8%, rgba(56, 214, 255, 0.14), transparent 34%),
    radial-gradient(circle at 20% 0%, rgba(47, 128, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(8, 31, 61, 0.98) 0%, rgba(5, 20, 40, 0.98) 28%, rgba(2, 9, 21, 1) 100%) !important;
}

.home-screen .brand-mark {
  position: relative;
  z-index: 2;
}

/* PASS53 logic fix: display pages are not editing surfaces. */
.phone-shell:not(.editor-preview) .image-upload-button,
.image-upload-button {
  display: none !important;
}

/* PASS53 logic fix: route info is an independent block below the map. */
.route-screen,
.zone-route-screen {
  min-height: calc(100dvh - var(--topbar-height, 56px));
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding-top: max(52px, env(safe-area-inset-top));
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.route-screen .map-block,
.route-screen .map-shell,
.route-screen .guide-map-shell,
.zone-route-screen .zone-route-map {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 11;
  margin: 0 !important;
}

.route-screen .route-preview,
.zone-route-screen .route-preview {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  margin: 0 4px !important;
  transform: none !important;
  z-index: 1;
}

.route-screen .legend-strip {
  display: none !important;
}

.route-screen .action-row,
.zone-route-screen .action-row {
  margin-top: 0 !important;
}

/* PASS53 logic fix: overview and zone overview images should be meaningful, not tiny thumbnails. */
.overview-image-card,
.zone-list-screen .directory-card {
  overflow: hidden;
}

.overview-image-button,
.zone-list-screen .directory-card .map-block {
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
}

.zone-list-screen .directory-card {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
}

.zone-list-screen .directory-card .map-block {
  order: 1;
}

.zone-list-screen .choice-stack {
  margin-top: 8px !important;
}

@media (max-height: 760px) {
  .route-screen,
  .zone-route-screen {
    justify-content: flex-start;
  }
}

/* PASS53 frame hotfix: one stable mobile page skeleton for all content pages.
   No page should float to the middle just because its content is shorter. */
.phone-shell {
  --h5-topbar-h: 70px;
  --h5-page-x: 18px;
  --h5-page-top: 48px;
  --h5-page-bottom: 26px;
  --h5-stack-gap: 16px;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) {
  min-height: calc(100dvh - var(--h5-topbar-h)) !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch;
  gap: var(--h5-stack-gap);
  padding:
    max(var(--h5-page-top), env(safe-area-inset-top))
    var(--h5-page-x)
    max(var(--h5-page-bottom), env(safe-area-inset-bottom)) !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title,
.phone-shell .screen:not(.home-screen):not(.summary-screen) > .completion-title {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
  padding: 0 2px !important;
}

.phone-shell .screen-title h2,
.phone-shell .completion-title h2 {
  margin: 0 0 8px !important;
}

.phone-shell .screen-title p,
.phone-shell .completion-title p {
  margin: 0 !important;
}

.phone-shell .overview-image-card,
.phone-shell .map-block,
.phone-shell .route-preview,
.phone-shell .zone-route-map,
.phone-shell .directory-card,
.phone-shell .overview-next-card,
.phone-shell .choice-stack,
.phone-shell .action-row,
.phone-shell .text-action {
  flex: 0 0 auto;
}

.phone-shell .overview-screen .overview-image-card,
.phone-shell .zone-list-screen .directory-card {
  margin-top: 8px !important;
}

.phone-shell .overview-image-button {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.phone-shell .route-screen .map-block,
.phone-shell .route-screen .map-shell,
.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .zone-route-map {
  width: 100% !important;
  aspect-ratio: 16 / 11;
  margin: 0 !important;
}

.phone-shell .route-screen .route-preview,
.phone-shell .zone-route-screen .route-preview {
  margin: 0 !important;
}

.phone-shell .overview-screen .action-row,
.phone-shell .route-screen .action-row,
.phone-shell .zone-route-screen .action-row {
  margin-top: 2px !important;
}

.phone-shell .transport-screen .choice-stack,
.phone-shell .services-screen .choice-stack,
.phone-shell .zone-list-screen .choice-stack {
  gap: 14px;
}

@media (max-height: 760px) {
  .phone-shell {
    --h5-page-top: 36px;
    --h5-stack-gap: 12px;
  }
}

/* PASS53 display lock: normalize every non-cover/non-summary page to the same
   phone rhythm after many historical skin layers. */
.phone-shell {
  --h5-page-x: 18px;
  --h5-content-top: 46px;
  --h5-content-bottom: 28px;
  --h5-section-gap: 16px;
}

.phone-shell .app-view {
  min-height: calc(100dvh - 58px) !important;
  overflow-x: hidden;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) {
  width: 100%;
  min-height: calc(100dvh - 58px) !important;
  max-width: 100%;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: var(--h5-section-gap) !important;
  padding: var(--h5-content-top) var(--h5-page-x) var(--h5-content-bottom) !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title h2 {
  width: 100%;
  max-width: none !important;
  margin: 0 0 7px !important;
  font-size: 28px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title p {
  width: 100%;
  max-width: 24em !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.phone-shell .overview-screen .overview-image-card,
.phone-shell .route-screen .map-block,
.phone-shell .zone-route-screen .zone-route-map,
.phone-shell .zone-list-screen .directory-card {
  width: 100% !important;
  margin: 0 !important;
}

.phone-shell .overview-screen .overview-image-button,
.phone-shell .route-screen .map-shell,
.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .zone-route-map,
.phone-shell .zone-list-screen .directory-card .map-block,
.phone-shell .zone-list-screen .directory-card .map-shell {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  margin: 0 !important;
}

.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .zone-route-map {
  aspect-ratio: 16 / 11 !important;
}

.phone-shell .route-screen .route-preview,
.phone-shell .zone-route-screen .route-preview {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.phone-shell .overview-screen .overview-next-card,
.phone-shell .overview-screen .action-row,
.phone-shell .route-screen .action-row,
.phone-shell .zone-route-screen .action-row,
.phone-shell .transport-screen .choice-stack,
.phone-shell .zone-list-screen .choice-stack,
.phone-shell .services-screen .choice-stack {
  width: 100% !important;
  margin: 0 !important;
}

.phone-shell .action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px !important;
}

@media (max-height: 760px) {
  .phone-shell {
    --h5-content-top: 34px;
    --h5-section-gap: 12px;
  }

  .phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title h2 {
    font-size: 26px !important;
  }

  .phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title p {
    font-size: 13px !important;
  }
}

/* PASS53 page-role flow: short decision pages are centered; content pages are
   anchored to a stable reading position. */
.phone-shell .screen.mode-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.menu-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.services-screen:not(.home-screen):not(.summary-screen) {
  justify-content: safe center !important;
}

.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.transport-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.service-detail-screen:not(.home-screen):not(.summary-screen) {
  justify-content: flex-start !important;
  padding-top: 52px !important;
}

.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen) {
  padding-top: 42px !important;
}

@supports not (justify-content: safe center) {
  .phone-shell .screen.mode-screen:not(.home-screen):not(.summary-screen),
  .phone-shell .screen.menu-screen:not(.home-screen):not(.summary-screen),
  .phone-shell .screen.services-screen:not(.home-screen):not(.summary-screen) {
    justify-content: center !important;
  }
}

/* A25 boundary system v1. Keep this final block as the display contract. */
.phone-shell {
  width: min(100vw, 480px) !important;
  margin-inline: auto !important;
  --a25-topbar-h: 58px;
  --a25-safe-x: 16px;
  --a25-info-top: 46px;
  --a25-route-top: 42px;
  --a25-bottom: 28px;
  --a25-gap: 16px;
  --a25-choice-gap: 18px;
  --a25-broadcast-top: 18px;
  --h5-page-x: var(--a25-safe-x);
  --h5-content-top: var(--a25-info-top);
  --h5-section-gap: var(--a25-gap);
}

.phone-shell .app-view {
  position: relative;
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
}

.phone-shell .broadcast-layer {
  top: var(--a25-broadcast-top) !important;
  right: var(--a25-safe-x) !important;
}

.phone-shell .broadcast-layer.is-open {
  left: var(--a25-safe-x) !important;
  right: var(--a25-safe-x) !important;
  top: var(--a25-broadcast-top) !important;
}

.phone-shell .screen.mode-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.menu-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.services-screen:not(.home-screen):not(.summary-screen) {
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
  padding: var(--a25-bottom) var(--a25-safe-x) !important;
  justify-content: safe center !important;
  gap: var(--a25-choice-gap) !important;
}

.phone-shell .screen.mode-screen .choice-stack,
.phone-shell .screen.menu-screen .choice-stack,
.phone-shell .screen.services-screen .choice-stack {
  width: 100% !important;
  margin: 0 !important;
  gap: var(--a25-choice-gap) !important;
}

.phone-shell .screen.mode-screen .glass-button,
.phone-shell .screen.menu-screen .glass-button,
.phone-shell .screen.services-screen .service-card,
.phone-shell .screen.transport-screen .option-button,
.phone-shell .screen.zone-list-screen .zone-option {
  min-height: 88px !important;
}

.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.transport-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.service-detail-screen:not(.home-screen):not(.summary-screen) {
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
  padding: var(--a25-info-top) var(--a25-safe-x) var(--a25-bottom) !important;
  justify-content: flex-start !important;
  gap: var(--a25-gap) !important;
}

.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen) {
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
  padding: var(--a25-route-top) var(--a25-safe-x) var(--a25-bottom) !important;
  justify-content: flex-start !important;
  gap: var(--a25-gap) !important;
}

.phone-shell .screen.overview-screen > .screen-title,
.phone-shell .screen.transport-screen > .screen-title,
.phone-shell .screen.zone-list-screen > .screen-title,
.phone-shell .screen.service-detail-screen > .screen-title,
.phone-shell .screen.route-screen > .screen-title,
.phone-shell .screen.zone-route-screen > .screen-title {
  margin: 0 !important;
  padding: 0 !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title h2 {
  font-size: clamp(24px, 7vw, 28px) !important;
  line-height: 1.16 !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) > .screen-title p,
.phone-shell .button-text span,
.phone-shell .route-preview li,
.phone-shell .map-info-card p,
.phone-shell .overview-next-card p {
  font-size: clamp(14px, 3.75vw, 16px) !important;
  line-height: 1.55 !important;
}

.phone-shell .primary-action,
.phone-shell .secondary-action,
.phone-shell .text-action {
  min-height: 46px !important;
  font-size: 15px !important;
}

.phone-shell .route-screen .map-block,
.phone-shell .zone-route-screen .zone-route-map,
.phone-shell .overview-screen .overview-image-card,
.phone-shell .zone-list-screen .directory-card {
  margin: 0 !important;
}

@supports not (justify-content: safe center) {
  .phone-shell .screen.mode-screen,
  .phone-shell .screen.menu-screen,
  .phone-shell .screen.services-screen {
    justify-content: center !important;
  }
}

/* PASS53 iPhone 16 centerbox: one visual rule for every page.
   The page content is centered inside a 393 x 794 CSS-px content box, then
   expands upward/downward. Oversized pages can still scroll normally. */
.phone-shell {
  width: min(100vw, 393px) !important;
  max-width: 393px !important;
  --a25-device-w: 393px;
  --a25-device-h: 852px;
  --a25-topbar-h: 58px;
  --a25-content-h: calc(var(--a25-device-h) - var(--a25-topbar-h));
  --a25-safe-x: 16px;
  --a25-safe-y: 24px;
  --a25-gap: 16px;
  --a25-choice-gap: 18px;
  --h5-page-x: var(--a25-safe-x);
  --h5-content-top: var(--a25-safe-y);
  --h5-section-gap: var(--a25-gap);
}

.phone-shell .app-view {
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) {
  width: 100% !important;
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
  padding: var(--a25-safe-y) var(--a25-safe-x) !important;
  gap: var(--a25-gap) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: safe center !important;
  align-items: stretch !important;
}

.phone-shell .screen.summary-screen {
  width: 100% !important;
  min-height: calc(100dvh - var(--a25-topbar-h)) !important;
  padding-left: var(--a25-safe-x) !important;
  padding-right: var(--a25-safe-x) !important;
}

.phone-shell .screen.mode-screen,
.phone-shell .screen.menu-screen,
.phone-shell .screen.services-screen {
  gap: var(--a25-choice-gap) !important;
}

.phone-shell .screen-title,
.phone-shell .completion-title,
.phone-shell .choice-stack,
.phone-shell .overview-image-card,
.phone-shell .overview-next-card,
.phone-shell .map-block,
.phone-shell .route-preview,
.phone-shell .directory-card,
.phone-shell .action-row,
.phone-shell .text-action {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.phone-shell .broadcast-layer {
  top: 24px !important;
  right: 16px !important;
}

.phone-shell .broadcast-layer.is-open {
  top: 24px !important;
  left: 16px !important;
  right: 16px !important;
}

@supports not (justify-content: safe center) {
  .phone-shell .screen:not(.home-screen):not(.summary-screen) {
    justify-content: center !important;
  }
}

/* A25 specificity seal: overrides older per-page rules with the same or higher
   specificity, so every display page actually uses the iPhone 16 centerbox. */
.phone-shell .screen.mode-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.menu-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.services-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.transport-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.service-detail-screen:not(.home-screen):not(.summary-screen) {
  padding: var(--a25-safe-y) var(--a25-safe-x) !important;
  justify-content: center !important;
}

.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen) {
  gap: 16px !important;
}

/* PASS53 mobile compact: real WeChat/Safari WebView has less vertical room than
   desktop preview. Compress vertical rhythm so users see the next action sooner. */
@media (max-width: 430px) {
  .phone-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    --a25-safe-x: 16px;
    --a25-safe-y: 16px;
    --a25-gap: 12px;
    --a25-choice-gap: 13px;
  }

  .mini-bar {
    min-height: 52px !important;
    padding: 6px 14px !important;
  }

  .bar-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .mini-menu {
    min-width: 54px !important;
    min-height: 38px !important;
  }

  .phone-shell .screen:not(.home-screen):not(.summary-screen) {
    min-height: calc(100dvh - 52px) !important;
    padding: var(--a25-safe-y) var(--a25-safe-x) !important;
    gap: var(--a25-gap) !important;
  }

  .phone-shell .screen.mode-screen .glass-button,
  .phone-shell .screen.menu-screen .glass-button,
  .phone-shell .screen.services-screen .service-card,
  .phone-shell .screen.transport-screen .option-button,
  .phone-shell .screen.zone-list-screen .zone-option {
    min-height: 76px !important;
    padding: 12px 14px !important;
  }

  .phone-shell .button-icon,
  .phone-shell .option-icon,
  .phone-shell .service-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .phone-shell .screen-title h2,
  .phone-shell .completion-title h2 {
    font-size: clamp(24px, 6.6vw, 28px) !important;
    line-height: 1.12 !important;
  }

  .phone-shell .screen-title p,
  .phone-shell .completion-title p,
  .phone-shell .button-text span,
  .phone-shell .option-meta,
  .phone-shell .route-preview li,
  .phone-shell .overview-next-card p {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .phone-shell .overview-screen .overview-image-button,
  .phone-shell .zone-list-screen .directory-card .map-block,
  .phone-shell .zone-list-screen .directory-card .map-shell {
    aspect-ratio: 16 / 8.4 !important;
  }

  .phone-shell .route-screen .map-shell,
  .phone-shell .route-screen .guide-map-shell,
  .phone-shell .zone-route-screen .zone-route-map {
    aspect-ratio: 16 / 8.7 !important;
  }

  .phone-shell .route-preview,
  .phone-shell .overview-next-card,
  .phone-shell .directory-card,
  .phone-shell .summary-card {
    padding: 12px !important;
  }

  .phone-shell .route-preview ol {
    gap: 5px !important;
  }

  .phone-shell .primary-action,
  .phone-shell .secondary-action,
  .phone-shell .text-action {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .phone-shell .action-row {
    gap: 10px !important;
  }

  .phone-shell .summary-screen {
    padding-top: 24px !important;
    padding-bottom: 18px !important;
    gap: 12px !important;
  }

  .phone-shell .summary-card {
    gap: 10px !important;
  }

  .phone-shell .summary-card h3 {
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  .phone-shell .summary-snapshot .guide-map-shell,
  .phone-shell .summary-custom-image {
    min-height: 0 !important;
    aspect-ratio: 16 / 8.4 !important;
  }

  .phone-shell .summary-metrics {
    gap: 8px !important;
  }

  .phone-shell .summary-metrics div {
    padding: 7px 8px !important;
  }

  .phone-shell .summary-step {
    padding-block: 6px !important;
  }

  .phone-shell .zone-list-screen .directory-card {
    padding: 10px !important;
    gap: 8px !important;
  }

  .phone-shell .zone-list-screen .directory-card .map-block,
  .phone-shell .zone-list-screen .directory-card .map-shell {
    aspect-ratio: 16 / 6.7 !important;
  }

  .phone-shell .zone-list-screen .zone-option {
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  .phone-shell .zone-list-screen .choice-stack {
    gap: 10px !important;
  }

  .phone-shell .zone-option .button-text strong {
    font-size: 20px !important;
  }

  .phone-shell .summary-screen .completion-title {
    margin-bottom: 0 !important;
  }

  .phone-shell .summary-screen .completion-title h2 {
    font-size: 28px !important;
  }

  .phone-shell .summary-screen .completion-title p {
    font-size: 13px !important;
  }

  .phone-shell .summary-card {
    padding: 11px !important;
  }

  .phone-shell .summary-snapshot .guide-map-shell,
  .phone-shell .summary-custom-image {
    aspect-ratio: 16 / 7.2 !important;
  }

  .phone-shell .summary-metrics div span,
  .phone-shell .summary-step span {
    font-size: 11px !important;
  }

  .phone-shell .summary-step strong {
    font-size: 14px !important;
  }
}

@media (max-width: 430px) and (max-height: 760px) {
  .phone-shell {
    --a25-safe-y: 12px;
    --a25-gap: 10px;
    --a25-choice-gap: 10px;
  }

  .phone-shell .screen.mode-screen .glass-button,
  .phone-shell .screen.menu-screen .glass-button,
  .phone-shell .screen.services-screen .service-card,
  .phone-shell .screen.transport-screen .option-button,
  .phone-shell .screen.zone-list-screen .zone-option {
    min-height: 68px !important;
  }

  .phone-shell .overview-screen .overview-image-button,
  .phone-shell .route-screen .map-shell,
  .phone-shell .route-screen .guide-map-shell,
  .phone-shell .zone-route-screen .zone-route-map {
    aspect-ratio: 16 / 7.8 !important;
  }
}

/* PASS53 final compact seal: keep dense zone and summary pages usable in
   mobile WebView without forcing users to discover hidden controls. */
@media (max-width: 430px) {
  .phone-shell .summary-screen {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    gap: 8px !important;
  }

  .phone-shell .summary-screen .completion-title h2 {
    font-size: 25px !important;
    line-height: 1.08 !important;
  }

  .phone-shell .summary-screen .completion-title p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .phone-shell .summary-card {
    padding: 9px !important;
    gap: 7px !important;
  }

  .phone-shell .summary-card h3 {
    font-size: 18px !important;
  }

  .phone-shell .summary-snapshot .guide-map-shell,
  .phone-shell .summary-custom-image {
    aspect-ratio: 16 / 5.9 !important;
  }

  .phone-shell .summary-metrics {
    gap: 6px !important;
  }

  .phone-shell .summary-metrics div {
    min-height: 40px !important;
    padding: 5px 6px !important;
  }

  .phone-shell .summary-metrics div span,
  .phone-shell .summary-step span {
    font-size: 10px !important;
  }

  .phone-shell .summary-metrics div strong,
  .phone-shell .summary-step strong {
    font-size: 13px !important;
  }

  .phone-shell .summary-timeline {
    gap: 3px !important;
  }

  .phone-shell .summary-step {
    padding-block: 3px !important;
    gap: 7px !important;
  }

  .phone-shell .summary-actions,
  .phone-shell .summary-more-actions {
    gap: 8px !important;
  }

  .phone-shell .summary-actions .primary-action,
  .phone-shell .summary-actions .secondary-action,
  .phone-shell .summary-more-actions .primary-action,
  .phone-shell .summary-more-actions .secondary-action {
    min-height: 40px !important;
  }

  .phone-shell .zone-list-screen {
    gap: 8px !important;
  }

  .phone-shell .zone-list-screen .directory-card {
    padding: 8px !important;
  }

  .phone-shell .zone-list-screen .directory-card .map-block,
  .phone-shell .zone-list-screen .directory-card .map-shell {
    aspect-ratio: 16 / 5.9 !important;
  }

  .phone-shell .zone-list-screen .zone-option {
    min-height: 62px !important;
    padding: 9px 11px !important;
  }

  .phone-shell .zone-list-screen .choice-stack {
    gap: 8px !important;
  }
}

/* PASS54 UI polish layer: visual overrides only, no flow or data changes. */
:root {
  --p54-bg: #020914;
  --p54-bg-deep: #031224;
  --p54-panel: rgba(7, 26, 49, 0.76);
  --p54-panel-strong: rgba(11, 38, 70, 0.9);
  --p54-panel-soft: rgba(18, 58, 96, 0.5);
  --p54-stroke: rgba(98, 184, 255, 0.26);
  --p54-stroke-hot: rgba(86, 214, 255, 0.56);
  --p54-blue: #2f80ff;
  --p54-cyan: #55e6ff;
  --p54-text: #f4f9ff;
  --p54-muted: rgba(214, 232, 255, 0.68);
  --p54-soft: rgba(214, 232, 255, 0.42);
  --p54-warning: #ffb545;
  --p54-radius: 18px;
  --p54-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
  --p54-glow-blue: 0 0 28px rgba(47, 128, 255, 0.34);
  --p54-glow-cyan: 0 0 26px rgba(85, 230, 255, 0.24);
}

body {
  background:
    radial-gradient(circle at 50% -8%, rgba(47, 128, 255, 0.2), transparent 35%),
    radial-gradient(circle at 8% 26%, rgba(85, 230, 255, 0.12), transparent 32%),
    linear-gradient(155deg, #010712 0%, #06152a 54%, #020814 100%) !important;
  color: var(--p54-text) !important;
  letter-spacing: 0 !important;
}

.phone-shell {
  background:
    linear-gradient(180deg, rgba(9, 31, 58, 0.96), rgba(3, 13, 27, 0.98)) !important;
  border: 1px solid rgba(106, 187, 255, 0.18) !important;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 54px rgba(47, 128, 255, 0.14) !important;
  overflow: hidden !important;
}

.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 10%),
    radial-gradient(circle at 50% 0%, rgba(85, 230, 255, 0.1), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  mix-blend-mode: screen;
  opacity: 0.58;
}

.phone-shell > * {
  position: relative;
  z-index: 1;
}

.mini-bar {
  min-height: 54px !important;
  padding: 12px 16px !important;
  background: rgba(8, 24, 45, 0.76) !important;
  border-bottom: 1px solid rgba(104, 182, 255, 0.18) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.mini-bar strong {
  color: rgba(246, 250, 255, 0.96) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 0 18px rgba(85, 230, 255, 0.16) !important;
}

.bar-icon,
.mini-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(20, 48, 84, 0.72) !important;
  border: 1px solid rgba(139, 204, 255, 0.2) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), 0 0 18px rgba(47, 128, 255, 0.12) !important;
}

.screen {
  padding-inline: 20px !important;
}

.screen::before {
  background:
    linear-gradient(180deg, rgba(4, 14, 29, 0.5), rgba(4, 13, 27, 0.84) 70%, rgba(4, 13, 27, 0.94)),
    linear-gradient(90deg, rgba(2, 9, 20, 0.45), transparent 34%, rgba(2, 9, 20, 0.36)),
    var(--screen-image, none) center / cover no-repeat !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.92) !important;
}

.brand-mark {
  padding-top: 8px !important;
}

.brand-mark .eyebrow,
.screen-kicker,
.detail-eyebrow {
  color: rgba(128, 222, 255, 0.88) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 18px rgba(85, 230, 255, 0.18) !important;
}

.brand-mark h1,
.screen-title h2 {
  color: rgba(249, 252, 255, 0.98) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 0 26px rgba(47, 128, 255, 0.24) !important;
}

.brand-mark h1 {
  font-size: clamp(34px, 8.8vw, 42px) !important;
  line-height: 1.04 !important;
}

.screen-title {
  gap: 7px !important;
}

.screen-title h2 {
  font-size: clamp(25px, 7.2vw, 34px) !important;
  line-height: 1.08 !important;
}

.brand-mark .subtitle,
.screen-title p,
.subtitle,
.helper-copy,
.detail-copy {
  color: var(--p54-muted) !important;
  line-height: 1.6 !important;
}

.home-visual,
.overview-image-card,
.map-block,
.map-shell,
.guide-map-shell,
.summary-custom-image,
.summary-snapshot .map-shell {
  border-radius: var(--p54-radius) !important;
  border: 1px solid rgba(105, 188, 255, 0.24) !important;
  background: rgba(5, 18, 36, 0.7) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 34px rgba(47, 128, 255, 0.14) !important;
  overflow: hidden !important;
}

.home-visual::before,
.overview-image-card::before,
.map-block::before,
.map-shell::before,
.guide-map-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 25%),
    radial-gradient(circle at 20% 0%, rgba(85, 230, 255, 0.12), transparent 42%) !important;
  opacity: 0.8 !important;
}

.home-visual img {
  filter: saturate(1.08) contrast(1.08) brightness(0.95) !important;
}

/* 看区按配置显示的 VR 入口，只覆盖路线主图。 */
.zone-route-map .zone-vr-fab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 62px;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(151, 218, 255, 0.72);
  border-radius: 999px;
  color: #f3fbff;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(55, 162, 255, 0.96), rgba(27, 83, 194, 0.96));
  box-shadow: 0 10px 28px rgba(19, 91, 225, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

.zone-route-map .zone-vr-fab span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.zone-route-map .zone-vr-fab strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.zone-route-map .zone-vr-fab:active {
  transform: scale(0.96);
}

.glass-button,
.option-button,
.transport-option,
.service-card,
.directory-card,
.summary-card,
.route-preview,
.overview-next-card,
.service-detail-card,
.map-info-card,
.detail-panel,
.choice-card,
.info-panel {
  background:
    linear-gradient(180deg, rgba(24, 72, 121, 0.62), rgba(8, 29, 55, 0.82)),
    rgba(8, 27, 51, 0.72) !important;
  border: 1px solid rgba(111, 191, 255, 0.22) !important;
  border-radius: var(--p54-radius) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.26),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 24px rgba(47, 128, 255, 0.1) !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
}

.glass-button::before,
.option-button::before,
.transport-option::before,
.service-card::before,
.directory-card::before,
.summary-card::before,
.route-preview::before {
  background:
    linear-gradient(90deg, rgba(85, 230, 255, 0.72), rgba(47, 128, 255, 0.08), transparent) !important;
  opacity: 0.56 !important;
}

.glass-button strong,
.option-button strong,
.transport-option strong,
.service-card strong,
.directory-card strong,
.summary-card h3,
.route-preview-head strong {
  color: rgba(248, 252, 255, 0.98) !important;
  text-shadow: 0 0 18px rgba(85, 230, 255, 0.12) !important;
}

.glass-button span,
.option-button span,
.transport-option span,
.service-card span,
.directory-card span,
.route-preview-head span,
.summary-card p {
  color: var(--p54-muted) !important;
}

.option-button.is-active,
.transport-option.is-recommended,
.choice-card.is-active {
  border-color: rgba(93, 191, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(47, 128, 255, 0.92), rgba(50, 185, 255, 0.56)),
    rgba(11, 54, 96, 0.9) !important;
  box-shadow:
    0 20px 48px rgba(47, 128, 255, 0.26),
    0 0 34px rgba(85, 230, 255, 0.2) !important;
}

.primary-action,
.summary-actions .primary-action,
.route-screen .primary-action,
.zone-route-screen .primary-action {
  background:
    linear-gradient(180deg, rgba(89, 174, 255, 0.95), rgba(35, 105, 238, 0.96)) !important;
  border: 1px solid rgba(163, 222, 255, 0.35) !important;
  border-radius: 15px !important;
  color: white !important;
  box-shadow:
    0 18px 38px rgba(47, 128, 255, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}

.secondary-action,
.text-action,
.summary-actions .secondary-action,
.summary-more-actions .secondary-action {
  background: rgba(13, 36, 64, 0.82) !important;
  border: 1px solid rgba(118, 195, 255, 0.18) !important;
  border-radius: 15px !important;
  color: rgba(232, 244, 255, 0.92) !important;
}

.icon-badge,
.mode-icon,
.option-icon,
.legend-icon {
  background:
    radial-gradient(circle at 35% 25%, rgba(123, 235, 255, 0.32), transparent 38%),
    linear-gradient(180deg, rgba(45, 123, 220, 0.68), rgba(8, 35, 70, 0.82)) !important;
  border: 1px solid rgba(114, 210, 255, 0.46) !important;
  color: #c9f6ff !important;
  box-shadow:
    0 0 0 4px rgba(55, 159, 255, 0.07),
    0 0 22px rgba(85, 230, 255, 0.22) !important;
}

.warn-card,
.warning-card,
.notice-card {
  background:
    linear-gradient(180deg, rgba(91, 54, 15, 0.72), rgba(40, 28, 18, 0.74)) !important;
  border: 1px solid rgba(255, 181, 69, 0.36) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), 0 0 24px rgba(255, 181, 69, 0.1) !important;
}

.warn-card strong,
.warning-card strong,
.notice-card strong,
.status-warn,
.recommend-tag {
  color: #ffc563 !important;
}

.route-preview {
  padding: 14px !important;
}

.route-preview ol {
  border-left-color: rgba(85, 230, 255, 0.22) !important;
}

.route-preview li i,
.timeline-dot,
.step-index {
  background: linear-gradient(180deg, #55e6ff, #2f80ff) !important;
  color: #031224 !important;
  box-shadow: 0 0 18px rgba(85, 230, 255, 0.28) !important;
}

.guide-route,
.route-screen .guide-route,
.zone-route-screen .guide-route {
  stroke-width: 6.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 0 5px rgba(85, 230, 255, 0.42))
    drop-shadow(0 0 12px rgba(47, 128, 255, 0.22)) !important;
}

.guide-route.is-primary,
.route-screen .guide-route.is-primary,
.zone-route-screen .guide-route.is-primary {
  stroke-width: 8 !important;
  filter:
    drop-shadow(0 0 8px rgba(85, 230, 255, 0.5))
    drop-shadow(0 0 18px rgba(47, 128, 255, 0.28)) !important;
}

.guide-route-glow {
  opacity: 0.2 !important;
  stroke-width: 16 !important;
  filter: blur(2px) !important;
}

.map-label,
.route-label,
.node-label,
.pin-label,
.summary-label {
  color: rgba(250, 253, 255, 0.96) !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(85, 230, 255, 0.14) !important;
  font-weight: 800 !important;
}

.legend,
.legend-card,
.bottom-tip,
.footer-note {
  background: rgba(5, 17, 34, 0.72) !important;
  border: 1px solid rgba(104, 184, 255, 0.18) !important;
  border-radius: 16px !important;
  color: var(--p54-muted) !important;
}

.progress-row span,
.progress-dot,
.indicator-dot {
  background: rgba(98, 184, 255, 0.22) !important;
}

.progress-row span.is-active,
.progress-dot.is-active,
.indicator-dot.is-active {
  background: linear-gradient(90deg, var(--p54-cyan), var(--p54-blue)) !important;
  box-shadow: 0 0 14px rgba(85, 230, 255, 0.3) !important;
}

@media (max-width: 520px) {
  .phone-shell {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .screen {
    padding-inline: 18px !important;
  }
}

/* PASS54B: tighten vertical rhythm for demo-ready mobile pages. */
.phone-shell {
  --h5-page-top: 28px;
  --h5-stack-gap: 14px;
}

.phone-shell .screen:not(.home-screen):not(.summary-screen) {
  padding-top: max(26px, env(safe-area-inset-top)) !important;
  gap: 14px !important;
}

.phone-shell .menu-screen,
.phone-shell .transport-screen,
.phone-shell .overview-screen,
.phone-shell .route-screen,
.phone-shell .zone-route-screen,
.phone-shell .zone-list-screen,
.phone-shell .services-screen,
.phone-shell .service-detail-screen {
  justify-content: flex-start !important;
  align-content: start !important;
}

.phone-shell .screen-title {
  min-height: 0 !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.phone-shell .screen-title h2 {
  font-size: clamp(28px, 7.2vw, 34px) !important;
  line-height: 1.06 !important;
}

.phone-shell .screen-title p {
  font-size: clamp(14px, 3.8vw, 17px) !important;
  line-height: 1.48 !important;
}

.phone-shell .overview-screen .overview-image-card,
.phone-shell .overview-screen > .map-block .map-shell,
.phone-shell .overview-screen > .map-block .guide-map-shell {
  min-height: 0 !important;
}

.phone-shell .overview-image-card {
  margin-top: 2px !important;
}

.phone-shell .transport-screen .choice-stack,
.phone-shell .menu-screen .choice-stack,
.phone-shell .zone-list-screen .choice-stack,
.phone-shell .services-screen .choice-stack {
  gap: 12px !important;
}

.phone-shell .transport-option,
.phone-shell .menu-screen .glass-button,
.phone-shell .zone-option,
.phone-shell .service-card {
  min-height: 74px !important;
}

.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .guide-map-shell,
.phone-shell .route-screen .map-shell,
.phone-shell .zone-route-screen .map-shell {
  min-height: 0 !important;
}

.phone-shell .route-screen .route-preview,
.phone-shell .zone-route-screen .route-preview {
  margin-top: 0 !important;
}

/* PASS54C final display seal: keep the iPhone-width coordinate model from
   PASS53, but stop content-heavy pages from floating in the vertical center. */
.phone-shell {
  --p54-readable-top: 22px;
  --p54-route-top: 20px;
  --p54-readable-gap: 13px;
}

.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.transport-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.service-detail-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.framework-overview:not(.home-screen):not(.summary-screen) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: start !important;
  align-items: stretch !important;
  padding: var(--p54-readable-top) 16px 18px !important;
  gap: var(--p54-readable-gap) !important;
}

.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen) {
  padding-top: var(--p54-route-top) !important;
}

.phone-shell .screen.overview-screen > .screen-title,
.phone-shell .screen.transport-screen > .screen-title,
.phone-shell .screen.route-screen > .screen-title,
.phone-shell .screen.zone-list-screen > .screen-title,
.phone-shell .screen.zone-route-screen > .screen-title,
.phone-shell .screen.service-detail-screen > .screen-title,
.phone-shell .screen.framework-overview > .screen-title {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.phone-shell .screen.overview-screen > .screen-title h2,
.phone-shell .screen.transport-screen > .screen-title h2,
.phone-shell .screen.route-screen > .screen-title h2,
.phone-shell .screen.zone-list-screen > .screen-title h2,
.phone-shell .screen.zone-route-screen > .screen-title h2,
.phone-shell .screen.service-detail-screen > .screen-title h2,
.phone-shell .screen.framework-overview > .screen-title h2 {
  font-size: clamp(24px, 6.8vw, 29px) !important;
  line-height: 1.12 !important;
}

.phone-shell .screen.overview-screen > .screen-title p,
.phone-shell .screen.transport-screen > .screen-title p,
.phone-shell .screen.route-screen > .screen-title p,
.phone-shell .screen.zone-list-screen > .screen-title p,
.phone-shell .screen.zone-route-screen > .screen-title p,
.phone-shell .screen.service-detail-screen > .screen-title p,
.phone-shell .screen.framework-overview > .screen-title p {
  font-size: clamp(13px, 3.55vw, 15px) !important;
  line-height: 1.48 !important;
}

.phone-shell .screen.route-screen > .screen-title,
.phone-shell .screen.zone-route-screen > .screen-title {
  padding-right: 68px !important;
}

.phone-shell .screen.route-screen > .screen-title h2,
.phone-shell .screen.zone-route-screen > .screen-title h2 {
  width: calc(100% - 76px) !important;
  max-width: calc(100% - 76px) !important;
  font-size: clamp(22px, 5.7vw, 25px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

/* PASS54D: presentation polish, CSS-only. Coordinates and flow stay untouched. */
.phone-shell {
  --p54d-ink: #f7fbff;
  --p54d-muted: rgba(218, 235, 255, 0.72);
  --p54d-faint: rgba(218, 235, 255, 0.48);
  --p54d-cyan: #64e8ff;
  --p54d-blue: #3c8cff;
  --p54d-card: rgba(8, 31, 59, 0.76);
  --p54d-card-strong: rgba(12, 49, 88, 0.86);
  --p54d-border: rgba(125, 202, 255, 0.24);
  --p54d-border-hot: rgba(114, 222, 255, 0.42);
  --p54d-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  color: var(--p54d-ink) !important;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.phone-shell::before {
  opacity: 0.42 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 11%),
    radial-gradient(circle at 50% 0%, rgba(100, 232, 255, 0.08), transparent 32%),
    linear-gradient(90deg, rgba(125, 202, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(125, 202, 255, 0.018) 1px, transparent 1px) !important;
  background-size: auto, auto, 32px 32px, 32px 32px !important;
}

.phone-shell .mini-bar {
  min-height: 50px !important;
  padding: 10px 14px !important;
  background:
    linear-gradient(180deg, rgba(17, 44, 75, 0.82), rgba(5, 20, 39, 0.88)) !important;
  border-bottom-color: rgba(125, 202, 255, 0.16) !important;
}

.phone-shell .mini-bar strong {
  font-size: 14px !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.phone-shell .bar-icon,
.phone-shell .mini-menu {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(77, 128, 188, 0.32), rgba(14, 43, 77, 0.58)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

.phone-shell .screen {
  padding-inline: 17px !important;
}

.phone-shell .screen::before {
  filter: saturate(1.04) contrast(1.04) brightness(0.9) !important;
}

.phone-shell .home-screen {
  justify-content: flex-start !important;
  gap: 20px !important;
  padding-top: 94px !important;
  padding-bottom: 30px !important;
}

.phone-shell .brand-mark {
  padding-top: 0 !important;
  gap: 8px !important;
}

.phone-shell .brand-mark .eyebrow,
.phone-shell .screen-kicker,
.phone-shell .detail-eyebrow {
  color: rgba(127, 229, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.phone-shell .brand-mark h1 {
  font-size: clamp(31px, 8vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  width: 100%;
  max-width: none;
  text-align: center;
}

.phone-shell .brand-mark .subtitle {
  font-size: clamp(16px, 4.3vw, 20px) !important;
  font-weight: 680 !important;
  color: rgba(220, 235, 255, 0.66) !important;
}

.phone-shell .home-visual {
  min-height: 390px !important;
  border-radius: 20px !important;
  border-color: rgba(125, 202, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(11, 35, 66, 0.82), rgba(4, 18, 35, 0.92)) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 26px rgba(60, 140, 255, 0.11) !important;
}

.phone-shell .home-visual img {
  filter: saturate(1.02) contrast(1.05) brightness(0.92) !important;
}

.phone-shell .home-actions {
  margin-top: auto !important;
}

.phone-shell .home-actions .glass-button {
  min-height: 92px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
}

.phone-shell .home-actions .glass-button strong {
  font-size: clamp(22px, 6vw, 28px) !important;
}

.phone-shell .home-actions .glass-button span {
  font-size: clamp(14px, 3.8vw, 17px) !important;
}

.phone-shell .home-actions .icon-badge {
  width: 54px !important;
  height: 54px !important;
  border-radius: 15px !important;
}

.phone-shell .screen.overview-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.transport-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-list-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.zone-route-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.service-detail-screen:not(.home-screen):not(.summary-screen),
.phone-shell .screen.framework-overview:not(.home-screen):not(.summary-screen) {
  padding: 18px 16px 18px !important;
  gap: 12px !important;
}

.phone-shell .screen-title h2,
.phone-shell .screen.overview-screen > .screen-title h2,
.phone-shell .screen.transport-screen > .screen-title h2,
.phone-shell .screen.zone-list-screen > .screen-title h2,
.phone-shell .screen.service-detail-screen > .screen-title h2,
.phone-shell .screen.framework-overview > .screen-title h2 {
  font-size: clamp(23px, 6.2vw, 28px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
}

.phone-shell .screen-title p,
.phone-shell .screen.overview-screen > .screen-title p,
.phone-shell .screen.transport-screen > .screen-title p,
.phone-shell .screen.zone-list-screen > .screen-title p,
.phone-shell .screen.service-detail-screen > .screen-title p,
.phone-shell .screen.framework-overview > .screen-title p {
  max-width: 94% !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  color: var(--p54d-muted) !important;
}

.phone-shell .screen.route-screen > .screen-title h2,
.phone-shell .screen.zone-route-screen > .screen-title h2 {
  width: calc(100% - 68px) !important;
  max-width: calc(100% - 68px) !important;
  font-size: clamp(21px, 5.4vw, 24px) !important;
}

.phone-shell .choice-stack {
  gap: 10px !important;
}

.phone-shell .glass-button,
.phone-shell .option-button,
.phone-shell .transport-option,
.phone-shell .service-card,
.phone-shell .directory-card,
.phone-shell .summary-card,
.phone-shell .overview-next-card,
.phone-shell .service-detail-card,
.phone-shell .map-info-card,
.phone-shell .detail-panel,
.phone-shell .choice-card,
.phone-shell .info-panel {
  border-radius: 16px !important;
  border-color: var(--p54d-border) !important;
  background:
    linear-gradient(180deg, rgba(32, 78, 125, 0.54), rgba(7, 27, 52, 0.82)),
    var(--p54d-card) !important;
  box-shadow:
    var(--p54d-shadow),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

.phone-shell .transport-option,
.phone-shell .menu-screen .glass-button,
.phone-shell .zone-option,
.phone-shell .service-card {
  min-height: 68px !important;
  padding: 12px 14px !important;
}

.phone-shell .glass-button strong,
.phone-shell .option-button strong,
.phone-shell .transport-option strong,
.phone-shell .service-card strong,
.phone-shell .directory-card strong,
.phone-shell .summary-card h3,
.phone-shell .route-preview-head strong {
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

.phone-shell .glass-button span,
.phone-shell .option-button span,
.phone-shell .transport-option span,
.phone-shell .service-card span,
.phone-shell .directory-card span,
.phone-shell .route-preview-head span,
.phone-shell .summary-card p {
  color: var(--p54d-muted) !important;
  font-weight: 560 !important;
}

.phone-shell .option-icon,
.phone-shell .icon-badge,
.phone-shell .mode-icon,
.phone-shell .legend-icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(75, 157, 255, 0.5), rgba(7, 45, 91, 0.78)) !important;
  border-color: rgba(133, 219, 255, 0.4) !important;
  box-shadow:
    0 0 0 4px rgba(60, 140, 255, 0.055),
    0 0 16px rgba(100, 232, 255, 0.16) !important;
}

.phone-shell .option-button.is-active,
.phone-shell .transport-option.is-recommended,
.phone-shell .choice-card.is-active {
  background:
    linear-gradient(135deg, rgba(58, 139, 255, 0.88), rgba(35, 154, 218, 0.52)),
    rgba(12, 60, 104, 0.9) !important;
  border-color: var(--p54d-border-hot) !important;
  box-shadow:
    0 18px 40px rgba(31, 119, 255, 0.22),
    0 0 22px rgba(100, 232, 255, 0.15) !important;
}

.phone-shell .home-visual,
.phone-shell .overview-image-card,
.phone-shell .map-block,
.phone-shell .map-shell,
.phone-shell .guide-map-shell,
.phone-shell .summary-custom-image,
.phone-shell .summary-snapshot .map-shell {
  border-radius: 18px !important;
  border-color: rgba(125, 202, 255, 0.22) !important;
  background: rgba(3, 16, 32, 0.78) !important;
  box-shadow:
    0 15px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset !important;
}

.phone-shell .route-screen .map-shell,
.phone-shell .zone-route-screen .map-shell,
.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .guide-map-shell {
  max-height: 285px !important;
}

.phone-shell .route-preview,
.phone-shell .zone-route-preview {
  padding: 13px 14px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(21, 66, 110, 0.72), rgba(5, 25, 49, 0.86)) !important;
}

.phone-shell .route-preview ol {
  gap: 9px !important;
}

.phone-shell .route-preview li {
  font-size: 14px !important;
  line-height: 1.36 !important;
  color: var(--p54d-muted) !important;
}

.phone-shell .route-preview li i,
.phone-shell .timeline-dot,
.phone-shell .step-index {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 13px !important;
  box-shadow: 0 0 14px rgba(100, 232, 255, 0.2) !important;
}

.phone-shell .route-actions,
.phone-shell .summary-actions,
.phone-shell .summary-more-actions {
  gap: 10px !important;
}

.phone-shell .primary-action,
.phone-shell .summary-actions .primary-action,
.phone-shell .route-screen .primary-action,
.phone-shell .zone-route-screen .primary-action,
.phone-shell .secondary-action,
.phone-shell .text-action,
.phone-shell .summary-actions .secondary-action,
.phone-shell .summary-more-actions .secondary-action {
  min-height: 54px !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.phone-shell .primary-action,
.phone-shell .summary-actions .primary-action,
.phone-shell .route-screen .primary-action,
.phone-shell .zone-route-screen .primary-action {
  background:
    linear-gradient(180deg, rgba(86, 169, 255, 0.98), rgba(45, 112, 238, 0.98)) !important;
  box-shadow:
    0 15px 34px rgba(45, 112, 238, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.2) inset !important;
}

.phone-shell .secondary-action,
.phone-shell .text-action,
.phone-shell .summary-actions .secondary-action,
.phone-shell .summary-more-actions .secondary-action {
  background: rgba(8, 28, 52, 0.82) !important;
  border-color: rgba(125, 202, 255, 0.2) !important;
}

.phone-shell .guide-route,
.phone-shell .route-screen .guide-route,
.phone-shell .zone-route-screen .guide-route {
  stroke-width: 5.5 !important;
  filter:
    drop-shadow(0 0 4px rgba(100, 232, 255, 0.32))
    drop-shadow(0 0 10px rgba(60, 140, 255, 0.18)) !important;
}

.phone-shell .guide-route.is-primary,
.phone-shell .route-screen .guide-route.is-primary,
.phone-shell .zone-route-screen .guide-route.is-primary {
  stroke-width: 7 !important;
  filter:
    drop-shadow(0 0 5px rgba(100, 232, 255, 0.42))
    drop-shadow(0 0 14px rgba(60, 140, 255, 0.24)) !important;
}

.phone-shell .guide-route-glow {
  opacity: 0.14 !important;
  stroke-width: 13 !important;
}

.phone-shell .map-label,
.phone-shell .route-label,
.phone-shell .node-label,
.phone-shell .pin-label,
.phone-shell .summary-label {
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.66),
    0 0 12px rgba(100, 232, 255, 0.11) !important;
}

.phone-shell .legend,
.phone-shell .legend-card,
.phone-shell .bottom-tip,
.phone-shell .footer-note {
  border-radius: 14px !important;
  background: rgba(4, 17, 34, 0.72) !important;
}

/* PASS54E: route map cards use the locked base-map aspect ratio. */
.phone-shell .route-screen .map-block,
.phone-shell .zone-route-screen .map-block {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell .route-screen .map-shell,
.phone-shell .zone-route-screen .map-shell,
.phone-shell .route-screen .guide-map-shell,
.phone-shell .zone-route-screen .guide-map-shell,
.phone-shell .zone-route-screen .zone-route-map {
  aspect-ratio: 1672 / 941 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html,
body {
  min-height: 100%;
  min-height: 100dvh;
}

.app-shell,
.screen {
  min-height: 100svh;
  min-height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }

  body,
  .app-shell,
  .screen {
    min-height: -webkit-fill-available;
  }
}

/* Pass 56: keep the home hero stable on phones. The page background is a clean
   dark tech surface; the venue photo only lives inside the hero card. */
.home-screen {
  --screen-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: stretch !important;
}

.home-screen::before {
  background:
    radial-gradient(circle at 22% 8%, rgba(63, 165, 255, 0.16), transparent 30%),
    radial-gradient(circle at 80% 14%, rgba(60, 234, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(5, 19, 42, 0.98) 0%, rgba(3, 13, 29, 0.98) 48%, rgba(1, 7, 18, 1) 100%) !important;
}

.home-visual {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: clamp(280px, 44dvh, 390px) !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(125, 202, 255, 0.2) !important;
  background: linear-gradient(180deg, rgba(11, 35, 66, 0.82), rgba(4, 18, 35, 0.92)) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 26px rgba(60, 140, 255, 0.11) !important;
}

.home-actions {
  position: relative !important;
  margin-top: 0 !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
}

.phone-shell .home-screen {
  padding-top: max(34px, env(safe-area-inset-top)) !important;
  padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  gap: 16px !important;
}

.phone-shell .home-visual {
  height: clamp(260px, 41dvh, 370px) !important;
  min-height: 0 !important;
  max-height: 370px !important;
}

.phone-shell .home-actions {
  margin-top: 0 !important;
}

/* PASS56: bilingual H5 surface, dual summary maps, and stronger live broadcast. */
.bi-text {
  display: inline-flex;
  flex-direction: column;
  align-items: inherit;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  line-height: 1.06;
  letter-spacing: 0 !important;
  vertical-align: middle;
}

.bi-cn,
.bi-en {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bi-cn {
  color: inherit;
}

.bi-en {
  color: rgba(206, 229, 255, 0.68);
  font-family: Inter, Arial, sans-serif;
  font-size: 0.56em;
  font-weight: 620;
  line-height: 1.08;
}

.inline-bi {
  display: inline-flex;
  vertical-align: baseline;
}

.inline-bi .bi-en {
  font-size: 0.62em;
}

.topbar-bi {
  align-items: center;
  text-align: center;
}

.mini-bar strong .bi-cn {
  font-size: 18px;
}

.mini-bar strong .bi-en {
  font-size: 10px;
  color: rgba(211, 226, 244, 0.62);
}

.hero-bi .bi-en {
  font-size: 0.38em;
  color: rgba(202, 225, 250, 0.72);
}

.compact-bi .bi-en {
  font-size: 0.7em;
}

.brand-mark,
.screen-title,
.completion-title {
  text-align: center;
}

.screen-title h2 .bi-text,
.completion-title h2 .bi-text,
.brand-mark h1 .bi-text {
  align-items: center;
}

.screen-title p .bi-text,
.completion-title p .bi-text,
.subtitle .bi-text {
  align-items: center;
}

.phone-shell .button-text {
  min-width: 0;
}

.phone-shell .button-text strong,
.phone-shell .button-text > span,
.phone-shell .service-card div,
.phone-shell .route-preview li span,
.phone-shell .summary-step div {
  min-width: 0;
}

.phone-shell .button-text strong .bi-text,
.phone-shell .button-text > span .bi-text,
.phone-shell .service-card .bi-text,
.phone-shell .route-preview .bi-text,
.phone-shell .summary-step .bi-text {
  align-items: flex-start;
  text-align: left;
}

.phone-shell .transport-option,
.phone-shell .zone-option,
.phone-shell .service-card,
.phone-shell .glass-button {
  min-height: 98px !important;
}

.phone-shell .transport-option .button-text strong,
.phone-shell .zone-option .button-text strong,
.phone-shell .service-card strong,
.phone-shell .glass-button .button-text strong {
  font-size: clamp(17px, 4.7vw, 21px) !important;
}

.phone-shell .transport-option .button-text > span,
.phone-shell .zone-option .button-text > span,
.phone-shell .service-card span,
.phone-shell .glass-button .button-text > span {
  font-size: clamp(12px, 3.35vw, 14px) !important;
}

.recommend-tag {
  display: inline-flex !important;
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(56, 214, 255, 0.14);
  color: #8feaff;
  font-size: 10px !important;
  font-style: normal;
  vertical-align: middle;
}

.summary-snapshot-pair {
  display: grid;
  gap: 10px;
}

.summary-snapshot {
  gap: 8px !important;
}

.summary-snapshot-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.summary-snapshot-head strong .bi-text,
.summary-snapshot-head span .bi-text {
  align-items: flex-start;
}

.summary-snapshot-map {
  min-height: 0 !important;
}

.summary-snapshot-pair .summary-snapshot .summary-snapshot-map {
  height: clamp(122px, 31vw, 156px) !important;
}

.summary-snapshot-zone .summary-zone-route-map {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.summary-screen .summary-card {
  gap: 10px !important;
}

.summary-screen .summary-metrics {
  gap: 8px !important;
}

.summary-metrics .bi-en,
.summary-step .bi-en {
  color: rgba(204, 224, 247, 0.58);
}

.summary-actions .bi-text,
.summary-more-actions .bi-text,
.route-screen .action-row .bi-text,
.zone-route-screen .action-row .bi-text {
  align-items: center;
  text-align: center;
}

.broadcast-layer.is-emphasis {
  width: min(340px, calc(100% - 32px)) !important;
  right: 16px !important;
}

.broadcast-ticker.is-emphasis {
  width: 100% !important;
  min-height: 86px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  justify-content: flex-start !important;
  background:
    linear-gradient(135deg, rgba(255, 184, 72, 0.26), rgba(47, 128, 255, 0.24)),
    rgba(7, 22, 43, 0.96) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 214, 130, 0.28) inset,
    0 0 30px rgba(255, 184, 72, 0.18) !important;
}

.ticker-viewport {
  min-width: 0;
}

.ticker-kicker {
  display: none;
}

.broadcast-ticker.is-emphasis .ticker-kicker {
  display: block;
  margin-bottom: 5px;
  color: #ffd071;
  font-size: 12px;
  font-weight: 900;
}

.broadcast-ticker.is-emphasis .ticker-text {
  position: static !important;
  display: block !important;
  width: auto !important;
  white-space: normal !important;
  animation: none !important;
  color: #fff;
  font-size: 15px !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
}

.broadcast-ticker.is-emphasis .ticker-text .bi-text {
  align-items: flex-start;
}

.broadcast-ticker.is-emphasis .ticker-text .bi-en {
  font-size: 11px;
  color: rgba(255, 232, 180, 0.74);
}

.broadcast-item.is-latest {
  border-color: rgba(255, 206, 104, 0.36) !important;
  background:
    linear-gradient(135deg, rgba(255, 197, 86, 0.12), rgba(47, 128, 255, 0.08)),
    rgba(8, 28, 54, 0.86) !important;
}

.broadcast-priority-tag {
  display: inline-flex;
  width: max-content;
  margin: 6px 0 2px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 198, 89, 0.14);
  color: #ffd071;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

html,
body {
  overflow-x: hidden !important;
}

.phone-shell,
.app-view,
.screen {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.phone-shell {
  width: min(100%, 430px) !important;
}

.phone-shell .summary-screen {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.phone-shell .completion-title,
.phone-shell .summary-card,
.phone-shell .summary-actions,
.phone-shell .summary-more-actions {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.phone-shell .completion-title h2 {
  max-width: 100% !important;
  font-size: clamp(24px, 6.4vw, 30px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

.phone-shell .completion-title p {
  max-width: 100% !important;
}

/* PASS56 mobile completion card: bilingual snapshot headers need room to read. */
.phone-shell .summary-snapshot-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-content: stretch !important;
  gap: 4px !important;
}

.phone-shell .summary-snapshot-head strong,
.phone-shell .summary-snapshot-head span {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.phone-shell .summary-snapshot-head strong .bi-text,
.phone-shell .summary-snapshot-head span .bi-text {
  width: 100%;
  max-width: 100%;
}

.phone-shell .summary-snapshot-head span {
  color: rgba(204, 224, 247, 0.68) !important;
}

/* PASS56 urgent broadcast: keep the enlarged subtitle visible in the viewport. */
.phone-shell .broadcast-layer.is-emphasis,
.phone-shell .broadcast-layer.is-open.is-emphasis {
  position: fixed !important;
  top: 82px !important;
  left: 50% !important;
  right: auto !important;
  z-index: 80 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
}

.phone-shell .broadcast-ticker.is-emphasis {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 92px !important;
  padding: 12px 14px !important;
  opacity: 1 !important;
}

.phone-shell .broadcast-ticker.is-emphasis .speaker-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
}

.phone-shell .broadcast-ticker.is-emphasis .speaker-icon .app-icon {
  width: 18px !important;
  height: 18px !important;
}

.phone-shell .broadcast-ticker.is-emphasis .ticker-viewport {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.phone-shell .broadcast-ticker.is-emphasis .ticker-kicker,
.phone-shell .broadcast-ticker.is-emphasis .ticker-text {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

/* PASS56 language toggle: show one language at a time to keep the H5 clean. */
.bi-text.single-lang {
  display: inline-flex;
  gap: 0 !important;
  line-height: 1.12;
}

.bi-text.single-lang .bi-cn {
  overflow-wrap: normal;
  word-break: normal;
}

.bi-text.single-lang.is-en .bi-cn {
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0 !important;
}

.phone-shell .home-screen {
  position: relative;
}

.language-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 104px;
  height: 36px;
  padding: 4px;
  border: 1px solid rgba(139, 220, 255, 0.34);
  border-radius: 999px;
  background: rgba(3, 16, 30, 0.62);
  color: rgba(220, 236, 255, 0.72);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.24);
}

.language-toggle i {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(56, 214, 255, 0.95), rgba(47, 128, 255, 0.94));
  box-shadow: 0 8px 18px rgba(47, 128, 255, 0.32);
  transition: transform 0.18s ease;
}

.language-toggle.is-en i {
  transform: translateX(calc(100% + 4px));
}

.language-option {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.language-toggle.is-zh .language-option-zh,
.language-toggle.is-en .language-option-en {
  color: #ffffff;
}

.language-toggle.is-zh .language-option-en,
.language-toggle.is-en .language-option-zh {
  color: rgba(206, 229, 255, 0.66);
}

.phone-shell .transport-option,
.phone-shell .zone-option,
.phone-shell .service-card,
.phone-shell .glass-button {
  min-height: 78px !important;
}

.phone-shell .mode-screen .service-button {
  grid-template-columns: minmax(0, 1fr) auto;
}

.phone-shell .mode-screen .service-button-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.phone-shell .mode-screen .service-button-main .button-text {
  flex: 1 1 auto;
  min-width: 0;
}

.phone-shell .mode-screen .service-button .button-arrow {
  justify-self: end;
}

/* Keep the service-card arrow in its own non-wrapping column. */
.phone-shell .services-screen .service-card {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.phone-shell .services-screen .service-card .button-arrow {
  white-space: nowrap;
  justify-self: end;
}

.phone-shell .home-actions .glass-button {
  min-height: 76px !important;
}

.phone-shell .transport-option .button-text strong,
.phone-shell .zone-option .button-text strong,
.phone-shell .service-card strong,
.phone-shell .glass-button .button-text strong {
  font-size: clamp(18px, 5vw, 22px) !important;
}

.phone-shell .transport-option .button-text > span,
.phone-shell .zone-option .button-text > span,
.phone-shell .service-card span,
.phone-shell .glass-button .button-text > span {
  font-size: clamp(13px, 3.55vw, 15px) !important;
  line-height: 1.32 !important;
}

.phone-shell .summary-screen .summary-card {
  gap: 9px !important;
}

.phone-shell .summary-step strong,
.phone-shell .summary-step span,
.phone-shell .summary-metrics div span,
.phone-shell .summary-metrics div strong {
  line-height: 1.22 !important;
}

.home-screen ~ .broadcast-layer,
.mode-screen ~ .broadcast-layer,
.menu-screen ~ .broadcast-layer,
.services-screen ~ .broadcast-layer,
.overview-screen ~ .broadcast-layer,
.transport-screen ~ .broadcast-layer,
.zone-list-screen ~ .broadcast-layer,
.service-detail-screen ~ .broadcast-layer {
  display: none !important;
  pointer-events: none !important;
}

/* PASS56 phone summary image-first layout: let the page scroll, keep maps readable. */
.phone-shell .summary-screen {
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-height: auto !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  overflow: visible !important;
}

.phone-shell .summary-screen .completion-title {
  margin-bottom: 4px !important;
}

.phone-shell .summary-screen .summary-card {
  gap: 14px !important;
  overflow: visible !important;
}

.phone-shell .summary-snapshot-pair {
  gap: 16px !important;
}

.phone-shell .summary-snapshot {
  gap: 10px !important;
}

.phone-shell .summary-snapshot-pair .summary-snapshot .summary-snapshot-map,
.phone-shell .summary-snapshot-map {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.phone-shell .summary-snapshot .map-block {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.phone-shell .summary-snapshot .map-shell,
.phone-shell .summary-snapshot .guide-map-shell,
.phone-shell .summary-custom-image,
.phone-shell .summary-zone-route-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

.phone-shell .summary-snapshot .guide-map-shell img,
.phone-shell .summary-custom-image,
.phone-shell .summary-zone-route-map img {
  object-fit: contain;
  opacity: 1 !important;
}

.phone-shell .summary-snapshot-zone .summary-zone-route-map {
  background: rgba(2, 10, 24, 0.78) !important;
}

.phone-shell .summary-metrics {
  margin-top: 2px !important;
}

.phone-shell .summary-timeline {
  margin-top: 2px !important;
  gap: 10px !important;
}

/* PASS56 v6: close mobile WebView horizontal overflow on the completion page. */
@media (max-width: 520px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .phone-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.phone-shell:has(.summary-screen) {
  width: min(100vw, 430px) !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.phone-shell:has(.summary-screen) .app-view,
.phone-shell:has(.summary-screen) .screen {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.phone-shell .screen.summary-screen {
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.phone-shell .screen.summary-screen > * {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.phone-shell .summary-screen .summary-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.phone-shell .summary-screen .summary-card > *,
.phone-shell .summary-head,
.phone-shell .summary-snapshot-pair,
.phone-shell .summary-snapshot,
.phone-shell .summary-snapshot-map,
.phone-shell .summary-metrics,
.phone-shell .summary-timeline {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.phone-shell .summary-snapshot-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.phone-shell .summary-snapshot-map {
  display: block !important;
  min-height: clamp(176px, 54vw, 244px) !important;
}

.phone-shell .summary-snapshot .map-shell,
.phone-shell .summary-snapshot .guide-map-shell,
.phone-shell .summary-custom-image,
.phone-shell .summary-zone-route-map,
.phone-shell .summary-zone-route-map img {
  display: block !important;
  max-width: 100% !important;
}

.phone-shell .summary-actions,
.phone-shell .summary-more-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

/* PASS57: mobile WebView completion-page width and dual-image layout lock. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.phone-shell {
  width: min(100%, 430px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.phone-shell .app-view,
.phone-shell .screen,
.phone-shell .screen::before {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.phone-shell:has(.summary-screen) {
  width: min(100%, 430px) !important;
  max-width: 100% !important;
}

.phone-shell .screen.summary-screen {
  min-height: calc(100dvh - 56px) !important;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

@supports (padding-left: max(0px)) {
  .phone-shell .screen.summary-screen {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
}

.phone-shell .summary-screen .completion-title,
.phone-shell .summary-screen .summary-card,
.phone-shell .summary-screen .summary-actions,
.phone-shell .summary-screen .summary-more-actions {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
}

.phone-shell .summary-screen .summary-card {
  padding: 14px !important;
  overflow: visible !important;
}

.phone-shell .summary-screen .summary-head,
.phone-shell .summary-screen .summary-snapshot-pair,
.phone-shell .summary-screen .summary-snapshot,
.phone-shell .summary-screen .summary-snapshot-map,
.phone-shell .summary-screen .summary-metrics,
.phone-shell .summary-screen .summary-timeline {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow-wrap: anywhere !important;
}

.phone-shell .summary-screen .summary-snapshot-pair {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

.phone-shell .summary-screen .summary-snapshot-map {
  aspect-ratio: 16 / 9 !important;
  min-height: clamp(188px, 56vw, 252px) !important;
  overflow: hidden !important;
}

.phone-shell .summary-screen .summary-snapshot .map-block,
.phone-shell .summary-screen .summary-snapshot .map-shell,
.phone-shell .summary-screen .summary-snapshot .guide-map-shell,
.phone-shell .summary-screen .summary-custom-image,
.phone-shell .summary-screen .summary-zone-route-map,
.phone-shell .summary-screen .summary-zone-route-map img {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
}

.phone-shell .summary-screen .summary-zone-route-map {
  display: block !important;
  aspect-ratio: 16 / 9 !important;
}

.phone-shell .summary-screen .summary-snapshot .map-shell img,
.phone-shell .summary-screen .summary-snapshot .guide-map-shell img,
.phone-shell .summary-screen .summary-custom-image,
.phone-shell .summary-screen .summary-zone-route-map img {
  object-fit: contain;
  object-position: center center;
}

.phone-shell .summary-screen .summary-snapshot .guide-map-shell img,
.phone-shell .summary-screen .summary-custom-image,
.phone-shell .summary-screen .summary-zone-route-map img {
  transform: none;
}

.phone-shell .summary-screen .summary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.phone-shell .summary-screen .summary-actions,
.phone-shell .summary-screen .summary-more-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.phone-shell .summary-screen .primary-action,
.phone-shell .summary-screen .secondary-action {
  min-width: 0 !important;
  white-space: normal !important;
}

@media (max-width: 520px) {
  body {
    display: block !important;
  }

  .phone-shell,
  .phone-shell:has(.summary-screen) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 360px) {
  .phone-shell .screen.summary-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .phone-shell .summary-screen .summary-metrics,
  .phone-shell .summary-screen .summary-actions,
  .phone-shell .summary-screen .summary-more-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-07-23: keep mobile H5 full-width, while desktop keeps the phone preview width. */
@media (max-width: 719px) {
  body {
    display: block !important;
    padding: 0 !important;
  }

  .phone-shell,
  .phone-shell:has(.summary-screen) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 720px) {
  body {
    display: grid !important;
    place-items: center !important;
    padding: 28px !important;
  }

  .phone-shell,
  .phone-shell:has(.summary-screen) {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
}

/* 除首页外统一采用指挥端图片框；保留图片内联的 X/Y、缩放和适配模式。 */
.overview-image-card,
.map-shell,
.guide-map-shell,
.uploaded-map-shell,
.zone-route-map,
.service-detail-image,
.summary-custom-image {
  border: 1px solid rgba(105, 188, 255, 0.24) !important;
  border-radius: 18px !important;
  background: rgba(5, 18, 36, 0.7) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 0 34px rgba(47, 128, 255, 0.14) !important;
  overflow: hidden !important;
}

.overview-image-button img,
.map-shell img,
.guide-map-shell img,
.uploaded-map-shell img,
.zone-route-map img,
.service-detail-image img,
.summary-custom-image {
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
}

.overview-image-button {
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}

/* 总览图与路线页共用 1672 x 941 底图，容器比例必须一致，避免 16:10 留黑边。 */
.phone-shell .overview-screen .overview-image-button {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1672 / 941 !important;
}

.phone-shell .overview-screen .overview-image-button img {
  display: block;
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1672 / 941 !important;
}

/* 看区总览只保留图片自身边界，去掉 directory-card 的第二层外框。 */
.phone-shell .zone-list-screen .directory-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 完成页沿用编辑器中的适配、位置和缩放，并取消会降低地图辨识度的调色。 */
.phone-shell .summary-screen .summary-snapshot img {
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto;
}

/* 图片框只负责裁切和边界；首页以外不再叠加灰暗模板或路线遮罩。 */
.phone-shell .map-shell::after,
.phone-shell .guide-map-shell::after,
.phone-shell .zone-route-map::after,
.phone-shell .overview-screen > .map-block .map-shell::after,
.phone-shell .overview-screen > .map-block .guide-map-shell::after {
  display: none !important;
}

/* VR 看台：沿用选择模式卡片，只用环形视野光带强调独立沉浸入口。 */
.phone-shell .mode-screen .vr-button {
  position: relative;
  overflow: hidden;
  border-color: rgba(76, 206, 255, 0.5) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(59, 214, 255, 0.22), transparent 34%),
    linear-gradient(115deg, rgba(29, 111, 165, 0.92), rgba(16, 57, 103, 0.94)) !important;
}

.phone-shell .mode-screen .vr-button::after {
  content: "360°";
  position: absolute;
  right: 42px;
  top: 10px;
  color: rgba(177, 233, 255, 0.34);
  font: 900 26px/1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.phone-shell .mode-screen .vr-button .icon-badge,
.phone-shell .mode-screen .vr-button .button-text,
.phone-shell .mode-screen .vr-button .button-arrow {
  position: relative;
  z-index: 1;
}

.phone-shell .mode-screen .vr-button .icon-badge {
  box-shadow: 0 0 26px rgba(53, 214, 255, 0.36);
}

@media (prefers-reduced-motion: no-preference) {
  .phone-shell .mode-screen .vr-button .icon-badge {
    animation: vr-entry-pulse 3.2s ease-in-out infinite;
  }
}

@keyframes vr-entry-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(53, 214, 255, 0.24); }
  50% { box-shadow: 0 0 32px rgba(53, 214, 255, 0.52); }
}

/* 顶栏广播入口必须横向显示，覆盖最终皮肤把按钮压成 42px 方块的规则。 */
.phone-shell .mini-menu {
  grid-column: 3 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 64px !important;
  padding: 7px 8px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.phone-shell .bar-icon {
  grid-column: 1 !important;
  justify-self: start !important;
}

/* 两侧按钮按真实文案自适应；中间标题/广播框占满按钮间距，仅左右各留 1px。 */
.phone-shell .mini-bar {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  column-gap: 1px !important;
}

.phone-shell .mini-title {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-column: 2 !important;
  width: 100% !important;
  height: 42px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  text-align: center !important;
}

.phone-shell .mini-title > strong,
.phone-shell .mini-title .topbar-bi {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.phone-shell .mini-title .bi-cn {
  width: 100% !important;
  font-size: var(--topbar-title-font-size, 18px) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.phone-shell .mini-title.is-english .bi-cn {
  line-height: 1.16 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
}