:root {
  --bg: #0a0d14;
  --bg-panel: #10141d;
  --bg-panel-2: #141924;
  --line: #232a38;
  --line-soft: #1a2029;
  --text: #dde4ef;
  --text-dim: #7c8798;
  --text-faint: #4d5566;
  --cyan: #4fd6e8;
  --cyan-dim: #2a6b78;
  --amber: #f0ac3f;
  --amber-dim: #7a5a24;
  --red: #ea5a5a;
  --red-dim: #6b2b2b;
  --green: #5fd88f;

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(79, 214, 232, 0.06), transparent),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(240, 172, 63, 0.05), transparent);
  background-attachment: fixed;
}

::selection { background: var(--cyan-dim); color: #fff; }

button, input, select { font-family: inherit; }

/* ── Écran de connexion ─────────────────────────────────────────────── */
.screen { min-height: 100vh; }

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: min(360px, 88vw);
  padding: 40px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
  position: relative;
}
.login-card::before, .login-card::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--cyan-dim);
}
.login-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.login-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.login-glyph {
  font-size: 28px;
  color: var(--cyan);
  margin-bottom: 8px;
}
.login-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text);
}
.login-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 6px;
  margin-bottom: 28px;
}

#login-form { display: flex; flex-direction: column; gap: 10px; }

#login-password {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: 0.05em;
  outline: none;
}
#login-password:focus { border-color: var(--cyan-dim); }

#login-form button {
  background: var(--cyan);
  color: #06181c;
  border: none;
  padding: 11px 12px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s;
}
#login-form button:hover { filter: brightness(1.1); }

.login-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 14px;
  min-height: 16px;
}

/* ── Barre supérieure ───────────────────────────────────────────────── */
/* V3.43.5 — Barre d'administration sur 2 lignes : la marque et le compte
   admin occupent la 1re ligne, la navigation des onglets la 2e (elle-même
   autorisée à passer sur plusieurs lignes). Auparavant tout tenait sur une
   seule ligne de 56px de haut : sur les résolutions étroites, les derniers
   onglets (Patch Notes, Console…) sortaient de l'écran et devenaient
   inatteignables. La hauteur est désormais automatique. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 6px;
  padding: 8px 24px;
  height: auto;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 20, 29, 0.7);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-glyph { color: var(--cyan); font-size: 16px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 14px;
}
.brand-tag {
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 10px;
}

/* Ligne 2 de la barre (voir .topbar ci-dessus) : `order: 2` place la
   navigation APRÈS le bloc compte admin (order: 1) tout en occupant 100% de
   la largeur, et `flex-wrap` évite tout débordement horizontal quelle que
   soit la résolution — plus aucun onglet n'est masqué. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  order: 2;
  flex: 1 0 100%;
  row-gap: 2px;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.tab-btn:hover { color: var(--text); background: var(--line-soft); }
.tab-btn.active { color: var(--cyan); background: rgba(79, 214, 232, 0.08); }

.logout-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 7px 12px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.logout-btn:hover { color: var(--red); border-color: var(--red-dim); }

.content { padding: 28px 24px 60px; max-width: 1180px; margin: 0 auto; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Cartes de stats ────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  position: relative;
}
.stat-card .stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.stat-card.accent-cyan .stat-value { color: var(--cyan); }
.stat-card.accent-amber .stat-value { color: var(--amber); }
.stat-card.accent-red .stat-value { color: var(--red); }

/* ── Panneaux ───────────────────────────────────────────────────────── */
.panel-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
@media (max-width: 860px) { .panel-row { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}
.panel-head h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.02em;
}
.panel-hint { font-size: 10px; color: var(--text-faint); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  text-align: left;
  color: var(--text-faint);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}
.data-table tbody tr:hover { background: var(--line-soft); cursor: pointer; }
.data-table td.num { font-variant-numeric: tabular-nums; }
.rank-cell { color: var(--text-faint); }

.badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
}
.badge-ok { background: rgba(95, 216, 143, 0.12); color: var(--green); }
.badge-banned { background: rgba(234, 90, 90, 0.14); color: var(--red); }

/* ── Barres (répartition vaisseaux) ───────────────────────────────────── */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row .bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.bar-track {
  height: 6px;
  background: var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }

/* ── Onglet Pilotes ─────────────────────────────────────────────────── */
.players-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
#player-search {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 3px;
  font-size: 12px;
  outline: none;
}
#player-search:focus { border-color: var(--cyan-dim); }
#player-sort {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 12px;
}

#players-table { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 4px; }
#players-table thead th { padding-left: 14px; }
#players-table td:first-child { padding-left: 14px; }

.pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-dim);
}
.pager button {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager button.active { color: var(--cyan); border-color: var(--cyan-dim); }

/* ── Onglet Économie ────────────────────────────────────────────────── */
.economy-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--line-soft); }
.chip.active { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(79, 214, 232, 0.08); }

#economy-search {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 12px;
  outline: none;
  min-width: 220px;
}

.economy-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin: 0 0 16px;
  line-height: 1.6;
}
.hl-amber { color: var(--amber); }

.economy-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
#economy-table-wrap table.data-table { min-width: 100%; }
#economy-table-wrap td:first-child, #economy-table-wrap th:first-child {
  position: sticky; left: 0; background: var(--bg-panel); padding-left: 14px; white-space: nowrap;
}

.field-cell { display: flex; align-items: center; gap: 4px; }
.field-input {
  width: 90px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--text);
  padding: 5px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font-mono);
  outline: none;
}
.field-input:focus { border-color: var(--cyan-dim); }
.field-input.overridden { border-color: var(--amber-dim); color: var(--amber); }
.field-input.dirty { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan-dim) inset; }

.hl-cyan { color: var(--cyan); }

.economy-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.economy-actions-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#economy-apply-btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.economy-download-btn { width: auto; padding: 8px 14px; }
.economy-pending-status { font-size: 11px; color: var(--cyan); }
.economy-pending-status.saved { color: var(--green); }
.economy-pending-status.error { color: var(--red); }
.reset-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  visibility: hidden;
}
.field-cell:hover .reset-btn.show, .reset-btn.show { visibility: visible; }
.reset-btn:hover { color: var(--red); }
.field-empty { color: var(--text-faint); font-size: 11px; }

/* ── Modale ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 11, 0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  width: min(480px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 14px; cursor: pointer;
}
.modal-close:hover { color: var(--text); }

.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.field-row { display: flex; flex-direction: column; gap: 5px; }
.field-row label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.field-row input[type="text"], .field-row input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}
.field-row input:focus { border-color: var(--cyan-dim); }
.field-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline label { font-size: 12px; color: var(--text); text-transform: none; letter-spacing: 0; }

.readonly-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 11px;
  color: var(--text-dim);
}
.readonly-stats b { color: var(--text); }

.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.modal-foot-right { display: flex; align-items: center; gap: 12px; }
.modal-status { font-size: 11px; color: var(--green); }

.btn-primary {
  background: var(--cyan);
  color: #06181c;
  border: none;
  padding: 9px 16px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-danger-outline {
  background: none;
  border: 1px solid var(--red-dim);
  color: var(--red);
  padding: 8px 14px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.btn-danger-outline:hover { background: rgba(234, 90, 90, 0.08); }

.btn-ok-outline {
  background: none;
  border: 1px solid var(--green-dim, #2e7d5b);
  color: var(--green, #4ade80);
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.btn-ok-outline:hover { background: rgba(74, 222, 128, 0.08); }

/* ── V2.2 — Édition inline des stats de colonies ──────────────────────── */
.admin-colony-input {
  background: var(--bg-panel-2, #12161f); border: 1px solid var(--line);
  color: var(--text); border-radius: 3px; padding: 4px 6px; font-size: 12px;
}
.admin-colony-num { text-align: right; }

/* ── Onglet Missions ─────────────────────────────────────────────────── */
.modal-wide { width: min(640px, 100%); }

.field-row select, .field-row textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.field-row select:focus, .field-row textarea:focus { border-color: var(--cyan-dim); }
.field-row textarea { resize: vertical; min-height: 56px; }

.field-block {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field-block-title {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}

.reward-item-row {
  display: grid;
  grid-template-columns: 90px 1fr 70px 28px;
  gap: 8px;
  align-items: center;
}
.reward-item-remove {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 14px;
}
.reward-item-add {
  align-self: flex-start;
}

.mission-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  background: rgba(79, 214, 232, 0.10);
  color: var(--cyan);
  margin-right: 4px;
}
.mission-badge.mission-active { background: rgba(95, 216, 143, 0.12); color: var(--green); }
.mission-badge.mission-inactive { background: rgba(148, 158, 174, 0.12); color: var(--text-dim); }

/* ── Onglet Console ─────────────────────────────────────────────────── */
.console-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#console-search {
  flex: 1;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 12px;
  outline: none;
}
#console-search:focus { border-color: var(--cyan-dim); }
.console-toolbar-actions { display: flex; align-items: center; gap: 14px; }
.console-autoscroll { font-size: 11px; color: var(--text-dim); }
.console-autoscroll input { accent-color: var(--cyan); }

.console-log {
  height: 62vh;
  min-height: 320px;
  overflow-y: auto;
  background: #05070b;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
}
.console-line { white-space: pre-wrap; word-break: break-word; }
.console-time { color: var(--text-faint); margin-right: 8px; }
.console-tag { font-weight: 600; margin-right: 6px; }
.console-msg { color: var(--text); }
.console-line.level-error .console-tag { color: var(--red); }
.console-line.level-error .console-msg { color: #f3a3a3; }
.console-line.level-warning .console-tag { color: var(--amber); }
.console-line.level-success .console-tag { color: var(--green); }
.console-line.level-info .console-tag { color: var(--cyan); }
.console-line.level-special .console-tag { color: #c98af0; }
.console-line.level-default .console-tag { color: var(--text-dim); }
.console-empty { color: var(--text-faint); font-size: 12px; }
.console-status {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 10px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.console-status.connected { background: rgba(95, 216, 143, 0.12); color: var(--green); }
.console-status.disconnected { background: rgba(234, 90, 90, 0.14); color: var(--red); }

/* ── Onglet Carte ────────────────────────────────────────────────────── */
.btn-secondary-outline {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  width: 100%;
}
.btn-secondary-outline:hover { color: var(--text); border-color: var(--cyan-dim); }

.map-layout {
  display: flex;
  gap: 16px;
  height: calc(100vh - 150px);
  min-height: 480px;
}

.map-filters {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  overflow-y: auto;
  position: relative;
}

.map-filter-group { margin-bottom: 20px; }
.map-filter-group:last-child { margin-bottom: 0; }

.map-filter-title {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.map-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.map-check:hover { color: var(--text); }
.map-check input { accent-color: var(--cyan); cursor: pointer; }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-highsec { background: var(--green); }
.dot-lowsec { background: var(--amber); }
.dot-nullsec { background: var(--red); }

.map-legend-hint p {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0;
}

.map-canvas-wrap {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

#map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-edge {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.map-node { cursor: pointer; }
.map-node circle { transition: r 0.1s ease; }
.map-node:hover circle { r: 10; stroke-width: 3.5; }

.map-node-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-dim);
  text-anchor: middle;
  pointer-events: none;
}

.map-tooltip {
  position: absolute;
  z-index: 20;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.map-tooltip-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.map-tooltip-dim { color: var(--text-faint); margin-top: 3px; }

/* ── Connexion Discord & accès de secours ─────────────────────────────── */
.discord-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #5865F2; color: #fff; text-decoration: none;
  padding: 12px 14px; border-radius: 4px; font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em; margin-top: 22px; transition: filter 0.15s;
}
.discord-login-btn:hover { filter: brightness(1.1); }
.emergency-toggle {
  display: block; width: 100%; background: none; border: none;
  color: var(--text-faint); font-size: 11px; margin-top: 14px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.emergency-toggle:hover { color: var(--text-dim); }
#login-form { margin-top: 12px; }

/* ── Identité connectée dans la barre supérieure ──────────────────────── */
.topbar-user { display: flex; align-items: center; gap: 10px; order: 1; margin-left: auto; }
.admin-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); object-fit: cover; background: var(--bg-panel-2);
}
.admin-username { font-size: 12px; color: var(--text-dim); }
.brand-site-link {
  font-size: 10px; color: var(--text-faint); text-decoration: none;
  border: 1px solid var(--line); padding: 2px 8px; border-radius: 10px;
  transition: color 0.15s, border-color 0.15s;
}
.brand-site-link:hover { color: var(--cyan); border-color: var(--cyan-dim); }

/* ── Onglet Thèmes ─────────────────────────────────────────────────────── */
.themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.theme-card {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--bg-panel); cursor: pointer; transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.theme-card:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }
.theme-card.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.theme-card-preview { height: 64px; display: flex; }
.theme-card-preview span { flex: 1; }
.theme-card-body { padding: 10px 12px; }
.theme-card-name { font-family: var(--font-display); font-weight: 600; font-size: 12px; }
.theme-card-tag { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.theme-card-badge {
  position: absolute; top: 8px; right: 8px; font-size: 9px; letter-spacing: 0.05em;
  background: var(--cyan); color: #06181c; padding: 2px 6px; border-radius: 8px; font-weight: 700;
}
.theme-card-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
.theme-card-actions button {
  flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 10px; padding: 6px; border-radius: 3px; cursor: pointer;
}
.theme-card-actions button:hover { color: var(--text); border-color: var(--cyan-dim); }

.theme-editor-form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.theme-vars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.theme-var-field { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; }
.theme-var-field label { font-size: 10px; color: var(--text-dim); }
.theme-var-field input[type=color] {
  width: 30px; height: 22px; border: none; background: none; padding: 0; cursor: pointer;
}
.theme-editor-actions { display: flex; gap: 10px; }
.btn-primary {
  background: var(--cyan); color: #06181c; border: none; padding: 9px 16px;
  border-radius: 3px; font-weight: 600; font-size: 12px; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary {
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  padding: 9px 16px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.btn-secondary:hover { color: var(--text); border-color: var(--cyan-dim); }

/* ── Onglet Administrateurs ───────────────────────────────────────────── */
.admins-add { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); }
.admins-add input {
  flex: 1; background: var(--bg-panel-2); border: 1px solid var(--line); color: var(--text);
  padding: 9px 12px; border-radius: 3px; font-family: var(--font-mono); font-size: 12px;
}
.admin-role-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 8px; letter-spacing: 0.03em;
}
.admin-role-badge.super { background: var(--amber-dim); color: var(--amber); }
.admin-role-badge.admin { background: var(--cyan-dim); color: var(--cyan); }

/* ── Onglet Vaisseaux ────────────────────────────────────────────────── */
.ships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ship-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ship-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ship-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ship-card-thumb-placeholder { font-size: 34px; opacity: 0.3; }
.ship-card > .ship-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.ship-card-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text); }
.ship-card-meta { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.ship-card-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); margin: 2px 0 4px; }
.ship-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ship-upload-btn {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; width: auto; padding: 7px 10px; font-size: 11px;
}
.ship-card-status { font-size: 10px; min-height: 12px; color: var(--text-faint); }
.ship-card-status.saved { color: var(--green); }
.ship-card-status.error { color: var(--red); }

/* ── Onglet Annonce importante (V3.0.0) ───────────────────────────────── */
.announcement-form-hint { font-size: 11px; color: var(--text-faint); }

/* ── Effets légers thèmes "Arcade Néon" / "Rétro-Arcade Pixel Art" ───────
   Volontairement discrets ici (juste le logo) pour ne pas nuire à la
   lisibilité du panel d'administration. Effets complets côté site joueur. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
html[data-theme="arcade-neon"] .admin-brand,
html[data-theme="arcade-neon"] .brand {
  text-shadow: 0 0 6px var(--amber), 0 0 16px var(--red);
  animation: admin-arcade-flicker 3.2s infinite;
}
@keyframes admin-arcade-flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; }
  20%, 22%, 79% { opacity: 0.55; }
}
html[data-theme="retro-arcade-pixel"] .admin-brand,
html[data-theme="retro-arcade-pixel"] .brand {
  font-family: 'Press Start 2P', monospace !important; font-size: 11px !important;
  text-shadow: 2px 2px 0 var(--red);
}

/* ── Pièces de vaisseaux de corporation : restriction de module (V3.3.1) ── */
.checkbox-inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 8px 0; font-size: 13px; color: var(--text-dim, #ccc);
  cursor: pointer; user-select: none;
}
.checkbox-inline input[type="checkbox"] { cursor: pointer; }


/* V3.10.0 — Signal d'état du serveur (🟢 / 🔴) dans l'en-tête de la console */
.server-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
}
.server-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.server-status.online { border-color: rgba(51,204,102,0.45); color: #6ee7a0; }
.server-status.online .server-status-dot { background: #33cc66; box-shadow: 0 0 8px rgba(51,204,102,0.9); }
.server-status.offline { border-color: rgba(255,68,68,0.45); color: #ff8a8a; }
.server-status.offline .server-status-dot { background: #ff4444; box-shadow: 0 0 8px rgba(255,68,68,0.85); }

/* ── V3.11.0 — Inspecteur de système & gestion des POI sur la carte ───────── */
.map-canvas-wrap { position: relative; }

.map-context {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.map-context-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.map-context button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.map-context button:hover { background: var(--bg-panel-2); color: var(--text); }

.map-inspector {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--line);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.45);
}
.map-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.map-inspector-head h3 { margin: 0; font-family: var(--font-display); font-size: 14px; }
.map-inspector-body { padding: 14px 16px 22px; overflow-y: auto; flex: 1; }

.insp-section { margin-bottom: 20px; }
.insp-section-title {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-soft);
}
.insp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 4px 0;
}
.insp-label { color: var(--text-faint); }
.insp-value { color: var(--text); text-align: right; }
.insp-dim { color: var(--text-faint); }
.insp-desc { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; font-style: italic; }

.insp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.insp-chip {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
}
.insp-chip-link { cursor: pointer; }
.insp-chip-link:hover { border-color: var(--cyan); color: var(--cyan); }

.insp-poi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--bg-panel-2);
}
.insp-poi-missing { border-color: var(--red-dim); }
.insp-poi-name { font-size: 12px; color: var(--text); }
.insp-poi-desc { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.insp-poi-actions { display: flex; gap: 5px; flex-shrink: 0; }

.insp-tag {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--text-faint);
}
.insp-tag-custom { border-color: var(--amber-dim); color: var(--amber); }

.insp-add-poi { display: flex; gap: 6px; margin-top: 10px; }
.insp-add-poi select { flex: 1; min-width: 0; }

.btn-xs { padding: 4px 9px !important; font-size: 11px !important; }

/* Champs des modales POI (label au-dessus du champ) */
.form-row { display: flex; flex-direction: column; gap: 5px; }
.form-row > span {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row textarea,
.form-row select,
.insp-add-poi select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { border-color: var(--cyan-dim); }
.form-row textarea { resize: vertical; }

/* ══════════════════════════════════════════════════════════════════════════
   🧊 Atelier de modélisation 3D (V3.37.0) — onglet « Modèle 3D »
   Colonne d'outils fixée au bord DROIT de la fenêtre de travail, viewport
   à gauche, inspecteur et arborescence en dessous.
   ══════════════════════════════════════════════════════════════════════════ */
.m3d-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 10px 0 6px;
}
.m3d-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.m3d-field-sm { min-width: 140px; }
.m3d-field > span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.m3d-field select, .m3d-field input {
  background: var(--bg-input, #0b131c); border: 1px solid var(--line);
  color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.m3d-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* 🎯 V3.81.0 — bouton d'aperçu du montage allumé quand le mode est actif :
   les boutons X/Y/Z ne visent plus la géométrie mais l'orientation de pose. */
#m3d-mount-preview.active { color: var(--accent); border-color: var(--accent); }
/* 🔁 Tourelle pivotante (allumé) vs arme fixe (éteint) : l'état se lit d'un
   coup d'œil dans la liste des armes en cours de réglage. */
#m3d-mount-aim.active { color: var(--cyan); border-color: var(--cyan-dim); }

.m3d-workspace { display: flex; gap: 12px; align-items: stretch; }
.m3d-viewport {
  position: relative; flex: 1 1 auto; min-height: 520px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #070c13;
}
#m3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Spéc. correctifs § 3 — barre haute de l'interface 3D : les boutons de phase
   et la ligne d'information vivent dans le MÊME conteneur en flux. Quel que
   soit le redimensionnement de la fenêtre, la ligne d'information passe sous
   les boutons au lieu de les recouvrir : White box / Grey box / Fly box
   restent toujours visibles et cliquables. */
.m3d-hud-top {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  /* V3.76.0 (correctif § 8) — colonne, et non plus ligne : quelle que soit la
     taille de la fenêtre, la ligne d'information s'empile SOUS les boutons de
     phase au lieu de venir se poser dessus. White box / Grey box / Fly box
     restent visibles et cliquables même en plein écran. */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; pointer-events: none;
}
.m3d-phase-bar { display: flex; gap: 6px; flex: 0 0 auto; z-index: 5; pointer-events: auto; flex-wrap: wrap; }
.m3d-phase {
  background: rgba(8, 16, 24, 0.82); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.m3d-phase.active { color: var(--accent); border-color: var(--accent); }
.m3d-readout {
  flex: 0 0 auto; max-width: 100%; z-index: 2; pointer-events: none;
  max-height: 40%; overflow: hidden;
  background: rgba(8, 16, 24, 0.82); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
}
.m3d-help {
  position: absolute; bottom: 10px; left: 12px; right: 12px; z-index: 3;
  font-size: 11px; color: var(--text-dim); opacity: 0.75; pointer-events: none;
}

/* Colonne Paint 3D — bord GAUCHE (spéc. correctifs § 5) */
.m3d-paint { order: -1; flex: 0 0 196px; }
.m3d-brush-readout {
  font-size: 11px; opacity: 0.75; text-align: center; padding: 2px 0 4px;
}
.m3d-paint input[type="range"] { width: 100%; }

/* Colonne d'outils — bord droit */
.m3d-tools {
  flex: 0 0 208px; display: flex; flex-direction: column; gap: 12px;
  max-height: 640px; overflow-y: auto; padding-right: 2px;
}
.m3d-tool-group {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: var(--bg-panel, #0d1620);
}
.m3d-tool-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 2px;
}
.m3d-tools button {
  text-align: left; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  color: var(--text); border-radius: 7px; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
}
.m3d-tools button:hover { border-color: var(--accent); color: var(--accent); }
.m3d-tools button.m3d-danger:hover { border-color: #e05a5a; color: #e05a5a; }
.m3d-tools input[type="color"] {
  width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 7px;
  background: transparent; cursor: pointer; padding: 2px;
}

.m3d-bottom { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.m3d-inspector, .m3d-outliner {
  flex: 1 1 320px; border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: var(--bg-panel, #0d1620);
}
.m3d-inspector-body, .m3d-outliner-body { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.m3d-insp-title { font-size: 13px; color: var(--accent); margin-bottom: 8px; }
.m3d-vec { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.m3d-vec > span { flex: 0 0 118px; font-size: 12px; color: var(--text-dim); }
.m3d-vec input {
  flex: 1 1 0; min-width: 0; background: var(--bg-input, #0b131c);
  border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 5px 6px; font-size: 12px;
}
.m3d-checks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.m3d-checks label { display: flex; align-items: center; gap: 6px; }
.m3d-out-item {
  display: flex; justify-content: space-between; gap: 8px; width: 100%;
  background: transparent; border: 1px solid transparent; border-bottom: 1px solid var(--line);
  color: var(--text); padding: 6px 6px; font-size: 12.5px; cursor: pointer; text-align: left;
}
.m3d-out-item:hover { color: var(--accent); }
.m3d-out-item.active { color: var(--accent); border-color: var(--accent); border-radius: 6px; }
.m3d-out-sub { color: var(--text-dim); font-size: 11px; }

@media (max-width: 1100px) {
  .m3d-workspace { flex-direction: column; }
  .m3d-tools { flex: 1 1 auto; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .m3d-tool-group { flex: 1 1 200px; }
}

/* 🎨 Conditions d'obtention des thèmes & effets (V3.43.0) */
.cosmetic-rules-list { display: flex; flex-direction: column; gap: 10px; }
.cosmetic-rule {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.cosmetic-rule-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.cosmetic-rule-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cosmetic-rule-fields label { display: flex; flex-direction: column; gap: 4px; }
.cosmetic-rule-fields label > span { font-size: 11px; color: var(--text-dim); }
.cosmetic-rule-fields input,
.cosmetic-rule-fields select {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
}
.cosmetic-rule-actions { margin-top: 10px; }

/* 🛠️ Console Support du staff (V3.45.0) — onglet Support */
.support-ticket {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.support-ticket.is-open     { border-left-color: var(--amber); }
.support-ticket.is-answered { border-left-color: var(--green); }
.support-ticket.is-closed   { border-left-color: var(--text-dim); opacity: .78; }
.support-ticket-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.support-ticket-head .support-ref { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.support-msg { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.support-msg .support-who { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 2px; }
.support-msg.from-staff  { border-left: 2px solid var(--cyan); padding-left: 8px; }
.support-msg.from-player { border-left: 2px solid var(--amber); padding-left: 8px; }
.support-msg.from-system { color: var(--text-dim); font-style: italic; padding-left: 8px; }
.support-msg img { max-width: 180px; border-radius: 6px; margin-top: 6px; display: block; }
.support-reply { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.support-reply textarea {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 8px;
  font-family: inherit;
  font-size: 12.5px;
  min-height: 68px;
  resize: vertical;
}
.support-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.support-actions .support-msg-status { font-size: 11px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   🎯 Objectifs sur mesure — fenêtre élargie (V3.50.0)
   La fenêtre par défaut (480px) était bien trop étroite pour l'éditeur
   d'évènements : sélecteurs tronqués, libellés coupés, filtres illisibles.
   Ici : largeur confortable, retour à la ligne systématique, et repli en une
   seule colonne sur les petits écrans.
   ═══════════════════════════════════════════════════════════════════════════ */
.objective-modal-wide { width: min(940px, 100%); max-height: 90vh; }

.objective-modal-wide .modal-body { gap: 12px; }

/* Tous les textes de la fenêtre reviennent à la ligne au lieu de déborder. */
.objective-modal-wide,
.objective-modal-wide .economy-hint,
.objective-modal-wide td,
.objective-modal-wide th {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.objective-modal-wide select,
.objective-modal-wide input[type="text"] { max-width: 100%; }

.objective-form-grid {
  display: flex;
  flex-wrap: wrap;           /* ← retour à la ligne automatique */
  gap: 12px;
}
.objective-form-grid > label { display: flex; flex-direction: column; gap: 5px; }
.obj-col-emoji { flex: 0 0 90px; }
.obj-col-name  { flex: 1 1 320px; }
.obj-col-half  { flex: 1 1 340px; }

.objective-hint { margin: 0; font-size: 11px; line-height: 1.5; }

.objective-subhead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.objective-subhead h2 { margin: 0; font-size: 12px; }

/* Une ligne de filtre : clé + valeur + suppression, repliable. */
.objective-filter-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 10px; margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.objective-filter-row label { flex: 1 1 240px; display: flex; flex-direction: column; gap: 5px; }
.objective-filter-row .objective-filter-del { flex: 0 0 auto; }
.objective-filter-empty { font-size: 11px; color: var(--text-faint); padding: 4px 0; }

.objective-preview {
  padding: 10px 12px;
  border-left: 2px solid var(--cyan-dim);
  background: var(--bg);
  font-size: 12px; line-height: 1.6;
  border-radius: 0 4px 4px 0;
}

.objective-actions { margin-top: 4px; }
.objective-table td { vertical-align: top; }

@media (max-width: 720px) {
  .obj-col-emoji, .obj-col-name, .obj-col-half { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🛍️ Boutique (V3.62.0) — onglet d'administration
   ══════════════════════════════════════════════════════════════════════════ */
.switch-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 8px 0;
}
.switch-line input[type="checkbox"] { width: auto; margin: 0; }

.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.inline-form input { flex: 1 1 140px; }

.boutique-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}
.boutique-media-preview img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--line, #23241f);
}
.boutique-media-preview audio { height: 32px; }
.boutique-media-preview .media-tag {
  font-size: 10px;
  opacity: 0.7;
  display: block;
  margin-bottom: 3px;
}


/* Correctif V3.63.0 — plusieurs boutons d'action dans une même cellule.
   .btn-secondary-outline est en width:100% (pensé pour un bouton seul dans sa
   colonne). Deux boutons côte à côte réclamaient donc 200 % de la cellule :
   le second débordait hors du panneau (visible sur l'onglet 🟣 Twitch, colonne
   d'actions des récompenses de chaîne). Ce conteneur les remet en largeur
   automatique et les répartit proprement. */
.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.table-actions .btn-secondary-outline,
.table-actions .btn-secondary,
.table-actions .btn-danger-outline {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── V3.68.0 — sous-sections de l'atelier « Modèle 3D » ──────────────────
   Vaisseaux jouables, vaisseaux NPC (combat 3D) et modules de flotte
   partagent la même interface : seules la cible d'affectation et la liste
   des modèles enregistrés changent. */
.m3d-subtabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.m3d-subtab {
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: rgba(28, 44, 64, 0.6); border: 1px solid rgba(90, 150, 210, 0.28);
  color: #c3d5e6; font-size: 0.88rem;
}
.m3d-subtab:hover { border-color: rgba(120, 190, 255, 0.55); color: #eaf5ff; }
.m3d-subtab.active {
  background: rgba(45, 84, 124, 0.85); border-color: #6fd0ff; color: #f2fbff;
  box-shadow: 0 0 12px rgba(80, 190, 255, 0.28);
}
#m3d-section-hint { margin-bottom: 12px; }

/* ── Patch Notes : rendu Markdown lisible (V3.69.1) ───────────────────────
   Avant : le .md était injecté tel quel dans un <pre>, le panneau affichait
   donc la syntaxe brute (« # », « ** », « - ») au lieu du texte mis en forme. */
.patchnote-body { line-height: 1.6; font-size: 14px; }
.patchnote-body h1 { font-size: 20px; margin: 4px 0 12px; }
.patchnote-body h2 { font-size: 17px; margin: 18px 0 8px; }
.patchnote-body h3 { font-size: 15px; margin: 14px 0 6px; opacity: .95; }
.patchnote-body p { margin: 8px 0; }
.patchnote-body ul { margin: 8px 0 8px 20px; padding: 0; }
.patchnote-body li { margin: 3px 0; }
.patchnote-body hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 16px 0; }
.patchnote-body code {
  background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
}
.patchnote-body pre {
  background: rgba(255,255,255,.06); padding: 10px 12px; border-radius: 6px;
  overflow-x: auto; white-space: pre-wrap;
}
.patchnote-body pre code { background: none; padding: 0; }
.patchnote-body a { color: #6fd0ff; }

/* 🛰️ V3.86.0 — champ d'URL de l'overlay OBS. En lecture seule mais
   sélectionnable : quand l'accès au presse-papiers est refusé par le
   navigateur (page non sécurisée, permission), la copie manuelle doit rester
   possible — sinon le bouton « Copier » devient un cul-de-sac. */
.players-toolbar input[type="text"][id^="overlay-url-"] {
  background: var(--bg-panel-2, #141924);
  border: 1px solid var(--line, #232a38);
  color: var(--text-dim, #7c8798);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 7px 9px;
  border-radius: var(--radius-sm, 2px);
  user-select: all;
}


/* ══════════════════════════════════════════════════════════════════════════
   ⚔️ Panneau « Armes du jeu » — plusieurs armes pour un seul modèle 3D.
   Replié il ne montre que le compte ; déplié il montre les DIX-HUIT armes,
   groupées par famille. C'est ce que le menu déroulant ne savait pas faire :
   il en cachait la moitié et n'en acceptait qu'une.
   ══════════════════════════════════════════════════════════════════════════ */
.m3d-armes {
  border: 1px solid var(--line, #2a3a44);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 220px;
}
.m3d-armes > summary {
  cursor: pointer; padding: 6px 10px; font-size: 12px;
  list-style: none; user-select: none;
}
.m3d-armes > summary::-webkit-details-marker { display: none; }
.m3d-armes > summary::before { content: '▸ '; opacity: .6; }
.m3d-armes[open] > summary::before { content: '▾ '; }
.m3d-armes[open] > summary { border-bottom: 1px solid var(--line, #2a3a44); }

/* Les familles en colonnes : les dix-huit armes tiennent d'un coup d'œil,
   sans défilement, ce qui était tout l'objet du changement. */
.m3d-armes-corps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; padding: 10px; max-height: 340px; overflow-y: auto;
}
.m3d-arme-groupe {
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}
.m3d-arme, .m3d-arme-famille {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer;
}
.m3d-arme-famille {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  opacity: .7; padding-bottom: 3px; margin-bottom: 2px;
  border-bottom: 1px dashed var(--line, #2a3a44);
}
.m3d-arme input, .m3d-arme-famille input { cursor: pointer; }
.m3d-armes-note {
  margin: 0; padding: 8px 10px; font-size: 11px; line-height: 1.45;
  opacity: .7; border-top: 1px solid var(--line, #2a3a44);
}

/* 📚 Bibliothèque d'imports rangée par catégorie de vaisseau puis par taille.
   Les en-têtes ne sont pas décoratifs : sur une centaine de fichiers, ce sont
   eux qui remplacent la fouille par une lecture. */
.m3d-lib-groupe {
  margin: 18px 0 6px; padding: 0 0 4px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line, #2a3a44);
  display: flex; align-items: baseline; gap: 8px;
}
.m3d-lib-groupe:first-child { margin-top: 4px; }
.m3d-lib-groupe span {
  font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .55;
}
.m3d-lib-sous {
  margin: 10px 0 4px; font-size: 11px; opacity: .65;
}