/* ═══════════════════════════════════════════════════════════════
   风水平台 — macOS 窗口风格层 (macOS window chrome layer)
   Loaded AFTER style.css. Additive only: extends approved palette,
   never replaces. Rollback = delete the <link> in index.html.
   ═══════════════════════════════════════════════════════════════ */

/* ─── §4 Design tokens — extends approved palette, never replaces ─── */
:root {
  /* Chrome metrics */
  --mac-titlebar-h: 38px;
  --mac-blur: blur(18px) saturate(160%);
  --mac-blur-lg: blur(28px) saturate(180%);

  /* Glass surfaces — rgba() of approved ink/cards/gold/red */
  --mac-titlebar-bg: rgba(26, 22, 37, 0.72);      /* ink #1a1625 */
  --mac-sidebar-bg:  rgba(15, 15, 20, 0.62);      /* deep ink #0f0f14 */
  --mac-glass-card:  linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)), #22222f;
  --mac-mobilenav-bg: rgba(26, 22, 37, 0.82);     /* ink */

  /* Hairs / hairlines */
  --mac-border-soft:  rgba(255, 255, 255, 0.07);
  --mac-border-gold:  rgba(201, 169, 110, 0.14);  /* gold #c9a96e @14% */
  --mac-hairline:     rgba(255, 255, 255, 0.05);

  /* Rows & pills */
  --mac-hover-row:    rgba(255, 255, 255, 0.055);
  --mac-active-pill:  rgba(201, 169, 110, 0.16);  /* gold pill (macOS sidebar) */
  --mac-active-text:  #c9a96e;                    /* gold — same as --accent-gold */

  /* Depth */
  --mac-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --mac-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --mac-radius: 10px;

  /* Traffic lights (macOS exact hues, subtle inner shadows) */
  --tl-close: #ff5f57;  --tl-min: #febc2e;  --tl-max: #28c840;
  --tl-inner: inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 1px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.25);

  /* SF-like font stack (PingFang SC for Chinese) */
  --font-sf: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
             'Helvetica Neue', 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;
}

/* ─── §4b 浅色主题 — 覆写 glass surfaces（body.theme-light 时生效） ─── */
body.theme-light {
  /* Glass surfaces — 浅色 frosted */
  --mac-titlebar-bg: rgba(255, 255, 255, 0.78);
  --mac-sidebar-bg:  rgba(244, 242, 238, 0.82);
  --mac-glass-card:  linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)), #ffffff;
  --mac-mobilenav-bg: rgba(255, 255, 255, 0.86);

  /* Hairs / hairlines — 浅底用深色 hairline */
  --mac-border-soft:  rgba(0, 0, 0, 0.08);
  --mac-border-gold:  rgba(168, 129, 63, 0.25);
  --mac-hairline:     rgba(0, 0, 0, 0.06);

  /* Rows & pills */
  --mac-hover-row:    rgba(0, 0, 0, 0.05);
  --mac-active-pill:  rgba(168, 129, 63, 0.18);
  --mac-active-text:  #a8813f;

  /* Depth */
  --mac-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --mac-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ─── §5.2 Body — ink ground + cinnabar/gold ambient wash (so glass reads) ─── */
body {
  font-family: var(--font-sf);
  padding-top: var(--mac-titlebar-h);              /* clear fixed bar */
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(196,90,74,0.10), transparent 60%),
    radial-gradient(900px 650px at 0% 110%, rgba(201,169,110,0.07), transparent 55%),
    var(--bg-primary);
  background-attachment: fixed;
}
body.theme-light {
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(196,90,74,0.06), transparent 60%),
    radial-gradient(900px 650px at 0% 110%, rgba(168,129,63,0.05), transparent 55%),
    var(--bg-primary);
  background-attachment: fixed;
}

/* ─── §5.3 Title bar — frosted glass, fixed ─── */
.mac-titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--mac-titlebar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; z-index: 300;
  background: var(--mac-titlebar-bg);
  -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur);
  border-bottom: 1px solid var(--mac-border-gold);
}
.mac-title { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--text-primary); letter-spacing: 2px; margin-right: 66px; } /* optically centered */
.mac-tl { display: flex; gap: 8px; }
.mac-tl-btn { width: 12px; height: 12px; border-radius: 50%;
  transition: transform .15s ease, filter .15s ease; }
.mac-tl-btn:hover { transform: scale(1.18); filter: brightness(1.15); }
.mac-tl-close { background: radial-gradient(circle at 35% 30%, #ff8a80, var(--tl-close) 60%); box-shadow: var(--tl-inner); }
.mac-tl-min   { background: radial-gradient(circle at 35% 30%, #ffd76e, var(--tl-min)   60%); box-shadow: var(--tl-inner); }
.mac-tl-max   { background: radial-gradient(circle at 35% 30%, #5ce07a, var(--tl-max)   60%); box-shadow: var(--tl-inner); }

/* ─── §5.4 Sidebar — translucent frosted column, sits under the bar ─── */
.sidebar {
  background: var(--mac-sidebar-bg);
  -webkit-backdrop-filter: var(--mac-blur-lg); backdrop-filter: var(--mac-blur-lg);
  border-right: 1px solid var(--mac-border-soft);
  position: sticky; top: var(--mac-titlebar-h); height: calc(100vh - var(--mac-titlebar-h));
}

/* ─── §5.5 Sidebar rows — macOS icon+label rows with active pill ─── */
.sidebar-nav li {
  margin: 2px 10px; padding: 7px 12px; border-radius: var(--mac-radius);
  border-left: none; color: var(--text-secondary); font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav li:hover { background: var(--mac-hover-row); color: var(--text-primary); }
.sidebar-nav li.active { background: var(--mac-active-pill); color: var(--mac-active-text);
  box-shadow: var(--mac-inset-hi); font-weight: 600; }
.sidebar-logo { padding: 6px 20px 12px; border-bottom: 1px solid var(--mac-border-soft); }

/* ─── §5.6 Cards — refined hairline + inner top highlight (sheen, no per-card blur) ─── */
.card {
  background: var(--mac-glass-card);
  border: 1px solid var(--mac-border-gold);
  border-radius: var(--radius);
  box-shadow: var(--mac-inset-hi), 0 8px 24px rgba(0,0,0,0.28);
}
.card:hover, .task-card:hover, .quick-action-card:hover {
  border-color: rgba(201,169,110,0.35); transform: translateY(-1px);
  box-shadow: var(--mac-inset-hi), 0 12px 28px rgba(0,0,0,0.35);
}
/* hairline + sheen on secondary surfaces (backgrounds kept) */
.dash-card, .dash-section, .dash-cat-card, .dash-mile-head,
.task-card, .stat-card, .advice-card, .product-card, .quick-action-card {
  border: 1px solid var(--mac-border-gold);
  box-shadow: var(--mac-inset-hi), 0 4px 14px rgba(0,0,0,0.2);
}

/* ─── §5.7 Segmented tabs (macOS control) ─── */
.tab-bar { background: rgba(255,255,255,0.045); border: 1px solid var(--mac-hairline); }
.tab-btn.active { background: var(--bg-card); color: var(--accent-gold);
  box-shadow: var(--mac-inset-hi), 0 1px 4px rgba(0,0,0,0.3); border: 1px solid var(--mac-border-soft); }

/* ─── §5.8 Buttons & inputs — hairline polish, keep gold gradient ─── */
.btn-primary { box-shadow: var(--mac-inset-hi), 0 2px 10px rgba(201,169,110,0.22);
  border: 1px solid rgba(255,255,255,0.10); }                 /* gradient + colors unchanged */
.btn-secondary { border-color: var(--mac-border-soft); box-shadow: var(--mac-inset-hi); }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(15,15,20,0.65); border-color: var(--mac-border-soft); }
body.theme-light .form-group input,
body.theme-light .form-group select,
body.theme-light .form-group textarea {
  background: rgba(255,255,255,0.9); border-color: var(--mac-border-soft); color: var(--text-primary); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18); }

/* ─── §5.9 Sharp-text fixes for existing faded states (user rejects faded text) ─── */
.dash-milestone-name.done { color: var(--text-muted); }
.dash-mdot.pending { color: var(--text-muted); }

/* ─── §5.10 Mobile ≤768px — compact top bar; frosted bottom nav ─── */
@media (max-width: 768px) {
  .mac-titlebar { height: calc(40px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .mac-tl-btn { width: 10px; height: 10px; }
  .mac-tl { gap: 6px; }
  .mac-title { font-size: 12px; margin-right: 54px; }
  body { padding-top: calc(40px + env(safe-area-inset-top)); }
  .mobile-nav { background: var(--mac-mobilenav-bg);
    -webkit-backdrop-filter: var(--mac-blur); backdrop-filter: var(--mac-blur);
    border-top: 1px solid var(--mac-border-gold);
    padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .mobile-nav-item.active { background: var(--mac-active-pill); color: var(--accent-gold);
    border-radius: 8px; }
}

/* ─── §5.11 Fallback when backdrop-filter unsupported ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mac-titlebar { background: var(--mac-titlebar-bg); }
  .sidebar      { background: var(--mac-sidebar-bg); }
  .mobile-nav   { background: var(--mac-mobilenav-bg); }
}

/* ─── §5.12 Reduced motion (courtesy) ─── */
@media (prefers-reduced-motion: reduce) {
  .mac-tl-btn, .card, .task-card, .quick-action-card, .sidebar-nav li { transition: none; }
}