/* Light surfaces and dark surfaces share each group’s hues. Text-only labels keep their readable ink colors. */
.group-color{--group-color-light:#276749;--group-color-dark:#204b37;--group-color-second-light:#285fa0;--group-color-second-dark:#203e62;--group-color-light-bg:#e1f0e6;--group-color-second-light-bg:#e1ecfa;--group-color-bg:var(--group-color-light-bg);--group-color-end:var(--group-color-second-light-bg);--group-color-text:#23352e;--group-gradient:linear-gradient(115deg,var(--group-color-bg),var(--group-color-end))}
.group-color[data-group-color=green]{--group-color-light:#276749;--group-color-dark:#204b37;--group-color-light-bg:#e1f0e6}
.group-color[data-group-color-second=green]{--group-color-second-light:#276749;--group-color-second-dark:#204b37;--group-color-second-light-bg:#e1f0e6}
.group-color[data-group-color=blue]{--group-color-light:#285fa0;--group-color-dark:#203e62;--group-color-light-bg:#e1ecfa}
.group-color[data-group-color-second=blue]{--group-color-second-light:#285fa0;--group-color-second-dark:#203e62;--group-color-second-light-bg:#e1ecfa}
.group-color[data-group-color=teal]{--group-color-light:#08797e;--group-color-dark:#17464a;--group-color-light-bg:#d8eeee}
.group-color[data-group-color-second=teal]{--group-color-second-light:#08797e;--group-color-second-dark:#17464a;--group-color-second-light-bg:#d8eeee}
.group-color[data-group-color=amber]{--group-color-light:#965911;--group-color-dark:#513b1e;--group-color-light-bg:#f8ebd4}
.group-color[data-group-color-second=amber]{--group-color-second-light:#965911;--group-color-second-dark:#513b1e;--group-color-second-light-bg:#f8ebd4}
.group-color[data-group-color=rose]{--group-color-light:#a73a60;--group-color-dark:#562c40;--group-color-light-bg:#f5dfe8}
.group-color[data-group-color-second=rose]{--group-color-second-light:#a73a60;--group-color-second-dark:#562c40;--group-color-second-light-bg:#f5dfe8}
.group-color[data-group-color=slate]{--group-color-light:#526174;--group-color-dark:#323e50;--group-color-light-bg:#e5eaf1}
.group-color[data-group-color-second=slate]{--group-color-second-light:#526174;--group-color-second-dark:#323e50;--group-color-second-light-bg:#e5eaf1}
.group-color[data-group-color=violet]{--group-color-light:#75459a;--group-color-dark:#412d55;--group-color-light-bg:#eee2f6}
.group-color[data-group-color-second=violet]{--group-color-second-light:#75459a;--group-color-second-dark:#412d55;--group-color-second-light-bg:#eee2f6}
.group-color[data-group-color=indigo]{--group-color-light:#4c4b9c;--group-color-dark:#302f59;--group-color-light-bg:#e5e4f7}
.group-color[data-group-color-second=indigo]{--group-color-second-light:#4c4b9c;--group-color-second-dark:#302f59;--group-color-second-light-bg:#e5e4f7}
.group-color[data-group-color=orange]{--group-color-light:#a3481b;--group-color-dark:#54311f;--group-color-light-bg:#f8e4d7}
.group-color[data-group-color-second=orange]{--group-color-second-light:#a3481b;--group-color-second-dark:#54311f;--group-color-second-light-bg:#f8e4d7}
.group-color[data-group-color=cyan]{--group-color-light:#126d91;--group-color-dark:#1d4355;--group-color-light-bg:#dceef6}
.group-color[data-group-color-second=cyan]{--group-color-second-light:#126d91;--group-color-second-dark:#1d4355;--group-color-second-light-bg:#dceef6}
html[data-theme=dark] .group-color{--group-color-bg:var(--group-color-dark);--group-color-end:var(--group-color-second-dark);--group-color-text:#f4f7f5}
#group-title.group-title-color{display:inline-block;max-width:100%;padding:.2em .45em;border-radius:.24em;background:var(--group-gradient);color:var(--group-color-text);overflow-wrap:anywhere}
.portal-page #attendance-grid .group-row th.group-color{background:var(--group-gradient);color:var(--group-color-text);border-color:var(--group-color-bg)}
.group-option-label{display:inline-block;color:var(--group-color-light);font-weight:400;overflow-wrap:anywhere}
.group-option-label strong{font-weight:700}.group-option-label em{font-style:italic}
@supports ((background-clip:text) or (-webkit-background-clip:text)){.group-option-label{background-image:linear-gradient(115deg,var(--group-color-light),var(--group-color-second-light));background-clip:text;-webkit-background-clip:text;color:transparent}}
.group-color-picker,.group-photo-picker{min-width:0;margin:0;padding:12px;border:1px solid var(--line);border-radius:9px}
.group-color-picker legend,.group-photo-picker legend{padding:0 5px;font-size:14px;font-weight:650}
.group-color-picker .account-help,.group-photo-picker .account-help{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.6}
.group-gradient-selects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.group-gradient-selects label{min-width:0}.group-gradient-selects select{width:100%;min-width:0;min-height:44px}
.group-gradient-preview{margin-top:12px;padding:18px 12px;border-radius:8px;text-align:center;font-weight:650;background:var(--group-gradient);color:var(--group-color-text)}
.group-photo-preview{display:block;max-width:100%;max-height:140px;width:auto;border-radius:8px;margin:4px 0 12px;object-fit:contain}.group-photo-preview[hidden],.group-photo-remove[hidden]{display:none}
.group-photo-picker label.group-photo-remove{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:10px}.group-photo-picker input[type=checkbox]{width:18px;min-width:18px;min-height:18px;height:18px;margin:0}.group-photo-picker input[type=file]{max-width:100%;min-width:0;width:100%}