:root {
  --accent-blue: #3478f6;
  --accent-emerald: #20a66a;
  --accent-amber: #e39a24;
  --accent-violet: #8d63d9;
  --accent-cyan: #18a8bd;
  --accent-red: #dc554f;
  --accent-pink: #ce5f9d;
}

/* A repeating operational palette gives every dashboard clear visual landmarks. */
.stats article:nth-child(6n + 1) { --card-accent: var(--accent-blue); }
.stats article:nth-child(6n + 2) { --card-accent: var(--accent-emerald); }
.stats article:nth-child(6n + 3) { --card-accent: var(--accent-amber); }
.stats article:nth-child(6n + 4) { --card-accent: var(--accent-violet); }
.stats article:nth-child(6n + 5) { --card-accent: var(--accent-cyan); }
.stats article:nth-child(6n + 6) { --card-accent: var(--accent-red); }
.stats article::after { background: var(--card-accent, var(--gold)) !important; height: 4px; }
.stats article small { color: var(--card-accent, var(--gold-text)); font-weight: 760; }
.stats article strong { color: var(--text); }

.role-tool-grid > :nth-child(7n + 1),
.workspace-grid > :nth-child(7n + 1),
.role-preview-grid > :nth-child(7n + 1) { --tile-accent: var(--accent-blue); }
.role-tool-grid > :nth-child(7n + 2),
.workspace-grid > :nth-child(7n + 2),
.role-preview-grid > :nth-child(7n + 2) { --tile-accent: var(--accent-emerald); }
.role-tool-grid > :nth-child(7n + 3),
.workspace-grid > :nth-child(7n + 3),
.role-preview-grid > :nth-child(7n + 3) { --tile-accent: var(--accent-amber); }
.role-tool-grid > :nth-child(7n + 4),
.workspace-grid > :nth-child(7n + 4),
.role-preview-grid > :nth-child(7n + 4) { --tile-accent: var(--accent-violet); }
.role-tool-grid > :nth-child(7n + 5),
.workspace-grid > :nth-child(7n + 5),
.role-preview-grid > :nth-child(7n + 5) { --tile-accent: var(--accent-cyan); }
.role-tool-grid > :nth-child(7n + 6),
.workspace-grid > :nth-child(7n + 6),
.role-preview-grid > :nth-child(7n + 6) { --tile-accent: var(--accent-red); }
.role-tool-grid > :nth-child(7n),
.workspace-grid > :nth-child(7n),
.role-preview-grid > :nth-child(7n) { --tile-accent: var(--accent-pink); }

.role-tool-grid a,
.workspace-grid button,
.role-preview-grid button {
  border-left: 4px solid var(--tile-accent, var(--gold)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile-accent, var(--gold)) 10%, var(--surface)), var(--surface)) !important;
}
.role-tool-grid a > span,
.workspace-grid button > span,
.role-preview-grid button > i { color: var(--tile-accent, var(--gold-text)) !important; }

.panel:nth-of-type(6n + 1) { --panel-accent: var(--accent-blue); }
.panel:nth-of-type(6n + 2) { --panel-accent: var(--accent-emerald); }
.panel:nth-of-type(6n + 3) { --panel-accent: var(--accent-amber); }
.panel:nth-of-type(6n + 4) { --panel-accent: var(--accent-violet); }
.panel:nth-of-type(6n + 5) { --panel-accent: var(--accent-cyan); }
.panel:nth-of-type(6n + 6) { --panel-accent: var(--accent-red); }
.panel-head { position: relative; }
.panel-head::before {
  background: var(--panel-accent, var(--gold));
  border-radius: 0 3px 3px 0;
  bottom: 16px;
  content: "";
  left: 0;
  position: absolute;
  top: 16px;
  width: 4px;
}

.role-symbol { background: linear-gradient(145deg, var(--accent-violet), var(--accent-blue)); color: #fff; }
.role-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 9%, var(--surface-strong)), color-mix(in srgb, var(--accent-violet) 7%, var(--surface))) !important; }
.admin-launchpad { border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--line)) !important; }

.badge.gate, .ok { color: var(--accent-emerald) !important; }
.badge.hold, .fail { color: var(--accent-red) !important; }
.badge.check { color: var(--accent-amber) !important; }
.alert { border-left-color: var(--accent-amber) !important; }
.alert > span { background: var(--accent-amber) !important; color: #17130a !important; }
.event:nth-child(4n + 1) i { background: var(--accent-blue); }
.event:nth-child(4n + 2) i { background: var(--accent-emerald); }
.event:nth-child(4n + 3) i { background: var(--accent-amber); }
.event:nth-child(4n + 4) i { background: var(--accent-violet); }
.bar i { background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)) !important; }

html[data-theme="dark"] {
  --accent-blue: #66a2ff;
  --accent-emerald: #45c88a;
  --accent-amber: #f1b34b;
  --accent-violet: #af8aec;
  --accent-cyan: #46c8d7;
  --accent-red: #ef7772;
  --accent-pink: #e282b8;
}
html[data-theme="dark"] .role-tool-grid a,
html[data-theme="dark"] .workspace-grid button,
html[data-theme="dark"] .role-preview-grid button {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile-accent, var(--gold)) 16%, #18181a), #151517) !important;
}
html[data-theme="dark"] .role-hero {
  background: linear-gradient(135deg, #17243b, #251d34 56%, #171719) !important;
}