/* ============================================================
   Sign in / sign up / 2FA / password recovery.

   One stylesheet for all four pages. They used to carry a copy of these rules each, inline and
   slightly out of step with one another, in a palette (#080f16, #018a41, #293140) that belonged to
   none of the rest of the exchange. The tokens below are the ones the landing page and the panel
   already use, so the auth pages now read as part of the same product.

   Class names and ids are unchanged: the page scripts address .input-group, .hint, .submit-button,
   .toast and the referral/promo panels by name.
   ============================================================ */
:root {
    --auth-bg: #070B11;
    --auth-card: #11161E;
    --auth-inset: #0C121A;
    --auth-line: #1E2632;
    --auth-line-soft: rgba(255, 255, 255, .06);
    --auth-text: #EAECEF;
    --auth-muted: #858C97;
    --auth-faint: #5B6472;
    --auth-green: #18BB59;
    --auth-green-hover: #20CA63;
    --auth-green-soft: rgba(24, 187, 89, .12);
    --auth-red: #EB4536;
}

* { box-sizing: border-box; }

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    /* Vertical scrolling is deliberate. These pages used to be `overflow: hidden` on a layout
       pinned to `height: 100%`, so the sign-up card — two fields, five password rules, two
       drawers, a captcha and a consent line — was simply cut off on a laptop with no way to
       reach the button. Only the horizontal axis is still clipped, to contain the glows below. */
    overflow-x: hidden;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.v-application .error {
    background-color: transparent !important;
    border-color: var(--auth-red) !important;
}

.footer { position: relative; z-index: 100; }

/* ---------- Focused authentication header ---------- */
.auth-page { min-height: 100vh; background: var(--auth-bg); color: var(--auth-text); }
.auth-header {
    position: relative;
    z-index: 20;
    height: 76px;
    border-bottom: 1px solid var(--auth-line-soft);
    background: rgba(7, 11, 17, .84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.auth-header__inner {
    width: min(1180px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--auth-text); text-decoration: none; }
.auth-brand__mark {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(24, 187, 89, .2));
}
.auth-brand__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.auth-header__actions { display: flex; align-items: center; gap: 10px; }
.auth-header__cta {
    min-height: 40px;
    padding: 0 17px;
    border-radius: 10px;
    background: var(--auth-green);
    color: #04140A;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}
.auth-header__cta:hover { background: var(--auth-green-hover); transform: translateY(-1px); }
.auth-language { position: relative; }
.auth-language summary {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: var(--auth-card);
    color: var(--auth-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.auth-language summary::-webkit-details-marker { display: none; }
.auth-language[open] summary { border-color: var(--auth-green); color: var(--auth-text); }
.auth-language__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 190px;
    max-height: min(360px, calc(100vh - 110px));
    padding: 7px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-card);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .42);
    overflow-y: auto;
}
.auth-language__menu a {
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--auth-muted);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    text-decoration: none;
}
.auth-language__menu a:hover,
.auth-language__menu a.is-active { background: var(--auth-green-soft); color: var(--auth-green); }

/* ---------- Layout ---------- */
/* min-height rather than height: the pane grows with the card instead of being cropped to the
   viewport, which is what lets the page scroll. `overflow: hidden` then clips only the glows,
   because the container is never shorter than what is inside it. */
.split-layout {
    display: flex;
    position: relative;
    min-height: calc(100vh - 76px);
    overflow: hidden;
}

/* Two soft green pools behind the card, the same accent the landing page uses for its glow. */
.split-layout::before,
.split-layout::after {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, var(--auth-green) 0%, rgba(7, 11, 17, 0) 100%);
    filter: blur(100px);
    opacity: .1;
    pointer-events: none;
}
.split-layout::before { left: 50px; transform: translate(-50%, -50%); }
.split-layout::after { right: 50px; transform: translate(50%, 50%); z-index: 0; }

.left-pane {
    flex: 1;
    padding: 40px;
    background: var(--auth-bg);
    color: var(--auth-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.left-pane h2 { margin-bottom: 12px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.left-pane p { max-width: 420px; margin-bottom: 20px; color: var(--auth-muted); font-size: 14px; }
.left-pane img { height: auto; border-radius: 24px; box-shadow: 0 10px 20px rgba(0, 0, 0, .6); }

.right-pane {
    flex: 1;
    padding: 52px 20px 72px;
    background: var(--auth-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------- The card ---------- */
.card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 32px;
    border: 1px solid var(--auth-line);
    border-radius: 18px;
    background: var(--auth-card);
    color: var(--auth-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.card h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--auth-text);
}
.subtext {
    margin: 6px 0 24px;
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.5;
}
.subtext a { color: var(--auth-green); text-decoration: none; font-weight: 500; }
.subtext a:hover { color: var(--auth-green-hover); }

/* ---------- Fields ---------- */
.input-group { position: relative; margin-bottom: 16px; }
.input-group i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--auth-faint);
    transition: color .18s ease;
}
.input-group input {
    width: 100%;
    min-height: 50px;
    padding: 12px 44px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-inset);
    color: var(--auth-text) !important;
    font-family: inherit;
    font-size: 15px;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.input-group input::placeholder { color: var(--auth-faint); }
.input-group input:focus {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 3px var(--auth-green-soft);
}
/* Autofill paints the field in the browser's own pale blue, which is what turned the e-mail and
   password boxes white. An inset shadow is the only paint the autofill style can't override. */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-inset) inset;
    -webkit-text-fill-color: var(--auth-text);
    caret-color: var(--auth-text);
    transition: background-color 9999s ease 0s;
}
.input-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-inset) inset, 0 0 0 3px var(--auth-green-soft);
}
.input-group input:focus ~ i,
.input-group:focus-within i { color: var(--auth-green); }

.input-group.error input {
    border-color: var(--auth-red);
    box-shadow: 0 0 0 3px rgba(235, 69, 54, .12);
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
    color: var(--auth-faint);
    cursor: pointer;
    transition: color .18s ease;
}
.toggle-password:hover { color: var(--auth-text); }

.material-icons { font-size: 20px; }

/* ---------- Captcha ---------- */
/* One row at every width: the code field, then the image. The status used to be an absolutely
   placed caption inside the box, which landed on top of the image once the row wrapped on a phone;
   it is now a line of its own underneath, and says nothing until there is something to say. */
.captcha-field { margin: 16px 0 20px; }
.captcha-container {
    --captcha-progress: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-inset);
    position: relative;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.captcha-container:focus-within {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 3px var(--auth-green-soft);
}
.captcha-container input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--auth-text);
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .28em;
    outline: 0;
}
.captcha-container input::placeholder {
    color: var(--auth-faint);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
}
.captcha-container img {
    flex: 0 0 auto;
    display: block;
    width: 116px;
    height: 43px;
    object-fit: cover;
    border-radius: 8px;
    /* Captchas are rendered on white; the frame keeps that from glaring against the dark card. */
    border: 1px solid var(--auth-line);
    transition: opacity .18s ease, transform .3s ease, filter .22s ease;
}
/* Fills a fifth per digit typed, so the bar itself says how much of the code is in. */
.captcha-container::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--auth-green);
    transform: scaleX(var(--captcha-progress));
    transform-origin: left;
    transition: transform .25s ease;
}
.captcha-container.is-checking::after {
    transform: none;
    animation: captcha-progress 1s ease-in-out infinite;
}
.captcha-container.is-valid {
    border-color: var(--auth-green);
    background: rgba(24, 187, 89, .08);
    box-shadow: 0 0 0 3px var(--auth-green-soft);
}
.captcha-container.is-valid::after { transform: scaleX(1); }
.captcha-container.is-valid img { filter: saturate(.65) brightness(.8); }
.captcha-container.is-invalid {
    border-color: var(--auth-red);
    background: rgba(235, 69, 54, .06);
    animation: captcha-shake .36s ease both;
}
.captcha-container.is-invalid::after { background: var(--auth-red); }
.captcha-container img.is-refreshing { opacity: 0; transform: rotateY(70deg) scale(.9); }

.captcha-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    max-height: 0;
    margin: 0;
    padding-left: 2px;
    color: var(--auth-muted);
    font-size: 12.5px;
    line-height: 1.4;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, margin-top .2s ease, opacity .2s ease;
}
.captcha-status:not(:empty) { max-height: 24px; margin-top: 8px; opacity: 1; }
.captcha-status::before {
    font-family: 'Material Icons';
    font-size: 15px;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}
.captcha-container.is-checking + .captcha-status::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 2px solid var(--auth-line);
    border-top-color: var(--auth-green);
    border-radius: 50%;
    animation: captcha-spin .7s linear infinite;
}
.captcha-container.is-valid + .captcha-status { color: var(--auth-green); }
.captcha-container.is-valid + .captcha-status::before { content: "check_circle"; }
.captcha-container.is-invalid + .captcha-status { color: #f08a80; }
.captcha-container.is-invalid + .captcha-status::before { content: "error_outline"; }

@keyframes captcha-progress {
    0% { transform: translateX(-100%) scaleX(.35); }
    55% { transform: translateX(75%) scaleX(.55); }
    100% { transform: translateX(220%) scaleX(.25); }
}
@keyframes captcha-spin { to { transform: rotate(360deg); } }
@keyframes captcha-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* ---------- Password rules ---------- */
.password-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 11px;
}
.hint {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--auth-line);
    border-radius: 999px;
    background: var(--auth-inset);
    color: var(--auth-muted);
    font-size: 11px;
}
/* A satisfied rule disappears rather than turning green, so what is left is what is missing. */
.hint.valid { display: none; }
.hint.invalid { border-color: rgba(235, 69, 54, .35); color: #f08a80; }

/* ---------- Referral and promo drawers ---------- */
.referral-toggle,
.promo-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--auth-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .18s ease;
}
.referral-toggle:hover,
.promo-toggle:hover { color: var(--auth-text); }

.referral-panel,
.promo-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, margin-bottom .3s ease;
}
.referral-panel.open,
.promo-panel.open { max-height: 100px; margin-bottom: 16px; }

.referral-panel input,
.promo-panel input {
    width: 100%;
    min-height: 46px;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-inset);
    color: var(--auth-text);
    font-family: inherit;
    font-size: 15px;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.referral-panel input::placeholder,
.promo-panel input::placeholder { color: var(--auth-faint); }
.referral-panel input:focus,
.promo-panel input:focus {
    border-color: var(--auth-green);
    box-shadow: 0 0 0 3px var(--auth-green-soft);
}

/* ---------- Consent ---------- */
.checkbox-group {
    margin-bottom: 14px;
    color: var(--auth-muted);
    font-size: 13px;
    line-height: 1.5;
}
.checkbox-group input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: var(--auth-green);
    vertical-align: -2px;
}
.checkbox-group a { color: var(--auth-green); text-decoration: none; }
.checkbox-group a:hover { color: var(--auth-green-hover); }
.checkbox-group.is-missing { color: #f08a80; }
.checkbox-group.is-missing input { outline: 2px solid rgba(235, 69, 54, .6); outline-offset: 2px; }

.tooltip { position: relative; display: inline-block; cursor: pointer; }
.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 2;
    bottom: 125%;
    left: 0;
    width: 280px;
    padding: 12px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-inset);
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    transition: opacity .3s;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* ---------- Submit ---------- */
.submit-button {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--auth-green);
    color: #04140A;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    /* Stays dimmed and unclickable until the page's own validation adds .active. */
    opacity: .4;
    cursor: not-allowed;
    transition: background-color .18s ease, opacity .18s ease, transform .18s ease;
}
/* Sign-in and sign-up keep the button enabled while dimmed, so a click can say what is missing. */
.submit-button:not(:disabled) { cursor: pointer; }
.submit-button.active { opacity: 1; cursor: pointer; }
.submit-button.active:hover { background: var(--auth-green-hover); transform: translateY(-1px); }

/* "Back to sign in" under the recovery and phone cards, and the link-as-button that follows a
   verified phone. */
.auth-back { margin: 18px 0 0; text-align: center; font-size: 13px; }
.auth-back a { color: var(--auth-muted); text-decoration: none; }
.auth-back a:hover { color: var(--auth-text); }
a.submit-button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.auth-continue { margin-top: 16px; }
.auth-continue[hidden] { display: none; }

.auth-forgot { margin: -8px 0 14px; text-align: right; font-size: 13px; }
.auth-forgot a { color: var(--auth-green); text-decoration: none; }
.auth-forgot a:hover { color: var(--auth-green-hover); }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    z-index: 9999;
    min-width: 250px;
    max-width: 90%;
    padding: 14px 20px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    color: var(--auth-text);
    font-weight: 500;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(24, 187, 89, .4); background: #0E2A1A; }
.toast.error { border-color: rgba(235, 69, 54, .4); background: #2A1210; }
/* Bottom right on a desktop, centred along the bottom on a phone. */
@media (min-width: 769px) {
    .toast { right: 20px; bottom: 20px; }
}
@media (max-width: 768px) {
    .toast { bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); }
    .toast.show { transform: translateX(-50%) translateY(0); }
}

/* ---------- One-time code, on the 2FA page ---------- */
.v-otp-input {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    margin-right: -4px;
    margin-left: -4px;
}
.v-otp-input .v-input { margin: 0; flex: 1 0 32px; max-width: 100%; padding: 4px; }
.v-otp-input input { text-align: center; }
.v-otp-input .v-input.v-otp-input--plain fieldset { border-color: var(--auth-line); }
.theme--light.v-otp-input .v-input .v-input__control .v-input__slot,
.theme--dark.v-otp-input .v-input .v-input__control .v-input__slot { background: var(--auth-inset); }
/* The code boxes are number inputs; the spinners would sit on top of the digits. */
.v-otp-input .v-input input[type=number] { -moz-appearance: textfield; }
.v-otp-input .v-input input[type=number]::-webkit-inner-spin-button,
.v-otp-input .v-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 768px) {
    .auth-header { height: 66px; }
    .auth-header__inner { width: calc(100% - 28px); }
    .auth-brand__mark { width: 40px; height: 40px; }
    .auth-brand__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .auth-header__cta { min-height: 36px; padding-inline: 13px; }
    .auth-language summary { min-height: 36px; padding-inline: 10px; }
    .left-pane { display: none; }
    .right-pane { flex: 1 1 100%; padding: 28px 16px 52px; }
    .card { padding: 24px 20px; border-radius: 16px; }
    .card h2 { font-size: 22px; }
}

@media (max-width: 480px) {
    .auth-header__actions { gap: 6px; }
    .auth-language summary .material-icons { font-size: 17px; }
    .auth-brand__name { display: none; }
    .captcha-container { gap: 8px; padding-left: 12px; }
    .captcha-container input { letter-spacing: .2em; }
    .captcha-container img { width: 104px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .captcha-container,
    .captcha-container::after,
    .captcha-container img,
    .captcha-status { animation: none !important; transition-duration: .01ms !important; }
}

/* Cloudflare Turnstile, shown instead of the image captcha when it is configured. */
.captcha-field--turnstile .cf-turnstile { min-height: 65px; }
.captcha-field--turnstile .captcha-status:empty { display: none; }