/* Peças reusáveis: item de loja, linha de lista, abas, diálogo, aviso. */

/* ---------- item de loja / seletor ---------- */
.shop-list{display:flex;flex-direction:column;gap:6px}
.shop-item{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:9px 10px;cursor:pointer;text-align:left;
  font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;
}
.shop-item:hover:not(:disabled){border-color:var(--line2);background:#faf1d8}
.shop-item.sel{border-color:var(--ember);background:#ffe9cf}
.shop-item .sw{width:26px;height:26px;display:block}
#skin-list .sw{width:34px;height:34px}
.shop-item .nm{font-weight:600;color:var(--ash)}
.shop-item .nm small{display:block;font-family:var(--mono);font-size:10px;color:var(--ash-dim);letter-spacing:.04em;text-transform:none;margin-top:2px}
.shop-item .pr{font-family:var(--mono);font-size:12px;color:var(--brass)}

/* ---------- medidores e ficha técnica ---------- */
.bar{height:5px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ember)}
.sel-info{font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--ash-dim)}
.sel-info b{color:var(--ash)}

/* ---------- listas sociais ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;align-items:center;gap:12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
}
.row .who{flex:1;min-width:0}
.row .who b{display:block;font-size:14px;color:#5a3d1f;font-weight:700}
.row .who small{font-family:var(--mono);font-size:10px;color:var(--ash-dim)}
.code-token{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:15px;letter-spacing:.14em;
  background:var(--panel2);border:1px dashed var(--line2);border-radius:10px;
  padding:10px 14px;color:var(--brass);
}
.empty{
  font-family:var(--mono);font-size:11px;color:var(--ash-dim);
  border:1px dashed var(--line);border-radius:10px;padding:18px;text-align:center;line-height:1.7;
}
.rank-row{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center}
.rank-row .pos{font-family:var(--mono);font-size:13px;color:var(--ash-dim);text-align:right}
.rank-row.me{border-color:var(--ember);background:#fff0d6}

/* ---------- abas ---------- */
.tabs{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.tabs button{border:0;border-radius:0;flex:1;background:var(--panel2)}
.tabs button.on{background:var(--panel);color:var(--ember-dim)}

/* ---------- diálogo modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(45,60,25,.55);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.overlay.on{display:flex}
.dialog{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:26px;max-width:400px;width:100%;text-align:center}
.dialog h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.01em;margin-bottom:8px;color:#5a3d1f}
.dialog p{font-family:var(--mono);font-size:12px;color:var(--ash-dim);line-height:1.8;margin-bottom:18px}

/* ---------- aviso passageiro ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--ember);
  border-radius:10px;padding:11px 18px;
  font-family:var(--mono);font-size:12px;color:var(--ash);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:90vw;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- indicador de conexão ---------- */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.dot.on{background:var(--verdigris)}