:root {
--bg: #f4f4f2;
--panel: #111d54;
--panel-deep: #0c1645;
--text: #f5f6fb;
--muted: rgba(245, 246, 251, .58);
--line: rgba(255, 255, 255, .12);
--blue: #2f6cf6;
--blue-light: #3a9bf4;
--field: rgba(255, 255, 255, .075);
}

* { box-sizing: border-box; }

html, body {
margin: 0;
min-height: 100%;
}

body {
min-height: 100vh;
padding: 8px;
background: var(--bg);
color: var(--text);
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}

.shell {
min-height: calc(100vh - 16px);
position: relative;
overflow: hidden;
border-radius: 30px;
background:
radial-gradient(circle at 78% 20%, rgba(42, 111, 246, .10), transparent 32%),
linear-gradient(135deg, #111d54 0%, #13235f 52%, #0d1748 100%);
}

.brand {
position: absolute;
top: 32px;
left: 38px;
/*left:50%;*/
/*transform:translate(-50%,0);*/
display: flex;
align-items: center;
gap: 7px;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.04em;
}

.brand-dot {
width: 6px;
height: 6px;
margin-top: -13px;
border-radius: 50%;
background: #ef3f64;
}

.top-nav {
position: absolute;
top: 18px;
left: 104px;
color: rgba(255,255,255,.46);
font-size: 13px;
}

.top-nav span {
margin-left: 9px;
color: rgba(255,255,255,.75);
font-size: 18px;
vertical-align: -1px;
}

.content {
min-height: calc(100vh - 16px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
grid-template-areas: "hero login";
gap: 80px;
align-items: flex-start;
/*align-items: center;*/
/*padding: 95px 8vw 72px;*/
padding: 118px 8vw 72px;
max-width:1920px;
margin:0 auto;
}

.hero {
grid-area: hero;
max-width: 830px;
/*align-self: center;*/
/*padding-top:38px;*/
}

.eyebrow {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 34px;
color: rgba(255,255,255,.48);
font-size: 11px;
font-weight: 700;
letter-spacing: .19em;
}

.eyebrow::before {
content: "";
width: 32px;
height: 1px;
background: rgba(255,255,255,.32);
}

h1 {
margin: 0;
max-width: 900px;
/*font-size: clamp(54px, 5.4vw, 92px);*/
font-size: clamp(48px, 4.4vw, 72px);
line-height: .91;
letter-spacing: -.065em;
/*font-weight: 760;*/
font-weight: 600;
line-height:1.1;
}

h1 .accent {
color: var(--blue-light);
}

.intro {
max-width: 610px;
margin: 37px 0 0;
color: rgba(255,255,255,.58);
font-size: 15px;
line-height: 1.65;
font-weight: 520;
}

.about {
  display:flex;
  flex-direction:column;
max-width: 760px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,.10);
}

.about h2 {
margin: 0 0 18px;
color: rgba(255,255,255,.92);
font-size: 18px;
line-height: 1.2;
letter-spacing: -.025em;
font-weight: 650;
}

.about p {
margin: 0 0 14px;
color: rgba(255,255,255,.56);
font-size: 14px;
line-height: 1.72;
font-weight: 450;
}
.about a {
margin: 0 0 14px;
color: rgba(255,255,255,1);
font-size: 14px;
line-height: 1.72;
font-weight: 500;
text-decoration:none;
}

.about p:last-child { margin-bottom: 0; }

.cities {
display: flex;
flex-wrap: wrap;
gap: 12px 29px;
max-width: 1000px;
margin-top: 74px;
}

.city {
color: rgba(255,255,255,.34);
font-size: 16px;
font-weight: 600;
}

.city:first-child {
/*color: rgba(255,255,255,.92);*/
}

.city:not(:last-child)::after {
content: "•";
margin-left: 29px;
color: rgba(255,255,255,.22);
}

.login-wrap {
grid-area: login;
width: 100%;
display: flex;
justify-content: flex-end;
}

.login {
width: 100%;
max-width: 430px;
padding: 38px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 24px;
background: rgba(255,255,255,.055);
box-shadow: 0 28px 80px rgba(0,0,0,.18);
backdrop-filter: blur(18px);
}

.login h2 {
margin: 0;
font-size: 29px;
line-height: 1;
letter-spacing: -.04em;
}

.login-intro {
margin: 11px 0 30px;
color: var(--muted);
font-size: 13px;
}

label {
display: block;
margin: 0 0 8px;
color: rgba(255,255,255,.70);
font-size: 12px;
font-weight: 650;
}

.field {
width: 100%;
height: 50px;
margin-bottom: 18px;
padding: 0 15px;
border: 1px solid var(--line);
border-radius: 12px;
outline: none;
background: var(--field);
color: white;
font: inherit;
transition: border-color .2s, background .2s;
}

.field::placeholder {
color: rgba(255,255,255,.27);
}

.field:focus {
border-color: rgba(58,155,244,.75);
background: rgba(255,255,255,.10);
}

.login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin: 2px 0 22px;
font-size: 11px;
}

.remember {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,.48);
}

.remember input {
accent-color: var(--blue);
}

.forgot {
color: rgba(255,255,255,.54);
text-decoration: none;
}

.button {
width: 100%;
height: 50px;
border: 0;
border-radius: 12px;
background: #f4f6fb;
color: #101b50;
font: inherit;
font-size: 13px;
font-weight: 750;
cursor: pointer;
}

.button:hover {
background: white;
}

.languages {
/*position: absolute;*/
/*left: 122px;*/
/*top: 38px;*/
display: flex;
gap: 18px;
margin-bottom:48px;
}

.languages a {
color: rgba(255,255,255,.40);
font-size: 11px;
font-weight: 650;
text-decoration: none;
transition: color .2s;
}

.languages a:hover,
.languages a.active {
color: rgba(255,255,255,.95);
}

.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
transition: opacity .2s, transform .2s, background .2s;
}

.button:active {
transform: translateY(1px);
}

.button:disabled {
cursor: wait;
opacity: .72;
}

.button-loader {
display: none;
width: 14px;
height: 14px;
border: 2px solid rgba(16,27,80,.22);
border-top-color: #101b50;
border-radius: 50%;
animation: login-spin .7s linear infinite;
}

.button.loading .button-loader {
display: block;
}

.login-status {
min-height: 18px;
margin-top: 13px;
color: rgba(255,255,255,.58);
font-size: 11px;
line-height: 1.5;
opacity: 0;
transform: translateY(-3px);
transition: opacity .2s, transform .2s;
}

.login-status.visible {
opacity: 1;
transform: translateY(0);
}

.login-status.error {
color: rgba(255,190,198,.88);
}

.field.invalid {
border-color: rgba(239,63,100,.68);
background: rgba(239,63,100,.07);
}

@keyframes login-spin {
to { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
.content {
grid-template-columns: 1fr;
grid-template-areas: none;
gap: 42px;
padding-top: 115px;
align-items: start;
}

.hero { display: contents; }
.hero-main { order: 1; max-width: 830px; }
.login-wrap { order: 2; grid-area: auto; justify-content: flex-start; }
.login { max-width: 520px; }
.hero-details { order: 3; max-width: 830px; }
.cities { margin-top: 45px; }
}

@media (max-width: 620px) {
body { padding: 5px; }

.shell {
min-height: calc(100vh - 10px);
border-radius: 22px;
}

.brand {
left: 24px;
top: 20px;
}

.top-nav { display: none; }

.content {
min-height: calc(100vh - 10px);
padding: 92px 20px 86px;
gap: 42px;
}

h1 {
font-size: clamp(40px, 12vw, 60px);
line-height: .94;
letter-spacing: -.055em;
}

.intro {
margin-top: 26px;
font-size: 14px;
}

.about { margin-top: 34px; padding-top: 25px; }
.about h2 { font-size: 17px; }
.about p { font-size: 13px; line-height: 1.68; }
.cities { margin-top: 34px; gap: 9px 18px; }

.city {
font-size: 13px;
}

.city:not(:last-child)::after {
margin-left: 18px;
}

.login-wrap { width: 100%; }
.login { max-width: none; padding: 26px 20px; border-radius: 19px; }

.languages {
/*right: 24px;*/
/*bottom: 20px;*/
}
}
strong{
color:white;
}

a{color:inherit}.field{border-color:transparent;font-size:16px}.field:focus{border-color:transparent;box-shadow:0 0 0 2px #75baff}label,.login-intro{font-size:14px;line-height:1.5}.login-status{font-size:14px}.languages{gap:18px}.languages a{font-size:13px}.login-options{font-size:13px}.login-options label{font-size:13px}.register-link{font-size:14px;line-height:1.6;text-align:center;margin-top:22px}.register-link a{color:#a3d2ff}.account-content{grid-template-columns:minmax(0,1fr) minmax(420px,620px);gap:60px}.account-content .login{max-width:620px}.account-content h1{font-size:clamp(40px,4vw,64px)}.account-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:30px}.account-progress button{border:0;border-top:2px solid #ffffff26;padding:12px 0;background:none;color:#aebadb;font-size:12px;cursor:pointer;text-align:left}.account-progress button[aria-current=step]{border-color:#3a9bf4;color:white}.account-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.account-choice{margin:0;position:relative;border:1px solid transparent;border-radius:11px;background:#ffffff0c;padding:18px 15px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;min-height:85px}.account-choice input{position:absolute;opacity:0;width:1px;height:1px}.account-choice .small-radio{border:1px solid #7c93c0;border-radius:50%;width:17px;min-width:17px;height:17px;margin-top:3px}.account-choice:has(input:checked){border-color:#619edc;background:#3a9bf426}.account-choice:has(input:checked) .small-radio{border:5px solid #8ac8ff}.account-choice:has(input:focus-visible){outline:2px solid #9cd4ff;outline-offset:3px}.account-choice strong{display:block;font-size:14px;font-weight:550}.account-choice small{display:block;font-size:12px;font-weight:400;line-height:1.6;color:#acbcde;margin-top:5px}.account-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.account-fields .wide{grid-column:1/-1}.account-field{margin-bottom:20px}.account-field input{display:block;width:100%;margin:9px 0 0}.account-actions{display:flex;gap:20px;align-items:center;margin-top:28px}.account-actions .button{width:auto;min-width:150px;margin-left:auto;padding:0 22px}.text-button{background:none;border:0;color:#bed2ef;cursor:pointer;padding:12px 0}.account-summary{margin:20px 0;display:grid;grid-template-columns:130px 1fr;gap:14px;font-size:14px;line-height:1.6}.account-summary dt{color:#aebcdc}.account-summary dd{margin:0;overflow-wrap:anywhere}.account-hint{color:#b2c2df;font-size:13px;line-height:1.7;margin:8px 0 20px}.account-check{display:flex;gap:12px;font-size:13px;line-height:1.6;align-items:flex-start}.account-check input{margin-top:4px;accent-color:#3a9bf4}.password-wrap{position:relative}.password-wrap input{padding-right:80px}.password-toggle{position:absolute;right:8px;top:5px;padding:12px 8px;border:0;background:none;color:#b8cff1;font-size:12px;cursor:pointer}.account-field:has([aria-invalid=true]){color:#ffc2d0}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid #9cd4ff;outline-offset:4px}
.account-top-links{position:absolute;right:38px;top:30px;display:flex;gap:20px;font-size:14px;align-items:center;}.account-content .languages{margin-bottom:35px}.account-content .hero{align-self:start;padding-top:20px}.account-content .intro{margin-top:28px}.account-content .about{margin-top:36px}button:disabled{opacity:.5;cursor:wait}@media(max-width:1280px){.account-content{grid-template-columns:1fr}.account-content .hero{display:block}.account-content .hero-details{display:none}.account-content .login{max-width:680px}.account-content .hero h1{font-size:40px}.account-content .intro{max-width:620px}.account-content .languages{margin-bottom:25px}.account-content .login-wrap{order:2}}@media(max-width:620px){.account-fields,.account-choices{grid-template-columns:1fr}.account-top-links{right:24px;top:23px}.account-content{gap:28px}.account-content h1{font-size:36px!important}.account-summary{grid-template-columns:1fr;gap:6px}.account-summary dd{margin-bottom:10px}.account-progress button{font-size:11px}.account-actions .button{min-width:130px}.account-choice{min-height:70px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 20px;border-radius:11px;font-size:14px;font-weight:600;cursor:pointer}.primary{background:#f4f6fb;color:#101b50;border:0}.secondary{background:#ffffff0f;border:1px solid #ffffff33;color:#eff5ff}.user-trigger{font:inherit}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);padding:16px 22px;border-radius:12px;background:#eff4ff;color:#182657;z-index:20}

/* Registration owns its outer layout; named login grid areas never apply here. */
.shell > main.content.account-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
}
.shell > main.content.account-content > .hero {
  display: block;
  grid-area: auto;
  order: 0;
  flex: 1 1 0;
  min-width: 0;
}
.shell > main.content.account-content > .login-wrap {
  grid-area: auto;
  order: 1;
  flex: 0 1 620px;
  min-width: 0;
  width: 100%;
}
.shell > main.content.account-content > .login-wrap > .login {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.account-content > *, .account-content .login-wrap, .account-content .login,
.account-content form, .account-content form section,
.account-fields > *, .account-choice > span:last-child { min-width: 0; }
.account-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-choice strong, .account-choice small, .account-field,
.account-progress button, .account-check > span { overflow-wrap: anywhere; }
.account-check input { flex: 0 0 auto; width: 18px; height: 18px; }
.account-progress button { min-width: 0; min-height: 48px; line-height: 1.5; }
@media (max-width: 1280px) {
  .shell > main.content.account-content {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 28px;
  }
  .shell > main.content.account-content > .hero,
  .shell > main.content.account-content > .login-wrap {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    max-width: 680px;
    margin: 0;
  }
}
@media (max-width: 620px) {
  .shell:has(> .account-content) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    padding-top: 16px;
  }
  .shell:has(> .account-content) > .brand {
    position: static; align-self: start; margin: 12px 0 0 16px;
  }
  .shell:has(> .account-content) > .account-top-links {
    position: static; min-width: 0; margin: 0 16px 0 12px;
    justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  }
  .shell:has(> .account-content) > .account-top-links > a {
    display: inline-flex; align-items: center; min-height: 44px;
    overflow-wrap: anywhere; font-size: 14px;
  }
  .account-top-links .user-trigger { max-width: 100%; }
  .account-top-links #userLabel { display: none; }
  .account-content {
    grid-column: 1 / -1; width: 100%; min-height: 0;
    padding: 26px 14px 32px; gap: 24px;
  }
  .account-content .hero { padding-top: 0; }
  .account-content .hero h1 { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.15; }
  .account-content .intro { margin-top: 18px; line-height: 1.6; }
  .account-content .languages { flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; }
  .account-content .languages a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .account-content .login { padding: 24px 16px; max-width: none; }
  .account-content .login h2 { font-size: 26px; line-height: 1.2; }
  .account-content .login-intro { margin-bottom: 22px; }
  .account-content .account-fields, .account-content .account-choices {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-content .account-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 24px; }
  .account-content .account-progress button { font-size: 14px; padding: 10px 0; }
  .account-content .account-choice { min-height: 76px; padding: 16px 14px; }
  .account-content .account-choice strong { font-size: 16px; line-height: 1.4; }
  .account-content .account-choice small { font-size: 14px; line-height: 1.5; }
  .account-content .account-field { font-size: 14px; }
  .account-content input.field { min-width: 0; max-width: 100%; font-size: 16px; min-height: 52px; }
  .account-content .account-actions { flex-wrap: wrap; gap: 12px; }
  .account-content .account-actions .button { flex: 1 1 140px; min-width: 0; height: auto; min-height: 52px; padding: 14px 18px; font-size: 16px; }
  .account-content .account-actions .text-button { flex: 0 0 auto; min-height: 48px; font-size: 14px; }
  .account-content .account-summary { grid-template-columns: minmax(0, 1fr); }
  .account-content .account-check { font-size: 14px; }
}

/* ---------- Registration profile categories ---------- */
.registration-choice-intro{max-width:560px;margin:8px 0 22px;color:#9fb0cf;font-size:13px;line-height:1.65}
.registration-profile-groups{display:grid;gap:24px;margin-top:18px}
.registration-profile-group{padding:0 0 23px;border-bottom:1px solid rgba(255,255,255,.10)}
.registration-profile-group:last-child{padding-bottom:0;border-bottom:0}
.registration-profile-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:10px}
.registration-profile-group-label{color:#eef5ff;font-size:11px;font-weight:760;letter-spacing:.12em;text-transform:uppercase}
.registration-profile-group-head p{max-width:390px;margin:0;color:#8194b9;font-size:11px;line-height:1.5;text-align:right}
.registration-profile-group .account-choices{margin:0}
.registration-profile-group--private .account-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.registration-profile-group--official .account-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){
  .registration-profile-group-head{align-items:flex-start;flex-direction:column;gap:5px}
  .registration-profile-group-head p{text-align:left}
  .registration-profile-group--private .account-choices,.registration-profile-group--official .account-choices{grid-template-columns:1fr}
}

/* ---------- Account profile identity + dynamic professional fields ---------- */
.account-field-note{display:block;margin-top:7px;color:#8297bd;font-size:11px;line-height:1.55;font-weight:400}
.specialty-field .popup-value{cursor:pointer;padding-right:38px;background-image:linear-gradient(45deg,transparent 45%,#a8ceff 45%,#a8ceff 55%,transparent 55%);background-size:8px 8px;background-repeat:no-repeat;background-position:right 16px center}
.specialty-field .popup-value:hover{background-color:rgba(255,255,255,.10)}
.popup-selection{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:15px 0 18px}
.popup-selection .popup-note{margin:0}
#ueadDialog .result-choice[aria-pressed=true]{border:1px solid rgba(139,202,255,.72);background:rgba(69,148,228,.20)}
#ueadDialog .result-choice[aria-pressed=true] .result-action{color:#bfe4ff}

/* v22 — required marker stays inline with account field labels */
.account-field{display:block}
.account-field>span:first-child,.account-field>b{display:inline;vertical-align:baseline}
.account-field>b{margin-left:4px;color:#ffb8c8;font-size:.85em;line-height:1}
.account-field>input,.account-field>.field,.account-field>.password-wrap,.account-field>.account-field-note,.account-field>small{display:block;width:100%}


.verification-result{display:grid;gap:20px}.verification-result--success{text-align:center;justify-items:center}.verification-result .complete-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:24px}.verification-login{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:180px}.verification-message{margin:0;line-height:1.55}