/* Справи — базові стилі (без збірки, звичайний CSS) */
:root {
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --surface-3: #F4F2EC;
  --surface-raised: #FFFFFF;
  --column: #EFEDE7;
  --line: #E4E2DB;
  --line-soft: #EEECE6;
  --line-strong: #DCD9D0;
  --line-hover: var(--line-hover);
  --text: #1C1D1F;
  --text-2: #3D3F45;
  --muted: #5F6168;
  --faint: #8A8C92;
  --faint-2: #B0ADA5;
  --accent: #1F4FBF;
  --accent-hover: #163B91;
  --accent-soft: #E9EEFB;
  --accent-tint: #F4F6FC;
  --accent-line: #D5DEF6;
  --on-accent: #FFFFFF;
  --danger: #B3261E;
  --chip: #F1EFE9;
  --chip-strong: #EAE8E1;
  --track: #EEECE6;
  --hover: rgba(0,0,0,.05);
  --glass: var(--glass);
  --note-bg: #FCF7EC;
  --note-line: #EFE3C8;
  --success-bg: #E3F1EA;
  --success-line: #C6E2D3;
  --warn-bg: #FCEFD9;
  --warn-text: #4A3200;
  --green-text: #1C6B4F;
  --online: #1FA463;
  --orange-text: #8A4A00;
  --red-text: #9F2219;
  --inverse-bg: #1C1D1F;
  --inverse-fg: #FFFFFF;
  --inverse-hover: #000000;
  --shadow-sm: 0 1px 2px rgba(20,20,19,.05);
  --shadow-md: 0 4px 14px rgba(20,20,19,.08);
  --shadow-lg: 0 20px 50px rgba(20,20,19,.2);
  --tone-gray-fg: #4A4C52;   --tone-gray-bg: #E4E2DB;
  --tone-blue-fg: #1F4FBF;   --tone-blue-bg: #E6ECFB;
  --tone-green-fg: #1C6B4F;  --tone-green-bg: #E3F1EA;
  --tone-orange-fg: #8A4A00; --tone-orange-bg: #FCEFD9;
  --manual-bg: #FFE1C2; --manual-mark: #E07A1F;
  --pending-bg: #FFF3BF; --pending-mark: #D9A400;
  --open-bg: #EDF3FF; --open-mark: #7FA3E8;
  --tone-purple-fg: #6B3399; --tone-purple-bg: #F1E8FA;
  --tone-pink-fg: #9A2C5A;   --tone-pink-bg: #F9E6EE;
  --tone-red-fg: #9F2219;    --tone-red-bg: #FBE7E5;
  --radius: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Каркас */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sidebar {
  flex: 1 1 220px; max-width: 100%;
  padding: 28px 20px; background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.brand { font-size: 20px; font-weight: 700; padding: 0 12px 20px; letter-spacing: -0.01em; }
.nav-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 14px 12px 4px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; font-size: 15px;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-link.is-soon { color: var(--faint); cursor: default; }
.nav-link.is-soon:hover { background: transparent; color: var(--faint); }
.nav-link .soon { margin-left: auto; font-size: 11px; color: var(--faint); }
.nav-link svg { flex: none; }
.sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.sidebar-footer .who { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { flex: 999 1 560px; min-width: 0; padding: 36px 40px 64px; }
.page { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.page-wide { display: flex; flex-direction: column; gap: 22px; }

/* Типографіка */
.eyebrow { font-size: 14px; color: var(--muted); }
h1.title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.page-head > div { display: flex; flex-direction: column; gap: 6px; }
/* Блок дій справа в шапці — рядком */
.page-head > div:last-child:not(:first-child) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.group-title { margin: 0; font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.group-title .count { font-weight: 500; color: var(--muted); }
.group-title.is-danger { color: var(--danger); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); }
.btn-sm { height: 36px; padding: 0 12px; font-size: 14px; border-radius: 8px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; padding: 0; }

/* Поля */
.quick-add {
  display: flex; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 6px 6px 6px 16px;
}
.quick-add input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; padding: 12px 0; background: transparent; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .label { font-size: 13px; color: var(--muted); font-weight: 500; }
.input {
  height: 44px; border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 0 12px; background: var(--surface); width: 100%;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; }
.input:focus, .quick-add:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.error { color: var(--danger); font-size: 13px; }

/* Картки й списки */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rows > * + * { border-top: 1px solid var(--line-soft); }
.task-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.task-row .t { flex: 1; min-width: 0; font-size: 16px; }
.task-row .meta { font-size: 13px; color: var(--muted); width: 72px; text-align: right; flex: none; }
.task-row .meta.is-late { color: var(--danger); font-weight: 600; }
.is-done-text { color: var(--faint); text-decoration: line-through; }
.check {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--faint-2);
  background: var(--surface); cursor: pointer; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent);
}
.check.is-on { background: var(--accent); border-color: var(--accent); }

/* Мітки (pills) */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tone-gray   { color: var(--tone-gray-fg); background: var(--tone-gray-bg); }
.tone-blue   { color: var(--tone-blue-fg); background: var(--tone-blue-bg); }
.tone-green  { color: var(--tone-green-fg); background: var(--tone-green-bg); }
.tone-orange { color: var(--tone-orange-fg); background: var(--tone-orange-bg); }
.tone-purple { color: var(--tone-purple-fg); background: var(--tone-purple-bg); }
.tone-pink   { color: var(--tone-pink-fg); background: var(--tone-pink-bg); }
.tag { font-size: 13px; color: var(--muted); background: var(--chip); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* Аватарки */
.avatars { display: flex; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); flex: none;
}
.avatars .avatar + .avatar { margin-left: -8px; }
/* Онлайн — зелена крапка внизу праворуч, з обідком кольору фону (User::presenceClass) */
.avatar.is-online { position: relative; }
.avatar.is-online::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 34%; height: 34%; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2px var(--surface); }

/* Перемикач режимів */
.segmented { display: flex; gap: 4px; background: var(--chip-strong); padding: 4px; border-radius: 10px; flex-wrap: wrap; }
.segmented button { height: 36px; padding: 0 14px; border-radius: 7px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; font-size: 14px; }
.segmented button.is-active { background: var(--surface-raised); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Дошка */
.board-scroll { overflow-x: auto; padding-bottom: 12px; }
.board { display: flex; gap: 16px; align-items: flex-start; }
.column { flex: none; width: 290px; background: var(--column); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.column-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.column-head .count { font-size: 14px; color: var(--muted); }
.task-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  text-align: left; cursor: pointer; width: 100%;
}
.task-card:hover { border-color: var(--line-hover); box-shadow: 0 2px 8px rgba(20,20,19,.06); }
.task-card h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.task-card .foot { display: flex; align-items: center; gap: 10px; }
.task-card .foot .avatars { margin-right: auto; }
.task-card .date { font-size: 13px; color: var(--muted); }
.comments-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.task-card .date.is-late { color: var(--danger); font-weight: 600; }
.add-in-column { font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 0; height: 40px; text-align: left; padding: 0 6px; cursor: pointer; border-radius: 8px; }
.add-in-column:hover { background: var(--hover); color: var(--text); }

/* Список */
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; }
.list-row:hover { background: var(--surface-2); }
.list-row .t { flex: 1; min-width: 220px; }
.list-row .d { width: 72px; text-align: right; font-size: 13px; color: var(--muted); }
.list-row .d.is-late { color: var(--danger); font-weight: 600; }
.status-select { height: 32px; border-radius: 999px; border: 0; padding: 0 10px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* Календар */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cal-toolbar h2 { margin: 0; font-size: 20px; min-width: 170px; text-align: center; }
.cal-scroll { overflow-x: auto; }
.cal { min-width: 860px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head { background: var(--surface-3); border-bottom: 1px solid var(--line); }
.cal-head div { padding: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-cell { min-height: 112px; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.cal-cell.is-muted { background: var(--surface-2); }
.cal-num { font-size: 13px; font-weight: 600; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-2); border: 0; background: transparent; cursor: pointer; }
.cal-cell.is-muted .cal-num { color: var(--faint-2); }
.cal-num.is-today { background: var(--accent); color: var(--on-accent); }
.cal-item { font-size: 12px; font-weight: 600; line-height: 1.3; padding: 4px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; text-align: left; cursor: pointer; width: 100%; }

/* Порожній стан */
.empty { border: 1px dashed var(--line-hover); background: var(--surface); border-radius: 14px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.empty b { font-size: 17px; }
.empty span { color: var(--muted); max-width: 480px; }

/* Модальне вікно */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,19,.35); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 50; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--surface); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 20px; flex: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.person { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-size: 14px; }
.person input { position: absolute; opacity: 0; pointer-events: none; }
.person.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.modal-foot .spacer { flex: 1; }

/* Модалка задачі з чатом */
.modal-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.modal.modal-split { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; position: relative; }
/* Хрестик — у правому куті всієї модалки, над чатом */
.modal-split .modal-close { position: absolute; top: 16px; right: 16px; }
.modal-split .chat-title { padding-right: 44px; }
.chat { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-left: 1px solid var(--line-soft); padding-left: 24px; min-height: 520px; }
.chat-title { margin: 6px 0 0; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.chat-title .count { font-weight: 500; color: var(--muted); font-size: 15px; }
.chat-feed { flex: 1; overflow-y: auto; max-height: 52vh; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.chat-empty { color: var(--muted); font-size: 14px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 16px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg-body { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.msg.is-mine .msg-body { background: var(--accent-soft); border-color: var(--accent-line); }
.msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 2px; }
.msg-head b { font-weight: 600; }
.msg-head time { color: var(--muted); }
.msg-del { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; }
.msg-del:hover { color: var(--danger); }
.msg-text { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; }
.chat-input textarea { flex: 1; min-height: 44px; }

/* Вхід */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth .card { width: 100%; max-width: 400px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 900px) {
  .modal.modal-split { grid-template-columns: 1fr; }
  .chat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 16px; min-height: 0; }
}

@media (max-width: 640px) {
  .content { padding: 24px 16px 48px; }
  .grid-2 { grid-template-columns: 1fr; }
  .modal.modal-split { grid-template-columns: 1fr; }
  .chat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 16px; min-height: 0; }
  h1.title { font-size: 26px; }
}

/* Сповіщення */
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.notice { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.notice:hover { background: var(--surface-2); }
.notice.is-unread { background: var(--accent-soft); }
.notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.notice-head { font-size: 15px; }
.notice-head b { font-weight: 600; }
.notice-text { color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.notice .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }

/* Цілі */
.tone-red { color: var(--tone-red-fg); background: var(--tone-red-bg); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
.goal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.goal-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.goal-title { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.goal-title h2 { margin: 0; font-size: 19px; font-weight: 600; }
.goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.goal-desc { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.goal-progress { display: flex; align-items: center; gap: 14px; }
.progress { flex: 1; height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.progress.is-warn span { background: #C26A00; }
.goal-count { font-size: 15px; font-weight: 600; white-space: nowrap; }
.goal-tasks { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.goal-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.goal-task .t { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.goal-task .t:hover { color: var(--accent); }
.goal-task .meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.goal-task .meta.is-late { color: var(--danger); font-weight: 600; }
.goal-more { font-size: 14px; font-weight: 600; color: var(--accent); align-self: flex-start; }
.goal-ghost-wrap { display: flex; flex-direction: column; gap: 10px; }
.goal-ghost-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.goal-ghost { opacity: .6; }
.ghost-line { height: 12px; background: var(--track); border-radius: 4px; }
.hint { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.status-icon { display: inline-flex; flex: none; background: none !important; }
.goal-task .status-select { flex: none; height: 28px; }

/* ДОВ */
.back-link { text-decoration: none; }
.back-link:hover { color: var(--accent); }
.btn.is-pressed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.info-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.5; }
.info-banner > svg { flex: none; margin-top: 2px; color: var(--accent); }
.info-banner > div { display: flex; flex-direction: column; gap: 4px; }
.info-banner b { font-weight: 600; }
.info-banner span { color: var(--muted); }
.info-banner.is-success { background: var(--success-bg); border-color: var(--success-line); align-items: center; }
.info-banner.is-success span { flex: 1; color: var(--green-text); font-weight: 500; }
.dov-field { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dov-field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.dov-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dov-people > div { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.dov-people > div + div { border-left: 1px solid var(--line-soft); }
.dov-people .dov-manager { flex-direction: row; align-items: center; gap: 12px; }
.dov-people .label { font-size: 13px; color: var(--muted); }
.dov-people .value { font-size: 17px; font-weight: 600; }
.dov-visions { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.dov-visions .vision + .vision { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.vision { display: flex; flex-direction: column; gap: 6px; }
.vision-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.label-caps { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.vision p { margin: 0; font-size: 17px; line-height: 1.5; }
.vision p.muted { font-size: 15px; color: var(--faint); }
.vision-note { font-size: 13px; color: var(--muted); }
.vision-form { display: flex; flex-direction: column; gap: 8px; }
.small-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.dov-section { display: flex; flex-direction: column; gap: 10px; }
.dov-section h2 { margin: 0; font-size: 18px; font-weight: 700; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.num { width: 26px; height: 26px; border-radius: 50%; background: var(--chip); color: var(--muted); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.resp-edit { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; }
.resp-edit .input { flex: 1; min-width: 0; }
.resp-tools { display: flex; flex: none; }
.resp-tools .icon-btn:disabled { opacity: .35; cursor: default; }
.resp { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.resp-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.resp-title { flex: 1 1 260px; min-width: 0; font-size: 16px; line-height: 1.4; }
.state-group { display: flex; gap: 2px; background: var(--chip); padding: 3px; border-radius: 999px; flex: none; }
.state-btn { height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer; }
.state-btn:hover { background: var(--hover); }
.state-btn.is-on { font-weight: 600; color: #fff; }
.tone-solid-green { background: #1C6B4F !important; }
.tone-solid-orange { background: #A85A00 !important; }
.tone-solid-red { background: #B3261E !important; }
.resp-note { margin-left: 38px; display: flex; flex-direction: column; gap: 8px; }
.resp-note label { font-size: 13px; color: var(--muted); font-weight: 500; }
.checkin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--accent-soft); border-radius: 12px; padding: 14px 18px; }
.checkin-bar.is-done { background: var(--success-bg); }
.checkin-bar > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.checkin-bar b { font-size: 15px; font-weight: 600; }
.checkin-bar span { font-size: 14px; color: var(--text-2); }
.week-strip { display: flex; gap: 5px; }
.week-strip span { width: 14px; height: 14px; border-radius: 4px; background: var(--line-hover); }
.week-strip span.is-done { background: #1C6B4F; }
.week-strip span.is-now { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.dov-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.dov-foot .btn:disabled { background: var(--line-hover); border-color: var(--line-hover); cursor: default; }
.dov-goal, .dov-goal-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }
.dov-goal .t, .dov-goal-edit .t { flex: 1 1 240px; min-width: 0; color: inherit; text-decoration: none; font-size: 15px; }
.dov-goal .t:hover { color: var(--accent); }
.dov-goal .progress { flex: 0 0 120px; height: 8px; }
.dov-goal .pill { width: 120px; justify-content: center; }
.dov-goal-add { display: flex; flex-wrap: wrap; gap: 10px; }
.dov-goal-add select { flex: 1 1 260px; width: auto; }
.history-week { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.history-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.history-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.history-item p { flex-basis: 100%; margin: 0 0 0 4px; color: var(--muted); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.team-row:hover { background: var(--surface-2); }
.team-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.team-row .t span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .dov-people { grid-template-columns: 1fr; }
  .dov-people > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .resp-note { margin-left: 0; }
  .dov-goal .progress { flex: 1 1 100%; order: 3; }
}

/* Підзадачі */
.subtasks { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; }
.subtask { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; }
.subtask + .subtask { border-top: 1px solid var(--line-soft); }
.subtask .t { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.subtask span.check { cursor: default; }

/* Документи */
.docs-shell { display: flex; flex-wrap: wrap; margin: -36px -40px -64px; min-height: calc(100vh); }
.docs-aside { flex: 1 1 220px; max-width: 100%; padding: 28px 16px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); background: var(--surface-2); }
.docs-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.docs-aside-head .icon-btn { width: 32px; height: 32px; font-size: 18px; }
.docs-aside .input { height: 40px; margin-bottom: 12px; font-size: 14px; }
.docs-link { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.docs-link:hover { background: var(--hover); }
.docs-link.is-active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.docs-main { flex: 999 1 400px; min-width: 0; padding: 36px 48px 64px; background: var(--surface); }
.doc { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.doc-start h2 { margin: 0 0 8px; font-size: 20px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.doc-meta .spacer { flex: 1; }
.doc-title { border: 0; outline: none; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; padding: 4px 0; width: 100%; background: transparent; }
.doc-title:focus { box-shadow: 0 2px 0 var(--accent); }
.prose-doc { padding: 12px 2px 40px; }
.prose-doc .tiptap { outline: none; min-height: 50vh; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.prose-doc .tiptap > * + * { margin-top: .75em; }
.prose-doc .tiptap p { margin: 0; }
.prose-doc .tiptap h2 { margin: 1.2em 0 0; font-size: 22px; font-weight: 700; color: var(--text); }
.prose-doc .tiptap h3 { margin: 1em 0 0; font-size: 18px; font-weight: 600; color: var(--text); }
.prose-doc .tiptap ul, .prose-doc .tiptap ol { padding-left: 1.4em; margin: 0; }
.prose-doc .tiptap li + li { margin-top: .25em; }
.prose-doc .tiptap a { color: var(--accent); }
.prose-doc .tiptap blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.prose-doc .tiptap hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.prose-doc .tiptap code { background: var(--chip); border-radius: 4px; padding: 1px 5px; font-size: .92em; }
.prose-doc .tiptap ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.prose-doc .tiptap ul[data-type="taskList"] li { display: flex; gap: 10px; align-items: flex-start; }
.prose-doc .tiptap ul[data-type="taskList"] li > label { flex: none; margin-top: 4px; }
.prose-doc .tiptap ul[data-type="taskList"] li > label input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.prose-doc .tiptap ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.prose-doc .tiptap ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--faint); text-decoration: line-through; }
.prose-doc .tiptap div[data-callout] { display: flex; flex-direction: column; gap: .5em; background: var(--warn-bg); border-radius: 10px; padding: 14px 16px 14px 46px; color: var(--warn-text); position: relative; }
.prose-doc .tiptap div[data-callout]::before { content: "⚠"; position: absolute; left: 16px; top: 12px; color: var(--orange-text); font-size: 18px; }
.prose-doc .tiptap table { border-collapse: collapse; width: 100%; table-layout: fixed; margin: 0; overflow: hidden; }
.prose-doc .tiptap th, .prose-doc .tiptap td { border: 1px solid var(--line-strong); padding: 6px 10px; vertical-align: top; min-width: 60px; }
.prose-doc .tiptap th { background: var(--surface-3); font-weight: 600; text-align: left; color: var(--text); }
.prose-doc .tiptap .selectedCell { background: var(--accent-soft); }
.prose-doc .tiptap .tableWrapper { overflow-x: auto; }
.prose-doc .tiptap p.is-empty::before { content: attr(data-placeholder); float: left; height: 0; color: var(--faint); pointer-events: none; }
.slash-menu { position: absolute; z-index: 60; width: 280px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,20,19,.12); padding: 6px; display: flex; flex-direction: column; }
.slash-menu[hidden] { display: none; }
.slash-head { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px; }
.slash-menu button { text-align: left; border: 0; background: transparent; border-radius: 8px; height: 38px; padding: 0 10px; font-size: 14px; cursor: pointer; }
.slash-menu button.is-active, .slash-menu button:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
  .docs-shell { margin: -24px -16px -48px; }
  .docs-aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .docs-main { padding: 24px 16px 48px; }
  .doc-title { font-size: 26px; }
}

/* Документи як у Notion */
[x-cloak] { display: none !important; }
.tree { display: flex; flex-direction: column; gap: 1px; }
.tree-children { padding-left: 14px; display: flex; flex-direction: column; gap: 1px; }
.tree-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding: 0 2px; min-height: 34px; }
.tree-row:hover { background: var(--hover); }
.tree-row.is-active { background: var(--accent-soft); }
.tree-row.is-active .tree-link { color: var(--accent); font-weight: 600; }
.tree-toggle { width: 22px; height: 22px; flex: none; border: 0; background: transparent; border-radius: 5px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tree-toggle:hover { background: var(--hover); }
.tree-toggle svg { transition: transform .15s; }
.tree-toggle.is-empty { cursor: default; }
.tree-toggle.is-empty:hover { background: transparent; }
.tree-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.tree-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-icon { flex: none; width: 20px; text-align: center; }
.tree-add { flex: none; width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; }
.tree-row:hover .tree-add, .tree-add:focus-visible { opacity: 1; }
.tree-add:hover { background: var(--hover); color: var(--text); }
@media (hover: none) { .tree-add { opacity: 1; } }
.docs-aside-foot { margin-top: auto; padding-top: 16px; }
.tree-trash { width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; gap: 8px; padding: 0 8px; }
.tree-trash .count { margin-left: auto; font-size: 12px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; border-radius: 6px; padding: 2px 4px; }
.crumbs a:hover { background: var(--surface-2); color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-updated { white-space: nowrap; }
.menu-wrap { position: relative; }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,20,19,.12); padding: 6px; display: flex; flex-direction: column; }
.dropdown button { text-align: left; border: 0; background: transparent; border-radius: 8px; height: 38px; padding: 0 10px; font-size: 14px; cursor: pointer; }
.dropdown button:hover { background: var(--surface-2); }
.dropdown .is-danger, .slash-menu .is-danger { color: var(--danger); }
.doc-cover { position: relative; height: 180px; margin: -36px -48px 0; }
.doc-cover-tools { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.doc-cover:hover .doc-cover-tools, .doc-cover:focus-within .doc-cover-tools { opacity: 1; }
@media (hover: none) { .doc-cover-tools { opacity: 1; } }
.cover-blue { background: linear-gradient(120deg, #1F4FBF, #6F95E8); }
.cover-green { background: linear-gradient(120deg, #1C6B4F, #7CC3A0); }
.cover-orange { background: linear-gradient(120deg, #C26A00, #F2B661); }
.cover-purple { background: linear-gradient(120deg, #6B3399, #B88BE0); }
.cover-pink { background: linear-gradient(120deg, #9A2C5A, #E59BBB); }
.cover-gray { background: linear-gradient(120deg, #4A4C52, #B9B5AA); }
.picker { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,20,19,.12); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.cover-picker { right: 16px; bottom: 56px; flex-direction: row; }
.cover-swatch { width: 44px; height: 30px; border-radius: 6px; border: 0; cursor: pointer; }
.doc.has-cover .doc-head { margin-top: -46px; }
.doc-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.doc-icon { font-size: 64px; line-height: 1; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 10px; }
.doc-icon:hover { background: var(--surface-2); }
.doc-head-tools { display: flex; gap: 4px; min-height: 30px; opacity: 0; transition: opacity .15s; }
.doc:hover .doc-head-tools, .doc-head-tools:focus-within { opacity: 1; }
@media (hover: none) { .doc-head-tools { opacity: 1; } }
.ghost-tool { border: 0; background: transparent; color: var(--muted); font-size: 14px; border-radius: 6px; height: 30px; padding: 0 8px; cursor: pointer; }
.ghost-tool:hover { background: var(--surface-2); color: var(--text); }
.emoji-picker { top: 100%; left: 0; width: 320px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { font-size: 22px; height: 36px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.emoji-grid button:hover { background: var(--surface-2); }
.doc-editor { position: relative; }
.prose-doc { padding: 4px 2px 40px; }
.bubble { display: flex; align-items: center; gap: 2px; padding: 4px; background: #232321; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,20,19,.25); }
.bubble button { height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #E9E7E1; font-size: 13px; cursor: pointer; }
.bubble button:hover { background: rgba(255,255,255,.12); color: #fff; }
.bubble button.is-active { background: rgba(255,255,255,.2); color: #fff; }
.bubble mark { background: #FCE38A; color: #1C1D1F; padding: 0 3px; border-radius: 3px; }
.bubble .sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); margin: 0 3px; }
.table-tools { position: sticky; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 12px rgba(20,20,19,.08); }
.table-tools[hidden] { display: none; }
.table-tools button { height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; color: var(--text-2); cursor: pointer; }
.table-tools button:hover { background: var(--surface-2); }
.doc-status { position: fixed; right: 16px; bottom: 12px; z-index: 20; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.doc-status:empty { display: none; }
.drag-handle, .block-plus { position: fixed; z-index: 15; width: 22px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--faint-2); cursor: grab; transition: opacity .12s; }
.drag-handle { background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px); background-size: 7px 7px; background-position: center; background-repeat: space; background-origin: content-box; padding: 5px 4px; }
.drag-handle:hover, .block-plus:hover { background-color: var(--hover); color: var(--muted); }
.block-plus { border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.drag-handle.hide, .block-plus.hide { opacity: 0; pointer-events: none; }
.prose-doc .tiptap.dragging .ProseMirror-selectednode { outline: 2px solid var(--accent-soft); border-radius: 6px; }
.prose-doc .tiptap .ProseMirror-selectednode { outline: 2px solid var(--accent-line); border-radius: 6px; }
.prose-doc .tiptap mark { color: #1C1D1F; background: #FCE38A; border-radius: 3px; padding: 0 2px; }
.prose-doc .tiptap pre { background: var(--surface-3); border-radius: 8px; padding: 12px 14px; font-size: 14px; overflow-x: auto; }
.prose-doc .tiptap pre code { background: none; padding: 0; }
.prose-doc .tiptap div[data-type="callout"] { display: flex; flex-direction: column; gap: .5em; background: var(--warn-bg); border-radius: 10px; padding: 14px 16px 14px 46px; color: var(--warn-text); position: relative; }
.prose-doc .tiptap div[data-type="callout"]::before { content: "⚠"; position: absolute; left: 16px; top: 12px; color: var(--orange-text); font-size: 18px; }
.prose-doc .tiptap h2.is-empty::before, .prose-doc .tiptap h3.is-empty::before { content: attr(data-placeholder); float: left; height: 0; color: var(--line-hover); pointer-events: none; }
.page-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.page-link:hover { background: var(--surface-2); }
.page-link.is-missing { color: var(--faint); text-decoration: line-through; }
.subpages { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.slash-menu button { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slash-menu small { color: var(--muted); font-size: 12px; }
.slash-sep { height: 1px; background: var(--line-soft); margin: 4px 0; }
.block-menu { width: 240px; max-height: 70vh; overflow-y: auto; }
.trash-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.trash-row .t { flex: 1; min-width: 160px; }
.trash-row .meta { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .doc-cover { margin: -24px -16px 0; height: 120px; }
  .drag-handle, .block-plus { display: none; }
}

/* Дашборд. Кольори статусів перевірені валідатором палітри; сірий «Треба зробити» — свідомо нейтральний,
   тому всі сегменти мають підписи (легенда з числами) і проміжки 2px */
.dash { max-width: 1040px; container-type: inline-size; }
.dash { --viz-todo: #85878D; --viz-doing: #1F4FBF; --viz-waiting: #C26A00; --viz-done: #1E8A5C; }
.viz-todo { background: var(--viz-todo); }
.viz-doing { background: var(--viz-doing); }
.viz-waiting { background: var(--viz-waiting); }
.viz-done { background: var(--viz-done); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-hint { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.kpi.is-warn .kpi-hint { color: var(--danger); font-weight: 600; }
.dash-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.dash-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.dash-sub { font-size: 13px; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-grid > .dash-card { container-type: inline-size; }
.stack-bar { display: flex; gap: 2px; height: 12px; min-width: 6px; }
.stack-bar.is-lg { height: 16px; }
.stack-bar .seg { min-width: 4px; border-radius: 2px; transition: opacity .12s; }
.stack-bar .seg:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.stack-bar .seg:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.stack-bar:hover .seg { opacity: .55; }
.stack-bar .seg:hover { opacity: 1; }
.viz-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--text-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.viz-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.viz-legend .muted { color: var(--muted); font-size: 13px; }
.viz-legend.is-small { font-size: 13px; gap: 6px 14px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.workload { display: flex; flex-direction: column; }
.wl-row { display: grid; grid-template-columns: minmax(110px, 160px) minmax(60px, 1fr) 72px; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.wl-name { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-bar { display: flex; min-width: 0; }
.wl-num { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.late { color: var(--danger); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 170px; align-items: end; border-bottom: 1px solid var(--line-strong); padding-bottom: 0; }
.col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; padding-bottom: 22px; cursor: default; }
.col-bar { width: 100%; max-width: 36px; min-height: 2px; background: #9DB4EA; border-radius: 4px 4px 0 0; }
.col.is-current .col-bar { background: var(--viz-doing); }
.col:hover .col-bar { background: var(--viz-doing); }
.col-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 16px; }
.col-label { position: absolute; bottom: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.health-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-goal, .dash-late { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.dash-goal .t, .dash-late .t { flex: 1 1 220px; min-width: 0; color: inherit; text-decoration: none; font-size: 15px; }
.dash-goal .t:hover, .dash-late:hover .t { color: var(--accent); }
.dash-goal .progress { flex: 0 0 140px; height: 8px; }
.dg-count { font-size: 13px; color: var(--muted); width: 54px; font-variant-numeric: tabular-nums; }
.dash-goal .pill { width: 124px; justify-content: center; }
.dash-late .late { width: 64px; text-align: right; font-size: 13px; }
@container (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-goal .progress { flex: 1 1 100%; order: 5; }
}
@container (max-width: 340px) {
  .wl-row { grid-template-columns: 1fr 64px; }
  .wl-bar { grid-column: 1 / -1; order: 3; }
}

/* Фільтри задач */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters .spacer { flex: 1; }
.filter-search { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); flex: 0 1 220px; min-width: 150px; }
.filter-search:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.filter-search input { border: 0; outline: none; background: transparent; font-size: 14px; flex: 1; min-width: 0; color: var(--text); }
.filter-select { height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 0 8px; font-size: 14px; color: var(--text-2); cursor: pointer; max-width: 200px; }
.filter-select.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.filter-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); cursor: pointer; height: 36px; padding: 0 4px; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.filter-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.filter-count { font-size: 13px; color: var(--muted); }

/* ── Мобільна версія ─────────────────────────────────────────── */
.mobile-bar, .mobile-tabs, .drawer-backdrop, .drawer-close { display: none; }
body.no-scroll { overflow: hidden; }
@media (max-width: 900px) {
  .shell { display: block; min-height: 100vh; }
  .mobile-bar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .mobile-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-icon { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; flex: none; }
  .mobile-icon:active { background: var(--surface-2); }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: 290px; max-width: 86vw; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-102%); transition: transform .22s ease; border-right: 0;
  }
  .sidebar.is-open { transform: none; box-shadow: 12px 0 40px rgba(20,20,19,.18); }
  .sidebar .brand { display: flex; align-items: center; justify-content: space-between; padding: 0 0 12px 12px; }
  .drawer-close { display: inline-flex; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(20,20,19,.35); }
  .nav-link { padding: 12px; }
  .content { padding: 20px 16px calc(92px + env(safe-area-inset-bottom)); }
  .mobile-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 4px 4px env(safe-area-inset-bottom); background: var(--glass);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  }
  .mobile-tabs a, .mobile-tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; border: 0; background: transparent; color: var(--muted); text-decoration: none;
    font-size: 11px; font-weight: 500; cursor: pointer; border-radius: 10px;
  }
  .mobile-tabs .is-active { color: var(--accent); font-weight: 600; }
  .tab-icon { position: relative; display: inline-flex; }
  .tab-badge { position: absolute; top: -5px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
  .doc-status { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  .content { overflow-x: clip; }
  h1.title { font-size: 26px; }
  .page { gap: 22px; }
  .page-head { gap: 12px; }
  /* Рядки задач: назва на всю ширину, мітки й статус — другим рядком */
  .task-row { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
  .task-row .t { flex: 1 1 calc(100% - 34px); font-size: 15px; }
  .task-row > .pill, .task-row > .tag { margin-left: 32px; }
  .task-row .meta { width: auto; margin-left: auto; }
  .status-select { height: 34px; }
  .quick-add { padding: 4px 4px 4px 12px; }
  .quick-add input { font-size: 16px; }
  .quick-add .btn { height: 40px; padding: 0 14px; }
}
.fab-plus { font-size: 18px; line-height: 1; }
.filter-toggle { display: none; }
@media (max-width: 900px) {
  /* Плаваюча кнопка «+» над нижньою панеллю */
  .fab { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 35; width: 56px; height: 56px; padding: 0; border-radius: 18px; box-shadow: 0 8px 20px rgba(31,79,191,.35); }
  .fab .fab-text { display: none; }
  .fab .fab-plus { font-size: 28px; font-weight: 500; }
  /* Перемикач режимів — один рядок */
  .page-head > div:last-child:not(:first-child) { width: 100%; }
  .segmented { flex-wrap: nowrap; width: 100%; }
  .segmented button { flex: 1; padding: 0 6px; }
  /* Фільтри: на телефоні — пошук + кнопка «Фільтри», решта розгортається */
  .filters { gap: 8px; }
  .filter-search { flex: 1 1 auto; height: 40px; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--text-2); cursor: pointer; }
  .filter-toggle.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .filters > .filter-select, .filters > .filter-check, .filters > .filter-sort, .filters > .spacer { display: none; }
  .filters.is-open > .filter-select, .filters.is-open > .filter-sort { display: inline-flex; flex: 1 1 calc(50% - 4px); max-width: none; height: 40px; }
  .filters.is-open > .filter-sort select { flex: 1; }
  .filters.is-open > .filter-check { display: inline-flex; }
  /* Дошка: колонки на майже всю ширину, гортаються по одній */
  .board-scroll { margin: 0 -16px; padding: 0 16px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .column { width: min(84vw, 320px); scroll-snap-align: start; }
  .list-row { padding: 12px 14px; gap: 8px 10px; }
  .list-row .t { min-width: 0; flex: 1 1 calc(100% - 34px); }
}
@media (max-width: 640px) {
  /* Модалки — на весь екран, як аркуш */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal { max-width: none; min-height: 100%; border-radius: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); gap: 14px; box-shadow: none; }
  .modal.modal-split { display: flex; flex-direction: column; gap: 0; }
  .modal-head { position: sticky; top: 0; z-index: 5; background: var(--surface); margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 8px 10px 16px; border-bottom: 1px solid var(--line-soft); }
  .modal-head h2 { font-size: 18px; }
  .modal-split .modal-close { position: static; }
  .modal-split .chat-title { padding-right: 0; }
  .modal-main { padding-top: 14px; gap: 14px; }
  .modal-foot { position: sticky; bottom: 0; z-index: 5; background: var(--surface); margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
  .modal-foot .btn { flex: 1; }
  .modal-foot .spacer { display: none; }
  .chat { padding-top: 16px; padding-bottom: 8px; }
  .chat-feed { max-height: none; }
  .input, select.input, textarea.input, .filter-select, .filter-search input { font-size: 16px; }
  .grid-2 { gap: 14px; }
}
@media (max-width: 640px) {
  .modal-backdrop { display: block; background: var(--surface); }
  .modal { min-height: 100%; height: auto; }
}
.cal-agenda { display: none; }
@media (max-width: 640px) {
  .cal-scroll { display: none; }
  .cal-agenda { display: flex; flex-direction: column; gap: 8px; }
  .cal-toolbar { gap: 8px; }
  .cal-toolbar h2 { min-width: 0; flex: 1; font-size: 18px; }
  .cal-toolbar > span:last-child { flex-basis: 100%; }
  .agenda-day { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .agenda-day.is-today { border-color: var(--accent); }
  .agenda-date { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 12px; text-transform: capitalize; }
  .agenda-date b { font-size: 20px; color: var(--text); }
  .agenda-day.is-today .agenda-date b { color: var(--on-accent); background: var(--accent); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
  .agenda-tasks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .agenda-task { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; padding: 8px 4px; border-radius: 8px; font-size: 15px; cursor: pointer; }
  .agenda-task:active { background: var(--surface-2); }
  .agenda-task span:last-child { min-width: 0; }
  .goal-card { padding: 16px; gap: 14px; }
  .goal-title h2 { font-size: 17px; }
  .goal-progress { gap: 10px; }
  .goal-count { font-size: 14px; }
}
@media (max-width: 640px) {
  .desktop-only { display: none; }
  .cal-toolbar h2 { white-space: nowrap; font-size: 17px; }
  .page-head > div:last-child:not(:first-child) > .btn { flex: 1; }
}

.docs-tree-toggle { display: none; }
@media (max-width: 900px) {
  .docs-shell { margin: -20px -16px 0; min-height: 0; }
  .docs-aside { flex-basis: 100%; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); gap: 2px; }
  .docs-aside-head { padding: 0; }
  .docs-aside-name { display: none; }
  .docs-tree-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; border: 0; background: transparent; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; padding: 0 4px; }
  .docs-tree-toggle svg { transition: transform .15s; }
  .docs-aside:not(.is-open) > :not(.docs-aside-head) { display: none; }
  .docs-aside.is-open > .input { margin-top: 6px; }
  .docs-aside-foot { padding-top: 8px; }
  .docs-main { padding: 20px 16px 40px; }
  .doc-cover { margin: -20px -16px 0; height: 120px; }
  .doc-title { font-size: 28px; }
  .doc-meta { gap: 6px; }
  .doc-updated { display: none; }
  .doc-head-tools { opacity: 1; }
  .tree-add { opacity: 1; }
  .tree-row { min-height: 40px; }
  .emoji-picker { width: min(320px, calc(100vw - 32px)); }
}

/* Цілі: компактна картка, що розгортається */
.goal-card:not(.goal-ghost) { padding: 0; gap: 0; overflow: hidden; }
.goal-card + .goal-card { margin-top: -16px; }
.goal-row { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.goal-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 16px 8px 16px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.goal-toggle:hover .goal-name { color: var(--accent); }
.goal-chevron { flex: none; color: var(--muted); transition: transform .15s; }
.goal-card.is-open .goal-chevron { transform: rotate(90deg); }
.goal-card:not(.goal-ghost) .goal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.goal-name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.goal-card:not(.goal-ghost) .goal-meta { font-size: 13px; gap: 6px; }
.goal-card:not(.goal-ghost) .goal-progress { flex: 0 0 180px; display: flex; align-items: center; gap: 10px; }
.goal-card:not(.goal-ghost) .goal-progress .progress { height: 8px; }
.goal-card:not(.goal-ghost) .goal-count { font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 44px; text-align: right; }
.goal-toggle .pill { flex: none; width: 118px; justify-content: center; }
.goal-edit { flex: none; width: 36px; height: 36px; }
.goal-body { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px 48px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.goal-desc { display: flex; flex-direction: column; gap: 6px; }
.goal-desc p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-height: 9.3em; overflow-y: auto; }
.goal-body .goal-tasks { border-top: 0; }
.goal-body .goal-task:first-child { border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) {
  .goal-card + .goal-card { margin-top: -10px; }
  .goal-toggle { flex-wrap: wrap; gap: 8px 10px; padding: 14px 4px 14px 12px; }
  .goal-card:not(.goal-ghost) .goal-title { flex: 1 1 calc(100% - 30px); }
  .goal-card:not(.goal-ghost) .goal-progress { flex: 1 1 auto; margin-left: 26px; }
  .goal-toggle .pill { width: auto; }
  .goal-body { padding: 12px 12px 14px; }
  .goal-row { align-items: flex-start; padding-top: 6px; }
}

/* Бази даних */
.base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.base-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; min-height: 120px; }
.base-card:hover { border-color: var(--line-hover); box-shadow: 0 2px 8px rgba(20,20,19,.06); }
.base-card.is-template { border-style: dashed; background: var(--surface-2); }
.base-card b { font-size: 16px; font-weight: 600; }
.base-icon { font-size: 26px; line-height: 1; }
.base-meta { font-size: 13px; color: var(--muted); line-height: 1.4; }
.base-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.table-scroll { overflow: auto; max-height: calc(100vh - 260px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.base-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 14px; }
.base-table th, .base-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.base-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-3); font-weight: 600; color: var(--muted); font-size: 13px; padding: 0; }
.base-table thead th button { width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 14px; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.base-table thead th button:hover { color: var(--text); }
.base-table .is-sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line-soft); }
.base-table thead .is-sticky { z-index: 3; background: var(--surface-3); }
.base-table tbody th { font-weight: 600; color: var(--text); }
.base-table tbody tr { cursor: pointer; }
.base-table tbody tr:hover td, .base-table tbody tr:hover th { background: var(--surface-2); }
.base-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cell-muted { color: var(--faint); }
.cell-link { color: var(--accent); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }
.cell-pills { display: inline-flex; gap: 4px; }
.cell-check { color: var(--green-text); font-weight: 700; }
.cell-user { display: inline-flex; align-items: center; gap: 6px; }
.cell-long { color: var(--text-2); }
.cell-warn { color: var(--orange-text); font-size: 13px; }
.cell-moodle { font-size: 13px; color: var(--text-2); }
.record-side { gap: 18px; }
.record-block { display: flex; flex-direction: column; gap: 10px; }
.record-block .dash-head h3 { margin: 0; }
.grades { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; }
.grade-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; font-size: 14px; }
.grade-row + .grade-row { border-top: 1px solid var(--line-soft); }
.grade-row .t { min-width: 0; overflow-wrap: anywhere; }
.grade-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.grade-row .progress { height: 6px; }
.grade-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.modal.modal-wide { max-width: 720px; }
.field-edit { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.field-edit-main { display: flex; align-items: center; gap: 8px; }
.field-edit-main .input { flex: 1; min-width: 0; }
.options-edit { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 2px solid var(--line-soft); }
.option-edit { display: flex; align-items: center; gap: 6px; }
.option-edit .input { flex: 1; height: 36px; }
.option-edit .filter-select { width: 52px; text-align: center; }
.field-add { display: flex; flex-wrap: wrap; gap: 8px; }
.field-add .input:first-child { flex: 1 1 220px; }
.field-add select { flex: 0 1 200px; width: auto; }
@media (max-width: 640px) {
  .table-scroll { max-height: none; margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .base-table th, .base-table td { max-width: 200px; }
  .field-edit-main .tag { display: none; }
}

/* Перетягування полів бази */
.drag-grip { flex: none; width: 28px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--faint-2); border-radius: 6px; cursor: grab; touch-action: none; padding: 0; }
.drag-grip:hover { background: var(--surface-2); color: var(--muted); }
.drag-grip:active { cursor: grabbing; }
.drag-grip.is-small { width: 22px; height: 32px; }
.field-list .field-edit { background: var(--surface); }
.field-list .sortable-chosen { box-shadow: 0 8px 24px rgba(20,20,19,.14); border-radius: 10px; position: relative; z-index: 2; }
.field-list .sortable-ghost { opacity: .35; }
.options-summary { display: flex; align-items: center; gap: 8px; margin-left: 36px; padding: 4px 6px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; color: var(--muted); font: inherit; font-size: 13px; }
.options-summary:hover { background: var(--surface-2); }
.options-summary .cell-pills { flex-wrap: wrap; flex: 1; min-width: 0; }
.options-summary svg { flex: none; transition: transform .15s; }
.options-edit-label { flex: none; color: var(--accent); font-weight: 600; }
.options-edit { margin-left: 36px; }
.option-list { display: flex; flex-direction: column; gap: 6px; }
.option-list .sortable-ghost { opacity: .35; }
@media (max-width: 640px) {
  .options-summary, .options-edit { margin-left: 0; }
  .options-edit-label { display: none; }
}
.record-side .record-block:first-child .dash-head { padding-right: 44px; }
.grade-link { color: inherit; text-decoration: none; }
.grade-link:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) { .record-side .record-block:first-child .dash-head { padding-right: 0; } }

/* Оплати */
.base-table .th-plain { display: block; padding: 10px 14px; white-space: nowrap; }
.base-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.base-table thead .is-num .th-plain { text-align: right; }
.base-table .is-debt { color: var(--red-text); font-weight: 600; }
.record-tabs { width: 100%; flex-wrap: nowrap; }
.record-tabs button { flex: 1; }
.pay-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pay-summary > div { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pay-summary span { font-size: 12px; color: var(--muted); }
.pay-summary b { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-summary .is-debt b { color: var(--red-text); }
.pay-bar { display: flex; align-items: center; gap: 10px; }
.pay-bar .progress { height: 8px; }
.pay-bar .progress span { background: #1E8A5C; }
.pay-form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pay-list { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; }
.pay-row { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.pay-row + .pay-row { border-top: 1px solid var(--line-soft); }
.pay-main { display: flex; align-items: baseline; gap: 10px; }
.pay-amount { font-size: 16px; font-variant-numeric: tabular-nums; }
.pay-date { color: var(--muted); font-size: 13px; }
.pay-main .msg-del { margin-left: auto; }
.pay-meta { color: var(--text-2); font-size: 13px; }
.pay-who { color: var(--faint); font-size: 12px; }
.pay-row.is-reversed .pay-amount, .pay-row.is-reversed .pay-meta { text-decoration: line-through; color: var(--faint); }
.pay-reversed { color: var(--orange-text); }
.modal-split .record-tabs { width: calc(100% - 44px); }
@media (max-width: 640px) { .modal-split .record-tabs { width: 100%; } }

/* Доступ для AI */
.token-new { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-color: var(--success-line); background: var(--success-bg); }
.token-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.token-copy code, .token-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.token-copy code { flex: 1; min-width: 0; }

/* Вибір кольору варіанта */
.color-pick { position: relative; flex: none; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
.color-pick > .color-dot { width: 30px; height: 30px; margin: 0 4px; }
.color-dot:hover { box-shadow: 0 0 0 2px var(--accent); }
.color-dot.is-on { box-shadow: 0 0 0 2px var(--text); }
.color-palette { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(7, 26px); gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,20,19,.14); }
.swatch-blue { background: #1F4FBF; }
.swatch-green { background: #1C6B4F; }
.swatch-orange { background: #C26A00; }
.swatch-purple { background: #6B3399; }
.swatch-pink { background: #9A2C5A; }
.swatch-gray { background: #85878D; }
.swatch-red { background: #B3261E; }

/* Бокове меню на комп'ютері — на висоту екрана, ім'я користувача завжди видно внизу */
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; align-self: flex-start; }
}

/* Зустрічі */
.meeting-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.meeting-format { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.meeting-format:hover { border-color: var(--line-hover); box-shadow: 0 2px 8px rgba(20,20,19,.06); }
.meeting-format.is-recommended { border: 2px solid var(--accent); padding: 17px; }
.meeting-format b { font-size: 16px; font-weight: 600; }
.meeting-format span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.meeting-format em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.meeting-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: inherit; text-decoration: none; }
.meeting-row:hover { background: var(--surface-2); }
.meeting-date { flex: none; width: 48px; height: 52px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.meeting-date b { font-size: 19px; }
.meeting-date span { font-size: 12px; font-weight: 600; text-transform: lowercase; }
.meeting-date.is-past { background: var(--chip); color: var(--muted); }
.meeting-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meeting-row-main .t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-row-main .meta { font-size: 13px; color: var(--muted); }
.avatar-lg { width: 36px; height: 36px; font-size: 13px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .3; } }
.agenda { display: flex; flex-direction: column; gap: 12px; }
.agenda-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.agenda-item.is-current { border: 2px solid var(--accent); padding: 13px 15px 15px 7px; }
.agenda-head { display: flex; align-items: center; gap: 8px; }
.agenda-num { width: 22px; flex: none; font-size: 14px; font-weight: 700; color: var(--accent); text-align: center; }
.agenda-head h3 { margin: 0; flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.agenda-min { font-size: 13px; color: var(--muted); white-space: nowrap; }
.agenda-body { padding-left: 66px; display: flex; flex-direction: column; gap: 10px; }
.agenda-notes { border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; margin-left: -10px; width: calc(100% + 10px); background: transparent; resize: none; font-size: 15px; line-height: 1.5; color: var(--text-2); overflow: hidden; }
.agenda-notes:hover { background: var(--surface-2); }
.agenda-notes:focus { outline: none; border-color: var(--line-strong); background: var(--surface); }
.agenda-item.is-current .agenda-notes { border-color: var(--line-strong); }
.agenda-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: 8px; padding: 6px 12px; border: 1px dashed var(--line-strong); }
.agenda-decision.is-filled { background: var(--accent-tint); border: 1px solid transparent; }
.agenda-decision label { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.agenda-decision input { flex: 1; min-width: 180px; border: 0; background: transparent; height: 32px; font-size: 15px; }
.agenda-decision input:focus { outline: none; }
.agenda-decision:focus-within { border-color: var(--accent); border-style: solid; }
.agenda-task { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.agenda-task .t { flex: 1; min-width: 0; }
.agenda-task .meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.agenda-task-link { font-size: 13px; font-weight: 600; color: var(--green-text); text-decoration: none; white-space: nowrap; }
.agenda-task-form { display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.agenda-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-add { display: flex; gap: 8px; }
.agenda-add .input:first-of-type { flex: 1; }
.agenda-add .agenda-add-min { width: 80px; flex: none; }
.meeting-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); }
.meeting-foot .hint { flex: 1; min-width: 220px; }
.btn-dark { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-fg); }
.btn-dark:hover { background: var(--inverse-hover); border-color: var(--inverse-hover); }
@media (max-width: 640px) {
  .agenda-item { padding: 12px 12px 14px 4px; }
  .agenda-item.is-current { padding: 11px 11px 13px 3px; }
  .agenda-body { padding-left: 8px; }
  .agenda-head { flex-wrap: wrap; }
  .agenda-task { flex-wrap: wrap; }
  .agenda-task .t { flex-basis: calc(100% - 30px); }
  .meeting-row .avatars { display: none; }
  .agenda-add .agenda-add-min { width: 64px; }
  .meeting-foot .btn { width: 100%; }
}
.agenda-hint { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.agenda-list { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 8px; }
.agenda-list > * + * { border-top: 1px solid var(--line-soft); }
.agenda-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: inherit; text-decoration: none; }
a.agenda-row:hover { background: var(--surface-2); }
.agenda-row .t { flex: 1; min-width: 0; font-size: 15px; }
.agenda-row .meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rating .label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.rating-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; cursor: pointer; }
.rating-btn:hover { border-color: var(--accent); color: var(--accent); }
.rating-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 640px) { .rating-btn { width: 30px; height: 36px; } .agenda-row { flex-wrap: wrap; } }
.columns-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; max-height: 55vh; overflow-y: auto; }
.columns-list .filter-check { height: auto; min-height: 36px; }
.pay-funding { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-meta .pill { font-size: 12px; padding: 2px 8px; margin-right: 4px; }
.year-ledger { display: flex; flex-direction: column; gap: 8px; }
.year-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.year-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.year-main .spacer { flex: 1; }
.year-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.year-nums b { color: var(--text); font-weight: 600; }
.year-nums .is-debt b { color: var(--danger); }

/* Вкладка «Оплати»: роки з оплатами всередині */
.pay-tab { gap: 12px; }
.pay-total { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; }
.pay-total-line, .year-amounts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.pay-total-line b, .year-amounts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-total-line .is-debt b, .year-amounts .is-debt b { color: var(--danger); }
.pay-total-line .pill { margin-left: auto; }
.pay-progress { height: 6px; flex: none; display: block; }
.pay-progress span { background: #1E8A5C; }
.pay-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.year-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.year-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.year-head h4 { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.year-edit { margin-left: auto; height: 30px; padding: 0 10px; }
.year-note { margin: 0; font-size: 13px; color: var(--text-2); background: var(--note-bg); border-radius: 8px; padding: 6px 10px; }
.year-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.year-card .pay-list { border-radius: 8px; }
.pay-row { padding: 0; }
button.pay-main { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; border-radius: 8px; }
button.pay-main:hover { background: var(--surface-2); }
.pay-main .pill { font-size: 12px; padding: 2px 8px; }
.pay-chevron { margin-left: auto; color: var(--faint); font-size: 18px; line-height: 1; transition: transform .15s; }
.pay-chevron.is-open { transform: rotate(90deg); }
.pay-details { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.pay-reverse { align-self: flex-start; color: var(--danger); font-size: 13px; }
.pay-toggle-reversed { border: 0; background: transparent; padding: 8px 10px; text-align: left; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.pay-form-more { display: flex; flex-direction: column; gap: 12px; }
.pay-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-form-head .icon-btn { width: 32px; height: 32px; }
.pay-year-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.pay-year-box legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tariff-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tariff-tools select { width: 120px; flex: none; }
.tariff-tools input[type=search] { flex: 1; min-width: 160px; }
.tariff-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.tariff-row { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 4px 12px; padding: 6px 12px; }
.tariff-row + .tariff-row { border-top: 1px solid var(--line-soft); }
.tariff-row label { font-size: 15px; }
.tariff-row .input { height: 38px; text-align: right; }
.tariff-row .error { grid-column: 1 / -1; }
.moodle-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.moodle-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-note textarea { resize: none; min-height: 44px; font-size: 14px; line-height: 1.45; background: var(--note-bg); border-color: var(--note-line); }
.pay-note textarea:focus { background: var(--surface); }
.field-edit.is-sys { background: var(--surface-2); }
.field-sys-name { flex: 1; min-width: 0; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--text-2); height: 44px; display: flex; align-items: center; }

/* Фільтри бази: пошук + кнопка «Фільтри»; списки відкриваються кнопкою, застосовані видно завжди */
.filters.base-filters .filter-toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.filters.base-filters .filter-toggle:hover { border-color: var(--line-hover); }
.filters.base-filters .filter-toggle.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.filters.base-filters > .filter-select { display: none; }
.filters.base-filters > .filter-select.is-on,
.filters.base-filters.is-open > .filter-select { display: inline-flex; }
@media (max-width: 900px) {
  .filters.base-filters > .filter-select.is-on,
  .filters.base-filters.is-open > .filter-select { flex: 1 1 calc(50% - 4px); max-width: none; height: 40px; }
  .filters.base-filters .filter-toggle { height: 40px; }
}

/* Виклики */
.challenge-add { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px 6px 6px 16px; }
.challenge-add:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.challenge-add input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; padding: 10px 0; background: transparent; }
.challenge-add .btn { height: 44px; }
.challenge { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.challenge-main { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; font: inherit; }
.challenge-main h3 { margin: 0; font-size: 16px; font-weight: 600; }
.challenge-main:hover h3 { color: var(--accent); }
.challenge-main p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.challenge-meta { font-size: 13px; color: var(--muted); }
.challenge-on { text-decoration: none; }
.challenge-form { flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; }
.challenge-done { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 12px 16px; }
.challenge-done-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; font: inherit; }
.challenge-done-main .t { font-size: 15px; color: var(--text-2); }
.task-meeting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; }
.task-meeting .pill { text-decoration: none; }
.task-meeting .hint { font-size: 13px; }
.task-card-top { display: flex; align-items: flex-start; gap: 8px; }
.task-card-top h3 { flex: 1; min-width: 0; }
.task-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meet-btn { flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; border: 0; border-radius: 7px; background: transparent; color: var(--faint-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.task-card:hover .meet-btn, .meet-btn:focus-visible, .meet-btn.is-on { opacity: 1; }
.meet-btn:hover { background: var(--accent-soft); color: var(--accent); }
.meet-btn.is-on { background: var(--accent-soft); color: var(--accent); }
@media (hover: none) { .meet-btn { opacity: 1; } }

/* Вибір людей випадним списком */
.people-picker { position: relative; }
.people-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; height: auto; padding: 5px 36px 5px 6px; cursor: pointer; position: relative; }
.people-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.people-placeholder { color: var(--faint); padding-left: 6px; }
.people-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.people-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 2px 4px 2px 2px; }
.people-chip .avatar { width: 24px; height: 24px; font-size: 10px; }
.people-chip-x { border: 0; background: transparent; color: inherit; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; }
.people-chip-x:hover { background: var(--hover); }
.people-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,20,19,.16); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.people-menu .input { height: 38px; }
.people-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.people-option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.people-option:hover { background: var(--surface-2); }
.people-option input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.people-option .avatar { width: 26px; height: 26px; font-size: 10px; }
.ids-issues { display: flex; flex-direction: column; gap: 10px; }
.ids-issue { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.ids-issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ids-issue-title { flex: 1; min-width: 160px; font-size: 15px; font-weight: 700; }
.ids-issue-head .pill { text-decoration: none; font-size: 12px; padding: 2px 8px; }
.ids-issue-head .icon-btn { width: 30px; height: 30px; }
.ids-issue-num { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ids-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.ids-task-meta .pill { font-size: 12px; padding: 2px 8px; }
.ids-task-meta .is-late { color: var(--danger); font-weight: 600; }
.avatars-sm .avatar { border-width: 2px; }
.avatars-sm .avatar + .avatar { margin-left: -6px; }
.ids-people { display: inline-flex; align-items: center; gap: 6px; }
.agenda-row .avatars, .agenda-task .avatars { flex: none; }

/* Назви задач/викликів на сторінці зустрічі — посилання на картку */
.task-link { color: var(--text); text-decoration: none; }
.task-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.task-link.is-done-text { color: var(--faint); }

/* Швидкий перегляд на сторінці зустрічі */
.peek:not(.modal-split) { max-width: 600px; }
.peek .modal-main { gap: 14px; }
.peek .modal-head { gap: 6px; }
.peek-kind { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.peek-title { margin: 0; font-size: 22px; line-height: 1.3; }
.peek-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.peek-facts > div { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.peek-facts .label, .peek-block .label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.peek-facts .is-late { color: var(--danger); font-weight: 600; }
.peek-text { margin: 0; white-space: pre-line; font-size: 15px; line-height: 1.5; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.peek-block { display: flex; flex-direction: column; gap: 6px; }
.peek-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.peek-link { border: 0; background: transparent; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; text-align: left; cursor: pointer; font: inherit; }
.peek-link:hover { background: var(--surface-2); color: var(--accent); }
.peek-link > span:nth-child(2) { flex: 1; }
.peek-comment { font-size: 14px; border-left: 3px solid var(--line-strong); padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 2px; }
/* Рядок цілі на зустрічі — у стилі рядка задачі */
.goal-icon { flex: none; display: inline-flex; background: transparent !important; }
.goal-mini { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.goal-mini .progress { width: 56px; height: 6px; flex: none; }
.agenda-row .pill { font-size: 12px; padding: 2px 8px; }
@media (max-width: 640px) { .goal-mini .progress { display: none; } }


/* ── Темна тема: html[data-theme=dark] або системна (якщо не вибрано «Світла») ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #121211;
  --surface: #1B1B19;
  --surface-2: #222220;
  --surface-3: #262623;
  --surface-raised: #2C2C29;
  --column: #181816;
  --line: #2F2F2C;
  --line-soft: #272725;
  --line-strong: #3B3B37;
  --line-hover: #4A4A45;
  --text: #ECEBE6;
  --text-2: #D2D1CB;
  --muted: #A4A39C;
  --faint: #7F7E78;
  --faint-2: #5F5E59;
  --accent: #6F96F2;
  --accent-hover: #86A8F5;
  --accent-soft: #1E2A45;
  --accent-tint: #1B2233;
  --accent-line: #2E3D63;
  --on-accent: #0E1830;
  --danger: #F08A80;
  --chip: #2A2A27;
  --chip-strong: #262623;
  --track: #2F2F2C;
  --hover: rgba(255,255,255,.06);
  --glass: rgba(27,27,25,.92);
  --note-bg: #2A2416;
  --note-line: #43391F;
  --success-bg: #16302A;
  --success-line: #24493E;
  --warn-bg: #3A2C12;
  --warn-text: #F3D9A8;
  --green-text: #7FD0AC;
  --orange-text: #F2B866;
  --red-text: #F49A91;
  --inverse-bg: #ECEBE6;
  --inverse-fg: #121211;
  --inverse-hover: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
  --tone-gray-fg: #CFCEC8;   --tone-gray-bg: #2E2E2B;
  --tone-blue-fg: #9DB9F8;   --tone-blue-bg: #1F2B47;
  --tone-green-fg: #86D2B0;  --tone-green-bg: #173229;
  --tone-orange-fg: #F2BC72; --tone-orange-bg: #3A2B13;
  --manual-bg: #45290F; --manual-mark: #F0A35C;
  --pending-bg: #3A3212; --pending-mark: #E8C547;
  --online: #3DD68C;
  --open-bg: #172238; --open-mark: #5B7FC4;
  --tone-purple-fg: #CDA8F0; --tone-purple-bg: #2D2141;
  --tone-pink-fg: #F0A3C5;   --tone-pink-bg: #3B1C2A;
  --tone-red-fg: #F49A91;    --tone-red-bg: #3E1D1A;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121211;
  --surface: #1B1B19;
  --surface-2: #222220;
  --surface-3: #262623;
  --surface-raised: #2C2C29;
  --column: #181816;
  --line: #2F2F2C;
  --line-soft: #272725;
  --line-strong: #3B3B37;
  --line-hover: #4A4A45;
  --text: #ECEBE6;
  --text-2: #D2D1CB;
  --muted: #A4A39C;
  --faint: #7F7E78;
  --faint-2: #5F5E59;
  --accent: #6F96F2;
  --accent-hover: #86A8F5;
  --accent-soft: #1E2A45;
  --accent-tint: #1B2233;
  --accent-line: #2E3D63;
  --on-accent: #0E1830;
  --danger: #F08A80;
  --chip: #2A2A27;
  --chip-strong: #262623;
  --track: #2F2F2C;
  --hover: rgba(255,255,255,.06);
  --glass: rgba(27,27,25,.92);
  --note-bg: #2A2416;
  --note-line: #43391F;
  --success-bg: #16302A;
  --success-line: #24493E;
  --warn-bg: #3A2C12;
  --warn-text: #F3D9A8;
  --green-text: #7FD0AC;
  --orange-text: #F2B866;
  --red-text: #F49A91;
  --inverse-bg: #ECEBE6;
  --inverse-fg: #121211;
  --inverse-hover: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
  --tone-gray-fg: #CFCEC8;   --tone-gray-bg: #2E2E2B;
  --tone-blue-fg: #9DB9F8;   --tone-blue-bg: #1F2B47;
  --tone-green-fg: #86D2B0;  --tone-green-bg: #173229;
  --tone-orange-fg: #F2BC72; --tone-orange-bg: #3A2B13;
  --manual-bg: #45290F; --manual-mark: #F0A35C;
  --pending-bg: #3A3212; --pending-mark: #E8C547;
  --online: #3DD68C;
  --open-bg: #172238; --open-mark: #5B7FC4;
  --tone-purple-fg: #CDA8F0; --tone-purple-bg: #2D2141;
  --tone-pink-fg: #F0A3C5;   --tone-pink-bg: #3B1C2A;
  --tone-red-fg: #F49A91;    --tone-red-bg: #3E1D1A;
  color-scheme: dark;
}

/* ── Дизайн: деталі, що працюють в обох темах ── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.btn, .nav-link, .task-card, .base-card, .meeting-format, .meeting-row, .list-row, .input, .filter-select, .status-select,
.segmented button, .people-option, .agenda-row, .peek-link, .challenge, .goal-card, .pill, .tag {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .16s ease, transform .16s ease;
}
.input:hover:not(:focus), .filter-select:hover { border-color: var(--line-hover); }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: var(--shadow-sm); }
.card, .task-card, .goal-card, .challenge, .agenda-item, .year-card, .meeting-format { box-shadow: var(--shadow-sm); }
.task-card:hover, .base-card:hover, .meeting-format:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.task-card:active { transform: none; }

/* Бренд: знак-літера перед назвою */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; box-shadow: var(--shadow-sm); }
.nav-link.is-active svg { color: var(--accent); }

/* Вікна з'являються м'якше */
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop { animation: fade-in .14s ease-out; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal { animation: modal-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Смуги прокрутки в кольорах теми */
* { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Перемикач теми в підвалі меню */
.nav-link.theme-toggle { border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font: inherit; }

/* Темна тема: що треба підправити окремо */
:root[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.55); }
:root[data-theme="dark"] img { opacity: .92; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-backdrop { background: rgba(0,0,0,.55); }
}
.brand .drawer-close { margin-left: auto; }

/* Графіки дашборда — світліший синій на темному тлі */
:root[data-theme="dark"] .dash { --viz-doing: #5B85EE; --viz-todo: #8E8D87; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash { --viz-doing: #5B85EE; --viz-todo: #8E8D87; } }

/* Пошта */
.mail-block { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mail-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mail-account .t { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.mail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone-green-fg); flex: none; }
.mail-dot.is-bad { background: var(--danger); }
.mail-add { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.info-banner.mail-error { background: var(--tone-red-bg); border-color: transparent; align-items: center; }
.info-banner.mail-error span { flex: 1; color: var(--red-text); }
.mail-tab { gap: 12px; }
.mail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mail-bar select { flex: 1; min-width: 180px; height: 38px; }
.mail-acc-name { flex: 1; font-size: 13px; }
.mail-threads { display: flex; flex-direction: column; gap: 8px; }
.mail-thread { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mail-thread.is-open { border-color: var(--line-hover); }
.mail-thread-head { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; border-radius: 10px; }
.mail-thread-head:hover { background: var(--surface-2); }
.mail-dir { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.mail-dir.is-in { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.mail-dir.is-out { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.mail-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-thread-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snippet { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meta { flex: none; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.mail-meta .tag { padding: 1px 7px; font-size: 11px; }
.mail-messages { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
.mail-msg { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mail-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.mail-msg.is-out .mail-msg-head b { color: var(--accent); }
.mail-via { font-size: 12px; }
.mail-body { width: 100%; min-height: 80px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; }
.mail-body-text { white-space: pre-line; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.mail-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-files .tag { text-decoration: none; color: var(--text-2); }
.mail-compose { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.avatar.notice-mail { background: var(--tone-orange-bg); color: var(--tone-orange-fg); border-color: transparent; }

/* Журнал успішності */
.journal-scroll { max-height: calc(100vh - 230px); width: fit-content; max-width: 100%; }
.journal { border-collapse: separate; border-spacing: 0; font-size: 14px; width: max-content; }
.journal th, .journal td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.journal thead th { position: sticky; z-index: 2; background: var(--surface-3); color: var(--text-2); font-weight: 600; font-size: 12px; }
.journal thead tr:first-child th { top: 0; }
.journal thead tr:nth-child(2) th { top: 33px; }
.journal .j-block { height: 33px; padding: 0 6px; text-align: center; font-size: 13px; color: var(--text); white-space: nowrap; }
.journal .j-block span { display: block; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; }
.journal .j-sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.journal thead .j-sticky { z-index: 4; background: var(--surface-3); }
.journal .j-name { width: 290px; min-width: 290px; max-width: 290px; text-align: left; padding: 6px 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--line); }
.journal tbody .j-name { font-weight: 500; color: var(--text); }
.j-num { display: inline-block; width: 26px; color: var(--muted); font-size: 12px; }
.journal .j-course, .journal .j-sum, .journal .j-total { vertical-align: bottom; padding: 10px 4px 8px; width: 52px; min-width: 52px; max-width: 52px; }
.journal thead .j-name { vertical-align: bottom; padding-bottom: 10px; color: var(--muted); }
.j-vert { display: block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 180px; font-size: 12px; margin: 0 auto; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-kind { display: block; margin-top: 6px; text-align: center; font-size: 10px; font-weight: 500; color: var(--muted); line-height: 1.2; }
.journal .j-sum, .journal .j-total { text-align: center; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.journal thead .j-sum, .journal thead .j-total { background: var(--surface-3); }
.j-cell { padding: 0; width: 52px; }
.j-cell input { width: 52px; height: 32px; border: 0; background: transparent; text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--text); padding: 0; }
.j-cell input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface); }
.j-cell.is-low { background: var(--tone-red-bg); }
.j-cell.is-low input { color: var(--tone-red-fg); font-weight: 600; }
.j-cell.is-pass input { color: var(--text); }
.j-cell.is-moodle { background-image: radial-gradient(circle at calc(100% - 5px) 5px, var(--accent) 2.5px, transparent 3px); }
.j-cell.is-error { box-shadow: inset 0 0 0 2px var(--danger); }
.jdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.is-low-text { color: var(--red-text); font-weight: 600; }
.is-pass-text { color: var(--green-text); font-weight: 600; }
.journal .j-section th { text-align: left; padding: 10px 12px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); }
.journal .j-section td { background: var(--surface); }
.journal tbody tr:hover .j-cell, .journal tbody tr:hover .j-name { background-color: var(--surface-2); }
.journal tbody tr:hover .j-cell.is-low { background-color: var(--tone-red-bg); }
.journal-hint { margin-top: -10px; }
.j-struct-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.j-struct-head { display: flex; gap: 8px; align-items: center; }
.j-struct-head .input { flex: 1; font-weight: 600; }
.j-struct-course { display: grid; grid-template-columns: auto 1fr 70px 64px 90px 1fr auto; gap: 6px; align-items: center; }
.j-struct-course .input { height: 38px; }
.j-move { display: flex; }
.j-move .icon-btn { width: 26px; height: 30px; }
.j-c-err { grid-column: 2 / -1; }
@media (max-width: 760px) {
  .j-struct-course { grid-template-columns: auto 1fr 1fr; }
  .j-struct-course .j-c-title, .j-struct-course .j-c-moodle { grid-column: 2 / -1; }
}
.modal.j-struct-modal { max-width: 940px; }
.journal .j-name { display: table-cell; }
.j-student { display: inline-block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 500; }
.j-moodle { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 6px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.journal tbody tr:hover .j-moodle, .j-moodle:focus-visible { opacity: 1; }
@media (hover: none) { .j-moodle { opacity: 1; } }
/* Картка студента поверх сторінки */
.record-peek { max-width: 680px; }
.record-peek-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.record-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.record-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.record-facts dt { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.record-facts dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.note-add { display: flex; flex-direction: column; gap: 8px; }

/* Картка запису: вкладки не налазять на ✕ і рівно ділять ширину */
.record-tabs button { flex: 1 1 0; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.modal-split .record-tabs { width: calc(100% - 52px); }
@media (max-width: 640px) { .modal-split .record-tabs { width: 100%; } }

/* Оплати за роками: оплати всередині року — легкими рядками, без «картки в картці» */
.year-card { padding: 14px 16px; gap: 10px; background: var(--surface); }
.year-card .pay-list { border: 0; border-radius: 0; border-top: 1px solid var(--line-soft); margin: 2px -16px 0; }
.year-card .pay-row { padding: 0 6px; }
.year-card .pay-row + .pay-row { border-top: 1px solid var(--line-soft); }
.year-card button.pay-main { padding: 10px; border-radius: 0; }
.year-card .year-foot { border-top: 1px solid var(--line-soft); margin: 0 -16px -4px; padding: 10px 16px 0; }
.year-card .pay-list + .year-foot { border-top: 0; padding-top: 4px; }
.pay-tab { gap: 14px; }
.pay-total { padding: 14px 16px; }
/* Картка запису бази: ширша права частина (оплати, листування) */
@media (min-width: 901px) {
  .modal.modal-split.record-modal { max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .modal.modal-split.record-modal { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
}
@media (max-width: 640px) {
  .record-tabs button { flex: 1 1 auto; padding: 0 6px; font-size: 13px; }
}

/* Журнал: оцінки, виставлені вручну (помаранчеві), неперевірені (жовті), коментарі й оцінка з іншого курсу */
.jmanual { display: inline-block; width: 12px; height: 10px; border-radius: 3px; background: var(--manual-bg); box-shadow: inset 0 0 0 1px var(--manual-mark); vertical-align: middle; }
.j-cell { position: relative; }
/* Курс ще триває — уся колонка світло-синя (оцінки зі своїм кольором — поверх) */
.journal .j-course.is-open { background: var(--open-bg); }
.j-cell.is-open:not(.is-low), .journal tbody tr:hover .j-cell.is-open:not(.is-low) { background-color: var(--open-bg); }
.jlegend.is-open { background: var(--open-bg); box-shadow: inset 0 0 0 1px var(--open-mark); }
/* Колір клітинки: червоний (не набрано) важливіший; ручна з низьким балом — червона з помаранчевою смужкою */
.j-cell.is-manual:not(.is-low), .journal tbody tr:hover .j-cell.is-manual:not(.is-low) { background-color: var(--manual-bg); }
.j-cell.is-manual.is-low { box-shadow: inset 3px 0 0 var(--manual-mark); }
.journal .j-cell.is-pending, .journal tbody tr:hover .j-cell.is-pending { background-color: var(--pending-bg); }
.j-cell.is-other input { text-decoration: underline dotted; text-underline-offset: 3px; }
.jlegend { display: inline-block; width: 12px; height: 10px; border-radius: 3px; vertical-align: middle; }
.jlegend.is-low { background: var(--tone-red-bg); box-shadow: inset 0 0 0 1px var(--tone-red-fg); }
.jlegend.is-pending { background: var(--pending-bg); box-shadow: inset 0 0 0 1px var(--pending-mark); }
.jlegend.is-manual { background: var(--manual-bg); box-shadow: inset 0 0 0 1px var(--manual-mark); }
.j-swap-btn { position: absolute; left: 1px; bottom: 1px; width: 18px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text-2); font-size: 11px; line-height: 16px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.j-cell:hover .j-swap-btn, .j-cell:focus-within .j-swap-btn, .j-swap-btn:focus-visible { opacity: 1; }
@media (hover: none) { .j-cell.is-low .j-swap-btn, .j-cell.is-other .j-swap-btn { opacity: 1; } }
.j-swap { width: 340px; }
.j-swap > div { display: flex; flex-direction: column; gap: 8px; }
.j-swap .hint { margin: 0; }
.j-swap-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.j-swap-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; }
.j-swap-item + .j-swap-item { border-top: 1px solid var(--line-soft); }
.j-swap-item:hover { background: var(--hover); }
.j-swap-item.is-on { background: var(--chip); font-weight: 600; }
.j-swap-item b { flex: none; font-variant-numeric: tabular-nums; }
.j-cell.has-note::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 7px 7px 0 0; border-color: var(--manual-mark) transparent transparent transparent; pointer-events: none; }
.j-note-btn { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 10px; line-height: 16px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.j-cell:hover .j-note-btn, .j-cell:focus-within .j-note-btn, .j-note-btn:focus-visible { opacity: 1; }
@media (hover: none) { .j-cell.has-note .j-note-btn { opacity: 1; } }
.j-note { position: fixed; z-index: 60; width: 300px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.j-note form { display: flex; flex-direction: column; gap: 8px; }
.j-note-head { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-note textarea { resize: vertical; min-height: 72px; }
.j-note-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Профіль */
.profile-tabs { align-self: flex-start; }
.profile-tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.profile-tabs a.is-active { background: var(--surface-raised); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.profile-tabs a:not(.is-active):hover { background: var(--hover); }
.profile-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.profile-card .group-title { margin: 0; }
.profile-photo { display: flex; align-items: center; gap: 20px; }
.avatar.avatar-xl { width: 88px; height: 88px; font-size: 30px; border: 0; }
.profile-photo-actions { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-photo-actions b { font-size: 18px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.row-actions label.btn { cursor: pointer; }
.row-actions .is-busy { opacity: .6; pointer-events: none; }
.hint.small { font-size: 13px; }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; }
.profile-colors { border: 0; padding: 0; margin: 0; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; transition: box-shadow .12s; }
.color-dot:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.color-dot:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.color-row .avatar { margin-left: 8px; }
.profile-dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.profile-dep a { color: var(--text); font-weight: 600; text-decoration: none; }
.profile-dep a:hover { color: var(--accent); }
.sidebar-footer .who-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 8px; padding: 4px; margin: -4px; }
.sidebar-footer .who-link:hover { background: var(--hover); }
@media (max-width: 640px) {
  .profile-tabs { align-self: stretch; flex-wrap: nowrap; overflow-x: auto; }
  .profile-tabs a { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
  .profile-photo { gap: 14px; }
  .avatar.avatar-xl { width: 72px; height: 72px; font-size: 24px; }
  .profile-card { padding: 16px; }
}
.profile-card > .segmented { align-self: flex-start; flex-wrap: nowrap; }
.profile-card > .segmented button { white-space: nowrap; }
@media (max-width: 640px) {
  .profile-tabs a { padding: 0 8px; font-size: 13px; }
  .profile-card > .segmented { align-self: stretch; }
  .profile-card > .segmented button { flex: 1; padding: 0 8px; }
}

/* ДОВ: компактний перегляд */
.dov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.dov-role { font-weight: 600; color: var(--text); font-size: 15px; }
.dov-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.dov-meta-item::before { content: "·"; color: var(--faint); margin-right: 8px; }
.dov-meta-item b { font-weight: 600; color: var(--text); }
.dov-visions.is-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
.dov-visions.is-compact .vision { padding: 16px 20px; gap: 4px; }
.dov-visions.is-compact .vision + .vision { border-top: 0; border-left: 1px solid var(--line-soft); padding-top: 16px; }
.dov-visions.is-compact .vision p { font-size: 15px; line-height: 1.45; }
.dov-visions.is-compact .label-caps { font-size: 12px; cursor: help; }
.dov-visions.is-compact .small-link { font-size: 13px; }
.checkin-card { display: flex; flex-direction: column; overflow: hidden; }
.checkin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 16px 18px 12px; }
.checkin-head > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkin-head h2 { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.checkin-card.is-done .checkin-head .hint { color: var(--green-text); }
.week-strip-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 18px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }
.checkin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.checkin-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.checkin-card .resp { padding: 10px 18px; gap: 8px; }
.checkin-card .resp-title { font-size: 15px; }
.checkin-card .state-btn { height: 30px; padding: 0 11px; }
.checkin-card .resp-note { flex-direction: row; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.checkin-card .resp-note textarea { flex: 1 1 260px; min-height: 38px; height: 38px; padding: 8px 12px; field-sizing: content; max-height: 160px; }
.checkin-card .resp-note .btn { height: 38px; }
.checkin-card .resp-note .error { flex-basis: 100%; }
.checkin-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-2); font-size: 14px; color: var(--muted); }
.checkin-foot .btn:disabled { background: var(--line-hover); border-color: var(--line-hover); cursor: default; }
.dov-goal { padding: 10px 16px; }
.team-row { padding: 10px 16px; }
@media (max-width: 640px) {
  .dov-visions.is-compact { grid-template-columns: 1fr; }
  .dov-visions.is-compact .vision + .vision { border-left: 0; border-top: 1px solid var(--line-soft); }
  .checkin-card .resp-main { flex-wrap: wrap; }
  .checkin-card .resp-title { flex: 1 1 0; }
  .checkin-card .state-group { flex-basis: 100%; }
  .dov-meta { gap: 4px 10px; }
  .dov-meta-item::before { display: none; }
  .checkin-card .state-btn { flex: 1; }
  .checkin-card .resp-note { margin-left: 0; }
}
.team-missing { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.team-missing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; }
.team-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--chip); color: var(--text); text-decoration: none; font-size: 13px; }
.team-chip:hover { background: var(--hover); color: var(--accent); }

/* Оплати з QuickBooks (картка запису) і сторінка підключення */
.qb-tab { display: flex; flex-direction: column; gap: 14px; }
.qb-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 14px; color: var(--text-2); }
.qb-empty b { color: var(--text); font-size: 15px; }
.qb-customers { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.qb-customers .small-link { font-size: 13px; }
.qb-section { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.qb-section h4 { margin: 0; padding: 10px 14px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--line-soft); display: flex; gap: 6px; align-items: baseline; }
.qb-section > .hint { padding: 12px 14px; }
.qb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; }
.qb-row + .qb-row { border-top: 1px solid var(--line-soft); }
.qb-row:hover { background: var(--surface-2); }
.qb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.qb-main .cell-muted { font-size: 13px; }
.qb-desc { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.qb-amount .pill { font-size: 12px; }
.qb-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qb-status { display: flex; align-items: flex-start; gap: 12px; }
.qb-status .t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.qb-status .mail-dot { margin-top: 6px; }
.qb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qb-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.qb-stats b { font-size: 22px; font-variant-numeric: tabular-nums; }
.qb-stats span { font-size: 13px; color: var(--muted); }
.qb-unmatched { display: flex; flex-direction: column; }
.qb-unmatched-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; font-size: 14px; }
.qb-unmatched-row:hover { color: var(--accent); }
@media (max-width: 640px) {
  .qb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-unmatched-row { flex-direction: column; gap: 2px; }
}
/* Профіль → Сповіщення (Telegram) */
.tg-status { display: flex; align-items: flex-start; gap: 12px; }
.tg-status .mail-dot { margin-top: 6px; }
.tg-status .t { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.tg-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
.tg-kinds { display: flex; flex-direction: column; gap: 10px; }
/* Нарада: стан автозбереження біля «Порядок денний» */
.save-state { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }

/* @згадки: підказка людей і підсвічування в тексті */
.mention-wrap { position: relative; }
.chat-input .mention-wrap { flex: 1; min-width: 0; display: flex; }
.chat-input .mention-wrap textarea { flex: 1; }
.mention-list { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 70; min-width: 240px; max-width: 360px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
.mention-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.mention-list li.is-active { background: var(--accent-soft); color: var(--accent); }
.mention { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.msg.is-mine .mention { background: transparent; }
/* Цілі: стрілка — розгорнути кроки, назва — відкрити картку цілі */
.goal-toggle { cursor: default; }
.goal-toggle:hover .goal-name { color: inherit; }
.goal-chevron-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px -6px -10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.goal-chevron-btn:hover { background: var(--hover); color: var(--text); }
.goal-chevron-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.goal-name { align-self: flex-start; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; }
button.goal-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.goal-row { padding-right: 14px; }
button.goal-name:focus:not(:focus-visible) { outline: none; }
/* Вхід: «або» й кнопка Google */
.auth-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; text-decoration: none; }
.btn-google:hover { background: var(--hover); }
/* Профіль → Календар */
.cal-howto { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.cal-warn { color: var(--tone-orange-fg); }

/* Дашборд бази: смуги розподілу */
.base-dash { max-width: 1180px; }
.kpi-link { color: inherit; text-decoration: none; transition: border-color .12s; }
.kpi-link:hover { border-color: var(--accent); }
.kpi-value.kpi-money { font-size: 26px; }
.dbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dbar { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; }
a.dbar:hover { background: var(--hover); }
a.dbar:hover .dbar-label { color: var(--accent); }
.dbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbar-track { height: 10px; background: var(--chip); border-radius: 999px; overflow: hidden; }
.dbar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dbar-num { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 72px; text-align: right; }
.tone-bar-green { background: var(--tone-green-fg); }
.tone-bar-orange { background: var(--tone-orange-fg); }
.tone-bar-red { background: var(--tone-red-fg); }
.tone-bar-gray { background: var(--faint); }
.tone-bar-blue { background: var(--tone-blue-fg); }
.tone-bar-purple { background: var(--tone-purple-fg); }
.tone-bar-pink { background: var(--tone-pink-fg); }
@media (max-width: 640px) {
  .dbar { grid-template-columns: minmax(0, 1fr) auto; }
  .dbar-track { grid-column: 1 / -1; grid-row: 2; }
}
/* ДОВ: звірка цілей і підсумок під ними */
.dov-goal-check { padding: 4px 0 10px; gap: 6px; }
.dov-goal-check .dov-goal { padding-bottom: 2px; }
.goal-check-row { padding: 0 16px; justify-content: space-between; }
.dov-goal-check .resp-note { margin: 0 16px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.dov-goal-check .resp-note textarea { flex: 1 1 260px; min-height: 38px; height: 38px; padding: 8px 12px; field-sizing: content; max-height: 160px; }
.dov-goal-check .resp-note .btn { height: 38px; }
.checkin-foot-card { border-radius: var(--radius); }
.checkin-foot-card.is-done { background: var(--success-bg); }
.checkin-foot-card b { color: var(--text); }
@media (max-width: 640px) {
  .goal-check-row .state-group { flex-basis: 100%; }
  .goal-check-row .state-btn { flex: 1; }
}
.base-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* Доступ до бази */
.record-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.record-fields:disabled .input { background: var(--surface-2); color: var(--text); opacity: 1; cursor: default; }
.access-list { display: flex; flex-direction: column; }
.access-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.access-row .t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-row .access-level { width: auto; height: 36px; }
.access-add { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.access-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.access-add-row select { flex: 1 1 160px; width: auto; }
.field-type-switch { width: auto; height: 34px; padding: 0 8px; font-size: 13px; flex: none; }
.field-convert-hint { margin: 0 0 8px 42px; color: var(--tone-orange-fg); }
.access-scope { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.access-row .t { white-space: normal; }
.access-programs { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.access-choices { max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.access-choice { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; font-size: 14px; border-radius: 6px; cursor: pointer; }
.access-choice:hover { background: var(--hover); }
.access-choice input { margin-top: 3px; flex: none; }
/* Бази: вхід через групи (картки груп, пошук людини) і вкладки групи / усієї бази */
.base-tabs { display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; background: var(--chip-strong); border-radius: 10px; }
.base-tabs a { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.base-tabs a:hover { color: var(--text); }
.base-tabs a.is-active { background: var(--surface-raised); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.home-found { display: flex; flex-direction: column; padding: 6px; max-width: 760px; }
.home-person { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.home-person:hover, .home-person:focus-visible { background: var(--hover); }
.home-person b { font-weight: 600; }
.home-none { padding: 10px 12px; margin: 0; }
.home-more { padding: 8px 12px; }
.group-finished > summary { cursor: pointer; padding: 6px 0 12px; color: var(--muted); font-weight: 600; font-size: 14px; }
.group-finished > summary:hover { color: var(--text); }
/* Вхід у базу: компактні картки програм і груп */
.home-section { margin: 4px 0 -4px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.home-bar { display: flex; gap: 8px; align-items: center; }
.home-search { flex: 1 1 auto; max-width: 560px; height: 42px; padding: 0 12px; border-radius: 10px; }
.home-search input { font-size: 16px; }
.home-bar .btn { margin-left: auto; height: 42px; white-space: nowrap; flex: none; }
.group-card-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.group-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.group-card:hover { border-color: var(--line-hover); background: var(--surface-2); }
.group-card-name { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-card-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.group-card-meta b { color: var(--text); font-weight: 600; }
.group-card .stack-bar { height: 6px; margin-top: auto; pointer-events: none; }
.group-card .base-badges .pill { font-size: 12px; }
.group-grid.is-programs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 640px) {
  .home-bar .btn { padding: 0 12px; }
  .group-grid, .group-grid.is-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-card-name { font-size: 14px; }
}
.group-card-icon { margin-right: 2px; }
/* Фото студента з анкети в шапці картки */
.record-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.record-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--chip); border: 1px solid var(--line); }
.record-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Журнал: назва предмета — посилання на курс у Moodle */
.j-course-link { color: inherit; text-decoration: none; }
.j-course-link span { color: var(--accent); }
.j-course-link:hover, .j-course-link:focus-visible { color: var(--accent); text-decoration: underline; }
/* Історія змін запису бази */
.history-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.history-item:last-child { border-bottom: 0; }
.history-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.history-line { overflow-wrap: anywhere; }
.history-field { color: var(--muted); }
.avatar.history-system { background: var(--chip); color: var(--muted); border-color: transparent; }
/* Підкартки запису бази */
.sub-parent { font-size: 14px; color: var(--muted); }
.subcards { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.subcards-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.subcards-head .chat-title { margin: 0; margin-right: auto; }
.subcard { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.subcard:hover { background: var(--hover); }
.subcard .cell-muted { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-move { display: flex; gap: 8px; }
.sub-move .input { flex: 1; }
.sub-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 12px; font-weight: 600; }
/* Інвентарний номер: кнопки-букви над полем */
.inv-prefixes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.inv-prefix { min-width: 32px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.inv-prefix:hover, .inv-prefix:focus-visible { border-color: var(--accent); color: var(--accent); }