/*
  КОМПАС — навигационное досье.

  Светлая бумага отвечает за спокойствие, глубокий синий — за доверие,
  оранжевый отмечает контрольные точки. Штамп срока остаётся фирменным
  жестом продукта: он появляется только там, где время действительно важно.
*/

:root {
  --canvas: #ECE8DF;
  --paper: #FBF9F4;
  --paper-soft: #F5F1E8;
  --navy: #173B57;
  --navy-deep: #102C40;
  --blue: #2E6380;
  --sky: #DCE9EE;
  --orange: #F06B42;
  --orange-soft: #F8D8CB;
  --ink: #1A262D;
  --ink-soft: #5E6D73;
  --ink-faint: #8B969A;
  --rule: #D9D5CB;
  --late: #A93832;
  --late-wash: #F4DAD5;
  --soon: #A15A11;
  --closed: #42725B;
  --closed-soft: #DDE9E1;
  --shadow: 0 22px 70px rgba(29, 43, 52, .10);
  --shadow-small: 0 8px 28px rgba(29, 43, 52, .08);
  --sans: "Golos Text", system-ui, sans-serif;
  --display: "Onest", "Golos Text", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --page: min(1160px, calc(100vw - 48px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 5%, rgba(240, 107, 66, .11), transparent 26rem),
    linear-gradient(180deg, #F2EFE8 0, var(--canvas) 100%);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(23, 59, 87, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 59, 87, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app { width: var(--page); margin: 0 auto; }

.boot {
  padding: 42vh 0;
  color: var(--ink-soft);
  font: 500 14px/1 var(--mono);
  letter-spacing: .04em;
  text-align: center;
}

/* ─── Бренд ───────────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; min-width: 0; }

.brand__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-right: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 3px var(--paper);
}

.brand__mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 27% 50%;
  transform: scale(1.45);
}

.brand__sign {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-right: 11px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: inset 0 0 0 4px var(--paper);
}

.brand__sign::before,
.brand__sign::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: rgba(255, 255, 255, .5);
  transform: translate(-50%, -50%);
}
.brand__sign::before { width: 1px; height: 20px; }
.brand__sign::after { width: 20px; height: 1px; }

.brand__sign i {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 13px;
  width: 8px;
  height: 19px;
  background: linear-gradient(180deg, var(--orange) 0 50%, var(--paper) 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: rotate(27deg);
}

.brand__name {
  color: var(--navy);
  font: 700 15px/1 var(--display);
  letter-spacing: .16em;
}

.brand__descriptor,
.brand__route {
  min-width: 0;
  margin-left: 14px;
  padding-left: 14px;
  overflow: hidden;
  border-left: 1px solid var(--rule);
  color: var(--ink-faint);
  font: 500 11px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Выбор маршрута: кинетический радар ─────────────────────────────── */

#app:has(.route-radar) {
  width: 100%;
  max-width: none;
}

.route-radar {
  --radar-ink: #f5f8fb;
  --radar-muted: #8ca7ba;
  --radar-line: rgba(132, 179, 211, .2);
  width: 100%;
  height: 100dvh;
  min-height: 680px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 24px clamp(20px, 3vw, 52px) 18px;
  overflow: hidden;
  background: #031225;
  color: var(--radar-ink);
  isolation: isolate;
}

.radar-brand {
  position: relative;
  z-index: 4;
  height: 44px;
}

.radar-brand .brand__mark {
  border-color: rgba(255, 255, 255, .36);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .04), 0 0 28px rgba(64, 143, 202, .24);
}

.radar-brand .brand__name { color: white; }
.radar-brand .brand__descriptor {
  border-color: rgba(255, 255, 255, .18);
  color: #718ba0;
}

.radar-shell {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(310px, 27vw, 420px);
  margin-top: 14px;
  border-top: 1px solid var(--radar-line);
  border-bottom: 1px solid var(--radar-line);
}

.radar-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--radar-line);
  background: #06172c;
}

.radar-stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 64%, rgba(3, 18, 37, .28) 86%, rgba(3, 18, 37, .58) 100%);
}

.radar-stage__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.04);
}

.radar-stage__heading {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vh, 48px);
  left: clamp(22px, 3.2vw, 52px);
  display: none;
  pointer-events: none;
}

.radar-stage__heading p,
.radar-detail__eyebrow,
.radar-detail__route-type,
.radar-detail__facts dt,
.radar-footer,
.radar-hint {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.radar-stage__heading p {
  margin-bottom: 10px;
  color: #69a4c9;
}

.radar-stage__heading h1 {
  max-width: 360px;
  color: white;
  font: 600 clamp(34px, 4.2vw, 62px)/.94 var(--display);
  letter-spacing: -.055em;
}

.radar-routes {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.radar-route {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: min(205px, 21vw);
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(3, 18, 37, .34);
  color: #a9bcc9;
  cursor: pointer;
  text-align: left;
  transform: translate(-50%, -50%);
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
  backdrop-filter: blur(5px);
}

.radar-route:hover,
.radar-route:focus-visible {
  color: white;
  border-color: rgba(120, 181, 219, .5);
  background: rgba(9, 37, 65, .82);
  outline: none;
}

.radar-route:focus-visible { box-shadow: 0 0 0 3px rgba(73, 157, 211, .28); }

.radar-route.is-selected {
  color: white;
  border-color: rgba(255, 117, 55, .72);
  background: rgba(9, 30, 51, .92);
  box-shadow: 0 13px 36px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .04);
  transform: translate(-50%, -50%) scale(1.06);
}

.radar-route__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border: 2px solid #7897aa;
  border-radius: 50%;
  background: #071b31;
  box-shadow: 0 0 0 4px rgba(77, 129, 163, .1);
}

.radar-route.is-selected .radar-route__dot {
  border-color: #ff8955;
  background: #ff6338;
  box-shadow: 0 0 0 5px rgba(255, 99, 56, .16), 0 0 20px rgba(255, 99, 56, .65);
  animation: radar-pulse 2.4s ease-in-out infinite;
}

.radar-route__copy { min-width: 0; display: grid; gap: 3px; }
.radar-route strong {
  overflow: hidden;
  font: 600 13px/1.2 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radar-route small {
  color: #6f8da2;
  font: 500 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.radar-route.is-selected small { color: #d78664; }

.radar-route[data-orbit="0"] { --x: 50%; --y: 10%; }
.radar-route[data-orbit="1"] { --x: 67%; --y: 24%; }
.radar-route[data-orbit="2"] { --x: 72%; --y: 44%; }
.radar-route[data-orbit="3"] { --x: 69%; --y: 66%; }
.radar-route[data-orbit="4"] { --x: 53%; --y: 83%; }
.radar-route[data-orbit="5"] { --x: 31%; --y: 87%; }
.radar-route[data-orbit="6"] { --x: 12%; --y: 69%; }
.radar-route[data-orbit="7"] { --x: 12%; --y: 39%; }

.radar-hint {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 3.2vw, 52px);
  bottom: 24px;
  display: flex;
  gap: 8px;
  color: #5f8299;
}

.radar-detail {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 3vw, 46px) 30px;
  background:
    radial-gradient(circle at 100% 25%, rgba(21, 72, 111, .24), transparent 55%),
    rgba(2, 15, 31, .92);
}

.radar-detail__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--radar-line);
}

.radar-detail__eyebrow {
  max-width: 245px;
  color: white;
  font: 600 clamp(28px, 2.8vw, 42px)/.96 var(--display);
  letter-spacing: -.055em;
  text-transform: none;
}
.radar-detail__index { color: #536e82; font: 500 10px/1 var(--mono); letter-spacing: .12em; }

.radar-detail__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 34px 0;
}

.radar-detail__route-type { margin-bottom: 15px; color: #ff7247; }
.radar-detail h2 {
  color: white;
  font: 600 clamp(25px, 2.5vw, 34px)/1.05 var(--display);
  letter-spacing: -.04em;
}

.radar-detail__description {
  margin-top: 22px;
  color: #9aafbe;
  font-size: 14px;
  line-height: 1.65;
}

.radar-detail__facts {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--radar-line);
}

.radar-detail__facts div { min-width: 0; }
.radar-detail__facts dt { margin-bottom: 7px; color: #58768b; }
.radar-detail__facts dd { color: #dce7ee; font: 500 12px/1.35 var(--sans); }
.radar-detail__steps dd { display: flex; align-items: flex-end; gap: 9px; }
.radar-detail__steps strong {
  color: white;
  font: 500 46px/.8 var(--display);
  letter-spacing: -.06em;
}
.radar-detail__steps span { max-width: 74px; color: #8da6b7; font: 500 9px/1.25 var(--mono); text-transform: uppercase; }

.radar-start {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  border-radius: 2px;
  background: #f45f34;
  color: white;
  cursor: pointer;
  font: 700 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 18px 45px rgba(244, 95, 52, .2);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.radar-start:hover { background: #ff7046; transform: translateY(-2px); box-shadow: 0 22px 52px rgba(244, 95, 52, .3); }
.radar-start:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 3px; }
.radar-start:disabled { cursor: progress; opacity: .68; }
.radar-start.is-loading span:first-child::after { content: "…"; }

.radar-detail__note {
  margin-top: 14px;
  color: #536f82;
  font: 500 10px/1.5 var(--mono);
}

.radar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  padding-top: 12px;
  color: #456479;
  letter-spacing: .08em;
}

.radar-footer span:not(:first-child)::before { margin-right: 20px; color: #ff7247; content: "·"; }

@keyframes radar-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(255, 99, 56, .13), 0 0 18px rgba(255, 99, 56, .55); }
  50% { box-shadow: 0 0 0 9px rgba(255, 99, 56, 0), 0 0 28px rgba(255, 99, 56, .85); }
}

@media (max-width: 980px) {
  .route-radar { height: auto; min-height: 100dvh; overflow: visible; padding-inline: 18px; }
  .radar-shell { grid-template-columns: 1fr; }
  .radar-stage { min-height: 570px; border-right: 0; border-bottom: 1px solid var(--radar-line); }
  .radar-stage::after { background: linear-gradient(180deg, transparent 45%, rgba(3, 18, 37, .9) 100%); }
  .radar-stage__art { object-position: 30% center; }
  .radar-stage__heading { display: block; }
  .radar-routes {
    inset: auto 0 0;
    display: flex;
    gap: 9px;
    padding: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .radar-routes::-webkit-scrollbar { display: none; }
  .radar-route,
  .radar-route[data-orbit] {
    position: relative;
    top: auto;
    left: auto;
    width: 190px;
    flex: 0 0 190px;
    min-height: 62px;
    transform: none;
    background: rgba(3, 18, 37, .8);
  }
  .radar-route.is-selected { transform: translateY(-3px); }
  .radar-hint { display: none; }
  .radar-detail { min-height: 520px; }
  .radar-detail__body { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .route-radar { padding: 14px 12px 10px; }
  .radar-brand { height: 42px; }
  .radar-brand .brand__descriptor { display: none; }
  .radar-shell { margin-top: 9px; }
  .radar-stage { min-height: 465px; }
  .radar-stage__art { object-position: 27% center; opacity: .82; }
  .radar-stage__heading { top: 24px; left: 20px; }
  .radar-stage__heading h1 { font-size: clamp(38px, 12vw, 52px); }
  .radar-routes { padding: 14px 12px; }
  .radar-route,
  .radar-route[data-orbit] { width: 172px; flex-basis: 172px; }
  .radar-detail { min-height: auto; padding: 28px 20px 24px; }
  .radar-detail__body { padding: 30px 0; }
  .radar-detail__eyebrow { font-size: 34px; }
  .radar-detail h2 { font-size: 30px; }
  .radar-detail__facts { grid-template-columns: 1fr; }
  .radar-footer { flex-wrap: wrap; justify-content: flex-start; padding: 16px 4px 6px; }
  .radar-footer span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-route,
  .radar-start { transition: none; }
  .radar-route.is-selected .radar-route__dot { animation: none; }
}

/* ─── Онбординг ───────────────────────────────────────────────────────── */

.ask {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0;
}

.ask__brand { margin-bottom: 24px; }

.ask__layout {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
  min-height: min(650px, 76vh);
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.ask__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 64px);
  background: var(--navy);
  color: white;
}

.ask__intro::before {
  position: absolute;
  right: -110px;
  bottom: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(255, 255, 255, .035),
    0 0 0 96px rgba(255, 255, 255, .025);
  content: "";
}

.ask__intro::after {
  position: absolute;
  right: 52px;
  bottom: 37px;
  width: 22px;
  height: 60px;
  background: linear-gradient(180deg, var(--orange) 0 50%, white 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  content: "";
  transform: rotate(27deg);
}

.ask__kicker {
  position: relative;
  z-index: 1;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .62;
}

.ask__promise {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  margin: auto 0;
  font: 600 clamp(30px, 3.4vw, 48px)/1.04 var(--display);
  letter-spacing: -.04em;
}

.ask__path { position: relative; z-index: 1; display: flex; align-items: center; }
.ask__path::before {
  position: absolute;
  right: 6px;
  left: 6px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  content: "";
}
.ask__path span {
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-right: 28%;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}
.ask__path span:last-child { margin-left: auto; margin-right: 0; background: white; }

.ask__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 84px);
}

.ask__back {
  position: absolute;
  top: clamp(24px, 4vw, 42px);
  left: clamp(34px, 6vw, 84px);
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font: 500 11px/1 var(--mono);
  transition: color .16s, border-color .16s;
}
.ask__back:hover { border-color: var(--orange); color: var(--navy); }
.ask__back:focus-visible { border-radius: 4px; outline: 3px solid var(--orange-soft); outline-offset: 3px; }

.ask__eyebrow {
  margin-bottom: 20px;
  color: var(--orange);
  font: 600 11px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ask__q {
  max-width: 18ch;
  color: var(--navy-deep);
  font: 600 clamp(30px, 4vw, 52px)/1.05 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.ask__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 38px;
}

.ask__note {
  max-width: 56ch;
  min-height: 1.4em;
  margin-top: 20px;
  color: var(--ink-faint);
  font-size: 13px;
}

.ask__privacy {
  align-self: center;
  margin-top: 18px;
  color: var(--ink-faint);
  font: 400 10px/1.2 var(--mono);
  letter-spacing: .02em;
}

.choice {
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 46px 14px 17px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: 600 15px/1.25 var(--sans);
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.choice::after {
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--orange);
  content: "→";
  font-size: 20px;
  transform: translateY(-52%);
  transition: transform .18s;
}
.choice:hover { border-color: var(--blue); box-shadow: var(--shadow-small); transform: translateY(-2px); }
.choice:hover::after { transform: translate(3px, -52%); }
.choice:active { transform: translateY(0); }
.choice:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 2px; }

.choice__note { color: var(--ink-faint); font: 400 10px/1.25 var(--mono); }

.field {
  grid-column: 1 / -1;
  min-height: 60px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: white;
  color: var(--navy-deep);
  font: 500 18px/1.2 var(--mono);
}
.field:focus-visible { border-color: var(--blue); outline: 3px solid var(--sky); }

/* ─── Шапка и каркас ──────────────────────────────────────────────────── */

.masthead {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 59, 87, .12);
}

.masthead__account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px 10px 16px;
  border: 1px solid rgba(23, 59, 87, .18);
  border-radius: 999px;
  background: rgba(251, 249, 244, .65);
  color: var(--navy);
  cursor: pointer;
  font: 600 12px/1 var(--sans);
  transition: background .16s, border-color .16s;
}
.masthead__account i { color: var(--orange); font-style: normal; font-size: 15px; }
.masthead__account:hover { border-color: var(--navy); background: var(--paper); }
.masthead__account:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 2px; }

.dashboard { padding: 38px 0 64px; }

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 16px;
  margin-bottom: 42px;
}
.overview:has(.alerts:empty) { grid-template-columns: 1fr; }
.alerts:empty { display: none; }

/* ─── Состояние маршрута ──────────────────────────────────────────────── */

.gauge__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px 28px;
  min-height: 236px;
  padding: clamp(26px, 4vw, 44px);
  overflow: hidden;
  border-radius: 19px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.11), transparent 13rem),
    var(--navy);
  box-shadow: var(--shadow-small);
  color: white;
}

.gauge__inner--risk {
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.09), transparent 13rem),
    #71322F;
}

.gauge__copy { display: flex; flex-direction: column; }
.gauge__eyebrow {
  margin-bottom: 13px;
  color: rgba(255,255,255,.55);
  font: 500 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gauge__state {
  max-width: 12ch;
  font: 600 clamp(30px, 4vw, 50px)/1 var(--display);
  letter-spacing: -.045em;
}
.gauge__route { margin-top: 12px; color: rgba(255,255,255,.62); font-size: 13px; }

.gauge__dial {
  position: relative;
  width: 118px;
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 118px;
  border-radius: 50%;
  background: conic-gradient(var(--orange) var(--progress), rgba(255,255,255,.14) 0);
}
.gauge__dial::before {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--navy);
  content: "";
}
.gauge__inner--risk .gauge__dial::before { background: #71322F; }
.gauge__percent, .gauge__count { position: relative; z-index: 1; }
.gauge__percent { font: 600 25px/1 var(--display); letter-spacing: -.03em; }
.gauge__count { margin-top: 5px; color: rgba(255,255,255,.55); font: 400 10px/1 var(--mono); }

.gauge__bar {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.15);
}
.gauge__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--orange);
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
}

.gauge__foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.52);
  font: 400 10px/1.35 var(--mono);
}
.gauge__foot span:last-child { color: white; text-align: right; }

/* ─── План ────────────────────────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(320px, .64fr);
  align-items: start;
  gap: clamp(36px, 6vw, 78px);
}

.plan-grid__side { display: grid; gap: 34px; padding-top: 4px; }
.block { min-width: 0; }

.block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.block__head--compact {
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.block__eyebrow {
  margin-bottom: 7px;
  color: var(--orange);
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.block__title {
  color: var(--navy-deep);
  font: 600 clamp(28px, 3.3vw, 43px)/1.05 var(--display);
  letter-spacing: -.04em;
}

.block__label {
  color: var(--navy);
  font: 600 12px/1.15 var(--display);
  letter-spacing: -.01em;
}

.block__count {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(251,249,244,.6);
  color: var(--ink-soft);
  font: 500 10px/1 var(--mono);
}

.cards, .rows { list-style: none; }
.cards { display: grid; gap: 12px; }

.card {
  position: relative;
  width: 100%;
  display: block;
  padding: 23px 26px 20px 30px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(23,59,87,.03);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--sky);
  content: "";
}
.card:hover { border-color: rgba(23,59,87,.35); box-shadow: var(--shadow-small); transform: translateY(-2px); }
.card:hover::before { background: var(--orange); }
.card:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 2px; }
.card--late { border-color: rgba(169,56,50,.45); background: #FBF3EF; }
.card--late::before { background: var(--late); }

.card__kicker {
  margin-bottom: 9px;
  color: var(--ink-faint);
  font: 600 9px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.card__title {
  max-width: 24ch;
  padding-right: 100px;
  color: var(--navy-deep);
  font: 600 21px/1.2 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.card__why {
  max-width: 62ch;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.48;
}

.card__meta {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font: 400 10px/1.3 var(--mono);
}

.card__open {
  position: absolute;
  right: 24px;
  bottom: 19px;
  color: var(--navy);
  font: 600 11px/1 var(--sans);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s, transform .18s;
}
.card:hover .card__open { opacity: 1; transform: translateX(0); }

.stamp {
  position: absolute;
  top: 21px;
  right: 21px;
  min-width: 82px;
  padding: 6px 7px;
  border: 2px solid currentColor;
  border-radius: 3px;
  font: 600 8px/1.15 var(--mono);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  opacity: .88;
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
}
.stamp--late { color: var(--late); }
.stamp--soon { color: var(--soon); }
.stamp--closed { color: var(--closed); border-style: double; border-width: 4px; }
.stamp b { display: block; margin: 2px 0; font-size: 13px; letter-spacing: 0; }

.rows { border-top: 0; }

.row {
  position: relative;
  width: 100%;
  min-height: 53px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 3px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: padding .16s, color .16s;
}
.row:hover { padding-left: 7px; color: var(--navy); }
.row:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 1px; }
.row__title { font: 500 14px/1.35 var(--sans); }
.row__hint { color: var(--ink-faint); font: 400 9px/1.3 var(--mono); text-align: right; }
.rows--muted .row { color: var(--ink-soft); cursor: default; }
.rows--muted .row:hover { padding-left: 3px; color: var(--ink-soft); }
.rows--done .row__title { color: var(--closed); text-decoration: line-through; text-decoration-color: rgba(66,114,91,.42); }

/* ─── Предупреждения ──────────────────────────────────────────────────── */

.alarm {
  height: 100%;
  padding: 25px;
  border: 1px solid rgba(161,90,17,.25);
  border-radius: 19px;
  background: #F8E8C9;
  color: var(--ink);
}
.alarm + .alarm { margin-top: 12px; }
.alarm__label {
  color: var(--soon);
  font: 600 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.alarm__title { margin: 13px 0 8px; color: var(--navy-deep); font: 600 20px/1.18 var(--display); }
.alarm__text { color: var(--ink-soft); font-size: 13px; line-height: 1.47; }
.alarm__close {
  margin-top: 17px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--navy);
  cursor: pointer;
  font: 600 11px/1.4 var(--sans);
}
.alarm--notice { border-color: rgba(46,99,128,.2); background: var(--sky); }
.alarm__list { display: grid; gap: 6px; margin: 13px 0 0 16px; color: var(--ink-soft); font-size: 13px; }

/* ─── Детальная карточка ──────────────────────────────────────────────── */

.sheet {
  width: min(620px, calc(100% - 24px));
  max-height: min(88dvh, 920px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(10, 28, 40, .63); backdrop-filter: blur(4px); }
.sheet__grip { display: none; }
.sheet__body { max-height: inherit; overflow-y: auto; padding: clamp(28px, 5vw, 48px); }
.sheet h3 {
  max-width: 17ch;
  color: var(--navy-deep);
  font: 600 clamp(27px, 4vw, 38px)/1.08 var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.sheet__section { margin-top: 27px; }
.sheet__label {
  margin-bottom: 8px;
  color: var(--orange);
  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sheet__section p, .sheet__section li { font-size: 14px; line-height: 1.58; }
.sheet__section p + p { margin-top: 8px; }
.sheet__section ol, .sheet__section ul { display: grid; gap: 8px; padding-left: 20px; }
.warn { padding: 14px 16px; border-left: 4px solid var(--late); border-radius: 0 9px 9px 0; background: var(--late-wash); font-size: 14px; }
.sheet__sources { color: var(--ink-faint); font: 400 10px/1.55 var(--mono); }
.sheet__sources p + p { margin-top: 7px; }
.sheet__sources a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sheet__actions { display: flex; gap: 9px; margin-top: 33px; }

.btn {
  min-height: 50px;
  flex: 1;
  padding: 12px 17px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  background: var(--navy);
  color: white;
  cursor: pointer;
  font: 600 13px/1 var(--sans);
}
.btn--ghost { background: transparent; color: var(--navy); }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

.code { margin-top: 12px; padding: 14px; border: 1px dashed var(--blue); border-radius: 10px; background: var(--sky); }
.code__value { color: var(--navy-deep); font: 400 11px/1.5 var(--mono); word-break: break-all; }
.code__copy, .danger {
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  cursor: pointer;
  font: 600 11px/1.4 var(--sans);
}
.code__copy { color: var(--navy); }
.danger { margin-top: 28px; color: var(--late); }

/* ─── Подвал ──────────────────────────────────────────────────────────── */

.colophon {
  min-height: 106px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(23,59,87,.12);
  color: var(--ink-faint);
  font: 400 9px/1.4 var(--mono);
}
.colophon__brand { color: var(--navy); font: 700 11px/1 var(--display); letter-spacing: .14em; }
.colophon span:last-child { text-align: right; }

/* ─── Движение и адаптив ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .card--late .stamp { animation: press .45s cubic-bezier(.2, .9, .3, 1) both; }
  .ask__panel { animation: enter .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes press {
    from { opacity: 0; transform: rotate(-10deg) scale(1.45); }
    to { opacity: .88; transform: rotate(-3deg) scale(1); }
  }
  @keyframes enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  :root { --page: min(100% - 32px, 720px); }
  .ask__layout { grid-template-columns: 1fr; }
  .ask__intro { min-height: 210px; padding: 32px; }
  .ask__promise { margin: 35px 0; max-width: 15ch; font-size: 32px; }
  .ask__path { display: none; }
  .ask__intro::before { width: 270px; height: 270px; }
  .ask__panel { min-height: 410px; padding: 42px 34px; }
  .ask__back { top: 22px; left: 34px; }
  .overview, .plan-grid { grid-template-columns: 1fr; }
  .plan-grid { gap: 45px; }
  .plan-grid__side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 620px) {
  :root { --page: calc(100% - 28px); }
  body::before { background-size: 24px 24px; }
  .ask { padding: 14px 0 24px; justify-content: flex-start; }
  .ask__brand { height: 54px; margin: 0; }
  .brand__descriptor { display: none; }
  .ask__layout { min-height: calc(100dvh - 98px); display: block; border-radius: 16px; }
  .ask__intro { min-height: 150px; padding: 25px; }
  .ask__promise { margin: 24px 0 0; font-size: 27px; }
  .ask__intro::before { right: -80px; bottom: -130px; }
  .ask__intro::after { right: 35px; bottom: 23px; width: 16px; height: 46px; }
  .ask__panel { min-height: auto; padding: 34px 22px 30px; }
  .ask__back { position: static; align-self: flex-start; margin-bottom: 25px; }
  .ask__eyebrow { margin-bottom: 14px; }
  .ask__q { font-size: clamp(28px, 9vw, 38px); }
  .ask__controls { grid-template-columns: 1fr; margin-top: 28px; }
  .choice { min-height: 58px; }
  .ask__privacy { margin-top: 13px; font-size: 8px; }

  .masthead {
    position: sticky;
    z-index: 10;
    top: 0;
    height: 66px;
    margin: 0 -14px;
    padding: 0 14px;
    background: rgba(242,239,232,.88);
    backdrop-filter: blur(14px);
  }
  .brand__route { display: none; }
  .masthead__account { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .masthead__account span { display: none; }
  .dashboard { padding: 20px 0 46px; }
  .overview { margin-bottom: 34px; }
  .gauge__inner { min-height: 218px; padding: 25px 22px; gap: 18px 10px; }
  .gauge__state { font-size: 30px; }
  .gauge__route { max-width: 20ch; font-size: 11px; }
  .gauge__dial { width: 92px; height: 92px; flex-basis: 92px; }
  .gauge__percent { font-size: 20px; }
  .gauge__foot { display: grid; gap: 5px; }
  .gauge__foot span:last-child { text-align: left; }
  .plan-grid { gap: 38px; }
  .plan-grid__side { grid-template-columns: 1fr; gap: 32px; }
  .block__title { font-size: 31px; }
  .card { padding: 21px 19px 18px 23px; }
  .card__title { padding-right: 76px; font-size: 19px; }
  .card__why { font-size: 13px; }
  .card__open { display: none; }
  .stamp { top: 18px; right: 14px; min-width: 69px; padding: 5px; font-size: 7px; }
  .stamp b { font-size: 11px; }
  .card__meta { padding-right: 0; }
  .alarm { padding: 22px; }
  .sheet { width: 100%; max-height: 91dvh; margin: auto auto 0; border-radius: 20px 20px 0 0; }
  .sheet__grip { width: 42px; height: 4px; display: block; margin: 9px auto 0; border-radius: 4px; background: var(--rule); }
  .sheet__body { padding: 24px 20px 34px; }
  .sheet__actions { position: sticky; bottom: -34px; margin-right: -20px; margin-left: -20px; padding: 15px 20px 34px; background: linear-gradient(180deg, rgba(251,249,244,.7), var(--paper) 24%); }
  .colophon { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .colophon span:last-child { text-align: left; }
}

@media (max-width: 370px) {
  .gauge__dial { width: 80px; height: 80px; flex-basis: 80px; }
  .gauge__state { font-size: 27px; }
  .card__title { padding-right: 0; }
  .stamp { position: static; width: max-content; margin: 13px 0 0; transform: rotate(-2deg); }
}

/* ─── Навигационная система v2: продолжение радара ───────────────────── */

html { color-scheme: dark; }
html, body { overflow-x: hidden; }

body:has(.ask),
body:has(.masthead) {
  background: #031225;
  color: #dfe9ef;
}

body:has(.ask)::before,
body:has(.masthead)::before { display: none; }

body:has(.ask) #app { --page: min(1180px, calc(100vw - 48px)); }
body:has(.masthead) #app { --page: min(1260px, calc(100vw - 56px)); }

body:has(.ask) .brand__name,
.masthead .brand__name,
.colophon__brand { color: white; }

body:has(.ask) .brand__descriptor,
.masthead .brand__route {
  border-color: rgba(139, 181, 210, .2);
  color: #67839a;
}

body:has(.ask) .brand__mark,
.masthead .brand__mark {
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .03), 0 0 28px rgba(43, 130, 190, .2);
}

/* Вопросы */

.ask {
  min-height: 100dvh;
  padding: 24px 0 18px;
  justify-content: center;
}

.ask__brand { height: 42px; margin-bottom: 16px; }

.ask__layout {
  min-height: min(680px, calc(100dvh - 142px));
  grid-template-columns: minmax(320px, .86fr) minmax(480px, 1.14fr);
  border: 1px solid rgba(124, 174, 207, .22);
  border-radius: 2px;
  background: #07182c;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .3);
}

.ask__intro {
  padding: clamp(34px, 4.2vw, 62px);
  border-right: 1px solid rgba(124, 174, 207, .22);
  background-color: #041427;
  background-image: url("/static/assets/radar-stage.png");
  background-size: cover;
  background-position: 28% center;
  background-blend-mode: normal;
}

.ask__intro::before,
.ask__intro::after,
.ask__path { display: none; }

.ask__kicker {
  color: #74a8c8;
  opacity: 1;
}

.ask__promise {
  max-width: 10ch;
  color: white;
  font-size: clamp(34px, 3.7vw, 52px);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
}

.ask__panel {
  justify-content: center;
  padding: clamp(50px, 6vw, 88px);
  background: rgba(3, 18, 37, .92);
}

.ask__back {
  top: clamp(25px, 3.4vw, 42px);
  left: clamp(42px, 6vw, 88px);
  padding: 7px 0;
  border-bottom-color: rgba(125, 166, 195, .25);
  color: #7894a7;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ask__back:hover { border-color: #f56a3d; color: white; }
.ask__back:focus-visible { outline-color: rgba(245, 106, 61, .55); }

.ask__eyebrow {
  margin-bottom: 18px;
  color: #f56a3d;
  font-size: 10px;
}

.ask__q {
  max-width: 16ch;
  color: white;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: .99;
}

.ask__controls { gap: 10px; margin-top: 42px; }

.ask__note {
  margin-top: 20px;
  color: #688397;
  font-size: 12px;
}

.ask__privacy {
  margin-top: 13px;
  color: #49677c;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.choice {
  min-height: 66px;
  border-color: rgba(124, 174, 207, .24);
  border-radius: 2px;
  background: #091d33;
  color: #dfe9ef;
  box-shadow: none;
}

.choice::after { display: none; }
.choice:hover {
  border-color: #f56a3d;
  background: #0c2540;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
.choice:focus-visible { outline-color: #f56a3d; }
.choice__note { color: #668297; }

.field {
  min-height: 64px;
  border-color: rgba(124, 174, 207, .32);
  border-radius: 2px;
  background: #06172b;
  color: white;
}
.field:focus-visible { border-color: #58a4d2; outline-color: rgba(88, 164, 210, .22); }

/* План маршрута */

.masthead {
  height: 82px;
  border-color: rgba(124, 174, 207, .2);
}

.masthead__account {
  min-height: 42px;
  padding: 0 18px;
  border-color: rgba(124, 174, 207, .28);
  border-radius: 2px;
  background: #07182c;
  color: #dce7ee;
  font: 600 10px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.masthead__account:hover { border-color: #f56a3d; background: #0b2139; }
.masthead__account:focus-visible { outline-color: #f56a3d; }

.dashboard { padding: 34px 0 72px; }

.overview {
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  gap: 1px;
  margin-bottom: 54px;
  border: 1px solid rgba(124, 174, 207, .2);
  background: rgba(124, 174, 207, .2);
}

.gauge__inner {
  min-height: 272px;
  padding: clamp(30px, 4vw, 50px);
  border-radius: 0;
  background-color: #041427;
  background-image: url("/static/assets/radar-stage.png");
  background-size: 72% auto;
  background-position: right center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  box-shadow: none;
}

.gauge__inner--risk {
  border-left: 4px solid #f56a3d;
  background-color: #1b1822;
}

.gauge__eyebrow { color: #74a8c8; }
.gauge__state { max-width: 14ch; color: white; font-size: clamp(36px, 4vw, 56px); }
.gauge__route { color: #8ca4b4; }

.gauge__dial {
  width: 130px;
  height: 112px;
  flex-basis: 130px;
  border: 1px solid rgba(124, 174, 207, .34);
  border-radius: 2px;
  background: rgba(3, 18, 37, .78);
}
.gauge__dial::before { display: none; }
.gauge__percent { color: white; font-size: 32px; }
.gauge__count { color: #6e899c; }

.gauge__bar {
  height: 2px;
  border-radius: 0;
  background: rgba(124, 174, 207, .19);
}
.gauge__fill { border-radius: 0; background: #f56a3d; }
.gauge__foot { color: #648095; text-transform: uppercase; letter-spacing: .05em; }
.gauge__foot span:last-child { color: #c8d7e1; }

.alerts {
  display: grid;
  gap: 1px;
  background: #07182c;
}

.plan-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, .6fr);
  gap: clamp(40px, 6vw, 82px);
}

.block__head { margin-bottom: 20px; }
.block__head--compact { border-color: rgba(124, 174, 207, .2); }
.block__eyebrow { color: #f56a3d; }
.block__title { color: white; font-size: clamp(32px, 3.4vw, 48px); }
.block__label { color: #dce7ee; font-size: 13px; }

.block__count {
  border-color: rgba(124, 174, 207, .25);
  border-radius: 2px;
  background: #07182c;
  color: #7894a7;
}

.cards { gap: 10px; }

.card {
  padding: 25px 28px 22px 32px;
  border-color: rgba(124, 174, 207, .2);
  border-radius: 2px;
  background: #07182c;
  box-shadow: none;
  color: #dbe6ed;
}
.card::before { width: 3px; background: #315e7c; }
.card:hover {
  border-color: #f56a3d;
  background: #0a2038;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .22);
}
.card:focus-visible { outline-color: #f56a3d; }
.card--late { border-color: rgba(245, 106, 61, .55); background: #171925; }
.card--late::before { background: #f56a3d; }
.card__kicker { color: #69869a; }
.card__title { color: white; }
.card__why { color: #8da5b5; }
.card__meta { border-color: rgba(124, 174, 207, .18); color: #627f93; }
.card__open { color: #f56a3d; }

.stamp { mix-blend-mode: normal; }
.stamp--late { color: #f56a3d; }
.stamp--soon { color: #f0ad62; }
.stamp--closed { color: #71b592; }

.row {
  border-color: rgba(124, 174, 207, .18);
  color: #b9c9d4;
}
.row:hover { color: white; }
.row:focus-visible { outline-color: #f56a3d; }
.row__hint { color: #5f7c90; }
.rows--muted .row,
.rows--muted .row:hover { color: #708898; }
.rows--done .row__title { color: #71a889; text-decoration-color: rgba(113, 168, 137, .42); }

.alarm {
  padding: 26px;
  border-color: rgba(240, 173, 98, .35);
  border-radius: 0;
  background: #171d29;
  color: #dfe8ee;
}
.alarm__label { color: #f0ad62; }
.alarm__title { color: white; }
.alarm__text,
.alarm__list { color: #92a7b5; }
.alarm__close { color: #f0ad62; }
.alarm--notice { border-color: rgba(88, 164, 210, .35); background: #0a2139; }

.colophon {
  border-color: rgba(124, 174, 207, .18);
  color: #527086;
}

/* Шаг и кабинет */

.sheet {
  width: min(680px, calc(100% - 24px));
  border: 1px solid rgba(124, 174, 207, .28);
  border-radius: 2px;
  background: #07182c;
  color: #cbd9e2;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .55);
}
.sheet__body { overflow-x: hidden; }
.sheet::backdrop { background: rgba(1, 9, 19, .82); }
.sheet h3 { color: white; }
.sheet__label { color: #f56a3d; }
.sheet__section p,
.sheet__section li { color: #a9bbc7; }
.warn {
  border-color: #f56a3d;
  border-radius: 0;
  background: #191b25;
  color: #d9c0b7;
}
.sheet__sources { color: #627f93; }
.sheet__sources a { color: #76b4da; }

.btn {
  min-height: 54px;
  border-color: #f56a3d;
  border-radius: 2px;
  background: #f56a3d;
  color: white;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.btn--ghost { background: transparent; color: #dce7ee; border-color: rgba(124, 174, 207, .3); }
.btn:focus-visible { outline-color: #f56a3d; }

.code {
  border-color: rgba(88, 164, 210, .45);
  border-radius: 2px;
  background: #061529;
}
.code__value { color: #dce7ee; }
.code__copy { color: #76b4da; }
.danger { color: #f08368; }

@media (max-width: 900px) {
  body:has(.ask) #app,
  body:has(.masthead) #app { --page: min(100% - 32px, 760px); }
  .ask__layout { grid-template-columns: 1fr; min-height: auto; }
  .ask__intro { min-height: 250px; border-right: 0; border-bottom: 1px solid rgba(124, 174, 207, .22); }
  .ask__promise { max-width: 13ch; }
  .overview { grid-template-columns: 1fr; gap: 1px; }
  .plan-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body:has(.ask) #app,
  body:has(.masthead) #app { --page: calc(100% - 24px); }
  .ask { padding-top: 12px; }
  .ask__brand { height: 48px; }
  .ask__layout { min-height: calc(100dvh - 82px); border-radius: 2px; }
  .ask__intro { min-height: 205px; padding: 24px; background-position: 27% center; }
  .ask__promise { margin-top: auto; font-size: 31px; }
  .ask__panel { min-height: 410px; padding: 34px 22px 32px; }
  .ask__back { position: static; margin-bottom: 28px; }
  .ask__q { font-size: clamp(31px, 10vw, 43px); }
  .ask__controls { margin-top: 30px; }
  .ask__privacy { font-size: 8px; }

  .masthead {
    height: 66px;
    background: rgba(3, 18, 37, .92);
    border-color: rgba(124, 174, 207, .18);
  }
  .masthead__account {
    width: auto;
    height: 38px;
    padding: 0 12px;
  }
  .masthead__account span { display: inline; }
  .dashboard { padding-top: 18px; }
  .overview { margin-bottom: 38px; }
  .gauge__inner { min-height: 250px; padding: 24px 21px; }
  .gauge__state { font-size: 34px; }
  .gauge__dial { width: 92px; height: 86px; flex-basis: 92px; }
  .gauge__percent { font-size: 25px; }
  .plan-grid { gap: 42px; }
  .card { padding: 22px 20px 19px 24px; }
  .sheet { border-radius: 2px 2px 0 0; }
  .sheet__grip { background: #49667b; }
  .sheet__actions { background: #07182c; }
  .colophon { min-height: 128px; }
}

/* ─── Запрос навигатору ──────────────────────────────────────────────── */
.question-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.question-box textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid rgba(124, 174, 207, .28);
  border-radius: 0;
  padding: 14px 15px;
  background: #031225;
  color: #fff;
  font: inherit;
  line-height: 1.45;
  outline: none;
}

.question-box textarea:focus {
  border-color: #f56a3d;
  box-shadow: 0 0 0 1px #f56a3d;
}

.question-box textarea::placeholder { color: #71899a; }
.question-box .btn { align-self: stretch; }
.question-box__status {
  grid-column: 1 / -1;
  margin: 0;
  color: #8da5b5;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .question-box { grid-template-columns: 1fr; }
  .question-box__status { grid-column: auto; }
}