:root, html[data-theme="light"] {
  --primary: #315368; --secondary: #243e4e; --accent: #fff;
  --primary-fg: #fff; --header-bg: #243e4e; --header-color: #fff;
  --header-link-color: #fff; --breadcrumbs-bg: #315368;
  --link-fg: #315368; --link-hover-color: #162e3d;
  --button-bg: #315368; --button-hover-bg: #243e4e;
  --default-button-bg: #315368; --default-button-hover-bg: #243e4e;
  --body-bg: #fff; --body-fg: #172e3c; --body-quiet-color: #4b5e68;
  --darkened-bg: #f2f5f7; --selected-bg: #e8eff3; --selected-row: #edf3f6;
  --font-family-primary: "Segoe UI", system-ui, sans-serif;
  --border-color: #c5d2da; --hairline-color: #dce4e9;
  --object-tools-bg: #315368; --object-tools-hover-bg: #243e4e;
  color-scheme: light;
}
html[data-theme="dark"] {
  --primary: #315368; --secondary: #243e4e; --header-bg: #243e4e; --accent: #fff; --header-color: #fff;
  --body-bg: #16232c; --body-fg: #eff4f7; --body-quiet-color: #c0d0dc; --darkened-bg: #213440;
  --selected-bg: #304b5c; --selected-row: #304b5c; --link-fg: #bad8ee; --link-hover-color: #fff;
  --border-color: #526672; --hairline-color: #435967; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --body-bg: #16232c; --body-fg: #eff4f7; --body-quiet-color: #c0d0dc; --darkened-bg: #213440;
    --selected-bg: #304b5c; --selected-row: #304b5c; --link-fg: #bad8ee; --link-hover-color: #fff;
    --border-color: #526672; --hairline-color: #435967; color-scheme: dark;
  }
}
#header { padding: 20px 32px; gap: 24px; align-items: center; }
.ngx-brand { display: flex; align-items: center; gap: 20px; color: #fff; text-decoration: none; }
.ngx-brand img { display: block; }
.ngx-brand > span { font-size: 24px; font-weight: 600; line-height: 1.05; }
.ngx-brand-caption { display: block; font-size: 12px; font-weight: 400; margin-top: 6px; }
.ngx-company { font-size: 13px; color: #fff; }
#content h1 { font-size: 26px; font-weight: 600; color: var(--body-fg); }
.ngx-intro { margin: 0 0 24px; max-width: 72ch; }
.ngx-intro p { font-size: 15px; line-height: 1.6; }
.ngx-status { padding: 12px 16px; background: var(--darkened-bg); color: var(--body-fg); border-radius: 6px; }
.module h2, .module caption { padding: 13px 16px; font-size: 14px; font-weight: 600; }
td, th { padding: 12px 14px; vertical-align: middle; }
#nav-sidebar { width: 240px; }
#changelist-filter { flex-basis: 210px; }
#changelist-filter li.selected { border-left: 0; background: var(--selected-bg); }
input, textarea, select { font-family: var(--font-family-primary); }
input::placeholder, textarea::placeholder { color: var(--body-quiet-color); opacity: 1; }
input[type="text"], input[type="password"], input[type="email"], select { padding: 9px 10px; border-radius: 5px; }
.button, input[type="submit"], button[type="submit"] { padding: 11px 18px; border-radius: 5px; cursor: pointer; }
button[type="submit"] { background: var(--button-bg); color: #fff; border: none; font-size: 14px; }
button[type="submit"]:hover { background: var(--button-hover-bg); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #b95013; outline-offset: 3px; }
.ngx-password { max-width: 600px; }
.ngx-password label { display: block; margin-bottom: 8px; }
.ngx-password .helptext { display: block; color: var(--body-quiet-color); line-height: 1.6; }
.ngx-password li { line-height: 1.6; }
@media (max-width: 767px) { #header { padding: 16px; gap: 16px; } .ngx-company { width: 100%; } .ngx-brand-caption { font-size: 11px; } }