/* Свой стиль — только сетка и мелочи; цвета и размеры — токены KT AI. */

.ds-brand { display:flex; align-items:center; gap:var(--kt-ai-space-3); padding:2px 6px var(--kt-ai-space-5); }
.ds-brand img { height:26px; width:auto; flex-shrink:0; }
.ds-brand .brand-label { font-size:var(--kt-ai-text-sm); font-weight:var(--kt-ai-weight-semibold); color:var(--kt-ai-fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-nav { display:flex; flex-direction:column; gap:2px; }

.ds-burger { display:none; }
.ds-topbar-title { display:flex; align-items:baseline; gap:var(--kt-ai-space-3); min-width:0; }
.ds-topbar-title strong { font-size:var(--kt-ai-text-lg); font-weight:var(--kt-ai-weight-semibold); letter-spacing:-.01em; white-space:nowrap; }
.ds-topbar-title span { font-size:var(--kt-ai-text-xs); color:var(--kt-ai-fg-muted); white-space:nowrap; }
@media (max-width: 639.98px) {
  .ds-burger { display:inline-flex; }
  .ds-topbar-title span { display:none; }
}

.ds-view { width:100%; max-width:1200px; margin-inline:auto; padding:var(--kt-ai-space-8) var(--kt-ai-space-8) var(--kt-ai-space-11); }
@media (max-width: 639.98px) { .ds-view { padding:var(--kt-ai-space-5) var(--kt-ai-space-5) var(--kt-ai-space-9); } }

.ds-screen { display:none; }
.ds-screen[data-active="true"] { display:block; }

.ds-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--kt-ai-space-6); margin-top:var(--kt-ai-space-6); }

.ds-filters { display:flex; align-items:center; gap:var(--kt-ai-space-4); flex-wrap:wrap; }
.ds-filters .kt-ai-select { width:auto; min-width:150px; }
.ds-filters .ds-reset { margin-left:auto; }

.ds-chart-wrap { position:relative; }
.ds-chart-legend { display:flex; gap:var(--kt-ai-space-5); flex-wrap:wrap; margin-top:var(--kt-ai-space-4); font-size:var(--kt-ai-text-xs); color:var(--kt-ai-fg-muted); }
.ds-chart-legend .sw { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

.ds-donut { display:flex; gap:var(--kt-ai-space-6); align-items:center; }
.ds-donut svg { width:128px; height:128px; flex-shrink:0; }
.ds-donut-list { flex:1; min-width:0; }
.ds-donut-row { display:flex; align-items:center; gap:var(--kt-ai-space-3); padding:4px 0; font-size:var(--kt-ai-text-xs); }
.ds-donut-row .sw { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.ds-donut-row .lbl { flex:1; min-width:0; line-height:1.3; }
.ds-donut-row .val { font-variant-numeric:tabular-nums; font-weight:var(--kt-ai-weight-semibold); }
.ds-donut-row .pc { width:38px; text-align:right; color:var(--kt-ai-fg-muted); font-variant-numeric:tabular-nums; }

.ds-h3 { font-size:var(--kt-ai-text-md); font-weight:var(--kt-ai-weight-semibold); color:var(--kt-ai-fg); margin:var(--kt-ai-space-8) 0 var(--kt-ai-space-4); }
.ds-muted { color:var(--kt-ai-fg-muted); }
.ds-num { font-variant-numeric:tabular-nums; }

@media (max-width: 831.98px) {
  #sidebar[data-open="true"]::after {
    content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: var(--kt-ai-sidebar-width, 240px);
    background: var(--kt-ai-bg); opacity: .5; z-index: -1;
  }
  .ds-brand { justify-content:center; }
}