.vt-kb { display: flex; flex-direction: column; gap: 20px; }
.vt-kb-box { border: 1px solid var(--vt-border); border-radius: var(--vt-r-lg); background: var(--vt-surface); overflow: hidden; min-width: 0; }
.vt-kb-title { margin: 0; font-size: 15px; font-weight: 600; }
.vt-kb-title-lg { font-size: 18px; }
.vt-kb-hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--vt-text-soft); }
.vt-kb-soft { font-size: 12.5px; color: var(--vt-text-soft); }
.vt-kb-mute { font-size: 13px; color: var(--vt-text-mute); }
.vt-kb-btn { height: 38px; padding: 0 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; }
.vt-kb-btn-lg { height: 42px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0; }

.vt-kb-how { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.vt-kb-how-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vt-kb-how-text { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.vt-kb-how .vt-kb-title { font-size: 16px; }
.vt-kb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vt-kb-steps li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--vt-surface-2); border: 1px solid var(--vt-border-soft); }
.vt-kb-step { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--vt-border); color: var(--vt-text); font-size: 12px; font-weight: 600; }
.vt-kb-step-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-kb-step-text strong { font-size: 13.5px; font-weight: 600; }
.vt-kb-codes { font-size: 12px; color: var(--vt-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vt-kb-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.vt-kb-list-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; }
.vt-kb-count { font-family: var(--bs-font-monospace); font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--vt-border); color: var(--vt-text-soft); }
.vt-kb-search { position: relative; display: flex; align-items: center; padding: 0 18px 12px; }
.vt-kb-search vt-icon, .vt-kb-search svg { position: absolute; left: 30px; top: 12px; color: var(--vt-text-mute); pointer-events: none; }
.vt-kb-search .form-control { height: 40px; padding-left: 36px; border-radius: 10px; font-size: 14px; }
.vt-kb-empty-line { padding: 0 18px 16px; font-size: 13px; color: var(--vt-text-mute); }
.vt-kb-topics { list-style: none; margin: 0; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.vt-kb-topic { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--vt-text); text-align: left; }
.vt-kb-topic:hover { background: var(--vt-surface-2); }
.vt-kb-topic.active { border-color: color-mix(in srgb, var(--vt-accent) 45%, var(--vt-border)); background: var(--vt-accent-soft); }
.vt-kb-topic-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--vt-surface-2); color: var(--vt-text-mute); }
.vt-kb-topic.active .vt-kb-topic-icon { background: color-mix(in srgb, var(--vt-accent) 22%, transparent); color: var(--vt-accent); }
.vt-kb-topic-name { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-kb-topic-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.vt-kb-topic-code { font-size: 11.5px; color: var(--vt-text-mute); }
.vt-kb-topic-count { font-size: 12px; color: var(--vt-text-soft); white-space: nowrap; }

.vt-kb-sel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--vt-border-soft); flex-wrap: wrap; }
.vt-kb-sel-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-kb-sel-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vt-kb-sel-code { font-size: 12px; padding: 2px 7px; border-radius: 5px; background: var(--vt-danger-soft); color: var(--vt-danger); }
.vt-kb-sel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vt-kb-qas { list-style: none; margin: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.vt-kb-qa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--vt-surface-2); border: 1px solid var(--vt-border-soft); }
.vt-kb-qa-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vt-kb-qa-line { display: flex; gap: 10px; align-items: baseline; }
.vt-kb-qa-tag { width: 14px; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.vt-kb-qa-tag.q { color: var(--vt-accent); }
.vt-kb-qa-tag.a { color: var(--vt-ok); }
.vt-kb-qa-q { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.vt-kb-qa-a { font-size: 14px; line-height: 1.55; color: var(--vt-text-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.vt-kb-qa-actions { display: flex; gap: 2px; align-items: flex-start; }
.vt-kb-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: var(--vt-text-mute); display: grid; place-items: center; }
.vt-kb-icon-btn:hover { background: var(--vt-border-soft); color: var(--vt-text); }
.vt-kb-empty { margin: 20px; padding: 32px 20px; border-radius: 12px; border: 1px dashed var(--vt-border); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 14.5px; }

@media (max-width: 1100px) {
  .vt-kb-grid, .vt-kb-steps { grid-template-columns: 1fr; }
}