/* HAT Physics SmartBoard 2027 – Studio V0.6.0. Desktop & touch */
:root{--hat-accent:#63d5bf;--hat-surface:#142734;--hat-surface2:#1d3746;--hat-text:#ecf6f9;--hat-muted:#a6c1cb;--hat-ring:#66d5d7}
#hatStudioToggle{background:#136b74;color:#fff;border:1px solid #58bdbe;font-weight:750;border-radius:8px}
#hatStudioMount{position:fixed;inset:0;pointer-events:none;z-index:1400;font:14px/1.5 system-ui,'Segoe UI',Arial,sans-serif;color:var(--hat-text)}
#hatStudioMount *{box-sizing:border-box}
.hat-studio{pointer-events:auto;position:absolute;right:12px;top:64px;bottom:56px;width:min(405px,calc(100vw - 24px));background:linear-gradient(145deg,#203c4d,#122734);border:1px solid #487182;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 15px 60px #051218b8;overflow:hidden;transition:transform .19s ease,opacity .19s ease}
.hat-studio.hat-closed{transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none}
.hat-head{padding:12px 16px;background:#122733;border-bottom:1px solid #41606b;display:flex;align-items:center;gap:8px}
.hat-head strong{font-size:15px;letter-spacing:.2px}.hat-head small{display:block;color:#94bac5;font-size:11px}
.hat-head button{margin-left:auto;font-size:18px;padding:3px 9px}
.hat-tabs{display:flex;gap:5px;padding:9px 10px;overflow-x:auto;background:#193341;scrollbar-width:thin}
.hat-tabs button{white-space:nowrap;font-size:12px;padding:8px 9px;border-radius:8px;border:1px solid transparent;background:#294957;color:#d7e9ef;cursor:pointer}
.hat-tabs button.active{color:#052d30;background:#81e4d1;border-color:#bdfcf2;font-weight:800}
.hat-pages{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px}
.hat-tab{display:none}.hat-tab.active{display:block}
.hat-tab h3{font-size:17px;margin:2px 0 10px;color:#b2f7e4}.hat-tab h4{margin:14px 0 6px;color:#e6f7fd}
.hat-tab p,.hat-tab .hint{color:#accbd3;font-size:12px;line-height:1.55}
.hat-tab label{display:block;color:#dceef2;font-size:12px;margin:9px 0 5px}
.hat-tab input:not([type=checkbox]):not([type=radio]),.hat-tab textarea,.hat-tab select{display:block;width:100%;padding:9px 10px;background:#0e2836;border:1px solid #517080;color:#f2fbfd;border-radius:9px;font:inherit;min-width:0}
.hat-tab input[type=checkbox]{accent-color:#63d6bf}.hat-tab textarea{min-height:65px;resize:vertical}
.hat-tab button,.hat-head button,.hat-dock button{background:#2c5265;color:#f5ffff;border:1px solid #57818b;border-radius:9px;padding:9px 11px;cursor:pointer;transition:background .15s}
.hat-tab button:hover,.hat-dock button:hover,.hat-head button:hover{background:#317d80}
.hat-tab button.hat-primary{background:#087d72;border-color:#54c3b4;color:white;font-weight:760}
.hat-tab button:disabled{opacity:.45;cursor:not-allowed}
.hat-row{display:flex;align-items:center;gap:8px;margin:7px 0}.hat-row>*{flex:1;min-width:0}.hat-row button{flex:0 1 auto}
.hat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.hat-grid button{min-height:39px;text-align:center}
.hat-note{background:#183e42;border-left:3px solid #4bc7b0;padding:9px 11px;color:#c8e8e6;margin:12px 0;font-size:12px;border-radius:5px}
.hat-output{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;min-height:48px;border:1px solid #416575;border-radius:9px;background:#0d2431;color:#eaf9f5;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.hat-stat{display:flex;justify-content:space-between;gap:6px;font-size:12px;padding:6px 0;border-bottom:1px solid #345564}
.hat-doc-card{border:1px solid #4b6d7a;border-radius:10px;background:#1c3b4a;padding:10px;margin:8px 0;display:grid;gap:6px}
.hat-doc-card strong{font-size:13px}.hat-doc-card small{color:#aed0d6;font-size:11px}
.hat-dock{pointer-events:auto;position:absolute;bottom:67px;left:50%;transform:translateX(-50%);display:flex;gap:5px;max-width:calc(100vw - 20px);padding:7px;border:1px solid #7fa0ae;border-radius:16px;background:#102532f2;box-shadow:0 10px 30px #0018;overflow-x:auto;scrollbar-width:thin}
.hat-dock button{min-width:41px;min-height:39px;flex-shrink:0;padding:7px 9px;font-size:16px;position:relative}
.hat-dock button[aria-pressed=true]{background:#8be4d4;color:#123237;border-color:#c2fff6}
.hat-dock button small{font-size:10px;display:block;line-height:1}
.hat-dock[hidden]{display:none}
.hat-toast{pointer-events:none;position:absolute;top:100px;left:50%;transform:translateX(-50%);background:#e4faf3;color:#163e40;padding:10px 16px;border-radius:8px;box-shadow:0 5px 30px #0005;max-width:350px;text-align:center;opacity:0;transition:opacity .2s}.hat-toast.show{opacity:1}
.hat-ink-pointer{pointer-events:none;position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible}
.hat-zoom-lens{pointer-events:none;position:absolute;z-index:5;width:220px;height:150px;border:3px solid #62d5b9;border-radius:14px;background:#fff;box-shadow:0 4px 24px #0007;overflow:hidden;display:none}
.hat-zoom-lens img{position:absolute;max-width:none;transform-origin:top left}
.hat-keycap{display:inline-block;background:#274454;border:1px solid #567280;border-radius:4px;padding:1px 5px;font:11px Consolas,monospace}
@media(max-width:700px){.hat-studio{left:5px;right:5px;top:70px;bottom:105px;width:auto}.hat-dock{bottom:52px;max-width:98vw;padding:5px}.hat-dock button{min-width:36px;min-height:38px;padding:5px}.hat-pages{padding:10px}}
@media print{#hatStudioMount,#hatStudioToggle{display:none!important}}
/* Override legacy nav flex direction: new Studio navigation is horizontal. */
#hatTabs,#hatDock{flex-direction:row!important;align-items:center!important}
#hatTabs{min-height:58px;width:100%;flex-wrap:nowrap}
#hatTabs button{flex:0 0 auto;min-width:0;writing-mode:horizontal-tb}
#hatDock{width:max-content;max-width:calc(100vw - 36px);flex-wrap:nowrap;bottom:61px;left:50%;right:auto}
#hatStudio .hat-tabs button{display:inline-flex;align-items:center}
@media(max-width:700px){#hatDock{bottom:51px;max-width:calc(100vw - 8px)}}
/* Repair legacy options panel relocated by V0.3.9 grouping: prevent brand/header overlap. */
#hat039Sections #hatInkOptions{position:static!important;top:auto!important;left:auto!important;max-width:100%;margin:6px 0;flex-wrap:wrap;background:#203b4b;border:1px solid #466879}

/* V0.6.8 quick pen metals + visual library */
.hat-pen-metal-quick{gap:6px;align-items:center;flex-wrap:wrap}
.hat-quick-label{font-size:12px;opacity:.78}
.hat-metal-btn{min-width:64px;padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#3a4657,#212833);color:#fff;font-weight:700}
.hat-metal-btn[data-penmetal="gold"]{background:linear-gradient(180deg,#d8bc66,#8e6a22);color:#1d1507}
.hat-metal-btn[data-penmetal="silver"]{background:linear-gradient(180deg,#ecf0f4,#98a6b3);color:#16202a}
.hat-metal-btn[data-penmetal="obsidian"]{background:linear-gradient(180deg,#3b4147,#0f1216);color:#f3f5f8}
.hat-metal-btn.active{box-shadow:0 0 0 2px rgba(122,199,255,.45),0 6px 16px rgba(0,0,0,.25)}
.hat-thumb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin:8px 0 12px}
.hat-thumb{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));text-align:left;color:#fff;min-height:112px}
.hat-thumb:hover{transform:translateY(-1px);border-color:rgba(122,199,255,.45);background:linear-gradient(180deg,rgba(122,199,255,.14),rgba(255,255,255,.04))}
.hat-thumb-preview{width:100%;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;background:linear-gradient(180deg,rgba(9,19,33,.75),rgba(9,19,33,.45));border:1px dashed rgba(255,255,255,.12);letter-spacing:.04em}
.hat-thumb-preview.circle,.hat-thumb-preview.dist{color:#8ec1ff}
.hat-thumb-preview.optics{color:#ffdc8f}
.hat-thumb-preview.electric{color:#9ef3c1}
.hat-thumb-preview.thermal{color:#ff9d86}
.hat-thumb-preview.nuclear{color:#dc9dff}
.hat-thumb-title{font-weight:700;line-height:1.2}
.hat-thumb-sub{font-size:12px;opacity:.82;line-height:1.35}
.hat-library-group{margin:10px 0 6px}
.hat-library-title{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#9fd4ff;margin:4px 0 6px}
@media (max-width:920px){.hat-pen-metal-quick{display:none}.hat-thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hat-thumb{min-height:100px}}