/* Тема «Пульт»: тёмно-синяя приборная панель. Плоские блоки без стекла и глянца, тонкая линия
   вместо объёма, бирюзовый акцент, моноширинные служебные подписи, кодовая полоса колонки у карточки.
   Выбрана владельцем 16.09.2026 (вариант B из T-0199), перенесена в сайт задачей T-0206.
   Разметку, скрипты и данные тема не меняет; исходная геометрия макета design/ios-3d/Main.dc.html. */
:root {
  --bg: #0b1120;
  --surface-hi: #141e33; --surface-lo: #141e33;
  --raised-hi: #1d2a45; --raised-lo: #1d2a45;
  --panel-hi: #141e33; --panel-lo: #141e33;
  --well: #080d19;
  --line: rgba(125, 165, 220, 0.2);
  --text: #e7eef8; --muted: #9fb2cc; --faint: #8397b3;
  --edge: #3c5378; --raised-on: #26375a; --btn-on: #55e3c9; --btn-ink: #062b25;
  --claude: #ff9f0a; --opus: #5e5ce6; --sonnet: #ac8e68; --haiku: #7aa7ff; --fable: #d4af37; --spark: #1abc9c; --sol: #ff6f3c; --terra: #6b8e23; --luna: #c0c7d6; --gpt55: #e56bcb; --codex: #40c8e0; --gemma: #bf5af2; --telegramin: #2aabee; --lmstudio: #b4e04a;
  --ok: #3fd39b; --warn: #f2c14e; --risk: #ff5c7a;
  --btn: #2fd4b6; --link: #6fe0cb;
  --wash: rgba(242, 193, 78, 0.16); --okwash: rgba(63, 211, 155, 0.16); --riskwash: rgba(255, 92, 122, 0.16);
  --scrim: rgba(5, 9, 18, 0.72);
  --lift: inset 0 0 0 1px var(--line);
  --bump: inset 0 0 0 1px var(--line);
  --sink: inset 0 0 0 1px var(--line);
  --card: inset 0 0 0 1px var(--line);
  --focus: 0 0 0 2px var(--btn);
  --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; color: var(--text);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9375rem; line-height: 1.45; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em;
}
body {
  background: linear-gradient(180deg, #0d1526 0%, #0b1120 55%, #090f1b 100%);
  background-attachment: fixed;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: #9defdc; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
svg { flex-shrink: 0; }
h1, h2 { text-wrap: balance; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* всё служебное (время, коды, пути, счётчики) — моноширинное; заголовки и текст остаются Onest */
.small, .meta, .colhead .small, .code, .codebox, .log, .arow .mono, .limit, .crumbs, .jline .t, .prpath,
.ftitle span, .kv > span:first-child, .facts .path, .fcount, .rstat, .ver {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.meta, .crumbs, .limit { font-size: 12px; letter-spacing: 0; }
.small { font-size: 12px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.risk { color: var(--risk); }
.strong { font-weight: 600; }
.grow { flex-grow: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- материалы ---------- */
.surface { background: var(--surface-hi); box-shadow: var(--lift); }
.glass {
  background: var(--panel-hi); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.raised { background: var(--raised-hi); box-shadow: var(--bump); color: var(--text); border: 0; }
.well { background: var(--well); box-shadow: var(--sink); }
/* главное действие — сплошная бирюзовая заливка с тёмной надписью: единственное яркое пятно экрана */
.blue { background: var(--btn); color: var(--btn-ink); font-weight: 600; border: 0; box-shadow: none; }
.raised, .blue { transition: background-color 0.12s ease, color 0.12s ease; }
a.raised:hover, button.raised:hover, label.raised:hover { background: var(--raised-on); color: var(--text); }
.blue:hover { background: var(--btn-on); color: var(--btn-ink); }
.blue:focus-visible, .btn.primary:focus-visible { outline-color: #fff; }
.raised:active { background: #2e4368; }
.blue:active { background: #23b9a0; }

.sphere {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #93a6c4, #5d708f 45%, #2b3a55);
  box-shadow: inset -3px -5px 8px rgba(0, 0, 0, 0.45), inset 2px 3px 6px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.s-claude { background: radial-gradient(circle at 35% 30%, #ffc56b, #ff9f0a 45%, #a84f00); }
.s-opus { background: radial-gradient(circle at 35% 30%, #a3a1ff, #5e5ce6 45%, #2c2a8f); }
.s-sonnet { background: radial-gradient(circle at 35% 30%, #dcc3a0, #ac8e68 45%, #5c4630); }
.s-haiku { background: radial-gradient(circle at 35% 30%, #c2d6ff, #7aa7ff 45%, #2f5bb5); }
.s-fable { background: radial-gradient(circle at 35% 30%, #f3dd8a, #d4af37 45%, #7a6012); }
.s-spark { background: radial-gradient(circle at 35% 30%, #8ee8d5, #1abc9c 45%, #0b6e5a); }
.s-sol { background: radial-gradient(circle at 35% 30%, #ffb08f, #ff6f3c 45%, #a8340c); }
.s-terra { background: radial-gradient(circle at 35% 30%, #b3cf6e, #6b8e23 45%, #34480d); }
.s-luna { background: radial-gradient(circle at 35% 30%, #eef1f7, #c0c7d6 45%, #5f6778); }
.s-gpt55 { background: radial-gradient(circle at 35% 30%, #f5b3e7, #e56bcb 45%, #8a2477); }
.s-codex { background: radial-gradient(circle at 35% 30%, #8fe6f5, #40c8e0 45%, #137a8c); }
.s-gemma { background: radial-gradient(circle at 35% 30%, #e3a6fb, #bf5af2 45%, #6d2596); }
.s-telegramin { background: radial-gradient(circle at 35% 30%, #9fdcfb, #2aabee 45%, #0f5f8a); }
.s-lmstudio { background: radial-gradient(circle at 35% 30%, #dcf29a, #b4e04a 45%, #5d7a12); }
.sphere.off { background: radial-gradient(circle at 35% 30%, #7d8ea8, #4a5a76 45%, #222e46); }
.sz42 { width: 42px; height: 42px; }
.sz34 { width: 34px; height: 34px; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; display: inline-block; }
.dot.claude { background: var(--claude); } .dot.opus { background: var(--opus); } .dot.sonnet { background: var(--sonnet); } .dot.haiku { background: var(--haiku); } .dot.fable { background: var(--fable); } .dot.spark { background: var(--spark); } .dot.sol { background: var(--sol); } .dot.terra { background: var(--terra); } .dot.luna { background: var(--luna); } .dot.gpt55 { background: var(--gpt55); } .dot.codex { background: var(--codex); } .dot.gemma { background: var(--gemma); } .dot.telegramin { background: var(--telegramin); } .dot.lmstudio { background: var(--lmstudio); }
.dot.system { background: var(--muted); } .dot.user { background: var(--text); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.risk { background: var(--risk); }
.dot.off { background: rgba(125, 165, 220, 0.32); }
.c-claude { color: var(--claude); } .c-opus { color: var(--opus); } .c-sonnet { color: var(--sonnet); } .c-haiku { color: var(--haiku); } .c-fable { color: var(--fable); } .c-spark { color: var(--spark); } .c-sol { color: var(--sol); } .c-terra { color: var(--terra); } .c-luna { color: var(--luna); } .c-gpt55 { color: var(--gpt55); } .c-codex { color: var(--codex); } .c-gemma { color: var(--gemma); } .c-telegramin { color: var(--telegramin); } .c-lmstudio { color: var(--lmstudio); } .c-system { color: var(--muted); } .c-user { color: var(--text); }

/* ---------- каркас: панель разделов, колонка исполнителей, сцена ---------- */
/* Каркас — сетка: панель разделов, колонка исполнителей (гибкая дорожка), сцена. На очень широком
   мониторе весь каркас не шире 2400px и стоит по центру, чтобы строки и доска не расползались. */
.shell {
  --gutter: clamp(12px, 1.1vw, 24px);
  height: 100vh; height: 100dvh; max-width: 2400px; margin-inline: auto; display: grid; gap: var(--gutter); padding: var(--gutter);
  grid-template-columns: auto clamp(21rem, 23vw, 28.8rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: 'rail side stage';
}
.shell.noside { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'rail stage'; }

.rail { grid-area: rail; width: 76px; min-height: 0; border-radius: 10px; background: #101a2e; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0; }
.logo { width: 40px; height: 40px; margin-bottom: 14px; }
.rbtn { position: relative; width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background-color 0.12s ease, color 0.12s ease; }
.rbtn.blue { color: var(--btn-ink); }
.rbtn:not(.blue):not(.dim):hover { background: var(--raised-hi); color: var(--text); }
.rbtn.dim { opacity: 0.45; cursor: default; }
.rbtn.dim:active { transform: none; }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--risk); color: #2a0410; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; box-shadow: none;
}
.ver { font-size: 11px; color: var(--faint); }

/* поля по бокам колонки нужны, чтобы тени карточек не обрезались прокруткой */
.side { grid-area: side; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 6px 14px 30px; margin: -6px -14px -20px; scrollbar-width: thin; }
.sidetoggle { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 6px 0; background: none; border: 0; width: 100%; text-align: left; cursor: default; color: inherit; flex-shrink: 0; }
.sidetoggle h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.sidetoggle span { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sidetoggle span svg { display: none; transition: transform 0.2s ease; }
.sidebody { display: flex; flex-direction: column; gap: 14px; }
.subhead { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 0; font-size: 13px; font-weight: 600; color: var(--text); }
.subhead span { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--faint); }

.acard { border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.ahead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ahead .aname { flex: 1 1 11rem; }
.ahead .spill { margin-left: auto; }
.aname { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aname b { font-size: 16px; font-weight: 600; }
.aname span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.spill.warn { background: var(--wash); color: var(--warn); }
.spill.ok { background: var(--okwash); color: var(--ok); }
.atext { display: flex; flex-direction: column; gap: 4px; }
.atitle { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.atitle:hover { color: var(--text); text-decoration: underline; }
.atext > span { font-size: 13px; color: var(--muted); }
.code { margin: 0; border-radius: 8px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; color: #9defdc; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 10px; }
.pbtn { min-height: 46px; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; font-weight: 600; }
.pbtn.deny, .pbtn.deny:hover { color: var(--risk); }
.pbtn:disabled { opacity: 0.5; cursor: default; }
.arow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.arow:hover { color: var(--text); }
.arow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow > span:last-child { flex-shrink: 0; white-space: nowrap; }
.arow .mono { font-size: 12px; }
.meter { height: 10px; border-radius: 5px; padding: 2px; overflow: hidden; }
.meter i { display: block; height: 6px; width: 6%; border-radius: 3px; transition: width 0.4s ease; box-shadow: none; background: var(--muted); }
.meter i.f-claude { background: linear-gradient(180deg, #ffc56b, #e08600); }
.meter i.f-opus { background: linear-gradient(180deg, #a3a1ff, #4b49d1); }
.meter i.f-sonnet { background: linear-gradient(180deg, #dcc3a0, #967755); }
.meter i.f-haiku { background: linear-gradient(180deg, #c2d6ff, #5a8ae8); }
.meter i.f-fable { background: linear-gradient(180deg, #f3dd8a, #b8942a); }
.meter i.f-spark { background: linear-gradient(180deg, #8ee8d5, #14a085); }
.meter i.f-sol { background: linear-gradient(180deg, #ffb08f, #ff6f3c); }
.meter i.f-terra { background: linear-gradient(180deg, #b3cf6e, #6b8e23); }
.meter i.f-luna { background: linear-gradient(180deg, #eef1f7, #c0c7d6); }
.meter i.f-gpt55 { background: linear-gradient(180deg, #f5b3e7, #e56bcb); }
.meter i.f-codex { background: linear-gradient(180deg, #7fe0f0, #28a9c2); }
.meter i.f-gemma { background: linear-gradient(180deg, #dc9bf8, #a13fd6); }
.meter i.f-lmstudio { background: linear-gradient(180deg, #d4ef8c, #93bf2a); }
.meter i.indet { width: 35%; animation: slide 1.6s ease-in-out infinite; }
.limit { font-size: 12px; color: var(--muted); }
.limit.warn { color: var(--warn); } .limit.risk { color: var(--risk); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 14px; flex-shrink: 0; }
/* обе стороны плитки лежат в одной ячейке сетки: плитка растёт по большей из них, текст не обрезается */
.tile { position: relative; display: grid; min-height: 128px; perspective: 900px; cursor: pointer; outline: none; }
.tin { position: relative; display: grid; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover .tin, .tile.flipped .tin, .tile:focus-visible .tin { transform: rotateY(180deg); }
.tface { grid-area: 1 / 1; position: relative; border-radius: 10px; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.tface.back { transform: rotateY(180deg); background: var(--raised-hi); }
.tface.back .aname { gap: 4px; }
.tface.back .aname b { font-size: 13px; color: var(--muted); }
.tilehead { display: flex; align-items: center; justify-content: space-between; }
.tile .aname b { font-size: 15px; }
.tile .aname .small { display: block; white-space: normal; overflow-wrap: anywhere; }
/* сильная и слабая стороны на обороте — одной строкой, полный текст в подсказке: плитка не раздувается */
.tile .aname span.small.wrap { -webkit-line-clamp: 1; }
.tile .aname span.wrap { white-space: normal; font-size: 12px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .aname span.warn { color: var(--warn); } .tile .aname span.risk { color: var(--risk); }
.tile.offline .aname b { color: var(--muted); }
.tile.offline .tface.front { opacity: 0.7; }
.tile.reserve .tface.front { opacity: 0.8; }
.tile .reserve-tag { color: var(--muted); font-style: italic; }
.tile:focus-visible .tface.front { box-shadow: var(--lift), var(--focus); }

.res { border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.res b { flex-grow: 1; font-size: 15px; font-weight: 500; }
.rstat { font-size: 12px; }

.jcard { border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; flex-shrink: 0; }
.jline { display: grid; grid-template-columns: 42px 8px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; font-size: 13px; }
.jline .t { font-size: 12px; color: var(--faint); padding-top: 1px; }
.jline .dot { margin-top: 6px; box-shadow: none; }
.jtext { color: var(--muted); overflow-wrap: anywhere; line-height: 1.4; }
/* журнал: длинный список сканируется построчно */
.panel > .jline { padding: 8px 6px; margin-inline: -6px; border-radius: 10px; }
.panel > .jline + .jline { box-shadow: inset 0 1px 0 var(--line); }
.panel > .jline:hover { background: rgba(125, 165, 220, 0.08); }
.jtext > span:first-child { font-weight: 600; }

.stage { grid-area: stage; min-width: 0; min-height: 0; container-type: inline-size; border-radius: 10px; background: #0f1828; box-shadow: inset 0 0 0 1px var(--line); padding: clamp(20px, 2vw, 32px) clamp(16px, 2.2vw, 36px); overflow-y: auto; display: flex; flex-direction: column; gap: clamp(16px, 1.3vw, 22px); scrollbar-width: thin; }
/* на широком мониторе содержимое не растягиваем во всю ширину: главная до 1440px, остальные страницы до 1680px */
.stage.home { align-items: flex-start; }
.stage.home > * { width: 100%; max-width: 1440px; }
.stage.docpage { align-items: flex-start; }
.stage.docpage > * { width: 100%; max-width: 1680px; }

/* ---------- главная: приветствие, шар, строка задачи ---------- */
.homehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 20px; flex-wrap: wrap; }
.greet { margin: 0 0 4px; font-size: clamp(1.875rem, 1.45rem + 1vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }

/* Сцена: перспектива на .scene, наклонённый мир с орбитами, шар и спутники повёрнуты к камере.
   Дальняя половина орбит уходит за шар благодаря настоящему порядку глубины (preserve-3d). */
.hero3d { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; flex-shrink: 0; }
.scene { --tilt: 64deg; --k: 1; position: relative; width: calc(500px * var(--k)); height: calc(330px * var(--k)); flex-shrink: 0; }
.scene .halo { position: absolute; left: 50%; top: 50%; width: calc(380px * var(--k)); height: calc(380px * var(--k)); margin: calc(-190px * var(--k)); border-radius: 50%; background: radial-gradient(circle, rgba(47, 212, 182, 0.14) 0%, rgba(47, 212, 182, 0) 62%); animation: breathe 5s ease-in-out infinite; }
/* две копии мира: задняя целиком, передняя обрезана до ближней (нижней) половины и лежит поверх шара */
.layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; perspective: 900px; perspective-origin: 50% 40%; }
/* точка схода передней копии должна совпасть с задней: 40% высоты сцены = (40 − 54) / 46 высоты этого слоя */
.layer.front { top: 54%; height: 46%; overflow: hidden; z-index: 2; perspective-origin: 50% calc(-14% * 100 / 46); }
.layer.front .stage3d { top: calc(-54% * 100 / 46); height: calc(100% * 100 / 46); }
.stage3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)); transition: transform 0.35s ease; }
.world { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)); }
.ring { position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r)); transform-style: preserve-3d; animation: spin var(--spin) linear infinite; }
.ring > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(125, 165, 220, 0.24); box-shadow: none; }
.ring.r1 { --r: calc(96px * var(--k)); --spin: 24s; }
.ring.r2 { --r: calc(146px * var(--k)); --spin: 40s; animation-direction: reverse; }
.ring.r3 { --r: calc(204px * var(--k)); --spin: 58s; }
.ring.r2 .unspin { animation-direction: reverse; }
.sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(var(--r)); }
.unspin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; animation: spinback var(--spin) linear infinite; }
.sat .sphere { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; transform: rotateZ(calc(-1 * var(--a))) rotateX(calc(-1 * var(--tilt))); box-shadow: inset -3px -4px 6px rgba(0, 0, 0, 0.4), inset 2px 3px 5px rgba(255, 255, 255, 0.3), 0 8px 14px -4px rgba(0, 0, 0, 0.7); }
.ring.r3 .sat .sphere { width: 18px; height: 18px; left: -9px; top: -9px; }
.sat .sphere.busy { animation: satpulse 1.6s ease-in-out infinite; }
.p0 { --a: 0deg; } .p1 { --a: 30deg; } .p2 { --a: 60deg; } .p3 { --a: 90deg; } .p4 { --a: 120deg; } .p5 { --a: 150deg; }
.p6 { --a: 180deg; } .p7 { --a: 210deg; } .p8 { --a: 240deg; } .p9 { --a: 270deg; } .p10 { --a: 300deg; } .p11 { --a: 330deg; }
.orb {
  position: absolute; left: 50%; top: 54%; width: calc(168px * var(--k)); height: calc(168px * var(--k)); margin: calc(-84px * var(--k)); border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.9) 0 3%, rgba(190, 255, 240, 0.5) 8%, rgba(190, 255, 240, 0) 22%),
    radial-gradient(circle at 50% 56%, #6ff0d6 0%, #2fd4b6 34%, #147a69 70%, #05221d 100%);
  box-shadow: inset -16px -22px 40px rgba(2, 20, 17, 0.6), inset 12px 16px 30px rgba(190, 255, 240, 0.25), 0 0 70px rgba(47, 212, 182, 0.22), 0 20px 40px -18px rgba(0, 0, 0, 0.7);
}
.floor { position: absolute; left: calc(-120px * var(--k)); top: calc(-120px * var(--k)); width: calc(240px * var(--k)); height: calc(240px * var(--k)); border-radius: 50%; transform: translateZ(calc(-64px * var(--k))); background: radial-gradient(circle, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 68%); }
.scene.idle .orb {
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.7) 0 3%, rgba(200, 220, 245, 0.35) 8%, rgba(200, 220, 245, 0) 22%),
    radial-gradient(circle at 50% 56%, #7d8ea8 0%, #556480 34%, #2b3a55 70%, #111a2b 100%);
  box-shadow: inset -18px -24px 44px rgba(0, 0, 0, 0.55), inset 14px 18px 36px rgba(255, 255, 255, 0.12), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}
.scene.idle .halo { background: radial-gradient(circle, rgba(125, 165, 220, 0.12) 0%, rgba(125, 165, 220, 0) 62%); }
.herotext { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 20rem; }
.herotext h2 { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.025em; }
.herotext p { margin: 0; max-width: 64ch; font-size: 14px; color: var(--muted); }
.limits { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; max-width: 460px; }
.lim { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); padding: 3px 0; }
.lim .mono { text-align: right; font-size: 12px; }
.lim .mono.warn { color: var(--warn); } .lim .mono.risk { color: var(--risk); }
.mini { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text); align-items: center; }
.mini .mtitle2 { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.mini .who { grid-column: 2; font-size: 12px; color: var(--muted); }
.mini > .small:last-child { grid-column: 2; }
.mini:hover .mtitle2 { text-decoration: underline; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chipbtn { min-height: 38px; padding: 0 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.chipbtn:disabled { opacity: 0.5; cursor: default; }

.composer { border-radius: 10px; padding: 16px 16px 14px 20px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; transition: box-shadow 0.15s ease; }
.composer:focus-within { box-shadow: inset 0 0 0 1px var(--btn), var(--focus); }
.composer textarea { background: transparent; box-shadow: none; padding: 0; min-height: 48px; resize: none; font-size: 16px; border-radius: 0; }
.composer textarea::placeholder { color: var(--faint); }
.composer textarea:focus { outline: none; box-shadow: none; }
.crow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.selpill { height: 34px; padding: 0 12px 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.selpill span { color: var(--muted); }
.selpill select { appearance: none; -webkit-appearance: none; background: transparent; box-shadow: none; border: 0; padding: 0; width: auto; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.selpill select:focus { outline: none; box-shadow: none; }
.selpill:focus-within { box-shadow: var(--bump), var(--focus); }
.selpill option { background: #141e33; color: var(--text); }
.send { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* ---------- страницы внутри сцены ---------- */
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pagehead > div { min-width: 0; }
.pagehead .muted { max-width: 72ch; }
.h1 { font-size: clamp(1.75rem, 1.4rem + 0.7vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 18px;
  border-radius: 8px; border: 0; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap;
  background: var(--raised-hi); box-shadow: var(--bump);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--raised-on); color: var(--text); }
.btn:active { background: #2e4368; }
.btn.primary { background: var(--btn); color: var(--btn-ink); font-weight: 600; box-shadow: none; }
.btn.primary:hover { background: var(--btn-on); color: var(--btn-ink); }
.btn.danger { color: var(--risk); }
.btn.big { min-height: 46px; font-size: 16px; font-weight: 600; padding: 0 20px; }
.btn:disabled { opacity: 0.4; cursor: default; }
.iconbtn { width: 36px; height: 36px; border-radius: 8px; border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.iconbtn:hover { color: var(--text); }

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.colhead {
  display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; font-weight: 600;
  color: var(--text); padding: 0 4px 7px; margin-bottom: 4px; border-bottom: 2px solid var(--btn);
}
/* счётчик колонки — число у заголовка, подчёркнутого акцентом */
.colhead .small { min-height: 20px; padding: 1px 8px; border-radius: 6px; background: transparent; box-shadow: none; color: var(--faint); font-size: 11.5px; }
/* карточка задачи — «тикет»: кодовая полоса слева повторяет колонку доски
   (очередь — приглушённая, в работе — акцент, проверка — янтарь, готово — зелёная) */
.card {
  background: var(--panel-hi); box-shadow: var(--card); border-radius: 0 10px 10px 0; padding: 14px;
  border-left: 3px solid var(--edge);
  display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.board .col:nth-child(2) .card { border-left-color: var(--btn); }
.board .col:nth-child(3) .card { border-left-color: var(--warn); }
.board .col:nth-child(4) .card { border-left-color: var(--ok); }
.card:hover { color: var(--text); background: #18243c; box-shadow: inset 0 0 0 1px var(--btn); }
.card.faded { opacity: 0.72; }
.card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .title { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.meta { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.who { display: inline-flex; align-items: center; gap: 6px; }
.bar { height: 6px; border-radius: 999px; background: var(--well); box-shadow: var(--sink); overflow: hidden; position: relative; }
.bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: 999px; background: var(--claude); animation: slide 1.6s ease-in-out infinite; }
.bar i.opus { background: var(--opus); } .bar i.sonnet { background: var(--sonnet); } .bar i.haiku { background: var(--haiku); } .bar i.fable { background: var(--fable); } .bar i.spark { background: var(--spark); } .bar i.sol { background: var(--sol); } .bar i.terra { background: var(--terra); } .bar i.luna { background: var(--luna); } .bar i.gpt55 { background: var(--gpt55); } .bar i.codex { background: var(--codex); } .bar i.gemma { background: var(--gemma); } .bar i.lmstudio { background: var(--lmstudio); }
.empty { font-size: 13px; color: var(--faint); padding: 4px 2px; }
.linkbtn { background: none; border: 0; padding: 4px 2px; font-size: 13px; color: var(--link); text-align: left; text-transform: none; letter-spacing: normal; font-weight: 500; }
.linkbtn:hover { color: #9defdc; }

.panel { background: var(--panel-hi); box-shadow: var(--card); border-radius: 10px; padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.3vw, 22px); }
.ptitle { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; }
.ptitle.flat { padding-bottom: 0; }
/* подпись раздела вне панели: счётчик стоит у самого заголовка, а не улетает к правому краю сцены */
.stage > .ptitle, .page > .ptitle, .stack > .ptitle { justify-content: flex-start; gap: 10px; padding-top: 4px; }
.stage > .ptitle .small, .page > .ptitle .small, .stack > .ptitle .small { min-height: 20px; padding: 1px 8px; border-radius: 10px; background: var(--well); box-shadow: var(--sink); color: var(--muted); font-size: 11.5px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.ncard { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; }
.ntop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ncard p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.page { display: flex; flex-direction: column; gap: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ttl { font-size: clamp(1.75rem, 1.4rem + 0.7vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; line-height: 1.15; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--well); box-shadow: var(--sink); color: var(--muted); }
.pill.warn { color: var(--warn); background: var(--wash); box-shadow: none; }
.pill.risk { color: var(--risk); background: var(--riskwash); box-shadow: none; }
.pill.ok { color: var(--ok); background: var(--okwash); box-shadow: none; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack.tight { gap: 10px; }
.step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.sicon { width: 22px; height: 22px; border-radius: 50%; background: var(--well); box-shadow: var(--sink); display: flex; align-items: center; justify-content: center; }
.sicon.running { background: transparent; box-shadow: none; border: 2px solid var(--btn); }
.note { font-size: 13px; color: var(--muted); line-height: 1.4; }
.note.resume { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.log { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #9defdc; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 12px; padding: 6px 0; }
.kv > span:first-child { color: var(--muted); }
.kv > :last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.result { white-space: pre-wrap; font-size: 14px; line-height: 1.5; max-height: 360px; overflow: auto; overflow-wrap: anywhere; margin: 0; font-family: inherit; }
.result.short { max-height: 160px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; padding: 5px 0; }
.check > span { min-width: 0; overflow-wrap: anywhere; }
textarea, input, select {
  font: inherit; color: var(--text); background: var(--well); box-shadow: var(--sink); border: 0;
  border-radius: 8px; padding: 11px 13px; width: 100%;
}
textarea::placeholder, input::placeholder { color: var(--faint); }
textarea:focus, input:focus, select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--btn), var(--focus); }
textarea { min-height: 76px; resize: vertical; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); gap: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- окна поверх ---------- */
.scrim {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 9vh, 84px) clamp(10px, 3vw, 16px) 16px; z-index: 20; overflow: auto; overscroll-behavior: contain;
}
.modal {
  width: min(38rem, 100%); border-radius: 10px; overflow: hidden;
  background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -24px rgba(0, 0, 0, 0.8);
}
.msec { padding: 20px clamp(16px, 4vw, 24px); display: flex; flex-direction: column; gap: 12px; }
.msec + .msec { border-top: 1px solid var(--line); }
.risktag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--risk); padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--riskwash); }
.mtitle { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.codebox { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--well); box-shadow: var(--sink); border-radius: 8px; padding: 12px 13px; color: #9defdc; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; margin: 0; }
.facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); row-gap: 10px; column-gap: 12px; font-size: 15px; line-height: 1.45; }
.facts > span:nth-child(odd) { color: var(--muted); }
.facts .path { font-size: 12px; overflow-wrap: anywhere; }
.mactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mactions .push { margin-left: auto; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px);
  padding: 12px 20px; border-radius: 10px; font-size: 14px; color: var(--text);
  background: var(--raised-hi); box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px -10px rgba(0, 0, 0, 0.7);
}

@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes breathe { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes spin { to { transform: rotateZ(360deg); } }
@keyframes spinback { to { transform: rotateZ(-360deg); } }
@keyframes satpulse { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 0 22px rgba(255, 255, 255, 0.45); } }
@media (prefers-reduced-motion: reduce) {
  .bar i, .meter i.indet { animation: none; width: 100%; opacity: 0.5; }
  .halo, .ring, .unspin, .sat .sphere.busy { animation: none; }
  .card:hover, .raised:active, .blue:active, .btn:active { transform: none; }
  .tin { transition: none; }
  .stage3d { transition: none; }
}

@media (max-width: 1600px) {
  .lim { grid-template-columns: minmax(0, 1fr) 120px 40px; }
}
/* Раскладка содержимого зависит от ширины сцены (container queries), а не окна: одинаково с боковой
   колонкой и без неё, на любом мониторе и масштабе браузера. */
@container (max-width: 1100px) { .scene { --k: 0.86; } }
@container (max-width: 759px) {
  .hero3d { flex-direction: column; align-items: stretch; }
  .scene { align-self: center; }
}
@container (max-width: 559px) {
  .scene { --k: 0.62; }
  .lim { grid-template-columns: minmax(0, 1fr) 88px 40px; }
}
@container (max-width: 379px) { .scene { --k: 0.5; } }
@container (max-width: 299px) { .scene { --k: 0.4; } }
.hero3d { min-width: 0; }
@container (min-width: 1700px) { .scene { --k: 1.15; } }
@container (max-width: 859px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 459px) { .board { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 1000px) { .grid2 { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); } }

/* короткое окно (крупный масштаб браузера на ноутбуке): панель разделов прокручивается, а не обрезается */
@media (max-height: 640px) and (min-width: 901px) {
  .rail { overflow-y: auto; scrollbar-width: none; gap: 8px; padding: 12px 0; }
  .logo { margin-bottom: 4px; }
}
/* ноутбук, планшет, крупный масштаб: исполнители уходят под сцену и сворачиваются,
   панель разделов остаётся слева и не уезжает при прокрутке */
@media (max-width: 1199px) {
  .shell:not(.noside) { height: auto; min-height: 100vh; min-height: 100dvh; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: 'rail stage' 'rail side'; align-items: start; }
  .shell .rail { position: sticky; top: var(--gutter); }
  .shell:not(.noside) .stage { overflow: visible; }
  .side { overflow: visible; margin: 0; padding: 0; }
  .sidetoggle { cursor: pointer; padding: 12px 18px; border-radius: 10px; background: var(--surface-hi); box-shadow: var(--lift); }
  .sidetoggle span svg { display: inline; }
  .side.open .sidetoggle span svg { transform: rotate(180deg); }
  .side .sidebody { display: none; }
  .side.open .sidebody { display: flex; }
}
/* телефон и узкое окно: всё в одну колонку, разделы — ровная строка без прокрутки вбок */
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .shell:not(.noside), .shell.noside { height: auto; min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'rail' 'stage' 'side'; align-items: start; gap: 14px; padding: 10px clamp(8px, 3vw, 16px) 24px; }
  .shell .rail { top: 8px; z-index: 10; width: auto; flex-direction: row; justify-content: space-between; gap: 4px; padding: 8px; border-radius: 10px; overflow: visible; }
  .rail .grow, .ver { display: none; }
  .logo { width: 32px; height: 32px; margin: 0 4px; align-self: center; }
  .rbtn { flex: 1 1 0; min-width: 0; max-width: 52px; height: 44px; border-radius: 8px; }
  .shell .stage, .shell.noside .stage { overflow: visible; border-radius: 10px; }
  .iconbtn { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .rail .logo { display: none; }
}

/* ---------- Показатели Главной (GET /api/metrics, T-0327) ---------- */
.metrics { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mhead { margin: 0; font-size: 1.05rem; font-weight: 600; }
.mtoggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.mtoggle svg { transition: transform 0.2s ease; }
.mtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mtoggle svg { transition: none; } }
.mstamp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mblock { min-width: 0; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.mbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mblock h3 { margin: 0; font-size: 14px; font-weight: 600; }
.msub { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.mtabs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mline { display: block; margin: 6px 0; line-height: 1.5; max-width: 90ch; overflow-wrap: anywhere; }
.mmain { margin: 8px 0 2px; font-size: 14px; font-weight: 500; max-width: 72ch; }
.mfail { display: flex; flex-direction: column; gap: 4px; font-size: 13px; overflow-wrap: anywhere; }
/* широкая таблица прокручивается внутри своей рамки, страница вбок не едет */
.mtable { max-width: 100%; overflow-x: auto; margin: 6px 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.mtable:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.mtable table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mtable th, .mtable td { padding: 7px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.mtable thead th { border-top: 0; font-weight: 500; color: var(--muted); white-space: nowrap; }
.mtable tbody th { font-weight: 500; min-width: 9rem; max-width: 18rem; }
.mtable td { min-width: 5rem; }
.mtable .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtable .num .small { white-space: normal; display: block; }
.mname { display: block; overflow-wrap: break-word; }
.mid { display: block; overflow-wrap: anywhere; }
.mnote { margin: 6px 0; font-size: 13px; }
.mnote .linkbtn { min-height: 32px; }
.mnote p { margin: 6px 0; max-width: 90ch; overflow-wrap: anywhere; }
.mkv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; font-size: 12px; }
.mkv dt { color: var(--faint); overflow-wrap: anywhere; }
.mkv dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.mreasons { margin: 0 0 6px; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.mreasons .small, .mline .small { display: inline; overflow-wrap: anywhere; }
@media (max-width: 480px) { .mkv { grid-template-columns: minmax(0, 1fr); } .mkv dd { margin-bottom: 6px; } }

/* ---------- «Вселенная»: раздел #/flow, ui/universe.js ---------- */
.universe { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.utitle { margin: 0; font-size: 1.5rem; font-weight: 600; }
.usun { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.uhost { position: relative; height: clamp(360px, 64vh, 900px); border-radius: 10px; overflow: hidden; background: #0b1120; box-shadow: inset 0 0 0 1px var(--line); }
.ulayer, .ucanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ucanvas { display: block; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.udrag .ucanvas { cursor: grabbing; }
.ulabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ulabel { position: absolute; left: 0; top: 0; max-width: 14em; pointer-events: none; text-align: center; line-height: 1.25; overflow-wrap: anywhere; font-size: 13px; color: var(--text); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.ulabel b { display: block; }
.uleaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uleaders line { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.ulabel.compact small { display: none; }
.ulabel small { display: block; font-size: 11.5px; color: var(--muted); }
.ulabel.off b { color: var(--risk); }
.uoverlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; max-width: min(90%, 46ch); text-align: center; }
.ustatus { color: var(--muted); font-size: 14px; line-height: 1.5; }
.ulegend h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.uhint { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 80ch; }
.uagents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px 16px; }
.uagent { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.udot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--c, var(--btn)); }
.ubody { min-width: 0; font-size: 13.5px; line-height: 1.45; }
.uname { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ustate { color: var(--muted); }
.ufull { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ugesture { margin: -6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.uflag { font-size: 12px; color: var(--risk); }
.uskills { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.uworks { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .uhost { height: clamp(300px, 95vw, 460px); } .ulabel { max-width: 9em; } .ulabel small { display: none; } }

/* ---------- схема: раздел «Схема», ui/flow.js ---------- */
.stage.flowpage { gap: 14px; }
.fzoom { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; }
.fzoomval { min-width: 64px; height: 34px; border: 0; background: none; color: var(--muted); font-size: 13px; border-radius: 8px; font-family: var(--mono); }
.fzoomval:hover { color: var(--text); }
.flegend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted); }
.flegend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { display: inline-block; width: 26px; border-top: 2px solid rgba(159, 178, 204, 0.4); }
.lg.live { border-top: 2px dashed var(--btn); }
.lg.warn { border-top: 2px dashed var(--warn); }
.lg.dash { border-top-style: dashed; }
.lg.risk { border-top-color: rgba(255, 92, 122, 0.7); }
.lg.back { border-top: 2px dotted rgba(242, 193, 78, 0.7); }
.lg.rt { border-top: 2px solid var(--btn); }
.lg.maybe { border-top: 2px dashed var(--muted); }
.fview {
  flex-grow: 1; min-height: 360px; overflow: auto; border-radius: 10px; cursor: grab; scrollbar-width: thin; overscroll-behavior: contain;
  background: radial-gradient(rgba(125, 165, 220, 0.14) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--well); box-shadow: var(--sink);
}
.fview.drag { cursor: grabbing; user-select: none; }
.fsizer { position: relative; }
/* схема идёт сверху вниз: ряд сетки — этап потока, слева его подпись, запас справа — под линию возврата */
.fcanvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 24px; row-gap: 40px; padding: 28px 56px 40px 24px; width: max-content; }
.fstage { justify-self: end; max-width: 132px; font-size: 13px; line-height: 1.25; color: var(--muted); text-align: right; }
.fedges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fedges.flabels { z-index: 2; }
/* главный блок этапа стоит по левому краю, у подписи; ветка «Ждёт тебя» — справа от него */
.fstep { display: flex; align-items: flex-start; justify-content: flex-start; gap: 28px; }
.fnode {
  position: relative; z-index: 1; width: 292px; border-radius: 10px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px;
  color: var(--text); background: var(--panel-hi); box-shadow: var(--card); transition: background-color 0.12s ease, opacity 0.12s ease;
}
.fnode.branch { width: 236px; }
a.fnode:hover { color: var(--text); background: #18243c; }
.fnode { cursor: grab; }
.fnode.dragging { z-index: 5; cursor: grabbing; background: #18243c; user-select: none; }
.fhead { touch-action: none; }
.ftools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fnode.live { box-shadow: inset 0 0 0 2px var(--btn); }
.fnode.warn { box-shadow: inset 0 0 0 2px var(--warn); }
.fhead { display: flex; align-items: center; gap: 10px; }
.fico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.ftitle { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.ftitle b { font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftitle span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnode .ftitle span { font-family: inherit; font-size: 12px; line-height: 1.3; white-space: normal; }
.fmain { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.fnum { font-size: 30px; line-height: 1; color: var(--text); flex-shrink: 0; }
.fmeaning { font-size: 12px; line-height: 1.3; color: var(--muted); min-width: 0; }
/* выбрана задача: её маршрут остаётся ярким, остальные блоки уходят на второй план */
.fcanvas.picked .fnode.dim { opacity: 0.4; }
.fnode.rt { box-shadow: var(--card), inset 0 0 0 1px var(--btn); }
.fnode.now { box-shadow: var(--card), inset 0 0 0 2px var(--btn); }
/* этап пути, который данными не подтверждён (слияние без записи в журнале): пунктир, не яркая обводка */
.fnode.maybe { opacity: 0.75; box-shadow: none; outline: 2px dashed var(--muted); outline-offset: -2px; }
.fnode.fail { box-shadow: var(--card), inset 0 0 0 2px var(--risk); }
.fpick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 13px; color: var(--muted); }
.fpick select { width: auto; min-width: 0; max-width: 320px; padding: 7px 10px; font-size: 13px; }
.fpicked { margin: 0; font-size: 13px; color: var(--muted); }
.fpicked b { color: var(--text); font-family: var(--mono); }
.fbody { display: flex; flex-direction: column; gap: 5px; }
.frow {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 9px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.3; color: var(--muted); background: rgba(125, 165, 220, 0.07);
}
.frow b { font-weight: 600; color: var(--text); }
.frow b.risk { color: var(--risk); }
.frow .dot { box-shadow: none; }
.frow.note { background: none; min-height: 0; color: var(--faint); font-size: 12px; }
.frow.plain { background: none; }
.frow.res { color: var(--muted); }
.frow.reserve { opacity: 0.55; }
.frow.reserve .fname { font-style: italic; }
.fr.warn { color: var(--warn); }
.fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.fr.ok { color: var(--ok); } .fr.risk { color: var(--risk); }
.frule { display: flex; flex-direction: column; min-width: 0; }
.frule span { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fport { position: absolute; width: 10px; height: 10px; border-radius: 50%; z-index: 2; background: var(--edge); box-shadow: 0 0 0 2px var(--well); }
.fnode > .fport { left: 50%; margin-left: -5px; }
.fnode > .fport.in { top: -5px; }
.fnode > .fport.out { bottom: -5px; }
.frow > .fport { top: 50%; margin-top: -5px; }
.frow > .fport.in { left: -19px; }
.frow > .fport.out { right: -19px; }
.fedge { fill: none; stroke: rgba(159, 178, 204, 0.32); stroke-width: 2; }
.fedge.dash { stroke-dasharray: 6 6; }
.fedge.warn { stroke: rgba(242, 193, 78, 0.6); stroke-dasharray: 6 6; }
.fedge.risk { stroke: rgba(255, 92, 122, 0.6); }
.fedge.back { stroke: rgba(242, 193, 78, 0.55); stroke-dasharray: 1 6; stroke-linecap: round; stroke-width: 2.5; }
.fedge.live { stroke-dasharray: 9 7; animation: flowdash 0.8s linear infinite; }
.fedge.base.live { stroke: var(--btn); }
.fedge.warn.live { stroke: var(--warn); }
.fmark { fill: rgba(159, 178, 204, 0.5); }
.fmark.live { fill: var(--btn); }
.fmark.warn, .fmark.back { fill: var(--warn); }
.fmark.risk { fill: var(--risk); }
.fedge.rt { stroke: var(--btn); stroke-width: 2.5; }
.fmark.rt { fill: var(--btn); }
.flabel.rt { fill: var(--text); }
.flabel { font-size: 11.5px; fill: var(--muted); paint-order: stroke; stroke: var(--well); stroke-width: 6px; stroke-linejoin: round; }
.dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes flowdash { to { stroke-dashoffset: -16; } }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .fedge.live, .dot.pulse { animation: none; }
}
@media (max-width: 900px) {
  .fview { flex-grow: 0; height: 72vh; height: 72dvh; }
  .fpick select { flex: 1 1 auto; max-width: 100%; }
}

/* Управляющий Codex */
:root { --distributor: #64d2ff; }
.s-distributor { background: radial-gradient(circle at 35% 30%, #cbf3ff, #64d2ff 45%, #136080); }
.dot.distributor { background: var(--distributor); }
.c-distributor { color: var(--distributor); }

/* ---------- проекты ---------- */
.prgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.prcard { display: flex; flex-direction: column; gap: 8px; color: var(--text); border-radius: 10px; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.prcard:hover { color: var(--text); background: #18243c; box-shadow: inset 0 0 0 1px var(--btn); }
.prcard.arch { opacity: 0.62; }
.prtop { display: flex; align-items: center; gap: 10px; }
.prico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.prtop b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.prpath { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.prdesc { font-size: 13px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- память: кандидаты и паспорт ---------- */
.ncard.cand { box-shadow: inset 0 0 0 2px var(--warn); }
.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.badges .pill { font-size: 11px; padding: 3px 9px; font-weight: 500; }
.ncard .row { margin-top: 4px; }
.ncard .mactions { gap: 6px; }
.ncard .mactions .btn { min-height: 30px; font-size: 13px; padding: 0 12px; }
.ncard.arch { opacity: 0.85; }
.ncard .nver { color: var(--ok); }
.ncard .nunver { color: var(--muted); }
.mtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mhint { margin: -4px 0 0; font-size: 13px; max-width: 72ch; }
.mstate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mstate span { overflow-wrap: anywhere; }
.mmore { display: flex; justify-content: center; }

/* ---------- продукт проекта ---------- */
.product .readme { max-height: 420px; font-size: 13px; }
.product .badges { gap: 8px; }
.product .pill.ok { color: var(--ok); background: var(--okwash); box-shadow: none; }
.product .pill.risk { color: var(--risk); background: var(--riskwash); box-shadow: none; }

/* ---------- продукты ---------- */
.prcard.prod .prtop .badges { margin-left: auto; }
.prcard.missing { opacity: 0.7; }
.field.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.field.check input { width: auto; box-shadow: none; }

.pill.warn { color: var(--warn); background: var(--wash); box-shadow: none; }
.pill.ok { color: var(--ok); background: var(--okwash); box-shadow: none; }

/* Вход на сайт (2.0): форма по центру, без боковых панелей */
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 10px; }
.login h1 { margin: 0; font-size: 22px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login input { width: 100%; }

/* ---------- прогресс задачи, ориентир и дерево подзадач (T-0200, этап 3) ----------
   Блок добавлен в конец файла: список статики core/server.js закрытый, отдельный CSS-файл
   потребовал бы правки ядра. Цвета — только существующие токены темы выше. */

.tprog { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tprog .pct { font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tprog .plabel { color: var(--muted); font-size: 0.8125rem; min-width: 0; overflow-wrap: anywhere; }

.tfore { color: var(--muted); font-size: 0.8125rem; margin-top: 6px; overflow-wrap: anywhere; }
.tfore.warn { color: var(--warn); }

/* Дерево подзадач: строка-сводка, вложенность раскрывается нативным <details>. */
.subtasks { display: flex; flex-direction: column; gap: 2px; }
.sub {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline;
  padding: 7px 8px; border-radius: 9px; text-decoration: none; color: inherit;
}
a.sub:hover { background: var(--well); }
.sub .scode { color: var(--faint); font-size: 0.75rem; }
.sub .stitle { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.sub .spct { font-variant-numeric: tabular-nums; text-align: right; }
.sub .sagent { grid-column: 2 / -1; color: var(--muted); }

.subtree > summary { cursor: pointer; list-style: none; }
.subtree > summary::-webkit-details-marker { display: none; }
.subtree > summary .scode::before { content: '▸ '; color: var(--faint); }
.subtree[open] > summary .scode::before { content: '▾ '; }
.subtree > summary:hover { background: var(--well); }
.subtree > summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 9px; }
.subkids { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.subopen { display: inline-block; padding: 4px 8px; font-size: 0.8125rem; color: var(--link); }

/* Объявленный план: намерение исполнителя, отдельно от исторических событий ядра. */
.planlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pitem { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; }
.pitem > span:nth-child(2) { overflow-wrap: anywhere; }
.pitem .pnum { color: var(--faint); font-size: 0.8125rem; }
.pitem.done > span:nth-child(2) { color: var(--muted); }
.pitem.running > span:nth-child(2) { font-weight: 600; }
.pevent { margin-top: 8px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .tprog .pct { font-size: 1.25rem; }
  .sub { grid-template-columns: minmax(0, 1fr) auto; }
  .sub .scode { grid-column: 1; }
  .sub .spct { grid-column: 2; grid-row: 1; }
  .sub .stitle { grid-column: 1 / -1; }
  .sub .sagent { grid-column: 1 / -1; }
}

/* вопрос владельцу (T-0235): длинный текст и варианты переносятся, а не растягивают карточку */
.qtext { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.qchoices { display: grid; gap: 8px; }
.qchoices .btn { white-space: normal; overflow-wrap: anywhere; justify-content: flex-start; text-align: left; min-height: 44px; padding: 10px 14px; line-height: 1.3; }

/* «Вселенная», этап 2: задачи-кометы и станция владельца */
.ulabel.wait b { color: var(--warn); animation: uwait 4.8s ease-in-out infinite; }
.ulabel.wait b::before { content: '● '; }
@keyframes uwait { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ucomets { margin-top: 16px; }
.ucomets h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.ustation { margin: 0 0 6px; font-size: 14px; line-height: 1.5; max-width: 80ch; }
.uwait { color: var(--warn); font-weight: 600; }
.uclist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 12px; }
.ucbtn { width: 100%; min-height: 44px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; min-width: 0; }
.ucbtn .uctext { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.ucbtn .ucst { color: var(--muted); font-size: 13px; }
.ucbtn[aria-pressed="true"] { border-color: var(--btn); box-shadow: inset 3px 0 0 var(--btn); }
.ucbtn:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.ucbtn.wait .ucst { color: var(--warn); } .ucbtn.error .ucst { color: var(--risk); } .ucbtn.done .ucst { color: var(--ok); }
.ucdetail { border-top: 1px solid var(--line); padding-top: 8px; max-width: 80ch; }
.uctitle { margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.ucstate { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.ucstate.wait { color: var(--warn); }
.ustages { margin: 0; padding-left: 1.4em; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ust.unknown, .ust.none { color: var(--muted); } .ust.fail { color: var(--risk); } .ust.wait { color: var(--warn); } .ust.now b { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .ulabel.wait b { animation: none; opacity: 1; text-decoration: underline; } }

/* Пометка полосы задачи (T-0326): компактный значок в карточке и пояснение в деталях */
.pill.lanetag { font-size: 11px; padding: 2px 9px; font-weight: 500; max-width: 100%; }
.laneinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; overflow-wrap: anywhere; }

/* ---------- каталог продуктов (T-0358): группа проектов, у каждого своя версия и выпуск ---------- */
.prcard.prod:hover { background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--line); }
.prcard.prod .prtop { flex-wrap: wrap; }
.prtitle { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.prtitle a { color: var(--text); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; }
.prtitle a:hover, .prname:hover { color: var(--link); }
.prlist { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prrow { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--well); box-shadow: var(--sink); min-width: 0; }
.prrowtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.prname { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; overflow-wrap: anywhere; min-height: 24px; display: inline-flex; align-items: center; }
.prrow .pill { font-size: 12px; padding: 3px 9px; font-weight: 500; max-width: 100%; }
.prrow .small { flex-wrap: wrap; overflow-wrap: anywhere; }
.pill.plain { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.relline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.relline .small a { min-height: 24px; display: inline-flex; align-items: center; }

/* ---------- чат канала связи на Главной (T-0398): кнопка в правом нижнем углу и окно над ней ---------- */
.ochat { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 15; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
/* слой во всю ширину не перехватывает щелчки по странице — только сама кнопка и окно */
.ochat > * { pointer-events: auto; }
.ochat[hidden], .ochat [hidden] { display: none; }
.stage.home { padding-bottom: 88px; }
.ochat-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 15px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8); font-size: 15px; }
.ochat-panel {
  width: min(24rem, 100%); height: min(36rem, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -24px rgba(0, 0, 0, 0.85);
}
.ochat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.ochat-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ochat-name h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ochat-sub { font-size: 12px; color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }
.ochat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.ochat-empty { margin: auto 0; color: var(--faint); font-size: 14px; text-align: center; padding: 0 12px; }
.ochat-msg { max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.ochat-msg.mine { align-self: flex-end; align-items: flex-end; }
.ochat-msg.agent { align-self: flex-start; }
.ochat-meta, .ochat-status { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.ochat-status { color: var(--warn); }
.ochat-text { padding: 8px 12px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; }
.ochat-msg.mine .ochat-text { background: var(--raised-on); border-bottom-right-radius: 3px; }
.ochat-msg.agent .ochat-text { background: var(--well); box-shadow: inset 3px 0 0 var(--telegramin), var(--sink); border-bottom-left-radius: 3px; }
.ochat-state { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 13px; color: var(--muted); }
.ochat-state.risk { color: var(--risk); }
.ochat-state span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.ochat-state .btn { flex-shrink: 0; }
.ochat-form { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.ochat-form textarea { min-height: 48px; max-height: 140px; resize: none; font-size: 16px; }
.ochat-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ochat-hint { font-size: 11.5px; color: var(--faint); min-width: 0; }
@media (max-width: 600px) {
  .ochat { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  .ochat-panel { width: 100%; height: min(34rem, calc(100dvh - 16px)); }
  .ochat-hint { display: none; }
  .ochat-actions { justify-content: flex-end; }
}

/* Главная без оркестратора (18.09.2026): плитки разделов */
.hometiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hometile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.hometile strong { margin: 0; }

/* 3.2: стадия «завершён» — проект окончательно закончен */
.pill.done { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.prcard:has(.pill.done) { opacity: .78; }

/* 3.4: авторы журнала без агентов — Уцы и GPT-6 Astra (ночной обход) */
.dot.utsy { background: var(--claude); } .dot.astra { background: var(--codex); }
.c-utsy { color: var(--claude); } .c-astra { color: var(--codex); }

/* 3.6: вкладка «Обходы» */
.audit { margin-bottom: 12px; }
.audittext { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.audit details { margin-top: 8px; }

/* ===== 3.8 (18.09.2026): оформление в стиле сайта Halal VPN L2 =====
   Тихая тёмная iOS-поверхность: почти чёрный фон, карточки #1c1c1f со скруглением 22 px, системный шрифт Apple,
   сверху плавающая панель со знаком и переключателем разделов. Токены перекрывают прежнюю тему «Пульт». */
:root {
  --bg: #09090b; --well: #111114;
  --surface-hi: #1c1c1f; --surface-lo: #1c1c1f; --panel-hi: #1c1c1f; --panel-lo: #1c1c1f;
  --raised-hi: #2c2c30; --raised-lo: #2c2c30; --raised-on: #383842; --edge: #ffffff12;
  --line: rgba(255, 255, 255, 0.07);
  --text: #f5f5f7; --muted: #adb0bb; --faint: #8e909a;
  --btn: #0a64cd; --btn-on: #1374e6; --btn-ink: #ffffff; --link: #79afff;
  --ok: #65dca9; --warn: #ffcb7c; --risk: #ff919b;
  --wash: rgba(255, 203, 124, 0.12); --okwash: rgba(101, 220, 169, 0.12); --riskwash: rgba(255, 145, 155, 0.12);
  --card: inset 0 0 0 1px #ffffff0b; --lift: inset 0 0 0 1px #ffffff0b; --bump: inset 0 0 0 1px #ffffff0c; --sink: inset 0 0 0 1px #ffffff0a;
  --focus: 0 0 0 3px #79afff;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
html, body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
body { background: var(--bg); }
a { color: var(--link); }
a:hover { color: #a9ccff; }
::selection { background: #32538a; color: #fff; }

/* Раскладка: панель сверху, содержимое по центру */
.shell.topnav { display: block; height: auto; min-height: 100vh; min-height: 100dvh; max-width: none; padding: 0; }
.topbar {
  position: sticky; top: 12px; z-index: 20;
  display: grid; grid-template-columns: minmax(185px, 1fr) minmax(0, 780px) minmax(44px, 1fr); align-items: center; gap: 20px;
  max-width: 1432px; min-height: 76px; margin: 12px auto 0; padding: 12px 18px;
  background: rgba(30, 30, 35, .91); border: 1px solid rgba(255, 255, 255, .1); border-radius: 23px;
  box-shadow: 0 10px 36px #00000033, inset 0 1px #ffffff06;
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 1.125rem; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand small { display: block; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(155deg, #5b9cff, #2863ce); box-shadow: inset 0 1px #ffffff40, 0 3px 12px #00000030; color: #fff; font-size: 1.4rem; font-weight: 700; }
.app-segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 15px;
  background: #12121566; border: 1px solid #ffffff08; box-shadow: inset 0 1px 3px #0002; }
.app-segments a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 8px; border-radius: 11px;
  font-size: 14px; font-weight: 600; color: #adb0bb; white-space: nowrap; transition: background 200ms, color 200ms, transform 180ms var(--ease); }
.app-segments a[aria-current="page"] { background: #36363f; color: #f5f5f7; box-shadow: 0 2px 6px #0003, inset 0 1px #ffffff10; }
.app-segments a:active { transform: scale(.97); }
.app-segments svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) { .app-segments a:not([aria-current]):hover { color: #fff; background: #ffffff08; } }
.shell.topnav .stage { display: flex; flex-direction: column; max-width: 1488px; margin: 0 auto; padding: 34px 28px 40px; background: none; box-shadow: none; border-radius: 0; overflow: visible; height: auto; gap: 22px; }
.shell.topnav .stage > * { max-width: 100%; }

/* Материалы: карточки, кнопки, метки */
.panel { background: var(--surface-hi); border: 1px solid #ffffff0b; box-shadow: 0 8px 30px #00000024, inset 0 1px #ffffff05; border-radius: 22px; padding: 24px 28px; }
.h1, .greet { letter-spacing: -.045em; }
.ptitle { font-size: 1.0625rem; letter-spacing: -.015em; }
.btn { min-height: 44px; padding: 0 19px; border-radius: 15px; border: 1px solid #ffffff0c; background: var(--raised-hi); box-shadow: none; font-size: .875rem; font-weight: 600;
  transition: background 200ms, transform 180ms var(--ease), box-shadow 200ms; }
.btn:hover { background: #383842; box-shadow: inset 0 1px #ffffff14; }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--btn); color: #fff; box-shadow: 0 4px 14px #006ce220, inset 0 1px #ffffff15; }
.btn.primary:hover { background: var(--btn-on); color: #fff; }
.pill { border-radius: 999px; background: #ffffff0a; box-shadow: none; }
.prcard { border-radius: 22px; }
.prcard:hover { background: #222226; box-shadow: 0 8px 30px #00000024, inset 0 0 0 1px #79afff80; }
.hometile { border-radius: 22px; transition: background 200ms, box-shadow 200ms; }
.hometile:hover { background: #222226; box-shadow: 0 8px 30px #00000024, inset 0 0 0 1px #79afff80; }
input, textarea, select { border-radius: 14px; }
.stage *:focus-visible, .topbar *:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; box-shadow: none; }

/* Вход — как карточка входа Halal */
.loginwrap { background: radial-gradient(ellipse at 50% 0%, #18273e 0%, transparent 60%), var(--bg); }
.login { width: min(100%, 440px); padding: 36px; border-radius: 30px; gap: 18px; box-shadow: 0 24px 80px #0006; }
.login .brand { margin-bottom: 18px; }
.login input { min-height: 52px; padding: 12px 15px; border: 1px solid #35353d; background: var(--bg); color: var(--text); font: inherit; }

@media (max-width: 1500px) { .topbar { margin-left: 28px; margin-right: 28px; } }
@media (max-width: 1000px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; }
  .app-segments { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 650px) {
  .topbar { top: 0; margin: 10px 12px 0; padding: 10px; border-radius: 20px; gap: 8px; min-height: 0; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .app-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; }
  .app-segments a { flex-direction: column; gap: 4px; min-height: 54px; padding: 7px 3px; font-size: 12px; line-height: 1.25; }
  .shell.topnav .stage { padding: 22px 16px 32px; }
  .panel { padding: 20px 18px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { .app-segments a, .btn, .prcard, .hometile { transition: none; } }
/* Служебные подписи — обычным шрифтом, как у Halal; моноширинный остаётся только у .mono и кода */
.small, .meta, .limit, .crumbs, .jline .t, .prpath { font-family: inherit; font-variant-numeric: tabular-nums; }
/* Карточка проекта: метки продуктов переносятся на свою строку и не сжимают название */
.prcard .prtop { flex-wrap: wrap; row-gap: 8px; }
.prcard .prtop > b { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.prcard .prtop .pill { max-width: 100%; white-space: normal; border-radius: 12px; line-height: 1.3; }

/* 3.9: главная — окно диалога с сессией Уцы в левой половине */
.homegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dialog { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; }
.dlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; scrollbar-width: thin; }
.dmsg { max-width: 88%; padding: 10px 14px; border-radius: 18px; background: var(--raised-hi); }
.dmsg.owner { align-self: flex-end; background: #0a64cd; color: #fff; border-bottom-right-radius: 6px; }
.dmsg.friend { align-self: flex-start; border-bottom-left-radius: 6px; }
.dwho { font-size: 12px; opacity: .75; margin-bottom: 3px; }
.dtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.dform { display: flex; gap: 10px; align-items: flex-end; }
.dform textarea { flex: 1 1 auto; min-height: 48px; max-height: 160px; resize: vertical; padding: 12px 14px; border: 1px solid #35353d; background: var(--bg); color: var(--text); font: inherit; }
@media (max-width: 1000px) { .homegrid { grid-template-columns: minmax(0, 1fr); } .dialog { height: calc(100dvh - 210px); } }

/* 3.12: «Ежедневный отчёт» — столбики по высоте содержимого */
.reportgrid { margin-bottom: 8px; }
.reportgrid .panel { height: auto; }

/* 3.12.2: сообщение, которое сессия ещё не приняла */
.dmsg.pending { opacity: .6; }