.colour-group-popover{position:fixed;width:min(720px,calc(100vw - 90px));max-height:min(750px,calc(100dvh - 24px));padding:0;display:flex;flex-direction:column;overflow:hidden;color:#172126}
.colour-group-popover .popover-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.colour-group-popover h2{margin:0;font:600 16px/1.4 Inter,sans-serif}
.colour-groups-form{display:flex;flex-direction:column;min-height:0;font:400 13px/1.45 Inter,sans-serif}
.colour-groups-scroll{padding:14px 16px;overflow:auto;overscroll-behavior:contain;min-height:0}
.colour-priority-hint{margin:0 0 12px;color:#66726b;font-size:12px}
#colourGroups{display:grid;gap:12px;margin-bottom:12px}
.colour-group{border:1px solid #dce4df;border-radius:8px;padding:12px;background:#fff;min-width:0}
.colour-group>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.colour-group-picker,.colour-priority{display:flex;align-items:center;gap:6px;min-width:0}
.colour-group-picker input[name=group_colour]{width:94px;min-width:0;height:32px;padding:5px 8px;font:400 13px Inter,sans-serif}
.colour-group-picker input[name=group_colour],.colour-match select,.colour-fallback select{border:1px solid #dce4df;border-radius:6px;background-color:#fff;color:#172126}
.colour-group-picker input[type=color]{width:32px;min-width:32px;height:32px;padding:3px;border:1px solid #dce4df;border-radius:6px;cursor:pointer}
.colour-circle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:6px;border:1px solid #dce4df;border-radius:50%;background:#fff;color:#55665c}
.colour-circle .lucide{width:15px;height:15px;flex:none}.colour-circle:disabled{opacity:.35;cursor:default}.colour-circle.danger{color:#b23742}
.colour-groups-form .colour-match{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:400;font-size:13px}
.colour-match select{width:auto;height:32px;padding:4px 27px 4px 8px;font:500 13px Inter,sans-serif}
.colour-conditions{display:grid;gap:8px}
.colour-condition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30px;gap:7px;align-items:center}
.colour-condition:has(input[hidden]){grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px}
.colour-condition input,.colour-condition select{width:100%;min-width:0;height:34px;padding:6px 8px;border:1px solid #dce4df;border-radius:6px;font:400 13px Inter,sans-serif;background-color:#fff}
.colour-condition select{padding-right:26px}.colour-condition input::placeholder{font-weight:400}
.colour-add-condition{display:flex;align-items:center;gap:5px;margin-top:10px;padding:5px 0;border:0;background:transparent;font:500 13px Inter,sans-serif;color:#315846}
.colour-add-condition .lucide,#addColourGroup .lucide{width:14px;height:14px;flex:none}.colour-add-condition:disabled{opacity:.4}
#addColourGroup{display:inline-flex;align-items:center;gap:6px;font:500 13px Inter,sans-serif}
.colour-groups-form .colour-fallback{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;align-items:center;border-top:1px solid #e7ece9;margin:16px 0 0;padding-top:14px;font:400 13px Inter,sans-serif}
.colour-fallback select{min-width:0;width:100%;height:34px;font:400 13px Inter,sans-serif}
.colour-groups-form>footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 16px;margin:0;background:#fff;flex:none}
.colour-rule-error{margin:0;padding:8px 16px;color:#a12d2d;font-size:13px}
@media(max-width:640px){.colour-group-popover{width:calc(100vw - 78px)}.colour-groups-scroll{padding:12px}.colour-group{padding:10px}.colour-condition,.colour-condition:has(input[hidden]){grid-template-columns:minmax(0,1fr) 30px}.colour-condition select{grid-column:1}.colour-condition input{grid-column:1}.colour-condition>.colour-circle{grid-column:2;grid-row:1}.colour-group-picker{gap:4px}.colour-group-picker input[name=group_colour]{width:80px}.colour-priority{gap:3px}.colour-group>header{flex-wrap:wrap}.colour-groups-form .colour-match{display:grid;gap:5px}.colour-match select{width:100%}.colour-groups-form .colour-fallback{grid-template-columns:1fr}}