/* ============================================================
   ng.css · 麦灵「神经网格」皮肤（NEURAL GRID）
   2026.9.16 Sky｜劭珩选定 STYLE 02，要求**整套账号页统一**

   用法：<body class="ng"> + 页面里放 <div class="ng-bg">…</div>
   说明：本皮肤**永远深色**（风格需要），不跟随站点主题切换。
   只换皮：所有 mc-* 类名与页面逻辑保持原样。
   ============================================================ */

:root{
  --ng-bg:#06070d;
  --ng-panel:#0a0d18;
  --ng-ink:#d8e6f2;
  --ng-dim:#7c8aa5;
  --ng-cyan:#22d3ee;
  --ng-violet:#a855f7;
  --ng-line:rgba(34,211,238,.22);
  --ng-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
}

/* ---------- 基础 ---------- */
body.ng{
  background:var(--ng-bg);
  color:var(--ng-ink);
  min-height:100vh;
  overflow-x:hidden;
}
body.ng a{color:var(--ng-cyan)}

/* ---------- 背景层（纯 CSS，无 JS） ---------- */
.ng-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.ng-grid{
  position:absolute;inset:-40%;
  background-image:linear-gradient(rgba(34,211,238,.13) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.13) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(520px) rotateX(58deg);
  animation:ngFlow 9s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,transparent 70%);
}
@keyframes ngFlow{to{background-position:0 46px,46px 0}}
.ng-scan{
  position:absolute;left:0;right:0;height:190px;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.09),transparent);
  animation:ngScan 7s linear infinite;
}
@keyframes ngScan{from{top:-190px}to{top:100%}}
.ng-topline{position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ng-cyan),var(--ng-violet),transparent);opacity:.85}
.ng-glow{position:absolute;top:-170px;left:50%;transform:translateX(-50%);
  width:780px;height:430px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(34,211,238,.17),transparent 66%);filter:blur(20px)}
@media (prefers-reduced-motion:reduce){
  .ng-grid,.ng-scan{animation:none}
}

/* ---------- 导航条深色化 ---------- */
body.ng .nav{position:sticky;top:0;z-index:20;
  background:rgba(6,7,13,.80);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ng-line)}
body.ng .nav a{color:#b9c6d6}
body.ng .nav a:hover{color:#fff}
body.ng .nav .brand{color:#fff}
body.ng .nav .btn-sm{background:linear-gradient(100deg,#22d3ee,#67e8f9);color:#04121a;border:0}
body.ng .theme-btn{background:rgba(255,255,255,.08);color:#cfe9f5;
  border-color:rgba(34,211,238,.3)}

/* ---------- 居中面板（注册/登录/重置/验证 共用） ---------- */
.ng-main{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 64px);padding:44px 18px 70px}
.ng-panel{width:100%;max-width:452px;padding:2px;border-radius:16px;
  background:linear-gradient(135deg,rgba(34,211,238,.85),rgba(168,85,247,.7),rgba(34,211,238,.18));
  box-shadow:0 0 60px rgba(34,211,238,.18),0 26px 60px rgba(0,0,0,.72)}
.ng-panel.wide{max-width:760px}
.ng-inner{background:rgba(8,10,18,.94);border-radius:15px;padding:34px 32px 28px}
.ng-tag{display:inline-block;font:600 11px/1 var(--ng-mono);letter-spacing:1.5px;color:var(--ng-cyan);
  border:1px solid rgba(34,211,238,.45);border-radius:6px;padding:6px 10px;margin-bottom:18px;
  background:rgba(34,211,238,.07)}
.ng-title{margin:0 0 10px;font-size:26px;letter-spacing:-.5px;color:#fff;font-weight:700}
.ng-title em{font-style:normal;color:var(--ng-cyan)}
.ng-sub{margin:0 0 22px;font:400 12.5px/1.75 var(--ng-mono);color:var(--ng-dim)}
.ng-sub b{color:#b6c6d8;font-weight:600}
.ng-foot{margin-top:20px;display:flex;justify-content:space-between;
  font:400 11px/1 var(--ng-mono);color:#4e6072;
  border-top:1px solid rgba(34,211,238,.14);padding-top:12px}

/* ---------- 表单（mc-* 兼容：页面无需改类名） ---------- */
body.ng .mc-field{margin-bottom:15px}
body.ng .mc-field label,
body.ng .ng-field label{display:block;font:600 11px/1 var(--ng-mono);letter-spacing:1.1px;
  color:#5f7f96;margin-bottom:7px;text-transform:uppercase}
body.ng .mc-input,
body.ng .ng-input{width:100%;box-sizing:border-box;padding:13px 14px;
  font:400 14px/1.35 var(--ng-mono);color:#d8f6ff;
  background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.28);
  border-radius:9px;outline:none;transition:.18s}
body.ng .mc-input::placeholder{color:#4a5c72}
body.ng .mc-input:focus,
body.ng .ng-input:focus{border-color:var(--ng-cyan);background:rgba(34,211,238,.10);
  box-shadow:0 0 0 3px rgba(34,211,238,.15),inset 0 0 22px rgba(34,211,238,.06)}

body.ng .mc-btn{
  display:inline-block;width:100%;box-sizing:border-box;margin-top:8px;padding:14px;
  border:0;border-radius:9px;cursor:pointer;text-align:center;text-decoration:none;
  font:700 14px/1 var(--ng-mono);letter-spacing:1.2px;color:#04121a;
  background:linear-gradient(100deg,#22d3ee,#67e8f9 50%,#a855f7);
  box-shadow:0 10px 30px rgba(34,211,238,.28);transition:.18s}
body.ng .mc-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
body.ng .mc-btn:disabled{opacity:.6;cursor:default}
body.ng .mc-btn.ghost{
  color:#bfeaf7;background:rgba(34,211,238,.10);
  border:1px solid rgba(34,211,238,.42);box-shadow:none}
body.ng .mc-btn.ghost:hover:not(:disabled){background:rgba(34,211,238,.18)}
body.ng .mc-btn.danger{
  color:#ffd9df;background:rgba(251,113,133,.14);
  border:1px solid rgba(251,113,133,.5);box-shadow:none}
body.ng .mc-btn.danger:hover:not(:disabled){background:rgba(251,113,133,.24)}

/* ---------- 消息 / 横幅（MC.msg 会写这些类名） ---------- */
body.ng .mc-msg{font:400 12.5px/1.65 var(--ng-mono);margin-top:12px;display:none}
body.ng .mc-msg.show{display:block}
body.ng .mc-msg.ok{color:#34d399}
body.ng .mc-msg.err{color:#fb7185}
body.ng .mc-banner{display:none}
body.ng .mc-banner.show{display:block;margin-bottom:16px;padding:10px 12px;border-radius:8px;
  font:400 12px/1.6 var(--ng-mono);color:#9fe8ff;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3)}
body.ng .mc-hint{margin-top:16px;font:400 11.5px/1.8 var(--ng-mono);color:#6d7f96}
body.ng .mc-hint a{color:var(--ng-cyan);text-decoration:none}
body.ng .mc-hint a:hover{text-decoration:underline}
body.ng .mc-mono{font-family:var(--ng-mono);color:#9fb4c7}

/* ---------- 内容卡片（账号页用） ---------- */
body.ng .mc-wrap{position:relative;z-index:3;padding:38px 18px 70px;max-width:820px;margin:0 auto}
body.ng .mc-card{
  background:rgba(10,13,24,.92);border:1px solid rgba(34,211,238,.22);
  border-radius:14px;padding:22px 22px 20px;margin-bottom:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
body.ng .mc-card:last-child{margin-bottom:0}
body.ng .mc-title{margin:0 0 10px;font-size:22px;color:#fff;font-weight:700;letter-spacing:-.3px}
body.ng .mc-sub{margin:0 0 18px;font:400 12.5px/1.7 var(--ng-mono);color:var(--ng-dim)}
body.ng .mc-sub b{color:#b6c6d8}
body.ng .mc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px dashed rgba(34,211,238,.16);
  font:400 13px/1.5 var(--ng-mono);color:#c6d4e2}
body.ng .mc-row:last-child{border-bottom:0}
body.ng .mc-row b{color:#fff;font-weight:600}
body.ng .mc-sec{margin:26px 0 10px;font:700 12px/1 var(--ng-mono);
  letter-spacing:1.6px;color:#5f7f96;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}
body.ng .mc-sec::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--ng-line),transparent)}
body.ng .mc-tag{display:inline-block;font:600 11px/1 var(--ng-mono);
  padding:4px 8px;border-radius:5px;color:#7ff0ff;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.35)}

/* 验证码框（账号页） */
body.ng #verifyBox .mc-input{max-width:118px}
body.ng #verifyBox .mc-btn{width:auto;margin-top:0;padding:9px 16px}

/* ---------- 响应式 ---------- */
@media (max-width:560px){
  .ng-inner{padding:26px 20px 22px}
  .ng-title{font-size:22px}
  .ng-main{padding:26px 14px 50px;min-height:auto}
  body.ng .mc-wrap{padding:24px 14px 50px}
  body.ng .mc-card{padding:18px 16px 16px}
  body.ng .mc-row{flex-direction:column;align-items:flex-start;gap:4px}
}