:root {
  color-scheme: dark;
  --bg: #0b0f12;
  --panel: #11171b;
  --line: #26323a;
  --text: #e5eef2;
  --muted: #91a2ad;
  --accent: #3ddc84;
  --accent-soft: rgba(61, 220, 132, 0.1);
  --warn: #f1fa8c;
  --bad: #ff5555;
  --ok: #50fa7b;
  --ui-bg: var(--bg);
  --ui-panel: var(--panel);
  --ui-border: var(--line);
  --ui-text: var(--text);
  --ui-text-muted: var(--muted);
  --ui-primary: var(--accent);
}

body {
  background: var(--bg);
  color: var(--text);
}

.pem-header,
header {
  background: rgba(11,15,18,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.pem-nav,
nav {
  background: #0d1216;
  border-bottom: 1px solid var(--line);
}

.pem-nav a,
nav a {
  color: var(--muted);
}

.pem-nav a:hover,
.pem-nav a.active,
nav a:hover,
nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.pem-panel,
.panel,
.pem-card,
.card,
.metric,
details {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

input,
select,
textarea {
  background: #090d10;
  color: var(--text);
  border-color: var(--line);
}

button,
.button {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 800;
}

button.secondary,
.button.secondary {
  background: var(--panel);
  color: var(--muted);
  border-color: var(--line);
}

th {
  background: #1b2029;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

td {
  border-bottom: 1px solid var(--line);
}

.badge,
.pem-status {
  background: #1b2029;
  color: var(--muted);
  border-color: var(--line);
}

.badge.ok,
.pem-status[data-status="done"],
.pem-status[data-status="paid"],
.pem-status[data-status="confirmed_paid"] {
  color: var(--ok);
  background: rgba(80, 250, 123, 0.1);
  border-color: rgba(80, 250, 123, 0.3);
}

.badge.warn,
.pem-status[data-status="warn"],
.pem-status[data-status="open"] {
  color: var(--warn);
  background: rgba(241, 250, 140, 0.1);
  border-color: rgba(241, 250, 140, 0.3);
}

.badge.bad,
.pem-status[data-status="problem"] {
  color: var(--bad);
  background: rgba(255, 85, 85, 0.1);
  border-color: rgba(255, 85, 85, 0.3);
}

a {
  color: var(--accent);
}

.flash {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}