/* MGM Social · camada visual "magia" */
:root {
  --bg: #04050d;
  --bg2: #0a0c1c;
  --vidro: rgba(255, 255, 255, .045);
  --vidro-forte: rgba(255, 255, 255, .07);
  --borda: rgba(255, 255, 255, .09);
  --borda-forte: rgba(255, 255, 255, .16);
  --txt: #eceefb;
  --mudo: #9094b3;
  --fraco: #5d6182;
  --violeta: #8b5cf6;
  --ciano: #22d3ee;
  --rosa: #e879f9;
  --verde: #34d399;
  --ambar: #fbbf24;
  --vermelho: #f87171;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 55%, #e879f9 100%);
}

*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--borda); }
h1, h2, h3, h4, p, ul, ol, figure, pre, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; cursor: pointer; }
table { border-collapse: collapse; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; color: var(--txt); background: var(--bg);
  font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.display { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -.02em; }
::selection { background: rgba(139, 92, 246, .45); }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- fundo */
.cosmos { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 700px at 50% -10%, #12103a 0%, transparent 60%), var(--bg); }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; }
.aurora.a1 { width: 620px; height: 620px; background: #6d28d9; top: -220px; left: -120px; animation: flutua1 26s ease-in-out infinite; }
.aurora.a2 { width: 520px; height: 520px; background: #0891b2; top: 10%; right: -160px; animation: flutua2 32s ease-in-out infinite; }
.aurora.a3 { width: 480px; height: 480px; background: #a21caf; bottom: -200px; left: 30%; opacity: .32; animation: flutua3 38s ease-in-out infinite; }
@keyframes flutua1 { 50% { transform: translate(140px, 90px) scale(1.15); } }
@keyframes flutua2 { 50% { transform: translate(-120px, 140px) scale(.9); } }
@keyframes flutua3 { 50% { transform: translate(-160px, -80px) scale(1.2); } }
.malha { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }
#estrelas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------- superfícies */
.vidro {
  position: relative; border-radius: 20px; border: 1px solid var(--borda);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -40px rgba(0,0,0,.8);
}
.vidro.brilho::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(139,92,246,.7), rgba(34,211,238,.25) 40%, transparent 60%, rgba(232,121,249,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cartao-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.cartao-hover:hover { transform: translateY(-3px); border-color: var(--borda-forte);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -30px rgba(139,92,246,.45); }

/* ---------------------------------------------------------------- tipografia */
.grad-texto {
  background: linear-gradient(90deg, #c4b5fd, #67e8f9, #f0abfc, #c4b5fd);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fluir 10s linear infinite;
}
@keyframes fluir { to { background-position: 300% 0; } }
.rotulo { display: block; font: 500 11px/1 "JetBrains Mono", monospace; text-transform: uppercase;
  letter-spacing: .14em; color: var(--mudo); margin-bottom: 8px; }
.mudo { color: var(--mudo); }
.fraco { color: var(--fraco); }

/* ---------------------------------------------------------------- botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: transform .2s, box-shadow .3s, background .3s, border-color .3s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn-magia { position: relative; overflow: hidden; color: #fff; background: var(--grad); background-size: 200% 200%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 30px -8px rgba(139,92,246,.75);
  animation: gradmove 6s ease infinite; }
.btn-magia::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg);
  animation: varrer 3.2s ease-in-out infinite; }
.btn-magia:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 44px -6px rgba(139,92,246,.95); }
.btn-magia[disabled] { opacity: .55; cursor: wait; }
@keyframes varrer { 0%, 55% { left: -120%; } 100% { left: 160%; } }
@keyframes gradmove { 50% { background-position: 100% 100%; } }
.btn-fantasma { color: var(--txt); background: rgba(255,255,255,.04); border-color: var(--borda); }
.btn-fantasma:hover { background: rgba(255,255,255,.08); border-color: var(--borda-forte); }
.btn-perigo { color: #fecaca; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.25); }
.btn-perigo:hover { background: rgba(248,113,113,.16); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
.btn-xs { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; font-weight: 500; }
.link { color: #c4b5fd; text-decoration: underline; text-decoration-color: rgba(196,181,253,.35); text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: #e9d5ff; }

/* ---------------------------------------------------------------- campos */
.campo { width: 100%; background: rgba(255,255,255,.035); color: var(--txt); border: 1px solid var(--borda);
  border-radius: 12px; padding: 10px 13px; font: inherit; font-size: 14px; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s; }
.campo::placeholder { color: var(--fraco); }
.campo:focus { border-color: rgba(139,92,246,.7); background: rgba(139,92,246,.06);
  box-shadow: 0 0 0 4px rgba(139,92,246,.16), 0 0 24px -6px rgba(139,92,246,.6); }
select.campo option { background: var(--bg2); color: var(--txt); }
textarea.campo { resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { accent-color: var(--violeta); }
input[type=file].campo { padding: 8px; }
input[type=file]::file-selector-button { background: rgba(139,92,246,.18); color: #e9d5ff; border: 0;
  padding: 7px 12px; border-radius: 8px; margin-right: 10px; cursor: pointer; }
input[type=date].campo::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ---------------------------------------------------------------- chips e selos */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--borda); background: rgba(255,255,255,.035); color: var(--mudo); cursor: pointer;
  transition: all .2s; user-select: none; }
.chip:hover { color: var(--txt); border-color: var(--borda-forte); }
.chip.ativo, .chip:has(input:checked) { color: #fff; border-color: rgba(139,92,246,.6);
  background: rgba(139,92,246,.18); box-shadow: 0 0 18px -6px rgba(139,92,246,.8); }
.chip input { display: none; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font: 500 10.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--borda); color: var(--mudo); background: rgba(255,255,255,.03); }
.selo .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.selo.ok { color: var(--verde); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.selo.vivo { color: var(--ciano); border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.07); }
.selo.vivo .ponto { animation: piscar 1.2s ease-in-out infinite; }
.selo.atencao { color: var(--ambar); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); }
.selo.erro { color: var(--vermelho); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.07); }
.selo.roxo { color: #c4b5fd; border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.1); }
@keyframes piscar { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- orbe da IA: a marca MGM viva */
.orbe { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%;
  background:
    url("mgm-marca.svg") center / 88% no-repeat,
    radial-gradient(circle, rgba(139,92,246,.30) 0%, rgba(34,211,238,.10) 48%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 50px -12px rgba(139,92,246,.7);
  filter: drop-shadow(0 0 5px rgba(196,181,253,.65)) drop-shadow(0 0 16px rgba(34,211,238,.3));
  animation: respirar 5s ease-in-out infinite; }
.orbe::before, .orbe::after { content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(196,181,253,.25); animation: girar 14s linear infinite; border-top-color: rgba(103,232,249,.8); }
.orbe::after { inset: -20px; border-color: rgba(232,121,249,.12); border-right-color: rgba(232,121,249,.6); animation-duration: 22s; animation-direction: reverse; }
.orbe.pensando { animation: pulsar 1.1s ease-in-out infinite; }
.orbe.pensando::before { animation-duration: 1.6s; }
.orbe.pensando::after { animation-duration: 2.4s; }
.orbe.grande { width: 120px; height: 120px; }
.orbe.mini { width: 26px; height: 26px; }
.orbe.mini::before { inset: -5px; } .orbe.mini::after { display: none; }
@keyframes respirar { 50% { transform: scale(1.05);
  filter: drop-shadow(0 0 9px rgba(196,181,253,.9)) drop-shadow(0 0 26px rgba(34,211,238,.45)) brightness(1.12); } }
@keyframes pulsar { 50% { transform: scale(1.12);
  filter: drop-shadow(0 0 12px rgba(240,171,252,.95)) drop-shadow(0 0 34px rgba(34,211,238,.7)) brightness(1.4) hue-rotate(25deg); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- materialização */
.surgir { animation: surgir .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes surgir { from { opacity: 0; filter: blur(14px); transform: translateY(16px) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: none; } }
.fumaca { animation: fumaca .9s ease both; }
@keyframes fumaca { from { opacity: 0; letter-spacing: .3em; filter: blur(8px); } to { opacity: 1; letter-spacing: normal; filter: none; } }
.cursor::after { content: "▍"; margin-left: 2px; color: var(--ciano); animation: piscar 1s steps(1) infinite; }

.portal { position: relative; overflow: hidden; border-radius: 16px; background: #05060f; }
.portal .scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.18), rgba(139,92,246,.35), transparent);
  animation: scan 2.2s cubic-bezier(.6,0,.4,1) infinite; }
.portal .ruido { position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
@keyframes scan { to { top: 100%; } }
.revelar { animation: revelar 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes revelar { from { clip-path: inset(0 0 100% 0); filter: blur(10px) saturate(2); } to { clip-path: inset(0); filter: none; } }

.fluxo { font: 12px/1.6 "JetBrains Mono", monospace; color: #a5b4fc; white-space: pre-wrap; word-break: break-word;
  max-height: 150px; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 45%); }

/* ---------------------------------------------------------------- navegação */
.barra { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--borda);
  background: rgba(4,5,13,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-link { position: relative; font-size: 13.5px; color: var(--mudo); padding: 6px 2px; transition: color .2s; }
.nav-link:hover, .nav-link.ativo { color: var(--txt); }
.nav-link.ativo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px;
  background: var(--grad); box-shadow: 0 0 12px rgba(139,92,246,.9); border-radius: 2px; }
.tecla { font: 500 11px "JetBrains Mono", monospace; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--borda-forte); color: var(--mudo); background: rgba(255,255,255,.04); }

/* ---------------------------------------------------------------- avisos */
.aviso { border-radius: 14px; padding: 12px 16px; font-size: 14px; border: 1px solid; backdrop-filter: blur(10px); }
.aviso.ok { color: #a7f3d0; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.aviso.erro { color: #fecaca; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
.aviso.info { color: #fde68a; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); }

/* ---------------------------------------------------------------- tabela */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; font: 500 11px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fraco); padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.tabela tr:hover td { background: rgba(255,255,255,.02); }

/* ---------------------------------------------------------------- paleta de comandos */
#paleta { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center;
  padding: 14vh 16px 16px; background: rgba(2,3,10,.6); backdrop-filter: blur(8px); }
#paleta.aberta { display: flex; animation: surgir .35s ease both; }
#paleta .caixa { width: min(640px, 100%); }
#paleta input { font-size: 17px; padding: 16px 18px; border-radius: 16px 16px 0 0; border: 0; border-bottom: 1px solid var(--borda); background: transparent; }
#paleta input:focus { box-shadow: none; background: transparent; }
.opcao { display: flex; align-items: center; gap: 12px; padding: 11px 18px; font-size: 14px; color: var(--mudo); cursor: pointer; }
.opcao.sel, .opcao:hover { background: rgba(139,92,246,.14); color: var(--txt); }
.opcao .ico { width: 22px; text-align: center; color: #c4b5fd; }

/* ---------------------------------------------------------------- utilidades */
.faisca { position: fixed; pointer-events: none; z-index: 200; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px #c4b5fd, 0 0 20px #22d3ee; animation: faisca .9s ease-out forwards; }
@keyframes faisca { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
.rolagem::-webkit-scrollbar { width: 8px; height: 8px; }
.rolagem::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; }
.linha-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--borda-forte), transparent); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

@media (max-width: 1023px) {
  .orbe.grande.adapta { width: 72px; height: 72px; }
}

/* nome "mgm" no mesmo desenho da logo */
.marca-mgm { font-family: "Montserrat", "Segoe UI", sans-serif; font-weight: 500; letter-spacing: -.01em; }

/* selo de rede social: letra ou simbolo na cor da rede */
.rede { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px;
  font: 700 11px/1 "Inter", sans-serif; color: #fff; background: color-mix(in srgb, var(--c) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 12px -4px var(--c); }