/* ===== Fonts: Inter (SIL OFL 1.1) — open-licensed, SF-like. Served locally. ===== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-cyrillic-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --bg: #0a0a0a;
  --ink: #f5f5f0;
  --muted: #a1a196;
  --accent: #ffd60a;
  --accent2: #ffb300;
  --good: #59e0a3;
  --bad: #ff6b7d;
  --warn: #ffd166;
  --line: rgba(255, 255, 255, 0.1);
  --glass: rgba(28, 28, 30, 0.82);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --r: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dash-k: 1;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'tnum' 0;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
b { font-weight: 650; }
kbd { font: 600 11px/1 'Inter', sans-serif; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px; color: #f5f5f0; display: inline-block; min-width: 24px; text-align: center; }
kbd.w { min-width: 52px; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.muted { color: var(--muted); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s var(--ease); background: #141414; }
#gl.live { opacity: 1; }
#app { position: fixed; inset: 0; pointer-events: none; }
#app > * { pointer-events: auto; }
#hud-root, #screens { position: fixed; inset: 0; pointer-events: none; }
#screens > * { pointer-events: auto; }

/* ===== glass ===== */
.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08); border-radius: var(--r); }

/* ===== screens ===== */
.screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 16px; overflow: auto; background: #000; opacity: 0; transform: scale(1.015); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.5s; filter: blur(8px); }
.screen.in { opacity: 1; transform: none; filter: none; }
.screen.out { opacity: 0; transform: scale(0.985); filter: blur(10px); }
.screen.tall { justify-content: flex-start; }
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #ffd60a; box-shadow: 0 8px 28px rgba(255, 214, 10, 0.45), inset 0 1px 0 rgba(255,255,255,.35); transform: rotate(-90deg); }
.brand .logo .ic { width: 26px; height: 26px; }
.brand b { display: block; font-size: 22px; letter-spacing: -0.02em; font-weight: 750; }
.brand span { font-size: 11px; letter-spacing: 0.34em; color: var(--accent); font-weight: 650; }

.card { width: min(430px, 100%); padding: 28px; background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1); animation: rise 0.7s var(--ease) both; }
.card.narrow { width: min(500px, 100%); text-align: center; display: flex; flex-direction: column; gap: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(6px); } }
.card h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -0.02em; font-weight: 750; }
.card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.foot { font-size: 12px; color: var(--muted); text-align: center; max-width: 430px; margin: 0; }

.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); margin-bottom: 22px; }
.tabs button { position: relative; z-index: 1; border: 0; background: none; padding: 10px; font-weight: 600; font-size: 14px; color: var(--muted); transition: color 0.3s; }
.tabs button.on { color: #ffd60a; }
.tab-ind { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 11px; background: rgba(255, 214, 10, .16); border: 1px solid rgba(255, 214, 10, .35); transition: transform 0.45s var(--ease); }

.panes { position: relative; }
.pane { display: none; flex-direction: column; gap: 14px; }
.pane.on { display: flex; animation: paneIn 0.5s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateX(14px); } }
.pane h2 { margin-bottom: 0; }
.pane p.muted { margin-bottom: 4px; }

.field { position: relative; display: block; }
.field .fi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); transition: color 0.25s; }
.field input { width: 100%; height: 54px; padding: 18px 44px 0 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 10, 10, 0.55); outline: none; font-size: 15px; font-weight: 500; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; }
.field .fl { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; transition: all 0.25s var(--ease); }
.field input:focus, .field input:not(:placeholder-shown) ~ .fl { top: 17px; font-size: 11px; letter-spacing: 0.03em; }
.field input:focus { border-color: rgba(255, 214, 10, 0.7); box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.14); background: rgba(10,10,10,.75); }
.field:focus-within .fi, .field:focus-within .fl { color: var(--accent); }
.field .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; }
.field .eye:hover { color: #fff; background: rgba(255,255,255,.06); }
.shake { animation: shake 0.45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.hint-line { margin: -4px 0 0 !important; font-size: 12px !important; color: var(--warn); height: 0; opacity: 0; overflow: hidden; transition: all 0.3s; }
.hint-line.show { height: 16px; opacity: 1; }
.err-line { margin: 0 !important; font-size: 13px !important; color: var(--bad); max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s; }
.err-line.show { max-height: 60px; opacity: 1; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.07); font-weight: 650; font-size: 15px; overflow: hidden; transition: transform 0.18s var(--ease), background 0.25s, box-shadow 0.25s, opacity 0.25s; }
.btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn.primary { border: 0; background: #ffd60a; box-shadow: 0 10px 26px rgba(255, 214, 10, 0.4), inset 0 1px 0 rgba(255,255,255,.4); color: #0a0a0a; }
.btn.primary:hover { box-shadow: 0 14px 34px rgba(255, 214, 10, 0.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.sm { height: 38px; font-size: 13px; padding: 0 14px; border-radius: 11px; }
.btn.ghost.done { background: rgba(89, 224, 163, 0.18); border-color: rgba(89, 224, 163, 0.5); color: var(--good); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.busy { pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.busy > * { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { border: 0; background: none; color: var(--accent); font-size: 13.5px; font-weight: 550; padding: 6px; align-self: center; }
.link:hover { text-decoration: underline; }
.link.sm { font-size: 12px; padding: 2px 4px; }
.link kbd { margin-left: 4px; font-size: 10px; padding: 2px 5px; min-width: 0; }

.meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -4px; }
.meter i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); transition: background .3s; }
.meter i.on.s1 { background: var(--bad); } .meter i.on.s2 { background: var(--warn); } .meter i.on.s3 { background: #9be15d; } .meter i.on.s4 { background: var(--good); }
.meter-l { font-size: 11px; color: var(--muted); margin-left: 6px; min-width: 70px; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.rules li { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; transition: color .3s; }
.rules .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: all .3s var(--ease); }
.rules .dot .ic { width: 11px; height: 11px; opacity: 0; transform: scale(.4); transition: all .3s var(--ease); }
.rules li.ok { color: #cfeedd; } .rules li.ok .dot { background: var(--good); border-color: var(--good); color: #052; } .rules li.ok .dot .ic { opacity: 1; transform: none; }

/* recovery */
.badge-ic { width: 60px; height: 60px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; background: rgba(255,214,10,.14); color: var(--accent2); border: 1px solid rgba(255,184,107,.4); }
.badge-ic .ic { width: 30px; height: 30px; }
.code { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 18px 12px; border-radius: 16px; background: rgba(0,0,0,.6); border: 1px dashed rgba(255,184,107,.45); font: 700 22px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.08em; user-select: all; }
.code span { animation: pop .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 200ms); color: #ffe2bd; }
.code em { color: var(--muted); font-style: normal; opacity: .6; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.9); filter: blur(4px); } }
.row { display: flex; gap: 10px; } .row .btn { flex: 1; height: 46px; font-size: 14px; }
.check { display: flex; align-items: center; gap: 11px; text-align: left; font-size: 14px; cursor: pointer; padding: 6px 2px; }
.check input { position: absolute; opacity: 0; }
.check .box { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; flex: none; transition: all .3s var(--ease); color: transparent; }
.check input:checked + .box { background: var(--good); border-color: var(--good); color: #04281a; transform: scale(1.05); }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(255, 214, 10, .3); }

/* loading */
.loading { gap: 18px; }
.load-bar { width: min(320px, 70vw); height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.load-bar i { display: block; height: 100%; width: 25%; border-radius: 3px; background: #ffd60a; transition: width .5s var(--ease); animation: shimmer 1.6s linear infinite; background-size: 200% 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.load-text { color: var(--muted); font-size: 14px; margin: 0; }
.loading.err .load-text { color: var(--bad); max-width: 460px; text-align: center; }

/* vehicles */
.vs-head { text-align: center; }
.vs-head h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; font-weight: 780; }
.vs-head p { margin: 0; }
.v-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 340px)); justify-content: center; gap: 22px; perspective: 1200px; max-width: 100%; }
.v-card { --rx: 0deg; --ry: 0deg; --mx: 50%; border-radius: 26px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s var(--ease), box-shadow .3s, border-color .3s; animation: rise .8s var(--ease) both; animation-delay: calc(var(--i) * 120ms); will-change: transform; }
.v-card:hover { border-color: rgba(255, 214, 10, .5); box-shadow: 0 26px 70px rgba(255, 214, 10, .25), inset 0 1px 0 rgba(255,255,255,.14); }
.v-card.picked { transform: scale(1.03); border-color: var(--good); }
.v-stage { position: relative; height: 170px; display: grid; place-items: center; background: #1c1c1e; overflow: hidden; }
.v-stage canvas { width: 78%; height: auto; filter: drop-shadow(0 16px 14px rgba(0,0,0,.55)); transform: translateY(0) rotate(-6deg); transition: transform .6s var(--ease); }
.v-card:hover .v-stage canvas { transform: translateY(-4px) rotate(0) scale(1.04); }
.v-tag { position: absolute; left: 14px; top: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--line); font-weight: 600; }
.v-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.v-body h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; font-weight: 750; }
.v-body p { margin: 0; font-size: 13px; line-height: 1.45; }
.stats { margin: 4px 0 6px; display: grid; gap: 9px; }
.stats > div { display: grid; grid-template-columns: 112px 1fr; align-items: center; font-size: 13px; }
.stats dt { color: var(--muted); } .stats dd { margin: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.stats dd b { font-size: 15px; }
.sb { flex: 1 1 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 2px; }
.sb i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); animation: grow 1s var(--ease) .4s forwards; }
@keyframes grow { to { width: var(--w); } }
.chip-f { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 650; }
.chip-f.petrol { background: rgba(255,184,107,.18); color: var(--accent2); } .chip-f.diesel { background: rgba(255, 214, 10, .18); color: var(--accent); }
.vehicles .back { margin-top: -6px; }
.vehicles { justify-content: flex-start; }
@media (max-width: 1180px) { .v-grid { grid-template-columns: repeat(2, minmax(260px, 340px)); } }
@media (max-width: 760px) { .v-grid { grid-template-columns: minmax(260px, 340px); } }

/* ===== HUD ===== */
.hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease) .2s; font-size: 14px; }
.hud.show { opacity: 1; }
.hud > * { pointer-events: auto; }
.hud-tl { position: fixed; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 10px; width: 330px; }
.profile { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; }
.avatar { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-weight: 750; font-size: 18px; background: #ffd60a; color: #0a0a0a; }
.pf-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money { display: flex; align-items: center; gap: 6px; color: #ffe08a; font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.money .ic { width: 15px; height: 15px; } .money em { font-style: normal; }
.money.up { animation: moneyUp .9s var(--ease); } .money.down { animation: moneyDown .9s var(--ease); }
@keyframes moneyUp { 30% { color: var(--good); transform: scale(1.12); transform-origin: left; } }
@keyframes moneyDown { 30% { color: var(--bad); transform: scale(1.08); transform-origin: left; } }
.fines-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; text-align: left; transition: transform .2s var(--ease), border-color .3s; }
.fines-chip:hover { transform: translateX(3px); }
.fines-chip .ic { color: var(--muted); } .fines-chip em { font-style: normal; font-weight: 750; } .fines-chip i { font-style: normal; color: var(--muted); }
.fines-chip.has { border-color: rgba(255,107,125,.5); } .fines-chip.has .ic { color: var(--bad); animation: pulse 2s infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

.contract { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; animation: rise .7s var(--ease) both; }
.ct-head { display: flex; align-items: center; gap: 11px; }
.ct-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,193,77,.16); color: #ffc14d; flex: none; }
.ct-head > div:nth-child(2) { flex: 1; min-width: 0; } .ct-head small { display: block; color: var(--muted); font-size: 11px; } .ct-head b { font-size: 14px; display: block; line-height: 1.25; }
.ct-pay { text-align: right; } .ct-pay b { color: var(--good); font-size: 16px; white-space: nowrap; }
.ct-load { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .ct-load b { color: var(--ink); }
.ct-route { position: relative; display: grid; gap: 7px; padding-left: 18px; font-size: 12.5px; }
.ct-route::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,.25); border-radius: 1px; }
.ct-route .pt { position: relative; line-height: 1.3; } .ct-route .pt i { position: absolute; left: -18px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid; background: var(--bg); }
.pt.a i { border-color: #ffc14d; } .pt.b i { border-color: #59e0a3; }
.ct-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.st { font-size: 10px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; line-height: 1.15; }
.st i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .5s; }
.st.done i { background: var(--good); } .st.on i { background: var(--accent); animation: blink 1.6s infinite; } .st.on { color: var(--ink); }
@keyframes blink { 50% { opacity: .45; } }
.ct-prog { display: none; align-items: center; gap: 10px; font-size: 12px; } .ct-prog.on { display: flex; }
.ct-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; } .ct-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: #ffd60a; transition: width .3s linear; }
.ct-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); } .ct-dist { display: inline-flex; align-items: center; gap: 5px; } .ct-dist em { font-style: normal; color: var(--ink); font-weight: 650; }
.ct-empty { color: var(--muted); font-size: 13px; }

.hud-tc { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.street { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.street .city { color: var(--muted); font-weight: 550; } .street i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); } .street b { font-weight: 650; min-width: 60px; text-align: center; }
.surface { padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--warn); opacity: 0; transform: translateY(-6px); transition: all .3s var(--ease); }
.surface.on { opacity: 1; transform: none; }
.hud-tr { position: fixed; right: 16px; top: 16px; display: flex; gap: 10px; align-items: center; }
.clock { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-variant-numeric: tabular-nums; }
.clock b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .clock small { color: var(--muted); font-size: 10px; letter-spacing: .12em; font-weight: 650; }
#h-sun .ic { color: var(--warn); display: block; } .clock.night #h-sun .ic { color: #9bb4ff; }
.net { height: 40px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border-radius: 13px; font-variant-numeric: tabular-nums; }
.net b { font-size: 14px; font-weight: 700; } .net small { font-size: 10.5px; opacity: .6; margin-left: 2px; font-weight: 600; }
.net-ping, .net-pl { display: flex; align-items: baseline; gap: 0; } .net-pl { align-items: center; gap: 5px; } .net-pl small { margin-left: 0; } .net-pl .ic { width: 15px; height: 15px; opacity: .75; align-self: center; }
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); align-self: center; margin-right: 7px; box-shadow: 0 0 8px var(--good); }
.net-sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); }
.net.warn .net-dot { background: #ffc94d; box-shadow: 0 0 8px #ffc94d; }
.net.bad .net-dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); animation: blink 1s infinite; }
.round { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; padding: 0; transition: transform .2s var(--ease); } .round:hover { transform: scale(1.08); }

.mini { position: fixed; right: 18px; bottom: 18px; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; padding: 0; border-width: 2px; }
.mini canvas { width: 100%; height: 100%; display: block; }
.mini-n { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-size: 11px; font-weight: 750; color: var(--accent2); text-shadow: 0 1px 3px #000; }
.mini-cap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.55); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .mini-cap:empty { display: none; }

/* compact instrument strip: speed, limit, gear/rpm, fuel, cargo, odometer */
.dash-wrap { position: fixed; left: 14px; bottom: 14px; transform: scale(var(--dash-k)); transform-origin: 0 100%; pointer-events: none !important; display: flex; flex-direction: column; gap: 8px; width: 292px; }
/* turn-by-turn navigator above the instrument strip */
.nav-guide { display: none; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(28, 28, 30, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); color: #fff; }
.nav-guide.on { display: flex; }
.nav-guide.pop { animation: guidePop .35s var(--ease); }
@keyframes guidePop { from { transform: translateY(8px) scale(.97); opacity: .4; } }
.ng-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #59e0a3; color: #0b1f16; }
.ng-ic svg { width: 34px; height: 34px; }
.ng-ic.arrive { background: #ffc14d; color: #2a1d00; }
.ng-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ng-top { display: flex; align-items: baseline; gap: 8px; }
.ng-top b { font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ng-top em { font-style: normal; font-size: 12px; font-weight: 600; color: #ffc14d; }
.ng-t > span { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ng-t > small { font-size: 11px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash { pointer-events: auto; width: 292px; padding: 12px 14px 10px; border-radius: 20px; background: rgba(28, 28, 30, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); animation: dashIn .8s var(--ease) both; }
@keyframes dashIn { from { opacity: 0; transform: translateY(14px); } }
.d-top { display: flex; align-items: center; gap: 10px; }
.d-speed { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
.d-speed b { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.2ch; transition: color .2s; }
.d-speed small { color: #8e8e93; font-size: 12px; font-weight: 600; }
.d-speed.over b { color: #ff453a; }
.d-gear { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.d-gear b { font-size: 26px; font-weight: 700; color: #fff; min-width: 1ch; text-align: right; } .d-gear b.n { color: var(--accent); } .d-gear b.r { color: #ff453a; }
.d-gear b.pop { animation: gearPop .3s var(--ease); }
@keyframes gearPop { 0% { transform: scale(1.3); opacity: .4; } 100% { transform: none; opacity: 1; } }
.d-gear small { color: #8e8e93; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-gear.red small, .d-gear.red b { color: #ff453a; }
.limit { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3.5px solid #e0303c; color: #000; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: -.4px; transition: opacity .3s, transform .3s var(--ease), border-color .3s; }
.limit b { font-weight: 800; } .limit.none { opacity: .25; transform: scale(.85); border-color: #636366; }
.limit.over { animation: over .6s infinite alternate; }
@keyframes over { to { box-shadow: 0 0 0 4px rgba(255,69,58,.4); transform: scale(1.08); } }
.rbar { position: relative; height: 6px; margin: 10px 0 12px; border-radius: 3px; background: #2c2c2e; overflow: hidden; }
.rbar i { position: absolute; inset: 0; background: #f2f2f7; transform-origin: 0 50%; transform: scaleX(0); border-radius: 3px; will-change: transform; }
.rbar u { position: absolute; top: 0; bottom: 0; left: 81.25%; right: 0; background: rgba(255,69,58,.45); }
.rbar.red i { background: #ff453a; }
.d-start { display: none; margin: -2px 0 10px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 214, 10, .12); color: var(--accent); font-size: 12px; font-weight: 650; text-align: center; }
.d-start.on { display: block; animation: blink 1.4s infinite; } .d-start.crank { animation: none; }
.d-lamps { display: flex; justify-content: space-between; margin: -2px 6px 10px; }
.d-lamps span { display: grid; place-items: center; width: 28px; height: 22px; color: #3a3a3c; transition: color .08s, filter .08s; }
.d-lamps .ic { width: 20px; height: 20px; }
.d-lamps span.on { color: #30d158; filter: drop-shadow(0 0 5px rgba(48, 209, 88, .7)); }
.d-lamps #l-low.on { color: #30d158; } .d-lamps #l-high.on { color: #0a84ff; filter: drop-shadow(0 0 5px rgba(10, 132, 255, .8)); }
.d-lamps #l-turnL.on, .d-lamps #l-turnR.on { color: #30d158; }
.d-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; row-gap: 5px; font-size: 13px; min-width: 0; }
.chip .ic { width: 15px; height: 15px; color: #8e8e93; }
.chip .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; } .chip .v b { font-weight: 650; font-size: 14px; } .chip .v em { font-style: normal; color: #8e8e93; font-size: 11.5px; margin-left: 2px; }
.chip .track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #2c2c2e; overflow: hidden; }
.track i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .25s linear; }
.chip.cargo .track i { background: #d1d1d6; } .chip.fuel .ic { color: var(--accent); }
.chip.low .track i { background: #ff453a; } .chip.low .ic, .chip.low .v b { color: #ff453a; } .chip.low .ic { animation: blink 1s infinite; }
.chip.full .track i { background: #ff9f0a; } .chip.full .v b { color: #ff9f0a; }
.d-odo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #8e8e93; font-weight: 600; }
.d-odo b { color: #d1d1d6; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12.5px; } .odo-r { color: var(--accent); }

/* map button on the minimap */
.mini-key { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border: 0; border-radius: 999px; background: rgba(0,0,0,.55); color: #f5f5f0; font-size: 10.5px; font-weight: 650; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.mini-key:hover { background: rgba(255, 214, 10, .6); transform: translateX(-50%) scale(1.06); } .mini-key kbd { min-width: 18px; padding: 2px 5px; font-size: 10px; }

/* full map */
.map-ov { padding: 3vh 3vw; }
.map-card { width: min(1180px, 100%); height: min(760px, 100%); display: grid; grid-template-columns: 1fr 290px; overflow: hidden; border-radius: 26px; opacity: 0; transform: scale(.94) translateY(16px); transition: all .5s var(--ease); }
.overlay.in .map-card { opacity: 1; transform: none; }
.map-main { position: relative; min-width: 0; min-height: 0; background: #0d0d0d; }
.map-main canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; } .map-main canvas.grab { cursor: grabbing; }
.map-title { position: absolute; left: 14px; top: 14px; padding: 8px 14px; border-radius: 14px; background: rgba(10,10,10,.72); backdrop-filter: blur(10px); pointer-events: none; display: flex; flex-direction: column; gap: 2px; } .map-title b { font-size: 14px; } .map-title small { color: var(--muted); font-size: 11px; }
.map-zoom { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,10,10,.75); color: #fff; font-size: 20px; font-weight: 600; display: grid; place-items: center; backdrop-filter: blur(10px); cursor: pointer; transition: background .2s, transform .2s var(--ease); } .map-zoom button:hover { background: rgba(255, 214, 10, .5); transform: scale(1.08); } .map-zoom .ic { width: 18px; height: 18px; }
.map-side { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-left: 1px solid var(--line); overflow-y: auto; background: rgba(10,10,10,.35); }
.map-head { display: flex; align-items: center; justify-content: space-between; } .map-head b { font-size: 16px; }
.map-sec h4 { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legend li { display: flex; align-items: center; gap: 11px; opacity: 0; transform: translateX(14px); animation: legIn .5s var(--ease) forwards; }
.legend li:nth-child(1) { animation-delay: .15s; } .legend li:nth-child(2) { animation-delay: .2s; } .legend li:nth-child(3) { animation-delay: .25s; } .legend li:nth-child(4) { animation-delay: .3s; } .legend li:nth-child(5) { animation-delay: .35s; } .legend li:nth-child(6) { animation-delay: .4s; } .legend li:nth-child(7) { animation-delay: .45s; } .legend li:nth-child(8) { animation-delay: .5s; } .legend li:nth-child(9) { animation-delay: .55s; }
@keyframes legIn { to { opacity: 1; transform: none; } }
.legend b { display: block; font-size: 13px; } .legend span { color: var(--muted); font-size: 11.5px; line-height: 1.3; display: block; }
.legend .pin { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #fff); color: #10151f; font-style: normal; font-weight: 800; font-size: 13px; }
.legend .pin.me { background: #fff; border: 3px solid #ffd60a; } .legend .pin.me svg { width: 14px; height: 14px; fill: #ffd60a; }
.legend .pin.tgt { background: transparent; border: 3px solid #ffc14d; box-shadow: 0 0 0 3px rgba(255,193,77,.2); animation: pulse 1.6s infinite; } .legend .pin.ply { background: #7dffb2; width: 16px; height: 16px; margin: 6px; }
.legend .line { flex: none; width: 28px; height: 0; border-top: 4px dashed #ffd60a; margin: 12px 0; } .legend .dot.cam { flex: none; width: 28px; height: 14px; background: radial-gradient(circle at 30% 50%, #ff6b7d 4px, transparent 5px), radial-gradient(circle at 75% 50%, #ffd166 3px, transparent 4px); }
.map-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .map-btns .btn { padding: 0 8px; }
.map-foot { margin-top: auto; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 820px) { .map-card { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .map-side { max-height: 40%; border-left: 0; border-top: 1px solid var(--line); } }

.nav-arrow { position: fixed; left: 0; top: 0; width: 80px; height: 40px; display: none; align-items: center; justify-content: center; gap: 4px; pointer-events: none !important; color: #59e0a3; z-index: 5; }
.nav-arrow.on { display: flex; } .nav-arrow.pickup { color: #ffc14d; }
.nav-arrow svg { width: 34px; height: 34px; fill: currentColor; filter: drop-shadow(0 0 8px currentColor); flex: none; }
.nav-arrow span { position: absolute; bottom: -16px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px #000, 0 0 8px #000; color: #fff; white-space: nowrap; }

.zone-slot { position: fixed; right: 18px; top: 50%; transform: translateY(-30%); width: 330px; }
.zone-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(30px) scale(.97); filter: blur(6px); transition: all .5s var(--ease); }
.zone-card.in { opacity: 1; transform: none; filter: none; }
.zc-head { display: flex; align-items: center; gap: 12px; } .zc-head > div { flex: 1; min-width: 0; } .zc-head b { display: block; font-size: 15px; } .zc-head small { color: var(--muted); font-size: 12px; }
.zc-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; } .zone-card.gas .zc-ic { background: rgba(255,169,77,.18); color: #ffa94d; } .zone-card.gibdd .zc-ic { background: rgba(106,168,255,.18); color: #ffd60a; }
.x { width: 32px; height: 32px; border-radius: 10px; border: 0; background: rgba(255,255,255,.07); display: grid; place-items: center; color: var(--muted); flex: none; } .x:hover { background: rgba(255,255,255,.14); color: #fff; }
.gas-level { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.gl-bar { position: relative; flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; } .gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent2); border-radius: 5px; } .gl-bar u { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(89,224,163,.9) 0 6px, rgba(89,224,163,.6) 6px 12px); transition: width .15s; }
.gas-ctl { display: flex; gap: 8px; } .chip-btn { border: 1px solid var(--line); background: rgba(255,255,255,.07); border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; transition: all .2s; } .chip-btn:hover { background: rgba(255, 214, 10, .2); border-color: rgba(255, 214, 10, .5); }
.gas-amt { display: flex; flex-direction: column; gap: 10px; }
.ga-v { display: flex; align-items: baseline; gap: 5px; font-size: 14px; } .ga-v b { font-size: 26px; font-variant-numeric: tabular-nums; } .ga-v span { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--good); } .ga-v span.bad { color: var(--bad); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent2) var(--p, 0%), rgba(255,255,255,.12) var(--p, 0%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.5); cursor: grab; transition: transform .15s; } input[type=range]::-webkit-slider-thumb:active { transform: scale(1.2); }
.zc-foot { color: var(--muted); font-size: 12px; text-align: center; } .zc-foot b { color: var(--ink); }
.fine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.fine-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); } .fine-list li b { font-size: 13px; display: block; } .fine-list li small { color: var(--muted); font-size: 11px; }
.amt { font-weight: 750; color: var(--bad); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clean { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; text-align: center; color: var(--muted); font-size: 13px; } .clean .ic { width: 36px; height: 36px; color: var(--good); } .clean b { color: var(--ink); font-size: 15px; }

.fuel-alert { position: fixed; left: 50%; top: 90px; transform: translateX(-50%) translateY(-20px); opacity: 0; pointer-events: none !important; transition: all .5s var(--ease); }
.fuel-alert.on { opacity: 1; transform: translateX(-50%); pointer-events: auto !important; }
.fuel-alert .glass { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; max-width: 360px; border-color: rgba(255,107,125,.5); } .fuel-alert b { display: flex; align-items: center; gap: 8px; color: var(--bad); } .fuel-alert span { color: var(--muted); font-size: 13px; }

.keys-hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 8px 12px; border-radius: 12px; background: rgba(10,10,10,.5); backdrop-filter: blur(10px); transition: opacity 1.2s; pointer-events: none !important; } .keys-hint.fade { opacity: 0; } .keys-hint span { margin: 0 8px 0 3px; }

.tag { position: fixed; left: 0; top: 0; padding: 3px 10px; border-radius: 999px; background: rgba(10,10,10,.7); border: 1px solid rgba(125,255,178,.5); font-size: 12px; font-weight: 600; pointer-events: none; will-change: transform; z-index: 2; }
#tags { position: fixed; inset: 0; pointer-events: none !important; }
.flash-fx { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none !important; z-index: 40; }
.flash-fx.go { animation: flash .5s ease-out; } @keyframes flash { 0% { opacity: .8; } 100% { opacity: 0; } }

/* fine photo card */
.photo-slot { position: fixed; right: 18px; top: 74px; width: 360px; z-index: 45; }
.photo-card { background: rgba(28,28,30,.94); border: 1px solid rgba(255,107,125,.55); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,107,125,.15); backdrop-filter: blur(16px); opacity: 0; transform: translateX(40px) scale(.95); filter: blur(8px); transition: all .55s var(--ease); }
.photo-card.in { opacity: 1; transform: none; filter: none; }
.ph-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12px; letter-spacing: .12em; } .ph-head small { color: var(--muted); letter-spacing: .06em; flex: 1; text-align: right; font-size: 10px; } .ph-head .x { width: 26px; height: 26px; border-radius: 8px; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: blink .9s infinite; }
.ph-img { position: relative; height: 210px; background: #111; overflow: hidden; } .ph-img canvas { width: 100%; height: 100%; display: block; filter: contrast(1.08) saturate(.85); }
.ph-stamp { position: absolute; font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; padding: 6px 9px; letter-spacing: .03em; } .ph-stamp.tl { left: 0; top: 0; } .ph-stamp.tr { right: 0; top: 0; color: #ffd166; } .ph-stamp.bl { left: 0; bottom: 0; max-width: 100%; }
.scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); pointer-events: none; mix-blend-mode: multiply; }
.ph-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .ph-body > b { font-size: 14px; line-height: 1.3; } .ph-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--muted); } .ph-row .amt { font-size: 20px; } .ph-body small { color: var(--muted); font-size: 11px; }
.ph-timer { height: 3px; background: rgba(255,255,255,.1); } .ph-timer i { display: block; height: 100%; background: var(--bad); animation: timer linear forwards; transform-origin: left; } @keyframes timer { from { width: 100%; } to { width: 0; } }

/* toasts */
#toasts { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 80; pointer-events: none !important; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 550; max-width: min(520px, 92vw); opacity: 0; transform: translateY(-16px) scale(.96); filter: blur(4px); transition: all .45s var(--ease); }
.toast.in { opacity: 1; transform: none; filter: none; } .toast.out { opacity: 0; transform: translateY(-10px); }
.toast.good .ic { color: var(--good); } .toast.bad { border-color: rgba(255,107,125,.45); } .toast.bad .ic { color: var(--bad); } .toast.info .ic { color: var(--accent); }

/* delivered */
.deliv { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 70; }
.deliv-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 46px; border-radius: 28px; background: var(--glass); backdrop-filter: blur(20px); border: 1px solid rgba(89,224,163,.5); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(89,224,163,.25); transform: translateY(30px) scale(.8); opacity: 0; transition: all .7s var(--ease); }
.deliv.in .deliv-in { transform: none; opacity: 1; }
.check-big { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #04281a; margin-bottom: 6px; } .check-big .ic { width: 32px; height: 32px; stroke-width: 2.6; }
.deliv-in b { font-size: 22px; font-weight: 760; } .deliv-in > span { color: var(--muted); font-size: 13px; } .deliv .pay { font-size: 40px; font-weight: 800; color: var(--good); font-variant-numeric: tabular-nums; margin-top: 6px; } .pay em { font-style: normal; }
.conf { position: absolute; left: 50%; top: 40px; } .conf i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.deliv.in .conf i { animation: confetti var(--t) var(--ease) .15s forwards; } @keyframes confetti { 10% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(260deg); } }

/* overlays / menus */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); z-index: 60; transition: all .4s var(--ease); pointer-events: auto; padding: 16px; }
.overlay.in { background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px); }
.menu, .sheet { opacity: 0; transform: translateY(20px) scale(.96); transition: all .5s var(--ease); } .overlay.in .menu, .overlay.in .sheet { opacity: 1; transform: none; }
.menu { width: min(400px, 100%); padding: 16px; display: flex; flex-direction: column; gap: 6px; border-radius: 26px; }
.menu-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; } .menu-head .logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #ffd60a; transform: rotate(-90deg); } .menu-head b { font-size: 18px; display: block; } .menu-head small { color: var(--muted); font-size: 12px; }
.m-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 0; background: rgba(255,255,255,.04); font-size: 14.5px; font-weight: 600; text-align: left; transition: all .2s var(--ease); } .m-item span { flex: 1; } .m-item:hover { background: rgba(255, 214, 10, .16); transform: translateX(4px); } .m-item .ic { color: var(--accent); } .m-item.danger .ic { color: var(--bad); } .m-item.danger:hover { background: rgba(255,107,125,.16); }
.sheet { width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; }
.sh-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 17px; }
.sh-body { padding: 16px 20px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; } .sh-body p { margin: 0; font-size: 13px; line-height: 1.5; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: rgba(255,107,125,.1); border: 1px solid rgba(255,107,125,.3); } .sum-row b { font-size: 22px; color: var(--bad); }
.fine-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fine-hist li { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13px; } .fine-hist li.paid { opacity: .55; } .fine-hist small { display: block; color: var(--muted); font-size: 11px; } .fi-ic { color: var(--bad); display: grid; } .fine-hist .st { font-size: 11px; color: var(--warn); } .fine-hist li.paid .st { color: var(--good); }
.keys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .keys-grid div { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 8px 10px; background: rgba(255,255,255,.05); border-radius: 12px; } .keys-grid span { margin-left: 6px; color: var(--muted); }
.rules-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); } .rules-list b { color: var(--ink); }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin .7s linear infinite; margin: 20px auto; }

@media (max-width: 1100px) { .hud-tl { width: 290px; } .mini { width: 170px; height: 170px; } .keys-hint { display: none; } }
@media (max-width: 760px) { .hud-tl { width: 240px; } .contract { display: none; } .photo-slot { width: 300px; } .zone-slot { width: 290px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ===== Design refresh: yellow accent / black secondary =====
   Solid, high-contrast black surfaces; yellow reserved for primary actions,
   active states and the navigation route. */
:root {
  --on-accent: #0a0a0a;
  --surface: #121212;
  --surface-2: #1b1b1a;
  --line: rgba(255, 255, 255, 0.12);
  --r: 16px;
  --glass: rgba(28, 28, 30, 0.88);
}
.glass, .card, .zone-card, .toast, .menu, .sheet, .deliv-in { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glass { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,214,10,.06); }
.btn { min-height: 44px; border-color: rgba(255,255,255,.14); background: var(--surface-2); }
.btn:hover { background: #262624; border-color: rgba(255,214,10,.5); }
.btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 750; border: 0; letter-spacing: .01em; }
.btn.primary:hover { background: #ffe14d; }
.btn.busy::after { border-color: rgba(10,10,10,.3); border-top-color: #0a0a0a; }
.btn.primary .ic { color: var(--on-accent); }
.link { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,214,10,.2); }
.tab-ind { background: rgba(255,214,10,.14); border-color: rgba(255,214,10,.55); }
.brand .logo, .menu-head .logo, .avatar { color: var(--on-accent); }
.brand .logo { box-shadow: 0 8px 28px rgba(255,214,10,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.avatar { background: var(--accent); }
.v-card:hover { border-color: rgba(255,214,10,.6); }
.sb i, .load-bar i { background: var(--accent); }
kbd { background: #1f1f1d; color: var(--ink); border-color: rgba(255,255,255,.2); }
.m-item { background: var(--surface-2); min-height: 48px; }
.m-item:hover { background: rgba(255,214,10,.14); }
.chip-btn:hover { background: rgba(255,214,10,.16); border-color: rgba(255,214,10,.5); }
.money { color: var(--accent); }
.st.on i { background: var(--accent); }
input[type=range]::-webkit-slider-thumb { background: var(--accent); }
.mini-key:hover, .map-zoom button:hover { background: var(--accent); color: var(--on-accent); }
.mini-key:hover kbd { color: var(--ink); }
.toast.info .ic { color: var(--accent); }
.nav-arrow { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.mini { border-color: rgba(255,214,10,.8); box-shadow: 0 10px 30px rgba(0,0,0,.6); }

/* ===== Apple-like language: flat, quiet, legible =====
   Inter is an open (SIL OFL) typeface closely related to SF; on Apple devices the
   system font is used automatically through -apple-system. No gradients. */
:root {
  --bg: #000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #fff;
  --muted: #8e8e93;
  --line: rgba(255, 255, 255, 0.1);
  --glass: rgba(28, 28, 30, 0.82);
  --r: 14px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'calt';
  letter-spacing: -0.005em;
}
.glass, .card, .menu, .sheet, .toast, .zone-card, .deliv-in, .v-card { box-shadow: var(--shadow); border: 1px solid var(--line); }
.glass, .menu, .sheet, .card, .zone-card, .toast { backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
.card, .menu, .sheet, .v-card, .deliv-in, .photo-card { border-radius: 20px; }
.brand b, .card h2, .vs-head h1, .v-body h3 { letter-spacing: -0.022em; font-weight: 700; }
.brand span { letter-spacing: .2em; color: var(--muted); font-weight: 600; }
.brand .logo, .menu-head .logo { box-shadow: none; border-radius: 12px; }
/* segmented control */
.tabs { background: var(--surface-2); border-radius: 10px; padding: 2px; }
.tab-ind { background: var(--surface-3); border: 0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tabs button.on { color: var(--ink); }
/* inputs */
.field input { background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; }
.field input:focus { background: var(--surface-2); border-color: var(--accent); box-shadow: none; }
/* buttons */
.btn { background: var(--surface-2); border: 0; border-radius: 12px; box-shadow: none; font-weight: 600; }
.btn:hover { background: var(--surface-3); transform: none; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: #000; box-shadow: none; font-weight: 650; }
.btn.primary:hover { background: #ffe14d; box-shadow: none; }
.btn.ghost.done { background: rgba(48,209,88,.16); color: #30d158; }
.link { color: var(--accent); }
.m-item, .fine-list li, .fine-hist li, .keys-grid div { background: var(--surface-2); border-radius: 12px; }
.m-item:hover { background: var(--surface-3); transform: none; }
.chip-btn { background: var(--surface-2); border: 0; border-radius: 999px; }
.chip-btn:hover { background: var(--surface-3); border: 0; }
.x { background: var(--surface-2); border-radius: 50%; }
kbd { background: var(--surface-2); border: 0; border-bottom: 1px solid var(--surface-3); color: var(--ink); }
.v-card:hover { border-color: rgba(255,255,255,.22); box-shadow: var(--shadow); }
.v-stage { background: var(--surface); }
.v-tag { background: var(--surface-2); border: 0; }
.ct-ic { background: rgba(255,214,10,.16); color: var(--accent); }
.mini { border: 1px solid var(--line); box-shadow: var(--shadow); }
.mini-n { color: var(--accent); }
.fines-chip, .profile { border: 1px solid var(--line); }
.toast { border-radius: 14px; }
.deliv-in { border-color: var(--line); box-shadow: var(--shadow); }
.check-big { background: #30d158; }
.overlay.in { background: rgba(0,0,0,.5); backdrop-filter: blur(14px); }
.screen { background: #000; }
.hud-tl .glass, .street, .clock { border-radius: 14px; }
.street { border-radius: 999px; }

/* ===== UI refresh: HUD contract card, fines chip, fines sheet, centred payment dialog ===== */
:root { --bad-soft: rgba(255,107,125,.12); --bad-line: rgba(255,107,125,.38); --good-soft: rgba(89,224,163,.12); }

/* --- fines chip (HUD) --- */
.fines-chip { width: 100%; min-height: 56px; padding: 8px 12px 8px 8px; gap: 12px; border-radius: 16px; cursor: pointer; }
.fines-chip:hover { transform: none; background: var(--surface-2); }
.fines-chip .fc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--muted); flex: none; }
.fines-chip .fc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fines-chip .fc-t b { font-size: 14px; font-weight: 700; } .fines-chip .fc-t em { font-size: 14px; } .fines-chip .fc-t i { color: var(--ink); font-weight: 650; }
.fines-chip .fc-t small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fines-chip .fc-go { color: var(--muted); display: grid; transition: transform .2s var(--ease); } .fines-chip:hover .fc-go { transform: translateX(3px); color: var(--ink); }
.fines-chip.has { border-color: var(--bad-line); background: linear-gradient(0deg, var(--bad-soft), var(--bad-soft)), var(--glass); }
.fines-chip.has .fc-ic { background: var(--bad-soft); color: var(--bad); animation: none; } .fines-chip.has .fc-ic .ic { animation: pulse 2s infinite; }
.fines-chip.has .fc-t small { color: #ffb3bd; font-weight: 600; }

/* --- contract card (HUD) --- */
.contract { padding: 14px; gap: 12px; border-radius: 18px; }
.ct-head { gap: 12px; } .ct-ic { width: 40px; height: 40px; border-radius: 12px; }
.ct-head small { font-size: 11.5px; letter-spacing: .01em; } .ct-head b { font-size: 15px; font-weight: 700; }
.ct-pay small { font-size: 11px; } .ct-pay b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ct-load { gap: 6px; flex-wrap: wrap; }
.ct-load span { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 12px; color: var(--muted); } .ct-load b { font-weight: 700; }
.ct-route { gap: 10px; padding: 10px 12px 10px 30px; border-radius: 12px; background: rgba(255,255,255,.04); }
.ct-route::before { left: 15px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--accent), var(--good)); opacity: .5; }
.ct-route .pt { display: block; } .ct-route .pt i { left: -20px; top: 5px; width: 10px; height: 10px; }
.ct-route .pt small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.ct-route .pt span { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ct-steps { gap: 6px; } .st { font-size: 10.5px; gap: 5px; }
.ct-foot { padding-top: 10px; border-top: 1px solid var(--line); }
.ct-dist { font-size: 13px; color: var(--muted); } .ct-dist em { color: var(--ink); font-size: 14px; }
.ct-reroll { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 6px 8px 6px 12px; background: rgba(255,214,10,.12); color: var(--accent); font-size: 12px; font-weight: 650; cursor: pointer; transition: background .2s; }
.ct-reroll:hover { background: rgba(255,214,10,.22); } .ct-reroll kbd { margin: 0; font-size: 10px; padding: 2px 6px; min-width: 0; }

/* --- shared bits --- */
.clean.big { padding: 26px 12px 18px; gap: 8px; } .clean.big .ic { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--good-soft); } .clean.big b { font-size: 17px; }
.btn.big { height: 54px; width: 100%; font-size: 15.5px; border-radius: 14px; }
.btn.primary:disabled { background: var(--surface-3); color: var(--muted); opacity: 1; }
.btn.primary:disabled .ic { color: var(--muted); }

/* --- fines sheet --- */
.fines-sheet { width: min(640px, 100%); height: min(780px, 92vh); max-height: 92vh; }
.sh-head { gap: 12px; padding: 16px 18px; justify-content: flex-start; }
.sh-head .sh-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); flex: none; }
.sh-t { flex: 1; min-width: 0; } .sh-t b { display: block; font-size: 18px; font-weight: 700; } .sh-t small { color: var(--muted); font-size: 12.5px; }
.sh-body { flex: 1; min-height: 0; padding: 14px 18px 16px; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.fs-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--muted); }
.fs-note .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); } .fs-note p { font-size: 12.5px !important; line-height: 1.5 !important; } .fs-note b { color: var(--ink); font-weight: 600; }
.sum-row { align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; flex: none; }
.sum-row small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; letter-spacing: .02em; }
.sum-row b { font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sum-row .sr-r { text-align: right; } .sum-row .sr-r b { font-size: 17px; color: var(--ink); font-weight: 650; }
.sum-row.ok { background: var(--good-soft); border-color: rgba(89,224,163,.35); } .sum-row.ok > div:first-child b { color: var(--good); }
.fh-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); position: sticky; top: -14px; z-index: 2; flex: none; }
.fh-tabs button { flex: 1; min-height: 36px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; }
.fh-tabs button:hover { color: var(--ink); } .fh-tabs button.on { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.fine-hist { gap: 6px; flex: none; }
.fine-hist li { grid-template-columns: auto 1fr auto auto; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; transition: background .2s; } .fine-hist li:hover { background: var(--surface-3); }
.fine-hist li.paid { opacity: .6; }
.fine-hist[data-f=open] li.paid, .fine-hist[data-f=paid] li:not(.paid) { display: none; }
.fine-hist .fi-ic { width: 34px; height: 34px; border-radius: 10px; place-items: center; background: var(--bad-soft); } .fine-hist li.paid .fi-ic { background: var(--good-soft); color: var(--good); }
.fine-hist .fi-ic .ic { width: 18px; height: 18px; }
.fine-hist .fh-t { min-width: 0; } .fine-hist .fh-t b { font-size: 14px; font-weight: 650; display: block; } .fine-hist .fh-t small { margin-top: 1px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fine-hist .fh-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fine-hist .amt { font-size: 14.5px; } .fine-hist li.paid .amt { color: var(--muted); text-decoration: line-through; }
.fine-hist .st { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 650; background: rgba(255,209,102,.14); } .fine-hist li.paid .st { background: var(--good-soft); }
.fine-hist .ph { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.fine-hist .ph .ic { width: 15px; height: 15px; } .fine-hist .ph:hover { background: var(--accent); color: #000; }
.sh-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); background: rgba(28,28,30,.6); } .sh-foot .btn { width: 100%; height: 50px; }
@media (max-width: 520px) { .fine-hist .ph span { display: none; } .fine-hist .ph { padding: 0; width: 38px; justify-content: center; } .fh-tabs button { font-size: 11.5px; padding: 0 4px; } }

/* --- centred payment dialog (GIBDD) --- */
.zone-overlay { z-index: 70; }
.zone-card.center { width: min(480px, 100%); max-height: min(720px, 92vh); padding: 18px; gap: 14px; border-radius: 24px; opacity: 0; transform: translateY(18px) scale(.96); filter: none; }
.zone-card.center.in { opacity: 1; transform: none; }
.zone-card.center .zc-head { gap: 12px; } .zone-card.center .zc-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,214,10,.14); color: var(--accent); }
.zone-card.center .zc-head b { font-size: 17px; font-weight: 700; } .zone-card.center .zc-head small { font-size: 12.5px; }
.zone-card.center .x { width: 36px; height: 36px; }
.pay-sum { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.pay-sum > div { padding: 12px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-sum small { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; } .pay-sum b { font-size: 24px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-sum span { font-size: 12px; color: var(--muted); }
.ps-main { background: var(--bad-soft); border: 1px solid var(--bad-line); } .ps-main b { color: var(--bad); }
.ps-bal { background: var(--surface-2); border: 1px solid var(--line); } .ps-bal b { font-size: 19px; color: var(--ink); margin-top: 3px; }
.ps-bal.ok b { color: var(--good); } .ps-bal.low { border-color: rgba(255,209,102,.4); } .ps-bal.low span { color: var(--warn); font-weight: 600; }
.pay-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 120px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.pay-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 11px; align-items: center; padding: 9px 9px 9px 11px; border-radius: 14px; background: var(--surface-2); }
.pay-list .pl-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); } .pay-list .pl-ic .ic { width: 17px; height: 17px; }
.pay-list .pl-t { min-width: 0; } .pay-list .pl-t b { font-size: 13.5px; font-weight: 650; display: block; } .pay-list .pl-t small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-list .amt { font-size: 14px; }
.pay-btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,214,10,.14); color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, transform .15s; position: relative; }
.pay-btn:hover:not(:disabled) { background: var(--accent); color: #000; } .pay-btn:active:not(:disabled) { transform: scale(.96); }
.pay-btn:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; opacity: .7; }
.pay-btn.busy { pointer-events: none; color: transparent; } .pay-btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.zone-card.center .zc-foot { font-size: 12px; line-height: 1.4; }
@media (max-width: 520px) { .pay-sum { grid-template-columns: 1fr; } .pay-list li { grid-template-columns: auto 1fr auto; } .pay-list .pay-btn { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .zone-card.center { transition: none; } .fines-chip.has .fc-ic .ic { animation: none; } }

/* photo button in payment dialog; dialog hides while a photo is shown */
.pay-list li { grid-template-columns: auto 1fr auto auto auto; }
.pl-photo { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.pl-photo .ic { width: 18px; height: 18px; } .pl-photo:hover { background: var(--accent); color: #000; }
.zone-overlay.peek { opacity: 0; pointer-events: none; }
.photo-slot { z-index: 80; }
@media (max-width: 520px) { .pay-list li { grid-template-columns: auto 1fr auto auto; } .pay-list .pay-btn { grid-column: 1 / -1; } }

/* ---------------- licence plates (RU) ---------------- */
.plate { --s: 1; font-size: calc(var(--s) * 10px); display: inline-flex; align-items: stretch; height: 4.7em; width: 21.6em; box-sizing: border-box; background: linear-gradient(180deg, #fff, #eceff3); color: #111; border: .22em solid #111; border-radius: .7em; box-shadow: 0 .2em .6em rgba(0,0,0,.45), inset 0 0 0 .12em #fff; font-family: 'Inter Variable', Inter, 'Arial Narrow', sans-serif; user-select: none; flex: none; overflow: hidden; }
.plate .pl-main { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .18em; padding: 0 .3em; font-weight: 800; font-size: 2.85em; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.plate .pl-n { font-size: 1.1em; }
.plate .pl-reg { flex: none; box-sizing: border-box; width: 6.2em; overflow: hidden; border-left: .2em solid #111; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.plate .pl-reg b { font-size: 2.2em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plate .pl-reg span { display: flex; align-items: center; gap: .25em; font-size: .85em; font-weight: 800; margin-top: .15em; }
.plate .flag { display: inline-block; width: 1.3em; height: 1em; border: 1px solid #111; background: linear-gradient(180deg, #fff 33%, #1c4fb5 33% 66%, #d52b1e 66%); }
.plate.ghost { opacity: .55; filter: grayscale(.4); }
.plate.ghost .pl-main { color: #8a8f98; }

.v-card .plate-row { display: flex; align-items: center; }
.stats .no-plate { color: var(--muted); font-size: 12.5px; }

.d-plate { display: flex; }
.d-plate:empty { display: none; }
.d-plate .plate { --s: .72; }

.ct-plate { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ct-plate b { font-size: 14px; } .ct-plate span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ct-plate .btn { height: 40px; font-size: 13.5px; width: 100%; }

/* GAI plate block */
.plate-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.plate-box .pb-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .plate-box .pb-t b { font-size: 14px; } .plate-box .pb-t small { color: var(--muted); font-size: 12px; }
.plate-box .pb-plate { display: flex; justify-content: center; padding: 6px 0; }
.plate-box .pb-plate .plate { --s: 1.2; max-width: 100%; }
.plate-form { display: flex; gap: 10px; align-items: stretch; }
.plate-form .reg-in { position: relative; flex: 0 0 120px; }
.plate-form .reg-in input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10,10,10,.55); color: var(--ink); font-size: 22px; font-weight: 800; text-align: center; letter-spacing: .12em; outline: none; transition: border-color .2s, box-shadow .2s; }
.plate-form .reg-in input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,214,10,.2); }
.plate-form .reg-in input.bad { border-color: var(--bad); }
.plate-form .btn { flex: 1; height: 52px; }
.plate-box .pb-hint { color: var(--muted); font-size: 12px; line-height: 1.4; min-height: 1.4em; } .plate-box .pb-hint.bad { color: var(--bad); }

/* reel overlay */
.plate-overlay { z-index: 90; }
.pr-card { width: min(440px, 100%); padding: 22px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 26px; opacity: 0; transform: translateY(18px) scale(.96); transition: all .5s var(--ease); text-align: center; }
.plate-overlay.in .pr-card { opacity: 1; transform: none; }
.pr-kicker { font-size: 11px; letter-spacing: .22em; color: var(--accent); font-weight: 700; }
.pr-title { font-size: 20px; font-weight: 750; }
.pr-win { position: relative; width: 100%; height: var(--win); overflow: hidden; border-radius: 16px; background: rgba(0,0,0,.42); border: 1px solid var(--line); box-shadow: inset 0 0 24px rgba(0,0,0,.6); }
.pr-reel { will-change: transform; }
.pr-item { height: var(--pitch); display: grid; place-items: center; opacity: .45; transform: scale(.9); transition: opacity .12s, transform .12s; }
.pr-item.hot { opacity: 1; transform: scale(1); }
.pr-mark { position: absolute; left: 0; right: 0; top: var(--pitch); height: var(--pitch); pointer-events: none; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); box-shadow: 0 0 18px rgba(255,214,10,.25); }
.pr-mark i { position: absolute; top: 50%; width: 0; height: 0; transform: translateY(-50%); border: 9px solid transparent; }
.pr-mark i.l { left: 0; border-left-color: var(--accent); border-right: 0; } .pr-mark i.r { right: 0; border-right-color: var(--accent); border-left: 0; }
.pr-fade { position: absolute; left: 0; right: 0; height: 30%; pointer-events: none; } .pr-fade.t { top: 0; background: linear-gradient(180deg, rgba(14,14,16,.92), transparent); } .pr-fade.b { bottom: 0; background: linear-gradient(0deg, rgba(14,14,16,.92), transparent); }
.pr-item.win .plate { animation: plateWin .9s var(--ease) both; }
.plate-overlay.won .pr-mark { border-color: var(--good); box-shadow: 0 0 28px rgba(89,224,163,.45); } .plate-overlay.won .pr-mark i.l { border-left-color: var(--good); } .plate-overlay.won .pr-mark i.r { border-right-color: var(--good); }
.plate-overlay.won .pr-kicker { color: var(--good); }
.pr-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
@keyframes plateWin { 0% { transform: scale(1); } 45% { transform: scale(1.14); box-shadow: 0 0 0 .3em rgba(89,224,163,.7), 0 0 3em rgba(89,224,163,.6); } 100% { transform: scale(1.06); box-shadow: 0 0 0 .2em rgba(89,224,163,.55), 0 0 2em rgba(89,224,163,.35); } }
@media (max-width: 480px) { .pr-win .plate { --s: 1.05 !important; } .pr-card { padding: 18px 12px 14px; } }

/* dash header: vehicle name + plate */
.d-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.d-name { min-width: 0; } .d-name b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d-name small { color: #8e8e93; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.d-plate { margin: 0; justify-content: flex-end; } .d-plate .no-plate { font-size: 11px; color: #ff9f0a; font-weight: 650; }
.ph-plate { position: absolute; right: 12px; bottom: 30px; } .ph-plate.none { font: 700 11px ui-monospace, Consolas, monospace; color: #ff9f0a; text-shadow: 0 1px 2px #000; }
.ph-pl { display: block; margin-top: 2px; }

/* G action prompt */
.g-prompt { position: fixed; left: 50%; bottom: 74px; transform: translate(-50%, 14px); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 16px; background: rgba(28,28,30,.9); border: 1px solid rgba(255,214,10,.45); box-shadow: 0 8px 28px rgba(0,0,0,.5); font-weight: 650; font-size: 15px; opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 40; }
.g-prompt.on { opacity: 1; transform: translate(-50%, 0); }
.g-prompt kbd { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #000; font-weight: 800; font-size: 16px; font-family: inherit; box-shadow: 0 2px 0 rgba(0,0,0,.4); animation: blink 1.6s infinite; }

/* --- АЗС: центральный диалог заправки --- */
.zone-card.gas.center { width: min(440px, 100%); gap: 16px; padding: 20px; }
.zone-card.gas .zc-ic { background: rgba(255,169,77,.16); color: #ffa94d; }
.gas-tank { display: flex; flex-direction: column; gap: 8px; }
.gt-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.gt-n b { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .gt-n { font-size: 13px; }
.zone-card.gas .gl-bar { height: 16px; border-radius: 8px; } .zone-card.gas .gl-bar i { border-radius: 8px; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .12s linear; }
.zone-card.gas .gl-bar u { transition: width .15s, left .12s linear; background: repeating-linear-gradient(45deg, rgba(89,224,163,.85) 0 6px, rgba(89,224,163,.45) 6px 12px); background-size: 17px 17px; }
.zone-card.gas.pumping .gl-bar u { animation: gasflow .7s linear infinite; }
@keyframes gasflow { to { background-position: 17px 0; } }
.zone-card.gas .gas-ctl .chip-btn { flex: 1; padding: 10px 12px; font-size: 13.5px; }
.zone-card.gas .gas-ctl .chip-btn:disabled, .zone-card.gas input[type=range]:disabled { opacity: .45; pointer-events: none; }
.gas-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.gas-sum small { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.gs-l { font-size: 16px; color: var(--muted); } .gs-l b { font-size: 40px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gs-c { text-align: right; } .gs-c b { font-size: 28px; font-weight: 750; color: var(--good); font-variant-numeric: tabular-nums; white-space: nowrap; } .gs-c b.bad { color: var(--bad); }
.gas-pump { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; display: none; } .gas-pump i { display: block; height: 100%; width: 0; background: var(--good); }
.zone-card.gas.pumping .gas-pump { display: block; }
.gas-go { width: 100%; min-height: 54px; font-size: 16px; }
.gas-go.busy { pointer-events: none; }
.zone-card.gas.pumping .gas-go { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.zone-card.gas.pumping .gas-go .ic { animation: gaspulse 1s ease-in-out infinite; }
@keyframes gaspulse { 50% { transform: scale(1.25); opacity: .6; } }

/* --- предложение маршрута до АЗС при малом топливе --- */
.fuel-low { position: fixed; left: 50%; top: 90px; transform: translateX(-50%) translateY(-20px); opacity: 0; pointer-events: none !important; transition: all .5s var(--ease); z-index: 20; width: min(440px, calc(100vw - 24px)); }
.fuel-low.on { opacity: 1; transform: translateX(-50%); pointer-events: auto !important; }
.fuel-low .glass { padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; border-color: rgba(255,169,77,.5); }
.fl-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,169,77,.18); color: #ffa94d; }
.fl-t b { display: block; font-size: 15px; } .fl-t small { color: var(--muted); font-size: 12.5px; }
.fl-b { grid-column: 1 / -1; display: flex; gap: 8px; } .fl-b .btn:first-child { flex: 1; }
@media (prefers-reduced-motion: reduce) { .zone-card.gas.pumping .gl-bar u, .zone-card.gas.pumping .gas-go .ic { animation: none; } }

/* ===== dashboard: warning lamps + vitals ===== */
.d-vitals { display: flex; justify-content: space-between; margin: -2px 4px 8px; font-size: 10.5px; font-weight: 650; color: #8e8e93; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.d-vitals .hot, .d-vitals .bad { color: #ff453a; } .d-vitals .cold { color: #64b5ff; }
.d-warn { display: flex; justify-content: space-between; margin: 0 2px 10px; }
.d-warn span { display: grid; place-items: center; width: 26px; height: 22px; color: #2e2e31; transition: color .1s, filter .1s; }
.d-warn .ic { width: 19px; height: 19px; }
.d-warn .red.on { color: #ff453a; filter: drop-shadow(0 0 5px rgba(255, 69, 58, .75)); }
.d-warn .amb.on { color: #ffb020; filter: drop-shadow(0 0 5px rgba(255, 176, 32, .7)); }
.d-warn span.flash { animation: lampBlink .46s steps(1) infinite; }
@keyframes lampBlink { 50% { opacity: .12; } }

/* ===== service station ===== */
.zone-card.service.center .zc-ic { background: rgba(90, 214, 232, .16); color: #5ad6e8; }
.zone-card.service.wide { width: min(1080px, 100%); height: min(780px, 93vh); max-height: none; }
.sv-body { position: relative; display: grid; grid-template-columns: 290px 1fr; gap: 18px; flex: 1; min-height: 0; }
.sv-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.sv-ring { position: relative; width: 112px; height: 112px; margin: 2px auto 0; }
.sv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sv-ring .bg { stroke: rgba(255,255,255,.1); } .sv-ring .fg { transition: stroke-dashoffset .8s var(--ease), stroke .3s; }
.sv-ring.good .fg { stroke: var(--good); } .sv-ring.warn .fg { stroke: var(--warn); } .sv-ring.bad .fg { stroke: var(--bad); }
.sv-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.sv-ring b { font-size: 30px; font-weight: 750; } .sv-ring small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sv-sum { text-align: center; display: flex; flex-direction: column; gap: 3px; } .sv-sum b { font-size: 15px; } .sv-sum small { color: var(--muted); font-size: 12px; }
.sv-todo { list-style: none; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.sv-todo li { display: flex; align-items: center; gap: 8px; } .sv-todo i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--good); }
.sv-todo li.warn i { background: var(--warn); } .sv-todo li.bad i { background: #ff9f0a; } .sv-todo li.crit i { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.sv-full { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(90, 214, 232, .08); border: 1px solid rgba(90, 214, 232, .28); }
.sv-full-t { display: flex; justify-content: space-between; align-items: baseline; } .sv-full-t b { font-size: 15px; } .sv-full-t span { font-weight: 700; color: #5ad6e8; font-variant-numeric: tabular-nums; }
.sv-full small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.sv-full .btn { height: 44px; font-size: 14px; }
.sv-list { overflow-y: auto; min-height: 0; padding-right: 6px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.sv-grp h4 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sv-row { display: grid; grid-template-columns: 1fr 46px auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 13px; background: rgba(255,255,255,.04); margin-bottom: 5px; border: 1px solid transparent; transition: background .2s; }
.sv-row:hover { background: rgba(255,255,255,.07); }
.sv-row.crit { border-color: rgba(255, 107, 125, .45); background: rgba(255, 107, 125, .07); } .sv-row.bad { border-color: rgba(255, 159, 10, .35); }
.sv-nm { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sv-nm b { font-size: 13.5px; } .sv-nm em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.sv-hint { font-size: 11.5px; color: var(--muted); margin: 1px 0 6px; line-height: 1.3; }
.sv-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .sv-track i { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width .6s var(--ease); }
.sv-row.warn .sv-track i { background: var(--warn); } .sv-row.bad .sv-track i { background: #ff9f0a; } .sv-row.crit .sv-track i { background: var(--bad); }
.sv-val { text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.sv-row.crit .sv-val { color: var(--bad); } .sv-row.bad .sv-val { color: #ff9f0a; } .sv-row.warn .sv-val { color: var(--warn); }
.sv-btn { min-width: 118px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; white-space: nowrap; }
.sv-btn b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-btn:hover:not(:disabled) { background: rgba(90, 214, 232, .2); border-color: rgba(90, 214, 232, .6); }
.sv-btn.crit:not(:disabled), .sv-btn.bad:not(:disabled) { border-color: rgba(255, 159, 10, .5); }
.sv-btn:disabled { opacity: .4; cursor: default; }
.sv-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 10, 12, .72); backdrop-filter: blur(6px); border-radius: 16px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 3; }
.sv-busy.on { opacity: 1; pointer-events: auto; }
.sv-busy-in { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(340px, 80%); text-align: center; }
.sv-wrench { width: 54px; height: 54px; color: #5ad6e8; display: grid; place-items: center; animation: svWrench 1s ease-in-out infinite; } .sv-wrench .ic { width: 54px; height: 54px; }
@keyframes svWrench { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
.sv-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .sv-bar i { display: block; height: 100%; width: 0; background: #5ad6e8; }
@media (max-width: 820px) { .sv-body { grid-template-columns: 1fr; overflow-y: auto; } .sv-side { overflow: visible; } .sv-list { overflow: visible; } .sv-row { grid-template-columns: 1fr auto; } .sv-val { display: none; } }

/* ---------------------------------------------------------------- car shop (headlights) */
.zone-card.autoshop.center .zc-ic { background: rgba(197, 140, 255, .18); color: #c58cff; }
.zone-card.autoshop.wide { width: min(1120px, 100%); max-height: min(860px, 94vh); overflow: auto; }
.ah-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ah-now { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.ah-now small { color: var(--muted); font-size: 12px; } .ah-now b { font-size: 15px; } .ah-now span { font-size: 12px; color: var(--muted); }
.ah-seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.ah-seg button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all .2s; }
.ah-seg button.on { background: rgba(197, 140, 255, .22); color: var(--ink); }
.ah-seg .ic { width: 18px; height: 18px; }
.ah-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ah-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.05); }
.ah-card.on { border-color: rgba(197, 140, 255, .65); box-shadow: 0 0 0 1px rgba(197, 140, 255, .25) inset; }
.ah-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ah-card header b { display: block; font-size: 16px; } .ah-card header small { color: var(--muted); font-size: 12px; }
.ah-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(197, 140, 255, .2); color: #d9b6ff; white-space: nowrap; }
.ah-prev { width: 100%; height: 124px; border-radius: 12px; display: block; background: #0b0e14; }
.ah-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); min-height: 54px; }
.ah-spec { margin: 0; display: grid; gap: 5px; }
.ah-spec div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ah-spec dt { color: var(--muted); } .ah-spec dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ah-buy { margin-top: auto; width: 100%; justify-content: center; gap: 8px; }
.ah-buy b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.ah-buy:disabled { opacity: .5; }
@media (max-width: 900px) { .ah-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- team */
:root { --team: #4cc9f0; --team-soft: rgba(76,201,240,.14); --team-line: rgba(76,201,240,.5); }
.team-chip .fc-go kbd { min-width: 0; padding: 3px 7px; }
.team-chip.has { border-color: var(--team-line); background: linear-gradient(0deg, var(--team-soft), var(--team-soft)), var(--glass); }
.team-chip.has .fc-ic { background: var(--team-soft); color: var(--team); }
.team-chip.has .fc-ic .ic { animation: none; }
.team-chip.has .fc-t small { color: #a8e6f8; font-weight: 600; }
.tag.mate { border-color: var(--team-line); color: #bff1ff; background: rgba(8,30,40,.78); }
.ct-team { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--team); color: #04202b; font-weight: 800; font-size: 9.5px; letter-spacing: .08em; }
.contract.team { border-color: var(--team-line); }
.ct-pay em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--team); text-align: right; }
.ct-pay em:empty { display: none; }
.deliv-team { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: var(--team-soft); color: #bff1ff; font-weight: 650; font-size: 12px; }
.deliv-team .ic { width: 14px; height: 14px; }

.invites { position: fixed; left: 16px; bottom: 120px; display: flex; flex-direction: column; gap: 8px; z-index: 70; pointer-events: none; }
.invite-card { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--team-line); box-shadow: var(--shadow); animation: inviteIn .5s var(--ease); }
@keyframes inviteIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.invite-card .iv-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--team-soft); color: var(--team); flex: none; }
.invite-card .iv-t { display: flex; flex-direction: column; min-width: 0; margin-right: 6px; } .invite-card .iv-t b { font-size: 14px; } .invite-card .iv-t small { color: var(--muted); font-size: 12px; }

.team-sheet { width: min(520px, 100%); }
.team-sheet .sh-head { gap: 12px; justify-content: flex-start; } .team-sheet .sh-head .x { margin-left: auto; }
.team-sheet .sh-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--team-soft); color: var(--team); }
.team-sheet .sh-t { display: flex; flex-direction: column; } .team-sheet .sh-t small { color: var(--muted); font-size: 12px; font-weight: 500; }
.tm-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-perks li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.tm-perks i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--team-soft); color: var(--team); flex: none; }
.tm-perks div { display: flex; flex-direction: column; gap: 1px; } .tm-perks b { font-size: 13.5px; } .tm-perks span { font-size: 12px; color: var(--muted); }
.tm-sec { display: flex; flex-direction: column; gap: 8px; } .tm-sec h4 { margin: 4px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.tm-hint { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.tm-row { display: flex; gap: 8px; } .tm-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); outline: none; }
.tm-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,214,10,.2); } .tm-row .btn { flex: none; }
.tm-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--team-soft); border: 1px solid var(--team-line); }
.tm-sum small { display: block; color: #a8e6f8; font-size: 11.5px; } .tm-sum b { font-size: 24px; color: var(--team); } .tm-sum > div:last-child { text-align: right; } .tm-sum span { font-weight: 700; font-size: 16px; }
.tm-members, .tm-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-members li, .tm-players li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13px; }
.tm-members li.off { opacity: .55; } .tm-members li.slot { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.tm-players li .btn { margin-left: auto; } .tm-players li.empty { color: var(--muted); font-size: 12px; justify-content: center; background: transparent; border: 1px dashed var(--line); }
.team-sheet .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3, #2a2a28); font-weight: 750; flex: none; }
.team-sheet .av.lead { background: var(--accent); color: #0a0a0a; }
.tm-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .tm-n b { font-size: 14px; } .tm-n em { font-style: normal; color: var(--muted); font-weight: 500; } .tm-n small { color: var(--muted); font-size: 11.5px; }
.tm-n .crown { color: var(--accent); display: inline-grid; vertical-align: middle; } .tm-n .crown .ic { width: 14px; height: 14px; }
.tm-leg { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .tm-leg .leg { font-size: 11.5px; font-weight: 650; color: var(--team); } .tm-leg .leg.done { color: var(--good); } .tm-leg .leg.off { color: var(--muted); }
.tm-leg .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .tm-leg .bar i { display: block; height: 100%; background: var(--team); transition: width .6s linear; }
.tm-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--surface-2); } .tm-code b { font-size: 24px; letter-spacing: .32em; font-variant-numeric: tabular-nums; }
.tm-jobcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); } .tm-jobcard p { color: var(--muted); }
.tm-jobcard p b { color: var(--ink); }
.jb-h { display: flex; gap: 12px; align-items: center; } .jb-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,214,10,.14); color: var(--accent); } .jb-h div { display: flex; flex-direction: column; } .jb-h small { color: var(--muted); font-size: 12px; }
.btn.danger { color: var(--bad); } .btn.danger .ic { color: var(--bad); }

/* ===== Adaptive layer: any screen (phone / tablet / laptop / ultrawide / short landscape) ===== */
html { -webkit-text-size-adjust: 100%; }
body { height: 100dvh; padding: 0; }
.screen { padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.hud-tl { left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); width: min(330px, calc(100vw - 32px)); }
.hud-tr { right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); }
.mini { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(110px, 22vmin, 240px); height: clamp(110px, 22vmin, 240px); }
.dash-wrap { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
.zone-slot { right: max(18px, env(safe-area-inset-right)); width: min(330px, calc(100vw - 36px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.photo-slot { right: max(18px, env(safe-area-inset-right)); width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 90px); overflow-y: auto; }
.card, .map-card, .overlay > *, .pr-card { max-width: 100%; }
.map-card { height: min(760px, 100%); max-height: 100dvh; }
.overlay { overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
img, canvas, svg { max-width: 100%; }
.toast { max-width: min(92vw, 520px); }

/* large / ultrawide: scale the HUD up a bit */
@media (min-width: 1700px) and (min-height: 900px) { .hud { font-size: 15px; } .hud-tl { width: 360px; } .zone-slot { width: 360px; } }
@media (min-width: 2300px) and (min-height: 1200px) { .hud { font-size: 17px; } .hud-tl { width: 420px; } .zone-slot { width: 420px; } .photo-slot { width: 440px; } }

/* tablets */
@media (max-width: 1024px) { .hud-tl { width: min(290px, calc(100vw - 32px)); } .photo-slot { top: 70px; } }

/* phones (portrait) */
@media (max-width: 640px) {
  .hud-tl { width: calc(100vw - 32px - 56px); gap: 8px; }
  .hud-tc { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 200px); max-width: calc(100vw - 24px); }
  .hud-tr { top: max(12px, env(safe-area-inset-top)); }
  .mini { width: clamp(96px, 28vw, 130px); height: clamp(96px, 28vw, 130px); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .mini-cap { display: none; }
  .zone-slot, .photo-slot { left: 10px; right: 10px; width: auto; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); transform: none; max-height: 62dvh; z-index: 55; }
  .photo-slot { z-index: 65; }
  .card { padding: 20px; border-radius: 22px; }
  .map-card { border-radius: 18px; }
  .sv-btn { min-width: 0; }
  .ah-bar { gap: 10px; }
  .v-grid { grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
}
@media (max-width: 380px) { .hud { font-size: 13px; } .avatar { width: 34px; height: 34px; } .round { width: 40px; height: 40px; } }

/* short landscape screens (phones sideways, small laptops) */
@media (max-height: 560px) {
  .screen { justify-content: flex-start; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
  .card { padding: 18px 22px; }
  .hud-tl { gap: 6px; }
  .mini { width: clamp(90px, 30vh, 150px); height: clamp(90px, 30vh, 150px); }
  .zone-slot { top: 8px; transform: none; max-height: calc(100dvh - 16px); width: min(300px, 44vw); }
  .photo-slot { top: 8px; max-height: calc(100dvh - 16px); width: min(320px, 44vw); }
  .hud-tc { top: 8px; bottom: auto; }
  .map-card { height: 100%; border-radius: 16px; }
  .overlay { place-items: start center; }
}
@media (max-height: 560px) and (max-width: 900px) { .zone-slot, .photo-slot { left: auto; } .keys-hint { display: none; } }

/* FPS / quality chip (click cycles: Авто → Высокое → Среднее → Низкое → Минимум) */
.fps { display: flex; align-items: baseline; gap: 4px; padding: 0 12px; height: 44px; border-radius: 14px; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; align-items: center; }
.fps b { font-size: 15px; min-width: 2ch; text-align: right; }
.fps small { font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.fps em { font-style: normal; font-size: 10.5px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 8px; margin-left: 4px; }
.fps[data-s="ok"] b { color: var(--good); } .fps[data-s="mid"] b { color: var(--warn); } .fps[data-s="bad"] b { color: var(--bad); }
@media (max-width: 900px) { .fps em { display: none; } }
@media (max-width: 640px) { .hud-tr { gap: 6px; } .fps { padding: 0 8px; height: 40px; } .fps small { display: none; } }
@media (max-width: 1280px) { .fps em { display: none; } }
@media (min-width: 641px) and (max-width: 1280px) { .hud-tc { top: calc(max(16px, env(safe-area-inset-top)) + 56px); } }