/* ═══════════════════════════════════════════════════════════
   中摩咨询 · 统一账号系统样式
   2026-11-04 明建立

   ★ 顾敏辉 2026-11-04 令
   - 全站一套账号入口，视觉刻意淡化，不抢主视觉
   - 页面内容全部可见可浏览，不需要登录
   - 账号功能不开放：登录与注册一律提示「未开放，敬请期待」
   - 纯前端，不连任何后端

   本文件被 index.html 与全部子页共同引用。
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#0B2C4A;
  --navy-2:#12456F;
  --navy-3:#082238;
  --cyan:#2E86AB;
  --cyan-lt:#5CB6D2;
  --cyan-pale:#E8F3F8;
  --ink:#16293D;
  --slate:#4E6879;
  --slate-lt:#7A8FA0;
  --line:#E3EBF1;
  --bg-alt:#F6F9FC;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── 账号入口按钮：淡化处理 ── */
.nav-account{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(46,134,171,.06);
  color:var(--navy-2);
  border:1px solid rgba(46,134,171,.22);
  padding:clamp(7px,1vw,9px) clamp(14px,1.7vw,19px);
  border-radius:100px;
  font-size:clamp(12.5px,1.15vw,14px);font-weight:600;
  transition:all .25s var(--ease);
  white-space:nowrap;cursor:pointer;
  font-family:inherit;line-height:1.5;
}
.nav-account:hover{
  background:rgba(46,134,171,.13);
  border-color:rgba(46,134,171,.4);
  color:var(--navy);
}
.nav-account svg{
  width:14px;height:14px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ── 遮罩 ── */
.acct-mask{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,34,56,.46);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
}
.acct-mask.on{opacity:1;visibility:visible}

/* ── 登录框 ── */
.acct{
  width:100%;max-width:400px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;border-radius:20px;
  padding:clamp(28px,4vw,38px);
  box-shadow:0 20px 60px rgba(8,34,56,.3);
  transform:translateY(14px) scale(.98);
  transition:transform .34s var(--ease);
  position:relative;
}
.acct-mask.on .acct{transform:none}
.acct-x{
  position:absolute;top:10px;right:10px;
  width:40px;height:40px;border-radius:10px;
  border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.acct-x:hover{background:var(--bg-alt)}
.acct-x svg{width:17px;height:17px;stroke:var(--slate);fill:none;stroke-width:2.4;stroke-linecap:round}
.acct-logo{height:28px;width:auto;margin-bottom:clamp(14px,2vw,20px)}
.acct h3{
  font-size:clamp(18px,2.1vw,22px);font-weight:800;
  color:var(--navy);letter-spacing:-.01em;margin-bottom:6px;
  line-height:1.45;
}
.acct-sub{
  font-size:13.5px;color:var(--slate);line-height:1.7;
  margin-bottom:clamp(16px,2.2vw,22px);
  word-break:keep-all;
}
/* 状态徽标：明确「即将开放」 */
.acct-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:9px;vertical-align:middle;
  padding:3px 10px;border-radius:100px;
  background:rgba(46,134,171,.1);
  border:1px solid rgba(46,134,171,.22);
  font-size:11px;font-weight:700;color:#1F7096;
  letter-spacing:.02em;
  white-space:nowrap;
}
/* 极矮屏：整块紧凑化，保证提示条可见 */
@media(max-height:680px){
  .acct{padding:22px 24px}
  .acct-logo{height:24px;margin-bottom:12px}
  .acct-field input{height:42px}
  .acct-btn{height:44px}
}
.acct-badge i{
  width:5px;height:5px;border-radius:50%;
  background:var(--cyan);
}
.acct-field{margin-bottom:12px}
.acct-field label{
  display:block;font-size:12.5px;font-weight:700;
  color:var(--navy-2);margin-bottom:7px;letter-spacing:.02em;
}
.acct-field input{
  width:100%;height:46px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:11px;
  font-size:14.5px;color:var(--ink);background:#fff;
  font-family:inherit;outline:none;
  transition:border-color .22s,box-shadow .22s;
}
.acct-field input::placeholder{color:#A8B8C5}
.acct-field input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(46,134,171,.11);
}
/* 账号未开放：输入框禁用，视觉上一眼看出「暂不可用」 */
.acct-field input:disabled{
  background:#F7FAFC;
  color:var(--slate-lt);
  border-color:#EDF2F6;
  cursor:not-allowed;
}
.acct-field input:disabled::placeholder{color:#B9C6D1}
.acct-btn{
  width:100%;height:48px;margin-top:8px;
  border:0;border-radius:11px;
  background:var(--navy);color:#fff;
  font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;
  transition:background .22s,transform .22s var(--ease);
}
.acct-btn:hover{background:var(--navy-2);transform:translateY(-1px)}
.acct-btn:active{transform:translateY(0)}
/* 未开放：按钮不可点 */
.acct-btn:disabled,
.acct-btn[disabled]{
  background:#D9E2E9;
  color:#8FA3B3;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.acct-btn:disabled:hover,
.acct-btn[disabled]:hover{background:#D9E2E9;transform:none}
.acct-foot{
  margin-top:15px;padding-top:13px;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--slate);text-align:center;
}
.acct-foot button{
  background:none;border:0;padding:0;
  color:var(--cyan);font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;
  transition:color .2s;
}
.acct-foot button:hover{color:var(--navy-2);text-decoration:underline}
.acct-note{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:13px;padding:10px 12px;
  background:var(--cyan-pale);border-radius:9px;
  font-size:12px;color:var(--navy-2);line-height:1.65;
  word-break:keep-all;
}
.acct-note svg{
  width:14px;height:14px;flex-shrink:0;margin-top:2px;
  stroke:var(--cyan);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ── 轻提示 ── */
.toast{
  position:fixed;left:50%;bottom:clamp(28px,5vh,48px);
  transform:translate(-50%,20px);z-index:300;
  display:flex;align-items:center;gap:10px;
  padding:13px 22px;
  background:rgba(11,44,74,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-size:14px;font-weight:600;
  border-radius:100px;
  box-shadow:0 10px 34px rgba(11,44,74,.34);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  max-width:calc(100vw - 40px);
  pointer-events:none;
}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{
  width:17px;height:17px;flex-shrink:0;
  stroke:var(--cyan-lt);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}

@media(max-width:760px){
  .nav-account{font-size:15px;padding:11px 22px}
}
@media(max-width:520px){
  .acct{padding:26px 22px}
  .toast{font-size:13px;padding:11px 18px}
}
@media(prefers-reduced-motion:reduce){
  .acct-mask,.acct,.toast{transition-duration:.001ms !important}
}