: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;
  --scroll-track: rgba(18,14,34,.72);
  --scroll-thumb: rgba(167,139,250,.36);
  --scroll-thumb-hover: rgba(196,181,253,.58);
  --scroll-corner: rgba(12,9,24,.72);
  --mono:   'JetBrains Mono', monospace;
  --sans:   'Outfit', sans-serif;
  --brand:  'Outfit', 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); }

/* Scrollbars globales (thème sombre + clair) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
::-webkit-scrollbar-corner {
  background: var(--scroll-corner);
}

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;
  flex-wrap: nowrap;
  row-gap: 0;
  padding: 6px 12px;
  min-height: 62px;
  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;
}
#topbar > * { flex-shrink:0; }
#topbar::-webkit-scrollbar { height:10px; }
#topbar::-webkit-scrollbar-track { background:transparent; }
#topbar::-webkit-scrollbar-thumb { background:rgba(167,139,250,.62); border-radius:999px; }
#steps-mobile-toggle,
#mobile-action-bar {
  display: none;
}

/* 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; }
.hud-env-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  min-width:44px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(139,92,246,.34);
  background:rgba(139,92,246,.14);
  color:var(--p4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.hud-env-badge--free {
  border-color:rgba(16,185,129,.48);
  background:rgba(16,185,129,.16);
  color:#6ee7b7;
}
.hud-env-badge--dev {
  border-color:rgba(245,158,11,.5);
  background:rgba(245,158,11,.16);
  color:#fcd34d;
}

/* 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));
}
@keyframes erase-tool-breath {
  0%, 100% {
    transform:scale(1);
    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);
  }
  50% {
    transform:scale(1.08);
    background:rgba(244,63,94,.28);
    border-color:rgba(251,113,133,.92);
    color:#ffe4e6;
    box-shadow:0 0 0 4px rgba(244,63,94,.14), 0 0 18px rgba(244,63,94,.34), inset 0 1px 0 rgba(255,255,255,.06);
  }
}
#btn-tool-erase.needs-attention {
  animation:erase-tool-breath .42s ease-in-out 2;
}
.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; }
.hud-btn-incarnam {
  width:auto;
  min-width:84px;
  padding:0 9px;
  gap:6px;
}
.hud-btn-incarnam .hud-btn-incarnam-icon {
  font-size:14px;
  line-height:1;
}
.hud-btn-incarnam .hud-btn-incarnam-label {
  font-family:var(--brand);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--p4);
  line-height:1;
  white-space:nowrap;
}
.hud-btn-incarnam:hover .hud-btn-incarnam-label,
.hud-btn-incarnam.active .hud-btn-incarnam-label {
  color:var(--text);
}
#btn-credits { font-family:var(--brand); }
#btn-resources-layer.has-resource {
  border-color: rgba(16,185,129,.52);
  color: #86efac;
}
#btn-resources-layer.active {
  background: rgba(16,185,129,.16);
  border-color: rgba(16,185,129,.52);
  color: #86efac;
}

.resource-layer-panel {
  position: fixed;
  top: 70px;
  left: 14px;
  z-index: 330;
  width: min(340px, calc(100vw - 24px));
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(16,185,129,.32);
  background: linear-gradient(180deg, rgba(13,12,26,.98), rgba(8,8,18,.98));
  box-shadow: 0 16px 34px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
.resource-layer-panel.open {
  display: flex;
}
.resource-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.resource-layer-title {
  font-family: var(--brand);
  font-size: 14px;
  letter-spacing: .03em;
  color: #6ee7b7;
}
.resource-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--t2);
  user-select: none;
}
.resource-layer-toggle input {
  accent-color: #10b981;
}
#resource-layer-search {
  width: 100%;
  height: 33px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,.28);
  background: rgba(10,14,21,.92);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  padding: 0 10px;
  outline: none;
}
#resource-layer-search:focus {
  border-color: rgba(16,185,129,.58);
  box-shadow: 0 0 0 2px rgba(16,185,129,.16);
}
#resource-layer-search::placeholder {
  color: var(--muted);
}
.resource-layer-results {
  max-height: 180px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,.2);
  background: rgba(7,12,19,.74);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resource-layer-results.is-empty {
  padding: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.resource-layer-group {
  padding: 6px 6px 4px;
  margin: 2px 1px 0;
  font-family: var(--brand);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6ee7b7;
  border-bottom: 1px solid rgba(16,185,129,.26);
}
.resource-layer-result {
  width: 100%;
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 7px;
  background: rgba(8,20,31,.74);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.resource-layer-result:hover {
  border-color: rgba(16,185,129,.48);
  background: rgba(11,36,30,.82);
}
.resource-layer-result.is-selected {
  border-color: rgba(16,185,129,.62);
  background: rgba(13,58,41,.82);
}
.resource-layer-result-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #a7f3d0;
}
.resource-layer-result-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t3);
}
.resource-layer-selected {
  min-height: 26px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,.2);
  background: rgba(9,20,16,.72);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--t2);
}
.resource-layer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

#ui-tooltip {
  position:fixed;
  left:0;
  top:0;
  transform:translateY(4px) scale(.98);
  opacity:0;
  pointer-events:none;
  z-index:500;
  max-width:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  transition:opacity .14s ease, transform .14s ease;
}
#ui-tooltip.show {
  opacity:1;
  transform:translateY(0);
}
#ui-tooltip.is-below {
  transform:translateY(-4px) scale(.98);
}
#ui-tooltip.is-below.show {
  transform:translateY(0);
}
.ui-tooltip-bubble {
  width:100%;
  padding:8px 11px;
  border-radius:11px;
  background:linear-gradient(180deg, rgba(24,18,42,.98), rgba(10,8,20,.98));
  border:1px solid rgba(167,139,250,.22);
  box-shadow:0 14px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04);
  color:var(--text);
}
.ui-tooltip-copy {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  white-space:normal;
}
.ui-tooltip-arrow {
  width:12px;
  height:12px;
  margin-top:-6px;
  background:linear-gradient(180deg, rgba(24,18,42,.98), rgba(10,8,20,.98));
  border-right:1px solid rgba(167,139,250,.22);
  border-bottom:1px solid rgba(167,139,250,.22);
  transform:rotate(45deg);
  box-shadow:4px 4px 10px rgba(0,0,0,.16);
}
#ui-tooltip.is-below .ui-tooltip-arrow {
  order:-1;
  margin-top:0;
  margin-bottom:-6px;
  border-right:none;
  border-bottom:none;
  border-left:1px solid rgba(167,139,250,.22);
  border-top:1px solid rgba(167,139,250,.22);
}

.rm-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 4, 12, .66);
  backdrop-filter: blur(3px);
}
.rm-dialog-backdrop.is-open {
  display: flex;
}
.rm-dialog {
  width: min(460px, calc(100vw - 24px));
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(23,17,41,.98), rgba(12,9,24,.98));
  border: 1px solid rgba(167,139,250,.28);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
}
.rm-dialog-title {
  font-family: var(--brand);
  font-size: 14px;
  color: var(--p4);
  letter-spacing: .03em;
}
.rm-dialog-message {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}
.rm-dialog-input {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(167,139,250,.28);
  background: rgba(20,15,36,.92);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 0 10px;
  outline: none;
}
.rm-dialog-input:focus {
  border-color: var(--p2);
  box-shadow: 0 0 0 2px rgba(139,92,246,.18);
}
.rm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.rm-dialog-actions .btn {
  min-width: 94px;
  height: 34px;
}
[data-theme="light"] .rm-dialog-backdrop {
  background: rgba(52,34,10,.32);
}
[data-theme="light"] .rm-dialog {
  background: linear-gradient(180deg, rgba(255,247,226,.98), rgba(245,233,199,.98));
  border-color: rgba(160,118,38,.32);
  box-shadow: 0 14px 34px rgba(30,16,4,.22), inset 0 1px 0 rgba(255,255,255,.64);
}
[data-theme="light"] .rm-dialog-title {
  color: #5a2c00;
}
[data-theme="light"] .rm-dialog-message {
  color: #2f1907;
}
[data-theme="light"] .rm-dialog-input {
  background: rgba(255,250,232,.92);
  border-color: rgba(160,118,38,.28);
  color: #2f1907;
}

/* 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: 5px 8px; }
  .hud-brand { gap:6px; padding-right:8px; }
  .hud-brand-icon { width:32px; height:32px; }
  .hud-brand-name { font-size:15px; }
  .hud-env-badge { height:20px; min-width:40px; font-size:9px; padding:0 8px; }
  .hud-sep { margin:0 4px; height:24px; }
  .hud-btn { width:38px; height:38px; font-size:17px; }
  .hud-btn svg { width:18px; height:18px; }
  .hud-btn-incarnam {
    min-width:78px;
    padding:0 8px;
    gap:5px;
  }
  .hud-btn-incarnam .hud-btn-incarnam-icon { font-size:13px; }
  .hud-btn-incarnam .hud-btn-incarnam-label { font-size:10px; }
  .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: 4px 6px; }
  .hud-sep { margin:0 3px; height:20px; }
  .hud-env-badge { height:18px; min-width:36px; font-size:8px; padding:0 7px; letter-spacing:.05em; }
  .hud-btn { width:34px; height:34px; font-size:15px; border-radius:6px; }
  .hud-btn svg { width:16px; height:16px; }
  .hud-btn-incarnam {
    min-width:72px;
    padding:0 7px;
    gap:4px;
  }
  .hud-btn-incarnam .hud-btn-incarnam-icon { font-size:12px; }
  .hud-btn-incarnam .hud-btn-incarnam-label { font-size:9px; }
  .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; }
}

@media (max-width: 1366px) {
  #topbar {
    flex-wrap:nowrap;
    row-gap:0;
    min-height:50px;
    height:50px;
    padding:3px 5px;
  }
  .hud-brand {
    padding-right:4px;
  }
  .hud-brand-name {
    display:none;
  }
  .hud-env-badge {
    height:17px;
    min-width:34px;
    font-size:7px;
    padding:0 6px;
    letter-spacing:.04em;
  }
  .hud-brand-icon {
    width:30px;
    height:30px;
  }
  .hud-sep {
    margin:0 2px;
    height:16px;
  }
  .hud-group {
    gap:1px;
  }
  .hud-btn {
    width:30px;
    height:30px;
    border-radius:5px;
    font-size:13px;
  }
  .hud-btn svg {
    width:14px;
    height:14px;
  }
  .hud-btn-incarnam {
    width:auto;
    min-width:66px;
    padding:0 6px;
    gap:3px;
    border-radius:5px;
  }
  .hud-btn-incarnam .hud-btn-incarnam-icon { font-size:11px; }
  .hud-btn-incarnam .hud-btn-incarnam-label {
    display:inline;
    font-size:8px;
    letter-spacing:.02em;
  }
  .hud-file-btn,
  .hud-mode-btn {
    height:34px;
    width:34px;
    min-width:34px;
    padding:0 4px;
    border-radius:5px;
    gap:0;
  }
  .hud-text-btn {
    height:34px;
    font-size:11px;
    padding:0 8px;
    gap:4px;
    border-radius:5px;
  }
  .hfb-label,
  .hmb-label {
    display:none;
  }
  .hfb-icon,
  .hmb-icon {
    font-size:14px;
  }
  .hud-dir-row {
    gap:1px;
  }
  .hud-dir-toggle-btn {
    width:24px;
  }
  .hud-dir-toggle-badge {
    min-width:12px;
    height:12px;
    font-size:6px;
  }
  #btn-grid,
  #btn-tool-drag,
  #btn-zoom-out,
  #btn-zoom-in {
    font-size:16px !important;
  }
  #btn-zones {
    font-size:10px !important;
    padding:0 5px !important;
  }
  #btn-tool-erase img {
    width:24px !important;
    height:24px !important;
  }
  #btn-credits {
    margin-left:2px !important;
  }
}

/* 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); }
.hfb-icon,
.hmb-icon,
.wp-mode-badge-icon,
.save-config-card-icon,
.save-summary-card-icon,
.test-card-icon,
.opt-card-icon {
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  font-weight:400;
}
.hmb-icon { font-size:20px; line-height:1; }
.hmb-icon-bank { display:flex; align-items:center; justify-content:center; }
.hmb-icon-svg {
  width:1em;
  height:1em;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.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   { background:rgba(229,231,235,.06); border-color:rgba(229,231,235,.24); color:rgba(229,231,235,.72); }
#btn-mode-fight  { background:rgba(244,63,94,.08);   border-color:rgba(244,63,94,.28);   color:rgba(253,164,175,.84); }
#btn-mode-gather { background:rgba(34,197,94,.08);   border-color:rgba(34,197,94,.30);   color:rgba(134,239,172,.88); }
#btn-mode-bank   { background:rgba(245,158,11,.08);  border-color:rgba(245,158,11,.30);  color:rgba(252,211,77,.88); }
#btn-mode-move.active {
  background:rgba(229,231,235,.24);
  border-color:rgba(229,231,235,.65);
  color:#f8fafc;
  box-shadow:0 0 0 1px rgba(229,231,235,.26), 0 0 16px rgba(229,231,235,.16);
}
#btn-mode-fight.active {
  background:rgba(244,63,94,.30);
  border-color:rgba(244,63,94,.72);
  color:#fecdd3;
  box-shadow:0 0 0 1px rgba(244,63,94,.28), 0 0 16px rgba(244,63,94,.24);
}
#btn-mode-gather.active {
  background:rgba(34,197,94,.30);
  border-color:rgba(34,197,94,.72);
  color:#dcfce7;
  box-shadow:0 0 0 1px rgba(34,197,94,.28), 0 0 16px rgba(34,197,94,.24);
}
#btn-mode-bank.active {
  background:rgba(245,158,11,.30);
  border-color:rgba(245,158,11,.74);
  color:#fef3c7;
  box-shadow:0 0 0 1px rgba(245,158,11,.30), 0 0 16px rgba(245,158,11,.24);
}
/* 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.secondary,
.ui-tier-secondary {
  background: rgba(255,255,255,.035);
  border-color: rgba(167,139,250,.16);
  color: var(--t2);
}
.btn.secondary:hover,
.ui-tier-secondary:hover {
  background: rgba(255,255,255,.065);
  border-color: rgba(167,139,250,.30);
  color: var(--text);
}
.btn.premium,
.ui-tier-premium {
  background: linear-gradient(180deg, rgba(56,189,248,.16), rgba(12,22,44,.94));
  border-color: rgba(56,189,248,.36);
  color: #c8f1ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(56,189,248,.05);
}
.btn.premium:hover,
.ui-tier-premium:hover {
  background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(15,29,56,.98));
  border-color: rgba(96,165,250,.52);
  color: #ecfeff;
  box-shadow: 0 0 18px rgba(56,189,248,.14);
}
.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:4px;
  padding:2px 7px;
  margin-bottom:2px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.28);
  background:rgba(25,18,46,.82);
  font-size:9px;
  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:10px !important;
  height:10px !important;
}
#map-cursor-tip .map-cursor-chip .dir-random-cell-svg{
  width:12px !important;
  height:12px !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;
}
#map-cursor-tip {
  background: linear-gradient(180deg, rgba(18,13,34,.96), rgba(10,8,20,.98)) !important;
  border: 1px solid rgba(167,139,250,.18) !important;
  border-radius: 10px !important;
  padding: 7px 9px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
#map-cursor-tip .map-cursor-main {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--p4);
  line-height: 1.3;
}
#map-cursor-tip .map-cursor-zone {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--zone-rgb, 167,139,250), .11);
  border: 1px solid rgba(var(--zone-rgb, 167,139,250), .24);
  color: rgb(var(--zone-rgb, 167,139,250));
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
#map-cursor-tip .map-cursor-section-title {
  margin-top: 7px;
  margin-bottom: 5px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t3);
}
#map-cursor-tip .map-cursor-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}
#map-cursor-tip .map-cursor-stack.is-single {
  margin-top: 7px;
}
#map-cursor-tip .map-cursor-marker-line,
#map-cursor-tip .map-cursor-detail {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 6px 7px;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
#map-cursor-tip .map-cursor-marker-line.is-zaap,
#map-cursor-tip .map-cursor-detail.is-zaap {
  background: rgba(96,165,250,.10);
  border-color: rgba(96,165,250,.22);
}
#map-cursor-tip .map-cursor-marker-line.is-bank,
#map-cursor-tip .map-cursor-detail.is-bank {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
}
#map-cursor-tip .map-cursor-marker-line.is-zaapi,
#map-cursor-tip .map-cursor-detail.is-zaapi {
  background: rgba(45,212,191,.10);
  border-color: rgba(45,212,191,.22);
}
#map-cursor-tip .map-cursor-marker-line.is-resource,
#map-cursor-tip .map-cursor-detail.is-resource {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.26);
}
#map-cursor-tip .map-cursor-marker-line.is-step,
#map-cursor-tip .map-cursor-detail.is-step {
  background: rgba(167,139,250,.10);
  border-color: rgba(167,139,250,.22);
}
#map-cursor-tip .map-cursor-marker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
}
#map-cursor-tip .map-cursor-marker-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
#map-cursor-tip .map-cursor-marker-copy strong {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
#map-cursor-tip .map-cursor-marker-copy span {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--t2);
  line-height: 1.3;
}
#map-cursor-tip .map-cursor-marker-copy small {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--muted);
  line-height: 1.35;
}
#map-cursor-tip .map-cursor-detail {
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
#map-cursor-tip .map-cursor-note {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--t3);
  line-height: 1.35;
}

/* ── Icône banque sur la carte ── */
/* Menu contextuel marqueur vs étape */
.map-marker-action-menu {
  position: fixed;
  z-index: 336;
  display: none;
  min-width: 176px;
  max-width: 220px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(167,139,250,.26);
  background: linear-gradient(180deg, rgba(18,13,34,.98), rgba(10,8,20,.98));
  box-shadow: 0 16px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(7px);
}
.map-marker-action-menu.open {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-marker-action-menu .marker-action-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 0 2px;
}
.map-marker-action-menu .marker-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(167,139,250,.24);
  background: rgba(31,22,58,.92);
  color: #ddd6fe;
  font-family: var(--brand);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 8px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.map-marker-action-menu .marker-action-btn:hover {
  border-color: rgba(196,181,253,.6);
  background: rgba(43,31,80,.96);
  color: #f5f3ff;
  transform: translateY(-1px);
}
.map-marker-action-menu .marker-action-btn.is-marker {
  border-color: rgba(56,189,248,.3);
  background: rgba(14,36,62,.92);
  color: #bfdbfe;
}
.map-marker-action-menu .marker-action-btn.is-marker:hover {
  border-color: rgba(125,211,252,.62);
  background: rgba(16,53,83,.95);
  color: #e0f2fe;
}
.map-marker-action-menu .marker-action-btn.is-step {
  border-color: rgba(167,139,250,.3);
  background: rgba(30,24,58,.92);
  color: #e9d5ff;
}
.map-marker-action-menu .marker-action-btn.is-step:hover {
  border-color: rgba(196,181,253,.64);
  background: rgba(49,38,89,.96);
  color: #f5f3ff;
}
.map-marker-action-menu .marker-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.map-marker-action-menu .marker-action-label {
  line-height: 1.2;
}

/* 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;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}
#mapGrid { display: block; position: absolute; top: 0; left: 0; pointer-events: all; }
#map-container,
#mapGrid {
  touch-action: none;
}

#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.coords-only {
  min-width: 0;
  padding: 5px 9px;
}
#map-info .info-zone { color: var(--p4); font-size: 12px; font-weight: 700; font-family: var(--brand); 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;
  position: relative;
  transition: width .2s ease;
}
#side-panel.is-compact {
  width: 28px;
}
#side-panel.is-compact .panel-tabs {
  border-bottom-color: transparent;
}
#side-panel.is-compact .panel-tab {
  pointer-events: none;
}
#side-panel.is-compact .panel-tab-title,
#side-panel.is-compact .panel-tab-stats {
  display: none !important;
}
#side-panel.is-compact #pane-steps {
  display: none !important;
}
.quick-help-panel {
  margin: 8px 8px 6px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(167,139,250,.18);
  background: linear-gradient(180deg, rgba(27,20,50,.92), rgba(15,11,30,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-help-panel.is-collapsed {
  gap: 0;
}
.quick-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.quick-help-head-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.quick-help-title {
  font-family: var(--brand);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.quick-help-kicker {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--t3);
  line-height: 1.3;
}
.quick-help-toggle {
  border: 1px solid rgba(167,139,250,.20);
  background: rgba(255,255,255,.04);
  color: var(--p4);
  border-radius: 999px;
  padding: 5px 10px;
  min-height: 28px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.quick-help-toggle:hover {
  border-color: rgba(167,139,250,.38);
  background: rgba(255,255,255,.07);
  color: var(--text);
}
.quick-help-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.quick-help-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.35;
}
.quick-help-item strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(167,139,250,.18);
  border: 1px solid rgba(167,139,250,.26);
  color: var(--p4);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.quick-help-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-help-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--t2);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.2;
}
.quick-help-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(7,5,15,.62);
  border: 1px solid rgba(167,139,250,.22);
  color: var(--p4);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.wp-focus-banner {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 8px 6px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid rgba(167,139,250,.18);
  background: linear-gradient(180deg, rgba(19,15,37,.94), rgba(13,10,27,.96));
}
.wp-focus-banner-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
}
.wp-focus-banner-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,.24);
  background: rgba(167,139,250,.12);
  color: var(--p4);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
}
.wp-focus-banner-pill.is-move {
  background: rgba(229,231,235,.12);
  border-color: rgba(229,231,235,.24);
  color: #f3f4f6;
}
.wp-focus-banner-pill.is-fight {
  background: rgba(244,63,94,.14);
  border-color: rgba(244,63,94,.26);
  color: #fda4af;
}
.wp-focus-banner-pill.is-gather {
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.26);
  color: #86efac;
}
.wp-focus-banner-pill.is-bank {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.26);
  color: #fcd34d;
}
.wp-focus-banner-pill.is-zaap {
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.26);
  color: #bfdbfe;
}
.wp-focus-banner-reset {
  margin-left: auto;
}
.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 {
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  padding:6px 8px;
  border-bottom:1px solid rgba(245,158,11,.22);
  background:rgba(245,158,11,.06);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.35;
}
.bank-active-summary-label {
  color:var(--amber);
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:0 0 auto;
  white-space:nowrap;
  font-size:9px;
}
.bank-active-summary-select {
  flex:1 1 130px;
  min-width:0;
  max-width:100%;
  font-size:11px;
  padding:4px 7px;
  min-height:28px;
}
.bank-active-summary-coords {
  color:var(--t3);
  white-space:nowrap;
  font-size:10px;
  opacity:.9;
}
.bank-active-summary-state {
  margin-left:2px;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  font-size:9px;
  max-width:106px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.route-validation-summary,
.save-validation-banner {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(15,11,30,.94), rgba(10,8,22,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.route-validation-summary {
  margin:8px 10px 2px;
}
.save-validation-banner {
  margin-top:-2px;
}
.route-validation-summary.is-ok,
.save-validation-banner.is-ok {
  border-color:rgba(16,185,129,.2);
}
.route-validation-summary.is-warning,
.save-validation-banner.is-warning {
  border-color:rgba(245,158,11,.2);
}
.route-validation-summary.is-error,
.save-validation-banner.is-error {
  border-color:rgba(244,63,94,.24);
}
.route-validation-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.route-validation-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.route-validation-kicker {
  font-size:10px;
  color:var(--t3);
  font-family:var(--brand);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.route-validation-title {
  font-size:13px;
  color:var(--text);
  line-height:1.35;
}
.route-validation-desc {
  font-size:11px;
  color:var(--t3);
  line-height:1.45;
}
.route-validation-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  font-family:var(--brand);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.route-validation-badge.is-ok {
  border-color:rgba(16,185,129,.3);
  background:rgba(16,185,129,.12);
  color:#86efac;
}
.route-validation-badge.is-warning {
  border-color:rgba(245,158,11,.3);
  background:rgba(245,158,11,.12);
  color:#fcd34d;
}
.route-validation-badge.is-error {
  border-color:rgba(244,63,94,.3);
  background:rgba(244,63,94,.12);
  color:#fda4af;
}
.route-validation-meta {
  margin-top:-1px;
}
.route-validation-list {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.route-validation-item {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.route-validation-item.is-error {
  border-color:rgba(244,63,94,.18);
  background:rgba(244,63,94,.06);
}
.route-validation-item.is-warning {
  border-color:rgba(245,158,11,.16);
  background:rgba(245,158,11,.06);
}
.route-validation-item-icon {
  flex-shrink:0;
  font-size:12px;
  line-height:1.2;
}
.route-validation-item-copy {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.route-validation-item-copy strong {
  font-size:11px;
  color:var(--text);
}
.route-validation-item-copy span {
  font-size:11px;
  color:var(--t3);
  line-height:1.45;
}
.route-validation-empty,
.route-validation-more {
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted);
  line-height:1.6;
}

/* Quick help is currently disabled in the Steps panel. */
#quick-help-panel {
  display:none !important;
}

.wp-item {
  display:flex; align-items:center; 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:6px 7px 6px 8px; 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:8px;
  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:0;
}
.wp-main { flex:1; min-width:0; display:block; }
.wp-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-width:0;
  flex-wrap:nowrap;
}
.wp-top-actions {
  display:flex;
  gap:4px;
  flex-wrap:nowrap;
  align-items:center;
  margin-left:auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:1px;
}
.wp-top-actions::-webkit-scrollbar {
  display:none;
}
.wp-top-actions > * {
  flex-shrink:0;
}
.wp-arrow { font-size:14px; flex-shrink:0; width:18px; text-align:center; }
.wp-coords {
  font-family:var(--mono); font-size:12px; font-weight:800; color:var(--text);
  min-width:0; overflow:visible; text-overflow:clip; white-space:nowrap;
}
.wp-meta-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:1px; }
.wp-meta-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:999px;
  font-size:9px; font-family:var(--sans); font-weight:600;
  white-space:nowrap; border:1px solid transparent;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wp-meta-bank-route {
  white-space:normal;
  line-height:1.35;
}
.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-pnj    { background:rgba(167,139,250,.22); border-color:rgba(167,139,250,.52); color:#f2e8ff; }
.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-meta-zone { max-width:128px; }
.wp-meta-zone-fight { background:rgba(244,63,94,.14); border-color:rgba(244,63,94,.28); color:#fecdd3; }
.wp-meta-zone-gather { background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.28); color:#a7f3d0; }
.wp-meta-zone-mixed { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.28); color:#fde68a; }
.wp-mode-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  font-family:var(--brand);
  padding:2px 7px;
  border-radius:999px;
  flex-shrink:0;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s, filter .15s, box-shadow .15s, border-color .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-badge-icon {
  font-size:10px;
  line-height:1;
  display:inline-flex;
}
.wp-mode-badge-label {
  white-space:nowrap;
}
.wp-mode-move   { background:rgba(229,231,235,.12); border-color:rgba(229,231,235,.22); color:#e5e7eb; }
.wp-mode-fight  { background:rgba(244,63,94,.18);   border-color:rgba(244,63,94,.26); color:#f43f5e; }
.wp-mode-gather { background:rgba(16,185,129,.18);  border-color:rgba(16,185,129,.28); color:#10b981; }
.wp-mode-bank   { background:rgba(245,158,11,.18);  border-color:rgba(245,158,11,.28); color:var(--amber); }
.wp-mode-zaap   { background:rgba(96,165,250,.18);  border-color:rgba(96,165,250,.28); color:#60a5fa; }
.wp-marker-strip {
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.wp-marker-badge {
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(255,255,255,.06);
  flex-shrink:0;
}
.wp-marker-badge img {
  width:11px;
  height:11px;
  object-fit:contain;
  display:block;
}
.wp-marker-badge.is-zaap {
  background:rgba(96,165,250,.16);
  border-color:rgba(96,165,250,.32);
}
.wp-marker-badge.is-bank {
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.34);
}
.wp-marker-badge.is-zaapi {
  background:rgba(56,189,248,.16);
  border-color:rgba(56,189,248,.34);
}
.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:opacity .15s, transform .15s, color .15s, background .15s;
  margin-top:0;flex-shrink:0;opacity:.18;transform:translateX(2px) scale(.96);
}
.wp-item:hover .wp-del,
.wp-item.sel .wp-del,
.wp-item:focus-within .wp-del {
  opacity:.82;
  transform:translateX(0) scale(1);
}
.wp-del:hover {
  opacity:1;
  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,.24); border-color:rgba(229,231,235,.65); }
#btn-mode-fight.active  { background:rgba(244,63,94,.30);   border-color:rgba(244,63,94,.72); }
#btn-mode-gather.active { background:rgba(34,197,94,.30);   border-color:rgba(34,197,94,.72); }
#btn-mode-bank.active   { background:rgba(245,158,11,.30);  border-color:rgba(245,158,11,.74); }
.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;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 0 6px;
  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-title {
  line-height:1;
}
.steps-resize-handle {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:14px;
  transform:none;
  cursor:ew-resize;
  z-index:18;
  background:linear-gradient(180deg, rgba(167,139,250,0), rgba(167,139,250,.14), rgba(167,139,250,0));
  border-left:1px solid rgba(167,139,250,.28);
  opacity:.42;
  transition:opacity .15s, border-color .15s;
  touch-action:none;
}
#side-panel:hover .steps-resize-handle {
  opacity:.78;
}
.steps-resize-handle:hover {
  border-left-color:rgba(196,181,253,.75);
  opacity:1;
}
#side-panel.is-compact .steps-resize-handle {
  display:none;
}
.steps-collapse-toggle {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:56px;
  border-radius:0 8px 8px 0;
  border:1px solid rgba(167,139,250,.30);
  border-left:none;
  background:linear-gradient(180deg, rgba(24,18,44,.96), rgba(13,10,27,.98));
  color:var(--p4);
  font-size:11px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
  z-index:20;
}
.steps-collapse-toggle:hover {
  border-color:rgba(167,139,250,.52);
  background:linear-gradient(180deg, rgba(44,31,80,.96), rgba(23,17,45,.99));
  color:#efe6ff;
}
.steps-collapse-toggle.is-collapsed {
  color:#ddd6fe;
}
.steps-width-controls {
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.steps-width-btn {
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(167,139,250,.35);
  background:rgba(24,18,44,.78);
  color:#ddd6fe;
  font:700 12px/1 var(--brand);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.steps-width-btn:hover {
  border-color:rgba(196,181,253,.72);
  background:rgba(55,39,95,.86);
  color:#fff;
}
.panel-tab-stats {
  min-height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.panel-tab-stats.wp-badge-stats {
  justify-content:center;
}
#tab-steps {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
.steps-collapse-toggle:focus-visible {
  outline:1px solid var(--p2);
  outline-offset:1px;
}
#pane-steps.is-collapsed #bank-active-summary,
#pane-steps.is-collapsed #route-validation-summary,
#pane-steps.is-collapsed #wp-focus-banner,
#pane-steps.is-collapsed #wp-list,
#pane-steps.is-collapsed .ornament,
#pane-steps.is-collapsed #export-section {
  display:none !important;
}
.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;
  --scroll-track: rgba(188,154,86,.22);
  --scroll-thumb: rgba(140,98,38,.46);
  --scroll-thumb-hover: rgba(140,98,38,.62);
  --scroll-corner: rgba(214,181,120,.28);
  --sans:   'Outfit', sans-serif;
  --brand:  'Outfit', 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);
  min-height: 62px;
  height: auto;
}
[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-env-badge {
  border-color: rgba(140,98,38,.45);
  background: rgba(140,98,38,.16);
  color: #6c3c10;
}
[data-theme="light"] .hud-env-badge--free {
  border-color: rgba(58,106,16,.5);
  background: rgba(58,106,16,.14);
  color: #2d5410;
}
[data-theme="light"] .hud-env-badge--dev {
  border-color: rgba(168,117,20,.55);
  background: rgba(200,150,10,.18);
  color: #7a4e18;
}
[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"] #btn-resources-layer.has-resource,
[data-theme="light"] #btn-resources-layer.active {
  border-color: rgba(58,106,16,.65);
  color: #b9df62;
}
[data-theme="light"] .resource-layer-panel {
  border-color: rgba(140,98,38,.42);
  background: linear-gradient(180deg, rgba(62,40,16,.96), rgba(34,22,9,.97));
}
[data-theme="light"] .resource-layer-title {
  color: #f0c030;
}
[data-theme="light"] .resource-layer-toggle {
  color: #e8c98a;
}
[data-theme="light"] #resource-layer-search {
  border-color: rgba(140,98,38,.34);
  background: rgba(24,15,8,.9);
  color: #f5ddb3;
}
[data-theme="light"] .resource-layer-results,
[data-theme="light"] .resource-layer-selected {
  border-color: rgba(140,98,38,.3);
  background: rgba(22,14,7,.78);
}
[data-theme="light"] .resource-layer-result {
  border-color: rgba(140,98,38,.28);
  background: rgba(44,28,12,.72);
  color: #f4d9a2;
}
[data-theme="light"] .resource-layer-group {
  color: #f0c030;
  border-bottom-color: rgba(200,150,10,.38);
}
[data-theme="light"] .resource-layer-result:hover {
  border-color: rgba(200,150,10,.58);
  background: rgba(78,50,20,.76);
}
[data-theme="light"] .resource-layer-result.is-selected {
  border-color: rgba(58,106,16,.7);
  background: rgba(55,72,24,.82);
}
[data-theme="light"] .resource-layer-result-name {
  color: #f7d574;
}
[data-theme="light"] .resource-layer-result-meta {
  color: #d6b377;
}
[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));
}
@keyframes erase-tool-breath-light {
  0%, 100% {
    transform:scale(1);
    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);
  }
  50% {
    transform:scale(1.08);
    background: linear-gradient(180deg, #842010 0%, #5c140c 100%);
    border-color: #ef5a47;
    color: #fff2ed;
    box-shadow: 0 0 0 4px rgba(216,58,42,.10), 0 0 18px rgba(216,58,42,.24), inset 0 1px 0 rgba(255,255,255,.12);
  }
}
[data-theme="light"] #btn-tool-erase.needs-attention {
  animation-name: erase-tool-breath-light;
}
[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"] #ui-tooltip {
  color:#fff0c0;
}
[data-theme="light"] .ui-tooltip-bubble {
  background:linear-gradient(180deg, rgba(72,44,15,.98), rgba(37,22,8,.98));
  border-color:rgba(200,150,10,.28);
  color:#fff0c0;
  box-shadow:0 14px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,248,216,.08);
}
[data-theme="light"] .ui-tooltip-arrow {
  background:linear-gradient(180deg, rgba(72,44,15,.98), rgba(37,22,8,.98));
  border-right-color:rgba(200,150,10,.28);
  border-bottom-color:rgba(200,150,10,.28);
}
[data-theme="light"] #ui-tooltip.is-below .ui-tooltip-arrow {
  border-left-color:rgba(200,150,10,.28);
  border-top-color:rgba(200,150,10,.28);
}
[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; }

.incarnam-modal-backdrop {
  display:none;
  position:fixed;
  left:0;
  top:62px;
  right:var(--panel-w);
  bottom:0;
  background:transparent;
  z-index:247;
  align-items:center;
  justify-content:center;
  padding:14px;
  backdrop-filter:none;
  overflow:hidden;
}
.incarnam-modal-backdrop.open { display:flex; }
.incarnam-modal {
  width:min(920px, calc(100% - 22px));
  max-height:calc(100% - 20px);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,15,37,.96), rgba(10,8,22,.98));
  border:1px solid rgba(167,139,250,.35);
  box-shadow:0 12px 36px rgba(0,0,0,.55);
}
.incarnam-modal-head {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.incarnam-modal-head > div {
  grid-column:2;
  text-align:center;
}
.incarnam-modal-head > .btn {
  grid-column:3;
  justify-self:end;
}
.incarnam-modal-kicker {
  font-size:10px;
  color:var(--t3);
  font-family:var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.incarnam-modal-title {
  font-family:var(--brand);
  font-size:20px;
  line-height:1.1;
  color:var(--green);
}
.incarnam-modal-map-wrap {
  position:relative;
  flex:1 1 auto;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(34,197,94,.34);
  background:rgba(4,9,17,.7);
  min-height:320px;
}
#incarnam-map-bg {
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}
#incarnam-grid-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:crosshair;
}
#incarnam-map-info {
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;
  min-width:132px;
  border-radius:8px;
  border:1px solid var(--b1);
  padding:6px 12px;
  background:rgba(13,10,30,.88);
  color:var(--t2);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  pointer-events:none;
  display:none;
}
#incarnam-map-info .info-zone {
  color:var(--green);
  font-size:12px;
  font-weight:700;
  font-family:var(--brand);
  letter-spacing:.04em;
  display:block;
}
#incarnam-map-info .info-coords {
  color:var(--t3);
  font-size:11px;
  display:block;
}
[data-theme="light"] .incarnam-modal {
  background:linear-gradient(180deg, #f4e7bf 0%, #e7d29f 100%);
  border-color:rgba(140,98,38,.4);
}
[data-theme="light"] .incarnam-modal-kicker { color:#7a5a20; }
[data-theme="light"] .incarnam-modal-title { color:#2f6c2f; }
[data-theme="light"] .incarnam-modal-map-wrap {
  background:rgba(255,248,216,.7);
  border-color:rgba(95,124,56,.45);
}
[data-theme="light"] #incarnam-map-info {
  background:rgba(26,12,2,.82);
  border-color:rgba(200,150,10,.35);
}
[data-theme="light"] #incarnam-map-info .info-zone { color:#2f6c2f; }
[data-theme="light"] #incarnam-map-info .info-coords { color:#c8a050; }

@media (max-width: 1100px) {
  .incarnam-modal-backdrop {
    top:50px;
    right:0;
    justify-content:center;
    align-items:center;
    padding:10px;
  }
  .incarnam-modal {
    width:min(840px, 96vw);
    max-height:min(92vh, 860px);
  }
}

/* ── 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: var(--brand); }
[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-pnj    { background: rgba(112,90,168,.18); border-color: rgba(112,90,168,.36); color: #5d429f; }
[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; opacity:.22; }
[data-theme="light"] .wp-item:hover .wp-del,
[data-theme="light"] .wp-item.sel .wp-del,
[data-theme="light"] .wp-item:focus-within .wp-del { opacity:.84; }
[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); border-color: rgba(58,32,16,.18); color: #3a2010; }
[data-theme="light"] .wp-mode-fight  { background: rgba(144,32,8,.14); border-color: rgba(144,32,8,.22); color: #902020; }
[data-theme="light"] .wp-mode-gather { background: rgba(58,106,16,.15); border-color: rgba(58,106,16,.22); color: #3a6a10; }
[data-theme="light"] .wp-mode-bank   { background: rgba(200,150,10,.16); border-color: rgba(200,150,10,.24); color: #a07808; }
[data-theme="light"] .wp-mode-zaap   { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.20); 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: var(--brand); }
[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-summary {
  background: rgba(255,248,216,.78);
  border-color: rgba(140,98,38,.24);
  color: #7c5a25;
}
[data-theme="light"] .opt-card.on .opt-card-summary {
  color: #5a2c00;
  border-color: rgba(140,98,38,.32);
}
[data-theme="light"] .opt-card-bankitems .opt-card-icon,
[data-theme="light"] .opt-card-bankalert .opt-card-icon {
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.30);
  color:#166534;
}
[data-theme="light"] .opt-card-bankitems.on .opt-card-icon,
[data-theme="light"] .opt-card-bankalert.on .opt-card-icon {
  background:rgba(22,163,74,.20);
  border-color:rgba(22,163,74,.38);
  color:#14532d;
}
[data-theme="light"] .opt-card-bankitems .opt-card-label,
[data-theme="light"] .opt-card-bankalert .opt-card-label {
  color:#14532d;
}
[data-theme="light"] .opt-card-bankitems.on .opt-card-label,
[data-theme="light"] .opt-card-bankalert.on .opt-card-label {
  color:#14532d;
}
[data-theme="light"] .opt-card-bankitems .bank-items-section {
  background: rgba(255,248,216,.42);
  border-color: rgba(140,98,38,.12);
}
[data-theme="light"] .opt-card-bankitems .bank-items-section-meta,
[data-theme="light"] .opt-card-bankitems .bank-items-empty {
  background: rgba(255,248,216,.68);
  border-color: rgba(140,98,38,.14);
  color: #8a6f32;
}
[data-theme="light"] .opt-card-bankitems .bank-items-section-title {
  color: #3a2010;
}
[data-theme="light"] .opt-card-bankitems .bic-id,
[data-theme="light"] .opt-card-bankitems .bank-item-qty-label {
  color: #8a6f32;
}
[data-theme="light"] .opt-card-bankalert .opt-inline-pill {
  border-color:rgba(22,163,74,.24);
  background:rgba(22,163,74,.10);
  color:#14532d;
}
[data-theme="light"] .opt-card-help {
  border-color:rgba(140,98,38,.28);
  background:rgba(255,248,216,.85);
  color:#7a5828;
}
[data-theme="light"] .opt-card-help:hover,
[data-theme="light"] .opt-card-help:focus-visible {
  border-color:rgba(22,163,74,.36);
  background:rgba(210,242,214,.9);
  color:#14532d;
}
[data-theme="light"] .opt-card-help::before {
  border-color:rgba(140,98,38,.30);
  background:linear-gradient(180deg, rgba(40,22,6,.96), rgba(24,12,2,.98));
  color:#f8f1d5;
}
[data-theme="light"] .opt-card-help::after {
  border-left-color:rgba(140,98,38,.30);
  border-top-color:rgba(140,98,38,.30);
  background:rgba(28,14,3,.98);
}
[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); }
[data-theme="light"] .opt-card-dot::after { background:#fff8da; }
[data-theme="light"] .opt-card.on .opt-card-dot {
  background:rgba(var(--opt-color,139,92,246),.22);
  border-color:rgba(var(--opt-color,139,92,246),.34);
}

/* ── 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: var(--sans) !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 ── */

/* ── 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"] .auth-card{
  background:linear-gradient(180deg, rgba(255,248,226,.98), rgba(247,236,204,.96));
  border-color:rgba(160,118,38,.26);
}
[data-theme="light"] .auth-tab,
[data-theme="light"] .auth-input{
  background:rgba(255,255,255,.72);
  border-color:rgba(140,98,38,.2);
  color:#3a2010;
}
[data-theme="light"] .auth-tab.active{
  background:rgba(208,112,16,.18);
  border-color:rgba(208,112,16,.35);
  color:#4a2400;
}
[data-theme="light"] .auth-btn{
  background:linear-gradient(180deg, #d07010 0%, #963808 100%);
  border-color:#e08020;
  color:#fff0c0;
}
[data-theme="light"] .auth-btn-secondary{
  background:rgba(255,248,216,.84);
  border-color:rgba(140,98,38,.22);
  color:#7a5828;
}
[data-theme="light"] .auth-status[data-tone="success"]{ color:#166534; }
[data-theme="light"] .auth-status[data-tone="info"]{ color:#1d4ed8; }
[data-theme="light"] .auth-status[data-tone="error"]{ color:#b91c1c; }

/* ── 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(1120px, 96vw) !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, .84fr) minmax(410px, 1.16fr);
  gap:14px;
  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:12px !important;
  min-width:0;
}
.save-modules-grid {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !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-download-hint {
  position:fixed;
  left:0;
  top:0;
  transform:translate(-50%, -100%) translateY(6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:380;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid rgba(244,63,94,.36);
  background:linear-gradient(180deg, rgba(46,11,22,.96), rgba(28,8,14,.98));
  color:#fecaca;
  font-family:var(--sans);
  font-size:11px;
  line-height:1.35;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  max-width:270px;
  text-align:center;
}
.save-download-hint::after {
  content:'';
  position:absolute;
  left:50%;
  top:100%;
  width:8px;
  height:8px;
  transform:translate(-50%, -50%) rotate(45deg);
  border-right:1px solid rgba(244,63,94,.36);
  border-bottom:1px solid rgba(244,63,94,.36);
  background:rgba(30,8,15,.98);
}
.save-download-hint.show {
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -100%) translateY(0);
}
[data-theme="light"] .save-download-hint {
  border-color:rgba(185,28,28,.32);
  background:linear-gradient(180deg, rgba(58,20,10,.96), rgba(36,12,4,.98));
  color:#fee2e2;
}
[data-theme="light"] .save-download-hint::after {
  border-right-color:rgba(185,28,28,.32);
  border-bottom-color:rgba(185,28,28,.32);
  background:rgba(38,13,4,.98);
}
.save-name-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.save-name-regen {
  min-width: 128px;
  min-height: 36px;
  padding-inline: 12px;
  font-weight: 600;
}
.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:9px;
  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:minmax(178px, .92fr) 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-monster {
  padding:9px 10px;
  gap:7px;
}
.save-config-card-monster .save-config-card-head {
  gap:8px;
  align-items:center;
}
.save-config-card-monster .save-config-card-icon {
  width:24px;
  height:24px;
  border-radius:8px;
  font-size:13px;
}
.save-config-card-monster .save-config-card-title {
  font-size:14px;
}
.save-config-card-monster .save-config-monster-group {
  gap:6px;
}
.save-config-card-monster .save-config-monster-head {
  font-size:10px;
}
.save-config-card-monster-force {
  border-color:rgba(16,185,129,.24);
  background:linear-gradient(180deg, rgba(11,38,31,.92), rgba(8,26,21,.9));
}
.save-config-card-monster-force .save-config-card-icon {
  background:rgba(16,185,129,.16);
  border-color:rgba(16,185,129,.36);
  color:#86efac;
}
.save-config-card-monster-force .save-config-card-title {
  color:#86efac;
}
.save-config-card-monster-force .save-config-monster-head {
  color:#a7f3d0;
}
.save-config-card-monster-force .save-config-monster-head em {
  color:#6ee7b7;
}
.save-config-card-monster-force .save-config-monster-auto {
  border-color:rgba(16,185,129,.30);
  background:rgba(16,185,129,.12);
  color:#a7f3d0;
}
.save-config-card-monster-force .save-config-monster-auto input {
  accent-color:#10b981;
}
.save-config-card-monster-force .save-config-monster-auto:hover {
  border-color:rgba(16,185,129,.45);
  background:rgba(16,185,129,.18);
}
.save-config-card-monster-force .save-config-monster-meta {
  border-color:rgba(16,185,129,.34);
  background:rgba(16,185,129,.18);
  color:#a7f3d0;
}
.save-config-card-monster-forbidden {
  border-color:rgba(244,63,94,.24);
  background:linear-gradient(180deg, rgba(42,14,25,.92), rgba(26,9,16,.9));
}
.save-config-card-monster-forbidden .save-config-card-icon {
  background:rgba(244,63,94,.16);
  border-color:rgba(244,63,94,.36);
  color:#fda4af;
}
.save-config-card-monster-forbidden .save-config-card-title {
  color:#fda4af;
}
.save-config-card-monster-forbidden .save-config-monster-head {
  color:#fecdd3;
}
.save-config-card-monster-forbidden .save-config-monster-head em {
  color:#fda4af;
}
.save-config-card-monster-forbidden .save-config-monster-auto {
  border-color:rgba(244,63,94,.30);
  background:rgba(244,63,94,.12);
  color:#fecdd3;
}
.save-config-card-monster-forbidden .save-config-monster-auto input {
  accent-color:#f43f5e;
}
.save-config-card-monster-forbidden .save-config-monster-auto:hover {
  border-color:rgba(244,63,94,.45);
  background:rgba(244,63,94,.18);
}
.save-config-card-monster-forbidden .save-config-monster-meta {
  border-color:rgba(244,63,94,.34);
  background:rgba(244,63,94,.16);
  color:#fecdd3;
}
.save-config-card-combat-profile {
  padding:9px 10px;
  gap:7px;
}
.save-config-card-combat-profile .save-config-card-head {
  gap:8px;
  align-items:center;
}
.save-config-card-combat-profile .save-config-card-copy {
  gap:0;
}
.save-config-card-combat-profile .save-config-card-icon {
  width:24px;
  height:24px;
  border-radius:8px;
  font-size:13px;
}
.save-config-card-combat-profile .save-config-card-title {
  font-size:14px;
  line-height:1.05;
}
.save-config-card-combat-pods {
  border-color:rgba(250,204,21,.24);
  background:linear-gradient(180deg, rgba(43,26,10,.92), rgba(22,13,8,.9));
}
.save-config-card-combat-pods .save-config-card-icon {
  background:rgba(250,204,21,.16);
  border-color:rgba(250,204,21,.36);
  color:#fde68a;
}
.save-config-card-combat-pods .save-config-card-title {
  color:#fde68a;
}
.save-config-card-combat-monsters {
  border-color:rgba(248,113,113,.24);
  background:linear-gradient(180deg, rgba(39,13,25,.92), rgba(20,9,17,.9));
}
.save-config-card-combat-monsters .save-config-card-icon {
  background:rgba(248,113,113,.16);
  border-color:rgba(248,113,113,.36);
  color:#fecaca;
}
.save-config-card-combat-monsters .save-config-card-title {
  color:#fecaca;
}
.save-config-card-combat-pods .save-combat-profile-inline {
  gap:8px;
  justify-content:center;
  align-items:center;
}
.save-config-card-combat-pods .save-combat-pill {
  padding:5px 10px;
}
.save-config-card-combat-pods .save-combat-pill .combat-num-input {
  width:48px;
  height:30px;
  font-size:13px;
}
.save-config-card-combat-pods .save-config-note {
  margin:0 auto;
}
.save-config-card-combat-monsters .save-combat-profile-inline {
  gap:8px;
  flex-wrap:nowrap;
  justify-content:flex-start;
}
.save-config-card-combat-monsters .save-combat-pill {
  flex-shrink:0;
}
.save-config-card-combat-monsters {
  justify-self:start;
  max-width:272px;
  width:100%;
}
.save-combat-profile-inline {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.save-combat-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  font-family:var(--mono);
  font-size:10px;
  color:var(--t3);
  white-space:nowrap;
}
.save-combat-pill .combat-num-input {
  width:42px;
  height:28px;
  padding:0 5px;
  text-align:center;
  font-size:12px;
  border-radius:7px;
  border-color:rgba(255,255,255,.12);
}
.combat-num-input,
.opt-inline-pill input[type="number"],
.bank-items-inline-add input[type="number"],
.bank-item-qty {
  color-scheme:dark;
}
[data-theme="light"] .combat-num-input,
[data-theme="light"] .opt-inline-pill input[type="number"],
[data-theme="light"] .bank-items-inline-add input[type="number"],
[data-theme="light"] .bank-item-qty {
  color-scheme:light;
}
.combat-num-input::-webkit-outer-spin-button,
.combat-num-input::-webkit-inner-spin-button,
.opt-inline-pill input[type="number"]::-webkit-outer-spin-button,
.opt-inline-pill input[type="number"]::-webkit-inner-spin-button,
.bank-items-inline-add input[type="number"]::-webkit-outer-spin-button,
.bank-items-inline-add input[type="number"]::-webkit-inner-spin-button {
  filter:saturate(.72) brightness(.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
[data-theme="light"] .combat-num-input::-webkit-outer-spin-button,
[data-theme="light"] .combat-num-input::-webkit-inner-spin-button,
[data-theme="light"] .opt-inline-pill input[type="number"]::-webkit-outer-spin-button,
[data-theme="light"] .opt-inline-pill input[type="number"]::-webkit-inner-spin-button,
[data-theme="light"] .bank-items-inline-add input[type="number"]::-webkit-outer-spin-button,
[data-theme="light"] .bank-items-inline-add input[type="number"]::-webkit-inner-spin-button {
  filter:saturate(.96) brightness(1.04);
}
.save-combat-pill:hover .combat-num-input::-webkit-outer-spin-button,
.save-combat-pill:hover .combat-num-input::-webkit-inner-spin-button,
.combat-num-input:hover::-webkit-outer-spin-button,
.combat-num-input:hover::-webkit-inner-spin-button,
.combat-num-input:focus::-webkit-outer-spin-button,
.combat-num-input:focus::-webkit-inner-spin-button,
.opt-inline-pill:hover input[type="number"]::-webkit-outer-spin-button,
.opt-inline-pill:hover input[type="number"]::-webkit-inner-spin-button,
.opt-inline-pill input[type="number"]:hover::-webkit-outer-spin-button,
.opt-inline-pill input[type="number"]:hover::-webkit-inner-spin-button,
.opt-inline-pill input[type="number"]:focus::-webkit-outer-spin-button,
.opt-inline-pill input[type="number"]:focus::-webkit-inner-spin-button,
.bank-items-inline-add:hover input[type="number"]::-webkit-outer-spin-button,
.bank-items-inline-add:hover input[type="number"]::-webkit-inner-spin-button,
.bank-items-inline-add input[type="number"]:hover::-webkit-outer-spin-button,
.bank-items-inline-add input[type="number"]:hover::-webkit-inner-spin-button,
.bank-items-inline-add input[type="number"]:focus::-webkit-outer-spin-button,
.bank-items-inline-add input[type="number"]:focus::-webkit-inner-spin-button {
  opacity:1;
  pointer-events:auto;
}
.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;
}
.save-config-top-grid > :only-child {
  grid-column:1 / -1;
}
@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-inline {
  margin-left:0;
  align-self:center;
  justify-self:end;
  padding:4px 8px;
  font-size:9px;
  letter-spacing:.02em;
}
.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:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  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-head-main {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  min-width:0;
}
.save-config-monster-meta {
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.26);
  background:rgba(245,158,11,.12);
  color:#fcd34d;
  font-size:9px;
  font-family:var(--sans);
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
}
@media (max-width: 980px) {
  .save-config-monster-head {
    grid-template-columns:1fr;
  }
  .save-config-monster-auto-inline {
    justify-self:start;
  }
}
.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-monster-meta {
  border-color:rgba(160,118,38,.26);
  background:rgba(238,197,101,.25);
  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-combat-pods {
  background:linear-gradient(180deg, rgba(255,251,236,.96), rgba(249,240,214,.92));
  border-color:rgba(170,118,28,.24);
}
[data-theme="light"] .save-config-card-combat-pods .save-config-card-icon {
  background:rgba(214,158,46,.14);
  border-color:rgba(170,118,28,.30);
  color:#8a5a10;
}
[data-theme="light"] .save-config-card-combat-pods .save-config-card-title {
  color:#6b430a;
}
[data-theme="light"] .save-config-card-combat-monsters {
  background:linear-gradient(180deg, rgba(255,242,244,.96), rgba(250,228,232,.92));
  border-color:rgba(188,63,94,.24);
}
[data-theme="light"] .save-config-card-combat-monsters .save-config-card-icon {
  background:rgba(225,78,102,.14);
  border-color:rgba(188,63,94,.30);
  color:#9f1239;
}
[data-theme="light"] .save-config-card-combat-monsters .save-config-card-title {
  color:#881337;
}
[data-theme="light"] .save-config-card-monster-force {
  background:linear-gradient(180deg, rgba(233,251,235,.96), rgba(214,245,219,.92));
  border-color:rgba(22,163,74,.26);
}
[data-theme="light"] .save-config-card-monster-force .save-config-card-icon {
  background:rgba(22,163,74,.14);
  border-color:rgba(22,163,74,.28);
  color:#166534;
}
[data-theme="light"] .save-config-card-monster-force .save-config-card-title,
[data-theme="light"] .save-config-card-monster-force .save-config-monster-head {
  color:#14532d;
}
[data-theme="light"] .save-config-card-monster-force .save-config-monster-head em {
  color:#166534;
}
[data-theme="light"] .save-config-card-monster-force .save-config-monster-auto {
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.24);
  color:#14532d;
}
[data-theme="light"] .save-config-card-monster-force .save-config-monster-meta {
  border-color:rgba(22,163,74,.28);
  background:rgba(22,163,74,.14);
  color:#14532d;
}
[data-theme="light"] .save-config-card-monster-forbidden {
  background:linear-gradient(180deg, rgba(255,238,238,.96), rgba(250,221,221,.92));
  border-color:rgba(220,38,38,.24);
}
[data-theme="light"] .save-config-card-monster-forbidden .save-config-card-icon {
  background:rgba(220,38,38,.12);
  border-color:rgba(220,38,38,.24);
  color:#991b1b;
}
[data-theme="light"] .save-config-card-monster-forbidden .save-config-card-title,
[data-theme="light"] .save-config-card-monster-forbidden .save-config-monster-head {
  color:#7f1d1d;
}
[data-theme="light"] .save-config-card-monster-forbidden .save-config-monster-head em {
  color:#991b1b;
}
[data-theme="light"] .save-config-card-monster-forbidden .save-config-monster-auto {
  background:rgba(220,38,38,.10);
  border-color:rgba(220,38,38,.24);
  color:#7f1d1d;
}
[data-theme="light"] .save-config-card-monster-forbidden .save-config-monster-meta {
  border-color:rgba(220,38,38,.28);
  background:rgba(220,38,38,.12);
  color:#7f1d1d;
}
[data-theme="light"] .save-config-monster-auto-inline {
  border-color:rgba(160,118,38,.24);
}
[data-theme="light"] .save-combat-profile-kicker {
  color:#2f1907;
}
[data-theme="light"] .save-combat-pill {
  background:rgba(255,255,255,.78);
  border-color:rgba(160,118,38,.18);
  color:#7a5828;
}
[data-theme="light"] .save-combat-pill .combat-num-input {
  border-color:rgba(160,118,38,.22);
}
[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:12px;
  background:var(--bg3); border:1px solid var(--b1);
  border-radius:12px; padding:12px 13px;
  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:9px;
}
.opt-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px 10px;
  flex-wrap:wrap;
}
.opt-card-label-with-help {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  position:relative;
}
.opt-card-help {
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--t3);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  cursor:help;
  position:relative;
  transition:border-color .15s, background .15s, color .15s;
}
.opt-card-help:hover,
.opt-card-help:focus-visible {
  border-color:rgba(16,185,129,.45);
  background:rgba(16,185,129,.15);
  color:#a7f3d0;
  outline:none;
}
.opt-card-help::before {
  content:attr(data-tip);
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  bottom:auto;
  transform:translateX(-50%) translateY(-4px);
  min-width:220px;
  max-width:280px;
  padding:7px 9px;
  border-radius:8px;
  border:1px solid rgba(167,139,250,.28);
  background:linear-gradient(180deg, rgba(18,13,34,.97), rgba(10,8,20,.99));
  color:var(--text);
  font-family:var(--sans);
  font-size:11px;
  line-height:1.4;
  box-shadow:0 12px 22px rgba(0,0,0,.36);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:50;
  text-align:left;
}
.opt-card-help::after {
  content:'';
  position:absolute;
  left:50%;
  top:calc(100% + 2px);
  bottom:auto;
  width:8px;
  height:8px;
  transform:translateX(-50%) rotate(45deg);
  border-left:1px solid rgba(167,139,250,.28);
  border-top:1px solid rgba(167,139,250,.28);
  border-right:none;
  border-bottom:none;
  background:rgba(12,9,24,.98);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, visibility .15s;
  z-index:49;
}
.opt-card-help:hover::before,
.opt-card-help:hover::after,
.opt-card-help:focus-visible::before,
.opt-card-help:focus-visible::after {
  opacity:1;
  visibility:visible;
}
.opt-card-help:hover::before,
.opt-card-help:focus-visible::before {
  transform:translateX(-50%) translateY(0);
}
.opt-card-bankitems {
  grid-column:1 / -1;
}
.opt-card-bankitems .opt-card-icon,
.opt-card-bankalert .opt-card-icon {
  width:24px;
  height:24px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(16,185,129,.36);
  background:rgba(16,185,129,.16);
  color:#86efac;
  font-size:13px;
  text-align:center;
}
.opt-card-bankitems .opt-card-icon-svg,
.opt-card-bankalert .opt-card-icon-svg {
  width:14px;
  height:14px;
  stroke-width:1.9;
}
.opt-card-bankitems.on .opt-card-icon,
.opt-card-bankalert.on .opt-card-icon {
  background:rgba(16,185,129,.22);
  border-color:rgba(16,185,129,.48);
  color:#a7f3d0;
}
.opt-card-bankitems .opt-card-body {
  gap:8px;
}
.opt-card-bankitems .opt-card-label,
.opt-card-bankalert .opt-card-label {
  font-size:14px;
  color:#86efac;
}
.opt-card-bankitems.on .opt-card-label,
.opt-card-bankalert.on .opt-card-label {
  color:#a7f3d0;
}
.opt-card-bankitems .bank-items-inline-config {
  gap:8px;
}
.opt-card-bankitems .bank-items-section {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:8px;
  border-radius:9px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.opt-card-bankitems .bank-items-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.opt-card-bankitems .bank-items-section-title {
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  color:var(--t2);
}
.opt-card-bankitems .bank-items-section-meta {
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-family:var(--sans);
  font-size:10px;
  line-height:1.2;
}
.opt-card-bankitems .bank-items-inline-grid {
  grid-template-columns:1fr;
  gap:8px;
}
.opt-card-bankitems .bank-items-fixed-grid {
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.opt-card-bankitems .bank-items-extra-list {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.opt-card-bankitems .bank-item-card {
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  border-radius:9px;
}
.opt-card-bankitems .bic-copy {
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.opt-card-bankitems .bic-name {
  font-size:12px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.3;
}
.opt-card-bankitems .bic-id {
  font-size:10px;
  color:var(--muted);
}
.opt-card-bankitems .bic-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-shrink:0;
}
.opt-card-bankitems .bank-item-qty-label {
  font-family:var(--sans);
  font-size:11px;
  color:var(--t3);
}
.opt-card-bankitems .bank-item-qty {
  width:50px !important;
  font-size:11px;
  padding:3px 5px;
}
.opt-card-bankitems .wp-del {
  width:22px;
  height:22px;
  margin-top:0;
  font-size:12px;
}
.opt-card-bankitems .bank-items-empty {
  padding:8px 9px;
  font-size:11px;
  border-radius:9px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
  color:var(--muted);
}
.opt-card-bankitems .bank-items-inline-add {
  grid-template-columns:minmax(0, 1fr) 64px auto;
  gap:6px;
}
.opt-card-bankitems .bank-items-inline-add input {
  font-size:11px;
  padding:5px 7px;
}
.opt-card-bankitems .bank-items-inline-add .btn {
  min-height:30px;
  padding:0 10px;
  font-size:11px;
}
.opt-inline-config {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:4px;
}
.opt-inline-config-single {
  grid-template-columns:1fr;
}
.opt-inline-config.is-disabled {
  opacity:.72;
  filter:saturate(.82);
}
.bank-items-inline-config {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.bank-items-inline-config.is-disabled {
  opacity:.72;
  filter:saturate(.82);
}
.bank-items-inline-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:8px;
}
.bank-items-inline-add {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 72px auto;
  gap:8px;
  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-add #bank-new-qty.bank-item-qty {
  width:54px;
  background:var(--bg3);
  border:1px solid var(--b1);
  border-radius:4px;
  color:var(--p4);
  font-family:var(--mono);
  font-size:11px;
  padding:4px 5px;
}
.bank-item-search-wrap {
  position:relative;
  min-width:0;
}
.bank-item-search-wrap .monster-search {
  width:100%;
}
.bank-item-search-wrap .monster-dropdown {
  width:100%;
}
.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:8px;
  min-width:0;
  padding:8px 10px;
  border-radius:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);
  font-size:10px;
  color:var(--t3);
}
.opt-inline-pill input[type="checkbox"] {
  margin:0;
  accent-color:#f59e0b;
}
.opt-inline-pill span {
  flex:1;
  white-space:normal;
  line-height:1.35;
}
.opt-inline-pill input[type="number"] {
  width:56px;
  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:4px 5px;
  text-align:center;
  outline:none;
  flex-shrink:0;
}
.opt-inline-pill input[type="number"]:focus {
  border-color:var(--p2);
}
.opt-inline-pill input:disabled {
  opacity:.55;
}
.opt-inline-pill-bank {
  justify-content:space-between;
}
.opt-inline-pill-bank span:last-child {
  min-width:14px;
  text-align:right;
}
#bank-alert-inline-config {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  margin-top:2px;
}
#bank-alert-inline-config .opt-inline-pill {
  gap:6px;
  padding:5px 7px;
  border-radius:7px;
  font-size:10px;
}
#bank-alert-inline-config .opt-inline-pill span {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#bank-alert-inline-config .opt-inline-pill input[type="number"] {
  width:44px;
  font-size:10px;
  padding:3px 4px;
  border-radius:4px;
}
.opt-card-bankalert .opt-inline-pill {
  border-color:rgba(16,185,129,.26);
  background:rgba(16,185,129,.10);
  color:#a7f3d0;
}
.opt-card-bankalert .opt-inline-pill input[type="checkbox"] {
  accent-color:#10b981;
}
.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:not(.on) { background:linear-gradient(180deg, rgba(26,20,44,.94), rgba(18,14,34,.98)); border-color:rgba(167,139,250,.12); }
.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:18px;
  flex-shrink:0;
  width:26px;
  text-align:center;
}
.opt-card-icon-svg {
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.opt-card-body { flex:1; min-width:0; }
.opt-card-label { font-family:var(--brand); font-size:13px; font-weight:700; color:var(--t2); white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
.opt-card.on .opt-card-label { color:var(--text); }
.opt-card-summary {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--t3);
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  text-align:right;
}
.opt-card-summary.is-off {
  color:var(--t3);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.opt-card.on .opt-card-summary {
  color:var(--text);
  border-color:rgba(var(--opt-color,139,92,246),.28);
  background:rgba(var(--opt-color,139,92,246),.12);
}
.opt-card.on .opt-card-summary.is-empty {
  color:var(--t2);
}
.opt-card-desc { font-family:var(--sans); font-size:11px; color:var(--t3); margin-top:2px; line-height:1.45; }
.opt-card-premium {
  border-color:rgba(56,189,248,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(56,189,248,.04);
}
.opt-card-premium::after {
  content:'Premium';
  position:absolute;
  top:9px;
  right:50px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.22);
  color:#93c5fd;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  pointer-events:none;
}
.opt-card-dot {
  width:36px;
  height:20px;
  border-radius:999px;
  flex-shrink:0;
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid var(--b2);
  transition:all .18s ease;
}
.opt-card-dot::after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  box-shadow:0 1px 5px rgba(0,0,0,.35);
  transition:left .18s ease, background .18s ease;
}
.opt-card.on .opt-card-dot {
  background:rgba(var(--opt-color,139,92,246),.26);
  border-color:rgba(var(--opt-color,139,92,246),.48);
  box-shadow:0 0 10px rgba(var(--opt-color,139,92,246),.18);
}
.opt-card.on .opt-card-dot::after {
  left:18px;
  background:rgb(var(--opt-color,139,92,246));
}

/* Save summary */
.save-summary-block {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:10px;
  background:linear-gradient(180deg, rgba(139,92,246,.05), rgba(67,56,202,.025));
  border:1px solid rgba(167,139,250,.16);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.save-summary-block-wide {
  margin-top:2px;
}
.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(auto-fit,minmax(180px,1fr));
  gap:8px;
}
.save-summary-card {
  --summary-accent: var(--p4);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:10px 11px;
  background:linear-gradient(180deg, rgba(18,12,34,.92), rgba(11,8,24,.86));
  border:1px solid rgba(167,139,250,.12);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.save-summary-card.is-featured {
  border-color:rgba(167,139,250,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.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:20px;
  height:20px;
  border-radius:7px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:11px;
  flex-shrink:0;
}
.save-summary-card-title {
  font-size:10px;
  color:var(--t3);
  font-family:var(--brand);
  letter-spacing:.03em;
  text-transform:uppercase;
}
.save-summary-card-value {
  font-size:14px;
  color:var(--summary-accent);
  font-family:var(--sans);
  font-weight:700;
  line-height:1.3;
  white-space:normal;
}
.save-summary-card-sub {
  margin-top:-1px;
  font-size:11px;
  color:var(--t3);
  font-family:var(--sans);
  line-height:1.45;
}
.save-summary-card-bank {
  gap:10px;
  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(--sans);
  font-size:10px;
  font-weight:600;
  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:4px;
  padding:6px 8px;
  background:rgba(9,7,22,.34);
  border:1px solid rgba(167,139,250,.16);
  border-radius:11px;
}
.save-summary-flow-rail {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
  min-width:0;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.45) transparent;
}
.save-summary-flow-rail::-webkit-scrollbar {
  height:6px;
}
.save-summary-flow-rail::-webkit-scrollbar-track {
  background:transparent;
}
.save-summary-flow-rail::-webkit-scrollbar-thumb {
  background:rgba(148,163,184,.38);
  border-radius:999px;
}
.save-summary-flow-link {
  flex:0 0 auto;
  color:var(--t3);
  opacity:.72;
  font-size:12px;
  line-height:1;
}
.save-summary-flow-segment {
  --flow-accent: var(--p4);
  --flow-bg: rgba(255,255,255,.05);
  --flow-border: rgba(255,255,255,.12);
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:270px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--flow-bg);
  border:1px solid var(--flow-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.save-summary-flow-segment-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
  font-size:10px;
  line-height:1;
}
.save-summary-flow-segment-label {
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  line-height:1;
  color:var(--text);
  white-space:nowrap;
}
.save-summary-flow-segment-meta {
  font-family:var(--sans);
  font-size:10px;
  color:var(--t3);
  border-left:1px solid rgba(255,255,255,.14);
  padding-left:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:120px;
}
.save-summary-flow-segment-sub {
  font-family:var(--sans);
  font-size:10px;
  color:var(--t3);
}
.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-loop {
  --flow-accent: #7dd3fc;
  --flow-bg: rgba(56,189,248,.12);
  --flow-border: rgba(56,189,248,.30);
}
.save-summary-flow-link-loop {
  color:#7dd3fc;
  opacity:.9;
}
.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 {
  background:rgba(255,255,255,.72);
  border-color:rgba(160,118,38,.20);
}
[data-theme="light"] .save-summary-flow-segment-icon,
[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-link,
[data-theme="light"] .save-summary-flow-segment-meta,
[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"] .bank-items-inline-add #bank-new-qty.bank-item-qty {
  background:rgba(255,248,216,.8);
  border-color:rgba(140,98,38,.35);
  color:#963808;
}
[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(960px, 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-alert-inline-config {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .bank-items-inline-add {
    grid-template-columns:minmax(0, 1fr) 72px auto;
  }
}

@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-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-alert-inline-config {
    grid-template-columns:1fr;
  }
  .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; }

.is-resizing-steps-panel,
.is-resizing-steps-panel * {
  cursor: ew-resize !important;
  user-select: none !important;
}
.pin-screen {
  position:fixed;
  inset:0;
  z-index:999;
  background:
    radial-gradient(1200px 700px at 50% 15%, rgba(196,141,255,.28), transparent 62%),
    linear-gradient(180deg, #2e1452 0%, #1a0c34 52%, #100721 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.pin-screen.hidden { display: none; }
@keyframes fadeout { to { opacity:0; pointer-events:none; } }
.pin-screen.leaving { animation: fadeout .4s ease forwards; }
.auth-card{
  width:min(420px, 94vw);
  background:linear-gradient(180deg, rgba(41,22,78,.86), rgba(22,10,44,.86));
  border:1px solid rgba(196,141,255,.42);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 20px 36px rgba(8,2,20,.48);
}
.auth-tabs{ display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.auth-tab{
  appearance:none;border:1px solid var(--b1);background:var(--bg3);color:var(--t2);
  border-radius:9px;padding:8px 10px;font-family:var(--brand);font-size:12px;cursor:pointer;transition:.14s ease;
}
.auth-tab.active{ border-color:rgba(139,92,246,.46);background:rgba(139,92,246,.16);color:#ede8ff; }
.auth-form{ display:none;flex-direction:column;gap:8px; }
.auth-form.active{ display:flex; }
.auth-label{ font-family:var(--mono);font-size:10px;color:var(--t3); }
.auth-input{
  width:100%;border:1px solid var(--b1);background:var(--bg3);color:var(--text);
  border-radius:8px;padding:9px 10px;font-family:var(--sans);font-size:13px;outline:none;
}
.auth-input::placeholder{ color:transparent; }
.auth-input:focus{ border-color:rgba(139,92,246,.52);box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.auth-input-code{ text-align:center;letter-spacing:.36em;font-family:var(--mono); }
.auth-captcha-slot{
  min-height:68px;border:1px dashed rgba(139,92,246,.2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:6px;
}
.auth-btn{
  border:1px solid rgba(139,92,246,.32);background:rgba(124,58,237,.22);color:var(--text);
  border-radius:9px;padding:9px 12px;font-family:var(--brand);font-size:12px;cursor:pointer;transition:.14s ease;
}
.auth-btn-minimal{
  padding:0;
  height:0;
  min-height:0;
  border:0;
  background:transparent;
  color:transparent;
  overflow:hidden;
}
.auth-btn:hover{ border-color:rgba(167,139,250,.55);background:rgba(124,58,237,.3); }
.auth-btn:disabled{ opacity:.55;cursor:not-allowed; }
.auth-btn-secondary{ background:rgba(18,15,40,.55);border-color:rgba(139,92,246,.2);color:var(--t2); }
.auth-status{ min-height:16px;text-align:center;font-family:var(--mono);font-size:10px;color:#fca5a5; }
.auth-status[data-tone="success"]{ color:#34d399; }
.auth-status[data-tone="info"]{ color:#93c5fd; }
.auth-status[data-tone="error"]{ color:#fda4af; }
.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-brand-main{font-family:var(--brand);font-size:20px;font-weight:700;color:var(--text);letter-spacing:.04em}
.ps-brand-sub{font-family:var(--sans);font-size:11px;color:rgba(167,139,250,.72);letter-spacing:.08em;text-transform:uppercase;margin-top:-16px}
.ps-pill,
.ps-brand-sub,
.auth-tabs,
#auth-register-form,
#auth-verify-form,
#auth-login-captcha{
  display:none !important;
}
@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(--sans);font-size:11px;color:var(--t3);margin-top:2px;line-height:1.45; }
.test-card-premium {
  position:relative;
  border-color:rgba(56,189,248,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(56,189,248,.04);
}
.test-card-premium::after {
  content:'Premium';
  position:absolute;
  top:10px;
  right:12px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.22);
  color:#93c5fd;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  pointer-events:none;
}
.test-card-premium .test-card-left {
  padding-right:64px;
}

[data-theme="light"] .btn.secondary,
[data-theme="light"] .ui-tier-secondary {
  background:rgba(255,248,216,.84);
  border-color:rgba(140,98,38,.22);
  color:#7a5828;
}
[data-theme="light"] .btn.secondary:hover,
[data-theme="light"] .ui-tier-secondary:hover {
  background:rgba(255,244,210,.98);
  border-color:rgba(140,98,38,.34);
  color:#3a2010;
}
[data-theme="light"] .btn.premium,
[data-theme="light"] .ui-tier-premium {
  background:linear-gradient(180deg, rgba(210,235,255,.96), rgba(186,221,255,.92));
  border-color:rgba(59,130,246,.28);
  color:#1d4ed8;
}
[data-theme="light"] .btn.premium:hover,
[data-theme="light"] .ui-tier-premium:hover {
  background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.96));
  border-color:rgba(59,130,246,.38);
  color:#1e3a8a;
}
[data-theme="light"] .quick-help-panel,
[data-theme="light"] .wp-focus-banner {
  background:linear-gradient(180deg, rgba(255,248,226,.96), rgba(247,236,204,.92));
  border-color:rgba(160,118,38,.18);
}
[data-theme="light"] .quick-help-title,
[data-theme="light"] .quick-help-item,
[data-theme="light"] .wp-focus-banner-kicker {
  color:#3a2010;
}
[data-theme="light"] .quick-help-kicker,
[data-theme="light"] .quick-help-shortcut,
[data-theme="light"] .quick-help-shortcut span {
  color:#7a5828;
}
[data-theme="light"] .quick-help-item,
[data-theme="light"] .quick-help-shortcut {
  background:rgba(255,255,255,.62);
  border-color:rgba(160,118,38,.12);
}
[data-theme="light"] .quick-help-item strong,
[data-theme="light"] .quick-help-shortcut kbd {
  background:rgba(255,248,216,.92);
  border-color:rgba(140,98,38,.18);
  color:#5a2c00;
}
[data-theme="light"] #map-cursor-tip {
  background:linear-gradient(180deg, rgba(255,248,226,.98), rgba(247,236,204,.96)) !important;
  border-color:rgba(160,118,38,.18) !important;
}
[data-theme="light"] #map-cursor-tip .map-cursor-main {
  color:#5a2c00;
}
[data-theme="light"] #map-cursor-tip .map-cursor-marker-line,
[data-theme="light"] #map-cursor-tip .map-cursor-detail {
  background:rgba(255,255,255,.68);
  border-color:rgba(160,118,38,.12);
}
[data-theme="light"] #map-cursor-tip .map-cursor-marker-copy strong {
  color:#2f1907;
}
[data-theme="light"] #map-cursor-tip .map-cursor-marker-copy span,
[data-theme="light"] #map-cursor-tip .map-cursor-marker-copy small,
[data-theme="light"] #map-cursor-tip .map-cursor-note {
  color:#7a5828;
}
[data-theme="light"] .map-marker-action-menu {
  background: linear-gradient(180deg, rgba(255,248,226,.98), rgba(247,236,204,.97));
  border-color: rgba(160,118,38,.24);
  box-shadow: 0 14px 24px rgba(84,48,16,.18), inset 0 1px 0 rgba(255,255,255,.45);
}
[data-theme="light"] .map-marker-action-menu .marker-action-kicker {
  color: #8a6a32;
}
[data-theme="light"] .map-marker-action-menu .marker-action-btn {
  border-color: rgba(140,98,38,.22);
  background: rgba(255,255,255,.82);
  color: #4a2a0a;
}
[data-theme="light"] .map-marker-action-menu .marker-action-btn:hover {
  border-color: rgba(140,98,38,.4);
  background: rgba(255,249,231,.98);
  color: #2f1907;
}
[data-theme="light"] .map-marker-action-menu .marker-action-btn.is-marker {
  border-color: rgba(14,165,233,.28);
  background: rgba(236,249,255,.95);
  color: #0c4a6e;
}
[data-theme="light"] .map-marker-action-menu .marker-action-btn.is-step {
  border-color: rgba(139,92,246,.28);
  background: rgba(245,243,255,.95);
  color: #4c1d95;
}
[data-theme="light"] .opt-card-premium::after,
[data-theme="light"] .test-card-premium::after {
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.18);
  color:#1d4ed8;
}

@media (max-width: 720px) {
  .quick-help-grid {
    grid-template-columns:1fr;
  }
  .save-name-row {
    grid-template-columns:1fr;
  }
  .save-name-regen {
    width:100%;
  }
}

@media (max-width: 900px) {
  :root {
    --panel-w: 100vw;
  }
  #app-layout {
    height: 100dvh;
  }
  #topbar {
    min-height: 56px;
    height: 56px;
    padding: 4px 6px;
  }
  #btn-mode-move,
  #btn-mode-fight,
  #btn-mode-gather,
  #btn-mode-bank,
  #btn-dir-left,
  #btn-dir-top,
  #btn-dir-bottom,
  #btn-dir-right {
    display: none !important;
  }
  #toolbar-scroll-hint {
    display: inline-block;
  }
  #main-area {
    flex-direction: column;
  }
  #map-container {
    min-height: calc(100dvh - 56px - 52px);
  }
  #side-panel {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 52px;
    width: min(82vw, 360px);
    height: auto;
    border-left: 1px solid var(--b2);
    border-top: none;
    z-index: 35;
    transform: translateX(calc(100% - 36px));
    transition: transform .2s ease;
    box-shadow: -12px 0 28px rgba(0,0,0,.45);
  }
  #side-panel::before {
    content: 'Étapes';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--brand);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--p4);
    background: linear-gradient(180deg, rgba(45,33,86,.98), rgba(19,13,38,.98));
    border-right: 1px solid rgba(139,92,246,.35);
    pointer-events: none;
    opacity: .95;
  }
  #side-panel.mobile-open {
    transform: translateX(0);
  }
  #side-panel.mobile-open::before {
    opacity: 0;
  }
  #side-panel.is-compact {
    width: min(82vw, 360px);
    height: auto;
  }
  #side-panel.is-compact #pane-steps {
    display: none !important;
  }
  .steps-resize-handle,
  .steps-width-controls {
    display: none !important;
  }
  .panel-tabs {
    min-height: 38px;
    padding-right: 2px;
  }
  #wp-list {
    padding-bottom: 10px;
  }
  #steps-collapse-toggle {
    display: none !important;
  }
  #mobile-action-bar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 38;
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(11,8,22,.72), rgba(11,8,22,.96));
    border-top: 1px solid rgba(139,92,246,.3);
    overflow: hidden;
  }
  #mobile-action-bar .mob-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  #mobile-action-bar .mob-btn {
    height: 31px;
    min-width: 0;
    width: 100%;
    border-radius: 8px;
    font-size: 11px;
    padding: 0 6px;
    white-space: nowrap;
  }
  #mobile-action-bar .mob-dir {
    min-width: 0;
    font-size: 14px;
    font-family: var(--mono);
    padding: 0;
  }
  #mobile-action-bar .mob-sep {
    display: none;
  }
  #map-info {
    left: 8px;
    bottom: calc(56px + env(safe-area-inset-bottom));
    font-size: 10px;
    padding: 5px 9px;
  }
  .incarnam-modal-backdrop {
    right: 0;
    top: 56px;
    justify-content: center;
    align-items: center;
    padding: 8px;
  }
  .incarnam-modal {
    width: min(900px, 96vw);
    max-height: calc(100dvh - 72px);
  }
  #map-cursor-tip {
    padding: 4px 7px !important;
    border-radius: 8px !important;
    max-width: 120px !important;
    min-width: 0 !important;
  }
  #map-cursor-tip .map-cursor-chip,
  #map-cursor-tip .map-cursor-zone,
  #map-cursor-tip .map-cursor-section-title,
  #map-cursor-tip .map-cursor-stack,
  #map-cursor-tip .map-cursor-detail,
  #map-cursor-tip .map-cursor-note {
    display: none !important;
  }
  #map-cursor-tip .map-cursor-main {
    margin: 0 !important;
    font-size: 10px;
    line-height: 1.2;
  }
  [data-theme="light"] #mobile-action-bar {
    background: linear-gradient(180deg, rgba(238,223,188,.88), rgba(225,205,166,.95));
    border-top-color: rgba(165,120,48,.28);
  }
  [data-theme="light"] #side-panel::before {
    color: #3d2608;
    background: linear-gradient(180deg, rgba(240,220,170,.98), rgba(221,193,132,.98));
    border-right-color: rgba(165,120,48,.34);
  }
}

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

#map-info .info-zone,
#ui-tooltip,
.ps-brand-main {
  font-family: var(--brand);
}

#ui-tooltip {
  font-family: var(--sans);
}

.hfb-label,
.hmb-label,
.panel-title,
.save-summary-kicker,
.save-summary-card-title,
.save-summary-flow-kicker,
.dir-modal-kicker,
.zaap-modal-node-kicker,
.merge-modal-card-kicker,
.bank-active-summary-label,
.bank-active-summary-state {
  font-family: var(--brand);
  font-size: 11px;
  letter-spacing: .03em;
}

.wp-badge,
.wp-badge-chip,
.wp-mode-badge,
.wp-meta-badge,
.monster-option,
.monster-tag,
.combat-num-label,
.bank-label,
.save-config-field-label,
.save-config-note,
.save-config-card-sub,
.opt-card-summary,
.opt-card-desc,
.opt-desc,
.save-summary-card-meta,
.save-summary-chip,
.save-summary-flow-segment-sub,
.save-summary-module-pill,
.save-summary-module-pill-state,
.dir-modal-hint,
.zaap-modal-note,
.merge-modal-note,
.test-card-desc,
.bank-items-empty,
.bic-id,
.zaap-item-mapid,
.zaap-item-custom,
.pin-attempts {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
}

#trajet-name,
.btn,
.wp-add-row input,
.bank-input,
.bank-item-qty,
.bank-add-row input,
.zaap-select,
.bank-active-summary-select,
.save-summary-bank-select,
.monster-search,
.combat-num-input,
.save-config-inline-input,
.save-config-monster-head,
.bic-name,
.bank-item-name,
.zaap-item-name,
.save-summary-card-sub,
.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-family: var(--sans);
  font-size: 12px;
}

.wp-coords,
#hud-zoom-val,
#hud-coords {
  font-size: 13px;
}

.hfb-label,
.hmb-label,
.panel-title,
.save-summary-kicker,
.save-summary-card-title,
.save-summary-flow-kicker {
  text-transform: uppercase;
}

.opt-inline-pill {
  font-family: var(--sans);
  font-size: 11px;
}

.save-summary-module-pill-state,
.save-summary-flow-segment-sub,
.bank-active-summary-label,
.bank-active-summary-state {
  letter-spacing: .03em;
}

.ps-brand-main {
  font-size: 20px;
  letter-spacing: .04em;
  font-weight: 700;
}

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

/* Harmonisation typo modale sauvegarde */
.save-modal-shell .save-modal-tab,
.save-modal-shell .save-config-kicker,
.save-modal-shell .save-combat-pill,
.save-modal-shell .save-config-monster-head,
.save-modal-shell .save-config-monster-auto,
.save-modal-shell .save-config-monster-meta,
.save-modal-shell .save-config-field-label,
.save-modal-shell .save-config-note,
.save-modal-shell .save-config-card-sub,
.save-modal-shell .bank-item-qty-label,
.save-modal-shell .bank-items-section-title,
.save-modal-shell .bank-items-section-meta,
.save-modal-shell .opt-inline-pill,
.save-modal-shell .opt-card-summary,
.save-modal-shell .opt-card-desc {
  font-family: var(--sans);
  letter-spacing: .01em;
}

.save-modal-shell .save-combat-profile-kicker,
.save-modal-shell .opt-card-label {
  font-family: var(--brand);
}

.save-modal-shell .save-modal-tab {
  font-size: 12px;
  font-weight: 600;
}

.save-modal-shell .save-config-kicker {
  font-size: 11px;
  letter-spacing: .04em;
}

#wp-list .wp-mode-badge {
  font-size:9px;
  padding:2px 7px;
  gap:5px;
}
#wp-list .wp-meta-badge {
  font-size:9px;
  padding:2px 6px;
}
#wp-list .wp-coords {
  font-size:12px;
}
.bank-active-summary .bank-active-summary-label,
.bank-active-summary .bank-active-summary-state {
  font-size:9px;
  letter-spacing:.04em;
}
.bank-active-summary .bank-active-summary-coords {
  font-size:10px;
}

@media (max-width: 1366px) {
  #topbar {
    min-height: 62px;
    height: 62px;
    padding: 4px 6px;
  }
  .hud-brand-name {
    display: inline !important;
    font-size: 14px;
  }
  .hud-brand-icon {
    width: 32px;
    height: 32px;
  }
  .hud-env-badge {
    height: 18px;
    min-width: 36px;
    font-size: 8px;
    padding: 0 7px;
    letter-spacing: .05em;
  }
  .hud-sep {
    margin: 0 3px;
    height: 20px;
  }
  .hud-btn {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 6px;
  }
  .hud-btn-incarnam {
    width: auto;
    min-width: 74px;
    padding: 0 7px;
    gap: 4px;
  }
  .hud-btn-incarnam .hud-btn-incarnam-icon {
    font-size: 12px;
  }
  .hud-btn-incarnam .hud-btn-incarnam-label {
    display: inline;
    font-size: 9px;
    letter-spacing: .02em;
  }
  .hud-btn svg {
    width: 16px;
    height: 16px;
  }
  .hud-file-btn,
  .hud-mode-btn,
  .hud-text-btn {
    height: 40px;
    border-radius: 6px;
  }
  .hud-file-btn {
    width: auto;
    min-width: 42px;
    padding: 0 7px;
    gap: 2px;
  }
  .hud-mode-btn {
    width: 40px;
    min-width: 40px;
    gap: 2px;
  }
  .hfb-label,
  .hmb-label {
    display: block !important;
    font-size: 7px;
    letter-spacing: .02em;
  }
  .hfb-icon,
  .hmb-icon {
    font-size: 15px;
  }
  #btn-credits {
    margin-left: auto !important;
  }
}

[data-theme="light"] #topbar {
  min-height: 62px;
  height: 62px;
}