:root {
  --bg: #eaf0fb;
  --bg2: #f5f8fd;
  --panel: #ffffff;
  --panel2: #eef3fb;
  --line: rgba(30, 41, 70, .09);
  --line2: rgba(30, 41, 70, .15);
  --text: #1d2734;
  --muted: #586477;
  --muted2: #8a95a8;
  --mint: #14b8a6;
  --blue: #3b82f6;
  --violet: #7c5cff;
  --indigo: #6366f1;
  --pink: #d946a8;
  --amber: #e08a1e;
  --rose: #ef5f54;
  --green: #1fa856;
  --red: #e23d32;
  --accent: #14b8a6;
  --shadow: 0 6px 22px rgba(30, 41, 70, .07), 0 1px 3px rgba(30, 41, 70, .05);
  --r: 8px;
  --r2: 11px;
  --sidebar-w: 248px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* Воздушный пастельный фон фабрики (как на витринных стендах) */
body {
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(1000px 560px at 95% 0%, rgba(20,184,166,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(217,70,168,.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  background: linear-gradient(180deg, #f1f4f9 0%, #e8edf4 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::placeholder { color: var(--muted2); }
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(30,41,70,.20);
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, var(--bg2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  cursor: pointer;
  vertical-align: -2px;
}
input[type="checkbox"]:checked {
  border-color: rgba(20,184,166,.62);
  background: var(--mint);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(59,130,246,.28);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--bg2);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 14px;
  padding: 4px 8px 12px;
}
.sb-logo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mint), var(--blue) 60%, var(--violet));
  color: #ffffff;
  font-weight: 900;
  flex: 0 0 auto;
}

.sb-new {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--mint), var(--blue));
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--r);
  padding: 9px 12px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: filter .15s ease;
}
.sb-new:hover { filter: brightness(1.07); }

.sb-section {
  color: var(--muted2);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 10px 8px 5px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.sb-item:hover { background: rgba(15,23,42,.04); color: var(--text); }
.sb-item.active { background: rgba(15,23,42,.06); color: var(--text); border-color: var(--line2); }
.sb-item .sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  background: rgba(15,23,42,.05);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.sb-item.active .sb-count { color: var(--text); }
.sb-count-static {
  flex: 0 0 auto;
  color: var(--muted);
  background: rgba(15,23,42,.045);
}
.sb-task-counts {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.sb-task-chip {
  min-width: 24px;
  padding: 1px 5px;
  border: 1px solid rgba(15,181,164,.18);
  border-radius: 999px;
  background: rgba(15,181,164,.075);
  color: #0b7d70;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}
.sb-task-progress {
  border-color: rgba(59,130,246,.18);
  background: rgba(59,130,246,.08);
  color: #2563eb;
}

.sb-project-tree { display: flex; flex-direction: column; gap: 3px; }
.sb-project-node { display: flex; flex-direction: column; gap: 2px; }
.sb-project-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
}
.sb-project-row:hover { background: rgba(15,23,42,.04); color: var(--text); }
.sb-project-row.active { background: rgba(15,23,42,.06); color: var(--text); border-color: var(--line2); }
.sb-project-row .ws-color { width: 9px; height: 9px; border-radius: 999px; background: var(--ws-color, var(--blue)); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.sb-project-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-project-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sb-project-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted2); font-size: 11px; font-weight: 600; }
.sb-project-count {
  min-width: 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  background: rgba(15,23,42,.05);
  border-radius: 999px;
  padding: 1px 7px;
}
.sb-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 5px 18px;
  padding-left: 9px;
  border-left: 1px solid var(--line);
}
.sb-child {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
}
.sb-child:hover { background: rgba(15,23,42,.04); color: var(--text); }
.sb-child.active { background: rgba(15,181,164,.08); color: #0b7d70; border-color: rgba(15,181,164,.18); }
.sb-item .sb-ic,
.sb-child .sb-ic {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0b7d70;
  background: linear-gradient(135deg, rgba(20,184,166,.13), rgba(59,130,246,.09));
  border: 1px solid rgba(20,184,166,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
  flex: 0 0 auto;
}
.sb-item .sb-ic .ic,
.sb-child .sb-ic .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.sb-item:hover .sb-ic,
.sb-child:hover .sb-ic {
  color: #2563eb;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(20,184,166,.10));
  border-color: rgba(59,130,246,.18);
}
.sb-item.active .sb-ic,
.sb-child.active .sb-ic {
  color: #ffffff;
  background: linear-gradient(135deg, var(--mint), var(--blue));
  border-color: transparent;
  box-shadow: 0 5px 14px rgba(20,184,166,.18);
}
.sb-child .sb-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tree-empty { color: var(--muted2); font-size: 12px; padding: 8px; }

/* status dot */
.dot-st { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted2); }
.dot-idea { background: var(--blue); }
.dot-smoke { background: var(--violet); }
.dot-building { background: var(--amber); }
.dot-mvp { background: var(--mint); }
.dot-launched { background: var(--green); }
.dot-paused { background: var(--muted2); }
.dot-killed { background: var(--rose); }

.sb-backdrop { display: none; }

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(246,248,251,.85);
  backdrop-filter: blur(10px);
}
.toolbar h1 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar .tb-count { color: var(--muted2); font-size: 13px; font-weight: 600; }
.toolbar .spacer { flex: 1; }
.search {
  width: 260px;
  max-width: 38vw;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--r);
  padding: 7px 11px;
  font-size: 13px;
  outline: none;
}
.search:focus { border-color: rgba(15,181,164,.4); }

.content { padding: 14px 20px 60px; }

/* ---------- Dense list ---------- */
.list { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.row:hover { background: rgba(15,23,42,.035); border-color: var(--line); }
.row + .row { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.row:hover + .row, .row:hover { border-top-color: transparent; }
.row .r-status {
  display: inline-flex; align-items: center; gap: 7px;
  width: 116px; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.row .r-title { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .r-sum { color: var(--muted2); font-weight: 400; font-size: 12.5px; }
.deploy-link { display: inline-flex; margin-left: 7px; vertical-align: middle; }
.deploy-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  color: var(--muted);
  background: rgba(148,163,184,.1);
  vertical-align: middle;
}
.deploy-api { color: #1a7d44; border-color: rgba(31,168,86,.35); background: rgba(31,168,86,.12); }
.deploy-real { color: #0b7d70; border-color: rgba(15,181,164,.35); background: rgba(15,181,164,.12); }
.deploy-preview { color: #6d49c9; border-color: rgba(124,92,255,.35); background: rgba(124,92,255,.11); }
.deploy-missing { color: #64748b; border-color: rgba(100,116,139,.25); background: rgba(100,116,139,.08); }
.deploy-broken { color: #cf4436; border-color: rgba(239,95,84,.4); background: rgba(239,95,84,.12); }

/* ---------- App health ---------- */
.health-kpis {
  display: grid;
  grid-template-columns: repeat(8, minmax(82px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.health-kpi {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  border-radius: var(--r);
  padding: 10px 12px;
  min-height: 54px;
}
.health-kpi strong { display: block; color: var(--text); font-size: 20px; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.health-kpi span { color: var(--muted); font-size: 11.5px; font-weight: 750; }
.health-block { margin-top: 16px; }
.health-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.health-head h2 { margin: 0; font-size: 15px; font-weight: 850; color: var(--text); }
.health-tabs { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.health-tab {
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.health-tab.active { color: #0b7d70; border-color: rgba(15,181,164,.35); background: rgba(15,181,164,.11); }
.problem-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.problem-row {
  display: grid;
  grid-template-columns: 116px minmax(150px, 220px) 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  color: var(--text);
  background: rgba(255,255,255,.45);
}
.problem-row + .problem-row { border-top: 1px solid var(--line); }
.problem-row.bad { background: rgba(239,95,84,.08); }
.problem-row.warn { background: rgba(217,138,31,.08); }
.problem-code { font-size: 11px; font-weight: 850; color: var(--muted); }
.problem-row strong { font-size: 13px; }
.problem-row span:last-child { min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.health-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) 160px 170px minmax(220px, 1fr) minmax(260px, 1.35fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,.42);
}
.health-row + .health-row { border-top: 1px solid var(--line); }
.health-row-head {
  background: rgba(226,232,240,.55);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.health-product { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.health-name { color: var(--text); font-size: 13.5px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-id { color: var(--muted2); font-size: 11.5px; }
.health-pct { margin-left: 6px; color: var(--muted2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.health-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  border: 1px solid var(--line2);
}
.health-ok { color: #1a7d44; border-color: rgba(31,168,86,.35); background: rgba(31,168,86,.12); }
.health-warn { color: #b3791a; border-color: rgba(217,138,31,.35); background: rgba(217,138,31,.12); }
.health-bad { color: #cf4436; border-color: rgba(239,95,84,.38); background: rgba(239,95,84,.12); }
.health-checks, .health-steps { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.health-checks span, .health-steps span {
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.52);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 750;
}
.health-checks .ok { color: #1a7d44; border-color: rgba(31,168,86,.25); background: rgba(31,168,86,.09); }
.health-checks .miss { color: #9a4b16; border-color: rgba(217,138,31,.28); background: rgba(217,138,31,.09); }
.health-steps .done { color: #1a7d44; border-color: rgba(31,168,86,.25); background: rgba(31,168,86,.09); }
.health-empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 14px; color: var(--muted); background: rgba(255,255,255,.4); }

@media (max-width: 1100px) {
  .health-kpis { grid-template-columns: repeat(4, minmax(82px, 1fr)); }
  .health-table { overflow-x: auto; }
  .health-row { min-width: 980px; }
}

@media (max-width: 640px) {
  .health-kpis { grid-template-columns: repeat(2, minmax(82px, 1fr)); }
  .health-head { align-items: flex-start; flex-direction: column; }
  .health-tabs { margin-left: 0; }
  .problem-row { grid-template-columns: 92px minmax(0, 1fr); }
  .problem-row span:last-child { grid-column: 1 / -1; white-space: normal; }
}

/* ---------- Pricing draft ---------- */
.pricing-body {
  min-height: 100%;
  color: #e6edf8;
  background: #10141b;
}
.pricing-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 56px;
}
.pricing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.pricing-back {
  color: #c7d2e4;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.pricing-status {
  border: 1px solid rgba(105, 229, 205, .28);
  color: #70e1cc;
  background: rgba(25, 166, 143, .1);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: end;
  padding: 30px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pricing-kicker {
  margin: 0 0 10px;
  color: #70e1cc;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 900;
}
.pricing-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(32px, 5vw, 64px);
  line-height: .96;
  letter-spacing: 0;
}
.pricing-lead {
  max-width: 720px;
  margin: 16px 0 0;
  color: #aebbd0;
  font-size: 16px;
}
.pricing-guardrail {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 14px;
}
.pricing-guardrail span,
.pricing-card-tag {
  color: #9aa8bd;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}
.pricing-guardrail strong,
.pricing-guardrail small {
  display: block;
}
.pricing-guardrail strong {
  margin: 8px 0 6px;
  font-size: 18px;
}
.pricing-guardrail small {
  color: #aebbd0;
}
.pricing-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  margin-top: 20px;
}
.pricing-ui-runtime {
  grid-column: 1 / -1;
  min-height: 620px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  overflow: hidden;
  background: #0b1020;
}
.pricing-ui-runtime .pu-app {
  min-height: 620px;
}
.pricing-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}
.pricing-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: #171d27;
  color: #e6edf8;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.pricing-card:hover,
.pricing-card[aria-pressed="true"] {
  border-color: rgba(112, 225, 204, .55);
  background: #1d2633;
  transform: translateY(-1px);
}
.pricing-card strong {
  font-size: 20px;
  line-height: 1.1;
}
.pricing-card span {
  color: #aebbd0;
}
.pricing-card em {
  margin-top: auto;
  color: #ffffff;
  font-style: normal;
  font-size: 22px;
  font-weight: 900;
}
.pricing-card-cta,
.pricing-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 900;
}
.pricing-card-cta.is-disabled,
.pricing-action:disabled {
  color: #9aa8bd;
  background: rgba(255,255,255,.06);
}
.pricing-details {
  min-height: 300px;
  border: 1px solid rgba(255,255,255,.12);
  background: #151b24;
  border-radius: 8px;
  padding: 16px;
}
.pricing-empty,
.pricing-loading {
  color: #aebbd0;
}
.pricing-loading {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #151b24;
}
.pricing-loading.is-error {
  color: #ffb4ad;
}
.pricing-detail-head span {
  color: #70e1cc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pricing-detail-head strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}
.pricing-detail-head p {
  color: #aebbd0;
}
.pricing-features {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.pricing-features li {
  padding-left: 18px;
  position: relative;
  color: #d6deec;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70e1cc;
}
.pricing-matrix {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
}
.pricing-matrix div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pricing-matrix dt {
  color: #7f8ea5;
  font-weight: 900;
}
.pricing-matrix dd {
  margin: 0;
  color: #d6deec;
}
.pricing-action {
  width: 100%;
  color: #9aa8bd;
}
.pricing-note {
  margin: 12px 0 0;
  color: #9aa8bd;
  font-size: 12px;
}

@media (max-width: 1000px) {
  .pricing-hero,
  .pricing-workbench {
    grid-template-columns: 1fr;
  }
  .pricing-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pricing-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 10px;
  }
  .pricing-board {
    grid-template-columns: 1fr;
  }
  .pricing-card {
    min-height: 220px;
  }
}
.row .r-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 8px;
  flex: 0 0 auto;
}
.row .r-prog { display: flex; align-items: center; gap: 8px; width: 130px; flex: 0 0 auto; }
.row .r-repo { width: 22px; text-align: center; color: var(--muted2); flex: 0 0 auto; font-size: 13px; }
.row .r-repo a:hover { color: var(--blue); }

.progress { height: 5px; border-radius: 999px; background: rgba(100,116,139,.16); overflow: hidden; flex: 1; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--blue)); transition: width .2s ease; }
.r-pct { font-size: 11px; color: var(--muted2); font-variant-numeric: tabular-nums; width: 30px; text-align: right; flex: 0 0 auto; }

.empty { color: var(--muted2); padding: 50px 12px; text-align: center; font-size: 14px; }

/* tag colors */
.t-widget { color: #6d49c9; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.08); }
.t-crypto { color: #2f6fe0; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }
.t-regulated { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.10); }
.t-noncrypto { color: #0a8f80; border-color: rgba(15,181,164,.42); background: rgba(15,181,164,.10); }
.t-edu { color: #d4503f; border-color: rgba(239,95,84,.42); background: rgba(239,95,84,.10); }

/* ---------- Project page ---------- */
.proj { padding: 18px 22px 70px; max-width: 1080px; }
.proj-head { margin-bottom: 18px; }
.proj-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted2); margin-bottom: 5px; flex-wrap: wrap; }
.proj-eyebrow .tag { border: 1px solid var(--line2); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.proj h1 { font-size: 23px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.proj-sum { color: var(--muted); font-size: 12.5px; margin: 0; max-width: 760px; }

.status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* Статус темы — компактный бургер в eyebrow (меняется редко), пилюли в выпадашке */
.room-status-dd { position: relative; display: inline-flex; }
.room-status-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 11.5px; font-weight: 700;
}
.room-status-btn .rsb-caret { color: var(--muted2); font-size: 9px; transition: transform .15s; }
.room-status-btn.open .rsb-caret { transform: rotate(180deg); }
.room-status-dd .status-pills {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  flex-direction: column; flex-wrap: nowrap; gap: 4px; min-width: 168px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 6px; box-shadow: var(--shadow);
}
.room-status-dd .status-pills[hidden] { display: none; }
.status-pill {
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.status-pill:hover { color: var(--text); }
.status-pill.active { color: var(--text); }
.status-pill.active.s-idea { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); color: #2f6fe0; }
.status-pill.active.s-smoke { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.12); color: #6d49c9; }
.status-pill.active.s-building { border-color: rgba(217,138,31,.45); background: rgba(217,138,31,.14); color: #b3791a; }
.status-pill.active.s-mvp { border-color: rgba(15,181,164,.5); background: rgba(15,181,164,.14); color: #0b7d70; }
.status-pill.active.s-launched { border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.14); color: #1a7d44; }
.status-pill.active.s-paused { border-color: rgba(100,116,139,.45); background: rgba(100,116,139,.14); color: #5b6677; }
.status-pill.active.s-killed { border-color: rgba(239,95,84,.5); background: rgba(239,95,84,.13); color: #cf4436; }

.ph-prog { color: var(--muted2); font-variant-numeric: tabular-nums; }

.panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r2); padding: 14px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; }
.tab {
  border: none; background: none; color: var(--muted);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Tables ---------- */
.tbl { display: flex; flex-direction: column; }
.tbl-head, .tbl-row { display: grid; align-items: center; gap: 10px; }
.tbl-head {
  color: var(--muted2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px 8px; border-bottom: 1px solid var(--line);
}
.tbl-row { padding: 3px 8px; border-bottom: 1px solid var(--line); min-height: 40px; }
.tbl-row:hover { background: rgba(15,23,42,.025); }

.tr-tasks { grid-template-columns: 24px 1fr 116px 150px 26px; }
.tr-materials { grid-template-columns: 150px 1.1fr 1.4fr 26px 26px; }
.tr-ideas { grid-template-columns: 122px 1.2fr 1fr 26px; }

.cell-input, .cell-date, .cell-select {
  width: 100%; border: 1px solid transparent; background: transparent; color: var(--text);
  border-radius: 6px; padding: 7px 8px; font: inherit; font-size: 13px; outline: none;
}
.cell-input:hover, .cell-date:hover, .cell-select:hover { background: rgba(15,23,42,.04); }
.cell-input:focus, .cell-date:focus, .cell-select:focus { background: var(--bg2); border-color: rgba(15,181,164,.45); }
.cell-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.cell-select { cursor: pointer; appearance: none; }
.cell-select option { background: var(--panel); color: var(--text); }

.status-cell {
  border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800;
  cursor: pointer; border: 1px solid; justify-self: start; white-space: nowrap;
}
.ts-backlog { color: var(--muted); border-color: var(--line2); background: rgba(15,23,42,.03); }
.ts-progress { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.13); }
.ts-done { color: #1a7d44; border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.13); }
.hyp-testing { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.13); }
.hyp-validated { color: #1a7d44; border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.13); }
.hyp-rejected { color: #cf4436; border-color: rgba(239,95,84,.45); background: rgba(239,95,84,.12); }

.check {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--line2); background: var(--bg2);
  cursor: pointer; flex: 0 0 auto; position: relative;
  display: grid; place-items: center;
}
.check.on { background: rgba(15,181,164,.16); border-color: rgba(15,181,164,.5); }
/* галочка рисуется бордером (чёткая и ровная на любом шрифте), а не глифом «✓» */
.check.on::after {
  content: ""; width: 4px; height: 8px; margin-top: -1px;
  border: solid var(--mint); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.row-del {
  width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent;
  color: var(--muted2); cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .12s;
  justify-self: center;
}
.tbl-row:hover .row-del, .log-item:hover .row-del { opacity: 1; }
.ws-item .row-del, .ws-member .row-del { opacity: .48; }
.ws-item:hover .row-del, .ws-item:focus-within .row-del,
.ws-member:hover .row-del, .ws-member:focus-within .row-del { opacity: 1; }
.row-del:hover { color: var(--red); background: rgba(255,119,119,.1); }
.row-del.ws-edit:hover { color: var(--blue); background: rgba(37,99,235,.08); }
.row-open { color: var(--blue); justify-self: center; font-size: 14px; }
.row-open:hover { color: #2f6fe0; }
.row-open.disabled { color: var(--muted2); opacity: .4; pointer-events: none; }

.tbl-add { padding: 4px 8px; }
.tbl-add input {
  width: 100%; border: 1px dashed var(--line2); background: transparent; color: var(--text);
  border-radius: var(--r); padding: 9px 10px; font: inherit; font-size: 13px; outline: none;
}
.tbl-add input:focus { border-style: solid; border-color: rgba(15,181,164,.45); }

/* ---------- Journal ---------- */
.add-row { display: flex; gap: 7px; margin-bottom: 12px; }
.add-row textarea {
  width: 100%; border: 1px solid var(--line2); background: var(--bg2); color: var(--text);
  border-radius: var(--r); padding: 8px 10px; font: inherit; font-size: 13px; outline: none; resize: vertical;
}
.add-row textarea:focus { border-color: rgba(15,181,164,.4); }
.note-add { align-items: flex-start; }
.log-list { display: flex; flex-direction: column; gap: 11px; }
.log-item { border-left: 2px solid rgba(15,181,164,.35); padding: 1px 0 1px 10px; }
.log-date { display: flex; align-items: center; justify-content: space-between; color: var(--muted2); font-size: 11px; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.log-text { font-size: 13px; line-height: 1.4; white-space: pre-wrap; }

/* ---------- About ---------- */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-box span { display: block; color: var(--muted2); font-size: 11px; margin-bottom: 2px; }
.detail-box strong { display: block; font-size: 12.5px; font-weight: 600; }
.screen-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.screen-chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; color: var(--muted); }
.offer-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; border-top: 1px solid var(--line); padding-top: 10px; }

.btn-small {
  border: 1px solid var(--line2); background: var(--panel); color: var(--text);
  border-radius: var(--r); padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer; flex: 0 0 auto;
}
.btn-small:hover { border-color: var(--line2); background: var(--panel2); }

.delete-link {
  background: none; border: none; color: var(--muted2);
  font-size: 12px; cursor: pointer; padding: 2px 0; margin-left: auto;
}
.delete-link:hover { color: var(--red); }

.muted { color: var(--muted2); font-size: 12.5px; }
.proj-missing { padding: 80px 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.proj-missing h2 { margin: 0; }

/* ---------- Create modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.modal-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--line2); background: var(--panel);
  border-radius: var(--r2); box-shadow: 0 24px 80px rgba(0,0,0,.5); padding: 18px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { font-size: 18px; margin: 0; }
.close { width: 30px; height: 30px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); cursor: pointer; font-size: 17px; }
.create-form { display: flex; flex-direction: column; gap: 16px; }
.create-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.create-form input, .create-form textarea, .create-form select {
  border: 1px solid var(--line2); background: var(--bg2); color: var(--text);
  border-radius: var(--r); padding: 9px 10px; font: inherit; font-size: 13px; outline: none;
}
.create-form input:focus, .create-form textarea:focus, .create-form select:focus { border-color: rgba(15,181,164,.4); }
.create-form textarea { resize: vertical; }
.create-error { color: var(--red); font-size: 12px; min-height: 1em; }
.create-submit {
  border: none; background: linear-gradient(135deg, var(--mint), var(--blue)); color: #ffffff;
  font-weight: 800; border-radius: var(--r); padding: 10px; cursor: pointer; font-size: 13px;
}

/* ---------- Sidebar logout + softer panels ---------- */
.sb-projects { flex: 1 1 auto; min-height: 0; }
.sb-logout {
  margin-top: auto; position: sticky; bottom: 0;
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted2);
  border-radius: var(--r); padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-align: left;
  box-shadow: 0 -8px 10px -8px var(--bg2);
}
.sb-logout:hover { color: var(--text); background: rgba(15,23,42,.04); border-color: var(--line2); }
.panel { box-shadow: var(--shadow); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(380px, 100%); border: 1px solid var(--line2); background: var(--panel);
  border-radius: 16px; box-shadow: var(--shadow); padding: 26px 24px;
}
.login-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; margin-bottom: 18px; }
.login-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.login-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.45; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form input {
  border: 1px solid var(--line2); background: var(--bg2); color: var(--text);
  border-radius: var(--r); padding: 11px 12px; font: inherit; font-size: 14px; outline: none;
}
.login-form input:focus { border-color: rgba(15,181,164,.5); }
.login-error { color: var(--red); font-size: 12.5px; min-height: 1em; }

/* ---------- Prototype viewer ---------- */
.proto { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.proto-screens { display: flex; flex-direction: column; gap: 4px; }
.proto-screen {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: var(--r); padding: 9px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.proto-screen:hover { background: rgba(15,23,42,.04); color: var(--text); }
.proto-screen.active { background: rgba(15,181,164,.1); color: #0b7d70; border-color: rgba(15,181,164,.28); }
.proto-num {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: rgba(15,23,42,.06); color: var(--muted2);
}
.proto-screen.active .proto-num { background: rgba(15,181,164,.2); color: var(--mint); }
.proto-stage { display: flex; justify-content: center; padding: 6px 0; overflow-x: hidden; max-width: 100%; }

.device { box-shadow: var(--shadow); }
.device-browser { width: 100%; max-width: 560px; border: 1px solid var(--line2); border-radius: 14px; background: var(--bg2); overflow: hidden; }
.browser-top { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dots { display: flex; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(100,116,139,.3); }
.dot:nth-child(1) { background: #ff8585; }
.dot:nth-child(2) { background: #f4cd76; }
.dot:nth-child(3) { background: #94efa3; }
.browser-url { flex: 1; text-align: center; font-size: 12px; color: var(--muted2); background: var(--bg); border-radius: 6px; padding: 4px 10px; }
.browser-body { padding: 16px; overflow-x: hidden; min-width: 0; }

.device-phone { width: 290px; border: 8px solid var(--panel2); border-radius: 30px; background: var(--bg2); padding: 10px 12px 18px; position: relative; }
.phone-notch { width: 90px; height: 5px; border-radius: 999px; background: rgba(100,116,139,.3); margin: 4px auto 12px; }
.phone-bar { font-size: 12px; color: var(--muted2); text-align: center; margin-bottom: 12px; }
.phone-card { border: 1px solid var(--line2); border-radius: var(--r2); background: rgba(15,181,164,.08); padding: 12px; margin-bottom: 10px; }
.phone-card span { display: block; font-size: 11px; color: var(--muted); }
.phone-card strong { display: block; font-size: 19px; margin-top: 3px; }
.phone-line { height: 9px; border-radius: 999px; background: rgba(100,116,139,.14); margin: 8px 0; }
.phone-line.small { width: 60%; }

/* mock skeleton blocks */
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mock-kpi { border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.03); padding: 9px 10px; min-height: 48px; }
.mock-kpi span { display: block; font-size: 10.5px; color: var(--muted2); margin-bottom: 4px; }
.mock-kpi strong { font-size: 14px; }
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bar-row { display: grid; grid-template-columns: 96px 1fr 34px; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.bar-track { height: 7px; border-radius: 999px; background: rgba(100,116,139,.14); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--blue)); }
.mini-table { display: flex; flex-direction: column; gap: 5px; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.03); padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.mini-row strong { color: var(--text); }
.form-lines { display: flex; flex-direction: column; gap: 7px; }
.field { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.03); padding: 9px 10px; font-size: 12.5px; color: var(--muted); }
.field strong { color: var(--text); }
.result-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; border-radius: var(--r2); padding: 12px; background: linear-gradient(135deg, rgba(15,181,164,.18), rgba(143,176,255,.16)); }
.result-box span { font-size: 11px; color: var(--muted); }
.result-box strong { font-size: 17px; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.03); padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.check-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(15,181,164,.14); color: var(--mint); font-weight: 900; font-size: 11px; }
.check-item.warn .check-dot { background: rgba(244,205,118,.16); color: var(--amber); }
.check-item.danger .check-dot { background: rgba(255,133,133,.16); color: var(--red); }

/* generated secondary screen skeleton */
.skel-screen { display: flex; flex-direction: column; gap: 10px; }
.skel-h { font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 2px; }
.skel-line { display: block; height: 9px; border-radius: 999px; background: rgba(100,116,139,.16); width: 70%; }
.skel-line.sm { width: 40%; height: 8px; }
.skel-btn { align-self: flex-start; margin-top: 4px; border-radius: var(--r); padding: 8px 16px; font-size: 12px; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, var(--mint), var(--blue)); }

/* ---------- A0 catalog prototype renderer ---------- */
.a0-flow-proto { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); max-width: 100%; overflow-x: hidden; min-width: 0; }
.a0-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--muted);
  background: var(--panel);
  word-break: break-word;
}
.a0-status-panel {
  width: min(640px, 100%);
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}
.a0-status-title { font-size: 16px; font-weight: 850; letter-spacing: -.01em; margin-bottom: 6px; }
.a0-status-panel p { margin: 0 0 12px; color: var(--muted); }
.a0-seed { border-color: rgba(15,181,164,.32); background: rgba(15,181,164,.08); color: #0b7d70; }
.a0-noflow { border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.07); color: #2f6fe0; }
.a0-parked { border-color: rgba(217,138,31,.34); background: rgba(217,138,31,.08); color: #9a6114; }
.a0-reject { border-color: rgba(226,61,50,.34); background: rgba(226,61,50,.08); color: var(--red); }
.a0-device { max-width: 680px; min-width: 0; box-sizing: border-box; }
.a0-screen { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: 100%; overflow-x: hidden; }
.a0-root-badges, .a0-badges, .a0-actions { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: hidden; max-width: 100%; width: 100%; min-width: 0; }
.a0-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.a0-head h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.a0-stage { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); }
.a0-body { margin: 0; color: var(--muted); line-height: 1.5; }
.a0-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.62);
  padding: 10px;
  min-width: 0;
}
.a0-card-title { font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 8px; }
.a0-offer p { margin: 8px 0; color: var(--muted); }
.a0-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a0-offer-grid div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(15,23,42,.03);
  padding: 8px;
  min-width: 0;
}
.a0-offer-grid span { display: block; font-size: 10.5px; color: var(--muted2); margin-bottom: 3px; }
.a0-offer-grid strong { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.a0-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.a0-badge.good { color: #0b7d70; background: rgba(15,181,164,.10); border-color: rgba(15,181,164,.30); }
.a0-badge.warn { color: #9a6114; background: rgba(217,138,31,.10); border-color: rgba(217,138,31,.30); }
.a0-badge.bad { color: var(--red); background: rgba(226,61,50,.08); border-color: rgba(226,61,50,.30); }
.a0-badge.muted { color: var(--muted); background: rgba(15,23,42,.04); }
.a0-event {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
}
.a0-event:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.a0-event strong { font-size: 12px; }
.a0-event code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
}
.proto-go { min-height: 48px; flex: 1 1 100%; min-width: 0; width: 100%; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; white-space: normal; text-align: center; } /* v1.1 Fix B3: Android 48dp touch target (MOB-AND) */
.proto-go.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--line2); }

@media (max-width: 640px) {
  .proto { grid-template-columns: 1fr; }
  .a0-flow-proto { grid-template-columns: minmax(0, 1fr); max-width: 100%; overflow-x: hidden; }
  .a0-device { max-width: 100%; }
  .a0-head { flex-direction: column; }
  .a0-offer-grid, .mock-kpis { grid-template-columns: 1fr; }
  .a0-event { grid-template-columns: 1fr; }
  .proto-screen { min-height: 48px; max-width: 100%; box-sizing: border-box; } /* v1.1 Fix B3 */

  .proj { padding: 12px 14px 70px; }
  .proj h1 { font-size: 20px; }
  .content { padding: 10px 14px 60px; }

  /* Мобайл: композер «Решение овнера» и привязка коммита — в столбик, не жмём в ряд */
  .q-answer { flex-direction: column; align-items: stretch; }
  .q-answer-send { width: 100%; }
  .task-add-row { flex-wrap: wrap; }
  .task-add-row .task-inp { flex: 1 1 140px; }
  .task-add-row .btn-ghost { flex: 1 1 100%; }

  /* Details grid: single column */
  .details-grid { grid-template-columns: 1fr; }

  /* Tasks: hide date column (4th child) */
  .tr-tasks { grid-template-columns: 24px 1fr 116px 26px; }
  .tbl-head.tr-tasks > :nth-child(4),
  .tbl-row.tr-tasks > :nth-child(4) { display: none; }

  /* Materials: hide URL column (3rd child) */
  .tr-materials { grid-template-columns: 110px 1fr 26px 26px; }
  .tbl-head.tr-materials > :nth-child(3),
  .tbl-row.tr-materials > :nth-child(3) { display: none; }

  /* Ideas: hide note column (3rd child) */
  .tr-ideas { grid-template-columns: 100px 1fr 26px; }
  .tbl-head.tr-ideas > :nth-child(3),
  .tbl-row.tr-ideas > :nth-child(3) { display: none; }

  /* Delete button: always visible on touch, bigger target */
  .row-del { opacity: 0.45; width: 28px; height: 28px; }
  .tbl-row { min-height: 44px; }

  /* Journal: stack textarea + button */
  .add-row { flex-direction: column; }
  .add-row .btn-small { align-self: flex-end; }
}

/* ---------- About (детальный «О продукте») ---------- */
.about-section { display: flex; flex-direction: column; gap: 12px; }
.about-h { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.panel-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 10px; }
.about-block { display: flex; flex-direction: column; gap: 5px; }
.about-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); }
.about-block p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.about-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.about-list li { font-size: 13px; line-height: 1.45; color: var(--muted); }
.about-list li::marker { color: var(--mint); }
.comp-list { display: flex; flex-direction: column; gap: 6px; }
.comp { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); background: rgba(15,23,42,.03); border-radius: var(--r); padding: 8px 10px; }
.comp strong { font-size: 13px; }
.comp span { font-size: 12px; color: var(--muted); }

/* ---------- Audit (аудит фабрики) ---------- */
.agg-panel { box-shadow: var(--shadow); margin-bottom: 16px; }
.agg-summary { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.agg-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.agg-col { min-width: 0; }
.agg-wide { margin-top: 14px; }
.agg-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 8px; }
.agg-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.agg-list li { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.agg-list.ok li::marker { color: var(--green); }
.agg-list.diff li::marker { color: var(--amber); }
.agg-tech { display: flex; flex-direction: column; gap: 5px; }
.agg-tech-row { display: grid; grid-template-columns: 1fr 70px 26px; gap: 8px; align-items: center; font-size: 12px; }
.att-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-bar { height: 6px; border-radius: 999px; background: rgba(100,116,139,.16); overflow: hidden; }
.att-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--blue)); }
.att-n { color: var(--muted2); text-align: right; font-variant-numeric: tabular-nums; }
.agg-cluster { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.agg-cluster:first-of-type { border-top: none; }
.agg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.agg-chip { font-size: 11px; border: 1px solid var(--line2); border-radius: 999px; padding: 1px 8px; color: var(--muted); }

.atbl-wrap { border: 1px solid var(--line); border-radius: var(--r2); overflow-x: auto; background: var(--panel); box-shadow: var(--shadow); }
.atbl { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.cw-num { width: 3.5%; }
.cw-code { width: 7%; }
.cw-name { width: 16.5%; }
.cw-type { width: 9.5%; }
.cw-group { width: 11%; }
.cw-stack { width: 20%; }
.cw-state { width: 8.5%; }
.cw-ready { width: 9%; }
.cw-note { width: 15%; }
.atbl th, .atbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atbl thead th { position: sticky; top: 0; z-index: 2; background: var(--panel2); border-bottom: 1px solid var(--line2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.atbl th.au-th { cursor: pointer; user-select: none; }
.atbl th.au-th:hover { color: var(--text); }
.au-arr { margin-left: 3px; color: var(--blue); }
.atbl tbody tr:hover { background: rgba(15,23,42,.03); }
.atbl tbody tr:nth-child(even) td { background: rgba(15,23,42,.012); }
.atbl tbody tr:nth-child(even):hover td { background: rgba(15,23,42,.03); }
.atbl tbody tr:last-child td { border-bottom: none; }
.atbl td.empty { text-align: center; color: var(--muted2); padding: 22px; }
.c-num { color: var(--muted2); text-align: right; font-variant-numeric: tabular-nums; }
.c-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; letter-spacing: -.2px; color: var(--mint); font-weight: 700; }
.c-name strong { font-size: 13px; font-weight: 700; }
.c-sub { color: var(--muted2); font-weight: 400; }
.au-link { color: inherit; text-decoration: none; }
.au-link:hover strong { color: var(--blue); }
.c-group, .c-stack, .c-note { color: var(--muted); }
.c-type, .c-state, .c-ready { overflow: visible; }
.rdy { display: flex; align-items: center; gap: 7px; }
.rdy .progress { flex: 1 1 auto; min-width: 0; }
.au-pct { font-size: 11px; color: var(--muted2); width: 22px; text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.app-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; border-radius: 5px; padding: 1px 5px; border: 1px solid var(--line2); color: var(--muted); }
.a-web { color: #2f6fe0; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }
.a-mobile { color: #0a8f80; border-color: rgba(15,181,164,.4); background: rgba(15,181,164,.1); }
.a-backend { color: #b3791a; border-color: rgba(217,138,31,.4); background: rgba(217,138,31,.1); }
.a-landing { color: #6d49c9; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.08); }
.a-infra, .a-tooling { color: var(--muted2); }
.state-badge { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; border: 1px solid; white-space: nowrap; }
.st-idea { color: #2f6fe0; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.1); }
.st-scaffold { color: #8b6a1f; border-color: rgba(217,138,31,.4); background: rgba(217,138,31,.1); }
.st-mvp { color: #0b7d70; border-color: rgba(15,181,164,.45); background: rgba(15,181,164,.12); }
.st-launched { color: #1a7d44; border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.12); }
.st-unknown { color: var(--muted2); border-color: var(--line2); }

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

/* ---------- Mobile ---------- */
.sb-toggle { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: 260px; transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
  .sb-backdrop.show { display: block; }
  .sb-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--text); cursor: pointer; }
  .proj-grid { grid-template-columns: 1fr; }
  .row .r-status { width: 92px; }
  .row .r-prog { width: 86px; }
  .search { width: 150px; }
  /* Tabs: horizontal scroll, no wrapping */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
  .proj-eyebrow { flex-wrap: wrap; }
}

/* ---------- Small phone ≤ 480px ---------- */
@media (max-width: 480px) {
  .toolbar { padding: 10px 12px; }
  .toolbar h1 { font-size: 15px; }
  .search { width: 110px; max-width: 30vw; }

  .content { padding: 8px 10px 60px; }
  .proj { padding: 10px 12px 70px; }
  .proj h1 { font-size: 18px; }

  /* Project list rows: hide summary text and repo icon */
  .row { gap: 8px; padding: 9px 8px; }
  .row .r-sum { display: none; }
  .row .r-repo { display: none; }
  .row .r-status { width: 76px; font-size: 11.5px; }
  .row .r-prog { width: 58px; }
}

/* ---------- Мобильный Штаб: список тем и шапка темы ---------- */
@media (max-width: 640px) {
  /* Строка темы: название — первой строкой на всю ширину (а не одна буква),
     статус/проект/приоритет/время — второй строкой */
  .flow-row { flex-wrap: wrap; row-gap: 5px; padding: 10px; }
  .flow-row .r-title { flex: 1 1 100%; order: -1; white-space: normal; overflow: visible; line-height: 1.3; }
  .flow-row .r-title .r-sum { display: none; }
  .flow-row .r-stats { display: none; }
  .flow-row .r-status { width: auto; }
  .flow-row .r-when { margin-left: auto; }
  /* Шапка темы: чипы и кнопки экспорта компактнее, перенос без каши */
  .room-head .proj-eyebrow { row-gap: 6px; }
  .room-exp { display: inline-flex; flex-wrap: wrap; gap: 5px; }
  .room-head .exp-link { padding: 3px 8px; }
  .room-head .delete-link { margin-left: auto; }
  /* Мета сообщения (автор → адресат · время): переносится аккуратно */
  .msg-meta { flex-wrap: wrap; row-gap: 2px; }
  .msg-time { flex: 0 0 auto; }
}

/* ---------- Мобила: модалки и таблицы (Люди, Эксперты) ---------- */
@media (max-width: 640px) {
  /* поля модалок — в одну колонку, селекты не режутся */
  .form-row { grid-template-columns: 1fr; }
  /* Таблица «Люди» → карточки: thead прячем, строка = блок с переносами */
  .ua-table, .ua-table tbody { display: block; min-width: 0; }
  .ua-table thead { display: none; }
  .ua-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .ua-table tr:last-child { border-bottom: none; }
  .ua-table td { display: block; border: none; padding: 0; width: auto; }
  .ua-table .ua-td-who { display: flex; flex: 1 1 auto; }
  .ua-table .ua-td-actions { margin-left: auto; }
  .ua-table .ua-td-projects { flex: 1 1 100%; }
  /* Таблица «Эксперты» → карточки */
  .exf-table, .exf-table tbody { display: block; min-width: 0; }
  .exf-table thead { display: none; }
  .exf-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .exf-table td { display: block; border: none; padding: 0; width: auto; }
  .exf-table .exf-td-who { display: flex; flex: 1 1 100%; }
  .exf-table .exf-td-hint { flex: 1 1 100%; }
  .exf-table .exf-td-char { flex: 1 1 100%; }
  .exf-trgroup { padding: 6px 12px; }
  .exf-trgroup td { width: 100%; }
}

/* ---------- Very small phone ≤ 360px ---------- */
@media (max-width: 360px) {
  .toolbar h1 { font-size: 14px; }
  .search { width: 90px; }

  /* Hide progress bar, keep only percentage */
  .row .r-prog { display: none; }
  .row .r-status { width: 68px; }
}

/* ==================================================================
   Штаб (Flow)
   ================================================================== */

.btn-primary {
  border: none; background: linear-gradient(135deg, var(--mint), var(--blue)); color: #fff;
  font-weight: 800; font-size: 13px; border-radius: var(--r); padding: 8px 14px; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary.danger { background: linear-gradient(135deg, #ef5f54, #d6336c); }
.field-label { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); margin-bottom: 5px; }
.link-btn {
  background: none; border: none; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 0 2px;
}
.link-btn:hover { text-decoration: underline; }
.sb-ic { width: 18px; display: inline-grid; place-items: center; color: var(--muted2); flex: 0 0 auto; }
.sb-item.active .sb-ic { color: #ffffff; }

/* ---------- Единый набор SVG-иконок ---------- */
.ic {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: -0.16em;
  flex: 0 0 auto; stroke: currentColor; fill: none;
}
.sb-ic .ic { width: 17px; height: 17px; vertical-align: middle; }
/* точечные размеры по контейнерам */
.sb-toggle .ic { width: 18px; height: 18px; }
.cm-act .ic { width: 15px; height: 15px; vertical-align: middle; }
.msg-av .ic { width: 16px; height: 16px; vertical-align: middle; }
.ib-ic .ic { width: 20px; height: 20px; vertical-align: middle; }
.room-stats .ic, .r-stats .ic, .room-stat-dep .ic, .room-stat-ext .ic { width: 14px; height: 14px; vertical-align: -0.18em; opacity: .85; }
.modal-head h2 .ic { width: 18px; height: 18px; vertical-align: -0.18em; margin-right: 2px; }

/* group accent colors (avatars, headers) */
.fg-strategy     { --gc: var(--blue);   }
.fg-engineering  { --gc: var(--violet); }
.fg-operations   { --gc: var(--amber);  }
.fg-growth       { --gc: var(--green);  }
.fg-facilitation { --gc: var(--mint);   }

/* flow status dots */
.fdot-open { background: var(--blue); }
.fdot-progress { background: var(--amber); }
.fdot-blocked { background: var(--red); }
.fdot-done { background: var(--green); }
.fdot-archived { background: var(--muted2); }

/* ---------- Штаб: список тем ---------- */
.flow-intro { margin-bottom: 12px; }
.flow-lead { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; max-width: 760px; }

.flow-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.flow-filter-main { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.flt-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--muted); border-radius: 999px; padding: 5px 11px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.flt-chip:hover { color: var(--text); }
.flt-chip.active { color: var(--text); border-color: rgba(15,181,164,.45); background: rgba(15,181,164,.10); }
.flt-n { font-size: 11px; font-weight: 800; color: var(--muted2); background: rgba(15,23,42,.06); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; }
.flt-chip.active .flt-n { color: var(--text); }
.flow-sort { display: inline-flex; align-items: center; gap: 7px; color: var(--muted2); font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.flow-sort select {
  border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 999px;
  padding: 5px 28px 5px 11px; font: inherit; font-size: 12px; font-weight: 750; text-transform: none; letter-spacing: 0;
  outline: none; cursor: pointer;
}
.flow-sort select:focus { border-color: rgba(15,181,164,.42); }

.flow-table {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.flow-table-head,
.flow-table .flow-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(96px, 130px) 72px minmax(120px, 150px) 88px 66px;
  align-items: center;
  gap: 12px;
}
.flow-table-head {
  padding: 9px 12px;
  color: var(--muted2);
  background: rgba(248,250,252,.82);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.flow-table .flow-row {
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
}
.flow-table .flow-row + .flow-row { border-top: 1px solid var(--line); }
.flow-table .flow-row:hover { background: rgba(15,23,42,.025); border-color: transparent; }
.flow-table .flow-row .r-status { width: auto; min-width: 0; }
.flow-table .flow-row .r-title { min-width: 0; }
.flow-table .r-prod.is-empty { color: var(--muted2); border-color: var(--line); background: transparent; }

.flow-row .r-prod { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; flex: 0 0 auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-prio { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; border: 1px solid; }
.fp-low { color: var(--muted); border-color: var(--line2); background: rgba(15,23,42,.03); }
.fp-medium { color: #2f6fe0; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.10); }
.fp-high { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.13); }
.fp-critical { color: #cf4436; border-color: rgba(239,95,84,.45); background: rgba(239,95,84,.12); }
.flow-row .r-when { font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums; width: 64px; text-align: right; flex: 0 0 auto; }

@media (max-width: 900px) {
  .flow-filter { align-items: stretch; }
  .flow-sort { width: 100%; justify-content: space-between; }
  .flow-sort select { flex: 1 1 auto; min-width: 0; }
  .flow-table { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .flow-table-head { display: none; }
  .flow-table .flow-row {
    display: flex;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 8px;
    background: rgba(255,255,255,.55);
  }
  .flow-table .flow-row + .flow-row { border-top: 1px solid var(--line); }
}

/* status pill flow variants (room page) */
.status-pill.active.fs-open { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); color: #2f6fe0; }
.status-pill.active.fs-progress { border-color: rgba(217,138,31,.45); background: rgba(217,138,31,.14); color: #b3791a; }
.status-pill.active.fs-blocked { border-color: rgba(239,95,84,.5); background: rgba(239,95,84,.13); color: #cf4436; }
.status-pill.active.fs-done { border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.14); color: #1a7d44; }
.status-pill.active.fs-archived { border-color: rgba(100,116,139,.45); background: rgba(100,116,139,.14); color: #5b6677; }

/* ---------- expert picker (modal + room) ---------- */
.modal-wide .modal-panel, .modal-panel.modal-wide { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
/* крестик — в угол панели, чтобы не «плавал» по центру длинного заголовка */
.modal-panel.modal-wide { position: absolute; }
.modal-panel.modal-wide .modal-head { align-items: flex-start; }
.modal-panel.modal-wide .modal-head h2 { padding-right: 42px; line-height: 1.25; }
.modal-panel.modal-wide .close { position: absolute; top: 14px; right: 14px; z-index: 2; }
/* комментарии — на всю ширину под колонками */
.task-comments-sec { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.task-comments-sec .task-comments { max-height: 320px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-row > label { min-width: 0; }
.create-form .user-auth-row { margin-top: 16px; }
/* Матрица разделов (RBAC по пунктам меню) в модалке пользователя */
.sec-matrix { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.sec-matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sec-matrix-head > span:first-child { font-size: 12px; font-weight: 800; color: var(--muted); }
.sec-matrix-tools { display: flex; gap: 6px; }
.sec-mini { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sec-mini:hover { border-color: var(--accent); color: var(--text); }
.sec-matrix-hint { font-size: 11px; color: var(--muted2); margin: 0 0 8px; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.sec-box { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; padding: 3px 0; min-width: 0; }
.sec-box input { flex: none; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.sec-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-project-access { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.up-projects { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.up-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr);
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.64);
  padding: 9px 10px;
}
.up-project-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.up-project-main > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.up-project-main b, .up-project-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-project-main b { font-size: 12.5px; }
.up-project-main small { color: var(--muted2); font-size: 11px; }
.up-project-controls { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 8px; align-items: center; min-width: 0; }
.up-project-controls select { min-width: 0; border: 1px solid var(--line2); border-radius: 7px; padding: 6px 8px; background: var(--panel); font: inherit; font-size: 12px; }
.up-secret { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.up-secret input, .up-topic input { accent-color: var(--accent); }
.up-topic-menu { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 7px; }
.up-topic-menu summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 850; }
.up-topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px 10px; margin-top: 7px; }
.up-topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.up-topic input { flex: 0 0 auto; width: 14px; height: 14px; }
.up-topic input:disabled + span { opacity: .55; }
.up-topic span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-topic.on { color: var(--text); font-weight: 700; }
.up-topic-empty { color: var(--muted2); font-size: 12px; }
.create-form select { width: 100%; min-width: 0; }
.form-experts { border-top: 1px solid var(--line); padding-top: 12px; }
.fe-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.fe-actions { display: flex; gap: 10px; }
.fe-groups { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.fe-group-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gc, var(--muted2)); margin-bottom: 5px; padding-left: 2px; }
.fe-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fe-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2);
  background: var(--panel); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer;
  font-size: 12px; color: var(--muted); user-select: none;
}
.fe-chip:hover { border-color: var(--line2); background: var(--panel2); }
.fe-chip.on { border-color: rgba(15,181,164,.45); background: rgba(15,181,164,.10); color: var(--text); }
.fe-chip input { display: none; }
.fe-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--gc, var(--muted2)); color: #fff; font-size: 10px; font-weight: 800;
}
.fe-group .fe-badge { background: var(--gc, var(--muted2)); }
.fe-name { font-weight: 600; }

/* ---------- room page ---------- */
.room { padding: 16px 22px 40px; }
.room-head { margin-bottom: 8px; }
.room-head h1 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 3px; }
.room-id { font-family: var(--mono); font-size: 11px; color: var(--muted2); }
.room-prod { font-size: 12px; color: var(--blue); font-weight: 700; }
.room-prod:hover { text-decoration: underline; }

.room-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.room-col-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 64px; }

/* chat */
.chat { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r2); box-shadow: var(--shadow); overflow: hidden; }
.chat-log { display: flex; flex-direction: column; gap: 10px; padding: 16px; max-height: calc(100vh - 280px); min-height: 280px; overflow-y: auto; }
/* мало сообщений → прижимаем к низу (к композеру), а не «висят» вверху с пустым местом */
.chat-log > :first-child { margin-top: auto; }

/* Правила игры — карточка вверху чата (обязательны для всех, сворачиваемая) */
.rules-card { flex: 0 0 auto; margin: 10px 16px 0; border: 1px solid rgba(217,138,31,.45); background: rgba(217,138,31,.06); border-radius: 10px; }
.rules-head { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent; cursor: pointer; padding: 9px 12px; font: inherit; text-align: left; }
.rules-head svg { width: 15px; height: 15px; color: var(--amber); flex: 0 0 auto; }
.rules-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #9a6411; }
.rules-caret { color: var(--muted2); font-size: 11px; transition: transform .15s; flex: 0 0 auto; }
.rules-card.is-collapsed .rules-caret { transform: rotate(-90deg); }
.rules-list { margin: 0; padding: 0 16px 12px 36px; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.rules-list li { font-size: 12.5px; color: var(--muted); line-height: 1.42; }
.rules-list code { background: rgba(15,23,42,.06); padding: 0 4px; border-radius: 4px; font-size: 11.5px; }
.rules-card.is-collapsed .rules-list { display: none; }
.msg { display: flex; gap: 10px; max-width: 88%; }
.msg-av {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--gc, var(--muted2)); color: #fff; font-size: 10.5px; font-weight: 800;
}
.msg-body { border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 8px 11px; min-width: 0; }
.msg-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.msg-meta strong { color: var(--text); font-size: 12.5px; }
.msg-to { color: var(--blue); font-weight: 700; }
.msg-time { color: var(--muted2); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.msg-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg-acts { display: flex; gap: 6px; margin-top: 5px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-acts { opacity: 1; }
.msg-act { background: none; border: none; color: var(--muted2); font: inherit; font-size: 11px; cursor: pointer; padding: 1px 4px; border-radius: 5px; }
.msg-act:hover { color: var(--text); background: rgba(15,23,42,.05); }
.msg-mine { flex-direction: row-reverse; margin-left: auto; }
.msg-mine .msg-body { background: rgba(15,181,164,.08); border-color: rgba(15,181,164,.25); }
.msg-mine .msg-meta { flex-direction: row-reverse; }
.msg-mine .msg-time { margin-left: 0; margin-right: auto; }
.msg-mine .msg-acts { flex-direction: row-reverse; }

/* message tones */
.ft-system .msg-body { background: rgba(100,116,139,.08); border-color: rgba(100,116,139,.3); border-style: dashed; }
.ft-disagree .msg-body { border-left: 3px solid var(--amber); }
.ft-blocker .msg-body { border-left: 3px solid var(--red); background: rgba(239,95,84,.06); }
.ft-decision .msg-body { border-left: 3px solid var(--green); background: rgba(31,168,86,.07); }

/* composer */
.composer { border-top: 1px solid var(--line); padding: 6px 12px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; }
.composer-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-field { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; flex: 1; min-width: 110px; }
.cmp-field select {
  border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 6px;
  padding: 5px 8px; font: inherit; font-size: 12.5px; outline: none; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 600;
}
.cmp-field select:focus { border-color: rgba(15,181,164,.45); }
.composer-send { display: flex; gap: 6px; align-items: flex-end; }
.composer-send .btn-primary { height: 38px; padding: 0 16px; display: inline-flex; align-items: center; }
.composer-send textarea {
  flex: 1; min-width: 0; border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: var(--r);
  padding: 8px 11px; font: inherit; font-size: 13.5px; outline: none;
  /* старт в одну строку, растёт под текст до max-height, дальше вертикальный скролл */
  resize: none; min-height: 38px; max-height: 140px; line-height: 20px;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; overflow-y: auto;
}
.composer-send textarea:focus { border-color: rgba(15,181,164,.4); }

/* rail panels */
.rail-panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r2); box-shadow: var(--shadow); padding: 12px; }
.rail-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 10px; }
.room-access-pill { font-size: 11px; font-weight: 800; color: var(--violet); border: 1px solid rgba(124,92,255,.35); background: rgba(124,92,255,.08); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.access-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.access-mode { border: 1px solid var(--line2); background: var(--bg2); color: var(--muted); border-radius: 7px; padding: 6px 5px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.access-mode:hover:not(:disabled) { color: var(--text); border-color: var(--violet); }
.access-mode.active { color: var(--text); border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.10); }
.access-mode:disabled { opacity: .45; cursor: not-allowed; }
.access-desc { font-size: 12px; color: var(--muted); }
.access-project-list { display: flex; flex-wrap: wrap; gap: 5px; }
.access-project-list span { border: 1px solid var(--line2); background: var(--bg2); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.access-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.access-presets .link-btn:disabled { opacity: .45; cursor: not-allowed; }
.access-groups { max-height: 240px; }
.access-chip.is-project { border-color: rgba(59,130,246,.35); }
.human-access-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.human-access-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.human-access-user {
  display: grid;
  grid-template-columns: 16px 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg2);
  padding: 6px 8px;
  cursor: pointer;
}
.human-access-user:hover { border-color: var(--line2); background: var(--panel2); }
.human-access-user.on { border-color: rgba(15,181,164,.34); background: rgba(15,181,164,.08); }
.human-access-user input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.human-access-user span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.human-access-user b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.human-access-user small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted2);
  font-size: 11px;
}

/* council members */
.council-group + .council-group { margin-top: 10px; }
.council-group-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gc, var(--muted2)); margin-bottom: 5px; }
.council-member { display: flex; align-items: center; gap: 6px; padding: 4px 2px; min-width: 0; }
.cm-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ago { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--muted2); white-space: nowrap; }
.cm-ago svg { width: 11px; height: 11px; opacity: .8; }
.cm-ago-never { opacity: .42; }
.cm-timer {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line2);
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.45;
  white-space: nowrap;
}
.cm-timer-pending { color: #8a5d12; border-color: rgba(217,138,31,.36); background: rgba(217,138,31,.10); }
.cm-timer-overdue { color: #b42318; border-color: rgba(239,95,84,.42); background: rgba(239,95,84,.10); }
.council-member.cm-overdue { background: rgba(239,95,84,.045); border-radius: 6px; }
/* действия видны на ховере; в покое — компактный значок активности + режим (один ряд) */
.council-member .cm-act, .council-member .cm-del { display: none; }
.council-member .cm-act.cm-prompt { display: inline-flex; align-items: center; justify-content: center; }
.council-member:hover .cm-act, .council-member:hover .cm-del { display: inline-flex; align-items: center; justify-content: center; }
.council-member:hover .cm-ago, .council-member:hover .cm-timer { display: none; }
.cm-del { width: 20px; height: 20px; border: none; background: transparent; color: var(--muted2); cursor: pointer; font-size: 15px; line-height: 1; border-radius: 5px; flex: 0 0 auto; opacity: .5; }
.council-member:hover .cm-del, .art-item:hover .cm-del { opacity: 1; }
.cm-del:hover { color: var(--red); background: rgba(239,95,84,.1); }

/* artifacts */
.rail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; flex-wrap: wrap; }
.rail-tab { border: none; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 5px; }
.rail-tab:hover { color: var(--text); }
.rail-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.art-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; overflow-x: hidden; }
.art-item { border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.02); padding: 8px 10px; min-width: 0; }
.art-top { display: flex; align-items: flex-start; gap: 6px; }
/* min-width:0 + anywhere: длинные коды (MFO-UZ-…/STACK/QA) переносятся, а не распирают панель */
.art-top strong { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.art-link { color: var(--blue); flex: 0 0 auto; }
.art-body { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.art-when { font-size: 10.5px; color: var(--muted2); margin-top: 5px; font-variant-numeric: tabular-nums; }
.art-add { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.art-add input { border: 1px solid var(--line2); background: var(--bg2); color: var(--text); border-radius: var(--r); padding: 8px 10px; font: inherit; font-size: 12.5px; outline: none; }
.art-add input:focus { border-color: rgba(15,181,164,.4); }
.art-add-row { display: flex; gap: 6px; align-items: center; }
.art-add-row select { flex: 1; min-width: 0; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); border-radius: var(--r); padding: 7px 8px; font: inherit; font-size: 12px; outline: none; }
.art-add-row select:focus { border-color: rgba(15,181,164,.4); }
.art-add-row .btn-small { flex: 0 0 auto; }
.art-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.art-foot .art-when { margin: 0; flex: 0 0 auto; }
.art-proj { max-width: 160px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 700; outline: none; cursor: pointer; }
.art-proj:not(.is-general) { color: #2f6fe0; border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.08); }

/* ---------- Штаб в карточке продукта ---------- */
.shtab { display: flex; flex-direction: column; gap: 16px; }
.shtab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shtab-sec { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r2); box-shadow: var(--shadow); padding: 12px 14px; }
.shtab-h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 10px; }
.shtab-add { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: none; letter-spacing: 0; }
.shtab-add:hover { text-decoration: underline; }
.shtab-topics { display: flex; flex-direction: column; gap: 2px; }
.shtab-topic { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r); border: 1px solid transparent; }
.shtab-topic:hover { background: rgba(15,23,42,.04); border-color: var(--line); }
.shtab-topic .st-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shtab-topic .st-status { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.shtab-art { border: 1px solid var(--line); border-radius: var(--r); background: rgba(15,23,42,.02); padding: 8px 10px; }
.shtab-art + .shtab-art { margin-top: 6px; }
.shtab-art-top { display: flex; align-items: flex-start; gap: 6px; }
.shtab-art-top .sa-title { flex: 1; font-size: 13px; line-height: 1.35; color: var(--text); }
.shtab-gen { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; }
.shtab-art-room { display: inline-block; margin-top: 5px; font-size: 11.5px; color: var(--blue); }
.shtab-art-room:hover { text-decoration: underline; }
@media (max-width: 640px) { .shtab-grid { grid-template-columns: 1fr; } }

/* mobile room tabs */
.room-mobtabs { display: none; gap: 2px; }
.mob-tab { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 10px; }
.mob-tab:first-child { border-radius: var(--r) 0 0 var(--r); }
.mob-tab:last-child { border-radius: 0 var(--r) var(--r) 0; }
.mob-tab + .mob-tab { border-left: none; }
.mob-tab.active { color: #fff; background: linear-gradient(135deg, var(--mint), var(--blue)); border-color: transparent; }

@media (max-width: 1200px) {
  .room { padding: 12px 14px 40px; }
  .room-mobtabs { display: inline-flex; }
  .room-grid { grid-template-columns: 1fr; }
  .room-col-rail { position: static; }
  /* mobile: show only the active pane */
  .room-grid[data-mob="chat"] .room-col-rail { display: none; }
  .room-grid[data-mob="council"] .room-col-chat,
  .room-grid[data-mob="artifacts"] .room-col-chat { display: none; }
  .room-grid[data-mob="council"] .room-col-rail .rail-panel:last-child { display: none; }
  .room-grid[data-mob="artifacts"] .room-col-rail .rail-panel:first-child { display: none; }
  .chat-log { max-height: none; }
  .msg { max-width: 100%; }
}

/* ---------- Штаб: переключатель видов + режим артефактов ---------- */
.flow-views { display: flex; gap: 2px; margin-bottom: 12px; }
.seg { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 16px; }
.seg:first-child { border-radius: var(--r) 0 0 var(--r); }
.seg:last-child { border-radius: 0 var(--r) var(--r) 0; }
.seg + .seg { border-left: none; }
.seg.active { color: #fff; background: linear-gradient(135deg, var(--mint), var(--blue)); border-color: transparent; }
.flow-filter .seg-chips { display: inline-flex; gap: 6px; }
.art-proj-filter { border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; outline: none; cursor: pointer; max-width: 240px; }
.art-proj-filter:focus { border-color: rgba(15,181,164,.4); }
.art-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; border: 1px solid; }
.ak-task { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.12); }
.ak-material { color: #6d49c9; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.10); }
.flow-row .r-prod.is-general { color: var(--muted2); border-color: var(--line2); background: transparent; }

/* Аватар-кружок: общий стиль (узкое правило для .ws-member-rich оставлено отдельно) */
.ws-member-avatar { width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(59,130,246,.12); color: var(--blue); font-size: 11px; font-weight: 900; line-height: 1; flex: 0 0 auto; }
/* Чекбоксы разделов и строки проектных доступов: .create-form label рисует колонку — возвращаем строку */
.create-form label.sec-box { flex-direction: row; align-items: center; gap: 7px; }
.create-form label.up-secret { flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.create-form label.up-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.create-form label.sec-box input,
.create-form label.up-secret input,
.create-form label.up-topic input {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.create-form label.sec-box input:checked,
.create-form label.up-secret input:checked,
.create-form label.up-topic input:checked {
  border-color: rgba(20,184,166,.74);
  background: var(--mint);
}
.create-form label.sec-box input:checked::after,
.create-form label.up-secret input:checked::after,
.create-form label.up-topic input:checked::after {
  width: 6px;
  height: 3px;
  border-left-width: 2px;
  border-bottom-width: 2px;
}
.sec-matrix { margin-top: 4px; }
.sec-matrix-hint { line-height: 1.4; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; }
.up-row .up-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.up-row select { flex: 0 0 auto; width: 110px; }
/* Глазик у парольного поля */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1 1 auto; padding-right: 36px; }
.pw-eye { position: absolute; right: 6px; border: none; background: transparent; cursor: pointer; font-size: 15px; opacity: .45; padding: 4px; line-height: 1; }
.pw-eye:hover { opacity: .8; }
.pw-eye.on { opacity: 1; }
/* Подпись «овнер: Имя» у вопроса */
.fdq-ownerof { color: #92400e; font-weight: 800; }
/* Таблица экспертов (модалка «Эксперты»): стиль фабричных таблиц + inline-правка */
.modal-panel.exf-panel { width: min(1280px, calc(100vw - 40px)); }
.exf-tablewrap { overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); }
.exf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.exf-table th, .exf-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.exf-table th { color: var(--muted2); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; background: rgba(248,250,252,.78); position: sticky; top: 0; z-index: 1; }
/* пропорции колонок: всё влезает без горизонтального скролла, текст переносится */
.exf-table th:nth-child(1) { width: 21%; }
.exf-table th:nth-child(2) { width: 25%; }
.exf-table th:nth-child(3) { width: 31%; }
.exf-table th:nth-child(4) { width: 62px; }
.exf-table th:nth-child(5) { width: 15%; }
.exf-trgroup td { background: rgba(15,23,42,.035); font-size: 10.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); padding: 6px 10px; }
.exf-td-who { display: flex; align-items: center; gap: 8px; }
.exf-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.exf-who strong { overflow-wrap: break-word; }
.exf-who code { font-size: 9.5px; color: var(--muted2); }
.exf-td-hint { color: var(--muted); font-size: 11.5px; }
.exf-td-char, .exf-td-mood { font-size: 12px; }
.exf-td-char[contenteditable], .exf-td-mood[contenteditable] { cursor: text; border-radius: 6px; }
.exf-td-char[contenteditable]:hover, .exf-td-mood[contenteditable]:hover { background: rgba(59,130,246,.05); }
.exf-td-char[contenteditable]:focus, .exf-td-mood[contenteditable]:focus { outline: 2px solid rgba(59,130,246,.35); background: #fff; }
.exf-td-weight select { border: 1px solid var(--line2); background: var(--bg2); border-radius: 7px; padding: 3px 6px; font: inherit; font-size: 12px; }
/* Настроение: единый SVG-значок (цвет группы) + редактируемый текст */
.exf-mood-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.exf-mood-ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; color: #fff; }
.exf-mood-ic .ic, .exf-mood-ic svg { width: 11px; height: 11px; }
.exf-mood-wrap [data-f="mood"] { min-width: 60px; }
/* Люди таблицей */
.ua-tablewrap { overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); box-shadow: var(--shadow); }
.ua-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.ua-table th:nth-child(1) { width: 22%; }
.ua-table th:nth-child(2) { width: 13%; }
.ua-table th:nth-child(3) { width: 10%; }
.ua-table th:nth-child(4) { width: 38%; }
.ua-table th:nth-child(5) { width: 9%; }
.ua-table th:nth-child(6) { width: 76px; }
.ua-table td { overflow-wrap: break-word; }
.ua-table th, .ua-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ua-table th { color: var(--muted2); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; background: rgba(248,250,252,.78); }
.ua-table tbody tr:hover { background: rgba(59,130,246,.04); }
.ua-td-who { display: flex; align-items: center; gap: 9px; }
.ua-td-projects { max-width: 360px; }
.ua-td-actions { white-space: nowrap; text-align: right; }
/* ---------- Живость: анимации (уважаем prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kcard, .ws-item, .fdq-item, .exf-table tbody tr, .row { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .kcard:hover, .ws-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.09); }
  .row:hover, .fdq-item:hover { transform: translateX(3px); }
  .sb-count.sb-unread:not([hidden]) { animation: badgePulse 2.6s ease infinite; }
  .modal.open .modal-panel { animation: modalIn .18s ease; }
  .btn-primary { transition: transform .12s ease, filter .12s ease; }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { transform: scale(.96); }
  .dot-st { transition: transform .15s ease; }
  .r-status:hover .dot-st, .fdash-st:hover .dot-st { transform: scale(1.35); }
}
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* ---------- Геймификация v3: рипл, пульс статусов, драг, модалки ---------- */
.btn-primary, .seg, .flt-chip, .status-pill, .exp-link, .sb-project-row, .sb-child, .sb-item { position: relative; overflow: hidden; }
.pripple { position: absolute; border-radius: 999px; background: currentColor; opacity: .18; pointer-events: none; transform: scale(0); animation: prippleGo .6s ease-out forwards; }
@keyframes prippleGo { to { transform: scale(1); opacity: 0; } }
/* Блеск по кнопке-градиенту */
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%); transform: translateX(-120%); transition: none; pointer-events: none; }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .65s ease; }
/* «В работе» дышит — живой конвейер */
.dot-st.fdot-progress { animation: dotBreathe 2.2s ease-in-out infinite; }
@keyframes dotBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
/* Бейджи подпрыгивают при изменении числа */
.sb-count.bump { animation: badgeBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgeBump { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* Канбан: карточка с тильтом при перетаскивании, колонка-приёмник светится */
.kcard.dragging { transform: rotate(2.6deg) scale(1.04); box-shadow: 0 16px 40px rgba(15,23,42,.22); opacity: .92; }
.kcol-body.over { outline: 2px dashed rgba(15,181,164,.55); outline-offset: -4px; border-radius: 12px; animation: colPulse 1s ease infinite; }
@keyframes colPulse { 0%, 100% { background: rgba(15,181,164,.05); } 50% { background: rgba(15,181,164,.12); } }
/* Модалки: блюр-подложка */
.modal-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: backdropIn .2s ease; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
/* Дерево проекта разворачивается */
.sb-children { animation: childrenIn .22s ease; transform-origin: top; }
@keyframes childrenIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* Кнопка «вниз к последним» в чате — впрыгивает */
.chat-tolast:not([hidden]) { animation: toLastIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes toLastIn { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
/* Пустые состояния мягко дышат */
.empty, .ws-empty { animation: emptyBreathe 3.4s ease-in-out infinite; }
@keyframes emptyBreathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pripple, .btn-primary::after, .dot-st.fdot-progress, .sb-count.bump, .kcol-body.over, .sb-children, .chat-tolast:not([hidden]), .empty, .ws-empty { animation: none !important; transition: none !important; }
}
/* ---------- Геймификация v2: каскады, самолётик, новые сообщения, живость ---------- */
.enter-stagger > * { animation: rowEnter .3s ease both; }
.enter-stagger > *:nth-child(1) { animation-delay: .02s; } .enter-stagger > *:nth-child(2) { animation-delay: .05s; }
.enter-stagger > *:nth-child(3) { animation-delay: .08s; } .enter-stagger > *:nth-child(4) { animation-delay: .11s; }
.enter-stagger > *:nth-child(5) { animation-delay: .14s; } .enter-stagger > *:nth-child(6) { animation-delay: .17s; }
.enter-stagger > *:nth-child(7) { animation-delay: .2s; } .enter-stagger > *:nth-child(8) { animation-delay: .23s; }
.enter-stagger > *:nth-child(9) { animation-delay: .26s; } .enter-stagger > *:nth-child(10) { animation-delay: .29s; }
.enter-stagger > *:nth-child(n+11) { animation-delay: .32s; }
@keyframes rowEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.pplane { position: fixed; z-index: 9450; font-size: 19px; pointer-events: none; animation: pplaneFly .9s ease-out forwards; }
@keyframes pplaneFly { 0% { transform: translate(0,0) rotate(-8deg); opacity: 1; } 100% { transform: translate(34vw, -26vh) rotate(-16deg); opacity: 0; } }
/* Новое сообщение в чате — мягкий въезд с глоу */
.msg-in { animation: msgIn .5s ease; }
@keyframes msgIn {
  0% { opacity: 0; transform: translateY(10px); box-shadow: 0 0 0 3px rgba(15,181,164,.0); }
  40% { box-shadow: 0 0 0 3px rgba(15,181,164,.28); border-radius: 14px; }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 3px rgba(15,181,164,0); }
}
/* Живость мелочей */
.sb-logo { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.sb-brand:hover .sb-logo { transform: rotate(-10deg) scale(1.12); }
.msg-av, .exf-av, .ws-member-avatar { transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.msg-av:hover, .exf-av:hover, .ws-member-avatar:hover { transform: scale(1.15) rotate(-4deg); }
.flt-chip { transition: transform .12s ease; }
.flt-chip:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .enter-stagger > *, .pplane, .msg-in { animation: none !important; }
}
/* ---------- Единые значки (SVG в тоновом кружке) для тостов/празднований ---------- */
.pico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; flex: 0 0 auto; }
.pico .ic, .pico svg { width: 15px; height: 15px; }
.pico-ok { background: rgba(15,181,164,.14); color: #0b7d70; border: 1px solid rgba(15,181,164,.3); }
.pico-info { background: rgba(59,130,246,.13); color: #1d4ed8; border: 1px solid rgba(59,130,246,.3); }
.pico-warn { background: rgba(245,158,11,.15); color: #92400e; border: 1px solid rgba(245,158,11,.35); }
.pico-fire { background: rgba(239,68,68,.13); color: #b91c1c; border: 1px solid rgba(239,68,68,.3); }
.pico-xl { width: 56px; height: 56px; }
.pico-xl .ic, .pico-xl svg { width: 28px; height: 28px; }
.procket.pico, .pplane.pico { background: var(--panel); box-shadow: 0 6px 18px rgba(15,23,42,.18); }
.procket.pico { width: 44px; height: 44px; }
.procket.pico .ic, .procket.pico svg { width: 22px; height: 22px; }
.sb-streak .ic, .sb-streak svg { width: 12px; height: 12px; vertical-align: -2px; }
.pw-eye .ic, .pw-eye svg { width: 15px; height: 15px; }
.ws-capcheck .ck-lock { font-style: normal; opacity: .45; margin-left: 1px; display: inline-grid; }
.ws-capcheck .ck-lock .ic, .ws-capcheck .ck-lock svg { width: 9px; height: 9px; }
.fdq-mark .ic, .fdq-mark svg { width: 13px; height: 13px; }
/* ---------- Геймификация: тосты, празднования, ракета, стрик ---------- */
#pappsToasts { position: fixed; right: 16px; bottom: 18px; z-index: 9500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ptoast {
  display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 360px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15,23,42,.18); padding: 10px 14px; pointer-events: auto;
  text-decoration: none; color: var(--text);
  animation: ptoastIn .3s cubic-bezier(.34,1.56,.64,1);
}
.ptoast.out { animation: ptoastOut .35s ease forwards; }
.ptoast-ic { font-size: 20px; flex: 0 0 auto; animation: ptoastIcPop .5s cubic-bezier(.34,1.56,.64,1); }
.ptoast-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ptoast-tx strong { font-size: 13px; }
.ptoast-tx small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ptoastIn { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ptoastOut { to { opacity: 0; transform: translateY(8px) scale(.95); } }
@keyframes ptoastIcPop { 0% { transform: scale(.4) rotate(-18deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }
#pappsCelebrate { position: fixed; inset: 0; z-index: 9400; display: grid; place-items: center; pointer-events: none; }
#pappsCelebrate.out .pceleb { animation: pcelebOut .4s ease forwards; }
.pceleb {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.22); padding: 20px 34px; text-align: center;
  animation: pcelebIn .45s cubic-bezier(.34,1.56,.64,1);
}
.pceleb-emoji { font-size: 40px; animation: pcelebEmoji .7s cubic-bezier(.34,1.56,.64,1); }
.pceleb strong { font-size: 17px; }
.pceleb small { font-size: 12.5px; color: var(--muted); }
@keyframes pcelebIn { from { opacity: 0; transform: scale(.6) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pcelebOut { to { opacity: 0; transform: scale(.9) translateY(-10px); } }
@keyframes pcelebEmoji { 0% { transform: scale(0) rotate(-30deg); } 55% { transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }
.procket { position: fixed; left: -8vw; bottom: -6vh; z-index: 9450; font-size: 34px; pointer-events: none; animation: procketFly 1.45s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes procketFly {
  0% { transform: translate(0, 0) rotate(40deg) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(118vw, -112vh) rotate(40deg) scale(1.15); opacity: .9; }
}
.sb-streak { margin-left: auto; font-size: 11px; font-weight: 850; color: #b45309; }
@media (prefers-reduced-motion: reduce) {
  .ptoast, .ptoast-ic, .pceleb, .pceleb-emoji, .procket, .confetti { animation: none !important; }
}
/* Конфетти при закрытии задачи */
.confetti { position: fixed; z-index: 9999; width: 7px; height: 10px; border-radius: 2px; pointer-events: none; animation: confettiFly .9s ease-out forwards; }
@keyframes confettiFly { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 170px)) rotate(var(--r)); } }
/* Каталог экспертов фабрики (модалка «Эксперты» из Служебного) */
.exf-panel { max-height: 84vh; display: flex; flex-direction: column; }
.exf-list { overflow-y: auto; padding-right: 4px; }
.exf-group { margin-bottom: 16px; }
.exf-group-title { font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin: 0 0 7px 2px; }
.exf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.exf-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.66); padding: 9px 10px; min-width: 0; }
.exf-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; line-height: 1; }
.exf-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.exf-name { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exf-name code { font-size: 10px; color: var(--muted2); background: rgba(15,23,42,.05); padding: 1px 5px; border-radius: 5px; }
.exf-w { font-size: 9px; letter-spacing: 1px; color: #b45309; }
.exf-hint { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.exf-char { font-size: 11.5px; color: var(--text); line-height: 1.35; font-style: italic; }
.exf-mood { font-size: 11px; color: var(--muted2); }
/* Дашборд: чипы фильтра по проектам (рядом со статусными, отделены разделителем) */
.flt-sep { display: inline-block; width: 1px; height: 18px; background: var(--line2); margin: 0 6px; vertical-align: middle; align-self: center; }
.flt-chip b { font-weight: 850; opacity: .65; margin-left: 3px; }
/* Дашборд: колонка статуса — точка+название в строку, приоритет ниже */
.fdash-status { width: 116px; }
.fdash-table .fdash-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.fdash-table .fdash-st .dot-st { flex: 0 0 auto; }
.fdash-table .fdash-status .r-prio { display: inline-block; margin-top: 4px; }
/* Цитата-ответ: кликабельна, ведёт к исходному сообщению; подсветка после перехода */
.msg-quote[data-jump] { cursor: pointer; }
.msg-quote[data-jump]:hover { background: rgba(59,130,246,.10); }
.msg-jump-flash { animation: msgJumpFlash 1.8s ease; }
@keyframes msgJumpFlash {
  0%, 35% { background: rgba(245,158,11,.22); border-radius: 10px; }
  100% { background: transparent; }
}
/* Правила игры в модалке (карточка из чата убрана, открывается значком «§ Правила») */
.rules-list-modal { margin: 10px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; max-height: 62vh; overflow: auto; font-size: 13px; line-height: 1.5; }
/* Кнопка «+ Задача» на доске задач */
.art-add-task { margin-left: auto; align-self: end; }
/* Дашборд: блок «Вопросы овнеру» над таблицей тем (все проекты, с темой) */
.fdash-questions { margin-bottom: 14px; border: 1px solid rgba(180,83,9,.28); border-radius: var(--r2); background: rgba(255,251,235,.85); box-shadow: var(--shadow); overflow: hidden; }
.fdq-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 12.5px; font-weight: 850; color: #92400e; border-bottom: 1px solid rgba(180,83,9,.16); }
.fdash-questions.is-empty .fdq-head { border-bottom: none; }
.fdq-all { margin-left: auto; font-size: 11.5px; font-weight: 850; color: #92400e; text-decoration: none; white-space: nowrap; }
.fdq-all:hover { text-decoration: underline; }
.fdq-count.is-zero { background: rgba(15,23,42,.25); }
.fdq-head small { font-weight: 700; color: rgba(146,64,14,.75); margin-left: 6px; }
.fdq-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #b45309; color: #fff; font-size: 11px; font-weight: 900; vertical-align: -3px; margin-left: 2px; }
.fdq-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(180,83,9,.12); text-decoration: none; color: var(--text); }
.fdq-item:last-child { border-bottom: none; }
.fdq-item:hover { background: rgba(180,83,9,.06); }
.fdq-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(180,83,9,.14); color: #92400e; font-weight: 900; font-size: 14px; }
.fdq-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.fdq-body { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdq-meta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdq-meta b { color: var(--text); font-weight: 800; }
.fdq-go { flex: 0 0 auto; font-size: 11.5px; font-weight: 850; color: #92400e; white-space: nowrap; }
/* Пункт «Дашборд» над списком проектов */
.sb-home { margin: 2px 0 0; }
/* Заголовки блоков внутри дерева проекта (Сигналы / Ресурсы / Производство / Управление) */
.sb-child-group { margin: 8px 4px 2px 11px; font-size: 9.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; color: var(--muted2); }
/* Совещания: повестки/протоколы/заметки (упрощённый раздел проекта) */
.ws-meet-group { margin-bottom: 14px; }
.ws-meet-group:last-child { margin-bottom: 0; }
.ws-meet-group-title { font-size: 10.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); margin: 0 0 6px 2px; }
.ws-kind.ws-meet-agenda { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.25); }
.ws-kind.ws-meet-protocol { background: rgba(15,181,164,.12); color: #0b7d70; border-color: rgba(15,181,164,.25); }
.ws-kind.ws-meet-note { background: rgba(15,23,42,.05); color: var(--muted); }
.ws-meet-date { font-size: 11px; font-weight: 800; color: var(--muted2); font-variant-numeric: tabular-nums; }
.ws-meet-body { white-space: pre-wrap; }
.fdash-wrap { border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); box-shadow: var(--shadow); overflow-x: auto; }
.fdash-table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.fdash-table th, .fdash-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fdash-table th { color: var(--muted2); font-size: 10.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; background: rgba(248,250,252,.78); }
.fdash-table tbody tr:last-child td { border-bottom: none; }
.fdash-row { cursor: pointer; }
.fdash-row:hover { background: rgba(59,130,246,.045); }
.fdash-topic { width: 32%; min-width: 0; }
.fdash-topic a { display: block; color: var(--text); font-size: 13.5px; font-weight: 850; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdash-topic span { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdash-num { width: 76px; color: var(--text); font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; }
.fdash-num small, .fdash-last span { display: block; margin-top: 2px; color: var(--muted2); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.fdash-last { width: 92px; font-variant-numeric: tabular-nums; }
.fdash-last strong { display: block; color: var(--text); font-size: 12.5px; }
.fdash-table .r-status { display: inline-flex; min-width: 92px; margin-right: 6px; }
.fdash-table .r-prod { max-width: 150px; }

/* ---------- Штаб: пикер экспертов — сетка, фикс перебивки .create-form label ---------- */
.fe-groups .fe-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.fe-groups .fe-chip { display: flex; flex-direction: row; align-items: center; gap: 8px; border-radius: var(--r); padding: 6px 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fe-groups .fe-chip .fe-badge { flex: 0 0 auto; }
.fe-groups .fe-chip .fe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* группа «Команда разработки» — отдельный цвет бейджей/заголовка */
.fg-development { --gc: #d6336c; }

/* ---------- Штаб: промпт эксперта для AI-чата ---------- */
.council-member .cm-prompt { width: 22px; height: 22px; border: none; background: transparent; color: var(--muted2); cursor: pointer; font-size: 13px; line-height: 1; border-radius: 5px; flex: 0 0 auto; opacity: .55; }
.council-member:hover .cm-prompt { opacity: 1; }
.council-member .cm-prompt:hover { color: var(--blue); background: rgba(59,130,246,.1); }
.prompt-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
.prompt-text { width: 100%; box-sizing: border-box; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); border-radius: var(--r); padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; outline: none; resize: vertical; }
.prompt-text:focus { border-color: rgba(15,181,164,.4); }
.prompt-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.prompt-feedback { font-size: 12.5px; font-weight: 700; color: var(--green); }

/* ======================================================================
   RoadMap
   ====================================================================== */

.rm-page-content { padding: 14px 16px 60px; }
.rm-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Scrollable wrapper */
.rm-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.rm-loading { padding: 40px; text-align: center; color: var(--muted2); font-size: 13.5px; }
.rm-error { color: var(--red); }

/* ---- Table ---- */
/* table-layout:fixed + width:100% → колонки заполняют ширину страницы.
   Имя-проект: 30%, статусы (13 шт): каждый 5%, прогресс: 5%. Итого 100% */
.rm-tbl {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 12.5px;
  table-layout: fixed;
  width: 100%;
}
.rm-tbl th, .rm-tbl td { border-bottom: 1px solid var(--line); vertical-align: middle; padding: 0; }
.rm-tbl tbody tr:last-child td { border-bottom: none; }

/* ---- Header row ---- */
.rm-head-row th {
  background: var(--panel2);
  border-bottom: 1px solid var(--line2);
  padding: 7px 4px 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted2);
  overflow: hidden;
}

/* Name column: 30% */
.rm-col-name {
  width: 30%;
  position: sticky; left: 0; z-index: 3;
  background: var(--panel2);
  padding: 7px 12px !important;
  border-right: 1px solid var(--line2);
  text-align: left !important;
}

/* Stage columns: 5% each (70% / 14 = 5%) */
.rm-hdr {
  width: 5%;
  text-align: center; cursor: default; user-select: none;
  overflow: hidden;
}
.rm-hdr-n { display: block; font-size: 11px; font-weight: 800; color: var(--muted); line-height: 1.2; }
.rm-hdr-label {
  display: block; font-size: 9px; font-weight: 700; color: var(--muted2);
  overflow: hidden; text-overflow: ellipsis;
  text-transform: none; letter-spacing: 0; line-height: 1.3;
}

/* Progress column: 5% */
.rm-col-prog { width: 5%; text-align: center; padding: 7px 4px !important; }

/* ---- Group separator ---- */
.rm-group-row td { padding: 0 !important; border-bottom: none; }
.rm-group-cell {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted2); padding: 7px 12px 4px !important;
  background: rgba(15,23,42,.02);
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ---- Product rows ---- */
.rm-row:hover { background: rgba(15,23,42,.025); }
.rm-row:hover .rm-td-name { background: rgba(246,248,251,.96); }

/* Sticky name cell */
.rm-td-name {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel);
  padding: 8px 12px !important;
  border-right: 1px solid var(--line2);
  display: flex; align-items: center; gap: 7px;
  overflow: hidden;
  transition: background .1s;
}
.rm-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.rm-name:hover { color: var(--blue); text-decoration: underline; }
.rm-tag {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--line2); border-radius: 999px; padding: 1px 6px;
  flex: 0 0 auto;
}

/* Stage cells */
.rm-cell { text-align: center; cursor: pointer; padding: 7px 0 !important; transition: background .1s; }
.rm-cell:hover { background: rgba(15,181,164,.07); }
.rm-cell:active { background: rgba(15,181,164,.15); }

.rm-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line2);
  background: rgba(15,23,42,.025);
  font-size: 10px; font-weight: 900; color: transparent;
  transition: all .14s ease; line-height: 1;
  vertical-align: middle; user-select: none;
}
.rm-dot.rm-done {
  background: rgba(15,181,164,.16);
  border-color: rgba(15,181,164,.55);
  color: var(--mint);
  box-shadow: 0 0 0 2px rgba(15,181,164,.12);
}

/* Progress cell */
.rm-td-prog { padding: 7px 6px !important; overflow: hidden; }
.rm-bar-wrap { display: flex; align-items: center; gap: 4px; }
.rm-bar-track { flex: 1; min-width: 0; height: 4px; border-radius: 999px; background: rgba(100,116,139,.14); overflow: hidden; }
.rm-bar-fill { height: 100%; border-radius: 999px; transition: width .2s ease; }
.rmb-green { background: linear-gradient(90deg, var(--mint), var(--green)); }
.rmb-blue  { background: linear-gradient(90deg, var(--blue), var(--violet)); }
.rmb-amber { background: var(--amber); }
.rmb-rose  { background: var(--rose); }
.rm-pct { font-size: 10px; color: var(--muted2); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }

/* ---- Summary row ---- */
.rm-summary-row td { background: var(--panel2); border-top: 2px solid var(--line2) !important; padding: 6px 0 !important; }
.rm-sum-name {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel2);
  padding: 6px 12px !important;
  border-right: 1px solid var(--line2) !important;
  font-size: 12px; font-weight: 800; color: var(--muted);
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.rm-sum-all { font-size: 11px; color: var(--muted2); font-weight: 600; }
.rm-sum-cell { text-align: center; font-size: 10px; font-weight: 800; padding: 6px 0 !important; cursor: default; }
.rm-sum-full { color: #1a7d44; }
.rm-sum-hi   { color: #0b7d70; }
.rm-sum-mid  { color: #b3791a; }
.rm-sum-lo   { color: var(--muted2); }
.rm-sum-pct  { text-align: center; font-size: 10px; font-weight: 800; color: var(--muted); padding: 6px 4px !important; }

/* ====== Mobile ======
   На телефоне переключаемся на фиксированные пиксельные ширины,
   таблица шире вьюпорта — враппер скроллит горизонтально.
   Итого: 148 + 13×30 + 48 = 586px (комфортно на 375px+) */
@media (max-width: 860px) {
  .rm-page-content { padding: 8px 8px 60px; }
  .rm-toolbar-right { gap: 6px; }
  .rm-tbl { table-layout: fixed; width: auto; }
  .rm-col-name, .rm-td-name { width: 148px; min-width: 148px; }
  .rm-hdr  { width: 30px; min-width: 30px; }
  .rm-col-prog { width: 48px; min-width: 48px; }
  .rm-hdr-label { display: none; }     /* убираем текст, оставляем только цифру */
  .rm-tag { display: none; }
  .rm-dot { width: 18px; height: 18px; font-size: 9px; }
  .rm-pct { font-size: 9px; }
  .rm-bar-track { min-width: 12px; }
}

/* На очень маленьких (≤ 420px) чуть компактнее */
@media (max-width: 420px) {
  .rm-col-name, .rm-td-name { width: 120px; min-width: 120px; }
  .rm-hdr { width: 26px; min-width: 26px; }
  .rm-col-prog { width: 38px; min-width: 38px; }
  .rm-dot { width: 16px; height: 16px; }
  .rm-pct { display: none; }   /* скрыть % совсем, оставить только бар */
}

/* ---------- Глобальный прогресс-бар загрузки (вверху страницы) ---------- */
.topbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--mint), var(--blue) 55%, var(--violet));
  z-index: 9999; border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(15,181,164,.55);
  opacity: 1; pointer-events: none;
  transition: width .28s ease, opacity .28s ease;
}

/* ---------- Штаб: статусы экспертов и действия в составе ---------- */
.council-member { gap: 6px; }
.cm-status { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-status.free { color: var(--muted2); background: transparent; border: none; padding: 0 2px; }
.cm-status.claimed { color: #1a7d44; background: rgba(31,168,86,.13); border: 1px solid rgba(31,168,86,.4); }
.cm-status.paused { color: #b3791a; background: rgba(217,138,31,.13); border: 1px solid rgba(217,138,31,.4); }
.council-member .cm-act { width: 22px; height: 22px; border: none; background: transparent; color: var(--muted2); cursor: pointer; font-size: 12px; line-height: 1; border-radius: 5px; flex: 0 0 auto; opacity: .55; padding: 0; }
.council-member:hover .cm-act { opacity: 1; }
.council-member .cm-act:hover { color: var(--text); background: rgba(15,23,42,.06); }
.council-member .cm-act.cm-prompt:hover { color: var(--blue); background: rgba(59,130,246,.1); }
.council-member.cms-paused { opacity: .6; }

/* ---------- Штаб: тема — фиксированный лэйаут, скролл только в чате ---------- */
/* Гейтим от планшета и выше; на узких телефонах (≤768) — обычный скролл (виртуальная клавиатура). */
@media (min-width: 769px) {
  body.room-page { height: 100%; overflow: hidden; }
  .room-page .app { height: 100vh; min-height: 0; }
  .room-page .main { height: 100vh; min-height: 0; overflow: hidden; }
  .room-page .room { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 16px 22px 18px; }
  .room-page .room-head { flex: 0 0 auto; margin-bottom: 12px; }
  .room-page .room-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-auto-rows: minmax(0, 1fr); }
  .room-page .room-col-chat { min-height: 0; }
  .room-page .room-col-rail { position: static; top: auto; min-height: 0; max-height: 100%; overflow-y: auto; }
  .room-page .chat { height: 100%; min-height: 0; }
  .room-page .chat-log { flex: 1 1 auto; min-height: 0; max-height: none; }
  .room-page .composer { flex: 0 0 auto; }
}

/* ---------- Штаб: статус роли цветным кружком ---------- */
.cm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--muted2); }
.cm-dot-claimed { background: var(--green); box-shadow: 0 0 0 2px rgba(31,168,86,.18); }
.cm-dot-paused { background: var(--muted2); }
.cm-dot-free { background: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.20); }
.cm-assignee { font-size: 10.5px; font-weight: 700; color: #1a7d44; flex: 0 0 auto; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.council-legend { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 10.5px; color: var(--muted2); margin: -2px 0 10px; }
.council-legend .cm-dot { margin-left: 8px; }
.council-legend .cm-dot:first-child { margin-left: 0; }

/* ---------- Штаб: загрузчик темы (видимый прогресс вместо голого текста) ---------- */
.room-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 90px 22px; min-height: 240px; flex: 1 1 auto; }
.room-loading-bar { width: 240px; max-width: 60%; height: 4px; border-radius: 999px; background: rgba(15,23,42,.08); overflow: hidden; position: relative; }
.room-loading-bar::before { content: ""; position: absolute; top: 0; left: -40%; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--blue)); animation: roomload 1.1s ease-in-out infinite; }
@keyframes roomload { 0% { left: -42%; } 100% { left: 102%; } }

/* ---------- Глобальные Задачи/Материалы ---------- */
.art-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.art-controls .ctl { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.art-row { display: grid; grid-template-columns: 1fr 160px 230px 22px 56px; align-items: center; gap: 12px; cursor: pointer; }
.art-row .r-title { font-size: 13.5px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-title-cell { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.material-title-cell .art-title-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.material-title-cell .art-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted2); font-size: 11.5px; font-weight: 500; }
.art-row .r-prod { font-size: 11px; font-weight: 700; color: #2f6fe0; border: 1px solid rgba(59,130,246,.4); background: rgba(59,130,246,.08); border-radius: 999px; padding: 2px 9px; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-row .r-prod.is-general { color: var(--muted2); border-color: var(--line2); background: transparent; }
.art-row .r-topic { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-row .r-topic:hover { color: var(--blue); text-decoration: underline; }
.art-row .row-open { color: var(--blue); text-align: center; font-size: 14px; }
.art-row .row-open:hover { color: #2f6fe0; }
.art-row .row-open-empty { width: 22px; }
.art-row .r-when { font-size: 11.5px; color: var(--muted2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .art-row { grid-template-columns: 1fr 104px 52px; }
  .art-row .r-topic, .art-row .row-open, .art-row .row-open-empty { display: none; }
}

/* ---------- Штаб: счётчики/статистика ---------- */
.flow-row .r-stats { font-size: 11.5px; color: var(--muted2); flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.room-stats { font-size: 12px; color: var(--muted2); white-space: nowrap; }
@media (max-width: 760px) { .flow-row .r-stats { display: none; } }

/* ---------- Штаб: ответ на сообщение (как в Telegram) ---------- */
.msg-quote { border-left: 2px solid var(--blue); padding: 2px 8px; margin-bottom: 5px; font-size: 12px; color: var(--muted); background: rgba(59,130,246,.06); border-radius: 0 6px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote strong { color: var(--text); font-weight: 700; margin-right: 4px; }
.composer-reply { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); border-radius: var(--r); font-size: 12.5px; color: var(--muted); }
.composer-reply .cr-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-reply .cr-text strong { color: var(--text); }
.composer-reply .cr-cancel { border: none; background: transparent; color: var(--muted2); cursor: pointer; font-size: 16px; line-height: 1; border-radius: 5px; flex: 0 0 auto; padding: 0 4px; }
.composer-reply .cr-cancel:hover { color: var(--red); background: rgba(239,95,84,.1); }

/* ---------- Штаб: статусы задач + попап задачи ---------- */
.fts { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 7px; border: 1px solid; white-space: nowrap; display: inline-block; }
.fts-backlog { color: var(--muted); border-color: var(--line2); background: rgba(15,23,42,.04); }
.fts-progress { color: #b3791a; border-color: rgba(217,138,31,.42); background: rgba(217,138,31,.13); }
.fts-review { color: #6d49c9; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.10); }
.fts-todo { color: #2563c4; border-color: rgba(59,130,246,.42); background: rgba(59,130,246,.11); }
.fts-done { color: #1a7d44; border-color: rgba(31,168,86,.45); background: rgba(31,168,86,.13); }
.art-item .fts { margin-right: 6px; vertical-align: middle; }
.task-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fts-step { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 999px; }
.fts-step:hover { color: var(--text); }
.fts-step.on { color: #fff; border-color: transparent; }
.fts-step.on.fts-backlog { background: var(--muted2); }
.fts-step.on.fts-todo { background: var(--blue); }
.fts-step.on.fts-progress { background: var(--amber); }
.fts-step.on.fts-review { background: var(--violet); }
.fts-step.on.fts-done { background: var(--green); }

/* ---------- Доска задач (Kanban) ---------- */
.kboard { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.kcol { flex: 1 1 0; min-width: 178px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.kcol-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-weight: 800; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.kcol-head .kcol-n { margin-left: auto; color: var(--muted2); font-weight: 800; font-size: 12px; background: rgba(15,23,42,.05); border-radius: 999px; padding: 0 7px; }
.kdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted2); }
.kdot.fts-todo { background: var(--blue); } .kdot.fts-progress { background: var(--amber); }
.kdot.fts-review { background: var(--violet); } .kdot.fts-done { background: var(--green); }
.kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 56px; flex: 1 1 auto; }
.kcol-body.over { background: rgba(15,181,164,.07); border-radius: 0 0 12px 12px; }
.kcol-empty { color: var(--muted2); text-align: center; font-size: 12px; padding: 10px 0; }
.kcard { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; min-width: 0; }
.kcard:hover { border-color: var(--line3, #d5dae3); }
.kcard.dragging { opacity: .45; }
.card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: hsl(var(--lh), 55%, 34%); background: hsl(var(--lh), 70%, 94%); border: 1px solid hsl(var(--lh), 60%, 82%); }
/* длинные токены без пробелов (route/guard/demo-live, Linking.getInitialURL(), 390x844) рвём по любому символу — иначе вылезают за карточку */
.card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.card-proj { font-size: 10.5px; font-weight: 800; color: var(--muted); background: rgba(15,23,42,.05); border-radius: 5px; padding: 1px 6px; }
.card-topic { font-size: 11px; color: var(--muted2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.card-topic:hover { color: var(--mint); }
.card-meta { display: flex; align-items: center; gap: 9px; margin-top: 6px; color: var(--muted2); font-size: 11px; }
.card-mi { display: inline-flex; align-items: center; gap: 3px; }
.card-mi svg { width: 13px; height: 13px; }
.card-due { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.card-due.due-soon { color: var(--amber); }
.card-due.due-over { color: var(--red); }
.card-asg-wrap { margin-left: auto; display: inline-flex; }
.asg-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 800; letter-spacing: -.02em;
  color: hsl(var(--lh), 50%, 30%); background: hsl(var(--lh), 62%, 90%); border: 1px solid hsl(var(--lh), 55%, 80%); }

/* карточка задачи: две колонки + секции */
.task-grid { display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: start; }
.task-col-main { min-width: 0; }
.task-col-side { display: flex; flex-direction: column; gap: 14px; }
.task-side-b { display: flex; flex-direction: column; gap: 5px; }
.task-side-l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.task-sec { margin-top: 16px; }
.task-sec-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); margin-bottom: 7px; }
.task-add-row { display: flex; gap: 6px; margin-top: 7px; }
.task-inp { border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 13px; outline: none; min-width: 0; }
.task-inp:focus { border-color: rgba(15,181,164,.45); }
.task-add-row .task-inp { flex: 1 1 auto; }
.task-comment-inp { resize: vertical; flex: 1 1 auto; min-height: 64px; line-height: 1.4; }
.task-sec .task-add-row { align-items: flex-end; }
.task-image-list { margin-top: 7px; }
.task-img-chip { max-width: 270px; }
.task-img-thumb { width: 54px; height: 42px; }
.task-comment-media { margin-top: 6px; }
.task-comment-img img { max-width: 180px; max-height: 160px; }
.task-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.lbl-x, .cr-x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 2px; opacity: .6; }
.lbl-x:hover, .cr-x:hover { opacity: 1; }
.task-commits { display: flex; flex-direction: column; gap: 5px; }
.commit-ref { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg2); font-size: 12.5px; }
.commit-ref code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--violet); background: rgba(124,92,255,.08); padding: 0 5px; border-radius: 4px; }
.cr-repo { color: var(--muted); font-weight: 700; }
.commit-ref .cr-x { margin-left: auto; }
.task-comments { display: flex; flex-direction: column; gap: 9px; max-height: 240px; overflow-y: auto; }
.cmt { border-left: 2px solid var(--line2); padding-left: 9px; }
.cmt-h { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.cmt-h strong { color: var(--text); } .cmt-h span { color: var(--muted2); font-size: 11px; }
.cmt-b { font-size: 13px; color: var(--muted); white-space: pre-wrap; margin-top: 2px; }
.muted-i { color: var(--muted2); font-size: 12px; }
.btn-ghost { border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 7px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-ghost:hover { border-color: var(--mint); color: var(--mint); }
@media (max-width: 720px) { .task-grid { grid-template-columns: 1fr; } .kcol { min-width: 200px; } }
.fts-arrow { color: var(--muted2); font-size: 12px; }

/* ---------- Work projects ---------- */
.ws-layout {
  display: block;
}
.ws-index {
  display: none;
}
.ws-index-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 32px;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--muted);
}
.ws-index-row:hover { background: rgba(15,23,42,.035); color: var(--text); }
.ws-index-row.active { background: rgba(255,255,255,.74); border-color: var(--line2); color: var(--text); box-shadow: var(--shadow); }
.ws-color {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ws-color, var(--mint));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-color, var(--mint)) 18%, transparent);
}
.ws-ir-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-ir-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ws-ir-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted2); }
.ws-ir-count {
  min-width: 24px;
  justify-self: end;
  text-align: center;
  border-radius: 999px;
  padding: 1px 7px;
  background: rgba(15,23,42,.06);
  color: var(--muted2);
  font-size: 11px;
  font-weight: 800;
}
.ws-detail { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ws-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.ws-head-main { min-width: 0; }
.ws-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted2);
  font-size: 11.5px;
  font-weight: 750;
  margin-bottom: 5px;
}
.ws-head h2 { margin: 0 0 5px; font-size: 24px; line-height: 1.15; letter-spacing: 0; }
.ws-head p { margin: 0; color: var(--muted); max-width: 900px; }
.ws-head-links { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ws-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 8px;
}
.ws-stat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  padding: 9px 10px;
  min-height: 52px;
}
.ws-stat strong { display: block; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; }
.ws-stat span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); font-weight: 750; }
.ws-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.ws-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r);
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.ws-tab:hover { color: var(--text); background: rgba(15,23,42,.035); }
.ws-tab.active { color: var(--text); border-color: var(--line2); background: var(--panel); box-shadow: var(--shadow); }
.ws-tab-panel { display: flex; flex-direction: column; gap: 14px; }
.ws-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ws-section {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  padding: 12px;
  min-width: 0;
}
.ws-wide { grid-column: 1 / -1; }
.ws-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ws-section h3, .ws-three h4 { margin: 0; font-size: 13px; font-weight: 850; letter-spacing: 0; }
.ws-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ws-add { padding: 5px 9px; }
.ws-passport {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ws-passport > div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.62);
  padding: 8px 9px;
  min-width: 0;
}
.ws-passport span { display: block; font-size: 10.5px; font-weight: 850; text-transform: uppercase; color: var(--muted2); margin-bottom: 3px; }
.ws-passport strong, .ws-passport a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ws-passport a { color: var(--blue); font-weight: 800; }
.ws-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ws-three > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.ws-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ws-inline-form textarea, .ws-inline-form .btn-primary { grid-column: 1 / -1; }
.ws-form input, .ws-form textarea, .ws-form select {
  width: 100%;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  border-radius: var(--r);
  padding: 8px 9px;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.ws-form input:focus, .ws-form textarea:focus, .ws-form select:focus { border-color: rgba(15,181,164,.45); }
.ws-readonly {
  width: 100%;
  border: 1px solid var(--line2);
  background: rgba(15,23,42,.035);
  color: var(--muted);
  border-radius: var(--r);
  padding: 8px 9px;
  font-size: 12.5px;
  font-weight: 800;
}
.ws-collapsible {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.5);
  padding: 10px 12px;
}
.ws-collapsible summary { cursor: pointer; font-weight: 800; color: var(--muted); }
.ws-collapsible .ws-form { margin: 12px 0 0; }
.ws-item {
  border-top: 1px solid var(--line);
  padding: 10px 0;
  min-width: 0;
}
.ws-item:first-of-type { border-top: 0; padding-top: 0; }
.ws-item:last-child { padding-bottom: 0; }
.ws-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ws-item-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ws-kind {
  flex: 0 0 auto;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  background: rgba(15,23,42,.035);
  font-size: 10.5px;
  font-weight: 850;
}
.ws-open { flex: 0 0 auto; color: var(--blue); font-weight: 850; }
.ws-secret, .ws-code-line, .ws-refs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
  align-items: center;
}
.ws-secret code, .ws-code-line code, .ws-mini-row code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: rgba(15,23,42,.06);
  border-radius: 5px;
  padding: 2px 5px;
}
.ws-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.ws-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  background: rgba(255,255,255,.7);
  font-size: 11.5px;
  font-weight: 700;
}
.ws-attach-field {
  border: 1px dashed var(--line2);
  border-radius: var(--r);
  background: rgba(15,23,42,.025);
  padding: 9px;
}
.ws-attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.ws-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
}
.ws-attach-btn .ic { width: 15px; height: 15px; }
.ws-attach-link {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(140px, .75fr) auto;
  gap: 6px;
  margin-top: 8px;
}
.ws-attach-link .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
}
.ws-attach-link .ic { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .ws-attach-link { grid-template-columns: 1fr; }
  .ws-attach-link .btn-ghost { width: 100%; }
}
.ws-object-att { margin-top: 8px; }
.modal.drag-over .modal-panel {
  outline: 2px dashed rgba(59,130,246,.55);
  outline-offset: -6px;
}
.ws-att-view {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}
.ws-att-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ws-att-img {
  display: block;
  width: 86px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
}
.ws-att-img:hover { border-color: rgba(59,130,246,.45); }
.ws-att-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-att-file { max-width: 360px; }
.ws-refs span { color: var(--muted2); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ws-road-status {
  flex: 0 0 auto;
  width: 112px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--panel);
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.ws-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.ws-member:first-of-type { border-top: 0; }
.ws-member span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-member strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-member small { color: var(--muted2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.ws-member-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px 94px 104px; align-items: center; }
.ws-user-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
.ws-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.ws-check input { width: auto; }
/* В модалке доступа .create-form label рисует колонку и перебивает .ws-check — возвращаем строку */
.create-form label.ws-check { flex-direction: row; align-items: center; gap: 8px; }
.create-form label.ws-check input { width: 15px; height: 15px; padding: 0; margin: 0; flex: 0 0 auto; }
.ws-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ws-board-col {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(15,23,42,.025);
  padding: 9px;
}
.ws-board-col h4 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 850;
  color: var(--muted);
}
.ws-access-matrix {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(5, minmax(74px, .7fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 8px;
}
.ws-access-matrix > div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-access-matrix > div:nth-child(6n) { border-right: 0; }
.ws-access-matrix > div:nth-last-child(-n+6) { border-bottom: 0; }
.ws-access-head { background: rgba(15,23,42,.045); color: var(--muted2); font-weight: 850; }
.ws-access-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 850;
}
.ws-access-dot.yes { color: #0b7d70; background: rgba(15,181,164,.12); }
.ws-access-dot.no { color: var(--muted2); background: rgba(15,23,42,.05); }
.ws-access-summary, .ua-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ws-access-summary > div, .ua-kpis > div {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.62);
  padding: 9px 10px;
  min-width: 0;
}
.ws-access-summary strong, .ua-kpis strong {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ws-access-summary span, .ua-kpis span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
}
.ws-access-list { display: flex; flex-direction: column; gap: 7px; }
/* Двойной класс — чтобы перебить .ws-member (display:flex) и .ws-member span (флекс-колонка) */
.ws-member.ws-member-rich {
  display: grid;
  /* каждому праву — свой столбец: галочки выравниваются колонками у всех участников */
  grid-template-columns: 34px minmax(0, 1fr) repeat(4, 92px) auto;
  gap: 0 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.66);
  padding: 8px;
}
.ws-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(59,130,246,.12);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  flex: 0 0 auto;
}
.ws-member-rich span.ws-member-avatar { align-self: center; }
.ws-member-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-member-rich span.ws-row-actions { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end; }
/* Право участника: своя колонка, галочка + название одной строкой (✓ есть / – нет).
   data-cap = кликабельно (правится налету), .lock = только индикатор. */
.ws-member-rich span.ws-capcheck, .ws-capcheck {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 7px;
}
.ws-capcheck[data-cap] { cursor: pointer; }
.ws-capcheck[data-cap]:hover { background: rgba(15,23,42,.06); }
.ws-capcheck.lock { opacity: .72; }
.ws-capcheck .ck {
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 900; line-height: 1;
}
.ws-capcheck.on { color: #0b7d70; }
.ws-capcheck.on .ck { background: rgba(15,181,164,.14); border: 1px solid rgba(15,181,164,.28); color: #0b7d70; }
.ws-capcheck.off { color: var(--muted2); }
.ws-capcheck.off .ck { background: rgba(15,23,42,.04); border: 1px solid var(--line); color: var(--muted2); }
.ws-member-caps { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ws-member-caps b {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15,23,42,.035);
  color: var(--muted2);
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 850;
}
.ws-member-caps b.on {
  color: #0b7d70;
  border-color: rgba(15,181,164,.24);
  background: rgba(15,181,164,.10);
}
.users-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ua-intro {
  margin: -2px 0 0;
  color: var(--muted);
  max-width: 760px;
}
.ua-tools { display: flex; justify-content: flex-end; }
.ua-tools .fc-search { width: min(420px, 100%); }
.ua-tablewrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.ua-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12.5px;
}
.ua-table th:nth-child(1) { width: 22%; }
.ua-table th:nth-child(2) { width: 13%; }
.ua-table th:nth-child(3) { width: 10%; }
.ua-table th:nth-child(4) { width: 38%; }
.ua-table th:nth-child(5) { width: 9%; }
.ua-table th:nth-child(6) { width: 76px; }
.ua-table th,
.ua-table td {
  height: 46px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  background: var(--panel);
}
.ua-table th {
  height: 34px;
  color: var(--muted2);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(248,250,252,.78);
}
.ua-table tbody tr:last-child td { border-bottom: 0; }
.ua-table tbody tr { cursor: pointer; }
.ua-table tbody tr:hover td { background: rgba(59,130,246,.04); }
.ua-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ua-who {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ua-who strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ua-td-projects { max-width: 360px; }
.ua-td-actions { white-space: nowrap; text-align: right; }
.ua-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.ua-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.68);
  padding: 10px;
  min-width: 0;
}
.ua-top {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}
.ua-person { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ua-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ua-person small { color: var(--muted2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-actions { display: flex; gap: 4px; }
.ua-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0;
}
.ua-meta span, .ua-empty {
  border-radius: 999px;
  background: rgba(15,23,42,.055);
  color: var(--muted2);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}
.ua-projects { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  padding: 4px 8px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
}
.ua-project span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ua-project b {
  flex: 0 0 auto;
  color: var(--muted2);
  font-size: 10px;
  font-weight: 900;
}
.ws-digest {
  width: 100%;
  min-height: 360px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.ws-mini-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  padding: 7px 8px;
}
.ws-mini-row:hover { border-color: var(--line2); background: var(--panel); }
.ws-mini-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.ws-mini-row span { color: var(--muted2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-empty { padding: 14px; }

@media (max-width: 1100px) {
  .ws-stats { grid-template-columns: repeat(3, minmax(86px, 1fr)); }
}
@media (max-width: 760px) {
  .ws-head { flex-direction: column; }
  .ws-head-links { justify-content: flex-start; }
  .ws-grid, .ws-three, .ws-index, .ws-inline-form, .ws-user-form, .ws-member-form, .ws-passport { grid-template-columns: 1fr; }
  .ws-access-matrix { grid-template-columns: minmax(130px, 1.2fr) repeat(5, minmax(66px, .7fr)); overflow-x: auto; }
  .ws-access-summary, .ua-kpis, .ua-grid { grid-template-columns: 1fr; }
  .ua-tablewrap { overflow: visible; }
  .ua-table,
  .ua-table tbody { display: block; min-width: 0; }
  .ua-table thead { display: none; }
  .ua-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .ua-table tr:last-child { border-bottom: 0; }
  .ua-table td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .ua-table tbody tr:hover td { background: transparent; }
  .ua-table .ua-td-who { flex: 1 1 auto; }
  .ua-table .ua-td-actions { margin-left: auto; }
  .ua-table .ua-td-projects { flex: 1 1 100%; max-width: none; }
  .ws-member.ws-member-rich { display: flex; flex-wrap: wrap; gap: 6px 10px; }
  .ws-member-rich .ws-member-main { flex: 1 1 60%; }
  .ws-member-caps { grid-column: 1 / -1; justify-content: flex-start; padding-left: 42px; }
  .ws-stats { grid-template-columns: repeat(2, minmax(86px, 1fr)); }
}
.task-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 14px; }
.task-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-meta span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.task-meta strong, .task-meta a { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta a { color: var(--blue); }
.task-meta a:hover { text-decoration: underline; }
.task-desc-label { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); margin-bottom: 5px; }
.material-url-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.material-url-box code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; }
.material-open { text-decoration: none; display: inline-flex; align-items: center; }
.material-modal .modal-panel.modal-wide { width: min(760px, calc(100vw - 32px)); }
.material-modal .modal-head { margin-bottom: 10px; }
.material-modal .modal-head h2 { font-size: 16px; font-weight: 750; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.material-grid { grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; }
.material-body { border: 1px solid var(--line); background: rgba(248,250,252,.78); border-radius: var(--r); padding: 10px 12px; min-height: 72px; max-height: min(52vh, 460px); overflow: auto; color: var(--text); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.material-meta { grid-template-columns: 1fr; margin-bottom: 0; }

/* ---------- Мобилка/перенос: длинные URL рвём, grid не распирает экран ---------- */
.msg-text { overflow-wrap: anywhere; }
.chat-log { overflow-x: hidden; }
.room-grid { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1200px) { .room-grid { grid-template-columns: minmax(0, 1fr); } }
.msg-quote { overflow-wrap: anywhere; white-space: normal; }

/* ---------- Штаб: догрузка ранних сообщений ---------- */
.chat-earlier { display: block; width: 100%; border: 1px dashed var(--line2); background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 8px; border-radius: var(--r); margin-bottom: 10px; }
.chat-earlier:hover { color: var(--text); background: rgba(15,23,42,.03); }

/* ---------- Штаб: тема — фикс-лэйаут на всех экранах (Telegram-style) ---------- */
body.room-page { height: 100%; overflow: hidden; }
.room-page .app { height: 100vh; height: 100dvh; min-height: 0; }
.room-page .main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.room-page .room { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 12px 16px; }
.room-page .room-head { flex: 0 0 auto; margin-bottom: 6px; }
.room-page .room-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-auto-rows: minmax(0, 1fr); }
.room-page .room-col-chat { min-height: 0; }
.room-page .room-col-rail { position: static; top: auto; min-height: 0; max-height: 100%; overflow-y: auto; }
.room-page .chat { height: 100%; min-height: 0; position: relative; }
.room-page .chat-log { flex: 1 1 auto; min-height: 0; max-height: none; }
.room-page .composer { flex: 0 0 auto; }
.chat-tolast { position: absolute; right: 14px; bottom: 150px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--blue); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; z-index: 6; }
.chat-tolast[hidden] { display: none; }
@media (max-width: 640px) { .room-page .room-head .proj-sum { display: none; } .room-page .room-head { margin-bottom: 8px; } }

/* ---------- Штаб: деплои (кликабельный счётчик + карточка релиза) ---------- */
.room-stat-dep, .room-stat-ext { border: 1px solid var(--line2); background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 1px 8px; border-radius: 999px; line-height: 1.7; display: inline-flex; align-items: center; gap: 4px; }
.room-stat-dep:hover { color: var(--text); border-color: var(--blue); background: rgba(37,99,235,.06); }
.room-stat-ext:hover { color: var(--text); border-color: var(--violet); background: rgba(124,92,255,.07); }
.art-notes { width: 100%; resize: vertical; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; }
.art-deploy { border-left: 3px solid var(--mint); }
.art-deploy .dep-when { font-size: 11px; font-weight: 700; color: var(--mint); background: rgba(16,185,129,.10); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.art-deploy .art-top { gap: 8px; align-items: center; flex-wrap: wrap; }
.dep-notes { white-space: pre-wrap; }

/* ---------- Штаб: колокольчик «Входящие» ---------- */
.sb-unread { background: var(--blue); color: #fff; border-radius: 999px; min-width: 18px; text-align: center; font-weight: 800; font-size: 11px; padding: 0 5px; }
.inbox-filters { display: flex; gap: 6px; }
.inbox-tab { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.inbox-tab:hover { color: var(--text); }
.inbox-tab.active { color: var(--text); border-color: var(--blue); background: rgba(37,99,235,.06); }
.inbox-tab .flt-n { font-size: 11px; color: var(--muted); }
.ib-row { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.ib-row:hover { border-color: var(--blue); background: rgba(37,99,235,.03); }
.ib-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ib-row.is-new { border-left: 3px solid var(--blue); }
.ib-row.ib-deploy.is-new { border-left-color: var(--mint); }
.ib-ic { font-size: 18px; line-height: 1.4; flex: 0 0 auto; }
.ib-main { min-width: 0; flex: 1 1 auto; }
.ib-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.ib-head strong { font-weight: 700; }
.ib-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ib-quote { border-left: 2px solid var(--line2); padding: 2px 0 2px 8px; margin: 5px 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ib-body { font-size: 13px; color: var(--text); margin: 3px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ib-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ib-topic { color: var(--blue); font-weight: 600; }
.ib-tone { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: rgba(15,23,42,.05); }
.empty { padding: 28px 14px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--r); }

/* ---------- Проектные уведомления ---------- */
.notif-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
.notif-feed { min-width: 0; }
.notif-side { min-width: 0; position: sticky; top: 70px; }
.notif-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 2px 8px;
  color: var(--muted2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.notif-section-title::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}
.notif-section-title b {
  min-width: 22px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  padding: 1px 7px;
}
.notif-section-title.is-new {
  color: var(--blue);
}
.notif-section-title.is-new::after {
  background: rgba(59,130,246,.22);
}
.notif-section-title.is-new b {
  background: rgba(59,130,246,.14);
  color: var(--blue);
}
.notif-row {
  --n-c: var(--blue);
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r);
  background: var(--panel);
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.notif-row:hover { border-color: color-mix(in srgb, var(--n-c) 45%, var(--line)); background: color-mix(in srgb, var(--n-c) 5%, var(--panel)); }
.notif-row.is-new {
  border-left-color: var(--n-c);
  border-color: color-mix(in srgb, var(--n-c) 34%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--n-c) 11%, transparent), rgba(255,255,255,0) 42%),
    color-mix(in srgb, var(--n-c) 4%, var(--panel));
  box-shadow: 0 8px 22px rgba(15,23,42,.055);
}
.notif-row.is-read {
  opacity: .76;
}
.notif-row.is-read:hover {
  opacity: 1;
}
.notif-ic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--n-c);
  background: color-mix(in srgb, var(--n-c) 12%, transparent);
}
.notif-ic .ic { width: 17px; height: 17px; }
.notif-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.notif-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.notif-head strong { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.notif-row.is-new .notif-head strong { font-weight: 900; color: var(--text); }
.notif-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--n-c) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--n-c) 12%, #fff);
  color: color-mix(in srgb, var(--n-c) 72%, var(--text));
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.5;
  padding: 1px 7px 1px 6px;
  white-space: nowrap;
}
.notif-new span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--n-c) 15%, transparent);
}
.notif-body { font-size: 13px; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.notif-meta { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted2); font-size: 11.5px; }
.notif-meta span { display: inline-flex; align-items: center; }
.notif-meta span + span::before { content: "·"; margin-right: 5px; color: var(--muted2); }
.notif-sub-list { display: flex; flex-direction: column; gap: 8px; }
.notif-sub {
  --n-c: var(--blue);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  padding: 9px 10px;
  cursor: pointer;
}
.notif-sub:hover { border-color: color-mix(in srgb, var(--n-c) 35%, var(--line)); }
.notif-sub-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-sub-label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.notif-sub-label .ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--n-c); }
.notif-sub-label strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-sub-label em {
  margin-left: auto;
  min-width: 20px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: var(--muted2);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  padding: 1px 6px;
}
.notif-sub small { color: var(--muted2); font-size: 11.5px; line-height: 1.3; }
.notif-sub input { position: absolute; opacity: 0; pointer-events: none; }
.notif-switch { width: 36px; height: 20px; border-radius: 999px; background: rgba(100,116,139,.22); position: relative; transition: background .15s; }
.notif-switch::after { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.18); transition: transform .15s; }
.notif-sub input:checked + .notif-switch { background: color-mix(in srgb, var(--n-c) 72%, var(--blue)); }
.notif-sub input:checked + .notif-switch::after { transform: translateX(16px); }
.notif-sub input:disabled + .notif-switch { opacity: .5; }
.notif-row.t-room, .notif-sub.t-room { --n-c: var(--blue); }
.notif-row.t-question, .notif-sub.t-question { --n-c: var(--violet); }
.notif-row.t-task, .notif-sub.t-task { --n-c: var(--amber); }
.notif-row.t-material, .notif-sub.t-material { --n-c: var(--mint); }
.notif-row.t-deploy, .notif-sub.t-deploy { --n-c: var(--green); }
.notif-row.t-commit, .notif-sub.t-commit { --n-c: #6d49c9; }
.notif-row.t-roadmap, .notif-sub.t-roadmap { --n-c: #0f766e; }
.notif-row.t-team, .notif-sub.t-team { --n-c: #2563eb; }
.notif-row.t-access, .notif-sub.t-access { --n-c: var(--rose); }
.notif-row.t-role-timer, .notif-sub.t-role-timer { --n-c: #dc2626; }
.notif-row.t-message, .notif-sub.t-message { --n-c: var(--muted); }
.btn-ghost:disabled { opacity: .45; cursor: default; }
#markSeenBtn .ic { width: 14px; height: 14px; vertical-align: -0.18em; margin-right: 5px; }

@media (max-width: 980px) {
  .notif-layout { grid-template-columns: 1fr; }
  .notif-side { position: static; }
}
@media (max-width: 640px) {
  .notif-row { padding: 11px 12px; gap: 10px; }
  .notif-ic { width: 30px; height: 30px; }
  .notif-head strong { font-size: 13.5px; }
}
/* подсветка сообщения, к которому перешли из «Входящих» */
.msg.msg-flash { animation: msgFlash 2.2s ease-out 1; }
@keyframes msgFlash { 0%,40% { background: rgba(37,99,235,.14); } 100% { background: transparent; } }

/* ---------- Штаб: модалка деплоя (релиз-ноутс заполняет СТО) ---------- */
.art-deploy { cursor: pointer; }
.art-deploy:hover { border-color: var(--mint); background: rgba(16,185,129,.04); }
.art-deploy .dep-notes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dep-fields { display: flex; flex-direction: column; gap: 12px; }
.dep-field { display: flex; flex-direction: column; gap: 5px; }
.dep-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.dep-input { width: 100%; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; padding: 9px 11px; }
.dep-field-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.dep-meta { font-size: 13px; color: var(--text); padding-bottom: 8px; }
.dep-field-inline { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1 1 auto; }
.dep-field-inline select { border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; padding: 9px 11px; }
#deployModal .prompt-text { width: 100%; }

/* ---------- Штаб: «молчуны» — роль без ответа >3ч (серое имя) ---------- */
.council-member .cm-name.cm-name-stale { color: var(--muted); opacity: .7; }
.council-legend .cm-name-stale { color: var(--muted); opacity: .7; font-weight: 600; }

/* ---------- Штаб: присутствие роли (вычисляется по heartbeat/назначению) ---------- */
.cm-presence { border: 1px solid var(--line2); background: var(--panel); font: inherit; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; white-space: nowrap; line-height: 1.7; flex: 0 0 auto; }
.cm-presence-online { color: var(--green); border-color: rgba(31,168,86,.38); background: rgba(31,168,86,.08); }
.cm-presence-sleep { color: var(--amber); border-color: rgba(217,138,31,.38); background: rgba(217,138,31,.09); }
.cm-presence-offline { color: var(--muted2); background: var(--bg2); }
.cm-presence-paused { color: var(--muted); background: var(--bg2); }
.council-member { flex-wrap: wrap; row-gap: 4px; }
.council-member .cm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.council-member.cmp-online { border-left: 2px solid rgba(31,168,86,.38); }
.council-member.cmp-sleep { border-left: 2px solid rgba(217,138,31,.38); }

/* ======================================================================
   Штаб: вложения в чате (файлы/скрины)
   ====================================================================== */

/* кнопка-скрепка в composer */
.cmp-attach {
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--muted); border-radius: var(--r);
  cursor: pointer; display: grid; place-items: center; transition: all .12s;
}
.cmp-attach:hover { color: var(--blue); border-color: rgba(59,130,246,.4); background: rgba(59,130,246,.06); }
.cmp-attach .ic { width: 19px; height: 19px; }

/* бар прикреплённых (до отправки) */
.composer-att { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; max-height: 132px; overflow-y: auto; }
.composer-att[hidden] { display: none; } /* пустой блок превью не должен занимать место и плодить gap */
.att-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 230px;
  border: 1px solid var(--line2); background: var(--bg2); border-radius: var(--r);
  padding: 4px 6px 4px 4px; position: relative;
}
.att-chip.is-err { border-color: rgba(239,95,84,.5); background: rgba(239,95,84,.06); }
.att-thumb { width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; background: center/cover no-repeat var(--panel2); }
.att-ic { width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; display: grid; place-items: center; background: var(--panel2); color: var(--muted); }
.att-ic .ic { width: 16px; height: 16px; }
.att-info { display: flex; flex-direction: column; min-width: 0; }
.att-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.att-meta { font-size: 10.5px; color: var(--muted2); }
.att-chip.is-err .att-meta { color: var(--red); }
.att-del {
  flex: 0 0 auto; width: 20px; height: 20px; border: none; background: transparent;
  color: var(--muted2); cursor: pointer; border-radius: 5px; display: grid; place-items: center;
}
.att-del:hover { color: var(--red); background: rgba(239,95,84,.1); }
.att-del .ic { width: 13px; height: 13px; }
.att-spin {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(59,130,246,.25); border-top-color: var(--blue);
  animation: attspin .7s linear infinite;
}
.att-err { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 50%; font-size: 11px; font-weight: 800; }
@keyframes attspin { to { transform: rotate(360deg); } }

/* drag-over подсветка области чата */
.chat.drag-over { outline: 2px dashed rgba(59,130,246,.55); outline-offset: -4px; background: rgba(59,130,246,.04); }

/* вложения в отправленном сообщении */
.msg-att { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-img { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); line-height: 0; max-width: 240px; }
.msg-img img { display: block; max-width: 240px; max-height: 220px; width: auto; height: auto; object-fit: cover; }
.msg-img:hover { border-color: rgba(59,130,246,.5); }
.msg-file {
  display: inline-flex; align-items: center; gap: 9px; max-width: 280px;
  border: 1px solid var(--line); background: rgba(15,23,42,.02); border-radius: var(--r);
  padding: 7px 9px; transition: all .12s;
}
.msg-file:hover { border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.05); }
.mf-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: var(--panel2); color: var(--muted); }
.mf-ic .ic { width: 16px; height: 16px; }
.mf-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mf-name { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-meta { font-size: 11px; color: var(--muted2); }
.mf-dl { flex: 0 0 auto; color: var(--muted2); display: grid; place-items: center; }
.mf-dl .ic { width: 16px; height: 16px; }
.msg-file:hover .mf-dl { color: var(--blue); }

/* иконки в действиях сообщения */
.msg-act .ic { width: 13px; height: 13px; vertical-align: -0.15em; }
.msg-mine .msg-att { align-items: flex-end; }

/* ---------- Штаб: Вопросы овнеру ---------- */
.q-showall { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.q-row { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 10px; border-left: 3px solid var(--violet); }
.q-row.is-answered { opacity: .6; border-left-color: var(--line2); }
.q-row.is-read { border-left-color: var(--blue); opacity: .86; }
.q-row.is-not-owner { border-left-color: var(--red); background: rgba(239,68,68,.035); }
.q-ic { color: var(--violet); flex: 0 0 auto; line-height: 1.3; }
.q-row.is-read .q-ic { color: var(--blue); }
.q-row.is-not-owner .q-ic { color: var(--red); }
.q-main { min-width: 0; flex: 1 1 auto; }
.q-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.q-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.q-answered { font-size: 11px; font-weight: 700; color: var(--mint); background: rgba(16,185,129,.10); padding: 0 7px; border-radius: 999px; }
.q-triage-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(100,116,139,.10); padding: 0 7px; border-radius: 999px; }
.is-not-owner .q-triage-badge { color: var(--red); background: rgba(239,68,68,.10); }
.q-text { font-size: 14px; color: var(--text); margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.q-variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.q-variant { border: 1px solid var(--violet); background: rgba(124,58,237,.06); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.q-variant:hover { background: var(--violet); color: #fff; }
.q-answer { display: flex; gap: 8px; margin: 8px 0 4px; align-items: flex-end; }
.q-answer-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; line-height: 1.4; resize: vertical; min-height: 40px; }
.q-answer-input:focus { outline: none; border-color: rgba(15,181,164,.45); }
.q-answer-send { border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--r); cursor: pointer; white-space: nowrap; }
.q-answer-send:hover { border-color: var(--blue); }
.q-answer-tools { margin: 2px 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.q-quote { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 0; text-decoration: underline dotted; text-underline-offset: 3px; }
.q-quote:hover { color: var(--blue); }
.q-mark-read, .q-not-owner, .q-bulk-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.q-mark-read .ic, .q-not-owner .ic, .q-bulk-btn .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.q-mark-read:hover, .q-bulk-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: rgba(59,130,246,.06); }
.q-not-owner:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,.06); }
.q-bulk-btn:disabled { opacity: .45; cursor: default; }
.q-decision-b { margin-top: 4px; }
.q-decision-b > :first-child { margin-top: 0; }
.q-decision-b > :last-child { margin-bottom: 0; }
.q-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.q-topic, .q-gomsg { color: var(--blue); font-weight: 600; }
.q-gomsg { display: inline-flex; gap: 3px; align-items: center; }
/* секции открытые/решённые + зафиксированное решение */
.q-section-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--muted2); margin: 6px 2px 10px; }
.q-section-resolved { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-section-read, .q-section-not-owner { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-allclear { color: var(--muted); font-size: 13px; padding: 6px 2px 4px; }
.q-row.is-answered { opacity: .9; border-left-color: var(--mint); }
.q-text-muted { color: var(--muted); }
.q-triage-meta { color: var(--muted); font-size: 12px; margin: 4px 0; }
.q-triage-note { font-size: 13px; color: var(--text); background: rgba(15,23,42,.04); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.q-decision { font-size: 13.5px; color: var(--text); background: rgba(15,181,164,.07); border: 1px solid rgba(15,181,164,.22);
  border-radius: 8px; padding: 7px 10px; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.q-decision-l { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--mint); margin-right: 8px; }
.q-decision-when { color: var(--muted2); font-size: 11.5px; margin-left: 8px; }
.q-notif-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 999px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.q-notif-btn .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.q-notif-btn:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); }
.q-notif-btn.on { color: var(--mint); border-color: rgba(15,181,164,.4); background: rgba(15,181,164,.08); }
.q-notif-btn:disabled { cursor: default; opacity: .85; }
.ft-question { color: var(--violet); }

/* ---------- Штаб: мобайл — компактная шапка темы + минимальный композер ---------- */
@media (max-width: 640px) {
  .room-page .room-head { margin-bottom: 6px; }
  .room-page .room-head h1 { font-size: 16px; }
  .room-page .room-head .proj-sum { display: none; } /* objective скрыт на мобиле — экономим место */
  /* композер: только поле ввода + кнопка (От лица / Кому / Тон скрыты) */
  .room-page .composer-row { display: none; }
}

/* Landscape on phones: keep the topic context visible next to the chat. */
@media (max-width: 1200px) and (orientation: landscape) and (max-height: 620px) {
  .room-page .room {
    padding: 6px 8px;
  }
  .room-page .room-head {
    margin-bottom: 4px;
  }
  .room-page .room-head .proj-eyebrow {
    gap: 4px;
    row-gap: 3px;
  }
  .room-page .room-head h1 {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-page .room-head .proj-sum {
    display: block;
    max-width: none;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-page .r-prio,
  .room-page .room-status-btn,
  .room-page .room-access-pill {
    font-size: 10.5px;
    padding-block: 1px;
  }
  .room-page .room-id,
  .room-page .room-stats,
  .room-page .room-stat-dep,
  .room-page .room-stat-ext {
    display: none;
  }
  .room-page .room-exp,
  .room-page .delete-link {
    display: none;
  }
  .room-page .room-mobtabs {
    display: none;
  }
  .room-page .room-grid,
  .room-page .room-grid[data-mob] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(196px, 24vw);
    gap: 6px;
    align-items: stretch;
  }
  .room-page .room-grid[data-mob="chat"] .room-col-rail,
  .room-page .room-grid[data-mob="council"] .room-col-rail,
  .room-page .room-grid[data-mob="artifacts"] .room-col-rail {
    display: flex;
    flex-direction: column;
  }
  .room-page .room-grid[data-mob="council"] .room-col-chat,
  .room-page .room-grid[data-mob="artifacts"] .room-col-chat {
    display: block;
  }
  .room-page .room-grid[data-mob="council"] .room-col-rail .rail-panel,
  .room-page .room-grid[data-mob="artifacts"] .room-col-rail .rail-panel {
    display: block;
  }
  .room-page .room-col-rail {
    gap: 6px;
    min-width: 0;
  }
  .room-page .rail-panel {
    padding: 6px;
    border-radius: 8px;
  }
  .room-page .rail-h {
    margin-bottom: 4px;
    font-size: 10.5px;
  }
  .room-page .chat-log {
    padding: 6px;
    gap: 6px;
  }
  .room-page .msg {
    gap: 6px;
  }
  .room-page .msg-av {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 9px;
  }
  .room-page .msg-body {
    padding: 6px 8px;
  }
  .room-page .msg-meta {
    margin-bottom: 2px;
    font-size: 11px;
  }
  .room-page .msg-text {
    font-size: 12.5px;
    line-height: 1.35;
  }
  .room-page .composer {
    padding: 4px 6px;
  }
  .room-page .composer-row {
    display: none;
  }
  .room-page .composer-send {
    gap: 6px;
  }
  .room-page .cmp-attach {
    width: 32px;
    height: 32px;
    border-radius: 7px;
  }
  .room-page .cmp-attach .ic {
    width: 16px;
    height: 16px;
  }
  .room-page .composer-send textarea {
    min-height: 32px;
    max-height: 58px;
    line-height: 17px;
    padding: 6px 8px;
    font-size: 12.5px;
  }
  .room-page .composer-send .btn-primary {
    height: 32px;
    padding: 0 11px;
    font-size: 12.5px;
  }
}

/* ---------- Коммиты ---------- */
.cm-row { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: 8px; }
.cm-ic { color: var(--muted); flex: 0 0 auto; line-height: 1.3; }
.cm-main { min-width: 0; flex: 1 1 auto; }
.cm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cm-repo { font-weight: 800; font-size: 13px; }
.cm-sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--violet); background: rgba(124,58,237,.08); padding: 0 6px; border-radius: 5px; }
.cm-sha-link { text-decoration: none; cursor: pointer; transition: background .12s, color .12s; }
.cm-sha-link:hover { background: rgba(124,58,237,.18); color: #5b21b6; text-decoration: underline; }
.cm-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cm-msg { font-size: 14px; color: var(--text); margin: 4px 0; overflow-wrap: anywhere; }
.cm-files { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.cm-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); background: rgba(15,23,42,.05); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.cm-file.cm-more { color: var(--blue); }
.cm-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cm-proj { color: var(--blue); font-weight: 600; }

/* ---------- Штаб: markdown в сообщениях чата (вкл. таблицы) ---------- */
.msg-text.md { line-height: 1.45; }
.msg-text.md .md-p { margin: 0 0 6px; }
.msg-text.md > .md-p:last-child { margin-bottom: 0; }
.msg-text.md .md-h { font-weight: 800; margin: 8px 0 4px; }
.msg-text.md .md-h1 { font-size: 1.15em; }
.msg-text.md .md-h2, .msg-text.md .md-h3, .msg-text.md .md-h4 { font-size: 1.04em; }
.msg-text.md .md-list { margin: 4px 0 6px; padding-left: 20px; }
.msg-text.md .md-list li { margin: 2px 0; }
.msg-text.md .md-ic { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(15,23,42,.06); padding: 0 5px; border-radius: 4px; overflow-wrap: anywhere; }
.msg-text.md .md-code { background: rgba(15,23,42,.05); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
.msg-text.md .md-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; }
.msg-text.md .md-q { border-left: 3px solid var(--line2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--muted); }
.msg-text.md .md-table-wrap { overflow-x: auto; max-width: 100%; margin: 6px 0; }
.msg-text.md .md-table { border-collapse: collapse; font-size: 12.5px; }
.msg-text.md .md-table th, .msg-text.md .md-table td { border: 1px solid var(--line2); padding: 5px 9px; text-align: left; vertical-align: top; }
.msg-text.md .md-table th { background: rgba(15,23,42,.05); font-weight: 700; white-space: nowrap; }
.msg-text.md a { color: var(--blue); text-decoration: underline; }
.msg-text.md .md-check {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  margin-right: 5px;
  border-radius: 5px;
  border: 1px solid rgba(20,184,166,.32);
  background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(59,130,246,.14));
  color: var(--mint);
  vertical-align: -2px;
}
.msg-text.md .md-check::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

/* ========== V1a visual upgrade — TL-WEB-01 ========== */
/* display-layer only: colors/shadows/typography; no layout/billing/auth change */

/* proto-go primary: stronger CTA */
.proto-go:not(.secondary) {
  background: linear-gradient(135deg, var(--product-accent, var(--mint)), var(--blue));
  color: #fff;
  font-weight: 850;
  font-size: 13px;
  letter-spacing: -.01em;
  box-shadow: 0 2px 10px rgba(15,181,164,.24);
  border: none;
  border-radius: var(--r2);
  transition: opacity .15s;
}
.proto-go.secondary {
  font-size: 12.5px;
  font-weight: 800;
}

/* screen heading: larger, bolder */
.a0-head h2 {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.18;
}

/* body text: more readable */
.a0-body {
  font-size: 13.5px;
  line-height: 1.6;
}

/* KPI numbers: more prominent */
.mock-kpi strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
}

/* result box: stronger value moment */
.result-box {
  background: linear-gradient(135deg, rgba(15,181,164,.22), rgba(143,176,255,.2));
  box-shadow: 0 2px 12px rgba(15,181,164,.14);
  border: 1px solid rgba(15,181,164,.28);
}
.result-box strong {
  font-size: 18px;
  font-weight: 900;
}

/* offer card: mint left accent */
.a0-offer {
  border-left: 3px solid var(--product-accent, var(--mint));
  padding-left: 12px;
}

/* stage chip: more visible */
.a0-stage {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .07em;
  color: var(--product-accent, var(--mint));
  background: rgba(15,181,164,.1);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(15,181,164,.22);
  display: inline-block;
}

/* a0 card elevated for offer type */
.a0-card {
  box-shadow: 0 1px 6px rgba(15,23,42,.06);
  border-color: rgba(100,116,139,.18);
}
/* ========== end V1a ========== */
/* ---------- Штаб: кнопки экспорта темы (PDF/XML) ---------- */
.room-exp { display: inline-flex; gap: 6px; }
.exp-link { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; cursor: pointer; text-decoration: none; line-height: 1.7; white-space: nowrap; }
.exp-link:hover { color: var(--text); border-color: var(--blue); }


/* FE Track A owner-view mobile containment */
.proj, .content, .proto, .proto-stage, .device-browser, .browser-body, .a0-screen { min-width: 0; max-width: 100%; }
.proj { width: 100%; overflow-x: hidden; }
.proj h1, .proj-sum, .a0-head h2, .a0-body, .proto-screen span, .tab { overflow-wrap: anywhere; }
.browser-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .tabs { max-width: 100%; width: 100%; }
  .proto-stage { justify-content: stretch; }
  .device-browser { width: 100%; border-radius: 10px; }
  .browser-body { padding: 10px; }
  .a0-card, .mock-kpi, .mini-row, .field { max-width: 100%; }
}

/* ---------- Фабрика (объединённый раздел) ---------- */
.fc-search { border: 1px solid var(--line2); background: var(--panel); color: var(--text); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; outline: none; min-width: 180px; }
.fc-search:focus { border-color: rgba(15,181,164,.45); }
.fc-agg { margin-bottom: 14px; }
.fc-kpis { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.fc-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.fc-kpi-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.fc-kpi-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted2); }
.fc-kpi-states { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.fc-kpi-state { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; border: 1px solid; white-space: nowrap; }
.fc-overview { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.fc-overview summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--text); }
.fc-ov-sum { font-size: 13px; color: var(--muted); margin: 10px 0; line-height: 1.5; }
.fc-clusters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fc-cluster { font-size: 12.5px; color: var(--muted); } .fc-cluster b { color: var(--text); }
.fc-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tech-i { font-size: 11px; color: var(--muted2); background: rgba(15,23,42,.04); border-radius: 6px; padding: 2px 7px; } .fc-tech-i b { color: var(--text); }

.fc-head, .fc-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(180px, 1.6fr) minmax(140px, 1fr) 116px; gap: 12px; align-items: center; }
.fc-head { padding: 4px 12px 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); }
.fc-row { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 7px; }
.fc-row:hover { border-color: var(--line2); }
.fc-cell { min-width: 0; }
.fc-app { display: flex; flex-direction: column; gap: 2px; }
.fc-name { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-name:hover { color: var(--mint); }
.fc-cat { font-size: 11px; color: var(--muted2); }
.fc-ready { display: flex; align-items: center; gap: 8px; }
.fc-bar { flex: 1; min-width: 40px; height: 7px; background: rgba(15,23,42,.07); border-radius: 999px; overflow: hidden; }
.fc-bar-fill { display: block; height: 100%; border-radius: 999px; }
.fc-bar-fill.rdy-hi { background: var(--green, #1fa856); }
.fc-bar-fill.rdy-mid { background: var(--amber); }
.fc-bar-fill.rdy-lo { background: var(--red); }
.fc-pct { font-size: 12px; font-weight: 800; color: var(--muted); flex: 0 0 auto; width: 34px; text-align: right; }
.fc-stages { display: flex; align-items: center; gap: 7px; border: none; background: transparent; cursor: pointer; padding: 4px; border-radius: 7px; text-align: left; }
.fc-stages:hover { background: rgba(15,23,42,.04); }
.fc-stages-mini { display: flex; gap: 2px; flex: 1; min-width: 0; }
.fc-seg { flex: 1; height: 8px; min-width: 3px; border-radius: 2px; background: rgba(15,23,42,.1); }
.fc-seg.on { background: var(--mint); }
.fc-stages-n { font-size: 11px; font-weight: 700; color: var(--muted2); flex: 0 0 auto; }
.fc-commits { display: flex; justify-content: flex-start; }
.fc-commits-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; border: 1px solid var(--line2); background: var(--panel); border-radius: 9px; padding: 4px 10px; cursor: pointer; }
.fc-commits-btn:hover { border-color: var(--violet); }
.fc-c-n { font-size: 15px; font-weight: 800; color: var(--violet); line-height: 1.1; }
.fc-c-d { font-size: 10px; color: var(--muted2); }
.fc-commits-empty { color: var(--muted2); font-size: 13px; padding-left: 4px; }

/* попап коммитов */
.fc-commit-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.fc-commit { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; background: var(--bg2); }
.fc-commit-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fc-commit-h .cm-when { margin-left: auto; }
.fc-commit-msg { font-size: 13.5px; color: var(--text); margin: 3px 0; }
/* попап роадмэпа */
.fc-rm-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fc-rm-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.fc-rm-stage { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line2); background: var(--panel); border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left; font: inherit; }
.fc-rm-stage:hover { border-color: var(--mint); }
.fc-rm-stage.ro { cursor: default; }
.fc-rm-stage.ro:hover { border-color: var(--line2); }
.fc-rm-stage.on { background: rgba(15,181,164,.08); border-color: rgba(15,181,164,.4); }
.fc-rm-check { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line2); color: #fff; font-size: 11px; font-weight: 900; }
.fc-rm-stage.on .fc-rm-check { background: var(--mint); border-color: var(--mint); }
.fc-rm-n { font-size: 10px; font-weight: 800; color: var(--muted2); flex: 0 0 auto; width: 16px; }
.fc-rm-label { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .fc-head { display: none; }
  .fc-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 8px; }
  .fc-stages { grid-column: 1 / -1; }
}

/* ===================== Система · таймеры (кроны) ===================== */
.sys-intro { margin: 2px 2px 14px; max-width: 760px; line-height: 1.5; }
.sys-updated { font-size: 12px; color: var(--muted); margin-right: 10px; }
.ctl-btn {
  font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 12px;
}
.ctl-btn:hover { border-color: var(--accent); }

.sys-list { display: flex; flex-direction: column; gap: 12px; }
.sys-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.sys-card.sys-ok    { border-left-color: var(--green); }
.sys-card.sys-stale { border-left-color: var(--amber); }
.sys-card.sys-fail  { border-left-color: var(--red); }
.sys-card.sys-never { border-left-color: var(--muted); }

.sys-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted); }
.sys-ok    .sys-dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 16%, transparent); }
.sys-stale .sys-dot { background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent); }
.sys-fail  .sys-dot { background: var(--red);   box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent); }
.sys-never .sys-dot { background: var(--muted); }

.sys-body { flex: 1; min-width: 0; }
.sys-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sys-label { font-weight: 650; font-size: 15px; }
.sys-cron { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.sys-state { margin-left: auto; font-size: 11px; padding: 2px 9px; border-radius: 99px; font-weight: 600; }
.sys-state-ok    { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.sys-state-stale { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.sys-state-fail  { color: var(--red);   background: color-mix(in srgb, var(--red) 12%, transparent); }
.sys-state-never { color: var(--muted); background: var(--bg); }

.sys-desc { color: var(--muted); font-size: 13px; margin: 6px 0 8px; line-height: 1.45; }
.sys-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.sys-chip { font-size: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
.sys-chip .muted-i { color: var(--muted); margin-right: 4px; }
.sys-summary { margin-top: 9px; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.sys-docs { margin: 0 0 18px; }
.sys-docs-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.sys-docs-head h2 { margin: 0; font-size: 15px; font-weight: 850; color: var(--text); }
.sys-docs-head .ctl-btn { margin-left: auto; text-decoration: none; }
.sys-doc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sys-doc {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.sys-doc-head { display: flex; align-items: flex-start; gap: 12px; }
.sys-doc-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.25; color: var(--text); }
.sys-doc-kind { display: block; color: var(--muted); font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.sys-doc-head .ctl-btn { margin-left: auto; flex: none; }
.sys-doc p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sys-doc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sys-doc-tags span { color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 7px; font-size: 11px; font-weight: 700; }
.sys-prompt-box { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.sys-prompt-box summary { cursor: pointer; color: var(--text); font-size: 12.5px; font-weight: 800; }
.sys-prompt-box textarea {
  width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--bg2); color: var(--text); padding: 11px 12px; font: 12px/1.5 var(--mono); resize: vertical;
}

/* ===================== ИИ аккаунты ===================== */
.ai-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ai-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ai-form-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.ai-form label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ai-form input,
.ai-form select,
.ai-form textarea,
.ai-edit input,
.ai-edit select {
  width: 100%;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--r);
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.ai-form textarea { resize: vertical; min-height: 72px; }
.ai-submit { justify-self: start; }
.ai-main { display: grid; gap: 12px; min-width: 0; }
.ai-summary-card { margin-bottom: 0; }
.ai-list { display: grid; gap: 10px; }
.ai-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 13px 14px;
}
.ai-card.ai-ok { border-left-color: var(--green); }
.ai-card.ai-stale { border-left-color: var(--amber); }
.ai-card.ai-fail { border-left-color: var(--red); }
.ai-card-top { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.ai-title { font-size: 15px; font-weight: 800; color: var(--text); }
.ai-sub { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.ai-meter { height: 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 11px 0; }
.ai-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--blue)); border-radius: inherit; min-width: 0; }
.ai-meta { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 7px; }
.ai-meta span { min-width: 0; border: 1px solid var(--line); background: var(--bg2); border-radius: 7px; padding: 6px 8px; color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-meta b { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; }
.ai-notes { margin-top: 9px; color: var(--muted); font-size: 12.5px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ai-edit { margin-top: 10px; display: grid; grid-template-columns: 90px 90px 120px auto auto auto; gap: 8px; align-items: end; }
.ai-edit label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
.ctl-btn.danger { color: var(--red); }
.ai-empty { padding: 18px 2px; }

@media (max-width: 640px) {
  .sys-state { margin-left: 0; }
  .sys-cron { order: 3; }
  .sys-doc-head { flex-direction: column; }
  .sys-doc-head .ctl-btn { margin-left: 0; }
  .ai-layout { grid-template-columns: 1fr; }
  .ai-meta { grid-template-columns: 1fr 1fr; }
  .ai-edit { grid-template-columns: 1fr 1fr; }
}

/* ===================== Приложения · галерея скомпилированных продуктов ===================== */
.apps-intro { margin: 2px 2px 16px; max-width: 840px; line-height: 1.5; }
.apps-intro code, .app-sub code { font-family: var(--mono); font-size: .92em; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.app-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.app-card:hover { border-color: var(--ac); transform: translateY(-2px); }
.app-prev { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1020; border-bottom: 1px solid var(--line); }
.app-prev iframe { width: 1280px; height: 800px; border: 0; transform: scale(.4); transform-origin: top left; pointer-events: none; }
.app-open { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s;
  background: color-mix(in srgb, var(--ac) 32%, rgba(8, 12, 24, .55)); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.app-prev:hover .app-open { opacity: 1; }
.app-info { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.app-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ac); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent); }
.app-text { display: flex; flex-direction: column; min-width: 0; }
.app-name { font-weight: 650; font-size: 15px; color: var(--text); text-decoration: none; }
.app-name:hover { color: var(--ac); }
.app-sub { font-size: 12px; color: var(--muted); }
.app-src { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; vertical-align: middle; letter-spacing: .02em;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.app-src.cjm { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.app-plat { position: absolute; top: 8px; right: 10px; font-size: 15px; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
/* мобильные приложения — портретное превью с телефоном по центру */
.app-card.mobile .app-prev { aspect-ratio: 1 / 1.32; background: #0a0d16; }
.app-card.mobile .app-prev iframe { position: absolute; top: 0; left: 50%; width: 460px; height: 940px; transform: translateX(-50%) scale(.46); transform-origin: top center; }
.apps-h { font-size: 18px; font-weight: 700; margin: 4px 2px 10px; display: flex; align-items: center; gap: 8px; }
.app-card.real { border-left: 3px solid var(--ac); }

/* ---------- Прототип через @papps/ui (реальный дизайн, встроенный рантайм) ---------- */
.proto-pu { padding: 0; }
.pu-mount {
  height: 74vh; min-height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--r2, 12px);
  overflow: auto;
  background: #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.06);
}
.pu-mount .pu-app { height: 100%; }

/* ---------- Реальное приложение в прототипе (realapps → iframe в телефоне) ---------- */
.proto-real-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 22px; }
.proto-real-bar { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.proto-real-bar a { color: var(--blue); text-decoration: none; }
.proto-real-bar a:hover { text-decoration: underline; }
.proto-real-phone {
  width: 390px; max-width: 100%; height: 800px; max-height: 78vh;
  border-radius: 32px; overflow: hidden; border: 11px solid #11161f;
  background: #000; box-shadow: 0 22px 60px rgba(15,23,42,.30);
}
.proto-real-phone iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------- ⚡ Индикатор боевого приложения (каталог + Фабрика) ---------- */
.r-live, .fc-live {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; font-size: 12px; text-decoration: none;
  width: 18px; height: 18px; border-radius: 6px;
  background: rgba(245,158,11,.14); color: #d97706; vertical-align: middle;
  transition: .12s;
}
.r-live:hover, .fc-live:hover { background: rgba(245,158,11,.28); transform: scale(1.12); }

/* ---------- Вкладка «Приложение» (заглушка когда нет боевой сборки) ---------- */
.app-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 340px; text-align: center; padding: 40px 20px; }
.app-empty-ic { font-size: 40px; line-height: 1; opacity: .25; }
.app-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.app-empty-note { font-size: 13px; color: var(--muted); max-width: 420px; line-height: 1.6; }
/* Бейдж ⚡ на вкладке «Приложение» когда есть боевая сборка */
.tab[data-tab="app"].has-real { color: var(--blue); }
.tab[data-tab="app"].has-real::after { content: "⚡"; font-size: 10px; margin-left: 4px; vertical-align: middle; }

/* ---------- ЛС ролям (фикс-лэйаут как у чата темы) ---------- */
body.role-dm-page { height: 100%; overflow: hidden; }
.role-dm-page .app { height: 100vh; height: 100dvh; min-height: 0; }
.role-dm-page .main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.role-dm-page .content { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 14px 20px; }
.rdm-grid { display: grid; grid-template-columns: 270px 1fr; gap: 14px; height: 100%; min-height: 0; }
.rdm-roles { overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r2, 12px); background: var(--panel); padding: 8px; }
.rdm-group { margin-bottom: 8px; }
.rdm-group-h { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted2); padding: 6px 8px 3px; }
.rdm-role { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: var(--r, 8px); font: inherit; text-align: left; }
.rdm-role:hover { background: rgba(15,23,42,.04); }
.rdm-role.active { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.rdm-role-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.rdm-unread { flex: 0 0 auto; background: var(--blue); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.rdm-role.active .rdm-unread { background: color-mix(in srgb, var(--blue) 70%, #1f2937); }
.rdm-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; border: 1px solid var(--line); border-radius: var(--r2, 12px); background: var(--panel); overflow: hidden; }
.rdm-head { flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rdm-hint { font-size: 12px; color: var(--muted); flex-basis: 100%; }
.rdm-log { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.rdm-chat > .empty { flex: 1 1 auto; display: grid; place-items: center; }
.rdm-chat .composer { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 10px 12px; }
.rdm-chat .composer textarea { min-height: 38px; max-height: 120px; resize: none; }
@media (max-width: 760px) {
  body.role-dm-page { height: auto; overflow: auto; }
  .role-dm-page .main, .role-dm-page .app { height: auto; }
  .role-dm-page .content { overflow: visible; }
  .rdm-grid { grid-template-columns: 1fr; height: auto; }
  .rdm-roles { max-height: 220px; }
  .rdm-chat { height: 70vh; }
}

/* ---------- Штаб: внешние Codex/Claude-чаты темы ---------- */
.ext-panel { border-left: 3px solid rgba(124,92,255,.65); }
.ext-list { display: flex; flex-direction: column; gap: 8px; }
.ext-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.58);
  padding: 9px 10px;
  min-width: 0;
}
.ext-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ext-provider, .ext-status {
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.5;
  white-space: nowrap;
}
.ext-provider-codex { color: #4f46e5; background: rgba(79,70,229,.10); border-color: rgba(79,70,229,.26); }
.ext-provider-claude { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); }
.ext-provider-other { color: var(--muted); background: rgba(15,23,42,.05); }
.ext-status-active { color: #1a7d44; background: rgba(31,168,86,.12); border-color: rgba(31,168,86,.36); }
.ext-status-attached { color: #2563c4; background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.30); }
.ext-status-planned { color: #6d49c9; background: rgba(124,92,255,.10); border-color: rgba(124,92,255,.30); }
.ext-status-paused { color: #7c6d54; background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); }
.ext-status-closed { color: var(--muted2); background: rgba(15,23,42,.04); border-color: var(--line2); }
.ext-act {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--muted2);
  border-radius: 5px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.ext-act:hover { color: var(--text); background: rgba(15,23,42,.06); }
.ext-del { margin-left: auto; font-size: 16px; line-height: 1; }
.ext-title { margin-top: 7px; font-weight: 800; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.ext-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; color: var(--muted2); font-size: 11.5px; }
.ext-meta span + span::before { content: "·"; margin-right: 5px; color: var(--muted2); }
.ext-account {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 7px;
  background: rgba(59,130,246,.055);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.ext-account span + span::before { content: "·"; margin-right: 6px; color: var(--muted2); }
.ext-account b { color: var(--text); font-weight: 850; }
.ext-account-empty { color: #8a5d12; border-color: rgba(217,138,31,.26); background: rgba(217,138,31,.08); }
.ext-timer {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 850;
}
.ext-timer-pending { color: #8a5d12; border-color: rgba(217,138,31,.36); background: rgba(217,138,31,.10); }
.ext-timer-overdue { color: #b42318; border-color: rgba(239,95,84,.42); background: rgba(239,95,84,.10); }
.ext-notes { margin-top: 6px; font-size: 12.5px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ext-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; align-items: center; }
.ext-links a { color: var(--blue); font-size: 12px; font-weight: 800; text-decoration: none; }
.ext-links a:hover { text-decoration: underline; }
.ext-empty { padding: 10px 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ext-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ext-form-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ext-form-grid label > span {
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted2);
}
.ext-form-grid input, .ext-form-grid select, .ext-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  border-radius: var(--r);
  padding: 8px 9px;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.ext-form-grid input:focus, .ext-form-grid select:focus, .ext-form-grid textarea:focus { border-color: rgba(124,92,255,.42); }
.ext-form-wide { grid-column: 1 / -1; }
.ext-prompt-preview { min-height: 92px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; }
.ext-provider-new { text-decoration: none; }
@media (max-width: 640px) {
  .ext-form-grid { grid-template-columns: 1fr; }
  .room-stat-ext { padding-inline: 7px; }
}
.ws-capcheck .ck-lock { font-style: normal; font-size: 8.5px; opacity: .5; margin-left: 1px; }

/* User access modal: project topics must stay readable inside .create-form. */
.create-form .user-project-access {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.create-form .up-projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 4px 2px 0;
}
.create-form .up-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
}
.create-form .up-project-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.create-form .up-project-controls select {
  flex: 1 1 auto;
  min-width: 0;
}
.create-form .up-project-controls .up-secret {
  display: inline-flex;
  flex: 0 0 78px;
  min-width: 78px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
}
.create-form .up-topic-menu {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
}
.create-form .up-topic-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  line-height: 1.4;
}
.create-form .up-topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  max-height: 172px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 8px;
  padding: 2px 4px 2px 0;
}
.create-form label.up-topic {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  cursor: pointer;
}
.create-form label.up-topic:hover {
  background: rgba(15,23,42,.035);
}
.create-form label.up-topic input {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  justify-self: center;
  flex: 0 0 auto;
}
.create-form label.up-topic span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-form label.up-topic.on {
  color: var(--text);
  background: rgba(15,181,164,.07);
}
@media (max-width: 760px) {
  .create-form .up-project { grid-template-columns: 1fr; }
  .create-form .up-project-controls { align-items: stretch; }
  .create-form .up-topic-list { grid-template-columns: 1fr; }
}

/* ---------- Claude/Codex-аккаунты: провайдер, онлайн-лимиты ---------- */
.acc-prov { display: inline-grid; place-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 850; vertical-align: 2px; }
.acc-prov-claude { background: rgba(217,119,87,.14); color: #b45309; border: 1px solid rgba(217,119,87,.3); }
.acc-prov-codex { background: rgba(59,130,246,.13); color: #1d4ed8; border: 1px solid rgba(59,130,246,.3); }
.acc-usage { margin: 8px 0 6px; }
.acc-usage-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
.acc-usage-top strong { font-variant-numeric: tabular-nums; }
.acc-usage-sub { color: var(--muted2); font-size: 11.5px; }
.acc-usage-when { margin-left: auto; font-size: 11px; color: var(--muted2); }
.acc-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: var(--muted2); }
.acc-dot.online { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); animation: dotBreathe 2.2s ease-in-out infinite; }
.acc-dot.idle { background: #f59e0b; }
.acc-dot.stale { background: #ef4444; }
.acc-dot.off { background: var(--line2); }
.acc-bar { height: 7px; border-radius: 999px; background: rgba(15,23,42,.07); overflow: hidden; margin-top: 6px; }
.acc-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.acc-bar-fill.ok { background: linear-gradient(90deg, #0fb5a4, #22c55e); }
.acc-bar-fill.warn { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.acc-bar-fill.danger { background: linear-gradient(90deg, #ef4444, #f97316); }

/* ИИ аккаунты: таблица пула */
.acc-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); box-shadow: var(--shadow); }
.acc-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 12.5px; }
.acc-table th, .acc-table td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.acc-table th { color: var(--muted2); font-size: 10.5px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; background: rgba(248,250,252,.78); white-space: nowrap; }
.acc-table tbody tr:hover { background: rgba(59,130,246,.04); }
.acc-table tr.acc-disabled td { opacity: .55; }
.acc-td-name { min-width: 150px; }
.acc-def { margin-left: 6px; font-size: 9.5px; font-weight: 850; text-transform: uppercase; color: #0b7d70; background: rgba(15,181,164,.12); border-radius: 999px; padding: 2px 7px; }
.acc-off { margin-left: 6px; font-size: 9.5px; font-weight: 850; text-transform: uppercase; color: var(--muted2); background: rgba(15,23,42,.06); border-radius: 999px; padding: 2px 7px; }
.acc-td-token { white-space: nowrap; }
.acc-tok { font-size: 11px; letter-spacing: 1px; }
.acc-eye { vertical-align: -2px; margin-left: 4px; }
.acc-eye .ic, .acc-eye svg { width: 13px; height: 13px; }
.acc-td-usage { min-width: 120px; }
.acc-td-usage strong { font-variant-numeric: tabular-nums; display: block; }
.acc-td-usage small { color: var(--muted2); }
.acc-td-usage .acc-bar { display: block; margin-top: 4px; height: 6px; }
.acc-td-total { font-variant-numeric: tabular-nums; font-weight: 800; }
.acc-td-ip { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--muted); }
.acc-td-seen { white-space: nowrap; }
.acc-td-seen .acc-dot { display: inline-block; margin-right: 5px; vertical-align: -1px; }
.acc-td-acts { white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .acc-table { min-width: 0; }
  .acc-table, .acc-table tbody { display: block; }
  .acc-table thead { display: none; }
  .acc-table tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .acc-table td { display: block; border: none; padding: 0; }
  .acc-td-name { flex: 1 1 100%; }
}

/* Кнопки действий в таблице ИИ-аккаунтов всегда видимы (у tr нет .tbl-row/.ws-item) */
.acc-table .row-del { opacity: .6; }
.acc-table tr:hover .row-del { opacity: 1; }
.acc-td-acts { display: flex; gap: 4px; justify-content: flex-end; }

/* Strategy */
.strategy-page .content { padding: 14px 20px 60px; }
.strategy-filter {
  min-width: 132px;
  border: 1px solid var(--line2);
  background: var(--panel);
  border-radius: var(--r);
  padding: 7px 9px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
}
.strategy-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.strategy-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}
.strategy-stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.66);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.strategy-stat span {
  display: block;
  color: var(--muted2);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}
.strategy-stat strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strategy-stat em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  font-size: 11.5px;
}
.strategy-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.66);
  box-shadow: var(--shadow);
  padding: 12px;
}
.strategy-panel[hidden] { display: none; }
.strategy-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.strategy-panel-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}
.strategy-panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.strategy-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.strategy-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.strategy-wide { grid-column: 1 / -1; }
.strategy-form input,
.strategy-form select,
.strategy-form textarea,
.strategy-table input,
.strategy-table select,
.strategy-activity-form input,
.strategy-activity-form select,
.strategy-activity-form textarea {
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text);
  padding: 7px 8px;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.strategy-form textarea,
.strategy-activity-form textarea { resize: vertical; }
.strategy-form input:focus,
.strategy-form select:focus,
.strategy-form textarea:focus,
.strategy-table input:focus,
.strategy-table select:focus,
.strategy-activity-form input:focus,
.strategy-activity-form select:focus,
.strategy-activity-form textarea:focus {
  border-color: rgba(20,184,166,.5);
  box-shadow: 0 0 0 2px rgba(20,184,166,.08);
}
.strategy-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.52);
}
.strategy-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
}
.strategy-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf4fb;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.strategy-table td {
  vertical-align: top;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.strategy-table tbody tr.strategy-row:hover td { background: rgba(20,184,166,.025); }
.strategy-table th:nth-child(1) { width: 235px; }
.strategy-table th:nth-child(2) { width: 150px; }
.strategy-table th:nth-child(3) { width: 115px; }
.strategy-table th:nth-child(4) { width: 96px; }
.strategy-table th:nth-child(5) { width: 190px; }
.strategy-table th:nth-child(6) { width: 210px; }
.strategy-table th:nth-child(7) { width: 132px; }
.strategy-table th:nth-child(8) { width: 118px; }
.st-client,
.st-event,
.st-next {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.st-prob {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.st-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.st-actions .ctl-btn,
.st-actions .link-btn { justify-content: center; }
.st-metric {
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: #fff;
  color: var(--muted);
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}
.st-metric span {
  color: var(--text);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.st-metric em {
  display: block;
  margin-top: 2px;
  color: var(--muted2);
  font-style: normal;
  font-size: 11px;
}
.strategy-detail td {
  padding: 0;
  background: rgba(241,245,249,.55);
}
.strategy-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
  gap: 12px;
  padding: 12px;
}
.strategy-detail-title {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.strategy-activities {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strategy-activity {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 8px 9px;
}
.strategy-activity strong {
  display: block;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.25;
}
.strategy-activity span,
.strategy-activity p {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}
.strategy-activity-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: nowrap;
}
.strategy-activity-actions a {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}
.strategy-activity-form {
  display: grid;
  grid-template-columns: .8fr 1.4fr .8fr .8fr;
  gap: 7px;
}
.strategy-activity-form input[name="materialUrl"],
.strategy-activity-form select[name="taskStatus"],
.strategy-activity-form textarea,
.strategy-activity-form button {
  grid-column: span 2;
}
.strategy-empty,
.strategy-empty-line {
  color: var(--muted);
  padding: 24px;
  text-align: center;
}
.strategy-empty-line {
  padding: 12px;
  border: 1px dashed var(--line2);
  border-radius: var(--r);
  background: rgba(255,255,255,.5);
}
.strategy-error { color: var(--red); }

@media (max-width: 1180px) {
  .strategy-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strategy-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .strategy-page .content { padding: 10px 10px 60px; }
  .strategy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strategy-form,
  .strategy-detail-grid,
  .strategy-activity-form { grid-template-columns: 1fr; }
  .strategy-activity-form input[name="materialUrl"],
  .strategy-activity-form select[name="taskStatus"],
  .strategy-activity-form textarea,
  .strategy-activity-form button,
  .strategy-wide { grid-column: 1; }
}

/* Чекбокс «по умолчанию» в форме аккаунта — в строку (перебиваем .create-form label-колонку) */
.create-form label.acc-check { flex-direction: row; align-items: center; gap: 8px; }
.create-form label.acc-check input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }

/* Diff-попап: что агент сделал детально (коммиты + патч) */
.diff-panel { width: min(1100px, calc(100vw - 40px)); max-height: 86vh; display: flex; flex-direction: column; }
.diff-body { overflow-y: auto; padding-right: 4px; }
.diff-hint { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.diff-commit { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; background: rgba(255,255,255,.6); overflow: hidden; }
.diff-commit-head { display: flex; align-items: center; gap: 9px; padding: 9px 11px; flex-wrap: wrap; }
.diff-sha { font-size: 11.5px; background: rgba(15,23,42,.06); padding: 1px 6px; border-radius: 5px; flex: 0 0 auto; }
.diff-msg { font-size: 13px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.diff-meta { font-size: 11px; color: var(--muted2); flex: 0 0 auto; }
.diff-load { flex: 0 0 auto; font-size: 11.5px; padding: 4px 12px; }
.diff-files { padding: 0 11px 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.diff-files code { font-size: 10.5px; color: var(--muted); background: rgba(15,23,42,.04); padding: 1px 6px; border-radius: 5px; }
.diff-out { border-top: 1px solid var(--line); padding: 8px 11px; background: rgba(248,250,252,.6); }
.diff-weblink { display: inline-block; font-size: 11.5px; font-weight: 750; color: var(--blue); margin-bottom: 8px; text-decoration: none; }
.diff-file { margin-bottom: 12px; }
.diff-file-head { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.diff-code { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.45; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.diff-code .dl { padding: 0 8px; white-space: pre; }
.diff-code .dl-add { background: rgba(34,197,94,.12); color: #15803d; }
.diff-code .dl-del { background: rgba(239,68,68,.10); color: #b91c1c; }
.diff-code .dl-hunk { background: rgba(59,130,246,.10); color: #1d4ed8; font-weight: 700; }
.diff-code .dl-meta { color: var(--muted2); }
.msg-act[data-act="diff"] { color: #1d4ed8; }