:root {
  font-family: Inter, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  font-synthesis: none;
  color: #132c31;
  background: #d8e8ed;
  --ink: #122c31;
  --green: #075f53;
  --mint: #9deedb;
  --muted: #526f76;
  --line: #aecbd359;
  --surface: linear-gradient(130deg, #f8fdffe8, #e1f2f6bf);
  --edge: #ffffffdd;
  --shadow: 0 8px 18px #376d7d16, 0 2px 4px #3e788710, inset 0 1px 0 #fff;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a { -webkit-user-select: none; user-select: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #168b79; outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1 { font-size: 27px; letter-spacing: -.9px; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.5px; }
h3 { font-size: 17px; }
p { line-height: 1.55; }
small { font-size: .65em; font-weight: 500; }
b, strong { font-weight: 730; }
a { color: var(--green); }
.icon { width: 23px; height: 23px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.art { display: inline-block; width: 64px; aspect-ratio: 1; flex-shrink: 0; background-image: url('./assets/icons-v2.png'); background-size: 400% 200%; background-repeat: no-repeat; pointer-events: none; }
.art-gun { background-position: 0 0; }
.art-charger { background-position: 33.3333% 0; }
.art-star { background-position: 66.6667% 0; }
.art-help { background-position: 100% 0; }
.art-avatar { background-position: 0 100%; }
.art-success { background-position: 33.3333% 100%; }
.art-bolt { background-position: 66.6667% 100%; }
.art-pin { background-position: 100% 100%; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; line-height: 1.55; }
.center { text-align: center; }
.green { color: var(--green); }
.full { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 12px; background: #a8ead7; z-index: 99; }
.skip-link:focus { top: 12px; }
.app-shell { max-width: 1200px; min-height: 100dvh; margin: 0 auto; padding: 0 30px 25px; background: radial-gradient(ellipse at 0 0, #fff9 0, transparent 47%), radial-gradient(ellipse at 100% 10%, #a6ccd98c 0, transparent 58%), linear-gradient(140deg,#dfeff3,#d5e9f0 55%,#dfedf4); }
.app-shell:has(.bottom-nav) { padding-bottom: 104px; }
.experience-label { display: flex; align-items: center; gap: 6px; min-height: 27px; color: #50777b; font-size: 10px; letter-spacing: .25px; max-width: 1100px; margin: auto; }
.experience-note { margin-left: auto; color: #5c7880; }
.demo-dot { width: 5px; height: 5px; border-radius: 50%; background: #6b9a8d; }
.page-header { display: flex; align-items: center; gap: 10px; min-height: 74px; }
.page-header h1 { flex: 1; text-align: center; }
.page-header.large h1 { text-align: left; font-size: 30px; }
.icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #284b56; }
.icon-button .icon { width: 27px; height: 27px; }
.icon-button:hover { background: #ffffff4f; }
.location-button { display: flex; align-items: center; gap: 5px; font-size: 14px; padding: 10px 0 10px 10px; font-weight: 600; }
.compact-page { max-width: 650px; margin: auto; outline: none; }
main { outline: none; }
.site-footer { text-align: center; font-size: 10px; color: #52737d; margin-top: 20px; }
.pearl-panel { position: relative; background: var(--surface); border: 1px solid var(--edge); border-radius: 21px; box-shadow: var(--shadow); }
.inset-panel { background: linear-gradient(130deg, #fbffffc4, #d6edf3b0); border: 1px solid #ffffffe8; border-radius: 15px; box-shadow: 0 5px 10px #39758715, inset 0 1px 1px #fff, inset 0 -1px 1px #cae4ea; }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; width: 100%; max-width: 1200px; height: calc(74px + env(safe-area-inset-bottom, 0px)); padding: 5px 25px max(6px, env(safe-area-inset-bottom)); border: 1px solid #ffffffe8; border-bottom: 0; border-radius: 22px 22px 0 0; background: #e6f5facf; backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); box-shadow: 0 -6px 20px #3d6e800c, inset 0 1px 0 #fff; }
.bottom-nav button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-height: 55px; flex: 1; position: relative; color: #5f7c84; font-size: 12px; }
.bottom-nav .icon { width: 25px; height: 25px; }
.bottom-nav .active { color: #08644f; font-weight: 750; }
.bottom-nav .active .icon { fill: #c4eadd88; stroke-width: 2.1; }
.bottom-nav button:after { content: ''; position: absolute; bottom: 0; width: 35px; height: 3px; border-radius: 5px; background: #148773; transform: scaleX(0); transition: transform .18s; }
.bottom-nav .active:after { transform: scaleX(1); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; padding: 12px 17px; border-radius: 13px; border: 1px solid transparent; font-size: 16px; font-weight: 680; line-height: 1.25; white-space: nowrap; transition: transform .12s, filter .15s; }
.button:active:not(:disabled) { transform: scale(.98); }
.button:hover:not(:disabled) { filter: brightness(1.035); }
.primary { background: linear-gradient(130deg, #304d55, #142c35 76%); color: #fff; border-color: #375c63; box-shadow: 0 7px 12px #234a5a30, inset 0 1px 1px #ffffff3d, 0 0 0 1px #ffffff8c; text-shadow: 0 1px 2px #0003; }
.primary .icon { color: #9df9e1; filter: drop-shadow(0 0 3px #a2ffe84d); }
.outline { background: linear-gradient(130deg, #f5fdffb5, #dceff6a6); color: #12353c; border-color: #fff; box-shadow: 0 4px 9px #315a7314, inset 0 1px 0 #fff; }
.small { min-height: 36px; border-radius: 10px; padding: 7px 12px; font-size: 13px; }
.small .icon { width: 17px; height: 17px; }
.text-button { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 0; color: #155c59; font-size: 13px; font-weight: 550; }
.text-button .icon { width: 17px; height: 17px; }
.centered { display: flex; margin: auto; justify-content: center; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 9px; background: linear-gradient(120deg, #dcfff0bd, #a9e5d9a1); border: 1px solid #effff8c9; color: #086855; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge .icon { width: 16px; height: 16px; }
.badge.subtle { padding: 3px 8px; background: #c8dfe897; color: #426470; border: 0; font-weight: 500; }
.pending { color: #8b5725; background: #f9e8ce; }
.session-banner { display: flex; align-items: center; width: 100%; gap: 9px; padding: 11px 14px; margin: 6px 0; border-radius: 11px; border: 1px solid #e0fff0; background: #b2e8d899; color: #165f52; font-size: 12px; }
.session-banner>span { flex: 1; text-align: left; }
.session-banner b { display: flex; gap: 5px; align-items: center; }
.session-banner .icon { width: 17px; height: 17px; }
/* 找桩：真实文字和设备标记覆盖在生成底图之上。 */
.search-filter { display: flex; gap: 18px; margin-bottom: 20px; }
.search-box { display: flex; align-items: center; gap: 10px; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid #fff; border-radius: 28px; background: #eaf7f9b0; box-shadow: 0 5px 9px #31576d15, inset 0 1px 1px #fff; }
.search-filter>.search-box { flex: 1; }
.search-box>.icon { color: #60818a; width: 21px; height: 21px; }
.search-box input { min-width: 0; width: 100%; height: 100%; background: none; border: 0; color: var(--ink); font-size: 15px; outline: none; }
.search-box:focus-within { box-shadow: 0 0 0 2px #56b49a, 0 4px 10px #4d738514; }
.search-box input:focus-visible { outline: none; }
.search-box input::placeholder { color: #58747b; opacity: 1; }
.filters { display: flex; align-items: center; gap: 9px; }
.chip { min-height: 43px; padding: 9px 22px; border: 1px solid #ffffffde; background: #e8f5f99c; border-radius: 13px; font-size: 14px; white-space: nowrap; box-shadow: 0 5px 8px #386a7b0d, inset 0 1px 0 #fff; }
.chip.selected { color: white; border-color: #9fe8d6; background: linear-gradient(130deg, #428c85, #15494e); box-shadow: 0 3px 8px #2a6b6930, inset 0 0 0 1px #c2fff75c; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.map { width: 100%; min-height: 620px; position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; background: #bad4d9; }
.map-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map:after { content: ''; position: absolute; inset: 0; background: linear-gradient(#e2f2f644, transparent 25%, #daf0f333); pointer-events: none; z-index: -1; }
.map-place { position: absolute; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: #346a66; padding: 3px 5px; background: #dbf3e54f; border-radius: 5px; pointer-events: none; text-shadow: 0 1px 2px #fff; }
.place-park { right: 10%; top: 36%; }
.place-tech { left: 22%; top: 58%; }
.place-road { left: 40%; top: 81%; transform: rotate(-22deg); }
.map-pin { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -68%); min-width: 90px; min-height: 66px; display: flex; align-items: center; gap: 0; padding: 0; z-index: 2; filter: drop-shadow(0 3px 3px #32697720); }
.map-pin>.art { width: 68px; margin-right: -18px; filter: drop-shadow(0 3px 2px #074a4126); }
.pin-label { position: relative; z-index: 2; padding: 5px 8px; font-weight: 750; font-size: 13px; white-space: nowrap; border-radius: 12px; color: white; border: 1px solid #e6fff9; background: linear-gradient(140deg,#67b7aa,#176563); box-shadow: 0 3px 5px #204f5830, inset 0 1px 0 #ffffff90; }
.map-pin.selected { z-index: 3; }
.map-pin.selected>.art { width: 80px; margin-right: -21px; filter: drop-shadow(0 0 5px #6dffcc); }
.map-pin.selected:before { content: ''; width: 42px; height: 14px; border: 2px solid #b1ffe6; border-radius: 50%; position: absolute; left: 23px; bottom: 4px; background: #35dcaf55; box-shadow: 0 0 0 6px #7cffe136; }
.map-pin.selected .pin-label { color: #065c4c; background: linear-gradient(130deg,#d4ffeb,#8ee7d0); border-color: white; font-size: 15px; }
.map-pin.occupied .pin-label { background: linear-gradient(130deg,#c8b398,#9a7b5d); }
.you-pin { position: absolute; left: 50%; top: 66%; width: 17px; height: 17px; background: #3c9dec; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 7px #53b1ff3b,0 0 0 13px #a4d5ff42; z-index: 1; }
.map-caption { position: absolute; left: 14px; bottom: 22px; background: #f6fffbba; padding: 4px 7px; font-size: 10px; color: #4a6e6c; border-radius: 7px; }
.map-locate { position: absolute; bottom: 20px; right: 14px; width: 35px; height: 35px; background: #effffbd9; border: 1px solid white; box-shadow: 0 3px 9px #315e6a20; }
.map-locate .icon { width: 21px; height: 21px; }
.station-card { padding: 24px 20px 20px; }
.sheet-handle { display: none; }
.station-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.station-heading h2 { font-size: 22px; }
.station-heading p { font-size: 13px; margin-top: 8px; }
.distance { display: flex; align-items: center; gap: 4px; font-size: 14px; padding-top: 4px; white-space: nowrap; }
.distance small { font-size: 11px; }
.distance .icon { width: 17px; height: 17px; }
.station-metrics { display: grid; grid-template-columns: 1.35fr .8fr .9fr; gap: 12px; padding: 15px 12px; margin: 20px -7px 11px; align-items: center; }
.station-metrics>div:not(:first-child) { padding-left: 12px; border-left: 1px solid #96bbc566; }
.station-metrics span:not(.currency) { display: block; font-size: 12px; }
.station-metrics strong { font-size: 30px; letter-spacing: -1.1px; display: block; line-height: 1.2; white-space: nowrap; }
.station-metrics strong small { font-size: 13px; letter-spacing: 0; color: #304a50; }
.price-wash { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; color: #075e51; }
.price-wash strong { font-size: 38px; letter-spacing: -1.8px; }
.price-wash>.currency { font-size: 21px; font-weight: 700; }
.price-wash>small { color: #254048; font-size: 12px; }
.station-secondary { display: flex; justify-content: space-between; margin: 5px 0 4px; }
.station-secondary .text-button { font-size: 14px; }
.station-secondary .text-button .icon { width: 19px; height: 19px; }
.station-card>.primary { font-size: 17px; }
.nearby-heading { display: flex; align-items: center; justify-content: space-between; margin: 26px 2px 13px; }
.nearby-heading h2 { font-size: 17px; }
.nearby-heading small { font-size: 12px; margin-left: 6px; color: #57777b; }
.nearby-heading>span { font-size: 11px; color: #55777c; }
.nearby-list { display: grid; gap: 6px; }
.station-row { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; padding: 12px 10px; border-radius: 13px; border: 1px solid transparent; min-height: 65px; }
.station-row:hover,.station-row.chosen { background: #edfcff8c; border-color: #fff9; box-shadow: 0 3px 8px #3265760a; }
.row-icon { display: flex; align-items: center; justify-content: center; width: 35px; height: 39px; background: #b9e1db75; border: 1px solid #fff9; border-radius: 12px; color: #377e72; }
.row-icon .icon { width: 19px; height: 19px; }
.station-row b { font-size: 14px; }
.station-row small { font-size: 11px; display: block; color: #557880; margin-top: 4px; }
.row-availability { margin-left: auto; display: flex; align-items: center; font-size: 11px; color: #146b59; white-space: nowrap; }
.row-availability .icon { width: 15px; height: 15px; }
.unavailable { color: #94623b; }
/* 站点与选枪 */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.page-detail .compact-page,.page-charging .compact-page { max-width: 1100px; }
.station-image { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 2.1; }
.station-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.station-image figcaption { position: absolute; right: 10px; top: 9px; background: #17434a70; padding: 3px 5px; font-size: 9px; color: #fff; border-radius: 4px; }
.station-identity { padding: 22px 20px 18px; margin: -18px 0 0; border-radius: 24px 24px 18px 18px; background: linear-gradient(125deg,#f0fcffe8,#d6ecf3e0); backdrop-filter: blur(10px); }
.station-detail-title h2 { font-size: 25px; margin-bottom: 6px; }
.station-detail-title>span { font-size: 13px; }
.address-row { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; }
.address-row>span { flex: 1; }
.address-row>.icon { width: 19px; height: 19px; color: #557c82; }
.opening { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 11px; }
.opening .icon { width: 18px; height: 18px; color: #557c82; }
.section { padding: 15px 0; }
.section h2 { font-size: 20px; }
.section-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.price-section { padding-top: 2px; }
.tariff-panel { padding: 15px 13px 10px; }
.price-detail { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 11px; }
.price-detail>div:not(:first-child) { padding-left: 11px; border-left: 1px solid #8db4c164; }
.price-detail span:not(.currency) { display: block; font-size: 12px; margin-bottom: 6px; }
.price-detail b { font-size: 20px; white-space: nowrap; }
.price-detail b small { font-size: 11px; }
.price-detail .price-wash strong { font-size: 36px; }
.price-detail .price-wash>.currency { font-size: 20px; }
.tariff-panel>.tiny { margin-top: 8px; }
.guns { margin-top: 2px; padding: 18px 14px 14px; }
.guns .section-heading { padding: 0 2px; }
.gun-option { display: flex; align-items: center; gap: 11px; width: 100%; padding: 5px 11px 5px 0; min-height: 66px; border: 1px solid #fff; border-radius: 13px; background: #e7f4fa8c; margin-top: 10px; text-align: left; }
.gun-option.selected { background: linear-gradient(120deg,#f3fffdc9,#d5eeef); border-color: #16b595; box-shadow: inset 0 0 0 1px #b1ffe68c, 0 3px 8px #397b8514; }
.gun-option>.art { width: 63px; margin-right: -7px; }
.gun-option strong { font-size: 23px; }
.gun-option>small { font-size: 12px; margin-left: auto; }
.gun-spec { margin-left: auto; white-space: nowrap; }
.gun-spec>b { display: block; font-size: 14px; font-weight: 550; }
.gun-spec>small { display: block; color: #476770; font-size: 10px; margin-top: 4px; }
.status { color: #0b6b55; background: #b0e8d9; padding: 4px 7px; border-radius: 5px; font-size: 11px; white-space: nowrap; }
.status.busy { color: #536d78; background: #c5dbe3; }
.selection-check { color: #fff; background: linear-gradient(125deg,#51c0a7,#10795f); border: 1px solid white; border-radius: 50%; padding: 4px; width: 23px; height: 23px; }
.action-footer { display: grid; gap: 9px; padding: 15px 0 9px; margin-top: 10px; }
.station-action-footer { position: sticky; bottom: 0; z-index: 4; background: #def0f5e6; backdrop-filter: blur(12px); border-top: 1px solid #fff; padding: 14px 16px; border-radius: 17px; box-shadow: 0 -5px 20px #42758308; }
.action-line { display: flex; align-items: center; gap: 15px; }
.action-line>div { flex: 1; }
.action-line>div>strong { font-size: 17px; }
.action-line .tiny { font-size: 10px; margin-top: 5px; }
.action-line>.button { min-width: 175px; }
.is-favorite { color: #08765c; }
.is-favorite .icon { fill: #a9ead7; }
/* 确认与充电 */
.confirm-content,.charging-content { padding: 20px; }
.confirm-title { display: flex; gap: 10px; align-items: start; justify-content: space-between; margin-bottom: 16px; }
.confirm-title h2 { font-size: 22px; }
.confirm-title p { font-size: 12px; margin-top: 7px; }
.connected { font-size: 10px; padding: 6px 8px; margin-top: 4px; }
.connection-panel { display: flex; align-items: center; min-height: 125px; padding: 0 15px 0 0; margin-bottom: 5px; overflow: hidden; }
.connector-visual { flex: 1; position: relative; min-height: 125px; display: flex; align-items: center; }
.connector-visual .art-charger { width: 125px; margin-left: -8px; }
.connector-visual .art-gun { width: 105px; position: absolute; left: 55px; bottom: 0; }
.connection-panel>div:last-child { position: relative; border-left: 1px solid #a9c8d36b; padding-left: 20px; min-width: 44%; }
.connection-panel p { font-size: 14px; line-height: 1.45; }
.connection-panel strong { font-size: 29px; }
.connection-panel .muted { display: block; font-size: 12px; margin-top: 6px; }
.connection-panel .muted b { font-size: 22px; color: var(--ink); margin-left: 4px; }
.charge-modes { display: flex; gap: 8px; padding-top: 12px; margin-bottom: 9px; }
.mode-option { display: flex; flex: 1; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 10px; border: 1px solid white; border-radius: 12px; background: #e0f1f66e; box-shadow: 0 4px 8px #4c839314; font-size: 18px; font-weight: 630; }
.mode-option.selected { background: linear-gradient(130deg,#d9fff0ab,#c2ece9db); border-color: #3bccaa; box-shadow: inset 0 0 0 1px #f0fffdbf,0 4px 8px #518c9a20; }
.radio-mark { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; color: #4d767b; }
.radio-mark>.icon { width: 22px; height: 22px; }
.selected .radio-mark { background: #1f9377; color: white; border-radius: 50%; border: 1px solid #fff; padding: 3px; }
.confirm-tariff { padding: 13px 15px; }
.confirm-tariff .section-heading { margin-bottom: 3px; }
.confirm-tariff .section-heading .text-button { min-height: 28px; }
.large-price { color: #075e51; font-size: 25px; }
.large-price strong { font-size: 44px; letter-spacing: -1.7px; }
.large-price small { font-size: 15px; color: #233e45; margin-left: 5px; }
.confirm-tariff>.tiny { margin-top: 4px; }
.payment-section { padding-top: 18px; }
.payment-method { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 10px; }
.payment-method>.icon { width: 32px; height: 32px; color: #0a9e5e; }
.payment-method b { font-size: 16px; }
.payment-method .badge { margin-left: 7px; }
.payment-method .tiny { margin-top: 5px; font-size: 11px; }
.agreement { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 0 1px; }
.agreement input { margin: 0 4px 0 0; width: 18px; height: 18px; accent-color: #08775f; }
.agreement .text-button { font-size: 12px; }
.start-footer>.primary { margin: 7px 0 3px; font-size: 19px; min-height: 53px; }
.start-footer>.primary>.icon { width: 26px; height: 26px; fill: #9df9e1; }
.inline-error { color: #a5392f; margin: 8px 0; font-size: 12px; }
.inline-error:empty { display: none; }
.amount-input { display: flex; gap: 8px; align-items: center; padding: 10px 15px; border: 1px solid #88c8bd; background: #e5faf5c4; border-radius: 11px; margin: 12px 0 8px; }
.amount-input>span:first-child { font-size: 13px; flex: 1; }
.amount-input input { width: 100px; border: 0; background: none; text-align: right; color: #134e43; font-size: 25px; }
.charging-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.charging-heading h2 { font-size: 20px; }
.running { display: inline-flex; align-items: center; gap: 6px; color: #0b745a; font-size: 12px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10a77d; box-shadow: 0 1px 2px #fff; }
.charging-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.vehicle-scene { position: relative; height: 218px; isolation: isolate; }
.soc-display { position: relative; z-index: 1; padding-top: 17px; pointer-events: none; }
.soc-display>span { display: block; font-size: 13px; color: #4f717b; }
.soc-display>strong { display: block; font-size: 58px; color: #09614e; letter-spacing: -3px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.charging-car { width: 86%; height: auto; position: absolute; right: -12px; bottom: 0; z-index: -1; }
.battery { height: 25px; border-radius: 20px; border: 1px solid white; box-shadow: 0 4px 8px #386b811d, inset 0 1px 1px #fff; padding: 3px; background: #d3e9f0b8; }
.battery-inner { height: 100%; width: 100%; border-radius: 20px; overflow: hidden; position: relative; }
.battery-inner:after { position: absolute; content: ''; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#ecffff6e calc(10% - 1px) 10%); }
#battery-fill { height: 100%; border-radius: 20px; background: linear-gradient(120deg,#96efd0,#11a47f); border: 1px solid #a9fce4; box-shadow: inset 0 1px 2px #fff8; transition: width .4s; }
.battery-panel>p { font-size: 13px; margin: 9px 0 12px; color: #4e6d76; }
.battery-panel>p strong { color: #066c51; font-size: 17px; padding-left: 4px; }
.live-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 13px 15px; margin: 12px 0 10px; }
.live-metrics>div+div { border-left: 1px solid #a8c6d082; padding-left: 15px; }
.live-metrics>div>span { font-size: 13px; color: #47666f; }
.live-metrics b { display: block; margin-top: 5px; font-size: 28px; white-space: nowrap; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.live-metrics b small { font-size: 13px; letter-spacing: 0; }
.live-cost { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; background: linear-gradient(120deg,#e0f9f2b8,#d6eef2b3); }
.live-cost h2 { font-size: 14px; }
.live-cost strong { display: block; font-size: 34px; color: #086c52; letter-spacing: -1px; }
.cost-context { text-align: right; }
.cost-context p { font-size: 11px; color: #477472; }
.cost-context .text-button { min-height: 30px; font-size: 12px; }
.live-power { padding: 18px; align-self: end; }
.live-power .section-heading { align-items: baseline; }
.live-power h2 { font-size: 19px; }
.live-power .section-heading b { color: #06704f; font-size: 31px; white-space: nowrap; }
.live-power .section-heading small { color: #1f4145; font-size: 14px; }
.power-chart svg { width: 100%; display: block; }
.chart-caption { display: block; font-size: 10px; color: #587781; margin-top: 3px; }
.power-output { display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid #bdd6dd69; padding-top: 10px; margin-top: 8px; font-size: 15px; color: #40636d; }
.power-output .icon { width: 18px; height: 18px; }
.simulation-speed { font-size: 10px; text-align: center; color: #517680; margin-top: 12px; }
.charging-actions { grid-template-columns: 1.1fr 1fr; margin-top: 6px; padding-bottom: 0; }
/* 票据、订单和完整账单 */
.completion-heading { display: flex; align-items: center; gap: 12px; margin: 2px 0 17px; }
.completion-heading>.art { width: 78px; margin-left: -8px; }
.completion-heading h2 { font-size: 24px; }
.completion-heading p { font-size: 12px; margin-top: 5px; }
.completion-amount { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; gap: 15px; border-radius: 19px 19px 12px 12px; }
.completion-amount>div>span { font-size: 13px; color: #48656c; }
.completion-amount strong { display: block; color: #07614e; font-size: 49px; letter-spacing: -2px; margin-top: 4px; }
.completion-amount strong small { font-size: 25px; letter-spacing: 0; margin-right: 4px; }
.paid-state { display: flex; align-items: center; gap: 7px; color: #075d4e; font-weight: 680; font-size: 16px; border-left: 1px solid #aacdd480; padding-left: 18px; white-space: nowrap; }
.paid-state>.icon { width: 25px; height: 25px; padding: 4px; border: 1px solid #d7ffed; background: linear-gradient(130deg,#70d8bc,#118466); color: white; border-radius: 50%; }
.paid-state.pending { padding: 7px 11px; border: 0; border-radius: 8px; }
.paid-state.pending>.icon { border: 0; background: none; color: #94622c; }
.receipt { padding: 21px; margin-top: 12px; }
.page-complete .receipt { border-radius: 10px 10px 13px 13px; margin-top: 8px; padding-top: 24px; padding-bottom: 20px; }
.page-complete .receipt:before { content: ''; position: absolute; top: 3px; left: 18px; right: 18px; height: 6px; background: radial-gradient(circle,#b8d9e87a 2px, transparent 2.5px) 0 0 / 14px 6px; }
.page-complete .receipt:after { content: ''; position: absolute; bottom: -4px; left: 4px; right: 4px; height: 9px; background: radial-gradient(circle at center bottom,#c5e2eb 4px, transparent 4.5px) 0 0 / 15px 9px; }
.receipt-title { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.receipt-title h2 { font-size: 22px; }
.receipt-title p { font-size: 12px; margin-top: 5px; }
.receipt-metrics { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 12px; padding: 15px 0; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.receipt-metrics>div+div { border-left: 1px solid var(--line); padding-left: 12px; }
.receipt-metrics span { display: block; color: #4f6d76; font-size: 12px; margin-bottom: 5px; }
.receipt-metrics b { font-size: 26px; letter-spacing: -.8px; color: #075f4d; white-space: nowrap; }
.receipt-metrics small { font-size: 12px; letter-spacing: 0; color: #25474a; }
.bill { margin: 10px 0 0; }
.bill>div,.order-meta>div { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; padding: 7px 0; font-size: 13px; }
.bill dt { color: #365c64; }
.bill dd,.order-meta dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bill-total { font-size: 18px!important; background: linear-gradient(100deg,#daf6ecad,#b8e9e44a); padding: 10px!important; border-radius: 7px; margin: 8px -7px 8px; color: #0b5e4e; font-weight: 750; }
.bill-total dt { color: var(--ink); }
.order-meta { border-top: 1px solid var(--line); margin: 8px 0 0; padding-top: 8px; }
.order-meta>div { padding: 5px 0; font-size: 11px; color: #4d6a73; }
.order-meta dt { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.order-meta .icon { width: 16px; height: 16px; }
.order-meta .order-id dd { font-size: 10px; overflow-wrap: anywhere; white-space: normal; text-align: right; }
.page-complete .order-id { display: none; }
.completion-actions .primary { margin-top: 4px; }
.completion-actions .text-button { min-height: 35px; }
.completion-actions>.tiny { font-size: 10px; }
.order-tabs { display: flex; padding: 3px; border: 1px solid #fff; border-radius: 13px; background: #e2f1f68a; box-shadow: var(--shadow); margin: 3px 0 18px; }
.order-tabs>button { flex: 1; position: relative; color: #486b74; min-height: 46px; padding: 10px; font-size: 16px; border-radius: 11px; }
.order-tabs>.selected { color: white; background: linear-gradient(130deg,#3e7b7e,#123e47); box-shadow: 0 3px 7px #2b5e6c30; font-weight: 600; }
.order-tabs>.selected:after { content: ''; position: absolute; width: 36px; height: 2px; background: #93e7cd; border-radius: 4px; left: calc(50% - 18px); bottom: 4px; }
.order-tools { display: flex; gap: 10px; margin-bottom: 16px; }
.order-tools .search-box { height: 42px; flex: 1; padding: 0 12px; border-radius: 11px; }
.order-tools .search-box input { font-size: 12px; }
.order-tools .search-box .icon { width: 18px; height: 18px; }
.month-filter { display: flex; gap: 5px; align-items: center; border: 1px solid #fff; border-radius: 11px; padding: 0 8px; background: #eefaff70; }
.month-filter .icon { width: 18px; height: 18px; }
.month-filter select { border: 0; background: none; color: #305b66; min-height: 42px; font-size: 12px; max-width: 130px; }
.month-heading { color: #1c424a; font-size: 17px; margin: 22px 2px 10px; }
.order-card { padding: 18px; margin-bottom: 11px; border-radius: 16px; }
.order-card .section-heading { margin-bottom: 7px; }
.order-card h2 { font-size: 21px; }
.order-card>.tiny { display: flex; gap: 7px; align-items: center; font-size: 12px; margin-top: 3px; }
.order-card>.tiny .icon { width: 15px; height: 15px; }
.order-totals { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-totals b { font-size: 31px; letter-spacing: -1px; color: #07634e; white-space: nowrap; }
.order-totals b+b { border-left: 1px solid var(--line); padding-left: 18px; }
.order-totals small { font-size: 13px; color: #28484c; letter-spacing: 0; }
.order-card-footer { display: flex; gap: 9px; align-items: center; justify-content: space-between; padding-top: 9px; }
.order-card-footer>span { display: flex; gap: 7px; align-items: center; color: #3c6670; font-size: 11px; }
.order-card-footer>span>.icon { color: #0b995c; width: 20px; height: 20px; }
.order-card-footer .small { min-height: 33px; padding: 6px 10px; border-color: #638f9b; background: #ecf8fc6e; font-size: 12px; }
.demo-order-note { margin-top: 19px; font-size: 11px; }
.order-detail-heading { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 16px 20px; text-align: center; background: radial-gradient(ellipse at left bottom,#9bf5d440,transparent),var(--surface); }
.order-detail-heading>.badge { font-size: 13px; background: none; border: 0; padding: 0; }
.order-detail-heading>.badge>.icon { width: 22px; height: 22px; background: #168b6c; color: white; border-radius: 50%; padding: 3px; border: 1px solid white; }
.order-detail-heading>strong { color: #07634e; font-size: 46px; line-height: 1.15; letter-spacing: -1.5px; }
.order-detail-heading>strong>small { font-size: 24px; margin-right: 5px; }
.order-station { width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding: 0 16px 14px; text-align: left; overflow: hidden; margin-top: 12px; }
.order-station>img { width: calc(100% + 32px); max-width: none; height: 110px; object-fit: cover; display: block; margin: 0 -16px 12px; }
.order-station>span { flex: 1; }
.order-station b { display: block; font-size: 21px; }
.order-station small { display: block; font-size: 11px; margin-top: 4px; color: #506e78; }
.order-station>.icon { width: 20px; height: 20px; }
.page-order .receipt-title { display: none; }
.page-order .receipt-metrics { padding-top: 0; }
.page-order .receipt-metrics>div:nth-child(3) span:before { content: ''; }
/* 弹层与完整状态 */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 15px; justify-content: center; text-align: center; padding: 58px 20px; color: #4a6c74; }
.empty-state>.icon { width: 42px; height: 42px; color: #559d90; }
.empty-state>.art { width: 110px; }
.empty-state h2 { font-size: 21px; color: var(--ink); }
.empty-state p { font-size: 13px; }
.empty-state>.button { margin-top: 8px; }
.active-order { border: 1px solid #fff; border-radius: 18px; background: #e6faf4bb; padding: 23px; box-shadow: var(--shadow); margin-top: 22px; }
.active-order h2 { margin: 12px 0 6px; }
.active-order .button { margin-top: 22px; }
.active-order p { font-size: 13px; }
dialog { width: calc(100% - 34px); max-width: 440px; max-height: calc(100dvh - 36px); color: var(--ink); border: 1px solid #fff; border-radius: 22px; padding: 23px; background: linear-gradient(135deg,#f3fefffa,#d6eef4f7); box-shadow: 0 25px 100px #0e354647,inset 0 1px 0 #fff; overflow: auto; }
dialog::backdrop { background: #142f4363; backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-bottom: 18px; }
.dialog-heading h2 { font-size: 21px; }
.dialog-heading .icon-button { width: 34px; height: 34px; }
.dialog-heading .icon { width: 21px; height: 21px; }
.dialog-content p { font-size: 14px; line-height: 1.75; margin-bottom: 13px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 23px; }
.dialog-actions>.button { flex: 1; font-size: 14px; padding-left: 12px; padding-right: 12px; }
.notice-box { color: #2f6c63; background: #caeee0a8; border: 1px solid #eafff5; padding: 13px; border-radius: 11px; font-size: 12px; line-height: 1.8; }
.dialog-content .notice-box { font-size: 12px; }
.help-step { margin-bottom: 19px; }
.help-step>b { font-size: 14px; }
.help-step>p { font-size: 12px; color: #4d727b; margin: 5px 0 0; }
.scanner-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; border: 1px solid white; border-radius: 16px; background: linear-gradient(135deg,#d4f8ec,#d9eff8); color: #0f7b62; margin-bottom: 19px; gap: 15px; }
.scanner-frame>.icon { width: 59px; height: 59px; stroke-width: 1.3; }
.scanner-frame>span { font-size: 12px; }
.form-label { font-size: 13px; display: block; margin: 16px 0 8px; }
.form-input { width: 100%; height: 48px; background: #f3ffffbd; border: 1px solid #79b8ad; border-radius: 11px; color: #0f5d52; padding: 12px 15px; text-transform: uppercase; }
.form-input+.tiny { margin-top: 10px; font-size: 12px; }
.navigation-summary { text-align: center; padding: 10px 0; }
.navigation-summary>.icon { width: 43px; height: 43px; color: #0b7762; margin-bottom: 14px; }
.navigation-summary h3 { font-size: 20px; margin-bottom: 10px; }
.navigation-summary p { color: #4c7378; }
.payment-preview { display: flex; flex-direction: column; align-items: center; gap: 11px; margin: 20px 0; }
.payment-preview>.icon { width: 39px; height: 39px; color: #08a365; }
.payment-preview>span { font-size: 13px; color: #4b7274; }
.payment-preview>strong { font-size: 43px; color: #075f4b; }
.favorite-list { display: grid; gap: 7px; }
.favorite-list>button { display: flex; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 9px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.favorite-list .icon { width: 17px; height: 17px; }
#toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%,10px); z-index: 20; max-width: calc(100% - 36px); width: max-content; color: white; background: #183f46f0; border: 1px solid #c0e9e446; border-radius: 12px; padding: 13px 18px; font-size: 13px; text-align: center; opacity: 0; pointer-events: none; box-shadow: 0 10px 25px #16334723; transition: opacity .18s,transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%,0); }
@media (min-width: 1000px) {
  .app-shell { padding-left: 40px; padding-right: 40px; }
  .page-home .page-header { min-height: 92px; }
  .page-home .page-header h1 { font-size: 34px; }
  .page-confirm .compact-page,.page-complete .compact-page,.page-order .compact-page,.page-orders .compact-page { max-width: 630px; }
  .charging-content { padding: 25px; }
  .vehicle-scene { height: 260px; }
  .live-power { margin-bottom: 2px; }
}
@media (max-width: 999px) and (min-width: 701px) {
  .app-shell { padding-left: 22px; padding-right: 22px; }
  .home-layout { gap: 16px; grid-template-columns: 1fr 1fr; }
  .station-card { padding: 20px 15px; }
  .station-heading h2 { font-size: 19px; }
  .station-metrics { gap: 8px; }
  .station-metrics>div:not(:first-child) { padding-left: 8px; }
  .station-metrics .price-wash strong { font-size: 32px; }
  .station-metrics strong { font-size: 26px; }
  .detail-grid,.charging-grid { grid-template-columns: 1fr; }
  .detail-grid { gap: 18px; }
  .detail-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
  .vehicle-scene { height: 270px; }
  .charging-car { width: 80%; }
  .soc-display>strong { font-size: 72px; }
}
@media (max-width: 700px) {
  .app-shell { padding: 0 18px 22px; }
  .app-shell:has(.bottom-nav) { padding-bottom: calc(98px + env(safe-area-inset-bottom,0px)); }
  .experience-label { min-height: 24px; font-size: 9px; }
  .experience-note { font-size: 9px; letter-spacing: 0; }
  .page-header { min-height: 66px; }
  .page-header h1 { font-size: 24px; }
  .page-header.large h1 { font-size: 29px; }
  .icon-button { width: 39px; height: 39px; }
  .location-button { font-size: 12px; }
  .location-button>.icon { width: 21px; height: 21px; }
  .search-filter { display: block; margin-bottom: 0; position: relative; z-index: 4; }
  .search-box { height: 45px; padding: 0 15px; }
  .search-box input { font-size: 14px; }
  .filters { display: flex; gap: 8px; margin: 12px 0 0; }
  .chip { min-height: 39px; padding: 9px 12px; flex: 1; font-size: 14px; border-radius: 12px; }
  .home-layout { display: block; }
  .map { min-height: 0; height: clamp(245px,37svh,340px); width: calc(100% + 36px); margin: -8px -18px 0; border-radius: 0; }
  .map-base { object-position: center 43%; }
  .map-pin { min-height: 62px; min-width: 90px; }
  .map-pin>.art { width: 62px; margin-right: -18px; }
  .map-pin.selected>.art { width: 72px; margin-right: -21px; }
  .pin-label { font-size: 12px; padding: 4px 7px; }
  .map-pin.selected .pin-label { font-size: 14px; }
  .map-pin.selected:before { width: 34px; height: 12px; left: 22px; bottom: 5px; }
  .map-place { font-size: 11px; letter-spacing: 1px; }
  .map-caption { bottom: 28px; left: 18px; font-size: 9px; }
  .map-locate { bottom: 26px; right: 18px; width: 31px; height: 31px; }
  .map-locate .icon { width: 18px; height: 18px; }
  .you-pin { width: 15px; height: 15px; border-width: 2px; }
  .home-information { position: relative; margin-top: -23px; z-index: 3; }
  .station-card { padding: 24px 14px 15px; border-radius: 25px 25px 18px 18px; background: linear-gradient(130deg,#effbffe8,#d9edf3e8); backdrop-filter: blur(12px); }
  .station-card:before { content: ''; position: absolute; top: -8px; left: 10px; right: 10px; height: 24px; border: 1px solid #fff; border-radius: 24px 24px 0 0; background: #e4f7ffa3; z-index: -1; }
  .sheet-handle { display: block; position: absolute; top: 7px; width: 42px; height: 4px; border: 1px solid #fff; border-radius: 4px; left: calc(50% - 21px); background: #95b8bd; }
  .station-heading h2 { font-size: 22px; letter-spacing: -.8px; }
  .station-heading p { font-size: 12px; margin-top: 7px; }
  .distance { font-size: 12px; gap: 3px; }
  .distance .icon { width: 15px; height: 15px; }
  .distance small { font-size: 10px; }
  .station-metrics { gap: 9px; margin: 14px -5px 9px; padding: 13px 10px; border-radius: 14px; }
  .station-metrics>div:not(:first-child) { padding-left: 9px; }
  .station-metrics span:not(.currency) { font-size: 12px; }
  .station-metrics strong { font-size: 27px; }
  .station-metrics strong small { font-size: 12px; }
  .station-metrics .price-wash strong { font-size: 34px; }
  .price-wash>.currency { font-size: 20px; }
  .price-wash>small { font-size: 10px; }
  .station-card>.tiny { font-size: 11px; }
  .station-secondary { margin: 2px 0 3px; }
  .station-secondary .text-button { min-height: 35px; font-size: 13px; }
  .station-card>.primary { min-height: 47px; font-size: 17px; }
  .nearby-heading { margin-top: 26px; }
  .station-row { padding: 11px 7px; gap: 10px; }
  .station-row b { font-size: 13px; }
  .station-row small { font-size: 10px; }
  .station-row .row-availability { font-size: 10px; }
  .site-footer { font-size: 9px; }
  .detail-grid { display: block; }
  .station-overview { margin: 0 -18px; }
  .station-image { border-radius: 0; aspect-ratio: 2.4; }
  .station-image figcaption { font-size: 8px; }
  .station-identity { padding: 21px 20px 16px; margin-top: -15px; border-radius: 25px 25px 0 0; border-bottom: 0; box-shadow: inset 0 1px 0 #fff; }
  .station-detail-title h2 { font-size: 25px; }
  .station-detail-title>span { font-size: 12px; }
  .address-row { margin-top: 14px; font-size: 13px; }
  .address-row .small { min-height: 35px; font-size: 12px; padding: 7px 10px; }
  .opening { margin-top: 10px; font-size: 13px; }
  .detail-controls { background: #dceff45c; margin: 0 -18px; padding: 10px 14px 0; }
  .price-section { padding-top: 9px; padding-bottom: 13px; }
  .section-heading { margin-bottom: 11px; }
  .section h2 { font-size: 19px; }
  .price-section>.section-heading { padding: 0 6px; }
  .tariff-panel { padding: 13px 12px 9px; }
  .price-detail { grid-template-columns: 1.3fr 1fr 1fr; gap: 9px; }
  .price-detail>div:not(:first-child) { padding-left: 9px; }
  .price-detail b { font-size: 19px; }
  .price-detail b small { font-size: 10px; }
  .price-detail .price-wash strong { font-size: 35px; }
  .price-detail .price-wash>.currency { font-size: 20px; }
  .tariff-panel>.tiny { font-size: 11px; }
  .guns { padding: 15px 10px 12px; border-radius: 18px; }
  .guns .section-heading>.tiny { font-size: 10px; }
  .gun-option { gap: 8px; min-height: 59px; padding: 3px 9px 3px 0; margin-top: 8px; border-radius: 12px; }
  .gun-option>.art { width: 55px; margin-right: -8px; }
  .gun-option strong { font-size: 22px; }
  .status { font-size: 10px; padding: 3px 6px; }
  .gun-spec>b { font-size: 13px; }
  .gun-spec>small { font-size: 10px; }
  .gun-option>small { font-size: 11px; }
  .selection-check { width: 21px; height: 21px; }
  .station-action-footer { margin: 11px -9px 0; padding: 12px 11px; border-radius: 16px; }
  .action-line { gap: 10px; }
  .action-line>div>strong { font-size: 16px; }
  .action-line .tiny { font-size: 9px; margin-top: 5px; }
  .action-line>.button { min-width: 155px; min-height: 48px; font-size: 17px; padding-left: 12px; padding-right: 12px; }
  .confirm-content,.charging-content { margin: 0 -7px; padding: 18px 13px; border-radius: 21px; }
  .confirm-title { gap: 7px; margin-bottom: 12px; }
  .confirm-title h2 { font-size: 20px; }
  .confirm-title p { font-size: 10px; margin-top: 6px; }
  .connected { font-size: 9px; padding: 5px 6px; }
  .connected .icon { width: 14px; height: 14px; }
  .connection-panel { min-height: 110px; padding-right: 13px; }
  .connector-visual { min-height: 110px; }
  .connector-visual .art-charger { width: 112px; margin-left: -6px; }
  .connector-visual .art-gun { width: 91px; left: 48px; bottom: 0; }
  .connection-panel>div:last-child { padding-left: 14px; min-width: 43%; }
  .connection-panel p { font-size: 13px; }
  .connection-panel strong { font-size: 28px; }
  .connection-panel .muted { font-size: 11px; }
  .connection-panel .muted b { font-size: 20px; }
  .section { padding-top: 15px; padding-bottom: 15px; }
  .charge-modes { padding-top: 10px; margin-bottom: 8px; gap: 8px; }
  .mode-option { font-size: 17px; min-height: 49px; }
  .radio-mark { width: 21px; height: 21px; }
  .confirm-tariff { padding: 11px 13px; }
  .confirm-tariff .section-heading { margin-bottom: 0; }
  .large-price { font-size: 23px; }
  .large-price strong { font-size: 39px; }
  .large-price small { font-size: 13px; }
  .confirm-tariff>.tiny { font-size: 11px; }
  .payment-section { padding-top: 15px; padding-bottom: 7px; }
  .payment-method { padding: 10px 12px; margin-top: 9px; gap: 9px; }
  .payment-method>.icon { width: 29px; height: 29px; }
  .payment-method b { font-size: 16px; }
  .payment-method .tiny { font-size: 10px; margin-top: 4px; }
  .agreement { font-size: 11px; gap: 4px; }
  .agreement .text-button { font-size: 11px; min-height: 35px; }
  .start-footer>.primary { min-height: 51px; margin-top: 6px; }
  .start-footer>.centered { font-size: 12px; min-height: 35px; }
  .charging-heading { gap: 7px; margin-bottom: 7px; }
  .charging-heading h2 { font-size: 18px; }
  .running { font-size: 10px; gap: 4px; }
  .status-dot { width: 7px; height: 7px; }
  .charging-grid { display: block; }
  .vehicle-scene { height: 170px; }
  .soc-display { padding-top: 14px; }
  .soc-display>span { font-size: 12px; }
  .soc-display>strong { font-size: 51px; }
  .charging-car { width: 86%; right: -9px; bottom: 0; }
  .battery { height: 22px; }
  .battery-panel>p { font-size: 12px; margin: 8px 0 10px; }
  .battery-panel>p strong { font-size: 16px; }
  .live-metrics { padding: 11px 12px; gap: 12px; margin: 10px 0 9px; border-radius: 12px; }
  .live-metrics>div+div { padding-left: 12px; }
  .live-metrics>div>span { font-size: 12px; }
  .live-metrics b { font-size: 27px; margin-top: 4px; }
  .live-metrics b small { font-size: 12px; }
  .live-cost { padding: 10px 12px; border-radius: 12px; }
  .live-cost h2 { font-size: 13px; }
  .live-cost strong { font-size: 31px; }
  .cost-context p { font-size: 10px; }
  .cost-context .text-button { font-size: 12px; min-height: 27px; }
  .live-power { margin-top: 10px; padding: 12px 13px; border-radius: 13px; }
  .live-power .section-heading { margin-bottom: 5px; justify-content: start; gap: 16px; }
  .live-power h2 { font-size: 18px; }
  .live-power .section-heading b { font-size: 28px; }
  .power-chart svg { max-height: 108px; }
  .chart-caption { font-size: 9px; margin-top: 1px; }
  .power-output { font-size: 14px; padding-top: 7px; margin-top: 5px; }
  .power-output .icon { width: 16px; height: 16px; }
  .simulation-speed { margin-top: 9px; font-size: 9px; }
  .charging-actions { padding-top: 11px; margin-top: 0; gap: 10px; }
  .charging-actions>.button { min-height: 47px; font-size: 16px; padding: 10px; gap: 7px; }
  .charging-actions .icon { width: 19px; height: 19px; }
  .completion-heading { margin-top: 0; margin-bottom: 12px; gap: 6px; }
  .completion-heading>.art { width: 73px; }
  .completion-heading h2 { font-size: 23px; }
  .completion-heading p { font-size: 12px; }
  .completion-amount { padding: 13px 18px; gap: 12px; }
  .completion-amount>div>span { font-size: 12px; }
  .completion-amount strong { font-size: 45px; }
  .paid-state { font-size: 15px; padding-left: 14px; }
  .receipt { padding: 18px 15px; }
  .receipt-title h2 { font-size: 22px; }
  .receipt-title p { font-size: 11px; }
  .receipt-metrics { gap: 9px; padding: 14px 0; }
  .receipt-metrics>div+div { padding-left: 9px; }
  .receipt-metrics span { font-size: 11px; }
  .receipt-metrics b { font-size: 24px; }
  .receipt-metrics small { font-size: 10px; }
  .receipt h3 { font-size: 17px; }
  .bill>div { font-size: 12px; padding: 7px 0; }
  .bill-total { font-size: 17px!important; }
  .order-meta>div { font-size: 10px; }
  .order-meta .icon { width: 14px; height: 14px; }
  .order-meta dt { gap: 5px; }
  .completion-actions { gap: 5px; }
  .completion-actions .primary { min-height: 49px; }
  .order-tabs { margin: 2px 0 15px; }
  .order-tabs>button { min-height: 44px; padding: 9px; font-size: 15px; }
  .order-tools { gap: 8px; margin-bottom: 16px; }
  .order-tools>.search-box { height: 40px; padding: 0 10px; }
  .order-tools .search-box input { font-size: 11px; }
  .month-filter { gap: 4px; padding: 0 6px; }
  .month-filter select { max-width: 108px; font-size: 11px; min-height: 40px; }
  .month-filter .icon { width: 16px; height: 16px; }
  .month-heading { font-size: 16px; margin-top: 19px; }
  .order-card { padding: 15px 13px; margin-bottom: 10px; }
  .order-card h2 { font-size: 21px; }
  .order-card .badge { font-size: 10px; padding: 3px 7px; }
  .order-card>.tiny { font-size: 11px; margin-top: 3px; }
  .order-card>.tiny .icon { width: 14px; height: 14px; }
  .order-totals { gap: 13px; padding: 10px 0; }
  .order-totals b { font-size: 29px; }
  .order-totals small { font-size: 12px; }
  .order-totals b+b { padding-left: 13px; }
  .order-card-footer>span { font-size: 10px; gap: 5px; }
  .order-card-footer>span>.icon { width: 18px; height: 18px; }
  .order-card-footer .small { font-size: 11px; min-height: 33px; padding: 6px 8px; gap: 3px; }
  .order-detail-heading { padding: 13px 15px; gap: 7px; }
  .order-detail-heading>.badge { font-size: 12px; }
  .order-detail-heading>strong { font-size: 45px; }
  .order-station>img { height: 100px; }
  .order-station { margin-top: 11px; padding-bottom: 12px; }
  .order-station b { font-size: 21px; }
  .order-station small { font-size: 10px; }
  .page-order .receipt { margin-top: 11px; padding: 15px; }
  .page-order .receipt-metrics { grid-template-columns: 1fr 1fr; }
  .page-order .receipt-metrics>div:nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid #fff; border-radius: 8px; background: #c6eee46b; }
  .page-order .receipt-metrics>div:nth-child(3)>span { margin: 0; display: flex; align-items: center; gap: 6px; }
  .page-order .receipt-metrics>div:nth-child(3)>span:before { content: ''; display: inline-block; width: 16px; height: 9px; border: 1.5px solid #477871; border-radius: 2px; background: repeating-linear-gradient(90deg,transparent 0 3px,#628b7d 3px 5px); }
  .page-order .receipt-metrics>div:nth-child(3)>b { font-size: 21px; }
  dialog { padding: 21px; border-radius: 20px; }
  .dialog-content p { font-size: 13px; }
  .dialog-actions .button { font-size: 13px; min-height: 46px; }
  .dialog-content .help-step p { font-size: 12px; }
  #toast { bottom: 95px; font-size: 12px; }
}
@media (max-width: 360px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .experience-note { font-size: 8px; }
  .page-header.large h1 { font-size: 27px; }
  .map { width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; }
  .map-pin>.art { width: 53px; margin-right: -14px; }
  .map-pin.selected>.art { width: 63px; margin-right: -17px; }
  .pin-label { font-size: 10px; padding: 4px 6px; }
  .map-pin.selected .pin-label { font-size: 12px; }
  .station-heading h2 { font-size: 20px; }
  .station-heading p { font-size: 11px; }
  .distance { gap: 2px; font-size: 11px; }
  .distance .icon { display: none; }
  .station-metrics { gap: 7px; padding: 12px 8px; }
  .station-metrics>div:not(:first-child) { padding-left: 7px; }
  .station-metrics strong { font-size: 24px; }
  .station-metrics .price-wash strong { font-size: 30px; }
  .station-metrics strong small { font-size: 11px; }
  .price-wash>.currency { font-size: 17px; }
  .price-wash>small { font-size: 9px; }
  .station-overview { margin-left: -14px; margin-right: -14px; }
  .detail-controls { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }
  .price-detail { gap: 7px; }
  .price-detail>div:not(:first-child) { padding-left: 7px; }
  .price-detail .price-wash strong { font-size: 30px; }
  .price-detail b { font-size: 17px; }
  .gun-option { gap: 6px; }
  .gun-option>.art { width: 49px; }
  .gun-option strong { font-size: 21px; }
  .gun-spec>b { font-size: 12px; }
  .gun-spec>small { font-size: 9px; }
  .status { font-size: 9px; padding: 3px 5px; }
  .action-line>.button { min-width: 139px; font-size: 16px; padding-left: 9px; padding-right: 9px; gap: 5px; }
  .action-line .tiny { font-size: 8px; }
  .confirm-title h2 { font-size: 18px; }
  .confirm-title .connected { font-size: 8px; gap: 2px; padding: 5px; }
  .confirm-title .connected .icon { width: 12px; height: 12px; }
  .connector-visual .art-charger { width: 101px; }
  .connector-visual .art-gun { width: 80px; left: 37px; }
  .connection-panel>div:last-child { padding-left: 10px; }
  .connection-panel strong { font-size: 24px; }
  .connection-panel .muted { font-size: 10px; }
  .mode-option { gap: 6px; font-size: 16px; }
  .charging-heading h2 { font-size: 16px; }
  .running { font-size: 9px; }
  .soc-display>strong { font-size: 45px; }
  .soc-display>span { font-size: 11px; }
  .vehicle-scene { height: 150px; }
  .live-metrics b { font-size: 24px; }
  .live-metrics b small { font-size: 11px; }
  .charging-actions>.button { font-size: 14px; }
  .completion-heading h2 { font-size: 21px; }
  .completion-heading>.art { width: 64px; }
  .completion-heading p { font-size: 11px; }
  .completion-amount { padding: 12px 14px; }
  .completion-amount strong { font-size: 40px; }
  .paid-state { font-size: 13px; padding-left: 10px; }
  .receipt-metrics b { font-size: 21px; }
  .receipt-metrics small { font-size: 9px; }
  .receipt-metrics span { font-size: 10px; }
  .receipt-title h2 { font-size: 20px; }
  .receipt-title p { font-size: 10px; }
  .order-meta>div { font-size: 9px; }
  .order-meta .icon { width: 12px; height: 12px; }
  .order-meta .order-id dd { font-size: 9px; }
  .order-card h2 { font-size: 19px; }
  .order-card .badge { font-size: 9px; }
  .order-totals b { font-size: 26px; }
  .order-totals small { font-size: 11px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bottom-nav { background: #e5f2f7; } .station-action-footer { background: #dfedf4; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }

@media(max-width:700px){.page-home:has(.session-banner) .map{height:clamp(195px,calc(37svh - 50px),290px)}}

@media(min-width:1000px){.live-power{align-self:stretch;display:flex;flex-direction:column;justify-content:center}.live-power .power-chart svg{min-height:180px}}