/* OMI Pro V23 — functional polish + precise responsive controls */
:root{
  --v23-green:#076a55;--v23-green2:#0b8a6c;--v23-blue:#187fc1;--v23-gold:#c78b1b;--v23-red:#b64b55;
  --v23-ink:#162821;--v23-muted:#6f7f79;--v23-line:#dbe6e1;--v23-card:#fff;
  --v23-shadow:0 8px 24px rgba(22,54,45,.075);
}

/* One true app header: back, identity, title, audio and menu always share one horizontal row. */
#omi-fixed-header{
  height:calc(58px + var(--omi-safe-top,0px))!important;min-height:58px!important;
  grid-template-columns:auto auto minmax(0,1fr) auto auto!important;
  grid-auto-flow:column!important;align-items:center!important;gap:6px!important;
  padding:var(--omi-safe-top,0px) max(9px,env(safe-area-inset-right)) 0 max(9px,env(safe-area-inset-left))!important;
  overflow:visible!important;z-index:1300!important;
}
#omi-fixed-header .omi-back,#omi-fixed-header .omi-sound-toggle,#omi-fixed-header .omi-menu-toggle{
  grid-column:auto!important;position:static!important;inset:auto!important;transform:none!important;float:none!important;
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:13px!important;
  display:grid!important;place-items:center!important;margin:0!important;
  background:linear-gradient(145deg,#fbfdfc,#e8f3ef)!important;border:1px solid #dce8e3!important;
  box-shadow:0 4px 10px rgba(29,67,57,.07),inset 0 1px 0 #fff!important;color:var(--v23-green)!important;
}
#omi-fixed-header .omi-menu-toggle{background:linear-gradient(145deg,#e9f7f2,#dcefe8)!important}
#omi-fixed-header .omi-sound-toggle svg,#omi-fixed-header .omi-menu-toggle svg,#omi-fixed-header .omi-back svg{width:21px!important;height:21px!important}
#omi-fixed-header .omi-brand-link{min-width:40px!important;max-width:max-content!important;padding:2px!important;border:0!important;background:transparent!important;box-shadow:none!important}
#omi-fixed-header .omi-brand-link img{width:38px!important;height:38px!important;border-radius:12px!important}
#omi-fixed-header .omi-page-name{font-size:13px!important;font-weight:900!important;color:#556962!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-width:430px){
  #omi-fixed-header{grid-template-columns:auto auto minmax(0,1fr) auto auto!important;gap:5px!important}
  #omi-fixed-header .omi-sound-toggle{display:grid!important}
  #omi-fixed-header .omi-menu-toggle{grid-column:auto!important}
  #omi-fixed-header .omi-brand-link span{display:none!important}
  #omi-fixed-header .omi-page-name{font-size:11.5px!important}
  #omi-fixed-header .omi-back,#omi-fixed-header .omi-sound-toggle,#omi-fixed-header .omi-menu-toggle{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:12px!important}
  #omi-fixed-header .omi-brand-link img{width:35px!important;height:35px!important}
}
@media(max-width:350px){#omi-fixed-header .omi-page-name{font-size:10.5px!important}.omi-brand-link{display:none!important}}
body.omi-layout{padding-top:calc(58px + var(--omi-safe-top,0px))!important}
@media(min-width:900px){body.omi-layout{padding-top:calc(112px + var(--omi-safe-top,0px))!important}.omi-primary-nav{top:calc(58px + var(--omi-safe-top,0px))!important}}

/* Pusat Belajar — denser, balanced, no brochure gaps. */
.guidance-main{max-width:1120px!important;padding-top:10px!important}
.guidance-hero{display:none!important}
.subject-section{margin-top:0!important}
.subject-section>.section-heading{margin-bottom:8px!important}
.guidance-grid{gap:10px!important}
.guidance-card{min-height:112px!important;padding:13px!important;align-items:center!important;box-shadow:var(--v23-shadow)!important}
.guidance-card .subject-mark{align-self:center!important}
.guidance-card>b{min-width:72px!important;justify-content:center!important}
.learning-secondary{margin-top:10px!important}
.guidance-method{margin:14px 0 0!important;padding:14px!important;border:1px solid var(--v23-line)!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--v23-shadow)!important}
.guidance-method .section-heading{margin-bottom:9px!important}
.step-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;counter-reset:steps!important}
.step-list li{counter-increment:steps!important;min-height:76px!important;padding:10px!important;display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;border:1px solid var(--v23-line)!important;border-radius:15px!important;background:linear-gradient(180deg,#fff,#f9fbfa)!important;box-shadow:none!important;position:relative!important}
.step-list li::before{content:counter(steps)!important;position:static!important;width:36px!important;height:36px!important;border-radius:12px!important;background:linear-gradient(145deg,#e6f7f0,#d4efe5)!important;color:var(--v23-green)!important;display:grid!important;place-items:center!important;font-weight:950!important;font-size:13px!important;box-shadow:inset 0 1px 0 #fff,0 4px 9px rgba(7,106,85,.08)!important}
.step-list .step-copy{min-width:0!important;display:block!important}
.step-list .step-copy b{display:block!important;font-size:13px!important;line-height:1.2!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.step-list .step-copy span{display:block!important;margin-top:2px!important;font-size:11.5px!important;line-height:1.35!important;color:var(--v23-muted)!important;overflow-wrap:normal!important;word-break:normal!important}
@media(max-width:820px){.step-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){
  .guidance-method{padding:12px!important}.step-list{grid-template-columns:1fr!important;gap:6px!important}
  .step-list li{min-height:62px!important;padding:8px 9px!important;grid-template-columns:34px minmax(0,1fr)!important}.step-list li::before{width:32px!important;height:32px!important;border-radius:10px!important}
  .step-list .step-copy b{font-size:12.5px!important}.step-list .step-copy span{font-size:11px!important}
}

/* Question footer — icon-only, single row, compact, touch-safe, semi-3D. */
body.legacy-app .q-nav,body.omi-exam-active .exam-actions,body.omi-secure-exam .exam-actions{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  min-height:58px!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
  grid-template-columns:none!important;flex-wrap:nowrap!important;
  background:rgba(255,255,255,.985)!important;border:1px solid #dbe6e1!important;border-bottom:0!important;border-radius:18px 18px 0 0!important;
  box-shadow:0 -6px 18px rgba(20,49,40,.055)!important;
}
body.legacy-app .q-nav .nav-mid{display:none!important}
body.legacy-app .q-nav button,body.omi-exam-active .exam-actions .btn,body.omi-secure-exam .exam-actions .btn{
  position:relative!important;display:grid!important;place-items:center!important;flex:1 1 0!important;min-width:0!important;max-width:92px!important;
  width:auto!important;height:46px!important;min-height:46px!important;padding:0!important;margin:0!important;border-radius:14px!important;
  font-size:0!important;line-height:0!important;overflow:hidden!important;
  border:1px solid #dbe5e1!important;background:linear-gradient(145deg,#fff,#eef4f2)!important;color:#50625c!important;
  box-shadow:0 5px 10px rgba(34,62,54,.08),inset 0 1px 0 #fff!important;transform:translateZ(0)!important;
}
body.legacy-app .q-nav button::before,body.omi-exam-active .exam-actions .btn::before,body.omi-secure-exam .exam-actions .btn::before{
  display:grid!important;place-items:center!important;font-size:25px!important;line-height:1!important;font-weight:950!important;color:currentColor!important;
}
body.legacy-app #prevBtn::before,body.omi-exam-active #prev::before,body.omi-secure-exam #prev::before{content:'←'}
body.legacy-app #flagBtn::before,body.omi-exam-active #flagBtn::before,body.omi-secure-exam #flagBtn::before{content:'☆';font-size:27px!important}
body.legacy-app #flagBtn.flagged::before,body.omi-exam-active #flagBtn.flagged::before,body.omi-secure-exam #flagBtn.flagged::before{content:'★'}
body.legacy-app #nextBtn::before,body.omi-exam-active #next::before,body.omi-secure-exam #next::before{content:'→'}
body.legacy-app #checkBtn::before,body.omi-exam-active #reviewBtn::before,body.omi-secure-exam #reviewBtn::before{content:'✓'}
body.legacy-app #skipBtn::before{content:'↷'}
body.omi-exam-active #submitFixed::before,body.omi-secure-exam #submitFixed::before{content:'⇧'}
body.legacy-app #prevBtn,body.omi-exam-active #prev,body.omi-secure-exam #prev{background:linear-gradient(145deg,#f8fafb,#eef2f5)!important;color:#607384!important}
body.legacy-app #flagBtn,body.omi-exam-active #flagBtn,body.omi-secure-exam #flagBtn{background:linear-gradient(145deg,#fff8e5,#f6e7b8)!important;color:#a56d00!important}
body.legacy-app #flagBtn.flagged,body.omi-exam-active #flagBtn.flagged,body.omi-secure-exam #flagBtn.flagged{background:linear-gradient(145deg,#ffefba,#f2cd65)!important;color:#815300!important}
body.legacy-app #nextBtn,body.omi-exam-active #next,body.omi-secure-exam #next{background:linear-gradient(145deg,#19b889,#079f77)!important;color:#fff!important;border-color:#07946f!important;box-shadow:0 7px 13px rgba(7,159,119,.20),inset 0 1px 0 #52d7b2!important}
body.legacy-app #checkBtn,body.omi-exam-active #reviewBtn,body.omi-secure-exam #reviewBtn{background:linear-gradient(145deg,#e8f7ff,#ceeafb)!important;color:#1378b2!important;border-color:#c3dfef!important}
body.legacy-app #skipBtn{background:linear-gradient(145deg,#f1ecff,#dfd5fa)!important;color:#6a51c2!important}
body.omi-exam-active #submitFixed,body.omi-secure-exam #submitFixed{background:linear-gradient(145deg,#ffe8ea,#f4cdd1)!important;color:#a43a47!important;border-color:#efc4c9!important}
body.legacy-app .q-nav button:disabled,body.omi-exam-active .exam-actions .btn:disabled,body.omi-secure-exam .exam-actions .btn:disabled{opacity:.38!important;filter:saturate(.45)!important}
body.legacy-app .q-nav button:not(:disabled):active,body.omi-exam-active .exam-actions .btn:not(:disabled):active,body.omi-secure-exam .exam-actions .btn:not(:disabled):active{transform:translateY(1px) scale(.97)!important;box-shadow:0 2px 5px rgba(25,52,44,.09),inset 0 1px 2px rgba(0,0,0,.04)!important}
body.legacy-app .q-nav .hidden{display:none!important}
@media(max-width:420px){body.legacy-app .q-nav,body.omi-exam-active .exam-actions,body.omi-secure-exam .exam-actions{gap:5px!important;padding-inline:6px!important}body.legacy-app .q-nav button,body.omi-exam-active .exam-actions .btn,body.omi-secure-exam .exam-actions .btn{height:43px!important;min-height:43px!important;border-radius:12px!important}body.legacy-app .q-nav button::before,body.omi-exam-active .exam-actions .btn::before,body.omi-secure-exam .exam-actions .btn::before{font-size:22px!important}}

/* Question media and analytical stimulus */
.question-visual,.omi-question-visual{margin:10px 0 12px;border:1px solid #dbe5e1;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 5px 14px rgba(27,60,51,.06)}
.question-visual svg,.omi-question-visual svg,.question-visual img,.omi-question-visual img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
.stimulus-block figure{margin:9px 0}.stimulus-block img{max-width:100%;height:auto;border-radius:14px}

/* Identity modal — close buttons must remain accessible and never be blocked by form validation. */
.identity-modal .modal-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.identity-modal .icon-close{flex:0 0 auto!important;width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border:1px solid var(--v23-line)!important;border-radius:13px!important;background:#f3f7f5!important;font-size:25px!important;line-height:1!important}
.identity-modal .modal-actions{display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:8px!important}

/* Registration: multi-field choice without cramped select/button rows. */
.omi-admin .field-multi{display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important}
.omi-admin .field-chip{position:relative!important;display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:38px!important;padding:7px 10px!important;border:1px solid #dbe5e1!important;border-radius:12px!important;background:#fff!important;font-size:11px!important;font-weight:850!important;color:#52665e!important;cursor:pointer!important}
.omi-admin .field-chip input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.omi-admin .field-chip:has(input:checked){background:#e7f5ef!important;border-color:#9fd3c1!important;color:var(--v23-green)!important;box-shadow:inset 0 0 0 1px #c5e6da!important}
.omi-admin .field-chip:has(input:checked)::after{content:'✓';font-size:11px!important}
.omi-admin .registration-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.omi-admin .registration-badges .badge{font-size:10px!important}
.omi-admin .pin-field-group{padding:6px;border:1px solid #edf1ef;border-radius:10px}.omi-admin .pin-field-group>strong{display:block;font-size:10px;margin-bottom:4px;color:#536760}.omi-admin .pin-field-group .btn{min-height:34px!important;padding:6px 8px!important;font-size:10px!important}

/* Question editor: precision-first controls */
.omi-question-bank .content-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);gap:10px}.omi-question-bank .media-panel{border:1px solid var(--v23-line);border-radius:14px;padding:10px;background:#fafcfb}.omi-question-bank .media-preview{margin-top:8px;border:1px dashed #c8d8d2;border-radius:12px;min-height:90px;display:grid;place-items:center;overflow:hidden;background:#fff}.omi-question-bank .media-preview img{width:100%;height:auto;max-height:220px;object-fit:contain}.omi-question-bank .option-editor{display:grid;gap:7px}.omi-question-bank .option-row{display:grid;grid-template-columns:34px minmax(0,1fr) 44px;gap:7px;align-items:center}.omi-question-bank .option-letter{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eef4f2;font-weight:950}.omi-question-bank .option-row input[type=text]{width:100%}.omi-question-bank .option-row button{width:40px;height:40px;border-radius:11px}.omi-question-bank .answer-chooser{display:flex;gap:6px;flex-wrap:wrap}.omi-question-bank .workflow-actions{display:flex;gap:7px;flex-wrap:wrap}.omi-question-bank .student-preview .preview-media img{display:block;max-width:100%;max-height:280px;margin:8px auto;border-radius:12px}.omi-question-bank .student-preview .stimulus-preview{padding:10px;border-radius:12px;background:#f4f8f6;margin:8px 0;overflow:auto}
@media(max-width:780px){.omi-question-bank .content-editor-grid{grid-template-columns:1fr}}


/* V23 participant multi-field administration */
.omi-admin .student{grid-template-columns:minmax(220px,1fr) minmax(310px,1.1fr) minmax(165px,.55fr)!important;align-items:start!important}
.participant-fields{display:flex!important;flex-wrap:wrap!important;gap:7px!important;padding:2px!important}
.field-chip{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 12px;border:1px solid #dbe6e1;border-radius:13px;background:#f8fbfa;color:#52655e;font-weight:850;cursor:pointer;box-shadow:inset 0 1px 0 #fff}
.field-chip input{position:absolute;opacity:0;pointer-events:none}.field-chip.active,.field-chip:has(input:checked){background:linear-gradient(145deg,#dff5ec,#c8eadc);border-color:#a9d8c7;color:#076a55;box-shadow:0 5px 11px rgba(7,106,85,.08),inset 0 1px 0 #fff}
.field-status{margin-top:5px}.pin-actions{position:relative}.pin-actions>summary{min-height:42px;display:grid;place-items:center;border:1px solid #dbe6e1;border-radius:11px;background:#fff;font-weight:850;cursor:pointer;list-style:none}.pin-actions>summary::-webkit-details-marker{display:none}
.pin-actions-menu{position:absolute;z-index:30;right:0;top:calc(100% + 6px);width:min(430px,85vw);padding:9px;background:#fff;border:1px solid #dbe6e1;border-radius:15px;box-shadow:0 16px 35px rgba(25,55,47,.15)}
.pin-field-group{padding:9px;border-radius:12px;background:#f7faf9;margin:6px 0}.pin-field-group small{display:block}.pin-field-group>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:6px}.pin-field-group .btn{padding:8px 5px;font-size:.72rem}
@media(max-width:980px){.omi-admin .student{grid-template-columns:1fr!important}.pin-actions-menu{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto;max-height:70vh;overflow:auto}.pin-field-group>div{grid-template-columns:1fr 1fr}}

/* Precise question editor */
.v23-qbank{max-width:1480px!important}.v23-page-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}.v23-page-title h1{margin:.1rem 0}.qbank-filter-row{display:grid;grid-template-columns:150px 1fr;gap:7px;margin:8px 0}.qbank-filter-row>*{min-height:42px;border:1px solid #dbe6e1;border-radius:11px;padding:9px;background:#fff}
.qeditor-section h2{margin:.1rem 0 .7rem}.qeditor-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.qeditor-section label{display:block;font-weight:800;color:#465952}.qeditor-section input,.qeditor-section select,.qeditor-section textarea{width:100%;margin-top:5px;border:1px solid #d8e4df;border-radius:11px;padding:10px;background:#fff;font:inherit}.qeditor-section textarea{resize:vertical;line-height:1.5}.media-editor{display:grid;grid-template-columns:1.1fr auto 1.2fr 1.2fr;gap:8px;align-items:end;margin:9px 0}.options-editor{display:grid;gap:7px}.option-edit-row{display:grid;grid-template-columns:38px 1fr 90px 42px;gap:7px;align-items:center}.option-edit-row>span{width:36px;height:36px;border-radius:11px;background:#e9f5f1;color:#076a55;display:grid;place-items:center;font-weight:950}.option-edit-row input{margin:0}.answer-key{height:40px;display:flex!important;align-items:center;justify-content:center;gap:5px;background:#f6f9f8;border:1px solid #dbe6e1;border-radius:10px}.answer-key input{width:auto!important;margin:0!important}.option-edit-row>button{height:40px;border:0;border-radius:10px;background:#fff0f0;color:#a53b45;font-size:20px}.student-preview{overflow:hidden}.qbank-image img,.question-image img{display:block;max-width:100%;height:auto;max-height:420px;object-fit:contain;margin:auto;border-radius:14px}.question-visual{margin:10px 0}.question-visual svg{display:block;width:100%;height:auto;max-height:320px}.question-visual figcaption{font-size:.75rem;font-weight:850;color:#62756e;margin-bottom:5px}
@media(max-width:800px){.media-editor{grid-template-columns:1fr 1fr}.option-edit-row{grid-template-columns:34px minmax(0,1fr) 76px 38px}.v23-page-title{align-items:center}.qbank-filter-row{grid-template-columns:1fr}}

/* V23 exam identity selectors and modal close safety */
#fieldLabel,#packageLabel{margin-top:6px}.omi-learning-login dialog button[type="button"],#learningLoginDialog button[type="button"]{touch-action:manipulation}

/* Accessibility: V23 preserves all functions without motion. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}