/* 首页 / 登录 / 注册：轮换背景图
 * 两层 .bg-layer 交叉淡入，图片由 static/bg.js 随机起头轮换。
 * 上面盖一层压暗 scrim（左上偏金、右上偏银），保证顶栏、标题、正文在亮图上都看得清。
 */
/* z-index 必须是 -1：这一层是 main 的后代，而 .hero / .auth 底下那些没定位的文字
   会画在 z-index:0 的定位层下面 —— 首页大标题被背景盖住就是这个原因。
   main 自己有 position:relative + z-index:1，所以 -1 只会在 main 内部沉底，外面顶栏照旧压得住。 */
.bg-rot{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#07080e}
.bg-rot .bg-layer{position:absolute; inset:0; opacity:0; transition:opacity 1.5s ease-in-out;
  background-position:center center; background-size:cover; background-repeat:no-repeat}
.bg-rot .bg-layer.on{opacity:1}
/* 压暗比以前轻得多，图才看得清；顶栏区和页脚区压重一点，字才压得住 */
.bg-rot::after{content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,12,.86) 0%, rgba(6,7,12,.44) 26%, rgba(6,7,12,.30) 50%,
                            rgba(6,7,12,.52) 78%, rgba(6,7,12,.86) 100%),
    radial-gradient(1200px 620px at 14% 2%, rgba(88,66,18,.50), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(58,64,84,.42), transparent 58%)}

/* 内容浮在背景之上 */
body[data-page="index"] main, body[data-page="register"] main,
body[data-page="login"] main, body[data-page="login-admin"] main,
body[data-page="index"] .foot, body[data-page="register"] .foot,
body[data-page="login"] .foot, body[data-page="login-admin"] .foot{position:relative; z-index:1}

/* 首页卡片：银色描边 + 半透明玻璃，背景图能透上来 */
body[data-page="index"] .card,
body[data-page="index"] .feature{
  background:linear-gradient(180deg, rgba(25,26,35,.88), rgba(35,36,47,.88));
  border-color:rgba(207,214,228,.20);
  backdrop-filter:blur(14px);
}
body[data-page="index"] .card pre.mono{background:rgba(12,13,19,.60)}

/* 亮图上透明按钮会糊成一片，给个半透明底垫着才看得清 */
body[data-page="index"] .hero-actions .btn.ghost{
  background:rgba(10,11,18,.62); backdrop-filter:blur(8px)
}
body[data-page="index"] .hero-actions .btn.ghost:hover{background:rgba(10,11,18,.78)}

/* ---------------- 登录 / 注册：金 + 银 描边的玻璃卡片 ----------------
 * padding-box 铺底色、border-box 铺金属渐变，那 1px 透明边框被渐变填满，
 * 出来就是一圈金→银→金的描边，而不是四条纯色线。卡片底 8 成不透明。 */
.auth .card{
  position:relative; padding:26px; border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(25,26,35,.80), rgba(35,36,47,.80)) padding-box,
    linear-gradient(133deg, #fff3d4 0%, #ffc861 14%, #eef3ff 32%, #9dabc9 47%,
                            #ffffff 62%, #ffd98a 80%, #c8973a 100%) border-box;
  backdrop-filter:blur(16px);
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,200,97,.15),
             inset 0 1px 0 rgba(255,255,255,.10);
}
/* 输入框 / 滑块条统统一码事：8 成不透明，背景图透一点，字还得看得清 */
.auth input, .auth .captcha-bar{
  background:rgba(21,22,31,.80);
  border-color:rgba(207,214,228,.26);
}
.auth input:focus{border-color:rgba(255,200,97,.75)}
.auth .captcha-stage{border-color:rgba(207,214,228,.26)}
.auth .captcha-text{color:var(--dim)}
.auth .captcha-fill{background:linear-gradient(90deg, rgba(255,200,97,.34), rgba(255,200,97,.08))}
.auth .captcha-knob{background:linear-gradient(135deg,#ffe6b8,var(--gold) 45%,#cf9b3d); color:#2a1a00}
.auth .captcha.done .captcha-knob{background:linear-gradient(135deg,var(--ok),#28c98a); color:#04220f}

/* 亮图上文字更实一点 */
body[data-page="index"] .hero h1,
body[data-page="register"] .auth h1, body[data-page="login"] .auth h1,
body[data-page="login-admin"] .auth h1{text-shadow:0 2px 22px rgba(0,0,0,.75)}
body[data-page="index"] .hero .lead{color:#ddd6c4; text-shadow:0 1px 14px rgba(0,0,0,.7)}

@media (prefers-reduced-motion: reduce){ .bg-rot .bg-layer{transition:none} }
@media (max-width:700px){
  .bg-rot::after{background:
    linear-gradient(180deg, rgba(6,7,12,.90) 0%, rgba(6,7,12,.60) 30%, rgba(6,7,12,.66) 70%, rgba(6,7,12,.90) 100%)}
}