.biomodes-compare{
  --bcp-ground:#eef2f2; --bcp-panel:#e4ecec; --bcp-ink:#16231f; --bcp-ink-dim:#4c5c58;
  --bcp-rule:rgba(22,35,31,.14); --bcp-accent:#2d96bd;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--bcp-ink);
}
[theme=dark] .biomodes-compare{ --bcp-ground:#0f1a1c; --bcp-panel:#132123; --bcp-ink:#dce8e6; --bcp-ink-dim:#8fa5a1; --bcp-rule:rgba(220,232,230,.14); --bcp-accent:#5fb8d9; }
[theme=black] .biomodes-compare{ --bcp-ground:#000; --bcp-panel:#0a0a0a; --bcp-ink:#d9d9d9; --bcp-ink-dim:#8a8a8a; --bcp-rule:rgba(255,255,255,.14); --bcp-accent:#5fb8d9; }
.bcp-mono{ font-family:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
.bcp-serif{ font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }

.bcp-picker-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:end; margin:1rem 0 1.4rem; }
@media (max-width:640px){ .bcp-picker-row{ grid-template-columns:1fr; } .bcp-vs{ justify-self:center; } }
.bcp-picker{ display:flex; flex-direction:column; gap:.3rem; }
.bcp-picker label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bcp-ink-dim); }
.bcp-picker input{
  font:inherit; font-size:.92rem; padding:.6rem .8rem; border-radius:8px;
  border:1px solid var(--bcp-rule); background:var(--bcp-panel); color:var(--bcp-ink);
}
.bcp-picker input:focus{ outline:2px solid var(--bcp-accent); outline-offset:1px; }
.bcp-vs{ font-size:.8rem; font-weight:700; color:var(--bcp-ink-dim); padding-bottom:.7rem; }

.bcp-actions{ display:flex; justify-content:center; margin-bottom:1.6rem; }
.bcp-random-btn{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--bcp-rule);
  background:var(--bcp-panel); color:var(--bcp-ink);
}
.bcp-random-btn:hover{ border-color:var(--bcp-accent); }

.bcp-empty{ text-align:center; color:var(--bcp-ink-dim); font-size:.88rem; padding:2.5rem 1rem; border:1px dashed var(--bcp-rule); border-radius:10px; }

.bcp-result{ display:none; }
.bcp-result.show{ display:block; }

.bcp-similarity{
  text-align:center; margin-bottom:1.2rem; padding:.9rem 1rem; border-radius:10px;
  background:var(--bcp-panel); border:1px solid var(--bcp-rule);
}
.bcp-similarity-num{ font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.bcp-similarity-label{ font-size:.78rem; color:var(--bcp-ink-dim); margin-top:.15rem; }

.bcp-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.4rem; }
@media (max-width:640px){ .bcp-cards{ grid-template-columns:1fr; } }
.bcp-card{
  background:var(--bcp-panel); border:1px solid var(--bcp-rule); border-radius:10px; padding:1.1rem 1.2rem;
}
.bcp-card-cat{ display:inline-flex; align-items:center; gap:.4rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bcp-ink-dim); font-weight:600; margin-bottom:.4rem; }
.bcp-card-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.bcp-card-name{ font-size:1.15rem; font-weight:600; margin:0 0 .1rem; text-wrap:balance; }
.bcp-card-year{ font-size:.72rem; color:var(--bcp-ink-dim); display:block; margin-bottom:.6rem; }
.bcp-card-desc{ font-size:.82rem; line-height:1.55; color:var(--bcp-ink-dim); margin:0 0 .7rem; }
.bcp-card-link{ font-size:.78rem; color:var(--bcp-accent); text-decoration:none; }
.bcp-card-link:hover{ text-decoration:underline; }

.bcp-tech-section{ margin-bottom:.5rem; }
.bcp-tech-title{ font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bcp-ink-dim); margin-bottom:.35rem; }
.bcp-tech-chips{ display:flex; flex-wrap:wrap; gap:.32rem; }
.bcp-chip{ font-size:.7rem; padding:.16rem .55rem; border-radius:9px; background:var(--bcp-rule); color:var(--bcp-ink-dim); }
.bcp-chip.shared{ background:var(--bcp-accent); color:#fff; }