/* Busca Personalizada de Contas Fortnite — V2.1 visual.
   Reaproveita os tokens de style.css (--bg, --panel, --border, --purple, ...).
   Mobile-first: as regras base valem para telas pequenas e os @media no fim
   alargam. Nada aqui muda contrato de dados: só apresentação. */

/* Mesmo ajuste que conta.css faz: o grid compartilhado .header-inner reserva
   uma coluna flexível para a busca da vitrine, que esta página não tem. */
.fs-page .header-inner {
  grid-template-columns: 1fr auto;
}

.fs-page {
  /* Fundos e cores repetidos em vários blocos: um lugar só para ajustar. */
  --fs-surface: #131019;
  --fs-line: #251f31;
  --fs-glow: rgba(157, 78, 221, .28);
}

.fs-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 16px 90px;
}

/* ---------------------------------------------------------------- cabeçalho */

.fs-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 6px 2px 20px;
  margin-bottom: 18px;
}

.fs-hero-text { min-width: 0; }

.fs-hero h1 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 7px 0 8px;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -1px;
}

/* Alvo roxo à esquerda do título: identidade, sem virar neon. */
.fs-hero-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #6d3a92;
  border-radius: 10px;
  background: linear-gradient(145deg, #2a1637, #170f20);
  box-shadow: 0 0 20px var(--fs-glow);
}
.fs-hero-mark::before,
.fs-hero-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--purple-2);
}
.fs-hero-mark::before { width: 13px; height: 13px; }
.fs-hero-mark::after { width: 5px; height: 5px; background: var(--purple-2); border: 0; }

.fs-hero p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.fs-hero-count {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.fs-hero-count strong { color: var(--text); font-size: 15px; }

/* ------------------------------------------------------- painel de busca */

.fs-searchbar {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(155deg, #17131f, #100e15);
  box-shadow: 0 18px 40px #00000059;
  overflow: hidden;
}

/* Celular já em duas colunas: cinco campos empilhados empurrariam os
   resultados para muito abaixo da dobra. */
.fs-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 10px;
  padding: 16px;
}

.fs-field-cosmetic { grid-column: span 2; }

.fs-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.fs-field label {
  color: #c9c3d1;
  font-size: 11px;
  font-weight: 700;
}

.fs-field input {
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--fs-line);
  border-radius: 9px;
  background: #0c0a11;
  color: var(--text);
  outline: 0;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.fs-field input::placeholder { color: #625b6e; }

.fs-field input:focus {
  border-color: #8241ae;
  box-shadow: 0 0 0 3px #8241ae22;
}

.fs-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fs-price-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--fs-line);
  border-radius: 9px;
  background: #0c0a11;
  transition: border-color .18s, box-shadow .18s;
}
.fs-price-field:focus-within { border-color: #8241ae; box-shadow: 0 0 0 3px #8241ae22; }

.fs-price-field span {
  padding-left: 12px;
  color: #6d6677;
  font-size: 13px;
}

.fs-price-field input {
  border: 0;
  background: transparent;
  height: 44px;
}
.fs-price-field input:focus { box-shadow: none; }

.fs-suggestions {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #15121bf5;
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px #0007;
  max-height: 220px;
  overflow-y: auto;
}

.fs-suggestions li {
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.fs-suggestions li:hover {
  background: var(--panel-2);
  color: #d9a3ff;
}

/* Barra de ações: ordenação à esquerda, botões à direita. */
.fs-searchbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--fs-line);
  background: #0d0b12;
}

.fs-actions {
  display: flex;
  flex: 1 1 240px;
  gap: 9px;
}

.fs-search-button {
  flex: 1 1 auto;
  height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #7932ad, #a84ae3);
  color: white;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px #7d2fb340;
  transition: filter .18s, box-shadow .18s, transform .18s;
}

.fs-search-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 28px #7d2fb359;
  transform: translateY(-1px);
}

.fs-search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fs-clear-button {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--fs-line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.fs-clear-button:hover { color: white; border-color: #5a4d68; }

/* Ordenação — pílula, não campo: não é um sexto filtro, só muda a ordem. */
.fs-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.fs-sort-label {
  color: var(--purple-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.fs-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background: var(--panel);
  color: #cdc5d6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}

.fs-sort-toggle:hover {
  border-color: #5a4d68;
  color: white;
}

.fs-sort-check {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #4a4057;
  border-radius: 4px;
  background: #0d0b10;
}

.fs-sort-check::after {
  content: "✓";
  font-size: 10px;
  line-height: 1;
  color: transparent;
}

.fs-sort-toggle[aria-pressed="true"] {
  border-color: var(--purple);
  background: #271632;
  color: #eadcf6;
  box-shadow: 0 0 16px #9d4edd26;
}

.fs-sort-toggle[aria-pressed="true"] .fs-sort-check {
  border-color: var(--purple);
  background: var(--purple);
}

.fs-sort-toggle[aria-pressed="true"] .fs-sort-check::after {
  color: white;
}

.fs-sort-toggle:focus-visible {
  outline: 2px solid var(--purple-2);
  outline-offset: 2px;
}

.fs-sort-hint {
  color: #6f6879;
  font-size: 11px;
}

.fs-status {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
}

.fs-status-error {
  border-color: #5c303e;
  background: #2a1c22;
  color: #e98ba3;
}

.fs-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.fs-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.fs-load-more {
  padding: 13px 26px;
  border: 1px solid var(--fs-line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}

.fs-load-more:hover {
  color: white;
  border-color: #5a4d68;
  background: #17131f;
}

/* ============================================================ cards V2.1 */

.fs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Itens de grid tem min-width:auto por padrao e se recusam a encolher
     abaixo do conteudo — sem isto a faixa de miniaturas estoura a coluna e
     empurra a pagina inteira para a rolagem horizontal. */
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(168deg, #191424, #110f17 62%);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
/* Brilho roxo só no topo e só no hover: destaque, não neon permanente. */
.fs-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, #9d4edd66, transparent);
  opacity: 0;
  transition: opacity .2s;
}
.fs-card:hover {
  border-color: #9d4edd59;
  box-shadow: 0 18px 38px #00000073, 0 0 26px #9d4edd1f;
  transform: translateY(-2px);
}
.fs-card:hover::before { opacity: 1; }

.fs-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fs-card-title strong { font-size: 26px; letter-spacing: -1px; }
.fs-card-title span { color: var(--muted); font-size: 12px; }
.fs-card-price {
  color: #dcaaff;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.8px;
  white-space: nowrap;
  text-shadow: 0 0 22px #a849df4d;
}

.fs-card-context {
  margin: -2px 0 0;
  color: #8f899c;
  font-size: 11.5px;
  line-height: 1.45;
}

.fs-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1px;
}
.fs-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.fs-badge-good { background: #10251a; border-color: #245136; color: #67db93; }
.fs-badge-warn { background: #26191f; border-color: #532c39; color: #e98ba3; }
.fs-badge-accent { background: #221430; border-color: #4e2e60; color: #d9b5ed; }
.fs-badge-muted { background: #1a1722; border-color: #2c2635; color: #a79fb3; }
.fs-badge-inactivity-positive {
  background: #1a9a5b16;
  border-color: #61d99b47;
  color: #b7f7d3;
  box-shadow: inset 0 1px 0 #d8ffe70a;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fs-badge-inactivity-negative {
  background: #d33c5514;
  border-color: #ff71854a;
  color: #ffc2cc;
  box-shadow: inset 0 1px 0 #ffe0e50a;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fs-badge-inactivity-positive::before,
.fs-badge-inactivity-negative::before { display: none; }

.fs-card-stats {
  display: flex;
  gap: 22px;
  margin: 2px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid #221d2d;
  list-style: none;
}
.fs-card-stats li { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.fs-card-stats strong { font-size: 16px; letter-spacing: -.3px; }
.fs-card-stats span { color: #7d7689; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }

/* Faixa de miniaturas: rola no toque, sem scrollbar visível, com fade na
   direita. O "+N" fica fora da área rolável para nunca sumir no fade. */
.fs-thumbs-row { display: flex; min-width: 0; gap: 7px; align-items: center; }
.fs-thumbs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.fs-thumbs::-webkit-scrollbar { display: none; }
.fs-thumb {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border: 1px solid #2b2436;
  border-radius: 10px;
  background: #0e0c13;
  object-fit: cover;
  transition: border-color .18s;
}
.fs-card:hover .fs-thumb { border-color: #3a3049; }
.fs-thumb-more {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 52px;
  padding: 0 8px;
  border: 1px solid #3a3049;
  border-radius: 10px;
  background: #1a1524;
  color: #b6acc4;
  font-size: 11px;
  font-weight: 800;
}

.fs-details-button {
  margin-top: 3px;
  padding: 12px;
  border: 1px solid #533168;
  border-radius: 10px;
  background: linear-gradient(140deg, #26173300, #2a1a38);
  color: #dcbcf0;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.fs-details-button:hover {
  border-color: var(--purple);
  background: linear-gradient(100deg, #7932ad, #a84ae3);
  color: white;
  box-shadow: 0 10px 22px #7d2fb340;
}
.fs-details-button:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 2px; }

/* =========================================================== modal V2.1 */

.fs-modal {
  width: 100%;
  max-width: 1080px;
  max-height: 94vh;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid #44364f;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(155deg, #121019, #0d0b12 62%);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 40px 90px #000000a6, inset 0 1px #ffffff08;
}
.fs-modal[open] { animation: fs-modal-in .22s ease both; }
.fs-modal::backdrop { background: #050307e0; backdrop-filter: blur(7px); }
.fs-modal-close {
  position: absolute;
  z-index: 4;
  right: 14px; top: 14px;
  width: 34px; height: 34px;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  background: #0c0910cc;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.fs-modal-close:hover { background: #2c2036; border-color: #6b4a82; }
.fs-modal-body {
  max-height: 94vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4b3158 transparent;
}
/* Trava a rolagem da página atrás do modal (o <dialog> sozinho não trava). */
body.fs-modal-open { overflow: hidden; }

/* Cabeçalho fixo: identidade + preço + abas ficam sempre visíveis. */
.fs-modal-sticky {
  position: sticky;
  z-index: 3;
  top: 0;
  padding: 18px 16px 0;
  background: linear-gradient(180deg, #171122, #0f0d14);
  border-bottom: 1px solid var(--fs-line);
}

.fs-modal-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 42px;
}

.fs-modal-avatar {
  width: 62px; height: 62px;
  flex: 0 0 62px;
  border: 1px solid #4a3a5c;
  border-radius: 14px;
  background: #140f1c;
  object-fit: cover;
  box-shadow: 0 0 22px var(--fs-glow);
}

.fs-modal-ident { min-width: 0; flex: 1 1 auto; }
.fs-modal-eyebrow {
  display: block;
  color: var(--purple-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.fs-modal-title { margin: 3px 0 4px; font-size: 20px; letter-spacing: -.5px; }
.fs-modal-sub { margin: 0; color: #8f899c; font-size: 11.5px; }

.fs-modal-pricebox { flex: 0 0 auto; text-align: right; }
.fs-modal-pricebox small {
  display: block;
  color: #7d7689;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.fs-modal-price { font-size: 27px; color: #dcaaff; letter-spacing: -.8px; text-shadow: 0 0 22px #a849df4d; }

/* Chamada de compra dentro do cabeçalho fixo do modal. */
.fs-modal-cta { margin-top: 14px; }
.fs-buy-button {
  width: 100%;
  min-height: 50px;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(100deg, #7932ad, #a84ae3);
  color: white;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  cursor: pointer;
  box-shadow: 0 12px 26px #7d2fb340;
  transition: filter .18s, transform .18s, box-shadow .18s;
}
.fs-buy-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fs-buy-button:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.fs-buy-button:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 3px; }
.fs-buy-note {
  margin: 9px 0 0;
  min-height: 16px;
  color: #e98ba3;
  font-size: 11.5px;
  text-align: center;
}

/* Destaques do topo: os fatos que decidem a compra, em cartões. */
.fs-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #1f1a29;
}
.fs-highlight {
  display: flex;
  align-items: center;
  min-height: 58px;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid #2a2335;
  border-radius: 12px;
  background: linear-gradient(145deg, #17131f, #121018);
}
.fs-highlight-icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border: 1px solid #ffffff0a;
  border-radius: 9px;
  background: #221731;
  color: #c9a0e4;
}
.fs-highlight-icon svg { display: block; width: 16px; height: 16px; }
.fs-highlight-copy { display: grid; min-width: 0; gap: 2px; }
.fs-highlight-copy strong { display: block; font-size: 12.5px; line-height: 1.2; }
.fs-highlight-copy > span { display: block; color: #81798e; font-size: 9.5px; line-height: 1.25; }
.fs-highlight-good .fs-highlight-icon { background: #12281c; color: #6ddc98; }
.fs-highlight-warn .fs-highlight-icon { background: #2a1a20; color: #e98ba3; }

.fs-modal-loading, .fs-modal-error { margin: 0; padding: 34px 18px; color: var(--muted); text-align: center; }
.fs-modal-error { color: #e98ba3; }

/* Esqueleto discreto enquanto os detalhes chegam. */
.fs-skeleton { padding: 22px 16px 30px; }
.fs-skel {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: linear-gradient(90deg, #17131f, #221b2e, #17131f);
  background-size: 220% 100%;
  animation: fs-shimmer 1.25s linear infinite;
}
.fs-skel-lg { height: 62px; margin-bottom: 16px; }
.fs-skel-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fs-skel-row .fs-skel { height: 46px; }

.fs-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-top: 14px;
  scrollbar-width: none;
}
.fs-tabs::-webkit-scrollbar { display: none; }
.fs-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: #8f899c;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s;
}
.fs-tab::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--purple);
  transform: scaleX(0);
  transition: transform .2s;
}
.fs-tab:hover { color: #d9a3ff; }
.fs-tab.active { color: #e6c8fb; }
.fs-tab.active::after { transform: scaleX(1); }

.fs-modal-content { padding: 18px 16px 30px; }
.fs-panel { display: none; }
.fs-panel.active { display: block; animation: fs-fade-in .2s ease both; }

/* ---- aba Informações: grupos, não tabela ---- */
.fs-group { margin-bottom: 18px; }
.fs-group:last-child { margin-bottom: 0; }
.fs-group-title {
  margin: 0 0 9px;
  color: #9a92a8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.fs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fs-metric {
  display: flex;
  align-items: center;
  min-height: 68px;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid #2c2439;
  border-radius: 12px;
  background: linear-gradient(150deg, #1b1526, #12101a);
}
.fs-metric-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border: 1px solid #ffffff0a;
  border-radius: 9px;
  background: #251836;
  color: #cba3e6;
}
.fs-metric-icon svg { display: block; width: 16px; height: 16px; }
.fs-metric-copy { display: grid; min-width: 0; gap: 2px; }
.fs-metric-copy strong { display: block; font-size: 17px; line-height: 1.1; letter-spacing: -.4px; }
.fs-metric-copy > span { display: block; color: #81798e; font-size: 9.5px; line-height: 1.25; text-transform: uppercase; letter-spacing: .6px; }

.fs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.fs-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #241e2f;
  border-radius: 10px;
  background: #14111b;
}
.fs-fact dt { color: #7d7689; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.fs-fact dd { margin: 0; font-size: 13px; font-weight: 600; }

.fs-access { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fs-access-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #241e2f;
  border-radius: 10px;
  background: #14111b;
  font-size: 12px;
}
.fs-access-item span { color: #b5aec2; }
.fs-access-item b { color: #a9a2b6; font-size: 11px; font-weight: 800; }
.fs-access-yes b { color: #67db93; }
.fs-access-no b { color: #e98ba3; }

/* ---- aba Skins / Outros itens ---- */
.fs-cos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fs-cos {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 6px 9px;
  border: 1px solid #241e2f;
  border-radius: 12px;
  background: linear-gradient(160deg, #191423, #12101a);
  transition: border-color .18s, transform .18s;
}
.fs-cos:hover { border-color: #4a3a5c; transform: translateY(-2px); }
.fs-cos .fs-thumb {
  width: 100%;
  height: auto;
  max-width: 84px;
  flex: none;
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: none;
}
.fs-cos figcaption {
  color: #a9a2b6;
  font-size: 10px;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Raridade: uma barra fina no topo, sem borda colorida em tudo. */
.fs-cos-rare { border-top: 2px solid #3b3049; }
.fs-cos-rare[data-rarity="legendary"] { border-top-color: #e0a13a; }
.fs-cos-rare[data-rarity="epic"] { border-top-color: #b45cf0; }
.fs-cos-rare[data-rarity="rare"] { border-top-color: #4aa8ee; }
.fs-cos-rare[data-rarity="superrare"] { border-top-color: #4aa8ee; }
.fs-cos-rare[data-rarity="uncommon"] { border-top-color: #6bcc63; }
.fs-cos-rare[data-rarity="common"] { border-top-color: #9a93a6; }
.fs-cos-rare[data-rarity="icon"] { border-top-color: #4fd6d0; }
.fs-cos-rare[data-rarity="mythic"] { border-top-color: #f2d35b; }
.fs-cos-rare[data-rarity="marvel"] { border-top-color: #e05b53; }
.fs-cos-rare[data-rarity="dc"] { border-top-color: #5b7ce0; }
.fs-cos-rare[data-rarity="starwars"] { border-top-color: #d8d8d8; }
.fs-cos-rare[data-rarity="gaminglegends"] { border-top-color: #8a5bf0; }
.fs-cos-rare[data-rarity="frozen"] { border-top-color: #8fd8f5; }
.fs-cos-rare[data-rarity="lava"] { border-top-color: #f08a3c; }
.fs-cos-rare[data-rarity="shadow"] { border-top-color: #6d6a7a; }
.fs-cos-rare[data-rarity="slurp"] { border-top-color: #5ce0c0; }
.fs-cos-rare[data-rarity="dark"] { border-top-color: #a35bd6; }

.fs-cos-title { margin: 0 0 10px; font-size: 12px; }
.fs-cos-more {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--fs-line);
  border-radius: 10px;
  background: transparent;
  color: #cdc5d6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.fs-cos-more:hover { border-color: #5a4d68; color: white; background: #17131f; }
.fs-cos-note { margin: 12px 0 0; color: #7d7689; font-size: 11px; text-align: center; }

/* Subcategorias de "Outros itens": uma categoria por vez. */
.fs-subchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.fs-subchip {
  padding: 8px 14px;
  border: 1px solid var(--fs-line);
  border-radius: 999px;
  background: #14111b;
  color: #a9a2b6;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.fs-subchip:hover { border-color: #5a4d68; color: white; }
.fs-subchip.active { border-color: var(--purple); background: #271632; color: #eadcf6; }
.fs-cos-block { display: none; }
.fs-cos-block.active { display: block; animation: fs-fade-in .18s ease both; }

/* ---- aba Temporadas ---- */
.fs-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.fs-season {
  display: flex;
  min-height: 98px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 13px 10px;
  border: 1px solid #2a2338;
  border-radius: 12px;
  background: linear-gradient(160deg, #1c1528, #12101a);
  text-align: center;
  transition: border-color .18s, transform .18s;
}
.fs-season:hover { border-color: #4a3a5c; transform: translateY(-2px); }
.fs-season-num { color: #7d7689; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.fs-season strong { color: #e2c4f0; font-size: 22px; line-height: 1; letter-spacing: -.6px; }
.fs-season-pass {
  align-self: center;
  padding: 3px 8px;
  border: 1px solid #3a2f49;
  border-radius: 999px;
  background: #1d1628;
  color: #c9a0e4;
  font-size: 9.5px;
  font-weight: 800;
}
.fs-season-nopass { color: #6f6879; border-color: #2a2434; background: #16131d; }

@keyframes fs-modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fs-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes fs-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* ------------------------------------------------------------- responsivo */

@media (min-width: 560px) {
  .fs-cos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fs-access { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .fs-main { padding: 26px 22px 90px; }
  .fs-hero h1 { font-size: 32px; }
  .fs-filters { grid-template-columns: repeat(3, 1fr); align-items: end; padding: 18px; }
  .fs-field-cosmetic { grid-column: span 3; }
  .fs-results-grid { grid-template-columns: repeat(2, 1fr); }
  /* Respiro nas laterais: entre 720px e 1120px o modal encostava nas duas
     bordas da janela e perdia o ar que ele tem no desktop largo. */
  .fs-modal { width: calc(100% - 40px); max-height: 90vh; margin: auto; border-radius: 20px; }
  .fs-modal-body { max-height: 90vh; }
  .fs-modal-sticky { padding: 22px 26px 0; }
  .fs-modal-content { padding: 22px 26px 34px; }
  .fs-modal-avatar { width: 74px; height: 74px; flex-basis: 74px; }
  .fs-modal-title { font-size: 23px; }
  .fs-modal-price { font-size: 31px; }
  .fs-highlights { grid-template-columns: repeat(4, 1fr); }
  .fs-metrics { grid-template-columns: repeat(4, 1fr); }
  .fs-facts { grid-template-columns: repeat(3, 1fr); }
  .fs-cos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .fs-filters { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
  .fs-field-cosmetic { grid-column: span 1; }
  .fs-results-grid { grid-template-columns: repeat(3, 1fr); }
  .fs-actions { flex: 0 0 auto; }
  .fs-search-button { min-width: 210px; }
  .fs-cos-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .fs-cos-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Celular: modal quase cheio, conteúdo respirando, nada apertado. */
@media (max-width: 719px) {
  .fs-modal { max-height: 96vh; }
  .fs-modal-body { max-height: 96vh; }
  .fs-modal-hero { align-items: flex-start; }
  .fs-modal-avatar { width: 54px; height: 54px; flex-basis: 54px; }
  .fs-modal-pricebox { text-align: left; }
  .fs-modal-price { font-size: 23px; }
  .fs-highlights { gap: 7px; }
  .fs-card-title strong { font-size: 24px; }
  .fs-card-price { font-size: 23px; }
  .fs-hero-count { width: 100%; }
}

@media (max-width: 719px) and (min-width: 481px) {
  .fs-modal-hero { flex-wrap: wrap; }
  .fs-modal-pricebox { text-align: right; }
}

/* Até 480px o preço ganha a própria linha: espremido ao lado do nome ele
   quebrava o título em duas linhas e encostava no botão de fechar. */
@media (max-width: 480px) {
  .fs-modal-hero { flex-wrap: wrap; padding-right: 44px; }
  .fs-modal-avatar { width: 50px; height: 50px; flex-basis: 50px; border-radius: 12px; }
  .fs-modal-title { font-size: 18px; }
  .fs-modal-pricebox {
    display: flex;
    flex: 1 0 100%;
    align-items: baseline;
    gap: 8px;
    text-align: left;
  }
  .fs-modal-pricebox small { display: inline; }
  .fs-modal-price { font-size: 25px; }
  .fs-modal-sticky { padding: 16px 14px 0; }
  .fs-modal-content { padding: 16px 14px 28px; }
}

@media (max-width: 380px) {
  .fs-cos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-metrics { grid-template-columns: 1fr; }
  .fs-highlights { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-modal[open], .fs-panel.active, .fs-cos-block.active, .fs-skel { animation: none; }
}

/* ── Full Acesso como vitrine ─────────────────────────────────────────────
   A página abre no estoque, não num formulário. Mesma paleta neon da home:
   roxo elétrico como luz principal, azul-violeta de apoio. */
.home-page.fs-page main{margin-top:0}
.fs-page{background:#0a0713}
.fs-main{position:relative;padding-bottom:0;background:radial-gradient(ellipse at 15% 0,#8a1fff3a,transparent 44%),radial-gradient(ellipse at 88% 14%,#5b21f02e,transparent 40%),radial-gradient(ellipse at 55% 92%,#7c1fd91f,transparent 46%),#0a0713}
.fs-hero,.fs-stock,.fs-searchbar{width:calc(100% - 80px);max-width:1280px;margin-inline:auto}
.fs-hero{display:block;padding:34px 0 26px;max-width:1100px;margin-bottom:0;text-align:left}
.fs-hero h1{display:block;gap:0}
.fs-hero h1{font-family:"Barlow Condensed",Inter,sans-serif;font-size:clamp(36px,5vw,58px);font-weight:700;line-height:1.03;letter-spacing:-.8px;text-transform:uppercase;margin:12px 0 14px}
.fs-hero h1 em{font-style:normal;color:#c77dff;background:linear-gradient(105deg,#e0aaff,#a855f7 52%,#7b5cff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.fs-hero>p{max-width:620px;margin:0;color:#b8a8d6;font-size:13.5px;line-height:1.75}
.fs-stock-flag{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:7px 14px;border:1px solid #a855f745;border-radius:999px;background:#1a0f2e80;color:#d7c7f0;font-size:11px;font-weight:600}
.fs-stock-flag:before{content:"";width:7px;height:7px;border-radius:50%;background:#8ef0b4;box-shadow:0 0 0 4px #8ef0b41f}
.fs-stock-flag[hidden]{display:none}

.fs-stock{padding-top:14px}
.fs-searchbar{margin-top:66px;margin-bottom:64px;padding:26px 26px 24px;border:1px solid #8b5cf740;border-radius:16px;background:linear-gradient(160deg,#150e2b,#0e0a1c 64%);box-shadow:0 12px 34px #00000045}
.fs-section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:22px}
.fs-section-head h2{font-family:"Barlow Condensed",Inter,sans-serif;font-size:clamp(26px,3.2vw,36px);font-weight:600;line-height:1.08;letter-spacing:-.3px;margin:8px 0 0}
.fs-section-lead{margin:10px 0 0;color:#a99cb5;font-size:12.5px;line-height:1.75;max-width:520px}
.fs-stock-meta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.fs-back-to-stock{min-height:38px;padding:0 16px;border:1px solid #a855f759;border-radius:999px;background:#1d1033;color:#e2d3f8;font:600 11px Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.fs-back-to-stock:hover{background:#2b1550;border-color:#c77dff}
.fs-back-to-stock[hidden]{display:none}

/* Grade: ~4 por linha no desktop, 1–2 no mobile. Vitrine de comparação. */
.fs-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}

/* Esqueleto com a mesma silhueta do card, para não haver salto de layout. */
.fs-card-skeleton{pointer-events:none}
.fs-sk{border-radius:8px;background:linear-gradient(90deg,#1b1330,#2a1b4a 45%,#1b1330);background-size:200% 100%;animation:fs-sk-sweep 1.4s linear infinite}
.fs-sk-head{height:26px;margin-bottom:14px}
.fs-sk-line{height:12px;margin-bottom:9px}
.fs-sk-short{width:58%}
.fs-sk-thumbs{height:52px;margin:16px 0}
.fs-sk-button{height:38px;border-radius:9px}
@keyframes fs-sk-sweep{from{background-position:200% 0}to{background-position:-200% 0}}

/* Estados vazios / indisponível. */
.fs-empty{margin-top:8px;padding:38px 26px;border:1px dashed #8b5cf745;border-radius:14px;background:#120c22a8;text-align:center}
.fs-empty[hidden]{display:none}
.fs-empty h3{font-family:"Barlow Condensed",Inter,sans-serif;font-size:23px;font-weight:600;margin:0 0 10px}
.fs-empty p{margin:0 auto 18px;max-width:460px;color:#a99cb5;font-size:12.5px;line-height:1.8}
.fs-empty-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 22px;border:1px solid #c77dff66;border-radius:999px;background:linear-gradient(110deg,#7b2ff7,#b026ff);color:#fff;font-size:12px;font-weight:700;text-decoration:none}
.fs-empty-action[hidden]{display:none}
.fs-empty-action:hover{filter:brightness(1.12)}

@media(max-width:1100px){.fs-hero,.fs-stock,.fs-searchbar{width:calc(100% - 48px)}}
@media(max-width:760px){
  .fs-hero,.fs-stock,.fs-searchbar{width:calc(100% - 36px)}
  .fs-hero{padding:24px 0 20px}
  .fs-hero>p{font-size:12.5px}
  .fs-searchbar{margin-top:44px;margin-bottom:44px;padding:20px 16px}
  .fs-section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:18px}
  .fs-stock-meta{width:100%;justify-content:space-between}
  .fs-results-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
  .fs-empty{padding:28px 18px}
}
@media(prefers-reduced-motion:reduce){
  .fs-sk{animation:none;background:#1f1636}
  .fs-back-to-stock,.fs-empty-action{transition:none}
}

/* ── Full Acesso, rodada 2 ────────────────────────────────────────────────
   Os filtros passam a abrir a página como ferramenta principal, e hero +
   painel + vitrine viram um fluxo só. Acento neon roxo/ciano, glow contido
   para o texto não perder legibilidade. */
.fs-hero{padding:28px 0 18px}
.fs-hero h1{font-size:clamp(32px,4.4vw,50px);margin:10px 0 12px}
.fs-hero>p{max-width:660px;font-size:13px}
.fs-stock-flag{margin-top:14px}

/* Painel de filtros: agora é o topo da experiência, não um rodapé. */
.fs-searchbar{position:relative;margin-top:0;margin-bottom:0;padding:24px 24px 20px;border:1px solid #a855f74a;border-radius:18px;background:linear-gradient(158deg,#1b1038,#120c24 58%,#0e0a1c);box-shadow:0 18px 44px #00000059,inset 0 1px 0 #c77dff1f}
.fs-searchbar:before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,#c77dff,#5eead4 62%,transparent);opacity:.55}
.fs-searchbar:after{content:"";position:absolute;left:-90px;top:-80px;width:280px;height:280px;border-radius:50%;background:#a855f7;opacity:.12;filter:blur(60px);pointer-events:none}
.fs-searchbar>*{position:relative;z-index:1}
.fs-searchbar .fs-section-head{margin-bottom:18px}

/* Campos: mesma altura, foco neon, nada de cara de formulário cru. */
.fs-filters{display:grid;grid-template-columns:1.6fr repeat(3,1fr) 1.1fr;gap:12px;align-items:end}
.fs-page .fs-field label{display:block;margin-bottom:7px;color:#c3b2e0;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.fs-page .fs-field input,.fs-page .fs-price-field{width:100%;min-height:46px;border:1px solid #8b5cf745;border-radius:11px;background:#0e0a1cd9;color:#f1e9fb;transition:border-color .2s,box-shadow .2s,background .2s}
.fs-page .fs-field>input{padding:0 14px}
.fs-page .fs-price-field{display:flex;align-items:center;gap:6px;padding:0 12px}
.fs-page .fs-price-field span{color:#a58fd0;font-size:12px;font-weight:600}
.fs-page .fs-price-field input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:#f1e9fb;outline:0;padding:0}
.fs-page .fs-field input::placeholder{color:#7d6f94}
.fs-page .fs-field input:hover,.fs-page .fs-price-field:hover{border-color:#a855f766}
.fs-page .fs-field input:focus,.fs-page .fs-price-field:focus-within{border-color:#c77dff;box-shadow:0 0 0 3px #a855f733;background:#150e2b}
.fs-page .fs-field input:focus{outline:0}
.fs-page .fs-suffix-field{display:flex;align-items:center;width:100%;min-height:46px;border:1px solid #8b5cf745;border-radius:11px;background:#0e0a1cd9;transition:border-color .2s,box-shadow .2s,background .2s}
.fs-page .fs-suffix-field:hover{border-color:#a855f766}
.fs-page .fs-suffix-field:focus-within{border-color:#c77dff;box-shadow:0 0 0 3px #a855f733;background:#150e2b}
.fs-page .fs-field .fs-suffix-field input{flex:1;min-width:0;min-height:44px;padding:0 4px 0 14px;border:0;background:transparent;box-shadow:none}
.fs-page .fs-suffix-field>span{padding-right:14px;color:#a58fd0;font-size:11px;font-weight:600}

/* Barra de ações: ordenação à esquerda, botões à direita, uma linha só. */
.fs-page .fs-searchbar-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #a855f726}
.fs-page .fs-sort-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.fs-page .fs-sort-label{color:#a58fd0;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.fs-page .fs-sort-toggle{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 15px;border:1px solid #8b5cf74a;border-radius:999px;background:#150e2b;color:#ddd0f2;font:600 11px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.fs-page .fs-sort-toggle:hover{border-color:#c77dff;color:#fff}
.fs-page .fs-sort-toggle[aria-pressed="true"]{border-color:#5eead4;background:#0f2c2b;color:#d3fff5}
.fs-page .fs-sort-check{width:15px;height:15px;border:1px solid #a58fd0;border-radius:5px;flex:0 0 15px;position:relative}
.fs-page .fs-sort-toggle[aria-pressed="true"] .fs-sort-check{border-color:#5eead4;background:#5eead4}
.fs-page .fs-sort-toggle[aria-pressed="true"] .fs-sort-check:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #06231f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fs-page .fs-sort-hint{color:#8d80a5;font-size:10px}
.fs-page .fs-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.fs-page .fs-clear-button{min-height:44px;padding:0 16px;border:1px solid #8b5cf745;border-radius:999px;background:transparent;color:#b8a8d6;font:600 11px Inter,system-ui,sans-serif;cursor:pointer;transition:color .2s,border-color .2s}
.fs-page .fs-clear-button:hover{color:#fff;border-color:#c77dff}
.fs-page .fs-search-button{min-height:44px;padding:0 26px;border:1px solid #c77dff70;border-radius:999px;background:linear-gradient(110deg,#7b2ff7,#b026ff);color:#fff;font:750 12px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 22px #a855f74a;transition:transform .2s,filter .2s}
.fs-page .fs-search-button:hover{transform:translateY(-1px);filter:brightness(1.13)}
.fs-page .fs-search-button:disabled{opacity:.55;transform:none;cursor:default}

/* Vitrine logo abaixo do painel: um fluxo, não duas páginas empilhadas. */
.fs-stock{padding-top:34px}
.fs-page .fs-section-head h2{letter-spacing:-.4px}
.fs-page .fs-card{border-color:#8b5cf740;background:linear-gradient(168deg,#160f2c,#100c1f 62%);transition:border-color .2s,transform .2s,box-shadow .2s}
@media(hover:hover){.fs-page .fs-card:not(.fs-card-skeleton):hover{transform:translateY(-3px);border-color:#c77dff80;box-shadow:0 16px 34px #00000059,0 0 0 1px #c77dff2e}}
.fs-page .fs-card-price{color:#e0aaff}
.fs-page .fs-details-button{border-color:#a855f759;background:#211238;color:#e8dcfa;transition:background .2s,border-color .2s}
.fs-page .fs-details-button:hover{background:linear-gradient(110deg,#7b2ff7,#b026ff);border-color:#c77dff;color:#fff}

@media(max-width:1000px){.fs-filters{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){
  .fs-hero{padding:20px 0 14px}
  .fs-searchbar{padding:18px 15px 16px;border-radius:14px}
  .fs-filters{grid-template-columns:1fr 1fr;gap:10px}
  .fs-field-cosmetic{grid-column:1/-1}
  .fs-page .fs-searchbar-actions{flex-direction:column;align-items:stretch;gap:14px}
  .fs-page .fs-actions{width:100%}
  .fs-page .fs-clear-button,.fs-page .fs-search-button{flex:1}
  .fs-stock{padding-top:26px}
}
@media(max-width:420px){.fs-filters{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .fs-page .fs-card,.fs-page .fs-search-button,.fs-page .fs-details-button,
  .fs-page .fs-sort-toggle,.fs-page .fs-clear-button{transition:none}
  @media(hover:hover){.fs-page .fs-card:not(.fs-card-skeleton):hover{transform:none}}
}

/* Chips mostram o que está ativo e removem com um clique. */

.fs-filter-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;border-radius:999px;background:linear-gradient(110deg,#7b2ff7,#b026ff);color:#fff;font-size:10px;font-weight:800}
.fs-filter-count[hidden]{display:none}

.fs-active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fs-active-filters[hidden]{display:none}
.fs-chip{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 8px 0 13px;border:1px solid #a855f759;border-radius:999px;background:#1d1033;color:#e2d3f8;font:600 11px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .18s,background .18s}
.fs-chip:hover{border-color:#c77dff;background:#2b1550}
.fs-chip:focus-visible{outline:2px solid #c77dff;outline-offset:2px}
.fs-chip>span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#ffffff14;font-size:12px;line-height:1}

@media(max-width:1000px){
  .fs-filters{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .fs-filters{grid-template-columns:1fr 1fr}
  .fs-active-filters{gap:6px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.fs-chip{transition:none}}

/* ── Filtros: todos visíveis, em pares ───────────────────────────────────
   Sem "Mais filtros". Cada par mínimo/máximo é um grupo só, então o painel
   fica baixo e a leitura é por critério (Skins, Nível...), não por campo
   solto. Doze colunas dão flexibilidade sem quebrar o alinhamento. */
.fs-filters{grid-template-columns:repeat(12,1fr);gap:14px 12px;align-items:end}
.fs-field-cosmetic{grid-column:span 6}
.fs-filters .fs-group{grid-column:span 4}
.fs-filters>.fs-field:not(.fs-field-cosmetic){grid-column:span 4}

/* Grupo com par mínimo/máximo. */
.fs-group{min-width:0;margin:0;padding:0;border:0}
.fs-group legend{padding:0;margin-bottom:7px;color:#c3b2e0;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.fs-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:5px 10px;border:1px solid #8b5cf736;border-radius:12px;background:#0e0a1c8c;transition:border-color .2s,background .2s}
.fs-pair:focus-within{border-color:#a855f766;background:#150e2b}
.fs-pair-cell{display:flex;flex-direction:column;min-width:0}
.fs-pair-cell label{margin:0 0 2px 2px;color:#8d80a5;font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase}
.fs-page .fs-pair-cell input{width:100%;min-width:0;min-height:34px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:#f1e9fb;font-size:13px}
.fs-page .fs-pair-cell input:hover{background:#ffffff08}
.fs-page .fs-pair-cell input:focus{outline:0;background:#ffffff0f;box-shadow:none}
.fs-pair-sep{align-self:end;padding-bottom:8px;color:#6f6386;font-size:12px;line-height:1}
.fs-money-input{display:flex;align-items:center;min-width:0}
.fs-money-input>span{flex:0 0 auto;padding-left:5px;color:#8d80a5;font-size:10px;font-weight:600}
.fs-page .fs-pair-cell .fs-money-input input{flex:1;width:auto;padding-left:4px}

@media(max-width:1100px){
  .fs-field-cosmetic{grid-column:span 6}
  .fs-filters .fs-group{grid-column:span 6}
  .fs-filters>.fs-field:not(.fs-field-cosmetic){grid-column:span 6}
}
@media(max-width:760px){
  .fs-filters{grid-template-columns:repeat(2,1fr);gap:12px 10px}
  .fs-field-cosmetic{grid-column:1/-1}
  .fs-filters .fs-group{grid-column:1/-1}
  .fs-filters>.fs-field:not(.fs-field-cosmetic){grid-column:span 1}
  .fs-pair{padding:4px 8px;gap:6px}
  .fs-page .fs-pair-cell input{min-height:38px;font-size:14px}
}
/* So abaixo de 360px os dois campos curtos deixam de dividir a linha. */
@media(max-width:359px){
  .fs-filters>.fs-field:not(.fs-field-cosmetic){grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.fs-pair{transition:none}}

/* Aviso compacto sobre a leitura do selo de inatividade dos anúncios. */
.fs-inactivity-notice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:17px;margin:0 0 22px;padding:18px 19px;overflow:hidden;border:1px solid #7c6cff52;border-radius:16px;background:linear-gradient(135deg,#15102bc7,#0e1227b8 58%,#0a1d29b0);box-shadow:inset 0 1px 0 #ffffff0d,0 12px 32px #03020b52,0 0 28px #635bff12;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.fs-inactivity-notice:before{content:"";position:absolute;right:-56px;top:-92px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#5eead425,transparent 67%);pointer-events:none}
.fs-inactivity-notice[hidden]{display:none}
.fs-inactivity-notice>*{min-width:0}
.fs-inactivity-icon{position:relative;display:grid;place-items:center;width:43px;height:43px;border:1px solid #79dff05c;border-radius:13px;background:linear-gradient(145deg,#5eead41a,#8b5cf723);box-shadow:inset 0 1px 0 #ffffff14,0 0 20px #5eead416;color:#a5f3fc}
.fs-inactivity-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.fs-inactivity-content{position:relative;min-width:0}
.fs-inactivity-copy .home-kicker{color:#8de5ef;font-size:8.5px;letter-spacing:1.55px}
.fs-inactivity-copy h3{margin:5px 0 5px;color:#f2edff;font:700 clamp(18px,2vw,22px)/1.15 "Barlow Condensed",Inter,sans-serif;letter-spacing:.1px}
.fs-inactivity-copy>p{max-width:760px;margin:0;color:#b9afcc;font-size:11.5px;line-height:1.65}
.fs-inactivity-examples{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.fs-inactivity-example{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;min-width:min(100%,260px);padding:9px 11px;border:1px solid;border-radius:11px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fs-inactivity-example strong{min-width:0;font-size:10.5px;font-weight:700;line-height:1.35}
.fs-inactivity-example small{flex:0 0 auto;font:700 8.5px/1 Inter,system-ui,sans-serif;letter-spacing:.35px;opacity:.7}
.fs-inactivity-example.is-positive{border-color:#61d99b47;background:#1a9a5b16;color:#b7f7d3;box-shadow:inset 0 1px 0 #d8ffe70a}
.fs-inactivity-example.is-negative{border-color:#ff71854a;background:#d33c5514;color:#ffc2cc;box-shadow:inset 0 1px 0 #ffe0e50a}
.fs-inactivity-note{margin:10px 0 0;color:#8f86a5;font-size:9.5px;line-height:1.5}
.fs-inactivity-dismiss{position:relative;min-height:36px;padding:0 16px;border:1px solid #9d7bff61;border-radius:999px;background:#9b6cff16;color:#e6dcff;font:700 10.5px Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.fs-inactivity-dismiss:hover{border-color:#bda6ff;background:#9b6cff29;color:#fff;transform:translateY(-1px)}
.fs-inactivity-dismiss:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px}
@media(max-width:760px){.fs-inactivity-notice{grid-template-columns:auto minmax(0,1fr);gap:13px;padding:16px;margin-bottom:18px}.fs-inactivity-dismiss{grid-column:2;justify-self:start}.fs-inactivity-example{width:100%;min-width:0}}
@media(max-width:420px){.fs-inactivity-notice{grid-template-columns:1fr}.fs-inactivity-icon{width:39px;height:39px}.fs-inactivity-dismiss{grid-column:1;width:100%}.fs-inactivity-example{align-items:flex-start;flex-direction:column;gap:5px}.fs-inactivity-copy h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.fs-inactivity-dismiss{transition:none}}