:root{--lime:#cdff17;--ink:#111;--paper:#f5f5f1;--white:#fff;--muted:#777;--line:#e4e4df;--red:#ff583b;--yellow:#f2b45d;--purple:#7765ff;--blue:#65d8f5;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(205,255,23,.3)}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#e8e8e4;color:var(--ink)}
button,input{font:inherit}
.stage{min-height:100dvh;display:grid;place-content:center;gap:9px;padding:14px}
.phone{position:relative;width:min(390px,calc(100vw - 20px));height:min(844px,calc(100dvh - 50px));min-height:650px;background:var(--paper);border:8px solid #111;border-radius:46px;overflow:hidden;box-shadow:0 24px 55px #0003}
.status{height:39px;background:#fff;padding:12px 17px 0;display:flex;justify-content:space-between;font-size:10px;position:relative;z-index:20}
.viewport{height:calc(100% - 39px);overflow:hidden}
.scroll{height:calc(100% - 66px);overflow:auto;padding:16px 18px 28px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.detail-scroll{height:100%;overflow:auto;padding:14px 18px 30px;scrollbar-width:none}
.title-row{display:flex;justify-content:space-between;align-items:flex-start}
.title-row h1,.title-row h2{margin:0;letter-spacing:-.07em;line-height:1}
.title-row h1{font-size:32px}
.title-row h2{font-size:25px}
.sub{font-size:12px;color:var(--muted);margin:5px 0 14px}
.icon-btn,.back{width:44px;height:44px;border:0;border-radius:50%;background:#fff;font-weight:850;box-shadow:0 3px 14px #0000000b}
.back{font-size:25px;box-shadow:none;background:transparent}
.hero-copy{padding-top:5px}
.hero-copy h1{font-size:34px;line-height:1.08;letter-spacing:-.07em;margin:14px 0 7px}
.signal-pill{display:inline-flex;gap:7px;align-items:center;background:#fff;border-radius:20px;padding:8px 11px;font-size:12px}
.signal-pill:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #eaff9b}
.hero-art{height:250px;margin:4px -18px -5px;display:flex;align-items:end;justify-content:center;overflow:hidden}
.hero-art img{width:112%;max-width:none;animation:float 4s var(--ease) infinite}
.stack{display:grid;gap:9px}
.primary,.secondary{min-height:50px;border:0;border-radius:28px;font-weight:850}
.primary{background:var(--lime)}
.primary.dark{background:#111;color:#fff}
.secondary{background:#e8e8e4}
.primary:active,.secondary:active,.card:active{transform:scale(.985)}
.nav{height:66px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 3px 8px}
.nav button{border:0;background:transparent;display:grid;place-items:center;align-content:center;gap:3px;font-size:10px;color:#777;min-width:44px}
.nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nav .active{font-weight:850;color:#111}
.nav .active svg{filter:drop-shadow(0 0 0 var(--lime));background:var(--lime);box-shadow:0 0 0 4px var(--lime);border-radius:50%}
.chips{display:flex;gap:7px;overflow:auto;margin:9px 0 12px;scrollbar-width:none}
.chip{border:0;border-radius:18px;padding:8px 13px;background:#e9e9e5;font-size:12px;white-space:nowrap}
.chip.active{background:#111;color:#fff}
.map-shell{height:100%;position:relative;background:#edf1e8;overflow:hidden}
.viewport>.map-shell{height:calc(100% - 66px)}
.map-head{position:absolute;z-index:5;top:14px;left:18px;right:18px}
.map-head h1{font-size:30px;margin:0;letter-spacing:-.06em}
.map-layer{position:absolute;inset:76px -95px 102px;background:url('assets/map.png') center/cover no-repeat;touch-action:none;will-change:transform}
.map-layer:after{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff12,#ffffff12)}
.map-controls{position:absolute;right:14px;top:110px;z-index:7;display:grid;gap:7px}
.map-controls button{width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 14px #0002;font-size:20px}
.map-sheet{position:absolute;z-index:8;left:12px;right:12px;bottom:76px;background:#fff;border-radius:20px;padding:13px;box-shadow:0 7px 22px #0002}
.map-sheet b{font-size:13px}
.map-sheet p{font-size:11px;color:#777;margin:4px 0 10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.faces{display:flex}
.face{width:31px;height:31px;border-radius:50%;margin-left:-5px;border:2px solid #fff;background:var(--c);display:grid;place-items:center;font-size:11px;font-weight:900}
.face:first-child{margin-left:0}
.pulse{position:absolute;width:72px;height:72px;border:1.5px dashed var(--c);border-radius:50%;animation:pulse 3s infinite}
.p1{--c:#8d72ff;left:26%;top:27%}
.p2{--c:#ff7156;right:24%;top:41%;animation-delay:.8s}
.p3{--c:#e8c32f;left:35%;top:58%;animation-delay:1.4s}
.cards{display:grid;gap:11px}
.card{border:0;width:100%;text-align:left;background:#fff;border-radius:16px;padding:14px;transition:transform .18s ease}
.poster{min-height:155px;color:#fff;position:relative;overflow:hidden;border-radius:5px;background:var(--bg)}
.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0007,transparent 72%)}
.poster>*{position:relative;z-index:2}
.poster h2{font-size:30px;margin:4px 0 0;letter-spacing:-.06em}
.poster p{font-size:12px;margin:4px 0}
.poster img{position:absolute;z-index:1;width:170px;right:-15px;bottom:-25px}
.spots{position:absolute;right:11px;top:11px;background:var(--lime);color:#111;border-radius:18px;padding:6px 9px;font-size:10px;font-weight:850}
.detail-hero{margin:-14px -18px 12px;background:var(--red);color:#fff;min-height:310px;padding:18px;position:relative;overflow:hidden}
.detail-hero h1{font-size:46px;margin:12px 0 4px;letter-spacing:-.08em}
.detail-hero>*:not(img){position:relative;z-index:2}
.detail-hero img{position:absolute;width:115%;left:-7%;bottom:-22%}
.white-block{background:#fff;border-radius:17px;padding:14px;margin:10px 0}
.white-block h3{font-size:15px;margin:0 0 7px}
.white-block p{font-size:12px;color:#666;line-height:1.55;margin:4px 0}
.actions{display:flex;gap:8px;position:sticky;bottom:-20px;background:linear-gradient(transparent,var(--paper) 28%);padding:28px 0 6px}
.actions button{flex:1}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.person{font-size:11px}
.person .blob{width:62px;height:62px;border-radius:48% 52% 46% 54%;background:var(--c);display:grid;place-items:center;margin:auto auto 6px;font-weight:900;animation:float 4s var(--ease) infinite}
.route{display:flex;justify-content:space-between;padding:14px;background:#fff;border-radius:15px;margin:9px 0;border:2px solid transparent}
.route.selected{border-color:var(--lime)}
.ticket{background:#efe0cb;padding:18px;border-radius:7px;position:relative}
.ticket h2{font-size:33px;margin:3px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.stat{background:#fff;border-radius:14px;text-align:center;padding:12px 5px;font-size:10px}
.stat b{font-size:22px;display:block}
.list{display:grid}
.item{display:flex;align-items:center;gap:10px;min-height:67px;border-bottom:1px solid var(--line);padding:7px 0;background:transparent;border-left:0;border-right:0;border-top:0;text-align:left}
.item .copy{flex:1;min-width:0}
.copy b{font-size:14px}
.copy small{display:block;font-size:11px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.profile-card{min-height:185px;border:2px solid #111;border-radius:18px;padding:16px;background:linear-gradient(135deg,#e7ff86,#d9caff 55%,#fff);position:relative;overflow:hidden}
.profile-card h2{font-size:42px;margin:8px 0}
.profile-card img{position:absolute;right:0;bottom:-15px;width:150px}
.setting{display:flex;width:100%;border:0;text-align:left;justify-content:space-between;align-items:center;background:#fff;padding:13px;border-radius:15px;margin:8px 0;font-size:13px}
.switch{width:48px;height:27px;border:0;border-radius:20px;background:var(--lime);padding:3px}
.switch:after{content:'';display:block;width:21px;height:21px;background:#fff;border-radius:50%;margin-left:21px}
.chat{height:100%;display:flex;flex-direction:column}
.chat-head{height:64px;background:#fff;display:flex;align-items:center;gap:9px;padding:8px 12px}
.chat-feed{flex:1;overflow:auto;padding:16px}
.bubble{max-width:78%;background:#fff;border-radius:16px;padding:11px 12px;margin:8px 0;font-size:13px;line-height:1.45}
.bubble.me{margin-left:auto;background:var(--lime)}
.composer{height:61px;background:#fff;display:flex;gap:7px;padding:9px}
.composer input{flex:1;min-width:0;border:0;border-radius:22px;background:#eee;padding:0 13px;font-size:16px}
.composer button{border:0;border-radius:22px;background:var(--lime);padding:0 15px;font-weight:800}
.toast{position:absolute;z-index:50;left:50%;bottom:85px;transform:translate(-50%,12px);background:#111;color:#fff;border-radius:20px;padding:10px 14px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.caption{margin:0;text-align:center;font-size:11px;color:#666}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-4px)}
}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}
85%,100%{transform:scale(1.35);opacity:0}
}
@media(max-width:540px){.stage{display:block;padding:0}
.phone{width:100%;max-width:none;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}
.caption{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
}