.color-picker-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.color-picker-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.color-picker-stage{padding:12px;min-height:220px;overflow:visible}
.color-picker-wrap{position:relative;display:inline-block;line-height:0}
.color-picker-view{display:block;max-width:100%;max-height:65vh;width:auto;height:auto;cursor:crosshair;touch-action:none;outline:none}
.color-picker-view:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.color-picker-loupe{position:absolute;left:0;top:0;pointer-events:none;display:none;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.3);overflow:hidden;z-index:3;line-height:1.2;border:2px solid #fff}
.color-picker-loupe.on{display:flex}
.color-picker-loupe canvas{display:block;width:121px;height:121px;image-rendering:pixelated}
.color-picker-loupe span{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;padding:5px 0}
.color-picker-cap{font-size:13px;margin:8px 0 0;text-align:center}
.color-picker-side{display:flex;flex-direction:column;gap:14px}
.color-picker-lbl{font-weight:700;font-size:14px}
.color-picker-pick{display:flex;gap:14px;align-items:stretch;border:1px solid var(--line);border-radius:14px;padding:12px}
.color-picker-sw{width:84px;min-height:84px;border-radius:10px;flex:none;border:1px solid var(--line);background:repeating-conic-gradient(#e9ecf2 0 25%,#fff 0 50%) 0 0/12px 12px}
.color-picker-rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.color-picker-rows p{margin:0;font-size:14px}
.color-picker-row{display:flex;align-items:center;gap:8px}
.color-picker-row b{font-size:12px;color:var(--mut);width:34px;flex:none}
.color-picker-row code{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere}
.color-picker-row .iconbtn{width:32px;height:32px;flex:none}
.color-picker-hhead{gap:8px}
.color-picker-hist{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;align-items:center}
.color-picker-chip{width:34px;height:34px;border-radius:8px;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;background:repeating-conic-gradient(#e9ecf2 0 25%,#fff 0 50%) 0 0/10px 10px}
.color-picker-chip:hover{transform:scale(1.08)}
.color-picker-palblock{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.color-picker-palblock h3{margin:0;font-size:17px}
.color-picker-palblock .hint{display:block;font-size:13px;color:var(--mut);margin:4px 0 12px}
.color-picker-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.color-picker-tile{position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 0 8px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;overflow:hidden;text-align:left}
.color-picker-tile:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.color-picker-tsw{display:block;width:100%;height:58px;margin-bottom:6px}
.color-picker-tile b{font:700 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:0 10px}
.color-picker-tile small{color:var(--mut);padding:0 10px;font-size:12px}
.color-picker-tcopy{position:absolute;right:8px;bottom:8px;color:var(--mut)}
.color-picker-tcopy svg{width:15px;height:15px}
@media(max-width:860px){.color-picker-grid{grid-template-columns:1fr}.color-picker-view{max-height:55vh}.color-picker-pal{grid-template-columns:repeat(2,1fr)}}
.color-picker-side>.opt{flex:none}
.color-picker-grid>*{min-width:0}
.color-picker-hhead .lbl{font-weight:700;font-size:14px}