.cpd-app {
  --cpd-accent: #2563eb;
  --cpd-primary: var(--cpd-accent);
  --cpd-accent-soft: #eff6ff;
  --cpd-border: #d9e1ec;
  --cpd-muted: #667085;
  --cpd-surface: #ffffff;
  --cpd-canvas: #f4f7fb;
  --cpd-text: var(--text-primary, #172033);
  color: var(--text-primary, #172033);
  background: var(--cpd-canvas);
  min-height: calc(100vh - 132px);
}

.cpd-project-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(130px, .72fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 20px;
  background: var(--cpd-surface);
  border-bottom: 1px solid var(--cpd-border);
  position: sticky;
  top: 0;
  z-index: 12;
}

.cpd-field,
.cpd-check-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cpd-field > span,
.cpd-group-label {
  color: var(--cpd-muted);
  font-size: 12px;
  font-weight: 750;
}

.cpd-input,
.cpd-select,
.cpd-textarea {
  width: 100%;
  border: 1px solid var(--cpd-border);
  border-radius: 9px;
  background: var(--cpd-surface);
  color: inherit;
  font: inherit;
  outline: none;
}

.cpd-input,
.cpd-select {
  min-height: 38px;
  padding: 7px 10px;
}

.cpd-textarea {
  min-height: 86px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.55;
}

.cpd-input:focus,
.cpd-select:focus,
.cpd-textarea:focus {
  border-color: var(--cpd-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpd-accent) 15%, transparent);
}

.cpd-save-state {
  align-self: center;
  justify-self: end;
  color: var(--cpd-muted);
  font-size: 12px;
  white-space: nowrap;
}

.cpd-layout {
  display: grid;
  grid-template-columns: minmax(205px, 22%) minmax(420px, 48%) minmax(300px, 30%);
  max-width: 1780px;
  margin: 0 auto;
  min-height: calc(100vh - 210px);
}

.cpd-nav,
.cpd-editor,
.cpd-results {
  min-width: 0;
}

.cpd-nav {
  padding: 18px 14px 100px 20px;
  border-right: 1px solid var(--cpd-border);
  background: color-mix(in srgb, var(--cpd-surface) 82%, var(--cpd-canvas));
}

.cpd-progress {
  margin-bottom: 16px;
}

.cpd-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
}

.cpd-progress-track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #e5eaf2;
}

.cpd-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--cpd-accent);
  transition: width .2s ease;
}

.cpd-step-list {
  display: grid;
  gap: 4px;
}

.cpd-step-btn {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cpd-step-btn:hover { background: color-mix(in srgb, var(--cpd-accent) 7%, transparent); }
.cpd-step-btn.active { background: var(--cpd-accent-soft); color: #174ea6; }
.cpd-step-no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cpd-border) 62%, transparent);
  font-size: 11px;
  font-weight: 850;
}
.cpd-step-btn.active .cpd-step-no { background: var(--cpd-accent); color: white; }
.cpd-step-label { font-size: 13px; font-weight: 750; }
.cpd-step-status { font-size: 11px; color: var(--cpd-muted); }
.cpd-step-status.error { color: #b42318; }

.cpd-editor {
  padding: 20px 22px 110px;
  background: var(--cpd-canvas);
}

.cpd-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.cpd-eyebrow {
  color: var(--cpd-accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cpd-editor-title {
  margin: 4px 0 5px;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -.03em;
}

.cpd-editor-desc {
  margin: 0;
  color: var(--cpd-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cpd-history-actions,
.cpd-button-row,
.cpd-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cpd-btn {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 9px;
  background: var(--cpd-surface);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.cpd-btn:hover:not(:disabled) { border-color: var(--cpd-accent); }
.cpd-btn:disabled { cursor: not-allowed; opacity: .45; }
.cpd-btn.primary { border-color: var(--cpd-accent); background: var(--cpd-accent); color: white; }
.cpd-btn.soft { border-color: transparent; background: var(--cpd-accent-soft); color: #174ea6; }
.cpd-btn.danger { color: #b42318; }

.cpd-panel {
  padding: 18px;
  border: 1px solid var(--cpd-border);
  border-radius: 14px;
  background: var(--cpd-surface);
  box-shadow: 0 8px 28px rgba(25, 41, 65, .045);
}

.cpd-panel + .cpd-panel { margin-top: 12px; }
.cpd-panel h3 { margin: 0 0 4px; font-size: 15px; }
.cpd-help { margin: 0 0 14px; color: var(--cpd-muted); font-size: 12px; line-height: 1.5; }
.cpd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cpd-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpd-span-all { grid-column: 1 / -1; }

.cpd-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cpd-choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cpd-choice-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpd-choice {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 10px;
  cursor: pointer;
}
.cpd-choice:has(input:checked) { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); }
.cpd-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cpd-choice strong { font-size: 13px; }
.cpd-choice small { color: var(--cpd-muted); font-size: 11px; line-height: 1.35; }

.cpd-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.cpd-checks:has(.cpd-check.has-help) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
}
.cpd-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--cpd-border);
  border-radius: 9px;
  cursor: pointer;
}
.cpd-check.has-help {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
}
.cpd-check:hover { border-color: color-mix(in srgb, var(--cpd-accent) 55%, var(--cpd-border)); }
.cpd-check:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--cpd-accent) 60%, transparent); outline-offset: 2px; }
.cpd-check:has(input:checked) { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); }
.cpd-check input { flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--cpd-accent); }
.cpd-check > span { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; min-width: 0; gap: 3px; }
.cpd-check > span > strong { grid-column: 1; font-size: 12px; font-weight: 750; line-height: 1.35; }
.cpd-check > span > small { display: block; grid-column: 1; color: var(--cpd-muted); font-size: 9px; font-weight: 500; line-height: 1.45; }

.cpd-colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.cpd-color-field {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 7px;
  align-items: center;
}
.cpd-color-field span { grid-column: 1 / -1; color: var(--cpd-muted); font-size: 11px; font-weight: 750; }
.cpd-color-field input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--cpd-border); border-radius: 8px; background: none; }
.cpd-color-field .cpd-input { min-height: 34px; padding: 5px 7px; font-family: "JetBrains Mono", monospace; font-size: 11px; }

.cpd-range { display: grid; gap: 7px; }
.cpd-range-head { display: flex; justify-content: space-between; color: var(--cpd-muted); font-size: 12px; font-weight: 750; }
.cpd-range input { width: 100%; accent-color: var(--cpd-accent); }

.cpd-results {
  padding: 20px 20px 110px 16px;
  border-left: 1px solid var(--cpd-border);
  background: var(--cpd-surface);
}
.cpd-results-inner { position: sticky; top: 84px; display: grid; gap: 12px; }
.cpd-result-card { border: 1px solid var(--cpd-border); border-radius: 13px; overflow: hidden; background: var(--cpd-surface); }
.cpd-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--cpd-border); }
.cpd-result-head h3 { margin: 0; font-size: 13px; }
.cpd-badge { padding: 4px 7px; border-radius: 999px; background: #eef2f7; color: var(--cpd-muted); font-size: 10px; font-weight: 850; }
.cpd-badge.ok { background: #ecfdf3; color: #027a48; }
.cpd-badge.error { background: #fef3f2; color: #b42318; }
.cpd-badge.warning { background: #fffaeb; color: #b54708; }

.cpd-preview-wrap { padding: 13px; }
.cpd-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--cpd-ratio, 1.7778);
  border: 1px solid var(--preview-border, #d8e0ea);
  border-radius: 6px;
  background: var(--preview-bg, #fff);
  color: var(--preview-text, #111827);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .1);
}
.cpd-preview.safe::after { content: ""; position: absolute; z-index: 1; inset: var(--safe-top, 6%) var(--safe-right, 6%) var(--safe-bottom, 6%) var(--safe-left, 6%); border: 1px dashed color-mix(in srgb, var(--preview-accent) 62%, transparent); opacity: .38; pointer-events: none; }
.cpd-preview-header,
.cpd-preview-body,
.cpd-preview-footer { position: relative; z-index: 2; }
.cpd-preview-header { container: preview-header / size; box-sizing: border-box; display: flex; flex: 0 0 var(--preview-header-height, 12%); align-items: center; gap: clamp(3px, 1.2%, 7px); min-width: 0; min-height: 0; overflow: hidden; padding-block: 2px; padding-inline-start: max(7%, var(--safe-left, 6%)); padding-inline-end: max(7%, var(--safe-right, 6%)); color: var(--preview-text); font-size: clamp(6px, 1.9cqw, 11px); }
.cpd-preview-header.type-leftRule { margin-left: max(5%, var(--safe-left, 6%)); padding-left: 3%; border-left: clamp(2px, .9cqw, 4px) solid var(--preview-primary); }
.cpd-preview-header.type-thinBar { border-top: 4px solid var(--preview-primary); }
.cpd-preview-header.type-fullBar { background: var(--preview-primary); color: #fff; }
.cpd-preview-header.type-numberTitle { gap: 3%; }
.cpd-preview-header.align-center { justify-content: center; text-align: center; }
.cpd-preview-header.align-right { justify-content: flex-end; text-align: right; }
.cpd-preview-header-copy { display: grid; flex: 1 1 auto; align-content: center; gap: 1px; min-width: 0; max-width: 100%; max-height: 100%; overflow: hidden; }
.cpd-preview-header-copy small,
.cpd-preview-header-copy strong,
.cpd-preview-header-copy em { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-header-copy small { color: var(--preview-primary); font-size: .68em; font-weight: 850; letter-spacing: .03em; }
.cpd-preview-header.type-fullBar .cpd-preview-header-copy small { color: inherit; opacity: .78; }
.cpd-preview-header-copy small,
.cpd-preview-header-copy em { line-height: 1.15; }
.cpd-preview-header-copy strong { font-size: 1.05em; line-height: 1.2; }
.cpd-preview-header-copy em { opacity: .58; font-size: .68em; font-style: normal; font-weight: 650; }
.cpd-preview-header-number { display: grid; flex: 0 0 auto; place-items: center; width: clamp(11px, 4.5cqw, 17px); height: clamp(11px, 4.5cqw, 17px); border-radius: 4px; background: var(--preview-primary); color: #fff; font-size: clamp(5px, 1.6cqw, 7px); font-weight: 900; }
.cpd-preview-header.type-fullBar .cpd-preview-header-number { background: rgba(255,255,255,.2); }
.cpd-preview-page { flex: 0 0 auto; margin-left: auto; font-size: clamp(6px, 1.8cqw, 10px); line-height: 1; font-weight: 900; }
.cpd-preview-header.align-right .cpd-preview-page { margin-left: 0; }
.cpd-preview-header-divider { position: absolute; right: max(7%, var(--safe-right, 6%)); bottom: 0; left: max(7%, var(--safe-left, 6%)); height: 1px; background: var(--preview-border); }
.cpd-preview-body { container: preview-body / size; display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(6px, 4%, 18px); min-width: 0; min-height: 0; overflow: hidden; padding-block: clamp(5px, 3%, 14px); padding-inline-start: max(7%, var(--safe-left, 6%)); padding-inline-end: max(7%, var(--safe-right, 6%)); }
.cpd-preview-story { position: relative; z-index: 2; display: grid; align-content: center; gap: clamp(2px, 1.1cqw, 5px); min-width: 0; min-height: 0; overflow: hidden; }
.cpd-preview-story > span { overflow: hidden; color: var(--preview-primary); font-size: clamp(4px, 1.45cqw, 7px); line-height: 1.15; font-weight: 900; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-story > strong { display: -webkit-box; overflow: hidden; color: var(--preview-text); font-size: clamp(7px, 2.55cqw, 13px); line-height: 1.18; letter-spacing: -.025em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cpd-preview-story > p { display: -webkit-box; overflow: hidden; margin: 0; color: color-mix(in srgb, var(--preview-text) 62%, transparent); font-size: clamp(5px, 1.45cqw, 7px); line-height: 1.35; font-weight: 650; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cpd-preview-story-rule { width: 42%; height: clamp(2px, .8cqw, 4px); margin-top: clamp(1px, .6cqw, 3px); border-radius: 999px; background: var(--preview-accent); }
.cpd-preview-dashboard { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(3px, 1.5cqw, 7px); min-width: 0; min-height: 0; overflow: hidden; }
.cpd-preview-photo-zone { position: absolute; z-index: 3; display: grid; place-content: center; gap: 1px; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--preview-primary) 38%, var(--preview-border)); border-radius: clamp(3px, 1.4cqw, 7px); background: color-mix(in srgb, var(--preview-primary) 16%, var(--preview-surface)); color: var(--preview-primary); text-align: center; box-shadow: 0 2px 8px rgba(15,23,42,.08); pointer-events: none; }
.cpd-preview-photo-zone b { font-size: clamp(4px, 1.2cqw, 6px); line-height: 1.15; }
.cpd-preview-photo-zone small { overflow: hidden; max-width: 100%; padding-inline: 3px; color: color-mix(in srgb, var(--preview-text) 55%, transparent); font-size: clamp(3px, .9cqw, 5px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-photo-zone.secondary { opacity: .72; }
.cpd-preview-photo-zone.target-background { z-index: 0; top: 7%; right: 1%; bottom: 7%; width: 43%; opacity: .38; }
.cpd-preview-photo-zone.target-hero { z-index: 1; top: 7%; right: 1%; bottom: 7%; width: 37%; }
.cpd-preview-photo-zone.target-accent { top: 8%; left: 37%; width: 18%; height: 24%; }
.cpd-preview-photo-zone.target-card { top: 12%; right: 28%; width: 20%; height: 28%; }
.cpd-preview-photo-zone.target-card.secondary { top: auto; right: 2%; bottom: 8%; }
.cpd-preview-photo-zone.target-card.card-inside { top: 12%; right: 28%; }
.cpd-preview-photo-zone.target-card.card-side { top: 12%; right: 1%; }
.cpd-preview-photo-zone.target-card.card-corner { right: 1%; bottom: 5%; width: 16%; height: 23%; }
.cpd-preview-metric,
.cpd-preview-roadmap { box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--preview-border); border-radius: var(--card-radius, 7px); background: var(--preview-surface); box-shadow: var(--card-shadow, none); }
.cpd-preview-metric { display: grid; align-content: center; gap: 1px; padding: clamp(3px, 2cqw, 9px); }
.cpd-preview-metric.featured { border-color: color-mix(in srgb, var(--preview-primary) 30%, var(--preview-border)); background: color-mix(in srgb, var(--preview-primary) 12%, var(--preview-surface)); }
.cpd-preview-metric > span,
.cpd-preview-roadmap > span { overflow: hidden; color: color-mix(in srgb, var(--preview-text) 58%, transparent); font-size: clamp(4px, 1.15cqw, 6px); line-height: 1.15; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-metric > strong { overflow: hidden; color: var(--preview-primary); font-size: clamp(8px, 3.2cqw, 16px); line-height: 1; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-metric > small { overflow: hidden; color: color-mix(in srgb, var(--preview-text) 54%, transparent); font-size: clamp(4px, 1.05cqw, 6px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-roadmap { display: grid; grid-column: 1 / -1; grid-template-rows: auto minmax(0, 1fr); gap: clamp(2px, 1cqw, 5px); padding: clamp(3px, 1.8cqw, 8px); }
.cpd-preview-roadmap ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2px, 1cqw, 5px); min-width: 0; min-height: 0; margin: 0; padding: 0; list-style: none; }
.cpd-preview-roadmap li { position: relative; display: grid; align-content: center; gap: 1px; min-width: 0; overflow: hidden; padding-left: clamp(7px, 2.6cqw, 13px); border-left: 1px solid color-mix(in srgb, var(--preview-primary) 28%, var(--preview-border)); }
.cpd-preview-roadmap li:first-child { border-left-color: var(--preview-primary); }
.cpd-preview-roadmap li:nth-child(2) { border-left-color: var(--preview-secondary, var(--preview-primary)); }
.cpd-preview-roadmap i { position: absolute; top: 50%; left: 2px; color: var(--preview-primary); font-size: clamp(3px, .95cqw, 5px); line-height: 1; font-style: normal; font-weight: 900; transform: translateY(-50%) rotate(-90deg); }
.cpd-preview-roadmap b,
.cpd-preview-roadmap em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-roadmap b { color: var(--preview-text); font-size: clamp(4px, 1.3cqw, 7px); line-height: 1.15; }
.cpd-preview-roadmap em { color: color-mix(in srgb, var(--preview-text) 52%, transparent); font-size: clamp(3px, 1cqw, 5px); line-height: 1.15; font-style: normal; font-weight: 650; }
.cpd-preview-body.without-cards .cpd-preview-metric,
.cpd-preview-body.without-cards .cpd-preview-roadmap { border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.cpd-preview-body.without-cards .cpd-preview-metric { border-bottom: 1px solid var(--preview-border); }
.cpd-preview.shape-portrait .cpd-preview-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(9px, 3.5%, 20px); }
.cpd-preview.shape-portrait .cpd-preview-story { align-content: start; }
.cpd-preview.shape-portrait .cpd-preview-story > span { font-size: clamp(6px, 1.8cqw, 8px); }
.cpd-preview.shape-portrait .cpd-preview-story > strong { font-size: clamp(10px, 3.2cqw, 14px); }
.cpd-preview.shape-portrait .cpd-preview-story > p { font-size: clamp(6px, 1.9cqw, 8px); }
.cpd-preview.shape-portrait .cpd-preview-dashboard { grid-template-rows: minmax(58px, .62fr) minmax(0, 1.38fr); }
.cpd-preview.shape-portrait .cpd-preview-metric > span,
.cpd-preview.shape-portrait .cpd-preview-roadmap > span { font-size: clamp(6px, 1.75cqw, 8px); }
.cpd-preview.shape-portrait .cpd-preview-metric > strong { font-size: clamp(15px, 4.7cqw, 21px); }
.cpd-preview.shape-portrait .cpd-preview-metric > small { font-size: clamp(6px, 1.65cqw, 8px); }
.cpd-preview.shape-portrait .cpd-preview-roadmap ol { grid-template-columns: minmax(0, 1fr); }
.cpd-preview.shape-portrait .cpd-preview-roadmap li { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); align-items: center; padding-block: 2px; padding-left: clamp(15px, 4cqw, 21px); border-top: 1px solid color-mix(in srgb, var(--preview-border) 72%, transparent); border-left: 0; }
.cpd-preview.shape-portrait .cpd-preview-roadmap li:first-child { border-top-color: transparent; }
.cpd-preview.shape-portrait .cpd-preview-roadmap i { left: 2px; transform: translateY(-50%); }
.cpd-preview.shape-portrait .cpd-preview-roadmap b { font-size: clamp(7px, 2.2cqw, 10px); }
.cpd-preview.shape-portrait .cpd-preview-roadmap em { font-size: clamp(6px, 1.8cqw, 8px); }
.cpd-preview-footer { container: preview-footer / size; box-sizing: border-box; display: flex; flex: 0 0 var(--preview-footer-height, 7%); align-items: center; gap: clamp(3px, 2cqw, 8px); min-width: 0; min-height: 0; overflow: hidden; margin-inline-start: max(7%, var(--safe-left, 6%)); margin-inline-end: max(7%, var(--safe-right, 6%)); color: color-mix(in srgb, var(--preview-text) 56%, transparent); font-size: clamp(5px, 1.55cqw, 9px); line-height: 1; font-weight: 750; }
.cpd-preview-footer > span { flex: 1 1 auto; min-width: 0; overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.cpd-preview-footer.with-divider, .cpd-preview-footer.type-divider { border-top: 1px solid var(--preview-border); }
.cpd-preview-footer.align-center { justify-content: center; text-align: center; }
.cpd-preview-footer.align-right { justify-content: flex-end; text-align: right; }
.cpd-preview-footer .cpd-preview-page { color: var(--preview-text); line-height: 1.2; }
.cpd-preview-footer.align-left .cpd-preview-page { margin-left: auto; }
.cpd-preview-footer.align-center > span,
.cpd-preview-footer.align-right > span { flex: 0 1 auto; }
.cpd-preview-footer.align-center .cpd-preview-page,
.cpd-preview-footer.align-right .cpd-preview-page { margin-left: 0; }
.cpd-preview-footer.type-page span { opacity: .72; }
@container preview-header (max-height: 27px) {
  .cpd-preview-header-copy { gap: 0; }
  .cpd-preview-header.has-section.has-subtitle .cpd-preview-header-copy em { display: none; }
  .cpd-preview-header-copy small { font-size: .62em; }
  .cpd-preview-header-copy strong { font-size: .94em; line-height: 1.15; }
}
@container preview-header (max-height: 13px) {
  .cpd-preview-header-copy small,
  .cpd-preview-header-copy em { display: none; }
  .cpd-preview-header-copy strong { font-size: .88em; }
}
@container preview-footer (max-height: 11px) {
  .cpd-preview-footer > span,
  .cpd-preview-footer > .cpd-preview-page { font-size: 4px; }
}
.cpd-preview-caption { margin: 9px 0 0; color: var(--cpd-muted); font-size: 10px; line-height: 1.4; }

.cpd-issues { display: grid; gap: 7px; padding: 11px; max-height: 180px; overflow: auto; }
.cpd-issue { padding: 8px 9px; border-left: 3px solid #98a2b3; border-radius: 6px; background: #f8fafc; font-size: 11px; line-height: 1.45; }
.cpd-issue.error { border-color: #d92d20; background: #fff6f5; }
.cpd-issue.warning { border-color: #f79009; background: #fffbeb; }
.cpd-issue.recommendation { border-color: #2e90fa; background: #eff8ff; }

.cpd-output {
  width: 100%;
  min-height: 190px;
  max-height: 310px;
  padding: 12px;
  border: 0;
  background: #111827;
  color: #e5edf8;
  font: 11px/1.55 "JetBrains Mono", monospace;
  resize: vertical;
}
.cpd-result-actions { padding: 10px; }
.cpd-output-meta { padding: 0 11px 10px; color: var(--cpd-muted); font-size: 10px; }

.cpd-mobile-bar { display: none; }
.cpd-hidden { display: none !important; }

[data-theme="dark"] .cpd-app {
  --cpd-accent: #f4f4f5;
  --cpd-accent-soft: rgba(255, 255, 255, .09);
  --cpd-border: #343434;
  --cpd-muted: #a3a3a3;
  --cpd-surface: #171717;
  --cpd-canvas: #101010;
}
[data-theme="dark"] .cpd-step-btn.active,
[data-theme="dark"] .cpd-btn.soft { color: #f4f4f5; }
[data-theme="dark"] .cpd-input,
[data-theme="dark"] .cpd-select,
[data-theme="dark"] .cpd-textarea { background: #0d0d0d; }
[data-theme="dark"] .cpd-issue { background: #202020; }
[data-theme="dark"] .cpd-issue.error { background: rgba(217, 45, 32, .12); }
[data-theme="dark"] .cpd-issue.warning { background: rgba(247, 144, 9, .12); }
[data-theme="dark"] .cpd-issue.recommendation { background: rgba(46, 144, 250, .12); }

@media (max-width: 1180px) {
  .cpd-project-bar { grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(120px, 1fr)) auto; }
  .cpd-project-bar .cpd-model-field { display: none; }
  .cpd-layout { grid-template-columns: 190px minmax(400px, 1fr); }
  .cpd-results { grid-column: 2; border-left: 0; border-top: 1px solid var(--cpd-border); padding-top: 16px; }
  .cpd-results-inner { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cpd-result-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .cpd-app { min-height: calc(100vh - 112px); }
  .cpd-project-bar { position: static; grid-template-columns: 1fr 1fr; padding: 12px; }
  .cpd-project-bar .cpd-field:first-child { grid-column: 1 / -1; }
  .cpd-save-state { justify-self: start; }
  .cpd-layout { display: block; min-height: auto; }
  .cpd-nav { padding: 12px; border-right: 0; border-bottom: 1px solid var(--cpd-border); }
  .cpd-step-list { display: none; }
  .cpd-progress { margin: 0; }
  .cpd-editor { padding: 16px 12px 96px; }
  .cpd-editor-head { display: block; }
  .cpd-history-actions { margin-top: 12px; }
  .cpd-form-grid,
  .cpd-form-grid.three,
  .cpd-choice-grid,
  .cpd-choice-grid.three,
  .cpd-choice-grid.four,
  .cpd-colors { grid-template-columns: 1fr; }
  .cpd-results { padding: 16px 12px 100px; border: 0; }
  .cpd-results-inner { display: grid; grid-template-columns: 1fr; }
  .cpd-result-card:last-child { grid-column: auto; }
  .cpd-mobile-bar {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: 7px;
    padding: 9px 12px max(9px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--cpd-border);
    background: color-mix(in srgb, var(--cpd-surface) 94%, transparent);
    backdrop-filter: blur(12px);
  }
  .cpd-mobile-bar .cpd-btn { padding-inline: 10px; }
}

/* Accordion settings layout */
.cpd-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  gap: 40px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 18px 28px 96px;
}

.cpd-main-column,
.cpd-summary { min-width: 0; }

.cpd-page-head {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(180px, 230px) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
}

.cpd-page-head h2 {
  margin: 0 0 7px;
  font-size: clamp(23px, 2vw, 30px);
  letter-spacing: -.035em;
}

.cpd-page-head p {
  margin: 0;
  color: var(--cpd-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cpd-page-head .cpd-progress { width: 100%; margin: 0; }
.cpd-page-head .cpd-progress-head { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cpd-progress > p { margin: 0; color: var(--cpd-muted); font-size: 10px; line-height: 1.45; }
.cpd-progress-status { color: #067647; font-size: 10px; font-weight: 800; }
.cpd-progress-status.error { color: #b42318; }
.cpd-hidden-tools { display: none; }

.cpd-institution-random {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(480px, auto);
  align-items: end;
  gap: 16px 24px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--cpd-accent) 24%, var(--cpd-border));
  border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cpd-accent-soft) 68%, var(--cpd-surface)), var(--cpd-surface));
}
.cpd-institution-random-copy { min-width: 0; }
.cpd-institution-random-copy > span { color: var(--cpd-accent); font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.cpd-institution-random-copy h3 { margin: 4px 0; font-size: 15px; }
.cpd-institution-random-copy p { margin: 0; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }
.cpd-institution-random-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) repeat(2, minmax(132px, 1fr));
  align-items: stretch;
  gap: 8px;
}
.cpd-institution-random-actions .cpd-btn {
  width: 100%;
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
}
.cpd-institution-random-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(0, 1.45fr);
  gap: 12px 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cpd-accent) 14%, var(--cpd-border));
}
.cpd-institution-random-result > div:first-child { display: grid; align-content: start; gap: 3px; }
.cpd-institution-random-result small { color: var(--cpd-muted); font-size: 9px; font-weight: 750; }
.cpd-institution-random-result strong { font-size: 12px; }
.cpd-institution-random-result > div:first-child span { color: var(--cpd-muted); font-size: 10px; line-height: 1.45; }
.cpd-institution-random-result dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.cpd-institution-random-result dl > div { min-width: 0; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 10%, var(--cpd-border)); border-radius: 8px; background: color-mix(in srgb, var(--cpd-surface) 76%, transparent); }
.cpd-institution-random-result dt { color: var(--cpd-muted); font-size: 8px; font-weight: 800; }
.cpd-institution-random-result dd { overflow: hidden; margin: 2px 0 0; font-size: 10px; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .cpd-institution-random { grid-template-columns: 1fr; align-items: stretch; }
  .cpd-institution-random-actions { grid-template-columns: minmax(170px, 1.2fr) repeat(2, minmax(140px, 1fr)); }
}

.cpd-progress-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.cpd-progress-row .cpd-progress { margin: 0; }
.cpd-expand-actions { display: flex; align-items: center; gap: 7px; }
.cpd-single-open-note { color: var(--cpd-muted); font-size: 10px; font-weight: 700; white-space: nowrap; }

.cpd-accordion {
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 14px;
  background: var(--cpd-surface);
  box-shadow: 0 10px 34px rgba(25, 41, 65, .05);
}

.cpd-accordion-item + .cpd-accordion-item { border-top: 1px solid var(--cpd-border); }
.cpd-accordion-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--cpd-surface);
}
.cpd-accordion-item.disabled .cpd-accordion-head { background: color-mix(in srgb, var(--cpd-muted) 5%, var(--cpd-surface)); }

.cpd-accordion-trigger {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 3px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}

.cpd-accordion-trigger:hover { background: color-mix(in srgb, var(--cpd-accent) 4%, var(--cpd-surface)); }
.cpd-accordion-item.expanded .cpd-accordion-head > .cpd-accordion-trigger { background: color-mix(in srgb, var(--cpd-accent) 5%, var(--cpd-surface)); }
.cpd-accordion-item.expanded .cpd-step-no { background: var(--cpd-accent); color: #fff; }

.cpd-accordion-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cpd-accordion-copy strong { font-size: 14px; letter-spacing: -.01em; }
.cpd-accordion-copy small {
  overflow: hidden;
  color: var(--cpd-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpd-accordion-status {
  color: var(--cpd-muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.cpd-accordion-status.error { color: #b42318; }

.cpd-section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  min-width: 78px;
  min-height: 28px;
  margin-right: 12px;
  padding: 4px 10px;
  border: 1px solid var(--cpd-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-muted) 7%, var(--cpd-surface));
  color: var(--cpd-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.cpd-section-toggle > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #98a2b3;
}
.cpd-section-toggle.active {
  border-color: #a6f4c5;
  background: #ecfdf3;
  color: #027a48;
}
.cpd-section-toggle.active > span { background: #12b76a; }
.cpd-section-toggle:hover { filter: brightness(.98); }
.cpd-section-toggle:focus-visible { outline: 2px solid var(--cpd-accent); outline-offset: 2px; }

.cpd-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cpd-muted);
  border-bottom: 2px solid var(--cpd-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}
.cpd-accordion-item.expanded .cpd-chevron { transform: rotate(225deg) translate(-1px, -1px); }

.cpd-accordion-body {
  padding: 0 16px 14px 58px;
  background: color-mix(in srgb, var(--cpd-accent) 2%, var(--cpd-surface));
}
.cpd-section-disabled-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  min-height: 64px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--cpd-border) 72%, transparent);
}
.cpd-section-disabled-note strong { font-size: 12px; }
.cpd-section-disabled-note span { flex: 1 1 320px; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }

.cpd-accordion-body .cpd-panel {
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--cpd-border) 72%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cpd-accordion-body .cpd-panel + .cpd-panel { margin-top: 14px; }
.cpd-accordion-body .cpd-help { margin-bottom: 10px; }
.cpd-accordion-body .cpd-form-grid { gap: 10px; }

.cpd-setting-rows {
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 10px;
}
.cpd-setting-row {
  display: grid;
  grid-template-columns: 120px minmax(180px, .9fr) minmax(240px, 1.15fr);
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 7px 14px;
  background: var(--cpd-surface);
}
.cpd-setting-row + .cpd-setting-row { border-top: 1px solid var(--cpd-border); }
.cpd-setting-row > strong { font-size: 11px; }
.cpd-setting-row > small { color: var(--cpd-muted); font-size: 10px; line-height: 1.35; }
.cpd-setting-row .cpd-select { min-height: 34px; }
.cpd-inline-range { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 10px; }
.cpd-inline-range input { width: 100%; accent-color: var(--cpd-accent); }
.cpd-inline-range b { color: var(--cpd-muted); font-size: 11px; text-align: right; }
.cpd-row-check { width: 17px; height: 17px; accent-color: var(--cpd-accent); }

.cpd-component-profiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cpd-component-profile { display: grid; gap: 4px; min-height: 58px; padding: 10px 11px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-component-profile:hover { border-color: var(--cpd-accent); }
.cpd-component-profile.active { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-component-profile strong { font-size: 11px; }
.cpd-component-profile small { color: var(--cpd-muted); font-size: 9px; line-height: 1.35; }
.cpd-component-summary { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--cpd-accent-soft) 52%, var(--cpd-surface)); font-size: 10px; }
.cpd-component-summary strong { flex: 0 0 auto; }
.cpd-component-summary span { color: var(--cpd-muted); line-height: 1.4; }
.cpd-component-blocks { display: grid; gap: 10px; margin-top: 14px; }
.cpd-component-block { overflow: hidden; border: 1px solid var(--cpd-border); border-radius: 12px; background: var(--cpd-surface); }
.cpd-component-block.active { border-color: color-mix(in srgb, var(--cpd-accent) 35%, var(--cpd-border)); }
.cpd-component-block.disabled { background: color-mix(in srgb, var(--cpd-bg) 65%, var(--cpd-surface)); }
.cpd-component-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; padding: 11px 13px; }
.cpd-component-head h4 { margin: 0; font-size: 14px; }
.cpd-component-head p { margin: 3px 0 0; color: var(--cpd-muted); font-size: 10px; line-height: 1.4; }
.cpd-component-switch { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-width: 67px; min-height: 34px; padding: 5px 9px 5px 30px; border: 1px solid var(--cpd-border); border-radius: 999px; background: var(--cpd-bg); color: var(--cpd-muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.cpd-component-switch input { position: absolute; left: 8px; width: 15px; height: 15px; margin: 0; accent-color: var(--cpd-accent); }
.cpd-component-switch:has(input:checked) { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); color: #174ea6; }
.cpd-component-main { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; padding: 0 13px 13px; }
.cpd-component-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.cpd-component-choice { position: relative; display: grid; gap: 3px; min-height: 55px; padding: 8px 9px; border: 1px solid var(--cpd-border); border-radius: 9px; cursor: pointer; }
.cpd-component-choice:has(input:checked) { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); }
.cpd-component-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cpd-component-choice strong { font-size: 10px; }
.cpd-component-choice small { color: var(--cpd-muted); font-size: 8px; line-height: 1.35; }
.cpd-component-preview { min-height: 98px; align-self: end; padding: 10px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-bg); }
.card-preview { display: grid; grid-template-columns: 1.4fr .8fr; gap: 7px; }
.card-preview > div { display: grid; align-content: center; gap: 5px; padding: 8px; border: 1px solid var(--preview-border, var(--cpd-border)); border-radius: var(--card-radius, 7px); background: var(--preview-surface, var(--cpd-surface)); box-shadow: var(--card-shadow, 0 2px 6px rgba(15,23,42,.1)); }
.card-preview strong { font-size: 9px; }
.card-preview span { display: block; height: 4px; border-radius: 99px; background: var(--cpd-border); }
.card-preview span.short { width: 62%; }
.card-preview b { color: var(--cpd-accent); font-size: 18px; }
.card-preview.preset-outline > div { border-color: var(--cpd-accent); box-shadow: none; }
.card-preview.preset-emphasis > div { background: var(--cpd-accent-soft); }
.card-preview.preset-minimal > div { border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.table-preview { display: grid; align-content: center; }
.table-preview > div { display: grid; grid-template-columns: 1fr 55px; gap: 8px; padding: 6px 7px; border-bottom: 1px solid var(--cpd-border); font-size: 9px; }
.table-preview .head { border-radius: 6px 6px 0 0; background: var(--cpd-accent-soft); }
.table-preview.preset-data .head { background: var(--cpd-accent); color: #fff; }
.table-preview.preset-minimal .head { background: transparent; }
.table-preview.preset-compact > div { padding-block: 3px; }
.table-preview strong, .table-preview b:last-child { text-align: right; }
.chart-preview { display: grid; align-content: end; gap: 7px; }
.chart-preview > div { display: flex; align-items: end; gap: 8px; height: 58px; padding: 6px 9px 0; border-bottom: 1px solid var(--cpd-border); }
.chart-preview span { flex: 1; min-height: 8px; border-radius: 4px 4px 0 0; background: var(--cpd-accent); opacity: .78; }
.chart-preview span:nth-child(even) { background: var(--preview-secondary, #6b86a6); }
.chart-preview small { color: var(--cpd-muted); font-size: 8px; text-align: center; }
.chart-preview.preset-minimal > div { border-bottom-color: transparent; }
.chart-preview.preset-minimal span { opacity: .55; }
.chart-preview.preset-data span { opacity: 1; }
.cpd-component-advanced { border-top: 1px solid var(--cpd-border); }
.cpd-component-advanced summary { padding: 10px 13px; color: var(--cpd-muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.cpd-component-advanced summary small { margin-left: 5px; font-weight: 500; }
.cpd-component-advanced-body { padding: 3px 13px 13px; }
.cpd-component-off-note { padding: 0 13px 12px; color: var(--cpd-muted); font-size: 10px; }

.cpd-canvas-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cpd-canvas-preset {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 10px;
  background: var(--cpd-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cpd-canvas-preset:hover { border-color: var(--cpd-accent); }
.cpd-canvas-preset.active { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-canvas-preset strong { font-size: 12px; }
.cpd-canvas-preset small { color: var(--cpd-muted); font-size: 10px; line-height: 1.35; }

.cpd-field-note {
  color: var(--cpd-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}
.cpd-canvas-assist {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  align-items: stretch;
  gap: 10px;
  padding-top: 2px;
}
.cpd-canvas-assist > .cpd-check { align-items: flex-start; }
.cpd-canvas-assist > .cpd-check span { display: grid; gap: 3px; }
.cpd-canvas-assist > .cpd-check small { color: var(--cpd-muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.cpd-ratio-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #abefc6;
  border-radius: 9px;
  background: #ecfdf3;
}
.cpd-ratio-status strong { color: #027a48; font-size: 11px; white-space: nowrap; }
.cpd-ratio-status span { color: #475467; font-size: 10px; line-height: 1.4; }
.cpd-ratio-status.error { border-color: #fecdca; background: #fef3f2; }
.cpd-ratio-status.error strong { color: #b42318; }
.cpd-ratio-status .cpd-btn { min-height: 30px; padding-block: 4px; }

.cpd-safe-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.cpd-safe-presets .cpd-btn { min-width: 58px; }

[data-theme="dark"] .cpd-ratio-status { border-color: rgba(100, 210, 143, .4); background: rgba(23, 114, 69, .16); }
[data-theme="dark"] .cpd-ratio-status strong { color: #6ce9a6; }
[data-theme="dark"] .cpd-ratio-status span { color: var(--cpd-muted); }
[data-theme="dark"] .cpd-ratio-status.error { border-color: rgba(255, 122, 122, .35); background: rgba(191, 59, 59, .14); }
[data-theme="dark"] .cpd-ratio-status.error strong { color: #fda29b; }

.cpd-summary { position: relative; }
.cpd-summary-inner { position: sticky; top: 145px; }

.cpd-summary-card {
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 15px;
  background: var(--cpd-surface);
  box-shadow: 0 14px 40px rgba(25, 41, 65, .07);
}

.cpd-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--cpd-border);
}
.cpd-summary-head span,
.cpd-dialog-head > div > span {
  color: var(--cpd-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.cpd-summary-head h3 { margin: 3px 0 0; font-size: 16px; }
.cpd-summary-head .cpd-btn { min-height: 32px; padding: 5px 10px; }

.cpd-summary-list { margin: 0; padding: 4px 17px 7px; }
.cpd-summary-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cpd-border) 68%, transparent);
}
.cpd-summary-list > div:last-child { border-bottom: 0; }
.cpd-summary-list dt { color: var(--cpd-muted); font-size: 11px; font-weight: 750; }
.cpd-summary-list dd { margin: 0; font-size: 11px; font-weight: 750; line-height: 1.4; text-align: right; }
.cpd-color-dots { display: inline-flex; overflow: hidden; gap: 2px; margin-right: 7px; padding: 2px; border: 1px solid var(--cpd-border); border-radius: 6px; background: var(--cpd-surface); vertical-align: -4px; }
.cpd-color-dots i { display: block; width: 13px; height: 11px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

.cpd-validation {
  margin: 3px 13px 13px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cpd-canvas) 70%, var(--cpd-surface));
}
.cpd-validation-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cpd-validation-head strong { font-size: 12px; }
.cpd-validation .cpd-issues { max-height: 110px; padding: 9px 0 0; }
.cpd-validation .cpd-issue { padding-block: 6px; }
.cpd-validation > .cpd-btn { width: 100%; margin-top: 9px; }

.cpd-summary-actions { display: grid; gap: 8px; padding: 0 13px 14px; }
.cpd-summary-actions .cpd-btn { width: 100%; min-height: 42px; }
.cpd-summary-reuse { display: grid; gap: 9px; padding: 12px 13px 14px; border-top: 1px solid var(--cpd-border); }
.cpd-summary-reuse > div:first-child { display: grid; gap: 3px; }
.cpd-summary-reuse strong { font-size: 12px; }
.cpd-summary-reuse small { color: var(--cpd-muted); font-size: 9px; line-height: 1.45; }
.cpd-summary-reuse > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cpd-summary-reuse .cpd-btn { width: 100%; }
.cpd-summary-reuse .cpd-btn.danger { grid-column: 1 / -1; }

.cpd-dialog-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px);
}
.cpd-dialog-backdrop[hidden] { display: none; }
body.cpd-dialog-open { overflow: hidden; }

.cpd-color-source { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cpd-color-source-btn { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-color-source-btn strong { font-size: 13px; }
.cpd-color-source-btn small { color: var(--cpd-muted); font-size: 10px; }
.cpd-color-source-btn.active { border-color: var(--cpd-primary); background: var(--cpd-primary-soft); box-shadow: inset 0 0 0 1px var(--cpd-primary); }
.cpd-color-apply-row { align-self: end; }
.cpd-palette-toolbar { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(115px, .7fr)); gap: 10px; align-items: end; }
.cpd-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.cpd-mixer-link-row { align-items: center; margin: 12px 0; }
.cpd-mixer-link-row > span { margin-left: auto; color: var(--cpd-muted); font-size: 11px; }
.cpd-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-palette-card { min-width: 0; padding: 9px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-palette-card:hover { border-color: var(--cpd-primary); transform: translateY(-1px); }
.cpd-palette-card.selected { border-color: var(--cpd-primary); box-shadow: inset 0 0 0 1px var(--cpd-primary); }
.cpd-palette-card strong, .cpd-palette-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-palette-card strong { margin-top: 7px; font-size: 12px; }
.cpd-palette-card small { margin-top: 2px; color: var(--cpd-muted); font-size: 10px; }
.cpd-palette-strip { display: flex; height: 22px; overflow: hidden; border-radius: 6px; }
.cpd-palette-strip i { flex: 1; }
.cpd-palette-empty, .cpd-inline-note { padding: 14px; border: 1px dashed var(--cpd-border); border-radius: 10px; color: var(--cpd-muted); font-size: 12px; line-height: 1.6; }
.cpd-load-more { justify-content: center; margin-top: 12px; }
.cpd-color-draft { margin-top: 14px; padding: 14px; border: 1px solid var(--cpd-primary); border-radius: 12px; background: var(--cpd-primary-soft); }
.cpd-color-draft-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 10px; }
.cpd-color-draft-head small { color: var(--cpd-muted); font-size: 10px; }
.cpd-color-draft-head h4 { margin: 3px 0 0; font-size: 15px; }
.cpd-color-draft-head h4 span { color: var(--cpd-muted); font-size: 11px; font-weight: 500; }
.cpd-contrast-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.cpd-contrast-badge.pass { background: #D1FAE5; color: #065F46; }
.cpd-contrast-badge.fail { background: #FEE2E2; color: #991B1B; }
.cpd-draft-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin-bottom: 12px; }
.cpd-draft-role { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--cpd-border) 70%, transparent); font-size: 10px; }
.cpd-draft-role > span { min-width: 0; }
.cpd-draft-role > span:first-child { display: flex; gap: 6px; align-items: center; }
.cpd-draft-role i { width: 13px; height: 13px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 4px; }
.cpd-draft-role small { color: var(--cpd-muted); }
.cpd-color-role-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cpd-color-role-card { display: grid; grid-template-columns: minmax(125px, .75fr) minmax(100px, .55fr) minmax(180px, 1fr); gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); }
.cpd-color-role-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cpd-color-role-head input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--cpd-border); border-radius: 7px; background: transparent; cursor: pointer; }
.cpd-color-role-head span { min-width: 0; }
.cpd-color-role-head strong, .cpd-color-role-head small { display: block; }
.cpd-color-role-head strong { font-size: 11px; }
.cpd-color-role-head small { color: var(--cpd-muted); font-size: 9px; }
.cpd-color-names { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cpd-color-role-card .cpd-input { min-width: 0; padding: 7px 8px; font-size: 10px; }

.cpd-palette-finder { display: grid; gap: 16px; }
.cpd-applied-palette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 22%, var(--cpd-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--cpd-primary) 5%, var(--cpd-surface));
}
.cpd-applied-palette > div { display: grid; gap: 3px; }
.cpd-applied-palette span { color: var(--cpd-primary); font-size: 11px; font-weight: 850; }
.cpd-applied-palette strong { font-size: 15px; }
.cpd-applied-palette small { color: var(--cpd-muted); font-size: 11px; }
.cpd-applied-palette .cpd-color-dots { flex: 0 0 auto; margin: 0; }

.cpd-palette-search-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.cpd-palette-search-block > .cpd-btn { min-height: 40px; }

.cpd-palette-filter-grid { display: grid; gap: 10px; }
.cpd-palette-filter {
  min-width: 0;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--cpd-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cpd-canvas) 38%, var(--cpd-surface));
}
.cpd-palette-filter.active { border-color: color-mix(in srgb, var(--cpd-primary) 46%, var(--cpd-border)); background: color-mix(in srgb, var(--cpd-primary) 4%, var(--cpd-surface)); }
.cpd-palette-filter-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.cpd-palette-filter-head > div { display: grid; gap: 3px; }
.cpd-palette-filter-head span { color: var(--cpd-primary); font-size: 10px; font-weight: 850; }
.cpd-palette-filter-head strong { font-size: 13px; line-height: 1.4; }
.cpd-palette-filter-head output { padding: 4px 8px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 11px; font-weight: 850; }
.cpd-palette-filter.active .cpd-palette-filter-head output { background: var(--cpd-primary-soft); color: var(--cpd-primary); }
.cpd-palette-filter-control {
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.cpd-palette-filter-control > span { color: var(--cpd-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cpd-palette-filter-all {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--cpd-border);
  border-radius: 999px;
  background: var(--cpd-surface);
  color: var(--cpd-muted);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.cpd-palette-filter-all.active { border-color: var(--cpd-primary); background: var(--cpd-primary-soft); color: var(--cpd-primary); }

.cpd-palette-more-filters { overflow: hidden; border: 1px solid var(--cpd-border); border-radius: 12px; background: var(--cpd-surface); }
.cpd-palette-more-filters > summary { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 850; }
.cpd-palette-more-filters > summary::-webkit-details-marker { display: none; }
.cpd-palette-more-filters > summary span { color: var(--cpd-muted); font-size: 11px; font-weight: 600; }
.cpd-palette-more-filters > div { padding: 13px; border-top: 1px solid var(--cpd-border); }

.cpd-palette-results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cpd-palette-results-head > strong { flex: 0 0 auto; color: var(--cpd-primary); font-size: 12px; }
.cpd-active-palette-filters { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cpd-active-palette-filters > span { color: var(--cpd-muted); font-size: 11px; }
.cpd-active-palette-filters > button { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--cpd-primary) 30%, var(--cpd-border)); border-radius: 999px; background: var(--cpd-primary-soft); color: var(--cpd-primary); font-size: 10px; font-weight: 800; cursor: pointer; }
.cpd-active-palette-filters i { margin-left: 4px; font-size: 12px; font-style: normal; }

.cpd-palette-card { position: relative; display: grid; align-content: start; gap: 6px; min-height: 88px; }
.cpd-palette-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cpd-palette-card-title strong { min-width: 0; margin: 0; }
.cpd-palette-card-title em { flex: 0 0 auto; padding: 3px 5px; border-radius: 999px; background: var(--cpd-primary-soft); color: var(--cpd-primary); font-size: 8px; font-style: normal; font-weight: 850; }
.cpd-palette-card.applied:not(.selected) { border-color: color-mix(in srgb, var(--cpd-primary) 34%, var(--cpd-border)); }
.cpd-palette-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 20%, transparent); outline-offset: 2px; }
.cpd-palette-empty { display: grid; gap: 4px; text-align: center; }
.cpd-palette-empty strong { color: var(--cpd-text); }
.cpd-palette-empty span { color: var(--cpd-muted); }
.cpd-preview-caption .cpd-color-dots { margin-right: 8px; vertical-align: -5px; }
.cpd-preview-caption strong { margin-right: 4px; color: var(--cpd-text); }

.cpd-direction-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--cpd-accent) 30%, var(--cpd-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--cpd-accent-soft) 58%, var(--cpd-surface));
}
.cpd-direction-summary strong { font-size: 13px; line-height: 1.5; }
.cpd-direction-summary > span { flex: 0 0 auto; color: var(--cpd-accent); font-size: 10px; font-weight: 800; }
.cpd-direction-current-copy { display: grid; gap: 2px; min-width: 0; }
.cpd-direction-current-copy small { color: var(--cpd-muted); font-size: 9px; font-weight: 750; }
.cpd-direction-current-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-direction-current-copy strong span { color: var(--cpd-muted); font-size: 10px; font-weight: 500; }
.cpd-direction-current-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cpd-direction-state { color: var(--cpd-muted); font-size: 10px; font-weight: 800; white-space: nowrap; }
.cpd-direction-state.connected { color: #027a48; }
[data-theme="dark"] .cpd-direction-state.connected { color: #6ce9a6; }
.cpd-direction-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cpd-direction-preset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cpd-direction-preset:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-direction-preset.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-direction-preset > span:first-child { display: grid; gap: 3px; }
.cpd-direction-preset strong { font-size: 13px; }
.cpd-direction-preset small { color: var(--cpd-muted); font-size: 10px; line-height: 1.4; }
.cpd-direction-preset em { padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cpd-muted) 9%, var(--cpd-surface)); color: var(--cpd-muted); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cpd-direction-keywords { grid-column: 1 / -1; color: var(--cpd-muted); font-size: 10px; }
.cpd-direction-draft { margin-top: 14px; padding: 14px; border: 1px solid var(--cpd-accent); border-radius: 12px; background: var(--cpd-accent-soft); }
.cpd-direction-draft-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cpd-direction-draft-head small { color: var(--cpd-muted); font-size: 10px; }
.cpd-direction-draft-head h4 { margin: 3px 0 0; font-size: 16px; }
.cpd-direction-draft-head h4 span { color: var(--cpd-muted); font-size: 11px; font-weight: 500; }
.cpd-direction-draft > p { margin: 9px 0; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }
.cpd-direction-draft .cpd-inline-note { margin: 10px 0; background: color-mix(in srgb, var(--cpd-surface) 70%, transparent); }
.cpd-scope-option { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 32%, var(--cpd-border)); border-radius: 10px; background: var(--cpd-surface); cursor: pointer; }
.cpd-scope-option input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--cpd-accent); }
.cpd-scope-option span { display: grid; gap: 3px; }
.cpd-scope-option strong { font-size: 11px; }
.cpd-scope-option small { color: var(--cpd-muted); font-size: 9px; line-height: 1.4; }
.cpd-keyword-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cpd-keyword-groups section { min-width: 0; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); }
.cpd-keyword-groups .cpd-checks { margin-top: 7px; }
.cpd-medium-toolbar { display: grid; grid-template-columns: minmax(230px, 1.4fr) repeat(4, minmax(105px, .7fr)); gap: 8px; align-items: end; }
.cpd-medium-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-medium-card { display: grid; gap: 7px; min-height: 112px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-medium-card:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-medium-card.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-medium-card.applied:not(.selected) { border-color: color-mix(in srgb, #12b76a 55%, var(--cpd-border)); }
.cpd-medium-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cpd-medium-card-head strong { font-size: 12px; line-height: 1.35; }
.cpd-medium-card-head em { padding: 3px 6px; border-radius: 999px; background: #ecfdf3; color: #027a48; font-size: 8px; font-style: normal; font-weight: 850; }
.cpd-medium-card small { color: var(--cpd-muted); font-size: 9px; line-height: 1.4; }
.cpd-medium-card > span:last-child { align-self: end; color: var(--cpd-muted); font-size: 9px; }
.cpd-medium-token-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cpd-medium-token-row span { padding: 4px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-muted); font-size: 9px; font-weight: 750; }
.cpd-applied-medium { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 11px; border: 1px solid #abefc6; border-radius: 10px; background: #ecfdf3; }
.cpd-applied-medium > div { display: grid; gap: 3px; }
.cpd-applied-medium small { color: #027a48; font-size: 9px; font-weight: 800; }
.cpd-applied-medium strong { font-size: 11px; }
.cpd-applied-medium strong span { color: var(--cpd-muted); font-size: 9px; font-weight: 500; }
[data-theme="dark"] .cpd-applied-medium { border-color: rgba(100, 210, 143, .4); background: rgba(23, 114, 69, .16); }
[data-theme="dark"] .cpd-applied-medium small { color: #6ce9a6; }

.cpd-type-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); gap: 14px; align-items: stretch; }
.cpd-type-summary { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 30%, var(--cpd-border)); border-radius: 11px; background: color-mix(in srgb, var(--cpd-accent-soft) 58%, var(--cpd-surface)); }
.cpd-type-summary strong { font-size: 14px; line-height: 1.55; }
.cpd-type-summary span { width: max-content; padding: 4px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 9px; font-weight: 850; }
.cpd-type-specimen { overflow: hidden; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); }
.cpd-type-slide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; min-height: 150px; padding: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--cpd-accent-soft) 40%, var(--cpd-surface)), var(--cpd-surface)); }
.cpd-type-slide > small { grid-column: 1 / -1; color: var(--cpd-accent); font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.cpd-type-slide > strong { grid-column: 1 / -1; align-self: end; font-size: 22px; line-height: 1.16; letter-spacing: -.035em; }
.cpd-type-slide > strong.headline-modern { font-weight: 760; }
.cpd-type-slide > strong.headline-authoritative { font-weight: 900; }
.cpd-type-slide > strong.headline-restrained { font-weight: 650; letter-spacing: .01em; }
.cpd-type-slide > strong.headline-friendly { font-weight: 720; letter-spacing: -.015em; }
.cpd-type-slide > strong.scale-standard { font-size: 18px; }
.cpd-type-slide > strong.scale-xlarge { font-size: 26px; }
.cpd-type-slide p { margin: 2px 0 0; color: var(--cpd-muted); font-size: 9px; line-height: 1.5; }
.cpd-type-slide p.scale-compact { font-size: 8px; }
.cpd-type-slide p.scale-large { font-size: 10px; }
.cpd-type-slide p.line-tight { line-height: 1.25; }
.cpd-type-slide p.line-wide { line-height: 1.75; }
.cpd-type-slide p.tracking-tight { letter-spacing: -.03em; }
.cpd-type-slide p.tracking-wide { letter-spacing: .06em; }
.cpd-type-slide > div { display: grid; align-content: end; justify-items: end; }
.cpd-type-slide > div b { font-size: 20px; line-height: 1; }
.cpd-type-slide > div b.emphasized { color: var(--cpd-accent); font-size: 25px; font-weight: 900; }
.cpd-type-slide > div span { margin-top: 4px; color: var(--cpd-muted); font-size: 7px; }
.cpd-type-specimen-meta { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 10px; border-top: 1px solid var(--cpd-border); }
.cpd-type-specimen-meta span { padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-weight: 700; }
.cpd-type-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-type-preset { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 8px; min-height: 92px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-type-preset:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-type-preset.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-type-preset > span { display: grid; gap: 3px; }
.cpd-type-preset strong { font-size: 12px; }
.cpd-type-preset small { color: var(--cpd-muted); font-size: 9px; }
.cpd-type-preset em { align-self: start; padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 750; }
.cpd-type-preset b { grid-column: 1 / -1; align-self: end; color: var(--cpd-accent); font-size: 9px; }
.cpd-type-help { margin-top: 10px; padding-block: 10px; }
.cpd-type-help strong { color: inherit; }
.cpd-type-mixer-toolbar { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.25fr); gap: 12px; align-items: end; margin-bottom: 12px; }
.cpd-type-mixer-toolbar .cpd-mixer-link-row { margin: 0; }
.cpd-type-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-type-style-card { display: grid; gap: 7px; min-height: 112px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-type-style-card:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-type-style-card.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-type-style-card.applied:not(.selected) { border-color: color-mix(in srgb, #12b76a 55%, var(--cpd-border)); }
.cpd-type-style-card > span { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cpd-type-style-card strong { font-size: 12px; line-height: 1.35; }
.cpd-type-style-card em { padding: 3px 6px; border-radius: 999px; background: #ecfdf3; color: #027a48; font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }
.cpd-type-style-card em.risk { background: #fff4e5; color: #b54708; }
.cpd-type-style-card small { color: var(--cpd-muted); font-size: 9px; line-height: 1.45; }
.cpd-type-style-card > b { align-self: end; color: var(--cpd-muted); font-size: 9px; }
.cpd-type-draft { margin-top: 14px; padding: 14px; border: 1px solid var(--cpd-accent); border-radius: 12px; background: var(--cpd-accent-soft); }
.cpd-type-draft > p { margin: 9px 0 12px; color: var(--cpd-muted); font-size: 11px; line-height: 1.55; }
.cpd-type-draft .cpd-inline-note { margin: 10px 0; background: color-mix(in srgb, var(--cpd-surface) 70%, transparent); }
.cpd-badge.warning { background: #fff4e5; color: #b54708; }
.cpd-type-basic { align-items: start; }
.cpd-type-advanced { margin-top: 12px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); }
.cpd-type-advanced summary { padding: 11px 13px; color: var(--cpd-muted); font-size: 11px; font-weight: 850; cursor: pointer; }
.cpd-type-advanced summary small { margin-left: 5px; font-weight: 500; }
.cpd-type-advanced-body { padding: 2px 13px 13px; }
[data-theme="dark"] .cpd-type-style-card em { background: rgba(23, 114, 69, .18); color: #6ce9a6; }
[data-theme="dark"] .cpd-type-style-card em.risk, [data-theme="dark"] .cpd-badge.warning { background: rgba(181, 71, 8, .2); color: #fec84b; }

.cpd-imagery-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 30%, var(--cpd-border)); border-radius: 11px; background: color-mix(in srgb, var(--cpd-accent-soft) 58%, var(--cpd-surface)); }
.cpd-imagery-summary > div:first-child { display: grid; gap: 5px; }
.cpd-imagery-summary small { color: var(--cpd-muted); font-size: 9px; font-weight: 800; }
.cpd-imagery-summary strong { font-size: 14px; line-height: 1.45; }
.cpd-imagery-summary > div:first-child > span { width: max-content; padding: 3px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 850; }
.cpd-imagery-summary-rules { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 260px; }
.cpd-imagery-summary-rules span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 16%, var(--cpd-border)); border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-muted); font-size: 8px; font-weight: 750; }
.cpd-imagery-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-imagery-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 9px; min-height: 92px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-imagery-profile:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-imagery-profile.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-imagery-profile > span { display: grid; gap: 3px; }
.cpd-imagery-profile strong { font-size: 12px; }
.cpd-imagery-profile small { color: var(--cpd-muted); font-size: 9px; }
.cpd-imagery-profile em { align-self: start; padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 750; }
.cpd-imagery-profile b { grid-column: 1 / -1; align-self: end; color: var(--cpd-accent); font-size: 9px; }
.cpd-imagery-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cpd-imagery-block { overflow: hidden; border: 1px solid var(--cpd-border); border-radius: 12px; background: var(--cpd-surface); }
.cpd-imagery-block.active { border-color: color-mix(in srgb, var(--cpd-accent) 35%, var(--cpd-border)); }
.cpd-imagery-block.disabled { background: color-mix(in srgb, var(--cpd-canvas) 65%, var(--cpd-surface)); }
.cpd-imagery-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; }
.cpd-imagery-block-head h4 { margin: 0; font-size: 14px; }
.cpd-imagery-block-head p { margin: 3px 0 0; color: var(--cpd-muted); font-size: 9px; line-height: 1.45; }
.cpd-imagery-block-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.cpd-imagery-block-body .cpd-form-grid { grid-template-columns: 1fr; gap: 9px; }
.cpd-imagery-policy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px; border-radius: 9px; background: var(--cpd-canvas); }
.cpd-imagery-policy small { grid-column: 1 / -1; color: var(--cpd-muted); font-size: 8px; font-weight: 800; }
.cpd-imagery-policy strong { font-size: 11px; }
.cpd-imagery-policy span { align-self: center; color: var(--cpd-muted); font-size: 8px; text-align: right; }
.cpd-imagery-medium { margin-top: 10px; }
.cpd-imagery-advanced { margin-top: 10px; }
.cpd-photo-composite { display: grid; gap: 12px; }
.cpd-photo-composite.disabled { opacity: 1; }
.cpd-photo-composite .cpd-component-off-note { padding: 2px 0 0; }
.cpd-photo-composite-current { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 28%, var(--cpd-border)); border-radius: 10px; background: var(--cpd-accent-soft); }
.cpd-photo-composite-current > div { display: grid; gap: 3px; }
.cpd-photo-composite-current small { color: var(--cpd-muted); font-size: 8px; font-weight: 800; }
.cpd-photo-composite-current strong { font-size: 12px; line-height: 1.35; }
.cpd-photo-composite-current > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 800; }
.cpd-photo-mode-grid { margin-top: 2px; }
.cpd-photo-mode-choice { min-height: 78px; }
.cpd-photo-choice-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cpd-photo-choice-title em { padding: 2px 5px; border-radius: 999px; background: var(--cpd-accent); color: #fff; font-size: 8px; font-style: normal; font-weight: 800; }
.cpd-photo-mode-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 10px; padding: 11px 12px; border-left: 3px solid var(--cpd-accent); border-radius: 0 9px 9px 0; background: color-mix(in srgb, var(--cpd-accent-soft) 62%, var(--cpd-surface)); }
.cpd-photo-mode-guide > span { padding: 3px 6px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 800; white-space: nowrap; }
.cpd-photo-mode-guide > div { display: grid; gap: 2px; }
.cpd-photo-mode-guide strong { font-size: 11px; }
.cpd-photo-mode-guide small { color: var(--cpd-muted); font-size: 9px; line-height: 1.45; }
.cpd-photo-disabled-note { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 11px 13px; border: 1px dashed var(--cpd-border); border-radius: 10px; background: var(--cpd-canvas); }
.cpd-photo-disabled-note strong { font-size: 11px; }
.cpd-photo-disabled-note span { flex: 1 1 320px; color: var(--cpd-muted); font-size: 9px; line-height: 1.5; }
.cpd-photo-context-option { margin-top: 10px; }
.cpd-photo-target-grid { align-items: end; }
.cpd-photo-inline-note { margin: -2px 0 0; color: var(--cpd-muted); font-size: 9px; line-height: 1.5; }
.cpd-photo-advanced { margin-top: 12px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-canvas); }
.cpd-photo-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; cursor: pointer; list-style: none; }
.cpd-photo-advanced summary::-webkit-details-marker { display: none; }
.cpd-photo-advanced summary > span { display: grid; gap: 2px; }
.cpd-photo-advanced summary strong { font-size: 11px; }
.cpd-photo-advanced summary small { color: var(--cpd-muted); font-size: 9px; font-weight: 500; }
.cpd-photo-advanced summary em { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 800; }
.cpd-photo-advanced[open] summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-photo-advanced-body { display: grid; gap: 12px; padding: 12px; }
.cpd-photo-composite-rules { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-canvas); }
.cpd-photo-composite-rules > strong { font-size: 11px; }
.cpd-photo-composite-rules .cpd-checks:has(.cpd-check.has-help) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpd-photo-composite-rules .cpd-check { width: 100%; min-height: 58px; }

.cpd-context-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.cpd-context-flow > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  align-content: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cpd-accent) 28%, var(--cpd-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--cpd-accent-soft) 48%, var(--cpd-surface));
}

.cpd-context-flow > div > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 999px; background: var(--cpd-accent); color: #fff; font-size: 10px; font-weight: 850; }
.cpd-context-flow strong { font-size: 12px; }
.cpd-context-flow small { overflow: hidden; color: var(--cpd-muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cpd-context-flow > i { align-self: center; color: var(--cpd-accent); font-style: normal; font-weight: 850; }

.cpd-brief-quick-grid {
  display: grid;
  gap: 4px;
}

.cpd-brief-choice {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cpd-border) 72%, transparent);
}

.cpd-brief-choice:last-child { border-bottom: 0; }
.cpd-brief-choice-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: var(--cpd-text);
  font-size: var(--cpd-font-body);
  font-weight: 750;
}
.cpd-brief-choice-title em {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--cpd-canvas);
  color: var(--cpd-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.cpd-brief-chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.cpd-brief-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 999px;
  background: var(--cpd-surface);
  color: var(--cpd-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--cpd-font-support);
  font-weight: 700;
  line-height: 1.2;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.cpd-brief-chip:hover { border-color: color-mix(in srgb, var(--cpd-accent) 55%, var(--cpd-border)); }
.cpd-brief-chip:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-accent) 22%, transparent); outline-offset: 2px; }
.cpd-brief-chip.selected {
  border-color: var(--cpd-accent);
  background: var(--cpd-accent-soft);
  color: color-mix(in srgb, var(--cpd-accent) 76%, #10213d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpd-accent) 12%, transparent);
}

.cpd-brief-details {
  margin-top: 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-canvas);
}
.cpd-brief-details > summary,
.cpd-brief-strategy > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}
.cpd-brief-details > summary::-webkit-details-marker,
.cpd-brief-strategy > summary::-webkit-details-marker { display: none; }
.cpd-brief-details > summary > span,
.cpd-brief-strategy > summary > span { display: grid; gap: 2px; }
.cpd-brief-details > summary strong,
.cpd-brief-strategy > summary strong { font-size: var(--cpd-font-body); }
.cpd-brief-details > summary small,
.cpd-brief-strategy > summary small { color: var(--cpd-muted); font-size: var(--cpd-font-support); font-weight: 500; line-height: 1.45; }
.cpd-brief-details > summary em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--cpd-surface);
  color: var(--cpd-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.cpd-brief-details[open] > summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-brief-details-body { display: grid; gap: 12px; padding: 12px; }
.cpd-brief-strategy { border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); }
.cpd-brief-strategy[open] > summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-brief-strategy-body { padding: 12px; }

.cpd-strategy-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}

.cpd-strategy-flow > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-content: center;
  min-height: 76px;
  padding: 11px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-surface);
}

.cpd-strategy-flow > div:nth-of-type(3),
.cpd-strategy-flow > div:nth-of-type(4) {
  border-color: color-mix(in srgb, var(--cpd-accent) 35%, var(--cpd-border));
  background: color-mix(in srgb, var(--cpd-accent-soft) 45%, var(--cpd-surface));
}

.cpd-strategy-flow > div > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-accent); font-size: 9px; font-weight: 850; }
.cpd-strategy-flow > div:nth-of-type(3) > span,
.cpd-strategy-flow > div:nth-of-type(4) > span { background: var(--cpd-accent); color: #fff; }
.cpd-strategy-flow strong { font-size: 11px; }
.cpd-strategy-flow small { overflow: hidden; color: var(--cpd-muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cpd-strategy-flow > i { align-self: center; color: var(--cpd-accent); font-style: normal; font-weight: 850; }

.cpd-responsibility-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.cpd-responsibility-map > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-content: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-surface);
}

.cpd-responsibility-map > div.current {
  border-color: color-mix(in srgb, var(--cpd-accent) 50%, var(--cpd-border));
  background: var(--cpd-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpd-accent) 20%, transparent);
}

.cpd-responsibility-map > div > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  align-self: center;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: var(--cpd-canvas);
  color: var(--cpd-accent);
  font-size: 10px;
  font-weight: 850;
}

.cpd-responsibility-map > div.current > span { background: var(--cpd-accent); color: #fff; }
.cpd-responsibility-map strong { font-size: 12px; }
.cpd-responsibility-map small { color: var(--cpd-muted); font-size: 9px; line-height: 1.4; }
.cpd-responsibility-map > i { align-self: center; color: var(--cpd-muted); font-style: normal; font-weight: 800; }

.cpd-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.cpd-resource-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 70px;
  padding: 11px 12px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-surface);
  cursor: pointer;
}

.cpd-resource-card:hover { border-color: color-mix(in srgb, var(--cpd-accent) 55%, var(--cpd-border)); }
.cpd-resource-card.active { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); }
.cpd-resource-card > input { position: absolute; opacity: 0; pointer-events: none; }
.cpd-resource-code { display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 5px; border-radius: 8px; background: var(--cpd-canvas); color: var(--cpd-accent); font-size: 9px; font-weight: 850; }
.cpd-resource-card > span:nth-of-type(2) { display: grid; gap: 3px; }
.cpd-resource-card strong { font-size: 11px; }
.cpd-resource-card small { color: var(--cpd-muted); font-size: 9px; line-height: 1.4; }
.cpd-resource-card em { color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 800; }
.cpd-resource-card.active em { color: var(--cpd-accent); }

.cpd-ai-freedom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  padding: 12px;
  border-left: 3px solid var(--cpd-accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--cpd-accent-soft) 66%, var(--cpd-surface));
}

.cpd-ai-freedom > span { padding: 4px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 850; white-space: nowrap; }
.cpd-ai-freedom > div { display: grid; gap: 3px; }
.cpd-ai-freedom strong { font-size: 11px; }
.cpd-ai-freedom small { color: var(--cpd-muted); font-size: 9px; line-height: 1.5; }

.cpd-background-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 30%, var(--cpd-border)); border-radius: 11px; background: color-mix(in srgb, var(--cpd-accent-soft) 58%, var(--cpd-surface)); }
.cpd-background-summary > div:first-child { display: grid; gap: 5px; }
.cpd-background-summary small { color: var(--cpd-muted); font-size: 9px; font-weight: 800; }
.cpd-background-summary strong { font-size: 14px; line-height: 1.45; }
.cpd-background-summary > div:first-child > span { width: max-content; padding: 3px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 850; }
.cpd-background-summary-rules { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 290px; }
.cpd-background-summary-rules span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 16%, var(--cpd-border)); border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-muted); font-size: 8px; font-weight: 750; }
.cpd-background-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-background-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 9px; min-height: 92px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-background-profile:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-background-profile.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-background-profile > span { display: grid; gap: 3px; }
.cpd-background-profile strong { font-size: 12px; }
.cpd-background-profile small { color: var(--cpd-muted); font-size: 9px; }
.cpd-background-profile em { align-self: start; padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 750; }
.cpd-background-profile b { grid-column: 1 / -1; align-self: end; color: var(--cpd-accent); font-size: 9px; }
.cpd-background-photo { overflow: hidden; padding: 12px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 25%, var(--cpd-border)); border-radius: 11px; background: var(--cpd-canvas); }
.cpd-background-photo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cpd-background-photo-head > div { display: grid; gap: 3px; }
.cpd-background-photo-head strong { font-size: 12px; }
.cpd-background-photo-head small { color: var(--cpd-muted); font-size: 9px; line-height: 1.45; }
.cpd-background-photo-head > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 800; }

.cpd-frame-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 30%, var(--cpd-border)); border-radius: 11px; background: color-mix(in srgb, var(--cpd-accent-soft) 58%, var(--cpd-surface)); }
.cpd-frame-summary > div:first-child { display: grid; gap: 5px; }
.cpd-frame-summary small { color: var(--cpd-muted); font-size: 9px; font-weight: 800; }
.cpd-frame-summary strong { font-size: 14px; line-height: 1.45; }
.cpd-frame-summary > div:first-child > span { width: max-content; padding: 3px 7px; border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-accent); font-size: 8px; font-weight: 850; }
.cpd-frame-summary-rules { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 290px; }
.cpd-frame-summary-rules span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 16%, var(--cpd-border)); border-radius: 999px; background: var(--cpd-surface); color: var(--cpd-muted); font-size: 8px; font-weight: 750; }
.cpd-frame-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-frame-profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 9px; min-height: 92px; padding: 11px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-frame-profile:hover { border-color: var(--cpd-accent); transform: translateY(-1px); }
.cpd-frame-profile.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-frame-profile > span { display: grid; gap: 3px; }
.cpd-frame-profile strong { font-size: 12px; }
.cpd-frame-profile small { color: var(--cpd-muted); font-size: 9px; }
.cpd-frame-profile em { align-self: start; padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 750; }
.cpd-frame-profile b { grid-column: 1 / -1; align-self: end; color: var(--cpd-accent); font-size: 9px; }

.cpd-dialog {
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--cpd-border);
  border-radius: 16px;
  background: var(--cpd-surface);
  color: var(--text-primary, #172033);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .25);
}
.cpd-dialog.wide { width: min(760px, 100%); }
.cpd-dialog-head { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid var(--cpd-border); }
.cpd-dialog-head h3 { margin: 4px 0; font-size: 20px; }
.cpd-dialog-head p { margin: 0; color: var(--cpd-muted); font-size: 12px; }
.cpd-dialog-close { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--cpd-border); border-radius: 9px; background: var(--cpd-surface); color: inherit; font-size: 22px; cursor: pointer; }
.cpd-dialog-body { padding: 20px 22px; }
.cpd-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--cpd-border); }
.cpd-dialog .cpd-output { min-height: 360px; border-radius: 10px; }
.cpd-dialog .cpd-output-meta { padding: 8px 2px 0; text-align: right; }
.cpd-dialog.cpd-output-settings-dialog { width: min(840px, 100%); max-height: min(760px, calc(100vh - 32px)); }
.cpd-dialog.cpd-quick-dialog { width: min(820px, 100%); max-height: min(780px, calc(100vh - 32px)); }
.cpd-quick-dialog-body { display: grid; gap: 16px; }
.cpd-quick-input .cpd-textarea { min-height: 210px; }
.cpd-inline-note { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--cpd-accent) 18%, var(--cpd-border)); border-radius: 9px; background: color-mix(in srgb, var(--cpd-accent-soft) 48%, var(--cpd-surface)); color: var(--cpd-muted); font-size: 11px; line-height: 1.55; }
.cpd-inline-note strong { color: var(--text-primary, #172033); }
.cpd-quick-template-section { display: grid; gap: 10px; padding-top: 2px; }
.cpd-quick-template-section h4,
.cpd-quick-result-head h4 { margin: 0 0 3px; font-size: 14px; }
.cpd-quick-template-section p,
.cpd-quick-result-head p { margin: 0; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }
.cpd-quick-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cpd-quick-template { display: grid; gap: 4px; min-height: 70px; padding: 11px 12px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); color: inherit; text-align: left; cursor: pointer; }
.cpd-quick-template:hover { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); }
.cpd-quick-template strong { font-size: 12px; }
.cpd-quick-template small { color: var(--cpd-muted); font-size: 10px; line-height: 1.4; }
.cpd-quick-result-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); gap: 14px; align-items: start; }
.cpd-quick-result-head > div:first-child > small { color: var(--cpd-accent); font-size: 9px; font-weight: 850; }
.cpd-quick-signal-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.cpd-quick-signal-list span { padding: 4px 7px; border-radius: 999px; background: var(--cpd-accent-soft); color: #174ea6; font-size: 9px; font-weight: 750; }
.cpd-quick-recommendations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cpd-quick-recommendation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 60px; padding: 10px 11px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); cursor: pointer; }
.cpd-quick-recommendation:has(input:checked) { border-color: color-mix(in srgb, var(--cpd-accent) 60%, var(--cpd-border)); background: var(--cpd-accent-soft); }
.cpd-quick-recommendation.unchanged { opacity: .62; cursor: default; }
.cpd-quick-recommendation > span { display: grid; gap: 3px; min-width: 0; }
.cpd-quick-recommendation strong { font-size: 11px; }
.cpd-quick-recommendation small { overflow: hidden; color: var(--cpd-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cpd-quick-recommendation em { padding: 3px 6px; border-radius: 999px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 8px; font-style: normal; font-weight: 800; }
.cpd-quick-dialog-actions { position: sticky; bottom: 0; z-index: 3; align-items: center; background: var(--cpd-surface); box-shadow: 0 -10px 24px rgba(15, 23, 42, .06); }
.cpd-quick-dialog-actions > span { margin-right: auto; color: var(--cpd-muted); font-size: 10px; font-weight: 750; }
.cpd-quick-apply-notice { display: flex; align-items: center; gap: 10px; margin: -2px 0 12px; padding: 9px 10px 9px 13px; border: 1px solid #8fd3ae; border-radius: 10px; background: #ecfdf3; color: #067647; font-size: 11px; }
.cpd-quick-apply-notice > span { flex: 1; min-width: 0; }
.cpd-quick-apply-notice .cpd-dialog-close { width: 28px; height: 28px; border-color: transparent; background: transparent; font-size: 18px; }
.cpd-quick-input { display: grid; gap: 10px; }
.cpd-quick-input-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cpd-quick-input-head > div { display: grid; gap: 3px; }
.cpd-quick-input-head strong { font-size: 12px; }
.cpd-quick-input-head small { color: var(--cpd-muted); font-size: 10px; }
.cpd-quick-source-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--cpd-muted); font-size: 9px; }
.cpd-quick-source-meta b { color: inherit; white-space: nowrap; }
.cpd-quick-result-head { grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr); }
.cpd-quick-result-head h4 { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.cpd-quick-result-head h4 span { color: var(--cpd-muted); font-size: 10px; font-weight: 700; }
.cpd-quick-confidence { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--cpd-border); border-radius: 9px; background: var(--cpd-canvas); }
.cpd-quick-confidence small { color: var(--cpd-muted); font-size: 8px; font-weight: 800; }
.cpd-quick-confidence strong { color: #067647; font-size: 12px; }
.cpd-quick-confidence span { color: var(--cpd-muted); font-size: 9px; line-height: 1.4; }
.cpd-quick-confidence.review strong { color: #b54708; }
.cpd-quick-confidence.medium strong { color: #175cd3; }
.cpd-quick-result-head .cpd-quick-signal-list { grid-column: 1 / -1; justify-content: flex-start; }
.cpd-quick-select-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-canvas); }
.cpd-quick-select-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cpd-quick-select-toolbar > label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cpd-quick-select-toolbar > label > span { display: grid; gap: 1px; }
.cpd-quick-select-toolbar > label strong { font-size: 10px; }
.cpd-quick-select-toolbar > label small { color: var(--cpd-muted); font-size: 8px; }
.cpd-quick-comparison { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-canvas); }
.cpd-quick-comparison-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cpd-quick-comparison h4 { margin: 0 0 2px; font-size: 12px; }
.cpd-quick-comparison p { margin: 0; color: var(--cpd-muted); font-size: 9px; }
.cpd-quick-comparison-head > span { color: var(--cpd-muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.cpd-quick-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cpd-quick-preview-card { display: grid; gap: 5px; }
.cpd-quick-preview-card > span { color: var(--cpd-muted); font-size: 8px; font-weight: 800; }
.cpd-quick-mini-slide { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 12px 1fr 1fr; gap: 5px; aspect-ratio: 16 / 7; overflow: hidden; padding: 9px; border: 1px solid var(--cpd-border); border-radius: 7px; background: var(--q-bg); }
.cpd-quick-mini-slide i { grid-column: 1 / -1; border-radius: 3px; background: var(--q-primary); }
.cpd-quick-mini-slide strong { grid-column: 1 / -1; overflow: hidden; color: var(--q-primary); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.cpd-quick-mini-slide b { min-height: 20px; border-radius: 4px; background: var(--q-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-primary) 16%, transparent); }
.cpd-quick-mini-slide em { position: absolute; right: 12px; bottom: 12px; width: 22%; height: 4px; border-radius: 99px; background: var(--q-accent); }
.cpd-quick-recommendation-groups { display: grid; gap: 14px; }
.cpd-quick-recommendation-group { display: grid; gap: 8px; }
.cpd-quick-recommendation-group > div:first-child h4 { margin: 0 0 2px; font-size: 12px; }
.cpd-quick-recommendation-group > div:first-child p { margin: 0; color: var(--cpd-muted); font-size: 9px; }
.cpd-quick-recommendation { grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: 94px; }
.cpd-quick-recommendation > input { margin-top: 3px; }
.cpd-quick-recommendation > span { gap: 4px; }
.cpd-quick-recommendation small { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.42; }
.cpd-quick-recommendation small b { color: var(--text-primary, #172033); font-size: 8px; }
.cpd-quick-rec-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpd-quick-rec-title em { flex: 0 0 auto; }
.cpd-quick-rec-title em.high,
.cpd-quick-rec-title em.selected { background: #dcfae6; color: #067647; }
.cpd-quick-rec-title em.medium { background: #dbeafe; color: #175cd3; }
.cpd-quick-rec-title em.review { background: #fef0c7; color: #b54708; }
.cpd-quick-rec-change { color: var(--text-primary, #172033) !important; font-weight: 750; }
.cpd-quick-recommendation.blocked { background: color-mix(in srgb, var(--cpd-muted) 5%, var(--cpd-surface)); opacity: .72; }
.cpd-quick-rec-blocked { color: #b54708 !important; }
.cpd-output-settings-body { display: grid; gap: 16px; }
.cpd-output-section { display: grid; gap: 10px; }
.cpd-output-section + .cpd-output-section { padding-top: 15px; border-top: 1px solid var(--cpd-border); }
.cpd-output-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.cpd-output-section-head h4 { margin: 0 0 3px; font-size: 14px; }
.cpd-output-section-head p { margin: 0; color: var(--cpd-muted); font-size: 12px; line-height: 1.55; }
.cpd-output-section-head p strong { color: inherit; }
.cpd-output-match { white-space: nowrap; }
.cpd-output-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cpd-output-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cpd-output-choice { position: relative; display: grid; align-content: start; gap: 5px; min-height: 82px; padding: 12px 13px; border: 1px solid var(--cpd-border); border-radius: 11px; background: var(--cpd-surface); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.cpd-output-choice:hover { border-color: #9eb9e7; }
.cpd-output-choice.selected { border-color: var(--cpd-accent); background: var(--cpd-accent-soft); box-shadow: inset 0 0 0 1px var(--cpd-accent); }
.cpd-output-choice:focus-within { outline: 3px solid color-mix(in srgb, var(--cpd-accent) 20%, transparent); outline-offset: 1px; }
.cpd-output-choice input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.cpd-output-choice-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpd-output-choice-badges { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.cpd-output-choice strong { font-size: 13px; }
.cpd-output-choice small { color: var(--cpd-muted); font-size: 11px; line-height: 1.45; }
.cpd-output-choice em,
.cpd-output-choice i { padding: 2px 6px; border-radius: 999px; background: #f2f4f7; color: var(--cpd-muted); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cpd-output-choice i { background: var(--cpd-accent-soft); color: #174ea6; }
.cpd-output-choice.selected em { background: #dbeafe; color: #174ea6; }
.cpd-output-choice > b { color: var(--text-primary, #172033); font-size: 11px; line-height: 1.35; }
.cpd-output-length-note { margin: -2px 0 0; color: var(--cpd-muted); font-size: 11px; }
.cpd-output-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cpd-output-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface-alt, #f7f9fc); }
.cpd-output-summary strong { display: block; margin-bottom: 3px; font-size: 12px; }
.cpd-output-summary p { margin: 0; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }
.cpd-output-summary .cpd-output-length { color: var(--cpd-accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.cpd-output-dialog-actions { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; background: var(--cpd-surface); box-shadow: 0 -10px 24px rgba(15, 23, 42, .06); }
.cpd-output-footer-summary { display: grid; min-width: 0; gap: 2px; }
.cpd-output-footer-summary small { color: var(--cpd-muted); font-size: 9px; font-weight: 800; }
.cpd-output-footer-summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cpd-output-footer-summary span { color: var(--cpd-muted); font-size: 10px; }
.cpd-output-footer-buttons { display: flex; gap: 8px; }

[data-theme="dark"] .cpd-section-toggle.active { border-color: #347a5a; background: #143d2b; color: #6ce9a6; }
[data-theme="dark"] .cpd-dialog { color: var(--ink); }
[data-theme="dark"] .cpd-output-summary { background: rgba(255, 255, 255, .035); }
[data-theme="dark"] .cpd-quick-signal-list span { color: #f4f4f5; }
[data-theme="dark"] .cpd-quick-apply-notice { border-color: rgba(108, 233, 166, .35); background: rgba(23, 114, 69, .16); color: #6ce9a6; }
[data-theme="dark"] .cpd-quick-rec-title em.high,
[data-theme="dark"] .cpd-quick-rec-title em.selected { background: rgba(23, 114, 69, .22); color: #6ce9a6; }

@media (max-width: 1060px) {
  .cpd-workspace { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding-inline: 20px; }
  .cpd-summary-inner { top: 138px; }
  .cpd-accordion-body { padding-left: 46px; }
  .cpd-palette-toolbar { grid-template-columns: 1fr 1fr; }
  .cpd-medium-toolbar { grid-template-columns: 1fr 1fr; }
  .cpd-color-role-editor { grid-template-columns: 1fr; }
  .cpd-component-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-component-main { grid-template-columns: 1fr; }
  .cpd-component-preview { display: none; }
  .cpd-component-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpd-type-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-type-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-photo-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-imagery-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-background-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-frame-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .cpd-workspace { display: block; padding: 20px 16px 100px; }
  .cpd-summary { margin-top: 18px; }
  .cpd-summary-inner { position: static; }
  .cpd-page-head { grid-template-columns: 1fr auto; }
  .cpd-page-head .cpd-progress { grid-column: 1; grid-row: 2; }
  .cpd-page-head .cpd-expand-actions { grid-column: 2; grid-row: 2; }
  .cpd-summary-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .cpd-summary-head { grid-column: 1 / -1; }
  .cpd-summary-list { align-self: start; }
  .cpd-validation { grid-column: 2; grid-row: 2 / span 2; }
  .cpd-summary-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .cpd-summary-reuse { grid-column: 1 / -1; }
  .cpd-canvas-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-canvas-assist { grid-template-columns: 1fr; }
  .cpd-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-medium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-type-overview { grid-template-columns: 1fr; }
  .cpd-type-mixer-toolbar { grid-template-columns: 1fr; }
  .cpd-imagery-blocks { grid-template-columns: 1fr; }
  .cpd-photo-composite-current { align-items: flex-start; flex-direction: column; }
  .cpd-background-summary { grid-template-columns: 1fr; }
  .cpd-background-summary-rules { justify-content: flex-start; max-width: none; }
  .cpd-frame-summary { grid-template-columns: 1fr; }
  .cpd-frame-summary-rules { justify-content: flex-start; max-width: none; }
}

@media (max-width: 767px) {
  .cpd-institution-random { grid-template-columns: 1fr; padding: 14px; }
  .cpd-institution-random-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cpd-institution-random-actions .cpd-btn { width: 100%; }
  .cpd-institution-random-actions .cpd-btn.primary { grid-column: 1 / -1; }
  .cpd-institution-random-result { grid-template-columns: 1fr; }
  .cpd-institution-random-result dl { grid-template-columns: 1fr 1fr; }
  .cpd-quick-template-grid,
  .cpd-quick-recommendations { grid-template-columns: 1fr; }
  .cpd-quick-result-head { grid-template-columns: 1fr; }
  .cpd-quick-result-head .cpd-quick-signal-list { grid-column: 1; }
  .cpd-quick-signal-list { justify-content: flex-start; }
  .cpd-quick-select-toolbar { grid-template-columns: 1fr; }
  .cpd-quick-select-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .cpd-quick-select-toolbar .cpd-btn { width: 100%; }
  .cpd-quick-preview-grid { grid-template-columns: 1fr; }
  .cpd-quick-comparison-head { display: grid; }
  .cpd-quick-comparison-head > span { white-space: normal; }
  .cpd-quick-input-head { display: grid; grid-template-columns: 1fr auto; }
  .cpd-quick-source-meta { align-items: flex-start; }
  .cpd-quick-apply-notice { margin-top: 0; }
  .cpd-quick-dialog .cpd-dialog-head { position: sticky; top: 0; z-index: 4; background: var(--cpd-surface); }
  .cpd-quick-dialog .cpd-dialog-body { padding: 16px; }
  .cpd-quick-dialog .cpd-dialog-actions { padding: 11px 16px; }
  .cpd-output-settings-dialog .cpd-dialog-head { position: sticky; top: 0; z-index: 3; background: var(--cpd-surface); }
  .cpd-output-settings-dialog .cpd-dialog-body { padding: 16px; }
  .cpd-output-settings-dialog .cpd-dialog-actions { padding: 11px 16px; }
  .cpd-output-model-grid { grid-template-columns: 1fr; }
  .cpd-output-mode-grid { grid-template-columns: 1fr; }
  .cpd-output-section-head { grid-template-columns: 1fr; }
  .cpd-output-recommend-btn { width: 100%; }
  .cpd-output-match { justify-self: start; white-space: normal; }
  .cpd-output-summary { grid-template-columns: 1fr; }
  .cpd-output-summary .cpd-output-length { white-space: normal; }
  .cpd-workspace { padding: 18px 12px 96px; }
  .cpd-page-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
  .cpd-page-head h2 { font-size: 22px; }
  .cpd-page-head .cpd-progress,
  .cpd-page-head .cpd-expand-actions { grid-column: 1; grid-row: auto; }
  .cpd-progress-row { grid-template-columns: 1fr; gap: 10px; }
  .cpd-expand-actions { justify-content: flex-end; }
  .cpd-single-open-note { margin-right: auto; }
  .cpd-accordion-trigger { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 9px; min-height: 58px; padding: 9px 11px; }
  .cpd-accordion-status { display: none; }
  .cpd-accordion-copy strong { font-size: 13px; }
  .cpd-accordion-copy small { font-size: 10px; }
  .cpd-accordion-body { padding: 0 12px 15px; }
  .cpd-section-toggle { min-width: 72px; margin-right: 8px; padding-inline: 8px; }
  .cpd-accordion-body .cpd-panel { padding-top: 14px; }
  .cpd-setting-row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; }
  .cpd-setting-row > small { grid-column: 1; }
  .cpd-setting-row > .cpd-select,
  .cpd-setting-row > .cpd-inline-range { grid-column: 1 / -1; margin-top: 5px; }
  .cpd-setting-row > .cpd-row-check { grid-column: 2; grid-row: 1 / span 2; }
  .cpd-canvas-presets { grid-template-columns: 1fr 1fr; }
  .cpd-canvas-preset { min-height: 54px; padding: 9px 10px; }
  .cpd-ratio-status { grid-template-columns: 1fr auto; }
  .cpd-ratio-status span { grid-column: 1 / -1; grid-row: 2; }
  .cpd-summary-card { display: block; }
  .cpd-summary { margin-top: 14px; }
  .cpd-summary-actions { display: none; }
  .cpd-mobile-bar { grid-template-columns: auto 1fr auto; }
  .cpd-mobile-bar .cpd-btn { min-width: 0; padding-inline: 9px; font-size: 11px; }
  .cpd-form-grid,
  .cpd-form-grid.three,
  .cpd-choice-grid,
  .cpd-choice-grid.three,
  .cpd-choice-grid.four,
  .cpd-colors { grid-template-columns: 1fr; }
  .cpd-photo-mode-guide { grid-template-columns: 1fr; }
  .cpd-checks:has(.cpd-check.has-help),
  .cpd-photo-composite-rules .cpd-checks:has(.cpd-check.has-help) { grid-template-columns: 1fr; }
  .cpd-photo-composite-rules .cpd-check { min-height: 0; }
  .cpd-dialog-backdrop { align-items: end; padding: 0; }
  .cpd-dialog,
  .cpd-dialog.wide { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; }
  .cpd-dialog .cpd-output { min-height: 45vh; }
  .cpd-color-source { grid-template-columns: 1fr; }
  .cpd-color-source-btn { grid-template-columns: 1fr auto; align-items: center; }
  .cpd-color-source-btn small { grid-column: 2; grid-row: 1; }
  .cpd-palette-toolbar, .cpd-palette-grid, .cpd-draft-roles { grid-template-columns: 1fr; }
  .cpd-direction-summary { align-items: flex-start; flex-direction: column; gap: 6px; }
  .cpd-direction-current-copy strong { white-space: normal; }
  .cpd-direction-current-actions { width: 100%; justify-content: space-between; }
  .cpd-direction-preset-grid, .cpd-medium-toolbar, .cpd-medium-grid, .cpd-keyword-groups { grid-template-columns: 1fr; }
  .cpd-direction-preset { min-height: 82px; }
  .cpd-direction-draft-head { display: block; }
  .cpd-direction-draft-head .cpd-badge { display: inline-block; margin-top: 8px; }
  .cpd-applied-medium { align-items: flex-start; flex-direction: column; }
  .cpd-mixer-link-row > span { width: 100%; margin-left: 0; }
  .cpd-color-draft-head { display: block; }
  .cpd-contrast-badge { display: inline-block; margin-top: 8px; }
  .cpd-color-role-card { grid-template-columns: minmax(120px, 1fr) minmax(100px, .7fr); }
  .cpd-palette-search-block { grid-template-columns: 1fr; }
  .cpd-palette-filter-head { grid-template-columns: 1fr; }
  .cpd-palette-filter-head output { justify-self: start; }
  .cpd-palette-filter-control { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cpd-palette-filter-all { grid-column: 1 / -1; justify-self: start; }
  .cpd-palette-results-head { align-items: flex-start; flex-direction: column; }
  .cpd-palette-more-filters > summary { align-items: flex-start; flex-direction: column; }
  .cpd-applied-palette { align-items: flex-start; flex-direction: column; }
  .cpd-color-names { grid-column: 1 / -1; }
  .cpd-component-profiles { grid-template-columns: 1fr 1fr; }
  .cpd-component-profile { min-height: 54px; }
  .cpd-component-summary { display: grid; gap: 3px; }
  .cpd-component-head { align-items: flex-start; gap: 9px; }
  .cpd-component-head p { max-width: 230px; }
  .cpd-component-main { padding-inline: 11px; }
  .cpd-component-choices { grid-template-columns: 1fr 1fr; }
  .cpd-component-choice { min-height: 58px; }
  .cpd-type-preset-grid, .cpd-type-style-grid { grid-template-columns: 1fr; }
  .cpd-type-preset { min-height: 82px; }
  .cpd-type-slide { min-height: 140px; padding: 15px; }
  .cpd-imagery-summary { grid-template-columns: 1fr; }
  .cpd-imagery-summary-rules { justify-content: flex-start; max-width: none; }
  .cpd-imagery-profile-grid { grid-template-columns: 1fr; }
  .cpd-imagery-profile { min-height: 82px; }
  .cpd-imagery-policy { grid-template-columns: 1fr; }
  .cpd-imagery-policy span { text-align: left; }
  .cpd-background-profile-grid { grid-template-columns: 1fr; }
  .cpd-background-profile { min-height: 82px; }
  .cpd-background-photo-head { display: grid; }
  .cpd-frame-profile-grid { grid-template-columns: 1fr; }
  .cpd-frame-profile { min-height: 82px; }
}

@media (min-width: 420px) and (max-width: 767px) {
  .cpd-output-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-output-mode-grid .cpd-output-choice { min-height: 94px; }
}

@media (max-width: 419px) {
  .cpd-institution-random-result dl { grid-template-columns: 1fr; }
  .cpd-output-dialog-actions { gap: 9px; }
  .cpd-output-footer-summary span { display: none; }
  .cpd-output-footer-buttons { gap: 5px; }
  .cpd-output-footer-buttons .cpd-btn { padding-inline: 9px; }
}

/* Common Prompt typography rhythm
   Keep scaled slide/specimen previews untouched and normalize only the working UI. */
.cpd-app {
  --cpd-font-caption: 11px;
  --cpd-font-support: 12px;
  --cpd-font-body: 13px;
  --cpd-font-section: 16px;
}

.cpd-btn {
  font-size: var(--cpd-font-body);
  font-weight: 700;
  line-height: 1.25;
}

.cpd-page-head h2 {
  font-size: clamp(22px, 1.65vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.cpd-page-head p,
.cpd-editor-desc { font-size: var(--cpd-font-body); line-height: 1.6; }
.cpd-eyebrow,
.cpd-institution-random-copy > span {
  font-size: var(--cpd-font-caption);
  font-weight: 800;
  letter-spacing: .045em;
}

.cpd-institution-random { padding: 18px 20px; }
.cpd-institution-random-copy h3 {
  margin: 5px 0;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
}
.cpd-institution-random-copy p { font-size: var(--cpd-font-body); line-height: 1.55; }
.cpd-institution-random-result { padding-top: 14px; }
.cpd-institution-random-result small { font-size: var(--cpd-font-caption); }
.cpd-institution-random-result strong { font-size: var(--cpd-font-body); font-weight: 750; }
.cpd-institution-random-result > div:first-child span { font-size: var(--cpd-font-support); line-height: 1.5; }
.cpd-institution-random-result dl > div { padding: 9px 10px; }
.cpd-institution-random-result dt { font-size: 10px; font-weight: 750; }
.cpd-institution-random-result dd { font-size: var(--cpd-font-support); font-weight: 700; line-height: 1.4; }

.cpd-accordion-trigger {
  min-height: 52px;
  padding: 7px 16px;
}
.cpd-step-no { font-size: var(--cpd-font-support); font-weight: 800; }
.cpd-accordion-copy { gap: 4px; }
.cpd-accordion-copy strong {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.cpd-accordion-copy small { font-size: var(--cpd-font-support); line-height: 1.45; }
.cpd-accordion-status,
.cpd-section-toggle { font-size: 12px; font-weight: 750; }
.cpd-section-toggle { min-height: 30px; }
.cpd-accordion-body { padding: 0 18px 18px 58px; }

.cpd-panel h3,
.cpd-accordion-body .cpd-panel h3 {
  font-size: var(--cpd-font-section);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.cpd-help,
.cpd-accordion-body .cpd-help { font-size: var(--cpd-font-body); line-height: 1.55; }
.cpd-field > span,
.cpd-group-label { font-size: var(--cpd-font-support); font-weight: 700; }
.cpd-input,
.cpd-select,
.cpd-textarea { font-size: var(--cpd-font-body); line-height: 1.45; }
.cpd-choice strong { font-size: var(--cpd-font-body); font-weight: 750; line-height: 1.35; }
.cpd-choice small { font-size: var(--cpd-font-support); line-height: 1.45; }
.cpd-check { padding: 10px 11px; }
.cpd-check.has-help { min-height: 68px; padding: 11px 12px; }
.cpd-check > span > strong { font-size: var(--cpd-font-body); font-weight: 700; line-height: 1.4; }
.cpd-check > span > small { font-size: var(--cpd-font-caption); line-height: 1.5; }
.cpd-field-note,
.cpd-inline-note,
.cpd-section-disabled-note span { font-size: var(--cpd-font-support); line-height: 1.55; }
.cpd-section-disabled-note strong { font-size: var(--cpd-font-body); }

.cpd-setting-row > strong,
.cpd-color-role-head strong,
.cpd-photo-mode-guide strong,
.cpd-photo-disabled-note strong,
.cpd-photo-advanced summary strong,
.cpd-photo-composite-rules > strong { font-size: var(--cpd-font-body); font-weight: 700; }
.cpd-setting-row > small,
.cpd-color-role-head small,
.cpd-photo-mode-guide small,
.cpd-photo-disabled-note span,
.cpd-photo-inline-note,
.cpd-photo-advanced summary small { font-size: var(--cpd-font-caption); line-height: 1.5; }
.cpd-range-head,
.cpd-inline-range b { font-size: var(--cpd-font-support); }

.cpd-color-source-btn strong,
.cpd-direction-preset strong,
.cpd-medium-card-head strong,
.cpd-type-preset strong,
.cpd-type-style-card strong,
.cpd-imagery-profile strong,
.cpd-background-profile strong,
.cpd-frame-profile strong,
.cpd-canvas-preset strong { font-size: var(--cpd-font-body); font-weight: 750; }
.cpd-color-source-btn small,
.cpd-direction-preset small,
.cpd-medium-card small,
.cpd-type-preset small,
.cpd-type-style-card small,
.cpd-imagery-profile small,
.cpd-background-profile small,
.cpd-frame-profile small,
.cpd-canvas-preset small { font-size: var(--cpd-font-caption); line-height: 1.45; }
.cpd-direction-keywords,
.cpd-medium-card > span:last-child,
.cpd-type-style-card > b,
.cpd-type-preset b,
.cpd-imagery-profile b,
.cpd-background-profile b,
.cpd-frame-profile b { font-size: var(--cpd-font-caption); line-height: 1.4; }
.cpd-direction-preset em,
.cpd-medium-card-head em,
.cpd-type-preset em,
.cpd-type-style-card em,
.cpd-imagery-profile em,
.cpd-background-profile em,
.cpd-frame-profile em { font-size: 10px; font-weight: 750; }

.cpd-direction-summary strong,
.cpd-type-summary strong,
.cpd-imagery-summary strong,
.cpd-background-summary strong,
.cpd-frame-summary strong { font-size: 14px; font-weight: 750; line-height: 1.45; }
.cpd-direction-current-copy small,
.cpd-imagery-summary small,
.cpd-background-summary small,
.cpd-frame-summary small { font-size: var(--cpd-font-caption); }
.cpd-direction-current-copy strong span,
.cpd-direction-state { font-size: var(--cpd-font-caption); }
.cpd-direction-draft-head h4,
.cpd-color-draft-head h4 { font-size: var(--cpd-font-section); line-height: 1.35; }
.cpd-direction-draft > p,
.cpd-type-draft > p { font-size: var(--cpd-font-support); line-height: 1.55; }
.cpd-medium-token-row span,
.cpd-scope-option small { font-size: var(--cpd-font-caption); }
.cpd-scope-option strong { font-size: var(--cpd-font-support); }

.cpd-summary-head h3 { font-size: 18px; font-weight: 750; line-height: 1.3; }
.cpd-summary-list dt,
.cpd-summary-list dd { font-size: var(--cpd-font-support); line-height: 1.45; }
.cpd-validation-head strong,
.cpd-summary-reuse strong { font-size: var(--cpd-font-body); }
.cpd-summary-reuse small,
.cpd-preview-caption,
.cpd-issue,
.cpd-output-meta { font-size: var(--cpd-font-caption); line-height: 1.5; }

.cpd-dialog-head h3 { font-size: 19px; line-height: 1.3; }
.cpd-dialog-head p,
.cpd-output-section-head p { font-size: var(--cpd-font-support); line-height: 1.55; }
.cpd-output-section-head h4,
.cpd-quick-result-head h4 { font-size: 15px; line-height: 1.35; }
.cpd-output-choice strong,
.cpd-quick-template strong { font-size: var(--cpd-font-body); }
.cpd-output-choice small,
.cpd-quick-template small,
.cpd-output-summary p { font-size: var(--cpd-font-caption); line-height: 1.5; }

@media (max-width: 767px) {
  .cpd-workspace { padding-inline: 14px; }
  .cpd-page-head h2 { font-size: 22px; }
  .cpd-institution-random { padding: 15px; }
  .cpd-accordion-trigger { min-height: 62px; padding: 10px 11px; }
  .cpd-accordion-copy strong { font-size: 14px; }
  .cpd-accordion-copy small { font-size: var(--cpd-font-caption); white-space: normal; }
  .cpd-accordion-body { padding: 0 13px 17px; }
  .cpd-panel h3,
  .cpd-accordion-body .cpd-panel h3 { font-size: 15px; }
  .cpd-help,
  .cpd-accordion-body .cpd-help { font-size: var(--cpd-font-support); }
}

/* UI system alignment — configure on the left, review and act on the right. */
.cpd-app {
  --cpd-panel-gap: var(--workspace-gap);
  --cpd-panel-padding: var(--panel-padding);
  --cpd-preview-panel-width: clamp(580px, 42vw, 680px);
}

.cpd-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(580px, var(--cpd-preview-panel-width));
  gap: var(--cpd-panel-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--workspace-top) var(--workspace-gutter) var(--workspace-bottom);
}

@media (min-width: 961px) and (max-width: 1279px) {
  .cpd-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 45vw);
  }
}

.cpd-main-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--cpd-panel-gap);
  min-width: 0;
}

.cpd-summary,
.cpd-accordion {
  min-width: 0;
}

.cpd-institution-random {
  margin-bottom: 0;
  padding: var(--cpd-panel-padding);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.cpd-accordion,
.cpd-summary-card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.cpd-accordion-body {
  padding-bottom: var(--cpd-panel-padding);
}

.cpd-accordion-body .cpd-panel + .cpd-panel {
  margin-top: var(--cpd-panel-gap);
}

.cpd-accordion-body .cpd-form-grid {
  gap: 16px;
}

.cpd-summary-inner {
  display: grid;
  gap: var(--cpd-panel-gap);
}

.cpd-summary-inner,
.cpd-summary-inner.tab-action-panel-sticky {
  position: static !important;
  top: auto !important;
  max-height: none;
  overflow: visible;
}

.cpd-summary-inner > .tab-action-dock {
  position: static !important;
  top: auto !important;
}

.cpd-summary-head {
  padding: var(--cpd-panel-padding);
  padding-bottom: 14px;
}

.cpd-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  padding-inline: var(--cpd-panel-padding);
}

.cpd-summary-list > .priority-wide {
  grid-column: 1 / -1;
}

.cpd-summary-list > div {
  grid-template-columns: 84px minmax(0, 1fr);
}

.cpd-summary-list dd {
  text-align: left;
}

.cpd-validation,
.cpd-summary-actions,
.cpd-summary-reuse {
  margin-inline: var(--panel-padding-compact);
}

.cpd-summary-actions,
.cpd-summary-reuse {
  padding-inline: 0;
}

.cpd-summary-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cpd-summary-reuse > div:last-child {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cpd-summary-reuse .cpd-btn.danger {
  grid-column: auto;
}

.cpd-summary-reuse {
  padding-bottom: var(--cpd-panel-padding);
}

@media (max-width: 960px) {
  .cpd-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .cpd-summary-card {
    display: block;
  }

  .cpd-summary {
    margin-top: var(--cpd-panel-gap);
  }

  .cpd-summary-inner {
    position: static;
  }

  .cpd-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cpd-workspace {
    display: block;
    padding: var(--workspace-top) var(--workspace-gutter) var(--workspace-bottom);
  }

  .cpd-summary {
    margin-top: var(--cpd-panel-gap);
  }

  .cpd-summary-list {
    display: block;
  }

  .cpd-summary-list dd {
    text-align: right;
  }

  .cpd-summary-reuse > div:last-child {
    grid-template-columns: 1fr 1fr;
  }

  .cpd-summary-reuse .cpd-btn.danger {
    grid-column: 1 / -1;
  }

  .cpd-institution-random,
  .cpd-summary-head {
    padding: var(--cpd-panel-padding);
  }

  .cpd-accordion-body {
    padding-right: var(--panel-padding-compact);
    padding-bottom: var(--cpd-panel-padding);
    padding-left: var(--panel-padding-compact);
  }

  .cpd-responsibility-map { grid-template-columns: 1fr; }
  .cpd-responsibility-map > i { justify-self: center; transform: rotate(90deg); }
  .cpd-context-flow { grid-template-columns: 1fr; }
  .cpd-context-flow > i { justify-self: center; transform: rotate(90deg); }
  .cpd-strategy-flow { grid-template-columns: 1fr; }
  .cpd-strategy-flow > i { justify-self: center; transform: rotate(90deg); }
  .cpd-brief-choice { grid-template-columns: 1fr; gap: 8px; }
  .cpd-brief-choice-title { width: auto; }
  .cpd-brief-chip { min-height: 32px; padding: 6px 10px; }
  .cpd-resource-grid { grid-template-columns: 1fr; }
}

/* Design-guide journey: intent first, technical controls on demand. */
.cpd-journey-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 22%, var(--cpd-border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cpd-primary) 8%, var(--cpd-surface)), var(--cpd-surface));
}

.cpd-journey-intro > div { display: grid; gap: 4px; }
.cpd-journey-intro span { color: var(--cpd-primary); font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.cpd-journey-intro strong { font-size: 14px; line-height: 1.45; }
.cpd-journey-intro p { margin: 0; color: var(--cpd-muted); font-size: 12px; line-height: 1.5; }
.cpd-journey-intro em {
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-primary) 12%, var(--cpd-surface));
  color: var(--cpd-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.cpd-advanced-journey {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 16px;
  background: var(--cpd-surface);
}

.cpd-advanced-journey > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.cpd-advanced-journey > summary::-webkit-details-marker { display: none; }
.cpd-advanced-journey > summary span { font-size: 12px; font-weight: 850; }
.cpd-advanced-journey > summary small { color: var(--cpd-muted); font-size: 12px; line-height: 1.4; text-align: right; }
.cpd-advanced-journey[open] > summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-advanced-journey-body { display: grid; }

.cpd-output-budget,
.cpd-prompt-budget-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 20%, var(--cpd-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--cpd-primary) 5%, var(--cpd-surface));
}

.cpd-output-budget > div,
.cpd-prompt-budget-card > div { display: grid; gap: 2px; }
.cpd-output-budget small,
.cpd-prompt-budget-card small { color: var(--cpd-primary); font-size: 12px; font-weight: 850; }
.cpd-output-budget strong,
.cpd-prompt-budget-card strong { font-size: 15px; }
.cpd-output-budget span,
.cpd-prompt-budget-card span { color: var(--cpd-muted); font-size: 12px; line-height: 1.45; }
.cpd-output-budget > em,
.cpd-prompt-budget-card > em { color: var(--cpd-primary); font-size: 12px; font-style: normal; font-weight: 850; }
.cpd-output-budget > i,
.cpd-prompt-budget-card > i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-border) 70%, transparent);
}
.cpd-output-budget > i b,
.cpd-prompt-budget-card > i b {
  display: block;
  width: var(--cpd-budget, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cpd-primary), color-mix(in srgb, var(--cpd-primary) 55%, #22c55e));
}
.cpd-output-detail-warning { border-color: color-mix(in srgb, #d97706 36%, var(--cpd-border)); }

.cpd-inspiration-starter {
  overflow: hidden;
  border: 1px dashed var(--cpd-border);
  border-radius: 14px;
  background: var(--cpd-surface);
}

.cpd-inspiration-starter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}

.cpd-inspiration-starter > summary::-webkit-details-marker { display: none; }
.cpd-inspiration-starter > summary > span { display: grid; gap: 3px; }
.cpd-inspiration-starter > summary strong { font-size: 12px; }
.cpd-inspiration-starter > summary small { color: var(--cpd-muted); font-size: 10px; line-height: 1.4; }
.cpd-inspiration-starter > summary em { color: var(--cpd-primary); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cpd-inspiration-starter[open] > summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-inspiration-starter > .cpd-institution-random { margin: 0; border: 0; border-radius: 0; box-shadow: none; }

.cpd-axis-board {
  display: grid;
  gap: 16px;
}

.cpd-axis-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 18%, var(--cpd-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--cpd-primary) 5%, var(--cpd-surface));
}

.cpd-axis-board-head > div { display: grid; gap: 4px; }
.cpd-axis-board-head > div > span { color: var(--cpd-primary); font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.cpd-axis-board-head > div > strong { font-size: 15px; line-height: 1.4; }
.cpd-axis-board-head > div > small { color: var(--cpd-muted); font-size: 12px; line-height: 1.5; }

.cpd-design-axis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.cpd-design-axis {
  display: grid;
  gap: 15px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--cpd-border);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--cpd-surface), color-mix(in srgb, var(--cpd-primary) 2%, var(--cpd-canvas)));
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.cpd-design-axis:focus-within {
  border-color: color-mix(in srgb, var(--cpd-primary) 55%, var(--cpd-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpd-primary) 10%, transparent);
}

.cpd-design-axis-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 16px;
}

.cpd-design-axis-head > div { display: grid; gap: 6px; }
.cpd-design-axis-sequence {
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-primary) 10%, transparent);
  color: var(--cpd-primary);
  font-size: 12px;
  font-weight: 850;
}

.cpd-design-axis-head > div > strong {
  font-size: 14px;
  line-height: 1.5;
}

.cpd-design-axis output {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--cpd-text);
  text-align: right;
}

.cpd-design-axis output small { color: var(--cpd-primary); font-size: 12px; font-weight: 850; }
.cpd-design-axis output strong { font-size: 13px; line-height: 1.4; }

.cpd-design-axis-control {
  display: grid;
  grid-template-columns: minmax(112px, 150px) minmax(220px, 1fr) minmax(112px, 150px);
  align-items: center;
  gap: 14px;
}

.cpd-axis-endpoint {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  background: var(--cpd-surface);
  color: var(--cpd-text);
  cursor: pointer;
  text-align: left;
}

.cpd-axis-endpoint.right { text-align: right; }
.cpd-axis-endpoint:hover { border-color: var(--cpd-primary); color: var(--cpd-primary); }
.cpd-axis-endpoint:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 22%, transparent); outline-offset: 2px; }
.cpd-axis-endpoint > span { font-size: 13px; font-weight: 850; }
.cpd-axis-endpoint > small { overflow: hidden; color: var(--cpd-muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.cpd-axis-range {
  --cpd-axis-thumb-size: 22px;
  --cpd-axis-thumb-radius: calc(var(--cpd-axis-thumb-size) / 2);
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 2px 0 20px;
}

.cpd-axis-range input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 28px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.cpd-axis-range input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cpd-primary) 54%, var(--cpd-surface)) 0 var(--cpd-axis-position), color-mix(in srgb, var(--cpd-border) 82%, var(--cpd-surface)) var(--cpd-axis-position) 100%);
}

.cpd-axis-range input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-border) 82%, var(--cpd-surface));
}

.cpd-axis-range input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-primary) 54%, var(--cpd-surface));
}

.cpd-axis-range input[type="range"]::-webkit-slider-thumb {
  width: var(--cpd-axis-thumb-size);
  height: var(--cpd-axis-thumb-size);
  margin-top: -7px;
  border: 4px solid var(--cpd-surface);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--cpd-primary);
  box-shadow: 0 0 0 1px var(--cpd-primary), 0 4px 10px color-mix(in srgb, var(--cpd-primary) 28%, transparent);
}

.cpd-axis-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 4px solid var(--cpd-surface);
  border-radius: 50%;
  background: var(--cpd-primary);
  box-shadow: 0 0 0 1px var(--cpd-primary), 0 4px 10px color-mix(in srgb, var(--cpd-primary) 28%, transparent);
}

.cpd-axis-range input[type="range"]:focus-visible { outline: none; }
.cpd-axis-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cpd-primary) 20%, transparent); }

.cpd-axis-ticks {
  position: absolute;
  right: var(--cpd-axis-thumb-radius);
  bottom: 0;
  left: var(--cpd-axis-thumb-radius);
  height: 17px;
  pointer-events: none;
}

.cpd-axis-ticks i {
  position: absolute;
  left: var(--cpd-tick-position, 0%);
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translateX(-50%);
  color: var(--cpd-muted);
  font-style: normal;
}

.cpd-axis-ticks b { width: 1px; height: 5px; background: var(--cpd-border); }
.cpd-axis-ticks small { font-size: 12px; line-height: 1; }
.cpd-axis-ticks i.active { color: var(--cpd-primary); font-weight: 850; }
.cpd-axis-ticks i.active b { width: 2px; background: var(--cpd-primary); }

.cpd-design-axis-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 1px;
}

.cpd-design-axis-foot > span { color: var(--cpd-muted); font-size: 12px; line-height: 1.4; }
.cpd-design-axis-foot > button {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cpd-primary) 8%, transparent);
  color: var(--cpd-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.cpd-design-axis-foot > button:hover { background: color-mix(in srgb, var(--cpd-primary) 14%, transparent); }

.cpd-choice-axis-grid { margin-top: 16px; }
.cpd-choice-axis-followup { margin-top: 16px; }
.cpd-background-photo > .cpd-choice-axis { margin-top: 14px; }
.cpd-background-photo-axes { margin-bottom: 14px; }

.cpd-zone-preview {
  display: grid;
  grid-template-rows: auto minmax(112px, 1fr) auto;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpd-surface) 55%, transparent);
}

.cpd-zone-preview-header,
.cpd-zone-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px 16px;
}

.cpd-zone-preview-header { border-bottom: 1px solid color-mix(in srgb, var(--cpd-border) 70%, transparent); }
.cpd-zone-preview-footer { border-top: 1px solid color-mix(in srgb, var(--cpd-border) 70%, transparent); }
.cpd-zone-preview span { font-size: 12px; font-weight: 900; letter-spacing: .08em; opacity: .76; }
.cpd-zone-preview strong { font-size: 12px; line-height: 1.4; text-align: right; }

.cpd-zone-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}

.cpd-zone-preview-body strong { justify-self: start; font-size: 14px; text-align: left; }
.cpd-zone-preview-body > span { grid-column: 1 / -1; }
.cpd-zone-preview-body i {
  min-width: 124px;
  padding: 16px;
  border: 1px solid var(--cpd-border);
  border-radius: 11px;
  color: var(--cpd-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.cpd-zone-separation {
  display: grid;
  gap: 15px;
  min-width: 0;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 22%, var(--cpd-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--cpd-primary) 4%, var(--cpd-surface));
}

.cpd-zone-separation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.cpd-zone-separation-head > div { display: grid; gap: 5px; }
.cpd-zone-separation-head > div > span { color: var(--cpd-primary); font-size: 12px; font-weight: 850; }
.cpd-zone-separation-head > div > strong { font-size: 14px; line-height: 1.45; }
.cpd-zone-separation output { display: grid; justify-items: end; gap: 3px; text-align: right; }
.cpd-zone-separation output small { color: var(--cpd-primary); font-size: 12px; font-weight: 850; }
.cpd-zone-separation output strong { font-size: 13px; }

.cpd-design-statement {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 18px;
  border-left: 4px solid var(--cpd-primary);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--cpd-primary) 6%, var(--cpd-surface));
}

.cpd-design-statement > span,
.cpd-color-intent-preview > span {
  color: var(--cpd-primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}

.cpd-design-statement > strong {
  font-size: 14px;
  line-height: 1.65;
}

.cpd-design-statement > small {
  color: var(--cpd-muted);
  font-size: 11px;
  line-height: 1.5;
}

.cpd-design-advanced {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: 14px;
  background: var(--cpd-surface);
}

.cpd-design-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.cpd-design-advanced > summary::-webkit-details-marker { display: none; }
.cpd-design-advanced > summary span { font-size: 12px; font-weight: 850; }
.cpd-design-advanced > summary small { color: var(--cpd-muted); font-size: 10px; font-weight: 550; text-align: right; }
.cpd-design-advanced[open] > summary { border-bottom: 1px solid var(--cpd-border); }
.cpd-design-advanced-body { display: grid; gap: 14px; padding: 16px; }
.cpd-design-advanced-body > h4 { margin: 0; font-size: 13px; }
.cpd-design-advanced-body > p { margin: -8px 0 0; color: var(--cpd-muted); font-size: 11px; line-height: 1.5; }
.cpd-design-advanced-body > .cpd-panel { margin: 0; }
.cpd-advanced-grid { margin-top: 16px; }

.cpd-color-intent {
  display: grid;
  gap: 18px;
}

.cpd-color-intent-preview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cpd-border);
}

.cpd-color-intent-preview > strong { font-size: 14px; }
.cpd-color-intent-preview .cpd-color-dots { justify-self: end; }
.cpd-background-intent { margin-top: 16px; }

@media (max-width: 720px) {
  .cpd-journey-intro { grid-template-columns: 1fr; }
  .cpd-journey-intro em { justify-self: start; }
  .cpd-advanced-journey > summary { align-items: flex-start; flex-direction: column; }
  .cpd-advanced-journey > summary small { text-align: left; }
  .cpd-axis-board-head { grid-template-columns: 1fr; }
  .cpd-axis-board-head > button { justify-self: start; }
  .cpd-design-axis-head { grid-template-columns: 1fr; }
  .cpd-design-axis output { justify-items: start; text-align: left; }
  .cpd-design-axis-control { grid-template-columns: 1fr 1fr; }
  .cpd-axis-range { grid-column: 1 / -1; grid-row: 1; }
  .cpd-axis-endpoint { grid-row: 2; }
  .cpd-axis-endpoint.right { grid-column: 2; }
  .cpd-zone-preview-body { grid-template-columns: 1fr; }
  .cpd-zone-preview-body i { width: 100%; }
  .cpd-zone-separation-head { grid-template-columns: 1fr; }
  .cpd-zone-separation output { justify-items: start; text-align: left; }
  .cpd-design-advanced > summary { align-items: flex-start; flex-direction: column; }
  .cpd-design-advanced > summary small { text-align: left; }
  .cpd-color-intent-preview { grid-template-columns: 1fr; }
  .cpd-color-intent-preview .cpd-color-dots { justify-self: start; }
}

/* Six-step guided design journey */
.cpd-accordion.cpd-journey {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cpd-journey-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--cpd-primary) 24%, var(--cpd-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cpd-primary) 8%, var(--cpd-surface)), var(--cpd-surface));
  box-shadow: var(--shadow-soft);
}

.cpd-journey-header > div { display: grid; gap: 5px; }
.cpd-journey-header > div > span,
.cpd-profile-start-head > div > span {
  color: var(--cpd-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.cpd-journey-header h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.cpd-journey-header p { margin: 0; color: var(--cpd-muted); font-size: 12px; line-height: 1.55; }
.cpd-journey-header > em,
.cpd-profile-start-head > em {
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cpd-primary) 12%, var(--cpd-surface));
  color: var(--cpd-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.cpd-journey-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
}

.cpd-journey-step {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 2px 7px;
  min-width: 0;
  min-height: 62px;
  padding: 9px;
  border: 1px solid var(--cpd-border);
  border-radius: 12px;
  background: var(--cpd-surface);
  color: var(--cpd-text);
  cursor: pointer;
  text-align: left;
}
.cpd-journey-step > span { display: grid; grid-row: 1 / 3; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--cpd-canvas); color: var(--cpd-muted); font-size: 12px; font-weight: 900; }
.cpd-journey-step strong { overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.cpd-journey-step small { color: var(--cpd-muted); font-size: 12px; line-height: 1.2; }
.cpd-journey-step:hover { border-color: color-mix(in srgb, var(--cpd-primary) 45%, var(--cpd-border)); }
.cpd-journey-step:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 22%, transparent); outline-offset: 2px; }
.cpd-journey-step.active { border-color: var(--cpd-primary); background: color-mix(in srgb, var(--cpd-primary) 7%, var(--cpd-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cpd-primary) 25%, transparent); }
.cpd-journey-step.active > span { background: var(--cpd-primary); color: #fff; }
.cpd-journey-step.error { border-color: #d92d20; }

.cpd-journey-panel {
  overflow: hidden;
  border: 1px solid var(--cpd-border);
  border-radius: var(--radius-lg);
  background: var(--cpd-surface);
  box-shadow: var(--shadow-soft);
}
.cpd-journey-panel:focus { outline: none; }
.cpd-journey-panel:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 20%, transparent); outline-offset: 3px; }
.cpd-journey-panel-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cpd-border); }
.cpd-journey-panel-head > span { display: grid; place-items: center; min-height: 32px; border-radius: 10px; background: var(--cpd-primary); color: #fff; font-size: 12px; font-weight: 900; }
.cpd-journey-panel-head h2 { margin: 0; font-size: 19px; }
.cpd-journey-panel-head p { margin: 3px 0 0; color: var(--cpd-muted); font-size: 12px; line-height: 1.5; }
.cpd-journey-panel-body { padding: var(--cpd-panel-padding); }
.cpd-journey-panel-body > .cpd-panel:first-child { margin-top: 0; }
.cpd-journey-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--cpd-border); background: color-mix(in srgb, var(--cpd-canvas) 58%, var(--cpd-surface)); }
.cpd-journey-footer > span { color: var(--cpd-muted); font-size: 12px; text-align: center; }

.cpd-profile-start { margin-bottom: var(--cpd-panel-gap); padding: 18px; border: 1px solid color-mix(in srgb, var(--cpd-primary) 25%, var(--cpd-border)); border-radius: 16px; background: color-mix(in srgb, var(--cpd-primary) 4%, var(--cpd-surface)); }
.cpd-profile-start-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 14px; }
.cpd-profile-start-head h3 { margin: 3px 0; font-size: 16px; }
.cpd-profile-start-head p { margin: 0; color: var(--cpd-muted); font-size: 12px; line-height: 1.5; }
.cpd-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cpd-profile-card { display: grid; gap: 4px; min-height: 88px; padding: 12px; border: 1px solid var(--cpd-border); border-radius: 13px; background: var(--cpd-surface); color: var(--cpd-text); cursor: pointer; text-align: left; }
.cpd-profile-card > span { color: var(--cpd-primary); font-size: 12px; font-weight: 850; }
.cpd-profile-card strong { font-size: 13px; }
.cpd-profile-card small { color: var(--cpd-muted); font-size: 12px; line-height: 1.35; }
.cpd-profile-card:hover { border-color: var(--cpd-primary); }
.cpd-profile-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 22%, transparent); outline-offset: 2px; }
.cpd-profile-card.selected { border-color: var(--cpd-primary); background: color-mix(in srgb, var(--cpd-primary) 8%, var(--cpd-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpd-primary) 28%, transparent); }

.cpd-click-question-list { display: grid; gap: 12px; }
.cpd-click-question { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--cpd-border); border-radius: 14px; }
.cpd-click-question legend { max-width: calc(100% - 12px); padding: 0 6px; font-size: 12px; font-weight: 850; line-height: 1.4; }
.cpd-click-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cpd-five-options .cpd-click-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cpd-click-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.cpd-click-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cpd-click-option > span { display: grid; align-content: center; gap: 3px; min-height: 46px; padding: 8px 9px; border: 1px solid var(--cpd-border); border-radius: 10px; background: var(--cpd-surface); text-align: center; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.cpd-click-option strong { font-size: 12px; line-height: 1.35; }
.cpd-click-option small { color: var(--cpd-muted); font-size: 12px; line-height: 1.35; }
.cpd-click-option:hover > span { border-color: color-mix(in srgb, var(--cpd-primary) 55%, var(--cpd-border)); }
.cpd-click-option input:checked + span { border-color: var(--cpd-primary); background: color-mix(in srgb, var(--cpd-primary) 9%, var(--cpd-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cpd-primary) 25%, transparent); color: var(--cpd-primary); }
.cpd-click-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--cpd-primary) 22%, transparent); outline-offset: 2px; }
.cpd-resource-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpd-section-inline-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.cpd-section-inline-toggle > div { display: grid; gap: 3px; }
.cpd-section-inline-toggle strong { font-size: 12px; }
.cpd-section-inline-toggle small { color: var(--cpd-muted); font-size: 12px; line-height: 1.4; }
.cpd-mobile-bar > span { align-self: center; color: var(--cpd-muted); font-size: 12px; font-weight: 800; text-align: center; }

@media (max-width: 1100px) {
  .cpd-journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cpd-click-options,
  .cpd-five-options .cpd-click-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cpd-journey-header,
  .cpd-profile-start-head { grid-template-columns: 1fr; }
  .cpd-journey-header > em,
  .cpd-profile-start-head > em { justify-self: start; }
  .cpd-journey-header { padding: 15px; }
  .cpd-journey-header h2 { font-size: 18px; }
  .cpd-journey-steps { display: flex; gap: 7px; margin-inline: -2px; padding: 2px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .cpd-journey-steps::-webkit-scrollbar { display: none; }
  .cpd-journey-step { flex: 0 0 116px; min-height: 58px; }
  .cpd-journey-panel-head { padding: 15px; }
  .cpd-journey-panel-body { padding: 12px; }
  .cpd-journey-footer { display: none; }
  .cpd-profile-start { padding: 14px; }
  .cpd-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-profile-card { min-height: 82px; padding: 10px; }
  .cpd-click-question { padding: 11px; }
  .cpd-click-options,
  .cpd-five-options .cpd-click-options { grid-template-columns: 1fr 1fr; }
  .cpd-click-option > span { min-height: 46px; }
  .cpd-resource-checks { grid-template-columns: 1fr; }
  .cpd-section-inline-toggle { grid-template-columns: 1fr; }
  .cpd-section-inline-toggle .cpd-section-toggle { justify-self: start; }
  .cpd-mobile-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cpd-mobile-bar:has(.cpd-btn:nth-of-type(3)) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cpd-mobile-bar:has(.cpd-btn:nth-of-type(3)) .cpd-btn { font-size: 10px; }
}