/* Design Gang CRM — единая дизайн-система для экранов второго этапа. */
:root {
  --ds-surface-0: #070a08;
  --ds-surface-1: #0c100d;
  --ds-surface-2: #121713;
  --ds-surface-3: #182019;
  --ds-line: rgba(223,255,232,.09);
  --ds-line-strong: rgba(223,255,232,.16);
  --ds-text: #edf4ef;
  --ds-muted: #8e9a92;
  --ds-faint: #626c66;
  --ds-accent: #54d47f;
  --ds-accent-soft: rgba(84,212,127,.12);
  --ds-danger: #ef8c8c;
  --ds-warning: #e6bd73;
  --ds-info: #82aee9;
  --ds-radius-xs: 8px;
  --ds-radius-sm: 11px;
  --ds-radius-md: 15px;
  --ds-radius-lg: 20px;
  --ds-shadow: 0 22px 60px rgba(0,0,0,.34);
  --ds-fast: 140ms cubic-bezier(.2,.8,.2,1);
  --ds-normal: 220ms cubic-bezier(.2,.8,.2,1);
}

.ds-page { width: 100%; max-width: 1260px; margin: 0 auto; padding: 2px 2px 32px; }
.page[data-page="teams"] > .page-header,.page[data-page="settings"] > .page-header { display: none; }
.ds-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ds-eyebrow { margin-bottom: 5px; color: var(--ds-accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ds-title { margin: 0; color: var(--ds-text); font-size: clamp(21px,2vw,28px); font-weight: 780; letter-spacing: -.035em; }
.ds-subtitle { max-width: 680px; margin: 6px 0 0; color: var(--ds-muted); font-size: 12px; line-height: 1.55; }
.ds-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ds-grid { display: grid; gap: 12px; }
.ds-grid.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ds-grid.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ds-grid.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ds-grid.aside { grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); align-items: start; }
.ds-panel { min-width: 0; padding: 17px; color: var(--ds-text); background: var(--ds-surface-1); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); box-shadow: 0 1px 0 rgba(255,255,255,.015); }
.ds-panel.tight { padding: 10px; }
.ds-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ds-panel-title { color: var(--ds-text); font-size: 13px; font-weight: 740; }
.ds-panel-note { margin-top: 4px; color: var(--ds-faint); font-size: 10px; line-height: 1.45; }

.ds-kpi { min-height: 112px; padding: 15px; background: linear-gradient(145deg,var(--ds-surface-2),var(--ds-surface-1)); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-kpi-icon { display: grid; width: 29px; height: 29px; place-items: center; margin-bottom: 14px; color: var(--ds-accent); background: var(--ds-accent-soft); border-radius: 9px; font-size: 13px; }
.ds-kpi-value { color: var(--ds-text); font-size: 23px; font-weight: 800; letter-spacing: -.04em; }
.ds-kpi-value.positive { color: #8de5aa; }
.ds-kpi-value.negative { color: var(--ds-danger); }
.ds-kpi-label { margin-top: 4px; color: var(--ds-muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.ds-list { display: grid; gap: 7px; }
.ds-list-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 54px; padding: 10px 11px; color: var(--ds-text); background: var(--ds-surface-0); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-fast),transform var(--ds-fast),background var(--ds-fast); }
button.ds-list-row { width: 100%; text-align: left; cursor: pointer; }
button.ds-list-row:hover { transform: translateY(-1px); background: var(--ds-surface-2); border-color: var(--ds-line-strong); }
.ds-row-title { overflow: hidden; color: var(--ds-text); font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.ds-row-note { margin-top: 3px; color: var(--ds-faint); font-size: 9px; }
.ds-row-value { color: #8de5aa; font-size: 12px; font-weight: 780; white-space: nowrap; }

.ds-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: var(--ds-muted); background: rgba(255,255,255,.045); border: 1px solid var(--ds-line); border-radius: 999px; font-size: 9px; font-weight: 720; white-space: nowrap; }
.ds-badge.accent { color: #9de8b6; background: var(--ds-accent-soft); border-color: rgba(84,212,127,.2); }
.ds-badge.warning { color: #e6c88e; background: rgba(230,189,115,.1); border-color: rgba(230,189,115,.19); }
.ds-badge.info { color: #a9caf3; background: rgba(130,174,233,.1); border-color: rgba(130,174,233,.18); }

.ds-tabs { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 14px; overflow-x: auto; background: var(--ds-surface-0); border: 1px solid var(--ds-line); border-radius: 11px; }
.ds-tab { min-height: 32px; padding: 0 12px; color: var(--ds-muted); background: transparent; border: 0; border-radius: 8px; font-size: 10px; font-weight: 680; white-space: nowrap; }
.ds-tab.active { color: var(--ds-text); background: var(--ds-surface-3); box-shadow: 0 1px 5px rgba(0,0,0,.22); }

.ds-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); }
.ds-table { width: 100%; min-width: 620px; border-collapse: collapse; color: var(--ds-text); font-size: 11px; }
.ds-table th { padding: 10px 12px; color: var(--ds-faint); background: var(--ds-surface-0); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.ds-table td { padding: 11px 12px; border-top: 1px solid var(--ds-line); vertical-align: middle; }
.ds-table th:not(:first-child),.ds-table td:not(:first-child) { text-align: center; }
.ds-table .sticky { position: sticky; left: 0; z-index: 1; background: var(--ds-surface-1); text-align: left; }
.ds-check { width: 17px; height: 17px; accent-color: var(--ds-accent); cursor: pointer; }

.ds-people-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-person { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; color: var(--ds-text); background: var(--ds-surface-0); border: 1px solid var(--ds-line); border-radius: 999px; font-size: 10px; }
.ds-avatar { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; overflow: hidden; color: #dff5e6; background: #254b32; border-radius: 50%; font-size: 8px; font-weight: 800; }
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-team-card { padding: 14px; background: var(--ds-surface-0); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); }
.ds-team-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ds-team-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.ds-team-name { min-width: 0; flex: 1; color: var(--ds-text); font-size: 13px; font-weight: 750; }
.ds-team-meta { display: grid; gap: 7px; color: var(--ds-muted); font-size: 10px; line-height: 1.4; }
.ds-team-meta b { color: var(--ds-text); font-weight: 650; }

.ds-chart { display: grid; grid-template-columns: repeat(12,minmax(22px,1fr)); align-items: end; gap: 7px; height: 190px; padding-top: 25px; }
.ds-chart-col { display: flex; min-width: 0; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.ds-chart-value { min-height: 12px; color: #8de5aa; font-size: 8px; font-weight: 750; }
.ds-chart-bar { width: min(30px,82%); min-height: 3px; background: linear-gradient(180deg,#66dc8d,#247b42); border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: dsGrow .42s both cubic-bezier(.2,.8,.2,1); }
.ds-chart-label { overflow: hidden; width: 100%; color: var(--ds-faint); font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@keyframes dsGrow { from { transform: scaleY(.08); opacity: .2; } }

.ds-settings-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 14px; align-items: start; }
.ds-settings-nav { position: sticky; top: 0; display: grid; gap: 4px; padding: 7px; background: var(--ds-surface-1); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-settings-link { display: flex; align-items: center; min-height: 38px; padding: 0 10px; color: var(--ds-muted); background: transparent; border: 0; border-radius: 9px; font-size: 10px; font-weight: 650; text-align: left; }
.ds-settings-link:hover,.ds-settings-link.active { color: var(--ds-text); background: var(--ds-surface-3); }
.ds-settings-content { display: grid; gap: 12px; min-width: 0; }
.ds-settings-content .settings-section { width: 100%; margin: 0 !important; padding: 17px; background: var(--ds-surface-1); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ds-field { display: grid; gap: 6px; min-width: 0; }
.ds-field > span { color: var(--ds-muted); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ds-field.wide { grid-column: 1/-1; }
.ds-input { width: 100%; min-height: 40px; padding: 9px 11px; color: var(--ds-text); background: var(--ds-surface-0); border: 1px solid var(--ds-line); border-radius: 9px; outline: none; font: inherit; font-size: 11px; }
.ds-input:focus { border-color: rgba(84,212,127,.55); box-shadow: 0 0 0 3px rgba(84,212,127,.08); }

.task-refactor-modal { width: min(1040px,96vw) !important; max-width: 1040px !important; max-height: min(880px,94vh) !important; background: var(--ds-surface-0) !important; border-color: var(--ds-line-strong) !important; border-radius: 18px !important; }
.task-shell { display: flex; min-height: 0; flex: 1; overflow: hidden; }
.task-shell-main { min-width: 0; flex: 1; padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
.task-shell-side { width: 290px; flex: 0 0 290px; padding: 16px; overflow-y: auto; background: var(--ds-surface-1); border-left: 1px solid var(--ds-line); overscroll-behavior: contain; }
.task-head-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--ds-faint); font-size: 9px; }
.task-head-actions { display: flex; align-items: center; gap: 7px; }
.task-description { padding: 14px; color: #cbd4ce; background: var(--ds-surface-1); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); font-size: 12px; line-height: 1.6; white-space: pre-wrap; user-select: text; }
.task-actions { display: flex; gap: 7px; margin: 11px 0 14px; flex-wrap: wrap; }
.task-module { margin-top: 10px; }
.task-module:empty { display: none; }
.task-module.loading-slot { min-height: 42px; background: linear-gradient(90deg,var(--ds-surface-1),var(--ds-surface-2),var(--ds-surface-1)); background-size: 200% 100%; border-radius: 10px; animation: dsShimmer 1.15s infinite linear; }
.task-section-title { margin: 18px 0 9px; color: var(--ds-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.task-side-field { display: grid; gap: 6px; margin-bottom: 12px; }
.task-side-field > span { color: var(--ds-faint); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.task-side-field .mselect,.task-side-field .minput { margin: 0 !important; min-height: 40px; background: var(--ds-surface-0); border-color: var(--ds-line); }
.task-facts { display: grid; gap: 1px; margin: 15px 0; overflow: hidden; background: var(--ds-line); border: 1px solid var(--ds-line); border-radius: 10px; }
.task-fact { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 9px; padding: 9px 10px; background: var(--ds-surface-0); font-size: 10px; }
.task-fact span { color: var(--ds-faint); }
.task-fact b { overflow: hidden; color: var(--ds-text); font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.task-admin { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ds-line); }

.ds-skeleton { position: relative; overflow: hidden; min-height: 78px; background: var(--ds-surface-1); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg,transparent,rgba(255,255,255,.035),transparent); transform: translateX(-100%); animation: dsShimmer 1.15s infinite; }
@keyframes dsShimmer { to { transform: translateX(100%); background-position: -200% 0; } }
.ds-enter > * { animation: dsEnter .24s both cubic-bezier(.2,.8,.2,1); }
.ds-enter > *:nth-child(2) { animation-delay: 28ms; }
.ds-enter > *:nth-child(3) { animation-delay: 56ms; }
.ds-enter > *:nth-child(4) { animation-delay: 84ms; }
@keyframes dsEnter { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 900px) {
  .ds-grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ds-grid.cols-3,.ds-grid.aside { grid-template-columns: 1fr; }
  .ds-settings-layout { grid-template-columns: 1fr; }
  .ds-settings-nav { position: static; display: flex; overflow-x: auto; }
  .ds-settings-link { flex: 0 0 auto; }
  .task-shell-side { width: 255px; flex-basis: 255px; }
}
@media (max-width: 680px) {
  .ds-page { padding-bottom: 18px; }
  .ds-page-head { align-items: stretch; flex-direction: column; }
  .ds-grid.cols-2,.ds-grid.cols-4,.ds-form-grid { grid-template-columns: 1fr; }
  .ds-field.wide { grid-column: auto; }
  .ds-chart { gap: 3px; height: 150px; }
  .task-refactor-modal { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; }
  .task-shell { display: block; overflow-y: auto; }
  .task-shell-main,.task-shell-side { width: 100%; overflow: visible; }
  .task-shell-side { border-top: 1px solid var(--ds-line); border-left: 0; }
}
@media (prefers-reduced-motion:reduce) {
  .ds-enter > *,.ds-chart-bar,.ds-skeleton::after { animation: none; }
}