/* Тест — только мелкие стили, цвета через токены ДС (var(--kt-ai-…)) */

#app { min-height: 100dvh; }

/* ── Экран входа ─────────────────────────────────────── */
.scr-entry {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--kt-ai-space-8);
  background: var(--kt-ai-bg);
}
.entry-card {
  width: 100%;
  max-width: 460px;
  padding: var(--kt-ai-space-9) var(--kt-ai-space-8);
}
.entry-brand {
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  margin-bottom: var(--kt-ai-space-8);
}
.entry-brand img { border-radius: var(--kt-ai-radius-xl); }
.entry-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
.entry-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
.entry-form { margin-top: var(--kt-ai-space-6); }
.entry-hint {
  font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal);
  padding: var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg);
  margin-bottom: var(--kt-ai-space-6);
}

/* ── Экран теста ─────────────────────────────────────── */
#scr-test { max-width: 860px; margin: 0 auto; padding: var(--kt-ai-space-7) var(--kt-ai-space-7) 120px; }
.test-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4);
  padding-bottom: var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); margin-bottom: var(--kt-ai-space-6);
}
.test-top-fio { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
.test-top-dept { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
.test-top-right { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
.test-top-score { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }

.test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kt-ai-space-7); }
.tq { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-6); background: var(--kt-ai-card-bg, var(--kt-ai-bg)); }
.tq-head { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); }
.tq-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary);
  font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-bold); font-variant-numeric: tabular-nums;
}
.tq-q { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); line-height: var(--kt-ai-leading-normal); }
.tq-opts { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
.opt {
  display: flex; align-items: flex-start; gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border);
  border-radius: var(--kt-ai-radius-lg); cursor: pointer; font-size: var(--kt-ai-text-sm);
  transition: border-color var(--kt-ai-dur-fast), background var(--kt-ai-dur-fast);
}
.opt:hover { background: var(--kt-ai-bg-hover); }
.opt:focus-visible { outline: none; border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
.opt input { accent-color: var(--kt-ai-primary); margin-top: 2px; flex-shrink: 0; }
.opt[aria-checked="true"] { border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); }

.test-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--kt-ai-space-5);
  max-width: 860px; margin: 0 auto;
  padding: var(--kt-ai-space-4) var(--kt-ai-space-7);
  background: var(--kt-ai-bg-elevated); border-top: 1px solid var(--kt-ai-border);
  border-radius: var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl) 0 0;
}
.test-foot-count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }

/* ── Экран результата ────────────────────────────────── */
#scr-result { max-width: 860px; margin: 0 auto; padding: var(--kt-ai-space-8) var(--kt-ai-space-7) var(--kt-ai-space-10); }
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-8); }
.res-head h1 { margin: 0; font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
.res-sub { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2); }
.res-score-card { flex-shrink: 0; padding: var(--kt-ai-space-6) var(--kt-ai-space-8); text-align: center; min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-2); }
.res-score-val { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res-score-label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }

.res-wrong-head {
  display: flex; align-items: center; gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
  background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border);
  border-radius: var(--kt-ai-radius-xl); margin-bottom: var(--kt-ai-space-5);
  font-size: var(--kt-ai-text-sm);
}
.res-wrong-head .kt-icon { color: var(--kt-ai-status-risk-fg); }

.res-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-5); }
.resq {
  border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl);
  padding: var(--kt-ai-space-6); background: var(--kt-ai-card-bg, var(--kt-ai-bg));
}
.resq[data-wrong="true"] { border-color: color-mix(in srgb, var(--kt-ai-status-risk-fg) 40%, var(--kt-ai-border)); }
.resq-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-4); }
.resq-q { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); flex: 1 1 100%; }
.resq-opts { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
.resq-opt {
  display: flex; align-items: flex-start; gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg);
  border: 1px solid transparent; font-size: var(--kt-ai-text-sm);
}
.resq-opt .mark {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--kt-ai-text-2xs); margin-top: 1px;
}
.resq-opt.is-correct { background: var(--kt-ai-status-ok-bg); border-color: color-mix(in srgb, var(--kt-ai-status-ok-fg) 30%, transparent); }
.resq-opt.is-correct .mark { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-fg-on-fill); }
.resq-opt.is-wrong { background: var(--kt-ai-status-risk-bg); border-color: color-mix(in srgb, var(--kt-ai-status-risk-fg) 30%, transparent); }
.resq-opt.is-wrong .mark { background: var(--kt-ai-status-risk-fg); color: var(--kt-ai-fg-on-fill); }
.resq-opt .exp-btn { margin-left: auto; flex-shrink: 0; }
.resq-cat { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }

.res-actions {
  display: flex; align-items: center; gap: var(--kt-ai-space-5);
  margin-top: var(--kt-ai-space-8); padding-top: var(--kt-ai-space-6);
  border-top: 1px solid var(--kt-ai-divider);
}

/* ── Куратор: основные ───────────────────────────────── */
.cur-main { min-width: 0; display: flex; flex-direction: column; }
.cur-view {
  width: 100%; max-width: var(--kt-ai-content-table, 1100px); margin-inline: auto;
  padding: var(--kt-ai-stack-region, 32px) var(--kt-ai-stack-region, 32px) 48px;
}
.cur-view h2 { margin: 0 0 var(--kt-ai-space-5); font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }

.person-row {
  display: flex; align-items: center; gap: var(--kt-ai-space-5);
  padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
  border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl);
  cursor: pointer; transition: background var(--kt-ai-dur-fast); background: var(--kt-ai-bg);
}
.person-row:hover { background: var(--kt-ai-bg-hover); }
.person-row + .person-row { margin-top: var(--kt-ai-space-2); }
.person-fio { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
.person-dept { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 1px; }
.person-info { flex: 1; min-width: 0; }
.person-pct { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
.person-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); text-align: right; font-variant-numeric: tabular-nums; }

.vsplit { border: 0; border-top: 1px solid var(--kt-ai-divider); margin: var(--kt-ai-space-8) 0; }
.vsplit-h { font-size: var(--kt-ai-text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--kt-ai-fg-faint); margin-bottom: var(--kt-ai-space-4); }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--kt-ai-space-4); }
.cat {
  border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4);
  display: flex; flex-direction: column; gap: 4px;
}
.cat .c { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
.cat .v { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }

/* ── Drawer: вопросы и карточка специалиста ─────────── */
.drawer-body { padding: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); max-height: 100%; overflow-y: auto; }
.drawer-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-3); }
.drawer-head .t { flex: 1; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
.q-opt-row { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
.q-opt-row .kt-ai-icon-button { flex-shrink: 0; opacity: 0; transition: opacity var(--kt-ai-dur-fast); }
.q-opt-row:hover .kt-ai-icon-button { opacity: 1; }
.q-opt-row input[type="radio"] { flex-shrink: 0; }
.opt-move { display: flex; gap: 2px; flex-shrink: 0; }

.stat-card { display: flex; gap: var(--kt-ai-space-6); padding: var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); margin-bottom: var(--kt-ai-space-5); }
.stat-card .s { display: flex; flex-direction: column; gap: 3px; }
.stat-card .v { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
.stat-card .l { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }

.attempt-line {
  display: flex; align-items: center; gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-sm);
}
.attempt-line .d { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }
.attempt-line .sp { flex: 1; }

/* ── Модалка: разбор ошибки ──────────────────────────── */
.xp { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
.xp .xp-row { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); }
.xp .xp-row .m {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--kt-ai-text-2xs); margin-top: 1px;
}
.xp .xp-row.you { background: var(--kt-ai-status-risk-bg); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
.xp .xp-row.you .m { background: var(--kt-ai-status-risk-fg); color: var(--kt-ai-fg-on-fill); }
.xp .xp-row.right { background: var(--kt-ai-status-ok-bg); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
.xp .xp-row.right .m { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-fg-on-fill); }
.xp .xp-note {
  background: var(--kt-ai-primary-subtle); padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
  border-radius: var(--kt-ai-radius-lg); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); line-height: var(--kt-ai-leading-normal);
}

/* ── Мелочь ──────────────────────────────────────────── */
.kt-ai-ghostlink { background: none; border: none; padding: 0; font: inherit; color: var(--kt-ai-primary); cursor: pointer; }
.kt-ai-spacer { flex: 1; }
@media (max-width: 639.98px) {
  .res-head { flex-direction: column; }
  .person-meta { text-align: left; }
  .test-foot { padding-left: var(--kt-ai-space-4); padding-right: var(--kt-ai-space-4); }
}