:root {
  --new: #2e7d32; --drop: #1565c0; --rise: #ef6c00;
  --removed: #757575; --updated: #6a1b9a;
  --bg: #f5f6f8; --card: #fff; --border: #e0e0e0; --text: #222;
}
* { box-sizing: border-box; }
body { font-family: "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
       margin: 0; background: var(--bg); color: var(--text); }
header { background: #1a237e; color: #fff; padding: 18px 24px; }
header h1 { margin: 0; font-size: 20px; }
header .meta { font-size: 13px; opacity: .85; margin-top: 4px; }
header nav { margin-top: 8px; font-size: 14px; }
header nav a { color: #fff; opacity: .9; margin-right: 16px; }
header nav a.active { font-weight: 700; text-decoration: underline; opacity: 1; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }

.cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
        padding: 14px 18px; min-width: 110px; flex: 1; }
.card .num { font-size: 26px; font-weight: 700; }
.card .lbl { font-size: 13px; color: #666; }
.card.new .num { color: var(--new); }
.card.drop .num { color: var(--drop); }
.card.rise .num { color: var(--rise); }
.card.removed .num { color: var(--removed); }
.card.updated .num { color: var(--updated); }

section { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
          padding: 18px; margin-bottom: 24px; }
section h2 { margin: 0 0 14px; font-size: 16px; }

.event { padding: 8px 12px; border-left: 4px solid var(--border);
         margin-bottom: 8px; border-radius: 4px; background: #fafafa; }
.event.new { border-color: var(--new); }
.event.drop { border-color: var(--drop); }
.event.rise { border-color: var(--rise); }
.event.removed { border-color: var(--removed); }
.event.updated { border-color: var(--updated); }

.badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px;
         color: #fff; margin-right: 8px; }
.badge.new { background: var(--new); }
.badge.drop { background: var(--drop); }
.badge.rise { background: var(--rise); }
.badge.removed { background: var(--removed); }
.badge.updated { background: var(--updated); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #fafafa; font-weight: 600; }
th.num { text-align: right; }
td.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #eef0f5; }
th.sortable::after { content: " \2195"; color: #bbb; font-size: 12px; }
th.sortable.asc::after { content: " \2191"; color: #1a237e; }
th.sortable.desc::after { content: " \2193"; color: #1a237e; }
td code { font-size: 12px; color: #555; background: #f0f0f3; padding: 1px 5px; border-radius: 4px; }

a { color: #1565c0; text-decoration: none; }
a:hover { text-decoration: underline; }
button { background: #1a237e; color: #fff; border: 0; padding: 9px 18px;
         border-radius: 6px; font-size: 14px; cursor: pointer; }
button:hover { background: #283593; }
.empty { color: #888; padding: 20px; text-align: center; }
.hint { font-size: 13px; color: #666; }

/* history 頁面:每個 run 的時間軸區塊 */
.run-block { background: var(--card); border: 1px solid var(--border);
             border-radius: 8px; padding: 18px; margin-bottom: 20px; }
.run-head { display: flex; align-items: baseline; gap: 12px;
            flex-wrap: wrap; margin-bottom: 12px; }
.run-head .when { font-size: 15px; font-weight: 700; }
.run-head .sub { font-size: 13px; color: #666; }
.run-head .pill { font-size: 12px; padding: 2px 9px; border-radius: 10px;
                  background: #eef0f5; color: #333; }