:root {
  --bg: #f7f9fb;
  --text: #16202b;
  --card: #ffffff;
  --line: #dce4ec;
  --accent: #0f5b9a;
}
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #eef3f7 0%, #f7f9fb 50%, #edf4fa 100%);
}
.topbar {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.container { padding: 1rem 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.grid > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem;
}
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { border: 1px solid var(--line); padding: .45rem; font-size: .92rem; vertical-align: top; }
th { background: #eef4fa; text-align: left; }
pre { background: #12151c; color: #f3f7ff; padding: .6rem; overflow: auto; }
.bar { width: 100%; height: 10px; background: #e9edf2; border-radius: 999px; overflow: hidden; margin: .2rem 0 .6rem; }
.fill { height: 100%; }
.fill.strong { background: #2e7d32; }
.fill.medium { background: #ef6c00; }
.fill.weak { background: #c62828; }
.pill { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; margin-right: .25rem; border: 1px solid #cbd6e2; background: #f6f9fc; }
.pill.on { background: #e7f6eb; border-color: #7ac88a; }
.pill.off { background: #f7e8e8; border-color: #d19a9a; }
.pill.full { background: #e6f4ff; border-color: #7db7ea; }
.pill.summary { background: #fff1dc; border-color: #e4b978; }
.pill.title-only { background: #f8e8f2; border-color: #d3a1c1; }
.pill.strong { background: #e7f6eb; border-color: #7ac88a; }
.pill.q-high { background: #e7f6eb; border-color: #7ac88a; }
.pill.q-medium { background: #fff1dc; border-color: #e4b978; }
.pill.q-low { background: #f7e8e8; border-color: #d19a9a; }
.status-box { padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; margin: .5rem 0; }
.status-box.mode-local_strong { background: #e9f7ee; border-color: #88c89b; }
.status-box.mode-mixed { background: #fff5e6; border-color: #e0bd83; }
.status-box.mode-airline_driven { background: #fbe9ea; border-color: #d89aa0; }