/* ============================================================================
   Дизайн-система сервиса «Сеть ПВЗ Ozon».
   Значения перенесены один в один из reference/demo/demo-v3.html [L7–242].
   Разложено по секциям; демо-только блоки (плашка «демо-фронт», список ролей
   для быстрого входа) не переносились.
   Ничего внешнего не грузим: шрифты — системные, иконки — символы и inline-SVG.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Токены
   ------------------------------------------------------------------------- */
:root{
  --bg:#F2F4F8; --card:#FFFFFF; --ink:#141B2D; --muted:#5F6878; --line:#E1E6EE; --line2:#EEF1F6;
  --accent:#1F4FE0; --accent-soft:#E6ECFF;
  --green:#1E9E62; --green-soft:#E1F4EA; --amber:#D99A00; --amber-soft:#FFF3D3; --red:#D8392F; --red-soft:#FCE3E0;
  --c-salary:#34456B; --c-rent:#6E80A8; --c-office:#A9B6CF; --c-tax:#CDD3DE; --c-other:#E38F6A; --c-profit:#1E9E62;
  --sans:-apple-system,"SF Pro Text","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Цвета, которые в демо были вписаны в правила руками — вынесены в токены,
     значения не менялись. */
  --amber-ink:#9A6D00;      /* текст на amber-фоне (плитки, пилюли, статусы) */
  --accent-hover:#1843C4;   /* hover синей кнопки */
  --bar-grey:#B8C2D6;       /* серый столбик графика, точка легенды */
  --dash:#C9D2E2;           /* пунктир зоны файла, рамка плановой ячейки */
  --tint:#FBFCFE;           /* фон зоны файла и редактируемой ячейки */
  --bot-bg:#E4F4F9; --bot-ink:#0B7A9B;    /* плашка «бот» */
  --form-bg:#F1E9FB; --form-ink:#6A3FB5;  /* плашка «форма» */
  --newpt-bg:#FFFBEE;       /* карточка нового кода ПВЗ */
}

/* ---------------------------------------------------------------------------
   2. База и типографика
   ------------------------------------------------------------------------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.35;-webkit-text-size-adjust:100%}
body{padding:0 0 60px}
.wrap{max-width:1120px;margin:0 auto;padding:16px}
h1{font-size:26px;letter-spacing:-.02em;margin:0;font-weight:800}
h2{font-size:17px;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
h3{font-size:14px;margin:0 0 8px;font-weight:700}
.sub{color:var(--muted);font-size:13px;margin-top:4px}
/* .num обязателен на всех числовых ячейках — иначе цифры «пляшут» */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--muted)} .small{font-size:12px} .b{font-weight:700}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--muted)}
/* Знак суммы: .neg — минус красным, .pos — плюс зелёным (в таблицах, .kv, KPI, стеке) */
.neg{color:var(--red)} .pos{color:var(--green)}
a{color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Текст только для скринридера (подписи к таблицам и полосе месяцев) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------------
   3. Шапка приложения
   ------------------------------------------------------------------------- */
.appbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.appbar .in{max-width:1120px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:16px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .lg{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:7px 11px;border-radius:9px;color:var(--muted);font-weight:600;text-decoration:none;font-size:14px;white-space:nowrap}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.user{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px}
.user select{width:auto;padding:5px 26px 5px 8px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}

/* ---------------------------------------------------------------------------
   4. Заголовок страницы, полоса месяцев, вкладки
   ------------------------------------------------------------------------- */
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.months{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.months::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* будущий месяц — пунктирный чип «+ сен» */
.chip.next{border-style:dashed;color:var(--muted);background:transparent}
.chip.next[aria-pressed="true"]{background:var(--ink);color:#fff;border-style:solid}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 16px;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
/* строка «Пороги рентабельности:» с инлайн-инпутами */
.thr{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.thr input[type=number]{width:52px;font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;text-align:right}

/* ---------------------------------------------------------------------------
   5. Карточки, сетки, KPI
   ------------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.card.tint{background:var(--accent-soft);border-color:transparent}
.grid{display:grid;gap:14px}
.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi .v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.kpi .d{font-size:12px;margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cols{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:14px;align-items:start}
@media (max-width:760px){ .two,.cols{grid-template-columns:1fr} }
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hd h2{margin:0}

/* ---------------------------------------------------------------------------
   6. Табло светофора (плитки точек)
   ------------------------------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.tile{border:0;border-radius:12px;padding:10px 10px 9px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);background:var(--line2);min-height:84px;display:flex;flex-direction:column;gap:2px}
.tile .n{font-size:12.5px;font-weight:600;line-height:1.15;display:flex;justify-content:space-between;gap:4px;align-items:baseline}
.tile .m{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:auto;padding-top:6px}
.tile .p{font-size:11.5px;color:var(--muted);white-space:nowrap}
.tile.z-green{background:var(--green-soft)} .tile.z-green .m{color:var(--green)}
.tile.z-amber{background:var(--amber-soft)} .tile.z-amber .m{color:var(--amber-ink)}
.tile.z-red{background:var(--red-soft)} .tile.z-red .m{color:var(--red)}
.tile.z-new{background:var(--accent-soft)} .tile.z-new .m{color:var(--accent)}
.tile .tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);flex:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-top:10px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.green{background:var(--green)} .dot.amber{background:var(--amber)} .dot.red{background:var(--red)} .dot.new{background:var(--accent)} .dot.grey{background:var(--bar-grey)}
@media (prefers-reduced-motion:no-preference){ .tile{transition:transform .12s} .tile:hover{transform:translateY(-1px)} }

/* ---------------------------------------------------------------------------
   7. Таблицы
   ------------------------------------------------------------------------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 8px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap;vertical-align:middle}
th{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase;user-select:none;position:sticky;top:0;background:var(--card);z-index:1}
th:first-child,td:first-child{text-align:left;padding-left:0}
td.name{font-weight:600}
td.l,th.l{text-align:left}
td.name button,.lnk{all:unset;cursor:pointer;font-weight:600;color:inherit}
td.name button:hover,.lnk:hover{text-decoration:underline}
.lnk.a{color:var(--accent)}
tr.total td{border-top:1px solid var(--line);font-weight:700}
tr.median td{color:var(--muted);font-style:italic;border-top:1px solid var(--line)}
/* строка-разделитель группы (в демо было два одинаковых класса: .group и .grp) */
tr.group td,tr.grp td{background:var(--line2);font-weight:700;font-size:12.5px;padding:5px 8px}
tr.grp td:first-child{padding-left:6px}
tr.sub td{color:var(--muted);font-size:12.5px;padding:4px 8px}
/* строка кода ПВЗ, ждущего подтверждения */
tr.pending td{color:var(--muted)} tr.pending td.name{color:var(--ink)}
/* Редактируемая сумма: в таблице — вся ячейка (td.edit), внутри ячейки — .zp-edit (Зарплата) */
td.edit,.zp-edit{background:var(--tint);outline:1px dashed var(--dash);border-radius:4px;cursor:text}
td.edit{min-width:60px}
td.edit:focus,.zp-edit:focus{outline:2px solid var(--accent);background:#fff}
/* Единственная ячейка таблицы, которой можно переноситься по словам (остальные — nowrap) */
td.wrap{white-space:normal;min-width:180px}
.z{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700;font-size:13px}
.z.green{background:var(--green-soft);color:var(--green)} .z.amber{background:var(--amber-soft);color:var(--amber-ink)}
.z.red{background:var(--red-soft);color:var(--red)} .z.new{background:var(--accent-soft);color:var(--accent)}
.badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-left:6px}
/* подсветка доли расходов выше медианы: +6 п.п. — жёлтым, +12 п.п. — красным */
.hi-amber{color:var(--amber-ink);font-weight:700} .hi-red{color:var(--red);font-weight:700}
.warnx{color:var(--red);font-weight:700}
th.hasd{color:var(--green)}          /* месяц, по которому загружены строки PDF */
.dense td,.dense th{font-size:12.5px;padding:6px 6px}
/* сортируемый заголовок: ↑/↓ рисует table() из ui.js */
th.sortable{cursor:pointer}
th[aria-sort]{color:var(--ink)}
/* матрица доступов в Настройках */
.matrix td,.matrix th{text-align:center} .matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix input{width:16px;height:16px;margin:0}
/* .sec — второстепенная колонка, прячется на узком экране */
@media (max-width:640px){ .sec{display:none} table{font-size:13px} th,td{padding:7px 6px} }

/* ---------------------------------------------------------------------------
   8. Статусы и источники записей
   ------------------------------------------------------------------------- */
.src{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;white-space:nowrap}
.src.site{background:var(--accent-soft);color:var(--accent)} .src.bot{background:var(--bot-bg);color:var(--bot-ink)} .src.file{background:var(--line2);color:var(--muted)} .src.auto{background:var(--green-soft);color:var(--green)}
.src.form{background:var(--form-bg);color:var(--form-ink)} .src.hand{background:var(--amber-soft);color:var(--amber-ink)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.st.ok{color:var(--green)} .st.wait{color:var(--amber-ink)} .st.no{color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--line2);color:var(--muted)}
.pill.on{background:var(--green-soft);color:var(--green)} .pill.open{background:var(--amber-soft);color:var(--amber-ink)} .pill.off{background:var(--red-soft);color:var(--red)}

/* ---------------------------------------------------------------------------
   9. Формы и кнопки
   ------------------------------------------------------------------------- */
select,input[type=text],input[type=number],input[type=date],input[type=password],input[type=file],textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
textarea{resize:vertical;min-height:56px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6878' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.btn{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--line2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-hover)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--accent)} .btn.ghost:hover{background:var(--accent-soft)}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px}
.field label{color:var(--muted);font-weight:600;font-size:12.5px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.form .wide{grid-column:1/-1}
/* Форма журнала вложений: сумма · комментарий · кнопка (Аналитика и Настройки) */
.inv-form{grid-template-columns:160px 1fr auto;align-items:end}
@media (max-width:560px){ .inv-form{grid-template-columns:1fr} }
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 10px;font-size:13px;margin-top:4px}
.checks label{display:flex;gap:6px;align-items:center;cursor:pointer}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{all:unset;padding:6px 11px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.drop{border:1.5px dashed var(--dash);border-radius:12px;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--tint)}
.drop.done{border-style:solid;border-color:var(--green-soft);background:var(--green-soft)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}   /* файл тащат над зоной */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.filters select,.filters input{width:auto;min-width:130px;padding:6px 26px 6px 10px;font-size:13px}
.note{background:var(--line2);border-radius:10px;padding:10px 12px;font-size:13px;margin-top:10px}
.note.warn{background:var(--amber-soft)}
.note.ok{background:var(--green-soft)}
.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.toggle input{width:auto;margin:0}

/* ---------------------------------------------------------------------------
   10. Стек «куда уходит рубль дохода», графики, разборы
   ------------------------------------------------------------------------- */
.stack{display:grid;grid-template-columns:124px 1fr 52px;gap:6px 10px;align-items:center;font-size:13px}
.stack .bar{height:18px;display:flex;border-radius:4px;overflow:hidden;background:var(--line2);position:relative}
.stack .sg{height:100%}
.stack .rev{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--red)}
.stack .lbl{font-weight:600;line-height:1.15}
.stack .val{font-weight:700;text-align:right}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin:0 0 12px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mini{border:1px solid var(--line);border-radius:12px;padding:10px 12px 8px}
.mini .h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;margin-bottom:2px}
.mini .h span{font-weight:400;color:var(--muted);font-size:12px}
svg{display:block;width:100%;height:auto}
.axis{font-size:10px;fill:var(--muted)}
.reviews{display:grid;gap:10px}
.rv{border-top:1px solid var(--line2);padding-top:10px} .rv:first-child{border-top:0;padding-top:0}
.rv-h{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-l{display:grid;grid-template-columns:78px 1fr;gap:6px;font-size:13.5px;line-height:1.35;padding:2px 0}
.rv-k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:3px}
@media (max-width:640px){ .stack{grid-template-columns:92px 1fr 44px;font-size:12px} .rv-l{grid-template-columns:66px 1fr;font-size:13px} }

/* ---------------------------------------------------------------------------
   11. Ведомость выходов
   ------------------------------------------------------------------------- */
.ved{font-size:12.5px} .ved th,.ved td{padding:3px 4px} .ved th.d,.ved td.c{text-align:center;padding:2px 1px;min-width:24px}
.ved th.d.we{color:var(--red)} .ved th.d.today{color:var(--accent)}
.ved td.nm{white-space:nowrap;font-weight:600;position:sticky;left:0;background:var(--card);z-index:1;padding-left:0}
.cell{width:22px;height:22px;border-radius:6px;margin:0 auto;display:grid;place-items:center;font-size:9.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;color:transparent;position:relative;background:transparent}
.cell.plan{border-color:var(--dash);background:#fff}
.cell.ok{background:var(--green-soft);color:var(--green)}
.cell.ok.unc{background:#fff;border-color:var(--green);color:var(--green)}
.cell.miss{background:var(--red-soft);color:var(--red)}
.cell.extra{background:var(--accent-soft);color:var(--accent)}
.cell.diff::after{content:"";position:absolute;inset:-4px;border-radius:8px;border:2px solid var(--amber)}
.cell:hover{filter:brightness(.95)}
.vedleg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:10px;align-items:center}
.vedleg .cell{display:inline-grid;vertical-align:middle;margin:0 4px 0 0;cursor:default}

/* ---------------------------------------------------------------------------
   12. Модалка и тост
   ------------------------------------------------------------------------- */
.overlay{position:fixed;inset:0;background:rgba(20,27,45,.45);display:none;z-index:20;align-items:flex-end;justify-content:center;padding:0}
.overlay.open{display:flex}
.sheet{background:var(--card);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 18px 28px}
@media (min-width:720px){ .overlay{align-items:center;padding:20px} .sheet{border-radius:16px;max-height:90vh} }
.sheet .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.close{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto auto;gap:5px 12px;font-size:13.5px;margin-top:6px}
.kv .a{text-align:right;font-weight:600} .kv .bb{text-align:right;color:var(--muted);min-width:56px}
.kv .tot{border-top:1px solid var(--line);padding-top:5px;font-weight:700}
/* вкладки внутри модалки: Строки PDF / По месяцам / Условия тарифа */
.mini-tabs{display:flex;gap:4px;margin:12px 0 10px;border-bottom:1px solid var(--line)}
.mini-tabs button{all:unset;cursor:pointer;padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.mini-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;transition:.18s;z-index:40;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------------------------------------------------------------------------
   13. Страница входа
   ------------------------------------------------------------------------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:100%;max-width:400px;padding:22px}
/* список кнопок «название слева / пояснение справа» (в демо — выбор роли) */
.roles{display:grid;gap:6px;margin-top:6px}
.roles button{all:unset;cursor:pointer;padding:9px 12px;border-radius:10px;border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.roles button:hover{background:var(--line2)}
.roles button span{font-size:12px;color:var(--muted)}
.foot{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------------------------------------------------------------------------
   14. Настройки, текстовые блоки, сценарии бота, новые коды ПВЗ
   ------------------------------------------------------------------------- */
.setnav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.setnav button{all:unset;cursor:pointer;padding:7px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted)}
.setnav button[aria-pressed="true"]{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.textblock{font-size:13.5px;line-height:1.45} .textblock p{margin:0 0 8px} .textblock ul{margin:0 0 8px;padding-left:18px}
.textblock code{background:var(--line2);border-radius:5px;padding:1px 6px;font-size:12.5px;font-family:inherit}
.bubble{display:inline-block;background:var(--line2);border-radius:12px 12px 12px 3px;padding:7px 11px;font-size:13px;margin:3px 0;max-width:420px}
.bubble.me{background:var(--accent-soft);border-radius:12px 12px 3px 12px;color:var(--ink)}
.chat{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.chat .me{align-self:flex-end} .chat .kbd{align-self:flex-start}
.kbd{display:inline-flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.kbd span{border:1px solid var(--line);border-radius:7px;padding:3px 8px;font-size:12px;background:#fff}
.newpt{border:1.5px solid var(--amber);border-radius:12px;padding:12px 14px;margin-top:10px;background:var(--newpt-bg)}
.newpt .h{font-weight:700;margin-bottom:4px}
.newpt input[type=text]{width:auto;min-width:220px;padding:6px 10px;font-size:13.5px}
.steps{display:grid;gap:6px;font-size:13.5px}
.steps div{display:flex;gap:8px;align-items:flex-start}
.steps .ok{color:var(--green)} .steps .no{color:var(--muted)}

/* ---------------------------------------------------------------------------
   15. Пустые состояния и загрузка
   ------------------------------------------------------------------------- */
.empty{text-align:center;padding:36px 16px}
.empty .b{font-size:16px}
.empty .small{margin-top:4px}
/* индикатор загрузки — в демо его не было, собран из тех же токенов */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;padding:28px 16px}
.spin{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }