:root{
  --primary:#175cd3;
  --primary-2:#0f4fbe;
  --primary-soft:#eaf2ff;
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#182230;
  --muted:#667085;
  --line:#e6eaf0;
  --success:#087443;
  --success-soft:#eaf8ef;
  --danger:#b42318;
  --danger-soft:#fff1f1;
  --shadow:0 10px 30px rgba(16,24,40,.06);
  --radius:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}

.container{width:min(1180px,calc(100% - 32px));margin:auto;padding:26px 0 34px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.brand-line{display:flex;align-items:center;gap:9px}.brand-mark{font-size:27px;line-height:1}.topbar h1{font-size:25px;letter-spacing:-.35px;margin:0}.topbar p{margin:5px 0 0;color:var(--muted);font-size:14px}
.user-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.user-actions form{margin:0}.user-chip{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 10px rgba(16,24,40,.03)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{padding:17px;display:flex;align-items:center;gap:13px;min-width:0;overflow:hidden}.stat-icon{width:38px;height:38px;flex:0 0 38px;border-radius:13px;display:grid;place-items:center;background:#f1f4f8;color:#667085;font-weight:800}.stat>div:last-child{min-width:0}.stat small{display:block;color:#737c8c;margin-bottom:4px;font-size:12px}.stat strong{display:block;font-size:21px;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.balance-stat{background:linear-gradient(135deg,#1d63d8,#124eaf);border-color:transparent;color:#fff;box-shadow:0 14px 30px rgba(23,92,211,.20)}.balance-stat small{color:rgba(255,255,255,.76)}.balance-stat .stat-icon{background:rgba(255,255,255,.15);color:#fff}.income-stat .stat-icon{background:#eaf8ef;color:var(--success)}.expense-stat .stat-icon{background:#fff1f1;color:var(--danger)}.initial-stat .stat-icon{background:#f0f3ff;color:#4758c9}

.grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:18px}.panel{overflow:hidden}.panel-head{min-height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f4;background:rgba(255,255,255,.94)}.panel-head b{font-size:15px}.panel-head>div{display:flex;flex-direction:column;gap:2px}.panel-subtitle{font-size:11px;color:#98a2b3}.offline{font-size:12px;color:#16803c;background:var(--success-soft);padding:5px 10px;border-radius:999px}.badge{background:#f0f2f6;border-radius:999px;padding:4px 9px;font-size:12px;color:#475467}

.chat-card{height:70vh;min-height:560px;display:flex;flex-direction:column}.chat-body{flex:1;overflow:auto;padding:18px;background:linear-gradient(180deg,#fbfcfe,#f8fafc);scroll-behavior:smooth;overscroll-behavior:contain}.bubble{max-width:84%;padding:11px 14px;border-radius:18px;margin:9px 0;line-height:1.45;white-space:pre-wrap;font-size:14px;word-break:break-word}.bubble.user{margin-left:auto;background:linear-gradient(135deg,#2166d8,#1758c6);color:#fff;border-bottom-right-radius:6px;box-shadow:0 5px 15px rgba(23,92,211,.15)}.bubble.assistant{background:#eef2f7;border-bottom-left-radius:6px;color:#263243}
.chat-foot{padding:13px 14px 12px;border-top:1px solid #edf0f4;background:#fff}.chat-foot form{display:flex;align-items:center;gap:9px;background:#f6f8fb;border:1px solid #e3e8f0;border-radius:15px;padding:5px 5px 5px 12px;transition:.2s}.chat-foot form:focus-within{background:#fff;border-color:#9fbdf2;box-shadow:0 0 0 4px rgba(23,92,211,.08)}.chat-foot input{width:100%;min-width:0;border:0;background:transparent;padding:8px 2px;font-size:15px;outline:none;color:var(--text)}.chat-foot input::placeholder{color:#98a2b3}.chat-foot small{display:block;color:#7a8494;margin-top:8px;font-size:11px}.send-btn{min-width:76px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:5px}.send-icon{display:none}

.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .08s,opacity .15s,box-shadow .15s}.btn:active{transform:scale(.97)}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(23,92,211,.16)}.btn.secondary{background:#fff;color:#273142;border:1px solid #dce1e9}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.danger-soft{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid #ffd5d5!important;box-shadow:none!important}

.tx-list{max-height:calc(70vh - 58px);overflow:auto;overscroll-behavior:contain}.tx{padding:14px 15px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #edf0f4}.tx:last-child{border-bottom:0}.tx-main{display:flex;align-items:center;gap:11px;min-width:0;flex:1}.tx-icon{width:40px;height:40px;flex:0 0 40px;border-radius:13px;display:grid;place-items:center;background:#f4f6f9;font-size:18px}.tx-info{min-width:0}.tx-info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx p{font-size:11px;color:#8a94a5;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.tx-right{text-align:right;white-space:nowrap}.tx-right b{font-size:14px}.tx-right button{display:block;margin:5px 0 0 auto;border:0;background:none;color:#c03345;cursor:pointer;font-size:11px;padding:2px}.expense{color:var(--danger)}.income{color:var(--success)}.empty{text-align:center;color:#98a2b3;padding:52px 12px;font-size:13px}

/* Modal */
dialog{border:0;padding:0;border-radius:20px;width:min(470px,calc(100% - 28px));box-shadow:0 24px 80px rgba(0,0,0,.24);background:#fff}dialog::backdrop{background:rgba(20,28,40,.5);backdrop-filter:blur(2px)}.modal-card{padding:20px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h3{margin:0}.icon-btn{border:0;background:#f3f5f8;width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}.modal-card label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.modal-card input{width:100%;border:1px solid #d9dee8;border-radius:12px;padding:12px 13px;font-size:16px;outline:none}.modal-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,92,211,.10)}.muted{font-size:13px;color:#778191}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Multi-user authentication */
.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 20% 5%,#e9f1ff 0,transparent 35%),linear-gradient(145deg,#f7f9fc,#eef3fb)}.auth-card{width:min(430px,100%);background:rgba(255,255,255,.96);border:1px solid #e6eaf1;border-radius:26px;padding:34px;box-shadow:0 22px 70px rgba(28,46,80,.12)}.auth-brand{text-align:center;margin-bottom:26px}.auth-logo{font-size:42px}.auth-brand h1{margin:8px 0 6px;letter-spacing:-.4px}.auth-brand p{margin:0;color:#667085}.auth-card h2{margin:8px 0}.auth-form{display:grid;gap:10px}.auth-form label{font-size:13px;font-weight:700;color:#475467;margin-top:5px}.auth-form input{width:100%;border:1px solid #d0d5dd;border-radius:13px;padding:13px 14px;font-size:16px;outline:none;background:#fff}.auth-form input:focus{border-color:#2463d4;box-shadow:0 0 0 3px rgba(36,99,212,.12)}.wide{width:100%;margin-top:8px}.auth-switch{text-align:center;color:#667085;margin:20px 0 0}.auth-switch a,.link-button{color:#1f5fd0;font-weight:700;text-decoration:none}.alert.error{background:#fff1f1;border:1px solid #ffd2d2;color:#b42318;padding:11px 13px;border-radius:11px;margin:14px 0}.center{text-align:center}.avatar{width:58px;height:58px;border-radius:50%;display:inline-grid;place-items:center;background:#e7efff;color:#1f5fd0;font-weight:800;font-size:22px}.avatar.small{width:32px;height:32px;font-size:14px}.pin-input{letter-spacing:8px;font-size:24px!important;font-weight:700}.pin-center{text-align:center}.logout-under{margin-top:17px}.link-button{background:none;border:0;cursor:pointer;font-size:14px}.pin-card{max-width:390px}

/* Mobile app navigation */
.mobile-bottom-nav{display:none}

@media(max-width:900px){
  .stats{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.chat-card{height:62vh;min-height:500px}.tx-list{max-height:none}
}

@media(max-width:760px){
  body{background:#f3f6fb}
  .container{width:100%;padding:12px 12px calc(92px + env(safe-area-inset-bottom))}
  .topbar{margin:0 2px 13px;align-items:center}.brand-line{gap:7px}.brand-mark{font-size:22px}.topbar h1{font-size:19px}.topbar p{display:none}
  .user-actions{margin-left:auto;gap:7px;flex-wrap:nowrap}.user-chip{padding:4px 8px 4px 4px;font-size:13px}.avatar.small{width:30px;height:30px}.user-actions #openSetting{display:none}.danger-soft{width:38px;height:38px;padding:0!important;font-size:0;border-radius:50%!important}.danger-soft::before{content:'↪';font-size:19px;font-weight:800}

  .stats{display:flex;gap:10px;overflow-x:auto;margin:0 -12px 13px;padding:0 12px 3px;scroll-snap-type:x proximity;scrollbar-width:none}.stats::-webkit-scrollbar{display:none}.stat{scroll-snap-align:start;flex:0 0 154px;padding:14px 13px;border-radius:18px;gap:10px;box-shadow:0 6px 18px rgba(16,24,40,.045)}.balance-stat{flex-basis:240px}.stat-icon{width:34px;height:34px;flex-basis:34px;border-radius:11px}.stat strong{font-size:17px}.balance-stat strong{font-size:20px}.stat small{font-size:11px}

  .grid{display:block}.mobile-view{display:none}.mobile-view.active{display:flex}.transactions-panel.mobile-view.active{display:block}
  .panel{border-radius:22px;box-shadow:0 8px 25px rgba(16,24,40,.055)}.panel-head{min-height:55px;padding:0 15px}.panel-head b{font-size:14px}.offline{font-size:11px;padding:4px 8px}
  .chat-card{height:calc(100dvh - 238px);min-height:430px;max-height:none}.chat-body{padding:14px 12px}.bubble{max-width:88%;padding:10px 13px;font-size:14px;border-radius:18px;margin:8px 0}.bubble.user{border-bottom-right-radius:5px}.bubble.assistant{border-bottom-left-radius:5px}
  .chat-foot{padding:10px 10px calc(9px + env(safe-area-inset-bottom)/5);background:rgba(255,255,255,.97)}.chat-foot form{border-radius:18px;padding:5px 5px 5px 12px}.chat-foot input{font-size:16px;padding:8px 1px}.chat-foot small{display:none}.send-btn{min-width:44px;width:44px;height:44px;border-radius:14px;padding:0}.send-label{display:none}.send-icon{display:block;font-size:16px;transform:translateX(1px)}

  .transactions-panel{height:calc(100dvh - 238px);min-height:430px;overflow:hidden}.transactions-panel .tx-list{height:calc(100% - 55px);max-height:none;overflow:auto;background:#fff}.tx{padding:13px 14px}.tx-icon{width:42px;height:42px;flex-basis:42px;border-radius:14px}.tx-info b{font-size:14px}.tx p{max-width:170px}.tx-right b{font-size:14px}

  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;z-index:50;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 22px));padding:7px;background:rgba(255,255,255,.92);border:1px solid rgba(222,228,238,.9);border-radius:23px;box-shadow:0 16px 45px rgba(16,24,40,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:.22s ease}.mobile-nav-item{position:relative;border:0;background:transparent;color:#7b8492;border-radius:17px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:700;cursor:pointer}.mobile-nav-item.active{background:#edf4ff;color:var(--primary)}.nav-icon{font-size:18px;line-height:1}.nav-count{position:absolute;top:5px;left:calc(50% + 10px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#e9edf3;color:#4b5563;font-size:9px;display:grid;place-items:center}.mobile-nav-item.active .nav-count{background:#d5e4ff;color:#104cad}.composer-focus .mobile-bottom-nav{transform:translate(-50%,135%);opacity:0;pointer-events:none}

  dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0;position:fixed;inset:auto 0 0;max-height:85dvh}.modal-card{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}.modal-actions .btn{flex:1}
}

@media(max-width:520px){
  .auth-shell{padding:16px}.auth-card{padding:26px 20px;border-radius:24px}.auth-brand{margin-bottom:22px}.auth-brand h1{font-size:24px}.auth-card h2{font-size:20px}.auth-form input{min-height:48px}
  .brand-line h1{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-chip b{max-width:75px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media(max-width:380px){
  .container{padding-left:9px;padding-right:9px}.stats{margin-left:-9px;margin-right:-9px;padding-left:9px;padding-right:9px}.balance-stat{flex-basis:210px}.stat{flex-basis:145px}.topbar h1{font-size:17px}.brand-mark{font-size:20px}.user-chip b{display:none}.user-chip{padding-right:4px}
  .chat-card,.transactions-panel{height:calc(100dvh - 230px);min-height:400px}
}

/* ===== MOBILE UI V2 ===== */
@media (max-width:760px){
  :root{--mobile-nav-h:72px}
  html,body{background:#f4f7fb}
  body{overflow-x:hidden;padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom))}
  .container{width:100%;padding:10px 12px 12px}

  .topbar{height:48px;margin:0 2px 10px;gap:10px;align-items:center}
  .brand-line{gap:7px}.brand-mark{font-size:21px}.topbar h1{font-size:18px;letter-spacing:-.35px}.topbar p{display:none}
  .user-actions{margin-left:auto;gap:6px;flex-wrap:nowrap}
  .user-chip{height:40px;padding:4px 9px 4px 4px;font-size:12px;background:#fff}
  .avatar.small{width:30px;height:30px}
  .user-actions #openSetting{display:none}
  .danger-soft{width:40px!important;height:40px!important;padding:0!important;font-size:0!important;border-radius:14px!important}
  .danger-soft::before{content:'↪';font-size:18px;font-weight:800}

  .stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0 0 10px!important;padding:0!important;overflow:visible!important}
  .stat{min-width:0!important;min-height:65px;flex:none!important;border-radius:17px!important;padding:10px!important;display:block!important;box-shadow:0 5px 16px rgba(31,45,70,.045)!important}
  .stat-icon{display:none!important}
  .stat small{font-size:10px!important;margin:0 0 4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat strong{font-size:13px!important;line-height:1.2;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .balance-stat{grid-column:1/-1!important;min-height:88px!important;padding:16px 17px!important;display:flex!important;align-items:center!important;background:linear-gradient(135deg,#316fe0 0%,#174fb7 100%)!important;border-radius:21px!important;box-shadow:0 13px 28px rgba(31,92,201,.20)!important}
  .balance-stat small{font-size:11px!important;color:rgba(255,255,255,.76)!important;margin-bottom:6px!important}
  .balance-stat strong{font-size:28px!important;letter-spacing:-.7px!important;color:#fff!important;overflow:visible!important}
  .income-stat,.expense-stat,.initial-stat{background:#fff!important}
  .income-stat strong{color:#11834f!important}.expense-stat strong{color:#c73535!important}

  .grid{display:block!important}
  .mobile-view{display:none!important}
  .mobile-view.active{display:flex!important}
  .transactions-panel.mobile-view.active{display:flex!important;flex-direction:column!important}

  .panel{border-radius:20px!important;border:1px solid #e5eaf1!important;box-shadow:0 7px 22px rgba(31,45,70,.055)!important}
  .panel-head{height:50px!important;min-height:50px!important;padding:0 14px!important;background:#fff!important}
  .panel-head b{font-size:14px!important}.panel-subtitle{display:none!important}.offline{font-size:10px!important;padding:4px 8px!important}

  .chat-card,.transactions-panel{height:calc(100dvh - 292px)!important;min-height:390px!important;max-height:650px!important;overflow:hidden!important}
  .chat-body{padding:12px 11px 16px!important;background:#f8fafc!important;min-height:0!important}
  .bubble{max-width:88%!important;padding:10px 12px!important;border-radius:17px!important;font-size:14px!important;line-height:1.43!important;margin:7px 0!important}
  .bubble.user{border-bottom-right-radius:5px!important;box-shadow:none!important}.bubble.assistant{background:#eef2f7!important;border-bottom-left-radius:5px!important}

  .chat-foot{padding:9px 9px 10px!important;background:#fff!important;border-top:1px solid #e9edf3!important}
  .chat-foot form{height:50px!important;border-radius:16px!important;padding:4px 4px 4px 13px!important;gap:5px!important;background:#f7f9fc!important}
  .chat-foot input{font-size:16px!important;padding:8px 0!important}
  .chat-foot small{display:none!important}
  .send-btn{flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:42px!important;border-radius:13px!important;padding:0!important;box-shadow:none!important}
  .send-label{display:none!important}.send-icon{display:block!important;font-size:16px!important;transform:translateX(1px)}

  .transactions-panel .tx-list{flex:1!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:auto!important;background:#fff!important}
  .tx{padding:13px 14px!important;gap:10px!important}
  .tx-main{gap:10px!important}.tx-icon{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important;font-size:17px!important}
  .tx-info b{font-size:13px!important}.tx p{font-size:10px!important;max-width:150px!important}.tx-right b{font-size:13px!important}.tx-right button{font-size:10px!important;margin-top:4px!important}
  .empty{padding:70px 15px!important}

  .mobile-bottom-nav{display:grid!important;grid-template-columns:repeat(3,1fr)!important;position:fixed!important;z-index:1000!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:var(--mobile-nav-h)!important;padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;border:0!important;border-top:1px solid #dde3ec!important;border-radius:0!important;box-shadow:0 -10px 30px rgba(31,45,70,.07)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform:none!important}
  .mobile-bottom-nav button.mobile-nav-item{appearance:none!important;-webkit-appearance:none!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;margin:0!important;padding:4px!important;position:relative!important;min-width:0!important;min-height:56px!important;border-radius:14px!important;color:#7c8799!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;font-size:10px!important;line-height:1!important;font-weight:700!important;cursor:pointer!important}
  .mobile-bottom-nav button.mobile-nav-item.active{color:#2563d9!important;background:#edf4ff!important}
  .nav-icon{width:22px!important;height:22px!important;display:grid!important;place-items:center!important;font-size:0!important}
  .nav-icon svg{display:block!important;width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .nav-count{position:absolute!important;top:3px!important;left:calc(50% + 8px)!important;min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:999px!important;background:#e9edf4!important;color:#5c6678!important;font-size:9px!important;display:grid!important;place-items:center!important;border:2px solid #fff!important}
  .mobile-nav-item.active .nav-count{background:#cfe0ff!important;color:#174fb7!important}
  .composer-focus .mobile-bottom-nav{transform:translateY(110%)!important;opacity:0!important;pointer-events:none!important;transition:.18s ease!important}

  dialog{width:100%!important;max-width:none!important;margin:auto 0 0!important;border-radius:24px 24px 0 0!important;position:fixed!important;inset:auto 0 0!important;max-height:85dvh!important}
  .modal-card{padding:20px 18px calc(20px + env(safe-area-inset-bottom))!important}.modal-actions .btn{flex:1!important;min-height:46px!important}
}

@media (max-width:390px){
  .container{padding-left:9px!important;padding-right:9px!important}.topbar{margin-left:1px!important;margin-right:1px!important}.topbar h1{font-size:17px!important}.brand-mark{font-size:20px!important}.user-chip b{display:none!important}.user-chip{padding-right:4px!important}
  .stats{gap:6px!important}.stat{padding:9px 8px!important}.stat strong{font-size:12px!important}.balance-stat{padding:15px!important}.balance-stat strong{font-size:25px!important}
  .chat-card,.transactions-panel{height:calc(100dvh - 282px)!important;min-height:365px!important}
}

@media (max-height:700px) and (max-width:760px){
  .balance-stat{min-height:72px!important;padding:12px 15px!important}.balance-stat strong{font-size:24px!important}.income-stat,.expense-stat,.initial-stat{min-height:58px!important}.stat{padding:8px!important}.topbar{height:43px!important;margin-bottom:7px!important}.stats{margin-bottom:7px!important}.chat-card,.transactions-panel{height:calc(100dvh - 258px)!important;min-height:340px!important}
}

/* ===== Batas & peringatan pengeluaran harian ===== */
.daily-budget-card{margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:.2s ease}
.daily-budget-card.is-hidden{display:none}
.daily-budget-main{display:flex;align-items:center;gap:13px;padding:14px 16px}
.daily-budget-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:900;background:#edf8f1;color:#087443}
.daily-budget-copy{flex:1;min-width:0}
.daily-budget-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.daily-budget-title-row b{font-size:13px}
.daily-budget-status{font-size:10px;font-weight:800;border-radius:999px;padding:3px 7px;background:#edf8f1;color:#087443}
.daily-budget-values{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:12px;color:#7a8494}
.daily-budget-values strong{font-size:16px;color:#182230}.daily-budget-remaining{margin-left:auto;font-weight:700;color:#667085}
.daily-budget-progress{height:6px;background:#edf0f4;border-radius:999px;overflow:hidden;margin:8px 0 5px}
.daily-budget-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#18a566;transition:width .3s ease}
.daily-budget-copy>small{display:block;color:#7c8798;font-size:11px}
.budget-edit-btn{border:0;background:#f2f5f9;color:#475467;border-radius:10px;padding:8px 10px;font-weight:800;font-size:11px;cursor:pointer}

.daily-budget-card.status-warning{border-color:#f5d58c;background:#fffdf7}.daily-budget-card.status-warning .daily-budget-icon{background:#fff3cd;color:#9a6700}.daily-budget-card.status-warning .daily-budget-status{background:#fff3cd;color:#8a5b00}.daily-budget-card.status-warning .daily-budget-progress span{background:#e9a400}
.daily-budget-card.status-reached{border-color:#f7b7a7;background:#fff9f7}.daily-budget-card.status-reached .daily-budget-icon{background:#ffebe5;color:#b9381f}.daily-budget-card.status-reached .daily-budget-status{background:#ffebe5;color:#a52b17}.daily-budget-card.status-reached .daily-budget-progress span{background:#e25b3e}
.daily-budget-card.status-exceeded{border-color:#f2aaaa;background:#fff7f7}.daily-budget-card.status-exceeded .daily-budget-icon{background:#ffe4e4;color:#b42318}.daily-budget-card.status-exceeded .daily-budget-status{background:#ffe4e4;color:#b42318}.daily-budget-card.status-exceeded .daily-budget-progress span{background:#d92d20}.daily-budget-card.status-exceeded .daily-budget-remaining{color:#b42318}

#openBudget.budget-warning{border-color:#edca74;background:#fff8df;color:#8a5b00}
#openBudget.budget-reached,#openBudget.budget-exceeded{border-color:#f4b2ad;background:#fff0ef;color:#b42318}

#budgetModal{width:min(650px,calc(100% - 28px))}
.budget-modal-card{max-height:min(86vh,760px);overflow:auto}
.modal-subtitle{margin:4px 0 0;color:#7b8493;font-size:12px}
.budget-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid #e5e9f0;border-radius:14px;background:#f9fbfd;margin-bottom:12px}
.budget-toggle-row b{display:block;font-size:13px}.budget-toggle-row small{display:block;color:#7d8796;font-size:11px;margin-top:2px}
.switch{position:relative;display:inline-flex;flex:0 0 45px;width:45px;height:26px}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;inset:0;border-radius:999px;background:#cfd5de;cursor:pointer;transition:.2s}.switch-slider:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.switch input:checked+.switch-slider{background:var(--primary)}.switch input:checked+.switch-slider:before{transform:translateX(19px)}
.warning-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.warning-setting label{margin:0}.warning-percent-input{display:flex;align-items:center;border:1px solid #d9dee8;border-radius:11px;background:#fff;overflow:hidden}.warning-percent-input input{width:72px!important;border:0!important;border-radius:0!important;text-align:right;padding:9px 5px 9px 10px!important;box-shadow:none!important}.warning-percent-input span{padding-right:10px;font-weight:800;color:#596273}
.budget-quick-actions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.chip-btn{border:1px solid #dce2ea;background:#fff;color:#435064;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer}.chip-btn:active{background:#eef4ff;color:#175cd3}
.budget-bulk{display:flex;align-items:end;justify-content:space-between;gap:14px;background:#f7f9fc;border:1px solid #e7ebf1;border-radius:14px;padding:11px 12px;margin:10px 0 12px}.budget-bulk label{margin:0!important}.budget-bulk small{display:block;color:#8b95a5;font-size:10px;margin-top:2px}.budget-bulk-action{display:flex;gap:7px}.budget-bulk-action input{width:130px!important;padding:9px 10px!important;font-size:14px!important}.budget-bulk-action .btn{padding:9px 11px;font-size:11px}
.day-budget-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.day-budget-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e4e8ef;border-radius:13px;padding:9px 10px;background:#fff;transition:.15s}.day-budget-row.disabled{background:#fafbfc;opacity:.62}.day-check{display:flex!important;align-items:center;gap:7px;margin:0!important;font-size:12px!important;min-width:82px;cursor:pointer}.day-check input{width:17px!important;height:17px!important;padding:0!important;accent-color:var(--primary);box-shadow:none!important}.money-field{display:flex;align-items:center;border:1px solid #dce1e9;border-radius:10px;background:#fff;overflow:hidden;min-width:0}.money-field span{font-size:11px;font-weight:800;color:#6f7888;padding-left:8px}.money-field input{width:105px!important;border:0!important;border-radius:0!important;padding:8px!important;font-size:12px!important;box-shadow:none!important;min-width:0}.money-field input:disabled{background:#f5f6f8;color:#9aa2af}
.budget-legend{display:flex;gap:12px;flex-wrap:wrap;margin:14px 1px 2px;font-size:10px;color:#6f7888}.budget-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;background:#18a566}.legend-dot.warning{background:#e9a400}.legend-dot.reached{background:#e25b3e}.legend-dot.exceeded{background:#d92d20}
.budget-nav-alert{position:absolute;top:2px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e9a400;color:#fff;font-size:9px;display:grid;place-items:center;border:2px solid #fff;font-weight:900}.budget-nav-alert.reached,.budget-nav-alert.exceeded{background:#d92d20}

@media (max-width:760px){
  .user-actions #openBudget,.user-actions #openSetting{display:none!important}
  .daily-budget-card{margin:0 0 9px!important;border-radius:17px!important;box-shadow:0 5px 16px rgba(31,45,70,.045)!important}
  .daily-budget-main{padding:10px 11px!important;gap:9px!important}.daily-budget-icon{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:11px!important;font-size:15px!important}
  .daily-budget-title-row{margin-bottom:2px!important;gap:6px!important}.daily-budget-title-row b{font-size:11px!important}.daily-budget-status{font-size:9px!important;padding:2px 6px!important}
  .daily-budget-values{font-size:10px!important;gap:4px!important}.daily-budget-values strong{font-size:13px!important}.daily-budget-remaining{font-size:10px!important}
  .daily-budget-progress{height:4px!important;margin:5px 0 0!important}.daily-budget-copy>small{display:none!important}.budget-edit-btn{padding:6px 8px!important;font-size:10px!important;border-radius:9px!important}
  .has-daily-budget .chat-card,.has-daily-budget .transactions-panel{height:calc(100dvh - 365px)!important;min-height:325px!important}
  .mobile-bottom-nav{grid-template-columns:repeat(4,1fr)!important}
  #budgetModal{width:100%!important;max-width:none!important}.budget-modal-card{max-height:88dvh!important;overflow:auto!important}
  .budget-toggle-row{padding:11px 12px!important}.warning-setting{margin:10px 0!important}.budget-bulk{display:block!important;padding:10px!important}.budget-bulk-action{margin-top:8px!important}.budget-bulk-action input{flex:1!important;width:auto!important}.day-budget-list{grid-template-columns:1fr!important;gap:6px!important}.day-budget-row{padding:8px 9px!important}.money-field input{width:120px!important}.budget-legend{gap:8px!important;margin-top:11px!important}
}

@media (max-width:390px){
  .has-daily-budget .chat-card,.has-daily-budget .transactions-panel{height:calc(100dvh - 354px)!important;min-height:305px!important}
  .daily-budget-remaining{display:none!important}
  .money-field input{width:105px!important}
}

@media (max-height:700px) and (max-width:760px){
  .has-daily-budget .chat-card,.has-daily-budget .transactions-panel{height:calc(100dvh - 326px)!important;min-height:285px!important}
}

/* ===== FOTO / OCR NOTA ===== */
.composer-wrap{position:relative}
.chat-foot form{display:flex;align-items:center;gap:8px}
.attach-btn{width:42px;height:42px;flex:0 0 42px;border:0;background:#eef4ff;color:#2563d9;border-radius:13px;display:grid;place-items:center;cursor:pointer;transition:.18s ease}
.attach-btn:hover{background:#dfeaff}.attach-btn:disabled{opacity:.55;cursor:not-allowed}
.attach-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.photo-source-menu{position:absolute;left:0;bottom:62px;width:260px;background:#fff;border:1px solid #e3e9f2;border-radius:18px;box-shadow:0 18px 45px rgba(31,45,70,.16);padding:8px;z-index:80}
.photo-source-menu[hidden]{display:none!important}
.photo-source-menu button{width:100%;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;border:0;background:transparent;border-radius:13px;padding:10px;cursor:pointer;color:#1b2430}
.photo-source-menu button:hover{background:#f4f7fb}.photo-source-menu button>span{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:#edf4ff;color:#2563d9;display:grid;place-items:center;font-size:18px}.photo-source-menu b{font-size:13px;align-self:end}.photo-source-menu small{font-size:10px;color:#7b8798;margin:2px 0 0!important;display:block!important}
.photo-preview-wrap{display:grid;grid-template-columns:64px 1fr 28px;gap:10px;align-items:center;margin-bottom:9px;padding:9px;background:#f7f9fc;border:1px solid #e1e7ef;border-radius:16px}
.photo-preview-wrap[hidden]{display:none!important}
.photo-preview-thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;background:#e9eef5}.photo-preview-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-preview-info{min-width:0;display:flex;flex-direction:column;gap:3px}.photo-preview-info>b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.photo-preview-info>span{font-size:10px;color:#6f7c90}.ocr-status.scanning{color:#2563d9!important}.ocr-status.success{color:#15834f!important}.ocr-status.warning{color:#b26a00!important}.ocr-status.muted{color:#8a95a6!important}
.photo-preview-info select{margin-top:4px;width:100%;height:31px;padding:0 28px 0 9px;border:1px solid #dbe2ec;border-radius:9px;background:#fff;color:#384457;font-size:10px;outline:none}
.ocr-result{font-size:10px!important;font-weight:700;padding:4px 7px;border-radius:8px;width:max-content;max-width:100%}.ocr-result.found{background:#eaf8f0;color:#157646}.ocr-result.possible{background:#fff5df;color:#9a6200}.ocr-result.not-found{background:#f1f3f7;color:#6f7a8b}
.remove-photo-btn{align-self:start;width:27px;height:27px;border:0;background:#fff;color:#7d8898;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.07)}

.stored-photo{border:0;padding:0;margin:0 0 8px;background:transparent;display:block;max-width:260px;border-radius:14px;overflow:hidden;cursor:pointer}.stored-photo img{display:block;width:100%;max-height:220px;object-fit:cover;background:#e8edf4}.bubble.user .stored-photo{margin-left:auto}.bubble.has-photo{padding:7px}.bubble.has-photo .bubble-text{padding:3px 5px 4px}.stored-photo.temp{pointer-events:none}
.stored-photo.compact{width:44px;height:44px;flex:0 0 44px;margin:0;border-radius:12px}.stored-photo.compact img{width:44px;height:44px;object-fit:cover}
.scan-badge{display:inline-flex;align-items:center;margin-left:5px;padding:2px 6px;border-radius:999px;background:#eaf2ff;color:#2563d9;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.25px;vertical-align:middle}

.photo-viewer-dialog{border:0;padding:0;background:transparent;max-width:min(94vw,900px);max-height:94vh}.photo-viewer-dialog::backdrop{background:rgba(10,16,26,.82);backdrop-filter:blur(4px)}.photo-viewer-card{position:relative;display:grid;place-items:center}.photo-viewer-card img{display:block;max-width:92vw;max-height:90vh;border-radius:16px;object-fit:contain;background:#111}.photo-viewer-close{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border:0;border-radius:999px;background:rgba(20,25,32,.75);color:#fff;font-size:25px;cursor:pointer}

@media (max-width:760px){
  .photo-source-menu{position:fixed;left:12px;right:12px;bottom:calc(var(--mobile-nav-h) + 12px);width:auto;border-radius:20px;padding:10px;z-index:1200}.composer-focus .photo-source-menu{bottom:76px}
  .photo-source-menu button{padding:12px}.photo-source-menu button>span{width:42px;height:42px}.photo-source-menu b{font-size:14px}.photo-source-menu small{font-size:11px!important}
  .photo-preview-wrap{grid-template-columns:56px 1fr 26px;margin:0 0 7px;padding:7px;border-radius:14px}.photo-preview-thumb{width:56px;height:56px}.photo-preview-info select{height:29px}
  .chat-foot form{gap:5px!important}.attach-btn{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:13px!important}
  .stored-photo{max-width:min(72vw,250px)}.stored-photo img{max-height:210px}.stored-photo.compact{width:40px;height:40px;flex-basis:40px}.stored-photo.compact img{width:40px;height:40px}
}

/* ===== COLLAPSIBLE APP SIDEBAR ===== */
.app-main{padding-top:76px}
.sidebar-toggle{position:fixed;z-index:1450;top:18px;left:18px;width:46px;height:46px;border:1px solid #dce3ee;border-radius:15px;background:rgba(255,255,255,.96);color:#1f2937;box-shadow:0 8px 24px rgba(31,45,70,.12);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.18s ease}
.sidebar-toggle:hover{background:#fff;box-shadow:0 10px 28px rgba(31,45,70,.16);transform:translateY(-1px)}
.sidebar-toggle:active{transform:scale(.96)}
.sidebar-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sidebar-backdrop{position:fixed;inset:0;z-index:1490;background:rgba(15,23,42,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .22s ease}
.sidebar-backdrop.is-visible{opacity:1}
.app-sidebar{position:fixed;z-index:1500;inset:0 auto 0 0;width:min(340px,88vw);padding:18px;background:#fff;border-right:1px solid #e4e9f1;box-shadow:18px 0 50px rgba(15,23,42,.15);display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .24s cubic-bezier(.2,.8,.2,1);overflow-y:auto;overscroll-behavior:contain}
.app-sidebar.is-open{transform:translateX(0)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 2px 17px;border-bottom:1px solid #edf1f6}
.sidebar-brand{display:flex;align-items:center;gap:11px;min-width:0}.sidebar-brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#edf4ff;font-size:22px}.sidebar-brand>div{min-width:0}.sidebar-brand b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-brand small{display:block;color:#8993a4;font-size:11px;margin-top:2px}
.sidebar-close{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:12px;background:#f4f6f9;color:#566173;font-size:25px;line-height:1;cursor:pointer}
.sidebar-profile{display:flex;align-items:center;gap:11px;margin:17px 0 14px;padding:13px;border:1px solid #e4e9f2;border-radius:16px;background:#f8faff}.sidebar-profile .avatar.small{width:38px;height:38px;font-size:15px}.sidebar-profile small{display:block;color:#8a94a5;font-size:10px;margin-bottom:2px}.sidebar-profile strong{display:block;font-size:14px}
.sidebar-menu{display:grid;gap:7px}.sidebar-menu-item{width:100%;border:0;background:transparent;color:#243044;border-radius:15px;padding:11px 10px;display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:.16s ease}.sidebar-menu-item:hover{background:#f3f7fd}.sidebar-menu-item:active{transform:scale(.985)}.sidebar-menu-icon{width:42px;height:42px;border-radius:13px;background:#edf4ff;color:#2563d9;display:grid;place-items:center}.sidebar-menu-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidebar-menu-item b{display:block;font-size:13px}.sidebar-menu-item small{display:block;color:#8b95a5;font-size:10px;margin-top:2px}.sidebar-arrow{color:#a3acba;font-size:24px;line-height:1}.sidebar-menu-item.budget-warning{background:#fff8e8}.sidebar-menu-item.budget-reached,.sidebar-menu-item.budget-exceeded{background:#fff1f1}
.sidebar-logout-form{margin-top:auto;padding-top:18px}.sidebar-logout{width:100%;border:1px solid #ffd5d1;background:#fff6f5;color:#b42318;border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.sidebar-logout:active{transform:scale(.985)}
body.sidebar-open{overflow:hidden}

@media (min-width:1280px){
  .sidebar-toggle{left:max(18px,calc((100vw - 1180px)/2 - 62px))}
}

@media (max-width:760px){
  .app-main{padding-top:68px!important}
  .sidebar-toggle{top:calc(10px + env(safe-area-inset-top));left:12px;width:44px;height:44px;border-radius:14px}
  .app-sidebar{width:min(330px,90vw);padding:14px 14px calc(18px + env(safe-area-inset-bottom));padding-top:calc(14px + env(safe-area-inset-top))}
  .sidebar-head{padding-bottom:14px}.sidebar-profile{margin-top:14px}
}

@media (max-width:390px){
  .app-main{padding-top:64px!important}
  .sidebar-toggle{width:42px;height:42px}.sidebar-toggle svg{width:21px;height:21px}
}


/* ===== HAPUS RIWAYAT CHAT ===== */
.chat-panel-head{gap:12px}.chat-head-actions{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin-left:auto}.clear-chat-btn{height:32px;border:1px solid #f3d1ce;background:#fff8f7;color:#b42318;border-radius:10px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.16s ease}.clear-chat-btn[hidden]{display:none!important}.clear-chat-btn:hover{background:#fff1ef;border-color:#f2bdb8}.clear-chat-btn:active{transform:scale(.97)}.clear-chat-btn svg,.chat-delete-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-row{width:100%;display:flex;align-items:flex-end;gap:6px}.chat-row.user{justify-content:flex-end}.chat-row.assistant{justify-content:flex-start}.chat-row .bubble{margin:7px 0}.chat-row.user .chat-delete-btn{order:-1}.chat-delete-btn{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:9px;background:transparent;color:#98a2b3;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.9);transition:opacity .15s ease,background .15s ease,color .15s ease,transform .15s ease;margin-bottom:2px}.chat-row:hover .chat-delete-btn,.chat-delete-btn:focus-visible{opacity:1;transform:scale(1)}.chat-delete-btn:hover{background:#fff0ef;color:#b42318}.system-greeting .bubble{margin:7px 0}

@media (max-width:760px){
  .chat-panel-head>b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-head-actions{gap:5px}.clear-chat-btn{width:32px;height:32px;padding:0;justify-content:center;border-color:#e7ebf1;background:#f7f8fa;color:#667085}.clear-chat-btn span{display:none}.clear-chat-btn svg{width:16px;height:16px}.offline{white-space:nowrap}
  .chat-row{gap:4px}.chat-row .bubble{max-width:84%!important}.chat-delete-btn{opacity:.62;transform:none;width:28px;height:28px;flex-basis:28px;border-radius:9px;color:#98a2b3}.chat-delete-btn:active{background:#fff0ef;color:#b42318;transform:scale(.93)}
}

/* ===== DESKTOP SIDEBAR V2 ===== */
:root{--desktop-sidebar-w:286px;--desktop-sidebar-gap:28px}

@media (min-width:761px){
  body{background:linear-gradient(180deg,#f5f8fc 0%,#f2f5fa 100%)}
  .sidebar-toggle{display:none!important}
  .sidebar-backdrop{display:none!important}
  .app-sidebar{
    transform:none!important;
    width:var(--desktop-sidebar-w)!important;
    inset:16px auto 16px 16px!important;
    height:auto!important;
    padding:18px 16px!important;
    border:1px solid #e3e9f2!important;
    border-radius:24px!important;
    box-shadow:0 18px 48px rgba(30,47,74,.09)!important;
    background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)!important;
    z-index:100!important;
    overflow:hidden auto!important;
  }
  .app-sidebar[aria-hidden="true"]{visibility:visible!important}
  .sidebar-close{display:none!important}
  .sidebar-head{padding:3px 3px 18px!important;border-bottom:0!important}
  .sidebar-brand{gap:12px!important}
  .sidebar-brand-mark{
    width:46px!important;height:46px!important;border-radius:15px!important;
    background:linear-gradient(145deg,#2e70df,#1653bc)!important;
    box-shadow:0 10px 22px rgba(23,92,211,.22)!important;
    color:#fff!important;font-size:22px!important
  }
  .sidebar-brand b{font-size:15px!important;letter-spacing:-.15px!important}
  .sidebar-brand small{font-size:10px!important;color:#8c97a8!important;margin-top:3px!important}
  .sidebar-profile{
    margin:7px 0 20px!important;padding:13px!important;border:1px solid #e6ecf4!important;
    border-radius:17px!important;background:linear-gradient(135deg,#f7faff,#f1f6ff)!important;
  }
  .sidebar-profile .avatar.small{
    width:42px!important;height:42px!important;font-size:16px!important;
    background:#fff!important;border:1px solid #d8e4f7!important;box-shadow:0 4px 12px rgba(32,73,142,.08)!important
  }
  .sidebar-profile small{font-size:9px!important;text-transform:uppercase;letter-spacing:.55px;color:#8b96a7!important}
  .sidebar-profile strong{font-size:14px!important;line-height:1.2!important}
  .sidebar-section-label{padding:0 9px 8px;color:#9aa4b4;font-size:9px;font-weight:800;letter-spacing:.8px}
  .sidebar-menu{gap:5px!important}
  .sidebar-menu-item{
    grid-template-columns:40px minmax(0,1fr) 16px!important;gap:10px!important;
    min-height:58px!important;padding:8px 9px!important;border-radius:15px!important;
    color:#39465a!important
  }
  .sidebar-menu-item:hover{background:#f2f6fc!important;color:#1f4f9f!important}
  .sidebar-menu-item-active{background:#edf4ff!important;color:#1a58c3!important}
  .sidebar-menu-icon{width:40px!important;height:40px!important;border-radius:12px!important;background:#edf4ff!important;color:#2563d9!important}
  .sidebar-menu-item-active .sidebar-menu-icon{background:#fff!important;box-shadow:0 4px 12px rgba(37,99,217,.10)!important}
  .sidebar-menu-icon svg{width:19px!important;height:19px!important}
  .sidebar-menu-item b{font-size:12px!important}
  .sidebar-menu-item small{font-size:9px!important;color:#8e98a8!important;margin-top:2px!important}
  .sidebar-arrow{font-size:20px!important}
  .sidebar-local-status{
    margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 11px;border-radius:15px;
    background:#f7faf8;border:1px solid #e3eee7;color:#3f4e46
  }
  .sidebar-local-dot{width:9px;height:9px;border-radius:50%;background:#169b5b;box-shadow:0 0 0 4px rgba(22,155,91,.10)}
  .sidebar-local-status b{display:block;font-size:11px}.sidebar-local-status small{display:block;font-size:9px;color:#849087;margin-top:2px}
  .sidebar-logout-form{margin-top:9px!important;padding-top:0!important}
  .sidebar-logout{min-height:45px!important;border-radius:13px!important;font-size:12px!important;background:#fff9f8!important;border-color:#f4d4d0!important}

  .app-main{
    width:auto!important;
    max-width:1400px!important;
    margin-left:calc(var(--desktop-sidebar-w) + var(--desktop-sidebar-gap) + 16px)!important;
    margin-right:24px!important;
    padding:24px 0 34px!important;
  }
  .stats{gap:14px!important;margin-bottom:16px!important}
  .stat{min-height:94px!important;padding:18px 19px!important;border-radius:19px!important;box-shadow:0 8px 24px rgba(31,45,70,.05)!important}
  .stat-icon{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:14px!important}
  .stat small{font-size:11px!important;margin-bottom:5px!important}
  .stat strong{font-size:20px!important}
  .balance-stat{box-shadow:0 15px 32px rgba(23,92,211,.18)!important}
  .grid{gap:16px!important;grid-template-columns:minmax(0,1.5fr) minmax(330px,.85fr)!important}
  .panel{border-radius:20px!important;box-shadow:0 9px 28px rgba(31,45,70,.055)!important}
  .panel-head{min-height:60px!important;padding:0 18px!important}
  .chat-card{height:calc(100vh - 164px)!important;min-height:600px!important;max-height:820px!important}
  .tx-list{max-height:calc(min(820px,100vh - 164px) - 60px)!important}
  body.sidebar-open{overflow:auto!important}
}

@media (min-width:761px) and (max-width:1120px){
  :root{--desktop-sidebar-w:246px;--desktop-sidebar-gap:20px}
  .app-sidebar{left:12px!important;top:12px!important;bottom:12px!important;padding:15px 13px!important}
  .sidebar-brand small,.sidebar-menu-item small{display:none!important}
  .sidebar-menu-item{min-height:52px!important}
  .app-main{margin-left:calc(var(--desktop-sidebar-w) + var(--desktop-sidebar-gap) + 12px)!important;margin-right:16px!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid{grid-template-columns:1fr!important}
  .chat-card{height:66vh!important;min-height:540px!important}.tx-list{max-height:520px!important}
}

/* Mobile: sidebar remains hidden by default and opens only from the menu button */
@media (max-width:760px){
  .sidebar-section-label{padding:0 8px 7px;color:#9aa4b4;font-size:9px;font-weight:800;letter-spacing:.75px}
  .sidebar-local-status{margin-top:auto;display:flex;align-items:center;gap:9px;padding:11px;border-radius:14px;background:#f7faf8;border:1px solid #e3eee7}
  .sidebar-local-dot{width:8px;height:8px;border-radius:50%;background:#169b5b;box-shadow:0 0 0 4px rgba(22,155,91,.10)}
  .sidebar-local-status b{display:block;font-size:11px}.sidebar-local-status small{display:block;font-size:9px;color:#849087;margin-top:2px}
  .sidebar-menu-item-active{background:#edf4ff!important;color:#1a58c3!important}
  .sidebar-toggle{box-shadow:0 7px 20px rgba(31,45,70,.10)!important}
  .app-sidebar{box-shadow:20px 0 55px rgba(15,23,42,.20)!important}
}

/* ===== DESKTOP VIEWPORT FIT V3 =====
   Keep the chat composer visible without scrolling the whole page.
   The chat history and transaction list scroll inside their own cards. */
@media (min-width:1121px){
  html,body{height:100%;min-height:100%;}
  body{overflow:hidden;}

  .app-main{
    height:100dvh!important;
    min-height:0!important;
    padding:18px 0 18px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .stats{
    flex:0 0 auto!important;
    margin-bottom:12px!important;
  }
  .stat{
    min-height:86px!important;
    padding:15px 17px!important;
  }
  .stat-icon{
    width:42px!important;
    height:42px!important;
    flex-basis:42px!important;
  }
  .stat strong{font-size:19px!important;}

  .daily-budget-card{
    flex:0 0 auto!important;
    margin-bottom:12px!important;
  }
  .daily-budget-main{padding:11px 14px!important;}
  .daily-budget-icon{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    border-radius:12px!important;
  }
  .daily-budget-progress{margin:6px 0 4px!important;}

  .grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  .chat-card,
  .transactions-panel{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }

  .chat-card{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .chat-card .panel-head{flex:0 0 auto!important;}
  .chat-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
  }
  .chat-foot{
    position:relative!important;
    z-index:3!important;
    flex:0 0 auto!important;
    padding:10px 12px 10px!important;
    box-shadow:0 -8px 22px rgba(31,45,70,.035)!important;
  }
  .chat-foot form{min-height:46px!important;}
  .chat-foot small{margin-top:6px!important;font-size:10px!important;}

  .transactions-panel{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .transactions-panel .panel-head{flex:0 0 auto!important;}
  .transactions-panel .tx-list{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
}

/* Short desktop screens: compact the upper summary so the composer is still visible. */
@media (min-width:1121px) and (max-height:760px){
  .app-main{padding-top:12px!important;padding-bottom:12px!important;}
  .stats{margin-bottom:9px!important;}
  .stat{min-height:72px!important;padding:11px 14px!important;}
  .stat-icon{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:11px!important;}
  .stat small{font-size:10px!important;margin-bottom:3px!important;}
  .stat strong{font-size:17px!important;}
  .daily-budget-card{margin-bottom:9px!important;}
  .daily-budget-main{padding:8px 11px!important;}
  .daily-budget-icon{width:34px!important;height:34px!important;flex-basis:34px!important;}
  .daily-budget-copy>small{display:none!important;}
  .daily-budget-title-row{margin-bottom:2px!important;}
  .daily-budget-progress{height:4px!important;margin:4px 0 0!important;}
  .panel-head{min-height:52px!important;}
  .chat-foot{padding:8px 10px!important;}
  .chat-foot small{display:none!important;}
}

/* =========================================================
   PEMBELAJARAN ASISTEN LOKAL
   ========================================================= */
.learning-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#edf4ff;color:#1f5fd4;display:grid;place-items:center;font-size:10px;font-weight:800}
.learning-pending-card{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;margin:0 0 9px;padding:9px 10px;border:1px solid #cfe0ff;background:linear-gradient(135deg,#f3f7ff,#eef5ff);border-radius:14px;color:#23426f}
.learning-pending-card[hidden]{display:none!important}.learning-pending-icon{width:34px;height:34px;border-radius:11px;background:#dce9ff;color:#175cd3;display:grid;place-items:center;font-weight:900}.learning-pending-copy{min-width:0}.learning-pending-copy b{display:block;font-size:11px;color:#1753b8}.learning-pending-copy span{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.learning-pending-card button{border:0;background:#fff;color:#526273;border-radius:10px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.learning-active .chat-foot form{border-color:#aac8ff!important;box-shadow:0 0 0 3px rgba(23,92,211,.07)}
.learning-dialog{width:min(720px,calc(100% - 28px))}.learning-modal-card{padding:22px;max-height:min(84vh,780px);overflow:auto}.learning-info-box{display:grid;gap:4px;padding:13px 14px;border-radius:15px;background:#f5f8fd;border:1px solid #e2e9f4;margin-bottom:15px;color:#526273}.learning-info-box b{color:#172235;font-size:12px}.learning-info-box span,.learning-info-box small{font-size:11px;line-height:1.45}.learning-info-box code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eaf1ff;color:#1b56bb;padding:2px 5px;border-radius:5px}.learning-form-grid{display:grid;gap:11px;padding:14px;border:1px solid #e5eaf2;border-radius:16px;background:#fff}.learning-form-grid label{margin:0}.learning-form-grid textarea{width:100%;border:1px solid #d9dee8;border-radius:12px;padding:12px 13px;font:inherit;font-size:14px;outline:none;resize:vertical;min-height:76px}.learning-form-grid textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(23,92,211,.10)}.learning-form-grid .btn{justify-self:end}.learning-list-head{display:flex;align-items:center;justify-content:space-between;margin:18px 1px 8px}.learning-list-head b{font-size:13px}.learning-list-head span{font-size:10px;color:#8b95a5}.learning-rule-list{display:grid;gap:8px}.learning-rule{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e6eaf1;border-radius:14px;background:#fbfcfe}.learning-rule-main{min-width:0;display:grid;grid-template-columns:minmax(90px,.7fr) 18px minmax(140px,1.3fr);align-items:center;gap:8px}.learning-trigger{font-size:11px;font-weight:800;color:#1f4f9f;background:#edf4ff;border-radius:9px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.learning-arrow{color:#9aa4b3;text-align:center}.learning-answer{font-size:11px;color:#3a4657;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.learning-delete{border:0;background:#fff1f1;color:#c3312b;border-radius:9px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}

@media(max-width:760px){
  .learning-count{margin-left:auto}.learning-pending-card{grid-template-columns:30px 1fr auto;padding:8px;border-radius:12px}.learning-pending-icon{width:30px;height:30px;border-radius:9px}.learning-pending-copy span{font-size:10px}.learning-dialog{width:100%!important;max-width:none!important}.learning-modal-card{padding:18px 15px calc(18px + env(safe-area-inset-bottom));max-height:88dvh}.learning-form-grid .btn{width:100%;justify-self:stretch}.learning-rule-main{grid-template-columns:1fr;gap:4px}.learning-arrow{display:none}.learning-trigger,.learning-answer{white-space:normal}.learning-rule{align-items:start}}

/* =========================================================
   MOBILE VIEWPORT FIT V4
   Composer selalu terlihat; hanya riwayat chat yang scroll.
   --app-vh diisi JS dari Visual Viewport agar aman saat keyboard terbuka.
   ========================================================= */
@media (max-width:760px){
  :root{--app-vh:100dvh;--mobile-nav-h:72px}

  html,body{
    height:100%;
    min-height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
  }

  body{
    padding-bottom:0!important;
    min-height:0!important;
  }

  .app-main{
    width:100%!important;
    height:calc(var(--app-vh,100dvh) - var(--mobile-nav-h))!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:calc(64px + env(safe-area-inset-top)) 10px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .stats{
    flex:0 0 auto!important;
    min-height:0!important;
  }

  .daily-budget-card{
    flex:0 0 auto!important;
  }

  .grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .mobile-view{
    min-height:0!important;
    max-height:none!important;
  }

  .chat-card.mobile-view.active,
  .transactions-panel.mobile-view.active{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .chat-card.mobile-view.active{
    display:flex!important;
    flex-direction:column!important;
  }

  .chat-card .panel-head{
    flex:0 0 auto!important;
  }

  .chat-body{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:18px!important;
  }

  .chat-foot{
    position:relative!important;
    inset:auto!important;
    z-index:20!important;
    flex:0 0 auto!important;
    margin:0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -10px 24px rgba(31,45,70,.045)!important;
  }

  .composer-wrap,
  .chat-foot form{
    flex:0 0 auto!important;
  }

  .transactions-panel.mobile-view.active{
    display:flex!important;
    flex-direction:column!important;
  }

  .transactions-panel .panel-head{
    flex:0 0 auto!important;
  }

  .transactions-panel .tx-list{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* Saat keyboard muncul, navbar bawah disembunyikan dan ruang penuh diberikan ke chat. */
  body.composer-focus .app-main{
    height:var(--app-vh,100dvh)!important;
    padding-top:8px!important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;
  }

  body.composer-focus .stats,
  body.composer-focus .daily-budget-card{
    display:none!important;
  }

  body.composer-focus .grid{
    flex:1 1 auto!important;
  }

  body.composer-focus .chat-card.mobile-view.active{
    border-radius:18px!important;
  }

  body.composer-focus .mobile-bottom-nav{
    transform:translateY(115%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Preview foto / mode belajar boleh membesar; body chat otomatis mengecil. */
  .photo-preview-wrap,
  .learning-pending-card{
    flex:0 0 auto!important;
  }
}

@media (max-width:760px) and (max-height:620px){
  .app-main{
    padding-top:58px!important;
  }
  .balance-stat{
    min-height:66px!important;
    padding:10px 14px!important;
  }
  .balance-stat strong{font-size:22px!important}
  .income-stat,.expense-stat,.initial-stat{
    min-height:50px!important;
    padding:7px 8px!important;
  }
  .daily-budget-main{padding:7px 9px!important}
  .daily-budget-icon{width:30px!important;height:30px!important;flex-basis:30px!important}
  body.composer-focus .app-main{padding-top:6px!important}
}

/* =========================================================
   FILTER & SORT TRANSAKSI
   ========================================================= */
.tx-filter-wrap{
  flex:0 0 auto;
  border-bottom:1px solid #edf0f4;
  background:linear-gradient(180deg,#fbfcff 0%,#fff 100%);
}
.tx-filter-toggle{
  width:100%;height:44px;padding:0 14px;border:0;background:transparent;color:#344054;
  display:flex;align-items:center;gap:8px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;text-align:left;
}
.tx-filter-toggle:hover{background:#f6f8fc}
.tx-filter-toggle-icon{width:28px;height:28px;border-radius:9px;background:#edf4ff;color:#175cd3;display:grid;place-items:center;flex:0 0 28px}
.tx-filter-toggle-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tx-filter-chevron{margin-left:auto;color:#98a2b3;font-size:15px;transition:transform .18s ease}
.tx-filter-toggle.is-open .tx-filter-chevron{transform:rotate(180deg)}
.tx-filter-toggle.has-active-filter{color:#175cd3}
.tx-filter-active-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#175cd3;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}
.tx-filter-active-count[hidden]{display:none!important}
.tx-filter-panel{padding:0 13px 12px}
.tx-filter-panel[hidden]{display:none!important}
.tx-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tx-filter-grid label{display:grid;gap:5px;margin:0;color:#667085;font-size:9px;font-weight:800}
.tx-filter-grid input,.tx-filter-grid select{
  width:100%;height:36px;border:1px solid #dfe5ee;border-radius:10px;background:#fff;color:#172235;
  padding:0 9px;font:inherit;font-size:10px;outline:none;min-width:0;
}
.tx-filter-grid input:focus,.tx-filter-grid select:focus{border-color:#8fb6ff;box-shadow:0 0 0 3px rgba(23,92,211,.08)}
.tx-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.tx-filter-reset,.tx-filter-apply{height:34px!important;min-height:34px!important;border-radius:10px!important;padding:0 12px!important;font-size:10px!important;font-weight:800!important}
.tx-filter-reset{border:1px solid #dfe5ee;background:#fff;color:#667085;cursor:pointer}
.tx-filter-summary{min-height:36px;padding:0 14px 9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#7b8798;font-size:9px}
.tx-filter-summary>span{padding:5px 7px;border-radius:8px;background:#f6f8fb;white-space:nowrap}
.tx-filter-summary b{color:#344054}.tx-summary-expense b{color:#b42318}.tx-summary-income b{color:#067647}
.tx-empty-filter button{margin-top:10px;border:1px solid #dce5f3;background:#fff;color:#175cd3;border-radius:10px;padding:7px 10px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}

@media (min-width:761px){
  .transactions-panel .tx-list{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
}

@media (max-width:760px){
  .transactions-panel.mobile-view.active{display:flex!important;flex-direction:column!important}
  .tx-filter-wrap{flex:0 0 auto}
  .tx-filter-toggle{height:46px;padding:0 13px;font-size:12px}
  .tx-filter-toggle-icon{width:30px;height:30px;flex-basis:30px}
  .tx-filter-panel{padding:2px 12px 12px;background:#f8faff;border-top:1px solid #eef2f7}
  .tx-filter-grid{grid-template-columns:1fr 1fr;gap:8px}
  .tx-filter-grid label{font-size:9px}
  .tx-filter-grid input,.tx-filter-grid select{height:39px;font-size:11px;border-radius:11px}
  .tx-filter-actions{margin-top:9px}
  .tx-filter-reset,.tx-filter-apply{height:38px!important;min-height:38px!important;flex:1}
  .tx-filter-summary{padding:0 12px 8px;gap:5px;font-size:9px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tx-filter-summary::-webkit-scrollbar{display:none}
  .transactions-panel .tx-list{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
}

@media (max-width:430px){
  .tx-filter-grid{grid-template-columns:1fr}
  .tx-filter-panel{max-height:290px;overflow-y:auto}
}

/* ===== Download laporan transaksi / rekening koran ===== */
.tx-report-download{
  margin-left:auto;
  height:30px;
  padding:0 10px;
  border:1px solid #cfe0ff;
  border-radius:9px;
  background:#edf4ff;
  color:#175cd3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.tx-report-download:hover{background:#e1ecff;border-color:#aac8ff}
.tx-report-download:active{transform:translateY(1px)}
.tx-report-download svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:760px){
  .tx-report-download{
    height:31px;
    padding:0 10px;
    border-radius:9px;
    flex:0 0 auto;
    font-size:9px;
  }
}

/* ===== PAKET FITUR LENGKAP ===== */
.auth-logo{width:72px;height:72px;margin:0 auto 10px;border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(23,92,211,.18);background:#fff}.auth-logo img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar-brand-mark{overflow:hidden;padding:0!important;background:#fff!important}.sidebar-brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.sidebar-admin-item{margin-top:8px;background:#fff9ea!important}.sidebar-admin-item .sidebar-menu-icon{background:#fff1c2!important;color:#9a6700!important}
.transfer{color:#3b5ccc}.transfer-badge,.scan-badge{display:inline-flex;vertical-align:middle;padding:2px 6px;border-radius:999px;font-size:8px;font-weight:800;background:#eef2ff;color:#4456b8;margin-left:4px}.tx-actions{display:flex;justify-content:flex-end;gap:5px}.tx-right .tx-actions button{display:inline-block;margin:5px 0 0;padding:2px 4px}.tx-right .tx-actions .tx-edit-btn{color:#175cd3}.tx-export-group{display:flex;gap:5px;flex-wrap:wrap}.secondary-export{background:#fff!important;color:#315071!important;border:1px solid #dce4ef!important;box-shadow:none!important}

.tx-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.tx-filter-grid input[type="search"]{min-width:0}

.finance-center-dialog{width:min(1120px,calc(100% - 34px))!important;max-width:none!important;border-radius:24px!important}.finance-center-card{height:min(88dvh,820px);display:flex;flex-direction:column;background:#f7f9fc}.finance-center-head{padding:20px 22px 14px;margin:0;background:#fff;border-bottom:1px solid #e8edf4}.finance-center-head h3{font-size:20px}.finance-tabs{display:flex;gap:6px;padding:10px 14px;background:#fff;border-bottom:1px solid #e7ebf2;overflow-x:auto;scrollbar-width:none}.finance-tabs::-webkit-scrollbar{display:none}.finance-tabs button{border:0;background:#f3f6fa;color:#526173;border-radius:11px;padding:9px 12px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}.finance-tabs button.active{background:#175cd3;color:#fff}.finance-content{flex:1;min-height:0;overflow:auto;padding:16px 18px 24px}.finance-tab-panel{min-height:100%}.feature-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.feature-toolbar>div b{display:block;font-size:16px}.feature-toolbar>div small{display:block;color:#7d8999;margin-top:3px}.feature-toolbar label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800}.feature-toolbar select{border:1px solid #dbe1ea;border-radius:10px;padding:8px;background:#fff}
.feature-card{background:#fff;border:1px solid #e3e8ef;border-radius:17px;padding:15px;box-shadow:0 4px 14px rgba(16,24,40,.035)}.feature-card h4{margin:0 0 12px;font-size:14px}.feature-card p{font-size:12px;line-height:1.55;color:#637083}.feature-card label{display:block;font-size:11px;font-weight:750;color:#526072;margin:9px 0}.feature-card input,.feature-card select,.feature-form-row input,.feature-form-row select,.feature-form-grid input,.feature-form-grid select{width:100%;border:1px solid #dce2eb;border-radius:10px;background:#fff;padding:9px 10px;outline:none;font:inherit;font-size:12px}.feature-card input:focus,.feature-card select:focus,.feature-form-row input:focus,.feature-form-row select:focus,.feature-form-grid input:focus,.feature-form-grid select:focus{border-color:#78a3e9;box-shadow:0 0 0 3px rgba(23,92,211,.08)}.two-col-feature{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.feature-form-row{display:grid;grid-template-columns:1.3fr .9fr .6fr 1fr 1fr auto;align-items:end;gap:9px;margin-bottom:14px}.feature-form-row>label{margin:0;font-size:10px;font-weight:800;color:#667085}.feature-form-row>.btn{height:38px;margin-bottom:0}.feature-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.feature-form-grid label{font-size:11px;font-weight:800;color:#566375}.feature-form-grid .full{grid-column:1/-1}
.feature-list{display:grid;gap:8px}.feature-list-row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:#fff;border:1px solid #e5eaf1;border-radius:14px}.feature-row-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:#f1f5fb;font-size:18px}.feature-row-main{flex:1;min-width:0}.feature-row-main b{display:block;font-size:12px}.feature-row-main small{display:block;color:#8792a3;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-list-row>strong{font-size:12px;white-space:nowrap}.row-actions{display:flex;gap:5px}.row-actions button,.goal-actions button,.admin-user-row button{border:0;background:#eef4ff;color:#1858bf;border-radius:8px;padding:6px 8px;font-size:9px;font-weight:800;cursor:pointer}.row-actions .danger-link,.goal-actions .danger-link{background:#fff1f1;color:#b42318}.row-actions .success-link{background:#eaf8ef;color:#087443}.status-pill{padding:4px 7px;border-radius:999px;font-size:8px;font-weight:850}.status-pill.paid{background:#eaf8ef;color:#087443}.status-pill.overdue{background:#fff1f1;color:#b42318}.status-pill.due_soon{background:#fff7e4;color:#9a6700}.status-pill.upcoming{background:#f1f4f8;color:#667085}.mini-budget{font-size:9px;color:#526072;background:#f2f5f9;padding:5px 7px;border-radius:8px;white-space:nowrap}
.prediction-card{border-radius:18px;padding:17px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:linear-gradient(135deg,#eaf8ef,#f8fffb);border:1px solid #cfeedd}.prediction-card.tight{background:linear-gradient(135deg,#fff8e9,#fffdf8);border-color:#f3d997}.prediction-card.risk{background:linear-gradient(135deg,#fff0ef,#fffafa);border-color:#fac4bf}.prediction-card small{display:block;color:#697588}.prediction-card strong{display:block;font-size:26px;letter-spacing:-.5px;margin:3px 0}.prediction-card p{margin:0;color:#6c7787;font-size:10px}.prediction-status{font-size:10px;font-weight:850;padding:7px 10px;border-radius:999px;background:#fff;white-space:nowrap}.analytics-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.analytics-kpis>div{background:#fff;border:1px solid #e4e9f0;border-radius:14px;padding:12px}.analytics-kpis small{display:block;color:#8490a1;font-size:9px}.analytics-kpis b{display:block;font-size:15px;margin-top:4px}.analytics-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}.analytic-bar-row{margin:11px 0}.analytic-bar-row>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:10px}.analytic-bar-row>div:first-child b{font-size:10px}.analytic-track{height:7px;background:#eef2f6;border-radius:99px;overflow:hidden;margin:5px 0}.analytic-track span{display:block;height:100%;background:#2c6bd8;border-radius:99px}.analytic-bar-row.warning .analytic-track span{background:#e4a11b}.analytic-bar-row.exceeded .analytic-track span{background:#d92d20}.analytic-bar-row>small{font-size:8px;color:#8c96a5}.empty.compact{padding:20px 8px}
.goal-row{background:#fff;border:1px solid #e4e9f0;border-radius:15px;padding:13px}.goal-top{display:flex;justify-content:space-between;gap:10px}.goal-top b{display:block;font-size:12px}.goal-top small{display:block;font-size:9px;color:#8792a2;margin-top:3px}.goal-progress{height:8px;border-radius:99px;background:#edf1f5;overflow:hidden;margin:9px 0}.goal-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#175cd3,#4b8cf0)}.goal-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}.goal-actions>span{margin-right:auto;font-size:9px;color:#7d8898}
.feature-link-btn{display:inline-flex;text-decoration:none;align-items:center;justify-content:center}.restore-label{margin-top:14px!important}.toggle-line{display:flex!important;gap:8px;align-items:center}.toggle-line input{width:auto!important}.feature-card .btn{margin-right:5px;margin-top:5px}
.feature-toast{position:fixed;left:50%;bottom:28px;z-index:4000;transform:translate(-50%,20px);opacity:0;background:#182230;color:#fff;padding:10px 15px;border-radius:12px;font-size:11px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.22);pointer-events:none;transition:.2s}.feature-toast.show{opacity:1;transform:translate(-50%,0)}
.transaction-edit-dialog{width:min(620px,calc(100% - 30px))!important;max-width:none!important}.transaction-edit-card{padding:20px}.edit-transfer-field[hidden],.edit-standard-field[hidden]{display:none!important}
.admin-user-row{display:grid;grid-template-columns:1fr 110px 145px auto;gap:8px;align-items:center;background:#fff;border:1px solid #e4e9f0;border-radius:13px;padding:10px}.admin-user-row b{display:block;font-size:11px}.admin-user-row small{display:block;color:#8792a2;font-size:9px;margin-top:2px}.admin-user-row select,.admin-user-row input{border:1px solid #dce2eb;border-radius:8px;padding:7px;font-size:10px}
.sidebar-menu-icon:has(+ span){font-size:17px}

@media(max-width:1100px){.tx-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.feature-form-row{grid-template-columns:repeat(3,1fr)}.feature-form-row>.btn{grid-column:span 1}.admin-user-row{grid-template-columns:1fr 90px 130px auto}}
@media(max-width:760px){
  .finance-center-dialog{width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important;margin:0!important}.finance-center-card{height:100dvh!important;max-height:none}.finance-center-head{padding:calc(14px + env(safe-area-inset-top)) 14px 12px}.finance-center-head h3{font-size:18px}.finance-content{padding:12px 12px calc(20px + env(safe-area-inset-bottom))}.finance-tabs{padding:8px 10px}.two-col-feature,.analytics-layout{grid-template-columns:1fr}.feature-form-row{grid-template-columns:1fr 1fr}.feature-form-row>.btn{grid-column:1/-1}.analytics-kpis{grid-template-columns:1fr 1fr}.prediction-card{align-items:flex-start;flex-direction:column}.prediction-card strong{font-size:23px}.feature-list-row{align-items:flex-start;flex-wrap:wrap}.feature-row-main{min-width:150px}.row-actions{width:100%;justify-content:flex-end}.goal-actions{flex-wrap:wrap}.goal-actions>span{width:100%;margin:0 0 3px}.feature-form-grid{grid-template-columns:1fr 1fr}.feature-form-grid .full{grid-column:1/-1}.transaction-edit-dialog{width:100%!important;max-width:none!important;border-radius:20px 20px 0 0!important;margin:auto 0 0!important}.admin-user-row{grid-template-columns:1fr 90px}.admin-user-row input,.admin-user-row button{grid-column:auto}.tx-filter-grid{grid-template-columns:1fr!important}.tx-export-group{width:100%;margin-top:4px}.tx-export-group button{flex:1;justify-content:center}.feature-toast{bottom:calc(76px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center}.sidebar-menu{gap:5px}.sidebar-menu-item{min-height:52px}.sidebar-menu-item small{font-size:9px}
}
.account-plan-badge{display:inline-flex;margin-top:5px;padding:2px 6px;border-radius:999px;font-size:8px;font-weight:850;background:#eef2f6;color:#667085}.account-plan-badge.premium{background:#fff3c4;color:#8a5a00}


/* =========================================================
   PASSWORD / PIN VISIBILITY
   ========================================================= */
.secret-field{position:relative;width:100%}
.secret-field>input{padding-right:48px!important}
.secret-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:#7b8494;display:grid;place-items:center;cursor:pointer}
.secret-toggle:hover{background:#f0f4fa;color:#175cd3}
.secret-toggle:active{transform:translateY(-50%) scale(.95)}
.secret-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.secret-toggle.is-visible{color:#175cd3;background:#eef4ff}
.forgot-password-row{display:flex;justify-content:flex-end;margin-top:-2px}
.forgot-password-row a{font-size:12px;font-weight:700;color:#175cd3;text-decoration:none}
.forgot-password-row a:hover{text-decoration:underline}
.alert.success{background:#ecfdf3;border:1px solid #abefc6;color:#067647;padding:11px 13px;border-radius:11px;margin:14px 0}

/* =========================================================
   SALDO PRIVACY
   ========================================================= */
.balance-stat-content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.balance-stat-copy{min-width:0}
.balance-visibility-toggle{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:12px;background:rgba(255,255,255,.13);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.16s ease}
.balance-visibility-toggle:hover{background:rgba(255,255,255,.22)}
.balance-visibility-toggle:active{transform:scale(.95)}
.balance-visibility-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.balance-visibility-toggle.is-hidden-balance{background:rgba(255,255,255,.18)}

/* =========================================================
   DAILY LIMIT CARD: MINIMIZE / CLOSE
   ========================================================= */
.daily-budget-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.budget-card-icon-btn{width:32px;height:32px;border:0;border-radius:10px;background:#f2f5f9;color:#667085;display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1;transition:.15s ease}
.budget-card-icon-btn:hover{background:#e9eef5;color:#344054}
.budget-card-icon-btn:active{transform:scale(.94)}
.budget-card-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.budget-card-icon-btn.close{font-size:20px;font-weight:400}
.daily-budget-card.is-minimized .daily-budget-main{padding-top:9px;padding-bottom:9px}
.daily-budget-card.is-minimized .daily-budget-icon{width:34px;height:34px;flex-basis:34px;border-radius:11px;font-size:15px}
.daily-budget-card.is-minimized .daily-budget-values,.daily-budget-card.is-minimized .daily-budget-progress,.daily-budget-card.is-minimized .daily-budget-copy>small,.daily-budget-card.is-minimized .budget-edit-btn{display:none!important}
.daily-budget-card.is-minimized .daily-budget-title-row{margin-bottom:0;width:100%}
.daily-budget-card.is-minimized .daily-budget-copy{display:flex;align-items:center}
@media(max-width:760px){
  .secret-toggle{right:6px;width:36px;height:36px}
  .balance-visibility-toggle{width:34px;height:34px;flex-basis:34px;border-radius:11px}
  .daily-budget-actions{gap:3px}
  .budget-card-icon-btn{width:29px;height:29px;border-radius:9px}
  .daily-budget-card.is-minimized .daily-budget-main{padding:7px 9px!important}
  .daily-budget-card.is-minimized .daily-budget-status{margin-left:auto}
}

/* ===== OFFLINE MODE + SYNC ===== */
.sync-banner {
  position: fixed;
  left: calc(var(--sidebar-width, 280px) + 24px);
  right: 24px;
  top: 14px;
  z-index: 1200;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #f4c96a;
  background: rgba(255, 248, 229, .97);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  color: #7a4a00;
  backdrop-filter: blur(10px);
}
.sync-banner[hidden] { display: none !important; }
.sync-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,.13); flex: 0 0 auto; }
.sync-banner > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sync-banner b { font-size: 13px; }
.sync-banner small { font-size: 11px; line-height: 1.35; color: #8a5a08; }
.sync-banner button { margin-left: auto; border: 0; border-radius: 10px; padding: 8px 11px; font-weight: 700; background: #fff; color: #8a5a08; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.app-syncing .sync-banner-dot { animation: financePulse 1s infinite ease-in-out; }
@keyframes financePulse { 0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.2);opacity:1} }

.sidebar-local-status { position: relative; }
.sidebar-local-status.is-offline .sidebar-local-dot { background: #f59e0b !important; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.sidebar-local-status.is-offline b { color: #92400e; }
.sidebar-local-status.is-syncing .sidebar-local-dot { background: #3b82f6 !important; animation: financePulse 1s infinite ease-in-out; }
.sidebar-sync-count { margin-left: auto; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff3cd; color: #8a5a08; font-size: 11px; font-weight: 800; }
#chatConnectionStatus.is-offline { color: #b45309 !important; }

.chat-row.offline-pending .bubble,
.bubble.offline-pending { opacity: .86; border-style: dashed; }
.offline-pending-label { display: block; width: max-content; margin-top: 6px; padding: 3px 7px; border-radius: 999px; background: rgba(245,158,11,.13); color: #92400e; font-size: 9px; font-weight: 700; letter-spacing: .01em; }
.tx.offline-pending { border-style: dashed; background: linear-gradient(90deg, rgba(255,248,229,.65), rgba(255,255,255,.9)); }
.sync-badge { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #fff3cd; color: #92400e; font-size: 9px; font-weight: 800; vertical-align: middle; }
.pending-sync-text { color: #a16207; font-size: 10px; font-weight: 700; }

@media (max-width: 760px) {
  .sync-banner {
    left: 12px;
    right: 12px;
    top: max(10px, env(safe-area-inset-top));
    min-height: 48px;
    border-radius: 14px;
    padding: 9px 11px;
  }
  .sync-banner small { max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-offline .app-main, .app-syncing .app-main { padding-top: 64px; }
}
@media (min-width: 761px) {
  body.has-sync-banner .app-main { padding-top: 78px; }
}
.sidebar-menu-item.sidebar-link{text-decoration:none}.sidebar-menu-item.danger-link{color:#a82b24}.sidebar-menu-item.danger-link .sidebar-menu-icon{background:#fff0ef;color:#c43b31}
.auth-legal-links{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#9aa4b2}.auth-legal-links a{color:#5c6d86;text-decoration:none;font-weight:700}.auth-legal-links a:hover{color:#175cd3;text-decoration:underline}

/* =========================================================
   PREMIUM / BERLANGGANAN MANUAL
   ========================================================= */
.sidebar-premium-item{
  background:linear-gradient(135deg,#fff8df,#fffdf6)!important;
  border:1px solid #f4dfa0!important;
}
.sidebar-premium-item .sidebar-menu-icon{background:#fff0b8!important;color:#8a5a00!important}
.sidebar-premium-badge{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:24px;padding:0 8px;
  border-radius:999px;background:#8a5a00;color:#fff;font-size:8px;font-weight:900;letter-spacing:.04em;
}
.sidebar-premium-badge.active{background:#087443;color:#fff}
.premium-feature-link{position:relative}
.premium-feature-link.premium-locked::after{
  content:"PRO";margin-left:auto;margin-right:3px;padding:3px 6px;border-radius:999px;background:#fff1bd;color:#805400;
  font-size:7px;font-weight:900;letter-spacing:.05em;
}
.premium-feature-link.premium-locked .sidebar-arrow{display:none}
.finance-tabs [data-premium-tab].premium-locked::after{content:" ♛";font-size:9px}

.premium-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:22px 24px;border-radius:22px;
  background:linear-gradient(135deg,#102a56 0%,#175cd3 55%,#3d78df 100%);color:#fff;box-shadow:0 14px 34px rgba(23,92,211,.18);
}
.premium-kicker{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;color:#ffe490;margin-bottom:7px}
.premium-hero h3{margin:0;font-size:23px;letter-spacing:-.3px}.premium-hero p{margin:7px 0 0;max-width:700px;font-size:12px;line-height:1.55;color:#eaf1ff}
.premium-account-status{flex:0 0 auto;padding:9px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.12);font-size:10px;font-weight:900;letter-spacing:.06em}
.premium-account-status.active{background:#eaf8ef;color:#067647;border-color:#b7e5c8}
.premium-checkout-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:14px;align-items:start}
.premium-checkout-card,.premium-invoice-card{min-height:100%}
.premium-step-head{display:flex;align-items:center;gap:9px;margin:4px 0 10px}.premium-step-head>span{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:9px;background:#edf4ff;color:#175cd3;font-size:10px;font-weight:900}.premium-step-head b{display:block;font-size:12px}.premium-step-head small{display:block;margin-top:1px;color:#8792a3;font-size:9px}
.premium-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}
.premium-plan-card{position:relative;display:block!important;margin:0!important;padding:13px!important;border:1px solid #e2e7ef;border-radius:14px;background:#fff;cursor:pointer;overflow:hidden;transition:.15s ease}
.premium-plan-card:hover{border-color:#abc7f4;transform:translateY(-1px)}
.premium-plan-card input{position:absolute;opacity:0;pointer-events:none}.premium-plan-check{position:absolute;right:9px;top:9px;width:20px;height:20px;display:grid;place-items:center;border:1px solid #d7dfe9;border-radius:50%;font-size:10px;color:transparent;background:#fff}
.premium-plan-card:has(input:checked){border-color:#175cd3;box-shadow:0 0 0 3px rgba(23,92,211,.08)}.premium-plan-card:has(input:checked) .premium-plan-check{background:#175cd3;border-color:#175cd3;color:#fff}
.premium-plan-card b{display:block;margin:2px 24px 8px 0;font-size:12px;color:#344054}.premium-plan-card strong{font-size:18px;color:#172235}.premium-plan-card>small{display:inline;color:#667085;font-size:9px}.premium-plan-card p{margin:6px 0 0;font-size:9px;line-height:1.4;color:#7e8998}.premium-plan-tag{position:absolute;right:-28px;top:7px;transform:rotate(38deg);width:90px;text-align:center;padding:2px 0;background:#ffcb05;color:#594300;font-size:6px;font-weight:900;letter-spacing:.06em}
.premium-bank-preview{display:grid;gap:3px;margin:-1px 0 17px;padding:10px 11px;border-radius:11px;background:#f7f9fc;border:1px dashed #dce3ed;color:#7a8798;font-size:10px}.premium-bank-preview.configured{background:#f1f7ff;border-style:solid;border-color:#cfe0ff}.premium-bank-preview b{color:#344054;font-size:10px}.premium-bank-preview strong{font-size:16px;color:#175cd3;letter-spacing:.04em}.premium-bank-preview span{font-size:9px}
.premium-invoice-empty{min-height:210px;display:grid;place-items:center;text-align:center;padding:25px;border:1px dashed #dbe2ec;border-radius:14px;color:#8792a3;font-size:11px;background:#fafbfd}
.premium-invoice-box{padding:14px;border:1px solid #dfe5ed;border-radius:15px;background:#fff}.premium-invoice-box.pending{border-color:#f0d18c;background:#fffcf5}.premium-invoice-box.approved{border-color:#bfe5cb;background:#f7fff9}.premium-invoice-box.rejected{border-color:#f2c0bc;background:#fff8f7}
.premium-invoice-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:11px;border-bottom:1px solid #edf0f4}.premium-invoice-top small{display:block;color:#98a2b3;font-size:8px;font-weight:900;letter-spacing:.11em}.premium-invoice-top b{display:block;margin-top:2px;font-size:12px;color:#344054}
.premium-order-status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900;white-space:nowrap}.premium-order-status.waiting{background:#eef2f7;color:#596579}.premium-order-status.pending{background:#fff1c6;color:#8a5a00}.premium-order-status.approved{background:#e7f8ec;color:#087443}.premium-order-status.rejected{background:#fff0ef;color:#b42318}
.premium-invoice-amount{padding:15px 0}.premium-invoice-amount small{display:block;color:#7b8797;font-size:9px}.premium-invoice-amount strong{display:block;margin-top:2px;font-size:28px;letter-spacing:-.6px;color:#15243b}
.premium-invoice-lines{display:grid;gap:7px;padding:11px;border-radius:12px;background:#f7f9fc}.premium-invoice-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:9px}.premium-invoice-lines span{color:#8792a3}.premium-invoice-lines b{color:#344054;text-align:right;word-break:break-all}
.premium-invoice-notice{margin:11px 0;padding:10px;border-radius:10px;font-size:9px;line-height:1.5;background:#f3f5f8;color:#667085}.premium-invoice-notice.pending{background:#fff5d9;color:#805400}.premium-invoice-notice.approved{background:#eaf8ef;color:#067647}.premium-invoice-notice.rejected{background:#fff0ef;color:#a82b24}
.premium-upload-area{margin-top:14px;padding-top:14px;border-top:1px dashed #dfe4ec}.premium-upload-area[hidden]{display:none!important}.premium-proof-picker{display:flex!important;align-items:center;gap:10px;padding:11px!important;border:1px dashed #c8d5e8;border-radius:12px;background:#f8fbff;cursor:pointer;color:#175cd3!important}.premium-proof-picker::before{content:"🧾";font-size:20px}.premium-proof-picker span{font-size:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.premium-proof-preview{margin:12px 0 4px!important;max-width:150px!important}.premium-proof-preview img{height:100px!important}
.premium-basic-note{margin-top:14px;padding:12px 14px;border-radius:13px;background:#f6f7fa;border:1px solid #e8ebf0;color:#6d7888;font-size:10px;line-height:1.55}.premium-basic-note b{color:#344054}
.premium-card-title{display:flex;justify-content:space-between;gap:10px;align-items:center}.premium-card-title h4{margin:0}.premium-card-title span{padding:4px 7px;border-radius:999px;background:#fff1bd;color:#805400;font-size:7px;font-weight:900}.premium-backup-card{position:relative}

.admin-premium-section{margin-top:22px;padding-top:18px;border-top:1px solid #e4e9f0}.admin-premium-section:first-of-type{margin-top:14px}
.admin-payment-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 190px;gap:12px;align-items:center;padding:13px;background:#fff;border:1px solid #e3e8ef;border-radius:15px}.admin-payment-row.pending{border-color:#efd28f;background:#fffdf8}.admin-payment-row.approved{border-color:#c4e4cf}.admin-payment-row.rejected{border-color:#f2c4c0}.admin-payment-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.admin-payment-title>b{font-size:12px}.admin-payment-main>small{display:block;margin-top:3px;color:#818c9b;font-size:9px}.admin-payment-amount{margin-top:7px;font-size:18px;font-weight:900;color:#172235}.admin-payment-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}.admin-payment-meta span{font-size:8px;color:#687588;padding:4px 6px;background:#f3f6fa;border-radius:7px}.admin-payment-proof{display:flex;justify-content:center}.admin-payment-proof>span{font-size:9px;color:#98a2b3}.admin-payment-proof .stored-photo{margin:0!important;max-width:110px!important}.admin-payment-proof .stored-photo img{height:78px!important;object-fit:cover}.admin-payment-actions{display:grid;gap:6px}.admin-payment-actions button{border:0;border-radius:9px;padding:8px 9px;font-size:9px;font-weight:850;cursor:pointer}.admin-payment-actions .success-link{background:#e9f8ee;color:#067647}.admin-payment-actions .danger-link{background:#fff0ef;color:#b42318}.admin-rejection-reason{margin-top:6px;color:#b42318;font-size:8px}
.admin-bank-row{display:flex;align-items:flex-end;gap:10px;padding:12px;background:#fff;border:1px solid #e3e8ef;border-radius:14px}.admin-bank-fields{flex:1;display:grid;grid-template-columns:1fr 1.2fr 1.2fr 80px 90px;gap:8px;align-items:end}.admin-bank-fields label{margin:0;font-size:9px;font-weight:800;color:#667085}.admin-bank-fields input{width:100%;margin-top:4px;border:1px solid #dce2eb;border-radius:8px;padding:7px 8px;font-size:10px}.admin-bank-enabled{display:flex!important;align-items:center;gap:5px;height:32px}.admin-bank-enabled input{width:auto!important;margin:0!important}.admin-bank-row .row-actions{flex:0 0 auto}.admin-payment-kpis{margin-bottom:12px}

@media(max-width:900px){
  .premium-checkout-grid{grid-template-columns:1fr}.premium-plan-grid{grid-template-columns:repeat(3,1fr)}
  .admin-payment-row{grid-template-columns:1fr 100px}.admin-payment-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.admin-bank-row{align-items:stretch;flex-direction:column}.admin-bank-fields{grid-template-columns:1fr 1fr}.admin-bank-row .row-actions{justify-content:flex-end}
}
@media(max-width:760px){
  .premium-hero{padding:17px 16px;border-radius:17px;align-items:flex-start}.premium-hero h3{font-size:19px}.premium-account-status{padding:7px 9px;font-size:8px}.premium-plan-grid{grid-template-columns:1fr}.premium-plan-card{padding:12px!important}.premium-checkout-grid{gap:10px}.premium-invoice-amount strong{font-size:24px}.premium-invoice-lines>div{font-size:9px}.premium-basic-note{margin-bottom:10px}.admin-payment-row{grid-template-columns:1fr}.admin-payment-proof{justify-content:flex-start}.admin-payment-actions{grid-column:auto;grid-template-columns:1fr}.admin-bank-fields{grid-template-columns:1fr}.admin-premium-section .feature-toolbar{align-items:flex-start;flex-direction:column}.admin-premium-section .feature-toolbar .btn{width:100%}
}


/* =========================================================
   TRANSAKSI: SEARCH SELALU TAMPIL + MENU UNDUH COMPACT
   ========================================================= */
.tx-search-export-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 8px;
  position:relative;
  z-index:12;
}
.tx-search-box{
  flex:1 1 auto;
  min-width:0;
  height:38px;
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #dfe5ee;
  border-radius:11px;
  background:#fff;
  padding:0 10px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.tx-search-box:focus-within{
  border-color:#8fb6ff;
  box-shadow:0 0 0 3px rgba(23,92,211,.08);
}
.tx-search-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#98a2b3;
  display:grid;
  place-items:center;
}
.tx-search-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tx-search-box input{
  width:100%;
  min-width:0;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#172235;
  font:inherit;
  font-size:11px;
  padding:0!important;
  height:100%;
}
.tx-search-box input::-webkit-search-cancel-button{cursor:pointer}

.tx-export-menu-wrap{
  position:relative;
  flex:0 0 auto;
}
.tx-export-toggle{
  height:38px;
  min-width:78px;
  border:1px solid #cfe0ff;
  border-radius:11px;
  background:#edf4ff;
  color:#175cd3;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.tx-export-toggle:hover,.tx-export-toggle.is-open{
  background:#e1ecff;
  border-color:#aac8ff;
}
.tx-export-chevron{
  font-size:13px;
  line-height:1;
  transition:transform .16s ease;
}
.tx-export-toggle.is-open .tx-export-chevron{transform:rotate(180deg)}
.tx-export-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:190px;
  padding:6px;
  border:1px solid #dfe5ee;
  border-radius:13px;
  background:#fff;
  box-shadow:0 14px 34px rgba(16,24,40,.16);
  z-index:50;
}
.tx-export-menu[hidden]{display:none!important}
.tx-export-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:#344054;
  border-radius:9px;
  padding:8px 9px;
  display:grid;
  gap:2px;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.tx-export-menu button:hover{background:#f4f7fb}
.tx-export-menu button b{font-size:10px;color:#175cd3}
.tx-export-menu button small{font-size:8px;color:#8a95a5}

/* Search sudah berada di luar panel filter. */
.tx-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* Tombol edit dibuat lebih jelas dan tetap mudah ditekan. */
.tx-right .tx-actions .tx-edit-btn{
  min-width:36px;
  border:0;
  background:#edf4ff;
  color:#175cd3;
  border-radius:7px;
  padding:4px 7px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.tx-right .tx-actions button[data-delete-id]{
  border:0;
  background:#fff1f1;
  color:#b42318;
  border-radius:7px;
  padding:4px 7px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
#saveTransactionEdit:disabled{opacity:.65;cursor:wait}

@media(max-width:760px){
  .tx-search-export-row{padding:8px 10px 7px;gap:7px}
  .tx-search-box{height:40px;border-radius:12px}
  .tx-search-box input{font-size:11px}
  .tx-export-toggle{height:40px;min-width:74px;border-radius:12px}
  .tx-export-menu{width:176px}
  .tx-filter-summary{padding-top:2px}
}
@media(max-width:390px){
  .tx-search-export-row{padding-left:9px;padding-right:9px}
  .tx-export-toggle{min-width:68px;padding:0 9px}
}


/* ===== v10: rincian saldo per dompet ===== */
.balance-stat { cursor: pointer; }
.balance-stat:focus-visible { outline: 3px solid rgba(23, 92, 211, .22); outline-offset: 3px; }
.balance-detail-hint { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; opacity: .72; }
.wallet-balance-dialog { border: 0; padding: 0; background: transparent; width: min(92vw, 460px); }
.wallet-balance-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px); }
.wallet-balance-card { width: 100%; max-width: none; margin: 0; }
.wallet-balance-total { margin: 4px 0 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(23,92,211,.12), rgba(23,92,211,.04)); border: 1px solid rgba(23,92,211,.14); }
.wallet-balance-total small { display: block; margin-bottom: 4px; color: var(--muted, #64748b); }
.wallet-balance-total strong { display: block; font-size: 24px; line-height: 1.15; }
.wallet-balance-list { display: grid; gap: 9px; max-height: min(55vh, 420px); overflow: auto; }
.wallet-balance-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(127,127,127,.15); border-radius: 14px; background: var(--card, #fff); }
.wallet-balance-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(23,92,211,.08); font-size: 19px; }
.wallet-balance-name { min-width: 0; }
.wallet-balance-name b, .wallet-balance-name small { display: block; }
.wallet-balance-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-balance-name small { margin-top: 2px; color: var(--muted, #64748b); font-size: 11px; }
.wallet-balance-row > strong { white-space: nowrap; font-size: 14px; }
@media (max-width: 600px) {
  .balance-detail-hint { font-size: 9px; }
  .wallet-balance-dialog { width: calc(100vw - 24px); }
  .wallet-balance-card { padding: 16px; border-radius: 20px; }
  .wallet-balance-total strong { font-size: 22px; }
  .wallet-balance-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; padding: 10px; }
  .wallet-balance-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
  .wallet-balance-row > strong { font-size: 13px; }
}

/* ===== v12 - Email pemulihan, verifikasi, dan reset password/PIN ===== */
.registration-email-note,.recovery-note{display:block;margin:-2px 0 4px;color:#7b8493;font-size:11px;line-height:1.45}
.recovery-divider{display:flex;align-items:center;gap:10px;margin:7px 0 1px;color:#98a2b3;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.recovery-divider::before,.recovery-divider::after{content:"";height:1px;flex:1;background:#e5e9f0}
.recovery-token-input{letter-spacing:7px;text-align:center;font-weight:800;font-size:21px!important}
.recovery-resend-form{margin-top:12px}
.app-flash-message{margin:0 0 12px;padding:11px 13px;border-radius:13px;font-size:12px;font-weight:700;line-height:1.45}
.app-flash-message.success{background:#ecfdf3;border:1px solid #abefc6;color:#067647}
.app-flash-message.error{background:#fff1f1;border:1px solid #ffd2d2;color:#b42318}
.email-security-banner{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;margin:0 0 14px;padding:12px 13px;border:1px solid #f2d28d;border-radius:16px;background:linear-gradient(135deg,#fff9e9,#fffdf7);box-shadow:0 4px 14px rgba(146,91,0,.06)}
.email-security-banner-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff0be;color:#9a6700}
.email-security-banner-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.email-security-banner-copy{min-width:0;display:grid;gap:2px}
.email-security-banner-copy b{font-size:12px;color:#5f4300}
.email-security-banner-copy span{font-size:10px;line-height:1.4;color:#8a6a1e}
.email-security-banner>button{border:0;border-radius:10px;padding:8px 10px;background:#9a6700;color:#fff;font-size:10px;font-weight:850;cursor:pointer}
.email-menu-state{margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:999px;font-size:9px;font-weight:900;background:#fff2c5;color:#9a6700}
.email-menu-state.ok{background:#dcfae6;color:#067647}
.email-security-dialog{width:min(520px,calc(100% - 28px))}
.email-security-card{max-height:min(86dvh,760px);overflow:auto}
.email-security-head{align-items:flex-start}
.email-status-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:15px;border:1px solid #e4e7ec;background:#f8fafc;margin-bottom:15px}
.email-status-card.verified{border-color:#b7e5c8;background:#f0fbf4}
.email-status-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:#175cd3;font-size:16px;font-weight:900}
.email-status-card.verified .email-status-icon{background:#dcfae6;color:#067647}
.email-status-card>div{min-width:0;display:grid;gap:3px}
.email-status-card b{font-size:12px;color:#172235}
.email-status-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#667085;font-size:10px}
.email-verified-badge{padding:4px 7px;border-radius:999px;background:#dcfae6;color:#067647;font-size:8px;font-weight:900;letter-spacing:.05em}
.email-security-form{display:grid;gap:8px;padding:14px;border:1px solid #e4e7ec;border-radius:16px;background:#fff}
.email-security-form label{margin:0;font-size:12px;font-weight:800;color:#344054}
.email-security-form input,.email-token-form input{width:100%;border:1px solid #d0d5dd;border-radius:12px;padding:12px 13px;font-size:15px;outline:none;background:#fff}
.email-security-form input:focus,.email-token-form input:focus{border-color:#2463d4;box-shadow:0 0 0 3px rgba(36,99,212,.10)}
.email-security-form small{font-size:10px;line-height:1.45;color:#7b8493}
.email-token-section{margin-top:13px;padding:14px;border:1px solid #dbe5f5;border-radius:16px;background:#f8fbff}
.email-token-copy{display:grid;gap:3px;margin-bottom:10px}
.email-token-copy b{font-size:12px;color:#172235}
.email-token-copy small{font-size:10px;line-height:1.45;color:#667085}
.email-token-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.email-token-form input{text-align:center;letter-spacing:6px;font-weight:800;font-size:18px}
.email-resend-form{text-align:center;margin-top:10px}
.email-security-info{display:grid;gap:4px;margin-top:13px;padding:13px 14px;border-radius:15px;background:#f0fbf4;border:1px solid #c7ecd4}
.email-security-info b{font-size:12px;color:#067647}
.email-security-info span{font-size:10px;line-height:1.5;color:#39734f}
@media(max-width:760px){
  .email-security-banner{grid-template-columns:34px minmax(0,1fr);padding:10px 11px;border-radius:14px}
  .email-security-banner-icon{width:34px;height:34px;border-radius:11px}
  .email-security-banner>button{grid-column:1/-1;width:100%;padding:9px}
  .email-security-dialog{width:100%!important;max-width:none!important}
  .email-security-card{max-height:88dvh}
  .email-token-form{grid-template-columns:1fr}
  .email-token-form .btn{width:100%}
}


/* ===== v14 - Email & Keamanan: ubah password dan PIN ===== */
.account-security-section{display:grid;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid #eaecf0}
.account-security-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.account-security-title>div{display:grid;gap:3px;min-width:0}
.account-security-title b{font-size:13px;color:#172235}
.account-security-title small{font-size:10px;line-height:1.45;color:#667085}
.account-security-badge{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#eff8ff;color:#175cd3;font-size:8px;font-weight:900;letter-spacing:.07em}
.account-username-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid #e4e7ec;border-radius:15px;background:#f8fafc}
.account-username-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#175cd3;font-size:18px;font-weight:900}
.account-username-copy{display:grid;gap:1px;min-width:0}
.account-username-copy small{font-size:9px;color:#98a2b3;text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.account-username-copy strong{font-size:13px;color:#172235;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-username-copy span{font-size:9px;color:#667085}
.account-locked-chip{padding:5px 7px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:8px;font-weight:900;letter-spacing:.05em}
.security-change-card{border:1px solid #e4e7ec;border-radius:16px;background:#fff;overflow:hidden}
.security-change-card[open]{border-color:#cad9f2;box-shadow:0 5px 18px rgba(16,24,40,.05)}
.security-change-card>summary{list-style:none;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;cursor:pointer;user-select:none}
.security-change-card>summary::-webkit-details-marker{display:none}
.security-change-card>summary>span:nth-child(2){display:grid;gap:2px;min-width:0}
.security-change-card>summary b{font-size:12px;color:#172235}
.security-change-card>summary small{font-size:9.5px;line-height:1.4;color:#667085}
.security-change-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eef4ff;color:#175cd3;font-size:12px;font-weight:900}
.security-change-icon.pin{background:#f4ebff;color:#7f56d9;font-size:16px}
.security-chevron{color:#98a2b3;font-size:16px;transition:transform .18s ease}
.security-change-card[open] .security-chevron{transform:rotate(180deg)}
.security-change-form{display:grid;gap:8px;padding:13px 14px 14px;border-top:1px solid #eef1f5;background:#fbfcfe}
.security-change-form label{margin:0;font-size:11px;font-weight:800;color:#344054}
.security-change-form .secret-field{margin:0}
.security-change-form .secret-field>input{width:100%;min-height:44px;border:1px solid #d0d5dd;border-radius:12px;padding:11px 42px 11px 12px;font-size:14px;background:#fff;outline:none}
.security-change-form .secret-field>input:focus{border-color:#2463d4;box-shadow:0 0 0 3px rgba(36,99,212,.10)}
.security-form-note{padding:9px 10px;border-radius:11px;background:#f2f6fc;color:#667085;font-size:9.5px;line-height:1.45}
@media(max-width:640px){
  .account-security-title{align-items:center}
  .account-security-title small{font-size:9.5px}
  .account-username-row{grid-template-columns:34px minmax(0,1fr) auto;padding:10px}
  .account-username-icon,.security-change-icon{width:34px;height:34px;border-radius:10px}
  .security-change-card>summary{grid-template-columns:34px minmax(0,1fr) auto;padding:10px}
  .security-change-form{padding:12px}
}

/* ===== v15 - Daftar perangkat login ===== */
.device-security-block{display:grid;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid #eaecf0}
.device-security-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.device-security-head>div{display:grid;gap:3px;min-width:0}
.device-security-head b{font-size:13px;color:#172235}
.device-security-head small{font-size:10px;line-height:1.5;color:#667085}
.device-count-badge{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:8px;font-weight:900;letter-spacing:.06em}
.device-list{display:grid;gap:8px}
.device-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #e4e7ec;border-radius:15px;background:#fff;box-shadow:0 3px 10px rgba(16,24,40,.03)}
.device-card.current{border-color:#b7d5ff;background:linear-gradient(135deg,#f7fbff,#fff)}
.device-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef4ff;color:#175cd3;font-size:20px;font-weight:900}
.device-card.current .device-icon{background:#e4f1ff;color:#0b5bd3}
.device-card-copy{display:grid;gap:2px;min-width:0}
.device-card-title{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.device-card-title strong{font-size:12px;color:#172235;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.device-current-chip{padding:3px 6px;border-radius:999px;background:#dcfce7;color:#087443;font-size:7.5px;font-weight:900;letter-spacing:.05em}
.device-card-copy>span{font-size:9.5px;color:#475467}
.device-card-copy>small{font-size:8.8px;line-height:1.4;color:#98a2b3}
.device-card-action{display:flex;align-items:center;justify-content:flex-end}
.device-card-action form{margin:0}
.device-revoke-btn{border:1px solid #fecdca;border-radius:10px;padding:7px 9px;background:#fff5f4;color:#b42318;font-size:9px;font-weight:850;cursor:pointer}
.device-revoke-btn:hover{background:#fee4e2}
.device-safe-label{padding:6px 8px;border-radius:10px;background:#ecfdf3;color:#067647;font-size:8.5px;font-weight:850;white-space:nowrap}
.device-revoke-all-form{margin:0}
.device-revoke-all-btn{border-color:#fecdca!important;background:#fff!important;color:#b42318!important}
.device-security-note{padding:10px 11px;border-radius:12px;background:#fffaeb;border:1px solid #fedf89;color:#8a6100;font-size:9.5px;line-height:1.5}
.device-empty-state{padding:16px;border:1px dashed #d0d5dd;border-radius:14px;text-align:center;color:#667085;font-size:10px;background:#fafafa}

@media(max-width:600px){
  .device-security-head{align-items:center}
  .device-card{grid-template-columns:36px minmax(0,1fr);padding:10px;gap:9px}
  .device-icon{width:36px;height:36px;border-radius:11px;font-size:17px}
  .device-card-action{grid-column:2;justify-content:flex-start;margin-top:3px}
  .device-revoke-btn{padding:7px 10px}
  .device-safe-label{padding:5px 8px}
}


/* ===== v16 - Daftar perangkat realtime ===== */
.device-live-status{display:flex!important;align-items:center;gap:5px;color:#98a2b3!important}
.device-live-status>i,.device-safe-label>i{width:6px;height:6px;border-radius:50%;background:#98a2b3;display:inline-block;flex:0 0 auto}
.device-live-status.online{color:#067647!important;font-weight:750}
.device-live-status.online>i,.device-safe-label>i{background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.10)}
.device-safe-label{display:inline-flex;align-items:center;gap:5px}
.device-card{transition:border-color .18s ease,background .18s ease,opacity .18s ease}
.device-card [data-realtime-revoke]:disabled{opacity:.55;cursor:wait}

/* ===== v17 PREMIUM COUPON ===== */
.premium-coupon-box{margin:-1px 0 17px;padding:11px;border:1px solid #dfe6ef;border-radius:12px;background:#fafcff}
.premium-coupon-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.premium-coupon-input-row input{margin:0!important;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.premium-coupon-input-row .btn{margin:0!important;white-space:nowrap;min-height:38px}
.premium-coupon-status{margin-top:8px;padding:8px 9px;border-radius:9px;background:#f3f5f8;color:#667085;font-size:9px;line-height:1.45}
.premium-coupon-status b,.premium-coupon-status span{display:block}.premium-coupon-status span{margin-top:2px;font-size:8px}
.premium-coupon-status.checking{background:#f1f6ff;color:#175cd3}
.premium-coupon-status.success{background:#eaf8ef;color:#067647;border:1px solid #c9ead5}
.premium-coupon-status.error{background:#fff0ef;color:#b42318;border:1px solid #f4c9c6}
.premium-original-amount{display:block;margin-bottom:2px;color:#98a2b3;font-size:11px;text-decoration:line-through}
.premium-invoice-lines .coupon-discount{color:#067647}
.admin-payment-price{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:8px;color:#667085}
.admin-payment-price del{color:#98a2b3}.admin-payment-price span{padding:3px 6px;border-radius:7px;background:#eaf8ef;color:#067647;font-weight:800}
.admin-coupon-row{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:10px;align-items:end;padding:12px;background:#fff;border:1px solid #e3e8ef;border-radius:14px}
.admin-coupon-row.expired{background:#fff9f8;border-color:#f0d0cc}
.admin-coupon-fields{display:grid;grid-template-columns:1.1fr 1fr .8fr 1fr 80px;gap:8px;align-items:end}
.admin-coupon-fields label{margin:0;font-size:9px;font-weight:800;color:#667085}
.admin-coupon-fields input,.admin-coupon-fields select{width:100%;margin-top:4px;border:1px solid #dce2eb;border-radius:8px;padding:7px 8px;font-size:10px;background:#fff}
.admin-coupon-info{align-self:center;display:grid;gap:2px;padding:8px 9px;border-radius:10px;background:#f6f8fb}
.admin-coupon-info span{font-size:13px;font-weight:900;color:#175cd3}.admin-coupon-info small{font-size:8px;color:#7a8798}
.admin-coupon-row.expired .admin-coupon-info span{color:#b42318}
@media(max-width:900px){.admin-coupon-row{grid-template-columns:1fr}.admin-coupon-fields{grid-template-columns:1fr 1fr}.admin-coupon-info{justify-self:start}.admin-coupon-row .row-actions{justify-content:flex-end}}
@media(max-width:600px){.premium-coupon-input-row{grid-template-columns:1fr}.premium-coupon-input-row .btn{width:100%}.admin-coupon-fields{grid-template-columns:1fr}.admin-coupon-row .row-actions{display:grid;grid-template-columns:1fr 1fr}.admin-coupon-row .row-actions button{width:100%}}


/* === v18: Notifikasi Super Admin untuk pembelian Premium === */
.admin-notification-badge,.admin-tab-notification-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d92d20;color:#fff;font-size:10px;font-weight:800;line-height:1;box-shadow:0 2px 7px rgba(217,45,32,.24)}
.admin-notification-badge[hidden],.admin-tab-notification-badge[hidden]{display:none!important}
.admin-tab-notification-badge{min-width:18px;height:18px;font-size:9px;margin-left:4px;vertical-align:middle}
.admin-notification-list{display:grid;gap:10px}
.admin-notification-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px 13px;border:1px solid #e4e7ec;border-radius:14px;background:#fff;transition:.18s ease}
.admin-notification-row.unread{background:#f5f9ff;border-color:#b2ccff;box-shadow:0 4px 14px rgba(23,92,211,.06)}
.admin-notification-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#edf4ff;color:#175cd3;font-weight:900;font-size:18px}
.admin-notification-row.unread .admin-notification-icon{background:#175cd3;color:#fff}
.admin-notification-copy{min-width:0}.admin-notification-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.admin-notification-title b{font-size:13px;color:#101828}.admin-notification-title span{font-size:8px;font-weight:900;letter-spacing:.08em;padding:3px 6px;border-radius:999px;background:#d92d20;color:#fff}
.admin-notification-copy p{margin:4px 0 3px;color:#475467;font-size:12px;line-height:1.45}.admin-notification-copy small{display:block;color:#98a2b3;font-size:10px}
.admin-notification-open{border:0;border-radius:10px;padding:8px 10px;background:#edf4ff;color:#175cd3;font-size:11px;font-weight:800;cursor:pointer}
.admin-payment-highlight{outline:3px solid rgba(23,92,211,.18);box-shadow:0 0 0 7px rgba(23,92,211,.06)!important}
@media(max-width:640px){.admin-notification-row{grid-template-columns:36px minmax(0,1fr);padding:11px}.admin-notification-icon{width:36px;height:36px}.admin-notification-open{grid-column:2;justify-self:start;padding:7px 10px}.admin-notification-section .feature-toolbar{align-items:flex-start;gap:10px}.admin-notification-section .feature-toolbar .btn{font-size:10px;padding:7px 9px;white-space:nowrap}}

/* Mobile navigation: Lainnya opens a right-side account drawer. */
@media (max-width:760px){
  .sidebar-toggle{display:none!important}
  .app-main{padding-top:calc(12px + env(safe-area-inset-top))!important}
  body.has-sync-banner .app-main{padding-top:calc(74px + env(safe-area-inset-top))!important}
  .sidebar-backdrop{background:rgba(15,23,42,.46);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .app-sidebar{
    inset:0 0 0 auto;width:min(380px,92vw);box-sizing:border-box;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    border:0;border-left:1px solid #e1e9f5;border-radius:28px 0 0 28px;
    background:linear-gradient(155deg,#edf4ff 0,#f8faff 230px,#f8faff 100%);
    box-shadow:-18px 0 60px rgba(15,23,42,.22)!important;
    transform:translateX(105%);visibility:hidden;
    transition:transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s;
  }
  .app-sidebar.is-open{transform:translateX(0);visibility:visible}
  .sidebar-head{flex-shrink:0;padding:2px 0 16px;border-bottom:0;gap:8px}
  .sidebar-brand{gap:9px}.sidebar-brand-mark{flex:0 0 40px;width:40px;height:40px;border-radius:13px;box-shadow:0 5px 15px #dbe5f4}
  .sidebar-brand b{font-size:14px;color:#152b4e}.sidebar-brand small{font-size:10px;color:#61718b}
  .sidebar-close{width:40px;height:40px;flex-basis:40px;border:1px solid #dce5f2;background:#fff;color:#445775;border-radius:14px}
  .sidebar-profile{flex-shrink:0;margin:0 0 22px;padding:18px 16px;gap:13px;border:0;border-radius:22px;background:linear-gradient(120deg,#194b9c,#3278df);color:#fff;box-shadow:0 10px 24px rgba(37,99,217,.18)}
  .sidebar-profile>div{min-width:0}.sidebar-profile strong{overflow-wrap:anywhere;font-size:16px}
  .sidebar-profile small{color:#e0ebff;font-size:11px;margin-bottom:4px}
  .sidebar-profile .avatar.small{width:48px;height:48px;flex:0 0 48px;border-radius:16px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:20px}
  .sidebar-profile .account-plan-badge{margin-top:7px}
  .sidebar-section-label{padding:0 5px 10px;font-size:10px;letter-spacing:1.2px;color:#627693}
  .sidebar-menu{gap:8px;padding-bottom:18px}
  .sidebar-menu-item{grid-template-columns:42px minmax(0,1fr) auto;gap:11px;min-height:68px;padding:11px;background:#fff;border:1px solid #e5ecf6;border-radius:18px;box-shadow:0 2px 5px rgba(32,57,92,.025)}
  .sidebar-menu-item b{font-size:13px;color:inherit}.sidebar-menu-item small{font-size:11px;line-height:1.45;color:#64748b}
  .sidebar-menu-icon{background:#edf3ff;border-radius:14px;color:#2861bb}
  .sidebar-menu-item-active{border-color:#c5d9fa}
  .sidebar-menu-item-active .sidebar-menu-icon{background:#fff}
  .sidebar-arrow{font-size:22px;color:#8396b1}
  .sidebar-local-status{flex-shrink:0;margin-top:auto;padding:13px;border-radius:16px;background:#edf8f2}
  .sidebar-logout-form{flex-shrink:0;margin-top:0;padding-top:12px}
  .sidebar-logout{min-height:46px;border-radius:16px;font-weight:700}
  body.sidebar-open .mobile-nav-item[data-view].active{background:transparent!important;color:#7c8799!important}
  .app-sidebar :focus-visible{outline:2px solid #2563d9;outline-offset:2px}
  .mobile-bottom-nav #mobileOpenMore:focus-visible{outline:2px solid #2563d9!important;outline-offset:-2px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .app-sidebar,.sidebar-backdrop{transition:none}
}

/* Transaction detail — invoice preview */
.tx-right .tx-actions{flex-wrap:wrap}
.tx-right .tx-actions .tx-detail-btn{color:#175cd3;background:#eef4ff;border:1px solid #d8e5fc;border-radius:8px;padding:5px 8px;min-height:30px;font-weight:700}
dialog.tx-detail-dialog{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 32px);max-width:600px;border-radius:22px;padding:0;background:#fff;overflow:auto;overscroll-behavior:contain;color:#172b49}
.tx-detail-toolbar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;background:#f5f8fc;border-bottom:1px solid #e5ebf4;padding:12px 20px;font-size:12px;font-weight:700;color:#61738c}
.tx-detail-close{width:40px;height:40px;border:1px solid #dde5f0;border-radius:12px;background:#fff;font-size:25px;color:#405675;cursor:pointer}
.tx-detail-close:focus-visible,.tx-detail-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.tx-invoice{padding:28px 30px}
.tx-invoice-brand{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tx-invoice-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#2465c8}
.tx-invoice-brand h2{margin:6px 0 0;font-size:25px;letter-spacing:-.6px}
.tx-invoice-status{display:inline-block;flex-shrink:0;padding:6px 9px;border-radius:20px;background:#e9f8f0;color:#16724c;font-size:10px;font-weight:800}
.tx-invoice-status.pending{background:#fff3d7;color:#88601b}
.tx-invoice-reference{display:flex;justify-content:space-between;gap:16px;margin:18px 0;color:#67768a;font-size:12px;overflow-wrap:anywhere}
.tx-invoice-amount{padding:22px;border:1px solid #dce8fb;border-radius:18px;background:#f0f5ff;display:flex;flex-direction:column;gap:6px;color:#1e57a9}
.tx-invoice-amount.expense{background:#fff4f0;border-color:#f7dfd3;color:#a44922}
.tx-invoice-amount.income{background:#edf9f3;border-color:#d5edde;color:#16734e}
.tx-invoice-amount>span{font-size:12px;font-weight:700}.tx-invoice-amount strong{font-size:32px;line-height:1.25;overflow-wrap:anywhere}.tx-invoice-amount small{font-size:11px}
.tx-invoice-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px;margin:25px 0;padding:0}
.tx-invoice-meta dt{font-size:11px;color:#718197;margin-bottom:6px}.tx-invoice-meta dd{margin:0;font-size:13px;font-weight:650;overflow-wrap:anywhere}
.tx-invoice-note{border-top:1px dashed #dce4ef;padding-top:18px}.tx-invoice-note h3{font-size:11px;color:#718197;margin:0 0 8px}.tx-invoice-note p{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.tx-invoice-total{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding:18px 0;border-top:2px solid #183d71;border-bottom:1px solid #dce4ef;font-size:13px}.tx-invoice-total strong{font-size:18px;overflow-wrap:anywhere;text-align:right}
.tx-invoice-proof{margin-top:18px;border:1px solid #e2e9f3;border-radius:12px;padding:12px}.tx-invoice-proof summary{cursor:pointer;color:#175cd3;font-size:12px;font-weight:700}.tx-invoice-proof img{display:block;max-width:100%;height:auto;margin:14px auto 0;border-radius:8px}.tx-invoice-proof img[hidden]{display:none}.tx-proof-error{font-size:12px;color:#8c6330}
.tx-invoice-foot{margin-top:24px;text-align:center;color:#7b899d;font-size:10px;line-height:1.8}
@media(max-width:760px){
  dialog.tx-detail-dialog{max-height:calc(100dvh - 24px);border-radius:20px;width:calc(100% - 20px)}
  .tx-invoice{padding:22px 18px}.tx-detail-toolbar{padding:10px 16px}
  .tx-invoice-brand{flex-wrap:wrap}.tx-invoice-brand h2{font-size:23px}.tx-invoice-amount strong{font-size:28px}
  .tx-invoice-meta{gap:18px 12px}.tx-right .tx-actions .tx-detail-btn{min-height:34px;padding:5px 8px}
}

/* Summary actions: privacy and reload stay side by side. */
.balance-stat-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.balance-stat-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:390px){
  .balance-stat-content{gap:6px}
  .balance-stat-actions{gap:4px}
  .balance-stat-actions .balance-visibility-toggle{width:32px;height:34px;flex-basis:32px}
}

.initial-wallet-dialog{width:min(580px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto}
.initial-wallet-add{margin:4px 0 16px}
.initial-wallet-row{padding:16px;border:1px solid #e1e8f2;border-radius:15px;background:#f8faff;margin-bottom:12px}
.initial-wallet-heading{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;overflow-wrap:anywhere}.initial-wallet-heading b{font-size:15px;color:#1e3d6b}.initial-wallet-heading span{font-size:12px;color:#667891}
.initial-wallet-row input:disabled{background:#eaf0f7;color:#7b8899}

/* Smart Chat transaction confirmation */
.chat-confirm-wrap{max-width:100%;width:100%}
.chat-confirm-card{width:min(720px,100%);background:#fff;border:1px solid #dce7f5;border-radius:18px;padding:14px;box-shadow:0 10px 28px rgba(22,55,102,.08)}
.chat-confirm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.chat-confirm-head b{display:block;font-size:13px;color:#173c70}.chat-confirm-head small{display:block;margin-top:3px;color:#728198;font-size:10px}.chat-confirm-head>span{font-size:9px;font-weight:800;background:#edf4ff;color:#245cae;padding:5px 8px;border-radius:999px;white-space:nowrap}
.chat-confirm-warning{font-size:10px;line-height:1.5;background:#fff7e4;border:1px solid #f6dfaa;color:#8b6413;border-radius:10px;padding:8px 10px;margin-bottom:10px}
.chat-confirm-list{display:grid;gap:10px}.chat-confirm-row{border:1px solid #e6ebf2;border-radius:14px;padding:10px;background:#f9fbfe}.chat-confirm-number{font-size:9px;font-weight:900;color:#59708f;margin-bottom:7px}.chat-confirm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chat-confirm-fields label{display:grid;gap:4px;font-size:9px;font-weight:800;color:#5f7088}.chat-confirm-fields input,.chat-confirm-fields select{width:100%;min-width:0;border:1px solid #d7e0ec;border-radius:9px;background:#fff;padding:8px 9px;font-size:11px;color:#243b5a}.chat-confirm-note{display:block;color:#75859a;font-size:9px;margin-top:7px;line-height:1.45}.chat-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.chat-confirm-actions button{border-radius:10px;padding:9px 12px;font-size:10px;font-weight:800;cursor:pointer}.chat-confirm-actions .secondary-btn{border:1px solid #d8e1ed;background:#fff;color:#52657d}.chat-confirm-actions .primary-btn{border:1px solid #195bbf;background:#195bbf;color:#fff}

.initial-wallet-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.initial-wallet-fields label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#53657d}.initial-wallet-row>small{display:block;margin-top:9px;color:#7c8a9d;font-size:10px;line-height:1.5}.money-caption{display:block;font-size:8px;color:#75869c;text-align:right;font-weight:700}.history-row.is-undone{opacity:.65}.status-pill.queued{background:#edf4ff;color:#245cae}.status-pill.failed{background:#fff1f1;color:#b42318}.status-pill.conflict{background:#fff0db;color:#9a5700}.sync-queue-row.conflict{border-color:#f0c779;background:#fffaf1}.sync-queue-row.failed{border-color:#f1c8c8;background:#fffafa}

@media(max-width:600px){.chat-confirm-fields,.initial-wallet-fields{grid-template-columns:1fr}.chat-confirm-actions button{flex:1}.chat-confirm-card{padding:11px}.chat-confirm-head{flex-direction:column}.chat-confirm-head>span{align-self:flex-start}}


/* ===== Bantuan & FAQ v3 ===== */
.help-faq-dialog{width:min(760px,calc(100% - 28px));max-width:760px;border-radius:24px;overflow:hidden}
.help-faq-card{padding:0;height:min(88dvh,840px);max-height:min(88dvh,840px);display:flex;flex-direction:column;overflow:hidden;background:#f7f9fc}
.help-faq-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 14px;background:#fff;border-bottom:1px solid #e8edf4}
.help-faq-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}.help-faq-title-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:14px;background:#eaf2ff;color:#175cd3;font-size:22px;font-weight:900}.help-faq-title-wrap h3{margin:0;color:#172235;font-size:20px}.help-faq-title-wrap p{margin:3px 0 0;color:#7b8797;font-size:11px;line-height:1.45}
.help-faq-search-wrap{position:relative;flex:0 0 auto;margin:14px 18px 10px}.help-faq-search-wrap>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:#8995a5;stroke-width:2;stroke-linecap:round}.help-faq-search-wrap input{width:100%;height:45px;padding:0 42px;border:1px solid #dce3ed;border-radius:14px;background:#fff;font-size:13px;outline:none;box-shadow:0 4px 14px rgba(24,39,75,.03)}.help-faq-search-wrap input:focus{border-color:#175cd3;box-shadow:0 0 0 3px rgba(23,92,211,.1)}.help-faq-search-wrap>button{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:9px;background:#f0f3f7;color:#687587;font-size:18px;cursor:pointer}
.help-faq-categories{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px;overflow:visible}.help-faq-categories button{border:1px solid #dfe6ef;background:#fff;color:#596779;border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;transition:.15s ease}.help-faq-categories button:hover{border-color:#bfd0e8;color:#175cd3}.help-faq-categories button.active{background:#175cd3;border-color:#175cd3;color:#fff;box-shadow:0 4px 10px rgba(23,92,211,.16)}
.help-faq-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 18px 16px;scrollbar-width:thin;scrollbar-color:#ccd5e1 transparent}
.help-faq-results-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 2px 10px}.help-faq-results-line b{font-size:11px;color:#354154}.help-faq-results-line span{font-size:9.5px;color:#919baa;text-align:right}
.help-faq-list{display:block;overflow:visible;padding:0}.help-faq-item{display:block;width:100%;min-height:0;margin:0 0 8px;border:1px solid #e1e7ef;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(24,39,75,.025)}.help-faq-item[hidden]{display:none!important}.help-faq-item summary{list-style:none;display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-size:11px;font-weight:800;line-height:1.4;color:#253246;user-select:none}.help-faq-item summary::-webkit-details-marker{display:none}.help-faq-item summary>span{display:block;min-width:0;flex:1}.help-faq-item summary i{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:8px;background:#eff4fb;color:#175cd3;font-style:normal;font-size:16px;line-height:1;transition:.18s}.help-faq-item[open]{border-color:#cddbf0;box-shadow:0 6px 16px rgba(24,39,75,.045)}.help-faq-item[open] summary{color:#175cd3}.help-faq-item[open] summary i{transform:rotate(45deg);background:#175cd3;color:#fff}.help-faq-answer{padding:11px 14px 13px;color:#5b6879;font-size:10.5px;line-height:1.65;border-top:1px solid #eef1f5}.help-faq-answer b{color:#2b394d}
.help-faq-group-title{display:flex;align-items:center;gap:9px;margin:15px 2px 7px;padding:0;color:#344258}.help-faq-group-title:first-child{margin-top:2px}.help-faq-group-title[hidden]{display:none!important}.help-faq-group-title>span{width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;border-radius:9px;background:#eaf2ff;color:#175cd3}.help-faq-group-title>span svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.help-faq-group-title>div{display:grid;gap:1px}.help-faq-group-title b{font-size:11px;line-height:1.2}.help-faq-group-title small{font-size:8.5px;line-height:1.35;color:#929cab;font-weight:600}
.help-faq-empty{text-align:center;padding:32px 18px;color:#7d8998}.help-faq-empty[hidden]{display:none!important}.help-faq-empty>span{margin:0 auto 8px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#edf3fb;color:#175cd3;font-weight:900}.help-faq-empty b{display:block;color:#344156;font-size:13px}.help-faq-empty p{margin:5px 0 0;font-size:11px}
.help-faq-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e4e9f0}.help-faq-footer>div{display:grid;gap:2px}.help-faq-footer>div b{font-size:11px;color:#2b384b}.help-faq-footer>div span{font-size:9.5px;color:#8b95a4}.help-faq-footer .btn{white-space:nowrap}
@media(max-width:760px){.help-faq-dialog{width:100%!important;max-width:none!important;max-height:none!important;height:92dvh!important;margin:auto 0 0!important;border-radius:24px 24px 0 0!important}.help-faq-card{height:92dvh;max-height:92dvh}.help-faq-head{padding:15px 15px 12px}.help-faq-title-icon{width:36px;height:36px;flex-basis:36px;border-radius:12px;font-size:19px}.help-faq-title-wrap h3{font-size:17px}.help-faq-title-wrap p{font-size:9.5px}.help-faq-search-wrap{margin:11px 12px 8px}.help-faq-categories{flex-wrap:nowrap;gap:6px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}.help-faq-categories::-webkit-scrollbar{display:none}.help-faq-categories button{padding:8px 11px}.help-faq-body{padding:0 12px 12px}.help-faq-results-line{padding:2px 2px 8px}.help-faq-results-line span{display:none}.help-faq-item summary{min-height:46px;padding:11px 12px;font-size:10.5px}.help-faq-answer{padding:10px 12px 12px;font-size:10.5px}.help-faq-group-title{margin-top:13px}.help-faq-group-title small{display:none}.help-faq-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.help-faq-footer>div span{display:none}.help-faq-footer .btn{padding:10px 12px;font-size:11px}}



/* ===== Biometric security (Android native bridge) ===== */
.biometric-security-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:14px 0;
  padding:14px;
  border:1px solid #dbe4f0;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.biometric-security-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:#eaf2ff;color:#175cd3;
  font-size:24px;font-weight:800;
}
.biometric-security-copy{min-width:0;display:grid;gap:4px}
.biometric-security-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.biometric-security-title-row b{font-size:14px;color:#162033}
.biometric-security-copy small{display:block;color:#526173;line-height:1.45}
.biometric-security-note{display:block;color:#7b8796;font-size:11px;line-height:1.4}
.biometric-security-state{
  display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;
  font-size:9px;font-weight:800;letter-spacing:.05em;
}
.biometric-security-state.enabled{background:#e8f8ef;color:#087443}
.biometric-security-state.available{background:#eaf2ff;color:#175cd3}
.biometric-security-state.unavailable{background:#f1f3f6;color:#687386}
.biometric-security-toggle{min-width:104px;white-space:nowrap}
@media(max-width:620px){
  .biometric-security-card{grid-template-columns:42px minmax(0,1fr);align-items:start}
  .biometric-security-icon{width:42px;height:42px}
  .biometric-security-toggle{grid-column:1/-1;width:100%}
}

/* =========================================================
   ADMIN: BROADCAST EMAIL PENGGUNA
   ========================================================= */
.admin-email-broadcast-section{position:relative}
.admin-broadcast-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.admin-broadcast-form label{display:grid;gap:5px;margin:0;font-size:9px;font-weight:850;color:#667085}
.admin-broadcast-form input,.admin-broadcast-form select,.admin-broadcast-form textarea{width:100%;box-sizing:border-box;border:1px solid #dce3ed;border-radius:10px;background:#fff;color:#172235;padding:9px 10px;font:inherit;font-size:10px;outline:none;transition:.15s ease}
.admin-broadcast-form textarea{min-height:105px;resize:vertical;line-height:1.55}
.admin-broadcast-form input:focus,.admin-broadcast-form select:focus,.admin-broadcast-form textarea:focus{border-color:#8fb6ff;box-shadow:0 0 0 3px rgba(23,92,211,.08)}
.admin-broadcast-wide{grid-column:1/-1}
.admin-broadcast-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.admin-broadcast-progress{min-width:0;color:#667085;font-size:9px;line-height:1.45}
.admin-broadcast-history{margin-top:12px}
.admin-broadcast-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid #e3e8ef;border-radius:13px;background:#fff}
.admin-broadcast-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#edf4ff;color:#175cd3;font-size:17px}
.admin-broadcast-main{min-width:0}.admin-broadcast-main>b{display:block;font-size:11px;color:#26354a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-broadcast-main>small{display:block;margin-top:3px;color:#8792a3;font-size:8px}
.admin-broadcast-meter{height:5px;margin-top:7px;border-radius:999px;overflow:hidden;background:#eef2f6}.admin-broadcast-meter span{display:block;height:100%;border-radius:inherit;background:#175cd3}
.admin-broadcast-retry{white-space:nowrap!important;width:auto!important}
@media(max-width:760px){.admin-broadcast-form{grid-template-columns:1fr}.admin-broadcast-wide{grid-column:auto}.admin-broadcast-actions{align-items:stretch;flex-direction:column}.admin-broadcast-actions .btn{width:100%}.admin-broadcast-row{grid-template-columns:34px minmax(0,1fr)}.admin-broadcast-icon{width:34px;height:34px}.admin-broadcast-retry{grid-column:2;width:max-content!important}}
.admin-broadcast-form label>small{font-size:8px;font-weight:600;line-height:1.45;color:#8a95a6}
.admin-broadcast-action-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.admin-broadcast-card{display:grid;gap:8px}
.admin-broadcast-diagnostics{margin:0 2px 10px;padding:9px 11px;border:1px solid #e7ebf1;border-radius:11px;background:#fbfcfe}
.admin-broadcast-diagnostics summary{cursor:pointer;font-size:9px;font-weight:800;color:#52657d}
.admin-broadcast-diagnostic-list{display:grid;gap:6px;margin-top:8px}
.admin-broadcast-diagnostic-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:start;padding:7px 8px;border-radius:9px;background:#fff;border:1px solid #edf0f4}
.admin-broadcast-diagnostic-item>span{min-width:0}.admin-broadcast-diagnostic-item b{display:block;font-size:9px;color:#2a3950}.admin-broadcast-diagnostic-item small{display:block;font-size:8px;color:#8490a1;line-height:1.4;word-break:break-word}
.admin-broadcast-delivery-note{display:block;margin-top:8px;color:#98a2b3;font-size:8px;line-height:1.45}
@media(max-width:760px){.admin-broadcast-action-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr}.admin-broadcast-action-buttons .btn{width:100%}.admin-broadcast-diagnostic-item{grid-template-columns:1fr}}

.admin-broadcast-safe-mode{padding:10px 12px;border:1px solid #dfe7f2;border-radius:12px;background:#f8fbff}.admin-broadcast-safe-row{display:flex!important;align-items:center;gap:8px;font-size:9px!important;color:#344054!important;font-weight:750!important}.admin-broadcast-safe-row input{width:16px!important;height:16px!important;margin:0!important;box-shadow:none!important}.admin-broadcast-safe-mode>small{font-size:8px!important;color:#7c8a9d!important;line-height:1.45!important}

/* v7.6 - Saldo minimum dompet */
.danger-text{color:#b42318;font-weight:700}

/* =========================================================
   v7.7 - PERIODE DATA TRANSAKSI
   Default: bulan berjalan. Saldo tetap akumulatif seluruh riwayat.
   ========================================================= */
.tx-period-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 2px;
}
.tx-period-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.tx-period-copy b{
  color:#344054;
  font-size:10px;
  font-weight:850;
}
.tx-period-copy small{
  color:#98a2b3;
  font-size:8.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tx-period-switch{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid #dfe5ee;
  border-radius:11px;
  background:#f4f6f9;
}
.tx-period-switch button{
  min-height:30px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#667085;
  padding:0 10px;
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.tx-period-switch button:hover{color:#175cd3}
.tx-period-switch button.active{
  background:#fff;
  color:#175cd3;
  box-shadow:0 1px 4px rgba(16,24,40,.10);
}

@media(max-width:760px){
  .tx-period-bar{padding:8px 10px 2px;gap:7px}
  .tx-period-copy b{font-size:9.5px}
  .tx-period-copy small{font-size:8px;max-width:150px}
  .tx-period-switch button{min-height:31px;padding:0 9px;font-size:8.5px}
}
@media(max-width:390px){
  .tx-period-copy small{max-width:115px}
  .tx-period-switch button{padding:0 7px;font-size:8px}
}

/* =========================================================
   v7.10 - TRANSAKSI MOBILE CARD UI
   Fokus: data utuh, hierarchy jelas, tidak terpotong di layar kecil.
   ========================================================= */
.tx.tx-card{display:block}
.tx-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.tx-card-head .tx-main{flex:1 1 auto}
.tx-card-head .tx-right{flex:0 0 auto}
.tx-card .tx-title-row{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;min-width:0}
.tx-card .tx-title{min-width:0;overflow-wrap:anywhere}
.tx-card .tx-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tx-kind-badge,.tx-pattern-badge{
  display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;
  font-size:8px;font-weight:850;line-height:1.2;white-space:nowrap
}
.tx-kind-badge.expense{background:#fff0ee;color:#b42318}
.tx-kind-badge.income{background:#ecfdf3;color:#067647}
.tx-kind-badge.transfer{background:#eef2ff;color:#4058ba}
.tx-pattern-badge{background:#f3f5f8;color:#667085}
.tx-card .scan-badge,.tx-card .sync-badge,.tx-card .transfer-badge{margin-left:0}
.tx-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;min-width:0}
.tx-meta-item{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:24px;padding:4px 7px;
  border-radius:8px;background:#f6f8fb;color:#697586;font-size:9px;font-weight:700;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word
}
.tx-meta-item>span{flex:0 0 auto;color:#91a0b4;font-size:10px}
.tx-note{margin:10px 0 0;padding:9px 10px;border:1px solid #edf0f4;border-radius:11px;background:#fafbfc}
.tx-note-label{display:block;margin-bottom:3px;color:#98a2b3;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.35px}
.tx-note p{max-width:none!important;margin:0!important;color:#475467!important;font-size:10px!important;line-height:1.5!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-word}
.tx-note.is-empty p{color:#a0a9b6!important;font-style:italic}
.tx-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid #eef1f5}
.tx-card-id{color:#a0a9b6;font-size:8px;font-weight:750;white-space:nowrap}
.tx-card .tx-amount-label{display:block;margin-bottom:3px;color:#98a2b3;font-size:8px;font-weight:800}

@media(max-width:760px){
  .transactions-panel.mobile-view.active{
    background:#f5f7fb!important;
    border-radius:18px!important;
  }
  .transactions-panel .panel-head{
    padding:12px 13px!important;
    background:#fff!important;
    border-bottom:1px solid #edf0f4!important;
  }
  .transactions-panel .panel-head>div{min-width:0}
  .transactions-panel .panel-head b{font-size:15px!important}
  .transactions-panel .panel-subtitle{display:block;margin-top:2px;white-space:normal!important;line-height:1.35!important}
  .tx-filter-wrap{background:#fff!important}
  .transactions-panel .tx-list{
    display:grid!important;
    align-content:start!important;
    gap:10px!important;
    padding:10px!important;
    background:#f5f7fb!important;
  }
  .transactions-panel .tx{
    display:block!important;
    margin:0!important;
    padding:12px!important;
    border:1px solid #e7ebf1!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(16,24,40,.045)!important;
    overflow:visible!important;
  }
  .transactions-panel .tx.offline-pending{
    border-style:dashed!important;
    border-color:#e8cc78!important;
    background:#fffdf7!important;
  }
  .tx-card-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:10px!important;
  }
  .transactions-panel .tx-main{
    min-width:0!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .transactions-panel .tx-icon{
    width:44px!important;height:44px!important;flex:0 0 44px!important;
    border-radius:13px!important;background:#f3f6fa!important;font-size:19px!important;
  }
  .transactions-panel .tx-main>.stored-photo{
    width:44px!important;max-width:44px!important;flex:0 0 44px!important;margin:0!important
  }
  .transactions-panel .tx-main>.stored-photo img{
    width:44px!important;height:44px!important;object-fit:cover!important;border-radius:13px!important
  }
  .transactions-panel .tx-info{min-width:0!important;flex:1 1 auto!important}
  .transactions-panel .tx-info b,
  .transactions-panel .tx-title{
    display:block!important;
    max-width:none!important;
    color:#172235!important;
    font-size:13px!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .transactions-panel .tx-right{
    min-width:92px!important;
    max-width:42%!important;
    text-align:right!important;
    white-space:normal!important;
  }
  .transactions-panel .tx-right>b{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .tx-meta{margin-top:7px!important;gap:5px!important}
  .tx-meta-item{font-size:9px!important;line-height:1.35!important}
  .tx-meta-wallet{max-width:100%!important}
  .tx-note{margin-top:10px!important;padding:9px 10px!important}
  .tx-note p{font-size:10.5px!important;line-height:1.55!important}
  .tx-card-footer{align-items:center!important}
  .transactions-panel .tx-actions{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:6px!important;flex-wrap:wrap!important;margin-left:auto!important
  }
  .transactions-panel .tx-right .tx-actions{display:none!important}
  .transactions-panel .tx-actions button{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:34px!important;margin:0!important;padding:6px 10px!important;
    border-radius:9px!important;font-size:9px!important;font-weight:850!important;line-height:1!important
  }
  .transactions-panel .tx-actions .tx-detail-btn{
    min-width:58px!important;border:1px solid #cfe0ff!important;background:#edf4ff!important;color:#175cd3!important
  }
  .transactions-panel .tx-actions .tx-edit-btn{
    min-width:48px!important;border:1px solid #dce6f4!important;background:#f7f9fc!important;color:#3b587a!important
  }
  .transactions-panel .tx-actions button[data-delete-id]{
    min-width:50px!important;border:1px solid #ffd8d3!important;background:#fff3f2!important;color:#b42318!important
  }
  .transactions-panel .pending-sync-text{
    display:inline-flex;align-items:center;min-height:32px;padding:0 8px;border-radius:8px;
    background:#fff5d8;color:#8b6513;font-size:8.5px!important;white-space:normal
  }
  .tx-filter-summary{
    padding-bottom:9px!important;
  }
  .tx-filter-summary>span{
    min-height:26px;display:inline-flex;align-items:center
  }
}

@media(max-width:390px){
  .transactions-panel .tx-list{padding:8px!important;gap:8px!important}
  .transactions-panel .tx{padding:10px!important;border-radius:14px!important}
  .tx-card-head{grid-template-columns:minmax(0,1fr) minmax(82px,36%)!important;gap:8px!important}
  .transactions-panel .tx-icon{width:40px!important;height:40px!important;flex-basis:40px!important}
  .transactions-panel .tx-main>.stored-photo,
  .transactions-panel .tx-main>.stored-photo img{width:40px!important;height:40px!important;max-width:40px!important;flex-basis:40px!important}
  .transactions-panel .tx-right{min-width:0!important;max-width:none!important}
  .transactions-panel .tx-right>b{font-size:13px!important}
  .tx-kind-badge,.tx-pattern-badge{font-size:7.5px!important;padding:2px 6px!important}
  .tx-card-footer{align-items:flex-start!important;flex-direction:column!important}
  .transactions-panel .tx-actions{width:100%!important;justify-content:stretch!important}
  .transactions-panel .tx-actions button{flex:1 1 0!important}
  .transactions-panel .pending-sync-text{width:100%;justify-content:center}
}