/* main.jiminbot20.uk — main-hub layout-only styles.
 * Theme tokens (4 themes + font sizes) live in lib/theme.css — DO NOT duplicate here.
 */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--font-size);
  line-height: 1.5;
  padding: var(--gap);
  transition: background 0.2s, color 0.2s;
}

/* ── Legacy header — replaced by app-top-nav (nav.js mountNavigation) ──── */
#last-updated { color: var(--text-muted); font-size: 0.8rem; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start; /* 컬럼 높이 stretch 방지 (diag 유무로 높이 달라도 위 정렬) */
}

/* 카드 + 그 아래 diag 를 한 컬럼으로 — diag 가 위 카드와 같은 폭 */
.card-col { display: flex; flex-direction: column; min-width: 0; }

@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 10px 14px;
  border-top: 3px solid var(--offline);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.card[data-source="dashboard"] { border-top-color: var(--dashboard); }
.card[data-source="side"] { border-top-color: var(--side); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.card-title { font-weight: 600; font-size: 0.92rem; }
.card-host { color: var(--text-muted); font-size: 0.72rem; margin-bottom: 4px; }

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.8em;
}

.card-row:last-child { border-bottom: none; }
.card-row-label { color: var(--text-muted); }
.card-row-value { font-weight: 500; }

/* compact 카드 — 5행을 2행 칩으로 압축 (overview) */
.card-compact { display: flex; flex-direction: column; gap: 5px; }
.cc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
}
.cc-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 0.78rem;
}
.cc-k { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; }
.cc-v {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
/* Badge layout only. Color tokens come from lib/theme.css (.badge-online /
 * .badge-stale / .badge-offline + .badge-alert-{info,warn,error}). */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.alert-empty { color: var(--text-muted); font-size: 0.8rem; }

/* ── Token / Plan / Activity panel ───────────────────────────────────────── */
.token-panel-wrap {
  margin-top: var(--gap);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--gap);
  border-top: 3px solid var(--dashboard);
  transition: background 0.2s;
}

.tp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.tp-src-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.src-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.src-online  { background: color-mix(in srgb, var(--online)  18%, transparent); color: var(--online); }
.src-stale   { background: color-mix(in srgb, var(--stale)   18%, transparent); color: var(--stale); }
.src-offline { background: color-mix(in srgb, var(--offline) 18%, transparent); color: var(--offline); }

.tp-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-2);
}

.tp-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tp-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.82em;
  gap: 8px;
}

.tp-row:last-child { border-bottom: none; }
.tp-row-label { color: var(--text-muted); flex-shrink: 0; }
.tp-row-value { font-weight: 500; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.tp-total  { font-weight: 700; }
.tp-muted  { color: var(--text-muted); font-weight: 400; }
.tp-split  { font-size: 0.88em; }
.tp-src-tag { font-size: 0.78em; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.tp-reset  { font-size: 0.82em; color: var(--text-muted); }
.tp-empty  { color: var(--text-muted); font-size: 0.82rem; padding: 6px 0; }

/* Plan usage bar */
.tp-plan-val { display: flex; align-items: center; gap: 6px; }

.pct-bar-wrap {
  width: 80px;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.pct-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.pct-bar-ok       { background: var(--online); }
.pct-bar-warn     { background: var(--stale); }
.pct-bar-critical { background: var(--offline); }
.pct-label        { font-size: 0.82em; min-width: 32px; text-align: right; }

/* Sparkline bars */
.spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
}

.spark-bar {
  width: 6px;
  background: var(--dashboard);
  border-radius: 2px 2px 0 0;
  opacity: 0.65;
  transition: height 0.3s ease;
}

.spark-bar.spark-hi { opacity: 1; }
.spark-empty { color: var(--text-muted); font-size: 0.8em; }

/* ── KV Monitor block — enlarged gauge ───────────────────────────────────── */
#kv-monitor {
  margin-top: calc(var(--gap) * 0.5);
}

.kvm-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--dashboard);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.2s;
}

.kvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kvm-title {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* Large write count */
.kvm-count-big {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
}

.kvm-count-limit {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.kvm-remaining-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--online) 15%, transparent);
  color: var(--online);
}

/* Full-width enlarged gauge bar */
.kvm-gauge-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kvm-bar-wrap {
  flex: 1;
  height: 20px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
}

.kvm-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
}

.kvm-bar-fill-ok       { background: var(--online); }
.kvm-bar-fill-warn     { background: var(--stale); }
.kvm-bar-fill-critical { background: var(--alert-error); }

.kvm-bar-label {
  font-size: 1rem;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
  flex-shrink: 0;
}

.kvm-aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 4px;
}

.kvm-countdown {
  font-size: 0.8rem;
  font-weight: 600;
}

.kvm-ops { font-size: 0.75rem; }
.kvm-error { font-size: 0.78rem; color: var(--text-muted); }
.kvm-over { color: var(--alert-error); font-weight: 800; }

/* ── Pipeline Diagnostic Panel ───────────────────────────────────────────── */
.pipeline-diag-wrap {
  margin-top: 6px;
  margin-bottom: 0;
}

.pd-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 14px;
  border-left: 3px solid var(--text-muted);
  font-size: 0.82rem;
}

.pd-wrap[data-state="ONLINE"]  { border-left-color: var(--online); }
.pd-wrap[data-state="STALE"]   { border-left-color: var(--stale); }
.pd-wrap[data-state="OFFLINE"] { border-left-color: var(--offline); }
.pd-wrap[data-state="NO_DATA"] { border-left-color: var(--text-muted); }

.pd-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pd-icon {
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Pipeline flow: [src] → [Worker/KV] → [Browser] */
.pd-pipeline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pd-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.pd-step-ok  {
  background: color-mix(in srgb, var(--online)  15%, transparent);
  color: var(--online);
}

.pd-step-err {
  background: color-mix(in srgb, var(--offline) 15%, transparent);
  color: var(--offline);
}

.pd-arrow {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Cause list */
.pd-causes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pd-causes li {
  padding: 5px 8px;
  background: var(--surface-2);
  border-radius: 4px;
  color: var(--text-muted);
  line-height: 1.5;
}

.pd-causes li strong { color: var(--text); }
.pd-causes li code {
  font-family: ui-monospace, monospace;
  font-size: 0.78em;
  padding: 1px 4px;
  background: var(--bg);
  border-radius: 3px;
  color: var(--dashboard);
}

.pd-causes li em { color: var(--stale); font-style: normal; font-weight: 600; }

/* ── Pipeline diag — collapsible (기본 접힘, 아래로 펼침) ──────────────────── */
.pd-details {
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 3px solid var(--text-muted);
  font-size: 0.82rem;
  overflow: hidden;
}
.pd-details[data-state="STALE"]   { border-left-color: var(--stale); }
.pd-details[data-state="OFFLINE"] { border-left-color: var(--offline); }
.pd-details[data-state="NO_DATA"] { border-left-color: var(--text-muted); }

.pd-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.pd-summary::-webkit-details-marker { display: none; }
.pd-summary::marker { content: ""; }
.pd-summary:hover { background: var(--surface-2); }

.pd-sum-text { flex: 1; min-width: 0; }
.pd-sum-toggle {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
}
.pd-details[open] .pd-sum-toggle { color: var(--text); }
.pd-caret { display: inline-block; transition: transform 0.2s ease; }
.pd-details[open] .pd-caret { transform: rotate(180deg); }

.pd-body { padding: 2px 12px 12px; }

/* ── Worklog panel — 프로젝트별 일일 작업량 막대 차트 ──────────────────────── */
.wl-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
.wl-row {
  display: grid;
  grid-template-columns: minmax(58px, 96px) 1fr auto;
  align-items: center;
  gap: 10px;
}
.wl-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-track {
  position: relative;
  height: 16px;
  background: var(--surface-2);
  border-radius: 8px;
  overflow: hidden;
}
.wl-fill {
  height: 100%;
  border-radius: 8px;
  min-width: 3px;
  opacity: 0.92;
  transition: width 0.4s ease;
}
.wl-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wl-val { font-weight: 700; font-size: 0.82rem; color: var(--text); }
.wl-pct { color: var(--text-muted); font-size: 0.74rem; min-width: 30px; text-align: right; }

/* ── worklog 3뷰 확장 (랭킹 강화 + 추세 + 히트맵) ───────────────────────── */
.wl-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wl-tabs { display: inline-flex; gap: 4px; }
.wl-tab {
  font-size: 0.72rem; padding: 2px 9px; border-radius: 6px; cursor: pointer;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border, #334155);
}
.wl-tab:hover { color: var(--text); }
.wl-tab.active { background: var(--surface); color: var(--accent-blue, #3b82f6); border-color: var(--accent-blue, #3b82f6); }
.wl-empty { font-size: 0.8rem; padding: 14px 0; text-align: center; }
.wl-body { margin-top: 10px; }
.wl-body .wl-grid { margin-top: 0; }
/* 랭킹: row 에 comp·git 추가됨 → meta 폭 확장 */
.wl-fill { position: relative; }
.wl-fill-main { position: absolute; left: 0; top: 0; height: 100%; background: rgba(255,255,255,0.3); border-radius: 8px 0 0 8px; }
.wl-comp { color: var(--text-muted); font-size: 0.72rem; min-width: 30px; text-align: right; }
.wl-git { color: var(--accent-green, #10b981); font-size: 0.66rem; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.wl-nogit { font-size: 0.66rem; min-width: 74px; text-align: right; }
/* 추세 chart */
.wl-chart-wrap { position: relative; height: 200px; margin-top: 6px; }
/* 히트맵 */
.wl-hm-wrap { overflow-x: auto; margin-top: 8px; }
.wl-hm-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.wl-hm-label { width: 100px; flex-shrink: 0; font-size: 0.68rem; color: var(--text-muted);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-hm-head .wl-hm-d { width: 11px; flex-shrink: 0; font-size: 7px; color: var(--text-muted); text-align: left; }
.wl-hm-cell { width: 11px; height: 11px; flex-shrink: 0; border-radius: 2px; background: var(--surface-2); }
.wl-lv0 { background: var(--surface-2); }
.wl-lv1 { background: #0e4429; }
.wl-lv2 { background: #006d32; }
.wl-lv3 { background: #26a641; }
.wl-lv4 { background: #39d353; }

/* Token panel hint text */
.tp-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78em;
}

/* ── ATU chart (dashboard-identical style) ───────────────────────────────── */
.atu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.atu-charts-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.atu-chart-col {
  width: 100%;
}

.atu-chart-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.atu-chart-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}

.atu-sig-badge { font-size: 9px; }
.atu-sig-warn    { color: var(--stale);   }
.atu-sig-offline { color: var(--offline); }

.atu-chart-wrap {
  position: relative;
  height: 100px;
}

.atu-no-signal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--stale);
}

.atu-summary {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  flex-wrap: wrap;
}

.atu-summary b { color: var(--text); }

.atu-empty {
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
}

/* ── Plan Usage — quota-hero + quota-cards (dashboard-identical) ─────────── */
.quota-hero {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.quota-hero-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--dashboard);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.quota-hero-pct {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.quota-hero-bar-wrap {
  background: var(--surface);
  border-radius: 5px;
  height: 12px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.quota-hero-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s;
}

.quota-hero-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.quota-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .quota-cards { grid-template-columns: 1fr 1fr; }
}

.quota-card {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 8px 10px;
}

.quota-card-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quota-card-pct {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.quota-card-bar-wrap {
  background: var(--surface);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
  margin: 4px 0 3px;
}

.quota-card-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

.quota-card-reset {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Weekly token bars (최근 4주 가로바) ─────────────────────────────────── */
.tp-section-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.wk-src-tag {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.wk-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
}

.wk-row {
  display: grid;
  grid-template-columns: 58px 82px 1fr 50px 38px;
  align-items: center;
  gap: 6px;
}

.wk-current .wk-label {
  font-weight: 700;
}

.wk-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.wk-range {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.wk-bar-wrap {
  position: relative;
}

.wk-bar-track {
  background: var(--surface-2);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.wk-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.4s ease;
}

.wk-limit-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 2px dashed rgba(248, 250, 252, 0.5);
  pointer-events: none;
  z-index: 2;
}

.wk-tok {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.wk-pct {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.wk-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 4px;
}

.wk-reset-note {
  font-size: 9px;
  color: var(--text-muted);
}

/* ── Claude Activity heatmap (dashboard-identical) ───────────────────────── */
.hm-section {}

.hm-scroll {
  padding-bottom: 4px;
}

.hm-grid-wrap {
  display: block;
  width: 100%;
}

.hm-month-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  margin-bottom: 4px;
  padding-left: 24px;
  font-size: 10px;
  color: var(--text-muted);
}

.hm-month-label {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
}

.hm-body {
  display: flex;
  gap: 2px;
}

.hm-daynames {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 4px;
  font-size: 9px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.hm-dayname {
  height: 14px;
  line-height: 14px;
  text-align: right;
  padding-right: 2px;
  font-size: 9px;
}

.hm-dayname:nth-child(odd) { visibility: hidden; }

.hm-columns {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.hm-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.hm-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  cursor: default;
  flex-shrink: 0;
  position: relative;
}

/* Heatmap color levels (GitHub-style green, same as dashboard) */
.hm-cell.lv0 { background: #161b22; }
.hm-cell.lv1 { background: #0e4429; }
.hm-cell.lv2 { background: #006d32; }
.hm-cell.lv3 { background: #26a641; }
.hm-cell.lv4 { background: #39d353; }
.hm-cell.hm-future { background: color-mix(in srgb, var(--surface-2) 60%, transparent); cursor: default; }
.hm-cell.wed { border: 1px solid var(--hm-wed-border, #f1f5f9); border-radius: 3px; }

/* Light theme override for lv0 so it's visible */
[data-theme="minimal-light"] .hm-cell.lv0 { background: #ebedf0; }

.hm-cell:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

.hm-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.hm-legend-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.hm-legend-cell.lv0 { background: #161b22; }
.hm-legend-cell.lv1 { background: #0e4429; }
.hm-legend-cell.lv2 { background: #006d32; }
.hm-legend-cell.lv3 { background: #26a641; }
.hm-legend-cell.lv4 { background: #39d353; }

[data-theme="minimal-light"] .hm-legend-cell.lv0 { background: #ebedf0; }

.hm-summary {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: ui-monospace, monospace;
}

.hm-summary b { color: var(--text); }

@media (max-width: 720px) {
  .hm-scroll { overflow-x: auto; }
  .hm-grid-wrap { display: inline-block; }
}

/* ── Alert tray ───────────────────────────────────────────────────────────── */
.alert-tray {
  margin-top: var(--gap);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--gap);
  transition: background 0.2s;
}

.alert-tray h2 { font-size: 0.9rem; margin-bottom: 8px; color: var(--text-muted); }

.alert-item {
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 0.8em;
  border-left: 3px solid var(--alert-info);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Color tier via data-level attribute (set by SourceOverview._renderAlerts).
 * color-mix() backgrounds keep legibility across all 4 themes. */
.alert-item[data-level="info"]  { border-left-color: var(--alert-info);  background: color-mix(in srgb, var(--alert-info) 12%, transparent); }
.alert-item[data-level="warn"]  { border-left-color: var(--alert-warn);  background: color-mix(in srgb, var(--alert-warn) 12%, transparent); }
.alert-item[data-level="error"] { border-left-color: var(--alert-error); background: color-mix(in srgb, var(--alert-error) 12%, transparent); }

.alert-item .alert-message { flex: 1; }
.alert-item .alert-source { color: var(--text-muted); font-weight: 600; min-width: 60px; }

/* ── Cross-links ──────────────────────────────────────────────────────────── */
.cross-links {
  display: flex;
  gap: 12px;
  margin-top: var(--gap);
  flex-wrap: wrap;
}

.cross-links a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.cross-links a:hover { color: var(--text); }

/* ── Error banner ─────────────────────────────────────────────────────────── */
#error-banner {
  display: none;
  background: rgba(239,68,68,0.15);
  border: 1px solid var(--alert-error);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: var(--gap);
  font-size: 0.85em;
}

/* ── Settings button — now inside .app-top-nav via nav.js.
   Styles live in lib/theme.css (.app-top-nav__settings).
   Focus ring kept for accessibility. ────────────────────────────────────── */
#theme-settings-btn:focus-visible {
  outline: 2px solid var(--dashboard);
  outline-offset: 2px;
}

/* ── Settings panel ───────────────────────────────────────────────────────── */
#theme-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 24px 20px;
  z-index: 200;
  overflow-y: auto;
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 0.28s ease, background 0.2s;
}

#theme-settings-panel.hidden { transform: translateX(100%); }

#theme-settings-panel h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

#theme-settings-panel fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

#theme-settings-panel legend {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
}

#theme-settings-panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 0.875em;
  color: var(--text);
  border-bottom: 1px solid var(--surface-2);
}

#theme-settings-panel label:last-child { border-bottom: none; }

#theme-settings-panel label:hover { color: var(--dashboard); }

#theme-settings-panel input[type="radio"] {
  accent-color: var(--dashboard);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.panel-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 6px;
}

#theme-settings-close {
  width: 100%;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.875em;
  cursor: pointer;
  transition: background 0.15s;
}

#theme-settings-close:hover { background: var(--border); }
#theme-settings-close:focus-visible {
  outline: 2px solid var(--dashboard);
  outline-offset: 2px;
}

/* ── Theme preview dots ───────────────────────────────────────────────────── */
.theme-preview {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.theme-preview span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Mobile: panel goes full-width */
@media (max-width: 600px) {
  #theme-settings-panel { width: 100vw; border-left: none; }
}