:root{
  --bg:#0f1115;
  --card:#171a21;
  --muted:#8b93a7;
  --text:#e6e9f2;
  --accent:#4f8cff;
  --accent-2:#7aa2ff;
  --border:#232837;
  --success:#3ddc97;
}

.info-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:720px;
}

.info-header{
  display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-bottom:8px;
}

.version-badge{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  font-weight:600;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
}

.updated-pill{
  color:#c8d1ea;
  background:#1c2230;
  border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-size:.85rem;
}

.desc{
  color:#d9def0;
  line-height:1.55;
  margin:10px 0 16px;
}

.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin:10px 0 18px;
}
.stat{
  background:#121621;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.stat .label{ color:var(--muted); font-size:.8rem; }
.stat .value{ display:block; margin-top:6px; font-weight:700; font-size:1.1rem; }

.section-title{
  margin:14px 0 8px; font-size:1rem; color:#cdd5f0; font-weight:600;
}

.mice-list{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;
}
.mice-list li{
  background:#121621;
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:10px;
  font-size:.9rem;
  color:#dbe3ff;
}

.helper-note{
  margin-top:14px; color:var(--muted); font-size:.85rem;
}

hr.card-divider{
  border:0; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:14px 0;
}

#rp2040_info p, #supported_mice li {
    font-size: small;
}