.sp-card { background: var(--surface, var(--surface)); border: 1px solid var(--line, var(--border)); border-radius: 16px; padding: 22px 18px; display: grid; gap: 14px; margin-bottom: 22px; }
.sp-watch { text-align: center; display: grid; gap: 4px; padding: 6px 0 4px; }
.sp-num { font: 650 clamp(64px, 16vw, 132px)/1 var(--display); color: var(--sig, var(--accent)); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sp-num.wait { color: var(--muted, var(--text-3)); }
.sp-num.flash { animation: sp-flash .45s ease-out; }
@keyframes sp-flash { from { transform: scale(1.06); } to { transform: scale(1); } }
.sp-unit { font-size: .32em; margin-left: .18em; color: var(--ink, var(--text)); }
.sp-cap { margin: 0; font-size: 16px; }
.sp-break { margin: 0; min-height: 1.4em; }
.sp-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
#sp-btn { min-width: 170px; font-size: 18px; }
#sp-btn.live { background: var(--bad, var(--bad)); border-color: var(--bad, var(--bad)); color: var(--btn-ink); }
.sp-meter { width: 120px; height: 10px; border-radius: 6px; background: var(--raise, var(--surface-2)); overflow: hidden; }
.sp-meter i { display: block; height: 100%; width: 0; background: var(--sig, var(--accent)); transition: width .06s linear; }
.sp-bar { height: 4px; border-radius: 3px; background: var(--raise, var(--surface-2)); overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--muted, var(--text-3)); }
.sp-status { margin: 0; text-align: center; font-size: 15px; min-height: 1.4em; }
.sp-status.err { color: var(--bad, var(--bad)); }
.sp-log { display: grid; gap: 8px; min-height: 60px; max-height: 340px; overflow-y: auto; align-content: start; }
.sp-line { background: var(--raise, var(--surface-2)); border-radius: 12px; padding: 10px 13px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.sp-line .t { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.sp-line .ms { font: 650 20px var(--display); color: var(--sig, var(--accent)); white-space: nowrap; letter-spacing: -0.02em; }
.sp-line .sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted, var(--text-3)); }
.sp-line.interim .t { opacity: .6; font-style: italic; }
.sp-sum { margin: 0; text-align: center; }
.sp-others { margin: 0; text-align: center; color: var(--muted, var(--text-3)); }
.sp-how { margin-bottom: 22px; }
.sp-how h2 { font-size: 20px; }
.sp-how ol { padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.5; }
.sp-how code { font-family: var(--mono); font-size: .92em; }
.sp-cta { background: var(--surface, var(--surface)); border: 1px solid var(--line, var(--border)); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.sp-cta p { margin: 0 0 12px; line-height: 1.5; }
.sp-cta p:last-child { margin: 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sp-link { color: var(--ink, var(--text)); }
.sp-foot { padding-block: 10px 40px; }
.muted { color: var(--muted, var(--text-3)); }
.small { font-size: 13.5px; }
@media (max-width: 560px) { .sp-card { padding: 18px 14px; } .sp-meter { width: 90px; } }
.sp-break { display: grid; gap: 2px; justify-items: center; }
.sp-row { display: block; }
.sp-row b { color: var(--ink, var(--text)); font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-eq { margin-top: 2px; }
.sp-claim { margin: 0; text-align: center; color: var(--ink, var(--text)); font-size: 15px; }