.res-sub { margin: 18px 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.res-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.res-actions .notes { margin-top: 0; }
.res-grid { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.res-grid svg { display: block; width: 100%; max-width: 760px; min-width: 480px; margin: 0 auto; }
.res-sq rect { fill: var(--surface-2); stroke: var(--rule-strong); stroke-width: 0.6; }
.res-sq text { fill: var(--text); font-family: var(--mono); font-size: 8px; text-anchor: middle; }
.res-sq.off rect { fill: var(--field); stroke: var(--rule); }
.res-sq.off text { fill: var(--faint); }
.res-sq.research rect { stroke: var(--xp); stroke-width: 1.2; }
.res-sq.bought rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; }
.res-shape image { opacity: 0.45; pointer-events: none; }
.res-shape polygon { fill: none; stroke-width: 1.2; }
.swatch.res-research { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--xp); }
.res-obs-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  max-width: 560px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.res-obs { position: relative; min-height: 64px; padding: 4px; background: var(--surface); }
.res-obs.empty { background: var(--bg); }
.res-obs.locked { opacity: 0.45; }
.res-obs-icon { width: 30px; height: 30px; image-rendering: pixelated; }
.res-obs-lv, .res-obs-share { position: absolute; top: 3px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.res-obs-lv { right: 4px; }
.res-obs-share { right: 4px; top: 16px; color: var(--accent); }
.res-lenses { display: flex; flex-wrap: wrap; gap: 1px; }
.res-lenses img { width: 14px; height: 14px; image-rendering: pixelated; }
.res-row { cursor: pointer; }
.res-row.active td { background: var(--accent-soft); }
.res-why { margin: 0 0 12px; }