/* Живое демо — копия кабинета Korra 0.21.16 на учебных данных.
 * Токены — engine/web/src/themes/neumorphism.css, доска — плагин kanban
 * (style.css): глубина вместо рамок, лайм только заливкой. Всё ограничено
 * корнем .kx и секцией #demo; стили страницы сюда не текут. */

.kx {
  --neo-background: #e8e8e8;
  --neo-surface: #e0e0e0;
  --neo-shadow: #bebebe;
  --neo-highlight: #ffffff;
  --neo-text-primary: #1f1f1f;
  --neo-text-secondary: #5c5c5c;
  --neo-accent: #9ede01;
  --kx-accent-ink: #1f2a00;
  --neo-depth-1: 1px 1px 3px var(--neo-shadow), -1px -1px 3px var(--neo-highlight);
  --neo-depth-2: 3px 3px 6px var(--neo-shadow), -3px -3px 6px var(--neo-highlight);
  --neo-depth-3: 5px 5px 10px var(--neo-shadow), -5px -5px 10px var(--neo-highlight);
  --neo-inset: inset 2px 2px 6px var(--neo-shadow), inset -2px -2px 6px var(--neo-highlight);
  --neo-inset-compact: inset 1px 1px 3px var(--neo-shadow), inset -1px -1px 3px var(--neo-highlight);
  --neo-radius-control: 1rem;
  --neo-radius-card: 1.5rem;
  --neo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kx-lime-tint: #dfe8c2;
  --kx-amber: #8a5f12;

  position: relative;
  display: flex;
  height: 600px;
  height: min(600px, 72vh);
  height: min(600px, 72svh);
  overflow: hidden;
  border-radius: 22px;
  background: var(--neo-background);
  color: var(--neo-text-primary);
  font-family: "Onest", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 30px 70px rgba(120, 120, 120, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
.kx button, .kx input, .kx textarea, .kx select { font: inherit; color: inherit; }
.kx svg { display: block; flex: none; }
.kx :where(h3), .kx :where(h4), .kx :where(p), .kx :where(ul), .kx :where(ol) { margin: 0; }
.kx :where(ul), .kx :where(ol) { padding: 0; list-style: none; }
.kx :focus-visible { outline: 2px solid var(--neo-text-primary); outline-offset: 2px; }
.kx [hidden] { display: none !important; }

/* ---------- Примитивы ---------- */
.kx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--neo-radius-control);
  background: var(--neo-surface); box-shadow: var(--neo-depth-2); color: var(--neo-text-primary);
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: box-shadow .22s var(--neo-ease-out), transform .15s var(--neo-ease-out);
}
.kx-btn:hover { box-shadow: var(--neo-depth-3); transform: translateY(-1px); }
.kx-btn:active, .kx-btn.is-pressed { box-shadow: var(--neo-inset); transform: none; }
.kx-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: var(--neo-depth-1); }
.kx-btn-primary { background: var(--neo-accent); color: var(--kx-accent-ink); font-weight: 600; }
.kx-btn-ghost { background: transparent; box-shadow: none; }
.kx-btn-ghost:hover { box-shadow: var(--neo-depth-1); }
.kx-btn-sm { padding: 0 13px; font-size: 13.5px; border-radius: 13px; }
.kx-btn-icon { width: 44px; padding: 0; border-radius: 13px; color: var(--neo-text-secondary); }
.kx-btn.is-busy::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kx-spin .8s linear infinite; }
.kx-muted { color: var(--neo-text-secondary); }
.kx-small { font-size: 12.5px; color: var(--neo-text-secondary); }
.kx-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--neo-surface); box-shadow: var(--neo-depth-1); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.kx-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neo-text-secondary); }
.kx-badge[data-tone="success"]::before { background: #5c9200; }
.kx-badge[data-tone="warning"]::before { background: #b5832b; }
.kx-kb { width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--neo-accent); color: var(--kx-accent-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.kx-kb[data-kind="done"] { background: var(--neo-surface); color: var(--neo-text-primary); box-shadow: var(--neo-inset-compact); }
.kx-card { border-radius: var(--neo-radius-card); background: var(--neo-surface); box-shadow: var(--neo-depth-3); }
.kx-note { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--neo-surface); box-shadow: var(--neo-depth-2); }
.kx-note > h4, .kx-h4 { font-size: 15px; font-weight: 600; }
.kx-field { display: grid; gap: 6px; min-width: 0; }
.kx-field > label { font-size: 13px; font-weight: 550; }
.kx input:not([type="checkbox"]), .kx textarea, .kx select {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 0; outline: 0; border-radius: var(--neo-radius-control);
  background: var(--neo-surface); box-shadow: var(--neo-inset-compact); font-size: 14px; line-height: 1.45;
}
.kx textarea { resize: vertical; }
.kx input::placeholder, .kx textarea::placeholder { color: var(--neo-text-secondary); opacity: 1; }
.kx input:focus-visible, .kx textarea:focus-visible, .kx select:focus-visible { outline: 2px solid var(--neo-text-primary); outline-offset: 1px; }
.kx-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; cursor: pointer; }
.kx-check input { width: 20px; height: 20px; margin: 0; accent-color: #5c9200; }
.kx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kx-notice { padding: 10px 12px; border-radius: 14px; background: var(--kx-lime-tint); font-size: 13.5px; animation: kx-rise .3s var(--neo-ease-out) both; }

/* ---------- Боковое меню ---------- */
.kx-side { display: none; flex: none; flex-direction: column; width: 208px; padding: 14px 10px 12px; background: var(--neo-background); }
.kx-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px 8px; }
.kx-side-head img { width: 112px; height: auto; }
.kx-side-head .ico { color: var(--neo-text-secondary); }
.kx-nav { display: flex; flex-direction: column; gap: 4px; }
.kx-nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: var(--neo-radius-control); background: transparent; font-size: 15px; text-align: left; cursor: pointer;
  transition: box-shadow .22s var(--neo-ease-out);
}
.kx-nav-item .ico { color: var(--neo-text-secondary); }
.kx-nav-item:hover { box-shadow: var(--neo-depth-1); }
.kx-nav-item.is-active { box-shadow: var(--neo-depth-2); font-weight: 500; }
.kx-nav-sub { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: 8px; padding: 0 12px; font-size: 13.5px; color: var(--neo-text-secondary); }
.kx-version { margin: auto 0 0 12px; font-size: 13px; color: var(--neo-text-secondary); }

/* ---------- Основная область ---------- */
.kx-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kx-top { display: none; align-items: center; gap: 10px; min-height: 56px; padding: 8px 20px 4px 8px; }
.kx-top > b { font-size: 15.5px; font-weight: 600; }
.kx-top-extra { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.kx-mhead { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; }
.kx-mhead-title { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.kx-mhead-title b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-mhead-title span { font-size: 12.5px; color: var(--neo-text-secondary); }
.kx-mhead .kx-btn-icon { color: var(--neo-text-primary); }
.kx-views { position: relative; flex: 1; min-height: 0; }
.kx-view { position: absolute; inset: 0; display: none; flex-direction: column; }
.kx-view.is-active { display: flex; }
.kx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 16px; }
.kx-stack { display: grid; grid-auto-rows: max-content; gap: 14px; align-content: start; }
.kx-stack, .kx-wait, .kx-note, .kx-lesson, .kx-field { grid-template-columns: minmax(0, 1fr); }
.kx-h { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.kx-sub { font-size: 13.5px; color: var(--neo-text-secondary); }

/* ---------- Вкладки агентов ---------- */
.kx-tabsbar { display: flex; align-items: center; gap: 8px; margin: 2px 8px 8px; }
.kx-tabs { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 4px; border-radius: 999px; background: var(--neo-surface); box-shadow: var(--neo-inset-compact); }
.kx-tabs-scroll { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.kx-tabs-scroll::-webkit-scrollbar { display: none; }
.kx-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--neo-text-secondary); white-space: nowrap; cursor: pointer; }
.kx-tab-av { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-depth-2); font-size: 12.5px; font-weight: 600; }
.kx-tab[aria-selected="true"] .kx-tab-av { background: #c6e37c; color: var(--neo-text-primary); }
.kx-tab-name { display: none; }
.kx-tabs-add { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-depth-1); color: var(--neo-text-secondary); cursor: pointer; }
.kx-tabs-add:hover { box-shadow: var(--neo-depth-2); color: var(--neo-text-primary); }

/* ---------- Чат ---------- */
.kx-work { display: flex; flex: 1; min-height: 0; gap: 16px; padding: 0 8px 8px; }
.kx-chats { display: none; flex-direction: column; gap: 10px; width: 250px; flex: none; padding: 10px; border-radius: var(--neo-radius-card); background: var(--neo-surface); box-shadow: var(--neo-depth-2); }
.kx-chats-head { display: flex; align-items: center; justify-content: space-between; padding-left: 6px; }
.kx-newchat { justify-content: center; width: 100%; min-height: 40px; font-weight: 600; cursor: default; }
.kx-chatlist { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.kx-chatitem { padding: 8px 10px; border-radius: 14px; font-size: 14px; }
.kx-chatitem b { display: block; font-weight: 500; line-height: 1.35; }
.kx-chatitem small { display: block; margin-top: 2px; font-size: 12px; color: var(--neo-text-secondary); }
.kx-chatitem.is-active { background: var(--kx-lime-tint); }
.kx-chatitem.is-active b { font-weight: 600; }
.kx-conv { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kx-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 4px 14px; scroll-behavior: smooth; }
.kx-msg { animation: kx-rise .3s var(--neo-ease-out) both; }
.kx-user { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 90%; padding: 8px 14px; border-radius: 18px; background: var(--neo-background); box-shadow: var(--neo-depth-2); }
.kx-agent { align-self: flex-start; max-width: 100%; padding: 12px 14px 12px; border-radius: var(--neo-radius-card); background: var(--neo-background); box-shadow: var(--neo-depth-3); }
.kx-agent-text { font-size: 15px; line-height: 1.65; }
.kx-attach { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; box-shadow: var(--neo-inset-compact); font-size: 13px; }
.kx-attach small, .kx-voice { color: var(--neo-text-secondary); }
.kx-voice { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.kx-voice i { width: 84px; height: 16px; opacity: .6; background: repeating-linear-gradient(90deg, #6f6f6f 0 2px, transparent 2px 5px); }
.kx-transcript { font-style: italic; }
.kx-sched { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; box-shadow: var(--neo-inset-compact); font-size: 12.5px; color: var(--neo-text-secondary); animation: kx-rise .3s var(--neo-ease-out) both; }

/* Ход работы — AgentTrace */
.kx-trace { margin-bottom: 8px; }
.kx-trace-head { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--neo-text-secondary); cursor: pointer; }
.kx-trace-head:hover { color: var(--neo-text-primary); }
.kx-orb { width: 20px; height: 20px; border-radius: 50%; flex: none; background: conic-gradient(from 0deg, #9ede01, #e2f5b0, #7fb800, #cdea88, #9ede01); box-shadow: 0 0 10px rgba(158, 222, 1, .55); animation: kx-spin 1.3s linear infinite; }
.kx-shimmer { background: linear-gradient(90deg, var(--neo-text-secondary) 35%, var(--neo-text-primary) 50%, var(--neo-text-secondary) 65%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: kx-shimmer 1.4s linear infinite; }
.kx-chev { transition: transform .22s var(--neo-ease-out); }
.kx-trace[data-open="true"] .kx-chev { transform: rotate(180deg); }
.kx-trace-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--neo-ease-out); }
.kx-trace[data-open="true"] .kx-trace-panel { grid-template-rows: 1fr; }
.kx-trace-inner { overflow: hidden; min-height: 0; }
.kx-trace-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 8px; }
.kx-trace-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 4px; font-size: 12px; color: var(--neo-text-secondary); animation: kx-rise .3s var(--neo-ease-out) both; min-width: 0; }
.kx-trace-row b { font-weight: 500; color: var(--neo-text-primary); flex: none; }
.kx-trace-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--neo-surface); box-shadow: var(--neo-inset-compact); font-size: 11.5px; }
.kx-trace-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--neo-accent); flex: none; animation: kx-pulse .9s var(--neo-ease-out) infinite alternate; }

/* Готовый файл, черновик, источники */
.kx-file { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 9px 12px; border-radius: var(--neo-radius-control); background: var(--neo-surface); box-shadow: var(--neo-depth-2); }
.kx-file-ico { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 10px; box-shadow: var(--neo-inset-compact); color: var(--kx-amber); }
.kx-file b, .kx-file small { display: block; }
.kx-file b { font-size: 14px; font-weight: 500; }
.kx-file small { font-size: 12px; color: var(--neo-text-secondary); }
.kx-draft { margin-top: 10px; padding: 10px 12px; border-radius: var(--neo-radius-control); box-shadow: var(--neo-inset-compact); font-size: 13.5px; line-height: 1.55; }
.kx-draft > span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--neo-text-secondary); }
.kx-auto { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--neo-text-secondary); }

/* Решения: внешняя отправка (CommandApprovalCard) и ApprovalCard */
.kx-effect { align-self: flex-start; width: 100%; max-width: 30rem; padding: 12px; border-radius: var(--neo-radius-card); background: var(--neo-surface); box-shadow: var(--neo-depth-2); animation: kx-rise .3s var(--neo-ease-out) both; }
.kx-effect-q { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
.kx-effect-q .ico { margin-top: 1px; color: var(--neo-text-secondary); }
.kx-effect-q b, .kx-effect-q small { display: block; }
.kx-effect-q b { font-weight: 600; }
.kx-effect-q small { margin-top: 2px; font-size: 12px; color: var(--neo-text-secondary); }
.kx-options { display: flex; flex-direction: column; gap: 6px; }
.kx-option { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--neo-radius-control); background: var(--neo-background); box-shadow: var(--neo-depth-1); font-size: 13px; text-align: left; cursor: pointer; transition: box-shadow .22s var(--neo-ease-out); }
.kx-option:hover { box-shadow: var(--neo-depth-2); }
.kx-option b { font-weight: 600; }
.kx-option small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--neo-text-secondary); }
.kx-option[data-effect="send"] .ico { color: #5c9200; }
.kx-settled { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--neo-text-secondary); animation: kx-rise .3s var(--neo-ease-out) both; }
.kx-settled .ico { color: #5c9200; }

/* Поле ввода */
.kx-composer { display: flex; align-items: center; gap: 6px; flex: none; margin: 0 2px 2px; padding: 6px; border-radius: var(--neo-radius-card); background: var(--neo-background); box-shadow: var(--neo-depth-3); }
.kx-composer-field { flex: 1; min-width: 0; padding: 0 4px; color: var(--neo-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-cbtn { display: none; cursor: default; }
.kx-cbtn:hover { box-shadow: var(--neo-depth-2); transform: none; }
.kx.is-running .kx-send { box-shadow: var(--neo-inset); }

/* ---------- Канбан-доска ---------- */
.kx-bhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.kx-bhead p { margin-top: 4px; }
.kx-bsub { display: none; }
.kx-wait { display: grid; gap: 10px; padding: 12px; border-radius: var(--neo-radius-card); background: var(--neo-surface); box-shadow: var(--neo-depth-2); }
.kx-wait-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-height: 60px; padding: 8px 10px; border-radius: var(--neo-radius-control); box-shadow: var(--neo-inset-compact); }
.kx-wait-text { display: grid; gap: 3px; flex: 1 1 150px; min-width: 0; }
.kx-wait-text strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.kx-wait-text small { font-size: 12px; color: var(--neo-text-secondary); }
.kx-wplan { display: none; }
.kx-wait-item .kx-btn { flex: none; }
.kx-wait-item.is-done { color: var(--neo-text-secondary); }
.kx-wait-item.is-done strong { font-weight: 500; }
.kx-plan { display: grid; gap: 6px; padding: 10px 14px; border: 0; border-radius: var(--neo-radius-control); background: var(--neo-surface); box-shadow: var(--neo-depth-1); text-align: left; cursor: pointer; }
.kx-plan b { font-weight: 600; }
.kx-prog { display: block; height: 8px; border-radius: 999px; box-shadow: var(--neo-inset-compact); overflow: hidden; }
.kx-prog i { display: block; height: 100%; border-radius: 999px; background: var(--neo-accent); transition: width .6s var(--neo-ease-out); }
.kx-cols { display: flex; gap: 12px; margin: 0 -10px; padding: 4px 10px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 10px; }
.kx-col { display: flex; flex-direction: column; gap: 10px; flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
.kx-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kx-col-head h4 { font-size: 14.5px; font-weight: 600; }
.kx-col-head span { min-width: 26px; padding: 1px 7px; border-radius: 999px; box-shadow: var(--neo-inset-compact); font-size: 12.5px; text-align: center; }
.kx-col-hint { font-size: 12px; color: var(--neo-text-secondary); }
.kx-col-empty { padding: 14px 10px; font-size: 12px; color: var(--neo-text-secondary); }
.kx-task { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 12px 13px; border: 0; border-radius: 18px; background: var(--neo-surface); box-shadow: var(--neo-depth-2); text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: box-shadow .22s var(--neo-ease-out); }
.kx-task:hover { box-shadow: var(--neo-depth-3); }
.kx-task strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.kx-tag { width: fit-content; padding: 2px 8px; border-radius: 12px; box-shadow: var(--neo-inset-compact); font-size: 11px; }
.kx-prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--neo-text-secondary); }
.kx-who { font-size: 12px; font-weight: 550; }
.kx-meta { font-size: 11px; color: var(--neo-text-secondary); }
.kx-task.is-moved { animation: kx-flash 1.6s var(--neo-ease-out); }
.kx-task.is-running .kx-who::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--neo-accent); vertical-align: 1px; animation: kx-pulse .9s var(--neo-ease-out) infinite alternate; }

/* ---------- Карточка, формы, мастер — выдвижная панель ---------- */
.kx-sheet { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 18px; overflow-y: auto; background: var(--neo-background); animation: kx-sheet .3s var(--neo-ease-out) both; }
.kx-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kx-sheet-head h3 { font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kx-sheet-head p { margin-top: 2px; font-size: 12.5px; color: var(--neo-text-secondary); }
.kx-sheet details > summary, .kx-hist > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 13.5px; font-weight: 500; list-style: none; }
.kx summary::-webkit-details-marker { display: none; }
.kx summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.kx details[open] > summary::before { transform: rotate(45deg); }
.kx-steps { display: grid; gap: 4px; padding-left: 20px; list-style: decimal; font-size: 13px; }
.kx-steps [aria-current] { font-weight: 600; }
.kx-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kx-tpl { display: grid; align-content: start; gap: 4px; min-height: 92px; padding: 10px 12px; border: 0; border-radius: var(--neo-radius-control); background: var(--neo-surface); box-shadow: var(--neo-depth-1); text-align: left; cursor: pointer; }
.kx-tpl[aria-pressed="true"] { box-shadow: var(--neo-depth-2); background: var(--kx-lime-tint); }
.kx-tpl i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--neo-text-secondary); }
.kx-tpl b { font-size: 14px; font-weight: 600; }
.kx-tpl small { font-size: 12px; color: var(--neo-text-secondary); line-height: 1.4; }
.kx-reply { display: grid; gap: 6px; padding: 12px; border-radius: 16px; box-shadow: var(--neo-inset-compact); font-size: 13.5px; }

/* ---------- Задачи по расписанию ---------- */
.kx-job { display: grid; gap: 6px; padding: 12px 14px; }
.kx-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kx-job-head b { font-size: 14.5px; font-weight: 600; }
.kx-job-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--neo-text-secondary); }
.kx-job-to { font-size: 12.5px; }
.kx-job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.kx-job-acts { display: flex; gap: 4px; margin-left: auto; }
.kx-job-acts .kx-btn-icon { box-shadow: none; background: transparent; }
.kx-job-acts .kx-btn-icon:hover { box-shadow: var(--neo-depth-1); }
.kx-job-acts [data-run] { color: #3f6600; }
.kx-hist ul { display: grid; gap: 4px; padding-bottom: 6px; font-size: 12.5px; }
.kx-hist li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kx-hist li b { font-weight: 500; }

/* ---------- Обучение ---------- */
.kx-ltabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: var(--neo-radius-control); background: var(--neo-surface); box-shadow: var(--neo-inset-compact); }
.kx-ltabs::-webkit-scrollbar { display: none; }
.kx-ltab { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font-size: 13.5px; color: var(--neo-text-secondary); white-space: nowrap; cursor: pointer; }
.kx-ltab[aria-selected="true"] { background: var(--neo-background); box-shadow: var(--neo-depth-1); color: var(--neo-text-primary); font-weight: 600; }
.kx-mem-list { display: grid; gap: 6px; }
.kx-mem-list li { padding: 8px 12px; border-radius: 12px; box-shadow: var(--neo-inset-compact); font-size: 13.5px; }
.kx-lesson { display: grid; gap: 8px; padding: 12px; border-radius: 16px; box-shadow: var(--neo-inset-compact); font-size: 13.5px; animation: kx-rise .3s var(--neo-ease-out) both; }
.kx-lesson-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kx-lesson-top p:first-child { font-weight: 500; }

/* ---------- Файлы ---------- */
.kx-folders { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kx-folder { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 10px 12px; border-radius: 14px; box-shadow: var(--neo-inset-compact); }
.kx-folder .ico { grid-row: span 2; color: var(--kx-amber); }
.kx-folder b { font-size: 14px; font-weight: 500; }
.kx-folder small { font-size: 12px; color: var(--neo-text-secondary); }
.kx-table { padding: 4px 0; overflow: hidden; }
.kx-trow { display: grid; grid-template-columns: 1fr 64px; gap: 10px; align-items: center; padding: 9px 14px; font-size: 13.5px; }
.kx-trow + .kx-trow { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); }
.kx-trow.is-head { font-size: 12.5px; font-weight: 600; color: var(--neo-text-secondary); }
.kx-trow > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-trow > span:first-child i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-trow > span:not(:first-child) { color: var(--neo-text-secondary); }
.kx-trow > span:nth-child(3) { display: none; }

/* ---------- Дашборд ---------- */
.kx-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--neo-text-secondary); }
.kx-grid { display: grid; gap: 14px; }
.kx-panel { padding: 12px 14px; }
.kx-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.kx-panel-head span { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 13px; color: var(--neo-text-secondary); }
.kx-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px; border: 0; border-radius: var(--neo-radius-control); background: transparent; text-align: left; }
.kx-row b { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.kx-row small { display: block; font-size: 12px; color: var(--neo-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-row > span:nth-child(2) { min-width: 0; }
.kx-row-ico { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 11px; background: var(--neo-surface); box-shadow: var(--neo-depth-2); color: var(--neo-text-secondary); font-size: 11.5px; font-weight: 600; }
.kx-row-ico.is-lime { background: var(--neo-accent); color: var(--kx-accent-ink); box-shadow: none; }
.kx-row-ico.is-round { border-radius: 50%; }
.kx-row-end { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--neo-text-secondary); }

/* ---------- Выдвижные меню и сообщения ---------- */
.kx-toast { position: absolute; left: 50%; bottom: 12px; z-index: 6; max-width: calc(100% - 24px); margin: 0; padding: 8px 14px; border-radius: 14px; background: var(--neo-text-primary); color: #f2f2f2; font-size: 13px; transform: translateX(-50%); pointer-events: none; display: none; }
.kx-toast.is-on { display: block; }
.kx-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(190, 190, 190, 0.55); opacity: 0; pointer-events: none; transition: opacity .25s var(--neo-ease-out); }
.kx.is-menu .kx-scrim, .kx.is-chats .kx-scrim { opacity: 1; pointer-events: auto; }
.kx.is-menu .kx-side { display: flex; position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; box-shadow: 10px 0 30px rgba(0, 0, 0, 0.12); animation: kx-slide .3s var(--neo-ease-out) both; }
.kx.is-chats .kx-chats { display: flex; position: absolute; z-index: 5; top: 64px; right: 10px; left: 10px; bottom: 10px; animation: kx-rise .3s var(--neo-ease-out) both; }

/* ---------- Секция на странице ---------- */
.demo { padding: 8px 0 40px; }
.demo-head { display: grid; gap: 12px; margin-bottom: 16px; }
.demo-title { font-size: clamp(24px, 4.4vw, 36px); }
.demo-tour { display: flex; gap: 8px; margin: 0 -20px; padding: 4px 20px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.demo-tour::-webkit-scrollbar { display: none; }
.demo-chip {
  display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border: 0; border-radius: 999px;
  background: #e0e0e0; box-shadow: 3px 3px 7px #c4c4c4, -3px -3px 7px #fff; color: #1f1f1f; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  transition: box-shadow .22s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-chip:hover { box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #fff; }
.demo-chip i { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; box-shadow: inset 1px 1px 3px #bebebe, inset -1px -1px 3px #fff; font-size: 13px; font-style: normal; font-weight: 600; color: #5c5c5c; }
.demo-chip.is-active { box-shadow: inset 2px 2px 6px #bebebe, inset -2px -2px 6px #fff; }
.demo-chip.is-active i { background: #9ede01; box-shadow: none; color: #1f2a00; }
.demo-caption { margin-top: 14px; font-size: 13px; color: #5c5c5c; }

/* ---------- Планшет и десктоп ---------- */
@media (min-width: 560px) {
  .kx-bsub { display: block; }
  .kx-wplan { display: inline; }
  .kx-col { flex-basis: 46%; }
  .kx-folders { grid-template-columns: 1fr 1fr; }
  .kx-trow { grid-template-columns: 1fr 70px 130px; }
  .kx-trow > span:nth-child(3) { display: block; }
  .kx-tpls { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  .kx { height: 640px; }
  .kx-cbtn { display: inline-flex; }
  .kx-sheet { left: auto; width: min(460px, 100%); box-shadow: -14px 0 32px rgba(0, 0, 0, 0.12); }
  .demo-tour { margin: 0; padding: 4px; }
  .kx-grid.is-two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .kx { height: 660px; font-size: 15px; }
  .kx-side { display: flex; }
  .kx.is-menu .kx-side { position: static; box-shadow: none; animation: none; }
  .kx-scrim, .kx-mhead { display: none; }
  .kx-top { display: flex; }
  .kx-tabsbar { margin: 0 20px 10px 4px; }
  .kx-tabs { border-radius: var(--neo-radius-control); }
  .kx-tab { min-height: 44px; padding: 0 14px; border-radius: 12px; }
  .kx-tab-av { display: none; }
  .kx-tab-name { display: inline; }
  .kx-tab:hover { color: var(--neo-text-primary); }
  .kx-tab[aria-selected="true"] { background: var(--kx-lime-tint); box-shadow: var(--neo-depth-1); color: var(--neo-text-primary); font-weight: 600; }
  .kx-work { padding: 0 20px 14px 4px; }
  .kx-chats, .kx.is-chats .kx-chats { display: flex; position: static; animation: none; }
  .kx-chats-head { display: none; }
  .kx-agent { max-width: 92%; padding: 16px 20px 14px; }
  .kx-scroll { padding: 4px 20px 20px 4px; }
  .kx-cols { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); margin: 0; padding: 4px 2px 10px; }
  .kx-wait { gap: 8px; padding: 10px 12px; }
  .kx-wait-item { min-height: 50px; padding: 4px 6px 4px 10px; }
  .kx-wait-text { grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px; }
  .kx-plan { grid-template-columns: minmax(150px, 1fr) minmax(90px, 1fr) minmax(220px, 2fr); align-items: center; column-gap: 16px; }
  .kx-folders { grid-template-columns: repeat(3, 1fr); }
  .demo { padding: 8px 0 56px; }
  .demo-head { grid-template-columns: 1fr auto; align-items: center; }
}

@keyframes kx-rise { from { transform: translateY(6px); } to { transform: none; } }
@keyframes kx-spin { to { transform: rotate(360deg); } }
@keyframes kx-shimmer { to { background-position: -200% center; } }
@keyframes kx-pulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes kx-slide { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes kx-sheet { from { transform: translateX(24px); } to { transform: none; } }
@keyframes kx-flash { 0%, 40% { background: var(--kx-lime-tint); } 100% { background: var(--neo-surface); } }

@media (prefers-reduced-motion: reduce) {
  .kx *, .kx *::before, .kx *::after { animation: none !important; transition-duration: .01ms !important; }
  .kx-shimmer { background: none; -webkit-text-fill-color: currentColor; }
  .kx-log { scroll-behavior: auto; }
  .demo-chip { transition: none; }
}

/* Отдельная страница: кабинет сразу доступен, без автоматического тура. */
.demo-page .demo { padding-top: 32px; }