/* Login — live-trading admin console access (NexusTrading). Ported from
   NexusTuningServer's web/static/auth/login.css (design + mechanism kept
   byte-identical; only the wordmark/kicker text and this header differ).
   No card, no container, no split: the sign-in is a quiet composition sitting
   directly on the living backdrop — wordmark, two bare underline fields, one
   restrained action, held together only by a soft feathered light-pool (no
   edges). English-only, zero narration; the moving backdrop carries the quant
   identity (show, don't tell). Every id bound by login.js is preserved.
   Pure SVG/CSS, no inline. */

.login-body {
    --lm-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --lm-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
    --lm-cyan: #22d3ee;
    --lm-cyan-deep: #06b6d4;
    --lm-teal: #2dd4bf;
    --lm-sky: #38bdf8;
    min-height: 100vh; margin: 0; position: relative;
    /* Scroll (not clip) when the composition grows tall — 2FA + human-check on. */
    overflow-x: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px; box-sizing: border-box;
    /* Body type = Inter, same as the post-login shell (app.css) — no accidental
       serif fallback. The wordmark alone opts into the serif nameplate below. */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-primary);
    /* Tone matched to the post-login shell (app.css --bg-primary #0a0a0f /
       --bg-secondary #111118): near-black ground, cyan + teal glow. */
    background:
        radial-gradient(1200px 900px at 20% 12%, rgba(6, 182, 212, 0.10), transparent 60%),
        radial-gradient(1100px 900px at 82% 88%, rgba(45, 212, 191, 0.07), transparent 62%),
        linear-gradient(155deg, #111118 0%, #0c0c12 52%, #0a0a0f 100%);
}

/* ═══ Full-page living backdrop — a whisper, never a diagram ═════════════════ */

/* Aurora — soft colour fields drifting behind everything. */
.bg-aurora {
    position: fixed; inset: -25%; z-index: 0; pointer-events: none; filter: blur(50px);
    background:
        radial-gradient(620px 620px at 26% 32%, rgba(6, 182, 212, 0.20), transparent 60%),
        radial-gradient(560px 560px at 76% 64%, rgba(45, 212, 191, 0.16), transparent 62%),
        radial-gradient(520px 520px at 58% 82%, rgba(56, 189, 248, 0.11), transparent 60%);
    animation: bg-aurora 24s ease-in-out infinite alternate;
}
@keyframes bg-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.09); }
    100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.05); }
}

/* Data-viz watermark, kept faint (identity, not decoration). */
.bg-art {
    position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%;
    pointer-events: none; opacity: 0.1; filter: blur(1px);
    -webkit-mask-image: radial-gradient(140% 130% at 50% 45%, #000 40%, transparent 86%);
            mask-image: radial-gradient(140% 130% at 50% 45%, #000 40%, transparent 86%);
}

/* Fine grid, gently drifting. */
.bg-grid {
    position: fixed; inset: -44px; z-index: 2; pointer-events: none; opacity: 0.4;
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 110% at 50% 42%, #000 26%, transparent 74%);
            mask-image: radial-gradient(120% 110% at 50% 42%, #000 26%, transparent 74%);
    animation: bg-grid 28s linear infinite;
}
@keyframes bg-grid { to { transform: translate(46px, 46px); } }

/* Vignette — strong central darkening seats the text without any box. */
.bg-vignette {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(120% 115% at 50% 50%, transparent 24%, rgba(5, 5, 9, 0.86) 100%);
}

/* Film grain (inline SVG turbulence — no external asset) for depth. */
.bg-grain {
    position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ═══ Container-less sign-in composition ════════════════════════════════════ */
.signin {
    position: relative; z-index: 10;
    width: 100%; max-width: 344px;
    display: flex; flex-direction: column; align-items: stretch;
    animation: signin-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Soft feathered light-pool — atmosphere, NOT a card (no edge, border, radius). */
.signin::before {
    content: ""; position: absolute; z-index: -1;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 190%; height: 155%;
    background: radial-gradient(58% 52% at 50% 46%, rgba(7, 8, 13, 0.72), transparent 74%);
    filter: blur(26px);
}
@keyframes signin-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Nameplate ───────────────────────────────────────────────────────────── */
.signin-head { text-align: center; margin-bottom: 46px; }
.brand-word {
    margin: 0; font-family: var(--lm-serif);
    font-size: clamp(3rem, 8vw, 4rem); font-weight: 500; line-height: 1;
    letter-spacing: 0.22em; padding-left: 0.22em;
    background: linear-gradient(180deg, #f4fbff 0%, #d2edf7 48%, #8ad8ec 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 6px 34px rgba(34, 211, 238, 0.26));
}
.brand-kicker {
    margin: 18px 0 0; font-family: var(--lm-mono);
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.4em; padding-left: 0.4em;
    text-transform: uppercase; color: rgba(148, 163, 184, 0.58);
}

/* ── Form: bare fields, no boxes ─────────────────────────────────────────── */
.login-form { display: flex; flex-direction: column; gap: 28px; }
.lf-field {
    display: flex; flex-direction: column; gap: 10px;
    font-family: var(--lm-mono); font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(148, 163, 184, 0.5);
}
.lf-field small { font-family: inherit; text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }
.lf-field[hidden] { display: none; }

/* Underline fields — a single hairline on the page, no box, no fill. */
.lf-field input, .login-captcha input {
    width: 100%; box-sizing: border-box;
    background: transparent; border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16); border-radius: 0;
    padding: 9px 1px; color: var(--text-primary); font-size: 1rem; font-family: inherit;
    letter-spacing: normal; text-transform: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.lf-field input::placeholder, .login-captcha input::placeholder {
    color: var(--text-muted); opacity: 0.42; font-family: var(--lm-mono); font-size: 0.84rem;
}
.lf-field input:focus, .login-captcha input:focus {
    outline: none; border-bottom-color: var(--lm-cyan);
    box-shadow: 0 1px 0 0 rgba(34, 211, 238, 0.9);
}
/* Chrome autofill paints a slab — hold the transparent underline look. */
.lf-field input:-webkit-autofill,
.lf-field input:-webkit-autofill:hover,
.lf-field input:-webkit-autofill:focus,
.login-captcha input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* ── Action — one restrained, on-brand button ────────────────────────────── */
.login-btn {
    position: relative; overflow: hidden; margin-top: 16px; width: 100%;
    border: none; border-radius: 10px; padding: 13px;
    font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; color: #04121a;
    background: linear-gradient(135deg, #67e8f9 0%, var(--lm-cyan-deep) 62%, #0891b2 100%);
    box-shadow: 0 14px 30px -16px rgba(6, 182, 212, 0.6);
    transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.login-btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.38) 50%, transparent 66%);
    transform: translateX(-120%); transition: transform 0.6s ease;
}
.login-btn:hover { filter: brightness(1.05); box-shadow: 0 18px 38px -16px rgba(6, 182, 212, 0.72); }
.login-btn:hover::after { transform: translateX(120%); }
.login-btn:active { transform: translateY(1px); }

.login-err {
    margin-top: 4px; color: var(--red); font-size: 0.8rem; line-height: 1.45; text-align: center;
}
.login-foot {
    margin-top: 30px; text-align: center;
    font-family: var(--lm-mono); font-size: 0.54rem; letter-spacing: 0.24em;
    text-transform: uppercase; color: rgba(148, 163, 184, 0.34);
}

/* ── CAPTCHA ─────────────────────────────────────────────────────────────── */
.login-captcha { display: flex; flex-direction: column; gap: 12px; }
.login-captcha-row { display: flex; align-items: center; gap: 10px; }
.login-captcha-img {
    height: 46px; border-radius: 8px; flex: 1 1 auto;
    border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(255, 255, 255, 0.03);
}
.login-captcha-reload {
    background: transparent; border: 1px solid rgba(148, 163, 184, 0.16); color: var(--text-muted);
    border-radius: 8px; width: 46px; height: 46px; font-size: 1.05rem; cursor: pointer; flex: 0 0 auto;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.login-captcha-reload:hover { color: var(--lm-cyan); border-color: var(--lm-cyan); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-body { padding: 36px 20px; }
    .signin { max-width: 320px; }
    .signin-head { margin-bottom: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-aurora, .bg-grid, .signin { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BG-ART · quant signal terminal — faint full-bleed watermark: volatility
   area · candles · self-drawing equity curve (same art as tuning's login).
   ══════════════════════════════════════════════════════════════════════════ */
.bg-art .vol-area { fill: url(#volFill); }
.bg-art .eq-area  { fill: url(#eqFill); }
.bg-art .eq-line {
    fill: none; stroke: var(--lm-cyan); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
    stroke-dasharray: 2400; stroke-dashoffset: 2400;
    animation: eq-draw 3.6s cubic-bezier(0.4, 0, 0.1, 1) forwards 0.6s;
}
@keyframes eq-draw { to { stroke-dashoffset: 0; } }
.bg-art .eq-dot {
    fill: var(--lm-cyan); filter: drop-shadow(0 0 9px rgba(34, 211, 238, 0.9));
    opacity: 0; animation: eq-appear 0.5s ease forwards 4s, eq-pulse 2.6s ease-in-out infinite 4.2s;
}
@keyframes eq-appear { to { opacity: 1; } }
@keyframes eq-pulse { 0%, 100% { r: 4; } 50% { r: 7; } }
.bg-art .candle.up { color: #34d399; }
.bg-art .candle.dn { color: #f87171; }
.bg-art .candle line { stroke: currentColor; stroke-width: 1.6; opacity: 0.55; }
.bg-art .candle rect { fill: currentColor; opacity: 0.34; }

@media (prefers-reduced-motion: reduce) {
    .bg-art .eq-line { animation: none; stroke-dashoffset: 0; }
    .bg-art .eq-dot  { animation: none; opacity: 1; }
}