/* ============================================
   FOCA+ — PREMIUM UI LAYER v3
   ============================================
   Paleta NEUTRA com indigo só como acento.
   Targets nas classes reais do app: .header, .banner-instalar,
   .streak-batalha, .countdown, .mensagem-do-dia, .versiculo.
   ============================================ */

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

:root {
  --p-indigo:        #4338CA;
  --p-indigo-dark:   #3730A3;
  --p-indigo-soft:   #6366F1;
  --p-indigo-pale:   #EEF2FF;
  --p-indigo-ghost:  #F5F3FF;

  --p-ink:           #0A0A0A;
  --p-graphite:      #18181B;
  --p-charcoal:      #27272A;
  --p-iron:          #3F3F46;
  --p-slate:         #52525B;
  --p-muted:         #71717A;
  --p-soft:          #A1A1AA;
  --p-line:          #E4E4E7;
  --p-line-soft:     #F4F4F5;

  --p-cream:         #F5F1E8;
  --p-cream-soft:    #EDE7D8;
  --p-cream-deep:    #E5DDC8;
  --p-white:         #FFFFFF;
  --p-off-white:     #FBF9F4;

  --p-gold:          #B89968;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --shadow-xs:    0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm:    0 1px 2px rgba(10, 10, 10, 0.03), 0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-md:    0 2px 4px rgba(10, 10, 10, 0.03), 0 8px 16px rgba(10, 10, 10, 0.05), 0 16px 32px -8px rgba(10, 10, 10, 0.06);
  --shadow-lg:    0 4px 6px rgba(10, 10, 10, 0.04), 0 20px 40px -12px rgba(10, 10, 10, 0.10);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  --cor-principal: var(--p-indigo);
  --cor-escura:    var(--p-indigo-dark);
  --cor-suave:     var(--p-line);
  --cor-bebe:      var(--p-cream-soft);
  --texto-principal: var(--p-graphite);
  --texto-suave:   var(--p-slate);
  --bg-principal:  var(--p-cream);

  --rosa-principal: var(--p-indigo);
  --rosa-vibrante:  var(--p-indigo-dark);
  --rosa-claro:     var(--p-line);
  --rosa-medio:     var(--p-line);
  --rosa-escuro:    var(--p-graphite);
  --rosa-suave:     var(--p-cream-soft);
  --rosa-bebe:      var(--p-cream-soft);
  --rosa-pastel:    var(--p-cream-soft);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  color: var(--p-graphite);
  background: var(--p-cream) !important;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* === Blobs orgânicos absolutos no fundo === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 10% 8%, rgba(212, 185, 142, 0.30) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 88% 32%, rgba(184, 153, 104, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 35% at 50% 95%, rgba(212, 185, 142, 0.20) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 95% 80%, rgba(247, 220, 180, 0.22) 0%, transparent 55%);
  filter: blur(40px);
  transform: translateZ(0);
}

/* === Grão de papel === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.40 0 0 0 0 0.32 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Garante conteúdo acima dos pseudo-elementos do body */
/* .modal-overlay NAO entra aqui — ela precisa de position: fixed (definido em styles.css)
   pra cobrir a viewport como overlay. Sobrescrever pra position: relative coloca o modal
   no fluxo da pagina, aparecendo inline embaixo das outras secoes. */
.app, .setup-wizard, .tela-ativacao, header, main, section {
  position: relative;
  z-index: 2;
}
.modal-overlay {
  z-index: 200; /* mantem acima dos pseudo-elementos sem mudar position */
}

/* ============================================
   TELA DE ATIVAÇÃO
   ============================================ */
.tela-ativacao {
  background: transparent !important;
}

.ativacao-card,
.ativacao-card-grande {
  width: 100%;
  max-width: 440px;
  background: var(--p-white);
  border: 1px solid var(--p-line);
  border-radius: var(--r-xl);
  padding: 48px 40px 32px;
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 8px 24px rgba(10, 10, 10, 0.04),
    0 32px 80px -20px rgba(10, 10, 10, 0.08);
}

.ativacao-logo { width: 52px; height: 52px; margin: 0 auto 22px; }
.ativacao-marca {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  font-size: 32px; font-weight: 500; text-align: center;
  color: var(--p-graphite); letter-spacing: -0.025em;
  margin-bottom: 24px; line-height: 1;
}
.ativacao-marca span { color: var(--p-indigo); margin-left: 1px; font-style: italic; }

.ativacao-titulo {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500; font-size: 26px; letter-spacing: -0.02em;
  color: var(--p-graphite); text-align: center; margin: 0 0 6px; line-height: 1.2;
}
.ativacao-subtitulo {
  font-size: 14px; line-height: 1.55; color: var(--p-slate);
  text-align: center; margin: 0 0 28px;
}
.ativacao-campo { margin-bottom: 14px; }
.ativacao-campo label {
  display: block; font-size: 11.5px; font-weight: 500;
  color: var(--p-muted); margin-bottom: 7px;
  letter-spacing: 0.1px; text-transform: uppercase;
}
.ativacao-campo input {
  width: 100%; padding: 13px 15px;
  background: var(--p-off-white); border: 1px solid var(--p-line);
  border-radius: var(--r-md); font-family: inherit; font-size: 15px;
  color: var(--p-graphite); outline: none; transition: all 0.2s var(--ease-out);
}
.ativacao-campo input::placeholder { color: var(--p-soft); }
.ativacao-campo input:focus {
  border-color: var(--p-graphite); background: var(--p-white);
  box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08);
}
.botao-ativacao {
  width: 100%; padding: 14px 24px;
  background: var(--p-graphite); color: var(--p-white);
  border: none; border-radius: var(--r-md);
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.005em; cursor: pointer; margin-top: 8px;
  transition: all 0.2s var(--ease-out);
}
.botao-ativacao:hover { background: var(--p-ink); box-shadow: 0 8px 20px rgba(10, 10, 10, 0.18); }
.botao-ativacao:focus-visible { outline: none; box-shadow: var(--foco-ring, 0 0 0 3px rgba(79,70,229,0.28)), 0 8px 20px rgba(10, 10, 10, 0.15); }

.ativacao-erro {
  margin-top: 14px; padding: 11px 14px;
  background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: var(--r-sm); color: #991B1B; font-size: 13px;
}
.ativacao-erro:empty { display: none; }
.spinner-circ {
  width: 14px; height: 14px;
  border: 2px solid var(--p-line); border-top-color: var(--p-graphite);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ativacao-rodape {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--p-line-soft);
  font-size: 12.5px; line-height: 1.6;
  color: var(--p-muted); text-align: center;
}
.ativacao-rodape strong { color: var(--p-graphite); font-weight: 500; }
.ativacao-rodape a { color: var(--p-indigo); font-weight: 500; }
.ativacao-rodape-comprar { margin-top: 12px; padding-top: 0; border: none; }

/* ============================================
   BANNERS DE NOTIFICAÇÃO (topo do app)
   ============================================ */
.banner-instalar {
  background: var(--p-white) !important;
  color: var(--p-graphite) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
  margin: 12px 16px 0 !important;
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner-instalar * { color: inherit !important; }
.banner-icone {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--p-cream-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.banner-texto { flex: 1; min-width: 0; }
.banner-texto strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-graphite);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.banner-texto span {
  display: block;
  font-size: 12.5px;
  color: var(--p-muted);
  line-height: 1.4;
}
.banner-cta {
  background: var(--p-graphite) !important;
  color: var(--p-white) !important;
  border: none !important;
  padding: 8px 14px !important;
  border-radius: var(--r-sm) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}
.banner-cta:hover { background: var(--p-ink) !important; }
.banner-fechar {
  background: transparent !important;
  border: none !important;
  color: var(--p-soft) !important;
  font-size: 18px !important;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.banner-fechar:hover { color: var(--p-graphite) !important; }

/* ============================================
   HEADER DO APP (Boa tarde, Nome)
   ============================================ */
.header {
  background: var(--p-white) !important;
  color: var(--p-graphite) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xs) !important;
  margin: 16px !important;
  padding: 36px 32px 28px !important;
  position: relative;
  overflow: visible !important;
}
.header::before, .header::after { display: none !important; }
.header * { color: inherit !important; }

.header-conteudo {
  position: relative;
  text-align: center;
}

.saudacao {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  display: block !important;
}

.header .nome,
.header h1.nome {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
  font-size: 56px !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--p-graphite) !important;
  margin: 0 0 14px !important;
  text-shadow: none !important;
}

.header .titulo {
  font-size: 13px !important;
  color: var(--p-muted) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.header-config-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--p-cream-soft) !important;
  color: var(--p-iron) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-full) !important;
  font-size: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.2s var(--ease-out);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.header-config-btn::before {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F3F46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.header-config-btn:hover { background: var(--p-line-soft) !important; }

/* ============================================
   MENSAGEM DO DIA
   ============================================ */
.mensagem-do-dia {
  background: var(--p-white) !important;
  border: 1px solid var(--p-line) !important;
  color: var(--p-graphite) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 22px 24px !important;
  margin: 12px 16px !important;
}
.mensagem-do-dia * { color: inherit !important; }
.mensagem-do-dia .label {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  margin-bottom: 8px !important;
}
.mensagem-do-dia .texto {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 20px !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  color: var(--p-graphite) !important;
  letter-spacing: -0.015em !important;
}

/* ============================================
   VERSÍCULO / FRASE DO DIA — manter o editorial
   ============================================ */
.versiculo {
  background: var(--p-cream-soft) !important;
  border: 1px solid var(--p-line) !important;
  color: var(--p-graphite) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 32px 28px !important;
  margin: 12px 16px !important;
  text-align: center;
}
.versiculo * { color: inherit !important; }
.versiculo-ornamento {
  color: var(--p-gold) !important;
  font-size: 16px !important;
  margin: 0 auto !important;
  opacity: 0.7;
}
.versiculo-label {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  margin: 14px 0 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p-line);
  max-width: 200px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.versiculo-texto {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 22px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: var(--p-graphite) !important;
  letter-spacing: -0.015em !important;
  margin: 20px 0 !important;
}
.versiculo-ref {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--p-indigo) !important;
  margin: 16px 0 !important;
}

/* ============================================
   STREAK
   ============================================ */
.streak-batalha {
  background: var(--p-white) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 22px 24px !important;
  margin: 12px 16px !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  color: var(--p-graphite) !important;
}
.streak-batalha * { color: inherit !important; text-shadow: none !important; }
.streak-icone {
  width: 48px !important; height: 48px !important;
  border-radius: var(--r-full) !important;
  background: var(--p-cream-soft) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px !important;
  filter: saturate(0.85);
}
.streak-info { display: flex; flex-direction: column; }
.streak-numero {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 40px !important;
  font-weight: 600 !important;
  color: var(--p-indigo) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.streak-label {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--p-muted) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}
.streak-conquista {
  font-size: 12px !important;
  color: var(--p-muted) !important;
  text-align: right;
  max-width: 140px;
  line-height: 1.4;
}

/* ============================================
   COUNTDOWN (próxima prova)
   ============================================ */
.countdown {
  background: var(--p-white) !important;
  border: 1px solid var(--p-line) !important;
  color: var(--p-graphite) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 28px 24px !important;
  margin: 12px 16px !important;
  text-align: center;
}
.countdown * { color: inherit !important; text-shadow: none !important; }
.countdown .label {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  margin-bottom: 8px !important;
}
.countdown .prova-nome {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--p-graphite) !important;
  margin: 6px 0 18px !important;
  line-height: 1.2 !important;
}
.countdown .dias {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 64px !important;
  font-weight: 600 !important;
  color: var(--p-indigo) !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
}
.countdown .unidade {
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  margin-top: 8px !important;
}
.countdown .data-prova {
  font-size: 12.5px !important;
  color: var(--p-muted) !important;
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--p-line-soft);
}

/* ============================================
   CARDS GENÉRICOS
   ============================================ */
.card {
  background: var(--p-white);
  border: 1px solid var(--p-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  padding: 22px 24px;
  margin: 12px 16px;
  transition: box-shadow 0.3s var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-titulo {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: -0.015em !important;
  color: var(--p-graphite) !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}

/* ============================================
   BOTÕES
   ============================================ */
.botao {
  background: var(--p-graphite); color: var(--p-white);
  border: none; padding: 12px 22px; border-radius: var(--r-md);
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em; cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-xs);
}
.botao:hover { background: var(--p-ink); box-shadow: var(--shadow-sm); }
.botao:focus-visible { outline: none; box-shadow: var(--foco-ring, 0 0 0 3px rgba(79,70,229,0.28)), var(--shadow-sm); }
.botao-secundario {
  background: var(--p-white); color: var(--p-graphite); border: 1px solid var(--p-line);
}
.botao-secundario:hover { background: var(--p-off-white); border-color: var(--p-soft); }
.botao-perigo {
  background: var(--p-white); color: #991B1B; border: 1px solid #FCA5A5;
}
.botao-perigo:hover { background: #FEF2F2; }

/* ============================================
   INPUTS
   ============================================ */
.input {
  width: 100%; padding: 12px 14px;
  background: var(--p-white); border: 1px solid var(--p-line);
  /* 16px: abaixo disso o iOS da zoom automatico ao focar o campo */
  border-radius: var(--r-md); font-family: inherit; font-size: 16px;
  color: var(--p-graphite); outline: none;
  transition: all 0.2s var(--ease-out);
}
.input::placeholder { color: var(--p-soft); }
.input:focus { border-color: var(--p-graphite); box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08); }
textarea.input { resize: vertical; min-height: 100px; line-height: 1.5; }

/* ============================================
   PILLS / AREA CARDS / SETUP
   ============================================ */
.pill, .setup-pills button {
  background: var(--p-white); border: 1px solid var(--p-line);
  color: var(--p-graphite); padding: 9px 16px;
  border-radius: var(--r-full); font-family: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all 0.2s var(--ease-out);
  margin: 0 6px 6px 0;
}
.pill:hover, .setup-pills button:hover { border-color: var(--p-graphite); }
.pill.selecionado, .setup-pills button.selecionado {
  background: var(--p-graphite); color: var(--p-white); border-color: var(--p-graphite);
}

.area-card {
  background: var(--p-white); border: 1px solid var(--p-line);
  border-radius: var(--r-md); padding: 18px 12px;
  text-align: center; cursor: pointer; font-family: inherit;
  transition: all 0.2s var(--ease-out);
}
.area-card:hover { border-color: var(--p-graphite); background: var(--p-off-white); box-shadow: var(--shadow-sm); }
.area-card:focus-visible { outline: none; box-shadow: var(--foco-ring, 0 0 0 3px rgba(79,70,229,0.28)); }
.area-card.selecionado {
  border-color: var(--p-graphite); background: var(--p-cream-soft);
  box-shadow: inset 0 0 0 1px var(--p-graphite);
}
.area-card .emoji { font-size: 24px; display: block; margin-bottom: 4px; }
.area-card .nome { font-size: 13px; font-weight: 500; color: var(--p-graphite); }

.setup-wizard { max-width: 480px; padding: 48px 24px 80px; }
.setup-progress { height: 3px; background: var(--p-line); border-radius: var(--r-full); }
.setup-progress-fill { background: var(--p-graphite) !important; border-radius: var(--r-full); }
.setup-titulo {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 500 !important; font-size: 34px !important;
  letter-spacing: -0.02em !important; color: var(--p-graphite) !important; line-height: 1.1 !important;
}
.setup-subtitulo { font-size: 15px !important; color: var(--p-slate) !important; }
.setup-emoji { font-size: 36px; margin-bottom: 12px; }
.botao-setup {
  background: var(--p-graphite); color: var(--p-white); border: none;
  padding: 13px 28px; border-radius: var(--r-md);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s var(--ease-out); box-shadow: var(--shadow-xs);
}
.botao-setup:hover { background: var(--p-ink); box-shadow: var(--shadow-sm); }
.botao-setup:focus-visible { outline: none; box-shadow: var(--foco-ring, 0 0 0 3px rgba(79,70,229,0.28)); }
.botao-voltar { background: var(--p-white); color: var(--p-slate); border: 1px solid var(--p-line); }

/* ============================================
   BOTTOM NAV — refinada com SVG icons
   ============================================ */
.nav-inferior {
  background: rgba(245, 241, 232, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--p-line) !important;
  box-shadow: 0 -1px 2px rgba(10, 10, 10, 0.02);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
}
.nav-btn {
  background: transparent !important;
  border: none !important;
  color: var(--p-soft) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px !important;
  cursor: pointer;
  transition: color 0.2s var(--ease-out);
  border-radius: var(--r-md);
  position: relative;
}
.nav-btn .icone {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}
.nav-btn .icone svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}
.nav-btn:hover { color: var(--p-iron) !important; }
.nav-btn.ativo {
  color: var(--p-graphite) !important;
}
.nav-btn.ativo::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--p-indigo);
}
/* ============================================
   DARK MODE — AULA CARDS (alta contrastao com cor visivel)
   ============================================
   styles.css linha 1396 define .aula-card com background:white fixo (nao usa CSS var),
   entao em dark mode ficava branco brilhante com texto pouco legivel. Aqui invertemos:
   fundo escuro suave, texto claro, borda colorida MAIS espessa pra identificar
   visualmente a materia. */
:root[data-theme="dark"] .aula-card {
  background: var(--p-cream-soft) !important;
  border-left-width: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.03);
}
:root[data-theme="dark"] .aula-nome {
  color: var(--p-ink) !important;
  font-weight: 600;
}
:root[data-theme="dark"] .aula-hora {
  color: var(--p-iron) !important;
  opacity: 1;
}
:root[data-theme="dark"] .aula-detalhes,
:root[data-theme="dark"] .aula-detalhes .det-item {
  color: var(--p-iron) !important;
}
:root[data-theme="dark"] .aula-editar-icone {
  opacity: 0.55;
  filter: brightness(1.4);
}
/* Cores do border-left ficam mais saturadas no dark pra terem presenca contra o fundo escuro */
:root[data-theme="dark"] .aula-card.aula-cor-rosa         { border-left-color: #FF7FA8; }
:root[data-theme="dark"] .aula-card.aula-cor-verde        { border-left-color: #95D199; }
:root[data-theme="dark"] .aula-card.aula-cor-verde-escuro { border-left-color: #6CAE7E; }
:root[data-theme="dark"] .aula-card.aula-cor-azul         { border-left-color: #87BEEA; }
:root[data-theme="dark"] .aula-card.aula-cor-amarelo      { border-left-color: #F2D55C; }
:root[data-theme="dark"] .aula-card.aula-cor-amarelo-claro{ border-left-color: #FAE890; }
:root[data-theme="dark"] .aula-card.aula-cor-roxo         { border-left-color: #C09BE0; }
:root[data-theme="dark"] .aula-card.aula-cor-laranja      { border-left-color: #FFAE73; }

/* ============================================
   DARK MODE — ELIMINA FUNDOS/BORDAS CREME EM TODO O APP
   ============================================
   styles.css tem varios elementos com background fixo (white, #FFFBF7, #FFF8EC, etc)
   que nao respeitam o tema. Aqui forçamos eles a usar a paleta dark do premium.css. */

/* Containers de dia da grade (Segunda-feira, Terça-feira, etc) */
:root[data-theme="dark"] .grade-dia {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .grade-dia.dia-hoje {
  background: linear-gradient(135deg, var(--p-cream-deep) 0%, var(--p-cream-soft) 100%) !important;
  border-color: var(--p-gold) !important;
  box-shadow: 0 2px 10px rgba(201, 175, 128, 0.18) !important;
}
:root[data-theme="dark"] .grade-dia-titulo {
  color: var(--p-ink) !important;
}
:root[data-theme="dark"] .grade-dia-titulo .hoje-marca {
  background: var(--p-gold) !important;
  color: var(--p-graphite) !important;
}

/* Cards/wrappers principais */
:root[data-theme="dark"] .card {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
}

/* Tags coloridas que tinham fundo creme */
:root[data-theme="dark"] .tag-materia {
  background: rgba(154, 160, 224, 0.12) !important;
  color: var(--p-indigo) !important;
}
:root[data-theme="dark"] .tag-professor {
  background: rgba(201, 175, 128, 0.12) !important;
  color: var(--p-gold) !important;
}
:root[data-theme="dark"] .historico-postits-badge {
  background: rgba(242, 213, 92, 0.15) !important;
  color: #F2D55C !important;
}
:root[data-theme="dark"] .historico-quiz-badge {
  background: rgba(154, 160, 224, 0.15) !important;
  color: var(--p-indigo) !important;
}

/* Postits section */
:root[data-theme="dark"] .postits-section {
  background: var(--p-cream-deep) !important;
  border-color: rgba(201, 175, 128, 0.25) !important;
}
:root[data-theme="dark"] .postit-novo textarea,
:root[data-theme="dark"] .postit-item {
  background: var(--p-cream-soft) !important;
  border-color: rgba(201, 175, 128, 0.30) !important;
  color: var(--p-graphite) !important;
}

/* Chips e botoes secundarios */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .botao-mini,
:root[data-theme="dark"] .campo-tipo-opcao,
:root[data-theme="dark"] .campo-icone-opcao {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
  color: var(--p-graphite) !important;
}
:root[data-theme="dark"] .chip:hover,
:root[data-theme="dark"] .botao-mini:hover {
  background: var(--p-cream-deep) !important;
}

/* Cards estranhos com background fixo (resumo-ia, etc) */
:root[data-theme="dark"] .resumo-ia,
:root[data-theme="dark"] .historico-item {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
}

/* ============================================
   DARK MODE — NOTAS / MATERIAS / PROXIMA PROVA
   ============================================ */

/* Stats de cima (GARANTIDAS / EM JOGO / ATENCAO) */
:root[data-theme="dark"] .notas-resumo-item {
  background: var(--p-cream-deep) !important;
  border: 1px solid var(--p-line);
}
:root[data-theme="dark"] .notas-resumo-numero {
  color: var(--p-indigo) !important;
}
:root[data-theme="dark"] .notas-resumo-label {
  color: var(--p-iron) !important;
}

/* Cards de materia (Gestao de Operacoes, Agri Cases, etc) */
:root[data-theme="dark"] .materia-notas-card {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
  border-left-width: 6px;
}
:root[data-theme="dark"] .materia-notas-nome {
  color: var(--p-ink) !important;
}
:root[data-theme="dark"] .materia-notas-meta-linha {
  color: var(--p-iron) !important;
}

/* Border-left mais saturado pra ficar visivel contra fundo escuro */
:root[data-theme="dark"] .materia-notas-card.cor-rosa     { border-left-color: #FF7FA8 !important; }
:root[data-theme="dark"] .materia-notas-card.cor-verde    { border-left-color: #95D199 !important; }
:root[data-theme="dark"] .materia-notas-card.cor-azul     { border-left-color: #87BEEA !important; }
:root[data-theme="dark"] .materia-notas-card.cor-amarelo  { border-left-color: #F2D55C !important; }
:root[data-theme="dark"] .materia-notas-card.cor-roxo     { border-left-color: #C09BE0 !important; }
:root[data-theme="dark"] .materia-notas-card.cor-laranja  { border-left-color: #FFAE73 !important; }

/* Badges de status (EM RISCO, EM JOGO, APROVADO) — versoes dark */
:root[data-theme="dark"] .status-badge.aprovado  { background: rgba(102, 187, 106, 0.20) !important; color: #95E69A !important; }
:root[data-theme="dark"] .status-badge.em-jogo   { background: rgba(255, 179, 0, 0.20) !important; color: #FFD37A !important; }
:root[data-theme="dark"] .status-badge.em-risco  { background: rgba(251, 140, 0, 0.22) !important; color: #FFB570 !important; }
:root[data-theme="dark"] .status-badge.reprovado { background: rgba(229, 57, 53, 0.22) !important; color: #FF8A85 !important; }
:root[data-theme="dark"] .status-badge.pendente  { background: var(--p-cream-deep) !important; color: var(--p-iron) !important; }

/* Barra de progresso */
:root[data-theme="dark"] .materia-notas-progresso {
  background: var(--p-cream-deep) !important;
}

/* Linhas de avaliacao (AV1, ATV1, EX) */
:root[data-theme="dark"] .aval-linha {
  border-bottom-color: var(--p-line) !important;
}
:root[data-theme="dark"] .aval-nome {
  color: var(--p-graphite) !important;
}
:root[data-theme="dark"] .aval-nome small,
:root[data-theme="dark"] .aval-peso {
  color: var(--p-iron) !important;
}
:root[data-theme="dark"] .aval-nota-input {
  background: var(--p-cream-deep) !important;
  border-color: var(--p-line) !important;
  color: var(--p-ink) !important;
}
:root[data-theme="dark"] .aval-nota-input.preenchida {
  background: var(--p-graphite) !important;
  color: var(--p-cream) !important;
}
:root[data-theme="dark"] .aval-nota-input:focus {
  border-color: var(--p-indigo) !important;
}

/* Caixa de conclusao no final do card (Media: 6.0 ...) */
:root[data-theme="dark"] .materia-notas-conclusao {
  background: var(--p-cream-deep) !important;
  color: var(--p-graphite) !important;
}
:root[data-theme="dark"] .materia-notas-conclusao strong,
:root[data-theme="dark"] .materia-notas-conclusao .precisa-tirar {
  color: var(--p-indigo) !important;
}
:root[data-theme="dark"] .materia-notas-conclusao.aprovado {
  background: rgba(102, 187, 106, 0.15) !important;
  color: #95E69A !important;
}
:root[data-theme="dark"] .materia-notas-conclusao.aprovado strong {
  color: #B4F0B8 !important;
}
:root[data-theme="dark"] .materia-notas-conclusao.reprovado {
  background: rgba(229, 57, 53, 0.15) !important;
  color: #FF8A85 !important;
}
:root[data-theme="dark"] .materia-notas-conclusao.reprovado strong {
  color: #FFB0AC !important;
}

/* Cards "Depois dessa" e "Em seguida" (proximas provas) */
:root[data-theme="dark"] .prova-mini {
  background: linear-gradient(180deg, var(--p-cream-soft) 0%, var(--p-cream-deep) 100%) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .prova-mini-ordem {
  color: var(--p-indigo) !important;
}
:root[data-theme="dark"] .prova-mini-nome {
  color: var(--p-ink) !important;
}
:root[data-theme="dark"] .prova-mini-data {
  color: var(--p-iron) !important;
}
:root[data-theme="dark"] .prova-mini-dias {
  color: var(--p-indigo) !important;
}

/* Aba Post-its: grupos */
:root[data-theme="dark"] .postits-grupo {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .postits-grupo-titulo {
  color: var(--p-ink) !important;
}
:root[data-theme="dark"] .postits-grupo-meta {
  color: var(--p-iron) !important;
}
:root[data-theme="dark"] .postits-grupo-cabecalho {
  border-bottom-color: var(--p-line) !important;
}

/* Mapa Mental — tabs de estilo + livro + baloes em dark */
:root[data-theme="dark"] .mapa-estilo-btn {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
  color: var(--p-graphite) !important;
}
:root[data-theme="dark"] .mapa-estilo-ativo {
  background: var(--p-graphite) !important;
  color: var(--p-cream) !important;
  border-color: var(--p-graphite) !important;
}
:root[data-theme="dark"] .mapa-livro-topico {
  color: var(--p-ink) !important;
  border-bottom-color: var(--p-line) !important;
}
:root[data-theme="dark"] .mapa-livro-ramo {
  background: rgba(255, 255, 255, 0.03) !important;
}
:root[data-theme="dark"] .mapa-livro-bullet,
:root[data-theme="dark"] .mapa-livro-d2 { color: var(--p-graphite) !important; }
:root[data-theme="dark"] .mapa-livro-d3 { color: var(--p-iron) !important; }

:root[data-theme="dark"] .mapa-balao {
  background: var(--p-cream-soft) !important;
}
:root[data-theme="dark"] .balao-bullet { color: var(--p-graphite) !important; }
:root[data-theme="dark"] .balao-bullet-sub { color: var(--p-iron) !important; }
:root[data-theme="dark"] .balao-subgrupo {
  border-left-color: rgba(255, 255, 255, 0.10) !important;
}

:root[data-theme="dark"] .nav-inferior {
  background: rgba(30, 27, 22, 0.85) !important;
}
:root[data-theme="dark"] .nav-btn.ativo::after { background: var(--p-gold); }

/* ============================================
   MODAIS
   ============================================ */
.modal-overlay {
  background: rgba(10, 10, 10, 0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-conteudo {
  background: var(--p-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--p-line);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 32px 80px -16px rgba(10, 10, 10, 0.20);
  padding: 36px 32px 28px;
}
.modal-titulo {
  font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 500 !important; font-size: 28px !important;
  letter-spacing: -0.015em !important; color: var(--p-graphite) !important;
}
.modal-subtitulo { font-size: 14px !important; color: var(--p-slate) !important; }

/* ============================================
   MODAL DE AJUSTES — refinado
   ============================================ */
#modal-config .modal-conteudo {
  max-width: 540px;
  max-height: 92vh;
  padding: 0;
  border-radius: var(--r-xl);
  /* overflow-y: auto deixa o conteudo rolar quando passa de 92vh; */
  /* combinado com position:sticky no .modal-acoes, os botoes ficam fixos no rodape */
  overflow-y: auto;
  overflow-x: hidden;
}
#modal-config .modal-titulo,
#modal-config > .modal-conteudo > .modal-titulo {
  padding: 32px 32px 0;
  margin-bottom: 4px !important;
}
#modal-config > .modal-conteudo > .modal-subtitulo {
  padding: 0 32px;
  margin-bottom: 24px !important;
}
#modal-config .campo {
  padding: 16px 32px;
  border-top: 1px solid var(--p-line-soft);
}
#modal-config .campo:first-of-type { border-top: none; }
#modal-config .campo-label {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--p-muted) !important;
  margin-bottom: 10px !important;
  display: block;
}
#modal-config .input,
#modal-config input[type="text"],
#modal-config input[type="email"],
#modal-config input[type="password"] {
  background: var(--p-off-white) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-md) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
}
#modal-config .input:focus {
  border-color: var(--p-graphite) !important;
  background: var(--p-white) !important;
}
#modal-config .dica-card {
  background: var(--p-cream-soft) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  color: var(--p-slate) !important;
  line-height: 1.55;
  margin-top: 10px;
}
#modal-config .modal-acoes {
  padding: 16px 32px;
  background: var(--p-cream-soft);
  border-top: 1px solid var(--p-line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  /* sticky no rodape do scroll container — botoes sempre visiveis no desktop tambem */
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-wrap: wrap;
}
/* Em modais altos, garante que o conteudo nao fique escondido sob a barra de acoes sticky */
#modal-config .config-secao:last-of-type {
  padding-bottom: 8px;
}

/* ============================================
   AJUSTES — SECOES AGRUPADAS + DETAILS EXPANSIVEIS
   ============================================
   Reorganiza o modal em 4 secoes claras (Personalizacao, Pomodoro, IA, Backup)
   com cabecalho proprio. Long-form info vai pra dentro de <details> fechado
   por padrao, eliminando a sensacao de "poluicao" visual. */
.config-secao {
  padding: 18px 32px;
  border-top: 1px solid var(--p-line-soft);
}
.config-secao:first-of-type { border-top: none; padding-top: 4px; }
.config-secao-titulo {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-muted);
  margin: 0 0 14px 0;
}
.config-secao .campo {
  padding: 0;
  border-top: none;
  margin-bottom: 0;
}
.config-secao .campo + .campo { margin-top: 14px; }
.config-secao .campo-label {
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: var(--p-graphite) !important;
  margin-bottom: 8px !important;
}
.campo-opt {
  color: var(--p-muted);
  font-weight: 400;
  font-size: 11px;
  font-style: italic;
}

/* botao "Testar som" — link discreto sob as pills */
.botao-link-config {
  background: none;
  border: none;
  color: var(--p-indigo);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0 0 0;
  margin-top: 4px;
  letter-spacing: 0;
}
.botao-link-config:hover { text-decoration: underline; }

/* <details> de info expansivel — substitui dica-cards longos */
.config-detalhe {
  margin-top: 10px;
  border: 1px solid var(--p-line);
  border-radius: var(--r-md);
  background: var(--p-off-white);
  overflow: hidden;
}
.config-detalhe + .config-detalhe { margin-top: 8px; }
.config-detalhe summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--p-slate);
  position: relative;
  user-select: none;
  transition: background 0.15s;
}
.config-detalhe summary::-webkit-details-marker { display: none; }
.config-detalhe summary::after {
  content: '+';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  color: var(--p-muted);
  transition: transform 0.2s;
}
.config-detalhe[open] summary::after {
  content: '−';
}
.config-detalhe summary:hover { background: var(--p-line-soft); }
.config-detalhe-conteudo {
  padding: 0 14px 12px 14px;
  border-top: 1px solid var(--p-line-soft);
  padding-top: 12px;
}
.config-detalhe-conteudo p {
  margin: 0 0 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-slate);
}
.config-detalhe-conteudo p:last-child { margin-bottom: 0; }
.config-detalhe-conteudo .dica-rodape {
  font-size: 11.5px;
  color: var(--p-muted);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--p-line);
}
.config-detalhe-conteudo a {
  color: var(--p-indigo);
  text-decoration: underline;
}
.config-detalhe-conteudo code {
  background: var(--p-line-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', monospace;
}
.config-detalhe-conteudo .backup-acoes {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.config-detalhe-conteudo .backup-acoes .botao { flex: 1; padding: 9px 12px; font-size: 13px; }

/* Em mobile, reduz padding lateral nas secoes pra alinhar com fullscreen */
@media (max-width: 768px) {
  .config-secao {
    padding: 16px 20px;
  }
}

/* ============================================
   MODAL DE AJUSTES — fullscreen no celular
   ============================================
   No mobile (<= 768px), o modal de Ajustes vira tela inteira.
   Antes ficava com max-height: 90vh + padding do overlay, cortando o
   conteudo da secao Google Drive (que vem no fim do scroll). Agora ocupa
   100vh com scroll interno proprio. */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0 !important;
  }
  #modal-config .modal-conteudo {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh; /* dynamic viewport — conta com barra de URL do mobile */
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0); /* iOS notch */
    display: flex;
    flex-direction: column;
  }
  #modal-config .modal-titulo,
  #modal-config > .modal-conteudo > .modal-titulo {
    padding: max(env(safe-area-inset-top, 20px), 20px) 20px 0;
  }
  #modal-config > .modal-conteudo > .modal-subtitulo {
    padding: 0 20px;
  }
  #modal-config .campo {
    padding: 16px 20px;
  }
  #modal-config .modal-acoes {
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0));
    position: sticky;
    bottom: 0;
    margin-top: auto;
  }
}

/* ============================================
   FAB FEEDBACK
   ============================================ */
.fab-feedback {
  border: 1px solid var(--p-line);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  color: var(--p-graphite);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.fab-feedback:hover { border-color: var(--p-graphite); box-shadow: var(--shadow-md); }
.fab-feedback svg { stroke: var(--p-graphite); }

/* ============================================
   TIPOGRAFIA INLINE
   ============================================ */
strong { font-weight: 600; color: inherit; }
a { color: var(--p-indigo); text-decoration: none; transition: opacity 0.15s; }
a:hover { opacity: 0.7; }
h1, h2, h3 { letter-spacing: -0.015em; color: var(--p-graphite); }
::selection { background: var(--p-graphite); color: var(--p-white); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10, 10, 10, 0.10); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(10, 10, 10, 0.18); }

@media (max-width: 480px) {
  .ativacao-card,
  .ativacao-card-grande { padding: 36px 26px 28px; border-radius: var(--r-lg); }
  .ativacao-marca { font-size: 28px; }
  .ativacao-titulo { font-size: 22px; }
  .header { padding: 28px 20px 22px !important; }
  .header .nome { font-size: 44px !important; }
  .countdown .dias { font-size: 52px !important; }
  .countdown .prova-nome { font-size: 20px !important; }
  .setup-titulo { font-size: 28px !important; }
}

/* ============================================
   DARK MODE — biblioteca à noite (tons suaves)
   ============================================ */
:root[data-theme="dark"] {
  /* Texto: tom marfim/champagne em vez de branco puro */
  --p-ink:        #F0EBE0;
  --p-graphite:   #DDD6C7;
  --p-charcoal:   #C8C0AF;
  --p-iron:       #A89F8C;
  --p-slate:      #888272;
  --p-muted:      #6E695B;
  --p-soft:       #54504A;
  --p-line:       #2A2722;
  --p-line-soft:  #221F1B;

  /* Fundos: warm dark com tom marrom, NÃO preto */
  --p-cream:      #1E1B16;
  --p-cream-soft: #25221C;
  --p-cream-deep: #2C2822;
  --p-white:      #26221C;
  --p-off-white:  #221F19;

  /* Indigo dessaturado pro acento */
  --p-indigo:      #9AA0E0;
  --p-indigo-dark: #7E84C7;
  --p-indigo-pale: rgba(154, 160, 224, 0.08);
  --p-indigo-ghost: rgba(154, 160, 224, 0.05);

  --p-gold:        #C9AF80;

  --cor-principal: var(--p-indigo);
  --cor-escura:    var(--p-indigo-dark);
  --cor-suave:     var(--p-line);
  --cor-bebe:      var(--p-cream-deep);
  --texto-principal: var(--p-graphite);
  --texto-suave:   var(--p-slate);
  --bg-principal:  var(--p-cream);

  --rosa-principal: var(--p-indigo);
  --rosa-vibrante:  var(--p-indigo-dark);
  --rosa-claro:     var(--p-line);
  --rosa-medio:     var(--p-line);
  --rosa-escuro:    var(--p-graphite);
  --rosa-suave:     var(--p-cream-deep);
  --rosa-bebe:      var(--p-cream-deep);
  --rosa-pastel:    var(--p-cream-deep);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 16px rgba(0, 0, 0, 0.35), 0 16px 32px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 4px 6px rgba(0, 0, 0, 0.35), 0 20px 40px -12px rgba(0, 0, 0, 0.50);
}

:root[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 60% 45% at 10% 8%, rgba(154, 160, 224, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 88% 32%, rgba(201, 175, 128, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 70% 35% at 50% 95%, rgba(201, 175, 128, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 95% 80%, rgba(154, 160, 224, 0.05) 0%, transparent 55%);
}
:root[data-theme="dark"] body::after {
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.72 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === Frases decorativas / vazios / ornamentos no dark === */
:root[data-theme="dark"] .frase-foco-decorativa {
  color: var(--p-graphite) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  opacity: 0.92;
}
.frase-foco-decorativa {
  color: var(--p-graphite) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}
:root[data-theme="dark"] .vazio {
  color: var(--p-iron) !important;
  opacity: 0.85;
}
.vazio {
  color: var(--p-muted) !important;
  font-size: 13.5px !important;
}
:root[data-theme="dark"] .ornamento {
  color: var(--p-gold) !important;
  opacity: 0.55;
}
.ornamento {
  color: var(--p-gold) !important;
  opacity: 0.7;
}

/* Datas/labels secundários no dark — garantir leitura */
:root[data-theme="dark"] .countdown .data-prova,
:root[data-theme="dark"] .saudacao,
:root[data-theme="dark"] .header .titulo,
:root[data-theme="dark"] .streak-label,
:root[data-theme="dark"] .countdown .label,
:root[data-theme="dark"] .countdown .unidade,
:root[data-theme="dark"] .mensagem-do-dia .label,
:root[data-theme="dark"] .versiculo-label,
:root[data-theme="dark"] .card-titulo + p,
:root[data-theme="dark"] .dica-card,
:root[data-theme="dark"] .campo-hint {
  color: var(--p-iron) !important;
}

/* Texto principal de cards no dark deve ser bem legível */
:root[data-theme="dark"] .header .nome,
:root[data-theme="dark"] .countdown .prova-nome,
:root[data-theme="dark"] .mensagem-do-dia .texto,
:root[data-theme="dark"] .versiculo-texto,
:root[data-theme="dark"] .card-titulo,
:root[data-theme="dark"] .modal-titulo {
  color: var(--p-ink) !important;
}

/* === Pomodoro: tons suaves no dark === */
:root[data-theme="dark"] .pomodoro-card {
  background: var(--p-cream-soft) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .pomodoro-timer {
  color: var(--p-graphite) !important;
  text-shadow: none !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em;
}
:root[data-theme="dark"] .pomodoro-status,
:root[data-theme="dark"] .pomodoro-ciclo,
:root[data-theme="dark"] .pomodoro-dica {
  color: var(--p-slate) !important;
}

/* Suaviza inputs/cards no dark — bordas menos contrastantes */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--p-off-white) !important;
  color: var(--p-graphite) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .input:focus {
  border-color: var(--p-iron) !important;
  box-shadow: 0 0 0 3px rgba(168, 159, 140, 0.12) !important;
}

/* Botões no dark — softer */
:root[data-theme="dark"] .botao,
:root[data-theme="dark"] .botao-ativacao,
:root[data-theme="dark"] .botao-setup,
:root[data-theme="dark"] .banner-cta {
  background: var(--p-graphite) !important;
  color: var(--p-cream) !important;
}
:root[data-theme="dark"] .botao:hover,
:root[data-theme="dark"] .botao-ativacao:hover {
  background: var(--p-ink) !important;
}
:root[data-theme="dark"] .botao-secundario {
  background: transparent !important;
  color: var(--p-graphite) !important;
  border-color: var(--p-line) !important;
}

/* Streak / countdown números no dark — tom champagne, não bright */
:root[data-theme="dark"] .streak-numero,
:root[data-theme="dark"] .countdown .dias {
  color: var(--p-gold) !important;
}

:root[data-theme="dark"] .header,
:root[data-theme="dark"] .banner-instalar,
:root[data-theme="dark"] .mensagem-do-dia,
:root[data-theme="dark"] .streak-batalha,
:root[data-theme="dark"] .countdown,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .ativacao-card,
:root[data-theme="dark"] .ativacao-card-grande,
:root[data-theme="dark"] .modal-conteudo {
  background: var(--p-white) !important;
  border-color: var(--p-line) !important;
}
:root[data-theme="dark"] .versiculo {
  background: var(--p-cream-deep) !important;
}

/* === Toggle de tema (botão flutuante no header) === */
.theme-toggle {
  position: absolute !important;
  top: 0;
  right: 48px;
  width: 36px;
  height: 36px;
  background: var(--p-cream-soft);
  color: var(--p-iron);
  border: 1px solid var(--p-line);
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-out);
}
:root[data-theme="dark"] .theme-toggle {
  background: var(--p-cream-deep);
  color: var(--p-iron);
}
.theme-toggle:hover { background: var(--p-line-soft); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }