/* Tibo 重置雷达 · 产品样式
   基于 DNDL v1.0（DreamNight Design Language）。直角几何、大色块、表达性排版。
   仅使用 tokens.css 中的品牌与语义 Token，不重新硬编码品牌色。 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dn-canvas);
  color: var(--dn-text-primary);
  font-family: var(--dn-font);
  font-weight: var(--dn-weight-body);
  font-size: var(--dn-size-body);
  line-height: var(--dn-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 300; margin: 0; }

a { color: var(--dn-text-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--dn-z-modal);
  background: var(--dn-surface); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- 顶部导航（Acrylic） ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--dn-z-floating);
  border-left: 0; border-right: 0; border-top: 0;
}
.topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 16px; height: 16px; background: var(--dn-teal);
  display: inline-block; flex: none;
}
.brand__name {
  font-weight: var(--dn-weight-kicker); font-size: var(--dn-size-kicker);
  letter-spacing: var(--dn-tracking-kicker); text-transform: uppercase;
}
.topbar__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__time { font-size: 0.8125rem; color: var(--dn-text-secondary); font-variant-numeric: tabular-nums; }

.live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--dn-text-secondary); }
.live__dot { width: 9px; height: 9px; background: var(--dn-steel); flex: none; }
.live[data-state="ok"] .live__dot { background: var(--dn-emerald); }
.live[data-state="ok"] { color: var(--dn-text-primary); }
.live[data-state="degraded"] .live__dot { background: var(--dn-amber); }
.live[data-state="down"] .live__dot { background: var(--dn-crimson); }
.live[data-state="down"] { color: var(--dn-crimson); }
.live[data-state="loading"] .live__dot { background: var(--dn-steel); }

.btn {
  appearance: none; border: 1px solid var(--dn-control-border); background: var(--dn-surface);
  color: var(--dn-text-primary); font: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 10px 18px; min-height: var(--dn-target-min); cursor: pointer;
  border-radius: var(--dn-radius);
}
.btn[aria-disabled="true"] { opacity: 0.5; cursor: progress; }

/* ---------- 页面 ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 40px; display: grid; gap: 20px; }

.panel {
  background: var(--dn-surface); border: 1px solid var(--dn-divider);
  padding: 22px 22px 24px; border-radius: var(--dn-radius);
}

.kicker {
  margin: 0 0 12px; font-size: var(--dn-size-kicker); font-weight: var(--dn-weight-kicker);
  letter-spacing: var(--dn-tracking-kicker); text-transform: uppercase; color: var(--dn-text-secondary);
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: var(--dn-size-h2); line-height: 1.15; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: stretch; }
.hero__side { display: grid; gap: 20px; grid-template-rows: auto 1fr; }

/* 预测大色块：品牌 Teal，文字用语义 on-color */
.panel--predict {
  background: var(--dn-teal); border-color: var(--dn-teal); color: var(--dn-text-on-color);
  display: flex; flex-direction: column;
}
.panel--predict .kicker { color: var(--dn-text-on-color); opacity: 0.85; }
.predict__window {
  font-family: var(--dn-font-display); font-weight: var(--dn-weight-display);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; margin: 0 0 8px;
}
.predict__sub { margin: 0 0 20px; font-size: 0.9375rem; opacity: 0.92; }
.predict__phase {
  margin: 18px 0 0; display: inline-block; align-self: flex-start;
  border: 1px solid var(--dn-text-on-color); padding: 4px 12px;
  font-size: 0.8125rem; font-weight: 600;
}
.predict__note, .fineprint { font-size: 0.75rem; color: var(--dn-text-secondary); line-height: 1.6; }
.panel--predict .fineprint { color: var(--dn-text-on-color); opacity: 0.8; margin: 12px 0 0; }

/* 概率条 */
.probs { display: grid; gap: 10px; margin-top: auto; }
.prob { display: grid; grid-template-columns: 52px 1fr 46px; align-items: center; gap: 12px; font-size: 0.8125rem; }
.prob__label { font-weight: 600; }
.prob__track { height: 12px; background: rgba(16, 42, 39, 0.16); position: relative; }
.prob__fill { height: 100%; background: var(--dn-text-on-color); width: 0; transition: width var(--dn-duration-expand) var(--dn-ease-in); }
.prob__val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 状态块 */
.panel--status .status__headline {
  font-family: var(--dn-font-display); font-weight: var(--dn-weight-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12; margin: 0 0 6px;
}
.status__detail { margin: 0 0 16px; color: var(--dn-text-secondary); font-size: 0.875rem; }
.panel--status[data-state="pending"] { border-left: 6px solid var(--dn-amber); }
.panel--status[data-state="idle"] { border-left: 6px solid var(--dn-emerald); }

.status__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.status__facts dt { font-size: 0.75rem; color: var(--dn-text-secondary); margin-bottom: 4px; }
.status__facts dd { margin: 0; font-size: 1.375rem; font-weight: 300; font-variant-numeric: tabular-nums; }

/* 统计 */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stats li { background: var(--dn-canvas); padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.stats__num { font-family: var(--dn-font-display); font-weight: var(--dn-weight-display); font-size: 1.75rem; line-height: 1; }
.stats__label { font-size: 0.6875rem; color: var(--dn-text-secondary); letter-spacing: 0.02em; }

/* ---------- 时间轴 ---------- */
.legend { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; font-size: 0.75rem; color: var(--dn-text-secondary); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; display: inline-block; }
.dot--quota { background: var(--dn-teal); }
.dot--confirmed { background: var(--dn-cyan); }
.dot--card { background: var(--dn-amber); }
.dot--none { background: var(--dn-divider); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.timeline__day { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.timeline__bar { height: 46px; background: var(--dn-canvas); border: 1px solid var(--dn-divider); position: relative; }
.timeline__bar[data-has="1"] { background: var(--dn-teal); border-color: var(--dn-teal); }
.timeline__bar[data-types*="confirmed"] { background: var(--dn-cyan); border-color: var(--dn-cyan); }
.timeline__bar[data-types*="reset_card"] { background: var(--dn-amber); border-color: var(--dn-amber); }
.timeline__bar[data-new="1"]::after {
  content: ""; position: absolute; inset: -3px; border: 2px solid var(--dn-text-primary);
}
.timeline__tick { font-size: 0.5625rem; color: var(--dn-text-secondary); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- 两列 ---------- */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; }

/* 预测依据 */
.model__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0; }
.model__facts > div { background: var(--dn-canvas); padding: 12px; }
.model__facts dt { font-size: 0.6875rem; color: var(--dn-text-secondary); margin-bottom: 4px; }
.model__facts dd { margin: 0; font-size: 1.25rem; font-weight: 300; font-variant-numeric: tabular-nums; }

.dist { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.dist__item { flex: 1; background: var(--dn-cyan); min-height: 3px; position: relative; }
.dist__item[data-outlier="1"] { background: var(--dn-amber); }
.model__notes { margin: 16px 0 0; padding-left: 18px; font-size: 0.75rem; color: var(--dn-text-secondary); line-height: 1.65; }
.model__notes li { margin-bottom: 4px; }

/* 动态 */
.feed { display: grid; gap: 16px; }
.post { border-left: 3px solid var(--dn-teal); padding-left: 14px; }
.post__badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--dn-text-secondary); text-transform: uppercase; }
.post__text { margin: 6px 0 8px; font-size: 1rem; line-height: 1.65; }
.post__quote { margin: 0 0 10px; padding: 10px 12px; background: var(--dn-canvas); font-size: 0.875rem; color: var(--dn-text-secondary); }
.post__meta { display: flex; gap: 14px; align-items: center; font-size: 0.75rem; color: var(--dn-text-secondary); }

/* 事件列表 */
.events { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.event { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dn-divider); align-items: center; }
.event:last-child { border-bottom: 0; }
.event__date { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.875rem; }
.event__types { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 0.6875rem; padding: 3px 8px; border: 1px solid var(--dn-divider); color: var(--dn-text-secondary); }
.tag--quota_reset { background: var(--dn-teal); border-color: var(--dn-teal); color: var(--dn-text-on-color); }
.tag--confirmed { background: var(--dn-cyan); border-color: var(--dn-cyan); color: var(--dn-text-on-color); }
.tag--reset_card { background: var(--dn-amber); border-color: var(--dn-amber); color: var(--dn-text-on-color); }
.tag--new { background: var(--dn-text-primary); border-color: var(--dn-text-primary); color: var(--dn-text-on-ink); }

/* 告警 */
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alert { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 12px; background: var(--dn-canvas); font-size: 0.875rem; }
.alert[data-level="high"] { border-left: 4px solid var(--dn-crimson); }
.alert[data-level="info"] { border-left: 4px solid var(--dn-cyan); }
.alert__time { color: var(--dn-text-secondary); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.alert__title { font-weight: 600; }
.alert__detail { color: var(--dn-text-secondary); font-size: 0.8125rem; }

.empty { color: var(--dn-text-secondary); font-size: 0.875rem; padding: 8px 0; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--dn-divider); margin-top: 8px; }
.footer__inner { max-width: 1240px; margin: 0 auto; padding: 22px 24px 40px; display: grid; gap: 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .columns { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .topbar__inner { padding: 10px 16px; }
  .topbar__time { display: none; }
  .page { padding: 18px 16px 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(15, 1fr); }
  .timeline__bar { height: 34px; }
  .event { grid-template-columns: 96px 1fr; gap: 10px; }
}