/* Four optional practice entries, balanced on desktop and compact on phones. */
html body #app .study-mode-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body #app .study-mode-smart .study-mode-art{color:var(--brand)!important;background:var(--card)!important;border:1px solid var(--line)!important;border-radius:18px;display:grid;place-items:center}
html body #app .study-mode-smart .study-mode-art svg{width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:651px) and (max-width:1100px){html body #app .study-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){html body #app .study-mode-grid{grid-template-columns:1fr!important}}
html[data-smart-review][data-theme] body,html[data-smart-review][data-theme] body #app{background:var(--sr-bg,var(--bg))!important;background-image:none!important;color:var(--sr-ink,var(--ink))!important}
html[data-smart-review][data-theme] body #app #main-content{max-width:1220px!important;padding:20px 26px calc(var(--app-nav-height,80px) + 28px)!important;background:var(--sr-bg,var(--bg))!important;box-sizing:border-box}
html[data-smart-review][data-theme] body #app #main-content .sr-shell{max-width:1130px;margin:0 auto;color:var(--sr-ink,var(--ink))!important;font-family:NunitoStudent,system-ui,sans-serif;line-height:1.5}
html[data-smart-review][data-theme] body #app #main-content .sr-shell :is(h1,h2,p,small,strong,span,div){color:inherit!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important}
html[data-smart-review][data-theme] body #app #main-content .sr-shell h1{font:800 clamp(24px,2.8vw,36px)/1.25 NunitoStudent,system-ui,sans-serif!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;margin:16px 0 7px!important;letter-spacing:0!important}
html[data-smart-review][data-theme] body #app #main-content .sr-shell h2{font:800 23px/1.3 NunitoStudent,system-ui,sans-serif!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;margin:7px 0 12px!important}
.sr-shell svg,.sr-picker svg{width:22px;height:22px;min-width:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-header{margin-bottom:23px}.sr-header>p{margin:0!important;font-size:16px!important}.sr-topline{display:flex;align-items:center;justify-content:space-between;gap:14px}.sr-eyebrow{font-size:11px!important;font-weight:800;letter-spacing:1.1px}.sr-topline>.study-music-toggle{width:42px!important;height:42px!important;min-width:42px!important;margin:0!important}
html[data-smart-review][data-theme] body #app #main-content .sr-back{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--sr-line)!important;border-radius:9px;background:var(--sr-card)!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;padding:8px 11px;min-height:42px;font:700 14px NunitoStudent,system-ui,sans-serif!important;box-shadow:none!important}
.sr-home-grid,.sr-result-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);gap:20px;align-items:start}.sr-home-main{display:grid;gap:16px;min-width:0}
html[data-smart-review][data-theme] body #app #main-content .sr-card{display:block;box-sizing:border-box;min-width:0;border:1px solid var(--sr-line)!important;border-radius:16px;background:var(--sr-card)!important;color:var(--sr-ink)!important;padding:22px;box-shadow:none!important}
.sr-card p{margin:9px 0 0!important;font-size:15px!important}.sr-today{display:flex!important;gap:24px;align-items:center}.sr-brain{display:grid;place-items:center;color:var(--sr-mark)!important;flex:0 0 70px}.sr-brain svg{width:58px!important;height:58px!important;stroke-width:1.3}.sr-total{display:block;font-size:60px!important;font-weight:850;line-height:1.1;margin:8px 0}
.sr-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sr-stats .sr-card{padding:17px!important}.sr-stats strong{display:block;font-size:33px!important;line-height:1.3}.sr-stats span{display:block;font-size:13px!important;margin-top:4px}.sr-next{display:flex!important;flex-direction:column;gap:12px}.sr-next h2{font-size:30px!important}.sr-tag{display:inline-flex;width:max-content;padding:5px 12px;border:1px solid var(--sr-line);border-radius:9px;background:var(--sr-soft);color:var(--sr-soft-ink)!important;font-size:13px!important}.sr-small,.sr-footnote{font-size:12px!important;line-height:1.6!important}.sr-footnote{margin:20px 0 0!important;text-align:center}.sr-saved h2{font-size:18px!important}.sr-saved button{margin-top:15px!important}
html[data-smart-review][data-theme] body #app #main-content .sr-book-trigger{display:flex;align-items:center;text-align:left;gap:15px;width:100%;box-sizing:border-box;min-height:92px;padding:12px 16px;margin:0;border:1px solid var(--sr-line)!important;border-radius:13px;background:var(--sr-card)!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;box-shadow:none!important}
.sr-book-trigger img{width:45px!important;height:63px!important;object-fit:contain;border-radius:3px;flex:0 0 45px}.sr-book-trigger>span{flex:1;min-width:0}.sr-book-trigger strong,.sr-book-trigger small{display:block;white-space:normal}.sr-book-trigger strong{font-size:17px!important;line-height:1.35!important;margin:2px 0}.sr-book-trigger small{font-size:12px!important}
html[data-smart-review][data-theme] body #app #main-content .sr-shell :is(.sr-primary,.sr-secondary){display:flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:11px 17px;border:1px solid #b62043!important;border-radius:11px;background:#b62043!important;color:#fff8ef!important;-webkit-text-fill-color:#fff8ef!important;box-shadow:none!important;font:800 16px/1.3 NunitoStudent,system-ui,sans-serif!important;text-align:center;cursor:pointer}
html[data-smart-review][data-theme] body #app #main-content .sr-shell .sr-secondary{background:var(--sr-card)!important;border-color:var(--sr-line)!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important}
html[data-smart-review][data-theme] body #app #main-content .sr-shell button:disabled{cursor:default;opacity:.68}
html[data-smart-review][data-theme] body #app #main-content .sr-shell button:focus-visible,.sr-picker button:focus-visible{outline:3px solid var(--sr-mark);outline-offset:3px}
.sr-progress-copy{display:flex;justify-content:space-between;gap:14px;font-size:13px!important;margin-bottom:7px}.sr-progress{height:7px;border:1px solid var(--sr-line);border-radius:20px;background:var(--sr-card);overflow:hidden}.sr-progress>span{display:block;height:100%;background:var(--sr-mark)}.sr-phase{display:inline-block;margin:18px 0 13px;padding:5px 10px;border:1px solid var(--sr-line);border-radius:7px;font-size:10px!important;font-weight:800;letter-spacing:1px}.sr-play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.sr-answer-pane{display:flex;flex-direction:column;gap:14px;min-width:0}.sr-question small{display:block;font-size:13px!important;margin-bottom:18px;color:var(--sr-muted)!important}.sr-question>div{font-size:clamp(20px,1.7vw,25px)!important;font-weight:750;line-height:1.6!important;white-space:normal;overflow-wrap:anywhere}.sr-recall{display:flex!important;align-items:center;gap:18px}.sr-recall p{margin:0!important;font-size:17px!important}.sr-recall .sr-brain{flex-basis:45px}.sr-recall svg{width:40px!important;height:40px!important}.sr-actions{display:flex;flex-direction:column;gap:10px}.sr-options{display:grid;gap:10px}
html[data-smart-review][data-theme] body #app #main-content .sr-option{display:flex;align-items:center;text-align:left;gap:12px;width:100%;min-width:0;box-sizing:border-box;min-height:64px;border:1px solid var(--sr-line)!important;border-radius:12px;padding:13px 15px;background:var(--sr-card)!important;color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;font:700 17px/1.5 NunitoStudent,system-ui,sans-serif!important;box-shadow:none!important;opacity:1!important;white-space:normal;overflow-wrap:anywhere}
.sr-letter{display:grid;place-items:center;flex:0 0 31px;width:31px;height:34px;border:1px solid var(--sr-line);border-radius:7px;font-size:14px!important}.sr-answer-label{margin-left:auto;font-size:11px!important;flex:0 0 auto}
html[data-smart-review][data-theme] body #app #main-content .sr-option.is-correct{background:var(--sr-mark-bg)!important;color:var(--sr-mark)!important;-webkit-text-fill-color:var(--sr-mark)!important;border:2px solid var(--sr-mark)!important;padding:12px 14px}
html[data-smart-review][data-theme] body #app #main-content .sr-option.is-wrong{background:var(--sr-error-bg)!important;color:var(--sr-error)!important;-webkit-text-fill-color:var(--sr-error)!important;border-color:var(--sr-error)!important}
.sr-feedback strong{font-size:18px!important}.sr-feedback small{display:block;margin-top:12px;font-size:13px!important}.sr-feedback p{font-weight:750!important}.sr-result-check{display:grid;place-items:center;width:54px;height:54px;border:2px solid var(--sr-mark);border-radius:50%;color:var(--sr-mark)!important;margin-bottom:20px}.sr-result-check svg{width:34px;height:34px}.sr-result-counts>div{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--sr-line);padding:17px 0}.sr-result-counts>div:last-child{border-bottom:0}.sr-result-counts strong{display:grid;place-items:center;min-width:46px;height:46px;border:1px solid var(--sr-line);border-radius:50%;font-size:28px!important}.sr-result-counts span{font-size:18px!important;font-weight:750}.sr-upcoming>div{display:flex;align-items:center;gap:11px;padding:16px 0;border-bottom:1px solid var(--sr-line);font-size:14px!important}.sr-upcoming strong{margin-left:auto;font-size:13px!important}.sr-notice{border:1px solid var(--sr-error);border-radius:9px;padding:12px!important;background:var(--sr-error-bg)!important;color:var(--sr-error)!important}
/* Compact cover picker. Theme tokens are shared with the review screen. */
html[data-smart-review][data-theme] body dialog.sr-picker{display:flex;flex-direction:column;box-sizing:border-box;width:min(430px,calc(100vw - 28px));max-width:430px;max-height:min(76dvh,640px);padding:0;margin:auto;border:1px solid var(--sr-line)!important;border-radius:17px;background:var(--sr-card)!important;color:var(--sr-ink)!important;box-shadow:0 18px 65px #0006;overflow:hidden;font-family:NunitoStudent,system-ui,sans-serif}
html[data-smart-review][data-theme] body dialog.sr-picker:not([open]){display:none}.sr-picker::backdrop{background:#0b14147a;backdrop-filter:blur(3px)}
html[data-smart-review][data-theme] body dialog.sr-picker :is(h2,strong,small,span,footer){color:var(--sr-ink)!important;-webkit-text-fill-color:var(--sr-ink)!important;text-shadow:none!important}
.sr-picker>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid var(--sr-line);flex:none}.sr-picker>header small{font-size:9px!important;letter-spacing:1px}.sr-picker>header h2{font-size:19px!important;line-height:1.3!important;margin:4px 0 0!important}.sr-picker>header button{display:grid;place-items:center;width:36px;height:36px;min-width:36px;border:1px solid var(--sr-line)!important;border-radius:8px;background:var(--sr-card)!important;color:var(--sr-ink)!important}
.sr-picker-list{padding:9px 12px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.sr-picker-option{display:flex;align-items:center;text-align:left;gap:12px;width:100%;box-sizing:border-box;margin:5px 0!important;padding:9px 10px!important;min-height:72px;border:1px solid var(--sr-line)!important;border-radius:10px;background:var(--sr-card)!important;color:var(--sr-ink)!important;box-shadow:none!important}
.sr-picker-option img{display:block;width:35px!important;height:49px!important;object-fit:contain;flex:0 0 35px;border-radius:2px}.sr-picker-option>span:nth-of-type(1){flex:1;min-width:0}.sr-picker-option strong{display:block;font:800 13px/1.35 NunitoStudent,system-ui,sans-serif!important;white-space:normal}.sr-picker-option small{display:block;font:500 11px/1.4 NunitoStudent,system-ui,sans-serif!important;margin-top:3px}.sr-picker-check{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border:1px solid var(--sr-line);border-radius:50%;font-size:13px!important}.sr-picker-option[aria-pressed=true]{outline:2px solid var(--sr-mark);outline-offset:-2px;background:var(--sr-soft)!important}.sr-picker>footer{font-size:11px!important;line-height:1.5;padding:11px 18px;border-top:1px solid var(--sr-line);flex:none}
@media(max-width:900px){.sr-home-grid,.sr-result-grid,.sr-play-grid{grid-template-columns:minmax(0,1fr);gap:16px}.sr-home-main{gap:12px}.sr-header{margin-bottom:18px}.sr-stats{gap:10px}.sr-today{gap:16px}.sr-total{font-size:48px!important}.sr-brain{flex-basis:49px}.sr-brain svg{width:44px!important;height:44px!important}.sr-topline{gap:8px}.sr-answer-label{display:none}}
@media(max-width:500px){html[data-smart-review][data-theme] body #app #main-content{padding:14px 14px calc(var(--app-nav-height,80px) + 20px)!important}html[data-smart-play][data-theme] body #app #main-content{padding-bottom:25px!important}.sr-topline>.sr-eyebrow{font-size:9px!important}.sr-header>p{font-size:14px!important}.sr-card{padding:18px!important}.sr-question>div{font-size:20px!important}.sr-next h2{font-size:25px!important}.sr-stats span{font-size:12px!important}.sr-book-trigger{gap:11px!important}.sr-book-trigger strong{font-size:15px!important}.sr-book-trigger small{font-size:11px!important}.sr-total{font-size:44px!important}}
@media(prefers-reduced-motion:reduce){.sr-shell *,.sr-picker *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep theme changes readable throughout the transition. */
html[data-smart-review] .sr-shell button,html[data-smart-review] .sr-picker button{transition:none!important}
@media(min-width:901px){html[data-smart-review][data-pwa="desktop"] body #app #main-content{padding-bottom:32px!important}}

html body #app .study-mode-smart .study-mode-art{background:#dcecf4!important;color:#2d5465!important;border-color:#8ca9b8!important;border-radius:13px}
html body #app .study-mode-smart .study-mode-art svg{width:29px!important;height:29px!important}
@media(max-width:900px){.sr-home-grid{display:flex;flex-direction:column;align-items:stretch}.sr-home-main{display:contents}.sr-home-grid .sr-book-trigger{order:0}.sr-home-grid .sr-today{order:1}.sr-home-grid .sr-saved{order:2}.sr-home-grid>.sr-next{order:3}.sr-home-grid .sr-stats{order:4}}