/* Accent themes from the supplied admin-template. */
:root,
[data-accent="blue"] { --accent: #2962ff; --accent-contrast: #fff; }
[data-accent="teal"] { --accent: #0d8f84; --accent-contrast: #fff; }
[data-accent="violet"] { --accent: #7c3aed; --accent-contrast: #fff; }
[data-accent="amber"] { --accent: #b45309; --accent-contrast: #fff; }
[data-accent="rose"] { --accent: #e11d48; --accent-contrast: #fff; }
[data-theme="dark"],
[data-theme="dark"][data-accent="blue"] { --accent: #2962ff; --accent-contrast: #fff; }
[data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; --accent-contrast: #04141a; }
[data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; --accent-contrast: #12082a; }
[data-theme="dark"][data-accent="amber"] { --accent: #fbbf24; --accent-contrast: #1d1300; }
[data-theme="dark"][data-accent="rose"] { --accent: #fb7185; --accent-contrast: #2a0610; }
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 35%, transparent);
}
.customizer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); z-index: 90;
  transform: translateX(105%); transition: transform var(--transition);
  display: flex; flex-direction: column;
}
.customizer.open { transform: none; }
.customizer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.customizer-body { padding: var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-5); }
.customizer h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: var(--sp-2); }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; outline-offset: 2px; }
.swatch[aria-pressed="true"] { border-color: var(--text); }
.swatch[data-accent="teal"] { background: #2dd4bf; }
.swatch[data-accent="blue"] { background: #2962ff; }
.swatch[data-accent="violet"] { background: #a78bfa; }
.swatch[data-accent="amber"] { background: #fbbf24; }
.swatch[data-accent="rose"] { background: #fb7185; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-2); border-radius: var(--radius); padding: 3px; gap: 3px; }
.segmented button { padding: 7px 10px; border-radius: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.customizer-scrim { position: fixed; inset: 0; background: rgba(2, 8, 18, .45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.customizer-scrim.open { opacity: 1; pointer-events: auto; }