:root {
    --signup-navy: #071a3d;
    --signup-navy-light: #0d2a5d;
    --signup-blue: #2563eb;
    --signup-blue-dark: #1d4ed8;
    --signup-green: #15803d;
    --signup-ink: #14213d;
    --signup-muted: #617087;
    --signup-border: #dbe4f0;
    --signup-surface: #f5f8fc;
}

html { scroll-behavior: smooth; }

body.signup-page {
    min-width: 320px;
    background: var(--signup-surface);
}

.signup-topbar {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 clamp(1.25rem, 4vw, 4rem);
    border-bottom: 1px solid rgba(219, 228, 240, .85);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 22px rgba(15, 23, 42, .045);
    backdrop-filter: blur(14px);
}

.signup-logo {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .72rem;
    color: var(--signup-navy);
    text-decoration: none;
}

.signup-logo__image { display: block; width: 106px; height: auto; }
.signup-logo__product { padding-left: .7rem; border-left: 1px solid #ccd7e6; color: #34445e; font-size: .78rem; font-weight: 850; }

.signup-topbar__actions {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #66768d;
    font-size: .78rem;
}

.signup-topbar__actions a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 850;
    text-decoration: none;
}

.signup-back-link { padding: 0 .8rem; color: #43526a; }
.signup-back-link:hover { background: #f0f4f9; color: var(--signup-navy); }
.signup-login-link { padding: 0 1rem; border: 1px solid #cbd8e8; color: var(--signup-blue-dark); }
.signup-login-link:hover { border-color: var(--signup-blue); background: #eff5ff; }

.signup-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(440px, .88fr) minmax(590px, 1.12fr);
    padding-top: 72px;
}

.signup-brand {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: calc(100vh - 72px);
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2.2rem, 4vw, 4.2rem);
    background:
        radial-gradient(circle at 95% 12%, rgba(37, 99, 235, .48), transparent 30%),
        radial-gradient(circle at 12% 91%, rgba(21, 128, 61, .18), transparent 25%),
        linear-gradient(145deg, var(--signup-navy-light), var(--signup-navy) 70%);
    color: #fff;
}

.signup-brand::after {
    position: absolute;
    right: -155px;
    bottom: -155px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    content: "";
}

.signup-brand__content,
.signup-support { position: relative; z-index: 2; }
.signup-brand__content { width: min(610px, 100%); }

.signup-brand__eyebrow {
    color: #94bbff;
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.signup-brand h2 {
    max-width: 610px;
    margin: .9rem 0 1rem;
    font-size: clamp(2.3rem, 3.7vw, 4rem);
    line-height: 1.03;
    letter-spacing: -.052em;
}

.signup-brand__content > p {
    max-width: 555px;
    margin: 0;
    color: #c2d0e5;
    font-size: .98rem;
    line-height: 1.65;
}

.signup-benefits {
    display: grid;
    gap: .55rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.signup-benefits li {
    display: grid;
    max-width: 560px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .68rem .8rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .055);
}

.signup-benefits li > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(37, 99, 235, .3);
    color: #bcd2ff;
}

.signup-benefits li > span { display: grid; gap: .16rem; color: #aebed7; font-size: .72rem; line-height: 1.35; }
.signup-benefits strong { color: #fff; font-size: .82rem; }

.signup-preview {
    width: min(570px, 100%);
    margin-top: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 17px;
    background: #f6f9fd;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
    color: var(--signup-ink);
}

.signup-preview__top {
    display: flex;
    height: 38px;
    align-items: center;
    gap: .65rem;
    padding: 0 .85rem;
    border-bottom: 1px solid #dfe7f1;
    background: #fff;
    font-size: .65rem;
}

.signup-preview__top > span { display: flex; gap: 4px; }
.signup-preview__top > span i { width: 6px; height: 6px; border-radius: 50%; background: #b7c3d3; }
.signup-preview__top strong { color: #34445c; }
.signup-preview__top em { margin-left: auto; padding: .24rem .48rem; border-radius: 20px; background: #e8f7ee; color: #13733a; font-size: .55rem; font-style: normal; font-weight: 850; }

.signup-preview__body {
    position: relative;
    display: grid;
    min-height: 146px;
    grid-template-columns: .72fr 1.28fr;
    gap: .7rem;
    padding: .85rem 5.2rem .85rem .85rem;
}

.signup-preview__metric,
.signup-preview__orders { padding: .7rem; border: 1px solid #e2e9f2; border-radius: 11px; background: #fff; }
.signup-preview__metric { display: grid; align-content: center; }
.signup-preview__metric span, .signup-preview__orders > span { color: #718096; font-size: .56rem; font-weight: 750; }
.signup-preview__metric strong { margin: .3rem 0; color: #13264b; font-size: .86rem; }
.signup-preview__metric small { color: #15803d; font-size: .52rem; font-weight: 800; }
.signup-preview__orders { display: grid; align-content: start; gap: .37rem; }
.signup-preview__orders div { display: flex; align-items: center; justify-content: space-between; padding: .3rem .4rem; border-radius: 6px; background: #f5f8fc; font-size: .5rem; }
.signup-preview__orders i { color: #50627a; font-style: normal; font-weight: 800; }
.signup-preview__orders strong { color: #1d4ed8; font-size: .48rem; }

.signup-preview__phone {
    position: absolute;
    top: .6rem;
    right: .65rem;
    display: grid;
    width: 68px;
    height: 128px;
    align-content: start;
    justify-items: center;
    gap: .42rem;
    padding: .48rem;
    border: 3px solid #14213d;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 33, 61, .2);
    font-size: .42rem;
}

.signup-preview__phone > i { width: 18px; height: 3px; border-radius: 4px; background: #c3ccd8; }
.signup-preview__phone strong { color: #14213d; }
.signup-preview__phone span { width: 100%; height: 21px; border-radius: 5px; background: #e9eff7; }
.signup-preview__phone b { width: 100%; padding: .27rem; border-radius: 5px; background: var(--signup-blue); color: #fff; text-align: center; }

.signup-support {
    display: grid;
    width: min(570px, 100%);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #aebed7;
    font-size: .67rem;
}

.signup-support > i { color: #4ade80; font-size: 1rem; }
.signup-support span { display: grid; gap: .12rem; }
.signup-support strong { color: #e8effa; font-size: .72rem; }
.signup-support a { color: #8fddaa; font-size: .67rem; font-weight: 850; text-decoration: none; }
.signup-support a:hover { color: #fff; text-decoration: underline; }

.signup-panel {
    display: grid;
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 3.2rem);
    place-items: center;
    background:
        radial-gradient(circle at 94% 8%, rgba(37, 99, 235, .07), transparent 23%),
        var(--signup-surface);
}

.signup-panel__content { width: min(650px, 100%); }

.signup-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 1rem;
    padding: 0 .4rem;
    list-style: none;
}

.signup-progress::before {
    position: absolute;
    z-index: 0;
    top: 16px;
    right: 16.66%;
    left: 16.66%;
    height: 2px;
    background: #d6e0ec;
    content: "";
}

.signup-progress li { position: relative; z-index: 1; display: grid; justify-items: center; gap: .35rem; color: #738197; }
.signup-progress li span { display: grid; width: 33px; height: 33px; place-items: center; border: 2px solid #d6e0ec; border-radius: 50%; background: var(--signup-surface); font-size: .65rem; font-weight: 900; }
.signup-progress li strong { font-size: .65rem; }
.signup-progress li.is-active { color: var(--signup-blue-dark); }
.signup-progress li.is-active span { border-color: var(--signup-blue); background: var(--signup-blue); box-shadow: 0 0 0 5px rgba(37, 99, 235, .1); color: #fff; }

.signup-card {
    padding: clamp(1.45rem, 2.6vw, 2.25rem);
    border-radius: 21px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .09);
}

.signup-card__header { margin-bottom: 1rem; }
.signup-card__header h1 { margin: .45rem 0 .38rem; color: var(--signup-navy); font-size: clamp(1.8rem, 2.8vw, 2.25rem); line-height: 1.08; letter-spacing: -.04em; }
.signup-card__header p { color: var(--signup-muted); font-size: .82rem; }

.signup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .9rem; }
.signup-field { align-content: start; margin-top: .65rem; }
.signup-field--wide { grid-column: 1 / -1; }
.signup-field > small,
.signup-match-notice { min-height: 1.1em; color: #64748b; font-size: .65rem; line-height: 1.35; }
.signup-card .login-field .ui-inputfield { min-height: 50px; padding-block: .72rem; font-size: .9rem; }
.signup-card .login-field .ui-inputfield.ui-state-error { border-color: #c2414f; background: #fffafb; }

.signup-password-strength { display: grid; min-height: 1.1rem; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: .5rem; }
.signup-password-strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.signup-password-strength__bars i { height: 4px; border-radius: 4px; background: #d9e0e9; transition: background-color .18s ease; }
.signup-password-strength__label { color: #64748b; font-size: .65rem; }
.signup-password-strength[data-score="1"] i:nth-child(-n+1) { background: #dc3545; }
.signup-password-strength[data-score="2"] i:nth-child(-n+2) { background: #ea8a16; }
.signup-password-strength[data-score="3"] i:nth-child(-n+3) { background: #2563eb; }
.signup-password-strength[data-score="4"] i:nth-child(-n+4) { background: #16a34a; }
.signup-password-strength[data-score="1"] .signup-password-strength__label { color: #b42332; }
.signup-password-strength[data-score="2"] .signup-password-strength__label { color: #9a5b0a; }
.signup-password-strength[data-score="3"] .signup-password-strength__label { color: #1d4ed8; }
.signup-password-strength[data-score="4"] .signup-password-strength__label { color: #15803d; }
.signup-match-notice[data-match="true"] { color: #15803d; font-weight: 750; }
.signup-match-notice[data-match="false"] { color: #b42332; font-weight: 750; }

.signup-submit.ui-button { min-height: 54px; margin-top: 1rem; font-size: .9rem; }
.signup-card--loading .signup-submit { pointer-events: none; }
.signup-card--loading .signup-submit .ui-button-label { color: transparent; }
.signup-card--loading .signup-submit .ui-button-label::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; content: "Criando sua loja…"; }
.signup-card--loading .signup-submit .ui-button-icon { visibility: hidden; }
.signup-card--loading .signup-submit::before { position: absolute; z-index: 2; top: 50%; left: calc(50% - 77px); width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; content: ""; animation: login-spin .7s linear infinite; transform: translateY(-50%); }

.signup-assurance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    background: #f5faf7;
    color: #617087;
    font-size: .65rem;
    line-height: 1.4;
}

.signup-assurance i { color: var(--signup-green); }
.signup-assurance strong { color: #355244; }
.signup-mobile-login { display: none; }

.signup-after {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    align-items: center;
    gap: .45rem;
    margin-top: .8rem;
    padding: .75rem .9rem;
    border: 1px solid var(--signup-border);
    border-radius: 12px;
    background: #fff;
    color: #67768b;
    font-size: .62rem;
}

.signup-after > strong { color: #334155; font-size: .66rem; }
.signup-after > span { display: flex; align-items: center; gap: .35rem; }
.signup-after i { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; border-radius: 50%; background: #eaf1ff; color: var(--signup-blue-dark); font-size: .52rem; font-style: normal; font-weight: 900; }

.signup-page-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .8rem;
    padding-top: .75rem;
    color: #7c899b;
    font-size: .62rem;
}

.signup-page-footer span + span::before,
.signup-page-footer a::before { margin-right: .8rem; color: #c3ccd8; content: "•"; }
.signup-page-footer a { color: #66768d; text-decoration: none; }
.signup-page-footer a:hover { color: var(--signup-blue-dark); text-decoration: underline; }

@media (max-width: 1120px) {
    .signup-shell { grid-template-columns: minmax(390px, .78fr) minmax(560px, 1.22fr); }
    .signup-brand { padding: 2.4rem; }
    .signup-brand h2 { font-size: clamp(2.2rem, 3.7vw, 3.25rem); }
}

@media (max-width: 920px) {
    .signup-topbar { position: relative; height: 66px; padding-inline: 1.25rem; }
    .signup-shell { grid-template-columns: 1fr; padding-top: 0; }
    .signup-panel { order: -1; padding: 2rem 1.2rem; }
    .signup-brand { min-height: auto; padding: 2.7rem clamp(1.3rem, 6vw, 3.5rem); }
    .signup-brand__content { width: min(760px, 100%); }
    .signup-brand h2 { max-width: 690px; font-size: clamp(2.2rem, 6.5vw, 3.4rem); }
    .signup-benefits { grid-template-columns: repeat(3, 1fr); }
    .signup-benefits li { grid-template-columns: 1fr; align-content: start; }
    .signup-preview { width: min(680px, 100%); }
    .signup-support { width: min(680px, 100%); }
}

@media (max-width: 620px) {
    .signup-topbar { height: 62px; padding-inline: .9rem; }
    .signup-logo__image { width: 94px; }
    .signup-topbar__actions > span,
    .signup-back-link { display: none !important; }
    .signup-login-link { min-height: 40px !important; }
    .signup-panel { padding: 1.2rem .7rem 1.5rem; }
    .signup-panel__content { width: 100%; }
    .signup-progress { margin-bottom: .8rem; }
    .signup-progress li strong { font-size: .58rem; }
    .signup-card { padding: 1.35rem 1.05rem; border-radius: 18px; }
    .signup-card__header h1 { font-size: 1.8rem; }
    .signup-fields { grid-template-columns: 1fr; }
    .signup-field--wide { grid-column: auto; }
    .signup-submit.ui-button { width: 100%; }
    .signup-mobile-login { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .85rem; font-size: .7rem; }
    .signup-mobile-login span { color: #64748b; }
    .signup-mobile-login a { color: var(--signup-blue-dark); font-weight: 850; text-decoration: none; }
    .signup-after { grid-template-columns: 1fr; gap: .6rem; padding: .85rem; }
    .signup-page-footer span + span::before,
    .signup-page-footer a::before { display: none; }
    .signup-brand { padding: 2rem 1.15rem; }
    .signup-brand h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
    .signup-brand__content > p { font-size: .88rem; }
    .signup-benefits { grid-template-columns: 1fr; }
    .signup-benefits li { grid-template-columns: 38px 1fr; }
    .signup-preview__body { grid-template-columns: 1fr; padding-right: 5rem; }
    .signup-preview__metric { display: none; }
    .signup-support { grid-template-columns: auto 1fr; }
    .signup-support a { grid-column: 2; }
}

@media (max-width: 360px) {
    .signup-card { padding-inline: .85rem; }
    .signup-progress { padding-inline: 0; }
    .signup-progress li strong { max-width: 76px; text-align: center; }
    .signup-preview { display: none; }
}

@media (max-height: 820px) and (min-width: 921px) {
    .signup-brand { padding-block: 1.7rem; }
    .signup-brand h2 { margin-block: .6rem; font-size: 2.55rem; }
    .signup-benefits { margin-top: .85rem; }
    .signup-benefits li { padding-block: .48rem; }
    .signup-preview { margin-top: .85rem; }
    .signup-support { margin-top: .8rem; padding-top: .7rem; }
    .signup-panel { padding-block: 1rem; }
    .signup-card { padding-block: 1.2rem; }
    .signup-field { margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}