/* Pedido do usuário: SEM painel/degradê por trás -- a barra lateral vira
   só um espaço transparente onde os cards (perfil + Meu Clube/Elenco/Base)
   flutuam isolados direto sobre o fundo da página, exatamente como os
   cards do lado direito (.home-hub-cards) já funcionam -- por isso nem
   background nem borda nem a fita de acento de cima sobraram aqui. A logo
   "FUTMGR" que ficava no topo também saiu (pedido do usuário) -- o card de
   perfil agora é o primeiro elemento, bem no topo. */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  gap: 14px;
  position: relative;
}

.club-tag {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.club-tag::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(20,92,82,0.10), transparent 60%);
  pointer-events: none;
}
.club-crest {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  border: 2px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
}
.club-tag-name { font-size: 12px; color: var(--text-1); line-height: 1.45; position: relative; z-index: 1; }
.club-tag-name b { color: var(--text-0); display: block; font-size: 13.5px; font-family: var(--font-display); letter-spacing: 0.01em; }

/* Card único de perfil (dados do clube + XP) -- pedido do usuário: os dois
   cards separados que tinha antes (dirigente e XP) viraram UM card só,
   maior que os outros, sempre no topo da barra lateral. Fundo liso, sem
   degradê (mesmo pedido de antes), isolado igual aos outros cards agora
   que a .sidebar não tem mais painel por trás (ver acima). */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.profile-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
/* Bloco de XP dentro do card único -- a linha/divisória com tom dourado
   mantém a "assinatura" que o card de XP separado tinha antes. */
.profile-card-xp {
  padding-top: 12px;
  border-top: 1px solid rgba(227,167,58,0.3);
}
.manager-photo {
  width: 46px; height: 46px; border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line-bright);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  background: var(--bg-3);
}
.manager-photo-placeholder, .manager-photo-img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.manager-info { font-size: 12px; color: var(--text-1); line-height: 1.4; min-width: 0; }
.manager-info b { color: var(--text-0); display: block; font-size: 13.5px; font-family: var(--font-display); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xp-badge-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 4px;
}
.xp-badge-level { color: var(--text-0); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-badge-count { color: var(--text-2); font-size: 10.5px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-badge-track {
  height: 6px;
  background: var(--bg-4);
  border-radius: 99px;
  overflow: hidden;
}
.xp-badge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 99px;
}

/* Coluna dos cards de navegação abaixo do card de perfil/XP (ver
   .sidebar-nav-card logo abaixo) -- gap próprio (maior que o gap:3px da
   .sidebar como um todo), pra ficar espaçado como os outros cards do app. */
.sidebar-nav-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cards de navegação da barra lateral (Meu Clube/Elenco/Base, ver
   ui-shell.js::renderLayout) -- pedido do usuário: virar "card" (fundo +
   borda, igual ao resto do app) em vez da lista simples de itens que era
   antes (.nav-item). Mesma linguagem visual dos cards de baixo
   (.quick-menu-card/.home-hub-card), só que em linha (ícone + rótulo lado
   a lado) pra caber na largura estreita da barra lateral. */
.sidebar-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
  cursor: pointer;
}
.sidebar-nav-card:hover { border-color: var(--line-bright); color: var(--text-0); transform: translateX(2px); }
.sidebar-nav-card.active {
  border-color: var(--pitch);
  color: var(--pitch);
  background: linear-gradient(90deg, rgba(20,92,82,0.14), var(--bg-2));
}
.sidebar-nav-card .ic {
  width: 18px; text-align: center; font-size: 15px; flex-shrink: 0;
}

.nav-spacer { flex: 1; }

.nav-foot {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .sidebar { align-items: center; padding: 18px 8px; }
  .club-tag-name, .manager-info, .xp-badge-level, .xp-badge-count, .sidebar-nav-card span.label { display: none; }
  .club-tag, .profile-card-top { justify-content: center; }
  .profile-card { padding: 8px; }
  .xp-badge-top { justify-content: center; }
  .sidebar-nav-card { justify-content: center; }
}

/* Paisagem no celular (ver explicação completa em style.css) -- a barra
   lateral, do jeito que já colapsa no max-width:900px acima, ainda usa
   padding/gap pensados pra vertical; aqui encolhe mais um passo pra sobrar
   altura útil de verdade nessa orientação. A barra de acesso rápido escura
   (.quick-menu-bar) é escondida aqui do mesmo jeito que já é no
   max-width:900px -- em paisagem a largura em CSS px costuma passar de
   900px mesmo em celular (a regra de largura não pega sozinha), então sem
   isso ela reaparecia duplicando os cards fm-quick-card, que já cobrem os
   mesmos atalhos com um visual melhor (ver dashboard.css). */
@media (orientation: landscape) and (max-height: 500px) {
  .sidebar { padding: 8px 4px; gap: 8px; }
  .club-tag { padding: 8px; margin-bottom: 8px; }
  .profile-card { padding: 6px; gap: 6px; }
  .profile-card-xp { padding-top: 6px; }
  .sidebar-nav-card { padding: 8px; }
  .quick-menu-bar { display: none !important; }
}

/* ===== BARRA DE ACESSO RÁPIDO (cards -- ex-itens da lateral: Tarefas de
   Dirigente, Transferências, Escalação, Instalações, Calendário, Email,
   Configurações, Sair) -- ver DB.quickMenuCards / UI.renderQuickMenuBar().
   Fica grudada (position:sticky) no topo da área de conteúdo em toda tela
   do jogo, igual a barra lateral sempre foi; a margem negativa cancela o
   padding do .main-view pra ela ficar coladinha nas bordas ao rolar. ===== */
/* Pedido do usuário: sem degradê nenhum atrás da barra de acesso rápido
   (os cards de cima -- Tarefas de Dirigente, Transferências etc.) --
   totalmente transparente, mesmo sendo sticky (fica por cima do conteúdo
   ao rolar, mas sem nenhum painel/fundo escurecendo o que passa por trás). */
.quick-menu-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin: -28px -34px 22px;
  padding: 22px 34px 14px;
}
.quick-menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 72px;
  padding: 10px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s, background 0.15s;
}
.quick-menu-card:hover { border-color: var(--line-bright); color: var(--text-0); transform: translateY(-2px); }
.quick-menu-card.active {
  border-color: var(--pitch);
  color: var(--pitch);
  background: linear-gradient(180deg, rgba(20,92,82,0.14), var(--bg-2));
}
.quick-menu-card-ic { font-size: 17px; line-height: 1; }
.quick-menu-card-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
}
.quick-menu-badge {
  position: absolute; top: 6px; right: 8px;
  padding: 1px 6px; font-size: 10px;
}

@media (max-width: 1150px) {
  .quick-menu-bar { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  /* Oculta o menu horizontal no mobile — substituído pelos fm-quick-card */
  .quick-menu-bar { display: none !important; }

  /* Oculta a sidebar lateral no mobile */
  .sidebar { display: none !important; }

  /* Layout de coluna única sem sidebar */
  .layout { grid-template-columns: 1fr !important; }
}

/* ===== ÁREA "VAZIA" POR TRÁS DAS JANELAS MODAIS =====
   Fundo padrão da área principal quando nenhuma tela de menu está aberta --
   ver UI.renderBlankHome()/DB.quickMenuViewIds. Pedido do usuário: SÓ o
   escudo do clube -- sem nome nem texto nenhum embaixo -- bem grande (3x o
   tamanho original) e centralizado de verdade (agora que é o ÚNICO item
   dentro de .home-blank, o flex centraliza ELE, não mais um grupo de três
   elementos empilhados) -- mais a coluna de cards de atalho no canto
   direito (ver .home-hub-cards abaixo) -- o resto do jogo continua abrindo
   em janela modal. */
.home-blank-wrap {
  position: relative;
  min-height: 58vh;
}
.home-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  text-align: center;
  opacity: 0.85;
  /* A coluna de cards (.home-hub-cards, 186px) fica flutuando por cima do
     canto superior direito -- sem esse respiro o escudo centralizava na
     largura INTEIRA da área principal e ficava puxado visualmente pra baixo
     dos cards, parecendo fora de centro pro usuário. Reserva o mesmo espaço
     da coluna do lado direito pra centralizar o escudo só no espaço "livre"
     de verdade (pedido do usuário: "escudo fora do centro, precisa ir mais
     pra esquerda"). */
  padding-right: 186px;
}
@media (max-width: 1150px) {
  /* Nessa largura .home-hub-cards vira position:static (empilha embaixo, ver
     abaixo), então não faz mais sentido reservar espaço à direita. */
  .home-blank { padding-right: 0; }
}
/* 3x o tamanho original (96px -> 288px / 22px -> 66px), pedido do usuário. */
.home-blank-crest .nm-crest-lg {
  width: 288px; height: 288px; font-size: 66px;
  border-width: 5px;
}

/* Coluna de cards de atalho no canto superior direito da tela inicial (ver
   DB.homeHubCards / UI.renderHomeHubCards()) -- mesmo visual dos cards da
   barra de acesso rápido (.quick-menu-card), só que empilhados na vertical.
   "Minha Liga" sai como <div class="inert"> (sem onclick, pedido do
   usuário -- ainda não abre nada), então tem seu próprio estado visual
   "desligado" abaixo. */
.home-hub-cards {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 186px;
}
.home-hub-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-1);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s, background 0.15s;
}
.home-hub-card:hover { border-color: var(--line-bright); color: var(--text-0); transform: translateX(-2px); }
.home-hub-card.inert {
  cursor: default;
  opacity: 0.55;
}
.home-hub-card.inert:hover { border-color: var(--line); color: var(--text-1); transform: none; }
.home-hub-card-ic { font-size: 19px; line-height: 1; flex-shrink: 0; }
.home-hub-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

@media (max-width: 1150px) {
  .home-hub-cards { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 22px; }
  .home-hub-card { width: auto; flex: 1 1 160px; }
}

/* ===== JANELA MODAL DAS TELAS DE MENU RÁPIDO ===== */
.quick-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,10,12,0.74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 600;
  animation: quickModalFadeIn 0.15s ease-out;
}
.quick-modal-box {
  position: fixed;
  /* Janela CENTRALIZADA com borda (revertido em 26/07/2026): a versão
     anterior tinha virado tela cheia grudada na borda real do navegador
     (inset:0, width:100vw, height:100dvh) achando que era isso que o
     usuário queria -- era o oposto. O usuário quer a janela com borda
     visível, centralizada na tela, com o backdrop escurecido aparecendo
     ao redor -- e a barra de rolagem (overflow-y:auto abaixo) e o botão
     fechar (.quick-modal-close, "X" no canto superior direito, ver mais
     abaixo) DENTRO dessa borda, não colados na borda real da janela do
     navegador. Isso vale pra TODAS as telas de menu rápido (Treinador,
     Comissão Técnica, Meu Clube, Minha Carteira, Caixa do Clube etc.),
     já que todas usam esta mesma classe. Mais larga que
     .quick-modal-box--narrow (que é só o cartão do "próximo jogo") pra
     caber tabelas/formulários maiores. No mobile continua tela cheia (ver
     media query no fim deste bloco), onde não há espaço de sobra pra
     centralizar. */
  inset: auto;
  /* +22px (metade dos 44px do .ticker-bar, sempre fixo no topo por cima de
     tudo -- ver assets/css/ticker.css) pra compensar: sem isso, a janela
     centraliza na altura TOTAL da tela, mas o ticker come um pedaço fixo
     do topo que nunca é "espaço livre" de verdade -- resultado, a janela
     parecia grudada perto do topo (reportado pelo usuário). Com o
     deslocamento, ela centraliza no espaço que sobra abaixo do ticker. */
  top: calc(50% + 22px); left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 94vw);
  height: auto;
  max-height: calc(90vh - 44px);
  /* overflow:hidden (não mais overflow-y:auto direto aqui) -- com
     border-radius, o scroll ficava NA PRÓPRIA CAIXA, e a barra de rolagem
     do navegador não respeitava o canto arredondado, vazando reta pra fora
     da borda (reportado pelo usuário). Quem rola agora é o
     .quick-modal-content por dentro (ver regra dele mais abaixo,
     display:flex nesta caixa faz ele ocupar o espaço restante); a caixa só
     recorta (overflow:hidden) qualquer coisa -- inclusive a barra de
     rolagem do conteúdo -- que passe do canto arredondado. Padding foi
     daqui pro .quick-modal-content, senão a área de rolagem incluiria o
     padding e a barra ficaria colada nas bordas de fora mesmo assim. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* --bg-1 é translúcido de propósito (deixa a foto do fundo aparecer atrás
     dos painéis normais da tela) -- mas "atrás" da janela modal é a tela
     CONGELADA por baixo (não uma foto estática), então precisa de um fundo
     100% opaco aqui, senão os cards de dentro (que têm backdrop-filter)
     mostram a tela de baixo através da janela -- mesmo motivo/ajuste já
     usado na gaveta de Táticas (ver .lineup-tactics-drawer em club.css). */
  /* Fundo OPACO claro (casca). Antes escuro (#101a1e); trocado 25/07/2026
     a pedido do proprietário — menus com o mesmo fundo claro das abas. */
  background: var(--white, #FFFDF8);
  background-color: var(--white, #FFFDF8);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  z-index: 601;
  animation: quickModalFadeIn 0.15s ease-out;
}
/* Miolo que realmente rola agora (a caixa em si virou overflow:hidden, ver
   comentário lá em cima). flex:1 1 auto faz ocupar o espaço restante da
   caixa (que é display:flex/flex-direction:column); min-height:0 é
   necessário pro overflow-y:auto funcionar dentro de flex -- sem isso o
   item flex nunca encolhe e o scroll não aparece. Escopado só pra caixa
   larga (não --narrow nem --phone, que têm seu próprio padding/lógica
   abaixo). */
.quick-modal-box:not(.quick-modal-box--narrow):not(.quick-modal-box--phone) > .quick-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 54px 32px 36px;
}
/* Variante estreita, usada só pelo card do próximo jogo (dashboard) -- ver
   UI.renderLayout() em ui-shell.js. As outras telas de menu rápido têm
   tabelas/formulários inteiros e usam a janela centralizada mais larga
   acima (.quick-modal-box); essa é só um cartão, então fica menor mas
   também centralizada com borda no desktop (reobtém posição/tamanho/visual
   próprios por cima do padrão acima). No mobile ainda vira tela cheia como
   sempre foi, ver media query no fim deste arquivo. */
.quick-modal-box--narrow {
  inset: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 92vw);
  height: auto;
  max-height: 92vh;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  padding: 50px 26px 30px;
}
.quick-modal-box--narrow > .quick-modal-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.quick-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-1);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.quick-modal-close:hover { color: var(--text-0); border-color: var(--line-bright); }
/* Cards normais (.card, .fixture-row, etc.) usam fundo translúcido +
   backdrop-filter:blur pra deixar a FOTO estática do fundo da página
   aparecer atrás (ver --bg-1/--bg-2 em style.css) -- efeito "vidro fosco"
   que funciona bem contra uma foto parada. Dentro da janela modal, "atrás"
   não é mais uma foto parada, é a TELA CONGELADA por baixo -- e
   backdrop-filter, por bug/particularidade de composição do Chromium com
   elementos position:fixed empilhados, pode "enxergar" através até da
   camada opaca da própria .quick-modal-box, mostrando a tela de baixo
   through os cards (foi exatamente isso que apareceu testando: os números
   do Dashboard vazando por trás da tabela de Transferências). Desligando
   backdrop-filter aqui dentro, o fundo translúcido de cada card volta a
   misturar normalmente só com o fundo opaco da própria janela modal. */
.quick-modal-content, .quick-modal-content * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Só fade de opacidade, sem escala/translação -- a versão anterior
   (translate + scale "pop") fazia a janela parecer "disparar"/fugir da tela
   toda vez que abria (reportado pelo usuário, acontecia em qualquer menu).
   Uma janela SEMPRE centralizada (transform:translate(-50%,-50%) fixo em
   .quick-modal-box, nunca mexido pela animação) que só some/aparece de
   opacidade é bem mais calma e "profissional" que ficar entrando com
   movimento. */
@keyframes quickModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) {
  .quick-modal-box,
  .quick-modal-box--narrow { inset: 0; top: 0; left: 0; transform: none; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
}

/* ===== CAIXA DE CONFIRMAÇÃO (ex.: promover jovem da Base, ver
   UI.renderYouthPromoteConfirm() em ui-club.js) =====
   Diálogo pequeno e centralizado pedindo confirmação antes de uma
   transação em Golden, mostrando o valor a pagar -- pedido do usuário.
   z-index MAIOR que o da janela modal normal (.quick-modal-box, 600) de
   propósito: este diálogo é aberto DE DENTRO de uma tela que já é uma
   janela modal (ex.: Base), então precisa flutuar por cima dela. */
.confirm-dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,10,12,0.74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 700;
  animation: quickModalFadeIn 0.15s ease-out;
}
.confirm-dialog-box {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, 92vw);
  /* Fundo OPACO claro (casca). Antes escuro (#101a1e); trocado 25/07/2026
     a pedido do proprietário — menus com o mesmo fundo claro das abas. */
  background: var(--white, #FFFDF8);
  background-color: var(--white, #FFFDF8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 24px;
  z-index: 701;
  text-align: center;
  animation: quickModalFadeIn 0.15s ease-out;
}
.confirm-dialog-title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-0);
  margin-bottom: 10px;
}
.confirm-dialog-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.5;
  margin-bottom: 16px;
}
.confirm-dialog-cost { display: flex; justify-content: center; }
.confirm-dialog-warn {
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 10px;
}
.confirm-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.confirm-dialog-actions .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ===== MENUS ESTILO "CARD PROFISSIONAL" NO CELULAR =====
   Pedido do usuário: os cards de navegação (barra de atalhos do topo,
   "Minha Liga/Copa Nacional/..." embaixo, itens da barra lateral) ficam
   "apagados" no celular -- o fundo "vidro fosco" (var(--bg-2), ~52% opaco +
   blur) foi pensado pra desktop, onde a foto de fundo ocupa menos espaço
   da tela. No celular a foto domina a tela inteira e o efeito de vidro
   vira quase invisível. Referência trazida pelo usuário: jogo de futebol
   mobile com cards SÓLIDOS, ícone em selo bem demarcado e texto em negrito
   -- aplicado aqui com a paleta do próprio FutManagerBR (verde/dourado/
   preto), só no celular (max-width:900px); desktop continua com o "vidro
   fosco" original. */
@media (max-width: 900px) {
  .quick-menu-card,
  .home-hub-card,
  .sidebar-nav-card {
    background: linear-gradient(160deg, var(--bg-4) 0%, var(--bg-1) 100%);
    border: 1px solid var(--line-bright);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .profile-card, .club-tag {
    background: rgba(6, 12, 14, 0.86);
    border-color: var(--line-bright);
  }

  /* Barra de atalhos do topo (Tarefas/Transferências/Escalação/...) --
     ícone vira um "selo" circular com leve realce verde, label em negrito
     bem legível. */
  .quick-menu-card { color: var(--text-1); gap: 8px; }
  .quick-menu-card-ic {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(20,92,82,0.16);
    font-size: 16px;
  }
  .quick-menu-card-label { color: var(--text-0); font-weight: 700; }
  .quick-menu-card:hover {
    background: linear-gradient(160deg, var(--bg-4) 0%, var(--bg-2) 100%);
    transform: translateY(-1px);
  }
  .quick-menu-card.active {
    border-color: var(--pitch);
    box-shadow: 0 0 0 2px rgba(20,92,82,0.30), 0 6px 16px rgba(0,0,0,0.5);
    background: linear-gradient(160deg, rgba(20,92,82,0.22), var(--bg-1) 70%);
  }
  .quick-menu-card.active .quick-menu-card-ic { background: rgba(20,92,82,0.32); }

  /* Rodapé "Minha Liga / Copa Nacional / Copa Internacional / Amistoso" --
     mesma linguagem, ícone em selo dourado (combina com o tom de "prêmio/
     competição" dessa fileira). */
  .home-hub-card { color: var(--text-0); padding: 12px 14px; }
  .home-hub-card-ic {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(227,167,58,0.16);
    font-size: 18px;
  }
  .home-hub-card-label { font-weight: 700; }
  .home-hub-card:hover {
    background: linear-gradient(160deg, var(--bg-4) 0%, var(--bg-2) 100%);
    transform: none;
  }
  .home-hub-card.inert { opacity: 0.5; }

  /* Lateral (Meu Clube / Elenco / Base). */
  .sidebar-nav-card { color: var(--text-1); }
  .sidebar-nav-card .ic {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(20,92,82,0.14);
    font-size: 15px;
  }
  .sidebar-nav-card.active {
    color: var(--pitch);
    border-color: var(--pitch);
    background: linear-gradient(160deg, rgba(20,92,82,0.22), var(--bg-1) 70%);
  }
  .sidebar-nav-card.active .ic { background: rgba(20,92,82,0.32); }
}