/* ===== Round 9b: themed controls (body.bs-*) — pure CSS + inline SVG ===== */
body[class*=" bs-"] .btn:not(.g):not(.q):not(.d){position:relative;overflow:visible;isolation:isolate}
/* --- Halloween: spiderweb --- */
body.bs-web .btn:not(.g):not(.q):not(.d),.pv-web .bsmini{background:linear-gradient(180deg,#fb923c,#ea580c 60%,#c2410c);color:#1c0a00;font-weight:800;box-shadow:0 4px 14px rgba(249,115,22,.35),inset 0 -2px 0 rgba(0,0,0,.18)}
body.bs-web .btn:not(.g):not(.q):not(.d)::before,.pv-web .bsmini::before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='white' stroke-opacity='.75' stroke-width='1.1'%3E%3Cpath d='M0 0L40 40M0 0L40 14M0 0L14 40M0 0L40 0M0 0L0 40'/%3E%3Cpath d='M0 9Q6 7 7 0M0 18Q11 14 13 6Q15 13 18 0M0 27Q15 22 19 13Q24 19 27 0M0 36Q20 30 26 20Q31 24 36 0'/%3E%3C/svg%3E") no-repeat 0 0/100%;border-top-left-radius:inherit;pointer-events:none;opacity:.9}
body.bs-web .btn:not(.g):not(.q):not(.d)::after,.pv-web .bsmini::after{content:"";position:absolute;left:8%;right:8%;bottom:-7px;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V3Q96 3 95 8Q94 12 92 8Q91 3 84 3Q78 3 77 10Q76 14 74 10Q73 3 60 3Q50 3 49 7Q48 10 46 7Q45 3 30 3Q22 3 21 11Q20 14 18 11Q17 3 8 3Q3 3 2 6Q1 8 0 6Z' fill='#f97316'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.3,1.4,.5,1);pointer-events:none;z-index:-1}
body.bs-web .btn:not(.g):not(.q):not(.d):hover::after,body.bs-web .btn:not(.g):not(.q):not(.d):focus-visible::after{transform:scaleY(1)}body.bs-web .btn:not(.g):not(.q):not(.d):hover,.pv-web .bsmini:hover{box-shadow:0 0 22px rgba(249,115,22,.6),inset 0 -2px 0 rgba(0,0,0,.18)}
body.bs-web .card,body.bs-web .fcard{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='#7c3aed' stroke-opacity='.45' stroke-width='1'%3E%3Cpath d='M40 0L0 40M40 0L0 14M40 0L26 40M40 0L0 0M40 0L40 40'/%3E%3Cpath d='M40 9Q34 7 33 0M40 18Q29 14 27 6Q25 13 22 0M40 27Q25 22 21 13Q16 19 13 0'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:top right;background-size:46px}
body.bs-web .seg button.on,body.bs-web .subtabs .stb.on{background:#ea580c!important;color:#1c0a00!important;box-shadow:0 0 12px rgba(249,115,22,.45)}
body.bs-web .chip{border:1px solid rgba(249,115,22,.55);background:rgba(249,115,22,.14)}
body.bs-web .tgl.on,body.bs-frank .tgl.on{background:#f97316!important}
body.bs-web #qafab{background:radial-gradient(circle at 35% 30%,#fdba74,#ea580c 60%,#9a3412)!important;box-shadow:0 0 22px rgba(249,115,22,.55)!important}
/* --- Halloween: Frankenstein --- */
body.bs-frank .btn:not(.g):not(.q):not(.d),.pv-frank .bsmini{background:linear-gradient(180deg,#84cc16,#4d7c0f);color:#0f1f05;font-weight:900;border:2px solid #1a2e05;box-shadow:0 4px 0 #1a2e05,0 6px 16px rgba(0,0,0,.3);margin-inline:6px}
body.bs-frank .btn:not(.g):not(.q):not(.d)::before,.pv-frank .bsmini::before{content:"";position:absolute;left:8px;right:8px;top:4px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5H16' stroke='#0f1f05' stroke-width='1.6'/%3E%3Cpath d='M4 1V9M12 1V9' stroke='#0f1f05' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 0/16px 8px;opacity:.75;pointer-events:none}
body.bs-frank .btn:not(.g):not(.q):not(.d)::after,.pv-frank .bsmini::after{content:"";position:absolute;top:50%;left:-9px;right:-9px;height:10px;transform:translateY(-50%);background:linear-gradient(#d1d5db,#6b7280) left/7px 10px no-repeat,linear-gradient(#d1d5db,#6b7280) right/7px 10px no-repeat;border-radius:2px;pointer-events:none;z-index:-1}
body.bs-frank .btn:not(.g):not(.q):not(.d):hover,.pv-frank .bsmini:hover{box-shadow:0 4px 0 #1a2e05,0 0 22px rgba(132,204,22,.65)}body.bs-frank .btn:not(.g):not(.q):not(.d):active,.pv-frank .bsmini:active{transform:translateY(3px);box-shadow:0 1px 0 #1a2e05}
body.bs-frank .card,body.bs-frank .fcard{border-top:2px dashed rgba(132,204,22,.35)!important}
body.bs-frank .seg button.on,body.bs-frank .subtabs .stb.on{background:#65a30d!important;color:#0f1f05!important;border:1.5px solid #1a2e05}
body.bs-frank .chip{background:rgba(132,204,22,.16);border:1px dashed #65a30d}
body.bs-frank #qafab{background:linear-gradient(180deg,#84cc16,#3f6212)!important;border:2px solid #1a2e05;box-shadow:-9px 0 0 -4px #9ca3af,9px 0 0 -4px #9ca3af,0 0 20px rgba(132,204,22,.5)!important}
.bat9{position:fixed;width:22px;height:12px;pointer-events:none;z-index:9999;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M22 8c2-4 5-4 6 0 4-6 12-7 16-2-5 0-7 4-7 8-3-3-6-2-7 2-2-3-5-3-8 2-3-5-6-5-8-2-1-4-4-5-7-2 0-4-2-8-7-8 4-5 12-4 16 2 1-4 4-4 6 0z' fill='%23111'/%3E%3C/svg%3E") 0 0/100% no-repeat;animation:bat9 .8s ease-out forwards}
@keyframes bat9{0%{transform:translate(0,0) scale(.6)}30%{transform:translate(-8px,-18px) scale(1,.6)}60%{transform:translate(6px,-34px) scale(1)}100%{transform:translate(18px,-60px) scale(.8,.5);opacity:0}}
/* --- Christmas: candy cane + gift ribbon + snow cap --- */
body.bs-xmas .btn:not(.g):not(.q):not(.d),.pv-xmas .bsmini{background:linear-gradient(90deg,transparent calc(78% - 5px),#facc15 calc(78% - 5px) calc(78% + 5px),transparent 0),linear-gradient(180deg,#dc2626,#991b1b);color:#fff;font-weight:800;box-shadow:0 4px 14px rgba(185,28,28,.35)}
body.bs-xmas .btn:not(.g):not(.q):not(.d)::before,.pv-xmas .bsmini::before{content:"";position:absolute;left:-1px;right:-1px;top:-5px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q0 1 8 1H92Q100 1 100 8Q96 7 94 10Q91 12 89 9Q86 6 80 8Q76 11 72 8Q66 5 60 9Q56 12 52 8Q46 5 40 8Q36 11 32 8Q26 5 20 9Q16 12 12 8Q6 5 0 8Z' fill='white'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
body.bs-xmas .btn:not(.g):not(.q):not(.d)::after,.pv-xmas .bsmini::after{content:"";position:absolute;right:calc(22% - 11px);top:-9px;width:22px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M15 9C9 1 2 2 3 8C4 14 10 12 15 9C20 12 26 14 27 8C28 2 21 1 15 9Z' fill='#facc15' stroke='#a16207' stroke-width='1'/%3E%3Ccircle cx='15' cy='9' r='2.6' fill='#eab308'/%3E%3C/svg%3E") no-repeat 0 0/100%;pointer-events:none}
body.bs-xmas .seg button.on,body.bs-xmas .subtabs .stb.on{background:linear-gradient(180deg,#dc2626,#991b1b) padding-box,repeating-linear-gradient(-45deg,#dc2626 0 6px,#fff 6px 11px) border-box!important;border:3px solid transparent!important;color:#fff!important;font-weight:900}
body.bs-xmas .chip{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,repeating-linear-gradient(-45deg,#dc2626 0 5px,#fff 5px 9px) border-box}
body.bs-xmas .tgl.on{background:#15803d!important}
body.bs-xmas #qafab{background:linear-gradient(90deg,transparent 44%,#facc15 44% 56%,transparent 0),linear-gradient(0deg,transparent 44%,#facc15 44% 56%,transparent 0),#b91c1c!important}
body.bs-xmas .card,body.bs-xmas .fcard{border-top:3px solid rgba(255,255,255,.85)!important}
/* --- Thanksgiving: knit + leaf --- */
body.bs-tg .btn:not(.g):not(.q):not(.d),.pv-tg .bsmini{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M0 0L3 5L6 0M6 0L9 5L12 0M0 5L3 10L6 5M6 5L9 10L12 5'/%3E%3C/svg%3E"),linear-gradient(180deg,#d97706,#9a3412);background-size:12px 10px,100%;color:#fff;font-weight:800;box-shadow:0 4px 14px rgba(154,52,18,.3)}
body.bs-tg .btn:not(.g):not(.q):not(.d)::after,.pv-tg .bsmini::after{content:"";position:absolute;right:-6px;top:-7px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 5 4-2-1 5 4 1-4 3 2 3-5-1-1 6-1-6-5 1 2-3-4-3 4-1-1-5 4 2z' fill='#f59e0b'/%3E%3C/svg%3E") no-repeat 0 0/100%;transform:rotate(18deg);pointer-events:none;transition:transform .3s}body.bs-tg .btn:not(.g):not(.q):not(.d):hover::after{transform:rotate(-12deg) scale(1.1)}
body.bs-tg .seg button.on,body.bs-tg .subtabs .stb.on{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M0 0L3 5L6 0M6 0L9 5L12 0M0 5L3 10L6 5M6 5L9 10L12 5'/%3E%3C/svg%3E"),#c2570c!important;background-size:12px 10px,auto;color:#fff!important}
body.bs-tg .chip{background:rgba(217,119,6,.14);border:1px solid rgba(194,87,12,.4)}body.bs-tg .tgl.on{background:#c2570c!important}
body.bs-tg #qafab{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M0 0L3 5L6 0M6 0L9 5L12 0M0 5L3 10L6 5M6 5L9 10L12 5'/%3E%3C/svg%3E"),radial-gradient(circle,#f59e0b,#b45309)!important;background-size:12px 10px,auto!important}
/* --- Cozy: stitched wool --- */
body.bs-cozy .btn:not(.g):not(.q):not(.d),.pv-cozy .bsmini{outline:1.5px dashed rgba(255,255,255,.6);outline-offset:-5px;background:linear-gradient(180deg,#b45f3a,#8c4426);color:#fff}
body.bs-cozy .seg button.on,body.bs-cozy .subtabs .stb.on{outline:1.5px dashed rgba(255,255,255,.55);outline-offset:-4px}body.bs-cozy .chip{border:1.5px dashed var(--line)}
/* --- Neon: glow --- */
body.bs-neon .btn:not(.g):not(.q):not(.d),.pv-neon .bsmini{background:transparent;color:#fbeaff;border:2px solid #f0abfc;box-shadow:0 0 10px #f0abfc,inset 0 0 10px rgba(240,171,252,.45);text-shadow:0 0 8px #f0abfc}
body.bs-neon .btn:not(.g):not(.q):not(.d):hover,.pv-neon .bsmini:hover{box-shadow:0 0 22px #f0abfc,0 0 42px #a855f7,inset 0 0 14px rgba(240,171,252,.6)}
body.bs-neon .seg button.on,body.bs-neon .subtabs .stb.on{background:transparent!important;color:#fbeaff!important;box-shadow:0 0 0 2px #22d3ee,0 0 14px #22d3ee}body.bs-neon .chip{border:1px solid #22d3ee;box-shadow:0 0 8px rgba(34,211,238,.4)}
body.bs-neon .tgl.on{background:#d946ef!important;box-shadow:0 0 12px #d946ef}body.bs-neon #qafab{box-shadow:0 0 22px #22d3ee!important;border:2px solid #22d3ee}
/* --- Ocean: wave --- */
body.bs-ocean .btn:not(.g):not(.q):not(.d),.pv-ocean .bsmini{background:linear-gradient(180deg,#0ea5e9,#0369a1);color:#fff;overflow:hidden}
body.bs-ocean .btn:not(.g):not(.q):not(.d)::after,.pv-ocean .bsmini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q5 0 10 4T20 4T30 4T40 4V8H0Z' fill='white' fill-opacity='.28'/%3E%3C/svg%3E") repeat-x 0 100%/40px 9px;pointer-events:none;animation:wave9 3s linear infinite}
@keyframes wave9{to{background-position:40px 100%}}
body.bs-ocean .seg button.on,body.bs-ocean .subtabs .stb.on{background:linear-gradient(180deg,#38bdf8,#0284c7)!important;color:#fff!important}body.bs-ocean .chip{background:rgba(14,165,233,.12)}
/* --- Forest: leaf --- */
body.bs-forest .btn:not(.g):not(.q):not(.d),.pv-forest .bsmini{background:linear-gradient(180deg,#16a34a,#166534);color:#fff}
body.bs-forest .btn:not(.g):not(.q):not(.d)::after,.pv-forest .bsmini::after{content:"";position:absolute;left:-5px;top:-7px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 9 10 4 21 3C20 14 15 20 4 20Z' fill='#4ade80'/%3E%3Cpath d='M4 20L15 9' stroke='white' stroke-opacity='.6' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 0 0/100%;transform:rotate(-20deg);pointer-events:none}
body.bs-forest .seg button.on,body.bs-forest .subtabs .stb.on{background:#15803d!important;color:#fff!important}body.bs-forest .chip{background:rgba(22,163,74,.12)}
/* --- Pastel: soft rainbow + sparkle --- */
body.bs-pastel .btn:not(.g):not(.q):not(.d),.pv-pastel .bsmini{background:linear-gradient(120deg,#c084fc,#f9a8d4 55%,#fcd34d);color:#3b0764;font-weight:800}
body.bs-pastel .btn:not(.g):not(.q):not(.d)::after,.pv-pastel .bsmini::after{content:"";position:absolute;right:6px;top:3px;width:11px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M10 1l1.6 6.4L18 9l-6.4 1.6L10 17l-1.6-6.4L2 9l6.4-1.6z' opacity='.9'/%3E%3C/svg%3E") no-repeat 0 0/100%;pointer-events:none}
body.bs-pastel .seg button.on,body.bs-pastel .subtabs .stb.on{background:linear-gradient(120deg,#e9d5ff,#fbcfe8)!important;color:#581c87!important}body.bs-pastel .chip{background:linear-gradient(120deg,#f3e8ff,#fce7f3);color:#581c87}
/* --- Midnight: stars + moon glow --- */
body.bs-mid .btn:not(.g):not(.q):not(.d),.pv-mid .bsmini{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='white'%3E%3Ccircle cx='6' cy='6' r='.9' opacity='.8'/%3E%3Ccircle cx='22' cy='20' r='.7' opacity='.6'/%3E%3Ccircle cx='40' cy='8' r='1.1' opacity='.9'/%3E%3Ccircle cx='53' cy='22' r='.7' opacity='.6'/%3E%3Cpath d='M48 4l.8 1.8 1.8.8-1.8.8L48 9.2l-.8-1.8-1.8-.8 1.8-.8z' opacity='.9'/%3E%3C/svg%3E"),linear-gradient(180deg,#6366f1,#3730a3);background-size:60px 30px,100%;color:#fff;box-shadow:0 0 16px rgba(129,140,248,.4)}
body.bs-mid .seg button.on,body.bs-mid .subtabs .stb.on{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='white'%3E%3Ccircle cx='6' cy='6' r='.9' opacity='.8'/%3E%3Ccircle cx='22' cy='20' r='.7' opacity='.6'/%3E%3Ccircle cx='40' cy='8' r='1.1' opacity='.9'/%3E%3Ccircle cx='53' cy='22' r='.7' opacity='.6'/%3E%3Cpath d='M48 4l.8 1.8 1.8.8-1.8.8L48 9.2l-.8-1.8-1.8-.8 1.8-.8z' opacity='.9'/%3E%3C/svg%3E"),#4f46e5!important;background-size:60px 30px,auto;color:#fff!important}body.bs-mid .chip{border:1px solid rgba(129,140,248,.5)}
/* cards' corners per theme */
body.bs-web .card,body.bs-frank .card{border-radius:6px 18px 6px 18px}body.bs-xmas .card{border-radius:20px}body.bs-neon .card{border-radius:4px}body.bs-ocean .card{border-radius:24px 24px 24px 8px}body.bs-forest .card{border-radius:18px 6px 18px 6px}body.bs-pastel .card{border-radius:26px}
/* tap targets & reduced motion */
body[class*=" bs-"] .btn:not(.g):not(.q):not(.d){min-height:40px}
body.rmo .bat9{display:none}body.rmo.bs-ocean .btn:not(.g):not(.q):not(.d)::after{animation:none}body.rmo.bs-web .btn:not(.g):not(.q):not(.d)::after{transition:none}
/* preview tiles in the picker */
.bsgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.bsgal button.bsopt{border:1.5px solid var(--line);border-radius:14px;padding:14px 10px 10px;background:var(--card);color:var(--ink);text-align:center;cursor:pointer}.bsgal button.bsopt.on{border-color:var(--acc);background:var(--acc2)}.bsgal .bsdemo{pointer-events:none;margin:6px auto 8px;display:inline-flex}