:root{
  --cs-bg:#eceef7;
  --cs-panel:#ffffff; --cs-panel-soft:#f7f6fc;
  --cs-ink:#2b2740; --cs-ink-soft:#6f6a85; --cs-ink-faint:#9b96ae;
  --cs-line:#e7e4f1; --cs-line-2:#eeecf6;
  --cs-primary:#f0a81e; --cs-primary-l:#ffc851; --cs-primary-d:#cf8c05;
  --cs-font:'Nunito','Baloo Bhaijaan 2','Cairo',system-ui,-apple-system,sans-serif;
  --cs-spring:transform .16s cubic-bezier(.34,1.56,.64,1);
}

/* ── shell: column body, top step bar, workspace row ── */
body{ background:var(--cs-bg)!important; color:var(--cs-ink)!important; }
body.cs-app{ flex-direction:column!important; }
#workspace{ flex:1 1 auto; display:flex; min-height:0; width:100%; }
#workspace>.sidebar,#workspace>.main{ height:auto!important; min-height:0; align-self:stretch; }
.sidebar{ height:auto!important; position:relative!important; top:auto!important;
  width:376px!important; min-width:376px!important;
  background:var(--cs-panel)!important; border-right:1px solid var(--cs-line)!important;
  box-shadow:6px 0 24px rgba(43,39,64,.05)!important; display:flex; flex-direction:column; }
.main,#mainArea{ height:auto!important;
  background:radial-gradient(1200px 460px at 50% -12%, #ffffff, transparent 62%), var(--cs-bg)!important; }
#topBanner{ display:none!important; }
.sb-head{ display:none!important; }
.actions{ display:none!important; }

#stepBar{ visibility:hidden; opacity:0; transition:opacity .35s ease; }
body.cs-ready #stepBar{ visibility:visible; opacity:1; }

/* ══════════ TOP STEP BAR ══════════ */
#stepBar{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:16px; padding:12px 22px 0; width:100%;
  background:linear-gradient(180deg,#fbfaff,#f1eff9); border-bottom:1px solid var(--cs-line);
  box-shadow:0 2px 14px rgba(43,39,64,.05); z-index:30;
}
.cs-brand{ display:flex; align-items:center; gap:10px; padding-bottom:12px; flex-shrink:0; }
.cs-logo{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:20px;
  background:linear-gradient(135deg,var(--cs-primary-l),var(--cs-primary));
  box-shadow:0 5px 0 var(--cs-primary-d), 0 8px 18px rgba(240,168,30,.32); }
.cs-brand-txt{ font-family:var(--cs-font); font-weight:800; font-size:17px; color:var(--cs-ink); white-space:nowrap; }
.cs-tabs-wrap{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:visible; }
.cs-tab-strip{ display:flex; gap:6px; align-items:flex-end; padding:0 2px; }
.cs-step-tab{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 16px 14px; border:none; border-radius:15px 15px 0 0;
  font-family:var(--cs-font); font-size:13.5px; font-weight:800; letter-spacing:.1px; color:#fff;
  background:var(--tc,#bbb); opacity:.5; transform:translateY(7px);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);
  transition:var(--cs-spring), opacity .16s, box-shadow .16s; white-space:nowrap;
}
.cs-step-tab .cs-num{ width:23px; height:23px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.28); color:#fff; font-size:13px; font-weight:800;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.cs-step-tab:hover{ opacity:.82; transform:translateY(3px); }
.cs-step-tab.done{ opacity:.78; }
.cs-step-tab.done .cs-num{ background:rgba(255,255,255,.9); color:var(--tc); }
.cs-step-tab.active{ opacity:1; transform:translateY(0);
  box-shadow:0 -3px 0 rgba(255,255,255,.9) inset, 0 -8px 20px color-mix(in srgb, var(--tc) 45%, transparent); }
.cs-step-tab:active{ transform:translateY(4px) scale(.99); box-shadow:inset 0 -1px 0 rgba(0,0,0,.14); }
.cs-util{ display:flex; align-items:center; gap:7px; padding-bottom:12px; flex-shrink:0; }
.cs-ic{ width:38px; height:38px; border-radius:11px; border:1px solid var(--cs-line); background:#fff;
  color:var(--cs-ink-soft); font-size:16px; cursor:pointer; display:grid; place-items:center;
  transition:var(--cs-spring), background .15s, color .15s; box-shadow:0 3px 0 var(--cs-line); }
.cs-ic:hover{ color:var(--cs-ink); background:var(--cs-panel-soft); }
.cs-ic:active{ transform:translateY(3px); box-shadow:0 0 0 var(--cs-line); }
/* advanced (expert) mode: hide step tabs + headline, app uses its own #sbTabs */
body.wiz-advanced #csTabStrip,body.wiz-advanced #csStepHead{ display:none!important; }

/* ══════════ SIDEBAR HEADLINE ══════════ */
#csStepHead{ padding:18px 20px 12px; border-bottom:1px solid var(--cs-line-2); flex-shrink:0;
  background:linear-gradient(180deg,var(--cs-panel),var(--cs-panel-soft)); }
.cs-step-eyebrow{ font-family:var(--cs-font); font-weight:800; font-size:11.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cs-step-c,var(--cs-primary)); margin-bottom:4px; }
.cs-step-title{ font-family:var(--cs-font); font-weight:800; font-size:22px; color:var(--cs-ink); line-height:1.15; }

/* ══════════ GUIDED WIZARD (in sidebar) → cheerful ══════════ */
#wizBar{ background:transparent!important; border-bottom:1px solid var(--cs-line-2)!important;
  padding:14px 20px!important; max-height:none!important; }
.wz-prevcap{ font-family:var(--cs-font)!important; font-weight:800!important; color:var(--cs-ink-soft)!important; letter-spacing:1.4px!important; }
.wz-prev{ background:#fff!important; border:1.5px solid var(--cs-line)!important; border-radius:12px!important;
  box-shadow:0 10px 26px rgba(43,39,64,.12)!important; }
.wz-check{ display:none!important; }          /* replaced by the top step tabs */
.wz-instr{ font-family:var(--cs-font)!important; font-style:normal!important; font-size:14px!important;
  color:var(--cs-ink-soft)!important; line-height:1.45!important; margin-bottom:12px!important; }
.wz-nav{ gap:10px!important; }
.wz-btn{ font-family:var(--cs-font)!important; font-weight:800!important; font-size:14.5px!important;
  letter-spacing:.2px!important; text-transform:none!important; border-radius:13px!important; padding:12px!important;
  transition:var(--cs-spring), box-shadow .14s, filter .14s!important; }
.wz-back{ background:#fff!important; color:var(--cs-ink)!important; border:1.5px solid var(--cs-line)!important;
  box-shadow:0 4px 0 var(--cs-line)!important; flex:0 0 38%!important; }
.wz-back:hover{ background:var(--cs-panel-soft)!important; }
.wz-back:active{ transform:translateY(4px)!important; box-shadow:0 0 0 var(--cs-line)!important; }
.wz-next{ color:#4a2e00!important; background:linear-gradient(180deg,var(--cs-primary-l),var(--cs-primary))!important;
  box-shadow:0 5px 0 var(--cs-primary-d), 0 9px 20px rgba(240,168,30,.34)!important; }
.wz-next:hover{ filter:brightness(1.03); }
.wz-next:active{ transform:translateY(5px)!important; box-shadow:0 0 0 var(--cs-primary-d)!important; }
.wz-adv{ font-family:var(--cs-font)!important; font-weight:700!important; font-size:12.5px!important; color:var(--cs-ink-soft)!important; margin-top:11px!important; }
.wz-adv:hover{ color:var(--cs-primary-d)!important; }
#projSec .btn,.wz-nav+*{ font-family:var(--cs-font)!important; }

/* ══════════ WELCOME OVERLAY → cheerful light ══════════ */
#wizWelcome{ background:
  radial-gradient(900px 520px at 20% -10%, rgba(255,107,107,.14), transparent 60%),
  radial-gradient(900px 520px at 85% 110%, rgba(61,139,255,.14), transparent 60%),
  linear-gradient(180deg,#fbfaff 0%,#f1eff9 100%)!important; }
#wizWelcome .ww-card{ background:#fff!important; border:1px solid var(--cs-line)!important;
  box-shadow:0 30px 80px rgba(43,39,64,.24)!important; border-radius:22px!important; }
#wizWelcome .ww-emblem{ background:linear-gradient(135deg,var(--cs-primary-l),var(--cs-primary))!important;
  color:#4a2e00!important; box-shadow:0 8px 22px rgba(240,168,30,.4)!important; }
#wizWelcome .ww-title{ font-family:var(--cs-font)!important; font-weight:800!important; color:var(--cs-ink)!important; }
#wizWelcome .ww-sub{ font-family:var(--cs-font)!important; font-style:normal!important; color:var(--cs-ink-soft)!important; }
#wizWelcome .ww-step{ font-family:var(--cs-font)!important; font-weight:700!important; color:var(--cs-ink)!important; }
#wizWelcome .ww-n{ background:rgba(240,168,30,.16)!important; border:1px solid rgba(240,168,30,.5)!important; color:var(--cs-primary-d)!important; }
#wizWelcome .ww-begin{ font-family:var(--cs-font)!important; font-weight:800!important; color:#4a2e00!important;
  background:linear-gradient(180deg,var(--cs-primary-l),var(--cs-primary))!important;
  box-shadow:0 6px 0 var(--cs-primary-d), 0 12px 30px rgba(240,168,30,.35)!important; transition:var(--cs-spring),filter .14s!important; }
#wizWelcome .ww-begin:hover{ filter:brightness(1.04); }
#wizWelcome .ww-begin:active{ transform:translateY(5px)!important; box-shadow:0 1px 0 var(--cs-primary-d)!important; }
#wizWelcome .ww-skip{ font-family:var(--cs-font)!important; color:var(--cs-ink-soft)!important; }
#wizWelcome .ww-skip:hover{ color:var(--cs-primary-d)!important; }

/* ══════════ PANEL BODY (airy) ══════════ */
.sb-panel{ background:transparent!important; }
.sb-body{ padding:16px 20px 14px!important; gap:5px!important; }
.sec{ color:var(--cs-ink)!important; font-family:var(--cs-font)!important; font-weight:800!important;
  font-size:12px!important; letter-spacing:.8px!important; text-transform:uppercase!important;
  margin-top:15px; margin-bottom:6px; opacity:1!important; }
.sec svg{ color:var(--cs-primary)!important; opacity:1!important; }
.sec::after{ background:linear-gradient(90deg,var(--cs-line),transparent)!important; }
.f{ margin-bottom:12px!important; gap:6px!important; }
.f label{ font-family:var(--cs-font)!important; font-weight:700!important; font-style:normal!important;
  font-size:13.5px!important; color:var(--cs-ink-soft)!important; }
.f input,.f textarea{ background:#fff!important; border:1.5px solid var(--cs-line)!important; color:var(--cs-ink)!important;
  font-family:var(--cs-font)!important; font-size:15px!important; padding:11px 13px!important; border-radius:11px!important;
  transition:border-color .15s, box-shadow .15s; }
.f input::placeholder,.f textarea::placeholder{ color:var(--cs-ink-faint)!important; }
.f input:focus,.f textarea:focus{ border-color:var(--cs-primary)!important; box-shadow:0 0 0 3.5px rgba(240,168,30,.18)!important; outline:none!important; }
.tog-row label{ font-family:var(--cs-font)!important; font-style:normal!important; font-weight:700!important; font-size:14px!important; color:var(--cs-ink)!important; }
.tog{ background:var(--cs-line)!important; border:1px solid var(--cs-line)!important; width:40px!important; height:23px!important; }
.tog:checked{ background:#2fb86b!important; border-color:#2fb86b!important; }
.up-btn{ font-family:var(--cs-font)!important; font-weight:700!important; font-size:14px!important; color:var(--cs-ink)!important;
  background:var(--cs-panel-soft)!important; border:1.5px dashed var(--cs-line)!important; border-radius:12px!important; padding:11px 13px!important; }
.up-btn:hover{ background:#fff!important; border-color:var(--cs-primary)!important; }
.up-btn svg{ color:var(--cs-primary)!important; }
.up-btn.has-file{ border-style:solid!important; border-color:#2fb86b!important; background:#f2fbf6!important; }
.up-btn .fn{ color:var(--cs-ink-faint)!important; }
.clear-btn{ background:#fff!important; border:1px solid var(--cs-line)!important; color:var(--cs-ink-soft)!important; border-radius:10px!important; }
.clear-btn:hover{ background:#fdecec!important; color:#e05656!important; border-color:#f3c0c0!important; }
.tx-chip{ font-family:var(--cs-font)!important; font-weight:700!important; font-size:11px!important; color:var(--cs-ink-soft)!important; }
.tx-chip:hover,.tx-chip.active{ color:var(--cs-primary-d)!important; }
.tx-chip.active .tx-prev{ border-color:var(--cs-primary)!important; box-shadow:0 0 0 3px rgba(240,168,30,.22)!important; }
.tx-prev{ border:1.5px solid var(--cs-line)!important; border-radius:9px!important; }
.scheme-card{ border:1.5px solid var(--cs-line)!important; border-radius:12px!important; }
.scheme-card:hover{ border-color:var(--cs-primary)!important; box-shadow:0 8px 20px rgba(43,39,64,.14)!important; transform:translateY(-2px); }
.rgb-open-btn{ font-family:var(--cs-font)!important; font-weight:800!important; font-size:14px!important; border-radius:12px!important; color:#fff!important; }
.batch-note{ font-family:var(--cs-font)!important; font-size:13.5px!important; color:var(--cs-ink-soft)!important;
  background:var(--cs-panel-soft)!important; border:1px solid var(--cs-line)!important; border-radius:12px!important; padding:11px 13px!important; }
#fieldIndex,.field-index-hint,#contextPanel{ font-family:var(--cs-font)!important; }
.field-index-hint{ color:var(--cs-ink-soft)!important; }
.sb-body div[style*="rgba(216,203,179"]{ color:var(--cs-ink-soft)!important; }

/* ══════════ TOOLBAR ══════════ */
.main-toolbar{ background:var(--cs-panel)!important; border-bottom:1px solid var(--cs-line)!important;
  box-shadow:0 2px 10px rgba(43,39,64,.04)!important; padding:9px 20px!important; }
.toolbar-label{ font-family:var(--cs-font)!important; font-weight:800!important; color:var(--cs-ink-soft)!important; letter-spacing:1.2px!important; }
.toolbar-sep{ background:var(--cs-line)!important; }
.tb-btn{ font-family:var(--cs-font)!important; font-weight:700!important; font-size:13px!important;
  background:var(--cs-panel-soft)!important; border:1px solid var(--cs-line)!important; color:var(--cs-ink-soft)!important;
  border-radius:10px!important; padding:7px 12px!important; transition:var(--cs-spring), background .14s, color .14s; }
.tb-btn:hover{ background:#eceafa!important; color:var(--cs-ink)!important; }
.tb-btn.active{ background:rgba(240,168,30,.14)!important; color:var(--cs-primary-d)!important; border-color:rgba(240,168,30,.4)!important; }
.tb-btn:active{ transform:translateY(2px); }
.zoom-val{ font-family:var(--cs-font)!important; font-weight:800!important; font-size:14px!important; color:var(--cs-ink)!important; }
.prev-label{ font-family:var(--cs-font)!important; color:var(--cs-ink-faint)!important; }
.sheet-wrap{ box-shadow:0 22px 55px rgba(43,39,64,.20), 0 0 0 1px rgba(43,39,64,.06)!important; }

/* ══════════ APP BUTTONS (.btn) satisfying ══════════ */
.btn{ font-family:var(--cs-font)!important; font-weight:800!important; text-transform:none!important;
  letter-spacing:.2px!important; font-size:15px!important; border-radius:13px!important; padding:13px 16px!important;
  transition:var(--cs-spring), box-shadow .14s, background .14s, filter .14s; }
.btn-p{ color:#4a2e00!important; background:linear-gradient(180deg,var(--cs-primary-l),var(--cs-primary))!important;
  box-shadow:0 5px 0 var(--cs-primary-d), 0 9px 20px rgba(240,168,30,.32)!important; }
.btn-p:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.btn-p:active{ transform:translateY(5px)!important; box-shadow:0 0 0 var(--cs-primary-d)!important; }
.btn-s{ color:var(--cs-ink)!important; background:#fff!important; border:1.5px solid var(--cs-line)!important; box-shadow:0 4px 0 var(--cs-line)!important; }
.btn-s:hover{ background:var(--cs-panel-soft)!important; }
.btn-s:active{ transform:translateY(4px)!important; box-shadow:0 0 0 var(--cs-line)!important; }

/* ripple */
.cs-rippling{ position:relative; overflow:hidden; }
.cs-ripple{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.5); animation:csRip .55s ease-out forwards; mix-blend-mode:overlay; }
@keyframes csRip{ to{ transform:scale(2.4); opacity:0; } }

/* ══════════ MODALS → light ══════════ */
#templateModal,#fontPreviewModal,.modal-panel,.credits-modal{
  background:linear-gradient(180deg,#ffffff,#f7f6fc)!important; border:1px solid var(--cs-line)!important;
  box-shadow:0 30px 80px rgba(43,39,64,.28)!important; color:var(--cs-ink)!important; }
#templateOverlay,#fontPreviewOverlay{ background:rgba(43,39,64,.34)!important; }
.tmpl-card{ background:#fff!important; border:1.5px solid var(--cs-line)!important; }
.tmpl-card:hover{ border-color:var(--cs-primary)!important; }
.tmpl-card.active{ border-color:var(--cs-primary)!important; box-shadow:0 0 0 2px var(--cs-primary),0 8px 20px rgba(43,39,64,.16)!important; }
.tmpl-name{ font-family:var(--cs-font)!important; color:var(--cs-ink)!important; font-weight:700!important; }

/* ══════════ SPLASH → cheerful ══════════ */
#langSplash{ background:
  radial-gradient(900px 520px at 20% -10%, rgba(255,107,107,.14), transparent 60%),
  radial-gradient(900px 520px at 85% 110%, rgba(61,139,255,.14), transparent 60%),
  linear-gradient(180deg,#fbfaff 0%,#f1eff9 100%)!important; }
#langSplash::before{ background:radial-gradient(760px 380px at 50% 6%, rgba(240,168,30,.12), transparent 62%)!important; }
#langSplash::after{ background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,.5) 50%, transparent 56%)!important; }
.splash-title{ font-family:var(--cs-font)!important; font-weight:800!important; color:var(--cs-ink)!important; text-shadow:none!important; }
.splash-subtitle{ color:var(--cs-ink-soft)!important; }
.splash-ornament-gem{ color:var(--cs-primary)!important; text-shadow:none!important; }
.splash-ornament-line{ background:linear-gradient(90deg,transparent,var(--cs-primary))!important; }
.splash-ornament-line.r{ background:linear-gradient(90deg,var(--cs-primary),transparent)!important; }
#pickEn,#pickAr,.lang-btn{ background:#fff!important; border:1.5px solid var(--cs-line)!important;
  box-shadow:0 10px 30px rgba(43,39,64,.12)!important; border-radius:18px!important; }
#pickEn:hover,#pickAr:hover,.lang-btn:hover{ transform:translateY(-6px)!important; border-color:var(--cs-primary)!important; box-shadow:0 22px 46px rgba(43,39,64,.18)!important; }
.lang-btn-main{ font-family:var(--cs-font)!important; font-weight:800!important; color:var(--cs-ink)!important; text-shadow:none!important; }
.lang-btn-sub{ color:var(--cs-ink-soft)!important; }
.lang-btn-badge{ background:linear-gradient(135deg,var(--cs-primary-l),var(--cs-primary))!important; color:#4a2e00!important; }
.splash-sep{ background:linear-gradient(180deg,transparent,var(--cs-line),transparent)!important; }
.splash-sep::after{ color:var(--cs-primary)!important; text-shadow:none!important; }
.toast{ font-family:var(--cs-font)!important; }

@media (prefers-reduced-motion:reduce){
  .cs-step-tab,.btn,.wz-btn,.cs-ic,.tb-btn{ transition:none!important; }
  .cs-ripple{ display:none!important; }
}
@media print{ #stepBar,#csStepHead{ display:none!important; } }
@media (max-width:920px){ .sidebar{ width:322px!important; min-width:322px!important; } .cs-brand-txt{ display:none; } }