/* deterministic stacking — no more DOM-order roulette */
#certSheet .lay-bg        { z-index:0 !important; }
#certSheet .lay-custom-bg { z-index:1 !important; }
#certSheet .inner         { z-index:2 !important; }
#certSheet .lay-fg        { z-index:3 !important; }
#certSheet .lay-custom-fg { z-index:4 !important; }

/* a plate carries its own frame — suppress the app's frame furniture */
#certSheet .certificate.plate-on { border:0 !important; }
#certSheet .certificate.plate-on > .cert-corner,
#certSheet .certificate.plate-on > .cert-border-layer { display:none !important; }

/* toolbar = view + canvas tools only. These moved into their steps. */
#tmplTbBtn, #compTbBtn { display:none !important; }

/* ── background source picker (Step 1) ── */
#bgSource { margin-bottom:16px; }
.bgs-seg{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:8px 0 12px; }
.bgs-seg button{
  padding:9px 4px; border-radius:9px; cursor:pointer; font-size:11.5px; font-weight:700;
  letter-spacing:.3px; border:1.5px solid rgba(198,162,83,.28);
  background:transparent; color:#b9a883; transition:.15s;
}
.bgs-seg button:hover{ border-color:var(--gold,#c6a253); color:#f0e6cc; }
.bgs-seg button.on{
  background:linear-gradient(180deg,var(--gold-light,#e6cd8f),var(--gold,#c6a253));
  border-color:var(--gold,#c6a253); color:#0c1a30;
}
.bgs-note{
  font-size:11.5px; line-height:1.45; color:#9a875f; font-style:italic;
  margin:2px 0 11px; padding:8px 10px; border-radius:8px;
  background:rgba(198,162,83,.07); border:1px solid rgba(198,162,83,.16);
}
#bgsClear{ width:100%; margin-top:10px; }

/* show only the block that belongs to the active source */
body.bgmode-plain          #platesGallery { display:none !important; }
body:not(.bgmode-plain)    #bgsPlainBox   { display:none !important; }
/* Step 5 (Decorate) hides the whole background block */
body.wiz-decorate #bgSource, body.wiz-decorate #platesGallery { display:none !important; }
/* Step 1 hides the decorate-only blocks (extends the app's existing rule) */
body.wiz-bg #componentsGallery, body.wiz-bg #sbArtwork { display:none !important; }

/* borders & texture are meaningless on top of a plate — say so, don't just break */
body.bgmode-plate #borderGrid,
body.bgmode-plate #txRow,
body.bgmode-plate #txColorRow { opacity:.35; pointer-events:none; filter:grayscale(.6); }
#plateFrameNote{ display:none; }
body.bgmode-plate #plateFrameNote{ display:block; }
#plateFrameNote a{ color:var(--gold,#c6a253); cursor:pointer; text-decoration:underline; }