/* Tela "Meu Plano".
   Vive dentro de #app-shell, então herda os tokens do painel — o objetivo aqui
   é parecer parte do produto, não da landing. O badge de status recebe cor
   inline do app.js conforme o estado da assinatura; esta folha cuida só do
   layout e deixa o preenchimento para o script. */

.plan-lede { max-width: 60ch; margin: 6px 0 20px; color: var(--fg-secondary); font-size: 14px; line-height: 1.6; }

.plan-card {
  max-width: 560px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.plan-card__head {
  padding-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.plan-card__name { margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.plan-card__desc { max-width: 44ch; margin: 0; color: var(--fg-secondary); font-size: 13px; line-height: 1.55; }

.plan-status {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.plan-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.plan-fact { padding: 14px 16px; background: var(--surface); }
.plan-fact dt { margin: 0 0 3px; color: var(--fg-tertiary); font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.plan-fact dd { margin: 0; color: var(--fg); font-size: 17px; font-weight: 620; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-fact dd span { color: var(--fg-secondary); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

.plan-note { margin: 0; color: var(--fg-tertiary); font-size: 12px; line-height: 1.55; }

.plan-actions { display: flex; flex-direction: column; gap: 10px; }
.plan-actions:empty { display: none; }

@media (max-width: 560px) {
  .plan-card__head { flex-direction: column; }
  .plan-facts { grid-template-columns: 1fr; }
}