/* =========================================================
   FRA HUB - MOBILE RESPONSIVE SYSTEM
   Camada global carregada por ultimo.
   Escopo: somente UI/UX responsiva.
   ========================================================= */

@media (max-width: 1366px) {
    .app-shell .content,
    .admin-shell .content {
        padding: clamp(.7rem, 1vw, .95rem);
    }

    .app-shell .topbar {
        min-height: 54px;
    }

    .app-shell .panel,
    .app-shell .card,
    .app-shell .form-section,
    .app-shell .empty-state {
        border-radius: 14px;
    }
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-shell,
    .app-shell .content,
    .admin-shell,
    .admin-shell .content {
        width: 100%;
        min-width: 0;
    }

    .app-shell .content,
    .admin-shell .content {
        padding: .75rem;
    }

    .topbar {
        min-height: 52px;
        margin-bottom: .65rem;
        padding: .62rem .7rem;
        gap: .55rem;
        border-radius: 14px;
    }

    .topbar > div {
        min-width: 0;
    }

    .topbar h1 {
        max-width: 100%;
        font-size: clamp(1.12rem, 6vw, 1.38rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .topbar .eyebrow,
    .eyebrow {
        max-width: min(64vw, 280px);
        margin-bottom: .05rem;
        font-size: .63rem;
        letter-spacing: .08em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-logout {
        min-height: 36px;
        padding: .38rem .55rem;
        border-radius: 11px;
        white-space: nowrap;
    }

    .topbar-logout span {
        display: none;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .panel,
    .panel-card,
    .card,
    .form-section,
    .feature-status-card,
    .history-item,
    .empty-state,
    .metric-card {
        border-radius: 14px;
    }

    .panel,
    .panel-card,
    .form-section,
    .empty-state {
        padding: .85rem;
    }

    .metric-card .card-body,
    .card-body {
        padding: .78rem;
    }

    .metric-card .icon,
    .feature-status-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 1rem;
        border-radius: 11px;
    }

    .metric-value,
    .metric-card strong,
    .compact-card strong {
        font-size: clamp(1.05rem, 5vw, 1.28rem);
        line-height: 1.1;
    }

    .row.g-3,
    .row.g-4 {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .65rem;
    }

    .compact-grid,
    .responsive-grid,
    .panel-grid,
    .dashboard-grid,
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .compact-card,
    .responsive-card {
        padding: .78rem;
        border-radius: 14px;
    }

    .fra-tabs,
    .nav.fra-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        gap: .4rem;
        max-width: 100%;
        margin-inline: 0;
        padding-bottom: .25rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fra-tabs::-webkit-scrollbar,
    .nav.fra-tabs::-webkit-scrollbar {
        display: none;
    }

    .fra-tabs .nav-item,
    .nav.fra-tabs .nav-item {
        flex: 0 0 auto;
    }

    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        min-width: max-content;
        min-height: 38px;
        padding: .54rem .72rem;
        gap: .38rem;
        font-size: .86rem;
        line-height: 1;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        border-radius: 12px 12px 0 0;
    }

    .fra-tabs .nav-link i,
    .nav.fra-tabs .nav-link i {
        font-size: .95rem;
    }

    .btn {
        min-height: 38px;
        padding: .48rem .72rem;
        gap: .38rem;
        line-height: 1.1;
        border-radius: 11px;
    }

    .btn-sm {
        min-height: 34px;
        padding: .38rem .56rem;
    }

    .btn-lg {
        min-height: 44px;
        padding: .58rem .82rem;
    }

    .responsive-actions,
    .compact-actions,
    .client-row-actions,
    .client-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        align-items: stretch;
    }

    .responsive-actions .btn,
    .compact-actions .btn,
    .client-row-actions .btn,
    .client-card-actions .btn,
    .client-card-actions form,
    .client-card-actions form .btn {
        width: 100%;
        min-width: 0;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 42px;
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-radius: 11px;
        font-size: .92rem;
    }

    textarea.form-control {
        min-height: 96px;
    }

    .form-label {
        margin-bottom: .28rem;
        font-size: .78rem;
        line-height: 1.15;
    }

    .form-text,
    .small,
    small {
        line-height: 1.25;
    }

    .table-responsive {
        max-width: 100%;
    }

    .table-responsive:has(> table[data-mobile-cards="true"]),
    .table-responsive:has(> table.mobile-card-table) {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    table[data-mobile-cards="true"],
    table.mobile-card-table,
    table[data-mobile-cards="true"] tbody,
    table.mobile-card-table tbody,
    table[data-mobile-cards="true"] tr,
    table.mobile-card-table tr,
    table[data-mobile-cards="true"] td,
    table.mobile-card-table td {
        display: block;
        width: 100%;
    }

    table[data-mobile-cards="true"] thead,
    table.mobile-card-table thead {
        display: none;
    }

    table[data-mobile-cards="true"] tbody,
    table.mobile-card-table tbody {
        display: grid;
        gap: .62rem;
    }

    table[data-mobile-cards="true"] tbody tr,
    table.mobile-card-table tbody tr {
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .16);
        border-radius: 14px;
        background: rgba(15, 23, 42, .58);
        box-shadow: 0 12px 26px rgba(2, 6, 23, .18);
    }

    table[data-mobile-cards="true"] tbody tr > td:first-child,
    table.mobile-card-table tbody tr > td:first-child {
        padding-top: .78rem;
        color: #f8fafc;
        font-weight: 800;
    }

    table[data-mobile-cards="true"] tbody tr > td:last-child,
    table.mobile-card-table tbody tr > td:last-child {
        padding-bottom: .78rem;
    }

    table[data-mobile-cards="true"] tbody td,
    table.mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(82px, 36%) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        min-height: 40px;
        padding: .62rem .72rem;
        border: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .11);
        text-align: right;
    }

    table[data-mobile-cards="true"] tbody td:last-child,
    table.mobile-card-table tbody td:last-child {
        border-bottom: 0;
    }

    table[data-mobile-cards="true"] tbody td::before,
    table.mobile-card-table tbody td::before {
        content: attr(data-label);
        min-width: 0;
        color: #94a3b8;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        line-height: 1.15;
        text-align: left;
        text-transform: uppercase;
    }

    table[data-mobile-cards="true"] tbody td[data-label=""],
    table.mobile-card-table tbody td[data-label=""] {
        display: flex;
        justify-content: flex-end;
    }

    table[data-mobile-cards="true"] tbody td[data-label=""]::before,
    table.mobile-card-table tbody td[data-label=""]::before,
    table[data-mobile-cards="true"] tbody td[colspan]::before,
    table.mobile-card-table tbody td[colspan]::before {
        display: none;
    }

    table[data-mobile-cards="true"] tbody td[colspan],
    table.mobile-card-table tbody td[colspan] {
        display: block;
        text-align: left;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"],
    table.mobile-card-table tbody td[data-mobile-actions="true"] {
        display: block;
        padding-top: .72rem;
        text-align: left;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"]::before,
    table.mobile-card-table tbody td[data-mobile-actions="true"]::before {
        display: block;
        margin-bottom: .45rem;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > .d-flex,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > .d-flex,
    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > div,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > div {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .42rem !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] form,
    table.mobile-card-table tbody td[data-mobile-actions="true"] form {
        width: 100%;
        margin: 0;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] .btn,
    table.mobile-card-table tbody td[data-mobile-actions="true"] .btn,
    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] button,
    table.mobile-card-table tbody td[data-mobile-actions="true"] button {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        justify-content: center;
        white-space: nowrap;
    }

    .modal-dialog {
        width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        margin: .5rem auto;
    }

    .modal-content {
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
        border-radius: 16px;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header,
    .modal-footer {
        padding: .75rem .85rem;
    }

    .modal-body {
        padding: .85rem;
    }

    .sigma-security-modal .sigma-modal-dialog,
    .fra-modal .modal-dialog {
        width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }

    .qr-box,
    .qr-card,
    .whatsapp-qr,
    .whatsapp-qr img {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .compact-grid,
    .responsive-grid,
    .panel-grid,
    .dashboard-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .metric-card,
    .compact-card,
    .responsive-card {
        min-height: 0;
    }

    .client-list-actions,
    .client-list-controls,
    .clients-toolbar,
    .filter-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: .55rem;
        align-items: stretch;
    }

    .global-search,
    .client-page-search,
    .client-filter-select,
    .client-list-controls .form-select,
    .client-list-controls .form-control {
        width: 100%;
        max-width: none;
    }

    .client-export-actions,
    .toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }

    .client-export-actions .btn,
    .toolbar-actions .btn {
        width: 100%;
    }

    .app-shell .alert {
        padding: .65rem .75rem;
        border-radius: 12px;
        font-size: .88rem;
    }

    .profile-page-grid,
    .integrations-grid,
    .whatsapp-logs-grid,
    .reports-grid,
    .finance-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .app-shell .content,
    .admin-shell .content {
        padding: .58rem;
    }

    .topbar {
        min-height: 48px;
        padding: .55rem .6rem;
        border-radius: 13px;
    }

    .topbar h1 {
        font-size: clamp(1.02rem, 7vw, 1.28rem);
    }

    .topbar .eyebrow,
    .eyebrow {
        max-width: 58vw;
        font-size: .58rem;
    }

    .panel,
    .panel-card,
    .card,
    .form-section,
    .empty-state {
        padding: .72rem;
        border-radius: 13px;
    }

    .metric-card .card-body,
    .card-body {
        padding: .68rem;
    }

    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        min-height: 36px;
        padding: .5rem .62rem;
        font-size: .82rem;
    }

    .btn {
        min-height: 38px;
        padding: .46rem .62rem;
        font-size: .9rem;
    }

    .btn-sm {
        min-height: 32px;
        font-size: .82rem;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 40px;
        font-size: .9rem;
    }

    table[data-mobile-cards="true"] tbody td,
    table.mobile-card-table tbody td {
        grid-template-columns: 1fr;
        gap: .22rem;
        min-height: 0;
        padding: .58rem .65rem;
        text-align: left;
    }

    table[data-mobile-cards="true"] tbody td::before,
    table.mobile-card-table tbody td::before {
        font-size: .64rem;
    }

    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > .d-flex,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > .d-flex,
    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > div,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-actions,
    .compact-actions,
    .client-row-actions,
    .client-card-actions {
        gap: .38rem;
    }

    .app-login-page .login-only-card,
    .app-register-page .login-card,
    .login-screen .login-card {
        width: calc(100% - 1rem);
        max-width: 420px;
        padding: 1rem;
        border-radius: 18px;
    }

    .app-login-page .login-only-shell,
    .login-screen .login-shell {
        padding: .6rem;
    }

    .app-login-page .login-brand,
    .login-screen .login-brand {
        margin-bottom: 1rem;
    }
}

@media (max-width: 390px) {
    .app-shell .content,
    .admin-shell .content {
        padding: .45rem;
    }

    .topbar {
        padding: .5rem;
        gap: .45rem;
    }

    .topbar h1 {
        font-size: 1.05rem;
    }

    .topbar .eyebrow,
    .eyebrow {
        max-width: 52vw;
        font-size: .55rem;
    }

    .panel,
    .panel-card,
    .card,
    .form-section,
    .empty-state {
        padding: .62rem;
    }

    .fra-tabs,
    .nav.fra-tabs {
        gap: .32rem;
    }

    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        padding-inline: .55rem;
        font-size: .78rem;
    }

    .btn {
        min-height: 36px;
        padding-inline: .55rem;
        font-size: .86rem;
    }

    .client-export-actions,
    .toolbar-actions,
    .responsive-actions,
    .compact-actions,
    .client-row-actions,
    .client-card-actions,
    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > .d-flex,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > .d-flex,
    table[data-mobile-cards="true"] tbody td[data-mobile-actions="true"] > div,
    table.mobile-card-table tbody td[data-mobile-actions="true"] > div {
        grid-template-columns: 1fr;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 38px;
    }
}

/* =========================================================
   FRA HUB - MOBILE COMPONENT POLISH
   Abas, filtros, botões, formulários e barras de ação
   ========================================================= */

@media (max-width: 1366px) {
    .app-shell .content,
    .admin-shell .content {
        max-width: 100%;
    }

    .topbar,
    .panel,
    .panel-card,
    .card {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    img,
    svg,
    canvas,
    video {
        max-width: 100%;
    }

    .fra-tabs,
    .nav.fra-tabs {
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: .45rem;
        margin-inline: -.2rem;
        padding: .15rem .2rem .45rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scroll-padding-inline: .75rem;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .fra-tabs .nav-item,
    .nav.fra-tabs .nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        min-height: 40px;
        max-width: none;
        padding: .62rem .78rem;
        border-radius: 12px 12px 6px 6px;
        white-space: nowrap;
        line-height: 1.1;
        text-overflow: ellipsis;
        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .08);
    }

    .fra-tabs .nav-link.active,
    .nav.fra-tabs .nav-link.active {
        box-shadow:
            inset 0 -2px 0 rgba(56, 189, 248, .8),
            0 8px 20px rgba(37, 99, 235, .16);
    }

    .fra-tabs .nav-link i,
    .nav.fra-tabs .nav-link i {
        flex: 0 0 auto;
    }

    .client-list-actions,
    .client-list-controls,
    .search-filter-row,
    .filter-toolbar,
    .toolbar-actions,
    .client-export-actions,
    .dashboard-hero-actions,
    .finance-hero-actions,
    .profile-subscription-actions,
    .sigma-tests-filterbar,
    .whatsapp-template-actions,
    .automation-actions {
        width: 100%;
        min-width: 0;
    }

    .client-list-actions,
    .client-list-controls,
    .search-filter-row,
    .filter-toolbar,
    .sigma-tests-filterbar {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .65rem;
        align-items: stretch;
    }

    .filter-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
    }

    .global-search,
    .client-page-search,
    .client-filter-select,
    .filter-toolbar .form-control,
    .filter-toolbar .form-select,
    .search-filter-row .form-control,
    .search-filter-row .form-select,
    .sigma-tests-filterbar .form-control,
    .sigma-tests-filterbar .form-select,
    .sigma-tests-filterbar .sigma-test-filter,
    .client-list-actions .form-control,
    .client-list-actions .form-select,
    .client-list-controls .form-control,
    .client-list-controls .form-select {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .client-export-actions,
    .toolbar-actions,
    .dashboard-hero-actions,
    .finance-hero-actions,
    .profile-subscription-actions,
    .responsive-actions,
    .compact-actions,
    .expiration-card-actions,
    .automation-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        align-items: stretch;
    }

    .client-export-actions .btn,
    .toolbar-actions .btn,
    .dashboard-hero-actions .btn,
    .finance-hero-actions .btn,
    .profile-subscription-actions .btn,
    .responsive-actions .btn,
    .compact-actions .btn,
    .expiration-card-actions .btn,
    .automation-actions .btn,
    .filter-group .btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .btn,
    .btn-sm,
    .btn-lg,
    .form-control,
    .form-select,
    .input-group-text {
        max-width: 100%;
    }

    .btn {
        white-space: nowrap;
    }

    .btn i,
    .btn .bi,
    .btn .fa,
    .btn .fas,
    .btn .far {
        flex: 0 0 auto;
    }

    .input-group {
        min-width: 0;
        flex-wrap: nowrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        min-width: 0;
    }

    .form-section .row,
    .panel .row,
    .panel-card .row,
    .card .row {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    .form-check,
    .form-switch {
        min-width: 0;
    }

    .form-switch {
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    .form-switch .form-check-input {
        flex: 0 0 auto;
        margin-top: 0;
    }

    .table-responsive,
    .mobile-card-table-wrap {
        max-width: 100%;
    }

    .table-responsive:not(.mobile-card-table-wrap) {
        overflow-x: auto;
    }

    .mobile-card-table-wrap {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .client-list-actions,
    .client-list-controls,
    .filter-toolbar,
    .search-filter-row {
        gap: .55rem;
    }

    .client-export-actions,
    .toolbar-actions,
    .dashboard-hero-actions,
    .finance-hero-actions,
    .profile-subscription-actions,
    .responsive-actions,
    .compact-actions,
    .expiration-card-actions,
    .automation-actions,
    .filter-group {
        grid-template-columns: 1fr;
    }

    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        min-height: 38px;
        padding: .58rem .7rem;
        font-size: .84rem;
    }

    .form-label,
    label {
        line-height: 1.2;
    }

    textarea.form-control {
        min-height: 112px;
    }
}

@media (max-width: 480px) {
    .client-export-actions,
    .toolbar-actions,
    .dashboard-hero-actions,
    .finance-hero-actions,
    .profile-subscription-actions,
    .responsive-actions,
    .compact-actions,
    .expiration-card-actions,
    .automation-actions {
        gap: .48rem;
    }

    .btn {
        min-height: 40px;
        padding-inline: .72rem;
    }

    .btn-sm {
        min-height: 36px;
        padding-inline: .58rem;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 40px;
    }

    .fra-tabs,
    .nav.fra-tabs {
        margin-inline: -.12rem;
        padding-bottom: .38rem;
    }

    .app-login-page,
    .app-register-page {
        overflow-x: hidden;
    }

    .app-login-page .login-only-shell,
    .app-register-page .login-only-shell {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        padding: .75rem;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .app-login-page .login-only-card,
    .app-register-page .login-only-card,
    .app-login-page .auth-panel,
    .app-register-page .auth-panel {
        width: 100%;
        max-width: calc(100vw - 1.5rem);
        min-width: 0;
        box-sizing: border-box;
    }

    .app-login-page .auth-brand,
    .app-register-page .auth-brand {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        justify-content: stretch;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }

    .app-login-page .auth-logo,
    .app-register-page .auth-logo {
        width: 54px;
        height: 54px;
    }

    .app-login-page .auth-brand h1,
    .app-register-page .auth-brand h1,
    .app-login-page .auth-brand h2,
    .app-register-page .auth-brand h2 {
        font-size: clamp(1.45rem, 7vw, 1.8rem);
        line-height: 1;
        white-space: normal;
        overflow-wrap: normal;
        min-width: 0;
    }

    .app-login-page .auth-brand p,
    .app-register-page .auth-brand p {
        font-size: .74rem;
        line-height: 1.25;
    }

    .app-login-page .auth-input-wrap,
    .app-register-page .auth-input-wrap {
        min-width: 0;
    }

    .app-login-page .auth-input-wrap .form-control,
    .app-register-page .auth-input-wrap .form-control,
    .app-login-page .auth-submit,
    .app-register-page .auth-submit,
    .app-login-page .login-register-callout,
    .app-register-page .login-register-callout {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 390px) {
    .fra-tabs .nav-link,
    .nav.fra-tabs .nav-link {
        min-height: 36px;
        padding: .52rem .6rem;
        font-size: .78rem;
    }

    .btn {
        min-height: 38px;
        white-space: normal;
    }

    .app-login-page .login-only-shell,
    .app-register-page .login-only-shell {
        padding: .6rem;
    }

    .app-login-page .login-only-card,
    .app-register-page .login-only-card,
    .app-login-page .auth-panel,
    .app-register-page .auth-panel {
        max-width: calc(100vw - 1.2rem);
        padding: 1rem .82rem;
        border-radius: 18px;
    }

    .app-login-page .auth-brand,
    .app-register-page .auth-brand {
        gap: .5rem;
    }

    .app-login-page .auth-logo,
    .app-register-page .auth-logo {
        width: 48px;
        height: 48px;
    }

    .app-login-page .auth-brand h1,
    .app-register-page .auth-brand h1,
    .app-login-page .auth-brand h2,
    .app-register-page .auth-brand h2 {
        font-size: 1.36rem;
    }
}

/* =========================================================
   FRA HUB - CADASTRO MOBILE FIT
   Ajuste exclusivo da tela de cadastro; a tela Entrar permanece preservada.
   ========================================================= */
@media (max-width: 640px) {
    .app-register-page .app-register-shell {
        width: min(100% - 24px, 460px);
        padding: .95rem 0 1.5rem;
    }

    .app-register-page .app-register-head {
        margin-bottom: .75rem;
    }

    .app-register-page .app-register-head .login-back-link {
        justify-self: start;
        width: auto;
        margin-bottom: .7rem;
        font-size: 1rem;
    }

    .app-register-page .app-register-head h1 {
        max-width: 11ch;
        font-size: clamp(2.15rem, 10vw, 2.85rem);
        line-height: .94;
    }

    .app-register-page .app-register-form {
        max-width: 100%;
        padding: 1.05rem;
        border-radius: 24px;
    }

    .app-register-page .selected-plan-strip {
        gap: .62rem;
        padding: .68rem .72rem;
        margin-bottom: .8rem;
        border-radius: 17px;
    }

    .app-register-page .selected-plan-icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .app-register-page .selected-plan-copy {
        gap: .14rem;
    }

    .app-register-page .selected-plan-copy > span:first-child {
        font-size: .64rem;
        letter-spacing: .075em;
    }

    .app-register-page .selected-plan-title {
        gap: .38rem;
    }

    .app-register-page .selected-plan-strip strong {
        font-size: clamp(1.08rem, 5.2vw, 1.28rem);
    }

    .app-register-page .selected-plan-title small {
        min-height: 24px;
        padding: .28rem .5rem;
        font-size: .72rem;
    }

    .app-register-page .auth-form {
        gap: .78rem;
    }

    .app-register-page .auth-field {
        gap: .36rem;
    }
}

@media (max-width: 390px) {
    .app-register-page .app-register-shell {
        width: min(100% - 18px, 390px);
        padding-top: .72rem;
    }

    .app-register-page .app-register-form {
        padding: .9rem;
        border-radius: 20px;
    }

    .app-register-page .app-register-head h1 {
        font-size: clamp(2rem, 10.4vw, 2.45rem);
    }

    .app-register-page .selected-plan-strip {
        padding: .62rem;
    }
}

/* =========================================================
   FRA HUB - Ajuste mobile tela de cadastro
   ========================================================= */
@media (max-width: 640px) {
    .app-register-page .app-register-shell {
        padding-top: .65rem !important;
    }

    .app-register-page .register-card-head {
        min-height: 38px;
        margin-bottom: .85rem;
    }

    .app-register-page .register-card-head h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        letter-spacing: -0.04em;
    }

    .app-register-page .register-card-head .register-back-inside {
        font-size: .9rem;
    }
}

/* =========================================================
   FRA HUB - Mobile brand premium
   ========================================================= */
@media (max-width: 640px) {
    .brand-mark {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        padding: 0;
        overflow: hidden;
        border-radius: 15px;
        background: transparent !important;
    }

    .brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    .auth-logo,
    .login-logo {
        width: 72px;
        height: 72px;
        min-width: 72px;
        object-fit: cover;
        border-radius: 18px;
    }
}

/* =========================================================
   FRA HUB - AJUSTE FINO JOALHEIRO v2 / mobile
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark {
        width: 62px !important;
        height: 62px !important;
        flex: 0 0 62px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .brand-mark img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: inherit !important;
        background: transparent !important;
    }

    .auth-logo,
    .login-logo {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 22px !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   FRA HUB - MICROAJUSTE FINAL DO ÍCONE / MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark img,
    .auth-logo,
    .login-logo {
        object-fit: contain !important;
        object-position: center !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* =========================================================
   FRA HUB - FINAL BRAND MILIMÉTRICO / MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark {
        width: 66px !important;
        height: 66px !important;
        flex: 0 0 66px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .brand-mark img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.08) !important;
        transform-origin: center !important;
    }

    .auth-logo,
    .login-logo {
        width: 94px !important;
        height: 94px !important;
        min-width: 94px !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.06) !important;
        transform-origin: center !important;
    }
}

/* =========================================================
   FRA HUB - MOBILE LOGO PREMIUM AMBIENTADO
   Mantém o símbolo integrado ao fundo em telas pequenas.
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
        padding: 6px !important;
        display: grid !important;
        place-items: center !important;
        overflow: visible !important;
        border-radius: 14px !important;
        background:
            radial-gradient(circle at 34% 24%, rgba(56, 189, 248, .26), transparent 38%),
            linear-gradient(145deg, rgba(14, 41, 83, .74), rgba(7, 16, 38, .62)) !important;
        border: 1px solid rgba(96, 165, 250, .18) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(37, 99, 235, .14) !important;
    }

    .brand-mark img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 0 !important;
        background: transparent !important;
        transform: none !important;
        filter: drop-shadow(0 9px 13px rgba(14, 165, 233, .22)) !important;
    }

    .auth-logo,
    .login-logo {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        padding: 7px !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 20px !important;
        background:
            radial-gradient(circle at 35% 22%, rgba(56, 189, 248, .24), transparent 40%),
            linear-gradient(145deg, rgba(14, 41, 83, .55), rgba(5, 11, 31, .44)) !important;
        border: 1px solid rgba(96, 165, 250, .16) !important;
        box-shadow: 0 18px 42px rgba(2, 6, 23, .24), 0 0 34px rgba(14, 165, 233, .10) !important;
        transform: none !important;
        filter: drop-shadow(0 12px 18px rgba(14, 165, 233, .18)) !important;
    }
}

/* =========================================================
   FRA HUB - Correção final simples do ícone mobile
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark {
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .brand-mark img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.12) !important;
        transform-origin: center !important;
    }

    .auth-logo,
    .login-logo {
        width: 94px !important;
        height: 94px !important;
        min-width: 94px !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.10) !important;
        transform-origin: center !important;
    }
}

/* =========================================================
   FRA HUB - MOBILE LOGO 3D APROVADO - CAMADA FINAL
   ========================================================= */

@media (max-width: 640px) {
    .brand-mark {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        border-radius: 13px !important;
        background: transparent !important;
        border: 1px solid rgba(125, 211, 252, .14) !important;
        box-shadow: 0 10px 24px rgba(2, 6, 23, .28), 0 0 20px rgba(14, 165, 233, .10) !important;
    }

    .brand-mark img[src*="fra-hub-logo-3d-premium"] {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: inherit !important;
        background: transparent !important;
        transform: none !important;
        filter: none !important;
    }

    .auth-logo[src*="fra-hub-logo-3d-premium"],
    .login-logo[src*="fra-hub-logo-3d-premium"] {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 22px !important;
        background: transparent !important;
        border: 1px solid rgba(125, 211, 252, .14) !important;
        box-shadow: 0 18px 42px rgba(2, 6, 23, .30), 0 0 32px rgba(14, 165, 233, .12) !important;
        transform: none !important;
        filter: none !important;
    }
}