/* Orriden colour selection, identical in every feature and theme. */
.orriden-colour-control { display:flex; align-items:stretch; gap:8px; width:100%; min-width:0; }
.orriden-colour-button { display:grid; place-items:center; flex:0 0 46px; width:46px; min-height:40px; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--soft); cursor:pointer; }
.orriden-colour-button>span { display:block; width:100%; height:26px; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:4px; background:var(--orriden-picked); }
body .orriden-colour-control>.orriden-colour-hex { width:100%; min-width:0; max-width:none; min-height:40px; height:40px; padding:9px 12px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:8px; font:12px ui-monospace,monospace; }
.orriden-colour-panel { position:fixed; z-index:10000; width:292px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 16px 60px #00000030; font-family:inherit; font-size:12px; line-height:1.4; }
.orriden-colour-panel>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.orriden-colour-panel strong { font-weight:600; }
.ocp-close { width:28px; height:28px; color:var(--muted); font-size:22px; background:transparent; border:0; cursor:pointer; }
.ocp-plane { position:relative; width:100%; height:150px; overflow:hidden; border-radius:8px; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--ocp-hue) 100% 50%); touch-action:none; cursor:crosshair; outline-offset:3px; }
.ocp-thumb { position:absolute; width:12px; height:12px; border:2px solid white; box-shadow:0 0 0 1px #00000080; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.orriden-colour-panel label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-family:inherit; font-size:11px; line-height:1.4; }
.ocp-hue-label { margin:12px 0; }
.orriden-colour-panel input[type=range] { appearance:none; width:100%; height:12px; border-radius:8px; background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red); cursor:pointer; }
.orriden-colour-panel input[type=range]::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border:2px solid white; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0008; }
.orriden-colour-panel input[type=range]::-moz-range-thumb { width:12px; height:12px; border:2px solid white; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0008; }
.ocp-values { display:flex; align-items:end; gap:10px; margin-bottom:12px; }
.ocp-values>label { flex:1; }
.ocp-selected { width:38px; height:38px; border:1px solid var(--line); border-radius:7px; }
.ocp-rgb { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.orriden-colour-panel input:not([type=range]) { width:100%; min-width:0; padding:9px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:7px; font:12px ui-monospace,monospace; }
.ocp-swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:14px 0; }
.ocp-swatches button { height:26px; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:5px; cursor:pointer; }
.ocp-apply { width:100%; min-height:36px; padding:8px 12px; color:var(--button-text,#fff); background:var(--button,var(--green)); border:0; border-radius:8px; font:600 12px Arial,Helvetica,sans-serif; cursor:pointer; }
.appearance-layout .field { min-width:0; }
@media(max-width:700px){.appearance-layout{grid-template-columns:minmax(0,1fr);}}

@media(min-width:701px) and (max-width:1100px){.appearance-layout{grid-template-columns:repeat(2,minmax(0,1fr));}}