/* 主标题字体：马善政毛笔楷书（Google Fonts，SIL OFL，可商用），只在这一页用 */
@font-face{
  font-family:"Ma Shan Zheng";
  src:url("/static/fonts/ma-shan-zheng.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* 太乙 · 登录 / 注册 / 管理员登录
 * 整页背景 = static/bg/auth-bg.webp（鎏金「太乙」，PNG 已压成 WebP），左右分栏浮在它上面：
 * 左边是半透明玻璃表单区，右边是鎏金大字 + 视频。
 * 顶栏和页脚在这几页收起来，整屏只留这一块。
 */

body[data-page="login"], body[data-page="login-admin"], body[data-page="register"]{
  --ax-text:#1d1d1f; --ax-dim:#8a8a8e; --ax-line:#e6e7ec; --ax-gold:#e8a91c;
  background:#e9dcc0; color:var(--ax-text);
}
body[data-page="login"] .nav, body[data-page="login-admin"] .nav, body[data-page="register"] .nav,
body[data-page="login"] .foot, body[data-page="login-admin"] .foot, body[data-page="register"] .foot{display:none}
body[data-page="login"] main, body[data-page="login-admin"] main, body[data-page="register"] main{
  flex:1; display:flex; padding:0; min-height:0;
}
.authx-wrap{width:100%; max-width:none; padding:0; display:flex; min-width:0}

.authx{flex:1; display:flex; min-height:100vh; min-width:0;
  background:url("/static/bg/auth-bg.webp") center center / cover no-repeat fixed;
  background-color:#e9dcc0}

/* ---------------- 左边：不透明表单区 ---------------- */
.authx-pane{flex:0 0 46%; max-width:620px; min-width:0; overflow:auto; position:relative;
  display:flex; align-items:center; justify-content:center; padding:44px 52px;
  /* 半透明玻璃：后面的鎏金背景要透出来，字还得看得清 */
  background:linear-gradient(158deg, rgba(255,255,255,.62) 0%, rgba(255,253,247,.54) 46%, rgba(246,249,255,.46) 100%);
  backdrop-filter:blur(22px) saturate(1.14);
  -webkit-backdrop-filter:blur(22px) saturate(1.14);
  border-right:1px solid rgba(255,255,255,.40);
  box-shadow:14px 0 46px rgba(16,24,40,.16); z-index:2}
.authx-inner{width:100%; max-width:392px}

.authx-brand{display:inline-flex; align-items:center; gap:10px; margin-bottom:38px; color:var(--ax-text)}
.authx-brand:hover{text-decoration:none}
.authx-brand .brand-mark{width:34px; height:34px; border-radius:10px}
.authx-brand-t{font-size:16px; font-weight:700; letter-spacing:.6px}

.authx-tag{margin:0 0 10px; font-size:12.5px; font-weight:600; color:#b07a12; letter-spacing:.4px}
.authx-h1{margin:0 0 10px; font-size:34px; line-height:1.2; font-weight:800; letter-spacing:.5px; color:#15161c}
.authx-sub{margin:0 0 26px; font-size:13.5px; line-height:1.7; color:var(--ax-dim)}

.authx-label{display:block; margin:16px 0 7px; font-size:13px; font-weight:600; color:#5c5d66}
.authx-field{position:relative}
.authx-field .authx-ic{position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:#b3b4bc; pointer-events:none}
.authx-field .authx-ic svg{display:block; width:100%; height:100%}
.authx-field input{width:100%; padding:13px 14px 13px 41px; font:inherit; font-size:14px;
  color:var(--ax-text); background:#fff; border:1px solid var(--ax-line); border-radius:12px;
  outline:none; transition:border-color .15s, box-shadow .15s}
.authx-field input::placeholder{color:#b8b9c1}
.authx-field input:focus{border-color:#ecc46a; box-shadow:0 0 0 3px rgba(240,180,41,.18)}

.authx-btn{position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:26px; padding:14px 44px; border:0; border-radius:12px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:800; letter-spacing:.6px; color:#3a2600;
  background:linear-gradient(96deg,#ffdd8a 0%,#f5bf3c 42%,#e9a318 100%);
  box-shadow:0 12px 26px rgba(233,163,24,.32); transition:filter .15s, transform .1s}
.authx-btn:hover{filter:brightness(1.04)}
.authx-btn:active{transform:translateY(1px)}
.authx-btn:disabled{opacity:.65; cursor:default; filter:grayscale(.15)}
.authx-arrow{position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:15px}

.authx-foot{margin:22px 0 0; font-size:13px; color:var(--ax-dim); text-align:center}
.authx-foot a{color:#c07f0d; font-weight:600}
.authx-foot a:hover{text-decoration:none; color:#8f5c05}

/* 验证码 / 提示条：换浅色皮（站点默认是深色） */
.authx .captcha{margin-top:22px}
.authx .captcha-stage{border-color:var(--ax-line)}
.authx .captcha-bar{background:#fff; border-color:var(--ax-line)}
.authx .captcha-fill{background:linear-gradient(90deg, rgba(240,180,41,.30), rgba(240,180,41,.06))}
.authx .captcha-text{color:#a3a4ac}
.authx .captcha-knob{background:linear-gradient(135deg,#ffe6b8,#f0b429 45%,#cf9b3d); color:#2a1a00}
.authx .msg{margin-top:16px}
.authx .msg.err{background:#fdecee; border-color:#f6c3ca; color:#a02134}
.authx .msg.ok{background:#eaf9f1; border-color:#bde8d2; color:#116b45}

/* ---------------- 右边：鎏金大字 + 金/银拉丝背景，视频只占中间一块 ---------------- */
.authx-media{
  --ax-ring:linear-gradient(133deg,#fff6de 0%,#ffc861 13%,#eef3ff 30%,#9dabc9 46%,
                            #ffffff 61%,#ffd98a 79%,#c8973a 100%);
  /* 注册页左边更长时会滚动，这里固定成「一屏高 + 吸顶」，视频永远居中在可视区 */
  flex:1 1 auto; align-self:flex-start; position:sticky; top:0; height:100vh;
  min-width:0; overflow:hidden; isolation:isolate;
  /* 背景图是整页的，这一栏只压一层很淡的暖色，别把它盖住 */
  background:linear-gradient(100deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%, rgba(122,88,20,.12) 100%);
}
/* 三层质感：拉丝 + 斜向蚀刻 + 极细横纹，别让纯渐变看着是塑料 */
.authx-media::before{content:''; position:absolute; inset:0; z-index:0; mix-blend-mode:overlay; opacity:.26;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(-28deg, rgba(255,255,255,.14) 0 1px, rgba(255,255,255,0) 1px 11px),
    repeating-linear-gradient(0deg, rgba(96,66,12,.055) 0 1px, rgba(96,66,12,0) 1px 4px)}
/* 暗角 + 顶部冷光、底部暖金，把平面撑出纵深 */
.authx-media::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 68% at 52% 47%, rgba(30,20,2,.30) 0%, rgba(30,20,2,.12) 48%, transparent 74%),
    radial-gradient(74% 64% at 50% 46%, transparent 40%, rgba(96,66,12,.30) 100%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 24%, transparent 76%, rgba(72,46,6,.22))}

/* 背景上缓慢浮动的金/白光斑，让层次活起来 */
.authx-glow{position:absolute; inset:-14% -8%; z-index:0; pointer-events:none;
  filter:blur(30px); opacity:.92;
  background:
    radial-gradient(26% 24% at 24% 24%, rgba(255,240,196,.82), transparent 70%),
    radial-gradient(22% 20% at 76% 60%, rgba(255,190,68,.58), transparent 72%),
    radial-gradient(30% 24% at 52% 6%, rgba(255,255,255,.62), transparent 74%);
  animation:ax-drift 26s ease-in-out infinite alternate}
@keyframes ax-drift{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  100%{transform:translate3d(3%,2%,0) scale(1.08)}
}
/* 斜向光带：薄薄一层金属反光 */
.authx-rays{position:absolute; inset:-20%; z-index:0; pointer-events:none; opacity:.22;
  mix-blend-mode:soft-light;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 34px,
                                       rgba(255,255,255,.85) 34px 46px,
                                       rgba(255,255,255,0) 46px 120px);
  animation:ax-rays 34s linear infinite}
@keyframes ax-rays{0%{transform:translateX(-6%)}100%{transform:translateX(6%)}}

/* 中间舞台：上面鎏金大字，下面视频 */
.authx-stage{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(16px,3.2vh,40px);
  padding:clamp(18px,5vh,56px) 6%}
.authx-hero{text-align:center; max-width:96%}
.authx-hero-k{margin:0 0 10px; font-size:11.5px; font-weight:800; letter-spacing:.42em;
  color:#8a6413; text-indent:.42em;
  text-shadow:0 1px 12px rgba(255,255,255,.86), 0 0 3px rgba(255,255,255,.75)}
/* 主标题：毛笔楷书 + 金 → 银 大渐变。只留极短的一层投影压边，
   不再往外发光晕（要晕染效果就别加 blur）。 */
.authx-hero-t{position:relative; margin:0; line-height:1.06; white-space:nowrap;
  font-family:"Ma Shan Zheng","STXingkai","华文行楷","STKaiti","KaiTi","楷体",serif;
  font-weight:400;
  font-size:clamp(46px, min(8.6vw, 10.6vh), 112px); letter-spacing:.015em;
  padding:0 .04em .06em;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 41%,
                    rgba(255,255,255,.88) 50%, rgba(255,255,255,0) 59%, rgba(255,255,255,0) 100%),
    linear-gradient(104deg, #fffdf2 0%, #ffe79c 12%, #f2c445 26%, #cd8c18 39%,
                    #f3f7ff 47%, #cfdaec 57%, #77879f 71%, #eaf1ff 84%, #8494ad 100%);
  background-size:220% 100%, 100% 100%; background-position:0% 50%, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  paint-order:stroke fill;
  -webkit-text-stroke:1.15px rgba(44,28,2,.34);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.78))
         drop-shadow(0 2px 1.5px rgba(64,40,4,.40));
  animation:ax-sheen 7s linear infinite}
@keyframes ax-sheen{0%{background-position:-140% 50%, 0 0}100%{background-position:240% 50%, 0 0}}
.authx-hero-t::after{content:''; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:min(84%,620px); height:3px; border-radius:3px;
  background:linear-gradient(90deg, rgba(120,80,10,0), #e8bb4e 14%, #fff8e0 38%,
                            #e6edf9 62%, #98a7c3 84%, rgba(120,132,160,0))}
.authx-hero-s{margin:34px 0 0; font-size:14px; font-weight:600; letter-spacing:.16em; color:#7a5f22;
  text-shadow:0 1px 12px rgba(255,255,255,.88), 0 0 3px rgba(255,255,255,.78)}

/* 视频 + 背后旋转的金色光晕 */
.authx-shot{position:relative; width:min(88%,760px)}
.authx-halo{position:absolute; inset:-13% -8%; z-index:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(255,236,183,0), rgba(255,226,150,.55) 18%, rgba(255,255,255,.44) 34%,
    rgba(232,190,110,.52) 52%, rgba(255,236,183,0) 76%, rgba(255,226,150,.44) 100%);
  filter:blur(36px); opacity:.8; animation:ax-spin 24s linear infinite}
@keyframes ax-spin{to{transform:rotate(360deg)}}
.authx-frame{position:relative; z-index:1; width:100%; aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  border:1px solid transparent;
  background:linear-gradient(#0b0c12,#0b0c12) padding-box, var(--ax-ring) border-box;
  box-shadow:0 34px 70px rgba(78,52,10,.42), 0 0 70px rgba(255,205,110,.42),
             0 1px 0 rgba(255,255,255,.55) inset}

.authx-video{display:block; width:100%; height:100%; object-fit:cover}

/* 喇叭：浏览器不给带声音自动播，点一下才出声 */
.authx-sound{position:absolute; right:12px; bottom:12px; z-index:2; width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.38); border-radius:50%; background:rgba(10,12,18,.46);
  backdrop-filter:blur(6px); transition:background-color .15s}
.authx-sound:hover{background:rgba(10,12,18,.68)}
.authx-sound svg{display:block; width:17px; height:17px}
.authx-sound .ic-on{display:none}
.authx-sound.on .ic-on{display:block}
.authx-sound.on .ic-off{display:none}

@media(max-width:960px){
  .authx-pane{flex:1 1 auto; max-width:none; padding:34px 24px;
    background:linear-gradient(158deg, rgba(255,255,255,.76) 0%, rgba(250,251,255,.66) 100%)}
  .authx-media{display:none}
  .authx-h1{font-size:28px}
}
/* 关了动效就只放首帧，别让屏幕里一直有东西在动 */
@media (prefers-reduced-motion: reduce){
  .authx-video, .authx-sound{display:none}
  .authx-frame{background:url("/static/bg/auth-poster.jpg") center/cover padding-box, var(--ax-ring) border-box}
  .authx-hero-t, .authx-glow, .authx-halo, .authx-rays{animation:none}
}