:root {
    --signup-blue: #176fc1;
    --signup-ink: #17304f;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--signup-ink);
    background: radial-gradient(circle at 0 0, rgba(52,135,211,.13), transparent 28rem), radial-gradient(circle at 100% 100%, rgba(74,102,187,.09), transparent 30rem), #f3f7fb;
    font-family: "DM Sans", sans-serif;
}

.signup-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    min-height: 68px;
    padding: 8px clamp(20px,5vw,78px);
    border-bottom: 1px solid rgba(211,222,234,.9);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
}

.signup-brand { display: inline-flex; align-items: center; width: 210px; height: 52px; overflow: hidden; }
.signup-brand img { display: block; width: 210px; height: 52px; object-fit: contain; transform: scale(2.6); }
.signup-topbar-actions { display: flex; align-items: center; gap: 14px; color: #7c899a; font-size: .68rem; }
.signup-topbar-actions a { text-decoration: none; }
.signup-back { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; color: #52657d; font-weight: 700; }
.signup-login { padding: 9px 16px; border-radius: 999px; color: #fff; background: var(--signup-blue); box-shadow: 0 7px 18px rgba(23,111,193,.2); font-weight: 800; }

.signup-page { height: calc(100vh - 68px); height: calc(100dvh - 68px); padding: clamp(24px,4vw,56px) clamp(18px,5vw,78px); overflow: hidden; }
.signup-shell { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(560px,1.22fr); gap: clamp(28px,5vw,72px); align-items: start; height: 100%; max-width: 1380px; margin: 0 auto; }
.signup-intro { position: sticky; top: 116px; padding: clamp(18px,2vw,28px) 0; }
.signup-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--signup-blue); font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.signup-intro h1 { max-width: 570px; margin: 15px 0 0; color: #123154; font: 800 clamp(2rem,3.5vw,3.35rem)/1.06 "Manrope",sans-serif; letter-spacing: -.055em; }
.signup-intro > p { max-width: 530px; margin: 18px 0 0; color: #6f7f93; font-size: .85rem; line-height: 1.7; }
.signup-benefits { display: grid; gap: 10px; margin-top: 30px; }
.signup-benefits article { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(201,216,232,.9); border-radius: 15px; background: rgba(255,255,255,.65); }
.signup-benefits article > i { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--signup-blue); background: #e7f2fd; font-size: 1.12rem; }
.signup-benefits strong,.signup-benefits span { display: block; }
.signup-benefits strong { color: #2e4864; font-size: .7rem; }
.signup-benefits span { margin-top: 2px; color: #8390a2; font-size: .6rem; }
.signup-intro-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #78879a; font-size: .62rem; }
.signup-intro-note i { color: #159473; font-size: 1rem; }
.signup-intro-note strong { color: #3e556f; }

.signup-form-panel { max-height: 100%; padding: clamp(22px,3vw,34px); border: 1px solid #dfe7f0; border-radius: 26px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: rgba(255,255,255,.94); box-shadow: 0 22px 58px rgba(30,59,94,.1); }
.signup-form-panel::-webkit-scrollbar { width: 8px; }
.signup-form-panel::-webkit-scrollbar-track { margin-block: 18px; background: transparent; }
.signup-form-panel::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c2cfdd; background-clip: padding-box; }
.signup-form-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.signup-form-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#2d82d2,#07569a); box-shadow: 0 10px 23px rgba(23,111,193,.22); font-size: 1.3rem; }
.signup-form-heading > div > span { color: var(--signup-blue); font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.signup-form-heading h2 { margin: 2px 0 0; color: #173453; font: 800 1.35rem "Manrope",sans-serif; letter-spacing: -.035em; }
.signup-form-heading p { margin: 3px 0 0; color: #8a96a7; font-size: .64rem; }
.signup-error { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 17px; padding: 11px 12px; border: 1px solid #f1cfd5; border-radius: 12px; color: #a94455; background: #fff3f5; font-size: .65rem; line-height: 1.45; }
.signup-error i { flex: 0 0 auto; font-size: 1rem; }
.signup-form { display: grid; gap: 19px; }
.signup-section { min-width: 0; margin: 0; padding: 18px; border: 1px solid #e3e9f1; border-radius: 18px; background: #fbfcfe; }
.signup-section legend { display: flex; align-items: center; gap: 9px; padding: 0 8px; }
.signup-section legend > span { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 9px; color: #fff; background: var(--signup-blue); font-size: .67rem; font-weight: 800; }
.signup-section legend strong,.signup-section legend small { display: block; }
.signup-section legend strong { color: #334b66; font-size: .68rem; }
.signup-section legend small { margin-top: 1px; color: #919cac; font-size: .54rem; }
.signup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; margin-top: 7px; }
.signup-field { display: grid; min-width: 0; gap: 6px; align-content: start; }
.signup-field--full { grid-column: 1 / -1; }
.signup-field > span { color: #40536a; font-size: .62rem; font-weight: 700; }
.signup-field > span em { color: #98a2af; font-size: .54rem; font-style: normal; font-weight: 600; }
.signup-field > small { color: #98a2b0; font-size: .54rem; }
.signup-control { position: relative; display: flex; align-items: center; }
.signup-control > i { position: absolute; left: 13px; z-index: 1; color: #91a0b2; font-size: 1rem; pointer-events: none; }
.signup-control input { width: 100%; min-width: 0; height: 46px; min-height: 46px; padding: 10px 42px 10px 39px; border: 1px solid #dce4ee; border-radius: 12px; outline: none; color: #293e58; background: #fff; font: 600 .68rem "DM Sans",sans-serif; transition: border-color .16s ease,box-shadow .16s ease; }
.signup-control input::placeholder { color: #a2acb9; font-weight: 500; }
.signup-control input:focus { border-color: #77a8d8; box-shadow: 0 0 0 4px rgba(37,118,193,.09); }
.signup-password-toggle { position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; padding: 0; border: 0; color: #74869a; background: transparent; cursor: pointer; }
.signup-terms { display: flex; align-items: flex-start; gap: 9px; color: #6e7e92; font-size: .61rem; line-height: 1.5; cursor: pointer; }
.signup-terms input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--signup-blue); }
.signup-submit { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(90deg,#176fc1,#07569a); box-shadow: 0 13px 28px rgba(23,111,193,.22); font: 800 .73rem "DM Sans",sans-serif; cursor: pointer; transition: transform .16s ease,box-shadow .16s ease; }
.signup-submit:hover { box-shadow: 0 16px 32px rgba(23,111,193,.28); transform: translateY(-1px); }
.signup-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -7px 0 0; color: #98a3b1; font-size: .55rem; text-align: center; }

.signup-confirmation-page { display: grid; height: calc(100vh - 68px); height: calc(100dvh - 68px); padding: 24px; place-items: center; }
.signup-confirmation-card { width: min(100%,500px); padding: 42px; border: 1px solid #dfe7f0; border-radius: 26px; background: rgba(255,255,255,.96); box-shadow: 0 22px 58px rgba(30,59,94,.12); text-align: center; }
.signup-confirmation-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; color: #fff; background: linear-gradient(145deg,#2d82d2,#07569a); font-size: 1.7rem; }
.signup-confirmation-card > small { display: block; margin-top: 18px; color: var(--signup-blue); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.signup-confirmation-card h1 { margin: 6px 0 8px; color: #173453; font: 800 1.8rem "Manrope",sans-serif; }
.signup-confirmation-card > p { margin: 0 0 22px; color: #748398; font-size: .76rem; line-height: 1.6; }
.signup-confirmation-form { display: grid; gap: 12px; text-align: left; }
.signup-confirmation-form label { color: #40536a; font-size: .65rem; font-weight: 800; }
.signup-confirmation-form input { width: 100%; height: 58px; border: 1px solid #d8e2ed; border-radius: 14px; outline: 0; color: #173453; background: #fbfcfe; font: 800 1.45rem "DM Sans",sans-serif; letter-spacing: .45em; text-align: center; }
.signup-confirmation-form input:focus { border-color: #77a8d8; box-shadow: 0 0 0 4px rgba(37,118,193,.09); }
.signup-confirmation-success { display: flex; gap: 8px; margin-bottom: 17px; padding: 11px 12px; border: 1px solid #bce5d7; border-radius: 12px; color: #187454; background: #edfaf5; font-size: .65rem; }
.signup-resend-form button,.signup-confirmation-back { margin-top: 17px; padding: 0; border: 0; color: var(--signup-blue); background: transparent; font: 700 .65rem "DM Sans",sans-serif; cursor: pointer; text-decoration: none; }

@media (max-width: 980px) {
    html { height: auto; min-height: 100%; }
    body { height: auto; min-height: 100vh; overflow-y: auto; }
    .signup-page { height: auto; min-height: calc(100vh - 68px); overflow: visible; }
    .signup-shell { grid-template-columns: 1fr; }
    .signup-intro { position: static; padding-bottom: 0; }
    .signup-form-panel { max-height: none; overflow: visible; scrollbar-gutter: auto; }
    .signup-benefits { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 680px) {
    .signup-topbar { height: 60px; min-height: 60px; padding-block: 6px; }
    .signup-brand { width: 165px; height: 42px; }
    .signup-brand img { width: 165px; height: 42px; }
    .signup-topbar-actions > span,.signup-back { display: none; }
    .signup-page { padding: 18px 13px 32px; }
    .signup-intro h1 { font-size: 2rem; }
    .signup-benefits { grid-template-columns: 1fr; }
    .signup-form-panel { padding: 20px 14px; border-radius: 20px; }
    .signup-grid { grid-template-columns: 1fr; }
    .signup-field--full { grid-column: auto; }
    .signup-section { padding: 15px 12px; }
    .signup-confirmation-page { min-height: calc(100vh - 60px); padding: 16px; }
    .signup-confirmation-card { padding: 30px 20px; }
}