* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ── Surfaces (Ponkins DS: tokens/colors.css) ── */
  --bg: #0b0b0c;
  --card: #141416;
  --card2: #1a1a1e;
  --bg-hover: #141416;
  /* ── Brand accent ── */
  --accent: #ff4a1c;
  --accent-hover: #ff6b44;
  --accent-press: #c93a15;
  --accent-soft: rgba(255,74,28,0.1);
  --accent-border: rgba(255,74,28,0.45);
  --accent-border-soft: rgba(255,74,28,0.35);
  --card-scrim: rgba(11,11,12,0.82);
  --lightbox-bg: rgba(6,6,7,0.92);
  --accent2: #e8a33d;
  /* ── Status hues ── */
  --green: #76c93c; --yellow: #e8a33d; --red: #ef4444; --blue: #4d9cf6; --gray: #555550;
  --purple: #c5a3ff;
  --green-soft: rgba(118,201,60,0.12);
  --yellow-soft: rgba(232,163,61,0.15);
  --red-soft: rgba(239,68,68,0.12);
  --blue-soft: rgba(77,156,246,0.12);
  --purple-soft: rgba(197,163,255,0.10);
  /* ── Text ── */
  --text: #ededea; --text2: #8a8a85; --text-dim: #555550;
  --on-accent: #0b0b0c;
  /* ── Lines ── */
  --border: #1f1f22;
  --border-hover: #333338;
  --border2: #2a2a30;
  /* ── Typography ── */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ── Radii ── */
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 6px; --radius-lg: 8px;
  --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 14px;
  --radius-pill: 99px; --radius-full: 50%;
  /* ── Effects ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --focus-ring: 0 0 0 3px var(--accent-soft);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.12s; --dur-base: 0.15s; --dur-slow: 0.22s; --dur-bar: 0.5s;
  --transition-hover: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  --z-sticky: 100; --z-overlay: 700; --z-toast: 900;
}
html { transition: background 0.25s ease, color 0.25s ease; }
html *, html *::before, html *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; }
/* Исключения — элементы с собственными анимациями не трогаем */
html .sidebar, html .sidebar-toggle, html .nav-item, html input, html .progress-bar { transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important; }
html, body { background: var(--bg); color: var(--text); font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; font-feature-settings: 'ss01'; min-height: 100vh; -webkit-font-smoothing: antialiased; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ─── Login ─── */
#login-screen { display: flex; min-height: 100vh; }
.login-left { flex: 1; background: #0f0f10; border-right: 1px solid var(--border); padding: 48px; display: flex; flex-direction: column; min-height: 100vh; overflow-y: auto; }
.login-right { width: 420px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 40px 44px; background: var(--bg); }
.login-box { width: 100%; max-width: 340px; }
.login-box h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; }
.login-box p { color: var(--text2); margin-bottom: 28px; font-size: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.form-group input { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 14px; outline: none; transition: border 0.15s; font-family: inherit; }
.form-group input:focus { border-color: var(--accent); }
.btn-primary { width: 100%; background: var(--accent); color: #0b0b0c; border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; letter-spacing: 0.01em; transition: background 0.15s; }
.btn-primary:hover { background: #ff6b44; }
.error-msg { color: var(--red); font-size: 13px; margin-top: 10px; text-align: center; }
.login-privacy-note { margin-top: 18px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); text-align: center; }
.login-privacy-note a { color: var(--text2); text-decoration: underline; }
/* Left panel: animated task grid */
.login-stats-area { flex: 1; display: flex; align-items: center; justify-content: center; }
.login-anim { width: min(100%, 360px); height: auto; color: var(--text); }
.login-anim rect { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 1; }
.login-anim path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; animation: login-check 9s ease-in-out infinite; }
.login-anim .accent rect { stroke: var(--accent); stroke-opacity: 1; }
.login-anim .accent path { stroke: var(--accent); }
@keyframes login-check { 0%, 6% { stroke-dashoffset: 20; opacity: 1; } 16%, 72% { stroke-dashoffset: 0; opacity: 1; } 86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .login-anim path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 820px) { .login-left { display: none; } .login-right { width: 100%; } }

/* ─── App Shell ─── */
#app-screen { display: none; grid-template-columns: 54px 1fr; height: 100vh; overflow: hidden; }

/* ─── Sidebar: фиксированный icon-rail 54px (Ponkins DS) ─── */
.sidebar { border-right: 1px solid var(--border); padding: 22px 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--bg); overflow: visible; width: 54px; }
.sidebar-toggle-wrap { display: none; }
.brand { padding: 0 0 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; background: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--on-accent); border-radius: 6px; flex-shrink: 0; }
.brand-text { display: none; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
/* Полоса прокрутки тонкая, но видимая: у ПМ открыты все 20 разделов, список
   не влезает в ноутбучный экран, и спрятанный скроллбар не давал понять, что
   ниже есть ещё группа. */
/* overflow-x строго hidden: при overflow-y:auto браузер всё равно считает
   overflow-x:visible за auto, и длинная подпись пункта («Состояние команды»)
   выносила иконку закрепления за край — меню начинало прокручиваться
   вбок и «ездило» влево-вправо при любой ширине окна. */
.sidebar-nav { padding: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; overflow-y: auto; overflow-x: hidden; width: 100%; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.nav-item { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: none; border: none; border-radius: 7px; color: var(--text-dim); cursor: pointer; font-size: 13.5px; font-weight: 500; transition: color 0.13s, background 0.13s; white-space: nowrap; font-family: inherit; position: relative; overflow: visible; }
.nav-item:hover { color: var(--text2); }
.nav-item.active { color: var(--text); background: var(--bg-hover); }
.nav-item.active::before { content: ""; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; }
.nav-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { display: none; }
/* Порядок и группировка пунктов заданы каталогом lib/sections.js (navGroup /
   navOrder) и рисуются в public/views/sidebar.js. Раньше здесь лежали номера
   `#nav-*{order:N}`, и экран расходился с разметкой: «Блокер» с order:7
   попадал в первую группу, а пять пунктов делили order:15. Не возвращать —
   двигать раздел надо в каталоге. */

/* ── Группы меню ───────────────────────────────────────────────────────── */
.nav-group { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
/* Черта между группами: в рельсе — короткая по центру (как был
   .sidebar-divider), в развёрнутом виде её роль играет заголовок группы. */
.nav-group + .nav-group { margin-top: 6px; }
.nav-group + .nav-group::before { content: ""; display: block; width: 22px; height: 1px; margin: 0 auto 8px; background: var(--border); }
/* В свёрнутом рельсе подписи групп не помещаются — от группы остаётся линия. */
.nav-group-title { display: none; }
.nav-group-chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; flex-shrink: 0; }
.nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }

/* ── Поиск ⌘K строкой в меню ───────────────────────────────────────────── */
.nav-search { width: 36px; height: 36px; margin: 0 auto 8px; flex-shrink: 0; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--text-dim); cursor: pointer; font-family: inherit; font-size: 13px; }
.nav-search:hover { color: var(--text2); background: var(--bg-hover); }
.nav-search-kbd { display: none; font-size: 10.5px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* ── Бейджи и значки пункта ────────────────────────────────────────────── */
/* В свёрнутом рельсе подписи нет, и счётчик рядом с иконкой не помещается —
   от него остаётся точка в углу пункта. Подпись возвращается в развёрнутом. */
.nav-badge { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; color: #fff; }
.nav-badge-red  { background: var(--red); }
.nav-badge-warn { background: #f0ad4e; }
.nav-ext { display: none; margin-left: auto; opacity: .55; }
.nav-ext svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-pin { display: none; opacity: 0; margin-left: 4px; color: var(--text-dim); }
.nav-pin svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nav-pin.on { opacity: 1; color: var(--accent); }
.nav-pin.on svg { fill: currentColor; }
.nav-item:hover .nav-pin { opacity: .65; }
.nav-pin:hover { opacity: 1 !important; color: var(--text); }

.sidebar-footer { margin-top: auto; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; width: 100%; }
.sidebar-user { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sidebar-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-press)); display: grid; place-items: center; font-weight: 600; font-size: 11px; color: var(--on-accent); flex-shrink: 0; }
.sidebar-user-info { display: none; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 11.5px; color: var(--text-dim); }
.btn-logout { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: 7px; padding: 0; width: 32px; height: 28px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.12s; display: grid; place-items: center; }
.btn-logout:hover { border-color: var(--red); color: var(--red); }
.btn-logout .btn-logout-label { display: none; }
.btn-theme { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: 7px; padding: 0; width: 32px; height: 28px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.12s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }
.btn-theme svg { flex-shrink: 0; }
.btn-theme .btn-theme-label { display: none; }
.sidebar-toggle { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 10px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--text-dim); cursor: pointer; }
.sidebar-toggle:hover { color: var(--text); border-color: var(--border-hover); }
.sidebar-toggle svg { transform: rotate(180deg); }               /* свёрнут → стрелка «развернуть» (›) */

/* ─── Развёрнутый сайдбар: широкий, с подписями. По умолчанию раскрыт. ─── */
/* 248px, а не 218px: при 218 самая длинная подпись («Состояние команды»,
   «Песни на заказ» — у внешних ссылок ещё и иконка ↗) не влезала ровно на
   27px и обрезалась многоточием. Ширина подогнана по факту замером, запас
   минимальный — подпись длиннее нынешних всё равно ужмётся (полное название
   остаётся в title кнопки). */
#app-screen.nav-expanded { grid-template-columns: 248px 1fr; }
#app-screen.nav-expanded .sidebar { width: 248px; align-items: stretch; padding: 18px 12px; }
/* Кнопка сворачивания садится в строку бренда, а не занимает свою: пять
   заголовков групп и так удлинили меню, и на ноутбучном экране «Сервис»
   уезжал под сгиб. .sidebar — sticky, то есть позиционированный элемент,
   поэтому absolute якорится к нему. */
@media (min-width: 641px) {
  #app-screen.nav-expanded .sidebar-toggle { position: absolute; top: 16px; right: 12px; margin: 0; }
}
#app-screen.nav-expanded .sidebar-toggle { margin: 0 0 10px auto; }
#app-screen.nav-expanded .sidebar-toggle svg { transform: none; }  /* раскрыт → стрелка «свернуть» (‹) */
#app-screen.nav-expanded .brand { justify-content: flex-start; gap: 10px; padding: 0 8px 14px; }
#app-screen.nav-expanded .brand-text { display: inline; }
#app-screen.nav-expanded .sidebar-nav { align-items: stretch; gap: 2px; }
#app-screen.nav-expanded .nav-item { width: 100%; height: 34px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 10px; border-radius: 8px; }
#app-screen.nav-expanded .nav-item.active::before { display: none; }
/* Подпись ужимается сама, иначе она распирает пункт и выталкивает
   .nav-ext/.nav-pin за край меню. */
#app-screen.nav-expanded .nav-label { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#app-screen.nav-expanded .nav-group { align-items: stretch; gap: 2px; }
#app-screen.nav-expanded .nav-group + .nav-group { margin-top: 8px; }
#app-screen.nav-expanded .nav-group + .nav-group::before { display: none; }
#app-screen.nav-expanded .nav-group-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 2px 10px 4px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
#app-screen.nav-expanded .nav-group-title:hover { color: var(--text2); }
#app-screen.nav-expanded .nav-group.collapsed .nav-item { display: none; }
#app-screen.nav-expanded .nav-search { width: 100%; height: 34px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 10px; margin-bottom: 10px; border-color: var(--border); }
#app-screen.nav-expanded .nav-search-kbd { display: inline; margin-left: auto; }
#app-screen.nav-expanded .nav-badge { position: static; width: auto; height: auto; padding: 1px 5px; border-radius: 8px; font-size: 10px; font-weight: 700; margin-left: 4px; }
#app-screen.nav-expanded .nav-ext { display: inline-flex; flex-shrink: 0; margin-left: 4px; }
#app-screen.nav-expanded .nav-pin { display: inline-flex; flex-shrink: 0; margin-left: 0; }
#app-screen.nav-expanded .nav-ext + .nav-pin { margin-left: 4px; }
#app-screen.nav-expanded .sidebar-footer { align-items: stretch; }
#app-screen.nav-expanded .sidebar-user { justify-content: flex-start; gap: 10px; padding: 0 6px; }
#app-screen.nav-expanded .sidebar-user-info { display: block; min-width: 0; }
#app-screen.nav-expanded .btn-theme,
#app-screen.nav-expanded .btn-logout { width: auto; height: 32px; padding: 0 12px; justify-content: flex-start; gap: 8px; }
#app-screen.nav-expanded .btn-theme .btn-theme-label,
#app-screen.nav-expanded .btn-logout .btn-logout-label { display: inline; }

/* ─── App main area ─── */
.app-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--bg); }
/* 28px сверху, а не 64px: зазор держался под плавающий глобальный search-bar,
   которого больше нет (он переехал в сайдбар) — оставался пустой полосой. */
.main-content { flex: 1; overflow-y: auto; padding: 28px 44px 90px; width: 100%; }
/* Баннер «старый дизайн» — тонкая плашка сверху необновлённых страниц */
#legacy-banner { display: flex; align-items: center; gap: 10px; margin: -20px 0 22px; padding: 9px 14px; border: 1px dashed var(--border-hover); border-radius: var(--radius-lg); background: var(--card); font-size: 12.5px; color: var(--text2); }
.legacy-banner-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
@media (max-width: 768px) { .main-content { padding-top: 32px; } }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ─── Dashboard layout ─── */
.page-topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.page-dateline { font-size: 12px; color: var(--text-dim); margin-bottom: 7px; font-family: var(--font-mono); }
.page-greeting { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 48px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dash-stat { padding: 20px 22px; border-right: 1px solid var(--border); position: relative; }
.dash-stat:last-child { border-right: none; }
.dash-stat.alert { background: linear-gradient(135deg, rgba(239,68,68,0.07) 0%, transparent 100%); }
.dash-stat.alert .dash-stat-val { color: var(--red); }
.dash-stat.alert .dash-stat-label { color: var(--red); }
.dash-stat-label { font-size: 12.5px; color: var(--text2); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.dash-stat-val { font-size: 36px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.dash-stat-val .unit { font-size: 16px; color: var(--text-dim); font-weight: 400; margin-left: 3px; }
.dash-stat-meta { font-size: 12px; color: var(--text-dim); }
.dash-stat-meta .up { color: var(--green); }
.dash-stat-meta .down { color: var(--red); }
/* Sync stale alert */
.sync-stale-alert { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; font-size: 13px; margin-bottom: 20px; }
.sync-stale-alert.show { display: flex; }
.sync-stale-alert.show.warn { background: rgba(234,179,8,0.06); border-color: rgba(234,179,8,0.3); }
.sync-stale-alert.show.warn .sync-stale-btn { color: #b98f00; border-color: rgba(234,179,8,0.35); }
.sync-stale-alert.show.warn .sync-stale-btn:hover { background: #b98f00; border-color: #b98f00; }
.sync-stale-alert b { color: var(--text); font-weight: 500; }
.sync-stale-alert span { color: var(--text2); }
.sync-stale-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 11px; background: transparent; color: var(--red); border: 1px solid rgba(239,68,68,0.3); border-radius: 5px; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0; margin-left: auto; }
.sync-stale-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.sync-now-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.sync-now-btn:hover { color: var(--text); border-color: var(--border-hover); }
.sync-now-btn:disabled { opacity: 0.5; cursor: default; }
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 52px; margin-bottom: 52px; }
.dash-grid > * { min-width: 0; }
.section-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.section-count { color: var(--text-dim); font-weight: 400; margin-left: 6px; font-size: 14px; }
.section-action { font-size: 12.5px; color: var(--text2); cursor: pointer; transition: color 0.15s; white-space: nowrap; }
.section-action:hover { color: var(--text); }

/* Кнопки дизайн-системы */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 500; font-family: inherit; line-height: 1; border-radius: var(--radius-md); background: transparent; color: var(--text2); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; transition: var(--transition-hover); }
.ds-btn:hover { color: var(--text); border-color: var(--border-hover); }
.ds-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.ds-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ds-btn.ghost { border-color: transparent; }
.ds-btn.ghost:hover { background: var(--bg-hover); }
.ds-btn:disabled { opacity: 0.5; cursor: default; }
.ds-btn-ico::after { content: "→"; }

/* Блоки дашборда (Спринты на проверку / Команда) */
.dash-block { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border); }
.dash-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dash-block-sub { font-size: 12px; color: var(--text-dim); margin-top: 5px; }
.seclabel { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.msb-over { white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--red); }

/* Строка спринта в блоке «Спринты на проверку» */
.msb-row { border-bottom: 1px solid var(--border); }
.msb-main { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 7px; cursor: pointer; transition: background 0.12s; }
.msb-main:hover { background: var(--bg-hover); }
.msb-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msb-flag { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--red); }
.msb-due { flex-shrink: 0; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.msb-due.over { font-weight: 600; color: var(--red); }
/* «Мой день»: документы, отзывы, заказы склада на главной */
.md-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: background 0.12s; text-decoration: none; color: inherit; }
.md-row:hover { background: var(--bg-hover); }
.md-title { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sub { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.md-meta { flex-shrink: 0; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.md-meta.over { font-weight: 600; color: var(--red); }
.md-err { font-size: 12.5px; color: var(--text-dim); padding: 6px 14px; }
.md-orders-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.md-orders-body { display: none; margin-top: 12px; }
#dash-orders.open .md-orders-body { display: block; }
#dash-orders.open .msb-chevron { transform: rotate(90deg); }
.md-wh { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); margin: 12px 14px 4px; }
.md-row.static { cursor: default; }
.md-act-err { font-size: 12.5px; color: var(--red); }
.msb-note { display: inline-flex; color: var(--green); flex-shrink: 0; }
.msb-chevron { display: inline-flex; color: var(--text-dim); flex-shrink: 0; transition: transform 0.18s var(--ease-out); }
.msb-row.open .msb-chevron { transform: rotate(90deg); }
.msb-panel { display: none; padding: 2px 14px 16px 30px; flex-direction: column; gap: 11px; }
.msb-row.open .msb-panel { display: flex; animation: panelIn .2s var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.msb-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); margin-bottom: 6px; }
.msb-textarea { width: 100%; resize: vertical; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; color: var(--text); font-size: 13.5px; line-height: 1.5; font-family: inherit; outline: none; transition: border-color 0.12s; }
.msb-textarea:focus { border-color: var(--accent); }
.msb-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.msb-saved { font-size: 12px; color: var(--text-dim); margin-left: auto; }
/* Дропдаун статуса спринта */
.msb-dd { position: relative; flex-shrink: 0; width: 158px; }
.msb-dd-btn { width: 100%; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer; color: var(--text); background: var(--card2); border: 1px solid var(--border); white-space: nowrap; transition: border-color 0.12s; }
.msb-dd-btn:hover, .msb-dd.open .msb-dd-btn { border-color: var(--border-hover); }
.msb-dd-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.msb-dd-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.msb-dd-caret { color: var(--text-dim); transition: transform 0.18s; }
.msb-dd.open .msb-dd-caret { transform: rotate(180deg); }
.msb-dd-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 180px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 4px; z-index: 50; }
.msb-dd.open .msb-dd-menu { display: block; animation: panelIn .2s var(--ease-out) both; }
.msb-dd-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--radius-md); border: none; cursor: pointer; background: transparent; color: var(--text); font-family: inherit; font-size: 12.5px; text-align: left; }
.msb-dd-opt:hover, .msb-dd-opt.active { background: var(--bg-hover); }

/* «Ближайшее» — строка с самой срочной задачей (Ponkins DS: NextUp) */
.nextup { display: flex; align-items: center; gap: 13px; padding: 13px 16px; margin-bottom: 24px; border-radius: 11px; border: 1px solid var(--border); background: var(--card); }
.nextup.overdue { border-color: rgba(239,68,68,0.4); background: linear-gradient(90deg, rgba(239,68,68,0.08), transparent 70%); }
.nextup-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.nextup.overdue .nextup-icon { color: var(--red); }
.nextup-body { flex: 1; min-width: 0; }
.nextup-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 3px; font-weight: 600; }
.nextup.overdue .nextup-label { color: var(--red); }
.nextup-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nextup-btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-md); background: transparent; color: var(--text2); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-hover); }
.nextup-btn:hover { color: var(--text); border-color: var(--border-hover); }
.nextup.overdue .nextup-btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.nextup.overdue .nextup-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Секции списка задач (Просрочено / день / Выполнено) */
.tsec { margin-bottom: 12px; }
.tsec-head { width: 100%; display: flex; align-items: center; gap: 9px; background: transparent; border: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.tsec-chevron { display: inline-flex; color: var(--text2); transition: transform 0.18s var(--ease-out); }
.tsec.open .tsec-chevron { transform: rotate(90deg); }
.tsec.loud .tsec-chevron { color: var(--red); }
.tsec-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.tsec.loud .tsec-title { color: var(--red); }
.tsec-count { margin-left: auto; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.tsec-count.full { color: var(--green); }
.tsec-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.tsec.open .tsec-body { max-height: 4000px; opacity: 1; }
.tsec-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 12px 12px 34px; }
.task-row-overdue { flex-shrink: 0; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--red); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.enter { animation: fadeUp .3s var(--ease-out) both; }
@keyframes dayFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dayfade { animation: dayFade .25s var(--ease-out) both; }

/* Сегмент-переключатель (Ponkins DS: ViewSwitch) */
.seg-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--card2); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 20px; }
.seg-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; padding: 6px 13px; border-radius: 7px; cursor: pointer; border: none; background: transparent; color: var(--text2); transition: color 0.12s, background 0.12s; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--card); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* «Команда» — тихая сводка и карточки сотрудников (Ponkins DS) */
.team-summary { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text2); }
.team-summary b { color: var(--text); font-weight: 600; }
.team-summary .ts-sep { color: var(--border-hover); }
.team-summary .ts-over { color: var(--red); font-weight: 600; }
.team-summary .ts-ok { color: var(--green); font-weight: 600; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pcard { display: flex; flex-direction: column; gap: 15px; padding: 16px 17px; border-radius: 13px; cursor: pointer; background: var(--card); border: 1px solid var(--border); transition: border-color 0.13s, transform 0.13s; }
.pcard:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.pcard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pcard-av-wrap { position: relative; flex-shrink: 0; }
.pcard-av { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-press)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; overflow: hidden; }
.pcard-av img { width: 100%; height: 100%; object-fit: cover; }
.pcard-presence { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--card); }
.pcard-id { flex: 1; min-width: 0; }
.pcard-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-role { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-seg { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text2); background: var(--card2); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.pcard-prog-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.pcard-prog-label { font-size: 11.5px; color: var(--text-dim); }
.pcard-prog-val { font-size: 11.5px; color: var(--text2); font-family: var(--font-mono); }
.pcard-prog-track { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.pcard-prog-fill { height: 100%; border-radius: 2px; background: var(--text2); transition: width 0.4s; }
.pcard-prog-fill.full { background: var(--green); }
.pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pcard-metrics { display: flex; gap: 22px; }
.pcard-metric-val { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; font-family: var(--font-mono); }
.pcard-metric-label { font-size: 11px; color: var(--text-dim); margin-top: 5px; white-space: nowrap; }
.pcard-over { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.pcard-over-cap { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); text-align: right; }
.pcard-over-circle { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; font-family: var(--font-mono); }

/* «Система» — чипы-роли и плоские секции по страницам (Ponkins DS) */
.sis-role-chips { display: flex; gap: 7px; margin: 14px 0 18px; flex-wrap: wrap; }
.sis-role-chip { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--text2); background: transparent; border: 1px solid var(--border); transition: var(--transition-hover); }
.sis-role-chip:hover { color: var(--text); border-color: var(--border-hover); }
.sis-role-chip.active { color: var(--text); font-weight: 600; background: var(--card2); border-color: var(--border-hover); }
.sis-role-chip .rc-count { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.sis-page-sec { margin-bottom: 12px; }
.sis-page-head { width: 100%; display: flex; align-items: center; gap: 9px; background: transparent; border: none; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.sis-page-chevron { display: inline-flex; color: var(--text2); transition: transform 0.18s var(--ease-out); }
.sis-page-sec.open .sis-page-chevron { transform: rotate(90deg); }
.sis-page-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.sis-page-count { margin-left: auto; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.sis-page-count.full { color: var(--green); }
.sis-page-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.sis-page-sec.open .sis-page-body { max-height: 6000px; opacity: 1; }
.sis-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-bottom: 1px solid var(--border); border-radius: 6px; transition: background 0.12s; }
.sis-row:hover { background: var(--bg-hover); }
.sis-row.done { opacity: 0.62; }
.sis-row.done:hover { opacity: 1; }
.sis-row-check { width: 16px; height: 16px; border: 1px solid var(--border-hover); border-radius: var(--radius-xs); flex-shrink: 0; cursor: pointer; transition: var(--transition-hover); position: relative; }
.sis-row-check:hover { border-color: var(--text2); }
.sis-row-check.done { background: var(--accent); border-color: var(--accent); }
.sis-row-check.done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sis-row-check.tickpop { animation: tickPop .36s cubic-bezier(.34,1.56,.64,1); }
.sis-row-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sis-row.done .sis-row-text { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-dim); }
.sis-row-role { width: 44px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.sis-row-owner { width: 88px; flex-shrink: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.sis-sync-ico.spin { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Day strip (week tile selector) — плитки недели по Ponkins DS */
.week-strip { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.week-strip::-webkit-scrollbar { display: none; }
.day-tile { flex: 1; min-width: 86px; padding: 10px 13px; background: transparent; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: border-color 0.13s, background 0.13s; text-align: left; font-family: inherit; }
.day-tile:hover { border-color: var(--border-hover); }
.day-tile.active { background: var(--accent-soft); border-color: var(--accent); }
.day-tile.active .day-tile-label { color: var(--accent); }
.day-tile-top { display: flex; align-items: baseline; justify-content: space-between; }
.day-tile-label { font-size: 12px; color: var(--text2); font-weight: 600; }
.day-tile-date { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
.day-tile-count { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 6px; letter-spacing: -0.01em; font-family: var(--font-mono); }
.day-tile-count.empty { color: var(--text-dim); }
.day-tile-bar { height: 3px; border-radius: 2px; background: var(--border); margin-top: 7px; overflow: hidden; }
.day-tile-bar-fill { height: 100%; border-radius: 2px; background: var(--border-hover); transition: width 0.4s; }
.day-tile.active .day-tile-bar-fill { background: var(--accent); }
.day-tile-bar-fill.full { background: var(--green) !important; }
/* Source filter tabs (below day-strip) */
.src-filter-strip { display: flex; gap: 5px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.src-filter-strip::-webkit-scrollbar { display: none; }
.src-filter-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--text2); cursor: pointer; white-space: nowrap; transition: all 0.12s; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; }
.src-filter-btn:hover { color: var(--text); border-color: var(--border-hover); }
.src-filter-btn.active { color: var(--text); background: var(--card2); border-color: var(--border-hover); font-weight: 600; }
.src-filter-btn .sfb-dot { display: none; }
.src-filter-btn .sfb-count { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
/* Legacy tab style (kept for employee view) */
.day-tabs { display: flex; gap: 4px; overflow-x: auto; }
.day-tab { background: transparent; border: 1px solid var(--border); color: var(--text2); padding: 4px 12px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap; transition: all 0.12s; flex-shrink: 0; font-family: inherit; }
.day-tab:hover { border-color: var(--border-hover); color: var(--text); }
.day-tab.active { background: var(--accent); border-color: var(--accent); color: #0b0b0c; font-weight: 600; }
.day-tab .day-count { font-size: 10px; opacity: 0.8; margin-left: 3px; }

/* Compact task rows — строки по Ponkins DS */
.task-list { display: flex; flex-direction: column; }
.task-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-bottom: 1px solid var(--border); border-radius: 6px; transition: background 0.12s; }
.task-row:hover { background: var(--bg-hover); }
.task-row:last-child { border-bottom: none; }
.task-row.done { opacity: 0.62; }
.task-row.done:hover { opacity: 1; }
.task-check { width: 16px; height: 16px; border: 1px solid var(--border-hover); border-radius: var(--radius-xs); flex-shrink: 0; cursor: pointer; transition: var(--transition-hover); position: relative; }
.task-check:hover { border-color: var(--text2); }
.task-check.done { background: var(--accent); border-color: var(--accent); }
.task-check.done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes tickPop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.task-check.tickpop { animation: tickPop .36s cubic-bezier(.34,1.56,.64,1); }
/* Анимация доводки задачи: зелёный wash + схлопывание строки (Ponkins DS) */
.task-rowwrap { overflow: hidden; }
.task-rowwrap.lv-done { animation: leaveDone .48s cubic-bezier(.4,0,.2,1) forwards; }
.task-rowwrap.lv-undone { animation: leaveUndone .34s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes leaveDone { 0% { max-height: 56px; opacity: 1; background: var(--green-soft); } 50% { background: var(--green-soft); } 100% { max-height: 0; opacity: 0; transform: translateX(12px); } }
@keyframes leaveUndone { 0% { max-height: 56px; opacity: 1; } 100% { max-height: 0; opacity: 0; transform: translateX(-12px); } }
.task-row-title { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; cursor: pointer; }
.task-row.done .task-row-title { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-dim); }
.task-row-source { width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.source-sistema { background: #a78bfa; } .source-koordinacia { background: var(--accent2); } .source-podbor { background: var(--blue); }
.task-src-pill { width: 128px; flex-shrink: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.task-row-tag { padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 500; color: var(--accent); background: var(--accent-soft); flex-shrink: 0; white-space: nowrap; }
.task-row-tag.blocked { color: var(--red); background: rgba(239,68,68,0.1); }
.task-row-tag.in_progress { color: var(--blue); background: rgba(77,156,246,0.1); }
.task-row-day { font-size: 12px; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
/* Узкий экран: название задачи важнее меток. Раньше «просрочено N дней» + метка
   источника (128px) съедали строку, и от названия оставалось «Пр…». Теперь название
   занимает первую строку целиком, метки переносятся второй строкой под него.
   Та же разметка у карточки сотрудника (empTaskRowHtml). */
@media (max-width: 480px) {
  .task-row { flex-wrap: wrap; row-gap: 3px; }
  .task-row-title { flex: 1 1 calc(100% - 64px); min-width: 0; }
  .task-src-pill { width: auto; max-width: 100%; text-align: left; }
  /* первая метка второй строки — под началом названия: чекбокс 16 + gap 11
     (gap в начале перенесённой строки не действует, поэтому отступ целиком) */
  .task-row-title + * { margin-left: 27px; }
}

/* Expanded task detail */
.task-detail { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 2px; display: none; }
.task-detail.open { display: block; }
.task-detail-text { font-size: 13.5px; line-height: 1.55; word-break: break-word; color: var(--text2); margin-bottom: 12px; }
.task-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.status-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--text2); transition: all 0.12s; white-space: nowrap; font-family: inherit; font-weight: 500; }
.status-btn:hover { border-color: var(--border-hover); color: var(--text); }
.status-in_progress.active { border-color: var(--blue); color: var(--blue); background: rgba(77,156,246,0.08); }
.status-done.active { border-color: var(--green); color: var(--green); background: rgba(118,201,60,0.08); }
.status-blocked.active { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.08); }
.comment-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 5px; margin-left: 4px; }
.comment-btn:hover { color: var(--text); background: var(--card2); }
/* Legacy card styles (used in employee view) */
.week-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
.week-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.sync-info { font-size: 12px; color: var(--text2); }
.progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.progress-bar-wrap { flex: 1; background: var(--border); border-radius: 99px; height: 4px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.5s; }
.progress-label { font-size: 12px; color: var(--text2); white-space: nowrap; font-weight: 500; }
.task-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color 0.15s; margin-bottom: 8px; }
.task-card:hover { border-color: var(--border-hover); }
.task-card.done { opacity: 0.5; }
.task-top { display: flex; align-items: flex-start; gap: 12px; }
.task-source-bar { width: 3px; border-radius: 99px; flex-shrink: 0; align-self: stretch; min-height: 20px; }
.task-body { flex: 1; min-width: 0; }
.task-text { font-size: 14px; line-height: 1.55; word-break: break-word; }
.task-card.done .task-text { text-decoration: line-through; color: var(--text2); }
.task-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.task-source-label { font-size: 11px; padding: 2px 8px; border-radius: 5px; font-weight: 600; letter-spacing: 0.01em; }
.label-sistema { background: rgba(124,58,237,0.15); color: #a78bfa; }
.label-koordinacia { background: rgba(232,163,61,0.12); color: var(--accent2); }
.label-podbor { background: rgba(77,156,246,0.12); color: var(--blue); }

/* Dash sprints (right column) */
.dash-sprint-item { padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding 0.12s; }
.dash-sprint-item:hover { padding-left: 4px; }
.dash-sprint-item:last-child { border-bottom: none; }
.dash-sprint-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.dash-sprint-title { font-size: 14px; font-weight: 500; flex: 1; line-height: 1.4; min-width: 0; word-break: break-word; }
.dash-sprint-pct { font-size: 13px; font-weight: 500; color: var(--text2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-sprint-bar { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-bottom: 8px; }
.dash-sprint-bar-fill { height: 100%; background: var(--accent); border-radius: 1px; transition: width 0.3s; }
.dash-sprint-bar-fill.done { background: var(--green); }
.dash-sprint-bar-fill.overdue { background: var(--red); }
.dash-sprint-meta-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.dash-sprint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; }
.dash-sprint-dot.active { background: var(--accent); }
.dash-sprint-dot.done { background: var(--green); }
.dash-sprint-dot.overdue { background: var(--red); }

/* Dash team */
.dash-team { margin-bottom: 48px; padding-top: 4px; }
.dash-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
/* Карточка коллеги в блоке «Команда» на главной (Ponkins DS: TeamCard) */
.tc-card { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 15px; border-radius: 11px; cursor: pointer; background: var(--card); border: 1px solid var(--border); transition: border-color .13s, transform .13s; }
.tc-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tc-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-press)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.tc-id { flex: 1; min-width: 0; }
.tc-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-role { font-size: 12px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-open { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text2); background: var(--card2); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.tc-over { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
.tc-chev { display: inline-flex; color: var(--text-dim); flex-shrink: 0; }
.tc-card:hover .tc-chev { color: var(--text); }
.dash-team-member { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding 0.12s; }
.dash-team-member:hover { padding-left: 6px; }
.dash-team-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; color: #0b0b0c; flex-shrink: 0; }
.dash-team-info { min-width: 0; flex: 1; }
.dash-team-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-team-role { font-size: 11.5px; color: var(--text-dim); }
.dash-team-tasks { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ta1 { background: linear-gradient(135deg, #ff4a1c, #c93a15); }
.ta2 { background: linear-gradient(135deg, #76c93c, #4f8a27); }

/* ─── Team Progress (dashboard) ─── */
.dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dash-section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.dash-section-toggle { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; font-family: inherit; padding: 4px 8px; border-radius: 5px; transition: color 0.12s; }
.dash-section-toggle:hover { color: var(--text2); }
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tp-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s; }
.tp-card:hover { border-color: rgba(255,255,255,0.12); }
.tp-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-dept { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-top: -4px; }
.tp-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tp-bar-wrap { flex: 1; height: 5px; background: var(--bg-hover); border-radius: 99px; overflow: hidden; }
.tp-bar { height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.tp-bar.c-none  { background: var(--gray); }
.tp-bar.c-low   { background: var(--red); }
.tp-bar.c-mid   { background: var(--yellow); }
.tp-bar.c-high  { background: var(--blue); }
.tp-bar.c-done  { background: var(--green); }
.tp-pct { font-size: 11.5px; font-weight: 700; color: var(--text2); width: 32px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tp-tasks { font-size: 11.5px; color: var(--text-dim); }
.tp-shame { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--yellow); background: rgba(232,163,61,0.12); border-radius: 4px; padding: 2px 6px; align-self: flex-start; margin-top: 2px; }
@media (max-width: 1100px) { .tp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .tp-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── Pulse in dashboard ─── */
.dash-pulse { margin-top: 8px; }
.dash-pulse-body .pulse-cards { gap: 8px; }
.dash-pulse-body .pulse-card { padding: 14px 18px; }
.ta3 { background: linear-gradient(135deg, #e8a33d, #b57a24); }
.ta4 { background: linear-gradient(135deg, #4d9cf6, #2e6bb5); }
.ta5 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ta6 { background: linear-gradient(135deg, #34d399, #059669); }
.comment-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 5px; }
.comment-btn:hover { color: var(--text); background: var(--card2); }
.comments-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 10px; display: none; }
.comments-panel.open { display: block; }
.comments-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cp-collapse-btn { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 2px 10px; font-size: 11px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
.cp-collapse-btn:hover { border-color: var(--accent); color: var(--text); }
.comment-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.comment-item:last-child { border-bottom: none; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--accent); }
.comment-time { font-size: 11px; color: var(--text2); margin-left: 6px; }
.comment-text { font-size: 13px; margin-top: 4px; line-height: 1.45; color: var(--text); }
.comment-input-row { display: flex; gap: 8px; margin-top: 10px; }
.comment-input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; font-family: inherit; transition: border 0.12s; }
.comment-input:focus { border-color: var(--accent); }
.comment-send { background: var(--accent); border: none; color: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-family: inherit; }

/* ─── Comment preview (inline) ─── */
.comment-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; background: var(--bg); border-radius: 8px; cursor: pointer; border: 1px solid var(--border); transition: border-color 0.12s; }
.comment-preview:hover { border-color: var(--border-hover); }
.cp-icon { font-size: 12px; flex-shrink: 0; opacity: 0.5; }
.cp-body { flex: 1; min-width: 0; }
.cp-meta { font-size: 11px; color: var(--accent); font-weight: 700; display: inline; }
.cp-time { font-size: 11px; color: var(--text2); margin-left: 5px; }
.cp-text { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cp-expand { font-size: 11px; color: var(--text2); background: var(--card); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; flex-shrink: 0; padding: 2px 8px; border-radius: 5px; transition: all 0.12s; font-family: inherit; }
.cp-expand:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── Team list view ─── */
.team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.team-member-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.15s; }
.team-member-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tmc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #c93a15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #0b0b0c; flex-shrink: 0; }
.tmc-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.tmc-role { font-size: 12px; color: var(--text2); margin-top: 2px; }
.tmc-stats { display: flex; gap: 5px; flex-wrap: wrap; }
.stat-pill { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.stat-pill.done { background: rgba(22,163,74,0.1); color: var(--green); }
.stat-pill.progress { background: rgba(37,99,235,0.1); color: var(--blue); }
.stat-pill.blocked { background: rgba(220,38,38,0.1); color: var(--red); }
.stat-pill.total { background: var(--card); color: var(--text2); border: 1px solid var(--border); }

/* ─── Team dashboard (KPI + вкладки + рейтинг + heatmap) ─── */
.td-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.td-toolbar h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.td-refresh-btn { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-family: inherit; }
.td-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
.td-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.td-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.td-kpi-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }
.td-kpi-value { font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: -0.02em; }
.td-kpi-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.td-kpi.accent .td-kpi-value { color: var(--accent2, #e8a33d); }
.td-kpi.danger .td-kpi-value { color: var(--red); }
.td-kpi.success .td-kpi-value { color: var(--green); }
.td-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.td-tab { padding: 8px 14px; font-size: 13px; color: var(--text2); border: none; background: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; transition: color 0.12s, border-color 0.12s; }
.td-tab:hover { color: var(--text); }
.td-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.td-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.15s; }
.td-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.td-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.td-card-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.td-card-abbr { display: inline-block; font-size: 11px; color: var(--accent2, #e8a33d); background: rgba(232,163,61,0.12); padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle; font-weight: 700; }
.td-card-role { font-size: 11px; color: var(--text2); margin-top: 2px; }
.td-card-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.td-bignum { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.td-bignum-sub { font-size: 11px; color: var(--text2); margin-top: 4px; }
.td-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.td-ring svg { transform: rotate(-90deg); }
.td-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.td-spark { height: 28px; margin-top: 10px; display: block; width: 100%; }
.td-overdue-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(220,38,38,0.15); color: var(--red); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-top: 10px; }
.td-noverdue { font-size: 11px; color: var(--green); margin-top: 10px; font-weight: 500; }
.td-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.td-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.td-table th { text-align: left; color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 500; cursor: pointer; user-select: none; white-space: nowrap; }
.td-table th:hover { color: var(--text); }
.td-table th.sorted { color: var(--accent); }
.td-table th.sorted.asc::after { content: ' ↑'; }
.td-table th.sorted.desc::after { content: ' ↓'; }
.td-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.td-table tr:last-child td { border-bottom: none; }
.td-table tbody tr { cursor: pointer; }
.td-table tbody tr:hover td { background: var(--bg-hover); }
.td-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; width: 80px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.td-bar-fill { height: 100%; background: var(--green); transition: width 0.2s; }
.td-bar-fill.warn { background: #eab308; }
.td-bar-fill.danger { background: var(--red); }
.td-chip { display: inline-block; background: var(--bg-hover); color: var(--text2); padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-right: 4px; margin-bottom: 2px; }
.td-chip.warn { background: rgba(220,38,38,0.15); color: var(--red); }
.td-overdue-num { color: var(--red); font-weight: 700; }
.td-overdue-num.zero { color: var(--text2); font-weight: 500; }
.td-mini-av { display: inline-flex; width: 24px; height: 24px; font-size: 11px; vertical-align: middle; margin-right: 8px; }
.td-heatmap-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; overflow-x: auto; }
.td-heatmap { display: grid; gap: 3px; min-width: 600px; }
.td-hm-head { color: var(--text2); font-size: 10px; padding: 6px 8px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
.td-hm-name { padding: 8px 10px; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.td-hm-cell { padding: 8px; text-align: center; border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; transition: transform 0.1s; }
.td-hm-cell:hover { transform: scale(1.08); }
.td-hm-cell.zero { color: var(--text2); cursor: default; }
.td-hm-cell.zero:hover { transform: none; }
.td-hm-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; user-select: none; margin-bottom: 12px; }
.td-hm-toggle input { margin: 0; }
.td-hm-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.td-hm-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; max-width: 460px; width: calc(100vw - 40px); max-height: 70vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.5); z-index: 1000; }
.td-hm-popup-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 20px; line-height: 1; }
.td-hm-popup h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; padding-right: 24px; }
.td-hm-sprint { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.td-hm-sprint:last-child { border-bottom: none; }
.td-hm-sprint-meta { font-size: 11px; color: var(--red); margin-top: 2px; font-weight: 600; }
@media (max-width: 768px) {
  .td-strip { grid-template-columns: 1fr 1fr; }
  .td-grid { grid-template-columns: 1fr; }
  .td-table th:nth-child(3), .td-table td:nth-child(3) { display: none; }
  .td-table th:nth-child(6), .td-table td:nth-child(6) { display: none; }
}

/* ─── Карточка сотрудника /team/<id> (редизайн 22.09: одна страница, блоки по приоритету) ─── */
#view-employee { display: none; max-width: 1120px; }
.back-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 500; margin-bottom: 20px; transition: all 0.12s; font-family: inherit; }
.back-btn:hover { border-color: var(--border-hover); color: var(--text); }
.ec-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--text2); background: transparent; border: none; padding: 4px 0; margin-bottom: 14px; cursor: pointer; transition: color var(--dur-fast); }
.ec-back:hover { color: var(--text); }
.ec-back svg { width: 14px; height: 14px; }
.ec-flags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ec-flags b { font-weight: 500; color: var(--text); }
.ec-dot { color: var(--border2); }
.ec-dyn { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.ec-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; min-width: 0; }
.ec-panel-title { font-size: 13px; font-weight: 600; }
.ec-panel-sub { font-size: 12px; color: var(--text-dim); margin: 2px 0 14px; }
.ec-chart { display: flex; align-items: flex-end; gap: 8px; }
.ec-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ec-col-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text); min-height: 15px; }
.ec-col-bar { width: 100%; max-width: 34px; height: 96px; background: var(--card2); border-radius: var(--radius-sm); display: flex; align-items: flex-end; overflow: hidden; }
.ec-col-fill { width: 100%; background: var(--border-hover); }
.ec-col.current .ec-col-fill { background: var(--accent); }
.ec-col-week { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.ec-col.current .ec-col-week { color: var(--text2); }
.ec-missed-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ec-missed-row:first-child { border-top: none; padding-top: 0; }
.ec-missed-text { flex: 1; min-width: 0; }
.ec-missed-count { font-family: var(--font-mono); font-size: 12px; color: var(--text2); white-space: nowrap; }
@media (max-width: 860px) {
  .ec-dyn { grid-template-columns: 1fr; }
  .ec-chart { gap: 5px; }
  .ec-flags { justify-content: flex-start; }
}
.status-badge { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 5px; font-weight: 600; }
.sb-todo { background: var(--card); color: var(--text2); border: 1px solid var(--border); }
.sb-in_progress { background: rgba(37,99,235,0.08); color: var(--blue); }
.sb-done { background: rgba(22,163,74,0.08); color: var(--green); }
.sb-blocked { background: rgba(220,38,38,0.08); color: var(--red); }

/* ─── Разбор просрочек ─── */
#view-triage { display: none; }
.triage-page { max-width: 1100px; }

/* ─── Team Live Dashboard (на странице просрочек) ─── */
.triage-team-dashboard { margin-bottom: 32px; }
.triage-team-dashboard-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.triage-team-dashboard-title .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 2px rgba(118,201,60,0.25);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(118,201,60,0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(118,201,60,0.08); }
}
.tld-refresh-label { font-size: 11px; color: var(--text2); font-weight: 400; text-transform: none; letter-spacing: normal; margin-left: 8px; }
.triage-page-refresh-label { font-size: 12px; color: var(--text2); align-self: center; margin-right: 4px; }
.tld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.tld-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; position: relative; overflow: hidden;
  transition: border-color 0.15s, transform 0.12s;
}
.tld-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tld-card.has-overdue { border-left: 3px solid var(--red); }
.tld-card.all-done { border-left: 3px solid var(--green); }
.tld-card.in-progress { border-left: 3px solid var(--yellow); }
.tld-card.no-tasks { border-left: 3px solid var(--gray); }
.tld-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tld-avatar {
  width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: #0b0b0c; display: grid; place-items: center; flex-shrink: 0;
}
.tld-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; }
.tld-dept { font-size: 11px; color: var(--text2); margin-top: 1px; }
.tld-progress-bar { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.tld-progress-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; background: var(--accent); }
.tld-progress-fill.done { background: var(--green); }
.tld-progress-fill.none { background: var(--gray); }
.tld-stats { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.tld-stat { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 4px; margin-right: 12px; }
.tld-stat strong { font-weight: 600; color: var(--text); }
.tld-stat.warn strong { color: var(--red); }
.tld-stat .streak-fire { font-size: 12px; }
.tld-tasks-label {
  font-size: 12px; font-weight: 600; margin-bottom: 2px;
}
.tld-tasks-label.done-all { color: var(--green); }
.tld-tasks-label.partial { color: var(--yellow); }
.tld-tasks-label.no-tasks { color: var(--text-dim); }
.triage-state-header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.triage-state-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.triage-state-badge { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: 1px solid; }
.triage-state-badge.bad { color: var(--red); background: rgba(255,74,74,0.08); border-color: rgba(255,74,74,0.2); }
.triage-state-badge.warn { color: var(--yellow); background: rgba(232,163,61,0.08); border-color: rgba(232,163,61,0.2); }
.triage-state-badge.ok { color: var(--green); background: rgba(118,201,60,0.08); border-color: rgba(118,201,60,0.2); }
.triage-state-sub { font-size: 13.5px; color: var(--text2); max-width: 560px; }
.triage-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.triage-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.tm-cell { padding: 16px 18px 16px 0; border-right: 1px solid var(--border); }
.tm-cell:nth-child(n+2) { padding-left: 18px; }
.tm-cell:last-child { border-right: none; }
.tm-label { font-size: 11.5px; color: var(--text2); margin-bottom: 6px; }
.tm-value { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; margin-bottom: 4px; }
.tm-value.bad { color: var(--red); }
.tm-value.warn { color: var(--yellow); }
.tm-meta { font-size: 11px; color: var(--text-dim); }
.triage-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
/* Разбивки просрочек — панели-карточки с текстовыми строками (вместо баров) */
.triage-two-col > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px 20px; }
.triage-txt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.triage-txt-row:last-child { border-bottom: none; }
.triage-txt-label { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.triage-txt-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; flex-shrink: 0; }
/* Просрочки: текстовая сводка предложениями (вместо KPI-плиток) */
.triage-summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px 24px; margin-bottom: 26px; }
.triage-summary-lead { font-size: 15.5px; line-height: 1.7; color: var(--text2); }
.triage-summary-lead strong { color: var(--text); font-weight: 700; }
.triage-summary-lead .ts-red { color: var(--red); }
.triage-summary-lead .ts-warn { color: var(--yellow); }
.triage-summary-lead .ts-green { color: var(--green); }
.triage-summary-insights { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.triage-summary-insight { display: flex; gap: 9px; align-items: baseline; font-size: 13.5px; color: var(--text2); line-height: 1.5; }
.triage-summary-insight::before { content: '—'; color: var(--text-dim); flex-shrink: 0; }
.triage-summary-insight b { color: var(--text); font-weight: 600; }
/* Чип отдела в «По исполнителям» */
.triage-dist-dept { font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--card2); padding: 1px 7px; border-radius: 20px; margin-left: 2px; flex-shrink: 0; }
/* Топ просрочек — компактная таблица самых старых спринтов */
.triage-top { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 26px; }
.triage-top-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.triage-top-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.triage-top-sub { font-size: 12px; color: var(--text-dim); }
.tt-row { display: grid; grid-template-columns: 28px 1fr 156px 74px 64px; gap: 12px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 13px; }
.tt-row.head { padding-top: 7px; padding-bottom: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); background: var(--card2); }
.tt-num { font-family: var(--font-mono); color: var(--text-dim); font-size: 12px; }
.tt-title { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-assignee { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text2); font-size: 12.5px; }
.tt-assignee span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-deadline { font-family: var(--font-mono); font-size: 12px; color: var(--text2); text-align: right; white-space: nowrap; }
.tt-days { font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-align: right; }
.tt-row.head .tt-deadline, .tt-row.head .tt-days { text-align: right; }
@media (max-width: 720px) { .tt-row { grid-template-columns: 24px 1fr 60px; } .tt-assignee, .tt-deadline { display: none; } }
.seg-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); font-weight: 600; }
.seg-btn.active .seg-count { color: var(--red); }
.triage-dist-row { display: grid; grid-template-columns: 140px 1fr 50px; gap: 12px; align-items: center; padding: 6px 0; }
.triage-dist-label { font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.triage-dist-av { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; font-weight: 700; color: #0b0b0c; display: grid; place-items: center; flex-shrink: 0; }
.triage-dist-bar { height: 8px; background: var(--card2); border-radius: 5px; overflow: hidden; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.triage-dist-fill { height: 100%; border-radius: 5px; background: var(--red); transform-origin: left; animation: barGrow .55s var(--ease-out) both; }
.triage-dist-fill.warn { background: var(--yellow); }
.triage-dist-fill.ok { background: var(--green); }
.triage-dist-val { font-size: 12.5px; font-weight: 500; text-align: right; }
.triage-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.triage-search { flex: 1; max-width: 280px; position: relative; margin-right: 10px; }
.triage-search input { width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px 7px 32px; font-size: 13px; color: var(--text); outline: none; font-family: inherit; }
.triage-search input:focus { border-color: var(--accent); }
.triage-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.triage-filter-chip { font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 10px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; transition: all 0.15s; }
.triage-filter-chip.active { background: var(--card2); color: var(--text); border-color: var(--border2); }
.triage-bulk-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--card2); border: 1px solid var(--border2); border-radius: 8px; margin-bottom: 10px; font-size: 13px; }
.triage-bulk-bar.hidden { display: none; }
.triage-bulk-actions { display: flex; gap: 6px; }
.triage-bulk-btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 4px 10px; background: transparent; color: var(--text); border: 1px solid var(--border2); border-radius: 5px; cursor: pointer; }
.triage-bulk-btn:hover { background: var(--card); }
.triage-item-list { border-top: 1px solid var(--border); }
.triage-item { display: grid; grid-template-columns: 20px minmax(0,1fr) 100px 120px 60px; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); align-items: center; cursor: pointer; transition: padding-left 0.12s; }
.triage-content { min-width: 0; }
.triage-item:hover { padding-left: 5px; }
.triage-item.selected { background: linear-gradient(90deg,var(--card2),transparent); padding-left: 10px; }
.triage-item-check { width: 15px; height: 15px; border: 1.5px solid var(--border2); border-radius: 3px; cursor: pointer; flex-shrink: 0; transition: all 0.12s; }
.triage-item-check:hover { border-color: var(--text2); }
.triage-item-check.checked { background: var(--accent); border-color: var(--accent); }
.triage-item-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.triage-item-meta { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.triage-tag { padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; font-family: monospace; }
.tt-wb { color: #c5a3ff; background: rgba(197,163,255,0.1); }
.tt-oz { color: var(--blue); background: rgba(77,156,246,0.1); }
.tt-lg { color: var(--yellow); background: rgba(232,163,61,0.1); }
.tt-id { color: var(--accent); background: rgba(255,74,28,0.1); }
.tt-amp { color: var(--green); background: rgba(118,201,60,0.1); }
.tt-other { color: var(--text-dim); background: var(--card2); }
.triage-overdue-days { font-size: 12.5px; font-weight: 600; color: var(--red); text-align: right; line-height: 1.3; }
/* ── Patterns ── */
.triage-patterns-wrap { margin-bottom: 36px; }
.triage-patterns-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.triage-patterns-title { font-size: 13px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.triage-patterns-count { font-size: 12px; color: var(--text-dim); }
/* Карточки-паттерны (Ponkins DS: PatternCard) — жёлтая левая кромка 2px */
.pattern-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: flex-start; padding: 16px 20px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-left: 2px solid var(--yellow); border-radius: var(--radius-lg); cursor: default; }
.pattern-row.sev-high { border-left-color: var(--red); }
.pattern-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--yellow-soft); display: grid; place-items: center; flex-shrink: 0; color: var(--yellow); }
.pattern-row.sev-high .pattern-icon { background: rgba(255,74,74,0.1); color: var(--red); }
.pattern-row.sev-med  .pattern-icon { background: rgba(232,163,61,0.1); color: var(--yellow); }
.pattern-title { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.pattern-row.sev-high .pattern-title { color: var(--red); }
.pattern-row.sev-med  .pattern-title { color: var(--yellow); }
.pattern-desc { font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.pattern-severity { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.04em; }
.pattern-row.sev-high .pattern-severity { color: var(--red); background: rgba(255,74,74,0.12); }
.pattern-row.sev-med  .pattern-severity { color: var(--yellow); background: rgba(232,163,61,0.12); }
.pattern-row:not(.sev-high):not(.sev-med) .pattern-severity { color: var(--text2); background: var(--card2); }
.pattern-stat { text-align: right; flex-shrink: 0; min-width: 70px; }
.pattern-stat-val { font-size: 18px; font-weight: 700; line-height: 1.1; }
.pattern-stat-val.bad { color: var(--red); }
.pattern-stat-lab { font-size: 10px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.triage-overdue-days.warn { color: var(--yellow); }
.triage-overdue-days small { display: block; font-size: 10px; color: var(--text-dim); font-weight: 400; }
.triage-assignee-cell { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.triage-av { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; font-weight: 700; color: #0b0b0c; display: grid; place-items: center; flex-shrink: 0; }
.triage-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; }
.triage-item:hover .triage-item-actions { opacity: 1; }
.triage-quick-btn { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; font-size: 11px; transition: all 0.12s; }
.triage-quick-btn:hover { color: var(--text); border-color: var(--border2); }
.triage-load-more { text-align: center; padding: 14px; font-size: 12.5px; color: var(--text2); cursor: pointer; transition: color 0.15s; }
.triage-load-more:hover { color: var(--accent); }
.triage-section-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.triage-section-sub { font-size: 12px; color: var(--text2); margin-bottom: 14px; }
.triage-empty { text-align: center; padding: 60px 20px; }
.triage-empty-icon { font-size: 48px; margin-bottom: 16px; }
.triage-empty h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.triage-empty p { font-size: 13.5px; color: var(--text2); }
/* ─── Sprints tab ─── */
#view-sprints { display: none; }
.sg-pick { display: flex; align-items: center; justify-content: center; }
.sg-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.sv-bar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 -4px 18px rgba(0,0,0,0.18); flex-wrap: wrap; }
.sv-bar-count { font-size: 13px; font-weight: 600; margin-right: auto; }
.sv-bar button { border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 7px; padding: 7px 13px; font-size: 13px; cursor: pointer; font-family: inherit; }
.sv-bar button.sv-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sv-bar button:disabled { opacity: 0.45; cursor: default; }
.sv-confirm-list { max-height: 240px; overflow-y: auto; margin: 10px 0 4px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.sv-confirm-item { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; align-items: baseline; }
.sv-confirm-item .sv-ci-meta { margin-left: auto; color: var(--text2); font-size: 11px; white-space: nowrap; }
.sv-hidden-by { font-size: 11px; color: var(--text2); margin-top: 2px; }
/* Инлайн-редактирование ячеек спринта */
.slc-editable { border-radius: var(--radius-sm); transition: background 0.12s; cursor: text; display: inline-block; max-width: 100%; }
.slc-editable:hover { background: var(--card2); box-shadow: 0 0 0 4px var(--card2); }
.slc-editable-ro { cursor: default; }
.slc-editable-ro:hover { background: transparent; box-shadow: none; }
.slc-edit-input { width: 100%; min-width: 60px; background: var(--bg); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 4px 7px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; line-height: 1.4; }
.slc-edit-textarea { resize: vertical; min-height: 54px; }
select.slc-edit-input { cursor: pointer; }
.slc-cmt-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); margin-bottom: 6px; }

/* Категории спринтов — подчёркнутые вкладки (Ponkins DS: Tabs) */
#sprint-category-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; margin-bottom: 16px; }
.sct-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text2); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: inherit; transition: color 0.12s; white-space: nowrap; }
.sct-tab:hover { color: var(--text); }
.sct-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.sct-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
/* Счётчик-предупреждение на вкладке (проблемы синка): цифра, а не кричащая плашка. */
.sct-count--warn { color: var(--yellow); }
.sct-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }

/* ── Таблица спринтов: сетка-«эксель» (Ponkins DS: sprints.html) ── */
.sg-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.sg-tbl { min-width: 900px; }
.sg-head { display: grid; background: var(--card2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
.sg-head > div { padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); white-space: nowrap; }
/* Подсветка «вот эта строка» после создания. Класс звался и раньше
   (scrollToPodborProduct), но правила под него не было — вспышка не работала. */
@keyframes flashHighlight {
  0%   { background: rgba(118,201,60,0.28); }
  100% { background: transparent; }
}
.flash-highlight { animation: flashHighlight 1.5s ease-out; border-radius: 8px; }
.sg-rowwrap { border-top: 1px solid var(--border); border-left: 2px solid transparent; transition: background .12s; }
.sg-rowwrap:first-child { border-top: none; }
.sg-rowwrap.overdue { border-left-color: var(--red); }
.sg-rowwrap.closed { opacity: .5; }
.sg-rowwrap:hover { background: var(--bg-hover); }
.sg-row { display: grid; align-items: stretch; }
.sg-cell { padding: 9px 10px; min-width: 0; display: flex; align-items: center; font-size: 13px; color: var(--text); }
.sg-cell-c { justify-content: center; }
.sg-cell-r { justify-content: flex-end; }
.sg-mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.sg-red { color: var(--red) !important; }
.sg-green { color: var(--green) !important; }
.sg-dim { color: var(--text-dim) !important; }
.sg-proj { font-size: 12.5px; color: var(--text2); font-weight: 500; }
.sg-task { font-size: 13px; color: var(--text); }
.sg-cmt { font-size: 12.5px; color: var(--text2); }
.sg-proj, .sg-task, .sg-cmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; }
.sg-cell .slc-editable { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-cell .slc-editable:hover { box-shadow: none; background: var(--card2); }
.sg-chevron { cursor: pointer; color: var(--text-dim); transition: color .12s; }
.sg-chevron:hover { color: var(--text); }
.sg-chevron svg { transition: transform .18s var(--ease-out); }
.sg-rowwrap:has(.sg-expand.open) .sg-chevron svg { transform: rotate(90deg); }
.sg-status-cell { position: relative; }
/* Статус — пилюля, а не серая кнопка: тон несёт заливка, как у .rvw-status.
   Точку рисует ::before, поэтому в разметке кнопки её больше нет. */
.sg-status-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit; white-space: nowrap; border: 1px solid transparent; transition: filter .12s; }
.sg-status-btn::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sg-status-btn:hover { filter: brightness(1.25); }
.sg-status-btn--idle   { background: var(--card2); color: var(--text2); }
.sg-status-btn--wip    { background: var(--blue-soft); color: var(--blue); }
.sg-status-btn--done   { background: var(--green-soft); color: var(--green); }
.sg-status-btn--cancel { background: var(--red-soft); color: var(--red); }
.sg-status-btn--closed { background: var(--card2); color: var(--text-dim); }
.sg-status-lbl { overflow: hidden; text-overflow: ellipsis; }
.sg-caret { color: currentColor; opacity: .5; flex-shrink: 0; }
.opt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sg-expand { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s var(--ease-out), opacity .3s var(--ease-out); }
.sg-expand.open { max-height: 640px; opacity: 1; border-top: 1px dashed var(--border); }
.sg-expand-inner { padding: 14px 18px; }
.sg-expand-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 900px) { .sg-expand-grid { grid-template-columns: 1fr; } }
.sg-expand-left { display: flex; flex-direction: column; gap: 12px; }
.sg-expand-full { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.sg-expand-note { font-size: 12px; color: var(--text-dim); }
.sg-expand-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sg-expand-hist { border-left: 1px solid var(--border); padding-left: 20px; }
@media (max-width: 900px) { .sg-expand-hist { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; } }
.sg-hist-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin-bottom: 12px; }
.sg-hist-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.sg-hist-item { display: flex; gap: 10px; padding-bottom: 13px; }
.sg-hist-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-hover); margin-top: 4px; flex-shrink: 0; }
.sg-hist-dot.first { background: var(--accent); }
.sg-hist-body { min-width: 0; }
.sg-hist-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.sg-hist-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sg-hist-add { display: flex; gap: 6px; margin-top: 6px; }
.sg-hist-add .comment-input { flex: 1; }
.sg-empty { padding: 60px 12px; text-align: center; font-size: 13px; color: var(--text-dim); }
.sg-closed-toggle { width: 100%; text-align: left; background: var(--card2); border: none; border-top: 1px solid var(--border); padding: 11px 14px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text2); display: flex; align-items: center; gap: 9px; }
.sg-closed-toggle:hover { color: var(--text); }
.sprint-closed-chevron { transition: transform .18s var(--ease-out); display: inline-block; font-size: 10px; }
.sprint-closed-chevron.open { transform: rotate(90deg); }
.sprint-btn-del { background: transparent; border: 1px solid rgba(239,68,68,.3); color: var(--red); border-radius: var(--radius-md); padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer; transition: all .12s; }
.sprint-btn-del:hover { background: var(--red); color: #fff; border-color: var(--red); }
.sprint-list { display: flex; flex-direction: column; gap: 0; }
.sprint-closed-group { overflow: hidden; }
.slc-sheet-link { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-dim); text-decoration: none; transition: color .12s; }
.slc-sheet-link:hover { color: var(--blue); }

/* Status dropdown panel */
.slc-status-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); min-width: 160px; padding: 4px;
  box-shadow: var(--shadow-md);
}
.slc-status-dropdown.open { display: block; }
.slc-status-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text2); transition: background .1s;
}
.slc-status-opt:hover { background: var(--bg-hover); color: var(--text); }
.slc-status-opt.active { background: var(--bg-hover); }
.slc-status-opt .opt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ── Телефон: строка таблицы складывается в карточку ──────────────────────────
   Разметка та же, что на десктопе — второй рендерер разошёлся бы с табличным
   при первой же правке, поэтому раскладку целиком задаёт сетка. «Дата» и «Факт»
   спрятаны: они нужны при сверке с листом Google, а сверяют за компьютером. */
@media (max-width: 900px) {
  .sg-scroll { overflow-x: visible; }
  .sg-tbl { min-width: 0; }
  .sg-head { display: none; }
  .sg-row {
    grid-template-columns: auto auto auto 1fr auto !important;
    grid-template-areas:
      'pick task  task  task status'
      'pick proj  owner due  chev'
      'pick cmt   cmt   cmt  cmt';
    align-items: start; column-gap: 8px; padding: 11px 13px 12px;
  }
  .sg-c-date, .sg-c-fact { display: none; }
  /* Шеврон остаётся: без него «Историю» на телефоне не открыть, а задача —
     редактируемая ячейка, по тапу она уходит в правку, а не в разворот. */
  .sg-c-chevron { grid-area: chev; margin-top: 6px; justify-self: end; }
  .sg-cell { padding: 0; }
  .sg-c-pick   { grid-area: pick; align-self: center; padding-right: 4px; }
  .sg-c-task   { grid-area: task; }
  .sg-c-status { grid-area: status; justify-content: flex-end; }
  .sg-c-proj   { grid-area: proj;  margin-top: 6px; }
  .sg-c-owner  { grid-area: owner; margin-top: 6px; }
  .sg-c-due    { grid-area: due;   margin-top: 6px; justify-content: flex-start; }
  .sg-c-cmt    { grid-area: cmt;   margin-top: 5px; }
  /* Задача переносится по словам — на 375px в одну строку она не влезает */
  .sg-c-task .sg-task { white-space: normal; overflow: visible; }
  /* Вторая строка — тихая мета одним размером: проект · исполнитель · срок.
     Разделитель висит ::after, а не ::before: скрытая пустая ячейка уносит
     свою точку с собой и строка не начинается с висячего разделителя. */
  .sg-c-proj .sg-proj, .sg-c-owner .slc-editable { font-size: 12px; color: var(--text2); }
  .sg-c-proj::after, .sg-c-owner::after { content: '·'; color: var(--border2); margin-left: 8px; }
  .sg-c-cmt .sg-cmt { font-size: 12px; }
  /* Прочерк в пустой ячейке — выравнивание таблицы, в карточке он ни к чему */
  .sg-c-proj.sg-cell-empty, .sg-c-cmt.sg-cell-empty, .sg-c-due.sg-cell-empty { display: none; }
  /* Нет срока — у исполнителя нет и разделителя перед ним */
  .sg-row:has(.sg-c-due.sg-cell-empty) .sg-c-owner::after { content: none; }
  /* Раскрытие строки на телефоне идёт по всей ширине карточки */
  .sg-expand-inner { padding: 12px 13px; }
}

/* ─── Add sprint modal ─── */
#add-sprint-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }
#add-sprint-modal.open { display: flex; }
.sprint-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 100%; max-width: 480px; box-shadow: var(--shadow-md); }
.sprint-modal-box h3 { font-size: 17px; font-weight: 600; margin-bottom: 20px; letter-spacing: -0.01em; }
.sprint-form-group { margin-bottom: 14px; }
.sprint-form-group label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sprint-form-group input, .sprint-form-group textarea, .sprint-form-group select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border 0.12s; }
.sprint-form-group input:focus, .sprint-form-group textarea:focus, .sprint-form-group select:focus { border-color: var(--accent); }
.sprint-form-group textarea { resize: vertical; min-height: 80px; }
.sprint-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-cancel { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 7px; padding: 9px 18px; cursor: pointer; font-size: 14px; font-family: inherit; transition: all 0.12s; }
.btn-cancel:hover { border-color: var(--border-hover); color: var(--text); }

/* ─── PPTX archive ─── */
.pptx-section { margin-bottom: 36px; }
.pptx-section-title { font-size: 13px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.pptx-list { display: flex; flex-direction: column; gap: 8px; }
.pptx-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color 0.15s; }
.pptx-row:hover { border-color: var(--border-hover); }
.pptx-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,74,28,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pptx-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.pptx-info { flex: 1; min-width: 0; }
.pptx-name { font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.pptx-meta { font-size: 11.5px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.pptx-dl-btn { flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: 7px; padding: 7px 14px; font-size: 12.5px; color: var(--text2); cursor: pointer; font-family: inherit; transition: all 0.12s; display: flex; align-items: center; gap: 6px; }
.pptx-dl-btn:hover { border-color: var(--accent); color: var(--accent); }
.pptx-empty { padding: 28px 0; text-align: center; color: var(--text-dim); font-size: 13px; }
.pptx-gen-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.12s; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.pptx-gen-btn:hover { opacity: 0.88; }
.pptx-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Report category boxes ─── */
.report-category-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; overflow: hidden; transition: border-color 0.15s; }
.report-category-box:hover { border-color: var(--border-hover); }
.report-category-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; user-select: none; gap: 12px; }
.report-category-icon { font-size: 22px; flex-shrink: 0; }
.report-category-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.report-category-sub { font-size: 12px; color: var(--text2); }
.report-cat-chevron { color: var(--text2); flex-shrink: 0; transition: transform 0.2s; }
.report-cat-chevron.open { transform: rotate(180deg); }
.report-category-body { padding: 0 20px 20px; display: none; }
.report-category-body.open { display: block; }
.morning-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.morning-card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; }
.morning-card-date { font-size: 13.5px; font-weight: 600; }
.morning-card-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.morning-card-body { padding: 12px 16px; border-top: 1px solid var(--border); display: none; }
.morning-card-body.open { display: block; }
.morning-user-row { margin-bottom: 10px; }
.morning-user-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.morning-task-item { font-size: 12.5px; color: var(--text2); padding-left: 14px; line-height: 1.7; }
.morning-task-label { display: inline-block; background: rgba(255,74,28,0.1); color: var(--accent); font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 1px 6px; margin-right: 4px; font-family: 'JetBrains Mono', monospace; }

/* ─── История ─── */
.hist-page { max-width: 660px; }
.hist-page-header { margin-bottom: 28px; }
.hist-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.hist-page-sub { font-size: 13px; color: var(--text2); line-height: 1.5; }
.hist-filter-bar { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.hist-filter-btn { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 5px 13px; font-size: 12.5px; font-weight: 500; color: var(--text2); cursor: pointer; font-family: inherit; transition: all 0.12s; }
.hist-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hist-filter-btn:hover:not(.active) { border-color: rgba(255,255,255,0.15); color: var(--text); }
.hist-day-group { margin-bottom: 32px; }
.hist-day-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.hist-day-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.hist-items { display: flex; flex-direction: column; gap: 4px; }
.hist-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 10px; transition: background 0.12s; }
.hist-item:hover { background: var(--card); }
.hist-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; }
.hist-body { flex: 1; min-width: 0; }
.hist-who { font-size: 12px; color: var(--text-dim); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.hist-who-name { font-weight: 600; color: var(--text2); }
.hist-dept { font-size: 10.5px; color: var(--text-dim); background: var(--card2); border-radius: 4px; padding: 1px 6px; }
.hist-task { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.4; word-break: break-word; }
.hist-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.hist-day-tag { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 7px; }
.hist-time { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hist-check { color: var(--green); font-size: 13px; flex-shrink: 0; margin-top: 3px; }
.hist-empty { padding: 48px 0; text-align: center; color: var(--text-dim); font-size: 14px; }

/* ─── Уведомления (настройки) ─── */
.notifs-page { max-width: 700px; }
.notifs-header { margin-bottom: 22px; }
.notifs-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.notifs-subtitle { font-size: 13px; color: var(--text2); line-height: 1.5; }
.notifs-tg-warn { background: rgba(255,74,28,0.07); border: 1px solid rgba(255,74,28,0.2); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--text2); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }

.notif-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; transition: border-color 0.15s; }
.notif-card:hover { border-color: rgba(255,255,255,0.12); }
.notif-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.notif-card-left { display: flex; align-items: center; gap: 12px; }
/* Иконка карточки — 16px stroke в токенах, а не эмодзи: эмодзи рисуются шрифтом
   системы и в тёмной теме выглядят чужеродно рядом с остальным набором. */
.notif-card-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card2); color: var(--text2); }
.notif-card-icon svg { width: 16px; height: 16px; display: block; }
.notifs-warn-ico { display: grid; place-items: center; flex-shrink: 0; color: var(--accent); }
.notifs-warn-ico svg { width: 18px; height: 18px; display: block; }
.notif-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.notif-card-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.notif-card-body { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.notif-card-body.hidden { display: none; }

/* Toggle switch */
.notif-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-toggle-slider {
  position: absolute; inset: 0; background: var(--border); border-radius: 12px; cursor: pointer;
  transition: background 0.2s;
}
.notif-toggle-slider:before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.notif-toggle input:checked + .notif-toggle-slider { background: var(--accent); }
.notif-toggle input:checked + .notif-toggle-slider:before { transform: translateX(20px); }

/* Time + days picker */
.notif-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notif-row-label { font-size: 12px; color: var(--text2); min-width: 56px; }
.notif-hour-select {
  font-family: inherit; font-size: 13px; font-weight: 500;
  background: var(--card2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); padding: 6px 10px; cursor: pointer; outline: none;
}
.notif-days { display: flex; gap: 4px; flex-wrap: wrap; }
.notif-day-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border);
  background: none; color: var(--text2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s; display: grid; place-items: center;
}
.notif-day-btn.active { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.notif-hours { display: flex; gap: 4px; flex-wrap: wrap; }
.notif-hour-btn {
  min-width: 38px; height: 30px; padding: 0 6px; border-radius: 8px; border: 1.5px solid var(--border);
  background: none; color: var(--text2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s; display: grid; place-items: center;
}
.notif-hour-btn.active { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }

/* Совпадает с .ds-btn.primary: на странице не должно быть двух разных «главных»
   кнопок. Отдельный класс оставлен — на него завязаны saveNotifSettings и тесты. */
.notifs-save-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: var(--radius-md); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: var(--transition-hover);
}
.notifs-save-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.notifs-save-btn:disabled { opacity: 0.5; cursor: default; }
.notifs-saved-msg { font-size: 13px; color: var(--green); margin-left: 12px; opacity: 0; transition: opacity 0.3s; }
.notifs-saved-msg.show { opacity: 1; }


/* ─── Unified Settings Page ─── */
/* Вкладки берут вид у .sct-tab (как на «Спринтах» и «Отзывах»); здесь остаётся
   только раскладка полосы и правило видимости pm-only. */
.settings-page { max-width: 860px; }
.settings-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.settings-tab.pm-only { display: none; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ─── Pulse (Пульс команды) ─── */
.pulse-page { max-width: 780px; }
.pulse-header { margin-bottom: 32px; }
.pulse-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.pulse-subtitle { font-size: 13px; color: var(--text2); line-height: 1.5; }
.pulse-reset-btn { font-size: 12px; color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-family: inherit; transition: all 0.12s; margin-top: 16px; }
.pulse-reset-btn:hover { color: var(--text2); border-color: var(--border-hover); }
.pulse-cards { display: flex; flex-direction: column; gap: 10px; }
.pulse-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; transition: border-color 0.15s; }
.pulse-card.pulse-clean { border-color: var(--border); }
.pulse-card.pulse-mild { border-left: 2px solid #6B7280; }
.pulse-card.pulse-warm { border-left: 2px solid var(--yellow); }
.pulse-card.pulse-hot { border-left: 2px solid #E8823D; }
.pulse-name { font-size: 14.5px; font-weight: 500; margin-bottom: 8px; }
.pulse-dept { font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }
.pulse-bar-wrap { height: 4px; background: var(--bg-hover); border-radius: 2px; overflow: hidden; }
.pulse-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.pulse-bar-fill.lvl-0 { background: transparent; width: 0%; }
.pulse-bar-fill.lvl-1 { background: #6B7280; }
.pulse-bar-fill.lvl-2 { background: var(--yellow); }
.pulse-bar-fill.lvl-3 { background: #E8823D; }
.pulse-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.pulse-score-block { text-align: right; }
.pulse-score-num { font-size: 28px; font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }
.pulse-score-num.lvl-0 { color: var(--green); }
.pulse-score-num.lvl-1 { color: #6B7280; }
.pulse-score-num.lvl-2 { color: var(--yellow); }
.pulse-score-num.lvl-3 { color: #E8823D; }
.pulse-score-label { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.pulse-clean-label { font-size: 12px; color: var(--green); font-weight: 500; }
.pulse-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); font-size: 14px; }
.pulse-updated { font-size: 11.5px; color: var(--text-dim); text-align: right; margin-top: 20px; }

/* ─── Admin ─── */
.admin-section { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.admin-section h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.01em; }
.user-table { width: 100%; border-collapse: collapse; }
.user-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text2); padding: 8px 10px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.user-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.user-table tr:last-child td { border-bottom: none; }
.role-badge { font-size: 11px; padding: 2px 8px; border-radius: 5px; font-weight: 600; }
.role-pm { background: rgba(232,163,61,0.1); color: var(--accent2); }
.role-employee { background: var(--card2); color: var(--text2); border: 1px solid var(--border); }
.btn-add { background: var(--accent); color: #0b0b0c; border: none; border-radius: 7px; padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: 14px; font-family: inherit; transition: background 0.12s; }
.btn-add:hover { background: #ff6b44; }
/* Вторичная / опасная кнопки дизайн-системы (hairline, тёмные) */
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; line-height: 1; white-space: nowrap; transition: var(--transition-hover); }
.btn-secondary:hover { color: var(--text); border-color: var(--border-hover); }
.btn-secondary:disabled { opacity: 0.5; cursor: default; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; color: var(--red); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-lg); padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; line-height: 1; white-space: nowrap; transition: var(--transition-hover); }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-delete { background: transparent; border: 1px solid var(--border); color: var(--red); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.12s; }
.btn-delete:hover { background: rgba(239,68,68,0.08); border-color: var(--red); }
.btn-edit { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; font-family: inherit; transition: all 0.12s; }
.btn-edit:hover { border-color: var(--border-hover); color: var(--text); }
.reports-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.report-card { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.report-card-header { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; transition:background 0.12s; }
.report-card-header:hover { background:var(--bg-hover); }
.report-date { font-weight:700; font-size:15px; letter-spacing:-0.01em; }
.report-summary { font-size:12px; color:var(--text2); margin-top:2px; }
.report-body { padding:0 20px 18px; display:none; border-top:1px solid var(--border); }
.report-body.open { display:block; }
.report-emp-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.report-emp-row:last-child { border-bottom:none; }
.report-emp-name { font-weight:600; min-width:120px; font-size:14px; }
.report-emp-bar { flex:1; background:var(--border); border-radius:99px; height:6px; overflow:hidden; }
.report-emp-bar-fill { height:100%; border-radius:99px; transition:width .4s; }
.report-emp-stat { font-size:12px; color:var(--text2); min-width:70px; text-align:right; font-weight:500; }
.report-not-done { margin-top:4px; font-size:12px; color:var(--text2); padding-left:132px; }
.report-not-done span { display:inline-block; background:var(--card2); border:1px solid var(--border); border-radius:5px; padding:2px 7px; margin:2px 3px 2px 0; }
.report-overdue { margin-top:14px; padding:12px 16px; background:rgba(220,38,38,0.04); border:1px solid rgba(220,38,38,0.15); border-radius:10px; font-size:13px; }
.report-overdue-title { color:var(--red); font-weight:700; margin-bottom:8px; }
.report-overdue li { color:var(--text2); margin:3px 0; }
.report-overdue-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
.report-overdue-table th { text-align:left; color:var(--text2); font-weight:700; padding:4px 10px 8px; border-bottom:1px solid rgba(220,38,38,0.15); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.report-overdue-table td { padding:8px 10px; border-bottom:1px solid rgba(220,38,38,0.08); vertical-align:middle; }
.report-overdue-table tr:last-child td { border-bottom:none; }
.report-sheet-link { color:var(--accent); text-decoration:none; font-size:12px; white-space:nowrap; font-weight:600; }
.report-sheet-link:hover { text-decoration:underline; }
.report-schedule-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 22px; margin-bottom:22px; }
.report-schedule-title { font-weight:700; font-size:14px; margin-bottom:14px; letter-spacing:-0.01em; }
.report-schedule-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
/* Только собственная подпись строки. Без «>» правило ловило и .sched-day —
   это тоже <label>, — и растягивало пилюли дней до 90px каждая. */
.report-schedule-row > label { color:var(--text2); font-size:13px; font-weight:500; min-width:90px; }
.report-schedule-row select { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 12px; font-size:13px; font-family:inherit; outline:none; transition:border 0.12s; }
.report-schedule-row select:focus { border-color:var(--accent); }
.sched-days { display:flex; gap:6px; flex-wrap:wrap; }
.sched-day { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:500; cursor:pointer; background:transparent; border:1px solid var(--border); border-radius:6px; padding:5px 12px; transition:all .12s; user-select:none; }
.sched-day:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#0b0b0c; font-weight:600; }
.sched-day input { display:none; }
.add-user-form { display: none; background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.add-user-form.open { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.form-row input, .form-row select { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px; color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border 0.12s; }
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }

/* ─── Documents — Kanban board ─── */
#view-docs { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.docs-header { padding: 28px 24px 0; flex-shrink: 0; }
@media (max-width: 768px) { .docs-header { padding: 22px 24px 0; } }
.docs-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.docs-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.docs-subheader { margin-top: 6px; margin-bottom: 18px; }
/* Тихая строка-сводка: числа моно, разделители — точки цветом --border2 */
.docs-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text2); }
.docs-summary .mono { font-family: var(--font-mono); color: var(--text); }
.docs-summary .mono.warn { color: var(--yellow); }
.docs-dot { color: var(--border2); }

/* Board */
.docs-board { flex: 1; overflow-x: auto; overflow-y: hidden; padding: 0 24px 24px; display: flex; gap: 14px; align-items: flex-start; }
.docs-board::-webkit-scrollbar { height: 5px; }
.docs-board::-webkit-scrollbar-track { background: transparent; }
.docs-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Column — поверхность из токенов; цвет столбца остался опознавательным
   знаком в шапке, но перестал заливать всю колонку. */
.board-col {
  width: 276px; flex-shrink: 0; display: flex; flex-direction: column; max-height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px 10px;
  transition: border-color .12s;
}
.col-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 2px; }
.col-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.col-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--col-color, var(--text-dim)); flex-shrink: 0; }
.col-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.col-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; }
.board-col:hover .col-actions { opacity: 1; }
.col-action-btn { background: none; border: none; color: var(--text2); cursor: pointer; padding: 3px 5px; border-radius: 5px; display: inline-flex; transition: color .12s, background .12s; }
.col-action-btn svg { width: 14px; height: 14px; }
.col-action-btn:hover { background: var(--red-soft); color: var(--red); }
.col-cards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; padding-right: 2px; }
.col-cards::-webkit-scrollbar { width: 3px; }
.col-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Card */
.doc-card { background: var(--card2); border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; cursor: pointer; transition: border-color .12s, background .12s; position: relative; }
.doc-card:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.doc-card-title { font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: var(--text); }
.doc-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; color: var(--text-dim); }
.doc-card-meta .mono { font-family: var(--font-mono); }
.doc-card-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.doc-card-stat { display: inline-flex; align-items: center; gap: 4px; }
/* Документ, который не открывал вообще никто: единственный цветной элемент карточки */
.doc-card-cold { display: inline-flex; align-items: center; gap: 5px; color: var(--yellow); }
.doc-card-cold::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.doc-card-badges { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--text-dim); }
.doc-card-badges > span { display: inline-flex; align-items: center; gap: 3px; }
.doc-card-del { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-dim); cursor: pointer; opacity: 0; padding: 3px; border-radius: 5px; display: inline-flex; transition: opacity .12s, color .12s, background .12s; }
.doc-card-del svg { width: 13px; height: 13px; }
.doc-card:hover .doc-card-del { opacity: 1; }
.doc-card-del:hover { color: var(--red); background: var(--red-soft); }

/* Add card btn */
.col-add-btn { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 7px; color: var(--text2); cursor: pointer; font-size: 13px; transition: all 0.12s; margin-top: 4px; border: 1px dashed var(--border2); }
.col-add-btn:hover { background: var(--card2); border-color: var(--border-hover); color: var(--text); }

.docs-empty { padding: 60px 12px; text-align: center; font-size: 13px; color: var(--text-dim); }

/* Add column placeholder */
.board-col-new { width: 240px; flex-shrink: 0; }
.col-new-btn { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--border2); color: var(--text2); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.12s; width: 100%; background: none; font-family: inherit; }
.col-new-btn:hover { border-color: var(--accent); color: var(--text); background: var(--card); }

/* ─── Документы: вкладка «Папки» (проводник) ─────────────────────────────
   Второй вид той же базы. Доска показывает документы по столбцам, дерево —
   по папкам: у документа своё свойство folder_id, столбец оно не трогает. */
.docs-tabs { margin-bottom: 0; }
.docs-tree { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
.docs-tree-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.docs-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-size: 13px; }
.docs-crumb {
  padding: 5px 9px; border-radius: 7px; border: 1px solid transparent;
  color: var(--text2); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.docs-crumb:hover { background: var(--bg-hover); color: var(--text); }
.docs-crumb.current { color: var(--text); font-weight: 600; cursor: default; }
.docs-crumb.current:hover { background: transparent; }
.docs-crumb.drop-target { border-color: var(--accent); color: var(--text); }
.docs-crumb-sep { color: var(--border2); }
.docs-tree-actions { display: flex; gap: 8px; }
.docs-tree-btn { width: auto; padding: 8px 14px; }
.docs-tree-list { display: flex; flex-direction: column; gap: 6px; max-width: 880px; }
.docs-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.docs-row:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.docs-row.drop-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.docs-row.row-dragging { opacity: 0.35; }
.docs-row[draggable=true] { cursor: grab; }
.docs-row[draggable=true]:active { cursor: grabbing; }
.docs-row-icon { flex-shrink: 0; font-size: 15px; line-height: 1; }
.docs-row-title { flex: 1; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-row-meta { font-size: 11.5px; color: var(--text-dim); font-family: var(--font-mono); flex-shrink: 0; }
.docs-row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.docs-row:hover .docs-row-actions { opacity: 1; }
/* На телефоне наведения нет: без этого переименовать и удалить папку было
   бы нечем — кнопки так и остались бы прозрачными. */
@media (hover: none) { .docs-row-actions { opacity: 1; } }
.docs-row-btn { background: none; border: none; color: var(--text2); cursor: pointer; padding: 3px 5px; border-radius: 5px; font-size: 12px; font-family: inherit; }
.docs-row-btn:hover { background: var(--bg-hover); color: var(--text); }
.docs-row-btn.danger:hover { background: var(--red-soft); color: var(--red); }
.docs-tree-empty { font-size: 13px; color: var(--text2); padding: 18px 2px; }
/* На телефоне приписка справа («5 документов · 1 папка», столбец и дата)
   съедала название до «Ре…». Название важнее приписки. */
@media (max-width: 560px) { .docs-row-meta { display: none; } }

/* Панель отмеченного — появляется только когда что-то отмечено. */
.docs-selbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* Высота — как у кнопок, место которых панель занимает: иначе строка
     подрастает и список под ней прыгает на пару пикселей. */
  min-height: 34.5px; box-sizing: border-box; padding: 2px 3px 2px 12px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
}
.docs-selbar[hidden] { display: none; }
.docs-selbar-count { font-size: 13px; color: var(--text); white-space: nowrap; }
.docs-selbar-btn { padding: 5px 11px; font-size: 13px; }
.docs-row-check { flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
/* Список папок-назначений в модалке переноса */
.docs-move-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin-bottom: 18px; }
.docs-move-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.docs-move-opt:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.dp-prop-select {
  flex: 1; background: var(--card2); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 10px; font-size: 12.5px; color: var(--text); outline: none; font-family: inherit;
}
.dp-prop-select:focus { border-color: var(--accent); }

/* Iframe modal */
.iframe-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 800;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.iframe-modal.open { display: flex; flex-direction: row; }
.iframe-modal > * { flex-shrink: 0; }
.iframe-modal-inner {
  width: min(960px, 92vw); height: min(720px, 88vh);
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: dpFadeIn 0.18s cubic-bezier(0.32,0,0.12,1);
}
.iframe-modal-bar { height: 52px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; background: var(--bg); }
.iframe-modal-title { font-size: 14px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.iframe-modal-close { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 22px; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.iframe-modal-close:hover { background: var(--card2); color: var(--text); }
.iframe-modal iframe { flex: 1; border: none; width: 100%; }

/* ─── Document Editor Panel ─────────────────────────────────── */
.doc-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 700;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.doc-panel-overlay.open { display: flex; }
.doc-panel {
  width: min(720px, 92vw); height: min(720px, 88vh);
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: dpFadeIn 0.18s cubic-bezier(0.32,0,0.12,1);
}
@keyframes dpFadeIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dpSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.dp-prop-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--card2); color: var(--text); border: 1px solid var(--border);
  white-space: nowrap;
}
.dp-prop-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chip-color, var(--text2));
}
.dp-topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dp-icon-btn {
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 6px;
  border-radius: 8px; transition: background 0.15s; user-select: none;
}
.dp-icon-btn:hover { background: var(--card2); }
.dp-title-input {
  flex: 1; background: none; border: none; outline: none; font-family: inherit;
  font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
}
.dp-title-input::placeholder { color: var(--text-dim); }
.dp-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dp-save-badge {
  font-size: 11.5px; color: var(--text-dim); padding: 3px 8px;
  border-radius: 5px; transition: all 0.2s; opacity: 0;
}
.dp-save-badge.saving { opacity: 1; color: var(--accent); }
.dp-save-badge.saved  { opacity: 1; color: var(--green); }
.dp-close-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  font-size: 20px; padding: 5px 9px; border-radius: 7px; line-height: 1;
}
.dp-close-btn:hover { background: var(--card2); color: var(--text); }

/* Props bar (url, icon picker) */
.dp-props { padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dp-prop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dp-prop-row:last-child { margin-bottom: 0; }
.dp-prop-label { font-size: 11.5px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; min-width: 72px; }
.dp-prop-url {
  flex: 1; background: var(--card2); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 10px; font-size: 12.5px; color: var(--text); outline: none; font-family: inherit;
}
.dp-prop-url:focus { border-color: var(--accent); }
.dp-open-ext {
  font-size: 12px; color: var(--accent); text-decoration: none; padding: 4px 8px;
  border: 1px solid var(--accent); border-radius: 6px; white-space: nowrap;
  transition: background 0.15s;
}
.dp-open-ext:hover { background: var(--accent-soft); }

/* Formatting toolbar */
.dp-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 6px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.dp-tb-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  font-size: 13px; padding: 5px 8px; border-radius: 5px; line-height: 1;
  font-family: inherit; font-weight: 600; transition: background 0.13s, color 0.13s;
}
.dp-tb-btn:hover { background: var(--card2); color: var(--text); }
.dp-tb-btn.active { background: var(--accent-soft); color: var(--accent); }
.dp-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* Editor area */
.dp-editor-wrap { flex: 1; overflow-y: auto; padding: 0; }
.dp-editor {
  min-height: 100%; padding: 22px 24px 60px; outline: none;
  font-size: 14.5px; line-height: 1.75; color: var(--text);
  caret-color: var(--accent);
}
.dp-editor:empty::before {
  content: 'Введите / для вставки блока или просто начните писать...';
  color: var(--text-dim); pointer-events: none;
}
.dp-editor h2 { font-size: 20px; font-weight: 700; margin: 20px 0 8px; letter-spacing: -0.02em; }
.dp-editor h3 { font-size: 16px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -0.01em; }
.dp-editor p { margin: 0 0 4px; }
.dp-editor ul, .dp-editor ol { padding-left: 22px; margin: 6px 0; }
.dp-editor li { margin-bottom: 2px; }
.dp-editor blockquote {
  border-left: 3px solid var(--accent); padding: 8px 14px;
  margin: 10px 0; background: var(--card2); border-radius: 0 6px 6px 0;
  color: var(--text2);
}
.dp-editor hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.dp-editor a { color: var(--accent); }
.dp-editor strong { color: var(--text); font-weight: 700; }
.dp-editor em { font-style: italic; color: var(--text2); }
.dp-editor code {
  background: var(--card2); border-radius: 4px; padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
}

/* Attachments section */
.dp-attachments {
  border-top: 1px solid var(--border); flex-shrink: 0; padding: 14px 18px;
  max-height: 240px; overflow-y: auto;
}
.dp-att-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-att-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2); }
.dp-att-upload-btn {
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  background: var(--card2); color: var(--text2); transition: all 0.15s; font-family: inherit;
}
.dp-att-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.dp-att-drop-zone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 12px;
  text-align: center; font-size: 12px; color: var(--text-dim); margin-bottom: 8px;
  transition: all 0.15s; display: none;
}
.dp-att-drop-zone.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dp-att-list { display: flex; flex-direction: column; gap: 4px; }
.dp-att-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 7px; background: var(--card2); transition: background 0.13s;
}
.dp-att-item:hover { background: var(--card); }
.dp-att-icon { font-size: 16px; flex-shrink: 0; }
.dp-att-info { flex: 1; min-width: 0; }
.dp-att-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-att-meta { font-size: 11px; color: var(--text-dim); }
.dp-att-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* «Кто читал» — по строке на человека, числа и даты моно */
.dp-readers { border-top: 1px solid var(--border); flex-shrink: 0; padding: 14px 18px; max-height: 200px; overflow-y: auto; }
.dp-readers-list { display: flex; flex-direction: column; gap: 1px; }
.dp-reader { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; transition: background .12s; }
.dp-reader:hover { background: var(--card2); }
.dp-reader-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-reader-opens { font-family: var(--font-mono); font-size: 12px; color: var(--text2); flex-shrink: 0; }
.dp-reader-last { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); flex-shrink: 0; min-width: 44px; text-align: right; }
.dp-readers-empty { font-size: 12.5px; color: var(--yellow); padding: 2px 10px; }
.dp-readers-err { font-size: 12.5px; color: var(--text-dim); padding: 2px 10px; }
.dp-att-dl-btn, .dp-att-del-btn {
  background: none; border: none; cursor: pointer; padding: 3px 7px;
  border-radius: 5px; font-size: 13px; transition: background 0.13s;
}
.dp-att-dl-btn  { color: var(--blue); }
.dp-att-dl-btn:hover  { background: rgba(77,156,246,0.12); }
.dp-att-del-btn { color: var(--red); }
.dp-att-del-btn:hover { background: rgba(239,68,68,0.12); }

/* Icon picker popup */
.dp-icon-picker-popup {
  position: fixed; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px; display: flex; flex-wrap: wrap;
  gap: 4px; width: 220px; z-index: 900; box-shadow: var(--shadow-md);
  display: none;
}
.dp-icon-picker-popup.open { display: flex; }
.dp-icon-opt { font-size: 22px; cursor: pointer; padding: 5px; border-radius: 6px; transition: background 0.13s; }
.dp-icon-opt:hover { background: var(--card2); }

/* ─── Sprint Detail Panel ────────────────────────────────────── */
.sp-panel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 700;
  display: none; align-items: stretch; justify-content: flex-end;
}
.sp-panel-overlay.open { display: flex; }
.sp-panel {
  width: min(600px, 92vw); background: var(--bg); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  animation: dpSlideIn 0.22s cubic-bezier(0.32,0,0.12,1);
}
.sp-topbar {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sp-topbar-info { flex: 1; min-width: 0; }
.sp-title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; word-break: break-word; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sp-meta-badge {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--card2); color: var(--text2);
}
.sp-meta-badge.overdue { background: rgba(239,68,68,0.12); color: var(--red); }
.sp-meta-badge.due-soon { background: rgba(232,163,61,0.12); color: var(--yellow); }
.sp-meta-badge.on-track { background: rgba(118,201,60,0.12); color: var(--green); }
.sp-meta-badge.closed-badge { background: rgba(100,100,100,0.12); color: var(--text-dim); }
.sp-meta-link { font-size: 11.5px; padding: 3px 0; align-self: center; }
.sp-close-btn {
  background: none; border: none; color: var(--text2); cursor: pointer;
  font-size: 20px; padding: 5px 9px; border-radius: 7px; line-height: 1; flex-shrink: 0;
}
.sp-close-btn:hover { background: var(--card2); color: var(--text); }
.sp-body { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; }
.sp-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); margin-bottom: 6px;
}
.sp-desc-block {
  background: var(--card2); border-radius: 8px; padding: 12px 14px;
  font-size: 13.5px; color: var(--text2); line-height: 1.6;
}
.sp-notes-textarea {
  width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 13.5px;
  line-height: 1.65; resize: vertical; min-height: 120px; outline: none; transition: border 0.15s;
}
.sp-notes-textarea:focus { border-color: var(--accent); }
.sp-notes-textarea::placeholder { color: var(--text-dim); }
.sp-notes-save-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sp-notes-save-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.sp-notes-save-btn:hover { background: var(--accent); color: #fff; }
.sp-notes-saved { font-size: 11.5px; color: var(--green); opacity: 0; transition: opacity 0.3s; }
.sp-notes-saved.show { opacity: 1; }
.sp-footer {
  border-top: 1px solid var(--border); padding: 14px 18px; flex-shrink: 0;
  display: flex; gap: 10px; align-items: center;
}
.sp-btn-close-sprint {
  flex: 1; padding: 11px; border-radius: 9px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  background: var(--accent); color: var(--on-accent); transition: background 0.15s;
}
.sp-btn-close-sprint:hover { background: var(--accent-hover); }
.sp-btn-close-sprint:disabled { opacity: 0.4; cursor: default; }
.sp-btn-reopen {
  padding: 11px 18px; border-radius: 9px; border: 1px solid var(--border); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; background: none;
  color: var(--text2); transition: all 0.15s;
}
.sp-btn-reopen:hover { border-color: var(--accent); color: var(--accent); }
.sp-sheet-note { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 4px; }

/* Add doc/col modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 700; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 100%; max-width: 460px; box-shadow: var(--shadow-md); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-box h3 { font-size: 17px; font-weight: 600; margin-bottom: 20px; letter-spacing: -0.01em; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.modal-field input, .modal-field select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border 0.12s; }
.modal-field input:focus { border-color: var(--accent); }
.vk-articles-label { display: block; font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.vk-articles-label span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-dim); }
#vk-create-articles, #vk-articles-list { max-height: 34vh; overflow-y: auto; padding-right: 4px; }
.vk-article-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.vk-article-row input { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; color: var(--text); font-size: 14px; outline: none; font-family: inherit; transition: border 0.12s; }
.vk-article-row input::placeholder { color: var(--text-dim); }
.vk-article-row input:focus { border-color: var(--accent); }
.vk-article-row .vk-art-name { flex: 1; min-width: 0; }
.vk-article-row .vk-art-qty { width: 68px; text-align: center; -moz-appearance: textfield; }
.vk-article-row .vk-art-qty::-webkit-outer-spin-button, .vk-article-row .vk-art-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vk-art-remove { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--text2); font-size: 14px; cursor: pointer; transition: all 0.12s; }
.vk-art-remove:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.vk-art-add { margin-top: 2px; background: transparent; border: 1px dashed var(--border); border-radius: 7px; padding: 8px 14px; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.12s; }
.vk-art-add:hover { border-color: var(--accent); color: var(--accent); }
.modal-icons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.icon-opt { background: var(--card2); border: 1px solid var(--border); border-radius: 7px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.12s; }
.icon-opt:hover, .icon-opt.selected { border-color: var(--accent); }
.col-color-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.col-color-opt { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.12s; }
.col-color-opt.selected { border-color: var(--accent); transform: scale(1.15); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 7px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; flex: 1; font-family: inherit; transition: all 0.12s; }
.btn-cancel:hover { border-color: var(--border-hover); color: var(--text); }
.btn-save { background: var(--accent); border: none; color: #0b0b0c; border-radius: 7px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 600; flex: 1; font-family: inherit; transition: background 0.12s; }
.btn-save:hover { background: #ff6b44; }

/* ─── Empty / loading ─── */
.empty { text-align: center; padding: 56px 20px; color: var(--text2); }
.empty-icon { font-size: 44px; margin-bottom: 12px; opacity: 0.5; }
.loading { text-align: center; padding: 40px; color: var(--text2); }

/* ─── Toast ─── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; border-radius: 10px; padding: 11px 20px; font-size: 13px; font-weight: 500; z-index: 9999; opacity: 0; transition: opacity 0.25s; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.toast.show { opacity: 1; }

/* ─── Report message text ─── */
.report-msg-text { font-family: inherit; font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text); margin: 0; padding: 6px 0; }

/* ─── Sheet pages editor ─── */
.sheet-pages-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.sheet-pages-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text2); padding: 4px 8px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.sheet-pages-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sheet-pages-table tr:last-child td { border-bottom: none; }
.sheet-input { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; transition: border 0.12s; width: 100%; }
.sheet-input:focus { border-color: var(--accent); }
.sheet-input.gid { font-family: monospace; font-size: 12px; }

/* ─── Dashboard docs section ─── */
.dash-docs { margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--border); }
.dash-docs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.dash-docs-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.dash-docs-link { font-size: 12.5px; color: var(--text2); cursor: pointer; transition: color 0.15s; }
.dash-docs-link:hover { color: var(--text); }
.dash-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dash-docs-col { }
.dash-docs-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dash-docs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-docs-col-name { font-size: 13px; font-weight: 600; }
.dash-docs-col-count { font-size: 12px; color: var(--text-dim); margin-left: 2px; }
.dash-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding 0.1s; }
.dash-doc-row:hover { padding-left: 4px; }
.dash-doc-row:last-of-type { border-bottom: none; }
.dash-doc-name { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-doc-type { font-size: 10px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.04em; flex-shrink: 0; }
.dash-doc-add { font-size: 12.5px; color: var(--text-dim); cursor: pointer; padding: 6px 0 0; transition: color 0.15s; display: none; }
.dash-doc-add:hover { color: var(--accent); }
@media (max-width: 1100px) { .dash-docs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .dash-docs-grid { grid-template-columns: 1fr; } }

/* ─── Podbor (Вывод новинок) ─── */
.pb-instr-row{display:flex;align-items:baseline;gap:12px;padding:4px 14px;font-size:13px}
.pb-instr-label{color:var(--text2);flex:1;min-width:0}
.pb-instr-value{font-weight:500;text-align:right;white-space:pre-wrap;word-break:break-word}
/* Модификатор именованный, не «empty»: глобальный .empty — это блок пустого
   состояния с padding 56px, и он растягивал строку показания до 131px. */
.pb-instr-value.pb-instr-dash{color:var(--text-dim);font-weight:400}
.pb-instr-stamp{font-size:11px;color:var(--text-dim);padding:6px 14px 0}
.pb-instr-pending{font-size:13px;color:var(--text2);padding:10px 14px}
.pb-season-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; }
.pb-filters { margin-bottom: 16px; }
.pb-flt-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pb-flt-search { flex: 1; min-width: 200px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; transition: border-color .12s; }
.pb-flt-search:hover, .pb-flt-search:focus { border-color: var(--border-hover); }
.pb-flt-search::placeholder { color: var(--text-dim); }
.pb-flt-toggle.active { background: var(--card2); border-color: var(--border-hover); color: var(--text); }
.pb-flt-n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.pb-flt-count { font-size: 12px; color: var(--text-dim); }
/* Включённые фильтры видно даже когда панель свёрнута — иначе «пропавшие»
   товары выглядят как поломка, а не как результат фильтра. */
.pb-flt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pb-flt-chip { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid var(--accent-border-soft); color: var(--accent); cursor: pointer; }
.pb-flt-chip:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pb-flt-chip-x { opacity: .7; font-size: 13px; line-height: 1; }
.pb-flt-panel { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
/* Подпись и поле — одна <label>: в flex-wrap они переносятся вместе. Раньше
   подпись была отдельным <span> и на узком экране уезжала к чужому полю. */
.pb-flt { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1; }
.pb-flt-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.pb-flt select { width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; }
.pb-flt select:hover, .pb-flt select:focus { border-color: var(--border-hover); }
.pb-flt-reset { flex-shrink: 0; }
.pb-season-tab { padding: 6px 14px; border-radius: 7px; border: 1px solid var(--border); background: none; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
.pb-season-tab:hover { color: var(--text); border-color: var(--border-hover); }
.pb-season-tab.active { background: var(--card2); color: var(--text); border-color: var(--border-hover); font-weight: 600; }
.pb-season-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text2); margin-bottom: 18px; }
.pb-season-summary .mono { font-family: var(--font-mono); color: var(--text); }
.pb-season-summary .rvw-dot { color: var(--border2); }
.pb-summary-bar-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pb-summary-bar-track { display: block; width: 110px; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
.pb-summary-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--text2); transition: width 0.6s var(--ease-out); }
.pb-summary-bar-fill.full { background: var(--green); }
.pb-summary-pct { font-size: 12px; }
.pb-summary-pct.full { color: var(--green); }
.pb-product-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.15s; }
.pb-product-card:hover { border-color: var(--border-hover); }
.pb-product-header { padding: 14px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; flex-wrap: wrap; }
.pb-header-doc { width: 100%; margin-top: 2px; padding-left: 30px; }
.pb-product-header:hover { background: var(--bg-hover); }
.pb-chevron { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; transition: transform 0.2s; }
.pb-product-card.open .pb-chevron { transform: rotate(90deg); }
.pb-product-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--card2); border: 1px solid var(--border); cursor: zoom-in; transition: transform 0.15s; }
.pb-product-thumb:hover { transform: scale(1.05); border-color: var(--border-hover); }
.pb-img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; cursor: zoom-out; animation: pbLbFade 0.15s ease; }
@keyframes pbLbFade { from { opacity: 0; } to { opacity: 1; } }
.pb-img-lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.pb-img-lightbox .pb-img-lightbox-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0,0,0,0.5); padding: 6px 14px; border-radius: 6px; max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-product-info { flex: 1; min-width: 0; }
.pb-product-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-product-sub { font-size: 12px; color: var(--text2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-now-stage { color: var(--text); font-weight: 500; }
.pb-now-stage.pb-now-active { color: var(--blue); }
.pb-now-who { color: var(--text2); }
.pb-now-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.pb-now-done { color: var(--green); font-weight: 500; }
.pb-now-sep { color: var(--text-dim); }
.pb-head-prog { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 8px; }
.pb-stage-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pb-pill { display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.pb-pill.done { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pb-pill.progress { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.pb-pill.todo { background: var(--card2); color: var(--text-dim); border-color: var(--border); }
.pb-pill.cancel { background: var(--red-soft); color: var(--red); border-color: transparent; opacity: 0.8; }
.pb-pct { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); min-width: 34px; text-align: right; flex-shrink: 0; }
.pb-bar-mini { width: 54px; height: 4px; background: var(--card2); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.pb-bar-mini-fill { height: 100%; border-radius: 99px; background: var(--text2); transition: width 0.4s var(--ease-out); }
.pb-bar-mini-fill.full { background: var(--green); }
.pb-detail { display: none; border-top: 1px solid var(--border); }
.pb-product-card.open .pb-detail { display: block; }
.pb-stage-section { padding: 0 18px; }
.pb-stage-section:last-child { padding-bottom: 14px; }
.pb-stage-header { display: flex; align-items: center; gap: 8px; padding: 12px 0 6px; border-bottom: 1px solid var(--border); }
.pb-stage-num-badge { width: 20px; height: 20px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text2); flex-shrink: 0; }
.pb-stage-title { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; flex: 1; }
.pb-stage-prog { font-size: 11px; color: var(--text-dim); }
.pb-task-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--border); position: relative; }
.pb-task-row::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--pb-role-bar, transparent); }
.pb-assignee-block { display: inline-flex; align-items: center; gap: 6px; }
.pb-assignee-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; background: var(--pb-role-bg, var(--card2)); color: var(--pb-role-fg, var(--text-dim)); }
.pb-assignee-empty { font-size: 11px; color: var(--text-dim); font-style: italic; }
.pb-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--pb-role-bg, var(--card2)); color: var(--pb-role-fg, var(--text-dim)); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; overflow: hidden; flex-shrink: 0; border: 1px solid var(--pb-role-fg, var(--border)); }
.pb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-task-actions { display: flex; gap: 4px; }
.pb-task-actions button { display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 5px; color: var(--text-dim); line-height: 1; transition: background 0.12s, color 0.12s; }
.pb-task-actions button:hover:not(:disabled) { background: var(--card2); color: var(--text); }
.pb-task-actions button:disabled { opacity: 0.3; cursor: not-allowed; }
.pb-task-actions button.has-comment { color: var(--accent2); }
.pb-edit-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pb-edit-field label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.pb-edit-field select, .pb-edit-field input[type="date"], .pb-edit-field textarea { background: var(--card2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit; outline: none; width: 100%; box-sizing: border-box; }
.pb-edit-field textarea { resize: vertical; min-height: 70px; }
.pb-edit-field select:focus, .pb-edit-field input:focus, .pb-edit-field textarea:focus { border-color: var(--accent); }
.pb-history-list { max-height: 60vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pb-history-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pb-history-item:last-child { border-bottom: none; }
.pb-history-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text2); font-size: 11px; margin-bottom: 4px; }
.pb-history-field { color: var(--accent2); font-weight: 600; }
.pb-history-vals { font-size: 12px; }
.pb-history-vals .old { color: var(--text-dim); text-decoration: line-through; }
.pb-history-vals .arr { color: var(--text-dim); margin: 0 6px; }
.pb-history-vals .new { color: var(--text); }
.pb-edit-readonly { color: var(--text-dim); font-style: italic; font-size: 12px; padding: 8px 10px; background: var(--card2); border-radius: 7px; }
.pb-edit-error { color: var(--red); font-size: 12px; margin-top: 8px; }
.pb-task-row:last-child { border-bottom: none; }
.pb-task-name { font-size: 12.5px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-task-assignee { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--yellow-soft); color: var(--accent2); white-space: nowrap; }
.pb-task-date { font-size: 11px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-task-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pb-task-status.done { background: var(--green-soft); color: var(--green); }
.pb-task-status.progress { background: var(--blue-soft); color: var(--blue); }
.pb-task-status.cancel { background: var(--red-soft); color: var(--red); opacity: 0.75; }
.pb-task-status.todo { background: var(--card2); color: var(--text-dim); border: 1px solid var(--border); }

/* ─── Документ карточки товара (компактная inline-плашка под строкой задачи) ─── */
.pbdoc-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 10px 6px 14px; margin: 0 0 0 8px; border-left: 2px dashed var(--pb-role-bar, var(--border)); background: var(--bg-hover); border-radius: 0 6px 6px 0; font-size: 12px; }
.pbdoc-inline-empty { padding: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pbdoc-inline-none { font-size: 12px; color: var(--text-dim); }
.pbdoc-inline-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Блок QA — третий ребёнок сетки «1fr auto»: без растяжки он попадал в узкую
   первую колонку и текст ломался по слогам. */
.pbdoc-inline > [id^="qa-block-"] { grid-column: 1 / -1; }
.pbdoc-inline-icon { display: inline-flex; color: var(--text-dim); }

.pbdoc-inline-tag { font-size: 9.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; background: var(--card); border-radius: 4px; flex-shrink: 0; }
.pbdoc-inline-link { color: var(--blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.pbdoc-inline-link:hover { text-decoration: underline; }
.pbdoc-inline-done { font-size: 10.5px; padding: 1px 7px; border-radius: 20px; background: var(--green-soft); color: var(--green); font-weight: 600; flex-shrink: 0; }
.pbdoc-inline-deadline { font-size: 10.5px; padding: 1px 7px; border-radius: 20px; background: var(--blue-soft); color: var(--blue); font-weight: 600; flex-shrink: 0; }
.pbdoc-inline-deadline.overdue { background: var(--red-soft); color: var(--red); }
.pbdoc-inline-hold { font-size: 10.5px; padding: 1px 7px; border-radius: 20px; background: var(--card2); color: var(--text2); font-weight: 600; flex-shrink: 0; }
.pbdoc-comment-templates { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pbdoc-tpl-btn { font-family: inherit; font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text2); cursor: pointer; transition: all 0.12s; }
.pbdoc-tpl-btn:hover { border-color: var(--accent); color: var(--text); }

/* ── TG-канал «Новинки» (admin) ───────────────────────────────────────────── */
.ptg-page { max-width: 1100px; }
.ptg-head { margin-bottom: 22px; }
.ptg-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ptg-head-sub { font-size: 13px; color: var(--text2); margin-top: 4px; }
.ptg-status { font-size: 13px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.ptg-status code { font-family: ui-monospace, monospace; font-size: 12px; padding: 1px 6px; background: var(--card2); border-radius: 4px; }
.ptg-status.ok { border-color: rgba(118,201,60,0.35); background: rgba(118,201,60,0.06); }
.ptg-status.warn { border-color: rgba(232,163,61,0.35); background: rgba(232,163,61,0.06); }
.ptg-status.err { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.06); }
.ptg-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.ptg-section-head { margin-bottom: 14px; }
.ptg-section-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ptg-section-hint { font-size: 12px; color: var(--text2); }
.ptg-section-hint code { font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 5px; background: var(--card2); border-radius: 4px; }

.ptg-table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ptg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptg-table th { text-align: left; color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; background: var(--card2); }
.ptg-table th.ptg-th-actions { text-align: right; }
.ptg-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ptg-table tr:last-child td { border-bottom: none; }
.ptg-table tr:hover td { background: var(--card2); }
.ptg-month { font-weight: 600; text-transform: capitalize; }
.ptg-mono { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text2); }
.ptg-mono.set { color: var(--text); }
.ptg-mono.empty { color: var(--text-dim); font-style: italic; }
.ptg-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ptg-btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.12s; white-space: nowrap; border: 1px solid var(--border); background: transparent; color: var(--text2); }
.ptg-btn:hover { border-color: var(--text2); color: var(--text); }
.ptg-btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0b0c; font-weight: 600; }
.ptg-btn.primary:hover { background: #ff6b44; border-color: #ff6b44; color: #0b0b0c; }
.ptg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ptg-sla-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.ptg-sla-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--card2); display: flex; flex-direction: column; gap: 8px; }
.ptg-sla-role { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.ptg-sla-row { display: flex; gap: 8px; align-items: center; }
.ptg-sla-input { width: 70px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); outline: none; font-family: inherit; transition: border-color 0.15s; }
.ptg-sla-input:focus { border-color: var(--accent); }
.ptg-sla-unit { font-size: 12px; color: var(--text2); }
.ptg-sla-saved { font-size: 11px; color: var(--green); margin-left: auto; opacity: 0; transition: opacity 0.2s; }
.ptg-sla-saved.show { opacity: 1; }

.ptg-health-ok { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 8px; }
.ptg-health-warn { padding: 12px 14px; border-radius: 8px; background: rgba(232,163,61,0.08); border: 1px solid rgba(232,163,61,0.25); font-size: 13px; }
.ptg-health-warn ul { margin: 8px 0 0 0; padding-left: 20px; }
.ptg-health-warn li { margin: 3px 0; }

.ptg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ptg-kpi { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--card2); }
.ptg-kpi-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 6px; }
.ptg-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.ptg-kpi-sub { font-size: 11px; color: var(--text2); margin-top: 4px; }
.ptg-kpi-value.danger { color: var(--red); }
.ptg-kpi-value.warn { color: var(--yellow); }
.ptg-kpi-value.ok { color: var(--green); }

.ptg-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 720px) { .ptg-analytics-grid { grid-template-columns: 1fr; } }
.ptg-analytics-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--card2); }
.ptg-analytics-card h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.ptg-bar-row { display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.ptg-bar-label { font-weight: 500; }
.ptg-bar-track { background: var(--card); border-radius: 4px; height: 8px; overflow: hidden; }
.ptg-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; }
.ptg-bar-fill.warn { background: var(--yellow); }
.ptg-bar-fill.danger { background: var(--red); }
.ptg-bar-value { text-align: right; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text2); }

.ptg-trend-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.ptg-trend-table th, .ptg-trend-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.ptg-trend-table th { color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; background: var(--card2); }
.ptg-trend-table td { font-family: ui-monospace, monospace; font-size: 12px; }
.ptg-trend-table td:first-child, .ptg-trend-table th:first-child { font-family: inherit; text-transform: capitalize; font-weight: 600; }
.ptg-trend-table tr:hover td { background: var(--card2); }

.ptg-empty { text-align: center; padding: 24px; color: var(--text-dim); font-size: 13px; }
.pbdoc-inline-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
.pbdoc-inline-actions button { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid; cursor: pointer; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1; font-family: inherit; transition: opacity 0.15s; white-space: nowrap; }
.pbdoc-inline-actions button:hover:not(:disabled) { opacity: 0.78; }
.pbdoc-inline-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.pbdoc-inline-actions .handoff { border-color: rgba(118,201,60,0.5); color: var(--green); }
.pbdoc-inline-actions .return  { border-color: rgba(239,68,68,0.4); color: var(--red); }
.pbdoc-inline-actions .icon    { border-color: var(--border); color: var(--text-dim); padding: 3px 6px; }
.pbdoc-inline-actions .icon:hover { color: var(--text); }
.pbdoc-inline-create { white-space: nowrap; background: transparent; border: 1px dashed var(--border2); color: var(--text2); font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.pbdoc-inline-create:hover { color: var(--text); border-color: var(--border-hover); }
/* «Стартовать» — команда ПМ, «Создать» — АМП со своей ссылкой. Оба действия
   повторяются в каждой карточке, поэтому тихие: сплошная рамка против пунктира. */
.pbdoc-inline-start { white-space: nowrap; background: var(--card2); border: 1px solid var(--border2); color: var(--text); font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.pbdoc-inline-start:hover { border-color: var(--border-hover); }
.pbdoc-inline-start:disabled { opacity: 0.6; cursor: default; }
.pbdoc-inline-waiting { color: var(--text2); font-size: 12px; font-style: italic; }
.pbdoc-history-list { max-height: 60vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pbdoc-history-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pbdoc-history-item:last-child { border-bottom: none; }
.pbdoc-history-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text2); font-size: 11px; margin-bottom: 4px; }
.pbdoc-history-action { font-weight: 700; }
.pbdoc-history-action.created { color: var(--blue); }
.pbdoc-history-action.handoff { color: var(--green); }
.pbdoc-history-action.return  { color: var(--red); }
.pbdoc-history-action.url_update { color: var(--text2); }
.pbdoc-history-action.sent_to_designer { color: var(--accent2); }
.pbdoc-history-action.start_command { color: var(--green); }
.pbdoc-history-comment { color: var(--text); font-size: 12px; padding: 5px 8px; background: var(--card2); border-radius: 5px; margin-top: 4px; }

/* ─── Система ─── */
.sis-filter-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; position: relative; }
.sis-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sis-filter-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; min-width: 44px; }
.sis-filter-bar .triage-filter-chip { padding: 4px 10px; white-space: nowrap; }
.sis-filter-bar .triage-filter-chip:hover { color: var(--text); border-color: #3a3a3e; }
.sis-filter-bar .triage-filter-chip.active { font-weight: 600; }
.sis-filter-bar .triage-filter-chip.is-preset { font-weight: 600; }
.sis-filter-reset { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 6px; }
.sis-filter-reset:hover { text-decoration: underline; }
.sis-source-tab-empty { opacity: 0.35; }
.sis-source-tab-empty:hover { opacity: 0.55; }
.sis-source-tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 24px; padding-bottom: 2px; scrollbar-width: none; }
.sis-source-tabs::-webkit-scrollbar { display: none; }
.sis-source-tab { padding: 7px 18px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text2); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; display: flex; align-items: center; gap: 7px; }
.sis-source-tab:hover { color: var(--text); border-color: #3a3a3e; }
.sis-source-tab.active { background: var(--card); color: var(--text); border-color: var(--border); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.sis-source-tab .sis-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sis-source-tab .sis-tab-count { font-size: 11px; color: var(--text-dim); margin-left: 2px; }
.sis-source-tab { cursor: grab; }
.sis-source-tab:active { cursor: grabbing; }
.sis-source-tab.sis-tab-dragging { opacity: 0.35; }
.sis-source-tab.sis-tab-drop-target { border-color: var(--accent); color: var(--text); box-shadow: -3px 0 0 var(--accent); }
.sis-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
/* ── Cycle timeline ── */
.sis-timeline { display: flex; gap: 10px; overflow-x: auto; padding: 0 2px 14px; margin-bottom: 10px; scrollbar-width: thin; }
.sis-timeline::-webkit-scrollbar { height: 4px; }
.sis-timeline::-webkit-scrollbar-track { background: transparent; }
.sis-timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sis-slot { min-width: 148px; max-width: 210px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 10px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; transition: border-color 0.15s, opacity 0.15s; }
.sis-slot.current { border-color: #34a853; box-shadow: 0 0 0 1px rgba(52,168,83,.25); }
.sis-slot.past { opacity: 0.5; }
.sis-slot.future { border-style: dashed; background: transparent; opacity: 0.35; min-width: 80px; max-width: 80px; align-items: center; justify-content: center; }
.sis-slot-date { font-size: 10px; font-weight: 700; color: var(--text2); letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.sis-slot.current .sis-slot-date { color: #34a853; }
.sis-slot-badge { display: inline-block; font-size: 9px; font-weight: 700; color: #34a853; background: rgba(52,168,83,.13); border-radius: 4px; padding: 1px 6px; letter-spacing: .05em; align-self: flex-start; }
.sis-slot-links { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.sis-slot-link { display: flex; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px 5px 6px; font-size: 11px; font-weight: 500; color: var(--text); text-decoration: none; transition: border-color 0.15s; }
.sis-slot-link:hover { border-color: #34a853; color: var(--text); }
.sis-slot-link-icon { width: 18px; height: 18px; border-radius: 3px; background: #34a853; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sis-slot-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-slot-empty { font-size: 11px; color: var(--text-dim); font-style: italic; }
.sis-slot-dots { font-size: 20px; color: var(--text-dim); letter-spacing: 2px; }
.sis-day-col { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sis-day-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sis-day-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.sis-day-abbr { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.sis-day-prog { font-size: 11px; color: var(--text-dim); }
.sis-day-tasks { padding: 8px 0; }
.sis-task-row { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 36px; transition: background 0.1s; cursor: default; }
.sis-task-row:hover { background: rgba(255,255,255,0.02); }
.sis-task-row.done .sis-task-text { opacity: 0.4; text-decoration: line-through; }
.sis-task-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); background: none; flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: all 0.15s; display: grid; place-items: center; }
.sis-task-check.done { background: var(--green); border-color: var(--green); }
.sis-task-check.done::after { content: ''; width: 5px; height: 3px; border-left: 1.5px solid #0b0b0c; border-bottom: 1.5px solid #0b0b0c; transform: rotate(-45deg) translateY(-1px); }
.sis-task-text { font-size: 13px; line-height: 1.45; color: var(--text); flex: 1; }
.sis-section-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.15s, opacity 0.15s; }
.sis-section-card.sis-dragging { opacity: 0.35; }
.sis-section-card.sis-drag-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sis-section-header { padding: 12px 18px; display: flex; align-items: center; gap: 10px; justify-content: space-between; border-bottom: 1px solid var(--border); cursor: grab; user-select: none; }
.sis-section-header:active { cursor: grabbing; }
.sis-drag-handle { color: var(--border); flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.sis-drag-handle span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.sis-section-title-wrap { flex: 1; min-width: 0; margin-right: 16px; }
.sis-prog-bar-wrap { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-top: 5px; }
.sis-prog-bar { height: 100%; background: var(--accent); border-radius: 1px; transition: width 0.4s; }
.sis-day-block { border-top: 1px solid var(--border); }
.sis-day-block:first-child { border-top: none; }
.sis-day-header-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 18px; background: rgba(255,255,255,0.025); }
.sis-day-full { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.sis-day-stat { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sis-role-group { }
.sis-role-subheader { padding: 5px 18px 2px 28px; }
.sis-role-pill { font-size: 10px; font-weight: 700; background: rgba(77,156,246,0.1); color: var(--blue); border-radius: 4px; padding: 2px 7px; }
.sis-section-name { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.sis-section-prog { font-size: 12px; font-weight: 600; }
.sis-task-list { padding: 4px 0; }
.sis-assignee { font-size: 11px; color: var(--text-dim); flex-shrink: 0; white-space: nowrap; }

/* ─── Drag & Drop states ─── */
.sprint-cat-tab { cursor: grab; }
.sprint-cat-tab:active { cursor: grabbing; }
.sprint-cat-tab.sct-dragging { opacity: 0.3; }
.sprint-cat-tab.sct-drop-target { border-color: var(--accent) !important; box-shadow: -3px 0 0 var(--accent); }
.board-col.col-dragging { opacity: 0.3; pointer-events: none; }
.board-col.col-drop-target { border: 1px solid var(--accent); box-shadow: 0 0 0 1px var(--accent); border-radius: 12px; }
.doc-card.card-dragging { opacity: 0.3; }
.doc-card[draggable=true] { cursor: grab; }
.doc-card[draggable=true]:active { cursor: grabbing; }
.col-header[draggable=true] { cursor: grab; }
.col-header[draggable=true]:active { cursor: grabbing; }

/* ─── Sprint Strip (dashboard top) ─── */
#dash-sprint-strip { margin-bottom: 28px; }
.sprint-strip-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sprint-strip-list::-webkit-scrollbar { height: 3px; }
.sprint-strip-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sprint-strip-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 190px; max-width: 230px; flex-shrink: 0; cursor: pointer; transition: border-color 0.15s; }
.sprint-strip-card:hover { border-color: var(--accent); }
.sprint-strip-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1.35; word-break: break-word; }
.sprint-strip-bar { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.sprint-strip-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.sprint-strip-bar-fill.overdue { background: var(--red); }
.sprint-strip-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
.sprint-strip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.sprint-strip-dot.overdue { background: var(--red); }

/* ─── My Plan (dashboard sistema tasks) ─── */
#dash-myplan { margin-bottom: 40px; }
.myplan-days-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.myplan-day-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.myplan-day-header { margin-bottom: 12px; }
.myplan-day-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.myplan-day-name { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.myplan-day-stat { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.myplan-prog-bar-wrap { width: 100%; height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; }
.myplan-prog-bar { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s; min-width: 0; }
.myplan-page-group { margin-bottom: 10px; }
.myplan-page-group:last-child { margin-bottom: 0; }
.myplan-page-label { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.myplan-task-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.myplan-task-row.done .myplan-task-text { opacity: 0.4; text-decoration: line-through; }
.myplan-task-text { font-size: 13px; color: var(--text); line-height: 1.4; flex: 1; min-width: 0; word-break: break-word; }
.myplan-role-pill { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(77,156,246,0.1); color: var(--blue); flex-shrink: 0; margin-top: 1px; white-space: nowrap; }
.myplan-empty { color: var(--text2); font-size: 13px; padding: 12px 0; }

/* ─── Controls page ─── */
.controls-sync-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.controls-sync-box h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.controls-sync-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
/* Расписания в «Синхронизации»: у .sched-* не было ни одного правила — блоки
   стояли голыми div'ами, отсюда и «старый» вид вкладки. */
.sched-grid { display: flex; flex-direction: column; gap: 14px; }
.sched-item { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.sched-label { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.sched-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-row select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px 12px; font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.12s; }
.sched-row select:focus { border-color: var(--accent); }
/* Полоса кнопок под карточкой настроек — одна раскладка вместо инлайновых стилей. */
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.settings-filter-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text2); }
.settings-filter-row select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 5px 10px; font-size: 13px; font-family: inherit; outline: none; margin-left: 6px; }
.settings-filter-row select:focus { border-color: var(--accent); }
.sync-log-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.sync-log-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text2); padding: 6px 10px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.sync-log-table td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sync-log-table tr:last-child td { border-bottom: none; }
.sync-log-empty { color: var(--text2); font-size: 13px; padding: 12px 0; }
/* Assignee diagnostics */
.assignee-diag-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.assignee-diag-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text2); padding: 5px 10px 7px; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; }
.assignee-diag-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.assignee-diag-table tr:last-child td { border-bottom: none; }
.diag-matched { color: var(--green); }
.diag-unmatched { color: var(--red); font-weight: 600; }
.diag-abbr { font-size: 11px; color: var(--text-dim); margin-left: 5px; }

@media (max-width: 820px) {
  .login-left { display: none; }
  .login-right { width: 100%; }
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; gap: 40px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-team-grid { grid-template-columns: repeat(2, 1fr); }
  .myplan-days-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════════════════════════
   Мобильный chrome — скрыт на десктопе
   ═══════════════════════════════════════════════════ */
.mobile-topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  height: 52px; z-index: 120; background: var(--bg);
  border-bottom: 1px solid var(--border);
  align-items: center; padding: 0 16px; gap: 12px;
}
.mobile-menu-btn {
  width: 36px; height: 36px; background: none; border: none; color: var(--text2);
  cursor: pointer; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.mobile-menu-btn:active { background: var(--card); color: var(--text); }
.mobile-topbar-logo { font-size: 15px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.mobile-topbar-view  { font-size: 15px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mobile-backdrop {
  display: none; position: fixed; inset: 0; z-index: 115;
  background: rgba(0,0,0,0.48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.mobile-backdrop.open { display: block; }

.mobile-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 58px; z-index: 120; background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* flex: 1 — ряд обязан растянуться на всю ширину .mobile-bottom-nav.
   Без него ряд (он появился, когда меню стало рисоваться из каталога)
   ужимается по содержимому: кнопки жмутся к левому краю, подписи
   слипаются в «СпринтыСистемаДокументы», справа пустая треть экрана. */
.mob-nav-row { display: flex; flex: 1; height: 58px; }
.mob-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 500; padding: 4px 0;
  transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.mob-nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
.mob-nav-item.active { color: var(--accent); }
.mob-nav-item.active svg { stroke-width: 2; }

/* ═══════════════════════════════════════════════════
   MOBILE ≤ 640px
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Show mobile chrome */
  .mobile-topbar     { display: flex; }
  .mobile-bottom-nav { display: flex; }

  /* App shell — контент на всю ширину */
  #app-screen { grid-template-columns: 1fr !important; }

  /* Сайдбар — fixed overlay, приезжает слева */
  .sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 280px !important; height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 130; overflow-y: auto; overflow-x: hidden;
    box-shadow: 6px 0 40px rgba(0,0,0,0.45) !important;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }

  /* В открытом мобильном сайдбаре показываем всё */
  .sidebar.mobile-open .nav-label  { opacity: 1 !important; max-width: 200px !important; overflow: visible !important; display: inline !important; pointer-events: auto !important; }
  .sidebar.mobile-open .brand-text  { opacity: 1 !important; max-width: 200px !important; display: inline !important; }
  .sidebar.mobile-open .nav-item    { width: 100% !important; height: auto !important; display: flex !important; border-radius: 0 !important; color: var(--text2); padding: 10px 22px !important; justify-content: flex-start !important; gap: 12px !important; }
  .sidebar.mobile-open .nav-item.active::before { left: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; }
  .sidebar.mobile-open .sidebar-nav { align-items: stretch !important; gap: 0 !important; }
  .sidebar.mobile-open .brand { padding: 0 22px 24px !important; justify-content: flex-start !important; }
  .sidebar.mobile-open .nav-group { align-items: stretch !important; gap: 0 !important; }
  .sidebar.mobile-open .nav-group + .nav-group::before { display: none !important; }
  .sidebar.mobile-open .nav-group + .nav-group { margin-top: 8px !important; padding-top: 8px !important; }
  .sidebar.mobile-open .nav-group-title { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 8px 22px 4px !important; background: none; border: none; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
  .sidebar.mobile-open .nav-group.collapsed .nav-item { display: none !important; }
  .sidebar.mobile-open .nav-search { width: auto !important; height: 38px !important; display: flex !important; justify-content: flex-start !important; gap: 12px; margin: 0 22px 14px !important; padding: 0 12px !important; border-color: var(--border) !important; }
  .sidebar.mobile-open .nav-search .nav-label { display: inline !important; }
  .sidebar.mobile-open .nav-search-kbd { display: none !important; }
  .sidebar.mobile-open .nav-badge { position: static !important; width: auto !important; height: auto !important; padding: 1px 5px !important; border-radius: 8px !important; font-size: 10px !important; font-weight: 700; margin-left: 4px; }
  .sidebar.mobile-open .nav-ext { display: inline-flex !important; }
  .sidebar.mobile-open .nav-pin { display: none !important; }
  .sidebar.mobile-open .btn-logout,
  .sidebar.mobile-open .btn-theme { width: auto !important; height: auto !important; padding: 6px 12px !important; align-self: stretch !important; }
  .sidebar.mobile-open .btn-logout .btn-logout-label,
  .sidebar.mobile-open .btn-theme .btn-theme-label { display: inline !important; }
  .sidebar.mobile-open .sidebar-user { justify-content: flex-start !important; }
  .sidebar.mobile-open .brand       { padding: 0 22px 24px !important; justify-content: flex-start !important; }
  .sidebar.mobile-open .sidebar-user-info { display: flex !important; flex-direction: column !important; }
  .sidebar.mobile-open .btn-logout  { display: flex !important; }
  .sidebar.mobile-open .sidebar-footer { padding: 14px 22px 24px !important; align-items: stretch !important; }

  /* Прячем десктопный toggle-кнопку сайдбара: в выезжающем меню сворачивать
     до иконок нечего, а кнопка занимала целую строку под логотипом. */
  .sidebar-toggle-wrap { display: none !important; }
  .sidebar .sidebar-toggle { display: none !important; }

  /* Основной контент: отступы под topbar и bottom nav */
  .app-main     { padding-top: 52px; overflow: hidden; }
  .main-content { padding: 20px 14px 76px !important; max-width: 100% !important; overflow-y: auto; }

  /* ── Гриды → мобильные ── */
  .dash-stats  { grid-template-columns: 1fr 1fr !important; }
  .dash-stat   { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .dash-stat:nth-child(odd) { border-right: 1px solid var(--border) !important; }
  .dash-stat:nth-last-child(-n+2) { border-bottom: none !important; }
  .dash-stat-val { font-size: 26px !important; }

  .dash-grid        { grid-template-columns: 1fr !important; gap: 24px !important; }
  .dash-team-grid   { grid-template-columns: 1fr 1fr !important; }
  .tp-grid          { grid-template-columns: 1fr 1fr !important; }
  .team-list        { grid-template-columns: 1fr !important; }
  .form-row         { grid-template-columns: 1fr !important; }

  .triage-two-col   { grid-template-columns: 1fr !important; gap: 20px !important; }
  .triage-metrics   { grid-template-columns: 1fr 1fr !important; }
  .triage-item      { grid-template-columns: 20px minmax(0,1fr) 64px !important; gap: 8px !important; }
  .triage-item > :nth-child(4) { display: none; }

  .myplan-days-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .task-actions     { margin-top: 8px; }

  /* Страница логина — только правая часть */
  .login-left  { display: none !important; }
  .login-right { width: 100% !important; padding: 32px 24px !important; }

  /* Модалка спринта */
  .modal-overlay { padding: 12px !important; align-items: flex-end !important; }
  .sprint-modal-box { border-radius: 18px 18px 12px 12px !important; max-height: 90vh; overflow-y: auto; }

  /* Карточки чуть крупнее для тапа */
  .task-card  { padding: 13px 14px !important; }
  .nav-item { min-height: 42px; }

  /* Скрыть горизонтальный скролл-сайдбар тоже на 700 */
}

@media (max-width: 700px) {
  .triage-search { max-width: 100% !important; }
  .triage-list-header { flex-wrap: wrap; gap: 8px; }
}

/* ─── ⌘K Command Palette ────────────────────────────────────────────────── */
#cmd-palette-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
#cmd-palette {
  width: 560px; max-width: calc(100vw - 32px);
  background: #161618; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 64px rgba(0,0,0,.7);
}
.cp-input-row {
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.cp-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8a8a85; flex-shrink: 0; }
.cp-q {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e5e5e3; font-size: 14px; font-family: 'Inter', system-ui, sans-serif;
}
.cp-esc {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  padding: 1px 6px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  color: #8a8a85; cursor: pointer; flex-shrink: 0;
}
.cp-results { padding: 6px; max-height: 380px; overflow-y: auto; }
.cp-group {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: #6a6a68; padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .08em;
}
.cp-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 5px; cursor: pointer;
}
.cp-item:hover, .cp-item.sel { background: rgba(255,255,255,.05); }
.cp-item .cp-ttl { font-size: 13px; color: #e5e5e3; flex: 1; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item .cp-meta { font-size: 11px; color: #8a8a85; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.cp-item .cp-icon { font-size: 15px; width: 30px; text-align: center; flex-shrink: 0; }
/* Жёстко ограничиваем любую аватарку внутри строки палитры — без этого ctAvatarHtml может разлететься на всю палитру при медленной загрузке картинки */
.cp-item .ct-av,
.cp-item .ct-av.has-photo,
.cp-item .ct-av img,
.cp-item .ct-av.has-photo img {
  width: 28px !important; height: 28px !important;
  min-width: 28px; min-height: 28px;
  max-width: 28px; max-height: 28px;
  border-radius: 50%; flex-shrink: 0; font-size: 11px;
  object-fit: cover;
}
.cp-divider {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: #8a8a85; padding: 10px 10px 6px; text-transform: uppercase; letter-spacing: .08em;
}
.cp-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.cp-loading { padding: 4px 10px 8px; font-size: 11px; color: #8a8a85; font-family: 'JetBrains Mono', monospace; }
.cp-footer {
  border-top: 1px solid rgba(255,255,255,.06); padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #8a8a85; font-family: 'JetBrains Mono', monospace;
}
.cp-footer a { color: #8a8a85; cursor: pointer; text-decoration: none; }
.cp-footer a:hover { color: #e5e5e3; }
.cp-item mark {
  background: rgba(255,200,80,.32); color: inherit; padding: 0 2px; border-radius: 3px;
  animation: cpMarkPulse 700ms ease-out;
}
@keyframes cpMarkPulse { 0% { background: rgba(255,200,80,.85); } 100% { background: rgba(255,200,80,.32); } }
.cp-item { animation: cpSlideIn 150ms cubic-bezier(.2,.7,.3,1) both; }
.cp-item:nth-child(1) { animation-delay: 0ms; }
.cp-item:nth-child(2) { animation-delay: 18ms; }
.cp-item:nth-child(3) { animation-delay: 36ms; }
.cp-item:nth-child(4) { animation-delay: 54ms; }
.cp-item:nth-child(5) { animation-delay: 72ms; }
.cp-item:nth-child(6) { animation-delay: 90ms; }
.cp-item:nth-child(7) { animation-delay: 108ms; }
.cp-item:nth-child(8) { animation-delay: 126ms; }
@keyframes cpSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── Подсветка цели после deep-link из поиска ────────────────────────── */
.search-target-flash {
  animation: searchTargetPulse 2.4s cubic-bezier(.4,0,.2,1) both;
  position: relative;
  z-index: 1;
}
@keyframes searchTargetPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,80,.0),   0 0 0 0 rgba(255,200,80,.0); background-color: transparent; }
  10%  { box-shadow: 0 0 0 3px rgba(255,200,80,.85), 0 0 22px 6px rgba(255,200,80,.55); background-color: rgba(255,200,80,.18); }
  35%  { box-shadow: 0 0 0 2px rgba(255,200,80,.55), 0 0 14px 4px rgba(255,200,80,.30); background-color: rgba(255,200,80,.10); }
  60%  { box-shadow: 0 0 0 2px rgba(255,200,80,.40), 0 0 10px 3px rgba(255,200,80,.20); background-color: rgba(255,200,80,.06); }
  100% { box-shadow: 0 0 0 0 rgba(255,200,80,0),     0 0 0 0 rgba(255,200,80,0); background-color: transparent; }
}

.mobile-topbar-search {
  background: transparent; border: none; color: var(--text2); cursor: pointer;
  padding: 4px 8px; display: grid; place-items: center; font-size: 16px;
  margin-left: auto;
}

/* ─── Окно горячих клавиш ─────────────────────────────────────────────── */
#kbd-help-overlay { animation: kbdFadeIn 180ms ease-out; }
@keyframes kbdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.kbd-help-panel {
  background: #161618; border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 22px 26px;
  width: min(560px, 92vw); max-height: 80vh; overflow-y: auto;
  font-family: 'Inter', system-ui, sans-serif; color: #e5e5e3;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
.kbd-help-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.kbd-help-sub { font-size: 12px; color: #8a8a85; margin-bottom: 18px; }
.kbd-help-group { margin-bottom: 16px; }
.kbd-help-group:last-child { margin-bottom: 0; }
.kbd-help-group-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: #8a8a85; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
}
.kbd-help-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.kbd-help-row .kbd-help-label { color: inherit; }
.kbd-help-row .kbd-help-keys { display: flex; gap: 4px; flex-shrink: 0; }
.kbd-help-row .kbd-key {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 2px 7px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); border-radius: 4px;
  color: inherit; min-width: 22px; text-align: center;
}
/* ─── Photo avatars ──────────────────────────────────────────────────────── */
.ct-av.has-photo {
  background: var(--card2);
  overflow: hidden;
  padding: 0;
  font-size: 0;
  box-shadow: none;
}
.ct-av.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.sidebar-avatar.has-photo {
  background: var(--card2);
  overflow: hidden;
  padding: 0;
  font-size: 0;
}
.sidebar-avatar.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
/* ─── Users table avatar cell ───────────────────────────────────────────── */
.ut-avatar-cell { display: flex; align-items: center; gap: 8px; }
.ut-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card2);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--text);
  flex-shrink: 0;
}
.ut-avatar.has-photo { overflow: hidden; padding: 0; font-size: 0; }
.ut-avatar.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.ut-avatar-actions { display: flex; gap: 4px; }
.ut-av-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); border-radius: 5px;
  padding: 3px 7px; cursor: pointer;
  font-size: 12px; font-family: inherit;
  transition: all 0.12s;
}
.ut-av-btn svg { width: 13px; height: 13px; display: block; }
.ut-av-btn:hover { color: var(--text); border-color: var(--text-dim); }
.ut-av-btn.danger:hover { color: var(--red); border-color: var(--red); }

/* ─── Reviews page ─────────────────────────────────────────────────────── */
.reviews-dashboard { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 720px) { .reviews-dashboard { grid-template-columns: repeat(2, 1fr); } }
.reviews-kpi { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.reviews-kpi-label { font-size: 12px; color: var(--text2, #6b7280); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.reviews-kpi-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.reviews-kpi-value.warn { color: #ea580c; }
.reviews-kpi-value.bad  { color: #dc2626; }
.reviews-kpi-value.ok   { color: #059669; }
/* Полоса вкладок раздела — общий DS-компонент .seg-switch/.seg-btn (см. ~строку 311).
   Здесь остаётся только показ/скрытие самих панелей. */
.reviews-tab-pane { display: none; }
.reviews-tab-pane.active { display: block; }
.reviews-feed-filters { display:flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; padding: 10px 12px; background: var(--card); border:1px solid var(--border); border-radius: 10px; }

/* ════ Отзывы: слой Ponkins DS (.rvw-*) ═══════════════════════════════════
   Очередь ЯМ, шаблоны и тон ответа. Токены, без хардкод-хексов и эмодзи;
   числа и даты — моно, разделители-точки — цветом --border2. */

/* Тихая строка-сводка под вкладками: счётчики очереди вместо абзаца текста */
.rvw-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text2); margin-bottom: 14px; }
.rvw-summary .mono { font-family: var(--font-mono); color: var(--text); }
.rvw-summary .rvw-dot { color: var(--border2); }
.rvw-summary .mono.warn { color: var(--yellow); }
.rvw-summary .mono.over { color: var(--red); }

/* Тулбар: фильтры слева, действия справа */
.rvw-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rvw-toolbar-spacer { flex: 1; }
.rvw-select { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; color: var(--text); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: border-color .12s; }
.rvw-select:hover { border-color: var(--border-hover); }
.rvw-select:focus { outline: none; border-color: var(--border-hover); }

/* Кнопки — те же три веса, что в «Галерее» */
.rvw-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; border-radius: 8px; padding: 7px 13px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.rvw-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.rvw-btn:disabled { opacity: .5; cursor: default; }
.rvw-btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text2); }
.rvw-btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); border-color: var(--border); }
.rvw-btn-secondary { background: var(--card2); border: 1px solid var(--border2); color: var(--text); }
.rvw-btn-secondary:hover:not(:disabled) { border-color: var(--border-hover); }
.rvw-btn-accent { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); font-weight: 600; }
.rvw-btn-accent:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.rvw-btn-danger { background: transparent; border: 1px solid transparent; color: var(--text2); }
.rvw-btn-danger:hover:not(:disabled) { color: var(--red); background: var(--red-soft); border-color: transparent; }

/* Карточка отзыва */
.rvw-list { display: flex; flex-direction: column; gap: 8px; }
.rvw-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color .12s; }
.rvw-card:hover { border-color: var(--border-hover); }
.rvw-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvw-rating { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rvw-rating.r5, .rvw-rating.r4 { background: var(--green-soft); color: var(--green); }
.rvw-rating.r3 { background: var(--yellow-soft); color: var(--yellow); }
.rvw-rating.r2, .rvw-rating.r1 { background: var(--red-soft); color: var(--red); }
.rvw-rating.r0 { background: var(--card2); color: var(--text-dim); }
.rvw-offer { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.rvw-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }
.rvw-meta .mono { font-family: var(--font-mono); }
.rvw-dot { color: var(--border2); }
.rvw-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Статус записи: виден на вкладках «Отвеченные», «Пропущенные», «С ошибкой» */
.rvw-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.rvw-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rvw-status--sent { background: var(--green-soft); color: var(--green); }
.rvw-status--sending { background: var(--blue-soft); color: var(--blue); }
.rvw-status--skipped { background: var(--card2); color: var(--text2); }
.rvw-status--failed { background: var(--red-soft); color: var(--red); }

/* Текст отзыва: плюсы/минусы подписаны меткой, а не жирным внутри абзаца */
.rvw-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
.rvw-body-line { display: flex; gap: 8px; }
.rvw-body-label { flex-shrink: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; width: 54px; }
/* Свободный комментарий без метки встаёт в ту же колонку, что «Плюсы»/«Минусы»,
   но только когда метки в карточке вообще есть — иначе абзац прижат к краю. */
.rvw-body:has(.rvw-body-label) .rvw-body-line:not(:has(.rvw-body-label))::before { content: ''; flex-shrink: 0; width: 54px; }
.rvw-body-label.plus { color: var(--green); }
.rvw-body-label.minus { color: var(--red); }
.rvw-body-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.rvw-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rvw-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.rvw-tpl-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--text2); background: var(--card2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; }

/* Поле ответа */
.rvw-textarea { width: 100%; margin-top: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; resize: vertical; transition: border-color .12s; }
.rvw-textarea:focus { outline: none; border-color: var(--border-hover); }
.rvw-textarea:disabled { color: var(--text2); cursor: default; }
.rvw-textarea::placeholder { color: var(--text-dim); }

/* Плашки-заметки внутри карточки: тон задаёт левая риска, не заливка целиком */
.rvw-note { margin-top: 10px; padding: 8px 12px; border-radius: 8px; border-left: 2px solid var(--border2); background: var(--card2); font-size: 13px; line-height: 1.45; color: var(--text2); }
.rvw-note b { color: var(--text); font-weight: 600; }
.rvw-note--warn { border-left-color: var(--yellow); background: var(--yellow-soft); }
.rvw-note--bad { border-left-color: var(--red); background: var(--red-soft); }
.rvw-note--info { border-left-color: var(--blue); background: var(--blue-soft); }
.rvw-note-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rvw-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Плашка «синк отзывов ЯМ упал»: висит над очередью, пока последний проход
   синка закончился ошибкой. Красная — это не информация, а поломка: без неё
   мёртвый синк выглядел как «все отзывы разобраны». */
.ym-sync-alert { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--red-soft); border-left: 2px solid var(--red); border-radius: 10px; background: var(--red-soft); font-size: 13px; line-height: 1.45; }
.ym-sync-alert b { color: var(--red); font-weight: 600; }
.ym-sync-alert .ym-sync-alert-reason { display: block; margin-top: 4px; color: var(--text2); word-break: break-word; }

/* Пустое состояние очереди */
.rvw-empty { padding: 60px 12px; text-align: center; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.rvw-empty--bad { color: var(--red); }

/* Вкладка «Шаблоны» */
.rvw-intro { font-size: 13px; line-height: 1.55; color: var(--text2); max-width: 640px; margin: 0 0 16px; }
.rvw-tpl { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color .12s; }
.rvw-tpl:hover { border-color: var(--border-hover); }
.rvw-tpl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rvw-tpl-name { font-size: 14px; font-weight: 600; color: var(--text); }
.rvw-tpl-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rvw-tpl-off { color: var(--yellow); }
.rvw-tpl-variants { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.rvw-tpl-variant { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.rvw-tpl-variant:hover { background: var(--bg-hover); border-color: var(--border); }
.rvw-tpl-variant-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text); word-break: break-word; }
.rvw-tpl-variant-uses { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); padding-top: 2px; }
.rvw-tpl-variant .rvw-btn { opacity: 0; }
.rvw-tpl-variant:hover .rvw-btn { opacity: 1; }
.rvw-tpl-add { display: flex; gap: 8px; margin-top: 10px; }
.rvw-input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; color: var(--text); font-family: var(--font-sans); font-size: 13px; transition: border-color .12s; }
.rvw-input:focus { outline: none; border-color: var(--border-hover); }
.rvw-input::placeholder { color: var(--text-dim); }
.rvw-switch-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.rvw-switch-label { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text2); cursor: pointer; }

/* Вкладка «Тон ответа» */
.rvw-form { max-width: 640px; }
.rvw-form h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.rvw-form-hint { font-size: 13px; line-height: 1.55; color: var(--text2); margin: 0 0 16px; }
.rvw-counter { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.rvw-counter .mono { font-family: var(--font-mono); }
.rvw-form-status { margin-top: 10px; font-size: 12px; min-height: 16px; }
.reviews-feed-filters > label { display:flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text2, #6b7280); }
.reviews-feed-filters select, .reviews-feed-filters input { padding: 6px 8px; border:1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text, #111); font-size: 13px; }
.reviews-feed-list { display:flex; flex-direction: column; gap: 8px; }
.reviews-feed-item { background: var(--card); border:1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.reviews-feed-row { display:flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.reviews-feed-rating { font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.reviews-feed-rating.r5, .reviews-feed-rating.r4 { background: rgba(34,197,94,0.12); color: var(--green); }
.reviews-feed-rating.r3 { background: rgba(234,179,8,0.12); color: var(--yellow); }
.reviews-feed-rating.r2, .reviews-feed-rating.r1 { background: rgba(239,68,68,0.12); color: var(--red); }
.reviews-feed-mp { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(167,139,250,0.12); color: #a78bfa; text-transform: uppercase; }
.reviews-feed-mp.ozon { background: rgba(77,156,246,0.12); color: var(--blue); }
.reviews-feed-text { margin-top: 8px; color: var(--text, #111); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.reviews-history-controls { display:flex; gap: 12px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
.reviews-history-controls select { padding: 6px 8px; border:1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text, #111); font-size: 13px; min-width: 220px; }
.reviews-history-canvas-wrap { background: var(--card); border:1px solid var(--border); border-radius: 10px; padding: 16px; }
/* ─── AI product analysis ─────────────────────────────── */
.ai-accordion { display:none; }
.ai-accordion.open { display:table-row; }
.ai-accordion > td { padding: 12px 10px 16px; background: var(--bg); }
.ai-panel { background: var(--card); border:1px solid var(--border); border-radius: 12px; padding: 16px; }
.ai-priority-box { background: rgba(255,74,28,0.08); border:1px solid rgba(255,74,28,0.35); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.ai-priority-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #FF4A1C; margin-bottom: 4px; }
.ai-inner-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom: 12px; }
.ai-inner-tab-btn { background:transparent; border:0; padding:8px 14px; cursor:pointer; color:var(--text2); font-size:13px; font-weight:500; border-bottom:2px solid transparent; }
.ai-inner-tab-btn.active { color:var(--text); border-bottom-color: var(--accent, #4d9cf6); }
.ai-inner-tab-pane { display:none; }
.ai-inner-tab-pane.active { display:block; }
.ai-issue-card { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:8px; margin-bottom:6px; background: var(--bg); border:1px solid var(--border); }
.ai-severity-badge { flex-shrink:0; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.ai-severity-badge.critical { background:rgba(239,68,68,0.12); color:var(--red, #dc2626); }
.ai-severity-badge.important { background:rgba(255,74,28,0.12); color:#FF4A1C; }
.ai-severity-badge.minor { background:var(--card2, rgba(100,100,100,0.1)); color:var(--text2); }
.ai-quick-wins { margin-top: 12px; }
.ai-quick-wins-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text2); margin-bottom:6px; }
.ai-quick-win-item { display:flex; gap:8px; align-items:flex-start; font-size:13px; padding: 4px 0; }
.ai-summary { font-size:13px; color:var(--text2); margin-bottom:12px; line-height:1.5; font-style:italic; }
.ai-footer { display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.ai-stale-label { font-size:11px; color:var(--text2); margin-left:auto; }
.ai-empty { padding:24px; text-align:center; color:var(--text2); font-size:13px; }
.reviews-history-events { margin-top: 14px; }
.reviews-history-events table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reviews-history-events th, .reviews-history-events td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.reviews-readonly .pm-only { display: none !important; }
.review-ai-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 6px; vertical-align: middle; cursor: help; box-shadow: 0 0 0 2px rgba(255,255,255,0.04); }
.review-ai-dot.pos { background: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,0.4), 0 0 0 2px rgba(46,204,113,0.15); }
.review-ai-dot.neu { background: #f0ad4e; box-shadow: 0 0 8px rgba(240,173,78,0.4), 0 0 0 2px rgba(240,173,78,0.15); }
.review-ai-dot.neg { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.45), 0 0 0 2px rgba(231,76,60,0.18); }
.review-ai-chip { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text2); margin-left: 6px; vertical-align: middle; border: 1px solid var(--border); }
.review-ai-draft { margin-top: 10px; padding: 10px 12px; border-radius: 6px; font-size: 13px; background: var(--card2); border: 1px solid var(--border); }
.review-ai-draft__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-ai-draft__label { font-weight: 600; color: var(--text2); font-size: 12px; letter-spacing: 0.02em; }
.review-ai-draft__body { margin-top: 8px; white-space: pre-wrap; font-family: inherit; color: var(--text); }
.review-ai-draft__copy { font-size: 11px; padding: 3px 10px; border-radius: 4px; background: transparent; color: var(--text2); border: 1px solid var(--border); cursor: pointer; }
.review-ai-draft__copy:hover { background: var(--bg-hover); color: var(--text); }
.review-ai-draft.failed { background: rgba(231,76,60,0.06); border-color: rgba(231,76,60,0.3); }
.review-ai-draft.failed .review-ai-draft__label { color: #e74c3c; }
.review-ai-draft.failed .review-ai-draft__body { color: var(--text2); font-size: 12px; }

/* ── stocks (закупки и остатки) ─────────────────────────────────────────── */
.sk-page { max-width: 1280px; }
.sk-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.sk-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sk-head-sub { font-size: 13px; color: var(--text2); margin-top: 4px; }
.sk-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; padding-bottom: 0; }
.sk-tab { font-family: inherit; font-size: 13px; font-weight: 500; padding: 10px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text2); cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
.sk-tab:hover { color: var(--text); }
.sk-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.sk-sync-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.sk-sync-btn:hover { color: var(--text); border-color: var(--text2); }
.sk-filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.sk-search { padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--card); color: var(--text); width: 240px; outline: none; font-family: inherit; transition: border-color 0.15s; }
.sk-search:focus { border-color: var(--accent); }
.sk-select { padding: 8px 30px 8px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--card); color: var(--text); outline: none; font-family: inherit; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.sk-select:focus { border-color: var(--accent); }
.sk-zone-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sk-zone-stat { padding: 16px 20px; border-right: 1px solid var(--border); cursor: pointer; transition: background 0.15s; background: var(--card); }
.sk-zone-stat:last-child { border-right: none; }
.sk-zone-stat:hover { background: var(--bg-hover, var(--card2)); }
.sk-zone-stat.active { background: var(--card2); }
.sk-zone-stat-label { font-size: 11px; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.sk-zone-stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.sk-zone-stat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sk-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sk-table th { text-align: left; color: var(--text2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; background: var(--bg, transparent); }
.sk-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sk-table tbody tr:last-child td { border-bottom: none; }
.sk-table tbody tr { transition: background 0.12s; }
.sk-table tbody tr:hover { background: var(--bg-hover, var(--card2)); }
.sk-th-sort { cursor: pointer; user-select: none; transition: color 0.12s; }
.sk-th-sort:hover { color: var(--text); }
.sk-th-sort.sorted { color: var(--accent); }
.sk-th-sort.sorted::after { content: ' ↑'; font-size: 10px; }
.sk-th-sort.sorted.desc::after { content: ' ↓'; }
.sk-th-num { text-align: right; }
/* forecast heatmap — daily cells (120 days), each cell shows projected stock with number */
.sk-hm-row { display: inline-flex; gap: 1px; align-items: stretch; height: 24px; }
.sk-hm-cell {
  width: 32px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: -0.02em;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  cursor: default;
  flex-shrink: 0;
  position: relative;
}
.sk-hm-cell:hover { outline: 1.5px solid var(--text); outline-offset: 1px; z-index: 3; }
/* small gap every 7th cell — visually splits weeks */
.sk-hm-cell:nth-child(7n) { margin-right: 4px; }
/* Absolute-units thresholds matching the Google Sheets conditional formatting */
.sk-hm-cell.q0 { background: #161618; color: #4a4d55; }     /* 0 — empty */
.sk-hm-cell.q1 { background: #5b5d65; color: #fff; }        /* 1..9 — almost zero */
.sk-hm-cell.q2 { background: #dd7e6b; color: #fff; }        /* 10..249 — low (coral) */
.sk-hm-cell.q3 { background: #ffd58a; color: #1A1A1C; }     /* 250..499 — medium (peach) */
.sk-hm-cell.q4 { background: #fff2cc; color: #1A1A1C; }     /* 500..749 — comfortable (cream) */
.sk-hm-cell.q5 { background: #b6d7a8; color: #1A1A1C; }     /* 750+ — plenty (light green) */
/* axis labels in column header — sparse ticks */
.sk-hm-axis { position: relative; height: 14px; margin-top: 4px; }
.sk-hm-axis span { position: absolute; transform: translateX(-50%); font-size: 9.5px; color: var(--text2); font-weight: 500; line-height: 14px; }
.sk-hm-axis span.key { color: var(--text); font-weight: 700; }
/* Toggle for dynamics columns — pill style, clearly visible */
.sk-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--text2); background: transparent; cursor: pointer; transition: all 0.12s; user-select: none; white-space: nowrap; }
.sk-toggle:hover { color: var(--text); border-color: var(--text2); }
.sk-toggle.on { color: var(--text); border-color: var(--accent); background: rgba(255, 90, 50, 0.08); }
.sk-toggle-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); transition: background 0.12s; flex-shrink: 0; }
.sk-toggle.on .sk-toggle-dot { background: var(--accent); }

/* SKU detail page (full-width inside stocks section) */
.sk-page-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; color: var(--text2); cursor: pointer; font-family: inherit; transition: all 0.12s; margin-bottom: 16px; }
.sk-page-back:hover { color: var(--text); border-color: var(--text2); }
.sk-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sk-page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sk-page-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--text2); }
.sk-page-section { margin-bottom: 32px; }
.sk-page-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text2); margin-bottom: 12px; }
.sk-page-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sk-page-card { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 14px 16px; }
.sk-page-card-label { font-size: 10.5px; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.sk-page-card-value { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.sk-page-hm-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 16px; overflow-x: auto; }
.sk-page-dyn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 540px; }
.sk-page-dyn-cell { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.sk-page-dyn-cell-label { font-size: 10.5px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 6px; }
.sk-page-dyn-cell input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; font-family: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sk-page-dyn-cell input::-webkit-outer-spin-button, .sk-page-dyn-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-page-dyn-cell input:focus { border-color: var(--accent); }
.sk-page-dyn-cell input::placeholder { color: var(--text-dim); font-style: italic; }
.sk-page-dyn-cell.is-override input { color: var(--accent); font-weight: 600; }
.sk-page-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 880px) { .sk-page-cols { grid-template-columns: 1fr; } .sk-page-dyn-grid { grid-template-columns: repeat(2, 1fr); } }
.sk-page-ads-stub { background: var(--card2); border: 1px dashed var(--border); border-radius: 9px; padding: 22px 18px; text-align: center; color: var(--text2); font-size: 13px; line-height: 1.6; }
.sk-hm-tooltip { position: fixed; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--text); z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,0.18); white-space: nowrap; line-height: 1.5; }
.sk-hm-tooltip b { color: var(--text); }
.sk-hm-tooltip .muted { color: var(--text2); font-size: 11px; }
/* allow horizontal scroll of the whole stocks table */
.sk-table-wrap.scroll-x { overflow-x: auto; overflow-y: hidden; }
.sk-table-wrap.scroll-x .sk-table { min-width: max-content; }
/* Performance: skip rendering off-screen rows (content-visibility lets browser
   defer layout/paint of rows that aren't on screen). With ~120 cells per row
   and ~150 rows, this drops the active node count by 10x. */
.sk-table-wrap.scroll-x .sk-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 42px;
}
.sk-hm-row { contain: layout paint; }
.sk-flag-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 2px 4px; line-height: 1; color: var(--text2); transition: color 0.12s, transform 0.12s; }
.sk-flag-btn:hover { transform: scale(1.15); }
.sk-flag-btn.on { color: #ef4444; }
.sk-mp-chip { font-size: 10.5px; padding: 3px 7px; border-radius: 4px; background: var(--card2); color: var(--text2); font-weight: 600; letter-spacing: 0.04em; }
.sk-mp-chip.wb { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.sk-mp-chip.ozon { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.sk-zone-pill { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.sk-zone-pill.red { background: rgba(239, 68, 68, 0.13); color: #ef4444; }
.sk-zone-pill.yellow { background: rgba(245, 158, 11, 0.13); color: #f59e0b; }
.sk-zone-pill.green { background: rgba(34, 197, 94, 0.13); color: #22c55e; }
.sk-zone-pill.grey { background: var(--card2); color: var(--text2); }
.sk-rec { color: #3b82f6; font-weight: 600; }
.sk-inline-input { width: 100%; padding: 4px 4px; border: 1px solid transparent; border-radius: 5px; font-size: 12.5px; background: transparent; color: var(--text); outline: none; font-family: inherit; text-align: right; transition: border-color 0.12s, background 0.12s; -moz-appearance: textfield; box-sizing: border-box; min-width: 0; }
.sk-inline-input::-webkit-outer-spin-button, .sk-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sk-inline-input:hover { border-color: var(--border); }
.sk-inline-input:focus { border-color: var(--accent); background: var(--card); }
.sk-inline-input::placeholder { color: var(--text-dim); font-style: italic; }
.sk-inline-input.is-override { color: var(--accent); font-weight: 600; }
.sk-inline-input.is-auto { color: var(--text2); }
.sk-empty { padding: 48px 20px; text-align: center; color: var(--text2); font-size: 13px; }
.sk-archived-row { opacity: 0.55; }
.sk-archived-row td:first-child { border-left: 2px solid var(--text-dim); }
/* SKU detail panel */
.sk-panel { position: fixed; right: 0; top: 0; height: 100%; width: 460px; max-width: 100vw; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -8px 0 32px rgba(0,0,0,.18); z-index: 1000; overflow-y: auto; padding: 28px 24px; transition: transform .25s; }
.sk-panel-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text2); padding: 4px 8px; border-radius: 6px; line-height: 1; transition: all 0.12s; }
.sk-panel-close:hover { background: var(--card2); color: var(--text); }
.sk-panel-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; padding-right: 32px; word-break: break-word; }
.sk-panel-sub { font-size: 12px; color: var(--text2); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.sk-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.sk-stat-cell { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; }
.sk-stat-label { font-size: 10.5px; color: var(--text2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sk-stat-value { font-weight: 600; font-size: 14.5px; }
.sk-section-label { font-size: 11px; font-weight: 600; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.sk-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
.sk-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 14px; border-radius: 6px; cursor: pointer; transition: all 0.12s; border: 1px solid var(--border); background: transparent; color: var(--text); }
.sk-btn:hover { border-color: var(--text2); }
.sk-btn-danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.sk-btn-danger:hover { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; }
.sk-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.sk-btn-primary:hover { background: #ff6b44; border-color: #ff6b44; }
.sk-param-row { display: grid; grid-template-columns: 1fr 130px 60px; gap: 8px; align-items: center; margin-bottom: 8px; }
.sk-param-row label { font-size: 12.5px; color: var(--text); }
.sk-param-row .sk-param-hint { display: block; font-size: 10.5px; color: var(--text2); margin-top: 1px; }
.sk-param-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); outline: none; font-family: inherit; transition: border-color 0.12s; }
.sk-param-input:focus { border-color: var(--accent); }
.sk-param-input::placeholder { color: var(--text-dim); font-style: italic; }
.sk-param-reset { font-family: inherit; font-size: 11px; padding: 6px 8px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; transition: all 0.12s; }
.sk-param-reset:hover { color: var(--text); border-color: var(--text2); }
.sk-param-reset:disabled { opacity: 0.4; cursor: default; }
.sk-bd-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px; background: var(--card2); border-radius: 7px; margin-bottom: 18px; font-size: 12.5px; }
.sk-bd-key { color: var(--text2); }
.sk-bd-val { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sk-bd-val.zero { color: var(--text-dim); font-weight: 500; }
.sk-bd-total { font-weight: 700; padding-top: 4px; margin-top: 4px; border-top: 1px solid var(--border); }
.sk-move-row { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.sk-move-row:last-child { border-bottom: none; }
.sk-move-delta { font-weight: 600; min-width: 40px; }
.sk-move-delta.pos { color: #22c55e; }
.sk-move-delta.neg { color: #ef4444; }
.sk-move-kind { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--card2); color: var(--text2); }
.sk-move-date { color: var(--text2); margin-left: auto; font-size: 11.5px; }
@media (max-width: 720px) {
  .sk-zone-stats { grid-template-columns: repeat(2, 1fr); }
  .sk-zone-stat:nth-child(2) { border-right: none; }
  .sk-zone-stat:nth-child(1), .sk-zone-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}
.sync-warn {
  display: inline-block;
  margin-left: 6px;
  cursor: help;
  font-size: 14px;
}
/* ── QA-design block ── */
.qa-block { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.qa-block h4 { margin: 0 0 8px; font-size: 13px; color: var(--text2); }
/* Компактная шапка: название, время и кнопка перезапуска — одной строкой. */
.qa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-title { font-size: 13px; color: var(--text2); font-weight: 600; }
.qa-stamp { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-left: auto; }
.qa-rerun { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text2); cursor: pointer; font-family: inherit; font-size: 11.5px; padding: 3px 9px; transition: var(--transition-hover); }
.qa-rerun:hover { color: var(--text); border-color: var(--border-hover); }
.qa-line { font-size: 12.5px; margin-top: 6px; color: var(--text2); }
.qa-line a { color: var(--blue); text-decoration: none; }
.qa-line a:hover { text-decoration: underline; }
.qa-error { color: var(--red); }
.qa-sep { color: var(--border2); margin: 0 7px; }
/* Счёт тезисов: значение несёт число и цвет, не эмодзи */
.qa-n { font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.qa-n-fail { color: var(--red); }
.qa-n-warn { color: var(--yellow); }
.qa-n-ok { color: var(--green); }
/* Плашки состояния — точка через ::before, как .rvw-status */
.qa-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.qa-status-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.qa-badge-pass { background: var(--green-soft); color: var(--green); }
.qa-badge-issues { background: var(--yellow-soft); color: var(--yellow); }
.qa-badge-running { background: var(--blue-soft); color: var(--blue); }
.qa-badge-failed { background: var(--red-soft); color: var(--red); }
.qa-tezis-details { margin-top: 8px; }
.qa-tezis-details > summary { cursor: pointer; font-size: 12.5px; color: var(--text2); padding: 4px 0; list-style: none; }
.qa-tezis-details > summary::-webkit-details-marker { display: none; }
.qa-tezis-details > summary::before { content: '▸ '; color: var(--text-dim); }
.qa-tezis-details[open] > summary::before { content: '▾ '; }
.qa-tezis-details > summary:hover { color: var(--text); }
/* Вердикт тезиса — цветная риска слева вместо эмодзи в начале строки */
.qa-tezis { margin: 6px 0; padding-left: 10px; font-size: 12.5px; color: var(--text); border-left: 2px solid var(--border2); }
.qa-tezis-pass { border-left-color: var(--green); }
.qa-tezis-fail { border-left-color: var(--red); }
.qa-tezis-partial { border-left-color: var(--yellow); }
.qa-evidence { margin-top: 2px; color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.qa-history { margin-top: 12px; }
.qa-history summary { cursor: pointer; font-size: 12px; color: var(--text2); }
.qa-history summary:hover { color: var(--text); }
.qa-history-item { padding: 4px 0; font-size: 12px; color: var(--text2); }

.podbor-view-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }

/* ── Телефон: «Вывод новинок» ────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Заголовок и синк в столбик: кнопка не давит на заголовок */
  #view-podbor .page-topbar { align-items: flex-start; }
  /* Вкладки лентой — четыре штуки в строку на 375px не влезают */
  .podbor-view-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .podbor-view-tabs::-webkit-scrollbar { display: none; }
  .pb-season-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pb-season-tabs::-webkit-scrollbar { display: none; }
  /* Сводка: полоска прогресса уходит на свою строку и перестаёт вылезать */
  .pb-summary-bar-wrap { margin-left: 0; width: 100%; }
  .pb-summary-bar-track { flex: 1; width: auto; }
  /* Фильтры: поле поиска на всю ширину, кнопка под ним */
  .pb-flt-search { min-width: 0; flex-basis: 100%; }
  .pb-flt { min-width: 0; flex-basis: 100%; }
  .pb-flt-reset { width: 100%; }
  /* Карточка товара: превью и прогресс вниз, строка «где сейчас» не жмётся */
  .pb-product-header { gap: 10px; padding: 12px 14px; }
  .pb-head-prog { margin-left: 0; width: 100%; }
  .pb-head-prog .pb-bar-mini { flex: 1; width: auto; }
  .pb-product-sub { white-space: normal; }
  /* Строки задач в развороте: сетка в пять колонок на 375px нечитаема */
  .pb-stage-section { padding: 0 14px; }
  .pb-task-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .pb-task-name { grid-column: 1 / -1; white-space: normal; }
  .pb-task-actions { grid-column: 2; grid-row: 2; }
}


/* ── pipeline table ─────────────────────────────────────────────────────── */
.pipeline-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  min-height: 22px;
  color: var(--text2);
  font-size: 12px;
}
#pipeline-table-container { overflow-x: auto; }
.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}
.pipeline-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.pipeline-table thead th:hover { color: var(--text); }
.pipeline-table thead th.sort-asc::after  { content: ' ▲'; font-size: 10px; }
.pipeline-table thead th.sort-desc::after { content: ' ▼'; font-size: 10px; }
.pipeline-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pipeline-table tbody tr:hover { background: var(--bg-hover); }
.pipeline-table tbody tr.row-done { opacity: 0.55; transition: opacity 0.15s; }
.pipeline-table tbody tr.row-done:hover { opacity: 1; }
.pipeline-table tbody tr.row-overdue td:first-child {
  border-left: 3px solid #f44336;
}
.pipeline-table .col-product {
  position: sticky;
  left: 0;
  background: var(--bg);
  font-weight: 500;
  cursor: pointer;
  color: var(--accent);
}
.pipeline-table tbody tr:hover .col-product { background: var(--bg-hover); }
.pipeline-table .col-product:hover { text-decoration: underline; }
.pipeline-table .col-doc { width: 36px; text-align: center; }
.pipeline-table .col-doc a { font-size: 18px; text-decoration: none; }
.pipeline-table .col-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pipeline-table .col-stage img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.pipeline-table .col-stage .avatar-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card2);
  display: inline-block;
}
.pipeline-table .col-deadline.overdue { color: #f44336; font-weight: 500; }
.pipeline-table .col-sla.sla-ok { color: #76C93C; }
.pipeline-table .col-sla.sla-warn { color: var(--accent2); }
.pipeline-table .col-sla.sla-overdue { color: #f44336; font-weight: 500; }
.pipeline-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.pipeline-pill.in-progress { background: var(--accent-soft); color: var(--accent); }
.pipeline-pill.done { background: var(--card2); color: var(--text2); }
.pipeline-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text2);
}
.pipeline-empty .empty-title { font-size: 18px; margin-bottom: 12px; }
.pipeline-error {
  padding: 16px;
  background: rgba(244,67,54,0.1);
  color: #f44336;
  border-radius: 6px;
  text-align: center;
}

/* ── pipeline action buttons (Передать / Вернуть / История) ─────────────── */
.pipeline-table .pl-col-actions {
  position: sticky;
  right: 0;
  background: var(--bg);
  white-space: nowrap;
  text-align: right;
  padding-left: 8px;
}
.pipeline-table tbody tr:hover .pl-col-actions { background: var(--bg-hover); }
.pbpipeline-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.pbpipeline-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text2);
}
.pbpipeline-action-btn.danger { color: #f44336; }
.pbpipeline-action-btn.danger:hover { background: rgba(244,67,54,0.1); border-color: #f44336; }

@media (max-width: 600px) {
  .pbpipeline-action-btn { padding: 6px 10px; font-size: 16px; }
}

/* ─── Voice section ──────────────────────────────────────────────────────────── */
#view-voice { display: none; }
.voice-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.voice-tab-btn { background: transparent; border: 0; padding: 10px 16px; cursor: pointer; color: var(--text2); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; font-family: inherit; transition: color 0.15s; }
.voice-tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.voice-tab-btn:hover { color: var(--text); }
.voice-filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.voice-filter-bar select, .voice-filter-bar input[type=text], .voice-filter-bar input[type=date] { font-family: inherit; font-size: 12px; background: var(--card2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 10px; cursor: pointer; outline: none; }
.voice-filter-bar input[type=text] { min-width: 160px; }
.voice-filter-bar select:focus, .voice-filter-bar input:focus { border-color: var(--accent); }
.voice-msg-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.15s; }
.voice-msg-card:hover { border-color: var(--border-hover); }
.voice-msg-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.voice-msg-sender { font-size: 14px; font-weight: 600; }
.voice-msg-chat { font-size: 12px; color: var(--text2); }
.voice-msg-time { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.voice-msg-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.voice-duration { font-size: 12px; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
.voice-urgent-badge { background: rgba(239,68,68,0.15); color: var(--red); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.voice-task-count { font-size: 12px; color: var(--text2); }
.voice-summary { font-size: 13px; color: var(--text2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.voice-summary-title { font-size: 13px; color: var(--text); font-weight: 600; line-height: 1.4; }
.voice-keypoints { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.voice-keypoints li { margin: 1px 0; }
.voice-keypoints-more { font-size: 12px; color: var(--text3, var(--text2)); padding-left: 18px; }
.voice-tasks-table { width: 100%; border-collapse: collapse; }
.voice-tasks-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.voice-tasks-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.voice-tasks-table tr:hover td { background: var(--bg-hover); cursor: pointer; }
.voice-tasks-table tr:last-child td { border-bottom: none; }
.voice-priority-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.voice-priority-urgent { background: rgba(239,68,68,0.15); color: var(--red); }
.voice-priority-high { background: rgba(232,163,61,0.15); color: var(--yellow); }
.voice-priority-normal { background: rgba(77,156,246,0.15); color: var(--blue); }
.voice-priority-low { background: var(--card2); color: var(--text2); }
.voice-status-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.voice-status-new { background: rgba(77,156,246,0.15); color: var(--blue); }
.voice-status-routed { background: rgba(118,201,60,0.15); color: var(--green); }
.voice-status-done { background: rgba(118,201,60,0.15); color: var(--green); }
.voice-status-rejected { background: var(--card2); color: var(--text2); }
/* detail modal */
.voice-detail-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100; display: none; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; }
.voice-detail-modal.open { display: flex; }
.voice-detail-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 680px; box-shadow: var(--shadow-md); padding: 28px; position: relative; margin: auto; }
.voice-detail-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; }
.voice-detail-close:hover { color: var(--text); }
.voice-detail-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.voice-detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); margin-bottom: 8px; }
.voice-transcript { font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; background: var(--card2); border-radius: 8px; padding: 12px 14px; max-height: 200px; overflow-y: auto; }
.voice-task-item { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.voice-task-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.voice-task-desc { font-size: 13px; color: var(--text2); margin-bottom: 8px; }
.voice-task-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--text2); }
.voice-task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-action-btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); transition: all 0.12s; }
.voice-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.voice-action-btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.voice-action-btn.primary:hover { background: #ff6b44; border-color: #ff6b44; }
.voice-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.voice-llm-toggle { font-size: 12px; color: var(--accent); cursor: pointer; user-select: none; }
.voice-llm-raw { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text2); background: var(--card2); border-radius: 8px; padding: 12px; margin-top: 8px; white-space: pre-wrap; overflow-x: auto; max-height: 260px; overflow-y: auto; }
/* route-to-sprint modal */
.voice-route-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; }
.voice-route-modal.open { display: flex; }
.voice-route-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 480px; box-shadow: var(--shadow-md); padding: 28px; }
/* ─── Survey (опрос по конвейеру контента) ─── */
.survey-page { max-width: 640px; margin: 0 auto; padding: 24px 0 60px; }

/* ── Раздел «Галерея» (редизайн: минимализм, токены) ── */
#view-gallery { max-width: 1120px; }
.gal-date { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-bottom: 7px; }
.gal-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.gal-summary { font-size: 13px; color: var(--text2); margin: 6px 0 22px; }
.gal-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gal-create-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; border-radius: 9px; padding: 9px 14px; cursor: pointer; white-space: nowrap; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border-soft); transition: background .12s, border-color .12s, color .12s; }
.gal-create-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.gal-create-btn svg { width: 15px; height: 15px; }
.gal-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.gal-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 340px; }
.gal-search-wrap svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--text-dim); pointer-events: none; }
.gal-search { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px 8px 33px; color: var(--text); font-family: var(--font-sans); font-size: 13.5px; transition: border-color .12s; }
.gal-search:focus { outline: none; border-color: var(--border-hover); }
.gal-toolbar-spacer { flex: 1; }
/* Чипов теперь не три, а три + по одному на каждую группу — строка переносится. */
.gal-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.gal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; border-radius: 8px; cursor: pointer; font-family: var(--font-sans); font-weight: 500; color: var(--text2); background: transparent; border: 1px solid transparent; transition: color .12s, background .12s, border-color .12s; }
.gal-chip.active { font-weight: 600; color: var(--text); background: var(--card2); border-color: var(--border2); }
.gal-chip-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.gal-group { display: flex; align-items: center; gap: 10px; padding: 22px 12px 8px; }
.gal-group-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.gal-group-line { flex: 1; height: 1px; background: var(--border); }
.gal-group-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.gal-rows { display: flex; flex-direction: column; gap: 2px; }
.gal-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; cursor: pointer; transition: background .12s, border-color .12s; }
.gal-row:hover { background: var(--bg-hover); border-color: var(--border); }
.gal-row--empty { cursor: default; }
.gal-thumb { width: 38px; height: 48px; border-radius: 6px; border: 1px solid var(--border); background: var(--card2); overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding: 5px; box-sizing: border-box; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.gal-thumb--empty { opacity: .45; }
.gal-ph-line { height: 3px; border-radius: 2px; background: var(--border2); }
.gal-ph-line.sub { width: 46%; background: var(--border); }
.gal-ph-fill { flex: 1; background: var(--card); border-radius: 3px; }
.gal-row-name { font-size: 14px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-row-name.dim { color: var(--text2); }
.gal-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-dim); }
.gal-row-meta .mono { font-family: var(--font-mono); }
.gal-dot { color: var(--border2); }
.gal-need { color: var(--yellow); }
.gal-row-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
/* Скрытый товар: строка приглушена, но читаема — ПМ должен узнать её в корзине.
   Курсор обычный: экран товара у скрытого не открывается. */
.gal-row--hidden { cursor: default; opacity: .55; }
.gal-row--hidden:hover { opacity: 1; }
.gal-hidden-chip { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.gal-edits-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.gal-edits-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.gal-act { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.gal-row:hover .gal-act { opacity: 1; }
.gal-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; border-radius: 7px; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.gal-btn svg { width: 14px; height: 14px; }
.gal-btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text2); }
.gal-btn-ghost:hover { color: var(--text); background: var(--bg-hover); border-color: var(--border); }
.gal-btn-secondary { background: var(--card2); border: 1px solid var(--border2); color: var(--text); }
.gal-btn-secondary:hover { border-color: var(--border-hover); }
.gal-empty { color: var(--text-dim); padding: 60px 12px; text-align: center; font-size: 13px; }
/* ── Галерея → товар (Экран 2) ── */
#view-gallery-item { max-width: 1240px; }
.gi-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); text-decoration: none; margin-bottom: 16px; cursor: pointer; transition: color .12s; }
.gi-back:hover { color: var(--text2); }
.gi-back svg { width: 15px; height: 15px; }
.gi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.gi-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.gi-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: var(--text-dim); flex-wrap: wrap; }
.gi-meta .mono { font-family: var(--font-mono); }
.gi-meta .month { color: var(--text2); }
.gi-meta .dot { color: var(--border2); }
.gi-head-actions { display: flex; align-items: center; gap: 8px; }
.gi-edits-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 4px 0; margin-bottom: 18px; }
.gi-edits-note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.gi-edits-note .mono { font-family: var(--font-mono); }
.gi-edits-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gi-edited-at { color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; }
.gi-toggle { display: flex; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; }
.gi-toggle-seg { padding: 6px 12px; font-size: 13px; font-family: var(--font-sans); font-weight: 500; border: none; cursor: pointer; border-radius: 7px; color: var(--text2); background: transparent; transition: color .12s, background .12s; }
.gi-toggle-seg.active { font-weight: 600; color: var(--text); background: var(--card2); }
.gi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.gi-extras-title { font-size: 13px; font-weight: 600; color: var(--text2); margin: 30px 0 12px; }
.gi-tile { position: relative; cursor: zoom-in; border-radius: 10px; border: 1px solid var(--border); background: var(--card2); overflow: hidden; aspect-ratio: 3/4; transition: border-color .13s, transform .13s; }
.gi-tile:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.gi-tile.edited { border-color: var(--accent-border); }
.gi-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi-tile-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 11px; }
.gi-tile-badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent); background: var(--card-scrim); border: 1px solid var(--accent-border-soft); padding: 3px 7px; border-radius: 999px; }
.gi-tile-dl { position: absolute; top: 6px; right: 6px; opacity: 0; display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; color: var(--text); background: var(--card-scrim); border: 1px solid var(--border2); cursor: pointer; transition: opacity .12s; }
.gi-tile-dl svg { width: 14px; height: 14px; }
.gi-tile:hover .gi-tile-dl { opacity: 1; }
/* Скрытие слайда (ПМ) */
.gi-tile-del { position: absolute; top: 6px; left: 6px; opacity: 0; display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; color: var(--text); background: var(--card-scrim); border: 1px solid var(--border2); cursor: pointer; transition: opacity .12s, color .12s, border-color .12s; }
.gi-tile-del svg { width: 14px; height: 14px; }
.gi-tile:hover .gi-tile-del { opacity: 1; }
.gi-tile-del:hover { color: var(--red); border-color: var(--red); }
.gi-lb-del { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; border-radius: 7px; padding: 6px 10px; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text2); transition: color .12s, border-color .12s; }
.gi-lb-del:hover { color: var(--red); border-color: var(--red); }
.gi-lb-del svg { width: 14px; height: 14px; }
.gi-undo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 14px; background: var(--card2); border: 1px solid var(--border2); color: var(--text); border-radius: 10px; padding: 10px 12px 10px 16px; font-size: 13px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.28); }
.gi-undo-toast.show { display: flex; }
.gi-undo-toast button { background: transparent; border: none; color: var(--accent); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.gi-undo-toast button:hover { color: var(--accent-hover); }
/* Лайтбокс просмотра карточки */
.gi-lb { position: fixed; inset: 0; background: var(--lightbox-bg); z-index: 300; display: none; flex-direction: column; animation: giLbIn .16s cubic-bezier(.4,0,.2,1); }
.gi-lb.open { display: flex; }
@keyframes giLbIn { from { opacity: 0; } to { opacity: 1; } }
.gi-lb-top { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-shrink: 0; }
.gi-lb-title { font-size: 14px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-lb-index { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.gi-lb-spacer { flex: 1; }
.gi-lb-toggle { display: flex; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; }
.gi-lb-seg { padding: 5px 11px; font-size: 12.5px; font-family: var(--font-sans); font-weight: 500; border: none; cursor: pointer; border-radius: 7px; color: var(--text2); background: transparent; transition: color .12s, background .12s; }
.gi-lb-seg.active { font-weight: 600; color: var(--text); background: var(--card2); }
.gi-lb-close { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); border: 1px solid var(--border); background: transparent; }
.gi-lb-close svg { width: 15px; height: 15px; }
.gi-lb-center { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 20px 28px; }
.gi-lb-arrow { display: inline-flex; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); border: 1px solid var(--border2); background: var(--card); }
.gi-lb-arrow svg { width: 18px; height: 18px; }
.gi-lb-card { position: relative; display: flex; height: 100%; max-width: min(92vw, 680px); }
.gi-lb-card img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; display: block; border-radius: 14px; border: 1px solid var(--border2); background: var(--card2); }
.gi-lb-card.edited img { border-color: var(--accent-border); }
/* Модалка загрузки слайдов */
.gu-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
.gu-backdrop.open { display: flex; }
.gu-modal { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; width: 100%; max-width: 460px; }
.gu-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.gu-sub { color: var(--text2); font-size: 12px; margin-bottom: 16px; }
.gu-label { display: block; font-size: 12px; color: var(--text2); margin: 12px 0 6px; }
.gu-modal input[type=text], .gu-modal input[type=file] { width: 100%; background: var(--card2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 12px; font-family: inherit; font-size: 13px; }
.gu-modal input[type=text]:focus { outline: none; border-color: var(--accent); }
.gu-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.gu-btn { border-radius: 8px; padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: none; color: var(--text); }
.gu-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.gu-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.gu-msg { font-size: 12px; margin-top: 10px; min-height: 16px; }
.gu-msg-err { color: var(--red); }
.gu-msg-ok { color: var(--green); }
.survey-page h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.survey-page .survey-sub { color: var(--text2); font-size: 13px; margin-bottom: 28px; }
.survey-block { margin-bottom: 24px; }
.survey-block label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 10px; }
.survey-scale { display: flex; gap: 8px; }
.survey-scale-btn { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 0; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, color .15s; }
.survey-scale-btn:hover { border-color: var(--accent); }
.survey-scale-btn.active { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.survey-choices { display: flex; flex-direction: column; gap: 8px; }
.survey-choice-btn { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.survey-choice-btn:hover { border-color: var(--accent); }
.survey-choice-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.survey-block textarea { width: 100%; min-height: 90px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 14px; outline: none; font-family: inherit; resize: vertical; }
.survey-block textarea:focus { border-color: var(--accent); }
.survey-error { color: var(--red); font-size: 12px; margin-top: 12px; display: none; }
.survey-thanks { color: var(--green); font-size: 13px; margin-bottom: 20px; }
.survey-results .survey-stat-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
.survey-results .survey-stat-title { font-size: 13px; color: var(--text2); }
.survey-results .survey-stat-value { font-size: 22px; font-weight: 700; }
.survey-dist { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 8px; }
.survey-dist-bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.survey-dist-bar span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--text2); }
.survey-applic-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.survey-applic-row .survey-applic-label { width: 110px; color: var(--text2); flex-shrink: 0; }
.survey-applic-bar-wrap { flex: 1; background: var(--card); border-radius: 4px; height: 8px; overflow: hidden; }
.survey-applic-bar { height: 100%; background: var(--accent); }
.survey-applic-count { width: 28px; text-align: right; color: var(--text2); flex-shrink: 0; }
.survey-entry { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.survey-entry-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.survey-entry-name { font-weight: 600; }
.survey-entry-role { color: var(--text2); font-size: 12px; }
.survey-entry-ratings { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.survey-entry-text { font-size: 13px; margin-bottom: 6px; }
.survey-entry-text b { color: var(--text2); font-weight: 600; }
/* ── Раздел «Боты» ─────────────────────────────────────────────── */
.bots-wrap { max-width: 860px; margin: 0 auto; padding: 8px 0 40px; }
/* ── Раздел «Pinterest» ────────────────────────────────────────── */
/* ── Раздел «Pinterest» (редизайн: слой .pin-*; кнопки, поля и плашки — общие .rvw-*/.seg-*) ── */
#view-pinterest { max-width: 1120px; }
.pin-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text2); margin: 6px 0 20px; min-height: 22px; }
.pin-status .mono { font-family: var(--font-mono); color: var(--text); }
.pin-dot { color: var(--border2); }
.pin-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pin-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pin-live--on { background: var(--green-soft); color: var(--green); }
.pin-live--off { background: var(--yellow-soft); color: var(--yellow); }
.pin-loading, .pin-empty { padding: 60px 12px; text-align: center; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.pin-empty--bad { color: var(--red); }
/* Пустая вкладка «Одобрено»: заголовок, подсказка и кнопка-путь в очередь.
   Отступ сверху меньше обычного .pin-empty — под сводкой и последними
   публикациями пустота на 60px выглядит поломкой, а не штатным состоянием. */
.pin-empty--stock { padding-top: 32px; }
.pin-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pin-empty-hint { max-width: 460px; margin: 0 auto 14px; }
.pin-empty--stock .rvw-btn { display: inline-flex; }
.pin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pin-toolbar-spacer { flex: 1; }
.pin-toolbar-note { font-size: 13px; color: var(--text2); }
.pin-toolbar-note .mono { font-family: var(--font-mono); color: var(--text); }
.pin-mp { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--card2); color: var(--text2); border: 1px solid var(--border); white-space: nowrap; }
.pin-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); background: var(--card2); border: 1px solid var(--border); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pin-chip b { font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.pin-chip--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border-soft); }
.pin-chip--accent b { color: var(--accent); }
.pin-meta { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pin-meta .mono { font-family: var(--font-mono); color: var(--text2); }
.pin-input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font-sans); font-size: 13.5px; transition: border-color .12s; }
.pin-input:focus { outline: none; border-color: var(--border-hover); }
.pin-input::placeholder { color: var(--text-dim); }
.pin-link { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.pin-link a { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--border2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; transition: color .12s, border-color .12s; }
.pin-link a:hover { color: var(--text); border-bottom-color: var(--text2); }
.pin-link--missing { color: var(--red); }

/* Товары */
.pin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.pin-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
/* Подсказка и поля ссылок в форме заведения товара идут во всю строку:
   .pin-form — grid, а flex-basis у .pin-hint в нём ничего не значит. */
.pin-form .pin-hint { grid-column: 1 / -1; margin-bottom: 0; }
.pin-form .pin-label--wide { grid-column: 1 / -1; }
.pin-items { display: flex; flex-direction: column; gap: 8px; }
.pin-item { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; transition: border-color .12s, opacity .12s; }
.pin-item:hover { border-color: var(--border-hover); }
.pin-item.is-off { opacity: .55; }
.pin-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pin-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pin-item-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.pin-upload { position: relative; }
.pin-upload input { display: none; }
.pinterest-pool-health { font-size: 12px; color: var(--yellow); }

/* Очередь */
.pin-list { display: flex; flex-direction: column; gap: 8px; }
.pin-card { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: border-color .12s; }
.pin-card:hover { border-color: var(--border-hover); }
.pin-card-img { width: 128px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--card2); flex-shrink: 0; display: block; }
.pin-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pin-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-card-title { font-weight: 600; }
.pin-card .rvw-textarea { margin-top: 0; }
.pin-card .rvw-actions { margin-top: auto; padding-top: 4px; }

/* Плашки (имена классов держат тесты — оформление общее с .rvw-note) */
.pinterest-pause-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; border-left: 2px solid var(--yellow); background: var(--yellow-soft); font-size: 13px; line-height: 1.5; color: var(--text2); }
.pinterest-pause-banner strong { color: var(--text); font-weight: 600; }
.pinterest-pause-banner--bad { border-left-color: var(--red); background: var(--red-soft); }
.pinterest-pause-banner--info { border-left-color: var(--blue); background: var(--blue-soft); }
.pin-nr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pin-nr > span { flex: 1 1 240px; min-width: 0; color: var(--text); }
.pin-nr button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; border-radius: 8px; padding: 5px 11px; cursor: pointer; background: var(--card2); border: 1px solid var(--border2); color: var(--text); transition: border-color .12s; }
.pin-nr button:hover:not(:disabled) { border-color: var(--border-hover); }
.pin-nr button + button { background: transparent; border-color: transparent; color: var(--text2); }
.pin-nr button:disabled { opacity: .5; cursor: default; }
.pinterest-pause-banner details { margin-top: 6px; }
.pinterest-pause-banner summary { cursor: pointer; color: var(--text2); font-size: 12.5px; }
.pinterest-withdrawn-note { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }

/* Вкладка «Одобрено»: запас пинов и когда они уйдут */
/* Раскладка как у .pin-status: разделители «·» живут на gap флекса, без
   него они слипаются с текстом и на фоне их не видно вовсе. */
.pin-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text2); margin: 0 0 12px; }
.pin-summary .mono { font-family: var(--font-mono); color: var(--text); }
.pin-posted { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.pin-posted-head { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pin-posted-item { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text2); padding: 4px 0; }
.pin-posted-item img { width: 28px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); flex-shrink: 0; }
.pin-posted-item .mono { font-family: var(--font-mono); color: var(--text); }
.pin-day { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pin-day-head { font-size: 13px; font-weight: 600; color: var(--text); padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.pin-when { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); background: var(--card2); border-radius: 6px; padding: 2px 8px; flex-shrink: 0; }

/* Предпросмотр пина: макет карточки, как её видят в Pinterest */
.pin-preview-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.pin-preview-shell { position: relative; width: 100%; max-width: 900px; }
.pin-preview-close { position: absolute; top: -6px; right: -6px; z-index: 1; width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.pin-preview { display: flex; background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.pin-preview-media { flex: 0 0 46%; background: var(--card2); display: flex; align-items: center; justify-content: center; }
.pin-preview-media img { width: 100%; max-height: 74vh; object-fit: cover; display: block; }
.pin-preview-side { flex: 1; min-width: 0; padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.pin-preview-bar { display: flex; align-items: center; justify-content: space-between; }
.pin-preview-dots { color: var(--text2); font-size: 18px; letter-spacing: 1px; }
.pin-preview-save { background: #e60023; color: #fff; font-size: 14px; font-weight: 600; border-radius: 20px; padding: 9px 18px; }
.pin-preview-domain { font-size: 12.5px; color: var(--text2); text-decoration: underline; word-break: break-all; }
.pin-preview-title { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--text); word-wrap: break-word; }
.pin-preview-desc { font-size: 14px; line-height: 1.6; color: var(--text2); white-space: pre-wrap; word-wrap: break-word; }
.pin-preview-note { margin-top: auto; font-size: 11.5px; color: var(--text-dim); }

/* Аналитика */
.pin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pin-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.pin-stat-label { font-size: 12px; color: var(--text2); }
.pin-stat-value { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--text); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-stat-value.is-text { font-family: var(--font-sans); font-size: 15px; font-weight: 600; padding-top: 6px; }
.pin-panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.pin-panel-head { font-size: 13px; font-weight: 600; color: var(--text); padding: 12px 16px 0; }
.pin-chart { height: 220px; position: relative; padding: 10px 16px 14px; }
.pin-rank { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.pin-panel-head + .pin-rank { margin-top: 10px; }
.pin-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-rank-bar { width: 120px; height: 4px; border-radius: 2px; background: var(--card2); overflow: hidden; flex-shrink: 0; }
.pin-rank-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.pin-rank-num { font-family: var(--font-mono); color: var(--text); min-width: 32px; text-align: right; }

/* Настройки */
.pin-settings { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.pin-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.pin-section-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.pin-section-hint { font-size: 12.5px; color: var(--text2); line-height: 1.55; margin: 0 0 14px; }
.pin-section-hint .mono { font-family: var(--font-mono); color: var(--text); }
.pin-section .seg-switch { margin-bottom: 0; }
.pin-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pin-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text2); }
.pin-label .pin-input { width: 110px; }
.pin-label--wide { flex: 1 1 260px; }
.pin-label--wide .pin-input { width: 100%; }
.pin-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.pin-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.pin-feeds { display: flex; flex-direction: column; gap: 6px; }
.pin-feed { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.pin-feed-name { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; min-width: 130px; }
.pin-feed-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-savebar { display: flex; gap: 8px; align-items: center; padding-top: 4px; }

@media (max-width: 640px) {
  .pin-preview-overlay { padding: 12px; }
  .pin-preview { flex-direction: column; border-radius: 16px; }
  .pin-preview-media { flex: none; }
  .pin-preview-media img { max-height: 46vh; }
  .pin-preview-side { padding: 16px 18px 20px; }
  .pin-preview-title { font-size: 20px; }
  .pin-card { flex-direction: column; }
  .pin-card-img { width: 100%; max-height: 360px; }
  .pin-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .pin-item-actions { justify-content: flex-start; }
  .pin-rank-bar { width: 60px; }
  .pin-feed { flex-wrap: wrap; }
  .pin-feed-name { min-width: 0; }
  .pin-feed-url { flex-basis: 100%; order: 3; }
}
.bots-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 4px; }
.bots-head h1 { font-size: 22px; font-weight: 650; margin: 0; }
.bots-updated { font-size: 12px; color: var(--text-dim); }
.bots-search { width: 100%; margin: 14px 0 20px; padding: 10px 12px; font: inherit; font-size: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.bots-search:focus { outline: none; border-color: var(--accent); }
.bots-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 18px 6px; margin-bottom: 16px; }
.bots-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bots-card-top h2 { font-size: 17px; font-weight: 620; margin: 0; }
.bots-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--bg-hover); color: var(--text2); white-space: nowrap; }
.bots-badge.pm { background: #f0ad4e; color: #fff; }
.bots-handle { font-size: 13px; color: var(--accent); text-decoration: none; }
.bots-handle:hover { text-decoration: underline; }
.bots-section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 16px 0 6px; }
.bots-field { font-size: 13.5px; line-height: 1.5; color: var(--text2); margin: 4px 0; }
.bots-field b { color: var(--text); font-weight: 600; }
.bots-notes { margin: 4px 0 4px; padding-left: 18px; }
.bots-notes li { font-size: 13px; line-height: 1.5; color: var(--text2); margin: 2px 0; }
.bots-cmd { border-top: 1px solid var(--border); }
.bots-section-label + .bots-cmd { border-top: none; }
.bots-cmd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 2px; cursor: pointer; }
.bots-cmd-head:hover { color: var(--text); }
.bots-cmd-name { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; color: var(--text); }
.bots-cmd-short { font-size: 13px; color: var(--text-dim); }
.bots-cmd-body { display: none; padding: 0 2px 12px; }
.bots-cmd.open .bots-cmd-body { display: block; }
.bots-cmd-body p { font-size: 13.5px; line-height: 1.55; color: var(--text2); margin: 0 0 8px; }
.bots-pre-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 8px 0 3px; }
.bots-pre { margin: 0; padding: 8px 10px; background: var(--bg-hover); border-radius: 6px;
  font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; color: var(--text2);
  white-space: pre-wrap; word-break: break-word; }
.bots-empty { text-align: center; color: var(--text-dim); font-size: 14px; padding: 40px 0; }
.bots-toggle { color: var(--text-dim); font-size: 12px; margin-left: auto; }

/* Пояснение в форме правки строки Pinterest (какая площадка основная). */
.pin-hint { flex-basis: 100%; margin-bottom: 6px; font-size: 12px; color: var(--muted); }

/* ─── Метрики Экспресс ─────────────────────────────────────────────────── */
#view-express-metrics { max-width: 1120px; }
.em-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.em-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.em-sub { margin-top: 4px; font-size: 13px; color: var(--text2); min-height: 20px; }
.em-sub .mono { font-family: var(--font-mono); color: var(--text); }
.em-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Нативное поле даты в тёмной теме без color-scheme рисуется белой «таблеткой»
   с чёрным текстом — из-за этого шапка раздела выглядела чужой. */
.em-dates { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--card2); border: 1px solid var(--border); border-radius: 9px; }
.em-dates-dash { color: var(--text-dim); font-size: 12px; }
.em-date { color-scheme: dark; font-family: var(--font-mono); font-size: 12.5px; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--text); padding: 5px 8px; outline: none; cursor: pointer; }
.em-date:hover { border-color: var(--border-hover); }
.em-date:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.em-date::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }
.em-seg { margin-bottom: 0; }

/* Карточки сводки. Первая — выручка — акцентная: это цифра, ради которой
   раздел открывают, остальные её объясняют. */
.em-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.em-card { position: relative; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); overflow: hidden; }
.em-card--accent { border-color: var(--accent-border-soft); background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--card); }
.em-card-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); }
.em-card-value { margin-top: 8px; font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.em-card--accent .em-card-value { color: var(--accent); }
.em-card-sub { margin-top: 6px; font-size: 12px; color: var(--text-dim); min-height: 16px; }

/* Полоса «собрано в срок»: процент без шкалы читается как абстракция. */
.em-meter { margin-top: 10px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.em-meter-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width var(--dur-bar) var(--ease-out); }
.em-meter-fill--warn { background: var(--yellow); }
.em-meter-fill--bad { background: var(--red); }

.em-note { margin-bottom: 28px; }
.em-note:empty { margin-bottom: 0; }
.em-note .em-muted { display: block; padding-top: 10px; }

.em-block { margin-bottom: 28px; }
.em-block-head { margin-bottom: 10px; }
.em-block-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.em-block-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }

/* Таблицы: числа — моноширинные и по правому краю, иначе разряды не
   сравниваются глазом между строками. */
.em-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); overflow: hidden; }
.em-table { width: 100%; border-collapse: collapse; }
.em-table th { padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); text-align: left; background: var(--card2); border-bottom: 1px solid var(--border); }
.em-table td { padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.em-table tbody tr:last-child td { border-bottom: none; }
.em-table tbody tr:hover td { background: var(--card2); }
.em-table th.em-num, .em-table td.em-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-table th.em-num { font-family: var(--font-sans); }
.em-table td:first-child { font-weight: 500; }

/* Доля товара в выручке периода — полоса вместо ещё одной колонки цифр. */
.em-share { display: inline-block; vertical-align: middle; width: 72px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.em-share-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* «В срок» в таблице: плашка, цвет которой сразу делит склады на хорошие и нет. */
.em-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.em-pill--good { background: var(--green-soft); color: var(--green); }
.em-pill--warn { background: var(--yellow-soft); color: var(--yellow); }
.em-pill--bad { background: var(--red-soft); color: var(--red); }
.em-pill--none { background: var(--card2); color: var(--text-dim); }

.em-muted { color: var(--text-dim); font-size: 12.5px; }
.em-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--text-dim); border: 1px dashed var(--border2); border-radius: var(--radius-2xl); }
.em-error { padding: 16px; font-size: 13px; color: var(--red); background: var(--red-soft); border: 1px solid var(--red-soft); border-radius: var(--radius-2xl); }

@media (max-width: 720px) {
  .em-controls { width: 100%; }
  .em-table th, .em-table td { padding: 10px 12px; }
}

/* ─── Раздел «Доски» ──────────────────────────────────────────────────────── */
.boards-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* .btn-primary в этом проекте во всю ширину — она рассчитана на формы.
   В строке заголовка её надо ужать, иначе кнопка растягивается на весь экран. */
.boards-head .btn-primary { width: auto; padding: 10px 16px; }
.boards-group { margin-bottom: 24px; }
.boards-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin-bottom: 8px; }
.boards-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* Карточка доски — это <button>, а он не наследует ни цвет текста, ни шрифт:
   без явных color/font подписи выходили чёрным Arial'ом на тёмном фоне. */
.boards-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  color: var(--text); font: inherit; cursor: pointer; }
.boards-card:hover { border-color: var(--accent); }
.boards-card-title { font-weight: 600; }
.boards-card-meta { font-size: 12px; color: var(--text2); }
/* Действия карточки: доступ и удаление. Карточка — <button>, вложить кнопки
   внутрь нельзя, поэтому обёртка и абсолютное позиционирование. Показываем
   только при наведении и фокусе с клавиатуры, чтобы список не рябил. */
/* Ячейкой сетки стала обёртка, поэтому карточку тянем на всю её ширину —
   иначе действия уезжают вправо, за край карточки. */
.boards-card-wrap { position: relative; display: flex; }
.boards-card { width: 100%; box-sizing: border-box; }
.boards-card-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px;
  opacity: 0; transition: opacity .12s; }
.boards-card-wrap:hover .boards-card-actions,
.boards-card-wrap:focus-within .boards-card-actions { opacity: 1; }
.boards-card-action { font-size: 11px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text2); cursor: pointer; }
.boards-card-action:hover { color: var(--text); border-color: var(--accent); }
.boards-card-danger:hover { color: #b91c1c; border-color: #b91c1c; }
.boards-muted { color: var(--text2); }
.boards-error { color: #b91c1c; }

.board-share-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex;
  align-items: center; justify-content: center; z-index: 60; }
.board-share-box { background: var(--card); border-radius: 14px; padding: 20px;
  /* 620, а не 560: в ряду ссылки помещаются выпадающий список и две кнопки —
     на 560 «Выключить» срывалась на третью строку. */
  width: min(620px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; }
.board-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
/* Две колонки: подписи слева ровным столбцом, управление справа. На флексе
   подписи разной длины («Видимость» и «Ссылка-приглашение») разъезжались, а
   «Добавить» сваливалась на свою строку под подпись. */
.board-share-row { display: grid; grid-template-columns: 150px minmax(0, 1fr);
  align-items: start; gap: 8px 14px; margin-bottom: 16px; }
/* Подпись равняется по ПЕРВОЙ строке управления, а не по середине блока:
   когда управление переносится на две строки (ссылка + её кнопки), подпись
   съезжала вниз и читалась как заголовок к чужому ряду. */
.board-share-row > label { font-size: 13px; color: var(--text2); padding-top: 8px; }
.board-share-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Ссылку — всегда на отдельную строку во всю ширину: рядом с двумя кнопками и
   выпадающим списком она ужималась до нечитаемого обрубка. */
.board-share-link { flex: 1 1 100%; min-width: 0; padding: 7px 10px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text2); font-family: inherit; outline: none; }
/* Пояснение принадлежит своему ряду, поэтому живёт во второй колонке: иначе
   читается как подпись к следующему ряду. */
.board-share-note { grid-column: 2; font-size: 12px; line-height: 1.45;
  color: var(--text2); margin: -2px 0 0; }
.board-share-member { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--border); font-size: 13px; }
.board-share-member-name { flex: 1 1 auto; }
.board-share-empty { font-size: 13px; padding: 8px 0; }
/* Селекты в стиле приложения: системный вид с двойной стрелкой выбивался из
   остального интерфейса (см. .sk-select — тот же приём). */
.board-select { appearance: none; padding: 7px 28px 7px 10px; font-size: 13px;
  background-color: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-family: inherit; outline: none; cursor: pointer;
  transition: border-color .12s;
  background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%),
                    linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.board-select:hover:not(:disabled) { border-color: var(--accent); }
.board-select:disabled { opacity: .5; cursor: default; }

@media (max-width: 560px) {
  .board-share-row { grid-template-columns: 1fr; gap: 6px; }
  .board-share-note { grid-column: 1; }
}

.board-canvas-wrap { display: flex; flex-direction: column; height: calc(100vh - 120px); }
.board-topbar { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.board-title { font-weight: 600; }
.board-access-note, .board-save-state { font-size: 12px; color: var(--text2); }
.board-tools { display: flex; align-items: center; gap: 8px; padding: 8px 0;
  flex-wrap: wrap; max-width: 100%; }
.board-viewport { position: relative; flex: 1; overflow: hidden; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px; touch-action: none; }
/* Слой объектов лежит ПОВЕРХ слоя линий (в разметке он идёт следом), и своей
   коробкой он закрывает весь холст. Пока он ловил мышь сам, ни один клик не
   доходил до стрелки или росчерка: выделить линию было нельзя вообще, отсюда
   и ощущение, что стрелки не работают. Ловят мышь только сами объекты и
   ручки; у ручек pointer-events уже свой (они лежат внутри раздела, который
   мышь не ловит). */
.board-layer { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.board-layer > .board-obj { pointer-events: auto; }
.board-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--accent); }
.board-viewport.board-arrow-mode { cursor: crosshair; }
/* Слой в целом не перехватывает события (иначе не потаскать холст под
   стрелками), но сама линия возвращает себе pointer-events — CSS позволяет
   переопределить унаследованное значение на потомке — так стрелку можно
   выделить и удалить (F2). */
.board-arrow-line { pointer-events: stroke; cursor: pointer; }
.board-arrow-selected { stroke: var(--red, #dc2626); }

.board-obj { position: absolute; box-sizing: border-box; }
/* Стикер всегда пастельный, независимо от темы сайта, поэтому текст на нём
   тёмный явно: цвет темы (--text почти белый) на жёлтом не читается. */
.board-note { border-radius: 8px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fef08a; color: #1c1c1e; }
.board-note[data-color="blue"]  { background: #bfdbfe; }
.board-note[data-color="green"] { background: #bbf7d0; }
.board-note[data-color="pink"]  { background: #fbcfe8; }
.board-text { padding: 6px; }
/* Пустой текст не имеет ни фона, ни рамки: после «＋ Текст» на холсте не
   появлялось ВИДИМО ничего, а невидимый прямоугольник ещё и перехватывал
   клики по объектам под собой. Пока текст пуст — показываем пунктирную рамку
   и подсказку; с первым же символом :empty перестаёт совпадать и всё гаснет
   само. На печать это не влияет: экспорт PNG рисует объекты сам, мимо CSS. */
.board-text .board-obj-body:empty { display: inline-block; min-width: 60px; }
.board-text:has(.board-obj-body:empty) {
  outline: 1px dashed var(--border); outline-offset: 2px; border-radius: 4px; }
/* Подсказка не гаснет по :focus — в contenteditable правило не срабатывает.
   Так и оставляем: пустое поле с подсказкой под курсором — привычное
   поведение плейсхолдера, а с первым символом она уходит сама. */
.board-text .board-obj-body:empty::before {
  content: 'Текст'; opacity: .45; pointer-events: none; }
.board-obj-body { width: 100%; height: 100%; outline: none; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.board-image img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Заливка фигуры — отдельный слой под текстом: подпись обязана лежать поверх
   неё и не участвовать в обрезке углов.
   Все восемь фигур выглядят одинаково: мягкая заливка цветом плюс контур того
   же цвета. Раньше прямоугольник с овалом были контурными (border), а ромб с
   треугольником — сплошными (clip-path, который контур не умеет вовсе), и
   набор выглядел собранным из двух разных.
   Ромб, треугольник, параллелограмм, цилиндр и звезду рисует SVG:
   preserveAspectRatio="none" тянет путь за размером объекта, а
   vector-effect="non-scaling-stroke" не даёт контуру разъехаться по толщине
   вслед за растяжением. */
.board-shape { background: transparent; }
.board-shape-fill { position: absolute; inset: 0; }
.board-shape[data-shape="rect"] .board-shape-fill,
.board-shape[data-shape="round"] .board-shape-fill,
.board-shape[data-shape="ellipse"] .board-shape-fill {
  border: 2px solid var(--board-ink, var(--accent));
  background: color-mix(in srgb, var(--board-ink, var(--accent)) 20%, transparent); }
.board-shape[data-shape="round"] .board-shape-fill { border-radius: 16px; }
.board-shape[data-shape="ellipse"] .board-shape-fill { border-radius: 50%; }
.board-shape-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.board-shape-svg path {
  fill: color-mix(in srgb, var(--board-ink, var(--accent)) 20%, transparent);
  stroke: var(--board-ink, var(--accent)); stroke-width: 2; }
/* Шов цилиндра — линия, а не вторая заливка. */
.board-shape-svg path.board-shape-seam { fill: none; }
/* Заливка/контур/без фона — один переключатель на все фигуры. */
.board-shape[data-fill="outline"] .board-shape-fill { background: transparent; }
.board-shape[data-fill="outline"] .board-shape-svg path { fill: none; }
.board-shape[data-fill="none"] .board-shape-fill { background: transparent; border-color: transparent; }
.board-shape[data-fill="none"] .board-shape-svg path { fill: none; stroke: none; }
/* Подпись по центру фигуры и поверх заливки. Выравнивание по горизонтали
   задаётся инлайновым justify-content (см. boardTextStyle): одного
   text-align во флексе мало. */
.board-shape-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; color: var(--text); }
.board-link { display: flex; align-items: center; padding: 8px 10px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border); }
/* Без явного цвета ссылка рисуется браузерным синим — на тёмной карточке его
   почти не видно. */
.board-link a { color: var(--text); text-decoration: none; font-size: 13px; }
.board-link a:hover { color: var(--accent); }
.board-upload { cursor: pointer; }
.board-obj.board-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.board-save-error { color: #b91c1c; }
.board-share-danger-row { display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Мобильная панель инструментов: фигуры, стрелки и ссылки — только с
   компьютера (см. docs/team/doski.md), на телефоне остаются стикер, текст
   и картинка. Существующие объекты по-прежнему можно таскать и править. */
@media (max-width: 768px) {
  .board-tool-desktop { display: none; }
}

/* ─── Доски: расширенный холст ────────────────────────────────────────────── */

/* Палитра объектов. Один набор на стикеры, фигуры, стрелки и рисунки, чтобы
   цвет означал одно и то же везде. --board-ink — цвет «чернил» для фигур. */
.board-note[data-color="yellow"], .board-obj[data-color="yellow"] { --board-ink: #eab308; }
.board-note[data-color="blue"],   .board-obj[data-color="blue"]   { --board-ink: #3b82f6; }
.board-note[data-color="green"],  .board-obj[data-color="green"]  { --board-ink: #22c55e; }
.board-note[data-color="pink"],   .board-obj[data-color="pink"]   { --board-ink: #ec4899; }
.board-note[data-color="orange"], .board-obj[data-color="orange"] { --board-ink: #f97316; }
.board-note[data-color="grey"],   .board-obj[data-color="grey"]   { --board-ink: #9ca3af; }
.board-note[data-color="orange"] { background: #fed7aa; }
.board-note[data-color="grey"]   { background: #e5e7eb; }

/* Шрифты объектов доски. Подставляются инлайном через var(--board-font-…),
   см. boardTextStyle: держать семейства в одном месте проще, чем разносить
   их по атрибутам. Выгрузка PNG повторяет этот же список в
   BOARD_EXPORT_FONT — холст рисует мимо CSS. */
:root {
  --board-font-serif: Georgia, 'Times New Roman', serif;
  --board-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --board-font-hand: 'Marker Felt', 'Comic Sans MS', 'Segoe Print', cursive;
}

/* Объект, к которому привяжется конец стрелки. Без подсветки понять, зацепится
   стрелка за стикер или повиснет в пустоте, можно было только по факту. */
.board-obj.board-drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }

/* Панель инструментов делится на группы, чтобы отмена, создание и масштаб
   не сливались в одну ленту кнопок. */
/* Группа не должна распирать панель: без переноса внутри самой группы
   последняя кнопка («＋ Картинка») уезжала за край экрана. */
.board-tool-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--border); }
.board-tools .btn-secondary { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.board-tool-group:last-child { border-right: none; padding-right: 0; }
.board-tool-active { border-color: var(--accent); color: var(--accent); }
.board-zoom #board-zoom-label { min-width: 58px; }
#board-undo:disabled, #board-redo:disabled { opacity: .35; cursor: default; }

/* Рамка выделения тягой по пустому месту. */
.board-marquee { position: absolute; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; z-index: 9999; }

/* Ручки изменения размера — по углам выделенного объекта. */
/* pointer-events: auto обязателен: у раздела ручки лежат внутри узла с
   pointer-events: none, и без этого их нечем было бы схватить. */
.board-handle { position: absolute; width: 10px; height: 10px; background: var(--card);
  border: 2px solid var(--accent); border-radius: 2px; z-index: 10000; pointer-events: auto; }
/* Общая рамка выделения. Сама прозрачна для мыши — иначе перекрыла бы объекты
   внутри себя; ловят мышь только ручки (у них pointer-events: auto). */
.board-group-frame { position: absolute; pointer-events: none; z-index: 9999;
  outline: 1px dashed var(--accent); outline-offset: 2px; }

/* Ручки на концах стрелки. Лежат прямо в слое объектов по координатам доски,
   поэтому центрируются трансформом, а не отрицательными отступами. */
.board-handle-end { border-radius: 50%; cursor: grab; transform: translate(-50%, -50%); }

.board-handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.board-handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.board-handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.board-handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* SVG-слой прозрачен для событий целиком (иначе перехватывал бы
   панорамирование), поэтому кликабельность включается на самих линиях. */
.board-arrow-line, .board-draw-path { pointer-events: stroke; cursor: pointer; }
.board-svg-selected { filter: drop-shadow(0 0 3px var(--accent)); }

/* Курсоры режимов холста. */
.board-viewport.board-pan-ready { cursor: grab; }
.board-viewport.board-draw-mode { cursor: crosshair; }

/* Плавающая панель действий над выделением. */
.board-context-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); padding: 8px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 20; }
.board-context-count { font-size: 12px; color: var(--text2); }
.board-context-select { background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.board-context-danger { color: #f87171; border-color: #7f1d1d; }
.board-swatches { display: inline-flex; gap: 5px; }
.board-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.board-swatch[data-color="yellow"] { background: #eab308; }
.board-swatch[data-color="blue"]   { background: #3b82f6; }
.board-swatch[data-color="green"]  { background: #22c55e; }
.board-swatch[data-color="pink"]   { background: #ec4899; }
.board-swatch[data-color="orange"] { background: #f97316; }
.board-swatch[data-color="grey"]   { background: #9ca3af; }
/* Текущий цвет должно быть видно: панель теперь висит и без выделения, и без
   отметки непонятно, каким цветом пойдёт следующая линия. */
.board-swatch-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }

/* Переключатели панели стиля сгруппированы по смыслу: текст, фигура, линия,
   действия. Группы разделены тонкой чертой, иначе панель читается как одна
   длинная лента кнопок. */
.board-style-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-left: 10px; border-left: 1px solid var(--border); }
.board-style-btn { min-width: 28px; padding: 5px 7px; font: inherit; font-size: 13px; line-height: 1;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; }
.board-style-btn:hover { border-color: var(--accent); }
.board-style-on { border-color: var(--accent); color: var(--accent); }

/* Заголовок доски переименовывается кликом — это надо показать. */
.board-title-editable { cursor: text; }
.board-title-editable:hover { text-decoration: underline dotted; }

/* На телефоне плавающая панель не должна закрывать пол-холста, а ручки
   в 10 пикселей пальцем не поймать — увеличиваем зону попадания. */
@media (max-width: 768px) {
  /* Панель стиля не должна ни налезать на нижнее меню, ни съедать пол-холста:
     на телефоне она поднята над меню и при необходимости прокручивается. */
  .board-context-bar { bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    gap: 6px; padding: 6px 8px; max-height: 34vh; overflow-y: auto; }
  /* Правило с одним классом не перебивает display: inline-flex у самой
     группы — тот же вес, а объявлена группа ниже по файлу. */
  .board-style-group.board-tool-desktop { display: none; }
  .board-tool-group { padding-right: 6px; margin-right: 2px; }
  .board-handle { width: 18px; height: 18px; }
  .board-handle-nw { left: -10px; top: -10px; }
  .board-handle-ne { right: -10px; top: -10px; }
  .board-handle-sw { left: -10px; bottom: -10px; }
  .board-handle-se { right: -10px; bottom: -10px; }
  .board-handle-rotate { top: -36px; margin-left: -10px; }
  .board-handle-rotate::before { height: 20px; }
}

/* ─── Доски: живая совместная работа ──────────────────────────────────────── */

/* Слой курсоров поверх всего, но прозрачный для мыши. Он НЕ масштабируется
   общим transform: иначе подписи с именами уезжали бы в нечитаемый размер. */
.board-cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 15; }
.board-cursor { position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; gap: 4px;
  will-change: transform; transition: transform .08s linear; }
.board-cursor-dot { width: 10px; height: 10px; border-radius: 50% 50% 50% 2px;
  background: var(--cursor-color, #888); transform: rotate(-45deg); flex-shrink: 0; margin-top: 2px; }
.board-cursor-name { background: var(--cursor-color, #888); color: #111; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 8px; white-space: nowrap; }

.board-presence { font-size: 12px; color: var(--text2); }

/* Ручка поворота — над верхним краем выделенного объекта, на поводке. */
.board-handle-rotate { left: 50%; top: -28px; margin-left: -6px; border-radius: 50%; cursor: grab; }
.board-handle-rotate::before { content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 16px; margin-left: -1px; background: var(--accent); }

/* Направляющие прилипания — живут только во время жеста. */
.board-guides { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 14; }
.board-guide { position: absolute; background: #ec4899; }
.board-guide-v { width: 1px; }
.board-guide-h { height: 1px; }

/* ─── Доски: рамки-разделы ────────────────────────────────────────────────── */

/* Тело рамки прозрачно для мыши, иначе она перехватывала бы клики по всему,
   что лежит внутри. Схватить рамку можно за подпись. */
/* Хост раздела — пустая рамка без собственного вида: ни фона, ни границы, ни
   z-index (его отсутствие принципиально, см. applyBoardNodeGeometry). Всё
   видимое живёт в двух детях, которые расходятся по высоте: коробка вниз,
   подпись вверх. */
/* Селектор с тем же весом, что и .board-layer > .board-obj: иначе общее
   правило «объекты ловят мышь» вернуло бы разделу перехват кликов. */
.board-layer > .board-obj.board-frame, .board-frame { pointer-events: none; }
.board-frame-box { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 2px dashed var(--board-ink, var(--text2)); border-radius: 10px;
  background: color-mix(in srgb, var(--board-ink, #9ca3af) 6%, transparent); }
/* Подпись выше любого содержимого: иначе объект, накрывший её, отнимал бы
   единственный способ переименовать и подвинуть раздел. */
.board-frame-title { position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px;
  z-index: 100000;
  pointer-events: auto; cursor: grab; display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--board-ink, #9ca3af) 22%, var(--card));
  border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); }
.board-frame-name { outline: none; white-space: nowrap; }
/* Подпись раздела — редактируемое поле, но выглядит как ярлык. Без намёка
   при наведении её не находят: спрашивают, где вообще задаётся название. */
.board-frame[data-editable="true"] .board-frame-title:hover .board-frame-name {
  text-decoration: underline dotted; }
.board-frame-name[contenteditable="true"] { text-decoration: none;
  background: var(--bg); border-radius: 4px; padding: 0 3px; }
.board-frame.board-selected .board-frame-box { border-style: solid; }

/* ─── Доски: комментарии ──────────────────────────────────────────────────── */

.board-comment-mark { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--accent);
  color: #0b0b0c; font: 600 11px/18px Onest, sans-serif; cursor: pointer; z-index: 5; }
.board-comments-panel { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 320px;
  max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 10px; z-index: 25;
  padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.board-comments-head { display: flex; align-items: center; gap: 8px; }
.board-comments-head .boards-muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.board-comments-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.board-comment-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.board-comment-drop { padding: 1px 6px; font-size: 11px; }
.board-comment-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.board-comments-add { display: flex; flex-direction: column; gap: 6px; }
.board-comments-add textarea { width: 100%; resize: vertical; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; font: inherit; font-size: 13px; }
@media (max-width: 768px) { .board-comments-panel { left: 16px; width: auto; } }