/* ANGEL CORP · WEB — дизайн v3 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a09; --side:#0d0d0c; --card:#141413; --card2:#1c1c1b;
  --line:#232322; --line2:#2f2f2d;
  --lime:#b7ff62; --text:#f2f2ef; --muted:#9b9b96; --dim:#67675f;
  --red:#ff6b5e; --amber:#ffd166; --blue:#6ea8ff; --violet:#c297ff;
  --dark:#0a0a09;
  --lime-btn:var(--lime); --red-btn:var(--red); --lime-accent:var(--lime);
}
:root[data-theme="light"]{
  --bg:#eeede6; --side:#ffffff; --card:#ffffff; --card2:#f2f1ea;
  --line:#e0ded3; --line2:#cbc9bb;
  --lime:#3f8a12; --muted:#66655d; --dim:#928f83;
  --red:#c0392b; --amber:#96690a; --blue:#2b5fc0; --violet:#7448c9;
  --text:#4a473d; --dark:#294419;
  --lime-accent:#6fcf35; --lime-btn:#6fcf35; --red-btn:#d1493c;
}
html,body{height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);
  font:15px/1.5 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;position:relative}
/* Мягкое фоновое сияние — фиксированное, не мешает скроллу, не шумит.
   Один акцентный цвет (лайм) сверху-слева, холодный контрапункт (синий)
   снизу-справа — так фон читается как «атмосфера», а не заливка. */
body:not(.land)::before{content:'';position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1400px 900px at 50% -20%,rgba(183,255,98,.10) 0%,rgba(183,255,98,.04) 38%,transparent 72%),
    radial-gradient(1200px 800px at 50% 120%,rgba(183,255,98,.05) 0%,transparent 70%)}
.layout{position:relative;z-index:1}
:root[data-theme="light"] body:not(.land)::before{
  background:
    radial-gradient(1400px 900px at 50% -20%,rgba(111,207,53,.07) 0%,rgba(111,207,53,.03) 38%,transparent 72%),
    radial-gradient(1200px 800px at 50% 120%,rgba(111,207,53,.035) 0%,transparent 70%)}
:root[data-theme="light"] .icon-sun{display:none}
:root:not([data-theme="light"]) .icon-moon{display:none}

/* Неоновые «свечения» — фирменная фишка тёмной темы (яркий лайм на
   почти-чёрном). На белом фоне тот же blur-glow превращается в мутное
   зелёное пятно, а не в акцент. В светлой теме заменяем блюр на тонкое
   кольцо/обводку — так же читается как «акцент», но не грязнит белый. */
:root[data-theme="light"] .dot.on{box-shadow:0 0 0 3px rgba(111,207,53,.16)}
:root[data-theme="light"] .p-presence.on{box-shadow:0 0 0 3px rgba(111,207,53,.16)}
:root[data-theme="light"] .money{text-shadow:none}
:root[data-theme="light"] .pay-sum{text-shadow:none}
:root[data-theme="light"] .p-avatar{box-shadow:0 0 0 4px rgba(111,207,53,.12)}
:root[data-theme="light"] .btn:not(.ghost):hover{box-shadow:0 4px 14px rgba(111,207,53,.18)}
:root[data-theme="light"] .nav button.act{box-shadow:inset 0 0 0 1px rgba(111,207,53,.16)}
:root[data-theme="light"] .segmented button.act{box-shadow:none}
:root[data-theme="light"] .modal{box-shadow:0 20px 50px rgba(20,20,15,.18),
  0 0 0 1px var(--line)}
/* Карточки на светлом фоне нуждаются в собственной тени, а не только в
   1px рамке — иначе бумажный лист сливается со страницей. В тёмной теме
   этого не нужно: там карточка и так светлее фона сама по себе. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .sum,
:root[data-theme="light"] .worker-card,
:root[data-theme="light"] .funnel-col,
:root[data-theme="light"] .stat{
  box-shadow:0 1px 2px rgba(20,20,15,.04),0 6px 16px rgba(20,20,15,.05)}
:root[data-theme="light"] .stat{background:var(--card);border-color:var(--line2)}
:root[data-theme="light"] .btn:not(.ghost):not(.danger){
  box-shadow:0 1px 2px rgba(20,20,15,.12)}
:root[data-theme="light"] .iconbtn,
:root[data-theme="light"] .side-user{box-shadow:none}
/* Прозрачная кнопка на светлом фоне читается как выключенная или как
   обычный текст — не как кнопка. В тёмной теме это работало, потому что
   фон и так тёмный и рамка хорошо видна; на светлом нужен лёгкий тон
   заливки, чтобы форма кнопки была видна сразу, без наведения. */
:root[data-theme="light"] .btn.danger{background:rgba(192,57,43,.08)}
:root[data-theme="light"] .btn.danger:hover{background:rgba(192,57,43,.14)}

/* никаких стрелок у числовых полей */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

.grow{flex:1;min-width:0}
.muted{color:var(--muted);font-size:13px}
.empty{color:var(--dim);font-size:13px;padding:6px 0}
.num{font-variant-numeric:tabular-nums}
.money{color:var(--lime);font-weight:600}
.neg{color:var(--red);font-weight:600}

/* ---------- каркас ---------- */
.layout{display:flex;min-height:100vh}
.side{width:var(--side-w,224px);min-width:0;flex-shrink:0;background:color-mix(in oklab,var(--side) 88%,transparent);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:22px 12px 16px;position:sticky;top:0;height:100vh;z-index:2;
  transition:width .18s ease}
body.side-resizing .side{transition:none}
/* сайдбар свёрнут целиком — ширина уходит в 0 через ту же --side-w, что
   и у ручки растягивания, поэтому сохранённая ширина не теряется */
html.side-collapsed .side{overflow:hidden;padding-left:0;padding-right:0;
  border-right:0}
html.side-collapsed .side .logo,html.side-collapsed .side .nav,
html.side-collapsed .side .side-user,html.side-collapsed .side .spacer,
html.side-collapsed .side .side-resize{opacity:0;pointer-events:none}
.side-toggle{position:fixed;top:26px;left:var(--side-w,224px);
  transform:translate(-50%,0);z-index:59;width:28px;height:28px;
  border-radius:50%;background:var(--card);border:1px solid var(--line2);
  color:var(--dim);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  transition:left .18s ease,background-color .15s,color .15s}
.side-toggle:hover{color:var(--lime);border-color:var(--lime-accent)}
/* свёрнутый — кнопку не режет краем экрана: она целиком уезжает в контент
   и висит поверх холста обычной плавающей кнопкой */
html.side-collapsed .side-toggle{left:14px;transform:none}

/* ---------- вкладка-холст (иерархия, сделки) ---------- */
/* Заголовок и поля убраны совсем: холст занимает весь экран от сайдбара до
   края окна, а переключатели висят поверх него рядом с колокольчиком. */
/* высоту фиксируем явно: иначе длинная колонка сделок растягивает .main
   (и всю страницу) вместо того, чтобы прокручиваться внутри доски */
body.canvas-mode .layout{height:100vh;overflow:hidden}
body.canvas-mode .main{max-width:none;padding:0;display:flex;
  flex-direction:column;min-height:0}
.view-canvas{flex:1;min-height:0;display:flex;flex-direction:column}
.canvas-toolbar{position:fixed;top:20px;right:70px;z-index:58;
  display:flex;align-items:center;gap:8px}
@media(max-width:760px){
  /* снизу оставляем место под таб-бар, чтобы холст не уезжал под него */
  body.canvas-mode .main{padding:0 0 76px}
  .canvas-toolbar{top:auto;right:12px;
    bottom:calc(74px + env(safe-area-inset-bottom))}
}
body.side-resizing .side-toggle{transition:none}
@media(max-width:760px){
  .side-toggle{display:none}
  html.side-collapsed .side{overflow:visible;padding-left:12px;padding-right:12px}
  html.side-collapsed .side *{opacity:1;pointer-events:auto}
}
/* ручка растягивания сайдбара — тонкая зона на всю высоту вдоль правого
   края (проще попасть курсором) с маленьким выступом-грипом по центру,
   он и есть видимый намёк «сюда можно потянуть». Только ПК — на мобильных
   сайдбар превращается в горизонтальную полосу, тянуть там нечего. */
.side-resize{position:absolute;top:0;right:-6px;width:12px;height:100%;
  cursor:ew-resize;z-index:3}
.side-resize::after{content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:4px;height:36px;border-radius:3px;
  background:var(--line2);transition:background .15s,height .15s}
.side-resize:hover::after,.side-resize.dragging::after{
  background:var(--lime-accent);height:52px}
body.side-resizing{cursor:ew-resize;user-select:none}
@media(max-width:760px){.side-resize{display:none}}
/* Иконка-нимб над словом «Angel» — везде, включая шапку лендинга.
   Сам нимб — плоский широкий овал (~3.3:1), поэтому иконка НЕ квадратная:
   квадрат срезает почти всю фигуру до еле видимой полоски. Задаём высоту,
   ширина считается сама через aspect-ratio. На маленьких размерах тонкий
   неоновый контур из logo-icon.png (мягкое свечение, для крупного hero)
   пропадает совсем, здесь — logo-bold-wide.png с утолщённым сплошным
   контуром, читается уже с 14px высоты. */
.logo{font-size:14px;letter-spacing:.12em;font-weight:600;padding:0 12px 22px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.logo b{color:var(--lime)}
.logo::before{content:'';height:22px;aspect-ratio:3.29;flex-shrink:0;
  background:url('/static/img/logo-bold-wide.png') center/contain no-repeat}
/* неоновый лайм почти сливается со светлым фоном шапки — в светлой теме
   берём тот же значок, перекрашенный в тёмно-зелёный (--lime светлой темы) */
:root[data-theme="light"] .logo::before{
  background-image:url('/static/img/logo-bold-wide-light.png')}
/* Шапка лендинга — иконка над словом, как нимб над названием компании
   (тот же вид, что в сайдбарах кабинетов), просто компактнее */
.land-top{padding-top:20px;padding-bottom:20px}
.land-top .logo{padding:0;flex-direction:column;gap:10px}
.land-top .logo::before{height:13px;position:relative;top:5px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:block;width:100%;padding:9px 12px;border:0;
  border-left:2px solid transparent;border-radius:0 10px 10px 0;
  margin-left:-2px;background:transparent;color:var(--muted);font:inherit;
  font-size:14px;cursor:pointer;text-align:left;
  transition:background .15s,color .15s,border-color .15s}
.nav button:hover{background:var(--card2);color:var(--text)}
.nav button.act{background:var(--card2);color:var(--lime);
  border-left-color:var(--lime-accent);font-weight:600}
.nav-sep{height:1px;background:var(--line);margin:10px 12px}
.spacer{flex:1}
.side-user{padding:14px 6px 0;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.ava{width:34px;height:34px;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);
  color:var(--lime);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;flex-shrink:0}
.side-user .who{flex:1;min-width:0;overflow:hidden}
.side-user .who div{font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.side-user .who span{font-size:11px;color:var(--dim);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user{flex-wrap:nowrap}
.side-user > .exit{flex-shrink:0}
.exit{border:0;background:transparent;color:var(--dim);cursor:pointer;
  font-size:16px;padding:6px 8px;border-radius:8px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.exit:hover{color:var(--red);background:var(--card)}
/* flex:1 растягивает .main на всё свободное место сбоку от сайдбара;
   max-width ограничивает строку читаемой шириной, margin:auto центрирует
   этот ограниченный блок в оставшемся пространстве (иначе на широких
   экранах контент прилипает к сайдбару слева, а справа пустота) */
.main{flex:1;width:100%;padding:36px 40px 60px;max-width:1440px;margin:0 auto}
h1.page{font-size:26px;font-weight:700;margin-bottom:20px;color:var(--text);
  display:flex;align-items:center;gap:12px;letter-spacing:-.02em}
h1.page:has(+ .page-sub){margin-bottom:4px}
.page-sub{font-size:13px;color:var(--dim);margin-bottom:22px}

/* ---------- карточки ---------- */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px;margin-bottom:16px;position:relative;
  box-shadow:0 1px 0 0 rgba(255,255,255,.02) inset,0 12px 28px -18px rgba(0,0,0,.5)}
.kick{font-size:11px;letter-spacing:.12em;color:var(--dim);
  text-transform:uppercase;margin-bottom:10px}
.kick-toggle{cursor:pointer;user-select:none}
.kick-chevron{display:inline-flex;flex-shrink:0;transition:transform .15s}
.hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.big{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.2}
.status{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);
  flex-shrink:0}
.dot.on{background:var(--lime-accent);box-shadow:0 0 0 3px rgba(183,255,98,.15)}
.dot.warn{background:var(--amber);box-shadow:0 0 0 3px rgba(255,209,102,.15)}

/* ---------- списки ---------- */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-top:1px solid var(--line);position:relative}
.row:first-child{border-top:0}
.t1{font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.t2{font-size:12px;color:var(--dim)}
.cell{text-align:right;min-width:72px;flex-shrink:0}
.cell .v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cell .k{font-size:9px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em;margin-top:1px}
.cell.sm .v{font-size:12px;color:var(--muted);font-weight:500}
.taskpanel{margin-top:12px;border-top:1px solid var(--line);
  padding-top:6px;padding-left:20px}
.wrow{display:flex;align-items:center;gap:12px}
/* шапка страницы задачи: заголовок + кнопки действий + плашка ожидания —
   на узком экране им втроём не хватает одной строки без переноса,
   иначе кнопки садятся поверх названия задачи */
.jb-topbar{flex-wrap:wrap;row-gap:8px}
.jb-topbar #jbTopActions{margin-left:auto}
@media(max-width:520px){
  .jb-topbar #jbCrumb{white-space:normal}
  .jb-topbar #jbTopActions{flex-basis:100%;margin-left:0}
}
.chevron{width:26px;height:26px;display:inline-flex;align-items:center;
  justify-content:center;font-size:16px;color:var(--muted);
  transition:transform .2s;flex-shrink:0;border-radius:7px;
  margin-left:4px}
.chevron.open{transform:rotate(-180deg)}
.wrow:hover .chevron{color:var(--text)}
.tp-head{display:flex;align-items:center;padding:8px 0 4px;justify-content:flex-end}
.worker-card .wrow{padding:0}
/* финансы */
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fin-section{}
.fin-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-top:1px solid var(--line);position:relative;border-radius:10px}
.fin-row:first-of-type{border-top:0}
.fin-person{font-size:13px;font-weight:600;min-width:90px;flex-shrink:0;display:flex;align-items:center;gap:6px}
.fin-detail{flex:1;min-width:0;font-size:12px;color:var(--muted);line-height:1.4}
.fin-ts{font-size:11px;color:var(--dim);white-space:nowrap;flex-shrink:0}
.fin-acts{display:flex;gap:6px;flex-shrink:0}
.fin-nums{flex:1;display:flex;align-items:center;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.fin-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .fin-row{flex-wrap:wrap}
  .fin-person{min-width:0;flex-basis:100%}
  .fin-detail{flex-basis:100%;order:3}
  .fin-ts{order:1}
  .fin-acts{order:2;margin-left:auto}
}
/* профиль сотрудника */
.profile-hero{display:flex;align-items:center;gap:20px}
.p-avatar{width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--lime-accent) 0%,#4db529 100%);
  color:var(--dark);display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;flex-shrink:0}
.p-name{font-size:20px;font-weight:700;color:var(--lime)}
.p-sub{font-size:12px;color:var(--muted);margin-top:4px}
/* точка присутствия поверх аватара — как статус в мессенджерах */
.p-avatar-wrap{position:relative;flex-shrink:0}
.p-presence{position:absolute;right:1px;bottom:1px;width:16px;height:16px;
  border-radius:50%;border:3px solid var(--card);background:var(--dim)}
.p-presence.on{background:var(--lime-accent);box-shadow:0 0 6px rgba(183,255,98,.5)}
.p-presence.warn{background:var(--amber)}
/* кнопка «изменить фото» — камера поверх своей аватарки, видна по наведению
   (на тач-экранах, где hover нет, показана всегда, но полупрозрачно) */
.p-avatar-edit{position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;opacity:0;transition:opacity .15s}
.p-avatar-wrap:hover .p-avatar-edit{opacity:1}
@media (hover:none){.p-avatar-edit{opacity:.85}}
.stat-lime{background:linear-gradient(135deg,rgba(183,255,98,.12) 0%,rgba(183,255,98,.04) 100%);
  border-color:rgba(183,255,98,.22)}
.stat-lime .v{color:var(--lime)}
/* чувствительные данные */
.sens-block{background:var(--card2);border:1px solid var(--line2);
  border-radius:10px;padding:12px;font-size:12px;color:var(--text);
  white-space:pre-wrap;word-break:break-all;font-family:monospace}
/* редактируемый вариант — тот же вид, но textarea (окно «Доступы контрагента») */
.sens-edit{width:100%;resize:vertical;font:inherit}
.sens-edit:focus{outline:none;border-color:var(--lime-accent)}
/* вкладки модального окна */
.tab-bar{display:flex;gap:4px;margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.tab-btn{border:0;background:transparent;color:var(--muted);font:inherit;
  font-size:13px;padding:4px 10px;cursor:pointer;border-radius:8px;
  transition:color .15s,background .15s}
.tab-btn:hover{color:var(--text);background:var(--card2)}
.tab-btn.act{color:var(--lime);font-weight:600}

/* ---------- чипы ---------- */
.chip{display:inline-block;font-size:11px;letter-spacing:.02em;
  padding:3px 9px;border:1px solid transparent;border-radius:999px;
  font-weight:600;white-space:nowrap;text-transform:none;
  color:var(--muted);background:var(--card2);vertical-align:middle}
.chip.pend{color:var(--amber);background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.25)}
.chip.ok{color:var(--lime);background:rgba(183,255,98,.1);border-color:rgba(183,255,98,.25)}
.chip.no{color:var(--red);background:rgba(255,107,94,.1);border-color:rgba(255,107,94,.25)}
.chip.proc{color:#7dd3fc;background:rgba(125,211,252,.1);border-color:rgba(125,211,252,.25)}

/* ---------- кнопки ---------- */
.btn{border:0;border-radius:10px;padding:9px 18px;font:inherit;
  font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in oklab,var(--lime-btn) 100%,white 12%) 0%,var(--lime-btn) 100%);
  color:var(--dark);transition:filter .15s,transform .15s,box-shadow .15s;
  white-space:nowrap;text-decoration:none;display:inline-block;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 14px -8px rgba(0,0,0,.5)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 18px -8px rgba(0,0,0,.55)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:default;filter:none;transform:none;box-shadow:none}
.btn.ghost{background:var(--card2);color:var(--text);
  border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--dim);filter:none;background:var(--line)}
.btn.danger{background:transparent;border:1px solid var(--red-btn);
  color:var(--red-btn);box-shadow:none}
.btn.danger:hover{background:rgba(255,107,94,.08);filter:none;transform:none}
.btn.sm{padding:6px 12px;font-size:12px}
.iconbtn{width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line2);background:var(--card2);color:var(--muted);
  font-size:17px;cursor:pointer;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:color .15s,border-color .15s}
.iconbtn:hover{color:var(--text);border-color:var(--dim)}

/* ---------- меню «⋯» ---------- */
.menu{position:relative;display:inline-block;flex-shrink:0}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;
  background:var(--card2);border:1px solid var(--line2);border-radius:12px;
  padding:6px;display:none;z-index:40;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menu-list.open{display:block}
.menu-list button{display:block;width:100%;text-align:left;padding:8px 10px;
  border:0;background:transparent;color:var(--text);font:inherit;
  font-size:13px;border-radius:8px;cursor:pointer}
.menu-list button:hover{background:var(--card)}
.menu-list button.danger{color:var(--red)}

/* ---------- формы ---------- */
input,textarea,select{background:var(--card2);border:1px solid var(--line2);
  border-radius:10px;color:var(--text);font:inherit;font-size:14px;
  padding:9px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--lime-accent);
  box-shadow:0 0 0 3px rgba(183,255,98,.14)}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:disabled,textarea:disabled,select:disabled{background:transparent;
  border-color:var(--line);color:var(--muted);cursor:default}
textarea{width:100%;resize:vertical;min-height:100px}
select{cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select{width:100%}
.rate-input{width:78px;text-align:right;padding:6px 10px;font-size:13px}

/* ---------- модальные окна ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;
  align-items:center;justify-content:center;z-index:50;
  backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.modal{width:min(420px,calc(100vw - 32px));background:var(--card);
  border:1px solid var(--line2);border-radius:16px;padding:22px;
  max-height:85vh;overflow:auto}
.modal.wide{width:min(720px,calc(100vw - 32px))}
.modal h3{font-size:16px;margin-bottom:16px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;
  margin-top:18px}
.file-preview-modal{width:min(720px,calc(100vw - 32px))}
.fp-body{display:flex;align-items:center;justify-content:center;
  min-height:120px}
.fp-body img{max-width:100%;max-height:70vh;border-radius:10px;display:block}

/* ---------- профиль ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px}
.stat{background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:14px;box-shadow:0 1px 0 0 rgba(255,255,255,.02) inset}
.stat .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .k{font-size:11px;color:var(--dim);letter-spacing:.05em;
  text-transform:uppercase;margin-top:2px}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);color:var(--lime);display:flex;
  align-items:center;justify-content:center;font-size:24px;font-weight:600;
  flex-shrink:0}

/* ---------- вход ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:20px}
.auth{width:360px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;
  gap:12px}
.auth .logo{text-align:center;padding:0 0 2px;font-size:16px}
.auth .sub{text-align:center;font-size:12px;color:var(--dim);
  margin-bottom:6px}
.auth input{width:100%}
.auth .btn{width:100%;margin-top:4px}
.auth .hint{text-align:center;font-size:12px;color:var(--dim);margin-top:4px}

/* ---------- тост ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--card2);border:1px solid var(--line2);color:var(--text);
  padding:10px 18px;border-radius:12px;display:none;z-index:60;
  font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw}

/* ---------- мобильная версия ---------- */
/* Навигация переезжает вниз, в таб-бар на манер нативных приложений —
   так пункты не нужно листать горизонтально и не приходится гадать,
   что вообще есть в меню. Пункты, которые не влезли (обычно с 5-го),
   уходят под кнопку «Ещё» — открывается шторка снизу со списком.
   Верхняя полоса (.side) остаётся только под лого + тему/выход. */
@media(max-width:760px){
  .layout{flex-direction:column}
  .side{width:100%;height:auto;position:sticky;top:0;z-index:40;
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .logo{padding:0 10px 0 4px;font-size:13px;flex-shrink:0;
    flex-direction:row;text-align:left}
  .logo::before{height:18px;width:auto}
  .side > .nav{display:none}
  .spacer{display:none}
  .side-user{border:0;padding:0;flex-shrink:0}
  .side-user .who{display:none}
  .side-user .ava{display:none}
  .main{padding:16px 14px 84px}
  .cell{min-width:70px}
}
.mobile-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--side);border-top:1px solid var(--line);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
@media(max-width:760px){.mobile-tabbar{display:flex;gap:2px}}
.mobile-tabbar button{flex:1;min-width:0;background:transparent;border:0;
  color:var(--muted);font:inherit;font-size:11px;line-height:1.25;
  padding:9px 2px 7px;border-radius:10px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-tabbar button.act{color:var(--lime);background:var(--card2)}
.mobile-more-sheet{position:fixed;inset:0;z-index:70;display:none}
.mobile-more-sheet.open{display:block}
.mobile-more-sheet .msh-backdrop{position:absolute;inset:0;
  background:rgba(0,0,0,.5)}
.mobile-more-sheet .msh-panel{position:absolute;left:0;right:0;bottom:0;
  background:var(--side);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  max-height:70vh;overflow-y:auto}
.mobile-more-sheet .msh-panel button{display:block;width:100%;
  text-align:left;padding:13px 14px;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:15px;border-radius:10px}
.mobile-more-sheet .msh-panel button.act{color:var(--lime);
  background:var(--card2)}
.mobile-more-sheet .msh-grip{width:36px;height:4px;border-radius:2px;
  background:var(--line2);margin:2px auto 8px}

/* ===== блок 1: проекты, часы, календарь, обсуждение ===== */
.badge{display:inline-block;min-width:17px;padding:0 5px;margin-left:6px;
  border-radius:9px;background:var(--lime-accent);color:var(--dark);
  font-size:10px;font-weight:700;line-height:17px;text-align:center}

.ptag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:7px;
  background:var(--card2);border:1px solid var(--line2);
  font-size:10px;color:var(--muted);vertical-align:middle}

.pendbar{margin-top:14px;padding:10px 12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line2);
  font-size:12px;color:var(--muted)}
.pendbar b{color:var(--amber)}

.row-inputs{display:flex;gap:10px}
.row-inputs .field{flex:1;min-width:0}

/* обсуждение */
.chat{max-height:260px;overflow-y:auto;margin-bottom:12px;
  display:flex;flex-direction:column;gap:8px}
.chat .msg{padding:9px 11px;border-radius:10px;background:var(--card2);
  border:1px solid var(--line);font-size:13px;line-height:1.45}
.chat .msg.adm{border-color:var(--line2);background:#191918}
.chat .msg-top{font-size:10px;color:var(--dim);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.4px}

/* календарь сотрудника */
.cal-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-title{font-size:14px;font-weight:600;text-transform:capitalize;
  min-width:150px;text-align:center}
.cal-legend{display:flex;gap:12px;font-size:11px;color:var(--muted)}
.cal-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;
  margin-right:5px;vertical-align:middle}
.cal-legend i.off{background:var(--blue)}
.cal-legend i.busy{background:var(--amber)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid.head{margin-bottom:6px}
.cal-h{font-size:10px;color:var(--dim);text-align:center;
  text-transform:uppercase;letter-spacing:.6px}
.cal-cell{position:relative;min-height:58px;padding:7px 8px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;gap:4px;transition:border-color .12s}
.cal-cell:hover{border-color:var(--line2)}
.cal-cell.mute{background:transparent;border:none;cursor:default;min-height:0}
.cal-cell .cd{font-size:13px;font-weight:600}
.cal-cell .cs{font-size:10px;color:var(--muted);line-height:1.25}
.cal-cell.today{border-color:var(--lime-accent)}
.cal-cell.off{background:rgba(110,168,255,.12);border-color:rgba(110,168,255,.35)}
.cal-cell.off .cs{color:var(--blue)}
.cal-cell.busy{background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.32)}
.cal-cell.busy .cs{color:var(--amber)}
/* точка встречи — накладывается поверх любого фонового статуса дня */
.cal-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--violet);box-shadow:0 0 5px rgba(194,151,255,.7)}
.cal-legend i.meet{background:var(--violet)}
/* календарь заказчика: те же .cal-cell, плюс свои модификаторы */
.cal-cell.blank{background:transparent;border:none;cursor:default;min-height:0}
.cal-cell.has-due{border-color:rgba(255,107,94,.4)}
.cal-mini{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;background:var(--card);border-radius:5px;padding:1px 5px}
.cal-mini.meet{color:var(--violet);background:rgba(194,151,255,.12)}

/* статус-точка и кнопки в мелком размере */
.iconbtn.sm{width:26px;height:26px;font-size:14px}

@media (max-width:700px){
  .cal-cell{min-height:48px;padding:5px}
  .cal-cell .cs{display:none}
  .row-inputs{flex-direction:column}
}

/* ===== поле пароля с кнопкой генерации ===== */
.pwrow{display:flex;gap:8px;align-items:stretch}
.pwrow input{flex:1;min-width:0;font-family:monospace;letter-spacing:.5px}
/* задача ждёт внешнего ответа — штраф за просрочку на паузе */
.wait-badge{margin:10px 0;padding:8px 12px;border-radius:10px;
  border:1px solid rgba(125,211,252,.35);background:rgba(125,211,252,.08);
  color:var(--blue);font-size:12px}
.wait-badge .t2{color:var(--dim)}
/* штраф в сводке — тем же красным, что и отрицательный баланс */
.penalty{color:var(--red);font-weight:600}
/* выбор ставки на смену — список кнопок во всю ширину окна */
.shift-rate-pick{display:flex;width:100%;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:8px;text-align:left}
/* сумма в окне заявки — крупная и редактируемая */
.pay-sum-field{margin-bottom:2px}
.pay-sum-input{width:100%;background:transparent;border:0;border-bottom:1px
  dashed var(--line2);border-radius:0;padding:2px 0 6px;color:var(--lime);
  font:inherit;font-size:30px;font-weight:700;letter-spacing:-.02em}
.pay-sum-input:focus{outline:none;border-bottom-color:var(--lime-accent)}
.genbtn{width:38px;height:38px;flex-shrink:0;border-radius:11px;
  border:1px solid var(--line2);background:var(--card2);color:var(--muted);
  font-size:17px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s}
.genbtn:hover{color:var(--dark);background:var(--lime-accent);border-color:var(--lime-accent)}

/* ===== шапка списка задач ===== */
.tp-head{justify-content:flex-start}
.tp-label{font-size:10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.7px}
.tp-empty{padding:14px 0 16px;font-size:12px;color:var(--dim);text-align:center}

/* ===== интервалы занятости в модальном окне ===== */
.daylist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.daylist .di{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:10px;background:var(--card2);border:1px solid var(--line);
  font-size:13px}
.daylist .di .dt{color:var(--amber);font-variant-numeric:tabular-nums}
.daylist .di .dn{color:var(--muted);font-size:11px}
.daylist .di button{width:24px;height:24px;border-radius:7px;flex-shrink:0;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  cursor:pointer;font-size:13px;line-height:1}
.daylist .di button:hover{color:var(--red);border-color:var(--red)}
.field .genbtn{margin-top:0}

/* ===== окно подтверждения выплаты ===== */
.pay-sum{font-size:26px;font-weight:600;color:var(--lime);
  font-variant-numeric:tabular-nums;margin-bottom:2px}
.req-box{margin-top:6px;padding:10px 12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line2);font-size:13px;
  color:var(--text);word-break:break-word;white-space:pre-wrap}

/* ===== расписание сотрудника в календаре ===== */
.taskpanel .cs{display:flex;align-items:center;gap:10px;padding:6px 0;
  font-size:12px;border-bottom:1px solid var(--line)}
.taskpanel .cs:last-child{border-bottom:0}
.taskpanel .cs .cd{color:var(--muted);min-width:120px}

/* ===== бейдж уведомлений ===== */
.side-user{cursor:pointer;border-radius:12px;transition:background .15s}
.side-user:hover{background:var(--card)}
.nbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--lime-accent);color:var(--dark);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ===== карточка проекта ===== */
.pj{border-top:1px solid var(--line)}
.pj:first-child{border-top:0}
.pj .wrow{padding:10px 0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;margin:4px 0 14px}
.pg{padding:10px 12px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.pg span{font-size:10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.6px}
.pg b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.pg b.neg{color:var(--red)}
.creds{margin:8px 0 0;padding:12px;border-radius:11px;background:#080807;
  border:1px solid var(--line2);color:#b7ff62;font-size:12px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-all;max-height:320px;overflow:auto}

/* ===== cmd-консоль логов ===== */
.cmd{background:#070706;border:1px solid var(--line2);border-radius:14px;
  overflow:hidden;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,
  "Liberation Mono",monospace;font-size:12px}
.cmd-top{display:flex;gap:18px;padding:16px 18px 12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);animation:fadein .5s ease}
.cmd-art{margin:0;color:#b7ff62;font-size:10px;line-height:1.25;
  white-space:pre;}
.cmd-info{display:flex;flex-direction:column;gap:2px;min-width:240px;
  flex:1;justify-content:center}
.ci{display:flex;gap:10px;line-height:1.5}
.ci .ck{color:#b7ff62;min-width:96px;text-transform:uppercase;
  font-size:10px;letter-spacing:.6px;padding-top:1px}
.ci .cv{color:var(--muted);word-break:break-word}
.cmd-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;
  border-bottom:1px solid var(--line);background:#0b0b0a}
.cmd-bar .prompt{color:#b7ff62;white-space:nowrap}
.cmd-bar input{flex:1;background:transparent;border:0;outline:none;
  color:#f2f2ef;font:inherit;padding:4px 0}
.cmd-bar input::placeholder{color:var(--dim)}
.cmd-bar select{background:var(--card2);color:var(--muted);font:inherit;
  border:1px solid var(--line2);border-radius:8px;padding:4px 8px;outline:none}
.cmd-out{max-height:min(62vh,620px);overflow:auto;padding:10px 14px 14px}
.cmd-out .ln{display:flex;gap:10px;padding:1px 0;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;animation:fadein .25s ease}
.cmd-out .lts{color:var(--dim);flex-shrink:0}
.cmd-out .llv{flex-shrink:0;white-space:pre}
.cmd-out .lwho{color:#f2f2ef;flex-shrink:0;min-width:130px}
.cmd-out .lac{color:var(--muted)}
.cmd-out .ldt{color:var(--dim)}
.cmd-out .li .llv{color:#b7ff62}
.cmd-out .lw .llv,.cmd-out .lw .lac{color:var(--amber)}
.cmd-out .lt .llv,.cmd-out .lt .lac{color:#6ec1ff}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ===== импорт ===== */
#impFile{flex:1;font-size:12px;color:var(--muted)}

/* ===== поиск в заголовках разделов ===== */
.search{background:var(--card);border:1px solid var(--line2);border-radius:10px;
  padding:8px 12px;color:var(--text);font-size:13px;font-weight:400;
  font-family:inherit;min-width:200px;max-width:280px;outline:none;
  transition:border-color .15s ease}
.search::placeholder{color:var(--dim)}
.search:focus{border-color:var(--lime-accent)}

/* ===== реквизиты ===== */
.req-box.big{font-size:14px;line-height:1.5;padding:12px 14px;
  background:#080807;border-color:var(--line2);color:#b7ff62;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.3px;user-select:all}
/* карточка денежной заявки (новые / в обработке) — раньше сумма и
   реквизиты были частью общей строки .fin-row и на узком экране слипались
   в один нечитаемый ряд. Теперь у заявки своя мини-карточка: шапка
   имя/сумма, реквизиты моноширинным текстом без рамки-таблетки, снизу
   через разделитель — дата и кнопка действия. */
.req-card{background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-top:10px}
.req-card:first-child{margin-top:0}
.req-card-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px}
.req-card-top .name-link{font-size:14px;font-weight:600}
.req-card-amt{font-size:16px;font-weight:700;flex-shrink:0}
.req-card-req{margin-top:4px;font-family:ui-monospace,"SFMono-Regular",
  Menlo,Consolas,monospace;font-size:12px;color:var(--muted);
  word-break:break-word}
.req-card-bottom{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.req-card-bottom .req-card-ts{font-size:11px;color:var(--dim)}

/* ===== стекло и мягкий неон ===== */
.overlay{background:rgba(4,4,3,.62);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%)}
.modal{position:relative;box-shadow:0 30px 70px rgba(0,0,0,.65),
  0 0 0 1px var(--line2),0 0 46px rgba(183,255,98,.04);
  animation:mpop .16s ease}
@keyframes mpop{from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}}
.modal h3{padding-right:28px}
.mx{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;
  border-radius:9px;background:transparent;color:var(--dim);font-size:19px;
  line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:color .15s,background .15s;z-index:2}
.mx:hover{color:var(--text);background:var(--card2)}
.btn:not(.ghost):hover{box-shadow:0 6px 16px rgba(0,0,0,.18)}


.p-avatar{box-shadow:0 0 0 1px var(--line2)}

.fin-row:hover{background:none}
.fin-row:hover::before{content:'';position:absolute;inset:0 -12px;
  background:rgba(255,255,255,.025);border-radius:10px;z-index:-1}

/* ===== подсказки по наведению (data-tip="текст") ===== */
[data-tip]{position:relative;cursor:help}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;
  bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  background:#111210;color:#f2f2ef;border:1px solid var(--line2);
  border-radius:9px;padding:7px 10px;font-size:12px;line-height:1.4;
  font-weight:400;white-space:normal;width:max-content;max-width:230px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;z-index:50;
  text-align:left}
[data-tip]::before{content:'';position:absolute;left:50%;
  bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;
  border-top-color:#111210;opacity:0;pointer-events:none;
  transition:opacity .14s ease;z-index:50}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;
  transform:translateX(-50%) translateY(0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1}

/* плавных переходов между разделами больше нет — раздражало при частом
   переключении вкладок ("моргание сайта") */
.card,.fin-row,.job-slist-head+*{animation:fadein .22s ease}
.fin-search{width:100%;max-width:none;margin:0 0 8px}

/* ===== выпадающий список с поиском ===== */
.combo{position:relative}
.combo-head{width:100%;display:flex;align-items:center;gap:8px;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;
  color:var(--text);font:inherit;font-size:14px;padding:9px 12px;
  cursor:pointer;text-align:left;transition:border-color .15s}
.combo-head:hover,.combo.open .combo-head{border-color:var(--lime-accent)}
.combo-head .dim{color:var(--dim)}
.combo-sub{font-size:12px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:42%}
.combo-arrow{color:var(--dim);font-size:11px;margin-left:auto;flex-shrink:0}
.combo-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  background:rgba(20,20,19,.98);border:1px solid var(--line2);
  border-radius:12px;padding:8px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 48px rgba(0,0,0,.6),0 0 0 1px var(--line2)}
.combo-q{width:100%;margin-bottom:6px;padding:7px 10px;font-size:13px}
.combo-list{max-height:220px;overflow:auto}
.combo-item{width:100%;display:flex;align-items:center;gap:10px;border:0;
  background:transparent;color:var(--text);font:inherit;font-size:13px;
  padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.combo-item:hover{background:var(--card2)}
.combo-item.act{color:var(--lime)}
.ci-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ci-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);
  flex-shrink:0}
.ci-sub{font-size:11px;color:var(--dim);white-space:nowrap;flex-shrink:0}
.combo-empty{color:var(--dim);font-size:12px;padding:8px 10px;line-height:1.4}
/* назначение на задачу — список постоянно на виду, не выпадашка, но
   внутренние строки (.combo-item/.ci-name/.ci-sub) те же, что и у combo */
.assign-who-box{margin-top:6px;padding:6px;border:1px solid var(--line2);
  border-radius:10px;background:var(--card2)}
.assign-who-check{color:var(--lime);flex-shrink:0;font-weight:700}

/* ===== аккуратная прокрутка длинных списков ===== */
.scroll{max-height:340px;overflow:auto;padding-right:2px}
.combo-list::-webkit-scrollbar,.scroll::-webkit-scrollbar{width:8px}
.combo-list::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track{
  background:transparent}
.combo-list::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb{
  background:var(--line2);border-radius:8px}
.combo-list::-webkit-scrollbar-thumb:hover,
.scroll::-webkit-scrollbar-thumb:hover{background:#3d3d3a}
.combo-list,.scroll{scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent}

/* ===== страницы ===== */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:10px 2px 2px}
.pgbtn{width:26px;height:26px;border:1px solid var(--line2);border-radius:8px;
  background:transparent;color:var(--text);font-size:13px;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s}
.pgbtn:hover:not(:disabled){border-color:var(--lime-accent);color:var(--lime)}
.pgbtn:disabled{color:var(--dim);cursor:default;opacity:.45}
.pgnum{font-size:11px;color:var(--dim);letter-spacing:.02em}
.pgsize{margin-right:auto;background:transparent;border:1px solid var(--line2);
  border-radius:8px;color:var(--muted);font:inherit;font-size:11px;
  padding:4px 6px;cursor:pointer}
.pgsize:hover{border-color:var(--lime-accent);color:var(--lime)}

/* ===== бейдж руководителя (уголок шапки, не во всю ширину) ===== */
.curator-badge{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:5px 12px 5px 6px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);transition:border-color .15s}
.curator-badge:hover{border-color:var(--line2)}
.curator-badge .cb-name{font-size:12px;font-weight:600;line-height:1.25}
.curator-badge .cb-role{font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
@media(max-width:760px){
  h1.page{flex-wrap:wrap;row-gap:8px}
}

/* ===== история завершённых задач ===== */
.hist-head{display:flex;align-items:center;gap:8px;cursor:pointer;
  color:var(--muted);font-size:12px;padding:10px 2px 2px;
  transition:color .15s}
.hist-head:hover{color:var(--text)}
.hist-head .chevron{font-size:11px}
.hint{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.45}

/* ===== единая шкала отступов: только 8 и 16 ===== */
.card{padding:16px;margin-bottom:16px}
.hero{padding:16px}
.row{padding:8px 0;gap:8px}
.fin-row{padding:8px 0;gap:8px}
.cs{padding:8px 0}
.taskpanel{padding:8px 0 0}
.fin-section{padding:16px}
.modal{padding:16px}
.modal h3{margin:0 0 16px}
.modal .actions{margin-top:16px;gap:8px}
.field{margin-top:8px}
.combo-pop{padding:8px}
.pager{padding:8px 0 0;margin-bottom:16px}
.tab-bar{gap:8px;margin-bottom:16px}

/* журнал: строка «показать весь день» */
.lmore{cursor:pointer}
.lmore:hover .lac{color:var(--lime)}

/* ===== сделки: доска этапов ===== */
/* Никакого холста и масштабирования: доска листается влево-вправо, а вниз —
   когда в колонке много карточек. Пальцем прокрутка нативная, мышью можно
   ещё и тащить за пустое место (initDragScroll). Колонки — компактные
   блоки по содержимому. */
.deal-board{position:relative;overflow:auto;cursor:grab;
  flex:1;min-height:0;scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent}
.deal-board.canvas-panning{cursor:grabbing}
.deal-board::-webkit-scrollbar{width:8px;height:8px}
.deal-board::-webkit-scrollbar-track{background:transparent}
.deal-board::-webkit-scrollbar-thumb{background:var(--line2);
  border-radius:8px}
.deal-board::-webkit-scrollbar-thumb:hover{background:#3d3d3a}
.deal-stage{display:flex;gap:14px;align-items:flex-start;
  padding:24px 28px;width:max-content}
.deal-col{flex:0 0 260px;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  border-top:2px solid var(--deal-accent, var(--line2));border-radius:14px;
  padding:12px;transition:background-color .15s}
.deal-col.drag-over{background:var(--card2)}
/* цвет по этапу — тот же порядок, что и DEAL_STAGES на бэкенде */
.deal-col:nth-child(1){--deal-accent:var(--dim)}
.deal-col:nth-child(2){--deal-accent:var(--blue)}
.deal-col:nth-child(3){--deal-accent:var(--violet)}
.deal-col:nth-child(4){--deal-accent:var(--amber)}
.deal-col:nth-child(5){--deal-accent:#5fd0c0}
.deal-col:nth-child(6){--deal-accent:var(--lime)}
.deal-col-head{display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.deal-col-count{background:var(--card2);border-radius:999px;padding:1px 8px;
  font-size:11px;color:var(--dim);margin-left:6px}
/* сумма карточек колонки — пересчитывается на каждый рендер доски, в том
   числе сразу при перетаскивании карточки (оптимистичное обновление) */
.deal-col-sum{font-size:12px;white-space:nowrap;flex-shrink:0}
/* колонка ровно по карточкам и растёт вниз сколько нужно — вниз листается
   вся доска, а не содержимое отдельного блока */
.deal-col-body{flex:0 1 auto;min-height:0;overflow:visible;
  display:flex;flex-direction:column;gap:8px}
.deal-card{background:var(--card2);border:1px solid var(--line2);
  border-radius:11px;padding:10px 12px;cursor:pointer;
  transition:border-color .15s,opacity .15s}
.deal-card:hover{border-color:var(--lime-accent)}
.deal-card-drag{touch-action:none;cursor:grab}
.deal-card-drag:active{cursor:grabbing}
.deal-card-dragging{opacity:.35}
.deal-card-ghost{position:fixed;z-index:80;pointer-events:none;
  box-shadow:0 16px 34px -10px rgba(0,0,0,.6);transform:rotate(-2deg);
  opacity:.96}
.deal-add-btn{flex-shrink:0;width:100%;margin-top:8px;padding:9px;
  border-radius:10px;border:1px dashed var(--line2);background:transparent;
  color:var(--dim);font:inherit;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s}
.deal-add-btn:hover{border-color:var(--lime-accent);color:var(--lime)}
.deal-due{display:inline-block;font-size:11px;padding:2px 8px;
  border-radius:999px;border:1px solid var(--line2)}
.deal-due-future{color:var(--dim)}
.deal-due-today{color:var(--lime);border-color:rgba(183,255,98,.3)}
.deal-due-late{color:var(--red);border-color:rgba(255,107,94,.35)}

/* удалённые сотрудники: тише остальных, без ярких чипов */
.dimmed{color:var(--dim)}
.gone-card{background:transparent;border-style:dashed}
.gone-head{padding:8px 0}
.btn.danger{border-color:var(--red-btn);color:var(--red-btn)}
.btn.danger:hover{background:var(--red-btn);color:var(--dark)}

/* ===== ЭТАПЫ И КАБИНЕТЫ v4 ===== */
/* чип статуса этапа */
.schip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line2);background:var(--card2);color:var(--muted);
  vertical-align:middle;margin-left:6px;white-space:nowrap;font-weight:600}
.schip.lock{color:var(--dim)}
.schip.open{color:var(--lime);border-color:rgba(183,255,98,.3)}
.schip.work{color:#7dd3fc;border-color:rgba(125,211,252,.3)}
.schip.wait{color:var(--amber);border-color:rgba(255,209,102,.3)}
.schip.act{color:var(--amber);border-color:rgba(255,209,102,.45);
  background:rgba(255,209,102,.08)}
.schip.done{color:var(--lime);border-color:rgba(183,255,98,.25);
  background:rgba(183,255,98,.07)}
.schip.bad{color:var(--red);border-color:rgba(255,107,94,.35)}
/* задача ждёт внешнего ответа (см. .wait-badge) — та же подсказка цветом,
   но компактно на чипе статуса, поверх обычного тона */
.schip.extwait{color:var(--blue);border-color:rgba(110,168,255,.4);
  background:rgba(110,168,255,.08)}

/* строка этапа */
.step-row{display:flex;align-items:center;gap:12px;cursor:pointer;
  border-radius:10px;padding:9px 8px;transition:background .15s}
.step-row:hover{background:var(--card2)}
.step-row.locked{opacity:.5}
.snum{width:26px;height:26px;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);color:var(--muted);font-size:12px;
  font-weight:600;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-variant-numeric:tabular-nums}
.step-row .chevron{transform:none}
.due{color:var(--muted)}
.due.late{color:var(--red)}

/* прогресс по этапам */
.bar{height:6px;border-radius:999px;background:var(--card2);overflow:hidden;
  margin-top:14px}
.bar i{display:block;height:100%;background:var(--lime-accent);
  transition:width .3s}

/* файлы */
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;
  padding:7px 11px;color:var(--text);font-size:12px;max-width:100%}
.file:hover{border-color:var(--dim)}
.file .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:230px}
.file .fsize{color:var(--dim);font-size:11px;white-space:nowrap}
.file .fdel{border:0;background:transparent;color:var(--dim);cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px}
.file .fdel:hover{color:var(--red)}
.drop{border:1px dashed var(--line2);border-radius:12px;padding:16px;
  text-align:center;color:var(--dim);font-size:13px;cursor:pointer;
  transition:border-color .15s,color .15s;margin-top:10px}
.drop:hover,.drop.over{border-color:var(--lime);color:var(--text)}

/* исполнители */
.persons{margin-top:14px;font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.person{display:inline-flex;align-items:center;gap:6px;background:var(--card2);
  border:1px solid var(--line2);border-radius:999px;padding:3px 10px;
  font-size:12px;color:var(--text)}
.person.ok{border-color:rgba(183,255,98,.35);color:var(--lime)}
.person .px{border:0;background:transparent;color:var(--dim);cursor:pointer;
  font-size:13px;line-height:1;padding:0}
.person .px:hover{color:var(--red)}

/* лента событий */
.evlist{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.ev{padding:10px 0 10px 14px;border-left:2px solid var(--line2);
  margin-left:2px}
.ev+.ev{border-top:1px solid var(--line)}
.ev.ready,.ev.curator_ok,.ev.client_ok{border-left-color:var(--lime)}
.ev.curator_no,.ev.client_no{border-left-color:var(--red)}
.ev.note{border-left-color:#7dd3fc}
.ev-top{display:flex;gap:10px;align-items:baseline}
.ev-top b{font-size:13px;font-weight:600}
.ev-text{font-size:13px;color:var(--muted);white-space:pre-wrap;
  word-break:break-word;margin-top:2px}

/* граф штаба — бесконечный холст: ни рамок, ни пределов прокрутки. Слой
   с карточками двигается трансформом, точечная сетка едет вместе с ним. */
.orgwrap{position:relative;overflow:hidden;touch-action:none;cursor:grab;
  background:
  radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0) 0 0/24px 24px,
  var(--bg);flex:1;min-height:0}
.orgwrap.canvas-panning{cursor:grabbing}
.orgstage{position:absolute;left:0;top:0;width:0;height:0;
  will-change:transform}
/* svg сам подгоняется под габариты карточек (см. drawLinks) — поэтому и
   при отрицательных координатах связи не обрезаются */
.orgwrap svg{position:absolute;display:block;overflow:visible;
  pointer-events:none}
.onode{position:absolute;min-width:172px;touch-action:none;background:var(--card);
  border:1px solid var(--line2);border-radius:12px;padding:9px 10px 9px 12px;
  cursor:grab;user-select:none;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.onode.drag{cursor:grabbing;border-color:var(--lime-accent);z-index:5}
.onode .on{font-size:13px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:190px}
.onode .or{font-size:11px;color:var(--dim);margin-top:1px}
.onode.admin{border-color:rgba(183,255,98,.45)}
.onode.admin .or{color:var(--lime)}
.onode.curator{border-color:rgba(125,211,252,.4)}
.onode.off{opacity:.45}
.onode .menu{position:relative;flex-shrink:0;cursor:default}
.onode .iconbtn.sm{width:22px;height:22px}
/* точка связи снизу карточки: тянешь от неё к сотруднику — он становится
   подчинённым. Отдельная ручка, чтобы не путать с перетаскиванием карточки. */
.onode-port{position:absolute;left:50%;bottom:-7px;
  transform:translateX(-50%);width:15px;height:15px;border-radius:50%;
  background:var(--card2);border:1px solid var(--line2);cursor:crosshair;
  touch-action:none;display:flex;align-items:center;justify-content:center;
  opacity:.5;transition:opacity .15s,border-color .15s}
.onode-port::after{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--dim)}
.onode:hover .onode-port{opacity:1}
.onode-port:hover,.onode-port.hot{opacity:1;border-color:var(--lime-accent)}
.onode-port:hover::after,.onode-port.hot::after{background:var(--lime)}
/* подсветка карточки под курсором во время протяжки связи */
.onode.link-ok{border-color:var(--lime-accent);
  box-shadow:0 0 0 2px rgba(183,255,98,.25),0 8px 20px rgba(0,0,0,.35)}
.onode.link-bad{border-color:var(--red);opacity:.7}
html.org-linking,html.org-linking .orgwrap{cursor:crosshair}
@media(max-width:760px){
  .deal-stage{padding:14px 12px}
}

/* лендинг */
body.land{background:
  radial-gradient(1100px 620px at 82% -10%,rgba(183,255,98,.11),transparent 60%),
  radial-gradient(700px 500px at -5% 15%,rgba(183,255,98,.05),transparent 55%),
  var(--bg)}
:root[data-theme="light"] body.land{background:
  radial-gradient(1100px 620px at 82% -10%,rgba(63,138,18,.07),transparent 60%),
  radial-gradient(700px 500px at -5% 15%,rgba(63,138,18,.04),transparent 55%),
  var(--bg)}
.land-top{display:flex;align-items:center;gap:16px;padding:22px 40px;
  max-width:1160px;margin:0 auto}
.land-top .logo{padding:0}
.land-top .btn{text-decoration:none;display:inline-block}
.land-theme-btn{width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line2);background:var(--card2);color:var(--dim);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:color .15s,border-color .15s}
.land-theme-btn:hover{color:var(--lime);border-color:var(--lime-accent)}
.land-main{max-width:1160px;margin:0 auto;padding:20px 40px 100px}
.land-kick{display:inline-flex;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);margin-bottom:22px;
  padding:7px 16px;border:1px solid rgba(183,255,98,.28);
  border-radius:999px;background:rgba(183,255,98,.06)}
.land-hero{position:relative;text-align:center;max-width:840px;
  margin:0 auto;padding:64px 0 76px}
.land-hero h1{font-size:52px;line-height:1.08;font-weight:700;
  letter-spacing:-.02em;max-width:620px;margin-left:auto;margin-right:auto}
.land-hero h1 .accent{color:var(--lime)}
.land-lead{color:var(--muted);font-size:16px;line-height:1.6;margin-top:22px;
  max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.land-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;
  justify-content:center}
.land-cta a{text-decoration:none}
.land-cta .btn:not(.ghost){box-shadow:0 8px 28px rgba(183,255,98,.18)}
.land-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.land-card{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 28px rgba(0,0,0,.14);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.land-card:hover{border-color:var(--line2);transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(0,0,0,.14),0 20px 40px rgba(0,0,0,.18)}
.land-num{font-size:11px;letter-spacing:.16em;color:var(--dim);
  margin-bottom:12px}
.land-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.land-card p{color:var(--muted);font-size:14px;line-height:1.55}
.land-foot{display:flex;align-items:center;gap:16px;max-width:1160px;
  margin:0 auto;padding:26px 40px 46px;border-top:1px solid var(--line);
  color:var(--dim);font-size:12px;letter-spacing:.06em}
.land-foot a{color:var(--muted);text-decoration:none}
.land-foot a:hover{color:var(--lime)}

/* ---------- лендинг v2: полноэкранный фото-hero главной страницы
   (только .land-hero-main — простой .land-hero переиспользуется как
   компактный текстовый хедер на страницах услуг, его не трогаем) ---------- */
.land-hero.land-hero-main{
  /* своя картинка под каждую тему (тёмная/светлая), поэтому цвет текста
     просто наследует обычные --text/--muted темы — color:var(--text) тут
     нужен, чтобы h1 (у которого нет своего color) унаследовал именно
     актуальное значение переменной, а не то, что было посчитано на body */
  color:var(--text);
  text-align:left;max-width:none;margin:0;
  padding:0;min-height:88vh;max-height:760px;display:flex;align-items:center;
  background-image:
    linear-gradient(to bottom,transparent 60%,var(--bg) 100%),
    linear-gradient(100deg,rgba(10,10,9,.96) 0%,rgba(10,10,9,.88) 30%,
      rgba(10,10,9,.4) 56%,rgba(10,10,9,.08) 76%),
    url('/static/img/hero-bg.jpg');
  background-size:100% 100%,100% 100%,cover;
  background-position:0 0,0 0,72% center;
  background-repeat:no-repeat,no-repeat,no-repeat}
:root[data-theme="light"] .land-hero.land-hero-main{
  background-image:
    linear-gradient(to bottom,transparent 60%,var(--bg) 100%),
    linear-gradient(100deg,rgba(238,237,230,.96) 0%,rgba(238,237,230,.88) 30%,
      rgba(238,237,230,.4) 56%,rgba(238,237,230,.08) 76%),
    url('/static/img/hero-bg-light.jpg')}
.land-hero-inner{max-width:1160px;margin:0 auto;padding:40px 40px;width:100%}
.land-hero.land-hero-main h1{margin-left:0;margin-right:0}
.land-hero.land-hero-main .land-h2{font-size:21px;font-weight:600;
  color:var(--muted);margin-top:16px;letter-spacing:-.005em;max-width:480px}
.land-hero.land-hero-main .land-lead{text-align:left;margin-left:0}
.land-hero.land-hero-main .land-cta{justify-content:flex-start}

.land-section{padding:88px 0;border-top:1px solid var(--line)}
.land-section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.land-section-head h2{font-size:32px;font-weight:700;letter-spacing:-.015em}
.land-section-head p{color:var(--muted);font-size:14px;margin-top:12px;
  line-height:1.55}

/* полосы во всю ширину экрана внутри centered .land-main — вырываемся
   отрицательными полями до края вьюпорта, контент внутри снова
   выравниваем по стандартной сетке 1160px */
.land-band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:0;padding-right:0;background:var(--side)}
.land-band-inner{max-width:1160px;margin:0 auto;padding:0 40px}
.land-band-accent{background:
  radial-gradient(900px 420px at 18% 0%,rgba(183,255,98,.10),transparent 60%),
  var(--side)}

.land-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.land-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.land-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.land-icon{font-size:26px;margin-bottom:14px}

/* услуги — крупный вертикальный список вместо мелкой сетки карточек */
.land-service-list{border-top:1px solid var(--line)}
.land-service-row{display:flex;align-items:center;gap:32px;padding:30px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .15s,padding-left .2s}
.land-service-row:hover{background:var(--card2);padding-left:14px}
.land-service-num{font-size:12px;color:var(--dim);letter-spacing:.1em;
  flex-shrink:0;width:22px}
.land-service-name{font-size:30px;font-weight:700;letter-spacing:-.015em;
  flex-shrink:0;width:320px}
.land-service-desc{color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.land-service-arrow{font-size:20px;color:var(--lime);flex-shrink:0;
  opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .2s}
.land-service-row:hover .land-service-arrow{opacity:1;transform:translateX(0)}

.land-stats{display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:24px;text-align:center}
.land-stat{flex:1;min-width:140px}
.land-stat b{display:block;font-size:38px;font-weight:700;color:var(--lime);
  letter-spacing:-.02em}
.land-stat span{display:block;font-size:12px;color:var(--muted);
  margin-top:8px;letter-spacing:.02em}

.land-logos{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,
  transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.land-logos-track{display:flex;gap:48px;width:max-content;
  animation:landScroll 28s linear infinite}
.land-logos:hover .land-logos-track{animation-play-state:paused}
.land-logos-track span{font-size:18px;font-weight:700;letter-spacing:.02em;
  color:var(--dim);white-space:nowrap}
@keyframes landScroll{from{transform:translateX(0)}
  to{transform:translateX(-50%)}}

.land-case b{display:block;font-size:13px;color:var(--lime);
  margin-bottom:10px}
.land-case h3{font-size:16px;font-weight:600;margin-bottom:8px}
.land-case p{color:var(--muted);font-size:13px}
.land-grid-cases{margin-top:8px}
.land-grid-cases .land-card{background:var(--card2);padding:28px}
.land-grid-cases .land-case h3{font-size:19px}

.land-quote p{font-size:14px;color:var(--text);line-height:1.55}
.land-quote footer{margin-top:14px;font-size:12px;color:var(--muted)}
.land-quote footer b{color:var(--text);font-weight:600}

/* «как мы работаем» — горизонтальный таймлайн вместо 4 одинаковых карточек */
.land-timeline{display:flex;position:relative;padding-top:6px}
.land-timeline::before{content:'';position:absolute;top:33px;left:0;right:0;
  height:1px;background:var(--line2)}
.land-tl-item{flex:1;text-align:center;padding:0 14px;position:relative}
.land-tl-dot{width:54px;height:54px;border-radius:50%;background:var(--bg);
  border:1px solid var(--line2);display:flex;align-items:center;
  justify-content:center;margin:0 auto 20px;font-size:15px;font-weight:700;
  color:var(--lime);position:relative;z-index:1}
.land-tl-item h3{font-size:15px;font-weight:600;margin-bottom:6px}
.land-tl-item p{font-size:13px;color:var(--muted);line-height:1.5}

.land-team-photo{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--lime-accent) 0%,#4db529 100%);
  color:var(--dark);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin-bottom:14px}
.land-team h3{font-size:15px;font-weight:600}
.land-team .role{font-size:12px;color:var(--lime);margin:4px 0 6px}
.land-team p{font-size:13px;color:var(--muted)}
.land-team-more{text-align:center;color:var(--muted);font-size:13px;
  margin-top:24px}

.land-audit{max-width:640px;margin:0 auto;background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:40px;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.land-audit h2{font-size:28px;font-weight:700}
.land-audit p{color:var(--muted);font-size:14px;margin-top:10px}
.land-audit form{display:grid;gap:12px;margin-top:24px;text-align:left}

.land-faq{max-width:720px;margin:0 auto}
.land-faq-item{border-bottom:1px solid var(--line)}
.land-faq-q{width:100%;text-align:left;background:none;border:0;
  font:inherit;color:var(--text);font-size:15px;font-weight:600;
  padding:18px 28px 18px 0;cursor:pointer;position:relative}
.land-faq-q::after{content:'+';position:absolute;right:4px;top:16px;
  font-size:20px;color:var(--dim);transition:transform .18s}
.land-faq-item.open .land-faq-q::after{transform:rotate(45deg)}
.land-faq-a{max-height:0;overflow:hidden;color:var(--muted);font-size:14px;
  line-height:1.5;transition:max-height .22s ease}
.land-faq-item.open .land-faq-a{padding-bottom:18px}

.honeypot-field{position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* ---------- фото профиля: круглая обрезка ---------- */
.avatar-crop-frame{width:260px;height:260px;border-radius:50%;
  overflow:hidden;margin:16px auto;position:relative;background:var(--card2);
  border:1px solid var(--line2);cursor:grab;touch-action:none}
.avatar-crop-frame:active{cursor:grabbing}
.avatar-crop-frame img{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);max-width:none;user-select:none;
  -webkit-user-drag:none;pointer-events:none}
#avatarCropZoom{width:100%;accent-color:var(--lime-accent)}
img.ava,img.p-avatar,img.avatar,img.land-team-photo{object-fit:cover}

/* ---------- навигация лендинга: выпадающее «Услуги» ---------- */
.land-top .logo{text-decoration:none;color:inherit;display:flex}
.land-nav{position:relative}
.land-nav-btn{background:none;border:0;font:inherit;color:var(--muted);
  font-size:14px;cursor:pointer;padding:8px 4px;display:flex;
  align-items:center;gap:6px}
.land-nav-btn:hover{color:var(--text)}
.land-nav-btn::after{content:'';width:6px;height:6px;border-right:1.5px solid;
  border-bottom:1.5px solid;transform:rotate(45deg);margin-top:-3px}
.land-nav-drop{position:relative}
.land-nav-menu{position:absolute;top:100%;left:0;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:6px;min-width:220px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;
  transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:20}
.land-nav-drop:hover .land-nav-menu,
.land-nav-drop:focus-within .land-nav-menu{opacity:1;visibility:visible;
  transform:translateY(0)}
.land-nav-menu a{display:block;padding:9px 12px;border-radius:8px;
  color:var(--text);text-decoration:none;font-size:14px}
.land-nav-menu a:hover{background:var(--card2);color:var(--lime)}
.land-crumb{max-width:1120px;margin:0 auto;padding:18px 40px 0;
  font-size:12px;color:var(--dim)}
.land-crumb a{color:var(--muted);text-decoration:none}
.land-crumb a:hover{color:var(--lime)}

/* ---------- карточки цен направления ---------- */
.land-price b{display:block;font-size:20px;color:var(--lime);
  margin-bottom:6px}
.land-price .from{font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em}

@media(max-width:820px){
  .land-grid{grid-template-columns:1fr}
  .land-hero h1{font-size:32px}
  .land-hero.land-hero-main{min-height:76vh;
    background-position:0 0,0 0,82% center}
  .land-top,.land-main,.land-foot,.land-hero-inner,.land-band-inner{
    padding-left:20px;padding-right:20px}
  .land-grid3,.land-grid4,.land-grid5{grid-template-columns:1fr 1fr}
  .land-stats{justify-content:flex-start}
  .land-nav{display:none}
  .land-crumb{padding-left:20px;padding-right:20px}
  .land-service-row{flex-wrap:wrap;gap:6px 20px;padding:18px 4px}
  .land-service-name{width:auto;font-size:22px}
  .land-service-desc{width:100%;flex:none;font-size:13px}
  .land-service-arrow{display:none}
  .land-timeline{flex-direction:column;gap:28px}
  .land-timeline::before{top:0;bottom:0;left:26px;right:auto;width:1px;height:auto}
  .land-tl-item{display:flex;align-items:flex-start;gap:16px;text-align:left;
    padding:0}
  .land-tl-dot{margin:0;flex-shrink:0}
  /* на узком экране вертикали 88px между блоками слишком много воздуха —
     на телефоне это ощущается как пустота, а не как воздух */
  .land-section{padding:52px 0}
  .land-section-head{margin-bottom:28px}
  .land-hero-inner{padding-top:32px;padding-bottom:32px}
  .land-audit h2{font-size:24px}
}
@media(max-width:520px){
  .land-grid3,.land-grid4,.land-grid5{grid-template-columns:1fr}
  .land-audit{padding:24px}
  /* в шапке на узких экранах логотип + тема + 2 кнопки не помещаются —
     "Войти" вылезал за край экрана. Регистрация заказчика и так есть
     в футере — на мобильном оставляем в шапке только главное действие */
  .land-top{gap:10px}
  .land-top .btn.ghost{display:none}
  .land-theme-btn{width:30px;height:30px}
  .land-top .btn{padding:8px 14px}
}

/* мелкие задачи и сводки */
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px}
.sum{background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px}
.sum .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.sum .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-top:3px}

/* ===== отчёты: таблица, диаграммы, воронка ===== */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-top:1px solid var(--line);white-space:nowrap}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}

.barchart{display:flex;align-items:flex-end;gap:10px;height:160px;
  padding:8px 4px 0;overflow-x:auto}
.barchart-col{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;flex:1;min-width:34px;height:100%}
.barchart-bars{display:flex;align-items:flex-end;gap:3px;height:130px;width:100%;
  justify-content:center}
.barchart-bar{width:10px;border-radius:3px 3px 0 0;min-height:2px;
  transition:height .2s}
.barchart-label{font-size:10px;color:var(--dim);margin-top:6px;white-space:nowrap}
.barchart-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);
  margin-top:8px;flex-wrap:wrap}
.barchart-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;
  margin-right:5px;vertical-align:middle}
.bar-income{background:var(--lime-accent)}
.bar-margin{background:var(--blue)}
.bar-expense{background:var(--red)}

.funnel{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:12px;overflow-x:auto}
.funnel-col{background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:10px;min-width:180px}
.funnel-head{font-size:12px;font-weight:600;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center}
.funnel-card{background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;margin-bottom:6px;cursor:pointer;
  transition:border-color .15s}
.funnel-card:hover{border-color:var(--line2)}
@media(max-width:900px){.funnel{grid-template-columns:1fr;overflow-x:visible}}

/* ===== пояснительные схемы в «Инфо» ===== */
.diagram-wrap{width:100%;overflow-x:auto;margin:4px 0 8px}
.diagram{display:block;min-width:520px;width:100%;height:auto}
.diagram .dt{font-size:13px;font-weight:600;fill:var(--text)}
.diagram .ds{font-size:11px;fill:var(--muted)}
.diagram .dbox{fill:var(--card2);stroke:var(--line2);stroke-width:1}
.diagram .darr{stroke:var(--dim);stroke-width:1.5;fill:none}
.diagram .c-lime{fill:rgba(183,255,98,.1);stroke:var(--lime-accent)}
.diagram .c-blue{fill:rgba(110,168,255,.1);stroke:var(--blue)}
.diagram .c-amber{fill:rgba(255,209,102,.1);stroke:var(--amber)}
.diagram marker path{fill:none;stroke:var(--dim);stroke-width:1.5}

/* ===== КАБИНЕТ СОТРУДНИКА v4 ===== */
.actions-inline{display:flex;gap:8px;align-items:center;flex-shrink:0}
.step-row.cur{background:var(--card2);border-left:2px solid var(--lime-accent)}
.person .pn{color:var(--text)}
.person .pst{color:var(--dim);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase}
.person.ok .pst{color:var(--lime)}
.cal-cell.due{background:rgba(255,107,94,.1);
  border-color:rgba(255,107,94,.32)}
.cal-cell.due .cs{color:var(--red)}
.cal-legend i.due{background:var(--red)}
.sens-block{white-space:pre-wrap}
@media(max-width:820px){
  .step-row{flex-wrap:wrap}
  .actions-inline{width:100%;justify-content:flex-end}
}

/* ===== ВХОД И РЕГИСТРАЦИЯ v4 ===== */
.auth-alt{margin-top:12px;text-align:center;font-size:13px;color:var(--muted)}
.auth-alt a{color:var(--lime);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.auth-alt.dim{color:var(--dim);font-size:12px;margin-top:8px}
.auth-alt.dim a{color:var(--muted)}
.land-top .btn.ghost{margin-right:8px}

/* ===== НАСТРОЙКИ И ЗАГОЛОВКИ v4 ===== */
.kick.row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kick.row .iconbtn{margin-left:auto}
.profile-hero .iconbtn{align-self:flex-start;font-size:17px}
#settingsModal .modal{max-width:460px}
#settingsModal .sep{height:1px;background:var(--line);margin:18px 0}
#settingsModal .kick{margin-bottom:8px}
.checkline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:12px 0}.checkline input{width:16px;height:16px;accent-color:var(--lime-accent)}
.budget-over .v{color:var(--red)!important}.budget-over{box-shadow:inset 0 0 0 1px rgba(255,107,94,.35)}
.segmented{display:inline-flex;flex-wrap:wrap;max-width:100%;padding:3px;background:var(--card);border:1px solid var(--line);border-radius:10px;gap:2px}.segmented button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px;white-space:nowrap}.segmented button.act{background:var(--card2);color:var(--lime)}
.segmented.sm{display:flex;padding:2px}.segmented.sm button{flex:1;padding:6px 8px;font-size:12px;text-align:center}
.compact-select{width:auto;min-width:150px;padding:8px 30px 8px 10px;font-size:12px}
.choice-list{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:4px 10px}.choice-list .checkline{margin:7px 0}

/* ===== ПРОЕКТЫ СОТРУДНИКА ===== */
.proj-step{border-top:1px solid var(--line);padding:0 4px}
.proj-step:first-child{border-top:0}
.proj-days-wrap{padding-left:12px;border-left:2px solid var(--line2);
  margin:4px 0 8px}
.proj-days .row{padding:6px 0}

/* ===== JOB TWO-COLUMN ===== */
/* Ширина считается от вьюпорта (vw), а не подобрана под конкретный экран —
   на узких мониторах занимает почти всё, на очень широких упирается в
   разумный потолок, чтобы текст не растягивался в нечитаемые строки. */
.main-wide{max-width:96vw}
.job-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:16px;align-items:start}
.job-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
.job-steplist{padding:0!important;overflow:hidden}
.job-slist-head{padding:12px 16px 6px;display:flex;align-items:center;justify-content:space-between}
.step-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
  cursor:pointer;border-top:1px solid var(--line);transition:background .12s}
.step-item:first-of-type{border-top:0}
.step-item:hover{background:var(--card2)}
.step-item.active{background:var(--card2);box-shadow:inset 3px 0 0 var(--lime-accent)}
.step-item-num{color:var(--dim);font-size:11px;min-width:16px;padding-top:3px}
.step-item-title{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:4px}
.step-item-sub{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.step-detail-hdr{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.job-desc{margin-top:12px;white-space:pre-line;line-height:1.6;max-width:70ch;
  overflow-wrap:break-word;word-break:break-word}
@media(max-width:740px){.job-layout{grid-template-columns:1fr}
.job-sidebar{position:static}}

/* ===== CALENDAR TWO-COLUMN ===== */
.cal-layout{display:grid;grid-template-columns:1fr 240px;gap:16px;align-items:start}
.cal-day-panel{position:sticky;top:20px}
@media(max-width:700px){.cal-layout{grid-template-columns:1fr}
.cal-day-panel{position:static}}

/* ===== JOB — новая раскладка (info-strip, 3 колонки вместо столбика) ===== */
.job-info-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
@media(max-width:740px){
  /* колонкой надёжнее, чем полагаться на flex-wrap — с ним «grow»
     иногда схлопывался до ширины контента вместо всей строки */
  .job-info-strip{flex-direction:column;align-items:stretch}
  .job-info-strip .grow span{display:block;margin-left:0!important;margin-top:3px}
  .job-info-strip .grow span:first-child{margin-top:0}
}
.job-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.job-col{display:flex;flex-direction:column}
.job-col .persons{margin-top:0}
.job-decide-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:12px 0;background:var(--card2)}
.drop.sm{padding:10px;font-size:12px;margin-top:8px}
@media(max-width:900px){.job-3col{grid-template-columns:1fr}}

/* ===== крупное пустое состояние секции (не строчка внутри списка) ===== */
.empty-block{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:44px 20px;gap:6px}
.empty-block .eb-text{color:var(--muted);font-size:14px}
.empty-block .eb-hint{color:var(--dim);font-size:12px}

/* ===== кликабельное имя → карточка коллеги ===== */
.name-link{cursor:pointer;border-bottom:1px dashed var(--dim)}
.name-link:hover{color:var(--lime);border-color:var(--lime)}

/* ===== уведомления: кнопка + всплывающая панель ===== */
.notif-btn{position:fixed;top:20px;right:24px;z-index:60}
.notif-btn .nbadge{position:absolute;top:-4px;right:-4px}
.notif-panel{position:fixed;top:64px;right:24px;z-index:60;width:360px;
  max-width:calc(100vw - 32px);max-height:min(520px,70vh);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px;box-shadow:0 16px 48px rgba(0,0,0,.55)}
.notif-panel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.notif-item{padding:9px 12px;margin:0 -12px 0 -14px;border-top:1px solid var(--line);
  border-left:2px solid transparent;border-radius:0 8px 8px 0;transition:background .12s}
.notif-item:first-child{border-top:0}
.notif-item.unseen .t1{color:var(--text)}
.notif-item .t1{color:var(--muted);line-height:1.45}
.notif-item .t1 b{color:var(--text);font-weight:600}
.notif-item.clickable{cursor:pointer}
.notif-item.clickable:hover{background:var(--card2)}
.notif-meta{display:flex;align-items:center;gap:10px;margin-top:5px}
.notif-link{font-size:12px;color:var(--lime-accent);cursor:pointer;white-space:nowrap}
.notif-link:hover{text-decoration:underline}
@media(max-width:760px){
  .notif-btn{top:14px;right:14px}
  .notif-panel{top:56px;right:10px;left:10px;width:auto;max-width:none}
}

/* ===== SVG-иконки вместо unicode/эмодзи — одинаковый рендер везде ===== */
.svg-icon{display:block;flex-shrink:0}
.iconbtn .svg-icon,.exit .svg-icon,.btn .svg-icon{margin:auto}

/* Alpine: прячем элемент до инициализации (иначе долю секунды видно
   несвёрнутый шаблон/панель до того, как Alpine навесит x-show) */
[x-cloak]{display:none!important}

/* ===== страница «Инфо»: внутренняя под-навигация по вкладкам ===== */
.info-layout{display:flex;gap:24px;align-items:flex-start}
.info-subnav{width:220px;flex-shrink:0;position:sticky;top:36px}
.info-content{flex:1;min-width:0}
@media(max-width:760px){
  .info-layout{flex-direction:column}
  .info-subnav{width:100%;position:static;flex-direction:row;flex-wrap:wrap}
  .info-subnav button{width:auto}
}