.ec-auth-page {
    --auth-max: 1160px;
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(100deg, rgba(4,6,9,.96) 0%, rgba(4,6,9,.86) 48%, rgba(4,6,9,.66) 100%),
        url("../images/city.jpg") center / cover no-repeat fixed,
        #090b0f;
}

.ec-auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.019) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.019) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.ec-auth-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ec-auth-atmosphere::before,
.ec-auth-atmosphere::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
}
.ec-auth-atmosphere::before { width: 540px; height: 540px; top: -300px; right: 8%; background: rgba(224,184,76,.10); }
.ec-auth-atmosphere::after { width: 500px; height: 500px; bottom: -350px; left: -150px; background: rgba(62,91,124,.11); }

.ec-auth-topbar,
.ec-auth-shell,
.ec-auth-noscript { position: relative; z-index: 1; }

.ec-auth-topbar {
    width: min(calc(100% - 40px), var(--auth-max));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ec-auth-brand { display: inline-flex; align-items: center; }
.ec-auth-brand img { width: clamp(150px, 18vw, 210px); max-height: 58px; object-fit: contain; object-position: left center; }
.ec-auth-back-link { display: inline-flex; align-items: center; gap: 9px; color: #8e99a8; font-size: .78rem; font-weight: 750; }
.ec-auth-back-link:hover { color: #f1d16b; }

.ec-auth-shell {
    width: min(calc(100% - 40px), var(--auth-max));
    min-height: calc(100vh - 82px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    align-items: center;
    gap: clamp(48px, 8vw, 105px);
    padding: 55px 0 80px;
}

.ec-auth-story { min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; padding: 38px 0; }
.ec-auth-story-content { max-width: 570px; }
.ec-auth-kicker { display: inline-flex; align-items: center; gap: 10px; color: #f0cf68; font-size: .69rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.ec-auth-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.ec-auth-story h1 { margin: 21px 0 22px; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .94; letter-spacing: -.063em; text-wrap: balance; }
.ec-auth-story-content > p { max-width: 550px; color: #a0aab7; font-size: 1rem; line-height: 1.78; }

.ec-auth-story-list { display: grid; gap: 9px; margin-top: 38px; }
.ec-auth-story-list article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; padding: 14px 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); backdrop-filter: blur(8px); }
.ec-auth-story-list article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #e1bd52; background: rgba(224,184,76,.08); font-size: .62rem; font-weight: 950; }
.ec-auth-story-list article div { display: grid; gap: 2px; }
.ec-auth-story-list strong { color: #e3e7ec; font-size: .82rem; }
.ec-auth-story-list small { color: #7d8998; font-size: .72rem; line-height: 1.5; }

.ec-auth-security-note { max-width: 480px; display: flex; align-items: center; gap: 13px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.08); }
.ec-auth-security-icon { flex: 0 0 auto; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid rgba(79,215,134,.22); border-radius: 9px; color: #64d993; background: rgba(79,215,134,.06); font-size: .65rem; }
.ec-auth-security-note div { display: grid; gap: 2px; }
.ec-auth-security-note strong { color: #b9c1ca; font-size: .76rem; }
.ec-auth-security-note small { color: #6f7b89; font-size: .68rem; }

.ec-auth-form-panel {
    position: relative;
    padding: clamp(28px, 4.2vw, 48px);
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 24px;
    background: linear-gradient(150deg, rgba(25,31,40,.97), rgba(11,14,19,.985));
    box-shadow: 0 32px 100px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(24px);
}

.ec-auth-form-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 36px;
    right: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,184,76,.58), transparent);
}

.ec-auth-form-heading { margin-bottom: 27px; }
.ec-auth-form-heading h2 { margin: 12px 0 8px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.045em; }
.ec-auth-form-heading p { margin: 0; color: #84909f; font-size: .84rem; }

.ec-auth-banner { display: flex; gap: 11px; align-items: center; margin-bottom: 20px; padding: 13px; border: 1px solid rgba(79,215,134,.22); border-radius: 12px; color: #bceccd; background: rgba(79,215,134,.06); }
.ec-auth-banner > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #0d2115; background: #63d994; font-size: .8rem; font-weight: 950; }
.ec-auth-banner div { display: grid; gap: 1px; }
.ec-auth-banner strong { font-size: .78rem; }
.ec-auth-banner small { color: #84b99a; font-size: .68rem; }

.ec-auth-form { display: grid; gap: 19px; }
.ec-auth-field { display: grid; gap: 7px; }
.ec-auth-field label { color: #d9dee4; font-size: .76rem; font-weight: 820; letter-spacing: .01em; }
.ec-auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ec-auth-label-row > span { color: #687482; font-size: .65rem; font-weight: 700; }

.ec-auth-input-wrap { position: relative; }
.ec-auth-input-wrap input {
    min-height: 52px;
    padding: 12px 52px 12px 43px;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 11px;
    color: #f5f7f9;
    background: rgba(5,8,12,.72);
    font-size: .9rem;
    box-shadow: inset 0 1px rgba(255,255,255,.015);
}
.ec-auth-input-wrap input::placeholder { color: #4f5b69; }
.ec-auth-input-wrap input:focus { border-color: rgba(224,184,76,.62); box-shadow: 0 0 0 3px rgba(224,184,76,.10), inset 0 1px rgba(255,255,255,.02); }

.ec-auth-input-icon { position: absolute; left: 14px; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; color: #65717f; pointer-events: none; }
.ec-auth-input-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ec-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    z-index: 3;
    width: 36px;
    min-height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #74808e;
    background: transparent;
}
.ec-auth-password-toggle:hover { transform: translateY(-50%); color: #e6c65f; background: rgba(255,255,255,.04); filter: none; }
.ec-auth-password-toggle svg { width: 18px; height: 18px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ec-auth-password-toggle .ec-eye-closed { display: none; }
.ec-auth-password-toggle[aria-pressed="true"] .ec-eye-open { display: none; }
.ec-auth-password-toggle[aria-pressed="true"] .ec-eye-closed { display: block; }

.ec-auth-field-help,
.ec-auth-field-message { min-height: 16px; color: #687482; font-size: .66rem; line-height: 1.4; }
.ec-auth-field-message:empty { display: none; }
.ec-auth-field[data-state="error"] .ec-auth-input-wrap input { border-color: rgba(240,109,114,.68); box-shadow: 0 0 0 3px rgba(240,109,114,.08); }
.ec-auth-field[data-state="error"] .ec-auth-field-message { color: #f28b90; }
.ec-auth-field[data-state="success"] .ec-auth-input-wrap input { border-color: rgba(79,215,134,.5); }
.ec-auth-field[data-state="success"] .ec-auth-field-message { color: #67d990; }
.ec-auth-field[data-state="checking"] .ec-auth-field-message { color: #e1bd52; }

.ec-auth-field-indicator { position: absolute; right: 15px; top: 50%; z-index: 2; width: 9px; height: 9px; transform: translateY(-50%); border-radius: 50%; background: transparent; }
.ec-auth-field[data-state="checking"] .ec-auth-field-indicator { border: 2px solid rgba(224,184,76,.25); border-top-color: #e0b84c; animation: ecAuthSpin .7s linear infinite; }
.ec-auth-field[data-state="success"] .ec-auth-field-indicator { background: #4fd786; box-shadow: 0 0 9px rgba(79,215,134,.5); }
.ec-auth-field[data-state="error"] .ec-auth-field-indicator { background: #f06d72; box-shadow: 0 0 9px rgba(240,109,114,.45); }

.ec-auth-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ec-auth-strength i { height: 3px; border-radius: 99px; background: #2b323c; transition: background .18s ease, box-shadow .18s ease; }
.ec-auth-strength[data-score="1"] i:nth-child(-n+1) { background: #e16067; }
.ec-auth-strength[data-score="2"] i:nth-child(-n+2) { background: #d89b41; }
.ec-auth-strength[data-score="3"] i:nth-child(-n+3) { background: #d7bd50; }
.ec-auth-strength[data-score="4"] i:nth-child(-n+4) { background: #50cf82; box-shadow: 0 0 7px rgba(80,207,130,.25); }

.ec-auth-password-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 12px; }
.ec-auth-password-rules span { position: relative; padding-left: 15px; color: #66717e; font-size: .63rem; }
.ec-auth-password-rules span::before { content: ""; position: absolute; top: .42em; left: 0; width: 6px; height: 6px; border: 1px solid #56616f; border-radius: 50%; }
.ec-auth-password-rules span.is-met { color: #72cb91; }
.ec-auth-password-rules span.is-met::before { border-color: #50cf82; background: #50cf82; box-shadow: 0 0 7px rgba(80,207,130,.4); }

.ec-auth-consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: #8995a3; font-size: .69rem; line-height: 1.55; cursor: pointer; }
.ec-auth-consent input { appearance: none; width: 17px; height: 17px; margin: 1px 0 0; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: #090c10; }
.ec-auth-consent input:checked { border-color: #d8b245; background: #d8b245; box-shadow: inset 0 0 0 3px #171b21; }

.ec-auth-status { padding: 12px 13px; border: 1px solid rgba(101,174,247,.22); border-left: 3px solid #65aef7; border-radius: 10px; color: #b7d8fb; background: rgba(101,174,247,.06); font-size: .72rem; line-height: 1.5; }
.ec-auth-status[data-tone="error"] { border-color: rgba(240,109,114,.22); border-left-color: #f06d72; color: #f7a4a8; background: rgba(240,109,114,.06); }
.ec-auth-status[data-tone="success"] { border-color: rgba(79,215,134,.22); border-left-color: #4fd786; color: #9ce4b6; background: rgba(79,215,134,.06); }

.ec-auth-submit {
    position: relative;
    min-height: 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    overflow: hidden;
    padding: 12px 17px;
    border-radius: 11px;
    color: #101419;
    background: linear-gradient(135deg, #ffe083, #d6a936);
    box-shadow: 0 13px 28px rgba(224,184,76,.15);
}
.ec-auth-submit:hover:not(:disabled) { box-shadow: 0 17px 35px rgba(224,184,76,.23); }
.ec-auth-button-label { justify-self: center; padding-left: 20px; font-size: .84rem; font-weight: 900; }
.ec-auth-button-arrow { font-size: 1rem; }
.ec-auth-spinner { position: absolute; left: 50%; top: 50%; display: none; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(17,21,27,.24); border-top-color: #11151b; border-radius: 50%; animation: ecAuthSpin .7s linear infinite; }
.ec-auth-submit.is-loading .ec-auth-button-label,
.ec-auth-submit.is-loading .ec-auth-button-arrow { visibility: hidden; }
.ec-auth-submit.is-loading .ec-auth-spinner { display: block; }

.ec-auth-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 15px; color: #596572; font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.ec-auth-divider::before,
.ec-auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.075); }

.ec-auth-secondary-action { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 14px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #d9dee4; background: rgba(255,255,255,.025); }
.ec-auth-secondary-action:hover { border-color: rgba(224,184,76,.3); color: #f2d26b; background: rgba(224,184,76,.045); }
.ec-auth-secondary-action span { font-size: .76rem; font-weight: 850; }
.ec-auth-secondary-action small { grid-column: 1; color: #6f7b89; font-size: .65rem; }
.ec-auth-secondary-action b { grid-column: 2; grid-row: 1 / 3; font-size: .9rem; }
.ec-auth-legal { margin: 18px 0 0; color: #596572; font-size: .61rem; line-height: 1.55; text-align: center; }

.ec-auth-starter-card { margin-top: 35px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(12,16,21,.65); backdrop-filter: blur(10px); }
.ec-auth-starter-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); color: #778392; font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; }
.ec-auth-starter-header strong { color: #e3c35c; font-size: .66rem; }
.ec-auth-starter-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ec-auth-starter-grid article { display: grid; gap: 3px; padding: 16px; border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.ec-auth-starter-grid article:nth-child(2n) { border-right: 0; }
.ec-auth-starter-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.ec-auth-starter-grid span { color: #65717e; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.ec-auth-starter-grid strong { font-size: .79rem; }
.ec-auth-starter-grid small { color: #6d7886; font-size: .64rem; line-height: 1.45; }

.ec-auth-noscript { width: min(calc(100% - 30px), 540px); margin: 20px auto; padding: 14px; border: 1px solid rgba(240,109,114,.3); border-radius: 10px; color: #f4a0a5; background: #281216; text-align: center; }

@keyframes ecAuthSpin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .ec-auth-shell { grid-template-columns: 1fr; max-width: 650px; padding-top: 35px; }
    .ec-auth-story { min-height: auto; padding: 20px 0 0; }
    .ec-auth-story h1 { max-width: 620px; }
    .ec-auth-story-list { grid-template-columns: repeat(3, 1fr); }
    .ec-auth-story-list article { grid-template-columns: 1fr; }
    .ec-auth-security-note { display: none; }
    .ec-auth-form-panel { margin-bottom: 40px; }
}

@media (max-width: 700px) {
    .ec-auth-page { background-attachment: scroll; }
    .ec-auth-topbar,
    .ec-auth-shell { width: min(calc(100% - 22px), var(--auth-max)); }
    .ec-auth-topbar { min-height: 70px; }
    .ec-auth-brand img { width: 128px; }
    .ec-auth-back-link { font-size: 0; gap: 0; }
    .ec-auth-back-link span { font-size: 1rem; }
    .ec-auth-shell { min-height: calc(100vh - 70px); gap: 28px; padding: 25px 0 60px; }
    .ec-auth-story { padding-top: 8px; }
    .ec-auth-story h1 { margin-top: 16px; font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .ec-auth-story-content > p { font-size: .88rem; }
    .ec-auth-story-list { display: none; }
    .ec-auth-starter-card { margin-top: 26px; }
    .ec-auth-form-panel { padding: 25px 18px; border-radius: 18px; }
    .ec-auth-password-rules { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .ec-auth-starter-grid { grid-template-columns: 1fr; }
    .ec-auth-starter-grid article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
    .ec-auth-starter-grid article:last-child { border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-auth-atmosphere { display: none; }
}