:root {
  --bg: #09020f;
  --panel: rgba(30, 8, 49, .76);
  --panel-strong: rgba(24, 5, 40, .92);
  --purple: #6f24c7;
  --purple-light: #b05cff;
  --gold: #f7d36f;
  --gold-deep: #bd7610;
  --text: #fff8e8;
  --muted: #c9b8d2;
  --line: rgba(255, 216, 116, .22);
  --success: #62e9a6;
  --danger: #ff8f9f;
  --shadow: 0 24px 70px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% -12%, rgba(116, 31, 183, .55), transparent 36%),
    radial-gradient(circle at 5% 48%, rgba(138, 65, 210, .20), transparent 30%),
    radial-gradient(circle at 97% 72%, rgba(238, 173, 42, .12), transparent 28%),
    linear-gradient(180deg, #10031c 0%, #08010e 58%, #0b0211 100%);
  overflow-x: hidden;
}
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  z-index: -2;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .22;
  pointer-events: none;
}
.ambient-a { left: -280px; top: 10vh; background: #7d2fde; }
.ambient-b { right: -300px; top: 45vh; background: #d89b1c; opacity: .13; }
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.page-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 24px 0 40px;
}
.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(47, 12, 73, .83), rgba(17, 4, 29, .82));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header {
  min-height: 112px;
  border-radius: 24px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto -15% -130px 35%;
  height: 180px;
  background: radial-gradient(ellipse, rgba(167, 74, 246, .24), transparent 65%);
  pointer-events: none;
}
.official-tag {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-1px);
  padding: 7px 13px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 0 0 12px 12px;
  color: #2c1600;
  background: linear-gradient(135deg, #fff0a8, #d38c1c);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 7px 20px rgba(206, 140, 19, .24);
}
.shield-mini svg { width: 15px; height: 15px; display: block; }
.shield-mini path:first-child { fill: rgba(62, 28, 0, .12); stroke: #452500; stroke-width: 1.6; }
.shield-mini path:last-child { fill: none; stroke: #452500; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-block { grid-column: 1 / 3; display: flex; align-items: center; gap: 18px; padding-top: 12px; }
.brand-logo { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); flex: none; }
.brand-copy h1 { margin: 1px 0 5px; font-size: clamp(25px, 3vw, 38px); line-height: 1.05; letter-spacing: .04em; }
.brand-copy p { margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--gold) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .18em; }
.bookmark-btn {
  z-index: 1;
  min-width: 114px;
  height: 44px;
  border: 1px solid rgba(255,218,115,.36);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff2c9;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  transition: .2s ease;
}
.bookmark-btn:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(247,211,111,.1); }
.bookmark-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.poster-panel { margin-top: 18px; border-radius: 25px; overflow: hidden; position: relative; aspect-ratio: 1536 / 614; }
.poster-panel picture, .poster-panel img { display: block; width: 100%; height: 100%; }
.poster-panel img { object-fit: cover; }
.poster-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,229,150,.15), inset 0 -45px 70px rgba(0,0,0,.12);
  pointer-events: none;
}
.poster-shine {
  position: absolute;
  width: 30%;
  height: 160%;
  top: -30%;
  left: -45%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  animation: shine 7s ease-in-out infinite 1.8s;
  pointer-events: none;
}
@keyframes shine { 0%,60% { left: -45%; } 82%,100% { left: 125%; } }

.route-section { margin-top: 18px; border-radius: 25px; padding: 28px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading h2 { margin: 4px 0 7px; font-size: 27px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.scan-state { min-width: 170px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #d7c7df; background: rgba(0,0,0,.16); font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.scan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(247,211,111,.55); animation: pulse 1.6s infinite; }
.scan-state.done .scan-dot { background: var(--success); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(247,211,111,0); } 100% { box-shadow: 0 0 0 0 rgba(247,211,111,0); } }

.smart-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 17px;
  border: 1px solid rgba(255,218,113,.28);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(249,201,71,.14), transparent 26%),
    linear-gradient(135deg, rgba(69,15,103,.95), rgba(19,4,31,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.smart-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #382000; background: linear-gradient(135deg, #fff1a5, #d78f1d); box-shadow: 0 10px 24px rgba(207,139,23,.26); }
.smart-icon svg { width: 26px; height: 26px; fill: currentColor; }
.smart-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.smart-label { color: var(--gold); font-size: 12px; font-weight: 800; }
.smart-info strong { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-info small { color: var(--muted); }
.primary-enter {
  height: 48px;
  padding: 0 19px 0 22px;
  border: 0;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2e1700;
  background: linear-gradient(135deg, #fff1a1, #d48916);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 27px rgba(210,139,19,.22);
  transition: .2s ease;
}
.primary-enter:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-enter:disabled { opacity: .5; cursor: wait; }
.primary-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.routes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 17px; }
.route-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background: rgba(7,1,13,.30);
  transition: .22s ease;
}
.route-card:hover { transform: translateY(-2px); border-color: rgba(255,219,113,.32); background: rgba(52,14,77,.55); }
.route-card.fastest { border-color: rgba(255,215,100,.56); background: linear-gradient(135deg, rgba(101,36,143,.66), rgba(24,5,38,.7)); box-shadow: inset 0 0 25px rgba(249,205,72,.05); }
.route-number { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #f8dc8c; border: 1px solid rgba(247,211,111,.30); background: linear-gradient(145deg, rgba(247,211,111,.13), rgba(255,255,255,.02)); font-weight: 900; }
.route-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.route-copy strong { font-size: 15px; }
.route-status { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.route-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8f7c99; }
.route-card.available .route-status { color: var(--success); }
.route-card.available .route-status::before { background: var(--success); box-shadow: 0 0 9px rgba(98,233,166,.55); }
.route-card.unavailable .route-status { color: var(--danger); }
.route-card.unavailable .route-status::before { background: var(--danger); }
.route-enter {
  height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255,217,111,.28);
  border-radius: 12px;
  color: #ffeaa9;
  background: rgba(255,255,255,.04);
  font-weight: 750;
  cursor: pointer;
  transition: .18s ease;
}
.route-enter:hover { border-color: var(--gold); background: rgba(247,211,111,.12); }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.info-card { border-radius: 21px; padding: 20px; display: flex; gap: 15px; align-items: flex-start; }
.info-icon { width: 43px; height: 43px; border-radius: 14px; flex: none; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(255,219,111,.23); background: rgba(247,211,111,.07); }
.info-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-card h3 { margin: 1px 0 7px; font-size: 16px; }
.info-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.site-footer { padding: 28px 6px 8px; text-align: center; color: #8f7d99; font-size: 12px; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 7px; color: #d7c5df; font-weight: 750; }
.footer-brand img { width: 25px; height: 25px; object-fit: contain; }
.site-footer p { margin: 8px 0 0; }
.copyright { color: #685971; }

.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translate(-50%, 18px);
  padding: 11px 16px;
  border: 1px solid rgba(255,221,119,.30);
  border-radius: 13px;
  color: #fff2c4;
  background: rgba(24,5,37,.95);
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 22px, 620px); padding-top: 11px; }
  .site-header { min-height: auto; grid-template-columns: 1fr auto; border-radius: 20px; padding: 17px 15px 16px; gap: 10px; }
  .official-tag { left: 15px; font-size: 10px; padding: 6px 10px; }
  .brand-block { grid-column: 1 / 2; gap: 10px; padding-top: 19px; }
  .brand-logo { width: 58px; height: 58px; }
  .brand-copy h1 { font-size: 22px; margin-top: 2px; }
  .brand-copy p { font-size: 11px; max-width: 220px; line-height: 1.45; }
  .eyebrow { font-size: 8px !important; }
  .bookmark-btn { min-width: 44px; width: 44px; padding: 0; }
  .bookmark-btn span { display: none; }
  .poster-panel { margin-top: 11px; border-radius: 17px; }
  .route-section { margin-top: 11px; padding: 18px 14px; border-radius: 20px; }
  .section-heading { align-items: flex-start; margin-bottom: 15px; }
  .section-heading h2 { font-size: 23px; }
  .section-heading p { font-size: 12px; line-height: 1.6; }
  .scan-state { min-width: 0; padding: 9px; }
  .scan-state span:last-child { display: none; }
  .smart-card { grid-template-columns: auto 1fr; padding: 13px; gap: 11px; }
  .smart-icon { width: 45px; height: 45px; border-radius: 14px; }
  .smart-info strong { font-size: 16px; }
  .primary-enter { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .routes-grid { grid-template-columns: 1fr; gap: 9px; }
  .route-card { padding: 11px; }
  .route-number { width: 39px; height: 39px; }
  .info-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
  .info-card { border-radius: 18px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}