/* 登录页：仿旧式厅堂——黑底金字匾额 + 红木板缝 + 竖排楹联 + 顶部彩绘梁枋。
   全部用 CSS 画，不引外部图片（登录页是首屏，多一个请求就多一分白屏）。
   PC 左右分栏，手机把厅堂收成顶部一条横匾——竖排楹联在窄屏上极占高度，
   硬塞会把表单挤到折叠线以下。 */

:root{
  --wood:#5C2118; --wood-2:#4A1710; --wood-lit:#743023;
  --plaque:#231F1A; --plaque-2:#15120F;
  --leaf:#D9B45C; --leaf-2:#B98F35;
  --beam:#1F4A45; --beam-2:#2C6A61;
}

.auth-body{margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink)}
.auth-wrap{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* ── 厅堂 ───────────────────────────────────────────── */
.hall{
  position:relative;overflow:hidden;color:var(--leaf);
  /* 板缝：竖向重复的暗线 + 高光，模仿木板拼接 */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.42) 0 2px,
      rgba(255,255,255,.028) 2px 5px,
      transparent 5px 156px),
    radial-gradient(150% 110% at 50% 2%, var(--wood-lit) 0%, var(--wood) 34%, var(--wood-2) 88%);
  box-shadow:inset 0 0 180px rgba(0,0,0,.55);
}
/* 顶部彩绘梁枋：一条青绿描金的窄带 */
.beam{
  height:16px;
  background:
    repeating-linear-gradient(90deg,
      var(--leaf-2) 0 4px, transparent 4px 12px, var(--leaf-2) 12px 16px,
      transparent 16px 44px),
    linear-gradient(var(--beam-2), var(--beam));
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.hall-in{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:34px 24px 40px;text-align:center;position:relative;z-index:1;
}
/* 底部暗角：让厅堂"沉"下去，不然整块木板像贴纸 */
.hall::after{
  content:"";position:absolute;inset:auto 0 0;height:42%;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.42));
}

/* 匾额 */
.plaque{
  position:relative;
  background:linear-gradient(160deg, var(--plaque), var(--plaque-2));
  border:1px solid rgba(217,180,92,.45);
  border-radius:3px;padding:14px 44px;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 0 4px rgba(0,0,0,.35);
}
.plaque b{
  font-family:"Songti SC","STSong","SimSun",serif;font-size:44px;line-height:1.1;
  letter-spacing:.34em;text-indent:.34em;display:block;
  color:var(--leaf);text-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 16px rgba(217,180,92,.25);
}
.plaque .seal{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;background:#9B3227;border-radius:1px;opacity:.92;
}

/* 楹联：竖排右起 */
.couplet{display:flex;flex-direction:row-reverse;gap:34px;justify-content:center;
  margin-top:14px}
.couplet p{
  margin:0;writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Songti SC","STSong","SimSun",serif;
  font-size:23px;letter-spacing:.30em;line-height:1.9;
  color:var(--leaf);text-shadow:0 1px 2px rgba(0,0,0,.55);
}
/* 竖排里用全角空格断开上下半句，是传统楹联的处理；手机横排时换成逗号 */
.couplet span::before{content:"　"}
.hall-sub{
  margin:0;font-size:12px;letter-spacing:.44em;text-indent:.44em;
  color:rgba(217,180,92,.62);
}

/* ── 表单侧 ─────────────────────────────────────────── */
.gate{display:flex;justify-content:center;background:var(--paper)}
.gate-in{width:100%;max-width:400px;padding:26px 20px calc(20px + env(safe-area-inset-bottom))}
.gate-h{font-size:21px;line-height:1.45;text-wrap:balance;margin:0 0 8px}
.gate-p{font-size:13px;color:var(--ink-2);line-height:1.85;margin:0 0 18px}
.gate .tabs{margin-bottom:14px}
.gate-foot{border-top:1px solid var(--line);margin-top:22px;padding:14px 0 0;max-width:none}

/* ── 手机：厅堂收成顶部横匾 ──────────────────────────── */
@media (max-width:859px){
  .hall{flex:none}
  .hall-in{gap:16px;padding:24px 20px 26px}
  .plaque{padding:9px 30px}
  .plaque b{font-size:31px}
  .plaque .seal{width:10px;height:10px;top:5px}
  /* 竖排在窄屏太吃高度，转成两行横排 */
  .couplet{flex-direction:row;gap:18px;flex-wrap:wrap;margin-top:0}
  .couplet p{writing-mode:horizontal-tb;font-size:14.5px;letter-spacing:.14em;line-height:1.7}
  .couplet span::before{content:"，"}
  .hall-sub{font-size:11px;letter-spacing:.3em;text-indent:.3em}
}

/* ── PC：左右分栏，厅堂占大半 ────────────────────────── */
@media (min-width:860px){
  .auth-wrap{flex-direction:row}
  .hall{flex:1 1 56%;display:flex;flex-direction:column}
  .gate{flex:1 1 44%;align-items:center;overflow-y:auto}
  .gate-in{max-width:392px;padding:40px 40px}
  .gate-h{font-size:25px}
  .plaque b{font-size:52px}
  .couplet p{font-size:26px}
}
@media (min-width:1280px){
  .plaque{padding:18px 56px}
  .plaque b{font-size:62px}
  .couplet{gap:46px}
  .couplet p{font-size:30px}
}

/* 深色模式下纸色一侧跟随全局色板；厅堂本身就是暗的，无需切换 */
@media (prefers-reduced-motion:no-preference){
  .plaque{transition:box-shadow .4s}
}