/* ============================================================
   Binaryzando — SHELL (sidebar + topbar do dashboard game)
   Fase 1 do redesign (PLANO_REDESIGN_SITE.md).
   Injetado por js/shell.js em toda página com body.com-shell.
   Reusa os tokens de global.css (--neon-*, --font-*, --sidebar-width...).
   Assinatura visual: MOLDURAS MAGENTA (HUD chanfrado) + DADOS CIANO.
   ============================================================ */

/* ---------- Offsets do conteúdo (só em páginas com shell) ----------
   O global.css/components.css já dá body{padding-left:260} no desktop;
   aqui só somamos o espaço da topbar. Em body.com-shell garantimos os
   dois valores de forma explícita pra não depender da ordem de carga. */
body.com-shell {
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
}

/* ============================================================
   SIDEBAR — painel HUD flutuante com moldura magenta chanfrada
   (assinatura dos mockups "ideias site")
   ============================================================ */
:root {
  /* formas HUD reutilizadas pela casca */
  --clip-flecha: polygon(0 7px, 7px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 7px 100%, 0 calc(100% - 7px));
  --clip-octo-sm: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --clip-frame: polygon(22px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 10px 100%, 0 calc(100% - 10px), 0 22px);
  --clip-frame-nav: polygon(16px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 8px 100%, 0 calc(100% - 8px), 0 16px);
  /* paleta da sidebar: vermelho neon + azul neon (paleta oficial de 25 cores) */
  --side-red: #F71231;
  --side-teal: #198ADF;
}

.shell-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #010109, #010001);
}
/* moldura: ::before é a chapa (borda), ::after o fundo por cima.
   Borda MULTICOLOR e "imperfeita" como no mockup: começa verde-água/ciano
   em cima, passa por azul e termina vermelha embaixo; os .shell-deco
   espalham tiques coloridos pelas laterais pra quebrar a perfeição */
.shell-sidebar::before {
  content: "";
  position: absolute; inset: 6px;
  background: linear-gradient(180deg,
    var(--side-teal) 0%, rgba(25,138,223,.55) 9%, rgba(28,72,213,.38) 30%,
    rgba(247,18,49,.42) 52%, rgba(129,4,213,.32) 74%, rgba(247,18,49,.85) 100%);
  clip-path: var(--clip-frame);
  filter: drop-shadow(0 0 12px rgba(247,18,49,.28));
  pointer-events: none;
}
/* Tiques coloridos das bordas do menu lateral REMOVIDOS (Diego 2026-07-09:
   tirar os retângulozinhos vermelho/azul das barras). Antes: .shell-deco-l/-r
   eram 2 retângulos 3×24px que via box-shadow projetavam mais tiques
   deslocados pelas laterais. O markup <i class="shell-deco"> continua no
   shell.js, mas sem CSS não renderiza nada. */
.shell-sidebar::after {
  content: "";
  position: absolute; inset: 7px;
  /* fundo QUASE PRETO (mockup 1) + trilhas de circuito tênues no corpo e um
     arranjo de circuito mais visível "subindo" do rodapé, como na arte */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='190'%3E%3Cg fill='none' stroke='%23F71231' stroke-opacity='.4' stroke-width='1'%3E%3Cpath d='M20 190 V130 H70 V160'/%3E%3Cpath d='M112 190 V140 H176 V168'/%3E%3Cpath d='M208 190 V118 H160 V150'/%3E%3C/g%3E%3Cg fill='none' stroke='%23198ADF' stroke-opacity='.3' stroke-width='1'%3E%3Cpath d='M44 190 V152 H98 V178'/%3E%3Cpath d='M196 190 V156 H146'/%3E%3C/g%3E%3Cg fill='none' stroke='%23198ADF' stroke-opacity='.3' stroke-width='1'%3E%3Cpath d='M84 190 V166 H128'/%3E%3Cpath d='M224 190 V140'/%3E%3C/g%3E%3Cg fill='%23F71231' fill-opacity='.6'%3E%3Ccircle cx='70' cy='160' r='2'/%3E%3Ccircle cx='176' cy='168' r='2'/%3E%3Ccircle cx='160' cy='150' r='2'/%3E%3C/g%3E%3Cg fill='%23198ADF' fill-opacity='.5'%3E%3Ccircle cx='98' cy='178' r='2'/%3E%3Ccircle cx='146' cy='156' r='2'/%3E%3C/g%3E%3Cg fill='%23198ADF' fill-opacity='.5'%3E%3Ccircle cx='128' cy='166' r='2'/%3E%3Ccircle cx='224' cy='140' r='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center / 100% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23F71231' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M12 24 H64 V78 H118'/%3E%3Cpath d='M24 146 V98 H76 V122'/%3E%3Cpath d='M0 60 H30 V104'/%3E%3C/g%3E%3Cg fill='none' stroke='%23198ADF' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M138 8 V54 H94 V112 H132'/%3E%3C/g%3E%3Cg fill='none' stroke='%23198ADF' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M52 0 V34 H92'/%3E%3C/g%3E%3Cg fill='%23F71231' fill-opacity='.13'%3E%3Ccircle cx='12' cy='24' r='1.5'/%3E%3Ccircle cx='118' cy='78' r='1.5'/%3E%3Ccircle cx='76' cy='122' r='1.5'/%3E%3Ccircle cx='30' cy='104' r='1.5'/%3E%3C/g%3E%3Cg fill='%23198ADF' fill-opacity='.11'%3E%3Ccircle cx='138' cy='8' r='1.5'/%3E%3Ccircle cx='132' cy='112' r='1.5'/%3E%3C/g%3E%3Cg fill='%23198ADF' fill-opacity='.11'%3E%3Ccircle cx='92' cy='34' r='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 120% 55% at 50% 0%, rgba(25,138,223,.04), transparent 60%),
    radial-gradient(ellipse 120% 45% at 50% 100%, rgba(247,18,49,.05), transparent 60%),
    linear-gradient(180deg, rgba(1,1,9,.99), rgba(1,1,1,1));
  clip-path: var(--clip-frame);
  pointer-events: none;
}
.shell-sidebar > * { position: relative; z-index: 1; }

/* Marca no topo — "TELA" holográfica estilo aparelho de game: a logo
   animada (letreiro neon piscando, arte do Diego) dentro de uma moldura
   chanfrada ciano/vermelha com scanlines e varredura de luz por cima */
.shell-brand {
  display: block;
  position: relative;
  margin: 2px 2px 14px;
  padding: 0 0 12px;
  flex-shrink: 0;
}
.shell-brand::after {
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(25,138,223,.6), rgba(25,138,223,.25) 45%, rgba(247,18,49,.7));
  box-shadow: 0 0 8px rgba(25,138,223,.3);
}
.shell-brand-screen {
  display: block;
  position: relative;
  padding: 2px;
  background: linear-gradient(120deg, rgba(25,138,223,.85), rgba(28,72,213,.3) 45%, rgba(247,18,49,.75));
  clip-path: var(--clip-octo-sm);
  filter: drop-shadow(0 0 10px rgba(25,138,223,.2));
  transition: filter .2s;
}
.shell-brand:hover .shell-brand-screen { filter: drop-shadow(0 0 16px rgba(25,138,223,.4)); }
.shell-brand-img {
  display: block;
  width: 100%; height: auto;
  clip-path: var(--clip-octo-sm);
}
.shell-brand-scan {
  position: absolute; inset: 2px;
  clip-path: var(--clip-octo-sm);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  overflow: hidden;
  pointer-events: none;
}
.shell-brand-scan::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -25%;
  height: 20%;
  background: linear-gradient(180deg, transparent, rgba(176,222,248,.12), transparent);
  animation: shellScan 4.5s linear infinite;
}
@keyframes shellScan {
  0%   { top: -25%; }
  100% { top: 125%; }
}

/* Navegação principal — bloco emoldurado (mockup 1): moldura HUD fina com
   acento CIANO no chanfro de cima e magenta embaixo; itens em "placas"
   escuras sutis com letras bem espaçadas */
.shell-nav-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 2px 4px;
  padding: 7px 6px;
  background: linear-gradient(180deg, rgba(25,138,223,.6), rgba(25,138,223,.18) 16%, rgba(28,72,213,.14) 55%, rgba(247,18,49,.5));
  clip-path: var(--clip-frame-nav);
  filter: drop-shadow(0 0 8px rgba(25,138,223,.12));
}
.shell-nav-frame::before {
  content: "";
  position: absolute; inset: 1px;
  background: linear-gradient(180deg, rgba(2,11,28,.92), rgba(1,1,9,.96));
  clip-path: var(--clip-frame-nav);
}
/* Barra branca de varredura do menu REMOVIDA (Diego 2026-07-09: reduzir
   efeitos pra aliviar o celular). Antes: .shell-nav-frame::after com
   animation shellScan descia uma fita clara por cima dos itens do menu. */
.shell-nav {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 5px 6px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(247,18,49,.4) transparent;
}
.shell-nav::-webkit-scrollbar { width: 5px; }
.shell-nav::-webkit-scrollbar-thumb { background: rgba(247,18,49,.35); border-radius: 3px; }

.shell-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: none;
  /* separação entre abas: linha AZUL translúcida (não preta), mockup 1 */
  border-bottom: 1px solid rgba(25,138,223,.16);
  border-radius: 0;
  /* "Gaveta" principal: fundo azul mais presente que o das subabas — a
     hierarquia visual é aba = gaveta, subaba = gavetinha escura dentro
     (Diego, 2026-07-07). */
  background: linear-gradient(90deg, rgba(25,138,223,.14), rgba(25,138,223,.035));
  font-family: var(--font-hud);
  font-size: .72rem;              /* levemente maior que .65rem, a pedido do Diego (sem mudar tamanho da aba) */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #DBDEF1;
  text-shadow: 0 0 8px rgba(176,222,248,.3);
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  transition: color .18s, background .18s, transform .18s;
}
.shell-nav-item:last-child { border-bottom: none; }
.shell-nav-item .shell-ico {
  width: 36px; height: 36px; /* abas principais um pouco maiores (Diego, 2026-07-07) */
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #B0DEF8; /* azul gelo, mais claro/aceso que o --neon-cyan puro */
  opacity: 1;
  /* glow neon forte: halo curto quase sólido + halo largo */
  filter: drop-shadow(0 0 3px rgba(25,138,223,1)) drop-shadow(0 0 8px rgba(25,138,223,.9)) drop-shadow(0 0 20px rgba(25,138,223,.6));
  transition: opacity .18s, color .18s, filter .18s;
}
.shell-nav-item .shell-ico svg { width: 36px; height: 36px; display: block; }
.shell-nav-item .shell-ico-img {
  width: 36px; height: 36px; display: block;
  /* Silhueta: a arte vira máscara e o preenchimento é currentColor — todos
     os ícones ficam EXATAMENTE da mesma cor (repouso azul-gelo, ativo
     laranja), igual ao svg do rádio. O url() da máscara vem inline do
     shell.js (nunca via var() — ver comentário lá). */
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.shell-nav-item:hover {
  color: #F9FAFB;
  text-shadow: 0 0 10px rgba(219,222,241,.6), 0 0 3px rgba(255,255,255,.6);
  background: linear-gradient(90deg, rgba(247,18,49,.14), rgba(247,18,49,.02) 80%);
  transform: translateX(2px);
}
.shell-nav-item:hover .shell-ico { opacity: 1; }

/* Item ativo — FLECHA magenta com glow + chevron (assinatura dos mockups).
   O fundo do elemento é a "borda" magenta; o ::before, 1.5px menor, é o
   miolo escuro — juntos formam a seta com contorno neon. */
.shell-nav-item.is-active {
  color: #F9FAFB;
  margin: 3px 0;
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom: none;
  background: linear-gradient(90deg, #FA3A32, var(--side-red) 45%, rgba(247,18,49,.85));
  clip-path: var(--clip-flecha);
  filter: drop-shadow(0 0 12px rgba(247,18,49,.85)) drop-shadow(0 0 28px rgba(247,18,49,.42));
  text-shadow: 0 0 12px rgba(250,58,50,.85), 0 0 3px rgba(255,255,255,.6);
  transform: none;
  /* Seta ativa acesa FIRME, sem pisca-pisca (Diego 2026-07-09: reduzir
     efeitos pra aliviar o celular). Antes tinha animation: hud-flicker. */
}
.shell-nav-item.is-active::before {
  content: "";
  position: absolute; inset: 2px;
  background:
    linear-gradient(90deg, rgba(247,18,49,.30), rgba(247,18,49,.06) 65%),
    linear-gradient(#2B0107, #010001);
  clip-path: var(--clip-flecha);
}
.shell-nav-item.is-active > * { position: relative; z-index: 1; }
/* ícone do item ativo ACENDE em laranja forte — currentColor via mask-image
   (raster) e stroke (svg do rádio), MESMA cor pras duas abordagens (Diego,
   2026-07-11: antes cada arte tinha um tom de origem diferente e o
   hue-rotate girava cada uma pra um resultado diferente). */
.shell-nav-item.is-active .shell-ico {
  opacity: 1;
  color: #FA3A32;
  filter: drop-shadow(0 0 6px rgba(250,58,50,.95)) drop-shadow(0 0 16px rgba(247,18,49,.55));
}
/* setinha vermelha em cima da ponta da flecha (mockup 1) */
.shell-nav-item.is-active::after {
  content: "";
  position: absolute; z-index: 1;
  right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-top: 3px solid #F9FAFB;
  border-right: 3px solid #F9FAFB;
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 0 5px rgba(247,18,49,1)) drop-shadow(0 0 10px rgba(247,18,49,.7));
}

/* Nichos com subabas (reorganização 2026-07-07): grupo expansível.
   .shell-nav-group reusa a base de .shell-nav-item mas é um <button>
   (largura total, sem navegar) com uma setinha à direita; .shell-nav-sub
   usa a técnica grid-template-rows 0fr→1fr pra abrir/fechar suave sem
   precisar calcular altura em JS. */
.shell-nav-groupwrap { display: flex; flex-direction: column; }
.shell-nav-item.shell-nav-group {
  width: 100%;
  text-align: left;
  cursor: pointer;
  /* botão precisa das MESMAS letras dos links (font:inherit puxava 1rem do
     body e deixava os grupos gigantes perto de Início/Rádio) */
  font-family: var(--font-hud);
  font-size: .72rem;
  font-weight: 600;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  /* Diferencia aba-mãe de subaba (pedido do Diego, 2026-07-07): aba-mãe em
     Branco gelo #F9FAFB (a mais clara da paleta); subaba em Azul gelo
     #B0DEF8 (a autorizada logo mais escura). Ambas da paleta oficial. */
  color: #F9FAFB;
  text-shadow: 0 0 8px rgba(25,138,223,.5);
}
.shell-nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .6;
  transform: rotate(-45deg);
  transition: transform .2s, margin-right .2s;
}
.shell-nav-group.is-open .shell-nav-chevron { transform: rotate(45deg); }
/* Grupo ativo (Diego, 2026-07-11) também acende a setinha vermelha
   decorativa da flecha (::after, fixa em right:22px) — sem afastar o
   chevron elas ficam coladas/sobrepostas no canto. */
.shell-nav-group.is-active .shell-nav-chevron { margin-right: 18px; }
/* "você está aqui dentro" — grupo colapsado mas com subaba ativa dentro:
   acende em ciano (o "aqui dentro" difere do vermelho "esta é a página",
   reservado pro item folha realmente ativo) */
.shell-nav-group.has-active { color: #F9FAFB; text-shadow: 0 0 8px rgba(25,138,223,.5); }
.shell-nav-group.has-active .shell-ico {
  color: #B0DEF8;
  filter: drop-shadow(0 0 6px rgba(25,138,223,1)) drop-shadow(0 0 16px rgba(25,138,223,.6));
}

.shell-nav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.shell-nav-group.is-open + .shell-nav-sub { grid-template-rows: 1fr; }
.shell-nav-sub-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.shell-nav-subitem {
  padding: 9px 14px 9px 38px;
  font-size: .66rem;
  /* "Gavetinha dentro da gaveta" (Diego, 2026-07-07): a SUBABA (a faixa
     inteira, não a letra) fica visivelmente mais escura e rebaixada que a
     aba-mãe — fundo quase preto + sombra interna de encaixe. Tons da
     paleta: Preto azulado #010109 e Preto cyber #020B1C via rgba. */
  background: linear-gradient(90deg, rgba(1,1,9,.9), rgba(2,11,28,.55));
  box-shadow: inset 0 3px 8px rgba(1,1,9,.65), inset 0 -2px 6px rgba(1,1,9,.45);
  border-bottom: 1px solid rgba(25,138,223,.1);
  /* Texto em Azul neon #198ADF (Diego aprovou manter, 2026-07-07). */
  color: #198ADF;
  text-shadow: 0 0 8px rgba(25,138,223,.35);
}
.shell-nav-subitem .shell-ico { width: 20px; height: 20px; }
.shell-nav-subitem .shell-ico svg,
.shell-nav-subitem .shell-ico-img { width: 20px; height: 20px; }
.shell-nav-subitem.is-active { padding-left: 34px; }

/* Ícone de Notificações (arte tem bastante respiro em volta do sino) —
   aumentado a pedido do Diego, 2026-07-07, só pra ficar do tamanho visual
   dos outros ícones da aba Jogador. */
.shell-nav-subitem[data-slug="notificacoes"] .shell-ico-img {
  /* A arte do sino tem muito espaço transparente em volta — aumentar o
     width não resolvia (o desenho continuava pequeno dentro do quadrado).
     transform:scale amplia o DESENHO renderizado sem mexer no layout de
     24px, então o centro continua alinhado com os outros ícones da coluna
     e nada é empurrado pro lado. (Diego, 2026-07-07) */
  transform: scale(2.2);
  transform-origin: center;
}
/* o sino ampliado vaza do quadradinho de 24px — sem isso o vizinho de
   baixo/cima poderia cobrir o desenho */
.shell-nav-subitem[data-slug="notificacoes"] .shell-ico { overflow: visible; position: relative; z-index: 1; }

/* Box "Seja Premium" — chanfro ciano + DIAMANTE facetado + PREMIUM dourado,
   com mais respiro (mockup 1) */
.shell-premium {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 2px 12px;
  padding: 19px 16px;
  background: linear-gradient(135deg, rgba(25,138,223,1), rgba(25,138,223,.35) 55%, rgba(25,138,223,.85));
  clip-path: var(--clip-octo-sm);
  filter: drop-shadow(0 0 12px rgba(25,138,223,.38));
  transition: filter .2s;
}
.shell-premium:hover { filter: drop-shadow(0 0 18px rgba(25,138,223,.6)); }
.shell-premium::before {
  content: "";
  position: absolute; inset: 1px;
  background:
    linear-gradient(135deg, rgba(25,138,223,.14), rgba(2,11,28,.2)),
    linear-gradient(160deg, #020B1C, #010109);
  clip-path: var(--clip-octo-sm);
}
.shell-premium > * { position: relative; z-index: 1; }
.shell-premium-gem {
  flex-shrink: 0;
  color: #B0DEF8;
  filter: drop-shadow(0 0 6px rgba(25,138,223,1)) drop-shadow(0 0 20px rgba(25,138,223,.6));
  line-height: 0;
}
.shell-premium-gem svg { width: 42px; height: 36px; display: block; }
.shell-premium:hover .shell-premium-gem {
  filter: drop-shadow(0 0 9px rgba(255,255,255,.9)) drop-shadow(0 0 26px rgba(25,138,223,.8));
}
.shell-premium-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.shell-premium-txt small {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--neon-cyan);
}
.shell-premium-txt strong {
  font-family: var(--font-hud);
  font-size: .95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(251,79,5,.45);
}

/* Rodapé social — CÍRCULOS vermelhos acesos num trilho arredondado; sobem
   um pouco e deixam o rodapé livre pros CIRCUITOS do fundo aparecerem */
.shell-social {
  margin-top: auto;
  padding: 8px 6px 0;
  margin-bottom: 46px;
  text-align: left;
}
.shell-social-icons {
  display: flex; gap: 10px; justify-content: space-around; align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(247,18,49,.35);
  border-radius: 22px;
  background: rgba(247,18,49,.05);
  box-shadow: 0 0 14px rgba(247,18,49,.1), inset 0 0 12px rgba(247,18,49,.05);
}
.shell-social-icons a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(247,18,49,.65);
  color: #EB0441;
  background: rgba(43,1,7,.6);
  box-shadow: 0 0 8px rgba(247,18,49,.25), inset 0 0 6px rgba(247,18,49,.12);
  filter: drop-shadow(0 0 3px rgba(247,18,49,.4));
  transition: color .18s, border-color .18s, box-shadow .18s;
}
.shell-social-icons a:hover {
  color: #FA3A32;
  border-color: rgba(247,18,49,1);
  box-shadow: 0 0 16px rgba(247,18,49,.6), inset 0 0 8px rgba(247,18,49,.25);
}
.shell-social-icons svg { width: 16px; height: 16px; display: block; }

/* ============================================================
   TOPBAR
   ============================================================ */
/* Moldura padrão (barra): mesmo gradiente azul→vermelho e canto
   chanfrado do menu lateral, só que na variante horizontal
   (--hud-clip-bar). Camada dupla: gradiente por fora = borda,
   fundo escuro por dentro (::before) 1px mais alto = o preenchimento. */
.shell-topbar {
  position: fixed;
  top: 0; left: var(--sidebar-width); right: 0;
  height: var(--header-height);
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: linear-gradient(90deg, var(--neon-cyan) 0%, rgba(25,138,223,.3) 40%, rgba(247,18,49,.3) 60%, var(--danger) 100%);
  clip-path: var(--hud-clip-bar);
}
.shell-topbar::before {
  content: '';
  position: absolute; inset: 0 0 1px 0;
  background: linear-gradient(180deg, rgba(1,1,9,.94), rgba(1,1,9,.8));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  clip-path: var(--hud-clip-bar);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
/* Quadradinhos coloridos da borda de baixo da topbar REMOVIDOS (Diego
   2026-07-09: tirar os retângulozinhos vermelho/azul das barras). */
.shell-topbar > * { position: relative; z-index: 1; }

/* Busca (decorativa por enquanto) — pill com borda magenta, lupa à direita */
.shell-search {
  flex: 1;
  max-width: 480px;
  display: flex; align-items: center; gap: 10px;
  height: 40px;
  padding: 0 14px 0 16px;
  border-radius: 12px;
  background: rgba(2,11,28,.7);
  border: 1px solid rgba(240,10,230,.45);
  box-shadow: 0 0 12px rgba(240,10,230,.1), inset 0 0 10px rgba(240,10,230,.05);
  transition: border-color .2s, box-shadow .2s;
}
.shell-search:focus-within {
  border-color: rgba(240,10,230,.8);
  box-shadow: 0 0 16px rgba(240,10,230,.3);
}
.shell-search svg {
  order: 2;
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--neon-magenta);
  filter: drop-shadow(0 0 4px rgba(240,10,230,.6));
}
.shell-search input {
  order: 1;
  flex: 1; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: .85rem; font-family: var(--font-body);
}
.shell-search input::placeholder { color: var(--text-muted); }

.shell-topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

/* Carteira (moeda + gema) — caixas retangulares com borda neon (mockups) */
.shell-wallet { display: flex; align-items: center; gap: 10px; }
.shell-coin {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  background: rgba(1,1,9,.75);
  font-family: var(--font-hud); font-weight: 700; font-size: .95rem;
  color: #F9FAFB;
}
.shell-coin i { font-style: normal; font-size: .95rem; line-height: 1; }
.shell-coin-ico { width: 18px; height: 18px; display: block; }
.shell-coin-gold {
  border: 1px solid rgba(251,79,5,.55);
  box-shadow: 0 0 10px rgba(251,79,5,.14), inset 0 0 8px rgba(251,79,5,.05);
}
.shell-coin-gold .shell-coin-ico { filter: drop-shadow(0 0 5px rgba(251,79,5,.6)); }
.shell-coin-gold b { color: var(--neon-gold); text-shadow: 0 0 10px rgba(251,79,5,.45); }
.shell-coin-gem {
  border: 1px solid rgba(173,5,238,.6);
  box-shadow: 0 0 10px rgba(173,5,238,.16), inset 0 0 8px rgba(173,5,238,.06);
}
.shell-coin-gem i { filter: drop-shadow(0 0 5px rgba(173,5,238,.7)); }
.shell-coin-gem b { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(25,138,223,.5); }
.shell-coin em {
  font-style: normal; margin-left: 5px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .95rem;
  border: 1px solid rgba(240,10,230,.8); color: var(--neon-magenta);
  box-shadow: 0 0 8px rgba(240,10,230,.3);
}

/* Sino */
.shell-bell {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(1,1,9,.6); border: 1px solid rgba(240,10,230,.3);
  color: var(--text-secondary); cursor: pointer;
  transition: color .18s, border-color .18s, box-shadow .18s;
}
.shell-bell:hover { color: var(--neon-magenta); border-color: rgba(240,10,230,.7); box-shadow: 0 0 12px rgba(240,10,230,.3); }
.shell-bell svg { width: 18px; height: 18px; }
.shell-bell-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 6px rgba(240,10,230,.9);
}

/* Bloco do usuário — MANTÉM .navbar-actions/.navbar-avatar/.btn-primary
   pra auth.js continuar funcionando (foto, borda, troca Sair/Começar). */
.shell-user.navbar-actions {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin: 0; padding: 0; border: none;
}
.shell-user .navbar-avatar {
  width: 36px; height: 36px;
  margin: 0;
  box-shadow: 0 0 0 2px rgba(240,10,230,.5), 0 0 12px rgba(240,10,230,.4);
}
.shell-user-meta { display: flex; flex-direction: column; line-height: 1.2; max-width: 130px; gap: 3px; margin-right: 4px; }
.shell-user-name {
  font-family: var(--font-hud); font-weight: 700; font-size: .86rem;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell-user-level { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--neon-cyan); }
.shell-user-level.is-premium { color: var(--neon-gold); text-shadow: 0 0 8px rgba(251,79,5,.45); }
.shell-user .btn-primary { white-space: nowrap; }

/* Botão hambúrguer (mobile) e scrim do drawer */
.shell-burger {
  display: none;
  position: fixed; top: 12px; left: 14px; z-index: 130;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  color: var(--text-primary);
  background: rgba(1,1,9,.9); border: 1px solid rgba(240,10,230,.4);
  border-radius: 10px; cursor: pointer;
}
.shell-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 115;
  background: rgba(1,1,1,.66);
  backdrop-filter: blur(2px);
}
.shell-scrim.is-open { display: block; }

/* ============================================================
   COMPONENTES REUTILIZÁVEIS (seção 3 do plano)
   ============================================================ */

/* .painel — bloco HUD chanfrado com moldura magenta e glow */
.painel {
  position: relative;
  background: linear-gradient(160deg, rgba(2,11,28,.7), rgba(1,1,9,.82));
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  padding: 20px 22px;
  filter: drop-shadow(0 0 14px rgba(240,10,230,.12));
}
.painel::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px;
  background: linear-gradient(160deg, var(--neon-magenta), rgba(240,10,230,.2));
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.painel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.painel-head h2, .painel-head h3 {
  font-family: var(--font-hud);
  font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(25,138,223,.35);
}
.painel-head .painel-link {
  font-family: var(--font-hud); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 4px;
}
.painel-head .painel-link:hover { color: var(--neon-cyan); }

/* .chip-stat — pílula ícone + número + label */
.chip-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(240,10,230,.28);
  background: rgba(2,11,28,.5);
}
.chip-stat-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neon-cyan);
}
.chip-stat-ico svg { width: 22px; height: 22px; }
.chip-stat-val {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--text-primary); line-height: 1;
}
.chip-stat-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-top: 3px;
}

/* Tabs pill */
.tabs-pill { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--bg-input); border: 1px solid rgba(240,10,230,.2); }
.tabs-pill button {
  padding: 7px 16px; border: none; border-radius: var(--radius-full);
  background: transparent; cursor: pointer;
  font-family: var(--font-hud); font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary);
  transition: all .18s;
}
.tabs-pill button.is-active {
  background: linear-gradient(90deg, rgba(240,10,230,.9), rgba(173,5,238,.9));
  color: #F9FAFB; box-shadow: 0 0 12px rgba(240,10,230,.4);
}

/* Toggle switch (verde ON — excecao de resultado positivo) */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #020B1C; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-full); transition: .2s;
}
.toggle-switch .slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #B0DEF8; border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .slider { background: rgba(34,197,94,.25); border-color: var(--success); }
.toggle-switch input:checked + .slider::before { transform: translateX(20px); background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,.7); }

/* Barra de progresso neon */
.progress-neon { height: 8px; border-radius: var(--radius-full); background: rgba(255,255,255,.06); overflow: hidden; }
.progress-neon > span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); box-shadow: 0 0 10px rgba(240,10,230,.5); }

/* Hero banner de página */
.shell-hero {
  position: relative;
  margin: 24px 0 22px;
  padding: 34px 30px;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1,1,9,.92) 0%, rgba(1,1,9,.55) 55%, rgba(1,1,9,.2) 100%),
    linear-gradient(135deg, #240473, #010109);
  border: 1px solid rgba(240,10,230,.4);
  box-shadow: 0 0 30px rgba(240,10,230,.14), inset 0 0 40px rgba(173,5,238,.08);
}
.shell-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05;
  color: var(--neon-cyan); text-shadow: 0 0 22px rgba(25,138,223,.4); margin-bottom: 10px;
}
.shell-hero p { color: var(--text-secondary); max-width: 560px; font-size: .95rem; }

/* Estado "Em construção" (stubs das páginas novas) */
.em-construcao { max-width: 620px; margin: 30px auto; text-align: left; }
.em-construcao .painel { padding: 44px 30px; }
.em-construcao-ico { font-size: 2.6rem; margin-bottom: 14px; filter: drop-shadow(0 0 14px rgba(25,138,223,.6)); }
.em-construcao h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  color: var(--neon-cyan); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
.em-construcao p { color: var(--text-secondary); font-size: .92rem; line-height: 1.7; }

/* ============================================================
   MISSÕES — card de missão (primeira: check-in diário)
   ============================================================ */
.missao-card {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; margin: 0 auto 24px; max-width: 680px;
}
.missao-ico { font-size: 2rem; filter: drop-shadow(0 0 10px rgba(25,138,223,.5)); }
.missao-corpo { flex: 1; min-width: 200px; }
.missao-titulo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--neon-cyan);
  margin-bottom: 4px;
}
.missao-desc { color: var(--text-secondary); font-size: .85rem; line-height: 1.5; margin-bottom: 8px; }
.missao-streak { font-size: .8rem; color: var(--neon-cyan); font-weight: 700; }
.missao-streak small { display: block; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.missao-card .btn[disabled] { opacity: .5; cursor: default; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 968px) {
  body.com-shell {
    padding-left: 0;
    padding-top: var(--header-height);
  }
  .shell-sidebar {
    /* largura própria no drawer: global.css zera --sidebar-width em <=768px */
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform .28s var(--ease-out);
    box-shadow: 6px 0 40px rgba(0,0,0,.7);
  }
  .shell-sidebar.is-open { transform: translateX(0); }
  .shell-topbar { left: 0; padding-left: 62px; }
  .shell-burger { display: inline-flex; }
  .shell-search { max-width: none; }
}

@media (max-width: 640px) {
  .shell-wallet { display: none; }
  .shell-user .btn-primary { display: none; }
  .shell-user-meta { display: none; }
  .shell-search input { font-size: .8rem; }
}