:root{
  --ok-ink:#2b2740;  --ok-ink-soft:#6f6a85;  --ok-ink-faint:#a09aba;
  --ok-line:#e6e3f2; --ok-panel:#ffffff;     --ok-soft:#f6f4fd;

  /* pastel gel families: face → mid → rim (the 3D lip) */
  --gel-gold-a:#fff3d2;  --gel-gold-b:#ffd98a;  --gel-gold-rim:#d9a532;  --gel-gold-ink:#5c4413;
  --gel-lilac-a:#f6f2ff; --gel-lilac-b:#ddd2f7; --gel-lilac-rim:#a996d8; --gel-lilac-ink:#463a63;
  --gel-mint-a:#effcf5;  --gel-mint-b:#c6efdb; --gel-mint-rim:#84c9a8;  --gel-mint-ink:#245442;
  --gel-rose-a:#fff1f3;  --gel-rose-b:#ffd2da; --gel-rose-rim:#e0929f;  --gel-rose-ink:#6b2f3a;
  --gel-sky-a:#f0f7ff;   --gel-sky-b:#cbe2fb;  --gel-sky-rim:#8fb6e2;   --gel-sky-ink:#22456b;
}

/* ─────────── 1. CAMBRIDGE PURGE (chrome only, never the canvas) ─────────── */
#sb-title-h1, .panel-title, .sb-group-title, .sb-label, .sb-section-title,
.toolbar-label, .wz-btn, .wz-row, .wz-instr, .wz-adv, .sec,
.pg-h, #platesGallery .pg-h, #componentsGallery .pg-h, .pg-name, .pg-fallback,
.pg-actions button, .cg-tab, .cm-tab, .cm-upl, #compModal .cm-title,
.lang-btn-main, .btn, .lay-apply, .lay-dt-name, .lay-item .lname,
.lay-art2 .labtn, .lay-art2 .lah, .tmpl-name,
#wizWelcome .ww-title, #wizWelcome .ww-step, #wizWelcome .ww-begin{
  font-family:var(--cs-font) !important;
  letter-spacing:.1px !important;
  text-transform:none !important;
}
/* the muddy golds and inky navies that made up the old chrome */
.pg-h, #platesGallery .pg-h, #componentsGallery .pg-h{
  color:var(--ok-ink) !important; font-weight:800 !important; font-size:13px !important;
}
.pg-h::after{ background:linear-gradient(90deg,var(--ok-line),transparent) !important; }
.pg-name, .wz-instr, .wz-adv, .sec, .lay-item .lcat{ color:var(--ok-ink-soft) !important; font-style:normal !important; }
.pg-thumb{ background:var(--ok-soft) !important; border-color:var(--ok-line) !important; }
.pg-thumb:hover{ border-color:var(--gel-gold-rim) !important; }
.pg-thumb.sel{ border-color:var(--gel-gold-rim) !important; box-shadow:0 0 0 2px var(--gel-gold-b) !important; }
.pg-fallback{ background:linear-gradient(135deg,#fdfcff,#eeeaf8) !important; color:var(--ok-ink-soft) !important; }
#compOverlay, #compModal{ color:var(--ok-ink) !important; }
#compModal{ background:var(--ok-panel) !important; border-color:var(--ok-line) !important; }

/* ─────────── 2. SCROLLBARS: no more gold gradient, anywhere ─────────── */
#mainSidebar *, #stepBar *, .main-toolbar *, #compModal *, .sb-body, .pg-grid, #mainSidebar{
  scrollbar-width:thin !important;
  scrollbar-color:#d5d0e8 transparent !important;
}
#mainSidebar ::-webkit-scrollbar, .pg-grid::-webkit-scrollbar,
.sb-body::-webkit-scrollbar, #compModal ::-webkit-scrollbar{ width:8px; height:8px; }
#mainSidebar ::-webkit-scrollbar-track, .pg-grid::-webkit-scrollbar-track,
.sb-body::-webkit-scrollbar-track, #compModal ::-webkit-scrollbar-track{ background:transparent !important; }
#mainSidebar ::-webkit-scrollbar-thumb, .pg-grid::-webkit-scrollbar-thumb,
.sb-body::-webkit-scrollbar-thumb, #compModal ::-webkit-scrollbar-thumb{
  background:#d5d0e8 !important; border-radius:20px !important;
}
#mainSidebar ::-webkit-scrollbar-thumb:hover, .pg-grid::-webkit-scrollbar-thumb:hover{ background:#bdb6dc !important; }

/* ─────────── 3. TAB STRIP: no scroller, tabs share the width ─────────── */
.cs-tabs-wrap{ overflow:visible !important; }
.cs-tabs-wrap::-webkit-scrollbar{ display:none !important; }
.cs-tab-strip{ flex-wrap:nowrap !important; width:100%; }
.cs-step-tab{ flex:1 1 0 !important; min-width:0 !important; justify-content:center; }
.cs-step-tab .cs-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─────────── 4. 3D BEVEL PASTEL GEL BUTTONS ─────────── */
.btn, .wz-btn, .tb-btn, .cs-ic, .pg-actions button, .bgs-seg button,
.rgb-open-btn, .cm-upl, #wizWelcome .ww-begin, .ctx-preview-btn{
  position:relative;
  border-radius:14px !important;
  border:1px solid rgba(43,39,64,.09) !important;
  font-family:var(--cs-font) !important;
  font-weight:800 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  transition:transform .11s cubic-bezier(.34,1.56,.64,1), box-shadow .11s, filter .12s !important;
  cursor:pointer;
}
/* the gel itself: glassy top half, matte bottom half, hard rim underneath */
.btn::after, .wz-btn::after, .pg-actions button::after, .bgs-seg button::after,
.rgb-open-btn::after, #wizWelcome .ww-begin::after{
  content:""; position:absolute; left:6%; right:6%; top:3px; height:38%;
  border-radius:11px 11px 60% 60%/11px 11px 20px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.06));
  pointer-events:none;
}
.btn:active, .wz-btn:active, .tb-btn:active, .cs-ic:active,
.pg-actions button:active, .bgs-seg button:active, .rgb-open-btn:active,
#wizWelcome .ww-begin:active{
  transform:translateY(3px) !important;
}

/* gold gel — primary actions */
.btn-p, .wz-next, .pg-apply, #wizWelcome .ww-begin, .bgs-seg button.on{
  background:linear-gradient(180deg,var(--gel-gold-a) 0%,var(--gel-gold-b) 52%,#f6c86a 53%,#eeb948 100%) !important;
  color:var(--gel-gold-ink) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(180,130,30,.16),
             0 5px 0 var(--gel-gold-rim), 0 10px 20px rgba(217,165,50,.30) !important;
}
.btn-p:hover, .wz-next:hover, .pg-apply:hover, #wizWelcome .ww-begin:hover{ filter:brightness(1.04); }
.btn-p:active, .wz-next:active, .pg-apply:active, #wizWelcome .ww-begin:active{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--gel-gold-rim), 0 4px 9px rgba(217,165,50,.28) !important;
}

/* lilac gel — secondary */
.btn-s, .wz-back, .rgb-open-btn, .cm-upl, .ctx-preview-btn, .bgs-seg button{
  background:linear-gradient(180deg,var(--gel-lilac-a) 0%,var(--gel-lilac-b) 52%,#d3c6f2 53%,#c6b7ec 100%) !important;
  color:var(--gel-lilac-ink) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(90,70,140,.10),
             0 5px 0 var(--gel-lilac-rim), 0 10px 18px rgba(169,150,216,.28) !important;
}
.btn-s:active, .wz-back:active, .rgb-open-btn:active, .bgs-seg button:active{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--gel-lilac-rim), 0 4px 8px rgba(169,150,216,.26) !important;
}

/* rose gel — destructive / opt-out */
.pg-none, #bgsClear, #btnResetText, .clear-btn{
  background:linear-gradient(180deg,var(--gel-rose-a) 0%,var(--gel-rose-b) 52%,#f8c4ce 53%,#f2b3bf 100%) !important;
  color:var(--gel-rose-ink) !important;
  border:1px solid rgba(43,39,64,.09) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(150,70,85,.10),
             0 5px 0 var(--gel-rose-rim), 0 10px 18px rgba(224,146,159,.28) !important;
}
.pg-none:active, #bgsClear:active, #btnResetText:active{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--gel-rose-rim), 0 4px 8px rgba(224,146,159,.26) !important;
}

/* toolbar + icon buttons — cool white gel */
.tb-btn, .cs-ic{
  background:linear-gradient(180deg,#ffffff 0%,#f4f2fb 52%,#eceaf6 53%,#e4e1f1 100%) !important;
  color:var(--ok-ink) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,1), 0 4px 0 #d8d4e8, 0 8px 14px rgba(43,39,64,.10) !important;
}
.tb-btn:hover, .cs-ic:hover{ filter:brightness(1.03); }
.tb-btn:active, .cs-ic:active{ box-shadow:inset 0 2px 0 rgba(255,255,255,1), 0 1px 0 #d8d4e8, 0 3px 7px rgba(43,39,64,.12) !important; }
.tb-btn.active, #gridTbBtn.active, #txtMoveBtn.active{
  background:linear-gradient(180deg,var(--gel-sky-a) 0%,var(--gel-sky-b) 52%,#bcd8f7 53%,#a9cbf2 100%) !important;
  color:var(--gel-sky-ink) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 4px 0 var(--gel-sky-rim), 0 8px 14px rgba(143,182,226,.30) !important;
}
.tb-btn:disabled{ opacity:.42; box-shadow:inset 0 2px 0 rgba(255,255,255,.8), 0 2px 0 #ddd9ea !important; }

/* ─────────── 5. BRAND: emblem top-left, lockup on the splash ─────────── */
.cs-brand{ gap:12px !important; }
.cs-logo{
  width:46px !important; height:46px !important;
  border-radius:0 !important;
  background:url("../../brand/owlmark-emblem-128.png") center/contain no-repeat !important;
  box-shadow:none !important;
  font-size:0 !important;             /* hides the old 🎓 glyph */
  filter:drop-shadow(0 3px 6px rgba(43,39,64,.22));
}
.cs-brand-txt{ font-size:0 !important; }       /* replaced by the stacked wordmark below */
.ok-word{ display:flex; flex-direction:column; line-height:1.1; }
.ok-word b{ font-family:var(--cs-font); font-weight:900; font-size:17px; color:var(--ok-ink); letter-spacing:.2px; }
.ok-word i{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--ok-ink-faint); letter-spacing:1.1px; text-transform:uppercase; }

.splash-brand-icon{ display:none !important; }
.ok-splash-logo{
  display:block; margin:0 auto 6px; width:min(230px,42vw); height:auto;
  filter:drop-shadow(0 14px 30px rgba(20,30,60,.28));
  animation:okFloat 5s ease-in-out infinite;
}
@keyframes okFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* ─────────── 6. PRINTED BRANDMARK (bottom-right of every certificate) ─────────── */
#certSheet .cert-brandmark{
  position:absolute; right:5.5mm; bottom:5.5mm;
  width:13mm; height:13mm; z-index:6;
  opacity:.92; pointer-events:none;
}
#certSheet .cert-brandmark img{ width:100%; height:100%; object-fit:contain; display:block; }
@media print{
  #certSheet .cert-brandmark{
    display:block !important; opacity:.92 !important;
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
}