/* Дизайн-система ТКФ (ds) — общая для дашборда аренды, кабинетов, ДНП и dom.
   Все классы с префиксом ds-, токены — на элементе .ds (не на :root), поэтому файл можно подключать рядом с app.css без конфликтов.
   Темы: .ds[data-theme="light|dark"], без атрибута — по системе. Бренд: .ds[data-brand="tkf|dnp"].
   Адаптивность — через контейнер .ds-screen (@container), чтобы экран выглядел «телефонным» и в узкой рамке на широком мониторе. */

/* ---------- 1. Токены ---------- */
.ds{
  /* нейтральные: тёплая бумага, белые поверхности */
  --bg:#F4F3EF; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#EFEDE7; --sunken:#ECEAE3;
  --ink:#171D20; --ink-2:#3A4448; --muted:#5E686C; --faint:#8C9599;
  --line:#E3E0D8; --line-2:#EEECE6; --hover:rgba(23,29,32,.045); --press:rgba(23,29,32,.08);
  /* действие и бренд */
  --accent:#1F5F86; --accent-hover:#1A5274; --accent-ink:#FFFFFF; --accent-soft:#E4EEF4; --accent-line:#B9D0DE;
  --brand:#C42647; --brand-ink:#FFFFFF; --brand-soft:#FBE7EB; --brand-deep:#8E1D35;
  --hero-a:#8E1D35; --hero-b:#C42647; /* герой-карточка: белый текст на ней — в обеих темах */
  /* состояния: всегда с текстом/иконкой, никогда только цвет */
  --ok:#1F7A4D; --ok-soft:#E3F2E9; --warn:#9A6400; --warn-soft:#FCF0D6; --bad:#B8322A; --bad-soft:#FBE6E3; --info:#2D64A8; --info-soft:#E6EEF8;
  --neutral-soft:#ECEAE4;
  /* категории (направления, серии графиков) — порядок фиксирован, проверен на дальтонизм */
  --cat-1:#2A78D6; --cat-2:#EB6834; --cat-3:#1BAF7A; --cat-4:#EDA100; --cat-5:#6250D6;
  /* сайдбар */
  --side:#161D20; --side-2:#1E272B; --side-ink:#D3DADC; --side-muted:#8A979B; --side-line:rgba(255,255,255,.07);
  /* типографика: 8 ступеней */
  --f:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-28:28px; --t-36:36px; --t-48:48px;
  /* отступы: шаг 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  /* радиусы, тени, движение */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(23,29,32,.05); --sh-2:0 1px 2px rgba(23,29,32,.04),0 4px 14px rgba(23,29,32,.06); --sh-3:0 18px 50px rgba(15,20,22,.22);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.18s;
  /* размеры касания */
  --hit:36px; --hit-touch:44px;
  color-scheme:light;
  font-family:var(--f); font-size:var(--t-14); line-height:1.5; color:var(--ink); background:var(--bg);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.ds[data-brand="dnp"]{ --hero-a:#123826; --hero-b:#2A7255; --accent:#1F5A43; --accent-hover:#184A37; --accent-soft:#E3EFE8; --accent-line:#B5D3C3; --brand:#1F5A43; --brand-soft:#E3EFE8; --brand-deep:#123826; --side:#11261C; --side-2:#18332A; }
.ds[data-theme="dark"]{
  --hero-a:#6E1427; --hero-b:#A8304B;
  --bg:#0E1315; --surface:#161D20; --surface-2:#1A2226; --surface-3:#202A2E; --sunken:#0B1012;
  --ink:#E7ECEB; --ink-2:#C5CECD; --muted:#A3AEAD; --faint:#76807F;
  --line:#2A353A; --line-2:#222C30; --hover:rgba(255,255,255,.05); --press:rgba(255,255,255,.09);
  --accent:#73B6DD; --accent-hover:#8CC4E4; --accent-ink:#08161E; --accent-soft:#17303D; --accent-line:#2C5468;
  --brand:#E8607A; --brand-ink:#1A0A0E; --brand-soft:#3A1A22; --brand-deep:#F08EA0;
  --ok:#5CC08E; --ok-soft:#173226; --warn:#E3AC4C; --warn-soft:#33281A; --bad:#EF7B6C; --bad-soft:#3A1E1B; --info:#7DB0EA; --info-soft:#18283C;
  --neutral-soft:#242E32;
  --cat-1:#3987E5; --cat-2:#D95926; --cat-3:#199E70; --cat-4:#C98500; --cat-5:#9085E9;
  --side:#0A0E10; --side-2:#141B1E;
  --sh-1:none; --sh-2:0 0 0 1px rgba(255,255,255,.02); --sh-3:0 18px 50px rgba(0,0,0,.6);
  color-scheme:dark;
}
.ds[data-theme="dark"][data-brand="dnp"]{ --hero-a:#0F3123; --hero-b:#1F5F45; --accent:#6EC49A; --accent-hover:#86D0AB; --accent-ink:#06140D; --accent-soft:#16302A; --accent-line:#2B5646; --brand:#6EC49A; --brand-soft:#16302A; --brand-deep:#9AD8B8; --side:#08130E; --side-2:#10211A; }
@media (prefers-color-scheme:dark){
  .ds:not([data-theme]){
    --hero-a:#6E1427; --hero-b:#A8304B;
    --bg:#0E1315; --surface:#161D20; --surface-2:#1A2226; --surface-3:#202A2E; --sunken:#0B1012;
    --ink:#E7ECEB; --ink-2:#C5CECD; --muted:#A3AEAD; --faint:#76807F;
    --line:#2A353A; --line-2:#222C30; --hover:rgba(255,255,255,.05); --press:rgba(255,255,255,.09);
    --accent:#73B6DD; --accent-hover:#8CC4E4; --accent-ink:#08161E; --accent-soft:#17303D; --accent-line:#2C5468;
    --brand:#E8607A; --brand-ink:#1A0A0E; --brand-soft:#3A1A22; --brand-deep:#F08EA0;
    --ok:#5CC08E; --ok-soft:#173226; --warn:#E3AC4C; --warn-soft:#33281A; --bad:#EF7B6C; --bad-soft:#3A1E1B; --info:#7DB0EA; --info-soft:#18283C;
    --neutral-soft:#242E32;
    --cat-1:#3987E5; --cat-2:#D95926; --cat-3:#199E70; --cat-4:#C98500; --cat-5:#9085E9;
    --side:#0A0E10; --side-2:#141B1E;
    --sh-1:none; --sh-2:0 0 0 1px rgba(255,255,255,.02); --sh-3:0 18px 50px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
@media (prefers-color-scheme:dark){
  .ds:not([data-theme])[data-brand="dnp"]{ --hero-a:#0F3123; --hero-b:#1F5F45; --accent:#6EC49A; --accent-hover:#86D0AB; --accent-ink:#06140D; --accent-soft:#16302A; --accent-line:#2B5646; --brand:#6EC49A; --brand-soft:#16302A; --brand-deep:#9AD8B8; --side:#08130E; --side-2:#10211A; }
}
@media (prefers-reduced-motion:reduce){ .ds{ --dur:0s } .ds *{ animation:none!important; transition:none!important } }

/* ---------- 2. База ---------- */
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
.ds :where(button,input,select,textarea){font:inherit;color:inherit}
.ds :where(h1,h2,h3,h4,p){margin:0}
.ds :where(a){color:var(--accent);text-underline-offset:2px}
.ds :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.ds-h1{font-size:var(--t-28);font-weight:650;letter-spacing:-.02em;line-height:1.2}
.ds-h2{font-size:var(--t-22);font-weight:650;letter-spacing:-.015em;line-height:1.25}
.ds-h3{font-size:var(--t-16);font-weight:600;letter-spacing:-.005em;line-height:1.35}
.ds-eyebrow{font-size:var(--t-12);font-weight:600;color:var(--muted);letter-spacing:.02em}
.ds-muted{color:var(--muted)} .ds-faint{color:var(--faint)} .ds-small{font-size:var(--t-13)} .ds-xs{font-size:var(--t-12)}
.ds-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-mono{font-family:var(--f-mono);font-size:.94em}
.ds-pos{color:var(--ok)} .ds-neg{color:var(--bad)} .ds-wrn{color:var(--warn)}
.ds-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ds-ic.lg{width:22px;height:22px} .ds-ic.sm{width:16px;height:16px}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ds-row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ds-stack{display:flex;flex-direction:column;gap:var(--s-4)}
.ds-spacer{flex:1}
.ds-grid{display:grid;gap:var(--s-4)}
.ds-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .ds-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .ds-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-grid.main-side{grid-template-columns:minmax(0,1fr) 340px}
.ds-divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 3. Кнопки ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--hit);padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:550;font-size:var(--t-14);line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ds-btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.ds-btn:active{transform:translateY(1px)}
.ds-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ds-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.ds-btn.brand{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.ds-btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.ds-btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.ds-btn.ghost:hover{background:var(--hover)}
.ds-btn.sm{min-height:30px;padding:0 10px;font-size:var(--t-13)}
.ds-btn.lg{min-height:52px;padding:0 22px;font-size:var(--t-16);border-radius:var(--r)}
.ds-btn.block{width:100%}
.ds-btn.icon{padding:0;width:var(--hit)}
.ds-btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- 4. Поля и формы ---------- */
.ds-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ds-label{font-size:var(--t-13);font-weight:550;color:var(--ink-2)}
.ds-label .req{color:var(--bad)}
.ds-hint{font-size:var(--t-12);color:var(--muted)}
.ds-error{font-size:var(--t-12);color:var(--bad);display:flex;gap:6px;align-items:center}
.ds-input,.ds-select,.ds-textarea{width:100%;min-height:var(--hit);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:var(--t-14);transition:border-color var(--dur),box-shadow var(--dur)}
.ds-textarea{padding:10px 12px;min-height:96px;resize:vertical;line-height:1.5}
.ds-select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C9599' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:color-mix(in srgb,var(--muted) 40%,var(--line))}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ds-input.invalid{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 16%,transparent)}
.ds-input.big{min-height:64px;font-size:var(--t-36);font-weight:600;text-align:center;letter-spacing:.02em;border-radius:var(--r);border-width:2px}
.ds-search{position:relative;flex:1 1 240px;min-width:0}
.ds-mbody>.ds-search,.ds-field>.ds-search,.ds-stack>.ds-search{flex:none}
.ds-search .ds-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.ds-search .ds-input{padding-left:36px}
.ds-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.ds-kbd,.ds kbd{font:600 11px/1 var(--f-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:3px 6px;background:var(--surface-2);color:var(--muted)}
.ds-check{display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;font-size:var(--t-14);min-height:var(--hit)}
.ds-check input:not(.ds-switch){width:18px;height:18px;accent-color:var(--accent);margin:0}
.ds-switch{position:relative;width:38px;height:22px;flex:none;appearance:none;border-radius:var(--r-pill);background:var(--line);cursor:pointer;transition:background var(--dur);margin:0}
.ds-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease)}
.ds-switch:checked{background:var(--accent)} .ds-switch:checked::after{transform:translateX(16px)}
.ds-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.ds-form .wide{grid-column:1/-1}

/* ---------- 5. Чипы, сегменты, вкладки, бейджи ---------- */
.ds-chips{display:flex;gap:6px;flex-wrap:wrap}
.ds-chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
.ds-chips.scroll::-webkit-scrollbar{display:none}
.ds-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:var(--t-13);font-weight:500;white-space:nowrap;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.ds-chip:hover{border-color:color-mix(in srgb,var(--muted) 45%,var(--line))}
.ds-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ds-chip .n{font-size:var(--t-12);color:var(--muted);font-weight:600}
.ds-chip[aria-pressed="true"] .n{color:color-mix(in srgb,var(--surface) 70%,transparent)}
.ds-chip.drop::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;margin-left:2px}
.ds-chip.add{border-style:dashed;color:var(--muted)}
.ds-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c,var(--faint))}
.ds-seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-3);border-radius:var(--r-sm)}
.ds-seg button{border:0;background:transparent;min-height:28px;padding:0 12px;border-radius:6px;font-size:var(--t-13);font-weight:550;color:var(--muted);cursor:pointer;white-space:nowrap}
.ds-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1),0 0 0 1px var(--line-2)}
.ds-tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;scrollbar-width:none}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tabs button,.ds-tabs a{position:relative;border:0;background:none;padding:10px 12px 12px;font-size:var(--t-14);font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.ds-tabs button:hover{color:var(--ink)}
.ds-tabs [aria-selected="true"]{color:var(--ink);font-weight:600}
.ds-tabs [aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--brand)}
.ds-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font-size:11.5px;font-weight:650;line-height:1}
.ds-count.hot{background:var(--brand);color:#fff}
.ds-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--t-12);font-weight:600;white-space:nowrap;background:var(--neutral-soft);color:var(--ink-2)}
.ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.ds-badge.plain::before{display:none}
.ds-badge.ok{background:var(--ok-soft);color:var(--ok)} .ds-badge.warn{background:var(--warn-soft);color:var(--warn)}
.ds-badge.bad{background:var(--bad-soft);color:var(--bad)} .ds-badge.info{background:var(--info-soft);color:var(--info)}
.ds-badge.brand{background:var(--brand-soft);color:var(--brand)}
.ds-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-12);color:var(--ink-2);white-space:nowrap}
.ds-tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c,var(--faint))}

/* ---------- 6. Карточки и KPI ---------- */
.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);min-width:0}
.ds-card.pad{padding:var(--s-5)}
.ds-card-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line-2)}
.ds-card-h h3{font-size:var(--t-16);font-weight:600;flex:1;min-width:0}
.ds-card-b{padding:var(--s-4) var(--s-5)}
.ds-card-f{padding:var(--s-3) var(--s-5);border-top:1px solid var(--line-2);display:flex;gap:var(--s-2);align-items:center}
.ds-card.flat{box-shadow:none;background:var(--surface-2)}
.ds-card.click{cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.ds-card.click:hover{border-color:color-mix(in srgb,var(--muted) 35%,var(--line));box-shadow:var(--sh-2)}
.ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-3)}
.ds-kpi{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--s-4) var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0;text-align:left;color:inherit;font:inherit}
button.ds-kpi{cursor:pointer} button.ds-kpi:hover{border-color:color-mix(in srgb,var(--muted) 35%,var(--line));box-shadow:var(--sh-2)}
.ds-kpi .l{font-size:var(--t-13);color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.ds-kpi .v{font-size:var(--t-28);font-weight:650;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.ds-kpi .v small{font-size:var(--t-16);font-weight:550;color:var(--muted);margin-left:2px}
.ds-kpi .d{font-size:var(--t-13);color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ds-kpi .spark{position:absolute;right:16px;top:16px;width:72px;height:28px}
.ds-kpi:has(.spark) .l{padding-right:80px}
.ds-kpi.bad{box-shadow:inset 3px 0 0 var(--bad)} .ds-kpi.bad .v{color:var(--bad)}
.ds-kpi.warn{box-shadow:inset 3px 0 0 var(--warn)}
.ds-kpi.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border-color:transparent;color:#fff}
.ds-kpi.hero .l,.ds-kpi.hero .d{color:rgba(255,255,255,.82)}
.ds-delta{display:inline-flex;align-items:center;gap:3px;font-weight:600;font-size:var(--t-13)}
.ds-delta.up{color:var(--ok)} .ds-delta.down{color:var(--bad)} .ds-delta.flat{color:var(--muted)}
.ds-delta.up::before{content:"▲";font-size:9px} .ds-delta.down::before{content:"▼";font-size:9px}
/* «индикатор» вместо .bar (имя .bar занято в app.css) */
.ds-meter{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;display:flex;gap:2px}
.ds-meter i{display:block;height:100%;background:var(--c,var(--accent));border-radius:var(--r-pill)}
.ds-meter.lg{height:10px}
.ds-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--t-12);color:var(--muted)}
/* карточка действия (Командный пункт) */
.ds-act{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);text-align:left}
.ds-act .top{display:flex;align-items:center;gap:var(--s-2)}
.ds-act .big{font-size:var(--t-28);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.ds-act .mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line-2)}
.ds-act .mini b{display:block;font-size:var(--t-14);font-weight:600;white-space:nowrap} .ds-act .mini span{font-size:var(--t-12);color:var(--muted)}
.ds-act .go{display:flex;align-items:center;gap:6px;font-size:var(--t-13);font-weight:600;color:var(--accent);margin-top:auto}

/* ---------- 7. Таблица ---------- */
.ds-table-wrap{overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-14)}
.ds-table th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-size:var(--t-12);font-weight:600;color:var(--muted);letter-spacing:.02em;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ds-table th[aria-sort]{cursor:pointer;user-select:none}
.ds-table th[aria-sort="ascending"]::after{content:" ↑"} .ds-table th[aria-sort="descending"]::after{content:" ↓"}
.ds-table td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ds-table tbody tr{transition:background var(--dur)}
.ds-table tbody tr:hover td{background:var(--hover)}
.ds-table tbody tr.click{cursor:pointer}
.ds-table .r{text-align:right} .ds-table .c{text-align:center}
.ds-table td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-table .who b{display:block;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.ds-table .who span{display:block;font-size:var(--t-12);color:var(--muted)}
.ds-table tfoot td{font-weight:650;background:var(--surface-2);border-bottom:0}
.ds-table.compact td{padding:6px 12px} .ds-table.compact th{padding:7px 12px}
.ds-toolbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-2)}
.ds-pager{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);font-size:var(--t-13);color:var(--muted)}

/* ---------- 8. Списки (мобильная замена таблицы) ---------- */
.ds-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ds-li{display:flex;align-items:center;gap:var(--s-3);padding:12px var(--s-4);min-height:60px;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;width:100%;color:inherit;cursor:pointer}
.ds-li:last-child{border-bottom:0}
.ds-li:active{background:var(--press)}
.ds-li .m{flex:1;min-width:0}
.ds-li .m b{display:block;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-li .m span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--t-13);color:var(--muted);overflow:hidden}
.ds-li .e{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ds-li .e b{font-weight:600;white-space:nowrap}
.ds-li .chev{color:var(--faint)}
.ds-group-t{font-size:var(--t-13);font-weight:600;color:var(--muted);padding:var(--s-4) 2px var(--s-2);display:flex;justify-content:space-between}
.ds-avatar{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:650;font-size:var(--t-13);background:var(--accent-soft);color:var(--accent)}
.ds-avatar.round{border-radius:50%}
.ds-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:var(--t-14)}
.ds-kv dt{color:var(--muted)} .ds-kv dd{margin:0;text-align:right;font-weight:500}

/* ---------- 9. Сообщения, пустые состояния, скелетоны ---------- */
.ds-alert{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--info-soft);color:var(--ink);font-size:var(--t-14)}
.ds-alert .ds-ic{color:var(--info);margin-top:2px}
.ds-alert.warn{background:var(--warn-soft)} .ds-alert.warn .ds-ic{color:var(--warn)}
.ds-alert.bad{background:var(--bad-soft)} .ds-alert.bad .ds-ic{color:var(--bad)}
.ds-alert.ok{background:var(--ok-soft)} .ds-alert.ok .ds-ic{color:var(--ok)}
.ds-alert .t{flex:1;min-width:0} .ds-alert b{font-weight:600}
.ds-fresh{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--t-12);font-weight:600;background:var(--ok-soft);color:var(--ok);white-space:nowrap;border:0;cursor:pointer}
.ds-fresh.warn{background:var(--warn-soft);color:var(--warn)} .ds-fresh.bad{background:var(--bad-soft);color:var(--bad)}
.ds-fresh::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-10) var(--s-6);color:var(--muted)}
.ds-empty .ill{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);margin-bottom:var(--s-2)}
.ds-empty b{color:var(--ink);font-size:var(--t-16)}
.ds-skel{border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 0,var(--line-2) 40%,var(--surface-3) 80%);background-size:300% 100%;animation:ds-shimmer 1.4s infinite linear;height:14px}
@keyframes ds-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.ds-progress{display:flex;flex-direction:column;gap:6px}
.ds-progress .t{display:flex;justify-content:space-between;font-size:var(--t-13);color:var(--muted)} .ds-progress .t b{color:var(--ink)}

/* ---------- 10. Оверлеи: модалка, выдвижная панель, нижний лист, тост ---------- */
.ds-scrim{position:absolute;inset:0;background:rgba(10,14,16,.45);backdrop-filter:blur(2px);z-index:40;display:flex;align-items:center;justify-content:center;padding:var(--s-6);animation:ds-fade var(--dur) var(--ease)}
.ds-modal{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:ds-pop .22s var(--ease)}
.ds-modal-h{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-6) var(--s-2)}
.ds-modal-h h2{flex:1;font-size:var(--t-18);font-weight:650}
.ds-modal-b{padding:var(--s-3) var(--s-6) var(--s-5)}
.ds-modal-f{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-4) var(--s-6);border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl)}
.ds-scrim.right{justify-content:flex-end;align-items:stretch;padding:0}
.ds-drawer{width:min(520px,100%);height:100%;background:var(--surface);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:ds-slide .24s var(--ease)}
.ds-drawer-b{flex:1;overflow:auto;padding:var(--s-5) var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)}
.ds-scrim.bottom{align-items:flex-end;padding:0}
.ds-sheet{width:100%;max-height:88%;overflow:auto;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);padding:var(--s-2) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));animation:ds-up .26s var(--ease)}
.ds-sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 12px}
.ds-toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:var(--s-3);padding:12px 16px;border-radius:var(--r);background:var(--ink);color:var(--surface);box-shadow:var(--sh-3);font-size:var(--t-14);animation:ds-up .24s var(--ease);white-space:nowrap}
.ds-toast .ds-ic{color:var(--ok)}
@keyframes ds-fade{from{opacity:0}} @keyframes ds-pop{from{opacity:0;transform:scale(.97) translateY(6px)}}
@keyframes ds-slide{from{transform:translateX(30px);opacity:0}} @keyframes ds-up{from{transform:translateY(24px);opacity:0}}
.ds-toast{animation-name:ds-toast} @keyframes ds-toast{from{opacity:0;transform:translate(-50%,16px)}}

/* ---------- 11. Оболочка рабочего места (компьютер) ---------- */
.ds-screen{container:screen/inline-size;position:relative;min-height:100%;background:var(--bg)}
.ds-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%}
.ds-shell.mini{grid-template-columns:68px minmax(0,1fr)}
.ds-side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;gap:2px;padding:var(--s-3) var(--s-2);position:sticky;top:0;height:100%;max-height:100vh;overflow:auto;scrollbar-width:thin}
.ds-side .brandrow{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;color:#fff;text-decoration:none}
.ds-side .logo{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none;letter-spacing:-.02em}
.ds-side .brandrow b{display:block;font-size:var(--t-14);font-weight:650;line-height:1.2} .ds-side .brandrow span{display:block;font-size:var(--t-12);color:var(--side-muted)}
.ds-side .find{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;margin:0 2px 8px;border-radius:var(--r-sm);background:var(--side-2);color:var(--side-muted);font-size:var(--t-13);border:1px solid var(--side-line);cursor:pointer}
.ds-side .find kbd{margin-left:auto;background:transparent;border-color:var(--side-line);color:var(--side-muted)}
.ds-side .gt{font-size:var(--t-12);color:var(--side-muted);padding:14px 10px 4px;font-weight:550}
.ds-nav-i{display:flex;align-items:center;gap:11px;min-height:36px;padding:0 10px;border-radius:var(--r-sm);color:var(--side-ink);text-decoration:none;font-size:var(--t-14);font-weight:500;border:0;background:none;width:100%;text-align:left;cursor:pointer;position:relative}
.ds-nav-i .ds-ic{opacity:.72}
.ds-nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.ds-nav-i[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
.ds-nav-i[aria-current="page"] .ds-ic{opacity:1}
.ds-nav-i[aria-current="page"]::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.ds-nav-i .ds-count{margin-left:auto;background:rgba(255,255,255,.1);color:var(--side-ink)} .ds-nav-i .ds-count.hot{background:var(--brand);color:#fff}
.ds-side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px 4px;border-top:1px solid var(--side-line);font-size:var(--t-13)}
.ds-side .me .ds-avatar{background:var(--side-2);color:var(--side-ink);width:32px;height:32px}
.ds-side .me span{display:block;color:var(--side-muted);font-size:var(--t-12)}
.ds-shell.mini .ds-side .brandrow div,.ds-shell.mini .ds-nav-i span,.ds-shell.mini .ds-side .gt,.ds-shell.mini .ds-side .find span,.ds-shell.mini .ds-side .find kbd,.ds-shell.mini .ds-side .me div,.ds-shell.mini .ds-nav-i .ds-count{display:none}
.ds-shell.mini .ds-nav-i{justify-content:center}
.ds-main{min-width:0;display:flex;flex-direction:column}
.ds-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:10px var(--s-8);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-2)}
.ds-crumbs{display:flex;align-items:center;gap:6px;font-size:var(--t-13);color:var(--muted);min-width:0;white-space:nowrap;flex:1 1 auto;overflow:hidden}
.ds-crumbs>*{overflow:hidden;text-overflow:ellipsis}
.ds-topbar .ds-context{flex-wrap:nowrap;flex:none}
.ds-crumbs b{color:var(--ink);font-weight:600}
.ds-context{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex-wrap:wrap}
.ds-content{padding:var(--s-6) var(--s-8) var(--s-12);display:flex;flex-direction:column;gap:var(--s-6);max-width:1480px;width:100%}
.ds-pagehead{display:flex;align-items:flex-end;gap:var(--s-4);flex-wrap:wrap}
.ds-pagehead .t{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px}
.ds-pagehead p{color:var(--muted);font-size:var(--t-14)}
.ds-filterbar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.ds-section-t{display:flex;align-items:baseline;gap:var(--s-3)}
.ds-section-t h2{font-size:var(--t-18);font-weight:650}
.ds-section-t a{margin-left:auto;font-size:var(--t-13);font-weight:600;text-decoration:none}
/* поиск по командам (Ctrl K) */
.ds-cmdk{width:min(620px,100%);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;align-self:flex-start;margin-top:8vh;animation:ds-pop .2s var(--ease)}
.ds-cmdk .q{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.ds-cmdk .q input{flex:1;border:0;background:none;font-size:var(--t-18);outline:none;min-width:0}
.ds-cmdk .res{max-height:380px;overflow:auto;padding:6px}
.ds-cmdk .gt{font-size:var(--t-12);color:var(--muted);padding:10px 12px 4px;font-weight:600}
.ds-cmdk .it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-14)}
.ds-cmdk .it[aria-selected="true"],.ds-cmdk .it:hover{background:var(--accent-soft)}
.ds-cmdk .it span{margin-left:auto;font-size:var(--t-12);color:var(--muted)}

/* ---------- 12. Мобильная оболочка ---------- */
.ds-m{display:flex;flex-direction:column;min-height:100%;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.ds-mtop{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:calc(8px + env(safe-area-inset-top)) var(--s-4) 8px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}
.ds-mtop .t{flex:1;min-width:0} .ds-mtop .t b{display:block;font-size:var(--t-18);font-weight:650;line-height:1.2} .ds-mtop .t span{display:block;font-size:var(--t-12);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-mtop .ds-btn.icon{width:var(--hit-touch);min-height:var(--hit-touch);border-radius:12px}
.ds-mbody{padding:var(--s-2) var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.ds-hero{border-radius:var(--r-xl);padding:var(--s-5);background:linear-gradient(140deg,var(--hero-a) 0%,var(--hero-b) 100%);color:#fff;display:flex;flex-direction:column;gap:var(--s-2);position:relative;overflow:hidden}
.ds-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.ds-hero .l{font-size:var(--t-14);color:rgba(255,255,255,.82)}
.ds-hero .v{font-size:var(--t-36);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.ds-hero .d{font-size:var(--t-13);color:rgba(255,255,255,.82)}
.ds-hero .ds-btn{background:#fff;color:var(--hero-a);border-color:#fff;margin-top:var(--s-2);position:relative;z-index:1}
.ds-hero.calm{background:var(--surface);color:var(--ink);border:1px solid var(--line)} .ds-hero.calm::after{display:none}
.ds-hero.calm .l,.ds-hero.calm .d{color:var(--muted)}
.ds-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.ds-tile{display:flex;flex-direction:column;gap:10px;padding:var(--s-4);min-height:112px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-align:left;color:inherit;cursor:pointer}
.ds-tile .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ds-tile b{font-size:var(--t-16);font-weight:600;margin-top:auto} .ds-tile span{font-size:var(--t-13);color:var(--muted);margin-top:-6px}
.ds-bnav{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.ds-bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 2px;border:0;background:none;color:var(--muted);font-size:11.5px;font-weight:550;cursor:pointer;border-radius:12px;position:relative}
.ds-bnav button .ds-ic{width:24px;height:24px}
.ds-bnav button[aria-current="page"]{color:var(--brand)}
.ds-bnav button[aria-current="page"] .ico{background:var(--brand-soft)}
.ds-bnav .ico{display:grid;place-items:center;width:54px;height:30px;border-radius:15px;position:relative;transition:background var(--dur)}
.ds-bnav .bd{position:absolute;top:-2px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}
.ds-bnav .bd.dot{min-width:10px;width:10px;height:10px;padding:0;right:14px;top:0}
.ds-fab{position:absolute;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:21;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:26px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:650;font-size:var(--t-16);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent);cursor:pointer}
.ds-thumbbar{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent);display:flex;gap:var(--s-2)}

/* ---------- 13. Графики (SVG, строятся скриптом) ---------- */
.ds-chart{position:relative;width:100%}
.ds-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ds-chart .ax{font-size:13px;fill:var(--muted)}
.ds-chart .grid{stroke:var(--line-2);stroke-width:1}
.ds-chart .base{stroke:var(--line);stroke-width:1}
.ds-chart .hit{fill:transparent;cursor:crosshair}
.ds-chart .hl{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
.ds-tip{position:absolute;pointer-events:none;z-index:5;background:var(--ink);color:var(--surface);border-radius:var(--r-sm);padding:8px 10px;font-size:var(--t-12);line-height:1.45;box-shadow:var(--sh-3);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.ds-tip b{font-weight:650}
.ds-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}

/* ---------- 14. Адаптивность по ширине экрана (контейнер) ---------- */
@container screen (max-width: 1100px){
  .ds-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-grid.main-side{grid-template-columns:minmax(0,1fr)}
  .ds-shell{grid-template-columns:68px minmax(0,1fr)}
  .ds-shell .ds-side .brandrow div,.ds-shell .ds-nav-i span,.ds-shell .ds-side .gt,.ds-shell .ds-side .find span,.ds-shell .ds-side .find kbd,.ds-shell .ds-side .me div,.ds-shell .ds-nav-i .ds-count{display:none}
  .ds-shell .ds-nav-i{justify-content:center}
}
@container screen (max-width: 700px){
  .ds-shell{grid-template-columns:minmax(0,1fr)}
  .ds-shell>.ds-side{display:none}
  .ds-topbar{padding:8px var(--s-4);min-height:56px;flex-wrap:nowrap}
  .ds-topbar .ds-context{flex-wrap:nowrap;gap:6px}
  .ds-topbar .ds-crumbs{flex:1;overflow:hidden;font-size:var(--t-16)}
  .ds-content{padding:var(--s-4) var(--s-4) 110px;gap:var(--s-4)}
  .ds-grid.c2,.ds-grid.c3,.ds-grid.c4{grid-template-columns:minmax(0,1fr)}
  .ds-kpis{grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
  .ds-kpis>*{scroll-snap-align:start}
  .ds-kpis::-webkit-scrollbar{display:none}
  .ds-form{grid-template-columns:minmax(0,1fr)}
  .ds-btn{min-height:var(--hit-touch)} .ds-chip{min-height:38px}
  .ds-input,.ds-select{min-height:var(--hit-touch);font-size:16px}
  .ds-only-desk{display:none!important}
  .ds-h1{font-size:var(--t-22)}
  .ds-modal{border-radius:var(--r-xl) var(--r-xl) 0 0;align-self:flex-end;width:100%}
  .ds-scrim{padding:0}
  .ds-crumbs .opt{display:none}
}
@container screen (min-width: 701px){ .ds-only-mob{display:none!important} }