*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
body{overflow:hidden;background:#120907;color:#fff}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.login-stage{position:relative;min-height:100dvh;isolation:isolate;overflow:hidden;background:#120907}
.login-stage::before{content:"";position:absolute;inset:0;z-index:-3;background:center/cover no-repeat}
.login-stage::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none}


body[data-login-skin="ink"]{background:#f3eee5;color:#2b2520}
body[data-login-skin="ink"] .login-stage::before{background-image:url("/login-assets/ink-bg.png?v=20260924")}
body[data-login-skin="ink"] .login-stage::after{background:linear-gradient(90deg,rgba(246,240,229,.82),rgba(246,240,229,.24) 50%,rgba(246,240,229,.7)),radial-gradient(circle at 60% 18%,rgba(176,42,35,.14),transparent 18%)}
.scene-copy{position:absolute;inset:0;pointer-events:none}
.corner-brand{position:absolute;left:clamp(26px,3.2vw,54px);top:clamp(28px,4.8vw,78px);display:grid;gap:14px;color:#fff7ea;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.corner-brand strong{font-size:clamp(18px,1.55vw,28px);font-weight:500;letter-spacing:.28em}
.corner-brand span{font-size:clamp(13px,1vw,17px);letter-spacing:.34em}
.brush-title{position:absolute;left:clamp(76px,6.7vw,128px);top:clamp(128px,15.6vh,190px);width:clamp(390px,39vw,730px);height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.48))}
.story-line{position:absolute;left:clamp(220px,16.2vw,324px);top:clamp(330px,38vh,405px);margin:0;color:#fff8ec;font-size:clamp(19px,1.75vw,34px);line-height:1.95;letter-spacing:.48em;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.88)}
.vertical-mark{position:absolute;left:clamp(26px,3.2vw,55px);bottom:clamp(150px,18vh,214px);margin:0;color:#fff5e8;font-size:clamp(13px,1.05vw,18px);line-height:1.95;letter-spacing:.42em;writing-mode:vertical-rl;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.vertical-mark span{display:inline-block;width:1px;height:28px;background:#fff3df;margin:8px 0}
.bottom-brand{position:absolute;left:clamp(70px,6vw,116px);bottom:clamp(34px,4.5vh,62px);display:block;color:#fff5e3;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.bottom-brand strong{font-size:clamp(13px,1.05vw,18px);font-weight:400;letter-spacing:.32em}
.chair-quote{position:absolute;left:clamp(370px,30vw,610px);bottom:clamp(48px,7.2vh,96px);width:clamp(210px,19vw,355px);height:auto;transform:rotate(-6deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));mix-blend-mode:screen;opacity:.9}
.ink-copy{display:block}
.ink-top{position:absolute;left:clamp(38px,3.8vw,76px);top:clamp(28px,4.5vh,56px);display:flex;align-items:center;gap:22px;color:#2f2923}
.ink-top strong{font-size:clamp(17px,1.45vw,25px);font-weight:600;letter-spacing:.18em}
.ink-top span{display:block;width:clamp(120px,18vw,300px);height:1px;background:rgba(49,42,34,.26)}
.ink-hero{position:absolute;left:clamp(76px,9vw,164px);top:clamp(190px,22vh,255px);max-width:min(46vw,680px);color:#16120f}
.ink-hero h1{margin:0;font-family:"STKaiti","KaiTi","Microsoft YaHei",serif;font-size:clamp(40px,5.3vw,82px);line-height:1.52;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ink-hero span{display:block;width:36px;height:2px;background:#b32420;margin:28px 0 24px}
.ink-hero p{margin:0;font-size:clamp(15px,1.24vw,22px);line-height:2.15;letter-spacing:.42em;max-width:640px}
.ink-copy footer{position:absolute;left:clamp(46px,5vw,96px);bottom:clamp(26px,4.2vh,52px);font-size:clamp(12px,.88vw,15px);color:rgba(42,36,31,.72)}
.login-card{position:absolute;right:clamp(48px,7vw,120px);top:50%;transform:translateY(-48%);z-index:3;width:min(33vw,555px);min-width:420px;padding:clamp(34px,4.3vw,64px) clamp(34px,4.3vw,64px) clamp(28px,3.3vw,46px);border:1px solid rgba(245,218,185,.55);border-radius:10px;background:linear-gradient(145deg,rgba(20,10,7,.74),rgba(15,5,4,.5));box-shadow:0 28px 75px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px)}
body[data-login-skin="ink"] .login-card{right:clamp(54px,7.4vw,132px);background:rgba(255,252,246,.84);border-color:rgba(116,93,72,.2);border-radius:18px;box-shadow:0 18px 48px rgba(86,70,52,.15);color:#2c241d}
.card-brand{display:none}
body[data-login-skin="ink"] .card-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:28px;padding-bottom:26px;border-bottom:0!important}
.seal{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#1b1511,#a51918 52%,#1a120f);color:#fff;font-family:"STKaiti","KaiTi",serif;font-size:32px;font-weight:700;box-shadow:0 8px 22px rgba(161,27,24,.16)}
.card-brand strong{display:block;font-size:26px;letter-spacing:.08em}
.card-brand small{display:block;margin-top:5px;color:#7b6a5c;letter-spacing:.18em}
.login-card h2{margin:0;color:#fff7ea;font-size:clamp(32px,2.8vw,48px);line-height:1.15;font-weight:650;letter-spacing:.08em}
.login-card>p{margin:16px 0 34px;color:#f0ddc8;font-size:clamp(14px,1.05vw,18px);letter-spacing:.36em}
body[data-login-skin="ink"] .login-card h2{text-align:center;color:#231d18;font-size:36px;letter-spacing:.12em}
body[data-login-skin="ink"] .login-card>p{text-align:center;color:#706255;letter-spacing:.08em;margin:12px 0 28px}
.field{position:relative;display:block;margin:0 0 18px}
.field>span{display:none}
body[data-login-skin="ink"] .field>span{display:block;margin:0 0 8px;font-weight:700;font-size:14px;color:#2f2821}
.field i{position:absolute;left:19px;bottom:17px;width:25px;height:25px;color:rgba(255,255,255,.88)}
body[data-login-skin="ink"] .field i{color:#5c544b;bottom:15px}
.field svg,.ghost-eye svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.field input{width:100%;height:58px;border:1px solid rgba(255,238,218,.28);border-radius:5px;background:rgba(23,12,10,.5);color:#fff8ed;padding:0 58px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder{color:rgba(242,226,210,.54)}
.field input:focus{border-color:#d8ae86;box-shadow:0 0 0 3px rgba(207,67,44,.18);background:rgba(24,11,8,.72)}
body[data-login-skin="ink"] .field input{height:52px;background:rgba(255,252,247,.62);border-color:rgba(101,82,63,.18);border-radius:9px;color:#241e19}
body[data-login-skin="ink"] .field input::placeholder{color:rgba(78,68,58,.42)}
.ghost-eye{position:absolute;right:17px;bottom:17px;width:25px;height:25px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.68);cursor:pointer}
body[data-login-skin="ink"] .ghost-eye{bottom:14px;color:#8a8178}
.form-row{display:flex;justify-content:space-between;align-items:center;margin:5px 0 26px;color:#f3dfc6;font-size:15px}
.remember{display:flex;align-items:center;gap:9px}
.remember input{appearance:none;width:18px;height:18px;margin:0;border:1px solid rgba(255,255,255,.62);border-radius:4px;background:#fff}
.remember input{position:relative;flex-shrink:0;border-color:#9b8a79;cursor:pointer}
.remember input:checked{background:#b32824;border-color:#b32824}
.remember input:checked::after{content:"";position:absolute;left:31%;top:10%;width:30%;height:55%;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}
.remember input:focus-visible{outline:2px solid #c87957;outline-offset:3px}
.form-row a{color:#edc28a;font-weight:600}
body[data-login-skin="ink"] .form-row{color:#3f352e}
body[data-login-skin="ink"] .form-row a{color:#b32622}
.login-submit{display:grid;place-items:center;width:100%;height:58px;border-radius:6px;font-size:clamp(18px,1.35vw,24px);letter-spacing:.08em;cursor:pointer}
.login-submit{border:1px solid #e43731;color:#fff;background:linear-gradient(180deg,#a00d14,#820a0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px rgba(114,0,0,.24)}
body[data-login-skin="ink"] .login-submit{height:52px;border-color:#bd2e28;background:linear-gradient(180deg,#c33b34,#a41e1c);box-shadow:0 12px 20px rgba(163,30,28,.16)}
.card-foot{display:flex;align-items:center;gap:13px;margin-top:34px;color:rgba(239,224,207,.7);font-size:13px;letter-spacing:.14em;white-space:nowrap}
.card-foot span{height:1px;flex:1;background:rgba(240,218,190,.32)}
body[data-login-skin="ink"] .card-foot{color:#807469;justify-content:center}
body[data-login-skin="ink"] .card-foot span{background:rgba(87,70,53,.18)}
#loginMessage{margin:14px 0 0;color:#ffb5a8;font-size:14px;line-height:1.5;text-align:center}
body[data-login-skin="ink"] #loginMessage{color:#b32622}
.login-submit:disabled{cursor:not-allowed;opacity:.72}
/* Theater composition, 2026-09-20_1141. */


















body[data-login-skin="ink"] .login-card{width:400px;min-width:0;padding:30px 30px 24px;border-radius:8px;transform:translateY(-50%)}
body[data-login-skin="ink"] .card-brand{gap:12px;margin-bottom:20px;padding-bottom:18px}
body[data-login-skin="ink"] .seal{width:44px;height:44px;font-size:24px}
body[data-login-skin="ink"] .card-brand strong{font-size:20px;letter-spacing:0}
body[data-login-skin="ink"] .card-brand small{font-size:11px;letter-spacing:0}
body[data-login-skin="ink"] .login-card h2{font-size:28px;letter-spacing:0}
body[data-login-skin="ink"] .login-card>p{font-size:13px;letter-spacing:0;margin:10px 0 22px}
body[data-login-skin="ink"] .field{margin-bottom:14px}
body[data-login-skin="ink"] .field>span{font-size:12px;margin-bottom:6px}
body[data-login-skin="ink"] .field input{height:44px;padding:0 42px;font-size:14px;border-radius:6px}
body[data-login-skin="ink"] .field i{width:19px;height:19px;left:14px;bottom:13px}
body[data-login-skin="ink"] .ghost-eye{width:19px;height:19px;right:14px;bottom:13px}
body[data-login-skin="ink"] .form-row{font-size:12px;margin:5px 0 20px}
body[data-login-skin="ink"] .login-submit{height:44px;font-size:16px;letter-spacing:0}
body[data-login-skin="ink"] .card-foot{margin-top:22px;font-size:11px;letter-spacing:0;gap:8px;white-space:normal;text-align:center}
@media (max-width:1100px){
  body[data-login-skin="ink"] .login-card{right:auto;transform:none}
  body{overflow:auto}
  .login-stage{min-height:100dvh;padding:28px;display:grid;align-items:end}
  .scene-copy{position:absolute}
  .brush-title{top:120px;left:36px;width:min(76vw,560px)}
  .story-line{left:56px;top:310px;text-align:left;font-size:22px}
  .vertical-mark,.bottom-brand,.chair-quote{display:none}
  .login-card{position:relative;right:auto;top:auto;transform:none;width:min(100%,520px);min-width:0;margin-left:auto}
  .ink-hero{left:38px;top:130px;max-width:72vw}
  .ink-hero h1{font-size:46px}
}
@media(max-width:1100px){
  
  
  
}
@media(max-width:720px){
  
  
  
  
  
}
@media (max-width:720px){
  .login-stage{padding:18px;align-items:center;overflow-x:hidden}
  .corner-brand,.ink-top{left:20px;top:18px}
  .corner-brand span,.ink-top span{display:none}
  .brush-title{left:20px;top:86px;width:74vw}
  .story-line{display:none}
  .ink-hero{left:22px;right:22px;top:84px;max-width:none}
  .ink-hero h1{font-size:34px;line-height:1.35}
  .ink-hero p{font-size:13px;letter-spacing:.16em;line-height:1.8}
  .ink-copy footer{display:none}
  .login-card{width:320px;max-width:calc(100vw - 52px);margin:160px 0 0;padding:28px 20px;border-radius:12px}
  body[data-login-skin="ink"] .login-card{right:auto;width:320px;max-width:calc(100vw - 52px);margin:210px 0 0}
  .login-card h2{font-size:30px}
  .login-card>p{font-size:13px;letter-spacing:.12em}
  .card-foot{white-space:normal;text-align:center;line-height:1.6}
}


/* 局域网版：注册模式字段显隐 */
.login-card #loginConfirmField[hidden],
.login-card #loginNicknameField[hidden],
.login-card #loginPhoneField[hidden]{display:none}

/* 底部链接 */
.row-links{display:flex;gap:16px;align-items:center}

/* 注册成功居中弹窗 */
.modal-mask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,12,20,.55);backdrop-filter:blur(2px)}
.modal-mask[hidden]{display:none}
.modal-box{width:min(88vw,360px);padding:30px 26px 24px;border-radius:16px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;animation:modal-in .22s ease}
.modal-box h3{margin:0 0 12px;font-size:20px;color:#1c1c24;letter-spacing:.04em}
.modal-box p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#5a5a66}
.modal-confirm{display:inline-block;min-width:120px;height:44px;padding:0 24px;border:none;border-radius:22px;font-size:15px;color:#fff;background:linear-gradient(110deg,#e43731,#b32622);cursor:pointer;letter-spacing:.08em}
.modal-confirm:hover{filter:brightness(1.06)}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

html:root body .login-card .card-brand{visibility:visible!important;border-bottom:0!important;position:relative!important}html body .login-card .card-brand>*{visibility:hidden!important}

html:root body .login-card .card-brand::after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:-14px!important;height:2px!important;background:rgba(255,255,255,.6)!important;visibility:visible!important;pointer-events:none!important}
html:root body[data-login-skin] .login-card .card-brand{visibility:visible!important;border-bottom:0!important;position:relative!important;box-shadow:none!important;filter:none!important;opacity:1!important}
html:root body[data-login-skin] .login-card .card-brand>*{visibility:hidden!important}
html:root body[data-login-skin] .login-card .card-brand::after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:-9px!important;height:2px!important;border:0!important;background:rgb(255,255,255)!important;background-image:none!important;box-shadow:none!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;visibility:visible!important;pointer-events:none!important}

html:root body[data-login-skin] .login-card .card-brand{border:0!important;border-bottom:0!important}html:root body[data-login-skin] .login-card .card-brand::after{bottom:-14px!important;height:2px!important;background:rgba(255,255,255,.6)!important;background-color:rgba(255,255,255,.6)!important;opacity:1!important;}
/* Final divider override: independent white translucent rule */
html:root body[data-login-skin] .login-card .card-brand{border:0!important;border-bottom:0!important;border-bottom-color:transparent!important}
html:root body[data-login-skin] .login-card .card-brand::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-14px!important;height:2px!important;border:0!important;border-top:2px solid rgba(255,255,255,.6)!important;background:rgba(255,255,255,.6)!important;background-color:rgba(255,255,255,.6)!important;opacity:1!important;z-index:9999!important;mix-blend-mode:normal!important}

/* User supplied divider image: disable automatic divider */
html:root body .login-card .card-brand::after{display:none!important;content:none!important}

/* remove original login brand separator */
body[data-login-skin="ink"] .card-brand{border-bottom:0!important}
html:root body .login-card .card-brand{border-bottom:0!important}
html:root body .login-card .card-brand::after{display:none!important;content:none!important}

<style>html:root body[data-login-skin] .login-card .card-brand::after{display:none!important;content:none!important;border:0!important;background:none!important}</style>

/* Keep login background video geometry fixed while metadata loads. */
#cover-background, #cover-background video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}

/* 封面一次性揭幕：首屏图片解码和视频首帧就绪前，只显示统一加载状态。 */
html.login-loading .login-stage{visibility:hidden!important}
html.login-loading::after{content:'正在加载首页…';position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:#171717;color:#fff;font:14px 'Microsoft YaHei',sans-serif;letter-spacing:2px}

/* Keep unloaded image layers transparent without erasing editor color boxes. */
html body .login-stage .cover-layer[data-kind="image"] { background-color: transparent !important; }
html body .login-stage .cover-layer img { background: transparent !important; }


/* Compact login card after the brand logo was removed. */
html:root body[data-login-skin="ink"] .login-card .card-brand {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
html:root body[data-login-skin="ink"] .login-card h2 {
  margin-top: 0 !important;
}
html:root body[data-login-skin="ink"] .login-card .card-foot {
  margin-top: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
html:root body[data-login-skin="ink"] .login-card .card-foot small {
  font-size: 14px !important;
}
html body .login-card { max-height:calc(100dvh - 32px);overflow-y:auto; }