:root{--g:#0B5D3B;--g2:#084A2F;--gs:#E8F3EE;--gold:#C9A227;--cream:#FAF7F0;--bg:#F6F7F9;--ink:#0B1220;--mut:#5B6475;--line:#E6E8EC;--ok:#16A34A;--warn:#D97706;--bad:#DC2626;--r:16px}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body.thi-app{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
a{color:var(--g)}a:hover{color:var(--g2)}
h1,h2,h3,.thi-num{font-family:'Plus Jakarta Sans',Inter,sans-serif}
.thi-num{font-variant-numeric:tabular-nums;font-weight:700}
.thi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;border:0;background:var(--g);color:#fff;font:600 14px Inter;cursor:pointer;text-decoration:none;white-space:nowrap}
.thi-btn:hover{background:var(--g2);color:#fff}.thi-btn:disabled{background:var(--line);color:#9CA3AF;cursor:not-allowed}
.thi-btn-ghost{background:#fff;color:var(--g);border:1px solid var(--g)}.thi-btn-ghost:hover{background:var(--gs);color:var(--g)}
.thi-btn-line{background:#fff;color:var(--ink);border:1px solid var(--line)}.thi-btn-line:hover{background:var(--bg);color:var(--ink)}
.thi-btn-danger{background:#fff;color:var(--bad);border:1px solid var(--bad)}.thi-btn-sm{height:36px;padding:0 12px;font-size:12px}.thi-btn-lg{height:52px;font-size:16px;border-radius:12px}
.thi-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.thi-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 11px Inter;background:#F3F4F6;color:#4B5563}
.thi-chip.zakat{background:#DCFCE7;color:#15803D}.thi-chip.infak{background:#CFFAFE;color:#0E7490}.thi-chip.wakaf{background:#FEF3C7;color:#92400E}.thi-chip.qurban{background:#EDE9FE;color:#6D28D9}.thi-chip.amil{background:#E2E8F0;color:#475569}
.thi-chip.berhasil,.thi-chip.cocok,.thi-chip.aktif,.thi-chip.sent{background:#DCFCE7;color:#15803D}.thi-chip.menunggu_verifikasi,.thi-chip.selisih,.thi-chip.pending,.thi-chip.queued,.thi-chip.disurvei{background:#FEF3C7;color:#B45309}
.thi-chip.ditolak,.thi-chip.duplikat,.thi-chip.dicurigai,.thi-chip.failed{background:#FEE2E2;color:#B91C1C}.thi-chip.kedaluwarsa,.thi-chip.belum{background:#F3F4F6;color:#6B7280}.thi-chip.live{background:var(--ink);color:#fff}
.thi-input,.thi-select,.thi-textarea{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:400 14px Inter;background:#fff;color:var(--ink);outline:0}
.thi-textarea{height:auto;min-height:88px;padding:10px 12px;resize:vertical}.thi-input:focus,.thi-select:focus,.thi-textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--gs)}
label.thi-l{display:block;font:500 13px Inter;margin-bottom:6px}.thi-help{font:400 11px Inter;color:var(--mut)}
.thi-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.thi-bar>span{display:block;height:100%;background:var(--g);border-radius:999px;transition:width .6s}
.thi-toggle{display:inline-block;width:44px;height:26px;border-radius:999px;background:#C4C9D2;position:relative;cursor:pointer;flex-shrink:0}.thi-toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}.thi-toggle.on{background:var(--g)}.thi-toggle.on::after{left:21px}
.thi-grid{display:grid;gap:16px}.thi-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.thi-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.thi-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.thi-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.thi-between{display:flex;justify-content:space-between;align-items:center;gap:10px}.thi-mut{color:var(--mut)}.thi-sm{font-size:12px}.thi-xs{font-size:11px}
.thi-table{width:100%;border-collapse:collapse;font-size:12px}.thi-table th{text-align:left;font:600 11px Inter;color:var(--mut);padding:10px 12px;background:var(--bg)}.thi-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}.thi-table tr.sel td{background:var(--gs)}.thi-table tbody tr{cursor:pointer}
.thi-empty{padding:48px;text-align:center;color:var(--mut);border:1.5px dashed var(--line);border-radius:var(--r)}
.thi-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font:500 13px Inter;box-shadow:0 12px 32px rgba(11,18,32,.25);z-index:99;display:flex;gap:10px;align-items:center;max-width:90vw}.thi-toast.bad{background:var(--bad)}
.thi-sys{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:32px}.thi-sys-icon{width:88px;height:88px;border-radius:24px;background:var(--gs);display:grid;place-items:center;font-size:32px}
.thi-skel{background:linear-gradient(90deg,#EEF0F3 25%,#F8F9FA 50%,#EEF0F3 75%);background-size:800px 100%;animation:thi-sh 1.4s infinite linear;border-radius:8px}@keyframes thi-sh{0%{background-position:-400px 0}100%{background-position:400px 0}}
.thi-arab{font-family:Amiri,serif;direction:rtl;font-size:22px;line-height:1.8}
/* panel */
.thi-shell{display:flex;min-height:100vh}.thi-side{width:260px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow:auto}
.thi-brand{display:flex;align-items:center;gap:10px;padding:0 8px}.thi-logo{width:32px;height:32px;border-radius:8px;background:var(--g);flex-shrink:0}
.thi-nav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font:500 13px Inter}.thi-nav a.on{background:var(--gs);color:var(--g);font-weight:600}.thi-nav a .b{margin-left:auto;font:600 11px Inter;background:var(--warn);color:#fff;border-radius:999px;padding:1px 7px}
.thi-nav .grp{font:600 10px Inter;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;padding:14px 12px 4px}
.thi-main{flex:1;min-width:0}.thi-top{height:64px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}.thi-top h1{margin:0;font-size:17px}
.thi-content{padding:24px;display:flex;flex-direction:column;gap:20px}
.thi-kpi{display:flex;flex-direction:column;gap:6px}.thi-kpi .v{font:700 26px/1 'Plus Jakarta Sans';font-variant-numeric:tabular-nums}
.thi-summary{border-left:2px solid var(--gold);padding-left:16px;font:500 18px/1.45 'Plus Jakarta Sans'}
.thi-split{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}.thi-queue{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-height:70vh;overflow-y:auto}
.thi-qi{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent;cursor:pointer}.thi-qi.sel{background:var(--gs);border-left-color:var(--g)}
.thi-kanban{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start}.thi-kcol h4{margin:0 0 8px;font:600 12px Inter;display:flex;justify-content:space-between}.thi-kcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;border-left:3px solid var(--g);font-size:12px;cursor:pointer}
.thi-stateline{display:flex;gap:6px;align-items:center;padding:10px 14px;border-radius:10px;font:500 13px Inter}.thi-stateline.warn{background:#FEF3C7;color:#92400E}.thi-stateline.bad{background:#FEE2E2;color:#B91C1C}.thi-stateline.info{background:#DBEAFE;color:#1D4ED8}
.thi-modal{position:fixed;inset:0;background:rgba(11,18,32,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.thi-modal>div{background:#fff;border-radius:20px;padding:24px;width:560px;max-width:100%;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
/* mobile apps */
.thi-mobile{max-width:480px;margin:0 auto;min-height:100vh;background:var(--cream);position:relative;padding-bottom:88px}.thi-mobile .thi-content{padding:16px}
.thi-tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:76px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px 16px;z-index:10}.thi-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 11px Inter;color:#9CA3AF;text-decoration:none}.thi-tabbar a.on{color:var(--g)}.thi-tabbar a i{width:20px;height:20px;border-radius:6px;border:1.75px solid currentColor}
.thi-offline{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--ink);color:#fff;font:500 12px Inter}.thi-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}.thi-dot.warn{background:var(--warn)}
.thi-sig{height:120px;border:1.5px dashed #C4C9D2;border-radius:10px;background:#fff;touch-action:none;width:100%}
.thi-big{height:60px;border:2px solid var(--g);background:var(--gs);border-radius:12px;padding:0 14px;display:flex;align-items:center;gap:8px;font:700 28px 'Plus Jakarta Sans';font-variant-numeric:tabular-nums}.thi-big input{border:0;background:transparent;font:inherit;flex:1;min-width:0;outline:0}
/* donasi */
.thi-donasi{max-width:1040px;margin:0 auto;padding:24px 16px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}.thi-sticky{position:sticky;top:16px}
.thi-steps{display:flex;gap:6px}.thi-steps span{flex:1;height:4px;border-radius:999px;background:var(--line)}.thi-steps span.on{background:var(--g)}
.thi-amt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.thi-amt button{height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;font:600 15px 'Plus Jakarta Sans';font-variant-numeric:tabular-nums;cursor:pointer}.thi-amt button.on{border:2px solid var(--g);background:var(--gs);color:var(--g)}
.thi-method{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer;background:#fff}.thi-method.on{background:var(--gs)}.thi-method .rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--g);margin-left:auto;flex-shrink:0}.thi-method.on .rad{background:var(--g)}
.thi-qr{width:220px;height:220px;border-radius:12px;background:#fff;border:8px solid #fff;outline:1px solid var(--line);display:grid;place-items:center;overflow:hidden}.thi-qr img{width:100%;height:100%;object-fit:contain}
@media(max-width:900px){.thi-side{display:none}.thi-split,.thi-donasi{grid-template-columns:1fr}.thi-g4,.thi-g3{grid-template-columns:repeat(2,minmax(0,1fr))}.thi-kanban{grid-template-columns:repeat(2,minmax(0,1fr))}.thi-sticky{position:static}.thi-mobnav{display:flex!important}}
.thi-mobnav{display:none;gap:6px;overflow-x:auto;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line)}.thi-mobnav a{white-space:nowrap;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font:600 12px Inter;color:var(--ink);text-decoration:none}.thi-mobnav a.on{background:var(--g);color:#fff;border-color:var(--g)}
@media print{.thi-side,.thi-top,.thi-tabbar,.thi-btn{display:none!important}body{background:#fff}}