/* ==========================================================================
   SEO-Фабрика — дизайн-система «Atelier»
   Полностью новая. Ничего от предыдущей версии не переиспользовано.

   Философия:
     • спокойный светлый холст, воздух, тонкие границы вместо теней
     • одна акцентная краска (синяя), остальные цвета — только смысловые
     • всё движение 160–220 мс, ни одной резкой смены состояния
     • интерфейс рассчитан на монитор от 1280 px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОКЕНЫ
   -------------------------------------------------------------------------- */

:root {
  /* Поверхности */
  --bg:            #ffffff;
  --surface:       #f9f8f7;
  --surface-2:     #f2f1ef;
  --surface-3:     #eae8e5;
  --rail:          #fbfaf9;

  /* Границы */
  --line:          #e6e5e3;
  --line-soft:     #efeeec;
  --line-strong:   #d7d5d1;

  /* Текст */
  --text:          #2c2c2b;
  --text-2:        #56534e;
  --muted:         #837f79;
  --faint:         #a8a49d;

  /* Смысловые */
  --accent:        #2783de;
  --accent-hover:  #1f6dbb;
  --accent-soft:   #e5f2fc;
  --accent-line:   #b9dcf7;

  --ok:            #3f9268;
  --ok-soft:       #e8f1ec;
  --ok-line:       #bfdccc;

  --warn:          #c9762f;
  --warn-soft:     #fbebde;
  --warn-line:     #eecfad;

  --bad:           #d8544a;
  --bad-soft:      #fce9e7;
  --bad-line:      #f2c4bf;

  --violet:        #8360b8;
  --violet-soft:   #f0eaf9;

  /* Геометрия */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Тени — используются крайне скупо */
  --sh-1: 0 1px 2px rgba(28, 26, 23, .05);
  --sh-2: 0 1px 2px rgba(28, 26, 23, .05), 0 4px 12px rgba(28, 26, 23, .045);
  --sh-3: 0 2px 4px rgba(28, 26, 23, .06), 0 12px 32px rgba(28, 26, 23, .09);
  --sh-pop: 0 4px 8px rgba(28, 26, 23, .06), 0 24px 56px rgba(28, 26, 23, .14);

  /* Движение */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 280ms;

  /* Раскладка */
  --rail-w: 264px;
  --topbar-h: 56px;
  --content-max: 1180px;

  /* Шрифты */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
}

[data-theme="dark"] {
  --bg:            #191919;
  --surface:       #202020;
  --surface-2:     #272726;
  --surface-3:     #333331;
  --rail:          #1c1c1b;

  --line:          rgba(255, 255, 255, .13);
  --line-soft:     rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .24);

  --text:          #ffffff;
  --text-2:        rgba(255, 255, 255, .82);
  --muted:         rgba(255, 255, 255, .60);
  --faint:         rgba(255, 255, 255, .40);

  --accent:        #5e9fe8;
  --accent-hover:  #7cb2ee;
  --accent-soft:   rgba(94, 159, 232, .14);
  --accent-line:   rgba(94, 159, 232, .34);

  --ok:            #72bc8f;
  --ok-soft:       rgba(114, 188, 143, .13);
  --ok-line:       rgba(114, 188, 143, .32);

  --warn:          #de9255;
  --warn-soft:     rgba(222, 146, 85, .13);
  --warn-line:     rgba(222, 146, 85, .32);

  --bad:           #e97366;
  --bad-soft:      rgba(233, 115, 102, .13);
  --bad-line:      rgba(233, 115, 102, .32);

  --violet:        #bf8eda;
  --violet-soft:   rgba(191, 142, 218, .13);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --sh-3: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .4);
  --sh-pop: 0 4px 8px rgba(0, 0, 0, .3), 0 24px 56px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   2. СБРОС И БАЗА
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0, "kern" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; color: var(--text); }
h1 { font-size: 26px; line-height: 1.24; letter-spacing: -.02em; }
h2 { font-size: 19px; line-height: 1.3;  letter-spacing: -.015em; }
h3 { font-size: 15px; line-height: 1.4; }
h4 { font-size: 13px; line-height: 1.4; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

code, pre, .mono { font-family: var(--mono); font-size: .92em; font-variant-ligatures: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Скроллбар */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* Раньше здесь гасились ВСЕ анимации, если в Windows/macOS выключены
   «эффекты анимации», — и спиннеры с точками стояли на месте.
   Теперь убираем только декоративные переходы, индикаторы загрузки работают. */
@media (prefers-reduced-motion: reduce) {
  .view.is-active, .msg, .modal, .drawer, .toast { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   3. КАРКАС ПРИЛОЖЕНИЯ
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Левая колонна ---- */

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rail);
  border-right: 1px solid var(--line);
  z-index: 40;
}

.rail-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.01em;
  padding: 4px 6px;
  margin: -4px -6px 0;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.brand:hover { background: var(--surface-2); color: var(--text); }

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--text);
  color: var(--bg);
  display: grid; place-items: center;
  flex: none;
}
.brand-mark svg { display: block; }
.brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Переключатель проекта */
.proj-switch {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.proj-switch:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.proj-switch-dot {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--faint);
}
.proj-switch-dot.is-live { background: var(--accent); animation: pulse 1.8s var(--ease) infinite; }
.proj-switch-dot.is-done { background: var(--ok); }
.proj-switch-dot.is-error { background: var(--bad); }
.proj-switch-body { min-width: 0; flex: 1; }
.proj-switch-name {
  font-size: 13px; font-weight: 550; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-switch-meta {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-switch-caret { color: var(--faint); flex: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* Навигация по этапам */
.rail-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 16px;
}

.nav-group + .nav-group { margin-top: 18px; }

.nav-group-title {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 8px 6px;
}

.nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item + .nav-item { margin-top: 1px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }

.nav-item.is-active {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 18px;
  margin-top: -9px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-ico {
  width: 17px; height: 17px; flex: none;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.nav-item:hover .nav-ico,
.nav-item.is-active .nav-ico { color: var(--text); }
.nav-item.is-active .nav-ico { color: var(--accent); }

.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-count { background: var(--bg); color: var(--text); }

.nav-state { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.nav-state.ok    { background: var(--ok); }
.nav-state.warn  { background: var(--warn); }
.nav-state.bad   { background: var(--bad); }
.nav-state.live  { background: var(--accent); animation: pulse 1.8s var(--ease) infinite; }

.nav-soon {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--violet-soft);
  border-radius: 4px;
  padding: 1.5px 5px;
  flex: none;
}

.rail-foot {
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-status {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  font-size: 12px;
  color: var(--muted);
  border-radius: var(--r-sm);
}
.rail-status b { color: var(--text-2); font-weight: 550; }

/* ---- Правая колонна ---- */

.shell { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.crumbs a { color: var(--muted); font-weight: 500; }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur {
  color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}

.topbar-spacer { flex: 1; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }

.kbd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted); font-size: 12.5px;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.kbd-hint:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }

kbd {
  font-family: var(--font);
  font-size: 11px; font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--muted);
}

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.bordered { border-color: var(--line); background: var(--surface); }
.icon-btn.bordered:hover { border-color: var(--line-strong); }

/* ---- Полотно ---- */

.canvas { flex: 1; padding: 32px 28px 88px; }
.wrap { max-width: var(--content-max); margin: 0 auto; }

.view { display: none; }
.view.is-active { display: block; animation: viewIn var(--t-slow) var(--ease-out); }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Заголовок раздела */
.view-head { margin-bottom: 24px; display: flex; align-items: flex-start; gap: 20px; }
.view-head-body { flex: 1; min-width: 0; }
.view-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  margin-bottom: 7px;
}
.view-eyebrow .dot { width: 4px; height: 4px; border-radius: 99px; background: currentColor; }
.view-sub { color: var(--muted); font-size: 14px; margin-top: 7px; max-width: 74ch; }
.view-actions { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 4px; }

/* --------------------------------------------------------------------------
   4. КНОПКИ
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--bg);
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 550; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { flex: none; }

.btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-theme="dark"] .btn-primary { --btn-fg: #10202f; }

.btn-dark { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); }
.btn-dark:hover { background: var(--text-2); border-color: var(--text-2); }

.btn-ok { --btn-bg: var(--ok); --btn-fg: #fff; --btn-bd: var(--ok); }
.btn-ok:hover { filter: brightness(1.06); background: var(--ok); border-color: var(--ok); }

.btn-danger { --btn-bg: var(--bad-soft); --btn-fg: var(--bad); --btn-bd: var(--bad-line); }
.btn-danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

.btn-quiet { --btn-bd: transparent; --btn-bg: transparent; --btn-fg: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-xs); gap: 5px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14.5px; border-radius: var(--r-md); }
.btn-block { width: 100%; }

.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 99px;
  color: var(--text);
  animation: spin .7s linear infinite;
}
.btn-primary.is-busy::after, .btn-dark.is-busy::after, .btn-ok.is-busy::after { color: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }

.link-btn {
  border: 0; background: 0; padding: 0;
  color: var(--accent); font-size: 13px; font-weight: 550;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.link-btn.danger { color: var(--bad); }

.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Сегментированный переключатель */
.seg {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  gap: 2px;
}
.seg button {
  border: 0; background: transparent;
  height: 28px; padding: 0 13px;
  border-radius: var(--r-xs);
  font-size: 12.5px; font-weight: 550; color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button.is-on { background: var(--bg); color: var(--text); box-shadow: var(--sh-1); }

/* --------------------------------------------------------------------------
   5. КАРТОЧКИ И ПАНЕЛИ
   -------------------------------------------------------------------------- */

.panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel + .panel { margin-top: 18px; }

.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head.no-line { border-bottom: 0; padding-bottom: 0; }
.panel-head-body { flex: 1; min-width: 0; }
.panel-title { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.panel-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.panel-tools { display: flex; align-items: center; gap: 7px; flex: none; }
.panel-body { padding: 18px; }
.panel-body.tight { padding: 14px; }
.panel-body.flush { padding: 0; }
.panel-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  display: flex; align-items: center; gap: 10px;
}

.panel.accent { border-color: var(--accent-line); }
.panel.accent .panel-head { background: var(--accent-soft); border-bottom-color: var(--accent-line); }

.grid   { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-sm { gap: 12px; }
.span-2 { grid-column: span 2; }

@media (max-width: 1180px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   6. МЕТРИКИ
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.metric { padding: 15px 18px; position: relative; }
.metric + .metric { box-shadow: -1px 0 0 var(--line-soft); }
.metric-k {
  font-size: 11.5px; font-weight: 550; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.metric-v {
  font-size: 25px; font-weight: 620; letter-spacing: -.028em;
  line-height: 1.2; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.metric-v small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.metric-note { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.metric.ok   .metric-v { color: var(--ok); }
.metric.warn .metric-v { color: var(--warn); }
.metric.bad  .metric-v { color: var(--bad); }
.metric.accent .metric-v { color: var(--accent); }

/* --------------------------------------------------------------------------
   7. ФОРМЫ
   -------------------------------------------------------------------------- */

.field { display: block; }
.field + .field { margin-top: 15px; }
.field-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px;
}
.field-label .req { color: var(--bad); }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field-hint code {
  background: var(--surface-2); padding: 1px 5px;
  border-radius: 4px; color: var(--text-2);
}

.input, .textarea, .select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface); color: var(--muted); cursor: not-allowed;
}

.textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.textarea.code {
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  min-height: 300px; background: var(--surface);
  tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

.select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23837f79' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

.input-group { display: flex; gap: 8px; align-items: center; }
.input-group .input { flex: 1; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .field + .field { margin-top: 0; }

/* Переключатель */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 36px; height: 21px; flex: none;
  background: var(--surface-3);
  border-radius: 99px;
  position: relative;
  transition: background var(--t) var(--ease);
}
.switch-track::after {
  content: "";
  position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 99px;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform var(--t) var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(15px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch-text { min-width: 0; }
.switch-title { font-size: 13.5px; font-weight: 550; }
.switch-desc { font-size: 12px; color: var(--muted); }

/* Чекбокс */
.check {
  appearance: none;
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer; position: relative;
  transition: all var(--t-fast) var(--ease);
  vertical-align: middle;
}
.check:hover { border-color: var(--accent); }
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: "";
  position: absolute; left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.check:indeterminate { background: var(--accent); border-color: var(--accent); }
.check:indeterminate::after {
  content: "";
  position: absolute; left: 3px; top: 6px;
  width: 8px; height: 2px; background: #fff; border: 0;
  transform: none;
}

/* Радио-карточки — выбор из библиотеки */
.pick { display: grid; gap: 10px; }
.pick-card {
  position: relative;
  display: flex; gap: 12px;
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.pick-card:hover { border-color: var(--line-strong); background: var(--surface); }
.pick-card input { position: absolute; opacity: 0; }
.pick-card.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pick-card.is-on::after {
  content: "";
  position: absolute; inset: -1px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  pointer-events: none;
}
.pick-ico {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--text-2);
}
.pick-card.is-on .pick-ico { background: var(--bg); color: var(--accent); }
.pick-body { min-width: 0; flex: 1; }
.pick-title { font-size: 13.5px; font-weight: 600; }
.pick-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.pick-need {
  font-size: 11.5px; color: var(--faint); margin-top: 5px;
  display: flex; align-items: center; gap: 5px;
}

/* --------------------------------------------------------------------------
   8. ПЛАШКИ, СТАТУСЫ, ТЕГИ
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.002em;
  white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }

.pill.neutral { background: var(--surface-2);  color: var(--muted); }
.pill.info    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.pill.ok      { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.pill.warn    { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.pill.bad     { background: var(--bad-soft);    color: var(--bad);    border-color: var(--bad-line); }
.pill.live    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.pill.live .dot { animation: pulse 1.8s var(--ease) infinite; }
.pill.soon    { background: var(--violet-soft); color: var(--violet); }

.pill-lg { height: 26px; padding: 0 11px; font-size: 12.5px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-2); color: var(--text-2);
  border-radius: var(--r-xs); padding: 2px 7px;
  border: 1px solid var(--line-soft);
}
.tag.ph { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

.model-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-xs); padding: 1px 6px;
  font-family: var(--mono);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-tag.ok   { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-line); }
.model-tag.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }

/* --------------------------------------------------------------------------
   9. СООБЩЕНИЯ В ПОТОКЕ
   -------------------------------------------------------------------------- */

.note {
  display: flex; gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px; line-height: 1.55;
  color: var(--text-2);
}
.note-ico { flex: none; margin-top: 1px; color: var(--muted); }
.note-body { min-width: 0; flex: 1; }
.note-body b { color: var(--text); font-weight: 600; }
.note ul { margin: 6px 0 0; padding-left: 18px; }
.note li + li { margin-top: 3px; }

.note.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.note.info .note-ico { color: var(--accent); }
.note.ok   { background: var(--ok-soft);   border-color: var(--ok-line); }
.note.ok   .note-ico { color: var(--ok); }
.note.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.note.warn .note-ico { color: var(--warn); }
.note.bad  { background: var(--bad-soft);  border-color: var(--bad-line); }
.note.bad  .note-ico { color: var(--bad); }

/* --------------------------------------------------------------------------
   10. ЗАГЛУШКИ — будущие блоки системы
   -------------------------------------------------------------------------- */

.stub {
  position: relative;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in srgb, var(--surface-2) 55%, transparent) 9px 10px);
  padding: 20px;
}
.stub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.stub-title { font-size: 14px; font-weight: 600; }
.stub-text { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 78ch; }
.stub-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.stub-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--text-2);
}
.stub-list li::before {
  content: "";
  width: 5px; height: 5px; margin-top: 7px; flex: none;
  border-radius: 99px; background: var(--violet);
}
.stub-foot { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.stub-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--violet); background: var(--violet-soft);
  border-radius: var(--r-xs); padding: 2px 7px;
}

/* Заблокированная кнопка будущей функции */
.btn.is-stub {
  border-style: dashed;
  color: var(--violet);
  border-color: color-mix(in srgb, var(--violet) 40%, transparent);
  background: var(--violet-soft);
}
.btn.is-stub:hover {
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  border-color: var(--violet);
}

/* --------------------------------------------------------------------------
   11. ТАБЛИЦЫ
   -------------------------------------------------------------------------- */

.tbl-scroll { overflow-x: auto; }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.tbl thead th {
  position: sticky; top: var(--topbar-h); z-index: 5;
  background: var(--surface);
  padding: 9px 14px;
  text-align: left;
  font-size: 11px; font-weight: 650; letter-spacing: .045em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line-soft);
}
.tbl thead th:first-child { padding-left: 18px; }
.tbl thead th:last-child  { padding-right: 18px; }

.tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.tbl tbody td:first-child { padding-left: 18px; }
.tbl tbody td:last-child  { padding-right: 18px; }
.tbl tbody tr { transition: background var(--t-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--surface); }
.tbl tbody tr.is-sel { background: var(--accent-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }

.td-id { color: var(--faint); font-variant-numeric: tabular-nums; width: 52px; font-size: 12px; }
.td-key { font-weight: 550; }
.td-num { font-variant-numeric: tabular-nums; }
.td-mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.td-act { text-align: right; white-space: nowrap; }
.td-w-check { width: 42px; }

.td-clip {
  max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.td-clip-lg { max-width: 380px; }

.row-tools { display: inline-flex; gap: 4px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.tbl tbody tr:hover .row-tools,
.tbl tbody tr:focus-within .row-tools { opacity: 1; }

.tbl-empty { text-align: center; padding: 44px 20px !important; color: var(--muted); }

/* Плавающая панель выделения */
.selbar {
  position: fixed; left: calc(var(--rail-w) + 28px); right: 28px; bottom: 22px;
  z-index: 45;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  animation: selIn var(--t) var(--ease-out);
}
.selbar[hidden] { display: none; }
.selbar b { font-variant-numeric: tabular-nums; }
.selbar .spacer { flex: 1; }
.selbar .btn { --btn-bg: rgba(255,255,255,.12); --btn-fg: var(--bg); --btn-bd: rgba(255,255,255,.2); }
.selbar .btn:hover { --btn-bg: rgba(255,255,255,.22); }
.selbar .btn-danger { --btn-bg: var(--bad); --btn-fg: #fff; --btn-bd: var(--bad); }

@keyframes selIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   12. ШКАЛЫ И ПРОГРЕСС
   -------------------------------------------------------------------------- */

.bar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease-out);
}
.bar-fill.ok   { background: var(--ok); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.bad  { background: var(--bad); }

.bar-split { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.bar-split span { transition: width var(--t-slow) var(--ease-out); }
.bar-split .s-ok   { background: var(--ok); }
.bar-split .s-bad  { background: var(--bad); }
.bar-split .s-live { background: var(--accent); }

.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; font-size: 13px;
}
.progress-head .pct { font-size: 19px; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.progress-legend {
  display: flex; gap: 16px; margin-top: 10px;
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.progress-legend span { display: inline-flex; align-items: center; gap: 6px; }
.progress-legend i { width: 7px; height: 7px; border-radius: 99px; }

/* Кольцо */
.ring { position: relative; width: 108px; height: 108px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .track { stroke: var(--surface-3); }
.ring .fill  { stroke: var(--accent); transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.ring-label {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
}
.ring-num { font-size: 21px; font-weight: 620; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring-cap { font-size: 10.5px; color: var(--muted); font-weight: 550; }

/* Гистограмма баллов */
.hist { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.hist-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.hist-bar {
  border-radius: 4px 4px 2px 2px;
  min-height: 3px;
  background: var(--accent);
  transition: height var(--t-slow) var(--ease-out);
}
.hist-bar.ok   { background: var(--ok); }
.hist-bar.warn { background: var(--warn); }
.hist-bar.bad  { background: var(--bad); }
.hist-cap { font-size: 10.5px; color: var(--faint); text-align: center; white-space: nowrap; }
.hist-val { font-size: 11.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   13. ГЕЙТ — визуализация 4 уровней
   -------------------------------------------------------------------------- */

.gate { display: grid; gap: 0; }
.gate-level {
  position: relative;
  display: flex; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.gate-level:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.gate-level:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.gate-level + .gate-level { border-top: 0; }
.gate-level:hover { background: var(--surface); }

.gate-n {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.gate-level.ok   .gate-n { background: var(--ok-soft);   color: var(--ok); }
.gate-level.warn .gate-n { background: var(--warn-soft); color: var(--warn); }
.gate-level.bad  .gate-n { background: var(--bad-soft);  color: var(--bad); }
.gate-level.soon .gate-n { background: var(--violet-soft); color: var(--violet); }

.gate-body { flex: 1; min-width: 0; }
.gate-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gate-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.gate-stat { flex: none; text-align: right; min-width: 96px; }
.gate-stat-v { font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gate-stat-k { font-size: 11px; color: var(--muted); }

/* Развилка гейта */
.fork { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fork-card {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg);
}
.fork-card.pass { border-color: var(--ok-line);   background: var(--ok-soft); }
.fork-card.redo { border-color: var(--warn-line); background: var(--warn-soft); }
.fork-card.drop { border-color: var(--bad-line);  background: var(--bad-soft); }
.fork-range { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.fork-card.pass .fork-range { color: var(--ok); }
.fork-card.redo .fork-range { color: var(--warn); }
.fork-card.drop .fork-range { color: var(--bad); }
.fork-name { font-size: 15px; font-weight: 620; margin-top: 4px; letter-spacing: -.015em; }
.fork-count { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   14. КАЧЕСТВО В СТРОКЕ ТАБЛИЦЫ
   -------------------------------------------------------------------------- */

.score {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  border-radius: var(--r-xs);
}
.score-num {
  width: 34px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  font-size: 13px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--muted);
  transition: all var(--t-fast) var(--ease);
}
.score.g-a .score-num { background: var(--ok-soft);   color: var(--ok); }
.score.g-b .score-num { background: var(--ok-soft);   color: var(--ok); }
.score.g-c .score-num { background: var(--warn-soft); color: var(--warn); }
.score.g-d .score-num { background: var(--warn-soft); color: var(--warn); }
.score.g-f .score-num { background: var(--bad-soft);  color: var(--bad); }
.score:hover .score-num { filter: brightness(.96); }

.score-meta { text-align: left; line-height: 1.3; }
.score-checks { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.score-fail { font-size: 11px; color: var(--bad); font-weight: 550; }

.uniq { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.uniq.ok   { color: var(--ok); }
.uniq.warn { color: var(--warn); }
.uniq.bad  { color: var(--bad); }
.uniq-none { color: var(--faint); font-weight: 400; }

/* Список проверок в панели справа */
.checks-list { display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg);
  font-size: 12.5px;
}
.check-row.bad { background: var(--bad-soft); }
.check-mark { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 99px; }
.check-row.ok  .check-mark { background: var(--ok-soft);  color: var(--ok); }
.check-row.bad .check-mark { background: var(--bad-soft); color: var(--bad); }
.check-name { flex: 1; min-width: 0; font-weight: 500; }
.check-name small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; }
.check-val {
  flex: none; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); text-align: right; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.check-row.bad .check-val { color: var(--bad); }

/* --------------------------------------------------------------------------
   15. ЧАТ С МОДЕЛЬЮ
   -------------------------------------------------------------------------- */

.chat { display: flex; flex-direction: column; height: 520px; }

.chat-log {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface);
  scroll-behavior: smooth;
}

.msg { display: flex; gap: 11px; max-width: 88%; animation: msgIn var(--t) var(--ease-out); }
.msg-av {
  width: 27px; height: 27px; flex: none;
  border-radius: 99px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650;
  background: var(--surface-3); color: var(--text-2);
}
.msg-bubble {
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  min-width: 0;
}
.msg-foot { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .msg-av { background: var(--accent); color: #fff; }
.msg.user .msg-bubble { background: var(--accent-soft); border-color: var(--accent-line); }

.msg.assistant .msg-av { background: var(--text); color: var(--bg); }

.msg.system { align-self: center; max-width: 100%; }
.msg.system .msg-bubble {
  background: transparent; border: 0; text-align: center;
  color: var(--muted); font-size: 12.5px; padding: 4px;
}
.msg.system .msg-av { display: none; }

.msg.is-error .msg-bubble { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.typing i {
  width: 6px; height: 6px; border-radius: 99px; background: var(--faint);
  animation: typing 1.3s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.chat-compose {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.chat-box {
  display: flex; gap: 10px; align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 8px 8px 12px;
  background: var(--bg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chat-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-box textarea {
  flex: 1; border: 0; background: transparent; resize: none;
  min-height: 24px; max-height: 190px;
  font-size: 13.5px; line-height: 1.55;
  padding: 3px 0;
}
.chat-box textarea:focus { outline: 0; }
.chat-quick { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--line); background: var(--bg);
  border-radius: 99px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   16. ПРАВАЯ ПАНЕЛЬ (drawer)
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 22, 20, .32);
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: fadeIn var(--t) var(--ease) forwards;
}
.scrim[hidden] { display: none; }
@keyframes fadeIn { to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(680px, 88vw);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-pop);
  animation: drawerIn var(--t-slow) var(--ease-out);
}
.drawer[hidden] { display: none; }
.drawer.is-wide { width: min(1020px, 94vw); }

@keyframes drawerIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.drawer-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-head-body { flex: 1; min-width: 0; }
.drawer-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.drawer-title {
  font-size: 16px; font-weight: 620; letter-spacing: -.015em; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-body.flush { padding: 0; }
.drawer-foot {
  flex: none; padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; gap: 9px;
}

.drawer-tabs {
  display: flex; gap: 3px; padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg); flex: none;
}
.drawer-tabs button {
  border: 0; background: 0;
  padding: 10px 11px;
  font-size: 13px; font-weight: 550; color: var(--muted);
  cursor: pointer; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.drawer-tabs button:hover { color: var(--text); }
.drawer-tabs button.is-on { color: var(--text); }
.drawer-tabs button.is-on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}

/* --------------------------------------------------------------------------
   17. МОДАЛЬНОЕ ОКНО
   -------------------------------------------------------------------------- */

.modal-wrap {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 28px;
}
.modal-wrap[hidden] { display: none; }
.modal {
  width: 100%; max-width: 460px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  animation: modalIn var(--t-slow) var(--ease-out);
}
.modal.is-lg { max-width: 620px; }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }

.modal-head { padding: 18px 20px 0; }
.modal-ico {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 12px;
  background: var(--surface-2); color: var(--text-2);
}
.modal-ico.bad { background: var(--bad-soft); color: var(--bad); }
.modal-ico.warn { background: var(--warn-soft); color: var(--warn); }
.modal-ico.info { background: var(--accent-soft); color: var(--accent); }
.modal-title { font-size: 17px; font-weight: 620; letter-spacing: -.018em; }
.modal-text { font-size: 13.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.modal-body { padding: 18px 20px; }
.modal-foot {
  padding: 14px 20px; background: var(--surface);
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 9px; justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   18. УВЕДОМЛЕНИЯ
   -------------------------------------------------------------------------- */

.toasts {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column-reverse; gap: 9px;
  pointer-events: none;
  max-width: 400px;
}
.toast {
  pointer-events: auto;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: 13px; line-height: 1.5;
  animation: toastIn var(--t-slow) var(--ease-out);
}
.toast.is-out { animation: toastOut var(--t) var(--ease) forwards; }
.toast-ico { flex: none; margin-top: 1px; }
.toast.ok   .toast-ico { color: var(--ok); }
.toast.bad  .toast-ico { color: var(--bad); }
.toast.warn .toast-ico { color: var(--warn); }
.toast.info .toast-ico { color: var(--accent); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; }
.toast-text { color: var(--muted); font-size: 12.5px; margin-top: 2px; word-break: break-word; }
.toast-x {
  flex: none; border: 0; background: 0; cursor: pointer;
  color: var(--faint); padding: 0; line-height: 1;
  transition: color var(--t-fast) var(--ease);
}
.toast-x:hover { color: var(--text); }

@keyframes toastIn  { from { opacity: 0; transform: translateX(20px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px) scale(.97); } }

/* --------------------------------------------------------------------------
   19. КОМАНДНАЯ ПАЛИТРА
   -------------------------------------------------------------------------- */

.cmdk-wrap {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: center;
  padding-top: 13vh;
  background: rgba(24, 22, 20, .3);
  backdrop-filter: blur(3px);
}
.cmdk-wrap[hidden] { display: none; }
.cmdk {
  width: min(620px, 92vw);
  max-height: 62vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  animation: modalIn var(--t-slow) var(--ease-out);
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk-input-row svg { color: var(--faint); flex: none; }
.cmdk-input-row input {
  flex: 1; border: 0; background: 0; font-size: 15px;
}
.cmdk-input-row input:focus { outline: 0; }
.cmdk-list { overflow-y: auto; padding: 7px; }
.cmdk-group {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  padding: 9px 9px 5px;
}
.cmdk-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 8px 9px; border: 0; background: 0;
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  font-size: 13.5px; color: var(--text);
  transition: background var(--t-fast) var(--ease);
}
.cmdk-item:hover, .cmdk-item.is-cur { background: var(--surface-2); }
.cmdk-item .ci { color: var(--muted); flex: none; }
.cmdk-item .cl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .cs { font-size: 11.5px; color: var(--faint); flex: none; }
.cmdk-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }

/* --------------------------------------------------------------------------
   20. СКЕЛЕТОНЫ И ПУСТЫЕ СОСТОЯНИЯ
   -------------------------------------------------------------------------- */

.sk {
  background: linear-gradient(90deg,
    var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
  background-size: 300% 100%;
  border-radius: var(--r-xs);
  animation: shimmer 1.5s var(--ease) infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.sk-line { height: 11px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }

.empty { text-align: center; padding: 52px 24px; }
.empty-art {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--faint);
}
.empty-title { font-size: 15px; font-weight: 600; }
.empty-text { font-size: 13px; color: var(--muted); margin: 7px auto 0; max-width: 46ch; line-height: 1.6; }
.empty-act { margin-top: 18px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 99px;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

/* --------------------------------------------------------------------------
   21. ПУБЛИКАЦИЯ ВОЛНАМИ / ТАЙМЛАЙН
   -------------------------------------------------------------------------- */

.waves { display: grid; gap: 10px; }
.wave {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  position: relative;
}
.wave.is-next { border-color: var(--accent-line); background: var(--accent-soft); }
.wave.is-locked { opacity: .62; }
.wave-n {
  width: 30px; height: 30px; flex: none;
  border-radius: 99px;
  background: var(--surface-2); color: var(--text-2);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
}
.wave.is-next .wave-n { background: var(--accent); color: #fff; }
.wave-body { flex: 1; min-width: 0; }
.wave-title { font-size: 13.5px; font-weight: 600; }
.wave-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wave-stat { flex: none; text-align: right; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -26px; top: 3px;
  width: 18px; height: 18px; border-radius: 99px;
  background: var(--bg); border: 2px solid var(--line);
  display: grid; place-items: center;
}
.tl-item.ok   .tl-dot { border-color: var(--ok);   background: var(--ok-soft); }
.tl-item.live .tl-dot { border-color: var(--accent); background: var(--accent-soft); }
.tl-item.soon .tl-dot { border-color: var(--violet); background: var(--violet-soft); }
.tl-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tl-text { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   22. СПИСОК ПРОЕКТОВ (index.html)
   -------------------------------------------------------------------------- */

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; }

.pcard {
  position: relative;
  display: block;
  padding: 17px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.pcard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  color: var(--text);
}
.pcard-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.pcard-name {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 620; letter-spacing: -.014em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-domain { font-size: 12.5px; color: var(--accent); font-family: var(--mono); }
.pcard-desc {
  font-size: 12.5px; color: var(--muted); margin-top: 7px;
  line-height: 1.5; min-height: 38px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-bar { margin: 13px 0 11px; }
.pcard-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.pcard-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard-foot .right { margin-left: auto; color: var(--faint); }

.pcard-x {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--r-xs);
  color: var(--faint); cursor: pointer;
  opacity: 0;
  transition: all var(--t-fast) var(--ease);
}
.pcard-wrap { position: relative; }
.pcard-wrap:hover .pcard-x { opacity: 1; }
.pcard-x:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }

/* --------------------------------------------------------------------------
   23. НАСТРОЙКИ (settings.html)
   -------------------------------------------------------------------------- */

.set-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 28px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 2px; }
.set-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}
.set-nav a:hover { background: var(--surface-2); color: var(--text); }
.set-nav a.is-on { background: var(--surface-3); color: var(--text); font-weight: 600; }

.kv { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px 18px; align-items: center; }
.kv-k { font-size: 13px; font-weight: 550; color: var(--text-2); }
.kv-k small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 1px; }

.ep-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.ep-row + .ep-row { margin-top: 8px; }
.ep-body { flex: 1; min-width: 0; }
.ep-name { font-size: 13.5px; font-weight: 600; }
.ep-url { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Свотчи темы */
.theme-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.theme-card {
  position: relative; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px; background: var(--bg);
  transition: all var(--t) var(--ease);
}
.theme-card:hover { border-color: var(--line-strong); }
.theme-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-card input { position: absolute; opacity: 0; }
.theme-swatches { display: flex; gap: 4px; margin-bottom: 10px; }
.theme-swatches i { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); }
.theme-name { font-size: 13.5px; font-weight: 600; }
.theme-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   24. ПРОЧЕЕ
   -------------------------------------------------------------------------- */

.iframe-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}
.iframe-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.iframe-bar .lights { display: flex; gap: 5px; }
.iframe-bar .lights i { width: 9px; height: 9px; border-radius: 99px; background: var(--surface-3); }
.iframe-shell iframe { width: 100%; border: 0; display: block; background: #fff; }

.code-block {
  margin: 0;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto;
}

.divider { height: 1px; background: var(--line-soft); margin: 18px 0; border: 0; }

.tags-row { display: flex; gap: 6px; flex-wrap: wrap; }

.hr-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  margin: 22px 0 14px;
}
.hr-label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.nums  { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 22px; }
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flex-wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

details.fold { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
details.fold + details.fold { margin-top: 8px; }
details.fold > summary {
  padding: 11px 14px; cursor: pointer;
  font-size: 13px; font-weight: 550;
  background: var(--surface);
  list-style: none;
  display: flex; align-items: center; gap: 9px;
  transition: background var(--t-fast) var(--ease);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "";
  width: 0; height: 0; flex: none;
  border-left: 4.5px solid var(--muted);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--t) var(--ease);
}
details.fold[open] > summary::before { transform: rotate(90deg) translateX(1px); }
details.fold > summary:hover { background: var(--surface-2); }
details.fold > .fold-body { padding: 14px; border-top: 1px solid var(--line-soft); }

@media (max-width: 1100px) {
  :root { --rail-w: 218px; }
  .canvas { padding: 26px 20px 80px; }
  .topbar { padding: 0 20px; }
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; grid-auto-flow: column; overflow-x: auto; }
}

/* =========================================================================
   25. ДОПОЛНЕНИЯ: карта колонок, кольцо генерации, гейт, поток, веса
   ========================================================================= */

/* --- карта колонок --- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
}
.col-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 13px 14px 14px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.col-card:hover { transform: translateY(-1px); box-shadow: var(--sh-1); border-color: var(--line-strong); }
.col-card.ok   { border-left: 3px solid var(--ok); }
.col-card.warn { border-left: 3px solid var(--warn); }
.col-card.bad  { border-left: 3px solid var(--bad); }
.col-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  letter-spacing: -.01em; word-break: break-word;
}
.col-nums { margin-top: 5px; font-size: 12px; color: var(--muted); }
.col-nums b { color: var(--text-2); font-weight: 600; }
.col-card .bar { margin-top: 9px; height: 4px; }
.col-note { margin-top: 7px; font-size: 11.5px; color: var(--faint); }
.col-card.ok   .col-note { color: var(--ok); }
.col-card.warn .col-note { color: var(--warn); }
.col-card.bad  .col-note { color: var(--bad); }

/* --- блок генерации --- */
.gen-top {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 232px;
  gap: 26px;
  align-items: center;
  padding: 22px 24px;
}
.ring-wrap { position: relative; width: 132px; height: 132px; }
.ring-wrap svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 620ms var(--ease-out), stroke var(--t) linear;
}
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.ring-center .gen-pct {
  font-size: 27px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ring-center .gen-cap { font-size: 11px; color: var(--muted); }

.gen-mid { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.gen-mid .gen-headline {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.gen-side {
  display: grid; gap: 10px;
  padding-left: 22px;
  border-left: 1px solid var(--line-soft);
}
.gen-side .kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gen-side .kv-k { font-size: 11.5px; color: var(--muted); }
.gen-side .kv-v {
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gen-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.progress-legend i.lg {
  width: 9px; height: 9px; border-radius: 3px; display: inline-block;
}
.progress-legend i.lg.ok   { background: var(--ok); }
.progress-legend i.lg.bad  { background: var(--bad); }
.progress-legend i.lg.live { background: var(--accent); }
.progress-legend i.lg.wait { background: var(--surface-3); border: 1px solid var(--line-strong); }

/* --- гейт: чипы проверок --- */
.gate-checks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.gate-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 11.5px; color: var(--text-2);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.gate-chip b { font-variant-numeric: tabular-nums; font-weight: 650; }
.gate-chip.ok   { border-color: var(--ok-line);   background: var(--ok-soft);   color: var(--ok); }
.gate-chip.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.gate-chip.bad  { border-color: var(--bad-line);  background: var(--bad-soft);  color: var(--bad); }
.fork-note {
  margin-top: 12px; font-size: 12px; color: var(--muted);
  padding-top: 12px; border-top: 1px dashed var(--line);
}
.check-row-wrap { display: grid; gap: 8px; }
.check-line {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-2);
}

/* --- схема обратной связи --- */
.flow {
  display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap;
  padding: 4px 0;
}
.flow-node {
  flex: 1 1 0; min-width: 150px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 13px 14px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.flow-node:hover { border-color: var(--accent-line); box-shadow: var(--sh-1); }
.flow-n {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.flow-t { margin-top: 6px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.flow-arrow {
  align-self: center; flex: 0 0 auto;
  width: 22px; text-align: center;
  color: var(--faint);
}

/* --- выгрузка --- */
.export-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 24px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-soft), var(--bg) 90%);
}
.export-ico {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  box-shadow: var(--sh-1);
}
.export-n {
  font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1;
}
.export-t { margin-top: 3px; font-size: 13px; color: var(--text-2); }

/* --- веса оценки --- */
.weights { display: grid; gap: 9px; }
.weight-row { display: grid; grid-template-columns: 152px 1fr 34px; gap: 12px; align-items: center; }
.weight-n { font-size: 12.5px; color: var(--text-2); }
.weight-v {
  font-size: 12px; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- ползунок уникальности --- */
.range-row { display: grid; grid-template-columns: 1fr 62px; gap: 14px; align-items: center; }
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--surface-3);
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: var(--sh-1);
  cursor: grab;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.04); }
.range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent); cursor: grab;
}
.range-out {
  font-size: 14px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* --- мелкие доборы --- */
.field.field-inline { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.seg.seg-sm button { padding: 5px 10px; font-size: 12px; }
.icon-btn.sm { width: 28px; height: 28px; border-radius: var(--r-xs); }
.icon-btn.sm.danger:hover { color: var(--bad); background: var(--bad-soft); }
.icon-btn.bordered { border: 1px solid var(--line); }
.selbar-n { font-size: 12.5px; font-weight: 600; color: var(--text); }
.selbar-sep { width: 1px; height: 18px; background: var(--line); }
.panel-body.flush { padding: 0; }
.drawer-body.flush { padding: 0; }
.grid { display: grid; gap: 16px; }
.grid.grid-sm { gap: 10px; }
.metric-v.ph { color: var(--faint); font-weight: 500; }
.tag.ph { color: var(--faint); border-style: dashed; }
.modal-ico.bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--text); font-weight: 600; }
.view-eyebrow i.dot,
.pill i.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; flex: 0 0 auto;
}
.pill.live i.dot { animation: pulseDot 1.5s var(--ease) infinite; }
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
.empty-act { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.brand-sub { font-size: 11px; color: var(--faint); margin-top: 1px; }
.topbar-spacer { flex: 1 1 auto; }
.topbar-tools { display: flex; align-items: center; gap: 6px; }
.view-head-body { min-width: 0; }
.iframe-shell .lights { display: flex; gap: 5px; }
.iframe-shell .lights i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-3); display: block;
}
.tr.is-clickable, tr.is-clickable { cursor: pointer; }
.grow { flex: 1 1 auto; }

@media (max-width: 1240px) {
  .gen-top { grid-template-columns: 132px minmax(0, 1fr); }
  .gen-side { grid-column: 1 / -1; padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--line-soft); grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   26. ДОПОЛНЕНИЯ: простые страницы (список проектов, настройки, 404)
   ============================================================ */

/* --- каркас страниц без левого рельса --- */
body.is-plain {
  background: var(--surface);
}
.plain-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar.plain-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-inline: 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
}
.plain-shell .canvas {
  flex: 1;
  padding: 34px 28px 64px;
  /* страница без рельсы едет целиком: canvas не должен быть скролл-контейнером,
     иначе overscroll-behavior:contain из блока 28 глотает колесо */
  min-height: 0;
  overflow: visible;
  overscroll-behavior: auto;
}
.plain-shell { min-height: 100vh; height: auto; }
.plain-shell .wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plain-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 2px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}

/* --- бренд --- */
.brand-name {
  display: block;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.2;
}

/* --- заголовок экрана --- */
.view-title {
  margin: 6px 0 0;
  font-size: 27px;
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.16;
  color: var(--text);
}

/* --- мелкий input --- */
.input.input-sm {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: var(--r-sm);
  min-width: 210px;
}

/* --- карточка проекта: иконка --- */
.pcard-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  flex: none;
}

/* --- скелетон-карточка и растяжка на всю сетку --- */
.sk.sk-card {
  height: 138px;
  border-radius: var(--r-lg);
}
.span-all {
  grid-column: 1 / -1;
}

/* --- настройки: контент и пункты меню --- */
.set-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.set-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 13.2px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.set-nav-item svg { opacity: .72; }
.set-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.set-nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 570;
}
.set-nav-item.is-active svg { opacity: 1; }

/* --- своя API-точка: иконка --- */
.ep-ico {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  flex: none;
}

/* --- служебные состояния --- */
.is-on {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.is-cur {
  background: var(--surface-2);
}
.is-error {
  border-color: var(--bad-line) !important;
  background: var(--bad-soft);
}
.btn.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.btn.btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 88%, #000);
}
.row-tools .btn.edit,
.icon-btn.edit {
  color: var(--accent);
}

/* --- 404 --- */
.nf {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px;
  background:
    radial-gradient(720px 380px at 50% 8%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.nf-code {
  font-size: 74px;
  font-weight: 680;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--accent);
}
.nf-title {
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -.02em;
  color: var(--text);
}
.nf-text {
  font-size: 14px;
  color: var(--muted);
  max-width: 420px;
}
.nf-act {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}


/* ==========================================================================
   27 · ДОПОЛНЕНИЯ К ЭКРАНУ ПРОЕКТА
   ========================================================================== */

body.is-app { overflow: hidden; }

/* гистограмма баллов — подписи */
.hist-n {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hist-l {
  margin-top: 2px;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

/* волны — внутренние элементы */
.wave-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.wave-s {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.wave-act {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* строка проверки — иконка статуса */
.check-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--ok);
}
.check-row.bad .check-ico { color: var(--bad); }

/* ошибка в таблице задач */
.td-err {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--bad);
}

/* предформатированный текст в панели справа */
.pre {
  margin: 10px 0 0;
  padding: 12px 13px;
  max-height: 320px;
  overflow: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* скелетон внутри панели справа */
.drawer-load { display: grid; gap: 10px; }

/* верхняя полоса: хлебные крошки всегда в одну строку */
.crumbs { flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.crumbs > span,
.crumbs > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.crumbs > span:first-child { color: var(--muted); }
.crumbs > b { color: var(--text); font-weight: 620; }

/* подписи в карточках выбора: плашка рядом с текстом */
.pick-need { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pick-title { display: block; }
.pick-desc { display: block; }


/* ==========================================================================
   28 · ПРОКРУТКА ЭКРАНА ПРОЕКТА (фикс)

   Было: body.is-app с overflow:hidden запретил прокрутку страницы,
   а своего скролл-контейнера ни у .app, ни у .canvas не было —
   колесо ничего не листало, а липкая thead цеплялась за высоту
   шапки и наезжала на содержимое выше.
   Стало: единственный скролл-контейнер — .canvas (его же дёргает go()),
   рельса и шапка стоят на месте.
   ========================================================================== */

body.is-app { height: 100vh; overflow: hidden; }

.app {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.rail {
  position: static;      /* sticky больше не нужен: страница целиком не едет */
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
.rail-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rail-foot { flex: 0 0 auto; }

.shell { height: 100vh; min-height: 0; }
.topbar { flex: 0 0 auto; }

.canvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Шапка таблицы липнет к верху своего скролла, а не к высоте topbar */
.tbl-scroll { overflow: auto; max-height: 70vh; }
.tbl thead th { top: 0; }

/* видимая полоса прокрутки */
.canvas::-webkit-scrollbar,
.rail-nav::-webkit-scrollbar,
.tbl-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.canvas::-webkit-scrollbar-thumb,
.rail-nav::-webkit-scrollbar-thumb,
.tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ==========================================================================
   29 · ЗАГРУЗЧИК ТАБЛИЦЫ (экран «Данные», источник CSV)
   ========================================================================== */

.up-drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 28px 18px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.up-drop:hover,
.up-drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.up-drop-t { font-size: 14px; font-weight: 620; color: var(--text); margin-bottom: 4px; }
.up-drop-s { font-size: 12.5px; color: var(--muted); }

.up-file { display: none; }

.up-row {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.up-row .field { margin-bottom: 0; }

.up-name { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.up-prev { margin-top: 4px; }

.up-prev-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.up-prev-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
}
.up-prev-tbl th,
.up-prev-tbl td {
  border: 1px solid var(--line-soft);
  padding: 6px 9px;
  text-align: left;
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-prev-tbl th {
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 650;
  position: sticky; top: 0;
}

/* ==========================================================================
   29. ДИЗАЙН-ОСНОВА: карточки тем и макетов
   ========================================================================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.theme-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 20, 40, .10);
}

.theme-card.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.theme-shot-wrap {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.theme-shot { display: block; width: 100%; height: auto; }

.theme-meta { display: flex; flex-direction: column; gap: 3px; }

.theme-n {
  font-weight: 650;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-on {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 1px 7px;
}

.theme-t { font-size: 12.5px; color: var(--muted); }
.theme-m { font-size: 11.5px; color: var(--faint); }

.pick.pick-slim {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.pick-slim .pick-card { padding: 12px; gap: 10px; }
.pick-slim .pick-title,
.pick-slim .pick-desc { display: block; }
.pick-slim .pick-desc { margin-top: 2px; font-size: 11.5px; color: var(--faint); }

@media (max-width: 700px) {
  .theme-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   30. «ВСЕ ЗНАЧЕНИЯ С СЕРВЕРА» — длинные тексты без наложений
   ========================================================================== */

.raw-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.raw-item {
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.raw-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.raw-k {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  word-break: break-all;
}

.raw-badge {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.raw-badge.ok { color: var(--accent); border-color: var(--accent-line); }

.raw-v {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.raw-empty { color: var(--faint); }

.raw-more summary {
  display: flex; align-items: baseline; gap: 8px;
  cursor: pointer;
  list-style: none;
}

.raw-more summary::-webkit-details-marker { display: none; }

.raw-peek {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raw-toggle {
  flex: none;
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
}

.raw-more[open] .raw-peek { display: none; }
.raw-more[open] .raw-toggle::after { content: " — свернуть"; color: var(--muted); }

.raw-pre {
  margin: 10px 0 0;
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.raw-filter { width: 190px; max-width: 44vw; }

@media (max-width: 700px) {
  .raw-filter { width: 100%; max-width: none; }
}

/* Промпты — большие моноширинные поля */
#strongPrompt, #cheapPrompt {
  min-height: 260px;
  max-height: 60vh;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

#s-prompts .field-label { display: flex; align-items: center; gap: 8px; }
#s-prompts .raw-badge { font-weight: 400; }

/* --------------------------------------------------------------------------
   ФИКСЫ СЛОЁВ И СКРЫТИЯ
   -------------------------------------------------------------------------- */

/* 1. Атрибут hidden проигрывал любому своему display из стилей:
   .btn/.seg/.pill задают inline-flex, и это перебивало display:none браузера.
   Оттуда одновременно видные «Запустить» и «Остановить» и вечно открытый
   селектор потоков при выключенном переключателе. */
[hidden] { display: none !important; }

/* 2. Затемнение внутри модалки лежало ПОВЕРХ самого окна:
   .scrim — позиционированный с z-index 60, а .modal — статичный блок,
   и любой позиционированный сосед рисуется выше него. Оттуда размытие
   поверх кнопок и перехват всех кликов в «Удалить страницу?». */
.modal-wrap > .scrim { z-index: 0; }
.modal-wrap > .modal { position: relative; z-index: 1; }

/* ==========================================================================
   СЛОЙ «ЖИВОЙ ИНТЕРФЕЙС» (FX)

   Включается атрибутом на <html>: data-fx="on". Выключается — data-fx="off".
   Источник истины — ключ ui_effects в настройках (БД), в браузере значение
   кэшируется в localStorage, чтобы слой применялся до первой отрисовки.

   Правила слоя:
     • только additive — ни одно базовое правило выше не переопределяется
       так, чтобы при выключении что-то осталось сломанным;
     • ничего, что влияет на раскладку: только цвет, тень, прозрачность
       и transform, то есть свойства, которые браузер считает на GPU;
     • ни одна анимация не мешает чтению и не крутится в пустую там,
       где пользователь работает с текстом;
     • при системной настройке «меньше движения» движение отключается,
       но статичная часть оформления остаётся.
   ========================================================================== */

:root {
  --fx-aurora-1: 39, 131, 222;
  --fx-aurora-2: 131, 96, 184;
  --fx-aurora-3: 63, 146, 104;
  --fx-aurora-alpha: .085;
  --fx-sheen: rgba(255, 255, 255, .28);
}

[data-theme="dark"] {
  --fx-aurora-alpha: .14;
  --fx-sheen: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   1. ЖИВОЙ ФОН

   Три размытых цветовых пятна на всё окно, очень медленно расходящиеся.
   Лежат под всем интерфейсом (z-index 0 при фоне -1), не перехватывают
   события и не создают прокрутки.
   -------------------------------------------------------------------------- */

[data-fx="on"] body.is-app::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(var(--fx-aurora-1), var(--fx-aurora-alpha)), transparent 62%),
    radial-gradient(32vmax 32vmax at 84% 22%, rgba(var(--fx-aurora-2), var(--fx-aurora-alpha)), transparent 64%),
    radial-gradient(34vmax 34vmax at 62% 88%, rgba(var(--fx-aurora-3), calc(var(--fx-aurora-alpha) * .72)), transparent 66%);
  filter: blur(18px);
  animation: fxAurora 44s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes fxAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* Полотно и рельс становятся полупрозрачными, чтобы фон был виден,
   но текст оставался на плотной подложке — читаемость важнее эффекта. */
[data-fx="on"] .rail {
  background: color-mix(in srgb, var(--rail) 88%, transparent);
  backdrop-filter: blur(10px);
}

[data-fx="on"] .topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
}

/* --------------------------------------------------------------------------
   2. ПАНЕЛИ — ГЛУБИНА И ОТКЛИК
   -------------------------------------------------------------------------- */

[data-fx="on"] .panel {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  transition:
    transform var(--t) var(--ease-out),
    box-shadow var(--t) var(--ease-out),
    border-color var(--t) var(--ease);
}

[data-fx="on"] .panel:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 10px 28px -14px rgba(var(--fx-aurora-1), .30);
}

/* Тонкая световая линия по верхней кромке панели. */
[data-fx="on"] .panel { position: relative; }

[data-fx="on"] .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--fx-sheen) 22%, var(--fx-sheen) 78%, transparent);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  pointer-events: none;
}

[data-fx="on"] .panel:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   3. ПОЯВЛЕНИЕ РАЗДЕЛА

   Панели всплывают каскадом. Задержки заданы только для первых восьми:
   дальше пользователь всё равно доскроллит, а ждать анимацию не должен.
   -------------------------------------------------------------------------- */

[data-fx="on"] .view.is-active > .panel,
[data-fx="on"] .view.is-active > div > .panel {
  animation: fxRise 460ms var(--ease-out) both;
}

[data-fx="on"] .view.is-active > .panel:nth-child(1),
[data-fx="on"] .view.is-active > div > .panel:nth-child(1) { animation-delay: 0ms; }
[data-fx="on"] .view.is-active > .panel:nth-child(2),
[data-fx="on"] .view.is-active > div > .panel:nth-child(2) { animation-delay: 45ms; }
[data-fx="on"] .view.is-active > .panel:nth-child(3),
[data-fx="on"] .view.is-active > div > .panel:nth-child(3) { animation-delay: 90ms; }
[data-fx="on"] .view.is-active > .panel:nth-child(4),
[data-fx="on"] .view.is-active > div > .panel:nth-child(4) { animation-delay: 130ms; }
[data-fx="on"] .view.is-active > .panel:nth-child(5),
[data-fx="on"] .view.is-active > div > .panel:nth-child(5) { animation-delay: 165ms; }
[data-fx="on"] .view.is-active > .panel:nth-child(n + 6),
[data-fx="on"] .view.is-active > div > .panel:nth-child(n + 6) { animation-delay: 195ms; }

@keyframes fxRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   4. КНОПКИ — БЛИК И СВЕЧЕНИЕ
   -------------------------------------------------------------------------- */

[data-fx="on"] .btn-primary,
[data-fx="on"] .btn-dark,
[data-fx="on"] .btn-ok {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-fx="on"] .btn-primary::before,
[data-fx="on"] .btn-dark::before,
[data-fx="on"] .btn-ok::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 18%, var(--fx-sheen) 50%, transparent 82%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
  pointer-events: none;
}

[data-fx="on"] .btn-primary:hover::before,
[data-fx="on"] .btn-dark:hover::before,
[data-fx="on"] .btn-ok:hover::before { transform: translateX(120%); }

/* Блик не должен крутиться под спиннером занятой кнопки. */
[data-fx="on"] .btn.is-busy::before { display: none; }

[data-fx="on"] .btn-primary:hover {
  box-shadow: 0 4px 18px -6px rgba(var(--fx-aurora-1), .55);
}

[data-fx="on"] .btn-ok:hover {
  box-shadow: 0 4px 18px -6px rgba(var(--fx-aurora-3), .55);
}

/* --------------------------------------------------------------------------
   5. НАВИГАЦИЯ
   -------------------------------------------------------------------------- */

[data-fx="on"] .nav-item {
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease-out);
}

[data-fx="on"] .nav-item:hover { transform: translateX(2px); }

[data-fx="on"] .nav-item.is-active {
  background: linear-gradient(
    90deg,
    rgba(var(--fx-aurora-1), .13),
    color-mix(in srgb, var(--surface-2) 70%, transparent) 72%
  );
}

[data-fx="on"] .nav-item.is-active::before {
  box-shadow: 0 0 10px rgba(var(--fx-aurora-1), .85);
}

/* --------------------------------------------------------------------------
   6. ЖИВЫЕ ИНДИКАТОРЫ

   Пульсирующая точка «идёт генерация» получает расходящееся кольцо:
   единственное место, где постоянное движение оправдано — оно показывает,
   что процесс не завис.
   -------------------------------------------------------------------------- */

[data-fx="on"] .nav-state.live,
[data-fx="on"] .proj-switch-dot.is-live { position: relative; }

[data-fx="on"] .nav-state.live::after,
[data-fx="on"] .proj-switch-dot.is-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 99px;
  border: 1px solid var(--accent);
  animation: fxRing 1.8s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes fxRing {
  from { opacity: .55; transform: scale(.7); }
  to   { opacity: 0;   transform: scale(2.1); }
}

/* --------------------------------------------------------------------------
   7. ЧИСЛА И МЕТРИКИ
   -------------------------------------------------------------------------- */

[data-fx="on"] .metric {
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

[data-fx="on"] .metric:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

[data-fx="on"] .metric-v {
  background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 62%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   8. ЗАГОЛОВОК РАЗДЕЛА
   -------------------------------------------------------------------------- */

[data-fx="on"] .view-eyebrow .dot {
  animation: fxBlink 2.6s var(--ease) infinite;
}

@keyframes fxBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* --------------------------------------------------------------------------
   9. ПОЛЯ ВВОДА
   -------------------------------------------------------------------------- */

[data-fx="on"] .input:focus,
[data-fx="on"] textarea:focus {
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 2px 14px -8px rgba(var(--fx-aurora-1), .6);
}

/* --------------------------------------------------------------------------
   10. УВАЖЕНИЕ К СИСТЕМНОЙ НАСТРОЙКЕ

   Пользователь попросил систему двигать интерфейс меньше — значит движение
   выключаем даже при включённом слое. Цвет, тени и прозрачность остаются:
   они никому не мешают.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-fx="on"] body.is-app::before,
  [data-fx="on"] .view.is-active > .panel,
  [data-fx="on"] .view.is-active > div > .panel,
  [data-fx="on"] .nav-state.live::after,
  [data-fx="on"] .proj-switch-dot.is-live::after,
  [data-fx="on"] .view-eyebrow .dot {
    animation: none;
  }
  [data-fx="on"] .panel:hover,
  [data-fx="on"] .nav-item:hover { transform: none; }
  [data-fx="on"] .btn-primary::before,
  [data-fx="on"] .btn-dark::before,
  [data-fx="on"] .btn-ok::before { display: none; }
}

/* --------------------------------------------------------------------------
   11. ПЕЧАТЬ — БЕЗ ЭФФЕКТОВ
   -------------------------------------------------------------------------- */

@media print {
  [data-fx="on"] body.is-app::before { display: none; }
  [data-fx="on"] .panel { backdrop-filter: none; background: #fff; }
}


/* ==========================================================================
   СКЛЕЕННЫЕ ЭКРАНЫ · шесть пунктов меню вместо одиннадцати
   Один экран показывает несколько секций (.view) стопкой, между ними
   рисуется разделитель, а заголовки второй и следующих секций мельче —
   чтобы читалось как один экран с разделами, а не как две страницы подряд.
   ========================================================================== */

.view.is-active + .view.is-active {
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.view.is-active + .view.is-active .view-head h1 { font-size: 23px; }

/* подпункты экрана в левой рельсе */
.nav-sub {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 3px 0 8px 0;
	padding-left: 30px;
}

.nav-jump {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 6px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-jump:hover { background: var(--surface-2); color: var(--text); }
.nav-jump.is-active { color: var(--text); font-weight: 560; }
.nav-jump.is-active::before {
	content: '';
	width: 3px;
	height: 12px;
	margin-left: -6px;
	margin-right: 3px;
	border-radius: 2px;
	background: var(--accent);
}


/* ===== UX cleanup 2026-09: linear project flow ===== */
.flow-steps{display:flex;align-items:center;gap:6px;margin:0 0 24px;padding:6px;background:var(--surface-2,#f0efed);border:1px solid var(--line,#e6e5e3);border-radius:10px;overflow-x:auto}
.flow-steps span{white-space:nowrap;padding:8px 12px;border-radius:7px;color:var(--muted,#7d7a75);font-size:12.5px;font-weight:600}
.flow-steps span.done{color:var(--text,#2c2c2b)}
.flow-steps span.active{background:var(--surface,#fff);color:var(--accent,#2783de);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ai-rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ai-rec{padding:20px;border:1px solid var(--line,#e6e5e3);border-radius:10px;background:var(--surface-2,#f9f8f7)}
.ai-rec-k{display:block;margin-bottom:7px;color:var(--muted,#7d7a75);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.ai-rec b{font-size:18px}.ai-rec p{margin:7px 0 0;color:var(--muted,#7d7a75);line-height:1.45}
.choice-details>summary{cursor:pointer;list-style:none}.choice-details>summary::-webkit-details-marker{display:none}.choice-details>summary small{display:block;margin-top:3px;color:var(--muted,#7d7a75);font-weight:400}.choice-details[open]>summary{border-bottom:1px solid var(--line,#e6e5e3)}
.quality-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.quality-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line,#e6e5e3);border-radius:10px;background:var(--surface,#fff)}.quality-card>div{min-width:0}.quality-card p{margin:5px 0 12px;color:var(--muted,#7d7a75);font-size:13px;line-height:1.45}.quality-num{min-width:54px;color:var(--accent,#2783de);font-size:26px;font-weight:750;line-height:1}.gate-thresholds{grid-template-columns:repeat(5,minmax(110px,1fr))}.gate-details>summary{cursor:pointer;color:var(--accent,#2783de);font-size:13px;font-weight:650}.nav-step{margin-left:auto;color:var(--muted,#7d7a75);font-size:11px}.empty.compact{padding:20px}
@media(max-width:980px){.quality-summary{grid-template-columns:1fr}.gate-thresholds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ai-rec-grid{grid-template-columns:1fr}.flow-steps{margin-left:-4px;margin-right:-4px}.flow-steps span{padding:8px 10px}.gate-thresholds{grid-template-columns:1fr}}

/* Mobile app shell: bottom scrollable navigation, readable content */
@media (max-width:760px){
  body.is-app{height:100dvh;overflow:hidden}
  .app{display:block;width:100%;height:100dvh;overflow:hidden}
  .rail{position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:68px;min-height:68px;border-right:0;border-top:1px solid var(--line);background:var(--rail);z-index:80}
  .rail-head,.rail-foot,.nav-group-title{display:none!important}
  .rail-nav{display:flex;align-items:stretch;gap:4px;padding:7px 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .rail-nav::-webkit-scrollbar{display:none}
  .nav-group{display:contents}
  .nav-item{flex:0 0 auto;min-width:92px;height:52px;padding:6px 9px;justify-content:center;gap:6px;border-radius:8px}
  .nav-item .nav-label{font-size:11.5px;white-space:nowrap;overflow:visible}
  .nav-item .nav-ico{width:18px}
  .nav-soon,.nav-count,.nav-step,.nav-state{display:none!important}
  .shell{width:100%;height:calc(100dvh - 68px);min-height:0}
  .topbar{height:56px;padding:0 14px;gap:8px}
  .proj-switch{max-width:190px}.crumbs{display:none}.topbar-tools{margin-left:auto}.topbar-tools .icon-btn:nth-child(2),.topbar-tools .icon-btn:nth-child(4){display:none}
  .canvas{padding:24px 16px 96px}
  .view-head{flex-direction:column;gap:14px}.view-actions{width:100%;padding-top:0}.view-actions .btn{width:100%;min-height:44px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .panel-head{align-items:flex-start;flex-wrap:wrap}.panel-tools{width:100%;overflow-x:auto}
  .quality-card{padding:16px}.quality-num{min-width:48px;font-size:24px}
}


/* ========================================================================== 
   UX/UI OVERHAUL v40 — calm, readable, consistent across project.html
   ========================================================================== */
body.is-app{font-size:15px;letter-spacing:0;color:var(--text);background:var(--surface)}
.canvas{padding:36px 36px 96px}.wrap{max-width:1180px}
.view-head{margin-bottom:28px;gap:24px}.view-head h1{font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.025em}.view-eyebrow{font-size:12px;letter-spacing:.07em;margin-bottom:10px}.view-sub{font-size:16px;line-height:1.6;max-width:68ch;margin-top:10px}
.panel{border-radius:12px;box-shadow:none}.panel+.panel{margin-top:20px}.panel-head{padding:18px 20px}.panel-title{font-size:16px;line-height:1.35}.panel-sub{font-size:14px;line-height:1.5;margin-top:5px}.panel-body{padding:20px}.panel-foot{padding:15px 20px}
.btn{min-height:38px;padding:0 16px;font-size:14px;border-radius:8px}.btn-sm{min-height:34px}.btn-lg{min-height:46px;padding:0 22px;font-size:15px}.icon-btn{min-width:38px;min-height:38px}.icon-btn.sm{min-width:34px;min-height:34px}
.input,.select,.textarea{font-size:15px;line-height:1.5;border-radius:8px}.input,.select{min-height:42px}.field-label{font-size:13px;margin-bottom:7px}.field-hint{font-size:13px;line-height:1.5;margin-top:7px}
.rail{background:var(--bg)}.rail-head{padding:18px}.rail-nav{padding:14px 10px}.nav-group-title{font-size:11px;margin:16px 10px 8px}.nav-item{min-height:42px;padding:0 11px;border-radius:8px}.nav-label{font-size:14px}.rail-foot{padding:14px}
.topbar{height:64px;padding:0 24px;background:var(--bg)}.proj-switch{height:42px;border-radius:9px}.crumbs{font-size:13px}
.grid{gap:20px}.metrics{gap:14px}.metric{padding:20px;border-radius:10px}.metric-k{font-size:13px}.metric-v{font-size:28px}.metric-note{font-size:13px;line-height:1.45}
.note{padding:16px 18px;border-radius:10px;font-size:14px;line-height:1.55}.stub{padding:18px;border-radius:10px}.stub-text,.muted{line-height:1.55}
.pick{gap:14px}.pick-card{padding:16px;border-radius:10px;min-height:92px}.pick-title{font-size:15px}.pick-desc{font-size:13.5px;line-height:1.45;margin-top:4px}.pick-need{font-size:12.5px;margin-top:8px}
.seg{border-radius:9px}.seg button{min-height:34px;padding:0 15px;font-size:13.5px;border-radius:7px}
.tbl{font-size:14px}.tbl th{font-size:12px;padding:12px 14px}.tbl td{padding:13px 14px;line-height:1.45}.tbl-scroll{border-radius:0 0 12px 12px}
.chat-log{padding:22px}.chat-compose{padding:16px}.msg-bubble{font-size:14px;line-height:1.55;border-radius:10px}
.gen-top{gap:28px}.gen-controls{gap:12px}.progress-head{font-size:15px}.progress-legend{font-size:13px}
.quality-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.quality-card{display:block;padding:20px;min-height:132px;background:var(--bg);border:1px solid var(--line);border-radius:12px}.quality-num{display:block;margin-bottom:12px;font-size:32px;line-height:1;color:var(--accent);font-weight:750}.quality-card b{font-size:15px;line-height:1.4}.quality-card .gate-checks{margin-top:14px}.gate-chip{font-size:12px;margin:3px 4px 3px 0}
.empty-state-card{display:flex;align-items:center;gap:16px;padding:22px;margin-bottom:20px;background:var(--bg);border:1px solid var(--line);border-radius:12px}.empty-state-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--muted);background:var(--surface-2);border-radius:10px}.empty-state-card b{font-size:16px}.empty-state-card p{margin:5px 0 0;color:var(--muted);font-size:14px}
.gate-thresholds{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px}.gate-disclosure{margin-top:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.gate-disclosure-btn{width:100%;min-height:64px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:var(--bg);color:var(--text);text-align:left;cursor:pointer}.gate-disclosure-btn:hover{background:var(--surface-2)}.gate-disclosure-btn b{display:block;font-size:14px}.gate-disclosure-btn small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}.gate-disclosure-action{color:var(--accent);font-size:13px;font-weight:650}.gate-disclosure-btn:focus-visible{outline:3px solid var(--accent-soft);outline-offset:-3px}#gateChecksWrap{padding:0 16px 16px;border-top:1px solid var(--line)}
.fork{gap:14px}.fork-card{padding:20px;border-radius:12px}.fork-range{font-size:13px}.fork-name{font-size:15px}.fork-count{font-size:30px}.fork-note{font-size:13px;line-height:1.45}
.ai-rec{padding:20px;border-radius:10px}.ai-rec-k{font-size:12px}.ai-rec b{font-size:19px}.ai-rec p{font-size:14px;line-height:1.5}
.flow-steps{display:none!important}
@media(max-width:1100px){.quality-summary{grid-template-columns:1fr}.gate-thresholds{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas{padding-left:24px;padding-right:24px}}
@media(max-width:760px){.canvas{padding:22px 16px 96px}.view-head{margin-bottom:22px}.view-head h1{font-size:28px}.view-sub{font-size:15px}.panel-head,.panel-body{padding:16px}.quality-card{min-height:0}.gate-thresholds{grid-template-columns:1fr}.topbar{padding:0 14px}.btn,.icon-btn{min-height:44px}.tbl-scroll{max-height:62vh}.fork{grid-template-columns:1fr}.gate-disclosure-btn{min-height:72px}}


/* Дополнения к страницам -------------------------------------------------- */
.site-options-panel .panel-body{padding-top:18px}
.site-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.site-option{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.site-option:hover{border-color:var(--line-strong)}
.site-option.is-on{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));box-shadow:0 0 0 3px var(--accent-soft)}
.site-option-toggle{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;user-select:none}
.site-option-toggle input{position:absolute;opacity:0;pointer-events:none}
.site-check{display:grid;place-items:center;width:23px;height:23px;border:1.5px solid var(--line-strong);border-radius:7px;color:transparent;background:var(--surface-2);font-size:14px;font-weight:800;flex:none;transition:.16s var(--ease)}
.site-option-toggle input:checked + .site-check{background:var(--accent);border-color:var(--accent);color:white}
.site-option-toggle input:focus-visible + .site-check{box-shadow:0 0 0 3px var(--accent-soft)}
.site-option-toggle>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.site-option-toggle b{font-size:14px;line-height:1.25}
.site-option-toggle small{font-size:12.5px;line-height:1.35;color:var(--muted)}
.site-option-fields{padding:0 16px 17px;border-top:1px solid var(--line);background:var(--surface-2)}
.site-option-fields[hidden]{display:none}
.site-option-fields>.field,.site-option-fields>.form-grid{margin-top:15px}
.site-option-fields .textarea{min-height:112px}
.site-options-save{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:860px){.site-options-grid{grid-template-columns:1fr}}
@media(max-width:600px){.site-option-toggle{padding:14px}.site-option-fields{padding:0 14px 15px}.site-option-fields .form-grid{grid-template-columns:1fr}.site-option-fields .form-grid .full{grid-column:auto}.site-options-save{align-items:stretch;flex-direction:column}.site-options-save .btn{justify-content:center}}


/* === Изображения проекта v42 === */
.media-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.media-form-grid .full{grid-column:1/-1}
.media-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.media-source-card{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.media-source-card>div{display:flex;flex-direction:column;gap:3px}.media-source-card small{color:var(--muted);line-height:1.4}
.media-source-card .btn{justify-self:start}.media-note{margin:16px 0;color:var(--muted);font-size:12.5px}
.media-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:16px}
.media-asset{display:grid;grid-template-columns:88px minmax(0,1fr) 34px;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.media-asset>img{width:88px;height:68px;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.media-asset-body{min-width:0;display:flex;flex-direction:column;gap:3px}.media-asset-body b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}.media-asset-body span,.media-asset-body small{color:var(--muted);font-size:12px;line-height:1.35}.media-empty{grid-column:1/-1;padding:20px 0}
@media(max-width:860px){.media-assets,.media-source-grid{grid-template-columns:1fr}}
@media(max-width:600px){.media-form-grid{grid-template-columns:1fr}.media-form-grid .full{grid-column:auto}.media-asset{grid-template-columns:72px minmax(0,1fr) 34px}.media-asset>img{width:72px;height:58px}.media-source-card .btn{justify-self:stretch;justify-content:center}}

/* ==========================================================================
   РЕЗУЛЬТАТЫ В ПОИСКЕ  (сайт целиком и срез проекта)
   ========================================================================== */

/* Секции в правой панели: «Адрес», «Динамика», «Запросы». */
.drawer-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer-sec:last-child { border-bottom: 0; }
.drawer-k {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 7px;
}
.drawer-sec .tbl { margin-top: 4px; }

/* Строка таблицы, которая открывает карточку. */
tr.row-click { cursor: pointer; }
tr.row-click:hover > td { background: var(--surface-2); }

/* Полоса рабочих списков: та же сегментная кнопка, но переносится. */
.chipbar { display: flex; flex-wrap: wrap; gap: 6px; }
.chipbar button {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.3;
}
.chipbar button:hover { color: var(--text); border-color: var(--line-strong, var(--line)); }
.chipbar button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chipbar button.is-on .muted { color: rgba(255, 255, 255, .78); }

/* Карточки рекомендаций. */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.fb-card { border: 1px solid var(--line); border-radius: var(--r-2, 12px); padding: 15px; background: var(--surface); }
.fb-card h4 { margin: 0 0 4px; font-size: 14.5px; }
.fb-card .fb-n { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.fb-card .fb-note { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 6px 0 12px; }

/* Карточка сайта на главной. */
.scard { display: block; border: 1px solid var(--line); border-radius: var(--r-2, 12px);
  padding: 15px; background: var(--surface); text-decoration: none; color: inherit; }
.scard:hover { border-color: var(--accent); }
.scard-name { font-weight: 600; letter-spacing: -.015em; }
.scard-domain { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.scard-foot { display: flex; gap: 10px; align-items: center; color: var(--muted);
  font-size: 12px; margin-top: 12px; }

/* Группа проектов внутри сайта на главной. */
.pgroup { margin-bottom: 22px; }
.pgroup:last-child { margin-bottom: 0; }
.group-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 2px 10px; font-size: 13px;
}
.group-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; letter-spacing: -.015em; font-size: 14.5px;
  color: var(--text); text-decoration: none;
}
.group-name:hover { color: var(--accent); }
.group-head .grow { flex: 1; }

/* ==========================================================================
   ЭКРАН САЙТА · поисковая отдача Яндекса

   Прежняя версия была набором одинаковых серых панелей: главное не
   выделялось, а служебное занимало полэкрана. Здесь три правила:
   1) состав поиска — единственная крупная цифра на экране;
   2) предупреждения живут одной строкой, а не блоком в четверть окна;
   3) настройка уехала в свою вкладку и не мозолит глаза каждый день.
   ========================================================================== */

/* --- шапка экрана ------------------------------------------------------- */

.hero {
  display: flex; align-items: flex-end; gap: 20px;
  padding: 26px 0 20px;
}
.hero-body { min-width: 0; flex: 1; }
.hero-title {
  margin: 0; font-size: 30px; line-height: 1.15; font-weight: 640;
  letter-spacing: -.02em;
}
.hero-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.statline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 9px; font-size: 12.5px; color: var(--muted);
}
.statline .mono { color: var(--text-2); }
.statline-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.statline .ok-text,
.statline .bad-text { display: inline-flex; align-items: center; gap: 5px; }
.ok-text  { color: var(--ok); }
.bad-text { color: var(--bad); }

/* --- предупреждения одной строкой --------------------------------------- */

.alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.alert {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; line-height: 1.45;
}
.alert-ico { flex: none; display: inline-flex; color: var(--muted); }
.alert-text { min-width: 0; flex: 1; }
.alert-text b { font-weight: 600; }
.alert .link-btn { flex: none; }
.alert.info { background: var(--accent-soft); border-color: var(--accent-line); }
.alert.info .alert-ico { color: var(--accent); }
.alert.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.alert.warn .alert-ico { color: var(--warn); }
.alert.bad  { background: var(--bad-soft);  border-color: var(--bad-line); }
.alert.bad  .alert-ico { color: var(--bad); }

/* --- плитки с цифрами --------------------------------------------------- */

.kpis {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
}
.kpi {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); padding: 16px 18px; min-height: 96px;
}
.kpi-k {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kpi-v {
  margin-top: 7px; font-size: 26px; font-weight: 640; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.kpi-of { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi-share {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ok);
  background: var(--ok-soft); border: 1px solid var(--ok-line);
  border-radius: 999px; padding: 1px 9px; letter-spacing: 0;
}
.kpi-note { font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.45; }
.kpi.is-bad .kpi-v { color: var(--bad); }
.kpi.is-skel { background: var(--surface-2); border-color: var(--line-soft); }

.kpi-hero { background: var(--surface); }
.kpi-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 9px; font-size: 11.5px; color: var(--muted);
}
.kpi-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sw.ok { background: var(--ok); }
.sw.bad { background: var(--bad); }
.sw.mute { background: var(--line-strong); }

/* полоса состава поиска */
.bar {
  display: flex; height: 8px; margin-top: 12px; border-radius: 999px;
  overflow: hidden; background: var(--surface-3);
}
.bar-seg { display: block; height: 100%; }
.bar-seg.ok { background: var(--ok); }
.bar-seg.bad { background: var(--bad); }
.bar-seg.mute { background: var(--line-strong); }

/* тонкая полоска внутри таблиц и карточек */
.minibar {
  height: 6px; border-radius: 999px; background: var(--surface-3);
  overflow: hidden; max-width: 150px;
}
.minibar > span { display: block; height: 100%; background: var(--ok); }

/* --- вкладки ------------------------------------------------------------ */

.seg.tabs { margin: 4px 0 16px; flex-wrap: wrap; }

/* --- таблицы страниц ---------------------------------------------------- */

.cell-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
}
.trend { font-size: 11.5px; font-weight: 600; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--bad); }
.chip-n { opacity: .65; font-variant-numeric: tabular-nums; }

/* --- причины исключения ------------------------------------------------- */

.reasons { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.reason {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--bg); padding: 14px 16px;
}
.reason.is-quality { border-left-color: var(--bad); background: var(--bad-soft); }
.reason.is-dup { border-left-color: var(--warn); background: var(--warn-soft); }
.reason-top { display: flex; align-items: baseline; gap: 10px; }
.reason-label { font-size: 14.5px; font-weight: 640; flex: 1; }
.reason-n { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.reason-text { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.55; }
.reason-fix {
  font-size: 12.5px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line-strong); color: var(--text);
}
.reason .link-btn { margin-top: 10px; }

/* --- вердикт в карточке страницы ---------------------------------------- */

.verdict {
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; line-height: 1.55;
  border: 1px solid var(--line); background: var(--surface);
}
.verdict.ok  { background: var(--ok-soft);  border-color: var(--ok-line);  color: var(--ok); font-weight: 600; }
.verdict.bad { background: var(--bad-soft); border-color: var(--bad-line); }
.verdict.bad b { color: var(--bad); }
.verdict.mute { color: var(--muted); }
.verdict-fix { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bad-line); color: var(--text); }

/* --- лента событий ------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.timeline li {
  position: relative; padding: 5px 0 5px 16px; color: var(--text-2);
  border-left: 2px solid var(--line);
}
.timeline li::before {
  content: ''; position: absolute; left: -5px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);
}
.timeline li.in::before  { background: var(--ok); }
.timeline li.out::before { background: var(--bad); }
.timeline li b { color: var(--text); font-weight: 600; margin-right: 6px; }

/* --- карточки рекомендаций ---------------------------------------------- */

.fb-card.is-bad     { border-left: 3px solid var(--bad); }
.fb-card.is-warn    { border-left: 3px solid var(--warn); }
.fb-card.is-ok      { border-left: 3px solid var(--ok); }
.fb-card.is-neutral { border-left: 3px solid var(--line-strong); }
.fb-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ATELIER v2 — слой переоформления (2026-09)

   Правило слоя: он ТОЛЬКО переопределяет внешний вид уже существующих
   классов. Ни одного нового требования к разметке, ни одного id, ни одного
   data-атрибута. Поэтому app.js и инлайн-скрипты страниц продолжают
   работать без изменений.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОКЕНЫ · спокойнее, глубже, больше воздуха
   -------------------------------------------------------------------------- */

:root {
  --rail-w: 244px;
  --topbar-h: 54px;
  --content-max: 1120px;

  /* движение: чуть короче и мягче, чтобы интерфейс казался отзывчивым */
  --t-fast: 110ms;
  --t: 170ms;
  --t-slow: 260ms;
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1);
}

[data-theme="dark"] {
  --bg:            #171717;
  --surface:       #1e1e1e;
  --surface-2:     #252524;
  --surface-3:     #303030;
  --rail:          #141414;

  --line:          rgba(255, 255, 255, .10);
  --line-soft:     rgba(255, 255, 255, .06);
  --line-strong:   rgba(255, 255, 255, .20);
}

/* --------------------------------------------------------------------------
   2. РЕЛЬС · четыре шага вместо одиннадцати дверей
   -------------------------------------------------------------------------- */

.rail {
  background: var(--rail);
  border-right: 1px solid var(--line-soft);
}

.rail-head { padding: 16px 16px 12px; }

.brand-mark {
  transition: transform var(--t) var(--ease-spring),
              box-shadow var(--t) var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); }

.rail-nav { padding: 6px 10px 20px; }

.nav-group + .nav-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.nav-group-title {
  padding: 0 10px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav-item {
  position: relative;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-2); transform: translateX(1px); }
.nav-item:active { transform: translateX(1px) scale(.985); }

.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  animation: railMark var(--t) var(--ease-out);
}
@keyframes railMark {
  from { height: 4px; margin-top: -2px; opacity: 0; }
  to   { height: 18px; margin-top: -9px; opacity: 1; }
}

/* Вложенные пункты: подшаги внутри группы отбиваются направляющей */
.nav-group .nav-sub {
  margin-left: 13px;
  padding-left: 11px;
  border-left: 1px solid var(--line);
}
.nav-group .nav-sub .nav-item { height: 31px; font-size: 13px; }
.nav-group .nav-sub .nav-item.is-active::before { display: none; }
.nav-group .nav-sub .nav-item .nav-ico { opacity: .75; }

/* Номер шага — тихий круг слева */
.nav-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-step { background: var(--accent); color: #fff; }

.nav-count {
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease);
}

/* «блок 6/7/8» больше не кричит */
.nav-soon {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--faint);
  background: transparent;
  border: 0;
  padding: 0;
}

.nav-state.live { animation: pulse 1.6s var(--ease) infinite; }

.rail-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line-soft);
}
.rail-status { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------------
   3. ВЕРХНЯЯ ПОЛОСА
   -------------------------------------------------------------------------- */

.topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.proj-switch {
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.proj-switch:hover { background: var(--surface-2); }
.proj-switch:active { transform: scale(.99); }

.crumbs { color: var(--faint); font-size: 12.5px; }
.crumbs b { color: var(--text-2); font-weight: 600; }

.icon-btn {
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.94); }

/* --------------------------------------------------------------------------
   4. ПОЛОТНО И ШАПКИ ЭКРАНОВ · больше воздуха
   -------------------------------------------------------------------------- */

.canvas { padding: 36px 32px 96px; }

.view.is-active { animation: viewIn 300ms var(--ease-out); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.view-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-end;
}

.view-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.view h1, .view-title { font-size: 27px; letter-spacing: -.022em; }
.view-sub { font-size: 13.5px; line-height: 1.6; max-width: 68ch; }

/* --------------------------------------------------------------------------
   5. КНОПКИ · лёгкое нажатие и подъём
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--r-sm);
  font-weight: 550;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              transform 90ms var(--ease-spring);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.975); }

.btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.btn-primary:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14),
              0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}

.btn-lg { height: 42px; border-radius: var(--r-md); }

.link-btn { transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease); }

/* --------------------------------------------------------------------------
   6. ПОВЕРХНОСТИ · карточки, панели, таблицы
   -------------------------------------------------------------------------- */

.card, .panel, .box, .tile {
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}

.card:hover, .tile:hover { border-color: var(--line-strong); }

/* строки-карточки проектов и страниц — приподнимаются под курсором */
.proj-row, .proj-card, .page-row, .row-card, .site-card {
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t) var(--ease-spring),
              box-shadow var(--t) var(--ease);
}
.proj-row:hover, .proj-card:hover, .page-row:hover,
.row-card:hover, .site-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}
.proj-row:active, .proj-card:active, .site-card:active { transform: translateY(-1px) scale(.995); }

table tbody tr { transition: background var(--t-fast) var(--ease); }

th {
  font-size: 11px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

td, th { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. МЕЛОЧИ · чипы, пилюли, поля, прогресс
   -------------------------------------------------------------------------- */

.chip, .filter-chip {
  border-radius: 99px;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform 90ms var(--ease-spring);
}
.chip:hover, .filter-chip:hover { transform: translateY(-1px); }
.chip:active, .filter-chip:active { transform: scale(.96); }

.pill { border-radius: 99px; font-weight: 600; letter-spacing: -.005em; }
.pill .dot { animation: none; }
.pill.ok .dot, .pill.live .dot { animation: pulse 1.8s var(--ease) infinite; }

.input, .select, textarea, input[type="text"], input[type="search"], input[type="number"] {
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.input:focus, .select:focus, textarea:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* прогресс генерации — живая полоса */
.progress, .bar, .progress-track {
  border-radius: 99px;
  overflow: hidden;
}
.progress > *, .bar > *, .progress-fill {
  transition: width var(--t-slow) var(--ease-out);
}

/* тосты и модальные — мягкое появление */
.toast { animation: toastIn 240ms var(--ease-spring); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.modal, .sheet, .pop, .cmdk-box { animation: popIn 200ms var(--ease-out); }
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.cmdk-item { transition: background var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.cmdk-item:hover, .cmdk-item.is-cur { padding-left: 14px; }

/* фокус — заметный, но не грубый */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .nav-item:hover, .btn:hover, .icon-btn:hover,
  .proj-row:hover, .proj-card:hover, .page-row:hover,
  .row-card:hover, .site-card:hover, .chip:hover, .filter-chip:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   8. ДОВОДКА ПОСЛЕ ВИЗУАЛЬНОЙ ПРОВЕРКИ
   -------------------------------------------------------------------------- */

/* верхняя полоса проекта: переключатель не должен съедать хлебные крошки */
.topbar .proj-switch {
  flex: 0 1 auto;
  max-width: 270px;
  min-width: 0;
}
.topbar .crumbs {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .crumbs b, .topbar .crumbs a, .topbar .crumbs span { overflow: visible; }

/* нижняя панель сохранения — плотный фон, чтобы не просвечивали поля */
.savebar, .sticky-save, .set2-save, .save-dock {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 99px;
  box-shadow: var(--sh-pop) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* пункты навигации в настройках — такая же реакция, как в рельсе */
.set2-item {
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.set2-item:hover { transform: translateX(1px); }
.set2-item:active { transform: translateX(1px) scale(.985); }

/* карточки разделов настроек — больше воздуха между блоками */
.set2-sec + .set2-sec { margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  .set2-item:hover, .set2-item:active { transform: none !important; }
}

/* плавающая панель сохранения в настройках */
.set2-bar {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 99px !important;
  box-shadow: var(--sh-pop) !important;
  padding: 8px 10px 8px 18px !important;
  gap: 14px !important;
  transition: transform var(--t) var(--ease-spring), opacity var(--t) var(--ease);
}
.set2-bar.is-clean { opacity: .9; }
.set2-bar:hover { transform: translateX(-50%) translateY(-1px); }
.set2-bar-text { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .set2-bar:hover { transform: translateX(-50%) !important; }
}


/* ============================================================
   Сворачиваемые панели · дропзона · документы
   ============================================================ */

.panel-switch {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
}
.panel-switch b { font-weight: 600; font-size: 13px; }

.panel-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s var(--ease, ease);
}
.panel-collapse-inner { overflow: hidden; min-height: 0; }
.panel.is-collapsed .panel-collapse { grid-template-rows: 0fr; }
.panel.is-collapsed .panel-head { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .panel-collapse { transition: none; }
}

/* Зона перетаскивания — в стиле GitHub */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  border: 1.5px dashed var(--line, #d8dee4);
  border-radius: 12px;
  background: var(--surface-2, #fafbfc);
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.dropzone:hover { border-color: var(--accent, #3b82f6); background: var(--surface-3, #f4f6f8); }
.dropzone:active { transform: scale(.995); }
.dropzone:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.dropzone.is-over {
  border-color: var(--accent, #3b82f6);
  border-style: solid;
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent);
}
.dropzone-ico { color: var(--muted); display: flex; }
.dropzone-title { font-size: 13.5px; font-weight: 600; }
.dropzone-title u { text-decoration-thickness: 1px; text-underline-offset: 2px; color: var(--accent, #3b82f6); }
.dropzone-hint { font-size: 12px; color: var(--muted); }
.dropzone input[type="file"] { display: none; }

/* Список выбранных, но ещё не загруженных файлов */
.dropfiles { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dropfiles:empty { display: none; }
.dropfile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 9px;
  background: var(--surface, #fff);
  font-size: 12.5px;
  animation: dropIn .18s ease;
}
.dropfile b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropfile span { color: var(--muted); margin-left: auto; white-space: nowrap; }
.dropfile.is-bad { border-color: var(--bad, #e5484d); color: var(--bad, #e5484d); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* Карточки загруженных документов */
.doc-assets { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.doc-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.doc-ext {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-2, #f3f5f7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-asset-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.doc-asset-body b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-asset-body span { font-size: 12px; color: var(--muted); }
.doc-asset-body small { font-size: 11.5px; color: var(--muted); }
.doc-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 600px) {
  .dropzone { padding: 16px 12px; }
  .doc-asset { flex-wrap: wrap; }
}

/* ==========================================================================
   ПЕРЕЛИНКОВКА — мелкие элементы экрана «Перелинковка»
   Ничего из существующего не переопределяется: только новые классы.
   ========================================================================== */

.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn.btn-xs {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 7px;
}

.row.gap { gap: 8px; }

.hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #8a8f98);
}

.code-box {
  padding: 9px 11px;
  border: 1px solid var(--line, #2a2d33);
  border-radius: 9px;
  background: var(--bg-soft, rgba(127, 127, 127, .07));
  overflow-x: auto;
}

.code-box code {
  font-size: 12px;
  white-space: pre;
}

.pill.neutral {
  background: rgba(127, 127, 127, .14);
  color: var(--muted, #8a8f98);
  border-color: transparent;
}

/* Адреса бывают длинными — переносим их, а не рвём сетку. */
#lkPagesList .check-name code,
#lkTokens .check-name code {
  font-size: 11.5px;
  word-break: break-all;
  color: var(--muted, #8a8f98);
}

#lkPagesList .check-row,
#lkTokens .check-row,
#lkRuns .check-row {
  align-items: flex-start;
  gap: 12px;
}

#lkTokenFresh code {
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  word-break: break-all;
}


/* ==========================================================================
   КАРКАС · ЧАТ НА ВЕСЬ ЭКРАН
   ========================================================================== */

/* на экране каркаса контент занимает всю ширину рабочей области */
.wrap:has(#view-frame.is-active) { max-width: none; }

/* и всю высоту экрана минус шапка/кнопки */
#view-frame .chat { height: calc(100vh - 330px); min-height: 460px; }
#view-frame .msg { max-width: min(92%, 1100px); }
#view-frame .chat-log { padding: 22px 26px; }
#view-frame .view-head { margin-bottom: 14px; }

.frame-chat-hint { font-size: 12.5px; margin-left: 4px; }

/* режим «на весь экран» */
.frame-chat-panel.is-full {
  position: fixed; inset: 12px; z-index: 900;
  display: flex; flex-direction: column;
  margin: 0 !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  animation: chatFullIn 260ms var(--ease-out, ease-out);
}
.frame-chat-panel.is-full .panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.frame-chat-panel.is-full .chat { flex: 1; height: auto; min-height: 0; }
.frame-chat-panel.is-full .msg { max-width: min(88%, 1300px); }
body.chat-full-open::after {
  content: ""; position: fixed; inset: 0; z-index: 899;
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
  animation: fadeIn 200ms ease forwards; opacity: 0;
}
@keyframes chatFullIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* кнопка «Взять этот каркас» под ответом */
.msg-take { margin-left: auto; white-space: nowrap; }

/* ==========================================================================
   АНИМАЦИИ
   ========================================================================== */

/* «Модель пишет ответ…» — переливающиеся точки + блик по тексту */
.msg.is-pending .msg-bubble { display: inline-flex; align-items: center; gap: 10px; }
.msg.is-pending .msg-av { animation: avPulse 1.6s ease-in-out infinite; }
.typing { gap: 5px; height: 18px; }
.typing i {
  width: 7px; height: 7px; border-radius: 99px;
  background: linear-gradient(135deg, #7c9cff, #b57cff, #4fd1c5);
  background-size: 300% 300%;
  animation: typingWave 1.2s ease-in-out infinite, typingHue 2.4s linear infinite !important;
}
.typing i:nth-child(2) { animation-delay: .15s, .3s !important; }
.typing i:nth-child(3) { animation-delay: .3s, .6s !important; }
@keyframes typingWave {
  0%, 70%, 100% { transform: translateY(0) scale(.8); opacity: .35; }
  35%           { transform: translateY(-5px) scale(1.15); opacity: 1; }
}
@keyframes typingHue { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.typing-text {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--text) 50%, var(--muted) 65%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: textShine 1.8s linear infinite;
}
@keyframes textShine { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes avPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,156,255,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(124,156,255,0); }
}

/* иконки «обновить» крутятся, пока идёт загрузка */
.is-spin { pointer-events: none; }
.is-spin svg { animation: spinEase .8s cubic-bezier(.5,.1,.5,.9) infinite; transform-origin: 50% 50%; }
.is-spin.icon-btn { color: var(--accent); background: var(--surface-2); }
@keyframes spinEase { to { transform: rotate(360deg); } }

/* спиннер занятой кнопки — дуга с хвостом, а не ровное кольцо */
.btn.is-busy::after {
  border-top-color: currentColor !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  animation: spinArc .9s cubic-bezier(.55,.15,.45,.85) infinite !important;
}
.spinner {
  border-right-color: var(--accent) !important;
  animation: spinArc .9s cubic-bezier(.55,.15,.45,.85) infinite !important;
}
@keyframes spinArc {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* кнопка отработала — короткий «щелчок» */
.btn.is-done { animation: btnDone 420ms var(--ease-out, ease-out); }
@keyframes btnDone {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,197,.5); }
  100% { box-shadow: 0 0 0 8px rgba(79,209,197,0); }
}

/* волна от нажатия — на любой кнопке */
.fx-ripple-box {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.fx-ripple {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: .22;
  transform: scale(0);
  animation: ripple 600ms cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
}
.btn-primary .fx-ripple, .btn-ok .fx-ripple, .btn-dark .fx-ripple { background: #fff; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* полоска загрузки вверху экрана — пока идут запросы */
.net-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000;
  pointer-events: none; opacity: 0; transition: opacity 250ms ease;
  overflow: hidden;
}
.net-bar.is-on { opacity: 1; }
.net-bar i {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, #7c9cff, #b57cff, #4fd1c5, transparent);
  animation: netSlide 1.1s cubic-bezier(.45,.05,.55,.95) infinite;
}
.net-bar.is-done i { left: 0; width: 100%; animation: none; transition: width 300ms ease; }
@keyframes netSlide { from { left: -40%; } to { left: 100%; } }

/* иконки и кнопки — живее при наведении */
.icon-btn svg { transition: transform 220ms var(--ease-out, ease-out); }
.icon-btn:hover svg { transform: scale(1.1); }
.icon-btn[data-ico="refresh"]:hover svg { transform: rotate(60deg); }


/* Тип страницы, который текущие данные не выдерживают. Не прячем:
   владелец должен видеть, что тип есть и чего для него не хватает. */
.pick-card.is-dim { opacity: .55; }
.pick-card.is-dim .pick-title { text-decoration: line-through; }