/* 登录页（UI.png 左稿：天空渐变背景 + 居中白卡；注册/找回密码文案按需求已删除）
   v1.20：视觉升级 —— 只改外观：类名 / DOM / login.js 依赖的 id 与 is-hidden / is-loading 一个没动。
   关键规则逐字保留：@media (max-width:560px) 与其中的 background:#fff（手机竖屏白底通栏）。 */
/* 登录页只引这一份 CSS（不含 app.css），所以这两条基础规则必须自己带上（M6 实测）：
   box-sizing：没有它，卡片 width:100% + padding 会撑破手机视口（430 > 390）；
   .is-hidden：login.js 用它开关验证码栏和报错条，没有它空报错条会一直显示。 */
*{box-sizing:border-box}
.is-hidden{display:none !important}
body.login-page{margin:0;min-height:100vh;font:14px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:#1f2937;-webkit-font-smoothing:antialiased}
/* 天空渐变底 + 两团柔光，避免大片纯色显得空 */
.login-wrap{position:relative;overflow:hidden;min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#8fc7f5 0%,#bfe0fa 40%,#e3f1fd 58%,#cfe9f7 100%)}
.login-wrap::before{content:"";position:absolute;left:-10%;right:-10%;top:-24%;height:72%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.78),rgba(255,255,255,0))}
.login-wrap::after{content:"";position:absolute;right:-10%;bottom:-16%;width:44vmax;height:44vmax;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0))}
.login-card{position:relative;z-index:1;width:100%;max-width:372px;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 26px 60px -26px rgba(12,48,96,.5),0 2px 6px rgba(12,48,96,.08);padding:28px 28px 24px;animation:card-in .34s cubic-bezier(.22,.61,.36,1)}
@keyframes card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.login-brand{text-align:center;margin-bottom:16px}
.login-logo{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#eaf3ff,#d7e8ff);color:#2f7cf6;box-shadow:inset 0 0 0 1px #cfe2ff,0 10px 20px -14px rgba(47,124,246,.95)}
.login-title{margin:10px 0 2px;font-size:22px;letter-spacing:4px;color:#0f2a52}
.login-sub{margin:0;font-size:12px;color:#6b7280}
.login-tabs{display:flex;justify-content:center;border-bottom:1px solid #e5e7eb;margin-bottom:18px}
.login-tab{position:relative;padding:8px 18px;font-size:14px;color:#6b7280}
.login-tab.is-active{color:#1d4ed8;font-weight:600}
.login-tab.is-active::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:linear-gradient(90deg,#5b9bff,#2f7cf6);border-radius:2px}
.login-form{display:flex;flex-direction:column;gap:12px}
.lfld{display:flex;align-items:center;gap:8px;height:42px;border:1px solid #e5e7eb;border-radius:10px;padding:0 12px;background:#fff;transition:border-color .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s cubic-bezier(.22,.61,.36,1)}
.lfld:hover{border-color:#cbd5e1}
.lfld:focus-within{border-color:#2f7cf6;box-shadow:0 0 0 3px rgba(47,124,246,.14)}
.lfld-ico{display:grid;place-items:center;color:#9ca3af;transition:color .16s cubic-bezier(.22,.61,.36,1)}
.lfld:focus-within .lfld-ico{color:#2f7cf6}
.lfld input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;background:transparent;color:#1f2937}
.lfld input::placeholder{color:#9ca3af}
.captcha-img{height:32px;width:92px;border-radius:6px;border:1px solid #e5e7eb;cursor:pointer;background:#f1f5f9;object-fit:contain}
.captcha-img.is-loading{opacity:.35}
.captcha-refresh{flex:0 0 auto;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:#eef2f7;color:#4b5563;font-size:12px;line-height:24px;cursor:pointer;transition:background .16s cubic-bezier(.22,.61,.36,1),color .16s cubic-bezier(.22,.61,.36,1)}
.captcha-refresh:hover{background:#e2e8f0;color:#1d4ed8}
.remember{display:flex;align-items:center;gap:6px;font-size:13px;color:#4b5563;user-select:none}
.remember input{width:14px;height:14px;accent-color:#2f7cf6}
.login-error{margin:0;font-size:13px;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:8px 12px;animation:shake-in .28s cubic-bezier(.22,.61,.36,1)}
@keyframes shake-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.login-submit{height:42px;border:0;border-radius:10px;background:linear-gradient(180deg,#3d86f7,#2f7cf6);color:#fff;font:600 15px/1 system-ui,"Microsoft YaHei",sans-serif;letter-spacing:2px;cursor:pointer;box-shadow:0 2px 6px rgba(31,106,224,.3),0 14px 26px -16px rgba(31,106,224,.95);transition:background .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s cubic-bezier(.22,.61,.36,1),transform .12s cubic-bezier(.22,.61,.36,1)}
.login-submit:hover{background:linear-gradient(180deg,#4a90ff,#1f6ae0)}
.login-submit:active{transform:translateY(1px)}
.login-submit:disabled{opacity:.6;cursor:default;transform:none}
.login-hint{margin:16px 0 0;font-size:12px;color:#6b7280;background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;padding:8px 10px;line-height:1.7}
.login-hint a{color:#1d4ed8;text-decoration:underline}
/* 手机竖屏（UI.png「登录页面（手机端）」稿）：白底通栏、卡片不描边，控件加高到 44px 便于点按 */
@media (max-width:560px){
  .login-wrap{padding:0;background:#fff}
  .login-wrap::before,.login-wrap::after{display:none}
  .login-card{max-width:none;padding:30px 20px;border:0;border-radius:0;box-shadow:none;animation:none}
  .login-logo{width:54px;height:54px}
  .login-title{font-size:20px}
  .login-tabs{margin-bottom:18px}
  .lfld{height:44px}
  .login-submit{height:44px}
  .captcha-img{height:34px;width:96px}
}
@media (prefers-reduced-motion:reduce){
  .login-card,.login-error{animation:none}
}