/* КПП: жёлтый такси. Общий вид — kit.css, здесь только акцент и своё: госномер, плитки, результат. */
:root { --accent: #ffc93c; --accent-ink: #1d1600; }
html[data-scheme="light"] { --accent: #f5b400; }
html[data-scheme="light"] .btn.tonal { color: #6b4b00; }

/* шапка: адрес — кнопка смены корпуса */
.hero .where { display: block; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; }
.hero .where.tap { cursor: pointer; }
.hero .where .sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.3; }
.hero .where .sub.pin::before { content: "📍 "; }
.hero .where.tap .sub::after { content: " ›"; color: var(--hint); }
.gap8 { height: 8px; }
.gap16 { height: 16px; }
.center { text-align: center; }
.hint.lead { margin: 6px 0 16px; font-size: 14.5px; }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- госномер ---------- */
.rp {
  --ink: #111214;
  display: inline-flex; align-items: stretch; flex: none; height: 1.42em; padding: .04em;
  border-radius: .15em; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 .02em rgba(0, 0, 0, .5), 0 .05em .2em rgba(0, 0, 0, .28);
  font-family: "DIN Alternate", "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700;
  line-height: 1; white-space: nowrap; user-select: none;
}
.rp.taxi { background: #ffd51c; }
.rp > span { display: flex; align-items: center; border: .04em solid var(--ink); }
.rp-main { justify-content: center; padding: 0 .2em; border-radius: .12em 0 0 .12em; border-right: 0 !important; flex: 1; }
.rp-reg { flex-direction: column; justify-content: center; padding: 0 .12em; border-radius: 0 .12em .12em 0; min-width: 2em; }
.rp span.d, .rp span.l { display: inline-block; text-align: center; }
.rp span.d { width: .62em; font-size: 1em; }
.rp span.l { width: .62em; font-size: .78em; transform: translateY(.05em); }
.rp .gap { display: inline-block; width: .16em; }
.rp-num { display: flex; align-items: center; height: .74em; }
.rp-num span.d { width: .5em; font-size: .72em; }
.rp-rus { display: flex; align-items: center; gap: .08em; margin-top: .06em; font: 700 .24em/1 var(--font); letter-spacing: .06em; }
.rp .flag { display: inline-block; width: 1.4em; height: .9em; border: .5px solid rgba(0, 0, 0, .35);
  background: linear-gradient(#fff 33.3%, #1c57c9 0 66.6%, #d52b1e 0); }
.rp .ghost { color: rgba(17, 18, 20, .17); }
.rp .opt { display: none !important; }
.rp .opt.cur { display: inline-block !important; }
.rp .cur { position: relative; }
.rp .cur::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -.04em; height: .07em; border-radius: 1px;
  background: #e0a400; animation: kpp-blink 1s steps(2) infinite; }
.rp.mini { font-size: 15px; }
@keyframes kpp-blink { 50% { opacity: 0; } }

/* большое поле номера: табличка во всю ширину, настоящее поле ввода прозрачное поверх */
.plate-field { position: relative; display: block; container-type: inline-size; cursor: text; border-radius: 14px;
  transition: transform .2s var(--ease); }
.plate-box { display: flex; justify-content: center; }
.plate-box .rp.big { font-size: min(14.6cqw, 62px); width: 100%; }
.plate-field:not(.focus) .rp .cur::after { display: none; }
.plate-field.focus .rp { box-shadow: 0 0 0 .02em rgba(0, 0, 0, .5), 0 0 0 5px var(--accent-soft), 0 .05em .2em rgba(0, 0, 0, .28); }
.plate-field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; padding: 0;
  border: 0; background: none; color: transparent; caret-color: transparent; }
.plate-field.shake { animation: kpp-shake .4s; }
@keyframes kpp-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.plate-hint { margin: 10px 0 14px; text-align: center; color: var(--hint); font-size: 14px; letter-spacing: .2px;
  font-variant-numeric: tabular-nums; min-height: 20px; }
.plate-field.ok + .plate-hint { color: var(--text); font-weight: 600; }
.btn.go { min-height: 56px; font-size: 17px; }

/* быстрые действия — три плитки */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--r-md); background: var(--field); color: var(--text);
  font: 600 13px/1.15 var(--font); cursor: pointer; transition: transform .16s var(--ease), opacity .2s; }
.tile .i { font-size: 20px; line-height: 1; }
.tile small { max-width: 100%; color: var(--hint); font-size: 11.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tile:active { transform: scale(.96); }
.tile[disabled] { opacity: .4; pointer-events: none; }
.tile.busy { opacity: .6; pointer-events: none; }
.tile.busy .i { animation: kit-pulse 1s ease-in-out infinite; }

/* ---------- результат ---------- */
.result { text-align: center; padding-top: 22px; }
.result h2 { margin: 10px 0 14px; }
.res-plate { container-type: inline-size; display: flex; justify-content: center; margin: 0 auto; }
.res-plate .rp.big { font-size: min(12cqw, 52px); }
.res-meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px;
  color: var(--hint); font-size: 14.5px; }
.result .btns, .result > .btn { margin-top: 16px; }
.result .note { margin-top: 14px; text-align: left; }
.tick { width: 60px; height: 60px; margin: 0 auto; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.tick svg { width: 60px; height: 60px; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.tick circle { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 14%, transparent); }
.tick path { stroke: var(--ok); stroke-dasharray: 40; stroke-dashoffset: 40; animation: kpp-draw .5s .15s var(--ease) forwards; }
.tick.err { border-radius: 50%; color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); }
.tick.warn { border-radius: 50%; background: color-mix(in srgb, var(--warn) 14%, transparent); }
@keyframes kpp-draw { to { stroke-dashoffset: 0; } }

/* ---------- вход ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 12px; min-width: 0; }
.steps li + li { margin-top: 18px; }
.steps li > div { flex: 1; min-width: 0; }
.steps li b { display: block; margin: 3px 0 8px; font-weight: 600; }
.steps .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 700 14px/1 var(--font); }
.steps .hint { margin-top: -4px; }
.steps textarea { font: 13.5px/1.35 var(--mono); }
.steps .btns { margin-top: 8px; }
.login .btn + .btn { margin-top: 0; }

/* ---------- последние пропуска ---------- */
.row.pass { gap: 12px; padding: 12px 14px; }
.row.pass + .row::before { left: 14px; }
.row.pass .main { display: flex; flex-direction: column; gap: 4px; }
.meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.meta-line .meta { color: var(--hint); font-size: 13.5px; white-space: nowrap; }
.row.pass .btn.sm { flex: none; min-height: 34px; padding: 0 12px; font-size: 14px; }
.row.pass .pill { padding: 4px 9px; font-size: 12.5px; }
.places .row .title { white-space: normal; }
@media (max-width: 359px) {
  .rp.mini { font-size: 13px; }
  .row.pass { gap: 10px; padding: 12px; }
  .row.pass .btn.sm { padding: 0 9px; font-size: 13px; }
  .meta-line .meta { font-size: 12.5px; }
}