:root {
  --ink: #f4f8fa;
  --muted: #9ab0ba;
  --paper: #0b222d;
  --card: #193946;
  --card-soft: #214652;
  --line: #2b4d5a;
  --red: #ff2a5f;
  --red-soft: #482e35;
  --sky: #00f0ff;
  --sky-soft: #183f4d;
  --green: #00f0ff;
  --deep: #06151d;
  --serif: "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--deep); }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--deep); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.hidden { display: none !important; }

.desktop-backdrop { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 15%, rgba(0, 240, 255, .17) 0 15%, transparent 39%), radial-gradient(circle at 86% 79%, rgba(255, 42, 95, .13) 0 12%, transparent 37%), var(--deep); }
.phone-app { width: min(calc(100% - 18px), 430px); height: min(932px, calc(100vh - 18px)); max-height: calc(100vh - 18px); margin: 9px auto; display: flex; flex-direction: column; overflow: hidden; position: relative; border: 8px solid #02080c; border-radius: 46px; background: var(--paper); box-shadow: 0 0 0 1px #38515a, 0 0 0 4px #010407, 0 0 70px rgba(0, 0, 0, .46); }
.phone-app::before { content: ""; width: 102px; height: 28px; position: absolute; top: 9px; left: 50%; z-index: 40; border-radius: 20px; background: #010305; box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.05); transform: translateX(-50%); pointer-events: none; }
.phone-app::after { content: ""; width: 2px; height: 62px; position: absolute; top: 126px; left: 1px; z-index: 40; border-radius: 2px; background: #34444a; box-shadow: 0 -78px 0 #34444a, 0 77px 0 #34444a; pointer-events: none; }
.app-header { height: 70px; padding: max(15px, env(safe-area-inset-top)) 20px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(43, 77, 90, .78); background: rgba(11, 34, 45, .92); backdrop-filter: blur(16px); position: relative; z-index: 5; }
.brand-eyebrow { display: block; color: var(--sky); font-size: 7px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
.brand strong { display: block; margin-top: 5px; font: 600 21px/1 var(--serif); letter-spacing: -.05em; }
.brand strong span { color: var(--red); font-family: var(--sans); font-size: 12px; letter-spacing: .02em; }
.header-status { display: flex; align-items: center; gap: 7px; color: #a7bec6; font-size: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #163d49; }
.app-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #2d5867 transparent; }
.tab-screen { min-height: 100%; padding: 25px 20px 36px; }
.eyebrow { margin: 0; font-size: 8px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.eyebrow.sky { color: var(--sky); }
.eyebrow.red { color: var(--red); }

.screen-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.screen-heading h1 { margin: 9px 0 7px; font: 700 33px/1.04 var(--serif); letter-spacing: -.07em; }
.screen-heading p:not(.eyebrow) { margin: 0; color: #93abb5; font-size: 10px; line-height: 1.6; }
.text-action { border: 0; padding: 4px 0; color: var(--sky); background: transparent; font-size: 9px; white-space: nowrap; }
.text-action span { margin-left: 3px; font-size: 14px; }

.home-screen { position: relative; overflow: hidden; }
.home-screen::before, .home-screen::after { content: ""; position: absolute; border: 1px solid rgba(0, 240, 255, .15); border-radius: 50%; pointer-events: none; }
.home-screen::before { width: 350px; height: 350px; top: 148px; left: -238px; }
.home-screen::after { width: 420px; height: 420px; right: -310px; bottom: 110px; border-color: rgba(255, 42, 95, .12); }
.home-heading, .home-greeting, .voice-zone, .city-search, .era-picker, .recommendation-block { position: relative; z-index: 1; }
.home-greeting { margin: 31px 0 17px; }
.home-greeting p { margin: 0; color: #b8cbd1; font: 600 20px/1.1 var(--serif); letter-spacing: -.06em; }
.home-greeting h2 { margin: 2px 0 0; color: var(--red); font: 700 42px/1 var(--serif); letter-spacing: -.1em; }
.voice-zone { display: flex; flex-direction: column; align-items: center; padding: 3px 0 0; text-align: center; }
.voice-button { width: 126px; height: 126px; display: grid; place-items: center; position: relative; border: 1px solid rgba(0, 240, 255, .9); border-radius: 50%; color: var(--deep); background: var(--red); box-shadow: 0 0 0 10px rgba(0, 240, 255, .08), 0 15px 32px rgba(255, 42, 95, .2); transition: transform .2s, background .2s, box-shadow .2s; }
.voice-button:hover, .voice-button.listening { transform: scale(1.035); color: var(--deep); background: var(--sky); box-shadow: 0 0 0 10px rgba(0, 240, 255, .15), 0 15px 35px rgba(0, 240, 255, .24); }
.voice-button.listening { animation: breathe 1.2s ease-in-out infinite alternate; }
.mic-icon { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.voice-ring { display: none; position: absolute; inset: -12px; border: 1px solid rgba(0, 240, 255, .55); border-radius: 50%; }
.voice-ring.ring-b { inset: -22px; animation-delay: .25s; }
.voice-button.listening .voice-ring { display: block; animation: pulse 1.4s infinite; }
.voice-zone > strong { margin-top: 20px; color: #f1f7f8; font-size: 11px; }
.voice-zone > span:not(.voice-transcript) { margin-top: 7px; color: #7f99a3; font-size: 9px; }
.voice-transcript { min-height: 16px; margin-top: 7px; color: var(--sky); font-size: 9px; }
.waveform { height: 20px; margin: 6px auto 2px; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: .25; }
.waveform i { width: 2px; height: 6px; border-radius: 4px; background: var(--sky); }
.voice-button.listening ~ strong ~ span ~ .waveform { opacity: 1; }
.voice-zone:has(.voice-button.listening) .waveform { opacity: 1; }
.voice-zone:has(.voice-button.listening) .waveform i { animation: wave .8s ease-in-out infinite alternate; }
.waveform i:nth-child(2n) { height: 11px; animation-delay: .1s; }.waveform i:nth-child(3n) { height: 16px; animation-delay: .2s; }.waveform i:nth-child(4n) { height: 9px; animation-delay: .35s; }
@keyframes pulse { 0%, 100% { opacity: .15; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.05); } }
@keyframes wave { from { transform: scaleY(.45); } to { transform: scaleY(1.2); } }
@keyframes breathe { to { box-shadow: 0 0 0 18px rgba(0, 240, 255, .08), 0 15px 35px rgba(0, 240, 255, .24); } }

.city-search { margin-top: 18px; }
.city-search label { display: block; margin-bottom: 8px; color: #8da7b0; font-size: 9px; }
.search-row { display: flex; gap: 7px; }
.search-row input { flex: 1; min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: #112a35; background: #f4fbfd; font-size: 11px; }
.search-row input::placeholder, textarea::placeholder { color: #829aa3; }
.search-row input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0, 240, 255, .13); }
.search-row button, .primary-button { border: 0; border-radius: 7px; color: #fff; background: var(--red); font-size: 10px; font-weight: 700; transition: .2s; }
.search-row button { padding: 0 16px; }
.search-row button:hover, .primary-button:hover { color: var(--deep); background: var(--sky); }
.search-row button span, .primary-button span { margin-left: 5px; font-size: 14px; }
.era-picker { margin-top: 25px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-head strong { color: #e8f1f3; font-size: 10px; }
.section-head > span { color: var(--sky); font-size: 8px; }
.era-options { display: flex; gap: 5px; margin-top: 10px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
.era-options::-webkit-scrollbar { display: none; }
.era-options button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 20px; padding: 7px 11px; color: #9eb5bd; background: #153441; font-size: 9px; transition: .2s; }
.era-options button:hover, .era-options button.selected { border-color: var(--sky); color: var(--deep); background: var(--sky); }
.recommendation-block { margin-top: 24px; }
.recommendation-block .section-head { align-items: center; }
.recommendation-card { min-height: 136px; display: flex; justify-content: space-between; position: relative; overflow: hidden; margin-top: 10px; padding: 18px 15px 13px; border: 1px solid #476675; border-radius: 14px; background: linear-gradient(130deg, #ecd9ce 0%, #f4e9df 56%, #d9edf0 100%); color: #112832; box-shadow: 0 12px 25px rgba(0, 0, 0, .13); transition: transform .2s, border-color .2s; }
.recommendation-card::after { content: ""; position: absolute; width: 135px; height: 135px; right: -33px; bottom: -61px; border: 1px solid rgba(255, 42, 95, .25); border-radius: 50%; box-shadow: 0 0 0 14px rgba(255, 42, 95, .06), 0 0 0 28px rgba(255, 42, 95, .05); }
.recommendation-card:hover { transform: translateY(-2px); border-color: var(--sky); }
.recommendation-card h3 { margin: 8px 0 1px; font: 700 25px/1 var(--serif); letter-spacing: -.07em; }
.recommendation-card p { margin: 0; color: #647982; font-size: 9px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.tag-row span { padding: 5px 7px; border-radius: 12px; color: #38505a; background: rgba(255, 255, 255, .65); font-size: 8px; }
.rec-arrow { position: relative; z-index: 1; color: var(--red); font-size: 23px; }
.recommendation-card small { position: absolute; left: 15px; bottom: 10px; z-index: 1; color: #73848a; font-size: 7px; }

.empty-state { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-spark { color: var(--red); font-size: 29px; text-shadow: 8px -6px 0 var(--sky); }
.empty-state h2 { margin: 17px 0 8px; font: 600 22px var(--serif); letter-spacing: -.05em; }
.empty-state p { max-width: 265px; margin: 0; color: #8099a3; font-size: 10px; line-height: 1.7; }
.empty-state .primary-button { margin-top: 22px; padding: 12px 17px; }
.saved-plan { margin-top: 26px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.saved-plan-top { display: flex; justify-content: space-between; gap: 10px; }
.saved-plan h2 { margin: 9px 0 4px; font: 600 23px var(--serif); letter-spacing: -.06em; }
.saved-plan-top p { margin: 0; color: #9cb2ba; font-size: 9px; }
.round-button { width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: #9fb5bd; background: transparent; font-size: 14px; }
.round-button:hover { border-color: var(--sky); color: var(--sky); }
.saved-timeline, .plan-timeline { margin-top: 18px; border-top: 1px solid var(--line); }
.plan-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.plan-item b { width: 25px; color: var(--red); font-size: 9px; }
.plan-item strong { display: block; margin-bottom: 3px; font: 500 13px var(--serif); }
.plan-item span { color: #91aab3; font-size: 8px; line-height: 1.5; }
.saved-actions { display: grid; gap: 7px; margin-top: 18px; }

.translator-card { margin-top: 25px; padding: 14px; border-radius: 14px; background: #f1e9e1; color: #18313b; }
.language-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 11px; background: #f8f2ec; font-size: 10px; }
.language-row span { color: var(--red); font-size: 15px; }
.translation-workspace { min-height: 181px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 19px 12px 9px; text-align: center; }
.sound-bars { height: 25px; display: flex; align-items: center; gap: 4px; }
.sound-bars i { width: 3px; height: 17px; border-radius: 5px; background: var(--red); }
.sound-bars i:nth-child(2), .sound-bars i:nth-child(4) { height: 24px; }.sound-bars i:nth-child(3) { height: 11px; }
.translation-workspace > p { margin: 12px 0 10px; color: #83939a; font-size: 9px; }
.translation-workspace textarea { width: 100%; resize: vertical; border: 1px solid #ded5cc; border-radius: 8px; padding: 9px; outline: 0; color: #16303a; background: #fbf8f4; font-size: 10px; }
.translation-output { min-height: 17px; color: #285b6c !important; }
.translate-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.translate-button.listening { color: var(--deep); background: var(--sky); }
.button-mic, .small-mic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.translate-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tool-card { min-height: 98px; position: relative; padding: 13px; text-align: left; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: var(--card); transition: .2s; }
.tool-card:hover { border-color: var(--sky); transform: translateY(-2px); }
.tool-icon { display: block; margin-bottom: 8px; color: var(--red); font-size: 20px; }
.tool-card strong, .tool-card small { display: block; }.tool-card strong { font: 600 13px var(--serif); }.tool-card small { margin-top: 4px; color: #8ca6b0; font-size: 8px; }

.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 25px; }
.service-card { min-height: 116px; position: relative; padding: 13px; text-align: left; border: 1px solid transparent; border-radius: 13px; background: var(--card); transition: .2s; }
.service-card:hover { border-color: var(--sky); transform: translateY(-2px); }
.service-icon { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 8px; color: var(--deep); background: var(--red); font-size: 14px; font-weight: 700; }
.service-card strong, .service-card small { display: block; }.service-card strong { font: 600 13px var(--serif); }.service-card small { margin-top: 4px; color: #8ca6b0; font-size: 8px; }.service-card i { position: absolute; right: 12px; bottom: 10px; color: var(--sky); font-size: 16px; font-style: normal; }

.profile-heading { position: relative; }.profile-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--deep); background: var(--red); font-size: 19px; }
.login-card { display: grid; gap: 7px; margin-top: 26px; padding: 15px; border-radius: 13px; background: var(--card); }.login-card > strong { margin-bottom: 4px; font-size: 11px; }.login-button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 8px; color: #112a35; background: #f4f1ec; text-align: left; font-size: 10px; font-weight: 600; transition: .2s; }.login-button:hover { color: #fff; background: var(--red); }.login-button span { width: 16px; color: var(--red); text-align: center; font-size: 14px; }.login-button:hover span { color: #fff; }
.profile-section { margin-top: 26px; }.profile-section h2 { margin: 0 0 5px; font: 600 17px var(--serif); }.profile-section > p { margin: 0; color: #879fa8; font-size: 9px; line-height: 1.6; }.profile-placeholder { margin-top: 11px; padding: 14px; border: 1px dashed #315664; border-radius: 10px; color: #78939d; font-size: 9px; }.recent-destination { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px; border-radius: 10px; background: var(--card); cursor: pointer; }.recent-destination:hover { background: var(--card-soft); }.recent-icon { color: var(--red); font-size: 18px; }.recent-destination div { flex: 1; }.recent-destination strong, .recent-destination small { display: block; }.recent-destination strong { font-size: 10px; }.recent-destination small { margin-top: 3px; color: #829ca5; font-size: 8px; }.recent-destination > span:last-child { color: var(--sky); font-size: 16px; }

.explore-screen { padding: 20px 0 36px; }.explore-topbar { display: flex; align-items: center; gap: 7px; padding: 0 20px; }.explore-topbar .text-action { margin-right: auto; }.keyword-pill { padding: 7px 9px; border-radius: 16px; color: #b9e8f0; background: #183f4d; font-size: 8px; }.explore-topbar .round-button { color: #a3bac2; }.explore-topbar .round-button.saved { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.explore-hero { padding: 26px 20px 20px; }.explore-hero h1 { margin: 11px 0 0; font: 700 44px/1 var(--serif); letter-spacing: -.09em; }.explore-hero h2 { margin: 2px 0 13px; color: var(--red); font: 700 26px/1.1 var(--serif); letter-spacing: -.07em; }.explore-hero > p:not(.eyebrow) { max-width: 355px; margin: 0; color: #a3b9c1; font-size: 10px; line-height: 1.7; }.explore-actions { display: flex; gap: 7px; margin-top: 18px; }.explore-actions .primary-button, .explore-actions .secondary-button { padding: 11px 12px; }.secondary-button { border: 1px solid var(--line); border-radius: 7px; color: #a7c2ca; background: transparent; font-size: 10px; font-weight: 600; }.secondary-button:hover { border-color: var(--sky); color: var(--sky); }
.city-visual { height: 234px; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 69% 22%, rgba(255, 42, 95, .95) 0 5%, transparent 22%), linear-gradient(155deg, #103544 0%, #1c7085 48%, #9f4054 100%); }.city-visual.visual-shanghai { background: radial-gradient(circle at 73% 23%, rgba(0, 240, 255, .95) 0 4%, transparent 20%), linear-gradient(155deg, #0c3445 0%, #247f9b 47%, #bb4c59 100%); }.city-visual.visual-beijing { background: radial-gradient(circle at 32% 24%, rgba(255, 42, 95, .9) 0 4%, transparent 19%), linear-gradient(155deg, #193946 0%, #4b91aa 49%, #a44750 100%); }.city-visual.visual-chengdu { background: radial-gradient(circle at 72% 25%, rgba(0, 240, 255, .9) 0 4%, transparent 19%), linear-gradient(155deg, #123a42 0%, #347f78 48%, #9f4a49 100%); }
.city-visual::before { content: ""; position: absolute; z-index: -1; inset: 31% -10% -7%; opacity: .86; background: linear-gradient(145deg, transparent 35%, #08242f 36% 43%, transparent 44%), linear-gradient(8deg, #071d28 0 15%, transparent 16%), repeating-linear-gradient(90deg, transparent 0 42px, rgba(5, 29, 40, .82) 43px 48px, transparent 49px 92px); transform: skewY(-4deg); }.city-visual.visual-shanghai::before { background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(5, 28, 39, .85) 26px 31px, transparent 32px 54px), linear-gradient(172deg, transparent 0 49%, #0b2c3a 50%); }.city-visual.visual-beijing::before { background: linear-gradient(8deg, #102a34 0 15%, transparent 16%), repeating-linear-gradient(90deg, transparent 0 40px, rgba(10, 36, 47, .76) 41px 47px, transparent 48px 94px); }.city-visual.visual-chengdu::before { background: repeating-linear-gradient(90deg, transparent 0 29px, rgba(7, 35, 38, .8) 30px 35px, transparent 36px 67px), linear-gradient(12deg, #0a292c 0 17%, transparent 18%); }
.visual-glow { width: 10px; height: 10px; position: absolute; right: 27%; top: 21%; z-index: 1; border-radius: 50%; background: #ffaaa0; box-shadow: 0 0 27px 14px rgba(255, 42, 95, .3); }.visual-architecture { position: absolute; bottom: 0; left: 10%; width: 80%; height: 37%; z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 29px, rgba(3, 23, 31, .83) 30px 34px, transparent 35px 65px); clip-path: polygon(0 41%, 9% 41%, 9% 22%, 21% 22%, 21% 37%, 35% 37%, 35% 0, 49% 0, 49% 33%, 64% 33%, 64% 14%, 79% 14%, 79% 41%, 100% 41%, 100% 100%, 0 100%); }.city-visual.visual-shanghai .visual-architecture { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(4, 25, 36, .85) 19px 25px, transparent 26px 44px); clip-path: polygon(0 58%, 7% 58%, 7% 33%, 17% 33%, 17% 55%, 26% 55%, 26% 9%, 36% 9%, 36% 51%, 47% 51%, 47% 0, 55% 0, 55% 39%, 66% 39%, 66% 18%, 75% 18%, 75% 55%, 88% 55%, 88% 34%, 100% 34%, 100% 100%, 0 100%); }.city-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 25%, rgba(2, 12, 17, .82) 100%); }.visual-caption { position: absolute; left: 18px; bottom: 15px; z-index: 3; color: #fff; }.visual-caption span { display: block; color: var(--sky); font-size: 8px; letter-spacing: .13em; }.visual-caption strong { display: block; margin-top: 5px; font: 500 21px var(--serif); }
.source-line { padding: 12px 20px 14px; border-bottom: 1px solid var(--line); color: #8fa8b2; font-size: 8px; }.source-line .check { color: var(--sky); font-weight: 700; }.source-line i { margin: 0 5px; color: #477888; font-style: normal; }
.explore-content { padding: 27px 20px 0; }.explore-content h3 { margin: 8px 0 0; font: 600 24px var(--serif); letter-spacing: -.06em; }.scene-status, .topic-count { color: #91adb7; font-size: 8px; }.scene-preview { margin-top: 16px; overflow: hidden; border-radius: 10px; color: #fff; background: #102c38; }.scene-preview-art { min-height: 166px; position: relative; overflow: hidden; padding: 20px 17px; background: radial-gradient(circle at 75% 27%, rgba(0, 240, 255, .82) 0 4%, transparent 23%), linear-gradient(150deg, #123745 0%, #287b91 49%, #a94757 100%); }.scene-preview-art::before { content: ""; position: absolute; inset: 38% -10% -15%; background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(7, 40, 53, .78) 26px 31px, transparent 32px 54px); transform: skewY(-4deg); }.scene-preview-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(2, 13, 18, .76) 100%); }.scene-preview-art span, .scene-preview-art strong, .scene-preview-art small { display: block; position: relative; z-index: 1; }.scene-preview-art span { color: var(--sky); font-size: 8px; letter-spacing: .14em; }.scene-preview-art strong { margin-top: 38px; font: 600 27px/1.08 var(--serif); letter-spacing: -.05em; }.scene-preview-art small { max-width: 230px; margin-top: 7px; color: rgba(255, 255, 255, .75); font-size: 8px; line-height: 1.5; }.scene-preview-footer { display: flex; justify-content: space-between; padding: 10px 12px; color: #9fb8c1; background: #0e2935; font-size: 8px; }.scene-preview-footer span:last-child { color: var(--sky); font-size: 14px; }.scene-modes { display: flex; gap: 5px; margin: 9px 0 27px; }.scene-modes button { border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; color: #9bb1ba; background: transparent; font-size: 8px; }.scene-modes button.active { border-color: var(--red); color: #fff; background: var(--red); }
.topic-heading { margin-bottom: 14px; }.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.topic-grid button { min-height: 115px; position: relative; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: var(--card); transition: .2s; }.topic-grid button:hover { border-color: var(--sky); transform: translateY(-2px); }.topic-grid span { color: #8aa5af; font-size: 8px; }.topic-grid strong { display: block; margin: 16px 0 5px; font: 600 17px var(--serif); }.topic-grid small { display: block; padding-right: 9px; color: #9ab0b9; font-size: 8px; }.topic-grid i { position: absolute; right: 11px; bottom: 9px; color: var(--red); font-style: normal; }
.episode-card { display: grid; grid-template-columns: 42% 58%; margin-top: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }.episode-art { min-height: 170px; position: relative; overflow: hidden; padding: 13px; color: #fff; background: radial-gradient(circle at 67% 27%, rgba(0, 240, 255, .84) 0 5%, transparent 23%), linear-gradient(153deg, #123444 0%, #29758a 48%, #a64152 100%); }.episode-art::after { content: ""; position: absolute; inset: 33% -15% -10%; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(6, 29, 40, .78) 18px 23px, transparent 24px 40px); transform: skewY(-9deg); }.episode-art span, .episode-art strong, .episode-art i { position: relative; z-index: 1; }.episode-art span { color: var(--sky); font-size: 7px; letter-spacing: .13em; }.episode-art strong { display: block; margin-top: 44px; font: 600 17px/1.12 var(--serif); }.episode-art i { position: absolute; right: 12px; bottom: 11px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: var(--sky); font-size: 8px; font-style: normal; }.episode-copy { padding: 15px 13px; }.episode-copy h3 { margin: 8px 0 7px; font: 600 16px var(--serif); }.episode-copy > p:not(.eyebrow) { margin: 0; color: #9ab0b9; font-size: 8px; line-height: 1.6; }.episode-copy button { margin-top: 12px; padding: 0; border: 0; color: var(--red); background: transparent; font-size: 8px; }.episode-copy button span { margin-left: 4px; font-size: 12px; }
.keyword-chat { margin-top: 27px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }.chat-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #23434f; }.assistant-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--deep); background: var(--sky); font-size: 9px; font-weight: 700; }.chat-heading strong { display: block; font-size: 10px; }.chat-heading > div span { display: block; margin-top: 3px; color: #94abb4; font-size: 7px; }.online-tag { margin-left: auto; color: var(--green); font-size: 8px; }.keyword-messages { padding: 12px 0 9px; color: #9ab0b9; font-size: 9px; line-height: 1.7; }.suggestion-intro { margin: 0 0 5px; }.question-chips { display: flex; flex-wrap: wrap; gap: 4px; }.question-chips button { padding: 6px 8px; border: 0; border-radius: 20px; color: #a8c4cc; background: #214855; font-size: 8px; }.question-chips button:hover { color: #fff; background: #2b5d6d; }.keyword-composer { display: flex; overflow: hidden; border: 1px solid #2a4a57; border-radius: 7px; background: #f4fbfd; }.keyword-composer input { flex: 1; min-width: 0; padding: 10px 8px; border: 0; outline: 0; color: #102732; background: #f4fbfd; font-size: 9px; }.send-button { width: 34px; border: 0; color: #fff; background: var(--red); font-size: 16px; }.send-button:hover { color: var(--deep); background: var(--sky); }.mini-mic { width: 31px; border: 0; color: #4d91a5; background: transparent; }.mini-mic:hover { color: var(--red); }

.bottom-nav { flex: 0 0 auto; min-height: 60px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 7px 9px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #1f3d49; background: rgba(6, 21, 29, .98); position: relative; z-index: 10; }.nav-button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; border: 0; padding: 2px 1px; color: #72909b; background: transparent; font-size: 7px; }.nav-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.nav-button.active { color: var(--red); }.nav-button:hover { color: var(--sky); }.nav-button.active:hover { color: var(--red); }

.loading-layer, .sheet-layer, .service-layer { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(2, 12, 17, .78); backdrop-filter: blur(8px); }.loading-card { width: min(86%, 360px); padding: 27px 23px; border: 1px solid #2c5360; border-radius: 15px; text-align: center; background: var(--paper); box-shadow: 0 20px 55px rgba(0,0,0,.4); }.loading-orb { width: 49px; height: 49px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: var(--deep); background: var(--red); font-size: 12px; font-weight: 700; animation: breathe 1.2s infinite alternate; }.loading-card h2 { margin: 10px 0 7px; font: 600 24px var(--serif); }.loading-card > p:not(.eyebrow) { margin: 0 auto 23px; color: #98afb8; font-size: 9px; line-height: 1.6; }.loading-steps { text-align: left; border-top: 1px solid var(--line); }.loading-step { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid #21414d; color: #718993; font-size: 9px; }.loading-step > span { color: #527482; font-size: 7px; }.loading-step i { margin-left: auto; color: #436c7a; font-style: normal; }.loading-step.active { color: var(--ink); }.loading-step.active i { color: var(--red); }.loading-step.done { color: #8ac9cf; }.loading-step.done i { color: var(--sky); }
.sheet-layer, .service-layer { align-items: flex-end; }.sheet-backdrop, .service-backdrop { position: absolute; inset: 0; }.plan-sheet, .service-modal { width: min(100%, 430px); max-height: 90vh; overflow-y: auto; position: relative; padding: 28px 20px max(25px, env(safe-area-inset-bottom)); border: 1px solid #2a4e5b; border-bottom: 0; border-radius: 17px 17px 0 0; background: var(--paper); box-shadow: 0 -15px 50px rgba(0,0,0,.38); animation: slide-up .25s ease-out; }.sheet-close { position: absolute; top: 13px; right: 16px; border: 0; background: transparent; color: #9eb3bd; font-size: 24px; }.plan-sheet h2, .service-modal h2 { margin: 11px 0 7px; font: 600 27px var(--serif); letter-spacing: -.05em; }.sheet-intro, .service-modal > p:not(.eyebrow) { margin: 0 0 24px; color: #9ab0b9; font-size: 10px; line-height: 1.6; }.option-group { margin-top: 20px; }.option-group > label { display: block; margin-bottom: 8px; color: #b2c4ca; font-size: 9px; font-weight: 600; }.option-row, .interest-row { display: flex; flex-wrap: wrap; gap: 6px; }.option-row button, .interest-row button { border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: #9ab0b9; background: #153341; font-size: 9px; }.option-row button.selected, .interest-row button.selected { border-color: var(--red); color: #fff; background: var(--red-soft); }.sheet-primary { width: 100%; margin-top: 26px; padding: 13px; }.sheet-back { border: 0; padding: 0; color: #9ab0b9; background: transparent; font-size: 9px; }.plan-result > .eyebrow { margin-top: 25px; }.plan-result h2 { margin-bottom: 4px; }.result-summary { margin: 0; color: #9ab0b9; font-size: 9px; }.result-actions { display: grid; gap: 7px; }.result-secondary { width: 100%; margin-top: 1px; padding: 12px; }.service-modal { padding-top: 36px; }.service-modal-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 11px; color: var(--deep); background: var(--red); font-size: 19px; font-weight: 700; }.service-modal .primary-button { width: 100%; padding: 13px; }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.toast { position: absolute; left: 50%; bottom: 70px; z-index: 60; max-width: calc(100% - 38px); padding: 10px 13px; border: 1px solid #376779; border-radius: 8px; color: #fff; background: #0a202b; font-size: 9px; box-shadow: 0 8px 25px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .24s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.keyword-user { display: flex; justify-content: flex-end; margin: 0 0 7px; }.keyword-user span { max-width: 84%; padding: 8px 10px; border-radius: 8px 8px 2px 8px; color: #d8f2f7; background: #205264; font-size: 9px; }.keyword-answer { margin-bottom: 7px; padding: 9px 10px; border-left: 2px solid var(--sky); color: #a9bec5; background: #12313e; font-size: 9px; line-height: 1.6; }.keyword-answer p { margin: 0; }.answer-action { margin-top: 5px; border: 0; padding: 0; color: var(--sky); background: transparent; font-size: 8px; }

@media (min-width: 431px) { .phone-app { height: min(932px, calc(100vh - 36px)); max-height: calc(100vh - 36px); margin: 18px auto; border-radius: 46px; } .app-header { border-radius: 37px 37px 0 0; } .bottom-nav { border-radius: 0 0 37px 37px; } }
@media (max-width: 360px) { .screen-heading h1 { font-size: 30px; }.home-greeting p { font-size: 18px; }.home-greeting h2 { font-size: 38px; }.voice-button { width: 116px; height: 116px; }.recommendation-card h3 { font-size: 22px; }.service-card strong { font-size: 12px; } }

/* v0.6.0 — editorial dark mode / time explorer */
:root {
  --ink: #f5f8f4;
  --muted: #8b9891;
  --paper: #080e10;
  --card: #0e1719;
  --card-soft: #12181a;
  --line: rgba(224, 239, 230, .16);
  --red: #ff2a5f;
  --red-soft: rgba(255, 42, 95, .12);
  --sky: #00f0ff;
  --sky-soft: rgba(0, 240, 255, .12);
  --dual: linear-gradient(135deg, #00f0ff 0%, #ff007a 100%);
  --green: #00f0ff;
  --deep: #080e10;
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

html, body { background: #050809; }
body { letter-spacing: .005em; }
.desktop-backdrop { background: radial-gradient(circle at 50% -10%, rgba(0, 240, 255, .06), transparent 32%), radial-gradient(circle at 10% 85%, rgba(255, 255, 255, .035), transparent 34%), #050809; }
.phone-app { background: var(--paper); box-shadow: 0 0 0 1px #1c333b, 0 0 0 4px #010304, 0 0 80px rgba(0, 0, 0, .62); }
.phone-app::before { box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 1px 0 rgba(0,240,255,.08); }
.phone-app::after { background: #243b43; box-shadow: 0 -78px 0 #243b43, 0 77px 0 #243b43; }
.app-header { height: 62px; padding: max(13px, env(safe-area-inset-top)) 20px 9px; border-bottom-color: rgba(214, 234, 220, .11); background: rgba(11, 19, 21, .92); }
.brand-eyebrow { color: rgba(245, 248, 244, .62); font-family: var(--mono); font-size: 6px; letter-spacing: .18em; }
.brand strong { margin-top: 4px; font-size: 18px; font-weight: 500; letter-spacing: -.04em; }
.brand strong span { color: var(--red); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; }
.header-status { color: rgba(245,248,244,.67); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.status-dot { width: 4px; height: 4px; background: var(--red); box-shadow: 0 0 0 3px rgba(0,240,255,.1), 0 0 12px rgba(0,240,255,.8); }
.app-content { padding-bottom: 0; scrollbar-color: #31513d transparent; }
.tab-screen { padding: 22px 20px 34px; }
.eyebrow { font-family: var(--mono); font-size: 7px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.sky { color: rgba(245,248,244,.5); }
.eyebrow.red { color: var(--red); }
.screen-heading h1 { margin: 8px 0 6px; font-size: 25px; font-weight: 500; letter-spacing: -.05em; }
.screen-heading p:not(.eyebrow) { color: rgba(245,248,244,.48); font-size: 9px; line-height: 1.65; }
.text-action { color: var(--red); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.text-action span { font-size: 13px; }

.home-screen { background: radial-gradient(circle at 50% 35%, rgba(0,240,255,.035), transparent 33%); }
.home-screen::before, .home-screen::after { border-color: rgba(0,240,255,.1); }
.home-screen::before { width: 300px; height: 300px; top: 170px; left: -246px; }
.home-screen::after { width: 380px; height: 380px; right: -320px; bottom: 104px; border-color: rgba(255,255,255,.06); }
.home-heading h1 { margin-top: 7px; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; }
.home-heading .eyebrow { color: rgba(245,248,244,.68); font-size: 7px; }
.home-heading .text-action { margin-top: 4px; }
.home-greeting { margin: 54px 0 21px; text-align: center; }
.home-greeting p { color: var(--red); font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: .2em; }
.home-greeting h2 { margin: 10px 0 6px; color: var(--ink); font-size: 22px; font-weight: 400; letter-spacing: -.06em; }
.home-greeting > span { display: block; color: rgba(245,248,244,.36); font-family: var(--mono); font-size: 7px; letter-spacing: .11em; }
.voice-zone { padding-top: 2px; }
.voice-button { width: 94px; height: 94px; overflow: visible; border: 1px solid rgba(0,240,255,.4); color: var(--red); background: radial-gradient(circle at 35% 28%, rgba(0,240,255,.2), transparent 35%), radial-gradient(circle at 65% 76%, rgba(0,240,255,.08), transparent 50%), #0b1715; box-shadow: 0 0 0 1px rgba(0,240,255,.05), 0 0 30px rgba(0,240,255,.08); }
.voice-button::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(0,240,255,.55); border-radius: 43% 57% 54% 46%; background: radial-gradient(circle at 35% 30%, rgba(0,240,255,.32), transparent 44%), rgba(0,240,255,.055); filter: blur(.2px); animation: liquid-drift 6s ease-in-out infinite; }
.voice-button::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(0,240,255,.17); border-radius: 50%; transform: rotate(18deg) scaleX(.82); }
.voice-button:hover, .voice-button.listening { color: var(--red); background: radial-gradient(circle at 35% 28%, rgba(0,240,255,.34), transparent 36%), radial-gradient(circle at 65% 76%, rgba(0,240,255,.15), transparent 52%), #0b1715; box-shadow: 0 0 0 1px rgba(0,240,255,.2), 0 0 38px rgba(0,240,255,.18); }
.voice-button.listening { animation: voice-breathe 1.25s ease-in-out infinite alternate; }
.voice-button.listening::before { animation-duration: 1.2s; }
.mic-icon { position: relative; z-index: 2; width: 18px; height: 18px; stroke-width: 1.35; }
.voice-ring { display: block; inset: -16px; border-color: rgba(0,240,255,.2); opacity: .45; }
.voice-ring.ring-b { inset: -26px; opacity: .17; }
.voice-button.listening .voice-ring { display: block; }
.voice-zone > strong { margin-top: 19px; color: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .04em; }
.voice-zone > span:not(.voice-transcript) { margin-top: 7px; color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.voice-transcript { min-height: 14px; margin-top: 8px; color: var(--red); font-family: var(--mono); font-size: 7px; }
.waveform { height: 15px; margin: 4px auto 0; opacity: .35; }
.waveform i { width: 1px; background: var(--red); }
.voice-zone:has(.voice-button.listening) .waveform { opacity: 1; }
@keyframes liquid-drift { 0%, 100% { border-radius: 43% 57% 54% 46%; transform: rotate(0deg) scale(.96); } 50% { border-radius: 57% 43% 42% 58%; transform: rotate(18deg) scale(1.05); } }
@keyframes voice-breathe { to { box-shadow: 0 0 0 1px rgba(0,240,255,.35), 0 0 48px rgba(0,240,255,.25); } }

.city-search { margin-top: 22px; }
.city-search label { margin-bottom: 7px; color: rgba(245,248,244,.43); font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }
.search-row { height: 40px; gap: 8px; }
.search-row input { min-width: 0; padding: 0 11px; border: 1px solid rgba(224,239,230,.18); border-radius: 0; color: var(--ink); background: rgba(255,255,255,.035); font-family: var(--mono); font-size: 9px; }
.search-row input::placeholder, textarea::placeholder { color: rgba(245,248,244,.34); }
.search-row input:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(0,240,255,.08); }
.search-row button, .primary-button { border: 1px solid rgba(0,240,255,.72); border-radius: 0; color: var(--red); background: transparent; font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: .03em; }
.search-row button { padding: 0 12px; }
.search-row button:hover, .primary-button:hover { color: var(--deep); background: var(--red); }
.search-row button span, .primary-button span { font-size: 12px; }

.era-picker { margin-top: 29px; }
.section-head strong { color: rgba(245,248,244,.78); font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: .08em; }
.section-head > span { color: rgba(0,240,255,.78); font-family: var(--mono); font-size: 7px; }
.era-options { gap: 13px; margin-top: 12px; padding: 2px 0 4px; border-bottom: 1px solid rgba(224,239,230,.1); }
.era-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 49px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 0 7px; color: rgba(245,248,244,.4); background: transparent; font-family: var(--mono); transition: color .2s, border-color .2s; }
.era-options button span { font-family: var(--mono); font-size: 7px; letter-spacing: .04em; }
.era-options button small { color: rgba(245,248,244,.34); font-size: 7px; }
.era-options button:hover, .era-options button.selected { border-bottom-color: var(--red); color: var(--red); background: transparent; }
.era-options button.selected small { color: rgba(0,240,255,.78); }

.recommendation-block { margin-top: 30px; }
.recommendation-block .section-head { align-items: flex-end; }
.recommendation-block .section-head > div > strong { display: block; margin-top: 5px; color: var(--ink); font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: -.04em; }
.recommendation-card { min-height: 160px; margin-top: 12px; padding: 17px 15px 12px; border: 1px solid rgba(224,239,230,.19); border-radius: 2px; color: var(--ink); background: linear-gradient(118deg, rgba(7,17,17,.92), rgba(14,35,28,.72)), radial-gradient(circle at 83% 20%, rgba(0,240,255,.22), transparent 20%), linear-gradient(153deg, #172326 0%, #14343b 50%, #0a1515 100%); box-shadow: 0 17px 35px rgba(0,0,0,.22); }
.recommendation-card::before { content: ""; position: absolute; inset: 26% -8% -10%; opacity: .62; background: linear-gradient(158deg, transparent 39%, rgba(0,240,255,.18) 40% 41%, transparent 42%), repeating-linear-gradient(90deg, transparent 0 26px, rgba(0,0,0,.48) 27px 32px, transparent 33px 67px); transform: skewY(-5deg); }
.recommendation-card::after { width: 180px; height: 180px; right: -78px; bottom: -102px; border-color: rgba(0,240,255,.27); box-shadow: 0 0 0 14px rgba(0,240,255,.04), 0 0 0 29px rgba(0,240,255,.025); }
.recommendation-card:hover { border-color: rgba(0,240,255,.62); transform: translateY(-2px); }
.recommendation-copy { position: relative; z-index: 1; }
.recommendation-card h3 { margin: 10px 0 4px; color: var(--ink); font-size: 21px; font-weight: 500; letter-spacing: -.05em; }
.recommendation-card p { margin: 0; color: rgba(245,248,244,.58); font-family: var(--mono); font-size: 7px; letter-spacing: .04em; }
.tag-row { gap: 0; margin-top: 17px; }
.tag-row span { padding: 0 8px 0 0; margin-right: 8px; border-right: 1px solid rgba(245,248,244,.25); border-radius: 0; color: rgba(245,248,244,.53); background: transparent; font-family: var(--mono); font-size: 6px; }
.tag-row span:last-child { margin-right: 0; border-right: 0; }
.rec-arrow { z-index: 1; color: var(--red); font-size: 20px; }
.recommendation-card small { left: 15px; bottom: 11px; color: rgba(245,248,244,.36); font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }

.primary-button, .secondary-button { min-height: 36px; }
.secondary-button { border-color: rgba(224,239,230,.22); border-radius: 0; color: rgba(245,248,244,.62); background: transparent; font-family: var(--mono); font-size: 8px; font-weight: 400; }
.secondary-button:hover { border-color: var(--red); color: var(--red); }
.round-button { border-color: rgba(224,239,230,.22); border-radius: 50%; color: rgba(245,248,244,.62); }
.round-button:hover { border-color: var(--red); color: var(--red); }

.empty-state { min-height: 500px; }
.empty-spark { color: var(--red); text-shadow: 7px -5px 0 rgba(0,240,255,.18); }
.empty-state h2 { font-size: 20px; font-weight: 400; }
.empty-state p { color: rgba(245,248,244,.45); font-size: 9px; }
.saved-plan, .translator-card, .tool-card, .service-card, .login-card, .recent-destination, .keyword-chat { border-radius: 2px; border-color: rgba(224,239,230,.14); background: var(--card); }
.saved-plan h2, .plan-sheet h2, .service-modal h2 { font-size: 23px; font-weight: 400; }
.plan-item b, .tool-icon, .service-icon, .recent-icon { color: var(--red); }
.translator-card { color: var(--ink); }
.language-row { border-radius: 0; color: var(--ink); background: rgba(255,255,255,.045); font-family: var(--mono); font-size: 8px; }
.language-row span { color: var(--red); }
.translation-workspace textarea { border-color: rgba(224,239,230,.15); border-radius: 0; color: var(--ink); background: rgba(255,255,255,.035); font-family: var(--mono); font-size: 9px; }
.translation-workspace > p, .translation-output { color: rgba(245,248,244,.46) !important; font-family: var(--mono); font-size: 8px; }
.sound-bars i { background: var(--red); }
.translate-button.listening { color: var(--deep); background: var(--red); }
.tool-card { border-color: rgba(224,239,230,.12); }
.tool-card:hover, .service-card:hover { border-color: var(--red); }
.tool-card strong, .service-card strong { font-size: 12px; font-weight: 400; }
.tool-card small, .service-card small { color: rgba(245,248,244,.42); font-family: var(--mono); font-size: 7px; }
.service-icon { border-radius: 0; color: var(--deep); background: var(--red); }
.service-card i { color: var(--red); }
.login-card > strong { font-family: var(--mono); font-size: 8px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.login-button { border: 1px solid rgba(224,239,230,.14); border-radius: 0; color: var(--ink); background: rgba(255,255,255,.045); font-family: var(--mono); font-size: 8px; font-weight: 400; }
.login-button:hover { color: var(--deep); background: var(--red); }
.login-button span { color: var(--red); }
.login-button:hover span { color: var(--deep); }
.profile-avatar { border-radius: 0; color: var(--deep); background: var(--red); }
.profile-section h2 { font-size: 16px; font-weight: 400; }
.profile-section > p, .recent-destination small { color: rgba(245,248,244,.42); }
.profile-placeholder { border-color: rgba(0,240,255,.24); border-radius: 0; color: rgba(245,248,244,.38); }
.recent-destination:hover { background: var(--card-soft); }

.bottom-nav { min-height: 58px; padding: 7px 9px max(7px, env(safe-area-inset-bottom)); border-top-color: rgba(224,239,230,.1); background: rgba(5, 8, 9, .98); }
.nav-button { color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 6px; letter-spacing: .02em; }
.nav-button svg { width: 15px; height: 15px; stroke-width: 1.2; }
.nav-button.active { color: var(--red); }
.nav-button:hover { color: var(--red); }

.loading-layer, .sheet-layer, .service-layer { background: rgba(3, 8, 7, .84); }
.loading-card, .plan-sheet, .service-modal { border-color: rgba(0,240,255,.22); border-radius: 2px; background: #080e10; }
.loading-orb, .service-modal-icon { color: var(--deep); background: var(--red); }
.loading-card h2 { font-size: 22px; font-weight: 400; }
.loading-step { border-color: rgba(224,239,230,.1); color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 8px; }
.loading-step.active { color: var(--ink); }
.loading-step.active i, .loading-step.done i { color: var(--red); }
.plan-sheet h2, .service-modal h2 { font-weight: 400; }
.option-row button, .interest-row button { border-radius: 0; color: rgba(245,248,244,.52); background: rgba(255,255,255,.045); font-family: var(--mono); font-size: 8px; }
.option-row button.selected, .interest-row button.selected { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.toast { bottom: 68px; border-color: rgba(0,240,255,.3); border-radius: 0; color: var(--ink); background: #0b1713; font-family: var(--mono); font-size: 7px; }

@media (max-width: 360px) {
  .home-greeting { margin-top: 42px; }
  .home-greeting h2 { font-size: 21px; }
  .voice-button { width: 86px; height: 86px; }
  .recommendation-card h3 { font-size: 19px; }
}

/* plan stack — saved versions stay compact until opened */
.plan-heading h1 { font-size: 26px; }
.plan-library { margin-top: 33px; }
.plan-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(224,239,230,.13); }
.plan-library-head h2 { margin: 7px 0 0; color: var(--ink); font: 400 16px/1 var(--serif); letter-spacing: -.04em; }
.plan-library-actions { display: flex; align-items: center; gap: 12px; }
.plan-library-actions > span { color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 7px; }
.plan-library-actions .text-action { padding: 0; }
.plan-stack { display: grid; gap: 7px; margin-top: 12px; }
.plan-version-card { overflow: hidden; border: 1px solid rgba(224,239,230,.15); border-radius: 2px; background: rgba(255,255,255,.025); transition: border-color .2s, background .2s; }
.plan-version-card:hover, .plan-version-card.expanded { border-color: rgba(0,240,255,.46); background: rgba(0,240,255,.035); }
.plan-version-toggle { width: 100%; display: grid; grid-template-columns: 43px 1fr 20px; align-items: center; gap: 8px; padding: 14px 12px; border: 0; color: var(--ink); background: transparent; text-align: left; }
.plan-version-no { align-self: start; color: var(--red); font-family: var(--mono); font-size: 7px; letter-spacing: .03em; }
.plan-version-main { min-width: 0; }
.plan-version-main strong, .plan-version-main b, .plan-version-main small { display: block; }
.plan-version-main strong { color: var(--ink); font: 400 15px/1.1 var(--serif); letter-spacing: -.04em; }
.plan-version-main b { margin-top: 4px; color: rgba(245,248,244,.74); font-family: var(--mono); font-size: 8px; font-weight: 400; }
.plan-version-main small { margin-top: 5px; color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 7px; }
.plan-version-arrow { color: var(--red); font-family: var(--mono); font-size: 16px; font-weight: 400; text-align: right; }
.plan-version-detail { padding: 0 12px 14px 63px; }
.plan-detail-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 2px; }
.plan-detail-meta > strong { color: rgba(245,248,244,.42); font-family: var(--mono); font-size: 7px; font-weight: 400; }
.plan-version-detail .plan-timeline { margin-top: 10px; }
.plan-version-detail .plan-item { gap: 10px; padding: 11px 0; }
.plan-version-detail .plan-item b { width: 21px; color: var(--red); font-family: var(--mono); font-size: 7px; font-weight: 400; }
.plan-version-detail .plan-item strong { color: var(--ink); font: 400 12px/1.25 var(--serif); letter-spacing: -.02em; }
.plan-version-detail .plan-item span { display: block; margin-top: 4px; color: rgba(245,248,244,.43); font-family: var(--mono); font-size: 7px; line-height: 1.45; }
.plan-version-detail .plan-item em { display: block; margin-top: 2px; color: rgba(0,240,255,.62); font-family: var(--mono); font-size: 6px; font-style: normal; letter-spacing: .08em; }
.plan-detail-actions { display: grid; gap: 6px; margin-top: 14px; }
.plan-detail-actions .primary-button, .plan-detail-actions .secondary-button { width: 100%; min-height: 32px; padding: 8px 10px; }
.plan-detail-actions .secondary-button { border: 0; text-align: left; }
.plan-screen .empty-state { min-height: 500px; }

@media (max-width: 360px) {
  .plan-version-toggle { grid-template-columns: 37px 1fr 18px; padding-left: 9px; padding-right: 9px; }
  .plan-version-detail { padding-left: 54px; padding-right: 9px; }
  .plan-version-main strong { font-size: 14px; }
}

/* v0.8.0 — real-time translator / floating tool surface */
.translate-screen { padding-top: 25px; }
.translate-heading h1 { margin-top: 9px; font-size: 27px; font-weight: 400; }
.translate-heading .screen-subline { display: block; margin-top: 8px; color: rgba(245,248,244,.34); font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.translator-card { margin-top: 31px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; background: rgba(255,255,255,.018); }
.language-row { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.language-row span { color: var(--red); font-size: 13px; }
.translation-workspace { min-height: 184px; padding: 22px 15px 10px; }
.sound-bars { height: 18px; gap: 3px; opacity: .7; }
.sound-bars i { width: 1px; height: 10px; border-radius: 0; background: var(--red); }
.sound-bars i:nth-child(2), .sound-bars i:nth-child(4) { height: 17px; }
.sound-bars i:nth-child(3) { height: 7px; }
.translation-status { min-height: 10px; margin: 16px 0 5px; color: rgba(245,248,244,.36) !important; font-family: var(--mono); font-size: 7px; letter-spacing: .03em; }
.translation-status:empty { display: none; }
.translation-workspace textarea { min-height: 54px; resize: none; padding: 12px 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.09); border-radius: 0; color: var(--ink); background: transparent; font-family: var(--mono); font-size: 9px; line-height: 1.6; text-align: center; }
.translation-workspace textarea:focus { border-bottom-color: rgba(0,240,255,.55); box-shadow: none; }
.translation-output:not(:empty) { width: 100%; min-height: 20px; margin: 11px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); color: var(--red) !important; font-family: var(--mono); font-size: 8px; line-height: 1.5; }
.translate-button { width: calc(100% - 30px); min-height: 47px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin: 3px 15px 15px; padding: 0 13px; border-color: rgba(0,240,255,.62); background: rgba(0,240,255,.025); }
.translate-button .button-label { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; }
.translate-button small { color: rgba(245,248,244,.34); font-family: var(--mono); font-size: 6px; letter-spacing: .12em; }
.translate-button .button-arrow { margin-left: auto; color: var(--red); font-size: 16px; }
.translate-button:hover .button-arrow { color: var(--deep); }
.translate-button.listening { color: var(--deep); background: var(--red); box-shadow: 0 0 26px rgba(0,240,255,.16); }
.translate-button.listening small, .translate-button.listening .button-arrow { color: var(--deep); }
.translate-tools { gap: 8px; margin-top: 15px; }
.tool-card { min-height: 103px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; background: rgba(255,255,255,.018); }
.tool-card:hover { border-color: rgba(0,240,255,.55); background: rgba(0,240,255,.035); }
.tool-icon { width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid rgba(0,240,255,.45); color: var(--red); font-family: var(--mono); font-size: 11px; }
.tool-card strong { color: var(--ink); font-family: var(--serif); font-size: 13px; font-weight: 400; }
.tool-card small { margin-top: 5px; color: rgba(245,248,244,.39); font-family: var(--mono); font-size: 7px; }

@media (max-width: 360px) {
  .translator-card { margin-top: 25px; }
  .translation-workspace { min-height: 171px; }
  .translate-button { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; }
  .tool-card { min-height: 97px; padding: 12px; }
}

/* v1.0.0 — context-aware services / generated bottom sheets */
.service-heading h1 { color: var(--ink); font-size: 27px; font-weight: 400; }
.service-heading .screen-subline { display: block; margin-top: 8px; color: rgba(245,248,244,.34); font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.service-context-bar { display: grid; grid-template-columns: 7px auto 1fr auto; align-items: center; gap: 6px; margin-top: 26px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.1); color: rgba(245,248,244,.38); background: rgba(255,255,255,.02); font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }
.context-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px rgba(0,240,255,.8); }
.service-context-bar strong { overflow: hidden; color: var(--ink); font-size: 7px; font-weight: 400; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.context-live { color: rgba(0,240,255,.7); font-size: 6px; }
.service-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.service-card { min-height: 122px; display: flex; flex-direction: column; align-items: flex-start; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 2px; background: rgba(255,255,255,.025); }
.service-card:hover { border-color: rgba(0,240,255,.6); background: rgba(0,240,255,.04); transform: translateY(-2px); }
.service-icon { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid rgba(0,240,255,.48); border-radius: 0; color: var(--red); background: transparent; font-family: var(--mono); font-size: 11px; font-weight: 400; }
.service-match { margin-bottom: 6px; color: rgba(0,240,255,.72); font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }
.service-card strong { color: var(--ink); font-family: var(--serif); font-size: 13px; font-weight: 400; }
.service-card small { margin-top: 5px; color: rgba(245,248,244,.4); font-family: var(--mono); font-size: 6px; line-height: 1.45; }
.service-card i { right: 12px; bottom: 11px; color: var(--red); font-family: var(--mono); font-size: 14px; font-style: normal; }
.service-card-wide { grid-column: 1 / -1; min-height: 78px; display: grid; grid-template-columns: 28px 1fr 20px; grid-template-rows: auto auto auto; align-items: center; column-gap: 10px; padding: 12px 13px; }
.service-card-wide .service-icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }
.service-card-wide .service-match { grid-column: 2; grid-row: 1; margin: 0; }
.service-card-wide strong { grid-column: 2; grid-row: 2; }
.service-card-wide small { grid-column: 2; grid-row: 3; margin: 0; }
.service-card-wide i { grid-column: 3; grid-row: 1 / 4; position: static; justify-self: end; }

.service-modal { max-height: 88%; padding: 31px 20px max(24px, env(safe-area-inset-bottom)); border-color: rgba(0,240,255,.27); border-radius: 2px 2px 0 0; background: linear-gradient(145deg, rgba(18,34,27,.98), rgba(8,17,15,.99)); backdrop-filter: blur(18px); }
.service-modal-icon { width: 37px; height: 37px; margin-bottom: 15px; border: 1px solid rgba(0,240,255,.55); border-radius: 0; color: var(--red); background: rgba(0,240,255,.07); font-family: var(--mono); font-size: 15px; }
.service-modal h2 { margin: 10px 0 6px; color: var(--ink); font-size: 24px; }
.service-modal > p:not(.eyebrow) { margin-bottom: 0; color: rgba(245,248,244,.5); font-size: 8px; line-height: 1.65; }
.service-generated { margin-top: 19px; }
.service-match-list { border-top: 1px solid rgba(255,255,255,.1); }
.service-match-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.service-match-item div { min-width: 0; }
.service-match-item span, .service-match-item strong, .service-match-item small { display: block; }
.service-match-item span { color: var(--red); font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }
.service-match-item strong { margin-top: 5px; color: var(--ink); font: 400 13px var(--serif); }
.service-match-item small { margin-top: 4px; color: rgba(245,248,244,.42); font-family: var(--mono); font-size: 6px; }
.service-match-item > b { flex: 0 0 auto; color: rgba(0,240,255,.7); font-family: var(--mono); font-size: 6px; font-weight: 400; }
.guide-steps { border-top: 1px solid rgba(255,255,255,.1); }
.guide-steps > div { display: grid; grid-template-columns: 26px 1fr; gap: 4px 7px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.guide-steps span { grid-row: 1 / 3; color: var(--red); font-family: var(--mono); font-size: 7px; }
.guide-steps strong { color: var(--ink); font: 400 12px var(--serif); }
.guide-steps small { color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 6px; }
.route-card, .ticket-preview, .arrival-preview { padding: 13px; border: 1px solid rgba(0,240,255,.23); background: rgba(0,240,255,.035); }
.route-card > span, .ticket-preview > span, .arrival-preview > span, .esim-preview > div > span { color: var(--red); font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.route-line { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.route-line strong { color: var(--ink); font: 400 13px var(--serif); }
.route-line i { color: var(--red); font-family: var(--mono); font-size: 12px; font-style: normal; }
.route-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.route-tags b { padding: 5px 7px; border: 1px solid rgba(0,240,255,.2); color: rgba(0,240,255,.68); font-family: var(--mono); font-size: 6px; font-weight: 400; }
.ticket-preview strong, .ticket-preview small, .arrival-preview strong, .arrival-preview small { display: block; }
.ticket-preview strong, .arrival-preview strong { margin-top: 14px; color: var(--ink); font: 400 14px var(--serif); }
.ticket-preview small, .arrival-preview small { margin-top: 5px; color: rgba(245,248,244,.42); font-family: var(--mono); font-size: 6px; }
.ticket-preview > div { display: flex; gap: 6px; margin-top: 14px; }
.ticket-preview > div b { color: rgba(245,248,244,.6); font-family: var(--mono); font-size: 6px; font-weight: 400; }
.esim-preview { display: flex; align-items: center; gap: 14px; padding: 13px; border: 1px solid rgba(0,240,255,.23); background: rgba(0,240,255,.035); }
.qr-placeholder { width: 66px; height: 66px; flex: 0 0 auto; border: 4px solid var(--ink); background: repeating-linear-gradient(45deg, #080e10 0 3px, #f5f8f4 3px 6px, #080e10 6px 9px), repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0,240,255,.7) 4px 6px); background-blend-mode: multiply; }
.esim-preview strong, .esim-preview small { display: block; }
.esim-preview strong { margin-top: 9px; color: var(--ink); font: 400 12px var(--serif); }
.esim-preview small { margin-top: 5px; color: rgba(245,248,244,.42); font-family: var(--mono); font-size: 6px; line-height: 1.5; }
.service-modal-actions { display: grid; gap: 7px; margin-top: 20px; }
.service-modal-actions .primary-button, .service-modal-actions .secondary-button { width: 100%; min-height: 42px; padding: 10px; }
.service-modal-actions .secondary-button { border: 0; text-align: left; }

@media (max-width: 360px) {
  .service-grid { gap: 6px; }
  .service-card { min-height: 116px; padding: 11px; }
  .service-card-wide { min-height: 74px; }
  .service-modal { padding-right: 15px; padding-left: 15px; }
}

/* v1.1.0 — profile & data / compact access grid */
.profile-heading h1 { color: var(--ink); font-size: 27px; font-weight: 400; }
.profile-settings { width: 29px; height: 29px; display: grid; place-items: center; align-self: flex-start; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(245,248,244,.58); background: transparent; font-family: var(--mono); font-size: 13px; }
.profile-settings:hover { border-color: rgba(0,240,255,.55); color: var(--red); background: rgba(0,240,255,.035); }
.login-card { margin-top: 29px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.login-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.11); }
.login-card-head strong { display: block; margin-top: 6px; color: var(--ink); font: 400 15px var(--serif); letter-spacing: -.03em; }
.login-card-head > span { color: rgba(245,248,244,.31); font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.login-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.login-button { min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 2px; color: var(--ink); background: rgba(255,255,255,.025); font-family: var(--mono); }
.login-button:hover { color: var(--ink); border-color: rgba(0,240,255,.6); background: rgba(0,240,255,.055); box-shadow: 0 0 16px rgba(0,240,255,.06); }
.login-button span { width: 18px; color: rgba(245,248,244,.62); font-family: var(--mono); font-size: 14px; text-align: left; }
.login-button strong { color: inherit; font-family: var(--mono); font-size: 7px; font-weight: 400; letter-spacing: .02em; }
.login-button:hover span { color: var(--red); }
.profile-section { margin-top: 31px; }
.profile-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.11); }
.profile-section-head h2 { margin: 6px 0 0; color: var(--ink); font: 400 15px var(--serif); letter-spacing: -.03em; }
.profile-section-head > span { color: rgba(245,248,244,.3); font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.profile-placeholder { min-height: 56px; display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 11px; border: 1px dashed rgba(255,255,255,.17); border-radius: 2px; color: rgba(245,248,244,.42); background: rgba(255,255,255,.014); }
.empty-icon { color: var(--red); font-family: var(--mono); font-size: 13px; }
.profile-placeholder strong { flex: 1; color: rgba(245,248,244,.58); font-family: var(--mono); font-size: 7px; font-weight: 400; }
.profile-placeholder button { border: 0; padding: 0; color: var(--red); background: transparent; font-family: var(--mono); font-size: 7px; }
.profile-placeholder button span { margin-left: 3px; font-size: 12px; }
.recent-destination { width: 100%; min-height: 59px; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 2px; color: var(--ink); background: rgba(255,255,255,.025); text-align: left; }
.recent-destination:hover { border-color: rgba(0,240,255,.52); background: rgba(0,240,255,.04); }
.recent-icon { width: 22px; color: var(--red); font-family: var(--mono); font-size: 15px; }
.recent-destination div { flex: 1; min-width: 0; }
.recent-destination strong { color: var(--ink); font-family: var(--mono); font-size: 8px; font-weight: 400; }
.recent-destination strong small { display: inline; margin-left: 3px; color: rgba(245,248,244,.42); font: 400 7px var(--mono); }
.recent-destination div > small { display: block; margin-top: 5px; color: rgba(245,248,244,.38); font-family: var(--mono); font-size: 6px; }
.recent-destination > span:last-child { color: var(--red); font-family: var(--mono); font-size: 14px; }

@media (max-width: 360px) {
  .login-button { padding: 8px; }
  .login-button strong { font-size: 6px; }
  .profile-section { margin-top: 27px; }
}

/* v1.2.0 — cyber aqua / neon crimson palette */
.desktop-backdrop {
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 240, 255, .09), transparent 32%),
    radial-gradient(circle at 90% 82%, rgba(255, 42, 95, .08), transparent 34%),
    #050809;
}

.phone-app {
  border-color: #02070a;
  box-shadow: 0 0 0 1px #1c333b, 0 0 0 4px #010304, 0 0 80px rgba(0, 240, 255, .08), 0 0 80px rgba(255, 42, 95, .06);
}

.phone-app::before { box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 1px 0 rgba(0,240,255,.14); }
.phone-app::after { background: #244550; box-shadow: 0 -78px 0 #244550, 0 77px 0 #244550; }
.app-header { border-bottom-color: rgba(0,240,255,.14); }
.brand-eyebrow, .section-head > span, .text-action:hover, .answer-action:hover { color: var(--sky); }
.brand strong span { color: var(--red); }
.status-dot { background: var(--sky); box-shadow: 0 0 0 3px rgba(0,240,255,.1), 0 0 12px rgba(0,240,255,.9); }

.home-screen {
  background:
    radial-gradient(circle at 50% 35%, rgba(0,240,255,.06), transparent 33%),
    radial-gradient(circle at 82% 74%, rgba(255,42,95,.035), transparent 28%);
}
.home-screen::before { border-color: rgba(0,240,255,.16); }
.home-screen::after { border-color: rgba(255,42,95,.16); }

.voice-button {
  border-color: rgba(0,240,255,.68);
  color: var(--sky);
  background: radial-gradient(circle at 32% 26%, rgba(0,240,255,.22), transparent 36%), radial-gradient(circle at 72% 74%, rgba(255,42,95,.16), transparent 53%), #0a1418;
  box-shadow: 0 0 0 1px rgba(0,240,255,.09), 0 0 28px rgba(0,240,255,.13), 0 0 35px rgba(255,42,95,.08);
}
.voice-button::before { border-color: rgba(0,240,255,.62); background: radial-gradient(circle at 35% 30%, rgba(0,240,255,.34), transparent 44%), rgba(255,42,95,.06); }
.voice-button::after { border-color: rgba(255,42,95,.27); }
.voice-button:hover, .voice-button.listening {
  color: #fff;
  border-color: var(--red);
  background: radial-gradient(circle at 35% 28%, rgba(0,240,255,.34), transparent 36%), radial-gradient(circle at 65% 76%, rgba(255,42,95,.26), transparent 52%), #0a1418;
  box-shadow: 0 0 0 1px rgba(255,42,95,.24), 0 0 38px rgba(0,240,255,.2), 0 0 42px rgba(255,42,95,.12);
}
.voice-ring { border-color: rgba(0,240,255,.36); }
.waveform i { background: var(--sky); }

.search-row input { border-color: rgba(0,240,255,.24); background: rgba(0,240,255,.025); }
.search-row input:focus { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(0,240,255,.1); }
.search-row button, .primary-button { border-color: rgba(0,240,255,.8); color: #fff; background: rgba(0,240,255,.035); }
.search-row button:hover, .primary-button:hover { border-color: transparent; color: #050809; background: var(--dual); box-shadow: 0 0 24px rgba(0,240,255,.15), 0 0 24px rgba(255,42,95,.12); }
.era-options button:hover, .era-options button.selected { border-color: var(--sky); color: #050809; background: var(--sky); box-shadow: 0 0 14px rgba(0,240,255,.14); }
.era-options button.selected small { color: #050809; }

.recommendation-card {
  border-color: rgba(0,240,255,.28);
  background: linear-gradient(118deg, rgba(7,17,22,.95), rgba(14,35,42,.78)), radial-gradient(circle at 83% 20%, rgba(0,240,255,.22), transparent 20%), radial-gradient(circle at 18% 76%, rgba(255,42,95,.13), transparent 27%), linear-gradient(153deg, #172326 0%, #14343b 50%, #0a1518 100%);
}
.recommendation-card::before { background: linear-gradient(158deg, transparent 39%, rgba(0,240,255,.18) 40% 41%, transparent 42%), repeating-linear-gradient(90deg, transparent 0 26px, rgba(0,0,0,.48) 27px 32px, transparent 33px 67px); }
.recommendation-card::after { border-color: rgba(255,42,95,.34); box-shadow: 0 0 0 14px rgba(255,42,95,.06), 0 0 0 29px rgba(0,240,255,.035); }
.recommendation-card:hover { border-color: var(--sky); box-shadow: 0 17px 35px rgba(0,0,0,.22), 0 0 24px rgba(0,240,255,.1); }
.rec-arrow { color: var(--red); }

.bottom-nav { border-top-color: rgba(0,240,255,.16); }
.nav-button.active { color: var(--red); text-shadow: 0 0 12px rgba(255,42,95,.28); }
.nav-button:hover { color: var(--sky); }

.plan-version-card:hover, .plan-version-card.expanded { border-color: rgba(0,240,255,.56); background: rgba(0,240,255,.035); }
.plan-version-detail .plan-item em { color: var(--sky); }
.translate-button { border-color: rgba(0,240,255,.7); background: rgba(0,240,255,.035); }
.translate-button:hover { color: #050809; background: var(--dual); }
.translate-button.listening { color: #050809; background: var(--dual); box-shadow: 0 0 26px rgba(0,240,255,.18), 0 0 26px rgba(255,42,95,.12); }
.translation-output:not(:empty) { color: var(--red) !important; }
.tool-card:hover { border-color: rgba(0,240,255,.65); background: rgba(0,240,255,.035); }
.tool-icon { border-color: rgba(0,240,255,.55); color: var(--red); }

.service-context-bar, .translator-card, .tool-card, .service-card, .login-button, .recent-destination { border-color: rgba(0,240,255,.13); }
.context-pulse { background: var(--sky); box-shadow: 0 0 9px rgba(0,240,255,.9); }
.context-live, .service-match { color: var(--sky); }
.service-card:hover { border-color: rgba(0,240,255,.7); background: rgba(0,240,255,.04); }
.service-icon { border-color: rgba(0,240,255,.54); }
.service-modal { border-color: rgba(0,240,255,.34); background: linear-gradient(145deg, rgba(15,34,42,.98), rgba(8,17,21,.99)); }
.service-modal-icon { border-color: rgba(0,240,255,.65); background: rgba(0,240,255,.07); }
.service-match-item > b, .route-tags b { color: var(--sky); }
.route-card, .ticket-preview, .arrival-preview, .esim-preview { border-color: rgba(0,240,255,.28); background: rgba(0,240,255,.035); }
.route-tags b { border-color: rgba(0,240,255,.26); }
.qr-placeholder { background: repeating-linear-gradient(45deg, #080e10 0 3px, #f5f8f4 3px 6px, #080e10 6px 9px), repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0,240,255,.7) 4px 6px); }

.profile-settings:hover, .login-button:hover, .recent-destination:hover { border-color: rgba(0,240,255,.7); background: rgba(0,240,255,.055); box-shadow: 0 0 16px rgba(0,240,255,.08); }
.profile-settings:hover { color: var(--sky); }
.login-button:hover span { color: var(--red); }
.profile-placeholder button:hover { color: var(--sky); }
.toast { border-color: rgba(0,240,255,.38); background: #0a171c; box-shadow: 0 8px 25px rgba(0,0,0,.3), 0 0 18px rgba(0,240,255,.08); }

/* v1.3.0 — GO CHINA / light editorial travel surface */
:root {
  --ink: #11242d;
  --muted: #5b737c;
  --paper: #ffffff;
  --card: #eef8fa;
  --card-soft: #e5f2f5;
  --line: rgba(18, 65, 80, .16);
  --red: #ef2f64;
  --red-soft: rgba(239, 47, 100, .11);
  --sky: #008ea3;
  --sky-bright: #00cfe0;
  --sky-soft: rgba(0, 142, 163, .12);
  --green: #008ea3;
  --deep: #0d1f29;
  --dual: linear-gradient(135deg, #00cfe0 0%, #ff2a5f 100%);
}

html, body { color: var(--ink); background: #eef8fa; }
body { -webkit-font-smoothing: antialiased; }
.desktop-backdrop {
  background:
    radial-gradient(circle at 8% 12%, rgba(0, 207, 224, .14), transparent 28%),
    radial-gradient(circle at 92% 84%, rgba(239, 47, 100, .1), transparent 30%),
    #eef8fa;
}
.phone-app {
  background: var(--paper);
  box-shadow: 0 0 0 1px #8aaab3, 0 0 0 4px #061118, 0 0 70px rgba(30, 84, 98, .2);
}
.phone-app::before { box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 1px 0 rgba(0,142,163,.2); }
.phone-app::after { background: #294b56; box-shadow: 0 -78px 0 #294b56, 0 77px 0 #294b56; }
.app-header { border-bottom-color: rgba(18,65,80,.14); background: rgba(255,255,255,.94); }
.brand-eyebrow, .eyebrow.sky { color: var(--sky) !important; }
.brand strong { color: var(--ink); }
.brand strong span { color: var(--red); }
.header-status { color: #5f7881; }
.status-dot { background: var(--sky-bright); box-shadow: 0 0 0 3px rgba(0,207,224,.13), 0 0 12px rgba(0,207,224,.75); }
.app-content { scrollbar-color: rgba(0,142,163,.35) transparent; }
.tab-screen { color: var(--ink); }
.screen-heading h1, .home-greeting h2, .home-greeting p { color: var(--ink); }
.screen-heading p:not(.eyebrow), .home-greeting > span, .voice-zone > span:not(.voice-transcript) { color: #637c85; }
.text-action { color: var(--sky); }
.text-action:hover { color: var(--red); }

.home-screen {
  background:
    radial-gradient(circle at 50% 32%, rgba(0,207,224,.09), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(239,47,100,.055), transparent 28%),
    #ffffff;
}
.home-screen::before { border-color: rgba(0,142,163,.18); }
.home-screen::after { border-color: rgba(239,47,100,.15); }
.home-greeting h2 { color: var(--ink); }
.voice-button {
  border-color: rgba(0,142,163,.68);
  color: var(--sky);
  background: radial-gradient(circle at 30% 26%, rgba(0,207,224,.2), transparent 36%), radial-gradient(circle at 72% 75%, rgba(239,47,100,.14), transparent 53%), #f7feff;
  box-shadow: 0 0 0 1px rgba(0,142,163,.08), 0 0 28px rgba(0,207,224,.16), 0 0 32px rgba(239,47,100,.08);
}
.voice-button::before { border-color: rgba(0,142,163,.54); background: radial-gradient(circle at 35% 30%, rgba(0,207,224,.24), transparent 44%), rgba(239,47,100,.045); }
.voice-button::after { border-color: rgba(239,47,100,.24); }
.voice-button:hover, .voice-button.listening {
  color: #ffffff;
  border-color: var(--red);
  background: var(--dual);
  box-shadow: 0 0 0 1px rgba(239,47,100,.2), 0 0 30px rgba(0,207,224,.22), 0 0 38px rgba(239,47,100,.14);
}
.voice-ring { border-color: rgba(0,142,163,.34); }
.voice-zone > strong { color: var(--ink); }
.voice-transcript, .waveform i { color: var(--sky); background-color: var(--sky); }

.search-row input { border-color: rgba(0,142,163,.28); color: var(--ink); background: #ffffff; }
.search-row input::placeholder, textarea::placeholder { color: #8098a0; }
.search-row input:focus { border-color: var(--sky); box-shadow: 0 0 0 2px rgba(0,142,163,.12); }
.search-row button, .primary-button { border-color: var(--sky); color: #ffffff; background: var(--deep); }
.search-row button:hover, .primary-button:hover { border-color: transparent; color: #ffffff; background: var(--dual); box-shadow: 0 0 22px rgba(0,207,224,.18), 0 0 24px rgba(239,47,100,.12); }
.era-options button { border-color: rgba(18,65,80,.18); color: #58747d; background: #f2fafb; }
.era-options button:hover, .era-options button.selected { border-color: var(--sky); color: #062b34; background: var(--sky-bright); box-shadow: 0 0 14px rgba(0,207,224,.18); }
.era-options button.selected small { color: #062b34; }

/* v1.5.4 — public delivery is a full-screen app, not a phone inside a page */
.published-mode,
.published-mode body { min-width: 0; }
.published-mode body { overflow-x: hidden; background: #ffffff; }
.published-mode .desktop-backdrop { display: none; }
.published-mode .phone-app {
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.published-mode .phone-app::before,
.published-mode .phone-app::after { display: none; }
.published-mode .app-header,
.published-mode .bottom-nav { border-radius: 0; }
.published-mode .app-header { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.published-mode .app-content { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.published-mode .tab-screen { width: min(100%, 720px); margin-left: auto; margin-right: auto; }
.published-mode .explore-screen { width: 100%; max-width: none; }

.recommendation-card {
  border-color: rgba(0,142,163,.3);
  color: var(--ink);
  background: linear-gradient(118deg, rgba(255,255,255,.98), rgba(239,250,252,.96)), radial-gradient(circle at 83% 20%, rgba(0,207,224,.16), transparent 20%), radial-gradient(circle at 18% 76%, rgba(239,47,100,.1), transparent 27%);
  box-shadow: 0 17px 35px rgba(30,84,98,.1);
}
.recommendation-card::before { background: linear-gradient(158deg, transparent 39%, rgba(0,142,163,.14) 40% 41%, transparent 42%), repeating-linear-gradient(90deg, transparent 0 26px, rgba(33,104,119,.12) 27px 32px, transparent 33px 67px); }
.recommendation-card::after { border-color: rgba(239,47,100,.28); box-shadow: 0 0 0 14px rgba(239,47,100,.045), 0 0 0 29px rgba(0,207,224,.04); }
.recommendation-card:hover { border-color: var(--sky); box-shadow: 0 17px 35px rgba(30,84,98,.12), 0 0 22px rgba(0,207,224,.12); }
.recommendation-card h3 { color: var(--ink); }
.recommendation-card p, .recommendation-card small { color: #66818a; }
.tag-row span { color: #28606d; background: rgba(0,207,224,.11); }
.rec-arrow { color: var(--red); }

.empty-state p, .result-summary { color: #66818a; }
.empty-state h2, .saved-plan h2 { color: var(--ink); }
.saved-plan, .plan-version-card { border-color: rgba(18,65,80,.16); background: #f7fcfd; }
.plan-library-head, .profile-section-head { border-bottom-color: rgba(18,65,80,.15); }
.plan-library-head h2, .plan-version-main strong, .plan-version-detail .plan-item strong { color: var(--ink); }
.plan-library-actions > span, .plan-version-main small, .plan-detail-meta > strong, .plan-version-detail .plan-item span { color: #6d8790; }
.plan-version-main b { color: #41616b; }
.plan-version-card:hover, .plan-version-card.expanded { border-color: rgba(0,142,163,.5); background: rgba(0,207,224,.07); }
.plan-version-detail .plan-item em { color: var(--sky); }
.plan-item, .saved-timeline, .plan-timeline { border-color: rgba(18,65,80,.14); }

.translator-card { border-color: rgba(0,142,163,.22); background: #fbfeff; color: var(--ink); box-shadow: 0 12px 28px rgba(30,84,98,.08); }
.language-row { border-bottom-color: rgba(18,65,80,.13); color: var(--ink); background: #eef9fb; }
.translation-workspace textarea { color: var(--ink); background: #ffffff; border-bottom-color: rgba(18,65,80,.18); }
.translation-status { color: #66818a !important; }
.translation-output:not(:empty) { color: var(--red) !important; }
.translate-button { border-color: var(--sky); color: #ffffff; background: var(--deep); }
.translate-button:hover, .translate-button.listening { color: #ffffff; background: var(--dual); }
.translate-button small { color: rgba(255,255,255,.64); }
.tool-card { border-color: rgba(0,142,163,.16); color: var(--ink); background: #eef8fa; box-shadow: 0 8px 18px rgba(30,84,98,.06); }
.tool-card:hover { border-color: var(--sky); background: #e4f6f8; }
.tool-card strong { color: var(--ink); }
.tool-card small { color: #68828b; }
.tool-icon { border-color: rgba(0,142,163,.48); color: var(--red); }

.service-heading .screen-subline, .translate-heading .screen-subline { color: #718990; }
.service-context-bar { border-color: rgba(0,142,163,.2); color: #66818a; background: #f1fafb; }
.service-context-bar strong { color: var(--ink); }
.context-pulse { background: var(--sky-bright); box-shadow: 0 0 9px rgba(0,207,224,.75); }
.context-live, .service-match { color: var(--sky); }
.service-card { border-color: rgba(0,142,163,.16); color: var(--ink); background: #f1fafb; box-shadow: 0 8px 18px rgba(30,84,98,.06); }
.service-card:hover { border-color: var(--sky); background: #e5f7f9; }
.service-icon { border-color: var(--sky); color: #062b34; background: var(--sky-bright); }
.service-card strong { color: var(--ink); }
.service-card small { color: #68828b; }
.service-card i { color: var(--red); }

.explore-screen { background: #ffffff; }
.keyword-pill { color: #176171; background: #e7f7f9; }
.explore-hero h1, .explore-content h3, .episode-copy h3 { color: var(--ink); }
.explore-hero h2 { color: var(--red); }
.explore-hero > p:not(.eyebrow), .episode-copy > p:not(.eyebrow), .scene-status, .topic-count { color: #66818a; }
.source-line { border-bottom-color: rgba(18,65,80,.15); color: #66818a; }
.keyword-chat { border-color: rgba(0,142,163,.16); background: #f1fafb; }
.chat-heading { border-bottom-color: rgba(18,65,80,.14); }
.chat-heading > div span, .keyword-messages { color: #66818a; }
.online-tag { color: var(--sky); }
.keyword-user span { color: #145766; background: #dff5f7; }
.keyword-answer { color: #456b75; background: #eaf7f9; }
.keyword-composer { border-color: rgba(0,142,163,.22); background: #ffffff; }
.keyword-composer input { color: var(--ink); background: #ffffff; }
.send-button { background: var(--red); }
.send-button:hover { background: var(--sky-bright); }

.profile-settings { border-color: rgba(18,65,80,.2); color: #5d7780; }
.profile-settings:hover { border-color: var(--sky); color: var(--sky); background: rgba(0,207,224,.1); }
.login-card-head > span, .profile-section-head > span { color: #718990; }
.login-button { border-color: rgba(0,142,163,.18); color: var(--ink); background: #f5fbfc; }
.login-button:hover { border-color: var(--sky); color: var(--ink); background: #e5f7f9; box-shadow: 0 0 16px rgba(0,207,224,.1); }
.login-button span { color: #5d7780; }
.login-button:hover span { color: var(--red); }
.profile-section-head h2, .profile-placeholder strong, .recent-destination strong { color: var(--ink); }
.profile-placeholder { border-color: rgba(0,142,163,.24); color: #66818a; background: #fbfeff; }
.profile-placeholder button { color: var(--red); }
.profile-placeholder button:hover { color: var(--sky); }
.recent-destination { border-color: rgba(0,142,163,.18); color: var(--ink); background: #f1fafb; }
.recent-destination:hover { border-color: var(--sky); background: #e5f7f9; }
.recent-destination strong small, .recent-destination div > small { color: #6d8790; }
.recent-destination > span:last-child { color: var(--red); }

.bottom-nav { border-top-color: rgba(18,65,80,.15); background: rgba(255,255,255,.97); }
.nav-button { color: #78939b; }
.nav-button.active { color: var(--red); text-shadow: 0 0 12px rgba(239,47,100,.22); }
.nav-button:hover { color: var(--sky); }

.loading-layer, .sheet-layer, .service-layer { background: rgba(211,235,239,.52); }
.loading-card, .plan-sheet, .service-modal { border-color: rgba(0,142,163,.28); color: var(--ink); background: rgba(255,255,255,.98); box-shadow: 0 -15px 50px rgba(30,84,98,.2); }
.loading-card h2, .plan-sheet h2, .service-modal h2 { color: var(--ink); }
.loading-card > p:not(.eyebrow), .sheet-intro, .service-modal > p:not(.eyebrow) { color: #66818a; }
.loading-steps, .guide-steps, .service-match-list { border-color: rgba(18,65,80,.14); }
.loading-step { border-color: rgba(18,65,80,.12); color: #78939b; }
.loading-step.active { color: var(--ink); }
.loading-step.done { color: #2f7a86; }
.sheet-close, .sheet-back { color: #5f7b84; }
.option-row button, .interest-row button { border-color: rgba(0,142,163,.2); color: #5f7b84; background: #f1fafb; }
.option-row button.selected, .interest-row button.selected { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.service-modal-icon { border-color: var(--sky); color: #062b34; background: var(--sky-bright); }
.service-match-item small, .guide-steps small, .ticket-preview small, .arrival-preview small, .esim-preview small { color: #6d8790; }
.service-match-item > b, .route-tags b { color: var(--sky); }
.route-card, .ticket-preview, .arrival-preview, .esim-preview { border-color: rgba(0,142,163,.2); background: #f1fafb; }
.route-line strong, .ticket-preview strong, .arrival-preview strong, .esim-preview strong, .guide-steps strong { color: var(--ink); }
.route-tags b { border-color: rgba(0,142,163,.24); }
.toast { border-color: rgba(0,142,163,.32); color: var(--ink); background: #ffffff; box-shadow: 0 8px 25px rgba(30,84,98,.16), 0 0 18px rgba(0,207,224,.08); }

/* v1.5.2 — readable hierarchy / bold navigation / era labels */
.brand strong { font-weight: 700; }
.header-status { font-weight: 600; }
.eyebrow { font-weight: 600; }
.screen-heading h1 { font-weight: 600; }
.home-greeting p { font-weight: 600; }
.home-greeting h2 { font-size: 28px; font-weight: 600; letter-spacing: -.045em; }
.home-greeting > span { font-weight: 500; }
.text-action, .secondary-button, .search-row button, .primary-button { font-weight: 600; }
.section-head strong { font-weight: 600; }
.recommendation-block .section-head > div > strong { font-weight: 600; }
.recommendation-card h3 { font-weight: 600; }
.recommendation-card p, .recommendation-card small { font-weight: 500; }
.plan-library-head h2, .plan-version-main strong, .plan-version-detail .plan-item strong { font-weight: 600; }
.plan-version-main b, .plan-version-detail .plan-item span { font-weight: 500; }
.translate-heading h1, .service-heading h1, .profile-heading h1 { font-weight: 600; }
.tool-card strong, .service-card strong { font-weight: 600; }
.tool-card small, .service-card small { font-weight: 500; }
.service-context-bar strong { font-weight: 600; }
.service-modal h2, .plan-sheet h2 { font-weight: 600; }
.service-match-item strong, .guide-steps strong, .route-line strong, .ticket-preview strong, .arrival-preview strong, .esim-preview strong { font-weight: 600; }
.login-card-head strong, .login-button strong { font-weight: 600; }
.profile-section-head h2, .profile-placeholder strong, .recent-destination strong { font-weight: 600; }
.nav-button { font-weight: 600; }
.nav-button span { font-size: 8px; font-weight: 700; letter-spacing: .03em; }
.nav-button svg { stroke-width: 1.7; }
.loading-card h2 { font-weight: 600; }
.nav-button { font-size: 8px; }
.era-options button { font-weight: 600; }
.era-options button small { font-weight: 500; }

/* v1.5.2 — the era selector must be readable at a glance on a phone */
.era-picker .section-head strong { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.era-picker .section-head > span { font-size: 8px; font-weight: 600; }
.era-options { gap: 9px; margin-top: 12px; padding: 2px 1px 8px; }
.era-options button {
  min-width: 72px;
  padding: 9px 10px 8px;
  border: 1.5px solid rgba(18,65,80,.2);
  color: #315b65;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}
.era-options button[data-era="明清"],
.era-options button[data-era="近代"] { min-width: 92px; }
.era-options button[data-era="今天"] { min-width: 78px; }
.era-options button[data-era="唐朝"] { min-width: 84px; }
.era-options button span {
  display: block;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.era-options button small {
  display: block;
  margin-top: 5px;
  color: #557780;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.era-options button:hover,
.era-options button.selected {
  color: #062b34;
  background: var(--sky-bright);
}
.era-options button.selected small { color: #062b34; }