/* ===========================================================================
   SALANO · тема дизайн-системы для ПУБЛИЧНОГО слоя (/pub) — волна 2–3, 10-08-2026

   Источник правды тот же, что у кабинета: `etalon/salano_design_vitrina.html`.
   Здесь НЕ дублируется вёрстка конструктора — файл только переопределяет токены и
   форму компонентов, которые уже есть в `pub.css`. Поэтому:
     • разметка публичных страниц не тронута (лицо перед клиентом не перерисовывалось
       вручную — меньше шансов сломать то, что видит клиент);
     • выключается тем же флагом `SALANO_DESIGN2=0`, что и кабинет.

   Публичный слой — витрина для КЛИЕНТА, поэтому тут только спокойная часть системы:
   мягкие карточки, градиентная главная кнопка, фокус-подсветка полей, пилюли выбора.
   =========================================================================== */

:root{
  --brand:#5B5FE6; --brand2:#8A6CFF;
  --ok:#1FB58A; --warn:#D98A1F; --crit:#E14A4A;
  --surf:#FFFFFF; --surf2:#FBFAFF;
  --text:#1A1C2E; --text2:#6A6D86; --text3:#9A9CB2;
  --bd:rgba(23,26,58,.08); --bd2:rgba(23,26,58,.16);
  --grad:linear-gradient(135deg,#5B5FE6,#8A6CFF);
  --r:14px;
  --fill-brand:rgba(91,95,230,.13); --fill-ok:rgba(31,181,138,.14);
  --fill-warn:rgba(217,138,31,.15);
  --sh:0 1px 4px rgba(0,0,0,.08);
}

/* Фон-свечение страницы — как в витрине */
body{
  background:
    radial-gradient(1100px 520px at 100% -8%, rgba(138,108,255,.10), transparent 60%),
    radial-gradient(900px 520px at -8% 8%, rgba(220,88,125,.07), transparent 55%),
    #F3F3FA;
}

/* Кнопки */
.btn{border-radius:10px;font-weight:700;box-shadow:0 4px 14px rgba(91,95,230,.30);
  transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(91,95,230,.38)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand);box-shadow:none}
.btn.ghost:hover{background:var(--fill-brand);transform:none;box-shadow:none}
.btn.big{border-radius:12px}
.btn.small{border-radius:8px;font-size:12.5px;box-shadow:none}
.btn:disabled{box-shadow:none;transform:none}

/* Карточки выбора модели и программы */
.card,.pgcard,.inscard,.doccard,.plate,.result{border-radius:var(--r);
  border:1px solid var(--bd);box-shadow:var(--sh)}
.card{background:linear-gradient(180deg,#FFFFFF,var(--surf2))}
.card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(91,95,230,.18)}
.card.sel,.pgrow.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--fill-brand)}

/* Пилюли режимов и каналов */
.mode,.chan{border-radius:10px;font-weight:700;border:1px solid var(--bd)}
.mode.active,.chan.active{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(91,95,230,.35)}
.mode.active span,.chan.active span{color:rgba(255,255,255,.85)}

/* Бейджи-подсказки результата */
.pbadge{border-radius:20px;padding:4px 12px;font-weight:700}
.pbadge.fast{background:var(--fill-ok);color:var(--ok)}
.pbadge.self{background:var(--fill-brand);color:var(--brand)}
.mtag{border-radius:20px;background:var(--fill-brand);color:var(--brand);font-weight:700}

/* Поля ввода клиента: рамка, фокус-кольцо и СВОЯ стрелка у списков.
   `!important` по той же причине, что и в кабинете: часть контролов несёт инлайновые
   стили, а системный вид полей на публичной странице — это лицо компании. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  border:1.5px solid var(--bd2) !important;border-radius:10px !important;
  background-color:#fff !important;color:var(--text) !important;font-family:inherit;
  transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none !important;
  border-color:var(--brand) !important;box-shadow:0 0 0 3px var(--fill-brand) !important}
select{-webkit-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236A6D86' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 10px center !important;
  padding-right:30px !important;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--brand) !important;
  width:17px;height:17px;cursor:pointer}
input:disabled,select:disabled,textarea:disabled{background-color:var(--surf2) !important;
  color:var(--text3) !important;cursor:not-allowed}
::placeholder{color:var(--text3);opacity:1}

/* Прогресс и итог */
.bar{background:var(--grad)}
.result .big{letter-spacing:-.5px}
.progincome{background:var(--fill-ok);color:var(--ok);border-radius:10px}

/* Лестница шагов и «спасибо» */
.step{border-radius:12px;border:1px solid var(--bd)}
.step .snum{background:var(--fill-brand);color:var(--brand);font-weight:800}
.step.special{border-color:var(--brand);box-shadow:0 0 0 3px var(--fill-brand)}
.thanks{border-radius:var(--r)}

/* Мелочи, которые видит клиент */
.brand{letter-spacing:.16em}
.note{background:var(--fill-warn);border-radius:12px}
.formerr{color:var(--crit)}
.linkbox{border-radius:10px;border:1px solid var(--bd2)}