.colour-picker-source[hidden]{display:none!important}
.colour-picker-trigger{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-width:68px;min-height:44px;padding:6px 9px;border:1px solid var(--theme-border);border-radius:9px;background:var(--surface);color:var(--theme-text);cursor:pointer}
.colour-picker-chip{flex:1;min-width:26px;height:28px;border-radius:5px;background:var(--swatch);box-shadow:inset 0 0 0 1px #80808055}
.colour-picker-trigger svg{width:16px;height:16px;flex:none}
.colour-picker-trigger:hover{border-color:var(--theme-info)}
.colour-picker-trigger:focus-visible,.colour-picker-dialog :focus-visible{outline:2px solid var(--theme-info);outline-offset:3px}
.colour-picker-trigger:disabled{opacity:.5;cursor:not-allowed}
.avatar-colour-control .colour-picker-trigger{width:100%}
.colour-picker-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:380px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--theme-border);border-radius:18px;background:var(--surface);color:var(--theme-text);box-shadow:0 24px 80px #07142640;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:calc(13px * var(--text-scale,1))}
.colour-picker-dialog::backdrop{background:#07142660}
.colour-picker-form{display:grid;gap:16px;min-width:0;margin:0}
.colour-picker-kicker{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--theme-muted)}
.colour-picker-heading h2{margin:6px 0 0;font-size:calc(21px * var(--text-scale,1));line-height:1.3;letter-spacing:-.4px;overflow-wrap:anywhere}
.colour-picker-heading h2:focus{outline:none}
.colour-picker-plane{position:relative;height:160px;border-radius:10px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--picker-hue) 100% 50%);touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px #80808044}
.colour-picker-cursor{position:absolute;left:var(--picker-x);top:var(--picker-y);width:16px;height:16px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #10213d80,0 1px 5px #0006;transform:translate(-50%,-50%);pointer-events:none}
.colour-picker-range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;min-width:0;color:var(--theme-text);font-weight:600;line-height:1.4}
.colour-picker-range>span{grid-column:1;grid-row:1}
.colour-picker-range>output{grid-column:2;grid-row:1;color:var(--theme-muted);font-size:.85em;font-variant-numeric:tabular-nums;font-weight:400}
.colour-picker-range input[type=range]{grid-column:1/-1;grid-row:2;appearance:none;box-sizing:border-box;display:block;width:100%;height:28px;min-height:28px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;box-shadow:none}
.colour-picker-range input::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:var(--surface-muted);border:1px solid var(--theme-border)}
.colour-picker-range input::-moz-range-track{height:8px;border-radius:5px;background:var(--surface-muted);border:1px solid var(--theme-border)}
.colour-picker-range .colour-picker-hue::-webkit-slider-runnable-track{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.colour-picker-range .colour-picker-hue::-moz-range-track{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.colour-picker-range input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-6px;border:2px solid var(--surface);border-radius:50%;background:var(--theme-text);box-shadow:0 0 0 1px var(--theme-border)}
.colour-picker-range input::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--surface);border-radius:50%;background:var(--theme-text);box-shadow:0 0 0 1px var(--theme-border)}
.colour-picker-tones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10em),1fr));gap:12px 18px}
.colour-picker-value{display:flex;align-items:end;gap:14px;min-width:0}
.colour-picker-preview{display:flex;width:72px;height:44px;flex:none;overflow:hidden;border:1px solid var(--theme-border);border-radius:9px}
.colour-picker-preview>span{flex:1}
.colour-picker-value>label{display:grid;gap:6px;flex:1;min-width:0;font-weight:600}
.colour-picker-dialog .colour-picker-hex{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid var(--theme-border);border-radius:8px;background:var(--surface-muted);color:var(--theme-text);font:inherit;font-weight:500;letter-spacing:.5px}
.colour-picker-dialog .colour-picker-hex[aria-invalid=true]{border-color:var(--theme-danger)}
.colour-picker-dialog .colour-picker-error{margin:-6px 0 0;color:var(--theme-danger);font-size:.92em;line-height:1.5}
.colour-picker-error[hidden]{display:none}
.colour-picker-presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.colour-picker-presets button{position:relative;display:grid;place-items:center;width:100%;height:40px;padding:5px;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer}
.colour-picker-presets button::before{content:"";width:100%;aspect-ratio:1;max-width:28px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #80808055}
.colour-picker-presets button:hover{background:var(--surface-muted)}
.colour-picker-presets button[aria-pressed=true]{border-color:var(--theme-info);background:var(--surface-muted)}
.colour-picker-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding-top:16px;border-top:1px solid var(--theme-border)}
.colour-picker-actions .button{min-height:44px;font-size:inherit}
.colour-picker-actions .button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:360px){.colour-picker-dialog{padding:18px}.colour-picker-presets{grid-template-columns:repeat(4,minmax(0,1fr))}.colour-picker-presets button{height:44px}}
@media(max-height:600px){.colour-picker-plane{height:110px}.colour-picker-form{gap:12px}}
@media(prefers-reduced-motion:no-preference){.colour-picker-dialog[open]{animation:colour-picker-enter 140ms ease-out}.colour-picker-trigger{transition:border-color 140ms ease-out}@keyframes colour-picker-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}