:root { --auth-ink:#182137; --auth-muted:#758096; --auth-primary:#6658e8; --auth-border:#e6e8f1; }
* { box-sizing:border-box; }
.auth-body { min-width:320px; margin:0; color:var(--auth-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:#f6f7fc; }
.auth-page { position:relative; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:92px 28px 48px; overflow:hidden; background:radial-gradient(circle at 15% 20%,rgba(102,88,232,.12),transparent 30%),linear-gradient(145deg,#f8f8ff,#f3f6fb); }
.auth-page::before { content:""; position:absolute; inset:0; opacity:.42; pointer-events:none; background-image:radial-gradient(rgba(102,88,232,.16) .7px,transparent .7px); background-size:23px 23px; mask-image:linear-gradient(90deg,#000,transparent 75%); -webkit-mask-image:linear-gradient(90deg,#000,transparent 75%); }
.auth-orb { position:absolute; border-radius:50%; pointer-events:none; }.auth-orb-one { width:320px;height:320px;left:-170px;bottom:-90px;background:rgba(102,88,232,.11); }.auth-orb-two { width:240px;height:240px;right:-110px;top:80px;background:rgba(36,180,176,.08); }
.auth-brand { position:absolute; z-index:3; top:28px; left:42px; display:inline-flex; align-items:center; color:#242d43; text-decoration:none; }.auth-brand:hover { color:#242d43;text-decoration:none; }.auth-brand-mark { display:flex;align-items:center;justify-content:center;width:39px;height:39px;margin-right:10px;color:#fff;background:linear-gradient(135deg,#7668f2,#5142cd);border-radius:12px;box-shadow:0 9px 20px rgba(81,66,205,.25);font-size:12px; }.auth-brand strong,.auth-brand small { display:block; }.auth-brand strong { font-size:20px;line-height:1.05; }.auth-brand small { margin-top:3px;color:#8e96a7;font-size:7px;font-weight:800;letter-spacing:.16em; }
.auth-shell { position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,.78fr);width:100%;max-width:1080px;overflow:hidden;background:#fff;border:1px solid rgba(224,226,237,.95);border-radius:28px;box-shadow:0 32px 85px rgba(40,35,91,.14); }
.auth-showcase { position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:600px;padding:58px 54px 38px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#7163eb 0%,#5142cb 100%); }
.auth-showcase::before { content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#fff .8px,transparent .8px);background-size:21px 21px; }.auth-showcase::after { content:"";position:absolute;width:360px;height:360px;right:-180px;bottom:-180px;border:60px solid rgba(255,255,255,.08);border-radius:50%; }
.showcase-content,.showcase-trust { position:relative;z-index:1; }.showcase-label { display:inline-flex;align-items:center;gap:9px;padding:8px 14px;margin-bottom:30px;color:rgba(255,255,255,.86);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:12px;font-weight:700; }.showcase-label i { width:7px;height:7px;background:#62deb0;border-radius:50%;box-shadow:0 0 0 4px rgba(98,222,176,.13); }
.auth-showcase h1 { margin:0 0 21px;font-size:42px;font-weight:900;line-height:1.2;letter-spacing:-.04em; }.auth-showcase h1 span { color:#d9d4ff; }.auth-showcase > .showcase-content > p { max-width:440px;margin:0;color:rgba(255,255,255,.73);font-size:15px;line-height:1.85; }
.showcase-flow { display:flex;align-items:center;gap:10px;margin-top:48px; }.showcase-flow > div { display:flex;flex-direction:column;align-items:center;justify-content:center;width:105px;height:92px;color:#5144c1;background:#fff;border-radius:17px;box-shadow:0 14px 30px rgba(29,20,99,.18); }.showcase-flow > div i { margin-bottom:8px;font-size:23px; }.showcase-flow > div span { font-size:11px;font-weight:800; }.showcase-flow .flow-result { color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);box-shadow:none; }.flow-plus,.flow-arrow { color:rgba(255,255,255,.58); }
.showcase-trust { display:flex;gap:23px;padding-top:25px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);font-size:11px; }.showcase-trust i { margin-right:5px;color:#80e0bd; }
.register-benefits { display:grid;gap:14px;margin-top:38px; }.register-benefits > div { display:flex;align-items:center;padding:15px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:15px; }.register-benefits > div > span { display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:13px;color:#fff;background:rgba(255,255,255,.12);border-radius:11px; }.register-benefits p,.register-benefits strong,.register-benefits small { display:block;margin:0; }.register-benefits strong { margin-bottom:3px;color:#fff;font-size:13px; }.register-benefits small { color:rgba(255,255,255,.62);font-size:10px; }
.auth-form-panel { display:flex;flex-direction:column;justify-content:center;padding:50px 52px; }.auth-form-header { margin-bottom:30px; }.form-eyebrow { display:block;margin-bottom:7px;color:var(--auth-primary);font-size:10px;font-weight:900;letter-spacing:.16em; }.auth-form-header h2 { margin:0 0 9px;color:#222b40;font-size:30px;font-weight:900;letter-spacing:-.03em; }.auth-form-header p { margin:0;color:#8b93a4;font-size:13px; }
.auth-field { margin-bottom:19px; }.auth-field label { margin:0 0 8px;color:#424c62;font-size:12px;font-weight:700; }.field-label-row { display:flex;align-items:center;justify-content:space-between; }.field-label-row a { margin-bottom:8px;color:var(--auth-primary);font-size:11px;font-weight:600;text-decoration:none; }
.auth-input-wrap { position:relative;flex:1; }.auth-input-wrap > i { position:absolute;z-index:1;top:50%;left:15px;color:#a3aabb;font-size:14px;transform:translateY(-50%); }.auth-input-wrap input { width:100%;height:49px;padding:0 45px 0 42px;color:#2d364b;background:#f8f9fc;border:1px solid #e5e7ef;border-radius:13px;outline:none;font-size:13px;transition:.22s ease; }.auth-input-wrap input::placeholder { color:#adb3bf; }.auth-input-wrap input:focus { background:#fff;border-color:rgba(102,88,232,.55);box-shadow:0 0 0 4px rgba(102,88,232,.08); }
.password-toggle { position:absolute;top:50%;right:8px;width:34px;height:34px;padding:0;color:#9da5b5;background:transparent;border:0;border-radius:9px;outline:none!important;transform:translateY(-50%); }.password-toggle:hover { color:var(--auth-primary);background:#efedff; }
.auth-checkbox { display:flex;align-items:center;width:max-content;margin:2px 0 22px;color:#747e91;font-size:11px;cursor:pointer; }.auth-checkbox input { position:absolute;opacity:0; }.auth-checkbox span { position:relative;width:17px;height:17px;margin-right:8px;background:#fff;border:1px solid #d6d9e3;border-radius:5px; }.auth-checkbox input:checked + span { background:var(--auth-primary);border-color:var(--auth-primary); }.auth-checkbox input:checked + span::after { content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); }
.auth-submit { display:flex;align-items:center;justify-content:center;width:100%;height:51px;color:#fff;background:linear-gradient(135deg,#7062ec,#5142ce);border:0;border-radius:13px;box-shadow:0 12px 26px rgba(81,66,206,.23);font-size:14px;font-weight:800;transition:.25s ease; }.auth-submit i { margin-left:10px;font-size:11px;transition:transform .2s; }.auth-submit:hover:not(:disabled) { box-shadow:0 16px 30px rgba(81,66,206,.3);transform:translateY(-2px); }.auth-submit:hover i { transform:translateX(3px); }.auth-submit:disabled { opacity:.7;cursor:wait; }
.auth-switch { margin-top:22px;color:#8790a2;text-align:center;font-size:12px; }.auth-switch a { margin-left:4px;color:var(--auth-primary);font-weight:800;text-decoration:none; }.back-home { display:block;margin-top:22px;color:#9ba2b1;text-align:center;font-size:11px;text-decoration:none; }.back-home:hover { color:var(--auth-primary);text-decoration:none; }.back-home i { margin-right:4px; }
.auth-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.auth-code-row { display:flex;gap:10px; }.send-code-button { flex:0 0 112px;height:49px;color:var(--auth-primary);background:#efedff;border:1px solid #e1ddff;border-radius:13px;font-size:11px;font-weight:800;transition:.2s; }.send-code-button:hover:not(:disabled) { color:#fff;background:var(--auth-primary); }.send-code-button:disabled { color:#9da4b2;background:#f0f1f5;border-color:#e5e6eb;cursor:not-allowed; }.password-hint { display:flex;align-items:flex-start;padding:11px 13px;margin:-2px 0 17px;color:#7d8495;background:#fffaf0;border:1px solid #f3e8d2;border-radius:11px;font-size:10px;line-height:1.6; }.password-hint i { margin:2px 7px 0 0;color:#c1872f; }.auth-shell-register { max-width:1160px;grid-template-columns:minmax(0,.86fr) minmax(550px,1.14fr); }.auth-shell-register .auth-showcase { min-height:680px; }.register-form-panel { padding:42px 46px; }
.toast-container { position:fixed;z-index:9999;top:20px;right:20px; }.auth-toast { min-width:290px;overflow:hidden;background:#fff;border:0;border-radius:12px;box-shadow:0 16px 38px rgba(30,26,69,.18); }.auth-toast .toast-header { padding:10px 13px;color:#fff;border:0; }.auth-toast .toast-header > i { margin-right:9px; }.toast-success { background:#35a978; }.toast-error { background:#da5660; }.toast-warning { background:#d99a38; }.toast-info { background:var(--auth-primary); }.auth-toast .close { color:#fff;opacity:.8; }.auth-toast .toast-body { padding:13px 15px;color:#5c6578;font-size:12px; }
@media (max-width:991px) { .auth-page { align-items:flex-start;padding-top:105px; }.auth-shell,.auth-shell-register { grid-template-columns:1fr;max-width:600px; }.auth-showcase { display:none; }.auth-form-panel,.register-form-panel { padding:45px 48px; }.auth-shell-register .auth-showcase { min-height:0; } }
@media (max-width:575px) { .auth-page { padding:86px 14px 28px; }.auth-brand { top:22px;left:22px; }.auth-shell { border-radius:21px; }.auth-form-panel,.register-form-panel { padding:32px 22px; }.auth-form-grid { grid-template-columns:1fr;gap:0; }.auth-form-header h2 { font-size:27px; }.auth-code-row { align-items:stretch; }.send-code-button { flex-basis:100px; }.toast-container { left:14px;right:14px; }.auth-toast { width:100%;min-width:0; }.back-home { margin-top:17px; } }