@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --auth-teal: #078d88;
    --auth-teal-dark: #057974;
    --auth-ink: #111827;
    --auth-muted: #667085;
    --auth-line: #d7dee8;
    --auth-soft: #f4f9fa;
}

* { box-sizing: border-box; }

.auth-preview-body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    padding: 27px;
    color: var(--auth-ink);
    background: #f7f9fb;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

html, body { font-family: 'Inter', sans-serif; }

.register-preview {
    display: grid;
    grid-template-columns: 46.5% 53.5%;
    width: min(1394px, 100%);
    min-height: calc(100vh - 54px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 24px;
    background: #f7fafc;
    box-shadow: 0 14px 45px rgb(16 24 40 / 5%);
}

.register-showcase {
    position: relative;
    min-height: 1028px;
    overflow: hidden;
    padding: 64px 52px;
    background-image: linear-gradient(180deg, rgb(246 249 251 / 95%) 0%, rgb(246 249 251 / 73%) 32%, rgb(246 249 251 / 8%) 76%), url('/mock/auth/assets/register-background');
    background-position: center;
    background-size: cover;
}

.auth-logo { width: 220px; height: auto; object-fit: contain; }
.showcase-copy { position: relative; z-index: 1; margin-top: 44px; }
.showcase-copy h1 { margin: 0; font-size: clamp(31px, 2.6vw, 42px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; }
.showcase-copy > p { max-width: 455px; margin: 18px 0 0; color: var(--auth-muted); font-size: 17px; line-height: 1.55; }
.showcase-benefits { display: grid; gap: 23px; margin: 30px 0 0; padding: 0; list-style: none; }
.showcase-benefits li { display: flex; align-items: flex-start; gap: 15px; }
.benefit-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: var(--auth-teal); background: rgb(255 255 255 / 88%); font-size: 24px; box-shadow: 0 8px 24px rgb(16 24 40 / 8%); }
.benefit-icon svg, .type-icon svg, .input-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.showcase-benefits strong { display: block; margin-top: 2px; font-size: 15px; }
.showcase-benefits small { display: block; margin-top: 4px; color: var(--auth-muted); font-size: 14px; line-height: 1.35; }
.showcase-trust { position: absolute; z-index: 1; left: 43px; bottom: 62px; display: flex; align-items: center; gap: 16px; padding: 17px 25px; border: 1px solid rgb(215 222 232 / 85%); border-radius: 15px; background: rgb(255 255 255 / 88%); box-shadow: 0 8px 30px rgb(16 24 40 / 10%); font-size: 15px; line-height: 1.5; }
.showcase-trust .benefit-icon { box-shadow: none; background: #edf8f7; }

.register-form-side { display: flex; align-items: center; justify-content: center; padding: 34px 35px; }
.register-card { width: min(718px, 100%); padding: 40px 55px 32px; border: 1px solid #e2e7ed; border-radius: 20px; background: rgb(255 255 255 / 96%); box-shadow: 0 18px 45px rgb(16 24 40 / 8%); }
.register-card header h2 { margin: 0; font-size: 31px; line-height: 1.2; letter-spacing: -.025em; }
.register-card header h2, .showcase-copy h1 { font-weight: 700; }
.register-card header p { margin: 10px 0 24px; color: var(--auth-muted); font-size: 15px; }
.account-type-fieldset { margin: 0 0 19px; padding: 0; border: 0; }
.account-type-fieldset legend, .form-field > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.account-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-type { position: relative; display: flex; height: 51px; align-items: center; gap: 10px; padding: 0 15px; cursor: pointer; border: 1px solid var(--auth-line); border-radius: 9px; color: #384152; font-weight: 600; transition: .18s ease; }
.account-type input { position: absolute; opacity: 0; }
.account-type.active { border-color: var(--auth-teal); color: #256b70; background: #f7fcfc; box-shadow: 0 0 0 1px rgb(7 141 136 / 8%); }
.type-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--auth-teal); background: #eaf7f6; }
.type-check { display: none; margin-left: auto; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: white; background: var(--auth-teal); font-size: 13px; }
.account-type.active .type-check { display: grid; }
.form-field { margin-bottom: 15px; }
.input-shell { display: flex; height: 44px; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid var(--auth-line); border-radius: 8px; color: #8a94a6; background: white; transition: .18s ease; }
.input-shell:focus-within { border-color: var(--auth-teal); box-shadow: 0 0 0 3px rgb(7 141 136 / 10%); }
.input-shell.invalid { border-color: #dc4c64; }
.input-shell input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--auth-ink); background: transparent; font: inherit; font-size: 14px; }
.input-shell input::placeholder { color: #98a2b3; }
.phone-prefix { padding-right: 11px; border-right: 1px solid var(--auth-line); color: #344054; font-size: 14px; white-space: nowrap; }
.password-toggle { padding: 4px; cursor: pointer; border: 0; color: #7d8798; background: transparent; }
.form-field small { display: block; margin-top: 5px; color: #8a94a6; font-size: 12px; }
.field-error { min-height: 0; margin: 4px 0 0; color: #c93652; font-size: 12px; }
.field-error:empty { display: none; }
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 16px; color: #475467; font-size: 13px; line-height: 1.4; }
.terms-check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--auth-teal); }
.terms-check a, .login-link a { color: var(--auth-teal-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.primary-auth-button { width: 100%; height: 45px; cursor: pointer; border: 0; border-radius: 8px; color: white; background: linear-gradient(180deg, #0e9b94, #087f7c); font-size: 16px; font-weight: 600; box-shadow: 0 8px 18px rgb(7 141 136 / 18%); }
.primary-auth-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.auth-divider { display: flex; align-items: center; gap: 18px; margin: 16px 0 13px; color: #98a2b3; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ''; background: #e1e6ec; }
.login-link { margin: 0; text-align: center; color: #475467; font-size: 14px; }
.login-link a { margin-left: 4px; text-decoration: none; }
.email-notice { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 13px 16px; border: 1px solid #dfe5eb; border-radius: 9px; color: var(--auth-muted); background: #f9fbfc; font-size: 13px; line-height: 1.4; }
.email-notice > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; color: var(--auth-teal); background: #e7f6f5; }
.email-notice p { margin: 0; }
.register-status { margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.register-status.error { color: #a9253e; background: #fff0f3; }
.register-status.success { color: #08766f; background: #eaf8f6; }

.login-preview {
    display: grid;
    grid-template-columns: 46.5% 53.5%;
    width: min(1290px, 100%);
    min-height: min(920px, calc(100vh - 64px));
    margin: 5px auto 0;
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 45px rgb(16 24 40 / 5%);
}

.login-showcase {
    position: relative;
    min-height: 850px;
    overflow: hidden;
    padding: 43px 48px;
    background-image: linear-gradient(180deg, rgb(244 248 251 / 96%) 0%, rgb(244 248 251 / 67%) 38%, rgb(244 248 251 / 5%) 74%), url('/mock/auth/assets/login-background');
    background-position: center;
    background-size: cover;
}
.login-showcase .showcase-copy { margin-top: 70px; }
.login-showcase .showcase-copy h1 { font-size: 38px; line-height: 1.25; }
.login-showcase .showcase-copy > p { max-width: 440px; }
.login-stat { position: absolute; left: 30px; bottom: 34px; display: flex; align-items: center; gap: 18px; padding: 18px 25px; border: 1px solid rgb(215 222 232 / 85%); border-radius: 17px; background: rgb(255 255 255 / 91%); box-shadow: 0 8px 30px rgb(16 24 40 / 10%); }
.login-stat strong { display: block; font-size: 17px; font-weight: 600; }
.login-stat small { display: block; margin-top: 5px; color: var(--auth-muted); font-size: 13px; }
.login-main { display: flex; min-width: 0; flex-direction: column; }
.login-content { display: flex; flex: 1; align-items: center; justify-content: center; padding: 55px 75px 30px; }
.login-form-wrap { width: min(490px, 100%); }
.login-form-wrap header h1 { margin: 0; font-size: 38px; line-height: 1.2; letter-spacing: -.035em; font-weight: 700; }
.login-form-wrap header p { max-width: 440px; margin: 15px 0 45px; color: var(--auth-muted); font-size: 16px; line-height: 1.65; }
.login-form-wrap .form-field { margin-bottom: 25px; }
.login-form-wrap .input-shell { height: 55px; border-radius: 9px; }
.login-options { display: flex; align-items: center; justify-content: space-between; margin: -3px 0 29px; }
.remember-check { display: flex; align-items: center; gap: 10px; color: #566074; font-size: 14px; font-weight: 500; }
.remember-check input { width: 20px; height: 20px; accent-color: var(--auth-teal); }
.forgot-link, .secondary-auth-button { color: var(--auth-teal-dark); font-size: 14px; font-weight: 600; text-decoration: none; }
.login-form-wrap .primary-auth-button { height: 55px; font-size: 17px; }
.secondary-auth-button { display: flex; height: 55px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--auth-line); border-radius: 9px; background: white; }
.security-note { display: flex; align-items: center; gap: 15px; margin-top: 30px; color: #758096; font-size: 13px; line-height: 1.45; }
.security-note .benefit-icon { flex-basis: 46px; width: 46px; height: 46px; background: #eaf8f6; box-shadow: none; }
.login-footer { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 0 45px; border-top: 1px solid #e5e9ef; color: #7a8496; font-size: 12px; }
.footer-links { display: flex; align-items: center; gap: 24px; }
.footer-links a { color: inherit; text-decoration: none; }
.language-select { padding: 10px 14px; border: 1px solid var(--auth-line); border-radius: 8px; color: #475467; background: white; }

@media (max-width: 980px) {
    .login-preview { display: block; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
    .login-showcase { min-height: 300px; padding: 32px 30px; background-position: center 65%; }
    .login-showcase .showcase-copy { margin-top: 35px; }
    .login-showcase .showcase-copy h1 { font-size: 30px; }
    .login-stat { display: none; }
    .login-content { padding: 45px 25px; }
    .login-footer { padding: 20px 25px; }
}

@media (max-width: 980px) {
    .auth-preview-body { padding: 0; }
    .register-preview { display: block; min-height: 100vh; border: 0; border-radius: 0; }
    .register-showcase { min-height: 330px; padding: 34px 30px; background-position: center 58%; }
    .showcase-copy { margin-top: 28px; }
    .showcase-copy h1 { font-size: 30px; }
    .showcase-copy > p { max-width: 520px; }
    .showcase-benefits, .showcase-trust { display: none; }
    .register-form-side { padding: 26px 18px 45px; }
}

@media (max-width: 560px) {
    .register-showcase { min-height: 245px; padding: 25px 22px; }
    .auth-logo { width: 170px; }
    .showcase-copy { margin-top: 25px; }
    .showcase-copy h1 { font-size: 25px; }
    .showcase-copy > p { display: none; }
    .register-form-side { margin-top: -22px; padding: 0 12px 30px; }
    .register-card { position: relative; padding: 27px 20px 25px; border-radius: 17px; }
    .register-card header h2 { font-size: 26px; }
    .account-types { grid-template-columns: 1fr; }
    .login-showcase { min-height: 220px; padding: 25px 22px; }
    .login-showcase .showcase-copy { margin-top: 25px; }
    .login-showcase .showcase-copy h1 { font-size: 25px; }
    .login-content { margin-top: -18px; padding: 35px 20px; border-radius: 18px 18px 0 0; background: white; }
    .login-form-wrap header h1 { font-size: 30px; }
    .login-form-wrap header p { margin-bottom: 30px; }
    .login-footer { display: block; text-align: center; }
    .footer-links { justify-content: center; margin-top: 14px; }
}

.auth-flow-body{display:flex;min-height:100vh;flex-direction:column;padding:0;background:#fbfcfd}.flow-topbar{display:flex;height:105px;align-items:center;justify-content:space-between;padding:0 40px}.flow-topbar img{width:200px}.flow-topbar>div,.flow-topbar>span{display:flex;align-items:center;gap:28px;color:#657189;font-size:14px}.flow-topbar span small{display:block;margin-top:4px;font-size:11px}.flow-topbar a{padding:16px 24px;border:1px solid var(--auth-line);border-radius:10px;color:#5f6a80;text-decoration:none;font-weight:600}.recovery-card{display:grid;width:min(1368px,calc(100% - 80px));min-height:760px;grid-template-columns:1fr 1fr;margin:25px auto 0;overflow:hidden;border:1px solid #e0e6ed;border-radius:18px;background:#fff;box-shadow:0 12px 35px rgb(16 24 40 / 5%)}.recovery-form-panel{display:flex;flex-direction:column;justify-content:center;padding:60px}.recovery-form-panel h1,.single-flow-card h1,.verification-card h1{margin:28px 0 18px;font-size:38px;line-height:1.2;letter-spacing:-.035em;font-weight:700}.recovery-form-panel>p,.single-flow-card>p,.verification-card>p{margin:0 0 40px;color:var(--auth-muted);font-size:16px;line-height:1.6}.flow-hero-icon{display:grid;width:82px;height:82px;place-items:center;border-radius:20px;color:var(--auth-teal);background:#eaf8f7;font-size:38px}.recovery-form-panel .form-field{margin-bottom:38px}.recovery-form-panel .input-shell,.single-flow-card .input-shell{height:58px}.recovery-form-panel .primary-auth-button,.single-flow-card .primary-auth-button{height:58px}.back-auth-link{color:var(--auth-teal-dark);font-size:16px;font-weight:600;text-align:center;text-decoration:none}.recovery-info-panel{display:flex;flex-direction:column;justify-content:center;padding:65px;background:linear-gradient(145deg,#f7fbfd,#edf7fa)}.recovery-illustration{position:relative;width:300px;height:220px;margin:0 auto 38px;color:#0a9991}.recovery-illustration>span{position:absolute;left:35px;bottom:20px;font-size:150px;color:#dce8ef}.recovery-illustration>b{position:absolute;left:125px;top:10px;display:grid;width:115px;height:95px;place-items:center;border-radius:18px;color:#07948d;background:#fff;font-size:50px;box-shadow:0 20px 45px rgb(16 24 40 / 12%)}.recovery-illustration>i{position:absolute;right:10px;bottom:15px;display:grid;width:70px;height:82px;place-items:center;border-radius:35px 35px 45px 45px;color:#fff;background:#14a89e;font-size:32px;font-style:normal}.recovery-info-panel h2{margin:0;font-size:23px}.recovery-info-panel>p{color:var(--auth-muted);font-size:14px;line-height:1.55}.recovery-info-panel ul{display:grid;gap:26px;margin:25px 0 0;padding:0;list-style:none}.recovery-info-panel li{display:flex;gap:16px}.recovery-info-panel li>span{display:grid;width:45px;height:45px;flex:0 0 45px;place-items:center;border:1px solid #d8e8ea;border-radius:50%;color:var(--auth-teal);font-size:22px}.recovery-info-panel strong{font-size:14px}.recovery-info-panel small{display:block;margin-top:5px;color:var(--auth-muted);font-size:12px}.flow-footer{margin-top:auto;padding:42px 20px 25px;color:#7a8497;font-size:12px;line-height:2;text-align:center}.flow-footer a{color:inherit;text-decoration:none}.single-flow-card,.verification-card{width:min(580px,calc(100% - 30px));margin:auto;padding:50px;border:1px solid var(--auth-line);border-radius:18px;background:#fff;box-shadow:0 15px 45px rgb(16 24 40 / 7%);text-align:center}.single-flow-card .flow-hero-icon,.verification-icon{margin:0 auto}.single-flow-card form{text-align:left}.verification-card{width:min(630px,calc(100% - 30px))}.verification-icon{position:relative;display:grid;width:120px;height:120px;place-items:center;border-radius:50%;color:var(--auth-teal);background:#eaf9f7;box-shadow:0 0 0 14px rgb(234 249 247 / 55%),0 0 0 28px rgb(234 249 247 / 25%);font-size:48px}.verification-icon i{position:absolute;right:12px;bottom:12px;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:var(--auth-teal);font-size:15px;font-style:normal}.verification-email{margin:0 0 24px;padding:18px;border:1px solid var(--auth-line);border-radius:9px;color:#344054;font-weight:600}.button-link{display:flex;align-items:center;justify-content:center;text-decoration:none}.text-action{margin:18px auto;border:0;color:var(--auth-teal-dark);background:none;font-weight:600}.verification-help{margin-top:24px;padding:18px;border:1px solid var(--auth-line);border-radius:10px;color:var(--auth-muted);background:#fafcfd;font-size:12px;line-height:1.5;text-align:left}.verification-help strong{color:#344054}.verification-card.invalid .verification-icon{color:#c93652;background:#fff0f3;box-shadow:0 0 0 14px rgb(255 240 243 / 55%),0 0 0 28px rgb(255 240 243 / 25%)}.verification-card.invalid [data-result-badge]{color:#a9253e;background:#fff6f7}.verification-card.invalid .primary-auth-button{display:none}@media(max-width:760px){.flow-topbar{height:80px;padding:0 20px}.flow-topbar img{width:165px}.flow-topbar>div span,.flow-topbar>span{display:none}.recovery-card{display:block;width:calc(100% - 24px);min-height:0;margin-top:10px}.recovery-form-panel,.recovery-info-panel{padding:35px 24px}.recovery-info-panel{display:none}.recovery-form-panel h1,.single-flow-card h1,.verification-card h1{font-size:29px}.single-flow-card,.verification-card{padding:35px 22px}.verification-icon{width:90px;height:90px;font-size:38px}}