/* Keep the Maker quiet; all detailed choices live in the color dialog. */
.tools .color-picker-trigger{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;margin:8px 0 4px;border:1px solid #9570a5;border-radius:15px;background:#382543;color:#fff1d6;text-align:left;min-height:58px}
.color-picker-fill{width:56px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff30;flex:none}
.color-picker-caption{flex:1;min-width:0}.color-picker-caption strong{display:block;font-size:12px}.color-picker-caption small{display:block;font-size:11px;color:#d9c5e2;line-height:1.5}
.color-picker-edit{font-size:11px;display:flex;gap:6px;align-items:center}.color-picker-edit svg{width:15px;height:15px}
#color-picker-dialog{padding:18px;width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:hidden;box-sizing:border-box;border:1px solid #a681b9;border-radius:24px;background:#382543;color:#fff1d6;box-shadow:0 20px 80px #160b29a0}
#color-picker-dialog[open]{display:flex;flex-direction:column;gap:8px}
#color-picker-dialog::backdrop{background:#170e29b3;backdrop-filter:blur(4px)}
#color-picker-dialog button,#color-picker-dialog input{font:inherit}
#color-picker-dialog button{cursor:pointer;touch-action:manipulation}
#color-picker-dialog :focus-visible{outline:3px solid #ffd380;outline-offset:3px}
#color-picker-dialog .picker-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none}
#color-picker-dialog h2{font:700 19px/1.4 Mali,sans-serif;margin:0}
#color-picker-dialog .picker-close{border:0;color:#eedcf5;background:transparent;width:44px;height:44px;border-radius:12px;font-size:26px}
#color-picker-dialog .picker-preview{height:64px;flex:none;display:grid;place-items:center;background:radial-gradient(ellipse,#8555a155,transparent 70%);font-size:11px}
#color-picker-dialog .picker-preview img{width:96px;height:96px;object-fit:contain;margin:-16px 0}
#color-picker-dialog .picker-scroll{overflow-y:auto;overscroll-behavior:contain;padding:4px;min-height:0;scrollbar-width:thin;scrollbar-color:#9675ab transparent}
#color-picker-dialog .picker-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#2d1f39;padding:4px;border-radius:13px;gap:4px}
#color-picker-dialog .picker-modes button{min-height:44px;padding:6px;line-height:1.3;border:1px solid transparent;border-radius:10px;background:transparent;color:#e4d2ed;font-size:13px}
#color-picker-dialog .picker-modes button[aria-pressed=true]{background:#71507f;border-color:#f5b65f;color:#fff1d6}
#color-picker-dialog .picker-section{margin-top:10px}
#color-picker-dialog h3{font:600 12px/1.4 Mali,sans-serif;margin:0 0 7px;color:#ffe1a9}
#color-picker-dialog .picker-game-colors,#color-picker-dialog .picker-presets,#color-picker-dialog .picker-palette{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
#color-picker-dialog .picker-game-colors{grid-template-columns:repeat(4,38px);gap:8px}
#color-picker-dialog .picker-presets{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
#color-picker-dialog .picker-swatch{min-height:44px;width:100%;border:2px solid transparent;border-radius:12px;background:transparent;position:relative;padding:3px;display:grid;place-items:center}
#color-picker-dialog .picker-swatch:before{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;background:var(--picker-color);box-shadow:inset 0 0 0 1px #ffffff28}
#color-picker-dialog .picker-swatch.selected:before{outline:2px solid #ffc476;outline-offset:3px}
#color-picker-dialog .picker-swatch span{position:relative;border-radius:50%;background:#30213db0;color:white;width:18px;height:18px;display:grid;place-items:center;font-size:12px}
#color-picker-dialog .picker-endpoints{display:grid;grid-template-columns:1fr 42px 1fr;gap:6px;border:1px solid #896397;background:#302139;border-radius:15px;padding:6px;margin-top:10px}
#color-picker-dialog .picker-endpoints button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid transparent;background:transparent;color:#fff1d6;border-radius:10px;font-size:12px;text-align:left;padding:5px}
#color-picker-dialog .picker-endpoints button[aria-pressed=true]{background:#5a3c69;border-color:#b798c8}
#color-picker-dialog .picker-endpoints button>span:first-child{width:29px;height:29px;border-radius:50%;flex:none;border:1px solid #ffffff30}
#color-picker-dialog .picker-endpoints small{display:block;color:#d8c5e2;font-size:10px;margin-top:2px}
#color-picker-dialog .picker-endpoints .picker-swap{font-size:25px;align-self:center;min-height:44px;background:#543862}
#color-picker-dialog .picker-custom{display:flex;align-items:center;gap:8px;margin-top:12px;padding:6px 10px 6px 6px;border:1px solid #896397;border-radius:15px;background:#2d1f39}
#color-picker-dialog .picker-custom:focus-within{border-color:#ffc476;box-shadow:0 0 0 2px #ffc47620}
#color-picker-dialog .picker-custom-pick{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px;border-radius:10px;font-size:12px;cursor:pointer}
#color-picker-dialog .picker-custom-pick:hover{background:#68477940}
#color-picker-dialog .picker-custom-dot{width:32px;height:32px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff40,0 2px 5px #160d2540}
#color-picker-dialog .picker-custom-pick svg{width:14px;height:14px;flex:none;color:#d8c5e2}
#color-picker-dialog .picker-custom-pick input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
#color-picker-dialog .picker-custom-pick:focus-within{outline:2px solid #ffd380;outline-offset:1px}
#color-picker-dialog #picker-hex{width:94px;min-width:0;min-height:40px;background:transparent;border:0;border-left:1px solid #79558c;border-radius:0;padding:8px 0 8px 12px;color:#fff1d6;font:500 12px/1.5 ui-monospace,monospace;box-sizing:border-box;text-transform:uppercase}
#color-picker-dialog .picker-tones{margin-top:12px;padding:4px 2px}
#color-picker-dialog .picker-tone+.picker-tone{margin-top:5px}
#color-picker-dialog .picker-tone label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#e7d7ee;gap:10px}
#color-picker-dialog .picker-tone output{font-variant-numeric:tabular-nums;color:#ffe1a9;font-size:11px}
#color-picker-dialog .picker-tone input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;accent-color:#ffb761}
#color-picker-dialog .picker-tone input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(to right,#ffb761 var(--tone-progress),#745484 var(--tone-progress))}
#color-picker-dialog .picker-tone input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-top:-6px;border:2px solid #ffe0a2;border-radius:50%;background:#ffb761;box-shadow:0 1px 4px #1b102e60}
#color-picker-dialog .picker-tone input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:#745484}
#color-picker-dialog .picker-tone input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:#ffb761}
#color-picker-dialog .picker-tone input[type=range]::-moz-range-thumb{width:13px;height:13px;border:2px solid #ffe0a2;border-radius:50%;background:#ffb761}
#color-picker-dialog #picker-hex[aria-invalid=true]{border-color:#ffb491}
#color-picker-dialog #picker-color-error{color:#ffd1b4;margin:4px 0 0;font-size:11px;line-height:1.4}
#color-picker-dialog .picker-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding-top:10px;border-top:1px solid #79558c;flex:none}
#color-picker-dialog .picker-actions .button{min-height:46px;margin:0;padding:10px;font-size:13px}
#color-picker-dialog .picker-actions .primary{background:#ffa84f;color:#352040;border:1px solid #ffc577}
#color-picker-dialog .picker-actions .secondary{background:transparent;color:#e3cee9;border:1px solid #88639b}
@media(max-width:520px){#color-picker-dialog{margin:auto auto 10px;max-height:calc(100dvh - 20px);padding:14px;border-radius:24px 24px 18px 18px}#color-picker-dialog .picker-preview{height:64px}#color-picker-dialog .picker-preview img{width:96px;height:96px}}
@media(max-width:370px){#color-picker-dialog .picker-palette{grid-template-columns:repeat(5,1fr)}#color-picker-dialog .picker-presets{grid-template-columns:repeat(4,1fr)}#color-picker-dialog .picker-endpoints{gap:2px}#color-picker-dialog .picker-endpoints button{gap:4px}}
@media(max-height:650px){#color-picker-dialog .picker-preview{height:48px}#color-picker-dialog .picker-preview img{width:80px;height:80px}}

