:root {
  color-scheme: dark;
  --orange: #ff8210;
  --orange-2: #ff9d42;
  --ink: #0d0f10;
  --panel: #171a1d;
  --panel-2: #202428;
  --line: #30363b;
  --muted: #9199a2;
  --text: #f7f8f9;
  --green: #43d89b;
  --red: #ff5e67;
  --yellow: #ffc85c;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); overflow-x: clip; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: #090b0c; color: var(--text); }
button, input, select { font: inherit; }
button, select { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, p { margin-top: 0; }
.hidden { display: none !important; }
.app-opening { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; overflow:hidden; background:#050505; opacity:1; transition:opacity .35s ease; }
.app-opening.is-leaving { opacity:0; pointer-events:none; }
.app-opening[hidden] { display:none; }
.app-opening-video { width:100%; height:100%; object-fit:contain; background:#050505; }
.app-opening.is-static { background:#050505 url('./icon-512.png?v=3') center / contain no-repeat; }
.app-opening.is-static .app-opening-video { visibility:hidden; }
@media (min-width: 768px) and (pointer: fine) { .app-opening { display:none !important; } }
.eyebrow { color: var(--orange-2); font-size: 10px; font-weight: 850; letter-spacing: .17em; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); background: #0f1113; }
.login-panel { padding: clamp(32px, 7vw, 88px); display: flex; flex-direction: column; justify-content: center; }
.login-brand, .brand { display: flex; align-items: center; gap: 12px; }
.login-brand { margin-bottom: 62px; }
.login-brand img { width: 56px; height: 56px; object-fit: contain; }
.login-brand div, .brand div { display: flex; flex-direction: column; line-height: 1; }
.login-brand strong { font-size: 21px; letter-spacing: .19em; }
.login-brand span, .brand div span { color: var(--orange); font-size: 8px; letter-spacing: .28em; margin-top: 6px; }
.login-panel > h1 { max-width: 430px; margin: 9px 0 12px; font-size: clamp(35px, 5vw, 54px); line-height: 1.02; letter-spacing: -.04em; }
.login-panel > p { max-width: 430px; color: var(--muted); line-height: 1.55; }
#loginForm, .auth-recovery-form { display: grid; gap: 17px; max-width: 430px; margin-top: 24px; }
#loginForm label, .auth-recovery-form label, .password-label, .form-grid label { color: #c8cdd1; font-size: 12px; font-weight: 750; }
#loginForm > label > input, .auth-recovery-form > label > input, .form-grid label > input, .speed-limit input { width: 100%; display: block; margin-top: 8px; padding: 14px 15px; border: 1px solid #373d42; border-radius: 13px; background: #15181a; color: #fff; outline: 0; }
input:focus, select:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(255,130,16,.13); }
input[readonly] { color: #899198; background: #111315 !important; cursor: default; }
.password-input { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 8px; }
.password-input input { min-width: 0; width: 100%; padding: 14px 15px; border: 1px solid #373d42; border-radius: 13px; background: #15181a; color: #fff; outline: 0; }
.password-input button { border: 1px solid #3b4146; border-radius: 11px; background: #252a2e; padding: 0 11px; font-size: 11px; cursor: pointer; }
.password-label { display: block; margin: 15px 0; }
.login-error, .form-message { min-height: 18px; color: var(--red); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 47px; border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 850; text-decoration: none; cursor: pointer; }
.primary-button { background: linear-gradient(135deg, #ff9c36, var(--orange)); color: #211305; box-shadow: 0 8px 24px rgba(255,130,16,.16); }
.secondary-button { background: #2b3034; color: white; }
.auth-text-button { justify-self: start; border: 0; padding: 3px 0; background: transparent; color: #ffc17d; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-text-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 3px; }
.install-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border:1px solid rgba(255,130,16,.45); border-radius:13px; background:rgba(255,130,16,.09); color:#ffc17d; padding:0 13px; font-weight:800; cursor:pointer; }
.ui-icon, .emergency-session-icon svg, #openMap svg, .action-card > b svg, .vehicle-details summary span svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.install-login { width: min(100%, 430px); margin-top: 9px; }
.legal-links { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:14px; font-size:13px; }
.legal-links a { color:var(--muted); text-underline-offset:3px; }
.legal-links a:hover,.legal-links a:focus-visible { color:var(--accent); }
.account-deletion { display:grid; gap:14px; padding:22px; }
.account-deletion h2 { margin:7px 0; }
.account-deletion p { margin:0; color:var(--muted); font-size:13px; }
.account-deletion .legal-links { margin-top:0; }
.demo-access { max-width: 430px; margin-top: 23px; padding: 13px 15px; border: 1px solid #59431e; border-radius: 14px; background: #211d14; color: #d5c6aa; font-size: 12px; }
.demo-access strong, .demo-access span { display: block; }
.demo-access strong { color: #ffd18f; margin-bottom: 5px; }
.login-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(38px,7vw,90px); background: radial-gradient(circle at 66% 40%, rgba(255,130,16,.22), transparent 31%), linear-gradient(145deg,#242019,#151719 58%); }
.login-visual::before { content:""; position:absolute; inset:0; opacity:.25; background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px); background-size:45px 45px; }
.login-visual > span, .login-visual > strong { position: relative; z-index: 2; }
.login-visual > span { color: var(--orange-2); letter-spacing: .18em; font-size: 11px; font-weight: 800; }
.login-visual > strong { max-width: 720px; margin-top: 13px; font-size: clamp(34px,5vw,68px); line-height: 1.02; }
.radar { position:absolute; width:min(55vw,620px); aspect-ratio:1; right:-8%; top:-5%; border:1px solid rgba(255,130,16,.25); border-radius:50%; }
.radar::before,.radar::after,.radar i { content:""; position:absolute; inset:15%; border:1px solid rgba(255,130,16,.22); border-radius:50%; }
.radar::after { inset:31%; }
.radar i:first-child { inset:46%; background:rgba(255,130,16,.15); }
.radar i:nth-child(2) { width:1px; height:50%; left:50%; top:0; border:0; border-left:1px solid rgba(255,130,16,.38); border-radius:0; transform-origin:bottom; transform:rotate(38deg); }
.radar b { position:absolute; left:48%; top:46%; color:var(--orange); font-size:34px; transform:rotate(45deg); }

.app-shell { width: min(100%, 1280px); min-height: 100vh; margin: 0 auto; background: var(--ink); box-shadow: 0 0 80px #0008; }
.topbar { position: sticky; top: 0; z-index: 1000; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(13,15,16,.88); backdrop-filter: blur(18px); }
.emergency-session-banner { width:min(calc(100% - 36px),1244px); margin:16px auto 0; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:13px 15px; border:1px solid #8b353b; border-radius:17px; background:linear-gradient(135deg,#421d21,#211619 58%,#171a1d); box-shadow:0 12px 36px #0005; }
.emergency-session-banner[hidden] { display:none; }
.emergency-session-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#8b3036; color:#fff; }
.emergency-session-banner strong,.emergency-session-banner small { display:block; }
.emergency-session-banner small { margin-top:3px; color:#f3b7bb; font-size:11px; }
.emergency-session-banner button { border:1px solid #b65359; border-radius:11px; background:#2c191b; color:#ffdadd; padding:10px 13px; font-weight:800; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; overflow: hidden; }
.brand-mark img { width: 47px; height: 47px; object-fit: contain; }
.brand strong { font-size: 16px; letter-spacing: .17em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.user-name { max-width: 180px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-link { display:flex; align-items:center; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:#ffc17d; text-decoration:none; font-size:12px; font-weight:800; }
.install-top { display:inline-flex; align-items:center; justify-content:center; }
.install-top b { margin-right:5px; font-size:18px; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); cursor: pointer; }
.icon-button svg { width: 19px; height: 19px; }
main { padding: 18px 18px 112px; }
.view { display: none; animation: enter .24s ease-out; }
.view.active { display: block; }
@keyframes enter { from { opacity:0; transform:translateY(6px); } }
.mode-banner { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:11px 14px; border:1px solid #5f461f; border-radius:15px; background:#242014; }
.mode-banner strong,.mode-banner small { display:block; }
.mode-banner strong { color:#ffd18f; font-size:12px; }
.mode-banner small { margin-top:2px; color:#b9aa91; font-size:11px; }
.mode-banner.integrated { border-color:rgba(67,216,155,.35); background:rgba(22,49,39,.62); }
.mode-banner.integrated strong { color:#7de5b7; }
.mode-banner.integrated small { color:#a4c9b8; }
.pulse { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--orange); box-shadow:0 0 0 6px rgba(255,130,16,.12); }

.map-stage { position:relative; height: min(58vh, 560px); min-height: 430px; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:#202428; box-shadow:0 18px 55px rgba(0,0,0,.28); }
.live-map,.history-map { width:100%; height:100%; background:#202428; }
.leaflet-container { font-family:inherit; }
.zonsky-map-tile { transition:filter .25s ease; }
.zonsky-map-tile--dark { filter:brightness(.62) invert(1) contrast(1.25) hue-rotate(180deg) saturate(.32); }
.leaflet-control-attribution { background:rgba(13,15,16,.74) !important; color:#929aa2; font-size:8px !important; }
.leaflet-control-attribution a { color:#ffc17d; }
.vehicle-floating-card { position:absolute; z-index:500; top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; border:1px solid rgba(255,255,255,.13); border-radius:17px; background:rgba(13,15,16,.88); backdrop-filter:blur(16px); box-shadow:0 12px 30px #0006; }
.vehicle-select-heading { min-width:0; display:flex; align-items:center; gap:10px; }
.vehicle-type-badge { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:rgba(255,130,16,.15); color:var(--orange); }
.vehicle-type-badge svg { width:25px; height:25px; }
.vehicle-select-heading label { min-width:0; }
.vehicle-select-heading label > span { display:block; margin-bottom:3px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.13em; }
#vehicleSelector { max-width:310px; width:100%; padding:0 25px 0 0; border:0; background:transparent; color:#fff; font-size:15px; font-weight:850; outline:0; text-overflow:ellipsis; cursor:pointer; }
.status-pill { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid rgba(67,216,155,.28); border-radius:999px; background:rgba(67,216,155,.11); color:var(--green); font-size:10px; font-weight:800; }
.status-pill i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent); }
.status-pill.offline { color:var(--red); border-color:rgba(255,94,103,.28); background:rgba(255,94,103,.11); }
.map-tools { position:absolute; z-index:500; top:88px; right:14px; display:grid; gap:8px; }
.map-tools button { width:43px; height:43px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(13,15,16,.88); color:white; box-shadow:0 8px 22px #0005; backdrop-filter:blur(12px); cursor:pointer; }
.map-tools button[aria-busy="true"] { color:var(--orange); cursor:wait; animation:locationSearching 1s ease-in-out infinite alternate; }
.map-tools svg { width:20px; height:20px; }
.location-sheet { position:absolute; z-index:500; left:14px; right:14px; bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 15px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(13,15,16,.9); backdrop-filter:blur(16px); box-shadow:0 12px 30px #0006; }
.location-sheet > div { min-width:0; }
.location-sheet strong,.location-sheet small { display:block; }
.location-sheet strong { margin-top:4px; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.location-sheet small { margin-top:3px; color:var(--muted); font-size:10px; }
.location-meta { display:flex; flex-wrap:wrap; gap:2px 9px; }
.location-meta small:first-child { color:#ffc17d; }
.location-sheet a { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:var(--orange); color:#211305; font-size:20px; font-weight:900; text-decoration:none; }
.zonsky-vehicle-marker { background:transparent; border:0; }
.route-start-dot { display:block; width:18px; height:18px; border:3px solid white; border-radius:50%; background:var(--green); box-shadow:0 4px 12px #0008; }
.marker-shell { position:relative; width:52px; height:52px; display:grid; place-items:center; border:3px solid rgba(255,255,255,.92); border-radius:18px 18px 18px 5px; background:linear-gradient(145deg,#ff9d42,var(--orange)); color:#1d1208; box-shadow:0 8px 24px #0008; transform:rotate(-45deg); }
.marker-shell::after { content:""; position:absolute; inset:-9px; z-index:-1; border:2px solid rgba(255,130,16,.4); border-radius:23px; animation:markerPulse 2.2s infinite; }
.marker-shell svg { width:30px; height:30px; stroke-width:1.9; transform:rotate(45deg); }
@keyframes markerPulse { 0%,100%{opacity:.25;transform:scale(.88)} 50%{opacity:.8;transform:scale(1.05)} }
@keyframes locationSearching { from{opacity:.55} to{opacity:1} }
.zonsky-user-location { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#2f8cff; box-shadow:0 0 0 6px rgba(47,140,255,.2),0 5px 16px #0008; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:#15181a; color:white; }
.leaflet-popup-content { margin:12px 14px; }
.marker-popup strong,.marker-popup small { display:block; }
.marker-popup small { margin-top:3px; color:#aeb4ba; }

.protection-bar { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:12px; margin-top:14px; padding:14px; border:1px solid rgba(67,216,155,.24); border-radius:20px; background:linear-gradient(135deg,rgba(67,216,155,.1),rgba(23,26,29,.96) 55%); }
.protection-bar.alert { border-color:rgba(255,130,16,.43); background:linear-gradient(135deg,rgba(255,130,16,.13),rgba(23,26,29,.96) 55%); }
.protection-bar.blocked { border-color:rgba(255,94,103,.43); background:linear-gradient(135deg,rgba(255,94,103,.13),rgba(23,26,29,.96) 55%); }
.protection-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:15px; background:rgba(67,216,155,.13); color:var(--green); }
.protection-bar.alert .protection-icon { color:var(--orange); background:rgba(255,130,16,.13); }
.protection-bar.blocked .protection-icon { color:var(--red); background:rgba(255,94,103,.13); }
.protection-bar > span:nth-child(2) { min-width:0; }
.protection-bar strong,.protection-bar small { display:block; }
.protection-bar strong { font-size:14px; }
.protection-bar small { margin-top:3px; color:var(--muted); font-size:11px; }
.protection-bar button { min-height:39px; padding:0 13px; border:1px solid rgba(255,130,16,.45); border-radius:12px; background:rgba(255,130,16,.1); color:#ffc17d; font-size:11px; font-weight:850; cursor:pointer; }
.telemetry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 10px; }
.telemetry-grid article,.history-summary article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.telemetry-grid span,.history-summary span { display:block; margin-bottom:7px; color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.11em; }
.telemetry-grid strong { display:block; overflow:hidden; color:#f5f6f7; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.telemetry-grid b { color:var(--orange-2); font-size:22px; }
.signal-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.signal-row article { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:16px; background:#131618; }
.signal-row small,.signal-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signal-row small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.11em; }
.signal-row strong { margin-top:3px; font-size:11px; }
.signal-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(67,216,155,.1); }
.signal-dot.invalid { background:var(--red); box-shadow:0 0 0 5px rgba(255,94,103,.1); }
.signal-dot.power { background:var(--orange); box-shadow:0 0 0 5px rgba(255,130,16,.1); }
.signal-bars { height:19px; display:flex; align-items:flex-end; gap:2px; color:var(--green); }
.signal-bars i { width:3px; border-radius:3px; background:currentColor; }
.signal-bars i:nth-child(1){height:6px}.signal-bars i:nth-child(2){height:10px}.signal-bars i:nth-child(3){height:14px}.signal-bars i:nth-child(4){height:18px}
.signal-bars.weak i:nth-child(n+2) { opacity:.2; }
.quick-actions { display:grid; gap:10px; }
.action-card { width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--panel); text-align:left; cursor:pointer; }
.action-card:disabled { opacity:.45; cursor:not-allowed; }
.action-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; }
.action-icon svg { width:22px; height:22px; }
.action-card.danger .action-icon { color:var(--red); background:rgba(255,94,103,.11); }
.action-card.success .action-icon { color:var(--green); background:rgba(67,216,155,.11); }
.action-card strong,.action-card small { display:block; }
.action-card small { margin-top:3px; color:var(--muted); font-size:11px; }
.action-card > b { display:grid; place-items:center; color:var(--muted); }
.vehicle-details,.settings-card,.account-card,.list-card,.support-card { margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.vehicle-details summary { display:flex; align-items:center; justify-content:space-between; padding:16px; font-size:13px; font-weight:800; cursor:pointer; list-style:none; }
.vehicle-details summary::-webkit-details-marker { display:none; }
.vehicle-details summary span { display:grid; place-items:center; color:var(--orange); transition:.2s; }
.vehicle-details[open] summary span { transform:rotate(90deg); }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.detail-grid div { padding:14px 16px; border-bottom:1px solid var(--line); }
.detail-grid div:nth-child(odd) { border-right:1px solid var(--line); }
.detail-grid span,.detail-grid strong { display:block; }
.detail-grid span { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.detail-grid strong { margin-top:5px; overflow-wrap:anywhere; font-size:12px; }

.section-heading { padding:8px 3px 17px; }
.section-heading h1 { margin:7px 0 6px; font-size:30px; letter-spacing:-.025em; }
.section-heading p { margin:0; color:var(--muted); }
.period-tabs { display:flex; gap:8px; margin-bottom:13px; }
.period-tabs button { flex:1; min-height:40px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; }
.period-tabs button.active { border-color:var(--orange); background:rgba(255,130,16,.11); color:#ffc17d; }
.history-map-card { position:relative; height:390px; overflow:hidden; border:1px solid var(--line); border-radius:23px; }
.history-loading { position:absolute; z-index:500; inset:0; display:grid; place-items:center; background:rgba(13,15,16,.72); color:#d6dadd; font-size:12px; backdrop-filter:blur(4px); }
.history-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:13px 0; }
.history-summary strong { color:var(--orange-2); font-size:24px; }
.history-summary small { color:var(--muted); font-size:10px; }
.settings-card,.account-card,.list-card { padding:20px; }
.card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:15px; }
.card-title h2 { margin:6px 0 0; font-size:19px; }
.card-title > b.active { color:var(--green); background:rgba(67,216,155,.12); border:1px solid rgba(67,216,155,.25); border-radius:999px; padding:7px 10px; font-size:.75rem; }
#settingsStatus { color:var(--green); font-size:11px; }
.speed-limit { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:15px; color:#d6dadd; font-size:13px; font-weight:750; }
.speed-limit > span { display:flex; align-items:center; gap:7px; }
.speed-limit input { width:82px; margin:0; padding:10px; text-align:center; }
.speed-limit b { color:var(--muted); font-size:11px; }
.toggle-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 0; border-top:1px solid var(--line); cursor:pointer; }
.toggle-row span strong,.toggle-row span small { display:block; }
.toggle-row span strong { font-size:13px; }
.toggle-row span small { margin-top:3px; color:var(--muted); font-size:10px; }
.toggle-row input { position:absolute; opacity:0; }
.toggle-row i { position:relative; width:48px; height:27px; flex:0 0 auto; border-radius:99px; background:#3b4146; transition:.2s; }
.toggle-row i::after { content:""; position:absolute; width:21px; height:21px; top:3px; left:3px; border-radius:50%; background:white; transition:.2s; }
.toggle-row input:checked + i { background:var(--orange); }
.toggle-row input:checked + i::after { transform:translateX(21px); }
.settings-card .primary-button { margin-top:14px; }
.settings-card .secondary-button { margin-top:14px; }
.settings-card .card-title p { max-width:300px; margin:5px 0 0; color:var(--muted); font-size:11px; font-weight:500; line-height:1.45; }
.settings-card.read-only { border-color:rgba(255,130,16,.45); }
.settings-card.read-only .form-message { display:block; color:#e5af72; }

.plan-card { position:relative; overflow:hidden; padding:23px; border:1px solid rgba(255,130,16,.32); border-radius:23px; background:linear-gradient(145deg,#2b2118,#181b1e 68%); }
.plan-card::after { content:""; position:absolute; width:180px; height:180px; right:-75px; top:-90px; border-radius:50%; background:rgba(255,130,16,.13); }
.plan-card > span { color:#ffc17d; font-size:9px; font-weight:850; letter-spacing:.15em; }
.plan-card > div { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.plan-card h2 { margin:0; font-size:25px; }
.plan-card div b { padding:6px 9px; border-radius:999px; background:rgba(67,216,155,.12); color:var(--green); font-size:9px; text-transform:uppercase; }
.plan-card p { margin:10px 0; color:#aeb4ba; font-size:12px; }
.plan-card > strong { color:var(--orange-2); font-size:22px; }
.plan-management-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.9fr); gap:18px; align-items:center; margin:14px 0; padding:20px; border:1px solid #373d42; border-radius:21px; background:linear-gradient(145deg,#1a1d20,#121416); }
.plan-management-card h2 { margin:5px 0 6px; font-size:18px; }
.plan-management-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
#planChangeForm { display:grid; gap:10px; }
#planChangeForm label { display:grid; gap:6px; color:#c7cdd2; font-size:10px; font-weight:800; }
#planChangeSelect { width:100%; min-height:43px; border:1px solid var(--line); border-radius:12px; background:#101214; color:#fff; padding:0 11px; font:inherit; }
#planChangeForm .form-message { min-height:0; color:#ffc17d; }
#planChangeForm .form-message.success { color:var(--green); }
#planChangeForm .secondary-button:disabled { cursor:not-allowed; opacity:.58; }
.payment-list { display:grid; gap:10px; }
.payment-record { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:7px 12px; padding:15px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,#15181a,#111315); transition:border-color .2s,transform .2s; }
.payment-record:hover { border-color:#444b51; transform:translateY(-1px); }
.payment-record-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,130,16,.22); border-radius:13px; background:rgba(255,130,16,.09); color:var(--orange-2); }
.payment-record-icon svg { width:21px; height:21px; }
.payment-record strong,.payment-record small { display:block; }
.payment-record strong { font-size:15px; }
.payment-record small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.payment-record > b { align-self:start; padding:6px 9px; border-radius:999px; color:var(--yellow); background:rgba(255,200,92,.1); font-size:9px; text-transform:uppercase; }
.payment-record > b.paid { color:var(--green); background:rgba(67,216,155,.1); }
.payment-record > b.overdue { color:#ff8b8b; background:rgba(255,87,87,.12); }
.payment-record > b.refunded { color:#b8bec5; background:rgba(184,190,197,.1); }
.payment-record .pay-now { grid-column:1/-1; min-height:43px; display:grid; grid-template-columns:20px 1fr 18px; align-items:center; gap:9px; margin-top:6px; padding:0 13px; border:1px solid rgba(255,130,16,.55); border-radius:12px; background:linear-gradient(135deg,rgba(255,130,16,.16),rgba(255,130,16,.07)); color:#ffc17d; font-weight:800; cursor:pointer; }
.payment-record .pay-now svg { width:18px; height:18px; }
.payment-record .pay-now span { text-align:left; }
.payment-record .pay-now:hover { border-color:var(--orange); background:rgba(255,130,16,.2); }
.billing-card { position:relative; overflow:hidden; margin:14px 0; padding:21px; border:1px solid #373d42; border-radius:24px; background:radial-gradient(circle at 0 0,rgba(255,130,16,.09),transparent 34%),linear-gradient(145deg,#1b1e21,#151719); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.billing-card::after { content:""; position:absolute; width:170px; height:170px; right:-115px; top:-115px; border:1px solid rgba(255,130,16,.13); border-radius:50%; pointer-events:none; }
.billing-heading { position:relative; z-index:1; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:13px; }
.billing-heading-icon { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,130,16,.25); border-radius:15px; background:rgba(255,130,16,.12); color:var(--orange-2); }
.billing-heading-icon svg { width:23px; height:23px; }
.billing-heading h2 { margin:5px 0 0; font-size:20px; letter-spacing:-.02em; }
.billing-provider { padding:7px 10px; border:1px solid #343a3f; border-radius:999px; background:#24282c; color:var(--muted); font-size:9px; text-transform:uppercase; white-space:nowrap; }
.billing-provider.ready { border-color:rgba(67,216,155,.22); background:rgba(67,216,155,.1); color:var(--green); }
.billing-provider.ready::before { content:""; width:6px; height:6px; display:inline-block; margin-right:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.billing-intro { display:flex; align-items:flex-start; gap:8px; margin:0 0 17px; padding:11px 12px; border:1px solid rgba(255,255,255,.05); border-radius:13px; background:rgba(7,9,10,.32); color:#a7afb6; font-size:11px; line-height:1.45; }
.billing-intro svg { width:17px; height:17px; flex:0 0 auto; color:var(--green); }
.billing-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.billing-options button { position:relative; min-height:128px; display:grid; grid-template-columns:44px minmax(0,1fr); align-content:center; align-items:center; gap:5px 10px; padding:15px 30px 15px 14px; overflow:hidden; border:1px solid #373d42; border-radius:17px; background:linear-gradient(145deg,#15181a,#101214); color:white; text-align:left; cursor:pointer; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.billing-options button:hover:not(:disabled),.billing-options button:focus-visible { border-color:var(--orange); background:linear-gradient(145deg,rgba(255,130,16,.13),#121416); transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.22); outline:0; }
.billing-options button:disabled { cursor:not-allowed; opacity:.58; }
.billing-options button.is-unavailable { border-style:dashed; background:#131518; }
.billing-options button.is-unavailable .payment-option-icon { color:#8e969d; border-color:#3d4348; background:#202428; }
.billing-options button.is-unavailable .payment-option-tag { color:#c2a071; background:rgba(194,160,113,.10); }
.billing-options button.is-active { border-color:rgba(67,216,155,.36); background:linear-gradient(145deg,rgba(67,216,155,.1),#121516); opacity:1; }
.billing-options button.is-loading { opacity:.76; cursor:wait; }
.billing-options button.is-loading::after { content:""; position:absolute; width:18px; height:18px; right:12px; bottom:12px; border:2px solid rgba(255,255,255,.22); border-top-color:var(--orange); border-radius:50%; animation:billing-spin .75s linear infinite; }
.payment-option-icon { grid-row:1 / span 2; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,130,16,.26); border-radius:14px; background:rgba(255,130,16,.11); color:var(--orange-2); }
.payment-option-icon svg { width:22px; height:22px; }
.payment-option-copy { min-width:0; align-self:end; }
.payment-option-copy strong,.payment-option-copy small { display:block; }
.payment-option-copy strong { font-size:13px; line-height:1.2; }
.payment-option-copy small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; }
.payment-option-tag { grid-column:2; justify-self:start; align-self:start; padding:4px 7px; border-radius:999px; background:rgba(255,130,16,.1); color:#ffc17d; font-size:8px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.is-active .payment-option-tag { background:rgba(67,216,155,.12); color:var(--green); }
.payment-option-arrow { position:absolute; right:10px; top:50%; width:16px; height:16px; color:#697078; transform:translateY(-50%); }
.billing-feedback { min-height:39px; display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 12px; border:1px solid rgba(255,130,16,.18); border-radius:12px; background:rgba(255,130,16,.06); color:#d4b897; font-size:10px; line-height:1.4; }
.billing-feedback-icon { width:19px; height:19px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:rgba(255,130,16,.16); color:var(--orange-2); font-size:11px; font-weight:900; }
.billing-feedback[data-tone="success"] { border-color:rgba(67,216,155,.2); background:rgba(67,216,155,.06); color:#9fd8c0; }
.billing-feedback[data-tone="success"] .billing-feedback-icon { background:rgba(67,216,155,.15); color:var(--green); }
.billing-feedback[data-tone="error"] { border-color:rgba(255,94,103,.26); background:rgba(255,94,103,.07); color:#ffadb2; }
.billing-feedback[data-tone="error"] .billing-feedback-icon { background:rgba(255,94,103,.16); color:var(--red); }
.billing-flow { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:15px 0 0; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.07); list-style:none; }
.billing-flow li { display:flex; align-items:flex-start; gap:7px; color:#aeb5bb; font-size:9px; line-height:1.4; }
.billing-flow b { display:grid; place-items:center; width:19px; height:19px; flex:0 0 auto; border:1px solid rgba(255,130,16,.3); border-radius:50%; background:rgba(255,130,16,.10); color:#ffc17d; font-size:9px; }
@keyframes billing-spin { to { transform:rotate(360deg); } }
.pix-qr { width:min(100%,280px); margin:15px auto; border:10px solid white; border-radius:14px; }
.pix-code { display:block; max-height:82px; margin:14px 0; padding:12px; overflow:auto; border-radius:12px; background:#111315; color:#d8dde1; font-size:10px; overflow-wrap:anywhere; white-space:normal; }
#pixAutomaticDialog .secondary-button { margin-bottom:9px; }
.empty-state { padding:24px 10px; color:var(--muted); text-align:center; font-size:12px; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.form-grid .wide { grid-column:1/-1; }
.field-note { align-self:end; margin:-7px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }
.form-grid label:has(#accountName) input { background:#121416; color:#b8bec3; cursor:not-allowed; }
.account-card:first-of-type { margin-top:0; }
.support-card { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px; background:linear-gradient(145deg,#202429,#171a1d); }
.support-card h2 { margin:7px 0; }
.support-card p { max-width:560px; margin:0; color:var(--muted); font-size:12px; }
.support-actions { min-width:210px; display:grid; gap:8px; }
.whatsapp-button { min-height:46px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:13px; background:#25d366; color:#062b16; padding:0 15px; font-size:12px; font-weight:850; text-decoration:none; }
.whatsapp-button:hover { background:#42e27c; }
.whatsapp-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-unavailable { color:#c8a97d; font-size:10px; line-height:1.4; text-align:center; }
.account-exit { display:flex; justify-content:flex-end; margin-top:14px; }
.logout-button { min-height:34px; border:1px solid #563139; border-radius:10px; background:rgba(255,94,103,.08); color:#ff969c; padding:0 11px; font-size:10px; cursor:pointer; }
.zonsky-user-tooltip { border:1px solid #4ba4ff; border-radius:999px; background:#122439e8; color:#d9efff; padding:3px 7px; font-size:10px; font-weight:800; box-shadow:none; }
.zonsky-user-tooltip::before { display:none; }

.bottom-nav { position:fixed; z-index:1000; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,1280px); display:grid; grid-template-columns:repeat(4,1fr); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(16,18,20,.94); backdrop-filter:blur(18px); }
.bottom-nav.support-mode { grid-template-columns:repeat(2,1fr); }
.bottom-nav button { display:grid; justify-items:center; gap:3px; padding:6px 3px; border:0; background:transparent; color:var(--muted); font-size:9px; cursor:pointer; }
.bottom-nav svg { width:21px; height:21px; }
.bottom-nav button.active { color:var(--orange); }

dialog { width:min(calc(100% - 28px),440px); padding:0; border:1px solid #393f44; border-radius:25px; background:#1c1f22; color:var(--text); box-shadow:0 30px 90px #000; }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
dialog form { position:relative; padding:27px; }
.dialog-close { position:absolute; right:15px; top:13px; border:0; background:transparent; color:var(--muted); font-size:28px; cursor:pointer; }
.dialog-icon { width:53px; height:53px; display:grid; place-items:center; margin-bottom:17px; border-radius:18px; background:rgba(255,130,16,.13); color:var(--orange); font-size:26px; }
.dialog-eyebrow { display:block; margin:-7px 0 7px; color:var(--orange-2); font-size:9px; font-weight:900; letter-spacing:.15em; }
dialog h2 { margin-bottom:8px; }
dialog p { color:var(--muted); line-height:1.45; }
.confirmation { display:flex; gap:10px; margin:18px 0; padding:13px; border-radius:13px; background:#141618; font-size:13px; line-height:1.35; }
.confirmation input { width:19px; flex:0 0 auto; accent-color:var(--orange); }
.code-label { display:block; color:var(--muted); font-size:12px; font-weight:700; }
.code-label input { width:100%; display:block; margin-top:8px; padding:14px; border:1px solid #42474d; border-radius:13px; outline:0; background:#121416; color:white; font-size:19px; letter-spacing:.35em; text-align:center; }
.security-code-help { display:block; margin:8px 0 0; color:#aeb5bb; font-size:11px; line-height:1.4; }
#securityDialogMessage { display:block; margin:8px 0 0; }
.demo-code { display:block; margin:8px 0 17px; color:#bb9a75; }
.maintenance-fields { display:grid; gap:13px; margin:20px 0 16px; }
.maintenance-fields label { display:grid; gap:6px; color:#e8ebed; font-size:12px; font-weight:800; }
.maintenance-fields label > span { color:var(--muted); font-size:10px; font-weight:500; line-height:1.35; }
.maintenance-fields input,
.maintenance-fields select { width:100%; min-height:45px; border:1px solid #42474d; border-radius:13px; background:#121416; color:#f7f8f9; padding:11px 12px; outline:0; }
.maintenance-fields input:focus,
.maintenance-fields select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,130,16,.12); }
#maintenanceForm .form-message { display:block; margin:-2px 0 12px; }
.install-steps { margin:18px 0 22px; padding-left:22px; color:#d5d9dc; line-height:1.5; }
.install-steps li { padding:4px 0; }
.toast { position:fixed; z-index:1500; left:50%; bottom:92px; width:min(calc(100% - 32px),430px); padding:13px 16px; border-radius:14px; background:#f5f6f7; color:#111315; font-weight:750; opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:.25s; box-shadow:0 10px 35px #0008; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width: 820px) {
  main { padding:24px 30px 120px; }
  .view[data-view="home"].active { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr); gap:14px; align-items:start; }
  .view[data-view="home"] .mode-banner { grid-column:1/-1; margin:0; }
  .map-stage { grid-column:1; grid-row:2 / span 5; height:650px; max-height:calc(100vh - 130px); }
  .protection-bar,.telemetry-grid,.signal-row,.quick-actions,.vehicle-details { grid-column:2; margin-top:0; }
  .telemetry-grid { grid-template-columns:repeat(2,1fr); }
  .signal-row { grid-template-columns:1fr; }
  .history-map-card { height:500px; }
}

@media (max-width: 819px) {
  .login-screen { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .login-panel { padding:34px 24px 48px; }
  .login-brand { margin-bottom:48px; }
  .login-panel > h1 { font-size:39px; }
  .user-name { display:none; }
  .install-top { width:42px; padding:0; }
  .install-top span { display:none; }
  .install-top b { margin:0; }
  .admin-link { width:42px; padding:0; justify-content:center; font-size:0; }
  .admin-link::after { content:"A"; font-size:13px; }
  .map-stage { min-height:440px; height:56vh; }
}

@media (prefers-reduced-motion: reduce) {
  .app-opening { transition:none; }
}

@media (max-width: 540px) {
  .emergency-session-banner { grid-template-columns:38px 1fr; }
  .emergency-session-banner button { grid-column:1 / -1; }
  .topbar { height:66px; padding:0 14px; }
  .brand-mark { width:37px; height:37px; }
  .brand-mark img { width:43px; height:43px; }
  .brand strong { font-size:14px; }
  main { padding:12px 12px 104px; }
  .mode-banner { border-radius:13px; }
  .map-stage { min-height:430px; height:57vh; border-radius:21px; }
  .vehicle-floating-card { top:10px; left:10px; right:10px; padding:10px; }
  .vehicle-type-badge { width:36px; height:36px; }
  #vehicleSelector { max-width:190px; font-size:13px; }
  .status-pill { padding:6px 7px; font-size:9px; }
  .map-tools { top:76px; right:10px; }
  .map-tools button { width:40px; height:40px; }
  .location-sheet { left:10px; right:10px; bottom:10px; padding:12px; }
  .protection-bar { grid-template-columns:42px 1fr; }
  .protection-bar > button { grid-column:1/-1; min-height:42px; }
  .telemetry-grid { grid-template-columns:repeat(2,1fr); }
  .signal-row { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-grid div:nth-child(odd) { border-right:0; }
  .history-map-card { height:330px; }
  .history-summary { grid-template-columns:1fr 1fr; }
  .history-summary article:last-child { grid-column:1/-1; }
  .billing-card { padding:17px; border-radius:21px; }
  .plan-management-card { grid-template-columns:1fr; padding:17px; border-radius:19px; }
  .billing-heading { grid-template-columns:42px 1fr; }
  .billing-heading-icon { width:42px; height:42px; border-radius:13px; }
  .billing-provider { grid-column:1/-1; justify-self:start; margin-top:2px; }
  .billing-options { grid-template-columns:1fr; }
  .billing-options button { min-height:88px; grid-template-columns:46px minmax(0,1fr); padding:13px 34px 13px 13px; }
  .payment-option-icon { width:46px; height:46px; }
  .payment-option-copy strong { font-size:14px; }
  .payment-option-copy small { font-size:10px; }
  .billing-flow { grid-template-columns:1fr; gap:8px; }
  .payment-record { grid-template-columns:40px minmax(0,1fr) auto; padding:13px; }
  .payment-record-icon { width:40px; height:40px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .support-card { align-items:stretch; flex-direction:column; }
  .support-actions { min-width:0; }
  .account-exit { justify-content:center; }
  .section-heading h1 { font-size:27px; }
}

@media (max-width: 360px) {
  .login-panel { padding: 26px 16px 38px; }
  .login-brand { margin-bottom: 34px; }
  .login-panel > h1 { font-size: 33px; }
  .topbar { padding-inline: 10px; }
  .brand strong { font-size: 12px; }
  .top-actions { gap: 5px; }
  .icon-button,
  .install-top,
  .admin-link { width: 38px; height: 38px; }
  main { padding-inline: 10px; }
  .vehicle-floating-card { gap: 7px; }
  #vehicleSelector { max-width: 145px; }
  .location-sheet { padding: 10px; }
  .location-sheet a { width: 36px; height: 36px; }
  .telemetry-grid article,
  .history-summary article { padding: 11px; }
}