/* =====================================================================
   👤 PROFILE MODAL — PREMIUM
   Visual: mystockstick_profile_modal.html
   Personalização 100% isolada no modal (jamais toca o fundo externo)
   ===================================================================== */

/* ─────────────────────────────────────────────
   1. CASCA DO MODAL
   ───────────────────────────────────────────── */
.profile-modal-shell {
    width: 680px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 32px !important;
    border: 2px solid rgba(244, 143, 177, 0.6) !important;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 64px rgba(233, 30, 99, 0.10),
        0 4px 16px rgba(206, 147, 216, 0.15) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Propriedade crítica: isolamento de contexto.
       Garante que nenhuma personalização interna vaze para fora */
    isolation: isolate;
    contain: layout style;
}

/* Override obrigatório: base .modal-content pode ter overflow que quebra o layout */
.profile-modal-shell.modal-content {
    overflow: hidden;
    padding: 0 !important;
}

/* ─────────────────────────────────────────────
   2. HEADER DO MODAL
   ───────────────────────────────────────────── */
.profile-modal-shell .modal-header {
    padding: 20px 24px 0 !important;
    background: linear-gradient(180deg, rgba(252, 228, 236, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom: 1px solid rgba(244, 143, 177, 0.18) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-shrink: 0;
}

.profile-modal-shell .header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-bottom: 12px !important;
}

/* Logo */
.profile-modal-shell .logo-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.profile-modal-shell .logo-dot {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f48fb1, #ce93d8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.profile-modal-shell .logo-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #880e4f !important;
    letter-spacing: 0.5px !important;
}

/* Pontos decorativos do header */
.profile-modal-shell .decorative-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0.4;
}

.profile-modal-shell .decorative-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* ─────────────────────────────────────────────
   3. ABAS (TABS)
   ───────────────────────────────────────────── */
.profile-modal-shell .tabs {
    display: flex !important;
    gap: 2px !important;
    padding-bottom: 0 !important;
    margin-top: 10px !important;
}

.profile-modal-shell .tab {
    padding: 8px 18px !important;
    border-radius: 12px 12px 0 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: #c48faa !important;
    transition: all 0.18s !important;
    border-bottom: 2px solid transparent !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

.profile-modal-shell .tab.active {
    background: rgba(244, 143, 177, 0.12) !important;
    color: #c2185b !important;
    border-bottom: 2px solid #f48fb1 !important;
}

.profile-modal-shell .tab:hover:not(.active) {
    background: rgba(244, 143, 177, 0.07) !important;
    color: #ad5484 !important;
}

/* ─────────────────────────────────────────────
   4. CORPO DO MODAL
   ───────────────────────────────────────────── */

/* Base do modal-body — o wrapper .modal-body base deve ter padding 0
   para o profile-modal-body gerenciar o próprio espaço */
.profile-modal-shell .modal-body {
    padding: 0 !important;
    overflow: visible !important;
}

/* Container interno real do scroll */
.profile-modal-shell #modal-body {
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow-y: auto !important;
    max-height: 62vh !important;
    flex: 1;
}

.profile-modal-shell #modal-body::-webkit-scrollbar {
    width: 4px;
}
.profile-modal-shell #modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.profile-modal-shell #modal-body::-webkit-scrollbar-thumb {
    background: rgba(244, 143, 177, 0.4);
    border-radius: 4px;
}

/* ─────────────────────────────────────────────
   5. HERO CARD (destaque do perfil)
   ───────────────────────────────────────────── */
.profile-modal-shell .hero-card {
    display: grid !important;
    grid-template-columns: 148px 1fr !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(252, 228, 236, 0.6) 0%, rgba(243, 229, 245, 0.5) 100%) !important;
    border: 1px solid rgba(244, 143, 177, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
    /* Sem box-shadow aqui — não deve "vazar" */
    box-shadow: none !important;
    transition: background 0.35s ease !important;
}

/* Orbes decorativos dentro do hero */
.profile-modal-shell .hero-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(244, 143, 177, 0.08);
    pointer-events: none;
}

.profile-modal-shell .hero-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 60px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(206, 147, 216, 0.08);
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   6. AVATAR
   ───────────────────────────────────────────── */
.profile-modal-shell .avatar-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
}

.profile-modal-shell .avatar-frame {
    width: 130px !important;
    height: 130px !important;
    border-radius: 22px !important;
    border: 2px solid rgba(244, 143, 177, 0.4) !important;
    background: linear-gradient(135deg, rgba(252, 228, 236, 0.8), rgba(243, 229, 245, 0.8)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 52px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}

.profile-modal-shell .avatar-frame:hover {
    border-color: rgba(244, 143, 177, 0.7) !important;
}

/* Overlay de edição sobre o avatar */
.profile-modal-shell .avatar-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(252, 228, 236, 0.85) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #c2185b !important;
    border-radius: 20px !important;
}

.profile-modal-shell .avatar-frame:hover .avatar-overlay {
    opacity: 1 !important;
}

.profile-modal-shell .avatar-overlay i {
    font-size: 22px !important;
}

/* No modo público, sem interação no avatar */
.profile-modal-shell.public-mode .avatar-frame {
    cursor: default !important;
}

.profile-modal-shell.public-mode .avatar-overlay {
    display: none !important;
}

/* ─────────────────────────────────────────────
   7. CHIPS: RANK E PÚBLICO
   ───────────────────────────────────────────── */
.profile-modal-shell .rank-pill {
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(244, 143, 177, 0.15) !important;
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    color: #c2185b !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.profile-modal-shell .public-chip {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: rgba(206, 147, 216, 0.15) !important;
    border: 1px solid rgba(206, 147, 216, 0.3) !important;
    color: #8e24aa !important;
    letter-spacing: 0.04em !important;
}

/* ─────────────────────────────────────────────
   8. COLUNA DE INFORMAÇÕES (nome, bio, stats)
   ───────────────────────────────────────────── */
.profile-modal-shell .info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: relative !important;
    z-index: 1 !important;
}

.profile-modal-shell .name-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 2px !important;
}

.profile-modal-shell .profile-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #880e4f !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    font-family: inherit !important;
    width: 100% !important;
    padding: 0 !important;
}

.profile-modal-shell .profile-name::placeholder {
    color: #f48fb1 !important;
}

/* No modo público, o campo nome fica estático */
.profile-modal-shell.public-mode .profile-name {
    pointer-events: none !important;
}

/* Wrapper da bio (contém botões de fonte + textarea) */
.profile-modal-shell .bio-wrapper {
    position: relative !important;
}

/* ─────────────────────────────────────────────
   9. SELETOR DE FONTE DA BIO
   ───────────────────────────────────────────── */
.profile-modal-shell .bio-font-row {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
}

.profile-modal-shell .font-btn {
    padding: 3px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    background: transparent !important;
    font-size: 11px !important;
    cursor: pointer !important;
    color: #c48faa !important;
    transition: all 0.15s !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}

.profile-modal-shell .font-btn.active {
    background: rgba(244, 143, 177, 0.2) !important;
    border-color: rgba(244, 143, 177, 0.5) !important;
    color: #c2185b !important;
}

.profile-modal-shell .font-btn:hover:not(.active) {
    background: rgba(244, 143, 177, 0.08) !important;
    color: #ad5484 !important;
}

/* ─────────────────────────────────────────────
   10. TEXTAREA DA BIO
   ───────────────────────────────────────────── */
.profile-modal-shell .profile-bio {
    width: 100% !important;
    min-height: 64px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(244, 143, 177, 0.25) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    color: #7b3f5e !important;
    resize: none !important;
    outline: none !important;
    font-family: inherit ;
    line-height: 1.6 !important;
    transition: border-color 0.2s, font-family 0.25s !important;
    box-sizing: border-box !important;
}

.profile-modal-shell .profile-bio:focus {
    border-color: rgba(244, 143, 177, 0.55) !important;
}

/* No modo público, bio vira leitura pura */
.profile-modal-shell.public-mode .profile-bio {
    pointer-events: none !important;
    border-color: transparent !important;
    background: transparent !important;
    padding-left: 0 !important;
}

/* ─────────────────────────────────────────────
   11. ESTATÍSTICAS
   ───────────────────────────────────────────── */
.profile-modal-shell .stat-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.profile-modal-shell .stat-card {
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(252, 228, 236, 0.5), rgba(243, 229, 245, 0.4)) !important;
    border: 1px solid rgba(244, 143, 177, 0.18) !important;
    text-align: center !important;
    box-shadow: none !important;
}

.profile-modal-shell .stat-val {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #c2185b !important;
    display: block !important;
    line-height: 1.1 !important;
    background: none !important;
    -webkit-text-fill-color: #c2185b !important;
}

.profile-modal-shell .stat-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #c48faa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ─────────────────────────────────────────────
   12. TÍTULOS DE SEÇÃO
   ───────────────────────────────────────────── */
.profile-modal-shell .section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #c48faa !important;
    margin-bottom: 8px !important;
}

/* ─────────────────────────────────────────────
   13. FORMULÁRIO DE DADOS (aba Perfil)
   ───────────────────────────────────────────── */
.profile-modal-shell .form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.profile-modal-shell .field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.profile-modal-shell .field-full {
    grid-column: 1 / -1 !important;
}

.profile-modal-shell .field label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #c48faa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.profile-modal-shell .field input,
.profile-modal-shell .field select {
    padding: 10px 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(244, 143, 177, 0.25) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    color: #7b3f5e !important;
    font-size: 13px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.profile-modal-shell .field input:focus,
.profile-modal-shell .field select:focus {
    border-color: rgba(244, 143, 177, 0.55) !important;
}

/* No modo público, os campos ficam estáticos */
.profile-modal-shell.public-mode .field input,
.profile-modal-shell.public-mode .field select {
    pointer-events: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

/* ─────────────────────────────────────────────
   14. ABA STICKERS — Picker do avatar
   ───────────────────────────────────────────── */
.profile-modal-shell .sticker-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.profile-modal-shell .sticker-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

.profile-modal-shell .sticker-slot {
    width: 90px !important;
    height: 90px !important;
    border-radius: 20px !important;
    border: 1.5px dashed rgba(244, 143, 177, 0.4) !important;
    background: rgba(252, 228, 236, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 36px !important;
    transition: all 0.18s !important;
    position: relative !important;
    box-shadow: none !important;
}

.profile-modal-shell .sticker-slot:hover {
    border-color: rgba(244, 143, 177, 0.7) !important;
    background: rgba(252, 228, 236, 0.55) !important;
    transform: translateY(-2px) !important;
}

.profile-modal-shell .sticker-slot img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}

/* Botão X de remover sticker da galeria */
.profile-modal-shell .sticker-slot .sticker-remove {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #f48fb1 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1 !important;
}

.profile-modal-shell .sticker-slot:hover .sticker-remove {
    display: flex !important;
}

/* ─────────────────────────────────────────────
   15. PICKER PANELS (grade de stickers)
   ───────────────────────────────────────────── */
.profile-modal-shell .picker-panel {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(244, 143, 177, 0.25) !important;
    border-radius: 20px !important;
    padding: 14px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: none !important;
}

.profile-modal-shell .picker-panel.open {
    display: flex !important;
}

.profile-modal-shell .picker-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
}

.profile-modal-shell .picker-item {
    aspect-ratio: 1 / 1 !important;
    border-radius: 14px !important;
    background: rgba(252, 228, 236, 0.4) !important;
    border: 1px solid rgba(244, 143, 177, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
}

.profile-modal-shell .picker-item:hover {
    background: rgba(252, 228, 236, 0.8) !important;
    border-color: rgba(244, 143, 177, 0.4) !important;
    transform: scale(1.08) !important;
}

.profile-modal-shell .picker-item.selected {
    border-color: #f48fb1 !important;
    background: rgba(244, 143, 177, 0.15) !important;
}

/* Avatar picker (painel inline no tab-perfil) */
#avatar-picker-panel.picker-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
}

/* ─────────────────────────────────────────────
   16. ABA VISUAL — Customizações do modal
   (theme, borda do avatar, hero style, fonte,
    rank — tudo isolado dentro do modal)
   ───────────────────────────────────────────── */
.profile-modal-shell .customize-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Tema: bolinhas de cor */
.profile-modal-shell .theme-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.profile-modal-shell .theme-dot {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2.5px solid transparent !important;
    transition: transform 0.15s, border-color 0.15s !important;
    flex-shrink: 0 !important;
}

.profile-modal-shell .theme-dot:hover {
    transform: scale(1.12) !important;
}

.profile-modal-shell .theme-dot.active {
    border-color: #c2185b !important;
}

/* ─────────────────────────────────────────────
   17. VIEW PÚBLICA (modo feed)
   ───────────────────────────────────────────── */
.profile-modal-shell .public-view {
    display: none !important;
}

/* Quando o modal entra em public-mode: */
.profile-modal-shell.public-mode .edit-only {
    display: none !important;
}

.profile-modal-shell.public-mode .public-view {
    display: flex !important;
}

/* ─────────────────────────────────────────────
   18. FOOTER — Botões de ação
   ───────────────────────────────────────────── */
.profile-modal-shell .modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid rgba(244, 143, 177, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(252, 228, 236, 0.18) !important;
    border-radius: 0 0 32px 32px !important;
    flex-shrink: 0;
}

.profile-modal-shell .footer-left {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Botão "ver público" / "editar" */
.profile-modal-shell .btn-preview {
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(244, 143, 177, 0.35) !important;
    background: transparent !important;
    color: #c2185b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: inherit !important;
}

.profile-modal-shell .btn-preview:hover {
    background: rgba(244, 143, 177, 0.1) !important;
}

/* Botão "salvar perfil" */
.profile-modal-shell .btn-save {
    padding: 10px 28px !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(135deg, #f48fb1, #ce93d8) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 16px rgba(244, 143, 177, 0.35) !important;
    transition: all 0.18s !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
}

.profile-modal-shell .btn-save:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(244, 143, 177, 0.5) !important;
}

/* ─────────────────────────────────────────────
   19. TOAST DE CONFIRMAÇÃO
   (posicionado dentro do contexto do app,
    não do fundo — z-index alto mas contido)
   ───────────────────────────────────────────── */
.saved-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(80px) !important;
    background: linear-gradient(135deg, #f48fb1, #ce93d8) !important;
    color: #fff !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(244, 143, 177, 0.4) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.saved-toast.show {
    transform: translateX(-50%) translateY(0) !important;
}

/* ─────────────────────────────────────────────
   20. TEMAS DO MODAL — applyTheme() do JS
   Muda SOMENTE o interior do modal.
   O #overlay/.overlay (fundo externo) NUNCA
   é tocado aqui. A função applyTheme() do JS
   original mexia em overlay; a versão correta
   deve chamar apenas elementos internos.
   Fornecemos aqui os alvos corretos para o JS:
   ───────────────────────────────────────────── */

/* Tema Rosa (padrão) */
.profile-modal-shell[data-theme="rosa"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(244, 143, 177, 0.35) !important;
}
.profile-modal-shell[data-theme="rosa"] .modal-header {
    background: linear-gradient(180deg, rgba(252, 228, 236, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
.profile-modal-shell[data-theme="rosa"] .modal-footer {
    background: rgba(252, 228, 236, 0.18) !important;
}

/* Tema Lavanda */
.profile-modal-shell[data-theme="lavanda"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(206, 147, 216, 0.35) !important;
}
.profile-modal-shell[data-theme="lavanda"] .modal-header {
    background: linear-gradient(180deg, rgba(237, 231, 246, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom-color: rgba(206, 147, 216, 0.2) !important;
}
.profile-modal-shell[data-theme="lavanda"] .hero-card {
    background: linear-gradient(135deg, rgba(237, 231, 246, 0.6), rgba(243, 229, 245, 0.5)) !important;
    border-color: rgba(206, 147, 216, 0.22) !important;
}
.profile-modal-shell[data-theme="lavanda"] .modal-footer {
    background: rgba(237, 231, 246, 0.18) !important;
    border-top-color: rgba(206, 147, 216, 0.15) !important;
}
.profile-modal-shell[data-theme="lavanda"] .stat-card {
    background: linear-gradient(135deg, rgba(237, 231, 246, 0.5), rgba(243, 229, 245, 0.4)) !important;
    border-color: rgba(206, 147, 216, 0.18) !important;
}

/* Tema Menta */
.profile-modal-shell[data-theme="menta"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(165, 214, 167, 0.35) !important;
}
.profile-modal-shell[data-theme="menta"] .modal-header {
    background: linear-gradient(180deg, rgba(232, 245, 233, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom-color: rgba(165, 214, 167, 0.2) !important;
}
.profile-modal-shell[data-theme="menta"] .hero-card {
    background: linear-gradient(135deg, rgba(232, 245, 233, 0.6), rgba(224, 247, 250, 0.5)) !important;
    border-color: rgba(165, 214, 167, 0.22) !important;
}
.profile-modal-shell[data-theme="menta"] .modal-footer {
    background: rgba(232, 245, 233, 0.18) !important;
    border-top-color: rgba(165, 214, 167, 0.15) !important;
}
.profile-modal-shell[data-theme="menta"] .stat-card {
    background: linear-gradient(135deg, rgba(232, 245, 233, 0.5), rgba(224, 247, 250, 0.4)) !important;
    border-color: rgba(165, 214, 167, 0.18) !important;
}
.profile-modal-shell[data-theme="menta"] .tab.active { color: #2e7d32 !important; border-bottom-color: #a5d6a7 !important; }
.profile-modal-shell[data-theme="menta"] .btn-save { background: linear-gradient(135deg, #a5d6a7, #80cbc4) !important; }

/* Tema Pêssego */
.profile-modal-shell[data-theme="pêssego"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 204, 128, 0.35) !important;
}
.profile-modal-shell[data-theme="pêssego"] .modal-header {
    background: linear-gradient(180deg, rgba(255, 243, 224, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom-color: rgba(255, 204, 128, 0.2) !important;
}
.profile-modal-shell[data-theme="pêssego"] .hero-card {
    background: linear-gradient(135deg, rgba(255, 243, 224, 0.6), rgba(252, 228, 236, 0.5)) !important;
    border-color: rgba(255, 204, 128, 0.22) !important;
}
.profile-modal-shell[data-theme="pêssego"] .modal-footer {
    background: rgba(255, 243, 224, 0.18) !important;
    border-top-color: rgba(255, 204, 128, 0.15) !important;
}
.profile-modal-shell[data-theme="pêssego"] .stat-card {
    background: linear-gradient(135deg, rgba(255, 243, 224, 0.5), rgba(252, 228, 236, 0.4)) !important;
    border-color: rgba(255, 204, 128, 0.18) !important;
}
.profile-modal-shell[data-theme="pêssego"] .tab.active { color: #e65100 !important; border-bottom-color: #ffcc80 !important; }
.profile-modal-shell[data-theme="pêssego"] .btn-save { background: linear-gradient(135deg, #ffcc80, #f48fb1) !important; }

/* Tema Céu */
.profile-modal-shell[data-theme="céu"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(129, 212, 250, 0.35) !important;
}
.profile-modal-shell[data-theme="céu"] .modal-header {
    background: linear-gradient(180deg, rgba(225, 245, 254, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom-color: rgba(129, 212, 250, 0.2) !important;
}
.profile-modal-shell[data-theme="céu"] .hero-card {
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.6), rgba(232, 234, 246, 0.5)) !important;
    border-color: rgba(129, 212, 250, 0.22) !important;
}
.profile-modal-shell[data-theme="céu"] .modal-footer {
    background: rgba(225, 245, 254, 0.18) !important;
    border-top-color: rgba(129, 212, 250, 0.15) !important;
}
.profile-modal-shell[data-theme="céu"] .stat-card {
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.5), rgba(232, 234, 246, 0.4)) !important;
    border-color: rgba(129, 212, 250, 0.18) !important;
}
.profile-modal-shell[data-theme="céu"] .tab.active { color: #0277bd !important; border-bottom-color: #81d4fa !important; }
.profile-modal-shell[data-theme="céu"] .btn-save { background: linear-gradient(135deg, #81d4fa, #ce93d8) !important; }

/* ─────────────────────────────────────────────
   21. ESTILOS DO HERO CARD
   (frosted / soft / gradient — via applyHeroStyle)
   ───────────────────────────────────────────── */

/* "frosted" — aplicado via JS: hero-card recebe backdrop-filter + bg rgba branco */
/* "soft"    — bg mais opaco branco */
/* "gradient"— padrão, já definido acima */
/* Não precisam de classes aqui pois são aplicados inline pelo JS existente */

/* ─────────────────────────────────────────────
   22. RESPONSIVO — iPad e telas menores
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .profile-modal-shell {
        width: 100% !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 560px) {
    .profile-modal-shell .hero-card {
        grid-template-columns: 1fr !important;
    }

    .profile-modal-shell .avatar-col {
        flex-direction: row !important;
        align-items: center !important;
    }

    .profile-modal-shell .form-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-modal-shell .stat-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .profile-modal-shell #modal-body {
        max-height: 55vh !important;
    }
}