/* ===== Albion Flipper — Design System =====
   PERF: 1 seule famille Google Fonts (Inter) au lieu de 3.
   Cinzel et JetBrains Mono remplacees par fallbacks systeme :
   - serif natif (Georgia, Times) pour les titres "fantasy"
   - mono natif (Menlo, Consolas) pour les chiffres */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg: #0a0e1a;
  --bg-glow: radial-gradient(ellipse at top, rgba(232, 176, 74, 0.04), transparent 60%);
  --surface: #131826;
  --surface-2: #1a2033;
  --surface-3: #232a42;
  --border: #1f2940;
  --border-strong: #2a3450;

  /* Albion gold (signature) */
  --gold: #e8b04a;
  --gold-soft: #c99a3e;
  --gold-bright: #f5c668;
  --gold-glow: rgba(232, 176, 74, 0.18);
  --gold-tint: rgba(232, 176, 74, 0.08);

  /* Text */
  --text: #e8eaed;
  --text-muted: #8a92a8;
  --text-dim: #5d6377;

  /* Status colors */
  --emerald: #2d8659;
  --emerald-light: #4caf83;
  --bordeaux: #b32525;
  --bordeaux-light: #e84545;
  --epic: #9b7dd5;
  --legendary: #e8b04a;
  --blue: #4a8de8;
  --blue-light: #6bb1ff;
  --warning: #d29922;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Transitions */
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 0 1px var(--gold), 0 0 28px rgba(232, 176, 74, 0.18);
  --shadow-gold-soft: 0 0 0 1px rgba(232, 176, 74, 0.4), 0 4px 16px rgba(232, 176, 74, 0.1);

  /* Fonts (PERF: pas de Cinzel/JetBrains, on garde Inter + system fonts) */
  --f-display: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;
}

/* PERF: respecte le pref OS "reduce motion" (mobile, accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--gold-glow); color: var(--text); }

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

/* ===== APP SHELL : sidebar a gauche + contenu a droite ===== */
.app-shell {
  padding-left: 60px; /* place pour la sidebar fine */
  transition: padding-left 220ms var(--ease-out);
}
/* Sidebar etendue (controle par le bouton toggle, plus par hover auto) */
.app-shell.sb-expanded {
  padding-left: 215px;
}

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 60px;
  background: #0f1422;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0 16px;
  z-index: 90;
  transition: width 220ms var(--ease-out);
  overflow: hidden;
  box-shadow: 2px 0 12px rgba(0,0,0,0.3);
}
.sidebar.expanded {
  width: 215px;
}
.sb-logo {
  display: flex;
  align-items: center;
  /* gap reduit pour que "Albion Flipper" s'aligne avec les labels des items nav
     (icone logo 26px > icone nav 20px, donc on compense avec un gap plus petit) */
  gap: 6px;
  padding: 0 17px 14px;
  margin: 0 0 8px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.sb-logo svg { flex-shrink: 0; width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(232, 176, 74, 0.3)); }
.sb-brand-name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-brand-name { opacity: 1; width: auto; transition-delay: 60ms; }

.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  flex: 1;
}
.sb-divider {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  padding: 12px 17px 6px;
  white-space: nowrap;
  overflow: hidden;
  height: 28px;
  display: flex;
  align-items: end;
}
.sb-divider span {
  opacity: 0;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-divider span { opacity: 1; transition-delay: 60ms; }
.sb-divider::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--border-strong);
  position: absolute;
  margin-left: 16px;
  margin-top: 14px;
  opacity: 1;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-divider::before { opacity: 0; }
.sb-item {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  opacity: 0.7;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  padding-left: 17px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}
.sb-item:focus { outline: none; }
.sb-item svg { flex-shrink: 0; width: 20px; height: 20px; stroke-width: 2; display: block; }
.sb-item .sb-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-item .sb-label { opacity: 1; width: auto; transition-delay: 60ms; }
.sb-item:hover {
  background: var(--surface-2);
  opacity: 1;
  filter: none; transform: none; box-shadow: none;
}
.sb-item.active {
  background: var(--gold-tint);
  color: var(--gold);
  opacity: 1;
}
.sb-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

.sb-bottom {
  padding: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* Bouton toggle reduire/agrandir */
.sb-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 17px;
  height: 36px;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.sb-toggle:focus { outline: none; }
.sb-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sb-toggle .sb-toggle-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 220ms var(--ease-out); }
.sb-toggle:hover { background: var(--surface-2); color: var(--text); transform: none; box-shadow: none; filter: none; }
.sb-toggle .sb-toggle-icon {
  flex-shrink: 0;
  transition: transform 220ms var(--ease-out);
}
.sidebar.expanded .sb-toggle .sb-toggle-icon { transform: rotate(180deg); }
.sb-toggle .sb-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-toggle .sb-label { opacity: 1; width: auto; transition-delay: 60ms; }
.sb-pseudo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 17px;
  height: 40px;
  cursor: pointer;
  border-radius: var(--r-md);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  transition: background 120ms ease, padding 220ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
}
/* Sidebar collapsed : centrer l'avatar (pas de padding) */
.sidebar:not(.expanded) .sb-pseudo {
  padding: 0;
  justify-content: center;
}
.sb-pseudo svg { width: 20px; height: 20px; flex-shrink: 0; }
.sb-pseudo:hover { background: var(--surface-2); }
.sb-pseudo .sb-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}
.sidebar.expanded .sb-pseudo .sb-label { opacity: 1; width: auto; transition-delay: 60ms; }

/* Header : padding symetrique haut/bas, contenu centre */
header {
  padding: 14px 0 10px !important;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(19, 24, 38, 0.96) 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Le contenu du header s'aligne pile avec le bord de la sidebar (pas de padding-left) */
header .compact-controls,
header .header-top {
  padding-left: 14px;
  padding-right: 56px;  /* laisse la place au bouton toggle (26+14 + safety) */
}

/* ============================================
   HEADER COLLAPSE/EXPAND
   ============================================ */
header.hdr-collapsed .compact-controls,
header.hdr-collapsed .header-top {
  display: none !important;
}
header.hdr-collapsed {
  padding: 8px 0 !important;
}

/* Bouton toggle - centre verticalement a droite */
.hdr-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  z-index: 5;
}
.hdr-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
}
.hdr-toggle svg {
  transition: transform 200ms ease;
}
header.hdr-collapsed .hdr-toggle svg {
  transform: rotate(180deg);
}
/* Badge "Filtres cachés" quand collapsed */
header.hdr-collapsed::before {
  content: "Filtres cachés";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
header > * {
  max-width: 1400px;
  margin-left: 0;
  margin-right: auto;
}
/* Cacher le status "X flips · dernier scan" — info redondante avec MAJ */
header .status { display: none !important; }
/* Le header (filtres, recherche, scanner) n'est utile QUE sur l'onglet Marche.
   On le cache sur les autres onglets (Plan, Comparateur, Top villes, Traducteur). */
body:not(.tab-market) > header { display: none; }

/* ===== Header compact : tout centre au milieu ===== */
.compact-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Group de selects à gauche */
.compact-controls > .hdr-select {
  flex: 0 0 auto;
}

/* Search au milieu (prend tout l'espace dispo) */
.compact-controls .hdr-search {
  flex: 1 1 240px;
  max-width: 480px;
  margin: 0 auto;
}

/* Right group (view-toggle + filtres + maj) */
.compact-controls > .hdr-view,
.compact-controls > .hdr-filters,
.compact-controls > #manualScanBtn {
  flex: 0 0 auto;
}

/* Sur petit ecran, on autorise le wrap */
@media (max-width: 1100px) {
  .compact-controls { flex-wrap: wrap; }
  .compact-controls .hdr-search { flex: 1 1 100%; max-width: none; margin: 0; order: -1; }
}
.hdr-select {
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  font-weight: 500;
}
.hdr-select:hover { border-color: var(--gold); }
.hdr-search {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  position: relative;
  display: flex;
  align-items: center;
}
.hdr-search svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.hdr-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  font-size: 13px;
}
.hdr-view {
  height: 36px;
  padding: 2px;
}
.hdr-view .vt-btn { padding: 0 14px; font-size: 12.5px; }

/* Bouton "Filtres" qui ouvre le drawer */
.hdr-filters {
  position: relative;
}
.hdr-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 120ms ease, color 120ms ease;
}
.hdr-filters-btn::-webkit-details-marker { display: none; }
.hdr-filters-btn:hover { border-color: var(--gold); color: var(--gold); }
.hdr-filters[open] .hdr-filters-btn { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); }
.hdr-filters-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 100;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInUp 200ms var(--ease-out);
}
.adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.adv-row label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  min-width: 100px;
}
.adv-row select,
.adv-row input {
  flex: 1;
  height: 32px;
  font-size: 12.5px;
}
.adv-row input[type="number"] { max-width: 80px; }

.hdr-scan { height: 36px; padding: 0 18px; font-size: 13px; }

/* Bouton "MAJ il y a Xmin" - tres discret, juste de l'info */
.hdr-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: var(--r-md);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
  white-space: nowrap;
}
.hdr-refresh:hover {
  color: var(--gold);
  background: var(--gold-tint);
}
.hdr-refresh svg { opacity: 0.6; }
.hdr-refresh:hover svg { opacity: 1; transform: rotate(90deg); transition: transform 250ms ease; }

/* Status sous le header (si rempli) - discret */
.status:empty { display: none; }
header .status {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}
header .status .ok { color: var(--emerald-light); }

/* Tab content : container max-width centre */
.tab-content > main,
.tab-content > div,
.tab-content > section {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== PADDING-TOP UNIFIE : aération généreuse en haut de chaque onglet ===== */
/* Le contenu doit visuellement respirer et tomber au milieu de l'ecran */
#marketTab {
  padding: 64px 24px 80px;
}
#marketTab table { max-width: 1400px; margin: 0 auto; }

#planContent {
  padding: 64px 28px 80px;
}

/* Onglets sans header : padding-top genereux pour aerer le haut */
#packageTab > div,
#topCitiesTab > div,
#equivalentsTab > div,
#translatorTab > div,
#splitTab > div {
  padding: 80px 28px 80px;
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Animations globales ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 176, 74, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 176, 74, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes goldShine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ===== HEADER =====
   Note: header n'est PLUS sticky. Sinon il rentrait en conflit avec le
   <thead> sticky du tableau (deux elements sticky empiles avec un --header-h
   dynamique = positionnement bancal au scroll). Le user a la place voit le
   header en haut de page, et quand il scroll, seul le <thead> du tableau
   reste colle en haut. */
header {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(19, 24, 38, 0.96) 100%);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px 14px;
  box-shadow: var(--shadow-sm);
  contain: layout style;
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: 0.35;
}

/* Brand / logo */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
.brand-mark {
  filter: drop-shadow(0 2px 6px rgba(232, 176, 74, 0.25));
  transition: filter var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.brand:hover .brand-mark { filter: drop-shadow(0 3px 10px rgba(232, 176, 74, 0.45)); transform: rotate(-3deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-tag {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 3px;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.control { display: flex; flex-direction: column; gap: 5px; }
.control label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* Form controls */
select, input, button, textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 11px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
select:hover, input:hover { border-color: var(--border-strong); }
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}
select { cursor: pointer; }

button {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 50%, var(--gold-soft));
  color: #1a1208;
  border: none;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 18px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  /* Centrage propre des icones SVG inline + texte */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
}
button > svg { flex-shrink: 0; }
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(0.92); }
button:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: wait;
  filter: none;
  transform: none;
  box-shadow: none;
}

.status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.status .ok { color: var(--emerald-light); }

/* ===== MAIN ===== */
/* PERF: pas d'animation au mount, ca lag sur switch d'onglet */
main { padding: 18px 28px; }

/* ===== TABLE ===== */
table { width: 100%; border-collapse: collapse; }
th {
  /* fond opaque solide (pas de transparence) pour eviter que les lignes scrollent par-dessus */
  background: #131826;
  color: var(--text-muted);
  text-align: left;
  padding: 11px 13px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  border-bottom: 2px solid var(--border-strong);
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0; /* colle directement en haut de la viewport quand on scroll */
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: color var(--t-fast) var(--ease);
}
th:hover { color: var(--gold); }
th.sorted, th.sorted-asc { color: var(--gold); }
th.sorted::after  { content: " ▼"; color: var(--gold); }
th.sorted-asc::after { content: " ▲"; color: var(--gold); }
td {
  padding: 7px 13px;
  border-bottom: 1px solid var(--border);
}
tr { cursor: pointer; transition: background-color 100ms ease; }
/* Hover row : feedback subtil pour suivre la ligne */
tbody tr:hover td {
  background: rgba(232, 176, 74, 0.04);
}
tr.copied td {
  background: rgba(45, 134, 89, 0.18) !important;
  animation: fadeIn var(--t-base) var(--ease-out);
}

/* Row HOT supprimee : pas de highlight special par ROI */

th.num { text-align: right; }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 12.5px; }

/* PROFIT : plus gros, gold qui ressort */
td.profit {
  color: var(--gold-bright);
  font-weight: 800;
  font-size: 14.5px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* ROI : couleurs nettes, sans gradient background (qui creait des effets bizarres) */
td.roi {
  font-weight: 800;
  font-size: 13px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
td.roi-bad   { color: var(--text-muted); }
td.roi-meh   { color: var(--gold); }
td.roi-good  { color: #6fe0a3; }
td.roi-great { color: #44e8a3; }

/* Cellule "Item" : icone copier discrete a droite (apparait au hover ligne) */
#marketTab tbody tr td.item-cell { position: relative; padding-right: 30px; }
.copy-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  background: transparent;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  pointer-events: none;
}
#marketTab tbody tr:hover td.item-cell .copy-hint {
  opacity: 1;
  color: var(--gold);
  background: rgba(232, 176, 74, 0.1);
}

/* Indicateur fantome : juste une icone subtle (alert-triangle), pas de texte */
.phantom-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--warning);
  opacity: 0.85;
  cursor: help;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.phantom-dot:hover { opacity: 1; transform: scale(1.15); }
/* Ligne entiere legerement attenuee si l'item est fantome (sans masquer) */
#marketTab tbody tr td.item-cell.is-phantom .item-name-text { color: var(--text-muted); }

/* Star/favorites */
.star {
  cursor: pointer;
  user-select: none;
  opacity: 0.3;
  display: inline-flex;
  vertical-align: -2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.star.on { opacity: 1; color: var(--gold); }
.star.on svg { fill: var(--gold); }
.star:hover { opacity: 0.85; transform: scale(1.2); }
.star svg { width: 14px; height: 14px; }

/* ===== Compteur "Je flippe" ===== */
.flip-count {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--warning);
  background: rgba(210, 153, 34, 0.12);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  white-space: nowrap;
  cursor: help;
}
.flip-count-empty {
  color: var(--text-dim);
  background: transparent;
  font-size: 13px;
}
.flip-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
}
.flip-btn:hover {
  border-color: var(--warning);
  color: var(--warning);
  background: rgba(210, 153, 34, 0.1);
}
.flip-btn-on {
  background: rgba(210, 153, 34, 0.18);
  border-color: var(--warning);
  color: var(--warning);
}
.flip-btn-on:hover {
  background: rgba(232, 69, 69, 0.15);
  border-color: var(--bordeaux-light);
  color: var(--bordeaux-light);
}
.flip-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Claims (legacy, sera supprime apres flush old data) ===== */
.claim-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 4px 11px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
}
.claim-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
}
.claim-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease);
}
.claim-tag:hover { filter: brightness(1.15); }
.claim-mine { background: rgba(45, 134, 89, 0.22); color: var(--emerald-light); }
.claim-other { background: rgba(179, 37, 37, 0.18); color: var(--bordeaux-light); }
/* Legacy claim highlights : desactives (le systeme claim a ete remplace par "Je flippe").
   On garde les classes au cas ou mais sans style pour eviter la confusion avec row-hot. */
/* tr.row-mine td { background: rgba(45, 134, 89, 0.06); } */
/* tr.row-other td { background: rgba(179, 37, 37, 0.05); } */

/* Pseudo badge */
.pseudo-badge {
  background: var(--gold-tint);
  border: 1px solid rgba(232, 176, 74, 0.3);
  color: var(--gold);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  -webkit-text-fill-color: var(--gold);
  font-family: var(--f-body);
  letter-spacing: 0;
}
.pseudo-badge:hover {
  background: var(--gold-glow);
  border-color: var(--gold);
}

.header-stats {
  display: inline-flex;
  gap: 14px;
  margin-left: 16px;
  font-size: 12px;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  font-family: var(--f-body);
  letter-spacing: 0;
}
.header-stats span { white-space: nowrap; }
.header-stats .stat-mine { color: var(--emerald-light); font-weight: 600; }
.header-stats .stat-other { color: var(--bordeaux-light); font-weight: 600; }
.header-stats .stat-online { color: var(--blue-light); font-weight: 600; }

#pseudoBadge .ic-sm { color: var(--gold); }
#statClaims .ic-sm { color: var(--bordeaux-light); }
#statOnline .ic-sm { color: var(--blue-light); }
.control[title] svg { color: var(--gold); }

/* ===== TOASTS ===== */
#toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--gold);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  box-shadow: var(--shadow-md);
  animation: slideInRight 380ms var(--ease-out), fadeOut 400ms var(--ease) 4.6s forwards;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.toast-claim { border-left-color: var(--bordeaux-light); }
.toast.toast-release { border-left-color: var(--emerald-light); }
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(40px); }
}

/* ===== MODALS (commun) ===== */
#loginModal, #simModal, #compareModal, #notesModal, #addPlanModal, #editFeeModal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#loginModal { display: flex; }
#loginModal.hidden { display: none; }
#simModal, #compareModal, #notesModal { display: none; }
#simModal.show, #compareModal.show, #notesModal.show { display: flex; animation: fadeIn var(--t-base) var(--ease); }

#loginModal .box, #simModal .box, #compareModal .box, #notesModal .box {
  background:
    radial-gradient(ellipse at top, rgba(232, 176, 74, 0.08), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(232, 176, 74, 0.18);
  border-radius: 18px;
  padding: 36px 32px 28px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 60px rgba(232, 176, 74, 0.08);
  animation: modalEnter 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#loginModal .box::before, #simModal .box::before, #compareModal .box::before, #notesModal .box::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.6;
}

#loginModal .box { width: 400px; }
#loginModal h2 {
  font-family: var(--f-display);
  color: var(--gold-bright);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#loginModal p { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
#loginModal .field { margin-bottom: 14px; }
#loginModal label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 6px;
}
#loginModal input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: var(--r-md);
}
#loginModal button { width: 100%; padding: 11px; margin-top: 6px; font-size: 14px; }
#loginError { color: var(--bordeaux-light); font-size: 12px; margin-top: 10px; min-height: 16px; font-weight: 500; }

/* Simulateur */
#simModal .box { width: 480px; max-width: 95vw; padding: 28px; }
#simModal h2 {
  font-family: var(--f-display);
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
#simModal .item-meta { color: var(--text-muted); font-size: 12.5px; margin-bottom: 20px; }
#simModal .qty-row { display: flex; gap: 8px; align-items: end; margin-bottom: 16px; flex-wrap: wrap; }
#simModal .qty-row label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; display: block; margin-bottom: 5px; }
#simModal .qty-row input { padding: 8px 11px; font-size: 14px; width: 100px; }
#simModal .qty-row .preset {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 8px 11px;
  border-radius: var(--r-md);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
#simModal .qty-row .preset:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-tint); }
#simModal .breakdown {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: 13px;
}
#simModal .breakdown .row { display: flex; justify-content: space-between; padding: 5px 0; }
#simModal .breakdown .row .label { color: var(--text-muted); }
#simModal .breakdown .row .val { font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--f-mono); }
#simModal .breakdown .row.total { border-top: 1px solid var(--border-strong); margin-top: 10px; padding-top: 12px; font-size: 14px; }
#simModal .breakdown .row.total .val { color: var(--emerald-light); font-weight: 700; font-size: 17px; }
#simModal .breakdown .row.tax .val { color: var(--bordeaux-light); }
#simModal .breakdown .row.subtotal .val { color: var(--text); }
#simModal .breakdown .row.time .val { color: var(--blue-light); }
#simModal .close-btn, #simModal button.close-btn {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 9px;
  margin-top: 18px;
  width: 100%;
  cursor: pointer;
  border-radius: var(--r-md);
  font-weight: 600;
}
#simModal .close-btn:hover { border-color: var(--gold); color: var(--gold); }

.calc-btn, .compare-btn, .add-to-plan-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-left: 4px;
  transition: all var(--t-base) var(--ease);
}
.calc-btn:hover { border-color: var(--blue-light); color: var(--blue-light); background: rgba(74, 141, 232, 0.08); }
.compare-btn:hover { border-color: var(--warning); color: var(--warning); background: rgba(210, 153, 34, 0.08); }
.add-to-plan-btn:hover { border-color: var(--emerald-light); color: var(--emerald-light); background: rgba(45, 134, 89, 0.1); }

/* ===== TABS ===== */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 28px;
  margin-top: 6px;
  position: relative;
}
.tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 12px 22px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.3px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  text-transform: none;
}
.tab:hover { color: var(--text); transform: none; box-shadow: none; filter: none; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

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

/* ===== PLAN tab ===== */
/* (padding gere plus haut dans la section "PADDING-TOP UNIFIE") */
.plan-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.plan-stat {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.plan-stat::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 250ms ease;
}
.plan-stat:hover {
  border-color: rgba(232, 176, 74, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(232, 176, 74, 0.06);
}
.plan-stat:hover::after { opacity: 1; }
.plan-stat .label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  margin-bottom: 10px;
}
.plan-stat .val {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  letter-spacing: -0.5px;
  line-height: 1;
}
.plan-stat.realized .val {
  background: linear-gradient(135deg, #44e8a3, #2ed98c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-stat.potential .val {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-stat.capital .val {
  background: linear-gradient(135deg, #6cc8ff, #4a9eff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-stat.deployed .val {
  background: linear-gradient(135deg, #ffc56c, #f5a338);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-add {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}
.plan-add .field { display: flex; flex-direction: column; gap: 5px; }
.plan-add label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; }
.plan-add input, .plan-add select { padding: 8px 11px; font-size: 13px; }

/* Plan : cellule item (image + nom + meta) */
.plan-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-item-cell .item-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-right: 0;
}
.plan-item-cell .plan-item-info { display: flex; flex-direction: column; min-width: 0; }
.plan-item-cell .plan-item-info strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}

/* Force le meme layout pour TOUTES les tables Plan (par ville)
   Sinon chaque table calcule sa propre largeur de colonnes selon son contenu
   et les villes ne s'alignent pas visuellement entre elles.
   Width auto pour que la table prenne juste la taille necessaire (pas 100%
   sinon ITEM prendrait tout l'espace restant et creerait un trou enorme). */
#planByCity table {
  table-layout: fixed;
  width: auto;
}
#planByCity th:nth-child(1),  #planByCity td:nth-child(1)  { width: 290px; }  /* Item */
#planByCity th:nth-child(2),  #planByCity td:nth-child(2)  { width: 55px; text-align: center; } /* Qté */
#planByCity th:nth-child(3),  #planByCity td:nth-child(3)  { width: 90px; }   /* Achat /u */
#planByCity th:nth-child(4),  #planByCity td:nth-child(4)  { width: 90px; }   /* Vente /u */
#planByCity th:nth-child(5),  #planByCity td:nth-child(5)  { width: 100px; }  /* Édit (compact) */
#planByCity th:nth-child(6),  #planByCity td:nth-child(6)  { width: 85px; }   /* Profit/u */
#planByCity th:nth-child(7),  #planByCity td:nth-child(7)  { width: 115px; }  /* Profit total */
#planByCity th:nth-child(8),  #planByCity td:nth-child(8)  { width: 85px; }   /* Capital */
#planByCity th:nth-child(9),  #planByCity td:nth-child(9)  { width: 60px; }   /* ROI% */
#planByCity th:nth-child(10), #planByCity td:nth-child(10) { width: 90px; }   /* Notes */
#planByCity th:nth-child(11), #planByCity td:nth-child(11) { width: 95px; }   /* Actions */
/* Force tous les en-tetes du Plan a ne pas wrapper */
#planByCity th { white-space: nowrap; }

/* Cellule item : div wrapper en flex DANS le td (pas display:flex sur td
   sinon ça casse le comportement de table-cell et la hauteur ne s'aligne plus
   avec les autres cellules de la meme ligne) */
.plan-item-td { vertical-align: middle; }
.plan-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.plan-item-cell .item-img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.plan-item-cell .plan-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.plan-item-cell .plan-item-info strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-item-cell .plan-item-info .progress {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 2px;
}

/* Boutons Edit : cote a cote au lieu d'empiles, plus compacts */
#planTable td .edit-buy-btn,
#planTable td .edit-sell-btn {
  display: inline-flex !important;
  width: auto;
  margin: 0 2px 0 0;
  padding: 4px 7px;
  font-size: 10.5px;
  gap: 3px;
  white-space: nowrap;
}
#planTable td .edit-buy-btn svg,
#planTable td .edit-sell-btn svg { width: 11px; height: 11px; }
#planByCity td:nth-child(5) {
  white-space: nowrap;
  text-align: center;
}

/* Numeros bien serres */
#planByCity td.num,
#planByCity td.profit { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
#planByCity input.plan-edit { width: 100%; max-width: 80px; }

#planTable th { position: static !important; cursor: default; }
#planTable td { padding: 11px 13px; }
#planTable .progress { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
#planTable .progress-bar {
  width: 80px;
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
#planTable .progress-bar .fill { height: 100%; background: var(--emerald); transition: width var(--t-slow) var(--ease); }
#planTable .progress-bar .fill.bought { background: var(--blue); }

#planTable button.qty-btn {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 4px 9px;
  margin: 0 1px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: all var(--t-base) var(--ease);
}
#planTable button.qty-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); transform: translateY(-1px); box-shadow: none; filter: none; }
#planTable button.qty-btn.minus:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); background: rgba(232, 69, 69, 0.08); }

#planTable button.del-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  font-family: inherit;
}
#planTable button.del-btn:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); background: rgba(232, 69, 69, 0.08); transform: none; box-shadow: none; filter: none; }

#planTable input.plan-edit {
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  font-family: var(--f-mono);
  text-align: right;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  width: 95px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
#planTable input.plan-edit:hover { border-color: var(--border-strong); background: var(--bg); }
#planTable input.plan-edit:focus { outline: none; border-color: var(--gold); background: var(--bg); box-shadow: 0 0 0 2px var(--gold-tint); }

/* Highlight market row : juste une bordure gauche doree fine, discrete.
   - Pas de bg coloré (sinon ca masque le green flash du "copied")
   - Pas d'animation infinite (perf)
   - 30s max via JS, puis disparait tout seul */
#marketTab tr.market-highlight td:first-child {
  box-shadow: inset 3px 0 0 0 #44e8a3;
}
#marketTab tr.market-highlight td {
  background: rgba(46, 217, 140, 0.10) !important;
  transition: none;
}
/* Hover sur row deja highlight : garde le fond vert (override le hover gold) */
#marketTab tbody tr.market-highlight:hover td {
  background: rgba(46, 217, 140, 0.15) !important;
}

.add-to-plan-btn { padding: 4px 8px; }

.plan-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.plan-subtab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 9px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-base) var(--ease);
}
.plan-subtab.active { color: var(--gold); border-bottom-color: var(--gold); }
.plan-subtab:hover { color: var(--text); transform: none; box-shadow: none; filter: none; }

.plan-row-actions { display: flex; gap: 4px; }
.plan-row-actions button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: all var(--t-base) var(--ease);
}
.plan-row-actions button:hover { border-color: var(--gold); color: var(--gold); transform: none; box-shadow: none; filter: none; }
.plan-row-actions button.complete:hover { border-color: var(--emerald-light); color: var(--emerald-light); }
.plan-row-actions button.del-btn:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); }

.notes-cell {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.notes-cell:hover { color: var(--gold); }
.notes-cell.has-notes { color: var(--warning); }

#notesModal .box { width: 480px; max-width: 95vw; padding: 24px; }
#notesModal h2 {
  font-family: var(--f-display);
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
#notesModal .item-name { color: var(--text-muted); font-size: 12.5px; margin-bottom: 16px; }
#notesTextarea {
  width: 100%;
  min-height: 130px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  resize: vertical;
  font-size: 13px;
  line-height: 1.5;
}

/* ===== Compare modal ===== */
#compareModal .box {
  width: 760px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px;
}
#compareModal h2 {
  font-family: var(--f-display);
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
#compareModal .sub { color: var(--text-muted); font-size: 12.5px; margin-bottom: 20px; }
#compareTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#compareTable th {
  background: var(--bg);
  color: var(--text-muted);
  padding: 9px 11px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  position: static !important;
  cursor: default;
  text-align: left;
}
#compareTable th.num { text-align: right; }
#compareTable td { padding: 10px 11px; border-bottom: 1px solid var(--border); }
#compareTable td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
#compareTable .city { font-weight: 700; }
#compareTable .best-buy { color: var(--emerald-light); font-weight: 800; }
#compareTable .best-sell { color: var(--gold); font-weight: 800; }
#compareTable .best-flip { background: rgba(45, 134, 89, 0.1); }

#compareSummary {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
}
#compareSummary .row { display: flex; justify-content: space-between; padding: 4px 0; }
#compareSummary .label { color: var(--text-muted); }
#compareLoading { padding: 36px; text-align: center; color: var(--text-muted); }

/* ===== Traducteur (cards par famille) ===== */
#translatorTab .tr-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: border-color var(--t-base) var(--ease);
}
#translatorTab .tr-card:hover { border-color: var(--border-strong); }

#translatorTab .tr-fam-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
#translatorTab .tr-fam-en { font-size: 13px; color: var(--text-muted); font-style: italic; margin-bottom: 18px; }
#translatorTab .tr-pickers { display: flex; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
#translatorTab .tr-pick-row { display: flex; align-items: center; gap: 6px; }
#translatorTab .tr-pick-row .label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-right: 6px;
}
#translatorTab .tr-btn {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  min-width: 38px;
  transition: all var(--t-base) var(--ease);
}
#translatorTab .tr-btn:hover { border-color: var(--gold); color: var(--gold); }
#translatorTab .tr-btn.active {
  background: var(--gold-tint);
  color: var(--gold);
  border-color: var(--gold);
}
#translatorTab .tr-btn.disabled { opacity: 0.3; pointer-events: none; }
#translatorTab .tr-detail {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
#translatorTab .tr-detail .info { display: flex; flex-direction: column; gap: 4px; }
#translatorTab .tr-detail .fr-name { font-size: 15px; font-weight: 600; color: var(--text); }
#translatorTab .tr-detail .en-name { font-size: 13px; color: var(--text-muted); font-style: italic; }
#translatorTab .tr-detail .id { font-size: 11px; color: var(--text-dim); font-family: var(--f-mono); margin-top: 4px; }
#translatorTab .tr-link {
  color: var(--blue-light);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-base) var(--ease);
}
#translatorTab .tr-link:hover { border-color: var(--blue-light); background: rgba(74, 141, 232, 0.1); }
#translatorTab .tr-empty {
  color: var(--text-muted);
  padding: 36px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

#packageTab h2,
#topCitiesTab h2,
#equivalentsTab h2,
#translatorTab h2 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ===== Autocomplete custom (recherche fuzzy par mots-clefs) ===== */
.ac-wrap {
  position: relative;
}
.ac-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 4px;
  display: none;
}
.ac-wrap.open .ac-suggestions { display: block; }
.ac-suggestion {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 100ms ease;
}
.ac-suggestion:hover,
.ac-suggestion.ac-active { background: var(--gold-tint); color: var(--gold); }
.ac-suggestion .ac-en {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.ac-empty {
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  font-style: italic;
}

/* ===== Outils (Comparateur, Top villes, Equivalents, Traducteur) ===== */
/* Tout aligne a gauche du wrapper (pas centre par margin auto)
   pour que titre + content soient verticalement alignes */
#packageTab .tools-title,
#packageTab .tools-desc,
#packageTab .pkg-card,
#packageTab #pkgResults,
#topCitiesTab .tools-title,
#topCitiesTab .tools-desc,
#topCitiesTab #topCitiesResult,
#topCitiesTab > div > button,
#equivalentsTab .tools-title,
#equivalentsTab .tools-desc,
#equivalentsTab .pkg-card,
#equivalentsTab #eqResults,
#translatorTab .tools-title,
#translatorTab .tools-desc,
#translatorTab #trToolResult,
#translatorTab > div > div,
#translatorTab > div > hr,
#translatorTab .tr-card {
  max-width: 1100px;
  margin-left: 0;
  margin-right: auto;
}
#planTab .tools-desc,
#packageTab .tools-desc,
#topCitiesTab .tools-desc,
#equivalentsTab .tools-desc,
#translatorTab .tools-desc,
#splitTab .tools-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px 0;
  max-width: 720px;
}
#planTab .tools-title,
#packageTab .tools-title,
#topCitiesTab .tools-title,
#equivalentsTab .tools-title,
#translatorTab .tools-title,
#splitTab .tools-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin: 0 0 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#planTab .tools-title svg,
#packageTab .tools-title svg,
#topCitiesTab .tools-title svg,
#equivalentsTab .tools-title svg,
#translatorTab .tools-title svg,
#splitTab .tools-title svg {
  /* Petit svg dore qui suit le gradient — appliqué au stroke */
  -webkit-text-fill-color: initial;
  color: var(--gold);
  width: 24px;
  height: 24px;
  margin: 0 !important;
}
@media (max-width: 720px) {
  #planTab .tools-title,
  #packageTab .tools-title,
  #topCitiesTab .tools-title,
  #equivalentsTab .tools-title,
  #translatorTab .tools-title {
    font-size: 26px;
  }
}

/* ===== Card unifiee ===== */
.pkg-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* ----- Header simple : titre + actions ----- */
.pkg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.pkg-card-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.pkg-card-title svg { color: var(--gold); }
.pkg-card-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pkg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0 14px;
  height: 36px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-md);
  cursor: pointer;
  filter: none;
  white-space: nowrap;
}
.pkg-action-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
  filter: none; transform: none; box-shadow: none;
}
.pkg-action-btn.pkg-action-save {
  background: var(--gold-tint);
  color: var(--gold);
  border-color: var(--gold);
}
.pkg-action-btn.pkg-action-save:hover { background: var(--gold-glow); }
.pkg-action-btn.pkg-action-icon { width: 36px; padding: 0; justify-content: center; }
.pkg-action-btn.pkg-action-icon:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); background: rgba(232, 69, 69, 0.08); }
.pkg-action-count {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 2px;
}
.pkg-action-count:empty { display: none; }
.pkg-action-btn:hover .pkg-action-count { background: rgba(232, 176, 74, 0.2); color: var(--gold); }

/* Dropdown menu "Charger" */
.pkg-load-menu {
  position: relative;
}
.pkg-load-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  padding: 4px;
  animation: fadeInUp 200ms var(--ease-out);
}
.pkg-load-menu.open .pkg-load-dropdown { display: block; }
.pkg-load-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.pkg-load-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 100ms ease;
}
.pkg-load-row:hover { background: var(--gold-tint); }
.pkg-load-row .pkg-load-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pkg-load-row .pkg-load-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pkg-load-row .pkg-load-info { flex: 1; min-width: 0; overflow: hidden; }
.pkg-load-row .pkg-load-row-del {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  filter: none;
}
.pkg-load-row .pkg-load-row-del:hover {
  background: rgba(232, 69, 69, 0.15);
  color: var(--bordeaux-light);
  border-color: rgba(232, 69, 69, 0.4);
  filter: none; transform: none; box-shadow: none;
}

/* ----- Liste des items ----- */
.pkg-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.pkg-empty-state {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 48px 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.pkg-empty-state .empty-illustration {
  margin: 0 auto 14px;
  display: block;
  opacity: 0.4;
  color: var(--gold);
}

/* Item row : grid avec colonnes a largeur FIXE pour alignement parfait
   image | nom (flex) | tier(70) | ench(60) | quality(130) | equiv(80) | del(36) */
.pkg-item-row {
  display: grid;
  grid-template-columns: 40px 1fr 70px 60px 130px 80px 36px;
  gap: 8px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  transition: border-color 120ms ease;
}
.pkg-item-row:hover { border-color: var(--border-strong); }
.pkg-item-row .pkg-img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface);
  display: block;
}
.pkg-item-row .pkg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pkg-item-row select {
  padding: 6px 10px;
  font-size: 12.5px;
  height: 32px;
  width: 100%;
  background: var(--surface);
}
.pkg-item-row .pkg-row-del {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  filter: none;
}
.pkg-item-row .pkg-row-del:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); background: rgba(232, 69, 69, 0.08); filter: none; transform: none; box-shadow: none; }

/* Checkbox "Equiv. IP" par item : pill propre, label fixe sans badge qui deborde */
.pkg-eq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.pkg-eq-toggle input { margin: 0; cursor: pointer; accent-color: var(--gold); width: 12px; height: 12px; }
.pkg-eq-toggle:hover { border-color: var(--gold); color: var(--text); }
.pkg-eq-toggle.on {
  border-color: var(--gold);
  background: rgba(242, 200, 77, 0.08);
  color: var(--gold);
}
.pkg-eq-label { font-size: 11.5px; }

/* Bandeau scan : strategie segmente + bouton scan, en ligne */
.pkg-scan-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 16px;
  flex-wrap: wrap;
}
.pkg-strategy-seg {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
.pkg-seg-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.pkg-seg-btn:hover:not(.active) { color: var(--text); }
.pkg-seg-btn.active {
  background: linear-gradient(180deg, var(--gold-bright, #FFD56C), var(--gold, #F2C84D));
  color: #1a1208;
  box-shadow: 0 2px 8px rgba(242, 200, 77, 0.25);
}
/* Sur petit ecran : passe en colonne */
@media (max-width: 720px) {
  .pkg-scan-bar { flex-direction: column; align-items: stretch; }
  .pkg-strategy-seg { width: 100%; justify-content: stretch; }
  .pkg-seg-btn { flex: 1; }
}

/* Headline "le meilleur deal" en haut de chaque item resultat */
.pkg-result-headline {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(46, 217, 140, 0.08);
  border: 1px solid rgba(46, 217, 140, 0.3);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.pkg-result-headline-order {
  background: rgba(46, 159, 217, 0.08);
  border-color: rgba(46, 159, 217, 0.3);
}
.pkg-result-headline-empty {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-dim);
  font-style: italic;
}
.pkg-headline-icon { display: flex; color: #44e8a3; }
.pkg-result-headline-order .pkg-headline-icon { color: #6ec3f0; }
.pkg-headline-text strong { font-weight: 800; color: var(--text); }
.pkg-headline-text .pkg-headline-via {
  display: inline-block;
  background: rgba(242, 200, 77, 0.18);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Badge "via T7.1" pour variantes equivalentes */
.pkg-via-variant {
  display: inline-block;
  background: rgba(242, 200, 77, 0.12);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  margin-left: 4px;
  text-transform: none;
}
.pkg-variant-tag {
  background: rgba(242, 200, 77, 0.1);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* Single-city mode : badge mode + meilleure ville highlight */
.pkg-results-mode-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pkg-results-mode-badge strong { color: var(--gold); }
.pkg-results-mode-badge svg { color: var(--gold); }

.pkg-best-city {
  background: linear-gradient(135deg, rgba(242, 200, 77, 0.08), rgba(46, 217, 140, 0.06));
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.pkg-best-city::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(242, 200, 77, 0.15), transparent 50%);
  pointer-events: none;
}
.pkg-best-city-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: #1a1208;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.pkg-best-city-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.pkg-best-city-total {
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
}
.pkg-best-city-total span { font-size: 14px; color: var(--text-muted); font-family: inherit; font-weight: 700; }
.pkg-best-city-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.pkg-extra-cost { color: #ff9d56; font-weight: 700; }

.pkg-cities-rank {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}
.pkg-cities-rank-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 10px;
}
.pkg-rank-table {
  width: 100%;
  border-collapse: collapse;
}
.pkg-rank-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pkg-rank-table th.num { text-align: right; }
.pkg-rank-table td {
  padding: 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.pkg-rank-table td.num {
  text-align: right;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pkg-rank-table tr:last-child td { border-bottom: none; }
.pkg-rank-table .pkg-rank-best {
  background: rgba(242, 200, 77, 0.06);
}
.pkg-rank-table .pkg-rank-best td { color: var(--gold); font-weight: 700; }

.pkg-best-city-details {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
}
.pkg-best-city-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pkg-best-city-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pkg-best-city-item .pkg-img { width: 32px; height: 32px; }
.pkg-best-city-item-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pkg-best-city-item-name strong { font-size: 13px; color: var(--text); }
.pkg-best-city-item-name span { font-size: 11px; color: var(--text-dim); }
.pkg-best-city-item-price {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
.pkg-best-city-item-price > div { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pkg-best-city-item-price .pkg-mode-tag { font-size: 9px; padding: 2px 6px; }
.pkg-best-city-item-price strong { color: var(--text); font-weight: 800; }
.pkg-best-city-item-price .pkg-no-data { color: var(--text-dim); font-style: italic; font-size: 12px; }

/* Bouton "+ Ajouter un item" en pleine largeur (sous la liste) */
.pkg-add-row {
  width: 100%;
  background: transparent;
  color: var(--gold);
  border: 1px dashed rgba(232, 176, 74, 0.5);
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  filter: none;
  border-radius: var(--r-md);
  margin-bottom: 16px;
  height: auto;
}
.pkg-add-row:hover {
  background: var(--gold-tint);
  border-color: var(--gold);
  border-style: solid;
  filter: none;
  transform: none;
  box-shadow: none;
}

.pkg-globals-collapse {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 0;
  margin-top: 16px;
}
.pkg-globals-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
  transition: color 120ms ease;
}
.pkg-globals-summary::-webkit-details-marker { display: none; }
.pkg-globals-summary:hover { color: var(--gold); }
.pkg-globals-summary svg { transition: transform 200ms ease; }
.pkg-globals-collapse[open] .pkg-globals-summary svg { transform: rotate(90deg); }
.pkg-globals-collapse[open] .pkg-globals-summary { color: var(--gold); }
.pkg-globals-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
}
.pkg-globals-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pkg-globals-group label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.pkg-globals-group select {
  font-size: 12px;
  padding: 5px 8px;
  height: 28px;
  min-width: 80px;
}

/* Etape 2 : Sauvegarder + Scanner */
.pkg-launcher {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.pkg-launcher-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.pkg-launcher-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 12px;
}
.pkg-launcher-row input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  font-size: 13px;
}
.pkg-save-btn,
.pkg-clear-btn {
  font-weight: 600;
  filter: none;
  padding: 10px 16px;
}
.pkg-save-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.pkg-save-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); filter: none; transform: none; box-shadow: none; }
.pkg-clear-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.pkg-clear-btn:hover { border-color: var(--bordeaux-light); color: var(--bordeaux-light); background: rgba(232, 69, 69, 0.08); filter: none; transform: none; box-shadow: none; }

.pkg-scan-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.pkg-scan-btn-big {
  min-width: 280px;
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 50%, var(--gold-soft));
  color: #1a1208;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pkg-scan-btn-big:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 16px var(--gold-glow); }
.pkg-scan-btn-big:disabled { background: var(--surface-3); color: var(--text-dim); cursor: wait; filter: none; transform: none; box-shadow: none; }

/* Modal d'ajout d'item */
.pkg-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.pkg-modal.show { display: flex; animation: fadeIn 200ms ease; }
.pkg-modal-box {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 26px 28px;
  width: 540px;
  max-width: 95vw;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 380ms var(--ease-out);
}
.pkg-modal-box h3 {
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 18px;
}
.pkg-modal-field { margin-bottom: 14px; }
.pkg-modal-field label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 5px;
}
.pkg-modal-field input,
.pkg-modal-field select {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
}
.pkg-modal-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.pkg-modal-row .pkg-modal-field { margin-bottom: 0; }
.pkg-modal-eq {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 18px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  transition: all 150ms ease;
}
.pkg-modal-eq input { margin: 0; cursor: pointer; accent-color: var(--gold); width: 14px; height: 14px; flex-shrink: 0; }
.pkg-modal-eq:hover { border-color: var(--gold); }
.pkg-modal-eq:has(input:checked) {
  border-color: var(--gold);
  background: rgba(242, 200, 77, 0.06);
  color: var(--text);
}
.pkg-modal-eq strong { color: var(--text); font-weight: 700; }
.pkg-modal-eq:has(input:checked) strong { color: var(--gold); }
.pkg-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pkg-modal-cancel, .pkg-modal-confirm {
  padding: 9px 18px;
  font-weight: 600;
}
.pkg-modal-cancel {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
  filter: none;
}
.pkg-modal-cancel:hover { border-color: var(--gold); color: var(--gold); filter: none; }

/* Resultats du scan */
#pkgResults:empty { display: none; }
.pkg-results-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.pkg-results-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pkg-stat {
  flex: 1;
  min-width: 150px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.pkg-stat .label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  margin-bottom: 6px;
}
.pkg-stat .val {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  color: var(--text);
}
.pkg-stat.total .val { color: var(--gold); }
.pkg-stat.total-order .val { color: var(--blue-light); }
.pkg-stat.optimal .val { color: var(--emerald-light); }
.pkg-stat.savings .val { color: var(--emerald-light); }
.pkg-stat-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body);
  font-weight: 500;
}

/* Legende sous les stats */
.pkg-results-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 14px;
  margin-bottom: 14px;
}
.pkg-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.pkg-legend-instant { background: var(--gold); }
.pkg-legend-order { background: var(--blue-light); }
.pkg-legend-best {
  margin-left: auto;
  color: var(--emerald-light);
  font-weight: 700;
  font-size: 11.5px;
}

/* Tableau dual (instant + order cote a cote) */
.pkg-results-table.pkg-dual th.pkg-th-mode {
  text-align: center;
  border-left: 1px solid var(--border-strong);
}
.pkg-results-table.pkg-dual .pkg-subhead th {
  font-size: 9.5px;
  padding: 6px 11px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.pkg-results-table.pkg-dual .pkg-subhead th:nth-child(3),
.pkg-results-table.pkg-dual .pkg-subhead th:nth-child(6) {
  border-left: 1px solid var(--border-strong);
}
.pkg-results-table.pkg-dual tbody td:nth-child(3),
.pkg-results-table.pkg-dual tbody td:nth-child(6) {
  border-left: 1px solid var(--border-strong);
}
.pkg-cheapest {
  background: rgba(45, 134, 89, 0.12);
}

/* === Resultats : 1 card par item avec mini-table des 7 villes === */
.pkg-result-item {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.pkg-result-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pkg-result-item-header .pkg-img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}
.pkg-result-item-info { display: flex; flex-direction: column; gap: 2px; }
.pkg-result-item-info strong { font-size: 14px; color: var(--text); }
.pkg-result-item-info span { font-size: 11.5px; color: var(--text-muted); }

.pkg-cities-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pkg-cities-table th {
  background: var(--bg);
  color: var(--text-muted);
  text-align: left;
  padding: 8px 12px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  position: static !important;
  cursor: default;
}
.pkg-cities-table th.num { text-align: right; }
.pkg-cities-table .pkg-subhead th {
  font-size: 9px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text-dim);
}
.pkg-cities-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
}
.pkg-cities-table tr:last-child td { border-bottom: none; }

/* Zebra striping pour la lisibilite */
.pkg-cities-table tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.012); }
.pkg-cities-table tbody tr:hover td { background: var(--surface) !important; }

.pkg-cities-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  font-weight: 500;
}
.pkg-cities-table .pkg-city-name {
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pkg-cities-table .pkg-city-name svg { color: var(--gold); }

/* SEPARATION VISUELLE entre les colonnes Achat instant et Ordre d'achat
   Colonnes : 1=Ville | 2=Prix instant | 3=Frais instant | 4=Prix ordre | 5=Frais ordre */
.pkg-cities-table th:nth-child(2),
.pkg-cities-table th:nth-child(3),
.pkg-cities-table td:nth-child(2),
.pkg-cities-table td:nth-child(3) {
  background: rgba(232, 176, 74, 0.03);
}
.pkg-cities-table tbody tr:hover td:nth-child(2),
.pkg-cities-table tbody tr:hover td:nth-child(3) {
  background: rgba(232, 176, 74, 0.07) !important;
}
.pkg-cities-table th:nth-child(4),
.pkg-cities-table th:nth-child(5),
.pkg-cities-table td:nth-child(4),
.pkg-cities-table td:nth-child(5) {
  background: rgba(74, 141, 232, 0.03);
  border-left: 2px solid var(--border-strong);
}
.pkg-cities-table tbody tr:hover td:nth-child(4),
.pkg-cities-table tbody tr:hover td:nth-child(5) {
  background: rgba(74, 141, 232, 0.08) !important;
}
/* Garde le border-left sur le th principal qui spanne 2 colonnes (4eme = pkg-th-mode du Ordre) */
.pkg-cities-table thead tr:first-child th:nth-child(3) {
  border-left: 2px solid var(--border-strong);
}
/* Sub-head : border-left sur la 4eme col */
.pkg-cities-table .pkg-subhead th:nth-child(4) { border-left: 2px solid var(--border-strong); }
/* Override pour cellules cheapest */
.pkg-cities-table .pkg-cheapest {
  background: rgba(45, 134, 89, 0.18) !important;
}
.pkg-best-mark {
  color: var(--emerald-light);
  font-weight: 700;
  margin-left: 3px;
}

/* Prix fantome (ordre anormalement bas) */
.pkg-suspect-cell {
  background: rgba(210, 153, 34, 0.06) !important;
  position: relative;
}
.pkg-suspect-cell strong {
  color: var(--warning);
  text-decoration: line-through;
  text-decoration-color: rgba(210, 153, 34, 0.5);
  text-decoration-thickness: 1px;
}
.pkg-suspect {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--warning);
  background: rgba(210, 153, 34, 0.13);
  border: 1px solid rgba(210, 153, 34, 0.35);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}
.pkg-suspect-warning {
  background: rgba(210, 153, 34, 0.08);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.pkg-suspect-warning svg { color: var(--warning); flex-shrink: 0; }

.pkg-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.pkg-results-table th {
  background: var(--surface);
  color: var(--text-muted);
  text-align: left;
  padding: 9px 11px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  position: static !important;
  cursor: default;
}
.pkg-results-table td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pkg-results-table tr:last-child td { border-bottom: none; }
.pkg-results-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.pkg-mode-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pkg-mode-instant { color: var(--gold); background: var(--gold-tint); border: 1px solid rgba(232, 176, 74, 0.3); }
.pkg-mode-order { color: var(--blue-light); background: rgba(74, 141, 232, 0.1); border: 1px solid rgba(74, 141, 232, 0.3); }
.pkg-city-tag {
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pkg-no-data { color: var(--text-dim); font-style: italic; font-size: 12px; }

.pkg-tour {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.pkg-tour-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pkg-tour-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.pkg-tour-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-tint);
  border: 1px solid rgba(232, 176, 74, 0.4);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.pkg-tour-city-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}
.pkg-tour-single {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pkg-tour-city {
  margin-bottom: 12px;
}
.pkg-tour-city:last-child { margin-bottom: 0; }
.pkg-tour-city-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.pkg-tour-city-name {
  color: var(--gold);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pkg-tour-city-total {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--f-mono);
}
.pkg-tour-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px 4px 22px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.pkg-tour-item .name { color: var(--text); }
.pkg-tour-item .price { font-family: var(--f-mono); color: var(--text); }

/* ===== View toggle (Tous / Favoris / Claims) dans le header Marché ===== */
.view-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 0;
  height: 33px;
}
.vt-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.2px;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
  filter: none;
}
.vt-btn:hover {
  color: var(--text);
  background: transparent;
  filter: none;
}
.vt-btn.active {
  background: var(--gold-tint);
  color: var(--gold);
  filter: none;
}
.vt-btn.active:hover {
  background: var(--gold-glow);
  color: var(--gold);
}

/* ===== Onglet Équivalents IP ===== */
.eq-form { display: flex; flex-direction: column; gap: 12px; }
.eq-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}
.eq-field { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.eq-field-grow { flex: 1; min-width: 240px; }
.eq-field label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.eq-field select,
.eq-field input { height: 38px; padding: 0 12px; font-size: 13px; }
.eq-mode-row { align-items: end; justify-content: space-between; }
#eqCity { height: 38px; padding: 0 12px; font-size: 13px; min-width: 200px; }
.eq-target-info {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--gold-tint);
  border: 1px solid rgba(232, 176, 74, 0.3);
  border-radius: var(--r-sm);
  color: var(--gold);
}
.eq-target-info strong { color: var(--gold-bright); }

/* Resultats */
.eq-results-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.eq-results-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.eq-results-header img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.eq-results-header .eq-info { display: flex; flex-direction: column; gap: 2px; }
.eq-results-header strong { font-size: 15px; color: var(--text); }
.eq-results-header span { font-size: 12px; color: var(--text-muted); }

.eq-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.eq-table th {
  background: var(--bg);
  color: var(--text-muted);
  text-align: left;
  padding: 9px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  position: static !important;
  cursor: default;
}
.eq-table th.num { text-align: right; }
.eq-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.eq-table tr:last-child td { border-bottom: none; }
.eq-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.012); }
.eq-table tbody tr:hover td { background: var(--surface) !important; }
.eq-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  font-weight: 500;
}
.eq-table .eq-cheapest td {
  background: rgba(45, 134, 89, 0.18) !important;
}
.eq-table .eq-tier-cell {
  font-weight: 700;
  font-family: var(--f-mono);
  color: var(--gold);
}
.eq-table .eq-row-img {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}
.eq-table .eq-best-mark { color: var(--emerald-light); font-weight: 700; }

.eq-no-results {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
}

/* ===== Mes items tab (table style) ===== */
#myItemsTab { padding: 18px 28px; }
#myItemsTab .mi-section { margin-bottom: 32px; }
#myItemsTab .mi-section-title {
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#myItemsTab .mi-section-title .count {
  background: var(--gold-tint);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(232, 176, 74, 0.3);
}
#myItemsTab .mi-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 36px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* La table */
.mi-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mi-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  text-align: left;
  padding: 9px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  user-select: none;
  position: static;
  cursor: default;
}
.mi-table thead th.sortable { cursor: pointer; }
.mi-table thead th.sortable:hover { color: var(--gold); }
.mi-table .mi-sort { color: var(--gold); margin-left: 3px; font-size: 9px; }
.mi-table thead th.mi-c { text-align: center; }
.mi-table tbody tr {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.mi-table tbody tr:last-child { border-bottom: none; }
.mi-table tbody tr:hover td { background: var(--surface-2); }
.mi-table td {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
}
.mi-table .mi-img-cell {
  width: 44px;
  padding-right: 0;
}
.mi-table .mi-img-cell .item-img {
  margin-right: 0;
  display: block;
}
.mi-table .mi-name {
  font-weight: 600;
  color: var(--text);
}
.mi-table .mi-c { text-align: center; font-size: 12.5px; }
.mi-table .mi-city-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.mi-table .mi-city-cell svg { color: var(--gold); }
.mi-table .mi-age {
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.mi-table .mi-action-cell {
  width: 44px;
  text-align: center;
}
.mi-table .mi-icon-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 120ms ease;
}
.mi-table .mi-icon-btn:hover {
  border-color: var(--bordeaux-light);
  color: var(--bordeaux-light);
  background: rgba(232, 69, 69, 0.08);
  filter: none;
}

/* ===== Misc icons & utilities ===== */
.item-icon { width: 14px; height: 14px; margin-right: 6px; opacity: 0.7; vertical-align: -2px; }
.ic { width: 14px; height: 14px; vertical-align: -2px; }
.ic-sm { width: 12px; height: 12px; vertical-align: -1px; }
.ic-lg { width: 18px; height: 18px; vertical-align: -3px; }

.fresh-tres,
.fresh-frais,
.fresh-moyen,
.fresh-vieux {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fresh-tres { color: var(--emerald-light); }
.fresh-frais { color: var(--emerald); }
.fresh-moyen { color: var(--warning); }
.fresh-vieux { color: var(--text-muted); }

.empty {
  text-align: center;
  padding: 60px;
  color: var(--text-muted);
  font-size: 14px;
}

.loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ===== Scrollbar custom ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* ===== Items images (Albion Online render API) ===== */
.item-img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: var(--r-sm);
  background: var(--surface);
  flex-shrink: 0;
}


/* ===== Undo button (plan stat card) ===== */
.undo-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 4px 11px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  transition: all var(--t-base) var(--ease);
}
.undo-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ===== Edit buy/sell buttons ===== */
.edit-buy-btn {
  background: rgba(74, 141, 232, 0.08) !important;
  border-color: var(--blue) !important;
  color: var(--blue-light) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.edit-buy-btn:hover {
  background: rgba(74, 141, 232, 0.18) !important;
  border-color: var(--blue-light) !important;
}
.edit-sell-btn {
  background: rgba(45, 134, 89, 0.08) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald-light) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.edit-sell-btn:hover {
  background: rgba(45, 134, 89, 0.18) !important;
  border-color: var(--emerald-light) !important;
}

/* In-row Edit btns specifically */
#planTable td .edit-buy-btn,
#planTable td .edit-sell-btn {
  display: flex !important;
  width: 100%;
  margin-bottom: 3px;
  justify-content: center;
}
#planTable td .edit-sell-btn { margin-bottom: 0; }

/* City title (plan) */
.city-title {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tools title */
.tools-title {
  font-family: var(--f-display);
  color: var(--gold);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Export button (Plan tab) */
.export-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  transition: all var(--t-base) var(--ease);
}
.export-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ===== Empty states (vraiment design) ===== */
.empty {
  text-align: center;
  padding: 80px 30px;
  color: var(--text-muted);
  font-size: 14px;
}
.empty-illustration {
  margin: 0 auto 18px;
  width: 64px;
  height: 64px;
  opacity: 0.4;
  color: var(--text-dim);
}
.empty-title {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 600;
}

/* ===== Loading skeleton ===== */
.skel {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  display: inline-block;
}
.skel-row td { padding: 14px 12px; }
.skel-bar { height: 14px; width: 100%; }
.skel-bar.short { width: 60%; }
.skel-bar.long { width: 90%; }
.skel-circle { width: 32px; height: 32px; border-radius: 50%; }

/* ===== Sub-elements/Plan modal ===== */
#editFeeModal { display: none; }
#editFeeModal[style*="flex"] { display: flex !important; animation: fadeIn var(--t-base) var(--ease); }
#editFeeModal > div {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp var(--t-slow) var(--ease-out);
}

#addPlanModal { display: none; }
#addPlanModal[style*="flex"] { display: flex !important; animation: fadeIn var(--t-base) var(--ease); }
#addPlanModal > div {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp var(--t-slow) var(--ease-out);
}


/* ============================================
   TOP VILLES — refonte v2
   ============================================ */

.tc-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px;
}

.tc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tc-subtitle {
  margin: 0 !important;
  flex: 1;
  min-width: 280px;
}

.tc-highlight-tag svg {
  vertical-align: -1px;
  margin-right: 4px;
}

.tc-fresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(46, 217, 140, 0.08);
  border: 1px solid rgba(46, 217, 140, 0.3);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(120, 220, 170, 0.95);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.tc-fresh strong { color: #fff; font-weight: 700; }

.tc-fresh-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ed98c;
  box-shadow: 0 0 10px #2ed98c;
  animation: tcPulse 1.6s ease-in-out infinite;
}

@keyframes tcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.tc-highlight {
  position: relative;
  background:
    radial-gradient(ellipse at top left, rgba(232, 176, 74, 0.18), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(232, 176, 74, 0.45);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 28px;
  box-shadow: 0 16px 40px rgba(232, 176, 74, 0.10);
  overflow: hidden;
}

.tc-highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.tc-highlight-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--gold);
  margin-bottom: 8px;
}

.tc-highlight-name {
  font-size: 38px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.8px;
  margin-bottom: 18px;
}

.tc-highlight-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(232, 176, 74, 0.15);
  padding-top: 18px;
}

.tc-highlight-stat {
  text-align: left;
}

.tc-hs-num {
  font-size: 24px;
  font-weight: 900;
  color: var(--gold-bright);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.tc-hs-lbl {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 2px;
}

.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.tc-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 16px;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}

.tc-card:hover {
  border-color: rgba(232, 176, 74, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--border);
  border-radius: 14px 0 0 14px;
}

.tc-card.tc-rank-1::before { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 12px rgba(232, 176, 74, 0.4); }
.tc-card.tc-rank-2::before { background: linear-gradient(180deg, var(--gold), var(--gold-soft)); }
.tc-card.tc-rank-3::before { background: linear-gradient(180deg, var(--gold-soft), rgba(201, 154, 62, 0.5)); }

.tc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.tc-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

.tc-card-score {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.tc-card-score strong {
  color: var(--gold);
  font-weight: 700;
}

.tc-big-stat {
  margin: 14px 0 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: center;
}
.tc-big-num {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tc-big-lbl {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 700;
}

.tc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tc-rank.tc-rank-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1a1208;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(232, 176, 74, 0.3);
}

.tc-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.tc-stat {
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 10px;
}

.tc-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1.1;
}

.tc-stat-num-roi {
  color: #2ed98c;
}

.tc-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 3px;
}

.tc-card-skeleton {
  height: 168px;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,0.02) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  animation: tcShimmer 1.6s ease-in-out infinite;
}

@keyframes tcShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tc-foot {
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .tc-header { flex-direction: column; align-items: flex-start; }
  .tc-title { font-size: 26px; }
  .tc-highlight-name { font-size: 28px; }
  .tc-hs-num { font-size: 18px; }
}


/* ============================================
   MARKET LOADER (chargement initial du tableau)
   ============================================ */
.market-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
}
.market-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(232, 176, 74, 0.15);
  border-top-color: var(--gold);
  animation: market-spin 0.8s linear infinite;
}
@keyframes market-spin {
  to { transform: rotate(360deg); }
}
.market-loader .empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.market-loader-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* ================================================
   AMBIANCE GLOBALE — refonte visuelle
   ================================================ */

/* Ambient glow doré qui flotte en haut */
body::before {
  content: "";
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse at center,
    rgba(232, 176, 74, 0.08) 0%,
    rgba(232, 176, 74, 0.04) 30%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

/* Ambient glow vert subtil en bas (data live) */
body::after {
  content: "";
  position: fixed;
  bottom: -300px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle at center,
    rgba(46, 217, 140, 0.04) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

/* S'assurer que le contenu reste au-dessus des glows (sans toucher au position) */
.app-shell { z-index: 1; }
header.hdr-v3 { z-index: 50; }
/* La sidebar garde son position: fixed defini plus haut */

/* ================================================
   ANIMATIONS ENTREE
   ================================================ */

/* Rows du tableau apparaissent avec fade-up staggered */
@keyframes rowFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#marketTab tbody tr {
  animation: rowFadeUp 400ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
#marketTab tbody tr:nth-child(1)  { animation-delay: 0ms; }
#marketTab tbody tr:nth-child(2)  { animation-delay: 20ms; }
#marketTab tbody tr:nth-child(3)  { animation-delay: 40ms; }
#marketTab tbody tr:nth-child(4)  { animation-delay: 60ms; }
#marketTab tbody tr:nth-child(5)  { animation-delay: 80ms; }
#marketTab tbody tr:nth-child(6)  { animation-delay: 100ms; }
#marketTab tbody tr:nth-child(7)  { animation-delay: 120ms; }
#marketTab tbody tr:nth-child(8)  { animation-delay: 140ms; }
#marketTab tbody tr:nth-child(9)  { animation-delay: 160ms; }
#marketTab tbody tr:nth-child(10) { animation-delay: 180ms; }
#marketTab tbody tr:nth-child(11) { animation-delay: 200ms; }
#marketTab tbody tr:nth-child(12) { animation-delay: 220ms; }
#marketTab tbody tr:nth-child(13) { animation-delay: 240ms; }
#marketTab tbody tr:nth-child(14) { animation-delay: 260ms; }
#marketTab tbody tr:nth-child(15) { animation-delay: 280ms; }
#marketTab tbody tr:nth-child(n+16) { animation-delay: 300ms; }

/* Rows HOT : pulsation subtile pour attirer l'oeil */
@keyframes hotPulse {
  0%, 100% {
    box-shadow: inset 3px 0 0 0 #2ed98c, 0 0 0 0 rgba(46, 217, 140, 0);
  }
  50% {
    box-shadow: inset 3px 0 0 0 #44e8a3, 0 0 12px 0 rgba(46, 217, 140, 0.15);
  }
}

/* Cards top villes apparaissent en cascade */
.tc-card {
  animation: rowFadeUp 500ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.tc-card:nth-child(1) { animation-delay: 0ms; }
.tc-card:nth-child(2) { animation-delay: 60ms; }
.tc-card:nth-child(3) { animation-delay: 120ms; }
.tc-card:nth-child(4) { animation-delay: 180ms; }
.tc-card:nth-child(5) { animation-delay: 240ms; }
.tc-card:nth-child(6) { animation-delay: 300ms; }
.tc-card:nth-child(7) { animation-delay: 360ms; }

/* Highlight card Top villes : entrée plus dramatique */
.tc-highlight {
  animation: highlightEnter 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes highlightEnter {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================================
   MICRO-INTERACTIONS
   ================================================ */

/* Cards Top villes : effet lift + glow gold au hover */
.tc-card {
  transition:
    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 200ms ease,
    box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.tc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 176, 74, 0.3),
    0 0 24px rgba(232, 176, 74, 0.08) !important;
}
.tc-card.tc-rank-1:hover {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 176, 74, 0.5),
    0 0 32px rgba(232, 176, 74, 0.2) !important;
}

/* Big number Top villes : effet glow au hover */
.tc-card:hover .tc-big-num {
  filter: drop-shadow(0 0 12px rgba(232, 176, 74, 0.4));
  transition: filter 300ms ease;
}

/* Boutons primary : animation subtile au click */
@keyframes btnClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
button:active:not(:disabled) {
  animation: btnClick 200ms ease;
}

/* Sidebar items : slide gold subtil au hover */
.sb-item {
  position: relative;
  overflow: hidden;
}
.sb-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: bottom;
}
.sb-item:hover::before { transform: scaleY(1); transform-origin: top; }
.sb-item.active::before { transform: scaleY(1); }

/* ================================================
   SCROLLBAR CUSTOM
   ================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(232, 176, 74, 0.2);
  border-radius: 100px;
  border: 1px solid transparent;
  transition: background 150ms ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 176, 74, 0.5);
}
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 176, 74, 0.2) rgba(0, 0, 0, 0.2);
}

/* ================================================
   POLISH EXTRA
   ================================================ */

/* Smooth scrolling sur le body */
html { scroll-behavior: smooth; }

/* Selection text avec gold */
::selection {
  background: rgba(232, 176, 74, 0.25);
  color: var(--gold-bright);
}

/* Bouton "?" relaunch onboarding : plus visible */
#obRelaunchBtn {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid rgba(232, 176, 74, 0.3) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(232, 176, 74, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#obRelaunchBtn:hover {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important;
  color: #1a1208 !important;
  box-shadow:
    0 8px 24px rgba(232, 176, 74, 0.4),
    0 0 0 1px var(--gold) !important;
}

/* Sparklines plus visibles */
td .sparkline,
td svg[viewBox] {
  opacity: 0.7;
  transition: opacity 200ms ease;
}
tr:hover td .sparkline,
tr:hover td svg[viewBox] {
  opacity: 1;
}

/* Item images : hover scale */
.item-img {
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
tr:hover .item-img {
  transform: scale(1.15);
}

/* ================================================
   HEADER V3 — Futuriste, glassmorphism, 2 lignes
   ================================================ */

header.hdr-v3 {
  padding: 0 !important;
  background: linear-gradient(180deg,
    rgba(15, 20, 34, 0.85) 0%,
    rgba(11, 15, 26, 0.92) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(232, 176, 74, 0.12);
  position: relative;
  z-index: 50;
}

header.hdr-v3::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 176, 74, 0.25) 30%,
    rgba(232, 176, 74, 0.45) 50%,
    rgba(232, 176, 74, 0.25) 70%,
    transparent 100%);
  pointer-events: none;
}

/* Lignes */
.hdr-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.hdr-line-context {
  height: 36px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}

.hdr-line-main {
  height: 56px;
  gap: 16px;
}

.hdr-context-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hdr-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Live dot pulsant */
.hdr-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ed98c;
  box-shadow:
    0 0 0 3px rgba(46, 217, 140, 0.15),
    0 0 12px rgba(46, 217, 140, 0.6);
  animation: hdrLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
  margin-right: 6px;
}

@keyframes hdrLivePulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(46, 217, 140, 0.15), 0 0 12px rgba(46, 217, 140, 0.6);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(46, 217, 140, 0.05), 0 0 18px rgba(46, 217, 140, 0.4);
    opacity: 0.75;
  }
}

/* Pills (selectors) */
.hdr-pill {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 4px 10px;
  height: 26px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 100px;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: 0.1px;
}
.hdr-pill:hover {
  background: rgba(232, 176, 74, 0.08);
  border-color: rgba(232, 176, 74, 0.25);
  color: var(--gold-bright);
}
.hdr-pill:focus {
  outline: none;
  background: rgba(232, 176, 74, 0.12);
  border-color: rgba(232, 176, 74, 0.4);
}

.hdr-sep {
  color: var(--text-dim);
  font-weight: 700;
  user-select: none;
  margin: 0 -2px;
}

/* ================================================
   PARTAGE EQUIPE (Split tool)
   ================================================ */

#splitTab > div,
#packageTab > div,
#equivalentsTab > div,
#translatorTab > div {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Toggle Zone letale / Non letale */
.split-zone-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.split-zone-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
}
.split-zone-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: all 200ms;
}
.split-zone-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.split-zone-btn:hover svg { opacity: 1; }
.split-zone-btn.active {
  border-color: var(--gold);
  background: rgba(242, 200, 77, 0.07);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--gold), 0 4px 16px rgba(242, 200, 77, 0.15);
}
.split-zone-btn.active svg { color: var(--gold); opacity: 1; }
.split-zone-text { display: flex; flex-direction: column; gap: 2px; }
.split-zone-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.split-zone-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}
.split-zone-btn.active .split-zone-sub { color: var(--text-muted); }

/* Mode non letal : cache les colonnes Gear, Morts, Recupere */
#splitTab[data-zone="nonlethal"] .split-h-gear,
#splitTab[data-zone="nonlethal"] .split-h-deaths,
#splitTab[data-zone="nonlethal"] .split-h-recovered,
#splitTab[data-zone="nonlethal"] .split-member > .split-gear-wrap:nth-of-type(1),
#splitTab[data-zone="nonlethal"] .split-member > .split-deaths-counter,
#splitTab[data-zone="nonlethal"] .split-member > .split-recovered-btn {
  display: none !important;
}
/* Nouveau grid 4 colonnes en non letal : Pseudo | Repair | Gain | Del */
#splitTab[data-zone="nonlethal"] .split-members-head,
#splitTab[data-zone="nonlethal"] .split-member {
  grid-template-columns: 1.5fr 1fr 1fr 36px !important;
}

.split-members-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr 100px 1fr 1fr 1fr 36px;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.split-members-head .split-h-deaths { text-align: center; }

.split-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.split-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.split-member {
  display: grid;
  grid-template-columns: 1.1fr 1fr 100px 1fr 1fr 1fr 36px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

.split-gear-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.split-gear-wrap .split-input { padding-right: 56px; }
.split-input-gear {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* Bouton "Recupere" qui ouvre le popover */
.split-recovered-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  height: 38px;
  padding: 0 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
  width: 100%;
  text-align: left;
}
.split-recovered-btn:hover {
  border-color: var(--gold);
  background: var(--gold-tint);
}
.split-recovered-btn.has-value {
  border-color: rgba(46, 217, 140, 0.4);
  background: rgba(46, 217, 140, 0.06);
  color: var(--text);
}
.split-recovered-btn.has-value:hover {
  border-color: rgba(46, 217, 140, 0.8);
  background: rgba(46, 217, 140, 0.1);
}
.split-recovered-val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #44e8a3;
}
.split-recovered-unit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-right: auto;
}
.split-recovered-count {
  font-size: 10px;
  background: rgba(46, 217, 140, 0.15);
  color: #44e8a3;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.split-recovered-add {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.split-recovered-btn:hover .split-recovered-add { color: var(--gold); }

/* Popover de gestion des recuperations */
.split-recovery-popover {
  position: fixed;
  z-index: 5000;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(46, 217, 140, 0.15);
  font-family: inherit;
  color: var(--text);
  animation: splitRecoveryFadeIn 180ms cubic-bezier(.2,.8,.2,1);
}
@keyframes splitRecoveryFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.split-recovery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.split-recovery-title {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.split-recovery-title strong { color: var(--text); }
.split-recovery-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.split-recovery-close:hover { background: var(--bg); color: var(--text); }

.split-recovery-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(46, 217, 140, 0.08);
  border: 1px solid rgba(46, 217, 140, 0.25);
  border-radius: 8px;
  margin-bottom: 14px;
}
.split-recovery-total-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 700;
  margin-right: auto;
}
.split-recovery-total-val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 800;
  color: #44e8a3;
  line-height: 1;
}
.split-recovery-total-unit {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 700;
}

.split-recovery-history-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 6px;
}
.split-recovery-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
}
.split-recovery-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
}
.split-recovery-entry-amt {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #44e8a3;
  flex: 1;
}
.split-recovery-entry-unit {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 700;
}
.split-recovery-entry-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.split-recovery-entry-remove:hover {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.split-recovery-add {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.split-recovery-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 150ms ease;
}
.split-recovery-input:focus { border-color: var(--gold); }
.split-recovery-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--gold-bright, #FFD56C), var(--gold, #F2C84D));
  border: none;
  border-radius: 8px;
  color: #1a1208;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms ease;
}
.split-recovery-add-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242, 200, 77, 0.3); }

.split-recovery-undo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms ease;
}
.split-recovery-undo:hover {
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ff6b6b;
}

.split-deaths-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 3px;
  height: 38px;
}
.split-cnt-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
  font-family: inherit;
  line-height: 1;
}
.split-cnt-btn:hover:not(:disabled) {
  background: var(--gold-tint);
  color: var(--gold);
}
.split-cnt-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.split-cnt-val {
  min-width: 30px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.split-cnt-val.has-deaths {
  color: var(--bordeaux-light);
}

.split-loss-display {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dim);
}
.split-loss-display.has-loss {
  color: var(--bordeaux-light);
}

/* Inputs Repair / Gain (réutilise .split-input-gear style) */
.split-input-repair, .split-input-gain {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* Gain net en grand */
.split-net {
  margin: 0 0 22px;
  padding: 26px 22px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid;
}
.split-net-gain {
  background: linear-gradient(135deg, rgba(46, 217, 140, 0.10), rgba(46, 217, 140, 0.02));
  border-color: rgba(46, 217, 140, 0.4);
}
.split-net-loss {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.10), rgba(255, 107, 107, 0.02));
  border-color: rgba(255, 107, 107, 0.4);
}
.split-net-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.split-net-val {
  font-size: 38px;
  font-weight: 900;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
}
.split-net-gain .split-net-val { color: #44e8a3; }
.split-net-loss .split-net-val { color: #ff6b6b; }
.split-net-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Transactions à effectuer (qui donne combien à qui) */
.split-tx-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 12px 4px;
}
.split-tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.split-tx-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 150ms ease;
}
.split-tx-row:hover {
  border-color: rgba(232, 176, 74, 0.3);
  background: var(--surface-2);
}
.split-tx-from {
  font-weight: 700;
  font-size: 16px;
  color: #ff6b6b;
  text-align: right;
}
.split-tx-arrow {
  color: var(--gold);
  flex-shrink: 0;
}
.split-tx-to {
  font-weight: 700;
  font-size: 16px;
  color: #44e8a3;
}
.split-tx-amount {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 16px;
  color: var(--gold-bright);
  white-space: nowrap;
}
.split-tx-unit {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 2px;
}

.split-no-tx {
  padding: 22px;
  text-align: center;
  color: #44e8a3;
  font-weight: 600;
  font-size: 14px;
  background: rgba(46, 217, 140, 0.06);
  border: 1px solid rgba(46, 217, 140, 0.25);
  border-radius: 10px;
}

/* Distribution liste simple (legacy, garde au cas ou) */
.split-dist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.split-dist-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 150ms ease;
}
.split-dist-row:hover { background: var(--surface-2); }
.split-dist-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.split-dist-action {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
}
.split-dist-amount {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.3px;
}

.split-dist-recv {
  border-color: rgba(46, 217, 140, 0.3);
}
.split-dist-recv .split-dist-action {
  background: rgba(46, 217, 140, 0.15);
  color: #44e8a3;
}
.split-dist-recv .split-dist-amount {
  color: #44e8a3;
}

.split-dist-give {
  border-color: rgba(255, 107, 107, 0.3);
}
.split-dist-give .split-dist-action {
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
}
.split-dist-give .split-dist-amount {
  color: #ff6b6b;
}

.split-dist-equal .split-dist-action {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}
.split-dist-equal .split-dist-amount {
  color: var(--text-muted);
}
.split-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease;
  width: 100%;
  box-sizing: border-box;
}
.split-input:focus { border-color: var(--gold); }
.split-input-name { font-weight: 600; }
.split-input-loss {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.split-loss-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.split-loss-unit {
  position: absolute;
  right: 12px;
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.split-loss-wrap .split-input { padding-right: 56px; }

.split-del {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.split-del:hover {
  border-color: var(--bordeaux-light);
  color: var(--bordeaux-light);
  background: rgba(232, 69, 69, 0.08);
}

/* Bank loot row */
.split-loot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.split-loot-row input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 70px 12px 14px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 150ms ease;
}
.split-loot-row input:focus { border-color: var(--gold); }
.split-loot-unit {
  position: absolute;
  right: 16px;
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: none;
}

.split-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(232, 176, 74, 0.04);
  border: 1px solid rgba(232, 176, 74, 0.15);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.split-mode input { margin-top: 3px; cursor: pointer; flex-shrink: 0; }
.split-mode strong { color: var(--gold); }

/* Result */
.split-error {
  padding: 14px 18px;
  background: rgba(232, 69, 69, 0.08);
  border: 1px solid rgba(232, 69, 69, 0.3);
  border-radius: 10px;
  color: var(--bordeaux-light);
  font-size: 14px;
  margin-top: 14px;
}

.split-result-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(232, 176, 74, 0.25);
  border-radius: 16px;
  padding: 24px;
  margin-top: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.split-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.split-result-head strong {
  font-size: 17px;
  color: var(--gold-bright);
}
.split-mode-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 10px;
  border-radius: 100px;
  margin-left: 10px;
  font-weight: 600;
}

.split-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.split-rs {
  text-align: center;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.split-rs-num {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  letter-spacing: -0.5px;
}
.split-rs-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-top: 4px;
}

.split-warn {
  background: rgba(232, 165, 50, 0.1);
  border: 1px solid rgba(232, 165, 50, 0.4);
  color: #ffc56c;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.split-dist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}
.split-dist-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  background: transparent;
  position: static;
  box-shadow: none;
  cursor: default;
}
.split-dist-table th.num { text-align: right; }
.split-dist-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.split-dist-table td.num {
  text-align: right;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.split-dist-table tbody tr:hover td { background: rgba(232, 176, 74, 0.04); }
.split-dist-table tfoot td {
  border-bottom: none;
  padding-top: 14px;
}

.split-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.split-foot strong { color: var(--text); }

@media (max-width: 980px) {
  .split-members-head { display: none; }
  .split-member {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    grid-template-areas:
      "name name del"
      "gear deaths del"
      "recovered repair del"
      "gain gain gain";
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .split-input-name { grid-area: name; font-weight: 700; }
  .split-member .split-gear-wrap:nth-of-type(1) { grid-area: gear; }
  .split-deaths-counter { grid-area: deaths; }
  .split-recovered-btn { grid-area: recovered; }
  .split-member .split-gear-wrap:nth-of-type(2) { grid-area: repair; }
  .split-member .split-gear-wrap:nth-of-type(3) { grid-area: gain; }
  .split-del { grid-area: del; }
  .split-result-stats,
  .split-result-stats-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  .split-result-stats,
  .split-result-stats-4 { grid-template-columns: 1fr !important; }
  .split-net-val { font-size: 28px; }
  .split-dist-row {
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
  }
  .split-dist-name { grid-column: 1 / -1; }
}

/* Style des options dans tous les <select> du site (dropdown natif) */
select option {
  background: #14141d;
  color: #f2f2f7;
  padding: 8px 12px;
  font-weight: 500;
}
select option:checked,
select option:hover {
  background: #2a2a3d;
  color: var(--gold-bright);
}
select option:disabled {
  color: var(--text-dim);
}
/* Optgroup labels (categories) */
select optgroup {
  background: #0a0d14;
  color: var(--gold);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

/* Refresh button (top right) */
header.hdr-v3 .hdr-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
header.hdr-v3 .hdr-refresh:hover {
  color: var(--gold);
  background: rgba(232, 176, 74, 0.08);
  border-color: rgba(232, 176, 74, 0.25);
}
header.hdr-v3 .hdr-refresh svg {
  opacity: 0.6;
  transition: transform 300ms ease, opacity 150ms ease;
}
header.hdr-v3 .hdr-refresh:hover svg {
  opacity: 1;
  transform: rotate(180deg);
}

/* Toggle (chevron) — dans le flow */
header.hdr-v3 .hdr-toggle {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  z-index: 5;
}
header.hdr-v3 .hdr-toggle:hover {
  border-color: rgba(232, 176, 74, 0.25);
  color: var(--gold);
  background: rgba(232, 176, 74, 0.08);
}
header.hdr-v3 .hdr-toggle svg { transition: transform 250ms ease; }
header.hdr-v3.hdr-collapsed .hdr-toggle svg { transform: rotate(180deg); }
header.hdr-v3.hdr-collapsed .hdr-line-main { display: none !important; }
header.hdr-v3.hdr-collapsed::before { content: none; }

/* Search dominante */
header.hdr-v3 .hdr-search {
  flex: 1;
  max-width: none;
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  background: rgba(15, 20, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0 14px;
  transition: all 200ms ease;
}
header.hdr-v3 .hdr-search:focus-within {
  background: rgba(15, 20, 34, 0.9);
  border-color: rgba(232, 176, 74, 0.4);
  box-shadow:
    0 0 0 3px rgba(232, 176, 74, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
header.hdr-v3 .hdr-search svg {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color 150ms ease;
}
header.hdr-v3 .hdr-search:focus-within svg { color: var(--gold); }

header.hdr-v3 .hdr-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  padding: 0 12px;
  font-family: inherit;
}
header.hdr-v3 .hdr-search input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

/* Kbd "/" hint */
.hdr-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Monaco', monospace;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* Actions (view-toggle + filtres) */
header.hdr-v3 .hdr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* View toggle revamp */
header.hdr-v3 .hdr-view {
  display: inline-flex;
  background: rgba(15, 20, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 3px;
  height: 38px;
  align-items: center;
  gap: 0;
}
header.hdr-v3 .vt-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0 14px;
  height: 30px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  letter-spacing: 0.1px;
}
header.hdr-v3 .vt-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
header.hdr-v3 .vt-btn.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1a1208;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(232, 176, 74, 0.25);
}
header.hdr-v3 .vt-btn.active:hover { transform: none; filter: brightness(1.05); }

/* Filtres button revamp */
header.hdr-v3 .hdr-filters { position: relative; }
header.hdr-v3 .hdr-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: rgba(15, 20, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: all 150ms ease;
}
header.hdr-v3 .hdr-filters-btn::-webkit-details-marker { display: none; }
header.hdr-v3 .hdr-filters-btn:hover {
  border-color: rgba(232, 176, 74, 0.3);
  color: var(--gold-bright);
  background: rgba(232, 176, 74, 0.06);
}
header.hdr-v3 .hdr-filters[open] .hdr-filters-btn {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-tint);
}

/* Responsive */
@media (max-width: 720px) {
  header.hdr-v3 .hdr-line-context { font-size: 11.5px; padding: 0 14px; }
  header.hdr-v3 .hdr-line-main { padding: 0 14px; gap: 10px; }
  header.hdr-v3 .hdr-context-group .hdr-sep { display: none; }
  header.hdr-v3 .hdr-pill { padding: 4px 8px; font-size: 11.5px; }
  header.hdr-v3 .hdr-kbd { display: none; }
  header.hdr-v3 .hdr-search { height: 34px; padding: 0 10px; }
  header.hdr-v3 .hdr-view, header.hdr-v3 .hdr-filters-btn { height: 34px; }
}