/* ============================================================
   STUDIO — reusable live customiser (side tab)
   Global: theme (dark/light) · palette (accent) · type (font pairing)
   Per-block: each [data-block] can be re-tinted / flipped independently
   Neutral, self-contained styling — legible on any template theme.
   Drop-in: <link studio.css> + window.STUDIO config + <script studio.js>
   ============================================================ */
.studio-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:400;background:#111318;color:#fff;border:1px solid rgba(255,255,255,.18);border-right:0;border-radius:12px 0 0 12px;padding:16px 11px;cursor:pointer;writing-mode:vertical-rl;font:600 11.5px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:9px;box-shadow:-8px 0 34px rgba(0,0,0,.45)}
.studio-tab .sd{writing-mode:horizontal-tb;width:9px;height:9px;border-radius:50%;background:var(--accent,#ff5f1f);box-shadow:0 0 8px var(--accent,#ff5f1f)}
.studio-tab:hover{background:#181b22}

.studio-panel{position:fixed;right:0;top:0;height:100%;width:308px;max-width:90vw;z-index:401;background:#0f1116;color:#fff;border-left:1px solid rgba(255,255,255,.14);transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.85,.25,1);padding:24px 22px 40px;overflow-y:auto;box-shadow:-18px 0 55px rgba(0,0,0,.5)}
.studio-panel.open{transform:none}
.studio-panel .st-title{font:800 17px/1 system-ui;letter-spacing:-.01em}
.studio-panel .st-sub{font:400 12px/1.5 system-ui;color:rgba(255,255,255,.52);margin:5px 0 6px}
.studio-close{position:absolute;top:14px;right:14px;background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.7}
.studio-close:hover{opacity:1}
.studio-panel h4{font:700 11px/1 system-ui;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:26px 0 12px}
.seg{display:flex;gap:6px}
.seg button{flex:1;background:#1b1e26;border:1px solid rgba(255,255,255,.14);color:#fff;padding:11px;border-radius:9px;font:600 12px system-ui;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.seg button.on{background:var(--accent,#ff5f1f);border-color:var(--accent,#ff5f1f);color:#0b0b0b}
.swatches{display:flex;gap:11px;flex-wrap:wrap}
.swatches button{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s}
.swatches button:hover{transform:scale(1.08)}
.swatches button.on{border-color:#fff;box-shadow:0 0 0 2px #0f1116,0 0 0 4px rgba(255,255,255,.9)}
.studio-panel h4 .st-count{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--accent,#ff5f1f);border:1px solid currentColor;border-radius:999px;padding:2px 6px;margin-left:7px;opacity:.85}
/* the pairing list scrolls inside the panel, so 15 entries never push it off screen */
.fonts-wrap{position:relative}
.fonts-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;background:linear-gradient(to bottom,rgba(15,17,22,0),rgba(15,17,22,.96));border-radius:0 0 9px 9px}
.fonts{display:flex;flex-direction:column;gap:8px;max-height:min(44vh,332px);overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 22px 2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.fonts::-webkit-scrollbar{width:8px}
.fonts::-webkit-scrollbar-track{background:transparent}
.fonts::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.fonts::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4);background-clip:padding-box}
.fonts button{background:#1b1e26;border:1px solid rgba(255,255,255,.14);color:#fff;padding:12px 14px;border-radius:9px;text-align:left;cursor:pointer;transition:border-color .2s;flex:none}
.fonts button.on{border-color:var(--accent,#ff5f1f)}
.fonts button b{display:block;font-size:14px;margin-bottom:2px;line-height:1.2}
.fonts button span{font-size:11px;color:rgba(255,255,255,.5);display:block;line-height:1.35}
.studio-hint{margin-top:26px;font:400 11px/1.5 system-ui;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.studio-hint b{color:var(--accent,#ff5f1f)}

/* per-block controls */
[data-block]{position:relative}
.blk-ctl{position:absolute;top:14px;right:14px;z-index:60;display:flex;gap:7px;align-items:center;background:rgba(15,17,22,.88);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 9px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;backdrop-filter:blur(8px);pointer-events:none}
[data-block]:hover .blk-ctl{opacity:1;transform:none;pointer-events:auto}
.blk-ctl .bt{width:26px;height:17px;border-radius:9px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(90deg,#0e0e0e 0 50%,#efefef 50% 100%);cursor:pointer;padding:0;flex:none}
.blk-ctl .bdot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.4);cursor:pointer;padding:0;flex:none}
.blk-ctl .bx{background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:13px;padding:0 2px}
@media(max-width:760px){.blk-ctl{display:none}}
@media(prefers-reduced-motion:reduce){.studio-panel{transition:none}}