:root{--green:#005447;--green2:#0b6a5b;--bg:#f4f7f6;--text:#17211f;--muted:#6b7875;--border:#dfe7e5;--card:#fff;--danger:#a63232;--warn:#9a6a00;--shadow:0 8px 24px rgba(23,33,31,.07)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--green);color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand-mark{width:42px;height:42px;border:2px solid #fff;border-radius:13px;display:grid;place-items:center;font-weight:800}.brand small{display:block;opacity:.72;margin-top:3px}.sidebar nav{display:grid;gap:5px}.nav{border:0;background:transparent;color:#fff;text-align:left;padding:11px 12px;border-radius:9px;cursor:pointer}.nav:hover,.nav.active{background:rgba(255,255,255,.14)}.nav-label{font-size:10px;letter-spacing:.1em;opacity:.55;margin:16px 10px 5px}.side-foot{position:absolute;bottom:22px;left:30px;right:30px;opacity:.65;display:flex;justify-content:space-between;gap:10px;font-size:11px}
main{padding:28px;max-width:1600px;width:100%}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.topbar h1{margin:0;font-size:27px}.topbar p{margin:6px 0;color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.period-badge{background:#e2efec;color:var(--green);padding:10px 13px;border-radius:999px;font-weight:700}.primary,.secondary,.table-btn,.preview-controls button,.link-btn{border:0;border-radius:9px;padding:10px 14px;cursor:pointer}.primary,.preview-controls button{background:var(--green);color:#fff}.primary:hover,.preview-controls button:hover{background:var(--green2)}.secondary,.table-btn{background:#eef3f2;color:var(--text)}.link-btn{background:transparent;color:var(--green);padding-left:0}.full{width:100%;margin-top:10px}.notice{background:#fff3cd;border:1px solid #ffe69c;padding:14px;border-radius:10px;margin-bottom:20px}.page{display:none}.page.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:14px;box-shadow:var(--shadow)}.stat span{color:var(--muted);font-size:13px}.stat strong{display:block;font-size:28px;margin-top:6px}.grid-two{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:16px}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}.card-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:16px}.card-head h2{margin:0;font-size:18px}.card-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.number-box{display:flex;justify-content:space-between;align-items:end;padding:15px;background:#f7faf9;border-radius:10px}.number-box strong{font-size:28px;color:var(--green)}.preview-controls{display:flex;gap:8px;margin-top:12px}.preview-controls select{flex:1}.preview-result{margin-top:12px;color:var(--muted);font-size:14px}.empty{color:var(--muted);padding:14px 0}.error-box{background:#fff0f0;color:var(--danger);border:1px solid #f1caca;padding:12px;border-radius:9px}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 11px;background:#fff;color:var(--text)}textarea{min-height:105px;resize:vertical}label{display:grid;gap:6px;color:var(--text);font-size:13px}label span{font-weight:650}label span small{font-weight:400;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .wide{grid-column:1/-1}.dynamic-grid{margin-top:16px}.form-card{max-width:1050px}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;border-top:1px solid var(--border);padding-top:16px}.draft-id{font-size:11px;background:#edf2f1;border-radius:999px;padding:7px 10px;color:var(--muted)}.subject-box{border:1px solid var(--border);background:#f9fbfa;border-radius:12px;padding:14px;margin-top:16px}.section-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.section-title span{font-size:12px;color:var(--muted)}.subject-controls{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.info-note{margin-top:14px;background:#edf6f4;color:#275d54;border:1px solid #d2e9e4;padding:11px 12px;border-radius:9px;font-size:13px}.info-note[hidden]{display:none}.info-note.show{display:block;margin-top:14px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;vertical-align:top}th{color:var(--muted);font-weight:650;white-space:nowrap}.toolbar-head{align-items:center}.filters{display:flex;gap:8px;min-width:380px}.filters input{min-width:220px}.actions{white-space:nowrap}.actions button{border:0;background:transparent;color:var(--green);cursor:pointer;padding:5px 7px}.actions .danger-link{color:var(--danger)}.status{display:inline-block;font-size:11px;font-weight:700;padding:5px 8px;border-radius:999px;background:#edf2f1;color:#546460}.status.draft{background:#fff4d9;color:#795700}.status.terbit{background:#e4f3ef;color:var(--green)}.status.dibatalkan{background:#fae8e8;color:var(--danger)}
.period-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.period-item small{display:block;color:var(--muted);margin-top:4px}.period-item button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}.active-pill{background:#e1f0ec;color:var(--green);font-size:12px;padding:6px 9px;border-radius:999px;font-weight:700}.new-period{display:flex;gap:8px}.period-grid label{margin:12px 0}.card hr{border:0;border-top:1px solid var(--border);margin:16px 0}
dialog{border:0;border-radius:16px;padding:20px;width:min(850px,94vw);box-shadow:0 24px 70px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(0,0,0,.4)}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{margin:0}.dialog-head p{color:var(--muted);margin:5px 0 15px}.icon-btn{border:0;background:transparent;font-size:25px;cursor:pointer}.compact{max-height:62vh;overflow:auto;padding-right:4px}.toast{position:fixed;right:24px;bottom:24px;background:#153f38;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:none}.toast.bad{background:var(--danger)}code{background:#edf2f1;padding:2px 5px;border-radius:5px}
@media(max-width:1000px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:repeat(2,1fr)}.grid-two{grid-template-columns:1fr}.topbar{flex-direction:column}.top-actions{width:100%;justify-content:space-between}.filters{min-width:0;flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.subject-controls{grid-template-columns:1fr}.toolbar-head{align-items:flex-start;flex-direction:column}.period-grid{grid-template-columns:1fr}}
.logout-link{color:var(--green);text-decoration:none;font-weight:700;font-size:13px;padding:9px 5px}.doc-link{color:var(--green);font-weight:700;text-decoration:none}.publish-btn{color:#fff!important;background:var(--green)!important;border-radius:7px!important;padding:6px 9px!important}.file-links{display:flex;gap:6px;white-space:nowrap}.file-links a{color:var(--green);text-decoration:none;font-weight:700;font-size:12px}