/* 03/11: visual futurista do app (só aparência). Tudo escopado em body.fxa. */
:root { --fx-cyan:#22d3ee; --fx-vio:#a855f7; --fx-pink:#f472b6; --fx-gold:#fbbf24; --fx-ink:#07061a; --fx-dim:#9aa3c7; }
body.fxa { background:var(--fx-ink) !important; }
body.fxa .fx-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body.fxa .fx-bg i { position:absolute; display:block; }
body.fxa .fx-bg .n1 { width:90vmax; height:90vmax; left:-40vmax; top:-30vmax; border-radius:50%; background:radial-gradient(circle, rgba(124,58,237,.55), transparent 62%); filter:blur(40px); }
body.fxa .fx-bg .n2 { width:80vmax; height:80vmax; right:-40vmax; bottom:-30vmax; border-radius:50%; background:radial-gradient(circle, rgba(34,211,238,.35), transparent 62%); filter:blur(40px); }
body.fxa .fx-bg .grid { inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:34px 34px; mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
body.fxa .screen, body.fxa header.top { position:relative; z-index:1; }
body.fxa nav.tabs { z-index:5; }
body.fxa .screen { background:transparent !important; }

/* Títulos com cara de painel */
body.fxa h1, body.fxa h2, body.fxa h3, body.fxa .logo-text { font-family:'Space Grotesk', system-ui, sans-serif !important; letter-spacing:-.01em; }
body.fxa .logo-text { font-weight:700; background:linear-gradient(90deg,#fff 0%, #fff 55%, var(--fx-gold) 56%); -webkit-background-clip:text; color:transparent; }
body.fxa .menu-logo p { font:600 .62rem Orbitron, sans-serif !important; letter-spacing:.35em; color:var(--fx-cyan) !important; text-transform:uppercase; }

/* Cartões de vidro com linha de luz em cima */
body.fxa .card { background:linear-gradient(180deg, rgba(20,18,58,.72), rgba(10,9,32,.78)) !important; border:1px solid rgba(148,163,255,.16) !important; box-shadow:inset 0 1px 0 rgba(34,211,238,.35), 0 18px 40px rgba(0,0,0,.35) !important; backdrop-filter:blur(14px); border-radius:20px !important; }

/* Botões: painel de nave em vidro neon */
body.fxa .btn.mb { background:linear-gradient(135deg, rgba(34,211,238,.10), rgba(168,85,247,.16)) !important; border:1px solid rgba(34,211,238,.38) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(168,85,247,.12), 0 10px 26px rgba(0,0,0,.35) !important; color:#eaf6ff !important; border-radius:16px !important; font-family:'Space Grotesk', sans-serif !important; font-weight:700 !important; }
body.fxa .btn.mb::after { content:""; position:absolute; left:14px; right:14px; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--fx-cyan), transparent); opacity:.8; }
body.fxa .btn.mb { position:relative; }
body.fxa .btn.mb .mb-ico img { filter:drop-shadow(0 0 10px rgba(34,211,238,.45)); }
body.fxa .btn.primary { background:linear-gradient(180deg, #ffd34d, #f59e0b) !important; border:0 !important; color:#2a1400 !important; box-shadow:0 0 0 2px rgba(255,214,90,.35), 0 0 34px rgba(251,191,36,.55), inset 0 2px 0 rgba(255,255,255,.55) !important; border-radius:18px !important; }
body.fxa .btn.primary.huge span { font-family:Orbitron, sans-serif !important; letter-spacing:.18em; font-weight:800 !important; }

/* Topo: chips de status */
body.fxa header.top { background:rgba(7,6,26,.55) !important; backdrop-filter:blur(12px); border-bottom:1px solid rgba(34,211,238,.18); }
body.fxa .chip { background:rgba(10,12,38,.75) !important; border:1px solid rgba(34,211,238,.35) !important; font-family:'Space Grotesk', sans-serif; box-shadow:0 0 14px rgba(34,211,238,.15); }

/* Barra de baixo: vidro com brilho ciano */
body.fxa nav.tabs { background:rgba(10,10,34,.72) !important; border:1px solid rgba(34,211,238,.28) !important; box-shadow:0 0 30px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(18px); }
body.fxa nav.tabs button { font-family:'Space Grotesk', sans-serif; color:#b9c3e8 !important; }
body.fxa nav.tabs button.active { color:var(--fx-cyan) !important; }
body.fxa nav.tabs button.active::before { background:rgba(34,211,238,.16) !important; box-shadow:0 0 18px rgba(34,211,238,.45) !important; }

/* Pílulas e kickers em Orbitron */
body.fxa .pill, body.fxa .kicker, body.fxa .eyebrow { font-family:Orbitron, sans-serif !important; letter-spacing:.14em; }

/* Mapa: planetas com anel de órbita neon */
body.fxa #home img[src*="planets/"] { filter:drop-shadow(0 0 22px rgba(34,211,238,.35)); }
body.fxa .map-trail path, body.fxa .map-trail .glow { stroke:rgba(34,211,238,.55) !important; }

/* Exercício: pauta e barra de afinação em HUD */
body.fxa #exercise .stage, body.fxa #exercise canvas, body.fxa #exercise svg { border-radius:18px; }
body.fxa .meter, body.fxa .tune-bar { box-shadow:0 0 18px rgba(34,211,238,.35); }

/* Astronauta com brilho de holograma */
body.fxa .menu-astro img, body.fxa #menu-astro img, body.fxa img[src*="astro"] { filter:drop-shadow(0 0 24px rgba(34,211,238,.45)); }
body.fxa .menu-plat { background:radial-gradient(ellipse at center, rgba(34,211,238,.65), rgba(34,211,238,.08) 60%, transparent 70%) !important; box-shadow:0 0 40px rgba(34,211,238,.5) !important; }

/* Faculdade, balão do exercício, botões de ação */
body.fxa .fac-card, body.fxa .bubble, body.fxa .roll-wrap, body.fxa .staff { background:linear-gradient(180deg, rgba(20,18,58,.72), rgba(10,9,32,.8)) !important; border:1px solid rgba(148,163,255,.18) !important; box-shadow:inset 0 1px 0 rgba(34,211,238,.35), 0 14px 30px rgba(0,0,0,.35) !important; }
body.fxa .fac-ico { background:radial-gradient(circle, rgba(34,211,238,.25), transparent 70%) !important; box-shadow:0 0 18px rgba(34,211,238,.35) !important; }
body.fxa .fac-bar, body.fxa .fac-mini { background:rgba(34,211,238,.12) !important; }
body.fxa .fac-bar i, body.fxa .fac-bar span, body.fxa .fac-mini i { background:linear-gradient(90deg, var(--fx-cyan), var(--fx-vio)) !important; }
body.fxa .pill, body.fxa .ex-world { font-family:Orbitron, sans-serif !important; letter-spacing:.16em; font-size:.62rem !important; color:var(--fx-cyan) !important; }
body.fxa .btn.round, body.fxa .ex-how { background:rgba(10,12,38,.7) !important; border:1px solid rgba(34,211,238,.45) !important; box-shadow:0 0 16px rgba(34,211,238,.3) !important; color:#e6fbff !important; }
body.fxa .actions .btn:not(.primary) { background:linear-gradient(135deg, rgba(34,211,238,.25), rgba(59,130,246,.3)) !important; border:1px solid rgba(34,211,238,.6) !important; box-shadow:0 0 22px rgba(34,211,238,.35) !important; }
body.fxa .tune-track { background:linear-gradient(90deg, rgba(244,114,182,.35), rgba(34,211,238,.2) 40%, rgba(34,211,238,.2) 60%, rgba(244,114,182,.35)) !important; border:1px solid rgba(34,211,238,.35) !important; }
body.fxa .tune-zone { background:rgba(74,222,128,.35) !important; box-shadow:0 0 16px rgba(74,222,128,.6) !important; }
body.fxa .btn.gold { box-shadow:0 0 0 2px rgba(255,214,90,.3), 0 0 30px rgba(251,191,36,.45) !important; }

/* ===== v4: paleta musical (roxo e rosa), letra branca nos botões ===== */
body.fxa .btn.primary, body.fxa .btn.gold { background:linear-gradient(100deg,#6d3bff 0%,#b44cff 48%,#ff4fa8 100%) !important; color:#fff !important; text-shadow:0 1px 8px rgba(40,0,80,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 5px 0 #4a1ea8,0 14px 34px -8px rgba(190,70,255,.8) !important; border:0 !important; }
body.fxa .btn.primary span, body.fxa .btn.gold span { color:#fff !important; }
body.fxa .btn.mb { background:linear-gradient(135deg,rgba(139,92,255,.16),rgba(230,75,216,.12)) !important; border:1px solid rgba(180,140,255,.4) !important; }
body.fxa .btn.mb::after { background:linear-gradient(90deg,transparent,#ff5fae,transparent) !important; }
body.fxa nav.tabs button.active { color:#ff7cc4 !important; }
body.fxa nav.tabs button.active::before { background:rgba(255,95,174,.16) !important; box-shadow:0 0 18px rgba(255,95,174,.45) !important; }
body.fxa .fx-bg .n2 { background:radial-gradient(circle, rgba(230,75,216,.32), transparent 62%) !important; }
body.fxa .actions .btn:not(.primary) { background:linear-gradient(135deg,rgba(62,230,255,.25),rgba(109,59,255,.35)) !important; color:#fff !important; }
body.fxa .chip { border-color:rgba(180,140,255,.4) !important; }

/* ===== v5: correções pedidas (astronauta sem corte, logo, microfone) ===== */
body.fxa .logo-text { background:none !important; -webkit-background-clip:border-box !important; color:#fff !important; }
body.fxa .logo-text span { color:#fbbf24 !important; -webkit-text-fill-color:#fbbf24; }
body.fxa #menu .menu-stage { overflow-x:clip; overflow-y:visible; min-height:0; }
body.fxa #menu .menu-astro { margin-top:14px; }
body.fxa #menu .menu-astro .astro-img, body.fxa #menu .menu-astro .astro { width:calc(var(--menu-astro, 190px) * .9) !important; }
body.fxa .menu-logo { position:relative; z-index:3; }

/* Mascote novo (astronauta futurista, uma imagem para todas as poses): foto do aluno no visor */
body.fxa .astro-img:not(.old)[data-pose] { --fx: 52.3%; --fy: 32%; --fw: 40.6%; --fh: 28%; }

/* Abertura no visual novo: espaço escuro, anel em órbita, foguete 3D na barra (só visual) */
body.fxa .splash { background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 46%, #cfe9ff 50%, transparent 51%), radial-gradient(1px 1px at 22% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 30%, #ffe7f6 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 74%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 70% 45% at 50% 38%, rgba(139, 92, 255, .45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 85%, rgba(255, 60, 200, .22), transparent 70%),
    linear-gradient(180deg, #0d0630, #05031a 70%); overflow: hidden; }
body.fxa .splash::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 32%; pointer-events: none;
  background: linear-gradient(rgba(34, 211, 238, .28) 1px, transparent 1px) 0 0/100% 34px, linear-gradient(90deg, rgba(34, 211, 238, .28) 1px, transparent 1px) 0 0/34px 100%;
  transform: perspective(300px) rotateX(58deg); transform-origin: 50% 100%; mask-image: linear-gradient(transparent, #000 70%); -webkit-mask-image: linear-gradient(transparent, #000 70%); animation: fxGridRun 1.4s linear infinite; }
@keyframes fxGridRun { to { background-position: 0 34px, 0 0; } }
body.fxa .splash-astro { position: relative; display: grid; place-items: center; width: 250px; height: 250px; }
body.fxa .splash-astro::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 2px solid rgba(34, 211, 238, .55);
  box-shadow: 0 0 24px rgba(34, 211, 238, .45), inset 0 0 30px rgba(139, 92, 255, .35); transform: rotateX(70deg); animation: fxRing 3s linear infinite; }
body.fxa .splash-astro::after { content: ""; position: absolute; width: 60px; height: 60px; left: 50%; top: 50%; margin: -30px; background: url(../assets/lp/rocket.webp) center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(255, 120, 220, .7)); animation: fxOrbit 3s linear infinite; z-index: 3; }
@keyframes fxRing { to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes fxOrbit { 0% { transform: rotate(0) translateX(118px) rotate(45deg) scale(.9); z-index: 3; } 50% { transform: rotate(180deg) translateX(118px) rotate(45deg) scale(.6); }
  100% { transform: rotate(360deg) translateX(118px) rotate(45deg) scale(.9); } }
body.fxa .splash-astro .astro-img { width: 200px; position: relative; z-index: 2; filter: drop-shadow(0 0 26px rgba(34, 211, 238, .5)); }
body.fxa .splash .logo-text { font-family: Orbitron, var(--fun); font-weight: 800; font-size: 2.6rem; letter-spacing: .5px; color: #fff; text-shadow: 0 0 18px rgba(139, 92, 255, .8); }
body.fxa .splash .logo-text span { color: #ffc93c; text-shadow: 0 0 16px rgba(255, 201, 60, .7); }
body.fxa .splash-sub { font-family: Orbitron, var(--fun); font-size: .78rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #67e8f9; text-shadow: 0 0 10px rgba(34, 211, 238, .7); margin: 2px 0 30px; }
body.fxa .splash .loadbar { width: min(300px, 78vw); height: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(167, 139, 250, .55); box-shadow: 0 0 18px rgba(139, 92, 255, .35), inset 0 0 8px rgba(0, 0, 0, .6); z-index: 2; }
body.fxa .splash .loadbar-fill { background: linear-gradient(90deg, #22d3ee, #8b5cff 50%, #ff3cac); box-shadow: 0 0 14px rgba(255, 60, 172, .7), 0 0 26px rgba(139, 92, 255, .5); }
body.fxa .splash .loadbar-rocket { width: 52px; height: 52px; rotate: 45deg; background: url(../assets/lp/rocket.webp) center/contain no-repeat; filter: drop-shadow(0 0 12px rgba(255, 140, 60, .8)); animation: fxShake .18s ease-in-out infinite alternate; }
@keyframes fxShake { from { translate: -50% -52%; } to { translate: -50% -48%; } }
body.fxa .splash.out .loadbar-rocket { animation: fxLaunch .6s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes fxLaunch { 0% { translate: -50% -50%; rotate: 45deg; } 30% { translate: -50% -60%; rotate: -45deg; } 100% { translate: -50% -110vh; rotate: -45deg; } }
body.fxa .splash-tip { font-family: 'Space Grotesk', var(--fun); font-weight: 700; letter-spacing: .5px; color: #c4b5fd; margin-top: 16px; z-index: 2; }
body.fxa .splash > * { position: relative; z-index: 1; }