/* ==========================================================================
   МАСТЕРА VIZIR — тёплый «человеческий» слой (29.10.2026)
   --------------------------------------------------------------------------
   Задача владельца: убрать «ИИ-шаблонный» вид (тёмные плашки, свечения,
   золотые пилюли) и привести публичную часть к тому же редакционному стилю,
   который уже принят на vizirapp.com: бумага, графит, терракота, охра,
   тонкие линии, антиква в заголовках, киргизский орнамент разделителем.
   --------------------------------------------------------------------------
   Файл подключается ПОСЛЕ app.css и только переопределяет оформление:
   разметка, id, логика app.js, формы и кабинет не меняются. Все цвета —
   из переменных, поэтому тёмная тема (data-theme="dark") работает штатно.
   ========================================================================== */

/* --------------------------------------------------------------- токены -- */
:root {
  /* бумага, графит, терракота, охра */
  --paper: #faf5ec;
  --surface: #fffdf8;
  --surface-2: #f4ecdd;
  --line: #e2d5be;
  --line-strong: #cbb99c;

  --text: #1f2126;
  --text-2: #4b4a44;
  --muted: #5d5a51;

  --signal: #9e4a2a;
  --signal-dark: #873d21;
  --signal-soft: #f6e9db;
  --signal-ink: #fffaf3;

  /* графит вместо холодного «армейского» синего */
  --g-900: #2a2521;
  --g-800: #332c26;
  --g-700: #3d352e;
  --g-600: #4a4139;
  --g-500: #5a5047;

  --ok: #2f6b46;
  --ok-soft: #e7f0e6;
  --warn: #8a5a12;
  --warn-soft: #f8eed8;
  --bad: #9c3524;
  --bad-soft: #f7e6e0;
  --info: #5d5140;
  --info-soft: #eee7da;

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;

  --serif: Georgia, "PT Serif", "Noto Serif", "Noto Serif Devanagari",
           "Times New Roman", serif;

  /* «кочкор мүйүз» — тонкая орнаментальная полоса (как на vizirapp.com) */
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='18' viewBox='0 0 88 18'%3E%3Cg fill='none' stroke='%239e4a2a' stroke-width='1.3' stroke-linecap='round' opacity='.65'%3E%3Cpath d='M9 15c-3.2 0-5.2-2-5.2-5s2-5 5.2-5 5.2 2 5.2 5'/%3E%3Cpath d='M22 15c0-6.2 4.2-10.2 10-10.2'/%3E%3Cpath d='M56 4.8c5.8 0 10 4 10 10.2'/%3E%3Cpath d='M79 15c3.2 0 5.2-2 5.2-5s-2-5-5.2-5-5.2 2-5.2 5'/%3E%3C/g%3E%3Ccircle cx='44' cy='4.4' r='1.4' fill='%23b98a2e' opacity='.85'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17130f;
  --surface: #201a15;
  --surface-2: #2a231c;
  --line: #3a3127;
  --line-strong: #55483a;

  --text: #f3ead9;
  --text-2: #cfc3af;
  --muted: #b6a992;

  --signal: #c9714b;
  --signal-dark: #d8805a;
  --signal-soft: #33231a;
  --signal-ink: #17130f;

  --g-900: #100d0a;
  --g-800: #1a1511;
  --g-700: #241d17;
  --g-600: #30271f;
  --g-500: #3d3228;

  --ok: #7fb894;
  --ok-soft: #1b2a20;
  --warn: #d0a15c;
  --warn-soft: #2a2110;
  --bad: #d98f7f;
  --bad-soft: #2b1814;
  --info: #9bb6c9;
  --info-soft: #172028;
}

/* ------------------------------------------------------------ типографика -- */
body {
  background: var(--paper);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3,
.board h1,
.page-head h1,
.card-h h3,
.step h3,
.work-body h3,
.faq summary {
  font-family: var(--serif);
  letter-spacing: -0.008em;
}

h1, h2 { font-weight: 600; }
h3, h4 { font-weight: 600; }

p, li { line-height: 1.62; }

/* Заголовки секций публичной части — крупнее и «книжнее» */
#landing h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.22;
  margin-bottom: 14px;
}
#landing h3 { font-size: clamp(1.02rem, 1.5vw, 1.18rem); }

.eyebrow {
  font: 700 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.16em;
  color: var(--signal);
  margin-bottom: 10px;
}

/* орнаментальная полоса-разделитель */
.orn {
  height: 18px;
  margin: 4px 0 22px;
  background: var(--orn) repeat-x left center;
  opacity: 0.9;
}
.orn.center { background-position: center; }
.orn.tight { margin: 2px 0 14px; }

/* ---------------------------------------------------------------- каркас -- */
/* [hidden] должен побеждать display:flex у счётчиков героя: без этого блок с
   прочерками показывался всегда, хотя по замыслу скрыт до реальной активности. */
[hidden] { display: none !important; }

.topbar {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
.topbar .inner { min-height: 58px; }
.brand { color: var(--text); }
.brand > span {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}
.brand > span > span { white-space: nowrap; }
.brand-mark {
  border-radius: 3px;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
}
.brand b { font-family: var(--serif); font-weight: 700; letter-spacing: 0.02em; }
.brand span { color: var(--muted); font-weight: 500; }
.topbar .tlink {
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .tlink:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
#topJoin { color: var(--signal); }
#topJoin:hover { color: var(--signal-dark); }
#themeBtn { min-width: 40px; color: var(--muted); }
#themeBtn:hover { color: var(--text); }

.side a { color: var(--text-2); border-radius: var(--r-sm); font-weight: 600; }
.side a:hover { background: var(--surface-2); color: var(--text); }
.side a.on { background: var(--g-900); color: var(--on-navy, #f7f0e4); }
.side a.on svg { color: var(--signal); }
.side .lbl { color: var(--muted); }

.tabbar {
  background: var(--surface);
  color: var(--text-2);
  border-top: 1px solid var(--line);
}
.tabbar a { color: var(--muted); font-weight: 600; }
.tabbar a.on { color: var(--text); }
.tabbar a.on::before { background: var(--signal); height: 2px; }
.tabbar a.on svg { color: var(--signal); }
.tabbar .dot { background: var(--signal); color: var(--signal-ink); }

footer.site {
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
}
footer.site a { text-decoration-color: var(--line-strong); }
footer.site a:hover { color: var(--signal); }

/* --------------------------------------------------------------- кнопки -- */
.btn {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  min-height: 48px;
  box-shadow: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { border-color: var(--text-2); }
.btn.primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
  box-shadow: none;
}
.btn.primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.btn.light {
  background: transparent;
  border-color: var(--text);
  color: var(--text);
}
.btn.light:hover { background: var(--surface-2); border-color: var(--text); }
.btn.dark { background: var(--g-900); border-color: var(--g-900); color: #f7f0e4; }
.btn.dark:hover { background: var(--g-800); border-color: var(--g-800); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.bad { background: var(--bad-soft); border-color: var(--line-strong); color: var(--bad); }
.btn.sm { min-height: 38px; }
.btn.lg { min-height: 56px; font-size: 17px; }
.btn.wide { width: 100%; }

/* ------------------------------------------------------ публичная часть -- */
.landing { max-width: 1040px; }
.landing section { margin-bottom: 34px; }

/* Первый экран: «лист бумаги» с терракотовой линией-обрезом */
.board {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal);
  border-radius: var(--r-lg);
  padding: 30px 26px 26px;
  box-shadow: none;
}
.board::after { content: none; background: none; }
.board h1 {
  font-size: clamp(2rem, 5.4vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 18ch;
}
.board h1 em {
  font-style: normal;
  color: var(--signal);
}
.board .lead {
  color: var(--text-2);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.68;
  max-width: 58ch;
  margin: 16px 0 22px;
}
.board .row { gap: 10px; align-items: stretch; }
.board .row .btn { flex: 1 1 auto; }
@media (min-width: 620px) { .board .row .btn { flex: 0 0 auto; } }

.board .ticker {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 26px;
}
.board .ticker .t .k {
  color: var(--muted);
  font: 700 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.14em;
}
.board .ticker .t .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.board .ticker .t .v small { color: var(--text-2); font-family: inherit; }

/* Шаги: редакционный список с антиквенными номерами */
.steps { gap: 0; }
.step {
  display: flex;
  gap: 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 2px;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
  flex: 0 0 44px;
  width: 44px;
  height: auto;
  border: 0;
  border-radius: 0;
  display: block;
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--signal);
  background: none;
}
.step h3 { font-size: 1.08rem; margin-bottom: 4px; }
.step p { color: var(--text-2); font-size: 14.5px; line-height: 1.62; }

/* Плитки услуг: тонкая рамка, терракотовая иконка, без «прыжков» */
.grid.svc { gap: 10px; }
.svc-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 13px;
  font-weight: 600;
  font-size: 14.5px;
  min-height: 64px;
}
.svc-tile svg { color: var(--signal); }
.svc-tile:hover,
.svc-tile:focus-visible {
  transform: none;
  border-color: var(--signal);
  background: var(--signal-soft);
}

/* Карточки */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
}
/* В редакционной сетке карточки «Мастерам» и «Клиентам» не растягиваем до
   одной высоты: у формы справа больше контента, и у короткой карточки
   оставалась большая пустота над кнопкой. */
.landing .grid.c2 { align-items: start; }
.card-h h3 { font-size: 1.18rem; }
.card .rule { background: var(--line); }
.card .small { line-height: 1.6; }

/* Финальный призыв — блок на тонированной бумаге */
.landing .card.cta {
  background: var(--surface-2);
  border-color: var(--line-strong);
  border-left: 4px solid var(--signal);
}

/* FAQ */
.faq details { border-top: 1px solid var(--line); border-bottom: 0; padding: 14px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 1.02rem; font-weight: 600; }
.faq summary::before { font-family: var(--serif); font-size: 20px; color: var(--signal); }
.faq summary:hover { color: var(--signal); }
.faq p { margin: 9px 0 0 24px; color: var(--text-2); font-size: 14.5px; line-height: 1.62; }

/* --------------------------------------------------------------- формы -- */
label.f > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
input[type="text"], input[type="tel"], input[type="number"], select, textarea,
input:not([type]) {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
}
/* Серверные страницы (/zayavka, формы партнёров) верстают поля без атрибута
   type — без этого правила такие input оставались «браузерными» и узкими,
   хотя селект и textarea занимали всю ширину. */
input:not([type]) {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(158, 74, 42, 0.16);
}
label.f.consent > input[type="checkbox"] { accent-color: var(--signal); }
label.f.consent a { color: var(--signal); }
.hint { color: var(--muted); }

/* --------------------------------------------------- кабинет и служебное -- */
.page-head h1 { font-size: 1.6rem; font-weight: 600; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
}
.chip.sig { background: var(--signal-soft); border-color: var(--line-strong); color: var(--signal-dark); }
[data-theme="dark"] .chip.sig { color: var(--signal); border-color: var(--line-strong); }
.chip.ok { background: var(--ok-soft); border-color: var(--line); color: var(--ok); }
.chip.bad { background: var(--bad-soft); border-color: var(--line); color: var(--bad); }
.chip.info { background: var(--info-soft); border-color: var(--line); color: var(--info); }
.badge { background: var(--signal); color: var(--signal-ink); }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.stat .k { color: var(--muted); }
.stat .v { font-family: var(--serif); font-weight: 600; color: var(--text); }
.stat.sig { border-color: var(--line-strong); background: var(--signal-soft); }
.stat.sig .v { color: var(--signal-dark); }
[data-theme="dark"] .stat.sig .v { color: var(--signal); }

.order { background: var(--surface); border: 1px solid var(--line); }
.order .head { border-bottom: 1px dashed var(--line); }
.order .oid, .order .ago { color: var(--muted); }
.order .title svg { color: var(--signal); }
.stamp { border-radius: 2px; }
.stars { color: var(--gold, #b98a2e); }

.table th { color: var(--muted); }
.table td, .table th { border-bottom: 1px dashed var(--line); }

.seg { border-color: var(--line-strong); }
.seg button { background: var(--surface); color: var(--text-2); }
.seg button.on { background: var(--g-900); color: #f7f0e4; }
.opt { background: var(--surface); border-color: var(--line-strong); color: var(--text-2); }
.opt.on { background: var(--g-900); border-color: var(--g-900); color: #f7f0e4; }
.opt.on svg { color: var(--signal); }

.notice { border-radius: var(--r-sm); border-left-width: 4px; }
.toast { background: var(--g-900); color: #f7f0e4; border-radius: var(--r-sm); box-shadow: none; border-left: 4px solid var(--signal); }
.sheet { background: var(--surface); border-top: 3px solid var(--signal); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sheet-bg { background: rgba(23, 19, 15, 0.55); }

.work-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.work-media { background: var(--surface-2); }
/* Пока постер видео не загрузился, вместо холодного синего градиента —
   тёплый графит: карточка не выбивается из бумажной палитры. */
.work-media video, .works-grid video { background: #241f1a; }
.work-svc { color: var(--signal); }
.media-badge { background: rgba(42, 37, 33, 0.72); border-radius: 3px; }
.avatar { background: var(--g-900); color: var(--signal); border-radius: var(--r-sm); }

/* ------------------------------------------------------------- адаптив -- */
@media (max-width: 720px) {
  .board { padding: 22px 16px 20px; border-radius: var(--r); }
  .board h1 { font-size: clamp(1.75rem, 8.4vw, 2.5rem); }
  .board .ticker { gap: 18px 22px; }
  .board .ticker .t .v { font-size: 23px; }
  #landing h2 { font-size: 1.32rem; }
  .landing section { margin-bottom: 28px; }
  .orn { margin-bottom: 18px; }
}

@media (max-width: 560px) {
  .topbar .inner { gap: 8px; padding: 9px 12px; }
  .brand-mark { width: 24px; height: 24px; flex: 0 0 24px; font-size: 14px; }
  .brand b { font-size: 13.5px; }
  .brand > span > span { font-size: 10.5px; letter-spacing: 0.05em; }
  .topbar .tlink { padding: 8px 9px; font-size: 12.5px; }
  .topbar #topJoin, .topbar #topLogin { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .svc-tile, .faq summary, .tabbar a { transition: none !important; }
}

/* ==========================================================================
   МАСТЕРА VIZIR — шырдак: национальный узор вместо «сетки» и как полосы
   (29.10.2026, продолжение одобренного владельцем направления: на vizirapp.com
   и rent.vizirapp.com уже стоят настоящие узоры шырдака в палитре сайта)
   Файл подключается после warm.css — переопределяет только оформление.
   ========================================================================== */

/* hero: вместо технической сетки — тёплый узор шырдака (едва заметный) */
.board::after {
  background-image: url("/ms/img/uzor-band-vivid.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.17;
}

/* орнаментальная полоса по верхнему краю тёмной плашки hero */
.board::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background: url("/ms/img/uzor-band-vivid.jpg") center / auto 100% repeat-x;
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}

/* полоса под шапкой сайта */
.topbar { position: relative; }
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -9px;
  height: 9px;
  background: url("/ms/img/uzor-band-light.jpg") center / auto 100% repeat-x;
  opacity: 0.85;
  pointer-events: none;
}

/* полоса перед подвалом */
footer.site { position: relative; }
footer.site::before {
  content: "";
  display: block;
  height: 10px;
  margin-bottom: 6px;
  background: url("/ms/img/uzor-band-vivid.jpg") center / auto 100% repeat-x;
  opacity: 0.8;
}

/* на телефоне — тоньше, чтобы не отъедать место */
@media (max-width: 720px) {
  .board::before { height: 7px; }
  .topbar::after { height: 7px; bottom: -7px; }
  footer.site::before { height: 7px; }
}