:root {
  --bg:     #07050f;
  --bg2:    #0d0a1e;
  --bg3:    #131028;
  --bg4:    #191530;
  --bg5:    #1e193a;
  --b0:     rgba(139,92,246,.07);
  --b1:     rgba(139,92,246,.15);
  --b2:     rgba(167,139,250,.28);
  --b3:     rgba(200,160,255,.45);
  --text:   #ede8ff;
  --t2:     #c4b5fd;
  --t3:     #9d89d0;
  --muted:  #554d72;
  --p1:     #7c3aed;
  --p2:     #8b5cf6;
  --p3:     #a78bfa;
  --p4:     #c4b5fd;
  --green:  #10b981;
  --red:    #f43f5e;
  --amber:  #f59e0b;
  --mono:   'JetBrains Mono', monospace;
  --sans:   'Outfit', sans-serif;
  --brand:  'Oxanium', sans-serif;
  --panel-w: 295px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); }

body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(88,28,135,.22), transparent),
    radial-gradient(ellipse 45% 60% at 3% 60%, rgba(109,40,217,.12), transparent);
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}

[data-feature-disabled="1"] {
  opacity: .46 !important;
  filter: saturate(.55);
}

#topbar {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 0;
  padding: 0 12px; height: 62px;
  background: #0e0c1c;
  border-bottom: 1px solid rgba(139,92,246,.2);
  box-shadow: 0 2px 16px rgba(0,0,0,.7);
  flex-shrink: 0; user-select: none;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,92,246,.38) transparent;
}
#topbar::-webkit-scrollbar { height: 6px; }
#topbar::-webkit-scrollbar-thumb { background: rgba(139,92,246,.38); border-radius: 999px; }
#topbar::-webkit-scrollbar-track { background: transparent; }

/* Brand */
.hud-brand { display:flex;align-items:center;gap:8px;flex-shrink:0;padding-right:10px; }
.hud-brand-icon { width:36px;height:36px;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.2);border:1px solid var(--b2); }
.hud-brand-icon img { width:100%;height:100%;object-fit:contain; }
.hud-brand-name { font-family:var(--brand);font-size:17px;color:var(--p4);letter-spacing:.06em;white-space:nowrap; }

/* Trajet name input */
#trajet-name {
  width:190px; flex-shrink:0;
  background:#16122a; border:1px solid rgba(139,92,246,.2);
  border-radius:6px; padding:4px 10px;
  color:var(--text); font-family:var(--sans); font-size:13px;
  outline:none; transition:border-color .15s;
  height:42px;
}
#trajet-name:focus { border-color:var(--p2); }
#trajet-name::placeholder { color:var(--muted); }

/* HUD divider */
.hud-sep { width:1px; height:30px; background:rgba(139,92,246,.18); flex-shrink:0; margin:0 6px; }

/* Icon button (carré compact) */
.hud-btn {
  width:42px; height:42px; flex-shrink:0;
  background:#16122a; border:1px solid rgba(139,92,246,.18);
  border-radius:7px; color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; transition:all .12s;
  font-size:19px; line-height:1;
}
.hud-btn:hover { background:#1e1938; border-color:rgba(167,139,250,.4); color:var(--text); }
.hud-btn.active { background:rgba(124,58,237,.25); border-color:rgba(124,58,237,.55); color:var(--p4); }
.hud-btn.danger.active {
  background:rgba(244,63,94,.16);
  border-color:rgba(244,63,94,.62);
  color:#fecdd3;
  box-shadow:0 0 0 1px rgba(244,63,94,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.hud-btn.danger.active img {
  filter:drop-shadow(0 0 6px rgba(244,63,94,.28));
}
.hud-btn.danger:hover { border-color:var(--red); color:var(--red); background:rgba(244,63,94,.1); }
.hud-btn:disabled { opacity:.28; cursor:not-allowed; pointer-events:none; }
.hud-btn svg { width:20px;height:20px;fill:currentColor;pointer-events:none; }
#btn-credits { font-family:var(--brand); }

/* Group wrapper */
.hud-group { display:flex;align-items:center;gap:3px;flex-shrink:0; }

/* Nav pad 3x3 */
.hud-nav3 { display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:2px;flex-shrink:0; }
.hud-nav3 .hud-btn { width:34px;height:34px;font-size:17px; }

/* Zoom control */
.hud-zoom { display:flex;align-items:center;gap:3px;flex-shrink:0; }
#hud-zoom-val {
  width:48px;height:42px;text-align:center;
  background:#16122a;border:1px solid rgba(139,92,246,.18);border-radius:6px;
  font-family:var(--mono);font-size:13px;color:var(--p4);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Coords far right */
#hud-coords {
  margin-left:auto; flex-shrink:0;
  font-family:var(--mono); font-size:13px; color:var(--t3);
  background:#16122a; border:1px solid rgba(139,92,246,.18);
  border-radius:6px; padding:3px 12px; white-space:nowrap;
  height:42px; display:flex; align-items:center;
}

/* Text button (Lua export) */
.hud-text-btn {
  height:50px; flex-shrink:0; white-space:nowrap;
  background:rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.45);
  border-radius:8px; color:var(--p4);
  font-family:var(--sans); font-size:16px; font-weight:600;
  padding:0 18px; cursor:pointer; transition:all .15s;
  display:flex;align-items:center;gap:8px;
}
.hud-text-btn:hover { background:rgba(124,58,237,.38); border-color:var(--p2); color:var(--text); }
.hud-text-btn.outline { background:#16122a; border-color:rgba(139,92,246,.2); color:var(--t2); font-weight:500; }
.hud-text-btn.outline:hover { border-color:var(--b2); color:var(--text); background:#1e1938; }

/* ── Boutons fichier (Nouveau / Sauvegarder / Importer / Cloud) ── */
.hud-file-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; height:50px; padding:0 12px; flex-shrink:0;
  background:#16122a; border:1px solid rgba(139,92,246,.22);
  border-radius:8px; cursor:pointer; transition:all .12s;
  color:var(--t3); min-width:52px;
}
.hud-file-btn:hover { background:#1e1938; border-color:var(--b2); color:var(--text); }
.hfb-icon { font-size:20px; line-height:1; }
.hfb-label { font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:inherit; white-space:nowrap; }

.hud-file-btn--save   { background:rgba(124,58,237,.22); border-color:rgba(167,139,250,.4); color:var(--p4); }
.hud-file-btn--save:hover { background:rgba(124,58,237,.38); border-color:var(--p2); color:#fff; }
.hud-file-btn--import { border-color:rgba(16,185,129,.3); color:#10b981; }
.hud-file-btn--import:hover { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.55); }
.hud-file-btn--cloud  { border-color:rgba(56,189,248,.3); color:#38bdf8; }
.hud-file-btn--cloud:hover  { background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.55); }
.hud-file-btn--bank   { border-color:rgba(245,158,11,.3); color:var(--amber); }
.hud-file-btn--bank:hover   { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.55); }

@media (max-width: 1920px) {
  #topbar { padding: 0 8px; }
  .hud-brand { gap:6px; padding-right:8px; }
  .hud-brand-icon { width:32px; height:32px; }
  .hud-brand-name { font-size:15px; }
  .hud-sep { margin:0 4px; height:24px; }
  .hud-btn { width:38px; height:38px; font-size:17px; }
  .hud-btn svg { width:18px; height:18px; }
  .hud-group { gap:2px; }
  .hud-dir-stack { gap:3px; }
  .hud-dir-row { gap:2px; }
  .hud-dir-toggle-btn { width:30px; }
  .hud-dir-toggle-badge { font-size:8px; min-width:14px; height:14px; }
  .hud-file-btn, .hud-mode-btn, .hud-text-btn { height:44px; border-radius:7px; }
  .hud-file-btn { padding:0 9px; min-width:48px; }
  .hud-mode-btn { width:44px; }
  .hfb-icon, .hmb-icon { font-size:17px; }
  .hfb-label { font-size:9px; letter-spacing:.03em; }
  .hmb-label { font-size:8px; letter-spacing:.03em; }
  .hud-text-btn { font-size:14px; padding:0 12px; gap:6px; }
  .hud-zoom { gap:2px; }
  #hud-zoom-val { width:44px; height:38px; font-size:12px; }
}

@media (max-width: 1600px) {
  #topbar { padding: 0 6px; }
  .hud-sep { margin:0 3px; height:20px; }
  .hud-btn { width:34px; height:34px; font-size:15px; border-radius:6px; }
  .hud-btn svg { width:16px; height:16px; }
  .hud-dir-toggle-btn { width:28px; }
  .hud-dir-toggle-badge { font-size:7px; min-width:13px; height:13px; }
  .hud-file-btn, .hud-mode-btn, .hud-text-btn { height:40px; border-radius:6px; }
  .hud-file-btn { padding:0 7px; min-width:42px; }
  .hud-mode-btn { width:40px; }
  .hfb-icon, .hmb-icon { font-size:15px; }
  .hfb-label, .hmb-label { font-size:7px; letter-spacing:.02em; }
  .hud-text-btn { font-size:12px; padding:0 10px; gap:5px; }
  #hud-zoom-val { width:40px; height:34px; font-size:11px; }
}

/* Thème clair */
[data-theme="light"] .hud-file-btn {
  background: linear-gradient(180deg, #533010 0%, #3a2008 100%);
  border-color: #7a4e18; color: #d4aa50;
  box-shadow: inset 0 1px 0 rgba(240,192,48,.1);
}
[data-theme="light"] .hud-file-btn:hover { background: linear-gradient(180deg, #6e4818 0%, #4a2f0e 100%); color:#f0c030; }
[data-theme="light"] .hud-file-btn--save   { background:linear-gradient(180deg,#963808 0%,#6a2808 100%); border-color:#c04808; color:#fff0c0; }
[data-theme="light"] .hud-file-btn--import { border-color:rgba(58,106,16,.55); color:#4a8a18; }
[data-theme="light"] .hud-file-btn--cloud  { border-color:rgba(26,74,122,.5);  color:#3a6a9a; }
[data-theme="light"] .hud-file-btn--bank   { border-color:rgba(160,120,8,.5);  color:#a07808; }

/* ── Boutons mode (Move / Fight / Gather) avec label ── */
.hud-mode-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; height:50px; width:50px; flex-shrink:0;
  background:#16122a; border:1px solid rgba(139,92,246,.22);
  border-radius:8px; cursor:pointer; transition:all .12s;
  color:var(--t3);
}
.hud-mode-btn:hover { background:#1e1938; border-color:var(--b2); color:var(--text); }
.hud-mode-btn.active { border-color:rgba(139,92,246,.55); background:rgba(124,58,237,.2); color:var(--p4); }
.hmb-icon { font-size:20px; line-height:1; }
.hmb-label { font-family:var(--sans); font-size:9px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:inherit; }
/* Couleurs actives par mode */
#btn-mode-move.active   { background:rgba(229,231,235,.15); border-color:rgba(229,231,235,.4); color:#e5e7eb; }
#btn-mode-fight.active  { background:rgba(244,63,94,.2);    border-color:rgba(244,63,94,.5);   color:var(--red); }
#btn-mode-gather.active { background:rgba(16,185,129,.2);   border-color:rgba(16,185,129,.5);  color:var(--green); }
#btn-mode-bank.active   { background:rgba(245,158,11,.2);   border-color:rgba(245,158,11,.55); color:var(--amber); }
/* Thème clair */
[data-theme="light"] .hud-mode-btn {
  background: linear-gradient(180deg, #533010 0%, #3a2008 100%);
  border-color: #7a4e18; color: #d4aa50;
}
[data-theme="light"] .hud-mode-btn:hover { background: linear-gradient(180deg, #6e4818 0%, #4a2f0e 100%); color:#f0c030; }
[data-theme="light"] #btn-mode-move.active   { background:rgba(58,32,16,.3);  border-color:rgba(200,180,140,.5); color:#f0e0c0; }
[data-theme="light"] #btn-mode-fight.active  { background:rgba(144,32,8,.3);  border-color:rgba(144,32,8,.6);   color:#f09070; }
[data-theme="light"] #btn-mode-gather.active { background:rgba(42,88,8,.3);   border-color:rgba(58,106,16,.6);  color:#90c840; }

/* ── SVG flèche (même forme que sur le canvas) ── */
.hud-arrow-svg {
  width:22px; height:22px; fill:currentColor;
  transition:fill .12s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Keep legacy .btn for modal etc */
.btn {
  background: var(--bg3); border: 1px solid var(--b1);
  border-radius: 6px; color: var(--t2);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 5px 11px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn:hover { background: var(--bg4); border-color: var(--b2); color: var(--text); }
.btn.primary { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); color: var(--p4); font-weight: 600; }
.btn.primary:hover { background: rgba(124,58,237,.4); border-color: var(--p2); }
.btn.danger { color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: rgba(244,63,94,.1); }
.btn.sm { padding: 3px 8px; font-size: 11px; }
/* Mode actif dans la modale Générer */
#gen-mode-move.active   { background:rgba(229,231,235,.18); border-color:rgba(229,231,235,.55); color:#fff; font-weight:600; }
#gen-mode-fight.active  { background:rgba(244,63,94,.25);   border-color:rgba(244,63,94,.65);   color:#f43f5e; font-weight:600; }
#gen-mode-gather.active { background:rgba(16,185,129,.22);  border-color:rgba(16,185,129,.6);   color:#10b981; font-weight:600; }

#zaap-tooltip { display:none; } /* désactivé — remplacé par map-cursor-tip unifié */

#map-cursor-tip .map-cursor-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  margin-bottom:2px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.28);
  background:rgba(25,18,46,.82);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  color:#ddd6fe;
}
#map-cursor-tip .map-cursor-chip .dir-inline-icons{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
#map-cursor-tip .map-cursor-chip .dir-inline-svg{
  width:11px !important;
  height:11px !important;
}
#map-cursor-tip .map-cursor-chip .dir-random-cell-svg{
  width:14px !important;
  height:14px !important;
}
#map-cursor-tip .map-cursor-chip.is-move{
  border-color:rgba(167,139,250,.34);
  color:#ddd6fe;
}
#map-cursor-tip .map-cursor-chip.is-fight{
  border-color:rgba(244,63,94,.34);
  background:rgba(52,14,24,.84);
  color:#fda4af;
}
#map-cursor-tip .map-cursor-chip.is-gather{
  border-color:rgba(16,185,129,.34);
  background:rgba(8,44,34,.84);
  color:#86efac;
}
#map-cursor-tip .map-cursor-chip.is-bank{
  border-color:rgba(245,158,11,.34);
  background:rgba(50,31,8,.84);
  color:#fcd34d;
}
#map-cursor-tip .map-cursor-chip.is-erase{
  border-color:rgba(244,63,94,.34);
  background:rgba(52,14,24,.84);
  color:#fda4af;
}
#map-cursor-tip .map-cursor-chip.is-forbid{
  border-color:rgba(244,63,94,.34);
  background:rgba(52,14,24,.84);
  color:#fecaca;
}
#map-cursor-tip .map-cursor-chip.is-drag{
  border-color:rgba(148,163,184,.28);
  background:rgba(25,30,46,.82);
  color:#cbd5e1;
}

/* ── Icône banque sur la carte ── */
.bank-map-icon {
  position: absolute; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.7));
  transition: filter .15s;
  z-index: 5;
}
.bank-map-icon.active  { filter: drop-shadow(0 0 8px rgba(245,158,11,1)) drop-shadow(0 0 16px rgba(245,158,11,.6)); }
.bank-map-icon.hovered { filter: drop-shadow(0 0 6px rgba(245,158,11,.9)); cursor: pointer; }

#app-layout { display: flex; flex-direction: column; height: 100vh; position: relative; z-index: 2; }
#main-area { display: flex; flex: 1; overflow: hidden; }

#map-container { flex: 1; position: relative; overflow: hidden; background: #0a0806; cursor: crosshair; }
#map-bg { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; image-rendering: pixelated; user-select: none; }
#mapGrid { display: block; position: absolute; top: 0; left: 0; pointer-events: all; }

#map-info {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(13,10,30,.88); border: 1px solid var(--b1); border-radius: 8px;
  padding: 6px 12px; font-family: var(--mono); font-size: 11px;
  color: var(--t2); backdrop-filter: blur(6px); pointer-events: none;
  display: none; min-width: 130px; line-height: 1.7;
}
#map-info .info-zone { color: var(--p4); font-size: 12px; font-weight: 700; font-family: 'Oxanium', sans-serif; display: block; letter-spacing: .04em; }
#map-info .info-coords { color: var(--t3); font-size: 11px; display: block; }

#side-panel { width: var(--panel-w); flex-shrink: 0; background: var(--bg2); border-left: 1px solid var(--b2); display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--b1); flex-shrink: 0; }
.panel-title { font-family: var(--brand); font-size: 12px; color: var(--p4); letter-spacing: .06em; text-transform: uppercase; }
.wp-badge { background: var(--p1); color: #fff; border-radius: 99px; font-family: var(--mono); font-size: 10px; font-weight: 700; min-width: 20px; min-height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.wp-badge-stats {
  background: transparent;
  color: inherit;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wp-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,.28);
  background: rgba(139,92,246,.14);
  color: #f5f3ff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s, border-color .15s;
}
.wp-badge-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.wp-badge-chip.is-active {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 16px rgba(167,139,250,.18);
}
.wp-badge-chip strong {
  font-size: 10px;
  font-weight: 800;
  color: inherit;
}
.wp-badge-chip.is-main {
  background: rgba(139,92,246,.16);
  border-color: rgba(167,139,250,.34);
  color: #e9d5ff;
}
.wp-badge-chip.is-fight {
  background: rgba(244,63,94,.15);
  border-color: rgba(244,63,94,.32);
  color: #fda4af;
}
.wp-badge-chip.is-gather {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.30);
  color: #86efac;
}
.wp-badge-chip.is-bank {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.30);
  color: #fcd34d;
}
.wp-badge-chip.is-zaap {
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.32);
  color: #bfdbfe;
}

#wp-list { flex: 1; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
#wp-list::-webkit-scrollbar { width: 4px; }
#wp-list::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 4px; }
.bank-active-summary-label {
  color:var(--amber);
  letter-spacing:.06em;
  text-transform:uppercase;
  flex:0 0 100%;
}
.bank-active-summary-select {
  flex:1 1 160px;
  min-width:0;
  max-width:100%;
  font-size:10px;
  padding:4px 8px;
}
.bank-active-summary-coords {
  color:var(--t3);
  white-space:nowrap;
}
.bank-active-summary-state {
  margin-left:auto;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

.wp-item {
  display:flex; align-items:flex-start; gap:8px;
  background:linear-gradient(180deg, rgba(26,20,54,.94), rgba(17,13,36,.98));
  border:1px solid var(--b1); border-radius:10px;
  padding:8px 8px 8px 9px; margin-bottom:6px;
  cursor:pointer; transition:all .15s;
}
.wp-item:hover {
  background:linear-gradient(180deg, rgba(39,28,78,.94), rgba(22,17,44,.99));
  border-color:var(--b2);
  transform:translateY(-1px);
}
.wp-item.sel {
  border-color:var(--p2);
  background:linear-gradient(180deg, rgba(54,34,98,.34), rgba(24,18,48,.98));
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.18);
}
.wp-item-sub {
  margin-left:10px;
  border-color:rgba(96,165,250,.18);
  background:linear-gradient(180deg, rgba(20,19,46,.96), rgba(13,12,30,.99));
}
.wp-item-sub:hover {
  border-color:rgba(96,165,250,.34);
  background:linear-gradient(180deg, rgba(30,26,64,.96), rgba(16,14,37,.99));
}
.wp-item-sub.sel {
  border-color:rgba(96,165,250,.52);
  box-shadow:inset 0 0 0 1px rgba(96,165,250,.18);
}
.wp-num {
  width:22px;height:22px;border-radius:50%;
  background:var(--p1);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-top:2px;
}
.wp-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.wp-top { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; flex-wrap:wrap; }
.wp-top-actions { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-left:auto; }
.wp-arrow { font-size:14px; flex-shrink:0; width:18px; text-align:center; }
.wp-coords {
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text);
  min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap;
}
.wp-meta-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.wp-meta-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:999px;
  font-size:9px; font-family:var(--mono); font-weight:700;
  white-space:nowrap; border:1px solid transparent;
}
.dir-inline-icons { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; }
.dir-inline-svg {
  width:12px; height:12px; fill:currentColor;
  flex-shrink:0; vertical-align:middle;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.dir-random-cell-svg,
.hud-random-grid-svg {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}
.dir-random-cell-svg rect,
.dir-random-cell-svg path,
.hud-random-grid-svg rect,
.hud-random-grid-svg path {
  fill:currentColor;
  stroke:currentColor;
  stroke-linejoin:round;
}
.dir-random-cell-svg rect {
  fill-opacity:.10;
  stroke-opacity:.52;
  stroke-width:1.45;
}
.hud-random-grid-svg rect {
  fill-opacity:.09;
  stroke-opacity:.62;
  stroke-width:1.45;
}
.wp-meta-path   { background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.28); color:var(--p4); }
.wp-meta-random { background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.30); color:var(--amber); }
.wp-meta-rt     { background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.28); color:#93c5fd; }
.wp-meta-bank   { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.28); color:var(--amber); }
.wp-meta-zaap   { background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.28); color:#ddd6fe; }
.wp-meta-zaap-dest { background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.28); color:#bfdbfe; }
.wp-mode-badge {
  font-size:9px;
  font-family:var(--mono);
  padding:2px 6px;
  border-radius:999px;
  flex-shrink:0;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.wp-mode-badge:hover {
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.wp-mode-badge.is-active {
  box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 0 12px rgba(255,255,255,.06);
}
.wp-mode-move   { background:rgba(229,231,235,.12); color:#e5e7eb; }
.wp-mode-fight  { background:rgba(244,63,94,.18);   color:#f43f5e; }
.wp-mode-gather { background:rgba(16,185,129,.18);  color:#10b981; }
.wp-mode-bank   { background:rgba(245,158,11,.18);  color:var(--amber); }
.wp-mode-zaap   { background:rgba(96,165,250,.18);  color:#60a5fa; }
.wp-empty-filter {
  color: var(--muted);
  font-size: 11px;
  padding: 14px 12px;
  text-align: center;
  font-family: var(--mono);
}
.wp-del { width:20px;height:20px;border:none;background:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:12px;display:flex;align-items:center;justify-content:center;transition:.15s;margin-top:2px;flex-shrink:0; }
.wp-del:hover { color: var(--red); background: rgba(192,80,80,.12); }
.wp-del-placeholder { visibility:hidden; pointer-events:none; }

/* Active mode colors */
#btn-mode-move.active   { background:rgba(229,231,235,.15); border-color:rgba(229,231,235,.4); }
#btn-mode-fight.active  { background:rgba(244,63,94,.2);    border-color:rgba(244,63,94,.5); }
#btn-mode-gather.active { background:rgba(16,185,129,.2);   border-color:rgba(16,185,129,.5); }
.hud-dir-group { align-items:flex-end; }
.hud-dir-stack { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.hud-dir-row { display:flex; align-items:center; gap:3px; }
.hud-dir.active { background:rgba(124,58,237,.25); border-color:rgba(124,58,237,.55); color:var(--p4); }
.hud-dir-toggle-btn {
  width:30px;
  padding:0;
  position:relative;
  flex-shrink:0;
  overflow:visible;
}
.hud-dir-toggle-btn.active {
  background:rgba(245,158,11,.15);
  border-color:rgba(245,158,11,.42);
  color:#fcd34d;
  box-shadow:0 0 0 1px rgba(245,158,11,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.hud-random-grid-svg {
  width:18px;
  height:18px;
  display:block;
}
.hud-dir-toggle-badge {
  position:absolute;
  right:-3px;
  top:-3px;
  min-width:15px;
  height:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
  border-radius:999px;
  background:rgba(7,5,18,.92);
  border:1px solid rgba(139,92,246,.22);
  color:var(--t3);
  font-family:var(--mono);
  font-size:8px;
  font-weight:700;
  letter-spacing:.02em;
  transition:all .15s;
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
}
.hud-dir-toggle-badge.is-visible {
  opacity:1;
  transform:scale(1);
}
.hud-dir-toggle-btn.active .hud-dir-toggle-badge {
  background:rgba(245,158,11,.22);
  border-color:rgba(245,158,11,.46);
  color:#fff1b8;
}
@keyframes dir-missing-breath {
  0%, 100% {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.18);
    color: var(--text);
    box-shadow: 0 0 0 rgba(239,68,68,0);
  }
  50% {
    background: rgba(239,68,68,.28);
    border-color: rgba(248,113,113,.82);
    color: #fecaca;
    box-shadow: 0 0 0 4px rgba(239,68,68,.12), 0 0 18px rgba(239,68,68,.35);
  }
}
.hud-dir.needs-direction {
  animation: dir-missing-breath .55s ease-in-out 3;
}
#hud-mode-toast {
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  z-index:320;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(9,7,20,.92);
  border:1px solid rgba(167,139,250,.24);
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  box-shadow:0 16px 32px rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  backdrop-filter:blur(8px);
}
#hud-mode-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#hud-mode-toast.toast-random { border-color:rgba(245,158,11,.34); color:#fcd34d; }
#hud-mode-toast.toast-single { border-color:rgba(167,139,250,.30); color:#ddd6fe; }

.wp-add-row { display: flex; gap: 5px; padding: 8px; border-top: 1px solid var(--b1); flex-shrink: 0; }
.wp-add-row input { width:58px;background:var(--bg3);border:1px solid var(--b1);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:12px;padding:5px 6px;text-align:center;outline:none;transition:.15s; }
.wp-add-row input:focus { border-color: var(--p2); }

#export-section { padding: 10px; border-top: 1px solid var(--b1); flex-shrink: 0; }
#lua-panel { display: none; margin-top: 8px; }
#lua-code { background:#060410;border:1px solid var(--b1);border-radius:7px;color:var(--p3);font-family:var(--mono);font-size:10px;padding:10px;max-height:200px;overflow-y:auto;white-space:pre;line-height:1.6;word-break:break-all;scrollbar-width:thin;scrollbar-color:var(--b2) transparent; }

.ornament { text-align:center;color:var(--b1);font-size:14px;letter-spacing:6px;padding:4px 0;flex-shrink:0;border-top:1px solid var(--b0);border-bottom:1px solid var(--b0); }

/* Panel tabs */
.panel-tabs { display:flex;flex-shrink:0;border-bottom:1px solid var(--b1); }
.panel-tab { flex:1;padding:7px 0;font-family:var(--brand);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:center;transition:.15s;border-bottom:2px solid transparent;margin-bottom:-1px; }
.panel-tab:hover { color:var(--t3); }
.panel-tab.active { color:var(--p4);border-bottom-color:var(--p2); }

/* Bank config */
.bank-section { padding:10px 10px 6px;flex-shrink:0; }
.bank-row { display:flex;align-items:center;gap:6px;margin-bottom:5px; }
.bank-label { font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0;width:70px; }
.bank-input { background:var(--bg3);border:1px solid var(--b1);border-radius:5px;color:var(--text);font-family:var(--mono);font-size:11px;padding:3px 7px;outline:none;transition:.15s;width:60px;text-align:center; }
.bank-input:focus { border-color:var(--p2); }

/* Item card compact */
.bank-item-card {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  background:var(--b0); border:1px solid var(--b1); border-radius:7px;
  padding:6px 10px;
}
.bank-items-empty { color:var(--muted); font-size:10px; font-family:var(--mono); padding:8px 4px; }
.bic-name { font-family:var(--mono); font-size:11px; color:var(--t2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bic-id   { color:var(--muted); font-size:10px; }
.bic-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.bank-item-row { display:flex;align-items:center;gap:5px;background:var(--b0);border:1px solid var(--b1);border-radius:6px;padding:4px 7px;margin-bottom:3px; }
.bank-item-name { font-family:var(--mono);font-size:10px;color:var(--t2);flex:1; }
.bank-item-qty { width:44px;background:var(--bg3);border:1px solid var(--b1);border-radius:4px;color:var(--p4);font-family:var(--mono);font-size:10px;padding:2px 4px;text-align:center;outline:none; }
.bank-item-qty:focus { border-color:var(--p2); }
.bank-add-row { display:flex;gap:5px;margin-top:6px; }
.bank-add-row input { background:var(--bg3);border:1px solid var(--b1);border-radius:5px;color:var(--text);font-family:var(--mono);font-size:11px;padding:4px 6px;outline:none;transition:.15s; }
.bank-add-row input:focus { border-color:var(--p2); }

/* Zaap manager */
.zaap-item-row { display:flex;align-items:center;gap:5px;background:var(--b0);border:1px solid var(--b1);border-radius:6px;padding:4px 7px;margin-bottom:3px; }
.zaap-item-name { font-family:var(--mono);font-size:10px;color:var(--t2);flex:1; }
.zaap-item-mapid { font-family:var(--mono);font-size:9px;color:var(--muted);flex-shrink:0; }
.zaap-item-custom { font-size:9px;color:var(--amber);flex-shrink:0;font-family:var(--mono); }
.zaap-select { background:var(--bg3);border:1px solid var(--b2);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:11px;padding:5px 8px;outline:none;width:100%;cursor:pointer; }
.zaap-select:focus { border-color:var(--p2); }

/* Monster search */
.monster-search { background:var(--bg3);border:1px solid var(--b2);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:11px;padding:5px 8px;outline:none;width:100%; }
.monster-search:focus { border-color:var(--p2); }

/* ══════════════════════════════════════════════════════
   THÈME CLAIR — Dofus Rétro
   Activé par : <html data-theme="light">
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:     #f5ead0;
  --bg2:    #ede0c0;
  --bg3:    #e0d0a8;
  --bg4:    #d4be8a;
  --bg5:    #c8ac70;
  --b0:     rgba(140,98,38,.06);
  --b1:     rgba(140,98,38,.18);
  --b2:     rgba(140,98,38,.32);
  --b3:     rgba(140,98,38,.52);
  --text:   #1e0e04;
  --t2:     #3a2010;
  --t3:     #7a5828;
  --muted:  #a08040;
  --p1:     #b04808;
  --p2:     #c85808;
  --p3:     #d97020;
  --p4:     #963808;
  --green:  #3a6a10;
  --red:    #902020;
  --amber:  #c8960c;
  --sans:   'Nunito Sans', sans-serif;
  --brand:  'Nunito', sans-serif;
}

/* ── Body & fond ── */
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] body::before,
[data-theme="light"] body::after { display: none; }

/* ── Topbar : boiserie dorée ── */
[data-theme="light"] #topbar {
  background: linear-gradient(180deg, #433010 0%, #2a1808 55%, #1c1006 100%);
  border-bottom: 2px solid #c8960c;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  height: 62px;
}
[data-theme="light"] .hud-sep {
  background: linear-gradient(180deg, transparent, #906a0a 30%, #c8960c 50%, #906a0a 70%, transparent);
  height: 38px;
}
[data-theme="light"] .hud-brand-name { color: #f0c030; }
[data-theme="light"] .hud-brand-icon {
  background: rgba(200,150,10,.2);
  border-color: rgba(200,150,10,.45);
}
[data-theme="light"] .hud-btn {
  background: linear-gradient(180deg, #533010 0%, #3a2008 100%);
  border-color: #7a4e18;
  border-bottom-color: #160c04;
  color: #d4aa50;
  box-shadow: inset 0 1px 0 rgba(240,192,48,.1);
}[data-theme="light"] .hud-btn:hover {
  background: linear-gradient(180deg, #6e4818 0%, #4a2f0e 100%);
  border-color: #9a6a28;
  color: #f0c030;
}
[data-theme="light"] .hud-btn.active {
  background: linear-gradient(180deg, #432808 0%, #533010 100%);
  border-color: #c8960c;
  color: #f0c030;
}
[data-theme="light"] .hud-btn.danger.active {
  background: linear-gradient(180deg, #6a1808 0%, #4a1008 100%);
  border-color: #d83a2a;
  color: #ffd2cc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(216,58,42,.12);
}
[data-theme="light"] .hud-btn.danger.active img {
  filter: drop-shadow(0 0 6px rgba(216,58,42,.28));
}
[data-theme="light"] .hud-btn:disabled { opacity:.3; }
[data-theme="light"] .hud-btn.danger:hover {
  background: linear-gradient(180deg, #6a1808 0%, #4a1008 100%);
  border-color: #c02020;
  color: #f06060;
}
[data-theme="light"] #btn-mode-fight.active  { border-color:rgba(180,40,8,.7);  background:rgba(144,32,8,.3); }
[data-theme="light"] #btn-mode-gather.active { border-color:rgba(58,106,16,.7); background:rgba(42,88,8,.3); }
[data-theme="light"] .hud-dir.active {
  background: rgba(200,88,8,.25);
  border-color: rgba(200,88,8,.6);
  color: #f0c030;
}
[data-theme="light"] .hud-dir-toggle-btn.active {
  background:rgba(200,150,10,.18);
  border-color:rgba(200,150,10,.40);
  color:#8a6508;
}
[data-theme="light"] .hud-dir-toggle-badge {
  background:rgba(255,248,226,.96);
  border-color:rgba(160,118,38,.18);
  color:#8a6508;
}
[data-theme="light"] .hud-dir-toggle-btn.active .hud-dir-toggle-badge {
  background:rgba(200,150,10,.22);
  border-color:rgba(200,150,10,.44);
  color:#4a2a08;
}
[data-theme="light"] .hud-dir.needs-direction {
  animation-name: dir-missing-breath-light;
}
@keyframes dir-missing-breath-light {
  0%, 100% {
    background: rgba(255,240,198,.82);
    border-color: rgba(160,118,38,.22);
    color: #3a2010;
    box-shadow: 0 0 0 rgba(192,48,48,0);
  }
  50% {
    background: rgba(220,68,42,.18);
    border-color: rgba(192,48,48,.7);
    color: #8a1608;
    box-shadow: 0 0 0 4px rgba(192,48,48,.08), 0 0 16px rgba(192,48,48,.22);
  }
}
[data-theme="light"] #hud-mode-toast {
  background:rgba(255,248,224,.96);
  border-color:rgba(160,118,38,.22);
  color:#3a2010;
  box-shadow:0 16px 32px rgba(70,42,8,.18);
}
[data-theme="light"] #hud-mode-toast.toast-random {
  border-color:rgba(200,150,10,.34);
  color:#a07808;
}
[data-theme="light"] #hud-mode-toast.toast-single {
  border-color:rgba(150,56,8,.26);
  color:#7a5828;
}
[data-theme="light"] .hud-text-btn {
  background: linear-gradient(180deg, #533010 0%, #3a2008 100%);
  border-color: #7a4e18;
  border-bottom-color: #160c04;
  color: #d4aa50;
  box-shadow: inset 0 1px 0 rgba(240,192,48,.1);
}
[data-theme="light"] .hud-text-btn:hover { color: #f0c030; border-color: #9a6a28; }
[data-theme="light"] .hud-text-btn.outline {
  background: rgba(0,0,0,.25);
  border-color: rgba(200,150,10,.35);
  color: #c8a050;
}
/* Boutons spéciaux de la topbar */
[data-theme="light"] #btn-save  { background:linear-gradient(180deg,#963808 0%,#6a2808 100%); border-color:#c04808; color:#fff0c0; }
[data-theme="light"] #btn-import-lua { border-color:rgba(58,106,16,.55); color:#4a8a18; }
[data-theme="light"] #btn-load  { border-color:rgba(26,74,122,.5); color:#3a6a9a; }
[data-theme="light"] #btn-gen   { background:rgba(42,88,8,.25); border-color:rgba(58,106,16,.55); color:#3a6a10; }
[data-theme="light"] #btn-tests { background:rgba(200,150,10,.18); border-color:rgba(200,150,10,.5); color:#a07808; }
[data-theme="light"] #btn-export { border-color:rgba(140,98,38,.4); color:#7a5828; }
[data-theme="light"] #hud-zoom-val {
  background: rgba(0,0,0,.3);
  border-color: rgba(200,150,10,.38);
  color: #f0c030;
}
[data-theme="light"] #hud-coords {
  background: rgba(0,0,0,.35);
  border-color: rgba(200,150,10,.4);
  color: #c8960c;
}
[data-theme="light"] #trajet-name {
  background: rgba(0,0,0,.28);
  border-color: rgba(200,150,10,.38);
  color: #f0e0c0;
}
[data-theme="light"] #trajet-name::placeholder { color: rgba(160,120,60,.6); }
[data-theme="light"] #trajet-name:focus { border-color: #c8960c; }
/* Bouton toggle thème dans topbar */
[data-theme="light"] #btn-theme-toggle { color: #f0c030; }
[data-theme="light"] #btn-credits { color: #f0c030; }

.credits-modal-backdrop {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.74);
  z-index:246;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(5px);
}
.credits-modal-backdrop.open { display:flex; }
.credits-modal {
  width:min(460px, 94vw);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border-radius:14px;
  background:var(--bg2);
  border:1px solid var(--b2);
  box-shadow:0 10px 36px rgba(0,0,0,.45);
}
.credits-modal-kicker {
  font-size:10px;
  color:var(--p3);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.credits-modal-title {
  font-family:var(--brand);
  font-size:22px;
  color:var(--p4);
  line-height:1;
}
.credits-modal-copy {
  color:var(--t2);
  font-size:13px;
  line-height:1.5;
}
.credits-modal-list {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.credits-modal-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);
  font-size:11px;
  color:var(--text);
}
.credits-modal-label {
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:10px;
}
.credits-modal-note {
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
}
.credits-modal-actions {
  display:flex;
  gap:8px;
  margin-top:2px;
}
[data-theme="light"] .credits-modal {
  background:linear-gradient(180deg, #f6e7b8 0%, #ead08e 100%);
  border-color:rgba(140,98,38,.45);
}
[data-theme="light"] .credits-modal-kicker { color:#7a5a20; }
[data-theme="light"] .credits-modal-title { color:#3d2608; }
[data-theme="light"] .credits-modal-copy { color:#3a2010; }
[data-theme="light"] .credits-modal-row {
  background:rgba(255,248,216,.7);
  border-color:rgba(140,98,38,.18);
  color:#2a1808;
}
[data-theme="light"] .credits-modal-label,
[data-theme="light"] .credits-modal-note { color:#7a5828; }

/* ── Map container ── */
[data-theme="light"] #map-container { background: #b8a860; }
[data-theme="light"] #map-info {
  background: rgba(26,12,2,.82);
  border-color: rgba(200,150,10,.35);
}
[data-theme="light"] #map-info .info-zone  { color: #7aba40; font-family: 'Nunito', sans-serif; }
[data-theme="light"] #map-info .info-coords { color: #c8a050; }
[data-theme="light"] #map-cursor-tip {
  background: rgba(26,12,2,.82) !important;
  border-color: rgba(200,150,10,.35) !important;
}
[data-theme="light"] #map-cursor-tip .map-cursor-chip{
  background:rgba(255,244,214,.94);
  border-color:rgba(160,118,38,.24);
  color:#6a4210;
}
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-fight,
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-erase,
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-forbid{
  background:rgba(255,233,233,.94);
}
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-gather{
  background:rgba(232,250,231,.94);
}
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-bank{
  background:rgba(255,244,214,.98);
}
[data-theme="light"] #map-cursor-tip .map-cursor-chip.is-drag{
  background:rgba(237,241,247,.94);
}
[data-theme="light"] #forbid-banner {
  background: rgba(144,32,8,.85);
  border-bottom-color: #c02020;
  color: #ffd0b0;
}

/* ── Side panel ── */
[data-theme="light"] #side-panel { border-left-color: #c8960c; }
[data-theme="light"] .panel-tabs {
  background: linear-gradient(180deg, #d4c090 0%, #c2aa70 100%);
  border-bottom-color: #c8960c;
}
[data-theme="light"] .panel-tab { color: #7a5828; }
[data-theme="light"] .panel-tab:hover { color: #3a2010; }
[data-theme="light"] .panel-tab.active { color: #2a1808; border-bottom-color: #c85808; }
[data-theme="light"] .panel-head { border-bottom-color: rgba(140,98,38,.28); }
[data-theme="light"] .panel-title { color: #3a2010; }
[data-theme="light"] .wp-badge { background: #963808; }
[data-theme="light"] .wp-badge-stats { background: transparent; }
[data-theme="light"] .wp-badge-chip.is-main {
  background: rgba(150,56,8,.10);
  border-color: rgba(150,56,8,.24);
  color: #7c2d12;
}
[data-theme="light"] .wp-badge-chip.is-fight {
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.22);
  color: #b91c1c;
}
[data-theme="light"] .wp-badge-chip.is-gather {
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.22);
  color: #15803d;
}
[data-theme="light"] .wp-badge-chip.is-bank {
  background: rgba(202,138,4,.12);
  border-color: rgba(202,138,4,.24);
  color: #a16207;
}
[data-theme="light"] .wp-badge-chip.is-zaap {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.22);
  color: #1d4ed8;
}
[data-theme="light"] .wp-badge-chip.is-active {
  box-shadow: 0 0 0 1px rgba(255,255,255,.42), 0 0 12px rgba(59,130,246,.12);
}
[data-theme="light"] .ornament { color: rgba(140,98,38,.3); border-color: rgba(140,98,38,.1); }
[data-theme="light"] .wp-add-row { border-top-color: rgba(140,98,38,.22); }
[data-theme="light"] .wp-add-row input {
  background: rgba(255,248,216,.8);
  border-color: rgba(140,98,38,.35);
  color: #1e0e04;
}
[data-theme="light"] .wp-add-row input:focus { border-color: #c85808; }
[data-theme="light"] #export-section { border-top-color: rgba(140,98,38,.22); }

/* ── Step list items ── */
[data-theme="light"] .wp-item {
  background: linear-gradient(180deg, rgba(255,248,216,.92), rgba(245,232,188,.82));
  border-color: rgba(160,118,38,.22);
}
[data-theme="light"] .wp-item:hover {
  background: linear-gradient(180deg, rgba(255,244,198,.98), rgba(247,234,190,.9));
  border-color: rgba(160,118,38,.42);
}
[data-theme="light"] .wp-item.sel {
  border-color: rgba(200,88,8,.42);
  background: linear-gradient(180deg, rgba(255,236,198,.95), rgba(255,229,182,.88));
  box-shadow: inset 0 0 0 1px rgba(200,88,8,.12);
}
[data-theme="light"] .wp-item-sub {
  border-color: rgba(59,130,246,.22);
  background: linear-gradient(180deg, rgba(242,246,255,.95), rgba(232,239,252,.98));
}
[data-theme="light"] .wp-item-sub:hover {
  border-color: rgba(59,130,246,.34);
  background: linear-gradient(180deg, rgba(235,242,255,.96), rgba(226,235,251,.99));
}
[data-theme="light"] .wp-item-sub.sel {
  border-color: rgba(59,130,246,.48);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.14);
}
[data-theme="light"] .wp-num  { background: #3d2608; color: #f0c030; }
[data-theme="light"] .wp-coords { color: #3a2010; }
[data-theme="light"] .wp-meta-path   { background: rgba(112,90,168,.12); border-color: rgba(112,90,168,.24); color: #6f52b8; }
[data-theme="light"] .wp-meta-random { background: rgba(200,150,10,.14); border-color: rgba(200,150,10,.3); color: #a07808; }
[data-theme="light"] .wp-meta-rt     { background: rgba(26,74,122,.12); border-color: rgba(26,74,122,.24); color: #3a6a9a; }
[data-theme="light"] .wp-meta-bank   { background: rgba(200,88,8,.12); border-color: rgba(200,88,8,.24); color: #963808; }
[data-theme="light"] .wp-meta-zaap   { background: rgba(112,90,168,.11); border-color: rgba(112,90,168,.22); color: #6f52b8; }
[data-theme="light"] .wp-meta-zaap-dest { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.22); color: #1d4ed8; }
[data-theme="light"] .wp-del { color: #a08040; }
[data-theme="light"] .wp-del:hover { color: #902020; background: rgba(144,32,8,.1); }
[data-theme="light"] .wp-mode-move   { background: rgba(58,32,16,.1);  color: #3a2010; }
[data-theme="light"] .wp-mode-fight  { background: rgba(144,32,8,.14); color: #902020; }
[data-theme="light"] .wp-mode-gather { background: rgba(58,106,16,.15);color: #3a6a10; }
[data-theme="light"] .wp-mode-bank   { background: rgba(200,150,10,.16); color: #a07808; }
[data-theme="light"] .wp-mode-zaap   { background: rgba(59,130,246,.12); color: #1d4ed8; }

/* ── Bank / zaap inputs ── */
[data-theme="light"] .bank-input,
[data-theme="light"] .combat-num-input {
  background: rgba(255,248,216,.8);
  border-color: rgba(140,98,38,.35);
  color: #1e0e04;
}
[data-theme="light"] .bank-input:focus,
[data-theme="light"] .combat-num-input:focus { border-color: #c85808; }
[data-theme="light"] .bank-item-row,
[data-theme="light"] .zaap-item-row {
  background: rgba(255,248,216,.5);
  border-color: rgba(160,118,38,.22);
}
[data-theme="light"] .bank-item-card {
  background: rgba(255,248,216,.5);
  border-color: rgba(160,118,38,.22);
}
[data-theme="light"] .bic-name { color: #3a2010; }
[data-theme="light"] .zaap-item-mapid { color: #a08040; }
[data-theme="light"] .bank-item-qty {
  background: rgba(255,248,216,.8);
  border-color: rgba(140,98,38,.35);
  color: #963808;
}
[data-theme="light"] .zaap-select,
[data-theme="light"] .monster-search {
  background: rgba(255,248,216,.85);
  border-color: rgba(140,98,38,.42);
  color: #1e0e04;
}
[data-theme="light"] .zaap-select:focus,
[data-theme="light"] .monster-search:focus { border-color: #c85808; }
[data-theme="light"] .monster-dropdown {
  background: #ede0c0;
  border-color: rgba(140,98,38,.42);
}
[data-theme="light"] .monster-option { color: #3a2010; }
[data-theme="light"] .monster-option:hover { background: rgba(200,88,8,.12); color: #1e0e04; }
[data-theme="light"] .monster-tag {
  background: rgba(200,88,8,.15);
  border-color: rgba(200,88,8,.38);
  color: #963808;
}
[data-theme="light"] .monster-tags-wrap {
  background: rgba(255,248,216,.65);
  border-color: rgba(140,98,38,.28);
}

/* ── .btn générique (modales) ── */
[data-theme="light"] .btn {
  background: rgba(255,248,216,.6);
  border-color: rgba(140,98,38,.3);
  color: #3a2010;
}
[data-theme="light"] .btn:hover { background: rgba(255,240,180,.85); border-color: rgba(140,98,38,.5); }
[data-theme="light"] .btn.primary {
  background: rgba(200,88,8,.2);
  border-color: rgba(200,88,8,.5);
  color: #963808;
}
[data-theme="light"] .btn.primary:hover { background: rgba(200,88,8,.32); }
[data-theme="light"] .btn.danger { color: #902020; }
[data-theme="light"] .btn.danger:hover { border-color: #902020; background: rgba(144,32,8,.1); }

/* ── Modales ── */
[data-theme="light"] #modal,
[data-theme="light"] #modal-save-backdrop > div,
[data-theme="light"] #modal-gen-backdrop > div,
[data-theme="light"] #modal-bank-backdrop > div,
[data-theme="light"] #modal-test-backdrop > div {
  background: #f0e4c8 !important;
  border-color: #c8960c !important;
}
[data-theme="light"] #modal-title { color: #3d2608; font-family: 'Nunito', sans-serif; }
[data-theme="light"] .t-entry {
  background: rgba(255,248,216,.6);
  border-color: rgba(140,98,38,.25);
}
[data-theme="light"] .t-entry:hover { background: rgba(255,240,180,.85); border-color: rgba(140,98,38,.45); }
[data-theme="light"] .t-entry-name { color: #1e0e04; }
[data-theme="light"] .t-entry-meta { color: #7a5828; }

/* ── Opt-cards (save modal) ── */
[data-theme="light"] .opt-card {
  background: rgba(255,248,216,.6);
  border-color: rgba(140,98,38,.28);
}
[data-theme="light"] .opt-card:hover { background: rgba(255,240,180,.85); border-color: rgba(140,98,38,.48); }
[data-theme="light"] .opt-card-label { color: #3a2010; }
[data-theme="light"] .opt-card.on .opt-card-label { color: #1e0e04; }
[data-theme="light"] .opt-card-desc { color: #a08040; }
[data-theme="light"] .opt-card-dot { background: rgba(255,248,216,.8); border-color: rgba(140,98,38,.4); }

/* ── Test cards ── */
[data-theme="light"] .test-card {
  background: rgba(255,248,216,.6) !important;
  border-color: rgba(140,98,38,.28) !important;
}
[data-theme="light"] .test-card-label { color: #2a1808 !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; }
[data-theme="light"] .test-card-desc  { color: #7a5828 !important; }
/* Boutons Générer dans modal test */
[data-theme="light"] #modal-test-backdrop .btn.sm[onclick^="runTest"] {
  background: linear-gradient(180deg, #d07010 0%, #963808 100%) !important;
  border-color: #e08020 !important;
  color: #fff0c0 !important;
}
/* Zone résultat lua */
[data-theme="light"] #test-result-code { background: #180e04 !important; color: #d4b870 !important; }
/* Scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(140,98,38,.4); }

/* ── Gen modal mode buttons ── */
[data-theme="light"] #gen-mode-move.active   { background:rgba(58,32,16,.2);  border-color:rgba(58,32,16,.5);  color:#3a2010; }
[data-theme="light"] #gen-mode-fight.active  { background:rgba(144,32,8,.2);  border-color:rgba(144,32,8,.5);  color:#902020; }
[data-theme="light"] #gen-mode-gather.active { background:rgba(42,88,8,.2);   border-color:rgba(42,88,8,.5);   color:#3a6a10; }

/* ── Lua code panel ── */
[data-theme="light"] #lua-code { background: #180e04; color: #d4b870; border-color: rgba(140,98,38,.3); }

/* ── PIN screen en thème clair ── */
[data-theme="light"] .pin-screen {
  background: #2a1808 !important;
}
[data-theme="light"] .pin-key {
  background: #3d2608 !important;
  border-color: rgba(200,150,10,.25) !important;
  color: #f0e0c0 !important;
}
[data-theme="light"] .pin-key:hover {
  background: #533010 !important;
  border-color: rgba(200,150,10,.45) !important;
}
[data-theme="light"] .pin-key:active { background: #6a4018 !important; }
[data-theme="light"] .pin-key.del { color: #a07838 !important; }
[data-theme="light"] .pin-key.del:hover { color: #f0c030 !important; }
[data-theme="light"] .pin-progress-wrap { background: rgba(255,255,255,.1); }
[data-theme="light"] .pin-progress-bar { background: linear-gradient(90deg,#c85808,#f0a030); }

/* ── opt-card barre gauche couleur correcte en thème clair ── */
[data-theme="light"] .opt-card.on::before {
  background: rgba(200,88,8,.9) !important;
}
.monster-dropdown { background:var(--bg2);border:1px solid var(--b2);border-radius:6px;max-height:140px;overflow-y:auto;margin-top:2px;display:none;scrollbar-width:thin;scrollbar-color:var(--b2) transparent; }
.monster-dropdown.open { display:block; }
.monster-option { padding:4px 8px;font-family:var(--mono);font-size:10px;color:var(--t2);cursor:pointer;transition:.1s; }
.monster-option:hover { background:rgba(139,92,246,.15);color:var(--text); }
.monster-option .mid { color:var(--muted);margin-right:6px; }
.monster-tag { display:inline-flex;align-items:center;gap:4px;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.4);border-radius:99px;padding:2px 8px;font-family:var(--mono);font-size:10px;color:var(--p4);margin:2px; }
.monster-tag button { background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0;line-height:1; }
.monster-tag button:hover { color:var(--red); }
.monster-tags-wrap { display:flex;flex-wrap:wrap;min-height:24px;padding:4px;background:var(--bg3);border:1px solid var(--b1);border-radius:6px; }
.combat-num-row { display:flex;align-items:center;gap:8px; }
.combat-num-label { font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0; }
.combat-num-input { width:52px;background:var(--bg3);border:1px solid var(--b1);border-radius:5px;color:var(--text);font-family:var(--mono);font-size:11px;padding:3px 6px;outline:none;text-align:center; }
.combat-num-input:focus { border-color:var(--p2); }
.save-modal-shell {
  width:min(980px, 95vw) !important;
  max-height:calc(100vh - 22px) !important;
  padding:16px !important;
  gap:10px !important;
}
.save-modal-tabs {
  display:flex;
  gap:8px;
  padding:4px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(167,139,250,.14);
  border-radius:12px;
}
.save-modal-tab {
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--t3);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .15s;
}
.save-modal-tab:hover {
  color:var(--text);
  border-color:rgba(167,139,250,.16);
}
.save-modal-tab.is-active {
  color:var(--text);
  border-color:rgba(167,139,250,.28);
  background:rgba(139,92,246,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.save-modal-tab-badge {
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  font-size:10px;
}
.save-modal-section {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.save-modal-section.is-hidden {
  display:none !important;
}
.save-modal-main-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.18fr) minmax(300px, .82fr);
  gap:10px;
  align-items:start;
}
.save-modal-main-col {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.save-modal-main-col > * {
  min-width:0;
}
.save-modal-main-grid > * {
  min-width:0;
}
.save-modules-block {
  gap:7px !important;
  min-width:0;
}
.save-modules-grid {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:5px !important;
}
.save-modules-grid-wide {
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}
.save-modal-actions {
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid rgba(167,139,250,.10);
}
.save-config-block {
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:12px;
  background:linear-gradient(180deg, rgba(139,92,246,.07), rgba(67,56,202,.03));
  border:1px solid rgba(167,139,250,.16);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.save-config-head {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.save-config-kicker {
  font-size:10px;
  color:var(--p3);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.save-config-copy {
  font-size:11px;
  color:var(--t3);
  font-family:var(--mono);
  line-height:1.5;
}
.save-config-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 13px;
  background:linear-gradient(180deg, rgba(19,13,34,.94), rgba(12,9,24,.9));
  border:1px solid rgba(167,139,250,.14);
  border-radius:12px;
}
.save-config-top-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.save-config-card-compact {
  gap:8px;
  padding:10px 11px;
}
.save-config-card-combat {
  border-color:rgba(248,113,113,.14);
  background:linear-gradient(180deg, rgba(24,13,31,.92), rgba(15,9,22,.9));
}
.save-config-card-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.save-config-card-icon {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  font-size:15px;
}
.save-config-card-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.save-config-card-title {
  font-family:var(--brand);
  font-size:17px;
  color:var(--text);
  line-height:1.05;
}
.save-config-card-sub {
  font-size:10px;
  color:var(--t3);
  font-family:var(--mono);
  line-height:1.5;
}
.save-config-bank-row {
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.save-config-bank-field,
.save-config-stat {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.save-config-field-label {
  font-size:9px;
  font-family:var(--mono);
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.save-config-inline-input {
  display:flex;
  align-items:center;
  gap:8px;
}
.save-config-inline-suffix {
  font-family:var(--mono);
  font-size:11px;
  color:var(--text);
}
.save-config-note {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.20);
  color:#fcd34d;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.4;
}
.save-config-note strong {
  color:#fff7d6;
  font-size:10px;
}
.save-config-note-icon {
  font-size:11px;
}
.save-config-stats-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.save-config-stats-row-compact {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.save-config-stat {
  min-width:132px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.save-config-stats-row-compact .save-config-stat {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
}
.save-config-stats-row-compact .save-config-field-label {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.save-config-stats-row-compact .combat-num-input {
  justify-self:end;
}
@media (max-width: 860px) {
  .save-config-top-grid {
    grid-template-columns:1fr;
  }
  .save-config-stats-row-compact {
    grid-template-columns:1fr;
  }
}
.save-config-monster-group {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.save-config-monster-auto {
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  padding:5px 9px;
  border-radius:8px;
  border:1px solid rgba(245,158,11,.24);
  background:rgba(245,158,11,.08);
  color:var(--t2);
  font-size:10px;
  font-family:var(--mono);
  letter-spacing:.03em;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}
.save-config-monster-auto input {
  margin:0;
  accent-color:#f59e0b;
}
.save-config-monster-auto:hover {
  border-color:rgba(245,158,11,.38);
  background:rgba(245,158,11,.12);
}
.save-config-monster-head {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--t2);
  font-family:var(--mono);
}
.save-config-monster-head em {
  color:var(--t3);
  font-style:normal;
}
.save-config-monster-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
}
.save-config-monster-badge.is-force {
  background:rgba(16,185,129,.16);
  border:1px solid rgba(16,185,129,.32);
  color:#86efac;
}
.save-config-monster-badge.is-forbidden {
  background:rgba(244,63,94,.14);
  border:1px solid rgba(244,63,94,.28);
  color:#fda4af;
}
[data-theme="light"] .save-config-block {
  background:linear-gradient(180deg, rgba(255,244,210,.86), rgba(248,235,190,.74));
  border-color:rgba(160,118,38,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="light"] .save-config-copy,
[data-theme="light"] .save-config-card-sub,
[data-theme="light"] .save-config-field-label,
[data-theme="light"] .save-config-monster-head em {
  color:#7a5828;
}
[data-theme="light"] .save-config-monster-auto {
  background:rgba(255,223,151,.34);
  border-color:rgba(170,112,18,.24);
  color:#7a5828;
}
[data-theme="light"] .save-config-card {
  background:linear-gradient(180deg, rgba(255,248,226,.96), rgba(246,236,204,.92));
  border-color:rgba(160,118,38,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="light"] .save-config-card-combat {
  background:linear-gradient(180deg, rgba(255,244,228,.96), rgba(248,234,214,.92));
  border-color:rgba(188,92,52,.16);
}
[data-theme="light"] .save-config-card-icon,
[data-theme="light"] .save-config-stat {
  background:rgba(255,255,255,.66);
  border-color:rgba(160,118,38,.18);
}
[data-theme="light"] .save-config-card-title,
[data-theme="light"] .save-config-inline-suffix,
[data-theme="light"] .save-config-monster-head {
  color:#2f1907;
}
[data-theme="light"] .save-config-note {
  background:rgba(200,150,10,.10);
  border-color:rgba(200,150,10,.22);
  color:#8a6508;
}
[data-theme="light"] .save-config-note strong {
  color:#5a2c00;
}

/* opt-card — nouvelle UI grille pour les options de save */
.opt-card {
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--b1);
  border-radius:9px; padding:9px 10px;
  cursor:pointer; transition:all .15s; user-select:none;
  position:relative; overflow:hidden;
}
.opt-card-inline {
  align-items:flex-start;
}
.opt-card-inline .opt-card-body {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.opt-card-bankitems {
  grid-column:1 / -1;
}
.opt-card-bankitems .opt-card-body {
  gap:5px;
}
.opt-card-bankitems .bank-items-inline-config {
  gap:6px;
}
.opt-card-bankitems .bank-items-inline-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px;
}
.opt-card-bankitems .bank-item-card {
  min-width:0;
  gap:5px;
  padding:4px 6px;
  border-radius:8px;
}
.opt-card-bankitems .bic-name {
  font-size:10px;
}
.opt-card-bankitems .bic-id {
  font-size:8px;
}
.opt-card-bankitems .bic-right {
  gap:3px;
}
.opt-card-bankitems .bank-item-qty {
  width:40px !important;
  font-size:10px;
  padding:1px 3px;
}
.opt-card-bankitems .wp-del {
  width:18px;
  height:18px;
  margin-top:0;
  font-size:11px;
}
.opt-card-bankitems .bank-items-empty {
  padding:5px 2px;
  font-size:9px;
}
.opt-card-bankitems .bank-items-inline-add {
  grid-template-columns:64px 54px minmax(0, 1fr) auto;
  gap:5px;
}
.opt-card-bankitems .bank-items-inline-add input {
  font-size:10px;
  padding:4px 6px;
}
.opt-card-bankitems .bank-items-inline-add .btn {
  min-height:28px;
  padding:0 8px;
  font-size:10px;
}
.opt-inline-config {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-top:2px;
}
.opt-inline-config.is-disabled {
  opacity:.5;
  filter:saturate(.55);
}
.bank-items-inline-config {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
}
.bank-items-inline-config.is-disabled {
  opacity:.5;
  filter:saturate(.55);
}
.bank-items-inline-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:6px;
}
.bank-items-inline-add {
  display:grid;
  grid-template-columns:90px 70px minmax(0, 1fr) auto;
  gap:6px;
  align-items:center;
}
.bank-items-inline-add input {
  min-width:0;
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:5px;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  padding:5px 7px;
  outline:none;
}
.bank-items-inline-add input:focus {
  border-color:var(--p2);
}
.bank-items-inline-add input[type="number"] {
  text-align:center;
}
.bank-items-inline-config input:disabled,
.bank-items-inline-config button:disabled,
.bank-items-inline-add button:disabled {
  opacity:.55;
}
.opt-inline-pill {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);
  font-size:9px;
  color:var(--t3);
}
.opt-inline-pill input[type="checkbox"] {
  margin:0;
  accent-color:#f59e0b;
}
.opt-inline-pill span {
  white-space:nowrap;
}
.opt-inline-pill input[type="number"] {
  width:52px;
  min-width:0;
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:5px;
  color:var(--text);
  font-family:var(--mono);
  font-size:10px;
  padding:3px 5px;
  text-align:center;
  outline:none;
}
.opt-inline-pill input[type="number"]:focus {
  border-color:var(--p2);
}
.opt-inline-pill input:disabled {
  opacity:.55;
}
.opt-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:rgba(var(--opt-color,139,92,246),.0);
  transition:background .15s; border-radius:9px 0 0 9px;
}
.opt-card:hover { border-color:var(--b2); background:var(--bg4); }
.opt-card.on { border-color:rgba(var(--opt-color,139,92,246),.45); background:rgba(var(--opt-color,139,92,246),.08); }
.opt-card.on::before { background:rgba(var(--opt-color,139,92,246),.9); }
.opt-card-icon { font-size:16px; flex-shrink:0; width:22px; text-align:center; }
.opt-card-body { flex:1; min-width:0; }
.opt-card-label { font-family:var(--sans); font-size:12px; font-weight:600; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opt-card.on .opt-card-label { color:var(--text); }
.opt-card-desc { font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:1px; }
.opt-card-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--bg4); border:1.5px solid var(--b2);
  transition:all .15s;
}
.opt-card.on .opt-card-dot { background:rgb(var(--opt-color,139,92,246)); border-color:transparent; box-shadow:0 0 6px rgba(var(--opt-color,139,92,246),.6); }

/* Save summary */
.save-summary-block {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:10px;
  background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(67,56,202,.04));
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.save-summary-kicker {
  font-size:9px;
  color:var(--p3);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.save-summary-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.save-summary-card {
  --summary-accent: var(--p4);
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  padding:10px;
  background:linear-gradient(180deg, rgba(18,12,34,.96), rgba(11,8,24,.9));
  border:1px solid rgba(167,139,250,.16);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.save-summary-card.is-featured {
  border-color:rgba(167,139,250,.34);
  box-shadow:0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.save-summary-card-head {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.save-summary-card-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  flex-shrink:0;
}
.save-summary-card-title {
  font-size:9px;
  color:var(--t3);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.save-summary-card-value {
  font-size:18px;
  color:var(--summary-accent);
  font-family:var(--brand);
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.save-summary-card-sub {
  margin-top:-2px;
  font-size:10px;
  color:var(--t3);
  font-family:var(--mono);
}
.save-summary-card-bank {
  gap:12px;
  min-width:0;
}
.save-summary-bank-picker {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.save-summary-bank-select {
  flex:1 1 auto;
  width:100%;
  min-width:0;
  max-width:100%;
  font-size:11px;
}
.save-summary-card-bank .save-summary-card-meta {
  margin-top:-2px;
}
.save-summary-card-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.save-summary-chip {
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);
  font-size:9px;
  color:var(--t3);
}
.save-summary-chip.is-fight {
  background:rgba(248,113,113,.14);
  border-color:rgba(248,113,113,.30);
  color:#fca5a5;
}
.save-summary-chip.is-gather {
  background:rgba(52,211,153,.14);
  border-color:rgba(52,211,153,.28);
  color:#86efac;
}
.save-summary-chip.is-bank {
  background:rgba(45,212,191,.14);
  border-color:rgba(45,212,191,.28);
  color:#99f6e4;
}
.save-summary-chip.is-zaap {
  background:rgba(96,165,250,.14);
  border-color:rgba(96,165,250,.28);
  color:#bfdbfe;
}
.save-summary-chip.is-ok {
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.34);
  color:#86efac;
}
.save-summary-chip.is-warn {
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.28);
  color:#fcd34d;
}
.save-summary-chip.is-danger {
  background:rgba(244,63,94,.14);
  border-color:rgba(244,63,94,.28);
  color:#fda4af;
}
.save-summary-chip.is-route {
  background:rgba(167,139,250,.12);
  border-color:rgba(167,139,250,.24);
  color:var(--p4);
}
.save-summary-chip.is-map {
  background:rgba(250,204,21,.12);
  border-color:rgba(250,204,21,.26);
  color:#facc15;
}
.save-summary-flow {
  display:none;
  flex-direction:column;
  gap:6px;
  padding:8px;
  background:rgba(9,7,22,.42);
  border:1px dashed rgba(167,139,250,.14);
  border-radius:12px;
}
.save-summary-flow-rail {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.save-summary-flow-segment {
  --flow-accent: var(--p4);
  --flow-bg: rgba(255,255,255,.04);
  --flow-border: rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:6px 8px;
  border-radius:10px;
  background:var(--flow-bg);
  border:1px solid var(--flow-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.save-summary-flow-segment-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:7px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.save-summary-flow-segment-copy {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.save-summary-flow-segment-label {
  font-family:var(--brand);
  font-size:11px;
  line-height:1.05;
  color:var(--text);
}
.save-summary-flow-segment-sub {
  font-family:var(--mono);
  font-size:8px;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.save-summary-flow-segment.is-fight {
  --flow-accent: #f87171;
  --flow-bg: rgba(248,113,113,.12);
  --flow-border: rgba(248,113,113,.26);
}
.save-summary-flow-segment.is-gather {
  --flow-accent: #34d399;
  --flow-bg: rgba(52,211,153,.12);
  --flow-border: rgba(52,211,153,.26);
}
.save-summary-flow-segment.is-route {
  --flow-accent: #a78bfa;
  --flow-bg: rgba(167,139,250,.10);
  --flow-border: rgba(167,139,250,.22);
}
.save-summary-flow-segment.is-pods {
  --flow-accent: #f59e0b;
  --flow-bg: rgba(245,158,11,.10);
  --flow-border: rgba(245,158,11,.24);
}
.save-summary-flow-segment.is-bank {
  --flow-accent: #2dd4bf;
  --flow-bg: rgba(45,212,191,.10);
  --flow-border: rgba(45,212,191,.24);
}
.save-summary-flow-segment.is-zaap {
  --flow-accent: #60a5fa;
  --flow-bg: rgba(96,165,250,.10);
  --flow-border: rgba(96,165,250,.24);
}
.save-summary-flow-segment.is-return {
  --flow-accent: #60a5fa;
  --flow-bg: rgba(96,165,250,.10);
  --flow-border: rgba(96,165,250,.24);
}
.save-summary-flow-segment.is-warn {
  --flow-accent: #f43f5e;
  --flow-bg: rgba(244,63,94,.10);
  --flow-border: rgba(244,63,94,.24);
}
.save-summary-modules {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.save-summary-module-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.22);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
}
.save-summary-module-pill.is-on {
  background:rgba(167,139,250,.12);
  border-color:rgba(167,139,250,.30);
  color:#ede9fe;
}
.save-summary-module-pill.is-off {
  background:rgba(148,163,184,.08);
  border-color:rgba(148,163,184,.18);
  color:var(--t3);
  opacity:.82;
}
.save-summary-module-pill-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:12px;
}
.save-summary-module-pill-label {
  white-space:nowrap;
}
.save-summary-module-pill-state {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  background:rgba(0,0,0,.18);
  color:inherit;
}
[data-theme="light"] .save-summary-module-pill {
  background:rgba(255,255,255,.72);
  border-color:rgba(160,118,38,.18);
  color:#3a240b;
}
[data-theme="light"] .save-summary-module-pill.is-on {
  background:rgba(59,130,246,.08);
  border-color:rgba(59,130,246,.18);
  color:#1d4ed8;
}
[data-theme="light"] .save-summary-module-pill.is-off {
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.18);
  color:#7a5828;
}
[data-theme="light"] .save-summary-block {
  background:linear-gradient(180deg, rgba(255,244,210,.82), rgba(248,235,190,.72));
  border-color:rgba(160,118,38,.22);
}
[data-theme="light"] .save-summary-card {
  background:linear-gradient(180deg, rgba(255,248,226,.96), rgba(246,236,204,.92));
  border-color:rgba(160,118,38,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="light"] .save-summary-flow {
  background:rgba(255,248,224,.72);
  border-color:rgba(160,118,38,.18);
}
[data-theme="light"] .save-summary-flow-segment,
[data-theme="light"] .save-summary-card-icon {
  background:rgba(255,255,255,.66);
  border-color:rgba(160,118,38,.18);
}
[data-theme="light"] .save-summary-flow-caption,
[data-theme="light"] .save-summary-flow-segment-label {
  color:#2f1907;
}
[data-theme="light"] .save-summary-flow-segment-sub {
  color:#7a5828;
}
[data-theme="light"] .save-summary-chip.is-zaap {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
[data-theme="light"] .opt-inline-pill {
  background:rgba(255,255,255,.62);
  border-color:rgba(160,118,38,.18);
  color:#7a5828;
}
[data-theme="light"] .bank-items-inline-add input {
  background:rgba(255,248,216,.9);
  border-color:rgba(140,98,38,.35);
  color:#1e0e04;
}
[data-theme="light"] .opt-inline-pill input[type="number"] {
  background:rgba(255,248,216,.9);
  border-color:rgba(140,98,38,.35);
  color:#1e0e04;
}

@media (max-width: 980px) {
  .save-modal-shell {
    width:min(900px, 96vw) !important;
  }
  .save-modal-main-grid {
    grid-template-columns:1fr;
  }
  .save-modal-main-grid .save-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .save-modules-grid-wide {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .opt-inline-config {
    grid-template-columns:1fr;
  }
  .bank-items-inline-add {
    grid-template-columns:90px 70px minmax(0, 1fr);
  }
  .bank-items-inline-add button {
    grid-column:1 / -1;
  }
}

@media (max-width: 720px) {
  .save-modal-shell {
    padding:14px !important;
    gap:10px !important;
  }
  .save-modal-tabs {
    flex-direction:column;
  }
  .save-modal-main-grid .save-summary-grid,
  .save-summary-flow-rail,
  .save-modules-grid,
  .save-modules-grid-wide {
    grid-template-columns:1fr !important;
  }
  .save-modal-actions {
    flex-wrap:wrap;
  }
  .save-modal-actions > .btn {
    min-width:calc(50% - 4px);
  }
  .bank-items-inline-add {
    grid-template-columns:1fr;
  }
}

/* Options toggle dans la modale save */
.opt-row { display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--b0);border:1px solid var(--b1);border-radius:7px;cursor:pointer;transition:.15s;user-select:none; }
.opt-row:hover { background:rgba(139,92,246,.1);border-color:var(--b2); }
.opt-toggle { width:32px;height:18px;border-radius:99px;background:var(--bg4);border:1px solid var(--b2);position:relative;flex-shrink:0;transition:.2s; }
.opt-toggle::after { content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:.2s; }
.opt-row.on .opt-toggle { background:rgba(124,58,237,.4);border-color:var(--p2); }
.opt-row.on .opt-toggle::after { left:16px;background:var(--p4); }
.opt-label { font-family:var(--sans);font-size:12px;color:var(--t2);flex:1; }
.opt-desc { font-family:var(--mono);font-size:9px;color:var(--muted); }

#modal-backdrop { display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
#modal-backdrop.open { display: flex; }
#modal { background:var(--bg2);border:1px solid var(--b2);border-radius:14px;padding:22px;width:820px;max-width:96vw;display:flex;flex-direction:column;gap:12px;max-height:92vh;box-shadow:0 8px 32px rgba(0,0,0,.6); }
#modal-title { font-family: var(--brand); font-size: 15px; color: var(--p4); }
#modal-list { overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:280px; }
.dir-modal-backdrop { display:none;position:fixed;inset:0;background:rgba(0,0,0,.74);z-index:240;align-items:center;justify-content:center;backdrop-filter:blur(5px); }
.dir-modal-backdrop.open { display:flex; }
.dir-modal {
  width:420px;max-width:94vw;
  background:linear-gradient(180deg, rgba(22,16,44,.98), rgba(13,10,29,.99));
  border:1px solid rgba(167,139,250,.24);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.04);
  padding:22px;
  display:flex;flex-direction:column;gap:14px;
}
.dir-modal-title { display:flex;align-items:center;gap:10px;font-family:var(--brand);font-size:16px;color:var(--p4); }
.dir-modal-kicker {
  display:inline-flex;align-items:center;gap:6px;width:max-content;
  padding:4px 9px;border-radius:999px;
  background:rgba(124,58,237,.14);border:1px solid rgba(167,139,250,.24);
  color:var(--p3);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.dir-modal-copy { color:var(--t2);font-size:13px;line-height:1.55; }
.dir-modal-hint { color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1.5; }
.dir-modal-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;justify-items:center; }
.dir-modal-spacer { width:100%;height:1px;opacity:0; }
.dir-modal-btn {
  width:100%;height:58px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(167,139,250,.22);
  border-radius:12px;
  color:var(--text);cursor:pointer;transition:.16s;
}
.dir-modal-btn:hover {
  transform:translateY(-1px);
  background:rgba(124,58,237,.16);
  border-color:rgba(167,139,250,.42);
  box-shadow:0 12px 22px rgba(0,0,0,.24);
}
.dir-modal-btn svg { width:26px;height:26px;fill:currentColor; }
.dir-modal-actions { display:flex;gap:8px;margin-top:2px; }
[data-theme="light"] .dir-modal {
  background:linear-gradient(180deg, rgba(255,246,214,.98), rgba(246,232,186,.99));
  border-color:rgba(160,118,38,.25);
  box-shadow:0 20px 50px rgba(70,42,8,.24), inset 0 1px 0 rgba(255,255,255,.38);
}
[data-theme="light"] .dir-modal-kicker {
  background:rgba(200,150,10,.12);
  border-color:rgba(160,118,38,.28);
  color:#8a5a08;
}
[data-theme="light"] .dir-modal-copy { color:#3a2010; }
[data-theme="light"] .dir-modal-hint { color:#7a5a20; }
[data-theme="light"] .dir-modal-btn {
  background:rgba(255,248,216,.88);
  border-color:rgba(160,118,38,.26);
  color:#3a2010;
}
[data-theme="light"] .dir-modal-btn:hover {
  background:rgba(255,240,198,.96);
  border-color:rgba(200,88,8,.34);
}
.zaap-modal-backdrop { display:none;position:fixed;inset:0;background:rgba(0,0,0,.76);z-index:245;align-items:center;justify-content:center;backdrop-filter:blur(5px); }
.zaap-modal-backdrop.open { display:flex; }
.zaap-modal {
  width:480px;max-width:94vw;
  background:linear-gradient(180deg, rgba(22,16,44,.98), rgba(13,10,29,.99));
  border:1px solid rgba(96,165,250,.24);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.04);
  padding:22px;
  display:flex;flex-direction:column;gap:14px;
}
.zaap-modal-kicker {
  display:inline-flex;align-items:center;gap:6px;width:max-content;
  padding:4px 9px;border-radius:999px;
  background:rgba(96,165,250,.14);border:1px solid rgba(96,165,250,.24);
  color:#93c5fd;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.zaap-modal-title {
  display:flex;align-items:center;gap:10px;
  font-family:var(--brand);font-size:16px;color:#bfdbfe;
}
.zaap-modal-title-icon { width:20px;height:20px;object-fit:contain;flex-shrink:0; }
.zaap-modal-copy { color:var(--t2);font-size:13px;line-height:1.55; }
.zaap-modal-route {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1.15fr);
  gap:10px;
  align-items:stretch;
}
.zaap-modal-route-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:16px;
  font-family:var(--mono);
}
.zaap-modal-node {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.zaap-modal-node-kicker {
  color:var(--t3);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.zaap-modal-node-main {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(148,163,184,.08);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.zaap-modal-node.is-from .zaap-modal-node-main {
  border-color:rgba(167,139,250,.24);
  background:rgba(167,139,250,.10);
  color:#ddd6fe;
}
.zaap-modal-node.is-to .zaap-modal-node-main {
  border-color:rgba(96,165,250,.24);
  background:rgba(96,165,250,.10);
  color:#bfdbfe;
}
.zaap-modal-node-main.is-select {
  gap:8px;
}
.zaap-modal-node-icon {
  width:18px;
  height:18px;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 0 5px rgba(167,139,250,.22));
}
.zaap-modal-node-main strong {
  min-width:0;
  font-size:13px;
  line-height:1.35;
}
.zaap-modal-node-select {
  flex:1;
  min-width:0;
  width:100%;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  height:auto !important;
  color:inherit !important;
  font-size:13px !important;
  font-family:var(--brand) !important;
}
.zaap-modal-node-select:focus {
  outline:none;
}
.zaap-modal-flow { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.zaap-modal-flow-pill {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(148,163,184,.08);
  color:var(--text);font-family:var(--mono);font-size:10px;
}
.zaap-modal-flow-pill.is-from {
  background:rgba(167,139,250,.12);
  border-color:rgba(167,139,250,.26);
  color:#ddd6fe;
}
.zaap-modal-flow-pill.is-to {
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.26);
  color:#bfdbfe;
}
.zaap-modal-flow-arrow { color:var(--muted);font-size:14px; }
.zaap-modal-field { display:flex;flex-direction:column;gap:6px; }
.zaap-modal-field label {
  color:var(--t3);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
}
.zaap-modal-note { color:var(--muted);font-family:var(--mono);font-size:10px;line-height:1.5; }
.zaap-modal-actions { display:flex;gap:8px;margin-top:2px; }
[data-theme="light"] .zaap-modal {
  background:linear-gradient(180deg, rgba(255,246,214,.98), rgba(246,232,186,.99));
  border-color:rgba(59,130,246,.22);
  box-shadow:0 20px 50px rgba(70,42,8,.24), inset 0 1px 0 rgba(255,255,255,.38);
}
[data-theme="light"] .zaap-modal-kicker {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
[data-theme="light"] .zaap-modal-title { color:#1d4ed8; }
[data-theme="light"] .zaap-modal-copy { color:#3a2010; }
[data-theme="light"] .zaap-modal-route-arrow { color:#7a5a20; }
[data-theme="light"] .zaap-modal-node-kicker { color:#7a5a20; }
[data-theme="light"] .zaap-modal-node-main {
  background:rgba(255,248,216,.78);
  border-color:rgba(160,118,38,.22);
  color:#3a2010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="light"] .zaap-modal-node.is-from .zaap-modal-node-main {
  background:rgba(112,90,168,.10);
  border-color:rgba(112,90,168,.22);
  color:#6f52b8;
}
[data-theme="light"] .zaap-modal-node.is-to .zaap-modal-node-main {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
[data-theme="light"] .zaap-modal-flow-pill {
  background:rgba(255,248,216,.78);
  border-color:rgba(160,118,38,.24);
  color:#3a2010;
}
[data-theme="light"] .zaap-modal-flow-pill.is-from {
  background:rgba(112,90,168,.10);
  border-color:rgba(112,90,168,.22);
  color:#6f52b8;
}
[data-theme="light"] .zaap-modal-flow-pill.is-to {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
[data-theme="light"] .zaap-modal-field label { color:#7a5a20; }
[data-theme="light"] .zaap-modal-note { color:#7a5a20; }
@media (max-width: 620px){
  .zaap-modal-route {
    grid-template-columns:1fr;
  }
  .zaap-modal-route-arrow {
    transform:rotate(90deg);
    min-height:18px;
  }
}
.merge-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,3,15,.78);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.merge-modal-backdrop.open {
  opacity:1;
  pointer-events:auto;
}
.merge-modal {
  width:min(640px, 100%);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px 24px;
  border-radius:20px;
  border:1px solid rgba(96,165,250,.18);
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 30%),
    linear-gradient(180deg, rgba(20,17,39,.98), rgba(16,13,31,.99));
  box-shadow:0 22px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
}
.merge-modal-kicker {
  align-self:flex-start;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.22);
  background:rgba(56,189,248,.10);
  color:#7dd3fc;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.merge-modal-title {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--brand);
  font-size:24px;
  line-height:1.2;
  color:#f4f6ff;
}
.merge-modal-copy {
  color:var(--t2);
  font-size:14px;
  line-height:1.6;
}
.merge-modal-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.merge-modal-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:108px;
  padding:14px 15px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(148,163,184,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.merge-modal-card.is-current {
  border-color:rgba(167,139,250,.22);
  background:rgba(167,139,250,.10);
}
.merge-modal-card.is-incoming {
  border-color:rgba(56,189,248,.24);
  background:rgba(56,189,248,.10);
}
.merge-modal-card-kicker {
  color:var(--t3);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.merge-modal-card-title {
  color:var(--text);
  font-size:15px;
  line-height:1.4;
  word-break:break-word;
}
.merge-modal-card-meta {
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
}
.merge-modal-note {
  padding:11px 13px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.18);
  background:rgba(245,158,11,.08);
  color:#fcd34d;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.7;
}
.merge-modal-actions {
  display:flex;
  gap:10px;
}
[data-theme="light"] .merge-modal {
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,248,216,.98), rgba(246,232,186,.99));
  border-color:rgba(59,130,246,.18);
  box-shadow:0 22px 55px rgba(70,42,8,.24), inset 0 1px 0 rgba(255,255,255,.42);
}
[data-theme="light"] .merge-modal-kicker {
  border-color:rgba(59,130,246,.20);
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
}
[data-theme="light"] .merge-modal-title {
  color:#1d4ed8;
}
[data-theme="light"] .merge-modal-copy {
  color:#4b3420;
}
[data-theme="light"] .merge-modal-card {
  background:rgba(255,248,216,.78);
  border-color:rgba(160,118,38,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="light"] .merge-modal-card.is-current {
  background:rgba(112,90,168,.10);
  border-color:rgba(112,90,168,.20);
}
[data-theme="light"] .merge-modal-card.is-incoming {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.20);
}
[data-theme="light"] .merge-modal-card-kicker {
  color:#7a5a20;
}
[data-theme="light"] .merge-modal-card-title {
  color:#3a2010;
}
[data-theme="light"] .merge-modal-card-meta {
  color:#7a5a20;
}
[data-theme="light"] .merge-modal-note {
  border-color:rgba(245,158,11,.18);
  background:rgba(245,158,11,.10);
  color:#9a5b00;
}
@media (max-width: 680px){
  .merge-modal {
    padding:18px;
    gap:14px;
  }
  .merge-modal-grid {
    grid-template-columns:1fr;
  }
  .merge-modal-actions {
    flex-direction:column;
  }
}
.t-entry { display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg3);border:1px solid var(--b1);border-radius:9px;cursor:default;transition:.15s; }
.t-entry:hover { border-color: var(--b2); background: var(--bg4); }
.t-entry-name { font-weight:600;color:var(--text);flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.t-entry-meta { font-family:var(--mono);font-size:10px;color:var(--t3);flex-shrink:0; }
.t-entry-actions { display:flex;gap:4px;flex-shrink:0; }

.pin-screen { position:fixed;inset:0;z-index:999;background:#07050f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px; }
.pin-screen.hidden { display: none; }
.pin-dots { display:flex;gap:9px;height:52px;align-items:flex-end; }
.pin-dot { width:32px;height:40px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:rgba(124,58,237,.1);border:1.5px solid rgba(124,58,237,.3);transition:all .2s;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0; }
.pin-dot.filled { background: transparent; border-color: transparent; }
.pin-dot img { width: 100%; height: 100%; object-fit: contain; }
.pin-progress-wrap { width:220px;height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:6px; }
.pin-progress-bar { height:100%;width:0%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:99px;transition:width .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0%{transform:scale(.2)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
@keyframes glow-ok { 0%,100%{filter:drop-shadow(0 0 8px rgba(16,185,129,.6))} 50%{filter:drop-shadow(0 0 22px rgba(16,185,129,1))} }
@keyframes fadeout { to { opacity:0; pointer-events:none; } }
.pin-dots.shake { animation: shake .4s ease; }
.pin-dots.ok .pin-dot { outline:2px solid var(--green);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;animation:glow-ok .6s ease; }
.pin-dots.err .pin-dot { outline:2px solid var(--red);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
.pin-screen.leaving { animation: fadeout .4s ease forwards; }
.pin-pad { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:220px; }
.pin-key { background:#0d0a1e;border:1px solid rgba(139,92,246,.15);border-radius:14px;height:58px;font-family:'Oxanium',sans-serif;font-size:22px;font-weight:700;color:#ede8ff;cursor:pointer;transition:background .1s,transform .1s,border-color .1s;display:flex;align-items:center;justify-content:center;user-select:none; }
.pin-key:hover { background:#131028;border-color:rgba(167,139,250,.28); }
.pin-key:active { transform:scale(.93);background:#191530; }
.pin-key.del { font-size:18px;color:#554d72; }
.pin-key.del:hover { color:#c4b5fd; }
.pin-attempts { font-size:9px;font-family:var(--mono);color:#f43f5e;height:16px;text-align:center; }
.ps-pill{display:flex;align-items:center;gap:0;background:rgba(139,92,246,.05);border:1px solid rgba(167,139,250,.3);border-radius:99px;overflow:hidden;margin-bottom:16px;transform:scale(1.15)}
.ps-egg-sec{background:rgba(88,28,135,.35);padding:8px 11px;display:flex;align-items:center}
.ps-ew{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px}
.ps-halo{position:absolute;width:58px;height:58px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,139,250,.5) 0%,rgba(124,58,237,.2) 55%,transparent 75%);pointer-events:none;animation:halo-pulse 3.5s ease-in-out infinite}
.ps-egg{width:34px;object-fit:contain;position:relative;z-index:1;animation:float 3.5s ease-in-out infinite;filter:drop-shadow(0 0 7px rgba(139,92,246,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.ps-brand-text{padding:8px 18px;display:flex;align-items:center;gap:8px}
.ps-nice{font-family:'Russo One',sans-serif;font-size:20px;color:var(--text);letter-spacing:.3px}
.ps-sep{width:1px;height:17px;background:rgba(167,139,250,.35)}
.ps-bot{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--p3);letter-spacing:4px}
@keyframes halo-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.88;transform:scale(1.1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}


@keyframes forbid-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Test cards */
.test-card { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--bg3);border:1px solid var(--b1);border-radius:9px;transition:.15s; }
.test-card:hover { border-color:var(--b2);background:var(--bg4); }
.test-card-left { display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0; }
.test-card-icon { font-size:20px;flex-shrink:0;width:28px;text-align:center;margin-top:1px; }
.test-card-label { font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text); }
.test-card-desc { font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px;line-height:1.5; }

/* Lisibilite globale */
body { font-size: 14px; }

.hfb-label,
.hmb-label,
.panel-title,
.wp-badge,
.wp-badge-chip,
.wp-mode-badge,
.wp-meta-badge,
.monster-option,
.monster-tag,
.combat-num-label,
.bank-label,
.save-config-kicker,
.save-config-field-label,
.save-config-note,
.save-config-card-sub,
.opt-card-desc,
.opt-desc,
.save-summary-card-title,
.save-summary-card-meta,
.save-summary-flow-kicker,
.save-summary-flow-segment-sub,
.save-summary-module-pill,
.save-summary-module-pill-state,
.dir-modal-kicker,
.dir-modal-hint,
.zaap-modal-node-kicker,
.zaap-modal-note,
.merge-modal-card-kicker,
.merge-modal-note,
.test-card-desc {
  font-size: 10px;
}

#trajet-name,
#hud-zoom-val,
#hud-coords,
.btn,
.wp-coords,
.wp-add-row input,
.bank-input,
.bank-item-qty,
.bank-add-row input,
.zaap-select,
.monster-search,
.combat-num-input,
.save-config-inline-input,
.save-config-monster-head,
.bic-name,
.opt-card-label,
.save-summary-card-bank-name,
.save-summary-flow-caption,
.save-summary-flow-segment-label,
.test-card-label,
.merge-modal-copy,
.dir-modal-copy,
.zaap-modal-copy,
.zaap-modal-node-main,
.zaap-modal-node-select {
  font-size: 12px;
}

.save-config-card-title { font-size: 18px; }
.save-summary-card-value { font-size: 26px; }