/* =========================
   Reset & base
   ========================= */
* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { height: 100%; }
/* Prevent white flash before JS runs in dark mode */
html.dark { background: #0f172a; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f6f7;
  color: #222;
}

/* Título do header */
.topbar .site-title{
  display: flex;
  align-items: center;
  gap: 10px;           /* um espaçozinho a mais */
  margin: 0;
  font-size: 36px;     /* ↑ aumenta a fonte */
  line-height: 1.1;
  font-weight: 700;    /* se quiser mais “presença” */
}

/* Ícone à esquerda de “Dofus Builds” */
.topbar .title-logo{
  width: 26px;         /* ↑ aumenta o ícone */
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
}

/* (opcional) um pouco maior em telas grandes */
@media (min-width: 992px){
  .topbar .site-title{ font-size: 30px; }
  .topbar .title-logo{ width: 28px; height: 28px; }
}


/* =========================
   Variáveis do flyout
   ========================= */
:root{
  --fly-pad-x: 10px;
  --fly-in-w: 86px;
  --fly-gap: 10px;
  --chk-w: 18px;
  --wrap-gap: 6px;
  --icon-w: 22px;
}

/* =========================
   Topbar
   ========================= */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar h1 { margin: 0; color: #e67e22; font-size: 20px; }
.topbar nav {
  display: flex;
  align-items: center;
}
.topbar nav button {
  margin-left: 8px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: #3498db; color: #fff; cursor: pointer;
}

/* =========================
   Layout principal (3 colunas)
   ========================= */
main {
  max-width: 1600px;
  margin: 1px 0;
  padding: 6px 4px 0 10px;
  display: grid;
  grid-template-columns: 340px auto 460px; /* Stats | Center | Right */
  gap: 32px;
  align-items: start;
}
#left-panel, #center-panel, #right-panel { outline: none !important; }

/* Cards */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 12px;
}
.card h2 { margin: 0 0 8px; font-size: 18px; }

/* =========================
   Lists genéricas
   ========================= */
.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-bottom: 1px solid #f1f5f9;
}
.stat-list li:last-child { border-bottom: none; }
.stat-list .icon, .res-name .icon { display: inline-flex; width: 20px; justify-content: center; }

/* =========================
   Painel de Resistência (direita)
   ========================= */
#resistance-panel .res-head {
  display: grid; grid-template-columns: 1fr 60px 60px;
  gap: 8px; padding: 6px 8px; color: #666; font-weight: 600;
}
#resistance-panel .res-head span:first-child { grid-column: 2 / span 1; text-align: center; }
#resistance-panel .res-head span:last-child { text-align: center; }
#resistance-panel .res-row {
  display: grid; grid-template-columns: 1fr 60px 60px;
  align-items: center; padding: 6px 8px; border-top: 1px solid #eee;
}
#resistance-panel .res-name { display: flex; align-items: center; gap: 8px; }
#resistance-panel .res-values { display: contents; }
#resistance-panel .res-values span { text-align: center; }
#resistance-panel .dash { color: #bbb; }

#damage-panel .stat-list li {
  display: grid;
  grid-template-columns: 22px 1fr 34px;
  column-gap: 4px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
#damage-panel .stat-list li .value {
  display: block;
  text-align: right;
}

/* Damage + Resistance panels: compact sizing */
#right-panel .card { padding: 6px 8px; }
#right-panel .card h2 { font-size: 14px; margin: 0 0 3px; }
/* Override the global 40px icon — the real cause of tall rows */
#right-panel .icon.icon-img { width: 18px; height: 18px; margin-right: 4px; }
#right-panel .stat-list .icon,
#resistance-panel .res-name .icon { width: 18px; min-width: 18px; }
#damage-panel .dmg-col-head { padding: 2px 6px; visibility: hidden; }
#damage-panel .stat-list li { padding: 2px 6px; }
#resistance-panel .res-head { padding: 2px 6px; }
#resistance-panel .res-row { padding: 2px 6px; }
.res-placeholder { visibility: hidden; }
#resistance-panel .res-row { grid-template-columns: 1fr 46px 46px; }
#resistance-panel .res-head { grid-template-columns: 1fr 46px 46px; }

/* =========================
   Equipamentos (centro)
   ========================= */
#character-panel.card { padding: 8px 8px 8px 28px; width: 600px; }

.slots-grid {
  display: grid;
  grid-template-columns: max-content 300px max-content;
  grid-template-rows: repeat(5, min-content);
  gap: 6px 8px;
  align-items: start;
  justify-content: space-between;
  width: 100%;
}
.slot.left  { grid-column: 1; }
.slot.right { grid-column: 3; }
.slot.left:nth-of-type(1)  { grid-row: 1; }
.slot.left:nth-of-type(2)  { grid-row: 2; }
.slot.left:nth-of-type(3)  { grid-row: 3; }
.slot.left:nth-of-type(4)  { grid-row: 4; }
.slot.left:nth-of-type(5)  { grid-row: 5; }
.slot.right:nth-of-type(1) { grid-row: 1; }
.slot.right:nth-of-type(2) { grid-row: 2; }
.slot.right:nth-of-type(3) { grid-row: 3; }
.slot.right:nth-of-type(4) { grid-row: 4; }
.slot.right:nth-of-type(5) { grid-row: 5; }

.dofus-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px 14px;
  margin-top: 20px;
  justify-items: center;
}

.avatar-box {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-weight: 600;
  background: linear-gradient(#fafafa, #f5f7fa);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}
.avatar-box:hover { border-color: #93c5fd; }
.avatar-box { position: relative; }
.avatar-box #avatar-video,
.avatar-box #avatar-img  {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-box.has-avatar { border-style: solid; border-color: #93c5fd; background: #0f172a; }
.avatar-box.has-avatar #avatar-placeholder { display: none; }

/* Avatar modal box (positioned above backdrop) */
.modal-box {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  overflow: hidden;
  z-index: 1;
}
body.dark .modal-box { background: #1e293b; color: #e2e8f0; }

/* Avatar picker modal */
.avatar-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 20px;
  justify-content: center;
  max-height: 70vh;
  overflow-y: auto;
}
.avatar-class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  padding: 10px;
  transition: border-color .15s, background .15s;
}
.avatar-class-card:hover { border-color: #3b82f6; background: rgba(59,130,246,.06); }
.avatar-class-card.selected { border-color: #3b82f6; background: rgba(59,130,246,.1); }
.avatar-class-card video { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; pointer-events: none; }
.avatar-class-card img  { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; pointer-events: none; }
.avatar-class-card span { font-size: .85rem; font-weight: 700; }
body.dark .avatar-class-card { border-color: #334155; }
body.dark .avatar-class-card:hover { background: rgba(59,130,246,.12); }

.slot { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.slot-box {
  width: 60px; height: 60px;
  border-radius: 11px; border: 2px solid #e5e7eb;
  background: linear-gradient(#ffffff, #f7f9fc);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.slot-box::after {
  content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 21px; color: #94a3b8;
}
.slot-box:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.07); border-color: #c7d2fe; }
.slot-label { font-size: 12px; color: #475569; text-align: center; user-select: none; }

.slot-box.is-placeholder .slot-icon { filter: grayscale(100%); opacity: 0.85; transition: filter .2s, opacity .2s; }
.slot-box.level-exceeded { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.3); }
.slot-box.has-img:not(.is-placeholder):hover .slot-icon { filter: grayscale(0%); opacity: 1; }
.slot-icon { width: 48px; height: 48px; object-fit: contain; display: block; margin: 4px auto; }
.slot-box.has-img::after { content: ""; }

/* Dofus placeholder x equipado */
.dofus-grid .slot-box { width: 48px; height: 48px; border-radius: 8px; }
.dofus-grid .slot-box::after { font-size: 17px; }
.dofus-grid .slot-icon { width: 38px; height: 38px; }
.dofus-grid .slot-label { font-size: 10px; }
.dofus-grid .slot-box.is-placeholder .slot-icon { filter: grayscale(100%); opacity: 0.85; }
.dofus-grid .slot-box:not(.is-placeholder) .slot-icon { filter: none !important; opacity: 1 !important; }

/* =========================
   Modal Dofus
   ========================= */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.modal-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.25);
  overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eee; }
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.modal-body { padding: 10px; max-height: 60vh; overflow: auto; }

.picker-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.picker-list li {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #fff; transition: box-shadow .12s, transform .06s, border-color .12s;
}
.picker-list li:hover { border-color: #c7d2fe; box-shadow: 0 6px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.picker-list img { width: 36px; height: 36px; }
.picker-title { font-size: 13px; }

/* =========================
   Stats (esquerda) — 1 col até Power, 2 cols depois
   ========================= */
#stats .stat-list{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* ← tracks encolhem */
  column-gap: 12px;
  width: 100%;
}

/* PRIMEIROS 10 (Level..Agility) ocupam as 2 colunas (1 por linha) */
#stats .stat-list li:nth-child(-n+10){ grid-column: 1 / -1; }

/* Cada item é um grid interno */
#stats .stat-list li{
  min-width: 0;                               /* ← permite encolher dentro da célula */
  display: grid;
  grid-template-columns: 28px 1fr 42px;       /* ícone | label | pílula */
  column-gap: 8px;
  align-items: center;
  padding: 6px 8px;
}

/* Para as LINHAS EM DUAS COLUNAS (depois de Power) -> tudo mais compacto */
#stats .stat-list > li:nth-child(n+11){
  grid-template-columns: 20px 1fr 32px;
  column-gap: 6px;
}
#stats .stat-list li img { width: 18px; height: 18px; }
#stats .stat-list > li:nth-child(n+11) img{ width: 18px; height: 18px; }
#stats .stat-list > li:nth-child(n+11) .value{
  min-width: 24px;
  height: 24px;
  font-size: 12px;
  padding: 2px 6px;
}

/* Label do meio SEM depender de classe .label */
#stats .stat-list li > *:nth-child(2),
#stats .stat-list li .label{
  min-width: 0;                 /* ← ESSENCIAL */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pílulas (valores) */
#stats .stat-list .value{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #e2e8f0;
  color: #0f172a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

/* Input do LEVEL compacto e SEM cortar */
#level-input{
  width: 64px;
  height: 28px;
  font-size: 16px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  justify-self: end;
}

/* =========================
   Flyout de atributos
   ========================= */
.stat-flyout{
  position: fixed;
  z-index: 10000;
  display: none;
  width: calc(var(--fly-pad-x) * 2 + var(--fly-in-w) + var(--fly-gap) + var(--chk-w) + var(--wrap-gap) + var(--icon-w));
  padding: 2px;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.stat-flyout .rows{
  position: relative; list-style: none; margin: 0;
  padding: 8px var(--fly-pad-x) 6px;
}
.stat-flyout .stat-li{
  position: absolute; left: 0; right: 0; height: 36px;
  display: flex; align-items: center; gap: 10px; padding: 0 2px; border-radius: 6px;
}
.stat-flyout .stat-li:hover{ background: #f8fafc; }
.stat-flyout .stat-li .fly-in{
  width: var(--fly-in-w); height: 32px; font-size: 14px; padding: 4px 10px;
  border: 1px solid #cfd8e3; border-radius: 8px; background: #fff; outline: none;
}
.stat-flyout .stat-li .fly-in:focus{ border-color: #7c9cff; box-shadow: 0 0 0 3px rgba(124,156,255,0.18); }
.stat-flyout .stat-li .sc-wrap{ margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.stat-flyout .stat-li .fly-chk{ width: 16px; height: 16px; transform: scale(1.12); transform-origin: center; margin: 0; accent-color: #64748b; }
.stat-flyout .stat-li img{ width: 22px; height: 22px; object-fit: contain; }

/* Rodapé do flyout + toggle alinhado */
.stat-flyout .footer{
  position: relative;
  margin-top: 10px;
  padding: 8px var(--fly-pad-x);
  background: #2b3441; color: #fff; border-radius: 8px; font-size: 12px;
}
.stat-flyout .footer #fly-points{ display: inline-block; }
.stat-flyout .footer .master-toggle{
  position: absolute; top: 50%;
  left: calc(var(--fly-pad-x) + var(--fly-in-w) + var(--fly-gap));
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; cursor: pointer;
}
.stat-flyout .footer .master-toggle input{ width: 18px; height: 18px; margin: 0; accent-color: #fff; }
.stat-flyout .footer .master-toggle .icon-all{
  width: 20px; height: 20px; display: inline-block;
  background: url("assets/icon-all.webp") center/contain no-repeat;
}

/* ===== Ajuste: Left panel (Stats) um pouco mais largo e com mais respiro ===== */

/* 1) Aumenta a coluna da esquerda + compensa reduzindo levemente o gap */
main{
  grid-template-columns: 340px 1fr 340px !important; /* era 300px 1fr 340px */
  gap: 200px !important;                              /* era 220px */
}
#left-panel{ min-width: 340px !important; }

/* 2) Dentro do card de Stats: aumenta o espaço entre as duas sub-colunas */
#stats .stat-list{
  column-gap: 16px !important;  /* era 12px */
}

/* 3) Linhas até Power (1 por linha): um pouco mais de largura nos tracks */
#stats .stat-list li{
  grid-template-columns: 32px 1fr 48px !important; /* ícone | label | pílula (antes 28|1fr|42) */
  column-gap: 10px !important;
}

/* 4) Linhas depois de Power (2 por linha): também folga um tico */
#stats .stat-list > li:nth-child(n+11){
  grid-template-columns: 22px 1fr 36px !important; /* antes 20|1fr|32 */
  column-gap: 10px !important;
}

/* 5) Garante que tudo continue dentro do cartão */
#stats .stat-list li > *:nth-child(2){
  min-width: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Left panel maior + colunas internas com mais respiro ===== */
:root{
  --stats-left-col: 380px;   /* largura do card de Stats (puxe mais/menos aqui) */
  --stats-gap: 168px;        /* espaço entre a coluna ESQ e o centro */
  --stats-pill-w: 48px;      /* largura fixa das pílulas numéricas p/ uniformizar */
}

main{
  grid-template-columns: var(--stats-left-col) 1fr 340px !important;
  gap: var(--stats-gap) !important;
}
#left-panel{ min-width: var(--stats-left-col) !important; }

/* mais espaço entre as duas sub-colunas dentro do card */
#stats .stat-list{ column-gap: 20px !important; }

/* pílulas com largura idêntica em todas as linhas */
#stats .stat-list .value{
  min-width: var(--stats-pill-w) !important;
  justify-content: center !important;
}

/* linhas até Power (1 por linha) */
#stats .stat-list li{
  grid-template-columns: 34px 1fr var(--stats-pill-w) !important; /* ícone|label|valor */
  column-gap: 12px !important;
}

/* linhas após Power (2 por linha) — mesma pílula e mais folga */
#stats .stat-list > li:nth-child(n+11){
  grid-template-columns: 26px 1fr var(--stats-pill-w) !important;
  column-gap: 12px !important;
}

/* evita que labels estourem */
#stats .stat-list li > *:nth-child(2){
  min-width: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Left panel mais largo + valores perfeitamente alinhados ===== */
:root{
  --stats-left-col: 440px;   /* ↑ puxe mais pra direita se quiser: 450/460px */
  --stats-gap: 168px;        /* espaço entre ESQ e painel central (ajuste se precisar) */
  --stats-pill-w: 56px;      /* pílulas com largura fixa p/ colunas 100% alinhadas */
}

main{
  grid-template-columns: var(--stats-left-col) 1fr 340px !important;
}

/* grid de duas colunas do card de stats */
#stats .stat-list{
  column-gap: 24px !important;        /* mais respiro entre as metades */
  grid-auto-rows: minmax(46px, auto) !important; /* mesma altura de linha => valores alinhados */
}

/* linhas até Power (uma por linha) */
#stats .stat-list li{
  grid-template-columns: 28px minmax(0,1fr) var(--stats-pill-w) !important; /* ícone | label | valor */
}

/* linhas após Power (duas por linha) */
#stats .stat-list > li:nth-child(n+11){
  grid-template-columns: 26px minmax(0,1fr) var(--stats-pill-w) !important;
}

/* pílulas dos valores: mesma largura e ancoradas à borda direita do item */
#stats .stat-list .value{
  min-width: var(--stats-pill-w) !important;
  justify-content: center !important; /* número centralizado dentro da pílula */
  justify-self: end !important;       /* pílula encostada à direita da célula */
}

/* labels não quebram (evita “encavalamento”) */
#stats .stat-list li > *:nth-child(2){
  min-width: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Primeiros 10 itens ocupam as duas colunas (uma linha por item) */
#stats .stat-list li:nth-child(-n+10){
  grid-column: 1 / -1;
}

/* EXO card */
#exo .exo-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#exo .exo-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
}
#exo .exo-list li:last-child{
  border-bottom: 0;
}

/* === Layout com 3 colunas: Stats | Character | Right === */
main{
  grid-template-columns: 460px 1fr 430px !important;
  gap: 24px !important;
}

#left-panel   { grid-column: 1; }
#center-panel { grid-column: 2; }
#right-panel  {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#combat-panels {
  display: grid;
  grid-template-columns: 195px 1fr;
  gap: 8px;
  align-items: stretch;
}


/* EXO compacto (≈ 1/5 do que estava) */
#exo-panel.card{
  padding: 10px 12px 190px;
}

.exo-compact h2{
  margin: 0 0 6px;
  font-size: 14px;
}

.exo-compact .exo-list{
  list-style: none;   /* remove as bolinhas */
  padding: 0;
  margin: 0;
}

.exo-compact .exo-list li{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}
.exo-compact .exo-list li:last-child{
  border-bottom: 0;
}

/* responsivo opcional – empilha o EXO abaixo do Stats em telas estreitas */
@media (max-width: 1200px){
  main{
    grid-template-columns: 1fr;   /* tudo em 1 coluna */
  }
  #left-panel, #center-panel, #right-panel{
    grid-column: auto;
  }
}

/* ——— EXO quase colado ao Stats (sem sticky) ——— */
/* Se o gap do seu grid for 24px, usar -16px deixa ~8px de espaço entre os cards.
   Quer zero espaço? troque por -24px. */

/* Exo inline: ícone | label | checkbox | valor */
#stats .stat-list li.has-exo,
#stats .stat-list li:first-child {
  grid-template-columns: 28px 1fr 32px 42px !important;
}
/* EXO label rendered as a second sub-row inside the Level <li> — no ordering tricks needed */
#stats .stat-list li:first-child {
  grid-template-rows: auto 18px;
  padding-bottom: 2px;
}
#stats .stat-list li:first-child::after {
  content: "EXO";
  grid-column: 3;
  grid-row: 2;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  text-align: center;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exo-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.exo-inline input[type=”checkbox”] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: #6366f1;
}
.exo-inline input:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* ==== Equipment Picker bits (non-intrusive) ==== */
.modal-controls{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #eee}
.modal-controls input[type="search"]{flex:1 1 auto;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(0,0,0,.12);outline:0}
.modal-subinfo{font-size:12px;opacity:.75}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px}
.picker-card{background:#fff;border-radius:12px;padding:10px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06);display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px;cursor:pointer;border:1px solid rgba(0,0,0,.06);transition:transform .12s ease,box-shadow .12s ease}
.picker-card:hover{transform:translateY(-1px);box-shadow:0 2px 0 rgba(0,0,0,.06),0 10px 22px rgba(0,0,0,.08)}
.picker-card img{width:48px;height:48px;object-fit:contain}
.picker-card .pc-title{font-weight:600;line-height:1.2}
.picker-card .pc-sub{font-size:12px;opacity:.7}


/* === Modal base (for equipment picker) === */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  height: 80vh;
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #eee; }
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.modal-footer { padding: 10px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }

/* Controls + results layout */
.modal-controls { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eee; }
.modal-controls input[type="search"] { flex: 1 1 auto; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); outline: none; }
.modal-subinfo { font-size: 12px; opacity: .75; }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 12px; overflow: auto; flex: 1 1 auto; }
.picker-card {
  background: #fff; border-radius: 12px; padding: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px;
  cursor: pointer; border: 1px solid rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.picker-card:hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.08); }
.picker-card img { width: 48px; height: 48px; object-fit: contain; }
.picker-card .pc-title { font-weight: 600; line-height: 1.2; }
.picker-card .pc-sub { font-size: 12px; opacity: .7; }



/* === Equipment modal additions: level filters, pager, preview === */
.modal-controls .lv-inp{ width:90px; height:36px; padding:0 10px; border-radius:10px; border:1px solid rgba(0,0,0,.12); }
.modal-pager{ display:flex; gap:10px; justify-content:center; align-items:center; padding:6px 12px; border-top:1px dashed #eee; }
.btn.sm{ font-size:12px; padding:6px 10px; border-radius:8px; }
.pc-actions{ display:flex; align-items:center; gap:8px; justify-self:end; }
.pc-preview{ margin-top:6px; }
.pc-preview > summary{ cursor:pointer; font-size:12px; opacity:.8; }
.pc-effects{ margin:6px 0 0 0; padding-left:16px; font-size:12px; line-height:1.2; }

/* Filter toggle button */
.filter-toggle {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: .85rem;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.filter-toggle:hover { border-color: #3b82f6; }
.filter-toggle.has-filters { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }

/* Modal body: results left, filter sidebar right (equipment picker only) */
.modal-card .modal-body {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 0;
}
.modal-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
}
.modal-card.filter-open { width: min(1100px, 96vw); }

/* Filter sidebar */
.filter-panel {
  width: 210px;
  flex-shrink: 0;
  padding: 12px 10px;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.filter-panel.hidden { display: none; }
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group-label {
  font-size: .68rem;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: .05em;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: .75rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .08s;
}
.filter-chip:hover { border-color: #93c5fd; color: #1d4ed8; }
.filter-chip.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(79,70,229,.25), 0 2px 6px rgba(79,70,229,.35);
  transform: scale(1.06);
}
.chip-ico { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.filter-chip.active .chip-ico { filter: brightness(10); }

/* Effect icons in item cards */
.pc-effects li { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; }
.pc-effects { padding-left: 0; }
.pc-effects .eff-ico { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.filter-clear-btn {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #222;
  background: #111;
  color: #ccc;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  /* small top shadow so it visually separates from chips when sticky */
  box-shadow: 0 -4px 8px rgba(0,0,0,.25);
}
.filter-clear-btn:hover { border-color: #ef4444; color: #ef4444; background: #1a0000; }

/* Pet category tabs */
.pet-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.pet-tabs.hidden { display: none; }
.pet-tab { padding: 4px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 12px; cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; }
.pet-tab:hover { background: #eff6ff; border-color: #bfdbfe; }
.pet-tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.pc-effects .muted{ opacity:.6; }
.picker-card{ grid-template-columns: 48px 1fr auto; }
.pc-main{ display:flex; flex-direction:column; gap:2px; }

.btn{ background:#222; color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer }
.btn.ghost{ background:transparent; border:1px solid rgba(0,0,0,.12); color:#222 }
.btn:disabled{ opacity:.5; cursor:default }


/* Item preview card in modal */
.item-preview{ position:sticky; top:8px; margin-bottom:12px; }
.item-preview.hidden{ display:none; }
.item-preview .card.big{ background:#fff; border-radius:12px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.item-preview .card-head{ display:flex; align-items:center; gap:12px; }
.item-preview .card-img{ width:48px; height:48px; }
.item-preview .card-title{ font-weight:600; }
.item-preview .card-level{ margin-left:auto; opacity:.7; }
.item-preview .card-effects{ margin:8px 0 0 60px; padding-left:0; list-style:none; }
.item-preview .card-effects li{ margin:2px 0; }

/* Set overlay (within modal) */
.set-overlay{ position:absolute; inset:60px 12px 12px; background:rgba(255,255,255,.98); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:auto; }
.set-overlay.hidden{ display:none; }
.set-card{ padding:12px; }
.set-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.set-head-actions{ display:flex; align-items:center; gap:8px; }
.set-title{ font-weight:700; }
.set-close{ background:none; border:0; font-size:24px; line-height:1; cursor:pointer; }
.set-equip-all{ background:#3b82f6; color:#fff; border:none; border-radius:6px; padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.set-equip-all:hover:not(:disabled){ background:#2563eb; }
.set-equip-all:disabled{ background:#93c5fd; cursor:not-allowed; }
.set-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
.set-item{ display:flex; flex-direction:column; gap:6px; padding:8px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:10px; cursor:pointer; transition: box-shadow .12s; }
.set-item:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.si-header{ display:flex; align-items:center; gap:8px; }
.set-item img{ width:36px; height:36px; flex-shrink:0; }
.set-item .t{ display:flex; flex-direction:column; align-items:flex-start; }
.si-name{ font-weight:600; font-size:.85rem; }
.si-effects{ list-style:none; margin:0; padding:0 0 0 2px; display:flex; flex-direction:column; gap:1px; border-top:1px solid #f1f5f9; padding-top:5px; }
.si-effects li{ display:flex; align-items:center; gap:3px; font-size:11px; color:#475569; }
.si-effects .eff-ico{ width:12px; height:12px; object-fit:contain; flex-shrink:0; }
.pc-setlink{ background:none; border:0; padding:0; color:#0b83ff; cursor:pointer; }

/* ===== Dofus modal: layout maior + efeitos harmonizados ===== */
#dofus-modal .modal-dialog{
  width: min(1100px, 92vw);
}

#dofus-modal .modal-body{
  max-height: 78vh;            /* mais alto que o padrão */
}

/* Grade dos Dofus dentro do modal */
#dofus-list.picker-list{
  grid-template-columns: repeat(3, 1fr);
}

/* Efeitos como bullets simples (sem pílulas) */
#dofus-modal .df-effects{
  margin: 6px 0 0 0;
  padding-left: 16px;          /* espaço pro marcador */
  font-size: 12px;
  line-height: 1.25;
  max-height: 120px;           /* evita card muito alto */
  overflow: auto;
}

#dofus-modal .df-effects li{
  list-style: disc;
  background: none;
  border: 0;
  padding: 0;
  margin: 2px 0;
}

/* Responsivo: 2 colunas em telas médias, 1 no mobile */
@media (max-width: 980px){
  #dofus-list.picker-list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  #dofus-list.picker-list{ grid-template-columns: 1fr; }
  #dofus-modal .modal-dialog{ width: 94vw; }
}

/* Ícones nos efeitos dos Dofus (lista do modal) */
#dofus-modal .df-eff-ico{
  width: 16px;
  height: 16px;
  vertical-align: -2px; /* alinha com o texto */
  margin-right: 6px;
  object-fit: contain;
}


/* ===== Painel: ícones como imagens ===== */
.icon.icon-img{
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Damage */
.i-dmg-neutral  { background-image: url('assets/neutral.webp'); }
.i-dmg-earth    { background-image: url('assets/earth.webp'); }
.i-dmg-fire     { background-image: url('assets/fire.webp'); }
.i-dmg-water    { background-image: url('assets/water.webp'); }
.i-dmg-air      { background-image: url('assets/air.webp'); }

.i-dmg-pushback { background-image: url('assets/dmgpushback.webp'); }
.i-dmg-crit     { background-image: url('assets/damcrit.webp'); }
.i-dmg-weapon   { background-image: url('assets/damweapon.webp'); }
.i-dmg-ranged   { background-image: url('assets/damranged.webp'); } /* Distance → Ranged */
.i_dmg_distance { background-image: url('assets/damranged.webp'); } /* (apenas fallback se alguém usar) */
.i-dmg-spell    { background-image: url('assets/damspell.webp'); }  /* NOVO */
.i-dmg-melee    { background-image: url('assets/dammelee.webp'); }

/* Resistance (percentual e fixa usam o mesmo ícone por elemento) */
.i-res-neutral  { background-image: url('assets/neutral.webp'); }
.i-res-earth    { background-image: url('assets/earth.webp'); }
.i-res-fire     { background-image: url('assets/fire.webp'); }
.i-res-water    { background-image: url('assets/water.webp'); }
.i-res-air      { background-image: url('assets/air.webp'); }

/* Resistências situacionais */
.i-res-melee    { background-image: url('assets/dammelee.webp'); }
.i-res-ranged   { background-image: url('assets/damranged.webp'); }
.i-res-pushback { background-image: url('assets/respushback.webp'); }
.i-res-crit     { background-image: url('assets/rescrit.webp'); }

/* ===== Painel (Damage / Resistance): ícones grandes ===== */
.icon.icon-img{
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Largura dos holders de ícone nas linhas */
.stat-list .icon,
#resistance-panel .res-name .icon{
  display: inline-flex;
  justify-content: center;
  width: 26px;      /* antes era 20px */
  min-width: 26px;
}

/* (Opcional) em telas bem estreitas, reduza para 28px para caber melhor */
@media (max-width: 520px){
  .icon.icon-img{ width: 28px; height: 28px; }
  .stat-list .icon, #resistance-panel .res-name .icon{ width: 28px; min-width: 28px; }
}

/* ===== Set Bonus Panel ===== */
#set-bonus-section {
  align-self: stretch;
}

.set-bonus-list {
  display: flex;
  gap: 10px;
  min-height: 32px;
  align-items: flex-start;
}
.sbl-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.set-bonus-empty {
  color: #94a3b8;
  font-size: 13px;
  align-self: center;
}

.sbi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 180px;
  max-width: 260px;
  flex: 0 0 auto;
}

.sbi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.sbi-name {
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sbi-count {
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  background: #3b82f6;
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.sbi-tier {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 5px;
}

.sbi-effects {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbi-effects li {
  font-size: 12px;
  color: #334155;
  padding: 2px 0;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sbi-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

.sbi-effects li:last-child {
  border-bottom: none;
}

/* ===== Remove (×) button on equipped slots ===== */
.slot-remove {
  display: none;
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.slot-box[data-item-id] .slot-remove,
.dofus-grid .slot-box:not(.is-placeholder) .slot-remove {
  display: flex;
}
.slot-box:hover .slot-remove {
  opacity: 1;
  pointer-events: auto;
}
.slot-remove:hover {
  background: #b91c1c;
}

/* =============================================
   FORJAMAGIA BUTTON
   ============================================= */
.slot-mage {
  display: none;
  position: absolute;
  left: -28px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 8px 0 0 8px;
  background: #6366f1;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity .12s .15s; /* .15s delay before hiding */
  pointer-events: none;
}
.slot-box[data-item-id] .slot-mage { display: flex; opacity: 1; pointer-events: auto; }
.slot-mage:hover { opacity: 1; background: #4f46e5; pointer-events: auto; transition: opacity .1s 0s; }

/* =============================================
   FORJAMAGIA MODAL
   ============================================= */
.fmg-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(440px, 94vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fmg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.fmg-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.fmg-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.fmg-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.fmg-row.edited { background: rgba(34,197,94,.12); }
.fmg-stat-name { font-size: 13px; color: #334155; }
.fmg-row.edited .fmg-stat-name { color: #15803d; font-weight: 600; }
.fmg-input {
  width: 100%; height: 30px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 0 8px; font-size: 13px; text-align: right; color: #1e293b;
}
.fmg-row.edited .fmg-input { border-color: #22c55e; color: #15803d; }
.fmg-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #e2e8f0;
}
.fmg-empty { color: #94a3b8; font-size: 13px; text-align: center; padding: 24px 0; margin: 0; }
.fmg-divider { border: none; border-top: 1px dashed #e2e8f0; margin: 8px 0; }

/* "+ Add stat" toggle button */
.fmg-open-picker {
  display: block; width: 100%;
  padding: 6px; margin: 0;
  background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 6px;
  color: #64748b; font-size: 12px; cursor: pointer; text-align: center;
}
.fmg-open-picker:hover { background: #e2e8f0; color: #334155; }

/* 3-column stat picker */
.fmg-stat-picker {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-top: 6px;
}
.fmg-stat-picker.open { display: grid; }
.fmg-picker-col { display: flex; flex-direction: column; gap: 1px; }
.fmg-picker-heading {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8;
  padding: 2px 6px 5px; border-bottom: 1px solid #e2e8f0; margin-bottom: 3px;
}
.fmg-picker-stat {
  display: flex; align-items: center; gap: 5px;
  text-align: left; background: none; border: none; border-radius: 4px;
  padding: 3px 6px; font-size: 12px; color: #334155; cursor: pointer; line-height: 1.4;
}
.fmg-picker-stat img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.fmg-picker-stat:hover { background: #e0e7ff; color: #4338ca; }

/* added rows */
.fmg-row-added .fmg-stat-name { display: flex; align-items: center; gap: 6px; }
.fmg-remove { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.fmg-remove:hover { color: #ef4444; }

/* dark mode */
body.dark .fmg-card { background: #1e293b; }
body.dark .fmg-header { border-bottom-color: #334155; }
body.dark .fmg-title { color: #f1f5f9; }
body.dark .fmg-body { background: #1e293b; }
body.dark .fmg-stat-name { color: #cbd5e1; }
body.dark .fmg-row.edited { background: rgba(34,197,94,.18); }
body.dark .fmg-row.edited .fmg-stat-name { color: #4ade80; }
body.dark .fmg-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark .fmg-row.edited .fmg-input { border-color: #4ade80; color: #4ade80; }
body.dark .fmg-footer { border-top-color: #334155; background: #1e293b; }
body.dark .fmg-divider { border-top-color: #334155; }
body.dark .fmg-open-picker { background: #0f172a; border-color: #334155; color: #64748b; }
body.dark .fmg-open-picker:hover { background: #1e293b; color: #cbd5e1; }
body.dark .fmg-stat-picker { background: #0f172a; border-color: #334155; }
body.dark .fmg-picker-heading { color: #475569; border-bottom-color: #334155; }
body.dark .fmg-picker-stat { color: #cbd5e1; }
body.dark .fmg-picker-stat:hover { background: #312e81; color: #a5b4fc; }

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: #1e293b;
  color: #f1f5f9;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   DARK MODE
   ============================================= */
body.dark {
  background: #0f172a;
  color: #e2e8f0;
}

/* Topbar */
body.dark .topbar {
  background: #1e293b;
  border-bottom-color: #334155;
}

/* Cards */
body.dark .card {
  background: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
body.dark .card h2 { color: #e2e8f0; }
body.dark .card-header h2 { color: #e2e8f0; }

/* Stat lists */
body.dark .stat-list li {
  border-bottom-color: #334155;
}
body.dark .stat-list li:last-child { border-bottom-color: transparent; }

/* Stat value pills */
body.dark #stats .stat-list .value {
  background: #243147;
  box-shadow: inset 0 0 0 1px #334155;
  color: #e2e8f0;
}

/* Level input */
body.dark #level-input {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}

/* EXO column header (::after on Level li) */
body.dark #stats .stat-list li:first-child::after {
  color: #64748b;
}

/* Flyout */
body.dark .stat-flyout {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
}
body.dark .stat-flyout .stat-li:hover { background: #243147; }
body.dark .stat-flyout .stat-li .fly-in {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
body.dark .stat-flyout .footer { background: #0f172a; }

/* Resistance panel */
body.dark #resistance-panel .res-head { color: #94a3b8; border-bottom-color: #334155; }
body.dark #resistance-panel .res-row { border-top-color: #334155; color: #e2e8f0; }
body.dark .dash { color: #475569; }

/* Damage panel */
body.dark #damage-panel .stat-list li { color: #e2e8f0; border-bottom-color: #334155; }

/* Character slots */
body.dark .slot-box {
  background: linear-gradient(#1e293b, #162032);
  border-color: #334155;
}
body.dark .slot-box:hover { border-color: #6366f1; }
body.dark .slot-box::after { color: #475569; }
body.dark .slot-label { color: #64748b; }

/* Avatar box */
body.dark .avatar-box {
  border-color: #334155;
  background: #1e293b;
  color: #64748b;
}

/* Dofus slots */
body.dark .dofus-grid .slot-box { border-color: #334155; }

/* Modals */
body.dark .modal-dialog,
body.dark .modal-card {
  background: #1e293b;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
body.dark .modal-header {
  border-bottom-color: #334155;
  color: #e2e8f0;
}
body.dark .modal-header h3 { color: #e2e8f0; }
body.dark .modal-close { color: #94a3b8; }
body.dark .modal-footer { border-top-color: #334155; }
body.dark .modal-controls {
  border-bottom-color: #334155;
  background: #1e293b;
}
body.dark .modal-controls input[type="search"],
body.dark .modal-controls .lv-inp {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
body.dark .modal-controls input::placeholder { color: #64748b; }
body.dark .modal-pager { border-top-color: #334155; color: #e2e8f0; }

/* Picker cards (equipment modal) */
body.dark .picker-card {
  background: #243147;
  border-color: #334155;
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.3);
  color: #e2e8f0;
}
body.dark .picker-card .pc-sub { color: #94a3b8; }

/* Picker list (dofus modal) */
body.dark .picker-list li {
  background: #243147;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark .picker-title { color: #e2e8f0; }

/* Filter panel */
body.dark .filter-panel {
  background: #172033;
  border-left-color: #334155;
}
body.dark .filter-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
body.dark .filter-chip:hover { border-color: #6366f1; color: #a5b4fc; }
body.dark .filter-chip.active {
  background: #4f46e5;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.3), 0 2px 8px rgba(99,102,241,.4);
}
body.dark .filter-toggle {
  background: #243147;
  border-color: #334155;
  color: #94a3b8;
}
body.dark .filter-toggle.has-filters { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }

/* Pet tabs */
body.dark .pet-tabs { border-bottom-color: #334155; }
body.dark .pet-tab { background: #243147; border-color: #334155; color: #94a3b8; }
body.dark .pet-tab:hover { background: #1e3a5f; border-color: #3b82f6; }

/* Set overlay (inside modal) */
body.dark .set-overlay { background: rgba(15,23,42,.97); }
body.dark .set-item { background: #243147; border-color: #334155; color: #e2e8f0; }
body.dark .si-effects li { color: #94a3b8; border-bottom-color: #334155; }

/* Buttons */
body.dark .btn { background: #334155; color: #e2e8f0; }
body.dark .btn.ghost { border-color: #475569; color: #94a3b8; }

/* Topbar nav buttons */
body.dark .topbar nav button { background: #334155; }
body.dark .auth-nav { border-left-color: #334155; }
body.dark #btn-dark-mode { background: #f59e0b; color: #0f172a; }

/* Item preview card */
body.dark .item-preview .card.big {
  background: #1e293b;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  color: #e2e8f0;
}

/* Set Bonus panel */
body.dark .sbi {
  background: #243147;
  border-color: #334155;
}
body.dark .sbi-name { color: #e2e8f0; }
body.dark .sbi-effects li { color: #94a3b8; border-bottom-color: #334155; }

/* =============================================
   SETS BROWSER
   ============================================= */
.avatar-reset-row {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
}
.sets-browser-row {
  grid-column: 2;
  grid-row: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
}
.sets-browser-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 40px;
  border-radius: 10px;
  border: 2px dashed #cbd5e1;
  background: linear-gradient(#fafafa, #f5f7fa);
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sets-browser-btn:hover {
  border-color: #6366f1;
  background: #f0f0ff;
  color: #4f46e5;
}

/* Complete / Partial view-mode toggle */
.view-mode-toggle {
  display: flex;
  background: #e2e8f0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.view-mode-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 14px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.view-mode-btn.active {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 1px 4px rgba(79,70,229,.35);
}
.view-mode-btn:hover:not(.active) {
  background: #cbd5e1;
  color: #1e293b;
}
body.dark .view-mode-toggle { background: #1e293b; }
body.dark .view-mode-btn { color: #64748b; }
body.dark .view-mode-btn.active { background: #4f46e5; color: #fff; }
body.dark .view-mode-btn:hover:not(.active) { background: #334155; color: #e2e8f0; }

/* Sets modal body override */
#sets-modal .modal-body {
  padding: 0;
  overflow: hidden;
}
#sets-modal .modal-main {
  overflow-y: auto;
}

/* Grid of set cards */
.sets-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
  align-content: start;
  width: 100%;
  box-sizing: border-box;
}

.sets-loading-msg {
  padding: 32px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.sb-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: transform .1s, box-shadow .1s, border-color .1s, opacity .1s;
  cursor: pointer;
  align-self: start;
}
.sb-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-color: #6366f1;
}
.sb-card--busy {
  opacity: 0.5;
  pointer-events: none;
}
.sb-card-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid #f1f5f9;
}
.sb-card-name {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
  color: #1e293b;
  line-height: 1.3;
}
.sb-card-badge {
  font-size: 10px;
  color: #fff;
  background: #6366f1;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sb-items-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 8px;
  min-height: 30px;
}
.sb-items-strip img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.sb-items-strip .img-ph {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: linear-gradient(110deg, #f1f5f9 30%, #e8edf3 50%, #f1f5f9 70%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.2s linear infinite;
  border: 1px solid #e5e7eb;
}
@keyframes sb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sb-effects {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #334155;
}
.sb-effects li {
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #f8fafc;
}
.sb-effects li:last-child { border-bottom: none; }
.sb-effects .eff-ico { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; }
#sets-sentinel {
  height: 40px;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
}

/* Dark mode — sets browser */
body.dark .sets-browser-btn {
  border-color: #334155;
  background: linear-gradient(#1e293b, #162032);
  color: #64748b;
}
body.dark .sets-browser-btn:hover {
  border-color: #6366f1;
  background: #2d2d4a;
  color: #a5b4fc;
}
body.dark .sb-card {
  background: #1e293b;
  border-color: #334155;
}
body.dark .sb-card:hover { border-color: #6366f1; }
body.dark .sb-card-header { border-bottom-color: #334155; }
body.dark .sb-card-name { color: #e2e8f0; }
body.dark .sb-effects { color: #94a3b8; }
body.dark .sb-effects li { border-bottom-color: #243147; }
body.dark .sb-items-strip img { background: #0f172a; border-color: #334155; }
body.dark .sb-items-strip .img-ph {
  background: linear-gradient(110deg, #1e293b 30%, #243147 50%, #1e293b 70%);
  background-size: 200% 100%;
  border-color: #334155;
}
.sb-item-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.sb-item-x {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: rgba(220, 40, 40, 1);
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
.sb-item-x::after { content: '✕'; }

/* Hover tooltip — already dark-themed; in light mode give it a subtle light style */
#slot-tooltip {
  background: #1c2433 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
#slot-tooltip .st-name { color: #fbbf24 !important; border-bottom-color: #334155 !important; }

/* =============================================
   AUTH NAV
   ============================================= */
.auth-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid #e2e8f0;
}

.btn-auth {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-auth:hover { background: #4f46e5; }

.auth-user-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-username-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  padding: 0 4px;
}
body.dark .auth-username-label { color: #94a3b8; }

.btn-auth-action {
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #e0e7ff;
  color: #3730a3;
  transition: background .15s;
}
.btn-auth-action:hover { background: #c7d2fe; }
body.dark .btn-auth-action { background: #312e81; color: #c7d2fe; }
body.dark .btn-auth-action:hover { background: #3730a3; }

.btn-auth-logout {
  background: #fee2e2;
  color: #991b1b;
}
.btn-auth-logout:hover { background: #fecaca; }
body.dark .btn-auth-logout { background: #450a0a; color: #fca5a5; }
body.dark .btn-auth-logout:hover { background: #7f1d1d; }

/* =============================================
   AUTH MODAL
   ============================================= */
.auth-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
body.dark .auth-card { background: #1e293b; color: #e2e8f0; }

.auth-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #94a3b8;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
}
body.dark .auth-tabs { background: #0f172a; }

.auth-tab {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  color: #64748b;
  transition: all .15s;
}
.auth-tab.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
body.dark .auth-tab.active { background: #1e293b; color: #e2e8f0; }

.auth-oauth { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.btn-oauth {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
body.dark .btn-oauth { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.btn-oauth:hover { background: #f8fafc; }
body.dark .btn-oauth:hover { background: #1e293b; }
.btn-oauth img, .btn-oauth svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: #94a3b8;
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
body.dark .auth-divider::before,
body.dark .auth-divider::after { background: #334155; }

.auth-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
  background: #fff;
  color: #1e293b;
  outline: none;
  transition: border-color .15s;
}
body.dark .auth-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.auth-input:focus { border-color: #6366f1; }

.auth-submit {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

.auth-link {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
  text-decoration: underline;
  display: block;
  text-align: center;
}

.auth-msg { font-size: 13px; margin-top: 10px; text-align: center; }
.auth-msg.hidden { display: none; }
.auth-msg-error { color: #ef4444; }
.auth-msg-ok    { color: #22c55e; }

/* =============================================
   MINHAS BUILDS MODAL
   ============================================= */
#mybuilds-modal, #auth-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#mybuilds-modal.hidden, #auth-modal.hidden { display: none !important; }

.mybuilds-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 860px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  overflow: hidden;
}
body.dark .mybuilds-card { background: #1e293b; color: #e2e8f0; }

.mybuilds-actions {
  padding: 12px 20px;
  border-bottom: 1px solid #e2e8f0;
}
body.dark .mybuilds-actions { border-color: #334155; }

.mybuilds-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Build preview card ── */
.mb-build-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .15s;
}
body.dark .mb-build-card { border-color: #334155; }
.mb-build-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); }

.mb-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mb-card-name {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mb-card-badge { font-size: 12px; opacity: .7; flex-shrink: 0; }
.mb-vis-btn { font-size: 11px; padding: 3px 8px; flex-shrink: 0; }

.mb-card-actions { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; }
.mb-card-actions .btn { font-size: 11px; padding: 3px 8px; }

.mb-card-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Mini character panel */
.mb-equip-col { flex-shrink: 0; }

.mb-slots-wrapper {
  display: flex;
  gap: 4px;
}
.mb-slot-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mb-slot {
  width: 52px;
  height: 52px;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,.1);
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .mb-slot { background: #0f172a; border-color: rgba(255,255,255,.1); }
.mb-slot img { width: 100%; height: 100%; object-fit: contain; }
.mb-slot-ph { opacity: .25; filter: grayscale(1); }

.mb-dofus-row {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.mb-dofus-slot {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.1);
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.dark .mb-dofus-slot { background: #0f172a; border-color: rgba(255,255,255,.1); }
.mb-dofus-slot img { width: 100%; height: 100%; object-fit: contain; }

/* 3-panel stats section */
.mb-data-col {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: flex-start;
}

.mb-sub-panel {
  flex: 1;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  overflow: hidden;
}
body.dark .mb-sub-panel { border-color: #334155; }

.mb-sub-title {
  font-weight: 700;
  font-size: 11px;
  padding: 4px 6px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 4px;
}
body.dark .mb-sub-title { background: #0f172a; border-color: #334155; }

.mb-level-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #3b82f6;
}

.mb-res-head {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: #64748b;
}

.mb-prow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
body.dark .mb-prow { border-color: rgba(255,255,255,.05); }
.mb-prow:last-child { border-bottom: none; }

.mb-prow-res { gap: 2px; }

.mb-pico {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
}
.mb-plabel { flex: 1; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark .mb-plabel { color: #94a3b8; }
.mb-pval { font-weight: 600; text-align: right; min-width: 36px; flex-shrink: 0; }
.mb-pval.dash { color: #94a3b8; font-weight: 400; }

#save-build-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#save-build-modal.hidden { display: none !important; }

.save-modal-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.dark .save-modal-card { background: #1e293b; color: #e2e8f0; }

.save-modal-title { margin: 0; font-size: 16px; font-weight: 700; }
.save-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.save-visibility { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }