:root,
.hpl-theme-dark {
  color-scheme: dark;

  --hpl-bg: #090d11;
  --hpl-sidebar: #070a0d;
  --hpl-surface-1: #10151a;
  --hpl-surface-2: #151b21;
  --hpl-surface-3: #1a2128;
  --hpl-border: #29313a;
  --hpl-border-subtle: #20272e;
  --hpl-border-strong: #3b4651;

  --hpl-text: #f5f4f1;
  --hpl-text-secondary: #a9b0b7;
  --hpl-text-muted: #747d86;
  --hpl-text-disabled: #56606a;

  --hpl-gold: #ceb290;
  --hpl-gold-hover: #dcc4a6;
  --hpl-gold-muted: rgba(206, 178, 144, 0.12);
  --hpl-gold-border: rgba(206, 178, 144, 0.38);

  --hpl-success: #45c57a;
  --hpl-success-bg: rgba(69, 197, 122, 0.12);
  --hpl-success-border: rgba(69, 197, 122, 0.36);
  --hpl-warning: #e3ad45;
  --hpl-warning-bg: rgba(227, 173, 69, 0.12);
  --hpl-warning-border: rgba(227, 173, 69, 0.36);
  --hpl-danger: #e05b5b;
  --hpl-danger-bg: rgba(224, 91, 91, 0.12);
  --hpl-danger-border: rgba(224, 91, 91, 0.38);
  --hpl-info: #4d8ff7;
  --hpl-info-bg: rgba(77, 143, 247, 0.12);
  --hpl-info-border: rgba(77, 143, 247, 0.34);

  --hpl-font-sans: Inter, Barlow, "Segoe UI", system-ui, -apple-system, sans-serif;
  --hpl-font-display: "Barlow Condensed", Inter, "Segoe UI", system-ui, sans-serif;
  --hpl-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --hpl-text-xs: 11px;
  --hpl-text-sm: 12px;
  --hpl-text-md: 14px;
  --hpl-text-lg: 16px;
  --hpl-text-xl: 20px;
  --hpl-text-2xl: 24px;
  --hpl-text-3xl: 40px;

  --hpl-leading-tight: 1.2;
  --hpl-leading-normal: 1.45;
  --hpl-leading-relaxed: 1.6;

  --hpl-space-1: 4px;
  --hpl-space-2: 8px;
  --hpl-space-3: 12px;
  --hpl-space-4: 16px;
  --hpl-space-5: 20px;
  --hpl-space-6: 24px;
  --hpl-space-8: 32px;
  --hpl-space-10: 40px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --hpl-radius-sm: var(--radius-sm);
  --hpl-radius-md: 8px;
  --hpl-radius-lg: var(--radius-md);
  --hpl-radius-xl: var(--radius-lg);
  --hpl-radius-pill: 999px;

  --hpl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --hpl-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.32);
  --hpl-shadow-3: 0 14px 32px rgba(0, 0, 0, 0.42);
  --hpl-focus-ring: 0 0 0 3px rgba(206, 178, 144, 0.22);

  /* Legacy aliases for staged migration into existing HPL screens. */
  --gold: var(--hpl-gold);
  --gold-dk: var(--hpl-gold-hover);
  --gold-lt: var(--hpl-gold-muted);
  --bg: var(--hpl-bg);
  --bg2: var(--hpl-surface-1);
  --bg3: var(--hpl-surface-2);
  --bdr: var(--hpl-border);
  --bdr-lt: var(--hpl-border-subtle);
  --text: var(--hpl-text);
  --text2: var(--hpl-text-secondary);
  --text3: var(--hpl-text-muted);
  --green: var(--hpl-success);
  --amber: var(--hpl-warning);
  --red: var(--hpl-danger);
  --blue: var(--hpl-info);
}

.hpl-ui {
  background: var(--hpl-bg);
  color: var(--hpl-text);
  font-family: var(--hpl-font-sans);
  font-size: var(--hpl-text-md);
  line-height: var(--hpl-leading-normal);
}

.hpl-ui *,
.hpl-ui *::before,
.hpl-ui *::after {
  box-sizing: border-box;
}

.hpl-display {
  font-family: var(--hpl-font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--hpl-leading-tight);
  text-transform: uppercase;
}

.hpl-eyebrow {
  color: var(--hpl-gold);
  font-size: var(--hpl-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hpl-muted {
  color: var(--hpl-text-muted);
}

.hpl-card {
  background: var(--hpl-surface-1);
  border: 1px solid var(--hpl-border-subtle);
  border-radius: var(--hpl-radius-lg);
  box-shadow: var(--hpl-shadow-1);
}

.hpl-card--elevated {
  background: var(--hpl-surface-2);
  border-color: var(--hpl-border);
  box-shadow: var(--hpl-shadow-2);
}

.hpl-card__header {
  align-items: center;
  border-bottom: 1px solid var(--hpl-border-subtle);
  display: flex;
  gap: var(--hpl-space-3);
  justify-content: space-between;
  padding: var(--hpl-space-4) var(--hpl-space-5);
}

.hpl-card__title {
  color: var(--hpl-text);
  font-family: var(--hpl-font-display);
  font-size: var(--hpl-text-lg);
  font-weight: 700;
  line-height: var(--hpl-leading-tight);
  text-transform: uppercase;
}

.hpl-card__body {
  padding: var(--hpl-space-5);
}

.hpl-field {
  display: grid;
  gap: var(--hpl-space-2);
}

.hpl-label {
  color: var(--hpl-text-secondary);
  font-size: var(--hpl-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hpl-input,
.hpl-select,
.hpl-textarea {
  background: var(--hpl-surface-2);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-sm);
  color: var(--hpl-text);
  font: 500 var(--hpl-text-md) / var(--hpl-leading-normal) var(--hpl-font-sans);
  min-height: 38px;
  outline: none;
  padding: 8px 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  width: 100%;
}

.hpl-input::placeholder,
.hpl-textarea::placeholder {
  color: var(--hpl-text-muted);
}

.hpl-input:hover,
.hpl-select:hover,
.hpl-textarea:hover {
  border-color: var(--hpl-border-strong);
}

.hpl-input:focus,
.hpl-select:focus,
.hpl-textarea:focus,
.hpl-input:focus-visible,
.hpl-select:focus-visible,
.hpl-textarea:focus-visible {
  border-color: var(--hpl-gold);
  box-shadow: var(--hpl-focus-ring);
}

.hpl-input:disabled,
.hpl-select:disabled,
.hpl-textarea:disabled {
  background: var(--hpl-surface-1);
  color: var(--hpl-text-disabled);
  cursor: not-allowed;
}

.hpl-field--error .hpl-input,
.hpl-input[aria-invalid="true"] {
  border-color: var(--hpl-danger);
}

.hpl-field-note {
  color: var(--hpl-text-muted);
  font-size: var(--hpl-text-xs);
}

.hpl-field-error {
  color: var(--hpl-danger);
  font-size: var(--hpl-text-xs);
  font-weight: 600;
}

.hpl-btn {
  align-items: center;
  background: var(--hpl-surface-2);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-sm);
  color: var(--hpl-text);
  cursor: pointer;
  display: inline-flex;
  font: 700 var(--hpl-text-sm) / 1 var(--hpl-font-sans);
  gap: var(--hpl-space-2);
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.hpl-btn:hover {
  background: var(--hpl-surface-3);
  border-color: var(--hpl-border-strong);
}

.hpl-btn:focus-visible {
  border-color: var(--hpl-gold);
  box-shadow: var(--hpl-focus-ring);
  outline: none;
}

.hpl-btn:active {
  transform: translateY(1px);
}

.hpl-btn:disabled {
  color: var(--hpl-text-disabled);
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.hpl-btn--primary {
  background: var(--hpl-gold);
  border-color: var(--hpl-gold);
  color: #10151a;
}

.hpl-btn--primary:hover {
  background: var(--hpl-gold-hover);
  border-color: var(--hpl-gold-hover);
}

.hpl-btn--secondary {
  background: transparent;
  border-color: var(--hpl-gold-border);
  color: var(--hpl-gold);
}

.hpl-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--hpl-text-secondary);
}

.hpl-btn--danger {
  background: transparent;
  border-color: var(--hpl-danger-border);
  color: var(--hpl-danger);
}

.hpl-badge {
  align-items: center;
  background: var(--hpl-surface-2);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-pill);
  color: var(--hpl-text-secondary);
  display: inline-flex;
  font-size: var(--hpl-text-xs);
  font-weight: 700;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
}

.hpl-badge::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.hpl-badge--success { background: var(--hpl-success-bg); border-color: var(--hpl-success-border); color: var(--hpl-success); }
.hpl-badge--warning { background: var(--hpl-warning-bg); border-color: var(--hpl-warning-border); color: var(--hpl-warning); }
.hpl-badge--danger { background: var(--hpl-danger-bg); border-color: var(--hpl-danger-border); color: var(--hpl-danger); }
.hpl-badge--info { background: var(--hpl-info-bg); border-color: var(--hpl-info-border); color: var(--hpl-info); }
.hpl-badge--neutral { background: var(--hpl-surface-2); border-color: var(--hpl-border); color: var(--hpl-text-muted); }

.hpl-tooltip {
  position: relative;
}

.hpl-tooltip[data-tooltip]:hover::after,
.hpl-tooltip[data-tooltip]:focus-visible::after {
  background: #111820;
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-sm);
  bottom: calc(100% + 8px);
  box-shadow: var(--hpl-shadow-2);
  color: var(--hpl-text);
  content: attr(data-tooltip);
  font-size: var(--hpl-text-xs);
  left: 50%;
  max-width: 220px;
  padding: 7px 9px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 20;
}

.hpl-progress {
  display: grid;
  gap: var(--hpl-space-2);
}

.hpl-progress__meta {
  align-items: center;
  color: var(--hpl-text-secondary);
  display: flex;
  font-size: var(--hpl-text-xs);
  justify-content: space-between;
}

.hpl-progress__track {
  background: #222a31;
  border-radius: var(--hpl-radius-pill);
  height: 8px;
  overflow: hidden;
}

.hpl-progress__bar {
  background: var(--hpl-gold);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 0;
}

.hpl-progress__bar--success { background: var(--hpl-success); }
.hpl-progress__bar--warning { background: var(--hpl-warning); }
.hpl-progress__bar--info { background: var(--hpl-info); }

.hpl-table-wrap {
  border: 1px solid var(--hpl-border-subtle);
  border-radius: var(--hpl-radius-md);
  overflow: hidden;
}

.hpl-table {
  border-collapse: collapse;
  color: var(--hpl-text-secondary);
  font-size: var(--hpl-text-sm);
  width: 100%;
}

.hpl-table th {
  background: var(--hpl-surface-2);
  color: var(--hpl-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  text-align: left;
  text-transform: uppercase;
}

.hpl-table td {
  border-top: 1px solid var(--hpl-border-subtle);
  padding: 11px 12px;
}

.hpl-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.hpl-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hpl-metric-row-set {
  background: var(--hpl-surface-1);
  border: 1px solid var(--hpl-border-subtle);
  border-radius: var(--hpl-radius-md);
  color: var(--hpl-text);
  font-family: var(--hpl-font-sans);
  overflow: hidden;
}

.hpl-metric-row-head,
.hpl-metric-row {
  align-items: center;
  display: grid;
  gap: var(--hpl-space-3);
  grid-template-columns: 34px minmax(180px, 1.25fr) minmax(160px, .9fr) 108px 112px 96px 122px;
}

.hpl-metric-row-head {
  background: var(--hpl-surface-2);
  border-bottom: 1px solid var(--hpl-border-subtle);
  color: var(--hpl-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  text-transform: uppercase;
}

.hpl-metric-row {
  border-bottom: 1px solid var(--hpl-border-subtle);
  min-height: 68px;
  padding: 10px 14px;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.hpl-metric-row:last-child {
  border-bottom: 0;
}

.hpl-metric-row:hover {
  background: rgba(255, 255, 255, 0.018);
}

.hpl-metric-row--error {
  background: rgba(224, 91, 91, 0.04);
}

.hpl-metric-row--excluded {
  color: var(--hpl-text-disabled);
}

.hpl-metric-row--excluded .hpl-metric-row__label,
.hpl-metric-row--excluded .hpl-metric-row__readonly,
.hpl-metric-row--excluded .hpl-metric-row__change {
  opacity: .58;
}

.hpl-metric-row__check,
.hpl-metric-row__switch,
.hpl-metric-row__toggle-spacer {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.hpl-metric-row__toggle-spacer {
  height: 22px;
  width: 22px;
}

.hpl-metric-row__check input,
.hpl-metric-row__switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.hpl-metric-row__check span:not(.hpl-sr-only) {
  align-items: center;
  background: var(--hpl-surface-2);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-sm);
  color: var(--hpl-surface-1);
  display: inline-flex;
  height: 22px;
  justify-content: center;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  width: 22px;
}

.hpl-metric-row__check span:not(.hpl-sr-only)::before {
  content: "✓";
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
}

.hpl-metric-row__check input:checked + span:not(.hpl-sr-only) {
  background: var(--hpl-gold);
  border-color: var(--hpl-gold);
}

.hpl-metric-row__check input:checked + span:not(.hpl-sr-only)::before {
  opacity: 1;
}

.hpl-metric-row__check input:focus-visible + span:not(.hpl-sr-only),
.hpl-metric-row__switch input:focus-visible + span:not(.hpl-sr-only) {
  box-shadow: var(--hpl-focus-ring);
}

.hpl-metric-row__label {
  min-width: 0;
}

.hpl-metric-row__title {
  align-items: center;
  color: var(--hpl-text);
  display: flex;
  font-size: var(--hpl-text-md);
  font-weight: 750;
  gap: var(--hpl-space-2);
  line-height: var(--hpl-leading-tight);
}

.hpl-metric-row__description {
  color: var(--hpl-text-muted);
  font-size: var(--hpl-text-xs);
  margin-top: 3px;
}

.hpl-metric-row__help {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--hpl-gold);
  cursor: help;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.hpl-metric-row__help:focus-visible {
  border-radius: var(--hpl-radius-sm);
  box-shadow: var(--hpl-focus-ring);
  outline: none;
}

.hpl-metric-row__entry {
  align-items: center;
  display: grid;
  gap: var(--hpl-space-2);
  grid-template-columns: minmax(80px, 1fr) auto;
  position: relative;
}

.hpl-metric-row__input {
  font-family: var(--hpl-font-mono);
  font-size: var(--hpl-text-md);
  font-weight: 700;
  text-align: right;
}

.hpl-metric-row__unit {
  color: var(--hpl-text-secondary);
  font-size: var(--hpl-text-xs);
  font-weight: 700;
  min-width: 34px;
}

.hpl-metric-row__calc-lock {
  align-items: center;
  color: var(--hpl-info);
  display: inline-flex;
  font-size: var(--hpl-text-xs);
  font-weight: 700;
  gap: 4px;
  grid-column: 1 / -1;
}

.hpl-metric-row__error {
  grid-column: 1 / -1;
}

.hpl-metric-row__readonly,
.hpl-metric-row__change {
  display: grid;
  gap: 2px;
}

.hpl-metric-row__readonly span,
.hpl-metric-row__change span {
  color: var(--hpl-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hpl-metric-row__readonly strong,
.hpl-metric-row__change strong {
  color: var(--hpl-text-secondary);
  font-family: var(--hpl-font-mono);
  font-size: var(--hpl-text-sm);
}

.hpl-metric-row__change.is-positive strong {
  color: var(--hpl-success);
}

.hpl-metric-row__change.is-negative strong {
  color: var(--hpl-danger);
}

.hpl-metric-row__status {
  justify-self: start;
}

.hpl-metric-name {
  color: var(--hpl-text);
  font-weight: 700;
}

.hpl-metric-help {
  color: var(--hpl-text-muted);
  display: block;
  font-size: var(--hpl-text-xs);
  font-weight: 500;
}

.hpl-status-dot {
  background: var(--hpl-text-muted);
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.hpl-status-dot--success { background: var(--hpl-success); }
.hpl-status-dot--warning { background: var(--hpl-warning); }
.hpl-status-dot--danger { background: var(--hpl-danger); }
.hpl-status-dot--info { background: var(--hpl-info); }

.hpl-switch {
  align-items: center;
  display: inline-flex;
  gap: var(--hpl-space-2);
}

.hpl-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.hpl-switch__control {
  background: var(--hpl-surface-2);
  border: 1px solid var(--hpl-border);
  border-radius: var(--hpl-radius-pill);
  height: 24px;
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease;
  width: 42px;
}

.hpl-switch__control::after {
  background: var(--hpl-text-secondary);
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 140ms ease, background-color 140ms ease;
  width: 18px;
}

.hpl-switch input:checked + .hpl-switch__control {
  background: var(--hpl-gold);
  border-color: var(--hpl-gold);
}

.hpl-switch input:checked + .hpl-switch__control::after {
  background: #10151a;
  transform: translateX(18px);
}

.hpl-switch input:focus-visible + .hpl-switch__control {
  box-shadow: var(--hpl-focus-ring);
}

@media (max-width: 860px) {
  .hpl-metric-row-head {
    display: none;
  }

  .hpl-metric-row {
    align-items: start;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .hpl-metric-row__entry,
  .hpl-metric-row__readonly,
  .hpl-metric-row__change,
  .hpl-metric-row__status {
    grid-column: 2;
  }

  .hpl-metric-row__readonly,
  .hpl-metric-row__change {
    display: flex;
    justify-content: space-between;
  }
}