/* User surface follows the Mini Program's compact geometry and semantic palette.
   Existing form, map, chart and transaction owners are reused by the three destinations. */
body.user-view { --page:#fff; --ink:#171a21; --muted:#667085; --green:#16a34a; --orange:#f59e0b; --red:#ef4444; --purple:#7c3aed; font-size:14px; line-height:1.5; background:var(--page); color:var(--ink); }
body.user-view[data-theme="dark"] { --page:#090b0f; --ink:#f3f6fa; --muted:#a3adbc; --green:#35d07f; --orange:#ffb020; --red:#ff5a6f; --purple:#a78bfa; }
.traffic-values { display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;font-size:13px; }
.traffic-values strong { font-size:20px;font-weight:600; }
.traffic-progress { height:6px;border-radius:6px;background:rgba(118,118,128,.12);overflow:hidden;margin:9px 0; }
.traffic-progress>span { display:block;height:100%;background:#279979;border-radius:inherit; }
.traffic-progress.exceeded>span { background:#dc4545; }
.traffic-form { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.65fr) minmax(0,1fr);gap:8px;margin:12px 0; }
.traffic-form label { min-width:0;font-size:12px; }
#trafficUsagePanel > .traffic-panel { display:block; padding:0 16px 16px !important; }
#trafficUsagePanel .hint { margin:0; font-size:12px; line-height:1.5; }
#trafficUsagePanel .hint:empty { display:none; }
#trafficUsagePanel .traffic-form label { display:block; }
#trafficUsagePanel .traffic-form input,#trafficUsagePanel .traffic-form select { width:100%; min-width:0; box-sizing:border-box; height:48px; margin-top:5px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--ink); font:inherit; font-size:16px; }
#trafficUsagePanel #trafficPlanSave { width:fit-content; min-height:40px; margin:0 0 10px; padding:8px 12px; border-radius:10px; font-size:13px; }

body.user-view .phone-shell { width:min(100%,568px); max-width:568px; margin:0 auto; padding:calc(8px + env(safe-area-inset-top, 0px)) 14px calc(92px + env(safe-area-inset-bottom)); }
body.user-view .app-header { min-height:44px; margin:0 0 6px; padding:0; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.device-name-button { min-width:0; flex:1; height:44px; padding:0; display:flex; align-items:center; gap:5px; border:0; background:transparent; box-shadow:none; color:var(--ink); font:inherit; font-size:16px; font-weight:650; text-align:left; }
.device-name-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-name-button svg { width:14px; height:14px; flex:none; }
.connection-controls { display:flex; align-items:center; gap:3px; flex:none; }
.connection-hit { color:var(--muted); height:44px; min-width:0; display:flex; align-items:center; padding:0 2px; border:0; background:transparent; box-shadow:none; color:var(--muted); font:inherit; }
.connection-pill { margin:0; box-shadow:none; color:inherit; display:flex; align-items:center; gap:5px; min-height:29px; padding:6px 8px; border-radius:999px; background:rgba(118,118,128,.07); border:1px solid rgba(15,23,42,.05); font-size:10px; line-height:14px; font-weight:550; white-space:nowrap; }
.connection-pill svg { width:14px; height:14px; }
.connection-state { width:5px; height:5px; border-radius:50%; background:#8e8e93; }
.connection-hit[data-connected="true"] { color:var(--ink); }
.connection-hit[data-connected="true"] .connection-state { background:#269b60; }
body[data-theme="dark"] .connection-hit[data-connected="true"] .connection-state { background:#5cce8c; }
body.user-view .vehicle-map-hub { display:flex; flex-direction:column; gap:0; margin:0 0 4px; }
body.user-view #liveMapCard { width:100%; height:200px; min-height:200px; border-radius:14px; border:0; box-shadow:none; }
.map-footer { display:flex; align-items:center; gap:5px; padding:9px 0 8px; min-height:41px; color:var(--muted); font-size:11px; }
.map-footer svg { flex:none; width:12px; height:12px; }
.map-footer span { min-width:0; line-height:17px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; }
body.user-view .vehicle-ride-card, body.user-view .vehicle-ride-card:hover, body.user-view .vehicle-ride-card:active { width:100%; height:auto; min-height:44px; padding:0; margin:0; border-radius:0; box-shadow:none; display:flex; align-items:center; justify-content:space-between; gap:8px; background:transparent; border:0; }
body.user-view .vehicle-ride-card-heading { flex:1; min-width:0; display:flex; justify-content:flex-start; align-items:baseline; gap:3px; white-space:nowrap; }
body.user-view .vehicle-ride-card-label { font-size:10px; margin-right:3px; color:var(--muted); }
body.user-view .vehicle-ride-card strong { font-size:13px; font-weight:600; color:var(--ink); }
body.user-view .vehicle-ride-card-chevron { position:static; flex:none; }
body.user-view .hero-card { display:flex; gap:12px; margin:0; min-height:0; padding:12px 0 8px; border-top:1px solid rgba(15,23,42,.045); }
body.user-view .pack-summary { display:flex; flex-direction:column; align-items:center; width:108px; flex:none; height:auto; padding:4px 10px 4px 0; border-right:1px solid rgba(15,23,42,.042); }
body.user-view :is(.hero-card,.pack-summary,.voltage-card,.temperature-card,.cells-card,.data-card,.brand-details-section) { background:transparent; box-shadow:none; backdrop-filter:none; }
body.user-view :is(.hero-card,.voltage-card,.temperature-card,.cells-card,.data-card,.brand-details-section) { border-radius:14px; }
body.user-view .hero-info { flex:1; min-width:0; padding:0; }
body.user-view .hero-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:0; }
body.user-view .hero-values > div { display:flex; flex-direction:column; justify-content:center; border-radius:10px; border-bottom:1px solid rgba(15,23,42,.039); background:transparent; box-shadow:none; text-align:center; }
body.user-view .soc-footer-stack { display:grid; width:100%; justify-items:center; gap:5px; margin-top:6px; }
body.user-view .connect-time { color:var(--muted); font-size:10px; line-height:1.5; font-weight:400; text-align:center; }
body.user-view .connect-time b { font-weight:400; }
body.user-view .version-line { color:var(--muted); font-size:9px; line-height:1.5; font-weight:400; }
.system-version-detail { white-space:pre-line; font-size:12px; color:var(--muted); padding:8px 0; }
.system-version-detail b { font-weight:400; }
body.user-view .hero-values > div { min-height:55px; padding:7px 6px; }
body.user-view .soc-ring { box-shadow:none; position:relative; display:flex; align-items:center; justify-content:center; border-radius:50%; background:conic-gradient(var(--soc-color) calc(var(--soc) * 1turn), var(--soc-track) 0); width:86px; height:86px; --soc-color:#3478f6; --soc-track:#eef1f5; }
body.user-view .soc-ring::before { content:""; position:absolute; border-radius:50%; inset:4px; background:var(--page) !important; }
body.user-view .soc-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; color:var(--ink) !important; }
body.user-view .soc-inner .soc-reading { display:flex; align-items:baseline; color:var(--ink) !important; line-height:1.1; }
body.user-view #socValue { font-size:26px; font-weight:680; letter-spacing:-1px; }
body.user-view .soc-inner small { font-size:11px; font-weight:650; margin-left:1px; color:var(--ink) !important; }
body.user-view .soc-inner em { display:block !important; margin-top:3px; font-size:9px; line-height:14px; color:var(--muted); font-style:normal; }
body.user-view .soc-gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:0; }
body.user-view .soc-meta { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); min-height:14px !important; padding:0; background:transparent; font-size:10px; font-weight:400; margin-top:10px; line-height:1.4; }
body.user-view .summary-title { width:100%; text-align:center; margin:0 0 10px; font-size:11px; line-height:1.35; font-weight:600; color:var(--muted); }
body.user-view .hero-values strong { margin-top:4px; font-size:15px; line-height:1.5; font-weight:720; white-space:nowrap; }
body.user-view .hero-values b { font-size:15px; font-weight:720; }
body.user-view .hero-values .metric-unit { font-size:11px; font-weight:400; color:var(--muted); margin-left:2px; }
body.user-view .hero-values :has(#remainAh) { font-size:12px; letter-spacing:-.45px; }
body.user-view .hero-values :has(#remainAh) b { font-size:12px; }
body.user-view .hero-values span:not(.capacity-inline) { font-size:10px; color:var(--muted); }
body.user-view #realtimeInlineText { color:var(--ink); font-size:15px; }
body.user-view .content { gap:0; }
body.user-view .section-title { min-height:24px; margin:0 0 4px; padding:0; }
body.user-view .section-title strong { font-size:15px; font-weight:650; }
body.user-view .voltage-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; gap:0; border-top:1px solid rgba(15,23,42,.036); }
body.user-view .voltage-strip > div { padding:10px 4px; border-radius:0; background:transparent; box-shadow:none; border-bottom:1px solid rgba(15,23,42,.039); }
body.user-view .voltage-strip span { font-size:10px; color:var(--muted); }
body.user-view .voltage-strip strong { display:flex; align-items:center; justify-content:center; gap:1px; font-size:12px; font-weight:650; margin-top:5px; }
body.user-view .voltage-strip small { display:inline-flex; align-items:center; justify-content:center; width:18px; min-width:18px; height:18px; border:1px solid currentColor; border-radius:50%; margin-left:4px; font-size:10px; }
body.user-view .voltage-card,body.user-view .temperature-card,body.user-view .cells-card { padding:12px 0 6px; margin:0; border-top:1px solid rgba(15,23,42,.045); }
body.user-view .cells-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.vehicle-daily-row { display:flex; align-items:center; gap:8px; min-height:44px; }
.vehicle-daily-row .vehicle-ride-card { flex:1; min-width:0; }
.vehicle-daily-row:has(.charging-estimate:not([hidden])) .vehicle-ride-card-heading { flex-direction:column; gap:2px; }
.vehicle-daily-row:has(.charging-estimate:not([hidden])) .vehicle-ride-card-chevron { display:none; }
body.user-view .charging-estimate { display:inline-block; position:relative; width:fit-content; max-width:100%; flex:none; max-width:52%; margin:2px 0; padding:1px; border:1px solid rgba(118,118,128,.14); border-radius:999px; background:#ededf0; overflow:hidden; text-align:center; }
.charging-inner { position:relative; z-index:1; padding:6px 12px; border-radius:999px; background:#f3f3f5; }
body.user-view .charging-estimate strong { display:block; font-size:12px; line-height:17px; font-weight:600; color:var(--ink); }
body.user-view .charging-estimate span#chargingEstimateGain { display:block; font-size:11px; line-height:16px; color:var(--muted); }
.settings-sheet { display:none; position:fixed; inset:0; z-index:90; background:var(--page); }
.settings-sheet.open { display:block; }
.settings-sheet .sheet-panel { width:min(100%,568px); height:100dvh; max-height:100dvh; margin:0 auto; padding:calc(12px + env(safe-area-inset-top, 0px)) 14px calc(92px + env(safe-area-inset-bottom)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; background:var(--page); border:0; border-radius:0; box-shadow:none; color:var(--ink); }
.settings-sheet .sheet-title { padding:0; min-height:38px; border:0; }
.settings-sheet .sheet-title > strong { font-size:20px; font-weight:650; }
.my-profile { display:flex; align-items:center; gap:12px; padding:8px 0 16px; }
.my-profile img { width:44px; height:44px; border-radius:12px; }
.my-profile strong { display:block; font-size:20px; font-weight:650; overflow-wrap:anywhere; }
.my-profile span { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.my-menu { background:transparent; border-top:1px solid rgba(15,23,42,.045); border-radius:14px; margin:12px 0 0; overflow:hidden; }
.my-menu .settings-nav-row { min-height:48px; padding:8px 0; border-radius:0; border:0; box-shadow:none; background:transparent; display:flex; gap:10px; color:var(--ink); }
.my-menu .settings-nav-row > strong { flex:1; text-align:left; font-weight:500; font-size:14px; }
.my-menu .settings-nav-row > span { color:var(--muted); font-size:12px; }
.my-menu svg { width:20px; height:20px; }
.settings-sheet .settings-nav-list { border:0; border-radius:0; }
.settings-sheet .settings-disclosure { border-radius:0; }
.settings-sheet .settings-section-label { font-size:11px; margin:12px 0 6px; }
.settings-sheet .settings-nav-row,.settings-sheet .settings-disclosure > summary { min-height:48px; margin:0; padding:8px 0; border-radius:0; gap:12px; }
.settings-sheet .settings-nav-copy { flex:1; }
.settings-sheet .settings-nav-row > svg,.settings-sheet .settings-disclosure > summary > svg { width:20px; height:20px; flex:none; color:var(--ink); }
.settings-sheet .settings-nav-copy strong { font-size:14px; font-weight:500; }
.settings-sheet .settings-nav-copy small,.settings-sheet .settings-nav-meta em { font-size:11px; }
.my-logout { margin:14px auto 0; min-height:40px; width:fit-content; display:block; }
body.user-view #vehicleDataOverlay { background:var(--page); padding:0; }
body.user-view #vehicleDataOverlay > .vehicle-overlay-panel { width:min(100%,568px); height:100dvh; max-height:100dvh; margin:0 auto; border:0; border-radius:0; box-shadow:none; background:var(--page); padding:calc(12px + env(safe-area-inset-top, 0px)) 14px calc(92px + env(safe-area-inset-bottom)); overflow:auto; }
body.user-view #vehicleDataOverlay > .vehicle-overlay-panel > .vehicle-overlay-header { display:none; }
body.user-view .vehicle-data-segments { margin:0 0 12px; }
body.user-view .charging-records { gap:12px; }
body.user-view .charging-records section { display:grid; gap:8px; }
body.user-view .charging-record-card { border-radius:16px; padding:0 12px; background:var(--surface-soft); overflow:hidden; }
body.user-view .charging-records button[data-charge-id] { padding:12px 0; min-height:64px; border-bottom:0; background:transparent; }
body.user-view .charging-detail { margin:0; padding:10px 0; border-bottom:0; }
body.user-view .charging-records em { white-space:normal; overflow-wrap:anywhere; }
.user-nav-shell { position:fixed; left:22px; right:22px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:999; color:#636366; pointer-events:none; }
.user-capsule { display:flex; width:100%; max-width:540px; margin:0 auto; padding:4px; border-radius:999px; background:rgba(250,250,250,.92); border:1px solid rgba(255,255,255,.8); box-shadow:0 5px 20px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.04); backdrop-filter:blur(18px) saturate(1); -webkit-backdrop-filter:blur(18px) saturate(1); transition:width .24s cubic-bezier(.16,1,.3,1); pointer-events:auto; }
.user-capsule button { display:flex; flex:1; min-width:0; min-height:46px; justify-content:center; align-items:center; gap:6px; padding:0 8px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:#636366; font:inherit; font-size:12px; }
.user-capsule button[aria-selected="true"] { background:#e9e9eb; color:#1c1c1e; font-weight:650; box-shadow:inset 0 1px 0 rgba(255,255,255,.65); }
.user-capsule img { width:21px; height:21px; }
.user-capsule.compact { width:156px; }
.user-capsule span { max-width:48px; overflow:hidden; white-space:nowrap; transition:max-width .24s,opacity .16s; }
.user-capsule.compact span { max-width:0; opacity:0; }
.user-capsule.compact button { min-height:44px; gap:0; }
body[data-theme="dark"] .connection-pill { background:rgba(142,142,147,.13); border-color:rgba(255,255,255,.06); }
body[data-theme="dark"] .charging-estimate { background:#35353a; border-color:rgba(255,255,255,.12); }
body[data-theme="dark"] .charging-inner { background:#1c1c1e; }
body[data-theme="dark"] .user-capsule { background:rgba(28,28,30,.94); border-color:rgba(255,255,255,.16); box-shadow:0 5px 20px rgba(0,0,0,.25); }
body[data-theme="dark"] .user-capsule button { color:#aeaeb2; }
body[data-theme="dark"] .user-capsule button[aria-selected="true"] { background:#3a3a3c; color:#f5f5f7; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
@media(prefers-reduced-motion:reduce){ .user-capsule,.user-capsule span{transition:none;} }
#networkConfigPanel[data-mode="cellular"] :is(#wifiConfigToggle,#wifiConfigPanel) { display:none; }
#networkConfigToggle[aria-expanded="true"] #settingsNetworkState { display:none; }

body.user-view[data-user-surface="me"] .phone-shell > :is(.app-header,.content),
body.user-view[data-user-surface="data"] .phone-shell > :is(.app-header,.content) { display:none; }

.charge-capacity { color:#175b96; font-size:inherit; font-weight:600; }.charge-soc { color:#086c60; font-size:inherit; font-weight:600; }
body[data-theme="dark"] .charge-capacity { color:#8dcaff; }body[data-theme="dark"] .charge-soc { color:#79d8c8; }
.settings-sheet .sheet-title { background:var(--page); }
body.user-view .vehicle-data-tabs { width:100%; margin:0 0 8px; }
body.user-view .vehicle-data-pane { padding:8px 0 16px; }
body.user-view .vehicle-data-section { padding:16px 0; }
body.user-view .vehicle-data-scroll { scrollbar-gutter:auto; }

.map-speed-dial { position:absolute; top:12px; left:12px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.94); color:#172033; flex-direction:column; gap:3px; font-size:26px; line-height:29px; font-weight:600; z-index:5; pointer-events:none; box-shadow:0 3px 12px rgba(15,23,42,.12); }
#fullscreenMapSpeed { top:calc(62px + env(safe-area-inset-top)); z-index:35; }
body[data-theme="dark"] .map-speed-dial { background:rgba(25,32,44,.96); color:#f3f6fa; }

@media(max-width:350px){ body.user-view .vehicle-ride-card-label{font-size:9px;margin-right:0;} body.user-view .vehicle-ride-card strong{font-size:12px;} }

.map-speed-value { font-variant-numeric:tabular-nums; }
.map-speed-unit { font-size:10px; line-height:12px; font-weight:400; color:#64748b; }
body[data-theme="dark"] .map-speed-unit { color:#bac4d3; }
body[data-theme="dark"] .soc-ring { --soc-color:#73bbff; --soc-track:rgba(115,187,255,.18); }
body[data-theme="dark"] .soc-ring::before { inset:5px; }
body[data-theme="dark"] .soc-meta[data-connection] { background:transparent; }
body[data-theme="dark"] :is(.hero-card,.voltage-card,.temperature-card,.cells-card,.data-card) { border-top-color:rgba(255,255,255,.05); }
body[data-theme="dark"] .pack-summary { border-color:rgba(255,255,255,.048); }
body[data-theme="dark"] :is(.hero-values>div,.voltage-strip>div) { border-bottom-color:rgba(255,255,255,.044); }
@media(max-width:350px){body.user-view .pack-summary{width:96px;padding-right:8px;}body.user-view .hero-card{gap:7px;}body.user-view #liveMapCard{height:184px;min-height:184px;}body.user-view .hero-values>div{padding-left:2px;padding-right:2px;}body.user-view .hero-values :has(#remainAh) b{font-size:11px;}body.user-view .voltage-strip>div{padding-left:1px;padding-right:1px;}body.user-view .voltage-strip small{width:16px;min-width:16px;height:16px;margin-left:2px;font-size:9px;}body.user-view .voltage-strip strong{font-size:11px;}.charging-inner{padding:5px 7px;}}

body.user-view .soc-meta[data-connection]::after { content:""; width:6px; height:6px; flex:none; border-radius:50%; background:#9299a4; }
body.user-view .soc-meta[data-connection="online"]::after { background:#24a56a; animation:device-online-breathe 1s ease-in-out infinite; }
body[data-theme="dark"] .soc-meta[data-connection="online"]::after { background:#5bdb9b; }
body.user-view .vehicle-ride-card-chevron { color:var(--muted); }
body.user-view .vehicle-ride-card-chevron svg { width:17px; height:17px; }
body.user-view .mos-card { padding:4px 0 8px; border:0; background:transparent; box-shadow:none; }
body.user-view .runtime-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
body.user-view .runtime-chip-list .chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#f2f3f5; color:#59616d; font-size:11px; line-height:1.6; border:0; box-shadow:none; }
body.user-view .runtime-chip-list .chip::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
body[data-theme="dark"] .runtime-chip-list .chip { background:#24262b; color:#c1c6cf; }
body.user-view .temperature-list { display:flex; flex-wrap:wrap; padding:0; gap:0; border-top:1px solid rgba(15,23,42,.036); }
body.user-view .temperature-list>div { width:16.666%; min-width:0; display:flex; flex-direction:column; text-align:center; padding:9px 2px; border:0; border-radius:0; border-bottom:1px solid rgba(15,23,42,.039); background:transparent !important; box-shadow:none !important; }
body.user-view .temperature-list span { font-size:10px; }
body.user-view .temperature-list strong { font-size:12px; font-weight:600; }
@media(prefers-reduced-motion:reduce){body.user-view .soc-meta[data-connection="online"]::after{animation:none;}}


body.user-view .data-card { margin:0; padding:12px 0 6px; border-top:1px solid rgba(15,23,42,.045); }
body[data-theme="dark"] .temperature-list>div { border-bottom-color:rgba(255,255,255,.044); }

body.user-view .voltage-strip .voltage-unit { font-size:9px; color:inherit; margin-left:1px; }

.settings-sheet .menu-glyph { width:20px; height:20px; flex:none; object-fit:contain; }
body[data-theme="dark"] .my-menu { border-top-color:rgba(255,255,255,.05); }

.sheet-panel[data-detail="traffic"] > :not(.settings-detail-page),
.sheet-panel[data-detail="vehicle"] > :not(.settings-detail-page){display:none!important;}
.settings-detail-header{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:16px;}
.settings-detail-header strong{font-size:17px;font-weight:600;}
.settings-detail-page .setting-group{padding:4px 0;margin-top:0;}
.account-form button.auth-switch{justify-self:center;width:fit-content;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:transparent;box-shadow:none;}

.account-form .auth-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-form .auth-actions button{flex:0 0 auto;margin:0;min-height:44px}.account-form .auth-actions #loginButton{margin-left:auto;width:fit-content}

.user-view .traffic-overview {display:block;width:100%;padding:2px 0 16px;margin:0 0 2px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;color:var(--ink);}
.user-view .traffic-overview[hidden] {display:none;}
.traffic-overview-head {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.traffic-overview-head>svg {width:16px;height:16px;flex:none;}
.traffic-overview-values {margin-left:auto;font-variant-numeric:tabular-nums;}
.traffic-overview-values strong {font-size:18px;font-weight:600;color:var(--ink);}
.traffic-overview .traffic-progress {display:block;}
.traffic-overview-period {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);}