/* ============================================================
   StoryFuze — componente de brand "Duotone Motion"
   Sursă: portat din git (commit 05f2744f^, folder creator-app
   șters ulterior din repo) — creator-app/assets/css/
   {design-system.css, style.css}. TOATE clasele au fost
   re-namespace-uite cu prefixul `.sf-` (colidau cu clasele generice
   Bootstrap din bundle-ul ifindspec, care se încarcă și pe storyfuze)
   și TOT selectorul e scopat sub
   html[data-platform="storyfuze"] — zero impact pe alte platforme.
   Consumă variabilele de platformă definite în ../brand.css
   (--primaryColor=cyan #46e0e8, --secondaryColor=orange #ff7a2e,
   --pageBackgroundColor=#0d1420, --ifs-font-heading/body).
   ============================================================ */

@import url('/assets/vendor/fonts/storyfuze/storyfuze-fonts.css'); /* Playfair Display + Inter self-hosted (GDPR: fara Google Fonts) */

/* ==========================================================================
   Bază — body dark + neutralizare Bootstrap în interiorul .sf-*
   ========================================================================== */

html[data-platform="storyfuze"] body {
  background: var(--pageBackgroundColor);
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-root,
html[data-platform="storyfuze"] [data-sf] {
  background: var(--pageBackgroundColor);
  color: var(--textColor);
  font-family: var(--ifs-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html[data-platform="storyfuze"] .sf-root h1,
html[data-platform="storyfuze"] .sf-root h2,
html[data-platform="storyfuze"] .sf-root h3,
html[data-platform="storyfuze"] .sf-root h4,
html[data-platform="storyfuze"] [data-sf] h1,
html[data-platform="storyfuze"] [data-sf] h2,
html[data-platform="storyfuze"] [data-sf] h3,
html[data-platform="storyfuze"] [data-sf] h4 {
  font-family: var(--ifs-font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--textColor);
  margin: 0 0 1rem;
}

/* Neutralizează stilurile Bootstrap moștenite (nativ din bundle-ul ifindspec)
   pentru orice element Bootstrap folosit în interiorul unei componente .sf-*
   — resetăm la "unstyled" înainte ca regulile .sf- de mai jos să aplice
   look-ul Duotone Motion. Selectoare intenționat compuse (nu redefinim
   clasele generice Bootstrap global, doar le anulăm sub .sf-*). */
html[data-platform="storyfuze"] [class*="sf-"][class~="btn"],
html[data-platform="storyfuze"] [class*="sf-"] > [class~="btn"] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

html[data-platform="storyfuze"] [class*="sf-"][class~="form-control"],
html[data-platform="storyfuze"] [class*="sf-"] [class~="form-control"],
html[data-platform="storyfuze"] [class*="sf-"] select[class~="form-select"] {
  all: unset;
  box-sizing: border-box;
}

html[data-platform="storyfuze"] .sf-h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
html[data-platform="storyfuze"] .sf-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
html[data-platform="storyfuze"] .sf-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }

html[data-platform="storyfuze"] .sf-text-muted { color: var(--fadeText); }
html[data-platform="storyfuze"] .sf-text-cyan { color: var(--primaryColor); }
html[data-platform="storyfuze"] .sf-text-orange { color: var(--secondaryColor); }

html[data-platform="storyfuze"] .sf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ifs-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primaryColor);
}

/* ==========================================================================
   Butoane (.sf-btn-fill / .sf-btn-line din design-system.css)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-btn-fill,
html[data-platform="storyfuze"] .sf-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--ifs-font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out),
              background var(--sf-motion-base) var(--sf-ease-out),
              border-color var(--sf-motion-base) var(--sf-ease-out);
  will-change: transform;
}

html[data-platform="storyfuze"] .sf-btn-fill {
  background: var(--secondaryColor);
  color: var(--pageBackgroundColor);
  box-shadow: 0 4px 16px -6px rgba(255, 122, 46, 0.55);
}

html[data-platform="storyfuze"] .sf-btn-fill:hover,
html[data-platform="storyfuze"] .sf-btn-fill:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -8px rgba(255, 122, 46, 0.45);
}

html[data-platform="storyfuze"] .sf-btn-line {
  background: transparent;
  color: var(--primaryColor);
  border-color: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-btn-line:hover,
html[data-platform="storyfuze"] .sf-btn-line:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -8px rgba(70, 224, 232, 0.45);
  background: rgba(70, 224, 232, 0.08);
}

html[data-platform="storyfuze"] .sf-btn-fill:active,
html[data-platform="storyfuze"] .sf-btn-line:active {
  transform: translateY(-1px);
}

html[data-platform="storyfuze"] .sf-btn-fill:disabled,
html[data-platform="storyfuze"] .sf-btn-line:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

html[data-platform="storyfuze"] .sf-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
html[data-platform="storyfuze"] .sf-btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
html[data-platform="storyfuze"] .sf-btn-block { width: 100%; }

/* Butonul generic .sf-btn / .sf-btn-primary / .sf-btn-ghost (portate din style.css) */
html[data-platform="storyfuze"] .sf-btn {
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background var(--sf-motion-fast) var(--sf-ease-out),
              opacity var(--sf-motion-fast) var(--sf-ease-out),
              transform var(--sf-motion-fast) var(--sf-ease-out),
              box-shadow var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-btn-primary {
  width: 100%;
  background: var(--secondaryColor);
  color: var(--pageBackgroundColor);
  box-shadow: 0 4px 16px -6px rgba(255, 122, 46, 0.55);
}

html[data-platform="storyfuze"] .sf-btn-primary:hover {
  background: var(--btnPrimaryHoverBg);
  transform: translateY(-2px);
}

html[data-platform="storyfuze"] .sf-btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

html[data-platform="storyfuze"] .sf-btn-ghost {
  background: transparent;
  border: 1px solid var(--bordersColor);
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-btn-ghost:hover {
  border-color: var(--primaryColor);
}

/* ==========================================================================
   Carduri (.sf-card / .sf-module-card)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-card {
  background: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
  border-radius: 12px;
  padding: 1.25rem;
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              border-color var(--sf-motion-base) var(--sf-ease-out),
              background var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--surfaceHoverBg);
}

html[data-platform="storyfuze"] .sf-card-interactive { cursor: pointer; }

html[data-platform="storyfuze"] .sf-card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
}

html[data-platform="storyfuze"] .sf-card-title {
  font-family: var(--ifs-font-heading);
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}

html[data-platform="storyfuze"] .sf-card-body {
  color: var(--fadeText);
  font-size: 0.875rem;
}

html[data-platform="storyfuze"] .sf-card-accent-cyan { border-top: 2px solid var(--primaryColor); }
html[data-platform="storyfuze"] .sf-card-accent-orange { border-top: 2px solid var(--secondaryColor); }

html[data-platform="storyfuze"] .sf-module-card {
  position: relative;
  overflow: hidden;
  background: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out),
              border-color var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sf-duotone-gradient);
  opacity: 0;
  transition: opacity var(--sf-motion-slow) var(--sf-ease-out);
  pointer-events: none;
  mix-blend-mode: overlay;
}

html[data-platform="storyfuze"] .sf-module-card:hover::before { opacity: 0.12; }

html[data-platform="storyfuze"] .sf-module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.16);
}

html[data-platform="storyfuze"] .sf-module-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 0.4rem;
}

html[data-platform="storyfuze"] .sf-module-card-icon.sf-accent-cyan {
  background: linear-gradient(135deg, var(--primaryColor), rgba(70, 224, 232, 0.2));
}

html[data-platform="storyfuze"] .sf-module-card-icon.sf-accent-orange {
  background: linear-gradient(135deg, var(--secondaryColor), rgba(255, 122, 46, 0.2));
}

html[data-platform="storyfuze"] .sf-module-card-icon.sf-accent-duotone {
  background: var(--sf-duotone-gradient);
}

/* ==========================================================================
   Dashboard usage (.sf-usage-*)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-usage-section {
  background: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
  border-radius: 16px;
}

html[data-platform="storyfuze"] .sf-usage-overline {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fadeText);
  margin-bottom: 0.15rem;
}

html[data-platform="storyfuze"] .sf-usage-plan {
  display: inline-block;
  font-family: var(--ifs-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--sf-duotone-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-platform="storyfuze"] .sf-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

html[data-platform="storyfuze"] .sf-usage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out),
              border-color var(--sf-motion-base) var(--sf-ease-out);
  animation: sf-usage-fade-up var(--sf-motion-slow) var(--sf-ease-out) both;
}

html[data-platform="storyfuze"] .sf-usage-card:nth-child(2) { animation-delay: 60ms; }
html[data-platform="storyfuze"] .sf-usage-card:nth-child(3) { animation-delay: 120ms; }
html[data-platform="storyfuze"] .sf-usage-card:nth-child(4) { animation-delay: 180ms; }
html[data-platform="storyfuze"] .sf-usage-card:nth-child(5) { animation-delay: 240ms; }

html[data-platform="storyfuze"] .sf-usage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-platform="storyfuze"] .sf-usage-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--sf-duotone-gradient);
  box-shadow: 0 0 18px var(--accentGlow);
  color: #0d1420;
  font-size: 1.1rem;
}

html[data-platform="storyfuze"] .sf-usage-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-ring {
  width: 108px;
  height: 108px;
  transform: rotate(-90deg);
}

html[data-platform="storyfuze"] .sf-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

html[data-platform="storyfuze"] .sf-ring-progress {
  fill: none;
  stroke: url(#sf-ring-grad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 - 326.7 * var(--sf-pct) / 100);
  animation: sf-ring-fill 1.1s var(--sf-ease-out) both;
}

html[data-platform="storyfuze"] .sf-ring-progress.is-warn,
html[data-platform="storyfuze"] .sf-ring-progress.is-full {
  stroke: var(--secondaryColor);
}

html[data-platform="storyfuze"] .sf-ring-progress.is-full {
  filter: drop-shadow(0 0 6px var(--accentGlow));
}

html[data-platform="storyfuze"] .sf-ring-progress.is-unlimited,
html[data-platform="storyfuze"] .sf-ring-progress.is-na {
  stroke-dashoffset: 326.7;
  animation: none;
}

html[data-platform="storyfuze"] .sf-usage-card .sf-ring-text {
  position: relative;
  margin-top: -76px;
  margin-bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

html[data-platform="storyfuze"] .PrincipalContent .sf-usage-card .sf-ring-value {
  font-family: var(--ifs-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--sf-duotone-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-platform="storyfuze"] .PrincipalContent .sf-usage-card .sf-ring-limit {
  font-size: 0.75rem;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-usage-caption {
  margin: 0;
  font-size: 0.72rem;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-usage-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  border-top: 1px solid var(--bordersColor);
  padding-top: 1rem;
}

html[data-platform="storyfuze"] .sf-usage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  color: var(--fadeText);
  font-size: 1.1rem;
}

html[data-platform="storyfuze"] .sf-usage-stat i {
  color: var(--primaryColor);
  font-size: 1.1rem;
}

html[data-platform="storyfuze"] .PrincipalContent .sf-usage-stat .sf-usage-stat-value {
  font-family: var(--ifs-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-usage-stat-label {
  font-size: 0.72rem;
}

@keyframes sf-ring-fill {
  from { stroke-dashoffset: 326.7; }
}

@keyframes sf-usage-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  html[data-platform="storyfuze"] .sf-usage-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-platform="storyfuze"] .sf-usage-card,
  html[data-platform="storyfuze"] .sf-ring-progress {
    animation: none;
  }
}

/* ==========================================================================
   Dashboard — secțiuni recente/programate + quick access (.sf-dash-*)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-dash-section {
  background: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
  border-radius: 16px;
  padding: 1.25rem;
}

html[data-platform="storyfuze"] .sf-dash-section-title {
  font-family: var(--ifs-font-heading);
  font-size: 1.1rem;
  color: var(--textColor);
  margin: 0 0 1rem;
}

/* Private layout: full-width (ifindspec .profile-view centers children) */
html[data-platform="storyfuze"] .PrincipalContent .profile-view {
  place-items: stretch;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
}
html[data-platform="storyfuze"] .PrincipalContent .profile-view > * { width: 100%; }

html[data-platform="storyfuze"] .sf-dash-empty {
  margin: 0;
  font-size: 0.9rem;
}

html[data-platform="storyfuze"] .sf-dash-materials-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

html[data-platform="storyfuze"] .sf-dash-material-card {
  border: 1px solid var(--bordersColor);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surfaceHoverBg);
}

html[data-platform="storyfuze"] .sf-dash-material-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pageBackgroundColor);
  color: var(--fadeText);
  font-size: 1.5rem;
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-dash-material-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-platform="storyfuze"] .sf-dash-material-thumb i {
  display: none;
}

html[data-platform="storyfuze"] .sf-dash-material-thumb-fallback {
  background: linear-gradient(135deg, rgba(70, 224, 232, 0.18), rgba(255, 122, 46, 0.18));
}

html[data-platform="storyfuze"] .sf-dash-material-thumb-fallback img {
  display: none;
}

html[data-platform="storyfuze"] .sf-dash-material-thumb-fallback i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

html[data-platform="storyfuze"] .sf-dash-material-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.75rem;
}

html[data-platform="storyfuze"] .sf-dash-material-name {
  color: var(--textColor);
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-platform="storyfuze"] .sf-dash-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primaryColor);
  background: rgba(70, 224, 232, 0.12);
  border: 1px solid rgba(70, 224, 232, 0.35);
  text-transform: capitalize;
}

html[data-platform="storyfuze"] .sf-dash-badge-failed {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.35);
}

html[data-platform="storyfuze"] .sf-dash-badge-ready,
html[data-platform="storyfuze"] .sf-dash-badge-published,
html[data-platform="storyfuze"] .sf-dash-badge-saved {
  color: var(--secondaryColor);
  background: rgba(255, 122, 46, 0.12);
  border-color: rgba(255, 122, 46, 0.35);
}

html[data-platform="storyfuze"] .sf-dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

html[data-platform="storyfuze"] .sf-dash-list-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bordersColor);
  border-radius: 10px;
  background: var(--surfaceHoverBg);
}

html[data-platform="storyfuze"] .sf-dash-list-main {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--textColor);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-platform="storyfuze"] .sf-dash-quick-card {
  padding: 1.25rem;
}

/* ==========================================================================
   Formulare (.sf-input / .sf-form-*)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

html[data-platform="storyfuze"] .sf-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-input,
html[data-platform="storyfuze"] .sf-textarea,
html[data-platform="storyfuze"] .sf-select {
  background: var(--inputBackgroundColor);
  border: 1px solid var(--inputBorderColor);
  border-radius: 6px;
  color: var(--textColor);
  font-family: var(--ifs-font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out);
  width: 100%;
}

html[data-platform="storyfuze"] .sf-textarea { resize: vertical; min-height: 120px; }

html[data-platform="storyfuze"] .sf-input::placeholder,
html[data-platform="storyfuze"] .sf-textarea::placeholder {
  color: rgba(154, 165, 181, 0.5);
}

html[data-platform="storyfuze"] .sf-input:focus,
html[data-platform="storyfuze"] .sf-textarea:focus,
html[data-platform="storyfuze"] .sf-select:focus {
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 3px rgba(70, 224, 232, 0.18);
}

html[data-platform="storyfuze"] .sf-input.is-invalid,
html[data-platform="storyfuze"] .sf-textarea.is-invalid {
  border-color: var(--secondaryColor);
  box-shadow: 0 0 0 3px rgba(255, 122, 46, 0.18);
}

html[data-platform="storyfuze"] .sf-form-hint { font-size: 0.78rem; color: var(--fadeText); }
html[data-platform="storyfuze"] .sf-form-error { font-size: 0.78rem; color: var(--secondaryColor); }

html[data-platform="storyfuze"] .sf-checkbox,
html[data-platform="storyfuze"] .sf-radio {
  accent-color: var(--primaryColor);
  width: 18px;
  height: 18px;
}

html[data-platform="storyfuze"] .sf-alert {
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

html[data-platform="storyfuze"] .sf-alert-error {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: #ffb3b3;
}

html[data-platform="storyfuze"] .sf-alert-ok {
  background: rgba(70, 224, 232, 0.1);
  border: 1px solid rgba(70, 224, 232, 0.35);
  color: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

html[data-platform="storyfuze"] .sf-badge-loading { background: rgba(154, 165, 181, 0.15); color: var(--fadeText); }
html[data-platform="storyfuze"] .sf-badge-ok { background: rgba(61, 220, 151, 0.15); color: #3ddc97; }
html[data-platform="storyfuze"] .sf-badge-blocked { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }
html[data-platform="storyfuze"] .sf-badge-unknown { background: rgba(154, 165, 181, 0.15); color: var(--fadeText); }

/* ==========================================================================
   Navigație (.sf-nav din .ds-nav)
   ========================================================================== */

html[data-platform="storyfuze"] nav.sf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(13, 20, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordersColor);
}

html[data-platform="storyfuze"] .sf-nav-brand {
  font-family: var(--ifs-font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--textColor);
  text-decoration: none;
}

html[data-platform="storyfuze"] .sf-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

html[data-platform="storyfuze"] .sf-nav-links a {
  color: var(--fadeText);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-nav-links a:hover,
html[data-platform="storyfuze"] .sf-nav-links a.is-active {
  color: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

html[data-platform="storyfuze"] .sf-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--textColor);
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              opacity var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html[data-platform="storyfuze"] .sf-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
html[data-platform="storyfuze"] .sf-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  html[data-platform="storyfuze"] .sf-nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    background: var(--white);
    border-bottom: 1px solid var(--bordersColor);
    padding: 1.25rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--sf-motion-base) var(--sf-ease-out),
                opacity var(--sf-motion-base) var(--sf-ease-out);
  }

  html[data-platform="storyfuze"] .sf-nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  html[data-platform="storyfuze"] .sf-nav-toggle { display: flex; }
}

/* ==========================================================================
   Toast (.sf-toast din .ds-toast)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
}

html[data-platform="storyfuze"] .sf-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #131c2b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--primaryColor);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
  animation: sf-toast-in var(--sf-motion-slow) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-toast-success { border-left-color: var(--primaryColor); }
html[data-platform="storyfuze"] .sf-toast-error { border-left-color: var(--secondaryColor); }
html[data-platform="storyfuze"] .sf-toast-warning { border-left-color: #ffcf5c; }

html[data-platform="storyfuze"] .sf-toast-title { font-weight: 700; font-size: 0.875rem; margin: 0; }
html[data-platform="storyfuze"] .sf-toast-body { font-size: 0.82rem; color: var(--fadeText); margin: 2px 0 0; }

@keyframes sf-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Grid / secțiuni (.sf-container / .sf-grid / .sf-section / .sf-hero / .sf-footer)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

html[data-platform="storyfuze"] .sf-section { padding: clamp(3rem, 6vw, 5rem) 0; }

html[data-platform="storyfuze"] .sf-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(12, 1fr);
}

html[data-platform="storyfuze"] .sf-grid-2 { grid-template-columns: repeat(2, 1fr); }
html[data-platform="storyfuze"] .sf-grid-3 { grid-template-columns: repeat(3, 1fr); }
html[data-platform="storyfuze"] .sf-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
  html[data-platform="storyfuze"] .sf-grid-2,
  html[data-platform="storyfuze"] .sf-grid-3,
  html[data-platform="storyfuze"] .sf-grid-4 {
    grid-template-columns: 1fr;
  }
}

html[data-platform="storyfuze"] .sf-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

html[data-platform="storyfuze"] .sf-hero-title {
  font-family: var(--ifs-font-heading);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-hero-sub {
  color: var(--fadeText);
  font-size: 1rem;
  margin: 0;
}

html[data-platform="storyfuze"] .sf-footer {
  text-align: center;
  padding: 1.5rem 2rem;
  color: var(--fadeText);
  font-size: 0.8rem;
  border-top: 1px solid var(--bordersColor);
}

/* ==========================================================================
   Reveal-on-scroll (.sf-reveal din .reveal)
   ========================================================================== */

html[data-platform="storyfuze"].sf-js .sf-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--sf-motion-slow) var(--sf-ease-out),
              transform var(--sf-motion-slow) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html[data-platform="storyfuze"] .sf-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Auth screen (.sf-auth-screen / .sf-auth-card din style.css)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-auth-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--pageBackgroundColor);
  overflow: hidden;
}

html[data-platform="storyfuze"] .sf-auth-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 8%, var(--primaryColor) 0%, transparent 45%),
    radial-gradient(circle at 8% 92%, var(--secondaryColor) 0%, transparent 45%);
  opacity: 0.3;
}

html[data-platform="storyfuze"] .sf-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.55);
}

html[data-platform="storyfuze"] .sf-auth-logo {
  font-family: var(--ifs-font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--textColor);
  text-align: center;
  margin: 0 0 1.5rem;
}

html[data-platform="storyfuze"] .sf-auth-logo img {
  display: block;
  /* logo orizontal „colored_dark_full" (Story turcoaz + tagline deschis) — lizibil pe cardul dark;
     varianta verticală avea „Story" bleumarin, invizibil pe fundal închis */
  max-width: 230px;
  height: auto;
  margin: 0 auto;
}

html[data-platform="storyfuze"] .sf-auth-title {
  font-family: var(--ifs-font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 1.5rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-auth-form {
  display: flex;
  flex-direction: column;
}

html[data-platform="storyfuze"] .sf-auth-links {
  text-align: center;
  margin-top: 0.5rem;
}

html[data-platform="storyfuze"] .sf-auth-links a {
  color: var(--primaryColor);
  font-size: 0.85rem;
  text-decoration: none;
}

html[data-platform="storyfuze"] .sf-auth-links a:hover { text-decoration: underline; }

html[data-platform="storyfuze"] .sf-auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-auth-card.sf-reveal {
  opacity: 0;
  transform: translateY(24px);
}

html[data-platform="storyfuze"] .sf-auth-card.sf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 480px) {
  html[data-platform="storyfuze"] .sf-auth-screen { padding: 0; }

  html[data-platform="storyfuze"] .sf-auth-card {
    max-width: none;
    min-height: 100vh;
    width: 100%;
    padding: 24px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   Dashboard (.sf-dash-* din style.css)
   ========================================================================== */

html[data-platform="storyfuze"] .sf-dash-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pageBackgroundColor);
}

html[data-platform="storyfuze"] .sf-dash-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  background: rgba(13, 20, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordersColor);
}

html[data-platform="storyfuze"] .sf-dash-logo {
  font-family: var(--ifs-font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-dash-user {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

html[data-platform="storyfuze"] .sf-dash-user-name { color: var(--fadeText); font-size: 0.9rem; }

html[data-platform="storyfuze"] .sf-dash-billing-link {
  color: var(--fadeText);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-dash-billing-link:hover { color: var(--primaryColor); }

html[data-platform="storyfuze"] .sf-dash-main {
  flex: 1;
  padding: 3rem 2rem 4rem;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

html[data-platform="storyfuze"] .sf-dash-hero {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

html[data-platform="storyfuze"] .sf-dash-hero-title {
  font-family: var(--ifs-font-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.2rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-dash-hero-sub { color: var(--fadeText); font-size: 1rem; margin: 0; }

html[data-platform="storyfuze"] .sf-dash-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

html[data-platform="storyfuze"] .sf-dash-card-cta { margin-top: auto; align-self: flex-start; }

html[data-platform="storyfuze"] .sf-dash-footer {
  text-align: center;
  padding: 1.5rem 2rem;
  color: var(--fadeText);
  font-size: 0.8rem;
  border-top: 1px solid var(--bordersColor);
}

@media (max-width: 860px) {
  html[data-platform="storyfuze"] .sf-dash-module-grid { grid-template-columns: 1fr; }
  html[data-platform="storyfuze"] .sf-dash-header { padding: 1rem 1.25rem; }
  html[data-platform="storyfuze"] .sf-dash-main { padding: 2.5rem 1.25rem 3rem; }
  html[data-platform="storyfuze"] .sf-module-card,
  html[data-platform="storyfuze"] .sf-card { padding: 1rem; }
  html[data-platform="storyfuze"] .sf-btn-fill,
  html[data-platform="storyfuze"] .sf-btn-line { width: 100%; }
  html[data-platform="storyfuze"] .sf-toast-stack { left: 0.75rem; right: 0.75rem; max-width: none; }
}

/* ==========================================================================
   Sidebar privat — .MeniuCentCont (aside) în tema Duotone Motion
   Scoped sub html[data-platform="storyfuze"] — zero impact pe alte branduri.
   Poziționarea fixă + lățimea rămân guvernate de regulile globale ne-scopate
   (private_navbar.css .MeniuCentCont, private/01-base-common.css
   .PrincipalContent, private/12-sidebar-collapse.css body.sidebar-collapsed) —
   NU redeclarăm width/overflow aici ca să nu rupem colapsul sidebar-ului;
   doar forțăm position:fixed (altfel era suprascris de fostul
   `aside.sf-nav{position:static}`, cauza bug-ului de layout) și tematizăm
   culorile/bordurile cu tokenii Duotone.
   Tot blocul de mai jos e DOAR desktop (min-width:1024px): sub 1024px global
   CSS ascunde aside-ul (private_navbar.css: `aside{display:none}` /
   `.MeniuCentCont{display:none}`) și afișează bara .mobileView; fără media
   query, `display:flex` de aici suprascria ascunderea și lăsa sidebar-ul
   position:fixed peste tot ecranul pe mobil.
   Selectorii .meniuLinks / .meniuLinks.active / .Logo sunt din private_menu.php.
   ========================================================================== */

@media (min-width: 1024px) {
  html[data-platform="storyfuze"] aside.MeniuCentCont {
    /* resetează nav-ul orizontal (landing) la layout vertical de sidebar fix */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: var(--surfaceBg);
    backdrop-filter: none;
    border-bottom: none;
    border-right: 1px solid var(--bordersColor);
  }
}

/* Logo din sidebar */
html[data-platform="storyfuze"] aside.MeniuCentCont .Logo {
  background: var(--surfaceBg);
  border-bottom: 1px solid var(--bordersColor);
  padding: 1rem 1.25rem;
}

/* Wrapper links */
html[data-platform="storyfuze"] aside.MeniuCentCont .sidebar-content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
  background: var(--surfaceBg);
}

/* Fiecare item de meniu */
html[data-platform="storyfuze"] aside.MeniuCentCont .meniuLinks {
  background: transparent;
  border-radius: 0;
  margin: 0;
  transition: background var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] aside.MeniuCentCont .meniuLinks a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  color: var(--fadeText);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color var(--sf-motion-fast) var(--sf-ease-out),
              background var(--sf-motion-fast) var(--sf-ease-out),
              border-color var(--sf-motion-fast) var(--sf-ease-out);
}

/* Hover — accent orange */
html[data-platform="storyfuze"] aside.MeniuCentCont .meniuLinks a:hover {
  color: var(--secondaryColor);
  background: rgba(255, 122, 46, 0.07);
  border-left-color: var(--secondaryColor);
}

/* Item activ — accent cyan */
html[data-platform="storyfuze"] aside.MeniuCentCont .meniuLinks.active a {
  color: var(--primaryColor);
  background: rgba(70, 224, 232, 0.09);
  border-left-color: var(--primaryColor);
  font-weight: 600;
}

/* Icoane bootstrap */
html[data-platform="storyfuze"] aside.MeniuCentCont .meniuLinks a .bi {
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Separator între grupuri de meniu */
html[data-platform="storyfuze"] aside.MeniuCentCont .nav-sep {
  border-top: 1px solid var(--bordersColor);
  margin: 0.4rem 0;
}

/* Hero section din dashboard */
html[data-platform="storyfuze"] .sf-hero-title {
  font-family: var(--ifs-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--textColor);
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   Componente Bootstrap în interfața privată — tema Duotone Motion
   Bootstrap default = fundal alb; paginile private storyfuze afișează
   modale/dropdown-uri/carduri Bootstrap (ex. #accountSwitcherModal din
   private_menu.php) care nu trec prin .sf-*. Tipar portat din
   assets/brand/ifindspec/css/generalCssFile.php (blocul dark ~314-373 și
   ~580-594), cu tokenii Duotone în loc de valorile literale ifindspec.
   ========================================================================== */

html[data-platform="storyfuze"] .modal-content {
  background-color: var(--surfaceBg);
  color: var(--textColor);
  border: 1px solid var(--bordersColor);
}

html[data-platform="storyfuze"] .modal-header,
html[data-platform="storyfuze"] .modal-footer {
  border-color: var(--bordersColor);
}

html[data-platform="storyfuze"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.4);
}

html[data-platform="storyfuze"] .list-group-item {
  background-color: transparent;
  color: var(--fadeText);
  border-color: var(--bordersColor);
}

html[data-platform="storyfuze"] .form-control,
html[data-platform="storyfuze"] .form-select,
html[data-platform="storyfuze"] textarea.form-control {
  background-color: var(--inputBackgroundColor);
  color: var(--textColor);
  border-color: var(--inputBorderColor);
}

html[data-platform="storyfuze"] .form-control:focus,
html[data-platform="storyfuze"] .form-select:focus {
  background-color: var(--inputBackgroundColor);
  color: var(--textColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 0.2rem rgba(var(--primaryColorRgb), 0.25);
}

html[data-platform="storyfuze"] .form-control::placeholder {
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .dropdown-menu {
  background-color: var(--surfaceBg);
  border: 1px solid var(--bordersColor);
}

html[data-platform="storyfuze"] .dropdown-item {
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .dropdown-item:hover,
html[data-platform="storyfuze"] .dropdown-item:focus {
  background-color: var(--surfaceHoverBg);
  color: var(--primaryColor);
}

html[data-platform="storyfuze"] .card {
  background-color: var(--surfaceBg);
  color: var(--textColor);
  border: 1px solid var(--bordersColor);
}

/* ==========================================================================
   Anti text-negru-pe-fundal-închis (QA 04.09.2026): modulele private
   (dashboard, video-studio, creative-studio, publishing) sunt view-uri
   ifindspec cu CSS propriu care setează `color` închis (moștenit sau
   hardcodat) pe fundalul închis Storyfuze. Forțăm textul de bază la alb
   în zona de conținut, lăsând butoanele/badge-urile cu fundal propriu
   să-și păstreze culorile.
   ========================================================================== */

html[data-platform="storyfuze"] .PrincipalContent,
html[data-platform="storyfuze"] .main-content {
  color: var(--textColor);
}

/* Dashboard/settings pe full-height (A3/H3) — nu setăm overflow, ca să nu
   dubleze scroll-ul cu layout-ul rail (13-rail-redesign.css). */
html[data-platform="storyfuze"] .PrincipalContent {
  min-height: 100vh;
  min-height: 100dvh;
}

html[data-platform="storyfuze"] .PrincipalContent body,
html[data-platform="storyfuze"] .main-content * {
  /* Nu forțăm pe toate — doar resetăm moștenirea la nivel de text default. */
}

html[data-platform="storyfuze"] .PrincipalContent p,
html[data-platform="storyfuze"] .PrincipalContent span:not(.badge):not(.btn *),
html[data-platform="storyfuze"] .PrincipalContent h1,
html[data-platform="storyfuze"] .PrincipalContent h2,
html[data-platform="storyfuze"] .PrincipalContent h3,
html[data-platform="storyfuze"] .PrincipalContent h4,
html[data-platform="storyfuze"] .PrincipalContent h5,
html[data-platform="storyfuze"] .PrincipalContent h6,
html[data-platform="storyfuze"] .PrincipalContent label,
html[data-platform="storyfuze"] .PrincipalContent td,
html[data-platform="storyfuze"] .PrincipalContent th,
html[data-platform="storyfuze"] .PrincipalContent li,
html[data-platform="storyfuze"] .PrincipalContent div:not([class*="btn"]):not([class*="badge"]) {
  color: var(--textColor);
}

html[data-platform="storyfuze"] .main-content {
  background-color: var(--surfaceBg);
}

/* Titlurile de secțiune din module păstrează accentul brandului. */
html[data-platform="storyfuze"] .PrincipalContent .section-title,
html[data-platform="storyfuze"] .PrincipalContent .area-title h2 {
  color: var(--textColor);
}

/* ai-profile (my_ai.css overrides)
   my_ai.css e injectat în <body> (L99), deci se încarcă DUPĂ storyfuze.css.
   Câștigăm prin specificitate: prefixăm cu html[data-platform="storyfuze"]
   fiecare selector .aimeu-* din my_ai.css, replicând aceeași lungime de
   selector unde acesta e compus. Nu modificăm my_ai.css (partajat). */

html[data-platform="storyfuze"] .aimeu-wrap {
  color: #e6edf5;
}

html[data-platform="storyfuze"] .aimeu-sub,
html[data-platform="storyfuze"] .aimeu-progress-label,
html[data-platform="storyfuze"] .aimeu-loading,
html[data-platform="storyfuze"] .aimeu-sec-desc,
html[data-platform="storyfuze"] .aimeu-field-hint,
html[data-platform="storyfuze"] .aimeu-dz-sub,
html[data-platform="storyfuze"] .aimeu-docsub,
html[data-platform="storyfuze"] .aimeu-zone-desc,
html[data-platform="storyfuze"] .aimeu-zonegroup-title,
html[data-platform="storyfuze"] .aimeu-logo-sub,
html[data-platform="storyfuze"] .aimeu-set-desc,
html[data-platform="storyfuze"] .aimeu-empty-hint,
html[data-platform="storyfuze"] .aimeu-prop-head p,
html[data-platform="storyfuze"] .aimeu-chatfree-intro p,
html[data-platform="storyfuze"] .aimeu-interview-intro p {
  color: rgba(230, 237, 245, 0.65);
}

/* Tabs */
html[data-platform="storyfuze"] .aimeu-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-platform="storyfuze"] .aimeu-tab {
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-tab:hover {
  color: #46e0e8;
  background: rgba(70, 224, 232, 0.1);
}
html[data-platform="storyfuze"] .aimeu-tab.active {
  color: #ff7a2e;
  border-bottom-color: #ff7a2e;
}
html[data-platform="storyfuze"] .aimeu-subnav {
  background: rgba(255, 255, 255, 0.06);
}
html[data-platform="storyfuze"] .aimeu-subtab {
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-subtab:hover {
  color: #46e0e8;
}
html[data-platform="storyfuze"] .aimeu-subtab.active {
  background: #101827;
  color: #ff7a2e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Panouri / secțiuni / carduri albe → surface */
html[data-platform="storyfuze"] .aimeu-section,
html[data-platform="storyfuze"] .aimeu-set-block,
html[data-platform="storyfuze"] .aimeu-chat,
html[data-platform="storyfuze"] .aimeu-chatfree,
html[data-platform="storyfuze"] .aimeu-prop-section,
html[data-platform="storyfuze"] .aimeu-logo-card,
html[data-platform="storyfuze"] .aimeu-logo-tile,
html[data-platform="storyfuze"] .aimeu-docrow,
html[data-platform="storyfuze"] .aimeu-playback-result,
html[data-platform="storyfuze"] .aimeu-modal {
  background: #101827;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e6edf5;
}
html[data-platform="storyfuze"] .aimeu-section summary:hover {
  background: rgba(255, 255, 255, 0.05);
}
html[data-platform="storyfuze"] .aimeu-section[open] > summary {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Fields / inputs / textarea / select */
html[data-platform="storyfuze"] .aimeu-input,
html[data-platform="storyfuze"] .aimeu-chat-input textarea,
html[data-platform="storyfuze"] .aimeu-playback-correct textarea,
html[data-platform="storyfuze"] .aimeu-color-pick,
html[data-platform="storyfuze"] .aimeu-dockind select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6edf5;
}
html[data-platform="storyfuze"] .aimeu-input:focus,
html[data-platform="storyfuze"] .aimeu-chat-input textarea:focus {
  border-color: #46e0e8;
  box-shadow: 0 0 0 3px rgba(70, 224, 232, 0.2);
}
html[data-platform="storyfuze"] .aimeu-dockind label,
html[data-platform="storyfuze"] .aimeu-step-title,
html[data-platform="storyfuze"] .aimeu-dz-main,
html[data-platform="storyfuze"] .aimeu-docname,
html[data-platform="storyfuze"] .aimeu-logo-title,
html[data-platform="storyfuze"] .aimeu-logo-variant,
html[data-platform="storyfuze"] .aimeu-kit-chip,
html[data-platform="storyfuze"] .aimeu-pb-tab,
html[data-platform="storyfuze"] .aimeu-prop-label {
  color: #e6edf5;
}

/* Chat */
html[data-platform="storyfuze"] .aimeu-chat-head,
html[data-platform="storyfuze"] .aimeu-chatfree-intro {
  background: rgba(70, 224, 232, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-platform="storyfuze"] .aimeu-chat-bar {
  background: rgba(255, 255, 255, 0.1);
}
html[data-platform="storyfuze"] .aimeu-chat-log {
  background: #0d1420;
}
html[data-platform="storyfuze"] .aimeu-chat-input {
  background: #101827;
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-platform="storyfuze"] .aimeu-msg-ai .aimeu-msg-bubble {
  background: rgba(255, 255, 255, 0.08);
  color: #e6edf5;
}
html[data-platform="storyfuze"] .aimeu-msg-user .aimeu-msg-bubble {
  background: #ff7a2e;
  color: #0d1420;
}

/* Modal */
html[data-platform="storyfuze"] .aimeu-modal-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-platform="storyfuze"] .aimeu-modal-close {
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e6edf5;
}

/* Zone / seg */
html[data-platform="storyfuze"] .aimeu-zone {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-platform="storyfuze"] .aimeu-seg-group {
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-platform="storyfuze"] .aimeu-seg {
  background: #101827;
  color: rgba(230, 237, 245, 0.65);
  border-right-color: rgba(255, 255, 255, 0.12);
}
html[data-platform="storyfuze"] .aimeu-seg:hover:not(.disabled):not(.active) {
  background: rgba(70, 224, 232, 0.1);
  color: #46e0e8;
}
html[data-platform="storyfuze"] .aimeu-seg.active {
  background: #ff7a2e;
  color: #0d1420;
}

/* Kit brand */
html[data-platform="storyfuze"] .aimeu-kit-chip {
  background: #101827;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-platform="storyfuze"] .aimeu-kit-chip.active {
  background: #ff7a2e;
  border-color: #ff7a2e;
  color: #0d1420;
}
html[data-platform="storyfuze"] .aimeu-kit-editor {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* RAG / dropzone / doc kind */
html[data-platform="storyfuze"] .aimeu-rag-uploading {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-dropzone {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-platform="storyfuze"] .aimeu-dropzone:hover,
html[data-platform="storyfuze"] .aimeu-dropzone.dragover {
  border-color: #46e0e8;
  background: rgba(70, 224, 232, 0.08);
}

/* Prompt box / copy button */
html[data-platform="storyfuze"] .aimeu-prompt-box {
  background: #0d1420;
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-platform="storyfuze"] .aimeu-prop-current {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-prop-new {
  background: rgba(70, 224, 232, 0.1);
  border-color: rgba(70, 224, 232, 0.2);
  color: #e6edf5;
}
html[data-platform="storyfuze"] .aimeu-prop-col {
  border-color: rgba(255, 255, 255, 0.1);
}

/* =====================================================================
   Subscriptions page (sf-subs)
   ===================================================================== */

html[data-platform="storyfuze"] .sf-subs {
  min-height: 100vh;
  padding: 2.5rem 1.5rem 4rem;
  color: var(--textColor);
  background: var(--pageBackgroundColor);
}

/* Billing period toggle */
html[data-platform="storyfuze"] .sf-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--surfaceBorder);
  background: var(--surfaceBg);
  margin: 0 auto 2rem;
}

html[data-platform="storyfuze"] .sf-billing-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--fadeText);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--sf-motion-fast) var(--sf-ease-out),
              color var(--sf-motion-fast) var(--sf-ease-out),
              border-color var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-billing-toggle button:not(.active) {
  border-color: var(--surfaceBorder);
}

html[data-platform="storyfuze"] .sf-billing-toggle button.active {
  background: var(--sf-duotone-gradient);
  color: var(--pageBackgroundColor);
}

html[data-platform="storyfuze"] .sf-billing-toggle .sf-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
}

html[data-platform="storyfuze"] .sf-billing-toggle button:not(.active) .sf-pill {
  background: var(--accentSoft);
  color: var(--accentColor);
}

/* Plan grid */
html[data-platform="storyfuze"] .sf-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  html[data-platform="storyfuze"] .sf-plan-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

html[data-platform="storyfuze"] .sf-plan-card {
  position: relative;
  background: var(--surfaceBg);
  border: 1px solid var(--surfaceBorder);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  transition: transform var(--sf-motion-base) var(--sf-ease-out),
              border-color var(--sf-motion-base) var(--sf-ease-out),
              box-shadow var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--accentColor);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
}

html[data-platform="storyfuze"] .sf-plan-card-recommended {
  border-color: var(--accentColor);
  box-shadow: 0 0 0 1px var(--accentColor), 0 0 32px var(--accentGlow);
}

@media (min-width: 992px) {
  html[data-platform="storyfuze"] .sf-plan-card-recommended {
    transform: scale(1.04);
  }

  html[data-platform="storyfuze"] .sf-plan-card-recommended:hover {
    transform: scale(1.04) translateY(-4px);
  }
}

html[data-platform="storyfuze"] .sf-plan-card-current {
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 1px var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-plan-badge {
  position: absolute;
  top: -0.65rem;
  right: 1.25rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--sf-duotone-gradient);
  color: var(--pageBackgroundColor);
}

html[data-platform="storyfuze"] .sf-plan-card-current .sf-plan-badge {
  background: var(--primaryColor);
  color: var(--pageBackgroundColor);
}

html[data-platform="storyfuze"] .sf-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0.75rem 0 0.25rem;
  background: var(--sf-duotone-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-platform="storyfuze"] .sf-price-suffix {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fadeText);
  -webkit-text-fill-color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-price-note {
  font-size: 0.8rem;
  color: var(--fadeText);
  margin-bottom: 1.25rem;
}

html[data-platform="storyfuze"] .sf-plan-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

html[data-platform="storyfuze"] .sf-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

html[data-platform="storyfuze"] .sf-plan-features li::before {
  content: "\2713";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--accentSoft);
  color: var(--accentColor);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Comparison table */
html[data-platform="storyfuze"] .sf-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--surfaceBorder);
  border-radius: 16px;
}

html[data-platform="storyfuze"] .sf-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--textColor);
}

html[data-platform="storyfuze"] .sf-compare-table th,
html[data-platform="storyfuze"] .sf-compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--surfaceBorder);
  white-space: nowrap;
}

html[data-platform="storyfuze"] .sf-compare-table thead th {
  font-weight: 700;
  background: var(--surfaceBg);
}

html[data-platform="storyfuze"] .sf-compare-table tbody tr:nth-child(even) {
  background: var(--surfaceHoverBg);
}

html[data-platform="storyfuze"] .sf-compare-table th:first-child,
html[data-platform="storyfuze"] .sf-compare-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surfaceBg);
  font-weight: 600;
  white-space: normal;
}

html[data-platform="storyfuze"] .sf-compare-table .sf-yes {
  color: var(--primaryColor);
  font-weight: 700;
}

html[data-platform="storyfuze"] .sf-compare-table .sf-no {
  color: var(--fadeText);
}

/* Add-ons */
html[data-platform="storyfuze"] .sf-addon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  html[data-platform="storyfuze"] .sf-addon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

html[data-platform="storyfuze"] .sf-addon-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surfaceBg);
  border: 1px solid var(--surfaceBorder);
  border-radius: 16px;
  padding: 1.25rem;
  transition: border-color var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-addon-card:hover {
  border-color: var(--accentColor);
}

html[data-platform="storyfuze"] .sf-addon-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

html[data-platform="storyfuze"] .sf-addon-switch {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
}

html[data-platform="storyfuze"] .sf-addon-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 999px;
  background: var(--surfaceBorder);
  cursor: pointer;
  position: relative;
  transition: background var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-addon-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--pageBackgroundColor);
  transition: transform var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-addon-switch input[type="checkbox"]:checked {
  background: var(--primaryColor);
}

html[data-platform="storyfuze"] .sf-addon-switch input[type="checkbox"]:checked::before {
  transform: translateX(1.25rem);
}

html[data-platform="storyfuze"] .sf-addon-switch input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

html[data-platform="storyfuze"] .sf-addon-note {
  font-size: 0.8rem;
  color: var(--fadeText);
}

/* Invoices */
html[data-platform="storyfuze"] .sf-invoice-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

html[data-platform="storyfuze"] .sf-invoice-list th,
html[data-platform="storyfuze"] .sf-invoice-list td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--surfaceBorder);
}

html[data-platform="storyfuze"] .sf-invoice-list thead th {
  font-weight: 700;
  color: var(--fadeText);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

html[data-platform="storyfuze"] .sf-invoice-list tbody tr:hover {
  background: var(--surfaceHoverBg);
}

html[data-platform="storyfuze"] .sf-inv-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

html[data-platform="storyfuze"] .sf-inv-status-paid {
  background: var(--accentSoft);
  color: var(--accentColor);
}

html[data-platform="storyfuze"] .sf-inv-status-open {
  background: rgba(255, 122, 46, 0.15);
  color: var(--secondaryColor);
}

html[data-platform="storyfuze"] .sf-inv-status-void,
html[data-platform="storyfuze"] .sf-inv-status-uncollectible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fadeText);
}

html[data-platform="storyfuze"] .sf-invoice-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--surfaceBorder);
  border-radius: 16px;
  color: var(--fadeText);
}

/* FAQ */
html[data-platform="storyfuze"] .sf-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

html[data-platform="storyfuze"] .sf-faq-item {
  background: var(--surfaceBg);
  border: 1px solid var(--surfaceBorder);
  border-radius: 14px;
  padding: 0.25rem 1.25rem;
  transition: border-color var(--sf-motion-base) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-faq-item[open] {
  border-color: var(--accentColor);
}

html[data-platform="storyfuze"] .sf-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

html[data-platform="storyfuze"] .sf-faq-item summary::-webkit-details-marker {
  display: none;
}

html[data-platform="storyfuze"] .sf-faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--fadeText);
  border-bottom: 2px solid var(--fadeText);
  transform: rotate(45deg);
  transition: transform var(--sf-motion-fast) var(--sf-ease-out);
}

html[data-platform="storyfuze"] .sf-faq-item[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--accentColor);
}

html[data-platform="storyfuze"] .sf-faq-item-body {
  padding: 0 0 1.1rem;
  color: var(--fadeText);
  font-size: 0.9rem;
  line-height: 1.6;
  animation: sf-faq-fade var(--sf-motion-slow) var(--sf-ease-out) both;
}

@keyframes sf-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Upgrade CTA */
html[data-platform="storyfuze"] .sf-upgrade-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  border-radius: 18px;
  background: linear-gradient(var(--surfaceBg), var(--surfaceBg)) padding-box,
              var(--sf-duotone-gradient) border-box;
  border: 1px solid transparent;
  margin-bottom: 2rem;
}

/* ── Logo StoryFuze în meniul privat (TopBlock + sidebar) ──
   Default (dark / fără data-theme) → varianta *_colored_dark.
   La data-theme="light" → varianta *_colored_light. Ambele <picture>
   sunt mereu în markup; CSS-ul decide care e vizibilă. */
html[data-platform="storyfuze"] .sf-menu-logo--light { display: none; }
html[data-platform="storyfuze"][data-theme="light"] .sf-menu-logo--light { display: inline; }
html[data-platform="storyfuze"][data-theme="light"] .sf-menu-logo--dark { display: none; }
/* .Logo img din private_navbar.css forțează width/height 100% → logo-ul se deforma. */
html[data-platform="storyfuze"] .Logo .sf-menu-logo img { width: auto; height: auto; max-width: 100%; object-fit: contain; }

/* ==========================================================================
   Dashboard dark fixes (private-audit gaps G1 + G5)
   ========================================================================== */

/* G1 — generalCssFile.php `:root[data-theme="dark"] body:has(.PrincipalContent)`
   forces the IFindSpec grey #0f141b with !important; the plain body rule above
   loses on specificity. Out-specify it so the Duotone page background wins
   on the strip of <body> around .PrincipalContent. */
html[data-platform="storyfuze"]:not([data-theme="light"]) body:has(.PrincipalContent),
html[data-platform="storyfuze"][data-theme="dark"] body:has(.PrincipalContent) {
  background-color: var(--pageBackgroundColor) !important;
}

/* G5 — IFSToast/IFSDialog attach to <body>; their dark branch in
   toast_and_dialog.php hardcodes IFindSpec grey surfaces. The StoryFuze
   tokens are defined on <html>, so they resolve outside .PrincipalContent. */
html[data-platform="storyfuze"]:not([data-theme="light"]) .ifs-toast,
html[data-platform="storyfuze"]:not([data-theme="light"]) .ifs-dialog {
  background: var(--surfaceBg);
  color: var(--textColor);
  border-color: var(--bordersColor);
}

html[data-platform="storyfuze"]:not([data-theme="light"]) .ifs-dialog__msg {
  color: var(--fadeText);
}

html[data-platform="storyfuze"]:not([data-theme="light"]) .ifs-dialog__input {
  background: var(--inputBackgroundColor);
  color: var(--textColor);
  border-color: var(--inputBorderColor);
}

html[data-platform="storyfuze"]:not([data-theme="light"]) .ifs-dialog__btn--ghost {
  color: var(--textColor);
  border-color: var(--inputBorderColor);
}

/* ==========================================================================
   Dashboard redesign — full-width layout + lizibilitate pe fundal închis
   (views/storyfuze/dashboard.php). Doar override-uri scopate; regulile
   .sf-* de mai sus (partajate cu site-ul public) rămân neatinse.
   ========================================================================== */

/* .main-content e pictat cu --surfaceBg (L1418) = exact culoarea cardurilor
   (.sf-usage-section / .sf-dash-section / .sf-module-card) → contrast zero.
   Transparent lasă --pageBackgroundColor de pe .PrincipalContent să treacă. */
html[data-platform="storyfuze"] .PrincipalContent .main-content {
  background-color: transparent;
}

/* Gutter lateral: .profile-view are `padding: 1rem 0`, deci conținutul
   full-width se lipea de rail și de marginea ferestrei. `:has()` limitează
   regula la dashboard — .profile-view e partajat cu toate celelalte pagini
   private, pe care le acoperă fazele lor proprii. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view:has(> .sf-usage-section) {
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* .sf-hero e o componentă de landing (max-width 640px + text centrat); în
   dashboard bloca singurul element care nu era full-width. */
html[data-platform="storyfuze"] .PrincipalContent .sf-hero {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

/* Blocul „anti text-negru” (L1402-1416) are specificitate (0,4,2) și
   suprascrie toate clasele de text secundar ale dashboard-ului, aplatizând
   ierarhia la alb. Reselectăm la (0,5,1) ca să recâștige tokenii proprii. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-module-card .sf-card-body,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-overline,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-label,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-caption,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-card .sf-ring-limit,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-stat .sf-usage-stat-label,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-dash-section .sf-text-muted {
  color: var(--fadeText);
}

/* Aceleași reguli anulau `color: transparent`, deci textul cu gradient
   duotone (background-clip: text) se picta alb opac peste gradient. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-card .sf-ring-value,
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-plan {
  color: transparent;
}

/* Badge-urile nu au clasa Bootstrap `.badge`, deci excepția din selectorul
   blanket nu le prinde. Culoarea vine dintr-o proprietate custom (imună la
   cascada de `color`) setată de variantele existente de mai sus. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-dash-section .sf-dash-badge {
  color: var(--sf-dash-badge-fg, var(--primaryColor));
}

html[data-platform="storyfuze"] .sf-dash-badge-ready,
html[data-platform="storyfuze"] .sf-dash-badge-published,
html[data-platform="storyfuze"] .sf-dash-badge-saved {
  --sf-dash-badge-fg: var(--secondaryColor);
}

/* Aceeași valoare ca regula .sf-dash-badge-failed de mai sus — nu se adaugă
   o culoare nouă în paletă, doar se transportă prin custom property. */
html[data-platform="storyfuze"] .sf-dash-badge-failed {
  --sf-dash-badge-fg: #ff6b6b;
}

/* Pista inelelor de consum (rgba alb 0.08) e sub pragul de vizibilitate pe
   suprafața cardului; --inputBorderColor e treapta următoare din paletă. */
html[data-platform="storyfuze"] .PrincipalContent .sf-usage-card .sf-ring-track {
  stroke: var(--inputBorderColor);
}

/* The usage cards sit on .sf-usage-section (--surfaceBg); their own
   rgba(255,255,255,0.02)/0.06 surface and border are below the visible
   threshold on the dark page, so the ring grid reads as one flat panel.
   Same palette step already used by .sf-dash-material-card / .sf-dash-list-row. */
html[data-platform="storyfuze"] .PrincipalContent .sf-usage-card {
  background: var(--surfaceHoverBg);
  border-color: var(--inputBorderColor);
}

/* .sf-btn (L158) is declared after .sf-btn-line (L127) with equal specificity,
   so its `border: none` shorthand wipes the outline variant: the dashboard's
   "Manage subscription" control renders as bare text. Same collision kills the
   .sf-btn-sm size modifier (padding/font-size reset by .sf-btn). */
html[data-platform="storyfuze"] .PrincipalContent .sf-btn.sf-btn-line {
  border: 1px solid var(--primaryColor);
}

html[data-platform="storyfuze"] .PrincipalContent .sf-btn.sf-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Full-width dashboard: minmax(150px, 1fr) yields ~8 auto-fill tracks inside
   .PrincipalContent, shrinking the 16/9 thumbnails and ellipsizing every
   material name. min() keeps the single-column mobile behaviour intact. */
html[data-platform="storyfuze"] .PrincipalContent .sf-dash-materials-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

/* The blanket `div` rule (L1414, specificity 0,4,1) out-specifies
   .sf-usage-icon (L365, 0,2,1) and repaints its dark ink with --textColor, so
   the glyph lands near-white on the bright cyan end of the duotone chip.
   .sf-module-card-icon never declared a color at all, so its <i> inherits the
   same near-white from the blanket rule. Both chips need dark ink.
   --pageBackgroundColor is that dark ink only while the dark palette is bound; under
   the staff light toggle it resolves near-white, and there the blanket rule already
   lands dark ink on the chip — hence the dark-only scope. */
html[data-platform="storyfuze"]:not([data-theme="light"]) .PrincipalContent .profile-view .sf-usage-card .sf-usage-icon,
html[data-platform="storyfuze"]:not([data-theme="light"]) .PrincipalContent .profile-view .sf-module-card .sf-module-card-icon {
  color: var(--pageBackgroundColor);
}

/* Match the glyph size the usage chips already use — the module chips relied on
   the inherited 1rem, which reads undersized inside a 40px tile. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-module-card .sf-module-card-icon {
  font-size: 1.1rem;
}

/* .sf-usage-stats is a hard `repeat(4, 1fr)` down to a 640px *viewport*
   breakpoint calibrated for the public site, which has no rail. Inside
   .PrincipalContent the column loses margin-left:18vw (01-base-common.css:12),
   so the four stats are squeezed well before the breakpoint fires. Size the
   tracks by available width instead. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

/* Same viewport-vs-column mismatch for the module/quick-access grids: the
   `max-width: 860px` collapse to a single track (L925-931) is calibrated for the
   public site. Inside .PrincipalContent the rail is already hidden at that width,
   so the three module cards stack into full-width bands instead of staying a row.
   Track count follows the actual column; min() keeps the mobile single column. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* The four summary stats are the only tiles in the usage panel with no surface of
   their own, so on the dark panel they read as loose text rather than cards. Same
   palette step as .sf-dash-list-row / .sf-usage-card — no new colour. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view .sf-usage-section .sf-usage-stat {
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--inputBorderColor);
  border-radius: 12px;
  background: var(--surfaceHoverBg);
}

/* private/01-base-common.css:20 `a:hover { color: var(--secondaryColor) !important }`
   repaints the outline button's label orange on hover while its border and glow stay
   cyan (dashboard "Manage subscription"). !important is required to reach it. */
html[data-platform="storyfuze"] .PrincipalContent .profile-view a.sf-btn-line:hover,
html[data-platform="storyfuze"] .PrincipalContent .profile-view a.sf-btn-line:focus-visible {
  color: var(--primaryColor) !important;
}

/* ==========================================================================
   Bootstrap dark completion — settings-family pages (private-audit G3/G4/G7)
   Components with no dark rule anywhere (storyfuze.css / brand.css /
   generalCssFile dark block), plus the modals.php partials rendered OUTSIDE
   .PrincipalContent (G4) where every .PrincipalContent-scoped rule is dead.
   Dark-only scope (:not([data-theme="light"])) — the staff light toggle must
   keep stock Bootstrap. Semantic alert tints reuse the values already
   established by views/settings/settings.css:538-549. .bg-* / .text-* need
   !important because the Bootstrap utilities they override carry it.
   ========================================================================== */

/* Alerts — neutral variants */
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-light,
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-secondary,
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-dark,
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-primary {
  background-color: var(--surfaceHoverBg);
  border-color: var(--bordersColor);
  color: var(--textColor);
}

/* Alerts — semantic variants (same tints as settings.css dark block) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-warning {
  background-color: rgba(255,193,7,.12); border-color: rgba(255,193,7,.35); color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-info {
  background-color: rgba(13,202,240,.12); border-color: rgba(13,202,240,.35); color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-success {
  background-color: rgba(25,135,84,.14); border-color: rgba(25,135,84,.4); color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert-danger {
  background-color: rgba(220,53,69,.12); border-color: rgba(220,53,69,.4); color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .alert .alert-link {
  color: var(--primaryColor);
}

/* Checkboxes / radios / switches */
html[data-platform="storyfuze"]:not([data-theme="light"]) .form-check-input {
  background-color: var(--inputBackgroundColor);
  border-color: var(--inputBorderColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .form-check-input:focus {
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 0.2rem rgba(var(--primaryColorRgb), 0.25);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .form-check-input:checked {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}

/* Tabs & pills */
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-tabs {
  border-color: var(--bordersColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-tabs .nav-link {
  color: var(--fadeText);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-tabs .nav-link:hover {
  border-color: var(--bordersColor);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-tabs .nav-link.active {
  background-color: var(--surfaceBg);
  border-color: var(--bordersColor) var(--bordersColor) var(--surfaceBg);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-pills .nav-link {
  color: var(--fadeText);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-pills .nav-link:hover {
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .nav-pills .nav-link.active {
  background-color: var(--primaryColor);
  color: var(--pageBackgroundColor);
}

/* Progress */
html[data-platform="storyfuze"]:not([data-theme="light"]) .progress {
  background-color: var(--surfaceHoverBg);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .progress-bar {
  background-color: var(--primaryColor);
  color: var(--pageBackgroundColor);
}

/* Light/subtle background utilities (modals.php headers, cards, pre blocks) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-light,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-white,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-primary-subtle,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-secondary-subtle,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-success-subtle,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-info-subtle,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-warning-subtle,
html[data-platform="storyfuze"]:not([data-theme="light"]) .bg-danger-subtle {
  background-color: var(--surfaceHoverBg) !important;
  color: var(--textColor);
}

/* Badges on the flipped utilities above + grey secondary pill */
html[data-platform="storyfuze"]:not([data-theme="light"]) .badge.bg-secondary {
  background-color: var(--surfaceHoverBg) !important;
  color: var(--fadeText);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .badge.bg-light.text-dark {
  color: var(--textColor) !important;
}

/* Muted/secondary/dark text on dark surfaces (Bootstrap keeps light-mode inks) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .text-secondary,
html[data-platform="storyfuze"]:not([data-theme="light"]) .text-muted {
  color: var(--fadeText) !important;
}
html[data-platform="storyfuze"]:not([data-theme="light"]) span.text-dark:not(.badge) {
  color: var(--textColor) !important;
}

/* Buttons: .btn-light + .btn-outline-secondary (G7 — the generalCssFile dark
   rule is scoped body:not(:has(.PrincipalContent)) → dead on private pages) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-light {
  background-color: var(--surfaceHoverBg);
  border-color: var(--bordersColor);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-light:hover,
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-light:focus {
  background-color: var(--inputBackgroundColor);
  border-color: var(--inputBorderColor);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-outline-secondary {
  color: var(--textColor);
  border-color: var(--inputBorderColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-outline-secondary:hover,
html[data-platform="storyfuze"]:not([data-theme="light"]) .btn-outline-secondary:focus {
  background-color: var(--surfaceHoverBg);
  border-color: var(--inputBorderColor);
  color: var(--textColor);
}

/* Card header/footer (the .card base rule above covers only the body) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .card-header,
html[data-platform="storyfuze"]:not([data-theme="light"]) .card-footer {
  background-color: var(--surfaceHoverBg);
  border-color: var(--bordersColor);
  color: var(--textColor);
}

/* Accordion (outside .ifs-settings — settings.css covers only its own scope) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .accordion-item {
  background-color: var(--surfaceBg);
  border-color: var(--bordersColor);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .accordion-button {
  background-color: var(--surfaceBg);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .accordion-button:not(.collapsed) {
  background-color: var(--surfaceHoverBg);
  color: var(--primaryColor);
  box-shadow: inset 0 -1px 0 var(--bordersColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(1.4);
}

/* Tooltip / popover / toast — Bootstrap 5 exposes per-component CSS vars */
html[data-platform="storyfuze"]:not([data-theme="light"]) .tooltip {
  --bs-tooltip-bg: var(--surfaceHoverBg);
  --bs-tooltip-color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .popover {
  --bs-popover-bg: var(--popoverBg);
  --bs-popover-body-color: var(--popoverText);
  --bs-popover-header-bg: var(--surfaceHoverBg);
  --bs-popover-header-color: var(--textColor);
  --bs-popover-border-color: var(--popoverBorder);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .toast {
  background-color: var(--surfaceBg);
  border-color: var(--bordersColor);
  color: var(--textColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .toast-header {
  background-color: var(--surfaceHoverBg);
  border-color: var(--bordersColor);
  color: var(--fadeText);
}

/* Pagination */
html[data-platform="storyfuze"]:not([data-theme="light"]) .page-link {
  background-color: var(--surfaceBg);
  border-color: var(--bordersColor);
  color: var(--fadeText);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .page-link:hover {
  background-color: var(--surfaceHoverBg);
  color: var(--primaryColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .page-item.active .page-link {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--pageBackgroundColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .page-item.disabled .page-link {
  background-color: var(--surfaceBg);
  color: var(--fadeText);
  opacity: 0.5;
}

/* Bare Bootstrap tables (incl. subscription billing history's .sf-table,
   which had no definition anywhere — audit gap 8.1) */
html[data-platform="storyfuze"]:not([data-theme="light"]) .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--textColor);
  --bs-table-border-color: var(--bordersColor);
  --bs-table-striped-bg: var(--surfaceHoverBg);
  --bs-table-striped-color: var(--textColor);
  --bs-table-hover-bg: var(--surfaceHoverBg);
  --bs-table-hover-color: var(--textColor);
  color: var(--textColor);
  border-color: var(--bordersColor);
}
html[data-platform="storyfuze"]:not([data-theme="light"]) .table-light > * > * {
  background-color: var(--surfaceHoverBg) !important;
  color: var(--fadeText) !important;
  border-color: var(--bordersColor) !important;
}
html[data-platform="storyfuze"] .sf-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--fadeText);
  border-bottom: 1px solid var(--bordersColor);
}
html[data-platform="storyfuze"] .sf-table a {
  color: var(--primaryColor);
}

/* Moved from the page-local <style> in settings_subscriptions_storyfuze.php
   next to the other .sf-badge-* variants (audit gap 8.3). */
html[data-platform="storyfuze"] .sf-badge-recommended {
  background: rgba(255, 138, 61, 0.18);
  color: var(--secondaryColor);
}

/* ==========================================================================
   ai-profile — my_ai.css leftovers with no counterpart in the block above
   (private-audit §11 gaps 1-6). Same convention: specificity override via
   html[data-platform="storyfuze"] prefix, my_ai.css stays untouched (shared).
   ========================================================================== */

/* Progress donut: white centre + light track (my_ai.css:23-32) */
html[data-platform="storyfuze"] .aimeu-progress-ring {
  background: conic-gradient(#46e0e8 calc(var(--pct) * 1%), rgba(255, 255, 255, 0.12) 0);
}
html[data-platform="storyfuze"] .aimeu-progress-ring span {
  background: #0d1420;
  color: #46e0e8;
}

/* Playback tabs: color was fixed above but background:#fff survived (my_ai.css:288) */
html[data-platform="storyfuze"] .aimeu-pb-tab {
  background: #101827;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-platform="storyfuze"] .aimeu-pb-tab:hover {
  border-color: #46e0e8;
  color: #46e0e8;
}
html[data-platform="storyfuze"] .aimeu-playback-text {
  background: rgba(70, 224, 232, 0.08);
  color: #e6edf5;
  border-left-color: #46e0e8;
}

/* White buttons (my_ai.css:110,124,166,231) */
html[data-platform="storyfuze"] .aimeu-objadd {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-validate,
html[data-platform="storyfuze"] .aimeu-chat-finish {
  background: rgba(25, 135, 84, 0.14);
  border-color: rgba(74, 222, 128, 0.35);
  color: #4ade80;
}
html[data-platform="storyfuze"] .aimeu-validate:hover:not(:disabled),
html[data-platform="storyfuze"] .aimeu-chat-finish:hover:not(:disabled) {
  background: rgba(25, 135, 84, 0.22);
}
html[data-platform="storyfuze"] .aimeu-logo-del {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.4);
  color: #ff8787;
}
html[data-platform="storyfuze"] .aimeu-logo-del:hover {
  background: rgba(220, 53, 69, 0.2);
}

/* Logo tiles (my_ai.css:220-225,334-343) */
html[data-platform="storyfuze"] .aimeu-logo-preview {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-platform="storyfuze"] .aimeu-logo-preview.has-logo {
  background: #101827;
}
html[data-platform="storyfuze"] .aimeu-logo-empty {
  color: rgba(230, 237, 245, 0.65);
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-platform="storyfuze"] .aimeu-logo-thumb {
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.08) 0% 25%, rgba(255, 255, 255, 0.03) 0% 50%) 50% / 16px 16px;
}
html[data-platform="storyfuze"] .aimeu-logo-star,
html[data-platform="storyfuze"] .aimeu-logo-trash {
  background: rgba(16, 24, 39, 0.92);
  color: rgba(230, 237, 245, 0.75);
}

/* Lavender purple-era leftovers (my_ai.css:51-52,90-95,282-283) */
html[data-platform="storyfuze"] .aimeu-hint,
html[data-platform="storyfuze"] .aimeu-copysec,
html[data-platform="storyfuze"] .aimeu-improve {
  background: rgba(70, 224, 232, 0.08);
  border-color: rgba(70, 224, 232, 0.25);
  color: #46e0e8;
}
html[data-platform="storyfuze"] .aimeu-copysec:hover:not(:disabled),
html[data-platform="storyfuze"] .aimeu-improve:hover:not(:disabled) {
  background: rgba(70, 224, 232, 0.16);
}

/* Near-white hairlines, badges, placeholders (my_ai.css:73-76,132,151-152,278-279,320-327) */
html[data-platform="storyfuze"] .aimeu-copyvoice hr {
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-platform="storyfuze"] .aimeu-copyvoice-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-platform="storyfuze"] .aimeu-soon {
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-msg-saved span {
  background: rgba(25, 135, 84, 0.18);
  color: #4ade80;
}
html[data-platform="storyfuze"] .aimeu-badge-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(230, 237, 245, 0.75);
}
html[data-platform="storyfuze"] .aimeu-badge-warning {
  background: rgba(255, 193, 7, 0.15);
  color: #fbbf24;
}
html[data-platform="storyfuze"] .aimeu-badge-success {
  background: rgba(25, 135, 84, 0.18);
  color: #4ade80;
}
html[data-platform="storyfuze"] .aimeu-dockind-badge {
  color: #46e0e8;
}
html[data-platform="storyfuze"] .aimeu-docdel {
  background: rgba(220, 53, 69, 0.15);
  color: #ff8787;
}
html[data-platform="storyfuze"] .aimeu-docdel:hover {
  background: rgba(220, 53, 69, 0.25);
}
html[data-platform="storyfuze"] .aimeu-kit-editor {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-platform="storyfuze"] .aimeu-kit-flabel {
  color: rgba(230, 237, 245, 0.65);
}
html[data-platform="storyfuze"] .aimeu-empty {
  color: rgba(230, 237, 245, 0.5);
}

/* publishing-hub: badge bg-warning text-dark (private-audit §4.5) — keep dark
   ink on the yellow pill; the utility pair must not inherit a light-mode ink. */
html[data-platform="storyfuze"]:not([data-theme="light"]) .badge.bg-warning.text-dark {
  color: #101827 !important;
}