.personal-palette { margin-top:8px; min-width:0; }
.personal-palette-swatches { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.personal-palette button { cursor:pointer; }
.personal-swatch { display:inline-block; width:26px; height:26px; flex:none; border:1px solid #bdc3ca; border-radius:50%; background:var(--sample-color); padding:0; }
.personal-swatch:hover { outline:2px solid #FCC009; outline-offset:2px; }
.personal-palette-add { display:grid; place-items:center; width:28px; height:28px; background:transparent; border:1px solid transparent; border-radius:3px; padding:0; }
.personal-palette-add:hover:not(:disabled) { background:#FFF6CC; border-color:#E8B300; }
.personal-palette-edit { font:inherit; cursor:pointer; white-space:normal; }
.color-row { flex-wrap:wrap; min-width:0; gap:6px; }
.color-row > [data-personal-palette-actions]:empty { display:none; }
.color-row > [data-personal-palette-actions] { min-width:0; max-width:100%; }
.current-color-button { display:block; box-sizing:border-box; width:26px; height:26px; min-width:26px; flex:0 0 26px; padding:0; border:1px solid #89919c; border-radius:50%; background:var(--current-color); cursor:pointer; }
.current-color-button.transparent { background:conic-gradient(#d0d3d6 25%,#fff 0 50%,#d0d3d6 0 75%,#fff 0) 0 0/10px 10px; }
.current-color-button:focus-visible { outline:2px solid #B47800; outline-offset:2px; }
.current-color-button:disabled { opacity:.5; cursor:default; }
.personal-palette-status { margin:6px 0; color:#5b6470; font-size:12px; }
.personal-color-popover { position:fixed; inset:auto; margin:0; width:292px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto; z-index:10000; padding:16px; background:#fff; color:#242a31; border:1px solid #cfd5dc; border-radius:5px; box-shadow:0 3px 12px #0002; font:13px/1.45 Arial,sans-serif; }
.personal-color-popover::backdrop { background:transparent; pointer-events:none; }
.personal-color-popover header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.personal-color-popover header strong { font-size:15px; }
.personal-color-popover header button { display:grid; place-items:center; padding:4px; background:none; border:0; cursor:pointer; }
.personal-color-eye-status { color:#79818e; font-size:12px; margin:8px 0 12px; }
.personal-color-eye-status:empty { display:none; }
.personal-color-picker { display:grid; grid-template-columns:minmax(0,1fr) 18px; gap:14px; margin-top:14px; }
.color-picker-only > .personal-color-picker { margin-top:0; }
.personal-color-picker canvas { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:3px; cursor:crosshair; touch-action:none; border:1px solid #cfd5dc; }
.personal-hue { appearance:none; writing-mode:vertical-lr; direction:ltr; width:18px; height:100%; min-height:150px; margin:0; border:0; border-radius:3px; background:linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red); cursor:pointer; }
.personal-hue::-webkit-slider-thumb { appearance:none; width:24px; height:8px; border:2px solid #fff; border-radius:4px; background:transparent; box-shadow:0 0 1px 1px #0005; }
.personal-color-hex { display:flex; align-items:center; gap:12px; margin-top:14px; }
.personal-color-hex label { display:flex; align-items:center; gap:10px; min-width:0; }
.personal-color-hex input { width:125px; }
.personal-color-preview { width:30px; height:30px; border:1px solid #cfd5dc; box-shadow:inset 0 0 0 3px #fff; border-radius:3px; flex:none; }
.personal-color-popover input[type=text],.personal-color-popover input:not([type]) { box-sizing:border-box; height:32px; border:1px solid #cfd5dc; border-radius:3px; padding:6px 8px; font:inherit; }
.personal-color-name { display:block; margin-top:14px; }
.personal-color-name input { display:block; width:100%; margin-top:6px; }
.personal-color-popover [data-eyedropper] { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; padding:0; background:#fff; border:1px solid #cfd5dc; border-radius:3px; }
.personal-color-popover footer { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.personal-color-popover footer button { min-height:32px; padding:6px 12px; font:inherit; }
.personal-color-popover .primary-btn { background:#FCC009; color:#111; border:1px solid #e8b300; border-radius:3px; cursor:pointer; }
.personal-color-list { max-height:230px; overflow:auto; margin:12px 0; }
.personal-color-item { display:flex; align-items:center; gap:6px; padding:6px 0; }
.personal-color-item > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.personal-color-item button { border:0; background:none; font:inherit; font-size:11px; padding:3px; cursor:pointer; }
.personal-color-item [data-delete] { display:grid; place-items:center; }
.personal-color-error { color:#a32020; margin:8px 0; overflow-wrap:anywhere; }
.personal-color-error:empty { display:none; }
.personal-color-popover button:disabled,.personal-palette button:disabled { opacity:.5; cursor:default; }
.personal-palette button:focus-visible,.personal-color-popover button:focus-visible,.personal-color-popover input:focus-visible,.personal-color-popover canvas:focus-visible { outline:2px solid #B47800; outline-offset:2px; }