/* ════════════════════════════════════════════════════════════════════
   UI extras — skeleton loaders + toasts + pull-to-refresh + a11y
   Carregado depois de app.css em base.html
   ════════════════════════════════════════════════════════════════════ */

/* Alpine x-cloak GLOBAL — esconde elementos com x-cloak até o Alpine inicializar.
   Sem esta regra, modais e seções x-show flashavam visíveis no load (FOUC) em
   toda página que usa Alpine (painel, chat, descobrir, login…). Carregado em
   base.html → cobre o app inteiro e dispensa as cópias locais por template. */
[x-cloak] { display: none !important; }

/* ──────────────────────────────────────────────────────────────────
   V1 — SKELETON LOADERS
   ──────────────────────────────────────────────────────────────── */
.skel {
    background: linear-gradient(
        90deg,
        var(--cor-fundo-superficie) 0%,
        var(--cor-fundo-elevado) 50%,
        var(--cor-fundo-superficie) 100%
    );
    background-size: 200% 100%;
    animation: skelShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel--linha { height: 14px; margin: 8px 0; }
.skel--curta { width: 40%; }
.skel--media { width: 70%; }
.skel--longa { width: 100%; }
.skel--avatar { width: 56px; height: 56px; border-radius: 50%; }
.skel--card-perfil {
    width: 100%; aspect-ratio: 3/4; border-radius: 18px;
}

.skel-lista {
    display: flex; flex-direction: column; gap: var(--esp-3);
}
.skel-item {
    display: flex; gap: var(--esp-3); align-items: center;
    padding: var(--esp-3); border-radius: 16px;
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
}
.skel-item__texto { flex: 1; }

/* Multi-foto no Descobrir (V4) */
.desk-fotos-paginas {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; gap: 4px; z-index: 3;
}
.desk-fotos-paginas__barra {
    flex: 1; height: 3px; border-radius: 3px;
    background: oklch(98% 0 0 / 0.25);
    transition: background 0.2s ease;
}
.desk-fotos-paginas__barra--ativa { background: oklch(98% 0 0 / 0.95); }

.card-perfil__tap-zona {
    position: absolute; top: 0; bottom: 50%; width: 33%;
    z-index: 2; cursor: pointer;
}
.card-perfil__tap-zona--esq { left: 0; }
.card-perfil__tap-zona--dir { right: 0; }

/* ──────────────────────────────────────────────────────────────────
   V3 — TOAST NOTIFICATIONS
   ──────────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: calc(80px + var(--esp-4));  /* acima do tabbar */
    left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column-reverse;
    gap: var(--esp-2); z-index: 9999;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-primaria);
    border-radius: 14px;
    padding: var(--esp-3) var(--esp-4);
    max-width: 360px; min-width: 240px;
    box-shadow: var(--sombra-md);
    font-size: 0.9rem; color: var(--cor-texto);
    display: flex; align-items: center; gap: var(--esp-3);
    animation: toastEntrar 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.toast--saindo { transform: translateY(20px); opacity: 0; }
@keyframes toastEntrar {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.toast--sucesso { border-left-color: var(--cor-sucesso); }
.toast--erro    { border-left-color: var(--cor-erro); }
.toast--info    { border-left-color: var(--cor-acento); }
.toast__icone { font-size: 1.2rem; flex-shrink: 0; }
.toast__corpo { flex: 1; line-height: 1.35; }

/* ──────────────────────────────────────────────────────────────────
   V3.5 — MODAL DE CONFIRMAR (substitui confirm() nativo do browser)
   ──────────────────────────────────────────────────────────────── */
.modal-confirmar-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: oklch(13% 0.04 250 / 0.6);
    backdrop-filter: blur(8px) saturate(140%);
    display: flex; align-items: center; justify-content: center;
    padding: var(--esp-4);
    opacity: 0;
    transition: opacity 180ms ease;
}
.modal-confirmar-overlay--entrando { opacity: 1; }
.modal-confirmar-overlay--saindo { opacity: 0; }

.modal-confirmar {
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: 18px;
    padding: var(--esp-5) var(--esp-4);
    max-width: 380px; width: 100%;
    box-shadow: var(--sombra-lg, 0 18px 48px oklch(13% 0.04 250 / 0.45));
    transform: scale(0.94) translateY(8px);
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-confirmar-overlay--entrando .modal-confirmar { transform: scale(1) translateY(0); }

.modal-confirmar__titulo {
    margin: 0 0 var(--esp-2);
    font-family: var(--fonte-titulo, 'Plus Jakarta Sans', sans-serif);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--cor-texto);
}
.modal-confirmar__corpo {
    margin: 0 0 var(--esp-4);
    color: var(--cor-texto-suave);
    font-size: 0.95rem;
    line-height: 1.45;
}
/* Caixa de texto do modal (window.pedirTexto — substitui prompt() nativo) */
.modal-confirmar__input {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--esp-4);
    padding: var(--esp-3);
    border-radius: 12px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo, oklch(13% 0.04 250));
    color: var(--cor-texto);
    font: inherit;
    font-size: 1rem; /* >=16px evita o zoom automático do iOS no foco */
    resize: vertical;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.modal-confirmar__input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave, oklch(72% 0.15 25 / 0.25));
}
.modal-confirmar__acoes {
    display: flex; gap: var(--esp-2); justify-content: flex-end;
    flex-wrap: wrap;
}
.modal-confirmar__acoes .botao {
    min-width: 110px;
    flex: 1 1 auto;
    max-width: 180px;
}

/* Botão destrutivo (vermelho) — pra sair/apagar/bloquear */
.botao--destrutivo {
    background: var(--cor-erro, oklch(58% 0.20 25));
    color: oklch(98% 0 0);
    border: none;
}
.botao--destrutivo:hover { filter: brightness(1.1); }
.botao--destrutivo:active { transform: scale(0.97); }

/* ──────────────────────────────────────────────────────────────────
   I2 — PULL-TO-REFRESH
   ──────────────────────────────────────────────────────────────── */
.ptr-host {
    position: relative;
    /* Marker — JS adiciona handlers se elemento tem essa classe */
}
.ptr-indicador {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-sm);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0; z-index: 5;
}
.ptr-indicador--ativo { opacity: 1; }
.ptr-indicador--recarregando { animation: ptrSpin 0.8s linear infinite; }
.ptr-indicador__icone {
    font-size: 1.1rem; color: var(--cor-primaria);
    transition: transform 0.2s ease;
}
@keyframes ptrSpin {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────
   I3 — BADGE PULSANTE NO TABBAR
   ──────────────────────────────────────────────────────────────── */
.tabbar__item { position: relative; }
.tabbar__badge {
    position: absolute; top: 4px; right: calc(50% - 22px);
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--cor-primaria); color: var(--cor-primaria-texto);
    font-size: 10px; font-weight: 800; line-height: 18px;
    text-align: center; box-shadow: 0 0 0 2px var(--cor-fundo);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--cor-fundo), 0 0 0 0 oklch(72% 0.15 25 / 0.5); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 2px var(--cor-fundo), 0 0 0 6px oklch(72% 0.15 25 / 0); }
}

/* ──────────────────────────────────────────────────────────────────
   F5 — ÚLTIMA ATIVIDADE (chips/dots online)
   ──────────────────────────────────────────────────────────────── */
.online-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cor-sucesso); margin-right: 5px;
    box-shadow: 0 0 0 0 oklch(72% 0.18 160 / 0.5);
    animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(72% 0.18 160 / 0.5); }
    50%      { box-shadow: 0 0 0 6px oklch(72% 0.18 160 / 0); }
}
.offline-tempo {
    font-size: 0.72rem; color: var(--cor-texto-fraco);
}

/* ──────────────────────────────────────────────────────────────────
   F7 — TAGS EM COMUM HIGHLIGHT
   ──────────────────────────────────────────────────────────────── */
.card-perfil__tag--match {
    background: oklch(72% 0.15 25 / 0.15) !important;
    color: var(--cor-primaria-clara) !important;
    border-color: var(--cor-primaria) !important;
    font-weight: 700;
}
.card-perfil__tag--match::before { content: '✦ '; }

/* ──────────────────────────────────────────────────────────────────
   PWA INSTALL — banner + modal de instruções iOS
   ──────────────────────────────────────────────────────────────── */
#pwa-install-banner {
    position: fixed; bottom: calc(80px + var(--esp-3)); left: var(--esp-3); right: var(--esp-3);
    display: flex; align-items: center; gap: var(--esp-2);
    background: var(--cor-fundo-elevado); border: 1px solid var(--cor-primaria);
    border-radius: 16px; padding: var(--esp-3) var(--esp-4);
    box-shadow: var(--sombra-lg), 0 0 24px oklch(72% 0.15 25 / 0.3);
    z-index: 800;
    animation: pwaBannerSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pwaBannerSlideIn {
    from { transform: translateY(120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pwa-install-banner__icone { font-size: 1.4rem; }
.pwa-install-banner__txt {
    flex: 1; font-size: 0.88rem; color: var(--cor-texto);
    font-weight: 600;
}
.pwa-install-banner__btn {
    background: var(--grad-primario); color: var(--cor-primaria-texto);
    border: none; padding: 8px 14px; border-radius: 999px;
    font-weight: 700; font-size: 0.82rem; cursor: pointer;
    box-shadow: var(--sombra-coral);
}
.pwa-install-banner__fechar {
    background: transparent; border: none; color: var(--cor-texto-suave);
    font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1;
}

.pwa-install-overlay {
    position: fixed; inset: 0; z-index: 1500;
    background: oklch(8% 0.03 250 / 0.92); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--esp-4); animation: fadeIn 0.3s;
}
.pwa-install-modal {
    position: relative;
    background: var(--cor-fundo-elevado); border: 1px solid var(--cor-borda);
    border-radius: 24px; padding: var(--esp-6) var(--esp-5) var(--esp-5);
    max-width: 380px; width: 100%;
    box-shadow: var(--sombra-lg);
    text-align: center;
}
.pwa-install-modal__fechar {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: none; color: var(--cor-texto-suave);
    font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.pwa-install-modal__icone { font-size: 3rem; margin-bottom: var(--esp-3); }
.pwa-install-modal__titulo {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
    font-size: 1.25rem; margin: 0 0 var(--esp-2);
}
.pwa-install-modal__sub {
    color: var(--cor-texto-suave); font-size: 0.92rem; line-height: 1.5;
    margin: 0 0 var(--esp-4);
}
.pwa-install-modal__passos {
    text-align: left; padding-left: var(--esp-5);
    margin: 0 0 var(--esp-5); color: var(--cor-texto);
    font-size: 0.92rem; line-height: 1.7;
}
.pwa-install-modal__passos li { margin-bottom: var(--esp-2); }
.pwa-install-modal__ok {
    width: 100%; padding: var(--esp-3) var(--esp-5);
    background: var(--grad-primario); color: var(--cor-primaria-texto);
    border: none; border-radius: 999px;
    font-weight: 700; font-size: 0.95rem; cursor: pointer;
    box-shadow: var(--sombra-coral);
}

/* ──────────────────────────────────────────────────────────────────
   AVATAR FALLBACK — gradient + inicial pra perfis sem foto
   ──────────────────────────────────────────────────────────────── */
.avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: oklch(98% 0 0);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    user-select: none;
    background: var(--cor-fundo-elevado);
    box-shadow: inset 0 0 0 1px var(--cor-borda);
}
.avatar img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.avatar--xs { width: 28px; height: 28px; font-size: 11px; }
.avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.avatar--md { width: 56px; height: 56px; font-size: 20px; }
.avatar--lg { width: 80px; height: 80px; font-size: 28px; }
.avatar--xl { width: 120px; height: 120px; font-size: 42px; }

/* 8 paletas determinísticas por hash do nome — cada inicial sempre cai
   no mesmo gradiente, então usuários têm "cor identidade" consistente. */
.avatar--g0 { background: linear-gradient(135deg, oklch(70% 0.16 25) 0%,  oklch(60% 0.14 50) 100%); }
.avatar--g1 { background: linear-gradient(135deg, oklch(72% 0.18 145) 0%, oklch(60% 0.15 175) 100%); }
.avatar--g2 { background: linear-gradient(135deg, oklch(68% 0.18 250) 0%, oklch(55% 0.16 280) 100%); }
.avatar--g3 { background: linear-gradient(135deg, oklch(78% 0.16 80) 0%,  oklch(65% 0.14 50) 100%); }
.avatar--g4 { background: linear-gradient(135deg, oklch(70% 0.18 320) 0%, oklch(58% 0.16 280) 100%); }
.avatar--g5 { background: linear-gradient(135deg, oklch(74% 0.14 200) 0%, oklch(62% 0.16 230) 100%); }
.avatar--g6 { background: linear-gradient(135deg, oklch(72% 0.16 100) 0%, oklch(60% 0.18 130) 100%); }
.avatar--g7 { background: linear-gradient(135deg, oklch(68% 0.18 0) 0%,   oklch(58% 0.14 320) 100%); }

/* Ring de verificado opcional */
.avatar--verificado {
    box-shadow: inset 0 0 0 1px var(--cor-borda),
                0 0 0 2px var(--cor-fundo),
                0 0 0 4px var(--cor-acento);
}

/* ──────────────────────────────────────────────────────────────────
   COMPLETUDE DO PERFIL — barra gamificada
   ──────────────────────────────────────────────────────────────── */
.completude-card {
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-borda);
    border-radius: 18px;
    padding: var(--esp-4);
    margin: var(--esp-3) 0;
    position: relative;
    overflow: hidden;
}
.completude-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at top right,
        oklch(72% 0.15 25 / 0.08) 0%, transparent 60%);
    pointer-events: none;
}
.completude-cab {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--esp-2); position: relative;
}
.completude-titulo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem; font-weight: 700; color: var(--cor-texto);
    margin: 0;
}
.completude-pct {
    font-size: 1.6rem; font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--grad-primario);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.completude-barra {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--cor-fundo-superficie);
    position: relative;
    margin-bottom: var(--esp-3);
}
.completude-barra__fill {
    height: 100%;
    background: var(--grad-primario);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.completude-barra__fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%, oklch(98% 0 0 / 0.3) 50%, transparent 100%);
    animation: completudeShine 2.5s ease-in-out infinite;
}
@keyframes completudeShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.completude-faltam {
    display: flex; flex-direction: column; gap: var(--esp-2);
    position: relative;
}
.completude-item {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    background: var(--cor-fundo-superficie);
    border-radius: 12px;
    text-decoration: none; color: var(--cor-texto);
    font-size: 0.88rem;
    transition: transform 0.15s ease, background 0.15s ease;
}
.completude-item:hover, .completude-item:active {
    background: var(--cor-fundo-superficie-hover, var(--cor-fundo-superficie));
    transform: translateX(2px);
}
.completude-item__icone { font-size: 1.2rem; }
.completude-item__txt { flex: 1; }
.completude-item__pct {
    font-size: 0.78rem; color: var(--cor-primaria);
    font-weight: 700;
}
.completude-item__seta { color: var(--cor-texto-fraco); font-size: 1rem; }
/* Botão "Ver mais/menos itens" — expande os itens de completude além dos 4 (antes
   era um rótulo morto "e mais N itens…"). Todos os itens revelados são clicáveis. */
.completude-vermais {
    align-self: center;
    margin-top: 2px;
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: var(--cor-primaria);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.completude-vermais:hover, .completude-vermais:active {
    background: var(--cor-fundo-superficie);
}
.completude-msg-pronto {
    text-align: center; padding: var(--esp-3);
    color: var(--cor-sucesso); font-weight: 600; font-size: 0.95rem;
    position: relative;
}

/* ──────────────────────────────────────────────────────────────────
   EMPTY STATES ilustrados
   ──────────────────────────────────────────────────────────────── */
.empty {
    text-align: center;
    padding: var(--esp-6) var(--esp-4);
    display: flex; flex-direction: column; align-items: center;
    gap: var(--esp-3);
    max-width: 380px; margin: var(--esp-5) auto;
}
.empty__ilustracao {
    width: 140px; height: 140px;
    display: grid; place-items: center;
    background: radial-gradient(circle,
        oklch(72% 0.15 25 / 0.12) 0%,
        oklch(72% 0.15 25 / 0) 70%);
    border-radius: 50%;
    position: relative;
}
.empty__ilustracao svg { width: 80px; height: 80px; }
.empty__ilustracao::after {
    content: '';
    position: absolute; inset: -8px;
    border: 1px dashed oklch(72% 0.15 25 / 0.25);
    border-radius: 50%;
    animation: emptyDash 18s linear infinite;
}
@keyframes emptyDash { to { transform: rotate(360deg); } }
.empty__titulo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; font-size: 1.2rem;
    margin: 0; color: var(--cor-texto);
}
.empty__texto {
    color: var(--cor-texto-suave);
    font-size: 0.95rem; line-height: 1.5;
    margin: 0;
}
.empty__cta {
    display: inline-block;
    padding: var(--esp-3) var(--esp-5);
    background: var(--grad-primario);
    color: var(--cor-primaria-texto);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700; font-size: 0.95rem;
    box-shadow: var(--sombra-coral);
    margin-top: var(--esp-2);
    transition: transform 0.15s ease;
}
.empty__cta:hover, .empty__cta:active { transform: translateY(-1px); }
.empty__cta--secundario {
    background: transparent;
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda);
    box-shadow: none;
}

/* ──────────────────────────────────────────────────────────────────
   TUTORIAL CONTEXTUAL — dica discreta em cada tela na 1ª vez
   ──────────────────────────────────────────────────────────────── */
.tut-balao {
    position: fixed;
    top: calc(var(--esp-3) + env(safe-area-inset-top, 0px));
    left: 50%; transform: translateX(-50%);
    background: var(--cor-fundo-elevado);
    border: 1px solid var(--cor-acento);
    border-radius: 14px;
    padding: 10px 14px;
    max-width: 360px; min-width: 240px;
    box-shadow: var(--sombra-md);
    display: flex; align-items: center; gap: 10px;
    font-size: 0.85rem; color: var(--cor-texto);
    z-index: 8000;
    animation: tutBaiar 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tutBaiar {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.tut-balao--saindo { opacity: 0; transform: translate(-50%, -20px); transition: 0.25s; }
.tut-balao__icone { font-size: 1.2rem; flex-shrink: 0; }
.tut-balao__txt { flex: 1; line-height: 1.35; }
.tut-balao__fechar {
    background: transparent; border: none; cursor: pointer;
    color: var(--cor-texto-suave); font-size: 1.2rem; line-height: 1;
    padding: 0 4px;
}

/* ──────────────────────────────────────────────────────────────────
   OFFLINE BANNER — sticky top quando sem conexão
   ──────────────────────────────────────────────────────────────── */
#offline-banner {
    position: fixed; top: 0; left: 0; right: 0;
    background: oklch(70% 0.18 60);
    color: oklch(15% 0.05 60);
    text-align: center;
    padding: 10px 14px;
    font-size: 0.85rem; font-weight: 700;
    z-index: 9000;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}
#offline-banner.offline-banner--ativo {
    transform: translateY(0);
}
#offline-banner span { margin-right: 6px; }

/* ──────────────────────────────────────────────────────────────────
   A1 — REDUCED MOTION (prefers-reduced-motion)
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .confetti-camada,
    .confetti-particula { display: none !important; }
    .skel { animation: none !important; background: var(--cor-fundo-elevado); }
    .badgePulse { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   FOTOS DE PERFIL — grid + slots (COMPARTILHADO: /perfil/fotos e onboarding)
   Antes ficava no <style> de fotos.html (escopo de página), então o slide de
   fotos do onboarding renderizava SEM estilo (só "+" soltos). Movido pro global
   pra as duas telas terem o mesmo layout. (06/06/2026)
   ──────────────────────────────────────────────────────────────── */
.fotos-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: var(--esp-4);
}
@media (max-width: 360px) { .fotos-grid { grid-template-columns: repeat(2, 1fr); } }
.foto-slot { position: relative; aspect-ratio: 3 / 4; }
.foto-slot__conteudo {
    position: relative; width: 100%; height: 100%;
    border-radius: var(--raio-md, 14px); overflow: hidden;
    background: var(--cor-fundo-elevado);
}
.foto-slot__conteudo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slot vazio = botão claro com "+" e rótulo "Foto N". */
.foto-slot__add {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; cursor: pointer;
    border: 2px dashed var(--cor-borda); border-radius: var(--raio-md, 14px);
    background: var(--cor-fundo-elevado); color: var(--cor-texto-suave);
    transition: border-color .15s, background .15s, transform .1s;
}
.foto-slot__add:hover { background: var(--cor-fundo-superficie); border-color: var(--cor-primaria); }
.foto-slot__add:active { transform: scale(0.97); }
.foto-slot__add-icone { font-size: 30px; line-height: 1; font-weight: 300; color: var(--cor-primaria); }
.foto-slot__add-label { font-size: 0.74rem; font-weight: 700; text-align: center; padding: 0 4px; }
.foto-slot__add--analisando { pointer-events: none; opacity: 0.7; }
.foto-slot--principal .foto-slot__add { border-color: var(--cor-acento); }
.foto-slot--principal .foto-slot__add .foto-slot__add-icone { color: var(--cor-acento); }
.foto-slot__remover {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    background: oklch(18% 0.03 250 / 0.7); color: oklch(98% 0 0);
    font-size: 18px; line-height: 1; backdrop-filter: blur(4px);
}
.foto-slot__badge {
    position: absolute; top: 6px; left: 6px;
    padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700;
    background: var(--cor-acento); color: oklch(20% 0.05 80);
}

/* ── Lista de opções (linhas selecionáveis) ─────────────────────────────
   Movidas do onboarding/passos.html (27/07/2026): a tela de Notificações
   (Som do push) usa .opcao-linha e ficava com o botão CRU do navegador
   (labels escuras) — classe compartilhada mora em CSS global. */
.opcoes-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.opcao-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--cor-fundo-elevado);
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-md);
    color: var(--cor-texto);
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transicao-rapida);
    -webkit-tap-highlight-color: transparent;
}
.opcao-linha:hover { border-color: var(--cor-primaria); }
.opcao-linha--ativa {
    border-color: var(--cor-primaria);
    background: color-mix(in oklch, var(--cor-fundo-elevado) 85%, var(--cor-primaria) 8%);
}
.opcao-linha__check {
    color: var(--cor-link);
    font-weight: 800;
    font-size: 18px;
}