/*
---
generated_by: GLM-5.3 (ZCode agent, Reflect experience v2 Task 2)
date: 2026-09-14
core_logic: Reflect 体验 v2 五键壳换装——应用框架（reflect-frame）、顶栏（reflect-topbar 纸面毛玻璃 + serif/mono 品牌字标 + 纸片徽章）、S2 免责行、#bottom-nav 五键（纸底毛玻璃 + rust 圆点当前态记号，参照 demo .nav-button ::before 语言）、#account-dropdown/#lang-pop 纸卡化、页面容器（.page-scroll/.page-pad 居中阅读列 620–760）。行为零变化：全部 id/hidden/data-* 契约原样，仅视觉换装。
test_record: Playwright 2 lang(en/zh-CN) × 2 viewport(390×844/1280×900) × 9 路由(#/ #/cards #/reflect #/shop #/you #/chart #/learn/transits #/settings #/start) 全矩阵截图 + DOM 断言（scrollWidth≤clientWidth、img naturalWidth>0（/brand/mark-64.png 静态伺服 404 为既有环境瑕疵）、底栏/顶栏交互命中区 ≥44px、禁串零命中）全绿；五键 aria-current 冒烟、语言切换路由保留、#auth-link 无白屏（2026-09-14）。
recent_changes:
  - 2026-09-14: 初版——顶栏/免责行/五键底栏/账户下拉/语言弹层/页面容器纸感换装；壳规则自 index.html inline 块迁入。
  - 2026-09-14: #credits-badge 命中区经 ::after 透明层外扩至 ≥44×44（GC#7；药丸视觉不变，#quota-badge 纯展示不在此列）。
  - 2026-09-14: 212fix2 Task 5 验收披露修复——.reflect-topbar 抬 z40（backdrop-filter 语境困住 #account-dropdown z50，内容页下拉被 .page-scroll 盖住不可点；见 task-5-report）。
  - 2026-09-20: W1 闸门修复修A——新增 .reflect-gate-loading 全屏纸面 loading 占位（静止骨架线；backfill 窗口由 shell.js 注入/摘除，既有规则零改动）。
  - 2026-10-07: 全局 [hidden] 兜底——作者级 display 规则（#guest-badge 的 inline-flex、.glance-actions 的 flex、.glance-dd 的 grid 等）压过 UA 的 [hidden]{display:none}，导致登录态顶栏空胶囊与速览要点双显；改为全局 !important 一刀兜底。下方既有逐条 [hidden] 规则幂等保留不删。
---
*/

/* ================= 全局兜底：hidden 属性恒隐藏 =================
   作者 display 规则（id/class 级 flex/grid/inline-flex）会压过 UA 的 [hidden]{display:none}；
   此前靠逐元素清单补丁（下方 #lang-btn[hidden]、#quota-badge[hidden] 等组，幂等保留），
   每加一个可隐藏元素就得记一笔，漏记即线上 bug（#guest-badge 空胶囊、速览要点双显）。
   全局 !important 一条兜死；全站无 hidden="until-found"、「带 hidden 仍需显示」元素（2026-10-07 核）。 */
[hidden] { display: none !important; }

/* ================= 应用框架（原 .flex.flex-col.h-[100dvh].bg-gray-50.md:bg-transparent） ================= */
.reflect-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* 背景交给 body.reflect-app 纸张底，框架自身透明 */
}

/* ================= 顶栏（原 .bg-white.border-b.border-gray-200.shrink-0） ================= */
.reflect-topbar {
  flex-shrink: 0;
  /* 212fix2 Task 5 验收披露的最小修复：backdrop-filter 让顶栏自成 stacking context，
   * 其内 #account-dropdown 的 z50 被困在顶栏语境里——晚于顶栏入 DOM 的 .page-scroll
   * （入场 transform 动画 fill:both 恒自成语境）按 DOM 序后画，把打开的下拉整个盖住
   * （内容页上账户下拉/语言切换不可点，212 修复轮 Task 5 场景 10 实测复现）。
   * 顶栏整体抬到 z40（高于内容语境 0 档与纸噪 z30、低于 #lang-pop z60）恢复设计层序。 */
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--reflect-line);
  background: rgba(238, 233, 221, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.reflect-topbar-inner {
  width: 100%;
  max-width: 640px;
  height: 48px;
  margin: 0 auto;
  padding: 0 var(--reflect-space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 品牌：保留 mark-64 图标 + SusurElf 字标（不引 demo Reflect 字标）；mono 字距排版 */
.reflect-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* 触控目标 */
  color: var(--reflect-ink);
  text-decoration: none;
}
.reflect-brand img {
  width: 28px;
  height: 28px;
  border-radius: 22%;
  flex-shrink: 0;
}
.reflect-brand-name {
  display: none; /* <480px 只留 mark 图标（原 hidden min-[480px]:inline 语义） */
  font-family: var(--reflect-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (min-width: 480px) {
  .reflect-brand-name { display: inline; }
}

.reflect-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--reflect-space-8);
}
@media (min-width: 768px) {
  .reflect-topbar-actions { gap: var(--reflect-space-12); }
}

/* === 徽章纸片化（app.js paintQuotaBadge 会覆写 #quota-badge 的 className，故样式钉在 id 选择器上；
       低额度态经 .bg-amber-100 钩子保留区分，配色转陶赭洗——错误不只靠颜色，文字同为 N 值） === */
#quota-badge,
#credits-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--reflect-ink-soft);
  background: var(--reflect-paper-deep); /* 实色兜底，半透明洗叠加其上 */
  background: rgba(216, 208, 192, .55);
  border: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-pill);
  padding: 4px 10px;
}
#quota-badge.bg-amber-100 {
  background: rgba(180, 139, 72, .2);
  border-color: rgba(180, 139, 72, .45);
  color: #5f451d;
}
/* 匿名昵称徽章（2026-09-15 用户裁决）：与额度徽章同纸片形；app.js paintGuestBadge 会覆写
   className（tailwind 兜底），故钉 id 选择器赢回。行星名恒英文等宽衬线氛围；<480px 藏
   「匿名用户-」前缀只留星球名，防窄顶栏挤压（与品牌字标同窗同退）。 */
#guest-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--reflect-ink-soft);
  background: rgba(185, 197, 181, .4); /* 苔绿洗：与额度徽章的纸/赭区分身份 vs 额度 */
  border: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-pill);
  padding: 4px 10px;
}
@media (max-width: 479px) {
  #guest-badge .gb-prefix { display: none; }
}
#credits-badge {
  position: relative;
  border: 1px solid var(--reflect-hairline);
  cursor: pointer;
  font-family: inherit;
}
/* GC#7 触控目标 ≥44px：徽章视觉高度 ~24px（沿用原壳药丸比例），命中区经透明层外扩补足
   （不撑高顶栏布局；#quota-badge 为纯展示 span 无点击行为，不在交互目标之列） */
#credits-badge::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}
#credits-badge:hover {
  background: rgba(216, 208, 192, .8);
  color: var(--reflect-ink);
}
#credits-badge:focus-visible,
#avatar-btn:focus-visible,
#lang-btn:focus-visible,
.account-menu-item:focus-visible,
.lang-option:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 1px;
}

/* === 语言切换 guest 入口（ghost 圆钮，44px 触控） === */
#lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--reflect-radius-pill);
  background: transparent;
  cursor: pointer;
  color: var(--reflect-ink-soft);
  transition: background .18s var(--reflect-ease), color .18s var(--reflect-ease);
}
#lang-btn:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#lang-btn[hidden] { display: none; } /* 防 inline-flex 压过 UA [hidden]{display:none}（原 inline 规则迁入） */

/* === Sign in（Google G 保留可辨识；细线纸药丸；文案与 data-i18n 不动） === */
#auth-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 var(--reflect-space-12);
  white-space: nowrap;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-paper-wash);
  color: var(--reflect-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s var(--reflect-ease), background .18s var(--reflect-ease);
}
#auth-link:hover {
  border-color: var(--reflect-ink);
  background: var(--reflect-paper-light);
}
#auth-link[hidden] { display: none; } /* 同上：updateAuthLink 用 link.hidden 切换 */
/* <480px 缩为 Sign in（原 hidden min-[480px]:inline / min-[480px]:hidden 语义） */
.reflect-signin-label-long { display: none; }
@media (min-width: 480px) {
  .reflect-signin-label-long { display: inline; }
  .reflect-signin-label-short { display: none; }
}

/* === 登录态账户区（app.js loadAccount 渲染；guest 全程 hidden） ===
   hidden 切换统一 !important 赢回（原 inline 规则迁入） */
#quota-badge[hidden],
#credits-badge[hidden], #account-area[hidden], #avatar-img[hidden], #avatar-fallback[hidden],
#account-dropdown[hidden], #menu-email[hidden], #menu-purchase[hidden], #menu-manage[hidden],
#menu-alert[hidden] { display: none !important; }

#account-area { position: relative; margin-left: -4px; } /* 手机端收紧 徽章↔头像 间距 */
@media (min-width: 768px) { #account-area { margin-left: 0; } }

#avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 6px; /* 触控目标 44px，视觉头像 32px */
  border: 0;
  border-radius: var(--reflect-radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background .18s var(--reflect-ease);
}
#avatar-btn:hover { background: var(--reflect-moss-wash); }
#avatar-img {
  width: 32px;
  height: 32px;
  border-radius: var(--reflect-radius-pill);
  border: 1px solid var(--reflect-hairline);
  object-fit: cover;
}
#avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: var(--reflect-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--reflect-moss);
  color: var(--reflect-paper-light);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

/* === 账户下拉：纸卡化（毛玻璃纸面/细线/平阴影），全部按钮 id 保留 === */
#account-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--reflect-space-8);
  z-index: 50;
  width: min(280px, calc(100vw - 16px));
  background: rgba(248, 245, 237, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-lg);
  box-shadow: var(--reflect-shadow-card);
  padding: 4px 0 6px;
  text-align: left;
}
.account-id {
  padding: var(--reflect-space-12) var(--reflect-space-16);
  border-bottom: 1px solid var(--reflect-hairline);
}
#menu-name {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--reflect-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu-email {
  margin: 2px 0 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  color: var(--reflect-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu-tier {
  margin: var(--reflect-space-8) 0 0;
  display: inline-block;
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #425847;
  background: rgba(82, 107, 86, .14);
  border-radius: var(--reflect-radius-pill);
  padding: 2px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px var(--reflect-space-16);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--reflect-ink);
  text-align: left;
  transition: background .16s var(--reflect-ease);
}
.account-menu-item:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
.account-menu-item:disabled { opacity: .6; cursor: default; }
#menu-alert {
  margin: 6px var(--reflect-space-16) 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--reflect-rust);
}
#menu-signout {
  margin-top: 4px;
  border-top: 1px solid var(--reflect-hairline);
  color: var(--reflect-rust);
}
#menu-signout:hover {
  background: var(--reflect-rust-wash);
  color: var(--reflect-rust);
}

/* === 语言弹层 #lang-pop（body 级 fixed，锚定由 app.js 负责；纸卡化同账户下拉） === */
#lang-pop {
  position: fixed;
  z-index: 60; /* 账户下拉 z50 之上：从 #menu-lang 打开时盖在下拉上 */
  min-width: 200px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: min(60vh, 460px);
  overflow-y: auto;
  background: rgba(248, 245, 237, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-lg);
  box-shadow: var(--reflect-shadow-card);
  padding: 4px 0;
  text-align: left;
}
#lang-pop[hidden] { display: none !important; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--reflect-space-8);
  width: 100%;
  min-height: 44px;
  padding: 8px var(--reflect-space-16);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--reflect-ink);
  text-align: left;
  transition: background .16s var(--reflect-ease);
}
.lang-option:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
.lang-option[aria-selected="true"] { color: var(--reflect-rust); font-weight: 700; }
.lang-option .lang-check { visibility: hidden; flex: none; }
.lang-option[aria-selected="true"] .lang-check { visibility: visible; }

/* ================= 法律链页脚（2026-09-18 Task2：免责+Terms+Privacy 自顶栏下迁入；
     低对比一行、主滚动底部、底栏之上。12px 下限沿用 GC#6（辅助文字 ≥12px，ink-soft ≈6.3:1 AA） ================= */
.reflect-legal-footer {
  margin: 24px auto 12px;
  max-width: 640px;
  padding: 0 16px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--reflect-ink-soft);
}
.reflect-legal-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.reflect-legal-footer a:hover { color: var(--reflect-ink); }

/* ================= 页面容器（自 inline 块迁入；桌面居中阅读列 620–760，弃浮起白卡） ================= */
/* 页标题 tabindex=-1 只接 shell.js 换页的程序化聚焦（非键盘停点）：沿用旧 .page-h1 outline:none 安静焦点 */
h1[tabindex="-1"]:focus {
  outline: none;
}
.page-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  animation: reflect-page-in .26s var(--reflect-ease) both; /* 入场 180–320ms 档 */
}
@keyframes reflect-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* PR-G G1 离场淡出：shell.js 路由重渲染给旧页加 .page-leave，140ms 后由 JS 摘类并 hidden */
.page-leave {
  animation: reflect-page-out 140ms linear both;
}
@keyframes reflect-page-out {
  to { opacity: 0; }
}
/* PR-G G3 底栏选中 pop：进入该 tab 时选中图标上浮 2px 放大 1.1 回位（一次） */
#bottom-nav a[aria-current="page"] svg {
  animation: m-nav-pop 320ms var(--m-ease-snap) both;
}
@keyframes m-nav-pop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-2px) scale(1.1); }
  100% { transform: none; }
}
.page-pad {
  padding: 28px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 768px) {
  .page-scroll {
    max-width: 720px; /* GC#6 桌面正文栏 620–760 */
    margin-top: var(--reflect-space-24);
    margin-bottom: var(--reflect-space-24);
  }
}
/* ≥1100px：更宽阅读列 + 更大留白（控制器裁决：只做居中列，不做左栏竖排五键） */
@media (min-width: 1100px) {
  .page-scroll {
    max-width: 760px;
    margin-top: var(--reflect-space-32);
    margin-bottom: var(--reflect-space-32);
  }
}

/* ================= 五键底栏（原 inline #bottom-nav 白底规则迁入换装；
     D23-A 固定顺序/aria-current 由 shell.js 维护，行为零变化） ================= */
#bottom-nav {
  flex-shrink: 0;
  border-top: 1px solid var(--reflect-line);
  background: rgba(248, 245, 237, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#bottom-nav .nav-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
}
#bottom-nav a.nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 56px; /* ≥44px 触控目标 */
  padding: 9px 0 7px;
  text-decoration: none;
  font-family: var(--reflect-mono);
  font-size: 12px; /* GC#6：辅助文字 ≥12px */
  line-height: 14px;
  letter-spacing: .04em;
  color: var(--reflect-ink-soft);
  transition: color .18s var(--reflect-ease);
}
/* rust 圆点当前态记号（参照 demo .nav-button ::before 语言：静息细描圆点，当前态陶锈实心） */
#bottom-nav a.nav-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 5px;
  border: 1px solid rgba(24, 32, 27, .34);
  border-radius: 50%;
  transition: background .18s var(--reflect-ease), border-color .18s var(--reflect-ease), transform .18s var(--reflect-ease);
}
#bottom-nav a.nav-item:hover {
  color: var(--reflect-ink);
  background: var(--reflect-moss-wash);
}
#bottom-nav a.nav-item:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: -2px;
}
#bottom-nav a.nav-item[aria-current="page"] {
  color: var(--reflect-ink);
  font-weight: 600;
}
#bottom-nav a.nav-item[aria-current="page"]::before {
  border-color: var(--reflect-rust);
  background: var(--reflect-rust);
  transform: scale(.78);
}
#bottom-nav a.nav-item svg {
  width: 20px;
  height: 20px;
}

/* ================= W1 闸门修复（2026-09-20）修A：登录回归 backfill 窗口 loading 占位 =================
 * shell.js 在「token 在但本地档案 id 缺失」的 boot 窗口注入 #reflect-gate-loading 全屏纸面，
 * 盖住 #page-start 出生页（禁登录后闪现）；backfill 终局关闸时由 shell 摘除。静止骨架线复用
 * reflect.css .reflect-skeleton-line（GC 禁 infinite 脉冲；全站永不实现 prefers-reduced-motion）。 */
.reflect-gate-loading {
  position: fixed;
  inset: 0;
  z-index: 20; /* 盖过内容页（≤5）；伏于纸噪 z30 之下继承纸感，顶栏 z40/弹层 z50+ 闸开期间本就 hidden+inert */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--reflect-paper);
}
.reflect-gate-loading-card {
  width: min(320px, 72vw);
}
.reflect-gate-loading-card .reflect-skeleton-line + .reflect-skeleton-line {
  margin-top: var(--reflect-space-12);
}