:root {
  --color-white: #fffdfb;
  --center-bg: var(--color-base-50); --center-surface: var(--color-white);
  --center-muted-surface: var(--color-base-50); --center-text: var(--color-base-900);
  --center-muted: var(--color-base-600); --center-line: var(--color-base-200);
  --center-input-line: var(--color-base-300); --center-focus: var(--color-primary-600);
  --center-error: #b91c1c;
}
html.dark {
  --center-bg: var(--color-base-900); --center-surface: var(--color-base-800);
  --center-muted-surface: var(--color-base-800); --center-text: var(--color-base-100);
  --center-muted: var(--color-base-400); --center-line: var(--color-base-700);
  --center-input-line: var(--color-base-600); --center-focus: var(--color-primary-400);
  --center-error: #fca5a5;
}
body .uppercase { text-transform: none !important; }
.center-dashboard { max-width: 1200px; }
.center-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.center-metric, .center-panel { padding: 24px; border: 1px solid var(--center-line); border-radius: 8px; background: var(--center-surface); }
.center-metric { display: grid; gap: 12px; color: var(--center-muted); }
.center-metric strong { font-size: 32px; font-weight: 600; line-height: 1.2; color: var(--center-text); }
.center-metric:hover { border-color: var(--center-focus); }
.center-metric .material-symbols-outlined { color: var(--center-focus); }
.center-event { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 0; border-top: 1px solid var(--center-line); }
.center-event time { color: var(--center-muted); }
.center-form { max-width: 640px; }
.center-note { margin: 0 0 24px; color: var(--center-muted); }
.center-error, .errorlist { color: var(--center-error); }
.center-form .errorlist { margin-bottom: 16px; }
.center-activation-url { overflow-wrap: anywhere; user-select: all; }
.center-dashboard :focus-visible, .center-form :focus-visible { outline: 2px solid var(--center-focus); outline-offset: 3px; }
.center-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 24px; font-weight: 600; }
.center-login-brand img { width: 40px; height: 40px; }
.center-enrollment-key { display: block; overflow-wrap: anywhere; padding: 16px; border: 1px solid var(--center-line); border-radius: 8px; font-family: monospace; }
@media (max-width: 640px) { .center-panel, .center-metric { padding: 16px; } }