:root {
  --bg: #0f1419;
  --panel: #171d25;
  --line: #2a3441;
  --text: #e8eef6;
  --muted: #93a1b3;
  --accent: #3d8bfd;
  --ok: #2f9e44;
  --warn: #f08c00;
  --err: #e03131;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
.wrap { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px;
  background: #12171e;
  border-right: 1px solid var(--line);
  padding: 20px 14px;
}
.brand { font-weight: 700; margin-bottom: 18px; }
.sidebar a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.sidebar a.active, .sidebar a:hover { background: var(--panel); color: var(--text); }
.content { flex: 1; padding: 28px; }
.content.auth { max-width: 420px; margin: 8vh auto; }
h1 { margin: 0 0 18px; font-size: 24px; }
.card, table, form.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.card { padding: 16px; margin-bottom: 16px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat .n { font-size: 28px; font-weight: 700; }
.stat .l { color: var(--muted); }
table { width: 100%; border-collapse: collapse; overflow: hidden; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
form.panel { padding: 16px; margin-bottom: 16px; }
label { display: block; margin: 10px 0 4px; color: var(--muted); }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0f1419;
  color: var(--text);
}
button, .btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn.secondary { background: #2a3441; }
.btn.danger { background: var(--err); }
.notice { padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.notice.success { background: rgba(47,158,68,.15); color: #b2f2bb; }
.notice.error, .notice.warn { background: rgba(240,140,0,.15); color: #ffec99; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #2a3441; }
.badge.active { background: rgba(47,158,68,.2); color: #b2f2bb; }
.badge.pending { background: rgba(240,140,0,.2); color: #ffec99; }
.badge.inactive, .badge.expired { background: rgba(224,49,49,.2); color: #ffc9c9; }
code { background: #0f1419; padding: 2px 6px; border-radius: 4px; }
.row-actions a { margin-right: 8px; }
.muted { color: var(--muted); margin: 0 0 14px; max-width: 720px; }
.badge.inactive { background: rgba(224,49,49,.2); color: #ffc9c9; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filters .btn.active-filter { background: var(--accent); color: #fff; }
.card h3 { margin-top: 0; }