/* ============================================================================
   glass-patch.css — 补齐第一轮遗漏的部分
   ----------------------------------------------------------------------------
   引入位置：glass-components.css 之后
     <link rel="stylesheet" href="glass-components.css?v=1">
     <link rel="stylesheet" href="glass-patch.css?v=1">      ← 本文件
   ----------------------------------------------------------------------------
   第一轮遗漏清单（本文件全部解决）：
     .stat-bar / .stat-bar i      进度条（4px 老样式 + 无流光）
     .progress-fill 缺流光         只有静态渐变
     .acc-bar-in / .acc-bar-exp   月度趋势柱状图（绿/红老配色）
     .acc-pie-row / .acc-lg       饼图图例
     .form-row input / textarea   表单控件
     .wb-axis-t / .wb-val-t       SVG 图表文字
     .mood-row / .mood-btn        复盘页心情选择器（需配合 PATCH.md 改 JS）
   ============================================================================ */

/* ---------------------------------------------------------------- 0. 配色 */
/* 饼图色板：原来硬编码在 accounting.js 的 PIE_COLORS 里，暗色下不变 */
:root {
  /* workbench 只有 --ink / --ink-light 两级灰阶，这里补齐别名，
     避免 --ink-2/3/4 取不到值回退成黑色（未选中星星变黑就是这个原因） */
  --ink-2: var(--ink);
  --ink-3: var(--ink-light);
  --ink-4: var(--ink-light);

  --pie-1: #7c6cf6;
  --pie-2: #43cbb0;
  --pie-3: #5b9cf8;
  --pie-4: #ffab6b;
  --pie-5: #ff9ec4;
  --pie-6: #4dd0e1;
  --pie-other: rgba(140, 160, 185, 0.55);
}
[data-theme="dark"] {
  --pie-1: #9d92ff;
  --pie-2: #4fd8bb;
  --pie-3: #6fb0ff;
  --pie-4: #ffb87a;
  --pie-5: #ffa8c8;
  --pie-6: #5fe0ee;
  --pie-other: rgba(160, 180, 210, 0.45);
}

/* ---------------------------------------------------------------- 0.1 流光 */
@keyframes glass-shine {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(340%); }
}

/* ------------------------------------------------------- 1. 进度条（全部） */
body .stat-bar {
  height: 11px;
  border-radius: 999px;
  background: var(--track-bg);
  box-shadow: var(--track-inset);
  overflow: hidden;
}
body .stat-bar i {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #8f83f8, var(--accent-blue));
  box-shadow: 0 0 14px rgba(124, 108, 246, 0.50);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .stat-bar i.is-hit {
  background: linear-gradient(90deg, #4fc3a1, #3fd39b);
  box-shadow: 0 0 14px rgba(79, 195, 161, 0.50);
}
body .stat-bar i.is-neg {
  background: linear-gradient(90deg, #ff9a9d, #e5484d);
  box-shadow: 0 0 14px rgba(229, 72, 77, 0.45);
}

body .progress-fill {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #8f83f8, var(--accent-blue));
  box-shadow: 0 0 14px rgba(124, 108, 246, 0.45);
}

/* 流光：只在这两种条上跑，2.4s 亮一次，其余时间静置 */
body .stat-bar i::after,
body .progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-130%);
  animation: glass-shine 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  pointer-events: none;
}
[data-theme="dark"] body .stat-bar i::after,
[data-theme="dark"] body .progress-fill::after {
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.55), transparent);
}

/* --------------------------------------------------- 2. 月度趋势柱状图 */
body .acc-bar-in {
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #8fb8ff 0%, #3b6ef5 100%);
  box-shadow: 0 8px 18px -9px rgba(59, 110, 245, 0.80),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .acc-bar-exp {
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #ffa5a8 0%, #e5484d 100%);
  box-shadow: 0 8px 18px -9px rgba(229, 72, 77, 0.72),
              inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 20261022P 校正：方案原文的 body .acc-trend-bars { gap:4px; align-items:flex-end }
   是布局属性（现状 3px/flex-end 工作正常），按「只改视觉」铁律不落地。
   另：本文件 body .stat-bar 的 7px 会盖过 v2.css 的预算窄条（5px），这里保回去。 */
body .debt-bud-row .stat-bar { height: 5px; }
body .acc-trend-m {
  font-size: 10.5px;
  color: var(--ink-light);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
body .acc-trend-col { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
body .acc-trend-col:hover { transform: translateY(-3px); }

/* -------------------------------------------------------------- 3. 饼图 */
/* 圆角端点必须配合 PATCH.md 里的 gap 改动，否则相邻段会互相压住 */
body .acc-pie-row svg circle {
  stroke-linecap: round;
  filter: drop-shadow(0 6px 14px rgba(48, 80, 140, 0.20));
  transition: stroke-width 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .acc-pie-legend { min-width: 0; }
body .acc-lg {
  padding: 9px 0;
  border-bottom: 1px solid var(--glass-line);
  transition: background 240ms;
}
body .acc-lg:last-child { border-bottom: none; }
body .acc-lg:hover { background: var(--glass-hi); border-radius: var(--radius-sm); }
body .acc-dotc {
  width: 9px; height: 9px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
  flex: none;
}
body .acc-lg-nm { font-size: 12.5px; color: var(--ink); letter-spacing: 0.01em; }
body .acc-lg-val { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 4. 表单控件 */
body .form-row input,
body .form-row select,
body textarea.input,
body input.input {
  /* 纯白底上 --glass-line 的白色边框看不见，这里改用淡灰蓝描边 */
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(130, 155, 190, 0.26);
  border-radius: var(--radius-sm);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  transition: border-color 250ms, box-shadow 250ms, background 250ms;
}
[data-theme="dark"] body .form-row input,
[data-theme="dark"] body .form-row select,
[data-theme="dark"] body textarea.input,
[data-theme="dark"] body input.input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
body .form-row input::placeholder,
body textarea.input::placeholder,
body input.input::placeholder {
  color: var(--ink-4);
}
body .form-row input:focus,
body .form-row select:focus,
body textarea.input:focus,
body input.input:focus {
  border-color: var(--accent);
  background: var(--glass-bg);
  box-shadow: 0 0 0 4px rgba(124, 108, 246, 0.16),
              inset 0 1px 0 var(--edge-hi);
  outline: none;
}

/* --------------------------------------------- 5. 复盘页心情选择器 */
/* 配合 PATCH.md 第 4 项：把「5 个按钮各塞 1~5 颗星」改成 5 个独立星 */
body .mood-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
body .mood-btn {
  flex: 1;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  color: #f5a623;
  opacity: 0.30;
  box-shadow: inset 0 1px 0 var(--edge-hi);
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .mood-btn:hover {
  opacity: 0.72;
  transform: translateY(-2px);
}
body .mood-btn.on {
  opacity: 1;
  background: linear-gradient(135deg,
    rgba(255, 213, 107, 0.22), rgba(255, 255, 255, 0.50));
  border-color: rgba(245, 166, 35, 0.34);
  box-shadow: 0 10px 22px -12px rgba(245, 166, 35, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.70);
  transform: translateY(-2px);
}
[data-theme="dark"] body .mood-btn.on {
  background: linear-gradient(135deg,
    rgba(255, 213, 107, 0.18), rgba(255, 255, 255, 0.06));
}

/* 复盘正文排版 */
body .review-content {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
body .review-label {
  font-size: 12px;
  color: var(--ink-light);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------- 6. SVG 图表文字 */
body .wb-axis-t {
  fill: var(--ink-4);
  font-size: 10px;
  letter-spacing: 0.02em;
}
body .wb-val-t {
  fill: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
}
body .wb-line {
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0.55;
}

/* ----------------------------------------------------- 7. 空 / 加载态 */
body .page-loading,
body .page-error {
  border-radius: var(--radius-md);
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  color: var(--ink-light);
  padding: 20px;
  text-align: center;
  font-size: 13px;
}
body .empty-state { color: var(--ink-light); }
body .empty-icon { opacity: 0.75; }

/* ------------------------------------------------ 8. 降级 / 无障碍 */
@media (prefers-reduced-motion: reduce) {
  body .stat-bar i::after,
  body .progress-fill::after { animation: none; opacity: 0; }
}
body.perf-lite .stat-bar i::after,
body.perf-lite .progress-fill::after { animation: none; opacity: 0; }

/* ------------------------------------------------ 9. ≤640 实色降级（20261022P）
   iOS backdrop-filter 采样错位三踩（抽屉/灰竖条/卡片透字），本文件引入的
   backdrop 元素（输入框 / 心情星 / 月历输入）在手机端一律退实色。 */
@media (max-width: 640px) {
  body .form-row input,
  body .form-row select,
  body textarea.input,
  body input.input {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.78);
  }
  [data-theme="dark"] body .form-row input,
  [data-theme="dark"] body .form-row select,
  [data-theme="dark"] body textarea.input,
  [data-theme="dark"] body input.input { background: rgba(28, 36, 52, 0.85); }
  body .mood-btn { background: rgba(255, 255, 255, 0.78); }
  [data-theme="dark"] body .mood-btn { background: rgba(28, 36, 52, 0.85); }
}