/* ============================================================
 * 大管家 · 首页高级版样式 v6 (Premium Home)
 * 排版统一（方案B）：英文小标 → 数字 → 中文标签
 * v6 修复（UI总监走查）：KPI数字30px / 箭头加深hover变色 /
 *         快捷图标背景饱和 / tabular-nums / 留白28px /
 *         badge实时徽标 / row2四列对齐 / 单位自适应
 * ============================================================ */

.phome {
  --ph-red: var(--primary);
 --ph-red-deep: var(--primary-dark);
 --ph-red-soft: var(--primary-ultra-light);
 --ph-ink: var(--text);
  --ph-sub: #8a9099;
 --ph-border: var(--border);
  --ph-bg: var(--gray-50);
  padding: 26px 28px;
  max-width: 1280px;
  margin: 0 auto;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}

/* —— 顶部品牌横幅 —— */
.ph-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
 background: linear-gradient(120deg, var(--surface) 0%, var(--surface) 55%, var(--primary-ultra-light) 100%);
  border: 1px solid var(--ph-border);
  box-shadow: 0 6px 24px rgba(230, 0, 18, .08);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: 22px;
}
.ph-brand { display: flex; align-items: center; gap: 10px; }
.ph-brand-dot {
 width: var(--space-3); height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, var(--ph-red), var(--ph-red-deep));
  box-shadow: 0 2px 6px rgba(210,9,29,.35);
}
.ph-brand-zh { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--ph-red); }
.ph-brand-en { font-size: 11px; color: var(--ph-sub); letter-spacing: 1.5px; font-weight: 600; margin-left: 4px; }
.ph-hero-title {
  font-size: 30px; font-weight: 800; margin-top: 14px; color: var(--ph-ink);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.ph-hero-title-en { font-size: 13px; font-weight: 600; color: var(--ph-sub); letter-spacing: 2px; }
.ph-hero-sub { font-size: 13px; color: var(--ph-sub); margin-top: 6px; }
.ph-today { margin-left: 12px; color: var(--ph-red); font-weight: 600; }

/* —— 收缴率圆环（v4：加深描边提升对比度）—— */
/* v5：收缴率圆环内只放核心数字，标签挪到圆环外下方独立显示，避免文字溢出白圈被色块压住 */
.ph-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: none;
}
.ph-rate-ring {
  --p: 0; --c: #0FA67A;
  width: 132px; height: 132px; border-radius: 50%;
  background:
    conic-gradient(var(--c) calc(var(--p) * 1%), #EEF0F2 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 4px 18px rgba(31,35,41,.10), inset 0 0 0 1px rgba(31,35,41,.06);
}
.ph-rate-ring::before {
  content: ''; position: absolute; inset: 11px;
 background: var(--surface); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(31,35,41,.04);
}
.ph-rate-inner { position: relative; text-align: center; z-index: 1; }
.ph-rate-num { font-size: 30px; font-weight: 800; color: var(--ph-ink); letter-spacing: -0.5px; }
.ph-rate-cap {
  font-size: 11px;
  color: var(--ph-sub);
  letter-spacing: 1.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* —— 区块标题 —— */
.ph-section { margin-bottom: 26px; }
.ph-sec-h {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 15px; font-weight: 700; color: var(--ph-ink);
  margin-bottom: 14px;
}
.ph-sec-bar { width: 4px; height: var(--space-4); border-radius: 2px; background: var(--ph-red); display: inline-block; }
.ph-sec-en { font-size: 11px; font-weight: 600; color: var(--ph-sub); letter-spacing: 1.5px; }

/* —— KPI 卡片 —— */
.ph-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ph-kpi {
 background: var(--surface); border-radius: 14px; padding: var(--space-5) 22px;
  border: 1px solid var(--ph-border);
  box-shadow: 0 2px 10px rgba(31,35,41,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; align-items: center; gap: var(--space-4);
  position: relative; overflow: hidden;
}
.ph-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,35,41,.10); }

/* v4：图标统一圆形 52px */
.ph-kpi-ico {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
 color: var(--surface);
}
.ph-kpi-ico svg { width: 26px; height: 26px; display: block; }
.ph-kpi-red .ph-kpi-ico   { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 4px 12px rgba(210,9,29,.25); }
.ph-kpi-green .ph-kpi-ico { background: linear-gradient(135deg, #2BC587, #0FA67A); box-shadow: 0 4px 12px rgba(15,166,122,.25); }
.ph-kpi-blue .ph-kpi-ico  { background: linear-gradient(135deg, #4096FF, #1677FF); box-shadow: 0 4px 12px rgba(22,119,255,.25); }
.ph-kpi-gold .ph-kpi-ico  { background: linear-gradient(135deg, #D4B66A, #BFA36F); box-shadow: 0 4px 12px rgba(191,163,111,.25); }

.ph-kpi-body { flex: 1; min-width: 0; }
.ph-kpi-en { font-size: 10px; letter-spacing: 1.5px; font-weight: 600; color: var(--ph-sub); }
.ph-kpi-num { font-size: 30px; font-weight: 800; color: var(--ph-ink); line-height: 1.2; margin-top: 2px; letter-spacing: -0.5px; }
.ph-kpi-red .ph-kpi-num { color: var(--ph-red-deep); }
.ph-kpi-green .ph-kpi-num { color: #0B8A63; }
.ph-kpi-blue .ph-kpi-num { color: #1259CC; }
.ph-kpi-gold .ph-kpi-num { color: #9A8248; }
.ph-kpi-label { font-size: 12px; color: var(--ph-sub); margin-top: 3px; }

/* —— 待办 / 预警（v6：两行都按4列对齐，row2缺位留空保证齐）—— */
.ph-alert-grid { display: grid; gap: 14px; }
.ph-alert-row1 { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.ph-alert-row2 { grid-template-columns: repeat(4, 1fr); }
.ph-alert-row2 .ph-alert:last-child:nth-child(3) { grid-column: span 1; }
.ph-alert {
 background: var(--surface); border-radius: 14px; padding: var(--space-4) 18px;
  border: 1px solid var(--ph-border);
  box-shadow: 0 2px 10px rgba(31,35,41,.05);
  display: flex; align-items: center; gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.ph-alert:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,35,41,.10); }

/* v4：图标统一圆形 46px */
.ph-alert-ico {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
 color: var(--surface);
}
.ph-alert-ico svg { width: 22px; height: 22px; display: block; }
.ph-alert-todo .ph-alert-ico   { background: linear-gradient(135deg, #4096FF, #1677FF); box-shadow: 0 3px 8px rgba(22,119,255,.22); }
.ph-alert-warn .ph-alert-ico   { background: linear-gradient(135deg, #FFB14E, #D9822B); box-shadow: 0 3px 8px rgba(217,130,43,.22); }
.ph-alert-danger .ph-alert-ico { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 3px 8px rgba(181,7,21,.22); }
.ph-alert-info .ph-alert-ico   { background: linear-gradient(135deg, #2BC587, #0FA67A); box-shadow: 0 3px 8px rgba(15,166,122,.22); }
.ph-alert-body { flex: 1; min-width: 0; }
.ph-alert-en { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; color: #b6bcc4; margin-bottom: 2px; white-space: nowrap; }
.ph-alert-num { font-size: 22px; font-weight: 800; line-height: 1.2; }
.ph-alert-todo .ph-alert-num { color: #1259CC; }
.ph-alert-warn .ph-alert-num { color: #B4560F; }
.ph-alert-danger .ph-alert-num { color: var(--ph-red-deep); }
.ph-alert-info .ph-alert-num { color: #0B8A63; }
.ph-unit { font-size: 13px; color: #8a9099; font-weight: 500; margin-left: 2px; }
.ph-badge {
  display: inline-block; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: var(--radius); margin-left: var(--space-2); vertical-align: 2px;
  background: #E8F0FE; color: #1259CC; letter-spacing: .5px;
}
.ph-alert-label { font-size: 12px; color: var(--ph-sub); margin-top: 2px; }
.ph-alert-arrow { color: #8a9099; font-size: 18px; flex: none; transition: transform .15s ease, color .15s ease; }
.ph-alert:hover .ph-alert-arrow { color: var(--ph-red); transform: translateX(2px); }

/* —— 快捷入口（v4：图标统一圆形 50px）—— */
.ph-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ph-quick {
 background: var(--surface); border-radius: 14px; padding: 22px 18px;
  border: 1px solid var(--ph-border);
  box-shadow: 0 2px 10px rgba(31,35,41,.05);
  text-align: center; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ph-quick:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,35,41,.10); }
.ph-quick-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; margin-bottom: var(--space-2);
}
.ph-quick-ico svg { width: 26px; height: 26px; display: block; }
.ph-quick-red .ph-quick-ico   svg { color: var(--ph-red); }
.ph-quick-blue .ph-quick-ico  svg { color: #1677FF; }
.ph-quick-teal .ph-quick-ico  svg { color: #0FA67A; }
.ph-quick-gold .ph-quick-ico  svg { color: #BFA36F; }
.ph-quick-red .ph-quick-ico   { background: #FBDFE2; }
.ph-quick-blue .ph-quick-ico  { background: #D5E7FC; }
.ph-quick-teal .ph-quick-ico  { background: #D2F0E4; }
.ph-quick-gold .ph-quick-ico  { background: #EDE3C8; }
.ph-quick:hover.ph-quick-red   { border-color: var(--ph-red); }
.ph-quick:hover.ph-quick-blue  { border-color: #1677FF; }
.ph-quick:hover.ph-quick-teal  { border-color: #0FA67A; }
.ph-quick:hover.ph-quick-gold  { border-color: #BFA36F; }
.ph-quick-en { font-size: 10px; letter-spacing: 1.5px; color: var(--ph-sub); font-weight: 600; margin-bottom: 5px; white-space: nowrap; }
.ph-quick-zh { font-size: 15px; font-weight: 700; color: var(--ph-ink); white-space: nowrap; }

/* —— 页脚（v4：精简）—— */
.ph-foot {
  text-align: center; font-size: 11px; color: #b6bcc4;
  margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--ph-border);
  letter-spacing: .5px;
}

/* —— 移动端（v4：2列 → 1列 自适应）—— */
@media (max-width: 900px) {
  .ph-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-alert-row1 { grid-template-columns: repeat(2, 1fr); }
  .ph-alert-row2 { grid-template-columns: repeat(2, 1fr); }
  .ph-quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .phome { padding: 14px 12px; }
  .ph-hero { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .ph-rate-ring { width: 96px; height: 96px; align-self: center; margin-top: var(--space-1); }
  .ph-hero-title { font-size: 24px; }
  .ph-kpi-grid, .ph-alert-row1, .ph-alert-row2, .ph-quick-grid { grid-template-columns: 1fr; }
  .ph-kpi { padding: var(--space-4); }
  .ph-kpi-ico { width: 44px; height: 44px; }
  .ph-kpi-ico svg { width: 22px; height: 22px; }
}