.signup-body { min-height: 100vh; color: #1d382a; background: #f7faf7; }
.signup-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 6.5vw, 96px); border-bottom: 1px solid #edf1ed; background: #fff; }
.signup-brand { display: inline-flex; align-items: center; gap: 10px; color: #174936; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.signup-brand:hover { color: #174936; }
.signup-brand-icon,.brand-mark { display: grid; width: 36px; height: 36px; flex: none; place-items: center; }
a.already-member,a.already-member:visited { color: #829087; font-size: 13px; }
a.already-member:hover,a.already-member:focus-visible { color: #52645a; }
.already-member strong { margin-left: 6px; color: #26734c; font-size: 13px; }
.signup-main { width: min(100% - 36px, 740px); margin: 0 auto; padding: 46px 0 56px; }
.signup-intro { margin-bottom: 28px; text-align: center; }
.signup-kicker,.step-label { color: #4c8c63; font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.signup-intro h1 { margin: 12px 0 10px; color: #183b2b; font-size: clamp(27px, 4vw, 38px); font-weight: 750; letter-spacing: -.06em; line-height: 1.3; }
.signup-intro p { color: #859188; font-size: 13px; line-height: 1.6; }
.signup-progress { display: flex; width: min(100%, 470px); align-items: center; justify-content: center; margin: 0 auto 22px; }
.progress-step { display: flex; flex: none; align-items: center; gap: 8px; color: #a0aaa3; font-size: 13px; }
.progress-step > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dce4de; border-radius: 50%; color: #95a198; background: white; font-size: 13px; font-weight: 700; }
.progress-step.is-active { color: #26734c; font-weight: 700; }
.progress-step.is-active > span,.progress-step.is-done > span { border-color: #26734c; color: #fff; background: #26734c; }
.progress-line { height: 1px; flex: 1; margin: 0 12px; background: #dfe7e0; }
.signup-card { padding: 34px 38px 26px; border: 1px solid #ebf0eb; border-radius: 18px; background: #fff; box-shadow: 0 15px 44px #294b3510; }
.signup-step[hidden] { display: none; }
.signup-step.is-visible { display: block; }
.signup-complete { min-height: 360px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.signup-complete.is-visible { display: flex; }
.complete-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 20px; border-radius: 50%; color: #fff; background: #26734c; box-shadow: 0 0 0 9px #26734c14; }
.complete-icon svg { width: 27px; height: 27px; }
.signup-complete h2 { margin: 10px 0 8px; color: #203d2d; font-size: 25px; font-weight: 750; letter-spacing: -.055em; }
.signup-complete > p { color: #849087; font-size: 13px; line-height: 1.8; }
.signup-complete > p strong { color: #26734c; }
.complete-loading { display: inline-flex; align-items: center; gap: 4px; margin-top: 28px; color: #819087; font-size: 13px; }
.complete-loading i { width: 4px; height: 4px; border-radius: 50%; background: #62a478; animation: complete-pulse .8s infinite alternate; }
.complete-loading i:nth-child(2) { animation-delay: .2s; }
.complete-loading i:nth-child(3) { animation-delay: .4s; }
@keyframes complete-pulse { to { opacity: .25; transform: translateY(-2px); } }
.card-heading { margin-bottom: 24px; }
.card-heading h2 { margin: 8px 0 5px; color: #203d2d; font-size: 23px; font-weight: 750; letter-spacing: -.05em; }
.card-heading p { color: #8b968e; font-size: 13px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; }
.signup-field { min-width: 0; }
.full-field { grid-column: 1 / -1; }
.signup-field > label { display: block; margin: 0 0 7px; color: #3d5144; font-size: 13px; font-weight: 700; }
.signup-field > label span { color: #d26b5c; }
.field-control { height: 47px; display: flex; align-items: center; border: 1px solid #e2e9e3; border-radius: 9px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.field-control:focus-within { border-color: #4d9368; box-shadow: 0 0 0 3px #4d936818; }
.field-control > svg { width: 17px; height: 17px; flex: none; margin-left: 13px; color: #97a59a; }
.field-control input { width: 100%; height: 100%; min-width: 0; padding: 0 12px 0 9px; border: 0; border-radius: inherit; outline: none; color: #263e2e; background: transparent; font: inherit; font-size: 13px; }
.field-control input::placeholder { color: #adb8af; }
.signup-field > small { display: block; margin-top: 6px; color: #9aa59c; font-size: 13px; line-height: 1.5; }
.domain-control input { padding-left: 13px; }
.domain-control > span { flex: none; padding-right: 12px; color: #9aa59c; font-size: 13px; }
.check-field-row { display: flex; align-items: center; gap: 8px; }
.check-field-row > .field-control { flex: 1; min-width: 0; }
.duplicate-check { min-width: 78px; height: 41px; padding: 0 11px; border: 1px solid #cfe0d2; border-radius: 8px; color: #397b51; background: #f6faf6; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; }
.duplicate-check:hover { border-color: #8db699; background: #edf6ee; }
.availability-message { margin: 6px 0 0; font-size: 13px; }
.availability-message.is-available { color: #36804f; }
.availability-message.is-taken { color: #b34338; }
.domain-control .domain-prefix { flex: none; padding: 0 0 0 12px; color: #667c6b; font-size: 13px; white-space: nowrap; }
.domain-control input { min-width: 40px; padding-left: 6px; }
.unused-option { display: inline-flex; flex: none; align-items: center; gap: 6px; margin: 0 12px 0 0; color: #56675b; font-size: 13px; cursor: pointer; white-space: nowrap; }
.unused-option input { width: 15px; height: 15px; accent-color: #26734c; }
.image-upload { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px dashed #cbd9cd; border-radius: 10px; background: #fbfdfb; cursor: pointer; }
.image-upload > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-upload:focus-within { outline: 2px solid #4c8c63; outline-offset: 2px; }
.image-upload-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 10px; color: #4e8b61; background: #eaf4eb; }
.image-upload-icon svg { width: 20px; height: 20px; }
.image-upload-copy { min-width: 0; }
.image-upload-copy strong,.image-upload-copy small { display: block; }
.image-upload-copy strong { color: #44584a; font-size: 13px; }
.image-upload-copy small { margin-top: 5px; color: #9aa59c; font-size: 13px; }
.image-upload-action { margin-left: auto; padding: 8px 10px; border: 1px solid #e0e9e1; border-radius: 7px; color: #5e7664; background: #fff; font-size: 13px; white-space: nowrap; }
.main-image-preview { position: relative; width: min(100%, 320px); height: 145px; margin-top: 10px; overflow: hidden; border-radius: 9px; background: #f0f5f0; }
.main-image-preview[hidden] { display: none; }
.main-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.main-image-preview button { position: absolute; top: 7px; right: 7px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #183b2bcc; font-size: 18px; }
.checkbox-visual { display: grid; width: 18px; height: 18px; flex: none; place-items: center; border: 1px solid #cbd7cd; border-radius: 5px; color: transparent; background: #fff; }
.checkbox-visual svg { width: 15px; height: 15px; }
.signup-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 20px; border-top: 1px solid #eef2ee; }
.text-back { display: inline-flex; min-height: 42px; align-items: center; padding: 0 10px; color: #849087; background: transparent; font: inherit; font-size: 13px; }
.text-back:hover { color: #26734c; }
.next-button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border-radius: 9px; color: #fff; background: #26734c; font: inherit; font-size: 13px; font-weight: 700; transition: transform .18s, background .18s; }
.next-button:hover { color: #fff; background: #1d603e; transform: translateY(-1px); }
.next-button span { font-size: 16px; line-height: 1; }
.signup-error { margin: 15px 0 0; padding: 10px 12px; border: 1px solid #f1d4cf; border-radius: 8px; color: #a84437; background: #fff7f5; font-size: 13px; }
.signup-terms { margin: 18px 0 0; color: #9ba69e; font-size: 13px; text-align: center; }
.signup-terms a { color: #6f8074; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .signup-header { height: 64px; padding: 0 19px; } .signup-brand { font-size: 13px; } .signup-brand-icon { width: 32px; height: 32px; } .already-member { font-size: 13px; } .signup-main { width: min(100% - 28px, 460px); padding: 32px 0 38px; } .signup-intro { margin-bottom: 24px; } .signup-intro p { font-size: 13px; } .signup-card { padding: 25px 19px 20px; border-radius: 14px; } .card-heading { margin-bottom: 21px; } .card-heading h2 { font-size: 21px; } .field-grid { grid-template-columns: 1fr; gap: 15px; } .full-field { grid-column: auto; } .progress-step { gap: 5px; font-size: 13px; } .progress-step > span { width: 24px; height: 24px; font-size: 13px; } .progress-line { margin: 0 7px; } .next-button { padding: 0 15px; } .domain-control { height: auto; min-height: 47px; flex-wrap: wrap; padding: 6px 0; } .domain-control .domain-prefix { width: 100%; padding: 0 9px; font-size: 13px; } .domain-control input { height: 30px; padding-left: 9px; } .unused-option { margin-right: 8px; } .duplicate-check { min-width: 70px; padding: 0 8px; font-size: 13px; } }