.spelling-path { color: #1d3557; }
.spelling-path .math-round__progress { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; margin-bottom:1.5rem; }
.sb-grade { display:inline-flex; align-items:center; gap:1rem; border:1px solid #bedad7; border-radius:2rem; padding:.3rem; }
.sb-grade button { border:1px solid #afcbcc; border-radius:50%; width:2.25rem; height:2.25rem; background:#fff; color:#247d79; }
.sb-grade button:disabled { opacity:.35; }
.sb-areas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin-top:1.5rem; }
.sb-area { background:#fff; border:1px solid #c8dce9; padding:1.5rem; border-radius:1.25rem; min-width:0; }
.sb-area h3 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; font-size:1.25rem; }
.sb-area h3 strong { color:#237f7a; }
.sb-area progress { width:100%; height:.75rem; accent-color:#33867c; }
.sb-area dl { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin:1rem 0; }
.sb-area dt { color:#637c90; } .sb-area dd { margin:0; overflow-wrap:anywhere; }
.sb-area form { margin-bottom:.75rem; }
.sb-link { border:0; padding:0; background:transparent; text-align:left; }
.sb-goal { padding:2rem; background:#eff9f6; border-bottom:1px solid #c9e2de; }
.sb-listening,.sb-tabs { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.5rem 0; }
.sb-listening [data-audio-status] { flex-basis:100%; margin:0; }
.sb-listening [data-audio-status]:empty { display:none; }
.sb-choice-with-audio { display:flex; align-items:stretch; gap:.5rem; min-width:0; }
.sb-choice-with-audio>label { flex:1; min-width:0; margin:0; }
.sb-choice-with-audio>.sb-choice-audio { align-self:center; flex:0 0 auto; min-height:44px; padding:.5rem; white-space:nowrap; }
.sb-choice-audio:focus-visible { outline:3px solid #287f8d; outline-offset:3px; }
.spelling-path .math-round__hint summary { cursor:pointer; font-weight:700; }
.spelling-path .math-round__hint p { margin:1rem 0 0; }
.sb-result-correct { background:#e3f5ec; color:#08704e; }
.sb-result-incorrect { background:#fdebf0; color:#ad2243; }
.sb-word-clues { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.sb-word-clues details { flex:1 1 12rem; padding:1rem; background:#f5f8fa; border-radius:.75rem; }
.sb-word-clues summary { cursor:pointer; font-weight:700; }
.sb-word-clues p { margin-top:.75rem; }
.sb-spelling-input { font-size:1.4rem; padding:1rem; margin:.5rem 0 1rem; max-width:36rem; }
.sb-feedback { padding:1rem; margin:1rem 0; background:#eff9f6; border-radius:.75rem; }
.sb-feedback.is-retry { background:#fff7e6; border:1px solid #edce8e; }
.sb-result-badge { display:inline-block; padding:.3rem .75rem; border-radius:2rem; margin:.3rem 0 .3rem .5rem; font-weight:800; font-size:.95rem; }
.sb-result-badge.is-correct,.sb-result-stats > .is-correct { background:#e3f5ec; color:#08704e; }
.sb-result-badge.is-incorrect,.sb-result-stats > .is-incorrect { background:#fdebf0; color:#ad2243; }
.sb-result-badge.is-skipped,.sb-result-stats > .is-skipped { background:#fff3d9; color:#87520a; }
.sb-result-stats > div strong { color:inherit; } .sb-result-stats { text-align:center; }
.spelling-path .math-round__score { font-size:3rem; font-weight:800; color:#237f7a; margin:1rem 0; }
.spelling-path .math-round__buttons form { margin:0; min-width:0; max-width:100%; }
.spelling-path .math-round__buttons .btn { white-space:normal; overflow-wrap:anywhere; }
.sb-day-answers { scroll-margin-top:8rem; }
.sb-day-answers summary > span { display:inline-block; margin-left:1rem; font-weight:400; }
.sb-day-answer { padding:.75rem 0; border-top:1px solid #dce6ed; }
.sb-day-answer:first-of-type { margin-top:1rem; } .sb-day-answer p { margin:.5rem 0; overflow-wrap:anywhere; }
.sb-review-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; margin:1.5rem 0; }
.sb-review-grid button { border:2px solid #cfdaeb; border-radius:1rem; padding:1rem .5rem; background:#fff; color:inherit; display:grid; gap:.5rem; }
.sb-review-grid .is-answered { background:#edf9f5; border-color:#70b9aa; }
.sb-answer-review { margin:1rem 0; padding:1rem; border:1px solid #cfdaeb; border-radius:.75rem; }
.sb-answer-review summary { font-weight:700; cursor:pointer; } .sb-answer-review p { margin:1rem 0; }
.sb-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.sb-stats > div { padding:1.25rem; background:#f1faf7; border-radius:1rem; } .sb-stats span,.sb-stats strong { display:block; } .sb-stats strong { font-size:2rem; color:#187e79; }
.sb-chart { overflow-x:auto; margin:2rem 0; padding:2.5rem .5rem 1rem; }
.sb-chart-plot { display:flex; align-items:flex-end; gap:1.5rem; border-bottom:1px solid #bed0df; min-height:265px; width:max-content; min-width:100%; padding:0 1rem .75rem; }
.sb-bar-column { width:100px; flex:0 0 100px; text-align:center; text-decoration:none; color:inherit; }
.sb-bar-column span,.sb-bar-column small { display:block; margin-top:.5rem; }
.sb-bar-space { height:225px; display:flex; align-items:flex-end; justify-content:center; }
.sb-bar { min-height:2px; position:relative; width:70px; background:#3b8d82; border-radius:.6rem .6rem 0 0; }
.sb-bar strong { position:absolute; bottom:100%; left:0; right:0; padding-bottom:.5rem; font-size:1.1rem; }
.sb-spaced { margin-top:1.5rem; }
.spelling-path .sb-goal-result { text-decoration:none; }
.spelling-path .tp-mmGoal__action form { margin:0; min-width:0; }
@media(max-width:520px) { .spelling-path .tp-mmGoal__action form { width:100%; } }
.sb-goal-form { max-width:850px; } .sb-goal-form label { display:block; font-weight:700; margin:1.25rem 0 .5rem; }
.sb-goal-form > p { margin:1.5rem 0; }
@media(max-width:640px) { .sb-areas,.sb-stats { grid-template-columns:1fr; } .sb-review-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .sb-goal { padding:1.25rem; } }