/* 每日学习 · 登录页独立样式（public/css/login.css）
 * 由 server.js 的 /css/login 路由提供（刻意不带 .css 扩展名：同机 WordPress 会拦截 .css 请求，
 * 与 /css/app、/js/app 保持同一「无扩展名」可达策略）。
 * 定位：登录页不加载 app.js/app.css（省 ~310KB），故本文件自包含，仅覆盖登录/注册所需样式。
 * 变量命名与 app.css 保持一致（--primary / --primary-d / --primary-l / --red），便于后续统一换肤。
 */
:root{
  --primary:#2563eb; --primary-d:#1d4ed8; --primary-l:#dbeafe;
  --ink:#0f172a; --ink-2:#475569; --muted:#64748b;
  --line:#e2e8f0; --bg:#f8fafc; --card:#fff;
  --red:#dc2626; --red-l:#fef2f2;
  --green:#16a34a;
  --radius:16px;
  --shadow:0 18px 45px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; min-height:100dvh;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 520px at 12% -10%, #dbeafe 0%, rgba(219,234,254,0) 60%),
    radial-gradient(900px 480px at 100% 0%, #e0e7ff 0%, rgba(224,231,255,0) 55%),
    linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
  background-attachment:fixed;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.wrap{width:100%; max-width:420px}

/* ===== 品牌区 ===== */
.brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; text-align:center}
.logo{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:#fff; font-size:24px; font-weight:700; letter-spacing:1px;
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}
.brand h1{margin:0; font-size:22px; font-weight:700; letter-spacing:.5px}
.brand p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.6}

/* ===== 卡片 ===== */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 20px 20px; border:1px solid rgba(226,232,240,.9);
}

/* 分段控件：登录 / 注册 */
.tabs{position:relative; display:flex; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:18px}
.tabs i{
  position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:#fff; border-radius:9px; box-shadow:0 2px 6px rgba(15,23,42,.10);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.tabs.on-reg i{transform:translateX(100%)}
.tabs button{
  position:relative; z-index:1; flex:1; border:0; background:none; cursor:pointer;
  padding:9px 0; font-size:14px; font-weight:600; color:var(--muted); font-family:inherit;
}
.tabs button.on{color:var(--primary-d)}

/* 表单 */
.form{display:none}
.form.on{display:block}
.lbl{display:block; font-size:12.5px; color:var(--ink-2); margin:0 0 6px 2px; font-weight:600}
.fld{
  width:100%; height:48px; padding:0 14px; font-size:15px; font-family:inherit;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.fld:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12)}
select.fld{appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;}
.fld[readonly]{background:#f8fafc; color:var(--muted)}
.mb{margin-bottom:14px}
.pw{position:relative}
.pw .eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; padding:8px 10px; font-size:15px; color:var(--muted);
}
.pw .fld{padding-right:52px}

/* 记住我 / 忘记密码 */
.row{display:flex; align-items:center; justify-content:space-between; margin:14px 0 16px; font-size:13px}
.remember{display:flex; align-items:center; gap:7px; cursor:pointer; color:var(--ink-2); user-select:none}
.remember input{width:17px; height:17px; accent-color:var(--primary); cursor:pointer}
.link{border:0; background:none; padding:0; font:inherit; color:var(--primary); cursor:pointer; font-size:13px}

/* 按钮 */
.btn{
  width:100%; height:48px; border:0; border-radius:12px; cursor:pointer;
  background:var(--primary); color:#fff; font-size:15.5px; font-weight:600; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s, opacity .15s;
}
.btn:hover{background:var(--primary-d)}
.btn:disabled{opacity:.65; cursor:default}
.spin{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  border-radius:50%; animation:sp .7s linear infinite; display:none;
}
.busy .spin{display:block}
@keyframes sp{to{transform:rotate(360deg)}}

/* 错误提示 */
.err{
  display:none; margin-top:14px; padding:10px 12px; border-radius:10px;
  background:var(--red-l); border:1px solid #fecaca; color:var(--red);
  font-size:13px; line-height:1.5;
}
.err.on{display:block; animation:shake .32s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}
}

/* 页脚 */
.foot{margin-top:16px; text-align:center; font-size:12px; color:var(--muted); line-height:1.9}
.foot .ver{opacity:.85}
.foot a{color:var(--primary); text-decoration:none; cursor:pointer}

/* 弹层（忘记密码） */
.mask{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50}
.modal{background:#fff; border-radius:14px; padding:20px; max-width:340px; width:100%; box-shadow:var(--shadow)}
.modal h3{margin:0 0 10px; font-size:16px}
.modal p{margin:0 0 8px; font-size:13.5px; color:var(--ink-2); line-height:1.7; white-space:pre-wrap}
.modal .btn{margin-top:14px; height:42px; font-size:14px}

/* ===== 微信登录入口（v1.1.0.44）=====
 * 网页登录页无法调起小程序的 wx.login，这里用「6 位配对码 + 小程序输入」的方式代替扫码，
 * 省掉微信开放平台网站应用（300 元/年认证 + 另一套 appid/secret）。
 * 触控区一律 ≥44px；配色用 --green，与微信品牌色接近且与主色区分。 */
.or{position:relative;text-align:center;margin:16px 0 12px}
.or:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.or span{position:relative;display:inline-block;padding:0 12px;background:var(--card);color:var(--muted);font-size:12px}
.btn-wx{
  width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid #16a34a;border-radius:12px;background:#16a34a;color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}
.btn-wx:active{background:#15803d}
.btn-wx[disabled]{opacity:.6;cursor:default}
.wx-ico{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.wx-hint{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6;text-align:center}
.rg-tip{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
/* 6 位配对码弹层 */
.wx-code{
  font-size:34px;font-weight:800;letter-spacing:8px;text-align:center;
  margin:14px 0 10px;color:var(--primary);font-variant-numeric:tabular-nums;
}
.wx-steps{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.7}
.wx-status{text-align:center;font-size:13px;color:var(--muted);margin-bottom:12px}

/* 窄屏微调 */
@media (max-width:380px){
  .card{padding:18px 16px}
  .brand h1{font-size:20px}
}

/* ================= 深色模式（与 app.css 同一套「柔和深灰蓝」原则）=================
 * 登录页是未登录时的第一屏，深浅色必须与站内一致，避免进入应用时突兀切换。
 */
[data-theme="dark"]{
  color-scheme:dark;
  --primary:#60a5fa; --primary-d:#3b82f6; --primary-l:#13233d;
  --ink:#e6e9ef; --ink-2:#a8b0bd; --muted:#7b8494;
  --line:#363c47; --bg:#22262f; --card:#262b34;
  --red:#f87171; --red-l:#2c1417;
  --shadow:0 18px 45px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.24);
}
[data-theme="dark"] body{
  background:
    radial-gradient(1100px 520px at 12% -10%, #1b2740 0%, rgba(27,39,64,0) 60%),
    radial-gradient(900px 480px at 100% 0%, #1d2440 0%, rgba(29,36,64,0) 55%),
    linear-gradient(180deg,#1e222a 0%,#181c24 100%);
}
[data-theme="dark"] .card{border-color:rgba(54,60,71,.9)}
[data-theme="dark"] .tabs{background:#1a1f27}
[data-theme="dark"] .tabs i{background:#2b3548;box-shadow:0 2px 6px rgba(0,0,0,.30)}
[data-theme="dark"] .tabs button.on{color:#93c5fd}
[data-theme="dark"] .fld{background:#1a1f27;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .fld:focus{background:#20252e}
[data-theme="dark"] .modal{background:#262b34}
[data-theme="dark"] .logo{box-shadow:0 10px 24px rgba(0,0,0,.35)}
[data-theme="dark"] .foot{color:var(--muted)}