/* OMI Pro V31.4 — admin-managed learning packages and image-page practice */
.package-control-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;align-items:end}.package-control-grid label{display:grid;gap:6px;font-weight:800}.package-control-grid select,.package-control-grid input{min-height:44px;border:1px solid var(--line,#d9e2df);border-radius:11px;padding:9px 11px;background:#fff;color:inherit}.learning-toggle{display:flex!important;align-items:center;gap:9px;min-height:44px;padding:10px 12px;border:1px solid var(--line,#d9e2df);border-radius:11px;background:#f7faf9}.learning-toggle input{width:18px!important;height:18px!important;min-height:auto!important;margin:0!important}.juknis-box{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid #dce6e2;background:#f8fbfa;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.juknis-box strong{display:block}.juknis-box small{display:block;color:#60706b;margin-top:3px}.juknis-box.ok{border-color:#86c9ad;background:#f2fbf7}.juknis-box.warn{border-color:#e3b95f;background:#fffaf0}.juknis-status{font-weight:900;white-space:nowrap}
.learning-package-panel{margin:14px 0;padding:14px;border:1px solid var(--line,#d8e1de);border-radius:16px;background:var(--panel2,#eef4f2)}.learning-package-panel label{display:block;font-weight:800}.learning-package-panel select{width:100%;margin-top:6px;min-height:46px;border:1px solid var(--line,#d8e1de);border-radius:12px;padding:9px 11px;background:var(--panel,#fff);color:var(--text,#17221f)}.learning-package-note{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--muted,#5e6e68);font-size:.86rem}.learning-package-note b{color:var(--accent,#0b6b55)}.learning-package-empty{padding:12px;border-radius:12px;background:#fff4e8;border:1px solid #edc58d;color:#714717}.learning-package-loading{padding:10px;color:var(--muted,#5e6e68)}
.image-question-page{margin:14px 0 18px;display:flex;justify-content:center}.image-question-page img{display:block;width:min(100%,980px);height:auto;max-height:none;object-fit:contain;border-radius:14px;border:1px solid var(--line,#d8e1de);background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}.image-letter-only .option{grid-template-columns:1fr!important;justify-items:center;min-height:58px;padding:10px!important}.image-letter-only .option-marker{width:44px;height:44px;border-radius:13px;font-size:1.05rem}.image-letter-only .option>span:not(.option-marker){display:none!important}.image-letter-only .prompt{display:none!important}.image-letter-only .options{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:10px;max-width:520px;margin:0 auto}.image-letter-only .source-card{margin-bottom:10px}.image-question-caption{text-align:center;color:var(--muted,#5e6e68);font-size:.84rem;margin:-8px 0 14px}
.learning-hub-packages{margin-top:16px}.learning-hub-group{margin:12px 0 18px}.learning-hub-group h3{margin:0 0 9px}.learning-hub-package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.learning-hub-package{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--omi-line,#dbe6e1);border-radius:14px;text-decoration:none;color:inherit;background:#fff}.learning-hub-package:hover{border-color:#0b6b55}.learning-hub-package small{color:#60706b}.learning-hub-package .package-row{display:flex;justify-content:space-between;gap:8px;align-items:center}.learning-hub-package .package-code{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:#eef5f2;font-weight:900}.learning-hub-package .package-check{font-size:.75rem;font-weight:800}.learning-hub-package .package-check.ok{color:#147a58}.learning-hub-package .package-check.warn{color:#95660a}
@media(max-width:900px){.package-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.package-control-grid{grid-template-columns:1fr}.juknis-box{display:block}.juknis-status{margin-top:8px}.image-letter-only .options{grid-template-columns:repeat(4,1fr)}.learning-package-note{display:block}.learning-package-note span{display:block;margin-top:4px}}
body.omi-practice-start #welcomeScreen .start-card>h3::after{content:"Pilih paket yang diaktifkan admin, identitas peserta, lalu mulai belajar."!important}

/* V31.4 — package overview and Juknis composition controls */
.package-overview-card{margin-top:14px}.package-overview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.package-summary{appearance:none;width:100%;min-width:0;border:1px solid var(--line,#d8e3df);background:#fff;border-radius:14px;padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;color:inherit;cursor:pointer}.package-summary:hover{border-color:#8cb9ac;background:#f7fbf9}.package-summary.selected{border-color:#0b7a62;box-shadow:0 0 0 2px rgba(11,122,98,.12)}.package-summary.valid{background:#f5fbf8}.package-summary.invalid{background:#fff9ee;border-color:#e4c778}.package-summary.empty{opacity:.78}.package-summary-code{width:34px;height:34px;border-radius:10px;background:#edf5f2;display:grid;place-items:center;color:#075f4d;font-weight:900}.package-summary-meta{min-width:0}.package-summary-meta b,.package-summary-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.package-summary-meta b{font-size:.87rem}.package-summary-meta small{margin-top:3px;color:#687d74;font-size:.72rem}.package-summary-state{font-size:.66rem;font-weight:900;border-radius:999px;padding:4px 6px;background:#edf1f0;color:#718079}.package-summary-state.on{background:#dff4ea;color:#075f4d}.package-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0}.package-toolbar-hint{margin-left:auto;font-size:.82rem;color:#5b7168;font-weight:700}.juknis-box.warn .juknis-status{background:#fff1cf;color:#76520b}.juknis-box.ok .juknis-status{background:#dff4ea;color:#075f4d}
@media(max-width:900px){.package-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.package-toolbar-hint{width:100%;margin-left:0}}
@media(max-width:520px){.package-overview-grid{grid-template-columns:1fr 1fr;gap:7px}.package-summary{grid-template-columns:30px minmax(0,1fr);padding:8px}.package-summary-code{width:30px;height:30px}.package-summary-state{grid-column:2;justify-self:start}.package-toolbar .btn{flex:1 1 100%}}
