/* ============================================================================
   Breadbit — website skins. The admin picks one in Admin → Settings → Website design.
   glass (default, = premium.css) · bench · lab · class · draft
   Each skin changes palette, type, shape AND structure (where the tools and the
   parts shelf live). Rails need width; below 720px every skin falls back to a
   bottom bar that keeps its own look.
   ============================================================================ */

/* ---------- preview ribbon ---------- */
#skinPrev{position:fixed;left:8px;right:8px;margin:0 auto;width:max-content;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);z-index:400;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 16px);padding:8px 14px;border-radius:14px;background:#111;color:#fff;font:600 12px/1.3 system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#skinPrev a{color:#ffd24a;white-space:nowrap}

/* ---------- shared: dark-/light-native skins hide the theme toggle ---------- */
html[data-skin="bench"] #themeBtn,html[data-skin="lab"] #themeBtn,html[data-skin="class"] #themeBtn,html[data-skin="draft"] #themeBtn{display:none!important}
html[data-skin]:not([data-skin="glass"]) *{-webkit-tap-highlight-color:transparent}
html[data-skin]:not([data-skin="glass"]) :is(#app #hbtns .hPill,#toolbar #dockBar>#runBtn,.big,button.big,.chip.on,#speedRow button.on,#speedRow button.active,.hGo,#xBody .pri,.btn,header.site nav a:first-child){color:var(--onbrand)}
html[data-skin]:not([data-skin="glass"]) :is(#hbtns .hPill,#runBtn) .ic{color:var(--onbrand)!important;--ic2:var(--onbrand)!important;fill:var(--onbrand)}
html[data-skin]:not([data-skin="glass"]) #app #hbtns .hPill{background:var(--brand);box-shadow:none}
html[data-skin]:not([data-skin="glass"]) :is(#brand){background:none;-webkit-text-fill-color:var(--text);color:var(--text)}

/* ============================================================================
   2 · WORKBENCH  — graphite + amber, CAD-style: tool rail left, parts strip top
   ============================================================================ */
html[data-skin="bench"]{--bg:#14161a;--panel:#1c1f25;--panel2:#252a32;--panel3:#2e343e;--line:#363d49;--text:#ece8e0;--sub:#98a0ac;--accent:#e9a23b;--accent2:#58c4b5;--good:#5fd38d;--onbrand:#1b1204;
  --brand:linear-gradient(180deg,#f2b552,#dc8f25);--glass:#1c1f25;--glass-b:#363d49;--shadow:0 6px 18px -8px rgba(0,0,0,.7);--r:8px;--ic2:#58c4b5;color-scheme:dark}
html[data-skin="bench"] body{font-family:"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;letter-spacing:.005em}
html[data-skin="bench"] #stage{background:radial-gradient(700px 400px at 50% 0,#222730,transparent 75%),var(--bg)}
html[data-skin="bench"] #stage::before{background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:28px 28px;opacity:1}
html[data-skin="bench"] #app header{background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--line);padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}
html[data-skin="bench"] #brand .logo{border-radius:6px;box-shadow:none}
html[data-skin="bench"] #app #hbtns button,html[data-skin="bench"] #hbtns .hPill{border-radius:6px}
html[data-skin="bench"] #app #hbtns .hPill{height:34px}
html[data-skin="bench"] #hud,html[data-skin="bench"] #hint,html[data-skin="bench"] #speedRow,html[data-skin="bench"] #zoomCtl,html[data-skin="bench"] #toast,html[data-skin="bench"] #inspector,html[data-skin="bench"] #labGuide{background:var(--panel);backdrop-filter:none;border-radius:6px;border-color:var(--line)}
html[data-skin="bench"] #hud{border-radius:6px}
html[data-skin="bench"] #quick{padding:6px 10px;gap:6px;background:var(--panel);border-bottom:1px solid var(--line);-webkit-mask-image:none;mask-image:none;justify-content:flex-start}
html[data-skin="bench"] #quick .qp{width:auto;min-width:74px;height:44px;flex-direction:row;gap:8px;padding:0 12px;border-radius:6px;background:var(--panel2);backdrop-filter:none;box-shadow:none;font-size:12px;color:var(--text)}
html[data-skin="bench"] #quick .qp .ic{width:20px;height:20px}
html[data-skin="bench"] #quick .qp.on{background:color-mix(in srgb,var(--accent) 22%,var(--panel2));border-color:var(--accent);box-shadow:none}
html[data-skin="bench"] #sheet,html[data-skin="bench"] #xSheet{border-radius:10px 10px 0 0}
html[data-skin="bench"] #dockBar,html[data-skin="bench"] #moreTray{background:var(--panel);backdrop-filter:none;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-skin="bench"] #toolbar #dockBar>button.active{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
html[data-skin="bench"] #toolbar #dockBar>#runBtn{border-radius:12px;box-shadow:0 4px 0 #9b6212}
html[data-skin="bench"] #toolbar #dockBar>#runBtn.active{background:linear-gradient(180deg,#58d98e,#2fa563);box-shadow:0 4px 0 #1b7142;color:#042513}
html[data-skin="bench"] #toolbar #dockBar>#runBtn.active .ic{color:#042513!important;fill:#042513}
@media(min-width:720px){
  html[data-skin="bench"] #app{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr)}
  html[data-skin="bench"] #app>header,html[data-skin="bench"] #vblSticky,html[data-skin="bench"] #xBanner,html[data-skin="bench"] #quick{grid-column:1/-1}
  html[data-skin="bench"] #app>header{grid-row:1}html[data-skin="bench"] #vblSticky{grid-row:2}html[data-skin="bench"] #xBanner{grid-row:3}html[data-skin="bench"] #quick{grid-row:4}
  html[data-skin="bench"] #stage{grid-row:5;grid-column:2}
  html[data-skin="bench"] #toolbar{grid-row:5;grid-column:1;padding:10px 8px;background:var(--panel);border-right:1px solid var(--line);pointer-events:auto;overflow:visible}
  html[data-skin="bench"] #dockBar{flex-direction:column;align-items:stretch;height:auto;max-width:none;width:100%;padding:6px;gap:4px;margin:0;background:transparent;border:0;box-shadow:none}
  html[data-skin="bench"] #toolbar #dockBar>button{flex:none;height:60px;width:100%;border-radius:8px}
  html[data-skin="bench"] #toolbar #dockBar>#runBtn{order:-1;width:100%;height:64px;margin:0 0 8px;box-shadow:0 4px 0 #9b6212}
  html[data-skin="bench"] #toolbar #dockBar>#runBtn.active{box-shadow:0 4px 0 #1b7142}
  html[data-skin="bench"] #moreTray{left:calc(100% + 8px);bottom:8px;margin:0;transform:none;width:300px;animation:trayInSide .16s ease-out}
  html[data-skin="bench"] #hintBar{bottom:56px}
}
@keyframes trayInSide{from{opacity:0;transform:translateX(-8px)}}
html[data-skin="bench"][data-board="auto"]{--plastic1:#262d3a;--plastic2:#161b25}
html[data-skin="bench"][data-board="auto"] .plastic{stroke:#364560}html[data-skin="bench"][data-board="auto"] .hole{fill:#04070b}html[data-skin="bench"][data-board="auto"] .holeRing{stroke:#c58a35}
html[data-skin="bench"][data-board="auto"] .label,html[data-skin="bench"][data-board="auto"] .labelRow{fill:#8ea0bd}html[data-skin="bench"][data-board="auto"] .leadline{stroke:#d3dbe8}

/* ============================================================================
   3 · INSTRUMENT — phosphor-green console: toolbar across the top, parts palette on the left
   ============================================================================ */
html[data-skin="lab"]{--bg:#040704;--panel:#0a110b;--panel2:#0f1a10;--panel3:#162416;--line:#1f3d21;--text:#c9f6cb;--sub:#6fa872;--accent:#37f57c;--accent2:#ffd24a;--good:#37f57c;--onbrand:#031007;
  --brand:linear-gradient(180deg,#43ff8a,#1fd466);--glass:#0a110b;--glass-b:#1f3d21;--shadow:0 0 0 1px #1f3d21;--r:2px;--ic2:#ffd24a;color-scheme:dark}
html[data-skin="lab"] body,html[data-skin="lab"] button,html[data-skin="lab"] input,html[data-skin="lab"] select,html[data-skin="lab"] textarea{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace}
html[data-skin="lab"] #stage{background:#030603}
html[data-skin="lab"] #stage::before{background-image:linear-gradient(#37f57c14 1px,transparent 1px),linear-gradient(90deg,#37f57c14 1px,transparent 1px);background-size:32px 32px;opacity:1}
html[data-skin="lab"] #stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
html[data-skin="lab"] #app header{background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--accent);box-shadow:0 1px 14px #37f57c26}
html[data-skin="lab"] #brand{font-weight:700;letter-spacing:.06em}
html[data-skin="lab"] #brand span::after{content:"_";color:var(--accent);animation:labBlink 1.1s steps(1) infinite}
@keyframes labBlink{50%{opacity:0}}
html[data-skin="lab"] #brand .logo{border-radius:2px;box-shadow:0 0 0 1px var(--line);filter:hue-rotate(-60deg) saturate(.8)}
html[data-skin="lab"] *{border-radius:2px}
html[data-skin="lab"] #app #hbtns button,html[data-skin="lab"] #hbtns .hPill{border-radius:2px;border:1px solid var(--line)}
html[data-skin="lab"] #hud,html[data-skin="lab"] #hint,html[data-skin="lab"] #speedRow,html[data-skin="lab"] #zoomCtl,html[data-skin="lab"] #toast,html[data-skin="lab"] #inspector,html[data-skin="lab"] #labGuide,html[data-skin="lab"] #sheet,html[data-skin="lab"] #xSheet{background:var(--panel);backdrop-filter:none;border:1px solid var(--line);box-shadow:none;border-radius:2px}
html[data-skin="lab"] #sheet::before{display:none}
html[data-skin="lab"] #labGuide{border-left:3px solid var(--accent)}
html[data-skin="lab"] #hud{border-radius:2px;color:var(--accent)}
html[data-skin="lab"] .hudRow.stat.running b{text-shadow:0 0 8px var(--accent)}
html[data-skin="lab"] #quick{background:var(--panel);border-top:1px solid var(--line);padding:6px;-webkit-mask-image:none;mask-image:none}
html[data-skin="lab"] #quick .qp{width:72px;height:56px;border-radius:2px;background:var(--panel2);backdrop-filter:none;box-shadow:none;font-size:10px;color:var(--sub)}
html[data-skin="lab"] #quick .qp .ic{color:var(--accent)}
html[data-skin="lab"] #quick .qp.on{background:#37f57c1f;border-color:var(--accent);box-shadow:0 0 12px #37f57c40;color:var(--accent)}
html[data-skin="lab"] #toolbar{background:var(--panel);border-bottom:1px solid var(--line);padding:6px 8px;overflow:visible}
html[data-skin="lab"] #dockBar{max-width:none;height:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;margin:0;align-items:center;gap:6px;border-radius:0}
html[data-skin="lab"] #toolbar #dockBar>button{flex:1 1 0;height:46px;border-radius:2px;border:1px solid var(--line);background:var(--panel2);flex-direction:row;gap:8px;font-size:12px;color:var(--text)}
html[data-skin="lab"] #toolbar #dockBar>button .ic{width:20px;height:20px;color:var(--accent)}
html[data-skin="lab"] #toolbar #dockBar>button.active{background:#37f57c24;border-color:var(--accent);box-shadow:0 0 12px #37f57c40}
html[data-skin="lab"] #toolbar #dockBar>#runBtn{order:-1;flex:1.3 1 0;width:auto;height:46px;margin:0;border-radius:2px;background:var(--brand);color:var(--onbrand);box-shadow:none;flex-direction:row;gap:8px}
html[data-skin="lab"] #toolbar #dockBar>#runBtn.active{background:#ffd24a;box-shadow:0 0 14px #ffd24a66}
html[data-skin="lab"] #toolbar #dockBar>#runBtn .ic{width:20px;height:20px}
html[data-skin="lab"] #moreTray{background:var(--panel);backdrop-filter:none;border:1px solid var(--accent);border-radius:2px;box-shadow:0 0 24px #37f57c33;top:auto;bottom:100%;margin:0 0 8px;left:auto;right:8px;transform:none;animation:none}   /* phones: toolbar is at the bottom, so open UPWARD */
html[data-skin="lab"] #toolbar #moreTray .tile{border-radius:2px;background:var(--panel2);height:64px}
html[data-skin="lab"] .big,html[data-skin="lab"] button.big,html[data-skin="lab"] .chip.on,html[data-skin="lab"] #hero h2 span{box-shadow:none}
@media(min-width:720px){
  html[data-skin="lab"] #moreTray{top:100%;bottom:auto;margin:6px 0 0}   /* wide screens: toolbar is at the top, open DOWNWARD */
  html[data-skin="lab"] #app{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr)}
  html[data-skin="lab"] #app>header,html[data-skin="lab"] #vblSticky,html[data-skin="lab"] #xBanner,html[data-skin="lab"] #toolbar{grid-column:1/-1}
  html[data-skin="lab"] #app>header{grid-row:1}html[data-skin="lab"] #vblSticky{grid-row:2}html[data-skin="lab"] #xBanner{grid-row:3}html[data-skin="lab"] #toolbar{grid-row:4;position:relative;z-index:30}
  html[data-skin="lab"] #quick{grid-row:5;grid-column:1;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:8px 6px;align-items:center;border-top:0;border-right:1px solid var(--line);justify-content:flex-start;gap:6px;scrollbar-width:thin}
  html[data-skin="lab"] #stage{grid-row:5;grid-column:2}
  html[data-skin="lab"] #toolbar{padding:6px 10px}
  html[data-skin="lab"] #dockBar{max-width:720px}
}
html[data-skin="lab"][data-board="auto"]{--plastic1:#1f7a46;--plastic2:#14522f}
html[data-skin="lab"][data-board="auto"] .plastic{stroke:#0d3b22}html[data-skin="lab"][data-board="auto"] .hole{fill:#06140c}html[data-skin="lab"][data-board="auto"] .holeRing{stroke:#d6b25e}
html[data-skin="lab"][data-board="auto"] .label,html[data-skin="lab"][data-board="auto"] .labelRow{fill:#bfe3cc}html[data-skin="lab"][data-board="auto"] .leadline{stroke:#e8e2cf}

/* ============================================================================
   4 · CLASSROOM — bright and chunky: tall blue header, big cards, full-width bottom bar
   ============================================================================ */
html[data-skin="class"]{--bg:#eef4ff;--panel:#ffffff;--panel2:#f2f6ff;--panel3:#e2ebff;--line:#c9d8f5;--text:#16213f;--sub:#4d5f86;--accent:#2f6bff;--accent2:#0a8fb0;--good:#16a766;--onbrand:#1a1300;
  --brand:linear-gradient(180deg,#ffd44d,#ffb800);--glass:#ffffff;--glass-b:#c9d8f5;--shadow:0 8px 20px -10px rgba(30,60,140,.45);--r:18px;--ic2:#2f6bff;color-scheme:light}
html[data-skin="class"] body{font-family:"Trebuchet MS","Avenir Next","Segoe UI",system-ui,sans-serif}
html[data-skin="class"] #stage{background:radial-gradient(800px 400px at 50% 0,#fff,transparent 70%),#dfeaff}
html[data-skin="class"] #stage::before{background-image:radial-gradient(#2f6bff33 1.4px,transparent 1.6px);background-size:26px 26px;opacity:1}
html[data-skin="class"] #app header{background:var(--accent);color:#fff;backdrop-filter:none;border-bottom:0;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));box-shadow:0 4px 0 #1d4fc7}
html[data-skin="class"] #app #brand{font-size:21px;-webkit-text-fill-color:#fff;color:#fff}
html[data-skin="class"] #brand .logo{width:38px;height:38px;border-radius:12px;box-shadow:0 0 0 3px #fff}
html[data-skin="class"] #app #hbtns button{width:42px;height:42px;border-radius:14px;color:#fff;background:#ffffff26}
html[data-skin="class"] #app #hbtns button .ic{color:#fff;--ic2:#fff}
html[data-skin="class"] #app #hbtns .hPill{width:auto;height:44px;padding:0 18px 0 14px;font-size:15px;font-weight:800;border-radius:16px;background:var(--brand);box-shadow:0 4px 0 #c38e00}
html[data-skin="class"] #hbtns .hPill .ic{width:22px;height:22px}
html[data-skin="class"] #hud,html[data-skin="class"] #hint,html[data-skin="class"] #speedRow,html[data-skin="class"] #zoomCtl,html[data-skin="class"] #toast,html[data-skin="class"] #inspector,html[data-skin="class"] #labGuide{background:#fff;backdrop-filter:none;border:2px solid var(--line);box-shadow:var(--shadow)}
html[data-skin="class"] #hint{font-size:12.5px;color:var(--sub)}
html[data-skin="class"] #hud{font-size:14px}
html[data-skin="class"] #sheet,html[data-skin="class"] #xSheet{border:2px solid var(--line);border-bottom:0}
html[data-skin="class"] #quick{padding:10px 12px 6px;gap:10px;background:transparent}
html[data-skin="class"] #quick .qp{width:84px;height:82px;border-radius:20px;background:#fff;backdrop-filter:none;border:2px solid var(--line);box-shadow:0 4px 0 #c9d8f5;font-size:12px;font-weight:700;color:var(--text);gap:6px}
html[data-skin="class"] #quick .qp .ic{width:32px;height:32px;color:var(--accent);--ic2:#ffb800}
html[data-skin="class"] #quick .qp.on{background:#e6efff;border-color:var(--accent);box-shadow:0 4px 0 #2f6bff}
html[data-skin="class"] #quick .qp.more{background:#fff7d6;border-color:#ffd44d;border-style:solid;box-shadow:0 4px 0 #ffd44d}
html[data-skin="class"] #toolbar{padding:0;background:#fff;border-top:3px solid var(--accent);box-shadow:0 -6px 20px -12px rgba(30,60,140,.5)}
html[data-skin="class"] #dockBar{max-width:none;margin:0;height:84px;padding:8px 10px;border-radius:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;align-items:center;gap:6px}
html[data-skin="class"] #toolbar #dockBar>button{height:68px;border-radius:18px;font-size:12.5px;font-weight:800;color:var(--text);gap:4px}
html[data-skin="class"] #toolbar #dockBar>button .ic{width:30px;height:30px;color:var(--accent);--ic2:#ffb800}
html[data-skin="class"] #toolbar #dockBar>button.active{background:#e6efff;box-shadow:inset 0 -4px 0 var(--accent)}
html[data-skin="class"] #toolbar #dockBar>#runBtn{flex:1.5 1 0;width:auto;height:68px;margin:0 6px;border-radius:20px;background:#17b26a;color:#fff;box-shadow:0 5px 0 #0d7b47;flex-direction:row;gap:8px;font-size:16px}
html[data-skin="class"] #toolbar #dockBar>#runBtn .ic{color:#fff!important;fill:#fff;width:28px;height:28px}
html[data-skin="class"] #toolbar #dockBar>#runBtn.active{background:#ff8a1f;box-shadow:0 5px 0 #b45a00}
html[data-skin="class"] #toolbar #dockBar>#runBtn{color:#fff}
html[data-skin="class"] #toolbar #dockBar>button.pri{background:#fff7d6}
html[data-skin="class"] #moreTray{background:#fff;backdrop-filter:none;border:2px solid var(--line);box-shadow:var(--shadow);border-radius:24px;bottom:calc(100% + 6px)}
html[data-skin="class"] #toolbar #moreTray .tile{height:84px;border-radius:18px;background:#f2f6ff;font-size:12.5px;font-weight:700;color:var(--text);border:2px solid var(--line)}
html[data-skin="class"] #moreTray .tile .ic{color:var(--accent)}
html[data-skin="class"] #hero{background:color-mix(in srgb,#eef4ff 82%,transparent)}
html[data-skin="class"] .hMesh{background:radial-gradient(520px 360px at 12% 8%,rgba(255,212,77,.55),transparent 70%),radial-gradient(520px 420px at 92% 26%,rgba(47,107,255,.25),transparent 70%)}
html[data-skin="class"] #hero h2 span{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
html[data-skin="class"] .hGo{background:var(--brand);box-shadow:0 5px 0 #c38e00}.hGo .ic{color:var(--onbrand)}
html[data-skin="class"] .hCard,html[data-skin="class"] .hSkip,html[data-skin="class"] .hGhost{background:#fff;backdrop-filter:none;border:2px solid var(--line);color:var(--text)}
html[data-skin="class"] .hBrand em{background:#fff}
html[data-skin="class"][data-board="auto"]{--plastic1:#f6f2e8;--plastic2:#ddd6c4}

/* ============================================================================
   5 · BLUEPRINT — drafting sheet: blue paper, white line-work, tool rail on the right
   ============================================================================ */
html[data-skin="draft"]{--bg:#0b2a55;--panel:#0f3569;--panel2:#134078;--panel3:#1a4c8e;--line:#5388d0;--text:#eef5ff;--sub:#a9c6ee;--accent:#ffe14d;--accent2:#8fd8ff;--good:#7ff0b0;--onbrand:#0b2a55;
  --brand:linear-gradient(180deg,#ffe86e,#ffd51f);--glass:#0f3569;--glass-b:#5388d0;--shadow:none;--r:0;--ic2:#8fd8ff;color-scheme:dark}
html[data-skin="draft"] body,html[data-skin="draft"] button,html[data-skin="draft"] input,html[data-skin="draft"] select{font-family:"Avenir Next Condensed","Roboto Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;letter-spacing:.03em}
html[data-skin="draft"] #stage{background:var(--bg)}
html[data-skin="draft"] #stage::before{background-image:linear-gradient(#ffffff22 1px,transparent 1px),linear-gradient(90deg,#ffffff22 1px,transparent 1px),linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;opacity:1}
html[data-skin="draft"] #stage::after{content:"";position:absolute;inset:8px;border:1px solid #ffffffaa;outline:1px solid #ffffff55;outline-offset:3px;pointer-events:none;z-index:1}
html[data-skin="draft"] #app header{background:var(--panel);backdrop-filter:none;border-bottom:3px double #ffffffaa}
html[data-skin="draft"] #brand{font-size:19px;letter-spacing:.14em;font-weight:700}
html[data-skin="draft"] #brand .logo{border-radius:0;box-shadow:0 0 0 1px #fff}
html[data-skin="draft"] *{border-radius:0}
html[data-skin="draft"] #app #hbtns button{border-radius:0;border:1px solid #ffffff55}
html[data-skin="draft"] #hud,html[data-skin="draft"] #hint,html[data-skin="draft"] #speedRow,html[data-skin="draft"] #zoomCtl,html[data-skin="draft"] #toast,html[data-skin="draft"] #inspector,html[data-skin="draft"] #labGuide,html[data-skin="draft"] #sheet,html[data-skin="draft"] #xSheet{background:var(--panel);backdrop-filter:none;border:1px solid #ffffffaa;box-shadow:none;border-radius:0}
html[data-skin="draft"] #hud{left:20px;top:20px}
html[data-skin="draft"] #sheet::before{display:none}
html[data-skin="draft"] #quick{background:var(--panel);border-top:3px double #ffffffaa;padding:8px 12px;-webkit-mask-image:none;mask-image:none;gap:8px}
html[data-skin="draft"] #quick .qp{width:76px;height:60px;border-radius:0;background:transparent;border:1px dashed #ffffff88;backdrop-filter:none;box-shadow:none;color:var(--text);font-size:11px}
html[data-skin="draft"] #quick .qp .ic{color:#fff;--ic2:var(--accent)}
html[data-skin="draft"] #quick .qp.on{background:#ffe14d22;border:1px solid var(--accent);box-shadow:none}
html[data-skin="draft"] #quick .qp.more{border-style:solid}
html[data-skin="draft"] #toolbar{background:var(--panel);padding:6px 10px;border-top:0;overflow:visible}
html[data-skin="draft"] #dockBar{max-width:none;height:auto;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;margin:0;gap:6px;border-radius:0}
html[data-skin="draft"] #toolbar #dockBar>button{height:54px;border-radius:0;border:1px solid #ffffff66;color:var(--text)}
html[data-skin="draft"] #toolbar #dockBar>button .ic{color:#fff;--ic2:var(--accent)}
html[data-skin="draft"] #toolbar #dockBar>button.active{background:#ffe14d26;border-color:var(--accent)}
html[data-skin="draft"] #toolbar #dockBar>#runBtn{order:-1;flex:1.2 1 0;width:auto;height:54px;margin:0;border-radius:0;background:var(--brand);box-shadow:none;flex-direction:row;gap:8px}
html[data-skin="draft"] #toolbar #dockBar>#runBtn.active{background:#7ff0b0;color:#06301a}
html[data-skin="draft"] #toolbar #dockBar>#runBtn.active .ic{color:#06301a!important;fill:#06301a}
html[data-skin="draft"] #moreTray{background:var(--panel);backdrop-filter:none;border:1px solid #fff;border-radius:0;box-shadow:none;bottom:calc(100% + 6px)}
html[data-skin="draft"] #toolbar #moreTray .tile{border-radius:0;background:transparent;border:1px dashed #ffffff88;height:68px}
html[data-skin="draft"] #hero{background:color-mix(in srgb,var(--bg) 78%,transparent)}
html[data-skin="draft"] .hCard,html[data-skin="draft"] .hGhost,html[data-skin="draft"] .hSkip,html[data-skin="draft"] .hBrand em{background:transparent;border:1px solid #ffffff88;backdrop-filter:none}
@media(min-width:720px){
  html[data-skin="draft"] #app{display:grid;grid-template-columns:minmax(0,1fr) 92px;grid-template-rows:auto auto auto minmax(0,1fr) auto}
  html[data-skin="draft"] #app>header,html[data-skin="draft"] #vblSticky,html[data-skin="draft"] #xBanner,html[data-skin="draft"] #quick{grid-column:1/-1}
  html[data-skin="draft"] #app>header{grid-row:1}html[data-skin="draft"] #vblSticky{grid-row:2}html[data-skin="draft"] #xBanner{grid-row:3}
  html[data-skin="draft"] #stage{grid-row:4;grid-column:1}html[data-skin="draft"] #toolbar{grid-row:4;grid-column:2;padding:10px 8px;border-left:3px double #ffffffaa}html[data-skin="draft"] #quick{grid-row:5}
  html[data-skin="draft"] #dockBar{flex-direction:column;align-items:stretch;width:100%}
  html[data-skin="draft"] #toolbar #dockBar>button{flex:none;height:62px;width:100%}
  html[data-skin="draft"] #toolbar #dockBar>#runBtn{flex:none;height:70px;margin-bottom:8px;width:100%;flex-direction:column;gap:2px}
  html[data-skin="draft"] #moreTray{bottom:8px;right:calc(100% + 8px);left:auto;margin:0;transform:none;width:300px;animation:trayInSideR .16s ease-out}
  html[data-skin="draft"] #hintBar{bottom:64px}
}
@keyframes trayInSideR{from{opacity:0;transform:translateX(8px)}}
html[data-skin="draft"][data-board="auto"]{--plastic1:#1c4a8a;--plastic2:#0f2f5e}
html[data-skin="draft"][data-board="auto"] .plastic{stroke:#3b78c9}html[data-skin="draft"][data-board="auto"] .hole{fill:#061426}html[data-skin="draft"][data-board="auto"] .holeRing{stroke:#6fb1ff}
html[data-skin="draft"][data-board="auto"] .label,html[data-skin="draft"][data-board="auto"] .labelRow{fill:#a9cbff}html[data-skin="draft"][data-board="auto"] .leadline{stroke:#dbe8ff}

/* ============================================================================
   Content pages (about, guides, privacy, 404) — same skins, simplified
   ============================================================================ */
html[data-skin="bench"] header.site{background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--line)}
html[data-skin="bench"] h1{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
html[data-skin="bench"] .card,html[data-skin="bench"] .note{border-radius:8px;backdrop-filter:none;background:var(--panel)}
html[data-skin="bench"] .btn{border-radius:8px;box-shadow:0 4px 0 #9b6212}
html[data-skin="lab"] header.site{background:var(--panel);backdrop-filter:none;border-bottom:1px solid var(--accent)}
html[data-skin="lab"] body{background:#040704;font-family:ui-monospace,Menlo,Consolas,monospace}
html[data-skin="lab"] h1{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);text-shadow:0 0 14px #37f57c66}
html[data-skin="lab"] h1::before{content:"> ";opacity:.7}
html[data-skin="lab"] .card,html[data-skin="lab"] .note{border-radius:2px;backdrop-filter:none;background:var(--panel);border:1px solid var(--line)}
html[data-skin="lab"] header.site nav a,html[data-skin="lab"] .btn{border-radius:2px}
html[data-skin="class"] body{background:#eef4ff;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
html[data-skin="class"] header.site{background:var(--accent);backdrop-filter:none;border-bottom:0;box-shadow:0 4px 0 #1d4fc7}
html[data-skin="class"] header.site .brand,html[data-skin="class"] header.site nav a{color:#fff}
html[data-skin="class"] header.site nav a:hover,html[data-skin="class"] header.site nav a[aria-current]{background:#ffffff2e;color:#fff}
html[data-skin="class"] header.site nav a:first-child{background:var(--brand);color:var(--onbrand);box-shadow:0 3px 0 #c38e00}
html[data-skin="class"] h1{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
html[data-skin="class"] .card,html[data-skin="class"] .note{background:#fff;backdrop-filter:none;border:2px solid var(--line);box-shadow:0 4px 0 #c9d8f5}
html[data-skin="class"] .btn{background:var(--brand);box-shadow:0 5px 0 #c38e00}
html[data-skin="draft"] body{background:var(--bg);font-family:"Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;background-image:linear-gradient(#ffffff1a 1px,transparent 1px),linear-gradient(90deg,#ffffff1a 1px,transparent 1px);background-size:32px 32px}
html[data-skin="draft"] header.site{background:var(--panel);backdrop-filter:none;border-bottom:3px double #ffffffaa}
html[data-skin="draft"] h1{background:none;-webkit-text-fill-color:#fff;color:#fff;letter-spacing:.06em}
html[data-skin="draft"] .card,html[data-skin="draft"] .note{border-radius:0;backdrop-filter:none;background:transparent;border:1px solid #ffffff88}
html[data-skin="draft"] header.site nav a,html[data-skin="draft"] .btn,html[data-skin="draft"] header.site .brand img{border-radius:0}
html[data-skin="draft"] .btn{box-shadow:none}

@media(max-width:480px){
  html[data-skin="class"] #app header{padding:8px 10px;gap:6px}
  html[data-skin="class"] #app #brand{font-size:17px;gap:6px}
  html[data-skin="class"] #brand .logo{width:32px;height:32px}
  html[data-skin="class"] #app #hbtns{gap:4px}
  html[data-skin="class"] #app #hbtns button{width:36px;height:36px;border-radius:12px}
  html[data-skin="class"] #app #hbtns .hPill{height:38px;padding:0 12px 0 10px;font-size:14px;margin:0 2px}
  html[data-skin="class"] #quick .qp{width:76px;height:74px}
  html[data-skin="draft"] #brand{letter-spacing:.08em;font-size:17px}
  html[data-skin="lab"] #brand{font-size:16px}
}

html[data-skin="draft"] #hud{max-width:calc(100% - 40px)}
html[data-skin="class"] #hud .hudRow.chip{font-size:11.5px}

/* ---- per-skin icon treatments (shapes themselves come from js/iconsets.js; see docs/ICON-SYSTEMS.md) ---- */
html[data-skin="glass"] :is(#toolbar #dockBar>button.active,#hbtns .hPill) .ic{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ic2) 55%,transparent))}
html[data-skin="lab"] .ic{image-rendering:pixelated}
html[data-skin="lab"] :is(#toolbar #dockBar>button.active,#quick .qp.on,#runBtn.active) .ic{filter:drop-shadow(0 0 3px currentColor)}
html[data-skin="class"] :is(#quick .qp,#toolbar #dockBar>button,#moreTray .tile) .ic{filter:drop-shadow(0 2px 0 rgba(20,40,90,.18))}