body {
      align-items: flex-start !important;
      padding-top: 8vh !important;
      padding-bottom: 8vh !important;
    }
    .container-pagina {
      margin: 0 auto !important;
      width: 100% !important;
      max-width: 800px !important;
    }

    /* ── Campos ── */
    .campo-grimorio {
      display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
    }
    .campo-grimorio label {
      font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--gold); opacity: 0.85;
    }
    .campo-grimorio input,
    .campo-grimorio select {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.25);
      border-radius: 6px; color: var(--parchment); font-family: 'EB Garamond', serif;
      font-size: 1.05rem; padding: 10px 14px; outline: none; transition: border-color 0.3s; width: 100%;
    }
    .campo-grimorio input:focus,
    .campo-grimorio select:focus {
      border-color: rgba(201,168,76,0.6); box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
    }
    /* O select em si fica com --parchment (regra acima), mas o dropdown
       (lista de <option>) é renderizado pelo navegador/SO e ignora a
       maior parte do CSS do elemento — por isso precisa de regra própria. */
    .campo-grimorio select option {
      background-color: #1a1118;
      color: var(--parchment);
    }
    .campo-grimorio select option:checked,
    .campo-grimorio select option:hover {
      background-color: rgba(201,168,76,0.2);
      color: var(--gold-light);
    }
    ::-webkit-calendar-picker-indicator {
      filter: invert(0.8) sepia(1) hue-rotate(5deg) saturate(3); cursor: pointer;
    }

    /* ── Dois painéis lado a lado ── */
    .dois-consulentes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    @media (max-width: 600px) {
      .dois-consulentes { grid-template-columns: 1fr; }
    }
    .consulente-card {
      background: rgba(201,168,76,0.04);
      border: 1px solid rgba(201,168,76,0.15);
      border-radius: 8px;
      padding: 20px 16px;
    }
    .consulente-card h3 {
      margin-bottom: 16px;
    }

    /* ── Separador central ── */
    .vs-central {
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel Decorative', serif; font-size: 1.4rem;
      color: var(--gold); text-shadow: 0 0 12px rgba(201,168,76,0.4);
      margin: 8px 0;
    }

    /* ── Botão ── */
    .botao-grimorio {
      font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.25em;
      text-transform: uppercase; color: var(--ink);
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border: none; border-radius: 6px; padding: 14px 32px; cursor: pointer;
      transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s;
      width: 100%; box-shadow: 0 4px 20px rgba(201,168,76,0.25); margin-top: 8px;
    }
    .botao-grimorio:hover  { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(201,168,76,0.4); }
    .botao-grimorio:active { transform: translateY(0); }
    .botao-grimorio:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .botao-secundario {
      font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--gold);
      background: transparent; border: 1px solid rgba(201,168,76,0.4);
      border-radius: 6px; padding: 12px 24px; cursor: pointer;
      transition: all 0.3s; width: 100%; margin-top: 8px;
    }
    .botao-secundario:hover { background: rgba(201,168,76,0.08); border-color: var(--gold); }

    /* ── Tags ── */
    .tag-grimorio {
      display: inline-block; font-family: 'Cinzel', serif; font-size: 0.6rem;
      letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
      border: 1px solid rgba(201,168,76,0.4); padding: 5px 12px;
      border-radius: 20px; margin: 4px;
    }

    /* ── Spinner ── */
    .spinner-grimorio {
      width: 36px; height: 36px; border: 2px solid rgba(201,168,76,0.2);
      border-top-color: var(--gold); border-radius: 50%;
      animation: spin 0.9s linear infinite; margin: 20px auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Resultado: cabeçalho ── */
    .bloco-cabecalho {
      background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.3);
      border-radius: 8px; padding: 24px 20px; margin-top: 8px; text-align: center;
      animation: fadeIn 0.5s ease;
    }
    .dupla-simbolos {
      font-size: 3.5rem; line-height: 1; margin: 8px 0 4px;
      text-shadow: 0 0 20px rgba(201,168,76,0.3);
    }
    .big-name {
      font-family: 'Cinzel', serif; font-size: clamp(1.2rem, 3.5vw, 1.8rem);
      color: var(--gold); margin: 10px 0 16px; line-height: 1.3;
    }

    /* ── Nível de compatibilidade — barra visual ── */
    .nivel-barra-wrap {
      margin: 16px auto; max-width: 320px;
    }
    .nivel-label {
      font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.15em;
      text-transform: uppercase; margin-bottom: 6px;
    }
    .nivel-barra-bg {
      background: rgba(255,255,255,0.07); border-radius: 20px;
      height: 10px; overflow: hidden;
    }
    .nivel-barra-fill {
      height: 100%; border-radius: 20px;
      transition: width 1s ease;
    }
    .nivel-alto    .nivel-barra-fill { background: linear-gradient(90deg, #4a9e4a, #8dcc8d); }
    .nivel-medio   .nivel-barra-fill { background: linear-gradient(90deg, #a87c1a, var(--gold-light)); }
    .nivel-baixo   .nivel-barra-fill { background: linear-gradient(90deg, #8b2020, #cc8d8d); }
    .nivel-variavel .nivel-barra-fill { background: linear-gradient(90deg, #555, var(--mist)); }

    .nivel-alto    .nivel-label { color: #8dcc8d; }
    .nivel-medio   .nivel-label { color: var(--gold-light); }
    .nivel-baixo   .nivel-label { color: #cc8d8d; }
    .nivel-variavel .nivel-label { color: var(--mist); }

    /* ── Citação ── */
    blockquote.citacao-grimorio {
      border-left: 2px solid var(--gold); margin: 16px 0; padding: 12px 20px;
      font-style: italic; color: var(--mist); font-size: 1.05rem;
      background: rgba(201,168,76,0.04); border-radius: 0 6px 6px 0; text-align: left;
    }

    /* ── Mini-perfis dos dois ── */
    .mini-perfis {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0;
    }
    @media (max-width: 500px) { .mini-perfis { grid-template-columns: 1fr; } }
    .mini-perfil {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(201,168,76,0.15);
      border-radius: 8px; padding: 16px; text-align: center;
    }
    .mini-perfil .emoji { font-size: 2.2rem; margin-bottom: 6px; }
    .mini-perfil .nome-perfil {
      font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--gold); margin-bottom: 4px;
    }
    .mini-perfil .detalhe-perfil {
      font-size: 0.85rem; color: var(--mist); line-height: 1.5;
    }

    /* ── Texto da compatibilidade ── */
    .texto-compat {
      font-size: 1.05rem; color: var(--parchment); line-height: 1.75;
      text-align: justify; margin-top: 16px;
    }

    /* ── Tabela ── */
    .tabela-grimorio {
      width: 100%; border-collapse: collapse; font-size: 1rem; margin-top: 16px;
    }
    .tabela-grimorio th {
      font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--gold);
      border-bottom: 1px solid rgba(201,168,76,0.35); padding: 10px 12px; text-align: left;
    }
    .tabela-grimorio td {
      padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
      color: var(--parchment); line-height: 1.5; text-align: left; vertical-align: top;
    }
    .tabela-grimorio td.label-col { width: 45%; color: var(--mist); font-size: 0.95rem; }

    /* ── Abas ── */
    .abas-grimorio {
      display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 16px; justify-content: center;
    }
    .aba-btn {
      font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--mist); background: transparent;
      border: 1px solid rgba(201,168,76,0.2); border-radius: 20px;
      padding: 7px 16px; cursor: pointer; transition: all 0.25s;
    }
    .aba-btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.5); }
    .aba-btn.ativa { color: var(--ink); background: var(--gold); border-color: var(--gold); }
    .painel-aba { display: none; animation: fadeIn 0.35s ease; text-align: left; }
    .painel-aba.visivel { display: block; }

    /* ── Select de sexo ── */
    .radio-sexo {
      display: flex; gap: 12px; margin-top: 4px;
    }
    .radio-sexo label {
      font-family: 'EB Garamond', serif; font-size: 1rem;
      color: var(--parchment); display: flex; align-items: center; gap: 6px;
      cursor: pointer; opacity: 0.85; letter-spacing: normal; text-transform: none;
    }
    .radio-sexo input[type=radio] {
      accent-color: var(--gold); width: auto; cursor: pointer;
    }

    /* ── Nota de perspectiva ── */
    .nota-perspectiva {
      font-size: 0.82rem; color: var(--mist); font-style: italic;
      margin-bottom: 12px; padding: 8px 12px;
      border-left: 2px solid rgba(201,168,76,0.3);
    }