*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#059669;--brand-dark:#047857;--brand-light:#f0fdf9;--brand-mid:#a7f3d0;--brand-2:#ecfdf5;--bg:#f1f5f9;--surface:#fff;--surface-2:#f8fafc;--surface-3:#f1f5f9;--text:#0f172a;--text-sub:#475569;--text-muted:#94a3b8;--border:#e2e8f0;--border-2:#cbd5e1;--navy:#1e293b;--navy-2:#334155;--green:#059669;--green-dark:#047857;--green-light:#ecfdf5;--red:#dc2626;--red-light:#fef2f2;--yellow:#d97706;--yellow-light:#fffbeb;--blue:#2563eb;--blue-light:#eff6ff;--white:#fff;--sh-xs:0 1px 2px #0000000d;--sh-sm:0 1px 3px #00000014, 0 1px 2px #0000000a;--sh-md:0 4px 8px #00000014, 0 2px 4px #0000000a;--sh-lg:0 10px 30px #0000001f, 0 4px 10px #0000000f;--sh-xl:0 24px 64px #0000002e;--r-xs:4px;--r-sm:6px;--r:10px;--r-md:12px;--r-lg:16px;--r-xl:20px;--layout-gap:8px;--header-sticky-top:8px}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px;overflow-x:clip}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;line-height:1.5;overflow-x:clip}input,select,button,textarea{font-family:inherit}.app-shell{flex-direction:column;width:100%;max-width:100vw;min-height:100vh;display:flex;overflow-x:clip}.app-container{gap:var(--layout-gap);box-sizing:border-box;flex-direction:column;flex:1;width:100%;max-width:560px;margin:0 auto;padding:10px 12px 40px;display:flex}.app-header{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-xs);min-height:52px;top:var(--header-sticky-top);z-index:100;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;display:flex;position:sticky}.header-brand{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.header-logo{border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex;overflow:hidden;box-shadow:0 1px 4px #0596692e}.header-titles{min-width:0}.app-header h1{color:var(--text);letter-spacing:-.2px;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:700;line-height:1.15;overflow:hidden}.header-subtitle{color:var(--text-muted);white-space:nowrap;margin-top:1px;font-size:.68rem;line-height:1.25}.header-badge{background:var(--brand-2);color:var(--brand-dark);white-space:nowrap;border:1px solid #05966938;border-radius:999px;flex-shrink:0;padding:3px 9px;font-size:.62rem;font-weight:600}.tabs-root{gap:var(--layout-gap);flex-direction:column;display:flex}.tab-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-xs);grid-template-columns:1fr 1fr;gap:3px;padding:4px;display:grid}.tab-btn{border-radius:var(--r-xs);color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;outline:none;justify-content:center;align-items:center;gap:6px;padding:7px 10px;font-family:inherit;font-size:.76rem;font-weight:500;transition:background .14s,color .14s,box-shadow .14s;display:flex}.tab-btn:hover{background:var(--surface-2);color:var(--text-sub)}.tab-btn[data-selected]{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 1px 4px #0596694d}.tab-btn[data-selected] svg{opacity:1}.tab-btn svg{opacity:.6}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-xs);overflow:hidden}.form-panel{flex-direction:column;gap:10px;padding:14px;display:flex}.form-panel-title{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);border-bottom:1px solid var(--border);align-items:center;gap:5px;padding-bottom:8px;font-size:.7rem;font-weight:700;display:flex}.field{color:var(--text-muted);flex-direction:column;gap:4px;font-size:.7rem;font-weight:500;display:flex}.field input[type=text],.field input[type=number]{border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface);width:100%;color:var(--text);outline:none;height:36px;padding:7px 10px;font-family:inherit;font-size:.82rem;font-weight:400;transition:border-color .12s,box-shadow .12s}.field input:focus{border-color:var(--brand);box-shadow:0 0 0 2px #05966924}.field input::placeholder{color:var(--text-muted);font-size:.78rem}.helper-text{color:var(--text-muted);font-size:.65rem;font-weight:400;line-height:1.4}.btn-cek{background:var(--brand);color:#fff;border-radius:var(--r-xs);cursor:pointer;border:none;justify-content:center;align-items:center;gap:7px;width:100%;margin-top:2px;padding:9px;font-family:inherit;font-size:.84rem;font-weight:600;transition:background .12s,box-shadow .12s;display:flex}.btn-cek:hover{background:var(--brand-dark);box-shadow:0 3px 10px #0596694d}.btn-cek:active{background:var(--brand-dark)}.btn-cek:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.loading-wrap{color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:36px 20px;font-size:.76rem;display:flex}.spinner{border:2.5px solid var(--border-2);border-top-color:var(--brand);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-wrap{background:var(--red-light);color:var(--red);border-top:1px solid #dc262626;align-items:flex-start;gap:9px;padding:12px 14px;font-size:.76rem;line-height:1.5;display:flex}.error-wrap svg{flex-shrink:0;margin-top:1px}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:180px;padding:40px 20px;display:flex}.empty-state-icon{color:var(--border-2);margin-bottom:4px}.empty-state h3{color:var(--text-sub);font-size:.82rem;font-weight:600}.empty-state p{max-width:240px;font-size:.72rem;line-height:1.5}.result-panel{border-top:1px solid var(--border);overflow:hidden}.hero-result{background:var(--navy);color:#fff;padding:16px 16px 14px}.hero-label{text-transform:uppercase;letter-spacing:.1em;color:#ffffff73;margin-bottom:3px;font-size:.6rem;font-weight:700;display:block}.hero-name{letter-spacing:-.02em;color:#fff;word-break:break-word;margin-bottom:8px;font-size:1.15rem;font-weight:800;line-height:1.2}.hero-id-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hero-id-pill{border-radius:var(--r-xs);color:#ffffffd9;letter-spacing:.02em;background:#ffffff1a;border:1px solid #ffffff26;align-items:center;gap:5px;padding:3px 9px;font-size:.72rem;font-weight:600;display:inline-flex}.hero-status-pill{border-radius:999px;align-items:center;gap:4px;padding:3px 9px;font-size:.65rem;font-weight:700;display:inline-flex}.hero-status-pill.lunas{color:#6ee7b7;background:#34d3992e;border:1px solid #34d3994d}.hero-status-pill.belum{color:#fcd34d;background:#fbbf2426;border:1px solid #fbbf2440}.summary-strip{border-bottom:1px solid var(--border);grid-template-columns:repeat(3,1fr);display:grid}.summary-strip article{border-right:1px solid var(--border);padding:10px 12px}.summary-strip article:last-child{border-right:none}.summary-strip article span{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:3px;font-size:.6rem;font-weight:700;display:block}.summary-strip article strong{color:var(--text);word-break:break-word;font-size:.8rem;font-weight:700;line-height:1.3;display:block}.detail-section{flex-direction:column;gap:8px;padding:12px 14px;display:flex}.detail-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);align-items:center;gap:4px;margin-bottom:2px;font-size:.6rem;font-weight:700;display:flex}.detail-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.detail-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-xs);padding:9px 11px}.detail-card.accent{background:var(--brand-2);border-color:#05966938}.detail-card.full{grid-column:1/-1}.detail-card span{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:3px;font-size:.6rem;font-weight:700;display:block}.detail-card.accent span{color:var(--brand-dark)}.detail-card strong{color:var(--text);word-break:break-word;font-size:.88rem;font-weight:700;line-height:1.3;display:block}.detail-card.accent strong{color:var(--brand-dark);font-size:1rem}.detail-card small{color:var(--text-muted);margin-top:2px;font-size:.65rem;display:block}.posisi-bar-wrap{margin-top:4px}.posisi-bar-track{background:var(--border);border-radius:999px;width:100%;height:5px;margin-top:5px;overflow:hidden}.posisi-bar-fill{background:linear-gradient(90deg, var(--brand) 0%, #34d399 100%);border-radius:999px;height:100%}.posisi-bar-labels{color:var(--text-muted);justify-content:space-between;margin-top:3px;font-size:.6rem;display:flex}.hijriah-badge{background:var(--yellow-light);border-radius:var(--r-xs);color:var(--yellow);border:1px solid #d9770633;align-items:center;gap:4px;margin-top:4px;padding:2px 7px;font-size:.65rem;font-weight:600;display:inline-flex}.posisi-highlight{background:var(--brand-2);border-top:1px solid #0596691f;border-bottom:1px solid #0596691f;padding:12px 14px 10px}.posisi-highlight-top{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;display:flex}.posisi-highlight-right{text-align:right;flex-direction:column;align-items:flex-end;gap:3px;display:flex}.posisi-highlight-label{text-transform:uppercase;letter-spacing:.08em;color:var(--brand-dark);opacity:.7;margin-bottom:2px;font-size:.6rem;font-weight:700;display:block}.posisi-highlight-val{color:var(--brand-dark);letter-spacing:-.03em;font-size:1.5rem;font-weight:800;line-height:1.1;display:block}.posisi-highlight-year{color:var(--brand-dark);letter-spacing:-.02em;font-size:1.1rem;font-weight:800;line-height:1.1;display:block}.result-rows{flex-direction:column;display:flex}.result-rows-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--surface-2);align-items:center;gap:5px;padding:8px 14px 6px;font-size:.6rem;font-weight:700;display:flex}.result-row{border-bottom:1px solid var(--surface-3);justify-content:space-between;align-items:center;gap:12px;padding:7px 14px;font-size:.76rem;display:flex}.result-row:last-child{border-bottom:none}.result-row span{color:var(--text-muted);flex-shrink:0;font-size:.72rem}.result-row strong{color:var(--text);text-align:right;font-size:.78rem;font-weight:600}.result-row.result-row-accent{background:var(--surface-2)}.result-row.result-row-accent strong{color:var(--brand-dark)}.spin-icon{animation:.7s linear infinite spin}.app-footer{text-align:center;color:var(--text-muted);padding:8px 0 4px;font-size:.65rem;line-height:1.6}@media (min-width:640px){.app-container{padding:14px 16px 48px}.detail-grid{grid-template-columns:repeat(3,1fr)}}