/* The sign-in / sign-up page of id.atas.net, in the visual language of atas.net (the
   "bamboo" theme): Arimo, the #654cf4 blue, the #4e4bf7→#7a4ef4 gradient button, the
   dark #090b17 / #181d2f surfaces of the site's sign-up popup. No inline styles or
   images — the page is served under a default-src 'self' content security policy. */

@font-face {
    font-family: "ArimoVariable";
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/Arimo-VariableFont_wght.woff2") format("woff2");
}

:root {
    --auth-white: #fff;
    --auth-blue: #654cf4;
    --auth-blue-soft: rgba(101, 76, 244, .14);
    --auth-gradient: linear-gradient(90deg, #4e4bf7, #7a4ef4);
    --auth-bg: #090b17;
    --auth-bg-rgb: 9, 11, 23;
    --auth-glow-top: rgba(101, 76, 244, .28);
    --auth-glow-bottom: rgba(122, 78, 244, .16);
    --auth-card: #181d2f;
    --auth-card-border: rgba(130, 132, 153, .16);
    --auth-text: #f0f0f5;
    --auth-text-muted: #9a9db1;
    --auth-text-dim: rgba(130, 132, 153, .8);
    --auth-border: rgba(130, 132, 153, .28);
    --auth-border-hover: rgba(130, 132, 153, .5);
    --auth-error: #e92d38;
    --auth-error-soft: rgba(233, 45, 56, .12);
    --auth-radius: 12px;
    --auth-radius-small: 6px;
    --auth-transition: .25s ease;
    --auth-font: "ArimoVariable", Arimo, "Helvetica Neue", Arial, sans-serif;
}

/* A white-label brand (BrandOptions, <html data-brand>) repaints the page through the same
   variables and nothing else. Live Trader: the #6849fa violet of its cabinet and logo on
   neutral near-black surfaces instead of the navy of atas.net, a flat button instead of the
   site's gradient, the rounder corners of its pill-shaped logo. */
:root[data-brand="livetrader"] {
    --auth-blue: #7a60f3;
    --auth-blue-soft: rgba(104, 73, 250, .16);
    --auth-gradient: linear-gradient(90deg, #6849fa, #6849fa);
    --auth-bg: #0b0a17;
    --auth-bg-rgb: 11, 10, 23;
    --auth-glow-top: rgba(104, 73, 250, .22);
    --auth-glow-bottom: rgba(104, 73, 250, .10);
    --auth-card: #15141f;
    --auth-card-border: rgba(156, 162, 175, .16);
    --auth-text-muted: #9ca2af;
    --auth-border: rgba(156, 162, 175, .28);
    --auth-border-hover: rgba(156, 162, 175, .5);
    --auth-radius: 18px;
    --auth-radius-small: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.auth-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--auth-font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.5;
    color: var(--auth-text);
    background-color: var(--auth-bg);
    background-image:
        radial-gradient(60% 45% at 50% -5%, var(--auth-glow-top), transparent 70%),
        radial-gradient(40% 35% at 85% 105%, var(--auth-glow-bottom), transparent 70%);
    background-repeat: no-repeat;
}

a { color: var(--auth-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input { font: inherit; letter-spacing: inherit; color: inherit; }

/* ---------- page skeleton ---------- */

/* the site's header: a dark bar, the logo on the left, the language switcher on the right */
.auth-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(var(--auth-bg-rgb), .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(130, 132, 153, .12);
}
.auth-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    height: 64px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

.auth-logo { display: block; line-height: 0; }
.auth-logo img { width: 133px; height: 27px; }

.auth-lang { position: relative; }
.auth-lang summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--auth-text);
    user-select: none;
    transition: background-color var(--auth-transition);
}
.auth-lang summary::-webkit-details-marker { display: none; }
.auth-lang summary:hover { background: rgba(130, 132, 153, .12); }
.auth-lang summary:focus-visible { outline: 2px solid var(--auth-blue); outline-offset: 2px; }
.auth-lang-chevron { transition: transform var(--auth-transition); color: var(--auth-text-muted); }
.auth-lang[open] .auth-lang-chevron { transform: rotate(180deg); }
.auth-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 10px;
    background: var(--auth-card);
    border: 1px solid var(--auth-card-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.auth-lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--auth-text);
    white-space: nowrap;
}
.auth-lang-menu a:hover { background: rgba(130, 132, 153, .12); text-decoration: none; }
.auth-lang-menu a.active { color: var(--auth-blue); font-weight: 500; }
.auth-lang-menu a.active::after {
    content: "";
    width: 10px;
    height: 8px;
    margin-left: 12px;
    background: currentColor;
    clip-path: polygon(11% 45%, 0 62%, 38% 100%, 100% 18%, 87% 5%, 36% 71%);
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 65px);
    padding: clamp(28px, 7vh, 72px) 16px 24px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 44px) clamp(24px, 4vw, 36px);
    border-radius: var(--auth-radius);
    background-color: var(--auth-card);
    border: 1px solid var(--auth-card-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.auth-footer {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 28px;
    font-size: 13px;
    color: var(--auth-text-dim);
}
.auth-footer a { color: var(--auth-text-dim); }
.auth-footer a:hover { color: var(--auth-text); }

/* ---------- tabs ---------- */

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 26px;
    border-radius: 8px;
    background: rgba(var(--auth-bg-rgb), .55);
}
.auth-tab {
    padding: 9px 12px;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    color: var(--auth-text-muted);
    transition: color var(--auth-transition), background-color var(--auth-transition);
}
.auth-tab:hover { color: var(--auth-text); text-decoration: none; }
.auth-tab.active { color: var(--auth-white); background: var(--auth-gradient); }

/* ---------- headings ---------- */

.auth-title {
    margin: 0 0 6px;
    font-size: clamp(22px, 3vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-align: center;
}
.auth-sub {
    margin: 0 0 22px;
    text-align: center;
    color: var(--auth-text-muted);
    font-size: 14px;
}
.auth-title + .auth-error,
.auth-title + .auth-form,
.auth-title + .auth-consent { margin-top: 22px; }

/* ---------- messages ---------- */

.auth-error {
    padding: 11px 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: var(--auth-error-soft);
    border: 1px solid rgba(233, 45, 56, .35);
    font-size: 13.5px;
    line-height: 1.45;
}
.auth-error a { text-decoration: underline; }

/* ---------- fields ---------- */

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.auth-label {
    font-size: 13px;
    color: var(--auth-text-muted);
}
.auth-req { color: var(--auth-blue); }

.auth-input-wrap {
    position: relative;
    display: flex;
    border: 2px solid var(--auth-border);
    border-radius: var(--auth-radius-small);
    background: rgba(var(--auth-bg-rgb), .35);
    transition: border-color var(--auth-transition);
}
.auth-input-wrap:hover { border-color: var(--auth-border-hover); }
.auth-input-wrap:focus-within { border-color: var(--auth-blue); }
.auth-input-wrap.invalid { border-color: var(--auth-error); }

.auth-input-wrap input {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    outline: 0;
    background: none;
    color: var(--auth-text);
    font-size: 15px;
}
.auth-input-wrap input::placeholder { color: var(--auth-text-dim); }
.auth-input-wrap input:-webkit-autofill,
.auth-input-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px var(--auth-card) inset;
    caret-color: var(--auth-text);
}

.auth-password input { padding-right: 46px; }
.auth-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--auth-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}
.auth-eye:hover { color: var(--auth-text); background: rgba(130, 132, 153, .12); }
.auth-eye .eye-closed { display: none; }
.auth-eye.showed .eye-open { display: none; }
.auth-eye.showed .eye-closed { display: block; }

.auth-field-hint { font-size: 12.5px; color: var(--auth-text-dim); }
.auth-field-error { font-size: 12.5px; color: var(--auth-error); }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -2px;
    font-size: 13.5px;
}
.auth-link { color: var(--auth-blue); font-size: 13.5px; }
.auth-link-muted { color: var(--auth-text-muted); }
.auth-link-muted:hover { color: var(--auth-text); }

/* ---------- checkboxes (drawn in CSS: no image requests under the strict CSP) ---------- */

.auth-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    line-height: 1.45;
}
.auth-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.auth-check-box {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--auth-blue);
    border-radius: 5px;
    display: inline-grid;
    place-content: center;
    transition: background-color var(--auth-transition), border-color var(--auth-transition), box-shadow var(--auth-transition);
}
.auth-check-box::before {
    content: "";
    width: 12px;
    height: 9px;
    transform: scale(0);
    background: var(--auth-white);
    clip-path: polygon(11% 45%, 0 62%, 38% 100%, 100% 18%, 87% 5%, 36% 71%);
    transition: transform .15s ease;
}
.auth-check input:checked + .auth-check-box { background: var(--auth-blue); }
.auth-check input:checked + .auth-check-box::before { transform: scale(1); }
.auth-check input:focus-visible + .auth-check-box { box-shadow: 0 0 0 3px var(--auth-blue-soft); }
.auth-check a { color: var(--auth-blue); }
.auth-check-small { font-size: 13.5px; }
.auth-check-small .auth-check-box { width: 18px; height: 18px; border-radius: 4px; }
.auth-check-small .auth-check-box::before { width: 10px; height: 8px; }

.auth-consent { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.auth-consent .auth-link-muted { font-size: 13px; align-self: flex-start; }

/* a submit without the terms box: the row shakes once and the box turns red */
.auth-check.attention { animation: auth-shake .4s ease; }
.auth-check.attention .auth-check-box {
    border-color: var(--auth-error);
    box-shadow: 0 0 0 3px var(--auth-error-soft);
}
.auth-check-hint {
    margin: -6px 0 0 34px;
    font-size: 12.5px;
    color: var(--auth-error);
}
.auth-check-hint[hidden] { display: none; }

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ---------- buttons ---------- */

.auth-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--auth-radius-small);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: opacity var(--auth-transition), border-color var(--auth-transition), background-color var(--auth-transition);
}
.auth-btn:hover { text-decoration: none; }

.auth-btn-primary {
    margin-top: 6px;
    color: var(--auth-white);
    background: var(--auth-gradient);
}
.auth-btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--auth-transition);
}
.auth-btn-primary:hover::before { opacity: 1; }
.auth-btn-primary .auth-btn-text,
.auth-btn-primary .auth-btn-arrow { position: relative; }
.auth-btn-arrow { transition: transform var(--auth-transition); }
.auth-btn-primary:hover .auth-btn-arrow { transform: translateX(3px); }
.auth-btn[disabled], .auth-btn.loading { opacity: .55; pointer-events: none; }

.auth-btn-google {
    color: var(--auth-text);
    background: transparent;
    border: 2px solid var(--auth-border);
    padding: 11px 20px;
}
.auth-btn-google:hover { border-color: var(--auth-blue); background: var(--auth-blue-soft); }

.auth-google-form { margin: 0; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--auth-text-dim);
    font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-border);
}

.auth-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--auth-text-dim);
    text-align: center;
}

.auth-switch {
    margin: 22px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--auth-text-muted);
}
.auth-switch a { font-weight: 500; }

/* ---------- notices (registered / reset sent) ---------- */

.auth-notice { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: var(--auth-white);
    background: var(--auth-gradient);
}
.auth-notice-text {
    margin: 10px 0 24px;
    color: var(--auth-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
}
.auth-notice-text strong { color: var(--auth-text); font-weight: 500; }

/* ---------- small screens ---------- */

@media (max-width: 480px) {
    .auth-page { padding-top: 20px; }
    .auth-lang-name { display: none; }
    .auth-card { border-radius: 10px; }
    .auth-row { flex-wrap: wrap; }
    .auth-input-wrap input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-check.attention { animation: none; }
    .auth-btn-arrow { transition: none; }
}