@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 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;
}
:root {
  font-family: Manrope, system-ui, sans-serif;
  color: #f3f6fb;
  background: #080c12;
  color-scheme: dark;
  font-synthesis: none;
  --ink: #f3f6fb;
  --muted: #8997aa;
  --accent: #8aafff;
  --orange: #ff9b5e;
  --paper: #0b1018;
  --surface: #141c28;
  --surface-2: #1b2533;
  --line: #283342;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden, .icon-defs { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace { min-height: 100vh; display: flex; justify-content: center; align-items: stretch; gap: clamp(40px, 6vw, 112px); background: radial-gradient(ellipse at 25% 40%, #14243a 0%, #080c12 50%); }
.desktop-note { width: min(38vw, 520px); position: relative; padding: 50px 0; display: flex; flex-direction: column; justify-content: space-between; }
.note-brand { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; letter-spacing: .18em; }
.note-logo { width: 42px; height: 42px; border-radius: 50%; position: relative; overflow: hidden; background: #203249; border: 1px solid #384d66; }
.note-logo img { position: absolute; width: 94px; height: 94px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -39%); }
.note-content { padding-bottom: 30px; }
.eyebrow, .page-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.desktop-note h1 { font-size: clamp(40px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.065em; margin: 22px 0; }
.desktop-note em { color: var(--accent); font-style: normal; }
.desktop-note p { color: #a2aec0; line-height: 1.7; font-size: 17px; max-width: 470px; }
.note-bottom { color: #738197; font-size: 12px; }
.app-shell { width: min(100%, 430px); min-height: 100vh; max-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--paper); box-shadow: 0 30px 90px #0009; }
.topbar { min-height: 81px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #202c3b; }
.brand { padding: 0; border: 0; background: none; color: var(--ink); display: flex; align-items: center; gap: 11px; text-align: left; }
.brand-avatar, .chat-avatar, .consent-logo { position: relative; display: block; overflow: hidden; border-radius: 50%; background: #25374c; border: 1px solid #425670; }
.brand-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 3px #31466355; }
.brand-avatar img { position: absolute; width: 96px; height: 96px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -39%); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.12; }
.brand-copy strong { font-size: 17px; letter-spacing: -.04em; }
.brand-copy small { margin-top: 4px; font-size: 9px; font-weight: 700; color: #8998aa; }
.status { display: flex; align-items: center; gap: 7px; color: #b4c7d7; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #58d6a4; box-shadow: 0 0 0 4px #58d6a425; }
.banner { padding: 8px 20px; background: #2d251c; color: #e9b87c; text-align: center; font-size: 10px; font-weight: 700; }
.screen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #394454 transparent; padding: 22px 20px 32px; }
.loading { padding: 50px 0; color: var(--muted); text-align: center; }
.bottom-nav { flex: none; height: calc(70px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); background: #101720; border-top: 1px solid #263342; }
.nav-item { border: 0; background: none; color: #74849a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 10px; font-weight: 800; }
.nav-item .icon { width: 21px; height: 21px; }
.nav-item.active { color: #a9c4ff; background: linear-gradient(#293f6435, transparent 80%); }
.location-line { display: flex; align-items: center; justify-content: space-between; color: #8d9aad; font-size: 10px; font-weight: 700; margin: 0 2px 13px; }
.location-line span:first-child { display: inline-flex; align-items: center; gap: 5px; color: #c4d2e0; }
.location-line .icon { width: 14px; height: 14px; color: var(--accent); }
.car-chip { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px; border: 1px solid #30435a; border-radius: 16px; color: var(--ink); background: linear-gradient(135deg, #1b2a3e, #141d2a); margin-bottom: 17px; }
.car-icon { width: 37px; height: 37px; display: grid; place-items: center; color: #b5cdff; background: #2d4160; border-radius: 11px; }
.car-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.car-copy strong { font-size: 12px; }
.car-copy small { color: #8da0b4; font-size: 10px; }
.car-chip > .icon { width: 17px; color: #71839c; }
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 95% -10%, #4774bc62, transparent 50%), linear-gradient(145deg, #1b2e4b, #152238 70%, #111a2a); border: 1px solid #39547b; border-radius: 24px; padding: 22px; box-shadow: 0 18px 35px #0004; }
.hero:after { content: ""; position: absolute; right: -73px; top: -100px; width: 250px; height: 250px; border: 1px solid #a9c6ff18; border-radius: 50%; box-shadow: 0 0 0 40px #a9c6ff08, 0 0 0 80px #a9c6ff05; pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: #b8cfff; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.hero-pulse { width: 7px; height: 7px; border-radius: 50%; background: #66dab0; box-shadow: 0 0 0 4px #66dab023; }
.hero h1 { margin: 16px 0 9px; font-size: 29px; line-height: 1.14; letter-spacing: -.06em; }
.hero p { max-width: 295px; margin: 0 0 20px; color: #b4c4dd; font-size: 11px; line-height: 1.65; }
.ask-box { display: flex; gap: 5px; align-items: center; padding: 5px; border: 1px solid #56709b; border-radius: 14px; background: #e9effa; }
.ask-box input { min-width: 0; flex: 1; border: 0; outline: none; background: none; padding: 9px 8px; color: #1b2b41; font-size: 12px; }
.ask-box input::placeholder { color: #718198; }
.ask-box button { width: 37px; height: 37px; border: 0; border-radius: 10px; display: grid; place-items: center; color: #101b2d; background: #ff9b5e; }
.hero-tools { display: flex; gap: 7px; margin-top: 12px; }
.hero-tools button { display: flex; align-items: center; gap: 6px; border: 1px solid #54709788; border-radius: 10px; background: #a5c7ff12; color: #d6e4fa; padding: 8px 10px; font-size: 10px; font-weight: 800; }
.hero-tools .icon { width: 15px; height: 15px; }
.section-heading { margin: 24px 2px 12px; display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.035em; }
.section-heading button { display: inline-flex; align-items: center; gap: 5px; border: 0; color: var(--accent); background: none; font-size: 10px; font-weight: 800; }
.section-heading button .icon { width: 14px; height: 14px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-card { position: relative; min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; border: 1px solid #334252; border-radius: 17px; background: #17212e; color: var(--ink); padding: 14px; }
.quick-icon, .row-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; }
.quick-card.red .quick-icon { color: #ff9385; background: #6e343a44; }
.quick-card.orange .quick-icon { color: #ffbd81; background: #75512f55; }
.quick-icon .icon { width: 18px; height: 18px; }
.quick-card strong, .quick-card small { display: block; }
.quick-card strong { font-size: 12px; }
.quick-card small { margin-top: 3px; color: #8596aa; font-size: 10px; }
.quick-card > .icon { position: absolute; right: 13px; top: 17px; width: 16px; height: 16px; color: #71859a; }
.mini-list { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: #141d29; }
.mini-row { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); }
.mini-row:last-child { border-bottom: 0; }
.row-icon { color: #a6c1f3; background: #25374e; }
.row-icon .icon { width: 18px; height: 18px; }
.row-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.row-copy strong { font-size: 11px; }
.row-copy small { color: #8495a9; font-size: 10px; }
.mini-row > .icon, .map-teaser > .icon { width: 16px; height: 16px; color: #74869c; }
.map-teaser { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #375c67; border-radius: 17px; text-align: left; color: var(--ink); background: linear-gradient(110deg, #19383d, #172631); }
.map-teaser-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #8de0c2; background: #28504f; border-radius: 11px; }
.map-teaser strong { font-size: 11px; }
.map-teaser small { display: block; color: #8badb3; font-size: 10px; margin-top: 3px; }
.map-teaser > .icon { margin-left: auto; }
.page-eyebrow { margin: 1px 0 8px; }
.page-title { margin: 0 0 7px; font-size: 27px; line-height: 1.2; letter-spacing: -.05em; }
.page-subtitle { margin: 0 0 22px; color: #8e9db0; font-size: 12px; line-height: 1.65; }
.page-subtitle strong { color: #d8e4f2; }
.card { background: #141d29; border: 1px solid #2e3d4e; border-radius: 19px; padding: 19px; }
.field { display: block; margin-bottom: 17px; }
.field span { display: block; margin-bottom: 7px; color: #a5b4c5; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 12px; color: var(--ink); background: #0e1621; border: 1px solid #354455; border-radius: 11px; outline: none; font-size: 12px; }
.field input::placeholder { color: #5e6d80; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.primary { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 0; border-radius: 11px; padding: 11px 16px; background: #8aafff; color: #0a182b; font-size: 11px; font-weight: 800; text-decoration: none; }
.primary .icon { width: 16px; height: 16px; }
.primary:disabled { opacity: .5; cursor: wait; }
.garage-form .primary, #garage-form .primary { width: 100%; }
.muted-note { color: #78899d; font-size: 10px; line-height: 1.6; margin-top: 17px; }
.notice { padding: 12px; margin: 10px 0; color: #edd1a1; background: #382c20; border: 1px solid #634932; border-radius: 11px; font-size: 11px; line-height: 1.5; }
.notice.error { color: #ffc4ba; background: #3b2528; border-color: #704147; }
.notice.success { color: #a6e9d0; background: #1c3834; border-color: #315f55; }
.consent-screen { text-align: center; padding: 15px 0; }
.consent-logo { width: 68px; height: 68px; margin: 5px auto 22px; }
.consent-logo img { position: absolute; width: 150px; height: 150px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -39%); }
.consent-screen .page-title { margin-top: 12px; }
.consent-screen p { color: #93a3b6; font-size: 11px; line-height: 1.65; }
.consent-screen .primary { width: 100%; margin-top: 14px; }
.consent-points { margin: 19px 0; display: grid; gap: 7px; text-align: left; }
.consent-points div { display: flex; align-items: center; gap: 8px; padding: 10px; color: #b8c7d8; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 10px; line-height: 1.5; }
.consent-points .icon { width: 15px; height: 15px; color: #82d7b8; }
.privacy-details { text-align: left; color: #9cabbc; background: #151f2d; border: 1px solid var(--line); border-radius: 11px; padding: 11px; font-size: 10px; }
.privacy-details summary { color: var(--accent); cursor: pointer; font-weight: 800; }
.chat-list { min-height: 170px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.screen-chat { display: flex; flex-direction: column; }
.screen-chat .chat-list { flex: 1; }
.bubble { max-width: 94%; padding: 13px; border-radius: 16px; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: #2a4470; border: 1px solid #4e6da1; border-bottom-right-radius: 5px; }
.bubble.assistant { align-self: flex-start; background: #192431; border: 1px solid #344355; border-bottom-left-radius: 5px; }
.bubble-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #a9c4ff; font-weight: 800; }
.bubble.user .bubble-head { color: #d7e5ff; }
.chat-avatar { width: 23px; height: 23px; }
.chat-avatar img { position: absolute; width: 51px; height: 51px; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -39%); }
.bubble-image { max-width: 100%; margin-top: 10px; border-radius: 10px; }
.reply-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.reply-buttons button, .reply-buttons a { padding: 7px 9px; color: #b8d0ff; background: #263a56; border: 1px solid #425a7d; border-radius: 9px; font-size: 10px; font-weight: 800; text-decoration: none; }
.chat-composer { position: sticky; bottom: -32px; display: flex; gap: 7px; align-items: center; padding: 18px 0 10px; background: linear-gradient(transparent, var(--paper) 20%); }
.chat-composer textarea { flex: 1; min-width: 0; min-height: 45px; max-height: 90px; resize: none; padding: 11px; border: 1px solid #34475f; border-radius: 11px; color: var(--ink); background: #172334; outline: none; font-size: 11px; }
.chat-composer button { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border: 0; border-radius: 11px; background: var(--accent); color: #11223c; }
.chat-composer .attach { background: #26384e; color: #b4c9e3; }
.map-frame { position: relative; height: 370px; overflow: hidden; border-radius: 18px; background: #1c2a36; border: 1px solid #38516a; }
.map-loading { display: grid; place-items: center; height: 100%; color: #9baabe; font-size: 11px; }
.yandex-map { width: 100%; height: 100%; display: block; border: 0; }
.map-actions { margin-top: 13px; }
.map-actions .primary { width: 100%; }
.map-guidance { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px; border: 1px solid #334251; border-radius: 13px; color: #94a7ba; background: #17212e; }
.map-guidance-icon { color: #e1ae77; }
.map-guidance-icon .icon { width: 17px; height: 17px; }
.map-guidance p { margin: 0; font-size: 10px; line-height: 1.6; }
@media (max-width: 820px) { .desktop-note { display: none; } .workspace { display: block; } .app-shell { width: 100%; box-shadow: none; } }
@media (min-width: 821px) { .app-shell { min-height: calc(100vh - 36px); max-height: calc(100vh - 36px); margin: 18px 0; border: 1px solid #344151; border-radius: 30px; } }
@media (max-width: 360px) { .screen { padding-left: 15px; padding-right: 15px; } .hero h1 { font-size: 27px; } .topbar { padding-left: 16px; padding-right: 16px; } }