*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--c-bg: #f5f5f5;--c-surface: #fff;--c-primary: #4f46e5;--c-primary-light: #818cf8;--c-text: #1e1e1e;--c-text-dim: #666;--c-border: #e5e7eb;--c-success: #10b981;--c-warning: #f59e0b;--c-danger: #ef4444;--c-radius: 12px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html{font-size:15px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;min-height:100dvh}.app-shell{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}.top-bar{position:sticky;top:0;z-index:50;background:var(--c-primary);color:#fff;padding:calc(8px + var(--safe-top)) 16px 8px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px #00000026}.top-bar h1{font-size:1.1rem;font-weight:600;flex:1}.top-bar button{background:none;border:none;color:#fff;font-size:.9rem;cursor:pointer;padding:4px 8px;opacity:.85}.top-bar button:hover{opacity:1}.topbar-user{color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;padding:4px 8px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}.topbar-user:hover{opacity:1;text-decoration:underline}.page-content{flex:1;padding:16px;padding-bottom:calc(70px + var(--safe-bottom))}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:var(--c-surface);border-top:1px solid var(--c-border);display:flex;padding-bottom:var(--safe-bottom);z-index:100}.nav-item{flex:1;text-align:center;padding:8px 4px;text-decoration:none;color:var(--c-text-dim);font-size:.75rem;transition:color .2s}.nav-item svg{display:block;margin:0 auto 2px}.nav-item.active{color:var(--c-primary)}.card{background:var(--c-surface);border-radius:var(--c-radius);box-shadow:0 1px 3px #00000014;overflow:hidden}.card+.card{margin-top:12px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card{background:var(--c-surface);border-radius:var(--c-radius);padding:16px;text-align:center;box-shadow:0 1px 3px #00000014}.stat-card .num{font-size:1.6rem;font-weight:700;color:var(--c-primary)}.stat-card .label{font-size:.8rem;color:var(--c-text-dim);margin-top:4px}.list{display:flex;flex-direction:column;gap:8px}.list-item{display:flex;align-items:center;gap:12px;background:var(--c-surface);padding:12px;border-radius:var(--c-radius);cursor:pointer;box-shadow:0 1px 2px #0000000f;text-decoration:none;color:var(--c-text);transition:background .15s}.list-item:active{background:#f0f0f0}.avatar{width:44px;height:44px;border-radius:50%;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;flex-shrink:0;overflow:hidden;position:relative}.avatar img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top}.list-item-info{flex:1;min-width:0}.list-item-info .name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item-info .sub{font-size:.8rem;color:var(--c-text-dim);margin-top:2px}.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:600}.badge-primary{background:#eef2ff;color:var(--c-primary)}.badge-success{background:#ecfdf5;color:var(--c-success)}.badge-warning{background:#fffbeb;color:var(--c-warning)}.doc-link{text-decoration:none}.form-group{margin-bottom:14px}.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--c-text-dim)}.form-group input,.form-group select{width:100%;padding:10px 12px;border:1.5px solid var(--c-border);border-radius:8px;font-size:1rem;background:#fff;color:var(--c-text);outline:none;transition:border .2s}.form-group input:focus,.form-group select:focus{border-color:var(--c-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:8px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;width:100%;transition:opacity .2s,background .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--c-primary);color:#fff}.btn-primary:active{background:#4338ca}.btn-danger{background:var(--c-danger);color:#fff}.btn-danger:active{background:#dc2626}.search-bar{position:relative;display:flex;align-items:center;margin-bottom:14px}.search-bar input{width:100%;height:44px;padding:0 12px 0 40px;border:1.5px solid var(--c-border);border-radius:8px;font-size:.95rem;background:#fff;outline:none}.search-bar input:focus{border-color:var(--c-primary)}.search-bar svg{position:absolute;left:12px;top:50%;margin-top:-9px;width:18px;height:18px;flex-shrink:0;color:var(--c-text-dim);pointer-events:none}.filter-row{display:flex;gap:8px;margin-bottom:14px}.filter-row select{flex:1;padding:8px 10px;border:1.5px solid var(--c-border);border-radius:8px;font-size:.85rem;background:#fff;outline:none}.filter-row select:focus{border-color:var(--c-primary)}.rekap-group{margin-bottom:12px}.rekap-group-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--c-border)}.group-label{font-weight:700;font-size:.9rem}.group-total{font-size:.75rem;color:var(--c-text-dim)}.rekap-row{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;transition:background .15s}.rekap-row:active{background:#f0f0f0}.rekap-row+.rekap-row{border-top:1px solid var(--c-border)}.r-nama{flex:1;font-weight:600;font-size:.9rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.r-total{font-weight:700;color:var(--c-primary)}.r-col{font-size:.78rem;font-weight:600;min-width:34px;text-align:center}.r-l{color:var(--c-primary)}.r-p{color:var(--c-danger)}.r-arrow{color:var(--c-text-dim);opacity:.6}.detail-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.detail-avatar{width:72px;height:72px;border-radius:50%;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0;overflow:hidden;position:relative}.detail-avatar img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top}.detail-name{font-size:1.2rem;font-weight:700}.detail-sub{font-size:.85rem;color:var(--c-text-dim);margin-top:2px}.section-title{font-size:.85rem;font-weight:700;color:var(--c-primary);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.info-item .label{font-size:.75rem;color:var(--c-text-dim)}.info-item .value{font-size:.9rem;font-weight:600;margin-top:1px;word-break:break-word}.info-item.full{grid-column:1 / -1}.empty{text-align:center;padding:40px 20px;color:var(--c-text-dim)}.empty svg{margin-bottom:12px;opacity:.4}.error-msg{color:var(--c-danger);font-size:.85rem;margin-bottom:12px;text-align:center}.pw-ok{color:var(--c-success);font-size:.85rem;margin-bottom:12px;text-align:center}.about-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:.9rem}.about-row+.about-row{border-top:1px solid var(--c-border)}.about-row span:first-child{color:var(--c-text-dim)}.about-row span:last-child{font-weight:600}.stack-list{list-style:none;display:flex;flex-direction:column;gap:6px}.stack-list li{font-size:.85rem;padding:8px 12px;background:#f9fafb;border:1px solid var(--c-border);border-radius:8px}.stack-list li:before{content:"• ";color:var(--c-primary);font-weight:700}.spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--c-border);border-top-color:var(--c-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading{text-align:center;padding:40px}.detail-avatar.clickable{cursor:pointer;transition:transform .2s}.detail-avatar.clickable:active{transform:scale(.92)}.photo-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000000eb;display:flex;align-items:center;justify-content:center}.photo-close{position:absolute;top:calc(16px + var(--safe-top));right:16px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;cursor:pointer;z-index:10001;padding:0;border-radius:50%;line-height:0;background:#ffffff1f;transition:background .2s}.photo-close:hover{background:#ffffff40}.photo-overlay-inner{max-width:92vw;max-height:85vh;display:flex;align-items:center;justify-content:center}.photo-overlay-inner img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 30px #0006}.photo-enter-active{transition:opacity .25s ease}.photo-leave-active{transition:opacity .2s ease}.photo-enter-from,.photo-leave-to{opacity:0}