/* Кабинет Проект-Менеджер — светлая blueprint дизайн-система.
   Белые карточки на холодно-серой канве, navy-акцент, янтарь — warning/like.
   Шрифты: Onest (UI/дисплей) · JetBrains Mono (цифры/коды). Едины со схематикой. */

:root {
  /* Светлая дизайн-система Project Manager (Onest + JetBrains Mono).
     Структура — navy/холодные серые на белом; акцент действий — сигнальный янтарь. */
  --bg: #F2F4F7;           /* канва приложения (gray-100) */
  --bg-raise: #F8FAFC;     /* утопленные/вложенные поверхности (gray-50) */
  --bg-card: #FFFFFF;      /* карточки и панели */
  --line: #E4E7EC;         /* hairline-граница (gray-200) */
  --line-bright: #D0D5DD;  /* граница поярче (gray-300) */
  --ink: #14181F;          /* основной текст (gray-900) */
  --ink-dim: #475467;      /* вторичный текст (gray-600) */
  --ink-faint: #98A2B3;    /* приглушённый (gray-400) */
  --navy: #00357F;         /* фирменный blueprint-navy */
  --accent: #0A4DA6;       /* интерактив (navy-400) */
  --amber: #E08A00;        /* сигнальный акцент действий + warning */
  --amber-deep: #C2790C;
  --blue: #0A4DA6;         /* ссылки/инфо = navy */
  --green: #1F9D57;        /* готово/прибыль */
  --red: #D92D20;          /* блок/возврат */
  --violet: #6941C6;       /* на приёмке / мастер */
  /* фирменная триада двойной цены */
  --client: #0A4DA6;       /* цена клиента — синий */
  --client-soft: #EAF1FB;
  --master: #6941C6;       /* цена мастера — фиолетовый */
  --master-soft: #F1ECFB;
  --margin: #1A7D49;       /* маржа — зелёный */
  --margin-soft: #ECFAF1;
  --surface-sunken: #F8FAFC;
  --mono: "JetBrains Mono", monospace;
  --disp: "Onest", sans-serif;
  --body: "Onest", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Иконки (инлайн-SVG, Lucide-стиль) */
.ic { display: inline-block; vertical-align: -0.15em; flex: none; }
.rating .ic, .crown .ic, .skill-tag .ic { fill: currentColor; stroke: none; vertical-align: -0.1em; }
.og-icon { color: var(--amber); display: inline-flex; }
.og-act { display: inline-flex; align-items: center; gap: 4px; }
.og-act.icon-only { padding: 5px 8px; }
.p-edit { display: inline-flex; align-items: center; }
.btn-tr .ic, .act .ic { vertical-align: -0.15em; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Блюпринт-сетка на всём фоне */
#bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,53,127,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,53,127,.035) 1px, transparent 1px),
    linear-gradient(rgba(0,53,127,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,53,127,.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}
#app { position: relative; z-index: 1; min-height: 100%; }

::selection { background: rgba(10,77,166,.16); }
a { color: var(--blue); text-decoration: none; }
button { font-family: var(--body); cursor: pointer; }

/* ---------- Логин ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raise));
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  padding: 44px 40px 36px;
  position: relative;
  box-shadow: 0 12px 40px rgba(16,24,40,.12);
  animation: rise .5s cubic-bezier(.2,.9,.3,1) both;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--navy), transparent);
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.brand-mark {
  font-family: var(--disp); font-weight: 800; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.brand-mark::before {
  content: ""; width: 26px; height: 26px; border-radius: 7px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 62%, 62% 100%, 0 100%);
}
/* Лого на форме входа — кликабельно, ведёт на главную витрину */
.brand-link { cursor: pointer; transition: opacity .15s; text-decoration: none; align-self: flex-start; }
.brand-link:hover { opacity: .65; }
.login-sub b { color: var(--navy); font-weight: 700; }
.login-card h1 {
  font-family: var(--disp); font-weight: 600; font-size: 26px;
  margin: 22px 0 6px; letter-spacing: -.01em;
}
.login-sub { color: var(--ink-dim); font-size: 14px; margin-bottom: 30px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.field input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 13px 15px; color: var(--ink);
  font-family: var(--body); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }

.btn-primary {
  width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 10px; padding: 14px; font-weight: 800; font-size: 15px;
  letter-spacing: .02em; margin-top: 8px;
  transition: transform .12s, box-shadow .2s, background .15s;
  box-shadow: 0 6px 16px rgba(10,77,166,.25);
}
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.login-error {
  background: rgba(217,45,32,.07); border: 1px solid rgba(217,45,32,.3);
  color: #B42318; border-radius: 10px; padding: 11px 14px;
  font-size: 13.5px; margin-bottom: 16px;
}

/* ---------- Каркас ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px; height: 60px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand-mark { font-size: 11px; }
.topbar .ws {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px;
}
.topbar .spacer { flex: 1; }
.topbar .user { font-size: 13.5px; color: var(--ink-dim); }
.topbar .user b { color: var(--ink); font-weight: 700; }
.btn-ghost {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); }

.page { max-width: 1240px; margin: 0 auto; padding: 36px 28px 80px; }
.page-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.page-head h2 {
  font-family: var(--disp); font-weight: 600; font-size: 30px; letter-spacing: -.01em;
}
.page-head .crumb { color: var(--ink-faint); font-size: 13px; margin-bottom: 6px; }
.page-head .crumb a { color: var(--ink-dim); }
.page-head .spacer { flex: 1; }

/* ---------- Шапка сделки: статус+прогресс сверху, действия «по полочкам» ---------- */
.page-head.deal-head { margin-bottom: 16px; }
.deal-meta { display: flex; align-items: center; gap: 14px; }
.deal-prog { display: flex; align-items: center; gap: 9px; }
.deal-prog .bar { width: 96px; height: 6px; border-radius: 99px; background: var(--line-bright); overflow: hidden; }
.deal-prog .bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #3b82f6); transition: width .4s ease; }
.deal-prog .pctn { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }

.deal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tool-group {
  display: flex; align-items: center; gap: 3px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px 7px 5px 13px;
}
.tool-group > .lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 5px; white-space: nowrap; user-select: none;
}
.t-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink-dim); background: transparent; border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.t-btn .ic { color: currentColor; opacity: .85; }
.t-btn:hover { color: var(--accent); background: var(--bg-card);
  border-color: var(--line-bright); box-shadow: 0 1px 3px rgba(16,36,61,.06); }
.t-btn:hover .ic { opacity: 1; }
.t-btn:active { transform: translateY(1px); }
@media (max-width: 760px) { .tool-group { flex-wrap: wrap; } }

.btn-amber {
  background: var(--accent); color: #fff; border: none; border-radius: 9px;
  padding: 11px 20px; font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 14px rgba(10,77,166,.22);
  transition: transform .12s, background .15s;
}
.btn-amber:hover { background: var(--navy); transform: translateY(-1px); }

/* ---------- Проекты ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.proj-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
  display: block; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .2s;
  animation: rise .4s both;
}
.proj-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
}
.proj-card .deal {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
}
.proj-card h3 { font-size: 17px; font-weight: 800; margin: 6px 0 14px; }
.proj-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

.chip {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; border: 1px solid;
}
.chip.draft       { color: var(--ink-dim);   border-color: var(--line-bright); background: var(--bg-raise); }
.chip.active, .chip.in_progress { color: var(--amber-deep); border-color: rgba(224,138,0,.4);  background: rgba(224,138,0,.09); }
.chip.on_hold, .chip.paused { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }
.chip.blocked     { color: var(--red);       border-color: rgba(217,45,32,.4); background: rgba(217,45,32,.07); }
.chip.done, .chip.accepted { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.09); }
.chip.cancelled, .chip.rejected { color: var(--red); border-color: rgba(217,45,32,.4); }
.chip.not_started { color: var(--ink-dim);   border-color: var(--line-bright); }
.chip.ready_to_start { color: var(--accent); border-color: rgba(10,77,166,.4); background: rgba(10,77,166,.07); }
.chip.on_review   { color: var(--violet);    border-color: rgba(105,65,198,.4); background: rgba(105,65,198,.08); }

.progress {
  height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; position: relative;
}
.progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.proj-card .pct {
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-top: 8px;
  display: flex; justify-content: space-between;
}

.empty {
  border: 1px dashed var(--line-bright); border-radius: 16px;
  padding: 60px 30px; text-align: center; color: var(--ink-dim);
}
.empty b { color: var(--ink); }

/* ---------- Граф веток ---------- */
.branches { display: flex; flex-direction: column; gap: 22px; }
.branch {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; animation: rise .4s both;
}
.branch-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.branch-head .lane-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.branch-head h4 { font-size: 15.5px; font-weight: 800; }
.branch-head .type {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
.branch-head .blocking {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(255,176,0,.35); border-radius: 5px; padding: 2px 7px;
}
.branch-head .spacer { flex: 1; }
.branch-head .progress { width: 130px; }
.branch-head .pctn { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); width: 42px; text-align: right; }

/* Дорожка этапов как git-граф */
.stages {
  display: flex; gap: 0; padding: 26px 22px 20px; overflow-x: auto; position: relative;
}
.stage {
  min-width: 200px; position: relative; padding: 0 14px 0 0;
}
.stage::before { /* линия дорожки */
  content: ""; position: absolute; top: 9px; left: 28px; right: -8px; height: 2px;
  background: var(--line-bright);
}
.stage:last-child::before { display: none; }
.stage .node {
  width: 20px; height: 20px; border-radius: 50%; position: relative; z-index: 1;
  border: 3px solid var(--line-bright); background: var(--bg-card);
  margin-bottom: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.stage .node:hover { transform: scale(1.2); }
.stage.s-done .node        { border-color: var(--green); background: var(--green); }
.stage.s-in_progress .node { border-color: var(--amber); background: var(--amber); animation: pulse 2s infinite; }
.stage.s-on_review .node   { border-color: var(--violet); background: var(--violet); }
.stage.s-ready_to_start .node { border-color: var(--accent); }
.stage.s-blocked .node     { border-color: var(--red); background: var(--red); }
.stage.s-cancelled .node   { border-color: var(--ink-faint); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,138,0,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(224,138,0,0); }
}
.stage-card {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px; margin-right: 4px;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.stage-card:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.stage-card .nm { font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.stage-card .deps {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 8px;
  display: flex; align-items: center; gap: 5px;
}
.stage-card .deps::before { content: "⤓"; color: var(--amber); }
.stage-card .sub-count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 6px; }

.add-stage {
  min-width: 46px; height: 46px; align-self: flex-start; margin-top: 28px;
  border: 1px dashed var(--line-bright); border-radius: 11px; background: none;
  color: var(--ink-faint); font-size: 22px; line-height: 1;
  transition: color .15s, border-color .15s;
}
.add-stage:hover { color: var(--amber); border-color: var(--accent); }

.add-branch {
  border: 1px dashed var(--line-bright); border-radius: 14px; background: none;
  color: var(--ink-dim); padding: 20px; font-size: 14.5px; font-weight: 700; width: 100%;
  transition: color .15s, border-color .15s;
}
.add-branch:hover { color: var(--amber); border-color: var(--accent); }

/* ---------- Drawer этапа ---------- */
.drawer-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.35); backdrop-filter: blur(2px);
  z-index: 90; animation: fade .2s both;
}
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); z-index: 91;
  background: var(--bg-card); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16,24,40,.10);
  padding: 30px 28px; overflow-y: auto;
  animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin: 14px 0 4px; }
.drawer .muted { color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }
.drawer-close {
  position: absolute; top: 18px; right: 20px; background: none; border: none;
  color: var(--ink-faint); font-size: 22px;
}
.drawer-close:hover { color: var(--ink); }
.drawer .sec {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 26px 0 10px;
}
.transitions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-tr {
  background: var(--bg-card); border: 1px solid var(--line-bright); color: var(--ink);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  transition: border-color .15s, background .15s;
}
.btn-tr:hover { border-color: var(--accent); }
.substage {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
}
.substage { display: block; }
.ss-top { display: flex; align-items: center; gap: 11px; }
.ss-master { margin-top: 8px; padding-left: 20px; }
.ss-person { display: inline-flex; align-items: center; gap: 8px; }
.act.ghost { color: var(--ink-faint); border-style: dashed; display: inline-flex; align-items: center; gap: 4px; }
.act.ghost:hover { color: var(--amber); border-color: var(--accent); }
.substage .st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-bright); flex: none; }
.substage.s-in_progress .st-dot { background: var(--green); }
.substage.s-done .st-dot { background: var(--violet); }
.substage.s-accepted .st-dot { background: var(--blue); }
.substage.s-rejected .st-dot { background: var(--red); }
.substage .nm { flex: 1; font-size: 13.5px; font-weight: 600; }
.act {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 9px;
  white-space: nowrap;
}
.act:hover { color: var(--amber); border-color: var(--accent); }
.act.danger:hover { color: var(--red); border-color: var(--red); }
.inline-add { display: flex; gap: 8px; margin-top: 10px; }
.inline-add input {
  flex: 1; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 9px 12px; color: var(--ink); font-size: 13.5px; outline: none;
}
.inline-add input:focus { border-color: var(--accent); }
.inline-add button {
  background: var(--bg-card); border: 1px solid var(--line-bright); color: var(--ink);
  border-radius: 8px; padding: 0 16px; font-weight: 800;
}

/* ---------- Модалка ---------- */
.modal-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.4); z-index: 95;
  display: grid; place-items: center; padding: 20px; animation: fade .2s both;
}
.modal {
  width: 100%; max-width: 460px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px;
  box-shadow: 0 24px 60px rgba(16,24,40,.18); animation: rise .3s both;
}
.modal h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin-bottom: 22px; }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal select {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 12px 14px; color: var(--ink); font-family: var(--body);
  font-size: 14.5px; outline: none;
}
.modal .check { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-size: 14px; color: var(--ink-dim); }
.modal .check input { accent-color: var(--amber); width: 16px; height: 16px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); border: 1px solid var(--ink); color: #fff;
  border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 600; z-index: 99;
  box-shadow: 0 18px 40px rgba(16,24,40,.28); animation: rise .25s both;
}
.toast.err { border-color: var(--red); }

.loading { text-align: center; color: var(--ink-faint); padding: 70px 0; font-family: var(--mono); font-size: 13px; }

/* ---------- Навигация ---------- */
.nav { display: flex; gap: 4px; margin-left: 12px; position: relative; }
.nav a {
  color: var(--ink-dim); font-size: 13.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; transition: color .2s;
  position: relative; z-index: 1;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--accent); background: none; }
.nav .slide-pill { background: rgba(10,77,166,.10); }

/* Плавная «пилюля» выделения (сегмент-контролы как на iOS): едет за активным пунктом.
   Геометрию между перерисовками помнит slidePill() в app.js. */
.slide-pill {
  position: absolute; left: 0; top: 0; z-index: 0; opacity: 0;
  border-radius: 8px; pointer-events: none;
  transition: transform .34s cubic-bezier(.34,1.32,.5,1),
              width .34s cubic-bezier(.34,1.32,.5,1), height .2s ease;
}

/* ---------- Автоматизация ---------- */
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 940px) { .auto-grid { grid-template-columns: 1fr; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sec-head h3 { font-family: var(--disp); font-weight: 600; font-size: 17px; }
.sec-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.btn-amber.sm { padding: 7px 13px; font-size: 12.5px; }
.btn-ghost.sm { padding: 6px 12px; font-size: 12.5px; margin-top: 8px; }

.row-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 17px; margin-bottom: 10px;
  animation: rise .35s both;
}
.row-card.off { opacity: .45; }
.row-card .rc-main { flex: 1; min-width: 0; }
.row-card b { font-size: 14.5px; }
.muted-mono { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.tpl-chain { font-size: 12.5px; color: var(--ink-dim); margin-top: 7px; }
.rule-code {
  font-family: var(--mono); font-size: 13px; color: var(--amber);
  background: rgba(255,176,0,.08); border: 1px solid rgba(255,176,0,.25);
  border-radius: 6px; padding: 2px 8px;
}
.act-del, .act-toggle {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-faint);
  border-radius: 7px; font-size: 12px; font-weight: 700; padding: 4px 10px; flex: none;
}
.act-del:hover { color: var(--red); border-color: var(--red); }
.danger-zone {
  margin-top: 70px; padding: 16px 20px;
  border: 1px dashed rgba(255,93,93,.3); border-radius: 12px;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  color: var(--ink-faint); font-size: 12.5px;
}
.danger-zone button { flex: none; }
.btn-ghost.danger { color: var(--red); border-color: rgba(217,45,32,.35); }
.btn-ghost.danger:hover { color: var(--red); border-color: var(--red); }
.substage .act.danger:hover { color: var(--red); border-color: var(--red); }
.act-toggle:hover { color: var(--amber); border-color: var(--accent); }
.empty.sm { padding: 28px 20px; font-size: 13.5px; }

.tpl-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.tpl-row input {
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 9px 11px; color: var(--ink); font-size: 13px; outline: none;
}
.tpl-row input:focus { border-color: var(--accent); }
.tpl-row .ts-name { flex: 1.1; }
.tpl-row .ts-subs { flex: 1.6; }
.tpl-row .check.sm { margin: 0; font-size: 14px; color: var(--amber); gap: 5px; }

/* ---------- Сотрудники ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.staff-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; animation: rise .35s both;
  transition: border-color .15s;
}
.staff-card:hover { border-color: var(--line-bright); }
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-ava {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--navy));
}
.sc-ava.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.sc-id { min-width: 0; }
.sc-id b { font-size: 15px; display: block; }
.rating { font-family: var(--mono); font-size: 12.5px; color: var(--amber); }
.sc-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.skill-tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-bright); color: var(--ink-dim);
}
.skill-tag.liked { color: var(--amber); border-color: rgba(255,176,0,.4); background: rgba(255,176,0,.07); }
.sc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.flag { font-size: 11px; color: var(--ink-dim); }
.flag.amo { color: var(--green); }
.btn-ghost.xs { padding: 5px 11px; font-size: 12px; }
.act-del.xs { padding: 3px 8px; }

.skill-matrix { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.skill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
}
.skill-row:hover { background: var(--bg-raise); }
.skill-toggles { display: flex; gap: 14px; }
.skill-toggles .check.sm { font-size: 12.5px; color: var(--ink-dim); margin: 0; }

.assigned-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.assigned-row .nm { font-size: 13.5px; font-weight: 600; }
.assigned-row .ar-id { display: flex; flex-direction: column; line-height: 1.3; }
.sc-ava.grp { background: linear-gradient(135deg, var(--blue), #2d6fb8); color: #fff; }
.assign-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 9px; padding: 3px; }
.at-tab { flex: 1; background: none; border: none; color: var(--ink-dim); font-size: 13px; font-weight: 700; padding: 8px; border-radius: 6px; }
.at-tab.on { color: #fff; background: var(--accent); }
.assign-pick .ar-id { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.roster-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 7px;
}
.roster-row .ar-id { display: flex; flex-direction: column; line-height: 1.3; }
.roster-row .nm { font-size: 13.5px; font-weight: 600; }
.roster-group { border: 1px solid var(--line); border-radius: 11px; padding: 8px; margin-bottom: 9px; }
.rg-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rg-head .og-icon { color: var(--blue); }
.rg-head b { font-size: 13.5px; }
.roster-group .roster-row { background: var(--bg-raise); margin-bottom: 5px; }
.assign-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: var(--ink);
  transition: border-color .15s;
}
.assign-pick:hover { border-color: var(--accent); }
.assign-pick .nm { flex: 1; font-size: 13.5px; font-weight: 600; }

/* ---------- Переключатель вида ---------- */
.view-toggle { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 9px; padding: 3px; position: relative; }
.view-toggle a { font-size: 13px; font-weight: 700; color: var(--ink-dim); padding: 6px 14px; border-radius: 6px; position: relative; z-index: 1; transition: color .2s; }
.view-toggle a.on { color: #fff; background: none; }
.view-toggle .slide-pill { background: var(--accent); border-radius: 6px; box-shadow: 0 1px 3px rgba(10,77,166,.35); }

/* ---------- Грейд-чип ---------- */
.grade-chip {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 6px;
  color: var(--gc, #8b99a8); border: 1px solid var(--gc, #8b99a8);
  background: color-mix(in srgb, var(--gc, #8b99a8) 12%, transparent);
  white-space: nowrap;
}

/* ---------- Оргструктура (дерево) ---------- */
.org-tree { display: flex; flex-direction: column; gap: 14px; }
.org-group {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 13px;
  overflow: hidden; animation: rise .35s both;
}
.org-group.unassigned { margin-top: 22px; border-style: dashed; background: transparent; }
.og-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.og-icon { font-size: 17px; }
.og-name { font-size: 15.5px; }
.og-type {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line-bright); border-radius: 5px; padding: 2px 7px;
}
.og-count { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.og-act {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 7px; font-size: 12px; font-weight: 700; padding: 5px 10px;
  transition: color .15s, border-color .15s;
}
.og-act:hover { color: var(--amber); border-color: var(--accent); }
.og-members { padding: 6px 10px; }
.og-empty { padding: 14px 18px; color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }
.og-children { padding: 4px 10px 12px 26px; border-left: 2px solid var(--line); margin-left: 24px; }

.person {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; transition: background .12s;
}
.person:hover { background: var(--bg-raise); }
.person .p-name { font-size: 13.5px; font-weight: 600; }
.person .crown { color: var(--amber); font-size: 12px; }
.person .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.person .dot.ok { background: var(--green); }
.person .dot.busy { background: var(--amber); }
.person .p-edit {
  background: none; border: none; color: var(--ink-faint); font-size: 13px; padding: 2px 6px;
}
.person .p-edit:hover { color: var(--amber); }

.grades-list { display: flex; flex-direction: column; gap: 8px; }
.grade-manage {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px;
}

/* ============================================================
   АДАПТИВ — планшет и телефон (десктоп-first, оверрайды снизу).
   Веб-кабинет; нативка (React Native) — отдельным приложением.
   ============================================================ */
@media (max-width: 860px) {
  .page { padding: 26px 18px 64px; }
  .page-head h2 { font-size: 25px; }
  .branch-head .progress { width: 96px; }
}

@media (max-width: 640px) {
  /* --- Топбар: марка-логотип + скролл-меню + «Выйти»; сабдомен и имя прячем --- */
  .topbar { gap: 8px; padding: 0 12px; height: 54px; }
  .topbar .ws, .topbar .user { display: none; }
  .topbar .spacer { display: none; }
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }      /* остаётся только глиф-марка ::before */
  .nav { margin-left: 2px; flex: 1; min-width: 0; gap: 2px;
         overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .nav a.on { background: rgba(10,77,166,.10); }                  /* пилюля едет криво при скролле — заменяем фоном */
  .nav .slide-pill { display: none; }
  .btn-ghost { padding: 7px 11px; }

  /* --- Страница / заголовки --- */
  .page { padding: 16px 13px 56px; }
  .page-head { gap: 12px; margin-bottom: 20px; }
  .page-head h2 { font-size: 22px; }
  .page-head .crumb { font-size: 12px; }

  /* --- Шапка сделки --- */
  .page-head.deal-head { margin-bottom: 14px; }
  .deal-meta { flex-wrap: wrap; gap: 8px; }
  .deal-toolbar { gap: 8px; margin-bottom: 20px; }
  .tool-group { flex-wrap: wrap; width: 100%; }
  .tool-group > .lbl { width: 100%; margin: 0 0 2px; }

  /* --- Сетки карточек в одну колонку --- */
  .proj-grid, .staff-grid { grid-template-columns: 1fr; gap: 12px; }
  .proj-card { padding: 18px; }
  .staff-card { padding: 16px; }

  /* --- Ветки/этапы --- */
  .branch-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .branch-head h4 { font-size: 15px; }
  .branch-head .progress { width: 100%; order: 9; }
  .branch-head .pctn { order: 8; }
  .stages { padding: 18px 14px 16px; }

  /* --- Модалки/формы под палец --- */
  .modal { padding: 22px 18px; border-radius: 14px; }
  .modal h3 { font-size: 18px; margin-bottom: 16px; }
  .modal .row2 { grid-template-columns: 1fr; }
  .modal .actions { flex-direction: column-reverse; }
  .modal .actions > * { width: 100%; }
  .login-card { padding: 34px 24px 28px; border-radius: 16px; }

  /* --- Любая таблица: горизонтальный скролл вместо разрыва страницы --- */
  .page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Прочее --- */
  .danger-zone { flex-wrap: wrap; gap: 10px; }
  .sec-head { flex-wrap: wrap; gap: 8px; }
  .toast { left: 12px; right: 12px; bottom: 16px; transform: none; text-align: center; }
  .drawer { padding: 26px 18px; }
  .btn-amber { padding: 11px 16px; }
}