body[data-reference-editor] .element-library,body[data-reference-editor] .element-controls{padding:0 0 16px;color:#eee;}
body[data-reference-editor] .element-sections{display:flex;gap:4px;padding:0 0 10px;position:sticky;top:0;background:#151517;z-index:1;}
body[data-reference-editor] .element-sections button{flex:1;min-height:44px;border:0;border-radius:9px;background:none;color:#96969b;font:500 12px/1 -apple-system,BlinkMacSystemFont,sans-serif;}
body[data-reference-editor] .element-sections button[aria-selected=true]{background:#303032;color:#f6f6f6;}
body[data-reference-editor] .element-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
body[data-reference-editor] .element-tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid #343438;border-radius:8px;background:#38383a;color:#eee;padding:12px;min-width:44px;min-height:44px;}
body[data-reference-editor] .element-tile img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
body[data-reference-editor] .element-tile svg{width:38px;height:38px;pointer-events:none;}
body[data-reference-editor] .element-tile:active{background:#515156;}
body[data-reference-editor] .element-heading{display:flex;justify-content:space-between;align-items:center;height:44px;}
body[data-reference-editor] .element-heading button{display:flex;align-items:center;gap:5px;min-height:44px;min-width:44px;background:none;border:0;color:#bcbcc2;font:12px -apple-system,BlinkMacSystemFont,sans-serif;}
body[data-reference-editor] .element-heading svg{width:19px;height:19px;}
body[data-reference-editor] .element-delete{justify-content:center;}
body[data-reference-editor] .element-controls .ref-straighten{padding:0;margin:0;}
body[data-reference-editor] .element-colors{display:flex;align-items:center;justify-content:flex-start;gap:0;overflow-x:auto;scrollbar-width:none;}
body[data-reference-editor] .element-colors button,body[data-reference-editor] .element-custom{position:relative;display:grid;place-items:center;width:44px;min-width:44px;flex:0 0 44px;min-height:44px;border:0;background:none;border-radius:5px;color:#ddd;}
body[data-reference-editor] .element-colors button::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--element-color);border:1px solid #777;}
body[data-reference-editor] .element-colors button[aria-pressed=true]::before{outline:2px solid #eee;outline-offset:3px;}
body[data-reference-editor] .element-custom{font:24px -apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden;}
body[data-reference-editor] .element-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:.001;cursor:pointer;}
body[data-reference-editor] .element-opacity{display:block;color:#99999e;font:11px -apple-system,BlinkMacSystemFont,sans-serif;}
body[data-reference-editor] .element-opacity>span{display:flex;justify-content:space-between;align-items:center;height:22px;}
body[data-reference-editor] .element-opacity output{color:#ddd;font-variant-numeric:tabular-nums;}
body[data-reference-editor] .element-opacity input{width:100%;height:44px;margin:0;accent-color:#dedee2;touch-action:pan-y;}

body[data-reference-editor] .element-custom[data-selected=true]::before{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--custom-color);outline:2px solid #eee;outline-offset:2px;}
body[data-reference-editor] .element-custom[data-selected=true] span{visibility:hidden;}

/* The grid owns its cells; intrinsic PNG dimensions cannot enlarge or overlap rows. */
body[data-reference-editor] .element-library{isolation:isolate;min-width:0;contain:layout;}
body[data-reference-editor] .element-sections{z-index:3;flex-shrink:0;background:#141414;}
body[data-reference-editor] .element-grid{position:relative;align-items:start;grid-auto-flow:row;}
body[data-reference-editor] .element-tile{position:relative;width:100%;height:auto;box-sizing:border-box;overflow:hidden;contain:layout paint;}
body[data-reference-editor] .element-tile img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:100%;max-height:100%;}
body[data-reference-editor] .element-library :is(.element-grid,.element-sections){touch-action:pan-y;}

/* V5: tabs have their own fixed row; only the clipped card viewport scrolls. */
body[data-reference-editor] #sheetBody:has(>.element-library){overflow:hidden;}
body[data-reference-editor] .element-library{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding-bottom:0;overflow:hidden;}
body[data-reference-editor] .element-library .element-sections{position:relative;top:auto;flex:0 0 auto;z-index:1;}
body[data-reference-editor] .element-scroll{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;contain:paint;-webkit-overflow-scrolling:touch;}
body[data-reference-editor] .element-grid{padding-bottom:16px;}
/* Thumbnail-only treatment. Original PNGs and the design renderer are untouched. */
body[data-reference-editor] .element-library .element-tile img{filter:brightness(0) invert(1);}

body[data-reference-editor] .text-style-back{height:36px;padding:0 4px;border:0;background:none;color:#bcbcc2;font:13px -apple-system,BlinkMacSystemFont,sans-serif;}
body[data-reference-editor] .simple-text-style .ref-crop-wheel-tabs{display:flex;}
body[data-reference-editor] .simple-text-style .ref-crop-wheel-tabs button{flex:1;min-width:44px;}
body[data-reference-editor] .simple-text-controls .final-wheel{margin:0;padding:0;}
