:root{--ink:#172b4d;--muted:#718096;--blue:#2864dc;--blue-dark:#1749ae;--bg:#f5f7fb;--line:#e6ebf2;--green:#16845b;--orange:#b96b13;--red:#b42318;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-app,Inter),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1160px)/2));gap:20px}.brand{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}.brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e6efff;color:var(--blue);font-size:25px}.top-user{display:flex;align-items:center;gap:18px;font-weight:600}.logout,.text-link{color:var(--blue);text-decoration:none;font-weight:700}.container{max-width:1160px;margin:0 auto;padding:34px 22px 50px;min-height:calc(100vh - 125px)}.footer{text-align:center;color:#8a96a8;padding:18px;font-size:12px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.page-heading h1{font-size:clamp(25px,3vw,34px);letter-spacing:-.8px;margin:5px 0}.page-heading p{margin:0}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:var(--blue)}.muted{color:var(--muted)}.small,small{font-size:12px}.balance-card{border-radius:24px;background:linear-gradient(120deg,#225bd2,#4389f5);padding:30px 34px;color:white;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;box-shadow:0 12px 30px #2e65d522}.balance-card p{margin:0 0 5px;color:#e1eaff}.balance-amount{font-size:clamp(32px,5vw,46px);font-weight:850;letter-spacing:-1.3px}.balance-note{display:inline-block;margin-top:8px;font-size:13px;color:#e0eaff}.balance-illustration{font-size:80px;opacity:.9;position:relative;transform:rotate(-8deg);padding-right:18px}.balance-illustration span{font-size:22px;position:absolute;right:0;top:0}.compact{margin-bottom:20px;padding:22px 30px}.compact .balance-amount{font-size:34px}.stats-grid,.admin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}.stat-card,.metric-card,.panel,.child-card{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 12px #14294b05}.stat-card{padding:20px;position:relative}.stat-card p{margin:9px 0 3px;color:var(--muted);font-size:13px}.stat-card strong{font-size:23px;letter-spacing:-.4px}.stat-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;font-size:22px;font-weight:800}.green{background:#e2f7ed;color:var(--green)}.orange{background:#fff1dd;color:var(--orange)}.panel{padding:24px;margin-top:20px}.panel h2{margin:0;font-size:19px;letter-spacing:-.3px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-heading p{font-size:13px;margin:4px 0 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.form-grid label,.stack-form label,.login-card label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}.form-action{display:flex;align-items:end}.stack-form{display:grid;gap:17px}.stack-form label small{font-weight:400;color:var(--muted)}input{font:inherit;width:100%;border:1px solid #d8e0ec;border-radius:10px;padding:12px 13px;background:#fff;color:var(--ink);outline:none;min-width:0}input:focus{border-color:#6491ed;box-shadow:0 0 0 3px #2864dc17}input:disabled{background:#f0f2f5}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 16px;font:inherit;font-size:13px;font-weight:750;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s,background .12s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dark)}.btn-light{background:#edf2fa;color:#304361}.btn-danger{background:#ffebe9;color:#a1241b}.btn-sm{padding:8px 10px;font-size:12px}.btn-block{width:100%}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px;white-space:normal}th{text-align:left;color:#718096;font-size:11px;text-transform:uppercase;letter-spacing:.6px;background:#f8faff}th,td{padding:13px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}tbody tr:last-child td{border-bottom:0}.right{text-align:right;white-space:nowrap}.amount-in{color:var(--green);font-weight:750;white-space:nowrap}.amount-out{color:var(--orange);font-weight:750;white-space:nowrap}.pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:99px;font-size:11px;font-weight:750;white-space:nowrap}.pill-success{background:#e4f7ed;color:#17764f}.pill-warn{background:#fff0d8;color:#9a5b0a}.pill-muted{background:#eef1f5;color:#5f6b7a}.empty-state,.empty-cell{text-align:center;color:var(--muted);padding:30px 15px}.pending-list{margin-top:18px;padding:14px;background:#fff8e9;border-radius:12px;font-size:13px}.pending-list p{margin:8px 0 0}.admin-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 20px}.metric-card{padding:20px;display:flex;flex-direction:column;gap:5px}.metric-card span,.metric-card small{color:var(--muted);font-size:12px}.metric-card strong{font-size:26px;letter-spacing:-.7px;overflow-wrap:anywhere}.metric-card a{color:var(--blue);text-decoration:none;font-size:12px;font-weight:700;margin-top:4px}.child-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.child-card{padding:20px}.child-card-top{display:flex;justify-content:space-between;align-items:center}.avatar{width:46px;height:46px;border-radius:16px;background:#e8efff;display:grid;place-items:center;font-size:24px}.child-avatar{background:#e2f7ed}.child-card h3{margin:13px 0 0;font-size:18px}.child-card>p{margin:1px 0 15px;font-size:12px}.child-balance{display:block;font-size:25px;margin-top:2px}.child-actions,.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.child-actions{margin-top:17px}.inline-actions form{display:inline-flex}.deposit-summary{padding:18px;background:#edf4ff;border-radius:12px;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px}.deposit-summary span{color:#42618f}.deposit-summary strong{font-size:24px}.narrow{max-width:680px}.alert{padding:12px 15px;border-radius:10px;margin:0 0 18px;font-size:13px}.alert-error{background:#ffebe9;color:#a1241b;border:1px solid #ffd0cc}.alert-success{background:#e5f7ec;color:#176d49}.login-wrap{max-width:970px;margin:35px auto;display:grid;grid-template-columns:1fr 1fr;background:white;border-radius:24px;overflow:hidden;box-shadow:0 18px 55px #1d365314;border:1px solid var(--line)}.login-art{padding:42px;background:linear-gradient(145deg,#e7f0ff,#f4f8ff);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.piggy{font-size:88px;margin-bottom:15px}.login-art h1{font-size:35px;line-height:1.15;letter-spacing:-1.2px;margin:8px 0 13px}.login-art>p:last-child{color:#5f7190;max-width:340px}.login-card{padding:42px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:26px;letter-spacing:-.6px;margin:8px 0 0}.login-card>p{margin:5px 0 24px;font-size:13px}.login-card form{display:grid;gap:17px}.login-card .btn{margin-top:4px}.login-card .small{margin:17px 0 0}.reset-box{margin-top:8px;font-size:12px}.reset-box summary{cursor:pointer;color:var(--blue);font-weight:700}.reset-form{display:flex;gap:6px;margin-top:8px;max-width:300px}.reset-form input{padding:8px;font-size:12px}.reset-form button{flex-shrink:0}@media(max-width:700px){.topbar{height:62px;padding:0 16px}.brand{font-size:17px}.top-user{font-size:12px;gap:10px}.container{padding:24px 14px 35px}.page-heading{align-items:flex-start}.page-heading .btn{font-size:11px;padding:9px}.page-heading h1{font-size:25px}.balance-card{padding:23px 20px;border-radius:19px}.balance-illustration{font-size:55px;padding-right:3px}.balance-amount{font-size:34px}.stats-grid{gap:10px}.stat-card{padding:15px}.stat-card strong{font-size:18px}.panel{padding:17px;margin-top:15px}.form-grid{grid-template-columns:1fr}.form-action{align-items:stretch}.form-action .btn{width:100%}.admin-stats{grid-template-columns:1fr;gap:10px}.metric-card{padding:15px}.metric-card strong{font-size:23px}.child-grid{grid-template-columns:1fr}.login-wrap{margin:10px auto;grid-template-columns:1fr}.login-art{padding:25px}.login-art h1{font-size:28px}.piggy{font-size:55px;margin-bottom:5px}.login-card{padding:26px}.panel-heading{align-items:flex-start}th,td{padding:11px 9px}.deposit-summary strong{font-size:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Branding, profil, preloader, pengaturan, log, dan buku tabungan */
.app-preloader{position:fixed;inset:0;z-index:9999;background:rgba(247,249,253,.97);display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,visibility .35s ease}.app-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.preloader-card{display:flex;align-items:center;flex-direction:column;gap:12px;padding:30px;text-align:center;color:var(--ink)}.preloader-card>span{font-size:13px;color:var(--muted)}.preloader-logo{width:76px;height:76px;object-fit:contain;border-radius:20px}.fallback-logo{display:grid;place-items:center;background:#e8efff;font-size:45px}.spinner{width:27px;height:27px;border:3px solid #dbe6fb;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}.preloader-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 8px 28px #173d7620}.preloader-avatar.fallback{display:grid;place-items:center;background:#dceafe;color:var(--blue);font-size:34px;font-weight:800}.profile-preloader .spinner{margin-top:4px}@keyframes spin{to{transform:rotate(360deg)}}.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}.top-profile{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}.top-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.avatar-fallback{display:grid;place-items:center;background:#e2efff;color:var(--blue);font-weight:800}.avatar-img{width:48px;height:48px;object-fit:cover;border-radius:16px}.profile-avatar-large{width:58px;height:58px;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 16px #173d7615}.profile-layout{display:grid;grid-template-columns:260px 1fr;gap:20px}.profile-preview{display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px}.profile-preview img{width:130px;height:130px;object-fit:cover;border-radius:50%;border:5px solid #f0f5ff}.profile-preview .fallback{width:130px;height:130px;border-radius:50%;font-size:48px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-grid label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:13px}.settings-grid input,.settings-grid select{font:inherit;border:1px solid #d8e0ec;border-radius:10px;padding:12px;background:white}.settings-preview{padding:18px;background:#f7f9fd;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:15px}.settings-preview img{max-width:110px;max-height:65px;object-fit:contain}.photo-mini-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:9px;max-width:260px}.photo-mini-form input{max-width:180px;font-size:11px;padding:7px}.profile-form{display:grid;gap:15px}.profile-form label{display:grid;gap:7px;font-weight:700;font-size:13px}.profile-form input{font:inherit;border:1px solid #d8e0ec;border-radius:10px;padding:12px}.passbook{max-width:980px;margin:0 auto;background:white;border:1px solid #d9e0ea;padding:30px;border-radius:8px}.passbook-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #263b5c;padding-bottom:18px;margin-bottom:18px;gap:20px}.passbook-head img{max-width:90px;max-height:70px;object-fit:contain}.passbook-title{text-align:center;flex:1}.passbook-title h1{font-size:24px;margin:0}.passbook-title p{margin:4px 0;color:#64748b;font-size:12px}.passbook-info{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:18px 0}.passbook-total{display:flex;justify-content:space-between;background:#f0f5ff;padding:15px;border-radius:8px;font-weight:800;margin:18px 0}.print-only{display:none}.action-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:16px}.activity-detail{max-width:340px;overflow-wrap:anywhere;font-size:12px}.activity-meta{font-size:11px;color:var(--muted)}@media(max-width:700px){.profile-layout,.settings-grid{grid-template-columns:1fr}.top-profile span:not(.top-avatar){display:none}.passbook{padding:15px}.passbook-head{align-items:flex-start}.passbook-title h1{font-size:18px}.passbook-info{grid-template-columns:1fr}.photo-mini-form input{max-width:145px}}@media print{@page{size:A5 portrait;margin:10mm}body{background:white!important;color:#111!important;font-size:11px}.topbar,.footer,.container>.page-heading,.action-toolbar,.app-preloader{display:none!important}.container{padding:0!important;margin:0!important;max-width:none!important;min-height:0!important}.passbook{border:0;padding:0;max-width:none}.print-only{display:block}.passbook table{font-size:10px}.passbook th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.passbook td,.passbook th{padding:7px 5px;border:1px solid #bbb}.passbook-total{border:1px solid #aaa;background:#f4f4f4!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.no-print{display:none!important}}

/* Branding logo TabunganKu */
.login-brand-logo{display:block;width:min(100%,340px);height:auto;max-height:260px;object-fit:contain;object-position:left center;margin:0 0 18px}.brand-logo{width:42px;height:42px;object-fit:contain;border-radius:8px}.preloader-logo{width:150px;height:150px;object-fit:contain;border-radius:0;background:transparent}.login-art{min-width:0}
@media(max-width:700px){.login-brand-logo{width:210px;max-height:150px;margin-bottom:12px}}