/* V0.3.9 organized UI */
:root{--hat-accent:#5acfe9}
#toolbar{width:72px;min-width:72px;overflow-y:auto;scrollbar-width:thin;padding:7px 4px}
#hat039ToolGroups{display:flex;flex-direction:column;gap:10px;width:100%}
.hat039ToolGroup{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px 9px;border:1px solid #ffffff22;border-radius:12px;background:#0a223644}
.hat039ToolCaption{font-size:10px;color:#a9d5e5;text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.hat039ToolGroup button{width:48px;min-height:40px;margin:0;font-size:20px;border-radius:9px}
#hat039Find{width:100%;margin:8px 0;padding:11px;border-radius:9px;border:1px solid #5884a0;background:#112b42;color:#fff;box-sizing:border-box}
#hat039Sections{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.hat039Group{border:1px solid #4b7087;border-radius:12px;padding:0 9px 9px;background:#10283a;overflow:hidden}
.hat039Group>summary{cursor:pointer;list-style:none;padding:12px 4px;font-weight:700;color:#d8f5ff;font-size:13px;user-select:none}
.hat039Group>summary:before{content:'▸';color:#66c8e4;margin-right:8px}.hat039Group[open]>summary:before{content:'▾'}
.hat039Group>section{max-width:100%;box-sizing:border-box}
.hat039Quick{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:9px 0}.hat039Quick button{font-size:11px;white-space:normal;min-height:35px}
#hat039Helper{font-size:12px;color:#bee4f0;border-left:3px solid #5acfe9;padding:7px 9px;background:#16394a;border-radius:5px;margin:8px 0}
.hat039Credit{font-size:11px;text-align:center;opacity:.7;margin:16px 0 4px}
@media(max-width:650px){#toolbar{width:58px;min-width:58px} .hat039ToolGroup button{width:42px;min-height:38px} .hat039ToolCaption{font-size:9px}}