/* Quiz-taking region copied from Ref/02-pengerjaan-quiz-v4-learning-hub.html.
   Scoped to Quiz; application shell, snapshot data and authorization remain owned by the app. */

.learning-quiz-page-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin:0 0 19px!important;min-height:64px!important}
.learning-quiz-page-head>div:first-child{min-width:0!important;flex:1}
.learning-quiz-page-head h1{font-size:clamp(21px,2.08vw,29px)!important;line-height:1.22!important;letter-spacing:-.045em!important;font-weight:800!important;color:#16233b!important;margin:0!important}
.learning-quiz-page-head p{font-size:11px!important;color:#8191a6!important;margin:8px 0 0!important;line-height:1.35}
.learning-quiz-page-head .head-actions{flex:0 0 auto}
.learning-quiz-page-head .head-actions .btn{border-radius:999px!important;background:#fff!important;border:1px solid #e0e7ef!important;color:#35465c!important;min-height:36px!important;font-size:10px!important;font-weight:700!important;padding:9px 16px!important;display:flex;align-items:center;gap:7px;box-shadow:0 3px 10px -10px #1e3657}
.learning-quiz-page-head .head-actions .btn svg{width:14px;height:14px}
.learning-quiz-shell .btn{border-radius:10px!important;font-size:11px!important;font-weight:750!important;min-height:37px;padding:9px 15px!important;transition:background .15s,border-color .15s,transform .15s}
.learning-quiz-shell .btn-primary{background:#24446a!important;border-color:#24446a!important;color:#fff!important}
.learning-quiz-shell .btn-primary:hover{background:#345d88!important;border-color:#345d88!important}
.learning-quiz-shell{width:100%!important;max-width:none!important;margin:0!important;min-width:0!important}
.learning-quiz-shell>.card{position:relative!important;display:grid!important;grid-template-columns:22px minmax(0,1.06fr) 22px 16px minmax(0,.94fr)!important;grid-template-rows:32px 4px minmax(70px,auto) repeat(var(--quiz-option-count),minmax(51px,auto)) minmax(0,1fr) 46px 15px!important;column-gap:0!important;row-gap:9px!important;align-items:stretch!important;width:100%!important;height:clamp(475px,calc(100dvh - 188px),604px)!important;min-height:0!important;max-height:none!important;margin:0!important;padding:23px 0 0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.learning-quiz-shell>.card::before{content:'';grid-column:1/4;grid-row:1/11;z-index:0;border:1px solid var(--hub-line);border-radius:17px;background:#fff;box-shadow:0 8px 24px -21px #24426747}
.learning-quiz-shell>.card>.quiz-question-head,.learning-quiz-shell>.card>.quiz-progressline,.learning-quiz-shell>.card>h2,.learning-quiz-shell>.card>.quiz-option,.learning-quiz-shell>.card>.quiz-navigation,.learning-quiz-shell>.card>.row-sub{grid-column:2!important;position:relative;z-index:1;min-width:0!important}
.learning-quiz-shell .quiz-question-head{grid-row:1!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;min-height:0!important;margin:0!important}
.learning-quiz-shell .quiz-question-head .badge{background:#f0f5fb!important;border:1px solid #e1eaf4!important;padding:7px 9px!important;border-radius:8px!important;color:#345c88!important;font-size:10px!important;font-weight:800!important}
.learning-quiz-shell .quiz-question-head .mono{font-size:9px!important;color:#90a0b4!important;white-space:nowrap}
.learning-quiz-shell .quiz-progressline{grid-row:2!important;min-height:4px!important;height:4px!important;border-radius:10px!important;background:#eef2f7!important;overflow:hidden!important;margin:0!important}
.learning-quiz-shell .quiz-progressline>span,.learning-quiz-shell .quiz-progressline>div{display:block;height:100%;border-radius:10px;background:#50729a!important}
.learning-quiz-shell>.card>h2{grid-row:3!important;align-self:center!important;font-size:clamp(17px,1.52vw,23px)!important;line-height:1.4!important;letter-spacing:-.03em!important;color:#1b2b44!important;font-weight:800!important;padding:0!important;margin:0!important;max-height:100%;overflow-y:auto;scrollbar-width:thin}
.learning-quiz-shell>.card>h2:before{content:'PERTANYAAN';display:block;font-size:9px;letter-spacing:.13em;color:#54719a;font-weight:800;margin:1px 0 10px!important;line-height:1.2}
.learning-quiz-shell .quiz-option{display:flex!important;align-items:center!important;gap:12px!important;text-align:left;width:100%!important;margin:0!important;padding:8px 12px!important;background:#fff!important;border:1px solid #dfe7f0!important;border-radius:10px!important;color:#40556f!important;font-size:11.5px!important;line-height:1.4!important;font-weight:600!important;box-shadow:none!important;min-height:0!important;max-height:100%;overflow-y:auto;scrollbar-width:thin}
.learning-quiz-shell .quiz-option:hover{background:#f6f9fe!important;border-color:#b7cbe0!important}
.learning-quiz-shell .quiz-option.active{background:#edf5fd!important;border-color:#6b97c5!important;color:#254973!important;box-shadow:inset 0 0 0 1px #a9c7e6!important}
.learning-quiz-shell .quiz-option .badge{display:grid!important;place-items:center!important;flex:0 0 28px;width:28px;height:28px;min-width:28px;padding:0!important;border-radius:7px!important;background:#f4f7fa!important;border:1px solid #e0e7ef!important;color:#7d91a8!important;font-size:10px!important;font-weight:800!important}
.learning-quiz-shell .quiz-option.active .badge{background:#2b527c!important;border-color:#2b527c!important;color:white!important}
.learning-quiz-shell>.card>.quiz-navigation{grid-row:9!important;align-self:end!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:10px 0 0!important;margin:0!important;border-top:1px solid #edf0f4!important}
.learning-quiz-shell>.card>.quiz-navigation .btn{min-height:37px!important;padding:8px 16px!important}
.learning-quiz-shell>.card>.row-sub{grid-row:10!important;font-size:9px!important;color:#9cabbc!important;text-align:left!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learning-quiz-shell>.card>.media-frame{grid-column:5!important;grid-row:1/11!important;display:flex!important;align-items:stretch!important;justify-content:center!important;position:relative!important;z-index:1;min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;overflow:hidden!important;margin:0!important;padding:73px 16px 17px!important;background:#fff!important;border:1px solid var(--hub-line)!important;border-radius:17px!important;box-shadow:0 8px 24px -21px #24426747!important}
.learning-quiz-shell .media-frame:before{content:'Media soal';position:absolute;top:19px;left:17px;color:#213a58;font-size:12px;letter-spacing:-.025em;font-weight:800}
.learning-quiz-shell .media-frame:after{content:'Referensi pendukung pertanyaan';position:absolute;top:39px;left:17px;color:#95a3b5;font-size:10px;font-weight:500}
.learning-quiz-shell .media-frame img,.learning-quiz-shell .media-frame video{display:block!important;width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;object-fit:contain!important;padding:8px!important;background:linear-gradient(135deg,#eef3fb,#d4deed 68%,#f4eee4)!important;border:1px solid #d3deec!important;border-radius:11px!important}
.learning-quiz-shell>.card:not(:has(.media-frame)){grid-template-columns:22px minmax(0,790px) 22px!important;justify-content:center!important}
.learning-quiz-shell>.card:not(:has(.media-frame))::before{grid-column:1/4}
@media(min-width:831px){.learning-quiz-page-head{margin-bottom:14px!important;min-height:60px!important}.learning-quiz-shell>.card{height:clamp(456px,calc(100dvh - 186px),604px)!important}.learning-quiz-shell>.card>.quiz-navigation{overflow:hidden}}
@media(min-width:831px) and (max-height:760px){.learning-quiz-page-head{margin-bottom:10px!important;min-height:52px!important}.learning-quiz-shell>.card{grid-template-rows:29px 4px minmax(58px,auto) repeat(var(--quiz-option-count),minmax(45px,auto)) minmax(0,1fr) 42px 11px!important;row-gap:7px!important;padding-top:18px!important}.learning-quiz-shell .quiz-option{padding:7px 10px!important}.learning-quiz-shell>.card>h2{font-size:17px!important}.learning-quiz-shell>.card>h2:before{margin-bottom:6px!important}}
@media(max-width:830px){.learning-quiz-page-head{min-height:55px!important;margin-bottom:13px!important}.learning-quiz-page-head h1{font-size:21px!important}.learning-quiz-shell>.card{height:auto!important;max-height:none!important;min-height:0!important;grid-template-columns:17px minmax(0,1fr) 17px!important;grid-template-rows:30px 4px auto repeat(var(--quiz-option-count),minmax(48px,auto)) 0px auto 14px auto!important;row-gap:9px!important;padding-top:18px!important}.learning-quiz-shell>.card::before{grid-column:1/4;grid-row:1/11}.learning-quiz-shell>.card>.media-frame{grid-column:1/4!important;grid-row:11!important;margin-top:15px!important;min-height:160px!important;height:clamp(170px,35vw,250px)!important;padding:56px 12px 12px!important}.learning-quiz-shell>.card>.media-frame::before{top:12px}.learning-quiz-shell>.card>.media-frame::after{top:30px}.learning-quiz-shell>.card>h2{font-size:19px!important;max-height:none}.learning-quiz-shell .quiz-option{min-height:48px!important;max-height:none}.learning-quiz-shell>.card>.quiz-navigation{grid-row:9!important}.learning-quiz-shell>.card>.row-sub{grid-row:10!important}.learning-quiz-shell>.card:not(:has(.media-frame)){grid-template-columns:17px minmax(0,1fr) 17px!important}.learning-quiz-shell>.card>.media-frame img,.learning-quiz-shell>.card>.media-frame video{max-height:none!important}}
@media(max-width:520px){.learning-quiz-page-head h1{font-size:19px!important}.learning-quiz-page-head p{font-size:10px!important}.learning-quiz-page-head .head-actions .btn{font-size:9px!important;padding:7px 10px!important;min-height:33px!important}.learning-quiz-shell>.card>h2{font-size:17px!important}.learning-quiz-shell>.card>.quiz-question-head .mono{font-size:8px!important}.learning-quiz-shell .quiz-option{font-size:11px!important}.learning-quiz-shell>.card>.row-sub{font-size:8px!important}}
@media(max-width:830px){
 .learning-quiz-shell>.card:has(.media-frame){grid-template-rows:30px 4px auto 136px repeat(var(--quiz-option-count),minmax(43px,auto)) 0px auto 12px!important;row-gap:8px!important}
 .learning-quiz-shell>.card:has(.media-frame)::before{grid-row:1/12!important}
 .learning-quiz-shell>.card:has(.media-frame)>.media-frame{grid-column:2!important;grid-row:4!important;width:100%!important;height:136px!important;min-height:0!important;margin:0!important;padding:47px 10px 9px!important;border-radius:10px!important;background:#f8fbff!important;box-shadow:none!important}
 .learning-quiz-shell>.card:has(.media-frame)>.media-frame:before{top:9px;left:11px;font-size:10px}
 .learning-quiz-shell>.card:has(.media-frame)>.media-frame:after{top:24px;left:11px;font-size:9px}
 .learning-quiz-shell>.card:has(.media-frame)>.quiz-navigation{grid-row:10!important}
 .learning-quiz-shell>.card:has(.media-frame)>.row-sub{grid-row:11!important}
 .learning-quiz-shell>.card:not(:has(.media-frame)){grid-template-rows:30px 4px auto repeat(var(--quiz-option-count),minmax(48px,auto)) 0px auto 14px!important}
}
@media(min-width:831px){
 .learning-quiz-shell>.card:has(.quiz-empty-reference){grid-template-columns:22px minmax(0,1.06fr) 22px 16px minmax(0,.94fr)!important;justify-content:stretch!important}
 .learning-quiz-shell>.card:has(.quiz-empty-reference)::before{grid-column:1/4!important}
}
.learning-quiz-shell .quiz-empty-reference{position:relative;z-index:1;grid-column:5!important;grid-row:1/11!important;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0;padding:19px 16px 16px;background:#fff;border:1px solid var(--hub-line);border-radius:17px;box-shadow:0 8px 24px -21px #24426747}
.learning-quiz-shell .quiz-empty-reference strong{font-size:12px;color:#213a58;letter-spacing:-.025em;font-weight:800}
.learning-quiz-shell .quiz-empty-reference>small{font-size:10px;color:#95a3b5;line-height:1.5}
.learning-quiz-shell .quiz-empty-state{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;margin-top:19px;background:linear-gradient(135deg,#eef3fb,#d6e1ef 65%,#f4ebde);border:1px solid #cfdbe9;border-radius:11px;color:#6d83a1}
.learning-quiz-shell .quiz-empty-state svg{width:38px;height:38px;stroke:#6b83a4}
.learning-quiz-shell .quiz-empty-state b{font-size:11px;font-weight:750;color:#4e6789}
.learning-quiz-shell .quiz-empty-state span{font-size:10px;color:#8da0b8}
@media(max-width:830px){.learning-quiz-shell .quiz-empty-reference{display:none!important}}
/* Snapshot IDs/data stay in Vue; only valid option count changes the reference grid. */
.learning-quiz-shell>.card>.quiz-option{grid-row:calc(var(--quiz-option-row) + var(--quiz-media-row-offset,0))!important}
.learning-quiz-shell>.card>.quiz-navigation{grid-row:calc(var(--quiz-navigation-row) + var(--quiz-media-row-offset,0))!important}
.learning-quiz-shell>.card>.quiz-answer-note{grid-row:calc(var(--quiz-hint-row) + var(--quiz-media-row-offset,0))!important}
.learning-quiz-shell>.card::before,.learning-quiz-shell>.card>.media-frame,.learning-quiz-shell>.card>.quiz-empty-reference{grid-row:1/-1!important}
.learning-quiz-shell>.learning-quiz-card--extended{height:auto!important;min-height:clamp(456px,calc(100dvh - 186px),604px);grid-template-rows:32px 4px minmax(70px,auto) repeat(var(--quiz-option-count),minmax(51px,auto)) minmax(20px,1fr) 46px 15px!important}
.learning-quiz-shell .quiz-option:disabled{cursor:default;opacity:1}
.learning-quiz-shell .quiz-navigation .btn:disabled{cursor:not-allowed;transform:none}
.learning-quiz-shell .learning-option-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.learning-quiz-shell .learning-correct-label{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--mint700)}
.learning-quiz-shell .learning-correct-label svg{width:14px;height:14px}
.learning-quiz-shell .quiz-option.learning-option-correct{border-color:var(--mint500)!important;background:var(--mint50)!important}
.learning-quiz-shell .quiz-option.learning-option-correct .badge{background:var(--mint100)!important;color:var(--mint700)!important}
.learning-quiz-shell>.card>h2{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:830px){.learning-quiz-shell>.card:has(.media-frame){--quiz-media-row-offset:1}.learning-quiz-shell>.learning-quiz-card--extended{min-height:0;grid-template-rows:30px 4px auto repeat(var(--quiz-option-count),minmax(48px,auto)) 0px auto 14px!important}.learning-quiz-shell>.learning-quiz-card--extended:has(.media-frame){grid-template-rows:30px 4px auto 136px repeat(var(--quiz-option-count),minmax(43px,auto)) 0px auto 12px!important}}