/* ============================================================================
   auth.css —— 账号弹窗 / 卡片锁标
   两页共用：门户页(portal.html)的变量是 --surface/--ink/--line…，
   演示页(index.html)的是 --panel/--txt/--line…，所以统一走 var(A, var(B, …)) 取最近似的一套。
   ============================================================================ */
#maRoot{
  --m-bg:    var(--surface, var(--panel, #fff));
  --m-bg2:   var(--surface2, var(--cell-bg, #f1f4f9));
  --m-fg:    var(--ink, var(--txt, #0f172a));
  --m-fg2:   var(--ink2, var(--txt2, #5a6b85));
  --m-fg3:   var(--ink3, var(--dim, #8b98ad));
  --m-line:  var(--line, #e2e6ee);
  --m-line2: var(--line2, var(--btn-bd, #d3d9e6));
  --m-accent:var(--accent, #1157d8);
  --m-accent-ink: var(--accent-ink, #fff);
  --m-input: var(--input-bg, var(--m-bg2));
  --m-ok:    var(--live, var(--ok, #0c8a5b));
  --m-shadow:var(--shadow, 0 18px 50px -16px rgba(15,23,42,.32));
  --m-btn-bg:var(--btn-bg, var(--m-bg2));
  --m-btn-hov:var(--btn-bg-hov, var(--m-line));
}
#maRoot *{box-sizing:border-box}
#maRoot .mono{font-family:"JetBrains Mono","SF Mono",Consolas,monospace}

/* ---------------- 遮罩 + 弹窗 ---------------- */
.ma-mask{position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,10,18,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.ma-mask.show{display:flex}
.ma-modal{position:relative; width:100%; max-width:392px; max-height:92vh; overflow:auto;
  background:var(--m-bg); color:var(--m-fg); border:1px solid var(--m-line); border-radius:16px;
  box-shadow:var(--m-shadow); padding:24px 24px 20px;
  font:14px/1.7 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  animation:maIn .2s cubic-bezier(.2,.8,.3,1)}
@keyframes maIn{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
.ma-x{position:absolute; top:12px; right:12px; width:28px; height:28px; border:none; border-radius:8px;
  background:none; color:var(--m-fg3); font-size:15px; cursor:pointer; line-height:1}
.ma-x:hover{background:var(--m-bg2); color:var(--m-fg)}
.ma-title{font-size:17px; font-weight:600; letter-spacing:.2px; margin:0 0 4px}
.ma-sub{margin:0 0 16px; font-size:12.5px; color:var(--m-fg2)}
.ma-sub b{color:var(--m-fg); font-weight:600}

.ma-field{margin-bottom:12px}
.ma-field > label{display:block; margin-bottom:5px; font-size:12px; color:var(--m-fg3); letter-spacing:.3px}
.ma-input{width:100%; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--m-line);
  background:var(--m-input); color:var(--m-fg); font:inherit; outline:none; transition:border-color .15s, box-shadow .15s}
.ma-input:focus{border-color:var(--m-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--m-accent) 16%, transparent)}
.ma-input::placeholder{color:var(--m-fg3)}
.ma-input.code{height:50px; text-align:center; letter-spacing:.42em; text-indent:.42em;
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace; font-size:22px; font-weight:600}
.ma-money{display:flex; align-items:center; gap:0}
.ma-money span{padding:0 12px; height:40px; line-height:40px; border:1px solid var(--m-line);
  border-right:none; border-radius:10px 0 0 10px; background:var(--m-bg2); color:var(--m-fg2); font-size:14px}
.ma-money .ma-input{border-radius:0 10px 10px 0}

.ma-btn{width:100%; height:42px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-weight:600; letter-spacing:.3px; transition:filter .15s, border-color .15s, background .15s}
.ma-btn.primary{background:var(--m-accent); color:var(--m-accent-ink)}
.ma-btn.primary:hover{filter:brightness(1.08)}
.ma-btn.ghost{background:var(--m-btn-bg); border-color:var(--m-line2); color:var(--m-fg)}
.ma-btn.ghost:hover{background:var(--m-btn-hov)}
.ma-btn[disabled]{opacity:.55; cursor:default; filter:none}
.ma-btn.sm{height:36px; font-size:13px; font-weight:500}

.ma-msg{margin:0 0 12px; padding:9px 12px; border-radius:9px; font-size:12.5px; display:none}
.ma-msg.show{display:block}
.ma-msg.err{background:color-mix(in srgb, #e5484d 12%, transparent); color:#e5484d}
.ma-msg.ok{background:color-mix(in srgb, var(--m-ok) 13%, transparent); color:var(--m-ok)}
.ma-dev{margin:0 0 12px; padding:10px 12px; border-radius:9px; font-size:12.5px;
  background:color-mix(in srgb, var(--m-accent) 9%, transparent); border:1px dashed var(--m-line2); color:var(--m-fg2)}
.ma-dev b{font-family:"JetBrains Mono",Consolas,monospace; font-size:15px; letter-spacing:.16em; color:var(--m-fg)}

.ma-row{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:12.5px; color:var(--m-fg2)}
.ma-link{background:none; border:none; padding:0; color:var(--m-accent); font:inherit; font-size:12.5px; cursor:pointer}
.ma-link:hover{text-decoration:underline}

/* ---------------- 付款视图（真收款码图片）---------------- */
.ma-qr{display:flex; justify-content:center; margin:4px auto 10px}
.ma-qr img{display:block; width:224px; max-width:90%; height:auto; border-radius:12px;
  border:1px solid var(--m-line); background:#fff}
.ma-qr-cap{text-align:center; font-size:12px; color:var(--m-fg3); margin-bottom:14px}
.ma-qr-cap b{color:var(--m-fg); font-weight:600}
.ma-qr-cap .mono{color:var(--m-fg2)}
.ma-order{display:flex; justify-content:space-between; padding:9px 0; border-top:1px dashed var(--m-line);
  font-size:12.5px; color:var(--m-fg3)}
.ma-order b{color:var(--m-fg); font-weight:500}
.ma-tip{margin:12px 0 0; font-size:11.5px; line-height:1.6; color:var(--m-fg3); text-align:center}

/* ---------------- 账号视图 ---------------- */
.ma-user{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  background:var(--m-bg2); margin-bottom:12px}
.ma-avatar{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--m-accent); color:var(--m-accent-ink); font-weight:700; font-size:14px}
.ma-user .mail{font-size:13px; color:var(--m-fg); word-break:break-all; line-height:1.35}
.ma-user .role{font-size:11.5px; color:var(--m-fg3)}
.ma-list{margin:0 0 14px}
.ma-item{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--m-line); border-radius:10px; margin-bottom:8px}
.ma-item .nm{font-size:13px; color:var(--m-fg)}
.ma-item .nm small{display:block; color:var(--m-fg3); font-size:11px}
.ma-tag{flex:none; font-size:11.5px; padding:3px 9px; border-radius:20px; white-space:nowrap}
.ma-tag.on{color:var(--m-ok); background:color-mix(in srgb, var(--m-ok) 13%, transparent)}
.ma-tag.off{color:var(--m-fg3); background:var(--m-bg2)}
.ma-tag.buy{color:var(--m-accent-ink); background:var(--m-accent); cursor:pointer; border:none; font:inherit; font-size:11.5px}

/* ---------------- 门户卡片锁标 ---------------- */
.ma-lock{font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap;
  border:1px solid transparent; letter-spacing:.2px}
.ma-lock--login{color:var(--ink3, #8b98ad); background:color-mix(in srgb, var(--ink3, #8b98ad) 13%, transparent)}
.ma-lock--buy{color:var(--accent); background:var(--accent-soft, rgba(17,87,216,.08));
  border-color:color-mix(in srgb, var(--accent) 32%, transparent)}
.ma-lock--ok{color:var(--live, #0c8a5b); background:var(--live-soft, rgba(12,138,91,.09));
  border-color:color-mix(in srgb, var(--live, #0c8a5b) 32%, transparent)}

/* ---------------- 顶栏账号按钮 ---------------- */
.nav #maUser{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border-radius:9px; border:1px solid var(--line2, var(--line)); background:none; color:var(--ink2, #41506a);
  font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s, background .15s}
.nav #maUser:hover{border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft, rgba(17,87,216,.07))}
.nav #maUser .who{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav #maUser .doors{font-size:11.5px; color:var(--live, #0c8a5b)}
#topbar button.topbtn{display:inline-flex; align-items:center; gap:6px; height:31px; padding:0 11px;
  border-radius:8px; border:1px solid var(--line); background:var(--btn-bg); color:var(--txt);
  font:inherit; font-size:12.5px; white-space:nowrap; opacity:.82; cursor:pointer;
  transition:border-color .15s, background .15s, opacity .15s}
#topbar button.topbtn:hover{border-color:var(--btn-bd); background:var(--btn-bg-hov); opacity:1}
#topbar button.topbtn .doors{color:var(--ok); font-size:11.5px}