/* Scoped Trading Center login and register design. Keep auth forms and APIs intact. */
#auth.auth-layout{isolation:isolate;position:relative;min-height:100vh;grid-template-columns:minmax(0,1fr) minmax(410px,.83fr);background:#051018 url('/assets/tc-auth-market-v2.webp') center/cover no-repeat!important}
#auth.auth-layout::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#020b14b0 0%,#03111b58 54%,#020b14a3 100%);pointer-events:none}
#auth .auth-story{position:relative;isolation:isolate;min-height:100vh;padding:145px clamp(34px,5.6vw,95px) 80px!important;display:flex;flex-direction:column;justify-content:center;background:none!important;overflow:visible}
#auth .auth-story::after{display:none!important;content:none!important}
#auth .auth-story .brand{position:absolute!important;top:34px!important;left:clamp(34px,5.6vw,95px)!important;z-index:2;display:flex!important;align-items:center;gap:13px;width:auto!important;height:auto!important;background:none!important;color:#f5f5ee;font:700 clamp(1rem,1.65vw,1.5rem)/1.05 Georgia,serif!important;letter-spacing:.01em;white-space:nowrap}
#auth .auth-story .brand img{display:block!important;width:54px!important;height:54px!important;object-fit:contain!important;border-radius:12px!important}
#auth .auth-story .brand span{color:#4add9a!important}
#auth .auth-story .brand small{display:block;position:static!important;margin-top:5px;color:#aebdc4;font:500 .55rem/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:.16em}
#auth .auth-story h1{position:relative;z-index:1;max-width:650px;margin:0 0 26px!important;color:#fff;font:700 clamp(3.2rem,5.3vw,6rem)/.98 Georgia,serif!important;letter-spacing:-.045em!important;text-shadow:0 3px 24px #000b}
#auth .auth-story h1 span{display:inline;color:#62e5a0!important;margin:0}
#auth .auth-story>p{position:relative;z-index:1;max-width:490px;margin:0;color:#e0e7e8;font-size:1.1rem;line-height:1.7;text-shadow:0 2px 14px #000}
#auth .auth-side{display:grid;align-content:center;padding:82px clamp(26px,4vw,75px);background:none!important}
#auth .auth-card{width:100%;max-width:560px;margin:auto;padding:clamp(28px,3.2vw,52px);border:1px solid #9ac1d183;border-radius:28px;background:linear-gradient(145deg,#152939ed,#07141ef5 62%,#102b39e8)!important;box-shadow:0 25px 90px #000c,0 0 38px #4da4c63b;backdrop-filter:blur(16px)}
#auth .auth-card h2{margin:2px 0 8px;color:#fff;font:700 clamp(1.85rem,2.7vw,2.6rem)/1.15 Georgia,serif;text-align:left}
#auth .auth-card>p{color:#b8c7d1;text-align:left;margin:0}
#auth .tabs{margin:26px 0 18px;background:#07131b;border-color:#567081;gap:5px}
#auth .tabs a{color:#b7cbd2}
#auth .tabs a[aria-current]{background:linear-gradient(110deg,#64eaa7,#11935e)!important;color:#111820!important;box-shadow:0 5px 17px #0005}
#auth .auth-card label{color:#e4ebee;margin-top:17px}
#auth .auth-card input{background:#172633e8;border-color:#496171;color:#fff}
#auth .auth-card input:focus{border-color:#64eaa7;box-shadow:0 0 0 3px #63e5a52b}
#auth .auth-card input::placeholder{color:#92a8b5}
#auth .auth-card .primary{background:linear-gradient(110deg,#68e9a9,#17a86b)!important;color:#0d1721!important;font-weight:800;box-shadow:0 8px 25px #0007}
#auth .auth-card .feedback{color:#a8f4ca!important}
#auth .auth-card small{color:#abc1c9}
@media(max-width:900px){#auth.auth-layout{grid-template-columns:1fr;background-position:60% center!important}#auth .auth-story{min-height:300px;padding:100px 26px 25px!important}#auth .auth-story .brand{left:26px!important;top:24px!important}#auth .auth-story h1{font-size:clamp(2.5rem,8vw,4.5rem)!important;max-width:590px}#auth .auth-side{padding:24px 18px 52px}#auth .auth-card{max-width:650px}}
@media(max-width:520px){#auth .auth-story{min-height:295px}#auth .auth-story .brand{font-size:1.15rem!important}#auth .auth-story .brand img{width:43px!important;height:43px!important}#auth .auth-story h1{font-size:2.55rem!important;margin-bottom:12px!important}#auth .auth-story>p{font-size:.95rem;line-height:1.5}#auth .auth-card{padding:25px 20px;border-radius:20px}#auth .auth-card h2{font-size:1.9rem}}

#auth .auth-story .auth-kicker{position:relative;z-index:1;max-width:none;margin:0 0 22px;color:#72edab;font-size:.72rem;font-weight:700;letter-spacing:.25em;text-shadow:0 2px 12px #000}
@media(max-width:520px){#auth .auth-story .auth-kicker{font-size:.57rem;letter-spacing:.13em;margin-bottom:14px}}

/* Full supplied TC wordmark variant; overrides legacy forced icon sizing. */
#auth .auth-story .brand{width:min(380px,74vw)!important;height:auto!important;top:26px!important;gap:0;font-size:0!important;line-height:0!important}
#auth .auth-story .brand img{width:100%!important;height:auto!important;max-height:120px!important;object-fit:contain!important;object-position:left center!important;border-radius:0!important}
#auth .auth-story h1{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif!important;font-weight:800!important;letter-spacing:-.052em!important;line-height:1.02!important}
#auth .auth-card h2{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif!important;font-weight:750!important}
@media(max-width:900px){#auth .auth-story .brand{top:17px!important;width:min(310px,75vw)!important}}
@media(max-width:520px){#auth .auth-story .brand{width:min(260px,72vw)!important}#auth .auth-story .brand img{width:100%!important;height:auto!important}#auth .auth-story h1{font-size:2.3rem!important}}

/* Mobile reading layer over the detailed market artwork. */
@media(max-width:900px){#auth .auth-story{background:linear-gradient(180deg,#03111bea 0%,#071d2be8 78%,#0a2230ef 100%)!important;box-shadow:0 12px 35px #0006}#auth .auth-story h1,#auth .auth-story>p,#auth .auth-story .auth-kicker{text-shadow:0 2px 12px #000c}}
@media(max-width:520px){#auth .auth-story{background:linear-gradient(180deg,#03101bf5,#082333f1)!important;padding-bottom:34px!important}#auth .auth-story>p{color:#f1f7f8!important}}
/* v5: on mobile the market image remains continuous behind heading and form. */
@media(max-width:900px){#auth.auth-layout::before{background:linear-gradient(90deg,#031019d9,#031019aa)!important}#auth .auth-story{background:transparent!important;box-shadow:none!important}#auth .auth-story .auth-kicker{display:none!important}#auth .auth-story h1{margin-top:8px!important}}
@media(max-width:520px){#auth.auth-layout::before{background:linear-gradient(90deg,#031019dc,#031019aa)!important}#auth .auth-story{min-height:265px;padding-top:88px!important;padding-bottom:20px!important}#auth .auth-story h1,#auth .auth-story>p{text-shadow:0 2px 14px #000e}}
