/* Мелки поверх ДС: сетки, таблицы, файлы, журнал, шаги. Цвета — только токены. */ a.kt-ai-btn { text-decoration: none; } button.kt-ai-btn { font: inherit; } .kt-icon { width: 16px; height: 16px; display: block; } /* ---------- layout ---------- */ .sb-side { display: flex; flex-direction: column; padding: var(--kt-ai-space-5) var(--kt-ai-space-4); gap: 2px; min-height: 100dvh; } .sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: 0 var(--kt-ai-space-2) var(--kt-ai-space-6); } .sb-top .kt-ai-avatar { width: 26px; height: 26px; font-size: 10px; flex: 0 0 auto; } .sb-top .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; } .sb-top .nm b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); letter-spacing: -.01em; line-height: 1.25; } .sb-top .nm span { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); } .sb-nav { display: flex; flex-direction: column; gap: 2px; } .sb-nav .kt-ai-nav-item .lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sb-nav .kt-ai-nav-item .lbl small { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } .sb-foot { margin-top: auto; padding: var(--kt-ai-space-5) var(--kt-ai-space-2) 0; } .sb-foot .meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } .topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); min-width: 0; } .topbar-title .t { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-title .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; } @media (max-width: 767.98px) { .topbar-title .sub, #deadlineChip { display: none; } } .view { width: 100%; max-width: 1200px; margin-inline: auto; padding: var(--kt-ai-space-8); } .page-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); } .page-head .ph-text { flex: 1; min-width: 0; } .page-head h1 { margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.15; } .page-head .sub { margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); max-width: 68ch; } .page-head .ph-action { flex-shrink: 0; display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap; } @media (max-width: 639.98px) { .page-head { flex-direction: column; gap: var(--kt-ai-space-5); } } .grid-2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: var(--kt-ai-space-6); align-items: start; } .grid-2-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--kt-ai-space-6); align-items: start; } @media (max-width: 1023.98px) { .grid-2, .grid-2-rev { grid-template-columns: 1fr; } } .kt-ai-card.block { padding: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); } .block-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); flex-wrap: wrap; } .block-head h2 { margin: 0; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; } .block-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } .block-head .spacer { flex: 1; } .block-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin: -4px 0 var(--kt-ai-space-5); } /* ---------- фильтры ---------- */ .filter-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-5); } .filter-row .kt-ai-select-wrap { width: 220px; } @media (max-width: 639.98px) { .filter-row .kt-ai-select-wrap { width: 100%; } } .filter-note { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } /* ---------- таблицы ---------- */ .table-wrap { max-height: 560px; overflow: auto; border-bottom: 1px solid var(--kt-ai-divider); } .kt-ai-table .col-compact { white-space: nowrap; } .kt-ai-table tbody tr[data-clickable="true"] { cursor: pointer; } .cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; } .delta-neg { color: var(--kt-ai-status-risk-fg); } .delta-pos { color: var(--kt-ai-status-ok-fg); } .cell-orig { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); } /* отклонения >10% */ .cell-dev { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); } /* ошибка единиц */ .cell-unit-w { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); cursor: pointer; } .cell-unit-fixed { box-shadow: inset 2px 0 0 var(--kt-ai-chart-green); background: var(--kt-ai-status-ok-bg); } /* ---------- файлы ---------- */ .file-list { display: flex; flex-direction: column; gap: 2px; max-height: 430px; overflow: auto; } .file-list .kt-ai-row { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); align-items: center; gap: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); } .file-list .f-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg-muted); flex: 0 0 auto; } .file-list .f-name { min-width: 0; flex: 1; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); } .file-list .f-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); white-space: nowrap; } /* ---------- прогресс ---------- */ .progress-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-3); } .progress-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } .progress-head b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; } /* ---------- журнал ---------- */ .log-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); max-height: 460px; overflow: auto; } .log-item { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; } .log-item .log-time { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; width: 40px; flex: 0 0 auto; padding-top: 2px; } .log-item .log-tag { flex: 0 0 auto; margin-top: 1px; } .log-item .log-tag .kt-ai-chip { display: inline-flex; align-items: center; } .log-item p { margin: 0; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.5; } .log-item p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } /* ---------- stepper ---------- */ .steps { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); } .step { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-elevated); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); cursor: pointer; transition: border-color var(--kt-ai-dur-fast), color var(--kt-ai-dur-fast); } @media (max-width: 639.98px) { .step { padding: var(--kt-ai-space-2) var(--kt-ai-space-4); } .step-sep { display: none; } } .step:hover:not([data-disabled="true"]) { border-color: var(--kt-ai-border-strong); color: var(--kt-ai-fg); } .step[data-cur="true"] { border-color: var(--kt-ai-primary); color: var(--kt-ai-fg); background: var(--kt-ai-primary-subtle); } .step[data-done="true"] { color: var(--kt-ai-fg); } .step .ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted); font-size: 10px; font-weight: var(--kt-ai-weight-bold); font-variant-numeric: tabular-nums; } .step[data-done="true"] .ic { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-bg); } .step[data-cur="true"] .ic { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); } .step[data-disabled="true"] { opacity: .55; cursor: default; } .step-sep { width: 14px; height: 1px; background: var(--kt-ai-border-strong); flex: 0 0 auto; } /* ---------- записка ---------- */ .memo { padding: var(--kt-ai-space-7); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); } .memo h3 { margin: 0 0 var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; } .memo p { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); line-height: 1.65; color: var(--kt-ai-fg-muted); } .memo p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } .memo .memo-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-bottom: var(--kt-ai-space-5); } .memo .memo-dev { font-size: var(--kt-ai-text-sm); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); } /* ---------- «О решении» ---------- */ .pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-space-6); } .pass-card .kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--kt-ai-space-3) var(--kt-ai-space-5); } .pass-card .kv dt { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); padding-top: 2px; } .pass-card .kv dd { margin: 0; font-size: var(--kt-ai-text-sm); line-height: 1.55; } .pass-card ol, .pass-card ul { margin: 0; padding-left: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.55; } .pass-card ol li, .pass-card ul li { min-width: 0; } /* ---------- toast ---------- */ .toast-stack { position: fixed; bottom: var(--kt-ai-space-7); right: var(--kt-ai-space-7); display: flex; flex-direction: column; gap: var(--kt-ai-space-4); z-index: 2000; } .toast { display: flex; align-items: center; gap: var(--kt-ai-space-4); width: 340px; max-width: calc(100vw - 48px); background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-xl); box-shadow: var(--kt-ai-shadow-lg); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); animation: tok-in .18s ease; } .toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); flex: 0 0 auto; } .toast[data-tone="ok"]::before { background: var(--kt-ai-status-ok-fg); } .toast[data-tone="warn"]::before { background: var(--kt-ai-status-warn-fg); } @keyframes tok-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- mobile ---------- */ .sb-scrim { display: none; position: fixed; inset: 0; background: var(--kt-ai-overlay); z-index: 1400; } @media (max-width: 831.98px) { .sb-scrim.on { display: block; } .sb-side { position: fixed; inset: auto 0 0 auto; width: 280px; z-index: 1500; transform: translateX(100%); transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard); background: var(--kt-ai-bg-elevated); box-shadow: var(--kt-ai-shadow-lg); } .sb-side[data-open="true"] { transform: none; } .view { padding: var(--kt-ai-space-6) var(--kt-ai-space-5) var(--kt-ai-space-10); } }