/*
 * SSHNETPLUS v209 — PROFESSIONAL RESPONSIVE UI
 * Desktop + notebook + tablet + Android + iPhone
 *
 * IMPORTANTE:
 * - CSS only.
 * - não altera app.js
 * - não altera app-mobile-v186.js
 * - não altera o loader v207
 * - preserva toda a lógica PHP/PIX/e-mail/teste
 */

:root {
    --v209-bg: #05070a;
    --v209-surface: #0c1118;
    --v209-surface-2: #101722;
    --v209-surface-3: #131c28;
    --v209-border: rgba(135, 164, 197, .14);
    --v209-border-strong: rgba(41, 151, 255, .32);
    --v209-text: #f7f9fc;
    --v209-muted: #8e9aab;
    --v209-blue: #1687ff;
    --v209-blue-2: #0878ee;
    --v209-green: #38d47a;
    --v209-shadow: 0 26px 80px rgba(0,0,0,.36);
}

/* =========================================================
   BASE
   ========================================================= */

html {
    background: var(--v209-bg) !important;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--v209-text) !important;
    background:
        radial-gradient(circle at 68% 6%, rgba(15,112,224,.12), transparent 28rem),
        radial-gradient(circle at 18% 18%, rgba(0,112,255,.055), transparent 22rem),
        var(--v209-bg) !important;
    overflow-x: hidden !important;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

body.v178-ready .topbar,
.topbar {
    min-height: 70px !important;
    padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(4,7,11,.90) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

body.v178-ready .brand,
.brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
}

body.v178-ready .brand img,
.brand img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

body.v178-ready .brand span,
.brand span {
    font-size: 18px !important;
    white-space: nowrap !important;
}

body.v178-ready .support-link,
.support-link {
    color: #9ba7b8 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    transition: color .2s ease !important;
}

body.v178-ready .support-link:hover,
.support-link:hover {
    color: #fff !important;
}

body.v178-ready .page-shell,
.page-shell {
    width: min(calc(100% - 40px), 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 32px 0 56px !important;
}

/* =========================================================
   STEPS
   ========================================================= */

body.v178-ready .steps,
.steps {
    width: min(100%, 520px) !important;
    margin: 0 auto 42px !important;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 0 !important;
    position: relative !important;
}

body.v178-ready .steps::before,
.steps::before {
    content: "" !important;
    position: absolute !important;
    left: 16.66% !important;
    right: 16.66% !important;
    top: 17px !important;
    height: 1px !important;
    background: rgba(139,158,183,.26) !important;
    z-index: 0 !important;
}

body.v178-ready .step,
.step {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    color: #657084 !important;
}

body.v178-ready .step span,
.step span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: #111722 !important;
    color: #737e90 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 0 0 5px var(--v209-bg) !important;
}

body.v178-ready .step small,
.step small {
    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

body.v178-ready .step.is-active,
.step.is-active {
    color: #2798ff !important;
}

body.v178-ready .step.is-active span,
.step.is-active span {
    border-color: rgba(46,156,255,.65) !important;
    background: linear-gradient(145deg, #269cff, #0977eb) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 5px var(--v209-bg),
        0 0 25px rgba(22,135,255,.32) !important;
}

body.v178-ready .step.is-done span,
.step.is-done span {
    border-color: rgba(34,197,94,.32) !important;
    color: #62e892 !important;
}

/* =========================================================
   HERO
   ========================================================= */

body.v178-ready .intro-grid,
.intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr) !important;
    align-items: center !important;
    gap: clamp(38px, 6vw, 82px) !important;
    min-height: 380px !important;
    padding: 18px 20px 42px !important;
    margin: 0 !important;
    text-align: left !important;
    overflow: visible !important;
}

body.v178-ready .intro-grid > div,
.intro-grid > div {
    min-width: 0 !important;
}

body.v178-ready .eyebrow,
.eyebrow {
    display: inline-block !important;
    margin: 0 0 12px !important;
    color: #2096ff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}

body.v178-ready .intro-grid h1,
.intro-grid h1 {
    max-width: 650px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(44px, 4.5vw, 64px) !important;
    line-height: .99 !important;
    letter-spacing: -.045em !important;
    font-weight: 950 !important;
    text-wrap: balance !important;
}

body.v178-ready .intro-grid p,
.intro-grid p {
    max-width: 620px !important;
    margin: 20px 0 0 !important;
    color: #95a0b1 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

body.v178-ready .trust-row,
.trust-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 24px !important;
    margin-top: 22px !important;
}

body.v178-ready .trust-row span,
.trust-row span {
    color: #c8d0db !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

body.v178-ready .trust-row span::first-letter,
.trust-row span::first-letter {
    color: var(--v209-blue) !important;
}

body.v178-ready .hero-image,
.hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    max-height: 340px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 20px !important;
    background: transparent !important;
    filter: drop-shadow(0 28px 45px rgba(0,80,185,.20)) !important;
    transform: none !important;
}

/* =========================================================
   RECOVERY
   ========================================================= */

body.v178-ready .access-recovery-entry,
.access-recovery-entry,
body.v178-ready .v178-recovery-card,
.v178-recovery-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(31,146,255,.25) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(8,25,43,.92), rgba(7,13,23,.94)) !important;
    box-shadow: 0 14px 45px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}

body.v178-ready .access-recovery-entry__icon,
.access-recovery-entry__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border: 1px solid rgba(22,135,255,.30) !important;
    border-radius: 12px !important;
    background: rgba(22,135,255,.10) !important;
    color: #42a6ff !important;
}

body.v178-ready .access-recovery-entry__icon svg,
.access-recovery-entry__icon svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
}

body.v178-ready .access-recovery-entry__text,
.access-recovery-entry__text {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

body.v178-ready .access-recovery-entry__text span,
.access-recovery-entry__text span {
    color: #38a5ff !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
}

body.v178-ready .access-recovery-entry__text strong,
.access-recovery-entry__text strong {
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

body.v178-ready .access-recovery-entry__text small,
.access-recovery-entry__text small {
    color: #7f8c9f !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

body.v178-ready .access-recovery-entry > a,
.access-recovery-entry > a,
body.v178-ready .v178-recovery-card a[href*="recuperar"],
.v178-recovery-card a[href*="recuperar"] {
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(69,171,255,.28) !important;
    border-radius: 10px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #2097ff, #0878ec) !important;
    box-shadow: 0 10px 28px rgba(0,111,255,.18) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* =========================================================
   MAIN PANEL
   ========================================================= */

body.v178-ready .panel,
body.v178-ready .form-panel,
.panel,
.form-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 24px !important;
    border: 1px solid var(--v209-border) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(150deg, rgba(17,23,32,.98), rgba(10,14,20,.99)) !important;
    box-shadow: var(--v209-shadow) !important;
    overflow: hidden !important;
}

body.v178-ready .section-heading,
.section-heading {
    margin: 0 0 16px !important;
}

body.v178-ready .section-heading > div,
.section-heading > div {
    position: relative !important;
    min-width: 0 !important;
    padding-left: 48px !important;
}

body.v178-ready .section-number,
.section-number {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #279cff, #0877eb) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    box-shadow: 0 0 24px rgba(22,135,255,.24) !important;
}

body.v178-ready .section-heading h2,
.section-heading h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    font-weight: 900 !important;
}

body.v178-ready .section-heading p,
.section-heading p {
    margin: 5px 0 0 !important;
    color: #818d9f !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

body.v178-ready .section-mini-label,
.section-mini-label {
    display: block !important;
    margin: 0 0 2px !important;
    color: #5eabf5 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
}

body.v178-ready .section-divider,
.section-divider {
    height: 1px !important;
    margin: 24px 0 !important;
    background: rgba(255,255,255,.07) !important;
}

/* =========================================================
   APP GRID
   ========================================================= */

body.v178-ready .device-grid.app-grid,
body.v178-ready .app-grid,
.device-grid.app-grid,
.app-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.v178-ready .device-card.app-card,
body.v178-ready .app-card,
.device-card.app-card,
.app-card {
    position: relative !important;
    min-width: 0 !important;
    min-height: 148px !important;
    padding: 16px 10px 14px !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 9px !important;
    border: 1px solid rgba(129,151,177,.13) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(145deg, rgba(19,26,36,.96), rgba(12,17,24,.98)) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.13) !important;
    cursor: pointer !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
    overflow: hidden !important;
}

body.v178-ready .device-card.app-card:hover,
body.v178-ready .app-card:hover,
.device-card.app-card:hover,
.app-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(64,162,255,.38) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.20),
        0 0 0 1px rgba(29,140,255,.06) inset !important;
}

body.v178-ready .device-card.app-card.is-selected,
body.v178-ready .app-card.is-selected,
body.v178-ready .device-card.app-card[aria-pressed="true"],
.device-card.app-card.is-selected,
.app-card.is-selected,
.device-card.app-card[aria-pressed="true"] {
    border-color: rgba(42,159,255,.78) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(26,130,238,.17), transparent 58%),
        linear-gradient(145deg, rgba(18,31,46,.98), rgba(12,18,28,.99)) !important;
    box-shadow:
        0 0 0 1px rgba(42,159,255,.17) inset,
        0 16px 42px rgba(0,79,173,.18) !important;
}

body.v178-ready .app-logo,
.app-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.22) !important;
}

body.v178-ready .app-logo img,
.app-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.v178-ready .app-card strong,
.app-card strong {
    max-width: 100% !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
    font-weight: 900 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

body.v178-ready .app-card small,
.app-card small {
    max-width: 100% !important;
    color: #758195 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

body.v178-ready .app-card > i,
.app-card > i {
    position: absolute !important;
    right: 9px !important;
    top: 9px !important;
    width: 22px !important;
    height: 22px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #1687ff !important;
    color: #fff !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

body.v178-ready .app-card.is-selected > i,
.app-card.is-selected > i {
    display: inline-flex !important;
}

/* =========================================================
   CUSTOMER FORM
   ========================================================= */

body.v178-ready .section-heading--customer-form,
.section-heading--customer-form {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

body.v178-ready #testForm .customer-data-card,
#testForm .customer-data-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(129,151,177,.14) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(145deg, rgba(18,25,35,.98), rgba(11,16,23,.99)) !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .customer-data-card__header,
#testForm .customer-data-card__header {
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 0 0 15px !important;
    margin: 0 0 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

body.v178-ready #testForm .customer-data-card__header > div,
#testForm .customer-data-card__header > div {
    min-width: 0 !important;
}

body.v178-ready #testForm .customer-data-card__icon,
#testForm .customer-data-card__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 10px !important;
    border: 1px solid rgba(30,150,255,.30) !important;
    border-radius: 11px !important;
    background: rgba(22,135,255,.09) !important;
    color: #54adff !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .customer-data-card__icon svg,
#testForm .customer-data-card__icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    transform: none !important;
}

body.v178-ready #testForm .customer-data-card__header strong,
#testForm .customer-data-card__header strong {
    display: block !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body.v178-ready #testForm .customer-data-card__header small,
#testForm .customer-data-card__header small {
    display: block !important;
    margin-top: 2px !important;
    color: #7f8b9d !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
}

body.v178-ready #testForm .customer-data-card__badge,
#testForm .customer-data-card__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(46,209,116,.24) !important;
    border-radius: 999px !important;
    background: rgba(30,170,88,.08) !important;
    color: #6ee99c !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Desktop profissional: campos à esquerda e verificação à direita */
body.v178-ready #testForm .form-grid.form-grid--customer,
#testForm .form-grid.form-grid--customer {
    display: grid !important;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
}

body.v178-ready #testForm label[for="customerName"],
body.v178-ready #testForm label[for="customerWhatsapp"],
body.v178-ready #testForm label[for="customerEmail"],
#testForm label[for="customerName"],
#testForm label[for="customerWhatsapp"],
#testForm label[for="customerEmail"] {
    grid-column: 1 !important;
    min-width: 0 !important;
}

body.v178-ready #testForm label[for="customerName"],
#testForm label[for="customerName"] {
    grid-row: 1 !important;
}

body.v178-ready #testForm label[for="customerWhatsapp"],
#testForm label[for="customerWhatsapp"] {
    grid-row: 2 !important;
}

body.v178-ready #testForm label[for="customerEmail"],
#testForm label[for="customerEmail"] {
    grid-row: 3 !important;
}

body.v178-ready #testForm #emailVerificationBox,
#testForm #emailVerificationBox {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: stretch !important;
    margin: 0 !important;
}

body.v178-ready #testForm .modern-field,
#testForm .modern-field {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.v178-ready #testForm .modern-field__label,
#testForm .modern-field__label {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.v178-ready #testForm .modern-field__label > span,
#testForm .modern-field__label > span {
    color: #edf2f8 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
}

body.v178-ready #testForm .modern-field__label small,
#testForm .modern-field__label small {
    max-width: 55% !important;
    color: #738094 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-align: right !important;
}

body.v178-ready #testForm .modern-input-shell,
#testForm .modern-input-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.v178-ready #testForm .modern-input-shell input,
#testForm .modern-input-shell input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 11px 42px 11px 44px !important;
    border: 1px solid rgba(135,156,181,.16) !important;
    border-radius: 10px !important;
    outline: none !important;
    background: #080c11 !important;
    color: #f4f7fb !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.015) inset !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.v178-ready #testForm .modern-input-shell input:focus,
#testForm .modern-input-shell input:focus {
    border-color: rgba(42,157,255,.58) !important;
    background: #09101a !important;
    box-shadow: 0 0 0 3px rgba(22,135,255,.10) !important;
}

body.v178-ready #testForm .modern-input-shell input::placeholder,
#testForm .modern-input-shell input::placeholder {
    color: #596679 !important;
    opacity: 1 !important;
}

body.v178-ready #testForm .modern-input-icon,
#testForm .modern-input-icon {
    position: absolute !important;
    z-index: 2 !important;
    left: 14px !important;
    top: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    transform: translateY(-50%) !important;
    color: #708096 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.v178-ready #testForm .modern-input-icon svg,
#testForm .modern-input-icon svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    transform: none !important;
}

body.v178-ready #testForm .modern-input-check,
#testForm .modern-input-check {
    position: absolute !important;
    z-index: 2 !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #768397 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

body.v178-ready #testForm .field-help--modern,
#testForm .field-help--modern {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #6f7c8f !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

body.v178-ready #testForm .field-help--modern svg,
#testForm .field-help--modern svg {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}

/* Email verification */
body.v178-ready #testForm .email-verify-card,
#testForm .email-verify-card {
    min-width: 0 !important;
    height: 100% !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(27,145,255,.28) !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(17,106,211,.14), transparent 50%),
        rgba(5,17,31,.84) !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .email-verify-card__head,
#testForm .email-verify-card__head {
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.v178-ready #testForm .email-verify-card__head > div,
#testForm .email-verify-card__head > div {
    min-width: 0 !important;
}

body.v178-ready #testForm .email-verify-card__icon,
#testForm .email-verify-card__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 1px solid rgba(34,150,255,.28) !important;
    border-radius: 10px !important;
    background: rgba(22,135,255,.10) !important;
    color: #45a9ff !important;
    font-size: 17px !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .email-verify-card__head strong,
#testForm .email-verify-card__head strong {
    display: block !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body.v178-ready #testForm .email-verify-card__head small,
#testForm .email-verify-card__head small {
    display: block !important;
    margin-top: 3px !important;
    color: #7d8a9e !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
}

body.v178-ready #testForm .email-verify-status,
#testForm .email-verify-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.025) !important;
    color: #8592a5 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.v178-ready #testForm .email-verify-actions,
#testForm .email-verify-actions {
    margin-top: auto !important;
    padding-top: 14px !important;
}

body.v178-ready #testForm .email-verify-send,
#testForm .email-verify-send,
body.v178-ready #testForm #confirmEmailVerificationCode,
#testForm #confirmEmailVerificationCode {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(72,170,255,.24) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #2299ff, #0879ee) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 24px rgba(0,102,231,.16) !important;
}

body.v178-ready #testForm .email-verify-code,
#testForm .email-verify-code {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
}

body.v178-ready #testForm .email-verify-code[hidden],
#testForm .email-verify-code[hidden] {
    display: none !important;
}

body.v178-ready #testForm #emailVerificationCode,
#testForm #emailVerificationCode {
    min-width: 0 !important;
    min-height: 44px !important;
    border-radius: 9px !important;
}

body.v178-ready #testForm .email-verify-help,
#testForm .email-verify-help {
    display: block !important;
    margin-top: 11px !important;
    color: #68778c !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
}

/* Footer do formulário */
body.v178-ready #testForm .customer-form-footer,
#testForm .customer-form-footer {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(320px,.72fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

body.v178-ready #testForm .customer-privacy-box,
#testForm .customer-privacy-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(38,205,111,.20) !important;
    border-radius: 10px !important;
    background: rgba(23,147,74,.075) !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .customer-privacy-box > span:first-child,
#testForm .customer-privacy-box > span:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 7px !important;
    border-radius: 9px !important;
    background: rgba(38,205,111,.10) !important;
    color: #67e996 !important;
    overflow: hidden !important;
}

body.v178-ready #testForm .customer-privacy-box > span:first-child svg,
#testForm .customer-privacy-box > span:first-child svg {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    transform: none !important;
}

body.v178-ready #testForm .customer-privacy-box strong,
#testForm .customer-privacy-box strong {
    display: block !important;
    color: #72eb9d !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

body.v178-ready #testForm .customer-privacy-box small,
#testForm .customer-privacy-box small {
    display: block !important;
    margin-top: 2px !important;
    color: #71917c !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

body.v178-ready #testForm .primary-button--customer,
#testForm .primary-button--customer {
    width: 100% !important;
    min-height: 100% !important;
    padding: 0 20px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #232a35, #1a2029) !important;
    color: #697487 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

body.v178-ready #testForm .primary-button--customer:not(:disabled),
#testForm .primary-button--customer:not(:disabled) {
    border-color: rgba(52,160,255,.26) !important;
    background: linear-gradient(180deg, #2299ff, #0879ed) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(0,105,236,.18) !important;
}

body.v178-ready #testForm .form-readiness-note,
#testForm .form-readiness-note {
    margin: 9px 0 0 !important;
    color: #687587 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

/* Footer */
body.v178-ready .site-footer-managed,
.site-footer-managed {
    margin-top: 26px !important;
    padding: 0 4px !important;
    color: #657184 !important;
    font-size: 10px !important;
}

/* =========================================================
   TABLET / NOTEBOOK PEQUENO
   ========================================================= */

@media (max-width: 1100px) {
    body.v178-ready .page-shell,
    .page-shell {
        width: min(calc(100% - 32px), 980px) !important;
    }

    body.v178-ready .intro-grid,
    .intro-grid {
        grid-template-columns: minmax(0,1fr) minmax(320px,.85fr) !important;
        gap: 34px !important;
        padding-inline: 8px !important;
    }

    body.v178-ready .intro-grid h1,
    .intro-grid h1 {
        font-size: clamp(40px, 5vw, 52px) !important;
    }

    body.v178-ready .device-grid.app-grid,
    body.v178-ready .app-grid,
    .device-grid.app-grid,
    .app-grid {
        grid-template-columns: repeat(5, minmax(0,1fr)) !important;
        gap: 9px !important;
    }

    body.v178-ready .device-card.app-card,
    body.v178-ready .app-card,
    .device-card.app-card,
    .app-card {
        min-height: 138px !important;
        padding-inline: 7px !important;
    }

    body.v178-ready #testForm .form-grid.form-grid--customer,
    #testForm .form-grid.form-grid--customer {
        grid-template-columns: minmax(0,1.2fr) minmax(290px,.8fr) !important;
        gap: 12px !important;
    }

    body.v178-ready #testForm .customer-form-footer,
    #testForm .customer-form-footer {
        grid-template-columns: minmax(0,1fr) minmax(280px,.8fr) !important;
    }
}

@media (max-width: 900px) {
    body.v178-ready .page-shell,
    .page-shell {
        width: min(calc(100% - 26px), 760px) !important;
        padding-top: 24px !important;
    }

    body.v178-ready .steps,
    .steps {
        margin-bottom: 26px !important;
    }

    body.v178-ready .intro-grid,
    .intro-grid {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 22px !important;
        min-height: 0 !important;
        padding: 6px 4px 30px !important;
        text-align: center !important;
    }

    body.v178-ready .hero-image,
    .hero-image {
        order: -1 !important;
        width: min(100%, 620px) !important;
        max-height: 300px !important;
    }

    body.v178-ready .intro-grid h1,
    .intro-grid h1 {
        max-width: 700px !important;
        margin-inline: auto !important;
        font-size: clamp(38px, 7vw, 50px) !important;
    }

    body.v178-ready .intro-grid p,
    .intro-grid p {
        max-width: 650px !important;
        margin-inline: auto !important;
    }

    body.v178-ready .trust-row,
    .trust-row {
        justify-content: center !important;
    }

    body.v178-ready .device-grid.app-grid,
    body.v178-ready .app-grid,
    .device-grid.app-grid,
    .app-grid {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    body.v178-ready #testForm .form-grid.form-grid--customer,
    #testForm .form-grid.form-grid--customer {
        grid-template-columns: minmax(0,1fr) !important;
        grid-template-rows: auto !important;
        gap: 13px !important;
    }

    body.v178-ready #testForm label[for="customerName"],
    body.v178-ready #testForm label[for="customerWhatsapp"],
    body.v178-ready #testForm label[for="customerEmail"],
    body.v178-ready #testForm #emailVerificationBox,
    #testForm label[for="customerName"],
    #testForm label[for="customerWhatsapp"],
    #testForm label[for="customerEmail"],
    #testForm #emailVerificationBox {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body.v178-ready #testForm .email-verify-card,
    #testForm .email-verify-card {
        height: auto !important;
    }

    body.v178-ready #testForm .customer-form-footer,
    #testForm .customer-form-footer {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.v178-ready #testForm .primary-button--customer,
    #testForm .primary-button--customer {
        min-height: 50px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {
    body.v178-ready .topbar,
    .topbar {
        min-height: 62px !important;
        padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    }

    body.v178-ready .brand img,
    .brand img {
        width: 26px !important;
        height: 26px !important;
    }

    body.v178-ready .brand span,
    .brand span {
        font-size: 15px !important;
    }

    body.v178-ready .support-link,
    .support-link {
        font-size: 11px !important;
    }

    body.v178-ready .page-shell,
    .page-shell {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        padding-top: 18px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.v178-ready .steps,
    .steps {
        width: 100% !important;
        margin: 0 auto 22px !important;
        padding-inline: 12px !important;
    }

    body.v178-ready .step span,
    .step span {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    body.v178-ready .steps::before,
    .steps::before {
        top: 15px !important;
    }

    body.v178-ready .intro-grid,
    .intro-grid {
        gap: 16px !important;
        padding: 2px 3px 22px !important;
    }

    body.v178-ready .hero-image,
    .hero-image {
        width: min(100%, 540px) !important;
        max-height: 210px !important;
        border-radius: 14px !important;
        margin-bottom: 2px !important;
    }

    body.v178-ready .eyebrow,
    .eyebrow {
        margin-bottom: 10px !important;
        font-size: 9px !important;
    }

    body.v178-ready .intro-grid h1,
    .intro-grid h1 {
        max-width: 560px !important;
        font-size: clamp(31px, 9vw, 40px) !important;
        line-height: 1.03 !important;
        letter-spacing: -.04em !important;
    }

    body.v178-ready .intro-grid p,
    .intro-grid p {
        margin-top: 14px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    body.v178-ready .trust-row,
    .trust-row {
        gap: 8px 14px !important;
        margin-top: 15px !important;
    }

    body.v178-ready .trust-row span,
    .trust-row span {
        font-size: 10px !important;
    }

    body.v178-ready .access-recovery-entry,
    .access-recovery-entry,
    body.v178-ready .v178-recovery-card,
    .v178-recovery-card {
        grid-template-columns: 42px minmax(0,1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    body.v178-ready .access-recovery-entry__icon,
    .access-recovery-entry__icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    body.v178-ready .access-recovery-entry > a,
    .access-recovery-entry > a,
    body.v178-ready .v178-recovery-card a[href*="recuperar"],
    .v178-recovery-card a[href*="recuperar"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    body.v178-ready .panel,
    body.v178-ready .form-panel,
    .panel,
    .form-panel {
        padding: 12px !important;
        border-radius: 15px !important;
    }

    body.v178-ready .section-heading > div,
    .section-heading > div {
        padding-left: 42px !important;
    }

    body.v178-ready .section-number,
    .section-number {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
    }

    body.v178-ready .section-heading h2,
    .section-heading h2 {
        font-size: 18px !important;
    }

    body.v178-ready .section-heading p,
    .section-heading p {
        font-size: 10px !important;
    }

    body.v178-ready .device-grid.app-grid,
    body.v178-ready .app-grid,
    .device-grid.app-grid,
    .app-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    body.v178-ready .device-card.app-card,
    body.v178-ready .app-card,
    .device-card.app-card,
    .app-card {
        min-height: 122px !important;
        padding: 11px 6px 10px !important;
        gap: 7px !important;
        border-radius: 12px !important;
    }

    body.v178-ready .app-logo,
    .app-logo {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    body.v178-ready .app-card strong,
    .app-card strong {
        font-size: 10px !important;
    }

    body.v178-ready .app-card small,
    .app-card small {
        font-size: 8px !important;
    }

    body.v178-ready #testForm .customer-data-card,
    #testForm .customer-data-card {
        padding: 12px !important;
        border-radius: 13px !important;
    }

    body.v178-ready #testForm .customer-data-card__header,
    #testForm .customer-data-card__header {
        grid-template-columns: 40px minmax(0,1fr) !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        margin-bottom: 13px !important;
    }

    body.v178-ready #testForm .customer-data-card__icon,
    #testForm .customer-data-card__icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
    }

    body.v178-ready #testForm .customer-data-card__badge,
    #testForm .customer-data-card__badge {
        grid-column: 2 !important;
        justify-self: start !important;
        min-height: 23px !important;
        padding: 0 8px !important;
        font-size: 8px !important;
    }

    body.v178-ready #testForm .modern-field__label,
    #testForm .modern-field__label {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        align-items: start !important;
        gap: 3px !important;
    }

    body.v178-ready #testForm .modern-field__label small,
    #testForm .modern-field__label small {
        max-width: none !important;
        text-align: left !important;
    }

    body.v178-ready #testForm .modern-input-shell input,
    #testForm .modern-input-shell input {
        min-height: 48px !important;
        padding-left: 44px !important;
        padding-right: 40px !important;
        font-size: 16px !important;
    }

    body.v178-ready #testForm .email-verify-card,
    #testForm .email-verify-card {
        padding: 12px !important;
    }

    body.v178-ready #testForm .email-verify-card__head,
    #testForm .email-verify-card__head {
        grid-template-columns: 38px minmax(0,1fr) !important;
        gap: 9px !important;
    }

    body.v178-ready #testForm .email-verify-card__icon,
    #testForm .email-verify-card__icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    body.v178-ready #testForm .email-verify-status,
    #testForm .email-verify-status {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: 2px !important;
    }

    body.v178-ready #testForm .email-verify-actions,
    #testForm .email-verify-actions {
        padding-top: 11px !important;
    }

    body.v178-ready #testForm .email-verify-code,
    #testForm .email-verify-code {
        grid-template-columns: minmax(0,1fr) !important;
    }

    body.v178-ready #testForm .customer-form-footer,
    #testForm .customer-form-footer {
        gap: 10px !important;
        margin-top: 13px !important;
        padding-top: 13px !important;
    }

    body.v178-ready #testForm .customer-privacy-box,
    #testForm .customer-privacy-box {
        padding: 10px !important;
    }

    body.v178-ready #testForm .form-readiness-note,
    #testForm .form-readiness-note {
        text-align: left !important;
    }
}

/* iPhone pequeno / Android estreito */
@media (max-width: 390px) {
    body.v178-ready .brand span,
    .brand span {
        font-size: 14px !important;
    }

    body.v178-ready .support-link,
    .support-link {
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.v178-ready .intro-grid h1,
    .intro-grid h1 {
        font-size: clamp(29px, 8.7vw, 34px) !important;
    }

    body.v178-ready .hero-image,
    .hero-image {
        max-height: 180px !important;
    }

    body.v178-ready .trust-row,
    .trust-row {
        gap: 7px 10px !important;
    }

    body.v178-ready .trust-row span,
    .trust-row span {
        font-size: 9px !important;
    }

    body.v178-ready .device-card.app-card,
    body.v178-ready .app-card,
    .device-card.app-card,
    .app-card {
        min-height: 116px !important;
        padding-inline: 5px !important;
    }

    body.v178-ready .app-logo,
    .app-logo {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    body.v178-ready #testForm .modern-input-shell input,
    #testForm .modern-input-shell input {
        padding-left: 42px !important;
        padding-right: 38px !important;
    }
}

/* Tablets em orientação landscape / telas touch maiores */
@media (min-width: 681px) and (max-width: 900px) and (orientation: landscape) {
    body.v178-ready .device-grid.app-grid,
    body.v178-ready .app-grid,
    .device-grid.app-grid,
    .app-grid {
        grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    }
}

/* Respeita usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
    body.v178-ready .app-card,
    .app-card {
        transition: none !important;
    }
}