/* Preserve hidden access/login surfaces at every breakpoint. */
#app.hidden{display:none!important}
/* The workspace uses a drawer on tablet widths; desktop and guest layouts stay independent. */
body.authenticated main.wrap,#app,#app>.page{min-width:0;max-width:100%;box-sizing:border-box}
#result,#result .resultReview,#result :is(.resultHero,.resultStats,.resultStat,.resultFilters,.correctionCard,.answerOptions,.answerOption,.answerCompare,.answerBox,.explanationBox){min-width:0;max-width:100%;box-sizing:border-box}
#result .resultStats{grid-template-columns:repeat(4,minmax(0,1fr))}
#result .resultStat>div{min-width:0}
#result .resultStatIcon{flex-shrink:0}
#result .resultFilters{display:flex!important;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-inline:0!important}
#result :is(.resultFilterGroup,.resultQuestionNav){display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
#result .resultFilters .btn{min-width:0;max-width:100%;white-space:normal!important;word-break:normal;overflow-wrap:break-word;line-height:1.5!important}
#result .answerOption>span:nth-child(2){min-width:0;overflow-wrap:break-word;white-space:normal}
#result :is(.correctionQuestion,.explanationText,.correctionSource,.answerBox,.resultHero p){white-space:normal;word-break:normal;overflow-wrap:break-word}
#result :is(img,svg,video){max-width:100%;height:auto}
@media(max-width:1180px),(max-width:1366px) and (hover:none) and (pointer:coarse){
 body.authenticated .top,body.authenticated .top .wrap{height:72px!important;min-height:72px!important;z-index:100!important;padding:0!important}
 body.authenticated .top .wrap{padding:0 18px!important;gap:14px}
 body.authenticated .topRight{display:none!important}
 body.authenticated .brand{min-width:0}
 body.authenticated .brand img{width:min(220px,60vw)!important;height:auto!important;max-height:48px!important;object-fit:contain}
 body.authenticated .mobileMenuToggle{display:flex;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;width:46px;height:46px;border:1px solid #c5d8ed;border-radius:12px;background:#f0f6ff;color:#12385c;padding:12px}
 body.authenticated .mobileMenuToggle span{display:block;height:2px;width:20px;background:currentColor;border-radius:2px}
 body.authenticated.mobileMenuOpen .mobileMenuToggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 body.authenticated.mobileMenuOpen .mobileMenuToggle span:nth-child(2){opacity:0}
 body.authenticated.mobileMenuOpen .mobileMenuToggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 body.authenticated .mobileMenuBackdrop:not([hidden]){display:block;position:fixed;inset:72px 0 0;z-index:90;border:0;background:#071b3480;backdrop-filter:blur(3px)}
 body.authenticated #app:not(.hidden){display:block!important;grid-template-columns:minmax(0,1fr)!important;width:100%;padding:0!important}
 body.authenticated #app>.page{grid-column:1/-1;width:100%;padding:24px clamp(16px,3vw,28px) 36px!important;margin-inline:auto}
 body.authenticated #appNavigation{display:flex!important;position:fixed!important;top:72px!important;right:0!important;left:auto!important;bottom:0!important;width:min(340px,88vw)!important;max-width:100vw;height:calc(100vh - 72px)!important;height:calc(100dvh - 72px)!important;flex-direction:column!important;gap:6px!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 18px max(24px,env(safe-area-inset-bottom))!important;background:white!important;border:0!important;border-left:1px solid #dce5ef!important;border-radius:0!important;box-shadow:-16px 0 45px #071b3425!important;z-index:95!important;transform:translateX(110%)!important;visibility:hidden;transition:transform .24s,visibility .24s}
 body.authenticated.mobileMenuOpen #appNavigation{transform:translateX(0)!important;visibility:visible}
 body.authenticated.mobileMenuOpen{overflow:hidden}
 body.authenticated #appNavigation button{display:flex!important;align-items:center;width:100%!important;min-width:0!important;min-height:48px!important;padding:12px!important;white-space:normal!important;flex-shrink:0;transform:none!important}
 body.authenticated #appNavigation .navTitle{display:block!important}
 body.authenticated #appNavigation .navUser{display:flex!important}
 body.authenticated #appNavigation .navQuote{display:none!important}
 body.authenticated #trialNotice{grid-column:auto;margin:16px!important}
 #app :is(.card,.reviewCard,.grid>*,.grid4>*,.q){min-width:0;max-width:100%;box-sizing:border-box}
 #result .resultHero{display:block}
 #result .resultHero h2{font-size:clamp(25px,3.2vw,32px)!important;line-height:1.3!important}
 #result .resultStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #result .resultStat{padding:16px!important;border-bottom:1px solid var(--line);gap:12px}
 #result .resultStat:nth-child(2n){border-right:0}
 #result .resultStat:nth-last-child(-n+2){border-bottom:0}
 #result .resultStatIcon{width:40px!important;height:40px!important;font-size:21px!important}
 #result .resultFilters{align-items:stretch;gap:12px}
 #result .resultFilterGroup{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #result .resultQuestionNav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #result .resultFilters .btn{width:100%;padding:10px 8px!important;min-height:46px}
 #result .correctionCard{padding:18px!important}
 #result .correctionHead{flex-wrap:wrap;gap:10px}
 #result .answerOption{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px 10px;align-items:start}
 #result .answerLetter{grid-column:1;white-space:nowrap}
 #result .answerTag{grid-column:2;justify-self:start;margin:2px 0 0;max-width:100%;white-space:normal}
 #result .correctionQuestion{font-size:18px!important;line-height:1.65!important}
}
@media(max-width:900px){
 #result .answerCompare,#result .timerResult{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:520px){
 body.authenticated #app>.page{padding-inline:14px!important}
 #result .resultStat{padding:12px!important;gap:8px}
 #result .resultStatIcon{width:32px!important;height:32px!important;font-size:18px!important}
 #result .resultStat b{font-size:22px!important}
 #result .resultStat small{font-size:12px!important}
 #result .resultFilters .btn{font-size:12px!important;padding-inline:5px!important}
 #result .correctionCard{padding:14px!important}
}
@media(prefers-reduced-motion:reduce){body.authenticated #appNavigation{transition:none!important}}