/* Interactive lab cards + CERTIN ratings. Isolated from codelab/terminal views. */
.lab-type-icon {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border:1px solid rgba(148,163,184,.12);
  border-radius:14px; background:rgba(255,255,255,.018);
}

/* Card header: give the product icon and lab metadata their own visual lanes. */
.lab-card__top {
  display:grid; grid-template-columns:56px minmax(0,1fr); align-items:start; gap:1rem; margin-bottom:1.25rem;
}
.lab-card__meta {
  display:flex; min-width:0; align-items:flex-start; justify-content:flex-end; gap:.65rem; padding-top:.1rem;
}
.lab-card__badges { display:flex; min-width:0; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }
.lab-card__mode { padding:.38rem .6rem; background:rgba(16,185,129,.10); color:#34d399; white-space:nowrap; }
.lab-card__difficulty { padding:.38rem .6rem; border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.40); white-space:nowrap; }
.lab-card__duration { padding:.38rem 0; color:rgba(255,255,255,.30); white-space:nowrap; }
@media (max-width:420px) {
  .lab-card__top { grid-template-columns:48px minmax(0,1fr); gap:.8rem; }
  .lab-type-icon { width:48px; height:48px; border-radius:12px; }
  .lab-card__meta { flex-direction:column; align-items:flex-end; gap:.25rem; }
}

.lab-rating { border-top:1px solid rgba(148,163,184,.13); padding-top:1rem; }
.lab-rating__stars { display:inline-flex; align-items:center; gap:.15rem; }
.lab-rating__star {
  appearance:none; border:0; background:transparent; padding:0 .04rem; margin:0;
  color:#475569; cursor:pointer; font-size:22px; line-height:1; transition:color .12s ease, transform .12s ease;
}
.lab-rating__star::before { content:'★'; }
.lab-rating__star:hover, .lab-rating__star:focus-visible { color:#93c5fd; transform:translateY(-1px); outline:none; }
.lab-rating__star.is-filled { color:#60a5fa; }
.lab-rating__star.is-user { color:#93c5fd; }
.lab-rating__summary { margin-left:.55rem; color:#64748b; font-size:11px; white-space:nowrap; }
.lab-rating__status { min-height:1rem; margin-top:.35rem; color:#94a3b8; font-size:10px; }
.lab-rating[data-state="error"] .lab-rating__status { color:#fca5a5; }
.lab-rating[data-state="saved"] .lab-rating__status { color:#93c5fd; }
.lab-rating__star:disabled { cursor:wait; opacity:.65; }