/* ===================================================================== tokens.css (без изменений) */
/* CicerONE — токены. Светлая тема по умолчанию, тёмная по настройке системы;
   data-theme="light|dark" на <html> принудительно задаёт тему. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --row-h: 40px;
  --control-h: 32px;
  --chip-h: 22px;
  --icon: 16px;
  --content-max: 1280px;
  --drawer-w: 520px;
  --font-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", "Liberation Mono", Menlo, monospace;
}
:root, [data-theme="light"] {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f1f3f6;
  --line: #e3e6eb;
  --line-strong: #c9ced6;
  --text: #1b1f24;
  --text-2: #596270;
  --text-3: #636c7b;
  --accent: #2c5cc5;
  --accent-ink: #ffffff;
  --accent-bg: #e7edfa;
  --ok: #1a7a43;
  --ok-bg: #e3f3e8;
  --warn: #8f5400;
  --warn-bg: #fcefd6;
  --bad: #bf2f2a;
  --bad-bg: #fbe6e5;
  --chip-text: #4a525d;
  --chip-bg: #eceef2;
  --code-bg: #f1f3f6;
  --scrim: rgba(16,24,40,0.45);
  --shadow-pop: 0 4px 16px rgba(16,24,40,0.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1014;
    --panel: #15181d;
    --panel-2: #1c2026;
    --line: #2a2f37;
    --line-strong: #3b424c;
    --text: #e5e7ea;
    --text-2: #a1a9b4;
    --text-3: #8b94a0;
    --accent: #6e9bff;
    --accent-ink: #0b1020;
    --accent-bg: #1a2645;
    --ok: #4fbf7f;
    --ok-bg: #12281b;
    --warn: #e0a640;
    --warn-bg: #2c2312;
    --bad: #f2716a;
    --bad-bg: #311816;
    --chip-text: #b8bfc8;
    --chip-bg: #232830;
    --code-bg: #1b1f25;
    --scrim: rgba(0,0,0,0.6);
    --shadow-pop: 0 4px 16px rgba(0,0,0,0.5);
  }
}
[data-theme="dark"] {
  --bg: #0e1014;
  --panel: #15181d;
  --panel-2: #1c2026;
  --line: #2a2f37;
  --line-strong: #3b424c;
  --text: #e5e7ea;
  --text-2: #a1a9b4;
  --text-3: #8b94a0;
  --accent: #6e9bff;
  --accent-ink: #0b1020;
  --accent-bg: #1a2645;
  --ok: #4fbf7f;
  --ok-bg: #12281b;
  --warn: #e0a640;
  --warn-bg: #2c2312;
  --bad: #f2716a;
  --bad-bg: #311816;
  --chip-text: #b8bfc8;
  --chip-bg: #232830;
  --code-bg: #1b1f25;
  --scrim: rgba(0,0,0,0.6);
  --shadow-pop: 0 4px 16px rgba(0,0,0,0.5);
}

/* ===================================================================== components.css (без изменений) */
/* CicerONE — общие стили. Только CSS-переменные из tokens.css; переносится в app.css как есть. */
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/20px var(--font-sans); -webkit-font-smoothing: antialiased; }
.an-stage { background: var(--bg); color: var(--text); font: 14px/20px var(--font-sans); }
.an-stage *, .an-stage *::before, .an-stage *::after { box-sizing: border-box; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i-sm { width: 14px; height: 14px; vertical-align: -2px; }
code, .mono { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.sep { color: var(--text-3); margin: 0 6px; }
a, .link { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover, .link:hover { text-decoration: underline; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Полоса демонстрации над макетом (не часть интерфейса) */
.an-demo { display: flex; align-items: center; gap: 12px; padding: 8px 24px; border-bottom: 1px dashed var(--line-strong); font-size: 12px; color: var(--text-2); background: var(--bg); }
.an-demo b { color: var(--text); font-weight: 600; }
.an-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; margin-left: auto; }
.an-seg button { all: unset; cursor: pointer; padding: 2px 10px; font-size: 12px; color: var(--text-2); }
.an-seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 600; }

/* Шапка приложения */
.an-app { width: 1280px; margin: 0 auto; background: var(--bg); }
.an-top { height: 48px; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.an-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.an-brand .mark { width: 20px; height: 20px; border-radius: var(--radius-sm); background: var(--text); color: var(--panel); display: grid; place-items: center; font: 600 11px/1 var(--font-mono); }
.an-nav { display: flex; gap: 4px; height: 100%; }
.an-nav a { display: flex; align-items: center; padding: 0 10px; color: var(--text-2); border-bottom: 2px solid transparent; text-decoration: none; }
.an-nav a.on { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
.an-top-r { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-2); }
.an-userbtn { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }

/* Шапка проекта и вкладки */
.an-main { padding: 16px 24px 24px; }
.an-crumbs { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.an-crumbs a { color: var(--text-2); }
.an-phead { display: flex; align-items: flex-start; gap: 24px; }
.an-phead h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.an-phead p { margin: 4px 0 0; color: var(--text-2); }
.an-phead-r { margin-left: auto; text-align: right; }
.an-phead-r .lbl { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.an-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.an-tabs a { padding: 8px 12px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; display: flex; gap: 6px; align-items: center; }
.an-tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.an-tabs .cnt { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.an-tabs .cnt.warn { color: var(--warn); }
.an-toolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.an-summary { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-2); }
.an-summary .s { display: inline-flex; align-items: center; gap: 4px; }
.an-summary .s.ok { color: var(--ok); } .an-summary .s.run { color: var(--accent); } .an-summary .s.bad { color: var(--bad); } .an-summary .s.warn { color: var(--warn); }
.an-toolbar .grow { flex: 1; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: 500 13px/1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--panel-2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--panel-2); color: var(--text); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.icon { width: 32px; padding: 0; justify-content: center; }
.btn.sm.icon { width: 28px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.add { border-style: dashed; background: transparent; color: var(--text-2); }
.btn.add:hover { color: var(--text); background: var(--panel-2); }
.btn .spin { animation: an-spin 1s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }

/* Код / адрес с копированием */
.an-code { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 2px 0 8px; height: 28px; }
.an-code code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-copy { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 12px; }
.an-copy:hover { background: var(--panel); color: var(--text); }
.an-copy.is-copied { color: var(--ok); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--chip-bg); color: var(--chip-text); font: 12px/1 var(--font-mono); }
.kind { font-size: 12px; color: var(--text-2); }

/* Чип состояния: цвет + иконка + слово */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--chip-bg); color: var(--chip-text); font-variant-numeric: tabular-nums; }
.chip .i { width: 14px; height: 14px; vertical-align: 0; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.run { background: var(--accent-bg); color: var(--accent); }
.chip.run .i { animation: an-spin 1.2s linear infinite; }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.plain { background: transparent; padding-left: 0; }

/* Свежесть синхронизации */
.fresh { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fresh .rel { color: var(--text-3); margin-left: 6px; }
.fresh.warn .rel { color: var(--warn); }

/* Прогресс задания: лесенка шагов в одну полосу */
.prog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 168px; flex: none; }
.steps.wide { width: 100%; }
.steps i { display: block; height: 4px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.steps i.done { background: var(--accent); }
.steps i.cur { background: var(--accent-bg); }
.steps i.cur::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 50%); background: var(--accent); border-radius: 2px; }
.steps i.cur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: an-sheen 1.6s ease-in-out infinite; }
@keyframes an-sheen { to { transform: translateX(100%); } }
.prog b { color: var(--accent); font-weight: 600; }
.prog .step-name { color: var(--text); }

/* Плашки */
.banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px; line-height: 18px; }
.banner .i { margin-top: 1px; }
.banner .t { flex: 1; min-width: 0; color: var(--text); }
.banner .t b { font-weight: 600; }
.banner .t .mono { color: inherit; }
.banner .acts { display: flex; gap: 6px; flex: none; align-self: center; }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.info { background: var(--accent-bg); color: var(--accent); }

/* Меню «…» */
.menu { position: absolute; z-index: 5; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 4px; font-size: 13px; }
.menu a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.menu a:hover { background: var(--panel-2); }
.menu a.danger { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu .hint { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

/* Общие карточки */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12.5px; color: var(--text-2); }
.facts .f { display: inline-flex; align-items: center; gap: 6px; }
.facts .f .num { color: var(--text); }
.src { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); }
.src code { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================================================================== экран 3 «Проект → Конфигурации» (из 03-project-configs.html) */
.b-wrap { display: grid; grid-template-columns: minmax(0,1fr) 408px; gap: 16px; align-items: start; }
.tbl { overflow: hidden; }
.tr { display: grid; grid-template-columns: minmax(0,1fr) 168px 176px 32px; column-gap: 12px; align-items: center; min-height: 40px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); position: relative; }
.th { min-height: 34px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--panel-2); }
.th .srt { display: inline-flex; gap: 2px; align-items: center; }
.tr.grp-row { background: var(--panel); }
.tr.grp-row .nm { font-weight: 600; }
.tr.child .c1 { padding-left: 40px; position: relative; }
.tr.child .c1::before { content: ""; position: absolute; left: 13px; top: -14px; bottom: 50%; border-left: 1px solid var(--line-strong); }
.tr.child.mid .c1::before { bottom: -14px; }
.tr.child .c1::after { content: ""; position: absolute; left: 13px; top: 50%; width: 18px; border-top: 1px solid var(--line-strong); }
.tr:not(.th):hover { background: var(--panel-2); }
.tr.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.tr.sel:hover { background: var(--accent-bg); }
.c1 { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.c1 .ln { min-width: 0; }
.c1 .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c1 .l2 { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.c1 .l2 .w { color: var(--warn); }
.c1 .chev { color: var(--text-3); margin-top: 2px; }
.c1 .ico { color: var(--text-2); margin-top: 2px; }
.cs .fresh { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; }
.cs .prog { margin-top: 5px; gap: 6px; white-space: nowrap; }
.cs .steps { width: 72px; }
.cx { min-width: 0; }
.cx .src { overflow: hidden; }
.c1 .sp16 { width: 14px; flex: none; }
.cs .steps { width: 96px; }
.cx .src { font-size: 12.5px; }
.cx .l2 { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; gap: 4px; align-items: center; }
.b-add { padding: 8px 12px 8px 52px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; }
.tbl-foot { padding: 8px 12px; font-size: 12px; color: var(--text-3); }
.panel { position: relative; overflow: visible; box-shadow: var(--shadow-pop); }
.p-head { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.p-head h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.p-head .kind { display: block; margin-top: 2px; }
.kico { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-2); flex: none; }
.p-sec { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.p-sec:last-child { border-bottom: 0; }
.p-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.p-acts { display: flex; gap: 8px; align-items: center; position: relative; }
dl.kv { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--text-2); }
dl.kv dd { margin: 0; min-width: 0; }
.p-menu { top: 40px; right: 0; }

/* ===================================================================== приложение (своё, на тех же переменных) */
* , *::before, *::after { box-sizing: border-box; }
.hidden { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }
.an-top { position: sticky; top: 0; z-index: 10; }
.an-top-in { max-width: var(--content-max); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 24px; width: 100%; }
.an-brand { color: var(--text); text-decoration: none; }
.an-brand:hover { text-decoration: none; }
.an-main { max-width: var(--content-max); margin: 0 auto; }
.an-userbtn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; position: relative; }
.an-usermenu { top: 40px; right: 0; }
.an-phead h1 .tag { font-size: 12px; }
.an-phead-r .an-code { max-width: 460px; }
.an-tabs .cnt .w { color: var(--warn); }
.an-tabs .cnt .r { color: var(--accent); }
.empty { padding: 24px; color: var(--text-2); text-align: center; }
.tr { cursor: pointer; }
.th { cursor: default; }
.tr .more-cell { position: relative; }
.tr .menu { top: 34px; right: 0; }
.menu a { cursor: pointer; }
.menu a.off { color: var(--text-3); cursor: not-allowed; }
.menu a.off:hover { background: transparent; }
.p-acts .btn[disabled] { pointer-events: auto; }
.panel .banner + .p-acts { margin-top: 12px; }
.child-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.child-list a { display: flex; align-items: center; gap: 8px; color: var(--text); }
.child-list .chip { margin-left: auto; }
dl.kv dd.trunc code { display: inline; }
.dropping { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ===================================================================== старые экраны (до переноса) */
  padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  border-radius: var(--radius-md); padding: 6px 9px; width: 100%; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.b-wrap.nopanel { grid-template-columns: minmax(0,1fr); }
.an-top-r { position: relative; }
.btn.is-off { opacity: .55; cursor: not-allowed; }
.cx { overflow: hidden; }
.cx .src { display: flex; max-width: 100%; }
.cx .l2 code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#whoami .faint { margin-left: 4px; }

/* ===================================================================== боковая панель, журнал задания (06), форма (04) — из макетов */
.b-wrap.wide .tr { grid-template-columns: minmax(0,1fr) 176px 32px; }
.b-wrap.wide .cx { display: none; }
.b-wrap.wide { grid-template-columns: minmax(0,1fr) 504px; }
.drawer .d-body { flex: 1; overflow: auto; }
.drawer .d-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.drawer .d-foot .sp { flex: 1; }
.p-head .sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* лесенка шагов */
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder li { position: relative; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 0 0 6px; font-size: 13px; }
.ladder li::before { content: ""; position: absolute; left: 9.5px; top: 20px; bottom: 0; border-left: 1px solid var(--line-strong); }
.ladder li:last-child::before { display: none; }
.ladder .dot { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); color: var(--text-3); }
.ladder .dot .i { width: 16px; height: 16px; vertical-align: 0; }
.ladder .todo .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.ladder .done .dot { color: var(--ok); }
.ladder .cur .dot { color: var(--accent); }
.ladder .cur .dot .i { animation: an-spin 1.2s linear infinite; }
.ladder .fail .dot { color: var(--bad); }
.ladder .nm { line-height: 20px; }
.ladder .todo .nm { color: var(--text-3); }
.ladder .cur .nm { font-weight: 600; }
.ladder .fail .nm { color: var(--bad); font-weight: 600; }
.ladder .t { font-size: 12px; color: var(--text-3); line-height: 20px; font-variant-numeric: tabular-nums; }
.ladder .cur .t { color: var(--accent); }
.ladder .more { grid-column: 2 / -1; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 3px; background: var(--accent-bg); overflow: hidden; margin: 6px 0 4px; position: relative; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); animation: an-sheen 1.6s ease-in-out infinite; }
.log { background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 0; font-family: var(--font-mono); font-size: 12px; line-height: 19px; }
.log div { display: grid; grid-template-columns: 72px minmax(0,1fr); padding: 0 12px; }
.log div span:first-child { color: var(--text-3); }
.log .e { color: var(--bad); }
.log .ok { color: var(--ok); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 400; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: an-pulse 1.5s ease-in-out infinite; }
@keyframes an-pulse { 50% { opacity: .25; } }
.result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.result .r { background: var(--panel-2); border-radius: var(--radius-md); padding: 8px 10px; }
.result .r b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.result .r span { font-size: 12px; color: var(--text-2); }
details.tech { margin-top: 10px; font-size: 12.5px; }
details.tech summary { cursor: pointer; color: var(--text-2); }
details.tech pre { margin: 8px 0 0; padding: 8px 10px; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 12px/18px var(--font-mono); white-space: pre-wrap; color: var(--text); }
.h4row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.h4row h4 { margin: 0 !important; }
/* поля формы */
.fs { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fs h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--text); }
.fs h4 .n { width: 18px; height: 18px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); font-size: 11px; display: grid; place-items: center; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px; font-size: 12px; color: var(--text-2); line-height: 16px; background: var(--panel); }
.opt b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.opt.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt.on::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.opt.off { opacity: .55; }
.fld { margin-bottom: 10px; }
.fld:last-child { margin-bottom: 0; }
.fld label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.inp { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); font-size: 13px; min-width: 0; }
.inp.mono { font-family: var(--font-mono); font-size: 12.5px; }
.inp.ro { background: var(--panel-2); color: var(--text-2); }
.inp.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.inp.err { border-color: var(--bad); }
.inp .ph { color: var(--text-3); }
.inp .sp { flex: 1; }
.inp .chg { font-size: 11.5px; color: var(--accent); font-family: var(--font-sans); }
.fld .note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.fld .note.bad { color: var(--bad); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-c { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 10px; }
.srcsel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }
.srcsel span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; font-size: 13px; color: var(--text-2); border-right: 1px solid var(--line-strong); }
.srcsel span:last-child { border-right: 0; }
.srcsel span.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.tgl { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sw { width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); }
.sw.on { background: var(--accent); }
.sw.on::after { left: 16px; }
.mins { width: 64px; height: 28px; justify-content: flex-end; }
.hintbox { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--panel-2); font-size: 12.5px; color: var(--text-2); line-height: 18px; margin-top: 12px; }
.hintbox .i { color: var(--text-3); margin-top: 1px; }
.hintbox b { color: var(--text); font-weight: 600; }
.drop { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); padding: 18px; text-align: center; font-size: 13px; color: var(--text-2); }
.drop .i { width: 20px; height: 20px; color: var(--text-3); display: block; margin: 0 auto 6px; }
.unsaved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--warn); }
.unsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.sel-inline { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; height: 26px; padding: 0 6px 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text); background: var(--panel); }
.drawer { position: fixed; top: 48px; right: 0; bottom: 0; width: var(--drawer-w); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-pop); border-radius: 0; border-width: 0 0 0 1px; z-index: 8; }
.b-wrap.wide > .panel { display: none; }
.b-wrap.wide::after { content: ""; }
.drawer .p-head h2 .chip { font-weight: 500; }
.drawer .log { max-height: none; }
.drawer .log div span:last-child { white-space: pre-wrap; word-break: break-word; }
.fld input.inp, .fld select.inp { width: 100%; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.fld input.inp.mono { font-family: var(--font-mono); font-size: 12.5px; }
.fld input.inp:focus, .fld select.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.fld input.inp[readonly] { background: var(--panel-2); color: var(--text-2); }
.fld input.inp.err { border-color: var(--bad); }
.opt { cursor: pointer; text-align: left; font: inherit; font-size: 12px; }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srcsel button { all: unset; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; font-size: 13px; color: var(--text-2); border-right: 1px solid var(--line-strong); }
.srcsel button:last-child { border-right: 0; }
.srcsel button.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.sw { all: unset; cursor: pointer; width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); }
.sw.on { background: var(--accent); }
.sw.on::after { left: 16px; }
input.mins { width: 64px; height: 28px; text-align: right; padding: 0 8px; }
.drop.over { border-color: var(--accent); background: var(--accent-bg); }
.drop .file { color: var(--text); font-weight: 500; }
.picker { margin-top: 8px; }
body.drawer-open .b-wrap { grid-template-columns: minmax(0,1fr) 504px; }
body.drawer-open .b-wrap > .panel { visibility: hidden; }
body.drawer-open .b-wrap .tr { grid-template-columns: minmax(0,1fr) 176px 32px; }
body.drawer-open .b-wrap .cx { display: none; }
label.drop { display: block; cursor: pointer; }
.fld input.inp.mins { width: 64px; height: 28px; text-align: right; padding: 0 8px; flex: none; }
.fld.tgl { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }

/* ===== шаг 4: Проекты (02), Документы (08), Подключение (09) — из эталонов ===== */
.b-wrap.wide { grid-template-columns: minmax(0,1fr) 520px; }
.flt { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; }
.search { flex: 1; min-width: 340px; white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--text-3); font-size: 13px; max-width: 520px; }
.search.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); color: var(--text); }
.search kbd { margin-left: auto; font: 11px var(--font-mono); color: var(--text-3); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
.dd { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-2); background: var(--panel); white-space: nowrap; }
.dd b { color: var(--text); font-weight: 500; }
.dd.set { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.srcs { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 16px; }
.srccard { padding: 10px 14px 12px; min-width: 0; }
.srccard .t1 { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.srccard .t2 { font-size: 12.5px; color: var(--text-2); margin-top: 4px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.srccard .t3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.srccard .acts { display: flex; gap: 4px; }
.addsrc { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.dt { width: 100%; }
.dt .r { display: grid; grid-template-columns: minmax(0,1fr) 170px 92px 74px 104px 62px 70px 96px; column-gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 40px; font-size: 13px; }
.dt .r:last-child { border-bottom: 0; }
.dt .r:not(.h):hover { background: var(--panel-2); }
.dt .r.sel { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.dt .h { min-height: 34px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--panel-2); }
.dt .n { text-align: right; font-variant-numeric: tabular-nums; }
.dt .doc { min-width: 0; }
.dt .doc .a { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.dt .doc .b { font-size: 12px; color: var(--text-2); margin-top: 2px; display: flex; gap: 6px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.dt .doc .b .tag { height: 18px; font-size: 11.5px; }
.ht { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.kd { font-size: 12.5px; }
.kd .s { display: block; font-size: 12px; color: var(--text-2); }
.pager .pg { display: flex; align-items: center; gap: 4px; }
.pager .pg .btn.sm { min-width: 28px; justify-content: center; }
.pager .pg .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.inp.sm { height: 28px; padding: 0 8px; font-size: 12.5px; width: auto; }
.flt .inp.sm.set { border-color: var(--accent); }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--line); }
/* карточка документа */
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.conf i { display: inline-flex; gap: 2px; }
.conf i b { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.conf i b.on { background: var(--text-2); }
.obj { padding: 8px 0; border-bottom: 1px solid var(--line); }
.obj:last-child { border-bottom: 0; padding-bottom: 0; }
.obj .o1 { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.obj .o1 code { color: var(--text); }
.obj q { display: block; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--line-strong); font-size: 12.5px; color: var(--text-2); quotes: "«" "»"; }
.obj q mark, .hit mark { background: var(--warn-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.code-row .c2 { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.att { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.att:last-child { border-bottom: 0; }
.att .a1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.att .a1 .trunc { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .a1 .num { font-size: 12px; flex-shrink: 0; }
.att .a2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-size: 12px; }
.att .a2 .trunc { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .a2 .tag { display: inline-flex; align-items: center; gap: 4px; }
.commits { margin-top: 6px; font-size: 12px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.frag { font-size: 12.5px; color: var(--text-2); padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius-md); margin-bottom: 6px; line-height: 18px; }
.frag .fn { font-size: 11.5px; color: var(--text-3); display: block; margin-bottom: 2px; }
/* результаты поиска */
.hits { padding: 4px 0; }
.hit { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.hit:last-child { border-bottom: 0; }
.hit .h1 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hit .h1 b { font-weight: 600; }
.hit p { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: var(--text); }
.hit .via { margin-left: auto; }
.ph { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 16px; }
.ph h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.ph .disk { font-size: 12px; color: var(--text-2); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.ph .disk.warn { color: var(--warn); }
.ph .sp { flex: 1; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pc { padding: 14px 16px 12px; display: flex; flex-direction: column; color: var(--text); text-decoration: none !important; cursor: pointer; }
.pc:hover { border-color: var(--line-strong); }
.pc .t { display: flex; align-items: center; gap: 8px; }
.pc .t h3 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.pc .t .chip { margin-left: auto; }
.pc p { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-2); line-height: 18px; }
.cl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cl li { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cl li.kid { padding-left: 16px; grid-template-columns: 16px minmax(0,1fr) auto; }
.cl .st { width: 16px; height: 16px; }
.cl .st.ok { color: var(--ok); } .cl .st.run { color: var(--accent); } .cl .st.bad { color: var(--bad); } .cl .st.warn { color: var(--warn); } .cl .st.n { color: var(--text-3); }
.cl .d { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl .d.bad { color: var(--bad); } .cl .d.warn { color: var(--warn); } .cl .d.run { color: var(--accent); }
.pc .f { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.empty { text-align: center; padding: 64px 24px; max-width: 560px; margin: 24px auto; }
.empty .ico { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 16px; color: var(--text-2); }
.empty h2 { margin: 0 0 8px; font-size: 17px; }
.empty p { margin: 0 0 16px; color: var(--text-2); }
.empty ul { text-align: left; margin: 0 auto 20px; padding: 0; list-style: none; display: inline-block; font-size: 13px; color: var(--text-2); }
.empty li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.cn { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; margin-top: 16px; align-items: start; }
.big { padding: 16px; }
.big .lbl { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.big .an-code { height: 40px; width: 100%; padding-left: 12px; }
.big .an-code code { font-size: 14px; flex: 1; }
.stp { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.stp .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--chip-bg); color: var(--chip-text); }
.stp .n.ok { background: var(--ok-bg); color: var(--ok); }
.stp .n.warn { background: var(--warn-bg); color: var(--warn); }
.stp b { font-weight: 600; }
.stp .s { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.ctabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; }
.ctabs button { all: unset; cursor: pointer; padding: 10px 10px; font-size: 13px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ctabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.pane { padding: 14px 16px 16px; }
.pane p { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.pane ol { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.pane ol li { margin-bottom: 4px; }
.cb { position: relative; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cb pre { margin: 0; padding: 12px 14px; font: 12.5px/19px var(--font-mono); color: var(--text); overflow: hidden; white-space: pre; }
.cb .an-copy { position: absolute; top: 6px; right: 6px; background: var(--panel); border: 1px solid var(--line); }
.cb .k { color: var(--text-2); }
.cb .v { color: var(--accent); }
.cb .ph2 { color: var(--warn); }
dl.kv2 { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 8px 12px; margin: 0; font-size: 13px; align-items: center; }
dl.kv2 dt { color: var(--text-2); }
dl.kv2 dd { margin: 0; min-width: 0; }
.prof { padding: 14px 16px; }
.prof h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.prof .pp { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; font-size: 12.5px; color: var(--text-2); }
.prof .pp b { display: block; color: var(--text); font-size: 13px; margin-bottom: 2px; }
.tok { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.tok b { color: var(--text); font-size: 13px; font-weight: 600; }
/* шаг 4 — свои правила */
.dt.noobj .r { grid-template-columns: minmax(0,1fr) 170px 92px 92px 104px 62px 96px; }
.dt .r[data-doc] { cursor: pointer; }
.dt .doc .b .w { overflow: hidden; text-overflow: ellipsis; }
.search input { all: unset; flex: 1; min-width: 0; color: var(--text); font-size: 13px; }
.search input::placeholder { color: var(--text-3); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.search .btn.icon { margin-left: auto; height: 22px; width: 22px; }
.dd { cursor: pointer; position: relative; }
.dd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flt > span[data-dd] { position: relative; }
.srccard .t1 .trunc { min-width: 0; }
.srccard .t2 code.trunc { display: block; min-width: 0; }
.hit .h1 .trunc { min-width: 0; }
.hit:hover { background: var(--panel-2); }
.pc .t h3 { white-space: nowrap; }
.flt .menu { top: 32px; left: 0; }
.srccard .menu { top: 30px; right: 0; }
.d-foot .menu.up { bottom: 38px; right: 0; top: auto; }

/* ===== шаг 5–6: из эталонов 07, 12, 01-13, 14 ===== */
.ph .s { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 8; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; }
.modal { width: 480px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal .mh h3 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.modal .mb { padding: 16px; }
.modal .mf { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--code-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.secret code { flex: 1; font-size: 13.5px; word-break: break-all; color: var(--text); }
.gt { width: 100%; }
.gt .r { display: grid; column-gap: 12px; align-items: center; padding: 8px 12px; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 13px; }
.gt .r:last-child { border-bottom: 0; }
.gt .r:not(.h):hover { background: var(--panel-2); }
.gt .h { min-height: 34px; font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--panel-2); }
.gt .n { text-align: right; font-variant-numeric: tabular-nums; }
.gt .acts { display: flex; justify-content: flex-end; gap: 4px; opacity: .0; }
.gt .r:hover .acts, .gt .r.hov .acts { opacity: 1; }
.gt .r.hov { background: var(--panel-2); }
.gt .muted-row { color: var(--text-3); }
.gh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.gh b { font-weight: 600; }
.sub2 { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.seg2 { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg2 span { padding: 0 8px; height: 24px; display: inline-flex; align-items: center; font-size: 12px; color: var(--text-2); }
.seg2 span.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.chk i { width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 3px; display: inline-block; flex: none; }
.chk i.on { background: var(--accent); border-color: var(--accent); }
.tip { position: absolute; z-index: 6; background: var(--text); color: var(--panel); font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-pop); }
.colla { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.colla:last-child { border-bottom: 0; }
.colla .d { color: var(--text-2); font-size: 12.5px; }
.colla .sp { flex: 1; }
.login { min-height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lcard { width: 360px; padding: 24px; }
.lcard .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.lcard .brand .mark { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--text); color: var(--panel); display: grid; place-items: center; font: 600 12px/1 var(--font-mono); }
.lcard p { margin: 0 0 16px; font-size: 13px; color: var(--text-2); }
.lcard .btn { width: 100%; justify-content: center; margin-top: 6px; }
.ver { font-size: 12px; color: var(--text-3); }
.sk { height: 10px; border-radius: 5px; background: var(--panel-2); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--line), transparent); transform: translateX(-100%); animation: an-sheen 1.4s ease-in-out infinite; }
.toast { display: flex; align-items: center; gap: 10px; width: 380px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 13px; margin-bottom: 8px; }
.toast .t { flex: 1; }
.toast.ok .i:first-child { color: var(--ok); } .toast.bad .i:first-child { color: var(--bad); }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; border-radius: var(--radius-md); }
.topbar.bad { background: var(--bad); color: var(--accent-ink); }
.topbar.warn { background: var(--warn-bg); color: var(--warn); }
.topbar .sp { flex: 1; }
.conseq { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.conseq li { margin-bottom: 3px; }

/* шаг 5–6 — свои правила */
body.anon .an-top { display: none; }
body.anon .an-main { padding-top: 0; }
#topbars { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
#topbars:empty { display: none; }
#topbars .topbar { margin-top: 12px; }
.scrim { position: fixed; z-index: 20; overflow: auto; padding: 12vh 16px 24px; }
.modal { max-width: 100%; }
.modal .mb { max-height: 64vh; overflow: auto; }
.modal .mh h3 code { font-size: 14px; }
#toasts { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; }
#toasts .toast { margin: 8px 0 0; }
.btn.danger-fill { background: var(--bad); border-color: var(--bad); color: var(--accent-ink); }
.btn.danger-fill:hover { filter: brightness(1.08); }
.note.bad { color: var(--bad); }
.chk input { margin: 0; accent-color: var(--accent); }
textarea.inp { width: 100%; font: inherit; font-size: 13px; color: var(--text); padding: 6px 10px; resize: vertical; height: auto; min-height: 56px; }
textarea.inp.mono { font-family: var(--font-mono); font-size: 12.5px; }
.fld textarea.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; }
.lcard .fld .inp { width: 100%; }
.lcard form { margin: 0; }
.login { min-height: calc(100vh - 140px); }
.cbar { height: 6px; border-radius: 3px; background: var(--line-strong); }
.gt .r.err-row { background: var(--bad-bg); }
.gt .r.err-row:hover { background: var(--bad-bg); }
.call-args { padding: 10px 14px 12px 50px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.call-args pre { margin: 0; font: 12.5px/19px var(--font-mono); color: var(--text); white-space: pre-wrap; word-break: break-all; }
.gt .r.muted-row code, .gt .r.muted-row .trunc { color: var(--text-3); }
.colla { cursor: pointer; }
.colla:hover { background: var(--panel-2); }
.colla.open { border-bottom-color: transparent; }
.colla-body { padding: 4px 16px 16px 38px; border-bottom: 1px solid var(--line); }
.colla-body:last-child { border-bottom: 0; }
.colla-body .gt .r { padding-left: 0; }
.seg2 span { cursor: pointer; user-select: none; }
.seg2 span + span { border-left: 1px solid var(--line-strong); }
.tipwrap { position: relative; display: inline-flex; }
.tipwrap[data-tip]:hover::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; background: var(--text); color: var(--panel);
  font-size: 12px; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-pop); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.fpick { border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 8px; overflow: hidden; }
.fpick .fp-h { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fpick .fp-h code { flex: 1; min-width: 0; }
.fpick .fp-l { max-height: 220px; overflow: auto; }
.fpick .fp-i { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); min-width: 0; }
.fpick .fp-i:last-child { border-bottom: 0; }
.fpick .fp-i:hover { background: var(--panel-2); }
.fpick .fp-i .chip { margin-left: auto; }
.flt .sw { margin-left: 8px; }
.ph .s code { font-size: 12px; }
.cs .prog > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs { min-width: 0; }

/* CicerONE: the wordmark — ONE in the accent colour */
.an-brand .one, .lcard .brand .one { color: var(--accent); }
.an-brand, .lcard .brand { letter-spacing: -0.01em; }

/* schedule of automatic synchronisation: every N minutes or cron */
.sched { margin: 6px 0 4px 44px; display: flex; flex-direction: column; gap: 8px; }
.seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 0 10px; height: 26px; display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.sched .s-int { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sched .s-cron { display: none; }
.sched[data-mode="cron"] .s-cron { display: block; }
.sched[data-mode="cron"] .s-int { display: none; }
.sched .s-cron input[name="cron"] { width: 260px; }
.sched .s-ex { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sched .s-ex .chip { cursor: pointer; font-family: var(--font-mono); border: 0; }
.sched .s-prev { margin-top: 6px; font-size: 12.5px; line-height: 18px; color: var(--text-2); }
.sched .s-prev.bad { color: var(--bad); }

/* logo: the full one on the sign-in card, the simplified mark in the header and the browser tab */
.an-brand .mark-img { width: 24px; height: 24px; display: block; flex: none; }
.lcard .logo { display: block; width: 112px; height: 112px; margin: 0 auto 12px; }
.lcard .brand { justify-content: center; font-size: 18px; margin-bottom: 12px; }
.lcard .brand + p { text-align: center; }

/* credentials of Confluence / Jira: a personal token or a login and password */
.authbox .a-pass { display: none; }
.authbox[data-auth="password"] .a-pass { display: grid; }
.authbox[data-auth="password"] .a-token { display: none; }
.authbox > .note, .p-sec > .note { font-size: 12px; line-height: 16px; color: var(--text-3, var(--text-2)); margin-bottom: 10px; }

.ext-items { max-height: 320px; overflow: auto; }
.ext-item { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ext-item:last-child { border-bottom: 0; }
.ext-item .e1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ext-item .e1 .trunc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-item .e2 { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-form { margin-top: 12px; padding: 14px 16px; }
.acc-form .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.acc-form .row.opts { margin-top: 12px; }
.acc-form .fld { margin: 0; }
.acc-form .fld.grow { flex: 1; min-width: 280px; }
.acc-sugg { top: 58px; left: 0; right: 0; max-height: 320px; overflow: auto; }
.acc-sugg .mi { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.acc-sugg .mi:hover { background: var(--panel-2); }
.acc-roles { margin-top: 12px; }
.acc-roles .ah { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.arole { padding: 8px 14px; border-bottom: 1px solid var(--line); }
.arole .r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.arole .r1 code { font-weight: 600; color: var(--text); }
.arole .r1 .faint { font-size: 12px; }
.arole .r2 { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-roles .notes { padding: 10px 14px; font-size: 12px; }
.nsec { margin-top: 12px; }
.nsec summary { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.nsec summary .faint { font-size: 12px; }
.need { padding: 6px 14px; border-top: 1px solid var(--line); }
.need .n1 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }
.need .n1 .trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need .rts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.need .rt { font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); color: var(--text-2); white-space: nowrap; }
.need .n2 { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need .more { color: var(--accent); }

.arole .warn-t { color: var(--warn, #b45309); font-size: 12.5px; margin-top: 2px; }

/* ---------------------------------------------------------------- assistant */
.asg { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.as-side { padding: 10px; position: sticky; top: 64px; max-height: calc(100vh - 90px); overflow: auto; }
.as-side .h { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 12px 6px 4px; }
.as-side .it { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: var(--radius-md); font-size: 13px; color: var(--text-2); text-decoration: none; min-height: 30px; }
.as-side .it:hover { background: var(--panel-2); }
.as-side .it.on { background: var(--accent-bg); color: var(--text); font-weight: 500; }
.as-side .it .trunc { flex: 1; min-width: 0; }
.as-chat-label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; padding: 4px 0; }
.as-chat-conf { color: var(--text-3); font-size: 11.5px; font-weight: 400; }
.as-side .it .del { opacity: 0; }
.as-side .it:hover .del, .as-side .it.on .del { opacity: 1; }
.as-main { display: flex; flex-direction: column; min-height: calc(100vh - 230px); padding: 0; }
.as-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.as-heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 240px; }
.as-heading > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-scope { display: flex; align-items: center; gap: 6px; color: var(--text-2); overflow-wrap: anywhere; }
.as-scope strong { color: var(--accent); font-weight: 600; }
.as-setting { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.as-create-note { margin: 0 0 18px; color: var(--text-2); line-height: 1.5; }
.connect-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.connect-name > span, .connect-note { font-size: 12px; color: var(--text-2); }
.connect-actions { display: flex; justify-content: flex-end; gap: 6px; }
.connection-instructions { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; line-height: 1.6; }
.connection-instructions h4 { margin: 0 0 12px; font-size: 14px; }
.connection-instructions .kv2 dd { min-width: 0; overflow-wrap: anywhere; }
.connection-instructions .cb pre { overflow-x: auto; padding-top: 40px; }
.base-history-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
select.inp { color: var(--text); font: inherit; color-scheme: light dark; }
select.inp option { color: var(--text); background: var(--panel); }
[data-theme="light"] select.inp { color-scheme: light; }
[data-theme="dark"] select.inp { color-scheme: dark; }
.as-head b { font-size: 14px; min-width: 0; }
.as-head select { min-width: 170px; max-width: 240px; }
.as-head .sp { flex: 1; }
.as-body { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; overflow: auto; max-height: calc(100vh - 330px); min-height: 320px; }
.as-empty { margin: auto; text-align: center; max-width: 520px; color: var(--text-2); }
.as-empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; font-weight: 600; }
.as-empty p { margin: 0; font-size: 13px; line-height: 19px; }
.msg-u { align-self: flex-end; max-width: 72%; background: var(--accent-bg); color: var(--text); padding: 9px 13px; border-radius: 12px 12px 3px 12px; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.msg-u .ctxm { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-2); margin-bottom: 3px; font-family: var(--font-mono); }
.msg-a { max-width: 94%; font-size: 14px; line-height: 21px; }
.msg-a .md p { margin: 0 0 8px; }
.msg-a .md ul, .msg-a .md ol { margin: 0 0 8px 20px; padding: 0; }
.msg-a .md li { margin: 2px 0; }
.msg-a .md h4 { margin: 10px 0 6px; font-size: 14px; font-weight: 600; }
.msg-a .md code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); padding: 0 4px; border-radius: 4px; }
.obj { font-family: var(--font-mono); font-size: 12.5px; background: var(--accent-bg); color: var(--accent); padding: 0 5px; border-radius: 4px; cursor: pointer; }
.obj:hover { text-decoration: underline; }
.ascode { position: relative; margin: 6px 0 10px; }
.ascode pre { margin: 0; background: #1e2330; color: #e6e6e6; border-radius: var(--radius-md); padding: 10px 12px; font: 12.5px/18px var(--font-mono); overflow: auto; max-height: 420px; }
.ascode .btn { position: absolute; right: 6px; top: 4px; color: #aab3c2; }
.trace { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 10px; font-size: 12.5px; background: var(--panel-2); }
.trace summary { padding: 7px 11px; color: var(--text-2); display: flex; gap: 6px; align-items: center; cursor: pointer; list-style: none; }
.trace summary::-webkit-details-marker { display: none; }
.trace:not([open]) .chev { transform: rotate(-90deg); }
.trace .st { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto 48px; gap: 8px; align-items: center; padding: 4px 11px; border-top: 1px dashed var(--line); color: var(--text-2); cursor: pointer; }
.trace .st:hover { background: var(--panel); }
.trace .st .tl { color: var(--text); font-weight: 500; white-space: nowrap; }
.trace .st .ar { font-family: var(--font-mono); font-size: 12px; }
.trace .st .ms { text-align: right; color: var(--text-3); }
.trace .st.bad .sm { color: var(--bad); }
.trace .st .ic { display: flex; color: var(--ok); }
.trace .st.bad .ic { color: var(--bad); }
.trace .res { margin: 0 11px 8px 37px; max-height: 260px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; font: 11.5px/16px var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: an-spin .8s linear infinite; }
.i.spinning { animation: an-spin 1s linear infinite; }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.thinking .dots { display: inline-flex; gap: 3px; }
.thinking .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: an-pulse 1.2s infinite; }
.thinking .dots i:nth-child(2) { animation-delay: .2s; }
.thinking .dots i:nth-child(3) { animation-delay: .4s; }
.msg-a .src { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; }
.msg-a .src a, .msg-a .src .srci { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--text-2); text-decoration: none; background: var(--panel); }
.msg-a .src [data-obj] { cursor: pointer; }
.msg-a .src a:hover, .msg-a .src [data-obj]:hover { border-color: var(--accent); color: var(--accent); }
.msg-a .fb { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.msg-a .fb .btn.on { background: var(--accent-bg); }
.as-foot { border-top: 1px solid var(--line); padding: 10px 16px 12px; }
.as-foot .quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.as-foot .qk { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--text-2); background: var(--panel); cursor: pointer; }
.as-foot .qk:hover { border-color: var(--accent); color: var(--accent); }
.as-foot .inrow { display: flex; gap: 8px; align-items: flex-end; }
.as-foot textarea { flex: 1; min-height: 52px; max-height: 200px; resize: vertical; height: auto; padding: 8px 10px; line-height: 19px; font-size: 14px; }
.as-foot .ctx { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-3); margin-top: 6px; min-height: 22px; }
@media (max-width: 900px) { .asg { grid-template-columns: 1fr; } .as-side { position: static; max-height: 240px; } }
.need .n1 { display: flex; align-items: center; gap: 8px; }
.need .chip.use { font-size: 11.5px; padding: 1px 7px; flex: none; }