/* Базовые компоненты по бренду (docs/brand/БРЕНД.md) и дизайн-системе (docs/ДИЗАЙН_СИСТЕМА.md): белый фон, чёрный текст,
   заголовки navy, синий и голубой акцентами. Цвета только через токены из tokens.css. Витрина всех компонентов: /app/design.html.
   Тёмная тема: новые компоненты берут цвета из токенов (--accent-text и т. п.), отдельных правил под data-theme им не нужно. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font:var(--fs)/var(--lh) var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,.font-head{font-family:var(--font-head);font-weight:800;letter-spacing:0;color:var(--heading);line-height:1.2}
h1{font-size:22px}h2{font-size:16px}h3{font-size:16px} /* ДС §3: страница 22, раздел 16 */
strong,b{font-weight:700}
::selection{background:var(--brand-sky-3);color:var(--brand-word)}
:root[data-theme="dark"] ::selection{background:var(--user-bubble);color:var(--text)}
/* кнопки: основная navy с белым текстом, hover blue; вторичная белая с серой рамкой; опасная светло-красная; радиус 8 px */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--primary);border-radius:var(--radius);background:var(--primary);color:var(--on-primary);cursor:pointer;line-height:1.2;font-weight:700;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none}
.btn:disabled{opacity:.5;cursor:default}.btn:disabled:hover{background:var(--primary);border-color:var(--primary)}
.btn:focus-visible,.input:focus-visible,.sel-btn:focus-visible,.textarea:focus-visible{outline:none;box-shadow:var(--focus)}
.btn.secondary{background:var(--panel);color:var(--text);border-color:var(--line-strong);font-weight:400}
.btn.secondary:hover{background:var(--panel-2);border-color:var(--line-strong)}.btn.secondary:disabled:hover{background:var(--panel);border-color:var(--line-strong)}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent;font-weight:400}
.btn.ghost:hover{background:var(--panel-2);color:var(--text);border-color:transparent}.btn.ghost:disabled:hover{background:transparent;border-color:transparent}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent;font-weight:700}
.btn.danger:hover{background:var(--danger);color:var(--on-primary);border-color:var(--danger)}.btn.danger:disabled:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn.sm{padding:5px 10px;font-size:var(--fs-sm)}.btn.icon{padding:6px;width:32px;height:32px;justify-content:center}
/* поля ввода */
.input,.textarea{width:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.input:hover,.textarea:hover{border-color:var(--faint)}
.input:focus,.textarea:focus{border-color:var(--accent);box-shadow:var(--focus)}
.input:disabled,.textarea:disabled,.input:read-only{background:var(--panel-2);color:var(--muted)}
.input::placeholder,.textarea::placeholder,textarea::placeholder{color:var(--faint)}
.textarea{resize:vertical;min-height:72px}
input[type="number"].input{-moz-appearance:textfield}
input[type="number"].input::-webkit-outer-spin-button,input[type="number"].input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="date"].input{min-height:36px}
input[type="date"].input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
input[type="checkbox"],input[type="radio"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0 2px 0 0;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--panel);cursor:pointer;vertical-align:-3px;position:relative;flex:none;transition:border-color .15s,background .15s;accent-color:var(--brand-blue)}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--brand-blue)}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--brand-blue);border-color:var(--brand-blue)}
input[type="checkbox"]:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--on-primary)}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:none;box-shadow:var(--focus)}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.5;cursor:default}
/* подпись над полем 13 px --muted; подсказка и ошибка строкой под полем */
label.field,.field-label{display:block;margin:10px 0 4px;font-size:var(--fs-sm);color:var(--muted)}
.fld{margin:0 0 12px}.fld>label.field,.fld>.field-label{margin-top:0}
/* A45: подсказки, подписи групп и пояснения в списках --muted (контраст от 4,5:1); --faint только для плейсхолдеров, неактивного и рамок */
.field-hint{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
.field-error{font-size:var(--fs-sm);color:var(--danger);margin-top:4px}
.input.invalid,.textarea.invalid{border-color:var(--danger)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}.form-grid .span2{grid-column:1/-1}
.form-grid .fld{margin:0}
/* карточка: белая, граница --line, радиус 12, отступ 16; заголовок Muller 16; действия внизу справа */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;min-width:0}
.card>h2:first-child,.card>h3:first-child,.card-title{margin-top:0}
.card-title{margin:0 0 10px;font-size:16px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.card-head h2,.card-head h3{margin:0}
.card-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.card-note{margin:8px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}
.row{display:flex;gap:8px;align-items:center}.row.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:8px}
/* бейджи: 12 px, радиус 999, нейтральный фон --panel-2; цветной только для статусов ok/warn/danger; не больше двух рядом */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:var(--fs-xs);line-height:1.4;background:var(--panel-2);color:var(--muted);border:1px solid transparent;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.accent{background:var(--accent-soft);color:var(--accent-text)}
table.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-weight:400;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
/* полоски лимитов и квот (ДС §5 .progress): высота 6, фон --panel-2, заполнение cyan; при 80% warn, при 95% danger (класс на полоске или на заполнении) */
.progress{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}.progress>i{display:block;height:100%;background:var(--fill);border-radius:3px;transition:width .2s}
.progress>i.warn,.progress.warn>i{background:var(--warn)}.progress>i.danger,.progress.danger>i{background:var(--danger)}
.progress-line{display:flex;align-items:center;gap:8px;min-width:0}.progress-line .progress{flex:1;min-width:40px}
.progress-label{flex:none;font-size:var(--fs-sm);color:var(--muted)}
.progress-pct{flex:none;min-width:36px;text-align:right;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
/* каркас (общая панель слева, область страницы, панели, строка телефона): css/shell.css */
/* фирменный блок: знак 28 px (3:2, не растягивать) + «алабуга» Muller Extrabold + тонкий разделитель + AI Team обычным */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex;width:42px;height:28px;flex:none}.brand-mark svg{width:100%;height:100%;display:block}
.brand-mark .seg-1{fill:var(--logo-seg-1)}.brand-mark .seg-2,.brand-mark .seg-3{fill:var(--logo-seg-2)}
.brand-mark .seg-4,.brand-mark .seg-5{fill:var(--logo-seg-3)}.brand-mark .seg-6{fill:var(--logo-seg-4)}
.brand-text{display:inline-flex;align-items:baseline;gap:8px;line-height:1}
.brand-word{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:0;color:var(--brand-word)}
.brand-product{font-family:var(--font);font-weight:400;font-size:14px;color:var(--muted);padding-left:8px;border-left:1px solid var(--line-strong)}
.brand.big{gap:12px}.brand.big .brand-mark{width:60px;height:40px}.brand.big .brand-word{font-size:26px}.brand.big .brand-product{font-size:17px}
.page{padding:20px;max-width:1100px;width:100%;margin:0 auto}
.page h1{font-size:22px;margin:0 0 14px}:where(.page) h2{font-size:16px;margin:18px 0 8px} /* :where = нулевая специфичность: классы ДС и страниц сильнее */
/* тосты и модальные окна */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{padding:10px 14px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);max-width:360px}
.toast.error{border-color:var(--danger);color:var(--danger)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:40;padding:12px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;min-width:min(360px,100%);max-width:min(720px,92vw);max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal h3{margin:0 0 12px;font-size:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}
@media (max-width:860px){
  .page{padding:12px}
  .page h1{font-size:20px}
}

/* выпадающий список (_select.js): кнопка в документе, меню в body (position:fixed) */
.sel{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
.sel-btn{display:inline-flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);color:var(--text);cursor:pointer;font-size:var(--fs-sm);line-height:1.2;max-width:100%;text-align:left;transition:border-color .15s,box-shadow .15s}
.sel-btn:hover{border-color:var(--faint)}.sel.open .sel-btn{border-color:var(--accent);box-shadow:var(--focus)}
.sel.disabled .sel-btn,.sel-btn:disabled{opacity:.55;cursor:default;background:var(--panel-2)}
.sel-label{color:var(--muted);flex:none}.sel-value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sel-value.placeholder{color:var(--faint)}
.sel-caret{color:var(--muted);display:inline-flex;flex:none;transition:transform .15s}.sel.open .sel-caret{transform:rotate(180deg)}
.sel.block{display:block;width:100%}
.sel.block .sel-btn{padding:8px 10px;font-size:var(--fs);line-height:var(--lh)} /* список в форме той же высоты, что и поле .input (Q1a-6, Q1c-12) */
.sel-compact .sel-btn{padding:5px 9px;border-radius:999px;background:var(--panel-2);border-color:transparent}
.sel-compact .sel-btn:hover{border-color:var(--line-strong)}.sel-compact.open .sel-btn{border-color:var(--accent);background:var(--panel)}
.sel-compact .sel-label::after{content:":"}
.sel-menu{position:fixed;z-index:60;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px;overflow:hidden}
.sel-list{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:1px}
.sel-search{flex:none;margin:0 0 4px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);font-size:var(--fs-sm);outline:none;width:100%}
.sel-search:focus{border-color:var(--accent);background:var(--panel)}
.sel-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);white-space:nowrap;color:var(--text)}
.sel-item-label{overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.sel-item:hover,.sel-item:focus{background:var(--panel-2);outline:none}
.sel-item.active{background:var(--accent-soft);color:var(--brand-blue);font-weight:700}
:root[data-theme="dark"] .sel-item.active{color:var(--brand-sky)}
.sel-item.disabled{color:var(--faint);cursor:default}.sel-item.disabled:hover{background:transparent}
.sel-hint{color:var(--muted);font-size:var(--fs-xs);flex:0 1 auto;min-width:0;text-align:right;white-space:normal}
.sel-item:has(.sel-hint){flex-wrap:wrap;row-gap:2px}.sel-item:has(.sel-hint) .sel-item-label{flex:none}
.sel-empty{padding:8px 10px;color:var(--muted);font-size:var(--fs-sm)}
.sel-menu-compact{min-width:220px;max-width:min(380px,calc(100vw - 16px))}

/* ============================================================================ компоненты дизайн-системы (docs/ДИЗАЙН_СИСТЕМА.md §4-5)
   Имена классов из таблицы ДС; помощники, которые их строят, в js/ui.js; витрина в /app/design.html.
   Цвета только через токены; активный пункт текстом --accent-text (синий, в тёмной теме голубой), поэтому правила
   под data-theme здесь не нужны. */

/* шапка страницы: h1 Muller 22 navy и одна строка пояснения --muted */
.page-head{margin:0 0 20px}
.page-head h1{font-size:22px;margin:0 0 4px}
.page-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.page-head-row>.page-head-text{flex:1 1 320px;min-width:0}
.page-head-row>.row{flex:0 1 auto;max-width:100%;justify-content:flex-end}
.page-lead{margin:0;color:var(--muted)} /* A44: ширину ограничивает колонка, а не 640 px: пояснение в одну строку */
/* A44: шапка с кнопками на широком экране: заголовок и кнопки в первой строке, пояснение отдельной строкой во всю ширину
   шапки, а не в узкой колонке рядом с кнопками (.page-head-text раскрывается в элементы строки).
   Порог по ширине самой шапки (container query), а не экрана: ширина колонки зависит от панелей. От 560 px кнопки
   любой шапки (до 374 px, «Все заметки») и заголовок встают в одну строку; заголовок с основой 0 занимает остаток
   и при нехватке места переносится внутри себя, поэтому кнопки не уходят под него и порядок всегда «заголовок и
   кнопки, под ними пояснение». Уже 560 px и на телефоне прежняя раскладка: блок заголовок+пояснение, кнопки рядом
   или под ним. Строки флекса разделяет gap 16 px, пояснению нужно 4 px под заголовком, отсюда margin-top -12 px. */
.page-head-row{container-type:inline-size}
@media (min-width:861px){
  @container (min-width:560px){
    .page-head-row>.page-head-text{display:contents}
    .page-head-row>.page-head-text>h1{flex:1 1 0;min-width:0;margin:0;align-self:center}
    .page-head-row>.row{align-self:center}
    .page-head-row>.page-head-text>.page-lead{order:1;flex:1 0 100%;margin-top:-12px}
  }
}
/* страница с панелью разделов: контент выровнен по левому краю с полем 32 px от панели, а не по центру экрана */
.page.flush{margin:0;max-width:none;padding:24px var(--panel-gap)}
/* сетка «панель 280 + контент» внутри страницы (панель разделов живёт в самой странице, например на витрине) */
.page-body{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);gap:var(--panel-gap);align-items:start}
/* колонка контента: до 720 px (карточки, формы) или во всю ширину (плитки, таблицы); блоки сверху вниз через 24 px */
.content-col,.content-wide{display:flex;flex-direction:column;gap:24px;min-width:0}
.content-col{max-width:var(--content-w)}
.content-wide{max-width:none}
/* подпись группы: PT Sans Bold 13, капитель, разрядка */
.subhead{font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
.mono{font-family:var(--mono);font-size:var(--fs-sm)}
.blocks{display:flex;flex-direction:column;gap:24px}

/* левая панель разделов (эталон «Аккаунт → Настройки»): заголовок navy 16, серая подпись, список разделов одной колонкой,
   активный раздел тинтом --brand-sky-4 с синим текстом, без иконок. Группы разделов подписью капителью. */
.sections{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.sections-head{padding:6px 10px 10px}
.sections-title{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--heading);line-height:1.2}
.sections-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sections-group{padding:12px 10px 4px;font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sections-item{display:block;padding:8px 10px;border-radius:var(--radius);color:var(--muted);font-size:var(--fs);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sections-item:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.sections-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.sections-item:focus-visible{outline:none;box-shadow:var(--focus)}
.sections-item .badge{margin-left:6px;vertical-align:1px}
/* горизонтальная лента разделов (.sections-strip с чипами .sections-chip): только на телефоне, где панель разделов спрятана */
.sections-strip{display:none;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px 14px;padding:0 12px 6px}
.sections-strip::-webkit-scrollbar{display:none}
.sections-chip{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;background:var(--panel)}
.sections-chip:hover{text-decoration:none;color:var(--text)}
.sections-chip.active{background:var(--accent-soft);border-color:transparent;color:var(--accent-text);font-weight:700}
.sections-chip .badge{margin-left:4px}

/* вкладки внутри раздела (как «Промты | Навыки»): только для деления содержимого одного раздела */
.subtabs{display:inline-flex;background:var(--panel-2);border-radius:var(--radius);padding:2px;flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{border:0;background:transparent;padding:5px 12px;border-radius:6px;color:var(--muted);cursor:pointer;font:inherit;font-size:var(--fs-sm);line-height:1.3;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.subtab:hover{color:var(--text)}
.subtab.active{background:var(--panel);color:var(--accent-text);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.subtab:focus-visible{outline:none;box-shadow:var(--focus)}

/* плитки KPI: 3-5 ключевых чисел в один ряд, цифра Muller 22 сверху, подпись 13 снизу; на телефоне 2 в ряд */
.kpi-row,.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpis{margin:8px 0 14px} /* псевдоним прежнего блока .kpis (аккаунт, админка): отступы как раньше */
.kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
.kpi .v{font-family:var(--font-head);font-weight:800;font-size:22px;line-height:1.2;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .l{font-size:var(--fs-sm);color:var(--muted);line-height:1.3}
.kpi.ok .v{color:var(--ok)}.kpi.warn .v{color:var(--warn)}.kpi.danger .v{color:var(--danger)}

/* вердикт: одна фраза Muller 16 с левой полоской цвета статуса на фоне --panel-2; не больше одного на экране */
.verdict{margin:0;padding:12px 16px;background:var(--panel-2);border-left:3px solid var(--brand-cyan);border-radius:0 var(--radius-lg) var(--radius-lg) 0;font-family:var(--font-head);font-weight:800;font-size:16px;line-height:1.35;color:var(--heading)}
.verdict.ok{border-left-color:var(--ok)}.verdict.warn{border-left-color:var(--warn)}.verdict.danger{border-left-color:var(--danger)}
.verdict em{font-style:normal;color:var(--brand-cyan)} /* выделение слов голубым */
.verdict .verdict-note{display:block;margin-top:4px;font-family:var(--font);font-weight:400;font-size:var(--fs-sm);color:var(--muted)}

/* список строк: строка 44-56 px, имя слева, метаданные --muted, действия справа при наведении, без вертикальных линий.
   Одиночный .row вне .rows остаётся flex-помощником (row, row.between, wrap). */
.rows{display:flex;flex-direction:column;min-width:0}
.rows>.row{min-height:48px;padding:8px 0;gap:12px;border-top:1px solid var(--line);align-items:center}
.rows>.row:first-child{border-top:0}
.rows>.row.active{background:var(--accent-soft);border-radius:var(--radius);padding-left:10px;padding-right:10px}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-title{color:var(--text);overflow-wrap:anywhere}
.row-title a{color:inherit}
.row-meta{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-side{flex:none;font-size:var(--fs-sm);color:var(--muted);text-align:right;white-space:nowrap}
.row-actions{flex:none;display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .15s}
.rows>.row:hover .row-actions,.rows>.row:focus-within .row-actions,.rows.actions-visible .row-actions{opacity:1}
@media (hover:none){.row-actions{opacity:1}}

/* тумблер: 36x20, ползунок 16, вкл = navy (--primary), подпись слева; недоступен серым с подсказкой (title).
   .switch.chip: вариант композера чата (как .ch-switch в chat.css): пилюля на --panel-2, подпись справа, дорожка 28x16. */
.switch{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:var(--text);font:inherit;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;max-width:100%}
.switch .sw-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch .sw-track{position:relative;flex:none;width:36px;height:20px;border-radius:999px;background:var(--line-strong);transition:background .15s}
.switch .sw-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--on-primary);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch.on .sw-track{background:var(--primary)}
.switch.on .sw-knob{left:18px}
.switch:hover:not(.on):not(:disabled):not(.disabled) .sw-track{background:var(--faint)}
.switch.on:hover:not(:disabled):not(.disabled) .sw-track{background:var(--primary-hover)}
.switch:focus-visible{outline:none}.switch:focus-visible .sw-track{box-shadow:var(--focus)}
.switch:disabled,.switch.disabled{opacity:.55;cursor:default}
.switch.label-right{flex-direction:row-reverse}
.switch.sm .sw-track{width:28px;height:16px}.switch.sm .sw-knob{width:12px;height:12px}.switch.sm.on .sw-knob{left:14px}
.switch.chip{flex-direction:row-reverse;gap:7px;padding:4px 10px 4px 6px;border:1px solid transparent;border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:var(--fs-sm);transition:border-color .15s,color .15s}
.switch.chip:hover{border-color:var(--line-strong)}
.switch.chip.on{color:var(--text)}
.switch.chip .sw-track{width:28px;height:16px}.switch.chip .sw-knob{width:12px;height:12px}.switch.chip.on .sw-knob{left:14px}
.switch.chip.on .sw-track{background:var(--accent)}

/* пустое состояние: одна фраза --muted и одна кнопка, без иллюстраций; .boxed добавляет пунктирную рамку */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0;color:var(--muted)}
.empty p{margin:0}
.empty.boxed{padding:20px 16px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
.empty.center{align-items:center;text-align:center}

/* подсказка «?»: круглая кнопка 24 px раскрывает текст под блоком (абзацы мелкого текста в потоке запрещены) */
.hint-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:700;line-height:1;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.hint-btn:hover,.hint-btn.active{color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft)}
.hint-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.hint-box{background:var(--panel-2);border-radius:var(--radius-lg);padding:12px 16px;font-size:var(--fs-sm);color:var(--muted);line-height:1.5;max-width:820px}
.hint-box b{color:var(--text)}.hint-box p{margin:0}.hint-box p+p{margin-top:6px}

/* подпись кнопки-иконки (ДС §0 п.3): атрибут data-tip, помощник tip(el, text, pos) в ui.js. Плашка одна на документ, рисуется в body
   и ставится скриптом (у края экрана сдвигается внутрь окна), появляется сразу, без задержки системного title. Вид тихий:
   серая плашка --panel-3 с текстом --muted 12 px, без чёрного фона. */
.tip-pop{position:fixed;left:0;top:0;z-index:90;max-width:min(280px,calc(100vw - 12px));padding:5px 9px;border-radius:7px;background:var(--panel-3);color:var(--muted);font:400 var(--fs-xs)/1.3 var(--font);box-shadow:0 1px 3px rgba(0,0,0,.08);pointer-events:none;animation:tipin .12s ease}
@keyframes tipin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tip-pop{animation:none}}

/* меню «…» (actionMenu): всплывает в body, опасный пункт последним и красным */
.menu-btn{min-width:32px;justify-content:center;font-weight:700;letter-spacing:.1em}
.action-menu{min-width:220px}
.action-menu .sel-item{border:0;background:transparent;width:100%;text-align:left;font:inherit;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.action-menu .sel-item:hover,.action-menu .sel-item:focus-visible{background:var(--panel-2);outline:none}
.action-menu .sel-item.danger{color:var(--danger)}

@media (max-width:860px){
  .page.flush{padding:12px}
  .page-body{grid-template-columns:1fr}
  .page-body>.sections{display:none}
  .kpi-row,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}
  .row-actions{opacity:1}
  .row-meta{white-space:normal}
  .sel-item:has(.sel-hint) .sel-hint{flex-basis:100%;text-align:left} /* на телефоне пояснение пункта отдельной строкой под названием */
  .sections-strip{display:flex}
}

/* ---------- поля даты и времени без системных календарей (datePick и timePick в ui.js, ДС §5; D5) ----------
   Чип даты повторяет компактный список выбора (.sel-compact), текстовые поля «дд.мм.гггг» и «ЧЧ:ММ» появляются
   рядом; ошибка строкой .field-error под ними. Цвета только через токены. */
.datepick{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;vertical-align:middle}
.datepick>.sel{max-width:100%}
.datepick-input{width:122px;flex:none;font-variant-numeric:tabular-nums}
.datepick.block{display:flex;width:100%}
.datepick.block>.sel{flex:1;min-width:0}.datepick.block .sel-btn{width:100%}
.datepick>.field-error,.timepick>.field-error{flex-basis:100%;margin:0}
.timepick{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;vertical-align:middle}
.timepick.block{display:flex;width:100%}
.timepick-input{width:88px;flex:none;font-variant-numeric:tabular-nums;text-align:center}
.timepick.block .timepick-input{flex:1;text-align:left}
.timepick-btn,.btn.icon.timepick-btn{width:41px;height:41px;flex:none;color:var(--muted)} /* той же высоты, что поле времени */
.timepick-btn svg{width:12px;height:12px}
.timepick-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-text)}
.pick-menu{max-height:min(320px,60vh);display:flex;flex-direction:column}
.pick-menu .sel-list{overflow:auto;max-height:100%}
.pick-menu .sel-item{justify-content:space-between}

/* ---------- M1c: единые окна, формы, графики (ревизия Q1c-13, Q1c-12, Q1a-6, Q1a-1, Q1c-1, Q1c-6, Q1c-22, Q1a-23) ---------- */
/* окна одной ширины: 560 px; широкие 880 px (класс wide через modalOptions или по содержимому: просмотр файлов и картинок,
   ручная настройка плагина, история промта) */
.modal{width:min(560px,100%);min-width:0;max-width:100%}
.modal.wide,.modal:has(.modal-wide,.pg-form,.sk-preview,.prj-text-view,.prj-img-view,.ch-img-view,.fb-preview,.pr-versions){width:min(880px,100%)}
/* формы: между рядами полей 12 px; у некомпактного списка с подписью двоеточие; при ошибке подсказка под полем прячется */
.form-grid{gap:12px 16px}
.sel:not(.sel-compact) .sel-label:not(:empty)::after{content:":"}
.fld:has(>.field-error:not([hidden]))>.field-hint{display:none}
/* столбчатый график в натуральную величину: много столбцов прокручиваются внутри обёртки, страница не растёт */
.chart-bars{min-width:0}
.chart-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden}
/* горизонтальные полоски разметкой: название, полоска, значение; текст обычного размера на любой ширине */
.hbars{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.hbar{display:grid;grid-template-columns:minmax(0,220px) minmax(60px,1fr) 76px;gap:6px 12px;align-items:center;font-size:var(--fs-sm);line-height:1.35}
.hbar-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.hbar-v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:860px){
  .hbar{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .hbar .progress{grid-column:1/-1;grid-row:2}
  .kpi-row>.kpi:last-child:nth-child(odd){grid-column:1/-1} /* пятая плитка на телефоне не висит половинкой */
}
.page-head{margin-bottom:24px} /* от шапки страницы до первого блока 24 px (ДС §1.3, Q1a-22) */
/* плитка с текстом вместо числа («нет данных»): обычный текст 15 px, а не кегль цифры (Q1a-22); класс text у .kpi */
.kpi.text .v{font-family:var(--font);font-weight:400;font-size:var(--fs);color:var(--muted);line-height:1.5}
/* M1b: строка пояснения под заголовком модального окна (окна команды и памяти) */
.modal-lead{margin:0 0 12px;font-size:var(--fs-sm);color:var(--muted)}
/* телефон: h1 страницы, повторяющий название в верхней строке каркаса, скрыт (ui.js ставит dup-title; критик 23.09, п.14) */
@media (max-width:860px){ h1.dup-title{display:none} .page-head:not(.page-head-row):has(>.page-head-text>h1.dup-title:only-child){display:none} }
/* Z2: общие поля формы одной высоты и кегля (ревизия Q1a-6, Q1b-15). Чип даты в форме (datePick с block) того же размера,
   что поле .input и список .sel.block: 41 px и 15 px, а не 32 px и 13 px; поле адреса или ключа моноширинным шрифтом
   (.input.mono) того же кегля, что соседнее поле названия, иначе оно на 3 px ниже */
.datepick.block>.sel:not(.sel-compact) .sel-btn{padding:8px 10px;font-size:var(--fs);line-height:var(--lh)}
.input.mono{font-size:var(--fs)}