/* ==================================================================
   Menu principal (componente separado: components/menu.php + menu.js)
   ================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  transition: background .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
/* Logotipo enviado em Configurações > Marca (substitui o ícone padrão) */
.brand-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; }
@media (max-width: 760px) { .brand-logo { height: 32px; max-width: 140px; } }

.site-header.is-solid, .site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom-color: var(--border);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.brand-mark { width: 34px; height: 34px; color: var(--accent); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; }

.main-nav { flex: 1; min-width: 0; }
.main-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--text-soft);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.main-nav a:hover { color: var(--text); background: var(--hover); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::after { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 8px; }

.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.header-btn:hover, .header-btn[aria-expanded="true"] { background: var(--hover); }
.header-count {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; border: 2px solid var(--bg);
  background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 800; line-height: 14px; text-align: center;
}
.header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: 800; font-size: .86rem; overflow: hidden;
}
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-avatar-wrap { position:relative; display:grid; place-items:center; width:38px; height:38px; flex:none; }
.header-avatar-frame { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; pointer-events:none; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
/* Com moldura: a caixa inteira é a moldura e a foto fica dentro do aro (68%), sem vazar nem entortar. */
.header-avatar-wrap:has(.header-avatar-frame) { width:52px; height:52px; }
.header-avatar-wrap:has(.header-avatar-frame) .header-avatar { width:68%; height:68%; }
.header-user { padding: 2px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.header-user[aria-expanded="true"] .header-avatar, .header-user:hover .header-avatar { box-shadow: 0 0 0 3px var(--accent-soft); }

.menu-dd { position: relative; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--ui-shadow-lg);
  display: none;
  z-index: 90;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-dd.is-open .menu-panel { display: block; }
.menu-panel--wide { width: 360px; }
.menu-head { padding: 8px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-head strong { display: block; }
.menu-head span { font-size: .84rem; color: var(--muted); }
.menu-title { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 10px; font-weight: 700; }
.menu-title button { border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.menu-title button:hover { background: var(--hover); }
.menu-item, .menu-panel form button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 42px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; font-size: .94rem; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover, .menu-panel form button:hover { background: var(--hover); }
.menu-item .icon, .menu-panel form button .icon { width: 18px; height: 18px; color: var(--muted); }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-label { padding: 8px 10px 6px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.menu-label--section { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.menu-head + .menu-item + .menu-label--section { border-top: 0; padding-top: 7px; }
.menu-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 4px 4px; }
.menu-theme button {
  display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px;
  border-radius: 10px; border: 1px solid var(--border); background: transparent;
  color: var(--text-soft); font: inherit; font-size: .78rem; cursor: pointer;
}
.menu-theme button .icon { width: 18px; height: 18px; }
.menu-theme button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.notif-list { max-height: 380px; overflow-y: auto; display: grid; gap: 2px; }
.notif {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  padding: 10px; border-radius: 12px; text-decoration: none; color: var(--text);
}
.notif:hover { background: var(--hover); }
.notif.is-unread { background: var(--accent-soft); }
.notif-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-soft); }
.notif-icon .icon { width: 16px; height: 16px; }
.notif strong { display: block; font-size: .9rem; line-height: 1.3; }
.notif p { font-size: .84rem; color: var(--text-soft); margin-top: 2px; }
.notif time { display: block; font-size: .76rem; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 24px 10px; text-align: center; color: var(--muted); font-size: .9rem; }

.header-auth { display: flex; gap: 8px; }

/* Barra inferior no celular */
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .main-nav { display: none; }
}
@media (max-width: 760px) {
  :root { --header-height: 60px; }
  body.has-bottom-nav { --bottom-nav-height: 66px; }
  .header-inner { gap: 12px; }
  .brand-name { font-size: 1.45rem; }
  .brand-mark { width: 30px; height: 30px; }
  .header-auth .btn--ghost { display: none; }
  /* No celular os botões ficam um pouco menores para caber lupa, mensagens e sino */
  .header-actions { gap: 2px; }
  .header-btn { width: 38px; height: 38px; }
  .menu-panel, .menu-panel--wide {
    position: fixed;
    left: 8px; right: 8px; top: calc(var(--header-height) + 4px);
    width: auto;
    max-height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 20px);
    overflow-y: auto;
  }
  .menu-panel { padding: 10px; border-radius: 18px; }
  .menu-item, .menu-panel form button { min-height: 46px; }
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .bottom-nav a {
    display: grid; justify-items: center; align-content: center; gap: 3px;
    color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600;
  }
  .bottom-nav a .icon { width: 22px; height: 22px; }
  .bottom-nav a[aria-current="page"] { color: var(--text); }
  .bottom-nav a[aria-current="page"] .icon { color: var(--accent-text); }
}

/* Link "ver todas" no rodapé do painel de notificações */
.menu-item--center { justify-content: center; margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; font-weight: 700; color: var(--accent-text); }
a.header-btn { text-decoration: none; position: relative; }

/* ------------------------------------------------------------------
   Gaveta lateral (menu do site): botão ☰ no cabeçalho, todas as áreas
   em seções. Vale para celular e computador.
   ------------------------------------------------------------------ */
html.side-open { overflow: hidden; }

.side-backdrop {
  position: fixed; inset: 0; z-index: 95;
  background: rgb(10 8 20 / .5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.side-backdrop.is-open { opacity: 1; pointer-events: auto; }

.side-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
  width: min(340px, 88vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--ui-shadow-lg);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s;
}
.side-drawer.is-open { transform: none; visibility: visible; }

.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: var(--header-height);
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.brand--small .brand-name { font-size: 1.4rem; }
.brand--small .brand-mark { width: 28px; height: 28px; }
.brand--small .brand-logo { height: 30px; max-width: 130px; }

.side-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px calc(24px + env(safe-area-inset-bottom, 0px));
}

.side-user {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin-bottom: 8px;
  border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--surface-2, var(--hover));
}
.side-user:hover { background: var(--hover); }
.side-user .header-avatar-wrap { width: 46px; height: 46px; }
.side-user .header-avatar { width: 46px; height: 46px; flex: none; }
.side-user .header-avatar-wrap:has(.header-avatar-frame) { width: 68px; height: 68px; }
.side-user .header-avatar-wrap:has(.header-avatar-frame) .header-avatar { width: 68%; height: 68%; }
.side-user-text { display: grid; min-width: 0; }
.side-user-text strong { font-size: .98rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-text small { font-size: .8rem; color: var(--muted); line-height: 1.4; }

.side-guest { padding: 10px; margin-bottom: 8px; border-radius: 14px; background: var(--hover); }
.side-guest p { font-size: .9rem; color: var(--text-soft); margin-bottom: 10px; }
.side-guest-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.side-section { padding: 9px 0 4px; }
.side-section + .side-section { border-top: 1px solid var(--border); margin-top: 8px; }
.side-label {
  padding: 8px 10px 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--accent-text);
}

.side-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--text-soft); font: inherit; font-size: .95rem; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer;
}
.side-link .icon { width: 20px; height: 20px; flex: none; color: var(--muted); }
.side-link:hover { background: var(--hover); color: var(--text); }
.side-link[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
.side-link[aria-current="page"] .icon { color: var(--accent-text); }

@media (max-width: 760px) {
  .side-drawer { width: min(360px, calc(100vw - 28px)); border-radius: 0 22px 22px 0; }
  .side-user { padding: 12px; margin-bottom: 10px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2, var(--hover))); }
  .side-link { min-height: 48px; border-radius: 13px; }
}

.side-foot {
  flex: none;
  padding: 8px 10px 14px;
  border-top: 1px solid var(--border);
  display: grid; gap: 2px;
}
.side-foot form { margin: 0; }
.side-link--button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .side-backdrop, .side-drawer { transition: none; }
}

/* Seletor de idioma no rodapé */
.lang-switch { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lang-switch .icon { width: 16px; height: 16px; color: var(--muted); margin-right: 4px; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--text-soft); text-decoration: none; }
.lang-switch a:hover { background: var(--hover); color: var(--text); }
.lang-switch a[aria-current="true"] { background: var(--accent-soft); color: var(--text); }

/* ==================================================================
   Modernização do chrome (restyle 2026) — nav em pílula, header com
   blur mais rico, painéis/gaveta com animação e nav inferior refinada.
   ================================================================== */

/* header: blur mais presente e sombra sutil ao rolar */
.site-header.is-solid, .site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px -22px rgba(0, 0, 0, .5);
}

/* nav principal: item ativo vira pílula (mais moderno que o pontinho) */
.main-nav a { transition: background .16s ease, color .16s ease; }
.main-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.main-nav a[aria-current="page"]::after { display: none; }

/* botões do cabeçalho com toque macio */
.header-btn { transition: background .16s ease, transform .12s ease; border-radius: 13px; }
.header-btn:active { transform: scale(.94); }

/* painel suspenso (conta/notificações): animação de entrada */
.menu-panel { transform-origin: top right; animation: menu-pop .18s cubic-bezier(.2,.8,.3,1); border-radius: 18px; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.menu-item, .menu-panel form button { transition: background .14s ease; }
.menu-theme button { transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.menu-theme button:hover { transform: translateY(-1px); border-color: var(--border-strong); }

/* notificações: ícone com cor de acento quando não lido */
.notif.is-unread { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.notif.is-unread .notif-icon { background: var(--accent-soft); color: var(--accent-text); }

/* gaveta lateral: backdrop com blur e entrada mais suave */
.side-backdrop { background: rgba(8, 7, 14, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.side-drawer { border-radius: 0 22px 22px 0; }
.side-link { transition: background .15s ease, color .15s ease, transform .12s ease; }
.side-link:hover { transform: translateX(2px); }
.side-label { color: var(--muted); }

/* barra inferior (mobile): indicador de pílula no item ativo */
@media (max-width: 760px) {
  .bottom-nav { background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); }
  .bottom-nav a { position: relative; padding-top: 6px; transition: color .15s ease; }
  .bottom-nav a .icon { transition: transform .16s ease; }
  .bottom-nav a[aria-current="page"] { color: var(--accent-text); }
  .bottom-nav a[aria-current="page"] .icon { color: var(--accent-text); transform: translateY(-1px) scale(1.06); }
  .bottom-nav a[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent);
  }
}

/* ==================================================================
   Gaveta lateral reorganizada — seções com respiro, item ativo com
   barra de acento e transições suaves.
   ================================================================== */
.side-section + .side-section { margin-top: 10px; padding-top: 10px; }
.side-label { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.side-label::after { content: ""; flex: 1; height: 1px; background: var(--border); opacity: .7; }
.side-link { position: relative; }
.side-link[aria-current="page"] { font-weight: 700; }
.side-link[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent);
}

/* Saldos no menu do usuário (pontos e moedas) */
.menu-head .menu-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.menu-balances a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
.menu-balances a:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.menu-balances .icon { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--accent-text, var(--accent)); }
.menu-balances b { font-size: 1.02rem; line-height: 1.1; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.menu-balances small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.side-user-text .side-balances { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.side-balances span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text-soft); }
.side-balances .icon { width: 13px; height: 13px; color: var(--accent-text, var(--accent)); }
.menu-head { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.menu-head .menu-head-orb { grid-row: 1 / 3; }
.menu-head .menu-balances { grid-column: 1 / -1; }
.menu-head strong, .menu-head > span:not(.menu-head-orb) { min-width: 0; }

/* ==================================================================
   Gaveta 2026: seções recolhíveis, ícones em ladrilho e cartão do usuário.
   ================================================================== */
.side-section { padding: 0; border: 0; }
.side-section + .side-section { border-top: 0; margin-top: 4px; padding-top: 0; }
.side-label { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 10px 8px; border-radius: 12px; user-select: none; }
.side-label::-webkit-details-marker { display: none; }
.side-label::after { display: none; }
.side-label-text { flex: 1; min-width: 0; font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--muted); }
.side-count { padding: 1px 8px; border-radius: 999px; background: var(--surface-3, var(--hover)); color: var(--muted); font-size: .7rem; font-weight: 800; }
.side-label > .icon { width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; }
.side-section[open] > .side-label > .icon { transform: rotate(180deg); }
.side-label:hover .side-label-text { color: var(--text); }
.side-section[open] > .side-links { animation: side-open .2s ease; }
@keyframes side-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.side-links { display: grid; gap: 2px; }
.side-link { gap: 12px; padding: 0 10px; }
.side-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--surface-3, var(--hover)); flex: none; transition: background .2s ease, transform .2s ease; }
.side-ico .icon { width: 18px; height: 18px; color: var(--text-soft); }
.side-link:hover .side-ico { transform: scale(1.06); }
.side-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.side-link[aria-current="page"] .side-ico { background: var(--accent); }
.side-link[aria-current="page"] .side-ico .icon { color: #fff; }
.side-link[aria-current="page"]::before { display: none; }
.side-foot .side-link .icon { width: 20px; height: 20px; flex: none; }
.side-user { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); }
.side-user::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .side-section[open] > .side-links { animation: none; } }

/* ------------------------------------------------------------------
   Lupa de busca rápida e animações dos ícones do cabeçalho
   ------------------------------------------------------------------ */
.menu-panel--search { width: 340px; padding: 12px; }
.hsearch { display: flex; gap: 8px; align-items: center; }
.hsearch-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2, var(--bg)); color: var(--muted); }
.hsearch-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.hsearch-field .icon { width: 18px; height: 18px; flex: none; }
.hsearch-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.menu-panel .hsearch .hsearch-go { flex: none; width: auto; height: 42px; min-height: 42px; padding: 0 16px; justify-content: center; border-radius: 12px; background: var(--accent); color: var(--ui-accent-contrast, var(--accent-ink, #fff)); font-weight: 700; text-align: center; }
.menu-panel .hsearch .hsearch-go:hover { background: var(--accent); filter: brightness(1.08); }
.hsearch-hint { margin: 8px 2px 0; font-size: .78rem; color: var(--muted); }

.header-btn .icon { transform-origin: 50% 50%; }
.header-btn[data-fx="bell"] .icon { transform-origin: 50% 8%; }

/* toque: cada ícone responde do seu jeito */
.header-btn.is-pop .icon { animation: hb-pop .42s cubic-bezier(.2, .9, .3, 1.3); }
.header-btn[data-fx="bell"].is-pop .icon { animation: hb-ring .7s ease-in-out; }
.header-btn[data-fx="chat"].is-pop .icon { animation: hb-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.header-btn[data-fx="search"].is-pop .icon { animation: hb-tilt .55s ease-in-out; }

/* novidade ainda não aberta: balança em ciclos (agita e descansa) até a pessoa abrir */
/* Balança 3 ciclos e para: animação infinita no topo fixo deixava a página trabalhando sem parar e a rolagem pesada */
.header-btn.is-ringing .icon { animation: hb-ring-loop 3.2s ease-in-out 3; }
.header-btn[data-fx="chat"].is-ringing .icon { animation: hb-hop-loop 3.2s ease-in-out 3; }
.header-btn.is-ringing .header-count { animation: hb-badge 1.6s ease-in-out 6; }

@keyframes hb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes hb-ring {
  0%, 100% { transform: rotate(0); } 12% { transform: rotate(18deg); } 28% { transform: rotate(-16deg); }
  44% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 76% { transform: rotate(4deg); }
}
@keyframes hb-hop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.12); } 70% { transform: translateY(1px) scale(.96); } 100% { transform: none; } }
@keyframes hb-tilt { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-18deg) scale(1.15); } 60% { transform: rotate(10deg) scale(1.1); } 100% { transform: none; } }
@keyframes hb-ring-loop {
  0%, 42%, 100% { transform: rotate(0); }
  4% { transform: rotate(18deg); } 10% { transform: rotate(-16deg); } 16% { transform: rotate(13deg); }
  22% { transform: rotate(-10deg); } 28% { transform: rotate(6deg); } 34% { transform: rotate(-3deg); }
}
@keyframes hb-hop-loop {
  0%, 40%, 100% { transform: none; } 8% { transform: translateY(-5px) rotate(-6deg); } 16% { transform: translateY(0) rotate(5deg); }
  24% { transform: translateY(-3px) rotate(-4deg); } 32% { transform: none; }
}
@keyframes hb-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

@media (prefers-reduced-motion: reduce) {
  .header-btn.is-pop .icon, .header-btn.is-ringing .icon, .header-btn.is-ringing .header-count { animation: none; }
  .header-btn.is-ringing .header-count { box-shadow: 0 0 0 3px var(--accent-soft); }
}
@media (max-width: 760px) {
  .menu-panel--search { padding: 12px; }
}

/* Busca instantânea no topo (alpha.105) */
.hsearch-live { margin-top: 10px; max-height: min(60vh, 460px); overflow: auto; overscroll-behavior: contain; display: grid; gap: 2px; }
.hsearch-live[hidden] { display: none; }
.hsearch-live[aria-busy="true"] { opacity: .7; }
.hsearch-live-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.hsearch-clear { border: 0; background: none; color: var(--accent-text, var(--accent)); font: inherit; font-weight: 700; cursor: pointer; }
.hsearch-item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.hsearch-item:hover, .hsearch-item[aria-selected="true"], .hsearch-all[aria-selected="true"] { background: var(--hover); }
.hsearch-thumb { flex: none; display: grid; place-items: center; width: 38px; height: 54px; overflow: hidden; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.hsearch-thumb.is-round { width: 44px; height: 44px; border-radius: 50%; }
.hsearch-item--recent .hsearch-thumb, .hsearch-item--genre .hsearch-thumb, .hsearch-item--hint .hsearch-thumb { width: 34px; height: 34px; border-radius: 10px; }
.hsearch-item--hint .hsearch-thumb { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.hsearch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hsearch-thumb .icon { width: 18px; height: 18px; }
.hsearch-text { display: grid; gap: 2px; min-width: 0; }
.hsearch-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsearch-sub { color: var(--muted); font-size: .8rem; }
.hsearch-empty { margin: 0; padding: 10px 8px; color: var(--muted); font-size: .9rem; }
.hsearch-all { display: block; margin-top: 4px; padding: 10px 8px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; color: var(--accent-text, var(--accent)); font-weight: 700; font-size: .88rem; text-decoration: none; }
.hsearch-live:not([hidden]) ~ .hsearch-hint, .menu-panel--search:has(.hsearch-live:not([hidden])) .hsearch-hint { display: none; }
@media (prefers-reduced-motion: no-preference) { .hsearch-item { animation: ds-open .2s var(--ease-out, ease) both; } }

/* Item "Ver todas as opções" no menu do avatar (alpha.115 revisada) */
.menu-item--all { font-weight: 700; }
.menu-item--all > .icon:first-child { color: var(--accent); }
.menu-item--all .menu-item-go { margin-left: auto; width: 16px; height: 16px; }

/* Rodapé: links úteis e aparência (saíram do menu do avatar) */
.footer-title { margin: 0 0 8px; font-size: var(--fs-xs, .75rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.footer-useful ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-useful a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft, var(--text)); text-decoration: none; }
.footer-useful a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.footer-useful .icon { width: 16px; height: 16px; color: var(--muted); }
.footer-appearance { flex-basis: 100%; }

/* ==================================================================
   Visual novo (alpha.115 revisão 6): gaveta lateral do site e menu
   do usuário. Só aparência. Os itens, a ordem e os textos continuam
   os mesmos; o que muda é o acabamento, o espaço e os sinais do item
   ativo e do hover.
   ================================================================== */

/* ------------------ menu do usuário (header dropdown) ------------------ */
.menu-panel {
  padding: 10px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--text) 9%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface)) 0, var(--surface) 80px);
  box-shadow:
    0 24px 44px -24px color-mix(in srgb, var(--accent) 30%, rgba(0, 0, 0, .5)),
    0 10px 20px -12px rgba(0, 0, 0, .25),
    inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
}
.menu-head {
  padding: 10px 10px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, var(--border));
}
.menu-head strong { font-size: 1.02rem; letter-spacing: -.005em; }
.menu-head span { font-size: .82rem; }
.menu-item, .menu-panel form button {
  min-height: 42px;
  padding: 0 10px;
  border-radius: 11px;
  gap: 10px;
  transition: background .14s ease, color .14s ease, transform .1s ease;
}
.menu-item:hover, .menu-panel form button:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--hover));
  color: var(--text);
}
.menu-item:active, .menu-panel form button:active { transform: translateX(2px); }
.menu-item .icon, .menu-panel form button .icon {
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
  transition: color .14s ease;
}
.menu-item:hover .icon { color: var(--accent-text); }
.menu-sep { margin: 6px 2px; background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ------------------ gaveta lateral (side drawer) ------------------ */
.side-drawer {
  border-right: 1px solid color-mix(in srgb, var(--text) 8%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)) 0, var(--surface) 220px);
  box-shadow: 24px 0 48px -24px rgba(0, 0, 0, .35);
}
.side-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, var(--border));
}
.side-scroll { padding: 12px 10px 48px; }

.side-user {
  padding: 12px;
  margin: 2px 2px 10px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2, var(--hover))), color-mix(in srgb, var(--accent) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
}
.side-user:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--surface-2, var(--hover))), color-mix(in srgb, var(--accent) 8%, var(--surface)));
}
.side-user-text strong { font-size: 1.02rem; letter-spacing: -.005em; }
.side-user-text small { font-size: .82rem; color: var(--text-soft); }

.side-guest {
  padding: 14px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2, var(--hover))), color-mix(in srgb, var(--accent) 6%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.side-section {
  padding: 10px 4px 4px;
}
.side-section + .side-section {
  margin-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--text) 10%, var(--border));
}
.side-label {
  padding: 6px 12px 4px;
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.side-link {
  position: relative;
  min-height: 44px;
  padding: 0 12px 0 14px;
  border-radius: 13px;
  gap: 12px;
  font-weight: 600;
  color: var(--text-soft);
  transition: background .14s ease, color .14s ease, padding .1s ease;
}
.side-link::before {
  content: "";
  position: absolute; left: 4px; top: 50%;
  transform: translateY(-50%) scaleY(.1);
  width: 3px; height: 20px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transition: transform .18s ease, opacity .14s ease;
}
.side-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--hover));
  color: var(--text);
  padding-left: 18px;
}
.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2, var(--hover)));
  color: var(--text);
  font-weight: 700;
}
.side-link[aria-current="page"]::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
.side-link[aria-current="page"] .icon { color: var(--accent-text); }
.side-link .icon {
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
  transition: color .14s ease;
}

/* celular: cantos arredondados mais fortes e peso maior nas linhas */
@media (max-width: 760px) {
  .side-drawer { border-radius: 0 24px 24px 0; }
  .side-link { min-height: 50px; border-radius: 14px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .side-link, .side-link::before, .menu-item, .side-user { transition: none; }
}

/* selo "Novo" ao lado de Novidades no rodapé */
.footer-badge {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--success, var(--accent));
  color: #fff;
  font-weight: 800; font-size: .66rem; letter-spacing: .02em;
  text-transform: uppercase;
}

/* ==================================================================
   alpha.115 revisão 11: menu lateral com acabamento extra.
   Cabeçalho do usuário com gradiente mais firme, chip "Nível" com
   brilho na cor da marca, item ativo com cartão "pastilha" ao fundo,
   seções com título em maiúsculas discretas e ícones em alvéolo.
   ================================================================== */
.side-drawer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 60%, var(--surface)));
}
.side-drawer .side-user {
  background:
    radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)) 0, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
  padding: 18px 16px 14px;
}
.side-drawer .side-user-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.side-drawer .side-user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; margin-top: 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-text); font-weight: 800; font-size: .76rem; letter-spacing: .04em;
  box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--accent) 60%, transparent);
}

.side-drawer .side-section-title {
  margin: 14px 14px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: color-mix(in srgb, var(--muted) 90%, var(--text));
}

.side-drawer .side-link { position: relative; padding: 10px 14px; border-radius: 12px; margin: 1px 10px; display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; transition: background .15s ease, color .15s ease; }
.side-drawer .side-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.side-drawer .side-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: 700; }
.side-drawer .side-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.side-drawer .side-link .icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  padding: 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  box-sizing: content-box;
}

/* Menu do avatar (dropdown): rolagem interna leve quando a lista é grande. */
.menu.panel { max-height: min(70vh, 540px); overflow-y: auto; scrollbar-width: thin; }