/* ============================================================
   PLUGIN BUILDER — Scratch-style full-color block editor, layered
   on the shared Studio app-shell (studio.css + builder.css +
   widget-builder.css). Block families:
     trigger #FF9F0A (hat blocks) · step #0A84FF (stack blocks)
     widget  #BF5AF2             · code #2EBD4A
   Shapes: hat tops on triggers, puzzle tabs on stacked blocks,
   darker C-mouth slots, white oval inputs — like Scratch.
   ============================================================ */

/* ─── Home: template thumbs unique to plugins ─── */
.pb-thumb__key {
    min-width: 26px; height: 20px; padding: 0 6px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14); color: #fff;
    font: 700 0.6rem var(--st-mono, monospace);
}
.pb-thumb--recent { display: flex; align-items: center; justify-content: center; }
.pb-thumb--recent i { font-size: 1.5rem; color: var(--clr-red, #FF4D14); opacity: 0.85; }

/* ─── Toolbar bits ─── */
.pb-name {
    font: 600 0.86rem var(--font-body, Inter, sans-serif); color: #fff;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 0.28rem 0.5rem; min-width: 110px; max-width: 240px;
}
.pb-name:hover { border-color: rgba(255,255,255,0.12); }
.pb-name:focus { outline: none; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }

.pb-seg { display: flex; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; }
.pb-seg__btn {
    font: 600 0.75rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.55);
    background: transparent; border: 0; padding: 0.42rem 0.8rem; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pb-seg__btn:hover { color: #fff; }
.pb-seg__btn.is-active { background: rgba(255,77,20,0.18); color: #FF7A4D; }
.pb-aibtn i { color: #BF5AF2; }
.pb-sendbtn { background: rgba(255,77,20,0.16) !important; border-color: rgba(255,77,20,0.45) !important; color: #FF7A4D !important; }
.pb-sendbtn:hover { background: rgba(255,77,20,0.26) !important; color: #fff !important; }
.pb-sendbtn i { color: #FF7A4D; }
.pb-sendbtn[disabled] { opacity: 0.6; cursor: default; }

/* ─── Rail: full-color chips, like mini blocks ─── */
.pb-rail__cat {
    font: 700 0.52rem var(--st-mono, monospace); letter-spacing: 0.09em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); text-align: center; margin: 0.55rem 0 0.15rem;
}
.pb-rail__cat:first-child { margin-top: 0.1rem; }
#pbPalette .bd-railbtn {
    aspect-ratio: auto; padding: 0.42rem 0.2rem 0.38rem; gap: 0.22rem;
    border: none; color: #fff;
}
#pbPalette .bd-railbtn i { font-size: 0.95rem; color: #fff; }
#pbPalette .bd-railbtn .bd-railbtn__label { font-size: 0.55rem; font-weight: 600; opacity: 0.95; }
.pb-railbtn--trigger { background: linear-gradient(180deg, #FFAD2E, #F08C00); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
.pb-railbtn--step    { background: linear-gradient(180deg, #2E96FF, #0668D6); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
.pb-railbtn--widget  { background: linear-gradient(180deg, #CC73FF, #A03FE0); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
.pb-railbtn--code    { background: linear-gradient(180deg, #3FD65C, #1FA83A); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
.pb-railbtn--control { background: linear-gradient(180deg, #FFD54D, #E8A200); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
.pb-railbtn--data    { background: linear-gradient(180deg, #1FD1BE, #0A9E8F); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22); }
#pbPalette .bd-railbtn:hover { filter: brightness(1.12); transform: translateY(-1px); }
#pbPalette .bd-railbtn:active { transform: translateY(0); filter: brightness(0.95); }

/* ─── App-lock: this page never scrolls; panes scroll internally ───
   (this stylesheet only loads on /studio/plugin-builder) */
html, body.st-body { height: 100vh; overflow: hidden; }
.st-shell { height: 100vh; }
.st-main--flush { height: 100vh; overflow: hidden; }
.bd-home { height: 100%; overflow-y: auto; }     /* home scrolls inside */
.bd-editor { height: 100%; }                     /* toolbar pinned, panes fixed */
body > footer { display: none; }                 /* version footer off the app page */

/* ─── Toolbox category icons (FA glyphs via cssconfig) ─── */
.pbCatIco {
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-style: normal;
    font-size: 11px; width: 16px; margin-right: 7px; display: inline-block; text-align: center;
    visibility: visible; background: none;
}
.pbCatIco--trigger::before { content: '\f0e7'; color: #F08C00; }
.pbCatIco--do::before      { content: '\f04b'; color: #0A84FF; }
.pbCatIco--control::before { content: '\f126'; color: #E8A200; }
.pbCatIco--data::before    { content: '\f1c0'; color: #0A9E8F; }
.pbCatIco--screen::before  { content: '\f5fd'; color: #9C3EDC; }
.pbCatIco--values::before  { content: '\f02b'; color: #14B8A6; }
.pbCatIco--code::before    { content: '\f121'; color: #1E9E37; }

/* ─── Mode chooser modal (New plugin) ─── */
.pb-modal {
    position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.6); padding: 1.5rem;
}
.pb-modal[hidden] { display: none; }
.pb-modal__card {
    background: #1B1916; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px;
    max-width: 620px; width: 100%; padding: 1.6rem 1.7rem 1.8rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.pb-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.pb-modal__head h3 { font: 700 1.15rem var(--font-body, Inter, sans-serif); color: #fff; margin: 0; }
.pb-modal__x { background: none; border: 0; color: rgba(255,255,255,0.5); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pb-modal__x:hover { color: #fff; }
.pb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .pb-modes { grid-template-columns: 1fr; } }
.pb-modecard {
    text-align: left; cursor: pointer; border-radius: 14px; padding: 1.2rem 1.1rem 1.1rem;
    background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.pb-modecard:hover { transform: translateY(-2px); border-color: rgba(255,77,20,0.5); background: rgba(255,255,255,0.08); }
.pb-modecard__ic {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff; margin-bottom: 0.7rem;
}
.pb-modecard__ic--blocks { background: linear-gradient(135deg, #FF9F0A, #F08C00); }
.pb-modecard__ic--dev { background: linear-gradient(135deg, #32D74B, #1E9E37); }
.pb-modecard__title { font: 700 0.95rem var(--font-body, Inter, sans-serif); color: #fff; margin: 0 0 0.3rem; }
.pb-modecard__desc { font: 400 0.75rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0 0 0.7rem; }
.pb-modecard__tag {
    display: inline-block; font: 700 0.58rem var(--st-mono, monospace); text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 0.2rem 0.6rem;
}

/* ─── SDK reference panel ─── */
.pb-sdk__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.pb-sdk__bar span { font: 700 0.62rem var(--st-mono, monospace); letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.wb-btn--tiny { font-size: 0.62rem !important; padding: 0.25rem 0.5rem !important; }
.pb-sdk__body {
    font: 500 0.68rem var(--st-mono, monospace); color: #D9D2C7; line-height: 1.6; white-space: pre-wrap;
    word-break: break-word; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 0.8rem 0.9rem; margin: 0; overflow: auto; max-height: calc(100vh - 200px);
}

/* ─── Developer SDK panel — copy-paste install + CLI commands ─── */
.pb-sdkinstall { display: flex; flex-direction: column; gap: 0.55rem; }
.pb-sdkinstall__lead { font: 500 0.78rem/1.5 var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.62); margin: 0 0 0.2rem; }
.pb-sdkstep__label { font: 700 0.6rem var(--st-mono, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin: 0.5rem 0 0.1rem; }
.pb-cmd {
    display: flex; align-items: center; gap: 0.5rem;
    background: #100e0d; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
    padding: 0.5rem 0.55rem 0.5rem 0.7rem;
}
.pb-cmd code {
    flex: 1; min-width: 0; font: 600 0.74rem var(--st-mono, monospace); color: #FFAE8A;
    white-space: nowrap; overflow-x: auto; background: none; padding: 0;
}
.pb-cmd code::before { content: "$ "; color: rgba(255,255,255,0.32); }
.pb-cmd__copy {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem;
    font: 600 0.66rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px; padding: 0.3rem 0.55rem; cursor: pointer;
}
.pb-cmd__copy:hover { color: #fff; border-color: var(--clr-red, #FF4D14); }
.pb-cmd__copy.is-copied { color: #5FE0CC; border-color: rgba(95,224,204,0.5); }
.pb-sdkinstall__foot { font: 400 0.72rem/1.55 var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.5); margin: 0.6rem 0 0; }
.pb-sdkinstall__foot a { color: #FF7A4D; text-decoration: none; }
.pb-sdkinstall__foot a:hover { text-decoration: underline; }
.pb-light .pb-cmd { background: #F3F0E9; border-color: rgba(0,0,0,0.12); }
.pb-light .pb-cmd code { color: #C0430E; }
.pb-light .pb-cmd__copy { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); color: rgba(0,0,0,0.6); }

/* ─── Developer info (shown inside the "New plugin" chooser modal) ─── */
.pb-modes[hidden] { display: none; }   /* beat any .pb-modes display rule */
.pb-devinfo { text-align: left; }
.pb-devinfo[hidden] { display: none; }
.pb-devinfo__back {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.7rem;
    font: 600 0.72rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.6);
    background: none; border: 0; padding: 0; cursor: pointer;
}
.pb-devinfo__back:hover { color: #fff; }
.pb-light .pb-devinfo__back { color: rgba(0,0,0,0.55); }
.pb-light .pb-devinfo__back:hover { color: #000; }

/* ─── One builder ───
   Blocks + Full code + Widget in a single editor. Users snap blocks, drop into
   raw code and come back (blocks regenerate unless hand-edited), or design a
   widget — no separate "developer mode". ─── */

/* ─── CodeMirror — the real code editor (Developer / Full-code) ─── */
.pb-codeview .CodeMirror {
    flex: 1; min-height: 0; height: auto;
    font: 500 0.82rem/1.55 var(--st-mono, monospace);
}
.pb-codeview .CodeMirror-gutters { border-right: 1px solid rgba(255,255,255,0.06); }
.pb-fullcode { flex: 1; }   /* fallback textarea when CDN blocked */

/* ─── IDE: file explorer + editor/preview ─── */
.pb-ide { flex: 1; display: flex; min-height: 0; }
.pb-ide__tree { width: 214px; flex-shrink: 0; background: #161311; border-right: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; overflow: hidden; }
.pb-ide__treehead { padding: 0.65rem 0.8rem; font: 700 0.62rem var(--st-mono,monospace); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.42); border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-ide__treehead i { color: var(--clr-red,#FF4D14); }
.pb-ide__files { flex: 1; overflow-y: auto; padding: 0.35rem 0; }
.pb-ide__file { display: block; width: 100%; text-align: left; background: none; border: 0; color: #c8bfb4; font: 500 0.76rem var(--font-body,Inter,sans-serif); padding: 0.32rem 0.5rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-ide__file:hover { background: rgba(255,255,255,0.05); color: #fff; }
.pb-ide__file.is-active { background: rgba(255,77,20,0.14); color: #FF7A4D; }
.pb-ide__file i { width: 15px; color: rgba(255,255,255,0.4); }
.pb-ide__file.is-active i { color: #FF7A4D; }
.pb-ide__folder { padding: 0.5rem 0.5rem 0.15rem; font: 600 0.62rem var(--st-mono,monospace); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.34); }
.pb-ide__folder i { color: rgba(255,255,255,0.3); }
.pb-ide__upload { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.5rem; padding: 0.5rem; border: 1px dashed rgba(255,255,255,0.18); border-radius: 8px; color: rgba(255,255,255,0.6); font: 600 0.72rem var(--font-body,Inter,sans-serif); cursor: pointer; }
.pb-ide__upload:hover { border-color: var(--clr-red,#FF4D14); color: #fff; }
.pb-ide__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb-ide__editor { flex: 1; min-height: 0; display: flex; }
.pb-ide__editor[hidden] { display: none; }
.pb-ide__image { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; background: #12100e; padding: 1rem; }
.pb-ide__image[hidden] { display: none; }
.pb-ide__image img { max-width: 90%; max-height: 68%; object-fit: contain; image-rendering: pixelated; background: repeating-conic-gradient(#2a2624 0% 25%, #201d1a 0% 50%) 50%/20px 20px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; }
.pb-ide__imgbar { display: flex; align-items: center; gap: 0.9rem; font: 500 0.75rem var(--st-mono,monospace); color: rgba(255,255,255,0.6); }
.pb-ide__err { flex-shrink: 0; padding: 0.4rem 0.95rem; color: #FF6A5A; font: 500 0.72rem var(--st-mono,monospace); background: rgba(255,80,70,0.08); }
.pb-ide__err[hidden] { display: none; }
.pb-code__hint { color: rgba(255,255,255,0.4); font-weight: 400; }
.pb-light .pb-ide__tree { background: #EDEAE3; border-right-color: rgba(0,0,0,0.08); }
.pb-light .pb-ide__file { color: #4a453e; }
.pb-light .pb-ide__file:hover { background: rgba(0,0,0,0.05); color: #000; }

.pb-docsbtn { text-decoration: none; }
.pb-docsbtn i { color: rgba(255,255,255,0.55); }

/* ─── Docs pop-up panel (readable, self-contained iframe) ─── */
.pb-docs {
    position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.62); padding: clamp(0.5rem, 3vw, 3rem);
}
.pb-docs[hidden] { display: none; }
.pb-docs__panel {
    width: 100%; max-width: 1100px; height: 90vh; display: flex; flex-direction: column;
    background: #0e0c0b; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px;
    overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.pb-docs__head {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.95rem; background: #1B1916; border-bottom: 1px solid rgba(255,255,255,0.08);
    font: 700 0.82rem var(--font-body, Inter, sans-serif); color: #fff;
}
.pb-docs__head > span i { color: #FF7A4D; }
.pb-docs__ext { margin-left: auto; color: rgba(255,255,255,0.5); text-decoration: none; }
.pb-docs__ext:hover { color: #fff; }
.pb-docs__close { background: none; border: 0; color: rgba(255,255,255,0.5); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.pb-docs__close:hover { color: #fff; }
.pb-docs__frame { flex: 1; width: 100%; border: 0; background: #0e0c0b; }

/* ─── Widget view (embedded Widget Maker) ─── */
.pb-widgetview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #131110; }
.pb-widgetview[hidden] { display: none; }
.pb-wv__bar {
    flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.9rem; background: #1B1916; border-bottom: 1px solid rgba(255,255,255,0.07);
    font: 600 0.75rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.65);
}
.pb-wv__bar span:first-child i { color: #BF5AF2; }
.pb-wv__bar select { max-width: 180px; }
.pb-wv__hint { margin-left: auto; font: 400 0.66rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.35); }
.pb-wv__frame { flex: 1; width: 100%; border: 0; background: #0e0c0b; }
.pb-wv__modeseg { display: flex; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; overflow: hidden; }
.pb-wv__modebtn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font: 600 0.72rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.6);
    background: transparent; border: 0; padding: 0.34rem 0.7rem; cursor: pointer;
}
.pb-wv__modebtn:hover { color: #fff; }
.pb-wv__modebtn.is-active { background: rgba(255,77,20,0.2); color: #FF7A4D; }
.pb-light .pb-wv__modeseg { border-color: rgba(0,0,0,0.14); }
.pb-light .pb-wv__modebtn { color: rgba(0,0,0,0.55); }
.pb-light .pb-wv__modebtn.is-active { background: rgba(255,77,20,0.14); color: #E8420A; }

/* ─── Widget panel ─── */
.pb-wgt__pick { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.pb-wgt__pick select { flex: 1; }
.pb-wgt__json {
    width: 100%; min-height: 260px; resize: vertical; tab-size: 2;
    font: 500 0.72rem var(--st-mono, monospace); color: #C8F5CF; background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 0.6rem 0.7rem;
}
.pb-wgt__json:focus { outline: none; border-color: #BF5AF2; }
.pb-wgt__json:disabled { opacity: 0.5; }
.pb-wgt__err { color: #FF6A5A; font: 500 0.7rem var(--st-mono, monospace); margin: 0.4rem 0; }
.pb-wgt__row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.pb-wgt__row .wb-btn { flex: 1; justify-content: center; }
.pb-light .pb-wgt__json { background: #F4F1EB; color: #14421d; }

/* ─── AI panel SDK reference bar ─── */
.pb-ai__refbar {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font: 500 0.66rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.45);
    padding: 0.5rem 0.6rem; margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px;
}
.pb-ai__refbar a, .pb-ai__refbar button {
    color: #BF8AFF; text-decoration: none; background: none; border: 0; cursor: pointer;
    font: 600 0.66rem var(--font-body, Inter, sans-serif);
}
.pb-ai__refbar a:hover, .pb-ai__refbar button:hover { color: #fff; }
.pb-light .pb-ai__refbar { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); }
.pb-light .pb-modal__card { background: #fff; border-color: rgba(0,0,0,0.12); }
.pb-light .pb-modal__head h3 { color: #1d1d1f; }
.pb-light .pb-modecard { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); }
.pb-light .pb-modecard__title { color: #1d1d1f; }
.pb-light .pb-modecard__desc { color: rgba(0,0,0,0.55); }
.pb-light .pb-sdk__body { background: #F4F1EB; color: #333; }

/* ─── Blockly canvas ─── */
/* two-class specificity so builder.css's .bd-workspace media queries
   (68px rail / stacked rows) can NEVER re-layout the Blockly page,
   at any window size or browser zoom */
.bd-workspace.pb-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    grid-template-rows: minmax(0, 1fr) !important;
}
@media (max-width: 900px) {
    .bd-workspace.pb-workspace { grid-template-columns: minmax(0, 1fr) 250px !important; }
}
.pb-blockly { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
/* Font Awesome glyphs inside blocks (field_label class) */
.pbFaIcon, text.pbFaIcon { font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; }
.pb-blockly[hidden] { display: none; }
#pbBlocklyDiv { position: absolute; inset: 0; }
.blocklySvg { background: transparent; }
/* keep Blockly's injected widgets above the studio chrome */
.blocklyWidgetDiv, .blocklyDropDownDiv, .blocklyTooltipDiv { z-index: 70; }

/* ─── Code drawer (click a green code block) ─── */
.pb-drawer {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 65;
    width: min(760px, 94vw); height: 240px; display: flex; flex-direction: column;
    background: #1B1916; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55); overflow: hidden;
}
.pb-drawer[hidden] { display: none; }
.pb-drawer__bar {
    display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0;
    padding: 0.5rem 0.85rem; font: 500 0.74rem var(--font-body, Inter, sans-serif);
    color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pb-drawer__bar b { color: #3FD65C; }
.pb-drawer__bar i { color: #3FD65C; }
.pb-drawer__libs {
    margin-left: auto; font: 500 0.58rem var(--st-mono, monospace); color: rgba(255,255,255,0.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
.pb-drawer__close { background: none; border: 0; color: rgba(255,255,255,0.5); font-size: 1.2rem; cursor: pointer; }
.pb-drawer__close:hover { color: #fff; }
.pb-drawer textarea {
    flex: 1; resize: none; border: 0; tab-size: 4;
    font: 500 0.78rem var(--st-mono, monospace); color: #D9FFE0; background: #12100e;
    padding: 0.7rem 0.9rem; line-height: 1.55;
}
.pb-drawer textarea:focus { outline: none; }

/* ─── Import modal bits (rides on bd-help) ─── */
.pb-importbox {
    width: 100%; min-height: 240px; resize: vertical; margin: 0.7rem 0 0; tab-size: 4;
    font: 500 0.74rem var(--st-mono, monospace); color: #E8E2D8; background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.7rem 0.85rem;
}
.pb-importbox:focus { outline: none; border-color: var(--clr-red, #FF4D14); }
.pb-import__btns { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.pb-import__btns .wb-btn { flex: 1; justify-content: center; }

/* ─── Canvas ─── */
.pb-canvas { justify-content: flex-start; align-items: stretch; padding: 1.8rem clamp(1rem, 4vw, 3rem) 5rem; }
.pb-canvas[hidden] { display: none; }
.pb-stack { width: 100%; max-width: 680px; margin: 0 auto; }
.pb-canvas__hint {
    max-width: 460px; margin: 3rem auto; text-align: center;
    font: 400 0.85rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.45);
    border: 1.5px dashed rgba(255,255,255,0.14); border-radius: 16px; padding: 1.8rem 1.6rem;
    background: rgba(19,17,16,0.55); backdrop-filter: blur(2px);
}
.pb-canvas__hint-title { font-weight: 700; color: #fff; margin-bottom: 0.35rem; }
.pb-c--trigger { color: #FFAD2E; font-style: normal; }
.pb-c--step { color: #4DA3FF; font-style: normal; }
.pb-c--code { color: #3FD65C; font-style: normal; }

/* ═══════════ BLOCKS — full color, Scratch shapes ═══════════ */

.pb-block {
    /* per-family palette */
    --blk-a: #8a8a8a; --blk-b: #6e6e6e; --blk-line: rgba(0,0,0,0.28);
    position: relative;
    background: linear-gradient(180deg, var(--blk-a), var(--blk-b));
    border: 1px solid rgba(0,0,0,0.35);
    border-radius: 12px;
    padding: 0.55rem 0.7rem 0.6rem;
    margin: 14px 0 0;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -3px 0 var(--blk-line), 0 4px 12px rgba(0,0,0,0.35);
    cursor: grab;
    transition: filter 0.12s, box-shadow 0.12s;
}
.pb-block:first-child { margin-top: 0; }
.pb-block:hover { filter: brightness(1.06); }
.pb-block.is-selected {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -3px 0 var(--blk-line),
        0 0 0 3px rgba(255,213,77,0.75), 0 4px 12px rgba(0,0,0,0.35);
}

/* family colors */
.pb-block--trigger { --blk-a: #FFAD2E; --blk-b: #F08C00; }
.pb-block--step    { --blk-a: #2E96FF; --blk-b: #0A6FE0; }
.pb-block--widget  { --blk-a: #C46BFF; --blk-b: #9C3EDC; }
.pb-block--code    { --blk-a: #35C853; --blk-b: #1E9E37; }
.pb-block--control { --blk-a: #FFC93E; --blk-b: #E8A200; }
.pb-block--data    { --blk-a: #1FD1BE; --blk-b: #0A9E8F; }
/* data declarations read as rounded-left flags too */
.pb-stack > .pb-block--data { border-radius: 22px 12px 12px 22px; }
.pb-stack > .pb-block--data::before { display: none; }

/* else-arm label between the two mouths of an If */
.pb-slot__arm {
    font: 800 0.62rem var(--font-body, Inter, sans-serif); text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85); text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    margin: -0.15rem 0 0.35rem 0.1rem;
}
.pb-block__slot + .pb-block__slot { margin-top: 0.5rem; }

/* control (If / Repeat): chamfered Scratch-control silhouette + ribbed left edge */
.pb-block--control {
    border-radius: 6px 16px 16px 6px;
    clip-path: polygon(0 8px, 8px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.pb-block--control > .pb-block__head .pb-block__name { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
/* hexagon condition input — the Scratch boolean shape */
.pb-f--hex {
    border-radius: 0;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    border: none; padding: 0.3rem 1rem; text-align: center;
    background: #fff;
}

/* puzzle tab on top of every stacked (non-hat) block */
.pb-block::before {
    content: ''; position: absolute; top: -7px; left: 28px; width: 38px; height: 10px;
    border-radius: 5px 5px 3px 3px;
    background: var(--blk-a);
    border: 1px solid rgba(0,0,0,0.35); border-bottom: none;
}
/* hat blocks: triggers get the Scratch “hat” dome and no tab */
.pb-block--trigger, .pb-block--widget.pb-block--hat { border-radius: 26px 26px 12px 12px; padding-top: 0.7rem; }
.pb-block--trigger::before { display: none; }
.pb-block--trigger[data-id] > .pb-block__head { padding-top: 0.05rem; }
/* top-level widget/code declarations read as flags: rounded left */
.pb-stack > .pb-block--widget, .pb-stack > .pb-block--code { border-radius: 22px 12px 12px 22px; }
.pb-stack > .pb-block--widget::before, .pb-stack > .pb-block--code::before { display: none; }

.pb-block__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.pb-block__icon {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.pb-block__icon i { font-size: 0.8rem; color: #fff; }
.pb-block__name {
    font: 800 0.78rem var(--font-body, Inter, sans-serif); color: #fff; white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.pb-block__fields { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; flex: 1; min-width: 0; }
.pb-flabel { font: 700 0.6rem var(--st-mono, monospace); color: rgba(255,255,255,0.8); text-shadow: 0 1px 0 rgba(0,0,0,0.2); }

/* white oval inputs — the Scratch signature */
.pb-f {
    font: 600 0.73rem var(--st-mono, monospace); color: #1d1d1f; background: #fff;
    border: 1px solid rgba(0,0,0,0.25); border-radius: 999px; padding: 0.26rem 0.65rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
    transition: box-shadow 0.12s;
}
.pb-f::placeholder { color: rgba(0,0,0,0.35); }
.pb-f:focus { outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.12), 0 0 0 3px rgba(255,255,255,0.4); }
select.pb-f { border-radius: 10px; padding-right: 0.4rem; }

.pb-block__tools { margin-left: auto; display: flex; gap: 3px; opacity: 0; transition: opacity 0.12s; }
.pb-block:hover > .pb-block__head .pb-block__tools { opacity: 1; }
.pb-tool {
    color: #fff; background: rgba(0,0,0,0.22);
    border: 0; border-radius: 7px; width: 23px; height: 23px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pb-tool i { font-size: 0.6rem; }
.pb-tool:hover { background: rgba(0,0,0,0.4); }
.pb-tool--del:hover { background: #E5352B; }
.pb-block__note {
    font: 500 0.65rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.75);
    margin: 0.4rem 0 0 2.15rem; text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

/* C-mouth slot — darker well of the same hue */
.pb-block__slot {
    margin: 0.6rem 0 0.1rem 1rem; padding: 0.6rem 0.6rem 0.55rem;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.2);
    min-height: 30px;
}
.pb-slot__hint { font: 500 0.66rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.55); padding: 0.1rem 0.2rem; }

/* drop-target glow while dragging from the rail */
.pb-block__slot.is-dropover {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.12);
}
.pb-block.is-dropover {
    filter: brightness(1.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -3px 0 var(--blk-line),
        0 0 0 3px rgba(255,255,255,0.7), 0 4px 12px rgba(0,0,0,0.35);
}

/* nested (stacked) blocks inside a mouth */
.pb-block--nested { margin: 12px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -3px 0 var(--blk-line), 0 2px 6px rgba(0,0,0,0.3); }
.pb-block--nested:first-child { margin-top: 0; }
.pb-block--nested::before { top: -6px; left: 22px; width: 32px; height: 9px; }
.pb-block--nested:first-child::before { display: none; }

/* code area inside green blocks: dark editor well */
.pb-codebox {
    display: block; width: 100%; min-height: 84px; margin-top: 0.5rem; resize: vertical;
    font: 500 0.73rem var(--st-mono, monospace); color: #D9FFE0; background: rgba(0,0,0,0.55);
    border: 1px solid rgba(0,0,0,0.4); border-radius: 9px; padding: 0.55rem 0.65rem; tab-size: 4;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.pb-codebox::placeholder { color: rgba(217,255,224,0.4); }
.pb-codebox:focus { outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.35); }

/* ─── Full-code view ─── */
.pb-codeview { display: flex; flex-direction: column; min-height: 0; background: #131110; }
.pb-codeview[hidden] { display: none; }
.pb-codeview__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0;
    padding: 0.55rem 1rem; font: 500 0.74rem var(--font-body, Inter, sans-serif); color: rgba(255,255,255,0.55);
    background: #1B1916; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pb-codeview__bar b { color: #fff; font-family: var(--st-mono, monospace); }
.pb-fullcode {
    flex: 1; width: 100%; resize: none; border: 0; tab-size: 4;
    font: 500 0.8rem var(--st-mono, monospace); color: #E8E2D8; background: #161311;
    padding: 1.1rem 1.3rem; line-height: 1.55;
}
.pb-fullcode:focus { outline: none; }

/* ─── Inspector: manifest form ─── */
.pb-mform { display: flex; flex-direction: column; gap: 0.55rem; }
.pb-mrow { display: flex; gap: 0.55rem; }
.pb-mrow .pb-mfield { flex: 1; min-width: 0; }
.pb-mfield { display: flex; flex-direction: column; gap: 3px; }
.pb-mfield span {
    font: 700 0.58rem var(--st-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.pb-mfield span i { margin-right: 3px; color: var(--clr-red, #FF4D14); opacity: 0.8; }
.pb-mf { width: 100%; }

.pb-pkgtree pre {
    font: 500 0.68rem var(--st-mono, monospace); color: #C8BFB4; line-height: 1.7;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    padding: 0.7rem 0.85rem; margin: 0; overflow-x: auto;
}
.pb-pkgtree i { color: var(--clr-red, #FF4D14); }

/* ─── Inspector: code preview ─── */
.pb-codetabs { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.pb-codetab {
    font: 600 0.66rem var(--st-mono, monospace); color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px;
    padding: 0.3rem 0.6rem; cursor: pointer;
}
.pb-codetab.is-active { color: #FF7A4D; background: rgba(255,77,20,0.13); border-color: rgba(255,77,20,0.45); }
.pb-codepreview {
    font: 500 0.68rem var(--st-mono, monospace); color: #E8E2D8; line-height: 1.55;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    padding: 0.75rem 0.85rem; margin: 0; overflow: auto; max-height: calc(100vh - 260px);
    white-space: pre;
}

/* ─── Inspector: AI ─── */
.pb-aipanel { display: flex; flex-direction: column; }
.pb-ai__log { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0; }
.pb-ai__msg {
    font: 400 0.74rem var(--font-body, Inter, sans-serif); border-radius: 11px; padding: 0.5rem 0.7rem;
    white-space: pre-wrap; word-break: break-word;
}
.pb-ai__msg--user { background: rgba(255,77,20,0.15); color: #FFD9CB; align-self: flex-end; max-width: 92%; }
.pb-ai__msg--bot { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); align-self: flex-start; max-width: 96%; }
.pb-ai__thinking { display: flex; align-items: center; gap: 0.55rem; }
.pb-ai__dots { display: inline-flex; gap: 4px; }
.pb-ai__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: pbdot 1.1s infinite ease-in-out; }
.pb-ai__dots i:nth-child(2) { animation-delay: 0.16s; }
.pb-ai__dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes pbdot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.pb-ai__thinklabel { opacity: 0.7; font-style: italic; }
.pb-ai__input {
    width: 100%; resize: vertical; font: 400 0.75rem var(--font-body, Inter, sans-serif); color: #fff;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 0.55rem 0.65rem;
}
.pb-ai__input:focus { outline: none; border-color: var(--clr-red, #FF4D14); }
.pb-ai__btns { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.pb-ai__btns .wb-btn { flex: 1; }
.pb-ai__run { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* ─── Toast ─── */
.pb-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80;
    font: 500 0.78rem var(--font-body, Inter, sans-serif); color: #fff;
    background: #2A2624; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
    padding: 0.6rem 1rem; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: opacity 0.4s;
}
.pb-toast.is-out { opacity: 0; }

/* ═══════════ LIGHT MODE (toggle in the toolbar, .pb-light on <html>) ═══════════
   Blocks keep their Scratch colors; the workspace chrome flips to light. */

.pb-light .st-main { background: #F3F0EA; }
.pb-light .bd-home { background: #F3F0EA; }
.pb-light .bd-home__title { color: #1d1d1f; }
.pb-light .bd-home__sub, .pb-light .bd-tplcard__desc { color: rgba(0,0,0,0.5); }
.pb-light .bd-section__title, .pb-light .pb-rail__cat { color: rgba(0,0,0,0.45); }
.pb-light .bd-tplcard { background: #fff; border-color: rgba(0,0,0,0.1); }
.pb-light .bd-tplcard__name { color: #1d1d1f; }
.pb-light .bd-tplcard--blank { background: transparent; border-color: rgba(0,0,0,0.18); }
.pb-light .bd-home__search input { background: #fff; border-color: rgba(0,0,0,0.14); color: #1d1d1f; }
.pb-light .bd-empty p { color: rgba(0,0,0,0.45); }
.pb-light .bd-empty svg { color: rgba(0,0,0,0.3); }
.pb-light .bd-importbtn { background: #fff; color: #1d1d1f; border-color: rgba(0,0,0,0.15); }

.pb-light .bd-toolbar { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.09); }
.pb-light .bd-toolbar__back { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.6); }
.pb-light .bd-toolbar__btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.65); }
.pb-light .bd-toolbar__btn:hover { background: rgba(0,0,0,0.09); color: #000; }
.pb-light .bd-toolbar__help { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.55); }
.pb-light .bd-toolbar__meta { color: rgba(0,0,0,0.4); }
.pb-light .pb-name { color: #1d1d1f; }
.pb-light .pb-name:focus { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.2); }
.pb-light .pb-seg { border-color: rgba(0,0,0,0.12); }
.pb-light .pb-seg__btn { color: rgba(0,0,0,0.5); }
.pb-light .pb-seg__btn:hover { color: #000; }
.pb-light .pb-seg__btn.is-active { background: rgba(255,77,20,0.12); color: #E8420A; }
.pb-light .bd-filemenu__panel { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.pb-light .bd-filemenu__label { color: rgba(0,0,0,0.45); }

.pb-light .bd-rail { background: #EDEAE3; border-right-color: rgba(0,0,0,0.08); }

.pb-light .bd-canvas {
    background:
        radial-gradient(circle, rgba(0,0,0,0.11) 1px, transparent 1px) 0 0/22px 22px,
        #E7E3DB;
}
.pb-light .pb-canvas__hint { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.55); }
.pb-light .pb-canvas__hint-title { color: #1d1d1f; }
.pb-light .pb-c--step { color: #0668D6; }
.pb-light .pb-c--trigger { color: #E8850C; }
.pb-light .pb-c--code { color: #1E9E37; }

.pb-light .bd-rightpanel { background: #FFFFFF; border-left-color: rgba(0,0,0,0.09); }
.pb-light .bd-tabs { border-bottom-color: rgba(0,0,0,0.08); }
.pb-light .bd-tab { color: rgba(0,0,0,0.4); }
.pb-light .bd-tab:hover { color: rgba(0,0,0,0.7); }
.pb-light .bd-tab.is-active { color: #1d1d1f; }
.pb-light .wb-hint { color: rgba(0,0,0,0.5); }
.pb-light .bd-subhead { color: rgba(0,0,0,0.45); }
.pb-light .pb-mfield span { color: rgba(0,0,0,0.45); }
.pb-light .wb-input, .pb-light .pb-ai__input {
    background: #F4F1EB; border-color: rgba(0,0,0,0.14); color: #1d1d1f;
}
.pb-light .pb-codetab { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.5); }
.pb-light .pb-codetab.is-active { color: #E8420A; background: rgba(255,77,20,0.1); border-color: rgba(255,77,20,0.4); }
.pb-light .pb-ai__msg--bot { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.75); }
.pb-light .pb-ai__msg--user { background: rgba(255,77,20,0.12); color: #B33305; }

.pb-light .pb-codeview__bar { background: #fff; border-bottom-color: rgba(0,0,0,0.09); color: rgba(0,0,0,0.55); }
.pb-light .pb-codeview__bar b { color: #1d1d1f; }
.pb-light .pb-codeview { background: #F3F0EA; }
.pb-light .pb-code__hint { color: rgba(0,0,0,0.4); }

/* light-mode fixes: widget top bar, manifest package tree, code preview, docs icon */
.pb-light .pb-wv__bar { background: #EDEAE3; color: rgba(0,0,0,0.6); border-bottom-color: rgba(0,0,0,0.08); }
.pb-light .pb-wv__hint { color: rgba(0,0,0,0.4); }
.pb-light .pb-pkgtree pre { background: #F4F1EB; color: #4a453e; border-color: rgba(0,0,0,0.1); }
.pb-light .pb-pkgtree i { color: var(--clr-red, #FF4D14); }
.pb-light .pb-codepreview { background: #F4F1EB; color: #2a2620; border-color: rgba(0,0,0,0.1); }
.pb-light .pb-docsbtn i { color: rgba(0,0,0,0.55); }
.pb-light .pb-ide__treehead { color: rgba(0,0,0,0.5); border-bottom-color: rgba(0,0,0,0.08); }
.pb-light .pb-ide__treehead i { color: var(--clr-red, #FF4D14); }
.pb-light .pb-ide__folder { color: rgba(0,0,0,0.4); }
.pb-light .pb-ide__upload { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.18); }

.pb-light .bd-help__panel { background: #fff; border-color: rgba(0,0,0,0.12); }
.pb-light .bd-help__head h3 { color: #1d1d1f; }
.pb-light .bd-help__close { background: rgba(0,0,0,0.06); color: #1d1d1f; }
.pb-light .wb-install__steps li, .pb-light .wb-install__docs { color: rgba(0,0,0,0.65); }

.pb-light .pb-toast { background: #fff; color: #1d1d1f; border-color: rgba(0,0,0,0.15); }
.pb-light .pb-drawer { background: #fff; border-color: rgba(0,0,0,0.14); }
.pb-light .pb-drawer__bar { color: rgba(0,0,0,0.55); border-bottom-color: rgba(0,0,0,0.08); }
.pb-light .pb-drawer textarea { background: #F7F4EE; color: #14421d; }
.pb-light .pb-importbox { background: #F7F4EE; color: #1d1d1f; border-color: rgba(0,0,0,0.14); }

/* ─── Responsive ─── */
@media (max-width: 760px) {
    .pb-stack { max-width: none; }
    .pb-name { max-width: 130px; }
    #pbPalette .bd-railbtn { width: 62px; }
}