/* ═══════════════════════════════════════════════════════════════════════════
   Questionnaire — Admin UI  (style-admin.css)
   BEM prefixes:
     .qa-*   questionnaire-admin (dashboard, forms, panels)
     .cgf-*  framework system UI (nav, bar, library)
     .plb-*  pipeline builder (3-panel visual editor)
   Depends on: theme.css (Choreografy tokens)
   Scope: index.php (dashboard) + analyse_simple.php (analyse)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-elevated);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.qa-shell { min-height: 100vh; display: flex; flex-direction: column; }

.qa-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.qa-main {
  flex: 1;
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Main nav (.cgf-nav) — visual style now comes from the jotf `nav-bar` brick; this retains only
   the app-specific sticky positioning (flash messages now render as a jotf banner, not a top bar). */
.cgf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Pipeline view (.cgf-pipeline-*) ────────────────────────────────────── */
.cgf-pipeline-view { flex: 1; padding-block: var(--space-8); }
.cgf-pipeline-view__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.cgf-pipeline-view__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.cgf-pipeline-view__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}
.cgf-pipeline-empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
}
.cgf-pipeline-empty__text { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.cgf-pipeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cgf-pipeline-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cgf-pipeline-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.cgf-pipeline-card--editing { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.cgf-pipeline-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.cgf-pipeline-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cgf-pipeline-card__steps,
.cgf-pipeline-card__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cgf-pipeline-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Card action buttons show their text label on desktop; the icon (.cgf-act-ico) is revealed on
   mobile in place of the label (see the max-width:640px block). */
.cgf-act-ico { display: none; }
.cgf-pipeline-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.cgf-pipeline-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.cgf-pipeline-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.cgf-pipeline-card__slug {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}
.cgf-pipeline-card__slug--empty { color: var(--warning, #d97706); font-style: italic; font-family: inherit; }
.cgf-pipeline-card__edit { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.cgf-pipeline-card__edit-row { display: flex; flex-direction: column; gap: var(--space-1); }
.cgf-pipeline-card__edit-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.cgf-pipeline-card__slug-row { display: flex; align-items: center; gap: var(--space-2); }
.cgf-pipeline-card__slug-prefix { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono, monospace); white-space: nowrap; }
.cgf-pipeline-card__edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.cgf-pipeline-card__save-msg { font-size: var(--text-xs); }
.cgf-pipeline-card__save-msg--ok    { color: var(--success, #16a34a); }
.cgf-pipeline-card__save-msg--error { color: var(--danger, #dc2626); }

/* ── Shared tab bar (.settings-tabs / .settings-tab) ────────────────────── */
/* Defined here (not inline in admin-settings.php) so Library can reuse them */
.settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:var(--space-6); }
.settings-tab  { padding:var(--space-3) var(--space-5); font-size:var(--text-sm); font-weight:500; color:var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
.settings-tab:hover  { color:var(--text-primary); }
.settings-tab--active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Library components (.cgf-lib-*) ────────────────────────────────────── */
.cgf-lib-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-elevated);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: var(--space-1);
}
.settings-tab--active .cgf-lib-count { background: rgba(99,102,241,0.15); color: var(--accent); }

.cgf-lib-list { display: flex; flex-direction: column; }
.cgf-lib-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.cgf-lib-row:last-child { border-bottom: none; }
.cgf-lib-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cgf-lib-row__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgf-lib-row__sub   { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgf-lib-row__tags  { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; }

/* Design cards */
.cgf-lib-designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
}
.cgf-design-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cgf-design-card__preview {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cgf-design-card__preview-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cgf-design-card__body {
  padding: var(--space-3);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cgf-design-card__id {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  margin: 0;
}
.cgf-design-card__blocks { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.qa-topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.qa-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.qa-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.qa-topbar__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.qa-topbar__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.qa-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.qa-topbar__logout {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
  transition: color var(--transition-fast);
}
.qa-topbar__logout:hover { color: var(--danger); }

/* ── Page header (analyse) ───────────────────────────────────────────────── */
.qa-page-header {
  text-align: center;
  padding-block: var(--space-6) var(--space-4);
}
.qa-page-header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.qa-page-header p {
  color: var(--text-secondary);
  margin: 0;
}

/* ── KPI cards (dashboard quick stats) ──────────────────────────────────── */
.qa-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.qa-kpi-card {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow);
}

.qa-kpi-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0 0 var(--space-1) 0;
  line-height: 1;
}

.qa-kpi-card__label {
  font-size: var(--text-sm);
  opacity: 0.88;
  margin: 0;
}

/* Panel reskinned onto the jotf `panel` brick (phase PN). App-level compound rules below. */

/* ── Card grid ───────────────────────────────────────────────────────────── */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.qa-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.qa-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}

.qa-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.qa-card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.qa-card__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.qa-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.qa-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}
/* Library + dashboard panel grids: prevent action row wrapping */
.panel .qa-grid .qa-card__actions { flex-wrap: nowrap; }

/* Badges reskinned onto the jotf `badge` brick (phase BG). */

/* ── Buttons — base + generic variants come from the jotf button brick (phase AB). ───────────── */
/* Kept: generic hover/active/disabled states (augment ALL buttons incl. app-specific) + the
   app-specific --ia (AI gradient). --icon-only / --compact / --compact-sm live further below. */
.btn:hover   { opacity: 0.85; }
.btn:active  { opacity: 0.95; transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--ia        { background: var(--gradient-vibrant); color: var(--text-inverse); }

/* ── Editor view (full-page questionnaire editor) ────────────────────────── */
#editor-view { background: var(--bg-elevated); min-height: calc(100vh - 65px); }
.editor-view__container { padding-block: var(--space-6) var(--space-10); }
.editor-view__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.editor-view__title {
  flex: 1;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Help modal content ──────────────────────────────────────────────────── */
.qa-help-section-title { font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--space-2) 0; }
.qa-help-grid { display:flex;flex-direction:column;gap:var(--space-2); }
.qa-help-row { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:start;padding:var(--space-2) var(--space-3);background:var(--bg-elevated);border-radius:var(--radius-sm); }
.qa-help-row--block { grid-template-columns:1fr;gap:var(--space-1); }
.qa-help-code { font-family:monospace;font-size:var(--text-xs);color:var(--accent);white-space:pre;display:block;line-height:1.6; }
.qa-help-desc { font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5; }
.qa-help-pre { font-family:monospace;font-size:var(--text-xs);color:var(--text-secondary);background:var(--bg-elevated);border-radius:var(--radius-sm);padding:var(--space-3);overflow-x:auto;white-space:pre;line-height:1.7;margin:0;border:1px solid var(--border); }

details[open] > summary .qv-chevron { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }
.editor-view__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* ── Results list row ────────────────────────────────────────────────────── */
.results-list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }

/* ── End-action card selector ────────────────────────────────────────────── */
.ea-card-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.ea-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer;
  text-align: center; background: var(--bg-card);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.ea-card:hover { border-color: var(--accent); background: var(--bg-elevated); }
.ea-card--active { border-color: var(--accent); background: var(--accent-subtle, #eef2ff); }
.ea-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ea-card__icon  { font-size: 1.35rem; line-height: 1; margin-bottom: 2px; }
.ea-card__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.ea-card__desc  { font-size: var(--text-xs); color: var(--text-muted); }
.ea-config-panel {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-4); background: var(--bg-elevated);
  margin-top: var(--space-1);
}

/* Alerts reskinned onto the jotf `banner` / `inline-error` bricks (phase RS). */

/* ── Selector (analyse file picker) ─────────────────────────────────────── */
.qa-selector {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.qa-selector__label {
  display: block;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.qa-selector__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
.qa-selector__select:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.qa-selector__meta {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* ── Stat cards (analyse) ────────────────────────────────────────────────── */
.qa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.qa-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.qa-stat-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin: 0 0 var(--space-2) 0;
}

.qa-stat-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}

.qa-stat-card__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ── Block (section with accent left border) ─────────────────────────────── */
.qa-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.qa-block__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* ── Distribution (likert scores) ────────────────────────────────────────── */
.qa-dist { display: flex; flex-direction: column; gap: var(--space-2); }

.qa-dist__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.qa-dist__key {
  width: 2rem;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.qa-dist__track {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.qa-dist__fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.qa-dist__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  width: 5rem;
  flex-shrink: 0;
}

/* ── Text responses ──────────────────────────────────────────────────────── */
.qa-responses { display: flex; flex-direction: column; gap: var(--space-3); }

.qa-response-item {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.qa-response-item__label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

/* ── Code / URL display ──────────────────────────────────────────────────── */
.qa-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  word-break: break-all;
  display: block;
  margin-top: var(--space-1);
}

/* ── Login ───────────────────────────────────────────────────────────────── */
.qa-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hero);
  padding: var(--space-6);
}

.qa-login__box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.qa-login__mark {
  width: 56px;
  height: 56px;
  background: var(--gradient-primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
}
.qa-login__mark svg { color: white; }

.qa-login__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  text-align: center;
  margin: 0 0 var(--space-2) 0;
  color: var(--text-primary);
}
.qa-login__sub {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6) 0;
}

/* ── Field ───────────────────────────────────────────────────────────────── */
/* Form fields reskinned onto the jotf `form-field` brick (phase FF). App-level augmentation only:
   keep the tall, monospaced, resizable textarea ergonomics on top of form-field__control. */
textarea.form-field__control {
  min-height: 200px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  resize: vertical;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.qa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.qa-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.qa-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.qa-modal__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.qa-modal__close {
  width: 32px; height: 32px;
  border: none; background: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.qa-modal__close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.qa-modal__body   { padding: var(--space-6); flex: 1; }
.qa-modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ── Personal info panel ─────────────────────────────────────────────────── */
.qa-info-list { display: flex; flex-direction: column; gap: var(--space-2); }
.qa-info-item { font-size: var(--text-sm); }
.qa-info-item strong { color: var(--text-primary); }

/* ── Section breakdown ───────────────────────────────────────────────────── */
.qa-sections { display: flex; flex-direction: column; gap: var(--space-4); }

.qa-section-row { }
.qa-section-row__name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.qa-section-row__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.qa-footer {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-sm);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* ── Flash Wizard ────────────────────────────────────────────────────────── */
.flash-wizard {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.flash-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--accent-subtle, #eef2ff);
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.flash-gen-bar {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
  background: var(--bg-elevated);
}
.flash-status--loading { color: var(--accent); font-size: var(--text-sm); }
.flash-status--done    { color: var(--success, #16a34a); font-size: var(--text-sm); font-weight: 600; }
.flash-status--error   { color: var(--danger, #dc2626);  font-size: var(--text-sm); }
.flash-option-group { margin-bottom: var(--space-3); }
.flash-section-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* ─── Admin utility — extracted from inline styles ─── */

/* Icon-only button: square, no line-height padding */
.btn--icon-only {
    padding: 6px;
    line-height: 0;
}

/* Compact button: tighter padding for toolbar contexts */
.btn--compact {
    padding: 2px 8px;
}

/* Extra-compact button */
.btn--compact-sm {
    padding: 3px 10px;
}

/* Compact select */
.select--compact {
    padding: 2px 6px;
}

/* Thin vertical divider for toolbars */
.qa-toolbar__divider {
    width: 1px;
    height: 14px;
    margin: 0 2px;
    background: currentColor;
    opacity: 0.2;
}

/* Absolute overlay for checkbox in card top-right */
.qa-card__checkbox-overlay {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 1;
}

/* Modal width variants */
.qa-modal--prompt { max-width: 680px; }
.qa-modal--help   { max-width: 720px; }

/* Editor layout: main content + sidebar */
.qa-editor-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
}

/* Editor layout: main content + narrow sidebar */
.qa-editor-grid--narrow {
    display: grid;
    grid-template-columns: 1fr 140px;
}

/* ════════════════════════════════════════════════════════════════════════════
   PIPELINE BUILDER  (.plb-*)
   3-panel visual editor: sidebar (pipeline list) · center (step graph) · inspector
   ════════════════════════════════════════════════════════════════════════════ */

/* Layout */
.plb { display: flex; height: calc(100vh - 56px); overflow: hidden; background: var(--bg-base); }
.plb-sidebar   { width: 260px; border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; }
.plb-center    { flex: 1; overflow-y: auto; padding: var(--space-5); }
.plb-inspector { width: 360px; border-left: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; }

/* Sidebar — pipeline list items */
.plb-pl-item         { padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; }
.plb-pl-item:hover   { background: var(--bg-elevated); }
.plb-pl-item--active { background: rgba(99,102,241,.08); border-left: 3px solid var(--accent); }
.plb-pl-item__name   { font-weight: 600; font-size: var(--text-sm); }
.plb-pl-item__meta   { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Center — step cards */
.plb-step              { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color .15s, box-shadow .15s; background: var(--bg-surface); }
.plb-step:hover        { border-color: var(--accent); }
.plb-step--active      { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.plb-step__header      { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.plb-step__num         { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.plb-step__actions     { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.plb-step:hover .plb-step__actions { opacity: 1; }
.plb-type-badge        { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.plb-connector         { display: flex; flex-direction: column; align-items: center; height: 28px; color: var(--text-muted); font-size: 11px; }

/* Inspector */
.plb-inspector-inner   { padding: var(--space-4); }
.plb-inspector h3      { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.plb-section           { margin-bottom: var(--space-4); }
.plb-section-label     { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: var(--space-2); display: block; }
.plb-branch            { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-2); }

/* Step type picker */
.plb-type-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.plb-type-option         { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.plb-type-option:hover   { border-color: var(--accent); background: rgba(99,102,241,.04); }
.plb-type-option__icon   { font-size: 1.4rem; }
.plb-type-option__label  { font-size: var(--text-xs); font-weight: 600; }
.plb-type-option__desc   { font-size: 10px; color: var(--text-muted); line-height: 1.3; }

/* Prompt mode toggle */
.plb-prompt-mode         { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-2); }
.plb-prompt-mode button  { flex: 1; padding: 4px 8px; font-size: var(--text-xs); border: none; background: none; cursor: pointer; transition: background .12s; }
.plb-prompt-mode button.active { background: var(--accent); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   WIZARD  (.cgf-wizard)
   Shared layout for Express and Pipeline creation wizards.
   ════════════════════════════════════════════════════════════════════════════ */
.cgf-wizard {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Header: badge+title on left, stepper on right */
.cgf-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.cgf-wizard__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Stepper */
.cgf-wizard__stepper      { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cgf-wizard__step         { display: flex; align-items: center; gap: var(--space-2); }
.cgf-wizard__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  transition: background .15s, border-color .15s;
}
.cgf-wizard__step-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); transition: color .15s; }

.cgf-wizard__step--active   .cgf-wizard__step-num   { background: var(--accent); color: #fff; border-color: var(--accent); }
.cgf-wizard__step--active   .cgf-wizard__step-label { color: var(--accent); font-weight: 600; }
.cgf-wizard__step--done     .cgf-wizard__step-num   { background: var(--success); color: #fff; border-color: var(--success); }
.cgf-wizard__step--done     .cgf-wizard__step-label { color: var(--text-secondary); }
.cgf-wizard__step--upcoming .cgf-wizard__step-num   { opacity: .5; }
.cgf-wizard__step--upcoming .cgf-wizard__step-label { opacity: .5; }

.cgf-wizard__step-connector { width: 28px; height: 1.5px; background: var(--border); flex-shrink: 0; }

/* Cards */
.cgf-wizard__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}
.cgf-wizard__section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

/* Footer: first child auto-pushed left (Back/Cancel) */
.cgf-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.cgf-wizard__footer > *:first-child { margin-right: auto; }

/* Express / Pipeline badge */
.express-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--accent-2-subtle);
  color: var(--accent-2);
  font-size: .65rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--accent-2-border);
}

/* Generation status bar */
.express-gen-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.express-status--loading { color: var(--accent);  font-size: var(--text-sm); font-weight: 500; }
.express-status--done    { color: var(--success); font-size: var(--text-sm); font-weight: 600; }
.express-status--error   { color: var(--danger);  font-size: var(--text-sm); }

/* ── Button variants — polish ── */

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qa-container { padding-inline: var(--space-4); }
  .qa-main { padding-block: var(--space-5); gap: var(--space-4); }
  /* Pipeline card actions collapse to icons on their own full-width row to fit narrow screens. */
  .cgf-pipeline-card__actions .cgf-act-lbl { display: none; }
  .cgf-pipeline-card__actions .cgf-act-ico { display: inline; }
  .cgf-pipeline-card__header { flex-wrap: wrap; row-gap: var(--space-2); }
  .cgf-pipeline-card__actions { width: 100%; gap: var(--space-1); }
  .cgf-pipeline-card__actions .btn { padding-inline: var(--space-2); }
  .qa-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .qa-grid { grid-template-columns: 1fr; }
  .qa-topbar__inner { padding-block: var(--space-3); }
  .qa-login__box { padding: var(--space-6); }
  .cgf-wizard__header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .cgf-wizard__card   { padding: var(--space-4); }
}