@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  --bg:          #080818;
  --bg2:         #0D0D24;
  --bg3:         #12122E;
  --surface:     #0F0F28;
  --surface2:    #161638;
  --border:      rgba(99,102,241,0.2);
  --border2:     rgba(99,102,241,0.35);

  --indigo:      #6366F1;
  --indigo-l:    #818CF8;
  --indigo-ll:   #C7D2FE;
  --violeta:     #8B5CF6;
  --violeta-l:   #A78BFA;
  --estrela:     #FCD34D;
  --estrela-l:   #FEF3C7;

  --texto:       #E0E7FF;
  --texto2:      #94A3B8;
  --texto3:      #475569;

  --sucesso:     #34D399;
  --sucesso-bg:  rgba(52,211,153,0.1);
  --erro:        #F87171;
  --erro-bg:     rgba(248,113,113,0.1);

  --font-t: 'Cinzel', Georgia, serif;
  --font-b: 'Nunito', sans-serif;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ══ FUNDO CELESTIAL GLOBAL ══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Névoa dourada canto sup direito */
    radial-gradient(ellipse 200px 200px at 90% 10%, rgba(200,169,110,0.05) 0%, transparent 70%),
    /* Névoa azul centro */
    radial-gradient(ellipse 300px 300px at 50% 40%, rgba(99,102,241,0.04) 0%, transparent 70%),
    /* Névoa roxa canto inf esq */
    radial-gradient(ellipse 200px 200px at 5% 90%, rgba(139,92,246,0.04) 0%, transparent 70%);
}

/* SVG celestial fixo no fundo */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'%3E%3C!-- Estrelas pequenas --%3E%3Ccircle cx='42' cy='38' r='0.8' fill='rgba(220,200,160,0.35)'/%3E%3Ccircle cx='135' cy='22' r='0.6' fill='rgba(220,200,160,0.3)'/%3E%3Ccircle cx='298' cy='55' r='0.9' fill='rgba(220,200,160,0.4)'/%3E%3Ccircle cx='362' cy='18' r='0.7' fill='rgba(220,200,160,0.3)'/%3E%3Ccircle cx='78' cy='120' r='0.7' fill='rgba(220,200,160,0.25)'/%3E%3Ccircle cx='320' cy='98' r='0.8' fill='rgba(220,200,160,0.3)'/%3E%3Ccircle cx='185' cy='75' r='0.6' fill='rgba(220,200,160,0.2)'/%3E%3Ccircle cx='55' cy='220' r='0.7' fill='rgba(220,200,160,0.2)'/%3E%3Ccircle cx='388' cy='185' r='0.6' fill='rgba(220,200,160,0.25)'/%3E%3Ccircle cx='240' cy='160' r='0.8' fill='rgba(220,200,160,0.2)'/%3E%3Ccircle cx='110' cy='310' r='0.6' fill='rgba(220,200,160,0.18)'/%3E%3Ccircle cx='350' cy='280' r='0.7' fill='rgba(220,200,160,0.2)'/%3E%3Ccircle cx='20' cy='380' r='0.8' fill='rgba(220,200,160,0.15)'/%3E%3Ccircle cx='380' cy='420' r='0.6' fill='rgba(220,200,160,0.18)'/%3E%3Ccircle cx='200' cy='450' r='0.7' fill='rgba(220,200,160,0.15)'/%3E%3Ccircle cx='90' cy='520' r='0.6' fill='rgba(220,200,160,0.15)'/%3E%3Ccircle cx='330' cy='560' r='0.8' fill='rgba(220,200,160,0.18)'/%3E%3Ccircle cx='160' cy='610' r='0.6' fill='rgba(220,200,160,0.12)'/%3E%3Ccircle cx='40' cy='680' r='0.7' fill='rgba(220,200,160,0.15)'/%3E%3Ccircle cx='370' cy='720' r='0.6' fill='rgba(220,200,160,0.12)'/%3E%3C!-- Estrelas médias com brilho --%3E%3Ccircle cx='355' cy='42' r='1.5' fill='rgba(255,230,150,0.55)'/%3E%3Ccircle cx='355' cy='42' r='4' fill='rgba(255,220,100,0.06)'/%3E%3Ccircle cx='28' cy='155' r='1.2' fill='rgba(255,230,150,0.4)'/%3E%3Ccircle cx='28' cy='155' r='3' fill='rgba(255,220,100,0.05)'/%3E%3Ccircle cx='390' cy='340' r='1.3' fill='rgba(255,230,150,0.45)'/%3E%3Ccircle cx='390' cy='340' r='3.5' fill='rgba(255,220,100,0.05)'/%3E%3C!-- Estrela pontuda canto --%3E%3Cpolygon points='375,68 377,74 383,74 378,78 380,84 375,80 370,84 372,78 367,74 373,74' fill='rgba(200,169,110,0.45)'/%3E%3C!-- Moldura canto sup esq --%3E%3Cg stroke='rgba(180,140,70,0.2)' stroke-width='0.8' fill='none'%3E%3Cpath d='M8,8 L8,55'/%3E%3Cpath d='M8,8 L55,8'/%3E%3Cpath d='M8,8 Q8,30 30,30'/%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(200,169,110,0.4)' stroke='none'/%3E%3C/g%3E%3C!-- Moldura canto sup dir --%3E%3Cg stroke='rgba(180,140,70,0.2)' stroke-width='0.8' fill='none'%3E%3Cpath d='M392,8 L392,55'/%3E%3Cpath d='M392,8 L345,8'/%3E%3Cpath d='M392,8 Q392,30 370,30'/%3E%3Ccircle cx='392' cy='8' r='2' fill='rgba(200,169,110,0.4)' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Garantir que conteúdo fica acima do fundo */
.g-header, .g-container, header, main, .nav-global { position: relative; z-index: 1; }

/* HEADER */
.g-header {
  background: var(--bg);
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

.g-logo {
  font-family: var(--font-t);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--indigo-ll);
  text-decoration: none;
}
.g-logo span { color: var(--violeta-l); }

/* NAV BOTTOM */
.nav-global {
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--texto3) !important;
  font-family: var(--font-b); font-size: 0.7rem;
  padding: 0.4rem 1.5rem; border-radius: var(--r-md);
  transition: color 0.2s; flex: 1;
}
.nav-item.ativo { color: var(--indigo-l) !important; }
.nav-item .nav-icon { font-size: 1.3rem; line-height: 1; transition: transform 0.2s; }
.nav-item.ativo .nav-icon { transform: scale(1.15); }
.nav-item .nav-label { font-weight: 600; }
body { padding-bottom: 72px; }

/* CARDS */
.g-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.g-card:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 24px rgba(99,102,241,0.12);
}

/* BOTÕES */
.g-btn {
  width: 100%; padding: 0.9rem;
  background: linear-gradient(135deg, var(--indigo), var(--violeta));
  color: #fff; border: none; border-radius: var(--r-pill);
  font-family: var(--font-b); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 4px 20px rgba(99,102,241,0.3);
}
.g-btn:hover    { opacity: 0.9; }
.g-btn:active   { transform: scale(0.98); }
.g-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.g-btn-sec {
  padding: 0.6rem 1.1rem; background: transparent;
  border: 1px solid var(--border2); color: var(--indigo-l);
  border-radius: var(--r-pill); font-family: var(--font-b);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.g-btn-sec:hover { background: rgba(99,102,241,0.1); border-color: var(--indigo-l); }

/* INPUTS */
.g-campo { margin-bottom: 1.1rem; }
.g-campo label {
  display: block; font-size: 0.75rem; font-weight: 700;
  color: var(--texto2); margin-bottom: 0.4rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.g-campo input, .g-campo select, .g-campo textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface2); font-family: var(--font-b);
  font-size: 0.95rem; color: var(--texto); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.g-campo input::placeholder, .g-campo textarea::placeholder { color: var(--texto3); }
.g-campo input:focus, .g-campo select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* BADGES */
.g-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.65rem; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700;
}
.g-badge-indigo  { background: rgba(99,102,241,0.15); color: var(--indigo-l); border: 1px solid rgba(99,102,241,0.3); }
.g-badge-estrela { background: rgba(252,211,77,0.15);  color: var(--estrela);  border: 1px solid rgba(252,211,77,0.3); }
.g-badge-sucesso { background: var(--sucesso-bg); color: var(--sucesso); border: 1px solid rgba(52,211,153,0.3); }
.g-badge-erro    { background: var(--erro-bg);    color: var(--erro);    border: 1px solid rgba(248,113,113,0.3); }

/* ALERTAS */
.g-alerta { display: none; padding: 0.8rem 1rem; border-radius: var(--r-md); font-size: 0.88rem; margin-bottom: 1rem; font-weight: 500; }
.g-alerta-erro    { background: var(--erro-bg);    color: var(--erro);    border: 1px solid rgba(248,113,113,0.2); }
.g-alerta-sucesso { background: var(--sucesso-bg); color: var(--sucesso); border: 1px solid rgba(52,211,153,0.2); }

/* DIVISOR */
.g-divisor {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0; color: var(--texto3); font-size: 0.82rem;
}
.g-divisor::before, .g-divisor::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* CONTAINER */
.g-container { max-width: 680px; margin: 0 auto; padding: 2rem 1.25rem; }

/* STARS BG */
.g-stars {
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.3)  0%, transparent 100%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.4)  0%, transparent 100%),
    radial-gradient(1px 1px at 50% 38%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 28%, rgba(255,255,255,0.3)  0%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,0.2)  0%, transparent 100%);
}

/* NEBULA ACCENT */
.g-nebula {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

@media (max-width: 600px) {
  .g-header    { padding: 0 1rem; }
  .g-container { padding: 1.5rem 1rem; }
}

/* ══ CELESTIAL ACCENT ══ */
:root {
  --ouro:      #C8A96E;
  --ouro-l:    #E8D5A0;
  --ouro-d:    #8B6914;
  --marinho:   #0a1628;
  --marinho2:  #0d1f3c;
}

.g-badge-ouro {
  background: rgba(200,169,110,0.15);
  color: var(--ouro-l);
  border: 1px solid rgba(200,169,110,0.3);
}

/* ══ Z-INDEX FIX — conteúdo acima do fundo celestial ══ */
.g-card, .card, .modal, .overlay, .overlay-aprovado,
.lista, .topo, .boas-vindas, .secao, .banner,
.lado-esquerdo, .lado-direito, .esq, .dir,
.form-wrap, .g-container, .g-header,
.leitor-header, .leitor-corpo, .leitor-rodape,
#leitor, #tela-titulo, #tela-fim,
.painel, .abas, .container {
  position: relative;
  z-index: 1;
}