:root{color:#132019;font-synthesis:none;--ink:#132019;--muted:#6e776f;--line:#d7ddd7;--paper:#fff;--forest:#163d2c;--forest-2:#0f2b20;--gold:#b8903f;--cream:#f7f3e8;--red:#7a251f;background:#eef0ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{background:#edf0ed;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.app-header{color:#fff;z-index:20;background:#101713;border-bottom:1px solid #ffffff14;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:74px;padding:0 26px;display:grid;position:sticky;top:0}.brand-lockup{align-items:center;gap:12px;min-width:0;display:flex}.brand-lockup>div:last-child{gap:2px;display:grid}.brand-lockup strong{letter-spacing:.02em;font-size:14px}.brand-lockup span{color:#9da69f;font-size:11px}.logo-mark{background:#13241b;border:1px solid #b8903f80;border-radius:50%;flex:none;place-items:center;width:62px;height:62px;display:grid;overflow:hidden}.logo-mark.compact{width:38px;height:38px}.logo-mark span{letter-spacing:.08em;color:#d5b665;font-size:14px;font-weight:800}.logo-mark.compact span{font-size:10px}.logo-mark img{object-fit:contain;background:#fff;width:100%;height:100%}.top-nav{background:#19211c;border:1px solid #2a332d;border-radius:999px;padding:4px;display:flex}.top-nav button{color:#aeb5b0;background:0 0;border:0;border-radius:999px;padding:9px 15px;font-size:12px;font-weight:700}.top-nav button.active{color:#19211c;background:#f1f3f1}.primary-action,.secondary-action,.ghost-btn{border:0;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:800;transition:all .18s}.primary-action{background:var(--gold);color:#17150f;justify-self:end}.primary-action:hover{filter:brightness(1.04);transform:translateY(-1px)}.primary-action:disabled,.secondary-action:disabled,.table-icon-btn:disabled{cursor:wait;opacity:.6;transform:none}.primary-action.large,.secondary-action{padding:13px 18px}.secondary-action{color:var(--ink);background:#e2e6e2}.ghost-btn{color:var(--forest);background:0 0;border:1px dashed #a9b3ab;width:100%}.full{width:100%}.workspace{grid-template-columns:minmax(0,1fr);align-items:start;max-width:760px;margin:0 auto;padding:26px;display:grid}.editor-panel{background:#fff;border:1px solid #dbe0dc;border-radius:18px;padding:24px;box-shadow:0 16px 42px #1e2c220f}.panel-head,.page-heading{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.eyebrow{color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;font-size:10px;font-weight:900;display:block}h1{letter-spacing:-.04em;margin:0;font-size:28px;line-height:1.08}h2{margin:0 0 14px;font-size:13px}.save-state{color:#7e8780;background:#f4f6f4;border-radius:99px;padding:6px 8px;font-size:10px}.field-group{border-bottom:1px solid #edf0ed;padding:22px 0}.field-group:last-of-type{border-bottom:0}.grid{gap:12px;display:grid}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:minmax(0,.75fr) minmax(0,.75fr) minmax(0,1.5fr)}.field{gap:6px;min-width:0;margin-bottom:12px;display:grid}.field>span{color:#677168;font-size:10px;font-weight:800}.field input,.field textarea,.field select,.records-toolbar input{width:100%;min-width:0;max-width:100%;color:var(--ink);background:#fbfcfb;border:1px solid #d9dfda;border-radius:9px;outline:none;padding:10px 11px;transition:all .15s}.field input[type=date]{min-inline-size:0;max-inline-size:100%}.field input[type=date]::-webkit-date-and-time-value{text-align:left;min-width:0}.field input:focus,.field textarea:focus,.field select:focus,.records-toolbar input:focus{border-color:#789481;box-shadow:0 0 0 3px #21503614}.field textarea{resize:vertical}.hint{color:#8a928c;font-size:10px;line-height:1.5}.student-editor-list{gap:8px;margin-bottom:10px;display:grid}.student-editor-row{grid-template-columns:minmax(0,1fr) 28px;align-items:end;gap:10px;display:grid}.student-editor-row .field{margin:0}.student-editor-row .icon-btn{margin-bottom:5px}.ghost-btn:disabled{cursor:not-allowed;opacity:.5}.item-editor-list{gap:8px;margin-bottom:10px;display:grid}.empty-items{color:#677168;text-align:center;background:#fafbfa;border:1px dashed #d8ded9;border-radius:10px;margin:0;padding:15px;font-size:11px}.item-editor{background:#f7f9f7;border:1px solid #e7eae7;border-radius:12px;grid-template-columns:30px 1fr 26px;align-items:start;gap:10px;padding:12px;display:grid}.item-index{background:var(--forest);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;font-size:9px;font-weight:800;display:grid}.item-fields{align-items:end;gap:10px;display:grid}.item-fields .field{margin:0}.item-row-inline{grid-template-columns:130px 82px auto;align-items:end;gap:12px;display:grid}.item-row-inline .field{margin:0}.quantity-input{text-align:center}.price-input{text-align:right;-webkit-appearance:textfield;appearance:textfield}.price-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.price-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.item-amount{justify-items:end;gap:6px;display:grid}.item-amount span{color:#677168;font-size:10px;font-weight:800}.item-amount strong{min-width:86px;color:var(--forest);text-align:right;background:#e8f2eb;border-radius:8px;padding:11px 12px;font-size:12px}.icon-btn{color:#8f9891;background:0 0;border:0;border-radius:7px;place-items:center;width:28px;height:28px;transition:color .18s,background-color .18s;display:grid}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.icon-btn:hover:not(:disabled){color:var(--red);background:#f9e9e7}.icon-btn:focus-visible:not(:disabled){color:var(--red);background:#f9e9e7}.icon-btn:disabled{cursor:not-allowed;opacity:.35}.editor-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:18px;display:flex}.sync-error{color:#8d251d;background:#fff2f0;border:1px solid #e6b8b2;border-radius:10px;flex:1 0 100%;margin:0;padding:12px 14px;font-size:13px;line-height:1.45}.sync-error button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;margin-left:10px;font-weight:800;text-decoration:underline}.records-message{color:var(--muted);text-align:center;padding:42px 24px}.preview-zone{display:none}.document-sheet{color:#1b241e;background:#fff;width:100%;max-width:790px;min-height:1117px;margin:0 auto;padding:54px 58px 40px;position:relative;overflow:hidden;box-shadow:0 20px 60px #131f1724}.sheet-accent{background:linear-gradient(var(--forest-2), var(--forest), var(--gold));width:11px;height:100%;position:absolute;top:0;left:0}.doc-header{border-bottom:1px solid #dfe3df;grid-template-columns:120px minmax(0,1fr) 120px;align-items:start;gap:20px;padding-bottom:24px;display:grid}.doc-emblem{place-items:center;min-height:112px;display:grid}.doc-emblem .logo-mark{width:108px;height:108px}.state-crest{place-items:center;min-height:112px;display:grid}.state-crest img{object-fit:contain;width:108px;height:108px}.doc-identity{text-align:center;align-content:start;justify-items:center;gap:3px;display:grid}.jawi-mark{object-fit:contain;width:min(100%,250px);height:62px;margin-bottom:3px}.doc-identity>strong{letter-spacing:.03em;font-size:12px;line-height:1.25}.doc-identity>span{color:#626d65;font-size:8px;line-height:1.35}.location-block{align-content:start;gap:3px;display:grid}.location-block strong{color:var(--forest);font-size:13px}.location-block span{color:#4f5b52;font-size:10px;line-height:1.45}.doc-title{text-align:right;align-content:start;justify-items:end;margin-bottom:2px;display:grid}.doc-title h1{letter-spacing:-.03em;color:var(--forest-2);margin:0;font-size:22px}.doc-meta-grid{grid-template-columns:1fr 1fr;align-items:start;gap:12px 52px;padding:24px 0 30px;display:grid}.doc-meta-grid>section:first-of-type{align-content:start;gap:4px;display:grid}.doc-meta-grid>section:first-of-type strong{font-size:12px}.doc-meta-grid>section:first-of-type span:not(.doc-label){color:#636c65;font-size:9px}.multiline{white-space:pre-line;line-height:1.5}.doc-label{color:var(--gold);letter-spacing:.16em;margin-bottom:5px;font-size:7px;font-weight:900;display:block}.doc-meta{text-align:right;grid-template-columns:1fr;align-content:start;justify-items:end;gap:12px;display:grid}.doc-meta>div{gap:2px;display:grid}.doc-meta span{color:#8a928c;text-transform:uppercase;letter-spacing:.08em;font-size:7px}.doc-meta strong{word-break:break-all;font-size:9px}.items-table{border-top:2px solid var(--forest-2);border-bottom:1px solid #d8ddd9}.items-head,.items-row{grid-template-columns:32px minmax(180px,1fr) 70px 110px;align-items:center;gap:10px;display:grid}.items-head{color:#69736c;text-transform:uppercase;letter-spacing:.08em;background:#f1f4f1;min-height:32px;padding:0 10px;font-size:7px;font-weight:900}.items-head>*,.items-row>*{text-align:center}.items-row{border-top:1px solid #e7eae7;min-height:54px;padding:9px 10px;font-size:9px}.items-category{color:var(--forest);letter-spacing:.1em;text-transform:uppercase;background:#f8faf8;border-top:1px solid #d8ddd9;padding:7px 10px;font-size:7px;font-weight:900}.items-row>span:first-child{color:#a0a7a2}.items-row>div{justify-items:center;gap:2px;display:grid}.items-row small{color:#8d948f;font-size:7px}.totals-wrap{grid-template-columns:1fr 250px;gap:42px;padding:26px 0;display:grid}.payment-box{background:#f4f6f4;border-radius:2px;align-content:start;gap:3px;padding:14px;display:grid}.payment-box p{color:#5f6961;margin:0;font-size:9px;line-height:1.55}.totals-box{align-content:start;gap:8px;display:grid}.totals-box>div{justify-content:space-between;gap:20px;font-size:9px;display:flex}.totals-box>div span{color:#6f7871}.grand-total{border-top:2px solid var(--forest-2);color:var(--forest-2);justify-content:space-between;gap:20px;margin-top:4px;padding-top:12px;display:flex}.grand-total span{letter-spacing:.08em;white-space:nowrap;font-weight:900;color:var(--forest-2)!important}.grand-total strong{white-space:nowrap;font-size:14px}.notes-grid{border-top:1px solid #e0e5e1;grid-template-columns:1fr;padding-top:22px;display:grid}.notes-grid p{color:#626b64;white-space:pre-line;margin:0;font-size:8px;line-height:1.6}.signature-area{justify-content:flex-end;padding:42px 0 34px;display:flex}.sign-line{border-top:1px solid #8d958f;gap:3px;width:220px;padding-top:8px;display:grid}.sign-line>span{color:#8b938d;font-size:7px}.sign-line strong{font-size:9px}.sign-line small{color:#646d66;font-size:8px}.student-label{margin-top:12px}.student-names{gap:3px;display:grid}.student-names strong{line-height:1.35}.doc-footer{border-top:1px solid #e1e5e2;justify-content:space-between;gap:30px;margin-top:auto;padding-top:14px;display:flex}.doc-footer>div{gap:2px;max-width:70%;display:grid}.doc-footer strong{font-size:8px}.doc-footer span{color:#717a73;font-size:7px;line-height:1.45}.footer-right{text-align:right;justify-items:end}.records-page{max-width:1320px;margin:0 auto;padding:40px 26px}.page-heading{align-items:center;margin-bottom:24px}.records-card{background:#fff;border:1px solid #dce1dd;border-radius:16px;box-shadow:0 16px 40px #19281d0d}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skeleton-filter{gap:6px;display:grid}.skeleton-line{background:linear-gradient(90deg,#edf0ed 25%,#f7f8f7 50%,#edf0ed 75%) 0 0/200% 100%;border-radius:6px;width:100%;animation:1.4s ease-in-out infinite skeleton-shimmer;display:block}.skeleton-line.label{width:42px;height:10px}.skeleton-line.field{border-radius:9px;height:38px}.skeleton-line.count{flex:none;width:48px;height:11px;margin-bottom:11px}.skeleton-table .skeleton-line{height:11px}.skeleton-table .invoice-number{width:112px}.skeleton-table .primary{width:132px}.skeleton-table .primary.branch{width:156px}.skeleton-table .secondary{width:92px;height:8px;margin-top:7px}.skeleton-table .date{width:88px}.skeleton-table .status{border-radius:5px;width:48px;height:22px}.skeleton-table .total{width:72px}.skeleton-table .actions{width:68px;height:28px;margin-left:auto}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton-line{animation:none}}.records-toolbar{border-bottom:1px solid #e9ece9;justify-content:space-between;align-items:flex-end;gap:18px;padding:16px;display:flex}.records-filters{flex:1;grid-template-columns:minmax(240px,1.4fr) minmax(170px,.8fr) minmax(220px,1fr);gap:12px;display:grid}.record-filter{gap:6px;min-width:0;display:grid}.record-filter>span{color:#677168;font-size:10px;font-weight:800}.record-filter input,.record-filter select{width:100%;min-width:0;color:var(--ink);background:#fbfcfb;border:1px solid #d9dfda;border-radius:9px;outline:none;padding:10px 11px;transition:border-color .15s,box-shadow .15s}.record-filter input:focus,.record-filter select:focus{border-color:#789481;box-shadow:0 0 0 3px #21503614}.field select,.record-filter select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:14px 14px;padding-right:48px}.records-count{color:#7d867f;flex:none;padding-bottom:11px;font-size:11px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:900px}th{text-align:left;color:#7b847d;text-transform:uppercase;letter-spacing:.08em;background:#f7f8f7;padding:12px 16px;font-size:9px}td{vertical-align:middle;border-top:1px solid #edf0ed;padding:14px 16px;font-size:11px}td strong,td small{display:block}td small{color:#8b938d;margin-top:2px}.type-pill,.status-pill{border-radius:5px;margin-right:8px;padding:4px 6px;font-size:8px;font-weight:900;display:inline-block}.type-pill.invoice{color:#27563b;background:#e8f2eb}.status-pill{color:#626b64;background:#eff1ef}.text-link{color:var(--forest);background:0 0;border:0;padding:0;font-weight:800}.row-actions{white-space:nowrap;text-align:right}.table-icon-btn{color:#526158;background:0 0;border:1px solid #0000;border-radius:9px;place-items:center;width:34px;height:34px;margin-left:4px;transition:color .18s,background-color .18s,border-color .18s;display:inline-grid}.table-icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.table-icon-btn:hover{color:var(--forest);background:#edf4ef;border-color:#d8e5db}.table-icon-btn:focus-visible{color:var(--forest);background:#edf4ef;border-color:#d8e5db}.table-icon-btn.danger:hover{color:var(--red);background:#f9e9e7;border-color:#efd5d1}.table-icon-btn.danger:focus-visible{color:var(--red);background:#f9e9e7;border-color:#efd5d1}.records-pagination{border-top:1px solid #e9ece9;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:12px 16px;display:flex}.records-pagination>span{color:#677168;font-size:11px}.pagination-actions{gap:8px;display:flex}.pagination-actions button{min-width:96px;color:var(--forest);background:#fff;border:1px solid #d4dbd5;border-radius:9px;padding:9px 13px;font-size:11px;font-weight:800;transition:color .18s,background-color .18s,border-color .18s}.pagination-actions button:hover:not(:disabled){background:#edf4ef;border-color:#b9cbbd}.pagination-actions button:focus-visible:not(:disabled){background:#edf4ef;border-color:#b9cbbd}.pagination-actions button:focus-visible{outline-offset:2px;outline:3px solid #21503624}.pagination-actions button:disabled{cursor:not-allowed;color:#9ba39d;opacity:.7;background:#f4f6f4}.empty-state{color:#808981;align-content:center;place-items:center;gap:5px;min-height:260px;display:grid}.empty-state strong{color:var(--ink)}@media (max-width:1180px){.workspace{grid-template-columns:1fr}.preview-zone{position:static}.document-sheet{max-width:820px}}@media (max-width:760px){.app-header{grid-template-columns:1fr auto;height:auto;min-height:70px;padding:12px 14px}.top-nav{grid-area:2/1/auto/-1;width:100%}.top-nav button{flex:1}.top-nav{display:flex}.brand-lockup span{display:none}.workspace,.records-page{padding:14px}.editor-panel{border-radius:14px;padding:18px}.grid.two,.grid.three{grid-template-columns:minmax(0,1fr)}.panel-head{align-items:center}.save-state{display:none}.item-editor{grid-template-columns:28px 1fr 20px;padding:10px}.item-fields{grid-template-columns:1fr}.item-row-inline{grid-template-columns:1fr 72px auto}.item-amount{justify-items:stretch}.item-amount strong{width:100%}.records-toolbar{flex-direction:column;align-items:stretch}.records-filters{grid-template-columns:1fr;width:100%}.records-count{align-self:flex-end;padding:0}.skeleton-line.count{align-self:flex-end;margin:0}.records-pagination{flex-direction:column;align-items:stretch}.records-pagination>span{text-align:center}.pagination-actions button{flex:1;min-width:0}}.pdf-exporting .doc-header{grid-template-columns:120px minmax(0,1fr) 120px!important;gap:20px!important;display:grid!important}.pdf-exporting .doc-meta-grid{grid-template-columns:1fr 1fr!important;align-items:start!important;gap:12px 52px!important;display:grid!important}.pdf-exporting .doc-meta{text-align:right;place-self:start stretch;justify-items:end;grid-template-columns:1fr!important;gap:12px!important;display:grid!important}.pdf-exporting .doc-meta>div{gap:2px!important;display:grid!important}.pdf-exporting .grand-total{justify-content:space-between!important;gap:20px!important;display:flex!important}.pdf-exporting .totals-wrap{grid-template-columns:1fr 250px!important;gap:42px!important;display:grid!important}.pdf-exporting .notes-grid{grid-template-columns:1fr!important;display:grid!important}.pdf-exporting .items-head,.pdf-exporting .items-row{grid-template-columns:32px minmax(180px,1fr) 70px 110px!important;gap:10px!important}.pdf-exporting .doc-emblem,.pdf-exporting .state-crest{min-height:112px!important}.pdf-exporting .doc-emblem .logo-mark,.pdf-exporting .state-crest img{width:108px!important;height:108px!important}.pdf-exporting .jawi-mark{height:62px!important}.pdf-exporting .doc-identity>strong{font-size:12px!important}.pdf-exporting .doc-identity>span{font-size:8px!important}.pdf-exporting .doc-title h1{font-size:22px!important}@media print{@page{size:A4;margin:0}body{background:#fff}.no-print{display:none!important}.app-shell,.workspace,.preview-zone{margin:0!important;padding:0!important;display:block!important}.document-sheet{width:210mm;max-width:none;min-height:297mm;box-shadow:none;margin:0;padding:14mm 15mm 12mm 17mm}.doc-header{grid-template-columns:120px minmax(0,1fr) 120px!important;gap:20px!important;display:grid!important}.doc-meta-grid{grid-template-columns:1fr 1fr!important;align-items:start!important;gap:12px 52px!important;display:grid!important}.doc-meta{text-align:right;place-self:start stretch;justify-items:end}.totals-wrap{grid-template-columns:1fr 250px!important;gap:42px!important;display:grid!important}.notes-grid{grid-template-columns:1fr!important;display:grid!important}}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:1000;background:#0a120d8c;place-items:center;padding:24px;animation:.18s modal-fade-in;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.modal-card{background:#fff;border-radius:20px;gap:0;width:100%;max-width:400px;padding:36px 32px 28px;animation:.22s cubic-bezier(.34,1.56,.64,1) modal-slide-up;display:grid;box-shadow:0 4px 6px -1px #00000014,0 24px 64px -8px #0a140e47}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-icon{border-radius:14px;place-items:center;width:52px;height:52px;margin-bottom:18px;display:grid}.modal-icon.danger{color:#b91c1c;background:#fef2f2}.modal-icon svg{width:26px;height:26px}.modal-title{letter-spacing:-.03em;color:var(--ink);margin:0 0 10px;font-size:18px;font-weight:800}.modal-body{color:#4f5b52;margin:0 0 28px;font-size:13px;line-height:1.6}.modal-body strong{color:var(--ink)}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.modal-btn{cursor:pointer;border:0;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700;transition:transform .15s,filter .15s,background .15s}.modal-btn.cancel{color:var(--ink);background:#f0f2f0}.modal-btn.cancel:hover{background:#e4e7e4}.modal-btn.confirm-danger{color:#fff;background:#b91c1c}.modal-btn.confirm-danger:hover{filter:brightness(1.08);transform:translateY(-1px)}