:root {
  --bg: #0b0d10; --surface: #12161b; --border: #232a33; --text: #e6e9ee; --muted: #8b95a3;
  --accent: #9aa4b2;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.planet-trust { --accent: #3ddc97; }
.planet-radar { --accent: #5aa9ff; }
.planet-blueprints { --accent: #c792ea; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); }
.top, main, .foot { max-width: 1100px; margin: 0 auto; padding: 16px; }
.top { display: flex; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--border); }
.wordmark { color: var(--accent); font: 600 20px var(--mono); text-decoration: none; }
.tagline { color: var(--muted); }
.hero h1 { font: 600 40px/1.2 var(--mono); color: var(--accent); margin: 32px 0 8px; }
.foot { display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--border); font-size: 14px; }
.foot nav a { color: var(--accent); margin-left: 16px; }
.badge { font: 12px var(--mono); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--muted); }
.mono { font-family: var(--mono); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
button { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
button:hover { border-color: var(--accent); }
input[type=text] { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; }
@media (max-width: 600px) {
  .top, .foot { flex-direction: column; gap: 8px; }
  .foot nav a { margin: 0 16px 0 0; }
  table { display: block; overflow-x: auto; }
}
.muted { color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; }
.grade { font: 600 14px var(--mono); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); }
.grade-A { color: #3ddc97; } .grade-B { color: #9be37a; } .grade-C { color: #f2c94c; }
.grade-D { color: #f2994a; } .grade-F { color: #eb5757; } .grade-none { color: var(--muted); }
.finding { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
.sev-critical { border-color: #eb5757; } .sev-high { border-color: #f2994a; }
pre { white-space: pre-wrap; overflow-x: auto; background: var(--surface); padding: 8px; border-radius: 4px; }
.notice { border: 1px solid #f2c94c; border-radius: 6px; padding: 8px 12px; margin: 12px 0; }
meter { width: 200px; }
textarea { width: 100%; min-height: 200px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font: 13px var(--mono); padding: 8px; }
input[type=password] { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; }
.subnav { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.subnav a { color: var(--accent); text-decoration: none; }
.cluster { border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; padding: 8px 14px; margin: 14px 0; background: var(--surface); }
.cluster h2 { margin: 4px 0; font-size: 18px; }
.impact-breaking { border-left-color: #eb5757; } .impact-notable { border-left-color: #f2c94c; } .impact-minor { border-left-color: var(--border); }
.cluster.is-new { outline: 1px solid var(--accent); }
.stack { border: 1px solid var(--border); border-radius: 6px; padding: 8px 14px; margin: 16px 0; }
.stack label { margin-right: 12px; }
[hidden] { display: none !important; }
#ask-form input[type=text] { width: min(70%, 600px); }
.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cols label, #cost-tools label { display: flex; flex-direction: column; gap: 2px; }
details pre { margin-top: 8px; }
input[type=number], textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font: inherit; }
textarea { width: 100%; min-height: 90px; }
fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 12px 0; }
tr.differs td, tr.differs th { background: color-mix(in srgb, var(--accent) 12%, transparent); }