:root {
    --register-brand-950: #321017;
    --register-brand-900: #45141d;
    --register-brand-800: #611b28;
    --register-brand-700: #7f2433;
    --register-accent: #d5aa54;
    --register-accent-soft: #f5e7c5;
    --register-ink: #1f2024;
    --register-muted: #686b73;
    --register-line: #e7e2de;
    --register-surface: #ffffff;
    --register-background: #f4f1ee;
    --register-danger: #a4262c;
    --register-danger-soft: #fdf0f0;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--register-background); }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--register-ink);
    background: var(--register-background);
    font-family: Lato, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.registration-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 44px 24px 26px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(244,241,238,.78)),
        repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(69,20,29,.025) 80px);
}

.registration-page__glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    pointer-events: none;
}
.registration-page__glow--top { top: -250px; right: -150px; background: radial-gradient(circle, rgba(127,36,51,.14), transparent 68%); }
.registration-page__glow--bottom { bottom: -290px; left: -110px; background: radial-gradient(circle, rgba(213,170,84,.2), transparent 66%); }

.registration-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1160px, 100%);
    min-height: 690px;
    grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
    overflow: hidden;
    border: 1px solid rgba(69,20,29,.08);
    border-radius: 28px;
    background: var(--register-surface);
    box-shadow: 0 32px 90px rgba(49,27,31,.16), 0 6px 20px rgba(49,27,31,.07);
}

.registration-brand {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 48px 38px;
    color: #fff;
    background: linear-gradient(155deg, rgba(97,27,40,.97), rgba(50,16,23,.99)), var(--register-brand-900);
}
.registration-brand::after {
    position: absolute;
    right: -150px;
    bottom: -165px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(213,170,84,.24);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(213,170,84,.05), 0 0 0 90px rgba(213,170,84,.035);
    content: "";
    pointer-events: none;
}
.registration-brand__pattern {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(rgba(255,255,255,.65) .8px, transparent .8px);
    background-size: 19px 19px;
    mask-image: linear-gradient(to bottom right, #000, transparent 76%);
    pointer-events: none;
}
.registration-brand__content, .registration-brand__footer { position: relative; z-index: 1; }
.registration-brand__identity {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
}
.registration-brand__logo-wrap {
    display: grid;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(25,5,10,.24);
}
.registration-brand__logo { width: 55px; height: 55px; object-fit: contain; }
.registration-brand__identity strong, .registration-brand__identity small { display: block; }
.registration-brand__identity strong { font-size: 1.18rem; font-weight: 900; letter-spacing: .02em; }
.registration-brand__identity small { margin-top: 2px; color: rgba(255,255,255,.67); font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.registration-brand__message { margin-top: 82px; }
.registration-brand__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--register-accent-soft);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.registration-brand__eyebrow::before { width: 28px; height: 2px; background: var(--register-accent); content: ""; }
.registration-brand__message h1 {
    max-width: 420px;
    margin: 20px 0 18px;
    font-size: clamp(2.35rem, 4vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.02;
}
.registration-brand__message p { max-width: 410px; margin: 0; color: rgba(255,255,255,.71); font-size: 1rem; line-height: 1.7; }
.registration-brand__benefits { display: grid; margin: 40px 0 0; padding: 0; gap: 15px; list-style: none; }
.registration-brand__benefits li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 700; }
.registration-brand__check {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border: 1px solid rgba(213,170,84,.55);
    border-radius: 8px;
    color: var(--register-accent-soft);
    background: rgba(213,170,84,.12);
}
.registration-brand__check svg { width: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.registration-brand__footer { margin: 44px 0 0; color: rgba(255,255,255,.47); font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.registration-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 56px;
    background: radial-gradient(circle at 100% 0, rgba(213,170,84,.08), transparent 31%), #fff;
}
.registration-form-panel__inner { width: min(560px, 100%); }
.registration-form-panel__heading { margin-bottom: 30px; }
.registration-form-panel__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    padding: 7px 11px;
    border: 1px solid #eadcbd;
    border-radius: 999px;
    color: var(--register-brand-800);
    background: #fcf8ef;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.registration-form-panel__badge svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.registration-form-panel__heading h2 { margin: 0; color: var(--register-ink); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.registration-form-panel__heading p { margin: 10px 0 0; color: var(--register-muted); font-size: .98rem; line-height: 1.6; }

.registration-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid #f0c5c7;
    border-radius: 13px;
    color: #7a2025;
    background: var(--register-danger-soft);
}
.registration-alert__icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; color: #fff; background: var(--register-danger); }
.registration-alert__icon svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.9; }
.registration-alert strong, .registration-alert p { display: block; }
.registration-alert strong { margin-bottom: 2px; font-size: .86rem; }
.registration-alert p { margin: 0; font-size: .82rem; line-height: 1.45; }

.registration-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.registration-field label { display: inline-block; margin-bottom: 8px; color: #34353a; font-size: .83rem; font-weight: 800; }
.registration-field__control { position: relative; }
.registration-field__control input {
    width: 100%;
    height: 52px;
    padding: 0 43px 0 44px;
    border: 1px solid var(--register-line);
    border-radius: 12px;
    outline: none;
    color: var(--register-ink);
    background: #fbfaf9;
    font-size: .91rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.registration-field__control input::placeholder { color: #a5a2a0; }
.registration-field__control input:hover { border-color: #d3cbc6; background: #fff; }
.registration-field__control input:focus { border-color: var(--register-brand-700); background: #fff; box-shadow: 0 0 0 4px rgba(127,36,51,.1); }
.registration-field__control input[aria-invalid="true"] { border-color: var(--register-danger); background: #fffafa; }
.registration-field__control input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(164,38,44,.09); }
.registration-field__icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    color: #89847f;
    pointer-events: none;
    transform: translateY(-50%);
}
.registration-field__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.registration-field__toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    outline: none;
    color: #827e79;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 160ms ease, background 160ms ease;
}
.registration-field__toggle:hover, .registration-field__toggle:focus-visible { color: var(--register-brand-700); background: #f3eeeb; }
.registration-field__eye { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.registration-field__eye--hide, .registration-field__toggle[aria-pressed="true"] .registration-field__eye--show { display: none; }
.registration-field__toggle[aria-pressed="true"] .registration-field__eye--hide { display: block; }
.registration-field__hint, .registration-field__error, .registration-strength { display: block; min-height: 17px; margin-top: 7px; font-size: .73rem; line-height: 1.35; }
.registration-field__hint { color: #85827e; }
.registration-field__error { min-height: 0; color: var(--register-danger); font-weight: 700; }
.registration-field__hint + .registration-field__error:empty { display: none; }
.registration-strength { display: flex; align-items: center; gap: 8px; color: #85827e; }
.registration-strength__bars { display: grid; width: 58px; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.registration-strength__bars i { height: 3px; border-radius: 999px; background: #dfdad6; transition: background 180ms ease; }
.registration-strength[data-level="1"] .registration-strength__bars i:nth-child(-n + 1) { background: #c84545; }
.registration-strength[data-level="2"] .registration-strength__bars i:nth-child(-n + 2) { background: #d68a35; }
.registration-strength[data-level="3"] .registration-strength__bars i:nth-child(-n + 3) { background: #9b872c; }
.registration-strength[data-level="4"] .registration-strength__bars i { background: #448360; }

.registration-form__submit {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    padding: 13px 22px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--register-brand-800), var(--register-brand-950));
    box-shadow: 0 13px 24px rgba(69,20,29,.2);
    cursor: pointer;
    font-size: .94rem;
    font-weight: 900;
    letter-spacing: .01em;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.registration-form__submit svg, .registration-form-panel__signin svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 160ms ease; }
.registration-form__submit:hover { box-shadow: 0 16px 30px rgba(69,20,29,.27); filter: brightness(1.06); transform: translateY(-1px); }
.registration-form__submit:hover svg { transform: translateX(3px); }
.registration-form__submit:focus-visible { outline: 3px solid rgba(213,170,84,.55); outline-offset: 3px; }
.registration-form__submit:active { box-shadow: 0 8px 16px rgba(69,20,29,.2); transform: translateY(1px); }
.registration-form-panel__divider { display: flex; align-items: center; gap: 14px; margin: 25px 0 18px; color: #aaa49f; font-size: .71rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.registration-form-panel__divider::before, .registration-form-panel__divider::after { height: 1px; flex: 1; background: var(--register-line); content: ""; }
.registration-form-panel__signin { margin: 0; color: var(--register-muted); font-size: .86rem; text-align: center; }
.registration-form-panel__signin a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--register-brand-700); font-weight: 900; text-decoration: none; }
.registration-form-panel__signin a:hover, .registration-form-panel__signin a:focus-visible { color: var(--register-brand-950); text-decoration: underline; text-underline-offset: 3px; }
.registration-form-panel__signin a:hover svg { transform: translateX(2px); }
.registration-page__copyright { position: relative; z-index: 1; margin: 20px 0 0; color: #88827e; font-size: .74rem; text-align: center; }

@media (max-width: 980px) {
    .registration-page { justify-content: flex-start; padding: 26px 20px 20px; }
    .registration-card { min-height: 0; grid-template-columns: 1fr; }
    .registration-brand { min-height: 300px; padding: 34px 38px; }
    .registration-brand__message { margin-top: 46px; }
    .registration-brand__message h1 { max-width: 620px; font-size: clamp(2.2rem, 7vw, 3.2rem); }
    .registration-brand__message p { max-width: 650px; }
    .registration-brand__benefits, .registration-brand__footer { display: none; }
    .registration-form-panel { padding: 48px 38px; }
}

@media (max-width: 650px) {
    .registration-page { padding: 0; background: #fff; }
    .registration-card { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .registration-brand { min-height: 250px; padding: 26px 23px 30px; }
    .registration-brand__logo-wrap { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; }
    .registration-brand__logo { width: 47px; height: 47px; }
    .registration-brand__identity strong { font-size: 1rem; }
    .registration-brand__identity small { font-size: .64rem; }
    .registration-brand__message { margin-top: 32px; }
    .registration-brand__message h1 { margin: 14px 0 10px; font-size: clamp(2rem, 10vw, 2.55rem); }
    .registration-brand__message p { font-size: .9rem; line-height: 1.55; }
    .registration-form-panel { padding: 38px 22px 34px; }
    .registration-form-panel__heading { margin-bottom: 25px; }
    .registration-form-panel__heading h2 { font-size: 2rem; }
    .registration-form__grid { grid-template-columns: 1fr; gap: 19px; }
    .registration-form__submit { margin-top: 24px; }
    .registration-form-panel__signin a { display: flex; width: fit-content; margin: 5px auto 0; }
    .registration-page__copyright { width: 100%; margin: 0; padding: 0 20px 22px; background: #fff; }
}

@media (max-width: 380px) {
    .registration-brand { min-height: 232px; }
    .registration-brand__message h1 { font-size: 1.82rem; }
    .registration-brand__message p { display: none; }
    .registration-form-panel { padding-right: 17px; padding-left: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}