/* 登录页动态背景与玻璃拟态卡片
 * 支持「秋叶飘零 (data-fx-mode="leaf")」与「雪花纷飞 (data-fx-mode="snow")」双氛围联动
 */

/* 舞台：fixed 全屏，彻底解决左右白边 */
.login-stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:
    radial-gradient(1200px 720px at 12% 8%, #f5e4cd 0%, rgba(245,228,205,0) 62%),
    radial-gradient(1000px 640px at 88% 92%, #e3ddf5 0%, rgba(227,221,245,0) 60%),
    radial-gradient(900px 560px at 78% 12%, #dfe8f3 0%, rgba(223,232,243,0) 58%),
    linear-gradient(155deg, #fbf7f0 0%, #f4f0fa 46%, #edf2f8 100%);
  transition:background .6s ease;
  z-index:1;
}

/* 雪花模式：切换为清透凛冽的冬日冰蓝紫暮色背景，凸显晶莹白雪 */
.login-stage[data-fx-mode="snow"]{
  background:
    radial-gradient(1200px 720px at 15% 10%, #cbdcf7 0%, rgba(203,220,247,0) 65%),
    radial-gradient(1000px 640px at 85% 90%, #d5d0f2 0%, rgba(213,208,242,0) 62%),
    radial-gradient(900px 560px at 80% 15%, #c7e2f5 0%, rgba(199,226,245,0) 60%),
    linear-gradient(155deg, #dce7f7 0%, #e3e8f8 48%, #d8e3f2 100%);
}

/* 登录页隐藏页脚和多余间距，让舞台独占视口 */
.public-layout:has(.login-stage) .content{
  padding:0;
  display:block;
  flex:0;
}
.public-layout:has(.login-stage){overflow:hidden}

/* 画布铺满舞台，置于柔光之上、卡片之下，不拦截鼠标 */
.login-fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:1;
}

/* 两团缓慢游走的柔光，制造呼吸感 */
.login-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(72px);
  pointer-events:none;
  z-index:0;
  will-change:transform;
  transition:background .6s ease;
}
.login-glow-a{
  width:560px;
  height:560px;
  left:-160px;
  top:-180px;
  background:radial-gradient(circle, rgba(235,162,110,.48) 0%, rgba(235,162,110,0) 70%);
  animation:loginGlowA 18s ease-in-out infinite alternate;
}
.login-glow-b{
  width:660px;
  height:660px;
  right:-220px;
  bottom:-240px;
  background:radial-gradient(circle, rgba(175,152,224,.50) 0%, rgba(175,152,224,0) 70%);
  animation:loginGlowB 22s ease-in-out infinite alternate;
}
.login-stage[data-fx-mode="snow"] .login-glow-a{
  background:radial-gradient(circle, rgba(130,180,245,.52) 0%, rgba(130,180,245,0) 70%);
}
.login-stage[data-fx-mode="snow"] .login-glow-b{
  background:radial-gradient(circle, rgba(156,145,235,.52) 0%, rgba(156,145,235,0) 70%);
}

@keyframes loginGlowA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(120px,95px,0) scale(1.18)}
}
@keyframes loginGlowB{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-110px,-85px,0) scale(1)}
}

/* 内容层压在画布之上 */
.login-stage .login-wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1080px;
}

/* 背景效果切换按钮 */
.login-fx-toggle{
  position:absolute;
  right:26px;
  top:26px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  margin:0;
  border:1px solid rgba(120,110,170,.20);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#4f4a68;
  font-size:12.5px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(96,88,140,.12);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-fx-toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 22px rgba(96,88,140,.18);
}
.login-fx-toggle:active{transform:translateY(0)}
.login-fx-toggle:focus-visible{
  outline:2px solid #aaa2ef;
  outline-offset:2px;
}
.login-fx-toggle span:first-child{font-size:15px}

/* 故事区文字在渐变底上加深对比 */
.login-stage .login-story .eyebrow{color:#7a6fa8}
.login-stage .login-story h1{
  color:#2b2640;
  text-shadow:0 2px 20px rgba(255,255,255,.65);
}
.login-stage .login-story>p{color:#55506e}
.login-stage .story-flow{color:#625c7e}
.login-stage .story-flow b{color:#968cc0}
.login-stage .login-story>small{color:#817a9f}
.login-stage .brand{color:#2b2640}

/* 玻璃拟态登录卡片 */
.login-stage .login-card{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.88);
  border-radius:24px;
  padding:44px;
  box-shadow:
    0 24px 64px -18px rgba(72,62,120,.22),
    0 2px 10px rgba(72,62,120,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.login-stage .login-card>h2{color:#2f2a45}
.login-stage .login-card .muted{color:#6b6588}
.login-stage .login-note{color:#7d7699}
.login-stage .login-card label{color:#4b4566}
.login-stage .login-card input{
  background:rgba(255,255,255,.88);
  border-color:rgba(120,110,170,.22);
}
.login-stage .login-card input:focus{
  border-color:#9a92e0;
  box-shadow:0 0 0 3px rgba(154,146,224,.18);
}

/* 小屏：舞台内滚动，避免内容被裁切 */
@media(max-width:760px){
  .login-stage{
    position:fixed;
    overflow-y:auto;
    align-items:flex-start;
    padding:60px 18px 40px;
  }
  .login-fx-toggle{
    right:14px;
    top:14px;
    padding:8px 12px;
    font-size:11px;
  }
  .login-stage .login-card{padding:28px}
  .login-glow-a{width:340px;height:340px;left:-120px;top:-120px}
  .login-glow-b{width:400px;height:400px;right:-150px;bottom:-160px}
}

/* 矮屏（笔记本横屏）压缩垂直留白 */
@media(max-height:700px) and (min-width:761px){
  .login-stage .login-story .brand{margin-bottom:32px}
  .login-stage .login-story h1{font-size:46px;margin:16px 0}
  .login-stage .story-flow{margin:22px 0 32px}
  .login-stage .login-card{padding:32px}
}

/* 深色模式：保持可读性 */
@media(prefers-color-scheme: dark){
  .login-stage,
  .login-stage[data-fx-mode="snow"]{
    background:
      radial-gradient(1200px 720px at 12% 8%, #3a3048 0%, rgba(58,48,72,0) 62%),
      radial-gradient(1000px 640px at 88% 92%, #2c2a44 0%, rgba(44,42,68,0) 60%),
      linear-gradient(155deg, #221f2e 0%, #1e1c2a 50%, #1b1d29 100%);
  }
  .login-stage .login-story h1,
  .login-stage .brand,
  .login-stage .login-card>h2{color:#f0edf8}
  .login-stage .login-story>p,
  .login-stage .story-flow,
  .login-stage .login-card .muted,
  .login-stage .login-note,
  .login-stage .login-card label{color:#b9b3cd}
  .login-stage .login-card{
    background:rgba(38,35,52,.72);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 24px 64px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .login-stage .login-card input{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    color:#f0edf8;
  }
  .login-fx-toggle{
    background:rgba(38,35,52,.72);
    border-color:rgba(255,255,255,.12);
    color:#cfc9e2;
  }
  .login-glow-a{background:radial-gradient(circle, rgba(200,130,90,.30) 0%, rgba(200,130,90,0) 70%)}
  .login-glow-b{background:radial-gradient(circle, rgba(140,120,200,.32) 0%, rgba(140,120,200,0) 70%)}
}