/* ============================================================
   真工厂 · 认证版面 AuthSkin（v1.6.1）
   ------------------------------------------------------------
   两条使用路径，共用一套版式：
     1) 前台   tpl/_layout_auth.php      → <main class="authpage">
        会员登录 / 注册 / 找回密码 / 重置密码 / 邮箱验证
     2) 后台   tpl/admin/login.php       → <main class="authpage adm">
        管理员登录（刻意不套后台外壳 —— 未登录时不该出现导航、顶栏与 44 个模块入口）

   为什么单独开一个样式文件、而不是继续用 .authbox：
     .authbox 是「表单放在正文流里」的容器（max-width 760px 居中卡片），
     被发布页 / 实名页等 8 处复用，改成左右分栏会波及它们。
     认证版面是**整页版式**（全宽分栏、左品牌面板、无导航），不属于正文流，故独立成文件。

   设计约束：
     - 只用 theme.css / member.css 已有令牌，不写死浅色值 → 日夜主题靠令牌重映射生效
     - 窄屏下左品牌面板**不整块消失**，只收起卖点清单：它承载「这个平台是干什么的」，
       整块消失会让注册页看起来像钓鱼页（用户没法确认自己在哪个站上输密码）
     - RTL（阿拉伯语）由 html[dir="rtl"] 翻转栅格方向与光晕位置
   ============================================================ */

/* ---------- 令牌：前台沿用 theme.css；后台 .adm 自带一套（浅/深各一） ---------- */
.authpage{
  --ap-ok:#047857; --ap-ok-bg:#e6fbf4; --ap-ok-line:#a7f3d0;
  --ap-err:#b91c1c; --ap-err-bg:#fef2f2; --ap-err-line:#fecaca;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  min-height:calc(100vh - 100px);
  background:var(--paper-2, #f7f9f8);
}
/* 后台后台：不引 style.css / theme.css，故这里把前台令牌换成后台令牌 */
.authpage.adm{
  --paper:#ffffff; --paper-2:#f6f7f9; --paper-3:#eff3f1; --paper-4:#e5ebe8;
  --line:#e6ebf1; --line-2:#eef2f7;
  --t1:#1e293b; --t2:#5b6b80; --t3:#8595a8; --t4:#a8b3c2;
  --g-50:#e6fbf4; --g-200:#a7f3d0; --g-400:#21d1ae; --g-500:#02dba3; --g-600:#00b487; --g-700:#0f9e78; --g-800:#046a55;
  --ap-ok:#047857; --ap-ok-bg:#ecfdf5; --ap-ok-line:#a7f3d0;
  --ap-err:#b91c1c; --ap-err-bg:#fef2f2; --ap-err-line:#fecaca;
  --ap-sh:0 10px 30px -10px rgba(15,23,32,.16),0 2px 8px rgba(15,23,32,.05);
  color-scheme:light;
}
.authpage.adm.dark{
  --paper:#161d27; --paper-2:#0e141b; --paper-3:#131b26; --paper-4:#1f2a38;
  --line:#263140; --line-2:#1f2a38;
  --t1:#e6edf5; --t2:#a9b7c9; --t3:#6d7e94; --t4:#5a6a80;
  --g-700:#53e6bf; --g-800:#7ce9c8;
  --ap-ok:#7ce9c8; --ap-ok-bg:rgba(15,158,120,.14); --ap-ok-line:rgba(2,219,163,.35);
  --ap-err:#ffb4b6; --ap-err-bg:rgba(211,58,62,.14); --ap-err-line:rgba(211,58,62,.45);
  --ap-sh:0 14px 36px -12px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.32);
  color-scheme:dark;
}
/* 前台没有 --ap-sh，这里给默认值（后台 .adm 覆盖） */
.authpage{--ap-sh:0 10px 28px -8px rgba(7,19,15,.12),0 2px 8px rgba(7,19,15,.04)}
.authpage.adm{--ap-sh:0 10px 30px -10px rgba(15,23,32,.16),0 2px 8px rgba(15,23,32,.05)}

/* ---------- 左：品牌面板 ---------- */
.authbrand{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  padding:var(--s-16, 64px) var(--s-12, 48px);
  background:linear-gradient(158deg,#07130f 0%,#0a1c16 44%,#0e2620 100%);
  color:#edf6f2;
}
/* 网格纹理：给纯色大块一点材质，避免"一大片死黑" */
.authbrand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(130% 90% at 18% 2%,#000 32%,transparent 78%);
          mask-image:radial-gradient(130% 90% at 18% 2%,#000 32%,transparent 78%);
}
/* 品牌光晕 */
.authbrand::after{
  content:"";position:absolute;width:540px;height:540px;border-radius:50%;
  right:-150px;top:-130px;pointer-events:none;
  background:radial-gradient(circle,rgba(2,219,163,.30),transparent 66%);
}
.ab-in{position:relative;z-index:1;max-width:470px;width:100%}
.ab-logo{
  display:flex;align-items:baseline;gap:10px;
  font-size:var(--fs-18, 18px);font-weight:800;color:#fff;letter-spacing:.2px;
}
.ab-logo i{
  font-style:normal;font-size:10px;letter-spacing:.22em;
  color:rgba(255,255,255,.42);font-weight:600;
}
.ab-title{
  margin-top:var(--s-8, 32px);
  font-size:var(--fs-30, 30px);line-height:1.32;font-weight:800;color:#fff;letter-spacing:0;
}
.ab-title em{
  font-style:normal;
  background:linear-gradient(96deg,#02dba3,#5fe0bf);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-sub{
  margin-top:var(--s-4, 16px);
  font-size:var(--fs-14, 14px);line-height:1.85;color:rgba(255,255,255,.62);
}
.ab-list{
  margin-top:var(--s-8, 32px);list-style:none;
  display:flex;flex-direction:column;gap:var(--s-4, 16px);
}
.ab-list li{display:flex;gap:var(--s-3, 12px);align-items:flex-start}
.ab-list .abtick{
  flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:rgba(2,219,163,.16);border:1px solid rgba(2,219,163,.45);
  display:inline-flex;align-items:center;justify-content:center;
  color:#5fe0bf;font-size:12px;font-weight:900;line-height:1;
}
.ab-list b{display:block;font-size:var(--fs-14, 14px);color:#fff;font-weight:700;line-height:1.5}
.ab-list small{display:block;margin-top:3px;font-size:var(--fs-12, 12px);color:rgba(255,255,255,.50);line-height:1.75}
.ab-foot{
  margin-top:var(--s-10, 40px);padding-top:var(--s-5, 20px);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:11.5px;line-height:1.8;color:rgba(255,255,255,.38);
}

/* ---------- 右：表单列 ---------- */
.authside{
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-12, 48px) var(--s-6, 24px);
}
.authcard{
  width:100%;max-width:452px;
  background:var(--paper, #fff);
  border:1px solid var(--line, #e4ebe8);
  border-radius:var(--r-lg, 16px);
  box-shadow:var(--ap-sh);
  padding:var(--s-8, 32px);
}
.authcard h1{
  font-size:var(--fs-24, 24px);font-weight:800;color:var(--t1, #0e1f19);letter-spacing:0;
}
.authcard .dim{color:var(--t2, #46594f);font-size:var(--fs-13, 13px);line-height:1.75;margin-top:6px}
.authcard .switch{margin-top:var(--s-5, 20px);font-size:var(--fs-13, 13px);color:var(--t2, #46594f);line-height:1.9}
.authcard .switch a{color:var(--g-700, #008a6b);font-weight:700}
.authcard .switch a:hover{text-decoration:underline}

/* 登录 / 注册 分段切换 */
.authtabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  background:var(--paper-3, #eff3f1);border:1px solid var(--line, #e4ebe8);
  border-radius:var(--r-md, 12px);margin-bottom:var(--s-6, 24px);
}
.authtabs a{
  padding:9px 0;text-align:center;border-radius:9px;
  font-size:var(--fs-14, 14px);font-weight:600;color:var(--t2, #46594f);
  transition:background var(--t-fast, 150ms) var(--e, ease),color var(--t-fast, 150ms) var(--e, ease);
}
.authtabs a:hover{color:var(--t1, #0e1f19)}
.authtabs a.on{
  background:var(--paper, #fff);color:var(--g-700, #008a6b);font-weight:800;
  box-shadow:0 1px 2px rgba(7,19,15,.06),0 1px 3px rgba(7,19,15,.04);
}

/* ---------- 表单（不依赖 .form 的全局定义，后台不需要额外引样式表） ---------- */
.authcard .form label{
  display:block;margin-top:var(--s-4, 16px);
  font-size:var(--fs-13, 13px);font-weight:600;color:var(--t2, #46594f);
}
.authcard .form input,
.authcard .form select{
  width:100%;margin-top:6px;padding:11px 13px;
  font:inherit;font-size:var(--fs-14, 14px);
  border:1px solid var(--line, #e4ebe8);border-radius:var(--r-sm, 8px);
  background:var(--paper, #fff);color:var(--t1, #0e1f19);
  outline:none;transition:border-color var(--t-fast, 150ms) var(--e, ease),box-shadow var(--t-fast, 150ms) var(--e, ease);
}
.authcard .form input::placeholder{color:var(--t4, #9dafa7)}
.authcard .form input:focus,
.authcard .form select:focus{
  border-color:var(--g-500, #02dba3);
  box-shadow:0 0 0 3px rgba(2,219,163,.16);
}
.authcard .form .fhint{
  display:block;margin-top:6px;
  font-size:var(--fs-12, 12px);line-height:1.7;color:var(--t3, #748a80);font-weight:400;
}
.authcard .form .btn{
  margin-top:var(--s-6, 24px);width:100%;padding:12px 0;
  font-size:var(--fs-15, 15px);font-weight:700;letter-spacing:.04em;
}
/* 主按钮：与前台的绿色实心按钮一致（.adm 下同样取值，故不区分作用域） */
.authcard .btn{
  display:inline-block;background:var(--g-500, #02dba3);color:#04281f;
  border:0;border-radius:var(--r-sm, 8px);padding:10px 20px;
  font-weight:700;cursor:pointer;font-size:var(--fs-14, 14px);font-family:inherit;
  transition:background var(--t-fast, 150ms) var(--e, ease),transform var(--t-fast, 150ms) var(--e, ease);
}
.authcard .btn:hover{background:var(--g-400, #21d1ae);transform:translateY(-1px)}
.authcard .btn:active{transform:translateY(0)}
.authcard .btn.ghost{
  background:transparent;border:1px solid var(--line, #e4ebe8);color:var(--t2, #46594f);
}
.authcard .btn.ghost:hover{border-color:var(--g-400, #21d1ae);color:var(--g-700, #008a6b);background:var(--g-50, #e9fbf5)}

/* ---------- 提示条 ---------- */
.authcard .msg-err,
.authcard .msg-ok{
  border-radius:var(--r-sm, 8px);padding:11px 14px;margin-top:var(--s-4, 16px);
  font-size:var(--fs-13, 13px);line-height:1.7;border:1px solid transparent;
}
.authcard .msg-err{background:var(--ap-err-bg);border-color:var(--ap-err-line);color:var(--ap-err)}
.authcard .msg-ok{background:var(--ap-ok-bg);border-color:var(--ap-ok-line);color:var(--ap-ok)}

/* ---------- 前台认证页顶栏（深色定位条 + 白色 logo 条） ---------- */
.authbar{
  background:var(--paper, #fff);border-bottom:1px solid var(--line, #e4ebe8);
}
.authbar .hpin{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4, 16px);height:64px;
}
.authbar-logo{
  display:inline-flex;align-items:baseline;gap:9px;
  font-size:var(--fs-18, 18px);font-weight:800;color:var(--g-800, #046a55);
  white-space:nowrap;
}
.authbar-logo i{
  font-style:normal;font-size:9.5px;letter-spacing:.2em;
  color:var(--t4, #9dafa7);font-weight:600;
}
.authbar-act{display:inline-flex;align-items:center;gap:var(--s-4, 16px);font-size:var(--fs-13, 13px)}
.authbar-act a{color:var(--t2, #46594f);font-weight:600}
.authbar-act a:hover{color:var(--g-700, #008a6b)}

/* ---------- 前台认证页页脚（细版：备案必须留） ---------- */
.authfoot{
  border-top:1px solid var(--line, #e4ebe8);background:var(--paper, #fff);
  padding:var(--s-6, 24px) 0;margin-top:0;
}
.authfoot-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4, 16px);
  flex-wrap:wrap;font-size:var(--fs-12, 12px);color:var(--t3, #748a80);
}
.authfoot-links{display:inline-flex;align-items:center;gap:var(--s-4, 16px);flex-wrap:wrap}
.authfoot-links a{color:var(--t2, #46594f)}
.authfoot-links a:hover{color:var(--g-700, #008a6b)}
.authfoot-disc{
  margin-top:var(--s-3, 12px);font-size:11.5px;line-height:1.8;color:var(--t4, #9dafa7);
}

/* ---------- 后台登录页专属 ---------- */
/* 版本号 / 返回前台：右下角一行，不抢视觉 */
.admlog-foot{
  margin-top:var(--s-6, 24px);padding-top:var(--s-4, 16px);
  border-top:1px solid var(--line, #e4ebe8);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3, 12px);
  font-size:11.5px;color:var(--t3, #748a80);flex-wrap:wrap;
}
.admlog-foot a{color:var(--t2, #46594f)}
.admlog-foot a:hover{color:var(--g-700, #008a6b)}
.admlog-foot code{font-family:Consolas,Monaco,monospace}
/* 主题切换圆钮：与后台外壳同款交互（cookie 持久化）
   放在左侧品牌面板内（该面板本身 position:relative），而不是整页右上角 ——
   深浅主题下右卡会换底色，按钮钉在面板上位置永远稳定 */
.authbrand .ap-tgl{
  position:absolute;top:var(--s-4, 16px);right:var(--s-4, 16px);z-index:3;
  width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#edf6f2;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t-fast, 150ms) var(--e, ease),border-color var(--t-fast, 150ms) var(--e, ease);
}
.authbrand .ap-tgl:hover{transform:rotate(15deg);border-color:rgba(2,219,163,.6)}
/* 后台登录页：左侧品牌面板在浅色主题下也保持深色（品牌识别），
   故两侧对比由面板自身承担；右侧卡片跟随主题。 */
.authpage.adm .authside{background:var(--paper-2)}
.authpage.adm .authbrand{padding:var(--s-12, 48px) var(--s-10, 40px)}
/* 安全提示清单（后台专属）：样式与卖点清单一致，但语义是「别做什么」 */
.ab-list.safe .abtick{background:rgba(240,166,104,.14);border-color:rgba(240,166,104,.42);color:#f0a468}
.ab-list.safe .abtick::before{content:"!";font-weight:900}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .authpage{grid-template-columns:1fr;min-height:0}
  .authbrand{padding:var(--s-8, 32px) var(--s-6, 24px)}
  .ab-title{margin-top:var(--s-5, 20px);font-size:var(--fs-20, 20px)}
  .ab-sub{margin-top:var(--s-2, 8px)}
  /* 只收起卖点清单与免责段，保留「站名 + 一句话定位」——
     手机上整块隐掉，用户就无从确认自己在哪个站输密码 */
  .ab-list,.ab-foot{display:none}
  .authside{padding:var(--s-8, 32px) var(--s-5, 20px) var(--s-12, 48px)}
}
@media (max-width:560px){
  .authcard{padding:var(--s-6, 24px) var(--s-5, 20px);border-radius:var(--r-md, 12px)}
  .authcard h1{font-size:var(--fs-20, 20px)}
  .authbar .hpin{height:56px}
  .authbar-logo i{display:none}
}
/* 打印：只留表单不打印品牌面板（免得打出一整页深色） */
@media print{
  .authbrand,.authbar,.authfoot{display:none}
  .authpage{grid-template-columns:1fr;min-height:0}
  .authcard{box-shadow:none;border:0;padding:0;max-width:100%}
}
/* RTL：光晕翻到左上交汇，其余交给 direction 自动翻转 */
html[dir="rtl"] .authbrand::after{right:auto;left:-150px}
html[dir="rtl"] .authbrand .ap-tgl{right:auto;left:var(--s-4, 16px)}

/* ============================================================================
   v1.10.8 SlideGuard：滑动验证控件（会员登录 / 后台登录共用）
   ----------------------------------------------------------------------------
   设计约束：
     · 不引入任何图片与外部请求（站长在意带宽）—— 纯 CSS/DOM 绘制；
     · 颜色全部走 auth.css 已有的 --ap-* 令牌 + 中性色兜底，白天/黑夜主题自动跟随；
     · 后端 .authpage.dark 下另给一组暗色覆盖（滑块底色在白底上会晃眼）。
   ============================================================================ */
.slide{--sl-h:44px;--sl-brand:var(--ap-ok,#047857);margin:6px 0 14px;user-select:none;-webkit-user-select:none}
.slide-track{
  position:relative;height:var(--sl-h);border-radius:12px;overflow:hidden;touch-action:none;
  background:rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.12);
}
.slide-fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--sl-brand);opacity:.16}
.slide-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#64748b;pointer-events:none;letter-spacing:.2px;
}
.slide-handle{
  position:absolute;top:2px;left:2px;width:calc(var(--sl-h) - 4px);height:calc(var(--sl-h) - 4px);
  border-radius:10px;background:#fff;border:1px solid rgba(15,23,42,.14);
  box-shadow:0 1px 3px rgba(15,23,42,.14);cursor:grab;touch-action:none;
  display:flex;align-items:center;justify-content:center;color:var(--sl-brand);
  transition:transform .18s cubic-bezier(.3,.9,.4,1);
}
.slide.dragging .slide-handle{cursor:grabbing;transition:none}
.slide-handle:focus-visible{outline:2px solid var(--sl-brand);outline-offset:2px}
.slide.ok .slide-track{background:var(--ap-ok-bg,#e6fbf4);border-color:var(--ap-ok-line,#a7f3d0)}
.slide.ok .slide-fill{width:100%!important;opacity:.42}
.slide.ok .slide-handle{background:var(--sl-brand);border-color:var(--sl-brand);color:#fff;cursor:default}
.slide.ok .slide-hint{color:var(--ap-ok,#047857);font-weight:600}
.slide-msg{margin:6px 0 0;min-height:16px;font-size:12px;color:var(--ap-err,#b91c1c)}
.slide-msg.ok{color:var(--ap-ok,#047857)}
.slide+.slide-msg:empty{margin-top:0}

/* 后台暗色主题（.authpage.dark） */
.authpage.dark .slide-track{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.authpage.dark .slide-hint{color:#94a3b8}
.authpage.dark .slide-handle{background:#1b2431;border-color:rgba(255,255,255,.2);color:#7dd3fc}
.authpage.dark .slide.ok .slide-track{background:rgba(4,120,87,.28);border-color:rgba(167,243,208,.45)}
.authpage.dark .slide.ok .slide-handle{background:#047857;border-color:#047857;color:#fff}
.authpage.dark .slide-msg{color:#fca5a5}
.authpage.dark .slide-msg.ok{color:#6ee7b7}