:root {
  color-scheme: dark;
  --bg: #08090f;
  --surface: #11131d;
  --surface-2: #171a27;
  --surface-3: #202434;
  --line: rgba(255,255,255,.09);
  --text: #f7f7fb;
  --muted: #a8adbf;
  --gold: #ffc83d;
  --gold-dark: #d99a00;
  --green: #55e39a;
  --red: #ff6b6b;
  --shadow: 0 28px 80px rgba(0,0,0,.45);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
button { font: inherit; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% -20%, #252a42 0, #0b0d15 38%, #06070b 75%); }
button { color: inherit; }

.lab-chip { border: 0; border-radius: 10px; padding: 9px 18px; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.lab-chip.is-active { background: var(--surface-3); color: white; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.lab-chip--drive { margin-left: 4px; color: var(--gold); border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }
.lab-chip--admin { color: var(--green); }

.stage { min-height: calc(100vh - 76px); padding: 28px; display: grid; place-items: center; overflow: auto; }
.device { width: min(1240px, calc(100vw - 56px)); height: min(800px, calc(100vh - 132px)); min-height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: var(--bg); box-shadow: var(--shadow); transition: width .35s ease, height .35s ease, border-radius .35s ease; }
.device[data-platform="pwa"], .device[data-platform="telegram"] { width: 430px; height: min(860px, calc(100vh - 118px)); min-height: 700px; border-radius: 42px; border-width: 7px; border-color: #272a35; }
.telegram-chrome { display: none; height: 72px; padding: 14px 15px 10px; grid-template-columns: 1fr auto 1fr; align-items: center; background: #0d0f16; border-bottom: 1px solid var(--line); }
.telegram-chrome div { display: grid; text-align: center; }
.telegram-chrome small { color: var(--muted); font-size: 11px; }
.telegram-chrome button { border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.telegram-chrome button:last-child { justify-self: end; font-weight: 800; letter-spacing: 2px; }
.device[data-platform="telegram"] .telegram-chrome { display: grid; }
.device.is-driving[data-platform="pwa"] { width: min(920px,calc(100vw - 56px)); height: min(540px,calc(100vh - 132px)); min-height: 480px; border-radius: 34px; }
.device.is-driving[data-platform="telegram"] { width: min(920px,calc(100vw - 56px)); height: min(610px,calc(100vh - 118px)); min-height: 550px; border-radius: 34px; }

.app-shell { height: 100%; display: grid; grid-template-columns: 244px 1fr; background: var(--bg); }
.device[data-platform="telegram"] .app-shell { height: calc(100% - 72px); }
.sidebar { padding: 24px 16px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg,#11131e,#0c0e16); display: flex; flex-direction: column; gap: 22px; }
.brand, .mobile-brand { border: 0; background: transparent; display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; }
.brand__icon { display: grid; place-items: center; width: 48px; height: 48px; background: rgba(255,200,61,.1); border: 1px solid rgba(255,200,61,.28); border-radius: 16px; }
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font-size: 19px; }
.brand small { color: var(--muted); font-size: 10px; }
.side-nav { display: grid; gap: 7px; }
.nav-item { height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); border-radius: 13px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
.nav-item span { width: 23px; font-size: 18px; text-align: center; }
.nav-item:hover { color: white; background: rgba(255,255,255,.04); }
.nav-item.is-active { background: rgba(255,200,61,.11); color: var(--gold); font-weight: 700; }
.sidebar__status { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 15px; display: flex; align-items: center; gap: 10px; }
.sidebar__status div { display: grid; gap: 2px; }
.sidebar__status strong { font-size: 12px; }
.sidebar__status small { color: var(--muted); font-size: 11px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(85,227,154,.1); }
.support-link { border: 0; background: transparent; color: var(--muted); cursor: pointer; text-align: left; padding: 9px 14px; }

.app-content { min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #2c3040 transparent; }
.mobile-header, .bottom-nav { display: none; }
.page { display: none; padding: 34px 38px 44px; max-width: 1120px; margin: 0 auto; animation: page-in .22s ease; }
.page.is-active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.page-heading.compact { margin-bottom: 24px; }
.page-heading h1 { margin: 2px 0 7px; font-size: clamp(28px,3vw,40px); letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--gold) !important; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: 11px; }
.avatar, .profile-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; border: 1px solid rgba(255,200,61,.25); background: rgba(255,200,61,.1); color: var(--gold); font-weight: 900; cursor: pointer; }

.hero-card { height: 330px; overflow: hidden; position: relative; border-radius: 27px; border: 1px solid var(--line); background: #1a1d27; }
.hero-card__track { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 68% 36%,rgba(255,200,61,.2),transparent 22%), repeating-linear-gradient(118deg,transparent 0 58px,rgba(255,255,255,.03) 59px 61px), linear-gradient(135deg,#343743,#181a23 48%,#262a32); }
.hero-card__track::before, .hero-card__track::after { content:""; position:absolute; width: 70%; height: 42px; border: 3px solid rgba(255,255,255,.14); border-left: 0; border-right: 0; transform: rotate(-24deg); right: -12%; top: 36%; }
.hero-card__track::after { top: 68%; right: 4%; width: 45%; opacity: .5; }
.track-car { position: absolute; right: 16%; top: 39%; font-size: 86px; filter: drop-shadow(0 24px 13px rgba(0,0,0,.7)); transform: rotate(-18deg); }
.hero-card__shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,7,11,.97) 0,rgba(6,7,11,.7) 43%,rgba(6,7,11,.04) 75%); }
.hero-card__content { position: relative; z-index: 2; height: 100%; width: 58%; min-width: 490px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.hero-card__content p { color: var(--muted); margin: 0 0 5px; }
.hero-card__content h2 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.035em; }
.hero-card__content div span { color: var(--gold); font-weight: 700; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; background: rgba(10,15,14,.8); border: 1px solid rgba(85,227,154,.23); border-radius: 999px; color: #bff8d9; font-size: 12px; font-weight: 700; backdrop-filter: blur(12px); }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(85,227,154,.12); }
.primary-action { min-height: 50px; padding: 0 18px; border: 0; border-radius: 15px; color: #17130a; background: linear-gradient(180deg,#ffd65e,var(--gold)); font-weight: 850; display: flex; align-items: center; justify-content: space-between; gap: 25px; box-shadow: 0 10px 28px rgba(255,184,0,.16); cursor: pointer; }
.primary-action:hover { transform: translateY(-1px); filter: brightness(1.04); }
.primary-action span { font-size: 21px; }
.primary-action.wide { width: 100%; justify-content: center; margin-top: 17px; }

.dashboard-grid { margin-top: 17px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 17px; }
.balance-card, .quick-card, .list-card, .states-card { border: 1px solid var(--line); background: var(--surface); border-radius: 21px; }
.balance-card { padding: 19px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left; cursor: pointer; }
.balance-card > span:nth-child(2) { display: grid; gap: 2px; }
.balance-card small, .quick-card small, .section-title small { color: var(--muted); }
.balance-card strong { font-size: 18px; }
.balance-card em { color: var(--muted); font-style: normal; font-size: 11px; }
.balance-card b { color: var(--gold); font-size: 12px; }
.card-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); }
.card-icon--gold { color: var(--gold); background: rgba(255,200,61,.1); }
.card-icon--green { color: var(--green); background: rgba(85,227,154,.1); }
.quick-card, .list-card, .states-card { padding: 19px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-title > div { display: grid; gap: 3px; }
.section-title button { border: 0; background: transparent; color: var(--gold); cursor: pointer; font-size: 12px; }
.ride-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-top: 16px; }
.ride-summary > span, .ride-car { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-3); }
.ride-summary div { display: grid; gap: 3px; }
.ride-summary b { font-size: 13px; }

.play-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.car-panel, .booking-panel, .wallet-hero, .profile-card, .settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: 23px; }
.car-visual { height: 210px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 55% 54%,rgba(255,200,61,.16),transparent 30%),linear-gradient(135deg,#282c38,#12141c); border-radius: 23px 23px 0 0; }
.car-visual::before { content:""; position:absolute; width: 130%; height: 75px; border: 2px solid rgba(255,255,255,.08); transform: rotate(-16deg); }
.car-visual > span { font-size: 102px; z-index: 2; filter: drop-shadow(0 28px 14px rgba(0,0,0,.65)); transform: rotate(-8deg); }
.car-shadow { position: absolute; width: 180px; height: 35px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(12px); bottom: 30px; }
.car-panel__body { padding: 20px; }
.car-panel__body h2 { font-size: 25px; margin: 14px 0 5px; }
.car-panel__body p { color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.spec-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.spec-row span { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.spec-row small { color: var(--muted); font-size: 10px; }
.spec-row strong { font-size: 12px; }
.booking-panel { padding: 21px; display: grid; grid-template-rows: auto 1fr auto; }
.package-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 9px; margin-top: 18px; }
.package { min-height: 67px; display: grid; gap: 4px; place-content: center; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-2); cursor: pointer; }
.package span { color: var(--muted); font-size: 11px; }
.package.is-active { border-color: var(--gold); background: rgba(255,200,61,.09); }
.package.is-active strong { color: var(--gold); }
.states-card { margin-top: 18px; }
.state-tabs { display: flex; gap: 7px; margin-top: 16px; overflow-x: auto; }
.state-tabs button { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 8px 13px; cursor: pointer; white-space: nowrap; font-size: 12px; }
.state-tabs button.is-active { background: white; color: #101118; }

.wallet-hero { min-height: 180px; padding: 25px; display: flex; justify-content: space-between; align-items: flex-end; background: radial-gradient(circle at 82% 10%,rgba(255,200,61,.17),transparent 34%),var(--surface); }
.wallet-hero > div:first-child { display: grid; }
.wallet-hero small, .wallet-hero p { color: var(--muted); }
.wallet-hero strong { font-size: 47px; letter-spacing: -.05em; margin-top: 4px; }
.wallet-hero strong span { color: var(--gold); font-size: 26px; }
.wallet-hero p { margin: 0; }
.wallet-hero__meter { width: 220px; display: grid; gap: 9px; }
.wallet-hero__meter::before { content:""; height: 7px; border-radius: 9px; background: linear-gradient(90deg,var(--gold) 0 68%,var(--surface-3) 68%); }
.token-shop { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0; }
.token-shop button { position: relative; min-height: 98px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); display: flex; align-items: flex-end; justify-content: space-between; cursor: pointer; text-align: left; }
.token-shop span { display: grid; gap: 5px; }
.token-shop small { color: var(--muted); }
.token-shop strong { color: var(--gold); }
.token-shop button.popular { border-color: rgba(255,200,61,.38); }
.token-shop em { position: absolute; top: 0; right: 14px; transform: translateY(-50%); padding: 4px 8px; border-radius: 999px; background: var(--gold); color: #16120a; font-size: 9px; font-style: normal; font-weight: 900; }
.transaction { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.transaction:last-child { border-bottom: 0; padding-bottom: 0; }
.transaction div { display: grid; gap: 3px; }
.transaction small { color: var(--muted); }
.transaction b { font-size: 13px; }
.positive { color: var(--green) !important; }

.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 17px; }
.stats-row div { padding: 18px; display: grid; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.stats-row small { color: var(--muted); }
.stats-row strong { font-size: 22px; }
.ride-list { display: grid; gap: 9px; }
.ride-list article { min-height: 76px; padding: 12px 15px; display: grid; grid-template-columns: 65px auto 1fr auto auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.ride-list time { color: var(--muted); font-size: 10px; line-height: 1.4; }
.ride-list time strong { color: white; font-size: 12px; }
.ride-list article > div { display: grid; gap: 5px; }
.ride-list article small { color: var(--muted); }
.ride-list article > b { font-size: 12px; }
.ride-list article > button { border: 0; background: transparent; color: var(--muted); font-size: 21px; cursor: pointer; }
.success-dot, .warning-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.warning-dot { background: var(--gold); }

.profile-card { padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.profile-card > div:nth-child(2) { display: grid; gap: 4px; }
.profile-card span { color: var(--muted); font-size: 12px; }
.profile-card button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; padding: 9px 12px; cursor: pointer; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 17px; }
.settings-grid--single { grid-template-columns: 1fr; }
.settings-card { padding: 18px; }
.settings-card h2 { font-size: 15px; margin: 0 0 9px; }
.settings-card button { width: 100%; min-height: 61px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.settings-card button:last-child { border-bottom: 0; }
.settings-card button > span { display: grid; grid-template-columns: 35px 1fr; align-items: center; }
.settings-card button b, .settings-card button small { grid-column: 2; }
.settings-card button small { color: var(--muted); margin-top: 3px; }
.settings-card button em { color: var(--muted); font-size: 20px; font-style: normal; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%,20px); padding: 12px 16px; background: #f4f4f7; color: #14151b; border-radius: 13px; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 50; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }


.drive-demo { display: none; height: 100%; position: relative; overflow: hidden; background: #252830; isolation: isolate; }
.device.is-driving .app-shell { display: none; }
.device.is-driving .drive-demo { display: block; }
.device.is-driving[data-platform="telegram"] .drive-demo { height: calc(100% - 72px); }
.demo-camera { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#272b31 0 43%,#64666a 43% 100%); }
.demo-camera__ceiling { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(176deg,#171a1e 0 55%,#30343a 56%); border-bottom: 7px solid #f07f25; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.demo-camera__wall { position: absolute; left: 0; right: 0; top: 25%; height: 30%; background: linear-gradient(90deg,#34383e,#55595d 48%,#30343a); border-bottom: 10px solid #25282d; }
.demo-camera__wall::before { content:""; position:absolute; width: 160px; height: 105px; left: 47%; bottom: 0; transform: translateX(-50%); background: linear-gradient(90deg,#7b3920,#b65d2e 45%,#6d321c); clip-path: polygon(10% 100%,0 38%,14% 0,86% 0,100% 38%,90% 100%); box-shadow: inset 0 0 0 7px rgba(45,18,8,.45); }
.demo-camera__wall i { position: absolute; width: 78px; height: 65px; bottom: 17px; background: #15171b; border: 5px solid #6d7279; box-shadow: 0 0 0 5px rgba(255,255,255,.04); }
.demo-camera__wall i:nth-child(1) { left: 8%; }
.demo-camera__wall i:nth-child(2) { right: 12%; width: 120px; }
.demo-camera__wall i:nth-child(3) { right: 31%; width: 52px; height: 82px; }
.demo-camera__track { position: absolute; inset: 52% -10% -18%; transform: perspective(480px) rotateX(15deg); background: repeating-linear-gradient(90deg,transparent 0 115px,rgba(255,255,255,.035) 116px 118px),linear-gradient(#797b7d,#4e5053); }
.demo-camera__track::before { content:""; position:absolute; left: 8%; right: 8%; top: 18%; bottom: 14%; border: 4px dashed rgba(255,255,255,.42); border-radius: 48%; transform: rotate(-4deg); }
.demo-camera__track i { position:absolute; width: 54px; height: 18px; background: repeating-linear-gradient(90deg,#f6a928 0 12px,#202226 12px 24px); border-radius: 3px; box-shadow: 0 8px 13px rgba(0,0,0,.35); }
.demo-camera__track i:nth-child(1) { left: 19%; top: 32%; transform: rotate(-13deg); }
.demo-camera__track i:nth-child(2) { right: 19%; top: 26%; transform: rotate(18deg); }
.demo-camera__track i:nth-child(3) { left: 44%; bottom: 20%; transform: rotate(3deg); }
.demo-camera__track i:nth-child(4) { right: 7%; bottom: 33%; transform: rotate(-20deg); }
.demo-camera__obstacle { position: absolute; z-index: 2; bottom: 17%; width: 80px; height: 44px; background: linear-gradient(145deg,#f39a26,#af4e16); clip-path: polygon(20% 100%,0 100%,28% 0,72% 0,100% 100%,80% 100%,65% 30%,35% 30%); filter: drop-shadow(0 13px 8px rgba(0,0,0,.42)); }
.obstacle-one { left: 33%; }
.obstacle-two { right: 27%; bottom: 27%; transform: scale(.72); }
.demo-camera__noise { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.drive-vignette { position:absolute; inset:0; z-index:3; pointer-events:none; background: radial-gradient(circle at 50% 52%,transparent 40%,rgba(3,4,6,.34) 100%),linear-gradient(180deg,rgba(3,4,7,.52),transparent 24% 70%,rgba(3,4,7,.36)); }
.drive-hud { position: absolute; z-index: 8; left: 22px; right: 22px; top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; }
.drive-exit, .drive-timer, .drive-status, .drive-platform-label, .recovery-demo-button { border: 1px solid rgba(255,255,255,.1); background: rgba(10,12,18,.76); backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.drive-exit { justify-self:start; min-height: 44px; padding: 0 16px; border-radius: 14px; cursor:pointer; font-weight:800; }
.drive-exit span { color: var(--gold); font-size: 19px; }
.drive-status { min-height: 50px; padding: 8px 15px; border-radius: 15px; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.drive-status i { grid-row: 1/3; width: 8px; height: 8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(85,227,154,.13); }
.drive-status strong { color: var(--green); font-size:13px; }
.drive-status small { color:#c4c7d1; font-size:10px; }
.drive-timer { justify-self:end; min-width: 90px; padding: 7px 14px; border-radius: 14px; display:grid; text-align:right; }
.drive-timer small { color:#c4c7d1; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.drive-timer strong { color:var(--gold); font-size:18px; }
.drive-platform-label { position:absolute; z-index:7; left:50%; bottom:17px; transform:translateX(-50%); padding:8px 12px; border-radius:12px; display:grid; text-align:center; pointer-events:none; }
.drive-platform-label span { font-size:10px; font-weight:800; }
.drive-platform-label small { color:#c4c7d1; font-size:8px; }
.demo-stick { position:absolute; z-index:9; bottom:24px; display:grid; justify-items:center; gap:7px; touch-action:none; user-select:none; }
.demo-stick--steer { left:28px; }
.demo-stick--throttle { right:28px; }
.demo-stick__ring { width:132px; height:132px; border-radius:50%; display:grid; place-items:center; background:rgba(12,15,24,.76); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 0 0 12px rgba(255,255,255,.025),0 14px 34px rgba(0,0,0,.35); backdrop-filter:blur(12px); }
.demo-stick__ring::before, .demo-stick__ring::after { content:""; position:absolute; opacity:.18; background:white; }
.demo-stick__ring::before { width:1px; height:78px; }
.demo-stick__ring::after { width:78px; height:1px; }
.demo-stick__knob { position:relative; z-index:2; width:66px; height:66px; border-radius:50%; background:linear-gradient(145deg,#ffdc70,var(--gold-dark)); box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35); transition:transform .08s linear; }
.demo-stick label { padding:4px 9px; border-radius:999px; color:#e4e5eb; background:rgba(8,10,15,.6); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.demo-stick.is-disabled { opacity:.42; }
.drive-key-group { position:absolute; z-index:9; bottom:28px; display:none; justify-items:center; gap:9px; user-select:none; }
.drive-key-group--steer { left:28px; }
.drive-key-group--throttle { right:28px; }
.device.is-driving[data-platform="web"] .demo-stick { display:none; }
.device.is-driving[data-platform="web"] .drive-key-group { display:grid; }
.drive-key-group > div { display:flex; gap:10px; }
.drive-key-group--throttle > div { flex-direction:column; }
.drive-key { width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:16px; color:#f2f3f7; background:rgba(10,12,18,.76); backdrop-filter:blur(18px); box-shadow:0 10px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08); font-size:22px; font-weight:900; }
.drive-key-group label { padding:4px 9px; border-radius:999px; color:#e4e5eb; background:rgba(8,10,15,.6); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.drive-key.is-pressed { border-color:var(--gold); background:var(--gold); color:#17130a; transform:translateY(2px); }
.drive-key-group.is-disabled { opacity:.42; }
.recovery-demo-button { position:absolute; z-index:9; right:24px; bottom:183px; padding:8px 11px; border-radius:11px; color:#e6e7ed; cursor:pointer; font-size:9px; }
.recovery-overlay { position:absolute; z-index:12; left:50%; top:50%; transform:translate(-50%,-45%); min-width:min(440px,calc(100% - 40px)); padding:19px 22px; border:1px solid rgba(255,255,255,.13); border-radius:19px; background:rgba(10,12,18,.9); backdrop-filter:blur(24px); box-shadow:0 22px 60px rgba(0,0,0,.5); display:flex; align-items:center; gap:15px; opacity:0; pointer-events:none; transition:.22s ease; }
.recovery-spinner { color:var(--gold); font-size:29px; line-height:1; }
.drive-demo.is-recovering .recovery-overlay { opacity:1; transform:translate(-50%,-50%); }
.drive-demo.is-recovering .recovery-spinner { animation:spin 1.1s linear infinite; }
.drive-demo.is-recovering .drive-status strong { color:var(--gold); }
.drive-demo.is-recovering .drive-status i { background:var(--gold); box-shadow:0 0 0 5px rgba(255,200,61,.13); }
@keyframes spin { to { transform:rotate(360deg); } }
.drive-demo.is-ending::after { content:"Завершаем заезд…"; position:absolute; z-index:20; inset:0; display:grid; place-items:center; background:rgba(5,6,9,.68); backdrop-filter:blur(8px); font-size:18px; font-weight:850; }

.device.is-driving[data-platform="telegram"] .drive-hud { top:14px; }
.device.is-driving[data-platform="telegram"] .demo-stick { bottom:20px; }
.device.is-driving[data-platform="telegram"] .recovery-demo-button { bottom:176px; }

@media (max-width: 760px) {
  .stage { min-height: calc(100vh - 67px); padding: 12px; align-items: start; }
  .device, .device[data-platform="pwa"], .device[data-platform="telegram"] { width: min(430px,calc(100vw - 24px)); height: calc(100vh - 90px); min-height: 620px; border-width: 1px; border-radius: 25px; }
  .device.is-driving, .device.is-driving[data-platform="pwa"], .device.is-driving[data-platform="telegram"] { width:calc(100vw - 24px); height:min(520px,calc(100vh - 90px)); min-height:430px; }
  .lab-chip { padding-inline:11px; }
  .lab-chip--drive { font-size:0; }
  .lab-chip--drive::after { content:"Заезд"; font-size:13px; }
  .demo-stick__ring { width:105px; height:105px; }
  .demo-stick__knob { width:54px; height:54px; }
  .drive-hud { left:12px; right:12px; top:11px; }
  .drive-status small, .drive-timer small { display:none; }
  .drive-exit { padding-inline:11px; }
  .demo-stick--steer { left:13px; }
  .demo-stick--throttle { right:13px; }
  .drive-key-group--steer { left:13px; }
  .drive-key-group--throttle { right:13px; }
  .drive-key { width:58px; height:58px; border-radius:14px; font-size:19px; }
}

.device[data-platform="pwa"] .app-shell,
.device[data-platform="telegram"] .app-shell { display: block; position: relative; }
.device[data-platform="pwa"] .sidebar,
.device[data-platform="telegram"] .sidebar { display: none; }
.device[data-platform="pwa"] .app-content,
.device[data-platform="telegram"] .app-content { height: 100%; padding-bottom: 74px; }
.device[data-platform="pwa"] .mobile-header,
.device[data-platform="telegram"] .mobile-header { height: 66px; padding: 12px 17px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 8; background: rgba(8,9,15,.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.mobile-brand span { width: 35px; height: 35px; display: grid; place-items: center; background: rgba(255,200,61,.1); border: 1px solid rgba(255,200,61,.24); border-radius: 11px; }
.balance-pill { border: 1px solid rgba(255,200,61,.23); background: rgba(255,200,61,.08); color: var(--gold); border-radius: 999px; padding: 8px 11px; font-weight: 800; cursor: pointer; }
.device[data-platform="pwa"] .bottom-nav,
.device[data-platform="telegram"] .bottom-nav { position: absolute; display: grid; grid-template-columns: repeat(5,1fr); left: 0; right: 0; bottom: 0; z-index: 10; min-height: 72px; padding: 7px 7px max(7px,env(safe-area-inset-bottom)); background: rgba(14,16,24,.94); backdrop-filter: blur(22px); border-top: 1px solid var(--line); }
.bottom-nav button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 3px; font-size: 9px; cursor: pointer; }
.bottom-nav span { font-size: 17px; }
.bottom-nav button.is-active { color: var(--gold); }
.device[data-platform="pwa"] .page,
.device[data-platform="telegram"] .page { padding: 22px 17px 28px; }
.device[data-platform="pwa"] .page-heading,
.device[data-platform="telegram"] .page-heading { margin-bottom: 18px; }
.device[data-platform="pwa"] .page-heading h1,
.device[data-platform="telegram"] .page-heading h1 { font-size: 26px; }
.device[data-platform="pwa"] .page-heading > .avatar,
.device[data-platform="telegram"] .page-heading > .avatar { display: none; }
.device[data-platform="pwa"] .hero-card,
.device[data-platform="telegram"] .hero-card { height: 390px; }
.device[data-platform="pwa"] .hero-card__shade,
.device[data-platform="telegram"] .hero-card__shade { background: linear-gradient(0deg,rgba(6,7,11,.98),rgba(6,7,11,.15) 80%); }
.device[data-platform="pwa"] .track-car,
.device[data-platform="telegram"] .track-car { right: 20%; top: 16%; font-size: 78px; }
.device[data-platform="pwa"] .hero-card__content,
.device[data-platform="telegram"] .hero-card__content { width: 100%; min-width: 0; padding: 20px; justify-content: flex-end; gap: 15px; }
.device[data-platform="pwa"] .hero-card__content .status-pill,
.device[data-platform="telegram"] .hero-card__content .status-pill { align-self: flex-start; }
.device[data-platform="pwa"] .hero-card__content h2,
.device[data-platform="telegram"] .hero-card__content h2 { font-size: 25px; }
.device[data-platform="pwa"] .primary-action,
.device[data-platform="telegram"] .primary-action { width: 100%; justify-content: center; }
.device[data-platform="pwa"] .dashboard-grid,
.device[data-platform="telegram"] .dashboard-grid,
.device[data-platform="pwa"] .play-layout,
.device[data-platform="telegram"] .play-layout,
.device[data-platform="pwa"] .settings-grid,
.device[data-platform="telegram"] .settings-grid { grid-template-columns: 1fr; }
.device[data-platform="pwa"] .balance-card,
.device[data-platform="telegram"] .balance-card { grid-template-columns: auto 1fr; }
.device[data-platform="pwa"] .balance-card b,
.device[data-platform="telegram"] .balance-card b { grid-column: 2; }
.device[data-platform="pwa"] .car-visual,
.device[data-platform="telegram"] .car-visual { height: 180px; }
.device[data-platform="pwa"] .token-shop,
.device[data-platform="telegram"] .token-shop { grid-template-columns: 1fr; }
.device[data-platform="pwa"] .wallet-hero,
.device[data-platform="telegram"] .wallet-hero { min-height: 210px; display: grid; }
.device[data-platform="pwa"] .wallet-hero__meter,
.device[data-platform="telegram"] .wallet-hero__meter { width: 100%; }
.device[data-platform="pwa"] .stats-row,
.device[data-platform="telegram"] .stats-row { grid-template-columns: 1fr 1fr; }
.device[data-platform="pwa"] .stats-row div:last-child,
.device[data-platform="telegram"] .stats-row div:last-child { grid-column: 1/-1; }
.device[data-platform="pwa"] .ride-list article,
.device[data-platform="telegram"] .ride-list article { grid-template-columns: auto 1fr auto; gap: 10px; }
.device[data-platform="pwa"] .ride-list time,
.device[data-platform="telegram"] .ride-list time,
.device[data-platform="pwa"] .ride-list article > button,
.device[data-platform="telegram"] .ride-list article > button { display: none; }
.device[data-platform="pwa"] .ride-list article > div,
.device[data-platform="telegram"] .ride-list article > div { min-width: 0; }
.device[data-platform="pwa"] .ride-list article > b,
.device[data-platform="telegram"] .ride-list article > b { grid-column: 3; }


.device.is-driving[data-platform="pwa"] .app-shell,
.device.is-driving[data-platform="telegram"] .app-shell { display:none; }


.auth-demo { display:none; height:100%; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); background:var(--bg); }
.device.is-auth .app-shell, .device.is-auth .drive-demo { display:none; }
.device.is-auth .auth-demo { display:grid; }
.device.is-auth[data-platform="telegram"] .auth-demo { height:calc(100% - 72px); }
.auth-demo__scene { min-width:0; position:relative; overflow:hidden; background:radial-gradient(circle at 62% 38%,rgba(255,200,61,.22),transparent 22%),linear-gradient(135deg,#292d3a,#11131c 62%); }
.auth-demo__scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,10,.2),rgba(5,6,10,.02) 60%,rgba(5,6,10,.72)); pointer-events:none; }
.auth-scene__track { position:absolute; inset:0; overflow:hidden; background:repeating-linear-gradient(118deg,transparent 0 76px,rgba(255,255,255,.035) 77px 79px); }
.auth-scene__track::before, .auth-scene__track::after { content:""; position:absolute; width:80%; height:110px; border:4px solid rgba(255,255,255,.12); border-left:0; border-right:0; transform:rotate(-21deg); right:-15%; top:35%; }
.auth-scene__track::after { width:55%; top:68%; right:3%; opacity:.55; }
.auth-scene__track > span { position:absolute; z-index:2; right:20%; top:42%; font-size:118px; transform:rotate(-17deg); filter:drop-shadow(0 30px 17px rgba(0,0,0,.68)); }
.auth-scene__content { position:absolute; z-index:2; inset:0; padding:34px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
.auth-brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--gold); color:#17130a; font-weight:950; }
.auth-scene__content > div { max-width:510px; padding:23px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(7,8,13,.54); backdrop-filter:blur(15px); }
.auth-scene__content p { margin:0 0 7px; color:var(--gold); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.13em; }
.auth-scene__content h1 { margin:0 0 12px; font-size:clamp(28px,3.1vw,47px); line-height:1.04; letter-spacing:-.045em; }
.auth-scene__content div > span { color:#c6cad7; }
.auth-demo__panel { min-width:0; padding:32px 42px; overflow:auto; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 0,rgba(255,200,61,.08),transparent 30%),#0b0d14; }
.auth-standard, .auth-telegram { width:min(100%,390px); }
.auth-telegram { display:none; }
.auth-mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:29px; }
.auth-mobile-brand > span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,200,61,.24); border-radius:13px; background:rgba(255,200,61,.1); }
.auth-kicker { margin:0 0 6px; color:var(--gold); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.14em; }
.auth-standard h2, .auth-telegram h2 { margin:0; font-size:30px; letter-spacing:-.035em; }
.auth-lead { margin:8px 0 22px; color:var(--muted); font-size:13px; line-height:1.5; }
.telegram-entry, .auth-submit { width:100%; min-height:50px; border-radius:14px; cursor:pointer; font-weight:850; }
.telegram-entry { border:0; background:#2aabee; color:white; display:flex; align-items:center; justify-content:center; gap:10px; }
.telegram-entry span { font-size:17px; transform:rotate(-25deg); }
.auth-submit { margin-top:3px; border:0; color:#17130a; background:linear-gradient(180deg,#ffd65e,var(--gold)); }
.telegram-user-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:18px 0 15px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.telegram-user-card__avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:white; background:linear-gradient(145deg,#8b78ff,#5542df); font-weight:900; }
.telegram-user-card > div { display:grid; gap:3px; }
.telegram-user-card small { color:var(--muted); }
.telegram-user-card > b { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; color:#102018; background:var(--green); font-size:12px; }

.device[data-platform="pwa"] .auth-demo,
.device[data-platform="telegram"] .auth-demo { grid-template-columns:1fr; }
.device[data-platform="pwa"] .auth-demo__scene,
.device[data-platform="telegram"] .auth-demo__scene { display:none; }
.device[data-platform="pwa"] .auth-demo__panel,
.device[data-platform="telegram"] .auth-demo__panel { padding:25px 24px 34px; align-items:flex-start; }
.device[data-platform="pwa"] .auth-mobile-brand,
.device[data-platform="telegram"] .auth-mobile-brand { display:flex; }
.device[data-platform="telegram"] .auth-standard { display:none; }
.device[data-platform="telegram"] .auth-telegram { display:block; }

@media (max-width:760px) {
  .device.is-auth[data-platform="web"] .auth-demo { grid-template-columns:1fr; }
  .device.is-auth[data-platform="web"] .auth-demo__scene { display:none; }
  .device.is-auth[data-platform="web"] .auth-demo__panel { padding:24px; align-items:flex-start; }
  .device.is-auth[data-platform="web"] .auth-mobile-brand { display:flex; }
  .lab-chip--auth { font-size:0; }
  .lab-chip--auth::after { content:"Вход"; font-size:13px; }
  .lab-chip--auth.is-active::after { content:"Назад"; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


.admin-lab { overflow: hidden; }
.admin-lab a { color: inherit; text-decoration: none; }
.admin-labbar .labbar__mark { text-decoration: none; font-size: 13px; }
.admin-stage { height: calc(100vh - 76px); padding: 22px; display: grid; place-items: center; }
.admin-device { width: min(1440px,calc(100vw - 44px)); height: calc(100vh - 120px); min-height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: var(--bg); box-shadow: var(--shadow); transition: width .3s,height .3s,border-radius .3s; }
.admin-shell { position: relative; height: 100%; display: grid; grid-template-columns: 248px 1fr; }
.admin-sidebar { padding: 23px 16px 17px; border-right: 1px solid var(--line); background: linear-gradient(180deg,#11131e,#0c0e16); display: flex; flex-direction: column; gap: 24px; }
.admin-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.admin-brand>span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,200,61,.25); border-radius: 14px; background: rgba(255,200,61,.1); }
.admin-brand>div { display: grid; }.admin-brand strong { font-size: 18px; }.admin-brand small { color: var(--muted); font-size: 10px; }
.admin-nav { min-height: 0; overflow: auto; display: grid; gap: 4px; scrollbar-width: thin; }.admin-nav button { position: relative; min-height: 39px; padding: 0 13px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; }.admin-nav button.is-active { color: var(--gold); background: rgba(255,200,61,.11); }.admin-nav button span { font-size: 16px; text-align: center; }.admin-nav button b { font-size: 12px; font-weight: 700; }.admin-nav button em { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,200,61,.14); font-size: 9px; font-style: normal; text-align: center; }.nav-group-label { padding: 9px 13px 3px; color: #6f7488; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.park-status { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 15px; display: flex; align-items: center; gap: 10px; }.park-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(85,227,154,.1); }.park-status div { display: grid; }.park-status strong { font-size: 12px; }.park-status small,.back-to-app { color: var(--muted); font-size: 11px; }.back-to-app { padding: 8px 13px; }
.admin-content { min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #2c3040 transparent; }.admin-mobile-header,.admin-bottom-nav { display: none; }
.admin-topbar { min-height: 73px; padding: 11px 34px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }.admin-topbar>div { display: flex; align-items: center; gap: 9px; }.admin-topbar small,.admin-profile small { color: var(--muted); }.admin-profile { display: flex!important; gap: 10px!important; }.admin-profile>div { display: grid; }.admin-profile a { margin-left: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }.admin-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--gold); border: 1px solid rgba(255,200,61,.25); background: rgba(255,200,61,.1); font-size: 12px; font-weight: 900; }
.admin-page { display: none; max-width: 1180px; margin: 0 auto; padding: 31px 34px 44px; }.admin-page.is-active { display: block; animation: page-in .2s ease; }.admin-heading { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }.admin-heading h1 { margin: 2px 0 5px; font-size: clamp(28px,3vw,39px); letter-spacing: -.04em; }.admin-heading p { margin: 0; color: var(--muted); }
.refresh-button,.secondary-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.admin-stats { margin-bottom: 17px; display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.admin-stats article { min-height: 94px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); display: flex; align-items: center; gap: 13px; }.admin-stats article>div { display: grid; gap: 3px; }.admin-stats small { color: var(--muted); }.admin-stats strong { font-size: 25px; }.admin-stats strong em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; }.stat-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-3); font-weight: 900; }.stat-icon--green { color: var(--green); background: rgba(85,227,154,.1); }.stat-icon--gold { color: var(--gold); background: rgba(255,200,61,.1); }
.admin-card { border: 1px solid var(--line); border-radius: 21px; background: var(--surface); }.live-card { padding: 22px; }.card-title,.fleet-info,.section-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }.card-title h2,.fleet-info h2 { margin: 2px 0 0; font-size: 21px; }.card-title h2 small,.fleet-info small { color: var(--muted); font-size: 11px; font-weight: 500; }.status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 800; }.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status--green { color: var(--green); background: rgba(85,227,154,.09); }
.live-grid { margin: 20px 0; display: grid; grid-template-columns: 1.25fr repeat(3,1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }.live-grid>div { min-height: 104px; padding: 17px; border-right: 1px solid var(--line); }.live-grid>div:last-child { border-right: 0; }.live-car { display: flex; align-items: center; gap: 12px; }.live-car>div:last-child,.metric { display: grid; align-content: center; gap: 3px; }.car-photo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#2c3443,#171a23); font-size: 31px; }.live-car small,.live-car span,.metric small,.metric span { color: var(--muted); font-size: 11px; }.metric strong { font-size: 20px; }.countdown { color: var(--gold); font-variant-numeric: tabular-nums; }
.danger-zone { padding-top: 17px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; gap: 18px; }.danger-zone label { color: var(--muted); font-size: 12px; }.danger-zone input { accent-color: var(--gold); }.danger-button { min-height: 42px; padding: 0 16px; border: 1px solid rgba(255,107,107,.27); border-radius: 12px; background: rgba(255,107,107,.1); color: var(--red); font-weight: 800; cursor: pointer; }
.table-card { overflow: hidden; }.table-toolbar { min-height: 76px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }.search-field { width: min(460px,100%); min-height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; gap: 9px; }.search-field span,.table-count { color: var(--muted); }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }.responsive-table { overflow: auto; }table { width: 100%; border-collapse: collapse; }th,td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }th { color: var(--muted); font-weight: 600; }tbody tr { cursor: pointer; }tbody tr:hover { background: rgba(255,255,255,.025); }td:last-child { text-align: right; }.table-user { display: flex; align-items: center; gap: 10px; }.user-avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,200,61,.2); border-radius: 13px; background: rgba(255,200,61,.08); color: var(--gold); font-size: 11px; font-weight: 900; }.table-user div { display: grid; }.table-user small { color: var(--muted); }.row-arrow { color: var(--muted); font-size: 18px; }
.fleet-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.fleet-card { overflow: hidden; }.fleet-picture { min-height: 170px; padding: 17px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 55% 48%,rgba(255,200,61,.14),transparent 28%),linear-gradient(145deg,#2a2e3a,#151821); font-size: 86px; }.fleet-picture .status { position: absolute; left: 17px; bottom: 15px; }.fleet-info { padding: 18px; border-bottom: 1px solid var(--line); }.fleet-info>div { display: grid; }.fleet-meta { padding: 16px 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.fleet-meta span { display: grid; gap: 3px; }.fleet-meta small { color: var(--muted); font-size: 10px; }.fleet-meta strong { font-size: 12px; }
.admin-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: .2s; }.admin-overlay.is-visible { opacity: 1; pointer-events: auto; }.admin-drawer { position: fixed; z-index: 60; top: 0; right: 0; width: min(500px,100vw); height: 100vh; padding: 27px; overflow: auto; border-left: 1px solid var(--line); background: #0e1018; box-shadow: -24px 0 70px rgba(0,0,0,.45); transform: translateX(103%); transition: .24s ease; }.admin-drawer.is-open { transform: none; }.drawer-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 22px; cursor: pointer; }.drawer-head { padding: 18px 48px 23px 0; display: flex; align-items: center; gap: 13px; }.drawer-head h2 { margin: 2px 0; font-size: 25px; }.drawer-head p,.drawer-head span { margin: 0; }.drawer-head>div>span { color: var(--muted); font-size: 11px; }.drawer-balance { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); display: flex; justify-content: space-between; align-items: center; }.drawer-balance>div { display: grid; }.drawer-balance small { color: var(--muted); }.drawer-balance strong { font-size: 20px; }.drawer-section { padding: 22px 0; border-bottom: 1px solid var(--line); }.drawer-section h3 { margin: 0 0 13px; font-size: 14px; }.section-row h3 { margin: 0; }.section-row button { border: 0; background: transparent; color: var(--gold); cursor: pointer; }.credit-form { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; }.credit-form input,.form-stack input,.form-stack select { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--surface-2); color: var(--text); font: inherit; }.credit-form button,.save-button { padding: 0 14px; border: 0; border-radius: 11px; background: var(--gold); color: #17130a; font-weight: 850; cursor: pointer; }.history-list { display: grid; }.history-list article { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; }.history-list article:last-child { border: 0; }.history-list article>span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-3); font-size: 10px; }.history-list article>div { display: grid; }.history-list small { color: var(--muted); }.history-list b { font-size: 12px; }.history-list .positive { color: var(--green); }.ban-button { width: 100%; min-height: 44px; margin-top: 22px; border: 1px solid rgba(255,107,107,.24); border-radius: 12px; background: transparent; color: var(--red); cursor: pointer; }.form-stack { display: grid; gap: 14px; }.form-stack label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }.upload-field button { min-height: 44px; border: 1px dashed rgba(255,255,255,.16); border-radius: 11px; background: var(--surface-2); color: var(--text); cursor: pointer; }.save-button { min-height: 46px; }
.confirm-dialog { position: fixed; z-index: 70; left: 50%; top: 50%; width: min(430px,calc(100vw - 32px)); padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: #11131d; box-shadow: var(--shadow); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,-46%) scale(.96); transition: .2s; }.confirm-dialog.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }.confirm-icon { width: 48px; height: 48px; margin: 0 auto; display: grid; place-items: center; border-radius: 15px; background: rgba(255,107,107,.1); color: var(--red); }.confirm-dialog h2 { margin: 15px 0 7px; }.confirm-dialog p { margin: 0; color: var(--muted); }.confirm-dialog>div { margin-top: 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.mobile-sections-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--muted); }
.heading-actions,.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }.filter-button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }.filter-button.is-active { border-color: rgba(255,200,61,.3); background: rgba(255,200,61,.1); color: var(--gold); }
.status--red { color: var(--red); background: rgba(255,107,107,.1); }
.machine-health { margin: 0 0 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.machine-health article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); display: flex; align-items: center; gap: 9px; }.machine-health article>div { min-width: 0; display: grid; gap: 2px; }.machine-health small,.machine-health em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.machine-health strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.health-icon { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 900; }.health-ok { color: var(--green); background: rgba(85,227,154,.1); }
.incident-list { display: grid; gap: 13px; }.incident-card { padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 15px; }.incident-card--open { border-color: rgba(255,107,107,.25); }.incident-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,107,107,.1); color: var(--red); font-weight: 900; }.incident-symbol--done { color: var(--green); background: rgba(85,227,154,.1); }.incident-main>div:first-child { display: flex; align-items: center; gap: 10px; }.incident-main time { color: var(--muted); font-size: 10px; }.incident-main h2 { margin: 10px 0 4px; font-size: 17px; }.incident-main p { margin: 0; color: var(--muted); font-size: 12px; }.incident-facts { margin-top: 15px; display: flex; gap: 9px; flex-wrap: wrap; }.incident-facts span { min-width: 125px; padding: 9px 11px; border-radius: 11px; background: var(--surface-2); display: grid; }.incident-facts small { color: var(--muted); font-size: 9px; }.incident-facts strong { font-size: 11px; }.incident-actions { display: grid; gap: 8px; }.incident-actions .save-button { min-height: 40px; }
.queue-layout,.support-layout,.tariff-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }.queue-card,.dispatcher-card,.ticket-list,.ticket-dialog,.tariff-card { padding: 20px; }.queue-card .card-title>small { color: var(--muted); }.queue-list,.dispatcher-list { margin-top: 14px; display: grid; }.queue-list article { min-height: 66px; padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 24px 42px 1fr auto 30px; align-items: center; gap: 9px; }.queue-list article>b { color: var(--gold); font-size: 18px; }.queue-list article>div,.dispatcher-list article>div { display: grid; }.queue-list small,.dispatcher-list small { color: var(--muted); font-size: 10px; }.queue-list article>button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }.dispatcher-list article { min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; }.dispatcher-note { margin: 15px 0 0; padding: 12px; border-radius: 12px; background: rgba(255,200,61,.08); color: #e6d39b; font-size: 11px; }
.fleet-health-row { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 9px; }.fleet-health-row span { display: flex; align-items: center; gap: 5px; }.ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.payment-stats article { min-height: 85px; }.support-layout { grid-template-columns: .72fr 1.28fr; }.ticket-list { padding: 7px; align-self: start; }.ticket-list>button { width: 100%; min-height: 75px; padding: 10px; border: 0; border-radius: 13px; background: transparent; color: var(--text); display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; text-align: left; }.ticket-list>button.is-active { background: rgba(255,200,61,.08); }.ticket-list>button>div { min-width: 0; display: grid; gap: 2px; }.ticket-list small,.ticket-list time { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.ticket-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }.ticket-head { display: flex; justify-content: space-between; }.ticket-head h2 { margin: 3px 0 0; }.ticket-message { margin: 18px 0; padding: 15px; border-radius: 14px; background: var(--surface-2); }.ticket-message small { color: var(--muted); }.ticket-message p { margin: 5px 0 0; }.linked-payment { margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; }.linked-payment>span { color: var(--gold); }.linked-payment>div { display: grid; }.linked-payment small { color: var(--muted); }.linked-payment button { border: 0; background: transparent; color: var(--gold); cursor: pointer; }.ticket-dialog textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--surface-2); color: var(--text); font: inherit; }.ticket-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; }.ticket-actions .save-button { min-height: 40px; }
.tariff-card .card-title { padding-bottom: 13px; border-bottom: 1px solid var(--line); }.tariff-list,.token-tariffs { display: grid; }.tariff-list article { min-height: 53px; display: grid; grid-template-columns: 85px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }.tariff-list input[type=number],.token-tariffs input[type=number] { width: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); }.tariff-list label,.token-tariffs label { color: var(--muted); font-size: 10px; }.tariff-list input[type=checkbox],.token-tariffs input[type=checkbox] { accent-color: var(--gold); }.token-tariffs article { min-height: 61px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }.token-tariffs article>span { display: grid; }.token-tariffs small { color: var(--muted); }.save-bar { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); display: flex; justify-content: flex-end; align-items: center; gap: 16px; }.save-bar p { margin: 0 auto 0 0; color: var(--muted); font-size: 11px; }.save-bar .save-button { min-height: 42px; }
.timeline { padding: 9px 20px; }.timeline article { min-height: 76px; padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; }.timeline article:last-child { border: 0; }.timeline-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-3); color: var(--gold); }.timeline article>div { display: grid; }.timeline p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }.timeline time { color: var(--muted); font-size: 10px; }
.maintenance-fields { padding: 13px; border: 1px solid rgba(255,200,61,.17); border-radius: 13px; background: rgba(255,200,61,.045); display: none; gap: 12px; }.maintenance-fields.is-visible { display: grid; }
.more-sheet { position: fixed; z-index: 60; left: 50%; bottom: 0; width: min(430px,100%); padding: 8px 17px max(20px,env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: #11131d; transform: translate(-50%,105%); transition: .22s; }.more-sheet.is-open { transform: translate(-50%,0); }.sheet-handle { width: 38px; height: 4px; margin: 0 auto 13px; border-radius: 4px; background: #454a5b; }.sheet-title { display: flex; justify-content: space-between; align-items: center; }.sheet-title h2 { margin: 2px 0 0; }.sheet-title button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text); font-size: 20px; }.more-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.more-grid button { min-height: 68px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); display: flex; align-items: center; gap: 10px; text-align: left; }.more-grid button>span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,200,61,.08); color: var(--gold); }

@media (max-width: 760px) {
  .admin-labbar { display: none; }.admin-stage { height: 100vh; padding: 0; }.admin-device,.admin-device[data-viewport="mobile"] { width: 100vw; height: 100vh; min-height: 0; border: 0; border-radius: 0; }.admin-shell { display: block; }.admin-sidebar,.admin-topbar { display: none; }.admin-content { height: 100%; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }.admin-mobile-header { min-height: 67px; padding: max(10px,env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 8; background: rgba(8,9,15,.93); backdrop-filter: blur(18px); }.admin-mobile-header .admin-brand>span { width: 36px; height: 36px; border-radius: 11px; }.admin-page { padding: 22px 16px 30px; }.admin-heading { align-items: start; }.admin-heading h1 { font-size: 28px; }.admin-heading p { font-size: 13px; }.refresh-button { font-size: 0; width: 42px; padding: 0; }.refresh-button::first-letter { font-size: 18px; }.admin-stats { grid-template-columns: 1fr 1fr; }.admin-stats article { min-height: 80px; padding: 14px; }.admin-stats article:last-child { grid-column: 1/-1; }.live-card { padding: 17px; }.live-grid { grid-template-columns: 1fr 1fr; }.live-grid>div { min-height: 92px; }.live-grid>div:nth-child(2) { border-right: 0; }.live-grid>div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.danger-zone { align-items: stretch; flex-direction: column; }.danger-button { width: 100%; }.admin-bottom-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; min-height: 68px; padding: 6px 10px max(7px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(14,16,24,.96); display: grid; grid-template-columns: repeat(3,1fr); }.admin-bottom-nav button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; font-size: 9px; }.admin-bottom-nav button span { font-size: 18px; }.admin-bottom-nav button.is-active { color: var(--gold); }.table-toolbar { align-items: stretch; flex-direction: column; }.table-count { font-size: 11px; }.responsive-table table { min-width: 690px; }.fleet-grid { grid-template-columns: 1fr; }.fleet-picture { min-height: 150px; }.admin-drawer { padding: 21px; }.credit-form { grid-template-columns: 1fr 1fr; }.credit-form input:nth-child(2),.credit-form button { grid-column: 1/-1; min-height: 43px; }
}
@media (min-width: 761px) {
  .admin-device[data-viewport="mobile"] { width: 430px; height: min(820px,calc(100vh - 115px)); min-height: 650px; border-width: 7px; border-color: #272a35; border-radius: 42px; }
  .admin-device[data-viewport="mobile"] .admin-shell { display: block; }.admin-device[data-viewport="mobile"] .admin-sidebar,.admin-device[data-viewport="mobile"] .admin-topbar { display: none; }.admin-device[data-viewport="mobile"] .admin-content { height: 100%; padding-bottom: 68px; }.admin-device[data-viewport="mobile"] .admin-mobile-header { min-height: 67px; padding: 11px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.admin-device[data-viewport="mobile"] .admin-mobile-header .admin-brand>span { width: 36px; height: 36px; border-radius: 11px; }.admin-device[data-viewport="mobile"] .admin-page { padding: 22px 16px 28px; }.admin-device[data-viewport="mobile"] .admin-heading h1 { font-size: 28px; }.admin-device[data-viewport="mobile"] .admin-heading p { font-size: 12px; }.admin-device[data-viewport="mobile"] .refresh-button { display: none; }.admin-device[data-viewport="mobile"] .admin-stats { grid-template-columns: 1fr 1fr; }.admin-device[data-viewport="mobile"] .admin-stats article { min-height: 80px; padding: 13px; }.admin-device[data-viewport="mobile"] .admin-stats article:last-child { grid-column: 1/-1; }.admin-device[data-viewport="mobile"] .live-card { padding: 16px; }.admin-device[data-viewport="mobile"] .live-grid { grid-template-columns: 1fr 1fr; }.admin-device[data-viewport="mobile"] .live-grid>div { min-height: 92px; }.admin-device[data-viewport="mobile"] .live-grid>div:nth-child(2) { border-right: 0; }.admin-device[data-viewport="mobile"] .live-grid>div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.admin-device[data-viewport="mobile"] .danger-zone { align-items: stretch; flex-direction: column; }.admin-device[data-viewport="mobile"] .danger-button { width: 100%; }.admin-device[data-viewport="mobile"] .admin-bottom-nav { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; min-height: 68px; padding: 6px 10px; border-top: 1px solid var(--line); background: rgba(14,16,24,.96); display: grid; grid-template-columns: repeat(3,1fr); }.admin-device[data-viewport="mobile"] .admin-bottom-nav button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; font-size: 9px; }.admin-device[data-viewport="mobile"] .admin-bottom-nav button span { font-size: 18px; }.admin-device[data-viewport="mobile"] .admin-bottom-nav button.is-active { color: var(--gold); }.admin-device[data-viewport="mobile"] .table-toolbar { align-items: stretch; flex-direction: column; }.admin-device[data-viewport="mobile"] .responsive-table table { min-width: 690px; }.admin-device[data-viewport="mobile"] .fleet-grid { grid-template-columns: 1fr; }.admin-device[data-viewport="mobile"] .fleet-picture { min-height: 145px; }
}

@media (max-width: 760px) {
  .machine-health { grid-template-columns: 1fr 1fr; }
  .admin-bottom-nav { grid-template-columns: repeat(4,1fr); }
  .fleet-grid,.queue-layout,.support-layout,.tariff-layout { grid-template-columns: 1fr; }
  .incident-card { grid-template-columns: auto 1fr; }
  .incident-card>.incident-actions,.incident-card>.secondary-button { grid-column: 1/-1; }
  .incident-actions { grid-template-columns: 1fr 1fr; }
  .queue-list article { grid-template-columns: 22px 38px 1fr 28px; }
  .queue-list article>.status { display: none; }
  .ticket-list { max-height: 220px; overflow: auto; }
  .save-bar { align-items: stretch; flex-direction: column; }
  .timeline article { grid-template-columns: 37px 1fr; }
  .timeline time { grid-column: 2; }
}

@media (min-width: 761px) {
  .admin-device[data-viewport="mobile"] .machine-health { grid-template-columns: 1fr 1fr; }
  .admin-device[data-viewport="mobile"] .admin-bottom-nav { grid-template-columns: repeat(4,1fr); }
  .admin-device[data-viewport="mobile"] .fleet-grid,
  .admin-device[data-viewport="mobile"] .queue-layout,
  .admin-device[data-viewport="mobile"] .support-layout,
  .admin-device[data-viewport="mobile"] .tariff-layout { grid-template-columns: 1fr; }
  .admin-device[data-viewport="mobile"] .incident-card { grid-template-columns: auto 1fr; }
  .admin-device[data-viewport="mobile"] .incident-card>.incident-actions,
  .admin-device[data-viewport="mobile"] .incident-card>.secondary-button { grid-column: 1/-1; }
  .admin-device[data-viewport="mobile"] .incident-actions { grid-template-columns: 1fr 1fr; }
  .admin-device[data-viewport="mobile"] .queue-list article { grid-template-columns: 22px 38px 1fr 28px; }
  .admin-device[data-viewport="mobile"] .queue-list article>.status { display: none; }
  .admin-device[data-viewport="mobile"] .ticket-list { max-height: 210px; overflow: auto; }
  .admin-device[data-viewport="mobile"] .save-bar { align-items: stretch; flex-direction: column; }
  .admin-device[data-viewport="mobile"] .timeline article { grid-template-columns: 37px 1fr; }
  .admin-device[data-viewport="mobile"] .timeline time { grid-column: 2; }
}



html,body{width:100%;height:100%;margin:0;background:#08090f;color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}button,input,select,textarea{font:inherit}.admin-labbar{display:none}.admin-stage{height:100vh;padding:0}.admin-device{width:100vw;height:100vh;min-height:0;border:0;border-radius:0}.loading-state,.empty-state{padding:28px;color:var(--muted);text-align:center}.error-state{color:var(--red)}.hidden{display:none!important}.toast{position:fixed;z-index:100;left:50%;bottom:25px;padding:12px 17px;border:1px solid var(--line);border-radius:12px;background:#171a25;color:var(--text);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.2s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.admin-login{min-height:100vh;display:grid;place-items:center;padding:20px}.admin-login__card{width:min(420px,100%);padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.admin-login__card h1{margin:0 0 8px}.admin-login__card p{color:var(--muted)}.admin-login__card a{display:block;padding:13px;border-radius:12px;background:var(--gold);color:#17130a;font-weight:850;text-align:center;text-decoration:none}.car-image{width:100%;height:100%;object-fit:cover}.form-stack textarea{min-height:90px;resize:vertical;padding:11px 12px;border:1px solid var(--line);border-radius:11px;outline:0;background:var(--surface-2);color:var(--text)}.ticket-empty{grid-column:1/-1}.action-message{margin-top:8px;color:var(--muted);font-size:11px}