/* ========================================
   GestãoBLZ - Central de Divulgação v2 (camada visual)
   Carregado depois do ui-v2.css no divulgacao-links.html. Mesma linguagem de
   dashboard-v2 / pagamento-agendamento-v2: cards brancos, ícones em caixas
   chapadas, cor do salão nas ações principais, sem degradês/brilhos/translate.

   Foco em orientação ("as pessoas se perdem"):
   - Passos numerados (resumo no topo + etiqueta "Passo 1/2/3" em cada bloco).
   - Endereço não configurado: faixa âmbar "Comece por aqui" (aparece quando o JS
     deixa o status neutro com o ícone fa-magic = campo vazio depois de carregar).
   - Links bloqueados: o JS aplica opacity/pointer-events inline no card; aqui o
     card continua legível e ganha aviso "liberado ao salvar o Passo 1".
   - Cada link: ícone da finalidade, título, para quem é, campo do link e
     "Copiar" em destaque (QR Code e Abrir discretos). "Copiado!" em verde.
   - Modais (QR, link do app, imagem de divulgação, ajuda): cabeçalho branco com
     ícone chapado; no celular viram folha que sobe de baixo.
   Os arquivos divulgacao-qr-modal.css/js (Dashboard/Perfil) não são tocados.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

body[data-support-page="divulgacao-links"],
body[data-support-page="divulgacao-links"] #modernMainContent,
body[data-support-page="divulgacao-links"] .content-area {
    background: var(--v2-page-bg);
}

body[data-support-page="divulgacao-links"] {
    --dl-tint: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.08);
    --dl-ring: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.15);
    --dl-primary: var(--primary-color, #007bff);
    --dl-primary-dark: var(--primary-dark, var(--primary-color, #0062cc));
    --dl-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ========================================
   BOTÕES BASE (página e modais desta tela)
   ======================================== */
body[data-support-page="divulgacao-links"] .btn-soft,
body[data-support-page="divulgacao-links"] .btn-primary-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body[data-support-page="divulgacao-links"] .btn-soft .me-2,
body[data-support-page="divulgacao-links"] .btn-primary-gradient .me-2 {
    margin-right: 0 !important;
}

body[data-support-page="divulgacao-links"] .btn-soft {
    border: 1px solid var(--v2-card-border);
    background: #ffffff;
    color: var(--v2-text);
}

body[data-support-page="divulgacao-links"] .btn-soft:hover {
    border-color: #cfd4dc;
    background: #f3f4f6;
    color: var(--v2-text);
    box-shadow: none;
    transform: none;
}

body[data-support-page="divulgacao-links"] .btn-soft i {
    color: var(--v2-muted);
}

body[data-support-page="divulgacao-links"] .btn-primary-gradient {
    border: 1px solid var(--dl-primary);
    background: var(--dl-primary);
    color: #ffffff;
}

body[data-support-page="divulgacao-links"] .btn-primary-gradient:hover:not(:disabled) {
    border-color: var(--dl-primary-dark);
    background: var(--dl-primary-dark);
    color: #ffffff;
    box-shadow: none;
    transform: none;
}

/* Desabilitado: cinza (antes laranja apagado, parecia "quase ativo") */
body[data-support-page="divulgacao-links"] .btn-primary-gradient:disabled {
    border-color: #e5e7eb;
    background: #eef0f3;
    color: #8a929e;
    opacity: 1;
    cursor: not-allowed;
}

body[data-support-page="divulgacao-links"] :is(.btn-soft, .btn-primary-gradient):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dl-ring);
}

/* "Copiado!" (showCopyButtonFeedback): verde chapado bem visível */
body[data-support-page="divulgacao-links"] .btn-soft.copy-feedback-success,
body[data-support-page="divulgacao-links"] .btn-soft.copy-feedback-success:hover {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: none;
}

body[data-support-page="divulgacao-links"] .btn-soft.copy-feedback-success i {
    color: #ffffff;
}

/* ========================================
   ESPAÇAMENTO GERAL
   ======================================== */
#modernMainContent .divulgacao-hero,
#modernMainContent .divulgacao-section {
    margin-bottom: 20px;
}

/* ========================================
   RESUMO NO TOPO ("Compartilhe seu negócio") + 3 PASSOS
   ======================================== */
#modernMainContent .divulgacao-hero {
    padding: 20px 24px;
    overflow: visible;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .divulgacao-hero::before {
    display: none;
}

#modernMainContent .divulgacao-hero-content {
    gap: 14px;
    align-items: flex-start;
}

#modernMainContent .divulgacao-hero-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--dl-primary);
    box-shadow: none;
    font-size: 17px;
}

#modernMainContent .divulgacao-hero-title {
    color: var(--v2-text);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#modernMainContent .divulgacao-hero-subtitle {
    margin-top: 4px;
    color: var(--v2-text-2);
    font-size: 14px;
    line-height: 1.55;
}

#modernMainContent .divulgacao-hero-business {
    margin: 0 0 0 6px;
    padding: 3px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--v2-surface);
    box-shadow: inset 0 0 0 1px var(--v2-card-border);
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 400;
    vertical-align: 1px;
}

#modernMainContent .divulgacao-hero-business strong {
    font-weight: 500;
}

#modernMainContent .divulgacao-hero-business i {
    color: var(--v2-muted);
    font-size: 12px;
}

#modernMainContent .dl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

#modernMainContent .dl-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .dl-steps-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #d5d9e0;
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .dl-steps li > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

#modernMainContent .dl-steps strong {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
}

#modernMainContent .dl-steps small {
    color: var(--v2-muted);
    font-size: 12.5px;
}

/* Passo 1 ainda pendente: número 1 na cor do salão (é a próxima ação) */
#modernMainContent:has(#subdomainStatus.neutral .fa-magic) .dl-steps li:first-child {
    border-color: var(--dl-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--dl-primary);
}

#modernMainContent:has(#subdomainStatus.neutral .fa-magic) .dl-steps li:first-child .dl-steps-num {
    background: var(--dl-primary);
    box-shadow: none;
    color: #ffffff;
}

/* ========================================
   BLOCOS (seções) E CABEÇALHO COM ETIQUETA DE PASSO
   ======================================== */
#modernMainContent .divulgacao-section {
    --dl-sec: #6c5ce7;
    padding: 0;
    overflow: hidden;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .divulgacao-section:has(.icon-links) { --dl-sec: #0e8fd6; }
#modernMainContent .divulgacao-section:has(.icon-apps) { --dl-sec: #e0508f; }

#modernMainContent .divulgacao-section > :not(.divulgacao-section-header) {
    margin-left: 20px;
    margin-right: 20px;
}

#modernMainContent .divulgacao-section > :last-child {
    margin-bottom: 20px;
}

#modernMainContent .divulgacao-section-header {
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
}

#modernMainContent .divulgacao-section-icon,
#modernMainContent .divulgacao-section-icon.icon-links,
#modernMainContent .divulgacao-section-icon.icon-apps {
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-top: 0;
    border-radius: 8px;
    background: var(--dl-sec);
    box-shadow: none;
    font-size: 13px;
}

#modernMainContent .divulgacao-section-header > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

#modernMainContent .divulgacao-section-header .divulgacao-section-title { order: 1; }
#modernMainContent .divulgacao-section-header .dl-step-tag { order: 2; }
#modernMainContent .divulgacao-section-header .divulgacao-section-desc { order: 3; flex: 1 1 100%; }

#modernMainContent .dl-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef0f3;
    color: var(--v2-text-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

#modernMainContent .divulgacao-section-title {
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#modernMainContent .divulgacao-section-desc {
    margin-top: 2px;
    color: var(--v2-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

#modernMainContent .divulgacao-section-desc strong {
    color: var(--v2-text-2);
    font-weight: 500;
}

/* Passo 1 configurado (status verde e nada pendente para salvar) */
#modernMainContent .divulgacao-section:has(#subdomainStatus.ok):has(#saveSubdomainBtn:disabled):not(:has(#saveSubdomainBtn .fa-spinner)) .dl-step-tag {
    background: #dcfce7;
    color: #15803d;
}

#modernMainContent .divulgacao-section:has(#subdomainStatus.ok):has(#saveSubdomainBtn:disabled):not(:has(#saveSubdomainBtn .fa-spinner)) .dl-step-tag::after {
    content: "\2713  Configurado";
    white-space: pre;
}

/* Passo 1 pendente (campo vazio depois de carregar) */
#modernMainContent .divulgacao-section:has(#subdomainStatus.neutral .fa-magic) .dl-step-tag {
    background: #fef3c7;
    color: #92400e;
}

#modernMainContent .divulgacao-section:has(#subdomainStatus.neutral .fa-magic) .dl-step-tag::after {
    content: "\00b7  Pendente";
    white-space: pre;
}

/* ========================================
   PASSO 1: ENDEREÇO
   ======================================== */

/* Faixa âmbar "Comece por aqui" (só quando não há endereço) */
#modernMainContent .dl-setup-alert {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
}

#modernMainContent .divulgacao-section:has(#subdomainStatus.neutral .fa-magic) .dl-setup-alert {
    display: flex;
}

#modernMainContent .dl-setup-alert > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #d97706;
    color: #ffffff;
    font-size: 13px;
}

#modernMainContent .dl-setup-alert > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#modernMainContent .dl-setup-alert strong {
    color: #92400e;
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .dl-setup-alert span {
    color: #92400e;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0.92;
}

#modernMainContent .dl-setup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--dl-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#modernMainContent .dl-setup-cta:hover {
    background: var(--dl-primary-dark);
}

/* Campo + botões */
#modernMainContent .subdomain-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

#modernMainContent .subdomain-input-row .form-label {
    margin-bottom: 6px !important;
    color: var(--v2-text) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
}

#modernMainContent .input-group.subdomain-group {
    flex-wrap: nowrap;
}

#modernMainContent .subdomain-group .form-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d5d9e0;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #ffffff;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 400;
}

#modernMainContent .subdomain-group .form-control::placeholder {
    color: #a0a7b2;
    font-weight: 400;
}

#modernMainContent .subdomain-group .input-group-text {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #d5d9e0;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: var(--v2-surface);
    color: var(--v2-muted);
    font-size: 14px;
    font-weight: 400;
}

#modernMainContent .subdomain-group:focus-within .form-control,
#modernMainContent .subdomain-group:focus-within .input-group-text {
    border-color: var(--dl-primary);
}

#modernMainContent .input-group.subdomain-group:focus-within {
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--dl-ring);
}

#modernMainContent .subdomain-group .form-control:focus {
    box-shadow: none;
}

#modernMainContent .subdomain-input-row > .d-flex {
    gap: 8px !important;
}

#modernMainContent #saveSubdomainBtn {
    min-width: 104px;
}

/* Status (formato válido / disponível / em uso / verificando) */
#modernMainContent .subdomain-feedback {
    padding-top: 10px;
}

#modernMainContent .subdomain-status {
    gap: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: #eef0f3;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

#modernMainContent .subdomain-status.ok {
    background: #dcfce7;
    color: #15803d;
}

#modernMainContent .subdomain-status.bad {
    background: #fee2e2;
    color: #b91c1c;
}

/* Prévia do endereço */
#modernMainContent .subdomain-preview {
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
}

#modernMainContent .subdomain-preview > div {
    min-width: 0;
}

#modernMainContent .subdomain-preview .small {
    margin-bottom: 2px !important;
    color: var(--v2-muted) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#modernMainContent .subdomain-preview code {
    color: var(--v2-text);
    font-family: var(--dl-mono);
    font-size: 14.5px;
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Sem endereço ou endereço inválido: prévia é só exemplo, "Copiar" fica inativo */
#modernMainContent .divulgacao-section:has(#subdomainStatus.neutral .fa-magic) .subdomain-preview code,
#modernMainContent .divulgacao-section:has(#subdomainStatus.bad) .subdomain-preview code {
    color: #9aa1ab;
    font-weight: 500;
}

#modernMainContent .divulgacao-section:has(#subdomainStatus.neutral .fa-magic) #copyPreviewBtn,
#modernMainContent .divulgacao-section:has(#subdomainStatus.bad) #copyPreviewBtn {
    opacity: 0.5;
    pointer-events: none;
}

/* Regras: uma linha discreta em vez de 3 faixas cinza */
#modernMainContent .rules-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 12px;
}

#modernMainContent .rules-list li {
    gap: 6px;
    padding: 0;
    background: none;
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent .rules-list li strong {
    color: var(--v2-text-2);
    font-weight: 400;
}

#modernMainContent .rules-list li i {
    color: #16a34a;
    font-size: 12px;
}

#modernMainContent .hint-note {
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent .hint-note i {
    margin: 0;
    color: #d97706;
}

/* ========================================
   PASSO 2: LINKS
   ======================================== */
#modernMainContent .dl-links-locked {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#modernMainContent .dl-links-locked i {
    color: var(--v2-muted);
}

#modernMainContent .dl-links-locked strong {
    font-weight: 500;
}

#modernMainContent:has(#quickClientLinkCard[style*="pointer-events: none"]) .dl-links-locked {
    display: flex;
}

#modernMainContent .links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#modernMainContent .link-card {
    --lc: #2563eb;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title aud"
        "desc desc desc"
        "url  url  url"
        "acts acts acts";
    align-items: center;
    gap: 0 10px;
    padding: 16px;
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modernMainContent #clientLinkCard { --lc: #16a37a; }
#modernMainContent #staffLinkCard { --lc: #475569; }
#modernMainContent #queueLinkCard { --lc: #ee7d12; }

#modernMainContent .link-card::after {
    display: none;
}

#modernMainContent .link-card:hover {
    transform: none;
    border-color: #d5d9e0;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .link-card-body {
    display: contents;
}

#modernMainContent .link-card-badge,
#modernMainContent .link-card-badge.quick,
#modernMainContent .link-card-badge.client,
#modernMainContent .link-card-badge.staff,
#modernMainContent .link-card-badge.queue {
    grid-area: icon;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: var(--lc);
    box-shadow: none;
    font-size: 13px;
}

#modernMainContent .link-card-title {
    grid-area: title;
    min-width: 0;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#modernMainContent .dl-audience {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef0f3;
    color: var(--v2-text-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

#modernMainContent .link-card .dl-audience {
    grid-area: aud;
    background: var(--lc);
    color: #ffffff;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    #modernMainContent .link-card .dl-audience {
        background: color-mix(in srgb, var(--lc) 12%, #ffffff);
        color: color-mix(in srgb, var(--lc) 82%, #000000);
    }
}

#modernMainContent .link-card-desc {
    grid-area: desc;
    margin: 8px 0 12px;
    color: var(--v2-text-2);
    font-size: 13.5px;
    line-height: 1.5;
}

#modernMainContent .link-url {
    grid-area: url;
    min-width: 0;
}

/* Link como campo de leitura */
#modernMainContent .link-url code {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text);
    font-family: var(--dl-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: normal;
    user-select: all;
}

/* Ações: Copiar (principal, cor do salão) + QR Code e Abrir discretos */
#modernMainContent .link-card-actions {
    grid-area: acts;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

#modernMainContent .link-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: auto;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.2;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#modernMainContent .link-action-btn i {
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent .link-action-btn:hover {
    border-color: #cfd4dc;
    background: #f3f4f6;
    color: var(--v2-text);
    transform: none;
}

#modernMainContent .link-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dl-ring);
}

#modernMainContent .link-action-btn.qr-link-trigger {
    order: 2;
    margin-left: auto;
}

#modernMainContent .link-action-btn[id^="open"] {
    order: 3;
}

#modernMainContent .link-action-btn[id^="copy"] {
    order: 1;
    min-width: 118px;
    padding: 7px 18px;
    border-color: var(--dl-primary);
    background: var(--dl-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .link-action-btn[id^="copy"] i {
    color: #ffffff;
}

#modernMainContent .link-action-btn[id^="copy"]:hover {
    border-color: var(--dl-primary-dark);
    background: var(--dl-primary-dark);
    color: #ffffff;
}

/* Copiado: o JS troca o conteúdo só pelo ✓; o texto vem daqui */
#modernMainContent .link-action-btn.copy-feedback-success,
#modernMainContent .link-action-btn.copy-feedback-success:hover {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: none;
}

#modernMainContent .link-action-btn.copy-feedback-success i {
    color: #ffffff;
}

#modernMainContent .link-action-btn.copy-feedback-success::after {
    content: "Copiado!";
}

/* Card bloqueado (JS: opacity .6 + pointer-events none inline) */
#modernMainContent .link-card[style*="pointer-events: none"] {
    opacity: 1 !important;
    background: #fcfcfd;
}

#modernMainContent .link-card[style*="pointer-events: none"] .link-card-badge {
    opacity: 0.55;
}

#modernMainContent .link-card[style*="pointer-events: none"] .link-url code {
    border-style: dashed;
    border-color: #d5d9e0;
    background: #ffffff;
    color: #8a929e;
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    user-select: none;
}

#modernMainContent .link-card[style*="pointer-events: none"] .link-url code::before {
    content: "\f023";
    margin-right: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #a0a7b2;
}

#modernMainContent .link-card[style*="pointer-events: none"] .link-action-btn {
    border-color: #e5e7eb;
    background: #f3f4f6;
    color: #a0a7b2;
}

#modernMainContent .link-card[style*="pointer-events: none"] .link-action-btn i {
    color: #b3b9c2;
}

/* ========================================
   PASSO 3: APPS E IMAGENS
   ======================================== */
#modernMainContent .apps-share-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 14px;
}

#modernMainContent .apps-grid {
    gap: 14px;
}

#modernMainContent .app-card {
    --ac: #16a37a;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modernMainContent .app-card:has(.staff-app) { --ac: #475569; }

#modernMainContent .app-card:hover {
    transform: none;
    border-color: #d5d9e0;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .app-card-icon,
#modernMainContent .app-card-icon.staff-app,
#modernMainContent .app-card-icon.client-app {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ac);
    box-shadow: none;
    font-size: 17px;
}

#modernMainContent .app-card-body {
    gap: 6px;
}

#modernMainContent .app-card-name {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#modernMainContent .app-card .dl-audience {
    justify-self: auto;
    background: var(--ac);
    color: #ffffff;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    #modernMainContent .app-card .dl-audience {
        background: color-mix(in srgb, var(--ac) 12%, #ffffff);
        color: color-mix(in srgb, var(--ac) 82%, #000000);
    }
}

#modernMainContent .app-card-desc {
    color: var(--v2-text-2);
    font-size: 13.5px;
    line-height: 1.5;
}

#modernMainContent .app-store-links {
    gap: 8px;
    margin-top: 6px;
}

#modernMainContent .app-store-btn {
    gap: 8px;
    min-height: 44px;
    padding: 6px 14px 6px 8px;
    border: 1px solid #111827;
    border-radius: 8px;
    background: #111827;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease;
}

#modernMainContent .app-store-btn:hover {
    background: #273244;
    box-shadow: none;
    transform: none;
}

#modernMainContent .app-store-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.2);
}

#modernMainContent .app-store-btn > i {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 12px;
}

#modernMainContent .app-store-btn small {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
}

#modernMainContent .app-store-btn strong {
    font-size: 14px;
    font-weight: 500;
}

/* Imagens de divulgação */
#modernMainContent .app-images-section {
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#modernMainContent .app-images-header {
    margin-bottom: 14px;
}

#modernMainContent .app-images-title {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#modernMainContent .app-images-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #e0508f;
    color: #ffffff;
    font-size: 12px;
}

#modernMainContent .app-images-desc {
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#modernMainContent .app-images-grid {
    grid-template-columns: repeat(2, minmax(0, 190px));
    gap: 12px;
}

#modernMainContent .app-image-card {
    max-width: 190px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: var(--v2-surface);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modernMainContent .app-image-card:hover {
    border-color: #cfd4dc;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .app-image-card:hover img {
    transform: none;
}

#modernMainContent .app-image-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dl-ring);
}

#modernMainContent .app-image-card-overlay {
    right: 8px;
    bottom: 8px;
    left: 8px;
}

#modernMainContent .app-image-card-overlay span {
    justify-content: center;
    width: 100%;
    min-height: 34px;
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--dl-primary);
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transform: none;
}

#modernMainContent .app-image-card:hover .app-image-card-overlay span {
    background: var(--dl-primary-dark);
    box-shadow: none;
    transform: none;
}

/* ========================================
   MODAIS DA TELA (QR, link do app, imagem de divulgação)
   Casca v2: cabeçalho branco com ícone chapado, corpo claro,
   rodapé em faixa cinza, botões chapados.
   ======================================== */
:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) {
    --dl-m-icon: var(--primary-color, #007bff);
}

#qrExportModal { --dl-m-icon: #2563eb; }
#appLinkOptionsModal { --dl-m-icon: #111827; }
#appPromoModal { --dl-m-icon: #e0508f; }

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-content {
    border: 1px solid var(--v2-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-header {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--dl-m-icon);
    color: #ffffff !important;
    font-size: 13px;
}

:is(.qr-export-subtitle, .app-link-modal-subtitle, .app-promo-modal-subtitle) {
    margin-top: 4px;
    padding-left: 40px;
    color: var(--v2-muted);
    font-size: 13px;
    line-height: 1.45;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .btn-close {
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 auto;
    padding: 0;
    border-radius: 8px;
    background-size: 12px;
    opacity: 0.55;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .btn-close:hover {
    background-color: #f3f4f6;
    opacity: 0.9;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-footer {
    gap: 8px;
    padding: 12px 20px;
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider);
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-footer > * {
    margin: 0;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .form-label {
    margin-bottom: 6px;
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 400 !important;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .form-control {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
    color: var(--v2-text);
    font-size: 14px;
    box-shadow: none;
}

:is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .form-control:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--dl-ring);
}

/* ---------- QR Code ---------- */
/* O corpo tem .p-0 no HTML e o painel direito encostava nas bordas */
#qrExportModal .modal-body {
    padding: 0 !important;
}

#qrExportModal .qr-export-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
}

#qrExportModal .qr-export-preview-panel {
    padding: 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 12px;
    background: var(--v2-surface);
}

#qrExportModal .qr-preview-shell {
    min-height: 260px;
    padding: 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

#qrExportModal .qr-preview-shell::before {
    display: none;
}

#qrExportModal .qr-export-preview-image {
    max-height: 46vh;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

#qrExportModal .qr-export-preview-image:hover {
    transform: none;
}

#qrExportModal .qr-export-preview-image:not([src]) {
    min-width: 160px;
    min-height: 160px;
    background: #f3f4f6;
}

#qrExportModal .qr-preview-meta {
    padding-top: 14px;
}

#qrExportModal .qr-preview-badge {
    margin-bottom: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--dl-tint);
    color: var(--primary-dark, var(--primary-color, #0062cc));
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

#qrExportModal .qr-preview-meta h6 {
    margin-bottom: 4px;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

#qrExportModal .qr-preview-meta p {
    margin-bottom: 10px;
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#qrExportModal .qr-preview-meta code {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text);
    font-family: var(--dl-mono);
    font-size: 12.5px;
    font-weight: 400;
    overflow-wrap: anywhere;
    word-break: normal;
}

#qrExportModal .qr-format-list {
    gap: 8px;
}

#qrExportModal .qr-format-list::before {
    content: "Escolha o formato";
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 400;
}

#qrExportModal .qr-format-card {
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#qrExportModal .qr-format-card:hover {
    border-color: #cfd4dc;
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

#qrExportModal .qr-format-card.active {
    border-color: var(--primary-color, #007bff);
    background: var(--dl-tint);
    box-shadow: inset 0 0 0 1px var(--primary-color, #007bff);
}

#qrExportModal .qr-format-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 0;
    border-radius: 8px;
    background: #eef0f3;
    color: var(--v2-text-2);
    font-size: 15px;
}

#qrExportModal .qr-format-card:hover .qr-format-icon {
    background: #e5e7eb;
    color: var(--v2-text);
    box-shadow: none;
}

#qrExportModal .qr-format-card.active .qr-format-icon {
    background: var(--primary-color, #007bff);
    color: #ffffff;
    box-shadow: none;
}

#qrExportModal .qr-format-copy strong,
#qrExportModal .qr-template-card strong {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#qrExportModal .qr-format-copy small,
#qrExportModal .qr-template-card small {
    color: var(--v2-muted);
    font-size: 12.5px;
}

#qrExportModal .qr-export-tip {
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 400;
}

#qrExportModal .qr-export-tip i {
    color: #d97706;
    font-size: 13px;
    margin-top: 2px;
}

#qrExportModal .qr-styled-controls {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

#qrExportModal .qr-styled-section-title {
    margin-bottom: 12px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#qrExportModal .qr-styled-color-inputs {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
}

#qrExportModal .qr-styled-color-inputs input[type="color"] {
    width: 48px;
    height: 40px;
    border: 1px solid #d5d9e0;
    border-radius: 8px;
}

#qrExportModal .qr-styled-color-inputs input[type="color"]:hover {
    transform: none;
}

#qrExportModal .qr-styled-color-inputs .form-control {
    font-family: var(--dl-mono);
}

#qrExportModal .qr-template-card {
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#qrExportModal .qr-template-card:hover {
    border-color: #cfd4dc;
    box-shadow: none;
    transform: none;
}

#qrExportModal .qr-template-card.active {
    border-color: var(--primary-color, #007bff);
    background: var(--dl-tint);
    box-shadow: inset 0 0 0 1px var(--primary-color, #007bff);
}

/* ---------- Link do app ---------- */
#appLinkOptionsModal .modal-dialog {
    max-width: 480px;
}

#appLinkOptionsModal .modal-body {
    padding: 18px 20px 20px;
}

#appLinkOptionsModal .app-link-url-field {
    background: var(--v2-surface);
    font-family: var(--dl-mono);
    font-size: 13px;
}

#appLinkOptionsModal .app-link-actions {
    gap: 8px;
    margin-top: 14px;
}

/* "Copiar link" é a ação principal (enviar para alguém); "Abrir loja" secundária */
#appLinkOptionsModal #copyAppLinkBtn:not(.copy-feedback-success) {
    order: 2;
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

#appLinkOptionsModal #copyAppLinkBtn:not(.copy-feedback-success) i {
    color: #ffffff;
}

#appLinkOptionsModal #copyAppLinkBtn:not(.copy-feedback-success):hover {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
}

#appLinkOptionsModal #copyAppLinkBtn.copy-feedback-success {
    order: 2;
}

#appLinkOptionsModal #openAppStoreBtn {
    order: 1;
    border-color: var(--v2-card-border);
    background: #ffffff;
    color: var(--v2-text);
}

#appLinkOptionsModal #openAppStoreBtn i {
    color: var(--v2-muted);
}

#appLinkOptionsModal #openAppStoreBtn:hover {
    border-color: #cfd4dc;
    background: #f3f4f6;
}

/* ---------- Imagem de divulgação ---------- */
#appPromoModal .modal-body {
    padding: 20px;
}

#appPromoModal .app-promo-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 20px;
}

#appPromoModal .app-promo-preview-panel {
    padding: 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 12px;
    background: var(--v2-surface);
}

#appPromoModal .app-promo-preview-shell {
    min-height: 300px;
    padding: 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

#appPromoModal .app-promo-preview-image {
    max-height: 56vh;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

#appPromoModal .app-promo-preview-meta {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
}

#appPromoModal .app-promo-preview-meta span {
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 400;
}

#appPromoModal .app-promo-preview-meta strong {
    color: var(--v2-text);
    font-family: var(--dl-mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

#appPromoModal .app-promo-options-panel {
    gap: 14px;
}

#appPromoModal .app-promo-section {
    padding: 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
}

#appPromoModal .app-promo-caption {
    min-height: 150px;
    background: var(--v2-surface);
    font-size: 14px;
    line-height: 1.5;
}

#appPromoModal .app-promo-hint {
    margin-top: 6px;
    color: var(--v2-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

#appPromoModal #copyPromoCaptionBtn {
    margin-top: 10px !important;
}

#appPromoModal .app-promo-status {
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13.5px;
    font-weight: 400;
}

#appPromoModal .app-promo-status:has(.status-dot.connected) {
    background: #dcfce7;
    color: #15803d;
}

#appPromoModal .app-promo-status .status-dot,
#appPromoModal .app-promo-status .status-dot.connected,
#appPromoModal .app-promo-status .status-dot.disconnected {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    box-shadow: none;
}

#appPromoModal .app-promo-status .status-dot.connected { background: #16a34a; }
#appPromoModal .app-promo-status .status-dot.disconnected { background: #dc2626; }

/* Rodapé: WhatsApp em verde; conectar = contorno verde */
#appPromoModal #sendPromoWhatsappBtn {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
}

#appPromoModal #sendPromoWhatsappBtn:hover:not(:disabled) {
    border-color: #15803d;
    background: #15803d;
}

#appPromoModal #sendPromoWhatsappBtn:disabled {
    border-color: #e5e7eb;
    background: #eef0f3;
    color: #8a929e;
}

#appPromoModal #connectPromoWhatsappBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-right: auto;
    padding: 8px 16px;
    border: 1px solid #16a34a;
    border-radius: 8px;
    background: #ffffff;
    color: #15803d;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}

#appPromoModal #connectPromoWhatsappBtn:hover {
    background: #f0fdf4;
    color: #15803d;
}

#appPromoModal #connectPromoWhatsappBtn.d-none {
    display: none !important;
}

#appPromoModal .modal-footer .me-2 {
    margin-right: 0 !important;
}

/* ---------- Ajuda ---------- */
#dashboardHelpModal .modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-weight: 500;
    box-shadow: none;
}

#dashboardHelpModal .modal-footer .btn-primary:hover {
    background: var(--primary-dark, var(--primary-color, #0062cc));
}

/* ========================================
   RESPONSIVO
   ======================================== */
@media (max-width: 1024px) {
    #modernMainContent .apps-share-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #modernMainContent .subdomain-input-row {
        grid-template-columns: minmax(0, 1fr);
    }

    #modernMainContent .app-images-grid {
        justify-content: start;
    }

    #qrExportModal .qr-export-grid,
    #appPromoModal .app-promo-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    #modernMainContent .links-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #modernMainContent .dl-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    #modernMainContent .dl-steps li {
        padding: 8px 10px;
    }
}

/* Celular */
@media (max-width: 576px) {
    #modernMainContent .divulgacao-hero {
        padding: 16px;
    }

    #modernMainContent .divulgacao-hero-content {
        flex-direction: row;
        gap: 12px;
    }

    #modernMainContent .divulgacao-hero-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    #modernMainContent .divulgacao-hero-title {
        font-size: 17px;
    }

    #modernMainContent .divulgacao-hero-subtitle {
        font-size: 13.5px;
    }

    #modernMainContent .divulgacao-hero-business {
        display: inline-flex;
        margin: 8px 0 0;
    }

    #modernMainContent .dl-steps {
        margin-top: 12px;
    }

    #modernMainContent .divulgacao-section,
    #modernMainContent .divulgacao-hero {
        border-radius: var(--v2-card-radius);
    }

    #modernMainContent .divulgacao-section-header {
        margin-bottom: 14px;
        padding: 14px 16px;
    }

    #modernMainContent .divulgacao-section > :not(.divulgacao-section-header) {
        margin-left: 16px;
        margin-right: 16px;
    }

    #modernMainContent .divulgacao-section > :last-child {
        margin-bottom: 16px;
    }

    #modernMainContent .divulgacao-section-title {
        font-size: 15.5px;
    }

    /* Faixa "Comece por aqui": botão ocupa a largura */
    #modernMainContent .dl-setup-alert {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    #modernMainContent .dl-setup-alert > div {
        flex-basis: calc(100% - 42px);
    }

    #modernMainContent .dl-setup-cta {
        flex: 1 1 100%;
        min-height: 44px;
    }

    /* Campo: 44px e fonte 16px (sem zoom no iPhone); sufixo continua visível */
    #modernMainContent .subdomain-group .form-control {
        height: 44px;
        border-right: 0;
        border-radius: 8px 0 0 8px !important;
        font-size: 16px;
    }

    #modernMainContent .subdomain-group .input-group-text {
        display: flex;
        height: 44px;
        padding: 8px 10px;
        font-size: 13px;
    }

    #modernMainContent .subdomain-input-row > .d-flex .btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    #modernMainContent .subdomain-preview {
        flex-direction: column;
        align-items: stretch;
    }

    #modernMainContent .subdomain-preview .btn {
        width: 100%;
        min-height: 44px;
    }

    #modernMainContent .rules-list {
        flex-direction: column;
        gap: 6px;
    }

    #modernMainContent .rules-list li {
        align-items: flex-start;
    }

    #modernMainContent .rules-list li i {
        margin-top: 3px;
    }

    #modernMainContent .hint-note {
        align-items: flex-start;
    }

    #modernMainContent .hint-note i {
        margin-top: 3px;
    }

    /* Links: Copiar em largura total, QR Code e Abrir lado a lado (44px) */
    #modernMainContent .link-card {
        padding: 14px;
    }

    #modernMainContent .link-action-btn {
        min-height: 44px;
    }

    #modernMainContent .link-action-btn[id^="copy"] {
        order: 1;
        flex: 1 1 100%;
    }

    #modernMainContent .link-action-btn.qr-link-trigger,
    #modernMainContent .link-action-btn[id^="open"] {
        flex: 1 1 0;
        margin-left: 0;
    }

    /* Apps: layout em linha, lojas lado a lado */
    #modernMainContent .app-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 14px;
    }

    #modernMainContent .app-card-body {
        align-items: flex-start;
    }

    #modernMainContent .app-card-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    #modernMainContent .app-store-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        flex-direction: row;
        align-items: stretch;
    }

    #modernMainContent .app-store-btn {
        justify-content: center;
        min-width: 0;
        padding: 6px 8px;
    }

    #modernMainContent .app-store-btn > i {
        display: none;
    }

    #modernMainContent .app-store-btn span {
        min-width: 0;
    }

    #modernMainContent .app-store-btn strong {
        font-size: 13px;
        white-space: nowrap;
    }

    #modernMainContent .app-images-section {
        padding: 14px;
    }

    #modernMainContent .app-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #modernMainContent .app-image-card {
        max-width: none;
        justify-self: stretch;
    }

    #modernMainContent .app-image-card-overlay span {
        min-height: 36px;
    }

    /* ---------- Modais como folha que sobe de baixo ---------- */
    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-dialog,
    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-dialog.modal-xl,
    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-dialog.modal-dialog-centered,
    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-dialog.modal-dialog-scrollable {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin: 0 !important;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal).fade .modal-dialog {
        transform: translateY(32px);
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal).show .modal-dialog {
        transform: none;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: calc(100vh - 8px) !important;
        max-height: calc(100dvh - 8px) !important;
        overflow: hidden;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.16);
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) :is(.modal-header, .modal-footer) {
        flex-shrink: 0;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal, #dashboardHelpModal) .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-header {
        padding: 14px 16px 12px;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-title {
        font-size: 15.5px;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .btn-close {
        width: 36px;
        height: 36px;
    }

    :is(.qr-export-subtitle, .app-link-modal-subtitle, .app-promo-modal-subtitle) {
        padding-left: 0;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .form-control {
        min-height: 44px;
        font-size: 16px;
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-footer {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    :is(#qrExportModal, #appLinkOptionsModal, #appPromoModal) .modal-footer .btn,
    #appPromoModal .modal-footer :is(.btn-soft, .btn-primary-gradient) {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 44px;
        padding: 8px 10px;
        white-space: nowrap;
    }

    #qrExportModal .modal-footer .btn[data-bs-dismiss="modal"] {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* QR: prévia menor para as opções aparecerem sem rolar muito */
    #qrExportModal .qr-export-grid {
        gap: 14px;
        padding: 14px 16px 16px;
    }

    #qrExportModal .qr-export-preview-panel {
        padding: 12px;
        border: 1px solid var(--v2-card-border);
        background: var(--v2-surface);
    }

    #qrExportModal .qr-preview-shell {
        min-height: 0;
        padding: 10px;
    }

    #qrExportModal .qr-export-preview-image {
        max-height: 30vh;
    }

    #qrExportModal .qr-preview-meta {
        padding-top: 10px;
    }

    #qrExportModal .qr-format-card {
        padding: 10px 12px;
    }

    #qrExportModal .qr-styled-color-inputs {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    #qrExportModal .qr-styled-color-inputs input[type="color"] {
        width: 48px;
        height: 44px;
    }

    /* Link do app: botões lado a lado */
    #appLinkOptionsModal .modal-body {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    #appLinkOptionsModal .app-link-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #appLinkOptionsModal .app-link-actions .btn {
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
    }

    /* Imagem de divulgação */
    #appPromoModal .modal-body {
        padding: 14px 16px 16px;
    }

    #appPromoModal .app-promo-grid {
        gap: 14px;
    }

    #appPromoModal .app-promo-preview-panel {
        padding: 12px;
        border: 1px solid var(--v2-card-border);
        background: var(--v2-surface);
    }

    #appPromoModal .app-promo-preview-shell {
        min-height: 0;
        padding: 8px;
    }

    #appPromoModal .app-promo-preview-image {
        max-height: 34vh;
    }

    #appPromoModal .app-promo-caption {
        min-height: 130px;
    }

    #appPromoModal #copyPromoCaptionBtn {
        width: 100%;
        min-height: 44px;
    }

    /* Rodapé: "Conectar WhatsApp" (quando aparece) em cima; Baixar + Enviar lado a lado */
    #appPromoModal .modal-footer {
        flex-wrap: wrap;
    }

    #appPromoModal #connectPromoWhatsappBtn {
        flex: 1 1 100%;
        min-height: 44px;
        margin-right: 0;
    }

    #dashboardHelpModal .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    #dashboardHelpModal .modal-footer .btn-primary {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* Passo 1 concluído: número do resumo vira ✓ verde */
#modernMainContent:has(#subdomainStatus.ok):has(#saveSubdomainBtn:disabled):not(:has(#saveSubdomainBtn .fa-spinner)) .dl-steps li:first-child .dl-steps-num {
    background: #16a34a;
    box-shadow: none;
    color: #ffffff;
    font-size: 0;
}

#modernMainContent:has(#subdomainStatus.ok):has(#saveSubdomainBtn:disabled):not(:has(#saveSubdomainBtn .fa-spinner)) .dl-steps li:first-child .dl-steps-num::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}

/* Salvando: continua na cor do salão (com o spinner do JS), não cinza */
#modernMainContent #saveSubdomainBtn:disabled:has(.fa-spinner) {
    border-color: var(--dl-primary);
    background: var(--dl-primary);
    color: #ffffff;
    opacity: 0.85;
    cursor: progress;
}

/* Endereço inválido / já em uso: campo com borda vermelha */
#modernMainContent .divulgacao-section:has(#subdomainStatus.bad) .subdomain-group .form-control,
#modernMainContent .divulgacao-section:has(#subdomainStatus.bad) .subdomain-group .input-group-text {
    border-color: #f87171;
}

#modernMainContent .divulgacao-section:has(#subdomainStatus.bad) .input-group.subdomain-group:focus-within {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

@media (max-width: 576px) {
    /* "Enviar pelo WhatsApp" cortava em 375px */
    #appPromoModal .modal-footer :is(#downloadPromoImageBtn, #sendPromoWhatsappBtn) {
        white-space: normal;
        font-size: 13.5px;
        line-height: 1.2;
        text-align: center;
    }
}

/* ========================================
   MODAL DE AJUDA ("Como usar Central de Divulgação"): casca v2
   (sem brilhos radiais, cantos 14px, cabeçalho branco, passos claros)
   ======================================== */
body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-content {
    border: 1px solid var(--v2-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-title-wrap {
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    box-shadow: none;
    font-size: 13px;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-title {
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-subtitle {
    margin-top: 2px;
    color: var(--v2-muted);
    font-size: 13px;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .btn-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 auto;
    padding: 0;
    border-radius: 8px;
    background-size: 12px;
    opacity: 0.55;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-body {
    padding: 20px;
    background: var(--v2-page-bg);
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal :is(.help-modal-info-card, .help-modal-video-card) {
    padding: 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--v2-card-shadow);
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal :is(.help-modal-info-card, .help-modal-video-card) h6 {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-intro {
    color: var(--v2-text-2);
    font-size: 14px;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-steps {
    gap: 0;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    overflow: hidden;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-steps li {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 14px;
    line-height: 1.5;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-steps li:last-child {
    border-bottom: 0;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-steps strong {
    color: var(--v2-text);
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .step-index {
    margin-top: 1px;
    background: #eef0f3;
    color: var(--v2-text);
    font-size: 12px;
    font-weight: 500;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-tip {
    padding: 10px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13.5px;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-modal-tip i {
    color: #d97706;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-video-frame {
    border-radius: 10px;
    box-shadow: none;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .help-video-note {
    color: var(--v2-muted);
    font-size: 13px;
}

body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-footer {
    padding: 12px 20px;
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider);
}

@media (max-width: 576px) {
    body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-header {
        padding: 14px 16px 12px;
    }

    body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-title {
        font-size: 15.5px;
    }

    body[data-support-page="divulgacao-links"] #dashboardHelpModal .btn-close {
        width: 36px;
        height: 36px;
    }

    body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-body {
        max-height: none;
        padding: 14px 16px;
    }

    body[data-support-page="divulgacao-links"] #dashboardHelpModal .modal-footer {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* QR: gerando a prévia mantém a cor do salão (com spinner) */
#qrExportModal #downloadQrAssetBtn:disabled:has(.fa-spinner) {
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
    opacity: 0.85;
    cursor: progress;
}