/* ── 1. no more welcome gate ── */
#wizWelcome{ display:none !important; }

/* ── 2. credits card: it was cream-on-white ── */
#creditsModal, #creditsModal *{ color:var(--ok-ink) !important; }
#creditsModal > div[style*="border-radius:12px"]{
  background:var(--ok-soft) !important;
  border:1px solid var(--ok-line) !important;
}
#credits-name-en, #credits-name-ar{ color:var(--ok-ink) !important; font-weight:900 !important; }
#credits-role-en, #credits-role-ar{ color:var(--ok-ink-soft) !important; }
#creditsModal div[style*="Created by"], #creditsModal [style*="text-transform:uppercase"]{
  color:var(--ok-ink-faint) !important;
}
#creditsModal button[onclick*="closeCredits"]{
  background:#fff !important; border:1px solid var(--ok-line) !important;
  color:var(--ok-ink-soft) !important;
}
#creditsModal div[style*="height:1px"]{ background:var(--ok-line) !important; }

/* ── 3. component category chips ── */
.cg-tab{
  font-family:var(--cs-font) !important;
  font-size:12px !important; font-weight:800 !important; letter-spacing:0 !important;
  padding:7px 13px !important; border-radius:999px !important;
  color:var(--ok-ink-soft) !important;
  background:linear-gradient(180deg,#ffffff,#f2effa) !important;
  border:1px solid var(--ok-line) !important;
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 #e4e1f1 !important;
  transition:transform .12s, box-shadow .12s !important;
}
.cg-tab:hover{ color:var(--ok-ink) !important; border-color:#d6d0ec !important; transform:translateY(-1px); }
.cg-tab.on{
  color:var(--gel-gold-ink) !important;
  background:linear-gradient(180deg,#fff3d2,#ffd98a) !important;
  border-color:rgba(43,39,64,.09) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 3px 0 var(--gel-gold-rim) !important;
}
.cg-thumb{ background:var(--ok-soft) !important; border-color:var(--ok-line) !important; }
.cg-thumb.sel, .cg-thumb:hover{ border-color:var(--gel-gold-rim) !important; }
.cg-grid{ max-height:min(46vh,420px) !important; }

/* ── 4. custom artwork panel — was dark-on-dark, now legible ── */
.lay-art2{ border-top:1px solid var(--ok-line) !important; }
.lay-art2 .lah{
  font-family:var(--cs-font) !important; font-size:13px !important; font-weight:800 !important;
  letter-spacing:0 !important; text-transform:none !important; color:var(--ok-ink) !important;
}
.lay-art2 .upl{
  background:#fff !important;
  border:1.5px dashed #cfc8e6 !important;
  color:var(--ok-ink-soft) !important;
  font-family:var(--cs-font) !important; font-weight:700 !important;
  border-radius:12px !important; padding:12px 14px !important;
}
.lay-art2 .upl:hover{ border-color:var(--gel-gold-rim) !important; color:var(--ok-ink) !important; background:#fffdf6 !important; }
.lay-art2 .row, .lay-art2 .row label{
  color:var(--ok-ink-soft) !important; font-family:var(--cs-font) !important; font-weight:700 !important;
}
.lay-art2 select{
  background:#fff !important; border:1px solid var(--ok-line) !important;
  color:var(--ok-ink) !important; border-radius:9px !important; font-weight:700;
}
.lay-art2 input[type=range]{ accent-color:var(--gel-gold-rim) !important; }
.lay-art2 .lasw{ background:#ded9ee !important; }
.lay-art2 .lasw.on{ background:var(--gel-gold-rim) !important; }
.lay-art2 .lasw::after{ background:#fff !important; }
.lay-art2 .labtn, .lay-art2 .clear-btn{
  font-family:var(--cs-font) !important; font-weight:800 !important;
  color:var(--gel-rose-ink) !important;
}