/* Supplementary styles — main styles live in index.html. */

/* ── Score badge (injected by JS after grading) ── */
.score-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 100px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .75rem;
  letter-spacing: .08em; border: 1px solid;
}
.score-badge.pass { border-color: var(--green); color: var(--green); background: rgba(0,255,178,0.08); }
.score-badge.fail { border-color: var(--red);   color: var(--red);   background: rgba(255,77,109,0.08); }

/* ── Tooltip ── */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
  background: rgba(12,17,32,0.95); border: 1px solid var(--border-bright);
  color: var(--text); font-size: .62rem; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  backdrop-filter: blur(12px);
}
[data-tip]:hover::after { opacity: 1; }