/* ============ 登录屏 ============ */
#login-screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% -10%, #33343a 0%, #1a1a1d 45%, #060607 100%);
  transition:none;}
#hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9;}
#login-screen .light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 110%, rgba(255,255,255,.10), transparent 70%);
  animation:breathe 6s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* 登录屏顶部半透明 Mac 状态栏 */
#lg-menubar{position:absolute;top:0;left:0;right:0;height:30px;z-index:55;
  background:rgba(22,22,26,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;padding:0 12px;gap:2px;color:rgba(255,255,255,.92);font-size:13px;}
#lg-menubar .mb-logo{width:17px;height:17px;margin:0 8px 0 4px;object-fit:contain;border-radius:4px;}
#lg-menubar .mb-item{padding:3px 10px;border-radius:5px;white-space:nowrap;}
#lg-menubar .mb-item.bold{font-weight:700;}
#lg-menubar .mb-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12.5px;}
#lg-menubar .mb-right svg{display:block;opacity:.9}

/* 左上角主文案 */
.hero-hg{position:absolute;max-width:330px;color:#fff;visibility:hidden;}
.hero-hg.is-ready{visibility:visible;}
.hero-hg .wv{display:inline-block;opacity:0;transform:translateY(.6em);
  animation:wvIn .7s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--d);}
@keyframes wvIn{to{opacity:1;transform:none}}
.hero-hg h1{font-size:44px;line-height:1.04;font-weight:500;letter-spacing:-1.2px;}
.hero-hg h1 .hero-title-line{display:block;white-space:nowrap;}
.hero-hg .darker{color:rgba(255,255,255,.3);}
.hero-hg .h-txt{margin-top:12px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85);}
.hero-hg .h-txt .darker{color:rgba(255,255,255,.4);}
.hg-tl{top:7%;left:5%;}

/* Game script OS 登录窗口（正反两面翻转卡片） */
.login-card{position:relative;width:352px;border-radius:18px;overflow:hidden;
  background:#0f0f11;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
  perspective:1400px;
  transition:height .5s cubic-bezier(.2,.9,.25,1);
  animation:cardIn .9s cubic-bezier(.2,.9,.25,1) both .15s;}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.login-head{height:34px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;background:#1b1b1e;position:relative;z-index:2;}
.login-head .tl{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.16);}
.login-flip-inner{position:relative;flex:1;min-height:0;width:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.9,.25,1);}
.login-card.is-flipped .login-flip-inner{transform:rotateY(180deg);}
.login-face{width:100%;backface-visibility:hidden;}
.login-face-front{position:relative;}
.login-face-back{position:absolute;inset:0 0 auto 0;transform:rotateY(180deg);}
.login-inner{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 24px 18px;}
.login-appicon{width:64px;height:64px;}
.login-logo{height:24px;display:flex;align-items:center;color:#fff;font-size:24px;font-weight:700;line-height:1;letter-spacing:-.6px;}
.login-beta{color:rgba(255,255,255,.4);font-size:11px;margin-top:-4px;}
.login-name{color:#fff;font-weight:500;font-size:21px;letter-spacing:.2px;margin-top:6px;}
.login-name .wave-ch{display:inline-block;
  transition:opacity .315s ease-in-out,filter .315s ease-in-out,transform .315s ease-in-out;}
.login-name .wave-ch.dim{opacity:.55;filter:blur(1.3px);transform:scale(.985);}
.login-appicon{will-change:transform;transform-style:preserve-3d;backface-visibility:hidden;}
.login-sub{color:rgba(255,255,255,.75);font-size:14px;line-height:1.5;text-align:center;margin-top:-4px;}
.login-form{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:2px;}
.login-field{width:100%;display:flex;gap:8px;}
.login-field-action{align-items:stretch;}
.login-field input{width:100%;min-width:0;flex:1;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;padding:0 13px;font-size:13.5px;outline:none;
  font-family:inherit;-webkit-user-select:text;user-select:text;transition:border .2s,background .2s,box-shadow .2s;}
.login-field input::placeholder{color:rgba(255,255,255,.35)}
.login-field input:focus{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.login-field input[aria-invalid="true"]{border-color:rgba(255,105,97,.8);box-shadow:0 0 0 3px rgba(255,69,58,.12)}
.login-btn{position:relative;min-width:92px;height:40px;padding:0;border:none;border-radius:10px;background:var(--blue);
  color:#fff;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;
  white-space:nowrap;overflow:hidden;transition:transform .15s,filter .2s,opacity .2s;}
.login-btn .clip{display:block;padding:0 18px;line-height:40px;
  transition:transform .28s cubic-bezier(.3,1,.4,1);}
.login-btn .clip span{display:block;line-height:40px;}
.login-btn:not(:disabled):hover .clip{transform:translateY(-40px);}
.login-btn:not(:disabled):active{transform:scale(.95)}
.login-btn:disabled{cursor:wait;opacity:.68;}
.login-btn.loading .clip{transform:none!important;}
.login-error{min-height:17px;margin:0 3px;color:#ffaaa5;font-size:12px;line-height:1.4;text-align:left;
  -webkit-user-select:text;user-select:text;}
.login-error[hidden]{display:none;}
.login-notice{color:rgba(255,255,255,.35);font-size:11px;line-height:1.6;text-align:center;margin-top:8px;}
.login-notice a{color:rgba(255,255,255,.55);}
.login-switch{color:rgba(255,255,255,.45);font-size:12.5px;text-align:center;margin-top:2px;}
.login-switch a{color:#fff;cursor:pointer;text-decoration:none;}
.login-switch a:hover{text-decoration:underline;}