/* ============================================================
   CRM «Допуск Право» — дизайн-система (стиль сайта клиента)
   navy institutional · Source Serif 4 заголовки · Manrope система
   mobile-first, десктоп — адаптив вверх
   ============================================================ */
@import url('/css/fonts.css');

:root{
  /* палитра (из бренд var1 + мокапа сайта) */
  --navy:#14243C; --navy-2:#0E1A2C; --navy-3:#1B3050;
  --paper:#EFEEE8; --paper-2:#E7E5DD; --paper-3:#F5F4EF; --paper-4:#FBFAF6;
  --ink:#14243C; --steel:#7E93AE; --steel-d:#48607E;
  --rule:#CFCCC1; --rule-2:#DAD8CE; --mute:#555E6B; --ink-2:#3C4859;
  /* стадии клиента */
  --st-new:#48607E;      /* новый */
  --st-work:#1B3050;     /* в работе */
  --st-wait:#B08D57;     /* ожидание — приглушённая латунь */
  --st-closed:#5B7355;   /* закрыт — приглушённый зелёный */
  /* роль клиента + направление СРО */
  --t-contractor:#1B3050;  /* подрядчик */
  --t-customer:#48607E;    /* заказчик */
  --t-design:#6A5122;      /* СРО по проектированию — тёмная латунь */
  --t-survey:#4C6146;      /* СРО по изысканию — тёмная олива */
  --t-other:#7E93AE;
  /* тинты чипов: производные своих же токенов. Тинты стадий (--st-*) здесь запрещены —
     на одной карточке чип типа и бейдж стадии читались бы как один цветовой класс */
  --t-design-bg:rgba(106,81,34,.13);
  --t-survey-bg:rgba(76,97,70,.13);
  /* семантика */
  --ok:#5B7355; --warn:#B08D57; --danger:#9C4A3C;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.86,0,.07,1);
  --shadow-1:0 1px 2px rgba(20,36,60,.05), 0 8px 24px rgba(20,36,60,.06);
  --shadow-2:0 2px 4px rgba(20,36,60,.06), 0 20px 44px rgba(20,36,60,.12);
  --radius:8px; --radius-sm:6px; --radius-xs:5px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --tabbar-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--paper); overflow-x:hidden}
body{
  font-family:var(--sans); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-optical-sizing:auto; line-height:1.5; font-size:16px;
  min-height:100dvh;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:16px} /* 16px = без зума iOS */
::selection{background:var(--steel); color:var(--navy-2)}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px; border-radius:3px}
button:focus:not(:focus-visible){outline:none}

/* skip-link */
.skip-link{position:absolute; left:12px; top:-60px; z-index:9999; background:var(--paper); color:var(--navy);
  font-weight:700; font-size:13px; padding:11px 18px; border-radius:var(--radius-xs); transition:top .2s var(--ease)}
.skip-link:focus{top:12px; outline:2px solid var(--steel); outline-offset:2px}

.hidden{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ── монограмма ДП ── */
.mono{display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600;
  background:linear-gradient(158deg,var(--navy),var(--navy-2)); color:var(--paper); border-radius:var(--radius-sm); flex-shrink:0; line-height:1}
.mono span{font-weight:300; color:var(--steel)}

/* ============================================================
   LOGIN
   ============================================================ */
.login{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:center;
  padding:32px 26px calc(32px + var(--safe-b));
  background:radial-gradient(120% 80% at 82% 6%, rgba(126,147,174,.14) 0%, transparent 55%),
             linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%);
  color:var(--paper); overflow-y:auto;
}
.login__tex{position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(118deg, rgba(239,238,232,.035) 0 1px, transparent 1px 17px);
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,#000 60%); mask-image:linear-gradient(105deg,transparent 0%,#000 60%)}
.login__ghost{position:absolute; right:-6%; top:50%; transform:translateY(-50%); font-family:var(--serif);
  font-weight:600; font-size:52vh; line-height:.8; color:rgba(126,147,174,.06); letter-spacing:.1em; pointer-events:none; user-select:none}
.login__ghost span{font-weight:300}
.login__box{position:relative; z-index:1; width:100%; max-width:404px; margin:0 auto}
.login__brand{display:flex; align-items:center; gap:14px; margin-bottom:40px}
.login__brand .mono{width:50px; height:50px; font-size:22px}
.login__wm{display:flex; flex-direction:column; gap:6px}
.login__wm .n{font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); line-height:1}
.login__wm .n .p2{font-weight:400; color:#C9D3E0}
/* мелкий текст на НАВИ-фоне: осветлённый steel #A6B8CC даёт ≈4.6:1 на navy (AA) */
.login__wm .r{font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#A6B8CC}
.login__kick{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:#A6B8CC; display:flex; align-items:center; gap:12px; margin-bottom:16px}
.login__kick .ln{width:34px; height:1px; background:#8FA3BB}
.login__title{font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.08; letter-spacing:-.01em; color:var(--paper); margin-bottom:32px; text-wrap:balance}
.login__title b{font-weight:600}
.login .field label{color:#A6B8CC}
.login .field input{background:rgba(14,26,44,.42); border-color:rgba(126,147,174,.3); color:var(--paper)}
.login .field input::placeholder{color:#8B9BB0}
.login .field input:focus{border-color:var(--steel)}
.login__submit{width:100%; background:var(--paper); color:var(--navy); border-radius:var(--radius-xs);
  padding:16px; font-weight:700; font-size:15px; letter-spacing:.01em; margin-top:8px;
  transition:background-color .25s var(--ease), transform .12s var(--ease)}
.login__submit:hover{background:#fff}
.login__submit:active{transform:scale(.99)}
.login__submit:disabled{opacity:.6; cursor:default}
.login__err{margin-top:18px; padding:13px 15px; border-radius:var(--radius-xs);
  background:rgba(156,74,60,.16); border:1px solid rgba(156,74,60,.4); color:#F0C8C0;
  font-size:13.5px; font-weight:500; line-height:1.4}
/* «Не выходить из CRM» — своя коробочка вместо системного чекбокса (нативный на navy-фоне
   в iOS рисуется белым квадратом). Настоящий input скрыт визуально, но доступен клавиатуре. */
.login__remember{display:flex; align-items:center; gap:11px; margin-top:18px; cursor:pointer; user-select:none}
.login__remember input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.login__remember-box{width:20px; height:20px; flex-shrink:0; border-radius:4px;
  border:1.5px solid rgba(126,147,174,.55); background:rgba(14,26,44,.42);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s var(--ease), border-color .18s var(--ease)}
.login__remember-box::after{content:''; width:10px; height:6px; margin-top:-2px;
  border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(-45deg) scale(.6); opacity:0; transition:opacity .16s var(--ease), transform .16s var(--ease)}
.login__remember input:checked + .login__remember-box{background:var(--paper); border-color:var(--paper)}
.login__remember input:checked + .login__remember-box::after{opacity:1; transform:rotate(-45deg) scale(1)}
.login__remember input:focus-visible + .login__remember-box{outline:2px solid var(--steel); outline-offset:2px}
.login__remember-txt{font-size:13.5px; font-weight:500; color:#A6B8CC; line-height:1.35}
.login__foot{position:relative; z-index:1; text-align:center; margin-top:40px; font-size:11.5px; color:#8B9BB0; font-weight:500; letter-spacing:.02em}

/* ============================================================
   BOOT — оболочка «проверяем сессию / нет связи»
   Перекрывает экран входа до вердикта: сетевой сбой ≠ разлогин.
   ============================================================ */
.boot{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:32px 26px; text-align:center;
  background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 100%); color:var(--paper)}
.boot.hidden{display:none !important}
.boot__box{display:flex; flex-direction:column; align-items:center; gap:18px; max-width:340px}
.boot__mono{width:54px; height:54px; font-size:24px; box-shadow:0 0 0 1px rgba(126,147,174,.25);
  animation:bootPulse 1.6s var(--ease) infinite}
@keyframes bootPulse{0%,100%{opacity:.55}50%{opacity:1}}
.boot.is-error .boot__mono{animation:none; opacity:1}
.boot__msg{font-size:14.5px; font-weight:500; color:#A6B8CC; line-height:1.45}
.boot__btn{background:var(--paper); color:var(--navy); border-radius:var(--radius-xs);
  padding:13px 26px; font-weight:700; font-size:14.5px}
.boot__btn:hover{background:#fff}
.boot__link{font-size:13px; font-weight:600; color:#8B9BB0; text-decoration:underline; text-underline-offset:3px}
.boot__link:hover{color:#A6B8CC}
@media (prefers-reduced-motion:reduce){.boot__mono{animation:none}}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:none; min-height:100dvh; flex-direction:column; background:var(--paper)}
.app.on{display:flex}

/* верхняя панель приложения */
.topbar{
  position:sticky; top:0; z-index:50;
  padding:calc(12px + var(--safe-t)) 20px 12px;
  background:linear-gradient(158deg,var(--navy),var(--navy-2)); color:var(--paper);
  display:flex; align-items:center; gap:14px;
  box-shadow:0 2px 14px rgba(14,26,44,.16);
}
.topbar__mono{width:38px; height:38px; font-size:17px}
.topbar__ttl{display:flex; flex-direction:column; gap:2px; min-width:0}
.topbar__ttl .n{font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.02em; text-transform:uppercase; line-height:1; white-space:nowrap}
.topbar__ttl .n .p2{font-weight:400; color:#C9D3E0}
.topbar__ttl .screen{font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.02em; color:var(--steel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__sp{flex:1}
.topbar__btn{width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid rgba(126,147,174,.28);
  display:flex; align-items:center; justify-content:center; color:var(--paper); flex-shrink:0;
  transition:background-color .25s var(--ease), border-color .25s var(--ease)}
.topbar__btn:hover{background:rgba(126,147,174,.14); border-color:var(--steel)}
.topbar__btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7}
/* колокольчик с бейджем в топбаре */
.topbar__bell{position:relative}
.topbar__bell-badge{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:100px;
  background:var(--danger); color:#fff; font-family:var(--sans); font-weight:800; font-size:10px; line-height:1;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--navy)}
.topbar__bell.has-notif svg{animation:bellwiggle 1.6s var(--ease) 1}
@keyframes bellwiggle{0%,100%{transform:rotate(0)}12%{transform:rotate(-14deg)}25%{transform:rotate(11deg)}38%{transform:rotate(-8deg)}50%{transform:rotate(5deg)}62%{transform:rotate(-2deg)}}

/* область вьюх */
.views{flex:1; position:relative; padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 6px)}
.view{display:none; animation:viewIn .38s var(--ease)}
.view.on{display:block}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.wrap{max-width:1180px; margin:0 auto; padding:22px 20px 8px}

/* заголовок раздела */
.vhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px}
.vhead__l{min-width:0}
.vhead__kick{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-d); display:flex; align-items:center; gap:10px; margin-bottom:11px}
.vhead__kick .ln{width:28px; height:1px; background:var(--steel-d)}
.vhead__ttl{font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.06; letter-spacing:-.01em; color:var(--ink)}
.vhead__sub{font-family:var(--sans); font-weight:500; font-size:13px; color:var(--mute); margin-top:6px}

/* ── кнопки ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:var(--radius-xs);
  font-family:var(--sans); font-weight:700; font-size:13.5px; letter-spacing:.01em; padding:12px 18px;
  transition:background-color .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease); white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9}
.btn--primary{background:var(--navy); color:var(--paper)}
.btn--primary:hover{background:var(--navy-3)}
.btn--light{background:var(--paper-3); color:var(--ink); border:1px solid var(--rule)}
.btn--light:hover{background:var(--paper-2); border-color:var(--steel-d)}
.btn--ghost{background:transparent; color:var(--steel-d); border:1px solid var(--rule)}
.btn--ghost:hover{border-color:var(--steel-d); background:var(--paper-3)}
.btn--danger{background:transparent; color:var(--danger); border:1px solid rgba(156,74,60,.4)}
.btn--danger:hover{background:rgba(156,74,60,.08); border-color:var(--danger)}
.btn--block{width:100%}
.btn--sm{padding:9px 14px; font-size:12.5px}
.btn:disabled{opacity:.55; cursor:default}

/* иконка-кнопка */
.iconbtn{width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--rule); display:inline-flex;
  align-items:center; justify-content:center; color:var(--steel-d); background:var(--paper-4);
  transition:background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease)}
.iconbtn:hover{border-color:var(--steel-d); color:var(--ink); background:var(--paper-3)}
.iconbtn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}

/* ── фильтр-чипы ── */
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0; padding:8px 15px; border-radius:100px; border:1px solid var(--rule); background:var(--paper-4);
  font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--steel-d); letter-spacing:.01em;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); display:inline-flex; align-items:center; gap:7px}
.chip:hover{border-color:var(--steel-d)}
.chip.on{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.chip .cnt{font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--steel-d)}
.chip.on .cnt{color:#C9D3E0}

/* ── карточка клиента (список) ── */
.clist{display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch}
.ccard{position:relative; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius);
  padding:17px 18px 16px; display:flex; flex-direction:column; gap:0; text-align:left; width:100%; height:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .12s var(--ease); overflow:hidden}
.ccard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--st-new)}
.ccard[data-stage="в работе"]::before{background:var(--st-work)}
.ccard[data-stage="ожидание"]::before{background:var(--st-wait)}
.ccard[data-stage="закрыт"]::before{background:var(--st-closed)}
.ccard:hover{border-color:var(--steel-d); box-shadow:var(--shadow-1)}
.ccard:active{transform:scale(.995)}
.ccard__top{display:flex; align-items:flex-start; gap:12px}
.ccard__ava{width:42px; height:42px; border-radius:var(--radius-sm); font-size:16px; flex-shrink:0}
.ccard__main{flex:1; min-width:0}
.ccard__name{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); line-height:1.2; overflow-wrap:break-word; word-break:normal; hyphens:none}
.ccard__company{font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--mute); margin-top:2px; overflow-wrap:break-word; word-break:normal; hyphens:none}
.ccard__stage{flex-shrink:0}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px;
  font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.badge--stage{border:1px solid transparent}
.badge--new{background:rgba(72,96,126,.12); color:var(--st-new)}
.badge--work{background:rgba(27,48,80,.12); color:var(--st-work)}
.badge--wait{background:rgba(176,141,87,.15); color:#705626}
.badge--closed{background:rgba(91,115,85,.15); color:#3F5637}
/* тип-маркер */
.tchip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-xs);
  font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.05em; text-transform:uppercase}
.tchip .ti{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8}
.tchip--contractor{background:rgba(27,48,80,.1); color:var(--t-contractor)}
.tchip--customer{background:rgba(72,96,126,.12); color:var(--t-customer)}
.tchip--design{background:var(--t-design-bg); color:var(--t-design)}
.tchip--survey{background:var(--t-survey-bg); color:var(--t-survey)}
.tchip--other{background:rgba(126,147,174,.15); color:var(--steel-d)}
/* футер ВСЕГДА 2 строки (чипы · мета+CTA): высота не зависит от длины ярлыков,
   поэтому линии-разделители и низ карточек в ряду совпадают при любом клиенте */
.ccard__foot{display:grid; grid-template-rows:auto auto; row-gap:8px; justify-items:start;
  margin-top:auto; padding-top:13px; border-top:1px solid var(--rule-2)}
/* Роль и направление НЕобязательны и живут в своих строках: блок чипов всегда ровно две
   строки одной высоты. Пустое поле занимает слот чипом-призраком — без него карточки
   с одним чипом и с двумя дают разную высоту футера, и линии в ряду разъезжаются. */
.ccard__chips{display:grid; grid-template-rows:auto auto; row-gap:6px; justify-items:start}
.tchip--ghost{visibility:hidden; pointer-events:none}
.ccard__footrow{display:flex; align-items:center; gap:10px; width:100%; flex-wrap:wrap}
.ccard__meta{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--mute)}
.ccard__meta svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7; opacity:.8}
.ccard__meta.warn{color:var(--danger)}
.ccard__go{margin-left:auto; color:var(--steel-d); display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:11.5px}
.ccard__go svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s var(--ease)}
.ccard:hover .ccard__go svg{transform:translateX(3px)}

/* пустое состояние */
.empty{text-align:center; padding:56px 24px; color:var(--mute)}
.empty__ic{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; color:var(--steel)}
.empty__ic svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.5}
.empty h3{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); margin-bottom:8px}
.empty p{font-size:13.5px; font-weight:500; line-height:1.5; max-width:38ch; margin:0 auto 18px}

/* ── карточка клиента (детали) ── */
.detail__hero{background:linear-gradient(158deg,var(--navy),var(--navy-2)); color:var(--paper); position:relative; overflow:hidden;
  padding:22px 20px 26px}
.detail__tex{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(70% 90% at 100% 10%, rgba(126,147,174,.18) 0%, transparent 60%),
             repeating-linear-gradient(118deg, rgba(239,238,232,.035) 0 1px, transparent 1px 17px);
  -webkit-mask-image:linear-gradient(95deg,transparent,#000 60%); mask-image:linear-gradient(95deg,transparent,#000 60%)}
.detail__back{position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-bottom:18px}
.detail__back svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}
.detail__back:hover{color:var(--paper)}
.detail__row{position:relative; display:flex; align-items:flex-start; gap:15px}
.detail__ava{width:58px; height:58px; border-radius:var(--radius-sm); font-size:23px; flex-shrink:0; background:linear-gradient(158deg,var(--navy-3),var(--navy-2)); border:1px solid rgba(126,147,174,.25)}
.detail__id{flex:1; min-width:0}
.detail__name{font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.14; color:var(--paper); overflow-wrap:anywhere}
.detail__company{font-family:var(--sans); font-weight:500; font-size:13px; color:#A9B7C8; margin-top:4px; overflow-wrap:anywhere}
.detail__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; position:relative}
.detail__tags .tchip{background:rgba(126,147,174,.16); color:#C9D3E0}
/* цвет типа не теряется в navy-геро: осветлённые версии --t-design / --t-survey */
.detail__tags .tchip--design{color:#C6A46A}
.detail__tags .tchip--survey{color:#9DBA8F}
.detail__tags .badge--new,.detail__tags .badge--work,.detail__tags .badge--wait,.detail__tags .badge--closed{background:rgba(239,238,232,.1); color:var(--paper)}

/* стадия-переключатель */
.stageset{position:relative; margin-top:18px}
.stageset__lbl{font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:9px}
.stageset__row{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.stageset__btn{padding:9px 6px; border-radius:var(--radius-xs); border:1px solid rgba(126,147,174,.28); background:rgba(14,26,44,.3);
  font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.01em; color:#A9B7C8; text-align:center; line-height:1.2;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.stageset__btn:hover{border-color:var(--steel); color:var(--paper)}
.stageset__btn.on{background:var(--paper); color:var(--navy); border-color:var(--paper)}

.detail__actions{position:relative; display:flex; gap:9px; margin-top:20px; flex-wrap:wrap}
.detail__actions .btn{flex:1; min-width:130px}
.detail__actions .btn--light{background:rgba(239,238,232,.1); color:var(--paper); border-color:rgba(126,147,174,.3)}
.detail__actions .btn--light:hover{background:rgba(239,238,232,.18)}

/* блоки деталей */
.dsec{padding:22px 20px 4px; max-width:1180px; margin:0 auto}
.dsec__head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.dsec__no{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--steel-d); font-variant-numeric:tabular-nums}
.dsec__ttl{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); white-space:nowrap}
.dsec__ln{flex:1; height:1px; background:var(--rule)}
.dsec__add{color:var(--steel-d); font-weight:700; font-size:11.5px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  min-height:44px; padding:0 6px; margin:-11px -6px -11px 0; border-radius:var(--radius-xs); transition:color .2s var(--ease), background-color .2s var(--ease)}
.dsec__add svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2}
.dsec__add:hover{color:var(--ink); background:var(--paper-3)}
.dsec__add:focus-visible{outline:2px solid var(--steel-d); outline-offset:2px}

/* контакты */
.contacts{display:grid; grid-template-columns:1fr; gap:10px}
.contact{display:flex; align-items:center; gap:13px; padding:14px 16px; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease)}
.contact:hover{border-color:var(--steel-d)}
.contact__ic{width:34px; height:34px; border-radius:var(--radius-xs); background:var(--paper-2); display:flex; align-items:center; justify-content:center; color:var(--steel-d); flex-shrink:0}
.contact__ic svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7}
.contact__txt{min-width:0}
.contact__k{font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d)}
.contact__v{font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); margin-top:2px; overflow-wrap:anywhere}
.contact__v.mut{color:var(--mute); font-weight:500; font-style:italic}
.contact__go{margin-left:auto; color:var(--steel-d); flex-shrink:0}
.contact__go svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8}

/* заметки */
.notes{background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:16px 18px}
.notes__body{font-family:var(--sans); font-weight:500; font-size:14px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere}
.notes__body.mut{color:var(--mute); font-style:italic}

/* задачи (в детали + список) */
.tasks{display:flex; flex-direction:column; gap:10px}
.task{display:flex; flex-wrap:wrap; align-items:flex-start; gap:13px; padding:14px 16px; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease), background-color .2s var(--ease)}
.task:hover{border-color:var(--steel-d)}
.task.done{opacity:.62; background:var(--paper-3)}
/* тач-таргет 44×44: кликаемая зона — весь блок, визуальный кружок 24px по центру */
.task__check{position:relative; width:44px; height:44px; flex-shrink:0; margin:-10px 0 -10px -10px; background:transparent;
  display:flex; align-items:center; justify-content:center; color:transparent;
  transition:color .2s var(--ease)}
.task__check::before{content:""; width:24px; height:24px; border-radius:50%; border:1.6px solid var(--steel-d);
  display:block; position:absolute; transition:background-color .2s var(--ease), border-color .2s var(--ease)}
.task__check svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; position:relative; z-index:1}
.task.done .task__check{color:#fff}
.task.done .task__check::before{background:var(--ok); border-color:var(--ok)}
.task__body{flex:1; min-width:0}
.task__title{font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; overflow-wrap:anywhere}
.task.done .task__title{text-decoration:line-through; text-decoration-color:var(--steel)}
.task__desc{font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--mute); margin-top:4px; line-height:1.5; overflow-wrap:anywhere}
.task__meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:9px}
.tpill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px; background:var(--paper-2);
  font-family:var(--sans); font-weight:600; font-size:11px; color:var(--steel-d); white-space:nowrap}
.tpill svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8}
.tpill--due{background:rgba(72,96,126,.1)}
.tpill--overdue{background:rgba(156,74,60,.13); color:var(--danger)}
.tpill--today{background:rgba(176,141,87,.18); color:#705626}
.tpill--rem{background:rgba(27,48,80,.09); color:var(--navy-3)}
.tpill--client{background:var(--navy); color:var(--paper); cursor:pointer}
.task__act{display:flex; flex-direction:column; gap:6px; flex-shrink:0}
.task__x{width:38px; height:38px; border-radius:var(--radius-xs); border:1px solid var(--rule); color:var(--steel-d); display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--ease), color .2s var(--ease)}
.task__x:hover{border-color:var(--danger); color:var(--danger)}
.task__x svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9}

/* комментарии к задаче: кнопка со счётчиком + раскрывающаяся ветка */
.task__cmt{min-width:38px; height:38px; padding:0 9px; gap:5px; border-radius:var(--radius-xs); border:1px solid var(--rule); color:var(--steel-d);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease)}
.task__cmt:hover{border-color:var(--steel-d); color:var(--ink)}
.task__cmt.on{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.task__cmt svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9}
.task__cmtn{font-family:var(--sans); font-weight:700; font-size:11.5px; line-height:1}
.task__thread{flex-basis:100%; width:100%; margin-top:2px; padding-top:13px; border-top:1px solid var(--rule-2)}
.thread__load{font-family:var(--sans); font-weight:600; font-size:12px; color:var(--steel-d)}
.thread__empty{font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--mute); font-style:italic; margin-bottom:12px}
.thread__list{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.thread__item{background:var(--paper-4); border:1px solid var(--rule); border-left:3px solid var(--steel); border-radius:var(--radius-xs); padding:10px 12px}
.thread__when{font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.03em; color:var(--steel-d); text-transform:uppercase}
.thread__txt{font-family:var(--sans); font-weight:500; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:4px;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; hyphens:none}
.thread__box{display:flex; flex-direction:column; gap:10px}
.thread__input{width:100%; background:#fff; border:1px solid var(--rule); border-radius:var(--radius-xs); padding:10px 12px;
  font-family:var(--sans); font-weight:500; font-size:16px; color:var(--ink); line-height:1.5; resize:vertical; min-height:64px}
.thread__input::placeholder{color:var(--mute)}
.thread__input:focus{outline:none; border-color:var(--steel-d)}
.thread__btn{align-self:flex-start; min-height:44px}

/* группа задач (список задач по дню) */
.tgroup{margin-bottom:22px}
.tgroup__h{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.tgroup__lbl{font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d); white-space:nowrap}
.tgroup__lbl.today{color:#705626}
.tgroup__lbl.overdue{color:var(--danger)}
.tgroup__cnt{font-family:var(--sans); font-weight:700; font-size:11px; color:var(--steel); background:var(--paper-2); padding:2px 9px; border-radius:100px}
.tgroup__ln{flex:1; height:1px; background:var(--rule)}

/* таймлайн (письма + активность) */
.timeline{position:relative; padding-left:26px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--rule)}
.tl{position:relative; padding-bottom:18px}
.tl:last-child{padding-bottom:2px}
.tl__dot{position:absolute; left:-24px; top:3px; width:15px; height:15px; border-radius:50%; background:var(--paper-4); border:1.6px solid var(--steel-d); display:flex; align-items:center; justify-content:center}
.tl__dot svg{width:8px; height:8px; stroke:var(--steel-d); fill:none; stroke-width:2.4}
.tl__dot--email{border-color:var(--navy-3)} .tl__dot--email svg{stroke:var(--navy-3)}
.tl__dot--stage{border-color:var(--st-wait)} .tl__dot--stage svg{stroke:#705626}
.tl__dot--task{border-color:var(--ok)} .tl__dot--task svg{stroke:var(--ok)}
.tl__dot--note{border-color:var(--steel)}
.tl__dot--file{border-color:var(--navy-3)} .tl__dot--file svg{stroke:var(--navy-3)}
.tl__when{font-family:var(--sans); font-weight:600; font-size:10.5px; letter-spacing:.03em; color:var(--steel-d); text-transform:uppercase}
.tl__txt{font-family:var(--sans); font-weight:500; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:3px; overflow-wrap:break-word; word-break:normal; hyphens:none}
.tl__txt b{font-weight:700; color:var(--ink)}
.tl__mail{margin-top:8px; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:12px 14px}
.tl__mail .subj{font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink)}
.tl__mail .body{font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--mute); margin-top:5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.tl__mail .addr{font-family:var(--sans); font-weight:600; font-size:11px; color:var(--steel-d); margin-top:7px}
/* комментарий в ленте */
.tl__comment{margin-top:6px; background:var(--paper-4); border:1px solid var(--rule); border-left:3px solid var(--steel); border-radius:var(--radius-sm);
  padding:11px 14px; font-family:var(--sans); font-weight:500; font-size:13.5px; line-height:1.55; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
/* ссылка «Скачать» в записи-ленте про документ */
.tl__dl{display:inline-flex; align-items:center; gap:6px; margin-top:8px; min-height:44px; padding:0 13px; border-radius:var(--radius-xs);
  border:1px solid var(--rule); background:var(--paper-4); color:var(--steel-d); font-family:var(--sans); font-weight:700; font-size:12px;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease)}
.tl__dl:hover{border-color:var(--steel-d); color:var(--ink); background:var(--paper-3)}
.tl__dl svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9}

/* ── документы (вложения) ── */
.docs{display:flex; flex-direction:column; gap:10px}
.doc{display:flex; align-items:center; gap:13px; padding:12px 14px; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.doc__ic, .doc__act{align-self:center} /* иконка-бейдж и кнопки центрируются по высоте карты (стабильно при 2-строчном имени) */
.doc:hover{border-color:var(--steel-d); box-shadow:var(--shadow-1)}
.doc__ic{position:relative; width:42px; height:42px; flex-shrink:0; border-radius:var(--radius-xs); background:linear-gradient(158deg,var(--navy-3),var(--navy-2));
  display:flex; align-items:center; justify-content:center; color:var(--paper)}
.doc__ic svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7}
.doc__ext{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); background:#705626; color:#fff;
  font-family:var(--sans); font-weight:800; font-size:7.5px; letter-spacing:.02em; padding:1px 4px; border-radius:3px; line-height:1.2; white-space:nowrap; max-width:44px; overflow:hidden; text-overflow:ellipsis}
.doc__body{flex:1; min-width:0}
.doc__name{font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink); line-height:1.3;
  overflow-wrap:break-word; word-break:normal; hyphens:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.doc__meta{font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--mute); margin-top:3px}
.doc__act{display:flex; align-items:center; gap:8px; flex-shrink:0}
.doc__dl{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 13px; border-radius:var(--radius-xs);
  border:1px solid var(--rule); background:var(--paper-3); color:var(--steel-d); font-family:var(--sans); font-weight:700; font-size:12px;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease)}
.doc__dl:hover{border-color:var(--steel-d); color:var(--ink); background:var(--paper-2)}
.doc__dl svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9}
.doc__del{width:44px; height:44px; border-radius:var(--radius-xs); border:1px solid var(--rule); color:var(--steel-d);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease)}
.doc__del:hover{border-color:var(--danger); color:var(--danger); background:rgba(156,74,60,.06)}
.doc__del svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9}
.doc--loading{opacity:.75}
.docs__hint{font-family:var(--sans); font-weight:500; font-size:11.5px; color:var(--mute); margin-top:11px; line-height:1.4}
.spinner--sm{display:inline-block; width:12px; height:12px; border-width:2px; vertical-align:-2px; margin-left:4px}

/* ── добавить комментарий ── */
.commentbox{display:flex; flex-direction:column; gap:10px; margin-bottom:20px; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:14px}
.commentbox__input{width:100%; background:#fff; border:1px solid var(--rule); border-radius:var(--radius-xs); padding:11px 13px;
  font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink); line-height:1.5; resize:vertical; min-height:56px;
  transition:border-color .2s var(--ease)}
.commentbox__input::placeholder{color:var(--mute)}
.commentbox__input:focus{outline:none; border-color:var(--steel-d)}
.commentbox__btn{align-self:flex-start; min-height:44px}

/* ── напоминания (in-app уведомления, поповер) ── */
.notif-list{display:flex; flex-direction:column; gap:11px}
.notif-item{display:flex; align-items:flex-start; gap:13px; padding:15px 15px 14px; background:var(--paper-4);
  border:1px solid var(--rule); border-left:3px solid var(--st-wait); border-radius:var(--radius-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.notif-item:hover{border-color:var(--steel-d); border-left-color:var(--st-wait); box-shadow:var(--shadow-1)}
.notif-item__ic{width:38px; height:38px; border-radius:50%; flex-shrink:0; background:rgba(176,141,87,.16); color:#705626;
  display:flex; align-items:center; justify-content:center; margin-top:1px}
.notif-item__ic svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8}
.notif-item__body{flex:1; min-width:0; text-align:left}
.notif-item__open{display:block; width:100%; text-align:left; background:none; padding:0}
.notif-item__title{display:block; font-family:var(--sans); font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.3; overflow-wrap:break-word}
.notif-item__client{font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--steel-d); margin-top:3px; display:inline-flex; align-items:center; gap:6px}
.notif-item__client svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8}
.notif-item__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:9px}
.notif-item__pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px; background:rgba(176,141,87,.16);
  font-family:var(--sans); font-weight:600; font-size:11px; color:#705626; white-space:nowrap}
.notif-item__pill svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8}
.notif-item__pill--due{background:var(--paper-2); color:var(--steel-d)}
.notif-item__ack{flex-shrink:0; min-width:44px; min-height:44px; padding:0 12px; border-radius:var(--radius-xs);
  border:1px solid var(--rule); background:var(--paper-3); color:var(--steel-d);
  font-family:var(--sans); font-weight:700; font-size:12px; display:inline-flex; align-items:center; gap:6px; justify-content:center; align-self:center;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.notif-item__ack:hover{background:var(--ok); border-color:var(--ok); color:#fff}
.notif-item__ack svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2}
.notif-item.acking{opacity:.5; pointer-events:none}

/* ── написать письмо ── */
.compose{max-width:760px}
.compose__note{display:flex; gap:12px; align-items:flex-start; background:var(--paper-3); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:20px}
.compose__note .ic{width:30px; height:30px; border-radius:50%; border:1px solid var(--steel-d); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--steel-d)}
.compose__note .ic svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8}
.compose__note p{font-family:var(--sans); font-weight:500; font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.compose__note.warn{background:rgba(176,141,87,.1); border-color:rgba(176,141,87,.4)}
.compose__note.warn .ic{border-color:#705626; color:#705626}

/* лог писем (в разделе письма) */
.emlog{margin-top:28px}

/* ── формы (общие) ── */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block; font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d); margin-bottom:8px}
.field label .req{color:var(--danger); margin-left:3px}
.field input, .field select, .field textarea{width:100%; background:var(--paper-4); border:1px solid var(--rule); border-radius:var(--radius-xs);
  padding:12px 14px; font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink); transition:border-color .2s var(--ease), background-color .2s var(--ease)}
.field textarea{resize:vertical; min-height:110px; line-height:1.55}
.field input::placeholder, .field textarea::placeholder{color:#7A8490}
/* подпись в форме письма: монограмма + редактируемый текст */
.signrow{display:flex; align-items:flex-start; gap:12px}
.signrow__logo{width:48px; height:48px; flex-shrink:0; border-radius:50%; margin-top:2px}
.signrow textarea{min-height:96px}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--steel-d); background:#fff}
.field select{appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2348607E' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
.field__hint{font-family:var(--sans); font-weight:500; font-size:11.5px; color:var(--mute); margin-top:6px; line-height:1.4}
.field__row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field__err{font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--danger); margin-top:6px; display:none}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--danger)}
.field.invalid .field__err{display:block}

/* сегмент-выбор (тип/стадия в форме) */
.segset{display:flex; flex-wrap:wrap; gap:8px}
.seg{padding:10px 15px; border-radius:var(--radius-xs); border:1px solid var(--rule); background:var(--paper-4);
  font-family:var(--sans); font-weight:600; font-size:13px; color:var(--steel-d); display:inline-flex; align-items:center; gap:8px;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.seg svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8}
.seg:hover{border-color:var(--steel-d)}
.seg.on{background:var(--navy); border-color:var(--navy); color:var(--paper)}

/* ── нижняя навигация (таб-бар) ── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:rgba(251,250,246,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--rule); display:none; align-items:stretch;
}
.app.on .tabbar{display:flex}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--steel-d);
  position:relative; transition:color .2s var(--ease)}
.tab svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7}
.tab span{font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.02em}
.tab .tab__badge{position:absolute; top:9px; left:50%; margin-left:5px; min-width:16px; height:16px; padding:0 4px; border-radius:100px;
  background:var(--danger); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1}
.tab.on{color:var(--navy)}
.tab.on::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--navy)}
.tab--add{flex:0 0 auto; width:64px}
.tab--add .plus{width:46px; height:46px; border-radius:50%; background:linear-gradient(158deg,var(--navy),var(--navy-2)); color:var(--paper);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(14,26,44,.28); margin-top:-6px;
  transition:transform .18s var(--ease)}
.tab--add:active .plus{transform:scale(.94)}
.tab--add .plus svg{width:24px; height:24px; stroke-width:2.1}
.tab--add span{margin-top:1px; color:var(--steel-d)}

/* ============================================================
   МОДАЛКИ / ЛИСТЫ (bottom-sheet на мобиле)
   ============================================================ */
.scrim{position:fixed; inset:0; z-index:200; background:rgba(14,26,44,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s .35s}
.scrim.show{opacity:1; visibility:visible; transition:opacity .35s var(--ease)}

.sheet{position:fixed; left:0; right:0; bottom:0; z-index:210; background:var(--paper); border-radius:20px 20px 0 0;
  box-shadow:0 -20px 60px rgba(14,26,44,.3); transform:translateY(100%);
  transition:transform .42s var(--ease), opacity .3s var(--ease), visibility 0s .42s;
  opacity:0; visibility:hidden;
  max-height:92dvh; display:flex; flex-direction:column; overflow:hidden}
.sheet.open{transform:translateY(0); opacity:1; visibility:visible; transition:transform .42s var(--ease), opacity .3s var(--ease)}
.sheet__grip{width:40px; height:4px; border-radius:100px; background:var(--rule); margin:10px auto 0; flex-shrink:0}
.sheet__head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px 14px; border-bottom:1px solid var(--rule-2); flex-shrink:0}
.sheet__ttl{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); line-height:1.15}
.sheet__x{width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; color:var(--steel-d); flex-shrink:0;
  transition:border-color .2s var(--ease), color .2s var(--ease)}
.sheet__x:hover{border-color:var(--steel-d); color:var(--ink)}
.sheet__x svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2}
.sheet__body{padding:20px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.sheet__foot{padding:16px 22px calc(16px + var(--safe-b)); border-top:1px solid var(--rule-2); display:flex; gap:10px; flex-shrink:0; background:var(--paper)}
.sheet__foot .btn{flex:1}

/* confirm-модалка (по центру) */
.confirm{position:fixed; left:50%; top:50%; transform:translate(-50%,-46%); z-index:210; width:min(400px,90vw);
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-2); padding:26px 26px 22px;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s}
.confirm.open{opacity:1; visibility:visible; transform:translate(-50%,-50%); transition:opacity .28s var(--ease), transform .28s var(--ease)}
.confirm__ic{width:48px; height:48px; border-radius:50%; background:rgba(156,74,60,.12); color:var(--danger); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.confirm__ic svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8}
.confirm__ttl{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--ink); line-height:1.2; margin-bottom:8px}
.confirm__msg{font-family:var(--sans); font-weight:500; font-size:13.5px; line-height:1.5; color:var(--mute); margin-bottom:22px}
.confirm__act{display:flex; gap:10px}
.confirm__act .btn{flex:1}

/* ── тост ── */
.toasts{position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index:300; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px}
/* при открытом листе/поповере (моб/планшет) тост уходит НАВЕРХ, чтобы освободить empty-state внутри листа */
@media (max-width:999px){
  .sheet.open ~ .toasts, #notif-sheet.open ~ .toasts{bottom:auto; top:calc(var(--safe-t) + 14px)}
  .sheet.open ~ .toasts .toast, #notif-sheet.open ~ .toasts .toast{transform:translateY(-16px)}
  .sheet.open ~ .toasts .toast.show, #notif-sheet.open ~ .toasts .toast.show{transform:translateY(0)}
}
.toast{max-width:440px; width:100%; display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:var(--radius-sm);
  background:var(--navy); color:var(--paper); box-shadow:var(--shadow-2); font-family:var(--sans); font-weight:600; font-size:13.5px; line-height:1.4;
  transform:translateY(16px); opacity:0; transition:transform .3s var(--ease), opacity .3s var(--ease); pointer-events:auto}
.toast.show{transform:translateY(0); opacity:1}
.toast svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0}
.toast--ok{background:var(--navy)} .toast--ok svg{stroke:#8FB786}
.toast--err{background:#3A2320} .toast--err svg{stroke:#E29A8C}
.toast--info svg{stroke:var(--steel)}

/* ── загрузка ── */
.loading{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:16px; color:var(--steel-d)}
.spinner{width:34px; height:34px; border:2.5px solid var(--rule); border-top-color:var(--navy); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--mute)}
.skel{background:linear-gradient(100deg,var(--paper-3) 30%,var(--paper-2) 50%,var(--paper-3) 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:var(--radius-sm)}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-card{height:96px; margin-bottom:12px}

/* ============================================================
   АДАПТИВ ВВЕРХ (планшет / десктоп)
   ============================================================ */
@media (min-width:680px){
  .wrap, .dsec{padding-left:32px; padding-right:32px}
  .clist{grid-template-columns:repeat(2,1fr); gap:14px}
  .contacts{grid-template-columns:repeat(2,1fr)}
  .detail__hero{padding:26px 32px 30px}
  .vhead__ttl{font-size:31px}
  .sheet{left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-44%); width:min(560px,92vw);
    border-radius:var(--radius); max-height:88dvh}
  .sheet.open{transform:translate(-50%,-50%)}
  .sheet__grip{display:none}
  .sheet__foot{padding-bottom:16px}
}
@media (min-width:1000px){
  /* десктоп: боковая навигация вместо таб-бара */
  .app.on{flex-direction:row; align-items:stretch}
  .topbar{display:none}
  .tabbar{position:sticky; top:0; left:auto; right:auto; bottom:auto; height:100dvh; width:236px; flex-direction:column;
    padding:26px 16px calc(20px + var(--safe-b)); border-top:none; border-right:1px solid var(--rule); background:var(--paper-4); align-items:stretch; gap:4px}
  .app.on .tabbar{display:flex}
  .tabbar__brand{display:flex !important; align-items:center; gap:12px; padding:0 8px 26px; margin-bottom:8px; border-bottom:1px solid var(--rule-2)}
  .tabbar__brand .mono{width:42px; height:42px; font-size:18px}
  .tabbar__brand .wm{display:flex; flex-direction:column; gap:3px; min-width:0}
  .tabbar__brand .wm .n{font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); line-height:1}
  .tabbar__brand .wm .n .p2{font-weight:400; color:var(--steel-d)}
  .tabbar__brand .wm .r{font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-d)}
  .tab{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:13px; padding:12px 14px; border-radius:var(--radius-sm);
    transition:background-color .2s var(--ease), color .2s var(--ease)}
  .tab span{font-size:13.5px; letter-spacing:0}
  .tab.on{background:var(--navy); color:var(--paper)}
  .tab.on::before{display:none}
  .tab .tab__badge{position:static; margin-left:auto; transform:none; top:auto; left:auto}
  .tab--add{width:auto; margin-top:8px; order:99}
  .tab--add .plus{width:auto; height:auto; border-radius:var(--radius-sm); padding:12px 16px; margin-top:0; gap:9px; box-shadow:none; background:linear-gradient(158deg,var(--navy),var(--navy-2))}
  .tab--add .plus svg{width:18px; height:18px}
  .tab--add span{display:none}
  .tab--add .plus::after{content:"Новый клиент"; font-family:var(--sans); font-weight:700; font-size:13.5px; color:var(--paper)}
  .tabbar__notif{display:flex !important} /* в сайдбаре виден; на мобиле колокольчик в топбаре */
  .tabbar__notif .tab__badge{background:var(--danger); color:#fff}
  .tabbar__logout{display:flex !important; margin-top:auto; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--radius-sm);
    color:var(--steel-d); font-family:var(--sans); font-weight:700; font-size:13.5px; transition:background-color .2s var(--ease), color .2s var(--ease)}
  .tabbar__logout:hover{background:var(--paper-3); color:var(--danger)}
  .tabbar__logout:focus-visible{outline:2px solid var(--steel-d); outline-offset:2px; background:var(--paper-3); color:var(--danger)}
  .tabbar__logout svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7}
  .views{flex:1; padding-bottom:40px; overflow-y:auto; max-height:100dvh}
  .wrap, .dsec{padding-top:30px}
  .clist{grid-template-columns:repeat(3,1fr)}
  .toasts{bottom:24px; left:236px}
  .detail__hero{border-radius:0}
  /* на широком экране кнопки задачи (комментарии + удалить) в строку — карточка не растёт вверх */
  .task__act{flex-direction:row}
  /* ветка встаёт под заголовок задачи (44 чекбокс + 13 gap) — видно, что комментарии принадлежат ей */
  .task__thread{margin-left:57px; width:auto; flex-basis:calc(100% - 57px)}
}
@media (min-width:1680px){
  /* 4 колонки только на очень широких экранах (≥1680) — иначе карты узкие, длинные названия рвутся */
  .clist{grid-template-columns:repeat(4,1fr)}
}
/* по умолчанию скрыты десктоп-элементы навигации */
.tabbar__brand, .tabbar__logout, .tabbar__notif{display:none}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .view{animation:none}
  .spinner{animation:spin .8s linear infinite}
}