/* ============================================================
   Neurostars — Dark theme (modo escuro)
   Ativado por html[data-theme="dark"] (botão na topbar; a
   preferência fica em localStorage["neurostars.theme.v1"]).
   Paleta: preto/grafite com acentos amarelo-ouro. Carrega por
   ÚLTIMO e re-sobrescreve os tokens e os remendos claros do
   theme-light.css — sem tocar nos arquivos base.
   ============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- Surfaces (grafite) ---------- */
  --noir:        #07080B;   /* o mais fundo; também texto sobre amarelo */
  --ink:         #0E1014;   /* fundo primário                            */
  --ink-2:       #16191F;   /* cartão / painel                           */
  --ink-3:       #1D2129;   /* superfície de hover                       */
  --ink-4:       #2B303B;   /* bordas                                    */

  /* ---------- Texto sobre superfícies escuras ---------- */
  --marfim:      #F1F2F4;   /* texto primário                            */
  --pergaminho:  #1A1D24;   /* "papel" — frente do flashcard (escuro)    */
  --pergaminho-2:#15181E;   /* verso do flashcard                        */
  --niebla:      #8B94A3;   /* terciário apagado                         */

  /* ---------- Amarelos (a espinha da marca no escuro) ---------- */
  --ouro-pale:   #F7D877;   /* amarelo claro                             */
  --ouro:        #E9BC45;   /* amarelo primário                          */
  --ouro-deep:   #C29321;   /* amarelo profundo                          */
  --ouro-antigo: #D9A63C;   /* latão                                     */

  /* ---------- Cinzas de apoio (usados como texto em cartões) ---------- */
  --tabaco-1:    #99A2B1;
  --tabaco-2:    #B4BCC9;
  --tabaco-3:    #C7CDD9;
  --mogno:       #232830;
  --mogno-deep:  #14171D;

  /* ---------- Verde (botão "fácil") e vermelho (perigo) ---------- */
  --verde-fundo: #202730;
  --verde-mid:   #2E3946;
  --verde-claro: #83BF97;
  --rubi:        #E0697A;

  /* ---------- Semânticos ---------- */
  --bg:           var(--ink);
  --bg-elevated:  var(--ink-2);
  --bg-sunken:    #0A0C0F;
  --bg-paper:     var(--pergaminho);
  --bg-paper-2:   var(--pergaminho-2);

  --fg:           #F1F2F4;
  --fg-2:         #C3C9D2;
  --fg-3:         #8B94A3;
  --fg-on-paper:  #F1F2F4;
  --fg-on-paper-2:#C7CDD9;

  --accent:       #E9BC45;
  --accent-pale:  #F7D877;
  --accent-deep:  #C29321;

  --line:         rgba(233, 188, 69, 0.16);
  --line-strong:  rgba(233, 188, 69, 0.40);
  --line-paper:   rgba(233, 188, 69, 0.14);

  /* ---------- Sombras (noturnas, com brilho quente sutil) ---------- */
  --shadow-1: 0 1px 0 rgba(255, 235, 180, 0.03) inset,
              0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 0 rgba(255, 235, 180, 0.04) inset,
              0 8px 22px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 1px 0 rgba(255, 235, 180, 0.05) inset,
              0 24px 60px -10px rgba(0, 0, 0, 0.75);
  --shadow-gold-glow: 0 0 0 1px rgba(233, 188, 69, 0.4),
                      0 0 22px rgba(233, 188, 69, 0.22);
  --shadow-inset-vignette: inset 0 0 120px rgba(0, 0, 0, 0.55);

  /* ---------- Réguas ---------- */
  --rule-thin:   1px solid var(--line);
  --rule:        1px solid var(--line-strong);
  --rule-gold:   1px solid var(--accent);
  --rule-double: 3px double var(--accent);
}

/* ============================================================
   Remendos por componente — desfazem os literais claros do
   theme-light.css (fundos brancos, azuis, texto branco).
   ============================================================ */

html[data-theme="dark"] body {
  background:
    radial-gradient(120% 80% at 50% -10%,
      rgba(233, 188, 69, 0.05) 0%,
      rgba(14, 16, 20, 0) 60%),
    var(--ink) !important;
  color: var(--fg);
}

/* Topbar — vidro escuro */
html[data-theme="dark"] .topbar {
  background: rgba(10, 11, 14, 0.82) !important;
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .topbar--floating {
  background: rgba(10, 11, 14, 0.45) !important;
}
html[data-theme="dark"] .topbar__avatar { background: rgba(233, 188, 69, 0.12); }

/* Botões */
html[data-theme="dark"] .btn {
  color: var(--marfim);
  border: 1px solid var(--line-strong);
  background: transparent;
}
html[data-theme="dark"] .btn:hover {
  border-color: var(--accent);
  color: var(--accent-pale);
  background: rgba(233, 188, 69, 0.07);
}
html[data-theme="dark"] .btn--primary {
  background: var(--accent);
  color: var(--noir);
  border-color: var(--accent);
}
html[data-theme="dark"] .btn--primary:hover {
  background: var(--accent-pale);
  border-color: var(--accent-pale);
  color: var(--noir);
}
html[data-theme="dark"] .btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: var(--line);
}
html[data-theme="dark"] .btn--ghost:hover {
  border-color: var(--line-strong);
  color: var(--marfim);
  background: rgba(255, 255, 255, 0.03);
}

/* Campos de texto */
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea {
  background: #12151A;
  color: var(--marfim);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .textarea:focus {
  border-color: var(--accent);
  background: #12151A;
  box-shadow: 0 0 0 3px rgba(233, 188, 69, 0.12);
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: var(--fg-3); }

/* Cartões de deck */
html[data-theme="dark"] .deck-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .deck-card:hover {
  border-color: var(--accent);
  background: var(--ink-3);
  box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .deck-card::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233, 188, 69, 0.10), transparent 65%);
}
html[data-theme="dark"] .deck-card--new {
  background: rgba(255, 255, 255, 0.02);
}
html[data-theme="dark"] .draft-banner { background: rgba(233, 188, 69, 0.06); }

/* Toast */
html[data-theme="dark"] .toast {
  background: var(--ink-3);
  color: var(--marfim);
  border: 1px solid var(--accent);
}

/* ---------- LANDING ---------- */
html[data-theme="dark"] .landing__art { background: #0B0D11; }
html[data-theme="dark"] .landing__art::before {
  border-color: rgba(233, 188, 69, 0.28);
}
html[data-theme="dark"] .landing__art::after {
  background:
    radial-gradient(110% 80% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28));
}
html[data-theme="dark"] .landing__art img {
  mix-blend-mode: normal;
  filter: brightness(0.9) contrast(1.04) saturate(0.92);
  opacity: 0.98;
}
html[data-theme="dark"] .landing__art-tag {
  color: var(--accent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .landing__art-tag .lat {
  color: var(--marfim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] .neuron-node__glow {
  background: radial-gradient(circle, rgba(233, 188, 69, 0.4) 0%, rgba(233, 188, 69, 0) 68%);
}
html[data-theme="dark"] .neuron-node__core {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
html[data-theme="dark"] .neuron-field__hint { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

/* ---------- HOME ---------- */
html[data-theme="dark"] .path-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .path-card:hover {
  border-color: var(--accent);
  background: var(--ink-3);
  box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .path-card::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233, 188, 69, 0.09), transparent 65%);
}
html[data-theme="dark"] .pathflow__card.is-active .pathflow__node {
  filter: drop-shadow(0 0 8px rgba(233, 188, 69, 0.5));
}
html[data-theme="dark"] .pathflow__stop.is-active .pathflow__stop-node {
  box-shadow: 0 0 0 4px rgba(233, 188, 69, 0.14), 0 0 12px rgba(233, 188, 69, 0.5);
}

/* ---------- ESTUDO — flashcard escuro ---------- */
html[data-theme="dark"] .flashcard__face {
  background: var(--ink-2);
  color: var(--marfim);
  border: 1px solid rgba(233, 188, 69, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 80px -24px rgba(0, 0, 0, 0.8),
    0 12px 32px rgba(0, 0, 0, 0.5);
  background-image:
    radial-gradient(140% 90% at 50% 50%,
      transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}
html[data-theme="dark"] .flashcard__face--back {
  background: #14171D;
  background-image:
    radial-gradient(140% 90% at 50% 50%,
      transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}
html[data-theme="dark"] .flashcard__face::before {
  border-color: rgba(233, 188, 69, 0.16);
}
html[data-theme="dark"] .flashcard__body {
  scrollbar-color: rgba(233, 188, 69, 0.35) transparent;
}
html[data-theme="dark"] .flashcard__body::-webkit-scrollbar-thumb {
  background: rgba(233, 188, 69, 0.3);
}
html[data-theme="dark"] .flashcard__img {
  border-color: rgba(233, 188, 69, 0.22);
}
html[data-theme="dark"] .study__counter--btn:hover {
  background: rgba(233, 188, 69, 0.07);
}
html[data-theme="dark"] .study__nav-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
html[data-theme="dark"] .study__nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-pale);
}
html[data-theme="dark"] .study__flip-btn {
  background: var(--accent);
  color: var(--noir);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(233, 188, 69, 0.22);
}
html[data-theme="dark"] .study__flip-btn:hover {
  background: var(--accent-pale);
  border-color: var(--accent-pale);
}

/* ---------- CRIAR / EDITAR ---------- */
html[data-theme="dark"] .card-editor {
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* ---------- IMPORTAR ---------- */
html[data-theme="dark"] .dropzone {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--line-strong);
}
html[data-theme="dark"] .dropzone.is-drag {
  border-color: var(--accent);
  background: rgba(233, 188, 69, 0.05);
}
html[data-theme="dark"] .import-result {
  background: var(--ink-2);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-2);
}
html[data-theme="dark"] .import-error {
  background: rgba(224, 105, 122, 0.08);
  border: 1px solid rgba(224, 105, 122, 0.45);
  color: #F096A3;
}

/* ---------- MENU MOBILE ---------- */
html[data-theme="dark"] .mobile-overlay { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .mobile-menu {
  background: var(--ink-2);
  border-left: 1px solid var(--line);
}

/* ---------- EMBARALHAR ---------- */
html[data-theme="dark"] .shuffle-toggle {
  border-color: var(--line);
  color: var(--fg-3);
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .shuffle-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="dark"] .shuffle-toggle.is-on {
  background: rgba(233, 188, 69, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- BOTÕES DE DIFICULDADE ---------- */
html[data-theme="dark"] .difficulty-btn--hard {
  background: rgba(224, 105, 122, 0.08);
  border-color: rgba(224, 105, 122, 0.4);
  color: #E07A8A;
}
html[data-theme="dark"] .difficulty-btn--hard:hover {
  background: rgba(224, 105, 122, 0.16);
  border-color: #E07A8A;
  color: #F096A3;
}
html[data-theme="dark"] .difficulty-btn--good {
  background: rgba(233, 188, 69, 0.08);
  border-color: rgba(233, 188, 69, 0.4);
  color: var(--accent);
}
html[data-theme="dark"] .difficulty-btn--good:hover {
  background: rgba(233, 188, 69, 0.15);
  border-color: var(--accent);
  color: var(--accent-pale);
}
html[data-theme="dark"] .difficulty-btn--easy {
  background: rgba(131, 191, 151, 0.08);
  border-color: rgba(131, 191, 151, 0.4);
  color: var(--verde-claro);
}
html[data-theme="dark"] .difficulty-btn--easy:hover {
  background: rgba(131, 191, 151, 0.15);
  border-color: var(--verde-claro);
  color: #A2D6B3;
}

/* ---------- ESTATÍSTICAS DA SESSÃO (tela final) ---------- */
html[data-theme="dark"] .study__done-stat--hard {
  background: rgba(224, 105, 122, 0.07);
  border-color: rgba(224, 105, 122, 0.3);
  color: #E07A8A;
}
html[data-theme="dark"] .study__done-stat--good {
  background: rgba(233, 188, 69, 0.07);
  border-color: rgba(233, 188, 69, 0.3);
  color: var(--accent);
}
html[data-theme="dark"] .study__done-stat--easy {
  background: rgba(131, 191, 151, 0.07);
  border-color: rgba(131, 191, 151, 0.3);
  color: var(--verde-claro);
}

/* ---------- SELO DE AVALIAÇÃO ---------- */
html[data-theme="dark"] .flashcard__rating-badge--hard { color: #E07A8A; }
html[data-theme="dark"] .flashcard__rating-badge--good { color: var(--accent); }
html[data-theme="dark"] .flashcard__rating-badge--easy { color: var(--verde-claro); }

/* ---------- IMAGENS DO CARTÃO (editor) ---------- */
html[data-theme="dark"] .card-img-remove {
  border-color: rgba(224, 105, 122, 0.35);
  color: #E07A8A;
}
html[data-theme="dark"] .card-img-remove:hover {
  background: rgba(224, 105, 122, 0.1);
  border-color: #E07A8A;
}

/* ---------- BARRA DE SESSÃO ---------- */
html[data-theme="dark"] .session-bar {
  background: var(--ink-2);
  border-color: var(--line);
}
html[data-theme="dark"] .session-bar__id {
  color: var(--accent);
  background: rgba(233, 188, 69, 0.08);
  border-color: rgba(233, 188, 69, 0.25);
}
html[data-theme="dark"] .session-bar__reset {
  border-color: rgba(224, 105, 122, 0.35);
  color: #E07A8A;
}
html[data-theme="dark"] .session-bar__reset:hover {
  background: rgba(224, 105, 122, 0.1);
  border-color: #E07A8A;
}

/* ---------- CONTAS ---------- */
html[data-theme="dark"] .auth-tabs { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .auth-tab.is-active {
  background: var(--accent);
  color: var(--noir);
}
html[data-theme="dark"] .auth-code { background: rgba(233, 188, 69, 0.08); }

/* ---------- APOIAR ---------- */
html[data-theme="dark"] .amount-chip--on { background: rgba(233, 188, 69, 0.10); }
/* .support-pix__qr fica claro de propósito: leitura do QR pelos bancos. */

/* ---------- CONSTELAÇÃO (gamificação) ---------- */
html[data-theme="dark"] .goal-editor__opt.is-active {
  background: var(--accent);
  color: var(--noir);
  border-color: var(--accent);
}
html[data-theme="dark"] .seg__btn.is-active {
  background: var(--accent);
  color: var(--noir);
}
html[data-theme="dark"] .reward-badge {
  background: var(--accent);
  color: var(--noir);
}
html[data-theme="dark"] .heatmap__cell.is-on {
  box-shadow: 0 0 6px rgba(233, 188, 69, 0.55);
}
html[data-theme="dark"] .friend-msg { background: rgba(233, 188, 69, 0.07); }
html[data-theme="dark"] .lb__row--me { background: rgba(233, 188, 69, 0.07); }
html[data-theme="dark"] .reward-chip--up {
  background: rgba(233, 188, 69, 0.1);
  color: var(--accent);
}
html[data-theme="dark"] .reward-chip--goal { color: #ECA76B; }

/* ---------- PERFIL ---------- */
html[data-theme="dark"] .profile__cover--default {
  background-image: linear-gradient(120deg, var(--profile-accent, var(--accent)) 0%, #262B33 100%);
}