/* Páginas: feed (composer, pills), sidebar, members, about, profile, auth, painel (docs/04, 05) */
.composer { display: flex; align-items: center; gap: 16px; height: 62px; padding: 10px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-ui); color: var(--gray); font: 500 20px/30px var(--font); margin-bottom: 20px; cursor: pointer; }
.category-row { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; }
.category-row .pills { flex: 1; }

.side-card { padding: 0; }
.side-cover { width: 100%; height: 144px; object-fit: cover; background: var(--border); display: block; }
.side-body { padding: 16px; }
.side-name { font: 500 18px/27px var(--font); }
.side-desc { font: 400 16px/24px var(--font); margin-top: 12px; }
.side-avatars { margin: 16px 0; gap: 2px; }
.leaderboard-title { font: 500 16px/24px var(--font); margin-bottom: 8px; }
.lb-row { display: flex; align-items: center; gap: 8px; height: 54px; }
.lb-row .rank { width: 27px; flex: none; text-align: center; font: 700 16px/24px var(--font); color: var(--gray-text); font-variant-numeric: tabular-nums; }
/* Medalhas 1/2/3: círculo 27px com fita abaixo (docs/03, "Avatares e badges") */
.lb-row .rank-1, .lb-row .rank-2, .lb-row .rank-3 { position: relative; z-index: 0; height: 27px; border-radius: 50%; color: #fff; line-height: 27px; margin-bottom: 3px; }
.lb-row .rank-1 { background: var(--yellow); color: var(--ink); } .lb-row .rank-2 { background: var(--silver); } .lb-row .rank-3 { background: var(--bronze); }
.lb-row .rank-1::after, .lb-row .rank-2::after, .lb-row .rank-3::after { content: ""; position: absolute; left: 8px; top: 24px; width: 11px; height: 11px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 60%, 0 100%); z-index: -1; }
.lb-name { font: 500 16px/24px var(--font); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-lb .lb-name { flex: 1; font-weight: 400; }
.lb-row .points { margin-left: auto; font: 700 13px/19.5px var(--font); color: var(--indigo); font-variant-numeric: tabular-nums; }
.lb-more { text-align: center; font: 400 13px/19.5px var(--font); }

.member-filters { margin-bottom: 24px; }
.member-card { padding: 0 16px; }
.member-row { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); position: relative; }
.member-row:last-child { border-bottom: 0; }
.member-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.member-name { font: 700 16px/24px var(--font); }
.member-handle { font: 700 13px/19.5px var(--font); color: var(--gray); }
.member-bio { font: 400 16px/24px var(--font); }
.status-line { display: flex; align-items: center; gap: 16px; font: 400 16px/24px var(--font); color: var(--ink); }
.status-line .icon { color: var(--gray); width: 20px; height: 20px; }
.member-row > .btn-sm { position: absolute; right: 0; top: 16px; width: 96px; padding: 0; }
.member-footer { text-align: center; font: 400 13px/19.5px var(--font); color: var(--gray); margin-top: 16px; }

.about-card { padding: 24px 32px 20px; }
.about-title { font: 700 23px/1.5 var(--font); margin-bottom: 24px; }
.about-media { border-radius: var(--r-md); margin-bottom: 24px; max-height: 396px; width: 100%; object-fit: cover; }
.about-body { font: 400 16px/24px var(--font); }
.about-body p { margin-bottom: 16px; }
/* Modal da 1ª visita: o botão fica no fim do texto. Texto curto: aparece logo abaixo dele. Texto longo (o modal rola):
   gruda no rodapé do modal enquanto se rola e assenta no fim. Sem medir nada: é o sticky dentro do painel (05/10/2026). */
.about-cta { position: sticky; bottom: -20px; margin: 4px 0 -20px; padding: 12px 0 20px; text-align: center; background: linear-gradient(to top, var(--card) 72%, transparent); }
.terms-link { font: 400 14px/20px var(--font); color: var(--gray); margin-top: 16px; text-align: center; }
.terms-link a:hover { text-decoration: underline; }

.profile-card { text-align: center; }
.ring { position: relative; width: 224px; height: 224px; margin: 0 auto 16px; }
.ring svg { position: absolute; inset: 0; width: 224px; height: 224px; transform: rotate(-90deg); }
.ring .avatar-200 { position: absolute; left: 12px; top: 12px; }
.profile-level { font: 700 13px/19.5px var(--font); color: var(--indigo); }
.profile-name { font: 700 23px/1.5 var(--font); margin-top: 4px; }
.profile-bio { font: 400 16px/24px var(--font); margin-top: 8px; }
.profile-lines { text-align: left; display: flex; flex-direction: column; gap: 8px; }

.auth-card { width: 454px; max-width: calc(100vw - 32px); padding: 32px; text-align: center; }
.auth-card .wordmark { margin: 0 auto; }
.auth-card .auth-brand { justify-content: center; height: auto; }  /* ícone + nome da comunidade no lugar do wordmark */
.auth-brand .brand-name { font-weight: 700; }
.auth-title { font: 700 23px/1.5 var(--font); margin: 32px 0; }
.auth-sub { font: 400 16px/24px var(--font); margin-top: -16px; margin-bottom: 24px; }
.auth-card form { text-align: left; }
.auth-link { display: block; text-align: left; font: 400 16px/24px var(--font); color: var(--blue); margin: 16px 0; }
/* Esqueceu a senha? | Entrar com um código, na mesma linha (como no Skool) */
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 16px 0; }
.auth-links .auth-link { margin: 0; }
.auth-links .link-btn { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; }
.auth-foot { font: 400 16px/24px var(--font); margin-top: 24px; }
.auth-foot a { color: var(--blue); }
.invite-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: -32px -32px 24px; width: calc(100% + 64px); max-width: none; }

.admin-card h2 { font: 700 20px/30px var(--font); margin-bottom: 16px; }
.admin-card h3 { font: 500 16px/24px var(--font); margin: 24px 0 12px; }
.row-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-actions input[type=text] { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font: inherit; width: 140px; }

/* Botão de entrada (Sobre e lateral): no Sobre só aparece sem a lateral (até 1024 px) */
.join-action { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }  /* coluna presa à largura: texto longo quebra em vez de empurrar o botão */
.join-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font: 400 13px/18px var(--font); color: var(--gray-text); text-align: center; }
.join-note .link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--blue); cursor: pointer; }
.join-note .link-btn:hover { text-decoration: underline; }
.join-inline { margin-top: 24px; }
.join-inline:empty, .join-inline:not(:has(.join-action)) { display: none; }
@media (min-width: 1025px) { .join-inline { display: none; } }

/* Continuar com o Google: botão branco com o "G" colorido, como nas diretrizes do Google */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; border: 1px solid #dadce0; border-radius: var(--r-sm); background: #fff; color: #1f1f1f; font: 500 16px/24px var(--font); transition: background .1s; }
.btn-google:hover { background: #f8f9fa; }
.btn-google svg { flex: none; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font: 400 14px/20px var(--font); color: var(--gray-text); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Confirmar e-mail: campo único do código, grande e espaçado */
.otp-form { display: grid; gap: 12px; }
.otp-input { width: 100%; height: 64px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); text-align: center; font: 500 32px/1 var(--font); letter-spacing: 12px; color: var(--ink); outline: 0; }
.otp-input::placeholder { color: #d0d0d0; }
.otp-input:focus { border: 2px solid var(--ink); }
.otp-input[aria-invalid="true"] { border-color: var(--red-today); }
.otp-error { margin: 0; font: 400 14px/20px var(--font); color: var(--red-today); }
.otp-resend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 20px; font: 400 14px/20px var(--font); color: var(--gray-text); }
.otp-resend .link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--blue); cursor: pointer; }
.otp-resend .link-btn:disabled { color: var(--gray); cursor: default; }
@media (max-width: 768px) { .about-cta { bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; } }