:root { --ink:#17213d; --muted:#627083; --teal:#0b7f79; --teal-light:#76ddce; --cream:#fff8e6; --paper:#fffdf8; --gold:#f5cf66; --line:#263149; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#d9f2f4; }
button,input { font:inherit; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(430px,.9fr) minmax(520px,1.1fr); }
.auth-story { position:relative; min-height:100vh; display:flex; flex-direction:column; padding:clamp(30px,5vw,74px); overflow:hidden; background-color:#d9f2f4; background-image:radial-gradient(rgba(23,33,61,.08) .8px,transparent .8px); background-size:12px 12px; border-right:3px solid var(--line); }
.auth-story::before { content:""; position:absolute; width:390px; height:390px; right:-150px; top:26%; border:70px solid rgba(118,221,206,.55); border-radius:50%; }
.auth-story::after { content:"12345.67"; position:absolute; right:-20px; bottom:7%; color:rgba(23,33,61,.055); font:900 clamp(55px,8vw,120px)/1 "SFMono-Regular",Consolas,monospace; transform:rotate(-8deg); }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:max-content; color:inherit; text-decoration:none; }
.brand-mark { width:58px; height:58px; display:grid; place-items:center; border:3px solid var(--line); border-radius:16px 16px 23px 16px; background:var(--teal-light); box-shadow:5px 6px 0 rgba(23,33,61,.13); font:900 34px Georgia,serif; transform:rotate(-3deg); }
.brand b,.brand small { display:block; }.brand b { font-size:16px; }.brand small { margin-top:4px; color:var(--teal); font:800 9px/1.2 Consolas,monospace; letter-spacing:.16em; }
.story-copy { position:relative; z-index:1; margin:auto 0 38px; max-width:570px; }
.eyebrow { margin:0 0 12px; color:var(--teal); font:900 11px/1.2 Consolas,monospace; letter-spacing:.16em; }
.story-copy h1 { margin:0 0 24px; font:900 clamp(45px,6vw,82px)/1.06 STKaiti,KaiTi,serif; letter-spacing:.02em; }
.story-copy>p:last-child { max-width:490px; margin:0; color:var(--muted); font-size:16px; line-height:1.8; }
.receipt { position:relative; z-index:1; width:min(390px,100%); display:grid; grid-template-columns:1fr auto; gap:10px 20px; padding:18px 22px; border:2px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:6px 7px 0 rgba(23,33,61,.13); font-size:12px; transform:rotate(-1deg); }
.receipt b { font:900 25px Consolas,monospace; color:var(--teal); }.receipt hr { grid-column:1/-1; width:100%; margin:0; border:0; border-top:1px dashed #aeb6c1; }.receipt span:nth-last-child(-n+2) { grid-column:1/-1; color:var(--muted); }
.steps { position:relative; z-index:1; width:min(430px,100%); margin:0; padding:0; list-style:none; }
.steps li { display:flex; align-items:center; gap:16px; padding:13px 0; border-bottom:1px dashed rgba(23,33,61,.3); font-weight:800; }.steps b { color:var(--teal); font:900 18px Consolas,monospace; }
.story-foot { position:relative; z-index:1; margin:26px 0 0; color:var(--muted); font-size:11px; }.story-foot i { color:var(--teal); margin:0 5px; }
.auth-panel { min-height:100vh; display:grid; place-items:center; padding:40px; background:var(--paper); }
.auth-card { width:min(440px,100%); }.register-card { width:min(540px,100%); }
.auth-card h2 { margin:0 0 9px; font:900 32px/1.2 STKaiti,KaiTi,serif; }.lead { margin:0 0 24px; color:var(--muted); font-size:13px; }
.message { display:none; margin:0 0 18px; padding:11px 13px; border:1px solid #db716e; border-radius:9px; background:#fff0ef; color:#a02e2b; font-size:12px; font-weight:700; line-height:1.5; }.message:not(:empty) { display:block; }
form { display:flex; flex-direction:column; } label { margin:15px 0 7px; font-size:12px; font-weight:800; }
input { width:100%; height:50px; padding:0 14px; border:2px solid #b6bec7; border-radius:9px; background:#fff; color:var(--ink); outline:none; transition:border-color .15s,box-shadow .15s; }
input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(11,127,121,.13); }.code-input { font-family:Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field-row>div { display:flex; flex-direction:column; }
.primary { min-height:56px; display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding:0 20px; border:3px solid var(--line); border-radius:12px; background:var(--teal-light); color:var(--ink); box-shadow:5px 6px 0 rgba(23,33,61,.16); font-weight:900; cursor:pointer; transition:transform .15s,box-shadow .15s; }.primary:hover { transform:translateY(-2px); box-shadow:7px 8px 0 rgba(23,33,61,.15); }.primary:active { transform:translate(3px,4px); box-shadow:2px 2px 0 rgba(23,33,61,.16); }.primary span { font-size:22px; }
.switch { margin:24px 0 0; text-align:center; color:var(--muted); font-size:13px; }.switch a { margin-left:5px; color:var(--teal); font-weight:900; }.security-note { margin:22px 0 0; padding-top:18px; border-top:1px dashed #c9ced5; color:#7c8796; font-size:10px; line-height:1.6; text-align:center; }
@media (max-width:850px) { .auth-shell { display:block; }.auth-story { min-height:auto; padding:24px 22px 30px; border-right:0; border-bottom:3px solid var(--line); }.story-copy { margin:50px 0 24px; }.story-copy h1 { font-size:44px; }.receipt,.steps,.story-foot { display:none; }.auth-panel { min-height:auto; padding:42px 22px 60px; }.auth-card { width:min(540px,100%); } }
@media (max-width:520px) { .brand b { font-size:14px; }.brand-mark { width:50px;height:50px; }.field-row { grid-template-columns:1fr; gap:0; }.story-copy h1 { font-size:38px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }