@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* ==========================================================================
   BlaXx — Design System v2
   Paleta: preto, branco, verde-limão | Fonte: Inter | 100% HTML+CSS
   ========================================================================== */

:root {
    --black: #080907;
    --ink: #151515;
    --ink-2: #2a2d28;
    --muted: #5f665e;
    --muted-2: #8a918a;
    --line: #e6eadf;
    --line-soft: #f0f3eb;
    --bg: #f6f8f2;
    --bg-warm: #fafcf3;
    --card: #ffffff;
    /* Verde-limão oficial do logo BlaXx — alinhado com Mac/iOS Theme.swift
       e renderer design-system.css. */
    --lime: #59FD27;
    --lime-2: #A8FF4D;
    --lime-soft: #F0FAD9;
    --lime-bg: #f5fbe2;
    --lime-dark: #5AB800;
    --ok: #efffe6;
    --ok-text: #2d651b;
    --warn: #fff7df;
    --warn-text: #8a6500;
    --danger: #ffede8;
    --danger-text: #a83417;
    --info: #e8f3ff;
    --info-text: #1c4f87;
    --shadow-sm: 0 4px 12px rgba(8, 9, 7, 0.04);
    --shadow: 0 12px 32px rgba(8, 9, 7, 0.06);
    --shadow-lg: 0 20px 60px rgba(8, 9, 7, 0.10);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-xl: 38px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at top left, #f3ffd0, transparent 34%), var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ==========================================================================
   Acessibilidade (a11y) global
   ==========================================================================
   :focus-visible aplica indicador visual SO em navegacao por teclado (Tab),
   nao em mouse click. Browsers modernos suportam — fallback :focus pra IE.
   Garante usuario de teclado/screen reader sempre sabe onde esta o foco.
   ----------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Remove outline padrao de mouse (mantemos so para keyboard via :focus-visible) */
:focus:not(:focus-visible) { outline: none; }

/* Skip link — Tab inicial pula direto pro main, util pra usuarios de
   teclado/screen reader que nao querem percorrer nav inteiro cada vez. */
.bx-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    background: var(--black);
    color: var(--lime);
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    z-index: 9999;
    transition: top 0.2s ease;
    text-decoration: none;
    /* Alvo de toque acessível (WCAG 2.5.5): quando o link ganha foco ele fica
       visível e clicável, então precisa dos 44px como qualquer outro controle. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.bx-skip-link:focus, .bx-skip-link:focus-visible {
    top: 8px;
    outline: 3px solid var(--lime-2);
    outline-offset: 2px;
}

/* Utility classe pra texto so-screen-reader (oculto visualmente, anunciado por TalkBack/VoiceOver) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Respeita prefers-reduced-motion (usuarios sensiveis a animacao) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* aria-current=page nos links de navegacao — estado ativo "oficial" */
a[aria-current="page"] {
    color: var(--lime-dark);
    font-weight: 700;
}

/* Layout shell */
.shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 22px 56px;
}
.shell-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 22px 56px;
}

/* ==========================================================================
   Topbar / Header (público + logado)
   ========================================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5,8,5, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
.nav {
    /* Sincronizado com .app-shell (max-width 1280px, padding 22px) para que
       o logo na esquerda fique alinhado com a borda esquerda da sidebar
       (256px) e o widget de user fique alinhado com a borda direita do
       painel de conteudo. */
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 22px;
    display: grid;
    /* 3 colunas: brand (256px = mesmo que sidebar) | links centrais | cta-row direita */
    grid-template-columns: 256px 1fr auto;
    gap: 28px;
    align-items: center;
}
.nav > .brand { justify-self: start; grid-column: 1; }
.nav > .links { justify-self: center; grid-column: 2; }
.nav > .cta-row { justify-self: end; grid-column: 3; }
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -0.04em;
    font-size: 28px;          /* era 17px — 2x para destaque */
    text-decoration: none;
}
/* Brand mark "BlaXx" — quadrado preto com texto lime, identidade oficial
   (mesmo padrão do AppIcon do Mac/iOS). Aceita filho com a letra "B" simples
   (legado, virou texto "BlaXx") ou o texto "BlaXx" diretamente dentro.
   Tamanho 2x (era 36px → 72px) atendendo pedido de "logo 2x maior". */
.mark {
    min-width: 128px;
    height: 72px;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--black);
    color: var(--lime);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -0.02em;
    box-shadow: var(--shadow);
    line-height: 1;
}
.brand-sub {
    color: var(--muted);
    font-weight: 500;
    margin-left: 4px;
    text-transform: lowercase;
    letter-spacing: 0;
    font-size: 18px;          /* proporcional ao .mark 2x */
}
.links {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;       /* nunca quebra linha — mantem layout consistente */
    align-items: center;
    justify-content: center;
}
.links a {
    padding: 8px 11px;       /* compacto pra caber 6 itens em 1 linha */
    border-radius: 999px;
    font-size: 13px;
    color: #343b32;
    font-weight: 500;
    white-space: nowrap;     /* "Como funciona" / "Comprar pontos" nao quebram */
    transition: all 0.18s;
}
.links a:hover { background: rgba(8, 9, 7, 0.06); }
.links a.active { background: var(--black); color: var(--lime); font-weight: 600; }
.cta-row { display: flex; gap: 8px; align-items: center; }

/* ---- Lado direito da navegação: sino + inicial do usuário ----------------
   Montado por assets/blaxx-nav-user.js, que é o único lugar que decide o que
   aparece aqui — antes o nome vinha hardcoded ("Olá, Mariana") em 30 páginas.
   As mesmas regras existem em ../styles.css para o outro sistema de nav
   (chrome.js); as duas folhas precisam andar juntas. */
.nav-bell { display: inline-flex; align-items: center; justify-content: center; }
.nav-bell svg { width: 20px; height: 20px; display: block; }
/* Mesmos valores de `.user-pill .av` em ../styles.css — os dois sistemas de
   nav mostram o MESMO avatar. Lime de preenchimento com texto tinta dá 17,8:1
   e é a combinação preferida da marca; neon como cor de texto só valeria sobre
   fundo escuro, e esta topbar é clara. */
.nav-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 50%;
    background: var(--lime, #59FD27); color: var(--ink, #0A0B0E);
    font-weight: 800; font-size: 13px; line-height: 1; text-transform: uppercase;
}
.nav-user { display: inline-flex; align-items: center; gap: 8px; }

/* Mobile nav */
.mobile-only { display: none; }
@media (max-width: 880px) {
    .links { display: none; }
    .mobile-only { display: flex; gap: 8px; }
    /* Em mobile o grid 256/1fr/auto nao faz sentido — volta pra flex
       brand vs cta-row, espacamento compacto, sem horizontal scroll. */
    .nav {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 10px 14px;
    }
    .nav > .brand { grid-column: 1; }
    .nav > .links { display: none; }
    .nav > .cta-row { grid-column: 2; }
    .cta-row .button.ghost { display: none; }
    /* ...MENOS o sino: no mobile ele fica visível à direita, como ícone puro.
       A regra acima é ampla (esconde qualquer .button.ghost) e engolia a
       notificação junto — que é justamente o que precisa estar sempre à mão. */
    .cta-row .button.ghost.nav-bell {
        display: inline-flex;
        width: 40px; height: 40px; padding: 0;
        border-radius: var(--r-pill, 999px);
    }
    /* O nome sai; sobra a inicial. Evita que "Olá, Fulano" empurre a barra
       (regra do projeto: zero rolagem horizontal no mobile).
       O seletor precisa de `.cta-row .button` para vencer `.button.secondary`
       — com `.nav-user` sozinho a especificidade perde e o botão mantinha
       padding, raio de 10px e fundo papel, deixando um retângulo atrás do
       círculo. Borda de 3px e sombra dura ficam: é a assinatura Neo-Brutal, e
       assim o avatar vira par visual do sino ao lado. */
    .nav-user__nome { display: none; }
    .cta-row .button.nav-user {
        width: 44px; height: 44px; padding: 0;
        border-radius: var(--r-pill, 999px);
        justify-content: center;
        background: var(--lime, #59FD27);
    }
    .cta-row .button.nav-user .nav-av {
        width: 100%; height: 100%; flex-basis: auto;
        background: none; font-size: 15px;
    }
    /* Logo reduzido pra caber em telas pequenas — mas ainda 1.5x do tamanho
       legado pra manter destaque. */
    .mark {
        min-width: 76px;
        height: 48px;
        padding: 0 12px;
        font-size: 20px;
        border-radius: 12px;
    }
    .brand { font-size: 20px; }
    .brand-sub { font-size: 13px; }
}

/* Anti horizontal scroll global — qualquer conteudo (tabelas, imagens,
   pre, code) que vazar fica clipado em vez de empurrar a viewport. */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, table, pre, code { max-width: 100%; }

/* Botao "Sair" no widget de user — texto sempre visivel no desktop, escondido
   em telas <=480px (mantem so o icone ⎋ pra economizar largura). */
.bx-logout-label { display: inline; }
@media (max-width: 480px) {
    .bx-logout-label { display: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button, button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--lime);
    color: #091006;
    border: 0;
    border-radius: 999px;
    padding: 13px 22px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 28px rgba(89,253,39, 0.32);
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(89,253,39, 0.4); }
.button.secondary {
    background: var(--card);
    color: var(--black);
    box-shadow: none;
    border: 1px solid var(--line);
}
.button.secondary:hover { background: var(--bg); }
.button.dark { background: var(--black); color: var(--lime); box-shadow: 0 10px 28px rgba(8, 9, 7, 0.18); }
.button.dark:hover { box-shadow: 0 14px 32px rgba(8, 9, 7, 0.28); }
.button.ghost { background: transparent; box-shadow: none; color: var(--ink); padding: 10px 14px; }
.button.ghost:hover { background: rgba(8, 9, 7, 0.06); }
.button.full { width: 100%; }
.button.lg { padding: 16px 28px; font-size: 15px; }
.button.sm { padding: 9px 14px; font-size: 13px; }
.button.danger { background: #ffe1d7; color: #a83417; box-shadow: none; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1 {
    font-size: clamp(36px, 6vw, 68px);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 900;
    color: var(--ink);
}
h2 {
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 900;
    margin: 0 0 12px;
}
h3 {
    font-size: 20px;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 8px;
}
h4 {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0 0 12px;
}
p { color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
p.lead { font-size: 18px; color: var(--ink-2); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Hero (público)
   ========================================================================== */
.hero {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 26px;
    align-items: stretch;
    margin: 28px 0;
}
.hero-box {
    background: var(--black);
    color: white;
    border-radius: var(--radius-xl);
    padding: 48px;
    min-height: 320px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.hero-box::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(89,253,39, 0.22);
}
.hero-box h1 { color: white; margin: 18px 0 14px; }
.hero-box p { color: #d6dccf; max-width: 60ch; font-size: 18px; }
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(89,253,39, 0.14);
    color: var(--lime);
    border: 1px solid rgba(89,253,39, 0.4);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.hero-side {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 880px) {
    .hero { grid-template-columns: 1fr; }
    .hero-box { padding: 32px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { margin: 44px 0; }
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .sub { max-width: 50ch; color: var(--muted); }
.section-head a { color: var(--ink); font-weight: 600; font-size: 14px; }
.section-head a:hover { color: var(--lime); }

/* Banner preto institucional */
.band-dark {
    background: var(--black);
    color: white;
    border-radius: var(--radius-xl);
    padding: 56px 48px;
}
.band-dark h2, .band-dark h3 { color: white; }
.band-dark p { color: #d6dccf; }

/* ==========================================================================
   Grids
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 880px) {
    .grid, .grid.two, .grid.four { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card, .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.card.featured {
    background: linear-gradient(135deg, var(--black), #24281f);
    color: white;
}
.card.featured h3, .card.featured h2 { color: white; }
.card.featured p { color: #d8decd; }
.card.lime {
    background: var(--lime-bg);
    border-color: rgba(89,253,39, 0.5);
}
.card.compact { padding: 18px; }
.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--lime);
    color: var(--black);
    display: grid;
    place-items: center;
    font-weight: 900;
    margin-bottom: 14px;
    font-size: 18px;
}
.card.featured .card-icon { background: var(--lime); color: var(--black); }

/* ==========================================================================
   Tags / Badges / Status
   ========================================================================== */
.tag, .status {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 11px;
    background: var(--lime-soft);
    color: #384226;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status.confirmado, .status.aprovado, .status.concluido, .status.ativo, .status.ok {
    background: var(--ok);
    color: var(--ok-text);
}
.status.pendente, .status.aberto, .status.processando {
    background: var(--warn);
    color: var(--warn-text);
}
.status.cancelado, .status.recusado, .status.estornado, .status.erro {
    background: var(--danger);
    color: var(--danger-text);
}
.status.info { background: var(--info); color: var(--info-text); }
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ==========================================================================
   Wallet / Balance card
   ========================================================================== */
.wallet {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
.wallet .label {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.wallet .big {
    font-size: 50px;
    letter-spacing: -0.05em;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    margin: 8px 0 4px;
}
.wallet .big small {
    font-size: 22px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.wallet .equiv { color: var(--muted); font-size: 14px; }
.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 22px;
}
.mini {
    background: var(--lime-soft);
    border-radius: var(--radius-sm);
    padding: 14px;
}
.mini .lbl { font-size: 12px; color: #4a5635; font-weight: 700; }
.mini strong { display: block; font-size: 22px; letter-spacing: -0.03em; margin-top: 4px; }

.wallet.dark { background: var(--black); color: white; border-color: transparent; }
.wallet.dark .big { color: white; }
.wallet.dark .big small { color: #b8bdaf; }
.wallet.dark .label { color: var(--lime); }
.wallet.dark .equiv { color: #b8bdaf; }
.wallet.dark .mini { background: rgba(255, 255, 255, 0.06); }
.wallet.dark .mini .lbl { color: #c8cdb8; }

/* ==========================================================================
   Logged dashboard layout
   ========================================================================== */
.app-shell {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 22px 56px;
    align-items: start;
}
.sidebar {
    position: sticky;
    top: 116px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}
.side-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 18px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 14px;
}
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--black);
    color: var(--lime);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 16px;
}
.side-user-name { font-weight: 700; font-size: 14px; }
.side-user-tier { font-size: 12px; color: var(--muted); }
.side-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
    display: flex;
    align-items: center;
    gap: 12px;            /* maior pra acomodar icones 1.5x */
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 15px;      /* discreto bump pra balancear com icones */
    color: var(--ink-2);
    font-weight: 500;
    transition: all 0.15s;
}
.side-nav a:hover { background: var(--bg); }
.side-nav a.active {
    background: var(--black);
    color: var(--lime);
    font-weight: 700;
}
/* Icones da sidebar — metade do tamanho anterior (42→21px) conforme
   ajuste do usuario. Background transparente porque emojis ja tem
   cores proprias. */
.side-nav .ic {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: transparent;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.side-nav a.active .ic { background: var(--lime); color: var(--black); }
.side-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row.split { grid-template-columns: 1fr; } }
label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(89,253,39, 0.2);
}
/* Indicador adicional pra keyboard users — outline grosso sobre o ring */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--lime-dark);
    outline-offset: 0;
}
textarea { resize: vertical; min-height: 100px; }
.field-help { font-size: 12px; color: var(--muted); }
.checkbox-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
}
.checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] {
    accent-color: var(--lime);
    margin-top: 3px;
    width: 16px;
    height: 16px;
}
.checkbox-row label { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.5; }

.option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.option-card:hover { border-color: var(--muted-2); }
.option-card input { accent-color: var(--lime); }
.option-card-body { flex: 1; }
.option-card-body .ttl { font-weight: 700; font-size: 14px; color: var(--ink); }
.option-card-body .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}
.table th, .table td {
    padding: 14px 18px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid var(--line-soft);
}
.table th {
    background: var(--bg);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--bg-warm); }
.amount-pos { color: var(--ok-text); font-weight: 800; }
.amount-neg { color: var(--ink); font-weight: 800; }

@media (max-width: 720px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        padding: 10px 14px;
        background: var(--card);
    }
    .table td {
        border: 0;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        gap: 14px;
    }
    .table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 12px;
        color: var(--muted);
        text-transform: uppercase;
    }
}

/* ==========================================================================
   Auth card
   ========================================================================== */
.auth-wrap {
    max-width: 460px;
    margin: 60px auto;
    padding: 0 22px;
}
.auth-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow);
}
.auth-card h2 { margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 24px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.auth-foot a { color: var(--ink); font-weight: 700; }
.auth-foot a:hover { color: var(--lime); }

/* ==========================================================================
   Page header (breadcrumb + title)
   ========================================================================== */
.page-head { margin: 8px 0 28px; }
.crumbs {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { margin: 0 6px; opacity: 0.5; }

/* ==========================================================================
   Reward / Partner / Campaign cards
   ========================================================================== */
.reward-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s, box-shadow 0.18s;
    display: flex;
    flex-direction: column;
}
.reward-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.reward-img {
    height: 140px;
    background: linear-gradient(135deg, var(--lime-soft), var(--lime-bg));
    display: grid;
    place-items: center;
    font-size: 48px;
    border-bottom: 1px solid var(--line-soft);
}
.reward-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.reward-body h3 { margin: 4px 0; font-size: 16px; }
.reward-cost {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.02em;
}
.reward-cost small { color: var(--muted); font-size: 13px; font-weight: 600; }

.partner-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.18s;
}
.partner-card:hover { border-color: var(--muted-2); transform: translateY(-2px); }
.partner-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--card);            /* fundo neutro pra logos coloridos */
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-weight: 900;
    color: var(--ink);
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 4px;
}
/* Logo real (img Clearbit) — preserva proporcao original da marca */
.partner-logo .partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Fallback (emoji/iniciais) quando logo nao existe na Clearbit */
.partner-logo .partner-logo-fallback {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}
.partner-card h3 { margin: 0 0 2px; font-size: 15px; }
.partner-card .rate { font-size: 13px; color: var(--muted); }
.partner-card .rate strong { color: var(--ink); font-weight: 800; }

.campaign-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.campaign-cover {
    background: linear-gradient(135deg, var(--black), #24281f);
    color: white;
    padding: 22px;
    position: relative;
}
.campaign-cover::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(89,253,39, 0.18);
}
.campaign-cover h3 { color: white; position: relative; }
.campaign-body { padding: 18px; }

/* Progress bar */
.progress {
    background: var(--line-soft);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 8px 0;
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--lime);
    border-radius: 999px;
}
.progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

/* ==========================================================================
   Pricing cards
   ========================================================================== */
.price-card {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.price-card.featured {
    background: linear-gradient(165deg, var(--black), #1c1f19);
    color: white;
    border-color: var(--lime);
}
.price-card.featured h3, .price-card.featured .price { color: white; }
.price-card.featured p { color: #d8decd; }
.price-card.featured ul li { color: #d8decd; }
.price-card.featured ul li::before { background: var(--lime); }
.price-card .badge-top {
    position: absolute;
    top: -10px;
    right: 24px;
    background: var(--lime);
    color: var(--black);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.price-card .price {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 6px 0 4px;
}
.price-card .price small {
    font-size: 16px;
    font-weight: 600;
    color: var(--muted);
}
.price-card.featured .price small { color: #b8bdaf; }
.price-card ul { list-style: none; margin: 18px 0; }
.price-card ul li {
    padding: 7px 0;
    padding-left: 22px;
    position: relative;
    font-size: 14px;
    color: var(--ink-2);
}
.price-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ink);
    font-weight: 900;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--lime);
    display: grid;
    place-items: center;
    font-size: 10px;
    top: 9px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background: var(--black);
    color: white;
    margin-top: 60px;
    padding: 56px 22px 28px;
}
.footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
}
.footer h4 { color: white; margin-bottom: 14px; font-size: 13px; }
.footer ul { list-style: none; }
.footer ul li { padding: 5px 0; }
.footer ul a { color: #b8bdaf; font-size: 14px; transition: color 0.15s; }
.footer ul a:hover { color: var(--lime); }
.footer .brand { color: white; }
.footer .brand .brand-sub { color: #b8bdaf; }
.footer .about { color: #b8bdaf; font-size: 14px; max-width: 32ch; margin-top: 12px; line-height: 1.6; }
.footer-bottom {
    max-width: 1180px;
    margin: 36px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    color: #8a918a;
    font-size: 12px;
}
.disclaimer {
    max-width: 60ch;
    text-align: right;
    line-height: 1.55;
}
@media (max-width: 880px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .disclaimer { text-align: left; }
}
@media (max-width: 540px) {
    .footer-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Alerts / Empty states / Misc
   ========================================================================== */
.alert {
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 14px;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.alert-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    flex-shrink: 0;
    font-size: 13px;
}
.alert.success { background: var(--ok); border-color: #b9e2a4; color: var(--ok-text); }
.alert.success .alert-icon { background: #6bb43a; color: white; }
.alert.warn { background: var(--warn); border-color: #f0d68b; color: var(--warn-text); }
.alert.warn .alert-icon { background: #d99e00; color: white; }
.alert.error { background: var(--danger); border-color: #f0b39e; color: var(--danger-text); }
.alert.error .alert-icon { background: #c64a26; color: white; }
.alert.info { background: var(--info); border-color: #b3d4f3; color: var(--info-text); }
.alert.info .alert-icon { background: #2a6ec1; color: white; }
.alert h4 { color: inherit; margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 800; }
.alert p { color: inherit; opacity: 0.85; margin: 0; font-size: 13px; }

.empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty .icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lime-soft);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    font-size: 28px;
}
.empty h3 { margin-bottom: 6px; }
.empty p { max-width: 36ch; margin: 0 auto 18px; }

/* Step indicator */
.steps {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}
.step {
    flex: 1;
    background: var(--line-soft);
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
}
.step.active { background: var(--lime); }
.step.done { background: var(--black); }
.steps-labels {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
.steps-labels > div { flex: 1; }
.steps-labels .now { color: var(--ink); font-weight: 800; }

/* Filter chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.chip {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
}
.chip:hover { border-color: var(--muted-2); }
.chip.active { background: var(--black); color: var(--lime); border-color: var(--black); }

/* Stat row */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}
.stat .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.stat .val { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin-top: 4px; }
.stat .delta { font-size: 12px; color: var(--ok-text); font-weight: 700; margin-top: 2px; }
.stat .delta.down { color: var(--danger-text); }

/* Search input */
.search {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 16px 11px 40px;
    font-size: 14px;
    width: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f665e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
}

/* QR placeholder */
.qr {
    width: 200px;
    height: 200px;
    background:
        linear-gradient(45deg, var(--ink) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(-45deg, var(--ink) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(45deg, transparent 75%, var(--ink) 75%) 0 0/16px 16px,
        linear-gradient(-45deg, transparent 75%, var(--ink) 75%) 0 0/16px 16px,
        white;
    border: 12px solid white;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line);
    margin: 0 auto;
    position: relative;
}
.qr::after {
    content: 'B';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    background: var(--lime);
    color: var(--black);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 22px;
    border: 4px solid white;
}

/* Big icon badge */
.icon-badge {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    font-size: 38px;
    font-weight: 900;
}
.icon-badge.dark { background: var(--black); color: var(--lime); }

/* Code-like field (copy box) */
.copy-box {
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    word-break: break-all;
}

/* Detail rows */
.dl {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dl > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}
.dl > div:last-child { border-bottom: 0; }
.dl .k { color: var(--muted); font-weight: 600; }
.dl .v { color: var(--ink); font-weight: 700; text-align: right; }

/* Two-column page layout (form + summary) */
.split-page {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 880px) { .split-page { grid-template-columns: 1fr; } }
.summary-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: sticky;
    top: 116px;
    box-shadow: var(--shadow);
}

/* FAQ details */
details.faq {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 8px;
}
details.faq summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ink);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    color: var(--muted);
    transition: transform 0.2s;
}
details.faq[open] summary::after { content: '−'; }
details.faq p { margin-top: 10px; margin-bottom: 0; }

/* Sitemap groups */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 880px) { .sitemap-grid { grid-template-columns: 1fr; } }
.sitemap-grid h4 { color: var(--ink); font-size: 13px; }
.sitemap-grid ul { list-style: none; }
.sitemap-grid ul li { padding: 4px 0; }
.sitemap-grid ul a {
    color: var(--ink-2);
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 8px;
    display: inline-block;
}
.sitemap-grid ul a:hover { background: var(--lime-soft); color: var(--ink); }

/* Toolbar */
.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar .search { flex: 1; min-width: 200px; }

/* Helpers */
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex.between { justify-content: space-between; }
.flex.col { flex-direction: column; align-items: stretch; }
.gap-sm { gap: 8px; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 14px; }
.mt-4 { margin-top: 28px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 14px; }
.hide-mobile { display: initial; }
.show-mobile { display: none; }
@media (max-width: 720px) {
    .hide-mobile { display: none; }
    .show-mobile { display: initial; }
}

/* Print-friendly fallback */
@media print {
    .topbar, .footer, .sidebar { display: none; }
    body { background: var(--card); }
}

/* ==========================================================================
   v3 — Componentes do site oficial (blaxxpontos.netlify.app)
   ========================================================================== */

/* Hero com stats card preto sobreposto (estilo home oficial) */
.hero-v3 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 56px 0 28px;
}
.hero-v3 h1 {
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 900;
}
.hero-v3 h1 .accent {
    color: #6f8a18;
    background: linear-gradient(180deg, transparent 60%, var(--lime-soft) 60%);
    padding: 0 4px;
}
.hero-v3 .lead {
    font-size: 18px;
    color: var(--muted);
    margin-top: 18px;
    max-width: 56ch;
}
.hero-v3 .stats-card {
    background: var(--black);
    color: white;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 30px 80px rgba(8,9,7,.18);
    position: relative;
    overflow: hidden;
}
.hero-v3 .stats-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 320px at 80% -20%, rgba(89,253,39,.16), transparent 60%);
    pointer-events: none;
}
.hero-v3 .stats-card .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.hero-v3 .stats-card .head .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #9ea59c;
}
.hero-v3 .stats-card .head .pill {
    background: var(--lime);
    color: var(--black);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.hero-v3 .stats-card .big-num {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: white;
}
.hero-v3 .stats-card .big-num small {
    font-size: 16px;
    font-weight: 600;
    color: #9ea59c;
    margin-left: 8px;
}
.hero-v3 .stats-card .equiv {
    color: #9ea59c;
    margin-top: 8px;
    font-size: 14px;
}
.hero-v3 .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #1f221c;
    position: relative;
    z-index: 1;
}
.hero-v3 .stats-grid > div {
    text-align: left;
}
.hero-v3 .stats-grid .k {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9ea59c;
}
.hero-v3 .stats-grid .v {
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin-top: 4px;
}
.hero-v3 .stats-grid .v.lime {
    color: var(--lime);
}

@media (max-width: 880px) {
    .hero-v3 {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 16px;
    }
    .hero-v3 .stats-card .big-num { font-size: 44px; }
    .hero-v3 .stats-grid .v { font-size: 18px; }
}

/* Trust kicker (com checkmark verde) */
.kicker-trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px 8px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 18px;
}
.kicker-trust .ck {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
}

/* Marcadores geométricos (substituem emojis em parte das telas) */
.glyph {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--lime-soft);
    color: var(--ink);
    font-size: 20px;
    font-weight: 900;
    border: 1px solid var(--lime);
}
.glyph.dark {
    background: var(--black);
    color: var(--lime);
    border-color: var(--black);
}
.glyph.solid {
    background: var(--lime);
    color: var(--black);
    border-color: var(--lime);
}

/* Step number (01 / 02 / 03) */
.step-num {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 10px;
    display: block;
}
.step-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all .2s;
}
.step-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--lime);
}
.step-card .glyph {
    margin-bottom: 16px;
}
.step-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

/* Marketplace card de resgate (estilo oficial) */
.market-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all .2s;
    text-align: left;
}
.market-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--lime);
}
.market-card .tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}
/* Logo do parceiro no topo do card de beneficio — Clearbit com proporcao
   preservada (object-fit contain). Tamanho compacto pra nao dominar o card. */
.market-card .market-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 6px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 4px;
}
.market-card .market-logo img,
.market-card .market-logo .partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.market-card .market-logo .partner-logo-fallback {
    font-size: 28px;
    line-height: 1;
}
.market-card .market-partner {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    margin-top: -8px;
}

/* Logo hero na pagina detalhe-parceiro — 96x96px, fundo branco, scroll
   ate o topo do card .band-dark pra dar destaque visual. */
.partner-hero-logo {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    padding: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.partner-hero-logo img,
.partner-hero-logo .partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.partner-hero-logo .partner-logo-fallback {
    font-size: 48px;
    line-height: 1;
}
.market-card .tag-row .glyph-sm {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--lime-soft);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    color: var(--ink);
}
.market-card h3 {
    font-size: 18px;
    line-height: 1.3;
}
.market-card .pts {
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.02em;
}
.market-card .pts small {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-left: 4px;
}
.market-card .market-cta {
    margin-top: auto;
    background: var(--ink);
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: all .15s;
}
.market-card:hover .market-cta {
    background: var(--lime);
    color: var(--black);
}

/* B2B stats inline (R$5k mínimo / API integração / D+1 / BI relatórios) */
.b2b-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.b2b-stats > div {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}
.b2b-stats .v {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--ink);
}
.b2b-stats .k {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
    font-weight: 600;
}
@media (max-width: 720px) {
    .b2b-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Dashboard parceiro (na home / vender-pontos) */
.partner-dash {
    background: var(--black);
    color: white;
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.partner-dash::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 280px at 90% 0, rgba(89,253,39,.14), transparent 55%);
    pointer-events: none;
}
.partner-dash .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #9ea59c;
    position: relative;
    z-index: 1;
}
.partner-dash h3 {
    color: white;
    font-size: 22px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}
.partner-dash .grid-kpi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}
.partner-dash .grid-kpi > div {
    border-top: 1px solid #1f221c;
    padding-top: 14px;
}
.partner-dash .grid-kpi .k {
    font-size: 13px;
    color: #9ea59c;
    font-weight: 500;
}
.partner-dash .grid-kpi .v {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: white;
    margin-top: 2px;
}
.partner-dash .grid-kpi .v.lime {
    color: var(--lime);
}

/* Categorias parceiros (chips grandes) */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.cat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    transition: all .2s;
}
.cat-card:hover {
    border-color: var(--lime);
    background: var(--lime-soft);
    transform: translateY(-2px);
}
.cat-card .glyph {
    margin: 0 auto 12px;
}
.cat-card h4 {
    font-size: 15px;
    color: var(--ink);
}
@media (max-width: 720px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Pricing pacotes (com badge "recomendado") */
.pricing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 980px) {
    .pricing { grid-template-columns: repeat(2, 1fr); }
}
.price-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: all .2s;
}
.price-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.price-card .pname {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--muted);
}
.price-card .price {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1.1;
    margin: 4px 0;
}
.price-card .pts-line {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}
.price-card .bonus {
    font-size: 13px;
    color: #6f8a18;
    font-weight: 700;
}
.price-card .button {
    margin-top: 14px;
}
.price-card.featured {
    background: var(--black);
    color: white;
    border-color: var(--black);
    box-shadow: var(--shadow-lg);
}
.price-card.featured .pname { color: var(--lime); }
.price-card.featured .price,
.price-card.featured .pts-line { color: white; }
.price-card.featured .bonus { color: var(--lime); }
.price-card .ribbon {
    position: absolute;
    top: -10px;
    right: 18px;
    background: var(--lime);
    color: var(--black);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

/* Section heading (estilo oficial: kicker + h2 grande) */
.sec-head {
    margin-bottom: 28px;
    max-width: 760px;
}
.sec-head .eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800;
    color: #6f8a18;
    margin-bottom: 8px;
}
.sec-head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.sec-head p {
    color: var(--muted);
    font-size: 16px;
    margin-top: 10px;
    max-width: 60ch;
}

/* Side-by-side text+image-ish */
.split-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 880px) {
    .split-feature { grid-template-columns: 1fr; gap: 32px; }
}

/* Referenced visual marks for cards (replacing some emojis) */
.mark-glyph {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--lime);
    color: var(--black);
    font-weight: 900;
    font-size: 16px;
}

/* ============================================================ */
/* MOBILE / IPHONE OPTIMIZATIONS (≤480px)                       */
/* ============================================================ */
@media (max-width: 480px) {

    /* Base typography scaling */
    html { font-size: 15px; }
    body { -webkit-text-size-adjust: 100%; }

    h1 { font-size: 30px !important; line-height: 1.15; letter-spacing: -0.025em; }
    h2 { font-size: 22px !important; line-height: 1.2; }
    h3 { font-size: 17px !important; }
    h4 { font-size: 13px !important; }

    .lead { font-size: 16px !important; line-height: 1.55; }

    /* Containers — keep edge-to-edge feel */
    .shell, .app-shell {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .section { margin: 28px 0 !important; }
    .page-head { padding: 18px 0 14px !important; }
    .page-head h1 { font-size: 26px !important; }

    /* Topbar (header) */
    .topbar { padding: 12px 0; }
    .topbar .nav {
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .brand { font-size: 14px; }
    .brand .mark { min-width: 54px; height: 30px; font-size: 14px; padding: 0 8px; }
    .brand-sub { display: none; }

    /* Public nav links — hide and provide condensed inline */
    .topbar .links { display: none; }
    .topbar .actions { gap: 6px; flex-shrink: 0; }
    .topbar .actions .button.sm { padding: 8px 12px; font-size: 13px; }
    .topbar .actions .button.ghost { display: none; }

    /* Logged header bits */
    .topbar .user-pill { padding: 6px 10px; font-size: 13px; }
    .topbar .user-pill .avatar { width: 26px; height: 26px; font-size: 11px; }
    .topbar .user-pill span:not(.avatar) { display: none; }
    .topbar .notif { width: 36px; height: 36px; }

    /* Sidebar collapses to horizontal scroll bar above content */
    .app-shell {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .sidebar {
        position: static !important;
        width: 100% !important;
        padding: 12px !important;
        margin-bottom: 8px;
    }
    .sidebar .me { display: none; }
    .sidebar nav {
        display: flex !important;
        /* REGRA: nav mobile empilha; nunca vira tira rolável. */
        flex-direction: column !important;
        gap: 6px !important;
        overflow-x: hidden;
        padding-bottom: 6px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
        scrollbar-width: none;
    }
    .sidebar nav::-webkit-scrollbar { display: none; }
    .sidebar nav a {
        flex-shrink: 0;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
        background: var(--bg);
        white-space: nowrap;
    }
    .sidebar nav a.active {
        background: var(--ink) !important;
        color: var(--lime) !important;
    }
    .sidebar nav a span { display: none; } /* hide icons if any */

    /* Hero collapses */
    .hero {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 24px !important;
    }
    .hero-box h1 { font-size: 32px !important; }
    .hero-side { padding: 20px !important; }

    /* All multi-column grids → single column */
    .grid,
    .grid.two,
    .grid.three,
    .grid.four,
    .split-page,
    .sitemap-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Cards */
    .card { padding: 20px !important; border-radius: 16px !important; }
    .card-icon { width: 40px; height: 40px; font-size: 16px; }
    .card.lime, .card.featured { padding: 22px !important; }

    .summary-card {
        position: static !important;
        padding: 20px !important;
    }

    /* Wallet */
    .wallet { padding: 22px !important; }
    .wallet .big { font-size: 38px !important; }

    /* Buttons full-width on mobile by default for primary actions */
    .button { padding: 12px 18px; font-size: 15px; }
    .button.lg { padding: 14px 20px; font-size: 16px; }
    .button.sm { padding: 8px 12px; font-size: 13px; }

    /* Action rows wrap and stretch */
    .actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .actions .button {
        width: 100%;
        justify-content: center;
    }

    /* Forms */
    .form-row.split { grid-template-columns: 1fr !important; gap: 0 !important; }
    .form-row input,
    .form-row select,
    .form-row textarea {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
        padding: 14px 14px !important;
    }
    .form-row label { font-size: 13px; }
    .search { font-size: 16px !important; padding: 14px 14px 14px 42px !important; }

    /* Tables → already convert to cards via data-label, tighten spacing */
    .table { display: block; }
    .table thead { display: none; }
    .table tbody, .table tr { display: block; }
    .table tr {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 10px;
    }
    .table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0 !important;
        border: none !important;
        text-align: right !important;
        font-size: 14px;
    }
    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex-shrink: 0;
    }
    .table td:empty,
    .table td[data-label=""] { justify-content: flex-end; }
    .table td[data-label=""]::before { display: none; }
    .table td.center, .table td.right { text-align: right !important; }

    /* Chips row scroll horizontally instead of wrapping */
    .chips {
        /* Quebram em várias linhas em vez de rolar lateralmente. */
        flex-wrap: wrap !important;
        overflow-x: hidden;
        margin: 0 -16px;
        padding: 4px 16px;
        scrollbar-width: none;
    }
    .chips::-webkit-scrollbar { display: none; }
    .chip { flex-shrink: 0; }

    /* Reward / partner / campaign cards: full width single column */
    .reward-card .reward-img { height: 130px; font-size: 48px; }
    .reward-card .reward-body { padding: 16px; }
    .partner-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
    .partner-card .partner-logo { width: 48px; height: 48px; font-size: 16px; flex-shrink: 0; }

    /* Campaign cover */
    .campaign-cover { padding: 22px !important; }
    .campaign-cover h3 { font-size: 22px !important; }

    /* Dark band */
    .band-dark { padding: 28px 20px !important; border-radius: 18px; }
    .band-dark .grid { gap: 20px !important; }

    /* Auth wrap (login/cadastro) */
    .auth-wrap {
        max-width: 100% !important;
        margin: 20px 16px !important;
        padding: 24px 22px !important;
        border-radius: 18px !important;
    }
    .auth-wrap h1 { font-size: 26px !important; }

    /* Footer */
    .footer { padding: 32px 0 24px; }
    .footer .grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
    .footer .grid > div { padding-bottom: 18px; border-bottom: 1px solid #1a1d18; }
    .footer .grid > div:last-child { border-bottom: 0; }
    .footer .legal {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        font-size: 11px;
    }

    /* Stats row two-up */
    .stat-row { grid-template-columns: 1fr 1fr !important; }
    .stat-row .stat { padding: 16px !important; }
    .stat-row .stat .v { font-size: 22px !important; }

    /* Empty state */
    .empty { padding: 36px 20px !important; }
    .empty .icon { width: 56px; height: 56px; font-size: 26px; }

    /* Icon badges (success/error pages) */
    .icon-badge { width: 64px; height: 64px; font-size: 28px; }

    /* QR */
    .qr { width: 180px !important; height: 180px !important; }

    /* Copy box wraps the long string */
    .copy-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
        word-break: break-all;
        font-size: 13px;
    }

    /* Crumbs smaller and wrapping */
    .crumbs { font-size: 12px; flex-wrap: wrap; }

    /* DL list spacing tighter */
    .dl > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 10px 0;
    }
    .dl .v { font-size: 15px; text-align: left; }

    /* Onboarding / multi-step */
    .step-dots { gap: 8px; }

    /* Plain pages center */
    body > main { padding: 24px 16px !important; }

    /* 404 large numbers */
    body > main > div[style*="font-size:120px"] { font-size: 80px !important; }

    /* Maintenance page heading */
    body[style*="background:var(--black)"] h1 { font-size: 32px !important; }

    /* Ticket conversation rows */
    .card .flex[style*="gap:14px"][style*="align-items:flex-start"] {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* Floating "Olá, Mariana" greeting */
    .topbar h1, .topbar .greet { font-size: 14px; }

    /* Reduce hero-side avatar */
    .hero-side .avatar { width: 64px !important; height: 64px !important; font-size: 26px !important; }

    /* Big amount displays inside cards */
    div[style*="font-size:48px"] { font-size: 36px !important; }
    div[style*="font-size:42px"] { font-size: 30px !important; }
    div[style*="font-size:36px"] { font-size: 28px !important; }

    /* Buttons inside .flex.between go full-width */
    .flex.between {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Sticky checkout bar feel — keep summary card readable */
    .summary-card .actions .button { width: 100%; }
}

/* Extra tweaks for very small phones (≤360px, like iPhone SE 1st gen) */
@media (max-width: 360px) {
    h1 { font-size: 26px !important; }
    .hero-box h1 { font-size: 28px !important; }
    .wallet .big { font-size: 32px !important; }
    .shell, .app-shell { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Safe-area insets for iPhone notch / home indicator */
@supports (padding: max(0px)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
    .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Sprint 2 · P4: anti-flash do mock Mariana Costa
   ==========================================================================
   45 HTMLs do site Netlify tem dados hardcoded da usuaria demo
   ("Olá, Mariana", "84.750 pts", "Plano Plus") que sao substituidos pelo
   JS apos hidratar. Sem essa regra, o usuario logado ve a Mariana por uns
   100-300ms antes do replaceHardcoded() rodar.

   blaxx-app.js seta data-auth-loading="true" no <html> antes do bootstrap
   se houver token no sessionStorage. applyUserToShell() remove o atributo
   depois de popular dados reais. Spinner leve no centro como feedback.
   ========================================================================== */
html[data-auth-loading] body {
    visibility: hidden;
}
html[data-auth-loading] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--bg, #f6f8f2);
    z-index: 99999;
    visibility: visible;
}
html[data-auth-loading] body::after {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(0,0,0,0.10);
    border-top-color: var(--lime, #59FD27);
    border-radius: 50%;
    animation: bx-auth-spin 0.8s linear infinite;
    z-index: 100000;
    visibility: visible;
}
@keyframes bx-auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    html[data-auth-loading] body::after { animation: none; opacity: 0.5; }
}

/* Fail-safe: se applyUserToShell nunca rodar (bug ou JS desligado),
   o body fica visivel apos 3s. Evita travar a pagina pra sempre. */
@keyframes bx-auth-failsafe {
    0%, 99% { visibility: hidden; }
    100% { visibility: visible; }
}
html[data-auth-loading] body {
    animation: bx-auth-failsafe 3s linear forwards;
}

/* ==========================================================================
   Sprint 3 (S3-2) · Hamburger menu mobile (<880px)
   ==========================================================================
   Antes deste fix, .links sumia abaixo de 880px sem replacement — usuario
   mobile nao tinha nav alguma. Agora um botao hamburger fixo no topbar
   abre um drawer com todos os links + Entrar/Cadastre-se, com:
     - aria-expanded / aria-controls / role=dialog
     - foco trap (Tab cicla dentro do drawer)
     - ESC fecha
     - clique no backdrop fecha
     - body-scroll lock
     - respeita prefers-reduced-motion
   ========================================================================== */

/* Botao hamburger — so aparece < 880px */
.bx-hamburger {
    display: none;
    background: transparent;
    border: 1px solid rgba(8, 9, 7, 0.10);
    border-radius: 10px;
    width: 42px; height: 42px;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 120ms;
}
.bx-hamburger:hover { background: rgba(8,9,7,0.04); }
.bx-hamburger:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}
.bx-hamburger svg { width: 22px; height: 22px; }

@media (max-width: 880px) {
    .bx-hamburger { display: inline-flex; }
}

/* Drawer + backdrop */
.bx-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 9000;
}
.bx-drawer-backdrop[data-open] { opacity: 1; pointer-events: auto; }

.bx-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: var(--card, #fff);
    box-shadow: -16px 0 40px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 24px;
    overflow-y: auto;
}
.bx-drawer[data-open] { transform: translateX(0); }
.bx-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.bx-drawer-close {
    background: transparent;
    border: none;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 22px;
    color: var(--ink);
}
.bx-drawer-close:hover { background: rgba(0,0,0,0.05); }
.bx-drawer nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bx-drawer nav a {
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: background 120ms;
}
.bx-drawer nav a:hover { background: rgba(8,9,7,0.05); }
.bx-drawer nav a.active {
    background: var(--black);
    color: var(--lime);
    font-weight: 600;
}
.bx-drawer .bx-drawer-cta {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bx-drawer .bx-drawer-cta .button {
    width: 100%;
    justify-content: center;
}

/* Body lock quando drawer aberto */
body.bx-no-scroll { overflow: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bx-drawer, .bx-drawer-backdrop {
        transition: none;
    }
}


/* ==========================================================================
   NEO-BRUTAL CLARO — theme override global (área logada)
   Fundo papel #E8E6DD, superfícies claras com borda preta grossa + sombra
   dura (sem blur), Space Grotesk (display) + JetBrains Mono (dados/labels),
   neon #59FD27 como acento, cantos retos. Mesma linguagem de blaxx-neon.html.
   Preserva #5AB800 (--lime-dark) e #F0FAD9 (--lime-soft) — regra do wordmark.
   ========================================================================== */
:root{
  --paper:#E8E6DD;
  --bg:#E8E6DD; --bg-warm:#EFEEE6; --card:#F4F4F0;
  --black:#0A0B0E;
  --ink:#0A0B0E; --ink-2:#13161C;
  --muted:#5b6058; --muted-2:#6d7178;
  --line:#0A0B0E; --line-soft:#c9c6ba;
  --lime:#59FD27; --lime-2:#59FD27; --lime-soft:#F0FAD9; --lime-bg:#eef6d6; --lime-dark:#5AB800;
  --ok:#dff5cf; --ok-text:#1f7a12; --warn:#f6edcf; --warn-text:#8a6500;
  --danger:#f4ddd2; --danger-text:#a83417; --info:#d8e6f2; --info-text:#1c4f87;
  /* Brutalismo ARREDONDADO (decisão de 01/08): borda tinta grossa + sombra
     dura sem blur continuam sendo a assinatura, mas os cantos são macios.
     Esta folha ficou em 0 enquanto styles.css já usava a escala arredondada —
     o usuário via cantos retos em "Comprar pontos"/"Enviar pontos" e cantos
     macios no resto da área logada. Mesma escala das duas folhas agora. */
  --radius-sm:10px; --radius:18px; --radius-lg:18px; --radius-xl:24px;
  --shadow-sm:4px 4px 0 var(--black); --shadow:6px 6px 0 var(--black); --shadow-lg:8px 8px 0 var(--black);
  --grotesk:'Space Grotesk','Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,'Courier New',monospace;
}
body{ background:var(--paper) !important; color:var(--ink); font-family:var(--grotesk); }
h1,h2,h3,h4,h5,h6,.brand{ color:var(--ink); font-family:var(--grotesk); }
.brand-sub{ color:var(--muted); }
::selection{ background:var(--lime); color:var(--black); }
:focus-visible{ outline:3px solid var(--black); outline-offset:2px; }

/* ---- Topbar / nav — MENU PRETO ----------------------------------------
   A logo oficial (pacote fundo preto) tem o "Bla" em BRANCO: ela só existe
   sobre superfície escura. Esta topbar era clara (papel) e resolvia isso com
   um remendo — uma caixinha preta em volta da marca, ilhada na barra clara.
   Agora a barra inteira é preta, que é o suporte que a marca pede, e a caixa
   deixa de ser necessária. Mesma leitura do chrome.js (topbar --chrome
   #0A0B0E) usado pelas outras telas: uma área logada, um menu só.          */
.topbar{ background:var(--black); backdrop-filter:none; -webkit-backdrop-filter:none;
         border-bottom:4px solid var(--black); }

/* A marca deixa de ser TEXTO dentro de um bloco e passa a ser a arte oficial.
   O texto continua no HTML (fica no leitor de tela); só some visualmente. */
.mark{
  width:134px; height:44px; min-width:0; padding:0;
  background:transparent url('marca/blaxx-wordmark.svg') left center / contain no-repeat;
  border-radius:0; box-shadow:none;
  font-size:0; color:transparent;
}
.links a{ border-radius:var(--radius-sm); color:#cfd2cb; }
.links a:hover{ background:rgba(244,244,240,.12); color:#fff; }
/* Item ativo. Atenção ao mexer: nestas 51 telas o item ativo NÃO usa classe
   `.active` — cada página traz no próprio <style> um
   `[data-link="<tela>"]{ background:var(--black)!important; color:var(--lime)!important }`,
   com o valor do atributo diferente em cada arquivo. Não há como preenchê-lo
   por uma regra global, porque o seletor depende do nome da tela.
   Efeito na barra preta: o `background:black` some (preto sobre preto) e sobra
   o texto NEON — 14,5:1 contra a barra, bem destacado dos itens inativos
   (#cfd2cb, 12,9:1). Legível e coerente; só não vira pílula preenchida.
   A regra abaixo cobre quem usa `.active` de verdade (shell do chrome.js). */
.topbar .links a.active{
  background:var(--lime) !important; color:var(--black) !important; font-weight:700;
}

/* ---- Sidebar (logado) — preta, estilo protótipo ---- */
.sidebar{ background:var(--black); border:4px solid var(--black); border-radius:var(--radius); box-shadow:var(--shadow); }
.side-user{ border-bottom-color:#22252b; }
.side-user-name{ color:#F4F4F0; }
.side-user-tier{ font-family:var(--mono); color:#cfd2cb; }
.avatar{ border-radius:999px; border:2px solid var(--lime); background:#0f1216; color:var(--lime); }
.side-nav a{ border-radius:var(--radius-sm); color:#cfd2cb; font-weight:600; }
.side-nav a:hover{ background:#22252b; color:#fff; }
.side-nav a.active{ background:var(--lime); color:var(--black); border:2px solid var(--black); font-weight:700; box-shadow:4px 4px 0 #0f1216; }
.side-nav a.active .ic{ background:transparent; color:var(--black); }
.side-foot{ border-top-color:#22252b; }

/* ---- Cards / panels ---- */
.card,.panel{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius); box-shadow:var(--shadow); }
.card.compact{ box-shadow:var(--shadow-sm); }
.card.lime{ background:var(--lime); border-color:var(--black); }
.card.lime h1,.card.lime h2,.card.lime h3,.card.lime h4,.card.lime p{ color:var(--black); }
.card.featured{ background:var(--black); color:#F4F4F0; border-color:var(--black); }
.wallet{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius); box-shadow:var(--shadow); }
.wallet.dark{ background:var(--black); color:#F4F4F0; border-color:var(--black); }
.summary-card{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---- Buttons ---- */
.button,button.button{
  background:var(--lime); color:var(--black);
  border:3px solid var(--black); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  transition:transform .08s, box-shadow .08s;
}
.button:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--black); }
.button.secondary{ background:var(--card); color:var(--black); border:3px solid var(--black); box-shadow:var(--shadow-sm); }
.button.secondary:hover{ background:var(--paper); }
.button.dark{ background:var(--black); color:var(--lime); border:3px solid var(--black); box-shadow:var(--shadow-sm); }
.button.ghost{ background:var(--card); color:var(--black); border:3px solid var(--black); box-shadow:var(--shadow-sm); }
.button.ghost:hover{ background:var(--paper); }
.button.danger{ background:var(--danger); color:var(--danger-text); border:3px solid var(--black); box-shadow:var(--shadow-sm); }

/* ---- Kicker / tags / status ---- */
.kicker{ background:var(--lime-soft); color:var(--black); border:2px solid var(--black); border-radius:999px; font-family:var(--mono); text-transform:uppercase; }
.tag,.status{ border-radius:999px; border:2px solid var(--black); }
.chip{ background:var(--card); border:2px solid var(--black); border-radius:var(--radius-sm); color:var(--ink-2); font-weight:700; }
.chip:hover{ border-color:var(--black); background:var(--paper); }
.chip.active{ background:var(--lime); color:var(--black); border-color:var(--black); }

/* ---- Progress ---- */
.progress{ background:var(--card); border:2px solid var(--black); border-radius:var(--radius-sm); height:16px; }
.progress > span{ background:var(--lime); border-radius:var(--radius-sm); }
.progress-row{ font-family:var(--mono); color:var(--muted); }

/* ---- Tables ---- */
.table{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); }
.table th{ background:var(--card); border-bottom:3px solid var(--black); color:var(--muted); font-family:var(--mono); text-transform:uppercase; }
.table td{ border-bottom:2px solid var(--line-soft); }
.table tr:hover td{ background:var(--bg-warm); }
.amount-pos{ color:var(--ok-text); font-weight:700; }
/* Terracota como no protótipo (.amt.neg) — em tinta preta o valor negativo
   ficava indistinguível de um valor neutro na tabela do extrato. */
.amount-neg{ color:var(--danger-text); font-weight:700; }
@media (max-width:720px){
  .table tr{ border:3px solid var(--black); border-radius:var(--radius-sm); }
}

/* ---- Forms ---- */
label{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--muted); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], input[type="date"], select, textarea{
  background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); color:var(--ink); font-weight:600;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--black); box-shadow:4px 4px 0 var(--lime); }

/* ---- Stat / mini / label ---- */
.stat{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); }
.stat .lbl,.wallet .label,.mini .lbl,.crumbs,.dl .k{ font-family:var(--mono); }
.mini{ background:var(--lime-soft); border:2px solid var(--black); border-radius:var(--radius-sm); }

/* ---- Marketplace / partner / campaign / step / cat / price / reward cards ---- */
.market-card,.partner-card,.campaign-card,.step-card,.cat-card,.price-card,.reward-card{
  background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}
.market-card:hover,.partner-card:hover,.step-card:hover,.cat-card:hover,.price-card:hover,.reward-card:hover{
  transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--lime); border-color:var(--black);
}
.cat-card:hover{ background:var(--lime-soft); }
.campaign-cover{ background:var(--black); border-radius:var(--radius-sm); }
.campaign-cover::after{ display:none; }
.reward-img{ border-bottom:3px solid var(--black); border-radius:var(--radius-sm); background:var(--lime-soft); }
.partner-logo,.market-card .market-logo,.partner-hero-logo{ border:2px solid var(--black); border-radius:var(--radius-sm); }
.market-card .market-cta{ border-radius:var(--radius-sm); background:var(--black); color:#F4F4F0; }
.market-card:hover .market-cta{ background:var(--lime); color:var(--black); }
.price-card.featured{ background:var(--black); color:#F4F4F0; border-color:var(--black); box-shadow:var(--shadow); }
.price-card .ribbon,.price-card .badge-top{ border-radius:var(--radius-sm); border:2px solid var(--black); }

/* ---- Glyphs / marks ---- */
.mark-glyph,.glyph{ border-radius:var(--radius-sm); border:2px solid var(--black); background:var(--lime); color:var(--black); }
.glyph.dark{ background:var(--black); color:var(--lime); border-color:var(--black); }
.glyph.solid{ background:var(--lime); color:var(--black); }
.card-icon,.icon-badge{ border-radius:var(--radius-sm); border:2px solid var(--black); }
.icon-badge.dark{ background:var(--black); color:var(--lime); }

/* ---- Alerts / empty / misc ---- */
.alert{ border-radius:var(--radius-sm); border:3px solid var(--black); }
.empty{ background:var(--card); border:3px dashed var(--black); border-radius:var(--radius-sm); }
.empty .icon{ border-radius:var(--radius-sm); border:2px solid var(--black); background:var(--lime-soft); }
details.faq{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); }
.copy-box{ background:var(--card); border:3px dashed var(--black); border-radius:var(--radius-sm); }

/* ---- Auth ---- */
.auth-card{ background:var(--card); border:3px solid var(--black); border-radius:var(--radius-sm); box-shadow:var(--shadow); }

/* ---- Footer (mantém preto, alinha à moldura brutal) ---- */
.footer{ border-top:4px solid var(--black); }

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE — sidebar vira barra horizontal de atalhos (correção 2026-08-01)

   Bug corrigido: as regras existentes miravam `.sidebar nav`, mas o menu é
   `ul.side-nav`. O seletor nunca casava, então no celular a sidebar abria
   inteira (495px de menu + 210px de rodapé) e empurrava o conteúdo do painel
   para ~1019px — o usuário entrava e via só o menu, não o saldo.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr !important; gap: 12px !important; }

  .sidebar {
    position: static !important;
    width: 100% !important;
    /* min-width:0 é obrigatório: item de grid tem min-width:auto por padrão,
       então o conteúdo (menu com 10 itens em linha) esticava a sidebar para
       ~1413px e os itens além da borda ficavam INALCANÇÁVEIS, porque o
       overflow-x do nav nunca chegava a rolar. */
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 0 !important;
    margin-bottom: 4px;
    overflow: hidden;
  }

  /* O cartão de usuário já aparece na topbar — redundante aqui. */
  .sidebar .side-user { display: none !important; }

  /* REGRA DO PROJETO: no mobile a navegação NUNCA rola horizontalmente.
     O padrão é hamburger + gaveta (drawer). A tira rolável anterior escondia
     itens fora da borda — quem não descobria o gesto de arrastar simplesmente
     não alcançava metade do menu. Agora o menu EMPILHA em coluna, dentro da
     gaveta, e cada item ocupa a largura toda. */
  /* Empilhar em coluna resolveu a rolagem horizontal, mas criou outro
     problema: 14 itens x 50px = 700px de menu ANTES do conteúdo. Medido em
     390px: a sidebar ocupava 837px e o painel só começava em 1016px — mais
     de uma tela inteira de menu antes do saldo. Quem logava via só o menu.

     Correção sem reintroduzir rolagem lateral: a lista vira uma GRADE que
     quebra linha. Duas colunas, item compacto — o menu inteiro cabe em
     ~200px e continua com todos os 14 itens alcançáveis, sem arrastar nada. */
  .sidebar .side-nav {
    min-width: 0;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    overflow-x: hidden;                  /* trava da regra do projeto */
    padding: 2px 14px;
    margin: 0;
    list-style: none;
  }
  .sidebar .side-nav > li { min-width: 0; }
  .sidebar .side-nav > li > a {
    padding: 11px 12px !important;
    min-height: 44px;                    /* alvo de toque */
    display: flex; align-items: center; gap: 9px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* O conteúdo vem ANTES do menu. É a correção que resolve a queixa de fato:
     ao entrar, o usuário vê o painel, não a lista de navegação. */
  .app-shell > .sidebar, .shell > .sidebar { order: 2; }
  .app-shell > .main, .app-shell > main,
  .shell > .main, .shell > main { order: 1; }

  /* Rodapé da sidebar é redundante no mobile — o rodapé do site já vem logo
     abaixo com os mesmos links. */
  .sidebar .side-foot { display: none !important; }
  .sidebar .side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    white-space: normal;                 /* pode quebrar; não força largura */
    overflow-wrap: anywhere;
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 48px;                    /* alvo de toque confortável */
    border: 2px solid var(--ink, #0A0B0E);
    box-shadow: 3px 3px 0 var(--ink, #0A0B0E);
  }
  .sidebar .side-foot { flex-direction: column; }
  .sidebar .side-foot a { width: 100%; }

  /* Rodapé do menu (sair, ajuda) desce para o fim da página. */
  .sidebar .side-foot {
    display: flex !important;
    gap: 8px;
    padding: 0 14px;
    margin-top: 8px;
  }
  .sidebar .side-foot a { min-height: 44px; display: flex; align-items: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CORREÇÃO DE OVERFLOW EM TELAS ESTREITAS (2026-08-01)

   Itens de grid/flex têm `min-width: auto` por padrão, o que os impede de
   encolher abaixo da largura intrínseca do conteúdo. Resultado: em telas
   estreitas o `main` ficava mais largo que a viewport e a página vazava
   horizontalmente — medido em perfil, carteira, seguranca, ajuda,
   como-funciona, abrir-chamado e recuperar-senha (+21px a +126px a 320px).

   `min-width: 0` é a correção canônica. Aplicada nos containers de layout,
   não em tudo, para não afetar componentes que dependem de largura mínima.
   ───────────────────────────────────────────────────────────────────────── */
.app-shell > main,
.app-shell > .sidebar,
.shell > main {
  min-width: 0;
}

/* Conteúdo que não pode estourar a caixa: texto longo, URLs, código. */
@media (max-width: 520px) {
  main .card,
  main .grid,
  main .page-head,
  main table {
    min-width: 0;
    max-width: 100%;
  }
  /* Tabelas de extrato/histórico rolam dentro da própria caixa. */
  main table { display: block; overflow-x: auto; }
  /* Quebra palavras longas (e-mails, chaves PIX, IDs) em vez de esticar. */
  main .card, main p, main h1, main h2, main h3 { overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
  /* Linhas flex dentro de cards (título + valor, label + badge) quebram em
     vez de esticar o card. Sem isto, um rótulo longo empurra a caixa para
     além da viewport — medido em seguranca.html (+34px). */
  main .card > div,
  .card > div {
    min-width: 0;
    flex-wrap: wrap;
  }
  /* Links e texto monoespaçado longos (chaves, IDs, e-mails) quebram. */
  main a, main .mono, .mono, a.link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   REGRA DO PROJETO: NO MOBILE NUNCA HÁ ROLAGEM HORIZONTAL. (2026-08-01)

   Esta é uma garantia, não uma sugestão. Três camadas:

   1. `overflow-x: clip` no html/body — a rede de segurança. Usamos `clip` em
      vez de `hidden` porque `hidden` cria contexto de rolagem e quebra
      `position: sticky` de cabeçalhos. Fallback para `hidden` onde `clip`
      não existe.
   2. `min-width: 0` nos containers de layout — a CORREÇÃO de verdade. Sem
      ela o conteúdo só ficaria escondido pela camada 1, e o usuário perderia
      informação sem perceber.
   3. Quebra de palavra e reflow de linhas flex — evita que uma string longa
      (chave PIX, e-mail, ID) estique a caixa.

   Regressão: docs/operacao/scripts/audit_mobile.py falha o build se
   qualquer página voltar a rolar horizontalmente.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    overflow-x: clip;          /* sobrescreve onde houver suporte */
    max-width: 100%;
  }

  /* Nada pode ser mais largo que a tela. */
  img, svg, video, canvas, iframe, table, pre, code {
    max-width: 100%;
    height: auto;
  }
  pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

  /* Containers de layout encolhem (min-width:auto é o vilão silencioso). */
  main, aside, section, article, header, footer,
  .shell, .app-shell, .card, .grid, .row, .stack {
    min-width: 0;
  }

  /* Strings longas quebram em vez de esticar a caixa. */
  a, p, h1, h2, h3, h4, li, td, th, .mono, .lead {
    overflow-wrap: anywhere;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ALVOS DE TOQUE — mínimo 44px (WCAG 2.5.5 / guideline Apple e Google)

   Aplicado a controles de BLOCO. Links inline dentro de parágrafo ficam de
   fora de propósito: forçar 44px de altura neles quebraria o texto corrido.
   Vale também para conteúdo renderizado por JS (ex.: a lista de parceiros,
   que gera ~300 links dinamicamente e por isso não dá para corrigir no HTML).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  button,
  [role="button"],
  .btn, .button, .pill, .chip,
  input[type="submit"], input[type="button"],
  select,
  .card a, li > a, nav a, .side-nav a, .list a, .row > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Campos de formulário: 44px + 16px de fonte evita o zoom automático do
     iOS ao focar (o Safari amplia quando a fonte é menor que 16px). */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  textarea, select {
    min-height: 44px;
    font-size: 16px;
  }
  /* Ícone-botão isolado (fechar, menu, notificação). */
  .icon-btn, .notif, .menu-btn, .bx-hamburger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ==========================================================================
   Gaveta de navegação no mobile — assets/blaxx-nav.js
   --------------------------------------------------------------------------
   As páginas com topbar inline escondiam .links abaixo de 880px e não punham
   nada no lugar: no celular o usuário ficava sem navegação. O hamburger e a
   gaveta abaixo cobrem esse vão. O breakpoint é o MESMO que esconde .links —
   qualquer diferença criaria uma faixa de larguras sem menu nenhum.
   ========================================================================== */
.bxnav-burger { display: none; }

.bxnav-scrim {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(10, 11, 14, .6);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.bxnav-scrim.on { opacity: 1; pointer-events: auto; }

.bxnav-drawer {
    position: fixed; top: 0; right: 0; z-index: 200;
    width: min(86vw, 340px); height: 100%;
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 14px 28px;
    background: var(--black, #0A0B0E);
    border-left: 4px solid var(--lime, #59FD27);
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(100%); transition: transform .2s ease-out;
}
.bxnav-drawer.aberta { transform: translateX(0); }
.bxnav-drawer[hidden] { display: none; }

/* Superfície escura: texto papel (17,8:1). Neon aqui só como preenchimento —
   como cor de texto sobre claro ele reprova, e foi assim que o menu da landing
   ficou invisível. */
.bxnav-drawer a {
    display: block; padding: 13px 12px; min-height: 48px;
    font-family: var(--font-grotesk, inherit); font-weight: 700; font-size: 16px;
    color: #F4F4F0; text-decoration: none;
    border-bottom: 2px solid #23262c; overflow-wrap: anywhere;
}
.bxnav-drawer a:hover, .bxnav-drawer a:focus-visible { background: #16181d; }
.bxnav-drawer a[aria-current="page"] {
    background: var(--lime, #59FD27); color: var(--ink, #0A0B0E);
}

.bxnav-grupo {
    margin: 18px 12px 6px;
    font-family: var(--font-mono, monospace); font-size: 11px;
    letter-spacing: .09em; text-transform: uppercase;
    color: #8A929E;
}
.bxnav-grupo:first-of-type { margin-top: 8px; }

.bxnav-cta {
    margin-top: 14px; text-align: center;
    background: var(--lime, #59FD27); color: var(--ink, #0A0B0E) !important;
    border: 3px solid var(--lime, #59FD27); border-radius: var(--r-pill, 999px);
}
.bxnav-cta--vazado {
    margin-top: 10px;
    background: transparent; color: #F4F4F0 !important;
    border-color: #F4F4F0;
}

.bxnav-fechar {
    align-self: flex-end; width: 44px; height: 44px; flex: 0 0 44px;
    background: transparent; border: 2px solid #444; color: #F4F4F0;
    font-size: 24px; line-height: 1; cursor: pointer;
    border-radius: var(--r-pill, 999px);
}

@media (max-width: 880px) {
    .bxnav-burger {
        display: inline-flex; flex-direction: column; justify-content: center;
        gap: 4px; width: 44px; height: 44px; flex: 0 0 44px; padding: 0 11px;
        background: var(--lime, #59FD27); border: 3px solid var(--ink, #0A0B0E);
        border-radius: var(--r-pill, 999px); cursor: pointer;
    }
    .bxnav-burger span {
        display: block; width: 100%; height: 3px;
        background: var(--ink, #0A0B0E); border-radius: 2px;
    }
}

/* Lado da gaveta por estado de sessão — marcação posta no <html> pelo
   assets/blaxx-nav.js. Antes cada sistema decidia sozinho e a mesma área
   logada abria ora à esquerda (chrome.js), ora à direita (este e o
   blaxx-app.js), conforme a página em que o usuário estivesse.
     logado    → ESQUERDA
     visitante → DIREITA  (é o default desta folha)                        */
.bx-gaveta-esq .bxnav-drawer {
    right: auto; left: 0;
    border-left: 0; border-right: 4px solid var(--lime, #59FD27);
    transform: translateX(-100%);
}
.bx-gaveta-esq .bxnav-drawer.aberta { transform: translateX(0); }