/* ==========================================================================
   points.css  |  「6」v7.2 积分经济组件层（Spec 14.3）
   --------------------------------------------------------------------------
   消费 design-tokens.css（base.html 已先于本文件引入）。零硬编码 hex，
   全部 var(--*)；动效收敛 150ms（--duration-base + --ease-standard）。
   覆盖：首页积分工作台卡 / 积分明细页 / 贴子打赏面板 /
         驾驶舱积分提示（预估日费 · paused 横幅）/ 部署页后端框架帮助区。
   ========================================================================== */

/* ---- 首页积分卡（登录态工作台，panel 风格）---- */
.pt-card .pt-top {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.pt-balance { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.pt-balance-num {
  font-family: var(--font-mono); font-size: var(--text-4xl);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display);
  color: var(--fg); line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
}
.pt-balance-unit { font-size: var(--text-sm); color: var(--muted); }
.pt-balance-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--muted);
}
.pt-balance-label svg { width: 16px; height: 16px; color: var(--meta); }
.pt-checkin { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pt-streak {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--fg-2);
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
}
.pt-streak svg { width: 12px; height: 12px; color: var(--warn-text); }
.pt-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--meta); }

/* ---- 积分明细页：余额 hero ---- */
.pt-hero .pt-top { padding: var(--space-1) 0; }
.pt-today {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--success-text);
  background: var(--success-soft); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
.pt-today svg { width: 12px; height: 12px; }
.pt-today.is-pending { color: var(--muted); background: var(--surface-warm); }
.pt-today.is-pending svg { color: var(--meta); }

/* ---- 积分明细页：流水表 ---- */
.pt-table-wrap { overflow-x: auto; }
.pt-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pt-table th {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pt-table td {
  padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-soft);
  color: var(--fg-2); vertical-align: middle;
}
.pt-table tr:last-child td { border-bottom: none; }
.pt-table .pt-time {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--meta);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pt-table .pt-num {
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 变动色：涨红跌绿（中国金融惯例：收入红、支出绿；总监 2026-10-17 裁决） */
.pt-delta-up { color: var(--danger-text); }
.pt-delta-down { color: var(--success-text); }
.pt-table .pt-note {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: var(--text-xs);
}
.pt-table tbody tr { animation: pt-row-in var(--duration-slow) var(--ease-standard); }
@keyframes pt-row-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pt-table tbody tr { animation: none; } }

/* ---- 轻量空态行（参照 partials/empty.html 轻量版，单行不占大幅盒子）---- */
.pt-empty-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-5) var(--space-1);
  font-size: var(--text-sm); color: var(--muted);
}
.pt-empty-row svg { width: 16px; height: 16px; color: var(--meta); flex-shrink: 0; }

/* ---- 加载更多 / 统计行 ---- */
.pt-ledger-acts {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4);
}
.pt-ledger-acts .pt-total { font-size: var(--text-xs); color: var(--meta); }

/* ---- 贴子打赏行内面板 ---- */
.tip-panel { max-width: 460px; }
.tip-panel .desc { font-size: var(--text-sm); color: var(--muted); margin: 0 0 var(--space-3); }
.tip-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tip-row input {
  width: 110px; min-height: 32px; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.tip-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.tip-unit { font-size: var(--text-xs); color: var(--muted); }
.tip-err {
  display: flex; align-items: center; gap: var(--space-1);
  margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--danger-text);
}
.tip-err svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- 驾驶舱：积分提示行（状态卡下方）---- */
.dk-points-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  font-size: var(--text-xs); color: var(--muted);
}
.dk-points-meta svg { width: 14px; height: 14px; color: var(--meta); flex-shrink: 0; }
.dk-points-meta b { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--fg-2); }
.dk-points-meta a { color: var(--accent-text); text-decoration: none; }
.dk-points-meta a:hover { text-decoration: underline; }

/* ---- 驾驶舱：积分不足暂停横幅（danger 醒目）---- */
.dk-points-banner {
  background: var(--danger-soft); color: var(--danger-text);
  border: 1px solid var(--danger);
}
.dk-points-banner svg { color: var(--danger-text); }

/* ---- 部署页：后端框架开箱支持帮助区 ---- */
.dk-help {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}
.dk-help-title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2); font-size: var(--text-md);
  font-weight: var(--weight-semibold); color: var(--fg);
}
.dk-help-title svg { width: 16px; height: 16px; color: var(--muted); }
.dk-help-desc { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.dk-help-desc code {
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--surface-warm); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 var(--space-1); color: var(--fg-2);
}
.dk-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.dk-help-item { min-width: 0; }
.dk-help-item h3 {
  margin: 0 0 var(--space-2); font-size: var(--text-sm);
  font-weight: var(--weight-medium); color: var(--fg-2);
}
.dk-help-item .code-block { margin: 0; font-size: var(--text-xs); }
@media (max-width: 767px) {
  .dk-help-grid { grid-template-columns: 1fr; }
  .pt-balance-num { font-size: var(--text-3xl); }
  .pt-checkin { margin-left: 0; }
  /* 移动端输入字号 >=16px（防 iOS 聚焦自动放大；须覆盖上方 .tip-row input 的字号） */
  .tip-row input { font-size: var(--text-md); }
}