/* ============================================================================
   仪表盘（Ovation 风格）· 20261005v3
   ============================================================================ */

/* ---------- 彩色统计卡 ---------- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}
.stat-card {
  position: relative;
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  display: grid;
  gap: 2px;
  box-shadow: 0 6px 20px rgba(23, 26, 43, 0.05);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 26, 43, 0.10); }
.sc-pink   { background: linear-gradient(160deg, #ffeef6 0%, #ffdcee 100%); }
.sc-blue   { background: linear-gradient(160deg, #e9f8ff 0%, #d5effd 100%); }
.sc-yellow { background: linear-gradient(160deg, #fff6de 0%, #ffedc4 100%); }
.sc-gray   { background: linear-gradient(160deg, #f0f2f7 0%, #e3e7ed 100%); }
.stat-ico {
  width: 46px; height: 46px;
  border-radius: 15px;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 6px 16px rgba(23, 26, 43, 0.10);
  margin-bottom: 14px;
}
.ico-pink   { color: #f0568f; }
.ico-blue   { color: #3d8bfa; }
.ico-yellow { color: #e0a800; }
.ico-gray   { color: #6b7390; }
.stat-name  { font-size: 13px; font-weight: 700; color: rgba(23, 26, 43, 0.62); }
.stat-value { font-size: 32px; font-weight: 800; color: #171a2b; letter-spacing: -0.02em; line-height: 1.22; }
.stat-label { font-size: 12px; color: rgba(23, 26, 43, 0.42); }

/* ---------- 「提交 / 成功」双数值（同框显示） ---------- */
.stat-pair { display: flex; align-items: flex-end; gap: 26px; margin: 2px 0 2px; }
.stat-pair-item { display: flex; flex-direction: column; line-height: 1; }
.stat-pair-item b { font-size: 32px; font-weight: 800; color: #171a2b; letter-spacing: -0.02em; line-height: 1.2; }
.stat-pair-item span { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: rgba(23, 26, 43, 0.45); letter-spacing: .04em; }
.stat-pair-item.ok b { color: #12a05c; }

/* ---------- 绑定手机入口卡 ---------- */
.bind-entry { align-content: start; }
.bind-title { font-size: 15px; font-weight: 700; color: #2b3350; letter-spacing: 0; line-height: 1.5; }
.stat-go {
  margin-top: 10px;
  align-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: 11px;
  background: linear-gradient(135deg, #4f8dfd 0%, #3d78f0 100%);
  color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 8px 18px rgba(61, 139, 250, 0.32);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stat-go:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(61, 139, 250, 0.40); color: #fff; }
.stat-go svg { opacity: .95; }
/* 「前往」按钮 + 右侧说明文字 */
.bind-cta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.bind-cta .stat-go { margin-top: 0; }
.bind-cta-tip {
  font-size: 16px;
  font-weight: 800;
  color: #2f6fe4;
  letter-spacing: .01em;
  line-height: 1.25;
}

/* ---------- 网格 ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-grid > * { min-width: 0; }
.span2 { grid-column: 1 / -1; }

.chart-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(23, 26, 43, 0.06);
  padding: 22px 24px;
  min-width: 0;
  overflow: hidden;
}
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.chart-title { font-size: 15.5px; font-weight: 800; color: var(--text); }
.chart-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.legend-chips { display: flex; gap: 14px; }
.lg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.lg-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.chart-box { position: relative; height: 264px; min-width: 0; }
.chart-box canvas { max-width: 100%; }

/* ---------- 环形图 ---------- */
.donut-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap; padding: 8px 0;
}
.donut-box { position: relative; width: 188px; height: 188px; flex: none; }
.donut-center {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  pointer-events: none;
}
.donut-center b { font-size: 23px; font-weight: 800; color: var(--text); display: block; letter-spacing: -0.02em; }
.donut-center span { font-size: 12px; color: var(--text-faint); }
.donut-legend { display: grid; gap: 11px; flex: none; }
.donut-legend span {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.donut-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- 链路进度 ---------- */
.lp-list { display: grid; gap: 15px; }
.lp-row { display: grid; grid-template-columns: 68px 1fr 50px; align-items: center; gap: 14px; }
.lp-name { font-size: 13px; font-weight: 700; color: var(--text-2); }
.lp-bar { height: 9px; border-radius: 999px; background: #eef0fa; overflow: hidden; display: block; }
.lp-fill { display: block; height: 100%; border-radius: 999px; }
.lp-val { font-size: 12.5px; font-weight: 800; color: var(--text); text-align: right; }

/* ---------- 状态卡：在线（绿色） ---------- */
.ico-online { background: #e9f9f1; }
.stat-online { color: #12a05c; }

/* ---------- 提链统计：7 天 × 24 小时「星星即格子」（无方框；默认浅灰星 / 有成功 = RGB 流光） ---------- */
.hour-wrap { position: relative; }

.hour-grid {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 4px 3px;
}
.hg-corner { }
.hg-hour {
  font-size: 8.5px;
  font-weight: 700;
  color: #b3b9cc;
  text-align: center;
  padding-bottom: 1px;
  letter-spacing: .01em;
}
.hg-day {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #9aa1b9;
  white-space: nowrap;
}
/* 单元格 = 只有一颗星，没有任何方框/底色 */
.hour-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 20px;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  transition: transform .14s ease;
}
.hour-cell:hover, .hour-cell:focus-visible {
  transform: scale(1.32);
  z-index: 2;
}
/* 默认（该小时无成功）→ 浅灰星 */
.hour-cell .star { font-size: 15px; line-height: 1; color: #cbd1de; }
/* 未来的小时 → 再淡一档 */
.hour-cell.future { opacity: .5; }
.hour-cell.future .star { color: #e4e8f0; }

/* 该小时有成功 → 星星自己变成 RGB 流动光效（不加任何底色） */
.hour-cell.hit .star {
  background: linear-gradient(90deg, #ff3b3b, #ff9d3b, #ffe83b, #3bff8f, #3bd6ff, #7a3bff, #ff3bd6, #ff3b3b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rgbFlow 3.2s linear infinite, starPulse 1.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(124, 92, 252, .72)) drop-shadow(0 0 9px rgba(59, 214, 255, .42));
}
@keyframes rgbFlow { to { background-position: 300% 50%; } }
@keyframes starPulse { from { transform: scale(1); } to { transform: scale(1.16); } }

/* 悬浮 / 点击提示：白卡（对齐参考图） */
.hour-tip {
  position: absolute;
  z-index: 30;
  min-width: 246px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9ebf5;
  color: #171a2b;
  font-size: 12.5px;
  line-height: 1.8;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(23, 26, 43, 0.18);
  animation: tipIn .14s ease;
}
.hour-tip .tip-time { font-weight: 700; color: #171a2b; margin-bottom: 4px; }
.hour-tip .tip-row { color: #4a5170; font-weight: 600; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } }

/* 图例里的迷你星星 */
.lg-chip .star-mini {
  width: auto; height: auto;
  border-radius: 0;
  font-size: 13px;
  line-height: 1;
  display: inline-block;
}
.lg-chip .star-mini::before { content: "★"; }
.lg-chip .star-mini.idle { color: #cbd1de; }
.lg-chip .star-mini.on {
  background: linear-gradient(90deg, #ff3b3b, #ff9d3b, #ffe83b, #3bff8f, #3bd6ff, #7a3bff, #ff3bd6, #ff3b3b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rgbFlow 3.2s linear infinite;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1380px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .hour-grid { grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px 2px; }
  .hour-cell { min-height: 18px; }
  .hour-cell .star { font-size: 13px; }
  .hg-hour { font-size: 7.5px; }
  .hg-day { font-size: 9px; padding-right: 5px; }
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: 1fr; }
  .hour-grid { grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px 2px; }
  .hour-cell { min-height: 15px; }
  .hour-cell .star { font-size: 11px; }
  .hg-hour { font-size: 0; }
  .hg-day { font-size: 8.5px; padding-right: 4px; }
}