/* ==========================================================================
   云开模方 · 界面外壳单源（三界面共用）：顶栏 .appnav + 登录卡 .login-card
   前置：/assets/tokens.css。官网顶栏/登录弹层、门户与管理台顶栏/整页登录
   全部引用本文件——历史上 .topnav/.appnav、.dlg/.login-card 双份实现导致
   三登录面反复不同步（0902 多轮返工），自此单源，禁止再在 surface 样式里
   复制这两组规则。
   ========================================================================== */

/* ---------- 顶栏（64px / 毛玻璃 / 品牌双行 / 下划线激活） ---------- */
.appnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.appnav .in { display: flex; align-items: center; height: 64px; padding: 0 28px; gap: 40px; }
.appnav .brand { display: flex; align-items: center; gap: 12px; color: inherit; flex-shrink: 0; }
.appnav .brand img { width: 34px; }
.appnav .brand b { font-family: var(--font-song); font-size: 19px; letter-spacing: 2px; color: var(--brand-ink); font-weight: 700; }
.appnav .brand span { display: block; font-size: 9.5px; letter-spacing: .28em; color: var(--brand-deep); }
.appnav .navlinks { display: flex; align-items: center; gap: 30px; font-size: 14.5px; color: var(--text-2); overflow-x: auto; scrollbar-width: none; }
.appnav .navlinks::-webkit-scrollbar { display: none; }
.appnav .navlinks a { padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; color: inherit; transition: color .2s, border-color .2s; }
.appnav .navlinks a:hover, .appnav .navlinks a.on { color: var(--brand-ink); border-color: var(--brand); }
.appnav .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); flex-shrink: 0; }
@media (max-width: 960px) { .appnav .in { gap: 18px; } .appnav .who .hide-sm { display: none; } }

/* ---------- 登录卡（整页 .login-wrap 与弹层 .mask 两种容器共用一张卡） ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mask { position: fixed; inset: 0; background: rgba(16, 32, 48, .52); backdrop-filter: blur(3px); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .22s; pointer-events: none; }
.mask.on { opacity: 1; pointer-events: auto; }
.login-card { position: relative; overflow: hidden; width: 420px; max-width: 92%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 40px 38px 26px; }
.mask .login-card { transform: translateY(12px) scale(.97); transition: transform .22s; box-shadow: 0 30px 80px rgba(10, 26, 44, .30); }
.mask.on .login-card { transform: none; }
/* 品牌水印：logo 以 5% 透明度沉入卡片右下角 */
.login-card::after { content: ""; position: absolute; right: -34px; bottom: -30px; width: 210px; height: 122px;
  background: url(/assets/logo.png) right bottom / contain no-repeat; opacity: .05; pointer-events: none; }
.login-card .x { position: absolute; top: 12px; right: 14px; font-size: 20px; line-height: 1; color: var(--text-3);
  background: none; border: none; cursor: pointer; z-index: 1; padding: 4px 8px; }
.login-card .x:hover { color: var(--text); }
.login-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
.login-brand img { width: 58px; height: auto; }
.login-brand b { font-family: var(--font-song); font-size: 26px; letter-spacing: 6px; color: var(--brand-ink); font-weight: 700; }
.login-sub { position: relative; text-align: center; margin-bottom: 30px; padding-top: 14px; border-top: 1px solid var(--line); }
.login-sub .en { display: block; font-size: 12px; font-weight: 500; letter-spacing: 3.5px; color: var(--brand-deep); margin-bottom: 6px; }
.login-sub .cn { display: block; font-size: 12px; letter-spacing: 2px; color: var(--text-3); }
.login-card .field { position: relative; margin-bottom: 16px; }
.login-card .field label { display: block; font-size: 12px; color: var(--text-2); letter-spacing: 1px; margin-bottom: 6px; }
.login-card .field input { width: 100%; height: 42px; padding: 0 13px; font-size: 14px; font-family: var(--font-body);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); outline: none; background: var(--field-bg);
  transition: border-color .15s, background .15s, box-shadow .15s; }
.login-card .field input:focus { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--focus-ring); }
.login-error { position: relative; color: var(--err); font-size: 13px; min-height: 20px; margin: 0 0 6px; }
.login-card .btn { position: relative; display: block; width: 100%; height: 42px; padding: 0; background: var(--brand);
  color: var(--on-brand); border: none; border-radius: var(--radius-md); font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: background .15s; }
.login-card .btn:hover { background: var(--brand-deep); }
.login-card .btn[disabled] { opacity: .45; cursor: not-allowed; }
.login-hint { position: relative; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.8; text-align: center; }
.login-copy { position: relative; margin-top: 14px; text-align: center; font-size: 11px; color: var(--text-4); letter-spacing: .5px; }