:root{--paper:#f5f6f2;--ink:#253a32;--muted:#79877f;--green:#12854c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink);background:var(--paper)}
.login-shell{min-height:100vh;min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden;padding:110px 24px 100px;isolation:isolate}
.login-brand{position:absolute;top:36px;left:42px;z-index:2;display:flex;align-items:center;gap:16px;max-width:calc(100% - 84px)}
.login-brand .logo-full{height:34px;max-width:160px;object-fit:contain}
.login-brand span{font-size:12px;color:#6d7b73;letter-spacing:.08em;border-left:1px solid #d7dfd7;padding-left:16px}
.paper-scene{position:absolute;inset:-5%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 15% 70%,#e4ede5 0,transparent 48%),radial-gradient(ellipse at 85% 10%,#e6ece5 0,transparent 45%);perspective:1400px}
.paper-scene:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.12' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.15}
.paper-motion{position:absolute;inset:0;transform:translate(var(--paper-x,0px),var(--paper-y,0px));transition:transform 1.2s ease-out}
.paper{position:absolute;width:clamp(300px,38vw,680px);aspect-ratio:1;filter:drop-shadow(12px 34px 25px #536b5c13);animation:paper-float 25s ease-in-out infinite alternate;will-change:transform}
.paper:before,.paper:after{content:"";position:absolute;inset:0;clip-path:polygon(3% 12%,97% 38%,26% 94%);background:linear-gradient(138deg,#fffdf8 8%,#e4e8df 74%);border:1px solid #fff}
.paper:after{clip-path:polygon(3% 12%,97% 38%,47% 43%);background:linear-gradient(155deg,#fff 12%,#ccd8cd 100%);opacity:.85}
.paper-one{left:-9%;top:10%;transform:rotate(-26deg);--turn:-26deg}
.paper-two{right:-9%;bottom:0;width:clamp(390px,47vw,760px);--turn:154deg;animation-delay:-11s;animation-duration:31s}
.paper-two:before{background:linear-gradient(138deg,#e8eee4 8%,#d0ded0 74%)}
.paper-two:after{background:linear-gradient(155deg,#f5f8ef 12%,#b6cdbd 100%)}
.paper-three{width:clamp(170px,20vw,340px);right:18%;top:-8%;--turn:45deg;animation-delay:-5s;animation-duration:29s;opacity:.66}
.orbit-word{position:absolute;left:6%;bottom:11%;font-size:11px;line-height:2;letter-spacing:.2em;text-transform:uppercase;color:#8d9b90}
.login-card{width:100%;max-width:400px;padding:40px 38px 30px;background:#fffffff2;border:1px solid #fff;border-radius:20px;box-shadow:0 24px 80px #344f4010,0 1px 3px #344f4008;position:relative}
.login-card:before{content:"";position:absolute;left:38px;top:0;width:32px;height:3px;background:var(--green);border-radius:0 0 2px 2px}
.login-kicker{font-size:10px;letter-spacing:.2em;color:#7c9181;margin:0 0 20px;text-transform:uppercase}
.login-card h1{font-size:27px;letter-spacing:.04em;line-height:1.35;margin:0 0 9px;font-weight:600}
.login-intro{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 30px}
.login-field{display:block;margin-bottom:19px}.login-field span{display:block;font-size:12px;font-weight:500;margin-bottom:8px}
.login-field input{display:block;width:100%;height:46px;border:1px solid #dfe5df;background:#fbfcfa;border-radius:8px;color:var(--ink);padding:0 13px;font:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.login-field input:focus{border-color:#66a37d;box-shadow:0 0 0 3px #12854c0d;background:#fff}
.login-submit{border:0;width:100%;height:46px;margin-top:5px;border-radius:8px;background:var(--green);color:#fff;font:inherit;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:18px;transition:background .2s}
.login-submit:hover{background:#0d6d3d}.login-submit:focus-visible,.login-links a:focus-visible{outline:3px solid #6da27d;outline-offset:4px}
.login-submit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.login-links{display:flex;justify-content:space-between;gap:10px;margin-top:20px;font-size:11px;color:#8a958e;line-height:1.7}.login-links a{color:#477659;text-decoration:none}
.login-footer{position:absolute;bottom:27px;left:24px;right:24px;text-align:center;font-size:10px;letter-spacing:.06em;color:#8c998f;line-height:1.8}
.login-card .flash{font-size:12px;color:#a52b25;background:#fff1ef;border:1px solid #f0d4ce;padding:10px 12px;border-radius:7px;margin-bottom:17px;line-height:1.6;overflow-wrap:anywhere}
.login-card .flash.ok{color:#2e7146;background:#edf6ee;border-color:#d4e9d8}
.preview-note{position:fixed;right:20px;top:20px;font-size:11px;background:#fff;border:1px solid #dbe5db;border-radius:20px;padding:9px 15px;color:#657d69;z-index:3}
@keyframes paper-float{from{transform:translate3d(0,0,0) rotate(var(--turn,0deg)) rotateY(-7deg)}to{transform:translate3d(16px,-24px,0) rotate(calc(var(--turn,0deg) + 7deg)) rotateY(8deg)}}
@media(max-width:640px){.login-shell{padding:110px 22px 80px}.login-brand{left:24px;top:27px;max-width:calc(100% - 48px)}.login-brand .logo-full{height:28px;max-width:115px}.login-brand span{font-size:10px;letter-spacing:0;padding-left:10px}.login-card{padding:34px 28px 28px;max-width:370px}.login-card:before{left:28px}.paper-one{left:-22%;top:2%}.paper-two{right:-30%;bottom:-2%}.paper-three,.orbit-word{display:none}.paper-motion{transform:none!important}.paper{animation-duration:36s}.login-card h1{font-size:25px}.preview-note{top:auto;bottom:6px;right:10px;font-size:9px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){.paper{animation:none;will-change:auto;transform:rotate(var(--turn,0deg))}.paper-motion{transform:none!important;transition:none}.login-field input,.login-submit{transition:none}}