/* 左右分屏只作用于登录页；科技书本为原生CSS，表单始终独立可操作。 */
.login-shell { min-height:100dvh; padding:0; background:#f6f9fb; }
.login-workspace { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr); width:100%; min-height:100dvh; align-items:stretch; }
.login-story { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:100dvh; padding:40px clamp(28px,4.2vw,72px) 44px; overflow:hidden; color:#e6f6fc; background:radial-gradient(ellipse at 48% 43%,#174f6b75,transparent 62%),linear-gradient(145deg,#0a1c2c,#06111f); }
.login-story:before { content:""; position:absolute; width:480px; height:480px; left:50%; top:42%; transform:translate(-50%,-50%); border:1px solid #9bdcf00d; border-radius:50%; pointer-events:none; }
.login-story-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.login-story-brand { display:flex; align-items:center; gap:12px; margin:0; font-size:14px; font-weight:600; letter-spacing:.04em; }
.login-story-brand>span { display:grid; place-items:center; flex:0 0 36px; height:36px; color:#b8eeff; border:1px solid #89d7ee4a; border-radius:11px; background:#163449; box-shadow:inset 0 1px 0 #c7efff26; }
.login-motion-toggle { flex-shrink:0; min-height:44px; padding:8px 11px; border:1px solid #a1d9e333; border-radius:22px; background:transparent; color:#add4df; font:inherit; font-size:12px; white-space:nowrap; }
.login-motion-toggle:hover { color:#e3f8ff; border-color:#7bcce399; }
.login-motion-toggle:focus-visible { outline:2px solid #8de5f6; outline-offset:4px; }
.login-motion-toggle[hidden] { display:none; }
.login-story-copy { position:relative; z-index:1; margin-top:10px; }
.login-story-copy .eyebrow { margin-bottom:16px; color:#8dc9db; font-size:12px; letter-spacing:.14em; }
.login-story-copy h2 { margin:0 0 18px; color:#eefbff; font-size:clamp(27px,3.1vw,44px); font-weight:600; line-height:1.45; letter-spacing:-.025em; }
.login-story-copy>p:last-child { max-width:370px; margin:0; color:#a0bccb; font-size:14px; line-height:1.9; }
.login-book-scene { --book-angle:48deg; --book-turn:-14deg; --book-scale:.95; position:relative; width:100%; height:clamp(320px,45vh,440px); margin:10px auto 0; perspective:1200px; perspective-origin:50% 38%; pointer-events:none; }
.login-book-camera { position:absolute; left:50%; top:112px; width:360px; height:222px; transform:translateX(-50%) rotateX(var(--book-angle)) rotateZ(var(--book-turn)) scale(var(--book-scale)); transform-style:preserve-3d; }
.login-book { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.login-book-shadow { position:absolute; left:50%; bottom:15%; width:360px; height:80px; border-radius:50%; transform:translateX(-50%) rotate(-14deg); background:radial-gradient(ellipse,#56d7ff30,transparent 68%); }
.login-book-orbit { position:absolute; left:50%; top:50%; width:420px; height:240px; border:1px solid #62d5ed24; border-radius:50%; transform:translate(-50%,-35%) rotate(-15deg); }
.login-book-orbit-two { width:500px; height:290px; border-style:dashed; border-color:#57a9d016; transform:translate(-50%,-32%) rotate(12deg); }
.login-book-page { position:absolute; top:0; width:50%; height:100%; padding:25px 22px; border:1px solid #8de9f091; border-radius:5px 2px 2px 5px; background:linear-gradient(100deg,#143d53,#143447 72%,#0c2436); box-shadow:0 2px 0 #183f52,0 5px 0 #69b8c470,0 8px 0 #112b3d,0 12px 0 #79d2d14a,0 14px 24px #02091380; backface-visibility:hidden; }
.login-book-page-left { left:0; transform:translateZ(2px); }
.login-book-page-right { right:0; transform:translateZ(2px); border-radius:2px 5px 5px 2px; background:linear-gradient(90deg,#0d283a,#153b50 28%,#17455b); }
.login-book-page-title { display:block; margin-bottom:21px; color:#c6f3fb; font-size:13px; font-weight:600; letter-spacing:.05em; }
.login-book :is(.login-book-page,.login-book-leaf-face) i { display:block; height:2px; margin:11px 0; border-radius:2px; background:#69c4d16b; }
.login-book :is(.login-book-page,.login-book-leaf-face) i:nth-of-type(2) { width:72%; }
.login-book :is(.login-book-page,.login-book-leaf-face) i:nth-of-type(4) { width:86%; }
.login-book :is(.login-book-page,.login-book-leaf-face) i:last-of-type { width:52%; background:#afdeaa99; }
.login-book-page-number { position:absolute; bottom:17px; color:#6fbbc9; font-size:10px; }
.login-book-page-right .login-book-page-number { right:22px; }
.login-book-spine { position:absolute; top:0; left:calc(50% - 2px); width:4px; height:100%; background:linear-gradient(90deg,#102b42,#a9f0edb3,#142f45); transform:translateZ(4px); }
.login-book-cover,.login-book-leaf { position:absolute; left:50%; top:0; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d; }
.login-book-cover { transform:translateZ(-6px) rotateY(-176deg); }
.login-book-cover-face,.login-book-leaf-face { position:absolute; inset:0; border:1px solid #a0e5f27a; border-radius:2px 7px 7px 2px; backface-visibility:hidden; }
.login-book-cover-face { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:17px; }
.login-book-cover-front { color:#e0faff; background:linear-gradient(120deg,#153348,#1f5f79 62%,#153b59); box-shadow:inset 6px 0 10px #010f2b55,0 4px 0 #0a243b,0 6px 0 #86d9ed85; }
.login-book-cover-front:before { content:""; position:absolute; inset:12px; border:1px solid #a2e4f04d; border-radius:2px 5px 5px 2px; }
.login-book-cover-front strong { font-size:22px; font-weight:600; letter-spacing:.15em; }
.login-book-cover-front>span:last-child { font-size:10px; letter-spacing:.08em; color:#baddeb; }
.login-book-cover-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid #9ae1ef88; border-radius:9px; font-size:18px; }
.login-book-cover-back { transform:rotateY(180deg); background:linear-gradient(90deg,#16364e,#1b4a60); color:#b5dae4; font-size:13px; line-height:1.9; }
.login-book-leaf-one { transform:translateZ(9px) rotateY(-173deg); }
.login-book-leaf-two { transform:translateZ(11px) rotateY(-169deg); }
.login-book-leaf-face { overflow:hidden; padding:25px 22px; background:linear-gradient(90deg,#10364d,#1d5267 24%,#1b465b); box-shadow:inset 0 0 15px #57c5db0d; }
.login-book-leaf-back { transform:rotateY(180deg); background:linear-gradient(90deg,#163b51,#225c70 80%,#102c42); }
/* 高光使用薄层的位移/透明度，不逐帧改变模糊、阴影或布局。 */
.login-book-leaf-face:after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,#b1fcf84d 48%,transparent 72%); transform:translateX(-120%); opacity:0; }
.login-book-word { position:absolute; left:50%; top:50%; padding:7px 11px; border:1px solid #a1e6ed52; border-radius:7px; color:#c7f6f9; background:#153549ec; box-shadow:0 8px 24px #010c1d36; font-size:12px; font-weight:500; white-space:nowrap; backface-visibility:hidden; transform:translate3d(var(--word-x),var(--word-y),var(--word-z)) rotateX(calc(-1 * var(--book-angle))) rotateZ(var(--word-turn)); }
.login-book-word-project { --word-x:-193px; --word-y:-109px; --word-z:90px; --word-turn:-6deg; }
.login-book-word-commission { --word-x:68px; --word-y:-142px; --word-z:110px; --word-turn:5deg; }
.login-book-word-payment { --word-x:-66px; --word-y:-171px; --word-z:130px; --word-turn:3deg; }
.login-book-word-evidence { --word-x:126px; --word-y:-68px; --word-z:70px; --word-turn:-5deg; }
.login-book-particles { position:absolute; inset:0; }
.login-book-particles i { --x:22%; --y:61%; --delay:0s; position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:#a0eced; opacity:.45; box-shadow:0 0 8px #83e1e475; }
.login-book-particles i:nth-child(2) { --x:77%; --y:64%; --delay:1s; }
.login-book-particles i:nth-child(3) { --x:36%; --y:46%; --delay:2.4s; width:2px; height:2px; }
.login-book-particles i:nth-child(4) { --x:65%; --y:42%; --delay:3.2s; }
.login-book-particles i:nth-child(5) { --x:14%; --y:42%; --delay:4.8s; width:2px; height:2px; }
.login-book-particles i:nth-child(6) { --x:87%; --y:54%; --delay:5.5s; width:2px; height:2px; }
.login-book-particles i:nth-child(7) { --x:43%; --y:70%; --delay:6.4s; }
.login-book-particles i:nth-child(8) { --x:58%; --y:67%; --delay:7.2s; width:2px; height:2px; }

/* playing/paused共用时间轴；隐藏或暂停仅更改play-state，登录提交不参与。 */
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-camera { animation:book-arrive 5.2s cubic-bezier(.24,.65,.24,1) both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-cover { animation:book-open 5.2s cubic-bezier(.3,.7,.3,1) both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-page-left { animation:page-reveal 5.2s linear both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-leaf-one { animation:page-turn 12s 2.5s cubic-bezier(.3,.65,.3,1) infinite both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-leaf-two { animation:page-turn 12s 4.5s cubic-bezier(.3,.65,.3,1) infinite both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-leaf-face:after { animation:page-light 12s 2.5s ease-in-out infinite both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-word { animation:word-rise 5.2s cubic-bezier(.2,.65,.25,1) both!important; }
.login-book-scene:is([data-book-motion=playing],[data-book-motion=paused]) .login-book-particles i { animation:document-particle 9s var(--delay) ease-in-out infinite both!important; }
.login-book-scene[data-book-motion=paused] :is(.login-book-camera,.login-book-cover,.login-book-page-left,.login-book-leaf,.login-book-word,.login-book-particles i),.login-book-scene[data-book-motion=paused] .login-book-leaf-face:after { animation-play-state:paused!important; }

.login-access.login-card { display:flex; align-items:center; justify-content:center; width:100%; max-width:none; min-width:0; padding:48px clamp(32px,5vw,80px); border:0; border-left:1px solid #b9d1dc4d; border-radius:0; background:radial-gradient(ellipse at 100% 0,#e1effa88,transparent 60%),#f8fafc; }
.login-form-wrap { width:100%; max-width:386px; }
.login-access-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:29px; }
.login-access-caption { color:#6b7f88; font-size:13px; }
.login-access-tools .form-select { width:118px; min-height:44px; border-color:#e0e8ea; border-radius:10px; font-size:12px; background-color:#f6f9f9; }
.login-access h1 { color:#233e48; font-size:27px; font-weight:600; letter-spacing:-.025em; margin-bottom:10px; }
.login-intro { color:#687e88; font-size:14px; line-height:1.8; margin-bottom:30px; }
.login-access .form-label { color:#3c5361; font-size:14px; }
.login-access .form-control { min-height:48px; padding:11px 14px; border-color:#d7e2e6; border-radius:12px; background-color:#f9fbfb; }
.login-access .form-control:focus { border-color:#6aa7af; background:#fff; box-shadow:0 0 0 3px #2d81921a; }
.login-access .form-control[aria-invalid=true] { border-color:#c94750; }
.login-password-toggle { display:flex; align-items:center; gap:10px; min-height:44px; margin-bottom:18px; padding-left:0; color:#5f7480; font-size:13px; }
.login-password-toggle .form-check-input { margin:0; float:none; width:17px; height:17px; }
.login-password-toggle label { display:flex; align-items:center; min-height:44px; }
.login-submit-slot { height:52px; }
.login-submit { position:relative; display:block; width:100%; height:52px; padding:0; border:0; border-radius:26px; color:#fff; background:transparent; font:inherit; font-size:15px; font-weight:600; }
.login-submit-surface { position:absolute; inset:0 auto 0 50%; width:100%; height:52px; border-radius:26px; transform:translateX(-50%); background:#277e8c; box-shadow:0 6px 16px #287a8c25; transition:width .34s cubic-bezier(.2,.85,.3,1); }
.login-submit-label { position:relative; transition:opacity .14s; }
.login-submit-symbol { position:absolute; left:50%; top:50%; width:22px; height:22px; opacity:0; transform:translate(-50%,-50%); }
.login-submit-spinner { border:2px solid #ffffff55; border-top-color:#fff; border-right-color:#fff; border-radius:50%; }
.login-submit-check:after { content:""; display:block; width:10px; height:18px; border:solid #fff; border-width:0 3px 3px 0; transform:translate(6px,0) rotate(45deg); }
.login-submit-cross:before,.login-submit-cross:after { content:""; position:absolute; left:1px; top:10px; width:20px; height:3px; border-radius:3px; background:#fff; transform:rotate(45deg); }
.login-submit-cross:after { transform:rotate(-45deg); }
.login-submit:is([data-state=loading],[data-state=success],[data-state=error]) .login-submit-surface { width:52px; }
.login-submit:is([data-state=loading],[data-state=success],[data-state=error]) .login-submit-label { opacity:0; }
.login-submit[data-state=loading] .login-submit-surface:after { content:""; position:absolute; inset:-9px; border-radius:50%; background:#b7e9f366; box-shadow:0 0 18px #86d5e75e; animation:login-orb-breathe 1.6s ease-in-out infinite; }
.login-submit[data-state=loading] .login-submit-spinner { opacity:1; animation:login-spinner 1s linear infinite; }
.login-submit[data-state=success] .login-submit-surface { background:#1678d8; }
.login-submit[data-state=success] .login-submit-check { opacity:1; }
.login-submit[data-state=error] .login-submit-surface { background:#d34250; }
.login-submit[data-state=error] .login-submit-cross { opacity:1; }
.login-submit:focus-visible { outline:3px solid #85b9c2; outline-offset:4px; }
.login-submit:disabled { cursor:wait; }
.login-feedback { min-height:44px; margin-top:12px; font-size:13px; line-height:1.7; color:#647b84; overflow-wrap:anywhere; }
.login-feedback[data-kind=error] { color:#b32c40; }
.login-feedback[data-kind=success] { color:#1367b5; }
.login-feedback:focus { outline:2px solid #cc7a86; outline-offset:4px; border-radius:4px; }
.login-feedback p { margin:0; }
.login-feedback ul { margin:0; padding-left:18px; }
.login-access .login-footnote { margin:12px 0 0; padding-top:22px; border-top:1px solid #e7edef; font-size:12px; line-height:1.8; color:#748894; }

@keyframes book-arrive { 0%,12% { transform:translateX(-75%) rotateX(4deg) rotateZ(0deg) scale(.82); } 46%,100% { transform:translateX(-50%) rotateX(var(--book-angle)) rotateZ(var(--book-turn)) scale(var(--book-scale)); } }
@keyframes book-open { 0%,32% { transform:translateZ(16px) rotateY(0deg); } 66%,100% { transform:translateZ(-6px) rotateY(-176deg); } }
@keyframes page-reveal { 0%,43% { opacity:0; } 64%,100% { opacity:1; } }
@keyframes page-turn { 0%,8% { transform:translateZ(12px) rotateY(0deg); } 29%,77% { transform:translateZ(10px) rotateY(-172deg); } 91%,100% { transform:translateZ(12px) rotateY(0deg); } }
@keyframes page-light { 0%,5%,38%,100% { opacity:0; transform:translateX(-120%); } 18% { opacity:.8; } 32% { opacity:0; transform:translateX(120%); } }
@keyframes word-rise { 0%,65% { opacity:0; transform:translate3d(-50%,0,24px) rotateX(calc(-1 * var(--book-angle))) scale(.6); } 100% { opacity:1; transform:translate3d(var(--word-x),var(--word-y),var(--word-z)) rotateX(calc(-1 * var(--book-angle))) rotateZ(var(--word-turn)); } }
@keyframes document-particle { 0% { opacity:0; transform:translate3d(0,14px,0); } 35% { opacity:.65; } 100% { opacity:0; transform:translate3d(12px,-70px,0); } }
@keyframes login-spinner { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes login-orb-breathe { 0%,100% { opacity:.35; transform:scale(.92); } 50% { opacity:.7; transform:scale(1.12); } }
@media(hover:hover) { .login-submit:not(:disabled):hover .login-submit-surface { background:#206f7e; } }
html[data-bs-theme=dark] .login-shell { background:#0f1e2a; }
html[data-bs-theme=dark] .login-access.login-card { background:radial-gradient(ellipse at 100% 0,#284e641f,transparent 60%),#10212e; border-left-color:#3353655c; }
html[data-bs-theme=dark] .login-access h1 { color:#e3edf3; }
html[data-bs-theme=dark] :is(.login-intro,.login-access-caption,.login-password-toggle) { color:#adc0ca; }
html[data-bs-theme=dark] .login-access .form-label { color:#d0e0e8; }
html[data-bs-theme=dark] .login-access :is(.form-control,.form-select) { color:#e3edf3; background-color:#132a39; border-color:#3c5867; }
html[data-bs-theme=dark] .login-access .form-control:focus { background:#1c3442; border-color:#82c8d2; }
html[data-bs-theme=dark] .login-access .login-footnote { color:#a3b8c5; border-color:#344e5d; }
html[data-bs-theme=dark] .login-feedback { color:#b0c9d3; }
html[data-bs-theme=dark] .login-feedback[data-kind=error] { color:#ffb4c0; }
html[data-bs-theme=dark] .login-feedback[data-kind=success] { color:#a7d6ff; }
html[data-bs-theme=dark] .login-feedback:focus { outline-color:#b77a87; }
@media(min-width:1600px) { .login-book-scene { --book-scale:1.15; } .login-book-camera { top:135px; } }
@media(max-width:1050px) { .login-workspace { grid-template-columns:minmax(0,1fr) minmax(350px,.9fr); } .login-story { padding:32px 28px 36px; } .login-book-scene { --book-scale:.82; } .login-story-brand { font-size:12px; gap:9px; } .login-motion-toggle { padding:8px; font-size:11px; } .login-access.login-card { padding:36px; } }
@media(max-width:760px) {
  .login-workspace { grid-template-columns:minmax(0,1fr); }
  .login-story { min-height:0; padding:24px 24px 32px; }
  .login-story-top { gap:12px; }
  .login-story-brand { font-size:13px; }
  .login-story-brand>span { flex-basis:32px; height:32px; }
  .login-book-scene { --book-angle:38deg; --book-turn:-10deg; --book-scale:.83; height:270px; max-width:480px; margin:0 auto; }
  .login-book-camera { top:77px; width:300px; height:182px; }
  .login-book-page,.login-book-leaf-face { padding:21px 19px; }
  .login-book-page-title { margin-bottom:14px; font-size:11px; }
  .login-book :is(.login-book-page,.login-book-leaf-face) i { margin:9px 0; }
  .login-book-cover-front strong { font-size:20px; }
  .login-book-word { font-size:10px; padding:6px 8px; }
  .login-book-word-project { --word-x:-149px; --word-y:-80px; --word-z:48px; }
  .login-book-word-commission { --word-x:47px; --word-y:-103px; --word-z:62px; }
  .login-book-word-payment { --word-x:-52px; --word-y:-124px; --word-z:70px; }
  .login-book-word-evidence { --word-x:91px; --word-y:-40px; --word-z:40px; }
  .login-book-shadow { width:290px; bottom:0; }
  .login-book-orbit { width:320px; height:185px; }
  .login-book-orbit-two { width:390px; height:230px; }
  .login-story-copy { margin-top:7px; }
  .login-story-copy .eyebrow { display:none; }
  .login-story-copy h2 { font-size:27px; line-height:1.45; margin-bottom:10px; }
  .login-story-copy h2 br { display:none; }
  .login-story-copy>p:last-child { font-size:13px; }
  .login-access.login-card { padding:34px 28px 40px; border-left:0; border-top:1px solid #719aa333; }
  .login-access-tools { margin-bottom:26px; }
}
@media(max-width:370px) { .login-story { padding:20px; } .login-story-brand { font-size:12px; } .login-motion-toggle { font-size:10px; padding:7px; } .login-book-scene { --book-scale:.74; } .login-story-copy h2 { font-size:25px; } .login-access.login-card { padding:30px 24px; } }
@media(prefers-reduced-motion:reduce) {
  .login-submit-surface,.login-submit-label { transition:none; }
  .login-submit[data-state=loading] .login-submit-spinner { animation:none; }
  .login-submit[data-state=loading] .login-submit-surface:after { animation:none; opacity:.4; }
}
