/* ═══════════════════════════════════════════════════════════════
   CLOTO FEATURES — Characters, Locations, AI, Feedback,
   Scheda, Export, Template Manager, Extract
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SHARED MODAL (large feature modals)
   ══════════════════════════════════════════════════════════════ */

.fbw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cloto-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cloto-black-a60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--space-12);
}

.fbw-modal {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fbw-modal .fbw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
}

.fbw-modal-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.fbw-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-modal-close:hover {
  background: var(--cloto-teal-a6);
  color: var(--cloto-text-70);
}

.fbw-modal .fbw-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-12);
}

.fbw-modal .fbw-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-12);
  border-top: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
}

.fbw-modal-tabs-wrapper {
  display: flex;
  border-bottom: 1px solid var(--cloto-glass-border);
  padding: 0 var(--space-12);
  flex-shrink: 0;
}

/* Form Group (shared) */
.fbw-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.fbw-field-hint {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-style: italic;
}

.fbw-error-msg {
  color: var(--cloto-danger);
  font-size: var(--cloto-fs-sm);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════
   CHARACTERS
   ══════════════════════════════════════════════════════════════ */

.fbw-characters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
}

.fbw-characters-info {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.fbw-characters-count {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  font-family: var(--cloto-font-mono);
}

.fbw-characters-actions {
  display: flex;
  gap: var(--space-4);
}

.fbw-characters-empty {
  text-align: center;
  padding: var(--space-20) var(--space-12);
  color: var(--cloto-text-25);
  font-style: italic;
}

.fbw-characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

/* Character Card */
.fbw-character-card {
  background: var(--cloto-glass-bg);
  backdrop-filter: var(--cloto-glass-blur);
  -webkit-backdrop-filter: var(--cloto-glass-blur);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-character-card:hover {
  border-color: var(--cloto-glass-border-hover);
  box-shadow: var(--shadow-md);
}

.fbw-character-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.fbw-character-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cloto-glass-border);
}

.fbw-character-photo-empty {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cloto-teal-a6);
  border: 1px solid var(--cloto-glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fbw-character-initial {
  font-family: var(--cloto-font-display);
  font-size: 20px;
  color: var(--cloto-teal);
  font-weight: 400;
}

.fbw-character-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.fbw-character-name {
  font-size: var(--cloto-fs-md);
  font-weight: 600;
  color: var(--cloto-text-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fbw-character-role {
  font-size: var(--cloto-fs-xs);
  padding: 1px var(--space-4);
  border-radius: var(--radius-full);
  display: inline-flex;
  width: fit-content;
}

/* Role colors */
  .fbw-role-protagonista { color: var(--cloto-teal);
  background: var(--cloto-teal-a8); }
  .fbw-role-antagonista  { color: var(--cloto-danger);
  background: var(--cloto-danger-a8); }
  .fbw-role-mentore      { color: var(--cloto-gold);
  background: var(--cloto-gold-a8); }
  .fbw-role-alleato      { color: var(--cloto-success);
  background: var(--cloto-success-a8); }
  .fbw-role-oppositore   { color: var(--cloto-warning);
  background: var(--cloto-warning-a8); }

.fbw-character-meta {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

.fbw-character-brief {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fbw-character-card-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.fbw-character-card-actions button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--cloto-text-25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}
.fbw-character-card-actions button:hover {
  background: var(--cloto-teal-a8);
  color: var(--cloto-text-70);
}
.fbw-character-card-actions .fbw-char-wizard:hover {
  background: var(--cloto-gold-a10);
  color: var(--cloto-gold);
}
.fbw-character-card-actions .fbw-char-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.fbw-character-card-actions button svg {
  display: block;
}

.fbw-character-completeness {
  margin-top: var(--space-4);
}

.fbw-character-quick {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

/* Completeness Bar (shared) */
.fbw-completeness-bar {
  height: 4px;
  background: var(--cloto-teal-a10);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.fbw-completeness-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--cloto-teal);
  transition: width var(--duration-slow) var(--ease-spring);
}

.fbw-completeness-text,
.fbw-char-completeness-header,
.fbw-loc-completeness-header {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  margin-bottom: var(--space-2);
}

/* Character Modal V2 */
.fbw-character-modal-v2 {
  max-width: 800px;
}

/* Character Tabs */
.fbw-char-tabs,
.fbw-loc-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0;
}

.fbw-char-tab,
.fbw-loc-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-8);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  color: var(--cloto-text-40);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-char-tab:hover,
.fbw-loc-tab:hover {
  color: var(--cloto-text-70);
}

.fbw-char-tab.is-active,
.fbw-loc-tab.is-active {
  color: var(--cloto-teal);
  border-bottom-color: var(--cloto-teal);
}

.fbw-char-tab-icon,
.fbw-loc-tab-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.fbw-char-tab-icon svg,
.fbw-loc-tab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.fbw-char-tab-label,
.fbw-loc-tab-label {}

.fbw-char-panel,
.fbw-loc-panel {
  padding: var(--space-10) 0;
}

.fbw-char-panel-title,
.fbw-loc-panel-title {
  font-size: var(--cloto-fs-lg);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.fbw-char-panel-title svg,
.fbw-loc-panel-title svg {
  flex-shrink: 0;
}

/* Photo Upload */
.fbw-photo-upload-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.fbw-photo-preview,
.fbw-loc-photo-preview {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 2px solid var(--cloto-glass-border);
}

.fbw-photo-placeholder {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-xl);
  border: 2px dashed var(--cloto-glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloto-text-25);
  font-size: 36px;
  background: var(--cloto-teal-a3);
}

.fbw-photo-buttons {
  display: flex;
  gap: var(--space-4);
}

/* Character/Location Wizard (modal section, not the card button) */
.fbw-wizard-modal .fbw-wizard-content {
  padding: var(--space-8) 0;
}

/* Evolution */
.fbw-evolution-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.fbw-evolution-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fbw-evolution-card {
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fbw-evolution-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--cloto-glass-border);
}

.fbw-evolution-card-id {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
}

.fbw-evolution-card-body {
  padding: var(--space-6) var(--space-7);
}

.fbw-evolution-section {
  margin-bottom: var(--space-6);
}

.fbw-evolution-content {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  line-height: 1.6;
}

.fbw-evolution-empty {
  text-align: center;
  padding: var(--space-12);
  color: var(--cloto-text-25);
  font-style: italic;
}

.fbw-evolution-row {
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
}

.fbw-evolution-label {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
  flex-shrink: 0;
  min-width: 80px;
}

.fbw-evolution-value {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
}

.fbw-evolution-meta {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.fbw-evolution-meta svg {
  flex-shrink: 0;
}
.fbw-evolution-card-header svg {
  vertical-align: middle;
}

.fbw-evolution-badge {
  display: inline-flex;
  padding: 1px var(--space-3);
  font-size: var(--cloto-fs-2xs);
  border-radius: var(--radius-full);
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border: 1px solid var(--cloto-gold-a12);
}

.fbw-evolution-toggle {
  cursor: pointer;
  color: var(--cloto-teal);
  font-size: var(--cloto-fs-xs);
}

/* ══════════════════════════════════════════════════════════════
   LOCATIONS
   ══════════════════════════════════════════════════════════════ */

.fbw-locations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
}

.fbw-locations-info {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.fbw-locations-count {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  font-family: var(--cloto-font-mono);
}

.fbw-locations-actions {
  display: flex;
  gap: var(--space-4);
}

.fbw-locations-empty {
  text-align: center;
  padding: var(--space-20) var(--space-12);
  color: var(--cloto-text-25);
  font-style: italic;
}

.fbw-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

/* Location Card */
.fbw-location-card {
  background: var(--cloto-glass-bg);
  backdrop-filter: var(--cloto-glass-blur);
  -webkit-backdrop-filter: var(--cloto-glass-blur);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-location-card:hover {
  border-color: var(--cloto-glass-border-hover);
  box-shadow: var(--shadow-md);
}

.fbw-location-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.fbw-location-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--cloto-teal-a6);
  border: 1px solid var(--cloto-glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.fbw-location-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.fbw-location-name {
  font-size: var(--cloto-fs-md);
  font-weight: 600;
  color: var(--cloto-text-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fbw-location-type {
  font-size: var(--cloto-fs-xs);
  padding: 1px var(--space-4);
  border-radius: var(--radius-full);
  display: inline-flex;
  width: fit-content;
}

/* Location type colors */
  .fbw-tipo-interno    { color: var(--cloto-teal);
  background: var(--cloto-teal-a8); }
  .fbw-tipo-esterno    { color: var(--cloto-success);
  background: var(--cloto-success-a8); }
  .fbw-tipo-immaginario { color: var(--cloto-purple);
  background: var(--cloto-purple-a8); }
  .fbw-tipo-ibrido     { color: var(--cloto-warning);
  background: var(--cloto-warning-a8); }
  .fbw-tipo-virtuale   { color: var(--cloto-info);
  background: var(--cloto-info-a8); }

.fbw-location-photo {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.fbw-location-photo-empty {
  display: none;
}

.fbw-location-brief {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fbw-location-meta {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

  .fbw-location-position { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25); }
  .fbw-location-emotion  { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-style: italic; }

.fbw-location-card-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.fbw-location-card-actions button {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--cloto-text-25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}
.fbw-location-card-actions button:hover {
  background: var(--cloto-teal-a8);
  color: var(--cloto-text-70);
}
.fbw-location-card-actions .fbw-loc-wizard:hover {
  background: var(--cloto-gold-a10);
  color: var(--cloto-gold);
}
.fbw-location-card-actions .fbw-loc-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.fbw-location-card-actions button svg {
  display: block;
}

.fbw-location-completeness {
  margin-top: var(--space-4);
}

.fbw-location-modal-v2 {
  max-width: 800px;
}

/* ══════════════════════════════════════════════════════════════
   AI SETTINGS
   ══════════════════════════════════════════════════════════════ */

.fbw-ai-root {
  padding: 0;
}

/* Sections layout */
.fbw-ai-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fbw-ai-sections > .cloto-collapsible > .cloto-collapsible-body > .cloto-collapsible-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Field layout */
.fbw-ai-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fbw-ai-field-full {
  grid-column: 1 / -1;
}

.fbw-ai-scope-value {
  font-size: var(--cloto-fs-base);
  color: var(--cloto-text-90);
  font-weight: 500;
}

.fbw-ai-field-select {
  width: 100%;
}

/* AI Toggle */
.fbw-ai-toggle-label { font-size: var(--cloto-fs-sm); color: var(--cloto-text-70); }
.fbw-ai-toggle-desc { font-size: var(--cloto-fs-xs); color: var(--cloto-text-25); }
.fbw-ai-toggle-text { display: flex; flex-direction: column; gap: var(--space-1); }
.fbw-ai-toggle-list { display: flex; flex-direction: column; gap: var(--space-4); }
.fbw-ai-toggle-row  { display: flex; align-items: center; gap: var(--space-5); }

/* AI Providers */
.fbw-ai-providers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fbw-ai-provider.active {
  border-color: var(--cloto-success);
  box-shadow: 0 0 0 1px var(--cloto-success);
}
.fbw-ai-provider.active .cloto-collapsible-icon { color: var(--cloto-success); }
.fbw-ai-provider .fbw-provider-status { font-size: var(--cloto-fs-xs); }
.fbw-ai-provider.ready .fbw-provider-status {
  background: var(--cloto-teal-a10);
  color: var(--cloto-teal);
}
.fbw-ai-provider.active .fbw-provider-status {
  background: var(--cloto-success-a10);
  color: var(--cloto-success);
}
.fbw-ai-provider-fields { display: flex; flex-direction: column; gap: var(--space-5); }
.fbw-ai-provider-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fbw-ai-provider-note {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-gold);
  background: var(--cloto-gold-a8);
  border: 1px solid var(--cloto-gold-a20);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.fbw-ai-provider-link { color: var(--cloto-teal); font-size: var(--cloto-fs-xs); }
.fbw-ai-provider-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--cloto-glass-border);
}
.fbw-ai-providers-save-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.fbw-ai-providers-loading { text-align: center; padding: var(--space-12); color: var(--cloto-text-40); }

/* AI Presets */
.fbw-ai-presets-row { display: flex; align-items: center; gap: var(--space-4); }
.fbw-ai-presets-actions { display: flex; gap: var(--space-3); }

/* Scope Section */
.fbw-ai-scope-section { margin-bottom: var(--space-8); padding: var(--space-6); }
.fbw-ai-scope-row { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.fbw-ai-scope-genre { margin: var(--space-4) 0 0 0; font-size: 12px; }

/* Narrative Voice */
.fbw-ai-narrative-intro { margin-bottom: var(--space-8); }
.fbw-ai-field-spaced { margin-bottom: var(--space-8); }

/* Level Responsive */
@media (max-width: 700px) {
  .fbw-level-grid { grid-template-columns: 1fr; }
}

/* AI Spend */
.fbw-ai-spend { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.fbw-ai-spend-item { display: flex; justify-content: space-between; font-size: var(--cloto-fs-sm); color: var(--cloto-text-70); }
.fbw-ai-spend-actions { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-6); }

/* AI Pricing */
.fbw-ai-pricing-actions { margin-top: var(--space-8); }
.fbw-ai-pricing-url-row { margin-top: var(--space-6); }
.fbw-ai-pricing-url-label { font-size: 11px; color: var(--cloto-text-40); }
.fbw-ai-pricing-url-input { max-width: 600px; }

/* AI Models */
.fbw-ai-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.cloto-hint-inline {
  display: block;
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-30);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.fbw-cat-models-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.fbw-cat-models-header .cloto-hint {
  flex: 1;
  margin-bottom: 0;
}
.fbw-cat-cost {
  display: block;
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
  margin-top: var(--space-1);
  font-family: var(--cloto-font-ui);
  line-height: 1.3;
}
.fbw-cat-cost:empty { display: none; }

/* AI Prompts */
.fbw-ai-prompts-container { padding: var(--space-4) 0; }
.fbw-prompt-reset-btn {
  display: flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  padding: 0; border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--cloto-text-40);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.cloto-collapsible-header:hover .fbw-prompt-reset-btn { opacity: 1; }
.fbw-prompt-reset-btn:hover { background: var(--cloto-teal-a8); color: var(--cloto-teal); }

/* Hint text (shared) */
.cloto-hint {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-style: italic;
  margin-top: var(--space-2);
}

/* Variables list */
.fbw-ai-variables-list { display: flex; flex-direction: column; gap: var(--space-3); }
.fbw-ai-variable-item { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--cloto-fs-sm); color: var(--cloto-text-70); }
.fbw-ai-variable-chip {
  font-family: var(--cloto-font-mono);
  font-size: var(--cloto-fs-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--cloto-teal-a8);
  color: var(--cloto-teal);
  white-space: nowrap;
}

/* AI Pricing Table */
.fbw-ai-pricing-table-wrap { overflow-x: auto; }
.fbw-ai-pricing-table { width: 100%; border-collapse: collapse; font-size: var(--cloto-fs-sm); }
.fbw-ai-pricing-table th, .fbw-ai-pricing-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--cloto-glass-border);
}
.fbw-ai-pricing-table th {
  color: var(--cloto-text-40);
  font-weight: 600;
  font-size: var(--cloto-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fbw-ai-pricing-filters { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.fbw-pricing-model { color: var(--cloto-text-100); }
.fbw-pricing-input { width: 80px; padding: var(--space-2) var(--space-4); font-size: var(--cloto-fs-xs); }
.fbw-pricing-provider-badge { font-size: var(--cloto-fs-2xs); padding: 1px var(--space-3); border-radius: var(--radius-full); }
.fbw-pricing-provider-openai   { color: var(--cloto-success); background: var(--cloto-success-a8); }
.fbw-pricing-provider-claude    { color: var(--cloto-gold); background: var(--cloto-gold-a8); }
.fbw-pricing-provider-gemini    { color: var(--cloto-info); background: var(--cloto-info-a8); }
.fbw-pricing-provider-deepseek  { color: var(--cloto-teal); background: var(--cloto-teal-a8); }
.fbw-pricing-provider-grok      { color: #f97316; background: rgba(249, 115, 22, 0.08); }
.fbw-pricing-provider-other     { color: var(--cloto-text-40); background: rgba(232, 230, 225, 0.04); }

/* AI Debug */
.fbw-debug-item { display: flex; gap: var(--space-4); font-size: 12px; padding: var(--space-3) var(--space-5); background: var(--cloto-glass-bg); border: 1px solid var(--cloto-glass-border); border-radius: var(--radius-sm); }
.fbw-debug-item .lbl { color: var(--cloto-text-40); font-weight: 500; }
.fbw-debug-item .val { color: var(--cloto-text-100); font-weight: 600; }
.fbw-debug-pre { font-family: var(--cloto-font-mono); font-size: var(--cloto-fs-xs); color: var(--cloto-text-100); background: var(--cloto-void-a60); padding: var(--space-6); border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.fbw-debug-error { color: var(--cloto-danger); padding: var(--space-4); }
.fbw-debug-title { font-weight: 600; margin-bottom: var(--space-6); font-size: 14px; }
.fbw-debug-section { margin-bottom: var(--space-6); border-bottom: 1px solid var(--cloto-glass-border); padding-bottom: var(--space-4); }
.fbw-debug-section-label { font-weight: 500; font-size: 12px; color: var(--cloto-text-40); margin-bottom: var(--space-2); }
.fbw-debug-section-value { font-size: 13px; }
.fbw-wizard-debug-box { background: var(--cloto-glass-bg); border: 1px solid var(--cloto-glass-border); border-radius: var(--radius-md); padding: var(--space-6); max-height: 300px; overflow-y: auto; }
.fbw-coverage-chip { display: inline-flex; padding: 1px var(--space-3); font-size: var(--cloto-fs-2xs); border-radius: var(--radius-full); }

/* Level Config */
.fbw-levels-container { display: flex; flex-direction: column; gap: var(--space-6); }
.fbw-level-card { background: var(--cloto-glass-bg); border: 1px solid var(--cloto-glass-border); border-radius: var(--radius-lg); overflow: hidden; }
.fbw-level-card:hover { box-shadow: 0 2px 12px var(--cloto-black-a15); }
.fbw-level-header { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--cloto-teal-a4); border-bottom: 1px solid var(--cloto-glass-border); }
.fbw-level-badge { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--cloto-teal); color: var(--cloto-void); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.fbw-level-name { flex: 1; font-weight: 600; font-size: 14px; }
.fbw-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--cloto-glass-border); }
.fbw-level-section { background: var(--cloto-glass-bg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.fbw-level-section-title { font-size: 11px; font-weight: 600; color: var(--cloto-text-40); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fbw-level-section-extra { background: linear-gradient(135deg, var(--cloto-teal-a6), var(--cloto-gold-a4)); }
.fbw-level-row { display: flex; align-items: center; gap: var(--space-3); }
.fbw-level-row label { flex: 0 0 auto; min-width: 50px; font-size: 11px; color: var(--cloto-text-40); }
.fbw-level-input, .fbw-level-select { flex: 1; min-width: 0; }
.fbw-level-input[type="number"] { width: 70px; flex: 0 0 auto; }
.fbw-level-delete { flex: 0 0 auto; width: 24px; height: 24px; border: none; background: transparent; color: var(--cloto-text-40); font-size: 16px; cursor: pointer; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; }
.fbw-level-delete:hover { background: rgba(239, 68, 68, 0.1); color: var(--cloto-danger); }
.fbw-level-word-estimate { font-size: var(--cloto-fs-2xs); font-weight: 500; color: var(--cloto-teal); background: var(--cloto-teal-a10); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); white-space: nowrap; cursor: help; }
.fbw-level-word-estimate:hover { background: var(--cloto-teal-a20); }
.fbw-level-select.cloto-dropdown { font-size: 11px; padding: var(--space-2) var(--space-12) var(--space-2) var(--space-3); background-position: right 4px center; }

/* Settings Screen */
.fbw-main:has(#fbw-settings-root[style*="block"]),
.fbw-main.fbw-main--settings-open,
.cloto-content:has(#fbw-settings-root[style*="block"]),
.cloto-main.fbw-main--settings-open .cloto-content { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
#fbw-settings-root { flex: 1 1 0; min-height: 0; }
/* #fbw-settings-root display now controlled by .is-active in cloto-nav.css */
.fbw-settings-screen { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
.fbw-settings-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-10); border-bottom: 1px solid var(--cloto-glass-border); flex-shrink: 0; }
.fbw-settings-title-row { display: flex; align-items: center; gap: var(--space-5); }
.fbw-settings-title-row h1 { font-size: var(--cloto-fs-lg); margin: 0; }
.fbw-settings-icon { font-size: 18px; color: var(--cloto-gold); }
.fbw-settings-close-btn { padding: var(--space-2); color: var(--cloto-text-25); }
.fbw-settings-close-btn:hover { color: var(--cloto-text-70); }
.fbw-settings-header__title { font-size: var(--cloto-fs-lg); font-weight: 600; color: var(--cloto-text-100); }
.fbw-settings-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--cloto-text-40); cursor: pointer; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.fbw-settings-close:hover { background: var(--cloto-teal-a8); color: var(--cloto-text-70); }
.fbw-settings-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.fbw-settings-body .cloto-collapsible.open > .cloto-collapsible-body { max-height: none; overflow: visible; }
.fbw-ai-root > .cloto-tabs { padding: 0 var(--space-10); }

/* Tab content: show/hide via class instead of inline style */
.fbw-settings-tab-content { display: none; padding: var(--space-10); }
.fbw-settings-tab-content.active {
  display: block;
  animation: cloto-fadeIn var(--duration-fast) var(--ease-default);
}
@keyframes cloto-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }


/* Stats */
.fbw-stats-detail { font-size: var(--cloto-fs-xs); color: var(--cloto-text-25); }

/* ══════════════════════════════════════════════════════════════
   FEEDBACK / RADAR
   ══════════════════════════════════════════════════════════════ */

.fbw-fb-radar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8);
}

.fbw-fb-radar-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.fbw-radar-svg {
  max-width: 280px;
}

.fbw-radar-grid-ring {
  fill: none;
  stroke: var(--cloto-teal-a6);
  stroke-width: 1;
}

.fbw-radar-axis {
  stroke: var(--cloto-teal-a8);
  stroke-width: 1;
}

.fbw-radar-center {
  fill: var(--cloto-teal-a3);
}

.fbw-radar-data {
  fill: var(--cloto-teal-a12);
  stroke: var(--cloto-teal);
  stroke-width: 2;
}

.fbw-radar-axis-label {
  fill: var(--cloto-text-40);
  font-size: var(--cloto-fs-2xs);
}

.fbw-radar-labels {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
}

.fbw-radar-tooltip {
  position: absolute;
  padding: var(--space-3) var(--space-5);
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-100);
  z-index: var(--cloto-z-tooltip, 50);
  pointer-events: none;
}

.fbw-fb-radar-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-5);
  font-size: var(--cloto-fs-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--cloto-teal-a8);
  color: var(--cloto-teal);
  border: 1px solid var(--cloto-teal-a15);
}

.fbw-fb-radar-badge-sub {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
}

.fbw-fb-radar-empty {
  text-align: center;
  padding: var(--space-12);
  color: var(--cloto-text-25);
  font-style: italic;
}

.fbw-fb-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) 0;
}

.fbw-fb-diagnosis {
  padding: var(--space-6) var(--space-8);
  background: var(--cloto-gold-a4);
  border: 1px solid var(--cloto-gold-a10);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.fbw-fb-diagnosis-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fbw-fb-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fbw-fb-sec {
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.fbw-fb-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.fbw-fb-sec-title {
  font-size: var(--cloto-fs-sm);
  font-weight: 600;
  color: var(--cloto-text-100);
}

.fbw-fb-sec-actions {
  display: flex;
  gap: var(--space-3);
}

.fbw-fb-sugg {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--cloto-glass-border);
}

.fbw-fb-sugg:last-child { border-bottom: none; }

.fbw-fb-sugg-text {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  line-height: 1.6;
}

.fbw-fb-sugg-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.fbw-fb-suggs-divider {
  height: 1px;
  background: var(--cloto-glass-border);
  margin: var(--space-4) 0;
}

.fbw-fb-card-title {
  font-weight: 600;
  color: var(--cloto-text-100);
}

.fbw-fb-header-title {
  font-weight: 600;
  color: var(--cloto-text-100);
}

.fbw-fb-last-analysis {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
}

/* ══════════════════════════════════════════════════════════════
   REVISION POPUP
   ══════════════════════════════════════════════════════════════ */

  .fbw-rev-root { display: flex;
  flex-direction: column; }
  .fbw-rev-text { line-height: 1.7;
  color: var(--cloto-text-70); }
.fbw-rev-chunk { display: inline; }
.fbw-rev-equal { color: var(--cloto-text-70); }
.fbw-rev-equal-ws { color: var(--cloto-text-25); }

.fbw-rev-popup {
  position: fixed;
  z-index: var(--cloto-z-modal);
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  overflow: hidden;
}

  .fbw-rev-popup-inner { display: flex;
  flex-direction: column; }
  .fbw-rev-popup-label { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40);
  padding: var(--space-4) var(--space-7); }
  .fbw-rev-popup-text { padding: var(--space-4) var(--space-7);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  line-height: 1.6; }
.fbw-rev-popup-col { flex: 1; }
  .fbw-rev-popup-actions { display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  border-top: 1px solid var(--cloto-glass-border); }
  .fbw-rev-popup-row { display: flex;
  gap: var(--space-4); }
  .fbw-rev-popup-textarea { min-height: 80px;
  margin: 0 var(--space-7) var(--space-4); }
  .fbw-rev-popup-actions-row { display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  border-top: 1px solid var(--cloto-glass-border); }

/* ══════════════════════════════════════════════════════════════
   SCHEDA
   ══════════════════════════════════════════════════════════════ */

.fbw-scheda-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cloto-z-modal);
  background: var(--cloto-black-a60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}

.fbw-scheda-modal {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: var(--space-12);
}

.fbw-scheda-empty {
  text-align: center;
  color: var(--cloto-text-25);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   EXPORT BOOK
   ══════════════════════════════════════════════════════════════ */

.fbw-export-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fbw-export-section {
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.fbw-export-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.fbw-export-field:last-child { margin-bottom: 0; }

.fbw-export-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.fbw-export-format-btns {
  display: flex;
  gap: var(--space-4);
}

.fbw-export-format-btn {
  padding: var(--space-3) var(--space-7);
  font-size: var(--cloto-fs-sm);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--cloto-text-70);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-export-format-btn.is-active,
.fbw-export-format-btn:hover {
  color: var(--cloto-teal);
  border-color: var(--cloto-teal-a25);
  background: var(--cloto-teal-a6);
}

.fbw-export-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.fbw-export-generating {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8);
  color: var(--cloto-text-70);
}

/* Repeater */
  .fbw-repeater { display: flex;
  flex-direction: column;
  gap: var(--space-4); }
  .fbw-repeater-item { display: flex;
  gap: var(--space-4);
  align-items: flex-start; }
  .fbw-repeater-item-fields { flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2); }
  .fbw-repeater-remove { color: var(--cloto-danger);
  cursor: pointer;
  padding: var(--space-2);
  flex-shrink: 0; }
  .fbw-repeater-add { color: var(--cloto-teal);
  cursor: pointer;
  font-size: var(--cloto-fs-sm); }
.fbw-nested-repeater { margin-left: var(--space-10); }
.fbw-nested-add { font-size: var(--cloto-fs-xs); }
  .fbw-matter-content { padding: var(--space-6);
  background: var(--cloto-void-a40);
  border-radius: var(--radius-md); }

/* ══════════════════════════════════════════════════════════════
   EXTRACT MODAL (entities)
   ══════════════════════════════════════════════════════════════ */

.fbw-extract-modal {
  max-width: 600px;
}

.fbw-extract-intro {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.fbw-extract-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-16);
}

.fbw-extract-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--cloto-gold-a15);
  border-top-color: var(--cloto-gold);
  border-radius: 50%;
  animation: cloto-spin 0.8s linear infinite;
}

.fbw-extract-progress {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
}

.fbw-extract-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fbw-extract-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-7);
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.fbw-extract-item:hover {
  border-color: var(--cloto-glass-border-hover);
}

.fbw-extract-item.is-selected {
  border-color: var(--cloto-teal-a30);
  background: var(--cloto-teal-a4);
}

  .fbw-extract-item-content { flex: 1;
  min-width: 0; }
  .fbw-extract-name { font-weight: 600;
  color: var(--cloto-text-100);
  font-size: var(--cloto-fs-md); }
  .fbw-extract-role { font-size: var(--cloto-fs-xs);
  color: var(--cloto-teal); }
  .fbw-extract-desc { font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-40);
  line-height: 1.5;
  margin-top: var(--space-2); }
.fbw-extract-importance { font-size: var(--cloto-fs-xs); }
.fbw-imp-alta { color: var(--cloto-danger); }
.fbw-imp-bassa { color: var(--cloto-success); }
  .fbw-extract-hint { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-style: italic; }
  .fbw-extract-error { color: var(--cloto-danger);
  font-size: var(--cloto-fs-sm); }

/* ══════════════════════════════════════════════════════════════
   PROMPT TEMPLATE MANAGER (pm-*)
   ══════════════════════════════════════════════════════════════ */

.pm-layout {
  display: flex;
  height: 100%;
  min-height: 500px;
}

.pm-sidebar {
  flex: 0 0 240px;
  border-right: 1px solid var(--cloto-glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-sidebar-header {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--cloto-glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.pm-sidebar-list {
  flex: 1 1 auto;
  overflow-y: auto;
}

.pm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-8);
  cursor: pointer;
  border-bottom: 1px solid var(--cloto-glass-border);
  transition: background var(--duration-normal) var(--ease-spring);
}

.pm-item:hover {
  background: var(--cloto-teal-a4);
}

.pm-item.is-active {
  background: var(--cloto-teal-a8);
  border-left: 3px solid var(--cloto-teal);
}

.pm-item-name {
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-100);
  font-weight: 500;
}

.pm-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pm-main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-10);
}

.pm-edit-panel {
  padding: var(--space-8);
}

.pm-tabs {
  display: flex;
  border-bottom: 1px solid var(--cloto-glass-border);
  padding: 0 var(--space-10);
  flex-shrink: 0;
}

.pm-tab {
  padding: var(--space-5) var(--space-8);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  color: var(--cloto-text-40);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.pm-tab:hover { color: var(--cloto-text-70); }
  .pm-tab.is-active { color: var(--cloto-teal);
  border-bottom-color: var(--cloto-teal); }

.pm-editor {
  width: 100%;
  min-height: 300px;
  padding: var(--space-8);
  font-family: var(--cloto-font-mono);
  font-size: var(--cloto-fs-sm);
  line-height: 1.7;
  color: var(--cloto-text-100);
  background: var(--cloto-void-a60);
  border: 1px solid var(--cloto-teal-a12);
  border-radius: var(--radius-md);
  resize: vertical;
}

.pm-preview {
  padding: var(--space-8);
  line-height: 1.7;
  color: var(--cloto-text-70);
}

.pm-preview-section {
  margin-bottom: var(--space-8);
}

.pm-code,
.pm-code-dark,
.pm-code-light {
  font-family: var(--cloto-font-mono);
  font-size: var(--cloto-fs-sm);
  padding: var(--space-1) var(--space-3);
  background: var(--cloto-teal-a6);
  border-radius: var(--radius-xs);
  color: var(--cloto-teal);
}

.pm-footer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-10);
  border-top: 1px solid var(--cloto-glass-border);
  flex-shrink: 0;
}

/* PM Buttons */
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-7);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--cloto-text-70);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.pm-btn:hover { border-color: var(--cloto-glass-border-hover); }

.pm-btn-primary {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
  border-color: var(--cloto-teal-a25);
}

.pm-btn-secondary {
  color: var(--cloto-text-40);
}

.pm-badge {
  display: inline-flex;
  padding: 1px var(--space-3);
  font-size: var(--cloto-fs-2xs);
  border-radius: var(--radius-full);
  background: var(--cloto-teal-a8);
  color: var(--cloto-teal);
}

/* PM Variables Panel */
.pm-vars-panel {
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-6);
}

.pm-vars-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--cloto-surface-a40);
  cursor: pointer;
}

  .pm-vars-title { font-size: var(--cloto-fs-sm);
  font-weight: 600;
  color: var(--cloto-text-100); }
.pm-vars-icon { color: var(--cloto-text-40); }
  .pm-vars-hint { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-style: italic;
  padding: var(--space-4) var(--space-6); }

.pm-vars-list {
  display: flex;
  flex-direction: column;
}

.pm-var-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--cloto-glass-border);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-spring);
}

.pm-var-item:hover { background: var(--cloto-teal-a4); }
  .pm-var-name { font-family: var(--cloto-font-mono);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-teal); }
  .pm-var-desc { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25); }
  .pm-no-vars { padding: var(--space-6);
  text-align: center;
  color: var(--cloto-text-25);
  font-style: italic; }

/* PM Modal */
.pm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cloto-z-modal);
  background: var(--cloto-black-a60);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-modal-box {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.pm-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pm-modal-close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--cloto-text-40);
  cursor: pointer;
  font-size: 18px;
}

.pm-placeholder {
  text-align: center;
  padding: var(--space-20);
  color: var(--cloto-text-25);
  font-style: italic;
}

.pm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  color: var(--cloto-text-40);
}

.pm-error {
  color: var(--cloto-danger);
  padding: var(--space-8);
}

/* PM Test Panel */
.pm-test-panel {
  padding: var(--space-8);
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
}

.pm-test-result {
  padding: var(--space-6);
  background: var(--cloto-void-a60);
  border-radius: var(--radius-md);
  font-family: var(--cloto-font-mono);
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-70);
  white-space: pre-wrap;
  overflow-x: auto;
  margin-top: var(--space-4);
}

/* ══════════════════════════════════════════════════════════════
   MERGE DIALOG (zen)
   ══════════════════════════════════════════════════════════════ */

.fbw-merge-dialog {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 500px;
  width: 100%;
}

  .fbw-merge-title { font-size: var(--cloto-fs-lg);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin-bottom: var(--space-6); }
  .fbw-merge-info { font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-70);
  margin-bottom: var(--space-8); }
  .fbw-merge-warning { color: var(--cloto-warning);
  font-size: var(--cloto-fs-sm);
  margin-bottom: var(--space-6); }
  .fbw-merge-scenes { display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8); }
  .fbw-merge-scene { padding: var(--space-4) var(--space-6);
  background: var(--cloto-surface-a40);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  font-size: var(--cloto-fs-sm);
  color: var(--cloto-text-100); }
.fbw-merge-arrow { color: var(--cloto-text-25); }
  .fbw-merge-label { font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-40); }

/* ══════════════════════════════════════════════════════════════
   CLOTO WRITER — Scene writing module (cw- prefix)
   ══════════════════════════════════════════════════════════════ */

/* ── Writer inner (content zone) ── */
.fbw-ws-inner--writer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

/* ── Mode bar ── */
.cw-mode-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Inherits pattern from .wiz-scope-chip: glass border, pill shape, font-ui */
.cw-mode-chip {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--cloto-glass-border);
  background: transparent;
  color: var(--cloto-text-40);
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.cw-mode-chip:hover {
  border-color: var(--cloto-glass-border-active);
  color: var(--cloto-text-70);
}

/* Active chip uses gold (AI accent) — matches .wiz-scope-chip--active pattern with gold */
.cw-mode-chip--active {
  border-color: var(--cloto-gold);
  color: var(--cloto-gold);
  background: var(--cloto-gold-a10);
}

.cw-budget-hint {
  margin-left: auto;
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
}

/* ── Synopsis guide ── */
.cw-synopsis-guide {
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  background: var(--cloto-glass-bg);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-spring);
}

.cw-synopsis-guide:hover {
  border-color: var(--cloto-glass-border-hover);
}

.cw-synopsis-toggle {
  padding: var(--space-3) var(--space-4);
  font-size: var(--cloto-fs-sm);
  font-family: var(--cloto-font-ui);
  color: var(--cloto-text-40);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-spring);
}

.cw-synopsis-toggle:hover {
  color: var(--cloto-text-70);
}

.cw-synopsis-text {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--cloto-fs-sm);
  font-family: var(--cloto-font-brand);
  color: var(--cloto-text-70);
  line-height: 1.6;
  max-height: 30vh;
  overflow-y: auto;
}

/* ── Editor (chat zone) ── */
.cw-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-6);
}

/* Drafting textarea: author writes prose → brand font */
.cw-editor-textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  padding: var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--cloto-text-100);
  font-family: var(--cloto-font-brand);
  font-size: var(--cloto-fs-lg);
  line-height: 1.8;
  resize: none;
  overflow: hidden;
  transition: background var(--duration-normal) var(--ease-spring);
}

/* Reviewing textarea: editing AI prose → brand font, subtle surface */
.cw-review-textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  padding: var(--space-6);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-lg);
  background: var(--cloto-surface);
  color: var(--cloto-text-100);
  font-family: var(--cloto-font-brand);
  font-size: var(--cloto-fs-lg);
  line-height: 1.8;
  resize: none;
  overflow-y: auto;
  transition: border-color var(--duration-normal) var(--ease-spring),
              background var(--duration-normal) var(--ease-spring);
}

.cw-editor-textarea:focus {
  outline: none;
  background: var(--cloto-surface);
}

.cw-review-textarea:focus {
  outline: none;
  border-color: var(--cloto-glass-border-hover);
  background: var(--cloto-surface-alt);
}

.cw-editor-textarea::placeholder {
  color: var(--cloto-text-25);
  font-style: italic;
}

/* ── Editor bar ── */
.cw-editor-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--cloto-glass-border);
  margin-top: var(--space-3);
}

.cw-word-counter {
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-mono);
}

.cw-review-hint {
  flex: 1;
  text-align: center;
  font-size: var(--cloto-fs-xs);
  color: var(--cloto-text-25);
  font-family: var(--cloto-font-ui);
  font-style: italic;
}

/* Submit button: gold AI accent — matches --fbw-ai-* tokens */
.cw-submit-btn {
  margin-left: auto;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid var(--cloto-gold-a25);
  background: var(--cloto-gold-a10);
  color: var(--cloto-gold);
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.cw-submit-btn:hover:not(:disabled) {
  background: var(--cloto-gold-a18);
  border-color: var(--cloto-gold);
  box-shadow: var(--shadow-glow-gold);
}

.cw-submit-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Loading state ── */
.cw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 100%;
  min-height: 200px;
}

/* Loading text matches .wiz-bubble--loading pattern: brand italic, gold */
.cw-loading-text {
  font-family: var(--cloto-font-brand);
  font-size: var(--cloto-fs-lg);
  color: var(--cloto-gold);
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ── Review editor ── */
.cw-review-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-6);
}

/* References panel (synopsis + author draft, collapsed by default) */
.cw-review-refs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.cw-review-refs .cw-author-ref {
  flex: 1 1 0;
  margin-bottom: 0;
}

/* Collapsible reference panels — use glass tokens */
.cw-author-ref {
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md);
  background: var(--cloto-glass-bg);
  margin-bottom: var(--space-4);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-spring);
}

.cw-author-ref:hover {
  border-color: var(--cloto-glass-border-hover);
}

.cw-author-ref-toggle {
  padding: var(--space-3) var(--space-4);
  font-size: var(--cloto-fs-sm);
  font-family: var(--cloto-font-ui);
  color: var(--cloto-text-40);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-spring);
}

.cw-author-ref-toggle:hover {
  color: var(--cloto-text-70);
}

.cw-author-ref-text {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--cloto-fs-sm);
  font-family: var(--cloto-font-brand);
  color: var(--cloto-text-40);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Gap detection note (collapsible, amber accent) ── */
details.cw-gap-note {
  border-left-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
}
.cw-gap-list {
  padding: var(--space-2) var(--space-4) var(--space-4);
  padding-left: calc(var(--space-4) + var(--space-5));
  margin: 0;
  font-size: var(--cloto-fs-sm);
  font-family: var(--cloto-font-brand);
  color: var(--cloto-text-60);
  line-height: 1.5;
}
.cw-gap-list strong {
  color: var(--cloto-text-80);
}
.cw-gap-list li {
  margin-bottom: var(--space-1);
}

/* ── Badges — pattern from .wiz-phase-pill ── */
.cw-badge {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--cloto-fs-xs);
  font-family: var(--cloto-font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid transparent;
}

.cw-badge--review {
  background: var(--cloto-warning-a8);
  color: var(--cloto-warning);
  border-color: var(--cloto-warning-a20);
}
.fbw-v2-breadcrumb .cw-badge--review {
  margin-left: var(--space-3);
  vertical-align: middle;
}

.cw-badge--done {
  background: var(--cloto-success-a8);
  color: var(--cloto-success);
  border-color: var(--cloto-success-a20);
}

/* ── Completed state ── */
.cw-final-text {
  padding: var(--space-8) 0 var(--space-4);
  font-family: var(--cloto-font-brand);
  font-size: var(--cloto-fs-xl);
  color: var(--cloto-text-100);
  line-height: 1.8;
}

.cw-final-text p {
  margin-bottom: var(--space-6);
  text-indent: 1.5em;
}

.cw-final-text p:first-child {
  text-indent: 0;
}

.cw-completed-actions {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--cloto-glass-border);
}

.cw-edit-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--cloto-glass-border);
  background: transparent;
  color: var(--cloto-text-40);
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}

.cw-edit-btn:hover {
  border-color: var(--cloto-glass-border-hover);
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a4);
}

/* ── Writer header ── */
.fbw-ws-inner--writer .fbw-ws-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.fbw-ws-inner--writer .fbw-ws-header .cw-badge {
  flex-shrink: 0;
}

/* ── Mobile: stack reference panels vertically ── */
@media (max-width: 768px) {
  .cw-review-refs {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════
   QA INSPECTOR
   ══════════════════════════════════════════════════════════════ */

/* Floating FAB — bottom-right, always visible for admin */
.qa-inspector-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--cloto-z-drawer);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cloto-glass-border-hover);
  background: var(--cloto-surface);
  color: var(--cloto-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-spring);
}
.qa-inspector-fab:hover {
  background: var(--cloto-teal-a8);
  transform: scale(1.1);
}

/* Topbar button */
.qa-inspector-btn {
  position: relative;
}
.qa-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--cloto-teal);
  color: var(--cloto-bg);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Modal override: 95vw x 90vh */
.qa-inspector-modal {
  max-width: 95vw !important;
  max-height: 90vh !important;
  width: 95vw;
}

/* Status chip */
.qa-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-spring);
}
.qa-status-on {
  background: var(--cloto-success-a12, rgba(46,160,67,.12));
  color: var(--cloto-success);
}
.qa-status-off {
  background: var(--cloto-surface-a15, rgba(255,255,255,.08));
  color: var(--cloto-text-40);
}
.qa-status-chip:hover {
  opacity: 0.8;
}

/* Fast Forward dropdown */
.qa-ff-wrap {
  position: relative;
}

.qa-ff-btn {
  font-size: 16px;
  line-height: 1;
}

.qa-ff-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 999;
  min-width: 180px;
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
}

.qa-ff-menu__title {
  padding: var(--space-3) var(--space-6);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cloto-text-40);
  border-bottom: 1px solid var(--cloto-glass-border);
  margin-bottom: var(--space-1);
}

.qa-ff-menu button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: none;
  border: none;
  color: var(--cloto-text-70);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.qa-ff-menu button:hover {
  background: var(--cloto-teal-a6);
  color: var(--cloto-text-90);
}

/* Body */
.qa-inspector-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-8) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Empty state */
.qa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--cloto-text-40);
  text-align: center;
  gap: var(--space-8);
}

/* ── Timeline ── */
.qa-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-4) 0;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--cloto-glass-border);
  padding-bottom: var(--space-8);
}
.qa-timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 70px;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
  position: relative;
}
.qa-timeline-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: var(--cloto-glass-border);
  z-index: 0;
}
.qa-timeline-node:hover {
  background: var(--cloto-surface-a15, rgba(255,255,255,.06));
}
.qa-timeline-node--active {
  background: var(--cloto-teal-a6, rgba(45,212,191,.06));
}
.qa-timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
  transition: all var(--duration-normal);
}
.qa-timeline-dot--pass {
  background: var(--cloto-success-a12, rgba(46,160,67,.15));
  color: var(--cloto-success);
  border: 2px solid var(--cloto-success);
}
.qa-timeline-dot--warn {
  background: var(--cloto-warning-a12, rgba(210,153,34,.15));
  color: var(--cloto-warning);
  border: 2px solid var(--cloto-warning);
}
.qa-timeline-dot--fail {
  background: var(--cloto-danger-a12, rgba(248,81,73,.15));
  color: var(--cloto-danger);
  border: 2px solid var(--cloto-danger);
}
.qa-timeline-dot--empty {
  background: var(--cloto-surface-a15, rgba(255,255,255,.06));
  color: var(--cloto-text-30);
  border: 2px dashed var(--cloto-text-20);
}
.qa-timeline-label {
  font-size: 10px;
  color: var(--cloto-text-50);
  text-align: center;
  line-height: 1.3;
}
.qa-timeline-count {
  font-size: 9px;
  color: var(--cloto-text-30);
  background: var(--cloto-surface-a15);
  border-radius: 8px;
  padding: 0 5px;
}

/* ── Detail Panel ── */
.qa-detail {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.qa-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
}
.qa-detail-ts {
  font-size: 12px;
  color: var(--cloto-text-30);
  font-family: var(--cloto-font-mono, monospace);
}

/* Tabs */
.qa-detail-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--cloto-glass-border);
  margin-bottom: var(--space-6);
}
.qa-tab {
  padding: var(--space-3) var(--space-6);
  border: none;
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast);
}
.qa-tab:hover {
  color: var(--cloto-text-70);
}
.qa-tab--active {
  color: var(--cloto-teal);
  border-bottom-color: var(--cloto-teal);
}
.qa-detail-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ── Checks ── */
.qa-checks-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.qa-checks-badge {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.qa-checks-badge--pass {
  background: var(--cloto-success-a12, rgba(46,160,67,.12));
  color: var(--cloto-success);
}
.qa-checks-badge--warn {
  background: var(--cloto-warning-a12, rgba(210,153,34,.12));
  color: var(--cloto-warning);
}
.qa-checks-badge--fail {
  background: var(--cloto-danger-a12, rgba(248,81,73,.12));
  color: var(--cloto-danger);
}
.qa-checks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.qa-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.qa-check-item--fail {
  background: var(--cloto-danger-a6, rgba(248,81,73,.06));
}
.qa-check-item--warn {
  background: var(--cloto-warning-a6, rgba(210,153,34,.06));
}
.qa-check-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.qa-check-id {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  color: var(--cloto-text-40);
  min-width: 120px;
}
.qa-check-msg {
  color: var(--cloto-text-70);
}

/* ── Data Grid ── */
.qa-data-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.qa-data-item {
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qa-data-key {
  padding: var(--space-2) var(--space-4);
  background: var(--cloto-surface-a15);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--cloto-font-mono, monospace);
  color: var(--cloto-teal);
}
.qa-data-val {
  padding: var(--space-3) var(--space-4);
  max-height: 200px;
  overflow-y: auto;
}
.qa-data-val--long {
  max-height: 300px;
}
.qa-data-val pre {
  margin: 0;
  font-family: var(--cloto-font-mono, monospace);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cloto-text-60);
}

/* ── Diff ── */
.qa-diff {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.qa-diff-item {
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qa-diff-key {
  padding: var(--space-2) var(--space-4);
  background: var(--cloto-surface-a15);
  font-size: 12px;
  font-family: var(--cloto-font-mono, monospace);
}
.qa-diff-badge {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.qa-diff-badge--added { background: var(--cloto-success-a12); color: var(--cloto-success); }
.qa-diff-badge--removed { background: var(--cloto-danger-a12); color: var(--cloto-danger); }
.qa-diff-badge--changed { background: var(--cloto-warning-a12); color: var(--cloto-warning); }
.qa-diff-before, .qa-diff-after {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
}
.qa-diff-before {
  background: var(--cloto-danger-a6, rgba(248,81,73,.04));
}
.qa-diff-after {
  background: var(--cloto-success-a6, rgba(46,160,67,.04));
}
.qa-diff-before pre, .qa-diff-after pre {
  margin: 0;
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Raw ── */
.qa-raw {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
  background: var(--cloto-surface-a15);
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  color: var(--cloto-text-60);
}

/* ── Prompt Viewer ── */
.qa-prompt-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.qa-prompt-block, .qa-prompt-section pre {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cloto-text-60);
  margin: 0;
}
.qa-prompt-section {
  padding: var(--space-3) var(--space-6);
  background: var(--cloto-surface-a15);
  border-radius: var(--radius-sm);
}
.qa-prompt-kw {
  font-weight: 700;
  color: var(--cloto-teal);
}
.qa-prompt-meta {
  font-size: 11px;
  color: var(--cloto-text-30);
  margin-top: var(--space-4);
  font-family: var(--cloto-font-mono, monospace);
}

/* ── Thread Chart ── */
.qa-thread-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.qa-thread-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--cloto-text-60);
  margin-bottom: var(--space-2);
}
.qa-thread-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.qa-thread-name {
  min-width: 120px;
  max-width: 180px;
  font-size: 12px;
  color: var(--cloto-text-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-thread-bar-wrap {
  flex: 1;
  height: 18px;
  background: var(--cloto-surface-a15);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qa-thread-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
  min-width: 2px;
}
.qa-thread-count {
  min-width: 28px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--cloto-font-mono, monospace);
  color: var(--cloto-text-50);
}
.qa-thread-coverage {
  font-size: 12px;
  color: var(--cloto-text-40);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cloto-glass-border);
}

/* ── QA Inspector: Q&A Tab ── */
.qa-qa-list { display: flex; flex-direction: column; gap: var(--space-4); }
.qa-qa-count { font-size: 12px; color: var(--cloto-text-40); margin-bottom: var(--space-2); }
.qa-qa-pair {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--cloto-surface-a8);
  border-left: 3px solid var(--cloto-teal);
}
.qa-qa-question {
  font-size: 13px;
  color: var(--cloto-teal);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}
.qa-qa-answer {
  font-size: 13px;
  color: var(--cloto-text-80);
  line-height: 1.5;
}
.qa-qa-threads {
  font-size: 11px;
  color: var(--cloto-text-40);
  margin-top: var(--space-2);
  font-style: italic;
}

/* Card summary in Data tab (CP-3/4/5) */
.qa-card-summary {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--cloto-surface-a8);
  border-left: 3px solid var(--cloto-gold);
  margin-bottom: var(--space-4);
}
.qa-card-summary__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cloto-gold);
  margin-bottom: var(--space-2);
}
.qa-card-summary__meta {
  font-size: 12px;
  color: var(--cloto-text-40);
  margin-bottom: var(--space-2);
  font-family: var(--cloto-font-mono);
}
.qa-card-summary__synopsis {
  font-size: 13px;
  color: var(--cloto-text-80);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.qa-card-summary__entities {
  font-size: 12px;
  color: var(--cloto-text-60);
}
.qa-card-summary__label {
  font-weight: 600;
  color: var(--cloto-text-60);
}

/* ── View Tabs (Summary / Timeline) ── */
.qa-view-tabs {
  display: flex;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--cloto-glass-border);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.qa-view-tab {
  padding: var(--space-2) var(--space-8);
  border: none;
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}
.qa-view-tab:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-surface-a15);
}
.qa-view-tab--active {
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8);
}

/* ── Summary View ── */
.qa-summary-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.qa-summary-toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-shrink: 0;
}
.qa-summary-content {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cloto-text-70);
}
.qa-summary-content p {
  margin: 0 0 var(--space-3) 0;
}
.qa-summary-h {
  color: var(--cloto-text-90);
  margin: var(--space-6) 0 var(--space-3) 0;
}
.qa-summary-content h1.qa-summary-h { font-size: 18px; }
.qa-summary-content h2.qa-summary-h { font-size: 15px; color: var(--cloto-teal); }
.qa-summary-content h3.qa-summary-h { font-size: 13px; color: var(--cloto-gold); }
.qa-summary-content h4.qa-summary-h { font-size: 12px; color: var(--cloto-text-60); }
.qa-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: var(--space-4);
  font-family: var(--cloto-font-mono, monospace);
}
.qa-summary-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--cloto-surface-a15);
  color: var(--cloto-teal);
  font-weight: 600;
  border-bottom: 1px solid var(--cloto-glass-border);
}
.qa-summary-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--cloto-glass-border-subtle, var(--cloto-glass-border));
  color: var(--cloto-text-60);
}
.qa-summary-list {
  margin: 0 0 var(--space-3) 0;
  padding-left: var(--space-8);
}
.qa-summary-list li {
  margin-bottom: var(--space-1);
}
.qa-summary-bq {
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-3) var(--space-6);
  border-left: 3px solid var(--cloto-teal-a8);
  background: var(--cloto-surface-a8);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--cloto-text-50);
  font-style: italic;
}
.qa-summary-code {
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-4);
  background: var(--cloto-surface-a15);
  border-radius: var(--radius-sm);
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cloto-text-60);
  overflow-x: auto;
}
.qa-summary-inline-code {
  padding: 1px 4px;
  background: var(--cloto-surface-a15);
  border-radius: 3px;
  font-family: var(--cloto-font-mono, monospace);
  font-size: 0.9em;
}
.qa-summary-hr {
  border: none;
  border-top: 1px solid var(--cloto-glass-border);
  margin: var(--space-6) 0;
}

/* ── API Log ── */
.qa-api-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.qa-api-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  font-size: 12px;
  color: var(--cloto-text-50);
  border-bottom: 1px solid var(--cloto-glass-border);
  margin-bottom: var(--space-2);
}
.qa-api-entry {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--cloto-surface-a15, rgba(255,255,255,.04));
}
.qa-api-entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
  flex-wrap: wrap;
}
.qa-api-time {
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  color: var(--cloto-text-30);
}
.qa-api-card {
  font-size: 11px;
  color: var(--cloto-text-40);
  background: var(--cloto-surface-a15);
  padding: 0 4px;
  border-radius: 3px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qa-api-phase {
  font-size: 10px;
  color: var(--cloto-teal);
  background: var(--cloto-teal-a8, rgba(45,212,191,.08));
  padding: 0 5px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.qa-api-duration {
  margin-left: auto;
  font-family: var(--cloto-font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--cloto-text-50);
}
.qa-api-detail {
  margin-top: var(--space-2);
}
.qa-api-detail summary {
  font-size: 11px;
  color: var(--cloto-text-30);
  cursor: pointer;
}
.qa-api-pre {
  margin: var(--space-2) 0 0;
  font-family: var(--cloto-font-mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--cloto-text-50);
  max-height: 200px;
  overflow-y: auto;
  background: var(--cloto-surface-a15);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
.qa-api-pre--err {
  color: var(--cloto-danger);
}

/* ── Live Indicator ── */
.qa-live-indicator {
  display: none;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--cloto-gold);
  background: var(--cloto-surface);
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--cloto-gold);
  white-space: nowrap;
  animation: qa-pulse 1.5s infinite;
}
@keyframes qa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Rewind Button ── */
.qa-rewind-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--cloto-warning);
  border-radius: var(--radius-sm);
  background: var(--cloto-warning-a12, rgba(210,153,34,.12));
  color: var(--cloto-warning);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast);
}
.qa-rewind-btn:hover {
  background: var(--cloto-warning-a12, rgba(210,153,34,.2));
}

/* Steps (micro-snapshots) view */
.qa-steps-view { display: flex; flex-direction: column; gap: var(--space-3); }
.qa-steps-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: 13px; color: var(--cloto-text-60);
}
.qa-steps-list { display: flex; flex-direction: column; gap: 2px; }
.qa-steps-entry {
  background: var(--cloto-surface-2, rgba(255,255,255,.04));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--cloto-text-20);
  transition: border-color var(--duration-fast);
}
.qa-steps-entry:hover { border-left-color: var(--cloto-teal); }
.qa-steps-entry-main {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; font-size: 12px;
}
.qa-steps-time { color: var(--cloto-text-40); font-variant-numeric: tabular-nums; min-width: 56px; }
.qa-steps-idx { font-weight: 600; color: var(--cloto-gold); min-width: 34px; }
.qa-steps-label { flex: 1; color: var(--cloto-text-80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-steps-phase {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: var(--cloto-purple-a12, rgba(139,92,246,.12));
  color: var(--cloto-purple);
}
.qa-steps-preview {
  padding: 0 var(--space-3) var(--space-2) calc(56px + 34px + var(--space-2) * 3 + var(--space-3));
  font-size: 11px; color: var(--cloto-text-40);
  font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa-steps-detail {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--cloto-text-10);
}
.qa-steps-detail details { margin-bottom: var(--space-2); }
.qa-steps-detail summary {
  font-size: 11px; font-weight: 600; color: var(--cloto-text-60);
  cursor: pointer; margin-bottom: var(--space-1);
}
.qa-rewind-btn--micro {
  padding: 2px 6px; font-size: 11px; min-width: auto;
  border: 1px solid var(--cloto-warning);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cloto-warning);
  cursor: pointer;
  opacity: 0; transition: opacity var(--duration-fast);
}
.qa-steps-entry:hover .qa-rewind-btn--micro { opacity: 1; }
.qa-micro-diff { font-size: 11px; }
.qa-micro-diff-item {
  padding: 2px 0;
  border-bottom: 1px solid var(--cloto-text-06);
}

/* ── QA Inspector: Costi Tab ────────────────────────────────── */
.qa-cost-badge {
  font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 8px;
  background: var(--cloto-success-a12, rgba(34,197,94,.12));
  color: var(--cloto-success);
  margin-left: 4px;
}
.qa-cost-tab { padding: var(--space-3); }
.qa-cost-summary {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.qa-cost-card {
  flex: 1 1 100px; min-width: 90px;
  padding: var(--space-3);
  background: var(--cloto-surface-2, var(--cloto-text-06));
  border-radius: var(--radius-md, 8px);
  text-align: center;
}
.qa-cost-card--estimate {
  flex: 1 1 200px;
  border: 1px dashed var(--cloto-gold-40, rgba(234,179,8,.4));
}
.qa-cost-card__value {
  font-size: 20px; font-weight: 700;
  color: var(--cloto-text);
  font-variant-numeric: tabular-nums;
}
.qa-cost-card__label {
  font-size: 11px; color: var(--cloto-text-40);
  margin-top: 2px; text-transform: uppercase; letter-spacing: .5px;
}
.qa-cost-card__sub {
  font-size: 11px; color: var(--cloto-text-40);
  margin-top: 4px;
}
.qa-cost-card__warn {
  font-size: 10px; color: var(--cloto-warning);
  margin-top: 4px; font-style: italic;
}
.qa-cost-section { margin-bottom: var(--space-4); }
.qa-cost-section__title {
  font-size: 12px; font-weight: 600;
  color: var(--cloto-text-60);
  margin-bottom: var(--space-2);
  text-transform: uppercase; letter-spacing: .5px;
}
.qa-cost-breakdown { display: flex; flex-direction: column; gap: 6px; }
.qa-cost-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.qa-cost-row__name {
  width: 120px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cloto-text-60);
}
.qa-cost-row__bar-wrap {
  flex: 1; height: 8px;
  background: var(--cloto-text-06);
  border-radius: 4px; overflow: hidden;
}
.qa-cost-row__bar {
  height: 100%; border-radius: 4px;
  background: var(--cloto-teal);
  transition: width var(--duration-normal, .2s);
}
.qa-cost-row__val {
  width: 60px; text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--cloto-text);
}
.qa-cost-row__calls {
  width: 52px; text-align: right;
  color: var(--cloto-text-40); font-size: 11px;
}
.qa-cost-log { max-height: 300px; overflow-y: auto; }
.qa-cost-log__row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--cloto-text-06);
  font-size: 11px;
}
.qa-cost-log__time { width: 56px; color: var(--cloto-text-40); flex-shrink: 0; }
.qa-cost-log__ep {
  width: 110px; flex-shrink: 0;
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qa-cost-log__card {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cloto-text-40);
}
.qa-cost-log__tokens {
  width: 70px; text-align: right; color: var(--cloto-text-40);
  font-variant-numeric: tabular-nums;
}
.qa-cost-log__cost {
  width: 56px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── QA Inspector: API Log enhancements ────────────────────── */
.qa-api-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.qa-api-header-actions { display: flex; gap: 6px; }
.qa-api-dl-btn {
  background: none; border: 1px solid var(--cloto-text-10);
  border-radius: var(--radius-sm, 4px);
  color: var(--cloto-text-40); cursor: pointer;
  font-size: 12px; padding: 1px 5px; line-height: 1;
  opacity: 0; transition: opacity var(--duration-fast, .15s);
}
.qa-api-entry:hover .qa-api-dl-btn { opacity: 1; }
.qa-api-dl-btn:hover { color: var(--cloto-teal); border-color: var(--cloto-teal); }
.qa-api-pre--prompt {
  border-left: 3px solid var(--cloto-purple);
  background: var(--cloto-purple-a8, rgba(139,92,246,.06));
}

/* ══════════════════════════════════════════════════════════════
   AI SETTINGS — Per-prompt model overrides
   ══════════════════════════════════════════════════════════════ */
/* ── Pipeline IA ── */
.fbw-pipeline { display: flex; flex-direction: column; gap: 16px; }
.fbw-pipeline-phase { }
.fbw-pipeline-phase-header {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 0 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--cloto-teal-a8);
}
.fbw-pipeline-phase-name {
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cloto-teal);
}
.fbw-pipeline-phase-label {
  font-size: var(--font-xs); color: var(--cloto-text-40);
}
.fbw-pipeline-step {
  display: flex; flex-direction: column;
  padding: 6px 8px; margin: 2px 0;
  border-radius: 6px; cursor: pointer;
  transition: background 0.15s;
}
.fbw-pipeline-step:hover { background: var(--cloto-surface-hover, rgba(255,255,255,0.03)); }
.fbw-pipeline-step.expanded { background: var(--cloto-surface-hover, rgba(255,255,255,0.03)); }
.fbw-pipeline-step-main {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.fbw-pipeline-step-info {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.fbw-pipeline-step-name { font-size: var(--font-sm); white-space: nowrap; }
.fbw-pipeline-step-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.fbw-pipeline-step-badge.fbw-cat-scrittura  { background: rgba(255,180,50,0.15); color: #e6a020; }
.fbw-pipeline-step-badge.fbw-cat-espansione { background: rgba(100,200,255,0.15); color: #60b8e8; }
.fbw-pipeline-step-badge.fbw-cat-analisi    { background: rgba(180,130,255,0.15); color: #b080f0; }
.fbw-pipeline-step-badge.fbw-cat-micro_task { background: rgba(130,230,130,0.15); color: #70c870; }
.fbw-pipeline-step-calls {
  font-size: var(--font-xs); color: var(--cloto-text-40);
  white-space: nowrap;
}
.fbw-pipeline-step-model {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.fbw-pipeline-step-model-name {
  font-size: var(--font-xs); color: var(--cloto-text-60);
  font-family: var(--font-mono, monospace);
}
.fbw-pipeline-step-model-name.is-override {
  color: var(--cloto-teal); font-weight: 600;
}
.fbw-pipeline-step-cost {
  font-size: 10px; color: var(--cloto-text-40); white-space: nowrap;
}
.fbw-pipeline-step-time {
  font-size: 10px; color: var(--cloto-text-30); white-space: nowrap;
}
.fbw-pipeline-step-override {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--cloto-glass-border);
}
.fbw-pipeline-step.has-override .fbw-pipeline-step-name::after {
  content: '\u2022'; color: var(--cloto-teal); margin-left: 4px;
}

/* ── Cost Preview Cards ── */
.fbw-cost-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.fbw-cost-card {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border);
  border-radius: 8px; padding: 12px; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fbw-cost-card:hover { border-color: var(--cloto-teal-a20); }
.fbw-cost-card.expanded { border-color: var(--cloto-teal); }
.fbw-cost-card-header { margin-bottom: 8px; }
.fbw-cost-card-title { font-size: var(--font-sm); font-weight: 600; }
.fbw-cost-card-body { display: flex; align-items: baseline; gap: 8px; }
.fbw-cost-card-total {
  font-size: 1.4em; font-weight: 700; color: var(--cloto-teal);
}
.fbw-cost-card-time { font-size: var(--font-xs); color: var(--cloto-text-40); }
.fbw-cost-card-breakdown { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--cloto-glass-border); }
.fbw-cost-breakdown-row {
  display: flex; justify-content: space-between;
  font-size: var(--font-xs); color: var(--cloto-text-50);
  padding: 2px 0;
}

/* ── Prompt Pipeline Tab ── */
.fbw-prompt-pipeline-loading {
  text-align: center; padding: 20px; color: var(--cloto-text-40);
}
.fbw-prompt-phase { margin-bottom: 16px; }
.fbw-prompt-phase-header {
  font-size: var(--font-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cloto-teal); opacity: 0.7;
  padding: 8px 0 4px;
  border-top: 1px solid var(--cloto-teal-a8);
}
.fbw-prompt-phase:first-child .fbw-prompt-phase-header { border-top: none; }
.fbw-prompt-meta {
  display: flex; gap: 16px; font-size: var(--font-xs);
  color: var(--cloto-text-50); margin-bottom: 8px;
}
.fbw-prompt-variables {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.fbw-prompt-var {
  font-size: 11px; color: var(--cloto-text-50);
  background: var(--cloto-surface-hover, rgba(255,255,255,0.03));
  padding: 2px 6px; border-radius: 4px;
}
.fbw-prompt-var code { color: var(--cloto-teal); font-size: 11px; }
.fbw-prompt-actions {
  display: flex; gap: 8px; margin-top: 8px;
}
.fbw-prompt-template-textarea {
  font-family: var(--font-mono, monospace); font-size: 12px;
  min-height: 120px;
}
.fbw-badge-custom {
  background: var(--cloto-teal-a8) !important;
  color: var(--cloto-teal) !important;
}
.cloto-collapsible.is-inline .cloto-collapsible-body { opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════
   EXPORT MODAL (MVP)
   ══════════════════════════════════════════════════════════════ */

.cloto-export-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cloto-z-modal, 9000);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal, 0.2s) ease;
}
.cloto-export-overlay.is-open {
  opacity: 1;
}

.cloto-export-modal {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  width: 380px;
  max-width: 90vw;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform var(--duration-normal, 0.2s) var(--ease-spring, ease);
}
.cloto-export-overlay.is-open .cloto-export-modal {
  transform: translateY(0);
}

.cloto-export-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6, 16px) var(--space-8, 20px);
  border-bottom: 1px solid var(--cloto-glass-border);
}

.cloto-export-title {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-md, 14px);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloto-export-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast, 0.1s) ease;
}
.cloto-export-close:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a6);
}

.cloto-export-body {
  padding: var(--space-4, 12px) var(--space-6, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 6px);
}

.cloto-export-format {
  display: flex;
  align-items: center;
  gap: var(--space-5, 14px);
  padding: var(--space-5, 14px) var(--space-6, 16px);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast, 0.1s) ease;
  width: 100%;
}
.cloto-export-format:hover:not(:disabled) {
  background: var(--cloto-teal-a6);
  border-color: var(--cloto-teal-a25);
}
.cloto-export-format:active:not(:disabled) {
  transform: scale(0.98);
}

.cloto-export-format.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cloto-export-format-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.cloto-export-format-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cloto-export-format-label {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm, 13px);
  font-weight: 600;
  color: var(--cloto-text-100);
}

.cloto-export-format-desc {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-xs, 11px);
  color: var(--cloto-text-40);
}

/* Light mode */
body.fd-light .cloto-export-modal {
  background: var(--cloto-surface);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK MODAL (post-export)
   ══════════════════════════════════════════════════════════════ */

.cloto-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cloto-z-modal, 9000);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cloto-black-a60, rgba(0,0,0,0.6));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-normal, 0.2s) ease;
}
.cloto-feedback-overlay.is-open {
  opacity: 1;
}

.cloto-feedback-modal {
  background: var(--cloto-surface);
  border: 1px solid var(--cloto-glass-border-hover);
  border-radius: var(--radius-xl, 16px);
  width: 92%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform var(--duration-normal, 0.2s) ease;
}
.cloto-feedback-overlay.is-open .cloto-feedback-modal {
  transform: translateY(0);
}

.cloto-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6, 16px) var(--space-8, 20px);
  border-bottom: 1px solid var(--cloto-glass-border);
}

.cloto-feedback-title {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-md, 14px);
  font-weight: 600;
  color: var(--cloto-text-100);
  margin: 0;
}

.cloto-feedback-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cloto-text-40);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast, 0.1s) ease;
}
.cloto-feedback-close:hover {
  color: var(--cloto-text-70);
  background: var(--cloto-teal-a6);
}

.cloto-feedback-body {
  padding: var(--space-6, 16px) var(--space-8, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 12px);
}

.cloto-feedback-question {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm, 13px);
  color: var(--cloto-text-70);
  margin: 0;
  text-align: center;
}

.cloto-feedback-ratings {
  display: flex;
  justify-content: center;
  gap: var(--space-4, 12px);
}

.cloto-feedback-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3, 8px) var(--space-5, 14px);
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast, 0.1s) ease;
}
.cloto-feedback-rating:hover {
  background: var(--cloto-teal-a6);
  border-color: var(--cloto-teal-a25);
}
.cloto-feedback-rating.is-selected {
  background: var(--cloto-teal-a12, rgba(0,200,180,0.12));
  border-color: var(--cloto-teal, #00c8b4);
}

.cloto-feedback-rating-icon {
  font-size: 24px;
  line-height: 1;
}

.cloto-feedback-rating-label {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-xs, 11px);
  color: var(--cloto-text-70);
}

.cloto-feedback-comment {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm, 13px);
  color: var(--cloto-text-100);
  background: var(--cloto-surface-raised, var(--cloto-surface));
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 8px) var(--space-4, 12px);
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color var(--duration-fast, 0.1s) ease;
}
.cloto-feedback-comment:focus {
  border-color: var(--cloto-teal-a25);
}
.cloto-feedback-comment::placeholder {
  color: var(--cloto-text-30);
}

.cloto-feedback-email-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-xs, 11px);
  color: var(--cloto-text-40);
}

.cloto-feedback-email {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm, 13px);
  color: var(--cloto-text-100);
  background: var(--cloto-surface-raised, var(--cloto-surface));
  border: 1px solid var(--cloto-glass-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2, 6px) var(--space-4, 12px);
  outline: none;
  transition: border-color var(--duration-fast, 0.1s) ease;
}
.cloto-feedback-email:focus {
  border-color: var(--cloto-teal-a25);
}
.cloto-feedback-email::placeholder {
  color: var(--cloto-text-30);
}

.cloto-feedback-submit {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--cloto-teal, #00c8b4);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-fast, 0.1s) ease;
}
.cloto-feedback-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cloto-feedback-submit:hover:not(:disabled) {
  filter: brightness(1.1);
}

.cloto-feedback-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 8px);
  padding: var(--space-8, 20px) 0;
  text-align: center;
}

.cloto-feedback-thanks-icon {
  font-size: 32px;
}

.cloto-feedback-thanks-text {
  font-family: var(--cloto-font-ui);
  font-size: var(--cloto-fs-sm, 13px);
  color: var(--cloto-text-70);
  margin: 0;
}

/* Light mode */
body.fd-light .cloto-feedback-modal {
  background: var(--cloto-surface);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}