:root{--lake:#087f8c;--lake-deep:#123b43;--mountain:#2f7d62;--tower:#c85042;--orange:#e28b36;--green:#16a36a;--red:#d9544d;--ink:#17343b;--sub:#668087;--mist:#f3f8f6;--line:#dce9e7;--space:18px;--tab:76px;--shadow:0 10px 28px rgba(12,72,76,.13)}*{box-sizing:border-box}body{margin:0;background:#dce9e9;color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif}.app{max-width:480px;min-height:100dvh;margin:auto;background:var(--mist);padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom));position:relative;overflow:hidden}.svg-defs{position:absolute;width:0;height:0}button,input{font:inherit}button{border:0;cursor:pointer}button:active{opacity:.96}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9}.topbar{height:62px;padding:0 var(--space);background:linear-gradient(110deg,#fff,#f2faf8);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1eeeb}.topbar h1{font-size:17px;margin:0}.icon-btn{background:none;color:var(--lake);padding:8px}.back-title{display:flex;align-items:center}
/* 首页：抚仙湖水色、哀牢山层次与红塔暖色 */
.home-hero{position:relative;min-height:0;aspect-ratio:852/386;overflow:hidden;background:#e9fcfc url('./assets/home-ui-clean-v2.png') center/100% 100% no-repeat}.home-hero:before,.home-hero:after{display:none}.hero-copy{position:absolute;z-index:1;left:6.7%;top:10.5%;opacity:0}.hero-copy h1{font-size:30px;line-height:1.2;margin:0}.hero-copy p{margin:0}.tower-mark{display:none}.search{display:flex;align-items:center;gap:9px}.hero-search{position:absolute;z-index:2;left:6.7%;right:6.7%;top:51%;height:17.4%;margin:0;padding:0 15px;opacity:0}.hero-search:focus-within{opacity:1;background:#fffffff5;border-radius:999px;color:#55727a}.search input{border:0;background:transparent;outline:0;width:100%;color:var(--ink);font-size:14px}.search input::placeholder{color:#779098}.quick-actions{position:absolute;z-index:2;left:6.7%;right:6.7%;top:74.3%;height:19.5%;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2.9%;opacity:0}.quick{height:100%;padding:0 14px;border-radius:16px;display:flex;align-items:center;gap:8px;background:transparent;color:transparent;box-shadow:none}.quick svg,.quick b{opacity:0}.quick span{flex:1}.quick:focus-visible{opacity:1;background:#087f8ce8;color:#fff;outline:2px solid #fff}.quick:focus-visible svg,.quick:focus-visible b{opacity:1}
.map-section{height:calc(100dvh - 244px);min-height:440px;position:relative;overflow:hidden;background:#dbe9e7}.map-canvas{position:absolute;inset:0;background:url('./assets/yuxi-map-style-demo.png') center/cover no-repeat;transform-origin:center;touch-action:none;filter:saturate(.88) brightness(1.07)}.map-canvas:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#eafffa11 45%,#0b849722)}.map-name,.gesture-tip,.map-legend,.stat-bar,.locate-fab{position:absolute;z-index:5}.map-name{left:17px;top:18px;color:#21484e;font-weight:800;font-size:21px;text-shadow:0 1px 3px #fff}.gesture-tip{right:17px;top:20px;background:#ffffffdd;color:#507176;padding:5px 9px;border-radius:99px;font-size:10px;box-shadow:0 3px 10px #245c6130}.locate-fab{right:17px;bottom:222px;width:46px;height:46px;border-radius:50%;background:#fffffff2;color:var(--lake);box-shadow:var(--shadow)}.map-marker{position:absolute;z-index:4;width:46px;height:46px;border:4px solid #fff;border-radius:50% 50% 50% 0;box-shadow:0 4px 12px #123b4355;transform:translate(-50%,-100%) rotate(-45deg);color:#fff}.map-marker span{display:block;font-weight:800;font-size:18px;transform:rotate(45deg)}.map-marker.free,.status-dot.free{background:var(--green)}.map-marker.warning,.status-dot.warning{background:var(--orange)}.map-marker.full,.status-dot.full{background:var(--red)}.map-marker.selected{outline:4px solid #087f8c55}.map-legend{right:15px;top:72px;display:grid;gap:6px;padding:10px 12px;background:#fffffff0;border-radius:14px;box-shadow:0 6px 18px #21484d22;color:#25474d}.map-legend span{display:flex;align-items:center;gap:7px;font-weight:700}.map-legend i,.status-dot,.stat-state i{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px}.stat-bar{left:16px;right:16px;bottom:167px;height:69px;padding:9px 15px;display:flex;align-items:center;gap:10px;background:#087f8cf0;color:#fff;border:1px solid #ffffff44;border-radius:18px;box-shadow:0 8px 18px #073f4644;backdrop-filter:blur(10px)}.stat-icon{width:39px;height:39px;display:grid;place-items:center;border:2px solid #d7fffa;border-radius:50%;font-size:21px;font-weight:800}.stat-bar small{display:block;line-height:1;color:#d9fbf7}.stat-bar b{font-size:27px;line-height:1.15}.stat-bar em{width:1px;height:34px;background:#ffffff77;margin:0 2px;font-style:normal}.stat-state{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}.stat-state i{width:9px;height:9px;flex-basis:9px}.sheet{position:absolute;z-index:7;bottom:0;left:0;right:0;max-height:160px;overflow:hidden;padding:0 16px 11px;background:linear-gradient(#fff,#f8fcfb);border-radius:25px 25px 0 0;box-shadow:0 -7px 22px #123b4330}.sheet.expanded{max-height:66%;overflow:auto}.sheet-handle{position:sticky;z-index:2;top:0;width:100%;height:45px;padding:14px 0 8px;background:#fff;text-align:left;color:var(--ink);display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800}.sheet-handle i{position:absolute;top:8px;left:50%;width:37px;height:4px;border-radius:99px;background:#c5d7d8;transform:translateX(-50%)}.sheet-handle small{margin-left:auto;color:#82999c;font-size:11px;font-weight:500}.slot-card{width:100%;min-height:95px;padding:10px 4px;text-align:left;background:transparent;border-top:1px solid #e2eeec;display:flex;align-items:center;gap:11px}.lot-thumb{width:72px;height:72px;display:grid;place-items:center;flex:0 0 72px;overflow:hidden;border-radius:13px;color:#fff;background:linear-gradient(135deg,#397c70,#a5d5b1);position:relative}.lot-thumb:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 9px,#ffffff26 10px 12px)}.lot-thumb svg{position:relative;width:30px;height:30px;filter:drop-shadow(0 1px 2px #15473a)}.thumb-1{background:linear-gradient(135deg,#64b5c0,#d1eac7)}.thumb-2{background:linear-gradient(135deg,#d58c58,#f5cf80)}.slot-info{min-width:0;flex:1}.slot-info b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-info small{display:block;margin-top:5px;color:var(--sub);font-size:12px}.slot-status{padding:5px 8px;border-radius:9px;font-weight:800;font-size:13px}.slot-status.free{background:#e2f7eb;color:#168a5a}.slot-status.warning{background:#fff0df;color:#d8791b}.slot-status.full{background:#fde7e5;color:#c44d45}.card-arrow{font-size:29px;line-height:1;color:#83a0a2;font-weight:300}
.tabs{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);height:calc(var(--tab) + env(safe-area-inset-bottom));padding:7px 22px env(safe-area-inset-bottom);width:min(100%,480px);display:flex;background:#fffffff5;border-top:1px solid #deece9;box-shadow:0 -5px 18px #17343b12}.tabs button{width:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;color:#71858a;font-size:12px}.tabs button svg{width:25px;height:25px}.tabs button.active{color:var(--lake);font-weight:800}.tabs button.active svg{filter:drop-shadow(0 3px 4px #087f8c44)}.notice{position:fixed;z-index:30;left:50%;bottom:90px;transform:translate(-50%,8px);opacity:0;background:#123b43;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);transition:.2s;white-space:nowrap}.notice.show{display:block;opacity:1;transform:translate(-50%,0)}
/* 详情、扫码、我的：同一套湖城视觉 */
.page{padding:18px;background:linear-gradient(180deg,#f2faf8,#edf6f4);min-height:100%}.detail-card,.history-card,.info-card,.scan-card{background:#fff;padding:16px;border-radius:17px;margin-bottom:14px;border:1px solid #dcebe7;box-shadow:0 6px 18px #1252550e}.detail-card h2{margin:8px 0 11px;font-size:23px}.status-tag{display:inline-block;padding:4px 8px;border-radius:8px;font-weight:700}.status-tag.free{background:#e2f7eb;color:#168a5a}.status-tag.warning{background:#fff0df;color:#d8791b}.status-tag.full{background:#fde7e5;color:#c44d45}.detail-row{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px}.detail-row span,.tip{color:var(--sub)}.primary-btn{width:100%;padding:13px;border-radius:13px;background:var(--lake);color:#fff;font-weight:bold;box-shadow:0 6px 12px #087f8c2e}.secondary-btn,.input-row input{padding:12px;border:1px solid var(--line);border-radius:12px}.secondary-btn{width:100%;margin-top:9px;background:#f3faf8;color:var(--lake);font-weight:700}.scan-frame{height:min(236px,42vh);background:#123e4b;border-radius:14px}.scan-frame video{width:100%;height:100%;object-fit:cover}.input-row{display:flex;gap:8px;margin-top:16px}.input-row input{flex:1;min-width:0}.input-row button{flex-shrink:0;background:var(--lake);color:#fff;padding:0 15px;border-radius:12px}.empty{text-align:center;color:var(--sub);padding:30px}
/* 消除素材与桌面容器留白，并柔化头图到地图的转场 */
.home-hero{z-index:1;background-size:106.8% 105.5%;background-position:center center}.map-section{z-index:0;margin-top:0;overflow:hidden;isolation:isolate;contain:layout paint;background:#dbe9e7}.map-section:before{content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:22px;background:linear-gradient(180deg,rgba(220,245,241,.72),transparent);pointer-events:none}.map-canvas{z-index:0;mask-image:none;-webkit-mask-image:none}
.location-switch{position:absolute;z-index:4;left:6.6%;top:27.4%;width:max-content;max-width:48%;height:31px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffffbb;border-radius:999px;background:rgba(8,111,123,.88);box-shadow:0 4px 11px rgba(8,91,101,.22);color:#fff;font-size:12px;font-weight:800;text-align:left;white-space:nowrap;backdrop-filter:blur(7px)}.location-switch svg{width:15px;height:15px;color:#d5fffa;flex:0 0 15px}.location-switch span{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0}.location-switch span:after{content:"红塔区";font-size:12px}.location-switch b{display:block;font-size:14px;font-weight:700;line-height:1;color:#d5fffa}.location-switch:after{content:"· 附近停车资源";position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);color:#174f58;font-size:12px;font-weight:800;white-space:nowrap;text-shadow:0 1px 2px #ffffffaa;pointer-events:none}
.parking-preview{position:absolute;z-index:6;left:16px;right:16px;bottom:167px;min-height:74px;padding:11px 13px;display:flex;align-items:center;gap:10px;text-align:left;color:#fff;background:linear-gradient(105deg,#087f8cf5,#0b6f7bdd);border:1px solid #b6f4ed77;border-radius:18px;box-shadow:0 10px 23px #073f4648}.preview-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:2px solid #d7fffa;border-radius:50%;font-size:21px;font-weight:800}.preview-copy{min-width:0;flex:1}.preview-copy b{display:block;overflow:hidden;font-size:15px;white-space:nowrap;text-overflow:ellipsis}.preview-copy small{display:block;margin-top:3px;color:#defbf8;font-size:11px;white-space:nowrap}.preview-status{padding:4px 7px;border-radius:8px;font-size:12px;font-weight:800}.preview-status.free{background:#ddf8e9;color:#168a5a}.preview-status.warning{background:#fff0df;color:#d8791b}.preview-status.full{background:#fde7e5;color:#c44d45}.preview-arrow{font-size:26px;font-weight:300}.parking-preview em{position:absolute;right:14px;bottom:-20px;padding:2px 7px;border-radius:99px;background:#123b43d9;color:#fff;font-size:10px;font-style:normal;white-space:nowrap}
.stat-overview{gap:0}.overview-copy{min-width:112px}.overview-copy small{font-size:11px;white-space:nowrap}.overview-copy b{display:block;font-size:16px;white-space:nowrap}.stat-overview em{margin:0 10px}.stat-overview .stat-state{display:flex;flex:1;justify-content:center;gap:7px;font-size:15px;font-weight:750;letter-spacing:.1px}.stat-overview .stat-state i{width:16px;height:16px;flex:0 0 16px}.stat-state i.free{background:var(--green);border:1px solid #d9fff0;box-shadow:0 1px 3px #063f2c88}.stat-state i.warning{background:var(--orange);border:1px solid #fff0d4;box-shadow:0 1px 3px #75410a88}.stat-state i.full{background:var(--red);border:1px solid #ffe0de;box-shadow:0 1px 3px #751d1a88}.overview-tip{position:absolute;right:13px;bottom:-20px;padding:2px 7px;border-radius:99px;background:#123b43d9;color:#fff;font-size:10px;white-space:nowrap}
@media(min-width:700px){.app{margin:0 auto;border-radius:0;box-shadow:none}.tabs{bottom:0;border-radius:0}.notice{bottom:90px}}