| /* 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; } | |