/* ============ AvtoMaktab ============
   Язык дизайна взят из предметной области, а не из UI-кита:
   шапка = асфальт с осевой разметкой, страница = бумажный бланк (журнал вождения),
   знак учебной машины «У», талон с пробитыми клетками, номерной знак UZ.
   Правила: острые углы, линии вместо теней, цвет только со смыслом
   (красный знака = неявка/опасное, зелёный = можно записаться, жёлтый = разметка). */

@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap;
    src: url(fonts/pt-sans-cyrillic-400.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap;
    src: url(fonts/pt-sans-latin-400.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap;
    src: url(fonts/pt-sans-cyrillic-700.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap;
    src: url(fonts/pt-sans-latin-700.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 700; font-display: swap;
    src: url(fonts/pt-sans-narrow-cyrillic-700.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 700; font-display: swap;
    src: url(fonts/pt-sans-narrow-latin-700.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Mono"; font-weight: 400; font-display: swap;
    src: url(fonts/pt-mono-cyrillic-400.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Mono"; font-weight: 400; font-display: swap;
    src: url(fonts/pt-mono-latin-400.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --asphalt: #222326;      /* шапка */
    --asphalt-2: #2d2f33;
    --paper: #efeadf;        /* фон: бумага бланка */
    --sheet: #faf7f0;        /* лист поверх */
    --ink: #171615;
    --ink-2: #45413a;
    --muted: #7b7468;
    --rule: #d6cdbb;         /* линовка */
    --red: #c4161c;          /* красный дорожного знака */
    --yellow: #f2c200;       /* разметка */
    --go: #1d6b38;           /* «можно записаться» */
    --go-bg: #e3eddc;
    --miss-bg: #f6dfd9;
    --narrow: "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
    --mono: "PT Mono", ui-monospace, "Menlo", "Consolas", monospace;
    --tap: 48px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --asphalt: #101113; --asphalt-2: #1a1b1e;
        --paper: #18191b; --sheet: #202225;
        --ink: #ece8df; --ink-2: #c6c0b4; --muted: #8e877b; --rule: #393a3d;
        --red: #ff5c52; --go: #6fd394; --go-bg: #17291d; --miss-bg: #2e1715;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.45 "PT Sans", system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.warn-text { color: var(--red); font-weight: 700; }

/* подписи-рубрики как в бланке: узкий жирный капс */
.label, h2, h3, th, .field > span, .stack label, .add-form label {
    font-family: var(--narrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
h2 { font-size: 17px; margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); display: flex; gap: 10px; align-items: baseline; }
h2 .muted { font-family: var(--mono); letter-spacing: 0; font-weight: 400; }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--ink-2); }

/* ---------- знак «У» ---------- */
.sign { width: 30px; height: 27px; flex: 0 0 auto; display: block; }
.sign-tri { fill: #fff; stroke: var(--red); stroke-width: 4.5; stroke-linejoin: round; }
.sign-u { fill: #171615; font: 700 17px var(--narrow); }

/* ---------- шапка: дорога ---------- */
.road {
    background:
        repeating-linear-gradient(90deg, var(--yellow) 0 30px, transparent 30px 52px) left bottom / 100% 3px no-repeat,
        var(--asphalt);
    color: #e9e6df;
    padding-bottom: 3px;
}
.road-in {
    max-width: 1180px; margin: 0 auto; padding: 10px 16px 12px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font: 700 21px/1 var(--narrow); letter-spacing: .01em; }
.road-school { font-family: var(--mono); font-size: 13px; color: #a9a59c; }
.road-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.road-nav a {
    color: #cfcbc2; text-decoration: none; padding: 6px 10px 5px;
    font: 700 15px var(--narrow); text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 3px solid transparent;
}
.road-nav a:hover { color: #fff; }
.road-nav a.on { color: #fff; border-bottom-color: var(--yellow); }
.road-who { font-size: 14px; color: #a9a59c; display: flex; gap: 10px; align-items: center; }
.road-who a, .road-link { color: #e9e6df; }
.road-link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
form.inline { display: inline; margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 6px 16px 56px; }

/* ---------- кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 8px 16px;
    border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
    font: 700 15px var(--narrow); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--sheet); }
.btn-primary, .btn-ink { background: var(--ink); color: var(--sheet); }
.btn-primary:hover, .btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-ghost { border-width: 1px; border-color: var(--ink-2); }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-wide { width: 100%; min-height: var(--tap); }
.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; font-size: 13px; }

/* ---------- поля: как графа бланка ---------- */
input, select {
    background: transparent; border: 0; border-bottom: 2px solid var(--ink-2); border-radius: 0;
    padding: 6px 2px; min-height: 40px; max-width: 100%;
}
input:focus, select:focus { outline: none; border-bottom-color: var(--ink); background: var(--sheet); }
select { border: 1px solid var(--ink-2); padding: 6px 8px; background: var(--sheet); }
input.num { width: 70px; font-family: var(--mono); }
input[type="time"], input[type="date"] { font-family: var(--mono); }
.field { display: grid; gap: 2px; }
.field > span { font-size: 13px; color: var(--ink-2); }

/* ---------- сообщения: штамп на полях ---------- */
.flash { margin: 18px 0 4px; padding: 10px 14px; border: 2px solid currentColor; background: var(--sheet); font-weight: 700; display: flex; gap: 12px; align-items: baseline; }
.flash::before { font: 700 13px var(--narrow); text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border: 1.5px solid currentColor; white-space: nowrap; }
.flash-ok { color: var(--go); }
.flash-ok::before { content: "Готово"; }
.flash-error { color: var(--red); }
.flash-error::before { content: "Нельзя"; }
.flash-warn { color: var(--ink); border-color: var(--yellow); box-shadow: inset 6px 0 var(--yellow); }
.flash-warn::before { content: "Внимание"; }
.empty { color: var(--muted); padding: 10px 0; font-style: italic; }

/* ---------- лист (карточка без «карточности») ---------- */
.card { background: var(--sheet); border: 1px solid var(--ink-2); padding: 18px; margin: 20px 0; }
.card h2 { margin-top: 0; }
.narrow { max-width: 540px; }
.stack { display: grid; gap: 16px; }
.stack label { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.stack label small { font: 400 13px "PT Sans", sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- талон ученика ---------- */
.talon { margin: 22px 0 6px; background: var(--sheet); border: 2px solid var(--ink); }
.talon-head { display: flex; justify-content: space-between; gap: 10px; padding: 6px 14px; border-bottom: 1px dashed var(--ink-2); font-size: 13px; }
.talon-body { padding: 14px; display: grid; gap: 12px; }
.talon-count { display: flex; align-items: baseline; gap: 12px; }
.quota-num { font: 400 54px/0.9 var(--mono); letter-spacing: -.04em; }
.talon-of { color: var(--ink-2); }
.punch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.punch li, .legend i { width: 20px; height: 20px; border: 1.5px solid var(--ink); display: inline-block; position: relative; }
.punch .p-done, .legend .p-done { background: var(--ink); }
.punch .p-miss, .legend .p-miss { border-color: var(--red); background: linear-gradient(45deg, transparent 44%, var(--red) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--red) 44% 56%, transparent 56%); }
.punch .p-booked::after, .legend .p-booked::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
.punch .p-free, .legend .p-free { border-style: dashed; border-color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 13px; }
.legend .p-booked::after { inset: 3px; }

/* ---------- билеты: мои занятия ---------- */
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticket { display: grid; grid-template-columns: 74px 1fr auto; background: var(--sheet); border: 1px solid var(--ink-2); align-items: stretch; }
.ticket-stub { border-right: 2px dashed var(--ink-2); padding: 8px 6px; text-align: center; display: grid; align-content: center; }
.ticket-stub b { font: 400 30px/1 var(--mono); }
.ticket-stub span { font: 700 12px var(--narrow); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.ticket-body { padding: 10px 14px; min-width: 0; }
.ticket-time { font: 400 20px var(--mono); }
.ticket-who { color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ticket-act { display: flex; align-items: center; padding: 8px 12px; }
.ticket-note { font-size: 13px; color: var(--muted); max-width: 120px; text-align: right; }

/* ---------- номерной знак UZ ---------- */
.car { white-space: nowrap; }
/* белый номер с регионом слева и «UZ» справа: всегда светлый, как настоящий */
.plate {
    display: inline-flex; align-items: stretch; white-space: nowrap; overflow: hidden;
    font: 400 13px/1 var(--mono); letter-spacing: .02em; color: #111;
    background: #fff; border: 1.5px solid #111; border-radius: 3px;
}
.plate b { font-weight: 400; padding: 3px 5px; border-right: 1.5px solid #111; }
.plate span { padding: 3px 6px; }
.plate i { display: flex; align-items: center; padding: 0 4px; font: 700 9px/1 var(--narrow); font-style: normal; color: #1f4e9c; border-left: 1px solid #bbb; }

/* ---------- выбор инструктора и дня ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0 14px; border: 1px solid var(--ink-2); width: fit-content; max-width: 100%; }
.chip { padding: 9px 14px; text-decoration: none; color: var(--ink-2); font: 700 15px var(--narrow); text-transform: uppercase; letter-spacing: .04em; border-right: 1px solid var(--ink-2); }
.chip:last-child { border-right: 0; }
.chip.on { background: var(--ink); color: var(--sheet); }
.days, .week { display: flex; overflow-x: auto; margin: 4px 0 6px; border: 1px solid var(--ink-2); background: var(--sheet); scrollbar-width: thin; }
.day {
    flex: 0 0 auto; min-width: 54px; padding: 6px 4px 7px; text-align: center; text-decoration: none; color: var(--ink);
    border-right: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center;
}
.day span { font: 700 12px var(--narrow); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day b { font: 400 21px/1.15 var(--mono); }
.day.weekend span { color: var(--red); }
.day.on { background: var(--ink); color: var(--sheet); box-shadow: inset 0 -4px var(--yellow); }
.day.on span { color: inherit; opacity: .75; }
.week .day { min-width: 78px; }
.daytitle { font: 700 15px var(--narrow); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; color: var(--ink-2); }

/* ---------- расписание слотов: как табло/расписание с отточием ---------- */
.tt { list-style: none; margin: 0 0 10px; padding: 0; border-top: 2px solid var(--ink); }
.tt form { margin: 0; }
.tt-row {
    width: 100%; display: flex; align-items: baseline; gap: 6px; min-height: var(--tap);
    padding: 10px 6px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left;
}
.tt-time { font: 400 22px var(--mono); }
.tt-end { font: 400 14px var(--mono); color: var(--muted); }
.tt-dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); min-width: 20px; }
.tt-act { font: 700 15px var(--narrow); text-transform: uppercase; letter-spacing: .06em; }
.tt-free .tt-act { color: var(--go); }
.tt-free .tt-act::after { content: " →"; }
.tt-free:hover { background: var(--go-bg); }
.tt-free:hover .tt-dots { border-bottom-color: var(--go); }
.tt-mine { background: var(--sheet); box-shadow: inset 4px 0 var(--ink); }
.tt-taken { color: var(--muted); }
.tt-taken .tt-time { text-decoration: line-through; text-decoration-thickness: 1px; }
.tt-clash { color: var(--muted); }

/* ---------- журнал: история ученика ---------- */
.log { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.log li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--rule); }
.log .when { font-family: var(--mono); font-size: 15px; }
.stamp {
    display: inline-block; font: 700 13px/1 var(--narrow); text-transform: uppercase; letter-spacing: .08em;
    padding: 4px 7px 3px; border: 2px solid currentColor; white-space: nowrap; transform: rotate(-2deg);
}
.stamp-done { color: var(--go); }
.stamp-no_show { color: var(--red); transform: rotate(2deg); }
.stamp-booked { color: var(--ink-2); border-style: dashed; transform: none; }
.stamp-cancelled { color: var(--muted); border-width: 1px; transform: none; text-decoration: line-through; }

/* ---------- инструктор: журнал дня ---------- */
.daynav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 10px; }
.daynav h2 { margin: 0 6px; border: 0; padding: 0; font-size: 19px; }
.journal { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.j-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
.j-time { font: 400 21px/1.1 var(--mono); }
.j-time small { display: block; font-size: 13px; color: var(--muted); }
.j-name { font-weight: 700; font-size: 17px; }
.j-phone { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.j-free .j-body { color: var(--go); font-family: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.j-past, .j-blocked { color: var(--muted); }
.j-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.j-act form { margin: 0; }
.mark { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--ink-2); background: transparent; font: 700 14px var(--narrow); text-transform: uppercase; letter-spacing: .05em; }
.mark-done.on { background: var(--go); border-color: var(--go); color: #fff; }
.mark-no_show.on { background: var(--red); border-color: var(--red); color: #fff; }
.j-no_show { background: var(--miss-bg); }

/* ---------- админ: счётчики дня ---------- */
.stats { display: flex; border: 1px solid var(--ink-2); background: var(--sheet); width: fit-content; max-width: 100%; margin-bottom: 14px; }
.stat { padding: 8px 18px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font: 400 28px/1.05 var(--mono); }
.stat span { font: 700 12px var(--narrow); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- админ: сетка дня ---------- */
.grid-scroll, .table-scroll { overflow-x: auto; border: 1px solid var(--ink-2); background: var(--sheet); }
.grid { border-collapse: collapse; width: 100%; min-width: 560px; }
.grid th, .grid td { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); padding: 7px 9px; vertical-align: top; text-align: left; }
.grid thead th { background: var(--paper); border-bottom: 2px solid var(--ink); font-size: 15px; position: sticky; top: 0; letter-spacing: .03em; }
.grid thead th a { text-decoration: none; display: block; }
.grid thead .plate { margin-top: 4px; text-transform: none; letter-spacing: 0; }
.grid thead .car { font: 400 13px "PT Sans", sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); }
.grid-time { width: 64px; font: 400 15px var(--mono) !important; color: var(--ink-2); border-left: 0 !important; white-space: nowrap; letter-spacing: 0 !important; text-transform: none !important; }
.cell { min-width: 150px; height: 60px; font-size: 14px; }
.cell-name { font-weight: 700; }
.cell-meta { font: 400 12px var(--mono); color: var(--muted); }
.cell-actions { display: flex; gap: 10px; margin-top: 3px; }
.cell-actions form { margin: 0; }
.cell-booked { box-shadow: inset 4px 0 var(--ink); }
.cell-done { box-shadow: inset 4px 0 var(--go); }
.cell-done .cell-name::before { content: "✓ "; color: var(--go); }
.cell-no_show { background: var(--miss-bg); box-shadow: inset 4px 0 var(--red); }
.cell-no_show .cell-name { text-decoration: line-through; text-decoration-color: var(--red); }
.cell-free a { color: var(--go); font: 700 14px var(--narrow); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; display: block; opacity: .75; }
.cell-free:hover { background: var(--go-bg); }
.cell-free:hover a { opacity: 1; }
.cell-off { color: var(--muted); font: 700 12px var(--narrow); text-transform: uppercase; letter-spacing: .08em; background: repeating-linear-gradient(135deg, transparent 0 7px, var(--rule) 7px 8px); }
.cell-none { color: var(--muted); }

/* ---------- таблицы и формы админа ---------- */
.table { border-collapse: collapse; width: 100%; min-width: 760px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.table thead th { font-size: 13px; color: var(--ink-2); background: var(--paper); border-bottom: 2px solid var(--ink); }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.add-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; align-items: end; }
.add-form label { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.week-form { display: grid; gap: 4px; }
.week-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.week-day { width: 34px; font: 700 15px var(--narrow); text-transform: uppercase; }
.week-form .btn { justify-self: start; margin-top: 10px; }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-2); }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--rule); }
.more summary { cursor: pointer; list-style: none; padding: 4px 10px; font: 700 16px var(--mono); border: 1px solid var(--rule); }
.more summary::-webkit-details-marker { display: none; }
.more[open] { display: grid; gap: 8px; }

/* ---------- вход: дорога слева, бланк справа ---------- */
.gate { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); }
.gate-road {
    background:
        repeating-linear-gradient(180deg, var(--yellow) 0 44px, transparent 44px 78px) right 22% top / 5px 100% no-repeat,
        var(--asphalt);
    color: #e9e6df; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.gate-road .brand { font-size: 26px; }
.gate-road .sign { width: 40px; height: 36px; }
.gate-road h1 { font: 700 clamp(34px, 5vw, 60px)/1.02 var(--narrow); text-transform: uppercase; letter-spacing: .01em; margin: 0; max-width: 11ch; }
.gate-road p { color: #b7b2a8; max-width: 34ch; margin: 14px 0 0; }
.gate-form { align-self: center; justify-self: center; width: 100%; max-width: 380px; padding: 32px 20px; display: grid; gap: 18px; }
.gate-form h2 { margin: 0; font-size: 22px; }
.gate-form input { min-height: var(--tap); font-size: 17px; }

/* ---------- офлайн и документы ---------- */
.gate-single { grid-template-columns: 1fr; }
.btn-light { border-color: #e9e6df; color: #e9e6df; margin-top: 18px; }
.btn-light:hover { background: #e9e6df; color: var(--asphalt); }
.doc { max-width: 720px; }
.doc h1 { font: 700 34px/1.05 var(--narrow); text-transform: uppercase; margin: 28px 0 6px; }
.doc ul { padding-left: 20px; }
.doc li { margin: 4px 0; }

@media (max-width: 760px) {
    .gate { grid-template-columns: 1fr; min-height: auto; }
    .gate-road { padding: 22px 16px 26px; gap: 22px; background: repeating-linear-gradient(90deg, var(--yellow) 0 30px, transparent 30px 52px) left bottom / 100% 4px no-repeat, var(--asphalt); }
    .gate-road h1 { font-size: 34px; }
    .road-nav { margin-left: 0; width: 100%; order: 3; }
    .road-who { width: 100%; order: 4; }
    .ticket { grid-template-columns: 62px 1fr; }
    .ticket-act { grid-column: 1 / -1; border-top: 1px dashed var(--ink-2); justify-content: flex-end; padding: 6px 10px; }
    .ticket-note { max-width: none; }
    .j-row { grid-template-columns: 60px 1fr; }
    .j-act { grid-column: 1 / -1; justify-content: flex-start; }
    .quota-num { font-size: 46px; }
}