/* ==========================================================================
   apple-glass.css — 苹果风格 · 毛玻璃 · 祥云八卦花纹 全站美化层
   加载顺序：theme.css → main.css → components.css → parchment-themes.css → 本文件
   设计原则：色系完全复用主题变量，仅增强玻璃质感 / 圆角阴影 / 装饰纹样 / 数字排版
   ========================================================================== */

/* ==========================================================================
   1. 玻璃材质变量（三主题适配，色系不变）
   ========================================================================== */
[data-theme="parchment"] {
  --glass-blur:       blur(18px) saturate(180%);
  --glass-bg:         rgba(255, 252, 245, 0.52);
  --glass-bg-strong:  rgba(255, 252, 245, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.65);
  --glass-highlight:  rgba(255, 255, 255, 0.90);
  --glass-shadow:      0 10px 40px rgba(122, 92, 50, 0.14);
  --glass-shadow-hover: 0 18px 56px rgba(122, 92, 50, 0.22);
  --decor-cloud:      rgba(122, 98, 40, 0.14);
  --decor-bagua:      rgba(74, 124, 94, 0.16);
}
[data-theme="dark"] {
  --glass-blur:       blur(18px) saturate(150%);
  --glass-bg:         rgba(21, 21, 30, 0.50);
  --glass-bg-strong:  rgba(21, 21, 30, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.08);
  --glass-highlight:  rgba(255, 255, 255, 0.07);
  --glass-shadow:      0 10px 40px rgba(0, 0, 0, 0.45);
  --glass-shadow-hover: 0 18px 56px rgba(0, 0, 0, 0.55);
  --decor-cloud:      rgba(138, 122, 74, 0.10);
  --decor-bagua:      rgba(74, 124, 126, 0.12);
}
[data-theme="dark-parchment"] {
  --glass-blur:       blur(18px) saturate(150%);
  --glass-bg:         rgba(45, 35, 24, 0.50);
  --glass-bg-strong:  rgba(45, 35, 24, 0.72);
  --glass-border:     rgba(180, 150, 100, 0.14);
  --glass-highlight:  rgba(255, 255, 255, 0.06);
  --glass-shadow:      0 10px 40px rgba(0, 0, 0, 0.35);
  --glass-shadow-hover: 0 18px 56px rgba(0, 0, 0, 0.45);
  --decor-cloud:      rgba(154, 128, 48, 0.10);
  --decor-bagua:      rgba(90, 138, 110, 0.12);
}

/* ==========================================================================
   2. 卡片 / 面板 — 毛玻璃 + 苹果圆角阴影
   ========================================================================== */
.panel,
.fortune-card,
.entry-card,
.list-item,
.bazi-pillar,
.collapse {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-bg);
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

/* 描边面板（玉青/鎏金）保持顶部光带，底色玻璃化 */
.panel--jade, .panel--gold { background: var(--glass-bg); }

/* 卜卦卡 / 入口卡 hover 悬浮（苹果轻浮感） */
.entry-card,
.list-item,
.fortune-card {
  transition: transform 0.35s var(--ease-ink), box-shadow 0.35s var(--ease-ink);
}
.entry-card:hover,
.list-item:hover,
.fortune-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover), inset 0 1px 0 var(--glass-highlight);
}

/* 入口卡变体：保留玉青/鎏金描边，玻璃底 */
.entry-card--jade { background: var(--glass-bg); border-color: var(--border-jade); }
.entry-card--gold { background: var(--glass-bg); border-color: var(--border-gold); }
.entry-card--cyber { background: var(--glass-bg); border-color: var(--border-jade); }

/* 列表项 hover 描边光晕 */
.list-item:hover { border-color: var(--border-jade); }

/* ==========================================================================
   3. 导航 / 弹窗 / 提示 — 强毛玻璃
   ========================================================================== */
.nav-top,
.tabbar,
.disclaimer-bar,
.modal,
.toast,
.theme-float {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.nav-top { background: var(--glass-bg-strong); }

.modal {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--glass-highlight);
}

/* ==========================================================================
   4. 按钮 — 胶囊主按钮 + 毛玻璃
   ========================================================================== */
.btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn--primary,
.btn--secondary,
.btn--danger {
  border-radius: 999px;   /* 苹果胶囊按钮 */
  padding: 12px 30px;
}
.btn--ghost { border-radius: 12px; }
.btn--sm { border-radius: 999px; padding: 6px 16px; }
.btn--block.btn--primary { border-radius: 999px; }

/* ==========================================================================
   5. 输入框 — 玻璃 + 内高光
   ========================================================================== */
.input, .textarea, .select {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* ==========================================================================
   6. 日历数字显示优化（色系不变，仅排版）
   ========================================================================== */
/* 星期头：放大、字距；周日朱砂 / 周六鎏金 */
.cal-weekday { font-size: 0.75rem; letter-spacing: 1px; }
.cal-weekday:nth-child(7n+1) { color: var(--text-cinnabar); }
.cal-weekday:nth-child(7n+7) { color: var(--text-gold); }

/* 公历数字：加大加粗 + 等宽对齐 */
.cal-cell__solar {
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* 农历数字：放大提亮 */
.cal-cell__lunar { font-size: 0.7rem; letter-spacing: 0.5px; line-height: 1.35; }

/* 周末着色（公历数字）：周日朱砂 / 周六鎏金，今日除外 */
.cal-grid > .cal-cell:nth-child(7n+1):not(.cal-cell--today) .cal-cell__solar { color: var(--text-cinnabar); }
.cal-grid > .cal-cell:nth-child(7n+7):not(.cal-cell--today) .cal-cell__solar { color: var(--text-gold); }

/* 今日：方形底 → 玉青圆环印章（毛玻璃内晕） */
.cal-cell--today { background: transparent; border: 1px solid transparent; box-shadow: none; }
.cal-cell--today .cal-cell__solar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--jade);
  color: var(--text-jade);
  box-shadow: var(--glow-jade), inset 0 0 6px rgba(74, 124, 94, 0.14);
  background: radial-gradient(circle at 50% 40%, var(--jade-dim), rgba(74, 124, 94, 0.02));
}
.cal-cell--today .cal-cell__lunar { color: var(--text-jade); font-weight: 600; }

/* ==========================================================================
   7. 宜忌印章标签 — 字号·间距优化
   ========================================================================== */
.badge { font-size: 0.78rem; padding: 4px 12px; letter-spacing: 1.5px; }
.badge--seal::before { inset: -2px; }

/* ==========================================================================
   8. 今日信息面板 — 数字等宽对齐
   ========================================================================== */
.today-solar {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 1.5px;
}
.today-solar b { font-weight: 600; color: var(--text-primary); }
.gz-line { letter-spacing: 4px; }

/* ==========================================================================
   9. 祥云 / 八卦 装饰水印层
   ========================================================================== */
.zen-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.zen-decor svg { position: absolute; }
.zen-decor .decor-cloud { color: var(--decor-cloud); }
.zen-decor .decor-bagua { color: var(--decor-bagua); }

.zen-decor .decor-cloud--1 { width: 150px; top: 9%;  right: -30px; transform: rotate(-8deg);  opacity: 0.9; }
.zen-decor .decor-cloud--2 { width: 110px; bottom: 16%; left: -22px;  transform: rotate(12deg);  opacity: 0.7; }
.zen-decor .decor-cloud--3 { width: 90px;  top: 38%;  left: -18px;   transform: rotate(6deg);   opacity: 0.5; }
.zen-decor .decor-bagua { width: 320px; bottom: 4%; right: -80px; opacity: 0.85; animation: bagua-spin 120s linear infinite; }

@keyframes bagua-spin {
  to { transform: rotate(360deg); }
}

/* 弱化动效：偏好减少动态时静止 */
@media (prefers-reduced-motion: reduce) {
  .zen-decor .decor-bagua { animation: none; }
  .entry-card, .list-item, .fortune-card { transition: none; }
}

/* ==========================================================================
   10. 入口卡图标 — 统一毛玻璃圆角容器
   ========================================================================== */
.entry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 3px 10px rgba(0, 0, 0, 0.06);
  font-size: 1.6rem;
  line-height: 1;
}
/* 三列紧凑布局：缩小图标容器 */
.grid--3 .entry-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 1.35rem;
}

/* 入口卡内联 SVG 线稿图标：等比缩放，跟随卡片主题色 */
.entry-card__icon svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.grid--3 .entry-card__icon svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   11. 五行统计 — 统一线稿图标 + 醒目计数 + 渐变进度条
   ========================================================================== */
.wuxing-bar { display: flex; gap: 8px; margin-top: 12px; }
.wuxing-bar__item { flex: 1; text-align: center; }
.wx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 5px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.wx-icon svg { width: 19px; height: 19px; }
.wx-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}
.wx-name { font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; }
.wx-count {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.wuxing-bar__fill {
  height: 6px;
  border-radius: 3px;
  margin-top: 7px;
  transition: width 0.6s var(--ease-ink);
}

/* 四柱表格中的五行小图标 */
.wx-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 3px; vertical-align: -2px; }
.wx-tag svg { width: 13px; height: 13px; }