/* The purchased shade belongs to one promotion; regular server rows keep their theme. */
.mon-page [data-mon-color]{--mon-selected-color:#FFC857;--mon-selected-rgb:255,200,87}
.mon-page [data-mon-color="red"]{--mon-selected-color:#FF746C;--mon-selected-rgb:255,116,108}
.mon-page [data-mon-color="green"]{--mon-selected-color:#79D98B;--mon-selected-rgb:121,217,139}
.mon-page [data-mon-color="blue"]{--mon-selected-color:#79B8FF;--mon-selected-rgb:121,184,255}
.mon-page [data-mon-color="cyan"]{--mon-selected-color:#63DCE6;--mon-selected-rgb:99,220,230}
.mon-page [data-mon-color="purple"]{--mon-selected-color:#B69CFF;--mon-selected-rgb:182,156,255}
.mon-page [data-mon-color="pink"]{--mon-selected-color:#F49AD0;--mon-selected-rgb:244,154,208}
.mon-page .mon-color-swatch{display:inline-block;flex:none;width:12px;height:12px;border:1px solid #ffffff40;border-radius:50%;background:var(--mon-selected-color,#FFC857);box-shadow:0 0 0 3px rgba(var(--mon-selected-rgb,255,200,87),.1);vertical-align:middle}
.mon-page .mon-color-chip[data-mon-color]{display:inline-flex;align-items:center;gap:7px;color:var(--mon-selected-color,#FFC857)}
.mon-page .mon-active-color[data-mon-color]{display:inline-flex;align-items:center;gap:7px;color:var(--mon-selected-color);border-color:rgba(var(--mon-selected-rgb),.35);background:rgba(var(--mon-selected-rgb),.07)}
.mon-page .mon-color-dot{background:var(--mon-selected-color,var(--mon-accent));box-shadow:0 0 0 3px rgba(var(--mon-selected-rgb,255,200,87),.1)}
.mon-page .mon-server-row--color[data-mon-color]{background:linear-gradient(90deg,rgba(var(--mon-selected-rgb),.05),transparent 65%),var(--mon-panel);box-shadow:inset 3px 0 var(--mon-selected-color)}
.mon-page .mon-server-row--color[data-mon-color]:hover{background:linear-gradient(90deg,rgba(var(--mon-selected-rgb),.08),transparent 75%),var(--mon-panel-soft)}
.mon-page .mon-server-row--color[data-mon-color] .mon-server-name h3 a,.mon-page .mon-top-card--color[data-mon-color] h3 a{color:var(--mon-selected-color)}
.mon-page .mon-top-card--color[data-mon-color]{border-color:rgba(var(--mon-selected-rgb),.5);box-shadow:inset 0 3px var(--mon-selected-color)}
.mon-page .mon-top-card--color[data-mon-color]:hover{border-color:var(--mon-selected-color)}
.mon-page .mon-color-picker{min-width:0;margin:0;padding:0;border:0}
.mon-page .mon-color-picker legend{float:none;width:100%;margin:0 0 10px;padding:0;color:var(--mon-text);font-size:12px;font-weight:650;line-height:1.5}
.mon-page .mon-color-picker legend>span{display:block;margin-top:2px;color:var(--mon-muted);font-size:10px;font-weight:400}
.mon-page .mon-color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:8px}
.mon-page .mon-color-option{position:relative;min-width:0;margin:0;cursor:pointer}
.mon-page .mon-color-option>input[type="radio"]{position:absolute;width:1px;height:1px;min-width:0;min-height:0;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.mon-page .mon-color-option-surface{display:flex;align-items:center;gap:9px;min-height:42px;width:100%;margin:0;padding:10px 11px;border:1px solid var(--mon-line);border-radius:7px;background:#14181d;color:var(--mon-text);font-size:11px;line-height:1.4;transition:border-color .15s,background .15s,box-shadow .15s}
.mon-page .mon-color-option-surface>.mon-color-swatch{width:13px;height:13px}
.mon-page .mon-color-check{flex:none;margin-left:auto;color:var(--mon-selected-color);opacity:0}
.mon-page .mon-color-option:hover .mon-color-option-surface{border-color:rgba(var(--mon-selected-rgb),.5)}
.mon-page .mon-color-option>input:checked+.mon-color-option-surface{border-color:var(--mon-selected-color);background:rgba(var(--mon-selected-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--mon-selected-rgb),.15)}
.mon-page .mon-color-option>input:checked+.mon-color-option-surface .mon-color-check{opacity:1}
.mon-page .mon-color-option>input:focus-visible+.mon-color-option-surface{outline:2px solid var(--mon-selected-color);outline-offset:3px}
.mon-page .mon-color-picker:disabled .mon-color-option{cursor:not-allowed}
.mon-page .mon-color-picker:disabled .mon-color-option-surface{opacity:.55}
@media(prefers-reduced-motion:reduce){.mon-page .mon-color-option-surface{transition:none}}