/* ═══════════════════════════════════════════════════════════════
   风水平台 — Claude Fable 5 设计升级层 (AFTER version)
   Generated by Claude Fable 5 via OpenRouter, 2026-08-13
   Loaded LAST (after macos-dash.css). Additive CSS-only upgrade:
   - 硃砂渐层 + 金边主色系统（描金漆器质感）
   - 卡片金角（书画裱装「包角」隐喻）
   - Sidebar 描金选中项（左金条 + 硃砂晕开）
   - Titlebar 金线分隔 + 交通灯 hover 符号
   - 鎏金数字（金色渐层文字 + tabular-nums）
   - 墨晕背景 + 八卦纹理（零图片成本）
   - 吉/凶/平 三态语义化标签
   Rollback = remove the <link> in index.html.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fable 5 design tokens (dark 墨夜 mode, additive) ─── */
:root {
  /* 硃砂 red system */
  --f5-cinnabar:      #B03A2E;
  --f5-cinnabar-hi:   #c04a3e;
  --f5-cinnabar-lo:   #8a2b25;
  --f5-cinnabar-soft: rgba(176,58,46,.10);

  /* 哑金 (low saturation — premium, not tacky) */
  --f5-gold:          #B8912F;
  --f5-gold-bright:   #D4AF37;
  --f5-gold-glow:     rgba(212,175,55,.35);

  /* 宣纸/墨 */
  --f5-paper:         #F7F4EE;
  --f5-ink:           #2B2622;

  /* 吉凶语义色 */
  --f5-ji:            #6FAF7E;   /* 吉：松绿 */
  --f5-ji-bg:         #1E2E22;
  --f5-ping:          #D99A4E;   /* 平：琥珀 */
  --f5-ping-bg:       #332714;
  --f5-xiong:         #E06055;   /* 凶：暗朱 */
  --f5-xiong-bg:      #38201D;
}

/* ─── ① 主色系统：硃砂渐层 + 金边（描金漆器） ─── */
.btn-primary {
  background: linear-gradient(135deg, var(--f5-cinnabar-hi) 0%, var(--f5-cinnabar) 45%, var(--f5-cinnabar-lo) 100%);
  border: 1px solid rgba(212,175,55,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,215,160,.28),
    0 2px 8px rgba(138,43,37,.40),
    0 8px 24px rgba(138,43,37,.20);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #d05044 0%, var(--f5-cinnabar-hi) 45%, var(--f5-cinnabar) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,170,.35),
    0 4px 14px rgba(138,43,37,.50),
    0 12px 32px rgba(138,43,37,.25);
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(0); }

/* ─── ② Sidebar：描金选中项（左金条 + 硃砂晕开） ─── */
.sidebar {
  background: linear-gradient(180deg, #1c1815 0%, #14110f 100%);
  border-right: 1px solid rgba(212,175,55,.12);
}
body.theme-light .sidebar {
  background: linear-gradient(180deg, #f4f2ee 0%, #e9e6df 100%);
  border-right: 1px solid rgba(168,129,63,.20);
}
.sidebar-nav li.active {
  background: linear-gradient(90deg, rgba(168,58,50,.30), rgba(168,58,50,.05) 85%, transparent);
  border-left: 3px solid var(--f5-gold-bright);
  color: #f0d9a0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sidebar-nav li.active .nav-icon,
.sidebar-nav li.active i,
.sidebar-nav li.active svg {
  filter: drop-shadow(0 0 6px rgba(212,175,55,.55));
}
.sidebar-logo h1 {
  color: var(--f5-gold-bright);
  text-shadow: 0 0 18px rgba(212,175,55,.25);
}

/* ─── ③ Titlebar：金线分隔 + 交通灯 hover 符号 ─── */
.mac-titlebar {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent) 1;
  background: rgba(26,22,37,.78);
}
.mac-tl-btn { position: relative; }
.mac-tl-btn::after {
  content: attr(data-symbol);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 800; color: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .15s ease;
}
.mac-tl-btn:hover::after { opacity: 1; }

/* ─── ④ 卡片：金角装饰（书画裱装「包角」）+ 宣纸底 ─── */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    #22222f;
  border: 1px solid rgba(212,175,55,.14);
  position: relative;
}
.card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 30px; height: 30px;
  border-top: 2px solid rgba(212,175,55,.55);
  border-right: 2px solid rgba(212,175,55,.55);
  border-radius: 0 12px 0 0;
  opacity: .7;
  pointer-events: none;
}
.card:hover { border-color: rgba(212,175,55,.38); }

/* 二级卡片也加淡金角（dashboard 卡片 + 首页快捷功能卡） */
.dash-card, .dash-section, .dash-cat-card, .task-card, .advice-card, .product-card, .quick-action-card, .stat-card {
  border: 1px solid rgba(212,175,55,.10);
  position: relative;
}
.quick-action-card::before, .dash-card::after, .task-card::after, .stat-card::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 24px; height: 24px;
  border-top: 2px solid rgba(212,175,55,.45);
  border-right: 2px solid rgba(212,175,55,.45);
  border-radius: 0 10px 0 0;
  opacity: .65;
  pointer-events: none;
  z-index: 2;
}

/* ─── ⑤ 鎏金数字（stat 值渐变金字 + 对齐） ─── */
.stat-card .stat-value,
.dash-stat-value,
.balance-value,
.budget-num,
.metric-value {
  background: linear-gradient(180deg, #e8c96a 0%, var(--f5-gold-bright) 50%, #a8842a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ─── ⑥ 墨晕背景 + 极淡八卦纹理 ─── */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,58,46,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(212,175,55,.07), transparent 55%),
    #0f0d0b;
  background-attachment: fixed;
}

/* ─── ⑦ 吉/凶/平 三态语义化标签 ─── */
.dash-badge { border: 1px solid transparent; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.dash-badge.completed { background: var(--f5-ji-bg); color: var(--f5-ji); border-color: rgba(111,175,126,.35); }
.dash-badge.ongoing    { background: var(--f5-ping-bg); color: var(--f5-ping); border-color: rgba(217,154,78,.35); }
.dash-badge.planning   { background: var(--f5-xiong-bg); color: var(--f5-xiong); border-color: rgba(224,96,85,.35); }

/* 标签通用（若页面用 .tag） */
.tag-ji    { background: var(--f5-ji-bg); color: var(--f5-ji); }
.tag-ping  { background: var(--f5-ping-bg); color: var(--f5-ping); }
.tag-xiong { background: var(--f5-xiong-bg); color: var(--f5-xiong); }

/* ─── ⑧ 分隔线：金丝渐层 ─── */
.divider, hr.section-divider {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
}

/* ─── ⑨ 数字/金额强调（五行土金渐变文本） ─── */
.wu-tu { color: var(--f5-gold-bright); }

/* ─── ⑩ 中文标题字距（气度） ─── */
h1, h2, h3, .card-title, .section-title {
  letter-spacing: .04em;
}

/* ─── 11 焦点态：金色描边 ─── */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--f5-gold-bright);
  box-shadow: 0 0 0 3px rgba(212,175,55,.20);
}

/* ─── 12 滚动条：金棕细条 ─── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(184,145,47,.45), rgba(138,43,37,.45));
  border-radius: 5px;
  border: 2px solid #0f0d0b;
}
::-webkit-scrollbar-track { background: transparent; }

/* ─── 13 浅色主题：覆写深色硬编码 ─── */
body.theme-light .mac-titlebar { background: rgba(255,255,255,.82); }
body.theme-light .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)),
    #ffffff;
  border-color: rgba(168,129,63,.20);
}
body.theme-light .card:hover { border-color: rgba(168,129,63,.40); }
body.theme-light {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,58,46,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(168,129,63,.05), transparent 55%),
    #f4f2ee;
  background-attachment: fixed;
}
body.theme-light ::-webkit-scrollbar-thumb { border: 2px solid #f4f2ee; }

/* ─── Reduced motion (courtesy) ─── */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .card, .mac-tl-btn { transition: none; }
}