:root { --navy:#062f56; --blue:#0878b8; --sky:#37b4d7; --gold:#c99b48; --ink:#122235; --muted:#667789; --line:#dce6ed; --paper:#f4f8fb; --white:#fff; }
* { box-sizing:border-box; }
html { background:#dfe8ee; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#e9f1f6,#d6e3eb); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.app-shell { width:100%; max-width:520px; min-height:100vh; margin:0 auto; background:var(--paper); box-shadow:0 0 50px rgba(0,32,57,.13); overflow:hidden; }
.brand-bar { height:80px; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(110deg,#052d52,#075c91); }
.brand { display:flex; gap:11px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#d8b66c; font-size:23px; }
.brand strong,.brand small { display:block; }.brand strong { font-size:16px; letter-spacing:.08em; }.brand small { margin-top:3px; opacity:.72; font-size:10px; letter-spacing:.06em; }
.floor-chip { padding:7px 10px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:11px; background:rgba(255,255,255,.1); }
.view { display:none; }.view.active { display:block; }
.search-view { padding-bottom:28px; }
.hero { position:relative; min-height:247px; padding:38px 24px 64px; color:#fff; overflow:hidden; background:radial-gradient(circle at 90% 0,rgba(44,179,214,.45),transparent 42%),linear-gradient(155deg,#06385f,#075f91); }
.hero:after { content:"S2"; position:absolute; right:-14px; bottom:-43px; color:rgba(255,255,255,.055); font-weight:800; font-size:170px; letter-spacing:-.1em; }
.eyebrow { margin:0 0 17px; color:#7fd0e8; font-size:10px; letter-spacing:.15em; }
.hero h1 { position:relative; z-index:1; margin:0; font-size:34px; line-height:1.22; letter-spacing:-.04em; }.hero h1 em { color:#e8c77e; font-style:normal; }
.hero-copy { position:relative; z-index:1; max-width:330px; margin:17px 0 0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.7; }
.search-card { position:relative; z-index:2; margin:-35px 18px 18px; padding:24px 20px 20px; border-radius:20px; background:#fff; box-shadow:0 15px 40px rgba(4,42,72,.13); }
.search-card label { display:block; margin-bottom:12px; font-size:14px; font-weight:700; }
.input-wrap { display:flex; align-items:center; height:58px; padding:0 16px; border:1.5px solid #cfdce5; border-radius:13px; transition:.2s; }.input-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px rgba(8,120,184,.08); }
.input-wrap span { padding-right:13px; border-right:1px solid var(--line); color:var(--blue); font-size:20px; font-weight:800; }.input-wrap input { width:100%; height:100%; padding:0 14px; border:0; outline:0; color:var(--ink); font-size:22px; font-weight:700; background:transparent; }.input-wrap input::placeholder { color:#a8b5bf; font-weight:500; }
.field-hint,.field-error { margin:9px 2px 0; font-size:11px; }.field-hint { color:var(--muted); }.field-error { min-height:16px; color:#c84545; }
.primary-button,.secondary-button { min-height:52px; border:0; border-radius:13px; font-weight:700; cursor:pointer; }.primary-button { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; color:#fff; background:linear-gradient(105deg,#075283,#078abf); box-shadow:0 8px 20px rgba(6,105,157,.22); }.primary-button span { font-size:20px; }.search-card .primary-button { margin-top:8px; }
.service-note { margin:17px 30px 0; color:#8a99a5; text-align:center; font-size:10px; line-height:1.55; }
.route-view { padding:0 18px 26px; }.route-heading { margin:0 -18px; padding:22px 20px; display:flex; gap:12px; align-items:center; color:#fff; background:linear-gradient(110deg,#052d52,#075c91); }.route-heading p,.route-heading h2 { margin:0; }.route-heading p { margin-bottom:4px; color:#a9d8e8; font-size:12px; }.route-heading h2 { font-size:18px; }.route-heading strong { color:#f0c875; }.icon-button { width:38px; height:38px; padding:0 0 4px; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; background:rgba(255,255,255,.08); font-size:32px; cursor:pointer; }
.progress { display:flex; align-items:center; justify-content:center; margin:19px 20px 16px; }.progress-dot { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#8494a0; font-size:11px; font-weight:800; background:#e0e8ed; }.progress-dot.active { color:#fff; background:var(--blue); box-shadow:0 0 0 4px rgba(8,120,184,.1); }.progress i { width:54px; height:2px; background:#d7e1e7; }.progress i.done { background:var(--sky); }
.step-card { border-radius:19px; overflow:hidden; background:#fff; box-shadow:0 12px 36px rgba(7,47,78,.12); }.photo-wrap { position:relative; aspect-ratio:16/10; overflow:hidden; background:#dbe3e8; }.photo-wrap .route-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; pointer-events:none; }.photo-wrap .route-photo.active { opacity:1; visibility:visible; }.step-badge { position:absolute; left:13px; top:13px; padding:7px 10px; border-radius:999px; color:#fff; font-size:10px; font-weight:700; background:rgba(3,36,62,.84); backdrop-filter:blur(8px); }.zoom-button { position:absolute; right:12px; bottom:12px; width:37px; height:37px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:#fff; background:rgba(3,36,62,.72); font-size:22px; cursor:pointer; }
.step-copy { padding:20px; }.step-kicker { margin:0 0 5px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.08em; }.step-copy h3 { margin:0; font-size:22px; }.step-copy>p:not(.step-kicker) { margin:10px 0 17px; color:var(--muted); font-size:13px; line-height:1.7; }.landmark { display:flex; gap:11px; padding:12px; border-radius:12px; background:#f1f7fa; }.landmark>span { color:var(--blue); font-size:18px; }.landmark p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }.landmark strong { color:var(--ink); font-size:11px; }
.route-actions { display:flex; gap:10px; margin-top:16px; }.route-actions .secondary-button { width:34%; color:var(--navy); background:#e4edf2; }.hidden { display:none!important; }
.image-dialog { width:min(94vw,900px); max-width:none; padding:0; border:0; border-radius:16px; color:#fff; background:#071722; box-shadow:0 30px 80px rgba(0,0,0,.45); }.image-dialog::backdrop { background:rgba(0,15,27,.8); backdrop-filter:blur(4px); }.image-dialog img { display:block; width:100%; max-height:78vh; object-fit:contain; }.image-dialog button { position:absolute; right:10px; top:10px; z-index:2; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.6); font-size:25px; cursor:pointer; }.image-dialog p { margin:0; padding:13px 16px; font-size:12px; }
@media (min-width:521px) { body { padding:24px 0; }.app-shell { min-height:calc(100vh - 48px); border-radius:24px; }.brand-bar { border-radius:24px 24px 0 0; } }
@media (prefers-reduced-motion:no-preference) { .view.active { animation:fade-in .28s ease; }.step-card { animation:rise .28s ease; } @keyframes fade-in { from{opacity:0} } @keyframes rise { from{opacity:.3;transform:translateY(8px)} } }