/* ── Self-hosted Inter Variable (Notion · Miro · Apple) ── */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/InterVariable.woff2') format('woff2-variations'),
      url('/fonts/InterVariable.woff2') format('woff2');
}

/* ── dxlc.ru palette + new design tokens ── */
:root {
  /* z-index шкала — единый порядок наложения (раньше модалки и тосты дрались на 200,
     а msp-fullscreen 9999 перекрывал модалки). Onboarding/customizer намеренно выше. */
  --z-fullscreen: 800;   /* msp-fullscreen Гантт — выше app-chrome, ниже модалок */
  --z-modal: 1000;       /* popup-overlay / task-popup-overlay */
  --z-toast: 1100;       /* тосты всегда поверх модалок (иначе теряется save/error feedback) */
  --bg: #f0f3f8;
  --card: #ffffff;
  --text: #0e2156;
  --text-sec: #4a5568;
  --primary: #0e2156;
  --primary-hover: #001986;
  --accent: #1172b6;
  --accent-soft: #e8f4fd;
  --border: #d4dbe8;
  --danger: #c53030;
  --danger-soft: #fff5f5;
  --ok: #276749;
  --ok-soft: #f0fff4;
  --disabled: #a0aec0;
  --shadow: 0 2px 12px rgba(14,33,86,.08);
  --shadow-lg: 0 8px 32px rgba(14,33,86,.15);
  --bg-muted: #edf2f7;
  --bg-soft: #f7f9fc;
  --warn-soft: #fffff0;
  --warn: #fefcbf;
  --info-soft: #f3e8ff;

  /* New design system — Notion · Miro · Apple */
  --surface: #ffffff;
  --surface-2: #f5f4f0;
  --surface-3: #efeee8;
  --border-subtle: #ece9e0;
  --border-strong: #d9d4c5;
  --ink: #1c1c1e;
  --ink-2: #6e6e73;
  --ink-3: #a8a59c;
  --mint:#a4e3c4;       --mint-soft:#ebfaf2;
  --lavender:#c8b8f0;   --lavender-soft:#f3eefb;
  --coral:#f4a08c;      --coral-soft:#ffefea;
  --apricot:#f5c97a;    --apricot-soft:#fff5e0;
  --sky:#92c4f0;        --sky-soft:#e8f3fb;
  --rose:#e89eb6;       --rose-soft:#fbecf0;
  --elev-1: 0 1px 2px rgba(20,20,30,.04);
  --elev-2: 0 1px 2px rgba(20,20,30,.04), 0 4px 14px rgba(20,20,30,.05);
  --elev-3: 0 2px 6px rgba(20,20,30,.06), 0 18px 50px rgba(20,20,30,.10);
  --elev-pop: 0 24px 80px rgba(20,20,30,.18), 0 4px 12px rgba(20,20,30,.06);
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  font-feature-settings:'cv11','ss01','ss03';
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hidden{display:none!important}

/* ── Animations ── */

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes trainMove{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}

.fade-in{animation:fadeIn .4s ease-out both}
.slide-up{animation:slideUp .45s ease-out both}

/* ── Auth: премиальный, минималистичный ────────────────────────────────
   Sober brand-led layout: моноограмма → название → форма.
   Background — мягкий ambient gradient с двумя радужными «blob»-пятнами,
   подкрашенными в фирменные цвета. Карточка — белая, с тонкой границей
   и мягкой elevation. */
.auth-screen{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
  background:#f6f7f9;
  position:relative;overflow:hidden;
}
.auth-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(17,114,182,.10), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(14,33,86,.10), transparent 55%);
}
/* Анимированный фон в стиле openai.com/codex — три плавных blob'а
 * с разной длительностью и фазой, чтобы движение никогда не повторялось одинаково. */
.auth-bg-blob{
  position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(90px);opacity:.42;
  will-change:transform;
}
.auth-bg-blob-1{
  top:-180px;left:-180px;
  background:radial-gradient(circle at 30% 30%, var(--brand, #1172b6), transparent 70%);
  animation:authBlobFloat1 22s ease-in-out infinite;
}
.auth-bg-blob-2{
  bottom:-200px;right:-180px;
  background:radial-gradient(circle at 70% 70%, var(--brand-2, #0e2156), transparent 70%);
  animation:authBlobFloat2 28s ease-in-out infinite;
}
.auth-bg-blob-3{
  top:40%;left:50%;width:380px;height:380px;
  background:radial-gradient(circle at 50% 50%, #6c8ef5, transparent 70%);
  opacity:.28;
  animation:authBlobFloat3 34s ease-in-out infinite;
}
@keyframes authBlobFloat1{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(60px,40px) scale(1.08) rotate(8deg)}
  66%{transform:translate(-40px,80px) scale(.95) rotate(-6deg)}
}
@keyframes authBlobFloat2{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
  40%{transform:translate(-50px,-30px) scale(1.1) rotate(-10deg)}
  70%{transform:translate(30px,-60px) scale(.92) rotate(6deg)}
}
@keyframes authBlobFloat3{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-30%,-70%) scale(1.15)}
}
@media (prefers-reduced-motion: reduce){
  .auth-bg-blob{animation:none}
}
.auth-card{
  position:relative;z-index:1;
  background:#fff;border:1px solid rgba(15,18,25,.06);
  border-radius:20px;padding:40px 36px;
  width:100%;max-width:420px;text-align:center;
  box-shadow:0 1px 2px rgba(15,18,25,.04), 0 16px 48px -12px rgba(15,18,25,.18);
}

.auth-brand{
  display:flex;justify-content:center;margin-bottom:22px;
}
.auth-brand-mark{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg, var(--brand, #1172b6) 0%, var(--brand-2, #0e2156) 100%);
  color:#fff;font-size:28px;font-weight:600;letter-spacing:-.02em;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(17,114,182,.4);
  user-select:none;
}
.auth-title{
  margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;
  color:#0f1219;line-height:1.2;
}
.auth-tagline{
  margin:6px 0 0;font-size:14px;color:#5a6273;font-weight:400;
}
.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:28px;text-align:left}
/* Слот капчи Cloudflare Turnstile. :empty — когда капча выключена, не резервируем место. */
.cf-slot{display:flex;justify-content:center;min-height:0}
.cf-slot:empty{min-height:0}
/* Статус-плашка self-hosted PoW-капчи (виджета нет — PoW невидим). */
.pow-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;
  color:var(--text-sec,#64748b);background:var(--surface-2,#f1f5f9);
  border:1px solid var(--border-subtle,#e2e8f0);border-radius:99px;padding:6px 12px;white-space:nowrap}
.auth-form label{
  font-size:12px;font-weight:600;color:#5a6273;
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;flex-direction:column;gap:6px;
}
.auth-form input{
  padding:12px 14px;font-size:15px;border-radius:10px;
  border:1px solid rgba(15,18,25,.12);background:#fff;color:#0f1219;
  transition:border-color .15s, box-shadow .15s;
  text-transform:none;letter-spacing:normal;
}
.auth-form input:focus{
  outline:none;border-color:var(--brand, #1172b6);
  box-shadow:0 0 0 3px rgba(17,114,182,.12);
}
.auth-form .btn-primary{
  margin-top:4px;padding:12px 20px;font-size:15px;font-weight:600;
  border-radius:10px;letter-spacing:.01em;
}
.auth-divider{
  margin:24px 0 16px;display:flex;align-items:center;gap:12px;
  color:#9ca3af;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:rgba(15,18,25,.08);
}

/* ── Auth tabs (Email / PIN / Регистрация) ── */
.auth-tabs{
  display:flex;gap:4px;margin:24px 0 4px;
  background:rgba(15,18,25,.04);border-radius:12px;padding:4px;
}
.auth-tab{
  flex:1;padding:9px 8px;font-size:13px;font-weight:500;
  background:transparent;border:none;border-radius:8px;
  color:#5a6273;cursor:pointer;transition:background .18s, color .18s, box-shadow .18s;
}
.auth-tab:hover:not(.is-active){color:#0f1219}
.auth-tab.is-active{
  background:#fff;color:#0f1219;
  box-shadow:0 1px 3px rgba(15,18,25,.08), 0 1px 1px rgba(15,18,25,.04);
}
.auth-pane{display:none}
.auth-pane.is-active{display:flex}

.hint-inline{color:#9ca3af;font-weight:400;text-transform:none;letter-spacing:normal;font-size:11px}

/* dark при system-dark и НЕ принудительно-светлой теме */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) .auth-screen{background:#0b0b0d}
  html:not([data-theme]) .auth-card{background:#141417;border-color:rgba(255,255,255,.06);
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.6);
  }
  html:not([data-theme]) .auth-title{color:#f4f4f6}
  html:not([data-theme]) .auth-tagline{color:#a8a8b0}
  html:not([data-theme]) .auth-form label{color:#a8a8b0}
  html:not([data-theme]) .auth-form input{background:#1c1c20;color:#f4f4f6;border-color:rgba(255,255,255,.08)}
  html:not([data-theme]) .auth-tabs{background:rgba(255,255,255,.04)}
  html:not([data-theme]) .auth-tab{color:#a8a8b0}
  html:not([data-theme]) .auth-tab:hover:not(.is-active){color:#f4f4f6}
  html:not([data-theme]) .auth-tab.is-active{background:#1c1c20;color:#f4f4f6;box-shadow:0 1px 3px rgba(0,0,0,.4)}
  html:not([data-theme]) .auth-bg-blob{opacity:.32}
}

/* ── Hints ── */

.hint{
  font-size:12px;color:var(--text-sec);font-weight:400;
  margin-top:-2px;opacity:.8;
}

/* ── Forgot PIN ── */

.btn-forgot-pin{
  background:none;border:none;cursor:pointer;
  color:var(--accent);font-size:13px;
  margin-top:4px;padding:4px 0;
  text-decoration:underline;text-underline-offset:2px;
}
.btn-forgot-pin:hover{color:var(--primary-hover)}

.forgot-pin-form{
  margin-top:12px;display:flex;flex-direction:column;gap:10px;
  padding:12px;border:1px solid var(--border);border-radius:8px;
  background:var(--accent-soft);
}
.forgot-pin-desc{
  font-size:13px;color:var(--text-sec);margin:0;
}

/* ── Topbar ── */

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;background:var(--primary);color:#fff;
  box-shadow:0 2px 8px rgba(14,33,86,.2);
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-icon{opacity:.8}
.topbar-right{display:flex;gap:8px;flex-wrap:wrap}
.topbar h1{margin:0;font-size:18px;font-weight:700;letter-spacing:1px}
.topbar .subtitle{margin:2px 0 0;color:rgba(255,255,255,.7);font-size:13px}

.booking-reminder{
  background:linear-gradient(90deg,#fff7ed,#ffedd5);
  color:#9a3412;padding:10px 24px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid #fed7aa;
  animation:reminderSlide .3s ease-out;
}
.booking-reminder.hidden{display:none}
.booking-reminder .reminder-icon{font-size:18px;flex-shrink:0}
.booking-reminder .reminder-dismiss{
  margin-left:auto;background:none;border:none;color:#9a3412;
  cursor:pointer;font-size:16px;opacity:.6;padding:2px 6px;
}
.booking-reminder .reminder-dismiss:hover{opacity:1}
@keyframes reminderSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

.topbar-user{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:4px 8px;border-radius:10px;transition:background .2s;
}
.topbar-user:hover{background:rgba(255,255,255,.1)}

/* ── Avatars ── */

.avatar-sm{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.3);flex-shrink:0;
}

.profile-avatar-wrap{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.profile-avatar-wrap{position:relative}
.profile-avatar{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:3px solid var(--border);background:var(--bg);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Состояния загрузки аватара (см. uploadAvatar в app.js):
 * .is-uploading — крутящееся кольцо вокруг аватара
 * .is-success   — короткая зелёная вспышка + чек, 1.5s, потом откатывается JS */
.profile-avatar.is-uploading{
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(99,102,241,0.15);
  animation:avatarUploadingPulse 1.4s ease-in-out infinite;
}
.profile-avatar.is-uploading::after{content:none}
.profile-avatar-wrap.is-uploading::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:88px;height:88px;border-radius:50%;
  border:3px solid transparent;
  border-top-color:var(--accent,#1172b6);
  border-right-color:var(--accent,#1172b6);
  animation:avatarUploadSpin 0.9s linear infinite;
  pointer-events:none;
}
.profile-avatar-wrap.is-success::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:88px;height:88px;border-radius:50%;
  background:rgba(34,197,94,0.18);
  box-shadow:0 0 0 3px rgba(34,197,94,0.45), 0 0 22px rgba(34,197,94,0.5);
  animation:avatarSuccessRing 1.4s ease-out forwards;
  pointer-events:none;
}
.avatar-success-check{
  position:absolute;top:50%;left:50%;width:34px;height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;background:#22c55e;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(34,197,94,0.45);
  animation:avatarSuccessPop .9s cubic-bezier(.22,1.4,.42,1) forwards;
  pointer-events:none;z-index:3;
}
.avatar-success-check svg{width:20px;height:20px;stroke:#fff;stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;animation:avatarSuccessCheck .55s ease-out .15s forwards}
.profile-avatar.is-success{
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,0.25);
}
@keyframes avatarUploadingPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
  50%{box-shadow:0 0 0 6px rgba(99,102,241,0.30)}
}
@keyframes avatarUploadSpin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes avatarSuccessPop{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes avatarSuccessCheck{to{stroke-dashoffset:0}}
@keyframes avatarSuccessRing{
  0%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(1.35)}
}
@media (prefers-reduced-motion: reduce){
  .profile-avatar.is-uploading,
  .profile-avatar-wrap.is-uploading::before,
  .profile-avatar-wrap.is-success::after,
  .avatar-success-check,
  .avatar-success-check svg{animation:none}
  .profile-avatar.is-uploading{box-shadow:0 0 0 3px var(--accent-soft,rgba(99,102,241,0.2))}
}
.avatar-upload-zone{
  width:100%;border:2px dashed var(--border);border-radius:12px;
  padding:16px 12px;text-align:center;cursor:pointer;
  transition:all .25s;position:relative;background:var(--bg);
}
.avatar-upload-zone:hover,
.avatar-upload-zone.dragover{
  border-color:var(--accent);background:var(--accent-soft);
}
.avatar-upload-zone.dragover{
  box-shadow:0 0 0 3px rgba(17,114,182,.2);
}
.avatar-upload-zone input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;
}
.avatar-upload-content{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-sec);pointer-events:none;
}
.avatar-upload-content svg{color:var(--accent);margin-bottom:2px}
.avatar-upload-text{font-size:13px;font-weight:600;color:var(--text)}
.avatar-upload-hint{font-size:11px;color:var(--disabled)}

.avatar-upload-progress{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px 0;
}
.avatar-progress-bar{
  width:100%;height:6px;background:var(--border);border-radius:3px;
  overflow:hidden;
}
.avatar-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent),#38a3d6);
  border-radius:3px;width:0%;transition:width .3s ease;
}
.avatar-progress-text{font-size:12px;color:var(--text-sec);font-weight:600}

/* ── Profile popup ── */

.profile-popup-card{max-width:460px}

.profile-card-body{
  display:flex;gap:20px;align-items:flex-start;margin-bottom:18px;
}
.profile-info{
  flex:1;display:flex;flex-direction:column;gap:10px;
}
.profile-field{display:flex;flex-direction:column;gap:2px}
.profile-label{font-size:11px;font-weight:700;color:var(--text-sec);text-transform:uppercase;letter-spacing:.5px}
.profile-value{font-size:14px;color:var(--text)}
.profile-input{
  border-radius:8px;border:1.5px solid var(--border);
  padding:6px 10px;font:inherit;font-size:13px;color:var(--text);
  background:var(--card);transition:border-color .2s;
}
.profile-input:focus{outline:none;border-color:var(--accent)}
.profile-input[readonly]{background:var(--bg);color:var(--text-sec);cursor:default}

/* ── Tabs ── */

.tabs{
  display:flex;gap:0;background:var(--card);
  border-bottom:2px solid var(--border);
  padding:0 24px;overflow-x:auto;
}
.tab{
  background:none;border:none;border-bottom:3px solid transparent;
  padding:12px 18px;font-size:14px;font-weight:600;color:var(--text-sec);
  cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:all .2s;white-space:nowrap;border-radius:0;
}
.tab:hover{color:var(--text);background:var(--accent-soft)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab.tab-disabled{opacity:.45;cursor:default;pointer-events:none}
a.tab{text-decoration:none}
.tab-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--text-sec);color:var(--bg);padding:1px 5px;border-radius:6px;margin-left:4px;vertical-align:middle}

/* ── Content panels ── */

.content{
  max-width:900px;margin:0 auto;padding:20px 24px 32px;
}
.panel{display:none}
.panel.active{display:block;animation:panelEnter .22s ease-out both}
@keyframes panelEnter{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:24px;box-shadow:var(--shadow);transition:box-shadow .25s ease,transform .25s ease;
}

/* ── Schedule controls ── */

.schedule-controls{
  display:flex;gap:12px;align-items:end;flex-wrap:wrap;
  margin-bottom:16px;
}
.schedule-controls label{flex:1;min-width:140px}
.schedule-controls .btn-secondary{align-self:end;height:42px}

/* ── Form elements ── */

label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--text-sec)}

input,select,textarea{
  border-radius:10px;border:1.5px solid var(--border);
  padding:10px 12px;font:inherit;font-size:14px;color:var(--text);
  background:var(--card);transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(17,114,182,.15);
}

/* ── Custom checkboxes (global) ── */
input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;padding:0;
  border:2px solid var(--border);border-radius:4px;
  background:var(--card);cursor:pointer;position:relative;
  flex-shrink:0;transition:all .15s;
}
input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 2px rgba(17,114,182,.2);
}
input[type="checkbox"]:disabled{opacity:.5;cursor:default}

/* ── Buttons ── */

button{
  border-radius:10px;border:none;padding:10px 18px;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;
  transition:transform .12s cubic-bezier(.2,.9,.32,1.2),background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
button:active:not(:disabled){transform:scale(.96)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(17,114,182,.35)}
button:disabled{opacity:.45;cursor:default;pointer-events:none}
button.is-loading{position:relative;cursor:wait}
button.is-loading::after{
  content:'';position:absolute;right:8px;top:50%;
  width:12px;height:12px;margin-top:-6px;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,33,86,.25)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-secondary{background:var(--accent-soft);color:var(--accent);border:1.5px solid transparent}
.btn-secondary:hover{border-color:var(--accent);background:#d6ecf8}
.btn-outline{background:transparent;color:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.3);font-size:13px;padding:8px 14px}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-outline-dark{background:transparent;color:var(--text-sec);border:1.5px solid var(--border)}
.btn-outline-dark:hover{background:var(--bg);border-color:var(--text-sec)}
.btn-accent{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.25);font-size:13px;padding:8px 14px}
.btn-accent:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}

/* ── CRM form ── */

.crm-form{
  display:grid;gap:14px;grid-template-columns:1fr 1fr;
}
.full-width{grid-column:1/-1}

/* ── Schedule slots ── */

#scheduleGrid{margin-top:4px}

.slot-row{
  display:grid;grid-template-columns:115px 1fr;
  gap:8px;align-items:center;margin-bottom:5px;
  animation:fadeIn .3s ease-out both;
  animation-delay:calc(var(--i,0) * 15ms);
}

.slot-now{position:relative;border-left:3px solid var(--accent);border-radius:4px;padding-left:6px}
.slot-now .slot-time{color:var(--accent);font-weight:800}
.slot-now-label{
  font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;
  letter-spacing:.5px;grid-column:1/-1;margin:-4px 0 2px;
  animation:slotPulse 2s ease-in-out infinite;
}
@keyframes slotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.slot-now .slot-status{
  box-shadow:0 0 0 2px var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--bg));
  position:relative;overflow:hidden;
}
.slot-progress{
  position:absolute;left:0;top:0;bottom:0;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:10px 0 0 10px;pointer-events:none;transition:width 1s linear;
}
.slot-past{opacity:.45;filter:grayscale(.15)}
.slot-past .slot-status.free{background:var(--bg);border-color:var(--border);color:var(--text-sec)}
.slot-time{font-size:13px;font-weight:700;color:var(--text-sec);white-space:nowrap}

.slot-status{
  border-radius:10px;border:1.5px solid var(--border);
  padding:10px 14px;font-size:13px;transition:all .2s;
}
.slot-status.free{background:var(--ok-soft);border-color:#c6f6d5;color:var(--ok)}
.slot-status.free.clickable{cursor:pointer;position:relative}
.slot-status.free.clickable::after{
  content:'+';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;background:var(--ok);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  opacity:0;transition:opacity .2s;
}
.slot-status.free.clickable:hover{
  background:#dcfce7;border-color:#86efac;transform:translateX(3px);
  box-shadow:0 2px 8px rgba(39,103,73,.12);
}
.slot-status.free.clickable:hover::after{opacity:1}
.slot-status.busy{background:var(--danger-soft);border-color:#fed7d7;color:var(--danger)}
.slot-info{display:block;font-size:12px;opacity:.8;margin-top:2px}

.slot-profile-link{
  color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;cursor:pointer;transition:opacity .2s;
}
.slot-profile-link:hover{opacity:.7}

/* ── Links grid ── */

.links-grid{display:grid;gap:10px}

.link-btn{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  text-decoration:none;color:var(--text);transition:all .25s;cursor:pointer;
}
.link-btn:hover{
  border-color:var(--accent);background:var(--accent-soft);
  transform:translateX(4px);box-shadow:0 2px 10px rgba(17,114,182,.1);
}
.link-btn.disabled{opacity:.5;cursor:default;pointer-events:none}
.link-icon{
  width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:#fff;
}
.icon-headset{background:linear-gradient(135deg,#0e2156,#1a3a7a)}
.icon-chat{background:linear-gradient(135deg,#1172b6,#38a3d6)}
.icon-globe{background:linear-gradient(135deg,#276749,#38a169)}
.link-text{display:flex;flex-direction:column}
.link-title{font-weight:700;font-size:14px}
.link-desc{font-size:12px;color:var(--text-sec)}
.link-arrow{margin-left:auto;color:var(--disabled);transition:color .2s,transform .2s}
.link-btn:hover .link-arrow{color:var(--accent);transform:translateX(3px)}
.badge-dev{
  display:inline-block;background:#fefcbf;color:#975a16;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:6px;
}

/* ── Messages ── */

.message{min-height:20px;margin-top:10px;color:var(--text-sec);font-size:13px}
.message.error{color:var(--danger)}
.message.success{color:var(--ok)}

/* ── Popup ── */

.popup-overlay{
  position:fixed;inset:0;background:rgba(14,33,86,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:24px;
  animation:overlayFade .25s ease-out both;
}
@keyframes overlayFade{
  from{opacity:0;backdrop-filter:blur(0)}
  to{opacity:1;backdrop-filter:blur(4px)}
}
.popup-card{
  background:var(--card);border-radius:20px;padding:28px;
  width:100%;max-width:440px;box-shadow:var(--shadow-lg);
  max-height:90vh;overflow-y:auto;
  animation:popupPop .34s cubic-bezier(.2,.9,.32,1.2) both;
}
@keyframes popupPop{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Размерные модификаторы вместо inline-style max-width */
.popup-card-sm{max-width:360px}
.popup-card-md{max-width:480px}
.popup-card-lg{max-width:640px}
.popup-card-xl{max-width:840px}
.popup-card h3{
  margin:0 0 18px;display:flex;align-items:center;gap:8px;
  color:var(--primary);font-size:17px;
}
.popup-card h3 svg{color:var(--accent)}
.popup-form{display:flex;flex-direction:column;gap:14px}
.popup-time-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.popup-actions{display:flex;gap:10px}
.popup-actions button{flex:1}

/* ── Admin ── */

.admin-tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:18px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.admin-tabs::-webkit-scrollbar{height:6px}
.admin-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.admin-tab{
  background:none;border:none;border-bottom:2.5px solid transparent;
  padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-sec);
  cursor:pointer;transition:all .2s;border-radius:0;position:relative;
  white-space:nowrap;flex-shrink:0;
}
.admin-tab:hover{color:var(--text);background:var(--bg-soft);border-radius:8px 8px 0 0}
.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* На узких экранах табы скроллятся горизонтально (как .tabs), на десктопе — обычный ряд */
@media(max-width:1024px){
  .admin-tabs{padding-bottom:0}
  .admin-tab{padding:10px 12px;font-size:12.5px}
}
@media(max-width:480px){
  .admin-tab{padding:8px 10px;font-size:12px}
}
.badge-count{
  display:inline-block;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;min-width:16px;height:16px;
  line-height:16px;text-align:center;border-radius:8px;
  padding:0 4px;margin-left:4px;vertical-align:top;
}

.admin-content{overflow-x:auto;-webkit-overflow-scrolling:touch}

.admin-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
}
.admin-table th{
  text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);
  color:var(--text-sec);font-weight:700;white-space:nowrap;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;
}
.admin-table td{
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.admin-table tbody tr{transition:background .15s}
.admin-table tr:hover td{background:var(--bg-soft)}
.admin-table .desc-cell{max-width:250px;word-wrap:break-word}

.admin-empty{text-align:center;color:var(--disabled);padding:40px 0;font-size:14px}

/* Roles & Access admin */
.roles-access-section{margin-bottom:32px}
.roles-access-section h3{
  margin:0 0 14px;font-size:15px;font-weight:700;color:var(--primary);
  display:flex;align-items:center;gap:8px;
  padding-bottom:8px;border-bottom:1.5px solid var(--border);
}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:12px 0}
.perm-group{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.perm-group:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(17,114,182,.06)}
.perm-group h4{
  margin:0 0 10px;font-size:11px;font-weight:700;color:var(--text-sec);
  text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:6px;border-bottom:1px solid var(--border);
}
.perm-label{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--text);
  cursor:pointer;padding:5px 6px;border-radius:6px;transition:background .15s;
}
.perm-label:hover{background:var(--accent-soft)}
.perm-label input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;margin:0;width:18px;height:18px;
  border:2px solid var(--border);border-radius:5px;background:var(--card);
  cursor:pointer;position:relative;flex-shrink:0;transition:all .15s;
}
.perm-label input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.perm-label input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.perm-label input[type="checkbox"]:disabled{opacity:.5;cursor:default}
.perm-label input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 2px rgba(17,114,182,.2);
}
.role-badge-system{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;
  letter-spacing:.03em;text-transform:uppercase;
}
.group-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  padding:16px 18px;transition:border-color .2s,box-shadow .2s;
}
.group-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(17,114,182,.06)}
.group-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-wrap:wrap;gap:4px}
.group-card-ws{border-color:var(--accent);border-left:4px solid var(--accent)}
.ra-groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:12px}

/* Workspace badge */
.ws-badge{
  display:inline-block;font-size:10px;font-weight:600;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:2px 8px;border-radius:10px;letter-spacing:.3px;
}
/* Workspace filter select */
.ws-filter-select{
  border:1.5px solid var(--accent);background:var(--accent-bg,var(--accent-soft));
  border-radius:8px;padding:6px 10px;font-size:13px;color:var(--text);
}
/* Task workspace tag */
.task-ws-tag{
  display:inline-block;font-size:10px;padding:1px 6px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent);font-weight:600;
}
/* Board workspace tag */
.board-ws-tag{
  display:inline-block;font-size:9px;padding:1px 5px;border-radius:5px;
  background:var(--accent-soft);color:var(--accent);font-weight:600;margin-left:4px;
  vertical-align:middle;
}
.member-list{
  max-height:200px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px;
  padding:8px;background:var(--bg-soft);display:flex;flex-direction:column;gap:2px;
}
.ra-role-detail{padding:4px 0}

/* CRM config admin */
/* Room admin */
.rooms-admin-section{margin-bottom:16px}
.rooms-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:10px}
.room-admin-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px}
.room-admin-card:hover{border-color:var(--accent)}
.room-admin-header{margin-bottom:4px}
/* Site settings */
.site-settings-wrap{max-width:600px}
.site-settings-form label{display:block;margin-bottom:8px}
.site-settings-form input[type="email"],.site-settings-form input[type="text"]{width:100%}
/* Ticket detail */
.ticket-detail-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:16px 20px}
.ticket-comments{max-height:300px;overflow-y:auto;margin:8px 0}
.ticket-row-clickable:hover{background:var(--accent-soft)}
.crm-cfg-wrap{display:flex;gap:24px;flex-wrap:wrap;padding:4px 0}
.crm-cfg-section{flex:1;min-width:260px}
.crm-cfg-title{font-size:13px;font-weight:600;color:var(--primary);margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em}
.crm-cfg-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.crm-cfg-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:var(--accent-soft);border-radius:6px;font-size:13px}
.crm-cfg-item span{flex:1;word-break:break-word}
.crm-cfg-add-form{display:flex;gap:6px;align-items:center}
.crm-cfg-input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--card);color:var(--text)}

/* Pagination */
.admin-pagination{display:flex;align-items:center;gap:4px;margin:12px 0 4px;flex-wrap:wrap}
.pg-btn{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:13px;cursor:pointer;line-height:1.4}
.pg-btn:hover:not([disabled]):not(.active){background:var(--accent-soft)}
.pg-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pg-btn[disabled]{opacity:.4;cursor:default}
.pg-ellipsis{padding:0 4px;color:var(--text-sec)}
.pg-info{margin-left:8px;font-size:12px;color:var(--text-sec);white-space:nowrap}

/* ── Cancel, toggle, edit buttons ── */

.btn-cancel-slot{
  background:none;border:none;color:var(--danger);font-size:14px;font-weight:700;
  cursor:pointer;padding:2px 6px;border-radius:6px;margin-left:6px;
  opacity:.6;transition:opacity .2s,background .2s;
}
.btn-cancel-slot:hover{opacity:1;background:var(--danger-soft)}

.btn-cancel-sm{
  background:var(--danger-soft);color:var(--danger);border:1.5px solid #fed7d7;
  padding:5px 12px;font-size:12px;font-weight:600;border-radius:8px;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.btn-cancel-sm:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.btn-toggle-admin{
  background:var(--bg);color:var(--text-sec);border:1.5px solid var(--border);
  padding:5px 12px;font-size:12px;font-weight:600;border-radius:8px;
  cursor:pointer;transition:all .2s;
}
.btn-toggle-admin:hover{border-color:var(--accent)}
.btn-toggle-admin.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-toggle-admin.active:hover{background:var(--primary-hover)}

.btn-edit-user{
  background:var(--accent-soft);color:var(--accent);border:1.5px solid transparent;
  padding:5px 12px;font-size:12px;font-weight:600;border-radius:8px;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.btn-edit-user:hover{background:var(--accent);color:#fff}

/* ── Cancel popup ── */

.cancel-info{
  font-size:14px;color:var(--text-sec);margin:0 0 18px;line-height:1.6;
}
.cancel-info strong{color:var(--text)}
.cancel-actions{display:flex;flex-direction:column;gap:10px}
.btn-danger-full{
  background:var(--danger);color:#fff;border:none;
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px;
  cursor:pointer;transition:all .2s;
}
.btn-danger-full:hover{
  background:#9b2c2c;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(197,48,48,.25);
}
.btn-danger-full:active{transform:translateY(0);box-shadow:none}
.btn-danger-outline{
  background:transparent;color:var(--danger);border:1.5px solid #fed7d7;
  padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px;
  cursor:pointer;transition:all .2s;
}
.btn-danger-outline:hover{background:var(--danger-soft);border-color:var(--danger)}

/* ── IT Wizard ── */

.it-wizard{display:flex;flex-direction:column;gap:16px}

.it-breadcrumbs{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;color:var(--text-sec);
}
.it-breadcrumbs span{white-space:nowrap}
.it-breadcrumbs .it-bc-sep{color:var(--disabled);font-size:10px}
.it-breadcrumbs .it-bc-current{color:var(--accent);font-weight:700}

.it-step-title{
  font-size:16px;font-weight:700;color:var(--text);margin:0;
}

.it-options{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}

.it-option{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:var(--card);
  border:1.5px solid var(--border);border-radius:12px;
  font-size:14px;font-weight:600;color:var(--text);
  cursor:pointer;transition:all .25s;text-align:left;
  justify-content:flex-start;
}
.it-option:hover{
  border-color:var(--accent);background:var(--accent-soft);
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(17,114,182,.1);
}
.it-option.disabled{
  opacity:.5;cursor:default;pointer-events:none;position:relative;
}
.it-option .badge-dev{
  margin-left:auto;flex-shrink:0;
}

.it-back-btn{
  align-self:flex-start;
  background:none;border:1.5px solid var(--border);
  color:var(--text-sec);padding:8px 16px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
}
.it-back-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.it-desc-group{display:flex;flex-direction:column;gap:8px}
.it-desc-group label{font-weight:600;font-size:13px;color:var(--text-sec)}
.it-desc-group textarea{
  border-radius:10px;border:1.5px solid var(--border);
  padding:10px 12px;font:inherit;font-size:14px;color:var(--text);
  background:var(--card);transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.it-desc-group textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(17,114,182,.15);
}

.it-seat-group{display:flex;flex-direction:column;gap:8px}
.it-seat-group label{font-weight:600;font-size:13px;color:var(--text-sec)}
.it-seat-group input{
  max-width:180px;border-radius:10px;border:1.5px solid var(--border);
  padding:10px 12px;font:inherit;font-size:14px;color:var(--text);
  background:var(--card);transition:border-color .2s,box-shadow .2s;
}
.it-seat-group input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(17,114,182,.15);
}

.it-submit-btn{
  align-self:flex-start;
  background:var(--primary);color:#fff;
  padding:12px 28px;border-radius:10px;font-weight:600;font-size:14px;
  cursor:pointer;transition:all .2s;border:none;
}
.it-submit-btn:hover{
  background:var(--primary-hover);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(14,33,86,.3);
}

/* ── IT Status badges ── */

.it-status-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:8px;white-space:nowrap;
}
.status-new{background:#fefcbf;color:#975a16}
.status-progress{background:var(--accent-soft);color:var(--accent)}
.status-done{background:var(--ok-soft);color:var(--ok)}

/* ── Role select in admin ── */
.role-select,
.ra-user-role{
  padding:6px 10px;font-size:12px;font-weight:600;
  border-radius:8px;border:1.5px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5568' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;
}
.role-select:hover,
.ra-user-role:hover{border-color:var(--accent)}
.role-select:focus,
.ra-user-role:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(17,114,182,.1)}

/* ── IT wizard profile location hint ── */
.it-profile-loc{
  font-size:13px;color:var(--text-sec);margin-bottom:10px;
  padding:8px 12px;background:var(--ok-soft);border-radius:8px;
  border:1px solid #c6f6d5;
}

/* ── Responsive: Tablet ── */

@media(max-width:740px){
  .schedule-controls{flex-direction:column}
  .schedule-controls label{min-width:0}
  .crm-form{grid-template-columns:1fr}
  .content{padding:14px 16px 24px}
  .topbar{padding:10px 16px;flex-wrap:wrap;gap:8px}
  .topbar-right{width:100%;justify-content:flex-end}
  .tabs{padding:0 12px}
  .tab{padding:10px 14px;font-size:13px}
  .tab svg{display:none}
  .it-options{grid-template-columns:1fr}
  h1{font-size:16px}
  .auth-card{padding:28px 20px}
  .profile-card-body{flex-direction:column;align-items:center}
  .card{padding:18px}
  .popup-overlay{padding:16px}
  .popup-card{padding:22px;border-radius:16px}
  .admin-table{font-size:12px}
  .admin-table th,.admin-table td{padding:6px 8px}
  .tz-filters-row{gap:6px}
  .tz-filter-select{flex:1 1 calc(50% - 6px);max-width:none;font-size:12px;padding:6px 8px}
  .tz-filter-search{flex:1 1 100%;font-size:12px;padding:6px 8px}
  .tz-filter-actions{width:100%;justify-content:flex-end}
  .tz-create-btn{padding:7px 12px;font-size:12px}
  .tz-export-btn{padding:7px 12px;font-size:12px}
  .tz-form-grid{grid-template-columns:1fr}
  .tz-form-dates{grid-template-columns:1fr}
  .tz-stats-row{gap:8px}
  .tz-stat-card{min-width:80px;padding:10px}
  .tz-table{font-size:12px}
  .tz-table th,.tz-table td{padding:6px 8px}
  .tz-popup-card{max-width:100%}
  .kanban-column{min-width:260px;max-width:300px;flex:1 0 260px}
  .kanban-cards{max-height:calc(100vh - 220px)}
  .kanban-card-body{padding:11px 12px;gap:7px}
  .kanban-card-title{font-size:13.5px;-webkit-line-clamp:6}
  .kanban-col-title{font-size:12px}
  .kb-categories-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .kb-editor-popup-card{max-width:100%}
  .kb-editor-grid{grid-template-columns:1fr}
}

/* ── Responsive: Mobile ── */

@media(max-width:480px){
  .auth-screen{padding:12px}
  .auth-card{padding:32px 22px;border-radius:18px;max-width:380px}
  .auth-title{font-size:22px}
  .auth-tagline{font-size:13px}
  .auth-brand-mark{width:56px;height:56px;font-size:24px;border-radius:16px}
  .auth-bg-blob{width:340px;height:340px}

  .topbar{padding:8px 12px;gap:6px}
  .topbar h1{font-size:15px;letter-spacing:0}
  .topbar .subtitle{font-size:11px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-icon{width:22px;height:22px;display:none}
  .topbar-left{gap:8px}
  .topbar-right{gap:6px}
  .topbar-user{padding:2px 4px;gap:6px}
  .avatar-sm{width:28px;height:28px}

  .btn-accent,.btn-outline{padding:7px 10px;font-size:12px}
  .btn-accent svg,.btn-outline svg{width:14px;height:14px}

  .tabs{padding:0 8px;gap:0}
  .tab{padding:10px 10px;font-size:12px;flex:1;justify-content:center}
  .tab svg{display:none}

  .it-options{grid-template-columns:1fr}
  .it-option{padding:12px 14px;font-size:13px}
  .it-step-title{font-size:14px}
  .it-breadcrumbs{font-size:11px}

  .content{padding:10px 12px 20px}
  .card{padding:14px;border-radius:12px}

  .schedule-controls{gap:8px}
  .schedule-controls .btn-secondary{width:100%}

  .slot-row{grid-template-columns:1fr;gap:4px;margin-bottom:8px}
  .slot-time{font-size:12px;padding-left:4px}
  .slot-status{padding:10px 12px;font-size:12px;border-radius:8px}
  .slot-status.free.clickable::after{right:8px;width:22px;height:22px;font-size:14px;opacity:1}

  .popup-overlay{padding:8px;align-items:flex-end}
  .popup-card{
    padding:20px 16px;border-radius:16px 16px 0 0;
    max-width:100%;max-height:90vh;overflow-y:auto;
  }
  .popup-card h3{font-size:15px;margin-bottom:14px}
  .popup-time-row{grid-template-columns:1fr 1fr;gap:8px}
  .popup-actions{flex-direction:column}
  .popup-actions button{width:100%}

  .profile-popup-card{max-width:100%}
  .profile-avatar{width:72px;height:72px}
  .profile-label{font-size:10px}
  .profile-value{font-size:13px}
  .profile-input{font-size:12px;padding:5px 8px}

  .crm-form{gap:10px}

  .link-btn{padding:12px 14px;gap:10px}
  .link-icon{width:36px;height:36px;border-radius:10px}
  .link-title{font-size:13px}
  .link-desc{font-size:11px}

  .admin-tabs{flex-wrap:wrap;gap:1px}
  .admin-tab{padding:7px 10px;font-size:11px;flex:1;text-align:center;justify-content:center}
  .admin-table{font-size:11px}
  .admin-table th{font-size:10px;padding:6px 8px}
  .admin-table td{padding:7px 8px}
  .admin-table .desc-cell{max-width:140px}
  .btn-cancel-sm,.btn-toggle-admin,.btn-edit-user{padding:4px 8px;font-size:11px}
  .perm-grid{grid-template-columns:1fr}

  .cancel-actions button{font-size:13px;padding:10px 14px}

  .avatar-upload-zone{padding:12px 8px}
  .avatar-upload-text{font-size:12px}
  .avatar-upload-hint{font-size:10px}

  .message{font-size:12px}
  .hint{font-size:11px}

  .tz-form-grid{grid-template-columns:1fr}
  .tz-form-dates{grid-template-columns:1fr}
  .tz-filters-row{flex-direction:column}
  .tz-filter-select,.tz-filter-search{width:100%;min-width:0}
  .tz-stats-row{gap:6px}
  .tz-stat-card{min-width:60px;padding:8px 6px}
  .tz-stat-card .tz-stat-num{font-size:18px}
  .tz-stat-card .tz-stat-label{font-size:9px}
  .tz-table{font-size:11px}
  .tz-table th,.tz-table td{padding:5px 6px}
  .tz-popup-card{border-radius:16px 16px 0 0;max-width:100%}
  .kanban-board{gap:8px;padding:4px 0 12px}
  .kanban-column{min-width:240px;max-width:280px;flex:1 0 240px}
  .kanban-column-header{padding:8px 10px}
  .kanban-col-title{font-size:11px}
  .kanban-col-count{font-size:10px;padding:1px 6px}
  .kanban-card-body{padding:10px 11px;gap:7px}
  .kanban-card-code, .kanban-card-code-text{font-size:10.5px}
  .kanban-card-title{font-size:13px;-webkit-line-clamp:6}
  .kanban-card-owner{font-size:11px}
  .kanban-card-ava{width:22px;height:22px;font-size:9.5px}
  .kanban-flag{font-size:9.5px;padding:2px 5px}
  .kanban-cards{max-height:calc(100vh - 240px);padding:6px;gap:7px}
  .kb-categories-grid{grid-template-columns:1fr 1fr;gap:8px}
  .kb-category-card{padding:14px 10px}
  .kb-cat-icon svg{width:24px;height:24px}
  .kb-article-title{font-size:20px}
  .kb-article-body{font-size:14px}
  .kb-editor-popup-card{border-radius:16px 16px 0 0}
  #kbQuillEditor{min-height:200px}

  input,select,textarea{font-size:16px;padding:10px 12px}

  /* Safe area for iPhone notch */
  .topbar{
    padding-top:max(8px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .content{
    padding-bottom:max(20px, env(safe-area-inset-bottom));
  }
  .popup-card{
    padding-bottom:max(20px, env(safe-area-inset-bottom));
  }
}

/* ── TZ (Технические задания) ── */

.tz-stats-row{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}
.tz-stat-card{
  flex:1;min-width:100px;padding:12px 14px;border-radius:12px;
  background:var(--bg);border:1.5px solid var(--border);text-align:center;
  cursor:pointer;transition:all .2s;
}
.tz-stat-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.tz-stat-card .tz-stat-num{font-size:22px;font-weight:800;color:var(--text)}
.tz-stat-card .tz-stat-label{font-size:11px;color:var(--text-sec);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tz-stat-danger .tz-stat-num{color:var(--danger)}
.tz-stat-danger{border-color:#fed7d7;background:var(--danger-soft)}
.tz-stat-warn .tz-stat-num{color:#d69e2e}
.tz-stat-warn{border-color:var(--warn);background:var(--warn-soft)}
.tz-stat-info .tz-stat-num{color:#6b46c1}
.tz-stat-info{border-color:#d6bcfa;background:var(--info-soft)}

.tz-filters{
  display:flex;flex-direction:column;gap:10px;margin-bottom:16px;
}
.tz-filters-row{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.tz-filter-select{
  border-radius:8px;border:1.5px solid var(--border);
  padding:7px 10px;font:inherit;font-size:13px;color:var(--text);
  background:var(--card);min-width:0;flex:1 1 110px;max-width:200px;transition:border-color .2s;
}
.tz-filter-select:focus{outline:none;border-color:var(--accent)}
.tz-filter-search{
  border-radius:8px;border:1.5px solid var(--border);
  padding:7px 10px;font:inherit;font-size:13px;color:var(--text);
  background:var(--card);flex:1 1 140px;min-width:0;transition:border-color .2s;
}
.tz-filter-search:focus{outline:none;border-color:var(--accent)}
.tz-checkbox-label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--text-sec);
  cursor:pointer;white-space:nowrap;
}
.tz-checkbox-label input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;
  border:2px solid var(--border);border-radius:4px;background:var(--card);
  cursor:pointer;position:relative;flex-shrink:0;transition:all .15s;margin:0;
}
.tz-checkbox-label input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.tz-checkbox-label input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.tz-filter-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;margin-left:auto}
.tz-create-btn{
  background:var(--accent);color:#fff;border:none;
  padding:8px 16px;border-radius:8px;font-weight:700;font-size:13px;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.tz-create-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}

/* TZ table */
#tzListContainer{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tz-table{
  width:100%;border-collapse:collapse;font-size:13px;min-width:700px;
}
.tz-table th{
  text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);
  color:var(--text-sec);font-weight:700;white-space:nowrap;font-size:12px;
}
.tz-table td{
  padding:8px 10px;border-bottom:1px solid var(--border);
  vertical-align:top;
}
.tz-table tr{cursor:pointer;transition:background .15s}
.tz-table tr:hover td{background:var(--accent-soft)}
.tz-row-overdue td{background:var(--danger-soft)!important}
.tz-row-overdue:hover td{background:#fed7d7!important}
.tz-row-soon td{background:var(--warn-soft)!important}
.tz-row-soon:hover td{background:var(--warn)!important}
.tz-row-missing-dl td{background:var(--info-soft)!important}
.tz-row-missing-dl:hover td{background:#d6bcfa!important}
.tz-code-cell{font-weight:700;white-space:nowrap;color:var(--accent)}
.tz-cell-overdue{color:var(--danger);font-weight:700}
.tz-title-cell{max-width:300px;word-wrap:break-word;white-space:normal;line-height:1.3}
.tz-link-icon{
  display:inline-block;margin-left:4px;vertical-align:middle;
  color:var(--accent);opacity:.7;transition:opacity .2s;
}
.tz-link-icon:hover{opacity:1}

/* TZ status badges */
.tz-status-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:8px;white-space:nowrap;
}
.tz-st-draft{background:var(--bg-muted);color:#718096}
.tz-st-review{background:#fefcbf;color:#975a16}
.tz-st-analysis{background:#bee3f8;color:#2b6cb0}
.tz-st-development{background:var(--accent-soft);color:var(--accent)}
.tz-st-testing{background:#e9d8fd;color:#6b46c1}
.tz-st-release{background:#feebc8;color:#c05621}
.tz-st-production{background:var(--ok-soft);color:var(--ok)}
.tz-st-cancelled{background:var(--danger-soft);color:var(--danger)}

/* TZ priority badges */
.tz-prio-badge{
  display:inline-block;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:6px;white-space:nowrap;text-transform:uppercase;
}
.tz-prio-low{background:var(--bg-muted);color:#718096}
.tz-prio-medium{background:#fefcbf;color:#975a16}
.tz-prio-high{background:#feebc8;color:#c05621}
.tz-prio-critical{background:var(--danger-soft);color:var(--danger)}

/* TZ popup form */
.tz-popup-card{max-width:600px;max-height:90vh;overflow-y:auto}
.tz-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tz-form-dates{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.tz-meta{
  font-size:12px;color:var(--text-sec);padding:10px 12px;
  background:var(--bg);border-radius:8px;margin-top:4px;
  display:flex;gap:16px;flex-wrap:wrap;
}
.tz-meta span{white-space:nowrap}

/* TZ history */
.tz-history-section{margin-top:12px}
.tz-history-section h4{margin:0 0 8px;font-size:14px;color:var(--text)}
.tz-history-list{max-height:200px;overflow-y:auto}
.tz-history-item{
  padding:6px 10px;border-bottom:1px solid var(--border);
  font-size:12px;color:var(--text-sec);
}
.tz-history-item:last-child{border-bottom:none}
.tz-history-field{font-weight:700;color:var(--text)}
.tz-history-date{float:right;font-size:11px;opacity:.7}

/* ── TZ Comments ── */
.tz-comments-section{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.tz-comments-section h4{margin:0 0 8px;font-size:14px;color:var(--text)}
.tz-comments-count{font-weight:400;color:var(--text-sec);font-size:12px}
.tz-comments-list{max-height:300px;overflow-y:auto;margin-bottom:10px}
.tz-comment{padding:8px 10px;border-bottom:1px solid var(--border)}
.tz-comment:last-child{border-bottom:none}
.tz-comment-header{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px}
.tz-comment-header strong{color:var(--text);font-size:13px}
.tz-comment-date{color:var(--text-sec);font-size:11px}
.tz-comment-delete{margin-left:auto;background:none;border:none;color:var(--text-sec);cursor:pointer;font-size:16px;padding:0 4px;line-height:1}
.tz-comment-delete:hover{color:#e53e3e}
.tz-comment-text{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.tz-comments-empty{font-size:12px;color:var(--text-sec);margin:8px 0;text-align:center}
.tz-comment-form{display:flex;gap:8px;align-items:flex-end}
.tz-comment-form textarea{flex:1;font-size:13px;resize:vertical;min-height:38px}
.tz-comment-form .btn-sm{white-space:nowrap}

/* ── TZ Watch button ── */
.tz-watch-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--text-sec);cursor:pointer;transition:all .15s}
.tz-watch-btn:hover{border-color:var(--accent);color:var(--accent)}
.tz-watch-btn.watching{background:var(--accent);color:#fff;border-color:var(--accent)}
.tz-watch-btn.watching:hover{opacity:.85}

/* ── TZ Bulk ── */
.tz-bulk-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-muted);border-radius:8px;margin-bottom:8px;flex-wrap:wrap}
.tz-bulk-bar span{font-size:13px;font-weight:600;color:var(--text)}
.tz-bulk-bar select{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid var(--border)}
.tz-cb-th,.tz-cb-td{width:32px;text-align:center;padding:4px!important}
.tz-cb-td input,.tz-cb-th input{cursor:pointer}

.tz-empty{text-align:center;color:var(--disabled);padding:32px 0;font-size:14px}

/* TZ export button */
.tz-export-btn{
  background:var(--ok);color:#fff;border:none;
  padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.tz-export-btn:hover{background:#1e5631;transform:translateY(-1px)}

/* TZ stat pulse animation */
@keyframes tzPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(197,48,48,.25)}
  50%{box-shadow:0 0 0 8px rgba(197,48,48,0)}
}
.tz-stat-pulse{animation:tzPulse 2s ease-in-out infinite}

/* Tab count badge */
.tab-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;border-radius:9px;
  margin-left:6px;line-height:1;
}

/* Toast notifications */
.toast-container{
  position:fixed;top:70px;right:16px;
  z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;
  gap:8px;pointer-events:none;
  max-width:380px;
}
.toast{
  pointer-events:auto;
  padding:12px 18px;border-radius:12px;
  font-size:13px;font-weight:600;
  box-shadow:0 8px 28px rgba(14,33,86,.22), 0 2px 6px rgba(14,33,86,.10);
  cursor:pointer;
  animation:toastSlideIn .4s cubic-bezier(.2,.9,.32,1.2) both;
  text-align:left;white-space:pre-line;
  border-left:4px solid rgba(255,255,255,.55);
  transition:transform .15s ease,filter .15s ease;
}
.toast:hover{transform:translateX(-3px);filter:brightness(1.04)}
.toast-ok{background:var(--accent);color:#fff}
.toast-danger{background:var(--danger);color:#fff}
.toast-warn{background:#d69e2e;color:#fff}
@keyframes toastSlideIn{
  from{opacity:0;transform:translateX(48px) scale(.96)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes toastFadeOut{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(40px)}
}

/* ── AI Chat ── */

.ai-chat{
  display:flex;flex-direction:column;gap:12px;
  max-height:60vh;overflow-y:auto;padding:8px 0 16px;
}

/* (Legacy AI tab styles удалены 2026-05-11 — старая вкладка переписана
   на drawer-engine, .ai-msg-user/.ai-msg-bot/.ai-input-row/.ai-msg-pending/
   .ai-msg-cancelled больше не используются. Текущие AI-стили — .ai-drawer-*,
   .ai-tab-*, .dash-ai-mini-*.) */

/* ── Kanban full-width mode ── */
#panelTz.kanban-active{max-width:100%}
#panelTz.kanban-active .card{max-width:100%}
.content:has(#panelTz.kanban-active.active){max-width:100%}
/* На десктопе панели по умолчанию ограничены 1320px (см. блок sidebar ниже).
   В канбане нужна вся ширина, иначе колонки не помещаются. */
@media (min-width:1000px){
  #mainScreen > .content > #panelTz.kanban-active.active{max-width:none}
  #mainScreen > .content > #panelTz.kanban-active.active > .card{padding:16px}
}
@media (min-width:1600px){
  #mainScreen > .content > #panelTz.kanban-active.active{max-width:none}
}

/* ── TZ View toggle ── */
.tz-view-toggle{display:flex;gap:2px;background:var(--border);border-radius:8px;padding:2px}
.tz-view-btn{
  padding:6px 10px;border:none;background:transparent;cursor:pointer;border-radius:6px;
  color:var(--text-sec);transition:all .2s;display:flex;align-items:center;
}
.tz-view-btn.active{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tz-view-btn:hover:not(.active){background:rgba(255,255,255,.5)}

/* ── Kanban ── */
.kanban-board{
  display:flex;gap:10px;overflow-x:auto;padding:8px 0 16px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
}
.kanban-column{
  min-width:300px;max-width:360px;flex:1 0 300px;
  background:var(--bg-soft);border-radius:12px;display:flex;flex-direction:column;
  border:2px solid transparent;transition:border-color .2s,opacity .2s;
  scroll-snap-align:start;
}
.kanban-wip-over{border-color:var(--danger) !important;background:var(--danger-soft)}
.kanban-wip-over .kanban-col-count{color:var(--danger);font-weight:700}
.board-transitions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.bs-trans-row{
  display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:start;
  padding:8px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface);
}
.bs-trans-from{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;color:var(--ink)}
.bs-trans-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.bs-trans-targets{display:flex;flex-wrap:wrap;gap:6px}
.bs-trans-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;
  background:var(--surface-2);font-size:12px;cursor:pointer;color:var(--ink-2);
  border:1px solid var(--border-subtle);user-select:none;
}
.bs-trans-chip:has(input:checked){background:var(--mint-soft);color:var(--ink);border-color:var(--mint)}
.bs-trans-chip input{margin:0;cursor:pointer}
@media(max-width:600px){.bs-trans-row{grid-template-columns:1fr}}
.kanban-column.drag-over{border-color:var(--accent);background:var(--accent-soft)}
.kanban-column.drag-forbidden{opacity:.4}
.kanban-column-header{
  padding:10px 12px;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:1;
}
.kanban-col-title{font-weight:600;font-size:13px;color:var(--text)}
.kanban-col-count{
  font-size:12px;color:var(--text-sec);background:rgba(255,255,255,.7);
  padding:2px 8px;border-radius:10px;font-weight:600;
}
.kanban-cards{
  flex:1;overflow-y:auto;max-height:calc(100vh - 200px);padding:8px;display:flex;flex-direction:column;gap:10px;
}
.kanban-card{
  background:var(--card);border-radius:10px;padding:0;cursor:grab;
  box-shadow:0 1px 4px rgba(14,33,86,.06);
  display:flex;border:1px solid var(--border);transition:box-shadow .2s,transform .15s,border-color .15s;
  min-height:128px;overflow:hidden;
}
.kanban-card:hover{box-shadow:0 6px 22px rgba(14,33,86,.16);transform:translateY(-1px);z-index:2;border-color:var(--accent)}
.kanban-card.dragging{opacity:.4;transform:rotate(2deg)}
.kanban-card-prio{width:5px;flex-shrink:0}

/* Pill «📁 Проект» на канбан-карточке когда ТЗ привязан к проекту */
.kanban-card-proj{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:6px;padding:3px 8px;
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#6366f1) 20%,transparent);
  border-radius:99px;
  font-size:11px;font-weight:500;color:var(--brand,#6366f1);
  max-width:100%;
  cursor:pointer;
  transition:background .12s ease;
}
.kanban-card-proj:hover{background:color-mix(in srgb,var(--brand,#6366f1) 14%,transparent)}
.kanban-card-proj-emoji{flex-shrink:0;font-size:11px}
.kanban-card-proj-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kanban-prio-critical{background:#c53030}
.kanban-prio-high{background:#dd6b20}
.kanban-prio-medium{background:#d69e2e}
.kanban-prio-low{background:#a0aec0}
.kanban-card-body{padding:12px 14px 12px;min-width:0;flex:1;display:flex;flex-direction:column;gap:9px}

/* Header — code + system + estimate + priority pill */
.kanban-card-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:11px;line-height:1;
}
.kanban-card-code, .kanban-card-code-text{
  font-family:'JetBrains Mono','SF Mono',Consolas,monospace;
  color:var(--text-sec);letter-spacing:.02em;font-weight:600;font-size:11px;
}
.kanban-card-sys{
  font-size:10px;font-weight:700;letter-spacing:.04em;
  background:var(--accent-soft);color:var(--accent);
  padding:2px 7px;border-radius:4px;text-transform:uppercase;line-height:1.4;
}
.kanban-prio-pill{
  margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:2px 7px;border-radius:4px;line-height:1.4;text-transform:uppercase;
}
.kanban-prio-pill-critical{background:rgba(197,48,48,.12);color:#c53030;border:1px solid rgba(197,48,48,.25)}
.kanban-prio-pill-high{background:rgba(221,107,32,.12);color:#9c4a17;border:1px solid rgba(221,107,32,.25)}
.kanban-prio-pill-medium{background:rgba(214,158,46,.14);color:#7a5a13;border:1px solid rgba(214,158,46,.3)}
.kanban-prio-pill-low{background:rgba(160,174,192,.18);color:#4a5568;border:1px solid rgba(160,174,192,.4)}
:root[data-theme="dark"] .kanban-prio-pill-critical{color:#f5a3a3}
:root[data-theme="dark"] .kanban-prio-pill-high{color:#f0c595}
:root[data-theme="dark"] .kanban-prio-pill-medium{color:#e8c570}
:root[data-theme="dark"] .kanban-prio-pill-low{color:#b8c2cf}

.kanban-estimate{
  font-size:10px;font-weight:700;letter-spacing:.02em;
  background:var(--bg-soft);color:var(--text-sec);
  padding:2px 6px;border-radius:4px;line-height:1.4;
  border:1px solid var(--border-subtle);
}

/* Title — крупно, до 8 строк (длинные ТЗ читаются почти полностью,
   очень длинные — обрезаются с …, но это редкий случай). */
.kanban-card-title{
  font-size:14.5px;font-weight:600;color:var(--text);line-height:1.42;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  word-break:break-word;letter-spacing:-.005em;
}

/* Tags row */
.kanban-tags-row{display:flex;flex-wrap:wrap;gap:4px}
.kanban-tag{
  font-size:10px;padding:2px 7px;border-radius:99px;
  background:var(--bg-soft);color:var(--text-sec);
  border:1px solid var(--border-subtle);font-weight:500;
}

/* Owner block — аватар + имя + дедлайн в одной строке снизу */
.kanban-card-owner{
  display:flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:9px;
  border-top:1px solid var(--border-subtle);
  font-size:11.5px;color:var(--text-sec);
}
.kanban-card-ava{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--accent);
}
.kanban-card-ava-empty{
  background:var(--bg-soft);color:var(--text-muted, var(--text-sec));
  border:1px dashed var(--border);font-size:13px;
}
.kanban-card-owner-name{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;color:var(--text);
}

.kanban-card-flags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.kanban-flag{font-size:10px;padding:2px 7px;border-radius:6px;display:inline-block;font-weight:600;line-height:1.4}
.kanban-flag-overdue{background:var(--danger-soft);color:var(--danger)}
.kanban-flag-soon{background:var(--warn-soft);color:#b7791f;border:1px solid var(--warn)}
.kanban-flag-notes{background:#fef3c7;color:#92400e;border:1px solid #fde68a}

.kanban-deadline{
  font-size:10.5px;padding:2px 7px;border-radius:4px;font-weight:600;line-height:1.4;
  white-space:nowrap;display:inline-flex;align-items:center;gap:3px;
  flex-shrink:0;
}
.kanban-card-owner .kanban-deadline{margin-left:auto}
.kanban-dl-overdue{background:var(--danger-soft);color:var(--danger)}
.kanban-dl-soon{background:var(--warn-soft);color:#b7791f}
.kanban-dl-ok{background:var(--ok-soft);color:var(--ok)}

/* Approve badges */
.tz-approve-row{margin:8px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tz-approved-badge{
  display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;
  background:#c6f6d5;color:#22543d;border:1px solid #9ae6b4
}
.tz-pending-badge{
  display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;
  background:#fefcbf;color:#744210;border:1px solid #f6e05e
}
.tz-approved-badge-sm,.tz-pending-badge-sm{font-size:10px;padding:1px 6px;border-radius:5px;font-weight:600}
.tz-approved-badge-sm{background:#c6f6d5;color:#22543d}
.tz-pending-badge-sm{background:#fefcbf;color:#744210}

@media (max-width:600px){
  .tz-checkbox-label{font-size:11px}
}

/* ── Board tabs ── */
.tz-board-tabs{
  display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;
  border-bottom:2px solid var(--border);padding-bottom:4px;
}
.tz-board-tab{
  padding:7px 16px;border:none;background:transparent;
  font-size:13px;font-weight:600;color:var(--text-sec);
  border-radius:8px 8px 0 0;cursor:pointer;transition:all .2s;
  white-space:nowrap;
}
.tz-board-tab:hover{background:var(--accent-soft);color:var(--accent)}
.tz-board-tab.active{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 6px rgba(14,33,86,.15);
}
.tz-board-tab-add,.tz-board-tab-settings{
  padding:7px 10px;color:var(--text-sec);font-size:15px;
}
.tz-board-tab-add:hover,.tz-board-tab-settings:hover{
  color:var(--accent);background:var(--accent-soft);
}
.tz-board-tab-settings svg{vertical-align:middle}
.tz-board-tab-add-full{
  font-size:13px;font-weight:600;padding:7px 14px;
  color:var(--accent);
}
.tz-board-tab-add-full:hover{
  background:var(--accent-soft);
}

/* Filterable select — input-фильтр над <select> для длинных списков */
.fs-wrap{display:flex;flex-direction:column;gap:4px}
.fs-input{
  padding:6px 10px;font-size:12px;
  border:1px solid var(--border-subtle);border-radius:6px;
  background:var(--surface);color:var(--ink);
}
.fs-input::placeholder{color:var(--ink-2)}
.fs-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(95,167,217,.15)}

/* ── Board settings modal ── */
.board-settings-card{max-width:560px;max-height:90vh;overflow-y:auto}
.board-columns-list{display:flex;flex-direction:column;gap:4px}
.board-col-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  background:var(--bg);border-radius:8px;border:1px solid var(--border);
  cursor:grab;transition:background .15s;
}
.board-col-row:hover{background:var(--accent-soft)}
.board-col-row.dragging{opacity:.4}
.board-col-row.drag-over{border-color:var(--accent);background:var(--accent-soft)}
.board-col-drag{cursor:grab;color:var(--disabled);font-size:14px;user-select:none}
.board-col-color{width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:6px;cursor:pointer}
.board-col-name{
  flex:1;border:1px solid transparent;background:transparent;
  padding:4px 8px;font:inherit;font-size:13px;border-radius:6px;
  color:var(--text);transition:border-color .2s;
}
.board-col-name:focus{outline:none;border-color:var(--accent);background:var(--card)}
.board-col-hide-btn,.board-col-del-btn{
  border:none;background:transparent;cursor:pointer;padding:4px;
  font-size:14px;color:var(--text-sec);border-radius:4px;transition:all .2s;
}
.board-col-hide-btn:hover{background:var(--accent-soft);color:var(--accent)}
.board-col-del-btn:hover{background:var(--danger-soft);color:var(--danger)}
.board-add-col-row input[type="text"],.board-add-col-row input:not([type]){
  border:1.5px solid var(--border);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:13px;
}
.board-add-col-row input:not([type]):focus,.board-add-col-row input[type="text"]:focus{
  outline:none;border-color:var(--accent);
}

/* Board responsive */
@media(max-width:600px){
  .tz-board-tabs{gap:2px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tz-board-tab{padding:6px 10px;font-size:12px;flex-shrink:0}
  .board-settings-card{max-width:100%;margin:8px}
  .board-col-row{gap:4px;padding:4px 6px}
  .board-col-name{font-size:12px;padding:3px 6px}
}

/* ── Knowledge Base (Wiki) ── */
.kb-breadcrumbs,.crumbs{
  display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);
}
.kb-crumb,.crumb{
  color:var(--ink-2);text-decoration:none;font-weight:500;
  padding:4px 10px;border-radius:8px;transition:background .12s,color .12s;
  display:inline-flex;align-items:center;gap:5px;
}
.kb-crumb:hover,.crumb:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.kb-crumb-sep,.crumb-sep{color:var(--ink-3);font-size:12px;user-select:none;font-weight:400}
.kb-crumb-current,.crumb-current{
  color:var(--ink);font-weight:600;padding:4px 10px;
  display:inline-flex;align-items:center;gap:5px;
}

.kb-toolbar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kb-section-title{font-size:18px;font-weight:600;color:var(--text);margin:0}
.kb-search-row{margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kb-search-input{
  flex:1;min-width:200px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;
  font:inherit;font-size:14px;color:var(--text);background:var(--card);transition:border-color .2s;
}
.kb-search-input:focus{outline:none;border-color:var(--accent)}
.kb-ask-ai-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:10px 16px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;
  background:linear-gradient(135deg,#a78bfa20 0%,#7dd3fc20 100%);
  color:var(--ink-1);font:inherit;font-size:13.5px;font-weight:500;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.kb-ask-ai-btn:hover{transform:translateY(-1px);box-shadow:var(--elev-1);border-color:var(--accent)}
.kb-ask-ai-icon{font-size:15px;line-height:1}

.kb-empty{color:var(--text-sec);text-align:center;padding:40px 0;font-size:15px}
.kb-empty-state{text-align:center;padding:40px 0}
.kb-empty-state .btn-primary{margin-top:16px}
.kb-gear-btn{
  background:none;border:none;cursor:pointer;color:var(--disabled);padding:4px;
  border-radius:6px;display:inline-flex;align-items:center;transition:all .2s;
  position:relative;
}
.kb-gear-btn:hover{color:var(--accent);background:var(--accent-soft)}
.btn-kb-manage{
  background:var(--accent);color:#fff;border:none;padding:7px 16px;font-size:13px;
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-weight:500;transition:all .2s;
}
.btn-kb-manage:hover{background:var(--primary)}

/* Categories grid */
.kb-categories-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;
}
.kb-category-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:20px 16px;
  cursor:pointer;text-align:center;transition:all .2s;
}
.kb-category-card:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(14,33,86,.08);transform:translateY(-2px)}
.kb-cat-icon{margin-bottom:10px;color:var(--accent)}
.kb-cat-icon svg{width:32px;height:32px}
.kb-cat-name{font-weight:600;font-size:15px;color:var(--text);margin-bottom:4px}
.kb-cat-count{font-size:12px;color:var(--text-sec)}

/* Article list */
.kb-article-list{display:flex;flex-direction:column;gap:10px}
.kb-article-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:16px;
  cursor:pointer;transition:all .2s;position:relative;
}
.kb-article-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(14,33,86,.06)}
.kb-article-card-title{font-weight:600;font-size:15px;color:var(--text);margin-bottom:4px}
.kb-article-card-meta{font-size:12px;color:var(--text-sec)}
.kb-pinned-badge{position:absolute;top:8px;right:12px;font-size:14px}

/* Article reader */
.kb-article-reader{max-width:800px;margin:0 auto}
.kb-article-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}
.kb-article-meta{font-size:13px;color:var(--text-sec);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.kb-article-body{
  line-height:1.7;color:var(--text);font-size:15px;
}
.kb-article-body h1{font-size:22px;margin:24px 0 12px;color:var(--primary)}
.kb-article-body h2{font-size:18px;margin:20px 0 10px;color:var(--primary)}
.kb-article-body h3{font-size:16px;margin:16px 0 8px}
.kb-article-body p{margin:0 0 12px}
.kb-article-body ul,.kb-article-body ol{margin:0 0 12px;padding-left:24px}
.kb-article-body li{margin-bottom:4px}
.kb-article-body img{max-width:100%;height:auto;border-radius:8px;margin:12px 0}
.kb-article-body blockquote{
  border-left:4px solid var(--accent);margin:12px 0;padding:8px 16px;
  background:var(--accent-soft);border-radius:0 8px 8px 0;
}
.kb-article-body pre{
  background:#1a202c;color:#e2e8f0;padding:16px;border-radius:8px;
  overflow-x:auto;margin:12px 0;font-size:13px;
}
.kb-article-body code{
  background:var(--bg-muted);padding:2px 6px;border-radius:4px;font-size:13px;
}
.kb-article-body pre code{background:transparent;padding:0}
.kb-article-body a{color:var(--accent)}
.kb-article-body .ql-align-center{text-align:center}
.kb-article-body .ql-align-right{text-align:right}
.kb-article-body .ql-align-justify{text-align:justify}

/* KB Editor popup */
.kb-editor-popup-card{max-width:900px !important;width:95vw}
.kb-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.kb-pinned-label{
  display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-sec);
  margin-bottom:12px;cursor:pointer;
}
.kb-pinned-label input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;
  border:2px solid var(--border);border-radius:5px;background:var(--card);
  cursor:pointer;position:relative;flex-shrink:0;transition:all .15s;margin:0;
}
.kb-pinned-label input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.kb-pinned-label input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
/* KB group badge on categories */
.kb-cat-group-badge{font-size:10px;color:var(--text-sec);background:var(--bg-muted);padding:2px 8px;border-radius:6px;margin-top:4px}
.kb-cat-group-select{padding:3px 6px;font-size:11px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);max-width:100px}

/* KB Groups manager */
.kb-group-card{border:1.5px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.kb-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kb-group-members{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.kb-group-member-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--bg-muted);border-radius:8px;font-size:13px}
.kb-group-member-rm{background:none;border:none;cursor:pointer;color:var(--danger);font-size:14px;padding:0 2px;line-height:1}
.kb-group-add-member select{width:100%;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:13px;background:var(--card);color:var(--text)}

/* KB document upload */
.kb-doc-upload-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kb-doc-upload-status{font-size:13px;color:var(--ok);font-weight:500}

/* KB Excel tables */
.kb-article-body table{
  width:100%;border-collapse:collapse;margin:12px 0;font-size:14px;
}
.kb-article-body table th,.kb-article-body table td{
  border:1px solid var(--border);padding:8px 10px;text-align:left;
}
.kb-article-body table th{background:var(--bg-soft);font-weight:600;font-size:13px}
.kb-article-body table tr:nth-child(even){background:var(--bg-soft)}
.kb-article-body table tr:hover{background:var(--accent-soft)}

#kbQuillContainer{
  margin-bottom:16px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;
}
#kbQuillEditor{min-height:300px}
#kbQuillContainer .ql-toolbar{border:none;border-bottom:1px solid var(--border);background:var(--bg-soft)}
#kbQuillContainer .ql-container{border:none;font-family:inherit;font-size:15px;max-height:50vh;overflow-y:auto}
#kbQuillContainer .ql-editor table{width:100%;border-collapse:collapse;margin:8px 0}
#kbQuillContainer .ql-editor td,#kbQuillContainer .ql-editor th{border:1px solid var(--border);padding:6px 8px}
#kbQuillContainer .ql-editor img{max-width:100%;height:auto}

/* KB Categories manager */
.kb-categories-manage-list{max-height:300px;overflow-y:auto;margin-bottom:12px}
.kb-cat-manage-item{
  display:flex;align-items:center;gap:10px;padding:10px 8px;
  border-bottom:1px solid var(--border);
}
.kb-cat-manage-icon{color:var(--accent);flex-shrink:0}
.kb-cat-manage-icon svg{width:20px;height:20px}
.kb-cat-manage-name{flex:1;font-weight:500;font-size:14px}
.kb-cat-manage-count{font-size:12px;color:var(--text-sec);background:var(--bg-muted);padding:2px 8px;border-radius:8px}
.kb-cat-drag-handle{cursor:grab;color:var(--text-sec);font-size:16px;user-select:none;flex-shrink:0}
.kb-cat-manage-item[draggable="true"]{cursor:default}
.kb-cat-dragging{opacity:.4;background:var(--accent-light, #ebf5ff)}
.kb-cat-drag-over{border-top:2px solid var(--accent)}
.kb-cat-move-btn{background:none;border:1px solid var(--border);border-radius:4px;padding:2px 6px;cursor:pointer;font-size:12px;color:var(--text-sec);line-height:1}
.kb-cat-move-btn:hover:not(:disabled){background:var(--accent-light, #ebf5ff);color:var(--accent)}
.kb-cat-move-btn:disabled{opacity:.3;cursor:default}
.kb-cat-add-row{display:flex;gap:8px;margin-bottom:12px}
.kb-cat-add-row input{
  flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;
  font:inherit;font-size:14px;
}
.kb-cat-add-row input:focus{outline:none;border-color:var(--accent)}

.btn-sm{padding:6px 14px;font-size:13px;border-radius:8px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .2s;font-weight:600}
.btn-danger-outline-sm{
  background:transparent;border:1.5px solid var(--danger);color:var(--danger);
  padding:6px 14px;font-size:13px;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;
}
.btn-danger-outline-sm:hover{background:var(--danger);color:#fff}

/* ── Global Search ── */
.global-search-wrap{position:relative;display:flex;align-items:center}
.btn-icon{
  background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;
  color:var(--text-sec);transition:all .2s;display:flex;align-items:center;
  flex-shrink:0;z-index:2;
}
.btn-icon:hover{background:rgba(0,0,0,.06);color:var(--text-main)}
.global-search-input{
  width:0;max-width:0;padding:7px 0;border:1.5px solid transparent;border-radius:10px;
  font:inherit;font-size:13px;background:var(--bg-soft);
  transition:width .3s ease,max-width .3s ease,padding .3s ease,border-color .3s ease,opacity .3s ease;
  opacity:0;overflow:hidden;white-space:nowrap;
}
.global-search-input.expanded{
  width:260px;max-width:260px;padding:7px 12px;border-color:var(--accent);
  opacity:1;background:var(--card);outline:none;
}
.global-search-results{
  position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:400px;overflow-y:auto;
  background:var(--card);border:1.5px solid var(--border);border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:100;
}
.gs-section{padding:4px 0}
.gs-section-title{padding:6px 14px;font-size:11px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.5px}
.gs-item{padding:8px 14px;cursor:pointer;font-size:14px;transition:background .15s}
.gs-item:hover{background:var(--accent-soft)}
.gs-code{color:var(--accent);font-weight:600;margin-right:6px}
.gs-empty{padding:16px;text-align:center;color:var(--text-sec);font-size:14px}
@media(max-width:640px){
  .global-search-input.expanded{width:180px;max-width:180px}
  .global-search-results{width:260px}
}

/* ── TZ Templates ── */
.tz-template-row{
  display:flex;align-items:flex-end;gap:8px;margin-bottom:12px;padding:10px 12px;
  background:var(--accent-soft);border-radius:10px;border:1.5px dashed var(--accent);
}
.tz-template-row label{flex:1;margin:0}
.tz-template-row select{
  width:100%;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:14px;
}

/* ── TZ Linked Tasks ── */
.tz-links-section{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.tz-links-section h4{margin:0 0 8px;font-size:14px;color:var(--text-sec)}
.tz-links-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tz-link-chip{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  background:var(--bg-muted);border-radius:8px;font-size:13px;cursor:pointer;
}
.tz-link-chip:hover{background:#dbeafe}
.tz-link-chip-text{cursor:pointer;color:var(--accent)}
.tz-link-remove{
  background:none;border:none;cursor:pointer;color:var(--danger);font-size:16px;
  padding:0 2px;line-height:1;
}
.tz-link-add-select{
  width:100%;max-width:300px;padding:6px 10px;border:1.5px solid var(--border);
  border-radius:8px;font:inherit;font-size:13px;color:var(--text-sec);
}
.tz-links-empty{margin:0 0 8px;font-size:13px;color:var(--disabled)}
.tz-link-add-row{position:relative}
.tz-link-search-results{
  position:absolute;top:100%;left:0;width:100%;max-width:400px;max-height:200px;overflow-y:auto;
  background:var(--card);border:1.5px solid var(--border);border-radius:8px;box-shadow:var(--shadow);z-index:10;
}
.tz-link-search-item{
  padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);
}
.tz-link-search-item:last-child{border-bottom:none}
.tz-link-search-item:hover{background:var(--bg-muted)}
.tz-link-search-empty{padding:8px 12px;font-size:13px;color:var(--disabled)}

/* ── Kanban Swimlanes ── */
.tz-swimlane-select{max-width:160px}
.kanban-swimlane-board{overflow-x:auto}
.kanban-swimlane-header{
  display:flex;position:sticky;top:0;z-index:2;background:var(--card);
}
.kanban-sl-label{
  min-width:120px;max-width:120px;flex-shrink:0;padding:8px;font-weight:600;
  font-size:13px;color:var(--text-sec);display:flex;align-items:center;
}
.kanban-sl-col-header{
  min-width:180px;flex:1;padding:8px 10px;text-align:center;font-size:12px;
  font-weight:600;color:#fff;border-radius:8px 8px 0 0;margin:0 3px;
}
.kanban-swimlane-row{
  display:flex;border-bottom:1px solid var(--border);min-height:80px;
}
.kanban-sl-cell{
  min-width:180px;flex:1;padding:4px;margin:0 3px;background:var(--bg-soft);
  display:flex;flex-direction:column;gap:4px;
}
.kanban-sl-col-count{font-size:10px;opacity:.85;margin-left:4px;font-weight:700}
.kanban-sl-wip-over{outline:2px solid var(--danger);outline-offset:-2px}
.kanban-sl-wip-over .kanban-sl-col-count{color:#fff;background:var(--danger);padding:0 5px;border-radius:6px}
.kanban-card-mini{padding:6px 8px}
.kanban-card-mini .kanban-card-title{font-size:12px;-webkit-line-clamp:1}
.kanban-card-mini .kanban-card-code{font-size:11px}

/* ── Metrics Dashboard ── */
.metrics-summary{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-bottom:20px;
}
.metrics-card{
  padding:20px 16px;background:var(--bg-soft);border-radius:14px;
  text-align:center;border:1.5px solid var(--border);transition:transform .15s;
}
.metrics-card:hover{transform:translateY(-2px)}
.metrics-card-accent{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#93c5fd}
.metrics-card-accent .metrics-num{color:#2563eb}
.metrics-card-success{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#6ee7b7}
.metrics-card-success .metrics-num{color:#059669}
.metrics-num{font-size:32px;font-weight:700;color:var(--accent);line-height:1}
.metrics-num small{font-size:16px;font-weight:500;opacity:.7}
.metrics-label{font-size:12px;color:var(--text-sec);margin-top:6px;font-weight:500}
.metrics-progress-wrap{margin-bottom:20px;padding:16px;background:var(--card);border:1.5px solid var(--border);border-radius:14px}
.metrics-progress-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:500}
.metrics-progress-pct{color:var(--accent);font-weight:700}
.metrics-progress-bar{height:10px;background:var(--bg-muted);border-radius:10px;overflow:hidden}
.metrics-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:10px;transition:width .6s ease}
.metrics-charts{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.metrics-chart-wide{grid-column:1/-1}
.metrics-chart-wrap{
  padding:18px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;
}
.metrics-chart-wrap h4{margin:0 0 12px;font-size:14px;color:var(--text-main);font-weight:600}
.metrics-chart-wrap canvas{max-height:250px}
@media(max-width:700px){
  .metrics-charts{grid-template-columns:1fr}
  .metrics-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:400px){
  .metrics-summary{grid-template-columns:1fr}
}
.metrics-card-danger{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fca5a5}
.metrics-card-danger .metrics-num{color:#dc2626}
.metrics-card-warn{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fcd34d}
.metrics-card-warn .metrics-num{color:#d97706}
.metrics-assignees{padding:18px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;margin-top:16px}
.metrics-assignees h4{margin:0 0 12px;font-size:14px;color:var(--text-main);font-weight:600}
.metrics-section{margin-top:18px;padding:18px;background:var(--card);border:1.5px solid var(--border);border-radius:14px}
.metrics-section > h4{margin:0 0 12px;font-size:14px;color:var(--text-main);font-weight:600}
.metrics-section .metrics-summary{margin-bottom:0}
.metrics-section .metrics-bars{margin-top:0}
.metrics-section .metrics-charts{margin-bottom:0}
.metrics-section .metrics-chart-wrap{padding:14px;border:1px solid var(--border-subtle)}
.metrics-table{width:100%;border-collapse:collapse;font-size:13px}
.metrics-table th{text-align:left;font-size:11px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border-subtle)}
.metrics-table td{padding:10px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.metrics-table tr:last-child td{border-bottom:none}
.metrics-table tr:hover td{background:var(--bg-soft)}
.metrics-bars{display:flex;flex-direction:column;gap:6px}
.metrics-bar-row{display:flex;align-items:center;gap:8px}
.metrics-bar-label{font-size:12px;color:var(--text);min-width:120px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrics-bar-track{flex:1;height:18px;background:var(--bg-soft);border-radius:9px;overflow:hidden}
.metrics-bar-fill{height:100%;background:var(--accent);border-radius:9px;transition:width .3s;min-width:2px}
.metrics-bar-value{font-size:12px;font-weight:700;color:var(--text);min-width:30px}
@media(max-width:600px){
  .metrics-bar-label{min-width:80px;font-size:11px}
}

/* ── Touch-friendly: min tap target 44px ── */
@media(pointer:coarse){
  button{min-height:44px}
  .btn-cancel-slot{min-width:36px;min-height:36px;padding:4px 8px}
  .btn-toggle-admin,.btn-edit-user,.btn-cancel-sm{min-height:36px}
  .tab{min-height:44px}
  .admin-tab{min-height:40px}
  .slot-status.free.clickable{min-height:48px}
  .slot-status.free.clickable::after{opacity:1}
  .link-btn{min-height:56px}
}

/* ── Onboarding ── */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease;
}
.onboarding-overlay.onboarding-visible { opacity: 1; }
.onboarding-card {
  background: var(--card); border-radius: 16px; padding: 28px;
  max-width: 480px; width: 90%; position: relative;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: translateY(20px); transition: transform .3s ease;
}
.onboarding-visible .onboarding-card { transform: translateY(0); }
.onboarding-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 24px;
  cursor: pointer; color: #a0aec0; line-height: 1;
}
.onboarding-close:hover { color: #4a5568; }
.onboarding-title {
  font-size: 22px; font-weight: 700; color: #1a202c; margin: 0 0 4px;
}
.onboarding-subtitle {
  font-size: 14px; color: #718096; margin: 0 0 20px;
}
.onboarding-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.onboarding-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 10px; border-radius: 10px; background: var(--bg-soft);
}
.onboarding-item-icon {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #ebf4ff; border-radius: 8px; color: #3182ce;
}
.onboarding-item-title { font-weight: 600; font-size: 14px; color: #2d3748; }
.onboarding-item-desc { font-size: 13px; color: #718096; margin-top: 2px; }
.onboarding-ok {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: #3182ce; color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.onboarding-ok:hover { background: #2b6cb0; }

/* ── Dark mode (system-dark, только если юзер не выбрал явно "light"/"default") ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #0f1117;
    --card: #1a1d2e;
    --text: #e2e8f0;
    --text-sec: #a0aec0;
    --primary: #1e3a5f;
    --primary-hover: #2a4a7f;
    --accent: #4da3e0;
    --accent-soft: #1a2d42;
    --border: #2d3748;
    --danger: #fc8181;
    --danger-soft: #2d1b1b;
    --ok: #68d391;
    --ok-soft: #1b2d1b;
    --disabled: #4a5568;
    --shadow: 0 2px 12px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    --bg-muted: #2d3748;
    --bg-soft: #1e2233;
    --warn-soft: #2d2a1b;
    --warn: #4a3d1b;
    --info-soft: #2d1f3d;
  }
  html:not([data-theme]) body{background:var(--bg);color:var(--text)}
  html:not([data-theme]) .topbar{background:var(--primary)}
  html:not([data-theme]) .slot-status.free{background:var(--ok-soft);border-color:#2d4a2d;color:var(--ok)}
  html:not([data-theme]) .popup-card,
  html:not([data-theme]) .profile-card,
  html:not([data-theme]) .tz-detail-card{background:var(--card);color:var(--text)}
  html:not([data-theme]) input,
  html:not([data-theme]) select,
  html:not([data-theme]) textarea{background:var(--card);color:var(--text);border-color:var(--border)}
  html:not([data-theme]) .tab{color:var(--text-sec)}
  html:not([data-theme]) .tab.active{color:var(--accent);border-color:var(--accent)}
  html:not([data-theme]) .tab-badge{background:var(--text-sec);color:var(--bg)}
  html:not([data-theme]) .kanban-column{background:var(--card)}
  html:not([data-theme]) .kanban-card{background:var(--bg);border-color:var(--border)}
  html:not([data-theme]) .kanban-col-count{background:rgba(255,255,255,.1);color:var(--text-sec)}
  html:not([data-theme]) .kanban-wip-over{background:var(--danger-soft)!important}
  html:not([data-theme]) .kanban-column.drag-over{background:var(--accent-soft)}
  html:not([data-theme]) .kanban-flag-soon{background:var(--warn-soft);color:#d69e2e;border-color:#4a3d1b}
  html:not([data-theme]) .kanban-flag-notes{background:#3d2a15;color:#fbd38d;border-color:#4a3520}
  html:not([data-theme]) .kanban-dl-soon{background:var(--warn-soft);color:#d69e2e}
  html:not([data-theme]) .kanban-dl-ok{background:var(--ok-soft);color:var(--ok)}
  html:not([data-theme]) .tz-table tr:hover{background:rgba(255,255,255,.03)}
  html:not([data-theme]) .tz-table th{background:var(--card)}
  html:not([data-theme]) .tz-row-overdue td{background:#2d1b1b!important}
  html:not([data-theme]) .tz-row-overdue:hover td{background:#3d2222!important}
  html:not([data-theme]) .tz-row-soon td{background:var(--warn-soft)!important}
  html:not([data-theme]) .tz-row-soon:hover td{background:#3d351f!important}
  html:not([data-theme]) .tz-row-missing-dl td{background:var(--info-soft)!important}
  html:not([data-theme]) .tz-row-missing-dl:hover td{background:#3d2a4d!important}
  html:not([data-theme]) .tz-st-draft{background:var(--bg-muted);color:#a0aec0}
  html:not([data-theme]) .tz-st-review{background:var(--warn);color:#d69e2e}
  html:not([data-theme]) .tz-st-analysis{background:#1a2d42;color:#63b3ed}
  html:not([data-theme]) .tz-st-testing{background:#2d1f3d;color:#b794f4}
  html:not([data-theme]) .tz-st-release{background:#3d2a15;color:#fbd38d}
  html:not([data-theme]) .status-new{background:var(--warn);color:#d69e2e}
  html:not([data-theme]) .tz-prio-low{background:var(--bg-muted);color:#a0aec0}
  html:not([data-theme]) .tz-prio-medium{background:var(--warn);color:#d69e2e}
  html:not([data-theme]) .tz-prio-high{background:#3d2a15;color:#fbd38d}
  html:not([data-theme]) .tz-stat-warn .tz-stat-num{color:#d69e2e}
  html:not([data-theme]) .tz-stat-info .tz-stat-num{color:#b794f4}
  html:not([data-theme]) .tz-stat-info{border-color:#4a3560}
  html:not([data-theme]) .tz-approved-badge{background:#1b2d1b;color:var(--ok);border-color:#2d4a2d}
  html:not([data-theme]) .tz-pending-badge{background:var(--warn);color:#d69e2e;border-color:#4a3d1b}
  html:not([data-theme]) .tz-approved-badge-sm{background:#1b2d1b;color:var(--ok)}
  html:not([data-theme]) .tz-pending-badge-sm{background:var(--warn);color:#d69e2e}
  html:not([data-theme]) .tz-pending-badge-sm-kanban,
  html:not([data-theme]) .tz-pending-badge-sm{background:var(--warn);color:#d69e2e}
  html:not([data-theme]) .btn-danger-outline:hover{background:var(--danger-soft);border-color:var(--danger)}
  html:not([data-theme]) .btn-icon:hover{background:rgba(255,255,255,.08)}
  html:not([data-theme]) .tz-view-btn:hover:not(.active){background:rgba(255,255,255,.1)}
  html:not([data-theme]) .tz-link-chip:hover{background:var(--accent-soft)}
  html:not([data-theme]) .board-col-row.drag-over{background:var(--accent-soft)}
  html:not([data-theme]) .kb-article-body pre{background:#1a1d2e;color:#e2e8f0}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar{background:var(--bg-soft)}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar button{color:var(--text-sec)}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar button:hover{color:var(--accent)}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar .ql-stroke{stroke:var(--text-sec)}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar .ql-fill{fill:var(--text-sec)}
  html:not([data-theme]) #kbQuillContainer .ql-toolbar .ql-picker-label{color:var(--text-sec)}
  html:not([data-theme]) #kbQuillContainer .ql-editor{color:var(--text)}
  html:not([data-theme]) .metrics-card-accent{background:linear-gradient(135deg,#1a2d42,#1e3a5f);border-color:#2a4a7f}
  html:not([data-theme]) .metrics-card-accent .metrics-num{color:#63b3ed}
  html:not([data-theme]) .metrics-card-success{background:linear-gradient(135deg,#1b2d1b,#1b3d2b);border-color:#2d6a3d}
  html:not([data-theme]) .metrics-card-success .metrics-num{color:var(--ok)}
  html:not([data-theme]) .metrics-card-danger{background:linear-gradient(135deg,#2d1b1b,#3d1b1b);border-color:#7f2a2a}
  html:not([data-theme]) .metrics-card-danger .metrics-num{color:#f87171}
  html:not([data-theme]) .metrics-card-warn{background:linear-gradient(135deg,#2d2a1b,#3d351b);border-color:#7f6a2a}
  html:not([data-theme]) .metrics-card-warn .metrics-num{color:#fbbf24}
  html:not([data-theme]) .booking-reminder{background:linear-gradient(90deg,#2d1f0f,#3d2a15);color:#fbd38d;border-color:#4a3520}
  html:not([data-theme]) .onboarding-overlay{background:rgba(0,0,0,.7)}
  html:not([data-theme]) .onboarding-card{background:var(--card);color:var(--text)}
  html:not([data-theme]) .onboarding-title{color:var(--text)}
  html:not([data-theme]) .onboarding-subtitle{color:var(--text-sec)}
  html:not([data-theme]) .onboarding-item{background:var(--bg-soft)}
  html:not([data-theme]) .onboarding-item-icon{background:var(--accent-soft);color:var(--accent)}
  html:not([data-theme]) .onboarding-item-title{color:var(--text)}
  html:not([data-theme]) .onboarding-item-desc{color:var(--text-sec)}
  html:not([data-theme]) .onboarding-ok{background:var(--accent)}
  html:not([data-theme]) .onboarding-ok:hover{background:var(--primary-hover)}
  html:not([data-theme]) .onboarding-close{color:var(--text-sec)}
  html:not([data-theme]) .onboarding-close:hover{color:var(--text)}
  html:not([data-theme]) img{filter:brightness(.95)}
  html:not([data-theme]) .badge-dev,
  html:not([data-theme]) .status-new{color:#d69e2e}
  html:not([data-theme]) .notif-panel{background:var(--card);border-color:var(--border)}
  html:not([data-theme]) .notif-alert-danger{background:rgba(220,38,38,.15);color:#fca5a5}
  html:not([data-theme]) .notif-alert-warn{background:rgba(217,119,6,.15);color:#fcd34d}
  html:not([data-theme]) .notif-panel-header{border-color:var(--border)}
  html:not([data-theme]) .notif-item{border-color:var(--border)}
  html:not([data-theme]) .notif-item:hover{background:var(--bg-soft)}
  html:not([data-theme]) .notif-item.unread{background:rgba(17,114,182,.15)}
  html:not([data-theme]) .notif-item-title{color:var(--text)}
  html:not([data-theme]) .notif-item-body{color:var(--text-sec)}
}

/* ── Notifications ── */
.notif-bell{position:relative;background:none;border:none;cursor:pointer;padding:6px;margin-right:4px;transition:color .2s;border-radius:8px}
.notif-bell svg{color:rgba(255,255,255,.7)}
.notif-bell:hover svg{color:#fff}
.notif-bell:hover{background:rgba(255,255,255,.1)}
.notif-badge{position:absolute;top:0;right:-2px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-badge:empty{display:none}
.notif-panel{position:fixed;top:56px;right:12px;width:min(420px,calc(100vw - 24px));max-height:75vh;background:var(--card);border:1.5px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:400;overflow:hidden;display:flex;flex-direction:column}
.notif-panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1.5px solid var(--border)}
.notif-panel-header h3{margin:0;font-size:15px;font-weight:700}
.notif-list{overflow-y:auto;max-height:calc(70vh - 50px);padding:4px 0}
.notif-item{display:grid;grid-template-columns:36px 1fr 28px;gap:10px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;position:relative}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg-soft)}
.notif-item.unread{background:var(--accent-soft);border-left:3px solid var(--accent);padding-left:11px}
.notif-item-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:17px;background:var(--bg-soft);color:var(--text);flex-shrink:0}
.notif-item.notif-type-mint .notif-item-icon{background:var(--mint-soft);color:#1f6e48}
.notif-item.notif-type-lavender .notif-item-icon{background:var(--lavender-soft);color:#553f9c}
.notif-item.notif-type-coral .notif-item-icon{background:var(--coral-soft);color:#a44830}
.notif-item.notif-type-apricot .notif-item-icon{background:var(--apricot-soft);color:#8a5e0a}
.notif-item.notif-type-sky .notif-item-icon{background:var(--sky-soft);color:#1f5a8a}
.notif-item.notif-type-rose .notif-item-icon{background:var(--rose-soft);color:#a13a5e}
.notif-item-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-item-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:1px}
.notif-item-chip{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:var(--bg-soft);color:var(--text-sec)}
.notif-chip-mint{background:var(--mint-soft);color:#1f6e48}
.notif-chip-lavender{background:var(--lavender-soft);color:#553f9c}
.notif-chip-coral{background:var(--coral-soft);color:#a44830}
.notif-chip-apricot{background:var(--apricot-soft);color:#8a5e0a}
.notif-chip-sky{background:var(--sky-soft);color:#1f5a8a}
.notif-chip-rose{background:var(--rose-soft);color:#a13a5e}
.notif-item-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;word-break:break-word}
.notif-item-body{font-size:12px;color:var(--text-sec);margin-top:2px;line-height:1.4;word-break:break-word}
.notif-item-time{font-size:11px;color:var(--disabled);white-space:nowrap}
.notif-item-controls{display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .15s;align-self:start}
.notif-item:hover .notif-item-controls{opacity:1}
@media (hover:none){.notif-item-controls{opacity:.7}}
.notif-item-dismiss,.notif-item-snooze{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--disabled);font-size:14px;line-height:1;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;padding:0}
.notif-item-dismiss{font-size:18px}
.notif-item-dismiss:hover,.notif-item-snooze:hover{background:var(--bg-soft);color:var(--text)}

/* Snooze popover */
.notif-snooze-popover{position:fixed;z-index:600;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;display:flex;flex-direction:column;gap:2px;min-width:120px}
.notif-snooze-popover button{padding:8px 12px;font-size:12px;background:transparent;border:none;border-radius:6px;text-align:left;cursor:pointer;color:var(--text);transition:background .12s}
.notif-snooze-popover button:hover{background:var(--bg-soft)}

.notif-panel-actions{display:flex;gap:2px;align-items:center}
/* Иконочные кнопки в шапке колокольчика — компактные, без лишних слов */
.notif-icon-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text-sec);cursor:pointer;transition:all .12s;padding:0}
.notif-icon-btn:hover{background:var(--bg-soft);color:var(--text)}
.notif-icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.notif-icon-btn svg{display:block}

/* Tabs внутри dropdown'а колокольчика */
.notif-tabs{display:flex;gap:2px;padding:6px 14px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.notif-tabs::-webkit-scrollbar{display:none}
.notif-tab{padding:6px 12px;font-size:12px;font-weight:500;background:transparent;border:none;border-radius:6px;color:var(--text-sec);cursor:pointer;white-space:nowrap;transition:all .12s}
.notif-tab:hover{background:var(--bg-soft);color:var(--text)}
.notif-tab.active{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* «Показать ещё» */
.notif-load-more{width:100%;padding:10px;font-size:12px;font-weight:500;background:transparent;border:none;border-top:1px solid var(--border);color:var(--text-sec);cursor:pointer;transition:background .15s}
.notif-load-more:hover{background:var(--bg-soft);color:var(--text)}

/* Badge ×N для сгруппированных дубликатов */
.notif-item-count{display:inline-block;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:700;background:var(--bg-soft);color:var(--text-sec);border-radius:8px;vertical-align:middle}
.notif-item.unread .notif-item-count{background:var(--accent);color:#fff}

/* Urgent — упоминания / прямые назначения */
.notif-item.urgent{border-left:3px solid #f59e0b;padding-left:11px}
.notif-item.urgent.unread{border-left-color:#dc2626;background:linear-gradient(90deg,rgba(220,38,38,.08),var(--accent-soft) 30%)}
.notif-item.urgent .notif-item-title::before{content:'⚡ ';font-size:11px;color:#dc2626}

/* Quick-actions кнопки внизу notif-item */
.notif-item-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.notif-action-btn{padding:4px 10px;font-size:11px;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:filter .12s,opacity .12s}
.notif-action-btn:hover{filter:brightness(1.1)}
.notif-action-btn:disabled,.notif-action-btn.busy{opacity:.5;cursor:wait}
.notif-empty{text-align:center;color:var(--disabled);padding:32px;font-size:13px}

/* Alerts inside notification panel — admin overview (overdue/SLA/...) */
.notif-alerts{padding:8px 8px 0}
.notif-alerts.hidden{display:none}
.notif-alert{display:grid;grid-template-columns:32px 1fr 24px;gap:10px;align-items:center;padding:10px 12px;margin-bottom:6px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .12s,filter .12s,box-shadow .12s;position:relative}
.notif-alert:last-child{margin-bottom:0}
.notif-alert:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(0,0,0,.12)}
.notif-alert-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px;flex-shrink:0}
.notif-alert-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.notif-alert-label{font-size:13px;font-weight:700;line-height:1.2}
.notif-alert-count{font-size:11px;opacity:.85;line-height:1.3}
.notif-alert-dismiss{width:22px;height:22px;border:none;background:transparent;color:inherit;opacity:.5;cursor:pointer;font-size:18px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.notif-alert-dismiss:hover{background:rgba(0,0,0,.08);opacity:1}
.notif-alert-danger{background:linear-gradient(135deg,#fef2f2,#fff5f5);color:#991b1b;border-color:#fecaca}
.notif-alert-danger .notif-alert-icon{background:#fecaca;color:#991b1b}
.notif-alert-warn{background:linear-gradient(135deg,#fffbeb,#fef9e7);color:#92400e;border-color:#fde68a}
.notif-alert-warn .notif-alert-icon{background:#fde68a;color:#92400e}

/* Bell animation when alerts present */
.notif-bell.has-alerts svg{color:#fbbf24;animation:bellPulse 2s ease-in-out infinite}
@keyframes bellPulse{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(12deg)}
  20%{transform:rotate(-10deg)}
  30%{transform:rotate(6deg)}
  40%{transform:rotate(-4deg)}
  50%,100%{transform:rotate(0)}
}
.notif-bell.has-alerts .notif-badge{background:#dc2626}

@media(max-width:600px){.notif-panel{width:calc(100vw - 24px);right:12px;left:12px}}
/* На мобильных — bottom-sheet снизу. Удобнее тянуться большим пальцем,
   не перекрывает контент сверху. */
@media(max-width:480px){
  .notif-panel{
    top:auto;bottom:0;left:0;right:0;width:100vw;
    border-radius:16px 16px 0 0;
    max-height:80vh;
    border-left:none;border-right:none;border-bottom:none;
  }
  .notif-panel-header{position:relative}
  .notif-panel-header::before{
    content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;background:var(--border);border-radius:2px;
  }
  .notif-panel-header{padding-top:18px}
}

/* ── UI Settings (tab/widget customization) ── */
.tab-settings-btn{
  background:none;border:none;cursor:pointer;padding:6px;margin-left:auto;
  color:var(--text-sec);border-radius:8px;transition:all .2s;flex-shrink:0;
  display:flex;align-items:center;
}
.tab-settings-btn:hover{background:var(--accent-soft);color:var(--accent)}

.ui-settings-section{margin-bottom:20px}
.ui-settings-section h4{
  margin:0 0 6px;font-size:13px;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:.04em;
}

.ui-tabs-list{display:flex;flex-direction:column;gap:4px}
.ui-tab-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--card);border:1.5px solid var(--border);border-radius:10px;
  cursor:grab;transition:border-color .15s,box-shadow .15s;user-select:none;
}
.ui-tab-row:active{cursor:grabbing}
.ui-tab-row.dragging{opacity:.5;border-color:var(--accent);box-shadow:0 4px 16px rgba(17,114,182,.15)}
.ui-tab-row.drag-over{border-color:var(--accent);background:var(--accent-soft)}
.ui-tab-drag{color:var(--disabled);flex-shrink:0;cursor:grab;display:flex}
.ui-tab-name{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.ui-tab-toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.ui-tab-toggle input{opacity:0;width:0;height:0;position:absolute}
.ui-tab-toggle .toggle-slider{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--border);border-radius:10px;cursor:pointer;
  transition:background .2s;
}
.ui-tab-toggle .toggle-slider::before{
  content:'';position:absolute;width:16px;height:16px;
  left:2px;bottom:2px;background:#fff;border-radius:50%;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ui-tab-toggle input:checked + .toggle-slider{background:var(--accent)}
.ui-tab-toggle input:checked + .toggle-slider::before{transform:translateX(16px)}

.toggle-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--card);border:1.5px solid var(--border);border-radius:10px;
  cursor:pointer;font-size:14px;
}
.toggle-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}

.notify-prefs-grid{display:flex;flex-direction:column;gap:6px}
.notify-pref-row{
  display:grid;grid-template-columns:1fr 70px 70px;align-items:center;gap:8px;
  padding:8px 12px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;
  font-size:13.5px;
}
.notify-pref-label{color:var(--ink)}
.notify-pref-cell{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:14px}
.notify-pref-cell input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.ui-widgets-list{display:flex;flex-direction:column;gap:4px}
.ui-widget-row{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--card);border:1.5px solid var(--border);border-radius:10px;
}
.ui-widget-name{flex:1;font-size:13px;color:var(--text)}
.ui-widget-section{font-size:11px;color:var(--text-sec);font-weight:600}

/* ── Tags ── */
.tz-tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin:0 2px;white-space:nowrap;font-weight:500}
.kanban-tag{display:inline-block;font-size:9px;padding:0 5px;border-radius:6px;background:var(--accent-soft);color:var(--accent);line-height:16px}
.kanban-tags-row{display:flex;flex-wrap:wrap;gap:3px}

/* ── Estimate badge ── */
.tz-estimate{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;background:var(--bg-muted);color:var(--text-sec);margin-left:4px}
.kanban-estimate{font-size:9px;font-weight:700;padding:0 4px;border-radius:4px;background:var(--bg-muted);color:var(--text-sec);margin-left:4px}

/* ── WIP exceeded column ── */
.kanban-column.wip-exceeded{border-color:var(--danger)}
.kanban-col-header .wip-warning{color:var(--danger);font-size:11px}

/* ── KB History ── */
.kb-history-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:350;display:flex;align-items:center;justify-content:center;padding:20px}
.kb-history-panel{background:var(--card);border-radius:14px;padding:20px;width:100%;max-width:500px;box-shadow:var(--shadow-lg)}
.kb-history-panel h3{margin:0 0 12px;font-size:16px}
.kb-history-list{max-height:400px;overflow-y:auto}
.kb-history-item{padding:10px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-history-date{font-size:13px;font-weight:600;min-width:140px}
.kb-history-author{font-size:12px;color:var(--text-sec);flex:1}
.kb-history-actions{display:flex;gap:4px}

/* ── Mention autocomplete ── */
.mention-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--card);border:1.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:210;max-height:200px;overflow-y:auto;margin-bottom:4px}
.mention-option{padding:8px 12px;font-size:13px;cursor:pointer;transition:background .1s}
.mention-option:hover{background:var(--accent-soft)}

/* ── My Tasks ── */
.tasks-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tasks-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tasks-filters select,.tasks-filters input{
  font-size:13px;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);transition:border-color .2s;
}
.tasks-filters select:focus,.tasks-filters input:focus{border-color:var(--accent);outline:none}
.task-board{display:flex;gap:14px;overflow-x:auto;padding:4px 0;min-height:300px}
.task-column{min-width:250px;flex:1;background:var(--bg-soft);border-radius:14px;padding:12px}
.task-column-header{
  font-size:11px;font-weight:700;color:var(--text-sec);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px;display:flex;justify-content:space-between;
  align-items:center;padding-bottom:8px;border-bottom:1.5px solid var(--border);
}
.task-column-count{
  font-size:11px;font-weight:600;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:2px 8px;color:var(--text-sec);
}
.task-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.task-card:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(17,114,182,.08);transform:translateY(-1px)}
.task-card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.4}
.task-card-meta{font-size:11px;color:var(--text-sec);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.task-card-prio{width:4px;border-radius:2px;position:absolute;left:0;top:0;bottom:0}
.task-card{position:relative;padding-left:14px}
.task-prio-high .task-card-prio{background:#ed8936}
.task-prio-low .task-card-prio{background:#48bb78}
.task-prio-medium .task-card-prio{background:#4299e1}
.task-type-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.02em}
.task-type-task{background:var(--accent-soft);color:var(--accent)}
.task-type-bug{background:var(--danger-soft, #fed7d7);color:var(--danger)}
.task-type-proposal{background:#fefcbf;color:#975a16}
.task-proposal-badge{font-size:10px;padding:2px 7px;border-radius:8px;font-weight:600}
.task-proposal-pending{background:#fefcbf;color:#975a16}
.task-proposal-approved{background:var(--ok-soft);color:var(--ok)}
.task-proposal-rejected{background:var(--danger-soft, #fed7d7);color:var(--danger)}
.task-due-overdue{color:var(--danger);font-weight:600}
.task-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px}
.task-popup{
  background:var(--card);border-radius:16px;padding:28px;width:100%;max-width:500px;
  box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;
}
.task-popup h3{margin:0 0 18px;font-size:17px;font-weight:700}
.task-popup label{display:block;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--text-sec)}
.task-popup input,.task-popup select,.task-popup textarea{
  width:100%;margin-top:4px;font:inherit;font-size:13px;padding:8px 12px;
  border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);
  transition:border-color .2s;
}
.task-popup input:focus,.task-popup select:focus,.task-popup textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(17,114,182,.1);
}
.task-popup textarea{resize:vertical;min-height:70px}
.task-popup-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
.tz-link-suggest{margin-top:4px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);max-height:160px;overflow-y:auto;box-shadow:var(--elev-2)}
@media (max-height:600px){
  .tz-link-suggest{max-height:120px}
}
.tz-link-suggest-item{padding:8px 12px;font-size:13px;cursor:pointer;font-weight:500;color:var(--text)}
.tz-link-suggest-item:hover{background:var(--mint-soft)}
.tz-link-suggest-item b{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--accent);margin-right:6px}
@media(max-width:600px){.task-board{flex-direction:column}.task-column{min-width:auto}}

/* (global alerts moved into notification bell panel) */

/* ── Service Desk (Helpdesk) ── */

/* Alert bar (persistent, not toast) */
.hd-alert-bar{
  background:linear-gradient(135deg,#fef2f2,#fff5f5);
  border:1.5px solid #fca5a5;border-radius:12px;
  padding:12px 18px;margin-bottom:14px;
}
.hd-alert-bar.hidden{display:none}
.hd-alert-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600}
.hd-alert-content svg{color:#ef4444;flex-shrink:0}
.hd-alert-critical{color:#dc2626}
.hd-alert-warn{color:#d97706}
.hd-alert-info{color:#2563eb}
.hd-alert-sep{color:var(--border);margin:0 2px}

/* Stats bar (mini cards) */
.hd-stats-bar{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;
}
.hd-stat-mini{
  flex:1;min-width:100px;background:var(--card);border:1.5px solid var(--border);
  border-radius:12px;padding:12px 16px;text-align:center;
  transition:border-color .15s,box-shadow .15s;
}
.hd-stat-mini:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(17,114,182,.06)}
.hd-stat-mini-num{font-size:22px;font-weight:800;color:var(--text);line-height:1.2}
.hd-stat-mini div:last-child{font-size:11px;color:var(--text-sec);font-weight:600;margin-top:2px}
.hd-num-new{color:#3b82f6}
.hd-num-breach{color:#ef4444}
.hd-num-unassigned{color:#d97706}
.hd-num-my{color:#8b5cf6}

/* Empty states */
.hd-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;gap:12px;text-align:center;
}
.hd-empty svg{opacity:.4}
.hd-empty p{font-size:15px;color:var(--text-sec);margin:0}

/* SLA countdown in ticket row */
.hd-sla-countdown{font-size:10px;font-weight:600;color:#d97706}
.hd-sla-over{color:#ef4444}
.hd-no-assignee{color:var(--text-sec);font-style:italic;font-size:12px}

.hd-toolbar{margin-bottom:16px}
.hd-tabs{display:flex;gap:6px;flex-wrap:wrap}
.hd-tab-btn{
  font:inherit;font-size:13px;font-weight:600;padding:8px 16px;
  border:1.5px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--text-sec);cursor:pointer;
  transition:all .15s;
}
.hd-tab-btn:hover{border-color:var(--accent);color:var(--accent)}
.hd-tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.hd-tab-create{background:#10b981;color:#fff;border-color:#10b981;font-weight:700;font-size:14px;padding:10px 22px}
.hd-tab-create:hover{background:#059669;border-color:#059669;color:#fff}
.hd-tab-create.active{background:#059669;border-color:#059669}

.hd-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.hd-filters select{
  font-size:13px;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);transition:border-color .2s;
}
.hd-filters select:focus{border-color:var(--accent);outline:none}

.hd-ticket-list{display:flex;flex-direction:column;gap:2px}
.hd-ticket-header{
  display:grid;grid-template-columns:60px 1fr 90px 90px 140px 140px 80px;
  gap:8px;padding:8px 12px;font-size:11px;font-weight:700;color:var(--text-sec);
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1.5px solid var(--border);
}
.hd-ticket-row{
  display:grid;grid-template-columns:60px 1fr 90px 90px 140px 140px 80px;
  gap:8px;padding:10px 12px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;font-size:13px;
}
.hd-ticket-row:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(17,114,182,.08)}
.hd-ticket-row.sla-breached{border-left:3px solid var(--danger)}
.hd-ticket-num{font-weight:700;color:var(--accent)}
.hd-ticket-subject{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-ticket-queue,.hd-ticket-assignee{font-size:12px;color:var(--text-sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-ticket-date{font-size:12px;color:var(--text-sec)}

.hd-badge{
  display:inline-block;font-size:11px;font-weight:700;color:#fff;
  padding:3px 10px;border-radius:20px;text-align:center;white-space:nowrap;
}

/* Detail */
.hd-detail{max-width:900px}
.hd-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hd-detail-header h3{margin:0;font-size:18px}
.hd-detail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;font-size:13px}
.hd-detail-meta span{color:var(--text-sec)}
.hd-detail-body{background:var(--bg-soft);border-radius:12px;padding:18px;margin-bottom:18px}
.hd-detail-body h4{margin:0 0 8px;font-size:15px}
.hd-detail-body p{margin:0;font-size:14px;line-height:1.6;color:var(--text)}
.hd-sla-warn{color:#fff;background:var(--danger);padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700}
.hd-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.hd-status-select{font:inherit;font-size:13px;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;background:var(--card)}

/* Comments */
.hd-comments{margin-bottom:18px}
.hd-comments h4{margin:0 0 12px;font-size:14px;font-weight:700}
.hd-comment{background:var(--bg-soft);border-radius:10px;padding:12px;margin-bottom:8px;border-left:3px solid var(--border)}
.hd-comment.hd-comment-my{border-left-color:var(--accent);background:var(--accent-soft, #e6f0fa)}
.hd-comment-head{font-size:12px;color:var(--text-sec);margin-bottom:4px;display:flex;justify-content:space-between}
.hd-comment-head b{color:var(--text)}
.hd-comment-text{font-size:13px;line-height:1.5;color:var(--text)}
.hd-comment-form{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.hd-comment-form textarea{
  flex:1;font:inherit;font-size:13px;padding:8px 12px;
  border:1.5px solid var(--border);border-radius:10px;background:var(--card);
  color:var(--text);resize:vertical;min-height:50px;transition:border-color .2s;
}
.hd-comment-form textarea:focus{border-color:var(--accent);outline:none}

/* History */
.hd-history{margin-bottom:12px}
.hd-history summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-sec);padding:8px 0}
.hd-history-list{font-size:12px;color:var(--text-sec);padding:8px 0}
.hd-history-item{padding:4px 0;border-bottom:1px solid var(--border)}

/* Admin queues */
.hd-queue-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:12px;transition:box-shadow .15s;
}
.hd-queue-card:hover{box-shadow:0 3px 12px rgba(17,114,182,.06)}
.hd-queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.hd-queue-header h4{margin:0;font-size:15px}
.hd-queue-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-sec);margin-top:8px}
.hd-agents-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;padding:4px 0}

/* Reports */
.hd-report-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.hd-stat-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;
  padding:16px;text-align:center;
}
.hd-stat-num{font-size:28px;font-weight:800;color:var(--text);margin-bottom:4px}
.hd-stat-card div:last-child{font-size:12px;color:var(--text-sec);font-weight:600}
.hd-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hd-report-section{
  background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:16px;
}
.hd-report-section h4{margin:0 0 10px;font-size:14px;font-weight:700}
.hd-report-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.hd-report-row:last-child{border-bottom:none}

/* Create form */
.hd-create-step{max-width:700px}
.hd-create-step h3{margin:0 0 16px;font-size:17px;font-weight:700}

.hd-queue-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hd-queue-pick{
  background:var(--card);border:2px solid var(--border);border-radius:14px;
  cursor:pointer;overflow:hidden;transition:all .15s;display:flex;
}
.hd-queue-pick:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(17,114,182,.1);transform:translateY(-2px)}
.hd-queue-pick-color{width:6px;flex-shrink:0}
.hd-queue-pick-body{padding:16px;flex:1}
.hd-queue-pick-body b{font-size:15px;display:block;margin-bottom:4px}
.hd-queue-pick-body p{margin:0;font-size:13px;color:var(--text-sec);line-height:1.4}
.hd-queue-pick-cats{font-size:11px;color:var(--text-sec);margin-top:8px;display:block}

.hd-create-form{display:flex;flex-direction:column;gap:18px}
.hd-form-group{display:flex;flex-direction:column;gap:6px}
.hd-form-label{font-size:13px;font-weight:700;color:var(--text)}
.hd-required{color:var(--danger)}
.hd-hint{font-size:12px;color:var(--text-sec)}
.hd-form-row{display:flex;gap:14px;flex-wrap:wrap}

.hd-input{
  font:inherit;font-size:14px;padding:10px 14px;
  border:1.5px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--text);transition:border-color .2s,box-shadow .2s;
  width:100%;box-sizing:border-box;
}
.hd-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(17,114,182,.1)}
textarea.hd-input{resize:vertical;min-height:100px;line-height:1.5}

.hd-cat-btns{display:flex;flex-wrap:wrap;gap:8px}
.hd-cat-btn{
  font:inherit;font-size:13px;padding:8px 16px;
  border:1.5px solid var(--border);border-radius:20px;
  background:var(--card);color:var(--text);cursor:pointer;transition:all .15s;
}
.hd-cat-btn:hover{border-color:var(--accent);color:var(--accent)}
.hd-cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.hd-prio-btns{display:flex;flex-wrap:wrap;gap:8px}
.hd-prio-btn{
  font:inherit;font-size:13px;padding:8px 14px;
  border:1.5px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--text);cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.hd-prio-btn:hover{border-color:var(--accent)}
.hd-prio-btn.active{border-color:var(--accent);background:var(--accent-soft, #e6f0fa);font-weight:600}
.hd-prio-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Тип обращения (Заявка/Пожелание/Предложение) */
.hd-type-btns{display:flex;flex-wrap:wrap;gap:8px}
.hd-type-btn{
  font:inherit;font-size:13px;padding:8px 14px;
  border:1.5px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--text);cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;
}
.hd-type-btn:hover{border-color:var(--accent)}
.hd-type-btn.active{border-color:var(--accent);background:var(--accent-soft, #e6f0fa);font-weight:600}
.hd-type-ico{font-size:15px;line-height:1}

/* Список выбранных файлов в форме + вложения в карточке */
.hd-files-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hd-file-chip{font-size:12px;padding:4px 10px;border-radius:8px;background:var(--bg-soft, #f1f5f9);color:var(--text);display:inline-flex;align-items:center;gap:6px}
.hd-file-size{color:var(--text-sec);font-size:11px}
.hd-attachments{margin-top:18px}
.hd-attachments h4{margin:0 0 10px}
.hd-att-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hd-att-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.hd-att-link{color:var(--accent);text-decoration:none;cursor:pointer;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-att-link:hover{text-decoration:underline}
.hd-att-size{color:var(--text-sec);font-size:12px;flex-shrink:0}
.hd-att-del{border:none;background:transparent;color:var(--danger);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;flex-shrink:0}
.hd-att-del:hover{opacity:.7}
.hd-att-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hd-ticket-type{font-size:14px;flex-shrink:0}
.hd-ticket-att{font-size:11px;color:var(--text-sec);margin-left:6px}

/* Папки во вкладке «Процессы» */
.bpmn-folder-grid:empty{display:none}
.bpmn-folder-grid:not(:empty){margin:0 0 16px}

.hd-submit-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;font-size:15px;font-weight:700;border-radius:12px;
  margin-top:8px;
}

/* Tablet */
@media(max-width:768px){
  .hd-ticket-header{display:none}
  .hd-ticket-row{
    grid-template-columns:1fr;gap:4px;padding:12px 14px;
    border-left-width:4px !important;position:relative;
  }
  .hd-ticket-num{font-size:12px}
  .hd-ticket-subject{white-space:normal;font-size:14px}
  .hd-ticket-queue{font-size:11px;display:inline}
  .hd-ticket-assignee{font-size:11px;display:inline}
  .hd-ticket-date{font-size:11px;display:inline}
  .hd-ticket-row .hd-badge{font-size:10px;padding:2px 8px}
  .hd-report-grid{grid-template-columns:1fr}
  .hd-report-cards{grid-template-columns:repeat(2,1fr)}
  .hd-queue-cards{grid-template-columns:1fr}
  .hd-prio-btns{flex-direction:column}
  .hd-stats-bar{gap:6px}
  .hd-stat-mini{min-width:70px;padding:8px 10px}
  .hd-stat-mini-num{font-size:18px}
  .hd-detail-meta{flex-direction:column;gap:6px}
  .hd-actions{flex-direction:column}
  .hd-actions select,.hd-actions button{width:100%}
  .hd-comment-form{flex-direction:column}
  .hd-comment-form button{width:100%}
  .hd-filters{flex-direction:column}
  .hd-filters select{width:100%}
  .hd-tabs{gap:4px}
  .hd-tab-btn{padding:6px 10px;font-size:12px}
  .hd-tab-create{padding:8px 14px;font-size:13px}
}

/* Mobile */
@media(max-width:480px){
  /* Cards view for tickets */
  .hd-ticket-list{gap:8px}
  .hd-ticket-row{
    display:flex;flex-direction:column;gap:6px;
    padding:14px 14px 14px 18px;border-radius:12px;
    border:1.5px solid var(--border);
    border-left-width:4px !important;
    box-shadow:0 1px 4px rgba(14,33,86,.04);
  }
  .hd-ticket-row .hd-ticket-num{order:-1}
  .hd-ticket-row .hd-ticket-subject{font-size:14px;font-weight:600;white-space:normal;line-height:1.4}
  .hd-ticket-row .hd-badge{align-self:flex-start}
  .hd-ticket-queue,.hd-ticket-assignee,.hd-ticket-date{display:block;font-size:12px;color:var(--text-sec)}

  /* Stats bar: 2-column grid */
  .hd-stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .hd-stat-mini{min-width:0;padding:10px 8px;border-radius:10px}
  .hd-stat-mini-num{font-size:20px}
  .hd-stat-mini div:last-child{font-size:10px}

  /* Toolbar */
  .hd-tabs{gap:3px;flex-wrap:wrap}
  .hd-tab-btn{padding:6px 8px;font-size:11px;border-radius:8px;flex:1;text-align:center;min-width:0}
  .hd-tab-create{font-size:12px;padding:8px 10px;flex:1}

  /* Alert bar */
  .hd-alert-bar{padding:10px 12px;border-radius:10px;margin-bottom:10px}

  /* Create form */
  .hd-create-step{max-width:100%}
  .hd-queue-pick-body{padding:12px}
  .hd-queue-pick-body b{font-size:14px}
  .hd-input{font-size:16px;padding:12px 14px}
  textarea.hd-input{min-height:80px}
  .hd-cat-btns{gap:6px}
  .hd-cat-btn{padding:8px 12px;font-size:12px}
  .hd-submit-btn{font-size:14px;padding:12px 18px}
  .hd-form-row{flex-direction:column}

  /* Detail */
  .hd-detail-header{flex-direction:column;gap:8px;align-items:flex-start}
  .hd-detail-header h3{font-size:16px}
  .hd-detail-body{padding:14px;border-radius:10px}
  .hd-detail-body h4{font-size:14px}
  .hd-detail-body p{font-size:13px}
  .hd-comment{padding:10px;border-radius:8px}
  .hd-comment-form textarea{min-height:60px;font-size:16px}

  /* Reports */
  .hd-report-cards{grid-template-columns:1fr 1fr;gap:6px}
  .hd-stat-card{padding:12px}
  .hd-stat-num{font-size:22px}
  .hd-report-section{padding:12px}
  .hd-report-row{flex-direction:column;gap:2px;align-items:flex-start}

  /* Admin queues */
  .hd-queue-card{padding:12px}
  .hd-queue-header{flex-direction:column;gap:8px;align-items:flex-start}
  .hd-queue-header div{display:flex;gap:6px;width:100%}
  .hd-queue-header div button{flex:1}
  .hd-queue-meta{flex-direction:column;gap:4px}
  .hd-agents-list{max-height:150px}

  /* Empty state */
  .hd-empty{padding:32px 16px}
  .hd-empty svg{width:40px;height:40px}
  .hd-empty p{font-size:14px}
}

/* ══════ Theme variants ══════ */

/* ────── Theme: Notion (светлый topbar, чистая типографика) ────── */
[data-theme="notion"]{
  --bg: #f7f7f5;--card: #ffffff;--text: #37352f;--text-sec: #787774;
  --primary: #37352f;--primary-hover: #1a1a1a;--accent: #2383e2;--accent-soft: #e8f0fe;
  --border: #e5e5e3;--danger: #eb5757;--danger-soft: #fef2f2;--ok: #0f7b6c;--ok-soft: #ecfdf5;
  --disabled: #9ca3af;--shadow: 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
  --bg-muted: #f0f0ee;--bg-soft: #fafaf8;--warn-soft: #fefce8;--warn: #fef3c7;--info-soft: #f5f3ff;
}
/* Notion: светлый topbar */
[data-theme="notion"] .topbar{
  background:var(--card);color:var(--text);
  box-shadow:none;border-bottom:1px solid var(--border);
}
[data-theme="notion"] .topbar h1{color:var(--text);font-weight:600;letter-spacing:-.02em}
[data-theme="notion"] .topbar .subtitle{color:var(--text-sec)}
[data-theme="notion"] .topbar-icon{color:var(--text-sec)}
[data-theme="notion"] .topbar-user:hover{background:var(--bg-muted)}
[data-theme="notion"] .avatar-sm{border-color:var(--border)}
/* Notion: кнопки topbar */
[data-theme="notion"] .btn-accent{
  background:transparent;color:var(--text-sec);
  border:none;font-weight:500;
}
[data-theme="notion"] .btn-accent:hover{background:var(--bg-muted);color:var(--text);border:none}
[data-theme="notion"] .btn-outline{
  background:transparent;color:var(--text-sec);
  border:none;font-weight:500;
}
[data-theme="notion"] .btn-outline:hover{background:var(--bg-muted);color:var(--text)}
/* Notion: колокольчик */
[data-theme="notion"] .notif-bell svg{color:var(--text-sec)}
[data-theme="notion"] .notif-bell:hover svg{color:var(--text)}
[data-theme="notion"] .notif-bell:hover{background:var(--bg-muted)}
/* Notion: табы — тонкие, без цвета, как в Notion */
[data-theme="notion"] .tabs{border-bottom:1px solid var(--border)}
[data-theme="notion"] .tab{font-weight:500;border-bottom-width:2px;padding:10px 16px}
[data-theme="notion"] .tab:hover{background:var(--bg-muted);border-radius:6px 6px 0 0}
[data-theme="notion"] .tab.active{color:var(--text);border-bottom-color:var(--text);font-weight:600}
/* Notion: карточки — минимальные тени, тонкие бордеры */
[data-theme="notion"] .card{border-radius:12px;box-shadow:var(--shadow);border-color:var(--border)}
[data-theme="notion"] .card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
/* Notion: кнопки — синий accent вместо тёмного */
[data-theme="notion"] .btn-primary{background:var(--accent);border-radius:8px;font-weight:500}
[data-theme="notion"] .btn-primary:hover{background:#1b6ec2;transform:none;box-shadow:none}
[data-theme="notion"] .btn-secondary{background:var(--bg-muted);color:var(--text);border:1px solid var(--border)}
[data-theme="notion"] .btn-secondary:hover{background:var(--bg);border-color:var(--text-sec)}
/* Notion: инпуты — тоньше */
[data-theme="notion"] input,[data-theme="notion"] select,[data-theme="notion"] textarea{
  border-width:1px;border-radius:6px;
}
[data-theme="notion"] input:focus,[data-theme="notion"] select:focus,[data-theme="notion"] textarea:focus{
  box-shadow:0 0 0 2px rgba(35,131,226,.15);
}
/* Notion: попапы */
[data-theme="notion"] .popup-overlay{background:rgba(15,15,15,.5)}
[data-theme="notion"] .popup-card{border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12)}
/* Notion: админ табы */
[data-theme="notion"] .admin-tabs{border-bottom:1px solid var(--border)}
[data-theme="notion"] .admin-tab{font-weight:500;border-bottom-width:2px}
[data-theme="notion"] .admin-tab.active{color:var(--text);border-bottom-color:var(--text)}
/* Notion: таблицы */
[data-theme="notion"] .admin-table th{font-weight:500;text-transform:none;font-size:12px}
[data-theme="notion"] .tz-table th{font-weight:500}
/* Notion: канбан карточки */
[data-theme="notion"] .kanban-card{border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
[data-theme="notion"] .kanban-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
[data-theme="notion"] .kanban-column{border-radius:8px}
/* Notion: ссылки */
[data-theme="notion"] .link-btn{border-radius:8px;border-width:1px}
[data-theme="notion"] .link-btn:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.05)}
/* Notion: тосты */
[data-theme="notion"] .toast{border-radius:8px}
/* Notion: слоты бронирования */
[data-theme="notion"] .slot-status{border-radius:8px;border-width:1px}
/* Notion: KB карточки */
[data-theme="notion"] .kb-category-card{border-radius:8px;border-width:1px}
[data-theme="notion"] .kb-article-card{border-radius:8px;border-width:1px}
/* Notion: helpdesk */
[data-theme="notion"] .hd-ticket-row{border-radius:6px;border-width:1px}
[data-theme="notion"] .hd-queue-pick{border-radius:8px;border-width:1px}
/* Notion: задачи */
[data-theme="notion"] .task-card{border-radius:8px;border-width:1px}
[data-theme="notion"] .task-column{border-radius:8px}
/* Notion: статус бейджи — мягче */
[data-theme="notion"] .tz-status-badge{border-radius:4px;font-weight:600}
[data-theme="notion"] .tz-prio-badge{border-radius:4px}
[data-theme="notion"] .hd-badge{border-radius:4px}

/* ────── Theme: Ocean (голубая шапка, мягкие тона) ────── */
[data-theme="ocean"]{
  --bg: #f0f4f8;--card: #ffffff;--text: #1a365d;--text-sec: #4a6fa5;
  --primary: #2b6cb0;--primary-hover: #1e4e8c;--accent: #3182ce;--accent-soft: #ebf4ff;
  --border: #c8d6e5;--danger: #e53e3e;--danger-soft: #fff5f5;--ok: #2f855a;--ok-soft: #f0fff4;
  --disabled: #90a4ae;--shadow: 0 2px 8px rgba(26,54,93,.06);--shadow-lg: 0 8px 24px rgba(26,54,93,.1);
  --bg-muted: #e2ecf4;--bg-soft: #f5f8fc;--warn-soft: #fffff0;--warn: #fefcbf;--info-soft: #f3e8ff;
}
/* Ocean: gradient topbar */
[data-theme="ocean"] .topbar{
  background:linear-gradient(135deg,#1a365d 0%,#2b6cb0 100%);
  box-shadow:0 2px 12px rgba(26,54,93,.15);
}
/* Ocean: табы — акцент голубой */
[data-theme="ocean"] .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
[data-theme="ocean"] .tab:hover{background:var(--accent-soft)}
/* Ocean: карточки — лёгкое свечение */
[data-theme="ocean"] .card{border-radius:14px}
[data-theme="ocean"] .card:hover{box-shadow:0 4px 16px rgba(49,130,206,.08)}
/* Ocean: кнопки */
[data-theme="ocean"] .btn-primary:hover{box-shadow:0 4px 12px rgba(49,130,206,.3)}
/* Ocean: канбан */
[data-theme="ocean"] .kanban-column{background:var(--accent-soft)}
[data-theme="ocean"] .kanban-card:hover{box-shadow:0 3px 12px rgba(49,130,206,.1)}
/* Ocean: ссылки */
[data-theme="ocean"] .link-btn:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(49,130,206,.08)}
/* Ocean: KB */
[data-theme="ocean"] .kb-category-card:hover{box-shadow:0 4px 16px rgba(49,130,206,.1)}

/* ── Theme picker in UI settings ── */
.theme-picker{display:flex;flex-direction:column;gap:6px}
.theme-option{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border:1.5px solid var(--border);border-radius:10px;
  cursor:pointer;transition:all .15s;font-size:13px;color:var(--text);font-weight:500;
}
.theme-option:hover{border-color:var(--accent);background:var(--bg-soft)}
.theme-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.theme-option input[type="radio"]{display:none}
.theme-swatch{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}

/* ════════════════════════════════════════════════════════════════════
   NEW VISUAL LAYER — Notion · Miro · Apple
   Переопределяет существующие компоненты на новый стиль через cascade.
   Старые правила выше остаются как fallback и для нетронутых компонентов.
   ════════════════════════════════════════════════════════════════════ */

/* Off-white surface */
body{
  background:#faf9f6;
  color:var(--ink);
  letter-spacing:-.005em;
}

/* Topbar — light, sticky, glass */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  color:var(--ink);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:none;
  padding:10px 28px;
}
.topbar h1{
  color:var(--ink);font-weight:700;font-size:17px;letter-spacing:-.01em;
}
.topbar .subtitle,
.topbar-user .subtitle{color:var(--ink-2)}
.topbar-icon{color:var(--ink-2);opacity:1}
.topbar-user{
  border-radius:var(--r-md);padding:5px 9px;
}
.topbar-user:hover{background:var(--surface-2)}
.avatar-sm{
  border:1.5px solid var(--surface-2);
  box-shadow:var(--elev-1);
}

/* Topbar buttons */
.topbar .btn-icon,
.topbar .notif-bell{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  color:var(--ink-2);
  border-radius:var(--r-md);
  width:36px;height:36px;
  transition:all .15s ease;
  box-shadow:none;
}
.topbar .btn-icon:hover,
.topbar .notif-bell:hover{background:var(--surface-2);color:var(--ink)}
.topbar .btn-accent,
.topbar .btn-outline{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  font-weight:600;font-size:13px;letter-spacing:.005em;
  padding:8px 14px;
  box-shadow:none;
  transition:all .15s ease, transform .08s ease;
}
.topbar .btn-accent:hover,
.topbar .btn-outline:hover{
  background:var(--surface-2);
  border-color:var(--border-strong);
}
.topbar .btn-accent:active,
.topbar .btn-outline:active{transform:scale(.97)}

/* Global search topbar */
.topbar .global-search-input{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  color:var(--ink);
  border-radius:var(--r-md);
  font-size:13px;
}
.topbar .global-search-input::placeholder{color:var(--ink-3)}
.topbar .global-search-input:focus{
  border-color:var(--ink-2);
  background:var(--surface);
  box-shadow:none;
}

/* Tabs — pill style on light surface */
.tabs{
  background:transparent;
  border-bottom:1px solid var(--border-subtle);
  padding:8px 24px 0;
  gap:2px;
  position:sticky;top:56px;z-index:40;
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(250,249,246,.78);
}
.tab{
  border:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  padding:9px 14px;
  font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink-2);
  border-bottom:2px solid transparent;
  transition:all .15s ease;
}
.tab:hover{background:var(--surface-2);color:var(--ink)}
.tab.active{
  color:var(--ink);
  background:var(--surface);
  border-bottom-color:var(--ink);
}
.tab-badge{
  background:var(--surface-3);color:var(--ink-2);
  font-weight:600;font-size:10px;letter-spacing:.04em;
}
.tab-count-badge{
  background:var(--coral);color:#fff;
  font-size:10px;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;margin-left:4px;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;letter-spacing:0;box-sizing:border-box;
}

/* Content panels — softer surface */
.content{
  padding:24px 28px 40px;
  max-width:1400px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
}
.panel .card{padding:22px 24px}

/* Notif panel */
.notif-panel{
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
  background:var(--surface);
}

/* Buttons (general) */
.btn-primary,
.btn-accent.btn-primary{
  background:var(--ink);color:#fff;
  border-radius:var(--r-md);
  font-weight:600;letter-spacing:-.005em;
  border:none;
  padding:9px 16px;
  box-shadow:var(--elev-1);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover,
.btn-accent.btn-primary:hover{box-shadow:var(--elev-2);background:#000}
.btn-primary:active{transform:scale(.97)}

/* Booking reminder strip */
.booking-reminder{
  background:var(--apricot-soft);
  color:#8a5e0a;
  border-bottom:1px solid var(--apricot);
}

/* Mobile tweaks */
@media (max-width:740px){
  .topbar{padding:10px 14px}
  .tabs{padding:6px 10px 0;top:52px}
  .content{padding:16px 14px 32px}
}

/* Forms — soft surfaces */
input,select,textarea{
  border-radius:var(--r-md);
  border:1px solid var(--border-subtle);
  background:var(--surface);
  color:var(--ink);
  font-size:14px;
  padding:9px 12px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ink-2);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(28,28,30,.06);
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
label{color:var(--ink-2);font-weight:500;font-size:13px}

input[type="checkbox"]{
  border:1.5px solid var(--border-strong);
  border-radius:5px;
}
input[type="checkbox"]:checked{
  background:var(--ink);border-color:var(--ink);
}
input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 3px rgba(28,28,30,.08);
}

/* Popup — soft modal */
.popup-overlay{
  background:rgba(20,20,30,.32);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  animation:overlayIn .2s ease-out;
}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.popup-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-2xl);
  box-shadow:var(--elev-pop);
  padding:26px 28px;
  animation:popupIn .25s ease-out;
}
@keyframes popupIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.popup-card h3{
  color:var(--ink);
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 18px;
}
.popup-card h3 svg{color:var(--ink-2)}

/* Generic buttons (outside topbar) */
.btn-accent{
  background:var(--ink);color:#fff;border:none;
  border-radius:var(--r-md);
  font-weight:600;font-size:13px;letter-spacing:-.005em;
  padding:9px 16px;
  box-shadow:var(--elev-1);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn-accent:hover{background:#000;box-shadow:var(--elev-2)}
.btn-accent:active{transform:scale(.97)}
.btn-outline{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  font-weight:600;font-size:13px;
  padding:9px 16px;
  transition:all .15s ease, transform .08s ease;
}
.btn-outline:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn-outline:active{transform:scale(.97)}
.btn-sm{font-size:12px;padding:6px 12px;border-radius:var(--r-sm)}

/* Admin tabs */
.admin-tabs{
  border-bottom:1px solid var(--border-subtle);
  gap:2px;
}
.admin-tab{
  border:none;background:transparent;
  border-radius:var(--r-md) var(--r-md) 0 0;
  padding:9px 14px;
  font-size:13px;font-weight:600;
  color:var(--ink-2);
  border-bottom:2px solid transparent;
  transition:all .15s ease;
}
.admin-tab:hover{background:var(--surface-2);color:var(--ink)}
.admin-tab.active{
  color:var(--ink);
  background:var(--surface);
  border-bottom-color:var(--ink);
}

/* Link buttons (если будут добавлены позже) */
.link-btn{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
}
.link-btn:hover{
  border-color:var(--border-strong);
  background:var(--surface);
  box-shadow:var(--elev-2);
  transform:translateY(-1px);
}
.link-btn:hover .link-arrow{color:var(--ink-2)}

/* Notification badges */
.notif-badge{
  background:var(--coral);color:#fff;
  font-weight:700;
}

/* Profile popup */
.profile-popup-card .profile-input{
  background:var(--surface-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);
  color:var(--ink);
}
.profile-popup-card .profile-input:focus{
  background:var(--surface);
  border-color:var(--ink-2);
  box-shadow:0 0 0 3px rgba(28,28,30,.06);
}
.profile-label{color:var(--ink-3);font-weight:600;font-size:10px}
.profile-value{color:var(--ink)}

/* ════════════════════════════════════════════════════════════════
   PROJECTS — список карточек, деталь, Гантт
   ════════════════════════════════════════════════════════════════ */

.projects-page{
  max-width:1200px;margin:0 auto;
}
.proj-loading{padding:40px;text-align:center;color:var(--ink-2)}
.proj-empty{
  padding:48px 24px;text-align:center;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
}
.proj-empty h3{margin:14px 0 4px;font-size:18px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.proj-empty p{margin:0 0 18px;font-size:14px}

/* Hero (premium header) */
.proj-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin:8px 0 22px;gap:18px;flex-wrap:wrap;
}
.proj-title{
  margin:0 0 4px;font-size:32px;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1.15;
}
.proj-sub{margin:0;color:var(--ink-2);font-size:14.5px;max-width:560px;line-height:1.5}

/* KPI summary row */
.proj-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-bottom:24px;
}
.proj-kpi{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:16px 20px;
  box-shadow:var(--elev-1);transition:all .15s ease;
}
.proj-kpi:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.proj-kpi-lbl{
  font-size:12.5px;color:var(--ink-2);font-weight:500;
  display:flex;align-items:center;gap:7px;margin-bottom:6px;
}
.proj-kpi-dot{width:8px;height:8px;border-radius:99px;display:inline-block}
.proj-kpi-val{
  font-size:30px;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}

/* Cards grid */
.proj-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;
}
.proj-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:18px;cursor:pointer;
  transition:all .2s ease;
  box-shadow:var(--elev-1);
}
.proj-card:hover{
  border-color:var(--border-strong);
  box-shadow:var(--elev-2);
  transform:translateY(-1px);
}
.proj-row{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.proj-emoji{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.proj-meta{flex:1;min-width:0}
.proj-card-title{
  font-weight:600;font-size:15px;letter-spacing:-.005em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.proj-card-sub{color:var(--ink-2);font-size:12px;margin-top:1px}
.proj-card-hours{color:var(--ink);font-weight:600}
.proj-card-hours-m{color:var(--ink-2);font-weight:400}
.proj-status{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
  flex-shrink:0;
}
.proj-status-planning{background:var(--surface-2);color:var(--ink-2)}
.proj-status-active{background:var(--mint-soft);color:#1f6e48}
.proj-status-paused{background:var(--apricot-soft);color:#8a5e0a}
.proj-status-completed{background:var(--lavender-soft);color:#553f9c}
.proj-status-archived{background:var(--surface-3);color:var(--ink-3)}

.proj-desc{
  color:var(--ink-2);font-size:13px;line-height:1.5;
  margin:6px 0 12px;
}
.proj-progress{
  height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden;
  margin:10px 0 8px;
}
.proj-progress-bar{height:100%;border-radius:99px;transition:width .3s}
.proj-color-mint{background:var(--mint)}
.proj-color-lavender{background:var(--lavender)}
.proj-color-coral{background:var(--coral)}
.proj-color-apricot{background:var(--apricot)}
.proj-color-sky{background:var(--sky)}
.proj-color-rose{background:var(--rose)}
.proj-bg-mint{background:var(--mint-soft)}
.proj-bg-lavender{background:var(--lavender-soft)}
.proj-bg-coral{background:var(--coral-soft)}
.proj-bg-apricot{background:var(--apricot-soft)}
.proj-bg-sky{background:var(--sky-soft)}
.proj-bg-rose{background:var(--rose-soft)}
.proj-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--ink-2);gap:8px;flex-wrap:wrap;
}
.proj-pct{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Avatar stack on project card */
.proj-stack{display:flex;align-items:center}
.proj-av{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--surface);
  margin-left:-7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#1c1c1e;
  line-height:1;letter-spacing:-.02em;
  background:var(--mint);
  object-fit:cover;
}
.proj-av:first-child{margin-left:0}
.proj-av-mint{background:var(--mint)}
.proj-av-lavender{background:var(--lavender)}
.proj-av-coral{background:var(--coral);color:#fff}
.proj-av-apricot{background:var(--apricot)}
.proj-av-sky{background:var(--sky)}
.proj-av-rose{background:var(--rose);color:#fff}
.proj-av-more{
  background:var(--surface-2);color:var(--ink-2);
  font-size:10px;font-weight:600;
}

/* Detail */
.proj-detail-head{margin-bottom:22px}

/* Часы по месяцам — пилюли. Контейнер .proj-hours-panel описан ниже (объединённая
 * «Аналитика проекта» — часы + baseline variance в одной свёртываемой плашке). */
.proj-hours-panel[hidden]{display:none}
.hp-pills{display:flex;gap:6px;flex-wrap:wrap}
.hp-pill{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:5px 10px;border-radius:8px;border:1px solid var(--border,#e6e8ef);
  background:#fff;cursor:pointer;font:inherit;line-height:1.1;
  transition:border-color .12s,background .12s;
}
.hp-pill:hover{border-color:var(--ink-2,#9aa)}
.hp-pill.hp-active{border-color:var(--accent,#5b8def);background:#eef3ff}
.hp-pill.hp-cur{background:#fff7e6;border-color:#f0c674}
.hp-pill.hp-cur.hp-active{background:#ffeec2}
/* Индикатор загрузки месяца относительно project.monthly_capacity:
   hp-free   — <90% (зелёный, есть запас)
   hp-tight  — 90-110% (жёлтый, впритык)
   hp-overload — >110% (красный, превышение нормы) */
.hp-pill.hp-free{border-left:3px solid #2a9d54}
.hp-pill.hp-tight{border-left:3px solid #d99014;background:#fffaf0}
.hp-pill.hp-overload{border-left:3px solid #c2350f;background:#fff1ec}
.hp-pill.hp-overload .hp-pill-h{color:#a83a2b}
.hp-pill-m{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
.hp-pill-h{font-size:13px;font-weight:600;color:var(--ink)}
.hp-totals{font-size:12px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.hp-warn{color:#b86c00;background:#fff7e6;padding:2px 6px;border-radius:6px;font-size:11px}
.hp-detail{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border,#e6e8ef)}
.hp-detail-head{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.hp-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.hp-cell-title{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;font-weight:600}
.hp-cell-rows{display:flex;gap:4px;flex-wrap:wrap}
.hp-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;
  background:#fff;border:1px solid var(--border,#e6e8ef);font-size:12px;
}
.hp-chip-l{color:var(--ink-2);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-chip-h{color:var(--ink);font-weight:600}
.hp-chip-more{background:var(--surface-2,#f6f7fb);color:var(--ink-2);cursor:default}

/* В fullwidth-режиме сжимаем панель чтобы Гантт не терял место */
#panelProjects.proj-fullwidth .proj-hours-panel{margin:4px 0}
#panelProjects.proj-fullwidth .pa-header{padding:6px 10px}
#panelProjects.proj-fullwidth .pa-body{padding:4px 10px 8px}
#panelProjects.proj-fullwidth .hp-detail{margin-top:6px;padding-top:6px}


/* Импортированный проект — компактная шапка, чтобы Гантт занял максимум места */
#panelProjects.proj-fullwidth .proj-detail-head{margin-bottom:6px}
#panelProjects.proj-fullwidth .proj-detail-info h2{font-size:18px!important;margin:0!important}
#panelProjects.proj-fullwidth .proj-detail-row{margin-bottom:4px}
#panelProjects.proj-fullwidth .proj-detail-desc{display:none}
#panelProjects.proj-fullwidth .proj-detail-info p{margin:1px 0 0!important;font-size:12px!important}
#panelProjects.proj-fullwidth .proj-views{margin:6px 0 6px;padding:6px 0 0}
#panelProjects.proj-fullwidth .btn-back{padding:1px 0 4px;font-size:12px}
#panelProjects.proj-fullwidth .proj-emoji{width:32px!important;height:32px!important;font-size:16px!important;border-radius:8px!important}

/* Меньше padding в .content для проекта на полную ширину — больше места.
   Класс proj-fullwidth-content навешивается JS'ом (без :has — для совместимости). */
@media (min-width:1000px){
  #mainScreen > .content.proj-fullwidth-content{
    padding:12px 8px 16px!important;
  }
  #mainScreen > .content.proj-fullwidth-content > #panelProjects.proj-fullwidth.active{
    max-width:none!important;
    width:100%!important;
    margin-left:0!important;margin-right:0!important;
  }
  /* КРИТИЧНО: внутренний контейнер #projectsContent.projects-page
     по умолчанию max-width:1200px — это создавало пустоты по бокам
     даже при proj-fullwidth. Переопределяем. */
  #mainScreen > .content.proj-fullwidth-content #projectsContent.projects-page{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
  }
}
@media (min-width:1600px){
  #mainScreen > .content.proj-fullwidth-content{
    padding:14px 12px 18px!important;
  }
  #mainScreen > .content.proj-fullwidth-content > #panelProjects.proj-fullwidth.active{
    max-width:none!important;
  }
}
.msp-wrap{width:100%;display:block}
.btn-back{
  background:transparent;border:none;cursor:pointer;
  color:var(--ink-2);font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:6px;padding:6px 0 14px;
  transition:color .15s ease;
}
.btn-back:hover{color:var(--ink)}
.proj-detail-row{
  display:flex;align-items:center;gap:16px;margin-bottom:10px;
}
.proj-detail-info{flex:1;min-width:0}
.proj-detail-info h2{
  font-size:26px!important;font-weight:700!important;
  letter-spacing:-.025em!important;line-height:1.2;
  color:var(--ink);
}
.proj-detail-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){
  .proj-detail-actions{gap:6px}
  .proj-detail-actions .btn-outline,.proj-detail-actions .btn-accent{font-size:12px;padding:6px 10px}
}
.proj-detail-desc{
  color:var(--ink-2);font-size:14.5px;line-height:1.6;
  margin:10px 0 20px;max-width:760px;
}
.proj-views{
  display:flex;justify-content:space-between;align-items:center;
  margin:18px 0 18px;gap:10px;flex-wrap:wrap;
  padding:14px 0 0;border-top:1px solid var(--border-subtle);
}

.proj-card{
  padding:20px;
}
.proj-card:hover{transform:translateY(-2px)}
.proj-card .proj-card-title{font-size:15.5px}
.proj-card .proj-emoji{
  width:40px;height:40px;border-radius:11px;font-size:19px;
}

/* Segmented control */
.seg-control{
  display:inline-flex;background:var(--surface-2);
  border-radius:var(--r-md);padding:3px;
}
.seg-control button{
  border:none;background:transparent;font:inherit;font-size:12px;font-weight:500;
  color:var(--ink-2);padding:6px 14px;border-radius:8px;cursor:pointer;
  transition:all .15s ease;
}
.seg-control button.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--elev-1);
}

/* Gantt */
.gantt-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;gap:10px;flex-wrap:wrap;
}
.gantt-hint{font-size:12.5px;color:var(--ink-2);font-style:italic}
.gantt-wrap{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:18px 18px 14px;overflow-x:auto;
  box-shadow:var(--elev-1);
}
.gantt-wrap svg{display:block}
.gantt-wrap .gantt-mint .bar{fill:var(--mint)}
.gantt-wrap .gantt-lavender .bar{fill:var(--lavender)}
.gantt-wrap .gantt-coral .bar{fill:var(--coral)}
.gantt-wrap .gantt-apricot .bar{fill:var(--apricot)}
.gantt-wrap .gantt-sky .bar{fill:var(--sky)}
.gantt-wrap .gantt-rose .bar{fill:var(--rose)}
.gantt-wrap .gantt .bar-progress{fill:rgba(0,0,0,.18)}
.gantt-wrap .gantt .bar-label{fill:#1c1c1e;font-weight:600;font-size:11px}
.gantt-wrap .gantt .grid-row{fill:transparent}
.gantt-wrap .gantt .grid-row:nth-child(even){fill:rgba(20,20,30,.015)}
.gantt-wrap .gantt .row-line{stroke:var(--border-subtle)}
.gantt-wrap .gantt .tick{stroke:var(--border-subtle)}
.gantt-wrap .gantt .lower-text,
.gantt-wrap .gantt .upper-text{fill:var(--ink-2);font-size:11px}
.gantt-wrap .gantt .arrow{stroke:var(--ink-3);stroke-width:1.5}
.gantt-wrap .gantt .handle{fill:rgba(0,0,0,.15)}
/* Milestone — diamond rendering via narrow bar */
.gantt-wrap .gantt-milestone .bar{
  fill:var(--ink);
  rx:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.gantt-wrap .gantt-milestone .bar-label{fill:#fff;font-weight:700}
.gantt-wrap .gantt-milestone .bar-progress{fill:transparent}

/* TZ list table inside project */
.proj-tz-table-wrap{padding:0;overflow-x:auto}
.proj-tz-table{width:100%;border-collapse:collapse;font-size:13px}
.proj-tz-table thead th{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--border-subtle);
  font-weight:600;color:var(--ink-2);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;background:var(--surface-2);
}
.proj-tz-table tbody td{
  padding:12px 16px;border-bottom:1px solid var(--border-subtle);
  color:var(--ink);
}
.proj-tz-table tbody tr:last-child td{border-bottom:none}
.proj-tz-table tbody tr:hover{background:var(--surface-2)}
.tz-code-mono{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;color:var(--ink-2);
}
.btn-icon-x{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--border-subtle);
  background:var(--surface);color:var(--ink-3);cursor:pointer;
  font-size:12px;line-height:1;
}
.btn-icon-x:hover{background:var(--coral-soft);color:var(--coral);border-color:var(--coral)}

/* Project form modal */
.proj-form-row{display:flex;gap:10px}
.proj-form-label{
  font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
}
.proj-emojis,
.proj-colors{display:flex;flex-wrap:wrap;gap:6px}
.proj-emoji-pick{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--border-subtle);
  background:var(--surface);font-size:16px;cursor:pointer;
  transition:all .12s ease;
}
.proj-emoji-pick:hover{border-color:var(--border-strong)}
.proj-emoji-pick.on{border-color:var(--ink);background:var(--surface-2);transform:scale(1.05)}
.proj-color-pick{
  width:30px;height:30px;border-radius:8px;border:2px solid transparent;
  cursor:pointer;
}
.proj-color-pick.on{border-color:var(--ink)}

/* Add TZ modal */
.add-tz-list{
  flex:1;overflow-y:auto;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:6px;background:var(--surface-2);
  max-height:50vh;min-height:200px;margin:8px 0 4px;
}
.add-tz-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--surface);border-radius:var(--r-sm);margin-bottom:3px;
  cursor:pointer;font-size:13px;
  transition:background .12s;
}
.add-tz-row:hover{background:var(--surface-2)}
.add-tz-row.on{background:var(--mint-soft);border:1px solid var(--mint)}
.add-tz-title{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add-tz-warn{font-size:10px;color:var(--coral);background:var(--coral-soft);padding:2px 6px;border-radius:99px}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — boковая навигация (заменяет горизонтальные tabs на ≥1000px)
   ════════════════════════════════════════════════════════════════════ */

.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w, 248px);
  background:var(--surface);
  border-right:1px solid var(--border-subtle);
  padding:20px 12px 16px;
  display:flex;flex-direction:column;gap:6px;
  z-index:60;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .25s ease, width .25s ease;
}
.sidebar-backdrop{
  position:fixed;inset:0;
  background:rgba(20,20,30,.32);
  backdrop-filter:saturate(180%) blur(6px);
  -webkit-backdrop-filter:saturate(180%) blur(6px);
  z-index:55;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.sidebar.open{transform:translateX(0)}
.sidebar.open ~ .sidebar-backdrop,
.sidebar-backdrop.open{opacity:1;pointer-events:auto}

.sidebar-burger{
  position:fixed;top:10px;left:10px;z-index:65;
  width:40px;height:40px;border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--border-subtle);
  color:var(--ink);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:var(--elev-1);
}
.sidebar-burger:hover{background:var(--surface-2)}

/* Brand */
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px 18px;
  font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--ink);
}
.sidebar-brand-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;
  box-shadow:var(--elev-1);
}

/* Nav — компактные пункты, чтобы вмещалось >12 элементов на ноуте 1080p */
.sidebar-nav{
  display:flex;flex-direction:column;gap:0;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:2px}
.sidebar-group-label{
  font-size:10px;font-weight:600;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;
  padding:10px 10px 4px;
}
.sidebar-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-weight:500;font-size:13.5px;letter-spacing:-.005em;
  cursor:pointer;border:none;background:transparent;
  transition:background .12s ease, color .12s ease;
  text-align:left;width:100%;
  position:relative;
}
.sidebar-item:hover{background:var(--surface-2);color:var(--ink)}
.sidebar-item.active{
  background:var(--mint-soft);color:#1f6e48;font-weight:600;
}
.sidebar-item .ico{width:18px;height:18px;flex-shrink:0;opacity:.85}
.sidebar-item.active .ico{opacity:1}
.sidebar-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-item-badge{
  margin-left:auto;font-size:10px;font-weight:700;
  background:var(--coral);color:#fff;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;
  box-sizing:border-box;
}

/* Foot */
.sidebar-foot{
  margin-top:auto;padding-top:12px;
  border-top:1px solid var(--border-subtle);
}

/* Documents / ONLYOFFICE (Эпик 6) */
.docs-hero{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:18px;flex-wrap:wrap;
}
.docs-actions{display:flex;gap:8px;flex-wrap:wrap}
.docs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;
}
.doc-card{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:10px 12px;
  box-shadow:var(--elev-1);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  cursor:pointer;outline:none;
}
.doc-card:hover{box-shadow:var(--elev-2);transform:translateY(-1px);border-color:var(--ink-2)}
.doc-card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.15)}
.doc-card-icon{
  flex-shrink:0;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;font-size:20px;
  background:var(--surface-2);
}
.doc-bg-mint{background:var(--mint-soft, #d6f5e6)}
.doc-bg-sky{background:var(--sky-soft, #def0fb)}
.doc-bg-apricot{background:var(--apricot-soft, #fff1d6)}
.doc-bg-lavender{background:var(--lavender-soft, #e8e4ff)}
.doc-bg-coral{background:var(--coral-soft, #ffe0e6)}
.doc-bg-amber{background:var(--apricot-soft, #fff1d6)}
.doc-bg-neutral{background:var(--surface-2)}
.folder-card .doc-card-name{font-weight:700}
.docs-breadcrumbs{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 14px;font-size:13px;color:var(--ink-2);
}
.docs-breadcrumbs .bc-link{
  background:transparent;border:none;cursor:pointer;
  color:var(--accent);padding:2px 4px;border-radius:6px;
  font-size:13px;font-weight:500;
}
.docs-breadcrumbs .bc-link:hover{background:var(--surface-2);color:var(--accent)}
.docs-breadcrumbs .bc-current{font-weight:600;color:var(--ink)}
.docs-breadcrumbs .bc-sep{color:var(--border-subtle)}
.version-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto}
.version-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;background:var(--surface-2);border-radius:10px;
  border:1px solid var(--border-subtle);
}
.version-main{display:flex;align-items:center;gap:12px;min-width:0}
.version-v{
  flex-shrink:0;font-weight:700;font-size:13px;color:var(--ink);
  background:var(--surface);padding:3px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.version-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.version-author{font-size:13px;color:var(--ink);font-weight:500}
.version-time{font-size:11.5px;color:var(--ink-2)}
.version-actions{display:flex;gap:6px;flex-shrink:0}
.appr-widget-tabs{display:flex;gap:4px}
.appr-w-tab{
  background:transparent;border:1px solid transparent;
  padding:5px 10px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);
}
.appr-w-tab:hover{background:var(--surface-2);color:var(--ink)}
.appr-w-tab.active{background:var(--surface-2);color:var(--ink);font-weight:600;border-color:var(--border-subtle)}
.appr-widget-list{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.doc-card-body{flex:1;min-width:0}
.doc-card-name{
  font-weight:600;font-size:14px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:3px;
}
.doc-card-meta{
  font-size:11.5px;color:var(--ink-2);
  display:flex;gap:5px;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.doc-meta-sep{color:var(--border-subtle)}
.doc-meta-owner{overflow:hidden;text-overflow:ellipsis}
.doc-card-more{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;
  background:transparent;border:none;cursor:pointer;
  color:var(--ink-2);font-size:18px;line-height:1;letter-spacing:.05em;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.doc-card:hover .doc-card-more,
.doc-card:focus-within .doc-card-more,
.doc-card-more:focus,
.doc-card-more.is-open{opacity:1}
.doc-card-more:hover{background:var(--surface-2);color:var(--ink)}
@media (hover:none){
  .doc-card-more{opacity:.7}
}

/* Profile vacations (Эпик 3.12) */
.profile-vacations-section{margin-top:8px}
.profile-vac-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:var(--surface-2);
  border-radius:8px;margin-bottom:6px;font-size:13px;
}
.profile-vac-dates{font-variant-numeric:tabular-nums;color:var(--ink)}
.profile-vac-note{
  flex:1;color:var(--text-sec);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-vac-del{
  margin-left:auto;width:22px;height:22px;
  border:none;background:transparent;cursor:pointer;
  color:var(--text-sec);font-size:16px;line-height:1;
  border-radius:6px;transition:background .12s ease;
}
.profile-vac-del:hover{background:var(--coral, #ffe0e6);color:var(--danger)}

/* Calendar admin (Эпик 3.12) */
.cal-admin .cal-holidays-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;
}
.cal-year-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:12px 14px;
}
.cal-year-num{
  font-weight:700;font-size:16px;color:var(--ink);margin-bottom:8px;
  letter-spacing:.02em;
}
.cal-year-list{display:flex;gap:6px;flex-wrap:wrap}
.cal-hol-pill{
  background:var(--surface-2);color:var(--ink-2);
  font-size:11px;padding:2px 8px;border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.vac-type-pill{
  display:inline-block;font-size:11px;font-weight:600;
  padding:2px 9px;border-radius:99px;letter-spacing:.02em;
}
.vac-type-pill.vac-vacation{background:var(--mint-soft, #d6f5e6);color:var(--mint, #0a7a47);}
.vac-type-pill.vac-sick{background:var(--rose-soft, #ffe0e6);color:var(--coral, #b83b50);}
.vac-type-pill.vac-leave{background:var(--lavender-soft, #e8e4ff);color:var(--lavender, #5b3fc1);}

/* MS Project Gantt — read-only режим для viewer */
.msp-readonly .msp-c-title-edit,
.msp-readonly .msp-input-title,
.msp-readonly .msp-c-status select,
.msp-readonly .msp-c-priority select,
.msp-readonly .msp-c-start input,
.msp-readonly .msp-c-end input,
.msp-readonly .msp-c-hours input{
  pointer-events:none;background:transparent;border-color:transparent;
}
.msp-readonly .msp-row-del,
.msp-readonly .msp-row-handle,
.msp-readonly [data-action="indent"],
.msp-readonly [data-action="outdent"]{display:none}
.msp-readonly .msp-bar,
.msp-readonly .msp-summary-bar,
.msp-readonly .msp-bar-resize-l,
.msp-readonly .msp-bar-resize-r{
  cursor:default !important;
}

/* Per-project роли — бейджи (Эпик 3.15) */
.proj-role-badge{
  display:inline-block;
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:99px;
  vertical-align:middle;margin-left:6px;
  letter-spacing:.02em;
}
.proj-role-owner{background:var(--mint-soft, #d6f5e6);color:var(--mint, #0a7a47);}
.proj-role-manager{background:var(--lavender-soft, #e8e4ff);color:var(--lavender, #5b3fc1);}
.proj-role-member{background:var(--sky-soft, #def0fb);color:var(--sky, #1e6ea3);}
.proj-role-viewer{background:var(--surface-2);color:var(--ink-2);}

/* Workspaces admin grid (страница управления) */
.ws-admin .ws-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
}
.ws-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:14px 16px;
  box-shadow:var(--elev-1);
  transition:box-shadow .15s ease, transform .15s ease;
}
.ws-card:hover{box-shadow:var(--elev-2);transform:translateY(-1px)}
.ws-card-head{display:flex;align-items:flex-start;gap:12px}
.ws-card-mark{
  flex-shrink:0;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  border-radius:9px;font-size:14px;font-weight:700;
}
.ws-card-info{flex:1;min-width:0}
.ws-card-name{font-weight:600;font-size:15px;color:var(--ink);margin:0}
.ws-card-desc{
  font-size:12px;color:var(--text-sec);margin:2px 0 0;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.ws-card-actions{display:flex;gap:4px;flex-shrink:0}
.ws-card-actions .btn-sm{padding:4px 8px;min-width:28px}
.ws-card-meta{margin-top:10px;font-size:12px;color:var(--text-sec)}
.ws-card-meta strong{color:var(--ink)}
.ws-meta-lbl{color:var(--ink-2)}
.ws-meta-sep{margin:0 6px;color:var(--border-subtle)}
.ws-usage-row{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.ws-usage-pill{
  display:inline-block;
  background:var(--surface-2);color:var(--ink-2);
  padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:500;
}
.ws-usage-empty{color:var(--text-sec);font-size:11px;font-style:italic}
.ws-card-foot{margin-top:12px;display:flex;justify-content:flex-end}

/* Workspace switcher (Apple/Notion-style) */
.sidebar-ws-switch{position:relative;margin-bottom:10px}
.sidebar-ws-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border:1px solid var(--border-subtle);
  background:var(--surface-2);
  border-radius:var(--r-md);
  cursor:pointer;font:inherit;
  font-size:13px;font-weight:500;color:var(--ink);
  transition:background .12s ease,border-color .12s ease;
}
.sidebar-ws-btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.sidebar-ws-btn[aria-expanded="true"]{
  background:var(--accent-soft);border-color:var(--accent);
}
.sidebar-ws-mark{
  flex-shrink:0;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  border-radius:7px;font-size:11px;font-weight:700;
  letter-spacing:.02em;
}
.sidebar-ws-label{
  flex:1;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-ws-caret{flex-shrink:0;opacity:.6;transition:transform .15s ease}
.sidebar-ws-btn[aria-expanded="true"] .sidebar-ws-caret{transform:rotate(180deg)}

.sidebar-ws-menu{
  position:absolute;left:0;right:0;bottom:calc(100% + 6px);
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  box-shadow:var(--elev-pop);
  padding:6px;z-index:50;
  max-height:280px;overflow:auto;
}
.sidebar-ws-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;width:100%;text-align:left;
  background:transparent;border:none;cursor:pointer;font:inherit;
  font-size:13px;color:var(--ink);border-radius:8px;
  transition:background .1s ease;
}
.sidebar-ws-item:hover{background:var(--surface-2)}
.sidebar-ws-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sidebar-ws-item .sidebar-ws-mark{width:20px;height:20px;font-size:10px;border-radius:6px}
.sidebar-ws-item .sidebar-ws-item-meta{
  flex-shrink:0;font-size:11px;color:var(--ink-2);
  background:var(--surface-2);padding:1px 6px;border-radius:99px;
}

.sidebar-ws-section{
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:6px 8px 4px;
}

/* Свёрнутый сайдбар: только инициалы workspace, текст и каретка скрыты */
.sidebar.collapsed .sidebar-ws-btn{padding:8px 0;justify-content:center}
.sidebar.collapsed .sidebar-ws-label,
.sidebar.collapsed .sidebar-ws-caret{display:none}
.sidebar.collapsed .sidebar-ws-menu{
  left:calc(100% + 8px);right:auto;bottom:0;
  width:240px;
}
.theme-toggle-strip{
  display:flex;background:var(--surface-2);
  border-radius:var(--r-md);padding:3px;gap:2px;
}
.theme-toggle-strip button{
  flex:1;border:none;background:transparent;cursor:pointer;font:inherit;
  font-size:13px;color:var(--ink-2);font-weight:500;
  padding:6px 0;border-radius:8px;
  transition:all .15s ease;
}
.theme-toggle-strip button.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--elev-1);
}

/* Toolbar-row (pin + customize + collapse) — единый горизонтальный ряд */
.sidebar-toolbar-row{
  display:flex;align-items:stretch;gap:6px;margin-bottom:10px;
}
.sidebar-icon-btn{
  flex-shrink:0;
  /* box-sizing нужен явно: глобальный button {padding:10px 18px} раздувает
     box до ~68×52, иконка теряется внутри. Border-box + padding:0 → 32×32. */
  box-sizing:border-box;
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-subtle);
  background:var(--surface-2);
  border-radius:var(--r-md);
  cursor:pointer;font:inherit;
  color:var(--ink-2,#6b7280);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.sidebar-icon-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.sidebar-icon-btn.active{
  background:var(--brand,#6366f1);
  border-color:var(--brand,#6366f1);
  color:#fff;
}
.sidebar-icon-btn.active:hover{
  background:var(--brand,#6366f1);
  border-color:var(--brand,#6366f1);
  color:#fff;
  filter:brightness(1.05);
}
/* Pin: показываем .ico-unlock по умолчанию, .ico-lock когда .active */
#sidebarPinBtn .ico-lock{display:none}
#sidebarPinBtn.active .ico-lock{display:block}
#sidebarPinBtn.active .ico-unlock{display:none}

/* Collapse — занимает остаток ширины, единственная кнопка с лейблом */
.sidebar-collapse-btn{
  flex:1;
  box-sizing:border-box;
  display:flex;align-items:center;gap:8px;
  padding:0 10px;height:32px;
  border:1px solid var(--border-subtle);
  background:var(--surface-2);
  border-radius:var(--r-md);
  cursor:pointer;font:inherit;
  font-size:13px;font-weight:500;
  color:var(--ink);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.sidebar-collapse-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.sidebar-collapse-btn:disabled{opacity:.45;cursor:not-allowed}
.sidebar-collapse-btn:disabled:hover{
  background:var(--surface-2);border-color:var(--border-subtle);color:var(--ink);
}
.sidebar-collapse-btn svg{flex-shrink:0;transition:transform .2s ease}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
.sidebar-collapse-label{
  flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Свёрнутое: 3 иконки в столбик, без лейбла */
.sidebar.collapsed .sidebar-toolbar-row{flex-direction:column;gap:6px}
.sidebar.collapsed .sidebar-toolbar-row .sidebar-icon-btn,
.sidebar.collapsed .sidebar-toolbar-row .sidebar-collapse-btn{
  width:100%;flex:none;justify-content:center;padding:0;
}
.sidebar.collapsed .sidebar-collapse-label{display:none}

/* Sidebar edit-mode — × кнопка на пунктах + dashed background nav */
.sidebar-nav.sidebar-edit-mode{
  position:relative;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--brand,#6366f1) 4%,transparent),
    color-mix(in srgb,var(--brand,#6366f1) 4%,transparent) 10px,
    transparent 10px,transparent 20px);
  border-radius:var(--r-md);
  padding:6px 4px;
}
.sidebar-nav.sidebar-edit-mode .sidebar-item{
  cursor:grab;
  position:relative;
  padding-right:32px; /* место под × */
}
.sidebar-nav.sidebar-edit-mode .sidebar-item:hover{
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent);
}
.sidebar-item-hide{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;color:var(--ink-3,#9ca3af);
  cursor:pointer;
  transition:all .12s ease;
}
.sidebar-item-hide:hover{
  background:color-mix(in srgb,var(--coral,#ef4444) 14%,transparent);
  color:var(--coral,#ef4444);
}
.sidebar-item-dragging{
  opacity:.85;cursor:grabbing!important;
  box-shadow:0 12px 32px rgba(99,102,241,.25);
  border:1px solid var(--brand,#6366f1);border-radius:var(--r-md);
  background:var(--surface,#fff)!important;
}
.sidebar-item-placeholder{
  background:color-mix(in srgb,var(--brand,#6366f1) 10%,transparent);
  border:1.5px dashed color-mix(in srgb,var(--brand,#6366f1) 50%,transparent);
  border-radius:var(--r-md);
  margin:1px 0;
}
.sidebar-add-panel{
  margin-top:10px;padding:8px;
  border:1.5px dashed color-mix(in srgb,var(--brand,#6366f1) 30%,transparent);
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface,#fff) 60%,transparent);
  display:flex;flex-direction:column;gap:3px;
}
.sidebar-add-label{
  font-size:11px;font-weight:600;color:var(--ink-2,#6b7280);
  text-transform:uppercase;letter-spacing:.04em;
  padding:4px 6px;
}
.sidebar-add-empty{
  font-size:11.5px;color:var(--ink-3,#9ca3af);text-align:center;padding:6px;
}
.sidebar-add-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;
  border:1px solid var(--border-subtle);background:var(--surface,#fff);
  color:var(--ink-1,#0f172a);
  border-radius:var(--r-md);font:inherit;font-size:12.5px;
  cursor:pointer;text-align:left;
  transition:all .12s ease;
}
.sidebar-add-item:hover{
  border-color:var(--brand,#6366f1);
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent);
  color:var(--brand,#6366f1);
}
.sidebar-add-item .ico{width:14px;height:14px;flex-shrink:0;opacity:.7}
.sidebar.collapsed .sidebar-add-item span:not(.ico){display:none}
.sidebar.collapsed .sidebar-add-label{display:none}

/* Свёрнутое состояние сайдбара (только иконки) */
.sidebar.collapsed{width:64px}
.sidebar.collapsed .sidebar-brand-text{display:none}
.sidebar.collapsed .sidebar-brand{padding:6px 4px 18px;justify-content:center}
.sidebar.collapsed .sidebar-collapse-btn{
  justify-content:center;
  padding:8px 0;
}
.sidebar.collapsed .sidebar-collapse-label{display:none}
.sidebar.collapsed .sidebar-item span{display:none}
.sidebar.collapsed .sidebar-item-badge{
  position:absolute;top:4px;right:4px;
  font-size:9px;min-width:14px;height:14px;padding:0 3px;
  margin:0;
}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:10px 0;position:relative}
.sidebar.collapsed .sidebar-group-label{height:8px;visibility:hidden;padding:0;margin:6px 0 0}
.sidebar.collapsed .theme-toggle-strip{flex-direction:column;padding:2px}
.sidebar.collapsed .theme-toggle-strip button{font-size:11px;padding:4px 0}

/* Tooltip с названием при hover на свёрнутый item — JS-позиционируемый,
   потому что .sidebar { overflow-y:auto } клипует абсолютные потомки. */
.sidebar-item-tooltip{
  position:fixed;
  transform:translateY(-50%);
  background:var(--ink,#0f172a);color:#fff;
  padding:6px 11px;border-radius:7px;
  font-size:12.5px;font-weight:500;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .12s ease;
  z-index:1000;box-shadow:var(--elev-2,0 6px 18px rgba(0,0,0,.12));
  letter-spacing:-.005em;
}
.sidebar-item-tooltip.show{opacity:1}
[data-theme="dark"] .sidebar-item-tooltip{background:#f3f4f6;color:#0f172a}

/* Layout shift on desktop: content offset by sidebar width */
@media (min-width:1000px){
  .sidebar{transform:translateX(0)}
  .sidebar-backdrop{display:none}
  .sidebar-burger{display:none}
  #mainScreen > .topbar,
  #mainScreen > .booking-reminder,
  #mainScreen > .tabs,
  #mainScreen > .content,
  #mainScreen > .notif-panel{
    margin-left:var(--sidebar-w, 248px);
    transition:margin-left .25s ease;
  }
  /* Hide horizontal tabs on desktop — sidebar replaces them */
  #mainScreen > .tabs{display:none}
  #mainScreen > .topbar{padding-left:28px}
  #mainScreen > .notif-panel{right:14px}
  /* Content fills remaining width with proper padding & inner max-width */
  #mainScreen > .content{
    max-width:none;
    padding:28px 36px 48px;
    margin-right:0;
  }
  /* Inner panel content centered within max 1320px */
  #mainScreen > .content > .panel.active{
    max-width:1320px;
    margin-left:auto;
    margin-right:auto;
  }
}
@media (min-width:1600px){
  #mainScreen > .content{padding:32px 48px 56px}
  #mainScreen > .content > .panel.active{max-width:1400px}
}

/* Mobile burger visible */
@media (max-width:999px){
  .sidebar-burger{display:flex}
  /* Add left padding on topbar so logo doesn't overlap burger */
  #mainScreen > .topbar{padding-left:60px}
  /* Сворачивание — только для десктопа */
  .sidebar-collapse-btn{display:none}
  .sidebar.collapsed{width:248px} /* отменяем на mobile, drawer сам по себе */
  .sidebar.collapsed .sidebar-brand-text{display:flex}
  .sidebar.collapsed .sidebar-item span{display:inline}
  .sidebar.collapsed .sidebar-group-label{visibility:visible;height:auto}
}

/* Toast */
.toast-stack{
  position:fixed;bottom:20px;right:20px;z-index:1000;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;
  box-shadow:var(--elev-3);
  opacity:0;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;max-width:380px;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-err{background:var(--coral);color:#fff}
@media (max-width:640px){
  .toast-stack{bottom:10px;right:10px;left:10px}
  .toast{max-width:none}
  .proj-grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE — для нового UI слоя (manual toggle + auto)
   ════════════════════════════════════════════════════════════════════ */

/* Tokens for dark theme */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --surface:#141417;
    --surface-2:#1c1c20;
    --surface-3:#23232a;
    --border-subtle:#26262e;
    --border-strong:#34343d;
    --ink:#f4f4f6;
    --ink-2:#9a9aa3;
    --ink-3:#5d5d68;
    --mint:#5dba8c;       --mint-soft:#11241f;
    --lavender:#a48de0;   --lavender-soft:#1f192e;
    --coral:#e58066;      --coral-soft:#2a1a17;
    --apricot:#e3a955;    --apricot-soft:#2a2218;
    --sky:#6fa8db;        --sky-soft:#101e29;
    --rose:#d27d96;       --rose-soft:#27181f;
    --elev-1: 0 1px 2px rgba(0,0,0,.4);
    --elev-2: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
    --elev-3: 0 2px 6px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.55);
    --elev-pop: 0 24px 80px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --surface:#141417;
  --surface-2:#1c1c20;
  --surface-3:#23232a;
  --border-subtle:#26262e;
  --border-strong:#34343d;
  --ink:#f4f4f6;
  --ink-2:#9a9aa3;
  --ink-3:#5d5d68;
  --mint:#5dba8c;       --mint-soft:#11241f;
  --lavender:#a48de0;   --lavender-soft:#1f192e;
  --coral:#e58066;      --coral-soft:#2a1a17;
  --apricot:#e3a955;    --apricot-soft:#2a2218;
  --sky:#6fa8db;        --sky-soft:#101e29;
  --rose:#d27d96;       --rose-soft:#27181f;
  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
  --elev-3: 0 2px 6px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.55);
  --elev-pop: 0 24px 80px rgba(0,0,0,.7);
  /* Legacy-токены — критично переопределить, иначе btn-outline-dark и куча мест
     наследуют светлые значения (--bg=#f0f3f8 = «засветка» при hover на тёмном). */
  --bg:#0b0b0d;
  --bg-muted:#1c1c20;
  --bg-soft:#1c1c20;
  --card:#141417;
  --text:#f4f4f6;
  --text-sec:#a8a8b0;
  --text-muted:#7a7a82;
  --border:#26262e;
  --accent:#5fa7d9;          /* light: #1172b6 был тусклым на тёмном фоне */
  --accent-soft:#1a2a3a;
  --danger:#f06868;
  --danger-soft:#2a1a17;
  --warn:#e8b85c;
  --warn-soft:#2a2218;
  --ok:#5dba8c;
  --ok-soft:#11241f;
  --info-soft:#1f192e;
}

/* Body bg in dark */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) body{background:#0b0b0d;color:var(--ink)}
}
:root[data-theme="dark"] body{background:#0b0b0d;color:var(--ink)}

/* Topbar in dark */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .topbar{
    background:rgba(20,20,23,.75);
    color:var(--ink);
    border-bottom-color:var(--border-subtle);
  }
  :root:not([data-theme]) .topbar h1{color:var(--ink)}
}
:root[data-theme="dark"] .topbar{
  background:rgba(20,20,23,.75);
  color:var(--ink);
  border-bottom-color:var(--border-subtle);
}
:root[data-theme="dark"] .topbar h1{color:var(--ink)}

/* Tabs in dark */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .tabs{background:rgba(11,11,13,.78);border-bottom-color:var(--border-subtle)}
  :root:not([data-theme]) .tab{color:var(--ink-2)}
  :root:not([data-theme]) .tab.active{color:var(--ink);background:var(--surface);border-bottom-color:var(--ink)}
}
:root[data-theme="dark"] .tabs{background:rgba(11,11,13,.78);border-bottom-color:var(--border-subtle)}
:root[data-theme="dark"] .tab{color:var(--ink-2)}
:root[data-theme="dark"] .tab.active{color:var(--ink);background:var(--surface);border-bottom-color:var(--ink)}

/* Sidebar in dark */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .sidebar{background:#101013;border-right-color:var(--border-subtle)}
  :root:not([data-theme]) .sidebar-burger{background:#1c1c20;border-color:var(--border-subtle);color:var(--ink)}
  :root:not([data-theme]) .sidebar-item.active::before{background:var(--ink)}
}
:root[data-theme="dark"] .sidebar{background:#101013;border-right-color:var(--border-subtle)}
:root[data-theme="dark"] .sidebar-burger{background:#1c1c20;border-color:var(--border-subtle);color:var(--ink)}
:root[data-theme="dark"] .sidebar-item.active::before{background:var(--ink)}

/* Cards / surfaces */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .card,
  :root:not([data-theme]) .proj-card,
  :root:not([data-theme]) .gantt-wrap,
  :root:not([data-theme]) .popup-card,
  :root:not([data-theme]) .notif-panel{
    background:var(--surface);border-color:var(--border-subtle);color:var(--ink);
  }
  :root:not([data-theme]) .proj-tz-table thead th{background:var(--surface-2);color:var(--ink-2)}
  :root:not([data-theme]) .proj-tz-table tbody tr:hover{background:var(--surface-2)}
  :root:not([data-theme]) input,
  :root:not([data-theme]) select,
  :root:not([data-theme]) textarea{background:var(--surface-2);border-color:var(--border-subtle);color:var(--ink)}
  :root:not([data-theme]) input:focus,
  :root:not([data-theme]) select:focus,
  :root:not([data-theme]) textarea:focus{background:var(--surface);border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(244,244,246,.06)}
  :root:not([data-theme]) .btn-accent{background:#fff;color:#0b0b0d}
  :root:not([data-theme]) .btn-accent:hover{background:#e6e6e6}
  :root:not([data-theme]) .btn-outline{background:var(--surface);color:var(--ink);border-color:var(--border-subtle)}
  :root:not([data-theme]) .btn-outline:hover{background:var(--surface-2)}
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .proj-card,
:root[data-theme="dark"] .gantt-wrap,
:root[data-theme="dark"] .popup-card,
:root[data-theme="dark"] .notif-panel{
  background:var(--surface);border-color:var(--border-subtle);color:var(--ink);
}
:root[data-theme="dark"] .proj-tz-table thead th{background:var(--surface-2);color:var(--ink-2)}
:root[data-theme="dark"] .proj-tz-table tbody tr:hover{background:var(--surface-2)}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:var(--surface-2);border-color:var(--border-subtle);color:var(--ink)}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus{background:var(--surface);border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(244,244,246,.06)}
:root[data-theme="dark"] .btn-accent{background:#fff;color:#0b0b0d}
:root[data-theme="dark"] .btn-accent:hover{background:#e6e6e6}
:root[data-theme="dark"] .btn-outline{background:var(--surface);color:var(--ink);border-color:var(--border-subtle)}
:root[data-theme="dark"] .btn-outline:hover{background:var(--surface-2)}
/* btn-outline-dark — раньше hover был светло-голубой (var(--bg)), теперь сurface-2 */
:root[data-theme="dark"] .btn-outline-dark{background:var(--surface);color:var(--ink);border-color:var(--border-subtle)}
:root[data-theme="dark"] .btn-outline-dark:hover{background:var(--surface-2);border-color:var(--ink-2);color:var(--ink)}
/* btn-accent в dark была белая → засветка. Делаем её приглушённо-светлой
   и при hover чуть темнее, без чисто-белого блика. */
:root[data-theme="dark"] .btn-accent{background:var(--ink);color:#0b0b0d}
:root[data-theme="dark"] .btn-accent:hover{background:#dcdce0;color:#0b0b0d}
/* btn-primary в dark — ассоциируется с .btn-accent поведением */
:root[data-theme="dark"] .btn-primary{background:var(--ink);color:#0b0b0d;border:none}
:root[data-theme="dark"] .btn-primary:hover{background:#dcdce0}
/* btn-cancel-sm и btn-cancel — серые приглушённые в dark */
:root[data-theme="dark"] .btn-cancel,
:root[data-theme="dark"] .btn-cancel-sm{background:var(--surface-2);color:var(--ink-2);border-color:var(--border-subtle)}
:root[data-theme="dark"] .btn-cancel:hover,
:root[data-theme="dark"] .btn-cancel-sm:hover{background:var(--surface-3);color:var(--ink)}

/* Light mode override (when user explicitly selected light) */
:root[data-theme="light"]{
  /* leaves default light tokens — no overrides needed */
}
:root[data-theme="light"] body{background:#faf9f6;color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   AI AGENT — chat (Apple-style)
   ════════════════════════════════════════════════════════════════════ */

.ai-warn{
  background:var(--apricot-soft);color:#8a5e0a;
  border:1px solid var(--apricot);border-radius:var(--r-md);
  padding:14px 18px;margin:0 0 14px;font-size:13px;
}
/* (Legacy .ai-intro/.ai-quick/.ai-msg-user/.ai-msg-bot/.ai-msg-bubble удалены
   2026-05-11 вместе со старой AI-вкладкой. Текущие AI-стили в .ai-drawer-*,
   .ai-tab-*, .dash-ai-mini-*.) */

/* Tool call indicator */
.ai-msg-tool{
  font-size:12px;color:var(--ink-2);
  background:var(--lavender-soft);border-radius:var(--r-sm);
  padding:6px 10px;margin:4px 0 4px;
  font-family:ui-monospace,monospace;
  display:flex;align-items:center;gap:8px;
}
.ai-tool-icon{font-size:14px}
.ai-msg-tool code{
  background:rgba(20,20,30,.05);padding:1px 5px;border-radius:4px;
  font-weight:600;color:var(--lavender);
}

/* Typing indicator */
.ai-typing{
  display:inline-flex;gap:3px;align-items:center;
}
.ai-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  animation:aiBounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiBounce{
  0%,80%,100%{transform:scale(0.6);opacity:.5}
  40%{transform:scale(1);opacity:1}
}

/* Make panelAi card flex column for chat */
#panelAi .card{display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:500px;padding:0;overflow:hidden}
#aiChat{
  flex:1;overflow-y:auto;padding:18px 20px;
  display:flex;flex-direction:column;
}
.ai-input-row{
  display:flex;gap:10px;padding:14px 16px;
  border-top:1px solid var(--border-subtle);
  background:var(--surface);
}
#aiPromptInput{
  flex:1;border-radius:var(--r-md);
  resize:none;font-size:14px;line-height:1.5;
  min-height:42px;max-height:160px;
}

/* ════════════════════════════════════════════════════════════════════
   AGGRESSIVE VISUAL POLISH — приведение всего портала к уровню preview
   ════════════════════════════════════════════════════════════════════ */

/* Headings везде — Apple-tight */
h1,h2,h3,h4{letter-spacing:-.015em;color:var(--ink)}
h1{font-weight:700}
h2{font-size:20px;font-weight:600}
h3{font-size:16px;font-weight:600}

/* Card универсальный паддинг + soft border */
.card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:22px 24px;
  box-shadow:var(--elev-1);
}

/* Schedule slots — Notion·Miro палитра */
.slot-status{
  border-radius:var(--r-md);
  border:1px solid var(--border-subtle);
  padding:11px 14px;font-size:13.5px;
  transition:all .15s ease, transform .08s ease;
  background:var(--surface);color:var(--ink);
}
.slot-status.free{background:var(--mint-soft);border-color:var(--mint);color:#1f6e48}
.slot-status.free.clickable:hover{
  background:var(--mint);color:#0d4830;
  transform:translateX(2px);
  box-shadow:var(--elev-1);
}
.slot-status.free.clickable::after{
  background:#1f6e48;color:#fff;border-radius:99px;
}
.slot-status.busy{background:var(--coral-soft);border-color:var(--coral);color:#a44432}
.slot-time{
  font-size:13px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.slot-now{border-left-color:var(--ink)}
.slot-now .slot-time{color:var(--ink)}
.slot-now-label{color:var(--ink)}

/* Schedule controls */
.schedule-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.schedule-controls select,
.schedule-controls input[type="date"]{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:8px 12px;font-size:13px;
}

/* Helpdesk page — pill-статусы и soft-table */
.hd-page,
.hd-toolbar,
.hd-stats,
.hd-filters{padding:0}
.hd-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.hd-stat{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:14px 18px;
  box-shadow:var(--elev-1);
}
.hd-stat-label{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.hd-stat-value{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-top:4px;line-height:1}

/* Generic table polish (TZ list, helpdesk, etc.) */
table{border-collapse:collapse;width:100%;font-size:13px}
table thead th{
  text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--border-subtle);
  font-weight:600;color:var(--ink-2);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-2);
}
table tbody td{
  padding:12px 16px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--ink);
}
table tbody tr:last-child td{border-bottom:none}
table tbody tr:hover{background:var(--surface-2)}

/* TZ list & status badges in new palette */
.tz-st-draft{background:var(--surface-3);color:var(--ink-2)}
.tz-st-analysis{background:var(--lavender-soft);color:#553f9c}
.tz-st-design{background:var(--sky-soft);color:#2c618d}
.tz-st-development{background:var(--mint-soft);color:#1f6e48}
.tz-st-testing{background:var(--apricot-soft);color:#8a5e0a}
.tz-st-release{background:var(--rose-soft);color:#a13b5e}
.tz-st-production{background:var(--mint-soft);color:#0d4830;font-weight:700}
.tz-prio-low{background:var(--surface-3);color:var(--ink-2)}
.tz-prio-medium{background:var(--apricot-soft);color:#8a5e0a}
.tz-prio-high{background:var(--coral-soft);color:#a44432}
.tz-prio-critical{background:var(--coral);color:#fff}

/* TZ stats — softer cards */
.tz-stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.tz-stat{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:14px 18px;
  box-shadow:var(--elev-1);
  cursor:pointer;transition:all .15s ease;
}
.tz-stat:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.tz-stat-label{font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.tz-stat-num{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1;margin-top:4px}

/* Kanban — softer cards & columns (visual polish only, layout остаётся в .kanban-card flex/prio-stripe) */
.kanban-board,.kanban-swimlane-board{gap:10px}
.kanban-column{
  background:var(--surface-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
}
.kanban-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  box-shadow:var(--elev-1);
  transition:box-shadow .12s ease,transform .12s ease,border-color .12s ease;
}
.kanban-card:hover{box-shadow:var(--elev-2);transform:translateY(-1px);border-color:var(--border-strong)}
.kanban-col-count{
  background:var(--surface-3);color:var(--ink-2);
  font-weight:600;font-size:11px;
  padding:2px 8px;border-radius:99px;
}

/* KB cards (categories) */
.kb-cat-card,.kb-category-card,.kb-category{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:18px;
  box-shadow:var(--elev-1);
  transition:all .2s ease;
}
.kb-cat-card:hover,.kb-category-card:hover,.kb-category:hover{
  border-color:var(--border-strong);
  transform:translateY(-1px);
  box-shadow:var(--elev-2);
}

/* KB articles list */
.kb-article-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:14px 16px;
  margin-bottom:8px;
  transition:all .15s ease;
}
.kb-article-card:hover{
  border-color:var(--border-strong);
  background:var(--surface-2);
}

/* Tasks page */
.task-board{gap:10px}
.task-column{
  background:var(--surface-2);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:14px;
}
.task-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:12px;
  box-shadow:var(--elev-1);
  transition:all .12s ease;
}
.task-card:hover{box-shadow:var(--elev-2);transform:translateY(-1px)}

/* Notif panel — refresh */
.notif-panel{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
  top:60px;
}
.notif-panel-header{border-bottom-color:var(--border-subtle);padding:16px 20px}
.notif-panel-header h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.notif-item{
  border-bottom-color:var(--border-subtle);
  padding:13px 20px;
}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{
  background:var(--mint-soft);
  border-left:3px solid var(--mint);
}
.notif-item-title{font-size:13px;font-weight:600;color:var(--ink)}
.notif-item-body{color:var(--ink-2);margin-top:3px}
.notif-item-time{color:var(--ink-3);margin-top:4px}

/* Topbar avatar — softer */
.topbar-user h1{font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.topbar-user .subtitle{font-size:11.5px;color:var(--ink-2);margin:0}
.topbar-icon{display:none}

/* Profile popup — premium feel */
.profile-popup-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-2xl);
  box-shadow:var(--elev-pop);
}
.profile-avatar{
  border:3px solid var(--surface-2);
  box-shadow:var(--elev-2);
}

/* Forms — softer */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:9px 12px;font-size:14px;
  color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}

/* Onboarding overlay */
.onboarding-overlay{background:rgba(20,20,30,.55);backdrop-filter:blur(8px)}
.onboarding-card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-2xl);
  box-shadow:var(--elev-pop);
}

/* Subtitle везде */
.auth-card .subtitle,
.subtitle{color:var(--ink-2);font-size:13px}

/* Clean up bell */
.notif-bell{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-md);width:36px;height:36px;padding:0;margin-right:0}
.notif-bell svg{color:var(--ink-2)}
.notif-bell:hover{background:var(--surface-2)}
.notif-bell:hover svg{color:var(--ink)}
.notif-badge{background:var(--coral);color:#fff;top:-2px;right:-2px;border:2px solid var(--surface)}

/* Booking reminder strip — softer */
.booking-reminder{
  background:var(--apricot-soft);color:#8a5e0a;
  border-bottom:1px solid var(--apricot);
  font-weight:500;
}

/* Stats / metrics cards */
.metrics-card,
.metrics-card-accent,
.metrics-card-success,
.metrics-card-danger,
.metrics-card-warn{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
}
.metrics-num{font-weight:700;letter-spacing:-.02em}

/* Buttons polish */
button{font-family:inherit}
.btn-primary,
.btn-accent{
  font-weight:600;letter-spacing:-.005em;
}

/* Tabs settings cog — softer */
.tab-settings-btn{
  border-radius:var(--r-md);
  border:1px solid var(--border-subtle);
  background:var(--surface);
  color:var(--ink-2);
}
.tab-settings-btn:hover{background:var(--surface-2);color:var(--ink)}

/* Helpdesk-related quick polish */
.hd-ticket-row{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:12px 16px;margin-bottom:8px;
  cursor:pointer;
  transition:all .15s ease;
}
.hd-ticket-row:hover{border-color:var(--border-strong);background:var(--surface-2)}

/* Status badges general (.status-new, .status-open, etc.) */
.status-new{background:var(--apricot-soft);color:#8a5e0a;font-weight:600}
.status-open{background:var(--lavender-soft);color:#553f9c;font-weight:600}
.status-in_progress{background:var(--mint-soft);color:#1f6e48;font-weight:600}
.status-closed{background:var(--surface-3);color:var(--ink-2);font-weight:600}
.status-resolved{background:var(--mint-soft);color:#1f6e48;font-weight:600}

/* Generic chip/tag */
.chip,
.tag,
[class*="-badge"]{
  border-radius:99px;font-size:11px;font-weight:600;
  padding:3px 9px;letter-spacing:-.005em;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — Главная страница (premium polish, Notion · Miro · Apple)
   ════════════════════════════════════════════════════════════════════ */

.dashboard{display:flex;flex-direction:column;gap:28px;padding:8px 4px 32px}

/* HERO */
.dash-hero{margin:6px 0 0}
.dash-hero h1{
  margin:0 0 6px;
  font-size:34px;font-weight:700;letter-spacing:-.022em;
  color:var(--ink);line-height:1.15;
}
.dash-hero .dash-sub{
  margin:0;color:var(--ink-2);font-size:15px;line-height:1.5;
}
.dash-hero .dash-sub b{color:var(--ink);font-weight:600}

/* AI CARD */
.dash-ai-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(135deg, var(--lavender-soft) 0%, var(--sky-soft) 100%);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);
  padding:18px 20px 16px;
}
.dash-ai-card::before{
  content:'';position:absolute;
  inset:-30px -40px auto auto;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, var(--lavender) 0%, transparent 70%);
  opacity:.55;pointer-events:none;
}
.dash-ai-header{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.dash-ai-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--surface);
  display:grid;place-items:center;
  color:var(--primary);
  box-shadow:var(--elev-2);
  flex-shrink:0;
}
.dash-ai-text{flex:1;min-width:0}
.dash-ai-text h3{
  margin:0 0 2px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink);
}
.dash-ai-text p{
  margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.4;
}
.dash-ai-expand{
  flex-shrink:0;background:transparent;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-2);transition:background .15s ease, color .15s ease;
}
.dash-ai-expand:hover{background:rgba(255,255,255,.6);color:var(--ink)}
[data-theme="dark"] .dash-ai-expand:hover{background:rgba(255,255,255,.08)}

.dash-ai-mini-chips{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:6px;
}
.dash-ai-mini-chip{
  background:rgba(255,255,255,.6);border:1px solid var(--border-subtle);
  padding:5px 10px;border-radius:99px;font:inherit;font-size:12px;font-weight:500;
  color:var(--ink-2);cursor:pointer;transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.dash-ai-mini-chip:hover{background:var(--surface);border-color:var(--lavender);color:var(--ink)}
[data-theme="dark"] .dash-ai-mini-chip{background:rgba(255,255,255,.06);color:#a5a8b3}
[data-theme="dark"] .dash-ai-mini-chip:hover{background:rgba(255,255,255,.1);color:#e8e9ed}

.dash-ai-mini-messages{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:8px;
  max-height:280px;overflow-y:auto;
  padding:4px 2px;
}
.dash-ai-mini-messages:empty{display:none}
.dash-ai-mini-messages::-webkit-scrollbar{width:5px}
.dash-ai-mini-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}

.dash-ai-mini-form{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;
  padding:6px 6px 6px 12px;
}
.dash-ai-mini-form:focus-within{border-color:var(--lavender);box-shadow:0 0 0 3px var(--lavender-soft)}
.dash-ai-mini-input{
  flex:1;border:none;background:transparent;outline:none;
  font:inherit;font-size:13px;color:var(--ink);
  padding:6px 2px;
  resize:none;max-height:120px;line-height:1.4;
}
.dash-ai-mini-input:disabled{opacity:.6}
.dash-ai-mini-send{
  width:30px;height:30px;border-radius:8px;border:none;
  background:linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s ease, opacity .12s ease;
}
.dash-ai-mini-send:hover{transform:translateY(-1px)}
.dash-ai-mini-send:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Buttons inside dashboard */
.dash-btn{
  display:inline-flex;align-items:center;gap:6px;
  border:none;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;letter-spacing:.005em;
  padding:9px 16px;border-radius:var(--r-md);
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  position:relative;z-index:1;
}
.dash-btn:active{transform:scale(.97)}
.dash-btn-primary{background:var(--ink);color:var(--surface);box-shadow:var(--elev-1)}
.dash-btn-primary:hover{box-shadow:var(--elev-2)}

/* KPI ROW */
.dash-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.dash-kpi-row.dash-kpi-skel > div{
  height:100px;background:var(--surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-lg);
  animation:dashSkel 1.2s ease-in-out infinite;
}
@keyframes dashSkel{0%,100%{opacity:1}50%{opacity:.6}}
.dash-kpi{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:18px 20px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-kpi:hover{transform:translateY(-1px);box-shadow:var(--elev-2);border-color:var(--border-strong)}
.dash-kpi-lbl{
  font-size:13px;color:var(--ink-2);font-weight:500;
  display:flex;align-items:center;gap:7px;margin-bottom:8px;
}
.dash-kpi-dot{
  width:8px;height:8px;border-radius:99px;display:inline-block;flex-shrink:0;
}
.dash-kpi-dot.mint{background:var(--mint)}
.dash-kpi-dot.lavender{background:var(--lavender)}
.dash-kpi-dot.coral{background:var(--coral)}
.dash-kpi-dot.apricot{background:var(--apricot)}
.dash-kpi-dot.sky{background:var(--sky)}
.dash-kpi-dot.rose{background:var(--rose)}
.dash-kpi-val{
  font-size:32px;font-weight:700;letter-spacing:-.022em;
  line-height:1;color:var(--ink);
  font-feature-settings:'tnum';
}
.dash-kpi-delta{font-size:12px;font-weight:600;margin-top:6px;color:var(--ink-2)}
.dash-kpi-delta.up{color:#2e7d50}
.dash-kpi-delta.down{color:#c5483a}

/* SECTION HEADS */
.dash-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 0 14px;
}
.dash-section-head h2{
  margin:0;font-size:18px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
}
.dash-section-link{
  border:none;background:transparent;cursor:pointer;font:inherit;
  font-size:13px;color:var(--ink-2);font-weight:500;
  padding:4px 8px;border-radius:6px;
  transition:color .15s, background .15s;
}
.dash-section-link:hover{color:var(--ink);background:var(--surface-2)}

/* PROJECT CARDS */
.dash-projects{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.dash-pcard{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:18px;
  cursor:pointer;text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-pcard:hover{
  transform:translateY(-2px);box-shadow:var(--elev-2);
  border-color:var(--border-strong);
}
.dash-pcard-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dash-pcard-emoji{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;font-size:18px;
  background:var(--mint-soft);
}
.dash-pcard-emoji.mint{background:var(--mint-soft)}
.dash-pcard-emoji.lavender{background:var(--lavender-soft)}
.dash-pcard-emoji.coral{background:var(--coral-soft)}
.dash-pcard-emoji.apricot{background:var(--apricot-soft)}
.dash-pcard-emoji.sky{background:var(--sky-soft)}
.dash-pcard-emoji.rose{background:var(--rose-soft)}
.dash-pcard-meta{flex:1;min-width:0}
.dash-pcard-ttl{
  font-weight:600;font-size:15px;letter-spacing:-.005em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-pcard-sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.dash-progress{
  height:6px;background:var(--surface-2);
  border-radius:99px;overflow:hidden;margin:14px 0 10px;
}
.dash-progress-bar{height:100%;border-radius:99px;background:var(--mint);transition:width .25s ease}
.dash-progress-bar.mint{background:var(--mint)}
.dash-progress-bar.lavender{background:var(--lavender)}
.dash-progress-bar.coral{background:var(--coral)}
.dash-progress-bar.apricot{background:var(--apricot)}
.dash-progress-bar.sky{background:var(--sky)}
.dash-progress-bar.rose{background:var(--rose)}
.dash-pcard-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--ink-2);
}
.dash-pct{font-weight:600;font-feature-settings:'tnum';color:var(--ink)}

/* AVATAR STACK */
.dash-stack{display:flex}
.dash-av{
  width:24px;height:24px;border-radius:50%;
  border:2px solid var(--surface);
  margin-left:-6px;font-size:10px;font-weight:700;color:#fff;
  display:grid;place-items:center;
  text-shadow:0 1px 1px rgba(0,0,0,.15);
}
.dash-av:first-child{margin-left:0}
.dash-av-sm{width:28px;height:28px;font-size:11px;border-width:0;margin-left:0}
.dash-av-more{
  background:var(--surface-2);color:var(--ink-2);
  text-shadow:none;
}

/* TZ LIST */
.dash-tz-list{display:flex;flex-direction:column;gap:8px}
.dash-tz-row{
  display:grid;grid-template-columns:64px 1fr auto auto auto;gap:14px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);padding:12px 16px;
  cursor:pointer;text-align:left;font:inherit;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.dash-tz-row:hover{
  border-color:var(--border-strong);
  background:var(--surface);
  transform:translateX(2px);
}
.dash-tz-code{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;color:var(--ink-2);font-weight:500;
}
.dash-tz-title{
  font-weight:500;font-size:14px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-tz-tags{display:flex;gap:6px;flex-shrink:0}
.dash-tag{
  font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:99px;letter-spacing:-.005em;
  white-space:nowrap;
}
.dash-tag.mint{background:var(--mint-soft);color:#1f6e48}
.dash-tag.lavender{background:var(--lavender-soft);color:#553f9c}
.dash-tag.coral{background:var(--coral-soft);color:#a44432}
.dash-tag.apricot{background:var(--apricot-soft);color:#8a5e0a}
.dash-tag.sky{background:var(--sky-soft);color:#2c618d}
.dash-tag.rose{background:var(--rose-soft);color:#933958}
.dash-tz-due{
  font-size:12px;color:var(--ink-2);min-width:80px;text-align:right;
  white-space:nowrap;font-feature-settings:'tnum';
}
.dash-tz-due.over{color:#c5483a;font-weight:600}

/* EMPTY STATES */
.dash-empty{
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;
  color:var(--ink-2);font-size:14px;
  grid-column:1/-1;
}
.dash-empty-btn{
  margin-left:8px;border:none;background:transparent;
  cursor:pointer;font:inherit;font-weight:600;
  color:var(--primary);text-decoration:underline;
  text-underline-offset:3px;
}

/* DARK MODE adjustments */
:root[data-theme="dark"] .dash-kpi-delta.up{color:#7fd1a3}
:root[data-theme="dark"] .dash-kpi-delta.down{color:#f08775}
:root[data-theme="dark"] .dash-tz-due.over{color:#f08775}
:root[data-theme="dark"] .dash-tag.mint{color:#a4e3c4}
:root[data-theme="dark"] .dash-tag.lavender{color:#c8b8f0}
:root[data-theme="dark"] .dash-tag.coral{color:#f4a08c}
:root[data-theme="dark"] .dash-tag.apricot{color:#f5c97a}
:root[data-theme="dark"] .dash-tag.sky{color:#92c4f0}
:root[data-theme="dark"] .dash-tag.rose{color:#e89eb6}
:root[data-theme="dark"] .dash-ai-icon{color:var(--accent)}

/* RESPONSIVE */
@media (max-width:1100px){
  .dash-projects{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .dash-hero h1{font-size:28px}
  .dash-kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash-projects{grid-template-columns:1fr}
  .dash-ai-card{padding:14px 16px}
  .dash-ai-header{gap:10px}
  .dash-ai-icon{width:38px;height:38px;border-radius:10px}
  .dash-tz-row{grid-template-columns:auto 1fr;gap:8px;padding:10px 12px}
  .dash-tz-tags,.dash-tz-due,.dash-tz-row > .dash-av{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — Quick actions + Гантт-preview
   ════════════════════════════════════════════════════════════════════ */

.dash-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:-8px;
}
.dash-action{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border-subtle);
  background:var(--surface);
  color:var(--ink);
  font:inherit;font-size:13px;font-weight:500;letter-spacing:-.005em;
  padding:8px 14px;border-radius:var(--r-md);
  cursor:pointer;
  transition:all .15s ease;
}
.dash-action svg{color:var(--ink-2);transition:color .15s ease}
.dash-action:hover{background:var(--surface-2);border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elev-1)}
.dash-action:hover svg{color:var(--primary)}
.dash-action:active{transform:scale(.97)}

/* Гантт-preview */
.dash-gantt-wrap{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:22px 24px;
  box-shadow:var(--elev-1);
}
.dash-gantt-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;gap:14px;
}
.dash-gantt-head h3{
  margin:0;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
}
.dash-gantt-sub{
  font-size:12px;color:var(--ink-2);margin-top:3px;
  font-feature-settings:'tnum';
}
.dash-gantt-grid{
  display:grid;grid-template-columns:200px 1fr;gap:0;
  padding-top:12px;border-top:1px solid var(--border-subtle);
}
.dash-gantt-tasks{display:flex;flex-direction:column;gap:6px;padding-right:14px}
.dash-gantt-task{
  height:30px;display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink);
}
.dash-gantt-dot{width:6px;height:6px;border-radius:99px;flex-shrink:0}
.dash-gantt-dot.mint{background:var(--mint)}
.dash-gantt-dot.lavender{background:var(--lavender)}
.dash-gantt-dot.coral{background:var(--coral)}
.dash-gantt-dot.apricot{background:var(--apricot)}
.dash-gantt-dot.sky{background:var(--sky)}
.dash-gantt-dot.rose{background:var(--rose)}
.dash-gantt-name{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-gantt-who{font-size:11px;color:var(--ink-2);font-weight:600}
.dash-gantt-bars{
  display:flex;flex-direction:column;gap:6px;
  border-left:1px solid var(--border-subtle);padding-left:0;
  background:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px) 0 0/calc(100%/8) 100%;
  position:relative;
}
.dash-gantt-row{height:30px;display:flex;align-items:center;position:relative}
.dash-gantt-bar{
  height:18px;border-radius:6px;
  position:relative;
  box-shadow:var(--elev-1);
}
.dash-gantt-bar.mint{background:var(--mint)}
.dash-gantt-bar.lavender{background:var(--lavender)}
.dash-gantt-bar.coral{background:var(--coral)}
.dash-gantt-bar.apricot{background:var(--apricot)}
.dash-gantt-bar.sky{background:var(--sky)}
.dash-gantt-bar.rose{background:var(--rose)}
.dash-gantt-pct{
  position:absolute;left:0;top:0;bottom:0;
  background:rgba(0,0,0,.16);border-radius:6px 0 0 6px;
}
@media (max-width:780px){
  .dash-gantt-grid{grid-template-columns:140px 1fr}
  .dash-gantt-task{font-size:12px}
}

/* ════════════════════════════════════════════════════════════════════
   PREMIUM POLISH — Helpdesk, Tasks, KB, Schedule, Links
   ════════════════════════════════════════════════════════════════════ */

/* === HELPDESK premium === */
.hd-stats-bar{gap:12px;margin-bottom:18px}
.hd-stat-mini{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:16px 18px;text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:none;
}
.hd-stat-mini:hover{
  transform:translateY(-1px);
  border-color:var(--border-strong);
  box-shadow:var(--elev-2);
}
.hd-stat-mini-num{
  font-size:30px;font-weight:700;letter-spacing:-.022em;
  font-feature-settings:'tnum';line-height:1;color:var(--ink);
}
.hd-stat-mini div:last-child{
  font-size:12px;color:var(--ink-2);font-weight:500;margin-top:8px;
}
.hd-num-new{color:var(--sky)!important}
.hd-num-breach{color:var(--coral)!important}
.hd-num-unassigned{color:var(--apricot)!important}
.hd-num-my{color:var(--lavender)!important}

.hd-tab-btn{
  background:var(--surface-2);
  border:none;color:var(--ink-2);
  border-radius:99px;font-weight:500;font-size:13px;
  padding:7px 14px;
  transition:all .15s ease;
}
.hd-tab-btn:hover{background:var(--surface-3);color:var(--ink)}
.hd-tab-btn.active{
  background:var(--ink);color:var(--surface);
  border-color:transparent;
}
.hd-tab-create{
  background:var(--mint-soft)!important;color:#1f6e48!important;
  border:none!important;font-weight:600;
}
.hd-tab-create:hover{background:var(--mint)!important;color:#0e3b27!important}

.hd-ticket-row{
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:12px 14px;
  transition:all .12s ease;
  box-shadow:none;
}
.hd-ticket-row:hover{
  border-color:var(--border-strong);
  box-shadow:var(--elev-1);
  transform:translateX(2px);
}
.hd-ticket-row.sla-breached{border-left:3px solid var(--coral)}
.hd-ticket-num{color:var(--ink);font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.hd-ticket-subject{color:var(--ink);font-weight:500}
.hd-ticket-queue,.hd-ticket-assignee,.hd-ticket-date{color:var(--ink-2)}

.hd-badge{
  font-size:11px;font-weight:600;letter-spacing:-.005em;
  padding:3px 9px;border-radius:99px;line-height:1.45;
}

.hd-queue-pick{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-lg)!important;
  background:var(--surface)!important;
  box-shadow:none;
}
.hd-queue-pick:hover{
  border-color:var(--border-strong)!important;
  transform:translateY(-2px);
  box-shadow:var(--elev-2)!important;
}

.hd-input{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-md)!important;
  background:var(--surface)!important;
  font-size:14px;padding:9px 12px;
  transition:border-color .15s, background .15s;
}
.hd-input:focus{
  border-color:var(--ink-2)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}

.hd-stat-card{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-lg)!important;
  background:var(--surface)!important;
  padding:18px 20px;text-align:left;
}
.hd-stat-num{
  font-size:32px;font-weight:700;letter-spacing:-.022em;
  font-feature-settings:'tnum';color:var(--ink);
}

/* === TASKS premium === */
.task-card{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-md)!important;
  background:var(--surface)!important;
  padding:12px 14px 12px 18px!important;
  transition:all .12s ease!important;
  box-shadow:none!important;
}
.task-card:hover{
  border-color:var(--border-strong)!important;
  box-shadow:var(--elev-1)!important;
  transform:translateY(-1px)!important;
}
.task-card-title{
  font-size:14px!important;font-weight:500!important;
  color:var(--ink)!important;letter-spacing:-.005em;
}
.task-card-meta{font-size:11px!important;color:var(--ink-2)!important;gap:8px!important}
.task-prio-high .task-card-prio{background:var(--coral)!important}
.task-prio-low .task-card-prio{background:var(--mint)!important}
.task-prio-medium .task-card-prio{background:var(--sky)!important}

/* === KB premium === */
.kb-categories-grid{gap:14px!important}
.kb-article-card{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-lg)!important;
  background:var(--surface)!important;
  padding:18px 20px!important;
  box-shadow:none!important;
  transition:all .15s ease!important;
}
.kb-article-card:hover{
  border-color:var(--border-strong)!important;
  box-shadow:var(--elev-2)!important;
  transform:translateY(-2px);
}
.kb-article-card-title{
  font-size:15px!important;font-weight:600!important;
  color:var(--ink)!important;letter-spacing:-.005em;
}
.kb-article-card-meta{font-size:12px!important;color:var(--ink-2)!important;margin-top:6px}

/* === LINKS premium === */
.links-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
  gap:12px!important;
}
.links-grid > a,
.links-grid > .link-item{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink);
  transition:all .15s ease;
}
.links-grid > a:hover,
.links-grid > .link-item:hover{
  border-color:var(--border-strong);
  box-shadow:var(--elev-2);
  transform:translateY(-2px);
}

/* === Universal premium typography for panels === */
.content > .panel.active > .card{
  border:1px solid var(--border-subtle)!important;
  border-radius:var(--r-lg)!important;
  background:var(--surface)!important;
  box-shadow:var(--elev-1)!important;
}
.content > .panel.active h2,
.content > .panel.active h3{
  letter-spacing:-.012em;
}

/* Pretty filter selects across panels */
.hd-filters select,
select.tz-filter,
select.task-filter{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  font-size:13px;padding:7px 12px;
  color:var(--ink);
  transition:border-color .15s;
}

/* Premium scroll bars on long lists */
.tz-list::-webkit-scrollbar,
.hd-ticket-list::-webkit-scrollbar,
.dash-tz-list::-webkit-scrollbar{width:8px}
.tz-list::-webkit-scrollbar-thumb,
.hd-ticket-list::-webkit-scrollbar-thumb,
.dash-tz-list::-webkit-scrollbar-thumb{
  background:var(--border-strong);border-radius:99px;
}

/* ════════════════════════════════════════════════════════════════════
   MS Project-style Gantt
   ════════════════════════════════════════════════════════════════════ */

.msp-wrap{
  /* CSS-vars для resizable колонок и панели */
  --col-num:42px;
  --col-title:340px;
  --col-status:108px;
  --col-priority:56px;
  --col-start:80px;
  --col-end:80px;
  --col-days:36px;
  --col-hours:48px;
  --col-cost:96px;
  --col-act-start:100px;
  --col-act-end:100px;
  --col-act-prog:70px;
  --table-w:600px;
  background:var(--surface);
}
/* На небольших экранах левая панель Гантт-таблицы сужается, освобождая место чарту */
@media(max-width:1280px){.msp-root{--table-w:480px}}
@media(max-width:1024px){.msp-root{--table-w:360px}}
@media(max-width:768px){.msp-root{--table-w:240px}}
@media(max-width:480px){.msp-root{--table-w:160px}}

/* Toolbar — компактная, без обводки */
.msp-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid var(--border-subtle);
  background:var(--surface);
  gap:12px;flex-wrap:wrap;
}
.msp-meta{display:flex;align-items:center;gap:10px}
.msp-meta-text{color:var(--ink-2);font-size:12px;font-feature-settings:'tnum'}
.msp-meta-hint{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  font-size:11px;font-weight:700;cursor:help;
}
.msp-meta-hint:hover{background:var(--accent);color:#fff}
.msp-tag{
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-2);
}
.msp-tag-imported{background:var(--mint-soft);color:#1f6e48}
.msp-tools{display:flex;gap:8px}

/* Header row (table head + chart head) */
.msp-head-row{
  display:flex;
  background:var(--surface-2);
  border-bottom:1px solid var(--border-strong);
  height:32px;
  position:sticky;top:0;z-index:5;
}
.msp-th-table{
  display:flex;align-items:stretch;
  flex-shrink:0;width:var(--table-w);
}
.msp-th-table .msp-c{
  font-size:11px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em;
  position:relative;  /* anchor для resizer'a */
}
.msp-th-chart{
  flex:1;overflow-x:auto;overflow-y:hidden;
  position:relative;
  scrollbar-width:none;
}
.msp-th-chart::-webkit-scrollbar{display:none}

/* Vertical divider между таблицей и Гантт-областью (drag → resize table-w) */
.msp-pane-divider{
  flex-shrink:0;width:6px;
  background:var(--border-strong);
  cursor:col-resize;
  position:relative;
  transition:background .12s ease;
}
.msp-pane-divider:hover,
.msp-pane-divider.dragging{
  background:var(--accent);
}
.msp-pane-divider::after{
  content:'';position:absolute;left:1px;right:1px;top:50%;
  width:2px;height:20px;transform:translateY(-50%);
  background:rgba(255,255,255,.5);border-radius:1px;
  pointer-events:none;
}

/* Body row — это контейнер; вертикальный скролл и горизонтальный внутри
   tb-chart, чтобы scrollbar всегда был у нижнего края видимой области. */
.msp-body-row{
  display:flex;
  height:calc(100vh - 200px);
  min-height:520px;
  overflow:hidden;
}
/* На небольших экранах не съедаем половину viewport на toolbar+header,
   и снижаем min-height. На мобильных — пускаем нативный скролл всей зоны. */
@media(max-width:1024px){
  .msp-body-row{height:calc(100vh - 160px);min-height:400px}
}
@media(max-width:768px){
  .msp-body-row{height:auto;min-height:340px;overflow:visible}
}
.msp-tb-table{
  flex-shrink:0;width:var(--table-w);
  overflow-y:auto;overflow-x:hidden;
  background:var(--surface);
  scrollbar-width:none; /* скрыть scrollbar — sync с tb-chart */
}
.msp-tb-table::-webkit-scrollbar{display:none}
.msp-tb-chart{
  flex:1;
  min-width:0; /* критично для flex item с overflow */
  overflow-x:scroll; /* всегда показывать горизонтальный scrollbar */
  overflow-y:auto;
  background:var(--surface);
}

/* Cells */
.msp-c{
  padding:0 8px;height:100%;
  display:flex;align-items:center;
  font-size:13px;color:var(--ink);
  border-right:1px solid var(--border-subtle);
  min-width:0;
  position:relative;
}
.msp-c:last-child{border-right:none}
.msp-c-num{
  width:var(--col-num);flex-shrink:0;
  font-feature-settings:'tnum';
  justify-content:flex-end;
  color:var(--ink-2);
}
.msp-tb-table .msp-c-num{
  /* В body-строках №-столбец служит расширенной зоной захвата для row-drag.
     Hover показывает grab cursor и лёгкую заливку, как в MS Project. */
  cursor:grab;user-select:none;
  transition:background .1s ease;
}
.msp-tb-table .msp-c-num:hover{
  background:color-mix(in srgb,var(--accent,#1172b6) 8%,transparent);
}
.msp-tb-table .msp-c-num:active{cursor:grabbing}
.msp-tr-summary .msp-c-num{cursor:grab}
.msp-tr.msp-row-dragging .msp-c-num{background:transparent}
/* Title — ГИБКАЯ колонка (Excel/MS-Project): flex-basis = --col-title, но
 * сжимается, чтобы Статус/Старт/Конец оставались видны при сужении таблицы
 * дивайдером. Раньше width+flex-shrink:0 делали её жёсткой → правые колонки
 * (и даже Статус) уезжали ЗА дивайдер при сдвиге влево. */
.msp-c-title{flex:1 1 var(--col-title);min-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;position:relative}
/* Перенос длинных названий (mspWrapToggle) — удобно для презентаций/встреч.
 * Снимаем nowrap И на ячейке, И на input внутри. Высота строки растёт сама. */
.msp-wrap.msp-wrap-titles-on .msp-c-title{white-space:normal;text-overflow:clip;overflow:visible;align-items:flex-start;padding-top:6px;padding-bottom:6px;line-height:1.35}
.msp-wrap.msp-wrap-titles-on .msp-c-title .msp-input{white-space:normal;height:auto;min-height:28px;padding-top:4px;padding-bottom:4px;line-height:1.35;word-break:break-word}
.msp-wrap.msp-wrap-titles-on .msp-tr{align-items:stretch}
/* Соответствующая высота для рядов на чарте — иначе бары визуально расходятся с таблицей.
 * Высота не задаётся жёстко (JS не контролирует), полагаемся на align-items:stretch. */
.msp-c-status{width:var(--col-status);flex-shrink:0;color:var(--ink)}
.msp-c-priority{width:var(--col-priority);flex-shrink:0;color:var(--ink-2)}
.msp-c-start{width:var(--col-start);flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2)}
.msp-c-end{width:var(--col-end);flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2)}
/* #4: даты скрыты по умолчанию — больше места под Title. Toggle в toolbar */
.msp-wrap.msp-dates-hidden .msp-c-start,
.msp-wrap.msp-dates-hidden .msp-c-end{display:none}
.msp-c-days{width:var(--col-days);flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2);justify-content:flex-end}
.msp-c-hours{width:var(--col-hours);flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2);justify-content:flex-end}
.msp-c-cost{width:var(--col-cost);flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2);justify-content:flex-end;white-space:nowrap}
.msp-wrap.msp-cost-hidden .msp-c-cost{display:none}
.msp-cost-val{font-weight:500;color:var(--ink-1)}
.msp-cost-val.is-over{color:var(--coral,#ef4444);font-weight:600}
.msp-cost-val.is-under{color:var(--mint,#10b981)}

/* Tracking (Спринт A3): колонки факт. дат + прогресс + actual-bar */
.msp-c-act-start,.msp-c-act-end{width:80px;flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2)}
.msp-c-act-prog{width:54px;flex-shrink:0;font-feature-settings:'tnum';color:var(--ink-2);justify-content:flex-end}
.msp-wrap.msp-track-hidden .msp-c-act-start,
.msp-wrap.msp-track-hidden .msp-c-act-end,
.msp-wrap.msp-track-hidden .msp-c-act-prog{display:none}
.msp-wrap.msp-track-hidden .msp-actual{display:none}
/* Actual-bar — тонкая полоска поверх плана. Position: bottom 2px от строки. */
.msp-actual{
  position:absolute;height:5px;
  top:calc(50% + 10px);transform:translateY(-50%);
  background:var(--mint,#10b981);border-radius:2px;
  z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.05);
  overflow:hidden;
}
.msp-actual.is-late{background:var(--coral,#ef4444)}
.msp-actual.is-early{background:#3b82f6}
.msp-actual.is-open{background:repeating-linear-gradient(90deg, var(--mint,#10b981), var(--mint,#10b981) 6px, rgba(16,185,129,.45) 6px, rgba(16,185,129,.45) 12px)}
.msp-actual-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:rgba(255,255,255,.35);
}

/* #5: Resizer как в Excel/MSP — широкая зона захвата, полная высота, тонкая линия */
.msp-resizer{
  position:absolute;right:-5px;top:0;bottom:0;width:10px;
  cursor:col-resize;z-index:6;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease;
}
.msp-resizer::before{
  content:'';display:block;width:1px;height:50%;
  background:var(--border-strong);
  transition:background .12s ease, width .12s ease, height .12s ease;
}
.msp-resizer:hover::before,
.msp-resizer.dragging::before{
  background:var(--accent);width:2px;height:100%;
}
/* Body-визуализация ресайза: вертикальная линия по всему графику */
.msp-resize-ghost{
  position:fixed;top:0;bottom:0;width:1px;
  background:var(--accent);box-shadow:0 0 6px rgba(17,114,182,.5);
  pointer-events:none;z-index:9999;
}

/* Table rows — компактнее, тоньше границы */
.msp-tr{
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--border-subtle);
  transition:background .12s ease;
  cursor:default;
}
.msp-tr:hover,.msp-tr.msp-row-hover-paired{background:var(--surface-2)}
.msp-cr.msp-row-hover-paired{background:var(--surface-2)}

/* Out-of-range маркеры для задач за project-периодом (см. логику date range
 * в renderMsProjectGantt). Левый/правый край ряда — ◀/▶ с подсказкой. */
.msp-bar-outside{
  position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#a83a2b;background:rgba(220,80,60,.10);
  border:1px dashed rgba(220,80,60,.45);border-radius:4px;cursor:help;
}
.msp-bar-outside-left{left:4px}
.msp-bar-outside-right{right:4px}
/* Бар, у которого один из концов обрезан Гантт-периодом — пунктирная грань. */
.msp-bar-clip-l{border-left:2px dashed rgba(220,80,60,.65)}
.msp-bar-clip-r{border-right:2px dashed rgba(220,80,60,.65)}

/* Row selection (MS Project / Excel style): подсветка выбранной строки в таблице
   и соответствующего ряда в чарте. Левый bar — accent-индикатор. Активна до Esc
   или клика на другую строку. */
.msp-tr.msp-row-selected{
  background:rgba(99,102,241,0.10);
  box-shadow:inset 3px 0 0 var(--brand,#6366f1);
}
.msp-tr.msp-row-selected:hover{background:rgba(99,102,241,0.14)}
.msp-cr.msp-row-selected{background:rgba(99,102,241,0.06)}
:root[data-theme="dark"] .msp-tr.msp-row-selected{background:rgba(129,140,248,0.14)}
:root[data-theme="dark"] .msp-tr.msp-row-selected:hover{background:rgba(129,140,248,0.20)}
:root[data-theme="dark"] .msp-cr.msp-row-selected{background:rgba(129,140,248,0.08)}
/* Если выбран summary — keep accent bar но без фонового перекраса (summary имеет свой фон) */
.msp-tr.msp-tr-summary.msp-row-selected{background:rgba(99,102,241,0.10)}

/* Body cells: тоньше правые разделители */
.msp-tb-table .msp-c{
  border-right:1px solid var(--border-subtle);
}

/* Inline-редактируемые ячейки (Excel-стиль) */
.msp-c:has(.msp-input){padding:0}
.msp-input{
  width:100%;height:100%;
  border:none;background:transparent;
  font:inherit;color:inherit;
  padding:0 8px;outline:none;
  font-feature-settings:'tnum';
  cursor:text;
  box-sizing:border-box;
}
.msp-input-num{text-align:right;cursor:text;padding:0 6px}
.msp-input-date{cursor:text;font-size:12px;padding:0 4px}
/* Скрываем нативную календарь-иконку chrome — экономит ~20px на колонке даты,
 * datepicker всё равно открывается по клику на поле */
.msp-input-date::-webkit-calendar-picker-indicator{
  display:none;-webkit-appearance:none;
}
.msp-input-date::-webkit-inner-spin-button{display:none}
/* Селекты Status/Priority — компактные, без нативной стрелки на ширине */
.msp-select{
  width:100%;height:100%;
  border:none;background:transparent;
  font:inherit;color:inherit;
  padding:0 4px 0 6px;outline:none;
  cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  text-overflow:ellipsis;
  font-size:12px;
}
.msp-select:hover{background:rgba(0,0,0,.025)}
.msp-select:focus{
  background:#fff;outline:1.5px solid var(--accent);outline-offset:-1.5px;z-index:3;position:relative;
}
:root[data-theme="dark"] .msp-select:hover{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .msp-select:focus{background:var(--surface-3)}
.msp-input:hover{background:rgba(0,0,0,.025)}
.msp-input:focus{
  background:#fff;
  outline:1.5px solid var(--accent);
  outline-offset:-1.5px;
  z-index:3;position:relative;
}
:root[data-theme="dark"] .msp-input:hover{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .msp-input:focus{background:var(--surface-3)}

/* Title в readonly-режиме (default) — не показывает focus-border при кликах,
   ведёт себя как обычный текст. Двойной клик активирует — тогда focus стиль
   нормальный. Cursor=text заменён на default, чтобы не путал. */
.msp-input-title[readonly]{
  cursor:default;
  user-select:none;
}
.msp-input-title[readonly]:hover{background:transparent}
.msp-input-title[readonly]:focus{
  background:transparent;outline:none;
}
.msp-c-title:hover .msp-input-title[readonly]{
  background:rgba(0,0,0,.02);
}
:root[data-theme="dark"] .msp-c-title:hover .msp-input-title[readonly]{
  background:rgba(255,255,255,.03);
}
/* Подсказка двойного клика — лёгкий border-bottom при hover на ячейке */
.msp-c-title:hover .msp-input-title[readonly]:not(.msp-input-summary){
  border-bottom:1px dashed transparent;
}

/* Кнопка удаления строки — на правом крае при hover */
/* Колонка действий — фикс. ширина в шапке и в строках, кнопки info/delete */
.msp-c-actions{
  width:54px;flex-shrink:0;
  padding:0 4px;justify-content:flex-end;gap:2px;
  border-right:none!important;
}
.msp-row-del,
.msp-row-info{
  width:22px;height:22px;border-radius:6px;
  border:none;background:transparent;cursor:pointer;
  font-size:16px;font-weight:600;line-height:1;
  color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
  opacity:.45;transition:opacity .12s ease, background .12s ease, color .12s ease;
  flex-shrink:0;padding:0;
}
.msp-tr{position:relative}
.msp-tr:hover .msp-row-del,
.msp-tr:hover .msp-row-info{opacity:.85}
.msp-row-del:hover{opacity:1!important;background:var(--coral-soft);color:var(--coral)}
.msp-row-info:hover{opacity:1!important;background:var(--accent-soft);color:var(--accent)}
@media(pointer:coarse){
  .msp-row-del,.msp-row-info{opacity:.85}
}

/* Task details modal (Спринт A4+A5) */
.msp-task-details-card{padding:24px}
.msp-td-section{
  border-top:1px solid var(--border-subtle);
  padding-top:14px;margin-top:14px;
}
.msp-td-section:first-of-type{border-top:none;padding-top:0;margin-top:6px}
.msp-td-section h4{margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.msp-td-hint{font-size:11.5px;color:var(--ink-3);margin:0 0 8px;line-height:1.4}
.msp-td-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.msp-td-field{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-2);min-width:140px}
.msp-td-field span{font-weight:500}
.msp-td-field input,
.msp-td-field select,
.msp-td-row select,
.msp-td-row input[type="number"],
.msp-td-row input[type="date"]{
  padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  font-size:13px;background:var(--surface);color:var(--ink);font-family:inherit;
}
.msp-td-field input:focus,
.msp-td-field select:focus,
.msp-td-row select:focus,
.msp-td-row input:focus{outline:none;border-color:var(--accent)}
.msp-pred-row{
  display:grid;grid-template-columns:1fr 90px 70px 28px 28px;gap:6px;align-items:center;
  padding:6px 8px;background:var(--surface-2);border-radius:6px;margin-bottom:4px;
}
.msp-pred-name{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msp-pred-type,
.msp-pred-lag{
  padding:4px 6px;border:1px solid var(--border);border-radius:5px;
  font-size:12.5px;background:var(--surface);color:var(--ink);font-feature-settings:'tnum';
}
.msp-pred-lag-lbl{font-size:11px;color:var(--ink-3)}
.msp-pred-del{
  width:24px;height:24px;border-radius:5px;border:none;background:transparent;cursor:pointer;
  color:var(--ink-3);font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.msp-pred-del:hover{background:var(--coral-soft);color:var(--coral)}

/* В колонке "Задача" — input берёт оставшееся место рядом с chevron/indent-кнопками */
.msp-c-title{display:flex;align-items:center;gap:0}
.msp-c-title .msp-input{flex:1;min-width:0;width:auto}

/* Иерархия (parent_id) — chevron + WBS + indent кнопки */
.msp-tree-chevron{
  flex-shrink:0;
  width:18px;height:18px;
  margin-right:4px;
  border:none;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:11px;
  border-radius:4px;transition:background .12s ease, transform .12s ease, color .12s ease;
  padding:0;
}
.msp-tree-chevron:hover{background:var(--surface-2);color:var(--accent)}
.msp-tree-chevron.collapsed{transform:rotate(-90deg)}
.msp-tree-spacer{
  flex-shrink:0;
  display:inline-block;width:18px;height:18px;margin-right:4px;
}
/* Summary-задача: жирный, тёплый фон, недоступна для прямого редактирования дат/часов */
.msp-tr-summary{background:linear-gradient(0deg,rgba(0,0,0,.015),rgba(0,0,0,.015))}
:root[data-theme="dark"] .msp-tr-summary{background:rgba(255,255,255,.025)}
.msp-tr-summary .msp-input{cursor:default}
.msp-tr-summary .msp-input-summary{font-weight:700;color:var(--ink)}
.msp-tr-summary .msp-c-status select,
.msp-tr-summary .msp-c-priority select,
.msp-tr-summary .msp-c-start input,
.msp-tr-summary .msp-c-end input,
.msp-tr-summary .msp-c-hours input{
  pointer-events:none;opacity:.65;
}
/* Кнопки indent/outdent — мелкие, появляются на hover строки */
.msp-row-action{
  flex-shrink:0;
  width:20px;height:20px;
  border:1px solid transparent;border-radius:5px;
  background:transparent;cursor:pointer;
  font-size:13px;line-height:1;color:var(--ink-3);
  margin-left:2px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.msp-tr:hover .msp-row-action{opacity:.6}
.msp-row-action:hover{opacity:1!important;background:var(--surface-2);color:var(--accent);border-color:var(--border-subtle)}
.msp-row-action:disabled{opacity:.2!important;cursor:not-allowed;pointer-events:none}

/* Summary-bar на чарте: чёрная тонкая полоса с угловыми «крылышками», вместо обычного бара */
.msp-cr-summary{pointer-events:auto}
.msp-summary-bar{
  position:absolute;top:50%;transform:translateY(-50%);
  height:18px;display:flex;align-items:center;
  pointer-events:none;
}
.msp-summary-line{
  flex:1;height:6px;background:var(--ink);
  border-radius:1px;
}
.msp-summary-cap{
  width:6px;height:12px;background:var(--ink);
  flex-shrink:0;
}
.msp-summary-cap-l{clip-path:polygon(0 0, 100% 0, 100% 100%);border-radius:1px 0 0 0}
.msp-summary-cap-r{clip-path:polygon(0 0, 100% 0, 0 100%);border-radius:0 1px 0 0}
.msp-summary-label{
  position:absolute;left:0;right:0;top:-14px;
  font-size:10px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
:root[data-theme="dark"] .msp-summary-line,
:root[data-theme="dark"] .msp-summary-cap{background:var(--ink)}

/* Строка «+ Добавить задачу» */
.msp-tr-add{
  position:sticky;bottom:0;z-index:6;
  height:36px;display:flex;align-items:center;
  cursor:pointer;color:var(--accent);font-weight:600;
  background:var(--surface);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 -4px 12px -4px rgba(0,0,0,.08);
  transition:background .12s ease,color .12s ease;
}
.msp-tr-add:hover{background:var(--accent-soft);color:var(--accent)}
:root[data-theme="dark"] .msp-tr-add{box-shadow:0 -4px 14px -4px rgba(0,0,0,.4)}
.msp-add-cell{padding:0 12px;font-size:13px;font-weight:600;width:100%;letter-spacing:-.005em}

/* Бар: drag-cursor + ручки resize по краям */
.msp-bar{cursor:grab;touch-action:none}
.msp-bar.dragging{cursor:grabbing;opacity:.7;z-index:7}
.msp-summary-bar{touch-action:none}
.msp-bar-resize-l,.msp-bar-resize-r{
  position:absolute;top:0;bottom:0;width:6px;
  cursor:col-resize;z-index:3;
  touch-action:none;
}
.msp-bar-resize-l{left:-2px}
.msp-bar-resize-r{right:-2px}
.msp-bar-resize-l:hover,.msp-bar-resize-r:hover{
  background:rgba(0,0,0,.18);
}
/* Drag-to-link (B1): кружок у правого края бара (сосед бара в строке .msp-cr) —
   тянем к другой задаче, создаём связь Finish→Start. */
.msp-bar-link{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--accent,#1172b6);border:2px solid var(--surface,#fff);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  cursor:crosshair;opacity:0;z-index:6;touch-action:none;
  transition:opacity .12s ease, transform .12s ease;
}
.msp-cr:hover .msp-bar-link{opacity:.9}
.msp-bar-link:hover{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
.msp-link-drag{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:30}
.msp-link-drag-line{stroke:var(--accent,#1172b6);stroke-width:2;stroke-dasharray:5 3;fill:none}
.msp-bar.msp-link-target{outline:2px solid var(--accent,#1172b6);outline-offset:1px;filter:brightness(1.06)}
/* Touch: увеличиваем hit-area resize-handles на coarse-pointer */
@media (pointer: coarse) {
  .msp-bar-resize-l,.msp-bar-resize-r{width:14px}
  .msp-bar-resize-l{left:-4px}
  .msp-bar-resize-r{right:-4px}
  /* Show тонкую визуальную полоску чтобы было понятно где грипы */
  .msp-bar-resize-l::after,.msp-bar-resize-r::after{
    content:'';position:absolute;top:25%;bottom:25%;
    left:50%;width:2px;margin-left:-1px;
    background:rgba(255,255,255,.7);border-radius:1px;
  }
}

/* Touch context menu (long-press) */
.msp-touch-menu{
  position:fixed;z-index:1000;
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md);box-shadow:var(--elev-pop);
  padding:6px;min-width:180px;
  display:flex;flex-direction:column;gap:2px;
}
.msp-touch-menu button{
  display:block;width:100%;text-align:left;
  background:transparent;border:none;font:inherit;
  padding:10px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;color:var(--ink);
}
.msp-touch-menu button:hover,.msp-touch-menu button:active{background:var(--surface-2)}
.msp-touch-menu button.danger{color:var(--danger)}
.msp-touch-menu button.danger:hover{background:var(--coral, #ffe0e6)}

/* B3: панель массовых действий над выделенными строками. */
.msp-bulk-bar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border-subtle);
  box-shadow:var(--elev-pop,0 8px 24px rgba(0,0,0,.18));
}
.msp-bulk-count{font-size:13px;font-weight:600;color:var(--ink);margin-right:2px;white-space:nowrap}
.msp-bulk-select{font:inherit;font-size:12px;padding:5px 8px;border-radius:6px;border:1px solid var(--border-subtle);background:var(--surface);color:var(--ink)}
.msp-bulk-bar .danger{color:var(--danger)}

/* Hint при drag — slim guide */
.msp-bar.dragging::after{
  content:'';position:absolute;top:-4px;bottom:-4px;left:0;right:0;
  border:1.5px dashed var(--accent);border-radius:6px;
  pointer-events:none;
}

/* Drag handle для строк */
.msp-row-handle{
  flex-shrink:0;
  width:18px;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:10px;letter-spacing:-2px;
  cursor:grab;
  opacity:0;transition:opacity .12s ease, color .12s ease, background .12s ease;
  user-select:none;
}
.msp-tr:hover .msp-row-handle{opacity:.6}
.msp-row-handle:hover{opacity:1!important;color:var(--accent);background:var(--surface-2)}
.msp-row-handle:active{cursor:grabbing}
.msp-row-handle-head{opacity:0;cursor:default}

.msp-row-dragging{opacity:.4}
.msp-row-drop-above{border-top:2px solid var(--accent)!important}
.msp-row-drop-below{border-bottom:2px solid var(--accent)!important}

/* Cell hover (Excel-стиль) — лёгкая подсветка всей ячейки */
.msp-tb-table .msp-c:hover{background:rgba(17,114,182,.04)}
:root[data-theme="dark"] .msp-tb-table .msp-c:hover{background:rgba(125,179,232,.06)}

/* Date input — pointer cursor (показывает что откроется picker) */
.msp-input-date{cursor:pointer!important}
.msp-input-date::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.5;padding:0 2px;
  filter:invert(.4);
}
:root[data-theme="dark"] .msp-input-date::-webkit-calendar-picker-indicator{filter:invert(.7)}

/* Числовое поле — убираем нативные стрелки (некрасивые) */
.msp-input-num{appearance:textfield;-moz-appearance:textfield}
.msp-input-num::-webkit-inner-spin-button,
.msp-input-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Inline select для Статус / Приоритет */
.msp-c:has(.msp-select){padding:0}
.msp-select{
  width:100%;height:100%;
  border:none;background:transparent;
  font:inherit;color:inherit;
  padding:0 8px;outline:none;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;font-size:12px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;
  background-size:5px 5px;background-repeat:no-repeat;
  padding-right:22px;text-overflow:ellipsis;
}
.msp-select:hover{background-color:rgba(0,0,0,.025)}
.msp-select:focus{
  background-color:#fff;
  outline:1.5px solid var(--accent);outline-offset:-1.5px;
  z-index:3;position:relative;
}
:root[data-theme="dark"] .msp-select:hover{background-color:rgba(255,255,255,.04)}
:root[data-theme="dark"] .msp-select:focus{background-color:var(--surface-3)}

/* Цветовая dot на статус-селекте — намёк на цвет бара */
.msp-select-status{padding-left:18px;position:relative;background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%}
.msp-select-status::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#9aa1ad;
}
/* Селекты-обёртки получают before через wrapper-класс — Native select не позволяет ::before на самом select.
   Решение: ставлю dot внутри обёрточной .msp-c-status через :has() */
.msp-c-status{position:relative}
.msp-c-status::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#9aa1ad;
  pointer-events:none;z-index:2;
}
.msp-c-status:has(.msp-status-mint)::before{background:var(--mint)}
.msp-c-status:has(.msp-status-lavender)::before{background:var(--lavender)}
.msp-c-status:has(.msp-status-coral)::before{background:var(--coral)}
.msp-c-status:has(.msp-status-apricot)::before{background:var(--apricot)}
.msp-c-status:has(.msp-status-sky)::before{background:var(--sky)}
.msp-c-status:has(.msp-status-rose)::before{background:var(--rose)}
.msp-c-status .msp-select-status{padding-left:22px}

/* Двух-уровневая шкала (top: months, sub: days/weeks) */
.msp-head-row-2tier{height:54px}
.msp-head-row-2tier .msp-th-table{align-items:flex-end}
.msp-mh-tier{position:absolute;top:0;left:0;height:32px;width:100%}
.msp-sh-tier{position:absolute;top:32px;left:0;height:22px;width:100%;border-top:1px solid var(--border-subtle)}
.msp-sh{
  position:absolute;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:500;color:var(--ink-3);
  border-right:1px solid var(--border-subtle);
  pointer-events:none;
  font-feature-settings:'tnum';
}
.msp-sh-weekend{color:var(--coral)}

/* Если шкала одноуровневая — month cells на полную высоту */
.msp-head-row:not(.msp-head-row-2tier) .msp-mh-tier{height:32px}

/* Zoom strip (Квартал / Месяц / Неделя / День) */
.msp-zoom-strip{
  display:flex;background:var(--surface-2);
  border-radius:var(--r-md);padding:2px;gap:1px;
  border:1px solid var(--border-subtle);
}
.msp-zoom-btn{
  border:none;background:transparent;cursor:pointer;font:inherit;
  font-size:12px;font-weight:500;color:var(--ink-2);
  padding:5px 11px;border-radius:6px;
  transition:all .12s ease;
  white-space:nowrap;
}
.msp-zoom-btn:hover:not(.on){background:var(--surface)}
.msp-zoom-btn.on{
  background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--elev-1);
}
@media (max-width:780px){
  .msp-zoom-strip{order:-1;width:100%}
  .msp-zoom-btn{flex:1;padding:4px 6px;font-size:11px}
}
/* «Вид ▾» dropdown — масштаб + видимость колонок (разгрузка тулбара). */
.msp-view-wrap{position:relative;display:inline-block}
.msp-view-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:40;
  min-width:210px;padding:10px;display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-md,10px);box-shadow:var(--elev-2,0 8px 24px rgba(0,0,0,.12))}
.msp-view-menu[hidden]{display:none}
.msp-view-section{display:flex;flex-direction:column;gap:5px}
.msp-view-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.msp-view-menu .msp-zoom-strip,.msp-view-menu .msp-col-strip{flex-wrap:wrap}

/* ── Fullscreen режим — Гантт во весь экран ── */
.msp-wrap.msp-fullscreen{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100vh!important;
  z-index:var(--z-fullscreen);
  background:var(--surface);
  border-radius:0;
  display:flex;flex-direction:column;
  margin:0;padding:0;
}
.msp-wrap.msp-fullscreen .msp-toolbar{padding:6px 12px;border-bottom:1px solid var(--border-subtle)}
.msp-wrap.msp-fullscreen .msp-body-row{
  height:auto;
  flex:1;min-height:0;
  overflow:hidden; /* контейнер; скролл — внутри tb-chart */
}
/* При активном fullscreen — скрываем элементы вне Гантта (без them отвлечения) */
body.msp-has-fullscreen .sidebar,
body.msp-has-fullscreen .topbar,
body.msp-has-fullscreen .booking-reminder,
body.msp-has-fullscreen .notif-panel,
body.msp-has-fullscreen .proj-detail-head{
  display:none!important;
}
body.msp-has-fullscreen{overflow:hidden}
.msp-fs-label{margin-left:4px}
@media (max-width:780px){
  .msp-fs-label{display:none}
}

/* Chart inner — wide canvas, всегда минимум 100% контейнера (нет пустого справа) */
.msp-chart-inner{position:relative;min-width:100%}

/* Month headers — clickable для создания задачи на весь месяц */
.msp-mh{
  position:absolute;top:0;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em;
  border-right:1px solid var(--border-strong);
  white-space:nowrap;overflow:hidden;
  pointer-events:auto;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.msp-mh.msp-mh-cell:hover{
  background:var(--accent-soft);color:var(--accent);
}
.msp-mh.msp-mh-cell:hover::after{
  content:'+ задача';position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  font-size:9px;font-weight:600;color:var(--accent);background:var(--card);
  padding:2px 6px;border-radius:4px;border:1px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.08);text-transform:none;letter-spacing:0;
  pointer-events:none;z-index:10;
}

/* Chart background grid */
.msp-chart-bg{
  position:absolute;inset:0;pointer-events:none;
}
.msp-mg{
  position:absolute;top:0;bottom:0;width:1px;
  background:var(--border-strong);
}
.msp-weekend{
  position:absolute;top:0;bottom:0;
  background:rgba(120,120,140,.05);
}
/* Праздничные дни — слегка тёплый оттенок (отличается от weekend) */
.msp-holiday{
  position:absolute;top:0;bottom:0;
  background:rgba(231,87,74,.08);
  cursor:help;
}
:root[data-theme="dark"] .msp-holiday{background:rgba(255,115,115,.12)}

/* Today line + pin */
.msp-today-line{
  position:absolute;top:0;bottom:0;width:2px;
  background:#e54848;
  z-index:4;pointer-events:none;
  box-shadow:0 0 8px rgba(229,72,72,.3);
}
.msp-today-pin{
  position:absolute;top:8px;
  transform:translateX(-50%);
  font-size:10px;font-weight:700;
  color:#fff;background:#e54848;
  padding:2px 8px;border-radius:99px;
  white-space:nowrap;
  z-index:5;pointer-events:none;
}

/* Chart rows */
.msp-cr{
  position:relative;
  border-bottom:1px solid var(--border-subtle);
  transition:background .12s ease;
}
.msp-cr:hover{background:var(--surface-2)}
/* Задача без дат — визуально приглушённый ряд с тонкой штриховкой */
.msp-cr-nodate{
  background:repeating-linear-gradient(45deg, transparent, transparent 8px, var(--surface-2) 8px, var(--surface-2) 9px);
  opacity:.5;
}
.msp-cr-nodate:hover{opacity:.75}

/* Bars */
.msp-bar{
  position:absolute;top:50%;transform:translateY(-50%);
  height:24px;border-radius:5px;
  display:flex;align-items:center;
  overflow:hidden;
  cursor:default;
  transition:filter .12s ease, transform .12s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.msp-bar:hover{filter:brightness(1.05);transform:translateY(-50%) scale(1.01)}
.msp-bar-label{
  position:relative;z-index:2;
  font-size:11px;font-weight:500;
  padding:0 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(0,0,0,.78);letter-spacing:-.005em;
  pointer-events:none;
}
.msp-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:rgba(0,0,0,.12);
  border-radius:4px 0 0 4px;
}

/* Bar palette — мягкий фон + виден прогресс через .msp-bar-fill */
.msp-bar-mint{background:#a8e6c4;border:1px solid #4fb583}
.msp-bar-lavender{background:#cfc5f5;border:1px solid #8978c7}
.msp-bar-coral{background:#f7b8a6;border:1px solid #cb6f54}
.msp-bar-apricot{background:#f7d68f;border:1px solid #c89d3c}
.msp-bar-sky{background:#a5d2f3;border:1px solid #5b97c8}
.msp-bar-rose{background:#f3a9c1;border:1px solid #c46285}
.msp-bar-neutral{background:#dfe2e8;border:1px solid #9aa1ad}

/* Не запланированные задачи (без часов в плане) — серая полоска штрихом */
.msp-bar.msp-bar-unscheduled{
  background:repeating-linear-gradient(
    45deg,
    rgba(180,180,180,.6) 0,
    rgba(180,180,180,.6) 4px,
    rgba(220,220,220,.6) 4px,
    rgba(220,220,220,.6) 8px
  ) !important;
  border:1px dashed #999 !important;
  opacity:.78;
}
.msp-bar.msp-bar-unscheduled .msp-bar-label{font-style:italic;opacity:.85}
.msp-bar.msp-bar-unscheduled .msp-bar-fill{display:none}

/* Выполненные задачи — приглушены, прогресс заливка зелёным */
.msp-bar.msp-bar-done{opacity:.62}
.msp-bar.msp-bar-done .msp-bar-fill{background:rgba(120,200,140,.6)}

/* Аватар-чип исполнителя в строке таблицы (после input в title-cell) */
.msp-ava{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:10px;font-weight:700;letter-spacing:.02em;
  color:rgba(0,0,0,.78);
  margin-left:6px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  user-select:none;
}
.msp-ava:hover{transform:scale(1.1);box-shadow:0 0 0 2px var(--accent-soft)}
.msp-ava-mint{background:#a8e6c4}
.msp-ava-lavender{background:#cfc5f5}
.msp-ava-coral{background:#f7b8a6}
.msp-ava-apricot{background:#f7d68f}
.msp-ava-sky{background:#a5d2f3}
.msp-ava-rose{background:#f3a9c1}
.msp-ava-empty{
  background:transparent;border:1.5px dashed var(--border-strong);
  color:var(--ink-3);font-size:13px;font-weight:400;
  opacity:0;
}
.msp-tr:hover .msp-ava-empty{opacity:.6}
.msp-ava-empty:hover{opacity:1!important;border-color:var(--accent);color:var(--accent)}

/* ── Toolbar: column visibility — toggle-pills (Excel/Project view-style) ── */
.msp-col-strip{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
}
.msp-col-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;
  background:transparent;border:0;border-right:1px solid var(--border-subtle);
  color:var(--ink-3);font:inherit;font-size:12px;font-weight:500;
  cursor:pointer;
  transition:background .1s ease, color .1s ease;
}
.msp-col-btn:last-child{border-right:0}
.msp-col-btn:hover{background:var(--surface-2);color:var(--ink)}
.msp-col-btn.on{
  background:color-mix(in srgb,var(--accent,#1172b6) 14%,transparent);
  color:var(--accent,#1172b6);
}
.msp-col-btn.on:hover{background:color-mix(in srgb,var(--accent,#1172b6) 20%,transparent)}

/* Разделитель в toolbar — отделяет опасные действия */
.msp-tools-sep{
  display:inline-block;
  width:1px;height:20px;
  background:var(--border-subtle);
  margin:0 4px;
  align-self:center;
}

/* Простой / Управление режим: в простом режиме скрываем «расширенные» инструменты */
.msp-wrap[data-mode="simple"] .msp-only-advanced{display:none!important}

/* Delete-choice modal (Очистить план vs Удалить проект целиком) */
.proj-del-overlay{padding:24px}
.proj-del-modal{
  max-width:540px;width:100%;
  display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;
}
.proj-del-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.proj-del-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);padding:0;
}
.proj-del-close:hover{background:var(--surface-2);color:var(--ink)}
.proj-del-sub{margin:0;font-size:13px;color:var(--ink-2)}
.proj-del-options{display:flex;flex-direction:column;gap:10px}
.proj-del-opt{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  cursor:pointer;text-align:left;
  font:inherit;color:inherit;
  transition:all .12s ease;
}
.proj-del-opt:hover{
  border-color:var(--accent,#1172b6);
  background:color-mix(in srgb,var(--accent,#1172b6) 4%,transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.proj-del-opt-full:hover{
  border-color:var(--coral,#ef4444);
  background:color-mix(in srgb,var(--coral,#ef4444) 4%,transparent);
}
.proj-del-opt-icon{font-size:24px;flex-shrink:0;line-height:1.2}
.proj-del-opt-text{flex:1;min-width:0}
.proj-del-opt-title{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.proj-del-opt-full .proj-del-opt-title{color:var(--coral,#ef4444)}
.proj-del-opt-desc{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.proj-del-foot{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--border-subtle)}
#mspModeToggle{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;
}
.msp-mode-icon{font-size:14px;line-height:1}

/* ── Paste Plan modal — импорт из буфера ────────────────────────────── */
.paste-plan-overlay{padding:24px}
.paste-plan-modal{
  max-width:980px;width:100%;max-height:92vh;overflow:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;
}
.paste-plan-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.paste-plan-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);padding:0;
}
.paste-plan-close:hover{background:var(--surface-2);color:var(--ink)}
.paste-plan-hint{
  margin:0;font-size:13px;color:var(--ink-2);
  padding:10px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--brand,#6366f1) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#6366f1) 18%,transparent);
}
.paste-plan-section{display:flex;flex-direction:column;gap:6px}
.paste-plan-label{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.paste-plan-input{
  padding:10px 12px;border-radius:8px;
  border:1px solid var(--border-subtle);
  background:var(--surface);color:var(--ink);
  font-size:14px;font-family:inherit;
}
.paste-plan-input:focus{outline:none;border-color:var(--brand,#6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 15%,transparent)}
.paste-plan-target{font-size:12px;color:var(--ink-3)}
.paste-plan-textarea{
  padding:10px 12px;border-radius:8px;
  border:1px solid var(--border-subtle);
  background:var(--surface);color:var(--ink);
  font-size:13px;font-family:ui-monospace,SFMono-Regular,monospace;
  resize:vertical;min-height:120px;
}
.paste-plan-textarea:focus{outline:none;border-color:var(--brand,#6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 15%,transparent)}

.paste-plan-preview{
  border:1px solid var(--border-subtle);border-radius:8px;
  background:var(--surface);
  min-height:60px;
}
.paste-plan-empty{
  padding:24px;text-align:center;color:var(--ink-3);font-size:13px;
}
.paste-plan-preview-info{
  padding:10px 14px;font-size:12.5px;color:var(--ink-2);
  border-bottom:1px solid var(--border-subtle);
}
.paste-plan-table-wrap{overflow:auto;max-height:50vh}
.paste-plan-table{width:100%;border-collapse:collapse;font-size:12.5px}
.paste-plan-table th{
  position:sticky;top:0;z-index:1;background:var(--surface-2);
  text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--border-subtle);
  vertical-align:top;
}
.paste-plan-table td{
  padding:6px 10px;border-bottom:1px solid var(--border-subtle);
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;
  white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;
}
.paste-plan-mapsel{
  width:100%;padding:5px 7px;border-radius:6px;
  border:1px solid var(--border-subtle);background:var(--surface);
  font-size:12px;font-family:inherit;font-weight:600;
}
.paste-plan-orig{font-size:10.5px;color:var(--ink-3);margin-top:3px;font-weight:normal;font-family:ui-monospace,monospace}
.paste-plan-more{text-align:center;color:var(--ink-3);font-style:italic}
.paste-plan-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding-top:8px;border-top:1px solid var(--border-subtle);
}

/* ── Earned Value modal (Спринт B1) ─────────────────────────────────── */
.msp-ev-overlay{padding:24px}
.msp-ev-modal{
  max-width:1100px;width:100%;max-height:92vh;
  display:flex;flex-direction:column;gap:14px;
  padding:20px 22px;
}
.msp-ev-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-bottom:1px solid var(--border-subtle);padding-bottom:12px;
}
.msp-ev-subtitle{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.msp-ev-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);padding:0;
}
.msp-ev-close:hover{background:var(--surface-2);color:var(--ink)}
.msp-ev-warn{
  padding:10px 14px;border-radius:8px;
  background:color-mix(in srgb,var(--apricot,#fbbf24) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--apricot,#fbbf24) 35%,transparent);
  color:var(--ink);font-size:13px;
}
.msp-ev-baseline-info{font-size:12px;color:var(--ink-3)}
.msp-ev-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
}
.msp-ev-tile{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.msp-ev-tile.is-big{
  background:color-mix(in srgb,var(--brand,#6366f1) 6%,var(--surface));
  border-color:color-mix(in srgb,var(--brand,#6366f1) 25%,transparent);
}
.msp-ev-tile.is-meta{
  background:color-mix(in srgb,var(--ink,#0f172a) 5%,var(--surface));
}
.msp-ev-tile-label{
  font-size:10.5px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em;
}
.msp-ev-tile-value{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.msp-ev-tile.is-big .msp-ev-tile-value{font-size:21px}
.msp-ev-tile-hint{font-size:11px;color:var(--ink-3);margin-top:2px}
.msp-ev-tile.is-good{border-color:color-mix(in srgb,var(--mint,#10b981) 55%,transparent);background:color-mix(in srgb,var(--mint,#10b981) 8%,var(--surface))}
.msp-ev-tile.is-good .msp-ev-tile-value{color:var(--mint,#10b981)}
.msp-ev-tile.is-warn{border-color:color-mix(in srgb,var(--apricot,#fbbf24) 55%,transparent);background:color-mix(in srgb,var(--apricot,#fbbf24) 8%,var(--surface))}
.msp-ev-tile.is-bad{border-color:color-mix(in srgb,var(--coral,#ef4444) 55%,transparent);background:color-mix(in srgb,var(--coral,#ef4444) 8%,var(--surface))}
.msp-ev-tile.is-bad .msp-ev-tile-value{color:var(--coral,#ef4444)}

.msp-ev-details{
  border:1px solid var(--border-subtle);border-radius:10px;
  background:var(--surface);
  overflow:hidden;
}
.msp-ev-details > summary{
  padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;
  list-style:none;
}
.msp-ev-details > summary::-webkit-details-marker{display:none}
.msp-ev-details > summary::before{
  content:'▸';display:inline-block;width:14px;color:var(--ink-3);
  transition:transform .15s ease;
}
.msp-ev-details[open] > summary::before{transform:rotate(90deg)}
.msp-ev-details > summary:hover{background:var(--surface-2)}
.msp-ev-table-wrap{
  max-height:50vh;overflow:auto;
  border-top:1px solid var(--border-subtle);
}
.msp-ev-table{
  width:100%;border-collapse:collapse;font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.msp-ev-table th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-2);
  text-align:right;padding:8px 10px;
  font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border-subtle);
}
.msp-ev-table th:nth-child(1),.msp-ev-table th:nth-child(2){text-align:left}
.msp-ev-table td{padding:7px 10px;border-bottom:1px solid var(--border-subtle);text-align:right}
.msp-ev-table td.msp-ev-tt-num{text-align:left;color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11.5px}
.msp-ev-table td.msp-ev-tt-title{text-align:left;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.msp-ev-table td.msp-ev-tt-title{max-width:180px}}
@media(max-width:480px){.msp-ev-table td.msp-ev-tt-title{max-width:120px}}
.msp-ev-table-wrap{-webkit-overflow-scrolling:touch}
.msp-ev-table td.is-implied{color:var(--ink-3)}
.msp-ev-table td.msp-ev-tt-good{color:var(--mint,#10b981);font-weight:600}
.msp-ev-table td.msp-ev-tt-bad{color:var(--coral,#ef4444);font-weight:600}
.msp-ev-foot{
  border-top:1px solid var(--border-subtle);padding-top:10px;
  font-size:11.5px;color:var(--ink-3);
}

/* Projects list — фильтр-бар (поиск, статус-пилюли, сортировка) */
.proj-filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:14px 0 18px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:10px;
}
.proj-filter-search{
  position:relative;flex:1;min-width:200px;max-width:360px;
  display:flex;align-items:center;
}
.proj-filter-search input[type="search"]{
  width:100%;padding:8px 30px 8px 30px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--ink);font-size:13px;
}
.proj-filter-search input[type="search"]:focus{
  outline:none;border-color:var(--accent, #5b8def);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, #5b8def) 18%, transparent);
}
.proj-filter-search input[type="search"]::-webkit-search-cancel-button{display:none}
.proj-filter-icon{
  position:absolute;left:10px;font-size:12px;color:var(--ink-3);pointer-events:none;
}
.proj-filter-clear{
  position:absolute;right:6px;width:22px;height:22px;
  border:none;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;
  border-radius:50%;cursor:pointer;
}
.proj-filter-clear:hover{background:var(--surface-3);color:var(--ink)}
.proj-filter-pills{
  display:flex;flex-wrap:wrap;gap:4px;
}
.proj-filter-pill{
  padding:5px 10px;font-size:12px;border-radius:99px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;
  transition:background .12s, border-color .12s, color .12s;
}
.proj-filter-pill:hover{border-color:var(--ink-3);color:var(--ink)}
.proj-filter-pill.is-active{
  background:var(--accent, #5b8def);border-color:var(--accent, #5b8def);color:#fff;
}
.proj-filter-pill-n{
  font-size:11px;color:var(--ink-3);background:var(--surface-2);
  padding:1px 6px;border-radius:99px;min-width:18px;text-align:center;
}
.proj-filter-pill.is-active .proj-filter-pill-n{
  background:rgba(255,255,255,.22);color:#fff;
}
.proj-filter-sort{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);
}
.proj-filter-sort select{
  padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--ink);font-size:12px;
}
.proj-filter-count{
  font-size:12px;color:var(--ink-3);margin-left:auto;
}
@media (max-width:640px){
  .proj-filter-bar{flex-direction:column;align-items:stretch;gap:8px;padding:10px}
  .proj-filter-search{max-width:none}
  .proj-filter-count{text-align:center;margin:0}
}

/* Аналитическая панель проекта — единая свёртываемая плашка над Gantt'ом.
 * Заменяет два отдельных блока: hp-panel (часы) + msp-baseline-banner (отстают).
 * Шапка всегда видна и компактна; body раскрывается по клику. */
.proj-hours-panel{
  margin:8px 0 10px;padding:0;
  background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:10px;
  overflow:hidden;
}
.pa-header{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:8px 12px;
  background:transparent;border:none;cursor:pointer;
  text-align:left;color:var(--ink);font:inherit;
}
.pa-header:hover{background:var(--surface-3)}
.pa-chevron{
  display:inline-block;width:14px;font-size:12px;color:var(--ink-3);
  transition:transform .15s;
}
.pa-chevron.is-collapsed{transform:rotate(-90deg)}
.pa-title{font-weight:600;font-size:13px;color:var(--ink);flex-shrink:0}
.pa-summary{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-left:auto;min-width:0;
}
.pa-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:99px;font-size:11.5px;
  background:var(--surface);border:1px solid var(--border-subtle);color:var(--ink-2);
  white-space:nowrap;
}
.pa-chip.pa-chip-behind{background:rgba(231,87,74,.10);border-color:rgba(231,87,74,.30);color:#a83a2b}
.pa-chip.pa-chip-ahead{background:rgba(40,180,99,.10);border-color:rgba(40,180,99,.30);color:#1f6e48}
.pa-chip.pa-chip-ok{background:rgba(91,141,239,.10);border-color:rgba(91,141,239,.30);color:#3b66b0}
.pa-chip-warn{color:#a8731b;margin-left:4px}
/* Chip «N задач без часов» — задачи видны на Гантте, но не учтены в Σ */
.pa-chip.pa-chip-nohours{
  background:rgba(140,90,180,.10);border-color:rgba(140,90,180,.30);color:#6a3a8a;
  font-weight:600
}
/* Ghost-бейдж в pill месяца: «+9👻» — задач без часов спанит этот месяц */
.hp-pill-ghost{
  font-size:10px;margin-left:4px;color:#6a3a8a;font-weight:500;
  padding:0 4px;border-radius:8px;background:rgba(140,90,180,.10);
}
/* Упрощённая Аналитика (2026-06-30): главный чип, строка проблем словами,
   переключатель ОДНОГО среза разбивки вместо 4 колонок сразу. */
.pa-chip.pa-chip-total{font-weight:600;color:var(--ink)}
.pa-problems{
  margin-top:8px;font-size:12.5px;color:#a8731b;
  background:rgba(168,115,27,.08);border:1px solid rgba(168,115,27,.25);
  border-radius:8px;padding:6px 10px;
}
.hp-dim-switch{
  display:inline-flex;gap:2px;margin-top:8px;padding:2px;
  background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:8px;
}
.hp-dim-btn{
  border:none;background:transparent;cursor:pointer;font:inherit;
  font-size:12px;color:var(--ink-2);padding:4px 10px;border-radius:6px;white-space:nowrap;
}
.hp-dim-btn:hover:not(.on){background:var(--surface)}
.hp-dim-btn.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--elev-1)}
.hp-empty{font-size:12px;color:var(--ink-2);font-style:italic}
.pa-body{padding:4px 12px 12px;border-top:1px solid var(--border-subtle);background:var(--surface)}
.pa-body[hidden]{display:none}
.pa-section{margin-top:10px}
.pa-section:first-child{margin-top:6px}
.pa-section-title{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-3);font-weight:600;margin:0 0 6px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.pa-bv-link{
  background:none;border:none;color:var(--accent, #5b8def);
  font-size:11px;cursor:pointer;padding:2px 4px;border-radius:4px;
  text-transform:none;letter-spacing:0;font-weight:500;
}
.pa-bv-link:hover{background:rgba(91,141,239,.10)}
.pa-bv-stats{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink-2)}
.pa-bv-stat b{font-weight:700;font-feature-settings:'tnum'}
/* Hint-подпись рядом с заголовком секции — объясняет интерактивность */
.pa-section-hint{
  font-size:11px;text-transform:none;letter-spacing:0;
  color:var(--ink-3);font-weight:400;margin-left:6px;font-style:italic;
}
/* Пояснение «что такое baseline» под заголовком сравнения */
.pa-bv-hint{
  font-size:11.5px;color:var(--ink-3);
  margin:4px 0 8px;padding:6px 10px;
  background:var(--surface-2);border-left:2px solid var(--accent,#5b8def);
  border-radius:0 4px 4px 0;line-height:1.4;
}
/* Чип «отстают» — иконка-кружок впереди для акцента */
.pa-chip.pa-chip-behind{font-weight:600}
.pa-chip.pa-chip-ahead{font-weight:600}

/* Публичный share-mode: скрываем кнопки и действия, требующие полной auth
 * (создание/удаление задач, baseline, отступы, смена исполнителя). Inline-edit
 * полей через _mspPatchTask по-прежнему работает через токен. */
.public-share-mode{background:var(--surface-1)}
.public-share-mode #sidebar,
.public-share-mode .topbar,
.public-share-mode #notifBell,
.public-share-mode #notifAlerts{display:none !important}
.public-share-root{min-height:100vh;display:flex;flex-direction:column}
.public-share-mode #mspAddTaskTop,
.public-share-mode #mspReschedule,
.public-share-mode #mspBaseline,
.public-share-mode .msp-row-del,
.public-share-mode .msp-tr-add,
.public-share-mode .msp-row-action,
.public-share-mode .msp-only-advanced,
.public-share-mode [data-action="open-details"]{display:none !important}
.public-share-mode .msp-ava{pointer-events:none;cursor:default;opacity:.85}

/* Jira-бейдж в Gantt-таблице (в title-cell, рядом с названием) */
.msp-jira-tag{
  display:inline-flex;align-items:center;
  padding:1px 6px;margin-left:6px;
  background:var(--surface-3);border:1px solid var(--border);border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size:10.5px;font-weight:600;
  color:var(--ink-2);
  cursor:pointer;line-height:1.4;
  letter-spacing:.2px;flex-shrink:0;
}
.msp-jira-tag:hover{background:var(--accent, #5b8def);border-color:var(--accent, #5b8def);color:#fff}
.msp-jira-tag.is-key{color:#1d5db4;border-color:rgba(91,141,239,.35);background:rgba(91,141,239,.08)}
.msp-jira-tag.is-key:hover{background:var(--accent, #5b8def);color:#fff}
/* Линковый бейдж (есть project.jira_base_url + key) — подчёркнут, явный link-cursor */
.msp-jira-tag.msp-jira-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.msp-jira-tag.msp-jira-link::after{content:"↗";margin-left:3px;font-weight:400;opacity:.7;font-family:inherit}
/* Пустой «+ Jira» — dim, dashed border, появляется только при canEdit. */
.msp-jira-tag.msp-jira-empty{
  background:transparent;border:1px dashed var(--border);color:var(--ink-3);
  font-weight:500;opacity:.55;
}
.msp-jira-tag.msp-jira-empty:hover{
  background:rgba(91,141,239,.08);border-style:solid;border-color:rgba(91,141,239,.45);
  color:#1d5db4;opacity:1;
}
:root[data-theme="dark"] .msp-jira-tag.msp-jira-empty:hover{color:#a9c4ff}

/* Baseline variance modal table */
.msp-bv-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-feature-settings:'tnum'}
.msp-bv-table th,.msp-bv-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);text-align:left}
.msp-bv-table thead th{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);position:sticky;top:0}
.msp-bv-table td.msp-bv-num{color:var(--ink-3);width:50px}
.msp-bv-table td.msp-bv-title{font-weight:600;color:var(--ink)}
.msp-bv-table td.msp-bv-plan,
.msp-bv-table td.msp-bv-cur{color:var(--ink-2);width:110px}
.msp-bv-table td.msp-bv-slip{color:#a83a2b;text-align:right;width:80px}

/* Resource Usage matrix (user × month/week) — вкладка «Матрица загрузки» в модалке Ресурсы */
.msp-matrix-table{
  border-collapse:separate;border-spacing:0;
  width:100%;font-size:12.5px;
  font-feature-settings:'tnum';
}
.msp-matrix-table th,
.msp-matrix-table td{
  padding:6px 8px;border-bottom:1px solid var(--border-subtle);
  text-align:center;white-space:nowrap;
}
.msp-matrix-table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-2);
  font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);font-weight:600;
}
.msp-matrix-table th.msp-mx-name,
.msp-matrix-table td.msp-mx-name{
  text-align:left;font-weight:600;color:var(--ink);
  position:sticky;left:0;background:var(--surface);
  min-width:160px;max-width:240px;
  overflow:hidden;text-overflow:ellipsis;
}
.msp-matrix-table thead th.msp-mx-name{background:var(--surface-2);z-index:2}
.msp-matrix-table td.msp-mx-cell{color:var(--ink-2)}
.msp-matrix-table td.msp-mx-cell.msp-mx-zero{color:var(--ink-3);background:var(--surface-2)}
.msp-matrix-table td.msp-mx-cell.msp-mx-over{
  background:rgba(231,87,74,.18);color:#a83a2b;font-weight:700;
}
.msp-matrix-table td.msp-mx-total,
.msp-matrix-table th.msp-mx-total{
  font-weight:700;color:var(--ink);background:var(--surface-2);
}
.msp-matrix-table tr.msp-mx-unassigned td{
  background:rgba(180,180,180,.08);color:var(--ink-3);font-style:italic;
}
.msp-matrix-table tr:hover td.msp-mx-cell:not(.msp-mx-zero):not(.msp-mx-over){
  background:rgba(91,141,239,.06);
}

/* Ресурсная панель — таблица загрузки по людям с недельной разбивкой + ставки и стоимость */
.msp-res-list{
  display:flex;flex-direction:column;gap:8px;padding:6px 0;
}
.msp-res-row{
  display:grid;grid-template-columns:minmax(180px,220px) minmax(120px,1fr) 110px 120px;gap:10px;
  padding:10px 12px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  align-items:center;
}
.msp-res-row.msp-res-head{
  background:transparent;border:none;padding:4px 12px;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);font-weight:600;
}
.msp-res-row.msp-res-overload{
  border-color:rgba(231,87,74,.35);
  background:rgba(231,87,74,.05);
}
.msp-res-name{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--ink);
  min-width:0;
}
.msp-res-name span:last-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.msp-res-stat{
  font-size:12px;color:var(--ink-2);
}
.msp-res-rate-cell input.msp-res-rate{
  width:100%;padding:6px 8px;text-align:right;
  border:1px solid var(--border);border-radius:6px;
  font-feature-settings:'tnum';font-size:13px;
  background:var(--surface);color:var(--ink);
}
.msp-res-rate-cell input.msp-res-rate:focus{outline:none;border-color:var(--accent)}
.msp-res-rate-ro{font-feature-settings:'tnum';color:var(--ink-2);font-size:13px}
.msp-res-cost-cell{font-feature-settings:'tnum';font-weight:600;color:var(--ink);text-align:right}
.msp-res-weeks{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:4px;
  margin-top:4px;
}
.msp-res-totals{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:10px 12px;margin-bottom:8px;
  background:var(--surface-2);border-radius:8px;
}
.msp-res-total{display:flex;flex-direction:column;gap:2px}
.msp-res-total-lbl{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px}
.msp-res-total strong{font-size:16px;font-weight:600;color:var(--ink);font-feature-settings:'tnum'}
.msp-res-total strong.is-over{color:var(--coral,#ef4444)}
.msp-res-total strong.is-under{color:var(--mint,#10b981)}
.msp-res-settings{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
  padding:10px 12px;margin-bottom:8px;
  border:1px dashed var(--border);border-radius:8px;
}
.msp-res-settings label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
.msp-res-settings input,
.msp-res-settings select{
  padding:6px 8px;border:1px solid var(--border);border-radius:6px;
  font-size:13px;background:var(--surface);color:var(--ink);
  min-width:140px;
}
.msp-res-settings input:focus,
.msp-res-settings select:focus{outline:none;border-color:var(--accent)}
.msp-res-settings .message{font-size:12px}
.msp-meta-cost{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink);font-weight:500;
  padding:2px 8px;border-radius:5px;background:var(--surface-2);
}
.msp-meta-cost-var.is-over{color:var(--coral,#ef4444);font-weight:600}
.msp-meta-cost-var.is-under{color:var(--mint,#10b981);font-weight:600}
.msp-res-wk{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:24px;padding:0 6px;
  border-radius:5px;background:var(--surface);
  border:1px solid var(--border-subtle);
  font-size:11px;font-feature-settings:'tnum';color:var(--ink-2);
  cursor:help;
}
.msp-res-wk.on{
  background:rgba(231,87,74,.14);
  border-color:rgba(231,87,74,.45);
  color:#e7574a;font-weight:700;
}
.msp-res-unassigned{
  border-style:dashed;background:var(--surface);
}

/* Drag-create preview — прямоугольник который рисуется при перетаскивании по пустой части таймлайна */
.msp-chart-inner{cursor:crosshair}
.msp-chart-inner .msp-bar,
.msp-chart-inner .msp-summary-bar{cursor:grab}
.msp-drag-create-preview{
  position:absolute;
  background:var(--accent-soft);
  border:1.5px dashed var(--accent);
  border-radius:5px;
  pointer-events:none;
  z-index:6;
  box-shadow:0 2px 8px rgba(17,114,182,.15);
}

/* Baseline-полоска (зафиксированный план): тонкая серая полоса под основным баром.
   Показывается только при drift'е от baseline (JS-фильтр в renderMsProjectGantt) +
   полностью скрывается классом .msp-baseline-hidden на wrap'е (тогл «◇ План»). */
.msp-baseline{
  position:absolute;left:0;
  top:calc(50% + 14px);transform:translateY(-50%);
  height:4px;border-radius:2px;
  background:repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.22) 0,
    rgba(0,0,0,.22) 4px,
    rgba(0,0,0,.10) 4px,
    rgba(0,0,0,.10) 8px
  );
  pointer-events:auto;cursor:help;
  z-index:1;opacity:0.75;
}
.msp-baseline:hover{opacity:1;height:5px}
.msp-baseline-hidden .msp-baseline{display:none}
:root[data-theme="dark"] .msp-baseline{
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.42) 0,
    rgba(255,255,255,.42) 4px,
    rgba(255,255,255,.22) 4px,
    rgba(255,255,255,.22) 8px
  );
}

/* Critical Path: красная обводка вокруг бара */
.msp-bar-critical{
  outline:2px solid #e7574a;outline-offset:1px;
  box-shadow:0 0 0 1px rgba(231,87,74,.25), 0 1px 3px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .msp-bar-critical{outline-color:#ff7373}

/* ── D-чистка (аудит 2026-06-29): простой режим = минимум как в MS Project ──
 * Колонки № · Задача · Статус · Старт · Конец · % (прогресс на баре); Приоритет/
 * Дни/Часы — только в advanced. Критический путь (красная обводка бара + красные
 * стрелки) — power-user сигнал, тоже только в advanced. Режим переключается живьём
 * (без ре-рендера), поэтому гейтим через [data-mode], а не выпиливанием разметки. */
.msp-wrap[data-mode="simple"] .msp-c-priority,
.msp-wrap[data-mode="simple"] .msp-c-days,
.msp-wrap[data-mode="simple"] .msp-c-hours{ display:none; }
.msp-wrap[data-mode="simple"] .msp-bar-critical{ outline:none; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.msp-wrap[data-mode="simple"] .msp-arrow-critical{ stroke:rgba(0,0,0,.45); stroke-width:1.4; color:rgba(0,0,0,.55); }
:root[data-theme="dark"] .msp-wrap[data-mode="simple"] .msp-arrow-critical{ stroke:rgba(255,255,255,.45); color:rgba(255,255,255,.55); }

/* Фильтр-стрип Гантта (Спринт 2) — узкая полоска под toolbar.
 * Mine / Просроченные / Статус-селект / Сбросить / счётчик. */
.msp-filter-strip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 0 8px;margin:0;
  border-bottom:1px solid var(--border-subtle);
  font-size:12.5px;
}
.msp-filter-label{color:var(--ink-2);font-weight:500;margin-right:2px}
.msp-fbtn{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border-subtle);color:var(--ink);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:all .12s ease;
}
.msp-fbtn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.msp-fbtn.on{
  background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.55);color:#3b66b0;font-weight:600;
}
:root[data-theme="dark"] .msp-fbtn.on{background:rgba(91,141,239,.22);border-color:#5b8def;color:#a9c4ff}
.msp-fsel{
  padding:4px 8px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border-subtle);color:var(--ink);
  font:inherit;font-size:12px;cursor:pointer;
}
.msp-fclear{
  background:transparent;border:none;color:#a83a2b;cursor:pointer;font-size:12px;font-weight:500;
  padding:4px 6px;
}
.msp-fclear:hover{text-decoration:underline}
.msp-fcount{margin-left:auto;color:var(--ink-2);font-size:12px;font-style:italic}

/* SVG-стрелки зависимостей */
.msp-arrows-layer{z-index:3}
.msp-arrow-group{cursor:pointer}
/* Широкая невидимая полоса под стрелкой — увеличивает кликабельную зону */
.msp-arrow-hit{
  stroke:transparent;stroke-width:10;fill:none;
  pointer-events:stroke;
}
.msp-arrow{
  stroke:rgba(0,0,0,.45);stroke-width:1.4;fill:none;
  color:rgba(0,0,0,.55); /* для marker fill через currentColor */
  pointer-events:none; /* клик ловит только hit-area */
  transition:stroke-width .12s ease, stroke .12s ease;
}
.msp-arrow-critical{
  stroke:#e7574a;stroke-width:1.8;
  color:#e7574a;
}
.msp-arrow-group:hover .msp-arrow{stroke:#e7574a;stroke-width:2.4;color:#e7574a}
.msp-arrow-group:hover .msp-arrow-critical{stroke:#b21d0c;stroke-width:2.6;color:#b21d0c}
:root[data-theme="dark"] .msp-arrow{stroke:rgba(255,255,255,.45);color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .msp-arrow-critical{stroke:#ff7373;color:#ff7373}
:root[data-theme="dark"] .msp-arrow-group:hover .msp-arrow{stroke:#ff7373;color:#ff7373}

/* Модалка зависимостей */
.msp-dep-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:280px;overflow-y:auto;
  border:1px solid var(--border-subtle);border-radius:8px;
  padding:8px;background:var(--surface-2);
}
.msp-dep-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:6px;background:var(--surface);
  border:1px solid var(--border-subtle);
}
.msp-dep-num{font-size:11px;color:var(--ink-3);font-weight:600;width:18px}
.msp-dep-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.msp-dep-type{
  font-size:10px;font-weight:700;letter-spacing:.04em;
  background:var(--accent-soft);color:var(--accent);
  padding:2px 6px;border-radius:4px;
}
.msp-dep-lag{
  font-size:12px;padding:4px 6px;
  border:1px solid var(--border-subtle);border-radius:5px;
  background:var(--surface);color:var(--ink);
  text-align:right;
}
.msp-dep-remove{
  width:22px;height:22px;border-radius:5px;
  border:none;background:transparent;cursor:pointer;
  font-size:16px;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
}
.msp-dep-remove:hover{background:var(--coral-soft);color:var(--coral)}

/* Milestone (ромб) */
.msp-bar-milestone{
  height:14px;width:14px !important;
  background:#8978c7;border:none;
  transform:translateY(-50%) rotate(45deg);
  border-radius:2px;
}
.msp-bar-milestone .msp-bar-label,
.msp-bar-milestone .msp-bar-fill{display:none}

/* Scrollbars on chart — толще, видимее (Premium) */
.msp-tb-chart::-webkit-scrollbar{height:14px;width:10px}
.msp-tb-chart::-webkit-scrollbar-track{background:var(--surface-2);border-top:1px solid var(--border-subtle)}
.msp-tb-chart::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid var(--surface-2)}
.msp-tb-chart::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
/* Firefox scrollbar */
.msp-tb-chart{scrollbar-width:auto;scrollbar-color:var(--border-strong) var(--surface-2)}

/* То же для шапки head-chart, чтобы было видно где скроллить */
.msp-th-chart::-webkit-scrollbar{height:0;width:0}

/* Dark mode */
:root[data-theme="dark"] .msp-weekend{background:rgba(255,255,255,.03)}
:root[data-theme="dark"] .msp-bar-label{color:rgba(0,0,0,.85)}
:root[data-theme="dark"] .msp-today-line{background:#ff7373;box-shadow:0 0 8px rgba(255,115,115,.4)}

/* Responsive: на узких экранах табличная часть уменьшается */
@media (max-width:1100px){
  .msp-th-table,.msp-tb-table{width:380px}
  .msp-c-title{font-size:12px}
  .msp-c-date{width:64px}
}
@media (max-width:780px){
  .msp-th-table,.msp-tb-table{width:280px}
  .msp-c-num{width:42px;font-size:11px}
  .msp-c-date{display:none}
  .msp-c-title{font-size:11px}
  .msp-body-row{height:calc(100vh - 280px);min-height:400px}
}

/* Полная ширина для импортированного проекта (Гантт занимает весь экран) */
@media (min-width:1000px){
  #mainScreen > .content > #panelProjects.proj-fullwidth.active{
    max-width:none;
  }
}
@media (min-width:1600px){
  #mainScreen > .content > #panelProjects.proj-fullwidth.active{
    max-width:none;
  }
}

/* Таблица Список для импортированных — компактнее */
.proj-imported-table{font-size:13px;width:100%;border-collapse:collapse}
.proj-imported-table th{
  text-align:left;padding:10px 12px;font-size:11px;font-weight:600;
  color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border-strong);
  background:var(--surface-2);position:sticky;top:0;z-index:1;
}
.proj-imported-table td{
  padding:9px 12px;border-bottom:1px solid var(--border-subtle);
  color:var(--ink);
}
.proj-imported-table tr:hover td{background:var(--surface-2)}

/* ── Skeleton loaders ── */
@keyframes skeleton-shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton{
  display:block;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:8px;color:transparent;user-select:none;pointer-events:none;
}
.skeleton-text{height:14px;margin:6px 0}
.skeleton-text.lg{height:18px}
.skeleton-text.sm{height:11px}
.skeleton-card{height:96px;margin-bottom:12px;border-radius:14px}
.skeleton-row{height:42px;margin-bottom:8px;border-radius:10px}
.skeleton-circle{width:36px;height:36px;border-radius:50%;display:inline-block}
.skeleton-stack{display:flex;flex-direction:column;gap:8px}

/* ── Empty states ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;color:var(--ink-2);
}
.empty-state-icon{
  width:88px;height:88px;margin-bottom:16px;opacity:.55;
}
.empty-state-title{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px}
.empty-state-hint{font-size:13.5px;color:var(--ink-2);margin:0 0 16px;max-width:360px;line-height:1.5}
.empty-state-action{margin-top:8px}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#222 25%,#2a2a2a 37%,#222 63%)}

/* ── Command palette (Cmd+K) ── */
.cmd-palette-overlay{
  position:fixed;inset:0;background:rgba(20,20,30,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9000;display:flex;align-items:flex-start;justify-content:center;
  padding-top:14vh;animation:cmd-fade .15s ease;
}
@keyframes cmd-fade{from{opacity:0}to{opacity:1}}
@keyframes cmd-pop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.cmd-palette{
  width:min(640px,92vw);background:var(--card);border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.25),0 0 0 1px var(--border);
  overflow:hidden;animation:cmd-pop .18s ease;
}
.cmd-palette-input{
  width:100%;padding:18px 22px;font:inherit;font-size:16px;
  border:none;outline:none;background:transparent;color:var(--ink);
  border-bottom:1px solid var(--border-subtle);
}
.cmd-palette-input::placeholder{color:var(--ink-3)}
.cmd-palette-results{max-height:60vh;overflow-y:auto;padding:8px}
.cmd-section{padding:6px 0}
.cmd-section-title{
  padding:6px 14px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);
}
.cmd-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:10px;cursor:pointer;font-size:14px;color:var(--ink);
  transition:background .12s;
}
.cmd-item:hover,.cmd-item.is-active{background:var(--mint-soft)}
.cmd-item-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:8px;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.cmd-item-body{flex:1;min-width:0}
.cmd-item-title{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-item-sub{font-size:12px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-item-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--accent)}
.cmd-empty{padding:32px 22px;text-align:center;color:var(--ink-3);font-size:13.5px}
.cmd-hint{
  padding:9px 14px;border-top:1px solid var(--border-subtle);
  font-size:11.5px;color:var(--ink-3);display:flex;gap:14px;
  background:var(--surface-2);
}
.cmd-hint kbd{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE-FIRST POLISH (Эпик 7.3)
   safe-area для notch/home-indicator, touch-targets ≥44px,
   корректные размеры input под iOS, full-screen modal на узких экранах,
   горизонтальный scroll табов вместо переноса.
   ════════════════════════════════════════════════════════════════════ */

/* iOS safe-area для sticky topbar */
.topbar{
  padding-top:max(10px, env(safe-area-inset-top));
  padding-left:max(28px, env(safe-area-inset-left));
  padding-right:max(28px, env(safe-area-inset-right));
}

/* Sidebar drawer на mobile — учёт safe-area для notch и home-indicator */
@media (max-width:999px){
  .sidebar{
    padding-top:max(20px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    padding-left:max(12px, env(safe-area-inset-left));
  }
  .sidebar-burger{
    top:max(10px, env(safe-area-inset-top));
    left:max(10px, env(safe-area-inset-left));
  }
}

/* Touch-targets ≥44px для основных интерактивных элементов на coarse pointer */
@media (pointer:coarse){
  /* Минимальная высота для всех кнопок (iOS HIG: 44pt) */
  .btn-primary,.btn-accent,.btn-outline,.btn-outline-dark,.btn-cancel,
  .sidebar-item,.tab,.admin-tab{
    min-height:44px;
  }
  /* btn-sm — поднимаем до 38px (хитбокс через padding) */
  .btn-sm{min-height:38px;padding-top:8px;padding-bottom:8px}
  /* Иконки-кнопки в Гантте — крупнее */
  .msp-row-del,.msp-row-handle,
  [data-action="indent"],[data-action="outdent"],[data-action="toggle-collapse"]{
    min-width:32px;min-height:32px;
  }
  /* Инпуты — высота 44px */
  input[type="text"],input[type="email"],input[type="number"],
  input[type="password"],input[type="date"],input[type="search"],
  input[type="url"],input[type="tel"],select,textarea{
    min-height:44px;
  }
  textarea{min-height:88px}
}

/* iOS Safari: font-size <16px на input → авто-zoom при focus.
   Поднимаем до 16px на узких экранах (на десктопе остаются исходные размеры). */
@media (max-width:740px){
  input[type="text"],input[type="email"],input[type="number"],
  input[type="password"],input[type="date"],input[type="search"],
  input[type="url"],input[type="tel"],input[type="time"],
  select,textarea{
    font-size:16px;
  }
  /* Для совсем мелких контролов (фильтры, табы) — оставляем в покое:
     там обычно padding достаточный, и font-size:13px не вызывает zoom если
     элемент уже focused через явный pointerdown. Но в формах — критично. */
}

/* Модальные окна на узких экранах — растягиваем почти на весь экран
   с правильным учётом safe-area, чтобы content не уходил под notch/home-indicator */
@media (max-width:600px){
  .popup-overlay{
    padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    align-items:flex-end; /* модалка прилипает к низу — удобнее тянуться большим пальцем */
  }
  .popup-card{
    width:100% !important;max-width:100% !important;
    max-height:90vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    overflow-y:auto;
  }
  /* Apple-style диалоги (showConfirm/showPrompt) — оставляем по центру с приличным паддингом */
  .popup-overlay > .popup-card.fade-in{
    border-radius:var(--r-lg);
  }
}

/* Admin-табы и project-views на узком экране — горизонтальный scroll вместо переноса */
@media (max-width:740px){
  .admin-tabs,.proj-views .seg-control,
  .tz-board-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:4px;
  }
  .admin-tab,.tz-board-tab{flex-shrink:0}
  /* Скрываем ugly scrollbar в WebKit-mobile */
  .admin-tabs::-webkit-scrollbar,
  .proj-views .seg-control::-webkit-scrollbar,
  .tz-board-tabs::-webkit-scrollbar{height:4px}
}

/* Toast-уведомления — учёт safe-area-bottom (home indicator на iPhone) */
@media (max-width:600px){
  .toast-stack{
    bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px));
    right:max(20px, env(safe-area-inset-right));
    left:max(20px, env(safe-area-inset-left));
  }
}

/* FAB / Sticky bottom buttons — safe-area-bottom */
@media (max-width:740px){
  .schedule-fab,
  [class*="fab"][class*="bottom"]{
    bottom:max(20px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  }
}

/* ── AccessPicker — модалка «Поделиться» ── */
.access-picker-overlay{
  position:fixed;inset:0;z-index:1200;
  background:rgba(15,18,25,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:apFadeIn .15s ease-out;
}
@keyframes apFadeIn{from{opacity:0}to{opacity:1}}
.access-picker-modal{
  width:min(560px, 100%);max-height:calc(100vh - 40px);
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;
  display:flex;flex-direction:column;
}
.ap-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.ap-header h3{margin:0;font-size:16px;font-weight:600}
.ap-close{
  background:transparent;border:none;color:var(--text-sec);
  font-size:24px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:8px;
}
.ap-close:hover{background:var(--surface-2);color:var(--text)}
.ap-body{padding:16px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:18px}
.ap-owner{font-size:13px;color:var(--text-sec)}
.ap-section{display:flex;flex-direction:column;gap:8px}
.ap-section-title{font-size:12px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.04em}
.ap-vis-list{display:flex;flex-direction:column;gap:8px}
.ap-vis-row{
  display:flex;align-items:flex-start;gap:12px;padding:12px;
  border:1px solid var(--border);border-radius:10px;cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ap-vis-row:hover:not(.is-disabled){border-color:var(--accent);background:var(--surface-2)}
.ap-vis-row input[type=radio]{margin-top:2px}
.ap-vis-row.is-disabled{opacity:.5;cursor:not-allowed}
.ap-vis-title{font-weight:500;font-size:14px}
.ap-vis-hint{font-size:12px;color:var(--text-sec);margin-top:2px}
.ap-shared-list{display:flex;flex-direction:column;gap:6px}
.ap-share-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);
}
.ap-share-icon{font-size:16px}
.ap-share-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-role-sel{
  font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);
}
.ap-role-badge{font-size:12px;color:var(--text-sec);padding:2px 8px;border-radius:6px;background:var(--surface)}
.ap-share-del{
  background:transparent;border:none;color:var(--text-sec);
  font-size:18px;cursor:pointer;width:24px;height:24px;border-radius:6px;line-height:1;
}
.ap-share-del:hover{background:var(--danger);color:#fff}
.ap-empty{font-size:13px;color:var(--text-sec);text-align:center;padding:8px 0}
.ap-add{position:relative}
.ap-add input{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);font-size:14px;
}
.ap-add input:focus{outline:none;border-color:var(--accent)}
.ap-search-results{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;
  max-height:240px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.ap-search-item{
  padding:8px 12px;cursor:pointer;font-size:13px;display:flex;gap:8px;align-items:center;
}
.ap-search-item:hover{background:var(--surface-2)}
.ap-search-empty{padding:12px;font-size:13px;color:var(--text-sec);text-align:center}
.ap-footer{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px 20px;border-top:1px solid var(--border);background:var(--surface-2);
}
/* Login-image: preview в админке + рендер на login-странице */
.ss-login-image-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px;background:var(--bg-soft);border-radius:10px;
}
.ss-login-image-preview{
  flex-shrink:0;width:200px;height:90px;
  background:var(--surface);border:1px solid var(--border-subtle);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ss-login-image-preview img{max-width:100%;max-height:100%;object-fit:contain}
.ss-no-image{font-size:11px;color:var(--text-sec);text-align:center;padding:0 8px}
.ss-login-image-actions{display:flex;flex-direction:column;gap:6px}
.login-image-wrap{
  width:100%;max-width:280px;height:80px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.login-image{max-width:100%;max-height:100%;object-fit:contain}

/* Троеточечное меню для карточек (документы и далее) */
.card-more-menu{
  position:absolute;z-index:300;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:4px;min-width:160px;
  animation:apFadeIn .12s ease-out;
}
.card-more-item{
  display:block;width:100%;text-align:left;
  padding:8px 12px;border:none;background:transparent;cursor:pointer;
  font-size:13px;color:var(--ink);border-radius:6px;
}
.card-more-item:hover{background:var(--surface-2)}
.card-more-item.is-danger{color:var(--danger)}

/* ── My Teams («Мои команды») ── */
.groups-list{display:flex;flex-direction:column;gap:10px}
.group-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px;transition:border-color .15s, box-shadow .15s;
}
.group-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.04)}
.group-card-head{display:flex;align-items:center;gap:14px}
.group-card-icon{
  width:40px;height:40px;border-radius:10px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.group-card-body{flex:1;min-width:0}
.group-card-name{font-size:15px;font-weight:600}
.group-card-desc{font-size:13px;color:var(--text-sec);margin-top:2px}
.group-card-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--text-sec)}
.group-role-badge{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-weight:500;font-size:11px;letter-spacing:.02em;
}
.group-role-lead{background:rgba(245, 158, 11, .15);color:#b45309}
.group-role-member{background:var(--surface-2);color:var(--text-sec)}
.group-role-viewer{background:rgba(99, 102, 241, .15);color:#3730a3}
[data-theme="dark"] .group-role-lead{color:#fbbf24}
[data-theme="dark"] .group-role-viewer{color:#a5b4fc}
@media (max-width:600px){
  .access-picker-modal{width:100%;max-height:calc(100vh - 20px)}
  .ap-body{padding:14px}
}

/* ─── LKDS Widgets (каркас модульности) ─────────────────────────────────────
   .lkds-slot   — контейнер, в который Layout Engine рендерит виджеты.
   .lkds-widget — карточка отдельного виджета. По умолчанию — прозрачная
   (display:contents), чтобы существующие dash-* блоки внутри сохранили вид
   (отступы, ширину, layout наследуются от родителя — homeContent).
   Когда включится edit-mode (.lkds-edit-mode на slot'е), карточки проявляются:
   обводка, drag-handle, нормальный block-layout с gap. */
.lkds-slot{display:contents}
.lkds-widget{display:contents}
.lkds-widget>.lkds-widget-body{display:contents}
.lkds-widget[data-hidden="1"]{display:none}
.lkds-widget-error{padding:14px 18px;border-radius:14px;background:var(--surface,#fff);color:var(--coral,#ef4444);font-size:13.5px;border:1px solid color-mix(in srgb,var(--coral,#ef4444) 20%,transparent)}

/* Customizer-режим — слот превращается в grid с явными карточками */
.lkds-slot[data-customize="1"]{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.lkds-slot[data-customize="1"] .lkds-widget{display:flex;flex-direction:column;grid-column:span var(--w,6);grid-row:span var(--h,1);background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:14px;position:relative;min-height:80px}
.lkds-slot[data-customize="1"] .lkds-widget>.lkds-widget-body{display:block}
.lkds-slot[data-customize="1"] .lkds-widget::before{content:attr(data-widget);position:absolute;top:6px;left:10px;font-size:11px;color:var(--ink-3,#9ca3af);font-family:ui-monospace,monospace}
.lkds-slot[data-customize="1"] .lkds-widget[data-pinned="1"]::after{content:'📌';position:absolute;top:6px;right:8px;font-size:12px}
@media (max-width:780px){
  .lkds-slot[data-customize="1"]{grid-template-columns:repeat(4,1fr)}
  .lkds-slot[data-customize="1"] .lkds-widget{grid-column:1/-1}
}

/* ─── Dashboard hero — кнопка «Настроить» ──────────────────────────────── */
.dash-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dash-hero-row h1{margin:0}
.dash-customize-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);color:var(--ink-1,#0f172a);border-radius:99px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all .15s ease;flex-shrink:0}
.dash-customize-btn:hover{background:var(--surface-2,#f9fafb);border-color:var(--ink-3,#9ca3af);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.dash-customize-btn:active{transform:translateY(0)}
.dash-customize-btn svg{flex-shrink:0;color:var(--ink-2,#6b7280)}
[data-theme="dark"] .dash-customize-btn{background:var(--surface,#1f2937);border-color:var(--border,#374151);color:var(--ink-1,#f3f4f6)}
[data-theme="dark"] .dash-customize-btn:hover{background:var(--surface-2,#374151)}

/* ─── Inline edit-mode (drag прямо на странице) ────────────────────────── */
.dash-customize-btn-active{background:var(--brand,#6366f1)!important;color:#fff!important;border-color:var(--brand,#6366f1)!important}
.dash-customize-btn-active svg{color:#fff!important}
.dash-customize-btn-active:hover{background:var(--brand-2,#4f46e5)!important;border-color:var(--brand-2,#4f46e5)!important}

.lkds-slot.lkds-edit-mode{
  display:flex;flex-direction:column;gap:14px;
  padding:14px;border-radius:14px;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--brand,#6366f1) 4%,transparent),
    color-mix(in srgb,var(--brand,#6366f1) 4%,transparent) 12px,
    transparent 12px,transparent 24px);
  border:2px dashed color-mix(in srgb,var(--brand,#6366f1) 35%,transparent);
  position:relative;
  animation:lkds-edit-glow .35s ease-out;
}
@keyframes lkds-edit-glow{from{opacity:.4;transform:translateY(-4px)}to{opacity:1;transform:none}}

.lkds-slot.lkds-edit-mode>.lkds-widget{
  display:block;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  cursor:grab;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  position:relative;
}
.lkds-slot.lkds-edit-mode>.lkds-widget:hover{
  border-color:var(--brand,#6366f1);
  box-shadow:0 6px 18px rgba(99,102,241,.12);
}
.lkds-slot.lkds-edit-mode>.lkds-widget.lkds-widget-dragging{
  opacity:.85;cursor:grabbing;
  box-shadow:0 16px 40px rgba(99,102,241,.25),0 4px 12px rgba(0,0,0,.08);
  border-color:var(--brand,#6366f1);
  transition:none;
}
.lkds-widget-placeholder{
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent);
  border:2px dashed color-mix(in srgb,var(--brand,#6366f1) 45%,transparent);
  margin:0;
}
.lkds-edit-handle{cursor:grab}
.lkds-edit-handle:active{cursor:grabbing}
.lkds-slot.lkds-edit-mode>.lkds-widget>.lkds-widget-body{
  display:block;padding:14px 16px;
  /* В edit-mode тело виджета не интерактивно — клики/нажатия идут на карточку,
     чтобы можно было схватить блок за любую точку и перетащить. */
  pointer-events:none;
  user-select:none;
}
.lkds-slot.lkds-edit-mode>.lkds-widget>.lkds-widget-edit-bar{pointer-events:auto}
.lkds-slot.lkds-edit-mode>.lkds-widget .lkds-edit-hide{pointer-events:auto}
.lkds-widget-edit-bar{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand,#6366f1) 8%,transparent),
    color-mix(in srgb,var(--brand,#6366f1) 4%,transparent));
  border-bottom:1px solid color-mix(in srgb,var(--brand,#6366f1) 18%,transparent);
  font-size:12.5px;
}
.lkds-edit-handle{color:var(--brand,#6366f1);font-weight:700;letter-spacing:-1px;cursor:grab;font-size:14px;flex-shrink:0;user-select:none}
.lkds-edit-icon{font-size:15px;flex-shrink:0}
.lkds-edit-title{font-weight:600;color:var(--ink-1,#0f172a);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkds-edit-hide{
  background:transparent;border:none;
  width:24px;height:24px;border-radius:6px;
  font-size:18px;line-height:1;color:var(--ink-3,#9ca3af);
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.lkds-edit-hide:hover{background:color-mix(in srgb,var(--coral,#ef4444) 12%,transparent);color:var(--coral,#ef4444)}
.lkds-edit-hide:disabled{opacity:.35;cursor:not-allowed}
.lkds-edit-hide:disabled:hover{background:transparent;color:var(--ink-3,#9ca3af)}

.lkds-edit-pin{
  background:transparent;border:none;
  width:24px;height:24px;border-radius:6px;
  font-size:13px;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(100%) opacity(.55);
  transition:all .12s;
}
.lkds-edit-pin:hover{background:color-mix(in srgb,var(--brand,#6366f1) 10%,transparent);filter:grayscale(0) opacity(1)}
.lkds-edit-pin.is-on{filter:none;background:color-mix(in srgb,var(--brand,#6366f1) 14%,transparent)}
.lkds-edit-pin.is-on:hover{background:color-mix(in srgb,var(--brand,#6366f1) 22%,transparent)}

/* Закреплённый виджет в edit-mode: акцентная обводка + cursor. */
.lkds-slot.lkds-edit-mode>.lkds-widget[data-pinned="1"]{
  border-color:color-mix(in srgb,var(--brand,#6366f1) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand,#6366f1) 30%,transparent);
  cursor:default;
}
.lkds-slot.lkds-edit-mode>.lkds-widget[data-pinned="1"]:hover{
  /* hover-эффект перетаскивания не должен шевелить закреплённый блок */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand,#6366f1) 30%,transparent);
  border-color:color-mix(in srgb,var(--brand,#6366f1) 55%,transparent);
}
.lkds-slot.lkds-edit-mode>.lkds-widget[data-pinned="1"] .lkds-edit-handle{
  cursor:default;color:var(--ink-3,#9ca3af);opacity:.55;
}

/* Resize-handle: полоска внизу карточки в edit-mode. Pin → handle убирается
   (см. JS). Drag-listener карточки игнорирует pointerdown на этом элементе. */
.lkds-edit-resize{
  position:absolute;left:0;right:0;bottom:0;height:8px;
  cursor:ns-resize;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb,var(--brand,#6366f1) 22%,transparent));
  border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;user-select:none;
  transition:background .12s,height .12s;
}
.lkds-edit-resize::before{
  content:'';display:block;width:34px;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--brand,#6366f1) 55%,transparent);
}
.lkds-edit-resize:hover{
  height:12px;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb,var(--brand,#6366f1) 32%,transparent));
}
.lkds-widget-resizing{
  outline:2px solid var(--brand,#6366f1);outline-offset:-2px;
  box-shadow:0 8px 24px rgba(99,102,241,.18);
}

/* --h применяется и в edit-mode, и в обычном виде. h=0 (default) — без min-height,
   виджет растёт по содержимому. h=2..8 → min-height: cells * 60px. */
.lkds-widget>.lkds-widget-body{
  min-height:calc(var(--h, 0) * 60px);
}

.lkds-edit-footer{
  display:flex;flex-direction:column;gap:8px;
  padding:14px;
  border:1.5px dashed color-mix(in srgb,var(--brand,#6366f1) 30%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface,#fff) 60%,transparent);
}
.lkds-edit-footer-label{font-size:12px;font-weight:600;color:var(--ink-2,#6b7280);text-transform:uppercase;letter-spacing:.04em}
.lkds-edit-footer-list{display:flex;flex-wrap:wrap;gap:8px}
.lkds-edit-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:99px;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e5e7eb);
  color:var(--ink-1,#0f172a);
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:all .12s;
}
.lkds-edit-add-btn:hover{border-color:var(--brand,#6366f1);color:var(--brand,#6366f1);transform:translateY(-1px)}

/* Superadmin actions in edit-mode footer */
.lkds-edit-footer-admin{
  margin-top:6px;padding-top:10px;
  border-top:1px dashed color-mix(in srgb,var(--brand,#6366f1) 25%,transparent);
}
.lkds-edit-admin-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:99px;
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#6366f1) 35%,transparent);
  color:var(--brand,#6366f1);
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .12s;
}
.lkds-edit-admin-btn:hover{
  background:var(--brand,#6366f1);
  border-color:var(--brand,#6366f1);
  color:#fff;
  transform:translateY(-1px);
}

[data-theme="dark"] .lkds-slot.lkds-edit-mode>.lkds-widget{background:#1f2937;border-color:#374151}
[data-theme="dark"] .lkds-widget-edit-bar{border-bottom-color:color-mix(in srgb,var(--brand,#6366f1) 30%,transparent)}
[data-theme="dark"] .lkds-edit-title{color:#f3f4f6}
[data-theme="dark"] .lkds-edit-add-btn{background:#1f2937;border-color:#374151;color:#f3f4f6}

/* ─── Layout Customizer (модалка) ──────────────────────────────────────── */
.lkds-customizer-overlay{
  position:fixed;inset:0;z-index:9500;
  background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:lkds-fade-in .18s ease-out;
}
@keyframes lkds-fade-in{from{opacity:0}to{opacity:1}}
.lkds-customizer{
  width:100%;max-width:540px;max-height:calc(100vh - 40px);
  background:var(--surface,#fff);color:var(--ink-1,#0f172a);
  border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;flex-direction:column;overflow:hidden;
  animation:lkds-pop-in .22s cubic-bezier(.4,1.4,.6,1);
}
@keyframes lkds-pop-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.lkds-customizer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px;border-bottom:1px solid var(--border,#e5e7eb)}
.lkds-customizer-head h3{margin:0;font-size:17px;font-weight:600}
.lkds-customizer-close{background:none;border:none;font-size:26px;line-height:1;color:var(--ink-3,#9ca3af);cursor:pointer;padding:0 6px;border-radius:8px;transition:all .12s}
.lkds-customizer-close:hover{background:var(--surface-2,#f9fafb);color:var(--ink-1,#0f172a)}
.lkds-customizer-sub{margin:0;padding:10px 22px 0;color:var(--ink-2,#6b7280);font-size:13px;line-height:1.5}
.lkds-customizer-list{margin:0;padding:14px 14px 14px;list-style:none;overflow-y:auto;flex:1;min-height:0}
.lkds-cust-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin:0 0 6px;
  background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);
  border-radius:12px;cursor:grab;user-select:none;
  transition:all .12s;
}
.lkds-cust-row:hover{border-color:var(--ink-3,#9ca3af);background:var(--surface-2,#f9fafb)}
.lkds-cust-row.lkds-cust-dragging{opacity:.4;cursor:grabbing}
.lkds-cust-row.lkds-cust-dragover{border-color:var(--brand,#6366f1);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand,#6366f1) 20%,transparent)}
.lkds-cust-drag{flex-shrink:0;color:var(--ink-3,#9ca3af);font-size:14px;letter-spacing:-1px;cursor:grab}
.lkds-cust-check{display:flex;align-items:center;flex-shrink:0;cursor:pointer}
.lkds-cust-check input{width:18px;height:18px;cursor:pointer;accent-color:var(--brand,#6366f1)}
.lkds-cust-icon{flex-shrink:0;font-size:20px;width:32px;text-align:center}
.lkds-cust-text{flex:1;min-width:0}
.lkds-cust-title{font-size:13.5px;font-weight:600;color:var(--ink-1,#0f172a)}
.lkds-cust-desc{font-size:12px;color:var(--ink-2,#6b7280);margin-top:2px;line-height:1.35}
.lkds-customizer-foot{display:flex;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--border,#e5e7eb);background:var(--surface-2,#f9fafb)}
.lkds-customizer-spacer{flex:1}
.lkds-cust-btn-ghost,.lkds-cust-btn-primary{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;border:1px solid transparent;transition:all .12s}
.lkds-cust-btn-ghost{background:transparent;color:var(--ink-2,#6b7280);border-color:var(--border,#e5e7eb)}
.lkds-cust-btn-ghost:hover{background:var(--surface,#fff);color:var(--ink-1,#0f172a)}
.lkds-cust-btn-primary{background:var(--brand,#6366f1);color:#fff;border-color:var(--brand,#6366f1)}
.lkds-cust-btn-primary:hover{background:var(--brand-2,#4f46e5);border-color:var(--brand-2,#4f46e5)}
[data-theme="dark"] .lkds-customizer{background:#1f2937;color:#f3f4f6;box-shadow:0 20px 60px rgba(0,0,0,.6)}
[data-theme="dark"] .lkds-customizer-head{border-bottom-color:#374151}
[data-theme="dark"] .lkds-customizer-foot{background:#111827;border-top-color:#374151}
[data-theme="dark"] .lkds-cust-row{background:#111827;border-color:#374151}
[data-theme="dark"] .lkds-cust-row:hover{background:#1f2937;border-color:#4b5563}
[data-theme="dark"] .lkds-customizer-close:hover{background:#374151}
@media (max-width:600px){
  .lkds-customizer{max-width:100%;height:100%;max-height:100%;border-radius:0}
  .lkds-customizer-foot{padding:12px 16px}
  .lkds-cust-btn-ghost,.lkds-cust-btn-primary{padding:10px 14px}
}

/* ── Floating AI assistant (Phase 4.5) ─────────────────────────────────
   FAB справа снизу + выезжающий drawer. Доступен любому залогиненному
   пользователю — кнопка 🤖 видна на всех вкладках. */
.ai-assistant-btn{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--border-subtle);
  background:linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);
  color:#fff;cursor:pointer;
  box-shadow:var(--elev-3);
  transition:transform .15s ease, box-shadow .15s ease;
  animation:fadeIn .35s ease-out both;
}
.ai-assistant-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:var(--elev-pop)}
.ai-assistant-btn:active{transform:translateY(0) scale(.98)}
.ai-assistant-btn[hidden]{display:none!important}

.ai-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:200;
  width:min(420px, 100%);
  display:flex;flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--border-subtle);
  box-shadow:-12px 0 40px rgba(20,20,30,.10);
  transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ai-drawer.open{transform:translateX(0)}
.ai-drawer[hidden]{display:none!important}
.ai-drawer.mode-tz-assist{width:min(560px, 100%)}

.ai-drawer-modes{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 14px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-2, #f7f8fa);
}
.ai-mode-chip{
  font-size:12px;padding:4px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border-subtle);
  color:var(--ink);cursor:pointer;transition:all .15s;
}
.ai-mode-chip:hover{border-color:var(--brand,#6366f1);color:var(--brand,#6366f1)}
.ai-mode-chip.active{background:var(--brand,#6366f1);color:#fff;border-color:var(--brand,#6366f1)}

/* File-attach bar в drawer (показывается только в tz_assist через JS) */
.ai-drawer-attach{
  display:flex;flex-direction:column;gap:6px;
  padding:8px 14px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-2, #f7f8fa);
}
.ai-attach-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:4px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border-subtle);
  color:var(--ink-2);cursor:pointer;transition:all .15s;
  width:fit-content;
}
.ai-attach-btn:hover{border-color:var(--brand,#6366f1);color:var(--brand,#6366f1)}
.ai-attach-status{
  font-size:11.5px;line-height:1.4;padding:4px 8px;border-radius:6px;
  word-break:break-word;
}
.ai-attach-status a{color:inherit;text-decoration:underline}
.ai-attach-ok{background:color-mix(in srgb, var(--mint, #a7f3d0) 30%, transparent);color:var(--ink-1)}
.ai-attach-busy{background:color-mix(in srgb, var(--sky, #93c5fd) 25%, transparent);color:var(--ink-2)}
.ai-attach-err{background:color-mix(in srgb, var(--apricot, #fdba74) 30%, transparent);color:#7c2d12}

.ai-tz-draft-card{
  margin-top:10px;padding:12px;border:1px solid #d8e3f0;border-radius:8px;
  background:var(--surface);
}
.ai-tz-draft-card .ai-tz-draft-title{font-weight:600;margin-bottom:8px;font-size:14px}
.ai-tz-draft-card .ai-tz-draft-row{font-size:13px;margin:3px 0}
.ai-tz-draft-card .ai-tz-draft-row b{font-weight:600}
.ai-tz-draft-card details{margin-top:8px}
.ai-tz-draft-card details summary{cursor:pointer;font-size:13px;color:var(--brand,#6366f1)}
.ai-tz-draft-card details > div{
  white-space:pre-wrap;margin-top:6px;padding:8px;
  background:var(--surface-2, #f7f8fa);border-radius:4px;
  font-size:13px;max-height:300px;overflow:auto;
}
.ai-tz-draft-apply{
  margin-top:10px;padding:6px 14px;
  background:var(--brand,#6366f1);color:#fff;border:none;border-radius:6px;
  font-size:13px;cursor:pointer;font-weight:500;
}
.ai-tz-draft-apply:hover{filter:brightness(1.08)}

.ai-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(135deg, var(--lavender-soft) 0%, var(--sky-soft) 100%);
}
.ai-drawer-title{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:15px}
.ai-drawer-icon{font-size:18px;line-height:1;display:inline-flex;align-items:center}
.ai-drawer-icon.ai-spirit-mini svg{display:block}
.ai-drawer-icon.ai-spirit-mini{color:var(--brand,#6366f1)}

/* Дух Машины (robot-eye placeholder, индиго): тёмный navy bezel, индиго-линза,
   3 заметные анимации — sweep-арка по орбите, пульс зрачка, LED scan-ring. */
.ai-assistant-btn.ai-spirit .ai-spirit-svg{display:block}
.ai-assistant-btn.ai-spirit{color:#fff}
.ai-spirit-svg{display:block}

/* Sweep-арка: вращается 360° за 3s — главная видимая анимация.
   transform-box:view-box нужен для корректной интерпретации transform-origin
   как координат viewBox в Chrome/Firefox/Safari. */
.ai-hal-sweep{transform-origin:16px 16px;transform-box:view-box;animation:aiHalSweep 3s linear infinite}
@keyframes aiHalSweep{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Зрачок: заметная пульсация 1→1.5→1 за 2s + саккада (см. ниже).
 * Анимации не конфликтуют: pulse трогает transform:scale, саккада — standalone
 * CSS-свойство translate (которое применяется до transform). */
.ai-hal-pupil{
  transform-origin:16px 16px;transform-box:view-box;
  animation:aiHalPulse 2s ease-in-out infinite;
}
@keyframes aiHalPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:0.92}
}
/* Радужка: лёгкое «дыхание» свечения + та же саккада что у зрачка
 * (со сдвигом анимации в 0s — синхронно с зрачком, иначе будут расходиться). */
.ai-hal-iris{
  animation:aiHalGlow 4s ease-in-out infinite;
}
@keyframes aiHalGlow{
  0%,100%{filter:none}
  50%{filter:drop-shadow(0 0 2px rgba(99,102,241,0.7))}
}
/* Поглядывание: глаз осмысленно «разглядывает» по сторонам — главная черта
 * характера Духа. Не быстрые дёрганья, а взгляд-в-сторону С ЗАДЕРЖКОЙ (dwell),
 * будто что-то рассматривает, потом возвращается к центру. Зрачок и радужка
 * двигаются вместе. Standalone-свойство translate (не transform:translate),
 * чтобы не конфликтовать с pulse-анимацией зрачка (transform:scale). Цикл 9s. */
@keyframes aiHalSaccade{
  0%, 12%   {translate:0 0}
  17%, 30%  {translate:3px -1px}         /* посмотрел вправо, разглядывает */
  35%, 46%  {translate:0 0}
  51%, 66%  {translate:-3.2px 0.6px}     /* перевёл взгляд влево, дольше держит */
  71%, 80%  {translate:0 0}
  84%, 90%  {translate:1px 2.4px}        /* глянул вниз */
  95%, 100% {translate:0 0}
}

/* LED scan-ring: 6 диодов, цикл 3s, stagger 0.5s. */
.ai-hal-led{opacity:0.4}
@keyframes aiHalLedScan{
  0%,16%,100%{opacity:0.4;filter:none}
  6%{opacity:1;filter:drop-shadow(0 0 2px #a5b4fc)}
}
.ai-hal-led-1{animation:aiHalLedScan 3s linear 0s infinite}
.ai-hal-led-2{animation:aiHalLedScan 3s linear 0.5s infinite}
.ai-hal-led-3{animation:aiHalLedScan 3s linear 1s infinite}
.ai-hal-led-4{animation:aiHalLedScan 3s linear 1.5s infinite}
.ai-hal-led-5{animation:aiHalLedScan 3s linear 2s infinite}
.ai-hal-led-6{animation:aiHalLedScan 3s linear 2.5s infinite}

/* На hover: усиленное свечение линзы + ускоренный sweep */
.ai-assistant-btn.ai-spirit:hover .ai-hal-iris{filter:drop-shadow(0 0 4px rgba(99,102,241,0.85))}
.ai-assistant-btn.ai-spirit:hover .ai-hal-sweep{animation-duration:1.5s}
.ai-assistant-btn.ai-spirit:hover .ai-hal-led{animation-duration:1.5s}

/* FAB-кнопка: без кольца-обводки — только сам глаз Духа Машины.
   (Раньше был индиго border + glow-ring; убрано по просьбе — 2026-07-07.) */
.ai-assistant-btn.ai-hal-btn{
  background:transparent;
  border:none;
  box-shadow:none;
}
.ai-assistant-btn.ai-hal-btn:hover{
  border:none;
  box-shadow:none;
}

/* ── Доп. «живость» Духа Машины (2026-05-28) — только крупные инстансы:
   FAB-кнопка + .ai-hal-wrap (шапка вкладки AI, drawer-mini). Мелкие inline-
   иконки в кнопках не трогаем (у них другой fill линзы). ── */

/* 1. Глаз (яркая линза .ai-hal-eye) живёт единым узлом — зрачок, ядро и блик
   двигаются СОГЛАСОВАННО, не разъезжаясь. Используем ДВА стендалон-свойства
   индивидуальных трансформаций (НЕ шорткат `transform`, иначе на SVG-группе они
   гасят друг друга): `translate` — поглядывание, `scale` — моргание (линза
   схлопывается в точку = закрытие объектива). Оба ≤ исходного → за viewBox не
   выходит (нет «квадрата»). transform-origin центр линзы. Моргание у drawer-mini
   сдвинуто фазой, чтобы инстансы не моргали в унисон. */
.ai-hal-eye{
  transform-origin:16px 16px;transform-box:view-box;
  animation:aiHalSaccade 8s ease-in-out infinite, aiHalLens 5.5s ease-in-out infinite;
}
.ai-hal-wrap .ai-hal-eye{animation-delay:0s,-2.6s}
@keyframes aiHalLens{               /* линза схлопывается в точку — объектив закрылся */
  0%,86%,100%{scale:1}
  91%{scale:.06}
  92.5%{scale:.06}
  97%{scale:1}
}

/* 2. Луч sweep-арки «пульсирует» свечением по мере вращения — эффект скан-луча.
   Отдельное свойство filter (вращение — transform), так что не конфликтует. */
.ai-hal-sweep{animation:aiHalSweep 3s linear infinite, aiHalBeam 3s ease-in-out infinite}
@keyframes aiHalBeam{
  0%,100%{filter:drop-shadow(0 0 .4px rgba(165,180,252,.35))}
  50%{filter:drop-shadow(0 0 2.5px rgba(165,180,252,.95))}
}

/* 3. НАСТРОЕНИЕ: радужка крупных инстансов медленно дрейфует по палитре эмоций —
   спокойный индиго → любопытный циан → мечтательный фиолет → свежий зелёный →
   тёплый янтарь. Долгий цикл (18s), переходы плавные — глаз будто «меняет
   настроение». Свойство fill (свечение — filter, поглядывание — translate), без
   конфликта. Скоупим, чтобы не перекрасить inline-иконки с белой линзой. */
.ai-hal-wrap .ai-hal-iris,
.ai-assistant-btn.ai-spirit .ai-hal-iris{
  animation:aiHalGlow 4s ease-in-out infinite, aiHalMood 18s ease-in-out infinite;
}
@keyframes aiHalMood{
  0%,100%{fill:#6366f1}    /* спокойствие — индиго */
  18%{fill:#818cf8}        /* лёгкость */
  38%{fill:#22d3ee}        /* любопытство — циан */
  56%{fill:#a78bfa}        /* задумчивость — фиолет */
  74%{fill:#34d399}        /* бодрость — зелёный */
  88%{fill:#fbbf24}        /* тепло — янтарь (редко, коротко) */
}

/* 4. На hover Дух «настораживается»: объектив раскрыт (моргание выкл — внимание),
   но продолжает поглядывать; зрачок пульсирует чаще, sweep/LED ускорены выше. */
.ai-assistant-btn.ai-spirit:hover .ai-hal-eye{animation:aiHalSaccade 9s ease-in-out infinite}
.ai-assistant-btn.ai-spirit:hover .ai-hal-pupil{animation-duration:.8s}

/* ── Редкие «настроения» Духа Машины (2026-06-01): однократные микро-движения,
   запускаются JS-планировщиком раз в ~50–110с (startSpiritMoods в app.js).
   Ambient-анимации (sweep/blink/pulse/iris) живут на внутренних элементах svg;
   настроения — на КОНТЕЙНЕРЕ (.ai-assistant-btn / .ai-hal-wrap) через transform
   и filter, которые в покое не анимированы → без конфликта с ambient. Класс
   снимается по animationend, поэтому каждое «настроение» проигрывается один раз. */
.ai-assistant-btn.ai-spirit.spirit-glance,
.ai-hal-wrap.spirit-glance{animation:spiritGlance 1.7s ease-in-out}
@keyframes spiritGlance{           /* «осматривается» — наклон головы влево-вправо */
  0%,100%{transform:rotate(0) translateY(0)}
  20%{transform:rotate(-7deg)}
  55%{transform:rotate(6deg)}
  80%{transform:rotate(-2deg)}
}
.ai-assistant-btn.ai-spirit.spirit-nudge,
.ai-hal-wrap.spirit-nudge{animation:spiritNudge 1.1s cubic-bezier(.34,1.56,.64,1)}
@keyframes spiritNudge{            /* «я здесь» — мягкий подскок с лёгким увеличением */
  0%,100%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-5px) scale(1.06)}
  55%{transform:translateY(0) scale(1)}
  72%{transform:translateY(-2px) scale(1.02)}
}
.ai-assistant-btn.ai-spirit.spirit-shudder,
.ai-hal-wrap.spirit-shudder{animation:spiritShudder .7s ease-in-out}
@keyframes spiritShudder{          /* «искра жизни» — короткая дрожь */
  0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-1.5px) rotate(-3deg)}
  40%{transform:translateX(1.5px) rotate(3deg)}
  60%{transform:translateX(-1px) rotate(-2deg)}
  80%{transform:translateX(1px) rotate(1deg)}
}
.ai-assistant-btn.ai-spirit.spirit-spark,
.ai-hal-wrap.spirit-spark{animation:spiritSpark 1.4s ease-out}
@keyframes spiritSpark{            /* «мысль» — мягкое индиго-гало (filter, не box-shadow,
                                      чтобы не затирать покойную тень FAB) */
  0%{filter:drop-shadow(0 0 0 rgba(129,140,248,0))}
  35%{filter:drop-shadow(0 0 7px rgba(129,140,248,.9))}
  100%{filter:drop-shadow(0 0 0 rgba(129,140,248,0))}
}

@media (prefers-reduced-motion: reduce){
  .ai-hal-pupil, .ai-hal-iris, .ai-hal-led, .ai-hal-sweep, .ai-hal-eye{animation:none}
  .ai-hal-led{opacity:0.7}
  .ai-hal-eye{transform:none;translate:0 0}
  .ai-hal-wrap .ai-hal-iris,
  .ai-assistant-btn.ai-spirit .ai-hal-iris{animation:none}
  /* «настроения» тоже глушим (JS их и не запустит, это страховка) */
  .spirit-glance,.spirit-nudge,.spirit-shudder,.spirit-spark{animation:none!important}
}

/* Profile: секция «Вход в портал» — привязка email + смена пароля */
.profile-auth-section{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border-subtle);
}
.profile-auth-section h4{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink-1)}
.profile-auth-info{margin-bottom:10px;font-size:13px;color:var(--ink-2)}
.profile-auth-methods b{color:var(--ink-1);font-weight:600}
.profile-link-form{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;border-radius:10px;
  background:var(--surface-2);
  border:1px solid var(--border-subtle);
}
.profile-link-form p{margin:0}
.profile-auth-row{
  display:flex;flex-direction:column;gap:4px;
  font-size:12.5px;color:var(--ink-2);
}
.profile-auth-row span{font-weight:500}
.profile-auth-row input{
  padding:8px 10px;border-radius:7px;
  border:1px solid var(--border-subtle);background:var(--surface);
  font:inherit;font-size:13px;color:var(--ink-1);
}
.profile-auth-row input:focus{
  outline:none;border-color:var(--brand,#6366f1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 15%,transparent);
}
.profile-link-form button{align-self:flex-start;margin-top:4px}
.profile-link-form .message{margin:4px 0 0}

/* Кнопка в состоянии «занят» — спиннер слева + disabled + readonly cursor.
 * Используется в email-link/смене пароля (см. _btnBusy в app.js).
 * Текст не подменяем, чтобы кнопка не «прыгала» — добавляем псевдо-элемент. */
.btn-busy{position:relative;cursor:wait;opacity:.85;pointer-events:none;padding-left:30px !important}
.btn-busy::before{
  content:"";position:absolute;left:10px;top:50%;
  width:13px;height:13px;margin-top:-7px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;
  animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* Короткая успешная вспышка кнопки: зелёная подсветка + чек слева. */
.btn-flash-ok{
  animation:btnFlashOk 1.3s ease-out;
  position:relative;
}
.btn-flash-ok::after{
  content:"✓";position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-weight:700;color:#22c55e;font-size:14px;line-height:1;
  animation:btnFlashCheck 1.3s ease-out forwards;pointer-events:none;
}
@keyframes btnFlashOk{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}
  20%{box-shadow:0 0 0 6px rgba(34,197,94,0.35)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes btnFlashCheck{
  0%{opacity:0;transform:translateY(-50%) scale(.6)}
  20%{opacity:1;transform:translateY(-50%) scale(1.15)}
  80%{opacity:1;transform:translateY(-50%) scale(1)}
  100%{opacity:0;transform:translateY(-50%) scale(1)}
}

/* Подсветка ввода после успеха (email/password): кратко мигает зелёным border. */
.profile-auth-row input.is-success-flash{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,0.22) !important;
  animation:authInputFlash 1.3s ease-out;
}
@keyframes authInputFlash{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}
  100%{box-shadow:0 0 0 3px rgba(34,197,94,0.22)}
}

@media (prefers-reduced-motion: reduce){
  .btn-busy::before{animation:none}
  .btn-flash-ok,.btn-flash-ok::after,.profile-auth-row input.is-success-flash{animation:none}
}

/* Token simulation — пульсирующий токен над элементом */
.bpmn-sim-token{
  position:relative;
  width:18px;height:18px;
}
.bpmn-sim-pulse{
  position:absolute;inset:0;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.7);
  animation:bpmnSimPulse 1.4s infinite;
}
.bpmn-sim-pulse::before{
  content:'';position:absolute;inset:3px;
  border-radius:50%;
  background:#fff;
}
@keyframes bpmnSimPulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.7)}
  70%{box-shadow:0 0 0 16px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* Comments — overlay-бейдж 💬N на элементе диаграммы */
.bpmn-comment-overlay{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:99px;
  background:var(--apricot,#f59e0b);color:#fff;
  font-size:10px;font-weight:600;line-height:1;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(245,158,11,.35);
  transition:transform .12s ease;
}
.bpmn-comment-overlay:hover{transform:scale(1.08)}
.bpmn-comment-overlay svg{flex-shrink:0}

/* Comments popup */
.bpmn-comments-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(15,23,42,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .2s ease-out;
}
.bpmn-comments-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:14px;
  width:min(560px,100%);max-height:80vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.bpmn-comments-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.bpmn-comments-head h3{margin:0;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.bpmn-comments-el{
  font-size:12px;color:var(--ink-3);font-weight:500;
  padding:3px 8px;border-radius:99px;background:var(--surface-2);
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bpmn-comments-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;cursor:pointer;
  color:var(--ink-3);padding:0;
}
.bpmn-comments-close:hover{background:var(--surface-2);color:var(--ink)}

.bpmn-comments-list{
  flex:1;overflow-y:auto;padding:10px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.bpmn-comments-empty{
  padding:32px 12px;text-align:center;color:var(--ink-3);font-size:13px;font-style:italic;
}
.bpmn-comment-item{
  display:flex;gap:10px;
  padding:10px 12px;border-radius:8px;
  background:var(--surface-2);
}
.bpmn-comment-item.is-mine{background:color-mix(in srgb,var(--brand,#6366f1) 8%,transparent)}
.bpmn-comment-avatar{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand,#6366f1);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.02em;
}
.bpmn-comment-body{flex:1;min-width:0}
.bpmn-comment-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);margin-bottom:4px;
}
.bpmn-comment-meta b{color:var(--ink-1);font-weight:600}
.bpmn-comment-ts{font-size:11.5px}
.bpmn-comment-actions{margin-left:auto;display:inline-flex;gap:2px}
.bpmn-comment-actions button{
  background:transparent;border:0;cursor:pointer;
  width:22px;height:22px;border-radius:5px;
  color:var(--ink-3);font-size:13px;line-height:1;
  padding:0;display:inline-flex;align-items:center;justify-content:center;
}
.bpmn-comment-actions button:hover{background:var(--surface);color:var(--ink-1)}
.bpmn-comment-actions button[data-act="del"]:hover{background:color-mix(in srgb,var(--coral,#ef4444) 14%,transparent);color:var(--coral,#ef4444)}
.bpmn-comment-text{
  font-size:13.5px;color:var(--ink-1);line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}

.bpmn-comments-form{
  display:flex;gap:8px;align-items:flex-end;
  padding:12px 14px;border-top:1px solid var(--border-subtle);
  background:var(--surface);
}
.bpmn-comments-form textarea{
  flex:1;padding:8px 10px;border-radius:7px;
  border:1px solid var(--border-subtle);background:var(--surface);
  font:inherit;font-size:13px;color:var(--ink-1);
  resize:vertical;min-height:36px;max-height:160px;
  font-family:inherit;
}
.bpmn-comments-form textarea:focus{outline:none;border-color:var(--brand,#6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 15%,transparent)}

/* Mini-toolbar — плавающее меню при выделении элемента BPMN */
.bpmn-mini-toolbar{
  position:fixed;z-index:201;
  display:inline-flex;align-items:center;gap:1px;
  background:var(--surface,#fff);
  border:1px solid var(--border-subtle);
  border-radius:9px;
  box-shadow:0 6px 20px rgba(15,23,42,.18);
  padding:3px;
  animation:bpmnMiniIn .14s ease-out;
}
@keyframes bpmnMiniIn{
  from{opacity:0;transform:translate(-50%,-100%) scale(.94)}
}
.bpmn-mini-toolbar[hidden]{display:none}
.bpmn-mini-toolbar[data-placement="bottom"]{
  animation:bpmnMiniInBottom .14s ease-out;
}
@keyframes bpmnMiniInBottom{
  from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.94)}
}
/* Стрелочка-указатель снизу (когда toolbar над элементом) */
.bpmn-mini-toolbar::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:100%;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:6px solid var(--surface,#fff);
  filter:drop-shadow(0 1px 0 var(--border-subtle));
}
.bpmn-mini-toolbar[data-placement="bottom"]::after{
  top:auto;bottom:100%;
  border-top:none;border-bottom:6px solid var(--surface,#fff);
}
.bpmn-mini-toolbar button{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:transparent;border:0;border-radius:6px;
  color:var(--ink-2);cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.bpmn-mini-toolbar button:hover{
  background:color-mix(in srgb,var(--brand,#6366f1) 12%,transparent);
  color:var(--brand,#6366f1);
}
.bpmn-mini-toolbar button.bpmn-mini-danger:hover{
  background:color-mix(in srgb,var(--coral,#ef4444) 12%,transparent);
  color:var(--coral,#ef4444);
}
[data-theme="dark"] .bpmn-mini-toolbar{background:#1f2937;border-color:#374151}
[data-theme="dark"] .bpmn-mini-toolbar::after{border-top-color:#1f2937}
[data-theme="dark"] .bpmn-mini-toolbar[data-placement="bottom"]::after{border-bottom-color:#1f2937}

/* History modal — список версий + diff */
.bpmn-history-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(15,23,42,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .2s ease-out;
}
.bpmn-history-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:14px;
  width:min(1100px,100%);height:min(80vh,720px);
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.bpmn-history-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.bpmn-history-head h3{margin:0;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.bpmn-history-current{
  font-size:11.5px;color:var(--ink-3);font-weight:500;
  padding:3px 8px;border-radius:99px;background:var(--surface-2);
}
.bpmn-history-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;cursor:pointer;
  color:var(--ink-3);padding:0;
}
.bpmn-history-close:hover{background:var(--surface-2);color:var(--ink)}

.bpmn-history-body{
  flex:1;display:flex;min-height:0;
}
.bpmn-history-list{
  width:240px;flex-shrink:0;overflow-y:auto;
  border-right:1px solid var(--border-subtle);
  padding:8px;
  display:flex;flex-direction:column;gap:4px;
}
.bpmn-history-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  background:transparent;border:1px solid transparent;
  cursor:pointer;font:inherit;text-align:left;width:100%;
  transition:all .12s ease;
}
.bpmn-history-item:hover{background:var(--surface-2)}
.bpmn-history-item.active{
  background:color-mix(in srgb,var(--brand,#6366f1) 10%,transparent);
  border-color:color-mix(in srgb,var(--brand,#6366f1) 30%,transparent);
}
.bpmn-history-v{
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:600;
  color:var(--brand,#6366f1);min-width:32px;
}
.bpmn-history-meta{flex:1;min-width:0}
.bpmn-history-author{font-size:13px;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpmn-history-ts{font-size:11px;color:var(--ink-3);margin-top:2px}
.bpmn-history-empty{
  padding:24px 12px;text-align:center;color:var(--ink-3);font-size:13px;
}

.bpmn-history-diff{
  flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.bpmn-history-diff-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13px;font-style:italic;padding:24px;text-align:center;
}
.bpmn-history-diff-actions{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-2);
}
.bpmn-history-diff-label{font-size:13px;font-weight:600;color:var(--ink-1)}
.bpmn-history-diff-label small{color:var(--ink-3);font-weight:400;margin:0 4px}

.bpmn-history-diff-pre{
  flex:1;overflow:auto;
  margin:0;padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:12px;line-height:1.5;
  white-space:pre;
  background:var(--surface);
}
.bpmn-history-diff-pre .diff-eq{color:var(--ink-3)}
.bpmn-history-diff-pre .diff-add{
  color:#0a6e3a;background:color-mix(in srgb,var(--mint,#10b981) 10%,transparent);
  display:block;
}
.bpmn-history-diff-pre .diff-del{
  color:#a01010;background:color-mix(in srgb,var(--coral,#ef4444) 10%,transparent);
  display:block;
}
[data-theme="dark"] .bpmn-history-diff-pre .diff-add{color:#86efac;background:rgba(16,185,129,.12)}
[data-theme="dark"] .bpmn-history-diff-pre .diff-del{color:#fca5a5;background:rgba(239,68,68,.12)}

.bpmn-history-foot{
  padding:8px 14px;border-top:1px solid var(--border-subtle);
  color:var(--ink-3);font-size:11.5px;
}

@media (max-width:768px){
  .bpmn-history-card{width:100%;height:100%;border-radius:0}
  .bpmn-history-list{width:200px}
}

/* Keyboard cheat-sheet overlay */
.bpmn-keys-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(15,23,42,.45);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .2s ease-out;
}
.bpmn-keys-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:14px;padding:18px 22px;
  width:min(480px,100%);max-height:80vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.bpmn-keys-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bpmn-keys-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.bpmn-keys-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);padding:0;
}
.bpmn-keys-close:hover{background:var(--surface-2);color:var(--ink)}
.bpmn-keys-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:6px;
}
.bpmn-keys-list li{
  display:flex;align-items:center;gap:14px;
  padding:8px 4px;border-bottom:1px solid var(--border-subtle);
  font-size:13.5px;
}
.bpmn-keys-list li:last-child{border-bottom:0}
.bpmn-keys-list kbd{
  display:inline-block;flex-shrink:0;min-width:120px;
  padding:4px 10px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;font-weight:500;
  color:var(--ink-1);
}
.bpmn-keys-list span{color:var(--ink-2)}
.bpmn-keys-foot{margin-top:12px;text-align:center;color:var(--ink-3)}
.bpmn-keys-foot small{font-size:11.5px}
.ai-drawer-close{
  width:30px;height:30px;border-radius:8px;border:none;background:transparent;
  font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer;
}
.ai-drawer-close:hover{background:rgba(0,0,0,.06);color:var(--ink)}

.ai-drawer-context{
  padding:8px 18px;font-size:11px;color:var(--ink-2);
  border-bottom:1px solid var(--border-subtle);background:var(--surface-2);
  display:none;
}
.ai-drawer-context:not(:empty){display:block}

.ai-drawer-messages{
  flex:1;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
}
.ai-drawer-messages::-webkit-scrollbar{width:6px}
.ai-drawer-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}

.ai-msg{
  max-width:88%;padding:10px 14px;border-radius:14px;
  font-size:14px;line-height:1.5;color:var(--ink);
  word-wrap:break-word;white-space:pre-wrap;
  animation:fadeIn .25s ease-out both;
}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);color:#fff;border-bottom-right-radius:4px}
.ai-msg.ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border-subtle);border-bottom-left-radius:4px}
.ai-msg.error{align-self:flex-start;background:#fff1f0;border:1px solid #ffccc7;color:#c00;border-bottom-left-radius:4px}
.ai-msg.system{align-self:center;background:transparent;color:var(--ink-3);font-size:12px;font-style:italic;padding:4px 8px}

.ai-typing{display:inline-flex;align-items:center;gap:4px;padding:4px 0}
.ai-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  animation:aiTypingDot 1.2s infinite ease-in-out both;
}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiTypingDot{
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}

.ai-drawer-form{
  display:flex;align-items:flex-end;gap:8px;
  padding:12px 14px;border-top:1px solid var(--border-subtle);
  background:var(--surface);
}
.ai-drawer-form textarea{
  flex:1;resize:none;max-height:140px;
  padding:10px 12px;border:1px solid var(--border-subtle);border-radius:12px;
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
.ai-drawer-form textarea:focus{border-color:var(--lavender);box-shadow:0 0 0 3px var(--lavender-soft)}
.ai-drawer-form textarea:disabled{opacity:.6;cursor:not-allowed}
.ai-drawer-send{
  width:38px;height:38px;border-radius:10px;border:none;
  background:linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s ease, opacity .12s ease;
}
.ai-drawer-send:hover{transform:translateY(-1px)}
.ai-drawer-send:disabled{opacity:.5;cursor:not-allowed;transform:none}

.ai-tools-row,.ai-task-tools{
  align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;
  max-width:88%;margin:-4px 0 8px;
}
.ai-task-tools{margin:6px 0 6px}
.ai-tool-pill{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  color:var(--ink-2);font-size:11.5px;font-weight:500;line-height:1.4;
  cursor:default;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.ai-tool-pill.is-err{background:#fff1f0;border-color:#ffccc7;color:#c00}
.ai-tool-pill.is-link{cursor:pointer;color:var(--lavender);border-color:color-mix(in srgb,var(--lavender) 35%,transparent)}
.ai-tool-pill.is-link:hover{background:var(--lavender-soft)}
[data-theme="dark"] .ai-tool-pill{background:#22232a;border-color:#2b2d35;color:#a5a8b3}
[data-theme="dark"] .ai-tool-pill.is-err{background:#3a1f1f;border-color:#5b2d2d;color:#ffaaa5}

.ai-msg-empty{
  align-self:center;color:var(--ink-3);font-size:13px;text-align:center;
  padding:24px 16px;line-height:1.6;
}
.ai-msg-empty b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:6px;font-size:14px}

@media (max-width:600px){
  .ai-drawer{width:100%}
  .ai-assistant-btn{right:16px;bottom:16px;width:48px;height:48px}
}

[data-theme="dark"] .ai-drawer{background:#1c1d22;border-left-color:#2b2d35}
[data-theme="dark"] .ai-drawer-head{background:linear-gradient(135deg, rgba(200,184,240,.15) 0%, rgba(146,196,240,.15) 100%);border-bottom-color:#2b2d35}
[data-theme="dark"] .ai-drawer-title{color:#e8e9ed}
[data-theme="dark"] .ai-drawer-context{background:#22232a;border-bottom-color:#2b2d35;color:#a5a8b3}
[data-theme="dark"] .ai-msg.ai{background:#22232a;border-color:#2b2d35;color:#e8e9ed}
[data-theme="dark"] .ai-msg.error{background:#3a1f1f;border-color:#5b2d2d;color:#ffaaa5}
[data-theme="dark"] .ai-drawer-form{background:#1c1d22;border-top-color:#2b2d35}
[data-theme="dark"] .ai-drawer-form textarea{background:#22232a;border-color:#2b2d35;color:#e8e9ed}
[data-theme="dark"] .ai-drawer-close:hover{background:rgba(255,255,255,.08);color:#e8e9ed}

/* ─── BPMN online editor (Phase 5) ───────────────────────────────────── */
.bpmn-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.bpmn-search-input{
  padding:7px 12px;border-radius:8px;
  border:1px solid var(--border-subtle);background:var(--surface);
  font:inherit;font-size:13px;color:var(--ink-1);
  min-width:240px;
}
.bpmn-search-input:focus{outline:none;border-color:var(--brand,#6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#6366f1) 15%,transparent)}
.bpmn-sort-sel{
  padding:7px 28px 7px 12px;border-radius:8px;
  border:1px solid var(--border-subtle);background:var(--surface);
  font:inherit;font-size:13px;color:var(--ink-1);
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%236b7280' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.bpmn-sort-sel:focus{outline:none;border-color:var(--brand,#6366f1)}
.bpmn-h{margin:0;font-size:20px;font-weight:600;color:var(--ink-1)}
.bpmn-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}

.bpmn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bpmn-list-empty{padding:32px 18px;text-align:center;color:var(--ink-3);font-size:14px;border:1.5px dashed var(--border);border-radius:14px;grid-column:1/-1}

.bpmn-card{
  display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  cursor:pointer;transition:all .15s ease;position:relative;overflow:hidden;
}
.bpmn-card:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(99,102,241,.14);transform:translateY(-1px)}
.bpmn-card-thumb-wrap{
  position:relative;width:100%;aspect-ratio:16/9;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--brand) 4%,transparent) 0%, transparent 100%),
    radial-gradient(circle at 10% 10%, color-mix(in srgb,var(--brand) 6%,transparent) 0%, transparent 60%),
    var(--surface-2, #f8fafc);
  display:grid;place-items:center;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.bpmn-card-thumb{
  max-width:100%;max-height:100%;object-fit:contain;
  /* SVG бывает крупнее карточки — slight padding чтобы не приклеивалось к краям */
  padding:12px;display:block;
}
.bpmn-card-thumb-placeholder{
  font-size:42px;opacity:.45;line-height:1;user-select:none;
}
.bpmn-card-body{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
/* Старый .bpmn-card-icon (внутри редактора уже не используется, оставлен на всякий) */
.bpmn-card-icon{font-size:24px;flex-shrink:0;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--brand) 10%,transparent)}
.bpmn-card-title{font-weight:600;font-size:14.5px;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpmn-card-meta{font-size:12px;color:var(--ink-3)}
.bpmn-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bpmn-vis{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;font-size:11px;line-height:1.4;font-weight:500;
  border:1px solid transparent;white-space:nowrap;
}
.bpmn-vis-priv{background:color-mix(in srgb,#94a3b8 14%,#fff);color:#475569;border-color:color-mix(in srgb,#94a3b8 22%,transparent)}
.bpmn-vis-team{background:color-mix(in srgb,#6366f1 12%,#fff);color:#4f46e5;border-color:color-mix(in srgb,#6366f1 22%,transparent)}
.bpmn-vis-all{background:color-mix(in srgb,#10b981 14%,#fff);color:#047857;border-color:color-mix(in srgb,#10b981 22%,transparent)}
.bpmn-card-actions{
  position:absolute;top:8px;right:8px;
  display:flex;gap:6px;
  opacity:.78;transition:opacity .15s;
}
.bpmn-card:hover .bpmn-card-actions,
.bpmn-card:focus-within .bpmn-card-actions{opacity:1}
.bpmn-card-act{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  color:var(--ink-2);cursor:pointer;
  display:inline-grid;place-items:center;transition:all .12s;
  box-shadow:0 1px 3px rgba(15,18,25,.10);
  padding:0;line-height:0;
}
.bpmn-card-act svg{display:block}
.bpmn-card-act:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(15,18,25,.16)}
.bpmn-card-share:hover{background:color-mix(in srgb,var(--brand,#6366f1) 12%,#fff);color:var(--brand,#6366f1);border-color:color-mix(in srgb,var(--brand,#6366f1) 35%,transparent)}
.bpmn-card-del:hover{background:color-mix(in srgb,var(--coral,#ef4444) 12%,#fff);color:var(--coral,#ef4444);border-color:color-mix(in srgb,var(--coral,#ef4444) 35%,transparent)}
[data-theme="dark"] .bpmn-card-act{background:rgba(31,41,55,.92);border-color:#374151;color:#cbd5e1}
[data-theme="dark"] .bpmn-card-share:hover{background:color-mix(in srgb,var(--brand,#6366f1) 22%,#1f2937);color:#c7d2fe}
[data-theme="dark"] .bpmn-card-del:hover{background:color-mix(in srgb,var(--coral,#ef4444) 22%,#1f2937);color:#fca5a5}

/* ── BPMN search overlay (Ctrl+F в редакторе) ── */
.bpmn-search-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(15,18,25,.36);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:96px;
  animation:fadeIn .15s ease-out;
}
.bpmn-search-pad{
  width:min(560px,90vw);background:var(--surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -16px rgba(15,18,25,.34);
  overflow:hidden;
}
.bpmn-search-pad-input{
  width:100%;padding:14px 18px;font-size:15px;
  border:none;border-bottom:1px solid var(--border);
  background:transparent;color:var(--ink-1);outline:none;
}
.bpmn-search-pad-results{max-height:55vh;overflow-y:auto}
.bpmn-search-pad-row{
  padding:10px 18px;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  transition:background .1s;
}
.bpmn-search-pad-row:hover,.bpmn-search-pad-row:focus{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.bpmn-search-pad-row-name{font-weight:500;font-size:14px;color:var(--ink-1)}
.bpmn-search-pad-row-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-family:monospace}
.bpmn-search-pad-empty{padding:24px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── BPMN templates modal ── */
.bpmn-tpl-modal{
  width:min(820px,92vw);max-height:88vh;display:flex;flex-direction:column;
}
.bpmn-tpl-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.bpmn-tpl-head h3{margin:0;font-size:18px;font-weight:600}
.bpmn-tpl-close{
  width:32px;height:32px;border:none;background:transparent;color:var(--ink-3);
  font-size:22px;line-height:1;cursor:pointer;border-radius:8px;
  display:grid;place-items:center;transition:background .12s;
}
.bpmn-tpl-close:hover{background:color-mix(in srgb,var(--ink-1) 8%,transparent)}
.bpmn-tpl-body{
  padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}
.bpmn-tpl-name-label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.bpmn-tpl-name-label input{
  padding:10px 12px;font-size:14px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--ink-1);
}
.bpmn-tpl-name-label input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.bpmn-tpl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}
.bpmn-tpl-card{
  padding:14px;border:1.5px solid var(--border);border-radius:12px;
  cursor:pointer;transition:all .12s;
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);
}
.bpmn-tpl-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.bpmn-tpl-card.is-selected{
  border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent);
}
.bpmn-tpl-card-icon{font-size:22px;line-height:1}
.bpmn-tpl-card-name{font-weight:600;font-size:13.5px;color:var(--ink-1)}
.bpmn-tpl-card-desc{font-size:11.5px;color:var(--ink-3);line-height:1.45;flex:1}
.bpmn-tpl-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-2,transparent);
}

/* ── BPMN color picker (paint button + popover) ── */
.bpmn-color-wrap{position:relative;display:inline-flex}
.bpmn-icon-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.bpmn-color-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:1080;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(15,18,25,.22);
  padding:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  width:max-content;
  animation:bpmnPopIn .12s ease-out;
}
.bpmn-color-pop[hidden]{display:none}

/* ── BPMN AI agent: единое поле ввода + блок результата ── */
.bpmn-agent-result{
  margin-top:12px;padding:12px;
  background:var(--surface-2,#f9fafb);border:1px solid var(--border);
  border-radius:10px;
}
.bpmn-agent-result[hidden]{display:none}
.bpmn-agent-result-head{
  font-size:12px;font-weight:600;color:var(--text-2,#666);
  margin-bottom:6px;letter-spacing:.02em;
}
.bpmn-agent-result-body{
  font-size:13px;line-height:1.5;color:var(--text);
  max-height:280px;overflow-y:auto;
}
.bpmn-agent-result-actions{
  display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;
}
.bpmn-agent-result-actions button{font-size:12px;padding:5px 12px}

/* ── BPMN AI agent input ── */
.bpmn-gen-input{
  width:100%;border:1.5px solid var(--border);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;
  background:var(--surface);color:var(--text);
  resize:vertical;min-height:90px;
  transition:border-color .12s;
}
.bpmn-gen-input:focus{outline:none;border-color:var(--brand,#6c8ef5);box-shadow:0 0 0 3px rgba(108,142,245,.15)}
.bpmn-gen-examples{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:10px;
}
.bpmn-gen-ex-label{font-size:12px;color:var(--text-2,#888);margin-right:4px}
.bpmn-gen-ex{
  font:inherit;font-size:12px;
  padding:4px 10px;border-radius:99px;
  background:var(--surface-2,#f3f4f6);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  transition:background .12s, border-color .12s;
}
.bpmn-gen-ex:hover{background:var(--brand-soft,rgba(108,142,245,.1));border-color:var(--brand,#6c8ef5)}
.bpmn-gen-status{
  margin-top:10px;padding:8px 12px;border-radius:8px;
  background:rgba(108,142,245,.1);color:var(--brand,#6c8ef5);
  font-size:13px;
}
.bpmn-gen-status.err{background:rgba(239,68,68,.1);color:var(--coral,#ef4444)}
.bpmn-gen-status[hidden]{display:none}

/* ── BPMN validation panel ── */
.bpmn-validate-badge{
  position:absolute;top:2px;right:2px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--coral,#ef4444);color:#fff;
  border-radius:99px;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;
}
.bpmn-validate-badge[hidden]{display:none}
#bpmnValidateBtn{position:relative}
.bpmn-validate-panel{
  position:absolute;right:12px;top:60px;bottom:12px;width:320px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(15,18,25,.18);
  display:flex;flex-direction:column;
  z-index:1075;animation:bpmnPopIn .15s ease-out;
}
.bpmn-validate-panel[hidden]{display:none}
.bpmn-validate-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);
}
.bpmn-validate-head h4{margin:0;font-size:14px;font-weight:600}
.bpmn-validate-close{
  background:transparent;border:0;font-size:20px;line-height:1;
  cursor:pointer;color:var(--text-2,#888);padding:2px 6px;border-radius:6px;
}
.bpmn-validate-close:hover{background:var(--surface-2,#f3f4f6);color:var(--text)}
.bpmn-validate-body{
  flex:1;overflow-y:auto;padding:10px 14px;
}
.bpmn-val-summary{
  display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;
}
.bpmn-val-pill{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
}
.bpmn-val-pill.err{background:rgba(239,68,68,.12);color:var(--coral,#ef4444)}
.bpmn-val-pill.warn{background:rgba(245,158,11,.15);color:#b45309}
.bpmn-val-list{display:flex;flex-direction:column;gap:6px}
.bpmn-val-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--border);
  font:inherit;text-align:left;color:var(--text);
  transition:background .12s,transform .08s;
}
.bpmn-val-item:hover{background:var(--surface-2,#f3f4f6);transform:translateX(2px)}
.bpmn-val-item:not([data-el]){cursor:default;opacity:.85}
.bpmn-val-item:not([data-el]):hover{transform:none}
.bpmn-val-icon{
  flex:0 0 18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.bpmn-val-item.error .bpmn-val-icon{background:var(--coral,#ef4444)}
.bpmn-val-item.warn .bpmn-val-icon{background:#f59e0b}
.bpmn-val-msg{flex:1;font-size:13px;line-height:1.4}
.bpmn-val-empty{
  text-align:center;padding:30px 10px;color:var(--text-2,#888);
}
.bpmn-val-empty-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(16,185,129,.15);color:#059669;
  font-size:22px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0 auto 8px;
}
.bpmn-val-empty small{display:block;margin-top:4px;font-size:12px;opacity:.7}

/* На мобильных — full-width drawer снизу */
@media (max-width:768px){
  .bpmn-validate-panel{
    right:8px;left:8px;top:auto;width:auto;
    bottom:8px;max-height:60vh;
  }
}
@keyframes bpmnPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.bpmn-swatch{
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--border);
  transition:transform .1s, box-shadow .1s;
  padding:0;
}
.bpmn-swatch:hover{transform:scale(1.12);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.bpmn-swatch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.bpmn-swatch-reset{
  background:
    linear-gradient(45deg, transparent calc(50% - 1.5px), var(--coral,#ef4444) calc(50% - 1.5px), var(--coral,#ef4444) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    repeating-linear-gradient(45deg, #fff 0 4px, #f3f4f6 4px 8px);
  border-color:var(--border);
}

/* ── BPMN fullscreen-режим (Storm BPMN-style) ─────────────────────────
   При входе в редактор BPMN: <body class="bpmn-fullscreen"> + сам shell
   позиционирован fixed-overlay, чтобы не зависеть от layout портала.
   Возврат на список снимает класс. */
body.bpmn-fullscreen{overflow:hidden}
body.bpmn-fullscreen .ai-assistant-btn{display:none!important}

.bpmn-shell{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100vw;height:100vh;
  z-index:200;
  display:flex;flex-direction:column;
  background:var(--surface,#fff);
  overflow:hidden;
}

/* Topbar — компактная горизонтальная плашка (Storm BPMN / Camunda Modeler) */
.bpmn-topbar{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  height:48px;flex-shrink:0;
  padding:0 12px;
  background:var(--surface);
  border-bottom:1px solid var(--border-subtle);
}
.bpmn-topbar-divider{
  width:1px;height:22px;background:var(--border-subtle);margin:0 2px;flex-shrink:0;
}
.bpmn-editor-title{
  flex:1;min-width:80px;
  font-weight:600;font-size:14px;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.01em;
  padding:0 4px;
}
.bpmn-editor-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;white-space:nowrap;
  padding:0 6px;
}
.bpmn-editor-status:empty{display:none}
.bpmn-status-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ink-3);
  flex-shrink:0;
}
.bpmn-status-saved{color:var(--mint,#10b981)}
.bpmn-status-saved .bpmn-status-dot{background:var(--mint,#10b981)}
.bpmn-status-saving{color:var(--ink-2)}
.bpmn-status-saving .bpmn-status-dot{background:var(--brand,#6366f1);animation:bpmnSaveSpin 1s linear infinite}
.bpmn-status-dirty{color:var(--apricot,#f59e0b)}
.bpmn-status-dirty .bpmn-status-dot{background:var(--apricot,#f59e0b)}
.bpmn-status-error{color:var(--coral,#ef4444)}
.bpmn-status-error .bpmn-status-dot{background:var(--coral,#ef4444)}
@keyframes bpmnSaveSpin{
  0%{transform:scale(.6);opacity:.4}
  50%{transform:scale(1);opacity:1}
  100%{transform:scale(.6);opacity:.4}
}

/* Иконочные кнопки toolbar — единый компактный стиль */
.bpmn-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:32px;height:32px;padding:0;flex-shrink:0;
  background:transparent;border:0;border-radius:7px;
  color:var(--ink-2,#6b7280);cursor:pointer;
  font:inherit;font-size:12.5px;
  transition:background .12s ease, color .12s ease;
}
.bpmn-icon-btn:hover{
  background:color-mix(in srgb,var(--brand,#6366f1) 10%,transparent);
  color:var(--brand,#6366f1);
}
.bpmn-icon-btn:active{
  background:color-mix(in srgb,var(--brand,#6366f1) 20%,transparent);
}
.bpmn-icon-btn:disabled{opacity:.35;cursor:not-allowed}
.bpmn-icon-btn:disabled:hover{background:transparent;color:var(--ink-2)}
.bpmn-icon-btn svg{flex-shrink:0;width:16px;height:16px}

/* «К списку» — с лейблом */
.bpmn-back-btn{
  width:auto;padding:0 10px 0 8px;
  background:var(--surface-2);
  color:var(--ink-1);
  border:1px solid var(--border-subtle);
}
.bpmn-back-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.bpmn-back-label{font-size:12.5px;font-weight:500}

/* Tool-group — без обёртки, только разделители (как у zoom-strip) */
.bpmn-tb-group{
  display:inline-flex;align-items:center;gap:1px;flex-shrink:0;
  background:var(--surface-2);border-radius:7px;
  padding:2px;
}
.bpmn-tb-group .bpmn-icon-btn{width:28px;height:28px;border-radius:5px}

/* Save — accent-кнопка, главное действие */
.bpmn-save-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  height:32px;padding:0 14px;
  background:var(--brand,#6366f1);color:#fff;
  border:0;border-radius:7px;
  font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;
  transition:background .12s ease, transform .12s ease;
}
.bpmn-save-btn svg{width:14px;height:14px}
.bpmn-save-btn:hover{background:var(--brand-2,#4f46e5);transform:translateY(-1px)}
.bpmn-save-btn:active{transform:translateY(0)}
.bpmn-save-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--ink-3)}

/* На узких экранах — скрываем лейблы и тулбар-разделитель,
   оставляем только иконки. Сохраняем читаемость через title. */
@media (max-width:1024px){
  .bpmn-back-label,.bpmn-topbar-divider{display:none}
  .bpmn-back-btn{width:32px;padding:0;justify-content:center}
}
@media (max-width:768px){
  .bpmn-editor-status{display:none}
  .bpmn-save-btn span{display:none}
  .bpmn-save-btn{width:32px;padding:0;justify-content:center}
}

/* Workspace = canvas + properties panel.
   Явные width/height нужны в дополнение к flex:1 — без них на некоторых
   layout-комбинациях (position:fixed parent + flex children) контейнер
   не получает размер. */
.bpmn-workspace{
  display:flex;flex:1 1 0%;min-height:0;height:100%;
  background:var(--surface-2,#f8f9fa);
  overflow:hidden;
}
.bpmn-canvas{
  position:relative;flex:1 1 0%;
  width:100%;height:100%;
  min-width:200px;
  background:var(--surface,#fff);
  overflow:hidden;
  /* Subtle dot-grid pattern — даёт ощущение «холста», как в Storm BPMN/Miro */
  background-image:radial-gradient(circle,var(--border-subtle) 1px,transparent 1px);
  background-size:20px 20px;
}
.bpmn-canvas .djs-container{height:100%;width:100%;background:transparent}
.bpmn-init-msg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--ink-3);font-size:14px;
  display:flex;align-items:center;gap:10px;
  z-index:5;
}
.bpmn-init-msg::before{
  content:'';width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border-subtle);border-top-color:var(--brand,#6366f1);
  animation:bpmnAiSpin .8s linear infinite;
}

/* «Powered by bpmn.io» обязателен по bpmn.io license — оставляем видимым.
   Только лёгкая стилизация, чтобы не выпадал из дизайна. */
.bpmn-canvas .bjs-powered-by{
  opacity:.55;
  font-size:11px;
}

/* bpmn-js нативные элементы — палитра слева, минимап справа.
   Нативные стили нормальные, но мы немного полишим под наш дизайн. */
.bpmn-canvas .djs-palette{
  border-radius:8px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.04)!important;
  border:1px solid var(--border-subtle)!important;
  background:var(--surface)!important;
  top:14px!important;left:14px!important;
}
.bpmn-canvas .djs-palette .entry:hover{background:var(--surface-2)!important}

/* Минимап — округлённый, чуть тоньше тень */
.bpmn-canvas .djs-minimap{
  bottom:14px!important;right:14px!important;top:auto!important;
  border-radius:8px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.06)!important;
  border:1px solid var(--border-subtle)!important;
}

/* Properties Panel — справа, с резайз-делителем */
.bpmn-props-panel{
  width:320px;flex-shrink:0;
  background:var(--surface);
  border-left:1px solid var(--border-subtle);
  overflow:auto;
  font-size:13px;
  transition:width .2s ease, opacity .2s ease;
  position:relative;
}
.bpmn-props-panel:empty::before{
  content:'';display:block;padding:0;
}
/* Empty state теперь не нужен — bpmn-properties-panel сам показывает
   родное «Выберите элемент» сообщение в своём UI стиле. */

/* Кастомный scrollbar для props panel */
.bpmn-props-panel::-webkit-scrollbar{width:6px}
.bpmn-props-panel::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:3px}

/* Свёрнутый режим панели */
.bpmn-workspace.panel-collapsed .bpmn-props-panel{
  width:0;opacity:0;border-left:0;
  pointer-events:none;
  overflow:hidden;
}

/* Адаптив:
   - 1200px+ : полный layout (panel 320px)
   - 900-1200px: panel чуть уже (260px)
   - <900px: panel поверх canvas как drawer, по умолчанию скрыт */
@media (max-width:1200px) and (min-width:901px){
  .bpmn-props-panel{width:280px}
}
@media (max-width:900px){
  .bpmn-props-panel{
    position:absolute;right:0;top:0;bottom:0;
    width:300px;max-width:80vw;
    z-index:50;
    box-shadow:-4px 0 16px rgba(0,0,0,.08);
    border-left:1px solid var(--border-subtle);
  }
  /* На малых экранах ВСЕГДА свёрнута — открывается только по кнопке */
  .bpmn-workspace .bpmn-props-panel{transform:translateX(100%)}
  .bpmn-workspace.panel-open .bpmn-props-panel{
    transform:translateX(0);width:300px;opacity:1;
  }
  .bpmn-canvas .djs-minimap{bottom:14px!important;right:14px!important}
}

/* Dark-режим — диаграмма остаётся светлой (BPMN-стандарт), но shell тёмный */
[data-theme="dark"] .bpmn-shell{background:#0f172a}
[data-theme="dark"] .bpmn-topbar{background:#1f2937;border-bottom-color:#374151}
[data-theme="dark"] .bpmn-workspace{background:#111827}
[data-theme="dark"] .bpmn-canvas{background:#fafafa;color:#1a1a1a}
[data-theme="dark"] .bpmn-props-panel{background:#1f2937;border-left-color:#374151;color:#f3f4f6}

[data-theme="dark"] .bpmn-card{background:#1f2937;border-color:#374151}
[data-theme="dark"] .bpmn-card-icon{background:rgba(99,102,241,.18)}
[data-theme="dark"] .bpmn-vis-priv{background:rgba(148,163,184,.18);color:#cbd5e1;border-color:rgba(148,163,184,.32)}
[data-theme="dark"] .bpmn-vis-team{background:rgba(99,102,241,.22);color:#a5b4fc;border-color:rgba(99,102,241,.36)}
[data-theme="dark"] .bpmn-vis-all{background:rgba(16,185,129,.20);color:#6ee7b7;border-color:rgba(16,185,129,.36)}
[data-theme="dark"] .bpmn-card-del,[data-theme="dark"] .bpmn-card-share{background:rgba(31,41,55,.86);color:#cbd5e1}

/* Минимап в правом нижнем углу canvas — встроен от diagram-js-minimap.css,
   мы только подкручиваем размеры и тени для соответствия общему дизайну. */
.djs-minimap{
  border:1px solid var(--border-subtle)!important;
  border-radius:10px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08)!important;
  bottom:20px!important;top:auto!important;
}
[data-theme="dark"] .djs-minimap{
  background:#1f2937!important;border-color:#374151!important;
}

/* AI-описание процесса — модалка с loader + результатом */
.bpmn-ai-overlay{padding:24px}
.bpmn-ai-modal{
  max-width:680px;width:100%;max-height:80vh;
  display:flex;flex-direction:column;gap:14px;padding:20px 22px;
}
.bpmn-ai-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.bpmn-ai-close{
  background:transparent;border:0;font-size:22px;line-height:1;
  width:30px;height:30px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);padding:0;
}
.bpmn-ai-close:hover{background:var(--surface-2);color:var(--ink)}
.bpmn-ai-body{flex:1;overflow:auto;min-height:120px}
.bpmn-ai-elctx{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:10px;
  background:color-mix(in srgb,var(--brand,#6366f1) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--brand,#6366f1) 22%,transparent);
  border-radius:10px;font-size:13px;
}
.bpmn-ai-elctx-pill{
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:color-mix(in srgb,var(--brand,#6366f1) 18%,#fff);
  color:var(--brand,#6366f1);text-transform:lowercase;
}
.bpmn-ai-elctx-id{margin-left:auto;color:var(--ink-3);font-size:11.5px;font-family:ui-monospace,monospace}
[data-theme="dark"] .bpmn-ai-elctx{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.34);color:#e5e7eb}
[data-theme="dark"] .bpmn-ai-elctx-pill{background:rgba(99,102,241,.32);color:#c7d2fe}

/* Иконка AI в bpmn-js context-pad — рисуем CSS-mask, чтобы не зависеть
   от шрифтового spritesheet от bpmn-icon. */
.djs-context-pad .entry.bpmn-pad-ai{
  background:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
}
.djs-context-pad .entry.bpmn-pad-ai::before{
  content:'✨';font-size:14px;
}
.djs-context-pad .entry.bpmn-pad-ai:hover{
  background:color-mix(in srgb,var(--brand,#6366f1) 14%,#fff);
}
.djs-context-pad .entry.bpmn-pad-link{
  background:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;
}
.djs-context-pad .entry.bpmn-pad-link::before{content:'🔗';font-size:13px}
.djs-context-pad .entry.bpmn-pad-link:hover{background:color-mix(in srgb,#10b981 16%,#fff)}
.djs-context-pad .entry.bpmn-pad-link.is-linked{background:color-mix(in srgb,#10b981 18%,#fff)}

/* ── BPMN element-link badge (overlay поверх элемента) ── */
.bpmn-link-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px 3px 6px;border-radius:999px;
  background:#10b981;color:#fff;
  font-size:11px;font-weight:600;line-height:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 2px 6px rgba(16,185,129,.32);
  text-decoration:none;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
  white-space:nowrap;max-width:140px;
  user-select:none;
}
.bpmn-link-badge:hover{
  transform:translateY(-1px) scale(1.04);
  background:#059669;color:#fff;text-decoration:none;
  box-shadow:0 3px 10px rgba(16,185,129,.42);
}
.bpmn-link-badge svg{flex-shrink:0;opacity:.95}
.bpmn-link-badge span{overflow:hidden;text-overflow:ellipsis}
.bpmn-link-badge.is-orphan{background:#94a3b8;box-shadow:0 2px 6px rgba(148,163,184,.32)}
.bpmn-link-badge.is-orphan:hover{background:#64748b}

/* ── BPMN link picker (modal: выбор ТЗ для привязки к элементу) ── */
.bpmn-link-picker-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(15,18,25,.36);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:80px;
  animation:fadeIn .15s ease-out;
}
.bpmn-link-picker-pad{
  width:min(560px,92vw);max-height:75vh;
  background:var(--surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -16px rgba(15,18,25,.34);
  display:flex;flex-direction:column;overflow:hidden;
}
.bpmn-link-picker-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.bpmn-link-picker-title{font-weight:600;font-size:15px;color:var(--ink-1)}
.bpmn-link-picker-close{
  width:30px;height:30px;border-radius:8px;border:none;
  background:transparent;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;
  padding:0;display:grid;place-items:center;
}
.bpmn-link-picker-close:hover{background:var(--surface-2);color:var(--ink-1)}
.bpmn-link-picker-input{
  width:100%;padding:12px 18px;font-size:14px;
  border:none;border-bottom:1px solid var(--border);
  background:transparent;color:var(--ink-1);outline:none;
}
.bpmn-link-picker-results{flex:1;overflow-y:auto;max-height:50vh}
.bpmn-link-picker-empty{padding:32px 18px;text-align:center;color:var(--ink-3);font-size:13.5px}
.bpmn-link-picker-row{
  display:flex;gap:10px;align-items:center;
  padding:11px 18px;cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  transition:background .1s;
}
.bpmn-link-picker-row:hover,
.bpmn-link-picker-row:focus{background:color-mix(in srgb,var(--brand,#6366f1) 9%,transparent);outline:none}
.bpmn-link-picker-row-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;color:var(--brand,#6366f1);
  padding:3px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--brand,#6366f1) 10%,transparent);
  flex-shrink:0;min-width:56px;text-align:center;
}
.bpmn-link-picker-row-body{flex:1;min-width:0}
.bpmn-link-picker-row-title{font-size:13.5px;color:var(--ink-1);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpmn-link-picker-row-meta{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.bpmn-link-picker-current{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 18px;border-top:1px solid var(--border);
  background:var(--surface-2);font-size:12.5px;color:var(--ink-2);
}
.bpmn-link-picker-current b{color:var(--brand,#6366f1);font-family:ui-monospace,monospace}
.bpmn-link-picker-unlink{
  padding:6px 12px;border-radius:6px;border:1px solid color-mix(in srgb,var(--coral,#ef4444) 35%,transparent);
  background:transparent;color:var(--coral,#ef4444);font-size:12px;font-weight:500;cursor:pointer;
}
.bpmn-link-picker-unlink:hover{background:color-mix(in srgb,var(--coral,#ef4444) 12%,#fff)}

[data-theme="dark"] .bpmn-link-picker-pad{background:#1f2937;border-color:#374151}
[data-theme="dark"] .bpmn-link-picker-row:hover,
[data-theme="dark"] .bpmn-link-picker-row:focus{background:rgba(99,102,241,.22)}
[data-theme="dark"] .bpmn-link-picker-current{background:#111827;color:#cbd5e1}
[data-theme="dark"] .djs-context-pad .entry.bpmn-pad-link,
[data-theme="dark"] .djs-context-pad .entry.bpmn-pad-link.is-linked{background:#1f2937}
.bpmn-ai-loading{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:32px;color:var(--ink-2);font-size:13.5px;
}
.bpmn-ai-spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--border-subtle);
  border-top-color:var(--brand,#6366f1);
  animation:bpmnAiSpin .8s linear infinite;
}
@keyframes bpmnAiSpin{to{transform:rotate(360deg)}}
.bpmn-ai-result{
  padding:14px;border-radius:8px;
  background:var(--surface-2);
  font-size:13.5px;line-height:1.55;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
.bpmn-ai-error{
  padding:14px;border-radius:8px;
  background:color-mix(in srgb,var(--coral,#ef4444) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--coral,#ef4444) 30%,transparent);
  color:var(--coral,#ef4444);font-size:13px;
}
.bpmn-ai-foot{
  display:flex;justify-content:flex-end;gap:8px;
  padding-top:8px;border-top:1px solid var(--border-subtle);
}

/* ── Интеграции (Phase 4) ─────────────────────────────────────────── */
.integrations-wrap{max-width:920px}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.int-card{
  background:var(--surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--elev-1);
  transition:box-shadow .15s ease;
}
.int-card:hover{box-shadow:var(--elev-2)}
.int-head{margin-bottom:10px}
.int-title{font-weight:600;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.int-desc{font-size:12px;color:var(--text-sec);margin-top:2px}
.int-meta{font-size:12px;color:var(--text-sec);margin-top:6px}
.int-meta code{background:var(--surface-2);padding:1px 6px;border-radius:4px;font-size:11px}
.int-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;line-height:1.4}
.int-ok{background:color-mix(in srgb,var(--mint,#10b981) 18%,transparent);color:var(--mint,#10b981)}
.int-off{background:var(--surface-2);color:var(--ink-3)}
.int-soon{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.int-actions{display:flex;gap:6px;flex-wrap:wrap}
.int-section-title{font-size:12px;color:var(--text-sec);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 6px}
.int-projs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto}
.int-proj{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;font-size:13px;background:var(--surface-2)}
.int-proj-key{font-family:var(--font-mono,monospace);font-weight:600;color:var(--accent);min-width:64px}
.int-proj-name{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-proj-type{font-size:11px;color:var(--text-sec)}
.int-card form input{width:100%;box-sizing:border-box}

/* ─── AI tab: помощник по ТЗ ──────────────────────────────────────── */
.ai-tab-shell{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--r-xl);
  overflow:hidden;min-height:560px;height:calc(100vh - 220px);max-height:820px;
}
.ai-tab-head{
  padding:18px 22px;border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(135deg, var(--lavender-soft) 0%, var(--sky-soft) 100%);
}
.ai-tab-title{display:flex;align-items:center;gap:14px}
.ai-tab-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--surface);box-shadow:var(--elev-2);
  display:grid;place-items:center;color:var(--primary);flex-shrink:0;
}
.ai-tab-title h2{margin:0 0 2px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ai-tab-title p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.4}
.ai-tab-context{
  padding:6px 22px;font-size:11.5px;color:var(--ink-2);
  border-bottom:1px solid var(--border-subtle);background:var(--surface-2);
  display:none;
}
.ai-tab-context:not(:empty){display:block}
.ai-tab-modes{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 22px;border-bottom:1px solid var(--border-subtle);background:var(--surface);
}
.ai-tab-messages{
  flex:1;overflow-y:auto;padding:18px 22px;
  display:flex;flex-direction:column;gap:10px;background:var(--surface);
}
.ai-tab-messages::-webkit-scrollbar{width:6px}
.ai-tab-messages::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.ai-tab-form{
  display:flex;align-items:flex-end;gap:8px;
  padding:14px 18px;border-top:1px solid var(--border-subtle);background:var(--surface);
}
.ai-tab-form textarea{
  flex:1;resize:none;max-height:140px;
  padding:10px 12px;border:1px solid var(--border-subtle);border-radius:12px;
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
.ai-tab-form textarea:focus{border-color:var(--lavender);box-shadow:0 0 0 3px var(--lavender-soft)}
.ai-tab-form textarea:disabled{opacity:.6;cursor:not-allowed}
.ai-tab-send{
  width:38px;height:38px;border-radius:10px;border:none;
  background:linear-gradient(135deg, var(--lavender) 0%, var(--sky) 100%);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:transform .12s ease, opacity .12s ease;
}
.ai-tab-send:hover{transform:translateY(-1px)}
.ai-tab-send:disabled{opacity:.5;cursor:not-allowed;transform:none}

[data-theme="dark"] .ai-tab-shell{background:#1c1d22;border-color:#2b2d35}
[data-theme="dark"] .ai-tab-head{background:linear-gradient(135deg, rgba(200,184,240,.15) 0%, rgba(146,196,240,.15) 100%);border-bottom-color:#2b2d35}
[data-theme="dark"] .ai-tab-title h2{color:#e8e9ed}
[data-theme="dark"] .ai-tab-context{background:#22232a;border-bottom-color:#2b2d35;color:#a5a8b3}
[data-theme="dark"] .ai-tab-modes{background:#1c1d22;border-bottom-color:#2b2d35}
[data-theme="dark"] .ai-tab-messages{background:#1c1d22}
[data-theme="dark"] .ai-tab-form{background:#1c1d22;border-top-color:#2b2d35}
[data-theme="dark"] .ai-tab-form textarea{background:#22232a;border-color:#2b2d35;color:#e8e9ed}

@media (max-width:768px){
  .ai-tab-shell{min-height:480px;height:calc(100vh - 180px)}
  .ai-tab-head{padding:14px 16px}
  .ai-tab-modes,.ai-tab-context{padding-left:16px;padding-right:16px}
  .ai-tab-messages{padding:14px 16px}
  .ai-tab-form{padding:12px 14px}
}

/* ── Approval badges & cards (внутренний документооборот) ── */

.approval-badge{
  display:inline-block;margin-top:4px;font-size:11px;font-weight:500;
  padding:2px 8px;border-radius:10px;line-height:1.4;
  white-space:nowrap;
}
.approval-pending{background:#fef3c7;color:#854d0e}
.approval-ok{background:#dcfce7;color:#166534}
.approval-bad{background:#fee2e2;color:#991b1b}
.approval-recalled{background:#f3f4f6;color:#4b5563}
[data-theme="dark"] .approval-pending{background:#3a2f0a;color:#fcd34d}
[data-theme="dark"] .approval-ok{background:#11321f;color:#86efac}
[data-theme="dark"] .approval-bad{background:#3a1414;color:#fca5a5}
[data-theme="dark"] .approval-recalled{background:#2a2c33;color:#9ca3af}

.appr-card{
  border:1px solid var(--border);border-radius:12px;padding:14px;
  margin-bottom:12px;background:var(--surface-1);
}
.appr-card-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.appr-card-title{font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.appr-card-meta{font-size:12px;color:var(--ink-2);margin-top:2px}
.appr-card-note{margin-top:6px;padding:8px 10px;background:var(--surface-2);border-radius:8px;font-size:13px;color:var(--ink)}

.appr-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.appr-row{display:grid;grid-template-columns:28px 24px 1fr;gap:8px;align-items:start;padding:6px 8px;border-radius:8px}
.appr-row.appr-approved{background:rgba(34,197,94,.08)}
.appr-row.appr-rejected{background:rgba(220,38,38,.08)}
.appr-row.appr-pending{background:var(--surface-2)}
.appr-order{font-weight:600;color:var(--ink-2);font-size:13px}
.appr-icon{font-size:14px;line-height:1.4}
.appr-info{min-width:0}
.appr-name{font-size:13px;font-weight:500;color:var(--ink)}
.appr-time{font-size:11px;color:var(--ink-2);display:block;margin-top:1px}
.appr-comment{margin-top:4px;padding:6px 8px;background:var(--surface-1);border-radius:6px;font-size:12.5px;color:var(--ink);border:1px solid var(--border)}
.appr-row-notes{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.appr-row-note{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:5px 8px}
.appr-row-note-ic{flex:0 0 auto;line-height:1.4}
.appr-row-note b{font-weight:600}
.appr-actions{display:flex;gap:8px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap}
.appr-open-btn{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--ink);font:inherit;font-weight:600;
  text-decoration:underline;text-decoration-color:transparent;
  transition:text-decoration-color .15s ease;
}
.appr-open-btn:hover{text-decoration-color:currentColor}

/* Inline-tabs (use for approvals) — fallback стиль если нет .tz-tabs */
.tz-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:14px}
.tz-tab{
  background:none;border:none;padding:8px 14px;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:13px;font-weight:500;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.tz-tab:hover{color:var(--ink)}
.tz-tab.active{color:var(--accent, #2563eb);border-bottom-color:var(--accent, #2563eb)}

/* Блок согласования в TZ-detail popup */
.tz-approval-section{margin:10px 0;padding:10px 12px;background:var(--surface-2);border-radius:10px}
.tz-appr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tz-appr-label{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.tz-appr-actions{margin-left:auto;display:flex;gap:6px}

/* Dashboard «На моей подписи» */
.dash-approvals-inner{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:14px 16px}
.dash-approvals-list{display:flex;flex-direction:column;gap:8px}
.dash-approval-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:var(--surface-2);cursor:pointer;transition:background .15s ease}
.dash-approval-row:hover{background:var(--surface-3, #eef0f3)}
.dash-appr-icon{font-size:20px}
.dash-appr-body{flex:1;min-width:0}
.dash-appr-name{font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-appr-meta{font-size:12px;color:var(--ink-2);margin-top:2px}
.dash-appr-actions{display:flex;gap:6px}
.dash-appr-actions .btn-sm{padding:4px 10px;font-size:13px;min-width:34px}
.dash-approvals-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px;color:var(--ink-2)}

/* Approval-флаг на канбан-карточке */
.kanban-flag.approval-flag{font-size:10.5px;padding:1px 7px;border-radius:8px;border:none}
.kanban-flag.approval-flag.approval-pending{background:#fef3c7;color:#854d0e}
.kanban-flag.approval-flag.approval-ok{background:#dcfce7;color:#166534}
.kanban-flag.approval-flag.approval-bad{background:#fee2e2;color:#991b1b}
.kanban-flag.approval-flag.approval-recalled{background:#f3f4f6;color:#4b5563}

/* ════════════════════════════════════════════════════════════════════
   UI POLISH PACK (2026-05-28) — связный слой «вау»-эффектов поверх
   существующей дизайн-системы. Всё additive, уважает reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* ── Премиальный кастомный скроллбар (WebKit + Firefox) ── */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong,#d9d4c5) transparent}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:var(--border-strong,#cdd5e3);
  border-radius:8px;border:3px solid transparent;background-clip:padding-box;
  transition:background .2s;
}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3,#a8a59c);background-clip:padding-box}

/* ── Единое focus-visible кольцо для интерактивных элементов оболочки ── */
a:focus-visible,.tab:focus-visible,.sidebar-item:focus-visible,
.kanban-card:focus-visible,.admin-tab:focus-visible,.notif-item:focus-visible,
.doc-card:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(17,114,182,.35);
  border-radius:8px;
}

/* ── Интерактивные карточки: hover-лифт (opt-in класс .card-interactive,
   плюс уже-кликабельные карточки доски/документов/статей) ── */
.card-interactive,.kanban-card,.doc-card,.kb-article-item{
  transition:transform .18s cubic-bezier(.2,.9,.32,1.2),box-shadow .18s ease,border-color .18s ease;
}
.card-interactive:hover,.doc-card:hover,.kb-article-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-3, 0 12px 30px rgba(20,20,30,.12));
}

/* ── Сайдбар-пункты: мягкая подсветка + сдвиг при наведении ── */
.sidebar-item{transition:background .18s ease,color .18s ease,transform .18s ease,padding-left .18s ease}
.sidebar-item:hover{transform:translateX(2px)}

/* ── Глобальный guard: при reduced-motion гасим новые анимации/transition ── */
@media (prefers-reduced-motion: reduce){
  .panel.active,.popup-overlay,.popup-card,.toast{animation:none!important}
  button:active:not(:disabled){transform:none}
  .card-interactive:hover,.kanban-card:hover,.doc-card:hover,.kb-article-item:hover{transform:none}
  .sidebar-item:hover{transform:none}
  *{scroll-behavior:auto!important}
}

/* ── Dashboard hover-эффекты (перенесено с мёртвых inline onmouseover, CSP-safe) ── */
.dash-shortcut-btn{transition:transform .15s,box-shadow .15s}
.dash-shortcut-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.dash-hd-row:hover,.dash-jira-row:hover{background:var(--surface-2,#f9fafb)}