/* Tranche 2 additions — tools view + recent batches. Uses the same
   variables and component classes as style.css (premium standard:
   designed cards, tinted panels, pill controls). */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .tools-grid { grid-template-columns: 1fr; } }
.tools-grid .card { border-radius: var(--radius-lg, 22px);
  box-shadow: var(--shadow, 0 10px 34px rgba(20,40,26,.07)); }
.gene-variants { max-height: 340px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 4px; margin-top: 10px; }
.gene-variant { display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; text-align: left; background: none;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  cursor: pointer; font: inherit; }
.gene-variant:hover { border-color: var(--brand, #0b6b57);
  background: var(--brand-soft, #e2f1ec); }
.gene-variant.borderline { border-color: var(--amber-line, #e8c07a);
  background: #fffaf0; }
.gv-name { word-break: break-all; }
.recent-row { display: flex; justify-content: space-between; gap: 12px;
  align-items: center; border-top: 1px solid var(--line); padding: 10px 0; }
.recent-meta { display: flex; flex-direction: column; gap: 2px; }