:root {
  --A: #FF3B30;
  --B: #FF9500;
  --C: #007AFF;
  --D: #5856D6;
  --E: #8E8E93;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --text: #1C1C1E;
  --sub: #6D6D72;
  --border: #E5E5EA;
  --green: #34C759;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─── LOGIN OVERLAY ─── */
.login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #1C1C1E 0%, #2C2C2E 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.login-overlay.hidden { display: none; }
.login-box {
  background: white; border-radius: 20px;
  padding: 40px 36px 32px; width: 100%; max-width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.login-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.login-sub { font-size: 13px; color: var(--sub); margin-bottom: 28px; }
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 6px; }
.login-field input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 15px; font-family: inherit;
  outline: none; transition: border 0.15s;
}
.login-field input:focus { border-color: var(--C); }
.login-error {
  color: var(--A); font-size: 12px; font-weight: 600;
  margin-bottom: 10px; min-height: 16px;
}
.login-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none;
  background: var(--C); color: white; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.login-btn:hover { background: #0062CC; }
.login-btn:disabled { background: var(--border); color: var(--sub); cursor: default; }

/* ─── HEADER ─── */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;
}
.header {
  background: var(--card);
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--border);
}
.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.app-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.day-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.date-label { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.date-weekday {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #5C7433; background: #F3F7E8; border: 1px solid #DCE7C4;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap;
}
.date-weekday.weekend { color: #B35309; background: #FFF4E5; border-color: #FFE0B2; }
.date-main { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; white-space: nowrap; }
.date-year { font-size: 13px; font-weight: 600; color: var(--sub); }
@media(max-width:600px){
  .date-main { font-size: 14px; }
  .date-weekday { font-size: 9px; padding: 2px 7px; }
}
.daily-quote {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 10px 16px;
  background: #F3F7E8; border: 1px solid #DCE7C4; border-left: 4px solid #6F8B3E;
  border-radius: 12px; line-height: 1.35;
}
.daily-quote-label {
  font-size: 10px; font-weight: 800; color: #5C7433;
  text-transform: uppercase; letter-spacing: 0.7px; white-space: nowrap;
}
.daily-quote-text { font-size: 14.5px; font-weight: 700; color: #3F5122; font-style: italic; }
@media(max-width:600px){
  .daily-quote { gap: 4px; padding: 9px 13px; }
  .daily-quote-text { font-size: 13px; }
}
/* Без flex-wrap этот ряд (экспорт/графики/колокольчик/переключатель вида)
   на телефоне физически шире экрана и не переносится — тянет за собой
   всю страницу: body становится шире устройства, а значит и «layout
   viewport» браузера (window.innerWidth) раздувается вместе с ним, и
   ЛЮБОЙ position:fixed элемент (модалки, оверлеи) после этого считает
   себя относительно этой раздутой ширины, а не реального экрана —
   настоящий первоисточник того, что часть кнопок в модалках оказывалась
   недостижима. .day-bar рядом уже решает это так же. */
.header-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media(max-width:600px){
  /* На телефоне перенос давал 3-4 строки кнопок до списка задач — визуально
     тяжело. Тот же приём, что уже стоит у .ex-period-bar: один ряд, который
     скроллится горизонтально, а не переносится построчно. */
  .header-right { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .header-right::-webkit-scrollbar { display: none; }
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--sub);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--border); color: var(--text); }

.user-chip {
  padding: 5px 12px; border-radius: 20px;
  background: #EAF2FF; color: #0050A3;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.logout-btn {
  padding: 5px 10px; border-radius: 20px; border: none;
  background: var(--bg); color: var(--sub);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.14s;
}
.logout-btn:hover { background: var(--border); color: var(--text); }

.hdr-btn {
  padding: 7px 14px; border-radius: 18px; border: none;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.14s; white-space: nowrap;
}
/* Раньше держалась только разницей фонов с подложкой (var(--bg) против белой
   карточки) — на белом фоне эта разница ~3% яркости и кнопка пропадала
   (найдено Александром на «Поставить задачу»/«Отчёт» в Обзоре команды,
   13.10.2026; тот же класс ещё в 6 местах с той же проблемой). */
/* inset box-shadow, не border: .hdr-btn соседей border:none, и настоящая
   рамка делала бы эту кнопку на 2px выше их в одном ряду (найдено ревью). */
.hdr-btn-ghost { background: var(--border); color: var(--text); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.hdr-btn-ghost:hover { background: #D1D1D6; color: var(--text); }
.hdr-btn-blue { background: #EAF2FF; color: #0050A3; }
.hdr-btn-blue:hover { background: #C7DCFF; }
.hdr-btn-blue.active { background: var(--C); color: white; }
.hdr-btn-graph { background: #F0F9F0; color: #1E7D42; }
.hdr-btn-graph:hover { background: #C8EFD4; }
.hdr-btn-graph.active { background: var(--green); color: white; }

.stats-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
  color: var(--sub);
  white-space: nowrap;
}
.chip.green { background: #E8FBF0; color: #1E7D42; }
.chip.orange { background: #FFF4E5; color: #9B5E00; }
.chip.blue { background: #EAF2FF; color: #0050A3; }

.progress-bar {
  height: 5px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--C));
  border-radius: 3px;
  transition: width 0.4s;
}

/* ─── FILTER BAR ─── */
.filter-bar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px 28px;
  display: flex; gap: 6px; align-items: center; overflow-x: auto;
}
.tab {
  padding: 5px 14px; border-radius: 20px; border: none;
  background: transparent; color: var(--sub);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.14s; white-space: nowrap;
}
.tab:hover { background: var(--bg); color: var(--text); }
.tab.act { background: var(--text); color: white; }
.view-toggle { margin-left: auto; display: flex; gap: 4px; }
.vt-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: var(--bg); color: var(--sub); font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.14s;
}
.vt-btn.active { background: var(--text); color: white; }
.vt-btn:hover:not(.active) { background: var(--border); }

/* ─── MAIN ─── */
.main { padding: 20px 28px 120px; max-width: 900px; margin: 0 auto; }

/* ─── INFO PANEL ─── */
.info-panel {
  display: none; background: white; border-radius: 16px;
  margin-bottom: 20px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.info-panel.vis { display: block; }
.info-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #EAF2FF 0%, #F0F9F0 100%);
}
.info-panel-title { font-size: 16px; font-weight: 800; }
.info-panel-sub { font-size: 12px; color: var(--sub); margin-top: 3px; }
.info-close-btn {
  padding: 5px 12px; border-radius: 12px; border: none;
  background: rgba(0,0,0,0.07); color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.info-close-btn:hover { background: rgba(0,0,0,0.13); }

/* Accordion */
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; cursor: pointer; user-select: none;
  transition: background 0.13s;
}
.acc-hdr:hover { background: var(--bg); }
.acc-icon { font-size: 16px; }
.acc-title { font-size: 13px; font-weight: 700; flex: 1; }
.acc-arrow { font-size: 10px; color: var(--sub); transition: transform 0.2s; }
.acc-item.open .acc-arrow { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 24px 18px; }
.acc-item.open .acc-body { display: block; }

/* Table */
.abcde-table { border-collapse: collapse; width: 100%; }
.abcde-table tr { border-bottom: 1px solid var(--bg); }
.abcde-table td { padding: 10px 0 10px 12px; vertical-align: top; }
.abcde-table td:first-child { padding-left: 0; width: 40px; }
.td-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: white; font-size: 14px; font-weight: 900;
}
.td-name { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.td-desc { display: block; font-size: 12px; color: var(--sub); margin-bottom: 5px; line-height: 1.5; }
.td-crit { display: block; font-size: 11px; color: var(--text); font-weight: 600; background: var(--bg); padding: 5px 9px; border-radius: 7px; }

/* Rules */
.rules-list, .mistake-list { display: flex; flex-direction: column; gap: 12px; }
.rule-row, .mistake-row { display: flex; gap: 12px; font-size: 12px; line-height: 1.55; }
.rule-icon { font-size: 18px; flex-shrink: 0; width: 24px; }
.mistake-x { font-size: 14px; font-weight: 900; color: var(--A); flex-shrink: 0; width: 16px; }

/* Asking questions */
.q-list { display: flex; flex-direction: column; gap: 8px; }
.q-item {
  background: var(--bg); border-radius: 10px; padding: 10px 14px;
  font-size: 12px; line-height: 1.5; display: flex; gap: 10px;
}
.q-num { color: var(--C); font-weight: 800; flex-shrink: 0; }

/* Тулбар с вкладками и бейдж возраста — общие для полноэкранных панелей.
   Были .q-* (реестр вопросов); после его удаления остался один потребитель —
   «Траты», поэтому имена нейтральные, а свойства ровно прежние. */
.panel-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.panel-tabs { display: flex; gap: 6px; }
.panel-tab {
  padding: 7px 14px; border-radius: 18px; border: 1.5px solid var(--border);
  background: white; font-size: 13px; font-weight: 600; color: var(--sub);
  cursor: pointer; font-family: inherit; transition: all 0.14s;
}
.panel-tab.active { background: var(--text); color: white; border-color: var(--text); }
.age-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.age-badge.age-ok { background: #E8FBF0; color: var(--green); }
.age-badge.age-warn { background: #FFF3E0; color: #FF9500; }
.age-badge.age-over { background: #FFE5E5; color: var(--A); }

/* Examples */
.ex-block { margin-bottom: 12px; }
.ex-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ex-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: white; font-size: 12px; font-weight: 900; }
.ex-label { font-size: 12px; font-weight: 700; }
.ex-items { display: flex; flex-direction: column; gap: 3px; padding-left: 30px; }
.ex-item { font-size: 12px; color: var(--sub); }
.ex-item::before { content: '·  '; }

/* ─── SECTIONS ─── */
.section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--sub);
  margin: 20px 0 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ─── TASK CARD ─── */
.task-card {
  background: var(--card); border-radius: 12px;
  margin-bottom: 8px; border: 1.5px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.task-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.task-card.pA { border-left: 3px solid var(--A); }
.task-card.pB { border-left: 3px solid var(--B); }
.task-card.pC { border-left: 3px solid var(--C); }
.task-card.pD { border-left: 3px solid var(--D); }
.task-card.pE { border-left: 3px solid var(--E); }
.task-card.carried { background: #FAFAFA; }
.task-card.done-card { opacity: 0.65; }
.task-card-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px;
}
/* Раньше opacity:0 и проявление только по :hover — на телефоне, где
   :hover физически не бывает, значки были невидимы в принципе. Теперь
   видны всегда и чуть ярче при наведении/фокусе — для тех, у кого есть
   мышь. */
.task-card-row:hover .task-actions, .task-card-row:focus-within .task-actions { opacity: 1; }

.check-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--green);
  transition: all 0.15s;
}
.check-btn:hover { border-color: var(--green); background: #E8FBF0; }
.check-btn.checked { background: var(--green); border-color: var(--green); }

.badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  color: white; margin-top: 2px;
}
.bA { background: var(--A); }
.bB { background: var(--B); }
.bC { background: var(--C); }
.bD { background: var(--D); }
.bE { background: var(--E); }

.task-body { flex: 1; min-width: 0; }
.task-text { font-size: 14px; font-weight: 500; line-height: 1.45; word-break: break-word; }
.task-text.struck { text-decoration: line-through; color: var(--sub); }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.meta-tag { font-size: 11px; color: var(--sub); }
/* Видимый id задачи — чтобы было что скопировать, когда нужно сослаться на
   конкретную задачу в разговоре (просьба Александра 14.10.2026: раньше id
   нигде не показывался, искать задачу по тексту/вложению приходилось вручную
   через сервер). Моноширинный и приглушённый — не должен спорить за внимание
   с текстом задачи. */
.task-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px; color: var(--sub);
  margin-top: 4px; user-select: text; word-break: break-all;
}
/* opacity — отдельно от .task-id, не на весь блок: иначе тускнел бы и
   жирный номер рядом (находка ревью — раньше opacity висела на родителе
   и реально не приглушала id сильнее var(--sub), а номер становился бледным). */
.task-id-raw { opacity: .65; }
/* Номер — жирным и обычным (не моноширинным) шрифтом, чтобы бросался в
   глаза первым; id рядом остаётся мелким и приглушённым — второстепенная
   деталь на случай переиспользования номера после удаления задачи. */
.task-num { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: 12px; color: var(--text); }
#modalTaskId { margin-top: -12px; margin-bottom: 18px; font-size: 11px; }
#modalTaskId .task-num { font-size: 15px; }
.tag-due { font-size: 11px; color: var(--B); font-weight: 600; }
.tag-overdue { font-size: 11px; color: var(--A); font-weight: 600; }
.tag-carried { font-size: 11px; color: var(--D); font-weight: 600; }

.task-actions {
  display: flex; gap: 4px; flex-shrink: 0;
  opacity: 0.8; transition: opacity 0.15s;
}
/* На тач-устройстве :hover не наступает никогда — показываем сразу на
   полную яркость, иначе значки для телефона были бы постоянно притушены. */
@media (hover: none) { .task-actions { opacity: 1; } }
.act-btn {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: var(--border); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.13s;
}
.act-btn:hover, .act-btn:focus-visible { background: #D1D1D6; color: var(--text); }
.act-btn.del:hover, .act-btn.del:focus-visible { background: #FFE5E5; color: var(--A); }

/* Notes btn */
/* Кнопка заметок на карточке */
.notes-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--sub);
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.13s; margin-top: 6px;
}
.notes-btn:hover { background: var(--border); }
.notes-btn.has-notes { color: var(--C); border-color: #C7DCFF; background: #EAF2FF; }
.notes-btn.has-new { color: white; border-color: var(--C); background: var(--C); animation: pulse-glow-blue 2s ease-in-out infinite; }
/* «Ждёт вашего ответа» (15.10.2026) — отдельно от has-new: там просто
   непросмотрено, здесь конкретно ждут ответа именно от currentUser, и флаг
   не снимается просмотром, только собственным ответом в этом же треде.
   Красный, не синий — чтобы не путать с обычным «есть новое». */
.notes-btn.has-needreply, .kcard-btn.has-needreply {
  color: white; border-color: var(--A); background: var(--A);
  animation: pulse-glow-red 2s ease-in-out infinite;
}
.kcard-btn.has-needreply:hover { background: #E0352B; color: white; }

/* Модальное окно заметок */
.notes-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.notes-overlay.open { opacity: 1; pointer-events: all; }
.notes-modal {
  background: var(--card); border-radius: 20px;
  width: min(620px, 94vw); max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 28px 70px rgba(0,0,0,0.22);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
.notes-overlay.open .notes-modal { transform: translateY(0) scale(1); }
.notes-modal-head {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
}
.notes-modal-info { flex: 1; min-width: 0; }
.notes-modal-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; word-break: break-word; }
.notes-modal-sub { font-size: 11px; color: var(--sub); margin-top: 3px; }
.notes-modal-close {
  border: none; background: var(--bg); color: var(--sub);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s; margin-top: -2px;
}
.notes-modal-close:hover { background: var(--border); color: var(--text); }
.notes-modal-list {
  flex: 1; overflow-y: auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 8px; min-height: 40px;
}
.notes-modal-empty { text-align: center; color: var(--sub); font-size: 13px; padding: 28px 0; font-style: italic; }
.note-item { background: var(--bg); border-radius: 10px; padding: 11px 13px; border-left: 3px solid var(--C); }
.note-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.note-text a { color: var(--C); text-decoration: underline; word-break: break-all; }
/* Цвет по автору: свои реплики синие, Миланы — розовые. */
.note-item.note-mine { border-left-color: var(--C); background: #EAF2FF; }
.note-item.note-mine .note-by { color: var(--C); }
.note-item.note-milana { border-left-color: #FF2D92; background: #FFF0F7; }
.note-item.note-milana .note-by { color: #FF2D92; }
.note-item.note-other { border-left-color: var(--D); background: #F2F0FF; }
.note-item.note-other .note-by { color: var(--D); }
.note-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.note-file {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 4px 9px; border-radius: 8px; background: #EAF2FF; border: 1px solid #C7DCFF;
  font-size: 12px; font-weight: 600; color: var(--C); text-decoration: none;
}
.note-file:hover { background: #DCE9FF; }
.note-file-size { font-weight: 500; color: var(--sub); font-size: 11px; }
.note-pending { display: flex; flex-wrap: wrap; gap: 6px; }
.note-pending:not(:empty) { margin-bottom: 8px; }
.note-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
.note-chip button {
  border: none; background: none; cursor: pointer; color: var(--sub);
  font-size: 13px; padding: 0 2px; font-family: inherit;
}
.note-chip button:hover { color: var(--A); }
.note-attach-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); font-size: 12px; font-weight: 600; color: var(--sub);
}
.note-attach-btn:hover { border-color: var(--C); color: var(--C); }
.note-attach-btn.active { background: var(--A); border-color: var(--A); color: white; }
.note-attach-btn.active:hover { color: white; }
.note-needsreply-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--A);
  background: #FFECEB; border: 1px solid #FFC7C3; border-radius: 7px;
  padding: 2px 8px; margin-bottom: 6px;
}
.note-hint-text { margin-left: 8px; }
.emoji-picker {
  display: none; position: absolute; bottom: 52px; left: 0; z-index: 20;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 12px; width: 296px;
}
.emoji-picker.open { display: block; }
.emoji-group + .emoji-group { margin-top: 10px; }
.emoji-group-title { font-size: 10px; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.emoji-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.emoji-btn {
  border: none; background: none; cursor: pointer; font-size: 21px;
  line-height: 1; padding: 6px 0; border-radius: 8px; font-family: inherit;
}
.emoji-btn:hover { background: var(--bg); transform: scale(1.15); }
.notes-modal-footer { position: relative; }

/* ─── РЕЕСТР ТРАТ ─── */
.hdr-btn-money { background: #FFF4E5; color: #B35309; }
.hdr-btn-money:hover { background: #FFE8CC; }
.hdr-btn-money.active { background: #FF9500; color: white; }

/* ─── ФАЙЛЫ (поиск по вложениям) ─── */
.hdr-btn-files { background: #F3F0FF; color: #5856D6; }
.hdr-btn-files:hover { background: #E4DBFF; }
.hdr-btn-files.active { background: #5856D6; color: white; }
.files-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 16px;
  border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px;
  font-family: inherit; outline: none; transition: border 0.15s;
  background: var(--card); color: var(--text);
}
.files-search:focus { border-color: var(--C); }
.files-list { display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  text-decoration: none; color: var(--text); transition: background 0.15s, border-color 0.15s;
}
.file-item:hover { background: var(--bg); border-color: #C7DCFF; }
.file-item-icon { font-size: 22px; flex-shrink: 0; }
.file-item-main { flex: 1; min-width: 0; }
.file-item-name {
  font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; min-width: 0;
}
/* anywhere, не break-word: у flex-элементов "автоматический минимум"
   игнорирует break-word при расчёте intrinsic-ширины — имя без пробелов
   (например, "Господдержка_для_АльфаCRM_2026.docx") иначе распирает
   карточку и даёт горизонтальный скролл всей страницы на телефоне. */
.file-item-name { overflow-wrap: anywhere; }
.file-item-ctx {
  font-size: 12px; color: var(--sub); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.file-item-who { font-size: 11px; font-weight: 700; color: var(--D); }
.file-item-date { font-size: 11px; color: var(--sub); }
@media(max-width:600px){
  .file-item { flex-wrap: wrap; }
  .file-item-ctx { white-space: normal; }
}
.ex-period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.ex-period-btn {
  padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--card); font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit; transition: all 0.14s; white-space: nowrap;
}
.ex-period-btn:hover { border-color: var(--sub); }
.ex-period-btn.active { background: var(--text); color: white; border-color: var(--text); }
.ex-period-label { font-size: 12px; color: var(--sub); margin-left: 6px; font-weight: 600; }
.ex-period-dates { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.ex-period-dates input {
  padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.ex-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 12px; font-size: 13px; }
.ex-sum-main b { font-size: 16px; }
.ex-sum-owed { color: var(--A); }
.ex-sum-nodoc { color: #B35309; }
.ex-row-click { cursor: pointer; }
.ex-row-click:hover { background: var(--bg); }
.ex-amount { font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ex-cat { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }
.ex-project { font-size: 11px; color: var(--D); font-weight: 600; margin-top: 2px; }
.ex-doc { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ex-doc.ok { color: var(--green); }
.ex-doc.bad { color: #B35309; }
.ex-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; background: var(--bg); color: var(--sub); }
.ex-status.st-reimbursed { background: #E8FBF0; color: var(--green); }
.ex-status.st-pending, .ex-status.st-approved { background: #FFF3E0; color: #FF9500; }
.ex-status.st-rejected { background: #FFE5E5; color: var(--A); }
.ex-bearer-personal { font-size: 11px; font-weight: 700; color: var(--D); }
.ex-bearer-unclear { font-size: 11px; font-weight: 700; color: var(--B); }
.ex-owed-total { font-size: 30px; font-weight: 900; letter-spacing: -1px; color: var(--A); }
.ex-owed-people { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ex-bearer-split { display: flex; gap: 32px; flex-wrap: wrap; }
.ex-form { display: flex; flex-direction: column; gap: 12px; }
.ex-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-field { display: flex; flex-direction: column; gap: 4px; }
.ex-field > span { font-size: 11px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.3px; }
.ex-field input, .ex-field select, .ex-field textarea {
  padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--text);
}
.ex-field input:focus, .ex-field select:focus, .ex-field textarea:focus { border-color: var(--C); outline: none; }
.ex-doc-hint.calm { color: var(--sub); background: var(--bg); border-color: var(--border); }
.ex-doc-hint { font-size: 12px; line-height: 1.45; color: #B35309; background: #FFF8ED; border: 1px solid #FFE0B2; border-radius: 9px; padding: 9px 11px; }
.ex-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-docs:not(:empty) { margin-bottom: 6px; }
.ex-error { color: var(--A); font-size: 13px; font-weight: 600; min-height: 18px; }

/* ─── ПОДЗАДАЧИ ─── */
.field-hint { font-weight: 500; color: var(--sub); font-size: 11px; margin-left: 6px; }
.subtask-list { display: flex; flex-direction: column; gap: 6px; }
.subtask-list:not(:empty) { margin-bottom: 8px; }
.subtask-empty { font-size: 12px; color: var(--sub); font-style: italic; padding: 4px 0; }
.subtask-row { display: flex; align-items: center; gap: 8px; }
.subtask-row.done .subtask-text { text-decoration: line-through; color: var(--sub); }
.subtask-check {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--card); color: white;
  font-size: 12px; font-weight: 800; line-height: 1; font-family: inherit;
}
.subtask-check.checked { background: var(--green); border-color: var(--green); }
.subtask-text {
  /* min-width:0 — без него flex-элемент не сжимается уже своего
     содержимого и на узкой модалке выталкивает .subtask-del (✕) за
     видимый край; .modal задаёт overflow-y:auto, что по спецификации
     молча промотирует overflow-x тоже в auto, так что кнопка технически
     доступна скроллом, но незаметна и выглядит пропавшей. */
  flex: 1; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.subtask-del { border: none; background: none; color: var(--text); cursor: pointer; font-size: 14px; padding: 2px 4px; font-family: inherit; }
.subtask-del:hover { color: var(--A); }
/* Срок у подзадачи (15.10.2026) — узкий date-input, не растягивается как
   текст; flex-wrap на самой строке — чтобы на телефоне дата не выталкивала
   ✕ за край, а переносилась на вторую строку. */
.subtask-row { flex-wrap: wrap; }
/* Специфичность .field .subtask-row .subtask-due (0,3,0) обязана перебить
   .field input[type=date] (0,2,1) — находка ревью: с одиночным классом
   .subtask-due { width:132px } тихо проигрывал этому правилу, и поле даты
   растягивалось на всю ширину строки (а с flex-wrap выше это разваливало
   строку на три визуальные строки — текст/дата/крестик вразнобой). */
.field .subtask-row .subtask-due {
  flex-shrink: 0; width: 132px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 12px; font-family: inherit; background: var(--card); color: var(--sub);
}
.subtask-readonly { background: var(--bg); border-radius: 8px; padding: 4px 8px; }
.subtask-readonly .subtask-check { border: none; background: none; width: auto; height: auto; color: var(--green); font-size: 14px; }
.subtask-text-ro { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.subtask-readonly.done .subtask-text-ro { text-decoration: line-through; color: var(--sub); }
.subtask-add { display: flex; gap: 6px; }
.subtask-add input {
  flex: 1; padding: 7px 10px; border: 1.5px dashed var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.subtask-add-btn {
  padding: 7px 12px; border-radius: 8px; border: none; background: var(--bg);
  color: var(--sub); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.subtask-add-btn:hover { background: var(--border); }
.subtask-badge { font-size: 11px; font-weight: 700; color: var(--sub); background: var(--bg); padding: 2px 7px; border-radius: 7px; }
.subtask-badge.done { color: var(--green); background: #E8FBF0; }
.tag-colleague { background: #FF2D92; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: var(--text); color: white; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600; z-index: 900; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* подытоги по месяцам */
.ex-month-sep td {
  background: var(--bg); font-size: 11px; font-weight: 800; color: var(--sub);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 9px 16px !important;
  border-bottom: 1px solid var(--border);
}
.ex-month-sep b { color: var(--text); font-size: 14px; margin-left: 10px; font-variant-numeric: tabular-nums; }
.ex-month-sep span { margin-left: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.75; }

/* проблемные строки метим слева, а не пестротой в ячейках */
.ex-table tr.ex-bad-doc td:first-child { box-shadow: inset 3px 0 0 var(--B); }
.ex-table tr.ex-bad-old td:first-child { box-shadow: inset 3px 0 0 var(--A); }
.ex-table .ex-th-what { width: 100%; }
.ex-table .ex-th-amt { text-align: right; }
.ex-table th:not(.ex-th-what) { white-space: nowrap; }

/* ── шапка таблицы: в цвете раздела «Траты», прилипает при прокрутке ── */


/* ── строка реестра ── */
.ex-table td { padding: 11px 10px; vertical-align: middle; }
.ex-table tr.ex-row-click:hover { background: #F7F9FC; }
.ex-table tr.ex-row-click:active { background: #EAF2FF; }

/* дата: число крупно, месяц под ним — колонка узкая и ровная */
.ex-m-date { white-space: nowrap; width: 1%; text-align: center; padding-right: 14px !important; }
.ex-day { display: block; font-size: 16px; font-weight: 800; line-height: 1.05; letter-spacing: -0.4px; }
.ex-mon { display: block; font-size: 10.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }

/* категория: точка вместо тяжёлой пилюли — меньше визуального шума */
.ex-m-cat { white-space: nowrap; width: 1%; }
.ex-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ex-what-main { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ex-m-what { max-width: 420px; }
.ex-m-amt { width: 1%; padding-left: 18px !important; }
.ex-amount { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
.ex-amount small { font-size: 11.5px; color: var(--sub); font-weight: 600; letter-spacing: 0; }

/* статусы одной строкой компактных пилюль */
.ex-m-payer { white-space: nowrap; width: 1%; font-size: 12.5px; font-weight: 600; padding-left: 16px !important; }
.ex-payer-src { font-size: 10.5px; color: var(--sub); font-weight: 500; margin-top: 1px; }
.ex-m-chips { white-space: nowrap; width: 1%; text-align: right; }
.ex-table thead th:last-child { text-align: right; }
.ex-chip {
  display: inline-block; margin-left: 5px; padding: 3px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--bg); color: var(--sub);
}
.ex-chip-done { background: #E8FBF0; color: var(--green); }
.ex-chip-wait { background: #FFF3E0; color: #B35309; }
.ex-chip-nodoc { background: #FFF4E5; color: #B35309; }
.ex-chip-rej { background: #FFE5E5; color: var(--A); }
.ex-chip-personal { background: #EFEDFF; color: var(--D); }
.ex-chip-unclear { background: #FFF3E0; color: #FF9500; }
.ex-chip-file { background: #EAF2FF; color: var(--C); }
.ex-chip-nope { background: #FFE5E5; color: var(--A); }
.ex-chip-btn { border: none; cursor: pointer; font-family: inherit; }
.ex-chip-btn:hover { filter: brightness(0.94); }
.ex-chip-acc { background: var(--bg); color: var(--sub); font-weight: 600; }
.ex-sum-main b, .ex-owed-total, .metric-val { font-variant-numeric: tabular-nums; }
.ex-owed-total { letter-spacing: -0.5px; }

/* блок «ждёт возмещения» — главный экран владельца */
.ex-owed-card { border: 1.5px solid #FFD9D6; background: linear-gradient(180deg, #FFF6F5, var(--card)); }
.ex-owed-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 5px 10px; }
.ex-owed-btn {
  border: none; background: var(--green); color: white; border-radius: 7px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.ex-owed-btn:hover { filter: brightness(1.06); }
.ex-owed-clean { font-size: 15px; font-weight: 700; color: var(--green); padding: 6px 0; }

/* пустые состояния */
.ex-empty { text-align: center; padding: 48px 20px; }
.ex-empty-icon { font-size: 40px; margin-bottom: 10px; }
.ex-empty-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.ex-empty-sub { font-size: 13px; color: var(--sub); margin-bottom: 16px; }

/* свёрнутые второстепенные поля формы */
.ex-more { border-top: 1px solid var(--border); padding-top: 10px; }
.ex-more > summary {
  font-size: 12px; font-weight: 700; color: var(--C); cursor: pointer;
  list-style: none; padding: 4px 0;
}
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-more > summary::before { content: '▸ '; }
.ex-more[open] > summary::before { content: '▾ '; }
.ex-more-body { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ex-attach-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-camera-btn { display: none; }

.chart-card, .metric-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.ex-period-btn:focus-visible, .team-filters select:focus-visible { outline: 2px solid var(--C); outline-offset: 2px; }

@media(max-width:700px){ .ex-row { grid-template-columns: 1fr; } .ex-bearer-split { gap: 18px; } }

/* На телефоне таблица из шести колонок нечитаема — показываем карточки.
   Милана вносит траты прямо в магазине, поэтому важнее скорость. */
@media(max-width:600px){
  .ex-camera-btn { display: inline-flex; }
  .ex-table thead { display: none; }
  .ex-month-sep td { border-radius: 10px; border: none; }
  .ex-table, .ex-table tbody { display: block; width: 100%; }
  /* Карточкам горизонтальный скролл не нужен — иначе содержимое уезжает
     за край, а обёртка остаётся прокрученной. */
  .team-table-wrap { overflow: visible; max-height: none; }
  .ex-table tr.ex-row-click {
    display: block; background: var(--card); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px; border-left: 3px solid transparent;
  }
  .ex-table tr.ex-row-click td { display: none; border: none; padding: 0; }
  .ex-table tr.ex-bad-doc { border-left-color: var(--B); }
  .ex-table tr.ex-bad-old { border-left-color: var(--A); }
  .ex-table tr.ex-bad-doc td:first-child, .ex-table tr.ex-bad-old td:first-child { box-shadow: none; }
  .ex-table tr.ex-row-click td.ex-m-what { display: block; margin-bottom: 4px; max-width: none; padding: 0 !important; }
  .ex-table tr.ex-row-click td.ex-m-amt { display: block; text-align: left; margin-bottom: 6px; padding: 0 !important; font-size: 18px; }
  .ex-table tr.ex-row-click td.ex-m-date,
  .ex-table tr.ex-row-click td.ex-m-cat { display: inline-block; margin-right: 10px; vertical-align: middle; width: auto; padding: 0 !important; text-align: left; }
  .ex-table tr.ex-row-click td.ex-m-payer { display: inline-block; width: auto; padding: 0 !important; font-size: 12px; color: var(--sub); }
  .ex-table tr.ex-row-click td.ex-m-payer .ex-payer-src { display: inline; margin-left: 4px; }
  .ex-table tr.ex-row-click td.ex-m-chips { display: inline-block; text-align: left; width: auto; padding: 6px 4px 0 0 !important; }
  .ex-table tr.ex-row-click td.ex-m-chips .ex-chip { margin: 0 4px 0 0; }
  .ex-day, .ex-mon { display: inline; font-size: 12px; font-weight: 600; color: var(--sub); letter-spacing: 0; }
  .ex-mon { text-transform: none; margin-left: 3px; }
  .ex-month-sep { display: block; margin: 14px 0 6px; }
  .ex-month-sep td { display: block; background: none; padding: 0 !important; }
  .ex-period-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ex-period-bar::-webkit-scrollbar { display: none; }
  .ex-period-label { display: none; }
  /* Селекты в один столбец: два в ряд на 375px не помещаются и обрезаются */
  .team-filters { flex-direction: column; align-items: stretch; }
  .team-filters select, .team-filters .hdr-btn { width: 100%; }
  .ex-summary { gap: 8px 14px; }
  .ex-modal-btns { position: sticky; bottom: 0; background: var(--card); padding-top: 10px; }
}
.note-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.note-ts { font-size: 11px; color: var(--sub); }
.note-by { font-size: 12px; color: var(--sub); font-weight: 800; }
.note-del { background: none; border: none; color: var(--text); cursor: pointer; font-size: 12px; padding: 0 3px; transition: color 0.13s; }
.note-del:hover { color: var(--A); }
.notes-modal-input { padding: 12px 20px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }
.notes-modal-ta {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 90px; outline: none; line-height: 1.55;
  transition: border-color 0.15s;
}
.notes-modal-ta:focus { border-color: var(--C); }
.notes-modal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.notes-modal-hint { font-size: 11px; color: var(--sub); }
.notes-modal-save {
  padding: 9px 24px; border: none; border-radius: 10px;
  background: var(--C); color: white; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.12s;
}
.notes-modal-save:hover { background: #0062CC; }

/* ─── EMPTY STATE ─── */
.empty { text-align: center; padding: 60px 20px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.empty-sub { font-size: 14px; color: var(--sub); }

/* ─── STATS (inline) ─── */
.stats-section {
  background: var(--card); border-radius: 14px;
  padding: 16px 18px; margin: 20px 0 12px;
}
.stats-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--sub);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.stats-week-label { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.stats-days-row { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 10px; }
.stats-day-cell {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 2px; border-radius: 8px; min-width: 0;
}
.stats-day-cell.is-today { background: #EAF2FF; }
.stats-day-cell.is-weekend { opacity: 0.65; }
.stats-day-name { font-size: 10px; font-weight: 700; color: var(--sub); }
.stats-day-count { font-size: 14px; font-weight: 800; color: var(--border); }
.stats-day-count.has-done { color: var(--text); }
.stats-totals {
  display: flex; gap: 16px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.stats-total-item { font-size: 12px; color: var(--sub); }
.stats-total-item strong { color: var(--text); }

/* ─── COMPLETED SECTION ─── */
.comp-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--sub);
  padding: 10px 14px; background: var(--card); border-radius: 12px;
  cursor: pointer; margin-top: 20px; user-select: none;
  text-transform: uppercase; letter-spacing: 0.5px;
  transition: background 0.13s;
}
.comp-toggle:hover { background: var(--border); }
.comp-arrow { transition: transform 0.2s; }
.comp-toggle.open .comp-arrow { transform: rotate(90deg); }

/* ─── KANBAN ─── */
/* У колонок min-width:160px — пять штук уже шире любого телефона.
   Без overflow-x здесь скролл некуда было деть, и его брала на себя вся
   страница целиком: body раздувался до ширины доски (у реальных данных —
   больше 1100px), а любой position:fixed (модалки, оверлей) после этого
   считал себя ОТНОСИТЕЛЬНО этой раздутой ширины, а не экрана телефона —
   из-за чего модалка открывалась сдвинутой и часть её кнопок становилась
   недостижима. Найдено живым прогоном на проде, не чтением кода: */
/* 07.10.2026: сам overflow-x:auto выше сломал position:sticky у
   .kanban-col-head. По спецификации CSS Overflow заданный не-visible
   overflow хоть на одной оси делает элемент «ближайшим скролл-
   контейнером» для sticky-потомков по ОБЕИМ осям сразу — ни
   overflow-y:visible (спецификация всё равно поднимает его до auto при
   смешении с overflow-x:auto), ни overflow-y:clip (Chrome и WebKit
   всё равно считают контейнер sticky-containing) этого не обходят,
   проверено живыми прогонами в обоих движках. .kanban-col-head начинал
   прилипать не к странице, а к .kanban-wrap, который сам никогда не
   скроллится вертикально (скроллится страница) — заголовок застывал со
   сдвигом ровно +var(--sticky-h) от верха колонки ПОСТОЯННО, разрезая
   вторую карточку даже без прокрутки. Раз колонки обязаны скроллиться
   горизонтально, их заголовки больше не могут честно прилипать к
   странице — position:sticky с .kanban-col-head снят полностью. */
.kanban-wrap { padding-bottom: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kanban { display: flex; gap: 8px; }
.kanban-col { flex: 1; min-width: 160px; background: var(--card); border-radius: 14px; }
.kanban-col-head {
  padding: 12px 14px; color: white; display: flex;
  align-items: center; justify-content: space-between;
  border-radius: 14px 14px 0 0;
}
.kanban-col-name { font-size: 10px; font-weight: 600; opacity: 0.85; margin-top: 2px; }
.kanban-col-count {
  background: rgba(255,255,255,0.25); color: white;
  padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
}
.kanban-col-body {
  min-height: 80px; padding: 8px; display: flex; flex-direction: column;
  gap: 7px; transition: background 0.15s;
}
.kanban-col-body.drag-over { background: #EAF2FF; }
.kcard-empty {
  font-size: 11px; color: var(--sub); text-align: center;
  padding: 16px 8px; border-radius: 8px;
  border: 1.5px dashed var(--border);
}
.kanban-add-btn {
  width: 100%; padding: 7px; border-radius: 8px; border: 1.5px dashed var(--border);
  background: transparent; color: var(--sub); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.14s;
}
.kanban-add-btn:hover { border-color: var(--C); color: var(--C); background: #EAF2FF; }

/* kanban card */
.kcard {
  background: var(--bg); border-radius: 9px; padding: 9px 10px;
  cursor: grab; border: 1.5px solid transparent;
  transition: box-shadow 0.15s, transform 0.15s;
  border-left: 3px solid transparent;
}
.kcard.pA { border-left-color: var(--A); }
.kcard.pB { border-left-color: var(--B); }
.kcard.pC { border-left-color: var(--C); }
.kcard.pD { border-left-color: var(--D); }
.kcard.pE { border-left-color: var(--E); }
.kcard.dragging { opacity: 0.4; transform: scale(0.97); }
.kcard.carried { background: #FAFAFA; }
.kcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.kcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.kcard-badge { font-size: 10px; font-weight: 800; color: white; padding: 2px 7px; border-radius: 5px; }
.kcard-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  cursor: pointer; transition: all 0.14s;
}
.kcard-check:hover { border-color: var(--green); background: #E8FBF0; }
.kcard-text { font-size: 12px; font-weight: 500; line-height: 1.4; margin-bottom: 5px; word-break: break-word; }
.kcard-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; align-items: center; }
.kcard-meta .origin-tag { font-size: 9px; padding: 1px 5px; }
.kcard-meta .subtask-badge { font-size: 9.5px; padding: 1px 5px; }
.kcard-date { font-size: 10px; color: var(--sub); }
.kcard-actions { display: flex; gap: 3px; flex-wrap: wrap; }
.kcard-btn {
  padding: 2px 7px; border-radius: 5px; border: none;
  background: var(--border); color: var(--text);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.kcard-btn:hover { background: #D1D1D6; color: var(--text); }
.kcard-btn.del:hover { background: #FFE5E5; color: var(--A); }

/* ─── MODAL ─── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px); display: none;
  /* Выше .stats-overlay (300) — эта модалка теперь открывается и поверх
     обзора команды (постановка задачи, комментарий), не только поверх
     обычного экрана; иначе рендерится под ним и выглядит так, будто
     кнопка ничего не делает. Нашли живым headless-кликом, не чтением кода. */
  z-index: 400;
  align-items: center; justify-content: center;
}
.overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: 20px;
  padding: 24px 24px 20px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto; margin: 20px;
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 6px; }
.field textarea, .field input[type=date], .field input[type=text], .field select {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  outline: none; resize: vertical; transition: border 0.15s;
  background: var(--card); color: var(--text);
}
.field textarea:focus, .field input[type=date]:focus, .field input[type=text]:focus, .field select:focus { border-color: var(--C); }
.field textarea.err { border-color: var(--A); }
.p-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.p-opt {
  border: 2px solid var(--border); border-radius: 10px;
  padding: 8px 4px; text-align: center; cursor: pointer;
  transition: all 0.14s;
}
.p-opt:hover { border-color: var(--text); }
.p-opt.selA { border-color: var(--A); background: #FFF0EF; }
.p-opt.selB { border-color: var(--B); background: #FFF7EF; }
.p-opt.selC { border-color: var(--C); background: #EAF2FF; }
.p-opt.selD { border-color: var(--D); background: #F0EFFE; }
.p-opt.selE { border-color: var(--E); background: #F5F5F5; }
.p-letter { font-size: 18px; font-weight: 900; line-height: 1.2; }
.p-desc { font-size: 9px; color: var(--sub); line-height: 1.3; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.approval-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--sub); line-height: 1.4; cursor: pointer; }
.approval-check input { margin-top: 2px; flex-shrink: 0; }

/* approval queue */
.approval-section { margin-bottom: 18px; }
.approval-section-title { font-size: 12px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.appr-card { border-radius: 12px; background: var(--card); padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--sub); }
.appr-card.st-pending { border-left-color: #FF9500; border-left-width: 5px; background: #FFF8ED; }
.appr-card.st-rejected { border-left-color: var(--A); opacity: 0.75; }
.appr-card.st-postponed { border-left-color: var(--sub); opacity: 0.75; }
.appr-ribbon { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.appr-ribbon.st-pending { color: #FF9500; }
.appr-ribbon.st-rejected { color: var(--A); }
.appr-ribbon.st-postponed { color: var(--sub); }
.appr-text { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.appr-reason { font-size: 11.5px; color: var(--sub); font-style: italic; margin-bottom: 6px; }
.appr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.appr-btn { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: white; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.appr-btn.approve { color: var(--green); border-color: var(--green); }
.appr-btn.reject { color: var(--A); border-color: var(--A); }
.appr-btn.postpone { color: var(--sub); }
.btn { padding: 9px 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-cancel { background: var(--bg); color: var(--sub); }
.btn-cancel:hover { background: var(--border); }
.btn-del { background: #FFE5E5; color: var(--A); margin-right: auto; }
.btn-del:hover { background: #FFD5D5; }
.btn-save { background: var(--C); color: white; }
.btn-save:hover { background: #0062CC; }
.btn-hint { font-size: 11px; color: var(--sub); margin-top: 8px; text-align: right; }

/* ─── FAB ─── */
.fab {
  position: fixed; bottom: 32px; right: 32px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--C); color: white; border: none;
  font-size: 28px; font-weight: 300; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,122,255,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s; z-index: 150;
}
.fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,122,255,0.55); }

/* ─── STATS OVERLAY ─── */
.stats-overlay {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 300; overflow-y: auto;
  display: none;
}
.stats-overlay.open { display: block; }
.stats-ov-header {
  background: white; border-bottom: 1px solid var(--border);
  padding: 18px 28px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 10;
}
.stats-ov-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.stats-ov-close {
  padding: 7px 14px; border-radius: 18px; border: none;
  background: var(--bg); color: var(--sub); font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all 0.14s;
}
.stats-ov-close:hover { background: var(--border); color: var(--text); }
.stats-ov-body { max-width: 900px; margin: 0 auto; padding: 24px 28px 60px; }
#expensesOverlay .stats-ov-body, #teamOverlay .stats-ov-body { max-width: 1280px; }

/* metric cards */
.metrics-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.metric-card {
  background: white; border-radius: 14px; padding: 16px;
  text-align: center;
}
.metric-val { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.metric-lbl { font-size: 11px; color: var(--sub); font-weight: 500; margin-top: 5px; line-height: 1.4; }

/* chart cards */
.chart-card {
  background: white; border-radius: 14px; padding: 18px 20px;
  margin-bottom: 14px;
}
.chart-title {
  font-size: 13px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.chart-sub { font-size: 11px; color: var(--sub); font-weight: 500; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.online-dot.online { background: var(--green, #2ECC71); box-shadow: 0 0 0 3px rgba(46,204,113,0.2); }
.online-dot.offline { background: #D1D1D6; }

/* team overview tabs */
.team-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.team-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: white; font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit; transition: all 0.14s;
}
.team-tab:hover { border-color: var(--sub); }
.team-tab.active { background: var(--text); color: white; border-color: var(--text); }
.team-tab.active .online-dot.offline { background: rgba(255,255,255,0.5); }
.team-tab-count {
  background: rgba(0,0,0,0.08); border-radius: 10px; padding: 1px 7px;
  font-size: 11px; font-weight: 700; min-width: 16px; text-align: center;
}
.team-tab.active .team-tab-count { background: rgba(255,255,255,0.25); color: white; }
.team-tab-badge {
  border-radius: 10px; padding: 1px 6px; font-size: 10px; font-weight: 800;
  background: #FFE5E5; color: var(--A);
}
/* Просрочка критичнее, чем «есть новый комментарий» — крупнее и пульсирует,
   pending/new остаются статичными, чтобы не соревноваться за внимание. */
.team-tab-badge.overdue { font-size: 11px; padding: 2px 8px; animation: pulse-glow-red 2s ease-in-out infinite; }
.team-tab-badge.pending { background: #FFF3E0; color: #FF9500; }
.team-tab-badge.new { background: #E8F2FF; color: var(--C); }
.row-new-note { background: #EAF2FF; }

@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.45); }
  50% { box-shadow: 0 0 0 4px rgba(255,59,48,0); }
}
@keyframes pulse-glow-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,122,255,0.45); }
  50% { box-shadow: 0 0 0 4px rgba(0,122,255,0); }
}
.team-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.origin-tag {
  font-size: 10px; font-weight: 700; color: white; background: var(--sub);
  padding: 2px 7px; border-radius: 6px;
  display: inline-block; white-space: nowrap;
}
.team-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.period-sep { color: var(--sub); font-size: 12px; }
.team-filters select, .team-filters input[type=date] {
  padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text);
}
.team-cat-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* Список листается внутри своей области, а не вместе со всей панелью —
   только так sticky-шапка остаётся видимой. Высоту подгоняет
   fitTableHeight() под остаток экрана. */
.team-table-wrap { overflow: auto; overscroll-behavior: contain; }
.team-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.team-table { border-collapse: separate; border-spacing: 0; }
.team-table th {
  position: sticky; top: 0; z-index: 3;
  text-align: left; padding: 12px 10px; white-space: nowrap;
  background: #6F8B3E; color: #fff; border-bottom: none;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px;
}
.team-table thead th:first-child { border-radius: 12px 0 0 12px; padding-left: 16px; }
.team-table thead th:last-child { border-radius: 0 12px 12px 0; padding-right: 16px; }
.team-table thead tr { box-shadow: 0 3px 10px rgba(111,139,62,0.28); }
.team-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* Длинное описание не должно растягивать строку на пол-экрана:
   показываем три строки, остальное — в карточке задачи по клику.
   Клэмп вешаем на внутренний div: на самом <td> он ломает раскладку
   таблицы и обрезанная строка вылезает наружу. */
.team-row-text { max-width: 420px; }
.row-clamp, .ex-what-main {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.team-date-cell { white-space: nowrap; }
.team-date-main { font-weight: 600; margin-bottom: 4px; }
.report-row { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-quick {
  margin-left: auto; font-size: 11px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--sub);
  font-family: inherit; cursor: pointer;
}
.cat-quick.unset { border-color: var(--B); color: var(--B); font-weight: 700; }
.chart-bar-svg text { font-family: -apple-system, sans-serif; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.charts-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.prio-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.prio-bar-row { display: flex; align-items: center; gap: 10px; }
.prio-bar-lbl { font-size: 12px; font-weight: 700; min-width: 24px; }
.prio-bar-track { flex: 1; background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.prio-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s; }
.prio-bar-cnt { font-size: 11px; color: var(--sub); min-width: 24px; text-align: right; }

/* report cards — delta badges, donut */
.delta-badge { font-size: 11px; font-weight: 800; margin-left: 4px; }
.delta-badge.good { color: var(--green); }
.delta-badge.bad { color: var(--A); }
.delta-badge.flat { color: var(--sub); }
.metrics-row.cols-5 { grid-template-columns: repeat(5,1fr); }
.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-svg { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-pct { color: var(--sub); font-size: 11px; margin-left: auto; }

.heatmap-wrap { overflow-x: auto; }
.heatmap { display: inline-grid; grid-template-rows: repeat(7,13px); grid-auto-flow: column; gap: 3px; }
.heatmap-cell { width: 13px; height: 13px; border-radius: 3px; background: var(--border); }
.heatmap-day-labels {
  display: grid; grid-template-rows: repeat(7, 13px); gap: 3px;
  margin-right: 4px; font-size: 9px; color: var(--sub); line-height: 13px;
  text-align: right; flex-shrink: 0;
}
.heatmap-outer { display: flex; align-items: flex-start; }

/* ─── SYNC STATUS ─── */
.sync-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
  transition: background 0.3s;
}
.sync-dot.ok { background: var(--green); }
.sync-dot.saving { background: var(--B); }
.sync-dot.err { background: var(--A); }

@media(max-width:700px){
  .metrics-row { grid-template-columns: repeat(2,1fr); }
  .metrics-row.cols-5 { grid-template-columns: repeat(2,1fr); }
  .charts-two-col { grid-template-columns: 1fr; }
}
@media(max-width:600px){
  .main { padding: 12px 16px 120px; }
  .header, .filter-bar { padding-left: 16px; padding-right: 16px; }
  .modal { padding: 20px 18px 16px; }
  .stats-ov-body { padding: 16px 16px 60px; }
}

/* ─── POMODORO ─── */
.hdr-btn-pom { background: #FFF1F0; color: #C0392B; }
.hdr-btn-pom:hover { background: #FFD5D2; }
.hdr-btn-pom.active { background: #E74C3C; color: white; }
.hdr-badge {
  display: inline-block; min-width: 16px; padding: 1px 5px; margin-left: 2px;
  border-radius: 9px; background: #E74C3C; color: white;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 1.4;
}
.hdr-btn-pom.active .hdr-badge { background: rgba(255,255,255,0.3); }
.hdr-badge.pulse { animation: pulse-glow-red 2s ease-in-out infinite; }

/* ─── КОЛОКОЛЬЧИК И ПАНЕЛЬ УВЕДОМЛЕНИЙ ─── */
.hdr-btn-bell { background: var(--bg); color: var(--text); position: relative; }
.hdr-btn-bell:hover { background: var(--border); }
.hdr-btn-bell.has-new { background: #FFF4E5; }
.hdr-btn-bell.has-new .hdr-badge { animation: pulse-glow-red 2s ease-in-out infinite; }
.notif-panel {
  display: none; position: absolute; top: 58px; right: 20px; z-index: 500;
  width: 380px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.notif-panel.open { display: block; }
.notif-head { z-index: 2;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 800; position: sticky; top: 0; background: var(--card);
}
.notif-head span { color: var(--A); margin-left: 6px; }
.notif-empty { padding: 26px 16px; text-align: center; color: var(--sub); font-size: 13px; }
.notif-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  font-family: inherit; border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--bg); }
.notif-comment { border-left-color: var(--C); }
.notif-task { border-left-color: #FF9500; }
/* Полоска этого типа не была закрашена вовсе — уведомление о закрытом блоке
   выглядело как безымянное. Зелёный по смыслу: участник сделал свою часть. */
.notif-group { border-left-color: var(--green); }
.notif-item-top { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.notif-item-top b { font-weight: 700; }
.notif-time { margin-left: auto; color: var(--sub); font-size: 11px; white-space: nowrap; }
.notif-subject { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.notif-text { font-size: 12.5px; color: var(--sub); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media(max-width:600px){ .notif-panel { right: 8px; top: 52px; width: calc(100vw - 16px); } }


.pom-container {
  max-width: 460px; margin: 0 auto; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.pom-modes {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.pom-mode-btn {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: white; color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.14s;
}
.pom-mode-btn:hover { background: var(--bg); }
.pom-mode-btn.active { background: #E74C3C; color: white; border-color: #E74C3C; }

.pom-ring-wrap {
  position: relative; width: 200px; height: 200px;
}
.pom-svg { width: 100%; height: 100%; }
.pom-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pom-time {
  font-size: 44px; font-weight: 800; letter-spacing: -2px; line-height: 1;
}
.pom-mode-lbl { font-size: 13px; color: var(--sub); margin-top: 6px; }

.pom-controls { display: flex; align-items: center; gap: 12px; }
.pom-start-btn {
  padding: 13px 40px; border-radius: 26px; border: none;
  background: #E74C3C; color: white;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: background 0.15s;
}
.pom-start-btn:hover { background: #C0392B; }
.pom-stop-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border);
  background: white; color: var(--sub); font-size: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.14s;
}
.pom-stop-btn:hover { background: var(--bg); color: var(--text); }

.pom-today { text-align: center; }
.pom-today-toms { font-size: 26px; line-height: 1.3; min-height: 34px; }
.pom-today-min { font-size: 13px; color: var(--sub); margin-top: 2px; }

.pom-hist-section { width: 100%; }
.pom-hist-title {
  font-size: 11px; font-weight: 700; color: var(--sub); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 10px;
}
.pom-hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.pom-hist-date { flex: 1; color: var(--sub); }
.pom-hist-toms { font-size: 14px; min-width: 64px; }
.pom-hist-min { color: var(--sub); min-width: 60px; text-align: right; }

@media(max-width:500px){
  .pom-modes { gap: 6px; }
  .pom-mode-btn { padding: 5px 10px; font-size: 11px; }
  .pom-ring-wrap { width: 170px; height: 170px; }
  .pom-time { font-size: 36px; }
}

/* ── Общие задачи: блок на каждого участника ── */
.grp-people { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.grp-person {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 18px; border: 1.5px solid var(--border);
  background: white; font-size: 13px; font-weight: 600; color: var(--sub);
  transition: all 0.14s; user-select: none;
}
.grp-person.on { background: var(--text); color: white; border-color: var(--text); }
.grp-person input { display: none; }
.grp-blocks { display: flex; flex-direction: column; gap: 10px; }
.grp-block { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.grp-block-who { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.grp-block textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  font-family: inherit; font-size: 13px; resize: vertical; min-height: 38px; box-sizing: border-box;
}
.grp-block textarea.err { border-color: var(--A); }
.grp-block-row { display: flex; gap: 8px; margin-top: 8px; }
.grp-block-row select, .grp-block-row input {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
  font-family: inherit; font-size: 12.5px; min-width: 0;
}
.grp-hint { font-size: 12px; color: var(--sub); margin-top: 8px; line-height: 1.4; }
.grp-hint.err { color: var(--A); font-weight: 600; }

/* Плашка на карточке и сводка */
.group-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: #EEF1FF; color: #4B5BD6; cursor: pointer; border: none; font-family: inherit;
  /* Колонка канбана узкая: длинное название общей задачи переносилось на три
     строки и забивало карточку. Держим одну строку, полное название — в
     подсказке и в сводке. */
  max-width: 100%; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-tag .group-tag-name { overflow: hidden; text-overflow: ellipsis; }
.group-tag .group-tag-cnt { flex-shrink: 0; opacity: 0.75; }
.group-tag:hover { background: #E0E5FF; }
.grp-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.grp-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--card); }
.grp-row.done { opacity: 0.6; }
.grp-row.mine { box-shadow: inset 3px 0 0 var(--text); }
.grp-row-who { font-size: 12px; font-weight: 800; min-width: 84px; flex-shrink: 0; }
.grp-row-text { font-size: 13px; line-height: 1.4; flex: 1; min-width: 0; }
.grp-row-text.strike { text-decoration: line-through; }
.grp-row-meta { font-size: 11px; color: var(--sub); margin-top: 3px; }

/* Полоска общих задач, в которых у меня нет своего блока */
.orphan-groups {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px; border-radius: 12px;
  background: var(--card); border: 1px dashed var(--border);
}
.orphan-groups-lbl { font-size: 11.5px; font-weight: 700; color: var(--sub); }
.orphan-groups .group-tag { font-size: 11px; padding: 3px 10px; }

/* Подзадачи внутри блока участника общей задачи. */
.grp-block-steps { margin-top: 8px; }
.grp-block-steps-title { font-size: 11px; color: var(--sub); margin-bottom: 4px; }
/* Без min-width:0 поле ввода не сжимается, и на телефоне строка «поле +
   кнопка» вылезает за границу блока (замерено: 278 px в 258). У соседнего
   ряда блока это правило уже стоит — от той же беды. */
.subtask-add input { min-width: 0; }

/* Прочитанное не исчезает, а гаснет: события живут три дня, и панель
   работает как короткий журнал. Приглушаем текст и полоску, но НЕ фон —
   полупрозрачная карточка на телефоне читается как сломанная. */
.notif-item.is-read { border-left-color: var(--border); }
.notif-item.is-read .notif-item-top b { font-weight: 600; color: var(--sub); }
.notif-item.is-read .notif-icon { opacity: 0.45; }
.notif-item.is-read .notif-subject { color: var(--sub); font-weight: 500; }

/* Заголовок дня внутри панели */
.notif-day {
  /* Шапка панели тоже sticky с top:0; без смещения и порядка слоёв
     заголовок дня при прокрутке закрашивал «Новое N». 43px — измеренная
     высота шапки (13+13 отступы + строка + рамка). */
  position: sticky; top: 43px; z-index: 1;
  padding: 7px 14px 5px; background: var(--card);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sub);
}
/* Селектор с элементом (.notif-head span) перебивал одиночный класс, и
   спокойная подпись «за 3 дня» красилась в красный цвет счётчика новых. */
.notif-head .notif-head-note { color: var(--sub); font-weight: 600; font-size: 11px; margin-left: 6px; }