/* ==========================================================================
   Trade4U — "Terminal" · sign-in, register and password pages
   --------------------------------------------------------------------------
   Visual design only (no markup / PHP / JS changes). Same language as the member area:
   deep navy, hairline borders, square corners, blue→cyan gradient.

   Layout: the photograph (its URL can be changed in the admin) fills the whole screen under a
   navy wash. One centred column: the BOT Trading logo on top; below it ONE frosted-glass panel (backdrop
   blur) holding the heading, the paragraph, an etched divider and the form (first field to button);
   the link ("Create an account" …) underneath, outside the glass.
   The logo is drawn by the shared BOT TRADING block in app.css (robot tile + wordmark); the picture in
   the markup is kept for screen readers only.

   Loaded only on the auth pages (the admin sign-in keeps its own inline styles; nothing below
   touches <body> or <html> unless the page contains .ct-login-wrapper).
   Fonts: Space Grotesk (display) · IBM Plex Sans (text) · IBM Plex Mono (labels).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --primary-color: #3d7bff;
    --primary-hover: #6ea2ff;
    --bg-dark: #05080f;
    --card-bg: #0a111e;
    --input-bg: rgba(4, 8, 16, .55);
    --input-border: rgba(160, 188, 245, .28);
    --text-main: #e7ecf7;
    --text-muted: #a8b5cf;
    --error-color: #ff8aa0;
    --success-color: #3ee6ad;
    --glass-border: rgba(160, 188, 245, .26);

    --tm-blue: #3d7bff;
    --tm-blue-hi: #6ea2ff;
    --tm-cyan: #22d3ee;
    --tm-line: rgba(160, 188, 245, .16);
    --tm-line-hi: rgba(160, 188, 245, .30);
    --tm-grad: linear-gradient(135deg, #2f6bff 0%, #1ea7ff 55%, #21d4f2 100%);
    --tm-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tm-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--tm-body);
    line-height: 1.45;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

html:has(.ct-login-wrapper) { background: #05080f; scrollbar-color: #2a3a5a #05080f; scrollbar-width: thin; }
html body:has(.ct-login-wrapper) { background: transparent; }
html:has(.ct-login-wrapper) ::selection { background: rgba(61, 123, 255, .45); color: #fff; }


/* ── Stage: the photograph fills the screen, the form is centred ─────────── */
.ct-login-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 84px 20px 48px;   /* the top gap clears the "secure system" bar */
    background: #05080f;
    overflow: hidden;
}

/* the photograph, toned to monochrome so every picture ends up in the same blue family;
   it stays put while a long form scrolls (the admin can swap the URL, only the toning is set here) */
.ct-login-wrapper::before {
    content: '';
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2000') no-repeat center center;
    background-size: cover;
    filter: grayscale(1) contrast(1.15) brightness(.82);
}
/* navy wash, blue light from the top right, cyan from the bottom left, and a very faint grid */
.ct-login-wrapper::after {
    content: '';
    position: fixed;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(140, 180, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(140, 180, 255, .045) 1px, transparent 1px) 0 0 / 56px 56px,
        radial-gradient(900px 560px at 88% -6%, rgba(47, 107, 255, .42), transparent 65%),
        radial-gradient(800px 560px at 6% 106%, rgba(34, 211, 238, .22), transparent 65%),
        linear-gradient(180deg, rgba(5, 9, 20, .70) 0%, rgba(8, 20, 50, .62) 50%, rgba(5, 9, 20, .82) 100%);
}

/* the left-hand headline panel is not part of this layout (the script still updates its text, it just stays hidden) */
.ct-login-visual { display: none; }


/* ── The glass panel ───────────────────────────────────────────────────── */
.ct-login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 480px;
}
/* behind the column: a soft blue light (something for the glass to blur) under a dark scrim (keeps the text outside the glass readable on a busy photo) */
.ct-login-container::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -90px -130px;
    background:
        radial-gradient(closest-side, rgba(3, 7, 16, .52) 0%, rgba(3, 7, 16, .30) 58%, transparent 100%),
        radial-gradient(closest-side, rgba(47, 107, 255, .34), rgba(34, 211, 238, .09) 62%, transparent 100%);
    pointer-events: none;
}

/* ── The card ──────────────────────────────────────────────────────────────
   The markup stacks  .ct-login-header (logo · h1 · p)  →  form  →  footer link.
   Wanted here: the logo OUTSIDE the glass · heading, paragraph, divider and form INSIDE it · the link OUTSIDE below.
   Done with a grid, without touching the markup: the header's own box is dissolved (display: contents), so the logo,
   the heading and the paragraph become rows of the card's grid, and the glass is the card's ::before, stretched over
   rows 2–5 behind heading, paragraph and form. A row nobody uses collapses to nothing, so the reset-link page
   (a notice and a button instead of a form) fits the same frame.
   No opacity fade on the card: the script fades the cards when switching between sign-in and register, and an
   ancestor with opacity < 1 would take the blur off the glass for as long as the fade runs. */
.ct-login-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    color: var(--text-main);
    color-scheme: dark;
    opacity: 1 !important;
    animation: tmRise .45s ease-out;
}
@keyframes tmRise {
    from { transform: translateY(12px); }
    to   { transform: translateY(0); }
}
.ct-login-header { display: contents; }

/* row 1 — the BOT Trading logo (drawn by the shared block in app.css; only its size and place are set here) */
.ct-logo {
    --bt-tile: 56px;
    --bt-text: 32px;
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    display: flex;
    margin: 0 0 28px;
}

/* rows 2–5 — the glass */
.ct-login-card::before {
    content: '';
    grid-row: 2 / 6;
    grid-column: 1;
    border: 1px solid var(--glass-border);
    border-radius: 0;
    background:
        linear-gradient(90deg, #3d7bff 0%, #22d3ee 38%, rgba(34, 211, 238, 0) 100%) top left / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(48, 78, 138, .36) 0%, rgba(12, 22, 46, .52) 55%, rgba(8, 15, 32, .62) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        0 40px 90px -30px rgba(0, 0, 0, .85);
}

/* Everything that sits ON the glass is positioned (position: relative). A plain grid item is painted BEFORE the glass layer
   (which, with its backdrop-filter, is a stacking context), so the glass would blur the text sitting under it. */

/* row 2 — heading */
.ct-login-header h1 {
    position: relative;
    grid-row: 2;
    grid-column: 1;
    margin: 0;
    padding: 38px 32px 0;
    text-align: center;
    font-family: var(--tm-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #fff;
}

/* row 3 — paragraph, closed by the divider */
.ct-login-header p {
    position: relative;
    grid-row: 3;
    grid-column: 1;
    margin: 0;
    padding: 12px 32px 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: #c3cee4;
}
.ct-login-header p span { color: #8fb7ff !important; font-weight: 600; }

/* the divider: an embossed rule — three 1px bands, a bright top edge, a soft body and a dark underside (light from above),
   all fading out towards the ends */
.ct-login-header p::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 28px;
    background:
        linear-gradient(90deg, rgba(205, 225, 255, 0), rgba(205, 225, 255, .55) 16%, rgba(205, 225, 255, .55) 84%, rgba(205, 225, 255, 0)) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(110, 150, 225, 0), rgba(110, 150, 225, .22) 16%, rgba(110, 150, 225, .22) 84%, rgba(110, 150, 225, 0)) 0 1px / 100% 1px no-repeat,
        linear-gradient(90deg, rgba(2, 6, 16, 0), rgba(2, 6, 16, .85) 16%, rgba(2, 6, 16, .85) 84%, rgba(2, 6, 16, 0)) 0 2px / 100% 1px no-repeat;
}
/* … with a small gradient diamond set into the middle of it */
.ct-login-card::after {
    content: '';
    grid-row: 3;
    grid-column: 1;
    justify-self: center;
    align-self: end;
    width: 9px;
    height: 9px;
    margin-bottom: -3px;   /* centres the diamond on the 3px rule, which is the last thing in the paragraph */
    transform: rotate(45deg);
    background: linear-gradient(135deg, #2f6bff, #21d4f2);
    box-shadow: 0 0 0 3px rgba(14, 26, 54, .55), 0 0 14px rgba(34, 211, 238, .55);
    pointer-events: none;
}

/* row 4 — the form (or, on the reset-link page, the notice) */
.ct-login-card > .ct-form {
    grid-row: 4;
    grid-column: 1;
    padding: 28px 32px 32px;
}
.ct-login-card > .ct-message {
    position: relative;
    grid-row: 4;
    grid-column: 1;
    margin: 28px 32px 0;
}
/* row 5 — only when a second block sits inside the glass (the reset-link page's button) */
.ct-login-card > .ct-login-footer:not(:last-child) {
    position: relative;
    grid-row: 5;
    grid-column: 1;
    margin: 20px 32px 32px;
    text-shadow: none;
}
/* row 6 — the link under the glass ("Create an account", "Sign In" …), straight on the photo */
.ct-login-card > .ct-login-footer:last-child {
    grid-row: 6;
    grid-column: 1;
}


/* ── Form ──────────────────────────────────────────────────────────────── */
.ct-form { position: relative; }

.ct-form-group { margin-bottom: 18px; }

.ct-form-group label {
    display: block;
    margin-bottom: 9px;
    font: 500 11px/1.3 var(--tm-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ct-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-input-wrapper i {
    position: absolute;
    left: 16px;
    color: #6f7d9b;
    font-size: 14px;
    pointer-events: none;
    transition: color .16s ease;
}
.ct-input-wrapper:focus-within i { color: var(--tm-blue-hi); }

.ct-input-wrapper input {
    width: 100%;
    height: 52px;
    padding: 0 52px 0 46px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0;
    color: #fff;
    font-family: var(--tm-body);
    font-size: 15px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ct-input-wrapper input::placeholder { color: #6b7893; }
.ct-input-wrapper input:hover { border-color: rgba(160, 188, 245, .5); }
.ct-input-wrapper input:focus {
    outline: none;
    background: rgba(4, 8, 16, .75);
    border-color: var(--tm-blue);
    box-shadow: 0 0 0 3px rgba(61, 123, 255, .22);
}

/* browser autofill keeps the dark field */
.ct-input-wrapper input:-webkit-autofill,
.ct-input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    box-shadow: 0 0 0 1000px #0b1426 inset;
    border-color: var(--input-border);
}

.ct-toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #8190ad;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}
.ct-toggle-password i { position: static; pointer-events: none; color: inherit; }
.ct-toggle-password:hover { color: #fff; background: rgba(61, 123, 255, .18); }

.ct-form-utils {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 13.5px;
}

.ct-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-muted);
}
.ct-checkbox input {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    accent-color: var(--tm-blue);
}

.ct-forgot-link {
    color: var(--tm-blue-hi);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(110, 162, 255, .4);
    transition: color .16s ease, border-color .16s ease;
}
.ct-forgot-link:hover { color: #fff; border-color: #fff; }

/* captcha helper (its own small <style> lives in inc/helpers.php) */
html body .ct-captcha-img {
    border-radius: 0;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
}
html body .ct-captcha-refresh {
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: transparent;
    border: 1px solid rgba(61, 123, 255, .6);
    color: var(--tm-blue-hi);
}
html body .ct-captcha-refresh:hover { background: rgba(61, 123, 255, .18); border-color: var(--tm-blue); }


/* ── Buttons: gradient, square ─────────────────────────────────────────── */
.ct-login-wrapper .ct-btn {
    position: relative;
    display: flex !important;   /* the "invalid link" button is an <a> with an inline display:block */
    text-decoration: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    font: 600 15px/1 var(--tm-body);
    letter-spacing: .03em;
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.ct-login-wrapper .ct-btn-primary {
    background: var(--tm-grad);
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(47, 107, 255, .8);
}
.ct-login-wrapper .ct-btn-primary:hover {
    background: var(--tm-grad);
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px rgba(47, 107, 255, .9);
}
.ct-login-wrapper .ct-btn-primary:active { transform: none; filter: brightness(.96); }
.ct-login-wrapper .ct-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.btn-loader { display: none; font-size: 18px; }
.ct-btn.loading .btn-text { opacity: 0; }
.ct-btn.loading .btn-loader { display: block; position: absolute; }


/* ── Messages ──────────────────────────────────────────────────────────── */
.ct-message {
    display: none;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.ct-message.error   { display: block; background: rgba(255, 92, 122, .12); color: #ffa3b4; border: 1px solid rgba(255, 92, 122, .42); border-left: 3px solid #ff5c7a; }
.ct-message.success { display: block; background: rgba(25, 201, 142, .12); color: #5eeab4; border: 1px solid rgba(25, 201, 142, .42); border-left: 3px solid #19c98e; }

/* the link under the form ("Create an account", "Sign In" …) sits outside the glass, straight on the photo */
.ct-login-footer {
    margin-top: 22px;
    font-size: 14px;
    text-align: center;
    color: #d3dcf0;
    text-shadow: 0 0 10px rgba(0, 0, 0, .8), 0 0 26px rgba(0, 0, 0, .7);
}
.ct-login-footer a {
    color: #9ec4ff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(158, 196, 255, .5);
    transition: color .16s ease, border-color .16s ease;
}
.ct-login-footer a:hover { color: #fff; border-color: #fff; }
.ct-login-footer a.ct-btn { border-bottom: 0; }


/* ── "Back to Home": the last thing on the sign-in and register pages, centred under whichever card is showing ── */
.ct-back-wrap {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}
.ct-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    height: 46px;
    padding: 0 24px;
    color: #d3dcf0;
    font: 600 12.5px/1 var(--tm-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(8, 16, 34, .55);
    border: 1px solid var(--tm-line-hi);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.ct-back svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
.ct-back:hover { color: #fff; border-color: var(--tm-blue); background: rgba(61, 123, 255, .18); }
.ct-back:hover svg { transform: translateX(-4px); }
.ct-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* ── "Secure system" bar (inline-styled <div> at the top of every auth page) ── */
body > div[style*="9999"] {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding: 9px 12px !important;
    background: rgba(5, 8, 15, .62) !important;
    color: #b3bed4 !important;
    font: 500 10.5px/1.2 var(--tm-mono) !important;
    letter-spacing: .18em;
    text-align: center !important;
    border-bottom: 1px solid var(--tm-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body > div[style*="9999"]::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 12px;
    vertical-align: 1px;
    transform: rotate(45deg);
    background: #19c98e;
    box-shadow: 0 0 0 0 rgba(25, 201, 142, .6);
    animation: tmPulse 2s ease-out infinite;
}
@keyframes tmPulse {
    0%   { box-shadow: 0 0 0 0 rgba(25, 201, 142, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(25, 201, 142, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 201, 142, 0); }
}


/* nothing on these pages is rounded */
.ct-login-wrapper *, .ct-login-wrapper *::before, .ct-login-wrapper *::after { border-radius: 0 !important; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .ct-login-wrapper { align-items: flex-start; padding: 62px 14px 28px; }
    .ct-login-container::before { inset: -40px -30px; }
    .ct-logo { --bt-tile: 48px; --bt-text: 27px; margin-bottom: 22px; }
    .ct-login-header h1 { padding: 30px 20px 0; font-size: 25px; }
    .ct-login-header p { padding: 10px 20px 0; }
    .ct-login-header p::after { margin-top: 24px; }
    .ct-login-card > .ct-form { padding: 24px 20px 26px; }
    .ct-login-card > .ct-message { margin: 24px 20px 0; }
    .ct-login-card > .ct-login-footer:not(:last-child) { margin: 18px 20px 26px; }
}
@media (max-width: 350px) {
    .ct-logo { --bt-tile: 42px; --bt-text: 22px; }
    .ct-login-header h1 { font-size: 22px; }
}

@media (max-height: 640px) and (min-width: 561px) {
    .ct-login-wrapper { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-login-card, body > div[style*="9999"]::before { animation: none; }
    .ct-login-wrapper .ct-btn, .ct-input-wrapper input, .ct-back, .ct-back svg { transition: none; }
}