:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --line:rgba(255,255,255,.17); --text:#ededed; --muted:#929292; --accent:#cacaca; --up:#24b89a; --down:#ee6965; }
* { box-sizing: border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body { position:relative; overflow-x:hidden; background:#101010; color:var(--text); }
body::before { content:""; position:fixed; z-index:0; inset:0; background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.11),transparent 28%),radial-gradient(circle at 16% 82%,rgba(255,255,255,.055),transparent 25%),linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px); background-position:center,center,0 0,0 0; background-size:auto,auto,38px 38px,38px 38px; pointer-events:none; }
.login-market-backdrop { position:fixed; z-index:1; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .9s ease; mask-image:linear-gradient(180deg,transparent 1%,#000 13%,#000 87%,transparent 99%); -webkit-mask-image:linear-gradient(180deg,transparent 1%,#000 13%,#000 87%,transparent 99%); }
.login-market-backdrop.is-ready { opacity:.48; }
.login-market-backdrop::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(16,16,16,.94) 0 15%,rgba(16,16,16,.62) 27%,rgba(16,16,16,.08) 62%,transparent 78%); }
.login-market-lanes { min-height:100%; display:grid; grid-template-rows:repeat(4,1fr); align-content:center; gap:16px; padding:6vh 0; }
.login-market-lane { min-width:0; display:grid; align-content:center; gap:9px; opacity:.78; }
.login-market-lane:nth-child(even) { direction:rtl; }
.login-market-lane:nth-child(even) > * { direction:ltr; }
.login-market-heading { margin:0 clamp(22px,5vw,88px); color:rgba(255,255,255,.55); font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
.login-market-viewport { overflow:hidden; padding-block:5px; mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.login-market-track { --ticker-duration:70s; width:max-content; display:flex; gap:12px; animation:login-market-drift var(--ticker-duration) linear infinite; will-change:transform; }
.login-market-lane:nth-child(even) .login-market-track { animation-direction:reverse; }
.login-market-sequence { flex:none; display:flex; gap:12px; padding-right:12px; }
.login-market-card { width:clamp(190px,12.5vw,260px); min-height:78px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 16px; padding:14px 16px; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.028)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 38px rgba(0,0,0,.27); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.login-market-card strong { min-width:0; overflow:hidden; color:rgba(255,255,255,.84); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.login-market-card b { color:#f3f3f3; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.login-market-card small { min-width:0; overflow:hidden; color:rgba(255,255,255,.44); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.login-market-change { justify-self:end; color:rgba(255,255,255,.44); font-size:10px; font-weight:750; font-variant-numeric:tabular-nums; }
.login-market-change.up { color:var(--up); }
.login-market-change.down { color:var(--down); }
.login-market-price.quote-tick-up { animation:login-price-tick-up 1.15s cubic-bezier(.2,.72,.2,1); }
.login-market-price.quote-tick-down { animation:login-price-tick-down 1.15s cubic-bezier(.2,.72,.2,1); }
@keyframes login-market-drift { to { transform:translate3d(calc(-50% - 6px),0,0); } }
@keyframes login-price-tick-up { 0% { color:#f3f3f3; } 20%,58% { color:var(--up); } 100% { color:#f3f3f3; } }
@keyframes login-price-tick-down { 0% { color:#f3f3f3; } 20%,58% { color:var(--down); } 100% { color:#f3f3f3; } }
.login-shell { position:relative; z-index:2; min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card { position:relative; isolation:isolate; width:min(410px, 100%); padding:36px 34px 28px; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.047) 42%,rgba(255,255,255,.065) 72%,rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.31),inset 1px 0 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.36),0 30px 90px rgba(0,0,0,.58); backdrop-filter:blur(28px) saturate(1.05); -webkit-backdrop-filter:blur(28px) saturate(1.05); }
.login-card::before { content:""; position:absolute; z-index:-1; top:1px; right:20px; left:20px; height:118px; border-radius:26px 26px 55% 55%; background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.035) 52%,transparent); pointer-events:none; }
.brand-lockup { display:grid; justify-items:center; gap:13px; text-align:center; }
.brand-mark { height:38px; width:auto; max-width:82%; display:block; }
.brand-lockup small { color:#a0a0a0; letter-spacing:.17em; font-size:11px; }
form { margin-top:31px; }
label { display:block; margin-bottom:8px; color:#c0c0c0; font-size:11px; font-weight:650; }
.password-field { display:grid; grid-template-columns:1fr 44px; height:46px; border:1px solid rgba(255,255,255,.17); border-radius:13px; overflow:hidden; background:rgba(10,10,10,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.055); }
.login-step[hidden] { display:none; }
.totp-field { height:46px; border:1px solid rgba(255,255,255,.17); border-radius:13px; overflow:hidden; background:rgba(10,10,10,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.055); }
.totp-field input { width:100%; height:100%; text-align:center; font-size:18px; font-weight:750; letter-spacing:.16em; font-variant-numeric:tabular-nums; }
.totp-field:focus-within { border-color:rgba(255,255,255,.46); box-shadow:0 0 0 3px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08); }
.login-help { display:block; margin-top:8px; color:#888; font-size:10px; line-height:1.45; }
.login-text-button { margin:9px 0 0; padding:0; border:0; background:transparent; color:#b3b3b3; font:600 10px inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.login-text-button:hover { color:#fff; }
input { min-width:0; border:0; outline:0; padding:0 12px; background:transparent; color:#f0f0f0; font:14px inherit; }
.password-field:focus-within { border-color:rgba(255,255,255,.46); box-shadow:0 0 0 3px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08); }
.password-field button { border:0; border-left:1px solid rgba(255,255,255,.11); background:transparent; color:#9a9a9a; cursor:pointer; }
.password-field button:hover { color:#fff; background:rgba(255,255,255,.07); }
.password-field svg, .submit-button svg, .passkey-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.error-message { margin-top:10px; color:#ff817d; font-size:11px; }
.submit-button,.passkey-button { width:100%; height:45px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(255,255,255,.22); border-radius:13px; color:#fff; font-weight:750; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 9px 22px rgba(0,0,0,.19); transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.submit-button { margin-top:16px; background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.075)); }
.submit-button:hover,.passkey-button:hover { border-color:rgba(255,255,255,.4); background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.1)); }
.submit-button:active,.passkey-button:active { transform:translateY(1px); }
.submit-button:disabled { opacity:.6; cursor:wait; }
.passkey-enroll-option { margin:14px 2px 0; display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.passkey-enroll-option[hidden] { display:none; }
.passkey-enroll-option input { width:16px; height:16px; margin:1px 0 0; padding:0; accent-color:#dedede; }
.passkey-enroll-option span { display:grid; gap:3px; }
.passkey-enroll-option strong { color:#d9d9d9; font-size:11px; }
.passkey-enroll-option small { color:#888; font-size:10px; line-height:1.35; }
.passkey-section { margin-top:20px; display:grid; gap:13px; }
.passkey-section[hidden] { display:none; }
.passkey-section > span { display:flex; align-items:center; gap:10px; color:#7d7d7d; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.passkey-section > span::before,.passkey-section > span::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.12); }
.passkey-button { margin:0; background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045)); }
.passkey-button:disabled { opacity:.58; cursor:wait; }
footer { margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:center; color:#808080; font-size:11px; }
footer span { display:flex; align-items:center; gap:5px; }
footer i { width:6px; height:6px; border-radius:50%; background:#8b8b8b; transition:background .25s ease,box-shadow .25s ease; }
footer i.is-secure { background:#25d2a5; box-shadow:0 0 7px rgba(37,210,165,.82),0 0 15px rgba(37,210,165,.32); animation:tls-secure-glow 2.4s ease-in-out infinite; }
@keyframes tls-secure-glow { 50% { box-shadow:0 0 9px rgba(37,210,165,1),0 0 20px rgba(37,210,165,.45); } }
@media (max-width:520px) {
  .login-shell { padding:18px; }
  .login-card { width:min(100%,390px); padding:31px 22px 24px; border-radius:26px; }
  .brand-mark { height:35px; }
  .login-market-lanes { gap:8px; padding:4vh 0; }
  .login-market-heading { margin-inline:18px; }
  .login-market-card { width:172px; min-height:68px; padding:11px 13px; }
}
@media (prefers-reduced-motion:reduce) {
  .submit-button,.passkey-button,.login-market-backdrop { transition:none; }
  .login-market-track,.login-market-price.quote-tick-up,.login-market-price.quote-tick-down,footer i.is-secure { animation:none; }
}