@property --next-cue-angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}
.next-action {
 --next-cue-color: #18345c;
 position: relative;
 box-sizing: border-box;
 min-height: 44px;
 max-width: 100%;
 cursor: pointer;
}
.next-action:disabled { cursor: default; }
.next-action.next-action-ready:not(:disabled) {
 color: var(--next-cue-color);
 border-color: var(--next-cue-color);
 background-color: rgba(24, 52, 92, .04);
}
.next-action-ready:not(:disabled)::before {
 content: '';
 position: absolute;
 inset: 0;
 padding: 2px;
 border-radius: inherit;
 pointer-events: none;
 background: conic-gradient(from var(--next-cue-angle), transparent 0deg, var(--next-cue-color) 80deg 160deg, transparent 250deg 360deg);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 mask-composite: exclude;
 animation: next-action-trace 1.5s linear infinite;
}
.next-action-ready:not(:disabled):hover { box-shadow: 0 0 0 2px rgba(24, 52, 92, .12); }
.next-action:focus-visible { outline: 3px solid var(--next-cue-color); outline-offset: 3px; }
body.dark .next-action { --next-cue-color: #a9bedc; }
body.dark .next-action-ready:not(:disabled) { background-color: rgba(169, 190, 220, .08); }
/* Match the vocabulary review's blue primary next button. */
#speaking #passed-actions{width:100%;gap:10px}
#speaking #passed-actions #retry-sentence{flex:0 0 auto;min-height:48px;padding:10px 14px;border-radius:12px;font-size:15px}
#speaking #passed-actions #passed-next{flex:1;min-width:0;min-height:48px;padding:10px 20px;border:0;border-radius:12px;background:#0754ed;color:#fff;font-size:17px;font-weight:700}
#speaking #passed-actions #passed-next:not(:disabled):hover{background:var(--brand-navy,#07143f);color:#fff}
#speaking #passed-actions #passed-next:disabled{opacity:.5;cursor:default}
@keyframes next-action-trace { to { --next-cue-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
 .next-action-ready:not(:disabled)::before { animation: none; background: none; }
 .next-action-ready:not(:disabled) { box-shadow: inset 0 0 0 1px var(--next-cue-color); }
}