:root { --ink:#24231f; --muted:#847f76; --line:#dfdcd3; --paper:#fffefa; --accent:#655ad9; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #f5f3ee; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
.auth-layout { display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(430px, .92fr); min-height: 100vh; }
.auth-story { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 42px 58px; color: #f8f6f0; background: #24231f; }
.auth-story::before { position: absolute; top: -25%; right: -20%; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; content:""; box-shadow: 0 0 0 80px rgba(255,255,255,.018),0 0 0 170px rgba(255,255,255,.012); }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; align-self: flex-start; gap: 11px; color: #fff; font: 700 21px STKaiti, KaiTi, serif; letter-spacing: .08em; text-decoration: none; }
.brand-mark, .mobile-brand .brand-mark { display: grid; place-items:center; width:34px; height:34px; border-radius:10px 10px 10px 3px; color:#25241f; background:#f5f1e8; font:20px STKaiti,KaiTi,serif; }
.story-copy { position: relative; z-index: 2; margin-top: clamp(65px, 12vh, 125px); }
.eyebrow { color:#a8a49a; font-size:10px; font-weight:700; letter-spacing:.19em; }
.story-copy h1 { margin:17px 0 20px; font: 600 clamp(42px,5vw,67px)/1.18 STKaiti,KaiTi,"PingFang SC",serif; letter-spacing:.025em; }
.story-copy h1 em { color:#aea7ff; font-style:normal; }
.story-copy p { max-width:440px; margin:0; color:#aaa69e; font-size:14px; line-height:1.8; }
.paper-preview { position: relative; z-index:2; width:min(430px,82%); margin-top:50px; padding:21px 27px 25px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#33312c; background:#f5f2eb; box-shadow:0 28px 60px rgba(0,0,0,.25); transform:rotate(-1.5deg); }
.paper-dots { display:flex; gap:5px; margin-bottom:19px; }.paper-dots i { width:5px;height:5px;border-radius:50%;background:#d0ccc2; }
.paper-label { color:#918c82; font-size:7px; letter-spacing:.12em; }.paper-title { margin:9px 0 14px; font:700 19px STKaiti,KaiTi,serif; }
.paper-line { width:79%;height:5px;margin:7px 0;border-radius:4px;background:#dcd8cf; }.paper-line.wide{width:95%;}.paper-line.short{width:57%;}
.paper-callout { display:flex;align-items:center;gap:12px;margin-top:18px;padding:11px;border-left:2px solid var(--accent);background:#ece9f8;font-size:9px; }.paper-callout>b{color:var(--accent);font-size:18px}.paper-callout span{line-height:1.5}.paper-callout small{color:#888279;font-size:7px}
.story-foot { position:relative;z-index:2;margin:auto 0 0;color:#6f6b63;font:12px STKaiti,KaiTi,serif;letter-spacing:.15em; }
.auth-panel { display:grid;place-items:center;padding:40px;background:#f6f4ef; }
.auth-card { width:min(390px,100%); }
.mobile-brand { display:none;align-items:center;gap:10px;margin-bottom:45px; }.mobile-brand .brand-mark{color:#fff;background:var(--ink)}
.step { color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em; }
.auth-card h2 { margin:10px 0 6px;font:700 31px STKaiti,KaiTi,"PingFang SC",serif; }
.hint { margin:0 0 29px;color:#938e85;font-size:12px; }
.error { margin:-10px 0 17px;padding:10px 12px;border:1px solid #efd5d1;border-radius:8px;color:#aa473f;background:#fff3f1;font-size:11px; }
.auth-card>label { display:flex;flex-direction:column;gap:7px;margin:15px 0;color:#5c5851;font-size:11px;font-weight:650; }
.auth-card input { width:100%;height:44px;padding:0 13px;border:1px solid #dcd8cf;outline:0;border-radius:9px;background:#fff;font-size:13px;transition:.18s; }
.auth-card input:focus { border-color:#a79fe7;box-shadow:0 0 0 3px rgba(101,90,217,.09); }
.password-wrap { position:relative;display:block; }.password-wrap input{padding-right:55px}.show-password{position:absolute;top:5px;right:5px;height:34px;padding:0 9px;border:0;border-radius:6px;color:#827d74;background:transparent;font-size:10px}.show-password:hover{background:#f2f0eb}
.submit { display:flex;align-items:center;justify-content:center;gap:20px;width:100%;height:46px;margin-top:25px;border:0;border-radius:9px;color:#fff;background:var(--ink);font-size:13px;font-weight:650;box-shadow:0 8px 22px rgba(36,35,31,.15);cursor:pointer;transition:.18s; }.submit:hover{background:#11110f;transform:translateY(-1px)}.submit span{color:#bcb6ff;font-size:17px}
.security-note { display:flex;justify-content:center;gap:6px;margin:18px 0;color:#aaa59c;font-size:9px; }.security-note span{color:#4b9674}
@media(max-width:860px){.auth-layout{display:block}.auth-story{display:none}.auth-panel{min-height:100vh;padding:30px}.mobile-brand{display:flex}}
@media(max-width:460px){.auth-panel{place-items:start center;padding:28px 21px}.auth-card{margin-top:10px}.auth-card h2{font-size:28px}}