:root {
  --bur-design-bg: #f6f8fb;
  --bur-design-surface: #ffffff;
  --bur-design-text: #111827;
  --bur-design-muted: #667085;
  --bur-design-primary: #0b7cff;
  --bur-design-accent: #00a3ff;
  --bur-design-button: #0b7cff;
  --bur-design-button-text: #ffffff;
  --bur-design-border: #dfe7f2;
  --bur-design-card: #ffffff;
  --bur-design-soft: #eef6ff;
  --bur-design-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body.design-live {
  background: var(--bur-design-bg) !important;
  color: var(--bur-design-text) !important;
  font-family: var(--bur-design-font) !important;
}

body.design-live .app,
body.design-live .main,
body.design-live #questionScreen {
  background:
    radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--bur-design-primary) 10%, transparent), transparent 28%),
    var(--bur-design-bg) !important;
}

body.design-live .question-card,
body.design-live .start-card,
body.design-live .finish-card,
body.design-live .tree-panel {
  background: var(--bur-design-surface) !important;
  color: var(--bur-design-text) !important;
  border-color: var(--bur-design-border) !important;
}

body.design-live h1,
body.design-live h2,
body.design-live .question-title,
body.design-live #questionText {
  color: var(--bur-design-text) !important;
}

body.design-live .hint,
body.design-live #hintText,
body.design-live .progress-text,
body.design-live .section-title {
  color: var(--bur-design-muted) !important;
}

body.design-live .primary-btn,
body.design-live #nextBtn,
body.design-live #startBtn,
body.design-live #submitBtn {
  background: var(--bur-design-button) !important;
  color: var(--bur-design-button-text) !important;
  border-color: var(--bur-design-button) !important;
}

body.design-buttons-outline .primary-btn,
body.design-buttons-outline #nextBtn,
body.design-buttons-outline #startBtn,
body.design-buttons-outline #submitBtn {
  background: transparent !important;
  color: var(--bur-design-button) !important;
  border: 2px solid var(--bur-design-button) !important;
}

body.design-live #skipBtn,
body.design-live #backBtn {
  color: var(--bur-design-text) !important;
}

body.design-live .choice,
body.design-live .input,
body.design-live textarea {
  background: var(--bur-design-card) !important;
  color: var(--bur-design-text) !important;
  border-color: var(--bur-design-border) !important;
}

body.design-live .choice.selected,
body.design-live .tree-item.active {
  border-color: var(--bur-design-primary) !important;
  background: color-mix(in srgb, var(--bur-design-primary) 11%, var(--bur-design-card)) !important;
}

body.design-live .question-comment-btn,
body.design-live .voice-control-panel,
body.design-live .question-attach-panel {
  color: var(--bur-design-primary) !important;
  border-color: color-mix(in srgb, var(--bur-design-primary) 28%, var(--bur-design-border)) !important;
  background: color-mix(in srgb, var(--bur-design-primary) 4%, var(--bur-design-card)) !important;
}

body.design-live .question-attach-btn {
  color: var(--bur-design-primary) !important;
  border-color: color-mix(in srgb, var(--bur-design-primary) 26%, var(--bur-design-border)) !important;
}

body.design-dark {
  --bur-design-bg: #0b1220;
  --bur-design-surface: #111827;
  --bur-design-card: #162033;
  --bur-design-soft: #172136;
  --bur-design-text: #f8fafc;
  --bur-design-muted: #cbd5e1;
  --bur-design-border: #334155;
}

body.design-dark .choice.selected {
  background: color-mix(in srgb, var(--bur-design-primary) 28%, var(--bur-design-card)) !important;
}

body.design-font-strict {
  --bur-design-font: Arial, system-ui, sans-serif;
}

body.design-font-geo {
  --bur-design-font: "Arial Black", Arial, system-ui, sans-serif;
}

body.design-font-classic {
  --bur-design-font: Georgia, "Times New Roman", serif;
}

body.design-font-soft {
  --bur-design-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.choice.design-palette-choice {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  text-align: left !important;
  min-height: 78px !important;
  padding: 13px !important;
}

.design-swatches {
  display: grid !important;
  grid-template-columns: repeat(2, 22px) !important;
  gap: 4px !important;
  align-items: center !important;
}

.design-swatch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  display: block !important;
}

.design-choice-text {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

.design-choice-title {
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

.design-choice-desc {
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--bur-design-muted, #667085) !important;
}

.design-color-tool {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.design-color-tool label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #dfe7f2 !important;
  font: 900 12px/1 Arial, system-ui, sans-serif !important;
  color: #475467 !important;
}

.design-color-tool input[type="color"] {
  width: 30px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.design-no-voice .voice-control-panel {
  display: none !important;
}

.design-live-preview {
  margin-top: 10px !important;
  padding: 13px !important;
  border-radius: 18px !important;
  border: 1px solid var(--bur-design-border) !important;
  background: var(--bur-design-surface) !important;
  color: var(--bur-design-text) !important;
  transform: translateZ(0) !important;
}

.design-live-preview-title {
  font: 950 17px/1.1 var(--bur-design-font) !important;
  margin-bottom: 6px !important;
}

.design-live-preview-text {
  color: var(--bur-design-muted) !important;
  font: 800 13px/1.25 var(--bur-design-font) !important;
}

.design-live-preview-btn {
  margin-top: 10px !important;
  display: inline-flex !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--bur-design-button) !important;
  color: var(--bur-design-button-text) !important;
  border: 2px solid var(--bur-design-button) !important;
  font: 950 13px/1 var(--bur-design-font) !important;
}

body.design-buttons-outline .design-live-preview-btn {
  background: transparent !important;
  color: var(--bur-design-button) !important;
}

/* убираем прямоугольник под нижними кнопками */
#questionScreen .card-actions,
body.design-live #questionScreen .card-actions {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#questionScreen .card-actions::before,
#questionScreen .card-actions::after {
  display: none !important;
  content: none !important;
}

/* длинные вопросы */
#questionScreen:not(.hidden) {
  overflow: hidden !important;
}

#questionScreen .question-card {
  min-height: 0 !important;
  overflow: hidden !important;
}

#questionFlow.question-flow {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  align-content: start !important;
  justify-content: flex-start !important;
  scroll-padding-top: 0 !important;
}

#questionFlow.question-flow #questionText,
#questionFlow.question-flow #hintText,
#questionFlow.question-flow #answerHost {
  flex: 0 0 auto !important;
}

body[data-current-question="QD.13"] #questionFlow.question-flow {
  gap: 8px !important;
  padding-top: 2px !important;
  padding-bottom: 18px !important;
}

body[data-current-question="QD.13"] #questionText {
  font-size: clamp(22px, 5.6vw, 28px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
}

body[data-current-question="QD.13"] #hintText {
  font-size: clamp(15px, 3.9vw, 18px) !important;
  line-height: 1.16 !important;
}

body[data-current-question="QD.13"] #answerHost {
  gap: 8px !important;
}

body[data-current-question="QD.13"] .question-attach-panel {
  padding: 10px !important;
  margin-top: 8px !important;
}