:root {
  --bg: #ececf2;
  --panel: rgba(255, 255, 255, 0.88);
  --text: #20222d;
  --muted: #80849a;
  --line: rgba(108, 113, 137, 0.14);
  --accent: #ff9f0a;
  --accent-soft: rgba(255, 159, 10, 0.16);
  --green: #25b35a;
  --amber: #f59e0b;
  --red: #ef4444;
  --shadow: 0 20px 50px rgba(43, 47, 64, 0.07);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans SC", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), transparent 35%),
    radial-gradient(circle at top right, rgba(255, 210, 144, 0.32), transparent 28%),
    linear-gradient(180deg, #f6f6fa 0%, var(--bg) 38%, #f2f2f7 100%);
  min-height: 100vh;
}
.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 90%);
}
.shell { width: min(940px, calc(100vw - 18px)); margin: 0 auto; padding: 14px 0 20px; }
.hero, .meta-row, .board-head, .cards { position: relative; z-index: 1; }
.hero { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 2px 2px 10px; }
.eyebrow { margin: 0 0 8px; color: #6a7087; letter-spacing: 0.12em; text-transform: uppercase; font: 700 10px/1 "Space Grotesk", sans-serif; }
h1 { margin: 0; font-size: clamp(20px, 3.3vw, 29px); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.subtitle { margin: 7px 0 0; max-width: 500px; color: var(--muted); font-size: 11px; }
.refresh-ring { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.refresh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track, .ring-progress { fill: none; stroke-width: 8; }
.ring-track { stroke: rgba(20, 24, 38, 0.08); }
.ring-progress { stroke: #1f7aff; stroke-linecap: round; stroke-dasharray: 289.0265; stroke-dashoffset: 289.0265; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-center strong { font: 700 22px/1 "Space Grotesk", sans-serif; }
.ring-center span { color: var(--muted); font-size: 10px; }
.meta-row { margin-top: 7px; padding: 0 4px; }
.meta-live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 5px rgba(37, 179, 90, 0.12); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 2px 7px; }
.board-head h2 { margin: 0; font-size: 15px; }
.board-head p { margin: 0; color: var(--muted); font-size: 10px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.group-card { padding: 11px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.card-topline { display: flex; align-items: flex-start; justify-content: flex-start; }
.group-heading { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.group-texts { display: flex; flex-direction: column; }
.group-bullet { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.group-label { font-size: 16px; line-height: 1.05; letter-spacing: -0.03em; }
.duration-block { padding-top: 10px; }
.duration-row { display: flex; align-items: baseline; gap: 5px; }
.duration-value { font: 700 clamp(23px, 2.9vw, 31px)/0.95 "Space Grotesk", sans-serif; letter-spacing: -0.06em; }
.duration-unit { font: 700 12px/1 "Space Grotesk", sans-serif; color: #6c7187; }
.model-line { margin: 7px 0 3px; color: #3e465a; font-size: 11px; font-weight: 700; }
.detail-line { margin: 0; color: var(--muted); font-size: 10px; min-height: 26px; }
.accent-bar { height: 4px; margin: 11px 0 9px; border-radius: 999px; overflow: hidden; background: #edf0f7; }
.accent-bar span { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb23f 0%, #ff9500 100%); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.stat-chip { min-height: 60px; padding: 7px; border-radius: 13px; background: rgba(242, 244, 249, 0.95); border: 1px solid var(--line); }
.stat-chip span { display: block; color: var(--muted); font-size: 9px; }
.stat-chip strong { display: -webkit-box; margin-top: 5px; font-size: 11px; line-height: 1.25; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-card[data-freshness="warm"] .group-bullet { background: var(--amber); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.13); }
.group-card[data-freshness="stale"] .group-bullet { background: var(--red); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12); }
@media (max-width: 980px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .shell { width: min(100vw - 14px, 980px); padding-top: 12px; } .hero { flex-direction: column; align-items: flex-start; } .refresh-ring { width: 66px; height: 66px; } .cards, .stats-grid { grid-template-columns: 1fr; } .board-head { flex-direction: column; align-items: flex-start; } }