/* Vidro neutro: reflexos, bordas polidas e profundidade. */
.tabs, .ann-toptabs { column-gap: .5cm; }
.ann-toptabs { align-items: center; padding-block: 7px; }
.tab-btn[data-tab] { --tab-rgb: 110, 110, 110; }
body .tab-btn[data-tab] {
  zoom: .8;
  flex-shrink: 0;
  min-height: 46px;
  padding: 7px 12px;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.24);
  border-top-color: rgba(255,255,255,.65);
  border-left-color: rgba(255,255,255,.5);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025) 55%, rgba(255,255,255,.08));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 1px 0 1px rgba(255,255,255,.25),
    inset 0 -1px 1px rgba(255,255,255,.35), inset -1px 0 2px rgba(0,0,0,.09),
    0 4px 6px -2px rgba(0,0,0,.25), 2px 2px 4px rgba(0,0,0,.07);
  backdrop-filter: blur(6px) saturate(.2);
  -webkit-backdrop-filter: blur(6px) saturate(.2);
  color: #343434;
  font-size: 12px;
  font-weight: 750;
  opacity: 1;
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
/* Ícone em SVG inline (antes: fonte de ícones, que chegava depois e alargava o botão). 1em = font-size abaixo. */
body .tab-btn[data-tab] .tab-icon { font-size: 27px; width: 1em; height: 1em; display: block; color: inherit; flex-shrink: 0; }
/* As abas da barra superior só aparecem com fonte, contagens e alinhamento no lugar: entram sem se mexer. */
.ann-toptabs { transition: opacity .16s ease; }
.ann-toptabs.is-settling { opacity: 0; pointer-events: none; transition: none; }
body .tab-btn[data-tab]::after { content: '\203A'; font-size: 22px; font-weight: 400; margin-left: auto; opacity: .65; }
body .tab-btn[data-tab]:hover { background-color: rgba(255,255,255,.08); }
body .tab-btn[data-tab].active {
  border-color: rgba(255,255,255,.6);
  background-color: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.85), inset 0 -1px 1px rgba(255,255,255,.5),
    0 0 0 1px rgba(0,0,0,.12), 0 4px 7px -2px rgba(0,0,0,.3);
}
body .tab-btn[data-tab]:focus-visible { outline: 3px solid rgb(var(--tab-rgb)); outline-offset: 2px; }
body .tab-btn[data-tab] .tab-count {
  color: inherit;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
/* No escuro, o vidro preserva os tons quentes do fundo da loja. */
[data-theme="dark"] body .tab-btn[data-tab] {
  --tab-rgb: 207, 185, 153;
  color: var(--text);
  border-color: rgba(207,185,153,.18);
  border-top-color: rgba(236,220,196,.32);
  border-left-color: rgba(236,220,196,.25);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(236,220,196,.1), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(236,220,196,.07), transparent 40%),
    linear-gradient(135deg, rgba(207,185,153,.045), rgba(207,185,153,.015) 55%, rgba(207,185,153,.05));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgba(236,220,196,.26), inset 1px 0 1px rgba(236,220,196,.1),
    inset 0 -1px 1px rgba(236,220,196,.13), 0 3px 6px -2px rgba(0,0,0,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="dark"] body .tab-btn[data-tab]:hover { background-color: rgba(207,185,153,.06); }
[data-theme="dark"] body .tab-btn[data-tab].active {
  border-color: rgba(207,185,153,.45);
  background-color: rgba(207,185,153,.08);
  box-shadow: inset 0 1px 2px rgba(236,220,196,.38), inset 0 -1px 1px rgba(236,220,196,.2),
    0 3px 7px -2px rgba(0,0,0,.3);
}
[data-theme="dark"] body .tab-btn[data-tab] .tab-icon { color: inherit; }
[data-theme="dark"] body .tab-btn[data-tab] .tab-count {
  color: var(--text);
  background: rgba(207,185,153,.12);
  border-color: rgba(207,185,153,.18);
}
body .tab-btn[data-tab]:active { transform: scale(.97); }
@media (max-width: 640px) {
  body .tabs { gap: 6px; padding: 7px 6px; }
  body .tabs .tab-btn[data-tab] { flex: 1 0 auto; min-height: 44px; padding: 6px 8px; font-size: 11px; gap: 5px; }
  body .tabs .tab-btn[data-tab] .tab-icon { order: -1; font-size: 21px; }
  body .tabs .tab-btn[data-tab]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { body .tab-btn[data-tab] { transition: none; } }