/* ==========================================================================
   河南大学图书馆空间预约 · 液态玻璃主题（透镜 Lens）
   Liquid-glass theme built on the Lens design system.

   图层顺序（每次加载都要保持）：
     flat.css           结构、布局、既有排版（不改）
     lens/tokens.css    透镜语义变量（颜色 / 字阶 / 间距 / 圆角 / 材质）
     lens/components.css 透镜公共组件材质
     glass/theme.css    本文件：把既有组件桥接到透镜材质

   本文件只做「材质与视觉」，不新增布局。所有视觉内容按透镜体系拆解为
   背景 / 图标（文字）/ 透镜 / 凹槽 / 发光 / 液体 / 反光变体。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 变量桥接：把项目原来的扁平变量指到透镜语义上
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* 透镜语义色（与 lens/tokens.css 对齐，此处显式写出来便于阅读） */
  --lg-color-text: #1d232b;
  --lg-color-muted: #2f3944;
  --lg-color-accent: #2875ed;
  --lg-color-focus: #1f63c9;
  --lg-color-page: #e6eef5;

  /* 承载面材质：整个应用只在这一处定义。
     启动（静态图 + CSS 模糊）、增强（画布折射）、降级（无 WebGL）
     三种状态共用同一组底色 —— 状态切换时元素底色一个像素都不变。
     透明度从上到下递增：内容面 < 密集数据面 < 导航面。 */
  --glass-panel-bg: rgba(247, 251, 255, .22);
  --glass-panel-dense-bg: rgba(247, 251, 255, .38);
  --glass-dock-bg: rgba(247, 251, 255, .60);
  --glass-admin-dock-bg: rgba(13, 28, 47, .92);
  --glass-control-bg: rgba(255, 255, 255, .38);
  --glass-selected-bg: rgba(255, 255, 255, .62);
  --glass-note-bg: rgba(250, 253, 255, .24);
  --glass-flat-bg: rgba(247, 251, 255, .14);
  --glass-hero-bg: linear-gradient(150deg, rgba(240, 248, 255, .58) 0%, rgba(226, 240, 250, .36) 58%, rgba(233, 246, 244, .30) 100%);

  /* 项目既有变量 → 透镜 */
  --bg: #e3edf4;
  --surface: var(--glass-panel-bg);
  --surface-soft: var(--glass-flat-bg);
  --text: var(--lg-color-text);
  --muted: var(--lg-color-muted);
  --line: rgba(255, 255, 255, .52);
  --line-strong: rgba(120, 150, 185, .34);

  --primary: var(--lg-color-accent);
  --primary-dark: #0d2f63;
  --primary-soft: rgba(40, 117, 237, .13);

  --danger: #9f2b3b;
  --danger-soft: rgba(205, 66, 84, .13);
  --warning: #6b4506;
  --warning-soft: rgba(226, 181, 78, .22);
  --success: #1f6446;
  --success-soft: rgba(82, 187, 131, .18);

  /* 圆角：面板 34 / 常规控件 14，中间态按构图微调 */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  /* 反光变体：收窄高光、减弱投影 —— 不再给每个小元素画一圈高亮白边 */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .70), inset 0 -1px 0 rgba(23, 48, 79, .05);
  --glass-drop: 0 12px 28px -18px rgba(23, 48, 79, .42);
  --glass-drop-sm: 0 6px 16px -12px rgba(23, 48, 79, .34);
  --glass-blur: 10px;
  --glass-blur-heavy: 12px;

  --shadow-sm: var(--glass-edge), var(--glass-drop-sm);
  --shadow: var(--glass-edge), var(--glass-drop);

  --admin: #1b3350;
  --admin-dark: #14283f;
  --admin-primary: var(--lg-color-accent);
  --admin-primary-dark: #1b5cc2;
  --admin-soft: rgba(40, 117, 237, .16);

  --lg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-family: var(--lg-font-family);
}

/* --------------------------------------------------------------------------
   2 · 页面外壳：固定尺寸的 stage + 内部滚动视口
   折射采样的是系统画布，所以 stage 必须是一个「有确定尺寸」的容器；
   内容在自己的滚动视口里滚动，渲染器按 clipFor() 处理溢出裁剪。
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { background: var(--bg); }

body.lg-page {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--lg-font-family);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-stage {
  position: fixed;
  inset: 0;
  /* 整页舞台不需要示例容器的圆角与裁剪 */
  border-radius: 0;
}
.app-viewport {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
/* 有固定底栏的页面给内容留出安全距离 */
body:has(.mobile-nav) .app-viewport { scroll-padding-bottom: 84px; }

/* 无 JS / WebGL 不可用时的降级底色（透镜 fallback 材质的前提）。
   与画布使用同一张环境图：降级不是另一种设计，只是没有折射的同一张底。 */
.app-stage.fallback {
  background: var(--bg) url('/static/glass/scene-aurora.jpg') center center / cover no-repeat !important;
}

/* --------------------------------------------------------------------------
   3 · 材质归属：每种语义表面只有一处底色定义
       这里有且只有一套材质值；启动态与增强态的区别只有「画布是否可见」，
       而不是「元素换成什么颜色」。这样切换 lg-glass-live 时不会发生换肤。
    -------------------------------------------------------------------------- */
/* 基底：只给边光与接触阴影，不写 background —— 底色由语义表面各自决定，
   避免把主按钮的渐变、通知的成功/错误色、侧栏的深色底一并冲掉。 */
[data-glass] {
  border-color: transparent !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
}

[data-glass="panel"]       { background-color: var(--glass-panel-bg) !important; }
[data-glass="note"]        { background-color: var(--glass-note-bg) !important; }
[data-glass="selected"]    { background-color: var(--glass-selected-bg) !important; }
[data-glass="small"]       { background-color: var(--glass-control-bg) !important; }
[data-glass="dock"]        { background-color: var(--glass-dock-bg) !important; }

/* 管理端导航是深色承诺：启动、增强、降级三态都必须保持深底浅字。 */
.admin-sidebar[data-glass],
.admin-mobile-topbar[data-glass] {
  background-color: var(--glass-admin-dock-bg) !important;
}

/* CSS 降级材质：静态图阶段用一层轻模糊，画布就绪后交给真实折射。
   同一块表面不会同时保留 backdrop-filter 与画布折射。 */
.app-stage:not(.webgl-ready) [data-glass] {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}
.lg-stage.webgl-ready [data-glass] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 顶部一层是吸顶的，透明后要保证内容滚过时仍然分得清边界 */
.webgl-ready .admin-mobile-topbar[data-glass] { border-bottom-color: transparent !important; }

/* --------------------------------------------------------------------------
   4 · 图标（文字）：统一字阶，保持清晰可读
   -------------------------------------------------------------------------- */
h1 { letter-spacing: -.03em; }
h2 { letter-spacing: -.018em; }
p, small { color: var(--muted); }
code, .inline-code, pre { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.inline-code {
  padding: .12em .45em;
  border-radius: 7px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  font-size: .88em;
}
.eyebrow {
  color: var(--primary-dark);
  letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.muted-text { color: var(--muted); }

/* 焦点：键盘操作时清晰可见，指针操作时隐藏（透镜的聚焦反光规则） */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lg-color-focus);
  outline-offset: 3px;
  border-radius: 10px;
}
[data-lg-input="pointer"] :focus { outline: none !important; }

/* --------------------------------------------------------------------------
   5 · 透镜（Lens）：唯一交互承载体
   -------------------------------------------------------------------------- */

/* 5.1 动作透镜 —— 按钮：胶囊形态，按住抬起、随方向形变 */
.button {
  border: 1px solid transparent !important;
  border-radius: var(--lg-radius-pill, 999px);
  min-height: 44px;
  padding: .68rem 1.25rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--lg-color-text);
  background: var(--glass-control-bg) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
  transition: transform 160ms var(--lg-ease-spring, cubic-bezier(.2,.9,.25,1.22)),
              box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}
.button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .54) !important; }
.button:active { transform: translateY(0) scale(.985); }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }

/* 主操作透镜：深蓝渐变 + 白字，稳态 4.8:1 以上；不随玻璃面积或状态变化 */
.button.primary,
.button.admin-primary {
  color: #fff !important;
  background: linear-gradient(168deg, #2f6fd8 0%, #2565cc 55%, #1a52ad 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(0, 0, 0, .14),
              0 10px 22px -12px rgba(26, 82, 173, .68);
}
.button.primary:hover,
.button.admin-primary:hover {
  background: linear-gradient(168deg, #2a65c9 0%, #215cbb 55%, #164a9d 100%) !important;
}
.button.secondary {
  color: var(--primary-dark) !important;
  background: rgba(255, 255, 255, .46) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(40, 117, 237, .22);
}
.button.ghost {
  color: var(--lg-color-text) !important;
  background: rgba(255, 255, 255, .36) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(120, 150, 185, .34);
}
.button.danger {
  color: var(--danger) !important;
  background: rgba(255, 255, 255, .42) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(205, 66, 84, .34);
}
.button.compact { min-height: 36px; padding: .42rem .95rem; font-size: .82rem; }

/* 5.2 输入透镜 / 凹槽 —— 输入框、下拉、文本域 */
label { color: var(--lg-color-text); font-weight: 620; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
  min-height: 46px;
  padding: .68rem 1.05rem;
  color: var(--text);
  background: var(--glass-control-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--lg-radius-pill, 999px);
  box-shadow: var(--glass-edge), inset 0 2px 6px -3px rgba(23, 48, 79, .22);
  transition: box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
textarea { border-radius: 22px; resize: vertical; }
select { padding-right: 2.2rem; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: rgba(93, 107, 122, .7); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(40, 117, 237, .55) !important;
  box-shadow: var(--glass-edge), 0 0 0 4px rgba(40, 117, 237, .16);
  outline: none;
}
select:disabled, input:disabled, textarea:disabled {
  background: rgba(226, 235, 243, .5) !important;
  color: var(--muted);
  opacity: .8;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.mini-input { min-height: 36px; padding: .32rem .8rem; border-radius: 999px; }

/* 5.3 凹槽吸附 —— 选项胶囊 / 分段选择 */
.choice, .chip-link, .feature-chip, .need-pill, .filter-chips a, .summary-pills span {
  border-radius: 999px;
  background: rgba(255, 255, 255, .40) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
}
.choice.selected, .choice[aria-pressed="true"], .chip-link.active, .filter-chips a.active {
  /* 选中：染色边缘反光 + 少量有色液体 */
  background: rgba(40, 117, 237, .16) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(40, 117, 237, .42);
  color: var(--primary-dark) !important;
}

/* --------------------------------------------------------------------------
   6 · 容器透镜：面板 / 卡片 / 列表 / 表格
   -------------------------------------------------------------------------- */
section, .stat-card, .reservation-card, .pick-card, .quick-actions-panel,
.need-card, .review-card, .suggestion-card, .member-card, .admin-quick-panel,
.settings-panel, .jobs-section, .admin-table-section, .admin-guide-card,
.admin-create-card, .danger-zone, .cas-panel, .pwd-block, .session-summary,
.preview-block, .changelog-panel, .checkin-card, .action-panel, .quota-banner {
  background-color: var(--glass-panel-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-edge), var(--glass-drop);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.2);
}
/* 密集数据面（表单、任务、表格、设置）需要更实的承载面：
   长时间阅读和输入优先，不为「透明」牺牲稳定性。 */
.settings-panel, .jobs-section, .admin-table-section, .admin-create-card,
.reservation-card, .pwd-block, .session-summary, .cas-panel, .preview-block,
.need-card, .changelog-panel, .action-panel {
  background-color: var(--glass-panel-dense-bg) !important;
}
section { padding: 1.5rem; }
.section-head { margin-bottom: 1.25rem; }

/* 列表行：小尺寸透镜变体 */
.item-row, .job-row, .record-icon, .settings-row, .member-card-foot,
.admin-summary-line, .run-row, .row-item, .announce, .suggest-history-item,
.lifecycle-list li, .need-strip {
  background-color: rgba(255, 255, 255, .30) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
}
.item-row:hover, .job-row:hover, .row-item:hover { background-color: rgba(255, 255, 255, .46) !important; }

.stat-card strong, .hero-status strong, .admin-count { color: var(--primary-dark); }

/* 表格：保留真实语义，只做玻璃化处理 */
.table-wrap, .responsive-table { border-radius: var(--radius); }
table { border-collapse: separate; border-spacing: 0; }
thead th {
  background: rgba(255, 255, 255, .52) !important;
  color: var(--lg-color-text) !important;
  font-weight: 640;
  border-bottom: 1px solid var(--line-strong) !important;
}
tbody td { border-bottom: 1px solid rgba(255, 255, 255, .42) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }
tbody tr:hover td { background: rgba(255, 255, 255, .30); }

/* 空状态：内凹的凹槽，不承担交互 */
.empty-state {
  background: rgba(255, 255, 255, .26) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--radius);
  box-shadow: inset 0 2px 10px -4px rgba(23, 48, 79, .18);
}

/* --------------------------------------------------------------------------
   7 · 反馈：通知 / 徽标 / 发光效果
   -------------------------------------------------------------------------- */
.notice {
  border-radius: var(--radius);
  border: 1px solid var(--line) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
  color: var(--lg-color-text);
}
/* 语义色只由状态决定，不会被通用玻璃规则覆盖 */
.notice.success { background: rgba(82, 187, 131, .20) !important; box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 3px 0 0 var(--success); color: var(--success) !important; }
.notice.error   { background: rgba(205, 66, 84, .16) !important;  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 3px 0 0 var(--danger); color: var(--danger) !important; }
.notice.warn    { background: rgba(226, 181, 78, .22) !important; box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 3px 0 0 var(--warning); color: var(--warning) !important; }

.badge {
  border-radius: 999px;
  background: rgba(255, 255, 255, .48) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  font-weight: 640;
  color: var(--muted);
}
.badge.ok    { background: rgba(82, 187, 131, .22) !important; color: var(--success); }
.badge.warn  { background: rgba(226, 181, 78, .26) !important; color: var(--warning); }
.badge.danger{ background: rgba(205, 66, 84, .18) !important;  color: var(--danger); }

/* 状态点 / 发光：说明光源与状态，不做持续闪烁 */
.status-dot, .admin-online > span, .group-dot, .need-dot, .topbar-status i {
  box-shadow: 0 0 0 4px rgba(82, 187, 131, .16), 0 0 12px 2px rgba(82, 187, 131, .5);
}

/* --------------------------------------------------------------------------
   8 · 顶部导航 / 侧栏 / 移动端底栏
   -------------------------------------------------------------------------- */
.topbar {
  background-color: var(--glass-dock-bg) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -22px rgba(23, 48, 79, .45);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.3);
}
/* flat.css 的 `body.user-theme .user-topbar` 是深蓝底 + 白字的旧官方视觉，
   特异性高于单类选择器；这里必须用同样的 body 层前缀改回浅色玻璃，
   并把第 14 节翻成的深色文字真正落在浅底上。 */
body.lg-page .user-topbar {
  background-color: var(--glass-dock-bg) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -22px rgba(23, 48, 79, .45) !important;
}
.brand-mark {
  border-radius: 13px;
  background: linear-gradient(150deg, #2f6fd8, #1a52ad) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), 0 8px 18px -8px rgba(26, 82, 173, .7);
}
.brand-mark.admin { background: linear-gradient(150deg, #2f6fd8, #1a52ad) !important; }

/* 主导航：落点轨道 + 移动的选中透镜 */
.main-nav { background: rgba(255, 255, 255, .26); border-radius: 999px; padding: 3px; }
.main-nav a {
  border-radius: 999px;
  color: var(--muted);
  font-weight: 620;
  transition: color 160ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.main-nav a:hover { background: rgba(255, 255, 255, .40); color: var(--text); }
.main-nav a.active {
  color: var(--primary-dark);
  background: var(--glass-selected-bg);
  box-shadow: var(--glass-edge), 0 8px 18px -10px rgba(23, 48, 79, .42),
              inset 0 0 0 1px rgba(40, 117, 237, .18);
}

/* 管理端侧栏：深色承诺在启动态也必须成立，不能先白后黑。
   flat.css 里的深红渐变是 background 简写，只改 background-color 清不掉，
   必须同时把 background-image 归零。 */
.admin-sidebar {
  background-color: var(--glass-admin-dock-bg) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 12px 0 34px -26px rgba(10, 26, 45, .8);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.2);
}
.admin-side-nav a { border-radius: var(--radius-sm); transition: background-color 180ms ease, box-shadow 180ms ease; }
.admin-side-nav a:hover { background: rgba(255, 255, 255, .14); }
.admin-side-nav a.active {
  background: rgba(255, 255, 255, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.admin-nav-badge {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px -4px rgba(0, 0, 0, .3);
}

.mobile-nav, .mobile-quickbar {
  background-color: var(--glass-dock-bg) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .45), 0 -14px 30px -22px rgba(23, 48, 79, .5);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.3);
}
.mobile-nav a.active, .mobile-quickbar a.active { color: var(--primary-dark); }

/* --------------------------------------------------------------------------
   9 · 弹层：<dialog> 处于 top layer，不参与画布折射，
        因此这里直接使用 CSS 毛玻璃材质（同一套透镜观感）。
   -------------------------------------------------------------------------- */
dialog {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  background: rgba(250, 253, 255, .82) !important;
  box-shadow: var(--glass-edge), 0 30px 70px -28px rgba(15, 35, 60, .6);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  color: var(--lg-color-text);
}
dialog::backdrop {
  background: rgba(18, 34, 55, .32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------------------------
   10 · 用户端首页 / 登录页的特殊区块
   -------------------------------------------------------------------------- */
/* 登录页左侧品牌区 / 账户页品牌区的深色底保留（白字承诺），
   首页欢迎卡改成浅色通透玻璃 + 深色文字 —— 白字不再落在白纱上。 */
.auth-intro, .official-auth-intro, .account-hero {
  border-radius: var(--radius-lg);
  background: linear-gradient(152deg, rgba(28, 92, 196, .92) 0%, rgba(31, 100, 70, .88) 100%) !important;
  color: #fff !important;
  box-shadow: var(--glass-edge), 0 24px 50px -24px rgba(20, 52, 90, .5);
}
.auth-intro p, .official-auth-intro p { color: rgba(255, 255, 255, .84); }
.auth-intro .eyebrow, .official-auth-intro .eyebrow { color: #bfe6ff; text-shadow: none; }

.user-hero {
  background: var(--glass-hero-bg) !important;
  color: var(--lg-color-text) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--glass-edge), var(--glass-drop) !important;
}
.user-hero h1 { color: var(--lg-color-text) !important; }
.user-hero p { color: var(--muted) !important; }
.user-hero .eyebrow { color: var(--primary-dark) !important; text-shadow: none; }
/* flat.css 用 ::before 在横幅上盖了一层深蓝遮罩（旧深色横幅的白字底）。
   横幅改成浅色玻璃后，这层遮罩会让深色文字重新落在深底上，必须翻成高光。 */
body.lg-page .user-hero::before {
  background: linear-gradient(100deg, rgba(255, 255, 255, .42) 8%, rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, 0) 100%) !important;
}
.user-hero::after { color: rgba(20, 63, 136, .035); }
.user-hero .button.primary { color: #fff !important; }
.user-hero .button.hero-secondary {
  color: var(--primary-dark) !important;
  background: rgba(255, 255, 255, .40) !important;
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(40, 117, 237, .20) !important;
}

/* 额度块是欢迎卡里的次级承载面：比外层略实，保证大数字清晰 */
.hero-status {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .52) !important;
  color: var(--lg-color-text) !important;
  box-shadow: var(--glass-edge), 0 10px 24px -16px rgba(9, 20, 55, .32) !important;
}
.hero-status strong, .hero-status > span:not(.status-dot) { color: var(--lg-color-text) !important; }

.auth-card { background-color: var(--glass-panel-bg) !important; }
.auth-shell-wide { border-radius: var(--radius-lg); overflow: hidden; }

/* --------------------------------------------------------------------------
   11 · 管理端：浅色玻璃 + 深色侧栏
        flat.css 的管理端本来就是「浅底深字、只有侧栏是深色」，
        所以不整体翻转，只把侧栏/移动顶栏保留成深色玻璃，
        其余内容沿用同一套浅色透镜体系（这样也少掉一整类深色反转的坑）。
   -------------------------------------------------------------------------- */
body.admin-theme { color-scheme: light; }
/* 管理端侧栏的深色底已在第 3 节按 [data-glass] 统一，这里只补文字与局部材质 */
body.admin-theme .admin-sidebar { color: #fff !important; }
body.admin-theme .admin-online {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
body.admin-theme .admin-sidebar-logout {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #dce7f6 !important;
}
/* 移动端管理顶栏与侧栏同色，保证白字始终落在深色承载体上。
   不依赖 data-glass：flat.css 的旧红色底在 JS 标注前也不能露出来。 */
body.admin-theme .admin-mobile-topbar {
  background-color: var(--glass-admin-dock-bg) !important;
  background-image: none !important;
}
body.admin-theme .admin-mobile-topbar[data-glass] {
  background-color: var(--glass-admin-dock-bg) !important;
  background-image: none !important;
}
/* 深色顶栏里的品牌与菜单文字必须浅色：
   否则第 17 节的 `body.lg-page a` 会把品牌标题染成深蓝，压在深色底上不可读。 */
body.admin-theme .admin-mobile-topbar .brand,
body.admin-theme .admin-mobile-topbar .brand strong,
body.admin-theme .admin-mobile-topbar .admin-mobile-menu summary { color: #eef5fc !important; }
body.admin-theme .admin-mobile-topbar .brand small { color: rgba(206, 224, 243, .78) !important; }
body.admin-theme .admin-mobile-topbar .admin-mobile-menu summary span { color: inherit !important; }

/* --------------------------------------------------------------------------
   11.5 · 声音开关：规范要求音量和静音在界面上找得到
   -------------------------------------------------------------------------- */
.glass-sound-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: .5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .40);
  box-shadow: var(--glass-edge), var(--glass-drop-sm);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.glass-sound-toggle:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .58); }
.glass-sound-toggle svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.glass-sound-toggle[aria-pressed="true"] { color: var(--primary-dark); }
body.admin-theme .glass-sound-toggle {
  color: rgba(214, 231, 246, .8);
  background: rgba(255, 255, 255, .14);
}
body.admin-theme .glass-sound-toggle[aria-pressed="true"] { color: #bfe0ff; }

/* --------------------------------------------------------------------------
   12 · 动效与降级
   -------------------------------------------------------------------------- */
/* 减弱动态：收敛形变与光效，保留清晰的静态状态 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover { transform: none; }
}

/* 打印：去掉玻璃与背景，只留内容 */
@media print {
  .app-stage { position: static; }
  .app-viewport { position: static; overflow: visible; }
  .lg-canvas, .topbar, .mobile-nav, .mobile-quickbar, .admin-sidebar { display: none !important; }
  [data-glass] { background: #fff !important; box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   13 · 覆盖层
   flat.css 里有一批材质规则写成 `body.user-theme xxx` / `body.admin-theme xxx`，
   单类选择器压不过它们（同属性、更高特异性）。这里用同样的 `body.lg-page`
   前缀重新声明一次，只重申「材质」相关的属性，不改任何布局尺寸。
   -------------------------------------------------------------------------- */

/* 13.1 登录 / 注册页：原来靠 body 上的 grid 居中，现在内容在 .app-viewport 里 */
body.auth-page { display: block !important; padding: 0 !important; background: transparent !important; }
body.auth-page .app-viewport {
  display: grid;
  /* 单列撑满：否则 place-content 会让列宽塌缩成内容宽度，
     卡片上的 width:min(980px,100%) 就没有确定的参照。 */
  grid-template-columns: minmax(0, 1fr);
  place-content: safe center;
  justify-items: center;
  padding: 1.5rem;
}
@media (max-width: 720px) { body.auth-page .app-viewport { padding: .75rem; } }
/* 照片背景交给画布环境，避免玻璃折射与照片对不上 */
body.official-auth-page, body.admin-auth-page { background: none !important; }
body.official-auth-page .official-auth-shell,
body.admin-auth-page .admin-auth-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: min(980px, 100%);
}
/* 左侧品牌区块：保留品牌色，作为可被折射的环境底板之一 */
body.official-auth-page .official-auth-intro {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(170deg, rgba(28, 92, 196, .94) 0%, rgba(24, 74, 160, .92) 46%, rgba(31, 100, 70, .9) 100%) !important;
}
body.official-auth-page .official-auth-card {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* 13.2 容器透镜：压过 body.user-theme section 的阴影与圆角 */
body.lg-page section,
body.lg-page .stat-card,
body.lg-page .reservation-card,
body.lg-page .quick-actions-panel,
body.lg-page .need-card,
body.lg-page .review-card,
body.lg-page .suggestion-card,
body.lg-page .member-card,
body.lg-page .settings-panel,
body.lg-page .jobs-section,
body.lg-page .admin-table-section,
body.lg-page .admin-guide-card,
body.lg-page .admin-create-card,
body.lg-page .danger-zone,
body.lg-page .cas-panel,
body.lg-page .pwd-block,
body.lg-page .session-summary,
body.lg-page .preview-block,
body.lg-page .changelog-panel,
body.lg-page .checkin-card,
body.lg-page .action-panel,
body.lg-page .quota-banner,
body.lg-page .empty-state {
  background-color: var(--glass-panel-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-edge), var(--glass-drop) !important;
}
body.lg-page .settings-panel,
body.lg-page .jobs-section,
body.lg-page .admin-table-section,
body.lg-page .admin-create-card,
body.lg-page .reservation-card,
body.lg-page .pwd-block,
body.lg-page .session-summary,
body.lg-page .cas-panel,
body.lg-page .preview-block,
body.lg-page .need-card,
body.lg-page .changelog-panel,
body.lg-page .action-panel {
  background-color: var(--glass-panel-dense-bg) !important;
}
body.lg-page .empty-state {
  background-color: rgba(255, 255, 255, .22) !important;
  border: 1px dashed var(--line-strong) !important;
}
body.lg-page .item-row, body.lg-page .job-row, body.lg-page .row-item,
body.lg-page .settings-row, body.lg-page .record-icon, body.lg-page body.lg-page .suggest-history-item, body.lg-page .need-strip,
body.lg-page .admin-summary-line, body.lg-page .lifecycle-list li {
  background-color: rgba(255, 255, 255, .30) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm) !important;
}
body.lg-page .notice { border-radius: var(--radius) !important; }
body.lg-page .badge { border-radius: 999px !important; }
body.lg-page .hero-status { border-radius: var(--radius) !important; }

/* 欢迎卡本身是 section，13.2 的通用 section 底色不能盖掉它的浅色渐变；
   显式把底色交还给 --glass-hero-bg。 */
body.lg-page .user-hero { background-color: transparent !important; }

/* 13.2b 首页快捷入口：外层已是容器透镜，内层不再叠一块实白卡片。
        用更轻的玻璃瓦片 + 分隔感维持可点击边界，避免「卡片套卡片」的厚重。 */
body.lg-page .quick-action {
  background-color: rgba(255, 255, 255, .24) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}
body.lg-page .quick-action:hover { background-color: rgba(255, 255, 255, .38) !important; }
body.lg-page .quick-action.primary-action-tile {
  background-color: rgba(40, 117, 237, .10) !important;
  border-color: rgba(40, 117, 237, .22) !important;
}
body.lg-page .quick-action.primary-action-tile:hover { background-color: rgba(40, 117, 237, .16) !important; }
body.lg-page .quick-action strong { color: var(--lg-color-text) !important; }
body.lg-page .quick-action > b { color: var(--primary-dark); }

/* 13.3 动作透镜：button 的底色/阴影必须赢过 body.user-theme .button.* */
body.lg-page .button {
  border-radius: var(--lg-radius-pill, 999px) !important;
  background-color: var(--glass-control-bg) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm) !important;
}
body.lg-page .button.primary,
body.lg-page .button.admin-primary {
  color: #fff !important;
  background: linear-gradient(168deg, #2f6fd8 0%, #2565cc 55%, #1a52ad 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(0, 0, 0, .14),
              0 10px 22px -12px rgba(26, 82, 173, .7) !important;
}
body.lg-page .button.secondary {
  color: var(--primary-dark) !important;
  background-color: rgba(255, 255, 255, .46) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(40, 117, 237, .22) !important;
}
body.lg-page .button.ghost {
  color: var(--lg-color-text) !important;
  background-color: rgba(255, 255, 255, .36) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(120, 150, 185, .34) !important;
}
body.lg-page .button.danger {
  color: var(--danger) !important;
  background-color: rgba(255, 255, 255, .42) !important;
  box-shadow: var(--glass-edge), var(--glass-drop-sm), inset 0 0 0 1px rgba(205, 66, 84, .34) !important;
}
/* 浅色欢迎卡里的动作：主按钮沿用深蓝白字，次按钮用浅色玻璃深字 */
body.lg-page .user-hero .button.primary { color: #fff !important; }
body.lg-page .user-hero .button.hero-secondary {
  color: var(--primary-dark) !important;
  background-color: rgba(255, 255, 255, .40) !important;
  box-shadow: var(--glass-edge), inset 0 0 0 1px rgba(40, 117, 237, .20) !important;
}

/* 13.4 输入透镜：压过 body.user-theme input 的 8px 圆角与灰边 */
body.lg-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
body.lg-page select,
body.lg-page textarea {
  border-radius: var(--lg-radius-pill, 999px) !important;
  border: 1px solid var(--line) !important;
  background-color: var(--glass-control-bg) !important;
  box-shadow: var(--glass-edge), inset 0 2px 6px -3px rgba(23, 48, 79, .22) !important;
  color: var(--text) !important;
}
body.lg-page textarea { border-radius: 22px !important; }
body.lg-page .official-field input { min-height: 50px; }

/* 13.5 管理端深色场景下的同类覆盖 */

/* --------------------------------------------------------------------------
   14 · 顶栏文字：flat.css 的官方视觉把 .user-topbar 写成深蓝底白字
        （.topbar-kicker / .topbar-status 都是白色）。改成浅色玻璃之后，
        这些白色文字在浅色底上完全不可读，这里整体翻成深色。
   -------------------------------------------------------------------------- */
body.lg-page .topbar,
body.lg-page .topbar .brand,
body.lg-page .topbar .brand strong,
body.lg-page .topbar .brand span,
body.lg-page .topbar .main-nav a { color: var(--lg-color-text) !important; }
body.lg-page .topbar .brand small,
body.lg-page .topbar .topbar-kicker,
body.lg-page .topbar .topbar-status { color: var(--muted) !important; }
body.lg-page .topbar .topbar-status i { box-shadow: 0 0 0 4px rgba(82,187,131,.18), 0 0 10px 1px rgba(82,187,131,.55); }

/* 首页欢迎卡改成浅色通透玻璃后，文字整体翻成深色（白字不再落在白纱上） */
body.lg-page .user-hero,
body.lg-page .user-hero h1 { color: var(--lg-color-text) !important; }
body.lg-page .user-hero p { color: var(--muted) !important; }
body.lg-page .user-hero .eyebrow { color: var(--primary-dark) !important; }

/* 导航类承载面的底色与去模糊，统一由第 3 节的 [data-glass="dock"] 规则负责；
   这里不再重复声明，避免同一块玻璃出现两套值。 */

/* --------------------------------------------------------------------------
   16 · 深色强调卡（.admin-guide-card 等）
        flat.css 把它们写成深底白字。改成透镜之后要翻成「染色玻璃 + 深色文字」，
        否则白字会落在浅色玻璃上完全读不出来。
   -------------------------------------------------------------------------- */
body.lg-page .admin-guide-card {
  background: linear-gradient(155deg, rgba(40, 117, 237, .16), rgba(82, 187, 131, .13)) !important;
  border: 1px solid var(--line) !important;
  color: var(--lg-color-text) !important;
  box-shadow: var(--glass-edge), var(--glass-drop) !important;
}
body.lg-page .admin-guide-card h2,
body.lg-page .admin-guide-card strong { color: var(--lg-color-text) !important; }
body.lg-page .admin-guide-card .eyebrow { color: var(--primary-dark) !important; }
body.lg-page .admin-guide-card small { color: var(--muted) !important; }
body.lg-page .admin-guide-card .lifecycle-list li { background: rgba(255, 255, 255, .38) !important; }
body.lg-page .admin-guide-card .lifecycle-list li > span { background: rgba(255, 255, 255, .7) !important; color: var(--primary-dark) !important; }

/* --------------------------------------------------------------------------
   17 · 文字承载面与强调色
        面板的白色薄纱不再在 live 时追加（那会把主按钮、通知和侧栏一起
        压成同一块白）。承载面透明度统一在 :root 的 --glass-* 变量里。
    -------------------------------------------------------------------------- */
/* 强调色做「文字」时必须用深色变体 */
body.lg-page .eyebrow,
body.lg-page .feature-chip,
body.lg-page .admin-count,
body.lg-page .back-link,
body.lg-page .form-help a,
body.lg-page a { color: var(--primary-dark) !important; }
body.lg-page .preview-note, body.lg-page .preview-notice { color: var(--muted) !important; }
body.lg-page .notice.warn, body.lg-page .quota-banner.warn { color: var(--warning) !important; }

/* 侧栏在 flat.css 的「红色主题」里被写成深红底 + 浅粉字，
   我们把它换成深蓝玻璃，就必须把整棵子树的文字重新钉成浅色。
   不再依赖 .webgl-ready：启动态侧栏同样是深底，文字从第一帧起就要可读。 */
.admin-sidebar[data-glass],
.admin-sidebar[data-glass] strong,
.admin-sidebar[data-glass] a,
.admin-sidebar[data-glass] h1,
.admin-sidebar[data-glass] .admin-sidebar-brand > span:last-child { color: #eef5fc !important; }
.admin-sidebar[data-glass] small { color: rgba(206, 224, 243, .78) !important; }
.admin-sidebar[data-glass] .admin-nav-label { color: rgba(178, 200, 226, .82) !important; }
.admin-sidebar[data-glass] .admin-side-nav > a { color: #c7d6e8 !important; }
.admin-sidebar[data-glass] .admin-side-nav > a:hover { color: #ffffff !important; }
.admin-sidebar[data-glass] .admin-side-nav > a.active,
.admin-sidebar[data-glass] .admin-side-nav > a.active strong,
.admin-sidebar[data-glass] .admin-side-nav > a.active small { color: #ffffff !important; }
.admin-sidebar[data-glass] .admin-online strong { color: #eef5fc !important; }
.admin-sidebar[data-glass] .admin-online small { color: rgba(206, 224, 243, .78) !important; }
.admin-sidebar[data-glass] .admin-nav-badge { background: rgba(255, 255, 255, .2) !important; color: #ffffff !important; }
.admin-sidebar[data-glass] .admin-nav-badge.danger { background: rgba(205, 66, 84, .5) !important; }

/* --------------------------------------------------------------------------
   19 · 管理端变量重声明
        flat.css 把管理端主题变量写在 `.admin-theme`（挂 <body>）上。
        自定义属性按「最近祖先」解析，body 上的值会赢过 :root，
        所以只在 :root 里改是无效的 —— 必须在同一层重新声明。
        同时把 HENU 红换成透镜的蓝色强调色。
   -------------------------------------------------------------------------- */
body.admin-theme {
  --bg: #eef3f8;
  --surface: var(--glass-panel-bg);
  --surface-soft: var(--glass-flat-bg);
  --text: #1d232b;
  --muted: #2f3944;
  --line: rgba(255, 255, 255, .52);
  --line-strong: rgba(120, 150, 185, .34);

  --primary: var(--lg-color-accent);
  --primary-dark: #0d2f63;
  --primary-soft: rgba(40, 117, 237, .13);

  --admin: #1f3a5c;
  --admin-dark: #14283f;
  --admin-primary: var(--lg-color-accent);
  --admin-primary-dark: #143f88;
  --admin-soft: rgba(40, 117, 237, .13);

  --danger: #9f2b3b;
  --danger-soft: rgba(205, 66, 84, .13);
  --warning: #6b4506;
  --warning-soft: rgba(226, 181, 78, .22);
  --success: #1f6446;
  --success-soft: rgba(82, 187, 131, .18);
}

/* --------------------------------------------------------------------------
   20 · 安静元数据色统一
        flat.css 在几十处硬编码了 #94a3b8 / #64748b 这类浅灰做次要文字，
        放在半透明玻璃上普遍只有 1.5–2.5 的对比度。这里按实际选择器逐条
        改成透镜的 --muted（深色侧栏上的那几条已由浅色规则单独处理，排除在外）。
   -------------------------------------------------------------------------- */
body.lg-page .official-auth-card .auth-brand p { color: var(--muted) !important; }
body.lg-page .official-auth-card .secure-tip { color: var(--muted) !important; }
body.lg-page .admin-run-filter label { color: var(--muted) !important; }
body.lg-page .run-detail small { color: var(--muted) !important; }
body.lg-page .member-days small { color: var(--muted) !important; }
body.lg-page .member-label { color: var(--muted) !important; }
body.lg-page .chip-muted { color: var(--muted) !important; }
body.lg-page .member-actions > summary::after { color: var(--muted) !important; }
body.lg-page .member-action-help { color: var(--muted) !important; }
body.lg-page .member-card-foot { color: var(--muted) !important; }
body.lg-page .need-strip-label { color: var(--muted) !important; }
body.lg-page .need-pill b { color: var(--muted) !important; }
body.lg-page .member-more > summary { color: var(--muted) !important; }
body.lg-page .member-expand > summary { color: var(--muted) !important; }
body.lg-page .log-detail > summary::after { color: var(--muted) !important; }
body.lg-page .log-date { color: var(--muted) !important; }
body.lg-page .log-detail > summary::after { color: var(--muted) !important; }
body.lg-page .preview-block > summary::after { color: var(--muted) !important; }
body.lg-page .preview-note { color: var(--muted) !important; }

/* --------------------------------------------------------------------------
   21 · 廉价透镜材质（.lg-frost）
        小尺寸控件（按钮、输入框、行内动作）不再进入画布折射，
        改用同一套透镜观感的 CSS 呈现：只用半透明底色 + 上边反光，
        不用 backdrop-filter（那同样很贵）。
        设计体系本来就允许「WebGL 不可用时沿用同一组件的兼容呈现」。
   -------------------------------------------------------------------------- */
/* 与画布玻璃对齐：同样的厚度边光（上亮、下暗、右侧弱反光）+ 同样的圆角 + 同样的投影，
   这样「折射玻璃」和「CSS 玻璃」并排时不会显出两种材质。 */
/* 廉价材质：只承担「这块表面有玻璃质感」的边光与投影，
   底色仍由组件自己的语义规则决定（主按钮的蓝、通知的语义色不能被冲掉）。
   同时明确去掉 backdrop-filter —— 小控件不再为模糊付合成开销。 */
.lg-frost {
  border-radius: inherit;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 诊断：?glassdebug=1 时把渲染器认定的玻璃范围用红框画出来 */
body.glass-debug [data-glass] { outline: 1px solid #ff0066 !important; outline-offset: 0 !important; }
body.glass-debug .lg-frost:not([data-glass]) { outline: 1px dashed #00a2ff !important; }

/* --------------------------------------------------------------------------
   23 · 统一化
        审计结果：flat.css 里有 244 个唯一颜色、7 种混用的 border-radius、
        6 种相近的小字号，以及 HENU 红 / 旧青绿品牌色的残留。
        这一节把「同类元素」收敛到透镜体系的一套值上，不改布局。
   -------------------------------------------------------------------------- */

/* 23.1 启动底色与画布环境一致 —— 消除首屏「先灰蓝、后彩色」的跳变。
        静态底图与 GPU 背景使用同一张图、同一套 cover 裁切：
        scene.js 的 paintArtwork 用 drawImage 复刻了这里的 cover 计算。
        背景挂在 .app-stage（fixed inset:0 = 视口）上，而不是 body，
        这样移动端不会因为 background-attachment: fixed 被特殊处理而对不上。 */
html, body.lg-page { background: var(--bg); }
.app-stage {
  background: var(--bg) url('/static/glass/scene-aurora.jpg') center center / cover no-repeat;
}
/* 注意：这里不能再用 `.lg-stage { background: transparent !important }`
   覆盖 —— 那会把静态底图一并清掉，画布就绪前只剩纯色，反而制造跳变。
   画布本身在负 z-index，会盖在 stage 底色之上。 */

/* 23.2 画布淡入：只有画布本身渐变，元素底色从头到尾不变，
        所以这个过程不会改变页面任何一块承载面的亮度。 */
.lg-canvas { opacity: 0; transition: opacity 120ms linear; }
.lg-stage.lg-glass-live .lg-canvas { opacity: 1; }
.lg-stage.lg-glass-late .lg-canvas { transition: none; }
[data-glass] {
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
}

/* 23.3 圆角收敛：面板 28 / 常规容器 22 / 控件 999·14 —— 不再 8/9/10/11/13 混用 */
body.lg-page .item-row,
body.lg-page .job-row,
body.lg-page .row-item,
body.lg-page .settings-row,
body.lg-page .member-card,
body.lg-page body.lg-page .suggest-history-item,
body.lg-page .need-strip,
body.lg-page .admin-summary-line,
body.lg-page .lifecycle-list li,
body.lg-page .record-icon,
body.lg-page .table-wrap,
body.lg-page .responsive-table,
body.lg-page .notice,
body.lg-page .badge,
body.lg-page .empty-state,
body.lg-page .generated-box,
body.lg-page .quota-banner,
body.lg-page .member-block { border-radius: var(--radius) !important; }
body.lg-page .badge { border-radius: 999px !important; }
body.lg-page .inline-code,
body.lg-page .chip-link,
body.lg-page .feature-chip,
body.lg-page .admin-count,
body.lg-page .need-pill,
body.lg-page .filter-chips a,
body.lg-page .summary-pills span { border-radius: 999px !important; }
body.lg-page .admin-side-nav > a,
body.lg-page .settings-icon,
body.lg-page .admin-quick-list a > span,
body.lg-page .brand-mark { border-radius: 14px !important; }

/* 23.4 清理残留的 HENU 红 / 旧青绿品牌色 */
body.lg-page .admin-mobile-panel {
  background: rgba(18, 38, 60, .96) !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
}
body.lg-page .admin-welcome {
  background: linear-gradient(160deg, #2f6fd8 0%, #1a52ad 100%) !important;
  color: #fff !important;
}
body.lg-page .admin-theme .inline-code,
body.lg-page .admin-theme code { color: var(--muted) !important; }
body.lg-page .member-days,
body.lg-page .admin-summary-line strong,
body.lg-page .stat-card strong { color: var(--lg-color-text) !important; }
body.lg-page .settings-icon.violet { background: rgba(40, 117, 237, .14) !important; color: var(--primary-dark) !important; }
/* 23.4 品牌深色底只留给登录页左侧品牌区 / 账户页品牌区；
        首页欢迎卡是浅色通透玻璃，由 --glass-hero-bg 决定。 */
body.lg-page .auth-intro,
body.lg-page .official-auth-intro,
body.lg-page .account-hero {
  background: linear-gradient(152deg, rgba(28, 92, 196, .94) 0%, rgba(24, 74, 160, .92) 46%, rgba(31, 100, 70, .90) 100%) !important;
  color: #fff !important;
}
body.lg-page .user-hero { color: var(--lg-color-text) !important; }

/* 23.5 小字号收敛到 12px 一档（原来 10.5/11/11.5/12.5 混用，观感碎） */
body.lg-page small,
body.lg-page .muted-text,
body.lg-page .form-help,
body.lg-page .section-caption,
body.lg-page .member-card-foot,
body.lg-page .member-action-help,
body.lg-page .member-label,
body.lg-page .admin-summary-line,
body.lg-page .row-more-toggle,
body.lg-page .need-strip-label { font-size: 12px; }
body.lg-page .eyebrow { font-size: 11px; letter-spacing: .12em; }
body.lg-page .badge { font-size: 11.5px; }

/* --------------------------------------------------------------------------
   24 · 收尾：抹掉「硬边/虚线/纯白块」
        审计扫出来的离群项都集中在管理端成员区与表格工具条：
          · 5 处 dashed 虚线框（玻璃体系里最扎眼的一类边）
          · 6 处纯白实心底（图标块、搜索框、预约卡）
          · 一条写错的选择器：.admin-theme 挂在 body 上，
            `body.lg-page .admin-theme x` 永远不匹配 → inline-code 一直是 HENU 粉白底
   -------------------------------------------------------------------------- */

/* 24.1 修正失效选择器 */
body.lg-page .inline-code {
  background: rgba(255, 255, 255, .52) !important;
  color: var(--lg-color-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6) !important;
  border-radius: 999px !important;
}

/* 24.2 虚线边框 → 实线玻璃分隔（保留可展开的语义，去掉刺眼的虚线） */
body.lg-page .member-actions {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: rgba(255, 255, 255, .22) !important;
  overflow: hidden;
}
body.lg-page .member-actions[open] > summary {
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
body.lg-page .member-expand { border-top: 1px solid var(--line) !important; }
body.lg-page .admin-fold-flat { border-style: solid !important; border-color: var(--line) !important; }
body.lg-page .empty-state {
  border-style: solid !important;
  border-color: var(--line-strong) !important;
  background: rgba(255, 255, 255, .20) !important;
}

/* 24.3 纯白实心底 → 玻璃 */
body.lg-page .member-grid {
  background: rgba(255, 255, 255, .24) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
}
body.lg-page .admin-table-search {
  background: rgba(255, 255, 255, .46) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  box-shadow: inset 0 2px 6px -3px rgba(23, 48, 79, .18);
}
body.lg-page .reservation-card {
  background-color: var(--glass-panel-dense-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-edge), var(--glass-drop) !important;
}
body.lg-page .hero-status {
  background-color: rgba(255, 255, 255, .52) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-edge), 0 10px 24px -16px rgba(9, 20, 55, .32) !important;
}

/* 24.4 图标方块统一 14px 圆角 + 玻璃底，不再出现 8px 的白方块 */
body.lg-page .admin-side-nav > a > span,
body.lg-page .admin-sidebar-brand .brand-mark.admin,
body.lg-page .settings-icon,
body.lg-page .stat-icon,
body.lg-page .record-icon,
body.lg-page .lifecycle-list li > span {
  border-radius: 14px !important;
}
body.lg-page .admin-side-nav > a > span {
  background: rgba(255, 255, 255, .12) !important;
  color: #cfe0f5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
body.lg-page .admin-side-nav > a.active > span {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--primary-dark) !important;
}
body.lg-page .admin-sidebar-brand .brand-mark.admin {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--primary-dark) !important;
}
body.lg-page .stat-icon,
body.lg-page .settings-icon,
body.lg-page .record-icon {
  background: rgba(255, 255, 255, .46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* 24.5 排版节奏：卡片内边距统一到 20/24 两档，成员网格不再挤成 10px */
body.lg-page .member-grid { padding: 14px 16px !important; gap: 12px !important; }
body.lg-page .member-card { padding: 1.25rem !important; }
body.lg-page .section-head { margin-bottom: 1.15rem; }
body.lg-page .admin-page-header { margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   25 · 玻璃薄纱
        这里不再声明任何「live 时统一改底色」的规则。
        承载面透明度只由 :root 的 --glass-* 变量与第 3 节的语义表面决定，
        状态切换只发生画布淡入，元素底色一个像素都不变。
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   26 · 对比度修正（按真实合成背景验收）
    -------------------------------------------------------------------------- */
/* 弹窗处在 top layer，背后还有 50% 的深色遮罩：半透明白底会让正文重新落到
   中间调。这里用接近不透明的纸面，保证「还需阅读 N 秒」这类小字也能读。 */
body.lg-page dialog,
body.lg-page dialog.announce {
  background-color: rgba(251, 253, 255, .96) !important;
  background-image: none !important;
  color: var(--lg-color-text) !important;
}
body.lg-page dialog .announce-kind {
  background-color: rgba(40, 117, 237, .16) !important;
  color: var(--primary-dark) !important;
}
body.lg-page dialog .announce-date,
body.lg-page dialog .announce-hint { color: var(--muted) !important; }
body.lg-page dialog .announce-read:disabled { opacity: .55; }

/* 登录页页脚小字：原来 #9aa1aa 在浅色玻璃上只有 1.7 */
body.lg-page .auth-footer-note,
body.lg-page .auth-footer-note span { color: var(--muted) !important; }

/* 账户页品牌区是深蓝底：里面所有文字必须浅色 */
body.lg-page .account-hero,
body.lg-page .account-hero h1,
body.lg-page .account-hero p,
body.lg-page .account-hero .eyebrow { color: #fff !important; }
body.lg-page .account-hero .eyebrow { color: #cfe0ff !important; }
body.lg-page .account-hero .account-validity {
  background-color: rgba(255, 255, 255, .20) !important;
  color: #fff !important;
}
body.lg-page .account-hero .account-validity strong { color: #fff !important; }

/* 强调色做小字号文字时统一压到深色变体（#2875ed 在白/浅底上只有 4.3） */
body.lg-page .choice strong,
body.lg-page .time-presets button.active,
body.lg-page .auto-daily-trigger,
body.lg-page .auto-daily-change,
body.lg-page .jobs-filters button.active,
body.lg-page .filter-chips a.active,
body.lg-page .summary-pills span { color: var(--primary-dark) !important; }
body.lg-page .time-presets button.active { background-color: rgba(40, 117, 237, .20) !important; }
body.lg-page .jobs-filters button.active { background-color: rgba(40, 117, 237, .18) !important; }

/* 管理端概览下方灰字：flat.css 用的 #64748b 在浅玻璃上只有 3.2 */
body.lg-page .admin-summary-line,
body.lg-page .admin-summary-line small { color: var(--muted) !important; }

/* 语义徽标：文字再深一档，保证 11.5px 也过 AA */
body.lg-page .badge.ok { color: #175237 !important; }
body.lg-page .badge.warn { color: #5a3a04 !important; }
body.lg-page .badge.danger { color: #9a2434 !important; }

/* 通知条：半透明语义色叠在画布上会掉对比度，提高底色浓度并加深文字 */
body.lg-page .notice.success { background-color: rgba(82, 187, 131, .26) !important; color: #175237 !important; }
body.lg-page .notice.error   { background-color: rgba(205, 66, 84, .22) !important;  color: #8f2434 !important; }
body.lg-page .notice.warn    { background-color: rgba(226, 181, 78, .30) !important; color: #5a3a04 !important; }


/* 生命周期说明小字：flat.css 用 #9daac0 写在浅色面板上（1.35:1） */
body.lg-page .lifecycle-list small { color: var(--muted) !important; }
body.lg-page .lifecycle-list strong { color: var(--lg-color-text) !important; }

/* 账户页额度块：白字落在白色 20% 芯片上只有 3.6，换成深色芯片 */
body.lg-page .account-hero .account-validity {
  background-color: rgba(8, 24, 58, .30) !important;
  color: #fff !important;
}
body.lg-page .account-hero .account-validity strong { color: #fff !important; }

/* 反馈条：直接压在画布上时半透明色底会掉到 3.5 左右。
   改成接近不透明的浅色纸 + 语义色文字，保留左侧色条表达状态。 */
body.lg-page .notice.success { background-color: rgba(238, 250, 243, .94) !important; color: #175237 !important; }
body.lg-page .notice.error   { background-color: rgba(253, 239, 241, .94) !important; color: #7f1f2f !important; }
body.lg-page .notice.warn    { background-color: rgba(255, 248, 232, .94) !important; color: #5a3a04 !important; }


/* 登录/注册页左侧品牌区里的英文小标题：第 17 节的深蓝强调色规则会覆盖它，
   这里显式恢复成浅蓝（深色底上的白字承诺）。 */
body.lg-page .official-auth-intro .eyebrow,
body.lg-page .auth-intro .eyebrow { color: #bfe6ff !important; }

/* 危险/警告徽标再提一档底色浓度，保证 11.5px 小字也过 AA */
body.lg-page .badge.danger { background-color: rgba(205, 66, 84, .36) !important; color: #6f1826 !important; }
body.lg-page .badge.warn { background-color: rgba(226, 181, 78, .34) !important; color: #4f3303 !important; }


/* 设置页说明段：原来写在模板 inline style 里，被 CSP style-src 'self' 拦下
   （控制台报错）。改成工具类，行为不变、控制台干净。 */
body.lg-page .settings-note { margin: .6rem 0 0; font-size: .78rem; line-height: 1.6; }