/* ====================================================
   ImmaginAI — Light Theme v1.2
   Neutro di default · viola solo su attivo e CTA
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════
   1. VARIABILI
════════════════════════════════════════════════════ */
:root {
  --bg:      #f0f2f5;
  --surface: #ffffff;
  --card:    #ffffff;
  --border:  #e2e4ea;
  --text:    #1e2132;
  --muted:   #9098a9;
  --danger:  #e53935;

  --c-accent:  #5B35C8;
  --c-accent2: #3D2F8F;
  --c-violet:  #5B35C8;

  --font-title: 'Inter', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* Bottoni neutrali */
  --btn-style-bg:           #ffffff;
  --btn-style-color:        #444;
  --btn-style-border:       #e2e4ea;
  --btn-style-active-bg:    #5B35C8;
  --btn-style-active-color: #ffffff;
  --btn-style-active-border:#5B35C8;

  --btn-ratio-bg:           #ffffff;
  --btn-ratio-color:        #444;
  --btn-ratio-border:       #e2e4ea;
  --btn-ratio-active-bg:    #5B35C8;
  --btn-ratio-active-color: #ffffff;
  --btn-ratio-active-border:#5B35C8;

  --gen-btn-bg:    #5B35C8;
  --gen-btn-color: #ffffff;
}

/* ════════════════════════════════════════════════════
   2. BASE
════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body,
body.light {
  background:  var(--bg) !important;
  color:       var(--text) !important;
  font-family: var(--font-body) !important;
}

#themeToggleFixed { display: none !important; }

body:not(.light) .adv-input {
  background: #ffffff !important;
  color:      var(--text) !important;
}

/* ════════════════════════════════════════════════════
   3. SIDEBAR
════════════════════════════════════════════════════ */
#sidebar {
  background:   #1e2132 !important;
  border-right: none !important;
  width:        180px !important;
}
.sidebar-logo   { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.logo-ai        { color: #ffffff !important; font-size: 14px !important; }
.sidebar-footer { display: none !important; }

.snav-btn {
  color:       rgba(255,255,255,.55) !important;
  font-family: var(--font-body) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  border:      none !important;
  border-radius: 6px !important;
}
.snav-btn:hover  { background: rgba(255,255,255,.07) !important; color: #ffffff !important; }
.snav-btn.active {
  background:  rgba(255,255,255,.10) !important;
  color:       #ffffff !important;
  border:      none !important;
  border-left: 3px solid #5B35C8 !important;
  border-radius: 0 6px 6px 0 !important;
}
.sidebar-footer       { border-top: 1px solid rgba(255,255,255,.08) !important; color: rgba(255,255,255,.3) !important; }
.sidebar-footer strong{ color: rgba(255,255,255,.5) !important; }

/* ════════════════════════════════════════════════════
   4. CONTROLS — area centrale
════════════════════════════════════════════════════ */
#controls,
#controls-scroll  { background: var(--bg) !important; }
#controls-footer  { background: #d8dce6 !important; border-top: none !important; padding: 14px 28px 18px !important; }

/* Controls larghezza fissa — bordo rimosso dal padre */
#controls         { width: 620px !important; flex: none !important; border-right: none !important; box-shadow: none !important; position: relative !important; }

/* Linea sottile solo sull'area scroll — non arriva al footer */
#controls-scroll  { position: relative !important; }
#controls-scroll::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 1px !important; height: 100% !important;
  background: #dde1ea !important;
}

/* Preview occupa il resto */
#preview-col      { flex: 1 !important; min-width: 260px !important; }

/* Desktop: no scroll, tutto in vista */
#controls-scroll  { overflow-y: auto !important; overflow-x: hidden !important; padding: 14px 28px 12px !important; gap: 0 !important; justify-content: space-evenly !important; }

/* Spaziatura interna sezioni */
.slabel           { margin-bottom: 10px !important; }
.dv-label         { margin-bottom: 10px !important; }
.dv-wrap          { margin-top: 20px !important; }

/* Status bar nascosta — info già visibili nel pannello anteprima */
#statusBar        { display: none !important; }

/* Tab DV: wrap su più righe — nessun taglio, niente frecce */
.dv-tab-row   { flex-wrap: wrap !important; overflow-x: visible !important; }
#dvArrowLeft,
#dvArrowRight { display: none !important; }

/* Label sezione — grigio testo, icona viola */
.slabel,
.dv-label      { color: #9098a9 !important; font-family: var(--font-body) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important; }
.slabel-icon,
.dv-label-icon { color: #5B35C8 !important; }

/* ── Prompt ── */
.prompt-wrap {
  background: #ffffff !important;
  border:     1.5px solid var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  border-radius: 10px !important;
}
.prompt-wrap:focus-within {
  border-color: #5B35C8 !important;
  box-shadow:   0 0 0 3px rgba(91,53,200,.08) !important;
}
#promptInput {
  color:       var(--text) !important;
  font-family: var(--font-body) !important;
  background:  transparent !important;
  font-size:   13px !important;
}
#promptInput::placeholder { color: #b0b8c8 !important; }

#diceBtn       { background: #F0008C !important; border-left: 1px solid rgba(0,0,0,.08) !important; }
#diceBtn:hover { background: #d4007c !important; }

/* ── DV Tabs — tinta viola leggera default, pieno attivo ── */
.dv-tab {
  background:    rgba(91,53,200,.10) !important;
  border:        1px solid #5B35C8 !important;
  color:         #5B35C8 !important;
  font-size:     11px !important;
  padding:       5px 10px !important;
  border-radius: 20px !important;
}
.dv-tab:hover  { background: rgba(91,53,200,.20) !important; border-color: #3D2F8F !important; color: #3D2F8F !important; }
.dv-tab.active { background: #5B35C8 !important; border-color: #5B35C8 !important; color: #ffffff !important; font-weight: 700 !important; }

.dv-tab-badge                       { background: #e0e0e0 !important; color: #555 !important; }
.dv-tab.active .dv-tab-badge        { background: rgba(255,255,255,.25) !important; color: #fff !important; }
.dv-tab:not(.active) .dv-tab-badge  { background: #e0e0e0 !important; color: #555 !important; }

.dv-arrow { background: #e2e4ea !important; color: #555 !important; }
.dv-arrow:hover { background: #5B35C8 !important; color: #fff !important; }

/* ── DV Chips — grigio chiaro default, attivo viola ── */
.dv-chip {
  background:    #f4f4f8 !important;
  border:        1.5px solid var(--border) !important;
  color:         #555 !important;
  border-radius: 6px !important;
  font-size:     11px !important;
}
.dv-chip:hover  { border-color: #5B35C8 !important; color: #5B35C8 !important; background: rgba(91,53,200,.04) !important; }
.dv-chip.active { background: #5B35C8 !important; border-color: #5B35C8 !important; color: #ffffff !important; font-weight: 600 !important; }

.dv-attivi-badge             { background: #5B35C8 !important; color: #ffffff !important; }
.dv-attivi-badge.view-attivi { background: rgba(91,53,200,.08) !important; color: #5B35C8 !important; border: 1px solid rgba(91,53,200,.3) !important; }
.dv-attivi-n                 { background: rgba(255,255,255,.25) !important; color: #ffffff !important; }
.dv-chip-active-item         { background: #5B35C8 !important; color: #ffffff !important; border-radius: 6px !important; }
.dv-chip-remove              { background: rgba(0,0,0,.15) !important; color: #ffffff !important; }
.dv-empty-msg                { color: #b0b8c8 !important; }

/* ── Stili AI — grigio chiaro default, attivo viola ── */
.style-btn {
  background:    #f4f4f8 !important;
  border:        1.5px solid var(--border) !important;
  border-radius: 8px !important;
}
.style-btn:hover  { border-color: #5B35C8 !important; background: rgba(91,53,200,.04) !important; }
.style-btn.active { background: #5B35C8 !important; border-color: #5B35C8 !important; box-shadow: 0 2px 8px rgba(91,53,200,.25) !important; }
.style-label      { color: #666 !important; font-size: 9px !important; }
.style-btn.active .style-label { color: #ffffff !important; }

/* ── Formato/Ratio — grigio chiaro default, attivo viola ── */
.ratio-btn {
  background:    #f4f4f8 !important;
  border:        1.5px solid var(--border) !important;
  border-radius: 8px !important;
}
.ratio-btn:hover  { border-color: #5B35C8 !important; background: rgba(91,53,200,.04) !important; }
.ratio-btn.active { background: #5B35C8 !important; border-color: #5B35C8 !important; }
.ratio-icon,
.ratio-label                   { color: #666 !important; }
.ratio-btn.active .ratio-icon,
.ratio-btn.active .ratio-label { color: #ffffff !important; }

/* ── Footer pills ── */
.neg-toggle           { background: #1e2132 !important; color: #ffffff !important; box-shadow: none !important; font-size: 12px !important; border: none !important; }
.neg-toggle:hover     { background: #2d3142 !important; }
.neg-toggle.open      { background: #F0008C !important; }

.transp-toggle        { background: #1e2132 !important; color: #ffffff !important; border: none !important; font-size: 12px !important; }
.transp-toggle:hover  { background: #2d3142 !important; }
.transp-toggle.on     { background: #00E5C8 !important; color: #080810 !important; border: none !important; }

#negPrompt              { background: #ffffff !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; font-family: var(--font-body) !important; }
#negPrompt:focus        { border-color: #5B35C8 !important; outline: none !important; }
#negPrompt::placeholder { color: #b0b8c8 !important; }
.neg-hint               { color: #b0b8c8 !important; }

/* ── GENERA — bottone principale ── */
#genBtn {
  background:    #5B35C8 !important;
  color:         #ffffff !important;
  font-family:   var(--font-body) !important;
  font-size:     15px !important;
  font-weight:   700 !important;
  letter-spacing: .5px !important;
  box-shadow:    0 3px 14px rgba(91,53,200,.3) !important;
  border-radius: 8px !important;
  padding:       22px !important;
}
#genBtn:not(:disabled):hover { background: #3D2F8F !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(91,53,200,.35) !important; }
#genBtn:disabled             { background: #e0e0e0 !important; color: #aaa !important; box-shadow: none !important; }

/* ── Status / Cooldown ── */
#statusBar         { background: #ffffff !important; border-color: var(--border) !important; }
#statusBar.ok      { border-color: #5B35C8 !important; color: #3D2F8F !important; }
#statusBar.loading { border-color: #5B35C8 !important; }
#statusBar.fail    { border-color: var(--danger) !important; }
.status-spin       { border-color: rgba(91,53,200,.15) !important; border-top-color: #5B35C8 !important; }
#cooldownBar       { background: #ffffff !important; border: 1px solid #e2e4ea !important; }
#cooldownText      { color: #666 !important; }
#cooldownFill      { background: linear-gradient(90deg, #5B35C8, #3D2F8F) !important; }
#cooldownTrack     { background: #eee !important; }

/* ── Accordion ── */
.accordion-header       { background: #1e2132 !important; }
.accordion-header:hover { opacity: .88 !important; }
.accordion-body         { background: #ffffff !important; border: 1px solid var(--border) !important; border-top: none !important; }
.adv-label              { color: #9098a9 !important; }
.adv-input              { background: #f8f9fb !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-family: var(--font-body) !important; border-radius: 6px !important; }
.adv-input:focus        { border-color: #5B35C8 !important; outline: none !important; }
.adv-toggle-row         { border-bottom: 1px solid #f0f0f0 !important; }
.adv-toggle-row span    { color: #444 !important; font-family: var(--font-body) !important; }
.adv-hint               { color: #b0b8c8 !important; }
.toggle-track           { background: #ddd !important; }
.toggle-track.on        { background: #5B35C8 !important; }
.toggle-thumb           { background: #ffffff !important; }
.toggle-track.on .toggle-thumb { left: 21px; }

/* ════════════════════════════════════════════════════
   5. PREVIEW COLUMN
════════════════════════════════════════════════════ */
#preview-col    { background: var(--bg) !important; padding: 0 !important; }
#preview-main   { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 16px 16px 10px !important; }
#preview-header { display: none !important; }
#preview-actions { flex-shrink: 0 !important; background: #ffffff !important; }

#previewPlaceholder { border: 2px dashed var(--border) !important; background: transparent !important; }
.preview-icon       { opacity: .25 !important; }
.preview-text       { color: #c0c8d8 !important; font-family: var(--font-body) !important; font-size: 15px !important; }
.preview-sub        { color: #c0c8d8 !important; font-family: var(--font-body) !important; }

#outputArea    { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
#spinnerBox::before { background: radial-gradient(circle, rgba(91,53,200,.1), transparent 70%) !important; }
.big-spin      { border-color: #eee !important; border-top-color: #5B35C8 !important; border-right-color: #3D2F8F !important; }
#spinnerMsg    { color: #9098a9 !important; font-family: var(--font-body) !important; }

.img-actions        { background: transparent !important; border-top: 1px solid var(--border) !important; padding-top: 14px !important; }
.img-btn            { background: #1e2132 !important; border: none !important; color: #ffffff !important; font-family: var(--font-body) !important; border-radius: 10px !important; padding: 11px 6px !important; font-size: 12px !important; font-weight: 700 !important; }
.img-btn:hover      { background: #2d3142 !important; }
.img-btn.primary    { background: #1e2132 !important; color: #ffffff !important; border: none !important; }

#modificaPanel            { background: #fafafa !important; border-top: 1px solid var(--border) !important; }
.modifica-label           { color: #9098a9 !important; font-family: var(--font-body) !important; }
#modificaInput            { background: #ffffff !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; font-family: var(--font-body) !important; border-radius: 8px !important; }
#modificaInput:focus      { border-color: #5B35C8 !important; outline: none !important; }
#modificaInput::placeholder { color: #b0b8c8 !important; }
#modificaGoBtn            { background: #5B35C8 !important; color: #ffffff !important; border-radius: 8px !important; }
#modificaGoBtn:hover      { background: #3D2F8F !important; }

#compareOverlay           { background: #ffffff !important; border-radius: 10px !important; }
.compare-tag              { color: #9098a9 !important; }
.compare-side:first-child { border-right: 1px solid var(--border) !important; }
.compare-actions          { border-top: 1px solid var(--border) !important; }
.compare-btn.keep         { background: #5B35C8 !important; color: #ffffff !important; }
.compare-btn.back         { background: #f5f5f7 !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.compare-btn.back:hover   { border-color: #5B35C8 !important; }

#ctaWrap     { border-top: 1px solid var(--border) !important; background: #fafafa !important; }
.ctaB-tag    { color: #5B35C8 !important; font-family: var(--font-body) !important; }
.ctaB-title  { color: var(--text) !important; font-family: var(--font-body) !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; }
.ctaB-btn    { background: #5B35C8 !important; color: #ffffff !important; font-family: var(--font-body) !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .5px !important; text-transform: uppercase !important; }

/* ════════════════════════════════════════════════════
   6. FAQ
════════════════════════════════════════════════════ */
#screen-faq { background: var(--bg) !important; }
.faq-section-title        { color: #5B35C8 !important; }
.faq-section-title::after { background: rgba(91,53,200,.12) !important; }
.faq-item                 { border-color: var(--border) !important; }
.faq-item:hover           { border-color: rgba(91,53,200,.3) !important; }
.faq-item.open            { border-color: #5B35C8 !important; }
.faq-q                    { background: #ffffff !important; }
.faq-q-text               { color: var(--text) !important; font-family: var(--font-body) !important; }
.faq-q-icon               { color: #5B35C8 !important; }
.faq-item.open .faq-q     { background: rgba(91,53,200,.03) !important; }
.faq-a                    { background: #ffffff !important; }
.faq-a-text               { color: #666 !important; border-top: 1px solid var(--border) !important; font-family: var(--font-body) !important; }

/* ════════════════════════════════════════════════════
   7. GALLERY
════════════════════════════════════════════════════ */
#screen-gallery { background: var(--bg) !important; }
.wonder-title   { background: linear-gradient(90deg, #5B35C8, #3D2F8F) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-family: var(--font-body) !important; }
.gallery-item   { background: #ffffff !important; border-color: var(--border) !important; border-radius: 10px !important; }
.gallery-caption{ color: #9098a9 !important; font-family: var(--font-body) !important; }
.gal-btn        { background: #f5f5f7 !important; border: 1px solid var(--border) !important; color: #555 !important; font-family: var(--font-body) !important; }
.gal-btn:hover  { border-color: #5B35C8 !important; color: #5B35C8 !important; }
.gal-btn.ac     { color: #5B35C8 !important; border-color: rgba(91,53,200,.25) !important; }
.empty-state    { background: #ffffff !important; border-color: var(--border) !important; }
.empty-state p,
.empty-state span { color: #9098a9 !important; }

/* ════════════════════════════════════════════════════
   8. MODAL
════════════════════════════════════════════════════ */
#modal        { background: rgba(20,18,40,.92) !important; backdrop-filter: blur(12px) !important; }
.modal-btn.dl { background: #5B35C8 !important; color: #ffffff !important; }
.modal-btn.cl { background: #ffffff !important; color: #1e2132 !important; border: 1px solid #ddd !important; }

/* ════════════════════════════════════════════════════
   9. MOBILE
════════════════════════════════════════════════════ */
#mobile-header { background: #1e2132 !important; border-bottom: none !important; }
.mobile-logo,
.mobile-logo-text { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; font-family: var(--font-body) !important; }
.mobile-logo-ai   { color: #5B35C8 !important; }

#bottom-nav                { background: #ffffff !important; border-top: 1px solid var(--border) !important; }
.nav-btn.active            { background: rgba(91,53,200,.05) !important; }
.nav-label                 { color: #9098a9 !important; font-family: var(--font-body) !important; }
.nav-btn.active .nav-label { color: #5B35C8 !important; }
.nav-btn.active .nav-icon  { filter: none !important; }

#genBtnMobile button          { background: #5B35C8 !important; color: #ffffff !important; font-family: var(--font-body) !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: 0 3px 14px rgba(91,53,200,.3) !important; padding: 20px !important; }
#genBtnMobile button:disabled { background: #e0e0e0 !important; color: #aaa !important; box-shadow: none !important; }

/* ── MOBILE: footer in-flow, scorrimento normale ── */
@media(max-width:1023px) {
  #app #controls-footer {
    position: static !important;
    background: #d8dce6 !important;
    padding: 10px 14px 76px !important;
    border-top: none !important;
    z-index: auto !important;
  }
  #controls-footer #genBtn {
    display: block !important;
    padding: 15px !important;
    font-size: 14px !important;
    letter-spacing: .5px !important;
    border-radius: 8px !important;
  }
  .footer-pills            { margin-bottom: 8px !important; gap: 7px !important; }
  .neg-toggle,
  .transp-toggle           { padding: 9px 8px !important; font-size: 11px !important; border-radius: 10px !important; }
  #genBtnMobile            { display: none !important; }
  #app #controls-scroll    { padding: 10px 16px 18px !important; gap: 14px !important; }
}

/* ════════════════════════════════════════════════════
   10. ADMIN
════════════════════════════════════════════════════ */
#adminLogin         { background: #1e2132 !important; }
.admin-logo         { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; background: none !important; -webkit-text-fill-color: #ffffff !important; }
.admin-sub          { color: rgba(255,255,255,.5) !important; }
.admin-field input  { background: rgba(255,255,255,.08) !important; border: 1.5px solid rgba(255,255,255,.12) !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; border-radius: 7px !important; }
.admin-field input:focus       { border-color: #5B35C8 !important; }
.admin-field input::placeholder{ color: rgba(255,255,255,.3) !important; }
.admin-login-btn               { background: #5B35C8 !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; border-radius: 7px !important; }
.admin-login-btn:hover         { background: #3D2F8F !important; }
.admin-close-login             { color: rgba(255,255,255,.4) !important; }
#loginError                    { color: #ffcdd2 !important; }

#adminPanel          { background: #f0f2f5 !important; }
.admin-topbar        { background: #ffffff !important; border-bottom: 1px solid var(--border) !important; }
.admin-topbar-title  { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; color: #1e2132 !important; }
#adminUserLabel      { color: #9098a9 !important; }
.admin-exit          { background: transparent !important; border: 1.5px solid var(--border) !important; color: #666 !important; border-radius: 6px !important; }
.admin-exit:hover    { border-color: var(--danger) !important; color: var(--danger) !important; }

.admin-tabs          { background: #1e2132 !important; border-right: none !important; }
.admin-tab           { color: rgba(255,255,255,.55) !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; border: none !important; border-radius: 0 !important; }
.admin-tab:hover     { background: rgba(255,255,255,.06) !important; color: #ffffff !important; }
.admin-tab.active    { background: rgba(255,255,255,.10) !important; color: #ffffff !important; border-left: 3px solid #5B35C8 !important; border-radius: 0 !important; }

.admin-content       { background: #f0f2f5 !important; }
.a-title             { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; color: #1e2132 !important; background: none !important; -webkit-text-fill-color: #1e2132 !important; }
.a-desc              { color: #9098a9 !important; }
.a-card              { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; }
.a-card-title        { color: #9098a9 !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.a-row               { border-bottom: 1px solid #f2f2f4 !important; }
.a-row:last-child    { border-bottom: none !important; }
.a-row-label         { color: #1e2132 !important; font-family: 'Inter', sans-serif !important; }
.a-row-sub           { color: #9098a9 !important; }
.a-input             { background: #f5f5f7 !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-family: 'Inter', sans-serif !important; border-radius: 6px !important; }
.a-input:focus       { border-color: #5B35C8 !important; outline: none !important; }
.a-select            { background: #f5f5f7 !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-family: 'Inter', sans-serif !important; border-radius: 6px !important; }
.a-btn.primary       { background: #5B35C8 !important; color: #ffffff !important; border: none !important; font-family: 'Inter', sans-serif !important; border-radius: 7px !important; }
.a-btn.primary:hover { background: #3D2F8F !important; }
.a-btn.ghost         { background: #ffffff !important; border: 1px solid var(--border) !important; color: #444 !important; font-family: 'Inter', sans-serif !important; border-radius: 7px !important; }
.a-btn.ghost:hover   { border-color: #5B35C8 !important; }
.a-btn.danger        { background: transparent !important; border: 1px solid var(--danger) !important; color: var(--danger) !important; border-radius: 7px !important; }

.admin-save-bar      { background: #ffffff !important; border-top: 1px solid var(--border) !important; }
.admin-save-msg      { color: #9098a9 !important; }
.admin-save-msg.ok   { color: #5B35C8 !important; }

.s-toggle            { background: #ddd !important; }
.s-toggle.on         { background: #5B35C8 !important; }
.s-toggle-thumb      { background: #ffffff !important; }

.api-card            { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.api-active-badge    { background: rgba(91,53,200,.08) !important; border-color: rgba(91,53,200,.2) !important; color: #5B35C8 !important; }
.user-avatar         { background: linear-gradient(135deg, #5B35C8, #3D2F8F) !important; color: #ffffff !important; }
.user-badge.admin    { background: rgba(91,53,200,.08) !important; color: #5B35C8 !important; }
.cat-admin-block     { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.cat-admin-icon      { color: #5B35C8 !important; }
.admin-save-msg.ok   { color: #5B35C8 !important; }

/* ════════════════════════════════════════════════════
   11. SCROLLBAR
════════════════════════════════════════════════════ */
::-webkit-scrollbar            { width: 4px; height: 4px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: #d0d4dc; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover{ background: #b0b8c8; }