/* ============================================================
   Painel de assinatura — /{locale}/manage

   Fora da sequência do funil: sem barra de progresso, sem CTA fixo no
   rodapé. Quem chega aqui está resolvendo alguma coisa, não avançando —
   a leitura vem antes da ação.
   ============================================================ */

.painel {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: 40px var(--gutter) calc(40px + env(safe-area-inset-bottom));
}
.painel::-webkit-scrollbar { display: none; }

.pn-titulo { margin: 0 0 14px; font: 700 26px/1.25 var(--font); letter-spacing: -.02em;
             text-wrap: balance; }
.pn-subtitulo { margin: 26px 0 8px; font: 700 18px/1.35 var(--font); }
.pn-texto { margin: 0 0 18px; font: 400 15px/1.55 var(--font); color: var(--ink-2);
            text-wrap: pretty; }
.pn-nota { margin: 10px 0 0; font: 400 13px/1.5 var(--font); color: var(--ink-3);
           text-wrap: pretty; }
.pn-pergunta { margin: 22px 0 10px; font: 600 15px/1.4 var(--font); }

/* --- resumo --- */
.pn-caixa { border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px;
            margin: 0 0 22px; }
.pn-linha { display: flex; justify-content: space-between; align-items: baseline;
            gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pn-linha:last-child { border-bottom: 0; }
.pn-rotulo { font: 400 14px/1.4 var(--font); color: var(--ink-3); flex: 0 0 auto; }
.pn-valor { font: 600 14px/1.4 var(--font); text-align: right; }

/* --- caixa de consequência ---
   Âmbar e não vermelho: é aviso do que vai acontecer, não erro. */
.pn-atencao { border-radius: 12px; background: var(--atencao-fundo);
              padding: 16px 18px; margin: 20px 0; }
.pn-atencao-titulo { margin: 0 0 8px; font: 700 14px/1.4 var(--font); color: var(--atencao); }
.pn-atencao-texto { margin: 0; font: 400 14px/1.55 var(--font); color: var(--atencao);
                    text-wrap: pretty; }
.pn-lista { margin: 0; padding-left: 18px; }
.pn-lista li { font: 400 14px/1.6 var(--font); color: var(--atencao); }

/* --- ações secundárias ---
   Discretas de propósito: existem sempre, mas não podem parecer convite.
   Cinza, sem fundo, tamanho menor e afastadas da ação principal. */
.pn-secundarias { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
                  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.pn-link-fraco { display: inline-block; margin-top: 16px; background: none; border: 0;
                 padding: 0; font: 400 13.5px/1.4 var(--font); color: var(--ink-3);
                 text-decoration: underline; cursor: pointer; }
.pn-link-fraco:hover { color: var(--ink-2); }
.pn-secundarias .pn-link-fraco { margin-top: 0; }

/* --- formulário --- */
.painel textarea {
  width: 100%; box-sizing: border-box; border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 400 15px/1.5 var(--font); resize: vertical;
}
.painel textarea:focus { outline: none; border-color: var(--brand); }
.pn-dupla { display: flex; gap: 10px; }
.pn-dupla .opt-lado { flex: 1; align-items: center; }
.painel .opts { margin-bottom: 4px; }
.ou-simples { height: 1px; background: var(--line); margin: 20px 0; }