/* 404 NOT FOUND — фирменный слой поверх base.css. Язык сайта 404notfound.ru: белое поле, один гротеск (на сайте Formular, у нас Golos Text),
   мелкие прописные подписи и меню (активный пункт жирный), названия обычным начертанием, красный вертикальный блок
   логотипа слева, серые плитки «404» вместо пустоты. От концепта «Бирка»: итог покупок на чёрной бирке с люверсом
   и красной ниткой, VIP — тканый красный ярлык. Размеры крупнее сайта: стилист читает с телефона в зале. */
:root {
  --paper: #fff; --surface: #fff; --ink: #222; --muted: #6e6e6e; --line: #e2e2e2; --edge: #ccc; --tile: #f4f4f4;
  --accent: #ff0000; --accent-ink: #000; --warn: #c0201a; --ok: #1d6b3c;
  --chrome: #fff; --chrome-ink: #000; --chrome-muted: #6e6e6e;
  --font-ui: "Golos Text", system-ui, sans-serif; --font-display: var(--font-ui); --font-num: var(--font-ui);
  --r: 0px;
}
body { font-size: 15px; }

/* Подписи как меню сайта: 12 px прописные, без разрядки */
h2, .label, .facts dt, .field > label, .field > legend, .crumbs, .dates .day small, .ranking .rank {
  font: 400 12px/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: 0; color: var(--muted); }
h2 { font-weight: 700; color: var(--ink); margin: 40px 0 10px; }
.field small { text-transform: none; }
h1 { font: 400 28px/1.15 var(--font-display); letter-spacing: 0; }
.client-head h1 { font-size: 30px; }
.lead { font-size: 15px; }
.page-head, .search, .client-head, .door { padding-top: 32px; }
.count { font-size: 12px; vertical-align: top; color: var(--muted); margin-left: 6px; }
.crumbs { margin: 0 0 18px; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs span { text-transform: none; }

/* Шапка: красный блок, меню прописными, активный пункт жирный */
header.top { border-bottom: 1px solid var(--line); }
.logo { width: 30px; height: 56px; }
.logo span { font-size: 6.6px; }
.who { font-size: 12px; text-transform: uppercase; }
.who button { text-transform: inherit; }
.who a[aria-current] { color: var(--chrome-ink); font-weight: 700; }
@media (max-width: 899px) {  /* у управляющих 4 ссылки + выход: на телефоне переносятся во вторую строку, а не за край */
  .who { flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
  .who a { padding: 6px 0; }
  .who button { min-height: 32px; padding: 6px 0; }
}
nav.tabs a { font-size: 10px; text-transform: uppercase; color: var(--muted); }
nav.tabs a.on { color: var(--chrome-ink); font-weight: 700; }
nav.tabs a.on::before { content: ""; position: absolute; top: 0; left: 50%; width: 6px; height: 10px; margin-left: -3px; background: var(--accent); }
nav.tabs a { position: relative; }
@media (min-width: 900px) {
  nav.tabs a { font-size: 12px; }
  nav.tabs a.on::before { content: none; }
}
/* Широкий экран — раскладка сайта: высокий красный блок слева, меню колонкой справа, без иконок */
@media (min-width: 1200px) {
  header.top { position: static; height: 0; padding: 0; border: 0; }
  .logo { position: fixed; top: 40px; left: 40px; width: 60px; height: 170px; }
  .logo span { padding: 8px 6px; font-size: 12px; }
  nav.tabs { position: fixed; top: 40px; right: 40px; left: auto; bottom: auto; margin: 0; flex-direction: column; align-items: flex-start; gap: 0; }
  nav.tabs a { padding: 2px 0; min-height: 0; line-height: 1.8; }
  nav.tabs svg { display: none; }
  nav.tabs, .who { width: 150px; }
  .who { position: fixed; top: 186px; right: 40px; flex-direction: column; align-items: flex-start; gap: 0; }
  .who button { min-height: 0; padding: 2px 0; }
  .wrap { padding-top: 24px; }
}

/* Бирка: чёрный картон, срезанные верхние углы, люверс и красная нитка */
.slip { position: relative; margin: 62px 6px 0; padding: 58px 24px 24px; background: #111; color: #f4f4f4; border: 0;
  --muted: #a8a8a8; --line: #333; --ink: #f4f4f4;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px);
  transform-origin: 50% 0; animation: swing 1400ms var(--ease) both; }
.slip::before { content: ""; position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px #b9b9b9, inset 0 1px 2px rgba(0,0,0,.4); }
.client-head::after { content: ""; position: absolute; left: 50%; bottom: -88px; width: 1px; height: 88px; background: var(--accent);
  transform: rotate(8deg); transform-origin: 50% 100%; z-index: 1; }
.client-head { padding-bottom: 0; }
@keyframes swing { 0% { transform: rotate(-5deg); } 45% { transform: rotate(2.4deg); } 75% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
.total { text-align: center; }
.total b { font: 400 44px/1.05 var(--font-num); letter-spacing: -.01em; margin-top: 8px; }
.to-vip p { font-size: 13px; }
.to-vip p b { font-weight: 700; }
.meter { height: 2px; background: #3a3a3a; overflow: visible; }
.meter i { background: var(--accent); }
.meter i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; background: var(--accent); }
.near .meter { background: var(--line); }
.facts dd { font-size: 20px; font-weight: 400; }
.confirm.slip { margin-top: 24px; }
.confirm .total b { font-size: 30px; }

/* Тканый ярлык VIP: красная лента, строчка по краю */
.seal { padding: 9px 14px; outline: 1px dashed rgba(0,0,0,.55); outline-offset: -4px; font: 700 12px/1 var(--font-ui); letter-spacing: .2em; }
.seal small { letter-spacing: 0; font-weight: 400; }
.seal.sm { padding: 6px 9px; outline-offset: -3px; letter-spacing: .14em; font-size: 10px; }

/* Списки как каталог: название 16 px обычным начертанием, цена рядом */
.ranking .name, .dates .name, .people .name { font-size: 16px; font-weight: 400; }
.ranking a, .dates a, .people a { min-height: 60px; }
.ranking a:hover .name, .dates a:hover .name, .people a:hover .name { text-decoration: underline; text-decoration-color: var(--accent); }
.ranking .amt { font-size: 16px; font-weight: 400; }
.ranking li:first-child .rank::after { content: ""; display: block; width: 6px; height: 10px; background: var(--accent); margin-top: 4px; }
.dates .day b { font-size: 28px; font-weight: 400; }
.lines li { font-size: 14px; }
.lines .s { font-weight: 700; }
.line-link b { font-weight: 400; }
.match { border-color: var(--edge); }
.match-phone b { font-weight: 400; }

/* Кнопки и поля как на сайте: тёмная заливка, тонкие серые рамки, без скруглений */
.btn { font: 700 12px/1 var(--font-ui); letter-spacing: 0; text-transform: uppercase; min-height: 52px; }
.btn.ghost { border-color: var(--edge); }
.btn.ghost:hover { border-color: var(--ink); }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=password] { border-color: var(--edge); font-size: 17px; }
.search-form input { font: 400 22px/1 var(--font-num); letter-spacing: 0; }
.toggle span { border-color: var(--edge); color: var(--muted); font-size: 13px; text-transform: uppercase; padding: 0 16px; }
.toggle input:checked + span { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 700; }
.chip { border-color: var(--edge); font-size: 13px; text-transform: uppercase; }
.fine-print { border-color: var(--edge); }
.field > label.check { font-size: 14px; text-transform: none; color: var(--ink); }
.stamp { transform: none; border: 0; padding: 6px 10px; background: var(--ink); color: #fff; font: 700 12px/1 var(--font-ui); letter-spacing: 0; }
.stamp.ok { background: var(--ok); color: #fff; }
.notice { font-size: 13px; }

/* Нет в базе: серая плитка «404», как пустая карточка товара на сайте */
.tile-404 { display: grid; place-items: center; height: 168px; margin: 0 0 16px; background: var(--tile);
  color: #d9d9d9; font: 400 64px/1 var(--font-ui); letter-spacing: -.02em; user-select: none; }

/* Гостевая анкета и вход: высокий красный блок бренда, как на главной сайта */
body.guest .page-head, body.page-login .door { padding-top: 0; }
body.guest .page-head::before, body.page-login .door::before { content: "404\A NOT\A FOUND"; white-space: pre; display: block; width: 72px; height: 200px;
  margin: 8px 0 32px; padding: 8px 7px; background: #ff0000; color: #000; font: 700 14px/1.1 var(--font-ui); }
body.guest header.top, body.page-login header.top { border: 0; }
body.guest header.top .logo, body.page-login header.top .logo { visibility: hidden; }
/* Анкета клиента: заголовок справа от блока, верхом вровень с ним; поля начинаются под блоком */
@media (max-width: 1199px) {
  body.guest header.top { display: none; }  /* пустая шапка с невидимым логотипом только отодвигала блок вниз */
  body.guest .page-head { display: grid; grid-template: auto 1fr / 72px 1fr; column-gap: 20px; padding-top: 24px; }
  body.guest .page-head::before { grid-row: 1 / span 2; }
  body.guest .page-head h1 { margin-top: -1px; }  /* верх заглавной вровень с верхом блока (замер на 375 px) */
}
@media (min-width: 1200px) {
  body.guest .page-head::before, body.page-login .door::before { content: none; }
  body.guest header.top .logo, body.page-login header.top .logo { visibility: visible; }
}