:root {
  --bw-bg: #0b0c0f;
  --bw-side: #090a0d;
  --bw-card: #191a1d;
  --bw-border: #313339;
  --bw-text: #f3f4f7;
  --bw-muted: #aaaeb8;
  --bw-accent: #438ff5;
}

body[data-page-id="account"] {
  color-scheme: dark;
  color: var(--bw-text);
  background: var(--bw-bg);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body[data-page-id="account"] .keycloak__loading-container,
body[data-page-id="account"] .pf-v5-c-page,
body[data-page-id="account"] .pf-v5-c-page__main,
body[data-page-id="account"] .pf-v5-c-page__main-section {
  background: var(--bw-bg);
  color: var(--bw-text);
}

body[data-page-id="account"] .pf-v5-c-page__header,
body[data-page-id="account"] .pf-v5-c-page__sidebar {
  background: var(--bw-side);
  border-color: var(--bw-border);
}

body[data-page-id="account"] .pf-v5-c-page__sidebar { width: 218px; }
body[data-page-id="account"] .pf-v5-c-page__main { min-width: 0; }
body[data-page-id="account"] .pf-v5-c-page__main-section { padding: 24px 32px; }

body[data-page-id="account"] .pf-v5-c-card,
body[data-page-id="account"] .pf-v5-c-panel,
body[data-page-id="account"] .pf-v5-c-modal-box {
  background: var(--bw-card);
  color: var(--bw-text);
  border: 1px solid var(--bw-border);
  border-radius: 12px;
  box-shadow: none;
}

body[data-page-id="account"] .pf-v5-c-title,
body[data-page-id="account"] h1,
body[data-page-id="account"] h2 { color: var(--bw-text); }
body[data-page-id="account"] h1 { font-size: 24px; }
body[data-page-id="account"] h2 { font-size: 16px; }
body[data-page-id="account"] .pf-v5-c-nav__link { color: var(--bw-muted); }
body[data-page-id="account"] .pf-v5-c-nav__link:hover,
body[data-page-id="account"] .pf-v5-c-nav__link.pf-m-current { color: var(--bw-accent); }
body[data-page-id="account"] .pf-v5-c-button.pf-m-primary {
  color: #fff;
  background: var(--bw-accent);
  border-radius: 7px;
}
body[data-page-id="account"] .pf-v5-c-form-control {
  color: var(--bw-text);
  background: var(--bw-bg);
  border-color: var(--bw-border);
  border-radius: 7px;
}
body[data-page-id="account"] a { color: var(--bw-accent); }
body[data-page-id="account"] :focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 2px; }

@media (min-width: 1000px) {
  body[data-page-id="account"] .pf-v5-c-page__main-body,
  body[data-page-id="account"] .pf-v5-c-page__main-section > div { max-width: 1060px; }
}
@media (max-width: 760px) {
  body[data-page-id="account"] .pf-v5-c-page__main-section { padding: 16px; }
}