/* FlatcastX V5: Shared advanced colour picker, independent from V4 chat palette. */
.fx-adv-v5[hidden]{display:none!important}
.fx-adv-v5{position:fixed;z-index:2147483600;width:446px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:12px;border:1px solid #8293a5;border-radius:11px;background:#f2f3f5;color:#242931;box-shadow:0 18px 54px rgba(0,0,0,.65);font:12px/1.3 Arial,Helvetica,sans-serif;text-shadow:none;direction:ltr}
.fx-adv-v5 *{box-sizing:border-box}
.fx-adv-v5-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.fx-adv-v5-title{font:700 14px Arial,Helvetica,sans-serif;color:#26292d;white-space:nowrap}
.fx-adv-v5-head-actions{display:flex;gap:8px;align-items:center}
.fx-adv-v5 button{cursor:pointer;font-family:inherit}
.fx-adv-v5-exit{width:28px;height:28px;padding:0;border:0;border-radius:6px;background:#dedfe3;color:#26272a;font-size:21px;line-height:26px}
.fx-adv-v5-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:12px}
.fx-adv-v5-presets,.fx-adv-v5-custom{min-width:0}
.fx-adv-v5-label{color:#444e58;font-size:11px;font-weight:700;margin-bottom:6px}
.fx-adv-v5-swatches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}
.fx-adv-v5-swatch{width:100%;min-width:0;height:18px;padding:0!important;margin:0!important;border-radius:2px;border:1px solid rgba(0,0,0,.2)!important;box-shadow:none!important;background:var(--fx-v5-color)!important;background-image:none!important;transition:transform .1s}
.fx-adv-v5-swatch:hover{filter:none!important;transform:none!important}
.fx-adv-v5-swatch.chosen{outline:2px solid #151515;outline-offset:-2px;box-shadow:0 0 0 1px #fff!important}
.fx-adv-v5 button:focus-visible,.fx-adv-v5 [role=slider]:focus-visible{outline:2px solid #077cc7;outline-offset:2px}
.fx-adv-v5-gradient{display:flex;gap:7px;height:154px}
.fx-adv-v5-sv{position:relative;flex:1;min-width:0;height:100%;border:1px solid #8b8b8b;cursor:crosshair;touch-action:none}
.fx-adv-v5-sv-point{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:11px;height:11px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 2px 1px #333;pointer-events:none}
.fx-adv-v5-hue{position:relative;flex:0 0 17px;height:100%;border:1px solid #888;cursor:ns-resize;touch-action:none;background:linear-gradient(to bottom,#f00 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,#f00 100%)}
.fx-adv-v5-hue-point{position:absolute;left:-3px;right:-3px;top:0;height:5px;transform:translateY(-50%);border:1px solid #111;box-shadow:inset 0 0 0 1px white;pointer-events:none}
.fx-adv-v5-hex{display:flex;align-items:center;gap:6px;margin-top:9px;color:#464d55;font-size:11px;font-weight:bold}
.fx-adv-v5-selected-code{flex:0 0 auto;min-width:77px;color:#31363d;font:700 11px Consolas,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx-adv-v5-hex input{min-width:0;width:100%;flex:1;height:30px!important;border:1px solid #aaa!important;border-radius:4px!important;background:#fff!important;color:#222!important;padding:4px 7px!important;font:12px Consolas,monospace!important;box-shadow:none!important}
.fx-adv-v5-hex input.fx-adv-v5-invalid{border-color:#e53a3a!important;outline-color:#e53a3a!important}
.fx-adv-v5-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid #d2d4d6}
.fx-adv-v5-actions button{min-height:31px;border-radius:5px;border:1px solid #aaa;padding:5px 12px;font-size:12px;font-weight:700}
.fx-adv-v5-cancel{background:#e1e2e5;color:#333}
.fx-adv-v5-apply{background:#1174b7;color:#fff;border-color:#11669b!important}
.fx-adv-v5-apply:disabled{opacity:.5;cursor:not-allowed}
/* The profile edit swatches remain in DOM to preserve the existing AJAX colour saving code,
   but the legacy picker is no longer displayed; V5 now provides the visible palette. */
html.fx-adv-v5-ready #profile-edit-modal #edit-color-palette{display:none!important}
html.fx-adv-v5-ready #register-modal #reg-color-palette{display:none!important}
#profile-edit-modal input#edit_color{cursor:pointer!important;min-height:34px}
#register-modal #reg_color{cursor:pointer}
@media(max-width:420px){.fx-adv-v5{padding:9px}.fx-adv-v5-layout{gap:7px}.fx-adv-v5-swatches{gap:1px}.fx-adv-v5-swatch{height:16px}.fx-adv-v5-gradient{height:138px;gap:4px}}
@media(prefers-reduced-motion:reduce){.fx-adv-v5-swatch{transition:none}}