.auth-body { margin:0; background:#f5f8fb; color:#26495e; font-family:'Manrope',sans-serif; }
.auth-body *,.account-page * { box-sizing:border-box; }
.auth-body a,.account-page a { text-decoration:none; }
.auth-top { max-width:1280px; margin:auto; padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.auth-logo { display:flex; align-items:center; gap:.6rem; font-size:1.8rem; font-weight:800; letter-spacing:-.07em; color:#0788ba; }.auth-logo small { background:#0788ba; color:#fff; padding:.35rem .5rem; border-radius:20px; font-size:.65rem; letter-spacing:.03em; }
.auth-top > a:last-child { display:flex; gap:.6rem; align-items:center; color:#7e96a5; font-size:.75rem; }
.auth-shell { display:grid; grid-template-columns:1fr 1fr; max-width:1100px; margin:1rem auto 2rem; border-radius:25px; overflow:hidden; background:#fff; border:1px solid #e3ecf2; box-shadow:0 20px 60px #153e5610; }
.auth-story { position:relative; overflow:hidden; padding:3rem; background:radial-gradient(ellipse at 95% 50%,#14799877,transparent 65%),#073a53; color:#fff; display:flex; flex-direction:column; }
.auth-story::after { content:''; position:absolute; width:380px; height:380px; border:1px solid #ffffff0d; border-radius:50%; right:-180px; top:120px; pointer-events:none; }
.auth-kicker { font-size:.56rem; font-weight:800; letter-spacing:.13em; color:#84d6ed; display:flex; gap:.6rem; align-items:center; }
.auth-story h2 { margin:2.5rem 0 0; font-size:3.3rem; line-height:1.08; letter-spacing:-.06em; color:#fff; font-weight:800; }.auth-story h2 span { color:#9ce7fa; }
.auth-orbit { position:relative; width:210px; height:210px; margin:2.8rem auto; border:1px solid #ffffff1c; border-radius:50%; display:grid; place-items:center; }.auth-orbit::before { content:''; position:absolute; inset:24px; border:1px dashed #ffffff24; border-radius:50%; }.auth-orbit > span { display:grid; place-items:center; width:96px; height:96px; border-radius:27px; background:linear-gradient(145deg,#ffdb99,#efb861); color:#224b61; font-size:2.3rem; transform:rotate(-8deg); box-shadow:0 15px 35px #001f3640; }.auth-orbit > i { position:absolute; width:45px; height:45px; display:grid; place-items:center; border-radius:14px; background:#2b6076; border:1px solid #ffffff18; color:#ade2ef; }.auth-orbit > i:nth-child(2) { left:-8px; top:30px; }.auth-orbit > i:nth-child(3) { right:-10px; top:57px; color:#ffd7a1; }.auth-orbit > i:nth-child(4) { bottom:-7px; left:55px; }
.auth-benefits { display:grid; gap:1rem; margin-top:auto; color:#a9c7d6; font-size:.72rem; }.auth-benefits span { display:flex; gap:.7rem; align-items:center; }.auth-benefits i { color:#82d0e5; width:17px; }
.auth-card { padding:3rem 3.3rem; min-width:0; }
.auth-card-icon { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#eaf6fc; color:#0788ba; font-size:1.1rem; }.auth-role { margin-left:.8rem; color:#7897a8; font-size:.55rem; letter-spacing:.14em; font-weight:800; }
.auth-card h1 { color:#173f55; font-size:2rem; font-weight:800; letter-spacing:-.055em; line-height:1.1; margin:1.3rem 0 .8rem; }.auth-subtitle { font-size:.77rem; color:#8ba0ae; line-height:1.8; margin:0 0 1.7rem; }
.auth-form { display:grid; gap:1.1rem; }.auth-field { min-width:0; }.auth-field label { display:block; font-size:.74rem; font-weight:700; color:#55778b; margin-bottom:.55rem; }.auth-field label small { float:right; font-size:.59rem; font-weight:500; color:#9aadb9; }.auth-field > div { position:relative; display:flex; align-items:center; }.auth-field > div > i { position:absolute; left:.9rem; color:#9ab7c7; font-size:.8rem; pointer-events:none; }
.auth-field input,.auth-field textarea { min-width:0; width:100%; min-height:48px; border:1px solid #dce7ef; border-radius:11px; padding:.85rem 1rem; color:#315a70; background:#fbfcfe; font:inherit; font-size:.8rem; }.auth-field > div > input { padding-left:2.5rem; padding-right:2.8rem; }.auth-field textarea { resize:vertical; }.auth-field input::placeholder,.auth-field textarea::placeholder { color:#b0c0ca; }.auth-field input:focus,.auth-field textarea:focus { outline:2px solid #b3e1f3; outline-offset:2px; border-color:#72bad5; }.auth-field > div > button { position:absolute; right:.25rem; border:0; background:transparent; color:#8cabbc; min-width:40px; min-height:42px; cursor:pointer; }.auth-field > small { display:block; font-size:.62rem; color:#94a7b4; line-height:1.7; margin-top:.5rem; }
.auth-forgot { justify-self:end; color:#0788ba; font-size:.7rem; margin-top:-.3rem; }
.auth-submit { display:flex; align-items:center; justify-content:center; gap:.8rem; min-height:48px; padding:.85rem 1.2rem; border:0; border-radius:11px; background:#0788ba; color:#fff; font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; transition:background .2s; }.auth-submit:hover { background:#076d96; color:#fff; }.auth-submit:disabled { opacity:.6; cursor:wait; }
.auth-switch { font-size:.7rem; color:#91a5b3; text-align:center; margin:1.5rem 0; line-height:1.8; }.auth-switch a { color:#0788ba; font-weight:700; }.auth-footnote { display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.6rem; color:#a1b3bf; padding-top:1.2rem; border-top:1px solid #edf2f5; }
.auth-notice,.auth-errors { display:flex; gap:.7rem; background:#edf8f3; border:1px solid #d9eee5; padding:1rem; border-radius:11px; font-size:.72rem; line-height:1.8; color:#447e6a; margin-bottom:1.3rem; }.auth-errors { display:block; color:#a65a66; background:#fff5f5; border-color:#f0dcdf; }.auth-errors ul { margin:.4rem 0 0; padding-left:1.2rem; }.auth-errors strong { font-weight:700; }.auth-notice > i { padding-top:.25rem; }
.auth-expired { text-align:center; padding:1rem 0; }.auth-expired > i { font-size:2rem; color:#96b9ca; }.auth-expired h2 { font-size:1.1rem; color:#3d6479; margin-top:1rem; }.auth-expired p { font-size:.75rem; color:#8ca4b2; line-height:1.8; }.auth-expired .auth-submit { margin-top:1.5rem; }
.auth-bottom { max-width:1100px; margin:0 auto 2rem; padding-inline:1rem; display:flex; justify-content:space-between; color:#a0b1bc; font-size:.65rem; }.auth-bottom a { color:#7c9dae; }
.auth-body a:focus-visible,.auth-body button:focus-visible,.account-page button:focus-visible { outline:3px solid #e9b55c; outline-offset:3px; }
.account-page { padding:.7rem 0 2rem; }.account-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-bottom:2rem; }.account-heading > div > span { color:#0788ba; font-size:.6rem; font-weight:800; letter-spacing:.15em; }.account-heading h1 { font-size:clamp(2rem,3.5vw,3rem); font-weight:800; color:#173f55; letter-spacing:-.055em; margin:.6rem 0; }.account-heading p { color:#8ba0ae; font-size:.8rem; margin:0; }.account-heading > a { font-size:.75rem; color:#5b8ba4; display:flex; gap:.6rem; align-items:center; }
.account-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:1.5rem; align-items:start; }.account-nav { background:#fff; border:1px solid #e1eaf1; border-radius:17px; padding:1.2rem; }.account-identity { display:flex; align-items:center; gap:.7rem; padding:.2rem 0 1.3rem; border-bottom:1px solid #edf2f5; margin-bottom:.8rem; }.account-identity > span { display:grid; place-items:center; flex:0 0 42px; height:42px; background:#e5f3fb; color:#0788ba; border-radius:13px; font-size:1.2rem; font-weight:800; }.account-identity > div { min-width:0; }.account-identity strong { display:block; font-size:.8rem; color:#426b82; }.account-identity small { display:block; overflow-wrap:anywhere; font-size:.63rem; color:#9bafb9; margin-top:.25rem; }
.account-nav > a { display:flex; align-items:center; gap:.7rem; padding:.85rem .7rem; border-radius:10px; color:#7e98a8; font-size:.75rem; margin-bottom:.3rem; }.account-nav > a > i:last-child { margin-left:auto; font-size:.5rem; }.account-nav [aria-current] { background:#eaf6fc; color:#0788ba; font-weight:700; }.account-nav > form { margin-top:1rem; padding-top:1rem; border-top:1px solid #edf2f5; }.account-nav button { border:0; background:transparent; color:#a17a80; display:flex; align-items:center; gap:.6rem; padding:.7rem; font:inherit; font-size:.73rem; cursor:pointer; }
.account-content { min-width:0; display:grid; gap:1rem; }.account-panel { border:1px solid #e1eaf1; background:#fff; border-radius:18px; padding:1.6rem; }.account-panel > header { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; }.account-panel-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; background:#eaf6fc; color:#0788ba; }.account-panel h2 { font-size:1.05rem; color:#30566c; font-weight:800; margin:0; }.account-panel header p { color:#98abb8; font-size:.68rem; line-height:1.7; margin:.3rem 0 0; }.account-panel header > small { margin-left:auto; color:#88a5b5; font-size:.65rem; white-space:nowrap; }.account-form { max-width:650px; }.account-form .auth-submit { justify-self:start; min-width:180px; margin-top:.3rem; }.account-password-guide { color:#94a8b6; font-size:.65rem; }.account-danger { justify-self:start; padding:.8rem 1rem; min-height:44px; border:1px solid #ebd4d8; border-radius:10px; color:#ad6571; background:#fff6f7; font:inherit; font-size:.73rem; cursor:pointer; }
.account-empty { text-align:center; padding:2rem 1rem; }.account-empty > i { font-size:2.5rem; color:#a2c7d9; }.account-empty h3 { font-size:1.3rem; color:#426d83; margin:1.4rem 0 .6rem; letter-spacing:-.03em; font-weight:800; }.account-empty p { color:#9aafb9; font-size:.75rem; }.account-empty .auth-submit { width:max-content; margin:1.4rem auto 0; }.account-orders article { display:flex; align-items:center; gap:1rem; padding:1.1rem 0; border-top:1px solid #edf2f5; }.account-orders article > div { flex:1; min-width:0; }.account-orders strong { color:#557e94; font-size:.78rem; }.account-orders small { display:block; font-size:.65rem; color:#a2b3be; margin-top:.35rem; }.account-orders article > span { border-radius:8px; background:#eff6fa; color:#6b98b0; padding:.4rem .6rem; font-size:.65rem; }
.account-tip { display:flex; align-items:center; gap:1rem; padding:1.4rem; border-radius:16px; background:#e8f4f1; }.account-tip > i { font-size:1.6rem; color:#6ca692; }.account-tip strong { color:#4f8774; font-size:.8rem; }.account-tip p { color:#8bac9f; font-size:.68rem; margin:.3rem 0 0; }.account-tip a { color:#4a8c76; font-size:.7rem; margin-left:auto; white-space:nowrap; }
@media(max-width:900px) { .auth-shell { margin:1rem 1.5rem 2rem; }.auth-story { padding:2.2rem; }.auth-story h2 { font-size:2.8rem; }.auth-card { padding:2.4rem 2rem; }.account-layout { grid-template-columns:220px minmax(0,1fr); gap:1rem; }.account-panel { padding:1.2rem; } }
@media(max-width:650px) { .auth-top { padding:1.2rem; }.auth-logo { font-size:1.5rem; }.auth-top > a:last-child { font-size:.65rem; }.auth-shell { display:block; max-width:480px; margin:1rem auto 1.5rem; border-radius:20px; width:calc(100% - 2rem); }.auth-story { display:none; }.auth-card { padding:2rem 1.5rem; }.auth-card h1 { font-size:1.8rem; }.auth-bottom { margin-inline:1rem; }.account-layout { grid-template-columns:1fr; }.account-nav { display:flex; flex-wrap:wrap; gap:.2rem; padding:.7rem; }.account-identity { flex-basis:100%; margin-bottom:.3rem; padding:.3rem .4rem .8rem; }.account-nav > a { flex:1; justify-content:center; padding:.7rem .4rem; font-size:.65rem; gap:.4rem; white-space:nowrap; }.account-nav > a > i:last-child { display:none; }.account-nav > form { margin:0; padding:0; border:0; flex-basis:100%; }.account-nav button { font-size:.65rem; padding:.5rem; }.account-heading { flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }.account-heading h1 { font-size:2rem; }.account-tip { flex-wrap:wrap; }.account-tip a { margin-left:2.6rem; }.account-orders article { flex-wrap:wrap; }.account-orders article > div { flex-basis:100%; }.account-panel header > small { display:none; } }
@media(prefers-reduced-motion:reduce) { .auth-body *,.account-page * { transition:none!important; animation:none!important; } }