/* app.css — кабинет «Электронное КП» (стиль КП v0.2, разделы 7 и 8; компоненты — стиль Академии, 10 и 18).
   Только рабочие токены из tokens.css: цвета темы переключаются атрибутом data-theme на <html>.
   Своих цветов у кабинета нет (стиль КП, 2.1). Оранжевое на вкладке «Шаблон КП» одно — итог расчёта.
   Принцип 0.2 (Т-77): шаг 8, ритм 16, поле 40 px; другие отступы внутри формы не используются (стиль КП, 7).
   Ширины проверки (экраны, 3.1; «c» — классические полосы прокрутки Windows): 1920c, 1536c, 1440, 1440c,
   окно 1440×780, 1366c, 1280, 1280c, 1080, 1024, 1024c, 1024×1366, 768, 390, окна 390×844 и 375×667, 360,
   горизонтальный телефон 844×390.
   Точки перелома — блоки @media в конце файла, в этом порядке: < 1366 — «⋯» в строке «Ролей»; < 1280 — форма 480;
   < 1080 — вход в одну колонку; < 1024 — шаблон в одну колонку с липкой полосой PDF, «Роли» карточками;
   < 720 — телефон: панель 56, окна — лист снизу, тосты сверху; < 480 — логотип, «Итого» и услуги интеграции
   в столбик; «узкий или касание» (< 1024 или pointer:coarse) — шрифт полей ввода 16 и зоны нажатия 44;
   горизонтальный телефон (высота ≤ 500) — панель не липкая; hover:none — отклик на касание; forced-colors —
   рамки линиями. Наведение (:hover) — только внутри @media (hover:hover). */

/* ===================== основа (стиль Академии, 16 — базовые правила) ===================== */
*,*::before,*::after{box-sizing:border-box}
/* место под полосу прокрутки всегда: смена вкладки и окно (html.is-locked) не сдвигают страницу (экраны, 3.1) */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--topbar-h) + 16px)}
/* поля страницы не уже выреза iPhone в горизонтальной ориентации (viewport-fit=cover, index.html) */
:root{--pad-l:max(var(--page-pad),env(safe-area-inset-left,0px));--pad-r:max(var(--page-pad),env(safe-area-inset-right,0px))}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;
  transition:background var(--dur-base),color var(--dur-base)}
h1,h2,h3,h4,p,ul,ol,figure,fieldset,legend{margin:0}
fieldset{padding:0;border:0;min-width:0}
ul,ol{padding:0}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--brand);color:var(--on-brand)}
[hidden]{display:none!important}
html.is-locked{overflow:hidden;
  /* место под полосу (scrollbar-gutter) подложка окна не накрывает — красим холст тем же цветом (проверка экранов) */
  background:linear-gradient(var(--scrim),var(--scrim)),var(--bg)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
}

/* скрыть визуально, но оставить экранному диктору (.vh — имя из стиля КП, 7.2) */
.sr-only,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.boot{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px}
.boot__text{font-size:var(--fs-sm);color:var(--text-muted);text-align:center}

/* значки — inline SVG, контур 1.6 (стиль Академии, 11) */
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ===================== типографика ===================== */
.eyebrow{display:flex;align-items:center;gap:8px;font-size:var(--fs-eyebrow);font-weight:600;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.eyebrow .mono{letter-spacing:.04em;text-transform:none;font-weight:500}
.num{font-weight:200;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.num--accent{color:var(--accent-large);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.hl{color:var(--accent-large);font-weight:inherit}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono)}

/* ===================== кнопки (стиль Академии, 10.2; .btn--xs — стиль КП, 7.2) ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:44px;padding:0 22px;border:0;border-radius:var(--radius-pill);
  font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:transparent;color:var(--text);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.btn .i{width:18px;height:18px}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-brand)}
.btn--secondary{background:transparent;color:var(--text);box-shadow:var(--frame-strong)}
.btn--ghost{background:transparent;color:var(--text-muted);padding:0 12px}
.btn--danger{background:transparent;color:var(--danger-text);box-shadow:var(--frame-danger)}
/* наведение — только при мыши: после касания кнопка не остаётся «приподнятой» и светящейся (экраны, 3.2) */
@media (hover:hover){
  .btn--primary:hover{background:var(--brand-hover);box-shadow:var(--glow);transform:translateY(-1px)}
  .btn--secondary:hover{color:var(--brand-text);box-shadow:var(--frame-brand)}
  .btn--ghost:hover{color:var(--text);background:var(--surface-hover)}
  .btn--danger:hover{background:var(--danger-soft)}
}
.btn--primary:active{transform:none;box-shadow:none}
.btn--sm{height:36px;padding:0 16px;font-size:13.5px}
.btn--sm .i{width:16px;height:16px}
.btn--sm.btn--ghost{padding:0 12px}
.btn--xs{height:32px;padding:0 12px;font-size:13px}
.btn--xs .i{width:16px;height:16px}
.btn--lg{height:52px;padding:0 28px;font-size:16px}
.btn--icon{width:40px;padding:0}
.btn--sm.btn--icon{width:36px;padding:0}
.btn--xs.btn--icon{width:32px;padding:0}
/* зона нажатия 40 у кнопок-значков 32 (стиль КП, 7.2; Академия, 13): невидимый слой на 4 px вокруг (экраны, 3.3) */
.btn--xs.btn--icon{position:relative}
.btn--xs.btn--icon::before{content:"";position:absolute;inset:-4px}
.btn--block{width:100%}
/* неактивная — после :hover, чтобы наведение её не «оживляло» */
.btn:disabled,.btn[aria-disabled="true"]{background:var(--track);color:var(--text-faint);
  box-shadow:none;transform:none;cursor:not-allowed}
.btn--ghost:disabled{background:transparent}
.btn.is-busy{cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn-row--tight{gap:4px;justify-content:flex-end}
.push-left{margin-right:auto}
/* касание: без серой вспышки WebKit (отклик — :active в блоке hover:none) и без увеличения двойным касанием по «−/+»
   (экраны, 3.27) */
.btn,.tab,.segmented button,.theme-toggle,.topbar__user,.pw__toggle,.drop,.check-row,.toast__close{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* круглая кнопка темы 36 px (стиль Академии, 10.1) */
.theme-toggle{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;flex:none;
  background:transparent;color:var(--text-muted);box-shadow:var(--frame-strong);cursor:pointer;
  transition:color var(--dur-fast),box-shadow var(--dur-fast)}
.theme-toggle--topbar{color:var(--topbar-muted);box-shadow:inset 0 0 0 1px var(--topbar-line)}
@media (hover:hover){
  .theme-toggle:hover{color:var(--brand-text);box-shadow:var(--frame-brand)}
  .theme-toggle--topbar:hover{color:var(--teal-400);box-shadow:inset 0 0 0 1px var(--brand)}
}
/* зона нажатия 44 у кнопки 36 (экраны, 3.3) */
.theme-toggle{position:relative}
.theme-toggle::before{content:"";position:absolute;inset:-4px}

/* ===================== аватар: фото в круге или инициалы (стиль КП, 7.1, 7.4, 7.6) ===================== */
.avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  overflow:hidden;background:var(--surface-2);color:var(--text-muted);box-shadow:var(--frame);
  font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1}
.avatar__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.avatar--32{width:32px;height:32px;font-size:12px}
.avatar--40{width:40px;height:40px;font-size:13px}
.avatar--64{width:64px;height:64px;font-size:19px;font-weight:500}
.avatar--96{width:96px;height:96px;font-size:28px;font-weight:500}
.avatar--topbar{background:var(--ink-800);color:var(--topbar-text);box-shadow:inset 0 0 0 1px var(--topbar-line)}

/* ===================== верхняя панель 64 (стиль КП, 7.1; Академия, 10.1 и 2) ===================== */
.topbar{position:sticky;top:0;z-index:var(--z-topbar);height:var(--topbar-h);
  background:var(--topbar-bg);color:var(--topbar-text);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--topbar-line)}
.topbar__in{max-width:var(--container-wide);height:100%;margin:0 auto;padding:0 var(--pad-r) 0 var(--pad-l);
  display:flex;align-items:center;gap:16px}
.topbar__brand{display:flex;align-items:center;gap:16px;min-width:0;color:inherit;text-decoration:none}
.topbar__logo{height:22px;width:auto;flex:none}
.topbar__product{padding-left:16px;box-shadow:inset 1px 0 0 var(--topbar-line);line-height:20px;
  font-size:14px;font-weight:500;color:var(--topbar-muted);white-space:nowrap}
.topbar__end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.topbar__user{display:flex;align-items:center;gap:8px;min-width:0;height:40px;padding:0 12px 0 4px;border:0;
  border-radius:var(--radius-pill);background:transparent;color:var(--topbar-text);cursor:pointer;
  transition:background var(--dur-fast)}
.topbar__user-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.topbar__logout{color:var(--topbar-muted)}
@media (hover:hover){
  .topbar__user:hover{background:rgba(249,249,248,.06)}
  .topbar__logout:hover{color:var(--topbar-text);background:rgba(249,249,248,.06)}
}

/* ===================== вкладки (стиль КП, 7.1 v0.2 — полоска = нижняя граница самой вкладки, Т-110) ===================== */
.tabs-wrap{max-width:var(--container-wide);margin:0 auto;padding:16px var(--pad-r) 0 var(--pad-l)}
.tabs{display:flex;gap:8px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{box-sizing:border-box;display:inline-flex;align-items:center;flex:none;height:44px;padding:0 12px;
  border:0;border-top:2px solid transparent;border-bottom:2px solid transparent;border-radius:0;
  font-size:14px;font-weight:500;line-height:1;color:var(--text-muted);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-fast),border-color var(--dur-fast)}
@media (hover:hover){.tab:hover{color:var(--text)}}
.tab[aria-current="page"]{color:var(--text);border-bottom-color:var(--brand)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ===================== страница ===================== */
/* поля --pad-l/--pad-r: на компьютере = --page-pad, у выреза iPhone — не меньше выреза (экраны, 3.6) */
.page{max-width:var(--container-wide);margin:0 auto;padding:24px var(--pad-r) 80px var(--pad-l)}
.view:focus{outline:none}

/* шапка экрана: бровка, заголовок, строка («Роли», стиль КП, 7.4) */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.page-head__text{min-width:0;max-width:760px}
.page-head__title{margin-top:12px;font-size:var(--fs-h1);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.page-head__lead{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-muted)}

/* ===================== поля (стиль КП, 7.2; Академия, 10.8) ===================== */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__label{display:block;height:16px;font-size:12px;font-weight:600;letter-spacing:.1em;line-height:16px;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field__req{color:var(--text-muted);margin-left:2px}
.field__opt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
.input{width:100%;height:40px;padding:0 12px;border:0;border-radius:0;background:var(--surface-2);color:var(--text);
  font:inherit;font-size:15px;box-shadow:var(--frame-strong);transition:box-shadow var(--dur-base) var(--ease-out)}
.input::placeholder{color:var(--text-faint);opacity:1}
@media (hover:hover){.input:hover{box-shadow:inset 0 0 0 1px var(--text-muted)}}
.input:focus{outline:none;box-shadow:var(--frame-brand),0 0 0 3px var(--brand-soft)}
.input[aria-invalid="true"]{box-shadow:var(--frame-danger),0 0 0 3px var(--danger-soft)}
.input:disabled{background:transparent;color:var(--text-faint);box-shadow:var(--frame);cursor:not-allowed}
.input[readonly]{background:transparent;box-shadow:var(--frame);cursor:text}
textarea.input{height:auto;min-height:96px;padding:8px 12px;line-height:1.5;resize:vertical}
.input--num{font-variant-numeric:tabular-nums}
/* список: стрелка рисуется рамкой обёртки — без картинок и data-адресов (Грабли, 8) */
.select{position:relative}
.select .input{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;text-overflow:ellipsis}
.select .input:disabled{cursor:not-allowed}
.select::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);transform:translateY(-70%) rotate(45deg)}
.field__hint,.field__error,.field__note,.field__auto{font-size:12.5px;line-height:16px}
.field__hint{color:var(--text-muted)}
.field__error{display:flex;gap:6px;align-items:flex-start;color:var(--danger-text)}
.field__error:empty{display:none}
.field__error .i,.field__note .i{width:14px;height:14px;margin-top:1px;stroke-width:2}
.field__note{display:flex;gap:6px;align-items:flex-start;color:var(--warn-text)}
.field__auto{display:inline-flex;align-items:center;gap:6px;color:var(--brand-text)}
.field__auto::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
/* пары: поле всегда сразу под подписью — подсказка под одним полем не сдвигает другое (Т-102) */
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.row2-group{display:flex;flex-direction:column;gap:8px}
/* ≥720: подпись в паре переносится целиком («Объём минут квалификатора», Т-94; без многоточия), а поля пары
   всё равно в одну линию (Т-102). .field пары раскрывается в сетку .row2: подписи — строка 1, прижаты к полю;
   поля — строка 2; пометки и ошибки — ниже, каждая в своей колонке (dense: колонка 2 не ждёт пометок колонки 1).
   < 720 пара — одна колонка, поле остаётся обычным .field (правило ниже не действует). */
@media (min-width:720px){
  .row2{row-gap:8px;grid-auto-flow:row dense}
  .row2>.field{display:contents}
  .row2>.field:nth-child(1)>*{grid-column:1}
  .row2>.field:nth-child(2)>*{grid-column:2}
  .row2>.field>.field__label{grid-row:1;align-self:end;height:auto;white-space:normal;overflow:visible;text-overflow:clip}
  .row2>.field>.field__label+*{grid-row:2}
}
input[type="radio"],input[type="checkbox"]{accent-color:var(--brand);width:18px;height:18px;margin:0;flex:none}

/* поле пароля с кнопкой-глазом */
.pw{position:relative;min-width:0}
.pw .input{padding-right:44px}
.pw__toggle{position:absolute;right:2px;top:2px;width:36px;height:36px;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:var(--text-muted);cursor:pointer}
@media (hover:hover){.pw__toggle:hover{color:var(--text);background:var(--surface-hover)}}

/* сегменты (стиль Академии, 10.7); --sm — высота 32 (фон ячейки логотипа, стиль КП, 7.2) */
.segmented{display:inline-flex;gap:1px;background:var(--line);box-shadow:var(--frame)}
.segmented button{height:36px;padding:0 14px;border:0;background:var(--surface);font:inherit;font-size:13.5px;
  font-weight:500;color:var(--text-muted);cursor:pointer;transition:background var(--dur-base),color var(--dur-base)}
.segmented--sm button{height:32px;padding:0 12px;font-size:13px}
@media (hover:hover){.segmented button:hover{color:var(--text)}}
.segmented button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.segmented button:focus-visible{outline:2px solid var(--focus);outline-offset:1px;position:relative;z-index:1}
/* зона нажатия 40 у сегментов 32 (стиль КП, 7.2; экраны, 3.3) */
.segmented--sm button{position:relative}
.segmented--sm button::before{content:"";position:absolute;inset:-4px 0}

/* ===================== «Шаблон КП»: раскладка (стиль КП, 7.1–7.2) ===================== */
.kp-layout{display:grid;grid-template-columns:520px minmax(0,1fr);gap:32px;align-items:start}
.kp-layout>.state,.kp-layout>.boot__text{grid-column:1 / -1}

/* форма: шаг 8, ритм 16, поле 40 */
.kp-form{background:var(--surface);box-shadow:var(--frame);padding:24px}
.fs{display:flex;flex-direction:column;gap:16px}
.fs+.fs{margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 var(--line)}
.fs__head{display:flex;align-items:center;gap:8px;height:24px;margin:0;font-size:15px;font-weight:600;
  letter-spacing:-.01em;line-height:24px}
.fs__num{display:grid;place-items:center;width:24px;height:24px;flex:none;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text);box-shadow:var(--frame-strong)}
.fs__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs__slide{margin-left:auto;flex:none;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.fs__slide.is-off{color:var(--text-faint)}
.fs__note{font-size:12.5px;line-height:16px;color:var(--text-muted)}
.fs__group{display:flex;flex-direction:column;gap:0}
.kp-form__foot{display:flex;justify-content:flex-end;margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 var(--line)}

/* своя ниша: «Название ниши» + «Добавить» 40 */
.niche-custom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.niche-add{height:40px}

/* логотип: зона сброса 72 — «дырка» с пунктиром (стиль КП, 7.2; Академия, 7 — исключение) */
.logo-body{display:flex;flex-direction:column;gap:8px}
.drop{display:flex;align-items:center;gap:16px;min-height:72px;padding:8px 16px;
  outline:1px dashed var(--line-strong);outline-offset:-1px;background:var(--surface-2);color:var(--text-muted);
  cursor:pointer;transition:background var(--dur-fast),outline-color var(--dur-fast),color var(--dur-fast)}
@media (hover:hover){.drop:hover{outline-color:var(--brand);color:var(--text)}}
.drop.is-over{outline:2px dashed var(--brand);outline-offset:-2px;background:var(--brand-soft);color:var(--text)}
.drop .i{width:20px;height:20px;color:var(--brand-text)}
.drop__lines{display:flex;flex-direction:column;gap:4px;min-width:0}
.drop__text{font-size:14px;font-weight:500;line-height:18px;color:var(--text)}
.drop__text u{color:var(--brand-text);text-decoration-thickness:1px;text-underline-offset:3px}
/* на касании перетаскивать некуда: «Выберите файл логотипа» вместо «Перетащите…» (блок hover:none; экраны, 3.27) */
.drop__text--touch{display:none}
/* подпись переносится на всех ширинах: «файл остаётся на этом компьютере» не должно пропадать (ПРАВИЛА, 19);
   две строки помещаются в 72: 8 + 18 + 4 + 16 + 16 + 8 = 70 */
.drop__sub{font-size:12.5px;line-height:16px;color:var(--text-muted)}
.drop-input:focus-visible+.drop{outline:2px solid var(--focus);outline-offset:2px}
.drop-input[aria-invalid="true"]+.drop{outline-color:var(--danger)}

/* после загрузки — один блок 72 (стиль КП, 7.2; экраны, 3.9): миниатюра 128 | строка 32 «имя · размер» и кнопки-значки
   над строкой 32 «Фон ячейки» · сегменты. На телефоне (< 480) «Фон ячейки» — отдельной строкой под миниатюрой */
.logo-row{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:32px 32px;column-gap:16px;row-gap:8px;
  grid-template-areas:"thumb top" "thumb bg";align-items:center}
.logo-thumb{grid-area:thumb;width:128px;height:72px;display:grid;place-items:center;padding:8px;background:var(--white);box-shadow:var(--frame)}
.logo-thumb--dark{background:var(--ink-900)}
.logo-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.logo-row__top{grid-area:top;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-width:0}
.logo-row__name{font-size:13px;line-height:16px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo-bg{grid-area:bg;display:flex;align-items:center;gap:8px;min-width:0}
.logo-bg__label{font-size:13px;color:var(--text-muted)}

/* позиции расчёта */
.calc{display:flex;flex-direction:column;gap:16px}
.calc:empty{display:none}

/* итог — плашка (стиль КП, 7.2) */
.total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:end;padding:16px;
  background:var(--surface-2);box-shadow:var(--frame)}
.total__label{font-size:12px;font-weight:600;letter-spacing:.1em;line-height:16px;text-transform:uppercase;color:var(--text-muted)}
.total__formula{grid-column:1;font-size:13px;line-height:18px;color:var(--text-muted);overflow-wrap:anywhere}
.total__sum{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:28px;line-height:32px;white-space:nowrap}
.total__sum.is-empty{color:var(--text-faint);font-weight:200}

/* флажок «Показывать слайд с тарифами» — строка 40; длинная подпись на узком переносится, а не вылезает (экраны, 3.4) */
.check-row{display:flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:var(--text);cursor:pointer}

/* «Услуги интеграции» (ТЗ Т-123…Т-129; архитектура v0.2, 5.4): подписи колонок один раз, строка — поле «За что
   интеграция» · поле «Цена» 180 · кнопка «×» 40 в одну линию; ошибки и пометка — под своим полем, без сдвига соседей.
   Ритм формы: между группами 16, между строками 8 (компактно: 6 строк по умолчанию — 280 px). */
.integ{display:flex;flex-direction:column;gap:16px}
.integ__list{display:flex;flex-direction:column;gap:8px}
.integ__rows{display:flex;flex-direction:column;gap:8px}
.integ__rows:empty{display:none}
.integ__head,.integ-row{display:grid;grid-template-columns:minmax(0,1fr) 180px 40px;column-gap:8px}
.integ-row{row-gap:8px;align-items:start}
.integ-row>.input,.integ-row__del{grid-row:1}
.integ-row__title{grid-column:1}
.integ-row__price{grid-column:2}
.integ-row__del{grid-column:3;height:40px}
.integ-row__err-title{grid-column:1;grid-row:2}
.integ-row__err-price{grid-column:2;grid-row:2}
.integ-row__note{grid-column:1 / 3;grid-row:3}
.integ__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.integ__add{margin-left:-12px}
.integ-total{margin-left:auto;font-size:13px;line-height:16px;color:var(--text-muted);text-align:right}
.integ-total__sum{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:719.98px){
  .integ__head,.integ-row{grid-template-columns:minmax(0,1fr) 120px 40px}
}

/* менеджер: миниатюра 40 вровень с полем списка */
.mgr-pick{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:end}

/* ===================== предпросмотр (стиль КП, 7.1 и 8) ===================== */
.preview{min-width:0}
.preview__bar{position:sticky;top:var(--topbar-h);z-index:var(--z-sticky);display:flex;flex-direction:column;gap:4px;
  min-height:56px;padding:8px 0;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.preview__row{display:flex;align-items:center;gap:8px 16px;min-height:40px}
.preview__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0;margin-right:auto}
.preview__title{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:24px}
.preview__meta{font-size:13.5px;color:var(--text-muted);white-space:nowrap}
.preview__row .btn--primary{height:40px}
/* «К слайдам» — только в одной колонке (< 1024), где слайды под формой (экраны, 8.2) */
.preview__jump{display:none}
.zoom{display:flex;align-items:center;gap:0}
.zoom__val{min-width:48px;text-align:center;font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.zoom .btn:disabled{background:transparent;color:var(--text-faint)}
.preview__hint{align-self:flex-end;max-width:520px;text-align:right;font-size:13.5px;line-height:1.45;color:var(--text-muted)}
.preview__hint:empty{display:none}

.banner{display:flex;gap:8px;align-items:flex-start;margin-top:16px;padding:12px 16px;font-size:14px;line-height:1.5}
.banner .i{margin-top:2px}
.banner--danger{background:var(--danger-soft);color:var(--danger-text);box-shadow:var(--frame-danger)}

.preview__slides{display:flex;flex-direction:column;gap:24px;margin:24px auto 0;width:100%;
  transition:max-width var(--dur-base) var(--ease-out)}
.slide{display:flex;flex-direction:column;gap:8px;min-width:0}
.slide__cap{font-size:12px;font-weight:600;letter-spacing:.1em;line-height:16px;text-transform:uppercase;color:var(--text-muted)}
.slide__box{position:relative;aspect-ratio:16 / 9;background:var(--surface);box-shadow:var(--frame),var(--shadow-card);overflow:hidden}
.slide__canvas{display:block;width:100%;height:100%}
.slide__box.is-loading::after,.slide__box.is-empty::after{content:"";position:absolute;inset:0;background:var(--track)}
.slide__box.is-loading::after{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ===================== тосты (стиль Академии, 10.10) — единственное место с aria-live ===================== */
/* ширина от 100%, а не в vw: у fixed это окно без полосы прокрутки Windows; отступ — и от полоски «домой» (экраны, 3.5) */
.toasts{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100% - 32px))}
.toast{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:14px 12px 14px 17px;background:var(--surface-inverse);color:var(--on-inverse);
  box-shadow:inset 0 0 0 1px rgba(249,249,248,.08),var(--shadow-pop);animation:toast-in var(--dur-slow) var(--ease-out)}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--edge);background:var(--neutral-400)}
.toast>.i{width:20px;height:20px;color:var(--neutral-400)}
.toast b{display:block;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.toast p{margin-top:2px;font-size:13px;line-height:1.45;color:rgba(249,249,248,.72);overflow-wrap:anywhere}
.toast__close{width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:none;
  color:rgba(249,249,248,.6);cursor:pointer}
.toast__close .i{width:16px;height:16px}
@media (hover:hover){.toast__close:hover{color:var(--paper-0);background:rgba(249,249,248,.08)}}
.toast[data-tone="success"]::before{background:var(--teal-500)}
.toast[data-tone="success"]>.i{color:var(--teal-400)}
.toast[data-tone="error"]::before{background:var(--red-500)}
.toast[data-tone="error"]>.i{color:var(--red-400)}
.toast[data-tone="warn"]::before{background:var(--amber-400)}
.toast[data-tone="warn"]>.i{color:var(--amber-400)}
.toast.is-leaving{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* подсказка по касанию — полный текст обрезанной строки с title (tap-title.js; Академия, components.css; экраны, 3.24).
   Положение — left/top из JS через style.setProperty; курсор для iOS — в блоке hover:none */
.tap-title{position:fixed;left:0;top:0;z-index:var(--z-toast);max-width:min(320px,calc(100% - 16px));padding:8px 12px;
  background:var(--surface-inverse);color:var(--on-inverse);font-size:13px;line-height:1.45;white-space:pre-line;
  overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px rgba(249,249,248,.08),var(--shadow-pop)}

/* ===================== модалки (стиль Академии, 10.9; окна 560 и 480 — стиль КП, 7.5 и 7.7) ===================== */
/* поля окна — не меньше выреза; прокрутка листа и касание подложки не уходят на страницу под окном (экраны, 3.7) */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;
  padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.modal__scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade-in var(--dur-slow) var(--ease-out);touch-action:none}
.modal__card{position:relative;width:min(100%,520px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;
  overscroll-behavior:contain;padding:32px;background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-modal);
  animation:modal-in var(--dur-slow) var(--ease-out)}
.modal__card::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--accent)}
.modal--danger .modal__card::before{background:var(--danger)}
.modal--form .modal__card{width:min(100%,560px);padding:32px}
.modal--crop .modal__card{width:min(100%,480px);padding:32px}
.modal__close{position:absolute;top:12px;right:12px}
.modal__title{margin:12px 0 0;font-size:var(--fs-h2);font-weight:600;letter-spacing:-.02em;line-height:1.2;padding-right:32px;
  overflow-wrap:anywhere}
/* на касании фокус окна — на заголовке (ui.js, tabindex=-1), чтобы не поднималась клавиатура; рамку — только с клавиатуры
   (экраны, 4.2) */
.modal__title:focus:not(:focus-visible){outline:none}
.modal__text{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-muted)}
.modal__form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.modal__actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:24px}
.modal__form .modal__actions{margin-top:8px}
.modal__actions--inline{margin-top:0}
.modal.is-leaving .modal__card,.modal.is-leaving .modal__scrim{opacity:0;transition:opacity .15s}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.form-error{display:flex;gap:8px;align-items:flex-start;padding:12px 16px;font-size:13.5px;line-height:1.45;
  color:var(--danger-text);background:var(--danger-soft);box-shadow:var(--frame-danger)}
.form-error .i{width:16px;height:16px;margin-top:1px;stroke-width:2}

/* пароль кнопкой «Сгенерировать» (стиль КП, 7.5; Академия, passwordField) */
.pw-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pw-field__value{font-family:var(--font-mono);font-size:16px;letter-spacing:.08em;cursor:default}
.pw-field__value:placeholder-shown{font-family:inherit;font-size:15px;letter-spacing:0}
.pw-field__gen{height:40px}
.pw-field__gen .i{transition:transform var(--dur-base) var(--ease-out)}
.pw-field__gen:active .i{transform:rotate(-90deg)}

/* переключатель «Учётка активна» (Академия, 18.4) и строка «только для показа» */
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:40px;cursor:pointer;font-size:14px;color:var(--text)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__track{position:relative;width:40px;height:24px;flex:none;border-radius:var(--radius-pill);background:var(--track);
  box-shadow:var(--frame-strong);transition:background var(--dur-base)}
.switch__track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--surface-2);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur-base) var(--ease-out)}
.switch input:checked+.switch__track{background:var(--brand);box-shadow:none}
.switch input:checked+.switch__track::after{transform:translateX(16px);background:var(--ink-900)}
.switch input:focus-visible+.switch__track{outline:2px solid var(--focus);outline-offset:2px}
.readonly-row{display:flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:var(--text-muted)}
.readonly-row .i{width:16px;height:16px;color:var(--text-faint)}

/* фото в окнах: круг 64 и кнопки (стиль КП, 7.5) */
.photo-row{display:flex;align-items:center;gap:16px}
.photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* «Приглашение» (стиль КП, 7.5; Академия, showInvite): текст моноширинным в тёмной рамке */
.invite{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.invite__who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px}
.invite__name{font-weight:600;color:var(--text)}
.invite__login{color:var(--text-muted);overflow-wrap:anywhere}
.invite__box{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface-inverse);color:var(--on-inverse)}
.invite__label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,249,248,.72)}
textarea.invite__text{min-height:0;height:auto;padding:8px 12px;resize:none;background:rgba(249,249,248,.08);color:var(--on-inverse);
  font-family:var(--font-mono);font-size:14px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:inset 0 0 0 1px rgba(249,249,248,.2)}
@media (hover:hover){textarea.invite__text:hover{box-shadow:inset 0 0 0 1px rgba(249,249,248,.4)}}
textarea.invite__text:focus{outline:2px solid var(--focus);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--brand)}
textarea.invite__text::selection{background:var(--brand);color:var(--on-brand)}
.invite__note{font-size:13px;line-height:1.5;color:rgba(249,249,248,.72)}
.invite__manual{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;color:var(--brand-text)}
.invite__manual .i{width:16px;height:16px;margin-top:1px}
.invite__copy.is-done{background:var(--brand-soft);color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--brand)}

/* «Профиль» (стиль КП, 7.6) */
.profile{display:flex;flex-direction:column;margin-top:24px}
.profile__head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.profile__info{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.profile__name{font-size:19px;font-weight:600;line-height:24px;letter-spacing:-.01em;overflow-wrap:anywhere}
.profile__login{font-size:13px;line-height:18px;color:var(--text-muted);overflow-wrap:anywhere}
.profile__role{display:block;margin-top:4px}
.profile__info .photo-actions{margin-top:8px}
.profile .modal__form{margin-top:24px}
.profile__section{margin-top:16px;padding-top:16px;box-shadow:inset 0 1px 0 var(--line)}
.profile__section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px}
.profile__section-title{font-size:15px;font-weight:600;line-height:24px}
.profile__pw{margin-top:16px}

/* обрезка фото «как в Telegram» (стиль КП, 7.7): всё рисуется на холсте */
.crop{display:flex;flex-direction:column;margin-top:24px}
.crop__stage{display:block;width:100%;height:auto;aspect-ratio:1 / 1;background:var(--ink-950);touch-action:none;
  cursor:grab;-webkit-user-select:none;user-select:none}
.crop__stage.is-grabbing{cursor:grabbing}
.crop__stage:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.crop__slider{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:8px;align-items:center;margin-top:16px}
.crop__range{width:100%;margin:0;accent-color:var(--brand)}
.crop__hint{margin-top:8px;font-size:12.5px;line-height:16px;color:var(--text-muted)}
.crop .form-error{margin-top:16px}

/* ===================== бейджи (Академия, 10.4 и 18.2) ===================== */
.badge{display:inline-block;height:24px;padding:0 9px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;line-height:24px;white-space:nowrap;color:var(--text-muted);box-shadow:var(--frame)}
.badge .i{display:inline-block;width:13px;min-width:13px;height:13px;stroke-width:2;vertical-align:-2px}
.badge>*+*{margin-left:6px}
.badge--accent-solid{color:var(--on-accent);background:var(--accent);box-shadow:none}
.badge--ink-line{color:var(--text);box-shadow:var(--frame-strong)}
.badge--plain{color:var(--text-muted);box-shadow:var(--frame)}

/* ===================== «Роли» (стиль КП, 7.4; таблица Академии, 18.3) ===================== */
.dt-wrap{position:relative;background:var(--surface);box-shadow:var(--frame);overflow-x:auto}
.dt-wrap::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--accent);z-index:2}
.dt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.dt th{height:44px;padding:0 16px;text-align:left;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)}
.dt td{height:64px;padding:12px 16px;vertical-align:middle;color:var(--text-2);box-shadow:inset 0 -1px 0 var(--line-soft)}
.dt tbody tr:last-child td{box-shadow:none}
@media (hover:hover){.dt tbody tr:hover td{background:var(--surface-hover)}}
.dt .dt__role{width:136px}
.dt .dt__contacts{width:300px}
.dt .dt__status{width:128px}
.dt .dt__actions{text-align:right;white-space:nowrap}
.who{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;min-width:200px}
.who__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.who__name{font-size:15px;font-weight:600;line-height:20px;color:var(--text);overflow-wrap:anywhere}
.who__me{margin-left:8px;font-size:12px;font-weight:400;color:var(--text-muted)}
.who__login{font-family:var(--font-mono);font-size:12.5px;line-height:16px;color:var(--text-muted);overflow-wrap:anywhere}
.dt__list{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px;min-width:0}
.dt__line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:268px}
.dt__line--muted{color:var(--text-muted)}
.dt__none{color:var(--text-faint)}
.status-on{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text)}
.status-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.dt tr.is-off .who__name,.dt tr.is-off .dt__list,.dt tr.is-off .dt__line{color:var(--text-muted)}
/* «⋯» (managers.js): при ширине < 1366 в строке «Изменить» и «⋯», остальные действия (.row-act--extra) — в листе
   .row-menu; переключение — блок 1365.98 ниже (экраны, 3.25) */
.row-more{display:none}
.row-menu{display:flex;flex-direction:column;gap:8px;margin-top:24px}

/* состояния: загрузка, пусто, ошибка */
.state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center;
  background:var(--surface);box-shadow:var(--frame)}
.state__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em}
.state__text{max-width:52ch;font-size:14px;color:var(--text-muted)}
.state--error .state__title{color:var(--danger-text)}
.skeleton{height:64px;background:var(--track);animation:pulse 1.4s ease-in-out infinite}
.skeleton+.skeleton{margin-top:1px}

/* ===================== вход и смена пароля (стиль Академии, 19.1) ===================== */
.login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.login__brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  padding:48px clamp(32px,5vw,72px);background:var(--ink-900);color:var(--topbar-text);overflow:hidden;
  box-shadow:inset -1px 0 0 var(--topbar-line)}
.login__logo{position:relative;display:flex;align-items:center;gap:16px}
.login__logo img{height:28px;width:auto}
.login__product{padding-left:16px;box-shadow:inset 1px 0 0 var(--topbar-line);font-size:15px;font-weight:500;color:var(--topbar-muted);line-height:22px}
.login__body{position:relative;max-width:560px}
.login__eyebrow{color:var(--teal-400)}
.login__title{margin-top:20px;font-size:var(--fs-display);font-weight:400;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.login__title .hl{color:var(--accent)}
.login__lead{margin-top:20px;max-width:46ch;font-size:17px;line-height:1.6;color:var(--topbar-muted)}
.login__points{margin-top:40px;display:grid;gap:1px;list-style:none;background:var(--topbar-line);box-shadow:inset 0 0 0 1px var(--topbar-line)}
.login__point{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--ink-900)}
.login__point-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--teal-400);
  font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(1,196,177,.55)}
.login__point b{display:block;font-size:15px;font-weight:600;color:var(--topbar-text)}
.login__point span span{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--topbar-muted)}
.login__stripe{position:absolute;right:0;bottom:0;width:116px;height:56px;opacity:.9;pointer-events:none}
.login__panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:72px clamp(20px,5vw,64px) 40px;background:var(--bg)}
.login__top{position:absolute;top:20px;right:20px}
.login__card{position:relative;width:min(100%,460px);padding:36px 36px 32px;background:var(--surface);box-shadow:var(--frame),var(--shadow-card)}
.login__card::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--brand)}
.login__card-title{margin-top:12px;font-size:var(--fs-h2);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.login__hint{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-muted)}
.login__form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.login__form .btn{margin-top:8px}
.login__form .btn--lg{height:48px}
.login__foot{font-size:12px;letter-spacing:.04em;color:var(--text-faint)}
.login__logout{display:flex;justify-content:center;margin-top:16px}
.login__form .modal__actions{margin-top:0}
.login--single{grid-template-columns:minmax(0,1fr)}
/* экран «Задайте свой пароль» — без тёмной панели: кнопка темы всегда на светлом фоне --bg */
.login--single .login__top .theme-toggle{color:var(--text-muted);box-shadow:var(--frame-strong)}
.password-mark{width:58px;height:28px}

/* ===================== ширины (стиль КП, 7.1; экраны, раздел 1.3) =====================
   Порядок блоков важен: 1365.98 → 1279.98 → 1079.98 → 1023.98 → 719.98 → 479.98 → «узкий или касание» →
   горизонтальный телефон (строго после телефонного) → hover:none → forced-colors → min-width:1080 (вход). */

/* «Роли» < 1366: в строке «Изменить» и «⋯». Все кнопки строки — около 1222 px: при 1366 с полосой Windows (1269)
   входят, при 1280 (1200, с полосой 1183) — уже нет (экраны, 3.25; решение владельца 0.2) */
@media (max-width:1365.98px){
  .row-more{display:inline-flex}
  .row-act--extra{display:none}
}
@media (max-width:1279.98px){
  .kp-layout{grid-template-columns:480px minmax(0,1fr)}
  .dt .dt__contacts{width:240px}
  .dt__line{max-width:208px}
}
/* < 1080 — только вход: шаблон остаётся в две колонки до 1024 (экраны, 3.17; решение владельца 0.1).
   Поля входа — не меньше выреза iPhone (экраны, 3.18) */
@media (max-width:1079.98px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login__brand{gap:28px;padding:28px max(72px,calc(56px + env(safe-area-inset-right,0px))) 32px max(24px,env(safe-area-inset-left,0px));
    box-shadow:inset 0 -1px 0 var(--topbar-line)}
  .login__points{display:none}
  .login__title{font-size:clamp(28px,6vw,40px)}
  .login__lead{font-size:15px}
  .login__panel{justify-content:flex-start;padding:28px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));
    position:static}
  .login{position:relative}
  .login__top{top:16px;right:max(16px,env(safe-area-inset-right,0px))}
  .login__top .theme-toggle{color:var(--topbar-muted);box-shadow:inset 0 0 0 1px var(--topbar-line)}
}
/* < 1024: шаблон в одну колонку — форма и слайды по 720 по центру; .preview раскрывается (display:contents), и полоса
   «Скачать PDF» становится ребёнком .kp-layout: пока заполняешь форму, она прижата к низу окна, на слайдах — к верху,
   как на компьютере (экраны, 3.19). «Роли» — карточки (Академия, 18.3) */
@media (max-width:1023.98px){
  .kp-layout{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .kp-form{width:100%;max-width:720px;margin-inline:auto}
  .preview{display:contents}
  /* полоса от края до края окна (отрицательные поля, приём Академии); содержимое — столбец 720 по центру:
     100% в padding — ширина колонки .kp-layout */
  .preview__bar{bottom:0;margin-left:calc(-1 * var(--pad-l));margin-right:calc(-1 * var(--pad-r));
    padding:8px calc(max(0px,(100% - 720px) / 2) + var(--pad-r)) max(8px,env(safe-area-inset-bottom,0px)) calc(max(0px,(100% - 720px) / 2) + var(--pad-l));
    box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line)}
  .preview__jump{display:inline-flex}
  /* scroll-margin складывается со scroll-padding-top у html (панель + 16): «К слайдам» ставит слайды (или баннер
     ошибки, если слайды спрятаны) на панель + 128 — под липкую полосу */
  .banner{width:100%;max-width:720px;margin-inline:auto;margin-top:0;scroll-margin-top:112px}
  .preview__slides{width:min(100%,720px);margin-top:0;scroll-margin-top:112px}
  /* поле, к которому перешли (Tab, первая ошибка), — не под нижней полосой */
  html{scroll-padding-bottom:128px}
  /* тосты — над нижней полосой: ошибка не уходит сама и не должна закрывать «Скачать PDF» (< 720 — сверху, ниже) */
  .toasts{bottom:calc(120px + env(safe-area-inset-bottom,0px))}

  .dt thead{display:none}
  .dt,.dt tbody,.dt tr,.dt td{display:block;width:auto}
  .dt .dt__role,.dt .dt__contacts,.dt .dt__status{width:auto}
  .dt tr{padding:12px 16px;box-shadow:inset 0 -1px 0 var(--line)}
  .dt tbody tr:last-child{box-shadow:none}
  .dt td{height:auto;min-height:32px;padding:4px 0;box-shadow:none;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right}
  .dt td[data-label]::before{content:attr(data-label);flex:none;font-size:12px;color:var(--text-muted);text-align:left}
  .dt td.dt__who{display:block;padding-bottom:8px;text-align:left}
  .dt td.dt__actions{justify-content:flex-start;padding-top:8px}
  .dt td.dt__actions:empty{display:none}
  .dt .dt__list{align-items:flex-end}
  /* почта и телефон на карточке переносятся целиком, а не обрезаются (экраны, 3.14) */
  .dt__line{max-width:none;white-space:normal;overflow-wrap:anywhere}
  .btn-row--tight{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:719.98px){
  .topbar__in{gap:8px}
  .topbar__product{display:none}
  .topbar__user{padding:0 4px}
  .topbar__user-name{display:none}
  .topbar__logout{width:40px;padding:0}
  /* подпись «Выйти» прячется визуально, имя кнопки для диктора остаётся (не display:none) */
  .topbar__logout .btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tabs-wrap{padding-top:8px}
  .page{padding-top:16px}
  .kp-form{padding:16px}
  .row2{grid-template-columns:minmax(0,1fr)}
  /* подписи полей переносятся целиком, без многоточия; title у подписи остаётся — по нему тест находит поле (экраны, 3.10) */
  .field__label{height:auto;white-space:normal;overflow:visible;text-overflow:clip}
  /* заголовок блока переносится, «Слайд N» уходит на следующую строку (экраны, 3.8 и 3.20) */
  .fs__head{height:auto;min-height:24px;flex-wrap:wrap;row-gap:4px}
  .fs__title{white-space:normal}
  /* полоса PDF: «К слайдам» и «Скачать PDF» в один ряд. Заголовок «Предпросмотр КП» — только для диктора: на h2
     ссылается aria-labelledby секции. Масштаб не нужен: слайд во всю ширину, !important — поверх max-width,
     который ставит JS (preview.js, setZoom). Подсказка — не больше двух строк (экраны, 3.20 и 8.2) */
  .preview__row{flex-wrap:wrap}
  .preview__head{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .zoom{display:none}
  .preview__row .btn--primary{width:auto;flex:1 1 auto}
  .preview__slides{max-width:none!important}
  .preview__hint{align-self:stretch;max-width:none;text-align:left;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  /* тосты — сверху под панелью: внизу ошибка не уходит сама и закрывала бы кнопки листа и полосу PDF (экраны, 3.15) */
  .toasts{left:var(--pad-l);right:var(--pad-r);top:calc(var(--topbar-h) + 8px);bottom:auto;width:auto}
  .modal{place-items:end stretch;padding:0}
  /* лист снизу: поля по бокам — не меньше выреза, снизу — над полоской «домой» (экраны, 3.16) */
  .modal__card,.modal--form .modal__card,.modal--crop .modal__card{width:100%;max-height:92vh;max-height:92dvh;
    padding:24px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .modal__actions{flex-direction:column-reverse}
  .modal__actions .btn{width:100%}
  .modal__actions .push-left{margin-right:0}
  .profile__head{grid-template-columns:64px minmax(0,1fr)}
  .profile__head .avatar--96{width:64px;height:64px;font-size:19px}
  .login{grid-template-rows:auto minmax(0,1fr)}
  .login__brand{gap:14px;padding:22px max(60px,calc(44px + env(safe-area-inset-right,0px))) 20px max(16px,env(safe-area-inset-left,0px))}
  .login__eyebrow,.login__lead{display:none}
  .login__logo{gap:12px}
  .login__logo img{height:22px}
  .login__product{font-size:12.5px;padding-left:10px;white-space:nowrap}
  .login__title{margin-top:0;font-size:clamp(22px,6.2vw,28px)}
  .login__top{top:15px;right:max(12px,env(safe-area-inset-right,0px))}
  .login__stripe{display:none}
  .login__card{padding:28px 16px 24px}
}
/* < 480 — телефон: логотип, «Итого» и «Услуги интеграции» в столбик (экраны, 3.21, 3.12, 3.13) */
@media (max-width:479.98px){
  /* «Фон ячейки» с сегментами (~225 px) в правую колонку (~182 при 390) не входят — отдельной строкой под миниатюрой */
  .logo-row{grid-template-rows:72px 32px;grid-template-areas:"thumb top" "bg bg"}
  /* «Итого»: сумма под подписью, формула — под суммой во всю ширину */
  .total{grid-template-columns:minmax(0,1fr);align-items:start}
  .total__sum{grid-column:1;grid-row:2;align-self:start}
  .total__formula{grid-row:3}
  /* услуга во всю строку, под ней «Цена» и «×»; подписи колонок — одна строка-легенда. Отступы — margin-top, а не
     row-gap: пустые ошибки (display:none) не дают лишних 8 px. .integ-row>… перебивает .integ-row>.input{grid-row:1} */
  .integ__head{display:flex;flex-wrap:wrap;column-gap:16px}
  .integ__rows{gap:16px}
  .integ-row{grid-template-columns:minmax(0,1fr) 40px;row-gap:0}
  .integ-row>.integ-row__title{grid-column:1 / -1;grid-row:1}
  .integ-row__err-title{grid-column:1 / -1;grid-row:2;margin-top:8px}
  .integ-row>.integ-row__price{grid-column:1;grid-row:3;margin-top:8px}
  .integ-row>.integ-row__del{grid-column:2;grid-row:3;margin-top:8px}
  .integ-row__err-price{grid-column:1 / -1;grid-row:4;margin-top:8px}
  .integ-row__note{grid-column:1 / -1;grid-row:5;margin-top:8px}
}
/* «узкий или касание» (< 1024 или палец). Шрифт полей 16: при меньшем Safari увеличивает страницу при фокусе
   (экраны, 3.11). Зоны нажатия 44 — невидимым ::before, размер кнопок прежний (экраны, 3.22). По ширине правила
   видны и на снимках WebKit 390 и 768 */
@media (max-width:1023.98px),(pointer:coarse){
  .input,.pw-field__value:placeholder-shown,textarea.invite__text{font-size:16px}
  /* .modal__close и .pw__toggle уже absolute: их не трогаем, ::before держится и так */
  .btn--sm,.btn--icon:not(.modal__close),.topbar__user,.niche-add,.pw-field__gen{position:relative}
  .btn--sm::before,.btn--icon::before,.pw__toggle::before,.topbar__user::before,.niche-add::before,
  .pw-field__gen::before{content:"";position:absolute}
  .btn--sm::before{inset:-4px 0}                                                    /* высота 36 → 44 */
  .btn--icon::before{inset:-2px}                                                    /* 40 → 44 */
  .niche-add::before,.pw-field__gen::before{inset:-2px 0}                          /* высота 40 → 44 */
  .topbar__user::before{inset:-2px}            /* на телефоне имени нет, кнопка 40×40 → 44×44 (сверка) */
  .btn--sm.btn--icon::before,.topbar__logout::before,.pw__toggle::before{inset:-4px} /* 36 → 44 */
  .btn--xs.btn--icon::before{inset:-6px}                          /* 32 → 44: масштаб, обрезка фото, логотип */
  .logo-row__top{gap:12px}       /* слои −6 у «Заменить» и «Убрать» не перекрываются: касание не попадёт в «Убрать» */
  .segmented--sm button::before{inset:-6px 0}
  .topbar__brand{min-height:44px}
  .preview__row .btn--primary{height:44px}
  .btn-row--tight{gap:8px}
  .toast__close{width:44px;height:44px;margin:-8px -8px -8px 0}
}
/* горизонтальный телефон (844×390: по высоте видно ~340) — строго после телефонного блока. Панель не липкая, полоса PDF
   липнет к самому верху, подсказка полосы скрыта; окна и холст обрезки — в высоту окна (photo.js пересчитывает холст
   сам) (экраны, 3.23) */
@media (max-height:500px) and (max-width:1023.98px){
  .topbar{position:static}
  .preview__bar{top:0}
  .preview__hint{display:none}
  /* панель уезжает вверх: до поля — 16, до слайдов — 16 + 64 под полосой */
  html{scroll-padding-top:16px}
  .banner,.preview__slides{scroll-margin-top:64px}
  .modal{padding:8px max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px))}
  .modal__card,.modal--form .modal__card,.modal--crop .modal__card{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .crop__stage{width:min(100%,calc(100vh - 200px));width:min(100%,calc(100dvh - 200px));margin-inline:auto}
}
/* касание (hover:none): отклик нажатием вместо наведения (экраны, 3.27). Курсор у [title] обязателен: иначе iOS
   не доводит касание до document и tap-title.js не срабатывает (Академия, components.css; экраны, 3.24) */
@media (hover:none){
  [title]:not(a,button,input,select,textarea,label){cursor:pointer}
  .btn--ghost:active,.pw__toggle:active,.tab:active,.check-row:active,.drop:active,
  .segmented button:active{background:var(--surface-hover)}
  .btn--secondary:active,.theme-toggle:active{box-shadow:var(--frame-brand)}
  .btn--danger:active{background:var(--danger-soft)}
  .tap-title{cursor:pointer}   /* касание самой подсказки её закрывает */
  /* на графитовой панели и тёмном тосте — светлый отклик, как при наведении */
  .topbar__user:active,.topbar__logout:active{background:rgba(249,249,248,.06)}
  .toast__close:active{background:rgba(249,249,248,.08)}
  .drop__text--mouse{display:none}
  .drop__text--touch{display:inline}
}
/* высокая контрастность Windows: рамки-тени (tokens.css, --frame*) в этом режиме пропадают — здесь рамки линией
   системного цвета; единственное место, где border вместо внутренней тени (экраны, 3.26) */
@media (forced-colors:active){
  .input,.btn--primary,.btn--secondary,.btn--danger,.theme-toggle,.segmented,.switch__track,.fs__num,.logo-thumb,.badge,
  .kp-form,.total,.dt-wrap,.modal__card,.toast,.login__card,.state,.tap-title{border:1px solid CanvasText}
  .input:focus{outline:2px solid Highlight;outline-offset:0}
  .segmented button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-3px}
  .switch input:checked+.switch__track::after{background:Highlight}
  /* прозрачные рамки вкладок система красит — гасим их цветом фона, текущая вкладка — Highlight */
  .tab{border-top-color:Canvas;border-bottom-color:Canvas}
  .tab[aria-current="page"]{border-bottom-color:Highlight}
  /* aria-disabled браузер сам не серит (в отличие от :disabled) */
  .btn[aria-disabled="true"]{color:GrayText;border-color:GrayText}
  /* белый логотип 5P.Lab на светлой контрастной теме не виден — тёмная подложка тенью, размер не меняется */
  .topbar__logo,.login__logo img{forced-color-adjust:none;background:#1A1A1A;box-shadow:0 0 0 4px #1A1A1A}
}
@media (min-width:1080px){
  .login__brand{position:sticky;top:0;height:100vh;height:100dvh}
}