.bgc-wrap{
    --ink:#12151A; --ink2:#1D2129; --ink3:#2A2F38;
    --paper:#F4F6F5; --paper-line:#DCE3E0;
    --orange:#6A50F3; --orange-dark:#4C36C4; --orange-light:#8B77F6;
    --teal:#0FAE96; --teal-dark:#0B8A78; --teal-ink:#076558; --teal-solid:#096B5D; --teal-tint:#E3F8F4;
    --amber:#F0A020; --amber-dark:#C97F0E; --amber-ink:#7A4C0B; --amber-solid:#8F5809; --amber-tint:#FDF1DE;
    --rose:#E84393; --rose-dark:#C22E77; --rose-ink:#A8265F; --rose-tint:#FCE6F0;
    --purple-tint:#EFEBFE;
    --text:#12151A; --text-soft:#5B6570; --text-onDark:#EDEFF2; --text-onDark-soft:#9AA3AD;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
    font-size:16px;
    color:var(--text); max-width:1200px; margin:0 auto; background:var(--paper);
    border:1px solid var(--paper-line); border-radius:14px;
    overflow-x:hidden;
  }
  .bgc-wrap *{box-sizing:border-box; max-width:100%;}
  @media (prefers-reduced-motion: reduce){ .bgc-wrap *{animation:none !important; transition:none !important;} }

  /* ---------------- WORKBENCH ---------------- */
  .bgc-workbench{display:grid; grid-template-columns:360px 1fr; gap:0; align-items:start;}
  @media (max-width:900px){
    .bgc-workbench{grid-template-columns:1fr;}
  }

  /* ---------------- CONTROL PANEL (light) ---------------- */
  .bgc-panel-outer{background:#fff; color:var(--text); padding:22px 22px 24px; border-right:1px solid var(--paper-line);}
  @media (max-width:900px){ .bgc-panel-outer{border-right:none; border-bottom:1px solid var(--paper-line);} }
  @media (max-width:480px){ .bgc-panel-outer{padding:16px 14px 18px;} }

  .bgc-tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; border-bottom:1px solid var(--paper-line); padding-bottom:14px;}
  .bgc-tab{
    font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    color:var(--text-soft); background:var(--paper); border:1px solid var(--paper-line); padding:9px 14px;
    cursor:pointer; display:flex; align-items:center; gap:7px; border-radius:20px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .bgc-tab em{font-style:normal; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange-dark); font-weight:700;}
  @media (max-width:480px){ .bgc-tab{padding:8px 11px; font-size:13px;} }
  .bgc-tab.active{
    color:#fff; background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); border-color:var(--orange-dark);
    box-shadow:0 6px 16px rgba(106,80,243,.35); animation:bgcPop .25s ease;
  }
  .bgc-tab.active em{color:rgba(255,255,255,.75);}
  .bgc-tab:hover:not(.active){border-color:var(--orange); color:var(--orange); transform:translateY(-1px);}
  .bgc-tab:active{transform:scale(.96);}
  @keyframes bgcPop{0%{transform:scale(.9);} 60%{transform:scale(1.04);} 100%{transform:scale(1);}}

  .bgc-h2{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin:0 0 4px 0; color:var(--text); letter-spacing:-.01em;}
  .bgc-cap{font-size:14px; color:var(--text-soft); margin:0 0 16px 0; line-height:1.45; font-style:italic;}
  /* !important on the spacing (not just color/font) is intentional: WordPress
     themes — Kadence in particular — ship global resets for <p> and <label>
     margins that otherwise win the cascade over a single class selector,
     which is what made this heading-to-control gap drift once the tool is
     actually embedded on a live site even though it measures correctly in
     isolation. Same defensive approach already used for the <select> fixes
     below. */
  .bgc-h3{
    font-family:'Space Grotesk',sans-serif !important; font-size:16px !important; font-weight:700 !important;
    color:#2563EB !important; margin:16px 0 7px 0 !important; letter-spacing:-.005em !important; text-transform:none !important; font-style:normal !important;
  }
  .bgc-panel > .bgc-h3:first-child{margin-top:0 !important;}
  /* Sections in the Style tab (Title / Axis / Data) stack a heading, then a
     row of controls, then move to the next heading — previously the extra
     10px on .bgc-mt10 blocks broke that same 16px rhythm used everywhere
     else (Data/Labels/Theme tabs), so the vertical spacing felt inconsistent
     tab to tab. Pin every "next section" gap to the same 16px used by
     .bgc-label so the whole panel reads as one consistent grid. */
  .bgc-h3 + .bgc-row2, .bgc-h3 + .bgc-row3, .bgc-h3 + .bgc-checklabel{margin-top:0 !important;}
  .bgc-row2, .bgc-row3{margin-top:0 !important; margin-bottom:0 !important;}
  #bgcBarColorRows{margin-top:16px !important;}
  #bgcPanelData .bgc-row2.bgc-mt10{margin-top:16px !important;}
  .bgc-panelhead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  @media (max-width:380px){
    .bgc-panelhead{flex-direction:column; align-items:flex-start; gap:6px;}
  }

  .bgc-label{
    display:block !important; font-family:'Space Grotesk',sans-serif !important; font-size:16px !important; font-weight:700 !important;
    color:#2563EB !important; margin:16px 0 7px 0 !important; letter-spacing:-.005em !important; line-height:1.3 !important; text-transform:none !important; font-style:normal !important;
  }
  .bgc-srOnly{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .bgc-hint{font-weight:400; font-size:13px; color:var(--text-soft); text-transform:none; letter-spacing:0; font-style:italic;}
  .bgc-input{
    width:100%; font-size:16px; font-weight:600; padding:11px 12px; border:1.5px solid var(--paper-line); border-radius:8px;
    background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif;
  }
  /* Defensive overrides: some WordPress themes/plugins apply global resets
     or "enhanced select" libraries that hide or blank out <select> elements.
     These are written at maximum practical specificity + !important so they
     always beat theme/global form-reset stylesheets, no matter the load
     order. A matching JS pass (bgcForceControlsVisible in the JS file) backs
     this up by writing the same rules as *inline* !important styles, which
     outrank any external stylesheet including other !important rules. */
  html body .bgc-wrap select.bgc-input,
  .bgc-wrap select.bgc-input{
    display:block !important; visibility:visible !important; opacity:1 !important;
    -webkit-appearance:menulist !important; -moz-appearance:menulist !important; appearance:menulist !important;
    background-color:var(--paper) !important; color:var(--ink) !important;
    min-height:44px !important; height:auto !important; line-height:normal !important; cursor:pointer !important;
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    position:static !important; float:none !important; overflow:visible !important; clip:auto !important;
    pointer-events:auto !important; z-index:1 !important; margin:0 0 !important;
    padding:11px 12px !important; border:1.5px solid var(--paper-line) !important; border-radius:8px !important;
    font-size:16px !important; font-weight:600 !important; font-family:'Inter',sans-serif !important;
  }
  html body .bgc-wrap select.bgc-input option,
  .bgc-wrap select.bgc-input option{
    display:block !important; visibility:visible !important; opacity:1 !important;
    background-color:#fff !important; color:var(--ink) !important;
  }
  .bgc-input:focus-visible{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange); background:#fff;}
  .bgc-input.bgc-color{
    -webkit-appearance:auto; -moz-appearance:auto; appearance:auto;
    padding:4px; height:46px; cursor:pointer; border-radius:8px; background:#fff;
    border:1.5px dashed var(--orange); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .bgc-input.bgc-color:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(106,80,243,.28); border-color:var(--orange-dark);}
  .bgc-input.bgc-color::-webkit-color-swatch-wrapper{padding:2px;}
  .bgc-input.bgc-color::-webkit-color-swatch{border:none; border-radius:6px;}
  .bgc-input.bgc-color::-moz-color-swatch{border:none; border-radius:6px;}
  .bgc-row{display:flex; align-items:flex-end; gap:6px;}
  .bgc-flex1{flex:1; min-width:0;}
  .bgc-row .bgc-iconbtn{flex:none;}
  .bgc-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .bgc-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
  @media (max-width:420px){ .bgc-row3{grid-template-columns:1fr 1fr;} }
  .bgc-iconbtn{
    font-size:16px; line-height:1; background:var(--paper); border:1px solid var(--paper-line); border-radius:8px;
    padding:11px 12px; cursor:pointer; color:var(--text-soft);
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .bgc-iconbtn:hover{color:var(--orange); border-color:var(--orange); background:var(--purple-tint); transform:translateY(-1px);}
  .bgc-iconbtn:active{transform:scale(.92);}
  .bgc-linkbtn{
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; color:var(--orange);
    background:none; border:none; cursor:pointer; padding:0; white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px;
  }
  .bgc-linkbtn:hover{color:var(--orange-dark); text-decoration:underline;}
  .bgc-valuerow{margin-top:8px;}
  .bgc-barcolorrow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;}
  .bgc-barcolorrow .bgc-label{margin:0; flex:1;}

  .bgc-swatchRow{display:flex; gap:10px; flex-wrap:wrap;}

  .bgc-gridStyleRow{display:flex; gap:6px; flex-wrap:wrap;}
  .bgc-gridBtn{
    flex:0 1 auto; white-space:nowrap; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; padding:10px 14px;
    background:var(--paper); border:1.5px solid var(--paper-line); color:var(--text-soft); cursor:pointer; border-radius:8px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .bgc-gridBtn.active{
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); border-color:var(--orange-dark); color:#fff;
    box-shadow:0 6px 14px rgba(106,80,243,.32); animation:bgcPop .25s ease;
  }
  .bgc-gridBtn:hover:not(.active){border-color:var(--orange); color:var(--orange); transform:translateY(-1px);}
  .bgc-gridBtn:active{transform:scale(.95);}
  /* Content-based sizing above already keeps every label on one line at
     any width down to real phone sizes (the four labels' natural widths
     total well under a 320px screen) — this is just a bit more breathing
     room reduction for the very smallest devices, not a wrapping fix. */
  @media (max-width:360px){
    .bgc-gridBtn{font-size:12px; padding:9px 10px;}
  }
  .bgc-swatch{
    width:46px; height:46px; border-radius:50%; cursor:pointer; border:2px solid var(--paper-line);
    padding:0; position:relative; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .bgc-swatch:hover{transform:translateY(-2px) scale(1.05);}
  .bgc-swatch:active{transform:scale(.94);}
  .bgc-swatch.active{border-color:var(--orange); box-shadow:0 0 0 3px rgba(106,80,243,.22);}
  .bgc-swatch.active::after{
    content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .bgc-swatch-white{background:#FFFFFF;}
  .bgc-swatch-paper{background:#F4F6FB;}
  .bgc-swatch-yellow{background:#FFF3D6;}
  .bgc-swatch-blue{background:#E4EEFF;}
  .bgc-swatch-green{background:#E5F6EA;}
  .bgc-swatch-grid{background-color:#FFFFFF; background-image:linear-gradient(#E3E7EE 1px, transparent 1px), linear-gradient(90deg, #E3E7EE 1px, transparent 1px); background-size:9px 9px;}
  .bgc-swatch-gradient{background:linear-gradient(135deg, #FFFFFF 0%, #EDE9FE 100%);}
  .bgc-swatch-dark{background:#12151A;}
  .bgc-swatch.active.bgc-swatch-white::after,
  .bgc-swatch.active.bgc-swatch-paper::after,
  .bgc-swatch.active.bgc-swatch-yellow::after,
  .bgc-swatch.active.bgc-swatch-blue::after,
  .bgc-swatch.active.bgc-swatch-green::after,
  .bgc-swatch.active.bgc-swatch-grid::after,
  .bgc-swatch.active.bgc-swatch-gradient::after{color:var(--orange-dark); text-shadow:none;}
  .bgc-barcolorrow .bgc-input{width:44px; flex:none;}
  .bgc-mt10{margin-top:10px;}

  /* ---------------- buttons ---------------- */
  .bgc-btn{
    font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
    padding:13px 18px; border-radius:8px; cursor:pointer; border:1px solid var(--orange);
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-align:center;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  /* Inline SVG icons (stroke uses currentColor, so every button/state's
     existing text color drives the icon color automatically — no separate
     color rules needed, and no dependency on a Unicode glyph being present
     in the visitor's system font, which is what made the old ⇪ / ↺ / ⇅ / ↓
     characters render as blank boxes on some Android/Windows font sets). */
  .bgc-svgicon{width:16px; height:16px; flex:none; display:inline-block; vertical-align:middle;}
  .bgc-iconbtn .bgc-svgicon, .bgc-linkbtn .bgc-svgicon{width:15px; height:15px;}
  .bgc-exicon .bgc-svgicon{width:13px; height:13px;}
  .bgc-btn-primary{
    background:linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); border-color:var(--orange-dark);
    color:#fff; flex:1; box-shadow:0 8px 20px rgba(106,80,243,.35); position:relative; overflow:hidden;
  }
  .bgc-btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(106,80,243,.45);}
  .bgc-btn-primary:active{transform:translateY(0) scale(.98);}
  .bgc-btn-ghost{background:#fff; color:var(--text); border-color:var(--paper-line);}
  .bgc-btn-ghost:hover{border-color:var(--orange); color:var(--orange); background:var(--purple-tint); transform:translateY(-1px);}
  .bgc-btn-ghost:active{transform:scale(.97);}
  .bgc-btn-sm{padding:10px 14px; font-size:13px;}
  .bgc-actions-primary{display:flex; gap:10px; margin-top:20px;}

  /* ---------------- OUTPUT / SHEET ---------------- */
  .bgc-output{padding:22px 24px 24px;}
  @media (max-width:480px){ .bgc-output{padding:16px 14px 18px;} }
  .bgc-sheet{position:relative; background:#fff; border:1px solid var(--paper-line); border-radius:12px; overflow:hidden;}
  /* Bottom padding was 0, so the X-axis/Category label sat flush against
     this box's bottom edge (right on the border above the title-block).
     Give it the same breathing room as the other three sides. */
  /* Reserve the chart's real aspect ratio (900x550, the SVG's own
     viewBox) before JS has run, instead of collapsing to ~0 height and
     then jumping to full size once the chart renders — this was a real,
     measurable contributor to the 0.334 desktop CLS score: the empty
     holder had no height, then suddenly grew once the SVG was injected. */
  .bgc-graphholder{position:relative; width:100%; overflow-x:auto; padding:20px 20px 20px; aspect-ratio:900/550; max-height:900px;}
  .bgc-graphholder svg{width:100%; height:auto; display:block;}
  .bgc-titleblock{
    position:relative; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; border-top:1px solid var(--ink);
    font-family:'JetBrains Mono',monospace; font-size:10.5px; background:#fff;
  }
  .bgc-titleblock > div{padding:9px 12px; border-left:1px solid var(--paper-line); display:flex; flex-direction:column; gap:2px;}
  .bgc-titleblock > div:first-child{border-left:none;}
  /* On phones, 4 cramped columns of monospace text was the "misaligned"
     footer strip — 2x2 reads cleanly at any phone width instead. */
  @media (max-width:560px){
    .bgc-titleblock{grid-template-columns:1fr 1fr;}
    .bgc-titleblock > div:nth-child(2n+1){border-left:none;}
    .bgc-titleblock > div:nth-child(n+3){border-top:1px solid var(--paper-line);}
  }
  .bgc-titleblock span{color:var(--text-soft); text-transform:uppercase; letter-spacing:.08em; font-size:9px;}
  .bgc-titleblock b{color:var(--ink); font-weight:600; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .bgc-calibration{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px;}
  .bgc-cal{
    text-align:left; padding:14px 14px 12px; background:#fff; border:1px solid var(--paper-line); border-top:3px solid transparent;
    border-radius:12px; transition:border-color .15s, box-shadow .2s, transform .2s;
  }
  .bgc-cal:hover{transform:translateY(-3px) scale(1.02);}
  .bgc-callabel{
    display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); margin-bottom:8px;
  }
  .bgc-calval{display:block; font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; color:var(--text);}

  .bgc-cal-purple{border-top-color:var(--teal);}
  .bgc-cal-purple .bgc-callabel::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block;}
  .bgc-cal-purple:hover{box-shadow:0 10px 22px rgba(15,174,150,.2); border-color:var(--teal);}

  .bgc-cal-teal{border-top-color:var(--teal);}
  .bgc-cal-teal .bgc-callabel::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block;}
  .bgc-cal-teal:hover{box-shadow:0 10px 22px rgba(15,174,150,.2); border-color:var(--teal);}

  .bgc-cal-amber{border-top-color:var(--teal);}
  .bgc-cal-amber .bgc-callabel::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block;}
  .bgc-cal-amber:hover{box-shadow:0 10px 22px rgba(15,174,150,.2); border-color:var(--teal);}

  .bgc-cal-rose{border-top-color:var(--teal);}
  .bgc-cal-rose .bgc-callabel::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block;}
  .bgc-cal-rose:hover{box-shadow:0 10px 22px rgba(15,174,150,.2); border-color:var(--teal);}

  @media (max-width:520px){ .bgc-calibration{grid-template-columns:repeat(2,1fr);} }

  .bgc-exportbar{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  @media (max-width:480px){
    .bgc-exportbar{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
    .bgc-exbtn{min-width:0;}
  }
  .bgc-exbtn{
    flex:1; min-width:110px; display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
    border:1px solid transparent; border-radius:999px; padding:13px 14px; cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  }
  .bgc-exbtn:active{transform:scale(.95);}
  .bgc-exicon{
    font-size:13px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; flex:none; transition:background .2s ease, color .2s ease;
  }

  /* All four export buttons (Share/PNG/JPG/SVG) share one high-contrast
     green treatment now, instead of four different accent colors that
     read inconsistently against the sheet's off-white background. */
  .bgc-ex-purple,
  .bgc-ex-teal,
  .bgc-ex-amber,
  .bgc-ex-rose{background:var(--teal-tint); color:var(--teal-ink);}
  .bgc-ex-purple .bgc-exicon,
  .bgc-ex-teal .bgc-exicon,
  .bgc-ex-amber .bgc-exicon,
  .bgc-ex-rose .bgc-exicon{background:#fff; color:var(--teal-ink);}
  .bgc-ex-purple:hover,
  .bgc-ex-teal:hover,
  .bgc-ex-amber:hover,
  .bgc-ex-rose:hover{background:var(--teal-solid); color:#fff; box-shadow:0 10px 22px rgba(15,174,150,.35); transform:translateY(-3px);}
  .bgc-ex-purple:hover .bgc-exicon,
  .bgc-ex-teal:hover .bgc-exicon,
  .bgc-ex-amber:hover .bgc-exicon,
  .bgc-ex-rose:hover .bgc-exicon{background:rgba(255,255,255,.25); color:#fff;}

  .bgc-embedcard{background:#fff; border:1px solid var(--paper-line); border-radius:12px; padding:16px; margin-top:14px;}
  .bgc-embedbox{width:100%; font-size:11.5px; font-family:'JetBrains Mono',monospace; padding:10px; border:1px solid var(--paper-line); border-radius:2px; resize:vertical; background:var(--paper); color:var(--text-soft);}
  .bgc-embedfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap;}
  .bgc-checklabel{font-size:12px; color:var(--text-soft);}
  .bgc-small{font-size:12px; color:var(--text-soft);}

  /* ---------------- modals ---------------- */
  .bgc-modal-overlay{position:fixed; inset:0; background:rgba(18,21,26,.6); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px;}
  .bgc-modal{background:#fff; border-radius:2px; padding:22px; max-width:420px; width:100%; position:relative; max-height:90vh; overflow-y:auto; border-top:3px solid var(--orange);}
  .bgc-modalclose{position:absolute; top:12px; right:14px; font-size:22px; background:none; border:none; cursor:pointer; color:var(--text-soft);}
  .bgc-sharegrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0;}
  @media (max-width:400px){ .bgc-sharegrid{grid-template-columns:1fr;} }
  .bgc-shareitem{display:flex !important; align-items:center; justify-content:flex-start; gap:10px; text-align:left;}
  .bgc-shareicon{width:22px; height:22px; flex:none; border-radius:50%;}