:root {
    --primary: #0866f5;
    --accent: #08a4f5;
    --navy: #101b3c;
    --muted: #61708d;
    --surface: #ffffff;
    --page: #f7faff;
    --border: #dce5f2;
    --focus: rgba(8, 102, 245, .17);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--navy);
    background: var(--page);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
.auth-page {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: max(14px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.auth-shell { position: relative; z-index: 1; width: min(100%, 420px); min-width: 0; margin: 0 auto; }
.auth-header { height: 38px; display: flex; justify-content: flex-end; align-items: center; }
.admin-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.admin-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.brand { text-align: center; margin: 22px 0 20px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; color: #fff; background: linear-gradient(140deg, var(--accent), var(--primary)); border-radius: 14px 14px 14px 5px; box-shadow: 0 10px 22px rgba(8, 102, 245, .2); font-size: 23px; font-weight: 800; }
.brand h1 { margin: 0; font-size: 25px; line-height: 1.1; letter-spacing: -.7px; font-weight: 800; }
.brand h1 span { color: var(--primary); }
.brand p { margin: 6px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.login-card { padding: 22px 20px 19px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 50px rgba(33, 70, 130, .09); }
.card-heading { margin-bottom: 20px; }
.card-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.6px; font-weight: 800; }
.card-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.login-alert { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 15px; padding: 10px 12px; border: 0; border-radius: 11px; font-size: 12px; }
.role-fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.role-switch { display: flex; gap: 4px; padding: 4px; background: #f0f5fc; border-radius: 13px; }
.role-option { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 10px; color: var(--navy); background: transparent; border: 0; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; transition: color .2s, background .2s, box-shadow .2s; }
.role-option.is-active { color: #fff; background: linear-gradient(110deg, var(--accent), var(--primary)); box-shadow: 0 5px 12px rgba(8, 102, 245, .2); }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin: 0 0 7px; color: var(--navy); font-size: 12px; font-weight: 750; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > i { position: absolute; left: 14px; z-index: 1; color: #8191ac; font-size: 16px; pointer-events: none; }
.input-wrap input { width: 100%; height: 48px; padding: 0 42px; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: 11px; outline: none; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.input-wrap input::placeholder { color: #9aa8bc; }
.input-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.captcha-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px; }
.captcha-question,.captcha-row input { display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 12px;border:1px solid var(--border);border-radius:11px; }
.captcha-question { color:#147b2c;background:repeating-linear-gradient(135deg,#f0faf2 0 8px,#e7f5ea 8px 16px);font-size:16px;font-weight:800;letter-spacing:2px; }
.captcha-row input { color:var(--navy);background:#fff;outline:none;font-size:14px; }
.captcha-row input:focus { border-color:var(--primary);box-shadow:0 0 0 4px var(--focus); }
.password-toggle { position: absolute; right: 5px; display: grid; place-items: center; width: 38px; height: 38px; color: #8191ac; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.password-toggle:hover { color: var(--primary); background: #f0f5fc; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 20px; color: var(--muted); font-size: 11px; }
.form-options > a { font-size: 11px; font-weight: 700; white-space: nowrap; }
.remember-option { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.remember-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.login-button { display: grid; place-items: center; width: 100%; min-height: 49px; color: #fff; background: linear-gradient(110deg, var(--accent), var(--primary)); border: 0; border-radius: 12px; box-shadow: 0 9px 18px rgba(8, 102, 245, .22); cursor: pointer; font-size: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s, filter .2s; }
.login-button:hover { filter: brightness(1.04); box-shadow: 0 11px 23px rgba(8, 102, 245, .28); }
.login-button:active { transform: translateY(1px); }
.login-button:disabled { cursor: wait; opacity: .8; }
.button-loading { display: none; align-items: center; gap: 8px; }
.login-button.is-loading .button-label { display: none; }
.login-button.is-loading .button-loading { display: inline-flex; }
.form-status { min-height: 0; margin: 0; color: #b42318; font-size: 12px; }
.card-footer-text { margin: 19px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.card-footer-text a { font-weight: 750; }
.auth-flip-scene { position: relative; perspective: 1200px; transition: height .55s ease; }
.auth-flip-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.72,.25,1); }
.auth-flip-inner.is-flipped { transform: rotateY(180deg); }
.auth-flip-face { position: absolute; inset: 0 auto auto 0; width: 100%; pointer-events:none; touch-action:manipulation; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.auth-flip-inner:not(.is-flipped)>.auth-flip-face:not(.signup-card),.auth-flip-inner.is-flipped>.signup-card { pointer-events:auto; }
.auth-flip-face:first-child { position: relative; transform: rotateY(0); }
.signup-card { transform: rotateY(-180deg); }
.signup-card .card-heading { margin-bottom: 14px; }
.signup-card .form-field { margin-bottom: 11px; }
.signup-card .input-wrap input { height: 42px; }
.signup-address { align-items: flex-start; }
.signup-address>i { top: 12px; }
.signup-address textarea { width: 100%; min-height: 65px; padding: 10px 12px 10px 42px; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: 11px; outline: none; resize: vertical; font: inherit; font-size: 13px; }
.signup-address textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.signup-card .card-footer-text { margin-top: 13px; }
.signup-progress { display:flex; align-items:center; gap:9px; margin:-3px 0 16px; color:#8694aa; font-size:10px; font-weight:700; }
.signup-progress span { padding:6px 9px; background:#f1f5fb; border-radius:20px; }
.signup-progress span.active { color:#0866f5; background:#e8f2ff; }
.signup-progress>i { flex:1; height:1px; background:#e1e8f2; }
.signup-select-wrap select { width:100%;min-width:0;height:42px;padding:0 23px 0 42px;color:var(--navy);background:transparent;border:1px solid var(--border);border-radius:11px;outline:none;appearance:none;font:inherit;font-size:13px; }
.signup-select-wrap select:focus { border-color:var(--primary);box-shadow:0 0 0 4px var(--focus); }
.signup-select-wrap select:invalid { color:#9aa8bc; }
.signup-select-arrow { position:absolute;right:13px;color:#8191ac;font-size:12px;pointer-events:none; }
.signup-services-empty { display:block;margin:5px 0 0 3px;color:#9a5b19;font-size:10px; }
.auth-page:has(.auth-flip-inner.is-flipped) { overflow-y: auto; }
.signup-success-dialog { width:min(calc(100% - 32px),360px);padding:27px 25px 22px;color:var(--navy);text-align:center;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 22px 70px rgba(20,45,88,.23); }
.signup-success-dialog::backdrop { background:rgba(13,29,57,.42);backdrop-filter:blur(3px); }
.signup-success-icon { display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;color:#fff;background:linear-gradient(140deg,#22c982,#08a968);border-radius:50%;font-size:25px; }
.signup-success-dialog h2 { margin:0;font-size:21px;font-weight:800; }
.signup-success-dialog p { margin:7px 0 19px;color:var(--muted);font-size:13px; }
.signup-success-dialog button { min-width:100px;min-height:39px;color:#fff;background:linear-gradient(110deg,var(--accent),var(--primary));border:0;border-radius:10px;font-size:13px;font-weight:750;cursor:pointer; }
.social-auth,.auth-bottom-visual { display:none; }
.auth-logo { display:block;width:min(160px,58vw);height:auto;margin:0 auto;object-fit:contain; }
.decor { position: absolute; z-index: -1; pointer-events: none; }
.decor-top { top: -105px; left: -90px; width: 250px; height: 200px; background: linear-gradient(140deg, rgba(8, 164, 245, .18), rgba(8, 102, 245, .04)); border-radius: 45% 55% 60% 40%; transform: rotate(-14deg); }
.decor-dot { position: absolute; z-index: -1; width: 9px; height: 9px; background: rgba(8, 164, 245, .23); border-radius: 50%; }
.dot-one { top: 25%; right: 7%; }.dot-two { bottom: 17%; left: 8%; width: 6px; height: 6px; }
@media (max-height: 680px) { .brand { margin-top: 12px; margin-bottom: 14px; }.brand-mark { width: 38px; height: 38px; margin-bottom: 7px; }.login-card { padding-top: 18px; }.card-heading { margin-bottom: 15px; }.role-fieldset { margin-bottom: 15px; }.form-field { margin-bottom: 12px; }.form-options { margin-bottom: 14px; } }
@media (min-width: 500px) { .auth-page { display: grid; place-items: center; }.auth-header { margin-top: -10px; } }
@media (min-width: 500px) and (max-width: 900px) {
    .auth-page { padding-right:24px;padding-left:24px; }
    .auth-shell { width:min(100%,420px); }
}
@media (max-width: 499px) {
    .auth-page { min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; padding:max(20px,env(safe-area-inset-top,0px)) 16px max(12px,env(safe-area-inset-bottom,0px)); background:linear-gradient(150deg,#fff 5%,#fbfffc 58%,#effaf0 100%); }
    .decor-top { background:linear-gradient(140deg,rgba(69,218,108,.2),rgba(20,147,53,.04)); }
    .auth-shell { width:min(100%,360px); }
    .auth-header { display:none; }
    .brand { display:block;width:min(145px,48vw);margin:4px auto 13px;text-align:center; }
    .auth-logo { width:100%;max-width:145px; }
    .brand-mark { grid-row:1 / span 2;width:44px;height:44px;margin:0;color:#13822c;background:#fff;border:2px solid #278a3b;border-radius:50%;box-shadow:none; }
    .brand-mark svg { width:100%;height:100%; }
    .brand h1 { align-self:end;color:#167d2a;font-size:16px;line-height:1;letter-spacing:-.35px;text-transform:uppercase;white-space:nowrap; }
    .brand h1 span { color:#167d2a; }
    .brand p { align-self:start;margin:2px 0 0;color:#292c31;font-size:8px;font-weight:800;letter-spacing:1.6px; }
    .login-card { padding:7px 10px 13px;background:transparent;border:0;border-radius:0;box-shadow:none; }
    .card-heading { margin-bottom:14px;text-align:center; }
    .card-heading h2 { font-size:25px; }
    .card-heading h2 span { color:#14832e; }
    .card-heading p { max-width:280px;margin:4px auto 0;font-size:12px;line-height:1.4; }
    .input-wrap input,.signup-select-wrap select { font-size:16px; }
    .role-fieldset { margin-bottom:12px; }
    .role-switch { gap:7px;padding:0;background:transparent; }
    .role-option { min-height:54px;justify-content:flex-start;gap:8px;padding:7px 9px;background:#f4f6f8;border:1px solid #e3e8ed;border-radius:10px;font-size:10px;text-align:left; }
    .role-option.is-active { color:#fff;background:linear-gradient(110deg,#0b8f2c,#087d24);border-color:#087d24;box-shadow:0 4px 9px rgba(8,125,36,.17); }
    .role-option>i { flex:none;font-size:18px; }
    .role-option>span { display:block;line-height:1.2; }
    .role-option small { display:block;margin-top:3px;font-size:8px;font-weight:500;white-space:nowrap; }
    .form-field { margin-bottom:12px; }
    .form-field label { margin-bottom:5px;font-size:11px; }
    .input-wrap input { height:42px;border-radius:9px; }
    .captcha-question,.captcha-row input { height:42px;border-radius:9px; }
    .captcha-question { font-size:14px; }
    .captcha-row input { font-size:16px; }
    .form-options { justify-content:flex-end;margin:0 0 14px; }
    .remember-option { display:none; }
    .form-options>a { color:#168130;font-size:11px; }
    .login-button { min-height:42px;border-radius:9px;background:linear-gradient(110deg,#098b28,#087a22);box-shadow:0 5px 12px rgba(8,125,36,.17);font-size:13px; }
    .form-status { min-height:0; }
    .social-auth { display:grid;gap:7px;padding:0 10px; }
    .social-divider { display:flex;align-items:center;gap:10px;margin:0 0 1px;color:#778093;font-size:9px;white-space:nowrap; }
    .social-divider:before,.social-divider:after { height:1px;flex:1;background:#e4e9e7;content:""; }
    .social-auth>button { display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:38px;color:#253044;background:#fff;border:1px solid #e0e6ed;border-radius:9px;font-size:11px;font-weight:700;opacity:1; }
    .google-mark { font-size:19px;font-weight:800;background:conic-gradient(#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75%);background-clip:text;-webkit-text-fill-color:transparent; }
    .linkedin-mark { display:grid;place-items:center;width:19px;height:19px;color:#fff;background:#0a66c2;border-radius:3px;font-size:13px;font-weight:800; }
    .card-footer-text { margin:13px 0 0;font-size:12px; }
    .card-footer-text a { color:#168130; }
    .auth-bottom-visual { position:relative;display:block;width:100%;height:205px;margin:4px auto 0;overflow:hidden; }
    .auth-bottom-visual:before { position:absolute;right:-30px;bottom:-65px;left:-30px;height:120px;background:linear-gradient(145deg,#c9f6ce,#60ce78);border-radius:50% 50% 0 0;content:""; }
    .auth-bottom-visual img { position:relative;z-index:1;display:block;width:100%;height:auto;margin-top:2px;filter:drop-shadow(0 8px 9px rgba(29,72,37,.12)); }
    .auth-flip-scene { perspective:none;height:auto!important; }
    .auth-flip-inner,.auth-flip-inner.is-flipped { display:block;transform:none!important;transform-style:flat; }
    .auth-flip-face,.auth-flip-face:first-child,.signup-card { position:relative!important;inset:auto!important;width:100%;opacity:1;visibility:visible;pointer-events:auto!important;transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .2s ease; }
    .auth-flip-face[hidden] { display:none!important; }
}
@media (max-width: 360px) {
    .auth-page { padding-right:12px;padding-left:12px; }
    .auth-shell { width:100%; }
    .login-card { padding-right:5px;padding-left:5px; }
    .role-switch { gap:5px; }
    .role-option { min-width:0;gap:5px;padding-right:6px;padding-left:6px;font-size:9px; }
    .role-option small { white-space:normal;font-size:7px; }
    .form-options { flex-wrap:wrap; }
    .auth-bottom-visual { height:205px; }
}