*{box-sizing:border-box}
:root{--green-950:#063b33;--green-900:#075447;--green-800:#0b6b59;--green-700:#0e806a;--green-600:#149477;--gold:#c99a3d;--gold-soft:#f4e7c5;--cream:#fbfaf5;--ink:#17302b;--muted:#6b7b77;--line:#e4ebe7;--danger:#c7473d;--blue:#2879b9}
html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#eef6f2 0,#f7f8f5 40%,#f3f6f4 100%);color:var(--ink);min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:radial-gradient(circle at 10% 15%,rgba(201,154,61,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 90% 75%,rgba(14,128,106,.13) 0 1px,transparent 1.5px);background-size:28px 28px,36px 36px;z-index:-1}
header{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--green-950),var(--green-800) 62%,#0a5d66);color:#fff;padding:18px max(20px,calc((100% - 1120px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 5px 22px #063b3326}
header:after{content:"✦  ◇  ✦  ◇  ✦";position:absolute;right:30px;bottom:-8px;color:#d7b86a20;font-size:58px;letter-spacing:12px;transform:rotate(-8deg);pointer-events:none}
.brand{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.brand-mark{width:48px;height:48px;border:1px solid #e7c96e88;border-radius:15px;background:linear-gradient(145deg,#f2d889,#b8892f);display:grid;place-items:center;color:#fff;font-size:25px;box-shadow:inset 0 1px #fff8}.brand-text b{display:block;font-size:18px;letter-spacing:.2px}.brand-text small{display:block;color:#d9e8e3;margin-top:3px;font-size:11px;letter-spacing:1px;text-transform:uppercase}.brand-arabic{font-family:Georgia,serif;font-size:18px;color:#f4e7c5;opacity:.9;text-align:center;position:relative;z-index:1}.header-actions{display:flex;align-items:center;gap:8px;position:relative;z-index:1}.header-actions a{color:#fff;text-decoration:none;padding:9px 11px;border-radius:9px;font-size:12px}.header-actions a:hover{background:#ffffff15}.admin-badge{border:1px solid #ffffff2b;background:#ffffff10}
main{max-width:1120px;margin:22px auto;padding:0 16px 35px}.menu{display:flex;gap:8px;margin-bottom:16px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 18px #063b330a}.menuBtn{border:0;padding:11px 18px;border-radius:9px;background:transparent;color:#49625c;cursor:pointer;font-weight:700;transition:.18s}.menuBtn:hover{background:#eef6f2;color:var(--green-800)}.menuBtn.active{background:linear-gradient(135deg,var(--green-800),var(--green-600));color:white;box-shadow:0 4px 10px #0b6b5933}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px;margin-bottom:16px}.cards>div{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px 18px;box-shadow:0 5px 20px #063b330d}.cards>div:after{content:"☪";position:absolute;right:14px;bottom:-9px;font-size:46px;color:#0b6b5910}.cards small{display:block;color:var(--muted);margin-bottom:7px;font-size:12px}.cards strong{font-size:22px;color:var(--green-950)}
.panel{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;margin-bottom:16px;box-shadow:0 5px 20px #063b330b}.panel:after{content:"◇";position:absolute;right:18px;top:5px;font-size:72px;color:#c99a3d0b;pointer-events:none}.panel h2{margin:0 0 13px;color:var(--green-950);font-size:19px;position:relative;z-index:1}.panel>p{position:relative;z-index:1}
form{display:grid;gap:10px;position:relative;z-index:1}input,select,button{font:inherit}input,select{padding:12px 13px;border:1px solid #ccd9d4;border-radius:9px;background:#fff;color:#203a35;outline:none;transition:.15s}input:focus,select:focus{border-color:#149477;box-shadow:0 0 0 3px #14947718}form button,.authbox button{padding:12px;border:0;border-radius:9px;background:linear-gradient(135deg,var(--green-800),var(--green-600));color:white;font-weight:700;cursor:pointer;box-shadow:0 4px 10px #0b6b5922}form button:hover{filter:brightness(1.04)}
.tablewrap{overflow:auto;position:relative;z-index:1}table{width:100%;border-collapse:separate;border-spacing:0;min-width:650px}th,td{padding:11px 10px;border-bottom:1px solid #e7eeeb;text-align:left}th{background:#f2f7f4;color:#31524a;font-size:12px;text-transform:uppercase;letter-spacing:.35px}th:first-child{border-radius:8px 0 0 0}th:last-child{border-radius:0 8px 0 0}tbody tr:hover{background:#f9fcfa}td{font-size:13px}
.hidden{display:none}.smallBtn{padding:7px 10px;border:0;border-radius:7px;background:#2879b9;color:white;cursor:pointer;font-weight:700}.hint,.muted{color:var(--muted)}.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at top,#e8f4ef,#f5f6f3 55%)}.authbox{width:min(440px,100%);background:#fff;padding:28px;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 45px #063b3318}.authbox h1{margin-top:0;color:var(--green-950)}.authbox .center{display:block;text-align:center;margin-top:15px;color:#2879b9}.alert,.ok,.secret{padding:12px;border-radius:9px;margin-bottom:12px}.alert{background:#fff0ef;color:#9e3029;border:1px solid #f0cbc7}.ok{background:#e8f6ee;color:#176b43;border:1px solid #cbe9d7}.secret{background:#eef6ff;border:1px solid #cfe1f8}.narrow{max-width:650px;margin:auto}label{font-weight:700;margin-top:4px;font-size:13px}hr{border:0;border-top:1px solid var(--line);width:100%;margin:8px 0}.sharebox{display:flex;gap:8px;margin-bottom:15px;position:relative;z-index:1}.sharebox input{flex:1}.sharebox button,.sharebox a{border:0;border-radius:9px;padding:11px;background:#2879b9;color:white;text-decoration:none;cursor:pointer}.preview{width:100%;height:700px;border:1px solid #dde7e2;border-radius:11px}.hero{text-align:center;background:linear-gradient(145deg,#fff,#f5faf7);border:1px solid var(--line);border-radius:15px;padding:25px;margin-bottom:15px;box-shadow:0 5px 20px #063b330b}.hero h1{margin:0 0 8px;color:var(--green-950)}
.security-warning{border:1px solid #d7dde2;background:#f7f8f9;border-radius:9px;padding:12px;margin-bottom:18px;text-align:center;letter-spacing:.5px}.security-warning strong{display:block;font-size:14px;color:#8b1e1e}.security-warning span{display:block;font-size:10px;color:#66717b;margin-top:4px}.secure-login h1{text-align:center;margin-bottom:6px}.secure-login>.hint{text-align:center;font-size:12px}.discreet-link{font-size:11px!important;color:#7d8790!important;text-decoration:none;opacity:.7}.discreet-link:hover{opacity:1;text-decoration:underline}.secure-login .smallBtn{font-size:12px;margin-left:5px}
.actions{white-space:nowrap}.editBtn,.dangerBtn,.cancelBtn{padding:7px 10px;border:0;border-radius:7px;cursor:pointer;font-weight:700;margin-right:4px}.editBtn{background:#2879b9;color:white}.dangerBtn{background:var(--danger);color:white}.cancelBtn{background:#e8eeeb;color:#29443d}.modal{position:fixed;inset:0;background:#063b3370;display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modalbox{width:min(620px,100%);max-height:calc(100vh - 36px);overflow:auto;background:white;border-radius:16px;padding:22px;box-shadow:0 18px 60px #0004}.modalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modalhead h2{margin:0;color:var(--green-950)}.modalclose{width:38px;height:38px;border:0;border-radius:9px;background:#eef2ef;color:#4b5d57;font-size:25px;line-height:1;cursor:pointer}.modalclose:hover{background:#e1e9e5}.editgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.editgrid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#435a54}.editgrid label input,.editgrid label select{width:100%;min-width:0}.editgrid .hidden{display:none}.modalactions{margin-top:17px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.modalactions button{min-height:44px}.modalactions button:disabled{opacity:.6;cursor:not-allowed}.paidinfo{background:#eef7f3;border:1px solid #cfe4d9;border-radius:9px;padding:11px 13px;margin-bottom:15px;color:#344f47}.paidinfo b{color:var(--green-800)}.paidinfo span{font-size:12px;color:var(--muted)}
.fieldwide{display:block}.fieldwide small{display:block;margin-top:5px;line-height:1.35}.actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.actions form{margin:0}.hutangtable th,.hutangtable td{vertical-align:top}.multiLines>div{padding:3px 0;white-space:nowrap}.groupActions{min-width:150px}.loanDetails{margin-top:7px;text-align:left}.loanDetails summary{cursor:pointer;color:var(--green-800);font-weight:700}.loanList{margin-top:7px;min-width:320px;max-width:520px}.loanItem{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #e5eae7}.loanItem:last-child{border-bottom:0}.loanItemActions{display:flex;gap:4px;flex-shrink:0}.loanItemActions button{font-size:11px;padding:4px 7px}
.reportFilters{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:16px}.reportFilters label{display:grid;gap:5px;font-size:12px;color:#56616b}.reportFilters select,.reportFilters button,.printBtn{padding:10px 12px;border:1px solid #ccd9d4;border-radius:8px;background:#fff;cursor:pointer}.reportFilters button,.printBtn{background:var(--green-800);color:#fff;border:0;font-weight:700}.reportGrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.summaryTable{width:100%;min-width:0}.summaryTable td:last-child{text-align:right;font-weight:700}.publicNote{background:#f6f8f5;border:1px solid #dfe8e3;padding:12px;border-radius:9px;margin-bottom:15px;font-size:13px}.printOnly{display:none}
@media(max-width:800px){header{padding:15px 16px}.brand-arabic{display:none}.header-actions a{padding:8px}.menu{overflow:auto}.menuBtn{white-space:nowrap}.hutangtable{min-width:900px}.loanList{min-width:280px}.loanItem{align-items:flex-start;flex-direction:column}.loanItemActions{width:100%}}
@media(max-width:600px){.brand-mark{width:42px;height:42px;font-size:22px}.brand-text b{font-size:15px}.brand-text small{font-size:9px}main{padding:0 11px 25px}.panel{padding:15px}.cards{grid-template-columns:1fr 1fr}.cards strong{font-size:18px}.sharebox{flex-wrap:wrap}.sharebox input{flex-basis:100%}.editgrid{grid-template-columns:1fr;gap:10px}.modal{padding:10px}.modalbox{padding:16px;border-radius:13px}.modalactions{grid-template-columns:1fr 1fr}}
@media print{body{background:#fff}body:before,header:after{display:none}.noPrint{display:none!important}.hero,.panel,.cards>div{box-shadow:none;border:1px solid #ddd}.printOnly{display:block}main{max-width:none}.hero{padding:10px}.panel{break-inside:avoid}.tablewrap{overflow:visible}table{min-width:0}.reportGrid{grid-template-columns:1fr 1fr}}

/* V13 — Islamic detailed green theme */
:root{--green-950:#043b31;--green-900:#075442;--green-800:#08745a;--green-700:#0a8a69;--green-600:#16a078;--gold:#c9a34b;--gold-light:#ead28b;--cream:#f7f4e9;--line:#d7e5dd;--muted:#667a73;--danger:#c93c32}
body{background:linear-gradient(180deg,#e9f4ef 0%,#f8faf8 44%,#edf5f1 100%);position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(circle at 15% 20%,rgba(201,163,75,.16) 0 1px,transparent 1.5px),radial-gradient(circle at 85% 65%,rgba(7,116,90,.10) 0 1px,transparent 1.5px);background-size:26px 26px,34px 34px;z-index:-2}
body:after{content:"";position:fixed;left:0;right:0;bottom:0;height:190px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgMjIwIj48ZyBmaWxsPSIjMGI1ZDRiIiBvcGFjaXR5PSIwLjE2Ij48cGF0aCBkPSJNMCAyMDVoOTAwdjE1SDB6TTg1IDIwNVY5MmgyNXYxMTN6bS04LTExM2g0MUw5NyA0OHpNNjUgMjA1VjEyOGgxNXY3N3ptNzU1IDBWOTJoMjV2MTEzem0tOC0xMTNoNDFsLTIwLTQ0ek04MDUgMjA1di03N2gxNXY3N3pNMTY1IDIwNXYtNjZoNDB2NjZ6bS0xMC02Nmg2MGwtMzAtNDR6bTUzMCA2NnYtNjZoNDB2NjZ6bS0xMC02Nmg2MGwtMzAtNDR6TTIyNSAyMDVWMTI1aDQ1MHY4MHpNMjg1IDEyNWMwLTU0IDQ0LTk4IDk4LTk4czk4IDQ0IDk4IDk4ek0yNjAgMjA1di05NWgzODB2OTV6Ii8+PGNpcmNsZSBjeD0iMzgzIiBjeT0iMjciIHI9IjciLz48cGF0aCBkPSJNMzcwIDI3aDI2djVoLTI2eiIvPjxwYXRoIGQ9Ik0yMTUgMjA1YzAtMzUgMjgtNjMgNjMtNjNzNjMgMjggNjMgNjN6bTM0MCAwYzAtMzUgMjgtNjMgNjMtNjNzNjMgMjggNjMgNjN6Ii8+PC9nPjwvc3ZnPg==);background-repeat:repeat-x;background-position:center bottom;background-size:900px 220px;pointer-events:none;z-index:-1}
header{background:linear-gradient(120deg,#043b31 0%,#075442 45%,#0a735b 100%);border-bottom:3px solid #c9a34b;box-shadow:0 8px 28px rgba(4,59,49,.24);min-height:88px;position:relative;overflow:hidden}
header:before{content:"بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ";position:absolute;left:50%;top:7px;transform:translateX(-50%);font-family:Georgia,serif;font-size:13px;letter-spacing:.5px;color:#ead28b;opacity:.82;white-space:nowrap;z-index:2}
header:after{content:"۞  ❖  ۞  ❖  ۞";right:25px;bottom:-14px;color:rgba(234,210,139,.16);font-size:52px;letter-spacing:12px;transform:rotate(-5deg)}
.header-ornament{position:absolute;color:#ead28b;opacity:.22;font-size:72px;line-height:1;top:8px;pointer-events:none;z-index:1}.ornament-left{left:18px}.ornament-right{right:18px}
.mosque-silhouette{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(720px,70vw);height:82px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgMjIwIj48ZyBmaWxsPSIjMGI1ZDRiIiBvcGFjaXR5PSIwLjE2Ij48cGF0aCBkPSJNMCAyMDVoOTAwdjE1SDB6TTg1IDIwNVY5MmgyNXYxMTN6bS04LTExM2g0MUw5NyA0OHpNNjUgMjA1VjEyOGgxNXY3N3ptNzU1IDBWOTJoMjV2MTEzem0tOC0xMTNoNDFsLTIwLTQ0ek04MDUgMjA1di03N2gxNXY3N3pNMTY1IDIwNXYtNjZoNDB2NjZ6bS0xMC02Nmg2MGwtMzAtNDR6bTUzMCA2NnYtNjZoNDB2NjZ6bS0xMC02Nmg2MGwtMzAtNDR6TTIyNSAyMDVWMTI1aDQ1MHY4MHpNMjg1IDEyNWMwLTU0IDQ0LTk4IDk4LTk4czk4IDQ0IDk4IDk4ek0yNjAgMjA1di05NWgzODB2OTV6Ii8+PGNpcmNsZSBjeD0iMzgzIiBjeT0iMjciIHI9IjciLz48cGF0aCBkPSJNMzcwIDI3aDI2djVoLTI2eiIvPjxwYXRoIGQ9Ik0yMTUgMjA1YzAtMzUgMjgtNjMgNjMtNjNzNjMgMjggNjMgNjN6bTM0MCAwYzAtMzUgMjgtNjMgNjMtNjNzNjMgMjggNjMgNjN6Ii8+PC9nPjwvc3ZnPg==);background-size:700px 170px;background-position:center bottom;background-repeat:no-repeat;opacity:.52;pointer-events:none;z-index:1}
.brand,.header-actions{position:relative;z-index:3}
.brand-mark{border-color:#ead28b;background:linear-gradient(145deg,#d8bb63,#a77a26);box-shadow:0 0 0 3px rgba(234,210,139,.08),inset 0 1px #fff9}
.brand-arabic{font-size:20px;color:#f5e8c3;text-shadow:0 1px 4px #0005}
.menu{border:1px solid #c9dfd4;box-shadow:0 8px 26px rgba(4,59,49,.09);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);position:relative}
.menu:before{content:"۞";color:#c9a34b;opacity:.45;margin:0 4px 0 6px;align-self:center}
.menuBtn.active{background:linear-gradient(135deg,#075442,#0a8a69);box-shadow:0 5px 14px rgba(7,84,66,.25)}
.cards>div,.panel,.hero{border-color:#d7e5dd;box-shadow:0 8px 26px rgba(4,59,49,.08)}
.cards>div:after{content:"☪";color:#08745a12}
.panel:before{content:"✦";position:absolute;left:18px;bottom:10px;color:#c9a34b;opacity:.14;font-size:44px;pointer-events:none}
.panel:after{content:"۞";font-size:86px;color:#c9a34b13;transform:rotate(12deg)}
.panel h2{letter-spacing:.1px}
th{background:linear-gradient(180deg,#edf7f2,#e4f0ea);color:#174e42}
form button,.authbox button{background:linear-gradient(135deg,#075442,#0a8a69);box-shadow:0 5px 13px rgba(7,84,66,.22)}
.smallBtn{background:#0a8a69}
.hero{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,249,245,.96));position:relative}
.hero:before{content:"۞";position:absolute;left:22px;top:12px;font-size:60px;color:#c9a34b18}.hero:after{content:"☪";position:absolute;right:24px;bottom:4px;font-size:70px;color:#08745a12}
@media(max-width:800px){header:before{display:none}.mosque-silhouette{width:100%;opacity:.24}.header-ornament{display:none}}
@media print{body:after{display:none}header{border-bottom:2px solid #777;background:#fff;color:#111;box-shadow:none}header:before{color:#555}.brand-text small,.brand-arabic{color:#333}}