/* ===========================
   AUTENTICAÇÃO - Login / Cadastro / Admin
   Reaproveita as variáveis de style.css
   =========================== */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: linear-gradient(160deg, var(--green-50) 0%, var(--gray-50) 55%);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-2xl) var(--space-xl);
    border: 1px solid var(--color-border);
}

.auth-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.auth-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card__icon svg {
    width: 28px;
    height: 28px;
}

.auth-card__header h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}

.auth-card__header p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.auth-error {
    background: var(--color-danger-light);
    color: var(--color-danger-hover);
    border: 1px solid var(--red-100);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    display: none;
}

.auth-error.is-visible {
    display: block;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-sm);
}

.auth-switch {
    margin-top: var(--space-xl);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.auth-switch a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    flex-direction: column;
    gap: var(--space-md);
}

.auth-loading-overlay__spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-loading-overlay span {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Barra de usuário no cabeçalho do app principal */
.user-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
}

.user-bar__name {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
}

@media (min-width: 480px) {
    .user-bar__name {
        display: inline;
    }
}

.user-bar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border-radius: var(--radius-full);
    padding: 6px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.notif-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red-500);
    border: 2px solid var(--green-600);
}

.user-bar__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.user-bar__btn--admin {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* Celulares (até 480px): os botões da barra do usuário mostram só o ícone.
   Não usa largura fixa: o botão se ajusta sozinho ao ícone, então o texto
   nunca sobra pra fora, seja qual for a largura da tela. */
@media (max-width: 480px) {
    .user-bar { gap: 6px; }
    .user-bar__label { display: none; }
    .user-bar__btn {
        padding: 8px;
        gap: 0;
        justify-content: center;
    }
    .user-bar__btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== Meu Perfil (foto do usuário) ===== */
.profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.profile-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 800;
    overflow: hidden;
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.profile-email {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

.profile-photo-actions {
    display: flex;
    gap: var(--space-sm);
}

.profile-photo-actions .btn {
    padding: 8px 16px;
    min-height: 40px;
    font-size: var(--font-size-sm);
}

/* Avatar pequeno usado na tabela do painel Admin */
.admin-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    overflow: visible;
    flex-shrink: 0;
    vertical-align: middle;
}

.admin-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Bolinha de presença no canto do avatar: verde = online agora,
   cinza = offline (parou de mandar sinal há mais de 1 minuto) */
.admin-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-300);
    border: 2px solid var(--color-surface);
    box-sizing: content-box;
}

.admin-online-dot.is-online {
    background: var(--green-500);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ===== Painel Admin ===== */
.admin-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.admin-table th, .admin-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.admin-table th {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.admin-role-badge--admin {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.admin-role-badge--user {
    background: var(--gray-100);
    color: var(--gray-600);
}

.admin-empty {
    padding: var(--space-2xl);
    text-align: center;
    color: var(--color-text-secondary);
}

.admin-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.admin-plan-badge--trial {
    background: var(--amber-50);
    color: #92400e;
}

.admin-plan-badge--pix {
    background: #eff6ff;
    color: #1d4ed8;
}

.admin-plan-badge--cartao {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.admin-plan-badge--pendente {
    background: var(--amber-50);
    color: var(--amber-500);
}

.admin-plan-badge--cancelado {
    background: var(--color-danger-light);
    color: var(--color-danger-hover);
}

.admin-plan-badge--sem-plano {
    background: var(--gray-100);
    color: var(--gray-600);
}

.admin-plan-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Aviso de Pix vencendo em breve (index.html) */
.plan-warning-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--amber-50);
    color: #92400e;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-bottom: 1px solid var(--amber-400);
}

.plan-warning-banner svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--amber-500);
}

.plan-warning-banner span {
    flex: 1;
}

.plan-warning-banner__link {
    flex-shrink: 0;
    background: var(--amber-500);
    color: var(--white);
    text-decoration: none;
    padding: 4px var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.plan-warning-banner__link:hover {
    background: #d97706;
}

@media (max-width: 560px) {
    .plan-warning-banner {
        flex-wrap: wrap;
    }
}

/* Garante que elementos com o atributo "hidden" realmente sumam,
   mesmo os que têm display definido por classes (.btn, .auth-submit...) */
[hidden] {
    display: none !important;
}

/* ===========================
   PAINEL ADMIN RESPONSIVO
   Celular (< 720px): cada usuário vira um cartão compacto
   (nome + "Ver perfil" / plano + função). Tablet e PC: tabela.
   =========================== */
.admin-page {
    width: 100%;
    box-sizing: border-box;
}

.admin-busca {
    margin-bottom: var(--space-md);
}

.admin-btn-perfil {
    padding: 4px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.aviso-card .btn--primary {
    min-height: 44px;
}

@media (min-width: 1100px) {
    .admin-page {
        max-width: 1040px;
    }
}

@media (max-width: 720px) {
    .admin-page {
        padding: var(--space-md);
    }

    .admin-table-wrap {
        background: transparent;
        border: none;
        overflow: visible;
    }

    .admin-table,
    .admin-table tbody {
        display: block;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nome acao"
            "plano funcao";
        align-items: center;
        gap: var(--space-sm) var(--space-md);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-sm);
        padding: var(--space-md);
    }

    .admin-table td {
        display: block;
        padding: 0;
        border: none;
        white-space: normal;
        min-width: 0;
    }

    .admin-table td[data-label="Nome"]   { grid-area: nome; }
    .admin-table td[data-label="Plano"]  { grid-area: plano; }
    .admin-table td[data-label="Função"] { grid-area: funcao; text-align: right; }
    .admin-table td[data-label="Perfil"] { grid-area: acao; }

    .admin-table td[data-label="Nome"] .admin-user-cell > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .admin-btn-perfil {
        min-height: 40px;
        padding: 0 var(--space-lg);
        font-size: var(--font-size-sm);
    }

    .aviso-card,
    .admin-stat-card {
        padding: var(--space-lg);
    }

    .aviso-card__acoes .btn {
        width: 100%;
    }

    .aviso-dest__topo {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 420px) {
    .admin-stats {
        gap: var(--space-sm);
    }

    .admin-stat-card {
        flex: 1 1 130px;
    }

    .confirm-dialog {
        padding: var(--space-xl);
    }

    .confirm-dialog__actions {
        flex-direction: column-reverse;
    }
}

/* ===========================
   MODAL DE PERFIL DO USUÁRIO (PAINEL ADMIN)
   PC/tablet: janela centralizada. Celular: gaveta que sobe de baixo.
   =========================== */
.perfil-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900; /* abaixo do diálogo de confirmação (999) */
    padding: var(--space-lg);
    overflow-y: auto;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease;
}

.perfil-modal {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 2 * var(--space-lg));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-xl);
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.2s ease;
    box-sizing: border-box;
}

.perfil-modal__fechar {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.perfil-modal__fechar:hover {
    background: var(--gray-100);
}

.perfil-modal__fechar svg {
    width: 20px;
    height: 20px;
}

.perfil-modal__topo {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-right: 40px; /* espaço do botão fechar */
    margin-bottom: var(--space-md);
}

.perfil-modal__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 26px;
    font-weight: 700;
}

.perfil-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-modal__ident {
    min-width: 0;
}

.perfil-modal__nome {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    word-break: break-word;
}

.perfil-modal__nome small {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.perfil-modal__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.perfil-modal__status .admin-online-dot {
    position: static;
}

.perfil-modal__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.perfil-modal__rotulo {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.perfil-modal__valor {
    min-width: 0;
    text-align: right;
    color: var(--color-text);
    word-break: break-word;
}

.perfil-modal__vazio {
    color: var(--color-text-secondary);
    font-style: italic;
}

.perfil-modal__whats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--green-50, #f0fdf4);
    color: var(--green-600, #16a34a);
    font-weight: 600;
    text-decoration: none;
    min-height: 32px;
}

.perfil-modal__whats svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.perfil-modal__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.perfil-modal__acoes .btn {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 560px) {
    .perfil-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .perfil-modal {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }
}

/* Link "Entre em contato com o suporte" (tela de login): azul forte no modo
   claro pra se destacar do verde, e branco no modo escuro. */
.auth-switch a.auth-suporte-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html[data-theme="dark"] .auth-switch a.auth-suporte-link {
    color: #ffffff;
}

/* ===========================
   PAINEL ADMIN — CORREÇÕES DE LAYOUT NO PC/TABLET
   =========================== */

/* Em telas largas, ".app-container" vira uma grade de 2 colunas (layout das
   calculadoras). O painel admin não usa essa grade: sem isto, o conteúdo
   ficava espremido na coluna da esquerda. */
#admin-container.app-container {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: var(--space-2xl);
}

/* O estilo genérico ".form-group input" (campos numéricos das calculadoras)
   centraliza o texto, engrossa a fonte e estica checkboxes. Aqui são campos
   de texto livre e caixas de marcar, então voltamos ao normal. */
.aviso-card .form-group .aviso-input {
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: 400;
    padding: var(--space-md);
}

.aviso-card .form-group .aviso-input::placeholder {
    font-size: var(--font-size-base);
}

.aviso-card .form-group .aviso-dest__busca {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

.aviso-card .aviso-dest label {
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
}

.aviso-card .aviso-dest input[type="checkbox"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: checkbox;
    appearance: auto;
    flex-shrink: 0;
}

/* Em telas grandes, a lista de destinatários pode ser mais alta */
@media (min-width: 900px) {
    .aviso-dest__lista {
        max-height: 340px;
    }
}

/* ===== Meu Perfil: layout responsivo (celular, tablet e PC) ===== */
.perfil-page {
    align-items: flex-start;
    padding-top: var(--space-xl);
    padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
}

.perfil-card { max-width: 440px; }

.perfil-topbar { margin-bottom: var(--space-sm); }

.perfil-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-hover);
    text-decoration: none;
}

.perfil-back svg { width: 20px; height: 20px; }
.perfil-back:hover { text-decoration: underline; }

/* Celular: uma coluna, na ordem foto/plano, dados, preferências, mais */
.perfil-grid { display: flex; flex-direction: column; }
.perfil-col { display: contents; }
.perfil-sec--perfil { order: 1; }
.perfil-sec--dados { order: 2; }
.perfil-sec--prefs { order: 3; }
.perfil-sec--conta { order: 4; }
.perfil-sec--mais { order: 5; }

/* Botão salvar fixo no rodapé enquanto o formulário está na tela */
.perfil-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--space-xl));
    padding: var(--space-md) var(--space-xl) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.perfil-savebar .auth-submit { width: auto; flex: 1; margin-top: 0; }
.perfil-savebar .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.perfil-savebar__hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); max-width: 40%; }

/* Áreas de toque de pelo menos 44px */
.perfil-card .form-group input { min-height: 44px; }
.perfil-card .btn { min-height: 44px; }
.perfil-card .profile-menu-list .more-sheet__item { min-height: 48px; }
.perfil-card .profile-setting-row { min-height: 56px; }
.perfil-card .profile-plan-card__link { display: inline-flex; align-items: center; min-height: 44px; }

/* Tablet e PC: duas colunas */
@media (min-width: 768px) {
    .perfil-page { padding-top: var(--space-2xl); }
    .perfil-card { max-width: 960px; padding: var(--space-2xl); }

    .perfil-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 0 var(--space-2xl);
        align-items: start;
    }

    .perfil-col { display: flex; flex-direction: column; min-width: 0; }
    .perfil-col--right > .perfil-sec:first-child .profile-section-title { margin-top: 0; }

    /* Com duas colunas o botão salvar não precisa grudar no rodapé */
    .perfil-savebar {
        position: static;
        margin: 0;
        padding: 0;
        border-top: none;
        background: transparent;
    }
    .perfil-savebar__hint { max-width: none; }
}

.profile-photo-actions { flex-wrap: wrap; justify-content: center; }
.perfil-sair { width: 100%; margin-top: var(--space-lg); }
/* "Tirar foto" só faz sentido no celular/tablet (no PC abriria o seletor de arquivos) */
@media (hover: hover) and (pointer: fine) { #btn-tirar-foto { display: none; } }

/* ===== Barra do topo da tela inicial: botões maiores (Notificações, Assinatura, Admin, Sair) ===== */
.user-bar { gap: 8px; }
.user-bar__btn {
    padding: 10px 16px;
    min-height: 44px;
    font-size: var(--font-size-sm);
    gap: 8px;
}
.user-bar__btn svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
    .user-bar { gap: 8px; }
    .user-bar__btn { padding: 0; width: 44px; height: 44px; min-height: 44px; }
    .user-bar__btn svg { width: 22px; height: 22px; }
}

/* Cargo, empresa e cidade: letra menor e alinhada à esquerda, pra ver tudo o que a pessoa digita */
.perfil-card .form-group input#campo-cargo,
.perfil-card .form-group input#campo-empresa,
.perfil-card .form-group input#campo-cidade {
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
}

/* Janela de recorte da foto */
.crop-modal[hidden] { display: none; }
.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.6);
}
.crop-modal__box {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.crop-modal__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); }
.crop-modal__hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-align: center; }
#crop-canvas {
    width: min(100%, 300px);
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    touch-action: none;
    cursor: grab;
    background: #fff;
}
#crop-zoom { width: 100%; accent-color: var(--color-primary); min-height: 32px; }
.crop-modal__actions { display: flex; gap: var(--space-sm); width: 100%; }
.crop-modal__actions .btn { flex: 1; justify-content: center; }

/* Meu Perfil: texto de todos os campos alinhado à esquerda, dentro do campo */
.perfil-card .form-group input,
.perfil-card .form-group select {
    text-align: left;
    text-align-last: left;
}