.hat-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:5px 0 14px}.hat-choice button{font:650 12px system-ui;cursor:pointer;border:1px solid #d5dfe5;border-radius:10px;padding:13px 8px;background:#fff;color:#46606f}.hat-choice button[aria-pressed=true]{background:#e5f9fd;border-color:#00a6cc;color:#08667c}.hat-add{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.hat-add button{font-size:12px;padding:11px 8px}.hat-elements{display:grid;gap:7px;margin:16px 0}.hat-elements button{display:flex;gap:10px;align-items:center;text-align:left;padding:11px 12px;border:1px solid #d5dfe5;border-radius:10px;background:#fff;color:#233b4b;font:650 12px system-ui;cursor:pointer}.hat-elements button[aria-pressed=true]{border-color:#00a6cc;background:#eafafe}.hat-elements i{width:22px;height:22px;border-radius:6px;border:1px solid #c8d7df;flex-shrink:0}.hat-elements small{margin-left:auto;color:#728893;font-weight:400}.hat-selected-name{font-size:13px;font-weight:750;margin:20px 0 3px}.hat-element-colors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.hat-element-colors label{border:1px solid #d5dfe5;padding:8px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;font-size:11px}.hat-element-colors input{width:34px;height:30px;border:0;padding:0;background:none}.hat-input-error{border-radius:9px;background:#fff1da;padding:12px;color:#865709;font:12px/1.6 system-ui}.hat-legend{display:flex;justify-content:space-between;gap:10px;margin:12px 0;font-size:11px;color:#6a8190;flex-wrap:wrap}.hat-legend span{display:flex;align-items:center;gap:7px}.hat-legend i{display:inline-block;width:18px;height:14px;border:1px solid #ba9d60;background:repeating-linear-gradient(135deg,#fff3dc,#fff3dc 3px,#ddc393 4px,#fff3dc 5px)}#hat-flat{touch-action:none;cursor:grab}#hat-flat:active{cursor:grabbing}#hat-flat[hidden],#hat-three[hidden]{display:none!important}.hat-choice button:focus-visible,.hat-elements button:focus-visible{outline:3px solid #00a6cc;outline-offset:2px}#hat-test{width:100%;margin-top:12px}#hat-selected[hidden],#hat-text-fields[hidden],#hat-bed-fields[hidden],#hat-design-layers-label[hidden]{display:none!important}@media(max-width:760px){.hat-legend{font-size:10px}.hat-add button{min-height:42px}}
.hat-element-colors:has(select){grid-template-columns:1fr}.hat-element-colors label:has(select){display:grid;grid-template-columns:1fr 34px 112px}.hat-element-colors select{margin:0!important;padding:7px!important;font-size:11px!important}
.hat-shapes-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;font-size:12px}.hat-shapes-heading small{font-size:10px;color:#738896}.hat-shape-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.hat-shape-picker button{display:grid;justify-items:center;gap:7px;border:1px solid #d5dfe5;border-radius:11px;padding:12px 4px;background:#f7fafc;color:#1d6278;cursor:pointer;font:600 10px system-ui}.hat-shape-picker svg{width:27px;height:27px}.hat-shape-picker button:hover{background:#e8faff;border-color:#00a6cc}.hat-shape-picker button:focus-visible{outline:3px solid #00a6cc;outline-offset:2px}.hat-shape-picker button:disabled{opacity:.5;cursor:wait}.hat-symbol-credit{font-size:9px;color:#78909d;line-height:1.7}.hat-element-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;border:1px solid #d5dfe5;border-radius:11px;background:#fff;overflow:hidden}.hat-element-row[data-selected=true]{border-color:#00a6cc;background:#eafafe}.hat-element-row .hat-element-select{border:0;border-radius:0;background:transparent;min-width:0;gap:8px}.hat-element-select>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hat-element-row .hat-element-remove{border:0;border-left:1px solid #e0e9ee;border-radius:0;justify-content:center;padding:9px;background:transparent;color:#7c929f}.hat-element-remove svg{width:20px;height:20px;flex:none}.hat-element-row .hat-element-remove:hover{background:#fff0f0;color:#b64b51}.hat-element-remove:focus-visible{outline:2px solid #00a6cc;outline-offset:-3px}
/* Keep the desktop preview in view while the settings use the page scroll.
   Bound the full column to the viewport; exports and help remain reachable in
   its own scroll area instead of being cut off below the screen. */
@media(min-width:761px){
 .partyhat-workspace>.sky-preview{position:sticky;top:18px;align-self:start;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-right:8px}
 .partyhat-workspace .sky-stage{height:max(100px,min(590px,calc(100dvh - 280px)))}
}
.hat-upload-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.hat-element-row{grid-template-columns:minmax(0,1fr) 44px}