@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-Regular.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-Italic.woff2) format('woff2')}
/* The Viral Club Academy · MODO ESCURO DOS FAVORITOS (comum a todo o sistema)
   Fundo azul-carvão com brilhos suaves, ondas e estrelinhas (igual à página /favoritos/),
   cartões cinza-escuros arredondados e texto creme. Só se liga quando a página está em modo escuro.
   Como usar numa página: <link rel="stylesheet" href="/fav-escuro.css?v=1"> + <script src="/fav-escuro.js?v=1" defer></script>
   e usar as variáveis --fv-* no bloco do modo escuro da página. */
:root{
  --fv-bg:#14161D;           /* fundo */
  --fv-card:#26282D;         /* cartões */
  --fv-card2:#1E2026;        /* caixas dentro dos cartões, campos */
  --fv-linha:rgba(255,255,255,.14);
  --fv-texto:#F3EEE3;        /* texto principal */
  --fv-mute:rgba(243,238,227,.78); /* texto secundário */
  --fv-red:#6E1216;          /* botões (fundo) */
  --fv-red-txt:#EFE3B8;      /* destaques em texto (vermelho claro, legível no escuro) */
  --fv-sombra:0 20px 44px -22px rgba(0,0,0,.6),0 4px 12px -8px rgba(0,0,0,.3);
  --fv-raio:26px;
}
html.fav-escuro{background-color:var(--fv-bg)!important}
html.fav-escuro body{background:transparent!important}
/* o fundo fica atrás de tudo (z-index negativo), sem mexer na posição do resto da página */
html.fav-escuro .sb-bg{z-index:-1!important}
html:not(.fav-escuro) .sb-bg{display:none}
.sb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-color: #14161D; background-image: radial-gradient(58vw 48vh at 12% 6%, rgba(70,115,255,.14), transparent 70%), radial-gradient(48vw 42vh at 86% 18%, rgba(255,80,160,.10), transparent 70%), radial-gradient(55vw 50vh at 82% 86%, rgba(255,140,60,.10), transparent 70%), radial-gradient(46vw 42vh at 12% 92%, rgba(110,70,230,.10), transparent 70%); }
      .sb-waves { position: absolute; inset: -64px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'%3E%3Cpath d='M0 16 Q 16 8 32 16 T 64 16'/%3E%3Cpath d='M0 48 Q 16 40 32 48 T 64 48'/%3E%3Cpath d='M16 0 Q 8 16 16 32 T 16 64'/%3E%3Cpath d='M48 0 Q 40 16 48 32 T 48 64'/%3E%3C/g%3E%3C/svg%3E"); background-size: 64px 64px; opacity: .9; }
      .sb-stars, .sb-stars2, .sb-fly, .sb-fly2 { position: absolute; inset: 0; pointer-events: none; }
      .sb-stars {
        background-image:
          radial-gradient(1.6px 1.6px at 9% 18%, #fff, transparent 60%),
          radial-gradient(1.2px 1.2px at 24% 62%, #CFE0FF, transparent 60%),
          radial-gradient(1.8px 1.8px at 41% 11%, #fff, transparent 60%),
          radial-gradient(1.2px 1.2px at 57% 44%, #FFC9E2, transparent 60%),
          radial-gradient(1.4px 1.4px at 73% 23%, #fff, transparent 60%),
          radial-gradient(1.1px 1.1px at 86% 68%, #FFD9B8, transparent 60%),
          radial-gradient(1.3px 1.3px at 33% 84%, #fff, transparent 60%),
          radial-gradient(1px 1px at 66% 79%, #fff, transparent 60%),
          radial-gradient(1.5px 1.5px at 6% 52%, #FFC9E2, transparent 60%),
          radial-gradient(1px 1px at 49% 31%, #fff, transparent 60%),
          radial-gradient(1.3px 1.3px at 19% 39%, #fff, transparent 60%),
          radial-gradient(1px 1px at 31% 9%, #FFE7B8, transparent 60%),
          radial-gradient(1.4px 1.4px at 53% 58%, #CFE0FF, transparent 60%),
          radial-gradient(1px 1px at 63% 5%, #fff, transparent 60%),
          radial-gradient(1.2px 1.2px at 79% 49%, #fff, transparent 60%),
          radial-gradient(1px 1px at 92% 27%, #FFD9B8, transparent 60%),
          radial-gradient(1.3px 1.3px at 14% 73%, #fff, transparent 60%),
          radial-gradient(1px 1px at 42% 51%, #FFC9E2, transparent 60%),
          radial-gradient(1.5px 1.5px at 88% 9%, #fff, transparent 60%),
          radial-gradient(1px 1px at 47% 88%, #FFE7B8, transparent 60%),
          radial-gradient(1.2px 1.2px at 95% 86%, #fff, transparent 60%),
          radial-gradient(1px 1px at 3% 94%, #CFE0FF, transparent 60%),
          radial-gradient(1.4px 1.4px at 68% 92%, #fff, transparent 60%),
          radial-gradient(1px 1px at 77% 74%, #fff, transparent 60%);
        opacity: .95; animation: sb-twinkle 4.2s ease-in-out infinite alternate; }
      .sb-stars2 {
        background-image:
          radial-gradient(1px 1px at 17% 36%, #fff, transparent 60%),
          radial-gradient(1px 1px at 37% 71%, #fff, transparent 60%),
          radial-gradient(1px 1px at 61% 10%, #FFC9E2, transparent 60%),
          radial-gradient(1px 1px at 89% 41%, #fff, transparent 60%),
          radial-gradient(1px 1px at 81% 87%, #FFE7B8, transparent 60%),
          radial-gradient(1px 1px at 5% 12%, #fff, transparent 60%),
          radial-gradient(1.1px 1.1px at 71% 63%, #fff, transparent 60%),
          radial-gradient(1px 1px at 28% 27%, #CFE0FF, transparent 60%),
          radial-gradient(1px 1px at 84% 78%, #fff, transparent 60%),
          radial-gradient(1px 1px at 58% 37%, #FFC9E2, transparent 60%),
          radial-gradient(1px 1px at 11% 89%, #CFE0FF, transparent 60%),
          radial-gradient(1px 1px at 94% 57%, #fff, transparent 60%),
          radial-gradient(1px 1px at 45% 96%, #fff, transparent 60%),
          radial-gradient(1px 1px at 26% 55%, #FFD9B8, transparent 60%),
          radial-gradient(1px 1px at 97% 5%, #fff, transparent 60%),
          radial-gradient(1px 1px at 51% 68%, #fff, transparent 60%),
          radial-gradient(90px 60px at 74% 16%, rgba(90,140,255,.14), transparent 70%),
          radial-gradient(80px 55px at 16% 78%, rgba(255,90,160,.10), transparent 70%),
          radial-gradient(70px 50px at 84% 88%, rgba(255,150,70,.10), transparent 70%);
        opacity: .7; animation: sb-twinkle 3.1s ease-in-out infinite alternate-reverse; }
      .sb-fly {
        background-image:
          radial-gradient(1.8px 1.8px at 22% 30%, #fff, transparent 60%),
          radial-gradient(1.3px 1.3px at 64% 12%, #CFE0FF, transparent 60%),
          radial-gradient(1.6px 1.6px at 81% 55%, #fff, transparent 60%),
          radial-gradient(1.2px 1.2px at 38% 74%, #FFC9E2, transparent 60%),
          radial-gradient(1.5px 1.5px at 8% 62%, #FFE7B8, transparent 60%),
          radial-gradient(1.1px 1.1px at 52% 44%, #fff, transparent 60%),
          radial-gradient(1.4px 1.4px at 91% 87%, #CFE0FF, transparent 60%),
          radial-gradient(1px 1px at 14% 8%, #fff, transparent 60%);
        background-size: 200px 200px;
        opacity: .8; animation: sb-fly1 64s linear infinite; }
      .sb-fly2 {
        background-image:
          radial-gradient(1.1px 1.1px at 30% 20%, #fff, transparent 60%),
          radial-gradient(1px 1px at 72% 48%, #FFC9E2, transparent 60%),
          radial-gradient(1.2px 1.2px at 12% 78%, #fff, transparent 60%),
          radial-gradient(1px 1px at 58% 88%, #FFE7B8, transparent 60%),
          radial-gradient(1.3px 1.3px at 88% 8%, #fff, transparent 60%),
          radial-gradient(1px 1px at 44% 56%, #CFE0FF, transparent 60%);
        background-size: 140px 140px;
        opacity: .55; animation: sb-fly2 96s linear infinite; }
      @keyframes sb-fly1 { from { background-position: 0 0; } to { background-position: 200px 400px; } }
      @keyframes sb-fly2 { from { background-position: 0 0; } to { background-position: 140px 280px; } }
      @keyframes sb-twinkle { from { opacity: .35; } to { opacity: 1; } }
      @media (prefers-reduced-motion: reduce) { .sb-stars, .sb-stars2, .sb-fly, .sb-fly2 { animation: none !important; } }
