/* =============================================================
   熄影解析 — 后台登录
   ============================================================= */

:root{
  --c-primary:#5b6cff;
  --c-primary-deep:#4553e6;
  --c-violet:#8b5cf6;
  --grad-main:linear-gradient(135deg,#5b6cff 0%,#8b5cf6 100%);
  --t1:#111528;--t2:#4a5169;--t3:#8b91a7;--t4:#aeb3c4;
  --line:#e8eaf3;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* 全局 SVG 尺寸约束：SVG 无宽高属性时会按替换元素默认尺寸（约 300×150）渲染成巨图 */
svg{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;overflow:visible}
html,body{height:100%}
body{
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--t1);
  background:#0d1022;
  display:grid;place-items:center;padding:24px;
  position:relative;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 背景极光 */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 16s ease-in-out infinite alternate}
.bg .b1{width:560px;height:560px;top:-180px;left:-140px;background:radial-gradient(circle,rgba(91,108,255,.6),transparent 70%)}
.bg .b2{width:480px;height:480px;bottom:-170px;right:-120px;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 70%);animation-delay:-6s}
.bg .b3{width:360px;height:360px;top:38%;left:52%;background:radial-gradient(circle,rgba(255,122,69,.18),transparent 70%);animation-delay:-11s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30px,-24px,0) scale(1.08)}}

/* 细网格 */
.bg::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 70%)}

/* 卡片 */
.box{position:relative;z-index:2;width:100%;max-width:400px;
  padding:38px 34px 30px;border-radius:24px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 30px 70px rgba(4,6,20,.55),inset 0 1px 0 rgba(255,255,255,.9);
  animation:cardIn .5s var(--ease-out)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.brand{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.mark{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:21px;background:var(--grad-main);
  box-shadow:0 10px 24px rgba(91,108,255,.42)}
.brand strong{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.2px}
.brand small{color:var(--t3);font-size:12.5px}

/* 错误提示 */
.err{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;
  background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-size:13.5px;margin-bottom:18px;
  animation:alertIn .3s var(--ease-out)}
.err svg{width:16px;height:16px;flex:none}
@keyframes alertIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 成功提示（改密后跳转过来时展示） */
.ok{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;
  background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:13.5px;margin-bottom:18px;
  animation:alertIn .3s var(--ease-out)}
.ok svg{width:16px;height:16px;flex:none}

/* 表单 */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--t2);margin-bottom:7px;font-weight:600}
.in-wrap{position:relative;display:flex;align-items:center}
.in-wrap .ico{position:absolute;left:14px;color:var(--t4);font-size:16px;pointer-events:none;
  transition:color .18s var(--ease)}
.in-wrap:focus-within .ico{color:var(--c-primary)}
input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  font-size:15px;font-family:inherit;color:var(--t1);background:#fbfcff;transition:.16s var(--ease)}
input::placeholder{color:var(--t4)}
input:focus{outline:none;border-color:var(--c-primary);background:#fff;
  box-shadow:0 0 0 4px rgba(91,108,255,.12)}
.in-wrap input{padding-left:41px}
.in-wrap input[type=password]{padding-right:44px}
/* 浏览器自动填充：去掉默认的淡蓝底，保持主题观感 */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fbfcff inset;
  -webkit-text-fill-color:var(--t1);
  caret-color:var(--t1);
  transition:background-color 99999s ease-out}
.eye{position:absolute;right:8px;width:32px;height:32px;display:grid;place-items:center;
  border:none;border-radius:9px;background:none;color:var(--t4);cursor:pointer;font-size:15px;
  transition:.16s var(--ease)}
.eye:hover{background:#f1f3fa;color:var(--t2)}

/* 提交 */
button.submit{width:100%;margin-top:10px;padding:13px;border:none;border-radius:12px;cursor:pointer;
  color:#fff;font-size:15px;font-weight:700;letter-spacing:1px;font-family:inherit;
  background:var(--grad-main);box-shadow:0 10px 24px rgba(91,108,255,.36);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
button.submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(91,108,255,.44)}
button.submit:active{transform:translateY(0) scale(.99)}

.back{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;
  color:var(--t3);font-size:13px;text-decoration:none;transition:.18s var(--ease)}
.back:hover{color:var(--c-primary)}
.back svg{width:14px;height:14px}

.tip{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--t3);text-align:center;line-height:1.7}

@media (max-width:480px){
  body{padding:16px}
  .box{padding:30px 22px 24px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* 与后台一致的登录入口 */
:root{--c-primary:#245bea;--c-primary-deep:#174bd0;--grad-main:linear-gradient(135deg,#245bea,#4d78ef);--t1:#172234;--t2:#4f5e73;--t3:#7d899b;--t4:#abb5c4;--line:#e2e7ef}
body{background:#f3f6fb;color:var(--t1)}.bg .b1{background:radial-gradient(circle,rgba(36,91,234,.20),transparent 70%)}.bg .b2{background:radial-gradient(circle,rgba(77,120,239,.16),transparent 70%)}.bg .b3{background:radial-gradient(circle,rgba(36,91,234,.10),transparent 70%)}.bg::after{opacity:.2;background-image:radial-gradient(rgba(55,89,149,.16) 1px,transparent 1px)}.box{max-width:400px;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 44px rgba(37,63,108,.12);padding:34px 32px 29px;background:#fff}.mark{width:42px;height:42px;border-radius:10px;background:#245bea;box-shadow:none;font-size:18px}.brand strong{font-size:17px}.brand small{font-size:11px}.field label{font-size:12px}.in-wrap input{border-radius:7px;background:#fbfcfe}.in-wrap:focus-within .ico{color:#245bea}input:focus{border-color:#245bea;box-shadow:0 0 0 3px rgba(36,91,234,.11)}button.submit{border-radius:7px;background:#245bea;box-shadow:none;letter-spacing:0}button.submit:hover{background:#174bd0;box-shadow:0 7px 15px rgba(36,91,234,.22)}.tip{font-size:11px}