:root {
  color-scheme: light;
  --bg: #f6f7f4;
  --surface: #ffffff;
  --surface-soft: #f1f4f6;
  --ink: #172026;
  --muted: #5e6a72;
  --line: #dce1df;
  --teal: #0f766e;
  --blue: #315b8a;
  --amber: #aa6b00;
  --green: #3e7a48;
  --violet: #635b8f;
  --shadow: 0 10px 24px rgba(23, 32, 38, 0.08);
}

body.theme-dark {
  color-scheme: dark;
  --bg: #101614;
  --surface: #18211f;
  --surface-soft: #202c29;
  --ink: #eef6f3;
  --muted: #a6b5b0;
  --line: #31423e;
  --teal: #47c7bb;
  --blue: #8bb9f0;
  --amber: #f3ba5c;
  --green: #8fd89b;
  --violet: #b8b0ef;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  position: relative;
  width: min(1480px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 8px 0;
}

.topbar {
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 760;
}

.reports-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #c9d8d3;
  border-radius: 8px;
  background: var(--surface);
  color: var(--teal);
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.reports-link:hover,
.reports-link:focus-visible {
  border-color: var(--teal);
  background: #e7f1ec;
  color: #17443f;
  outline: none;
}

.source-pill {
  max-width: 520px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-tabs,
.mode-tabs {
  display: flex;
  gap: 8px;
}

.person-tabs {
  margin-top: 0;
  width: calc(100% - var(--dashboard-corner-space, 170px));
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.dashboard-corner-actions {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  pointer-events: none;
}

.dashboard-corner-actions .theme-toggle,
.dashboard-corner-actions .training-button,
.dashboard-corner-actions .crm-switch-button,
.dashboard-corner-actions .finance-switch-button {
  pointer-events: auto;
}

.person-tab,
.mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.mode-tab.has-decision-dot::after,
.mobile-nav-button.has-decision-dot::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
  transform: translateY(-5px);
  flex: 0 0 auto;
}

.person-tab.is-active,
.mode-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--teal);
}

/* --- Person selector: smart quick row + searchable picker --- */
.person-tabs {
  align-items: center;
  flex-wrap: wrap;
}

.person-tabs .person-tab {
  gap: 7px;
  min-height: 34px;
  padding: 0 12px 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.person-tabs .person-tab.is-active {
  color: var(--ink);
  border-color: var(--teal);
  background: rgba(15, 118, 110, 0.1);
}

.person-tab.is-quick-hidden {
  display: none;
}

.person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
  background: hsl(var(--person-hue, 200) 48% 88%);
  color: hsl(var(--person-hue, 200) 50% 28%);
}

.person-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.person-more:hover,
.person-more:focus-visible {
  color: var(--ink);
  border-color: var(--teal);
}

.person-more-icon,
.person-picker-search-icon {
  position: relative;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 999px;
  flex: 0 0 auto;
}

.person-more-icon::after,
.person-picker-search-icon::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.person-picker {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.person-picker[hidden] {
  display: none;
}

.person-picker-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}

.person-picker-panel {
  position: relative;
  z-index: 1;
  margin-top: 12vh;
  width: min(420px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28);
}

.person-picker-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.person-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--ink);
  outline: none;
}

.person-picker-list {
  overflow-y: auto;
  padding: 6px;
}

.person-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.person-picker-option:hover,
.person-picker-option.is-highlight {
  background: rgba(15, 118, 110, 0.1);
}

.person-picker-option.is-active {
  color: var(--teal);
  font-weight: 800;
}

.person-picker-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

body.theme-dark .person-tabs .person-tab.is-active {
  background: rgba(45, 212, 191, 0.16);
}

body.theme-dark .person-avatar {
  background: hsl(var(--person-hue, 200) 30% 32%);
  color: hsl(var(--person-hue, 200) 50% 85%);
}

body.theme-dark .person-picker-scrim {
  background: rgba(0, 0, 0, 0.55);
}

body.theme-dark .person-picker-option:hover,
body.theme-dark .person-picker-option.is-highlight {
  background: rgba(45, 212, 191, 0.16);
}

.role-strip {
  display: none;
  min-height: 28px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.metric {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  line-height: 1;
}

.metric-open {
  border-left-color: var(--blue);
}

.metric-wait {
  border-left-color: #b23a34;
}

.metric-check {
  border-left-color: var(--amber);
}

.metric-done {
  border-left-color: #66717a;
}

.metric-proposal {
  border-left-color: var(--violet);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) repeat(5, minmax(126px, 0.58fr));
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.slice-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
}

.slice-chip.is-active,
.slice-chip:hover,
.slice-chip:focus-visible {
  border-color: var(--teal);
  color: #17443f;
  background: #e7f1ec;
  outline: none;
}

.roadmap-controls {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.roadmap-control-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.65fr) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.roadmap-advanced-panel {
  display: grid;
  grid-template-columns: minmax(220px, 340px);
}

.roadmap-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.roadmap-zoom > span {
  min-width: 48px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  text-align: center;
}

.roadmap-zoom-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 180px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.roadmap-zoom-range input {
  width: 100%;
  min-height: 22px;
  padding: 0;
  accent-color: var(--teal);
}

.zoom-button {
  display: grid;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 760;
}

.zoom-button:hover,
.zoom-button:focus-visible {
  border-color: var(--teal);
  color: #17443f;
  background: #e7f1ec;
  outline: none;
}

.zoom-button:disabled {
  color: #a1a8ad;
  background: #f3f5f4;
  cursor: default;
}

.roadmap-fit-button,
.roadmap-advanced-toggle {
  min-height: 38px;
  white-space: nowrap;
}

.roadmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.roadmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-box {
  width: 18px;
  height: 8px;
  border-radius: 999px;
}

.legend-plan {
  background: #d7dee5;
}

.legend-elapsed {
  background: #e4b949;
}

.legend-remaining {
  background: #cbd3da;
}

.legend-actual {
  background: #4f9a5c;
}

.legend-overdue {
  background: #d35b55;
}

label,
.form-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.checkbox-field {
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: end;
  min-height: 61px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.checkbox-field input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.checkbox-field span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.22);
  outline-offset: 2px;
}

textarea {
  min-height: 90px;
  padding: 10px;
  resize: vertical;
}

.mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
}

.mode-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.local-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.reset-button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}

/* Theme toggle archived 2026-06-27 (COMPANY-TASK-DASHBOARD, Rail): switch hidden on all three
   boards, theming code kept. Button stays in DOM so the mobile header's CRM/Финансы/training
   siblings (built inside `if (els.themeToggle)`) survive. Restore: remove this rule + set
   THEME_TOGGLE_ENABLED = true in app.js. */
.theme-toggle {
  display: none !important;
}

.theme-toggle {
  display: inline-flex;
  width: 38px;
  height: 38px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
}

.theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.training-button {
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
}

.training-button svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crm-switch-button,
.finance-switch-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--teal);
  background: var(--surface);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.crm-switch-button:hover,
.crm-switch-button:focus-visible,
.finance-switch-button:hover,
.finance-switch-button:focus-visible,
.training-button:hover,
.training-button:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.theme-toggle-mark {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--teal);
  line-height: 0;
}

.theme-toggle-mark svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-mark svg path,
.theme-toggle-mark svg circle {
  fill: currentColor;
}

.theme-toggle-mark svg .theme-sun-rays {
  fill: none;
}

.primary-button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--teal);
  border-radius: 6px;
  padding: 0 12px;
  color: #fff;
  background: var(--teal);
  cursor: pointer;
  font-weight: 700;
}

.danger-button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid #e3b8b2;
  border-radius: 6px;
  padding: 0 10px;
  color: #8b1d1d;
  background: #fff7f5;
  cursor: pointer;
  font-weight: 700;
}

.reset-button:disabled,
.primary-button:disabled,
.danger-button:disabled {
  color: #9aa3a8;
  border-color: var(--line);
  background: #eef1ef;
  cursor: default;
}

.board-scroller {
  margin-top: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 6px;
  height: clamp(360px, calc(100vh - 228px), 760px);
  min-width: min(1180px, 100%);
  align-items: stretch;
}

.column {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  padding: 0 1px 4px;
}

.column-title-button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 5px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.column-title-button:hover,
.column-title-button:focus-visible {
  border-color: #c9d8d3;
  background: #e7f1ec;
  outline: none;
}

.status-drop-target.is-drop-target {
  border-color: #0f766e;
  background: #dff1ed;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
}

body.is-sorting-task .status-drop-target.is-drop-target {
  transform: translateY(-1px);
}

.column-header h2 {
  margin: 0;
  font-size: 15px;
}

.column-title {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.column-signal {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.column-signal-wip {
  color: #744400;
  background: #f6ead4;
}

.count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  text-align: center;
}

.task-list {
  display: flex;
  flex: 1;
  align-content: start;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px dashed transparent;
  border-radius: 8px;
  scrollbar-color: #8fa39e #edf2ef;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.task-list::-webkit-scrollbar {
  width: 10px;
}

.task-list::-webkit-scrollbar-track {
  background: #edf2ef;
  border-radius: 999px;
}

.task-list::-webkit-scrollbar-thumb {
  border: 2px solid #edf2ef;
  border-radius: 999px;
  background: #b7c7c2;
}

.task-list.is-drop-target {
  background: rgba(15, 118, 110, 0.08);
}

.column.is-drop-target .task-list {
  border-color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}

.column-drop-zone {
  position: absolute;
  z-index: 4;
  inset: 38px 0 0;
  border-radius: 8px;
  pointer-events: none;
}

body.is-sorting-task .column.is-drop-target .column-drop-zone {
  outline: 2px solid rgba(15, 118, 110, 0.48);
  outline-offset: -2px;
  background: rgba(15, 118, 110, 0.08);
}

.task-list:empty::before {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  content: "Нет задач";
  font-size: 15px;
}

body.is-sorting-task .task-list {
  border-color: #b8cbc7;
  background: rgba(15, 118, 110, 0.045);
}

body.is-sorting-task .column-focus-grid {
  border-color: #b8cbc7;
  background: rgba(15, 118, 110, 0.045);
}

body.is-sorting-task .task-list:empty::before {
  border-color: #9cc8c1;
  background: #e7f1ec;
  content: "Перетащите сюда";
}

.task-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 0 rgba(23, 32, 38, 0.03);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.task-card.task-card-project {
  border-color: #b8d8d1;
  box-shadow: 0 1px 0 rgba(23, 32, 38, 0.03);
}

.task-card.task-card-recurring {
  border-color: #98d8ef;
}

.task-card.task-card-needs-decision {
  border-color: #e2c48a;
}

.task-card-accent {
  position: relative;
  z-index: 2;
  width: calc(100% + 2px);
  height: 6px;
  margin: -1px -1px 0;
  border-radius: 7px 7px 0 0;
  background: var(--teal);
}

.task-card.task-card-recurring .task-card-accent {
  background: #38bdf8;
}

.task-card.task-card-needs-decision .task-card-accent {
  background: #f59e0b;
}

/* Overdue marker (NEW 2026-06-27): red accent; placed last so it wins when a card is both
   recurring/needs-decision AND overdue (overdue priority per Rail). */
.task-card.task-card-overdue {
  border-color: #f0bbb6;
}

.task-card.task-card-overdue .task-card-accent {
  background: #dc2626;
}

.task-card-main {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 9px 12px 12px;
  border-radius: inherit;
  background: var(--surface);
  transform: translateX(var(--card-reveal-shift, 0));
  transition: transform 160ms ease;
}

.task-card:not(.proposal-card) > .task-card-main {
  min-height: 178px;
  border-radius: 0 0 7px 7px;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Subtle card-body tints by state (NEW 2026-06-27). Source order = priority: recurring <
   needs-decision < overdue, so overdue wins on overlap. Tints kept very light so text stays readable. */
.task-card.task-card-recurring > .task-card-main {
  background: #eef8fe;
}

.task-card.task-card-needs-decision > .task-card-main {
  background: #fdf6ea;
}

.task-card.task-card-overdue > .task-card-main {
  background: #fdf1f0;
}

.task-card.is-swiping .task-card-main,
.mobile-task-card.is-swiping .mobile-task-main {
  transition: none;
}

.card-quick-panel {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: var(--card-reveal-panel-width, min(304px, calc(100% - 24px)));
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  border-right: 1px solid rgba(15, 118, 110, 0.18);
  background: #e7f1ec;
  cursor: default;
  pointer-events: none;
  touch-action: manipulation;
  user-select: text;
}

.task-card.is-quick-edit-open .card-quick-panel,
.mobile-task-card.is-quick-edit-open .card-quick-panel {
  z-index: 3;
  pointer-events: auto;
}

.card-quick-panel label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
}

.card-quick-panel label,
.card-quick-actions,
.card-quick-error {
  grid-column: 1 / -1;
}

.card-quick-panel select,
.card-quick-panel input {
  display: block;
  width: 100%;
  max-width: 100%;
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  border: 1px solid #b8cbc7;
  border-radius: 6px;
  padding: 0 8px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  line-height: 32px;
}

.card-quick-panel input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

.card-quick-panel input[type="date"]::-webkit-datetime-edit,
.task-dialog input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}

.card-quick-panel input[type="date"]::-webkit-date-and-time-value,
.task-dialog input[type="date"]::-webkit-date-and-time-value {
  min-height: 100%;
}

.card-quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 7px;
  align-items: stretch;
  margin-top: 2px;
}

.card-quick-actions button {
  min-width: 0;
  min-height: 34px;
}

.card-quick-close {
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.card-quick-error {
  min-height: 15px;
  color: #991b1b;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.task-card-decision-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
}

.task-card-decision-button {
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.15;
}

.detail-decision-actions {
  max-width: 440px;
}

.task-card:active {
  cursor: grabbing;
}

.task-card:hover,
.task-card:focus-visible {
  border-color: #b8cbc7;
  box-shadow: var(--shadow);
  outline: none;
}

.task-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.sortable-chosen {
  border-color: rgba(15, 118, 110, 0.6);
}

.sortable-ghost {
  min-height: 76px;
  border: 1px dashed #0f766e;
  background: #e7f1ec;
  color: transparent;
  opacity: 1;
  box-shadow: none;
}

.sortable-ghost > * {
  visibility: hidden;
}

.sortable-drag {
  box-shadow: 0 18px 34px rgba(23, 32, 38, 0.18);
}

body.is-training-capture .sortable-drag,
body.is-training-capture .sortable-fallback {
  visibility: visible !important;
  opacity: 0.98 !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: 0 18px 34px rgba(23, 32, 38, 0.2);
}

body.is-training-capture .sortable-drag > *,
body.is-training-capture .sortable-fallback > * {
  visibility: visible !important;
}

body.is-training-capture .task-card.is-dragging:not(.sortable-drag):not(.sortable-fallback) {
  opacity: 0.28;
}

.task-card.is-status-move-animating,
.mobile-task-card.is-status-move-animating {
  pointer-events: none;
  will-change: transform;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.task-title-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px;
  align-items: start;
}

.task-title-row.is-without-drag {
  grid-template-columns: minmax(0, 1fr);
}

.task-card-top {
  display: grid;
  gap: 4px;
  min-height: 46px;
  padding: 0 0 6px;
  border-bottom: 1px solid #dce4e1;
  background: transparent;
  container-type: inline-size;
}

.task-card-primary-row,
.task-card-route-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.task-card-primary-row {
  gap: 5px;
  flex-wrap: wrap;
  row-gap: 4px;
  min-height: 24px;
}

.task-card-route-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 18px;
}

.drag-handle {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  min-height: 24px;
  margin-left: -4px;
  place-items: center;
  color: var(--muted);
  cursor: grab;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.task-card.is-dragging .drag-handle,
.sortable-chosen .drag-handle {
  cursor: grabbing;
}

.task-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.26;
}

.task-card:not(.proposal-card) h3 {
  display: -webkit-box;
  flex: 0 0 auto;
  max-height: 3.78em;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.task-card-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 9px 0 4px;
  container-type: inline-size;
  background: transparent;
  overflow: hidden;
}

@container (max-width: 220px) {
  .task-card:not(.proposal-card) h3 {
    max-height: 2.52em;
    -webkit-line-clamp: 2;
  }
}

.task-card-no {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  color: #092154;
  font-size: 14px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.task-card-route {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-height: 18px;
  min-width: 0;
  margin: 0;
  color: #667282;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 650;
}

.attachment-badge {
  display: inline-grid;
  width: 24px;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #f7b15f;
  border-radius: 999px;
  color: #fff;
  background: #f97316;
  box-shadow: 0 2px 5px rgba(190, 84, 17, 0.22);
}

.attachment-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comment-count-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid #b7ddd7;
  border-radius: 7px;
  color: #17443f;
  background: #d9efec;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.task-card-comment-badge-inline {
  display: none;
}

.badge-priority {
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.badge-priority-high {
  border-color: #f6c8c1;
  color: #9b2f22;
  background: #fde9e6;
}

.badge-priority-medium {
  border-color: #ffdca2;
  color: #a85e05;
  background: #fff2d8;
}

.badge-priority-low {
  border-color: #cfd8df;
  color: #4d5d68;
  background: #eef2f5;
}

.badge-task-no {
  color: #334155;
  background: #e7ebef;
}

.badge-importance {
  color: #4b3d16;
  background: #f4ead1;
}

.badge-due-no_due {
  color: #5f6971;
  background: #edf0f2;
}

.badge-due-on_track {
  color: #24582e;
  background: #e1efe4;
}

.badge-due-today {
  color: #17443f;
  background: #d9efec;
}

.badge-due-soon {
  color: #714700;
  background: #f6ead4;
}

.badge-due-overdue {
  color: #8b1d1d;
  background: #f7dddd;
}

.badge-due-done {
  color: #24582e;
  background: #e1efe4;
}

.badge-wait {
  color: #714700;
  background: #f6ead4;
}

.badge-pause {
  color: #5c3b7b;
  background: #eee7f4;
}

.badge-proposal {
  color: #74462c;
  background: #f1e6dc;
}

.badge-local {
  color: #185b55;
  background: #d9efec;
}

.badge-done {
  color: #24582e;
  background: #e1efe4;
}

.badge-recurring {
  color: #0e5c72;
  background: #dff1f5;
}

.badge-recurring-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #f7b15f;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 2px 5px rgba(190, 84, 17, 0.22);
}

.badge-recurring-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff7ed;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-status {
  color: #185b55;
  background: #d9efec;
}

.badge-group {
  color: #38465a;
  background: #e7ebef;
}

.badge-relationship {
  color: #3b4a23;
  background: #e6efd9;
}

.badge-project-kind {
  color: #17443f;
  background: #d9efec;
}

.task-card-project-badge {
  flex: 0 0 auto;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid #b7ddd7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.task-card-project-badge-top {
  margin-left: 0;
}

.task-card-project-badge-inline {
  display: none;
  margin-left: 0;
}

.badge-age {
  color: #73302b;
  background: #f5dfdb;
}

.badge-risk {
  color: #8b1d1d;
  background: #f7dddd;
}

.badge-child {
  color: #35506b;
  background: #e5edf4;
}

.badge-child-count {
  color: #2f4f45;
  background: #e3efe8;
}

.badge-assignee {
  color: #173354;
  background: #dfeaf5;
}

.badge-creator {
  color: #3b4a23;
  background: #e6efd9;
}

.task-text {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.42;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.task-next-preview {
  display: grid;
  align-content: start;
  flex: 0 0 auto;
  gap: 4px;
  min-height: 0;
  color: var(--ink);
  overflow: hidden;
  -webkit-line-clamp: unset;
}

.task-text-label {
  display: block;
  color: #7a8597;
}

.task-text-value {
  display: -webkit-box;
  color: #111827;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.task-card.is-title-short .task-text-value {
  -webkit-line-clamp: 5;
}

.task-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.task-foot-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-foot-info span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-foot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.child-stream-summary {
  display: block;
  padding: 7px;
  border: 1px solid #d7e7e2;
  border-radius: 8px;
  background: #f7fbf8;
}

.child-stream-summary-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proposal-panel {
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.proposal-panel.is-empty {
  background: var(--surface);
}

.proposal-decision-section {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.proposal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.proposal-head-main {
  display: grid;
  gap: 4px;
}

.proposal-head h2 {
  margin: 0;
  font-size: 21px;
}

.proposal-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.proposal-head-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.proposal-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.proposal-scope-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 10px;
  color: var(--muted);
  background: #ffffff;
  cursor: pointer;
  font-weight: 760;
}

.proposal-scope-button.is-active {
  border-color: rgba(15, 118, 110, 0.34);
  color: var(--teal);
  background: #e7f1ec;
}

.observation-scope-tabs {
  min-width: min(100%, 360px);
}

.observation-scope-button {
  white-space: nowrap;
}

.decision-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
  transform: translateY(-5px);
  flex: 0 0 auto;
}

.proposal-empty {
  padding: 10px 0 2px;
  color: var(--muted);
  font-size: 13px;
}

.proposal-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 292px));
  align-items: stretch;
  justify-content: start;
  gap: 10px;
}

/* Fix 2026-06-28 (COMPANY-TASK-DASHBOARD): observe («Наблюдаю») task-cards must not
   stretch to the row height, otherwise the absolutely-positioned swipe quick-panel
   (.card-quick-panel: «Сохранить ×») underlay peeks out below the shorter card body.
   Canonical/3D scope this to .observation-task-list; the Kinetico bundle mounts the
   observe grid as plain .proposal-list, so we scope to task-cards inside it. Proposal
   cards keep stretching (height:100%). */
.proposal-list > .task-card:not(.proposal-card) {
  align-self: start;
}

.observation-task-list {
  align-items: start;
}

.observation-task-list > .task-card:not(.proposal-card) {
  align-self: start;
}

.observation-decision-sections {
  display: grid;
  gap: 16px;
}

.observation-decision-section {
  display: grid;
  gap: 8px;
}

.observation-decision-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.observation-decision-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.observation-decision-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: #eef3f2;
  font-size: 12px;
  font-weight: 760;
}

.observation-decision-section-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.proposal-card {
  height: 100%;
  cursor: pointer;
}

.proposal-card.task-card {
  padding: 0;
  border-color: var(--line);
  background: var(--surface);
}

.decision-task-card .task-card-main {
  min-height: 100%;
}

.decision-task-title-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.decision-card-marker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #0f5f59;
  background: #e7f1ec;
  font-size: 11px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.proposal-card:hover,
.proposal-card:focus-visible {
  border-color: #b8cbc7;
  box-shadow: var(--shadow);
  outline: none;
}

.proposal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.proposal-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.proposal-card p,
.mobile-proposal-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.proposal-card .proposal-description,
.mobile-proposal-card .proposal-description {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.proposal-card .proposal-next-step,
.mobile-proposal-card .proposal-next-step {
  color: var(--muted);
}

.proposal-decision-note {
  border-left: 3px solid #9cc8c1;
  padding: 7px 9px;
  border-radius: 6px;
  color: #315b55;
  background: #f2f8f5;
}

.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.grid-title-button {
  display: inline;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.grid-title-button:hover,
.grid-title-button:focus-visible {
  color: var(--teal);
  outline: none;
}

.list-wrap {
  margin-top: 16px;
}

.events-wrap {
  margin-top: 16px;
}

.roadmap-wrap {
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.roadmap-shell {
  --roadmap-day-width: 42px;
  min-width: max(100%, calc(340px + var(--roadmap-day-count) * var(--roadmap-day-width)));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.roadmap-grid-row {
  display: grid;
  min-width: max-content;
}

.roadmap-month-row,
.roadmap-day-row {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface);
}

.roadmap-day-row {
  top: 32px;
  border-bottom: 1px solid var(--line);
}

.roadmap-left {
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.roadmap-left-head,
.roadmap-left-subhead {
  min-height: 32px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: uppercase;
}

.roadmap-month {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.roadmap-day {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-right: 1px solid #e7ece9;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.roadmap-day.is-label-hidden {
  color: transparent;
}

.roadmap-shell[data-day-label-mode="anchors"] .roadmap-day,
.roadmap-shell[data-day-label-mode="months"] .roadmap-day {
  font-size: 10px;
}

.roadmap-shell[data-day-label-mode="weekly"] .roadmap-day {
  font-size: 11px;
}

.roadmap-task-row {
  min-height: 66px;
  border-bottom: 1px solid #edf0ef;
}

.roadmap-task-row:last-child {
  border-bottom: 0;
}

.roadmap-task-cell {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.roadmap-task-cell:hover,
.roadmap-task-cell:focus-visible {
  background: #eef6f3;
  outline: none;
}

.roadmap-task-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-task-meta,
.roadmap-task-dates {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-lane {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 66px;
  background: #fbfcfb;
}

.roadmap-day-guide {
  z-index: 1;
  grid-row: 1;
  min-height: 66px;
  border-right: 1px solid #edf0ef;
}

.roadmap-today-line {
  z-index: 3;
  grid-row: 1;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: #b23a34;
}

.roadmap-bar {
  position: relative;
  z-index: 4;
  grid-row: 1;
  min-width: 24px;
  min-height: 30px;
  margin: 0 3px;
  padding: 0;
  border: 1px solid rgba(49, 91, 138, 0.18);
  border-radius: 6px;
  color: #173354;
  background: #f4f7f8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(23, 32, 38, 0.12);
}

.roadmap-bar:hover,
.roadmap-bar:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.roadmap-bar-segment {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 1;
  border-radius: 5px;
}

.roadmap-bar-label {
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roadmap-segment-plan {
  background: #edf0f2;
}

.roadmap-segment-elapsed {
  background: #e4b949;
}

.roadmap-segment-remaining {
  background: #cbd3da;
}

.roadmap-segment-actual {
  background: #4f9a5c;
}

.roadmap-segment-actual-late {
  background: #4f9a5c;
}

.roadmap-segment-overdue {
  background: #d35b55;
}

.roadmap-segment-no-plan {
  background: #e4b949;
}

.roadmap-bar-overdue {
  color: #8b1d1d;
  background: #fff5f4;
}

.roadmap-bar-soon {
  color: #714700;
  background: #fff8eb;
}

.roadmap-bar-done {
  color: #24582e;
  background: #f3faf4;
}

.roadmap-bar-no_due,
.roadmap-bar-no-end {
  color: #5f6971;
  background: #f7f8f9;
}

.roadmap-bar-paused {
  color: #5c3b7b;
  background: #fbf6ff;
}

.roadmap-bar-paused .roadmap-segment-elapsed,
.roadmap-bar-paused .roadmap-segment-no-plan {
  background: #e4b949;
}

.roadmap-bar-waiting {
  color: #714700;
  background: #fff8eb;
}

.roadmap-bar-waiting .roadmap-segment-elapsed,
.roadmap-bar-waiting .roadmap-segment-no-plan {
  background: #e4b949;
}

.column-focus-wrap {
  margin-top: 16px;
}

.column-focus-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.column-focus-head h2 {
  margin: 0;
  font-size: 18px;
}

.column-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: auto;
  gap: 10px;
  align-items: stretch;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 0;
}

.task-list-view {
  display: grid;
  gap: 10px;
}

.grid-host {
  overflow-x: auto;
}

.grid-host .gridjs-wrapper {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.grid-host .gridjs-table {
  color: var(--ink);
  font-size: 13px;
}

.grid-host th.gridjs-th {
  background: var(--surface-soft);
  color: var(--ink);
}

.grid-host td.gridjs-td,
.grid-host th.gridjs-th {
  border-color: var(--line);
}

.grid-host .gridjs-search-input {
  width: min(320px, 100%);
}

.task-row {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.task-row:hover,
.task-row:focus-visible {
  border-color: #b8cbc7;
  box-shadow: var(--shadow);
  outline: none;
}

.task-row h2 {
  margin: 0;
  font-size: 16px;
}

.task-row p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.row-side {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.archive-wrap {
  margin-top: 16px;
}

.schedule-wrap {
  margin-top: 16px;
}

.schedule-panel {
  display: grid;
  gap: 16px;
}

.schedule-head,
.schedule-card-head,
.schedule-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-card-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.schedule-head h2,
.schedule-card h3 {
  margin: 0;
}

.schedule-head p,
.schedule-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.schedule-list {
  display: grid;
  gap: 12px;
}

.schedule-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.schedule-card.is-paused {
  opacity: 0.78;
}

.schedule-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 12px;
}

.schedule-card-details span {
  min-width: 0;
  color: var(--muted);
}

.recurring-dialog select[multiple]:not(.participant-hidden-select) {
  min-height: 92px;
}

.checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--ink);
  font-weight: 720;
}

.checkbox-line input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.task-dialog .task-recurring-toggle {
  display: inline-flex;
  align-self: end;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 720;
}

.task-dialog .task-recurring-toggle input {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--teal);
}

.task-dialog .task-recurring-toggle span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-recurring-box {
  display: grid;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #cfe1dc;
  border-radius: 8px;
  background: #f6fbf9;
}

.task-dialog .schedule-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid #cfe1dc;
  border-radius: 8px;
  background: #edf7f4;
}

.task-dialog .schedule-mode-switch label {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.task-dialog .schedule-mode-switch span {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.task-dialog .schedule-mode-switch input {
  position: absolute;
  width: 1px;
  min-width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.task-dialog .schedule-mode-switch input:checked + span {
  color: #0b3631;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 118, 110, 0.14);
}

.task-dialog .task-recurring-box .form-grid,
.task-dialog .task-recurring-box label {
  max-width: 100%;
  min-width: 0;
}

.task-dialog .task-recurring-box input,
.task-dialog .task-recurring-box select {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

body.theme-dark .task-recurring-toggle,
body[data-theme="dark"] .task-recurring-toggle {
  border-color: var(--line);
  background: #121b19;
}

body.theme-dark .task-recurring-box,
body[data-theme="dark"] .task-recurring-box {
  border-color: var(--line);
  background: #121b19;
}

body.theme-dark .schedule-mode-switch,
body[data-theme="dark"] .schedule-mode-switch {
  border-color: #31423e;
  background: #172522;
}

body.theme-dark .schedule-mode-switch input:checked + span,
body[data-theme="dark"] .schedule-mode-switch input:checked + span {
  color: #ccfbf1;
  background: #22352f;
  box-shadow: none;
}

.recurring-active-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.task-recurring-active-row[hidden] {
  display: none;
}

.archive-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.archive-head h2 {
  margin: 0;
  font-size: 18px;
}

.archive-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.archive-task-card {
  min-width: 0;
}

.task-card-archive-actions {
  display: grid;
  min-width: 0;
  margin-top: 8px;
}

.task-card-archive-actions .archive-restore {
  width: 100%;
  min-width: 0;
}

.empty {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
}

.event-list {
  display: grid;
  gap: 10px;
}

.event-row {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.event-row h2 {
  margin: 0;
  font-size: 16px;
}

.event-row p {
  margin: 0;
  color: var(--ink);
}

.task-history-row p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.event-row span {
  color: var(--muted);
  font-size: 12px;
}

.task-dialog {
  width: min(560px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(23, 32, 38, 0.24);
}

.task-detail-dialog {
  width: min(760px, calc(100vw - 28px));
}

.task-detail-dialog.is-training-target-detail {
  position: fixed;
  z-index: 900;
}

.task-dialog.is-training-target-form {
  position: fixed;
  z-index: 900;
}

body:not(.is-mini-app) .task-detail-dialog.is-training-target-detail {
  inset: 50% auto auto 50%;
  max-height: calc(100vh - 28px);
  margin: 0;
  transform: translate(-50%, -50%);
}

body:not(.is-mini-app) .task-dialog.is-training-target-form {
  inset: 50% auto auto 50%;
  max-height: calc(100vh - 28px);
  margin: 0;
  transform: translate(-50%, -50%);
}

.training-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  top: 50%;
  left: 50%;
  z-index: 920;
  transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(23, 32, 38, 0.26);
  transition: transform 220ms ease, left 220ms ease;
}

.is-mini-app .training-dialog {
  position: fixed;
  inset: 10px auto calc(78px + env(safe-area-inset-bottom, 0px)) 50%;
  top: 10px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 20px));
  height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
  max-height: none;
  margin: 0;
  overflow: hidden;
}

.is-mini-app .training-shell {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

.is-mini-app .training-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: 10px;
  background: var(--surface);
}

.is-mini-app .training-actions button {
  width: 100%;
  min-width: 0;
}

.is-mini-app #trainingShowTarget {
  grid-column: 1 / -1;
  order: -1;
}

.is-mini-app .training-dialog.is-target-mode.is-target-panel-collapsed,
body:not(.is-mini-app) .training-dialog.is-telegram-flow.is-target-mode.is-target-panel-collapsed {
  left: 100%;
  right: auto;
  transform: translateX(18px);
  transition: transform 220ms ease, left 220ms ease;
}

.training-drawer-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 930;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-height: 72px;
  border: 1px solid rgba(15, 118, 110, 0.32);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  color: #ffffff;
  background: var(--teal);
  box-shadow: 0 10px 28px rgba(23, 32, 38, 0.24);
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.training-drawer-toggle:hover,
.training-drawer-toggle:focus-visible {
  background: #0d6b64;
  outline: none;
}

.training-drawer-toggle[hidden] {
  display: none !important;
}

body:not(.is-mini-app) .training-dialog.is-target-mode {
  inset: auto 18px 18px auto;
  top: auto;
  right: 18px;
  bottom: 18px;
  left: auto;
  transform: none;
  width: min(430px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 36px));
}

body:not(.is-mini-app) .training-dialog.is-target-mode.is-target-panel-left {
  inset: auto auto 18px 18px;
  right: auto;
  left: 18px;
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-body {
  grid-template-columns: 1fr;
  gap: 12px;
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-figure img {
  min-height: 140px;
  max-height: 220px;
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-copy h3 {
  font-size: 18px;
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-shell {
  max-height: min(620px, calc(100vh - 36px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 18px rgba(23, 32, 38, 0.08);
}

body:not(.is-mini-app) .training-dialog.is-target-mode .training-actions button {
  width: 100%;
  min-width: 0;
}

body:not(.is-mini-app) .training-dialog.is-target-mode #trainingShowTarget {
  grid-column: 1 / -1;
  order: -1;
}

body:not(.is-mini-app) .training-dialog.is-telegram-flow.is-target-mode.is-target-panel-collapsed {
  left: 100%;
  right: auto;
  transform: translateX(18px);
}

.task-dialog::backdrop {
  background: rgba(23, 32, 38, 0.28);
}

.training-dialog::backdrop {
  background: rgba(23, 32, 38, 0.36);
}

.training-shell {
  display: grid;
  gap: 14px;
  max-height: min(820px, calc(100vh - 28px));
  overflow-y: auto;
  padding: 18px;
}

.training-head {
  margin-bottom: 0;
}

.training-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.training-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--card);
  cursor: pointer;
  font-weight: 700;
}

.training-tab.is-active,
.training-tab:hover,
.training-tab:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(15, 118, 110, 0.08);
  outline: none;
}

.training-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.training-figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}

.training-figure img {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 430px;
  object-fit: contain;
}

.training-figure img.is-loading {
  opacity: 0;
}

.training-copy {
  display: grid;
  gap: 10px;
}

.training-progress {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.training-copy h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.training-copy p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}

.training-points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.training-scrim {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: rgba(23, 32, 38, 0.22);
  pointer-events: none;
}

.training-highlight {
  position: fixed;
  z-index: 901;
  border: 3px solid var(--orange, #f97316);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(23, 32, 38, 0.16), 0 0 0 8px rgba(249, 115, 22, 0.18);
  pointer-events: none;
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
}

.task-dialog > form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.task-dialog label,
.task-dialog .form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.task-dialog input,
.task-dialog select,
.task-dialog textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.task-dialog input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  max-inline-size: 100%;
  height: 40px;
  line-height: 40px;
}

.date-input-wrap {
  display: block;
  position: relative;
  min-width: 0;
}

.date-empty-hint,
.date-calendar-icon {
  display: none;
}

.task-parent-note {
  margin: -4px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--muted);
  background: #f7fbf9;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.detail-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  max-height: min(82vh, 820px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
}

.dialog-head,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-actions-left,
.dialog-actions-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.dialog-actions-left {
  flex-wrap: wrap;
}

.dialog-actions-right {
  margin-left: auto;
}

.dialog-head h2 {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}

.detail-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.participant-field-label {
  color: var(--muted);
}

.required-fields-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.required-marker {
  color: #a83b32;
  font-weight: 760;
}

.optional-label {
  color: var(--muted);
  font-weight: 400;
}

.date-field.is-required > span:first-child::after {
  color: #a83b32;
  content: " *";
  font-weight: 760;
}

.participant-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
  align-items: center;
}

.participant-picker select {
  min-height: 44px;
  height: 44px;
}

.participant-add-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #b7d4cf;
  border-radius: 6px;
  color: #0a5e57;
  background: #eef8f6;
  cursor: pointer;
  font-size: 22px;
  font-weight: 740;
  line-height: 1;
}

.participant-add-button:hover,
.participant-add-button:focus-visible {
  border-color: #86bdb4;
  background: #dff2ee;
}

.participant-add-button:disabled,
.participant-field.is-disabled .participant-add-button {
  cursor: default;
  opacity: 0.46;
}

.participant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.participant-list.is-empty {
  display: none;
}

.field-help,
.watcher-field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}
+
.task-main-grid {
  align-items: start;
  column-gap: 12px;
  row-gap: 12px;
}

.task-main-grid > label,
.task-main-grid > .form-field {
  align-content: start;
}

.task-main-grid > label > span:first-child,
.task-main-grid .field-label-row {
  min-height: 20px;
}

#taskForm .task-main-grid select {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  min-height: 44px;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2358616b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

.field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.field-label-row > label {
  display: inline;
  min-width: 0;
}

.field-help-popover {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
}

.field-help-button {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #c9d8d3;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  cursor: help;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  list-style: none;
}

.field-help-button::-webkit-details-marker {
  display: none;
}

.field-help-button:hover,
.field-help-button:focus-visible,
.field-help-popover[open] .field-help-button {
  border-color: #86bdb4;
  color: #0a5e57;
  background: #eef8f6;
}

.field-help-tooltip {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: -6px;
  width: min(250px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(23, 32, 38, 0.14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  visibility: hidden;
}

.task-main-grid > :nth-child(even) .field-help-tooltip {
  right: -6px;
  left: auto;
}

.field-help-popover:hover .field-help-tooltip,
.field-help-popover:focus-within .field-help-tooltip,
.field-help-popover[open] .field-help-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}


.participant-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  gap: 6px;
  padding: 3px 4px 3px 9px;
  border: 1px solid #d4e2dd;
  border-radius: 999px;
  color: var(--ink);
  background: #f7fbf9;
  font-size: 12px;
  font-weight: 720;
}

.participant-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-remove-button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #496059;
  background: #e6efeb;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.participant-remove-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.order-sheet {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  background: #f7fbf9;
}

.order-sheet-group {
  display: grid;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid #d8e5df;
}

.order-sheet-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.order-sheet-group h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}

.economic-preview {
  margin: 0;
  border: 1px solid #cfe0da;
  border-radius: 8px;
  padding: 9px 10px;
  color: #31504a;
  background: #eef7f4;
  font-size: 13px;
  line-height: 1.35;
}

.recurring-preview {
  margin: -4px 0 0;
  padding: 8px 10px;
  border: 1px solid #f3cf90;
  border-radius: 8px;
  color: #7c4a00;
  background: #fff7e8;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
}

.task-child-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #d8e5df;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f7fbf9;
}

.task-child-editor h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.task-child-editor p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.task-child-editor .primary-button {
  white-space: nowrap;
}

.task-dialog :disabled {
  color: #777f84;
  background: #eef1ef;
  cursor: default;
}

.form-error {
  min-height: 18px;
  margin: 0;
  color: #9f2323;
  font-size: 13px;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-detail-root,
.task-detail-tab-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.task-detail-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.task-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.task-detail-tab:hover,
.task-detail-tab:focus-visible,
.task-detail-tab.is-active {
  border-color: #abc8c2;
  color: #123f39;
  background: #edf7f5;
  outline: none;
}

.task-detail-tab-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2f7d73;
  font-size: 11px;
  font-weight: 820;
}

.task-detail-tab-panel {
  min-width: 0;
}

.detail-sections {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.detail-section {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.detail-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.order-sheet-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.order-sheet-summary-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
}

.order-sheet-summary-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.order-sheet-summary-value {
  color: var(--ink);
  font-size: 18px;
  font-weight: 820;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.order-sheet-details {
  display: grid;
  gap: 8px;
}

.order-sheet-details summary {
  justify-self: start;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.order-sheet-detail-groups {
  display: grid;
  gap: 5px;
}

.detail-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.detail-section p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.task-detail-empty {
  border: 1px dashed #cbd7d4;
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: #fbfcfc;
  font-size: 14px;
  line-height: 1.45;
}

.task-comments-panel,
.task-history-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.task-comment-form {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
}

.task-comment-form textarea {
  min-height: 86px;
  resize: vertical;
}

.task-comment-form-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.task-comment-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.task-comment-list,
.task-history-list {
  display: grid;
  gap: 9px;
}

.task-comment-row {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.task-comment-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.task-comment-row p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.parent-return-button {
  justify-self: start;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--teal);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.parent-return-button:hover,
.parent-return-button:focus-visible {
  border-color: #b8cbc7;
  outline: none;
}

.child-streams-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.child-streams-intro {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.child-streams-list {
  display: grid;
  gap: 8px;
}

.child-stream-item {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.child-stream-item:hover,
.child-stream-item:focus-visible {
  border-color: #b8cbc7;
  box-shadow: var(--shadow);
  outline: none;
}

.child-stream-title {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
}

.child-stream-meta,
.child-stream-next {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.attachment-section {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.attachment-list {
  display: grid;
  gap: 8px;
}

.attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfc;
}

.attachment-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.attachment-title {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.attachment-meta,
.attachment-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.attachment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.attachment-download-button {
  min-height: 32px;
}

.attachment-delete-button {
  min-height: 32px;
  border-color: #fecaca;
  color: #b42318;
  background: #fff7f7;
}

.attachment-delete-button:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  color: var(--muted);
  background: #f4f6f5;
  opacity: 0.72;
}

.attachment-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.attachment-upload-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
}

.attachment-upload-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attachment-file-input {
  display: none;
}

.detail-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  min-width: 0;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.detail-facts dt,
.detail-facts dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.detail-facts dt {
  color: var(--muted);
}

.detail-facts dd {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.detail-side-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.detail-side-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.detail-action-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 11px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.detail-action-toggle:hover,
.detail-action-toggle:focus-visible,
.detail-action-toggle.is-active {
  border-color: #abc8c2;
  color: #123f39;
  background: #edf7f5;
  outline: none;
}

.detail-facts-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.detail-facts-panel .detail-facts {
  margin-top: 0;
}

.detail-comments-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2f7d73;
  font-size: 11px;
  font-weight: 820;
}

.detail-inline-comments,
.detail-inline-history {
  margin-top: 0;
}

.mobile-view,
.mobile-nav {
  display: none;
}

.is-mini-app {
  overflow-x: hidden;
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-soft: #f1f4f6;
  --ink: #172026;
  --muted: #5e6a72;
  background: var(--bg);
  color: var(--ink);
}

.is-mini-app.theme-dark {
  --bg: #101614;
  --surface: #18211f;
  --surface-soft: #202c29;
  --ink: #eef6f3;
  --muted: #9ca9a6;
  background: var(--bg);
  color: var(--ink);
}

.is-mini-app .shell {
  width: 100%;
  max-width: 560px;
  padding: 14px 12px calc(92px + env(safe-area-inset-bottom));
}

.is-mini-app .topbar {
  display: none;
}

.is-mini-app .topbar-actions,
.is-mini-app .dashboard-corner-actions,
.is-mini-app .person-tabs,
.is-mini-app .summary-grid,
.is-mini-app .toolbar,
.is-mini-app .roadmap-controls,
.is-mini-app .mode-row,
.is-mini-app .proposal-panel,
.is-mini-app .board-scroller,
.is-mini-app .roadmap-wrap,
.is-mini-app .schedule-wrap,
.is-mini-app .list-wrap,
.is-mini-app .archive-wrap,
.is-mini-app .events-wrap,
.is-mini-app .column-focus-wrap {
  display: none !important;
}

.is-mini-app h1 {
  font-size: 24px;
}

.is-mini-app .role-strip {
  display: none;
}

.is-mini-app .mobile-view {
  display: block;
  margin-top: 0;
}

.is-mini-app.is-mini-app-booting .mobile-view.is-hidden {
  display: block !important;
  min-height: 100dvh;
}

.is-mini-app.is-mini-app-booting .mobile-view:empty::before {
  content: "Загрузка задач...";
  display: block;
  padding: 28px 18px;
  color: var(--muted);
  font-size: 15px;
}

.is-mini-app.is-mini-app-booting .mobile-nav.is-hidden {
  display: flex !important;
}

.mobile-shell,
.mobile-top,
.mobile-section,
.mobile-task-list,
.mobile-event-list {
  display: grid;
  gap: 12px;
}

.mobile-page-title {
  display: grid;
  gap: 4px;
  padding: 0 2px;
}

.mobile-page-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.mobile-page-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.mobile-theme-toggle-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.is-mini-app .theme-toggle {
  width: 34px;
  min-height: 34px;
  padding: 0;
  justify-content: center;
  background: var(--surface);
}

.mobile-crm-switch-button,
.mobile-finance-switch-button {
  display: inline-flex;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--teal);
  background: var(--surface);
  font-weight: 800;
  text-decoration: none;
}

.mobile-training-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--teal);
  background: var(--surface);
  font-weight: 800;
  cursor: pointer;
}

.is-mini-app .training-tabs {
  display: none;
}

.mobile-training-button:hover,
.mobile-training-button:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.mobile-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.mobile-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-section-title h2 {
  margin: 0;
  font-size: 16px;
}

.mobile-view-context-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 6px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.mobile-view-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.mobile-view-context-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.mobile-view-context-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.mobile-view-context-field select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.mobile-compact-select-shell {
  position: relative;
  min-width: 0;
}

.mobile-compact-select-shell select {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

.mobile-compact-select-shell select option {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.mobile-compact-select-value {
  position: absolute;
  top: 50%;
  right: 28px;
  left: 12px;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 760;
  line-height: 1;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  white-space: nowrap;
}

.task-dialog select[multiple]:not(.participant-hidden-select) {
  min-height: 112px;
  padding: 8px;
}

.task-dialog .participant-hidden-select {
  display: none;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, calc(100vw - 32px));
  transform: translate(-50%, 16px);
  padding: 10px 10px 10px 14px;
  border: 1px solid #b9dccc;
  border-radius: 8px;
  background: #f1fbf6;
  color: #073f35;
  box-shadow: 0 12px 30px rgba(20, 37, 45, 0.18);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.app-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.app-toast-message {
  min-width: 0;
}

.app-toast-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #073f35;
  background: rgba(7, 63, 53, 0.08);
  cursor: pointer;
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
}

.app-toast-close:hover,
.app-toast-close:focus-visible {
  background: rgba(7, 63, 53, 0.14);
  outline: none;
}

.mobile-status-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
  padding: 2px;
  scrollbar-width: none;
}

.mobile-status-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-status-chip,
.mobile-sort-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.mobile-status-chip {
  grid-column: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
  padding: 0 6px;
}

.mobile-status-chip:nth-child(n + 4) {
  grid-column: span 3;
}

.mobile-status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-status-count {
  color: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: 0.72;
}

.mobile-status-chip.is-active,
.mobile-sort-button.is-active {
  border-color: rgba(15, 118, 110, 0.35);
  color: var(--teal);
  background: #e7f1ec;
}

.mobile-task-board-section {
  gap: 10px;
}

.mobile-sort-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mobile-sort-button {
  min-width: 0;
  padding: 0 7px;
}

.mobile-task-card,
.mobile-event {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfc;
}

.mobile-task-card {
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
}

.mobile-task-card.task-card-project {
  border-color: #b8d8d1;
  box-shadow: inset 4px 0 0 rgba(15, 118, 110, 0.28), var(--shadow);
}

.mobile-real-task-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
}

.mobile-task-main {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 12px;
  border-radius: inherit;
  background: var(--surface);
  transform: translateX(var(--card-reveal-shift, 0));
  transition: transform 160ms ease;
}

.mobile-real-task-card .task-meta {
  padding: 0 0 8px;
  border-bottom: 1px solid #dce4e1;
  background: transparent;
}

.mobile-task-card.is-dragging {
  opacity: 0.45;
}

.mobile-proposal-card {
  gap: 9px;
  border-color: var(--line);
  background: #fbfcfc;
}

.mobile-proposal-card .proposal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  justify-content: stretch;
}

.mobile-proposal-card .proposal-actions button {
  width: 100%;
  min-width: 0;
}

.proposal-scope-tabs-mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.observation-scope-tabs-mobile {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proposal-scope-tabs-mobile .proposal-scope-button {
  width: 100%;
  min-width: 0;
  background: var(--surface);
}

.observation-scope-tabs-mobile .proposal-scope-button {
  flex-wrap: wrap;
  min-height: 44px;
  padding-inline: 5px;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.12;
  white-space: normal;
}

.observation-scope-tabs-mobile .observation-scope-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.observation-scope-tabs-mobile .observation-scope-count {
  flex: 0 0 auto;
}

.mobile-task-card:focus-visible {
  border-color: var(--teal);
  outline: 2px solid rgba(15, 118, 110, 0.2);
}

.mobile-card-title-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.mobile-card-title-row.is-without-drag {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-drag-handle {
  display: inline-grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  position: relative;
  align-self: start;
  place-items: center;
  color: var(--muted);
  cursor: grab;
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
  touch-action: none;
  user-select: none;
}

.is-mini-app .mobile-drag-handle::before {
  content: "";
  position: absolute;
  inset: -10px -16px -10px -10px;
}

.sortable-chosen .mobile-drag-handle,
.mobile-task-card.is-dragging .mobile-drag-handle {
  cursor: grabbing;
}

.mobile-task-card h3,
.mobile-event h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.is-mini-app .mobile-task-card.task-card h3 {
  font-size: 20px;
  line-height: 1.22;
}

.mobile-task-card h3.mobile-task-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.mobile-task-card p,
.mobile-event p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

.is-mini-app .mobile-task-card .task-next-preview {
  font-size: 18px;
  line-height: 1.38;
}

.mobile-task-card .badge {
  font-size: 13px;
}

.is-mini-app .mobile-task-card .badge,
.is-mini-app .mobile-task-card .task-card-route,
.is-mini-app .mobile-task-card .task-card-no,
.is-mini-app .mobile-task-card .drag-handle {
  font-size: 14px;
}

.mobile-task-content {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  background: transparent;
}

.mobile-task-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-plan-strip {
  display: grid;
  gap: 5px;
  min-width: 0;
  container-type: inline-size;
}

.task-plan-text {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: clamp(10px, 5.5cqw, 13px);
  font-weight: 720;
  line-height: 1.22;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.task-plan-recurring {
  min-width: 0;
  margin: -1px 0 0;
  color: #9a5f00;
  font-size: clamp(10px, 4.8cqw, 12px);
  font-weight: 760;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-plan-bar {
  display: flex;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecea;
}

.task-plan-segment {
  min-width: 0;
  height: 100%;
}

.task-plan-segment-elapsed {
  background: #0f766e;
}

.task-plan-segment-remaining {
  background: #a7d9cf;
}

.task-plan-segment-overdue,
.task-plan-segment-actual-late {
  background: #dc2626;
}

.task-plan-segment-actual {
  background: #64748b;
}

.task-plan-segment-no-plan {
  background: repeating-linear-gradient(
    135deg,
    #cbd5d1 0,
    #cbd5d1 5px,
    #edf2f0 5px,
    #edf2f0 10px
  );
}

.task-plan-labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  color: var(--muted);
  font-size: clamp(10px, 4.9cqw, 11px);
  font-weight: 720;
  line-height: 1.15;
}

.task-plan-labels span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-plan-labels span:nth-child(2) {
  text-align: center;
}

.task-plan-labels span:nth-child(3) {
  text-align: right;
}

.task-card:not(.proposal-card) .task-plan-strip {
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid #dce4e1;
  background: transparent;
}

.mobile-task-card .task-plan-strip {
  gap: 5px;
  margin: 0;
  padding: 9px 0 0;
  border-top: 1px solid #dce4e1;
  background: transparent;
}

.mobile-real-task-card .mobile-task-foot {
  padding: 8px 0 0;
  background: transparent;
}

.mobile-task-card .task-plan-text {
  color: var(--ink);
  font-size: 14px;
}

.is-mini-app .mobile-task-card .task-plan-text {
  font-size: 15px;
}

.is-mini-app .mobile-task-card .task-plan-labels {
  font-size: 12px;
}

.task-plan-strip-overdue .task-plan-text {
  color: #991b1b;
}

.task-plan-strip-today .task-plan-text,
.task-plan-strip-week .task-plan-text {
  color: var(--teal);
}

.mobile-task-list.is-drop-target {
  border-radius: 8px;
  background: rgba(15, 118, 110, 0.06);
}

.mobile-empty {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfc;
  font-size: 13px;
}

.mobile-event span {
  color: var(--muted);
  font-size: 12px;
}

.mobile-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 22px rgba(23, 32, 38, 0.12);
}

.mobile-task-card.task-card {
  background: var(--surface);
}

.mobile-task-card .task-card-main.mobile-task-main {
  padding: 9px 12px 12px;
}

.mobile-task-card.task-card:not(.proposal-card) .task-plan-strip {
  padding: 6px 0 0;
}

.mobile-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 48px;
  padding: 0 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.mobile-nav-plus {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 24px;
  font-weight: 820;
  line-height: 1;
}

.mobile-nav-button.is-active {
  color: var(--teal);
  background: #e7f1ec;
}

.mobile-nav-primary {
  color: var(--muted);
  background: transparent;
}

.mobile-nav-primary.is-active,
.mobile-nav-primary:hover,
.mobile-nav-primary:focus-visible {
  color: var(--teal);
  background: #e7f1ec;
}

.is-mini-app .task-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.is-mini-app .task-detail-dialog.is-training-target-detail {
  inset: 0;
  margin: 0;
  transform: none;
}

.is-mini-app .task-dialog.is-training-target-form {
  inset: 0;
  margin: 0;
  transform: none;
}

.is-mini-app .task-dialog > form,
.is-mini-app .detail-shell {
  max-height: 100dvh;
  min-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.is-mini-app .dialog-head h2 {
  font-size: 22px;
  line-height: 1.22;
}

.is-mini-app .detail-section h3 {
  font-size: 14px;
}

.is-mini-app .detail-section p {
  font-size: 17px;
  line-height: 1.48;
}

.is-mini-app .detail-facts dt,
.is-mini-app .detail-facts dd {
  font-size: 15px;
}

.is-mini-app .detail-action-toggle {
  font-size: 15px;
}

.is-mini-app input,
.is-mini-app select,
.is-mini-app textarea,
.is-mini-app button {
  font-size: 16px;
  touch-action: manipulation;
}

.is-mini-app .task-dialog input,
.is-mini-app .task-dialog select,
.is-mini-app .task-dialog textarea {
  inline-size: 100%;
  max-inline-size: 100%;
}

.is-mini-app .task-dialog .task-recurring-toggle {
  inline-size: 100%;
  min-height: 42px;
}

.is-mini-app .task-dialog .task-recurring-toggle input,
.is-mini-app .task-dialog .checkbox-line input {
  inline-size: 18px;
  max-inline-size: 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
}

.is-mini-app .task-dialog .task-recurring-toggle span {
  line-height: 1.25;
  overflow-wrap: normal;
}

.is-mini-app .task-comment-form {
  gap: 8px;
  padding: 10px;
}

.is-mini-app .task-comment-form textarea {
  min-height: 92px;
  max-height: 160px;
}

.is-mini-app .task-comment-status:empty {
  display: none;
}

.is-mini-app .date-input-wrap input[type="date"] {
  min-height: 42px;
  padding-right: 46px;
}

.is-mini-app .date-input-wrap:not(.has-value) input[type="date"] {
  color: transparent;
}

.is-mini-app .date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.is-mini-app .date-empty-hint {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 12px;
  display: block;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.is-mini-app .date-input-wrap.has-value .date-empty-hint {
  display: none;
}

.is-mini-app .date-calendar-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  display: block;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--muted);
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.is-mini-app .date-calendar-icon::before {
  display: none;
  content: none;
}

.is-mini-app .date-calendar-icon::after {
  display: none;
  content: none;
}

.is-mini-app .task-recurring-box {
  inline-size: 100%;
  max-inline-size: 100%;
}

.is-mini-app .task-recurring-box .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.is-mini-app .task-recurring-box input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  block-size: 44px;
  min-width: 0;
  min-block-size: 44px;
  padding-block: 0;
  line-height: 44px;
  text-align: center;
  text-align-last: center;
}

.is-mini-app .task-recurring-box input[type="time"]::-webkit-date-and-time-value {
  min-block-size: 44px;
  margin: 0;
  line-height: 44px;
  text-align: center;
}

.is-mini-app .task-recurring-box input[type="time"]::-webkit-datetime-edit,
.is-mini-app .task-recurring-box input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 44px;
}

.is-mini-app .participant-picker {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.is-mini-app .participant-picker select,
.is-mini-app .participant-add-button {
  height: 42px;
  min-height: 42px;
}

.is-mini-app label span,
.is-mini-app .mobile-wizard-indicator {
  font-size: 13px;
}

.mobile-wizard-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbf9;
}

.mobile-wizard-indicator {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}

.mini-step-hidden {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .checkbox-field {
  border-color: var(--line);
  color: var(--ink);
  background: #121b19;
}

body.theme-dark .mobile-compact-select-shell select {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

body.theme-dark .mobile-compact-select-shell select option {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #768984;
}

body.theme-dark .toolbar,
body.theme-dark .proposal-panel,
body.theme-dark .empty,
body.theme-dark .mobile-empty,
body.theme-dark .task-dialog,
body.theme-dark .detail-shell {
  background: var(--surface);
}

body.theme-dark .column-title-button:hover,
body.theme-dark .column-title-button:focus-visible {
  border-color: #55706a;
  color: var(--ink);
  background: #202c29;
}

body.theme-dark .status-drop-target.is-drop-target {
  border-color: var(--teal);
  color: var(--ink);
  background: #183a35;
  box-shadow: inset 0 0 0 1px rgba(71, 199, 187, 0.28);
}

body.theme-dark .proposal-scope-button {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}

body.theme-dark .proposal-scope-button:hover,
body.theme-dark .proposal-scope-button:focus-visible {
  border-color: #55706a;
  color: var(--ink);
  background: #202c29;
  outline: none;
}

body.theme-dark .proposal-scope-button.is-active {
  border-color: rgba(71, 199, 187, 0.42);
  color: #8de7dd;
  background: #16322f;
}

body.theme-dark .observation-decision-section-count {
  color: #a9c0ba;
  background: #202c29;
}

body.theme-dark .task-card,
body.theme-dark .mobile-task-card,
body.theme-dark .mobile-event,
body.theme-dark .proposal-card.task-card {
  border-color: var(--line);
  background: #111a18;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .task-card:hover,
body.theme-dark .task-card:focus-visible,
body.theme-dark .mobile-task-card:focus-visible {
  border-color: #4f6761;
  box-shadow: var(--shadow);
}

body.theme-dark .task-card-main,
body.theme-dark .mobile-task-main {
  background: var(--surface);
}

body.theme-dark .child-stream-summary,
body.theme-dark .child-stream-item,
body.theme-dark .task-parent-note,
body.theme-dark .task-child-editor,
body.theme-dark .mobile-proposal-card,
body.theme-dark .mobile-event,
body.theme-dark .order-sheet-summary,
body.theme-dark .economics-panel,
body.theme-dark .mobile-wizard-controls {
  border-color: var(--line);
  background: #14201d;
}

body.theme-dark .order-sheet-summary-item {
  border-color: #344a45;
  background: #192522;
}

body.theme-dark .order-sheet-summary-label,
body.theme-dark .task-child-editor p {
  color: #a9c0ba;
}

body.theme-dark .order-sheet-summary-value,
body.theme-dark .task-child-editor h3 {
  color: #edf8f5;
}

body.theme-dark .task-card-top,
body.theme-dark .mobile-real-task-card .task-meta,
body.theme-dark .task-card:not(.proposal-card) .task-plan-strip,
body.theme-dark .mobile-task-card .task-plan-strip {
  border-color: #344a45;
}

body.theme-dark .task-card-no {
  color: #dbeafe;
}

body.theme-dark .task-card-route,
body.theme-dark .task-text-label,
body.theme-dark .drag-handle,
body.theme-dark .task-plan-labels,
body.theme-dark .mobile-event span {
  color: var(--muted);
}

body.theme-dark .task-text-value,
body.theme-dark .checkbox-field span {
  color: var(--ink);
}

body.theme-dark .attachment-row {
  border-color: #2f3f3b;
  background: #17231f;
}

body.theme-dark .attachment-title {
  color: var(--ink);
}

body.theme-dark .attachment-delete-button {
  border-color: #6f2e28;
  color: #ffc8c0;
  background: #2b1716;
}

body.theme-dark .attachment-delete-button:disabled {
  border-color: #31413d;
  color: #7f968f;
  background: #1c2825;
}

body.theme-dark .reset-button,
body.theme-dark .theme-toggle,
body.theme-dark .icon-button,
body.theme-dark .zoom-button {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}

body.theme-dark .reset-button:hover,
body.theme-dark .theme-toggle:hover,
body.theme-dark .icon-button:hover,
body.theme-dark .zoom-button:hover {
  border-color: #55706a;
  background: #202c29;
}

body.theme-dark .primary-button {
  border-color: #5ee1d4;
  color: #06211d;
  background: #5ee1d4;
}

body.theme-dark .theme-toggle-mark {
  color: #8de7dd;
}

body.theme-dark .reset-button:disabled,
body.theme-dark .primary-button:disabled,
body.theme-dark .danger-button:disabled,
body.theme-dark .task-dialog :disabled {
  border-color: #2a3835;
  color: #71807b;
  background: #17201e;
}

body.theme-dark .danger-button {
  border-color: #7f3a35;
  color: #ffc7c0;
  background: #351d1b;
}

body.theme-dark .badge {
  color: #d5e0dc;
  background: #24302d;
}

body.theme-dark .attachment-badge {
  border-color: #fb923c;
  color: #fff7ed;
  background: #f97316;
  box-shadow: 0 2px 7px rgba(249, 115, 22, 0.25);
}

body.theme-dark .comment-count-badge {
  border-color: #3f736c;
  color: #bdf3ea;
  background: #15312e;
}

body.theme-dark .task-detail-tab {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}

body.theme-dark .task-detail-tab:hover,
body.theme-dark .task-detail-tab:focus-visible,
body.theme-dark .task-detail-tab.is-active {
  border-color: #4f746d;
  color: #bdf3ea;
  background: #15312e;
}

body.theme-dark .task-detail-tab-count {
  color: #06211d;
  background: #5ee1d4;
}

body.theme-dark .detail-action-toggle {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}

body.theme-dark .detail-action-toggle:hover,
body.theme-dark .detail-action-toggle:focus-visible,
body.theme-dark .detail-action-toggle.is-active {
  border-color: #4f746d;
  color: #bdf3ea;
  background: #15312e;
}

body.theme-dark .detail-comments-count {
  color: #06211d;
  background: #5ee1d4;
}

body.theme-dark .task-detail-empty,
body.theme-dark .task-comment-form,
body.theme-dark .task-comment-row {
  border-color: var(--line);
  background: #14201d;
}

body.theme-dark .badge-priority-high {
  border-color: #8d413a;
  color: #ffc8c0;
  background: #3a211f;
}

body.theme-dark .badge-priority-medium {
  border-color: #8a6224;
  color: #ffdca0;
  background: #332718;
}

body.theme-dark .badge-priority-low {
  border-color: #52606a;
  color: #d8e0e7;
  background: #253039;
}

body.theme-dark .badge-recurring {
  color: #a5f3fc;
  background: #15343a;
}

body.theme-dark .task-card.task-card-recurring {
  border-color: #83591f;
}

body.theme-dark .badge-recurring-icon {
  border-color: #b26a1c;
  background: #d97706;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
}

body.theme-dark .badge-project-kind,
body.theme-dark .task-card-project-badge {
  border-color: #3f736c;
  color: #bdf3ea;
  background: #15312e;
}

body.theme-dark .task-plan-bar {
  background: #263633;
}

body.theme-dark .task-plan-segment-remaining {
  background: #4c9187;
}

body.theme-dark .task-plan-segment-no-plan {
  background: repeating-linear-gradient(
    135deg,
    #4c5f5a 0,
    #4c5f5a 5px,
    #25322f 5px,
    #25322f 10px
  );
}

body.theme-dark .task-plan-strip-overdue .task-plan-text {
  color: #ffb3ab;
}

body.theme-dark .task-plan-recurring {
  color: #f3ba5c;
}

body.theme-dark .recurring-preview {
  border-color: #83591f;
  color: #ffdc9a;
  background: #332718;
}

body.theme-dark .app-toast-close {
  color: #dcfff6;
  background: rgba(220, 255, 246, 0.1);
}

body.theme-dark .app-toast-close:hover,
body.theme-dark .app-toast-close:focus-visible {
  background: rgba(220, 255, 246, 0.18);
}

body.theme-dark .task-list {
  scrollbar-color: #5c756f #17211f;
}

body.theme-dark .task-list::-webkit-scrollbar-track {
  background: #17211f;
}

body.theme-dark .task-list::-webkit-scrollbar-thumb {
  border-color: #17211f;
  background: #5c756f;
}

body.theme-dark .task-row {
  background: var(--surface);
}

body.theme-dark .task-row:hover,
body.theme-dark .task-row:focus-visible {
  border-color: #55706a;
  background: #202c29;
}

body.theme-dark .grid-host .gridjs-container,
body.theme-dark .grid-host .gridjs-wrapper,
body.theme-dark .grid-host .gridjs-table,
body.theme-dark .grid-host .gridjs-thead,
body.theme-dark .grid-host .gridjs-tbody,
body.theme-dark .grid-host .gridjs-tr,
body.theme-dark .grid-host .gridjs-footer {
  color: var(--ink);
  background: var(--surface);
}

body.theme-dark .grid-host th.gridjs-th {
  color: var(--ink);
  background: var(--surface-soft);
}

body.theme-dark .grid-host td.gridjs-td {
  color: var(--ink);
  background: var(--surface);
}

body.theme-dark .grid-host td.gridjs-td,
body.theme-dark .grid-host th.gridjs-th {
  border-color: var(--line);
}

body.theme-dark .grid-host .gridjs-tr:hover td.gridjs-td {
  background: #202c29;
}

body.theme-dark .grid-host .gridjs-search-input,
body.theme-dark .grid-host .gridjs-pages button {
  border-color: var(--line);
  color: var(--ink);
  background: #121b19;
}

body.theme-dark .grid-host .gridjs-pages button:hover {
  border-color: #55706a;
  background: #202c29;
}

body.theme-dark .grid-host .gridjs-summary {
  color: var(--muted);
}

body.theme-dark .roadmap-shell,
body.theme-dark .roadmap-month-row,
body.theme-dark .roadmap-day-row,
body.theme-dark .roadmap-left,
body.theme-dark .roadmap-lane {
  background: var(--surface);
}

body.theme-dark .roadmap-day,
body.theme-dark .roadmap-day-guide,
body.theme-dark .roadmap-task-row {
  border-color: #2b3c38;
}

body.theme-dark .roadmap-task-cell:hover,
body.theme-dark .roadmap-task-cell:focus-visible {
  background: #202c29;
}

body.theme-dark .roadmap-bar {
  border-color: rgba(139, 185, 240, 0.28);
  color: #dbeafe;
  background: #17222b;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}

body.theme-dark .roadmap-bar:hover,
body.theme-dark .roadmap-bar:focus-visible {
  border-color: var(--blue);
}

body.theme-dark .roadmap-segment-plan,
body.theme-dark .roadmap-segment-remaining {
  background: #31423e;
}

body.theme-dark .roadmap-segment-elapsed,
body.theme-dark .roadmap-segment-no-plan {
  background: #8a6827;
}

body.theme-dark .roadmap-segment-actual,
body.theme-dark .roadmap-segment-actual-late {
  background: #4f9a5c;
}

body.theme-dark .roadmap-segment-overdue {
  background: #a94843;
}

body.theme-dark .roadmap-bar-overdue {
  color: #ffb3ab;
  background: #351d1b;
}

body.theme-dark .roadmap-bar-soon,
body.theme-dark .roadmap-bar-waiting {
  color: #ffdca0;
  background: #332718;
}

body.theme-dark .roadmap-bar-done {
  color: #c5f4cc;
  background: #18301d;
}

body.theme-dark .roadmap-bar-no_due,
body.theme-dark .roadmap-bar-no-end {
  color: #d8e0e7;
  background: #253039;
}

body.theme-dark .roadmap-bar-paused {
  color: #dcd6ff;
  background: #2b2438;
}

body.theme-dark .mobile-nav {
  background: rgba(16, 22, 20, 0.96);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.34);
}

body.theme-dark .mobile-nav-button.is-active,
body.theme-dark .mobile-nav-primary.is-active,
body.theme-dark .mobile-nav-primary:hover,
body.theme-dark .mobile-nav-primary:focus-visible {
  color: #8de7dd;
  background: #16322f;
}

@media (max-width: 900px) {
  .training-body {
    grid-template-columns: 1fr;
  }

  .training-figure img {
    max-height: 320px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .roadmap-control-row,
  .roadmap-advanced-panel {
    grid-template-columns: 1fr;
  }

  .roadmap-zoom {
    flex-wrap: wrap;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 1200px) {
  .person-tabs {
    width: calc(100% - var(--dashboard-corner-space, 48px));
    gap: 4px;
  }

  .person-tab {
    padding: 0 9px;
  }

  .theme-toggle {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .theme-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .shell {
    width: min(100vw - 20px, 680px);
    padding-top: 16px;
  }

  .dashboard-corner-actions {
    position: static;
    margin-bottom: 4px;
    justify-content: flex-start;
  }

  .training-button {
    min-width: 34px;
  }

  .training-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    height: auto;
  }

  .training-shell {
    padding: 14px;
  }

  .topbar,
  .mode-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .reports-link {
    justify-content: center;
    width: 100%;
  }

  .mode-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    font-size: 27px;
  }

  .source-pill {
    width: 100%;
    text-align: left;
  }

  .person-tabs,
  .mode-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .person-tab,
  .mode-tab {
    flex: 1 0 auto;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .board-scroller {
    overflow-x: visible;
  }

  .board {
    grid-template-columns: 1fr;
    height: auto;
    min-width: 0;
  }

  .column {
    height: auto;
    min-height: 0;
  }

  .task-list {
    min-height: 0;
    overflow: visible;
    padding-inline: 0;
  }

  .task-row {
    grid-template-columns: 1fr;
  }

  .row-side {
    justify-content: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .detail-facts {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ===== Календарь задач (ported from IzmSis canonical, 2026-06-28) ===== */
.calendar-wrap {
  margin-top: 16px;
}

.calendar-panel {
  display: grid;
  gap: 8px;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.calendar-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.calendar-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-mode-switch {
  display: inline-flex;
  min-height: 34px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.calendar-mode-button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
}

.calendar-mode-button.is-active,
.calendar-mode-button:hover,
.calendar-mode-button:focus-visible {
  color: #17443f;
  background: #e7f1ec;
  outline: none;
}

.calendar-range {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
  font-weight: 760;
}

.calendar-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.calendar-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 8px;
}

.calendar-grid-month {
  grid-auto-rows: minmax(104px, auto);
}

.calendar-grid-week {
  align-items: start;
  grid-auto-rows: auto;
}

.calendar-day {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.calendar-day {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto;
  overflow: hidden;
}

.calendar-day.is-muted {
  opacity: 0.56;
}

.calendar-day.is-today {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8faf9;
}

.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-transform: lowercase;
}

.calendar-day-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.calendar-task-stack,
.calendar-no-due-list {
  display: grid;
  align-content: start;
  gap: 4px;
  grid-auto-rows: max-content;
  padding: 6px;
}

.calendar-task {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #dbe5df;
  border-left: 3px solid #0f766e;
  border-radius: 5px;
  color: var(--ink);
  background: #f6fbf8;
  cursor: pointer;
  line-height: 1.15;
  text-align: left;
}

.calendar-task:hover,
.calendar-task:focus-visible {
  border-color: #0f766e;
  background: #edf7f2;
  outline: none;
}

.calendar-task-overdue {
  border-left-color: #c2410c;
  background: #fff7ed;
}

.calendar-task-soon,
.calendar-task-today {
  border-left-color: #b7791f;
  background: #fffbeb;
}

.calendar-task-done {
  border-left-color: #7a8792;
  background: #f4f6f7;
}

.calendar-task-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.calendar-task-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-task-responsible {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-task-status {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.calendar-task-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-status-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: #0f766e;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.calendar-status-icon-active {
  fill: currentColor;
  stroke: none;
}

.calendar-status-icon-new {
  color: #64748b;
}

.calendar-status-icon-review {
  color: #0f766e;
}

.calendar-status-icon-paused {
  color: #b7791f;
}

.calendar-status-icon-done {
  color: #64748b;
}

.calendar-status-icon-default {
  color: #7a8792;
  fill: currentColor;
  stroke: none;
}

.calendar-day-empty {
  margin: 0;
  padding: 6px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #fafafa;
  font-size: 11px;
  line-height: 1.3;
}

.calendar-more {
  min-height: 30px;
  border: 1px dashed #9fb8b2;
  border-radius: 7px;
  color: #315b55;
  background: #f7fbf9;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}

.calendar-more:hover,
.calendar-more:focus-visible {
  border-color: #0f766e;
  background: #e7f1ec;
  outline: none;
}

.calendar-no-due {
  position: sticky;
  top: 12px;
  padding: 12px;
}

.calendar-no-due-list {
  padding: 10px 0 0;
}

body.theme-dark .calendar-mode-switch,
body.theme-dark .calendar-range,
body.theme-dark .calendar-day,
body.theme-dark .calendar-no-due {
  border-color: #263733;
  background: #101c1a;
}

body.theme-dark .calendar-day-head {
  border-color: #263733;
  background: #14211f;
}

body.theme-dark .calendar-mode-button.is-active,
body.theme-dark .calendar-mode-button:hover,
body.theme-dark .calendar-mode-button:focus-visible,
body.theme-dark .calendar-more:hover,
body.theme-dark .calendar-more:focus-visible {
  color: #dff6ef;
  background: #1c3b35;
}

body.theme-dark .calendar-task {
  border-color: #263733;
  color: #e8efed;
  background: #14211f;
}

body.theme-dark .calendar-task:hover,
body.theme-dark .calendar-task:focus-visible {
  border-color: #5fc9bb;
  background: #17312d;
}

body.theme-dark .calendar-task-overdue {
  background: #2b1b14;
}

body.theme-dark .calendar-task-soon,
body.theme-dark .calendar-task-today {
  background: #2b2412;
}

body.theme-dark .calendar-task-done,
body.theme-dark .calendar-day-empty,
body.theme-dark .calendar-more {
  border-color: #2d403b;
  background: #111917;
}

body.theme-dark .calendar-status-icon-active,
body.theme-dark .calendar-status-icon-review {
  color: #5fc9bb;
}

body.theme-dark .calendar-status-icon-paused {
  color: #e2ad4f;
}

body.theme-dark .calendar-status-icon-new,
body.theme-dark .calendar-status-icon-done,
body.theme-dark .calendar-status-icon-default {
  color: #9fb2ad;
}

@media (max-width: 900px) {
  .calendar-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-no-due {
    position: static;
  }

  .calendar-grid {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
  }

}

@media (max-width: 720px) {
  .calendar-head {
    display: grid;
    align-items: start;
  }

  .calendar-controls {
    justify-content: flex-start;
  }

  .calendar-grid-week,
  .calendar-grid-month {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  .calendar-day {
    min-height: 0;
  }

}

/* ===== S1: фильтр ролей «Все роли ▾» + чип «Требует решения» (2026-06-28) ===== */
.decision-filter-chip {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.decision-filter-chip:hover {
  border-color: var(--teal);
}
.decision-filter-chip.is-active {
  background: #fdf6ea;
  border-color: #f59e0b;
  color: #92400e;
}
.decision-filter-chip-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
}
.decision-filter-chip.is-hidden {
  display: none;
}

/* ===== S5 v2: Bitrix combined filter+search bar + counters (2026-06-28) ===== */
.action-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.action-bar .create-button { font-weight: 700; padding: 10px 18px; white-space: nowrap; box-shadow: 0 2px 8px rgba(15, 118, 110, 0.28); }

/* Telegram uses its own bottom navigation; desktop controls would duplicate it. */
body.is-mini-app .action-bar { display: none !important; }
.role-field { display: inline-flex; align-items: center; }
.role-field.is-hidden { display: none; }
.role-field select {
  appearance: none; -webkit-appearance: none; font: inherit; font-weight: 600; color: var(--ink);
  background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%235e6a72'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%202%206%206%2010%202'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 34px 9px 12px; cursor: pointer;
}
.role-field select:hover { border-color: var(--teal); }
.filter-bar-wrap { position: relative; flex: 1 1 320px; min-width: 220px; }
.filter-search-bar {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px 10px; cursor: text; min-height: 40px;
}
.filter-search-bar.is-focused { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); }
.active-filter-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.active-filter-chips.is-empty { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px;
  color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.filter-chip:hover { border-color: var(--teal); }
.filter-chip-x { font-size: 14px; line-height: 1; color: var(--muted); }
.filter-chip:hover .filter-chip-x { color: var(--teal); }
.filter-chip-more { background: transparent; color: var(--muted); }
.filter-search-input { flex: 1 1 80px; min-width: 80px; border: none; background: transparent; padding: 6px 0; font: inherit; color: var(--ink); outline: none; }
.filter-search-clear { border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.filter-search-clear:hover { color: var(--ink); }
.filter-search-clear.is-hidden { display: none; }
.filter-search-icon { display: inline-flex; color: var(--muted); }
.filter-popover {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  display: flex; gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; min-width: 420px;
}
.filter-popover.is-hidden { display: none; }
.filter-popover-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px; min-width: 180px; border-right: 1px solid var(--line); }
.filter-preset { text-align: left; font: inherit; font-size: 14px; color: var(--ink); background: transparent; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.filter-preset:hover { background: var(--surface-soft); }
.filter-preset.is-active { background: rgba(15, 118, 110, 0.12); color: var(--teal); font-weight: 600; }
.filter-popover-reset { margin-top: 6px; text-align: left; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: none; cursor: pointer; padding: 8px 10px; }
.filter-popover-reset:hover { color: var(--teal); }
.filter-popover-fields { display: flex; flex-direction: column; gap: 12px; padding: 14px; flex: 1; }
.filter-popover-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.filter-popover-fields select { appearance: none; -webkit-appearance: none; font: inherit; color: var(--ink); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%235e6a72'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%202%206%206%2010%202'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 7px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 30px 8px 10px; }
.mode-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.task-counters { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.mode-row .mode-actions { display: inline-flex; align-items: center; gap: 8px; }
.counter-button {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px;
  color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.counter-button:hover { background: var(--surface-soft); }
.counter-button.is-hidden { display: none; }
.counter-label { color: var(--muted); }
.counter-num {
  display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center;
  justify-content: center; border-radius: 10px; color: #ffffff; font-size: 11px; font-weight: 700;
  background: var(--muted);
}
.counter-overdue .counter-num { background: #dc2626; }
.counter-overdue.is-active { background: #fdf1f0; }
.counter-overdue.is-active .counter-label { color: #991b1b; }
.counter-decision .counter-num { background: #f59e0b; }
.counter-decision.is-active { background: #fdf6ea; }
.counter-decision.is-active .counter-label { color: #92400e; }
@media (max-width: 760px) {
  .filter-bar-wrap { flex-basis: 100%; order: 5; }
  .filter-popover { min-width: 0; flex-direction: column; }
  .filter-popover-presets { border-right: none; border-bottom: 1px solid var(--line); }
  .mode-row .mode-actions { margin-left: 0; }
}

/* ===== Card role labels (Rail point 2, 2026-06-28): viewer role in «Все роли» ===== */
.badge-card-role {
  min-height: 21px;
  padding: 2px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-card-role-assigned { color: #14603d; background: #d7eede; }       /* Делаю */
.badge-card-role-created { color: #1e40af; background: #dbe8fb; }        /* Поручил */
.badge-card-role-participating { color: #5b21b6; background: #e7defb; }  /* Участвую */
.badge-card-role-watching { color: #44515a; background: #e6eaec; }       /* Наблюдаю */

/* ===== S4 «Сроки» deadline-bucket view (2026-06-28) ===== */
.deadlines-wrap.is-hidden { display: none; }
.deadlines-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; }
.deadline-column {
  flex: 1 0 230px; min-width: 230px; background: var(--surface-soft);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.deadline-column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 2px 4px; }
.deadline-column-head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.deadline-column-head .count {
  display: inline-flex; min-width: 22px; height: 22px; padding: 0 7px; align-items: center;
  justify-content: center; border-radius: 11px; background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.deadline-list { display: flex; flex-direction: column; gap: 10px; min-height: 70px; }
.deadline-column-overdue { background: #fdecec; border-color: #f4c4c4; }
.deadline-column-overdue .deadline-column-head h2 { color: #991b1b; }
.deadline-column-today { background: #eef8fe; border-color: #cde7f7; }
.deadline-empty { color: var(--muted); text-align: center; font-size: 13px; padding: 14px 0; opacity: 0.8; }
.deadline-list .task-card.is-locked-deadline { cursor: default; }
.deadline-list .task-card.is-reschedulable { cursor: grab; }
@media (max-width: 760px) {
  .deadline-column { flex-basis: 78%; min-width: 78%; }
}

/* ===== Variant A: «Все сотрудники» manager tab (2026-06-29) ===== */
.person-tab-all {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 650;
  color: var(--teal); background: var(--surface); border: 1px solid var(--teal);
  border-radius: 999px; padding: 5px 13px 5px 11px; cursor: pointer; white-space: nowrap;
}
.person-tab-all:hover { background: rgba(15, 118, 110, 0.08); }
.person-tab-all.is-active { background: var(--teal); color: #ffffff; border-color: var(--teal); }
.person-tab-all-ico { display: inline-flex; align-items: center; }

/* ===== Issue 1: «В архив» button in the card swipe quick-panel (2026-06-29) ===== */
.card-quick-actions.has-remove-action { grid-template-rows: auto auto; }
.card-quick-actions.has-remove-action .card-quick-save { grid-column: 1; grid-row: 1; }
.card-quick-actions.has-remove-action .card-quick-close { grid-column: 2; grid-row: 1; }
.card-quick-actions.has-remove-action .card-quick-remove {
  grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 36px; white-space: normal;
}

/* === KINETICO SETTINGS PANEL (gear menu) — Rail 2026-06-29 ===
   Appended to styles.css. Uses the dashboard's own CSS variables so the panel
   follows light/dark automatically. Prefix .kset- to avoid collisions. */

/* Corner: keep the dedicated Training icon beside the gear; theme stays in Settings. */
.dashboard-corner-actions.kset-corner-lean .theme-toggle { display: none !important; }

/* ---- Real font-size levels (replaces the old `zoom` approach) ----
   The old version zoomed `.shell`, which scaled the whole page and pushed the
   corner buttons out of view. Here we change FONT-SIZE only: layout widths are in
   px and stay fixed, so nothing moves off-screen. `--kset-fs` is the scale factor;
   the per-rule overrides below are GENERATED from the live base CSS at deploy time
   (only top-level font-size rules), gated behind `body.kset-font-scaled` so the
   default «Обычный» renders the original, untouched sizes. */
body.kset-font-m { --kset-fs: 1.13; }
body.kset-font-l { --kset-fs: 1.28; }
body.kset-font-scaled .shell { font-size: calc(1rem * var(--kset-fs, 1)); }
body.kset-font-scaled .eyebrow { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled h1 { font-size: calc(34px * var(--kset-fs, 1)); }
body.kset-font-scaled .reports-link { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .source-pill { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .person-avatar { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .person-more { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .person-picker-search input { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .person-picker-option { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .role-strip { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .metric span { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .metric strong { font-size: calc(34px * var(--kset-fs, 1)); }
body.kset-font-scaled .slice-chip { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-zoom > span { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-zoom-range { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .zoom-button { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-legend { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled label, body.kset-font-scaled .form-field { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .checkbox-field span { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .local-note { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .column-header h2 { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .column-signal { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .count { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-list:empty::before { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .card-quick-panel label { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .card-quick-close { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .card-quick-error { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-card-decision-button { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .drag-handle { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-card h3 { font-size: calc(17px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-card-no { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-card-route { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .badge { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .comment-count-badge { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .badge-priority { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-card-project-badge { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-text { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-foot { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-head h2 { font-size: calc(21px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-head p { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-empty { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .observation-decision-section-head h3 { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .observation-decision-section-count { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .observation-decision-section-empty { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .decision-card-marker { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-card h3 { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-card p, body.kset-font-scaled .mobile-proposal-card p { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .proposal-card .proposal-description, body.kset-font-scaled .mobile-proposal-card .proposal-description { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-left-head, body.kset-font-scaled .roadmap-left-subhead { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-month { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-day { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-shell[data-day-label-mode="anchors"] .roadmap-day, body.kset-font-scaled .roadmap-shell[data-day-label-mode="months"] .roadmap-day { font-size: calc(10px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-shell[data-day-label-mode="weekly"] .roadmap-day { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-task-title { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-task-meta, body.kset-font-scaled .roadmap-task-dates { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .roadmap-bar { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .column-focus-head h2 { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .grid-host .gridjs-table { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-row h2 { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-row p { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-dialog .task-recurring-toggle { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-dialog .schedule-mode-switch span { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .archive-head h2 { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .event-row h2 { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .event-row span { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .training-drawer-toggle { font-size: calc(24px * var(--kset-fs, 1)); }
body.kset-font-scaled:not(.is-mini-app) .training-dialog.is-target-mode .training-copy h3 { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .training-progress { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .training-copy h3 { font-size: calc(22px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-parent-note { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .dialog-head h2 { font-size: calc(20px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-kicker { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .icon-button { font-size: calc(22px * var(--kset-fs, 1)); }
body.kset-font-scaled .participant-add-button { font-size: calc(22px * var(--kset-fs, 1)); }
body.kset-font-scaled .participant-chip { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .participant-remove-button { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .order-sheet-group h3 { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .economic-preview { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .recurring-preview { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-child-editor h3 { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-child-editor p { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .form-error { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-detail-tab { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-detail-tab-count { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-section h3 { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .order-sheet-summary-label { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .order-sheet-summary-value { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .order-sheet-details summary { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-subtitle { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-section p { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-detail-empty { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-comment-status { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-comment-meta { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .task-comment-row p { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .parent-return-button { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .child-streams-intro { font-size: calc(13px * var(--kset-fs, 1)) !important; }
body.kset-font-scaled .child-stream-title { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .child-stream-meta, body.kset-font-scaled .child-stream-next { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .attachment-title { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .attachment-meta, body.kset-font-scaled .attachment-status { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-facts dt, body.kset-font-scaled .detail-facts dd { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-action-toggle { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .detail-comments-count { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app h1 { font-size: calc(24px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app.is-mini-app-booting .mobile-view:empty::before { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-page-title h2 { font-size: calc(22px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-section-title h2 { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-view-context-field span { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-view-context-field select { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-compact-select-value { font-size: calc(16px * var(--kset-fs, 1)) !important; }
body.kset-font-scaled .app-toast { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .app-toast-close { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-status-chip, body.kset-font-scaled .mobile-sort-button { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-status-count { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-drag-handle { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-task-card h3, body.kset-font-scaled .mobile-event h3 { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .mobile-task-card.task-card h3 { font-size: calc(20px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-task-card h3.mobile-task-title { font-size: calc(19px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-task-card p, body.kset-font-scaled .mobile-event p { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .mobile-task-card .task-next-preview { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-task-card .badge { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .mobile-task-card .badge, body.kset-font-scaled .is-mini-app .mobile-task-card .task-card-route, body.kset-font-scaled .is-mini-app .mobile-task-card .task-card-no, body.kset-font-scaled .is-mini-app .mobile-task-card .drag-handle { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-task-card .task-plan-text { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .mobile-task-card .task-plan-text { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .mobile-task-card .task-plan-labels { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-empty { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-event span { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-nav-button { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-nav-plus { font-size: calc(24px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .dialog-head h2 { font-size: calc(22px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .detail-section h3 { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .detail-section p { font-size: calc(17px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .detail-facts dt, body.kset-font-scaled .is-mini-app .detail-facts dd { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .detail-action-toggle { font-size: calc(15px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app input, body.kset-font-scaled .is-mini-app select, body.kset-font-scaled .is-mini-app textarea, body.kset-font-scaled .is-mini-app button { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app .date-empty-hint { font-size: calc(16px * var(--kset-fs, 1)); }
body.kset-font-scaled .is-mini-app label span, body.kset-font-scaled .is-mini-app .mobile-wizard-indicator { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .mobile-wizard-indicator { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-head h2 { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-head p { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-mode-button { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-range { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-day-head span { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-day-head strong { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-task-meta { font-size: calc(10.5px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-task-title { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-day-empty { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .calendar-more { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .decision-filter-chip { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .decision-filter-chip-count { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-chip { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-chip-x { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-search-clear { font-size: calc(18px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-preset { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-popover-reset { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .filter-popover-fields label { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .counter-button { font-size: calc(13px * var(--kset-fs, 1)); }
body.kset-font-scaled .counter-num { font-size: calc(11px * var(--kset-fs, 1)); }
body.kset-font-scaled .badge-card-role { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .deadline-column-head h2 { font-size: calc(14px * var(--kset-fs, 1)); }
body.kset-font-scaled .deadline-column-head .count { font-size: calc(12px * var(--kset-fs, 1)); }
body.kset-font-scaled .deadline-empty { font-size: calc(13px * var(--kset-fs, 1)); }

/* ---- Dark-theme card state tints (Rail 2026-06-29) ----
   The light state tints (#fdf1f0 overdue / #fdf6ea needs-decision / #eef8fe recurring)
   out-specify the dark base `.task-card-main` rule, so in dark mode the card bodies stayed
   bright and clashed. These higher-specificity overrides give each state a subtle DARK tint
   harmonised with the dark surface (#18211f) — colour cue kept, text stays readable. */
body.theme-dark .task-card.task-card-recurring { border-color: #2f5566; }
body.theme-dark .task-card.task-card-needs-decision { border-color: #6d572a; }
body.theme-dark .task-card.task-card-overdue { border-color: #5f3a36; }
body.theme-dark .task-card.task-card-recurring > .task-card-main { background: #16242c; }
body.theme-dark .task-card.task-card-needs-decision > .task-card-main { background: #2b2517; }
body.theme-dark .task-card.task-card-overdue > .task-card-main { background: #2c1b1a; }
/* accent strips: a touch brighter so they still read on the dark card body */
body.theme-dark .task-card.task-card-overdue .task-card-accent { background: #ef4444; }
body.theme-dark .task-card.task-card-needs-decision .task-card-accent { background: #f6ad36; }

/* Gear button — matches the other corner controls. */
.kset-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  pointer-events: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.kset-gear:hover { background: var(--surface-soft); }
.kset-gear.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }
.kset-gear svg { display: block; }
.kset-gear.has-news::after {
  content: ""; position: absolute; transform: translate(13px, -11px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  border: 2px solid var(--surface);
}
.kset-gear { position: relative; }

/* Backdrop + panel */
.kset-backdrop { position: fixed; inset: 0; background: transparent; z-index: 5990; }
.kset-panel {
  position: fixed; z-index: 6000; width: 324px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px); overflow: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  padding: 14px 16px;
  font-size: 14px; line-height: 1.45;
}
.kset-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kset-title { font-size: 15px; font-weight: 600; }
.kset-close {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
}
.kset-close:hover { background: var(--surface-soft); }

.kset-sec { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }

/* Profile */
.kset-profile { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.kset-avatar-wrap { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; }
.kset-profile .person-avatar { width: 46px; height: 46px; font-size: 18px; }
.kset-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kset-name { font-size: 14px; font-weight: 600; }
.kset-login { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Profile photo: avatar box + camera button overlay + <img> avatars */
.kset-avatar-box { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.kset-avatar-box .kset-avatar-wrap { width: 46px; height: 46px; }
.kset-avatar-cam {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); border-radius: 50%;
  background: var(--teal); color: #fff; cursor: pointer;
  transition: filter .12s, background .12s;
}
.kset-avatar-cam:hover { filter: brightness(1.08); }
.kset-avatar-cam svg { display: block; }
.kset-avatar-cam.kset-cam-busy { opacity: .55; pointer-events: none; }
.kset-avatar-cam.kset-cam-ok { background: #16a34a; }
.kset-avatar-cam.kset-cam-err { background: #dc2626; }
/* <img> avatars (used everywhere personAvatarNode renders a photo) */
.person-avatar { overflow: hidden; }
.person-avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.kset-profile-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 8px;
}
/* "remove photo" link (shown only when the user has a photo) */
.kset-photo-remove { margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; }
.kset-photo-remove:hover { color: #dc2626; }
.kset-photo-remove[disabled] { opacity: .5; cursor: default; }
.kset-logout {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 7px 11px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.kset-logout:hover { color: #dc2626; border-color: #fecaca; background: #fff1f2; }
.kset-logout:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* People-in-panel section */
.kset-people-hint { font-size: 11.5px; color: var(--muted); margin: 2px 0 7px; line-height: 1.35; }
.kset-people-list { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow: auto; margin-bottom: 4px; }
.kset-people-item { display: flex; align-items: center; gap: 9px; padding: 5px 5px; border-radius: 8px; cursor: pointer; }
.kset-people-item:hover { background: var(--surface-soft); }
.kset-people-item input { margin: 0; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.kset-people-item .person-avatar { width: 26px; height: 26px; font-size: 11px; flex: 0 0 auto; }
.kset-people-name { font-size: 13px; }
.kset-people-item.is-self { cursor: default; }
.kset-people-item.is-self .kset-people-name { color: var(--muted); }
.kset-people-item.is-disabled { opacity: .42; cursor: default; }

/* Rows */
.kset-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.kset-row-label { font-size: 13.5px; }
.kset-row-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Switch */
.kset-switch { width: 42px; height: 24px; border-radius: 999px; background: var(--line); border: 0; position: relative; cursor: pointer; flex: 0 0 auto; padding: 0; }
.kset-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.kset-switch.on { background: var(--teal); }
.kset-switch.on .kset-knob { left: 20px; }

/* Segmented control (font / kanban / people-mode) */
.kset-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.kset-seg button { border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; padding: 6px 10px; cursor: pointer; }
.kset-seg button + button { border-left: 1px solid var(--line); }
.kset-seg button.on { background: var(--teal); color: #fff; }
.kset-row-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.kset-seg-full { display: flex; }
.kset-seg-full button { flex: 1; text-align: center; }

/* Start-screen select */
.kset-start-select { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 170px; }

/* Nav items (Помощь) */
.kset-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; padding: 10px 0; cursor: pointer; border-top: 1px solid var(--line); }
.kset-nav:first-of-type { border-top: 0; }
.kset-nav:hover { color: var(--teal); }
.kset-chev { color: var(--muted); font-size: 18px; line-height: 1; }
.kset-nav.open .kset-chev { transform: rotate(90deg); }
.kset-news-badge { margin-left: auto; background: var(--teal); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; }

/* Legend */
.kset-legend { padding: 4px 0 10px; }
.kset-legend-grp { font-size: 11px; color: var(--muted); margin: 8px 0 4px; }
.kset-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.kset-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.kset-rdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.kset-rdot-do { background: var(--teal); }
.kset-rdot-set { background: var(--blue); }
.kset-rdot-part { background: var(--violet); }
.kset-rdot-watch { background: var(--muted); }

/* What's new */
.kset-news { list-style: none; margin: 0; padding: 0 0 8px; }
.kset-news li { font-size: 12.5px; color: var(--ink); padding: 5px 0 5px 16px; position: relative; }
.kset-news li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

/* Kanban scroll mode: "page" — board/columns grow, the whole page scrolls (like «Сроки»).
   Default (no class) keeps the per-column internal scroll. */
body.kset-kanban-pagescroll .board-scroller { overflow-y: visible; }
body.kset-kanban-pagescroll .board { height: auto; align-items: start; }
body.kset-kanban-pagescroll .column { height: auto; }
body.kset-kanban-pagescroll .task-list { overflow-y: visible; flex: none; }

/* === KINETICO WORKDAY (план на день + отчёт + приёмка руководителя) === */
/* trigger button sits in the action bar next to «Поставить задачу» (Rail 2026-06-30: not a top strip) */
.workday-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.workday-trigger:hover { border-color: var(--teal); color: var(--teal); }
.workday-trigger-ico { font-size: 15px; line-height: 1; }
.workday-trigger-badge { display: none; }
.workday-trigger.is-pending { border-color: var(--amber); color: var(--amber); }
.workday-trigger.is-pending .workday-trigger-badge {
  display: block;
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--surface);
}

.workday-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 16, 0.45);
  z-index: 6400;
}
.workday-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  z-index: 6401;
}
.workday-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.workday-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.workday-close {
  border: none; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted); padding: 0 4px;
}
.workday-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.workday-tab {
  flex: 1; border: 1px solid var(--line); background: var(--surface-soft);
  color: var(--muted); border-radius: 9px; padding: 8px 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.workday-tab.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }
.workday-body { padding: 12px 16px 18px; }

.workday-datenav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.workday-dnav {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
}
.workday-dnav[disabled] { opacity: 0.4; cursor: default; }
.workday-dlabel { font-size: 14px; font-weight: 700; color: var(--ink); }
.workday-today-btn {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface-soft);
  color: var(--teal); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}

.workday-sec {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 16px 0 8px;
}
.workday-empty { color: var(--muted); font-size: 13px; font-style: italic; }

.workday-plan, .workday-tom { display: flex; flex-direction: column; gap: 6px; }
.workday-plan-row, .workday-tom-row { display: flex; align-items: center; gap: 8px; }
.workday-check { position: relative; display: inline-flex; cursor: pointer; flex: 0 0 auto; }
.workday-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.workday-check-box {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line);
  background: var(--surface); display: inline-block;
}
.workday-check input:checked + .workday-check-box {
  background: var(--teal); border-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.workday-plan-text, .workday-tom-text, .workday-add input {
  flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 7px 10px; font-size: 13.5px;
}
.workday-plan-text-ro { flex: 1; font-size: 13.5px; color: var(--ink); }
.workday-plan-text-ro.is-done { text-decoration: line-through; color: var(--muted); }
.workday-tom-text-ro { flex: 1; font-size: 13.5px; color: var(--ink); }
.workday-row-del {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px; flex: 0 0 auto;
}
.workday-row-carry {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-soft); color: var(--teal);
  border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.workday-row-carry:hover { border-color: var(--teal); filter: brightness(1.03); }
.workday-add { display: flex; gap: 8px; margin-top: 8px; position: relative; }
.workday-add-btn {
  flex: 0 0 auto; border: 1px solid var(--teal); background: var(--surface); color: var(--teal);
  width: 34px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer;
}
.workday-report-wrap { position: relative; }
.workday-report {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: 10px; padding: 10px;
  font-size: 13.5px; font-family: inherit; resize: vertical;
}
.workday-report-ro { white-space: pre-wrap; font-size: 13.5px; color: var(--ink); }
.workday-suggest-menu[hidden] { display: none; }
.workday-suggest-menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 190px; overflow-y: auto; padding: 7px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px;
}
.workday-add .workday-suggest-menu { right: 42px; }
.workday-suggest-title {
  padding: 2px 3px 4px; font-size: 11.5px; color: var(--muted); font-weight: 700;
}
.workday-suggest-item {
  border: 1px solid transparent; background: var(--surface-soft); color: var(--ink);
  border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; max-width: 100%;
}
.workday-suggest-item:hover, .workday-suggest-item:focus {
  border-color: var(--teal); outline: none;
}
.workday-suggest-item.is-used { opacity: 0.55; }
.workday-suggest-meta { font-size: 11px; color: var(--muted); }
.workday-suggest-text {
  font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workday-sugg-label { font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.workday-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.workday-chip {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workday-chip:hover { border-color: var(--teal); color: var(--teal); }
.workday-chip.is-used { opacity: 0.5; }
.workday-plan-sugg .workday-chip { border-style: dashed; }

.workday-actions { display: flex; gap: 10px; margin-top: 18px; }
.workday-save,
.workday-save-tomorrow {
  flex: 1; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink);
  border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.workday-save-tomorrow {
  border: none; background: var(--teal); color: #fff;
}
.workday-submit {
  flex: 1.4; border: none; background: var(--teal); color: #fff;
  border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.workday-submit:hover, .workday-save:hover, .workday-save-tomorrow:hover { filter: brightness(1.04); }
.workday-hint { margin-top: 10px; font-size: 12px; color: var(--muted); }

.workday-review-banner {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--surface-soft); font-size: 13.5px; color: var(--ink);
}
.workday-review-banner.is-confirmed { border-left: 4px solid var(--green); }
.workday-review-banner.is-waiting { border-left: 4px solid var(--blue); }
.workday-grade-pill {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--g, var(--green)); color: #fff; font-size: 12px; font-weight: 700;
}
.workday-review-comment { margin-top: 6px; color: var(--ink); white-space: pre-wrap; }
.workday-review-by { margin-top: 4px; color: var(--muted); font-size: 12px; }
.workday-review-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.workday-team-summary { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.workday-team { display: flex; flex-direction: column; gap: 8px; }
.workday-team-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.workday-team-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; cursor: pointer; padding: 10px 12px; text-align: left;
}
.workday-team-head[disabled] { cursor: default; opacity: 0.7; }
.workday-team-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.workday-team-av { flex: 0 0 auto; display: inline-flex; }
.workday-team-av .workday-av, .workday-team-av .person-avatar { width: 26px; height: 26px; font-size: 11px; }
.workday-team-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.workday-team-meta { font-size: 12px; color: var(--muted); margin-left: 6px; }
.workday-team-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.workday-team-detail { padding: 4px 14px 14px; border-top: 1px dashed var(--line); }
.workday-detail-sec {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 12px 0 6px;
}
.workday-detail-text { white-space: pre-wrap; font-size: 13.5px; color: var(--ink); }
.workday-detail-plan { margin: 0; padding-left: 4px; list-style: none; font-size: 13.5px; color: var(--ink); }
.workday-detail-plan li { margin: 3px 0; }
.workday-detail-plan li.is-done { color: var(--muted); text-decoration: line-through; }
.workday-grade-row { display: flex; gap: 6px; flex-wrap: wrap; }
.workday-grade-btn {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
}
.workday-grade-btn.on.g-green { border-color: #27ae60; box-shadow: inset 0 0 0 1px #27ae60; }
.workday-grade-btn.on.g-orange { border-color: #e08a1e; box-shadow: inset 0 0 0 1px #e08a1e; }
.workday-grade-btn.on.g-red { border-color: #d8453c; box-shadow: inset 0 0 0 1px #d8453c; }
.workday-grade-comment {
  width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px; font-size: 13px;
  font-family: inherit; resize: vertical;
}
.workday-accept {
  margin-top: 8px; border: none; background: var(--teal); color: #fff;
  border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.workday-accept:hover { filter: brightness(1.05); }

@media (max-width: 600px) {
  .workday-panel { width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: none; border-radius: 0; }
  .workday-trigger { padding: 8px 12px; }
}

/* Telegram UI v2 is a server-gated Rail pilot. It deliberately evolves the
   stable Mini App shell instead of replacing its navigation or task model. */
body.telegram-ui-v2.is-mini-app {
  --tg2-bg: var(--tg-theme-bg-color, var(--bg));
  --tg2-surface: var(--tg-theme-secondary-bg-color, var(--surface));
  --tg2-text: var(--tg-theme-text-color, var(--ink));
  --tg2-hint: var(--tg-theme-hint-color, var(--muted));
  --tg2-button: var(--tg-theme-button-color, var(--teal));
  --tg2-button-text: var(--tg-theme-button-text-color, #fff);
  background: var(--tg2-bg);
  color: var(--tg2-text);
}

body.telegram-ui-v2.is-mini-app .shell {
  max-width: 560px;
  padding: calc(8px + max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px))) 10px
    calc(88px + max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px)));
}

.telegram-v2-header {
  position: sticky;
  top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
  z-index: 24;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 56px;
  margin: -2px -2px 8px;
  padding: 6px;
  border: 1px solid rgba(94, 106, 114, 0.24);
  border-color: color-mix(in srgb, var(--tg2-hint) 24%, transparent);
  border-radius: 14px;
  background: var(--tg2-surface);
  background: color-mix(in srgb, var(--tg2-surface) 94%, transparent);
  box-shadow: 0 8px 22px rgba(23, 32, 38, 0.08);
  backdrop-filter: blur(14px);
}

.telegram-v2-profile,
.telegram-v2-action,
.telegram-v2-sheet button,
.telegram-v2-sheet a,
.telegram-v2-sheet input,
.telegram-v2-sheet select {
  min-height: 44px;
}

.telegram-v2-profile {
  display: grid;
  width: 44px;
  min-width: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tg2-button);
  color: var(--tg2-button-text);
  font-size: 16px;
  font-weight: 800;
}

.telegram-v2-heading {
  display: grid;
  min-width: 0;
  line-height: 1.1;
}

.telegram-v2-heading b { font-size: 16px; }
.telegram-v2-heading span {
  overflow: hidden;
  color: var(--tg2-hint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-v2-action {
  position: relative;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid rgba(94, 106, 114, 0.28);
  border-color: color-mix(in srgb, var(--tg2-hint) 28%, transparent);
  border-radius: 11px;
  background: var(--tg2-surface);
  color: var(--tg2-text);
  font-size: 12px;
  font-weight: 750;
}

.telegram-v2-day.is-pending::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e08a1e;
}

body.telegram-ui-v2 .mobile-page-title { display: none; }
body.telegram-ui-v2 .mobile-top { gap: 6px; }
body.telegram-ui-v2 .mobile-task-list { gap: 8px; }
body.telegram-ui-v2 .mobile-task-card.task-card { border-radius: 12px; }
body.telegram-ui-v2 .mobile-task-card .task-card-main.mobile-task-main { padding: 9px 10px 10px; }
body.telegram-ui-v2 .mobile-task-card.task-card h3,
body.telegram-ui-v2 .mobile-task-card h3.mobile-task-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.telegram-ui-v2 .mobile-task-card .task-next-preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.telegram-ui-v2 .mobile-task-card.task-card:not(.task-card-needs-decision) .task-plan-strip { display: none; }
body.telegram-ui-v2 .mobile-task-card .badge,
body.telegram-ui-v2 .mobile-task-card .task-card-route,
body.telegram-ui-v2 .mobile-task-card .task-card-no { font-size: 12px; }
body.telegram-ui-v2 .mobile-drag-handle { width: 44px; height: 44px; min-height: 44px; }
body.telegram-ui-v2 .mobile-nav {
  right: auto;
  left: 50%;
  width: min(100%, 560px);
  transform: translateX(-50%);
  padding-bottom: calc(8px + max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px)));
  background: var(--tg2-surface);
  background: color-mix(in srgb, var(--tg2-surface) 96%, transparent);
}
body.telegram-ui-v2 .mobile-nav-button { min-height: 48px; }

.telegram-v2-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(15, 23, 42, 0.42);
}
.telegram-v2-sheet-scrim[hidden], .telegram-v2-sheet[hidden] { display: none; }
.telegram-v2-sheet {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 79;
  display: grid;
  gap: 14px;
  width: min(100%, 560px);
  box-sizing: border-box;
  transform: translateX(-50%);
  max-height: min(78dvh, 620px);
  padding: 14px 14px calc(14px + max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px)));
  overflow: auto;
  border-radius: 18px 18px 0 0;
  background: var(--tg2-surface, var(--surface));
  color: var(--tg2-text, var(--ink));
  box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.22);
}
.telegram-v2-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.telegram-v2-sheet-head b { font-size: 18px; }
.telegram-v2-sheet-close {
  width: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 24px;
}
.telegram-v2-search, .telegram-v2-sort { display: grid; gap: 6px; color: var(--tg2-hint, var(--muted)); font-size: 12px; }
.telegram-v2-search input, .telegram-v2-sort select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.telegram-v2-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.telegram-v2-presets button, .telegram-v2-sheet-actions button, .telegram-v2-sheet-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.telegram-v2-presets button.is-active { border-color: var(--tg2-button, var(--teal)); color: var(--tg2-button, var(--teal)); }
.telegram-v2-sheet-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

body.telegram-ui-v2.telegram-native-main-button #saveTaskButton,
body.telegram-ui-v2.telegram-native-main-button #saveProposalButton,
body.telegram-ui-v2.telegram-native-main-button #saveRecurringButton { display: none !important; }

body.telegram-ui-v2 .workday-panel {
  padding-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px));
  padding-bottom: max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}