/* ============================================================
   I Ching Oracle — 会员 UI 样式
   ------------------------------------------------------------
   只被 bagua-card-demo.html 加载。颜色全部取自页面 :root 里已有的
   令牌（--ink / --gold / --line2 …），所以主题一变这里跟着变。
   ⚠️ 老板的硬规矩：不用紫色。--peri 是页面原本的冷灰蓝，不是紫。
   ============================================================ */

/* 🔴 一条全局兜底，别再删。
 *
 * `hidden` 属性在 UA 样式表里靠 `[hidden]{display:none}` 生效，
 * 而**作者样式表无条件胜过 UA 样式表** —— 只要哪个类声明了 display
 * （.nav-cta 在移动端断点里就声明了 inline-block），`el.hidden = true`
 * 就形同虚设：属性设上了，元素照样在屏幕上。
 *
 * 这个坑很阴：断言 `el.hidden === true` 会**绿着通过**，因为属性确实设了。
 * 必须用 `getComputedStyle(el).display` 才看得出来。
 * 所以这里一次性兜住所有用 hidden 控制显隐的元素，别逐个补。 */
[hidden]{display:none !important}

/* ---------- 导航栏里的入口 ---------- */
.nav-auth{position:relative}
/* 已登录：把用户名放进按钮，并加一个小圆点表示在线 */
.nav-auth.on{
  border-color:var(--gold);color:var(--gold-hi);
  background:rgba(201,185,138,.10);
  padding-left:26px;
}
.nav-auth.on::before{
  content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.nav-auth .nav-auth-name{
  display:inline-block;max-width:13ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
  /* .nav-cta 整体是 uppercase（和 Collection 按钮统一），但用户名要保留
     用户自己输入的大小写 —— 叫 alice 的人不该看到 ALICE。 */
  text-transform:none;letter-spacing:.06em;
}

/* ---------- 登录 / 注册弹窗 ---------- */

/* 浮层基础样式。
   主站的 .modal 定义在 bagua-card-demo.html 的**内联** <style> 里；
   forum.html 是独立页面、没有那一段，所以这里按 #authModal 再声明一遍。
   用 id 收窄作用域（而不是重复定义 .modal），有两个好处：
     · 两个页面都能用，不依赖谁先加载
     · 主站的「收集册」弹窗用的是 .modal，不会被这里的规则碰到
   ⚠️ 用 #authModal .modal-box 写 max-width 时要注意：id 选择器权重高于
   .auth-box 这个类，所以宽度**必须**在这里定，写在 .auth-box 里会被盖掉。 */
#authModal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;
  justify-content:center;padding:44px 18px;overflow-y:auto;
  background:rgba(5,6,7,.94);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#authModal.open{display:flex}
#authModal .modal-box{max-width:440px;width:100%}
#authModal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,4.4vw,2rem);
  letter-spacing:.14em;text-align:center;text-transform:uppercase;color:var(--gold-hi)}
#authModal .mh{color:var(--muted);font-size:.72rem;text-align:center;margin-top:12px;
  letter-spacing:.14em;line-height:1.8}
#authModal .m-x{position:fixed;top:18px;right:20px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(5,7,16,.85);color:var(--gold);
  font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .24s,border-color .24s,color .24s;z-index:70}
#authModal .m-x:hover{background:rgba(201,185,138,.14);border-color:var(--gold);color:var(--gold-hi)}

.auth-box{padding:0 4px}
.auth-box .mh{margin-bottom:26px}

/* Google 按钮区 */
.auth-google{margin:0 0 4px}
/* （.auth-google[hidden] / .auth-field[hidden] 这两条局部规则已由文件顶部
   的全局 [hidden] 兜底覆盖，不必再逐个写。） */
#gsiButton{display:flex;justify-content:center;min-height:40px}
#gsiButton iframe{margin:0 auto}
.auth-or{
  display:flex;align-items:center;gap:12px;
  margin:20px 0 4px;color:var(--muted2);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* 登录 / 注册 切换 */
.auth-tabs{display:flex;gap:6px;margin:18px 0 20px;padding:4px;
  border:1px solid var(--line);border-radius:999px;background:rgba(5,7,16,.5)}
.auth-tab{
  flex:1;padding:9px 10px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);font:inherit;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:background .24s,color .24s;
}
.auth-tab:hover{color:var(--gold-hi)}
.auth-tab.on{background:rgba(201,185,138,.14);color:var(--gold-hi)}

/* 表单 */
.auth-field{display:block;margin:0 0 16px}
.auth-field>span{
  display:block;margin-bottom:7px;color:var(--muted);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.auth-field input{
  width:100%;padding:12px 14px;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:10px;
  background:rgba(5,7,16,.72);color:var(--text);
  font:inherit;font-size:.86rem;letter-spacing:.02em;
  transition:border-color .24s,box-shadow .24s;
}
.auth-field input::placeholder{color:var(--muted2)}
.auth-field input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,185,138,.14);
}
.auth-field input:disabled{opacity:.5;cursor:not-allowed}

/* 提示信息 */
.auth-msg{
  min-height:1.2em;margin:2px 0 14px;
  font-size:.72rem;line-height:1.6;letter-spacing:.04em;
  color:var(--muted);
}
.auth-msg.err{color:#e0807f}
.auth-msg.ok{color:var(--gold-hi)}

/* 主按钮 */
.auth-submit{
  width:100%;padding:13px 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--gold);background:rgba(201,185,138,.16);
  color:var(--gold-hi);font:inherit;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;transition:background .24s,border-color .24s,opacity .24s;
}
.auth-submit:hover:not(:disabled){background:rgba(201,185,138,.26)}
.auth-submit:disabled{opacity:.5;cursor:not-allowed}

/* 已登录面板 */
.auth-user{margin:6px 0 4px;text-align:center}
.auth-user .au-name{
  font-family:var(--serif);font-size:1.24rem;letter-spacing:.06em;
  color:var(--gold-hi);word-break:break-all;
}
.auth-user .au-mail{
  margin-top:7px;color:var(--muted);font-size:.72rem;
  letter-spacing:.06em;word-break:break-all;
}
.auth-user .au-stat{
  margin:22px 0 4px;padding:14px 16px;border:1px solid var(--line);
  border-radius:10px;background:rgba(5,7,16,.5);
  color:var(--muted);font-size:.72rem;letter-spacing:.1em;line-height:1.9;
}
.auth-user .au-stat b{color:var(--gold-hi);font-weight:400}

.auth-foot{
  margin:22px 0 0;color:var(--muted2);
  font-size:.62rem;line-height:1.85;letter-spacing:.06em;text-align:center;
}

/* 移动端：导航栏塞不下就只留图标 */
@media (max-width:640px){
  .nav-auth{padding:8px 12px}
  .nav-auth.on{padding-left:24px}
  .nav-auth .nav-auth-name{max-width:7ch}
}