/* MODULE: admin-cards – Dynamic Card Blocks, Visibility, Add/Remove
══════════════════════════════════════════════════════════════ */

/* ── Social Media Admin Row ─────────────────────────────────── */
.social-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.social-admin-row:last-child { margin-bottom: 0; }
.social-admin-row .field-group { flex: 1; margin-bottom: 0; }
.social-admin-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Card visibility & ordering ────────────────────────────── */
.card-is-hidden { opacity: 0.5; }
.card-is-hidden .card-block-fields { display: none; }

.card-block-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.card-block-btn:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--text);
}
.card-block-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.card-toggle-vis { font-size: 16px; }

/* ── Sichtbarkeits-Checkbox ────────────────────────────────── */
.vis-check-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg-3);
  -webkit-user-select: none;
  user-select: none;
}
.vis-check-wrap:hover { border-color: var(--accent); }
.vis-check-wrap input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.vis-check-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.vis-check-wrap:has(input:checked) .vis-check-text { color: var(--accent); }
.vis-check-wrap--no-mb { margin-bottom: 0; }

/* ── Rideout date field ────────────────────────────────────── */
.ro-date-field {
  background: rgba(255,107,0,0.04);
  border: 1.5px solid rgba(255,107,0,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ro-date-missing { border-color: rgba(255,107,0,0.5); }
.ro-date-field input[type="date"] {
  width: 100%;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-top: 6px;
}
.ro-date-missing input[type="date"] { border-color: #dc2626; }
.ro-warn { color: #dc2626; font-weight: 700; }

.card-block-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid rgba(220,38,38,0.25);
  background: none;
  color: #dc2626;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
  margin-left: auto;
}
.card-block-remove:hover {
  background: rgba(220,38,38,0.08);
  border-color: #dc2626;
}

.btn-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  margin-top: 4px;
  margin-bottom: 20px;
}
.btn-add-card:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

/* ── Katalog: Kategorie-Gruppierung ──────────────────────── */
.cat-stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--bg-2);
  border-radius: var(--radius);
  font-size: 13px;
}
.cat-stats-total {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}
.cat-stats-tag {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.cat-stats-tag strong {
  color: var(--accent);
  font-weight: 700;
}
.cat-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  margin-top: 18px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
.cat-group-header:first-of-type { margin-top: 0; }
.cat-group-label {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--text);
}
.cat-group-count {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 11px;
  padding: 0 7px;
}
/* Kategorie-Select */
.cat-catsel {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.cat-catsel:focus { border-color: var(--accent); outline: none; }
.cat-newcat-input {
  margin-top: 6px;
}
/* Duplikat-Warnung */
.cat-dup-warn {
  display: block;
  font-size: 12px;
  color: #d97706;
  margin-top: 4px;
  min-height: 16px;
}
.cat-dup-warn strong {
  font-weight: 600;
}

/* ── Katalog: Übersichtstabelle ───────────────────────────── */
.cat-table-wrap {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.cat-table-header {
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.cat-table-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--text);
}
.cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cat-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.cat-table-group-row td {
  padding: 6px 14px;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  background: rgba(255,107,0,0.04);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.cat-table-row {
  cursor: pointer;
  transition: background var(--transition);
}
.cat-table-row:hover { background: var(--accent-glow); }
.cat-table-row td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.cat-table-row:last-child td { border-bottom: none; }
.cat-table-cat { color: var(--text-muted); }
.cat-table-weight {
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.cat-table-usage {
  white-space: nowrap;
}
.cat-use-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 4px;
}
.cat-use-lo {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.2);
}
.cat-use-pl {
  background: rgba(59,130,246,0.1);
  color: #2563eb;
  border: 1px solid rgba(59,130,246,0.2);
}
.cat-use-none { color: var(--text-muted); font-size: 12px; }
/* Highlight-Animation beim Anklicken */
@keyframes catHighlight {
  0%   { box-shadow: 0 0 0 3px rgba(255,107,0,0.5); }
  100% { box-shadow: 0 0 0 3px rgba(255,107,0,0); }
}
.cat-highlight {
  animation: catHighlight 1.5s ease-out;
}

/* ── GPX Admin Preview (Blog-Editor) ──────────────────────── */
.gpx-admin-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gpx-admin-info span { display: flex; align-items: center; gap: 4px; }
.gpx-admin-canvas {
  display: block;
  width: 100%;
  height: 90px;
  border-radius: 8px;
  background: var(--bg-3);
  margin-bottom: 8px;
}

/* ── Loadout-Auswahl Admin ─────────────────────────────────── */
.lo-sel-group { margin-bottom: 20px; }
.lo-sel-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.lo-sel-items { display: flex; flex-direction: column; gap: 4px; }
.lo-sel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.lo-sel-item:hover { border-color: rgba(255,107,0,0.4); }
.lo-sel-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.lo-sel-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.lo-sel-icon {
  font-size: 22px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.lo-sel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.lo-sel-name  { font-size: 14px; font-weight: 500; color: var(--text); }
.lo-sel-note  { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-sel-weight { font-size: 11px; color: var(--accent); font-weight: 600; }
.lo-sel-item:has(input:checked) { border-color: var(--accent); background: rgba(255,107,0,0.04); }

/* ── Emoji Toolbar (Blog-Editor) ────────────────────────────── */
.emoji-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.emoji-tb-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--text);
  line-height: 1.4;
  transition: background 0.15s;
}
.emoji-tb-btn:hover { background: var(--bg-3); }
.emoji-tb-btn.fmt-btn {
  font-size: 13px;
  min-width: 26px;
  text-align: center;
  border: 1.5px solid var(--border);
}
.emoji-tb-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.emoji-toolbar + textarea {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Blog Abschnitt-Karte ────────────────────────────────────── */
.bp-section-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.bps-sec-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap;
}

.bp-layout-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bp-layout-btn {
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.bp-layout-btn:hover  { border-color: var(--accent); color: var(--accent); }
.bp-layout-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.bps-sec-fields { padding: 16px; }

/* Bildausrichtungs-Picker */
.bp-align-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-align-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.bp-align-opt input[type="radio"] { display: none; }
.bp-align-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.bp-align-opt:hover  { border-color: var(--accent); color: var(--accent); }

/* ── Blog-Bild-Karte ─────────────────────────────────────────── */
.bp-img-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* Hint-Text in Labels */
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: normal;
}

/* ── Packlisten-Eintragszeile ────────────────────────────── */
.pl-item-row {
  display: grid;
  grid-template-columns: 1fr 72px 1fr 28px;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.pl-item-row input {
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.pl-item-row input:focus {
  border-color: var(--accent);
  background: rgba(255,107,0,0.04);
}

/* Card-Block-Header mit Remove-Button */
.card-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-block-header .form-card-title {
  flex: 1;
  cursor: pointer;
}

/* ── Packlisten-Checkbox-Grid ──────────────────────────── */
.pl-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pl-item-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
  -webkit-user-select: none;
  user-select: none;
}
.pl-item-checkbox:hover { background: var(--bg-card); }
.pl-item-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Responsive Cards: ≤768px ──────────────────────────────── */
@media (max-width: 768px) {
  /* External link rows: stack on small screens */
  .ext-link-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .ext-link-rmv { grid-column: 1 / -1; justify-self: end; }

  /* Card sort/delete buttons: bigger tap targets */
  .card-block-btn {
    width: 36px;
    height: 36px;
  }

  /* Vis-check wraps: more breathing room for tapping */
  .vis-check-wrap { padding: 6px 0; }

  /* Loadout selector: single column */
  .lo-sel-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Übersichtstabellen: horizontal scrollbar ────────────── */
  .cat-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cat-table {
    min-width: 480px;
  }

  /* Tabellen-Rows: größere Touch-Targets */
  .cat-table-row td {
    padding: 12px 12px;
  }
  .cat-table th {
    padding: 10px 12px;
  }

  /* Übersichts-Header: stacken auf Mobile */
  .cat-table-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .cat-table-title {
    font-size: 14px;
  }

  /* Stats-Bar: kompakter */
  .cat-stats-bar {
    padding: 8px 10px;
    gap: 6px;
  }
  .cat-stats-tag {
    font-size: 11px;
    padding: 2px 7px;
  }

  /* Kategorie-Gruppen: kompakter */
  .cat-group-header {
    margin-top: 14px;
    padding: 6px 0 4px;
  }
  .cat-group-label {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .ext-link-row { grid-template-columns: 1fr; }
  .ext-link-rmv { grid-column: auto; justify-self: auto; }
  .lo-sel-grid { grid-template-columns: 1fr !important; }

  /* Checkbox-Labels dürfen auf kleinen Bildschirmen umbrechen */
  .vis-check-text {
    white-space: normal;
    line-height: 1.4;
  }
  .vis-check-wrap { align-items: flex-start; }

  /* Card-Header: Titel auf eigener Zeile, Controls darunter */
  .card-block-header {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .card-block-header .form-card-title {
    flex: 1 0 100%;
    cursor: pointer;
  }

  /* Tabelle: noch kompakter */
  .cat-table {
    min-width: 420px;
    font-size: 12px;
  }
  .cat-table-row td {
    padding: 10px 8px;
  }

  /* Verwendungs-Tags: kleiner */
  .cat-use-tag {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* Add-Card-Button: größerer Touch-Target */
  .btn-add-card {
    padding: 16px;
    font-size: 15px;
  }
}

/* ── Nachrichten-Tabelle (Kontaktanfragen) ──────────────────── */
.msg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.msg-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.msg-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.msg-table tbody tr:hover {
  background: var(--bg-2);
}
.msg-date {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
.msg-deadline {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}
.msg-deadline small { font-weight: 600; }
.msg-deadline-ok   { background: rgba(22,163,74,0.08); color: #16a34a; }
.msg-deadline-warn { background: rgba(234,179,8,0.1);  color: #b45309; }
.msg-deadline-soon { background: rgba(220,38,38,0.08); color: #dc2626; }
.msg-deadline-over { background: rgba(220,38,38,0.14); color: #dc2626; font-weight: 600; }
.msg-row-old {
  background: rgba(220,38,38,0.04);
}
.msg-text {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-text:hover {
  white-space: normal;
  word-break: break-word;
}
.btn-msg-del {
  padding: 4px 8px !important;
  font-size: 12px !important;
  min-height: unset !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,0.3) !important;
}
.btn-msg-del:hover {
  background: rgba(220,38,38,0.1) !important;
}
.msg-status {
  font-size: 13px;
  margin-top: 8px;
  color: var(--text-muted);
  min-height: 20px;
}
.msg-status-ok { color: var(--accent); }
.msg-status-err { color: #dc2626; }

@media (max-width: 768px) {
  .msg-table { font-size: 12px; }
  .msg-table th, .msg-table td { padding: 8px 6px; }
  .msg-text { max-width: 140px; }
}

/* ── Benutzer-Tabelle (Admin User-Mgmt) ─────────────────────── */
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.users-table th,
.users-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table th {
  background: var(--bg-2);
  font-weight: 600;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.users-table tbody tr:hover { background: var(--bg-2); }
.users-table tr.user-row-deleted { opacity: 0.55; }
.users-table .user-email { font-weight: 500; word-break: break-all; }
.users-table .user-email-unconfirmed { font-size: 11px; color: #b45309; margin-top: 2px; }

.user-role-select {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}
.user-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.user-role-badge.role-admin  { background: rgba(255,107,0,0.12); color: var(--accent); }
.user-role-badge.role-editor { background: rgba(59,130,246,0.12); color: #2563eb; }
.user-role-badge.role-member { background: var(--bg-3); color: var(--text-muted); }

.user-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.user-status-badge.status-active    { background: rgba(34,197,94,0.12);  color: #16a34a; }
.user-status-badge.status-suspended { background: rgba(220,38,38,0.12);  color: #dc2626; }
.user-status-badge.status-deleted   { background: var(--bg-3);           color: var(--text-faint); }

.user-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-user-act {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
}
.btn-user-act:hover { background: var(--bg-2); border-color: var(--accent); }
.btn-user-act.btn-user-act-del { color: #dc2626; border-color: rgba(220,38,38,0.3); }
.btn-user-act.btn-user-act-del:hover { background: rgba(220,38,38,0.08); }

@media (max-width: 768px) {
  .users-table { font-size: 12px; }
  .users-table th, .users-table td { padding: 6px 4px; }
  .user-role-select { font-size: 11px; padding: 2px 4px; }
  .btn-user-act { padding: 3px 6px; font-size: 12px; }
}

/* ── Fehler-Codes-Tabelle ──────────────────────────────── */
.err-table { font-size: 13px; }
.err-table td, .err-table th { vertical-align: top; }
.err-table tr:hover { background: var(--bg-2); }

.err-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #6b6b80;
}
.err-pill-400 { background: #d97706; }  /* orange – validation */
.err-pill-401 { background: #6366f1; }  /* indigo – auth */
.err-pill-403 { background: #a855f7; }  /* violet – forbidden */
.err-pill-404 { background: #6b7280; }  /* gray – not found */
.err-pill-conflict { background: #eab308; color: #1A1A2E; }  /* yellow – 409 */
.err-pill-warn { background: #f59e0b; }  /* amber – 410/413 */
.err-pill-429 { background: #f97316; }  /* orange – rate limit */
.err-pill-500 { background: #dc2626; }  /* red – server error */
.err-pill-sym { background: #14b8a6; }  /* teal – symptom (kein HTTP) */

.err-domain {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 768px) {
  .err-table { font-size: 11px; }
  .err-table td, .err-table th { padding: 6px 4px; }
}