/* ====== Estrutura: topo, menu, conteúdo, bilhete, barra inferior ====== */
.app{min-height:100vh;display:grid;grid-template-columns:var(--menu) minmax(0,1fr) var(--slip);grid-template-rows:var(--topbar) 1fr;grid-template-areas:"top top top" "menu main slip"}
.topbar{grid-area:top;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:0 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font:800 21px var(--display);letter-spacing:-.04em;white-space:nowrap}
.logo-mark{width:34px;height:34px;border-radius:11px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center}
.logo-mark svg{width:20px;height:20px}
.logo small{display:block;font:700 9px var(--font);letter-spacing:.2em;color:var(--faint);margin-top:2px;text-transform:uppercase}
.tabs-main{display:flex;gap:4px;margin-left:8px}
.tab-main{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);font-weight:700;color:var(--muted);white-space:nowrap;transition:.15s}
.tab-main:hover{color:var(--text);background:var(--surface-2)}
.tab-main.on{background:var(--surface-3);color:var(--text)}
.tab-main .live-dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 var(--hot);animation:pulse 1.6s infinite}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.search-btn,.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:.15s;position:relative}
.search-btn:hover,.icon-btn:hover{color:var(--text);border-color:var(--line-2)}
.bal{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 14px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.bal b{font:700 15px var(--display)}
.bal small{display:block;font:700 10px var(--font);letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.menu{grid-area:menu;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow:auto;padding:16px 12px 24px;border-right:1px solid var(--line);background:var(--bg)}
.menu h6{margin:18px 10px 8px;font:800 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.menu h6:first-child{margin-top:4px}
.mi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);font-weight:700;color:var(--muted);width:100%;text-align:left;transition:.15s}
.mi:hover{background:var(--surface-2);color:var(--text)}
.mi.on{background:var(--surface-3);color:var(--text)}
.mi .ic{font-size:21px}
.mi .count{margin-left:auto;font:700 12px var(--font);color:var(--faint)}
.mi .chev{margin-left:auto;font-size:14px;transition:.2s}
.mi[aria-expanded=true] .chev{transform:rotate(180deg)}
.sub{padding:2px 0 6px 22px;margin-left:21px;border-left:1px solid var(--line)}
.sub .mi{font-weight:600;font-size:14px;padding:8px 10px}
.main{grid-area:main;min-width:0;padding:22px 24px 80px}
.slip{grid-area:slip;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow:auto;border-left:1px solid var(--line);background:var(--bg);padding:16px}
.bottomnav{display:none}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;line-height:1.6}
.legal .row{gap:8px;margin-bottom:10px}
.badge18{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--faint);font:800 12px var(--font);color:var(--muted)}
.demo-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;background:var(--hot-soft);color:var(--hot);font:700 12px var(--font);letter-spacing:.02em;text-align:center}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

@media (max-width:1280px){.app{--slip:320px;--menu:224px}.tab-main{padding:9px 12px}}
@media (max-width:1100px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main";--topbar:58px}
  .menu{position:fixed;inset:var(--topbar) auto 0 0;width:min(86vw,300px);height:auto;z-index:60;transform:translateX(-102%);transition:transform .25s;box-shadow:var(--shadow)}
  .menu.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55;opacity:0;pointer-events:none;transition:.2s}
  .scrim.on{opacity:1;pointer-events:auto}
  .slip{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:86vh;z-index:70;border:0;border-radius:24px 24px 0 0;border-top:1px solid var(--line-2);transform:translateY(105%);transition:transform .28s;box-shadow:0 -20px 60px rgba(0,0,0,.6);background:var(--surface)}
  .slip.open{transform:none}
  .tabs-main{display:none}
  .topbar{padding:0 12px;gap:10px}
  .main{padding:14px 14px calc(var(--bottom) + 28px)}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:var(--bottom);z-index:50;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:700 11px var(--font);color:var(--faint);position:relative}
  .bn .ic{font-size:23px}
  .bn.on{color:var(--text)}
  .bn.on .ic{color:var(--brand)}
  :root[data-theme="light"] .bn.on .ic{color:var(--text)}
  .bn .pill{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:var(--brand-ink);font:800 11px/18px var(--font);text-align:center}
  .bal small{display:none}
  .bal{padding:4px 5px 4px 12px}
  .hide-m{display:none!important}
}
@media (min-width:1101px){.show-m{display:none!important}}
@media (max-width:520px){.logo small{display:none}.logo{font-size:19px}}