LJK.html
100%
<!-- ============================================================
  SCAN LJK UJIAN — Aplikasi satu file (HTML + CSS + JS) untuk Widget HTML/JS Blogger
  Backend: Laravel + SQLite. PWA 1 file. Glassmorphism + Soft Friendly Dashboard.
  ============================================================ -->
<link rel="manifest" id="pwaManifest"
    href="data:application/manifest+json,%7B%22name%22%3A%22Scan%20LJK%20Ujian%22%2C%22short_name%22%3A%22Scan%20LJK%22%2C%22start_url%22%3A%22.%22%2C%22scope%22%3A%22.%22%2C%22display%22%3A%22standalone%22%2C%22orientation%22%3A%22any%22%2C%22background_color%22%3A%22%23FDE8C8%22%2C%22theme_color%22%3A%22%232E2576%22%2C%22icons%22%3A%5B%7B%22src%22%3A%22data%3Aimage/svg%2Bxml%2C%253Csvg%2520xmlns%253D%2522http%253A//www.w3.org/2000/svg%2522%2520viewBox%253D%25220%25200%2520512%2520512%2522%253E%253Crect%2520width%253D%2522512%2522%2520height%253D%2522512%2522%2520rx%253D%2522110%2522%2520fill%253D%2522%25232E2576%2522/%253E%253Crect%2520x%253D%2522140%2522%2520y%253D%252290%2522%2520width%253D%2522232%2522%2520height%253D%2522332%2522%2520rx%253D%252228%2522%2520fill%253D%2522%2523fff%2522/%253E%253Cg%2520fill%253D%2522%25232E2576%2522%253E%253Ccircle%2520cx%253D%2522200%2522%2520cy%253D%2522170%2522%2520r%253D%252220%2522/%253E%253Ccircle%2520cx%253D%2522256%2522%2520cy%253D%2522170%2522%2520r%253D%252220%2522%2520fill%253D%2522none%2522%2520stroke%253D%2522%25232E2576%2522%2520stroke-width%253D%25228%2522/%253E%253Ccircle%2520cx%253D%2522312%2522%2520cy%253D%2522170%2522%2520r%253D%252220%2522%2520fill%253D%2522none%2522%2520stroke%253D%2522%25232E2576%2522%2520stroke-width%253D%25228%2522/%253E%253Ccircle%2520cx%253D%2522200%2522%2520cy%253D%2522250%2522%2520r%253D%252220%2522%2520fill%253D%2522none%2522%2520stroke%253D%2522%25232E2576%2522%2520stroke-width%253D%25228%2522/%253E%253Ccircle%2520cx%253D%2522256%2522%2520cy%253D%2522250%2522%2520r%253D%252220%2522/%253E%253Ccircle%2520cx%253D%2522312%2522%2520cy%253D%2522250%2522%2520r%253D%252220%2522%2520fill%253D%2522none%2522%2520stroke%253D%2522%25232E2576%2522%2520stroke-width%253D%25228%2522/%253E%253C/g%253E%253Crect%2520x%253D%2522120%2522%2520y%253D%2522330%2522%2520width%253D%2522272%2522%2520height%253D%252214%2522%2520rx%253D%25227%2522%2520fill%253D%2522%2523F5B335%2522/%253E%253C/svg%253E%22%2C%22sizes%22%3A%22512x512%22%2C%22type%22%3A%22image/svg%2Bxml%22%2C%22purpose%22%3A%22any%22%7D%5D%7D">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">
<meta name="theme-color" content="#2E2576">
<meta name="csrf-token" content="7uKP2wg35ezNfIWTA7rvZNYdZehMcyqdLowLZpLm">
<style>
    #ljkApp {
        --outer: #FDE8C8;
        --bg: #F5F5FF;
        --card: #fff;
        --pri: #2E2576;
        --pri2: #463bb0;
        --ink: #2B2160;
        --muted: #9A9AB8;
        --amber: #F5B335;
        --rose: #E8505B;
        --cyan: #7FD6E8;
        --violet: #6C5CE7;
        --green: #22C55E;
        --hero: #FFC47D;
        --line: #E8E8F5;
        position: fixed;
        inset: 0;
        z-index: 2147483000;
        background: var(--outer);
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.5;
        overflow: hidden
    }

    #ljkApp *,
    #ljkApp *::before,
    #ljkApp *::after {
        box-sizing: border-box
    }

    #ljkApp h1,
    #ljkApp h2,
    #ljkApp h3,
    #ljkApp h4,
    #ljkApp p {
        margin: 0
    }

    #ljkApp button,
    #ljkApp input,
    #ljkApp select,
    #ljkApp textarea {
        font: inherit;
        color: inherit
    }

    #ljkApp button {
        cursor: pointer;
        border: 0;
        background: none
    }

    #ljkApp svg {
        flex-shrink: 0
    }

    #ljkApp .lu {
        display: inline-block;
        vertical-align: middle
    }

    #ljkApp .ico svg,
    #ljkApp .ib svg,
    #ljkApp .logo svg,
    #ljkApp .nav svg,
    #ljkApp .bnav svg {
        display: block
    }

    #ljkApp .deco {
        position: absolute;
        border-radius: 48px;
        background: #FFDCA8;
        opacity: .6
    }

    #ljkApp .d1 {
        width: 62%;
        height: 70%;
        left: 8%;
        top: 12%;
        transform: rotate(-3deg)
    }

    #ljkApp .d2 {
        width: 58%;
        height: 66%;
        right: 6%;
        top: 18%;
        transform: rotate(4deg);
        opacity: .4
    }

    #ljkApp .shell {
        position: absolute;
        inset: 20px;
        background: var(--bg);
        border-radius: 32px;
        display: flex;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(46, 37, 118, .14)
    }

    #ljkApp .side {
        width: 72px;
        margin: 16px 0 16px 16px;
        background: var(--pri);
        border-radius: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18px 0;
        gap: 6px;
        flex-shrink: 0
    }

    #ljkApp .logo {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fff;
        color: var(--pri);
        display: grid;
        place-items: center
    }

    #ljkApp .logot {
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .08em;
        margin: 4px 0 14px
    }

    #ljkApp .nav {
        width: calc(100% - 16px);
        height: 46px;
        border-radius: 23px;
        color: #c9c5f2;
        display: grid;
        place-items: center;
        position: relative;
        transition: .2s
    }

    #ljkApp .nav:hover {
        color: #fff;
        background: rgba(255, 255, 255, .08)
    }

    #ljkApp .nav.on {
        background: var(--bg);
        color: var(--pri);
        width: calc(100% + 0px);
        border-radius: 23px 0 0 23px;
        margin-left: 16px;
        margin-right: -1px;
        width: calc(100% - 0px)
    }

    #ljkApp .nav.on::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: var(--bg)
    }

    #ljkApp .grow {
        flex: 1
    }

    #ljkApp .main {
        flex: 1;
        min-width: 0;
        overflow: auto;
        padding: 24px 28px 32px;
        scroll-behavior: smooth
    }

    #ljkApp .top {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 22px
    }

    #ljkApp .search {
        flex: 1;
        max-width: 560px;
        position: relative
    }

    #ljkApp .search input {
        width: 100%;
        height: 46px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        padding: 0 18px 0 46px;
        box-shadow: 0 4px 18px rgba(46, 37, 118, .05);
        outline: none
    }

    #ljkApp .search svg.s {
        position: absolute;
        left: 16px;
        top: 13px;
        color: var(--muted)
    }

    #ljkApp .tr {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative
    }

    #ljkApp .ib {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        position: relative;
        color: var(--ink)
    }

    #ljkApp .ib .dot {
        position: absolute;
        top: 8px;
        right: 9px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--rose);
        border: 2px solid #fff
    }

    #ljkApp .user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 12px 4px 4px;
        border-radius: 999px;
        background: #fff;
        cursor: pointer
    }

    #ljkApp .av {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, #F5B335, #E8505B);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 13px
    }

    #ljkApp .user b {
        font-weight: 600;
        font-size: 13px;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    #ljkApp .user small {
        display: block;
        color: var(--muted);
        font-size: 11px;
        margin-top: -3px
    }

    #ljkApp .menu {
        position: absolute;
        right: 0;
        top: 50px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 14px 40px rgba(46, 37, 118, .18);
        padding: 8px;
        min-width: 200px;
        z-index: 20
    }

    #ljkApp .menu button {
        display: flex;
        gap: 10px;
        align-items: center;
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border-radius: 12px
    }

    #ljkApp .menu button:hover {
        background: var(--bg)
    }

    #ljkApp .row2 {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 20px;
        margin-bottom: 26px
    }

    #ljkApp .hero {
        background: var(--hero);
        border-radius: 28px;
        padding: 26px 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 170px;
        overflow: hidden
    }

    #ljkApp .hero h2 {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 8px
    }

    #ljkApp .hero p {
        max-width: 300px;
        font-size: 13px
    }

    #ljkApp .card {
        background: rgba(255, 255, 255, .88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 28px;
        padding: 22px;
        box-shadow: 0 8px 28px rgba(46, 37, 118, .06)
    }

    #ljkApp .card h3 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px
    }

    #ljkApp .sec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 14px
    }

    #ljkApp .sec h2 {
        font-size: 20px;
        font-weight: 700
    }

    #ljkApp .sec a,
    #ljkApp .link {
        font-size: 12px;
        font-weight: 600;
        color: var(--pri);
        cursor: pointer;
        background: none
    }

    #ljkApp .g4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 28px
    }

    #ljkApp .stat {
        display: block;
        text-align: left;
        width: 100%;
        transition: .2s
    }

    #ljkApp .stat:hover {
        transform: translateY(-2px)
    }

    #ljkApp .stat .t {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 14px
    }

    #ljkApp .ico {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: grid;
        place-items: center
    }

    #ljkApp .stat b {
        font-size: 15px;
        font-weight: 700
    }

    #ljkApp .stat small {
        color: var(--muted);
        font-size: 12px;
        display: block
    }

    #ljkApp .pbar {
        height: 5px;
        border-radius: 99px;
        background: #EEEEFA;
        overflow: hidden;
        margin-top: 6px
    }

    #ljkApp .pbar i {
        display: block;
        height: 100%;
        border-radius: 99px;
        transition: width .8s
    }

    #ljkApp .pl {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        font-weight: 600
    }

    #ljkApp .row3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    #ljkApp .qk {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    #ljkApp .qkb {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        border-radius: 999px;
        padding: 12px 14px;
        text-align: left;
        box-shadow: 0 4px 14px rgba(46, 37, 118, .05);
        font-weight: 500;
        font-size: 13px;
        transition: .2s
    }

    #ljkApp .qkb:hover {
        transform: translateY(-2px)
    }

    #ljkApp .qkb span.b {
        margin-left: auto
    }

    #ljkApp .bdg {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
        background: #EEEEFA;
        color: var(--pri);
        white-space: nowrap
    }

    #ljkApp .bdg.a {
        background: #FFF1D3;
        color: #B97C00
    }

    #ljkApp .bdg.r {
        background: #FFE1E4;
        color: #C0303C
    }

    #ljkApp .bdg.c {
        background: #D9F4FA;
        color: #0E7C93
    }

    #ljkApp .bdg.g {
        background: #D8F7E3;
        color: #13823A
    }

    #ljkApp .bdg.p {
        background: var(--pri);
        color: #fff
    }

    #ljkApp .navy {
        background: var(--pri);
        color: #fff;
        border-radius: 28px;
        padding: 22px 26px
    }

    #ljkApp .navy h3 {
        font-size: 19px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 6px
    }

    #ljkApp .navy select {
        background: transparent;
        border: 0;
        color: #c9c5f2;
        font-size: 12px;
        outline: none;
        max-width: 200px
    }

    #ljkApp .navy select option {
        color: #2B2160
    }

    #ljkApp .navs {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 8px
    }

    #ljkApp .navs .l div {
        display: flex;
        gap: 18px;
        justify-content: space-between;
        margin: 10px 0;
        font-size: 13px;
        color: #c9c5f2;
        min-width: 150px
    }

    #ljkApp .navs .l b {
        color: #fff;
        font-weight: 700;
        font-size: 15px
    }

    #ljkApp .leg {
        font-size: 11px;
        display: grid;
        gap: 6px;
        color: #e5e2ff
    }

    #ljkApp .leg i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 8px
    }

    #ljkApp .phead {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 18px
    }

    #ljkApp .phead h2 {
        font-size: 24px;
        font-weight: 700
    }

    #ljkApp .phead p {
        color: var(--muted);
        font-size: 13px
    }

    #ljkApp .acts {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center
    }

    #ljkApp .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        padding: 0 20px;
        border-radius: 999px;
        background: var(--pri);
        color: #fff;
        font-weight: 600;
        font-size: 13px;
        transition: .2s;
        white-space: nowrap
    }

    #ljkApp .btn:hover {
        background: var(--pri2);
        transform: translateY(-1px)
    }

    #ljkApp .btn.amber {
        background: var(--amber);
        color: #3b2a00
    }

    #ljkApp .btn.ghost {
        background: #fff;
        color: var(--pri);
        box-shadow: 0 3px 12px rgba(46, 37, 118, .07)
    }

    #ljkApp .btn.danger {
        background: var(--rose)
    }

    #ljkApp .btn.sm {
        height: 34px;
        padding: 0 14px;
        font-size: 12px
    }

    #ljkApp .btn[disabled] {
        opacity: .45;
        pointer-events: none
    }

    #ljkApp .btn.ico-b {
        width: 34px;
        padding: 0;
        justify-content: center
    }

    #ljkApp .inp {
        width: 100%;
        height: 44px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: #fff;
        padding: 0 16px;
        outline: none;
        transition: .2s
    }

    #ljkApp textarea.inp {
        height: auto;
        border-radius: 18px;
        padding: 12px 16px
    }

    #ljkApp .inp:focus {
        border-color: var(--violet);
        box-shadow: 0 0 0 4px rgba(108, 92, 231, .12)
    }

    #ljkApp .inp:disabled {
        opacity: .55;
        cursor: not-allowed;
        background: #F3F4F6
    }

    #ljkApp .search-select {
        position: relative
    }

    #ljkApp .search-select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        font-weight: 500;
        width: 100%
    }

    #ljkApp .search-select-trigger span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    #ljkApp .search-select-native {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important
    }

    #ljkApp .search-select-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 20;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 35px rgba(46, 37, 118, .16);
        min-width: 220px
    }

    #ljkApp .search-select-menu[hidden] {
        display: none
    }

    #ljkApp .search-select-menu input {
        margin-bottom: 8px
    }

    #ljkApp .search-select-options {
        max-height: 220px;
        overflow-y: auto
    }

    #ljkApp .search-select-option {
        display: block;
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
        text-align: left;
        font-size: 12px;
        overflow-wrap: anywhere
    }

    #ljkApp .search-select-option:hover,
    #ljkApp .search-select-option:focus {
        background: #F5F5FF;
        outline: none
    }

    #ljkApp .search-select-option[hidden] {
        display: none
    }

    #ljkApp .search-select-option:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    #ljkApp .search-select-empty {
        display: block;
        padding: 8px 12px;
        color: var(--muted);
        font-size: 12px
    }

    #ljkApp .search-select-empty[hidden] {
        display: none
    }

    #ljkApp .search-select.compact {
        width: 54px;
        flex: 0 0 54px
    }

    #ljkApp .search-select.compact .search-select-trigger {
        height: 32px;
        border-radius: 8px;
        padding: 0 6px
    }

    #ljkApp label.f {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 12px
    }

    #ljkApp label.f span {
        display: block;
        margin: 0 0 5px 6px;
        color: #5d5890
    }

    #ljkApp .fg {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px
    }

    #ljkApp .agenda-print-controls > .f {
        margin-bottom: 0
    }

    #ljkApp .fg .full {
        grid-column: 1/-1
    }

    #ljkApp .tw {
        overflow: auto;
        border-radius: 28px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 8px 28px rgba(46, 37, 118, .06)
    }

    #ljkApp table {
        width: 100%;
        border-collapse: collapse;
        min-width: 620px
    }

    #ljkApp th {
        text-align: left;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 700;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap
    }

    #ljkApp td {
        padding: 12px 16px;
        border-bottom: 1px solid #F0F0FA;
        font-size: 13px;
        vertical-align: middle
    }

    #ljkApp tr:last-child td {
        border-bottom: 0
    }

    #ljkApp tbody tr:hover {
        background: #FAFAFF
    }

    #ljkApp td.ac {
        text-align: right;
        white-space: nowrap
    }

    #ljkApp .empty {
        padding: 44px 20px;
        text-align: center;
        color: var(--muted)
    }

    #ljkApp .pager {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding: 12px 6px;
        font-size: 12px;
        color: var(--muted)
    }

    #ljkApp .jg {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 18px
    }

    #ljkApp .jc h3 {
        font-size: 16px;
        margin: 8px 0 2px
    }

    #ljkApp .jc .m {
        color: var(--muted);
        font-size: 12px;
        display: grid;
        gap: 2px;
        margin: 6px 0 12px
    }

    #ljkApp .jc .ba {
        display: flex;
        gap: 8px;
        margin-top: 14px;
        flex-wrap: wrap
    }

    #ljkApp .ovl {
        position: absolute;
        inset: 0;
        background: rgba(30, 22, 80, .45);
        backdrop-filter: blur(4px);
        display: grid;
        place-items: center;
        z-index: 50;
        padding: 14px;
        overflow: auto
    }

    #ljkApp .modal {
        background: #fff;
        border-radius: 30px;
        padding: 26px;
        width: 100%;
        max-width: 580px;
        max-height: 94vh;
        overflow: auto;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .25)
    }

    #ljkApp .modal.lg {
        max-width: 1060px
    }

    #ljkApp .modal.jd-copy-modal {
        max-width: 1200px;
        min-height: min(420px, 70vh)
    }

    #ljkApp .jd-copy-targets {
        max-height: min(320px, 40vh);
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 14px;
        margin-bottom: 12px
    }

    #ljkApp .jd-copy-target {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 11px 12px;
        margin: 0;
        cursor: pointer
    }

    #ljkApp .jd-copy-target + .jd-copy-target {
        border-top: 1px solid var(--line)
    }

    #ljkApp .jd-copy-target input {
        flex: 0 0 auto;
        margin-top: 3px;
        accent-color: var(--pri)
    }

    #ljkApp .jd-copy-target strong,
    #ljkApp .jd-copy-target small {
        display: block
    }

    #ljkApp .jd-copy-target small {
        margin-top: 3px;
        color: var(--muted);
        font-weight: 400
    }

    @media(min-width:790px) {
        #ljkApp .modal.jd-copy-modal {
            min-width: 760px
        }
    }

    #ljkApp .modal.sm {
        max-width: 400px
    }

    #ljkApp .modal h3 {
        font-size: 19px;
        margin-bottom: 14px
    }

    #ljkApp .mh {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        gap: 10px
    }

    #ljkApp .macts {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 16px
    }

    #ljkApp .modal.agenda-modal {
        max-width: 860px;
        padding: 24px
    }

    #ljkApp .agenda-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 14px
    }

    #ljkApp .agenda-form-grid .full {
        grid-column: 1 / -1
    }

    #ljkApp .agenda-section {
        border-top: 1px solid var(--line);
        margin-top: 6px;
        padding-top: 16px
    }

    #ljkApp .agenda-room-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 10px;
        max-height: 38vh;
        overflow: auto;
        padding: 2px 5px 5px 2px
    }

    #ljkApp .agenda-room-option {
        min-width: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #FAFAFF
    }

    #ljkApp .agenda-check {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        width: 100%;
        margin: 0;
        cursor: pointer;
        font-size: 12px;
        line-height: 1.45
    }

    #ljkApp .agenda-check input {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 2px 0 0;
        accent-color: var(--pri)
    }

    #ljkApp .agenda-check span {
        display: block;
        min-width: 0;
        margin: 0;
        color: var(--ink);
        overflow-wrap: anywhere
    }

    #ljkApp .agenda-check small {
        display: block;
        color: var(--muted);
        font-size: 10px
    }

    #ljkApp .agenda-supervisors {
        display: flex;
        flex-direction: column;
        gap: 5px;
        max-height: 190px;
        overflow: auto;
        margin-top: 10px;
        padding: 9px 3px 2px;
        border-top: 1px solid var(--line)
    }

    #ljkApp .agenda-supervisor-count {
        margin-top: 10px
    }

    #ljkApp .agenda-supervisor-count[hidden] {
        display: none
    }

    #ljkApp .agenda-supervisors[hidden] {
        display: none
    }

    #ljkApp .agenda-supervisors .agenda-check {
        padding: 5px 7px;
        border-radius: 8px;
        background: #fff
    }

    #ljkApp .agenda-form-hint {
        margin-top: 10px;
        padding: 9px 11px;
        border-radius: 10px;
        background: #FFF4DC;
        color: #80621E;
        font-size: 11px
    }

    #ljkApp .agenda-form-actions {
        padding-top: 14px;
        border-top: 1px solid var(--line)
    }

    #ljkApp .tabs2 {
        display: inline-flex;
        background: #EEEEFA;
        border-radius: 999px;
        padding: 4px;
        gap: 2px;
        margin-bottom: 14px;
        flex-wrap: wrap
    }

    #ljkApp .tabs2 button {
        padding: 8px 18px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 13px;
        color: #6b6699
    }

    #ljkApp .tabs2 button.on {
        background: var(--pri);
        color: #fff
    }

    #ljkApp .chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 12px;
        align-items: center
    }

    #ljkApp .chip {
        padding: 7px 16px;
        border-radius: 99px;
        background: #EEEEFA;
        font-weight: 600;
        font-size: 12px
    }

    #ljkApp .chip.on {
        background: var(--amber);
        color: #3b2a00
    }

    #ljkApp .kgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 8px;
        margin: 12px 0
    }

    #ljkApp .vgrid {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(10, auto);
        grid-auto-columns: max-content;
        gap: 6px 10px;
        margin: 12px 0;
        overflow-x: auto;
        padding-bottom: 6px
    }

    #ljkApp .kq {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--bg);
        padding: 6px 10px;
        border-radius: 99px
    }

    #ljkApp .kq.missing {
        background: #fff0f1;
        box-shadow: inset 0 0 0 1px #e5a5aa
    }

    #ljkApp .kq.missing b {
        color: #c0303c
    }

    #ljkApp .kq.missing b::after {
        content: " !"
    }

    #ljkApp .kq.missing .bub {
        border-color: #e5a5aa
    }

    #ljkApp .vgrid .kq {
        gap: 4px;
        padding: 5px 8px
    }

    #ljkApp .vgrid .bub {
        width: 25px;
        height: 25px
    }

    #ljkApp .kq b {
        width: 24px;
        font-size: 12px;
        text-align: right;
        color: #6b6699
    }

    #ljkApp .bub {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1.5px solid #c9c5f2;
        background: #fff;
        font-size: 11px;
        font-weight: 700;
        color: #6b6699
    }

    #ljkApp .bub.on {
        background: var(--pri);
        border-color: var(--pri);
        color: #fff
    }

    #ljkApp .qa {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 12px;
        background: var(--bg);
        font-size: 12px
    }

    #ljkApp .qa b {
        width: 24px;
        text-align: right
    }

    #ljkApp .qa select {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 3px;
        background: #fff;
        flex: 1;
        min-width: 0
    }

    #ljkApp .qa.ok {
        background: #DDF8E7
    }

    #ljkApp .qa.no {
        background: #FFE3E6
    }

    #ljkApp .qa.em {
        background: #FFF3D6
    }

    #ljkApp .qa small {
        color: var(--muted);
        font-size: 10px;
        white-space: nowrap
    }

    #ljkApp .sg {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 12px;
        margin-bottom: 18px
    }

    #ljkApp .sg .card {
        padding: 14px 16px
    }

    #ljkApp .sg small {
        color: var(--muted);
        font-size: 11px;
        display: block
    }

    #ljkApp .sg b {
        font-size: 22px;
        font-weight: 700
    }

    #ljkApp .scangrid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 20px;
        align-items: start
    }

    #ljkApp .vid {
        position: relative;
        background: #14102f;
        border-radius: 22px;
        overflow: hidden;
        aspect-ratio: 4/3;
        display: grid;
        place-items: center;
        color: #c9c5f2
    }

    #ljkApp .vid video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    #ljkApp .vid .gd {
        position: absolute;
        inset: 3%;
        border: 3px dashed rgba(255, 255, 255, .55);
        border-radius: 10px;
        pointer-events: none
    }

    #ljkApp .vid.a4 {
        aspect-ratio: 210/297;
        width: 100%;
        max-width: 400px;
        margin: 0 auto
    }

    #ljkApp .vid canvas.ov {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none
    }

    #ljkApp .vid .st {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        text-align: center;
        background: rgba(20, 16, 47, .72);
        color: #fff;
        border-radius: 99px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600
    }

    #ljkApp .vid.ok .gd {
        border-color: #22C55E;
        border-style: solid
    }

    #ljkApp .ovc {
        width: 100%;
        max-width: 520px;
        border-radius: 18px;
        border: 1px solid var(--line);
        display: block;
        margin: auto;
        background: #fff
    }

    #ljkApp .warn {
        background: #FFF3D6;
        color: #7a5200;
        border-radius: 16px;
        padding: 10px 14px;
        font-size: 12px;
        margin-bottom: 8px
    }

    #ljkApp .info {
        background: #EEF0FF;
        border-radius: 16px;
        padding: 10px 14px;
        font-size: 12px;
        margin-bottom: 12px
    }

    #ljkApp .login {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 16px;
        overflow: auto
    }

    #ljkApp .lcard {
        position: relative;
        background: rgba(255, 255, 255, .72);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 36px;
        padding: 34px 30px;
        width: 100%;
        max-width: 410px;
        box-shadow: 0 30px 80px rgba(46, 37, 118, .18);
        text-align: center
    }

    #ljkApp .lcard .logo {
        margin: 0 auto 12px;
        width: 56px;
        height: 56px;
        background: var(--pri);
        color: #fff
    }

    #ljkApp .lcard h1 {
        font-size: 24px;
        font-weight: 800
    }

    #ljkApp .lcard p {
        color: #6b6699;
        font-size: 13px;
        margin: 4px 0 18px
    }

    #ljkApp .lcard form {
        text-align: left
    }

    #ljkApp .lcard .btn {
        width: 100%;
        justify-content: center;
        height: 46px;
        margin-top: 6px
    }

    #ljkApp .hint {
        font-size: 11px;
        color: #6b6699;
        margin-top: 14px;
        background: #FFF1D3;
        border-radius: 14px;
        padding: 8px 12px;
        text-align: left
    }

    #ljkApp .toast {
        position: absolute;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%);
        background: var(--pri);
        color: #fff;
        padding: 12px 22px;
        border-radius: 99px;
        z-index: 90;
        font-weight: 600;
        font-size: 13px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
        max-width: 92vw;
        text-align: center
    }

    #ljkApp .toast.err {
        background: var(--rose)
    }

    #ljkApp .busy {
        position: absolute;
        inset: 0;
        background: rgba(245, 245, 255, .8);
        backdrop-filter: blur(3px);
        z-index: 80;
        display: grid;
        place-items: center;
        font-weight: 600
    }

    #ljkApp .spin {
        width: 38px;
        height: 38px;
        border: 4px solid #d9d6f5;
        border-top-color: var(--pri);
        border-radius: 50%;
        animation: sp .8s linear infinite;
        margin: 0 auto 10px
    }

    @keyframes sp {
        to {
            transform: rotate(360deg)
        }
    }

    #ljkApp .bnav {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        height: 64px;
        background: rgba(46, 37, 118, .94);
        backdrop-filter: blur(14px);
        border-radius: 30px;
        box-shadow: 0 14px 36px rgba(46, 37, 118, .4);
        z-index: 30;
        align-items: center;
        justify-content: space-around;
        padding: 0 8px
    }

    #ljkApp .bnav button {
        color: #c9c5f2;
        width: 52px;
        height: 48px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        font-size: 9px
    }

    #ljkApp .bnav button.on {
        background: #fff;
        color: var(--pri)
    }

    #ljkApp .bnav button.cen {
        background: var(--amber);
        color: #3b2a00;
        width: 56px;
        height: 56px;
        margin-top: -22px;
        box-shadow: 0 8px 20px rgba(245, 179, 53, .5)
    }

    #ljkApp .more {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    #ljkApp .more button {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 14px;
        border-radius: 20px;
        background: var(--bg);
        font-weight: 600;
        font-size: 13px
    }

    #ljkApp .rb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 3px 0
    }

    #ljkApp .rb .bar {
        flex: 1;
        height: 8px;
        background: #EEEEFA;
        border-radius: 99px;
        overflow: hidden
    }

    #ljkApp .rb .bar i {
        display: block;
        height: 100%
    }

    #ljkApp .rb small {
        width: 34px;
        color: var(--muted);
        font-size: 11px
    }

    #ljkApp .rb span {
        width: 44px;
        font-size: 11px;
        font-weight: 700;
        text-align: right
    }

    @media(max-width:1100px) {
        #ljkApp .g4 {
            grid-template-columns: repeat(2, 1fr)
        }

        #ljkApp .scangrid,
        #ljkApp .row2,
        #ljkApp .row3 {
            grid-template-columns: 1fr
        }
    }

    @media(max-width:900px) {
        #ljkApp .shell {
            inset: 0;
            border-radius: 0
        }

        #ljkApp .side {
            display: none
        }

        #ljkApp .bnav {
            display: flex
        }

        #ljkApp .main {
            padding: 16px 14px 112px
        }

        #ljkApp .user b,
        #ljkApp .user small {
            display: none
        }

        #ljkApp .user {
            padding: 4px
        }

        #ljkApp .fg {
            grid-template-columns: 1fr
        }

        #ljkApp .agenda-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        #ljkApp .hero h2 {
            font-size: 21px
        }

        #ljkApp .deco {
            display: none
        }

        #ljkApp .navs {
            justify-content: center
        }
    }

    @media(max-width:520px) {
        #ljkApp .g4 {
            gap: 12px
        }

        #ljkApp .card {
            padding: 16px;
            border-radius: 22px
        }

        #ljkApp .qk {
            grid-template-columns: 1fr
        }

        #ljkApp .hero svg {
            display: none
        }

        #ljkApp .modal.agenda-modal {
            padding: 18px;
            border-radius: 22px
        }

        #ljkApp .agenda-form-grid,
        #ljkApp .agenda-room-grid {
            grid-template-columns: 1fr
        }

        #ljkApp .agenda-room-grid {
            max-height: 30vh
        }

        #ljkApp .agenda-supervisors {
            max-height: 110px
        }

        #ljkApp .agenda-form-grid .full {
            grid-column: auto
        }
    }

    #ljkApp .room-layout {
        display: grid;
        grid-template-columns: minmax(250px, .78fr) minmax(0, 1.55fr);
        gap: 18px;
        align-items: start
    }

    #ljkApp .room-sidebar {
        min-width: 0
    }

    #ljkApp .room-search {
        margin-bottom: 10px
    }

    #ljkApp .room-list {
        display: grid;
        gap: 8px;
        max-height: min(68vh, calc(100dvh - 250px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 6px 2px 2px;
        scrollbar-gutter: stable
    }

    #ljkApp .room-item {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        text-align: left;
        padding: 12px 14px;
        transition: .18s ease
    }

    #ljkApp .room-item:hover {
        border-color: #7FD6E8;
        transform: translateY(-1px)
    }

    #ljkApp .room-item.on {
        color: #fff;
        background: #242424;
        border-color: #242424;
        box-shadow: 0 8px 18px #0002
    }

    #ljkApp .room-item.on small,
    #ljkApp .room-item.on .room-meta {
        color: #d3d3d3
    }

    #ljkApp .room-item-top,
    #ljkApp .room-item-actions,
    #ljkApp .room-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px
    }

    #ljkApp .room-meta {
        margin-top: 5px;
        color: var(--muted);
        font-size: 11px
    }

    #ljkApp .room-plan {
        position: sticky;
        top: 16px;
        min-width: 0;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 22px;
        padding: 20px;
        background: #f5f0ec
    }

    #ljkApp .room-stage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 18px 0
    }

    #ljkApp .room-stage div {
        padding: 12px 8px;
        border: 1px solid #dfe8e6;
        border-radius: 12px;
        background: #eaf5f3;
        text-align: center;
        font-size: 11px;
        font-weight: 800
    }

    #ljkApp .room-stage div:last-child {
        background: #fff;
        border-color: var(--line)
    }

    #ljkApp .room-seats {
        display: grid;
        grid-template-columns: repeat(var(--room-columns), minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
        background: #fff
    }

    #ljkApp .room-seat {
        min-width: 0;
        min-height: 76px;
        padding: 9px;
        border: 1px dashed #d8d8d8;
        border-radius: 12px;
        background: #fafafa;
        text-align: left;
        transition: .15s ease
    }

    #ljkApp .room-seat:hover {
        border-color: #60bcb3;
        background: #eff9f7
    }

    #ljkApp .room-seat.filled {
        border: 2px solid #60bcb3;
        background: #eaf5f3
    }

    #ljkApp .room-seat small {
        display: block;
        overflow: hidden;
        margin-top: 8px;
        color: var(--muted);
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    #ljkApp .room-seat b {
        display: block;
        overflow: hidden;
        margin-top: 4px;
        font-size: 11px;
        text-overflow: ellipsis
    }

    #ljkApp .room-seat em {
        display: block;
        margin-top: 9px;
        color: #aaa;
        font-size: 10px;
        font-style: italic
    }

    #ljkApp .room-student-list {
        display: grid;
        gap: 6px;
        max-height: 42vh;
        overflow: auto;
        margin-top: 12px
    }

    #ljkApp .room-student {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        text-align: left
    }

    #ljkApp .room-student:hover {
        border-color: #60bcb3;
        background: #eff9f7
    }

    @media(max-width:900px) {
        #ljkApp .room-layout {
            grid-template-columns: 1fr
        }

        #ljkApp .room-list {
            max-height: 34vh
        }

        #ljkApp .room-plan {
            position: static;
            max-height: none;
            overflow: visible
        }
    }

    @media(max-width:600px) {
        #ljkApp .room-plan {
            padding: 12px
        }

        #ljkApp .room-seats {
            gap: 5px;
            padding: 8px
        }

        #ljkApp .room-seat {
            min-height: 65px;
            padding: 6px
        }
    }
</style>

<div id="ljkApp">
    <div class="deco d1"></div>
    <div class="deco d2"></div>
    <div id="root"></div>
</div>

<script src="/js/ljk-template.js"></script>
<script type="module">
    /* ===================== KONFIGURASI APLIKASI ===================== */
    const API_BASE = '/ljk-data';

    /* ===================== UTIL ===================== */
    const $ = (s, r = document) => r.querySelector(s);
    const $$ = (s, r = document) => [...r.querySelectorAll(s)];
    const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
    } [c]));
    const ICONS = {
        "alert-triangle": "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/>",
        "bar-chart-3": "<path d=\"M3 3v18h18\"/><path d=\"M18 17V9\"/><path d=\"M13 17V5\"/><path d=\"M8 17v-3\"/>",
        "bell": "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>",
        "book-open": "<path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>",
        "calendar": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M16 2v4\"/><path d=\"M8 2v4\"/><path d=\"M3 10h18\"/>",
        "calendar-clock": "<path d=\"M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5\"/><path d=\"M16 2v4\"/><path d=\"M8 2v4\"/><path d=\"M3 10h5\"/><circle cx=\"17.5\" cy=\"17.5\" r=\"4.5\"/><path d=\"M17.5 15.5v2l1 1\"/>",
        "calendar-days": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M16 2v4\"/><path d=\"M8 2v4\"/><path d=\"M3 10h18\"/><path d=\"M8 14h.01\"/><path d=\"M12 14h.01\"/><path d=\"M16 14h.01\"/><path d=\"M8 18h.01\"/><path d=\"M12 18h.01\"/><path d=\"M16 18h.01\"/>",
        "calendar-plus": "<path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><path d=\"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8\"/><path d=\"M3 10h18\"/><path d=\"M19 16v6\"/><path d=\"M16 19h6\"/>",
        "camera": "<path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/>",
        "chevron-down": "<path d=\"m6 9 6 6 6-6\"/>",
        "download": "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"m7 10 5 5 5-5\"/><path d=\"M12 15V3\"/>",
        "eye": "<path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
        "file-spreadsheet": "<path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"M8 13h2\"/><path d=\"M14 13h2\"/><path d=\"M8 17h2\"/><path d=\"M14 17h2\"/>",
        "flask-conical": "<path d=\"M10 2v7.5L4.5 19a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V2\"/><path d=\"M8.5 2h7\"/><path d=\"M7 16h10\"/>",
        "image-up": "<path d=\"M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"M14 19.5l3-3 3 3\"/><path d=\"M17 22v-5.5\"/>",
        "inbox": "<path d=\"M22 12h-6l-2 3h-4l-2-3H2\"/><path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11\"/>",
        "key-round": "<path d=\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z\"/><circle cx=\"16.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>",
        "layout-dashboard": "<rect width=\"7\" height=\"9\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"5\" x=\"14\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"9\" x=\"14\" y=\"12\" rx=\"1\"/><rect width=\"7\" height=\"5\" x=\"3\" y=\"16\" rx=\"1\"/>",
        "layout-grid": "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/>",
        "log-out": "<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"/><path d=\"m16 17 5-5-5-5\"/><path d=\"M21 12H9\"/>",
        "pencil": "<path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z\"/><path d=\"m15 5 4 4\"/>",
        "plus": "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>",
        "printer": "<path d=\"M6 9V2h12v7\"/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"/><rect width=\"12\" height=\"8\" x=\"6\" y=\"14\"/>",
        "save": "<path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2\"/><path d=\"M17 21v-8H7v8\"/><path d=\"M7 3v5h8\"/>",
        "scan-line": "<path d=\"M3 7V5a2 2 0 0 1 2-2h2\"/><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"/><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"/><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"/><path d=\"M7 12h10\"/>",
        "search": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>",
        "settings": "<path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
        "trash-2": "<path d=\"M3 6h18\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/><path d=\"M10 11v6\"/><path d=\"M14 11v6\"/>",
        "upload": "<path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"m17 8-5-5-5 5\"/><path d=\"M12 3v12\"/>",
        "user": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>",
        "user-cog": "<circle cx=\"18\" cy=\"15\" r=\"3\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M10 15H6a4 4 0 0 0-4 4v2\"/><path d=\"m21.7 16.4-.9-.3\"/><path d=\"m15.2 13.9-.9-.3\"/><path d=\"m16.6 18.7.3-.9\"/><path d=\"m19.1 12.2.3-.9\"/><path d=\"m19.6 18.7-.4-1\"/><path d=\"m16.8 12.3-.4-1\"/><path d=\"m14.3 16.6 1-.4\"/><path d=\"m20.7 13.8 1-.4\"/>",
        "users": "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"/>",
        "video": "<path d=\"m22 8-6 4 6 4z\"/><rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"/>",
        "wand-2": "<path d=\"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72\"/><path d=\"m14 7 3 3\"/><path d=\"M5 6v4\"/><path d=\"M19 14v4\"/><path d=\"M10 2v2\"/><path d=\"M7 8H3\"/><path d=\"M21 16h-4\"/><path d=\"M11 3H9\"/>",
        "x": "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>"
    };
    ICONS['school'] =
        '<path d="M14 22v-4a2 2 0 1 0-4 0v4"/><path d="m18 10 4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2"/><path d="M18 5v17"/><path d="m4 6 8-4 8 4"/><path d="M6 5v17"/><circle cx="12" cy="9" r="2"/>';
    const ic = (n, s = 20) =>
        `<svg class="lu" xmlns="http://www.w3.org/2000/svg" width="${s}" height="${s}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" >${ICONS[n] || ''}</svg>`;
    const LET = 'ABCDE';
    const pad = (n, l = 3) => String(n ?? '').padStart(l, '0');
    const todayISO = () => {
        const d = new Date();
        return new Date(d - d.getTimezoneOffset() * 6e4).toISOString().slice(0, 10);
    };
    const addDays = (n) => {
        const d = new Date();
        d.setDate(d.getDate() + n);
        return new Date(d - d.getTimezoneOffset() * 6e4).toISOString().slice(0, 10);
    };
    const fmtDate = d => d ? new Date(d + 'T00:00:00').toLocaleDateString('id-ID', {
        day: '2-digit',
        month: 'short',
        year: 'numeric'
    }) : '-';
    const num = (v, d = 1) => (v === null || v === undefined || isNaN(v)) ? '-' : (Math.round(v * 10 ** d) / 10 ** d)
        .toString().replace('.', ',');
    const initials = n => String(n || '?').split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase();
    const LIBS = {
        lucide: 'https://unpkg.com/lucide@0.263.1/dist/umd/lucide.min.js',
        xlsx: 'https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js'
    };
    const _ls = {};
    const loadScript = u => _ls[u] || (_ls[u] = new Promise((res, rej) => {
        const s = document.createElement('script');
        s.src = u;
        s.onload = res;
        s.onerror = () => {
            delete _ls[u];
            rej(new Error('Gagal memuat library dari internet'));
        };
        document.head.appendChild(s);
    }));

    const icons = () => {};

    function toast(msg, type = 'ok', ms = 2800) {
        $('#ljkApp .toast')?.remove();
        const t = document.createElement('div');
        t.className = 'toast ' + (type === 'err' ? 'err' : '');
        t.textContent = msg;
        $('#ljkApp').appendChild(t);
        setTimeout(() => t.remove(), ms);
    }

    function setBusy(on, msg = 'Memproses…') {
        $('#ljkApp .busy')?.remove();
        if (!on) return;
        const b = document.createElement('div');
        b.className = 'busy';
        b.innerHTML = `<div style="text-align:center"><div class="spin"></div>${esc(msg)}</div>`;
        $('#ljkApp').appendChild(b);
    }

    function errMsg(e) {
        if (!e) return 'Terjadi kesalahan';
        if (e.code === '23505' || /duplicate|unique/i.test(e.message || ''))
            return 'Data duplikat: NIS, nama kelas, atau kode sudah dipakai.';
        if (e.code === '23503') return 'Data masih dipakai data lain (mis. kelas masih dipakai siswa/LJK).';
        if (e.code === '42501' || /row-level security/i.test(e.message || ''))
            return 'Akses ditolak oleh kebijakan RLS. Periksa SQL & login Anda.';
        return e.message || String(e);
    }
    async function guard(fn, busyMsg) {
        try {
            if (busyMsg) setBusy(true, busyMsg);
            return await fn();
        } catch (e) {
            console.error(e);
            toast(errMsg(e), 'err', 5000);
            return false;
        } finally {
            if (busyMsg) setBusy(false);
        }
    }

    function openModal(html, lg = false) {
        closeModal();
        const el = document.createElement('div');
        el.className = 'ovl';
        el.id = 'modal';
        el.innerHTML = `<div class="modal ${lg ? 'lg' : ''}">${html}</div>`;
        el.addEventListener('mousedown', e => {
            if (e.target === el) closeModal();
        });
        $('#ljkApp').appendChild(el);
        icons();
    }

    function setModal(html) {
        const m = $('#modal .modal');
        if (m) {
            m.innerHTML = html;
            icons();
        } else openModal(html, true);
    }

    function syncSearchSelect(select) {
        const wrapper = select.closest('[data-search-select]');
        if (!wrapper) return;
        const option = select.selectedOptions[0];
        wrapper.querySelector('[data-search-select-trigger] span').textContent = option?.textContent || 'Pilih...';
        wrapper.querySelectorAll('[data-search-select-option]').forEach(item => {
            item.setAttribute('aria-selected', String(Number(item.dataset.searchSelectOption) === select.selectedIndex));
        });
    }

    function enhanceSearchSelect(select) {
        if (select.dataset.searchEnhanced) return;
        const parent = select.parentNode;
        if (!parent) return;
        select.dataset.searchEnhanced = 'true';
        const wrapper = document.createElement('div');
        wrapper.className = 'search-select';
        wrapper.dataset.searchSelect = '';
        if (select.closest('.qa')) wrapper.classList.add('compact');
        if (select.style.width) wrapper.style.width = select.style.width;
        parent.insertBefore(wrapper, select);
        wrapper.appendChild(select);

        if (select.required) {
            select.dataset.searchRequired = '';
            select.required = false;
        }
        select.classList.add('search-select-native');
        select.tabIndex = -1;
        select.setAttribute('aria-hidden', 'true');

        const label = select.closest('label')?.querySelector('span')?.textContent?.trim();
        const trigger = document.createElement('button');
        trigger.type = 'button';
        trigger.className = 'inp search-select-trigger';
        trigger.dataset.searchSelectTrigger = '';
        trigger.setAttribute('aria-haspopup', 'listbox');
        trigger.setAttribute('aria-expanded', 'false');
        trigger.setAttribute('aria-label', label || 'Pilih opsi');
        trigger.disabled = select.disabled;
        trigger.innerHTML = '<span></span><i aria-hidden="true">⌄</i>';
        wrapper.appendChild(trigger);

        const menu = document.createElement('div');
        menu.className = 'search-select-menu';
        menu.dataset.searchSelectMenu = '';
        menu.hidden = true;
        const search = document.createElement('input');
        search.className = 'inp';
        search.type = 'search';
        search.autocomplete = 'off';
        search.placeholder = 'Cari...';
        search.setAttribute('aria-label', `Cari ${label || 'opsi'}`);
        menu.appendChild(search);

        const options = document.createElement('div');
        options.className = 'search-select-options';
        options.setAttribute('role', 'listbox');
        Array.from(select.options).forEach((option, index) => {
            const item = document.createElement('button');
            item.type = 'button';
            item.className = 'search-select-option';
            item.dataset.searchSelectOption = String(index);
            item.setAttribute('role', 'option');
            item.setAttribute('aria-selected', String(index === select.selectedIndex));
            item.textContent = option.textContent;
            item.disabled = option.disabled;
            options.appendChild(item);
        });
        menu.appendChild(options);

        const empty = document.createElement('small');
        empty.className = 'search-select-empty';
        empty.textContent = 'Tidak ada pilihan yang cocok.';
        empty.hidden = true;
        menu.appendChild(empty);
        wrapper.appendChild(menu);
        syncSearchSelect(select);
    }

    function enhanceSearchSelects(root) {
        root.querySelectorAll('select:not([data-search-enhanced])').forEach(enhanceSearchSelect);
    }

    function closeModal() {
        $('#modal')?.remove();
        if (S.ui.jd) S.ui.jd = null;
    }

    function confirmBox(msg, okText = 'Hapus') {
        return new Promise(res => {
            const el = document.createElement('div');
            el.className = 'ovl';
            el.style.zIndex = 70;
            el.innerHTML =
                `<div class="modal sm"><h3>Konfirmasi</h3><p>${esc(msg)}</p><div class="macts"><button class="btn ghost" data-r="0">Batal</button><button class="btn danger" data-r="1">${esc(okText)}</button></div></div>`;
            el.addEventListener('click', e => {
                const b = e.target.closest('[data-r]');
                if (b || e.target === el) {
                    el.remove();
                    res(b?.dataset.r === '1');
                }
            });
            $('#ljkApp').appendChild(el);
        });
    }

    /* ===================== STATE ===================== */
    const S = {
        user: null,
        page: 'dashboard',
        q: '',
        ready: false,
        setupError: '',
        ui: {
            pg: {},
            lrole: 'admin',
            kelasF: '',
            mataPelajaranKelasF: '',
            roomId: '',
            roomSearch: '',
            roomClassId: '',
            roomStudentSort: 'nama',
            roomStudentOrder: [],
            roomStudentId: '',
            roomTargetSeat: null,
            agendaPrintId: '',
            agendaPrintRoomId: '',
            dashJ: '',
            rekap: {
                mode: 'ujian',
                j: '',
                kelas: '',
                siswa: ''
            },
            scanJ: '',
            scanMode: 'cam',
            autoCap: true,
            jd: null,
            menu: false
        },
        data: {
            guru: [],
            kelas: [],
            siswa: [],
            mata_pelajaran: [],
            jadwal: [],
            kunci: [],
            ljk: [],
            hasil: [],
            ruang: [],
            denah: [],
            agenda: [],
            settings: {}
        }
    };
    /* ===================== LAPISAN DATA (Laravel / SQLite) ===================== */
    async function refreshCsrfToken() {
        const response = await fetch('/', {
            method: 'GET',
            credentials: 'same-origin',
            cache: 'no-store',
            headers: {
                Accept: 'text/html'
            }
        });
        if (!response.ok) throw new Error('Tidak dapat memperbarui sesi keamanan. Muat ulang halaman dan coba lagi.');

        const html = await response.text();
        const document = new DOMParser().parseFromString(html, 'text/html');
        const token = document.querySelector('meta[name="csrf-token"]')?.content;
        if (!token) throw new Error('Token keamanan tidak ditemukan. Muat ulang halaman dan coba lagi.');

        $('meta[name="csrf-token"]').content = token;
    }

    async function apiRequest(path, {
        method = 'GET',
        body
    } = {}, retryCsrf = true) {
        const headers = {
            Accept: 'application/json',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]')?.content || ''
        };
        if (body !== undefined) headers['Content-Type'] = 'application/json';
        const response = await fetch(API_BASE + path, {
            method,
            headers,
            credentials: 'same-origin',
            body: body === undefined ? undefined : JSON.stringify(body)
        });

        if (response.status === 419 && retryCsrf) {
            await refreshCsrfToken();
            return apiRequest(path, { method, body }, false);
        }

        let payload = {};
        const responseBody = await response.text();
        if (responseBody) {
            try {
                payload = JSON.parse(responseBody);
            } catch (error) {
                if (response.status !== 419) throw error;
            }
        }
        if (payload.csrf_token) $('meta[name="csrf-token"]').content = payload.csrf_token;
        if (!response.ok) {
            const details = Object.values(payload.errors || {}).flat().join(' ');
            const error = new Error(details || payload.message || (response.status === 419
                ? 'Sesi keamanan tidak cocok. Muat ulang halaman dan coba lagi.'
                : `Permintaan gagal (${response.status})`));
            error.status = response.status;
            throw error;
        }
        return payload.data;
    }

    async function dbAll(key) {
        return apiRequest('/' + key);
    }

    async function dbInsert(key, rows) {
        return apiRequest('/' + key, {
            method: 'POST',
            body: rows
        });
    }

    async function dbUpdate(key, id, patch) {
        return apiRequest('/' + key + '/' + encodeURIComponent(id), {
            method: 'PATCH',
            body: patch
        });
    }

    async function dbDelete(key, id) {
        return apiRequest('/' + key + '/' + encodeURIComponent(id), {
            method: 'DELETE'
        });
    }
    async function reload(keys) {
        for (const k of keys) {
            const rows = await dbAll(k);
            if (k === 'settings') S.data.settings = rows[0] || {};
            else S.data[k] = rows;
        }
        decorate();
    }
    const kelasName = id => S.data.kelas.find(k => k.id === id)?.nama || '';

    function decorate() {
        S.data.siswa.forEach(x => x.kelas = kelasName(x.kelas_id));
        S.data.jadwal.forEach(x => x.kelas = kelasName(x.kelas_id));
    }
    const loadAll = () => reload([
        'settings', 'guru', 'kelas', 'siswa', 'mata_pelajaran', 'jadwal', 'kunci', 'ljk', 'hasil',
        ...(S.user?.role === 'admin' ? ['ruang', 'denah', 'agenda'] : [])
    ]);

    /* ===================== AUTENTIKASI ===================== */
    function setSession(u) {
        S.user = u;
    }
    async function loginAdmin(email, pass) {
        setSession(await apiRequest('/login', {
            method: 'POST',
            body: {
                role: 'admin',
                email: email.trim(),
                password: pass
            }
        }));
    }
    async function loginGuru(email, pass) {
        setSession(await apiRequest('/login', {
            method: 'POST',
            body: {
                role: 'guru',
                email: email.trim(),
                password: pass
            }
        }));
    }
    async function restoreSession() {
        try {
            setSession(await apiRequest('/session'));
        } catch (e) {
            if (e.status === 401) {
                S.user = null;
                return;
            }
            throw e;
        }
    }
    async function logout() {
        stopCam();
        S.scanR = null;
        try {
            await apiRequest('/logout', {
                method: 'POST'
            });
        } catch (e) {
            toast(errMsg(e), 'err');
            return;
        }
        S.user = null;
        S.page = 'dashboard';
        S.q = '';
        closeModal();
        render();
    }

    /* ===================== SKOR & HELPER DOMAIN ===================== */
    function scoreAnswers(ans, key, j, essayScores = []) {
        let b = 0,
            s = 0,
            k = 0;
        for (let i = 0; i < objectiveQuestionRows(j).length; i++) {
            const a = ans[i] || '';
            if (a === '') k++;
            else if (a === key[i]) b++;
            else s++;
        }
        const essayTotal = essayScores.slice(0, essayCount(j)).reduce((sum, score) =>
            sum + Math.max(0, Math.min(Number(j.skor_benar), Number(score) || 0)), 0);
        const total = b * Number(j.skor_benar) + s * Number(j.skor_salah) + k * Number(j.skor_kosong) + essayTotal;
        const max = j.jumlah_soal * Number(j.skor_benar || 1);
        const nilai = Math.max(0, Math.min(100, max ? total / max * 100 : 0));
        return {
            benar: b,
            salah: s,
            kosong: k,
            skor_essai: essayTotal,
            nilai: Math.round(nilai * 100) / 100
        };
    }
    const D = () => S.data;
    const kelasSorted = () => D().kelas.slice().sort((a, b) => a.nama.localeCompare(b.nama, 'id', {
        numeric: true
    }));
    const guruOf = id => D().guru.find(g => g.id === id);
    const siswaOf = id => D().siswa.find(s => s.id === id);
    window.LJK_APP = {
        LIBS,
        loadScript,
        D,
        siswaOf,
        pad,
        fmtDate,
        esc,
        LET,
        guard,
        toast,
        objectiveQuestionRows: j => objectiveQuestionRows(j),
        omrQuestionRows: j => omrQuestionRows(j),
        matchingQuestionRows: j => matchingQuestionRows(j),
        essayCount: j => essayCount(j),
        printHTML: (title, body, css, targetWindow) =>
            window.LJK_TEMPLATE.printHTML(title, body, css, targetWindow),
        previewHTML: (title, subtitle, body, css, options) =>
            window.LJK_TEMPLATE.previewHTML(title, subtitle, body, css, options),
    };
    const isAdmin = () => S.user?.role === 'admin';
    const visJadwal = () => isAdmin() ? D().jadwal : D().jadwal.filter(j => j.guru_id === S.user.id);
    const ljkOf = jid => D().ljk.filter(l => l.jadwal_id === jid);
    const hasilOf = jid => D().hasil.filter(h => h.jadwal_id === jid);
    const kunciOf = (jid, paket) => D().kunci.find(k => k.jadwal_id === jid && k.paket === paket)?.jawaban || [];
    const kkmOf = j => j.kkm ?? D().settings.kkm_default ?? 75;
    const greet = () => {
        const h = new Date().getHours();
        return h < 11 ? 'pagi' : h < 15 ? 'siang' : h < 18 ? 'sore' : 'malam';
    };

    function paginate(arr, key, size = 15) {
        const tp = Math.max(1, Math.ceil(arr.length / size));
        const p = Math.max(1, Math.min(S.ui.pg[key] || 1, tp));
        S.ui.pg[key] = p;
        const html =
            `<div class="pager"><span>${arr.length} data</span>${arr.length > size ? `<button class="btn sm ghost" data-act="pg" data-k="${key}" data-p="${p - 1}" ${p <= 1 ? 'disabled' : ''}>‹</button><span>${p} / ${tp}</span><button class="btn sm ghost" data-act="pg" data-k="${key}" data-p="${p + 1}" ${p >= tp ? 'disabled' : ''}>›</button>` : ''}</div>`;
        return {
            rows: arr.slice((p - 1) * size, p * size),
            html,
            start: (p - 1) * size
        };
    }
    const head = (t, sub, acts = '') =>
        `<div class="phead"><div><h2>${t}</h2><p>${sub}</p></div><div class="acts">${acts}</div></div>`;
    const empty = (m) => `<div class="empty">${ic('inbox', 34)}<p style="margin-top:8px">${m}</p></div>`;
    const matchQ = (arr) => {
        const q = S.q.trim().toLowerCase();
        return q ? arr.join(' ').toLowerCase().includes(q) : true;
    };

    function donut(segs, size = 170, th = 24, big = '', small = '') {
        const r = (size - th) / 2,
            c = 2 * Math.PI * r,
            cx = size / 2,
            tot = segs.reduce((a, s) => a + s.v, 0);
        let off = 0,
            arcs = '';
        if (tot > 0) segs.forEach(s => {
            if (!s.v) return;
            const len = s.v / tot * c,
                dash = Math.max(len - 4, .1);
            arcs +=
                `<circle cx="${cx}" cy="${cx}" r="${r}" fill="none" stroke="${s.c}" stroke-width="${th}" stroke-linecap="round" stroke-dasharray="${dash} ${c - dash}" stroke-dashoffset="${-off - 2}" transform="rotate(-90 ${cx} ${cx})"/>`;
            off += len;
        });
        return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><circle cx="${cx}" cy="${cx}" r="${r}" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="${th}"/>${arcs}<circle cx="${cx}" cy="${cx}" r="${r - th / 2 - 6}" fill="#F5F5FF"/><text x="${cx}" y="${cx + 2}" text-anchor="middle" font-size="22" font-weight="800" fill="#2B2160">${big}</text><text x="${cx}" y="${cx + 18}" text-anchor="middle" font-size="10" fill="#E8505B">${small}</text></svg>`;
    }

    const G = window.LJK_TEMPLATE ? window.LJK_TEMPLATE.G : {};
    const bx = (...args) => window.LJK_TEMPLATE ? window.LJK_TEMPLATE.bx(...args) : null;
    const by = q => window.LJK_TEMPLATE ? window.LJK_TEMPLATE.by(q) : null;
    async function ljkSVG(l) {
        if (!window.LJK_TEMPLATE) throw new Error('Template LJK belum terinisialisasi.');
        return window.LJK_TEMPLATE.ljkSVG(l);
    }
    async function printLJK(list) {
        if (!window.LJK_TEMPLATE) throw new Error('Template LJK belum terinisialisasi.');
        return window.LJK_TEMPLATE.printLJK(list);
    }

    function printHTML(title, body, css = '', targetWindow = null) {
        if (!window.LJK_TEMPLATE) throw new Error('Template LJK belum terinisialisasi.');
        return window.LJK_TEMPLATE.printHTML(title, body, css, targetWindow);
    }
    function previewHTML(title, subtitle, body, css = '', options = {}) {
        if (!window.LJK_TEMPLATE) throw new Error('Template LJK belum terinisialisasi.');
        return window.LJK_TEMPLATE.previewHTML(title, subtitle, body, css, options);
    }
    window.LJK_APP.printHTML = printHTML;
    window.LJK_APP.previewHTML = previewHTML;
    const schoolActivities = [
        'Penilaian Sumatif Akhir Jenjang (PSAJ)',
        'Penilaian Sumatif Tengah Semester (PSTS)',
        'Penilaian Sumatif Akhir Semester (PSAS)',
        'Penilaian Sumatif Akhir Taun (PSAT)'
    ];
    const printLetterhead = (title, settings = D().settings) =>
        `<header class="print-letterhead"><span class="print-letterhead-logo">${settings.logo ? `<img src="${esc(settings.logo)}" alt="Logo sekolah">` : ''}</span>
            <div class="print-letterhead-text"><strong>${esc(String(settings.nama_sekolah || 'Nama Sekolah').toUpperCase())}</strong>
                <b>${esc(settings.kegiatan || title)}</b><span>Tahun Ajaran ${esc(settings.tahun_ajaran || '-')} · Semester ${esc(settings.semester || '-')}</span></div>
            <span class="print-letterhead-spacer"></span></header><svg class="print-letterhead-rule" viewBox="0 0 100 1.825" preserveAspectRatio="none" aria-hidden="true"><line x1="0.3" y1="0.45" x2="99.7" y2="0.45" stroke="#000" stroke-width="0.9"/><line x1="0.3" y1="1.65" x2="99.7" y2="1.65" stroke="#000" stroke-width="0.35"/></svg><h1 class="print-document-title">${esc(title)}</h1>`;
    const printLetterheadStyles = `.print-letterhead{display:grid;grid-template-columns:18mm minmax(0,1fr) 18mm;align-items:center;min-height:21mm;text-align:center}.print-letterhead-logo{display:flex;width:18mm;height:18mm;align-items:center;justify-content:center}.print-letterhead-logo img{max-width:18mm;max-height:18mm;object-fit:contain}.print-letterhead-text{min-width:0}.print-letterhead-text strong,.print-letterhead-text b,.print-letterhead-text span{display:block}.print-letterhead-text strong{font-size:4.6mm;font-weight:700;letter-spacing:.3px;text-transform:uppercase}.print-letterhead-text b{margin-top:2px;font-size:3.5mm}.print-letterhead-text span{margin-top:2px;color:#444;font-size:2.7mm}.print-letterhead-rule{display:block;width:100%;height:1.825mm;margin:.5mm 0 4.7mm;overflow:visible}.print-document-title{margin:0 0 3mm;text-align:center;font-size:3.5mm;font-weight:700}`;

    /* ===================== HALAMAN ===================== */
    const MENU = [{
            id: 'dashboard',
            label: 'Dashboard',
            icon: 'layout-dashboard',
            roles: ['admin', 'guru']
        },
        {
            id: 'guru',
            label: 'Data Guru',
            icon: 'user-cog',
            roles: ['admin']
        },
        {
            id: 'kelas',
            label: 'Kelas',
            icon: 'school',
            roles: ['admin', 'guru']
        },
        {
            id: 'mata_pelajaran',
            label: 'Mata Pelajaran',
            icon: 'book-open',
            roles: ['admin', 'guru']
        },
        {
            id: 'siswa',
            label: 'Data Siswa',
            icon: 'users',
            roles: ['admin', 'guru']
        },
        {
            id: 'jadwal',
            label: 'LJK',
            icon: 'file-spreadsheet',
            roles: ['admin', 'guru']
        },
        {
            id: 'ruang',
            label: 'Ruang & Denah',
            icon: 'layout-grid',
            roles: ['admin']
        },
        {
            id: 'agenda',
            label: 'Jadwal',
            icon: 'calendar-days',
            roles: ['admin']
        },
        {
            id: 'scan',
            label: 'Scan LJK',
            icon: 'scan-line',
            roles: ['admin', 'guru']
        },
        {
            id: 'rekap',
            label: 'Rekap',
            icon: 'bar-chart-3',
            roles: ['admin', 'guru']
        },
        {
            id: 'pengaturan',
            label: 'Pengaturan',
            icon: 'settings',
            roles: ['admin']
        }
    ];
    const myMenu = () => MENU.filter(m => m.roles.includes(S.user.role));

    /* ---------- Dashboard ---------- */
    function pgDashboard() {
        const d = D(),
            js = visJadwal(),
            ids = new Set(js.map(j => j.id));
        const ljk = d.ljk.filter(l => ids.has(l.jadwal_id)),
            hs = d.hasil.filter(h => ids.has(h.jadwal_id));
        const aktif = a => a.length ? Math.round(a.filter(x => x.aktif !== false).length / a.length * 100) : 0;
        const kelasPakai = d.kelas.length ? Math.round(d.kelas.filter(k => d.siswa.some(x => x.kelas_id === k.id))
            .length / d.kelas.length * 100) : 0;
        const scanPct = ljk.length ? Math.round(hs.length / ljk.length * 100) : 0;
        const cards = [{
                t: 'Data Guru',
                s: `${d.guru.length} guru terdaftar`,
                p: aktif(d.guru),
                pl: 'aktif',
                c: '#6C5CE7',
                bg: '#ECE9FF',
                i: 'user-cog',
                go: isAdmin() ? 'guru' : 'dashboard'
            },
            {
                t: 'Data Siswa',
                s: `${d.siswa.length} siswa`,
                p: aktif(d.siswa),
                pl: 'aktif',
                c: '#F5B335',
                bg: '#FFF1D3',
                i: 'users',
                go: 'siswa'
            },
            {
                t: 'Data Kelas',
                s: `${d.kelas.length} kelas`,
                p: kelasPakai,
                pl: 'berisi siswa',
                c: '#7FD6E8',
                bg: '#D9F4FA',
                i: 'school',
                go: 'kelas'
            },
            {
                t: 'LJK Ujian',
                s: `${js.length} ujian • ${ljk.length} LJK`,
                p: scanPct,
                pl: 'sudah discan',
                c: '#E8505B',
                bg: '#FFE1E4',
                i: 'calendar-days',
                go: 'jadwal'
            }
        ];
        const sel = S.ui.dashJ;
        const hsel = sel ? hs.filter(h => h.jadwal_id === sel) : hs;
        const vals = hsel.map(h => Number(h.nilai));
        const avg = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
        const bins = [{
            n: '≥ 85',
            c: '#7FD6E8',
            f: v => v >= 85
        }, {
            n: '70 – 84',
            c: '#F5B335',
            f: v => v >= 70 && v < 85
        }, {
            n: '55 – 69',
            c: '#B8A9FF',
            f: v => v >= 55 && v < 70
        }, {
            n: '< 55',
            c: '#E8505B',
            f: v => v < 55
        }];
        const segs = bins.map(b => ({
            v: vals.filter(b.f).length,
            c: b.c,
            n: b.n
        }));
        const up = js.filter(j => j.status !== 'selesai').slice(0, 3);
        const belum = ljk.length - hs.length;
        return `
  <div class="row2">
    <div class="hero"><div><h2>Selamat ${greet()}, ${esc(S.user.nama.split(' ')[0])}!</h2><p>Atur ujian, cetak LJK, lalu scan lembar jawaban siswa dengan kamera. Nilai langsung dihitung otomatis.</p></div>
      <svg width="170" height="130" viewBox="0 0 200 150"><rect x="30" y="14" width="100" height="126" rx="12" fill="#fff"/><rect x="42" y="26" width="40" height="6" rx="3" fill="#2E2576"/>${[0, 1, 2, 3, 4].map(r => [0, 1, 2, 3].map(c => `<circle cx="${52 + c * 17}" cy="${50 + r * 17}" r="5" fill="${(r * 3 + c) % 4 === 1 ? '#2E2576' : 'none'}" stroke="#2E2576" stroke-width="1.5"/>`).join('')).join('')}<rect x="112" y="60" width="64" height="84" rx="12" fill="#6C5CE7"/><rect x="118" y="70" width="52" height="62" rx="6" fill="#F5F5FF"/><rect x="118" y="96" width="52" height="3" fill="#E8505B"/><circle cx="156" cy="40" r="16" fill="#22C55E"/><path d="M148 40l6 6 11-12" stroke="#fff" stroke-width="3.5" fill="none" stroke-linecap="round"/></svg></div>
    <div class="card"><div class="sec" style="margin-bottom:8px"><h3 style="margin:0">Ujian Aktif</h3><button class="link" data-act="go" data-p="jadwal">Lihat semua</button></div>
      ${up.length ? up.map(j => `<div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #F0F0FA"><div class="ico" style="width:42px;height:42px;background:#FFF1D3;color:#B97C00">${ic('clipboard-list', 18)}</div><div style="flex:1;min-width:0"><b style="font-size:13px">${esc(j.nama_ujian)}</b><small style="display:block;color:var(--muted)">${esc(j.kelas)} • ${j.jumlah_soal} soal</small></div></div>`).join('') : `<p style="color:var(--muted);padding:14px 0">Belum ada ujian aktif. Buat LJK baru di menu LJK.</p>`}
    </div></div>
  <div class="sec"><h2>Ringkasan Data</h2></div>
  <div class="g4">${cards.map(c => `<button class="card stat" data-act="go" data-p="${c.go}"><div class="t"><div class="ico" style="background:${c.bg};color:${c.c}">${ic(c.i, 22)}</div><div><b>${c.t}</b><small>${c.s}</small></div></div><div class="pl"><span style="color:var(--muted)">${c.pl}</span><span>${c.p}%</span></div><div class="pbar"><i style="width:${c.p}%;background:${c.c}"></i></div></button>`).join('')}</div>
  <div class="row3">
    <div><div class="sec"><h2>Akses Cepat</h2></div><div class="qk">
      <button class="qkb" data-act="go" data-p="scan"><span class="ico" style="width:34px;height:34px;background:#ECE9FF;color:#6C5CE7">${ic('scan-line', 16)}</span>Scan LJK<span class="b"><span class="bdg a">${belum} belum</span></span></button>
      <button class="qkb" data-act="jadwalForm"><span class="ico" style="width:34px;height:34px;background:#FFF1D3;color:#B97C00">${ic('file-spreadsheet', 16)}</span>Buat LJK<span class="b"><span class="bdg c">${js.length}</span></span></button>
      <button class="qkb" data-act="go" data-p="rekap"><span class="ico" style="width:34px;height:34px;background:#D9F4FA;color:#0E7C93">${ic('bar-chart-3', 16)}</span>Rekap Nilai<span class="b"><span class="bdg g">${hs.length} hasil</span></span></button>
      <button class="qkb" data-act="go" data-p="siswa"><span class="ico" style="width:34px;height:34px;background:#FFE1E4;color:#C0303C">${ic('users', 16)}</span>Data Siswa<span class="b"><span class="bdg r">${d.siswa.length}</span></span></button>
      ${isAdmin() ? `<button class="qkb" data-act="go" data-p="pengaturan"><span class="ico" style="width:34px;height:34px;background:#EEEEFA;color:#2E2576">${ic('settings', 16)}</span>Pengaturan Sekolah<span class="b"><span class="bdg p">ADMIN</span></span></button>` : ''}
      <button class="qkb" data-act="notif"><span class="ico" style="width:34px;height:34px;background:#D8F7E3;color:#13823A">${ic('bell', 16)}</span>Pemberitahuan</button>
    </div></div>
    <div class="navy"><div style="display:flex;justify-content:space-between;align-items:center;gap:8px"><h3>Statistik Nilai</h3>${ic('bar-chart-3', 20)}</div>
      <select data-bind="dashJ"><option value="">Semua ujian ▾</option>${js.map(j => `<option value="${j.id}" ${sel === j.id ? 'selected' : ''}>${esc(j.nama_ujian)}</option>`).join('')}</select>
      <div class="navs"><div class="l"><div><span>Rata-rata</span><b>${num(avg)}</b></div><div><span>Tertinggi</span><b>${vals.length ? num(Math.max(...vals)) : '-'}</b></div><div><span>Terendah</span><b>${vals.length ? num(Math.min(...vals)) : '-'}</b></div></div>
      ${donut(segs, 168, 22, vals.length ? num(avg, 0) : '–', vals.length ? 'rata-rata' : 'belum ada nilai')}
      <div class="leg">${segs.map(s => `<span><i style="background:${s.c}"></i>${s.n} (${s.v})</span>`).join('')}</div></div></div>
  </div>`;
    }

    /* ---------- Data Guru ---------- */
    function pgGuru() {
        const rows = D().guru.filter(g => matchQ([g.nik, g.nama])),
            pg = paginate(rows, 'guru'),
            adm = isAdmin();
        return head('Data Guru', 'Profil guru dan akun disinkronkan melalui impor E-Rapor', adm ?
                `<button class="btn ghost" data-act="importActiveSemester">${ic('download', 16)}Impor data E-Rapor</button>` : '') +
            `<div class="tw"><table><thead><tr><th>#</th><th>NIK</th><th>Nama</th><th>Status</th><th></th></tr></thead><tbody>${pg.rows.map((g, i) => `<tr><td>${pg.start + i + 1}</td><td>${esc(g.nik)}</td><td><b>${esc(g.nama)}</b></td><td><span class="bdg ${g.aktif === false ? 'r' : 'g'}">${g.aktif === false ? 'Nonaktif' : 'Aktif'}</span></td><td class="ac"><button class="btn sm ghost ico-b" title="Ubah" data-act="guruForm" data-id="${g.id}">${ic('pencil', 14)}</button> <button class="btn sm danger ico-b" title="Hapus" data-act="del" data-k="guru" data-id="${g.id}">${ic('trash-2', 14)}</button></td></tr>`).join('')}</tbody></table>${rows.length ? '' : empty('Belum ada data guru')}${pg.html}</div>`;
    }

    function pgMataPelajaran() {
        const kf = S.ui.mataPelajaranKelasF;
        const rows = D().mata_pelajaran
                .filter(m => (!kf || m.kelas_id === kf) &&
                    matchQ([m.nama, m.semester_id, kelasName(m.kelas_id), guruOf(m.guru_id)?.nama || '']))
                .sort((a, b) => a.nama.localeCompare(b.nama, 'id') || kelasName(a.kelas_id).localeCompare(kelasName(b.kelas_id), 'id')),
            pg = paginate(rows, 'mata_pelajaran');
        return head('Mata Pelajaran', 'Daftar mata pelajaran berdasarkan penugasan kelas dan guru dari E-Rapor',
                `<select class="inp" style="width:180px" data-bind="mataPelajaranKelasF"><option value="">Semua kelas</option>${kelasSorted().map(k => `<option value="${k.id}" ${k.id === kf ? 'selected' : ''}>${esc(k.nama)}</option>`).join('')}</select>` +
                (isAdmin() ? `<button class="btn ghost" data-act="importActiveSemester">${ic('download', 16)}Impor data E-Rapor</button>` : '')) +
            `<div class="tw"><table><thead><tr><th>#</th><th>Mata Pelajaran</th><th>Kelas</th><th>Guru Pengampu</th><th>Semester</th></tr></thead><tbody>${pg.rows.map((m, i) => `<tr><td>${pg.start + i + 1}</td><td><b>${esc(m.nama)}</b></td><td>${esc(kelasName(m.kelas_id))}</td><td>${esc(guruOf(m.guru_id)?.nama || '-')}</td><td>${esc(m.semester_id)}</td></tr>`).join('')}</tbody></table>${rows.length ? '' : empty('Belum ada mata pelajaran. Admin dapat mengimpor dari E-Rapor.')}${pg.html}</div>`;
    }

    function guruForm(id) {
        if (!id) return;
        const g = D().guru.find(x => x.id === id);
        openModal(
            `<h3>Ubah Guru</h3><form data-form="guru"><input type="hidden" name="id" value="${id}"><div class="fg">
            <label class="f"><span>NIK</span><input class="inp" name="nik" maxlength="16" value="${esc(g.nik)}"></label>
            <label class="f"><span>Nama lengkap *</span><input class="inp" name="nama" required value="${esc(g.nama)}"></label>
            <label class="f"><span>Status</span><select class="inp" name="aktif"><option value="1" ${g.aktif !== false ? 'selected' : ''}>Aktif</option><option value="0" ${g.aktif === false ? 'selected' : ''}>Nonaktif</option></select></label></div>
    <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">Simpan</button></div></form>`
        );
    }

    /* ---------- Data Siswa ---------- */
    const kelasList = () => kelasSorted().map(k => k.nama);

    function pgSiswa() {
        const kf = S.ui.kelasF;
        const rows = D().siswa.filter(s => (!kf || s.kelas === kf) && matchQ([s.nis, s.nisn, s.nama, s.kelas])),
            pg = paginate(rows, 'siswa');
        const adm = isAdmin();
        const actions = adm
            ? `<button class="btn" data-act="studentCards">${ic('printer', 16)}Cetak Kartu Ujian</button><button class="btn ghost" data-act="importActiveSemester">${ic('download', 16)}Impor data E-Rapor</button>`
            : '';
        return head('Data Siswa', adm ? 'Kelola data siswa per kelas' : 'Daftar siswa (hanya lihat)',
                `<select class="inp" style="width:180px" data-bind="kelasF"><option value="">Semua kelas</option>${kelasList().map(k => `<option ${k === kf ? 'selected' : ''}>${esc(k)}</option>`).join('')}</select>` +
                actions) +
            `<div class="tw"><table><thead><tr><th>#</th><th>NIS</th><th>NISN</th><th>Nama</th><th>Kelas</th><th>L/P</th><th>Status</th>${adm ? '<th></th>' : ''}</tr></thead><tbody>${pg.rows.map((s, i) => `<tr><td>${pg.start + i + 1}</td><td>${esc(s.nis)}</td><td>${esc(s.nisn)}</td><td><b>${esc(s.nama)}</b></td><td><span class="bdg c">${esc(s.kelas)}</span></td><td>${esc(s.jenis_kelamin)}</td><td><span class="bdg ${s.aktif === false ? 'r' : 'g'}">${s.aktif === false ? 'Nonaktif' : 'Aktif'}</span></td>${adm ? `<td class="ac">${s.aktif !== false ? `<button class="btn sm ghost ico-b" title="Pratinjau kartu peserta" data-act="studentCard" data-id="${esc(s.id)}">${ic('printer', 14)}</button> ` : ''}<button class="btn sm ghost ico-b" title="Ubah" data-act="siswaForm" data-id="${s.id}">${ic('pencil', 14)}</button> <button class="btn sm danger ico-b" title="Hapus" data-act="del" data-k="siswa" data-id="${s.id}">${ic('trash-2', 14)}</button></td>` : ''}</tr>`).join('')}</tbody></table>${rows.length ? '' : empty('Belum ada data siswa')}${pg.html}</div>`;
    }

    function studentParticipantClassCode(className) {
        const match = String(className || '').trim().match(/^(XII|XI|X|12|11|10)\D*?(\d{1,2})$/i);
        if (!match) return '';
        const grade = { X: 10, XI: 11, XII: 12, 10: 10, 11: 11, 12: 12 }[match[1].toUpperCase()];
        const section = Number(match[2]);
        return grade && section >= 1 && section <= 99
            ? `${String(grade).padStart(2, '0')}${String(section).padStart(2, '0')}`
            : '';
    }

    function studentCardSort(first, second) {
        return String(first.kelas || '').localeCompare(String(second.kelas || ''), 'id', { numeric: true }) ||
            String(first.nisn || first.nis || '').localeCompare(String(second.nisn || second.nis || ''), 'id', { numeric: true }) ||
            String(first.nama || '').localeCompare(String(second.nama || ''), 'id');
    }

    function printStudentCards(studentId = '') {
        if (!isAdmin()) return toast('Pratinjau kartu peserta hanya dapat dibuka oleh admin.', 'err');
        const activeStudents = D().siswa.filter(student => student.aktif !== false);
        const students = (studentId
            ? activeStudents.filter(student => student.id === studentId)
            : activeStudents.filter(student =>
                (!S.ui.kelasF || student.kelas === S.ui.kelasF) &&
                matchQ([student.nis, student.nisn, student.nama, student.kelas])
            )).sort(studentCardSort);
        if (!students.length) return toast('Tidak ada siswa aktif untuk dibuatkan kartu.', 'err');

        const year = String(D().settings.tahun_ajaran || '').match(/20\d{2}/)?.[0];
        if (!year) return toast('Tahun pelajaran belum valid untuk membuat nomor peserta.', 'err');

        const rosters = new Map();
        activeStudents.forEach(student => {
            const roster = rosters.get(student.kelas_id) || [];
            roster.push(student);
            rosters.set(student.kelas_id, roster);
        });
        rosters.forEach(roster => roster.sort(studentCardSort));

        const cards = [];
        for (const student of students) {
            const classCode = studentParticipantClassCode(student.kelas);
            if (!classCode) {
                return toast(`Kode kelas untuk "${student.kelas || '-'}" tidak dapat dibuat. Gunakan format kelas seperti XII MIPA 1.`, 'err', 5000);
            }
            const roster = rosters.get(student.kelas_id) || [];
            const sequence = roster.findIndex(item => item.id === student.id) + 1;
            if (!sequence || sequence > 999) {
                return toast(`Nomor urut peserta kelas ${student.kelas} harus berada antara 001 dan 999.`, 'err', 5000);
            }
            const seat = D().denah.find(item => item.siswa_id === student.id);
            const room = seat && D().ruang.find(item => item.id === seat.ruang_id);
            if (!seat || !room) {
                return toast(`Siswa ${student.nama} belum ditempatkan pada denah ruang. Lengkapi penempatan sebelum mencetak kartu.`, 'err', 5000);
            }

            const participantNumber = `${year.slice(-2)}-${classCode}-${pad(sequence)}`;
            const roomAndSeat = `${room.kode} - ${kelasName(room.kelas_id) || room.nama} / Meja #${seat.nomor_kursi}`;
            cards.push(`<article class="student-card">
                <header class="student-card-header"><span class="student-card-logo">${D().settings.logo ? `<img src="${esc(D().settings.logo)}" alt="Logo sekolah">` : ''}</span><div><b>${esc(String(D().settings.nama_sekolah || 'Nama Sekolah').toUpperCase())}</b><strong>${esc(String(D().settings.kegiatan || 'UJIAN').toUpperCase())}</strong><span class="student-card-period"><span>Tahun Pelajaran ${esc(D().settings.tahun_ajaran || '-')}</span><span>Semester ${esc(D().settings.semester || '-')}</span></span></div><span class="student-card-spacer" aria-hidden="true"></span></header>
                <div class="student-card-divider"></div>
                <h2 class="student-card-title">KARTU PESERTA UJIAN</h2>
                <table class="student-card-details"><tbody>
                    <tr><td>No. Peserta</td><td>:</td><td><b>${participantNumber}</b></td></tr>
                    <tr><td>Nama Peserta</td><td>:</td><td><b class="student-card-name" title="${esc(student.nama)}">${esc(student.nama)}</b></td></tr>
                    <tr><td>NISN / Kelas</td><td>:</td><td>${esc(student.nisn || '-')} / <b>${esc(student.kelas || '-')}</b></td></tr>
                    <tr><td>Ruang / Kursi</td><td>:</td><td>${esc(roomAndSeat)}</td></tr>
                </tbody></table>
            </article>`);
        }

        const styles = `.student-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:5mm}.student-card{min-height:40mm;overflow:hidden;padding:2.5mm;border:1.2px solid #111;border-radius:2mm;break-inside:avoid;page-break-inside:avoid}.student-card-header{display:grid;grid-template-columns:12mm minmax(0,1fr) 12mm;min-height:10mm;align-items:center;text-align:center}.student-card-header b,.student-card-header strong,.student-card-header span:not(.student-card-spacer){display:block}.student-card-header b{font-size:7pt}.student-card-header strong{margin-top:1mm;font-size:7.2pt}.student-card-header span:not(.student-card-spacer){margin-top:.5mm;font-size:6.5pt}.student-card-header span.student-card-logo{display:flex;width:12mm;height:10mm;align-items:center;justify-content:center}.student-card-logo img{max-width:100%;max-height:10mm;object-fit:contain}.student-card-header span.student-card-period{display:flex;justify-content:center;gap:2mm;white-space:nowrap}.student-card-divider{margin:1.5mm 0 2mm;border-top:1.2px solid #111}.student-card-title{margin:0 0 2mm;padding:1.2mm;border:1px solid #333;background:#f2f2f2;text-align:center;font-size:7.5pt}.student-card-details{width:100%;border-collapse:collapse;table-layout:fixed;font-size:7.5pt;line-height:1.25}.student-card-details td{border:0;padding:1px 0;vertical-align:top}.student-card-details td:first-child{width:31%}.student-card-details td:nth-child(2){width:3%}.student-card-details td:last-child{overflow-wrap:anywhere}.student-card-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.student-card-grid{grid-template-columns:1fr}}@media print{.student-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-card{break-inside:avoid;page-break-inside:avoid}}`;
        previewHTML(
            'Kartu Peserta Ujian',
            'Pratinjau kartu ujian · A4 / Folio',
            `<div class="student-card-grid">${cards.join('')}</div>`,
            styles
        );
    }

    function siswaForm(id) {
        if (!id) return;
        const s = siswaOf(id);
        openModal(
            `<h3>Ubah Siswa</h3><form data-form="siswa"><input type="hidden" name="id" value="${id}"><div class="fg">
    <label class="f"><span>NIS *</span><input class="inp" name="nis" required value="${esc(s.nis)}"></label>
    <label class="f"><span>NISN</span><input class="inp" name="nisn" value="${esc(s.nisn)}"></label>
    <label class="f full"><span>Nama lengkap *</span><input class="inp" name="nama" required value="${esc(s.nama)}"></label>
    <label class="f"><span>Kelas *</span><select class="inp" name="kelas_id" required><option value="">Pilih kelas</option>${kelasSorted().map(k => `<option value="${k.id}" ${k.id === s.kelas_id ? 'selected' : ''}>${esc(k.nama)}</option>`).join('')}</select>${D().kelas.length ? '' : '<small style="color:#C0303C;margin-left:6px">Belum ada kelas. Tambahkan di menu Kelas.</small>'}</label>
    <label class="f"><span>Jenis kelamin</span><select class="inp" name="jenis_kelamin"><option value="L" ${s.jenis_kelamin !== 'P' ? 'selected' : ''}>Laki-laki</option><option value="P" ${s.jenis_kelamin === 'P' ? 'selected' : ''}>Perempuan</option></select></label>
    <label class="f"><span>Status</span><select class="inp" name="aktif"><option value="1" ${s.aktif !== false ? 'selected' : ''}>Aktif</option><option value="0" ${s.aktif === false ? 'selected' : ''}>Nonaktif</option></select></label></div>
    <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">Simpan</button></div></form>`
        );
    }

    /* ---------- Kelas ---------- */
    function pgKelas() {
        const rows = kelasSorted().filter(k => matchQ([k.nama, k.wali_kelas])),
            pg = paginate(rows, 'kelas'),
            adm = isAdmin();
        return head('Kelas', adm ? 'Daftar kelas dan wali kelas dari E-Rapor' :
                'Daftar kelas (hanya lihat)', adm ?
                `<button class="btn ghost" data-act="importActiveSemester">${ic('download', 16)}Impor data E-Rapor</button>` : '') +
            `<div class="tw"><table><thead><tr><th>#</th><th>Nama Kelas</th><th>Semester ID</th><th>Wali Kelas</th><th>Siswa</th><th>Ujian</th>${adm ? '<th></th>' : ''}</tr></thead><tbody>${pg.rows.map((k, i) => { const ns = D().siswa.filter(x => x.kelas_id === k.id); return `<tr><td>${pg.start + i + 1}</td><td><span class="bdg c">${esc(k.nama)}</span></td><td>${esc(k.semester_id || '-')}</td><td>${esc(k.wali_kelas || '-')}</td><td>${ns.filter(x => x.aktif !== false).length} aktif <small style="color:var(--muted)">/ ${ns.length}</small></td><td>${D().jadwal.filter(j => j.kelas_id === k.id).length}</td>${adm ? `<td class="ac"><button class="btn sm ghost ico-b" title="Ubah" data-act="kelasForm" data-id="${k.id}">${ic('pencil', 14)}</button> <button class="btn sm danger ico-b" title="Hapus" data-act="del" data-k="kelas" data-id="${k.id}">${ic('trash-2', 14)}</button></td>` : ''}</tr>`; }).join('')}</tbody></table>${rows.length ? '' : empty('Belum ada kelas. Impor dari E-Rapor.')}${pg.html}</div>`;
    }

    function kelasForm(id) {
        if (!id) return;
        const k = D().kelas.find(x => x.id === id);
        openModal(
            `<h3>Ubah Kelas</h3><form data-form="kelas"><input type="hidden" name="id" value="${id}"><div class="fg">
    <label class="f full"><span>Nama kelas *</span><input class="inp" name="nama" required value="${esc(k.nama)}" placeholder="mis. X IPA 1"></label>
    <label class="f full"><span>Wali kelas</span><input class="inp" name="wali_kelas" value="${esc(k.wali_kelas)}" placeholder="Nama wali kelas"></label></div>
    <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">Simpan</button></div></form>`
        );
    }

    /* ---------- Jadwal ---------- */
    const komposisiSoal = [{
            value: 'pilihan_ganda',
            label: 'Full pilihan ganda'
        },
        {
            value: 'pilihan_ganda_benar_salah',
            label: 'Pilihan ganda + benar/salah'
        },
        {
            value: 'pilihan_ganda_benar_salah_menjodohkan',
            label: 'Pilihan ganda + benar/salah + menjodohkan'
        },
        {
            value: 'pilihan_ganda_benar_salah_menjodohkan_essai',
            label: 'Pilihan ganda + benar/salah + menjodohkan + essai'
        }
    ];
    const labelKomposisiSoal = value => komposisiSoal.find(x => x.value === value)?.label || komposisiSoal[0].label;
    const objectiveQuestionRows = j => [{
            type: 'pilihan_ganda',
            count: Number(j.jumlah_pg ?? j.jumlah_soal ?? 0),
            choices: Number(j.jumlah_opsi)
        },
        {
            type: 'benar_salah',
            count: Number(j.jumlah_benar_salah || 0),
            choices: 2
        },
        {
            type: 'menjodohkan',
            count: Number(j.jumlah_menjodohkan || 0),
            choices: Number(j.jumlah_opsi)
        }
    ].flatMap(section => Array.from({
        length: section.count
    }, (_, index) => ({
        type: section.type,
        index: index + 1,
        choices: section.choices
    })));
    const omrQuestionRows = j => objectiveQuestionRows(j).filter(row => row.type !== 'menjodohkan');
    const matchingQuestionRows = j => objectiveQuestionRows(j).filter(row => row.type === 'menjodohkan');
    const essayCount = j => Number(j.jumlah_essai || 0);
    const questionLabel = row =>
        `${row.type === 'pilihan_ganda' ? 'PG' : row.type === 'benar_salah' ? 'B/S' : 'Jodoh'} ${row.index}`;
    const answerOptionLabels = row => row.type === 'benar_salah' ? ['Benar', 'Salah'] : LET.slice(0, row.choices).split(
        '');

    function syncScheduleCounts(form = document.querySelector('[data-form="jadwal"]')) {
        if (!form) return;
        const rank = komposisiSoal.findIndex(x => x.value === form.elements.komposisi_soal.value);
        const maxPg = form.elements.komposisi_soal.value === 'pilihan_ganda' ? 50 : 40;
        form.elements.jumlah_pg.max = maxPg;
        form.querySelector('[data-soal-rank="0"] span').textContent = `Jumlah pilihan ganda (maks. ${maxPg})`;
        let total = 0;
        form.querySelectorAll('[data-soal-rank]').forEach(label => {
            const input = label.querySelector('input');
            const included = Number(label.dataset.soalRank) <= rank;
            input.disabled = !included;
            if (!included) input.value = 0;
            if (included) total += Number(input.value) || 0;
        });
        form.elements.jumlah_soal.value = total;
        form.querySelector('[data-soal-total]').value = `${total} soal`;
    }

    function mapelWithoutLjk() {
        const existingSubjectIds = new Set(D().jadwal.map(jadwal => jadwal.mata_pelajaran_id));
        return D().mata_pelajaran
            .filter(subject => !existingSubjectIds.has(subject.id))
            .sort((a, b) => kelasName(a.kelas_id).localeCompare(kelasName(b.kelas_id), 'id') ||
                a.nama.localeCompare(b.nama, 'id'));
    }

    function missingLjkStudents(jadwal) {
        const existingStudentIds = new Set(ljkOf(jadwal.id).map(item => item.siswa_id));
        return D().siswa
            .filter(student => student.kelas_id === jadwal.kelas_id &&
                student.aktif !== false &&
                !existingStudentIds.has(student.id))
            .sort((a, b) => a.nama.localeCompare(b.nama));
    }

    function pgJadwal() {
        const allSchedules = visJadwal(),
            missingSubjects = mapelWithoutLjk();
        const rows = allSchedules.filter(j => matchQ([j.nama_ujian, j.kelas]))
            .sort((a, b) => a.nama_ujian.localeCompare(b.nama_ujian, 'id')),
            pg = paginate(rows, 'jadwal', 12);
        const actions = `${missingSubjects.length ? `<button class="btn amber" data-act="bulkJadwalForm">${ic('plus', 16)}Buat LJK Semua Mapel (${missingSubjects.length})</button>` : ''}
            <button class="btn" data-act="jadwalForm">${ic('plus', 16)}Buat LJK</button>`;
        return head('LJK', 'Atur ujian, kunci jawaban dan LJK setiap siswa',
                actions) +
            (rows.length ? `<div class="jg">${pg.rows.map(j => {
      const l = ljkOf(j.id).length, h = hasilOf(j.id).length, p = l ? Math.round(h / l * 100) : 0, kk = D().kunci.filter(k => k.jadwal_id === j.id).length;
      return `<div class="card jc"><div style="display:flex;justify-content:flex-end;gap:8px"><span class="bdg ${j.status === 'selesai' ? 'g' : 'a'}">${j.status === 'selesai' ? 'Selesai' : 'Aktif'}</span></div>
            <h3>${esc(j.nama_ujian)}</h3><div class="m"><span>${ic('school', 12)} Kelas ${esc(j.kelas)} • KKM ${kkmOf(j)}</span><span>${ic('user', 12)} ${esc(guruOf(j.guru_id)?.nama || '-')}</span><span>Komposisi: ${esc(labelKomposisiSoal(j.komposisi_soal))}</span><span>${j.jumlah_soal} soal • opsi A–${LET[j.jumlah_opsi - 1]} • ${kk} paket kunci</span></div>
      <div class="pl"><span style="color:var(--muted)">LJK discan</span><span>${h}/${l}</span></div><div class="pbar"><i style="width:${p}%;background:var(--violet)"></i></div>
      <div class="ba"><button class="btn sm" data-act="jdOpen" data-id="${j.id}">${ic('key-round', 14)}Kunci & LJK</button><button class="btn sm ghost" data-act="jadwalForm" data-id="${j.id}">${ic('pencil', 14)}Ubah</button><button class="btn sm danger ico-b" data-act="del" data-k="jadwal" data-id="${j.id}">${ic('trash-2', 14)}</button></div></div>`;
    }).join('')}</div>${pg.html}` : `<div class="tw">${empty('Belum ada LJK. Klik “Buat LJK”.')}</div>`);
    }

    function bulkJadwalForm() {
        const subjects = mapelWithoutLjk();
        if (!subjects.length) return toast('Semua penugasan mata pelajaran sudah memiliki LJK.');

        const j = {
            komposisi_soal: 'pilihan_ganda',
            kkm: D().settings.kkm_default ?? 75,
            jumlah_soal: 40,
            jumlah_pg: 40,
            jumlah_benar_salah: 0,
            jumlah_menjodohkan: 0,
            jumlah_essai: 0,
            jumlah_opsi: 5,
            skor_benar: 1,
            skor_salah: 0,
            skor_kosong: 0,
            status: 'aktif'
        };
        const classCount = new Set(subjects.map(subject => subject.kelas_id)).size;
        openModal(
            `<h3>Buat LJK Semua Mata Pelajaran</h3>
            <div class="info" style="margin:12px 0">Akan dibuat <b>${subjects.length} LJK</b> untuk ${subjects.length} penugasan mapel aktif di <b>${classCount} kelas</b>. Nama ujian, guru, dan kelas mengikuti data penugasan E-Rapor. Penugasan yang sudah memiliki LJK tidak dibuat ulang. Pengaturan di bawah diterapkan sama untuk semua LJK.</div>
            <form data-form="bulkJadwal"><div class="fg">
            <label class="f"><span>Komposisi soal *</span><select class="inp" name="komposisi_soal" required>${komposisiSoal.map(x => `<option value="${x.value}" ${x.value === j.komposisi_soal ? 'selected' : ''}>${x.label}</option>`).join('')}</select></label>
            <label class="f"><span>KKM *</span><input class="inp" type="number" min="0" max="100" name="kkm" required value="${j.kkm}"></label>
            <label class="f" data-soal-rank="0"><span>Jumlah pilihan ganda (maks. 50)</span><input class="inp" type="number" min="0" max="50" name="jumlah_pg" required value="${j.jumlah_pg}"></label>
            <label class="f" data-soal-rank="1"><span>Jumlah benar/salah (maks. 10)</span><input class="inp" type="number" min="0" max="10" name="jumlah_benar_salah" required value="${j.jumlah_benar_salah}"></label>
            <label class="f" data-soal-rank="2"><span>Jumlah menjodohkan</span><input class="inp" type="number" min="0" max="50" name="jumlah_menjodohkan" required value="${j.jumlah_menjodohkan}"></label>
            <label class="f" data-soal-rank="3"><span>Jumlah essai</span><input class="inp" type="number" min="0" max="50" name="jumlah_essai" required value="${j.jumlah_essai}"></label>
            <label class="f"><span>Total soal</span><input class="inp" data-soal-total readonly value="${j.jumlah_soal} soal"></label>
            <input type="hidden" name="jumlah_soal" value="${j.jumlah_soal}">
            <label class="f"><span>Jumlah opsi</span><select class="inp" name="jumlah_opsi"><option value="5" selected>5 (A–E)</option><option value="4">4 (A–D)</option></select></label>
            <label class="f"><span>Skor benar</span><input class="inp" type="number" step="0.25" name="skor_benar" value="${j.skor_benar}"></label>
            <label class="f"><span>Skor salah</span><input class="inp" type="number" step="0.25" name="skor_salah" value="${j.skor_salah}"></label>
            <label class="f"><span>Skor kosong</span><input class="inp" type="number" step="0.25" name="skor_kosong" value="${j.skor_kosong}"></label>
            <label class="f"><span>Status</span><select class="inp" name="status"><option value="aktif" selected>Aktif</option><option value="selesai">Selesai</option></select></label></div>
            <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">${ic('plus', 16)}Buat ${subjects.length} LJK Mata Pelajaran</button></div></form>`,
            true
        );
        syncScheduleCounts($('#modal [data-form="bulkJadwal"]'));
    }

    function jadwalForm(id) {
        const existingJadwal = id ? D().jadwal.find(jadwal => jadwal.id === id) : null,
            occupiedSubjectIds = new Set(D().jadwal
                .filter(jadwal => jadwal.id !== id)
                .map(jadwal => jadwal.mata_pelajaran_id)),
            subjects = D().mata_pelajaran.filter(subject =>
                !occupiedSubjectIds.has(subject.id) || subject.id === existingJadwal?.mata_pelajaran_id
            ),
            selectedSubject = subjects.find(subject => subject.id === existingJadwal?.mata_pelajaran_id);
        if (!id && !subjects.length) {
            return toast(D().mata_pelajaran.length ?
                'Semua mata pelajaran aktif sudah memiliki LJK.' :
                'Belum ada mata pelajaran. Admin perlu mengimpor data E-Rapor terlebih dahulu.',
                'err');
        }
        const j = id ? existingJadwal : {
            komposisi_soal: 'pilihan_ganda',
            kkm: D().settings.kkm_default ?? 75,
            mata_pelajaran_id: '',
            kelas_id: '',
            jumlah_soal: 40,
            jumlah_pg: 40,
            jumlah_benar_salah: 0,
            jumlah_menjodohkan: 0,
            jumlah_essai: 0,
            jumlah_opsi: 5,
            skor_benar: 1,
            skor_salah: 0,
            skor_kosong: 0,
            status: 'aktif',
            guru_id: isAdmin() ? '' : S.user.id
        };
        openModal(
            `<h3>${id ? 'Ubah' : 'Buat'} LJK</h3><form data-form="jadwal"><input type="hidden" name="id" value="${id || ''}"><div class="fg">
    <label class="f full"><span>Mata pelajaran *</span><select class="inp" name="mata_pelajaran_id" required><option value="">Pilih mata pelajaran sesuai kelas dan guru</option>${subjects.map(m => `<option value="${m.id}" ${m.id === j.mata_pelajaran_id ? 'selected' : ''}>${esc(m.nama)} — ${esc(kelasName(m.kelas_id))} — ${esc(guruOf(m.guru_id)?.nama || '-')}</option>`).join('')}</select>${subjects.length ? '<small style="color:var(--muted);margin-left:6px">Hanya mata pelajaran yang belum memiliki LJK yang dapat dipilih. Guru dan kelas mengikuti penugasannya.</small>' : '<small style="color:#C0303C;margin-left:6px">Mata pelajaran untuk LJK ini tidak lagi tersedia.</small>'}</label>
    <label class="f full"><span>Nama ujian (otomatis)</span><input class="inp" name="nama_ujian" readonly required value="${esc(selectedSubject?.nama || j.nama_ujian || '')}"></label>
    <label class="f"><span>Komposisi soal *</span><select class="inp" name="komposisi_soal" required>${komposisiSoal.map(x => `<option value="${x.value}" ${x.value === j.komposisi_soal ? 'selected' : ''}>${x.label}</option>`).join('')}</select></label>
    <label class="f"><span>KKM *</span><input class="inp" type="number" min="0" max="100" name="kkm" required value="${j.kkm ?? D().settings.kkm_default ?? 75}"></label>
    <input type="hidden" name="guru_id" value="${selectedSubject?.guru_id || j.guru_id || ''}">
    <input type="hidden" name="kelas_id" value="${selectedSubject?.kelas_id || j.kelas_id || ''}">
    <label class="f"><span>Guru pengampu</span><input class="inp" data-schedule-guru readonly value="${esc(guruOf(selectedSubject?.guru_id || j.guru_id)?.nama || '')}"></label>
    <label class="f"><span>Kelas</span><input class="inp" data-schedule-class readonly value="${esc(kelasName(selectedSubject?.kelas_id || j.kelas_id))}"></label>
    <label class="f" data-soal-rank="0"><span>Jumlah pilihan ganda (maks. 50)</span><input class="inp" type="number" min="0" max="50" name="jumlah_pg" required value="${j.jumlah_pg ?? j.jumlah_soal}"></label>
    <label class="f" data-soal-rank="1"><span>Jumlah benar/salah (maks. 10)</span><input class="inp" type="number" min="0" max="10" name="jumlah_benar_salah" required value="${j.jumlah_benar_salah || 0}"></label>
    <label class="f" data-soal-rank="2"><span>Jumlah menjodohkan</span><input class="inp" type="number" min="0" max="50" name="jumlah_menjodohkan" required value="${j.jumlah_menjodohkan || 0}"></label>
    <label class="f" data-soal-rank="3"><span>Jumlah essai</span><input class="inp" type="number" min="0" max="50" name="jumlah_essai" required value="${j.jumlah_essai || 0}"></label>
    <label class="f"><span>Total soal</span><input class="inp" data-soal-total readonly value="${j.jumlah_soal} soal"></label>
    <input type="hidden" name="jumlah_soal" value="${j.jumlah_soal}">
    <label class="f"><span>Jumlah opsi</span><select class="inp" name="jumlah_opsi"><option value="5" ${j.jumlah_opsi == 5 ? 'selected' : ''}>5 (A–E)</option><option value="4" ${j.jumlah_opsi == 4 ? 'selected' : ''}>4 (A–D)</option></select></label>
    <label class="f"><span>Skor benar</span><input class="inp" type="number" step="0.25" name="skor_benar" value="${j.skor_benar}"></label>
    <label class="f"><span>Skor salah</span><input class="inp" type="number" step="0.25" name="skor_salah" value="${j.skor_salah}"></label>
    <label class="f"><span>Skor kosong</span><input class="inp" type="number" step="0.25" name="skor_kosong" value="${j.skor_kosong}"></label>
    <label class="f"><span>Status</span><select class="inp" name="status"><option value="aktif" ${j.status !== 'selesai' ? 'selected' : ''}>Aktif</option><option value="selesai" ${j.status === 'selesai' ? 'selected' : ''}>Selesai</option></select></label></div>
    <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">Simpan</button></div></form>`
        );
    }

    /* ----- Detail Jadwal: Kunci jawaban & LJK siswa ----- */
    function jdOpen(id) {
        const j = D().jadwal.find(x => x.id === id);
        const draft = {};
        D().kunci.filter(k => k.jadwal_id === id).forEach(k => {
            draft[k.paket] = Array.from({
                length: objectiveQuestionRows(j).length
            }, (_, i) => k.jawaban[i] || '');
        });
        if (!Object.keys(draft).length) draft.A = Array(objectiveQuestionRows(j).length).fill('');
        openModal('', true);
        S.ui.jd = {
            id,
            tab: 'kunci',
            paket: Object.keys(draft).sort()[0],
            draft,
        };
        jdRender();
    }

    function jdRender() {
        const jd = S.ui.jd;
        if (!jd) return;
        $('#modal .modal')?.classList.remove('jd-copy-modal');
        const j = D().jadwal.find(x => x.id === jd.id);
        if (!j) return closeModal();
        const body = jd.tab === 'kunci' ? jdKunci(j) : jdLjk(j);
        setModal(
            `<div class="mh"><div><h3 style="margin:0">${esc(j.nama_ujian)}</h3><small style="color:var(--muted)">Kelas ${esc(j.kelas)} • ${j.jumlah_soal} soal total • ${omrQuestionRows(j).length} PG/B-S dipindai • ${essayCount(j)} essai</small></div><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>
  <div class="tabs2" style="margin-top:12px"><button class="${jd.tab === 'kunci' ? 'on' : ''}" data-act="jdTab" data-t="kunci">Kunci Jawaban</button><button class="${jd.tab === 'ljk' ? 'on' : ''}" data-act="jdTab" data-t="ljk">LJK Universal</button></div>${body}`
        );
    }

    function sameAnswerStructure(source, target) {
        const sourceRows = objectiveQuestionRows(source);
        const targetRows = objectiveQuestionRows(target);
        return sourceRows.length === targetRows.length &&
            sourceRows.every((row, index) =>
                row.type === targetRows[index].type && row.choices === targetRows[index].choices
            );
    }

    function examGradeLevel(jadwal) {
        const match = String(kelasName(jadwal.kelas_id) || '').trim().match(/^(XII|XI|X|10|11|12)(?=$|[\s._/-])/i);
        if (!match) return '';
        return { X: '10', XI: '11', XII: '12', 10: '10', 11: '11', 12: '12' }[match[1].toUpperCase()] || '';
    }

    function sameSubjectGradeAndTeacher(source, target) {
        const sourceSubject = D().mata_pelajaran.find(subject => subject.id === source.mata_pelajaran_id);
        const targetSubject = D().mata_pelajaran.find(subject => subject.id === target.mata_pelajaran_id);
        const normalizeSubject = name => String(name || '').trim().replace(/\s+/g, ' ').toLowerCase();
        const sourceGrade = examGradeLevel(source);
        return Boolean(sourceSubject?.nama && targetSubject?.nama && sourceGrade &&
            source.guru_id && source.guru_id === target.guru_id &&
            sourceGrade === examGradeLevel(target) &&
            normalizeSubject(sourceSubject.nama) === normalizeSubject(targetSubject.nama));
    }

    function jdCopyKeyForm() {
        const jd = S.ui.jd;
        const source = D().jadwal.find(item => item.id === jd?.id);
        if (!source) return toast('Jadwal sumber tidak ditemukan.', 'err');
        if (!D().kunci.some(key => key.jadwal_id === source.id)) {
            return toast('Simpan kunci jawaban pada jadwal sumber terlebih dahulu.', 'err');
        }
        const targets = visJadwal().filter(item =>
            item.id !== source.id && sameSubjectGradeAndTeacher(source, item) && sameAnswerStructure(source, item)
        ).sort((a, b) => a.nama_ujian.localeCompare(b.nama_ujian, 'id'));
        if (!targets.length) {
            return toast('Tidak ada jadwal lain dengan mata pelajaran, tingkat, guru pengampu, dan susunan soal kunci yang sama.', 'err');
        }

        setModal(`<div class="mh"><h3 style="margin:0">Salin Kunci Jawaban</h3><button class="btn sm ghost ico-b" data-act="jdCopyKeyCancel">${ic('x', 16)}</button></div>
            <p style="font-size:12px;color:var(--muted)">Pilih satu atau beberapa jadwal tujuan. Mata pelajaran, tingkat, guru pengampu, dan susunan soal harus sama dengan <b>${esc(source.nama_ujian)}</b>.</p>
            <div class="jd-copy-targets" id="jdCopyTargets">${targets.map(item =>
                `<label class="jd-copy-target"><input type="checkbox" name="jdCopyTarget" value="${esc(item.id)}"><span><strong>${esc(item.nama_ujian)}</strong><small>Kelas ${esc(item.kelas || kelasName(item.kelas_id) || '-')}</small></span></label>`
            ).join('')}</div>
            <div class="macts"><button type="button" class="btn ghost" data-act="jdCopyKeyCancel">Batal</button><button type="button" class="btn" data-act="jdCopyKeyConfirm">Salin Kunci</button></div>`);
        $('#modal .modal')?.classList.add('jd-copy-modal');
    }

    async function jdCopyKeyToSchedule() {
        const jd = S.ui.jd;
        const source = D().jadwal.find(item => item.id === jd?.id);
        if (!source) return toast('Jadwal sumber atau tujuan tidak ditemukan.', 'err');
        if (!D().kunci.some(key => key.jadwal_id === source.id)) {
            return toast('Simpan kunci jawaban pada jadwal sumber terlebih dahulu.', 'err');
        }
        const targetIds = [...new Set($$('#jdCopyTargets input[name="jdCopyTarget"]:checked').map(input => input.value))];
        if (!targetIds.length) return toast('Pilih minimal satu jadwal tujuan.', 'err');
        const visibleSchedules = visJadwal();
        const targets = targetIds.map(id => visibleSchedules.find(item => item.id === id));
        if (targets.some(item => !item)) return toast('Salah satu jadwal tujuan tidak ditemukan.', 'err');
        for (const target of targets) {
            if (!sameSubjectGradeAndTeacher(source, target)) {
                return toast('Mata pelajaran, tingkat kelas, dan guru pengampu harus sama pada semua jadwal tujuan.', 'err');
            }
            if (!sameAnswerStructure(source, target)) {
                return toast('Susunan soal PG, benar/salah, atau menjodohkan harus sama pada semua jadwal tujuan.', 'err');
            }
        }

        const packages = Object.keys(jd.draft).sort();
        if (!packages.length) return toast('Tidak ada paket kunci untuk disalin.', 'err');
        const targetKeysBySchedule = new Map();
        let hasSavedResults = false;
        const overwriteWarnings = [];
        for (const target of targets) {
            const targetKeys = D().kunci.filter(key => key.jadwal_id === target.id);
            targetKeysBySchedule.set(target.id, targetKeys);
            if (!targetKeys.length) continue;
            const overwrittenPackages = targetKeys
                .filter(key => packages.includes(key.paket))
                .map(key => key.paket)
                .sort();
            const affectedLjkIds = new Set(ljkOf(target.id)
                .filter(item => overwrittenPackages.includes(item.paket))
                .map(item => item.id));
            hasSavedResults = hasSavedResults || D().hasil.some(result => affectedLjkIds.has(result.ljk_id));
            const packageWarning = overwrittenPackages.length
                ? `, Paket ${overwrittenPackages.join(', ')} ditimpa`
                : '';
            overwriteWarnings.push(`${target.nama_ujian} — ${target.kelas || kelasName(target.kelas_id)}${packageWarning}`);
        }
        if (overwriteWarnings.length) {
            const resultWarning = hasSavedResults
                ? ' Nilai tersimpan untuk LJK terkait tidak dihitung ulang otomatis.'
                : '';
            if (!(await confirmBox(
                `Beberapa jadwal tujuan sudah memiliki kunci jawaban: ${overwriteWarnings.join('; ')}. Paket tujuan lain tetap dipertahankan.${resultWarning} Lanjutkan menyalin ke semua jadwal yang dipilih?`,
                'Timpa dan Salin'
            ))) return;
        }

        const ok = await guard(async () => {
            for (const target of targets) {
                const targetRows = objectiveQuestionRows(target);
                const targetKeys = targetKeysBySchedule.get(target.id);
                for (const paket of packages) {
                    const answers = targetRows.map((row, index) => {
                        const answer = jd.draft[paket][index] || '';
                        return LET.indexOf(answer) >= 0 && LET.indexOf(answer) < row.choices ? answer : '';
                    });
                    const existing = targetKeys.find(key => key.paket === paket);
                    if (existing) await dbUpdate('kunci', existing.id, { jawaban: answers });
                    else await dbInsert('kunci', {
                        jadwal_id: target.id,
                        paket,
                        jawaban: answers
                    });
                }
            }
            await reload(['kunci']);
            return true;
        }, 'Menyalin kunci jawaban…');
        if (ok) {
            toast(`Kunci Paket ${packages.join(', ')} berhasil disalin ke ${targets.length} jadwal.`);
            jdRender();
        }
    }

    function jdKunci(j) {
        const jd = S.ui.jd,
            ps = Object.keys(jd.draft).sort(),
            arr = jd.draft[jd.paket],
            rows = objectiveQuestionRows(j),
            appliedText = arr.some(Boolean) ? arr.map(answer => answer || '-').join('') : '',
            used = ljkOf(j.id).some(l => l.paket === jd.paket);
        return `<div class="chips">${ps.map(p => `<button class="chip ${p === jd.paket ? 'on' : ''}" data-act="jdPaket" data-p="${p}">Paket ${p}</button>`).join('')}${ps.length > 1 ? `<button class="chip" style="background:#FFE1E4;color:#C0303C" data-act="jdDelPaket" ${used ? 'title="Paket dipakai LJK siswa"' : ''}>Hapus Paket ${jd.paket}</button>` : ''}</div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"><input class="inp" id="jdPaste" style="max-width:420px" value="${esc(appliedText)}" placeholder="Tempel kunci; gunakan - untuk nomor kosong"><button class="btn sm ghost" data-act="jdPaste">Terapkan</button><span class="bdg a" id="jdCount">${arr.filter(Boolean).length}/${rows.length} terisi</span></div>
    <div class="vgrid">${arr.map((a, q) => {
            const row = rows[q];
            return `<div class="kq ${a ? '' : 'missing'}" ${a ? '' : 'title="Nomor ini belum memiliki jawaban"'}><b>${questionLabel(row)}</b>${answerOptionLabels(row).map((label, index) => {
                const letter = LET[index];
                return `<button type="button" class="bub ${a === letter ? 'on' : ''}" title="${label}" data-act="jdKey" data-q="${q}" data-l="${letter}">${row.type === 'benar_salah' ? (letter === 'A' ? 'B' : 'S') : letter}</button>`;
            }).join('')}</div>`;
        }).join('')}</div>
  <div class="macts"><button class="btn ghost" data-act="jdCopyKey">${ic('key-round', 16)}Salin ke Jadwal</button><button class="btn amber" data-act="jdSaveKey">${ic('save', 16)}Simpan Kunci Jawaban</button></div>`;
    }

    function jdLjk(j) {
        const jd = S.ui.jd,
            ls = ljkOf(j.id).map(l => ({
                l,
                s: siswaOf(l.siswa_id)
            })).filter(x => x.s).sort((a, b) => a.l.nomor_ljk - b.l.nomor_ljk),
            ps = Object.keys(jd.draft).sort();
        const sisK = D().siswa.filter(s => s.kelas_id === j.kelas_id && s.aktif !== false).length,
            missing = missingLjkStudents(j).length;
        const rows = ls.map(({
            l,
            s
        }) => {
            const h = D().hasil.find(x => x.ljk_id === l.id);
            return `<tr><td>${pad(l.nomor_ljk)}</td><td>${esc(s.nis)}</td><td><b>${esc(s.nama)}</b></td>
        <td>${esc(l.paket)}</td>
        <td>${h ? `<span class="bdg g">Nilai ${num(h.nilai)}</span>` : '<span class="bdg a">Belum discan</span>'}</td>
        <td class="ac"><button class="btn sm danger ico-b" data-act="jdDelLjk" data-id="${l.id}">${ic('trash-2', 14)}</button></td></tr>`;
        }).join('');
        return `<div class="info">LJK dicetak tanpa QR. Guru memilih mata pelajaran/ujian sebelum memindai dan memilih siswa secara manual setelah scan. Pilihan ganda dan benar/salah dipindai (maksimal 50 nomor); penjodohan serta essai tetap tersedia dan diinput/dinilai manual. Isi kunci jawaban ujian sebelum memproses hasil. Untuk pencatatan nilai kelas ini: <b>${sisK}</b> siswa aktif • data siswa tersedia <b>${ls.length}</b> • belum disiapkan <b>${missing}</b>.</div>
  <div class="acts" style="margin-bottom:12px"><button class="btn amber" data-act="jdGen" ${missing ? '' : 'disabled'}>${ic('wand-2', 16)}Siapkan Daftar Siswa (${missing})</button><button class="btn" data-act="jdPrintAll">${ic('printer', 16)}Cetak LJK Universal</button></div>
  <div class="tw" style="max-height:52vh"><table><thead><tr><th>No. Data</th><th>NIS</th><th>Nama</th><th>Paket Kunci</th><th>Status</th><th></th></tr></thead><tbody>${rows}</tbody></table>${ls.length ? '' : empty('Siapkan data siswa untuk mulai mencatat hasil.')}</div>`;
    }

    /* ---------- Scan LJK ---------- */
    let CVP = null;

    function loadOpenCV() {
        if (CVP) return CVP;
        CVP = new Promise((res, rej) => {
            const urls = ['https://docs.opencv.org/4.8.0/opencv.js', 'https://docs.opencv.org/4.x/opencv.js'];
            let ui = 0;
            const ready = () => window.cv && window.cv.Mat;
            if (ready()) return res();
            const next = () => {
                if (ui >= urls.length) {
                    CVP = null;
                    return rej(new Error('Gagal memuat OpenCV.js. Periksa koneksi internet.'));
                }
                const s = document.createElement('script');
                s.async = true;
                s.src = urls[ui++];
                s.onerror = () => {
                    s.remove();
                    next();
                };
                s.onload = () => {
                    let t = 0,
                        thenDone = false;
                    const iv = setInterval(() => {
                        t++;
                        if (ready()) {
                            clearInterval(iv);
                            return res();
                        }
                        if (window.cv && typeof window.cv.then === 'function' && !thenDone) {
                            thenDone = true;
                            window.cv.then(m => {
                                if (m && m.Mat) window.cv = m;
                            });
                        }
                        if (t > 400) {
                            clearInterval(iv);
                            CVP = null;
                            rej(new Error('OpenCV.js tidak siap, coba muat ulang halaman.'));
                        }
                    }, 150);
                };
                document.head.appendChild(s);
            };
            next();
        });
        return CVP;
    }

    function findMarkers(gray, w, h, T) {
        const blur = T(new cv.Mat());
        cv.GaussianBlur(gray, blur, new cv.Size(5, 5), 0);
        const bin = T(new cv.Mat());
        let bs = Math.max(51, Math.round(Math.min(w, h) / 10));
        if (bs % 2 === 0) bs++;
        cv.adaptiveThreshold(blur, bin, 255, cv.ADAPTIVE_THRESH_MEAN_C, cv.THRESH_BINARY_INV, bs, 12);
        const cons = T(new cv.MatVector()),
            hier = T(new cv.Mat());
        cv.findContours(bin, cons, hier, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);
        const tot = w * h,
            cand = [];
        for (let i = 0; i < cons.size(); i++) {
            const c = cons.get(i);
            try {
                const area = cv.contourArea(c);
                if (area < tot * 0.00006 || area > tot * 0.02) continue;
                const rr = cv.minAreaRect(c),
                    rw = rr.size.width,
                    rh = rr.size.height;
                if (!rw || !rh) continue;
                if (Math.min(rw, rh) / Math.max(rw, rh) < 0.6 || area / (rw * rh) < 0.8) continue;
                const r = cv.boundingRect(c),
                    cx0 = r.x + r.width / 2,
                    cy0 = r.y + r.height / 2;
                const pts = [
                    [.57, 0],
                    [-.57, 0],
                    [0, .57],
                    [0, -.57],
                    [.4, .4],
                    [-.4, .4],
                    [.4, -.4],
                    [-.4, -.4]
                ];
                let ink = 0;
                pts.forEach(([fx, fy]) => {
                    const x = Math.round(cx0 + fx * r.width / 2),
                        y = Math.round(cy0 + fy * r.height / 2);
                    if (x >= 0 && y >= 0 && x < w && y < h && bin.ucharAt(y, x) > 0) ink++;
                });
                if (ink < 7) continue;
                const m = cv.moments(c);
                cand.push({
                    x: m.m10 / m.m00,
                    y: m.m01 / m.m00,
                    area
                });
            } finally {
                c.delete();
            }
        }
        cand.sort((a, b) => b.area - a.area);
        const top = cand.slice(0, 9);
        let best = null;
        const sortCW = q => {
            const cx = q.reduce((a, p) => a + p.x, 0) / 4,
                cy = q.reduce((a, p) => a + p.y, 0) / 4;
            return q.slice().sort((a, b) => Math.atan2(a.y - cy, a.x - cx) - Math.atan2(b.y - cy, b.x - cx));
        };
        const polyArea = q => {
            let a = 0;
            for (let i = 0; i < 4; i++) {
                const p = q[i],
                    n = q[(i + 1) % 4];
                a += p.x * n.y - n.x * p.y;
            }
            return Math.abs(a) / 2;
        };
        for (let a = 0; a < top.length; a++)
            for (let b = a + 1; b < top.length; b++)
                for (let c = b + 1; c < top.length; c++)
                    for (let d = c + 1; d < top.length; d++) {
                        const q = [top[a], top[b], top[c], top[d]],
                            ar = q.map(p => p.area).sort((x, y) => x - y);
                        if (ar[2] / ar[0] > 1.9) continue;
                        const sm = (ar[0] + ar[1] + ar[2]) / 3,
                            ratio = ar[3] / sm;
                        if (ratio < 1.5 || ratio > 3.6) continue;
                        const pa = polyArea(sortCW(q));
                        if (!best || pa > best.pa) best = {
                            q,
                            pa
                        };
                    }
        if (!best) return null;
        const cw = sortCW(best.q);
        let k = 0;
        cw.forEach((p, i) => {
            if (p.area > cw[k].area) k = i;
        });
        return [cw[(k + 2) % 4], cw[(k + 3) % 4], cw[k], cw[(k + 1) % 4]]; // TL, TR, BR(besar), BL
    }
    async function analyzeImage(srcCanvas) {
        await loadOpenCV();
        const trash = [];
        const T = m => (trash.push(m), m);
        try {
            const sc = Math.min(1, 1800 / Math.max(srcCanvas.width, srcCanvas.height));
            const c0 = document.createElement('canvas');
            c0.width = Math.round(srcCanvas.width * sc);
            c0.height = Math.round(srcCanvas.height * sc);
            c0.getContext('2d').drawImage(srcCanvas, 0, 0, c0.width, c0.height);
            const src = T(cv.imread(c0)),
                gray = T(new cv.Mat());
            cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
            const p = findMarkers(gray, c0.width, c0.height, T);
            if (!p) throw new Error(
                'Penanda hitam di 4 sudut LJK tidak terdeteksi. Pastikan seluruh lembar masuk frame, kertas datar, dan pencahayaan merata.'
            );
            const sp = T(cv.matFromArray(4, 1, cv.CV_32FC2, p.flatMap(o => [o.x, o.y])));
            const markers = G.markers,
                dp = T(cv.matFromArray(4, 1, cv.CV_32FC2, [
                    markers.topLeft.x * G.S, markers.topLeft.y * G.S,
                    markers.topRight.x * G.S, markers.topRight.y * G.S,
                    markers.bottomRight.x * G.S, markers.bottomRight.y * G.S,
                    markers.bottomLeft.x * G.S, markers.bottomLeft.y * G.S
                ]));
            const M = T(cv.getPerspectiveTransform(sp, dp)),
                wc = T(new cv.Mat()),
                wg = T(new cv.Mat()),
                sz = new cv.Size(G.W, G.H);
            cv.warpPerspective(src, wc, M, sz, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar(255, 255, 255,
                255));
            cv.warpPerspective(gray, wg, M, sz, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar(255));
            const warp = document.createElement('canvas');
            cv.imshow(warp, wc);
            const bl = T(new cv.Mat()),
                bin = T(new cv.Mat());
            cv.GaussianBlur(wg, bl, new cv.Size(3, 3), 0);
            cv.adaptiveThreshold(bl, bin, 255, cv.ADAPTIVE_THRESH_MEAN_C, cv.THRESH_BINARY_INV, 41, 12);
            return {
                warp,
                bin: new Uint8Array(bin.data)
            };
        } finally {
            trash.forEach(m => {
                try {
                    m.delete();
                } catch (e) {}
            });
        }
    }

    function readBubbles(bin, questions) {
        const R = Math.round(1.3 * G.S),
            offs = [];
        for (let dy = -R; dy <= R; dy++)
            for (let dx = -R; dx <= R; dx++)
                if (dx * dx + dy * dy <= R * R) offs.push([dx, dy]);
        const out = [];
        for (let q = 0; q < questions.length; q++) {
            const row = [];
            for (let j = 0; j < questions[q].choices; j++) {
                const cx = Math.round(bx(q, j) * G.S),
                    cy = Math.round(by(q) * G.S);
                let best = 1;
                for (const sy of [-2, 0, 2])
                    for (const sx of [-2, 0, 2]) {
                        let c = 0;
                        for (const [dx, dy] of offs) {
                            const x = cx + sx + dx,
                                y = cy + sy + dy;
                            if (x >= 0 && y >= 0 && x < G.W && y < G.H && bin[y * G.W + x]) c++;
                        }
                        best = Math.min(best, c / offs.length);
                    }
                row.push(best);
            }
            out.push(row);
        }
        return out;
    }

    function decideRow(row) {
        const mx = Math.max(...row);
        if (mx < 0.35) return '';
        const marked = row.map((v, i) => v >= Math.max(0.35, mx * 0.72) ? i : -1).filter(i => i >= 0);
        return marked.length > 1 ? '*' : LET[marked[0]];
    }
    const scanJ = () => visJadwal().find(j => j.id === S.ui.scanJ);

    function stopCam() {
        LIVE.on = false;
        clearTimeout(LIVE.t);
        try {
            S.cam?.getTracks().forEach(t => t.stop());
        } catch (e) {}
        S.cam = null;
    }
    const A4R = 210 / 297,
        LIVE = {
            on: false,
            t: 0,
            stable: 0,
            last: null,
            cool: 0,
            busy: false
        };
    /* Potong frame video sesuai area yang terlihat di kotak A4 (object-fit: cover, di tengah) */
    function cropFrame(outW) {
        const v = $('#camVideo');
        if (!v || !v.videoWidth) return null;
        const vw = v.videoWidth,
            vh = v.videoHeight;
        let sw, sh, sx, sy;
        if (vw / vh > A4R) {
            sh = vh;
            sw = vh * A4R;
            sx = (vw - sw) / 2;
            sy = 0;
        } else {
            sw = vw;
            sh = vw / A4R;
            sx = 0;
            sy = (vh - sh) / 2;
        }
        const c = document.createElement('canvas');
        c.width = Math.round(outW || sw);
        c.height = Math.round((outW || sw) / A4R);
        c.getContext('2d').drawImage(v, sx, sy, sw, sh, 0, 0, c.width, c.height);
        return c;
    }
    async function startCam() {
        stopCam();
        try {
            S.cam = await navigator.mediaDevices.getUserMedia({
                video: {
                    facingMode: {
                        ideal: 'environment'
                    },
                    width: {
                        ideal: 1920
                    },
                    height: {
                        ideal: 1080
                    }
                },
                audio: false
            });
            const v = $('#camVideo');
            if (v) {
                v.srcObject = S.cam;
                await v.play();
                $('#camHint')?.remove();
            }
            liveStart();
        } catch (e) {
            toast('Kamera tidak dapat diakses: ' + (e.message || e.name) + '. Gunakan opsi Unggah Foto.', 'err',
                5000);
        }
    }

    function snap() {
        const c = cropFrame();
        if (!c) return toast('Kamera belum aktif', 'err');
        handleCanvas(c);
    }
    /* Deteksi 4 kotak sudut secara langsung di pratinjau kamera (auto-crop & auto-ambil) */
    async function liveStart() {
        const stat = $('#camStat');
        if (stat) {
            stat.style.display = 'block';
            stat.textContent = 'Memuat pemindai…';
        }
        try {
            await loadOpenCV();
        } catch (e) {
            if (stat) stat.textContent = 'Deteksi otomatis tidak tersedia — gunakan tombol Ambil & Proses';
            return;
        }
        if (!S.cam) return;
        LIVE.on = true;
        LIVE.stable = 0;
        LIVE.last = null;
        LIVE.cool = Date.now() + 800;
        liveTick();
    }

    function liveDraw(pts, w, h, state) {
        const ov = $('#camOv');
        if (!ov) return;
        if (ov.width !== w) {
            ov.width = w;
            ov.height = h;
        }
        const x = ov.getContext('2d');
        x.clearRect(0, 0, w, h);
        if (!pts) return;
        x.lineWidth = 3;
        x.strokeStyle = state === 'ok' ? '#22C55E' : '#F5B335';
        x.fillStyle = 'rgba(34,197,94,.14)';
        x.beginPath();
        pts.forEach((p, i) => i ? x.lineTo(p.x, p.y) : x.moveTo(p.x, p.y));
        x.closePath();
        x.fill();
        x.stroke();
        pts.forEach(p => {
            x.beginPath();
            x.arc(p.x, p.y, 7, 0, 7);
            x.fillStyle = state === 'ok' ? '#22C55E' : '#F5B335';
            x.fill();
        });
    }

    function liveTick() {
        if (!LIVE.on || !S.cam || S.page !== 'scan') return;
        LIVE.t = setTimeout(liveTick, 240);
        if (LIVE.busy || S.scanR || !$('#camVideo')) return;
        LIVE.busy = true;
        const trash = [];
        const T = m => (trash.push(m), m);
        try {
            const c = cropFrame(480);
            if (!c) return;
            const w = c.width,
                h = c.height;
            const src = T(cv.imread(c)),
                gray = T(new cv.Mat());
            cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
            const p = findMarkers(gray, w, h, T),
                stat = $('#camStat'),
                box = $('#camBox');
            if (!p) {
                LIVE.stable = 0;
                LIVE.last = null;
                liveDraw(null, w, h);
                box?.classList.remove('ok');
                if (stat) stat.textContent = 'Arahkan kamera: 4 kotak hitam sudut LJK harus terlihat';
                return;
            }
            const moved = LIVE.last ? Math.max(...p.map((o, i) => Math.hypot(o.x - LIVE.last[i].x, o.y - LIVE.last[i]
                .y))) : 999;
            LIVE.stable = moved < 7 ? LIVE.stable + 1 : 1;
            LIVE.last = p.map(o => ({
                x: o.x,
                y: o.y
            }));
            const ready = LIVE.stable >= 5;
            liveDraw(p, w, h, ready ? 'ok' : 'wait');
            box?.classList.toggle('ok', ready);
            if (stat) stat.textContent = ready ? (S.ui.autoCap ? 'Terdeteksi, memproses…' :
                'Terdeteksi — tekan Ambil & Proses') : 'Sudut terdeteksi — tahan kamera stabil…';
            if (ready && S.ui.autoCap && Date.now() > LIVE.cool) {
                LIVE.cool = Date.now() + 2500;
                LIVE.stable = 0;
                const full = cropFrame();
                if (full) handleCanvas(full);
            }
        } catch (e) {
            console.warn('live', e);
        } finally {
            trash.forEach(m => {
                try {
                    m.delete();
                } catch (e) {}
            });
            LIVE.busy = false;
        }
    }

    function handleFile(file) {
        if (!file) return;
        const img = new Image();
        img.onload = () => {
            const c = document.createElement('canvas');
            c.width = img.naturalWidth;
            c.height = img.naturalHeight;
            c.getContext('2d').drawImage(img, 0, 0);
            URL.revokeObjectURL(img.src);
            handleCanvas(c);
        };
        img.onerror = () => toast('File gambar tidak dapat dibaca', 'err');
        img.src = URL.createObjectURL(file);
    }
    async function handleCanvas(c) {
        const j = scanJ();
        if (!j) return toast('Pilih LJK ujian terlebih dulu', 'err');
        if (!ljkOf(j.id).length) return toast('Daftar siswa untuk ujian ini belum disiapkan. Buka menu LJK > Kunci & LJK, lalu siapkan daftar siswa.', 'err');
        try {
            setBusy(true, 'Memuat pemindai & memproses gambar…');
            const questions = omrQuestionRows(j),
                matchingQuestions = matchingQuestionRows(j),
                a = await analyzeImage(c),
                fills = readBubbles(a.bin, questions),
                answers = [...fills.map(decideRow), ...Array(matchingQuestions.length).fill('')],
                warn = [];
            if (matchingQuestions.length) warn.push(
                'Jawaban menjodohkan tidak dipindai. Guru perlu memasukkan pilihan pasangan secara manual.');
            if (essayCount(j)) warn.push(
                'Essai tidak dipindai. Guru perlu memasukkan nilai tiap soal essai secara manual.');
            const flat = fills.flat().sort((x, y) => x - y);
            if (flat[flat.length >> 1] > 0.25) warn.push(
                'Banyak bulatan terbaca gelap: periksa bayangan/pencahayaan lalu scan ulang.');
            warn.push('Pilih siswa secara manual sebelum menyimpan hasil pemindaian.');
            setResult({
                ljk: null,
                answers,
                warp: a.warp,
                warn
            });
        } catch (e) {
            console.error(e);
            toast(errMsg(e), 'err', 6000);
        } finally {
            setBusy(false);
        }
    }

    function simulateScan() {
        const j = scanJ();
        if (!j) return toast('Pilih LJK ujian terlebih dulu', 'err');
        const ls = ljkOf(j.id).filter(l => !D().hasil.some(h => h.ljk_id === l.id));
        if (!ls.length) return toast('Semua LJK sudah punya hasil / belum ada LJK', 'err');
        const ljk = ls[Math.floor(Math.random() * ls.length)],
            key = kunciOf(j.id, ljk.paket),
            questions = objectiveQuestionRows(j);
        const answers = questions.map((question, i) => question.type === 'menjodohkan' ? '' :
            Math.random() < 0.22 ? (Math.random() < 0.3 ? '' : LET[Math.floor(Math.random() *
                question.choices)]) : (key[i] || ''));
        setResult({
            ljk,
            answers,
            essayScores: Array(essayCount(j)).fill(0),
            warp: null,
            warn: ['Mode simulasi (Preview): jawaban dibuat acak dari kunci, tanpa gambar.']
        });
    }

    function setResult(r) {
        const j = scanJ();
        r.key = r.ljk ? kunciOf(j.id, r.ljk.paket) : null;
        const existing = r.ljk && D().hasil.find(h => h.ljk_id === r.ljk.id);
        r.essayScores = Array.from({
                length: essayCount(j)
            }, (_, index) =>
            Number(r.essayScores?.[index] ?? existing?.nilai_essai?.[index] ?? 0));
        S.scanR = r;
        renderResult();
        $('#scanResult')?.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }

    function calcR() {
        const j = scanJ(),
            r = S.scanR;
        return r.key && r.key.length ? scoreAnswers(r.answers, r.key, j, r.essayScores) : null;
    }

    function renderResult() {
        const box = $('#scanResult');
        if (!box) return;
        const r = S.scanR,
            j = scanJ();
        if (!r || !j) {
            box.innerHTML = '';
            return;
        }
        const s = r.ljk ? siswaOf(r.ljk.siswa_id) : null,
            ex = r.ljk ? D().hasil.find(h => h.ljk_id === r.ljk.id) : null;
        const questions = objectiveQuestionRows(j),
            matchingStart = omrQuestionRows(j).length;
        const opts = ljkOf(j.id).sort((a, b) => a.nomor_ljk - b.nomor_ljk).map(l => {
            const sw = siswaOf(l.siswa_id);
            return `<option value="${l.id}" ${r.ljk?.id === l.id ? 'selected' : ''}>${pad(l.nomor_ljk)} - ${esc(sw?.nama)} (${l.paket})${D().hasil.some(h => h.ljk_id === l.id) ? ' ✓' : ''}</option>`;
        }).join('');
        box.innerHTML =
            `<div class="card" style="margin-top:20px"><div class="sec"><h2 style="font-size:18px">Hasil Pemindaian</h2><button class="btn sm ghost" data-act="scanCancel">${ic('x', 14)}Batal</button></div>
  ${r.warn.map(w => `<div class="warn">${ic('alert-triangle', 14)} ${esc(w)}</div>`).join('')}
  <div class="scangrid"><div>${r.warp ? '' : '<p style="color:var(--muted);font-size:12px;margin-bottom:6px">Gambar tidak tersedia (simulasi).</p>'}<canvas id="ovCanvas" class="ovc"></canvas><p style="font-size:11px;color:var(--muted);margin-top:6px;text-align:center">Hanya bulatan PG dan benar/salah yang dipindai.<br>Gambar sudah dipotong & diluruskan otomatis (auto-crop) dari 4 kotak sudut.<br>Hijau = benar • Merah = salah • Cincin hijau = kunci jawaban</p></div>
  <div><label class="f"><span>Siswa / LJK</span><select class="inp" data-bind="scanLjk"><option value="">— pilih siswa —</option>${opts}</select></label>
  ${s ? `<div class="info"><b>${esc(s.nama)}</b> • NIS ${esc(s.nis)} • ${esc(s.kelas)} • Paket ${r.ljk.paket}${ex ? `<br><span style="color:#C0303C">Sudah pernah discan (nilai ${num(ex.nilai)}). Menyimpan akan menimpa hasil lama.</span>` : ''}</div>` : '<div class="warn">Pilih siswa agar kunci jawaban dapat dipakai.</div>'}
  <div class="sg" id="scanSum"></div>
  <p style="font-size:12px;font-weight:700;margin-bottom:6px">Jawaban hasil scan: pilihan ganda & benar/salah</p>
    <div class="vgrid" id="qaGrid">${r.answers.slice(0, matchingStart).map((a, q) => {
            const row = questions[q];
            return `<div class="qa" data-q="${q}"><b>${questionLabel(row)}</b><select data-bind="ans" data-q="${q}"><option value="">–</option>${answerOptionLabels(row).map((label, index) => `<option value="${LET[index]}" ${a === LET[index] ? 'selected' : ''}>${label}</option>`).join('')}<option value="*" ${a === '*' ? 'selected' : ''}>Ganda</option></select><small>${r.key ? 'K:' + (r.key[q] || '?') : ''}</small></div>`;
        }).join('')}</div>
    ${matchingStart < questions.length ? `<div class="info">Masukkan jawaban penjodohan berdasarkan lembar siswa. Bagian ini tidak dipindai dan akan dikoreksi otomatis memakai kunci jawaban.</div><p style="font-size:12px;font-weight:700;margin-bottom:6px">Jawaban penjodohan (input manual guru)</p><div class="vgrid">${r.answers.slice(matchingStart).map((a, offset) => {
            const q = matchingStart + offset,
                row = questions[q];
            return `<div class="qa" data-q="${q}"><b>${questionLabel(row)}</b><select data-bind="ans" data-q="${q}"><option value="">–</option>${answerOptionLabels(row).map((label, index) => `<option value="${LET[index]}" ${a === LET[index] ? 'selected' : ''}>${label}</option>`).join('')}</select><small>${r.key ? 'K:' + (r.key[q] || '?') : ''}</small></div>`;
        }).join('')}</div>` : ''}
    ${essayCount(j) ? `<div class="info">Essai tidak dipindai. Guru menilai jawaban siswa dan memasukkan skor secara manual.</div><div class="fg"><b class="f full">Nilai essai manual (maks. ${num(j.skor_benar)} per soal)</b>${r.essayScores.map((score, index) => `<label class="f"><span>Essai ${index + 1}</span><input class="inp" type="number" min="0" max="${Number(j.skor_benar)}" step="0.25" data-bind="essayScore" data-q="${index}" value="${score}"></label>`).join('')}</div>` : ''}
  <div class="macts"><button class="btn ghost" data-act="scanCancel">Scan ulang</button><button class="btn amber" data-act="scanSave" ${s ? '' : 'disabled'}>${ic('save', 16)}Simpan Hasil</button></div></div></div></div>`;
        icons();
        refreshResult();
    }

    function refreshResult() {
        const r = S.scanR,
            j = scanJ();
        if (!r || !j) return;
        const sc = calcR();
        const sum = $('#scanSum');
        if (sum) sum.innerHTML = sc ?
            `<div class="card"><small>Benar</small><b style="color:#13823A">${sc.benar}</b></div><div class="card"><small>Salah</small><b style="color:#C0303C">${sc.salah}</b></div><div class="card"><small>Kosong</small><b>${sc.kosong}</b></div>${essayCount(j) ? `<div class="card"><small>Skor essai</small><b>${num(sc.skor_essai)}</b></div>` : ''}<div class="card"><small>Nilai</small><b style="color:${sc.nilai >= kkmOf(j) ? '#13823A' : '#C0303C'}">${num(sc.nilai)}</b></div>` :
            '';
        $$('#scanResult .qa').forEach(el => {
            const q = +el.dataset.q,
                a = r.answers[q];
            el.className = 'qa ' + (!r.key ? '' : a === '' ? 'em' : a === r.key[q] ? 'ok' : 'no');
        });
        const cv2 = $('#ovCanvas');
        if (!cv2) return;
        cv2.width = G.W;
        cv2.height = G.H;
        const ctx = cv2.getContext('2d');
        if (r.warp) ctx.drawImage(r.warp, 0, 0);
        else {
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, G.W, G.H);
        }
        const questions = omrQuestionRows(j);
        for (let q = 0; q < questions.length; q++)
            for (let k = 0; k < questions[q].choices; k++) {
                const question = questions[q],
                    x = bx(q, k) * G.S,
                    y = by(q) * G.S,
                    L = LET[k],
                    a = r.answers[q],
                    key = r.key ? r.key[q] : null;
                if (!r.warp) {
                    ctx.beginPath();
                    ctx.arc(x, y, G.r * G.S, 0, 7);
                    ctx.strokeStyle = '#999';
                    ctx.lineWidth = 1.5;
                    ctx.stroke();
                    ctx.fillStyle = '#999';
                    ctx.font = '12px sans-serif';
                    ctx.fillText(question.type === 'benar_salah' ? (L === 'A' ? 'B' : 'S') : L, x - 4, y + 4);
                }
                if (a === L || a === '*') {
                    ctx.beginPath();
                    ctx.arc(x, y, G.r * G.S * 0.9, 0, 7);
                    ctx.fillStyle = key ? (a === key ? 'rgba(34,197,94,.55)' : 'rgba(232,80,91,.55)') :
                        'rgba(108,92,231,.5)';
                    ctx.fill();
                }
                if (key === L && a !== key) {
                    ctx.beginPath();
                    ctx.arc(x, y, G.r * G.S * 1.15, 0, 7);
                    ctx.strokeStyle = '#16a34a';
                    ctx.lineWidth = 3;
                    ctx.stroke();
                }
            }
    }
    async function saveResult() {
        const r = S.scanR,
            j = scanJ();
        if (!r?.ljk) return toast('Pilih siswa dulu', 'err');
        if (!r.key || !r.key.some(Boolean)) return toast('Kunci jawaban paket ' + r.ljk.paket + ' belum diisi',
            'err');
        const sc = calcR(),
            ex = D().hasil.find(h => h.ljk_id === r.ljk.id);
        if (ex && !(await confirmBox(
                `LJK ini sudah punya hasil (nilai ${num(ex.nilai)}). Timpa dengan nilai ${num(sc.nilai)}?`,
                'Timpa'))) return;
        const {
            skor_essai,
            ...scoreFields
        } = sc;
        const row = {
            ljk_id: r.ljk.id,
            jadwal_id: j.id,
            siswa_id: r.ljk.siswa_id,
            jawaban: r.answers,
            nilai_essai: r.essayScores,
            ...scoreFields,
            scanned_by: S.user.nama,
            scanned_at: new Date().toISOString()
        };
        const ok = await guard(async () => {
            if (ex) await dbUpdate('hasil', ex.id, row);
            else await dbInsert('hasil', [row]);
            await reload(['hasil']);
            return true;
        }, 'Menyimpan…');
        if (ok) {
            toast(`Tersimpan: ${siswaOf(r.ljk.siswa_id)?.nama} — nilai ${num(sc.nilai)}`);
            S.scanR = null;
            LIVE.cool = Date.now() + 2500;
            LIVE.stable = 0;
            const keep = S.ui.scanMode === 'cam' && S.cam;
            renderView();
            if (keep) startCam();
        }
    }

    function pgScan() {
        const js = visJadwal();
        const j = scanJ(),
            ls = j ? ljkOf(j.id) : [],
            hs = j ? hasilOf(j.id) : [];
        const recent = hs.slice().sort((a, b) => (b.scanned_at || '').localeCompare(a.scanned_at || '')).slice(0, 8);
        return head('Scan LJK', 'Pilih mata pelajaran/ujian, pindai LJK universal, lalu pilih siswa') +
            `<div class="card" style="margin-bottom:20px"><div class="fg"><label class="f" style="margin:0"><span>Mata pelajaran / ujian (pilih manual)</span><select class="inp" data-bind="scanJ"><option value="">— pilih ujian —</option>${js.map(x => `<option value="${x.id}" ${x.id === S.ui.scanJ ? 'selected' : ''}>${esc(x.nama_ujian)} — ${esc(x.kelas)}</option>`).join('')}</select></label>
    <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap"><span class="bdg c">${ls.length} LJK</span><span class="bdg g">${hs.length} discan</span><span class="bdg a">${ls.length - hs.length} belum</span></div></div></div>
    ${!j ? `<div class="tw">${empty(js.length ? 'Pilih mata pelajaran/ujian terlebih dahulu untuk memulai pemindaian.' : 'Belum ada LJK ujian.')}</div>` : `
    <div class="scangrid"><div class="card"><div class="tabs2"><button class="${S.ui.scanMode === 'cam' ? 'on' : ''}" data-act="scanMode" data-m="cam">${ic('camera', 14)} Kamera</button><button class="${S.ui.scanMode === 'file' ? 'on' : ''}" data-act="scanMode" data-m="file">${ic('upload', 14)} Unggah Foto</button></div>
      ${S.ui.scanMode === 'cam' ? `<div class="vid a4" id="camBox"><video id="camVideo" playsinline muted></video><canvas class="ov" id="camOv"></canvas><div class="gd"></div><span id="camHint">Kamera belum aktif</span><div class="st" id="camStat" style="display:none"></div></div><div class="acts" style="margin-top:12px;justify-content:center"><button class="btn ghost" data-act="camStart">${ic('video', 16)}Aktifkan Kamera</button><button class="btn amber" data-act="camSnap">${ic('scan-line', 16)}Ambil & Proses</button><button class="btn ghost" data-act="autoToggle" id="autoBtn">${S.ui.autoCap ? 'Auto-ambil: ON' : 'Auto-ambil: OFF'}</button></div>` :
        `<div class="vid" style="aspect-ratio:auto;padding:34px 16px;text-align:center"><div>${ic('image-up', 40)}<p style="margin:8px 0 14px">Pilih foto LJK (JPG/PNG) atau ambil foto dengan kamera HP</p><label class="btn amber">${ic('upload', 16)}Pilih Foto<input type="file" accept="image/*" capture="environment" hidden data-bind="scanFile"></label></div></div>`}
      <div class="info" style="margin:14px 0 0"><b>Tips:</b> seluruh lembar harus terlihat termasuk 4 kotak hitam di sudut, kertas datar, cahaya merata tanpa bayangan, dan kamera tegak lurus ke kertas. Cetak LJK dengan skala 100%.</div></div>
      <div class="card"><h3>Terakhir discan</h3>${recent.length ? recent.map(h => `<div style="display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #F0F0FA"><span><b>${esc(siswaOf(h.siswa_id)?.nama || '-')}</b><small style="display:block;color:var(--muted)">${h.benar} benar • ${h.salah} salah • ${h.kosong} kosong</small></span><span class="bdg ${h.nilai >= kkmOf(j) ? 'g' : 'r'}">${num(h.nilai)}</span></div>`).join('') : '<p style="color:var(--muted)">Belum ada hasil scan untuk ujian ini.</p>'}</div></div>
    <div id="scanResult"></div>`}`;
    }

    /* ---------- Rekap ---------- */
    function rekapRows(j) {
        return ljkOf(j.id).map(l => {
            const s = siswaOf(l.siswa_id),
                h = D().hasil.find(x => x.ljk_id === l.id);
            return {
                l,
                s,
                h
            };
        }).filter(x => x.s).sort((a, b) => a.s.kelas.localeCompare(b.s.kelas) || a.s.nama.localeCompare(b.s.nama));
    }

    function pgRekap() {
        const R = S.ui.rekap,
            js = visJadwal();
        if (!js.some(j => j.id === R.j)) R.j = js[0]?.id || '';
        const modeTabs =
            `<div class="tabs2"><button class="${R.mode === 'ujian' ? 'on' : ''}" data-act="rkMode" data-m="ujian">Per Ujian</button><button class="${R.mode === 'siswa' ? 'on' : ''}" data-act="rkMode" data-m="siswa">Per Siswa</button></div>`;
        if (R.mode === 'siswa') {
            const sis = D().siswa.filter(s => !R.kelas || s.kelas === R.kelas);
            const sid = R.siswa || '';
            const hs = sid ? D().hasil.filter(h => h.siswa_id === sid && visJadwal().some(j => j.id === h.jadwal_id)) :
                [];
            return head('Rekap Nilai', 'Riwayat nilai per siswa', '') + modeTabs +
                `<div class="fg" style="max-width:640px"><label class="f"><span>Kelas</span><select class="inp" data-bind="rkKelas"><option value="">Semua kelas</option>${kelasList().map(k => `<option ${k === R.kelas ? 'selected' : ''}>${esc(k)}</option>`).join('')}</select></label>
    <label class="f"><span>Siswa</span><select class="inp" data-bind="rkSiswa"><option value="">— pilih siswa —</option>${sis.map(s => `<option value="${s.id}" ${s.id === sid ? 'selected' : ''}>${esc(s.nama)}</option>`).join('')}</select></label></div>
    <div class="tw"><table><thead><tr><th>Ujian</th><th>Kelas</th><th>Benar</th><th>Salah</th><th>Kosong</th><th>Nilai</th><th>Ket.</th></tr></thead><tbody>${hs.map(h => { const j = D().jadwal.find(x => x.id === h.jadwal_id); return `<tr><td><b>${esc(j.nama_ujian)}</b></td><td>${esc(j.kelas)}</td><td>${h.benar}</td><td>${h.salah}</td><td>${h.kosong}</td><td><b>${num(h.nilai)}</b></td><td><span class="bdg ${h.nilai >= kkmOf(j) ? 'g' : 'r'}">${h.nilai >= kkmOf(j) ? 'Tuntas' : 'Belum tuntas'}</span></td></tr>`; }).join('')}</tbody></table>${hs.length ? '' : empty(sid ? 'Siswa ini belum memiliki hasil scan' : 'Pilih siswa untuk melihat nilai')}</div>`;
        }
        const j = js.find(x => x.id === R.j);
        if (!j) return head('Rekap Nilai', 'Rekap hasil ujian', '') + modeTabs +
            `<div class="tw">${empty('Belum ada LJK ujian.')}</div>`;
        let rows = rekapRows(j).filter(x => (!R.kelas || x.s.kelas === R.kelas) && matchQ([x.s.nama, x.s.nis, x.s
            .kelas
        ]));
        const kkm = kkmOf(j),
            done = rows.filter(x => x.h),
            vals = done.map(x => Number(x.h.nilai)),
            pg = paginate(rows, 'rekap', 20);
        const avg = vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null,
            tuntas = vals.filter(v => v >= kkm).length,
            questions = objectiveQuestionRows(j);
        // analisis butir soal
        const ia = Array.from({
            length: questions.length
        }, (_, q) => {
            let b = 0,
                t = 0;
            done.forEach(x => {
                const key = kunciOf(j.id, x.l.paket);
                if (!key.length) return;
                t++;
                if ((x.h.jawaban || [])[q] === key[q]) b++;
            });
            return {
                label: questionLabel(questions[q]),
                p: t ? b / t * 100 : null
            };
        });
        return head('Rekap Nilai', `${esc(j.nama_ujian)} • KKM ${kkm}`,
                `<button class="btn ghost" data-act="rkXlsx">${ic('file-spreadsheet', 16)}Excel</button><button class="btn" data-act="rkPrint">${ic('printer', 16)}Cetak / PDF</button>`
            ) + modeTabs +
            `<div class="fg" style="max-width:720px"><label class="f"><span>Ujian</span><select class="inp" data-bind="rkJ">${js.map(x => `<option value="${x.id}" ${x.id === j.id ? 'selected' : ''}>${esc(x.nama_ujian)} — ${esc(x.kelas)}</option>`).join('')}</select></label>
    <label class="f"><span>Filter kelas</span><select class="inp" data-bind="rkKelas"><option value="">Semua</option>${[...new Set(rekapRows(j).map(x => x.s.kelas))].map(k => `<option ${k === R.kelas ? 'selected' : ''}>${esc(k)}</option>`).join('')}</select></label></div>
    <div class="sg"><div class="card"><small>Peserta</small><b>${rows.length}</b></div><div class="card"><small>Sudah discan</small><b>${done.length}</b></div><div class="card"><small>Rata-rata</small><b>${num(avg)}</b></div><div class="card"><small>Tertinggi</small><b>${vals.length ? num(Math.max(...vals)) : '-'}</b></div><div class="card"><small>Terendah</small><b>${vals.length ? num(Math.min(...vals)) : '-'}</b></div><div class="card"><small>Tuntas</small><b>${done.length ? Math.round(tuntas / done.length * 100) + '%' : '-'}</b></div></div>
    <div class="tw"><table><thead><tr><th>#</th><th>NIS</th><th>Nama</th><th>Kelas</th><th>Paket</th><th>Benar</th><th>Salah</th><th>Kosong</th><th>Nilai</th><th>Ket.</th><th></th></tr></thead><tbody>${pg.rows.map((x, i) => `<tr><td>${pg.start + i + 1}</td><td>${esc(x.s.nis)}</td><td><b>${esc(x.s.nama)}</b></td><td>${esc(x.s.kelas)}</td><td>${x.l.paket}</td>${x.h ? `<td>${x.h.benar}</td><td>${x.h.salah}</td><td>${x.h.kosong}</td><td><b>${num(x.h.nilai)}</b></td><td><span class="bdg ${x.h.nilai >= kkm ? 'g' : 'r'}">${x.h.nilai >= kkm ? 'Tuntas' : 'Belum'}</span></td><td class="ac"><button class="btn sm ghost" data-act="rkDetail" data-id="${x.l.id}">${ic('eye', 14)}Detail</button></td>` : `<td colspan="4" style="color:var(--muted)">Belum discan</td><td><span class="bdg a">–</span></td><td></td>`}</tr>`).join('')}</tbody></table>${rows.length ? '' : empty('Belum ada LJK untuk ujian ini')}${pg.html}</div>
    ${done.length ? `<div class="card" style="margin-top:20px"><h3>Analisis Butir Soal <small style="font-weight:500;color:var(--muted)">(% siswa menjawab benar)</small></h3><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 24px">${ia.map(x => `<div class="rb"><small>${x.label}</small><div class="bar"><i style="width:${x.p || 0}%;background:${x.p >= 70 ? '#22C55E' : x.p >= 30 ? '#F5B335' : '#E8505B'}"></i></div><span>${num(x.p, 0)}%</span></div>`).join('')}</div><p style="font-size:11px;color:var(--muted);margin-top:10px">Hijau = mudah (≥70%) • Kuning = sedang • Merah = sukar (&lt;30%)</p></div>` : ''}`;
    }

    function rkDetail(lid) {
        const l = D().ljk.find(x => x.id === lid),
            j = D().jadwal.find(x => x.id === l.jadwal_id),
            h = D().hasil.find(x => x.ljk_id === lid),
            s = siswaOf(l.siswa_id),
            key = kunciOf(j.id, l.paket);
        openModal(
            `<div class="mh"><h3 style="margin:0">${esc(s.nama)}</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div><p style="color:var(--muted);margin-bottom:12px">${esc(j.nama_ujian)} • Paket ${l.paket} • Nilai <b>${num(h.nilai)}</b> (${h.benar} benar, ${h.salah} salah, ${h.kosong} kosong)</p>
    <div class="vgrid">${(h.jawaban || []).map((a, q) => {
            const question = objectiveQuestionRows(j)[q];
            const label = question?.type === 'benar_salah' ? answerOptionLabels(question)[LET.indexOf(a)] || a : a;
            const keyLabel = question?.type === 'benar_salah' ? answerOptionLabels(question)[LET.indexOf(key[q])] || key[q] : key[q];
            return `<div class="qa ${a === '' ? 'em' : a === key[q] ? 'ok' : 'no'}"><b>${question ? questionLabel(question) : q + 1}</b><span>${a === '*' ? 'Ganda' : label || '–'}</span><small>K:${keyLabel || '?'}</small></div>`;
        }).join('')}</div>
    ${essayCount(j) ? `<h4>Nilai essai</h4><div class="vgrid">${(h.nilai_essai || []).map((score, index) => `<div class="qa"><b>Essai ${index + 1}</b><span>${num(score)}</span></div>`).join('')}</div>` : ''}`
        );
        syncScheduleCounts();
    }
    async function rkExport(kind) {
        const j = visJadwal().find(x => x.id === S.ui.rekap.j);
        if (!j) return;
        const R = S.ui.rekap,
            rows = rekapRows(j).filter(x => !R.kelas || x.s.kelas === R.kelas),
            kkm = kkmOf(j),
            set = D().settings;
        const head = ['No', 'NIS', 'Nama', 'Kelas', 'Paket', 'Benar', 'Salah', 'Kosong', 'Nilai', 'Keterangan'];
        const data = rows.map((x, i) => [i + 1, x.s.nis, x.s.nama, x.s.kelas, x.l.paket, x.h?.benar ?? '', x.h
            ?.salah ?? '', x.h?.kosong ?? '', x.h ? Number(x.h.nilai) : '', x.h ? (x.h.nilai >= kkm ?
                'Tuntas' : 'Belum tuntas') : 'Belum discan'
        ]);
        if (kind === 'xlsx') {
            await guard(async () => {
                await loadScript(LIBS.xlsx);
                const ws = XLSX.utils.aoa_to_sheet([
                    [set.nama_sekolah || ''],
                    [`Rekap ${j.nama_ujian} — Kelas ${j.kelas}`],
                    [`KKM ${kkm}`],
                    [], head, ...data
                ]);
                ws['!cols'] = [{
                    wch: 5
                }, {
                    wch: 12
                }, {
                    wch: 32
                }, {
                    wch: 12
                }, {
                    wch: 7
                }, {
                    wch: 8
                }, {
                    wch: 8
                }, {
                    wch: 8
                }, {
                    wch: 8
                }, {
                    wch: 16
                }];
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, 'Rekap');
                XLSX.writeFile(wb, `Rekap_${j.nama_ujian.replace(/[^\w]+/g, '_')}.xlsx`);
            }, 'Membuat Excel…');
        } else {
            const body = `${printLetterhead('REKAP NILAI', set)}
                <h1>${esc(j.nama_ujian)}</h1>
                <p class="report-summary">Kelas ${esc(j.kelas)} <span>KKM ${kkm}</span></p>
                <table class="report-table"><thead><tr>${head.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${data.map(r => `<tr>${r.map(c => `<td>${esc(c)}</td>`).join('')}</tr>`).join('')}</tbody></table>
                <div class="report-signature"><span>${esc(fmtDate(todayISO()))}</span><b>Ketua Panitia</b><strong>${esc(set.ketua_panitia || '')}</strong></div>`;
            const css = `${printLetterheadStyles}.preview-page>h1{margin:0 0 8px;text-align:center;font-size:12px}.report-summary{display:flex;justify-content:space-between;margin:0 0 10px;font-size:10px}.report-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:8px;line-height:1.35}.report-table th,.report-table td{border:1px solid #444;padding:5px 4px;overflow-wrap:anywhere;vertical-align:middle}.report-table th{background:#eef0f3;text-align:center;font-weight:700}.report-table th:nth-child(1){width:5%}.report-table th:nth-child(2){width:12%}.report-table th:nth-child(3){width:22%}.report-table th:nth-child(4){width:10%}.report-table th:nth-child(5){width:6%}.report-table th:nth-child(6),.report-table th:nth-child(7),.report-table th:nth-child(8){width:7%}.report-table th:nth-child(9){width:8%}.report-table th:nth-child(10){width:16%}.report-table td:nth-child(1),.report-table td:nth-child(5),.report-table td:nth-child(6),.report-table td:nth-child(7),.report-table td:nth-child(8),.report-table td:nth-child(9){text-align:center}.report-table tbody tr:nth-child(even){background:#fafafa}.report-table thead{display:table-header-group}.report-table tbody tr{break-inside:avoid;page-break-inside:avoid}.report-signature{display:flex;min-width:170px;flex-direction:column;align-items:center;gap:5px;margin:28px 0 0 auto;font-size:9px}.report-signature strong{margin-top:34px;text-decoration:underline}`;
            previewHTML(
                `Rekap ${j.nama_ujian}`,
                'Pratinjau cetak rekap nilai · A4 / Folio',
                body,
                css,
                { allowOrientation: true }
            );
        }
    }

    /* ---------- Ruang Ujian & Denah ---------- */
    function roomForm(id = '') {
        if (!id) return bulkRoomForm();
        const room = D().ruang.find(item => item.id === id);
        if (!room) return;
        if (!room.kelas_id) {
            return toast('Ruang ini belum tertaut ke kelas. Gunakan sinkronisasi ruang dengan kelas terlebih dahulu.', 'err');
        }
        const kelas = D().kelas.find(item => item.id === room.kelas_id);
        if (!kelas) return toast('Kelas ruang ini tidak ditemukan. Sinkronkan kembali data kelas.', 'err');
        openModal(
            `<div class="mh"><h3 style="margin:0">Ubah Ruang Ujian</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>
            <form data-form="ruang"><input type="hidden" name="id" value="${room.id}"><input type="hidden" name="kelas_id" value="${kelas.id}"><div class="fg">
            <label class="f"><span>Kode ruang *</span><input class="inp" name="kode" maxlength="30" required value="${esc(room.kode)}"></label>
            <label class="f"><span>Nama ruang (mengikuti kelas)</span><input class="inp" readonly value="${esc(kelas.nama)}"></label>
            <label class="f"><span>Baris meja *</span><input class="inp" type="number" name="baris" min="1" max="40" required value="${room.baris}"></label>
            <label class="f"><span>Kolom meja *</span><input class="inp" type="number" name="kolom" min="1" max="5" required value="${room.kolom}"></label>
            </div><p style="font-size:11px;color:var(--muted);margin:10px 0">Maksimal 5 kolom × 40 baris (200 kursi) per ruang.</p>
            <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn">${ic('save', 16)}Simpan Ruang</button></div></form>`
        );
    }

    function roomLayoutForSeats(seatCount) {
        const requiredSeats = Math.max(1, Number(seatCount) || 0);
        const kolom = Math.max(1, Math.min(5, Math.ceil(Math.sqrt(requiredSeats))));
        const baris = Math.ceil(requiredSeats / kolom);
        return {
            baris,
            kolom,
            kapasitas: baris * kolom,
            canFit: requiredSeats <= 200 && baris <= 40
        };
    }

    function roomPlansFromClasses() {
        const rooms = D().ruang,
            linkedByClass = new Map(rooms.filter(room => room.kelas_id).map(room => [room.kelas_id, room])),
            classes = kelasSorted(),
            classesById = new Map(classes.map(kelas => [kelas.id, kelas])),
            missingClasses = classes.filter(kelas => !linkedByClass.has(kelas.id)),
            unlinkedRooms = rooms.filter(room => !room.kelas_id)
                .sort((a, b) => a.kode.localeCompare(b.kode, 'id', { numeric: true })),
            legacyByClass = new Map(),
            conflicts = [],
            occupiedSeatsByRoom = new Map(),
            occupantsByRoom = new Map(),
            studentsById = new Map(D().siswa.map(student => [student.id, student]));
        D().denah.filter(seat => seat.siswa_id).forEach(seat => {
            occupiedSeatsByRoom.set(
                seat.ruang_id,
                Math.max(occupiedSeatsByRoom.get(seat.ruang_id) || 0, Number(seat.nomor_kursi) || 0)
            );
            const student = studentsById.get(seat.siswa_id),
                occupants = occupantsByRoom.get(seat.ruang_id) || new Set();
            occupants.add(student?.kelas_id || '');
            occupantsByRoom.set(seat.ruang_id, occupants);
        });

        rooms.filter(room => room.kelas_id).forEach(room => {
            const occupantClasses = [...(occupantsByRoom.get(room.id) || [])];
            if (occupantClasses.some(kelasId => kelasId !== room.kelas_id)) {
                conflicts.push({
                    room,
                    reason: 'Penempatan berisi siswa dari kelas lain'
                });
            }
        });

        const preferredRooms = new Map();
        unlinkedRooms.forEach(room => {
            const occupantClasses = [...(occupantsByRoom.get(room.id) || [])];
            if (!occupantClasses.length) return;
            const kelasId = occupantClasses[0];
            if (occupantClasses.length !== 1 || !classesById.has(kelasId) ||
                linkedByClass.has(kelasId) || preferredRooms.has(kelasId)) {
                conflicts.push({
                    room,
                    reason: occupantClasses.length !== 1
                        ? 'Penempatan berisi siswa dari beberapa kelas'
                        : !classesById.has(kelasId)
                            ? 'Kelas siswa tidak ditemukan'
                            : linkedByClass.has(kelasId)
                                ? 'Kelas siswa sudah memiliki ruang tertaut'
                                : 'Ada lebih dari satu ruang berisi siswa kelas ini'
                });
                return;
            }
            preferredRooms.set(kelasId, room);
        });

        missingClasses.forEach(kelas => {
            const preferred = preferredRooms.get(kelas.id);
            if (preferred) legacyByClass.set(kelas.id, preferred);
        });
        const unusedEmptyRooms = unlinkedRooms.filter(room =>
            !occupantsByRoom.has(room.id) && !conflicts.some(conflict => conflict.room.id === room.id)
        );
        missingClasses.filter(kelas => !legacyByClass.has(kelas.id)).forEach((kelas, index) => {
            if (unusedEmptyRooms[index]) legacyByClass.set(kelas.id, unusedEmptyRooms[index]);
        });
        const reusedRoomIds = new Set([...legacyByClass.values()].map(room => room.id));
        const conflictRoomIds = new Set(conflicts.map(conflict => conflict.room.id));
        const surplus = unlinkedRooms.filter(room =>
            !reusedRoomIds.has(room.id) && !conflictRoomIds.has(room.id)
        );

        const plans = classes.map(kelas => {
            const room = linkedByClass.get(kelas.id) || legacyByClass.get(kelas.id) || null,
                siswaAktif = D().siswa.filter(student =>
                student.kelas_id === kelas.id && student.aktif !== false
                ).length,
                seatCount = Math.max(siswaAktif, room ? occupiedSeatsByRoom.get(room.id) || 0 : 0),
                layout = roomLayoutForSeats(seatCount),
                status = !room ? 'Buat baru' : room.kelas_id === kelas.id ? 'Sudah tertaut' : `Gunakan ulang ${room.kode}`,
                needsSync = !room || room.kelas_id !== kelas.id || room.nama !== kelas.nama ||
                Number(room.baris) !== layout.baris || Number(room.kolom) !== layout.kolom;

            return {
                kelas,
                room,
                siswaAktif,
                ...layout,
                status,
                needsSync
            };
        });

        return {
            plans,
            surplus,
            conflicts
        };
    }

    function bulkRoomForm() {
        const { plans, surplus, conflicts } = roomPlansFromClasses();
        if (!plans.length && !surplus.length && !conflicts.length) {
            return toast('Belum ada data kelas. Impor data kelas dari E-Rapor terlebih dahulu.', 'err');
        }

        const toSync = plans.filter(plan => plan.needsSync),
            overCapacity = plans.filter(plan => !plan.canFit),
            canSync = toSync.length > 0 && !surplus.length && !conflicts.length && !overCapacity.length;
        openModal(
            `<div class="mh"><h3 style="margin:0">Sinkronkan Ruang dengan Kelas</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>
            <div class="info" style="margin:12px 0">Targetnya tepat satu ruang untuk setiap kelas. Ruang lama yang belum tertaut akan digunakan ulang untuk kelas yang belum memiliki ruang; ID, kode, penempatan kursi, dan relasi jadwal dipertahankan. Ruang berisi siswa hanya dapat digunakan ulang untuk kelas siswa tersebut. Nama ruang mengikuti nama kelas. Kolom dibatasi maksimal 5 dan jumlah baris menyesuaikan agar menampung siswa aktif serta penempatan kursi yang sudah ada (maksimal 40 baris × 5 kolom).${surplus.length ? ` Ada ${surplus.length} ruang tambahan yang belum tertaut; hapus atau tinjau terlebih dahulu agar jumlah ruang tidak melebihi jumlah kelas.` : ''}${conflicts.length ? ` Ada ${conflicts.length} ruang lama dengan penempatan yang bertentangan; selesaikan sebelum sinkronisasi.` : ''}${overCapacity.length ? ` ${overCapacity.length} kelas tidak dapat ditampung dalam batas 200 kursi per ruang.` : ''}</div>
            <div class="tw" style="max-height:48vh"><table><thead><tr><th>Kelas / Nama Ruang</th><th>Siswa aktif</th><th>Baris × Kolom</th><th>Kapasitas</th><th>Status</th></tr></thead><tbody>${plans.map(plan => `<tr><td><b>${esc(plan.kelas.nama)}</b></td><td>${plan.siswaAktif}</td><td>${plan.canFit ? `${plan.baris} × ${plan.kolom}` : 'Tidak muat'}</td><td>${plan.canFit ? plan.kapasitas : 'Maksimal 200 kursi'}</td><td>${esc(plan.status)}</td></tr>`).join('')}</tbody></table>${plans.length ? '' : empty('Belum ada kelas.')}</div>
            ${surplus.length ? `<div class="info" style="margin-top:10px">Ruang tambahan: ${surplus.map(room => `${esc(room.kode)} — ${esc(room.nama)}`).join(', ')}</div>` : ''}
            ${conflicts.length ? `<div class="info" style="margin-top:10px">Konflik: ${conflicts.map(item => `${esc(item.room.kode)} — ${esc(item.reason)}`).join('; ')}</div>` : ''}
            <div class="macts"><button type="button" class="btn ghost" data-act="closeModal">Tutup</button><button class="btn" data-act="bulkRoomCreate" ${canSync ? '' : 'disabled'}>${ic('save', 16)}Sinkronkan ${toSync.length} Perubahan</button></div>`,
            true
        );
    }

    async function bulkRoomCreate() {
        const current = roomPlansFromClasses(),
            plans = current.plans,
            toSync = plans.filter(plan => plan.needsSync);
        if (current.conflicts.length) {
            return toast(`${current.conflicts.length} ruang lama memiliki penempatan yang bertentangan. Selesaikan konflik sebelum sinkronisasi.`, 'err');
        }
        if (current.surplus.length) {
            return toast(`${current.surplus.length} ruang tambahan belum tertaut. Tinjau atau hapus ruang tersebut sebelum sinkronisasi.`, 'err');
        }
        if (plans.some(plan => !plan.canFit)) {
            return toast('Ada kelas yang melebihi kapasitas maksimal 200 kursi per ruang. Sinkronisasi dibatalkan.', 'err');
        }
        if (!toSync.length) return toast('Semua kelas sudah memiliki satu ruang dengan kapasitas yang sesuai.');
        if (!(await confirmBox(
                `Sinkronkan ${toSync.length} perubahan agar setiap kelas memiliki tepat satu ruang bernama sesuai kelas dan berkapasitas cukup? Ruang lama yang belum tertaut akan digunakan ulang tanpa menghapus penempatan atau relasi jadwal.`,
                'Sinkronkan Ruang'
            ))) return;

        const usedCodes = new Set(D().ruang.map(room => room.kode));
        let nextCode = D().ruang.length + 1;
        let inserted = 0,
            linked = 0,
            updated = 0,
            processed = 0;
        const rows = [];
        for (const plan of toSync) {
            if (!plan.room) {
                let kode = `R-${pad(nextCode, 2)}`;
                while (usedCodes.has(kode)) {
                    nextCode++;
                    kode = `R-${pad(nextCode, 2)}`;
                }
                usedCodes.add(kode);
                nextCode++;
                rows.push({
                    kode,
                    nama: plan.kelas.nama,
                    kelas_id: plan.kelas.id,
                    baris: plan.baris,
                    kolom: plan.kolom
                });
            }
        }

        const completed = await guard(async () => {
            for (const plan of toSync) {
                if (!plan.room) continue;
                await dbUpdate('ruang', plan.room.id, {
                    kelas_id: plan.kelas.id,
                    nama: plan.kelas.nama,
                    baris: plan.baris,
                    kolom: plan.kolom
                });
                processed++;
                if (!plan.room.kelas_id) linked++;
                else updated++;
            }
            for (let offset = 0; offset < rows.length; offset += 500) {
                const batch = rows.slice(offset, offset + 500);
                const created = await dbInsert('ruang', batch);
                inserted += created.length;
                processed += created.length;
            }
            return true;
        }, 'Menyinkronkan satu ruang untuk setiap kelas…');

        if (processed) {
            const refreshed = await guard(async () => {
                await reload(['ruang']);
                return true;
            }, 'Memperbarui daftar ruang…');
            if (!refreshed) return;
        }

        if (!completed) {
            if (processed) {
                closeModal();
                renderView();
                toast(`Sinkronisasi terhenti setelah ${inserted} ruang dibuat dan ${linked} ruang lama ditautkan. Periksa daftar ruang sebelum mencoba lagi.`, 'err', 6000);
            }
            return;
        }

        closeModal();
        renderView();
        toast(`${plans.length} kelas sekarang memiliki tepat satu ruang (${inserted} dibuat, ${linked} ruang lama digunakan ulang, ${updated} diperbarui).`);
    }

    function roomCanDelete(room) {
        return !D().denah.some(seat => seat.ruang_id === room.id && seat.siswa_id) &&
            !D().agenda.some(agenda =>
                (agenda.ruang_pengawas || []).some(assignment => assignment.ruang_id === room.id)
            );
    }

    function roomPickerContent() {
        const room = D().ruang.find(item => item.id === S.ui.roomId),
            classes = kelasSorted().filter(item => !room?.kelas_id || item.id === room.kelas_id),
            selectedClass = classes.find(item => item.id === S.ui.roomClassId);
        const students = roomPickerStudents(selectedClass);
        return `<div class="mh"><h3 style="margin:0">Pilih Siswa dari Kelas</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>
            <p style="font-size:12px;color:var(--muted);margin:-4px 0 12px">${S.ui.roomTargetSeat ? `Pilih siswa untuk Meja #${pad(S.ui.roomTargetSeat, 2)}.` : 'Pilih siswa terlebih dahulu, lalu klik kursi kosong pada denah.'}</p>
            <label class="f"><span>Kelas</span><select class="inp" data-bind="roomClass" ${room?.kelas_id ? 'disabled' : ''}><option value="">Pilih kelas</option>${classes.map(item => `<option value="${item.id}" ${selectedClass?.id === item.id ? 'selected' : ''}>${esc(item.nama)}</option>`).join('')}</select></label>
            ${selectedClass ? `<div class="fg" style="grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-top:10px">
            <label class="f"><span>Urutan siswa</span><select class="inp" data-bind="roomStudentSort"><option value="nama" ${S.ui.roomStudentSort === 'nama' ? 'selected' : ''}>Nama A–Z</option><option value="acak" ${S.ui.roomStudentSort === 'acak' ? 'selected' : ''}>Acak</option></select></label>
            <button class="btn" style="background:#60bcb3" data-act="roomPlaceAll">${ic('users', 16)}Pilih Semua Siswa</button></div>
            <p style="font-size:11px;color:var(--muted);margin:7px 0">Penempatan massal mengisi kursi kosong dan mempertahankan siswa yang sudah ada di ruang ini.</p>
            <input class="inp" data-room-student-search placeholder="Cari nama atau NIS siswa…" style="margin-top:10px">
            <div class="room-student-list">${students.map(student => `<button class="room-student" data-act="roomChooseStudent" data-id="${student.id}"><span><b>${esc(student.nama)}</b><small style="display:block;color:var(--muted)">${esc(student.nis)} · ${esc(selectedClass.nama)}</small></span><span>${D().denah.some(seat => seat.siswa_id === student.id) ? '<small class="bdg a">Sudah ditempatkan</small>' : '<small class="bdg g">Pilih</small>'}</span></button>`).join('') || empty('Tidak ada siswa aktif di kelas ini.')}</div>` : `<div class="empty">${ic('inbox', 34)}<p style="margin-top:8px">${classes.length ? 'Pilih kelas untuk menampilkan siswanya.' : 'Belum ada data kelas. Impor dari E-Rapor terlebih dahulu.'}</p></div>`}`;
    }

    function roomPickerStudents(selectedClass = D().kelas.find(item => item.id === S.ui.roomClassId)) {
        if (!selectedClass) return [];
        const roster = D().siswa.filter(student =>
            student.kelas_id === selectedClass.id && student.aktif !== false
        );
        const rosterIds = new Set(roster.map(student => student.id));
        const currentOrder = S.ui.roomStudentOrder || [];
        const orderIsCurrent = currentOrder.length === roster.length &&
            currentOrder.every(id => rosterIds.has(id));
        if (!orderIsCurrent) {
            if (S.ui.roomStudentSort === 'acak') {
                for (let index = roster.length - 1; index > 0; index--) {
                    const swapIndex = Math.floor(Math.random() * (index + 1));
                    [roster[index], roster[swapIndex]] = [roster[swapIndex], roster[index]];
                }
            } else {
                roster.sort((a, b) => a.nama.localeCompare(b.nama, 'id', { sensitivity: 'base' }));
            }
            S.ui.roomStudentOrder = roster.map(student => student.id);
        }
        const studentsById = new Map(roster.map(student => [student.id, student]));
        return S.ui.roomStudentOrder.map(id => studentsById.get(id)).filter(Boolean);
    }

    function roomPickStudent(seatNumber = null) {
        S.ui.roomTargetSeat = seatNumber;
        S.ui.roomStudentOrder = [];
        const room = D().ruang.find(item => item.id === S.ui.roomId);
        if (!room?.kelas_id) {
            S.ui.roomTargetSeat = null;
            return toast('Tautkan ruang ke kelas melalui sinkronisasi sebelum menempatkan siswa.', 'err');
        }
        if (room?.kelas_id) {
            S.ui.roomClassId = room.kelas_id;
        } else if (!S.ui.roomClassId || !D().kelas.some(item => item.id === S.ui.roomClassId)) {
            S.ui.roomClassId = kelasSorted()[0]?.id || '';
        }
        openModal(roomPickerContent(), true);
    }

    function refreshRoomPicker() {
        const modal = $('#modal .modal');
        if (modal) modal.innerHTML = roomPickerContent();
        icons();
    }

    async function assignRoomSeat(roomId, seatNumber, studentId) {
        const existing = D().denah.find(seat => seat.ruang_id === roomId && Number(seat.nomor_kursi) === seatNumber);
        const ok = await guard(async () => {
            if (existing) await dbUpdate('denah', existing.id, { siswa_id: studentId });
            else await dbInsert('denah', { ruang_id: roomId, nomor_kursi: seatNumber, siswa_id: studentId });
            await reload(['denah']);
            S.ui.roomStudentId = '';
            S.ui.roomTargetSeat = null;
            renderView();
            return true;
        }, 'Menyimpan penempatan siswa…');
        if (ok) toast(studentId ? 'Penempatan kursi tersimpan' : 'Kursi dikosongkan');
    }

    function roomSeatLabel(seatNumber) {
        return `Meja #${pad(seatNumber, 2)}`;
    }

    function roomPrintReadiness(rooms) {
        const roomByClass = new Map(rooms.filter(room => room.kelas_id).map(room => [room.kelas_id, room.id])),
            placedByRoom = new Map();
        D().denah.filter(seat => seat.siswa_id).forEach(seat => {
            const students = placedByRoom.get(seat.ruang_id) || new Set();
            students.add(seat.siswa_id);
            placedByRoom.set(seat.ruang_id, students);
        });
        const unplacedStudents = D().siswa.filter(student => {
            if (student.aktif === false) return false;
            const roomId = roomByClass.get(student.kelas_id);
            return !roomId || !placedByRoom.get(roomId)?.has(student.id);
        });
        return {
            complete: unplacedStudents.length === 0,
            unplacedStudents
        };
    }

    function roomPrintMarkup(room) {
        const capacity = Number(room.baris) * Number(room.kolom),
            assignedBySeat = new Map(D().denah
                .filter(seat => seat.ruang_id === room.id && seat.siswa_id)
                .map(seat => [Number(seat.nomor_kursi), seat]));
        const seats = Array.from({ length: capacity }, (_, index) => {
            const seatNumber = index + 1,
                assignment = assignedBySeat.get(seatNumber),
                student = assignment && siswaOf(assignment.siswa_id);
            return `<div class="seat"><b>${roomSeatLabel(seatNumber)}</b><span>${esc(student?.nama || 'Kosong')}</span><small>${esc(student ? `${student.kelas || ''} · ${student.nis}` : '-')}</small></div>`;
        }).join('');
        return `<section class="room-print-page preview-sheet">${printLetterhead('DENAH TEMPAT DUDUK UJIAN')}<h2>${esc(room.kode)} — ${esc(room.nama)}</h2><p>Kapasitas ${capacity} kursi · ${room.baris} baris × ${room.kolom} kolom meja</p><div class="stages"><div>DEPAN RUANG<br>PAPAN TULIS / LAYAR INFORMASI</div><div>PENGAWAS UJIAN<br>PENGAWAS RUANG UJIAN</div></div><div class="seats" style="grid-template-columns:repeat(${Number(room.kolom)},minmax(0,1fr))">${seats}</div></section>`;
    }

    const roomPrintStyles = `${printLetterheadStyles}.preview-page{width:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}.room-print-page{margin:0 auto 20px;padding:14mm 12mm;background:#fff;box-shadow:0 8px 32px #0002;break-after:page;page-break-after:always}.room-print-page:last-child{break-after:auto;page-break-after:auto}.room-print-page h2{margin:0;text-align:center;font-size:13px}.room-print-page>p{margin:5px 0 14px;text-align:center;color:#444;font-size:10px}.stages{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.stages div{display:flex;min-height:48px;align-items:center;justify-content:center;padding:8px;border:1px solid #aeb5bf;border-radius:4px;background:#f4f6f8;text-align:center;font-size:9px;font-weight:700;line-height:1.45}.seats{display:grid;align-items:stretch;gap:6px}.seat{display:flex;min-height:55px;flex-direction:column;justify-content:center;overflow-wrap:anywhere;padding:6px;border:1px solid #9aa2ad;border-radius:4px;text-align:center;font-size:9px;break-inside:avoid;page-break-inside:avoid}.seat b,.seat span,.seat small{display:block}.seat b{margin:0 auto;padding:2px 6px;border-radius:3px;background:#edf0f3;font-size:8px}.seat span{margin-top:5px;font-weight:700;line-height:1.3}.seat small{margin-top:3px;color:#555;font-size:8px}@media print{.room-print-page{margin:0;box-shadow:none}.seat{border:1px solid #555}}`;
    const roomPrintFlowStyles = '@media print{.room-print-page{padding:0}}';

    function pgRuang() {
        const rooms = D().ruang.slice().sort((a, b) => a.kode.localeCompare(b.kode, 'id', { numeric: true }));
        const roomState = roomPlansFromClasses(),
            roomPlans = roomState.plans,
            roomsToSync = roomPlans.filter(plan => plan.needsSync).length,
            surplusIds = new Set(roomState.surplus.map(item => item.id));
        if (!rooms.some(room => room.id === S.ui.roomId)) S.ui.roomId = rooms[0]?.id || '';
        const room = rooms.find(item => item.id === S.ui.roomId);
        const occupiedCount = current => D().denah.filter(seat => seat.ruang_id === current.id && seat.siswa_id).length;
        const activeStudentCount = current => current.kelas_id
            ? D().siswa.filter(student => student.kelas_id === current.kelas_id && student.aktif !== false).length
            : 0;
        const printStatus = roomPrintReadiness(rooms);
        const roomSearch = (S.ui.roomSearch || '').trim().toLocaleLowerCase('id'),
            searchableRoomName = item => `${item.nama} ${item.kode} ${item.kelas_id ? kelasName(item.kelas_id) : ''}`
                .toLocaleLowerCase('id');
        const actions = `${roomPlans.length || roomState.surplus.length || roomState.conflicts.length ? `<button class="btn amber" data-act="bulkRoomForm">${ic('users', 16)}Sinkronkan Ruang (${roomsToSync})</button>` : ''}${rooms.length ? `<button class="btn" style="background:#242424" data-act="roomPrintAll" ${printStatus.complete ? '' : 'disabled'} title="${printStatus.complete ? 'Cetak denah semua ruang' : 'Tempatkan semua siswa aktif pada denah terlebih dahulu'}">${ic('printer', 16)}Cetak Denah Semua Ruang</button>` : ''}`;
        const left = `<div class="room-sidebar">${rooms.length ? `<label class="f room-search"><span>Cari nama ruang / kelas</span><input class="inp" type="search" data-room-list-search placeholder="Ketik nama ruang atau kelas..." value="${esc(S.ui.roomSearch || '')}"></label>` : ''}<div class="room-list">${rooms.map(item => `<div class="room-item ${item.id === room?.id ? 'on' : ''}" data-room-list-option data-room-search="${esc(searchableRoomName(item))}" ${roomSearch && !searchableRoomName(item).includes(roomSearch) ? 'hidden' : ''}>
            <button style="width:100%;text-align:left" data-act="roomSelect" data-id="${item.id}">
            <div class="room-item-top"><span class="bdg ${item.id === room?.id ? 'r' : 'a'}">${esc(item.kode)}</span><b>${occupiedCount(item)}/${Number(item.baris) * Number(item.kolom)} Kursi</b></div>
            <b style="display:block;margin-top:8px">${esc(item.nama)}</b><div class="room-meta">Denah: ${item.baris} Baris × ${item.kolom} Kolom Meja${item.kelas_id ? ` - ${activeStudentCount(item)} Siswa Aktif` : ' · Belum tertaut'}</div></button>
            <div class="room-item-actions" style="border-top:1px solid ${item.id === room?.id ? '#ffffff24' : 'var(--line)'};margin-top:10px;padding-top:9px">
            ${item.kelas_id ? `<button class="btn sm" style="background:#60bcb3" data-act="roomPickStudent" data-id="${item.id}">${ic('users', 14)}Pilih Siswa</button>` : '<button class="btn sm" disabled>Tautkan dahulu</button>'}<span></span>
            ${item.kelas_id ? `<button class="btn sm ghost" data-act="roomForm" data-id="${item.id}">Ubah</button><span></span>` : '<span></span><span></span>'}
            ${surplusIds.has(item.id) ? roomCanDelete(item)
                ? `<button class="btn sm danger" data-act="roomDelete" data-id="${item.id}">Hapus Ruang Tambahan</button>`
                : '<small class="room-meta">Ruang masih dipakai</small>'
                : ''}</div>
            </div>`).join('') || empty('Belum ada ruang ujian. Tambahkan ruang untuk mulai mengatur denah.')}<div class="empty" data-room-list-empty ${!roomSearch || rooms.some(item => searchableRoomName(item).includes(roomSearch)) ? 'hidden' : ''}>Tidak ada nama ruang atau kelas yang cocok.</div></div></div>`;
        if (!room) {
            return head('Ruang Ujian & Denah Tempat Duduk', 'Atur kapasitas ruang, pilih siswa dari kelas, dan cetak denah.', actions) +
                `<div class="room-layout"><div>${left}</div><div class="card">${empty('Pilih atau tambahkan ruang ujian untuk melihat denah.')}</div></div>`;
        }
        const capacity = Number(room.baris) * Number(room.kolom);
        const assigned = D().denah.filter(seat => seat.ruang_id === room.id && seat.siswa_id);
        const seats = Array.from({ length: capacity }, (_, index) => {
            const seatNumber = index + 1;
            const assignment = assigned.find(seat => Number(seat.nomor_kursi) === seatNumber);
            const student = assignment && siswaOf(assignment.siswa_id);
            return `<button class="room-seat ${student ? 'filled' : ''}" data-act="roomSeat" data-seat="${seatNumber}" title="${!room.kelas_id ? 'Tautkan ruang ke kelas terlebih dahulu' : student ? 'Klik untuk mengosongkan kursi' : 'Klik untuk memilih siswa'}">
                <span class="bdg ${student ? 'g' : ''}">${roomSeatLabel(seatNumber)}</span>${student
                    ? `<b>${esc(student.nama)}</b><small>${esc(student.kelas || '')} · ${esc(student.nis)}</small>`
                    : `${!room.kelas_id ? '<em>Sinkronkan ruang dengan kelas untuk mengatur penempatan</em>' : S.ui.roomStudentId ? '<em>Klik untuk menempatkan siswa terpilih</em>' : '<em>Klik untuk memilih siswa</em>'}`}</button>`;
        }).join('');
        return head('Ruang Ujian & Denah Tempat Duduk', 'Atur kapasitas ruang, pilih siswa dari kelas, dan cetak denah.', actions) +
            `<div class="room-layout"><div>${left}</div>
            <section class="room-plan"><div class="room-heading"><div><small style="color:var(--rose);font-weight:800">PRATINJAU DENAH RUANG</small><h2 style="font-size:20px">${esc(room.kode)} — ${esc(room.nama)}</h2><p style="font-size:11px;color:var(--muted)">Kapasitas ${capacity} kursi (${room.baris} Baris × ${room.kolom} Kolom Meja)${S.ui.roomStudentId ? ' · Klik kursi kosong untuk menempatkan siswa terpilih' : ''}</p></div>
            ${room.kelas_id ? `<button class="btn sm ghost" data-act="roomEdit" data-id="${room.id}">${ic('pencil', 14)}Ubah</button>` : '<small class="bdg a">Belum tertaut ke kelas</small>'}</div>
            <div class="acts" style="margin-top:12px"><button class="btn" style="background:#60bcb3" data-act="roomPickStudent" ${room.kelas_id ? '' : 'disabled'}>${ic('users', 16)}Pilih Siswa dari Kelas</button><button class="btn" style="background:#242424" data-act="roomPrint">${ic('printer', 16)}Cetak Denah (Tab Baru)</button></div>
            <div class="room-stage"><div><small>DEPAN RUANG</small><br>PAPAN TULIS / LAYAR INFORMASI</div><div><small>PENGAWAS UJIAN</small><br>PENGAWAS RUANG UJIAN</div></div>
            <div class="room-seats" style="--room-columns:${Number(room.kolom)}">${seats}</div></section></div>`;
    }

    /* ---------- Jadwal Ujian ---------- */
    function agendaSorted() {
        return D().agenda.slice().sort((a, b) =>
            `${a.tanggal} ${a.jam_mulai}`.localeCompare(`${b.tanggal} ${b.jam_mulai}`)
        );
    }

    function agendaRoomAssignments(agenda) {
        return (agenda?.ruang_pengawas || []).map(assignment => ({
            ...assignment,
            room: D().ruang.find(room => room.id === assignment.ruang_id),
            exam: D().jadwal.find(exam => exam.id === assignment.ujian_id),
            supervisors: (assignment.pengawas_ids || [])
                .map(id => D().guru.find(teacher => teacher.id === id))
                .filter(Boolean)
        })).filter(assignment => assignment.room);
    }

    function syncAgendaSupervisorControls(option) {
        if (!option) return;
        const roomSelected = option.querySelector('[data-agenda-room]')?.checked,
            countInput = option.querySelector('[data-agenda-supervisor-count]'),
            countField = option.querySelector('.agenda-supervisor-count'),
            examInput = option.querySelector('[data-agenda-exam]'),
            examField = option.querySelector('.agenda-room-exam'),
            supervisorList = option.querySelector('.agenda-supervisors'),
            supervisorInputs = $$('[data-agenda-supervisor]', option);
        if (examField) examField.hidden = !roomSelected;
        if (examInput) {
            examInput.disabled = !roomSelected;
            examInput.required = false;
            if (roomSelected) examInput.dataset.searchRequired = '';
            else delete examInput.dataset.searchRequired;
            const trigger = examInput.closest('[data-search-select]')?.querySelector('[data-search-select-trigger]');
            if (trigger) trigger.disabled = !roomSelected;
        }
        if (countField) countField.hidden = !roomSelected;
        if (countInput) countInput.disabled = !roomSelected;
        if (supervisorList) supervisorList.hidden = !roomSelected;
        if (!roomSelected) {
            supervisorInputs.forEach(input => {
                input.disabled = true;
                input.checked = false;
            });
            return;
        }
        const selectedCount = supervisorInputs.filter(input => input.checked).length,
            requiredCount = Number(countInput?.value) || 0;
        supervisorInputs.forEach(input => {
            input.disabled = !input.checked && selectedCount >= requiredCount;
        });
    }

    function agendaForm(id = '') {
        const agenda = D().agenda.find(item => item.id === id);
        const existingRooms = new Map((agenda?.ruang_pengawas || [])
            .map(assignment => [assignment.ruang_id, assignment]));
        const allExams = D().jadwal.slice();
        const currentExamIds = new Set((agenda?.ruang_pengawas || []).map(assignment => assignment.ujian_id));
        const scheduledElsewhere = new Set(D().agenda
            .filter(item => item.id !== agenda?.id)
            .flatMap(item => (item.ruang_pengawas || []).map(assignment => assignment.ujian_id)));
        const exams = allExams.filter(exam =>
            !scheduledElsewhere.has(exam.id) || currentExamIds.has(exam.id)
        ).sort((a, b) =>
            `${a.kelas || ''} ${a.nama_ujian || ''}`.localeCompare(`${b.kelas || ''} ${b.nama_ujian || ''}`, 'id')
        );
        const rooms = D().ruang.slice().sort((a, b) => a.kode.localeCompare(b.kode, 'id', { numeric: true }));
        const teachers = D().guru.filter(teacher => teacher.aktif !== false)
            .sort((a, b) => a.nama.localeCompare(b.nama, 'id'));
        const sessions = [
            { start: '07:30', end: '09:00', label: 'Sesi 1 (07.30 - 09.00)' },
            { start: '09:00', end: '10:30', label: 'Sesi 2 (09.00 - 10.30)' },
            { start: '10:30', end: '12:00', label: 'Sesi 3 (10.30 - 12.00)' }
        ];
        const currentStart = String(agenda?.jam_mulai || '07:30').slice(0, 5);
        const currentEnd = String(agenda?.jam_selesai || '09:00').slice(0, 5);
        const currentSession = `${currentStart}|${currentEnd}`;
        const hasCurrentSession = sessions.some(session => `${session.start}|${session.end}` === currentSession);
        const sessionOptions = sessions.map(session =>
            `<option value="${session.start}|${session.end}" ${currentSession === `${session.start}|${session.end}` ? 'selected' : ''}>${session.label}</option>`
        ).join('');
        const legacySessionOption = agenda && !hasCurrentSession
            ? `<option value="${esc(currentSession)}" selected>Waktu saat ini (${esc(currentStart.replace(':', '.'))} - ${esc(currentEnd.replace(':', '.'))})</option>`
            : '';
        const roomOptions = rooms.map(room => {
            const existing = existingRooms.get(room.id);
            const selectedTeachers = new Set(existing?.pengawas_ids || []);
            const checked = existingRooms.has(room.id);
            const otherRoomExamIds = new Set((agenda?.ruang_pengawas || [])
                .filter(assignment => assignment.ruang_id !== room.id)
                .map(assignment => assignment.ujian_id));
            const roomExams = exams.filter(exam =>
                exam.kelas_id === room.kelas_id && (!otherRoomExamIds.has(exam.id) || exam.id === existing?.ujian_id)
            );
            const classHasExams = allExams.some(exam => exam.kelas_id === room.kelas_id);
            const selectedCount = Math.max(1, teachers.filter(teacher => selectedTeachers.has(teacher.id)).length);
            return `            <div class="agenda-room-option">
                <label class="agenda-check"><input type="checkbox" data-agenda-room="${esc(room.id)}" ${checked ? 'checked' : ''} ${!roomExams.length && !checked ? 'disabled' : ''}>
                    <span><b>${esc(room.kode)} — ${esc(room.nama)}</b><small>${esc(kelasName(room.kelas_id))} · ${Number(room.baris) * Number(room.kolom)} kursi</small></span></label>
                <div class="agenda-room-exam" ${checked ? '' : 'hidden'}>
                    <label class="f"><span>Mata pelajaran / ujian *</span><select class="inp" data-agenda-exam="${esc(room.id)}" ${checked ? 'required' : 'disabled'}>
                        <option value="">Pilih mata pelajaran / ujian</option>${roomExams.map(exam => `<option value="${esc(exam.id)}" ${existing?.ujian_id === exam.id ? 'selected' : ''}>${esc(exam.nama_ujian)}</option>`).join('')}
                    </select></label>
                    ${roomExams.length ? '' : `<small style="color:var(--muted)">${classHasExams ? 'Semua LJK untuk kelas ini sudah dijadwalkan.' : 'Belum ada LJK untuk kelas ini. Hapus ruang ini dari jadwal atau buat LJK terlebih dahulu.'}</small>`}
                </div>
                <div class="agenda-supervisor-count" ${checked ? '' : 'hidden'}>
                    <label class="f"><span>Jumlah pengawas per ruang *</span><input class="inp" type="number" min="1" max="${Math.max(1, teachers.length)}" step="1" value="${selectedCount}" data-agenda-supervisor-count="${esc(room.id)}" ${checked ? 'required' : 'disabled'}></label>
                    <small style="color:var(--muted)">Tentukan jumlahnya, lalu pilih tepat sebanyak itu.</small>
                </div>
                <div class="agenda-supervisors" ${checked ? '' : 'hidden'}>${teachers.map(teacher =>
                    `<label class="agenda-check"><input type="checkbox" data-agenda-supervisor="${esc(room.id)}" value="${esc(teacher.id)}" ${selectedTeachers.has(teacher.id) ? 'checked' : ''} ${checked ? '' : 'disabled'}>
                    <span>${esc(teacher.nama)}${teacher.nik ? `<small>NIK ${esc(teacher.nik)}</small>` : ''}</span></label>`
                ).join('') || '<small style="color:var(--muted)">Belum ada guru aktif.</small>'}</div>
            </div>`;
        }).join('');
        const hasRoomExam = rooms.some(room => exams.some(exam => exam.kelas_id === room.kelas_id));

        openModal(`<div class="mh"><h3 style="margin:0">${agenda ? 'Ubah Jadwal Ujian' : 'Tambah Jadwal Ujian'}</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>
            <form class="agenda-form" data-form="agenda"><input type="hidden" name="id" value="${esc(agenda?.id || '')}">
            <div class="agenda-form-grid">
                <label class="f"><span>Tanggal ujian *</span><input class="inp" type="date" name="tanggal" required value="${esc(agenda?.tanggal || todayISO())}"></label>
                <label class="f"><span>Sesi ujian *</span><select class="inp" name="sesi" required>${sessionOptions}${legacySessionOption}</select></label>
            </div>
            <section class="agenda-section">
                <div style="margin-bottom:10px"><b>Ujian, ruang, dan pengawas *</b><p style="font-size:11px;color:var(--muted);margin:4px 0 0">Pilih mata pelajaran/ujian sesuai kelas setiap ruang, lalu tentukan jumlah pengawas dan pilih tepat sebanyak itu. Setiap pengawas hanya dapat bertugas di satu ruang pada waktu yang sama.</p></div>
                <div class="agenda-room-grid">${roomOptions || '<div class="empty">Tambahkan ruang ujian terlebih dahulu.</div>'}</div>
            </section>
            ${!allExams.length || !rooms.length || !teachers.length || !hasRoomExam ? `<div class="agenda-form-hint">${[
                !allExams.length ? 'Buat ujian di menu LJK terlebih dahulu.' : '',
                allExams.length && !exams.length ? 'Semua mata pelajaran/ujian sudah dijadwalkan.' : '',
                !rooms.length ? 'Buat ruang ujian terlebih dahulu.' : '',
                exams.length && rooms.length && !hasRoomExam ? 'Buat LJK untuk kelas yang tertaut ke ruang.' : '',
                !teachers.length ? 'Impor atau aktifkan data guru terlebih dahulu.' : ''
            ].filter(Boolean).join(' ')}</div>` : ''}
            <div class="macts agenda-form-actions"><button type="button" class="btn ghost" data-act="closeModal">Batal</button><button class="btn" ${!allExams.length || !rooms.length || !teachers.length || !hasRoomExam ? 'disabled' : ''}>${ic('save', 16)}Simpan Jadwal</button></div>
            </form>`, true);
        const modal = $('#modal .modal');
        if (modal) {
            modal.classList.add('agenda-modal');
            $$('.agenda-room-option', modal).forEach(syncAgendaSupervisorControls);
        }
    }

    function agendaDay(date) {
        return date ? new Date(`${date}T00:00:00`).toLocaleDateString('id-ID', { weekday: 'long' }) : '-';
    }

    function agendaTime(value) {
        return String(value || '').slice(0, 5);
    }

    const AGENDA_PRINT_ALL = '__all__';
    const AGENDA_ROOM_ALL = '__all__';

    function pgAgenda() {
        const agendas = agendaSorted();
        const allAgendasSelected = S.ui.agendaPrintId === AGENDA_PRINT_ALL;
        if (!allAgendasSelected && !agendas.some(item => item.id === S.ui.agendaPrintId)) {
            S.ui.agendaPrintId = agendas[0]?.id || '';
        }
        const selected = agendas.find(item => item.id === S.ui.agendaPrintId);
        const roomAssignments = allAgendasSelected
            ? agendas.flatMap(agenda => agendaRoomAssignments(agenda))
            : agendaRoomAssignments(selected);
        const availableRooms = Array.from(new Map(roomAssignments.map(item => [item.room.id, item.room])).values())
            .sort((a, b) => a.kode.localeCompare(b.kode, 'id', { numeric: true }));
        if (S.ui.agendaPrintRoomId !== AGENDA_ROOM_ALL &&
            !availableRooms.some(room => room.id === S.ui.agendaPrintRoomId)) {
            S.ui.agendaPrintRoomId = allAgendasSelected ? AGENDA_ROOM_ALL : roomAssignments[0]?.room.id || '';
        }
        const hasPrintDocuments = roomAssignments.some(item =>
            S.ui.agendaPrintRoomId === AGENDA_ROOM_ALL || item.room.id === S.ui.agendaPrintRoomId
        );
        const printAllSelected = allAgendasSelected || S.ui.agendaPrintRoomId === AGENDA_ROOM_ALL;
        const actions = `<button class="btn ghost" data-act="agendaPrintAll" ${agendas.length ? '' : 'disabled'}>${ic('printer', 16)}Cetak Jadwal Ujian</button>
            <button class="btn" data-act="agendaForm">${ic('plus', 16)}Tambah Jadwal</button>`;
        const rows = agendas.map((item, index) => {
            const assignments = agendaRoomAssignments(item);
            return `<tr><td>${index + 1}</td><td><b>${esc(agendaDay(item.tanggal))}</b><br>${esc(fmtDate(item.tanggal))}</td>
                <td>${esc(agendaTime(item.jam_mulai))}–${esc(agendaTime(item.jam_selesai))}</td>
                <td>${assignments.map(assignment => `<div style="margin-bottom:7px"><span class="bdg c">${esc(assignment.room.kode)}</span> <b>${esc(assignment.exam?.nama_ujian || 'Ujian tidak ditemukan')}</b><br><small>Pengampu: ${esc(guruOf(assignment.exam?.guru_id)?.nama || '-')}</small></div>`).join('') || '-'}</td>
                <td>${assignments.map(assignment => `<div style="margin-bottom:7px"><span class="bdg c">${esc(assignment.room.kode)}</span> <b>${esc(assignment.room.nama)}</b><br>
                    <small style="color:var(--muted)">Pengawas: ${esc(assignment.supervisors.map(teacher => teacher.nama).join(', ') || '-')}</small></div>`).join('') || '-'}
                </td><td class="ac"><button class="btn sm ghost" data-act="agendaForm" data-id="${esc(item.id)}" title="Ubah">${ic('pencil', 14)}</button>
                    <button class="btn sm danger" data-act="agendaDelete" data-id="${esc(item.id)}" title="Hapus">${ic('trash-2', 14)}</button></td></tr>`;
        }).join('');

        return head('Jadwal Ujian', 'Atur tanggal, waktu, ruang, dan pengawas ujian.', actions) +
            `<section class="card" style="margin-bottom:18px"><h3 style="margin:0 0 12px">Cetak Dokumen Ujian</h3>
                <div class="fg agenda-print-controls" style="grid-template-columns:minmax(0,2fr) minmax(180px,1fr) auto;align-items:end">
                    <label class="f"><span>Jadwal ujian</span><select class="inp" data-bind="agendaPrintId">
                        <option value="${AGENDA_PRINT_ALL}" ${allAgendasSelected ? 'selected' : ''} ${agendas.length ? '' : 'disabled'}>Semua Jadwal</option>
                        <option value="" ${!S.ui.agendaPrintId ? 'selected' : ''}>Pilih jadwal</option>${agendas.map(item => {
                            const examNames = [...new Set(agendaRoomAssignments(item).map(assignment => assignment.exam?.nama_ujian).filter(Boolean))];
                            const examLabel = examNames.length === 1 ? examNames[0] : `${examNames.length} ujian`;
                            return `<option value="${esc(item.id)}" ${item.id === S.ui.agendaPrintId ? 'selected' : ''}>${esc(fmtDate(item.tanggal))} · ${esc(agendaTime(item.jam_mulai))} · ${esc(examLabel)}</option>`;
                        }).join('')}
                    </select></label>
                    <label class="f"><span>Ruang</span><select class="inp" data-bind="agendaPrintRoomId" ${availableRooms.length ? '' : 'disabled'}>
                        ${availableRooms.length ? `<option value="${AGENDA_ROOM_ALL}" ${S.ui.agendaPrintRoomId === AGENDA_ROOM_ALL ? 'selected' : ''}>Semua Ruang</option>${availableRooms.map(room => `<option value="${esc(room.id)}" ${room.id === S.ui.agendaPrintRoomId ? 'selected' : ''}>${esc(room.kode)} — ${esc(room.nama)}</option>`).join('')}` : '<option value="">Pilih jadwal terlebih dahulu</option>'}
                    </select></label>
                    <div class="acts" style="margin:0">
                        <button class="btn sm ghost" data-act="agendaAttendance" ${hasPrintDocuments ? '' : 'disabled'}>${printAllSelected ? 'Cetak Semua Daftar Hadir' : 'Daftar Hadir'}</button>
                        <button class="btn sm ghost" data-act="agendaMinutes" ${hasPrintDocuments ? '' : 'disabled'}>${printAllSelected ? 'Cetak Semua Berita Acara' : 'Berita Acara'}</button>
                    </div>
                </div>
            </section>
            <div class="tw"><table><thead><tr><th>#</th><th>Hari & Tanggal</th><th>Waktu Ujian</th><th>Mata Pelajaran / Ujian per Ruang</th><th>Ruang & Pengawas</th><th>Aksi</th></tr></thead><tbody>${rows}</tbody></table>
                ${agendas.length ? '' : empty('Belum ada jadwal ujian. Tambahkan jadwal untuk mulai mengatur waktu, ruang, dan pengawas.')}</div>`;
    }

    function agendaPrintAll() {
        const agendas = agendaSorted();
        const settings = D().settings;
        const sessions = new Map();
        agendas.forEach(item => {
            const key = `${item.tanggal}|${item.jam_mulai}|${item.jam_selesai}`;
            if (!sessions.has(key)) sessions.set(key, {
                agenda: item,
                assignments: []
            });
            const session = sessions.get(key);
            const assignments = agendaRoomAssignments(item);
            session.assignments.push(...(assignments.length ? assignments : [null]));
        });
        const rows = Array.from(sessions.values()).map((session, index) => {
            const { agenda, assignments } = session;
            const mergedCells = `<td class="agenda-number" rowspan="${assignments.length}">${index + 1}</td><td class="agenda-session" rowspan="${assignments.length}"><b>${esc(agendaDay(agenda.tanggal))}</b><br>${esc(fmtDate(agenda.tanggal))}<br>${esc(agendaTime(agenda.jam_mulai))} – ${esc(agendaTime(agenda.jam_selesai))}</td>`;
            return assignments.map((assignment, assignmentIndex) => {
                const exam = assignment?.exam;
                const subjectText = exam
                    ? `<b>${esc(exam.nama_ujian || '-')}</b><br><small>Pengampu: ${esc(guruOf(exam.guru_id)?.nama || '-')}</small>`
                    : '-';
                const roomText = assignment
                    ? `<b>${esc(assignment.room.kode)} — ${esc(assignment.room.nama)}</b><br><small>Pengawas: ${esc(assignment.supervisors.map(teacher => teacher.nama).join(', ') || '-')}</small>`
                    : '-';
                return `<tr>${assignmentIndex === 0 ? mergedCells : ''}<td>${subjectText}</td><td>${roomText}</td></tr>`;
            }).join('');
        }).join('');
        const datePrinted = new Date().toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        });
        const body = `${printLetterhead('JADWAL PELAKSANAAN UJIAN', settings)}
            <table class="agenda-table"><thead><tr><th>No.</th><th>Hari, Tanggal &amp; Waktu</th><th>Mata Pelajaran / Ujian</th><th>Ruang &amp; Pengawas</th></tr></thead><tbody>${rows}</tbody></table>
            <div class="agenda-signature"><div><span>Tanggal cetak: ${esc(datePrinted)}</span><b>Mengetahui,<br>Ketua Panitia</b><strong>${esc(settings.ketua_panitia || '')}</strong></div></div>`;
        const css = `${printLetterheadStyles}.agenda-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:9px;line-height:1.4}.agenda-table th,.agenda-table td{border:1px solid #444;padding:7px 6px;text-align:left;vertical-align:top;overflow-wrap:anywhere}.agenda-table th{background:#eef0f3;text-align:center;font-weight:700}.agenda-table th:nth-child(1){width:7%}.agenda-table th:nth-child(2){width:23%}.agenda-table th:nth-child(3){width:32%}.agenda-table th:nth-child(4){width:38%}.agenda-table tbody tr:nth-child(even){background:#fafafa}.agenda-table tbody tr{break-inside:avoid;page-break-inside:avoid}.agenda-table .agenda-number,.agenda-table .agenda-session{text-align:center;vertical-align:middle}.agenda-table .agenda-session{white-space:nowrap}.agenda-table td small{display:block;margin-top:3px;color:#444;font-size:8px;line-height:1.35}.agenda-table thead{display:table-header-group}.agenda-signature{display:flex;justify-content:flex-end;margin-top:30px;font-size:10px}.agenda-signature div{display:flex;min-width:190px;flex-direction:column;gap:5px}.agenda-signature b{margin-top:4px}.agenda-signature strong{margin-top:38px;text-decoration:underline}`;
        previewHTML(
            'Jadwal Pelaksanaan Ujian',
            'Pratinjau cetak kertas A4 resmi',
            body,
            css
        );
    }

    function createAgendaDocumentPreview(kind, agenda, assignment) {
        const exam = assignment.exam;
        const room = assignment.room;
        const settings = D().settings;
        const capacity = Number(room.baris) * Number(room.kolom);
        const seats = D().denah.filter(seat => seat.ruang_id === room.id && seat.siswa_id);
        const students = Array.from({ length: capacity }, (_, index) => {
            const seatNumber = index + 1;
            const seat = seats.find(item => Number(item.nomor_kursi) === seatNumber);
            const student = seat && siswaOf(seat.siswa_id);
            return { seatNumber, student };
        });
        const warning = seats.length ? '' : '<p class="document-warning"><b>Catatan:</b> Penempatan siswa pada denah ruang belum diatur.</p>';
        const details = `<table class="meta"><tbody>
            <tr><th>Hari / Tanggal</th><td>${esc(agendaDay(agenda.tanggal))}, ${esc(fmtDate(agenda.tanggal))}</td></tr>
            <tr><th>Waktu</th><td>${esc(agendaTime(agenda.jam_mulai))} – ${esc(agendaTime(agenda.jam_selesai))}</td></tr>
            <tr><th>Mata Pelajaran / Ujian</th><td>${esc(exam?.nama_ujian || '-')} — ${esc(exam?.kelas || kelasName(exam?.kelas_id) || '-')}</td></tr>
            <tr><th>Ruang</th><td>${esc(room.kode)} — ${esc(room.nama)}</td></tr>
            <tr><th>Pengawas</th><td>${esc(assignment.supervisors.map(teacher => teacher.nama).join(', ') || '-')}</td></tr>
        </tbody></table>`;
        const attendanceDetails = `<table class="meta exam-info"><tbody>
            <tr><th>Ruang Ujian</th><td>: ${esc(room.kode)} — ${esc(room.nama)}</td><th>Mata Pelajaran</th><td>: ${esc(exam?.nama_ujian || '-')}</td></tr>
            <tr><th>Hari / Tanggal</th><td>: ${esc(agendaDay(agenda.tanggal))}, ${esc(agenda.tanggal)}</td><th>Pengawas Ruang</th><td>: ${assignment.supervisors.map(teacher => esc(teacher.nama)).join('<br>') || '-'}</td></tr>
            <tr><th>Waktu Ujian</th><td>: ${esc(agendaTime(agenda.jam_mulai))} s.d. ${esc(agendaTime(agenda.jam_selesai))} WIB</td><th></th><td></td></tr>
        </tbody></table>`;
        const css = `${printLetterheadStyles}.meta,.list{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px;line-height:1.4}.meta{margin:14px 0 18px}.meta th,.meta td,.list th,.list td{border:1px solid #444;padding:7px 8px;text-align:left;vertical-align:top;overflow-wrap:anywhere}.meta th{width:28%;background:#eef0f3}.exam-info{border:1px solid #444}.exam-info th,.exam-info td{border:0;padding:4px 8px}.exam-info th{width:18%;background:transparent;white-space:nowrap}.exam-info td{width:32%}.list th{background:#eef0f3;text-align:center}.list th:nth-child(1){width:8%}.list th:nth-child(2){width:16%}.list th:nth-child(3){width:30%}.list th:nth-child(4){width:14%}.list th:nth-child(5){width:32%}.list thead{display:table-header-group}.list tbody tr{break-inside:avoid;page-break-inside:avoid}.list td:first-child{text-align:center}.list td{height:30px}.list .signature-cell{text-align:left;white-space:nowrap}.list tbody tr:nth-child(even) .signature-cell{text-align:right}.document-warning{margin:12px 0;padding:9px 11px;border:1px solid #d6a443;background:#fff8e6;font-size:10px}.document-copy{margin:12px 0;font-size:11px;line-height:1.6}.incident-notes{min-height:110px;margin-top:8px;border:1px solid #444;background:repeating-linear-gradient(to bottom,#fff 0,#fff 26px,#d8d8d8 27px)}.signatures{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:34px;text-align:center;font-size:10px;break-inside:avoid;page-break-inside:avoid}.signatures p{min-height:58px;margin:0 0 8px}.signatures b{display:block;overflow-wrap:anywhere}.list td:last-child{min-width:80px}@media(max-width:600px){.meta th{width:34%}.meta th,.meta td,.list th,.list td{padding:6px 5px}.exam-info th,.exam-info td{padding:4px 5px}.signatures{gap:16px}}`;
        const attendanceSummaryStyles = '.attendance-summary{width:320px;max-width:100%;margin:12px 0;padding:8px 10px;border:1px solid #444;font-size:10px;line-height:1.4;break-inside:avoid;page-break-inside:avoid}.attendance-summary-title{display:block;margin-bottom:5px;text-decoration:underline}.attendance-summary table{width:100%;border-collapse:collapse}.attendance-summary td{border:0;padding:2px 4px;vertical-align:top}.attendance-summary td:nth-child(2){width:14px;text-align:center}.attendance-summary td:last-child{white-space:nowrap}';
        const showDocumentPreview = (title, heading, content, info = details, extraCss = '') => ({
            title,
            subtitle: 'Pratinjau cetak kertas A4 / Folio',
            body: `${printLetterhead(heading, settings)}${info}${content}`,
            css: `${css}${extraCss}`
        });

        if (kind === 'attendance') {
            const rows = students.map(({ seatNumber, student }) =>
                `<tr><td style="text-align:center">${seatNumber}</td><td>${esc(student?.nis || '')}</td><td>${esc(student?.nama || '')}</td><td>${esc(student?.kelas || exam?.kelas || kelasName(exam?.kelas_id) || '')}</td><td class="signature-cell">${seatNumber}. ............</td></tr>`
            ).join('');
            return showDocumentPreview('Daftar Hadir Ujian', 'DAFTAR HADIR PESERTA UJIAN', `${warning}
                <table class="list"><thead><tr><th>No.</th><th>NIS</th><th>Nama Siswa</th><th>Kelas</th><th>Tanda Tangan</th></tr></thead><tbody>${rows}</tbody></table>
                <div class="attendance-summary"><strong class="attendance-summary-title">Rekapitulasi Kehadiran Peserta:</strong><table><tbody>
                    <tr><td>Jumlah Peserta Terdaftar</td><td>:</td><td><b>${seats.length} orang</b></td></tr>
                    <tr><td>Jumlah Peserta Hadir</td><td>:</td><td>........ orang</td></tr>
                    <tr><td>Jumlah Peserta Tidak Hadir</td><td>:</td><td>........ orang</td></tr>
                </tbody></table></div>
                <div class="signatures"><div><p>Pengawas Ruang</p><b>${assignment.supervisors.map(teacher => esc(teacher.nama)).join('<br>') || '-'}</b></div><div><p>Mengetahui,<br>Ketua Panitia</p><b>${esc(settings.ketua_panitia || '')}</b></div></div>`, attendanceDetails, attendanceSummaryStyles);
        }

        const activity = [settings.kegiatan, settings.semester].filter(Boolean).join(' ').toUpperCase();
        const supervisors = assignment.supervisors.map(teacher =>
            `${esc(teacher.nama)}${teacher.nik ? ` (${esc(teacher.nik)})` : ''}`
        ).join('; ') || '-';
        const supervisorSignatures = assignment.supervisors.map(teacher => esc(teacher.nama)).join('<br>') || '-';
        const minutesCss = `${printLetterheadStyles}.minutes-subtitle{margin:0 0 14px;text-align:center;font-size:14px}.minutes-intro,.minutes-closing{margin:0 0 14px;font-size:12px;line-height:1.55}.minutes-details{width:100%;margin:0 0 14px;border:1px solid #444;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.35}.minutes-details td{border:0;padding:4px 14px;vertical-align:top}.minutes-details td:first-child{width:32%;padding-right:4px}.minutes-details td:nth-child(2){width:1%;padding:4px 0}.minutes-details td:last-child{padding-left:2px}.minutes-absent-line{height:22px;border-bottom:1px dotted #4775b8}.minutes-notes-title{margin:0 0 12px;font-size:12px}.minutes-notes-space{margin-bottom:12px;padding:6px 12px 10px;border:1px solid #444}.minutes-note-line{height:25px;border-bottom:1px dotted #4775b8}.minutes-closing{text-align:justify}.minutes-signatures{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px;text-align:center;font-size:12px;break-inside:avoid;page-break-inside:avoid}.minutes-signatures p{min-height:44px;margin:0 0 8px}.minutes-signatures b{display:block;min-height:20px;overflow-wrap:anywhere}`;
        const minutes = `<h2 class="minutes-subtitle">${esc(activity || 'UJIAN')}</h2>
            <p class="minutes-intro">Pada hari ini <b>${esc(agendaDay(agenda.tanggal))}</b> tanggal <b>${esc(agenda.tanggal)}</b>, bertempat di <b>${esc(settings.nama_sekolah || '-')}</b>, telah diselenggarakan <b>${esc(activity || 'UJIAN')}</b> Tahun Pelajaran <b>${esc(settings.tahun_ajaran || '-')}</b>, untuk mata pelajaran:</p>
            <table class="minutes-details"><tbody>
                <tr><td>1. Mata Pelajaran</td><td>:</td><td><b>${esc(exam?.nama_ujian || '-')}</b></td></tr>
                <tr><td>2. Ruang Ujian</td><td>:</td><td><b>${esc(room.kode)} — ${esc(room.nama)}</b></td></tr>
                <tr><td>3. Waktu Ujian</td><td>:</td><td><b>Pukul ${esc(agendaTime(agenda.jam_mulai))} s.d. ${esc(agendaTime(agenda.jam_selesai))} WIB</b></td></tr>
                <tr><td>4. Nama Guru Pengawas</td><td>:</td><td><b>${supervisors}</b></td></tr>
                <tr><td>5. Jumlah Peserta Seharusnya</td><td>:</td><td><b>${seats.length} Orang Peserta</b></td></tr>
                <tr><td>6. Jumlah Peserta yang Hadir</td><td>:</td><td>........ Orang Peserta</td></tr>
                <tr><td>7. Jumlah Peserta Tidak Hadir</td><td>:</td><td>........ Orang Peserta</td></tr>
                <tr><td>8. Nomor Peserta Tidak Hadir</td><td>:</td><td><div class="minutes-absent-lines"><div class="minutes-absent-line"></div><div class="minutes-absent-line"></div><div class="minutes-absent-line"></div><div class="minutes-absent-line"></div></div></td></tr>
            </tbody></table>
            <p class="minutes-notes-title"><b>Catatan Selama Pelaksanaan Ujian (Aman / Tertib / Kendala Teknis):</b></p>
            <div class="minutes-notes-space"><div class="minutes-note-line"></div><div class="minutes-note-line"></div><div class="minutes-note-line"></div><div class="minutes-note-line"></div><div class="minutes-note-line"></div><div class="minutes-note-line"></div></div>
            <p class="minutes-closing">Demikian Berita Acara Pelaksanaan Ujian ini dibuat dengan sesungguhnya untuk dapat dipergunakan sebagaimana mestinya.</p>
            <div class="minutes-signatures"><div><p>Pengawas Ruang</p><b>${supervisorSignatures}</b></div><div><p>Mengetahui,<br>Ketua Panitia</p><b>${esc(settings.ketua_panitia || '')}</b></div></div>`;
        return {
            title: 'Berita Acara Ujian',
            subtitle: 'Pratinjau cetak kertas A4 / Folio',
            body: `${printLetterhead('BERITA ACARA PELAKSANAAN UJIAN', settings)}${minutes}`,
            css: minutesCss
        };
    }

    function previewAgendaDocuments(kind, assignments) {
        const documents = assignments.map(({ agenda, assignment }) =>
            createAgendaDocumentPreview(kind, agenda, assignment)
        );
        if (documents.length === 1) {
            const [document] = documents;
            return previewHTML(document.title, document.subtitle, document.body, document.css);
        }

        const title = kind === 'attendance' ? 'Daftar Hadir Ujian' : 'Berita Acara Ujian';
        const body = documents.map(document =>
            `<section class="agenda-batch-document">${document.body}</section>`
        ).join('');
        const css = `${documents[0].css}.agenda-batch-document{break-after:page;page-break-after:always}.agenda-batch-document:last-child{break-after:auto;page-break-after:auto}`;
        previewHTML(`${title} (${documents.length} dokumen)`, `Pratinjau cetak · A4 / Folio`, body, css);
    }

    function printSelectedAgendaDocuments(kind) {
        const selectedAgendaId = S.ui.agendaPrintId;
        const selectedRoomId = S.ui.agendaPrintRoomId;
        if (!selectedAgendaId) return toast('Pilih jadwal ujian atau Semua Jadwal terlebih dahulu.', 'err');
        if (!selectedRoomId) return toast('Pilih ruang ujian atau Semua Ruang terlebih dahulu.', 'err');

        const agendas = selectedAgendaId === AGENDA_PRINT_ALL
            ? agendaSorted()
            : agendaSorted().filter(agenda => agenda.id === selectedAgendaId);
        const assignments = agendas.flatMap(agenda =>
            agendaRoomAssignments(agenda)
                .filter(assignment => selectedRoomId === AGENDA_ROOM_ALL || assignment.room.id === selectedRoomId)
                .map(assignment => ({ agenda, assignment }))
        );
        if (!assignments.length) return toast('Tidak ada dokumen untuk pilihan jadwal dan ruang tersebut.', 'err');

        previewAgendaDocuments(kind, assignments);
    }

    /* ---------- Pengaturan Sekolah ---------- */
    function pgPengaturan() {
        const s = D().settings;
        return head('Pengaturan Sekolah', 'Identitas sekolah dipakai pada LJK dan laporan rekap', '') +
            `<div class="row3"><form class="card" data-form="settings"><h3>Identitas Sekolah</h3><div class="fg">
    <label class="f full"><span>Nama sekolah *</span><input class="inp" name="nama_sekolah" required value="${esc(s.nama_sekolah)}"></label>
    <label class="f"><span>Tahun ajaran *</span><input class="inp" name="tahun_ajaran" required value="${esc(s.tahun_ajaran)}" placeholder="2026/2027"></label>
    <label class="f"><span>Semester *</span><select class="inp" name="semester" required><option value="" disabled ${s.semester ? '' : 'selected'}>Pilih semester</option><option value="Ganjil" ${s.semester === 'Ganjil' ? 'selected' : ''}>Ganjil</option><option value="Genap" ${s.semester === 'Genap' ? 'selected' : ''}>Genap</option></select></label>
    <label class="f full"><span>Nama kegiatan pada kop surat *</span><select class="inp" name="kegiatan" required><option value="" disabled ${s.kegiatan ? '' : 'selected'}>Pilih nama kegiatan</option>${schoolActivities.map(activity => `<option value="${esc(activity)}" ${s.kegiatan === activity ? 'selected' : ''}>${esc(activity)}</option>`).join('')}</select></label>
    <label class="f"><span>Ketua Panitia *</span><input class="inp" name="ketua_panitia" required value="${esc(s.ketua_panitia)}"></label>
    <label class="f"><span>KKM default</span><input class="inp" type="number" min="0" max="100" name="kkm_default" value="${s.kkm_default ?? 75}"></label>
    <label class="f full"><span>Link logo sekolah (URL gambar)</span><input class="inp" type="url" name="logo" value="${esc(s.logo)}" placeholder="https://contoh.com/logo.png"><small style="display:block;color:var(--muted);margin:5px 0 0 6px">Tempel link langsung ke gambar (.png/.jpg). Kosongkan jika tidak memakai logo.</small></label></div>
    <div style="display:flex;align-items:center;gap:14px">${s.logo ? `<img src="${esc(s.logo)}" alt="logo" onerror="this.style.display='none'" style="height:56px;border-radius:12px;border:1px solid var(--line)">` : '<small style="color:var(--muted)">Belum ada logo</small>'}<span style="flex:1"></span><button class="btn">${ic('save', 16)}Simpan</button></div></form>
    <div style="display:grid;gap:20px;align-content:start">
    <div class="card"><h3>Status Aplikasi</h3><p style="font-size:13px">Mode: <span class="bdg g">Database aplikasi (Laravel)</span></p><p style="font-size:12px;color:var(--muted);margin-top:8px">Pengguna: ${esc(S.user.nama)} (${S.user.role}).</p></div>
    ${isAdmin() ? `<div class="card"><h3>Reset Data</h3><p style="font-size:12px;color:var(--muted);margin:8px 0 14px">Menghapus seluruh data aplikasi dan akun hasil impor E-Rapor. Akun lokal yang tidak diimpor akan dipertahankan.</p><button class="btn danger" data-act="resetApplicationData">${ic('trash-2', 16)}Reset semua data</button></div>` : ''}</div></div>`;
    }
    /* ---------- Notifikasi ---------- */
    function notif() {
        const js = visJadwal(),
            items = [];
        js.forEach(j => {
            const b = ljkOf(j.id).length - hasilOf(j.id).length;
            if (b > 0 && j.status !== 'selesai') items.push({
                i: 'scan-line',
                c: '#ECE9FF',
                t: `${b} LJK belum discan`,
                s: j.nama_ujian
            });
        });
        js.forEach(j => {
            if (j.status !== 'selesai' && !D().kunci.some(k => k.jadwal_id === j.id && k.jawaban.some(Boolean)))
                items.push({
                    i: 'key-round',
                    c: '#FFE1E4',
                    t: 'Kunci jawaban belum diisi',
                    s: j.nama_ujian
                });
        });
        openModal(
            `<div class="mh"><h3 style="margin:0">Pemberitahuan</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div>${items.length ? items.map(x => `<div style="display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #F0F0FA"><div class="ico" style="width:40px;height:40px;background:${x.c}">${ic(x.i, 18)}</div><div><b style="font-size:13px">${esc(x.t)}</b><small style="display:block;color:var(--muted)">${esc(x.s)}</small></div></div>`).join('') : '<p style="color:var(--muted);padding:16px 0">Tidak ada pemberitahuan.</p>'}`
        );
    }

    /* ===================== SHELL & RENDER ===================== */
    const PAGES = {
        dashboard: pgDashboard,
        guru: pgGuru,
        kelas: pgKelas,
        mata_pelajaran: pgMataPelajaran,
        siswa: pgSiswa,
        jadwal: pgJadwal,
        agenda: pgAgenda,
        scan: pgScan,
        rekap: pgRekap,
        ruang: pgRuang,
        pengaturan: pgPengaturan
    };

    function loginView() {
        const r = S.ui.lrole;
        return `<div class="login"><div class="lcard"><div class="logo">${ic('scan-line', 28)}</div><h1>Scan LJK Ujian</h1><p>Koreksi lembar jawaban otomatis untuk sekolah</p>
  <div class="tabs2"><button class="${r === 'admin' ? 'on' : ''}" data-act="lrole" data-r="admin">Admin</button><button class="${r === 'guru' ? 'on' : ''}" data-act="lrole" data-r="guru">Guru</button></div>
  <form data-form="login"><label class="f"><span>Email</span><input class="inp" name="u" type="email" required autocomplete="username"></label><label class="f"><span>Password</span><input class="inp" name="p" type="password" required autocomplete="current-password"></label><button class="btn">Masuk</button></form>
  ${S.setupError ? `<div class="hint" style="background:#FFE1E4;color:#9b1c28">${esc(S.setupError)}</div>` : ''}
  <div class="hint">Gunakan akun yang sudah diimpor admin dari E-Rapor. Saat penyiapan awal, admin dapat masuk memakai akun bootstrap lokal.</div></div></div>`;
    }

    function shellView() {
        const m = myMenu(),
            u = S.user,
            mob = [m.find(x => x.id === 'dashboard'), m.find(x => x.id === 'jadwal'), m.find(x => x.id === 'scan'), m
                .find(x => x.id === 'rekap')
            ];
        return `<div class="shell"><aside class="side"><div class="logo">${ic('scan-line', 20)}</div><div class="logot">LJK</div>${m.map(x => `<button class="nav ${S.page === x.id ? 'on' : ''}" title="${x.label}" data-act="go" data-p="${x.id}">${ic(x.icon, 21)}</button>`).join('')}<div class="grow"></div><button class="nav" title="Keluar" data-act="logout">${ic('log-out', 21)}</button></aside>
  <main class="main" id="mainScroll"><div class="top"><div class="search">${ic('search', 18).replace('<svg ', '<svg class="s" ')}<input id="gSearch" placeholder="Cari data / menu…" value="${esc(S.q)}" autocomplete="off"></div>
  <div class="tr"><button class="ib" title="Pemberitahuan" data-act="notif">${ic('bell', 18)}<span class="dot"></span></button><div class="user" data-act="umenu"><div class="av">${esc(initials(u.nama))}</div><div><b>${esc(u.nama)}</b><small>${u.role === 'admin' ? 'Administrator' : 'Guru'}</small></div>${ic('chevron-down', 16)}</div>
  ${S.ui.menu ? `<div class="menu"><button data-act="notif">${ic('bell', 16)}Pemberitahuan</button><button data-act="logout">${ic('log-out', 16)}Keluar</button></div>` : ''}</div></div>
  <div id="view"></div></main>
  <nav class="bnav"><button class="${S.page === 'dashboard' ? 'on' : ''}" data-act="go" data-p="dashboard">${ic('layout-dashboard', 20)}</button><button class="${S.page === 'jadwal' ? 'on' : ''}" data-act="go" data-p="jadwal">${ic('file-spreadsheet', 20)}</button><button class="cen" data-act="go" data-p="scan">${ic('scan-line', 26)}</button><button class="${S.page === 'rekap' ? 'on' : ''}" data-act="go" data-p="rekap">${ic('bar-chart-3', 20)}</button><button data-act="more">${ic('layout-grid', 20)}</button></nav></div>`;
    }

    function render() {
        const root = $('#root');
        if (!S.user) {
            root.innerHTML = loginView();
            icons();
            return;
        }
        root.innerHTML = shellView();
        renderView();
    }

    function renderView() {
        const v = $('#view');
        if (!v) return;
        if (!myMenu().some(x => x.id === S.page)) S.page = 'dashboard';
        v.innerHTML = PAGES[S.page]();
        icons();
        if (S.page === 'scan') {
            if (S.scanR) renderResult();
            const vv = $('#camVideo');
            if (vv && S.cam && S.ui.scanMode === 'cam') {
                vv.srcObject = S.cam;
                vv.play().catch(() => {});
                $('#camHint')?.remove();
            }
        } else stopCam();
    }

    function go(p) {
        stopCam();
        S.page = p;
        S.q = '';
        S.ui.pg = {};
        S.ui.menu = false;
        S.scanR = null;
        render();
        $('#mainScroll')?.scrollTo(0, 0);
    }

    /* ===================== AKSI (event delegation) ===================== */
    const ACT = {
        go: d => {
            closeModal();
            go(d.p);
        },
        closeModal: () => closeModal(),
        logout: () => logout(),
        importActiveSemester: async () => {
            if (!(await confirmBox(
                'Impor akun admin/guru, kelas reguler, siswa aktif, serta penugasan mata pelajaran dari semester aktif E-Rapor? Akun yang tidak lagi aktif akan dinonaktifkan.',
                'Impor sekarang'
            ))) return;
            const result = await guard(async () => {
                const imported = await apiRequest('/import-erapor-active-semester', {
                    method: 'POST'
                });
                await reload(['guru', 'kelas', 'siswa', 'mata_pelajaran']);
                return imported;
            }, 'Mengimpor data E-Rapor…');
            if (result) {
                toast(`Semester ${result.semester || result.semester_id}: ${result.users} akun, ${result.classes} kelas, ${result.students} siswa, ${result.subjects} penugasan mapel diimpor`);
                renderView();
            }
        },
        resetApplicationData: async () => {
            if (!(await confirmBox(
                'Reset permanen seluruh guru, kelas, siswa, ruang ujian, denah kursi, jadwal ujian, LJK ujian, kunci jawaban, LJK siswa, hasil scan, pengaturan sekolah, dan akun hasil impor E-Rapor? Akun lokal yang tidak diimpor akan dipertahankan.',
                'Ya, reset semua data'
            ))) return;
            const result = await guard(async () => apiRequest('/reset-application-data', {
                method: 'POST'
            }), 'Mereset data aplikasi…');
            if (result) {
                S.user = null;
                S.page = 'dashboard';
                S.q = '';
                closeModal();
                render();
                toast('Data aplikasi direset. Silakan masuk kembali menggunakan akun lokal yang dipertahankan.');
            }
        },
        umenu: () => {
            S.ui.menu = !S.ui.menu;
            render();
        },
        more: () => openModal(
            `<div class="mh"><h3 style="margin:0">Menu Lainnya</h3><button class="btn sm ghost ico-b" data-act="closeModal">${ic('x', 16)}</button></div><div class="more">${myMenu().filter(x => !['dashboard', 'jadwal', 'scan', 'rekap'].includes(x.id)).map(x => `<button data-act="go" data-p="${x.id}">${ic(x.icon, 20)}${x.label}</button>`).join('')}<button data-act="notif">${ic('bell', 20)}Pemberitahuan</button><button data-act="logout" style="color:#C0303C">${ic('log-out', 20)}Keluar</button></div>`
        ),
        notif: () => {
            S.ui.menu = false;
            notif();
        },
        lrole: d => {
            S.ui.lrole = d.r;
            render();
        },
        roomForm: d => roomForm(d.id),
        bulkRoomForm: () => bulkRoomForm(),
        bulkRoomCreate: () => bulkRoomCreate(),
        roomEdit: d => roomForm(d.id),
        roomSelect: d => {
            S.ui.roomId = d.id;
            S.ui.roomStudentId = '';
            renderView();
        },
        roomPickStudent: d => {
            if (d.id) {
                S.ui.roomId = d.id;
                S.ui.roomStudentId = '';
            }
            roomPickStudent();
        },
        roomChooseStudent: async d => {
            const student = siswaOf(d.id);
            if (!student) return toast('Data siswa tidak ditemukan.', 'err');
            const targetSeat = S.ui.roomTargetSeat;
            if (targetSeat !== null) {
                closeModal();
                await assignRoomSeat(S.ui.roomId, Number(targetSeat), student.id);
                S.ui.roomTargetSeat = null;
                return;
            }
            S.ui.roomStudentId = student.id;
            S.ui.roomTargetSeat = null;
            closeModal();
            renderView();
            toast(`${student.nama} dipilih. Klik kursi kosong untuk menempatkan.`);
        },
        roomPlaceAll: async () => {
            const room = D().ruang.find(item => item.id === S.ui.roomId);
            const selectedClass = D().kelas.find(item => item.id === S.ui.roomClassId);
            if (!room || !selectedClass || room.kelas_id !== selectedClass.id) {
                return toast('Pilih ruang dan kelas yang tertaut terlebih dahulu.', 'err');
            }

            const orderedStudents = roomPickerStudents(selectedClass);
            if (!orderedStudents.length) {
                return toast(`Tidak ada siswa aktif di kelas ${selectedClass.nama}.`, 'err');
            }
            const alreadyInRoom = new Set(D().denah
                .filter(seat => seat.ruang_id === room.id && seat.siswa_id)
                .map(seat => seat.siswa_id));
            const toPlace = orderedStudents.filter(student => !alreadyInRoom.has(student.id));
            if (!toPlace.length) {
                return toast(`Semua siswa aktif kelas ${selectedClass.nama} sudah ditempatkan di ruang ini.`);
            }

            const capacity = Number(room.baris) * Number(room.kolom);
            const occupiedSeats = new Set(D().denah
                .filter(seat => seat.ruang_id === room.id && seat.siswa_id)
                .map(seat => Number(seat.nomor_kursi)));
            const emptySeats = Array.from({ length: capacity }, (_, index) => index + 1)
                .filter(number => !occupiedSeats.has(number));
            if (emptySeats.length < toPlace.length) {
                return toast(
                    `Kursi kosong tidak cukup: perlu ${toPlace.length}, tersedia ${emptySeats.length}. Ruang tidak diubah.`,
                    'err',
                    5000
                );
            }

            const rows = toPlace.map((student, index) => ({
                ruang_id: room.id,
                nomor_kursi: emptySeats[index],
                siswa_id: student.id
            }));
            const orderLabel = S.ui.roomStudentSort === 'acak' ? 'acak' : 'nama A–Z';
            if (!(await confirmBox(
                `Tempatkan ${rows.length} siswa aktif kelas ${selectedClass.nama} dengan urutan ${orderLabel} di ${room.nama}? Kursi yang sudah terisi tetap dipertahankan.`,
                'Tempatkan semua'
            ))) return;

            const ok = await guard(async () => {
                await dbInsert('denah', rows);
                await reload(['denah']);
                return true;
            }, 'Menempatkan semua siswa…');
            if (ok) {
                S.ui.roomStudentId = '';
                S.ui.roomTargetSeat = null;
                S.ui.roomStudentOrder = [];
                closeModal();
                renderView();
                toast(`${rows.length} siswa ditempatkan di ${room.nama}.`);
            }
        },
        roomSeat: async d => {
            const seatNumber = Number(d.seat);
            const assignment = D().denah.find(seat =>
                seat.ruang_id === S.ui.roomId && Number(seat.nomor_kursi) === seatNumber && seat.siswa_id
            );
            if (assignment) {
                if (!(await confirmBox(`Kosongkan ${roomSeatLabel(seatNumber)}?`))) return;
                await assignRoomSeat(S.ui.roomId, seatNumber, null);
                return;
            }
            if (S.ui.roomStudentId) {
                await assignRoomSeat(S.ui.roomId, seatNumber, S.ui.roomStudentId);
                return;
            }
            roomPickStudent(seatNumber);
        },
        roomDelete: async d => {
            const room = D().ruang.find(item => item.id === d.id);
            if (!room || !(await confirmBox(`Hapus ruang tambahan ${room.nama}? Ruang hanya dapat dihapus jika tidak berisi siswa dan tidak digunakan pada jadwal ujian.`))) return;
            const ok = await guard(async () => {
                await dbDelete('ruang', room.id);
                await reload(['ruang', 'denah']);
                if (S.ui.roomId === room.id) S.ui.roomId = '';
                S.ui.roomStudentId = '';
                return true;
            }, 'Menghapus ruang…');
            if (ok) {
                toast('Ruang ujian dihapus');
                renderView();
            }
        },
        roomPrint: () => {
            const room = D().ruang.find(item => item.id === S.ui.roomId);
            if (!room) return;
            previewHTML(`Denah ${room.nama}`, 'Pratinjau cetak denah · A4 / Folio', roomPrintMarkup(room), `${roomPrintStyles}${roomPrintFlowStyles}`);
        },
        roomPrintAll: () => {
            const rooms = D().ruang.slice().sort((a, b) => a.kode.localeCompare(b.kode, 'id', { numeric: true }));
            if (!rooms.length) return toast('Belum ada ruang ujian untuk dicetak.', 'err');
            const { unplacedStudents } = roomPrintReadiness(rooms);
            if (unplacedStudents.length) {
                return toast(`${unplacedStudents.length} siswa aktif belum ditempatkan pada denah. Lengkapi penempatan sebelum mencetak.`, 'err');
            }
            previewHTML('Denah Seluruh Ruang', 'Pratinjau cetak denah · A4 / Folio', rooms.map(roomPrintMarkup).join(''), `${roomPrintStyles}${roomPrintFlowStyles}`);
        },
        agendaForm: d => agendaForm(d.id),
        agendaDelete: async d => {
            const agenda = D().agenda.find(item => item.id === d.id);
            if (!agenda || !(await confirmBox('Hapus jadwal ujian ini beserta penugasan ruang dan pengawasnya?'))) return;
            const ok = await guard(async () => {
                await dbDelete('agenda', agenda.id);
                await reload(['agenda']);
                return true;
            }, 'Menghapus jadwal ujian…');
            if (ok) {
                toast('Jadwal ujian dihapus');
                renderView();
            }
        },
        agendaPrintAll: () => agendaPrintAll(),
        agendaAttendance: () => printSelectedAgendaDocuments('attendance'),
        agendaMinutes: () => printSelectedAgendaDocuments('minutes'),
        studentCards: () => printStudentCards(),
        studentCard: d => printStudentCards(d.id),
        pg: d => {
            S.ui.pg[d.k] = +d.p;
            renderView();
        },
        guruForm: d => guruForm(d.id),
        siswaForm: d => siswaForm(d.id),
        kelasForm: d => kelasForm(d.id),
        jadwalForm: d => jadwalForm(d.id),
        bulkJadwalForm: () => bulkJadwalForm(),
        del: async d => {
            const msg = {
                guru: 'Hapus guru ini? Data ujian yang diampu tidak ikut terhapus.',
                siswa: 'Hapus siswa ini beserta LJK dan nilainya?',
                kelas: 'Hapus kelas ini?',
                jadwal: 'Hapus LJK ujian ini beserta kunci jawaban, LJK siswa, dan nilainya?'
            } [d.k];
            if (d.k === 'kelas') {
                const ns = D().siswa.filter(x => x.kelas_id === d.id).length,
                    nj = D().jadwal.filter(x => x.kelas_id === d.id).length;
                if (ns || nj) return toast(
                    `Kelas masih dipakai ${ns} siswa dan ${nj} LJK ujian. Pindahkan atau hapus dulu.`,
                    'err', 5000);
            }
            if (!(await confirmBox(msg))) return;
            const ok = await guard(async () => {
                await dbDelete(d.k, d.id);
                await reload(['guru', 'kelas', 'siswa', 'mata_pelajaran', 'jadwal', 'kunci', 'ljk', 'hasil']);
                return true;
            }, 'Menghapus…');
            if (ok) {
                toast('Data dihapus');
                renderView();
            }
        },
        /* jadwal detail */
        jdOpen: d => jdOpen(d.id),
        jdTab: d => {
            S.ui.jd.tab = d.t;
            jdRender();
        },
        jdCopyKey: () => jdCopyKeyForm(),
        jdCopyKeyCancel: () => jdRender(),
        jdCopyKeyConfirm: () => jdCopyKeyToSchedule(),
        jdPaket: d => {
            S.ui.jd.paket = d.p;
            jdRender();
        },
        jdDelPaket: async () => {
            const jd = S.ui.jd;
            if (ljkOf(jd.id).some(l => l.paket === jd.paket)) return toast(
                'Paket masih dipakai LJK siswa. Ubah paket siswa dulu.', 'err');
            delete jd.draft[jd.paket];
            jd.paket = Object.keys(jd.draft).sort()[0];
            jdRender();
        },
        jdKey: d => {
            const jd = S.ui.jd,
                arr = jd.draft[jd.paket],
                q = +d.q;
            arr[q] = arr[q] === d.l ? '' : d.l;
            $$(`[data-act="jdKey"][data-q="${q}"]`).forEach(b => b.classList.toggle('on', b.dataset.l === arr[
                q]));
            const j = D().jadwal.find(x => x.id === jd.id);
            const question = $$('.vgrid .kq')[q];
            question?.classList.toggle('missing', !arr[q]);
            if (question) question.title = arr[q] ? '' : 'Nomor ini belum memiliki jawaban';
            $('#jdPaste').value = arr.some(Boolean) ? arr.map(answer => answer || '-').join('') : '';
            $('#jdCount').textContent =
                `${arr.filter(Boolean).length}/${objectiveQuestionRows(j).length} terisi`;
        },
        jdPaste: () => {
            const jd = S.ui.jd,
                j = D().jadwal.find(x => x.id === jd.id),
                raw = ($('#jdPaste').value || '').toUpperCase().replace(/[^A-E-]/g, '');
            if (!raw) return toast('Isi kunci dengan huruf A–E; gunakan tanda - untuk nomor yang belum diisi.', 'err');
            jd.draft[jd.paket] = Array.from({
                length: objectiveQuestionRows(j).length
            }, (_, i) => {
                const c = raw[i] || '';
                return c !== '-' && LET.indexOf(c) >= 0 && LET.indexOf(c) < j.jumlah_opsi ? c : '';
            });
            jdRender();
        },
        jdSaveKey: async () => {
            const jd = S.ui.jd,
                j = D().jadwal.find(x => x.id === jd.id);
            const ok = await guard(async () => {
                const questionRows = objectiveQuestionRows(j);
                for (const p of Object.keys(jd.draft)) {
                    const arr = jd.draft[p].slice(0, questionRows.length).map((answer, index) =>
                        LET.indexOf(answer) < questionRows[index].choices ? answer : '');
                    while (arr.length < questionRows.length) arr.push('');
                    const ex = D().kunci.find(x => x.jadwal_id === j.id && x.paket === p);
                    if (ex) await dbUpdate('kunci', ex.id, {
                        jawaban: arr
                    });
                    else await dbInsert('kunci', {
                        jadwal_id: j.id,
                        paket: p,
                        jawaban: arr
                    });
                }
                for (const ex of D().kunci.filter(x => x.jadwal_id === j.id && !(x.paket in jd
                        .draft))) await dbDelete('kunci', ex.id);
                await reload(['kunci']);
                return true;
            }, 'Menyimpan kunci…');
            if (ok) toast('Kunci jawaban tersimpan');
        },
        jdGen: async () => {
            const jd = S.ui.jd,
                j = D().jadwal.find(x => x.id === jd.id),
                ps = Object.keys(jd.draft).sort();
            const sis = missingLjkStudents(j);
            let no = Math.max(0, ...ljkOf(j.id).map(l => l.nomor_ljk || 0));
            const rows = sis.map(s => ({
                    jadwal_id: j.id,
                    siswa_id: s.id,
                    paket: ps[0],
                    nomor_ljk: ++no,
                    kode_qr: 'LJK-UMUM'
                }));
            const ok = await guard(async () => {
                await dbInsert('ljk', rows);
                await reload(['ljk']);
                return true;
            }, 'Membuat LJK…');
            if (ok) {
                toast(`${rows.length} LJK dibuat`);
                jdRender();
            }
        },
        jdPrintAll: () => {
            const j = D().jadwal.find(x => x.id === S.ui.jd.id),
                ljk = ljkOf(j.id)[0] || {
                    jadwal_id: j.id,
                    paket: 'A',
                    nomor_ljk: 1,
                    kode_qr: 'LJK-UMUM'
                };
            printLJK([ljk]);
        },
        jdDelLjk: async d => {
            if (!(await confirmBox('Hapus LJK siswa ini beserta nilainya?'))) return;
            const ok = await guard(async () => {
                await dbDelete('ljk', d.id);
                await reload(['ljk', 'hasil']);
                return true;
            });
            if (ok) jdRender();
        },
        /* scan */
        scanMode: d => {
            stopCam();
            S.ui.scanMode = d.m;
            renderView();
            if (d.m === 'cam') startCam();
        },
        camStart: () => startCam(),
        camSnap: () => snap(),
        simScan: () => simulateScan(),
        scanCancel: () => {
            S.scanR = null;
            LIVE.cool = Date.now() + 1500;
            LIVE.stable = 0;
            renderResult();
        },
        autoToggle: () => {
            S.ui.autoCap = !S.ui.autoCap;
            const b = $('#autoBtn');
            if (b) b.textContent = S.ui.autoCap ? 'Auto-ambil: ON' : 'Auto-ambil: OFF';
        },
        scanSave: () => saveResult(),
        /* rekap */
        rkMode: d => {
            S.ui.rekap.mode = d.m;
            S.ui.pg = {};
            renderView();
        },
        rkDetail: d => rkDetail(d.id),
        rkXlsx: () => rkExport('xlsx'),
        rkPrint: () => rkExport('print'),
    };
    const BIND = {
        dashJ: v => {
            S.ui.dashJ = v;
            renderView();
        },
        kelasF: v => {
            S.ui.kelasF = v;
            S.ui.pg.siswa = 1;
            renderView();
        },
        mataPelajaranKelasF: v => {
            S.ui.mataPelajaranKelasF = v;
            S.ui.pg.mata_pelajaran = 1;
            renderView();
        },
        scanJ: v => {
            S.ui.scanJ = v;
            S.scanR = null;
            renderView();
        },
        roomClass: v => {
            S.ui.roomClassId = v;
            S.ui.roomStudentOrder = [];
            refreshRoomPicker();
        },
        roomStudentSort: v => {
            S.ui.roomStudentSort = v;
            S.ui.roomStudentOrder = [];
            refreshRoomPicker();
        },
        agendaPrintId: v => {
            S.ui.agendaPrintId = v;
            S.ui.agendaPrintRoomId = '';
            renderView();
        },
        agendaPrintRoomId: v => {
            S.ui.agendaPrintRoomId = v;
            renderView();
        },
        scanFile: (v, el) => {
            const f = el.files[0];
            el.value = '';
            handleFile(f);
        },
        scanLjk: v => {
            const r = S.scanR,
                j = scanJ();
            r.ljk = D().ljk.find(l => l.id === v) || null;
            r.key = r.ljk ? kunciOf(j.id, r.ljk.paket) : null;
            const existing = r.ljk && D().hasil.find(h => h.ljk_id === r.ljk.id);
            const matchingStart = omrQuestionRows(j).length;
            r.answers = Array.from({
                length: objectiveQuestionRows(j).length
            }, (_, index) => index < matchingStart
                ? r.answers[index] || ''
                : existing?.jawaban?.[index] || '');
            r.essayScores = Array.from({
                length: essayCount(j)
            }, (_, index) => Number(existing?.nilai_essai?.[index] ?? 0));
            renderResult();
        },
        ans: (v, el) => {
            S.scanR.answers[+el.dataset.q] = v;
            refreshResult();
        },
        essayScore: (v, el) => {
            const j = scanJ();
            S.scanR.essayScores[+el.dataset.q] = Math.max(0, Math.min(Number(j.skor_benar), Number(v) || 0));
            refreshResult();
        },
        rkJ: v => {
            S.ui.rekap.j = v;
            S.ui.rekap.kelas = '';
            S.ui.pg.rekap = 1;
            renderView();
        },
        rkKelas: v => {
            S.ui.rekap.kelas = v;
            S.ui.rekap.siswa = '';
            S.ui.pg.rekap = 1;
            renderView();
        },
        rkSiswa: v => {
            S.ui.rekap.siswa = v;
            renderView();
        },
    };
    const FORMS = {
        login: async fd => {
            const ok = await guard(async () => {
                if (S.ui.lrole === 'admin') await loginAdmin(fd.u, fd.p);
                else await loginGuru(fd.u, fd.p);
                await loadAll();
                return true;
            }, 'Masuk…');
            if (ok) {
                S.page = 'dashboard';
                render();
            }
            return false;
        },
        guru: async fd => {
            if (!fd.id) throw new Error('Data guru hanya dapat ditambahkan melalui impor E-Rapor.');
            const o = {
                nik: fd.nik.trim(),
                nama: fd.nama.trim(),
                aktif: fd.aktif === '1'
            };
            return guard(async () => {
                await dbUpdate('guru', fd.id, o);
                await reload(['guru']);
                return true;
            });
        },
        siswa: async fd => {
            if (!fd.id) throw new Error('Data siswa hanya dapat ditambahkan melalui impor E-Rapor.');
            const o = {
                nis: fd.nis.trim(),
                nisn: fd.nisn.trim(),
                nama: fd.nama.trim(),
                kelas_id: fd.kelas_id,
                jenis_kelamin: fd.jenis_kelamin,
                aktif: fd.aktif === '1'
            };
            return guard(async () => {
                await dbUpdate('siswa', fd.id, o);
                await reload(['siswa']);
                return true;
            });
        },
        kelas: async fd => {
            if (!fd.id) throw new Error('Data kelas hanya dapat ditambahkan melalui impor E-Rapor.');
            const o = {
                nama: fd.nama.trim(),
                wali_kelas: fd.wali_kelas.trim()
            };
            return guard(async () => {
                await dbUpdate('kelas', fd.id, o);
                await reload(['kelas']);
                return true;
            });
        },
        jadwal: async fd => {
            const counts = {
                jumlah_pg: +fd.jumlah_pg || 0,
                jumlah_benar_salah: +fd.jumlah_benar_salah || 0,
                jumlah_menjodohkan: +fd.jumlah_menjodohkan || 0,
                jumlah_essai: +fd.jumlah_essai || 0
            };
            const n = Object.values(counts).reduce((sum, count) => sum + count, 0);
            if (n < 1) return toast('Total soal minimal 1.', 'err');
            const maxPg = fd.komposisi_soal === 'pilihan_ganda' ? 50 : 40;
            if (counts.jumlah_pg > maxPg) {
                return toast(`Jumlah pilihan ganda maksimal ${maxPg} soal untuk komposisi yang dipilih.`,
                'err');
            }
            if (counts.jumlah_pg + counts.jumlah_benar_salah > 50) {
                return toast('Maksimal 50 soal PG dan benar/salah dapat dipindai dalam satu LJK.', 'err');
            }
            const o = {
                nama_ujian: fd.nama_ujian.trim(),
                mata_pelajaran_id: fd.mata_pelajaran_id,
                komposisi_soal: fd.komposisi_soal,
                kkm: Math.max(0, Math.min(100, +fd.kkm || 0)),
                guru_id: fd.guru_id || null,
                kelas_id: fd.kelas_id,
                jumlah_soal: n,
                ...counts,
                jumlah_opsi: +fd.jumlah_opsi,
                skor_benar: +fd.skor_benar,
                skor_salah: +fd.skor_salah,
                skor_kosong: +fd.skor_kosong,
                status: fd.status
            };
            return guard(async () => {
                if (fd.id) {
                    const old = D().jadwal.find(x => x.id === fd.id);
                    const objectiveRows = objectiveQuestionRows(o);
                    const structureChanged = old.komposisi_soal !== o.komposisi_soal ||
                        old.jumlah_pg !== o.jumlah_pg || old.jumlah_benar_salah !== o
                        .jumlah_benar_salah ||
                        old.jumlah_menjodohkan !== o.jumlah_menjodohkan || old.jumlah_essai !== o
                        .jumlah_essai;
                    if ((old.jumlah_soal !== n || old.jumlah_pg !== o.jumlah_pg ||
                            old.jumlah_benar_salah !== o.jumlah_benar_salah ||
                            old.jumlah_menjodohkan !== o.jumlah_menjodohkan ||
                            old.jumlah_essai !== o.jumlah_essai || old.jumlah_opsi !== o.jumlah_opsi
                        ) && hasilOf(old
                            .id).length && !(await confirmBox(
                            'Komposisi/jumlah soal diubah padahal sudah ada hasil. Nilai lama tidak dihitung ulang. Lanjutkan?',
                            'Lanjutkan'))) return false;
                    const clearKeys = structureChanged && D().kunci.some(x => x.jadwal_id === fd
                        .id);
                    if (clearKeys && !(await confirmBox(
                            'Susunan jumlah soal berubah. Kunci semua paket akan dikosongkan agar tidak bergeser. Lanjutkan?',
                            'Kosongkan kunci'))) return false;
                    await dbUpdate('jadwal', fd.id, o);
                    for (const k of D().kunci.filter(x => x.jadwal_id === fd.id)) {
                        const arr = Array.from({
                            length: objectiveRows.length
                        }, (_, i) => {
                            if (clearKeys) return '';
                            const c = k.jawaban[i] || '';
                            return LET.indexOf(c) < objectiveRows[i].choices ? c : '';
                        });
                        await dbUpdate('kunci', k.id, {
                            jawaban: arr
                        });
                    }
                } else await dbInsert('jadwal', o);
                await reload(['jadwal', 'kunci']);
                return true;
            });
        },
        bulkJadwal: async fd => {
            const subjects = mapelWithoutLjk();
            if (!subjects.length) {
                toast('Semua penugasan mata pelajaran sudah memiliki LJK.', 'err');
                return false;
            }

            const counts = {
                jumlah_pg: +fd.jumlah_pg || 0,
                jumlah_benar_salah: +fd.jumlah_benar_salah || 0,
                jumlah_menjodohkan: +fd.jumlah_menjodohkan || 0,
                jumlah_essai: +fd.jumlah_essai || 0
            };
            const total = Object.values(counts).reduce((sum, count) => sum + count, 0);
            if (total < 1) return toast('Total soal minimal 1.', 'err');
            const maxPg = fd.komposisi_soal === 'pilihan_ganda' ? 50 : 40;
            if (counts.jumlah_pg > maxPg) {
                return toast(`Jumlah pilihan ganda maksimal ${maxPg} soal untuk komposisi yang dipilih.`, 'err');
            }
            if (counts.jumlah_pg + counts.jumlah_benar_salah > 50) {
                return toast('Maksimal 50 soal PG dan benar/salah dapat dipindai dalam satu LJK.', 'err');
            }

            const settings = {
                komposisi_soal: fd.komposisi_soal,
                kkm: Math.max(0, Math.min(100, +fd.kkm || 0)),
                jumlah_soal: total,
                ...counts,
                jumlah_opsi: +fd.jumlah_opsi,
                skor_benar: +fd.skor_benar,
                skor_salah: +fd.skor_salah,
                skor_kosong: +fd.skor_kosong,
                status: fd.status
            };
            const rows = subjects.map(subject => ({
                ...settings,
                nama_ujian: subject.nama,
                mata_pelajaran_id: subject.id,
                guru_id: subject.guru_id,
                kelas_id: subject.kelas_id
            }));

            let inserted = 0;
            const completed = await guard(async () => {
                for (let offset = 0; offset < rows.length; offset += 500) {
                    const batch = rows.slice(offset, offset + 500);
                    await dbInsert('jadwal', batch);
                    inserted += batch.length;
                }
                return true;
            }, 'Membuat LJK mata pelajaran…');

            if (inserted) {
                const refreshed = await guard(async () => {
                    await reload(['jadwal']);
                    return true;
                }, 'Memperbarui daftar LJK…');
                if (!refreshed) return false;
            }

            if (!completed) {
                if (inserted) {
                    closeModal();
                    renderView();
                    toast(`${inserted} LJK berhasil dibuat sebelum proses terhenti. Periksa daftar sebelum mencoba lagi.`, 'err', 6000);
                }
                return false;
            }

            return `${inserted} LJK mata pelajaran berhasil dibuat.`;
        },
        settings: async fd => {
            const o = {
                nama_sekolah: fd.nama_sekolah.trim(),
                tahun_ajaran: fd.tahun_ajaran.trim(),
                semester: fd.semester,
                kegiatan: fd.kegiatan,
                ketua_panitia: fd.ketua_panitia.trim(),
                kkm_default: +fd.kkm_default || 75,
                logo: (fd.logo || '').trim()
            };
            const ok = await guard(async () => {
                if (D().settings.id) await dbUpdate('settings', D().settings.id, o);
                else await dbInsert('settings', {
                    id: 1,
                    ...o
                });
                await reload(['settings']);
                return true;
            });
            if (ok) {
                toast('Pengaturan tersimpan');
                renderView();
            }
            return false;
        },
        ruang: async fd => {
            if (!fd.id || !fd.kelas_id) {
                return toast('Ruang ujian harus ditautkan ke kelas melalui sinkronisasi.', 'err');
            }
            const data = {
                kelas_id: fd.kelas_id,
                kode: fd.kode.trim(),
                baris: Number(fd.baris),
                kolom: Number(fd.kolom)
            };
            const ok = await guard(async () => {
                await dbUpdate('ruang', fd.id, data);
                S.ui.roomId = fd.id;
                await reload(['ruang', 'denah']);
                return true;
            }, 'Menyimpan ruang…');
            if (ok) S.ui.roomStudentId = '';
            return ok;
        },
        agenda: async fd => {
            const [jam_mulai, jam_selesai] = (fd.sesi || '').split('|');
            const data = {
                tanggal: fd.tanggal,
                jam_mulai,
                jam_selesai,
                ruang_pengawas: fd.ruang_pengawas
            };
            const ok = await guard(async () => {
                if (fd.id) {
                    await dbUpdate('agenda', fd.id, data);
                    S.ui.agendaPrintId = fd.id;
                } else {
                    const created = await dbInsert('agenda', data);
                    S.ui.agendaPrintId = created[0]?.id || '';
                }
                await reload(['agenda']);
                S.ui.agendaPrintRoomId = '';
                return true;
            }, 'Menyimpan jadwal ujian…');
            return ok;
        }
    };

    function bindEvents() {
        const app = $('#ljkApp');
        const dropdownObserver = new MutationObserver(records => {
            records.forEach(record => record.addedNodes.forEach(node => {
                if (node.nodeType !== Node.ELEMENT_NODE) return;
                if (node.matches('select')) enhanceSearchSelect(node);
                enhanceSearchSelects(node);
            }));
        });
        dropdownObserver.observe(app, { childList: true, subtree: true });
        enhanceSearchSelects(app);
        app.addEventListener('click', e => {
            const option = e.target.closest('[data-search-select-option]');
            const wrapper = e.target.closest('[data-search-select]');
            const trigger = e.target.closest('[data-search-select-trigger]');
            if (option && wrapper) {
                const select = wrapper.querySelector('select');
                select.selectedIndex = Number(option.dataset.searchSelectOption);
                wrapper.querySelector('[data-search-select-menu]').hidden = true;
                wrapper.querySelector('[data-search-select-trigger]').setAttribute('aria-expanded', 'false');
                const search = wrapper.querySelector('input[type="search"]');
                search.value = '';
                wrapper.querySelectorAll('[data-search-select-option]').forEach(item => {
                    item.hidden = false;
                });
                wrapper.querySelector('.search-select-empty').hidden = true;
                select.dispatchEvent(new Event('change', { bubbles: true }));
                wrapper.querySelector('[data-search-select-trigger]').focus();
                return;
            }
            if (trigger && wrapper) {
                const menu = wrapper.querySelector('[data-search-select-menu]');
                const open = menu.hidden;
                app.querySelectorAll('[data-search-select-menu]').forEach(item => {
                    item.hidden = true;
                    item.closest('[data-search-select]')?.querySelector('[data-search-select-trigger]')
                        ?.setAttribute('aria-expanded', 'false');
                });
                menu.hidden = !open;
                trigger.setAttribute('aria-expanded', String(open));
                if (open) {
                    const search = wrapper.querySelector('input[type="search"]');
                    search.value = '';
                    wrapper.querySelectorAll('[data-search-select-option]').forEach(item => {
                        item.hidden = false;
                    });
                    wrapper.querySelector('.search-select-empty').hidden = true;
                    search.focus();
                }
                return;
            }
            app.querySelectorAll('[data-search-select-menu]:not([hidden])').forEach(menu => {
                if (!menu.contains(e.target)) {
                    menu.hidden = true;
                    menu.closest('[data-search-select]')?.querySelector('[data-search-select-trigger]')
                        ?.setAttribute('aria-expanded', 'false');
                }
            });
            const t = e.target.closest('[data-act]');
            if (!t) {
                if (S.ui.menu && !e.target.closest('.menu')) {
                    S.ui.menu = false;
                    $('.menu')?.remove();
                }
                return;
            }
            const fn = ACT[t.dataset.act];
            if (fn) {
                e.preventDefault();
                fn(t.dataset, t);
            }
        });
        app.addEventListener('change', e => {
            if (e.target.matches('select[data-search-enhanced]')) syncSearchSelect(e.target);
            if (e.target.matches('[data-agenda-room]')) {
                const option = e.target.closest('.agenda-room-option');
                syncAgendaSupervisorControls(option);
            }
            if (e.target.matches('[data-agenda-exam]')) {
                syncAgendaSupervisorControls(e.target.closest('.agenda-room-option'));
            }
            if (e.target.matches('[data-agenda-supervisor]')) {
                syncAgendaSupervisorControls(e.target.closest('.agenda-room-option'));
            }
            const t = e.target.closest('[data-bind]');
            if (t && BIND[t.dataset.bind] && (t.tagName === 'SELECT' || t.type === 'file' || t.type ===
                    'number')) BIND[t.dataset.bind]
                (t.value, t);
            if (e.target.name === 'mata_pelajaran_id') {
                const subject = D().mata_pelajaran.find(m => m.id === e.target.value);
                    const form = e.target.closest('[data-form="jadwal"]');
                    if (form) {
                        form.elements.namedItem('nama_ujian').value = subject?.nama || '';
                        form.elements.namedItem('guru_id').value = subject?.guru_id || '';
                    form.elements.namedItem('kelas_id').value = subject?.kelas_id || '';
                    form.querySelector('[data-schedule-guru]').value = guruOf(subject?.guru_id)?.nama || '';
                    form.querySelector('[data-schedule-class]').value = kelasName(subject?.kelas_id);
                }
            }
            if (e.target.name === 'komposisi_soal') {
                syncScheduleCounts(e.target.closest('[data-form="jadwal"], [data-form="bulkJadwal"]'));
            }
            if (e.target.matches('[data-soal-rank] input')) {
                syncScheduleCounts(e.target.closest('[data-form="jadwal"], [data-form="bulkJadwal"]'));
            }
        });
        app.addEventListener('submit', async e => {
            const f = e.target.closest('[data-form]');
            if (!f) return;
            e.preventDefault();
            if (f.dataset.form === 'agenda') {
                const selectedRooms = $$('[data-agenda-room]:checked', f);
                if (!selectedRooms.length) {
                    toast('Pilih minimal satu ruang ujian.', 'err');
                    return;
                }
                for (const roomInput of selectedRooms) {
                    const option = roomInput.closest('.agenda-room-option'),
                        examInput = option.querySelector('[data-agenda-exam]'),
                        countInput = option.querySelector('[data-agenda-supervisor-count]'),
                        expectedCount = Number(countInput.value),
                        selectedCount = $$('[data-agenda-supervisor]:checked', option).length;
                    if (!examInput.value) {
                        toast('Pilih mata pelajaran/ujian untuk setiap ruang.', 'err');
                        examInput.focus();
                        return;
                    }
                    if (!Number.isInteger(expectedCount) || expectedCount < 1 || selectedCount !== expectedCount) {
                        toast(`Pilih tepat ${expectedCount || 'jumlah yang ditentukan'} pengawas untuk setiap ruang.`, 'err');
                        countInput.focus();
                        return;
                    }
                }
            }
            const missingSelect = Array.from(f.querySelectorAll('select[data-search-required]'))
                .find(select => !select.value);
            if (missingSelect) {
                const label = missingSelect.closest('label')?.querySelector('span')?.textContent?.trim();
                toast(`Pilih ${label || 'opsi'} terlebih dahulu`, 'err');
                missingSelect.closest('[data-search-select]')?.querySelector('[data-search-select-trigger]')?.focus();
                return;
            }
            const fd = Object.fromEntries(new FormData(f));
            if (f.dataset.form === 'agenda') {
                fd.ruang_pengawas = $$('[data-agenda-room]:checked', f).map(roomInput => {
                    const option = roomInput.closest('.agenda-room-option');
                    return {
                        ruang_id: roomInput.dataset.agendaRoom,
                        ujian_id: option.querySelector('[data-agenda-exam]').value,
                        jumlah_pengawas: Number(option.querySelector('[data-agenda-supervisor-count]').value),
                        pengawas_ids: $$('[data-agenda-supervisor]:checked', option)
                            .map(supervisor => supervisor.value)
                    };
                });
            }
            const done = await FORMS[f.dataset.form](fd);
            if (done && f.closest('#modal')) {
                closeModal();
                toast('Data tersimpan');
                renderView();
            }
        });
        let tm;
        app.addEventListener('input', e => {
            if (e.target.matches('[data-agenda-supervisor-count]')) {
                syncAgendaSupervisorControls(e.target.closest('.agenda-room-option'));
                return;
            }
            if (e.target.matches('[data-room-list-search]')) {
                const list = e.target.closest('.room-sidebar'),
                    query = e.target.value.trim().toLocaleLowerCase('id');
                S.ui.roomSearch = e.target.value;
                let matches = 0;
                $$('[data-room-list-option]', list).forEach(item => {
                    item.hidden = !item.dataset.roomSearch.includes(query);
                    if (!item.hidden) matches++;
                });
                const empty = $('[data-room-list-empty]', list);
                if (empty) empty.hidden = !query || matches > 0;
                return;
            }
            if (e.target.matches('[data-room-student-search]')) {
                const query = e.target.value.trim().toLocaleLowerCase('id');
                $$('.room-student', $('#modal')).forEach(button => {
                    button.hidden = !button.textContent.toLocaleLowerCase('id').includes(query);
                });
                return;
            }
            if (e.target.matches('[data-soal-rank] input')) {
                syncScheduleCounts(e.target.closest('[data-form="jadwal"], [data-form="bulkJadwal"]'));
                return;
            }
            if (e.target.matches('.search-select-menu input[type="search"]')) {
                const wrapper = e.target.closest('[data-search-select]');
                if (!wrapper) return;
                const query = e.target.value.trim().toLocaleLowerCase('id');
                let matches = 0;
                wrapper.querySelectorAll('[data-search-select-option]').forEach(option => {
                    const matchesQuery = option.textContent.toLocaleLowerCase('id').includes(query);
                    option.hidden = Boolean(query) && !matchesQuery;
                    if (matchesQuery) matches++;
                });
                wrapper.querySelector('.search-select-empty').hidden = !query || matches > 0;
                return;
            }
            if (e.target.id !== 'gSearch') return;
            S.q = e.target.value;
            clearTimeout(tm);
            tm = setTimeout(() => {
                S.ui.pg = {};
                renderView();
            }, 180);
        });
        app.addEventListener('keydown', e => {
            if (e.target.matches('.search-select-menu input[type="search"]')) {
                const wrapper = e.target.closest('[data-search-select]');
                const options = Array.from(wrapper.querySelectorAll('[data-search-select-option]:not([hidden])'));
                if (e.key === 'Escape') {
                    wrapper.querySelector('[data-search-select-menu]').hidden = true;
                    wrapper.querySelector('[data-search-select-trigger]').setAttribute('aria-expanded', 'false');
                    wrapper.querySelector('[data-search-select-trigger]').focus();
                    e.preventDefault();
                } else if (e.key === 'ArrowDown' && options.length) {
                    options[0].focus();
                    e.preventDefault();
                } else if (e.key === 'Enter' && options.length) {
                    options[0].click();
                    e.preventDefault();
                }
            } else if (e.target.matches('[data-search-select-option]') && e.key === 'Escape') {
                const wrapper = e.target.closest('[data-search-select]');
                wrapper.querySelector('[data-search-select-menu]').hidden = true;
                wrapper.querySelector('[data-search-select-trigger]').setAttribute('aria-expanded', 'false');
                wrapper.querySelector('[data-search-select-trigger]').focus();
                e.preventDefault();
            } else if (e.target.matches('[data-search-select-option]') && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
                const wrapper = e.target.closest('[data-search-select]');
                const options = Array.from(wrapper.querySelectorAll('[data-search-select-option]:not([hidden])'));
                const index = options.indexOf(e.target);
                if (e.key === 'ArrowUp' && index === 0) {
                    wrapper.querySelector('input[type="search"]').focus();
                } else {
                    options[(index + (e.key === 'ArrowDown' ? 1 : options.length - 1)) % options.length].focus();
                }
                e.preventDefault();
            } else if (e.target.matches('[data-search-select-trigger]') && e.key === 'ArrowDown') {
                const wrapper = e.target.closest('[data-search-select]');
                if (wrapper.querySelector('[data-search-select-menu]').hidden) e.target.click();
                else wrapper.querySelector('input[type="search"]').focus();
                e.preventDefault();
            }
            if (e.target.id === 'gSearch' && e.key === 'Enter' && S.q.trim()) {
                const m = myMenu().find(x => x.label.toLowerCase().includes(S.q.trim().toLowerCase()));
                if (m && ['dashboard', 'scan', 'pengaturan'].includes(S.page)) go(m.id);
            }
            if (e.key === 'Escape' && !e.defaultPrevented) {
                const wrapper = e.target.closest('[data-search-select]');
                const menu = wrapper?.querySelector('[data-search-select-menu]');
                if (menu && !menu.hidden) {
                    menu.hidden = true;
                    wrapper.querySelector('[data-search-select-trigger]').setAttribute('aria-expanded', 'false');
                    wrapper.querySelector('[data-search-select-trigger]').focus();
                } else {
                    closeModal();
                }
            }
        });
    }

    /* ===================== PWA 1 FILE ===================== */
    function setupPWA() {
        try {
            const l = $('#pwaManifest');
            if (l && l.parentElement !== document.head) document.head.appendChild(l);
            document.documentElement.style.overflow = 'hidden';
            document.body && (document.body.style.overflow = 'hidden');
            if ('serviceWorker' in navigator) {
                const sw =
                    `const C='ljk-scan-v1';self.addEventListener('install',e=>{self.skipWaiting()});self.addEventListener('activate',e=>{e.waitUntil(self.clients.claim())});self.addEventListener('fetch',e=>{const u=new URL(e.request.url);if(e.request.method!=='GET'||u.pathname.startsWith('/ljk-data/'))return;e.respondWith(fetch(e.request).then(r=>{const c=r.clone();caches.open(C).then(x=>x.put(e.request,c)).catch(()=>{});return r}).catch(()=>caches.match(e.request)))});`;
                const url = URL.createObjectURL(new Blob([sw], {
                    type: 'text/javascript'
                }));
                navigator.serviceWorker.register(url).catch(() => {
                    /* browser menolak SW dari blob/hosting ini; aplikasi tetap berjalan normal */
                });
            }
        } catch (e) {}
    }

    /* ===================== INISIALISASI ===================== */
    async function init() {
        $('#root').innerHTML =
            `<div class="login"><div style="text-align:center"><div class="spin"></div>Memuat aplikasi…</div></div>`;
        setupPWA();
        bindEvents();
        try {
            await restoreSession();
            if (S.user) await loadAll();
        } catch (e) {
            S.user = null;
            S.setupError = 'Gagal memuat data: ' + errMsg(e);
        }
        S.ready = true;
        render();
    }
    init();
</script>