/* 鑫万海物流数据看板 - 深色科技风 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0a0e1a;
  color: #d5e0f0;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: linear-gradient(90deg, #0d1530, #101c3f);
  border-bottom: 1px solid #1e2d55;
}
.header h1 { font-size: 20px; letter-spacing: 2px; color: #5ec8ff; }
.header-right { display: flex; align-items: center; gap: 16px; }
.clock { font-variant-numeric: tabular-nums; color: #8fa8d0; }
.badge {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #f0a020;
  border-radius: 12px;
  color: #f0c060;
}

.container { padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; }

.panel {
  background: #101828;
  border: 1px solid #1e2d55;
  border-radius: 10px;
  padding: 18px 20px;
}
.panel h2 { font-size: 16px; color: #7fd4ff; margin-bottom: 14px; }
.hint { font-size: 12px; color: #66779a; font-weight: normal; margin-left: 8px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

/* 余额卡片 */
.balance-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.balance-card {
  flex: 1;
  min-width: 200px;
  background: #0d1424;
  border: 1px solid #22335e;
  border-radius: 10px;
  padding: 16px 18px;
}
.balance-card .name { font-size: 14px; color: #8fa8d0; }
.balance-card .amount { font-size: 30px; font-weight: 700; color: #4ade80; margin: 6px 0; font-variant-numeric: tabular-nums; }
.balance-card .meta { font-size: 12px; color: #66779a; }
.balance-card.failed .amount { color: #94a3b8; font-size: 18px; }

/* 低余额整卡标红闪烁（边框 + 背景 + 金额一起闪） */
.balance-card.danger { border-color: #ef4444; animation: card-blink 1s step-start infinite; }
.balance-card.danger .amount { color: #ef4444; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes card-blink {
  50% { border-color: #7f1d1d; background: #2a1010; box-shadow: 0 0 12px rgba(239, 68, 68, 0.45); }
}

/* 下次采集倒计时卡片 */
.countdown-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.cd-card {
  flex: 1;
  min-width: 180px;
  background: #0d1424;
  border: 1px solid #22335e;
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
}
.cd-card .cd-name { font-size: 13px; color: #8fa8d0; }
.cd-card .cd-time {
  font-size: 32px;
  font-weight: 700;
  color: #5ec8ff;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(94, 200, 255, 0.35);
}

/* 执行日志列表 */
.log-list { list-style: none; max-height: 320px; overflow-y: auto; font-size: 13px; }
.log-list li {
  display: flex;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid #1c2a4d;
  align-items: baseline;
}
.log-list .log-time { color: #66779a; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.log-list .log-level { flex-shrink: 0; width: 52px; font-weight: 600; }
.log-list .log-level.INFO { color: #5ec8ff; }
.log-list .log-level.WARN { color: #f0a020; }
.log-list .log-level.ERROR { color: #ef4444; }
.log-list .log-msg { color: #b8c6e0; word-break: break-all; }
.log-list .empty { border-bottom: none; }

/* 链接式小按钮（查看历史 / 关闭） */
.btn-link {
  background: none;
  border: 1px solid #22335e;
  border-radius: 6px;
  color: #5ec8ff;
  font-size: 12px;
  padding: 3px 10px;
  margin-left: 12px;
  cursor: pointer;
}
.btn-link:hover { border-color: #5ec8ff; }

/* 重试按钮（采集失败时显示） */
.btn-retry {
  margin-top: 8px;
  background: #7f1d1d;
  border: 1px solid #ef4444;
  border-radius: 6px;
  color: #fecaca;
  font-size: 13px;
  padding: 5px 14px;
  cursor: pointer;
}
.btn-retry:hover { background: #991b1b; }
.btn-retry:disabled { opacity: 0.5; cursor: wait; }

.btn-rerun {
  background: none;
  border: 1px solid #f0a020;
  border-radius: 6px;
  color: #f0c060;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
}
.btn-rerun:hover { border-color: #f0c060; }
.btn-rerun:disabled { opacity: 0.5; cursor: wait; }

/* 日志历史弹窗 */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-box {
  width: min(860px, 92vw);
  max-height: 80vh;
  background: #101828;
  border: 1px solid #1e2d55;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #1e2d55;
  color: #7fd4ff;
  font-size: 15px;
}
.modal-body { padding: 8px 18px; overflow-y: auto; }

.chart { width: 100%; height: 320px; }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #1c2a4d; }
th { color: #7fd4ff; font-weight: 600; }
td { color: #b8c6e0; }

.status-ok { color: #4ade80; }
.status-fail { color: #ef4444; }
.status-blocked { color: #f0a020; }
.countdown { font-variant-numeric: tabular-nums; color: #5ec8ff; }

.weekly-summary { display: flex; gap: 32px; margin-bottom: 14px; font-size: 14px; }
.weekly-summary .num { font-size: 24px; font-weight: 700; color: #5ec8ff; }
.empty { color: #66779a; padding: 12px 0; }