/* 登录页专用样式。整页只有这一套深色配色，不跟随系统浅色主题——
   登录是独立的门户页，深色更符合“科技感”的定位。所有颜色显式声明，
   不依赖 app.css 的变量，也不引任何外部资源（字体、图片、脚本全无）。 */

:root{
  --ink:#e8f2ee;          /* 正文 */
  --dim:#8ea39c;          /* 次要文字 */
  --line:rgba(140,220,195,.16);
  --brand:#3ddba4;        /* 主色：偏青的荧光绿 */
  --brand-2:#39b0ff;      /* 次色：科技蓝 */
  --bg:#060b0d;
  --danger:#ff7a6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body.login-page{
  margin:0;min-height:100dvh;position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -10%, #0d2a24 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 105%, #0a1f30 0%, transparent 62%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px;
}

/* 背景网格：两组线性渐变叠出等距细线，比贴图省得多 */
.bg-grid{
  position:fixed;inset:-2px;pointer-events:none;
  background-image:
    linear-gradient(rgba(120,220,190,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,190,.055) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 45%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 45%, #000 35%, transparent 78%);
  animation:grid-drift 26s linear infinite;
}
@keyframes grid-drift{to{background-position:48px 48px, 48px 48px}}

/* 两团缓慢呼吸的辉光 */
.bg-glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}
.bg-glow.g1{width:520px;height:520px;top:-160px;right:-120px;
  background:radial-gradient(circle,#12b981 0%,transparent 70%);animation:breathe 12s ease-in-out infinite}
.bg-glow.g2{width:460px;height:460px;bottom:-180px;left:-140px;
  background:radial-gradient(circle,#1f6feb 0%,transparent 70%);animation:breathe 15s ease-in-out infinite reverse}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.16);opacity:.62}}

/* 代谢网络示意：连线做描边流动，节点做脉冲 */
.bg-net{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.net-links path{
  fill:none;stroke:rgba(61,219,164,.30);stroke-width:1.1;
  stroke-dasharray:6 10;animation:flow 9s linear infinite;
}
.net-links path:nth-child(2n){stroke:rgba(57,176,255,.26);animation-duration:13s}
.net-links path:nth-child(3n){animation-duration:17s}
@keyframes flow{to{stroke-dashoffset:-160}}
.net-nodes circle{fill:rgba(61,219,164,.55);animation:pulse 4.5s ease-in-out infinite}
.net-nodes circle:nth-child(2n){fill:rgba(57,176,255,.5);animation-duration:6s}
.net-nodes circle:nth-child(3n){animation-delay:1.4s}
.net-nodes circle:nth-child(5n){animation-delay:2.6s}
@keyframes pulse{0%,100%{opacity:.35;r:4}50%{opacity:.95}}

/* 卡片 */
.login-shell{position:relative;z-index:2;width:100%;max-width:440px;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.login-card{
  position:relative;width:100%;padding:34px 32px 28px;border-radius:20px;
  background:linear-gradient(180deg, rgba(18,32,30,.86) 0%, rgba(10,20,20,.92) 100%);
  border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
/* 顶边一道横向流光 */
.card-sheen{position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

.brand-row{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.brand-mark{width:46px;height:46px;flex:none}
.brand-mark .ring{fill:none;stroke:rgba(61,219,164,.30);stroke-width:1.2;
  transform-origin:24px 24px;animation:spin 22s linear infinite}
.brand-mark .ring-2{stroke:rgba(57,176,255,.30);animation-duration:15s;animation-direction:reverse}
.brand-mark .bond{fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linejoin:round}
.brand-mark .dot{fill:var(--brand-2)}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-name{font-size:18px;font-weight:700;letter-spacing:.2px;color:#f2fbf7}
.brand-en{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);margin-top:3px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{text-align:center}
.stat b{display:block;font-size:19px;font-weight:700;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:.3px}
.stat span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}

.err{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 13px;
  border-radius:10px;font-size:13.5px;color:var(--danger);
  background:rgba(255,122,107,.09);border:1px solid rgba(255,122,107,.28)}
.err svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round}

.login-form{display:flex;flex-direction:column;gap:15px}
.field{display:block}
.field-label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:7px;letter-spacing:.4px}
.field-box{display:flex;align-items:center;gap:10px;padding:0 13px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.field-box:focus-within{border-color:rgba(61,219,164,.6);background:rgba(61,219,164,.06);
  box-shadow:0 0 0 3px rgba(61,219,164,.13)}
.field-icon{width:17px;height:17px;flex:none;fill:none;stroke:var(--dim);
  stroke-width:1.5;stroke-linecap:round;transition:stroke .18s ease}
.field-box:focus-within .field-icon{stroke:var(--brand)}
.field-box input{flex:1;min-width:0;padding:12px 0;border:0;background:transparent;
  color:var(--ink);font-size:15px;outline:none}
.field-box input::placeholder{color:rgba(142,163,156,.6)}
/* 关掉浏览器自动填充带来的白底 */
.field-box input:-webkit-autofill,
.field-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s}

.submit{display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;padding:13px 18px;border:0;border-radius:11px;cursor:pointer;
  font-size:15.5px;font-weight:600;letter-spacing:.5px;color:#04140f;
  background:linear-gradient(135deg,var(--brand) 0%,#2fc9c0 55%,var(--brand-2) 100%);
  background-size:180% 100%;
  box-shadow:0 8px 24px rgba(61,219,164,.24);
  transition:background-position .35s ease, box-shadow .2s ease, transform .12s ease}
.submit:hover{background-position:100% 0;box-shadow:0 10px 30px rgba(61,219,164,.36)}
.submit:active{transform:translateY(1px)}
.submit svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.tip{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--dim);text-align:center}
.page-foot{margin:0;font-size:12px;color:rgba(142,163,156,.72);text-align:center}

/* 平板与手机 */
@media (max-width:520px){
  body.login-page{padding:18px}
  .login-card{padding:28px 22px 24px;border-radius:16px}
  .brand-name{font-size:16.5px}
  .stat b{font-size:17px}
  .bg-glow{filter:blur(70px)}
}
/* 屏幕很矮时（横屏手机）收紧留白 */
@media (max-height:620px){
  .stat-row{margin-bottom:16px;padding:9px 0}
  .brand-row{margin-bottom:14px}
  .tip{display:none}
}

/* 尊重系统的“减少动态效果”设置 */
@media (prefers-reduced-motion:reduce){
  .bg-grid,.bg-glow,.net-links path,.net-nodes circle,.card-sheen,.brand-mark .ring{
    animation:none}
}