@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;src:url(assets/cdn/material-symbols-rounded.woff2) format('woff2')}
:root{--primary:#3b82f6;--primary-dark:#2563eb;--primary-light:#dbeafe;--bg:#e8eeff;--bg-grad:linear-gradient(135deg,#dbeafe 0%,#e8eeff 40%,#f0f5ff 100%);--card:#ffffff;--text:#1a1a2e;--text2:#6b7280;--text3:#9ca3af;--border:#d4ddef;--success:#10b981;--danger:#ef4444;--danger-light:#fee2e2;--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px -4px rgba(0,0,0,.08);--shadow-hover:0 4px 12px rgba(0,0,0,.1),0 8px 32px -8px rgba(0,0,0,.12);--radius:20px;--radius-sm:14px;--radius-xs:10px;--radius-pill:50px;--font-body:'Plus Jakarta Sans',-apple-system,sans-serif;--font-display:'Plus Jakarta Sans',sans-serif}

.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-feature-settings:'liga' 1}

.dark{--bg:#0a0f1e;--bg-grad:linear-gradient(135deg,#080d1a 0%,#0a0f1e 40%,#111830 100%);--card:#141d30;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--border:#1e2d4a;--primary-light:#3b82f622;--danger-light:#ef444422;--shadow:0 2px 12px -2px rgba(0,0,0,.4),0 1px 4px -1px rgba(0,0,0,.3);--shadow-hover:0 8px 28px -6px rgba(0,0,0,.5),0 2px 8px -2px rgba(0,0,0,.4)}

/* ===== CHAT MODAL — Dark Mode Fixes ===== */
/* Container */
.dark .chat-modal-overlay{background:rgba(0,0,0,.6) !important}
.dark .chat-modal-sheet{background:var(--card) !important;border:1px solid #2a3f5f !important;border-radius:16px 16px 0 0 !important;box-shadow:0 -4px 24px rgba(0,0,0,.5) !important}
.dark .chat-content{background:var(--card) !important}

/* Instruction area */
.dark .chat-instruction{background:#0d1525 !important;border:1px solid #2a3f5f !important;border-radius:10px !important}
.dark .chat-instruction-text{color:#c8d6e5 !important}
.dark .chat-instruction-text p{color:#c8d6e5 !important}
.dark .chat-instruction-text strong{color:#e2e8f0 !important}

/* Preview cards */
.dark .chat-preview-card{background:#0d1525 !important;border:1px solid #2a3f5f !important}
.dark .chat-preview-row{border-bottom:1px solid #1e2d4a !important}
.dark .chat-preview-label{color:#8899aa !important}
.dark .chat-preview-value{color:#e2e8f0 !important}

/* Input field — brighter placeholder */
.dark .chat-input-field{background:#0d1525 !important;border:1px solid #2a3f5f !important;color:#e2e8f0 !important}
.dark .chat-input-field::placeholder{color:#8899aa !important;-webkit-text-fill-color:#8899aa !important;opacity:1 !important}
.dark .chat-input-field::-webkit-input-placeholder{color:#8899aa !important;opacity:1 !important}
.dark .chat-input-field:-ms-input-placeholder{color:#8899aa !important}
.dark #chatInput{background:#0d1525 !important;border:1px solid #2a3f5f !important;color:#e2e8f0 !important}
.dark #chatInput::placeholder{color:#8899aa !important;-webkit-text-fill-color:#8899aa !important;opacity:1 !important}
.dark #chatInput::-webkit-input-placeholder{color:#8899aa !important;opacity:1 !important}
.dark #chatInput:-ms-input-placeholder{color:#8899aa !important}

/* Input bar */
.dark .chat-input-bar{background:var(--card) !important;border-top:1px solid #2a3f5f !important}
.dark .chat-input-camera, .dark .chat-input-mic, .dark .chat-input-send{color:#8899aa !important}
.dark .chat-input-camera:hover, .dark .chat-input-mic:hover, .dark .chat-input-send:hover{color:#e2e8f0 !important}

/* Header */
.dark .chat-modal-header{border-bottom:1px solid #2a3f5f !important}
.dark .chat-modal-header-title{color:#e2e8f0 !important}
.dark .chat-modal-header-sub{color:#8899aa !important}
.dark .chat-modal-close{color:#8899aa !important}

/* Type dropdown */
.dark .chat-type-dropdown{background:#0d1525 !important;border:1px solid #2a3f5f !important}
.dark .chat-type-opt{color:#c8d6e5 !important}
.dark .chat-type-opt:hover{background:#1a2740 !important}

/* Category picker */
.dark .chat-cat-overlay{background:rgba(0,0,0,.6) !important}
.dark .chat-cat-item{background:#141d30 !important;border:1px solid #2a3f5f !important;color:#c8d6e5 !important}
.dark .chat-cat-item.active{background:#1a2740 !important;border-color:#3b82f6 !important;color:#e2e8f0 !important}

/* Wallet picker */
.dark .chat-wallet-list-item{background:#141d30 !important;border:1px solid #2a3f5f !important;color:#c8d6e5 !important}
.dark .chat-wallet-list-item.active{background:#1a2740 !important;border-color:#3b82f6 !important}

/* Receipt banner */
.dark .chat-receipt-banner{background:#0d1525 !important;border:1px solid #2a3f5f !important;color:#c8d6e5 !important}

/* Tags */
.dark .chat-tag-input{background:#0d1525 !important;border:1px solid #2a3f5f !important;color:#e2e8f0 !important}
.dark .chat-tag-input::placeholder{color:#8899aa !important}

/* Confidence text */
.dark .chat-preview-confidence{color:#8899aa !important}

#authBadge{display:none !important}
.dark .material-icons{color:var(--text)}
.dark .bp-cat-icon.material-icons{color:var(--text2)}
.dark .bill-icon .material-icons{color:var(--text2)}
.dark .budget-percat-item-icon .material-icons{color:inherit}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg-grad);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background-color .35s ease,color .35s ease}
.app{max-width:480px;width:100%;margin:0 auto;padding-bottom:90px}

/* HEADER */
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(255,255,255,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(226,232,240,.5);position:sticky;top:0;z-index:100;transition:background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.h-left{display:flex;align-items:center;gap:10px}
.h-title{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.5px;line-height:1}
.h-title .fin{color:#1E40AF}
.h-title .tel{color:#D97706}
.dark .h-title .fin{color:#60A5FA}
.dark .h-title .tel{color:#FCD34D}
.menu-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;line-height:1;color:var(--text);width:42px;height:42px;border-radius:50%;transition:all .15s ease}
.menu-btn:hover{background:rgba(59,130,246,.08)}
.menu-btn .material-icons{font-size:22px}
.dark .menu-btn .material-icons{color:#fff!important}
.dark .header{background:rgba(10,16,32,.92);border-bottom-color:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.h-right{display:flex;align-items:center;gap:12px}
.h-date{font-size:12px;color:var(--text3)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(59,130,246,.3)}

/* LOADER */
.loader{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.loader.active{display:flex}
.loader-popup{background:#fff;border-radius:var(--radius);padding:36px 44px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 24px 80px rgba(0,0,0,.12);animation:loaderPopIn .25s ease;min-width:220px}
.dark .loader-popup{background:#1e293b;color:#e2e8f0}
.spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes loaderPopIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.loader-popup-text{font-size:14px;font-weight:600;color:var(--text)}

/* TOASTS */
.toasts{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:calc(100vw - 24px);max-width:420px}
.toast{background:var(--card);border-radius:var(--radius);padding:14px 22px;box-shadow:0 12px 40px rgba(0,0,0,.12);font-size:14px;font-weight:600;pointer-events:auto;animation:toastIn .3s ease;border-left:4px solid var(--primary);white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* PAGES */
.page{display:none;padding:24px 20px 0 20px;animation:fadeUp .35s cubic-bezier(.4,0,.2,1);position:relative}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.page-hd h1{font-size:22px;font-weight:800;font-family:'Outfit',sans-serif}
.add-btn{background:var(--primary);color:#fff;border:none;padding:9px 18px;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.add-btn:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(59,130,246,.4);transform:translateY(-1px)}
.add-btn:active{transform:translateY(0)}

/* CONFETTI */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99999;overflow:hidden}
.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;border-radius:2px;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}70%{opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(0.3);opacity:0}}

/* NUMBER COUNTER */
.counter-animate{display:inline-block;transition:transform .1s}

/* PARALLAX GREETING */
#greetingEmoji{display:inline-block;animation:emptyBounce 2s ease infinite;font-size:22px;vertical-align:middle;transition:transform .1s ease-out}
#greetingText{transition:transform .1s ease-out,opacity .2s ease}

/* TRANSACTION PAGE */
.tx-page-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.tx-page-icon{width:52px;height:52px;background:var(--primary-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:26px}
.tx-page-icon .material-icons{font-size:26px}
.tx-page-hd h1{font-size:24px;font-weight:800;color:var(--text);font-family:'Outfit',sans-serif}
.tx-page-sub{font-size:13px;color:var(--text2);margin-top:2px}
.tx-actions{display:flex;gap:10px;margin-bottom:16px}
.tx-btn-outline{flex:1;padding:12px;background:var(--card);border:1.5px solid var(--border);border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .2s ease}
.tx-btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.tx-btn-primary{flex:1;padding:13px 16px;background:var(--primary);color:#fff;border:none;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.tx-btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(59,130,246,.4);transform:translateY(-1px)}

/* FILTER CARD */
.filter-card{background:var(--card);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.filter-card-header{display:flex;align-items:center;gap:8px;margin-bottom:0;padding-bottom:10px;border-bottom:none;cursor:pointer;user-select:none;transition:background .15s}
.filter-card-header:active{background:var(--primary-light)}
.filter-card-header .material-icons{font-size:18px;color:var(--primary)}
.filter-card-header span{font-size:13px;font-weight:700;color:var(--text)}
.filter-chevron{transition:transform .25s ease;flex-shrink:0}
.filter-card.collapsed .filter-chevron{transform:rotate(-90deg)}
.filter-card-body{overflow:visible;transition:max-height .3s ease,opacity .25s ease,margin .25s ease;max-height:9999px;opacity:1}
.filter-card.collapsed .filter-card-body{max-height:0;opacity:0;margin:0}
.filter-card:not(.collapsed) .filter-card-header{border-bottom:1px solid var(--border)}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.filter-row-3col{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;margin-bottom:10px}
.filter-row-2col{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.filter-row-1col{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}
.filter-row-4col{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:10px;margin-bottom:10px}
.filter-row-btn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.filter-third,.filter-half,.filter-col{display:flex;flex-direction:column;gap:4px;min-width:140px}
.filter-card label{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:0;text-transform:uppercase;letter-spacing:.3px}
.filter-card label .material-icons{font-size:14px;opacity:.7}
.filter-sel2{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-xs);font-size:13px;background:var(--bg);color:var(--text);outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.filter-sel2:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
select.filter-sel2{padding:9px 32px 9px 12px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
select.filter-sel2:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.filter-reset{background:none;border:none;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;padding:9px 16px;border-radius:50px;transition:all .15s}
.filter-reset:hover{background:var(--primary-light)}
.filter-apply{background:var(--primary);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer;padding:9px 16px;border-radius:50px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 2px 6px rgba(59,130,246,.25)}
.filter-apply:hover{background:var(--primary-dark);box-shadow:0 4px 10px rgba(59,130,246,.35);transform:translateY(-1px)}

/* Date input with calendar icon */
.date-input-wrap{position:relative}
.filter-date-input{padding-left:48px !important;padding-right:36px !important;min-width:0;box-sizing:border-box}
.date-cal-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text3);display:flex;align-items:center;z-index:2}
.date-cal-icon .material-icons{font-size:18px}
.date-input-wrap:has(.date-svg-bg) .date-cal-icon{display:none}
.date-svg-bg{padding-left:46px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center}
/* Hide native browser date picker icon */
.filter-date-input::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;bottom:0;width:30px;cursor:pointer}
.filter-date-input::-moz-calendar-picker-indicator{opacity:0}

/* SEARCH INPUT WITH CLEAR BUTTON */
.search-wrap{position:relative;width:100%}
.search-input{width:100%;padding:11px 42px 11px 14px !important;box-sizing:border-box;border-radius:var(--radius-xs);border:1.5px solid var(--border);background:var(--card);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
/* Hide native browser clear button — we use our own .search-clear-btn */
.search-input::-webkit-search-cancel-button{display:none}
.search-clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:18px;font-weight:700;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;line-height:1;opacity:0;pointer-events:none}
.search-clear-btn:hover{background:var(--bg);color:var(--text)}
.search-clear-btn.visible{opacity:1;pointer-events:auto}

/* FILTER ROWS RESPONSIVE */
@media(max-width:768px){
  .filter-row-3col{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .filter-row-3col{grid-template-columns:1fr}
  .filter-row-4col{grid-template-columns:1fr 1fr}
  .filter-row-2col{grid-template-columns:1fr}
  .filter-row-4col{grid-template-columns:1fr}
  .filter-row-btn{grid-template-columns:1fr}
}

/* TRANSACTION TABLE */


.tx-table-body .tx-row .col-date,.tx-table-body .tx-row .col-desc,.tx-table-body .tx-row .col-cat,.tx-table-body .tx-row .col-wallet,.tx-table-body .tx-row .col-amt,.tx-table-body .tx-row .col-act{background:var(--card)}

.tx-table-body .tx-row .col-date{font-size:12px;color:var(--text2);text-align:center;white-space:nowrap;line-height:1.4}
.tx-table-body .tx-row .col-desc{font-size:13px;font-weight:600;text-align:center;padding:0 4px;word-wrap:break-word;overflow-wrap:break-word}
.tx-table-body .tx-row .col-cat{font-size:12px;color:var(--text2);text-align:center;white-space:nowrap}
.tx-table-body .tx-row .col-wallet{font-size:13px;font-weight:600;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-table-body .tx-row .col-amt{font-size:14px;font-weight:700;text-align:right;white-space:nowrap;padding-right:4px}
.tx-table-body .tx-row .col-amt.income{color:var(--success)}
.tx-table-body .tx-row .col-amt.expense{color:var(--danger)}
.tx-table-body .tx-row .col-act{text-align:center;display:flex;gap:2px;justify-content:center;background:var(--card)}
.tx-table-body .tx-row .col-act button{background:none;border:none;cursor:pointer;opacity:.6;transition:opacity .2s;padding:6px;display:inline-flex;align-items:center;justify-content:center;border-radius:0}
.tx-table-body .tx-row .col-act button .material-icons{font-size:20px}
.tx-table-body .tx-row .col-act button:hover{opacity:1}

/* Remove border on last row cells */

/* WELCOME */
.welcome{margin-bottom:12px}
.welcome h1{font-size:17px;font-weight:800;font-family:'Outfit',sans-serif}
.welcome p{font-size:13px;color:var(--text2);margin-top:4px}
#greetingEmoji{display:inline-block;animation:emptyBounce 2s ease infinite;font-size:22px;vertical-align:middle}

/* CARDS */
.card{background:var(--card);border-radius:var(--radius);padding:22px 20px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);transition:background-color .35s ease,box-shadow .35s ease,transform .2s ease,border-color .35s ease}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-ttl{font-size:15px;font-weight:700}
.card-sub{font-size:12px;color:var(--text3)}
.filter-btn{background:var(--bg);border:none;padding:7px 14px;border-radius:50px;font-size:12px;color:var(--primary);cursor:pointer;font-weight:600;transition:all .15s ease}
.filter-btn:hover{background:var(--primary-light)}
.filter-btn .material-icons{font-size:16px}
.bp-action{padding:4px 8px;display:inline-flex;align-items:center;justify-content:center}
.bp-action .material-icons{font-size:18px}
.bp-action-delete{color:var(--danger)!important}
.bp-action-delete:hover{background:rgba(239,68,68,.1)!important}

/* BALANCE CARD */
.bal-card{background:linear-gradient(135deg,#eff6ff,#dbeafe,#bfdbfe);border-radius:var(--radius)}
.bal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bal-label{font-size:13px;color:var(--primary-dark);font-weight:600}
.bal-visibility{background:rgba(255,255,255,.5);border:none;padding:4px 8px;border-radius:8px;font-size:14px;cursor:pointer}
.bal-amount{font-size:30px;font-weight:800;margin-bottom:16px}
.bal-amount.hidden{user-select:none;filter:none!important;-webkit-filter:none!important}
.bal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bal-item{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,255,255,.65);border-radius:var(--radius-sm)}
.bal-ico{font-size:18px}
.bal-item-label{font-size:11px;color:var(--text2);display:block}
.bal-item-val{font-size:14px;font-weight:700;display:block}
.bal-item.income .bal-item-val{color:var(--success)}
.bal-item.expense .bal-item-val{color:var(--danger)}

/* CALENDAR */
.cal-card{overflow:hidden;padding:18px 14px}
.cal-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.cal-arrow{width:30px;height:30px;border-radius:50%;background:var(--bg);border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text2);transition:all .15s ease}
.cal-arrow:hover{background:var(--primary-light);color:var(--primary)}
.cal-month{font-size:14px;font-weight:700;min-width:90px;text-align:center;white-space:nowrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cal-day{font-size:9px;font-weight:600;color:var(--text3)}
.cal-date{font-size:11px;padding:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-weight:500;transition:all .15s ease}
.cal-date.today{background:var(--primary);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(59,130,246,.3)}
.cal-date.has-tx{background:var(--primary-light);color:var(--primary-dark)}
.cal-date.empty{visibility:hidden}

/* CHART */
.chart{height:120px;display:flex;align-items:flex-end;gap:4px;padding-top:10px}
.chart-bar{flex:1;border-radius:6px 6px 0 0;min-width:6px;transition:height .3s}
.chart-bar.income{background:var(--success)}
.chart-bar.expense{background:var(--danger)}

/* TREND */
.trend-bars{display:flex;flex-direction:column;gap:12px}
.trend-canvas-wrap{width:100%;overflow:hidden}
#trendWeekBars{width:100%;height:auto;display:block}
.trend-row{display:grid;grid-template-columns: 90px 1fr;gap:12px;align-items:center}
.trend-label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text3);white-space:nowrap;text-align:center}
.trend-label .week-num{font-weight:600;font-size:12px}
.trend-bar-wrap{display:flex;gap:4px;align-items:center;height:32px;background:var(--bg);border-radius:6px;padding:4px 6px}
.trend-bar{height:24px;border-radius:3px;transition:width .3s;min-width:8px}
.trend-bar.income{background:var(--success)}
.trend-bar.expense{background:var(--danger)}
.trend-amounts{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:2px}
.trend-amounts .income-amt{color:var(--success)}
.trend-amounts .expense-amt{color:var(--danger)}
.trend-legend{display:flex;gap:16px;margin-bottom:8px;font-size:11px}
.trend-legend-item{display:flex;align-items:center;gap:4px}
.trend-legend-dot{width:10px;height:10px;border-radius:2px}
.trend-legend-dot.income{background:var(--success)}
.trend-legend-dot.expense{background:var(--danger)}

/* CATEGORY */
.cat-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.cat-item:last-child{border-bottom:none}
.cat-ico{width:36px;height:36px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px}
.cat-info{flex:1}
.cat-name{font-size:13px;font-weight:600}
.cat-count{font-size:11px;color:var(--text3)}
.cat-amt{font-size:14px;font-weight:700;color:var(--danger)}
.cat-pct{font-size:11px;color:var(--text3)}

/* TRANSACTION LIST */
.tx-list{display:flex;flex-direction:column;gap:8px}
.tx-item{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;background:var(--bg);border-radius:12px;position:relative;overflow:hidden;touch-action:pan-y}

/* Expand panel — hidden by default, shown when .tx-expanded */
.tx-expand-panel{display:none;width:100%;padding:0 12px 12px;gap:8px}
.tx-item.tx-expanded .tx-expand-panel{display:flex;flex-direction:column;gap:8px}
.tx-item.tx-expanded{border-radius:12px 12px 12px 12px}

/* Action row — Edit + Hapus side by side */
.tx-actions-row{display:flex;gap:8px}
.tx-actions-row .tx-expand-btn{flex:1}

.tx-expand-btn{
  flex:1;height:40px;border:none;border-radius: 50px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:6px;font-size:13px;font-weight:700;
  transition:opacity .15s, transform .15s;
}
/* Attach button always full-width (not inside .tx-actions-row) */
.tx-expand-btn.attach{flex:none;width:100%;background:rgba(16,185,129,.12);color:#10b981}
.tx-expand-btn:active{opacity:.8;transform:scale(.97)}
.tx-expand-btn.edit{background:rgba(59,130,246,.12);color:#3b82f6}
.dark .tx-expand-btn.edit{background:rgba(59,130,246,.2);color:#60a5fa}
.tx-expand-btn.delete{background:rgba(239,68,68,.12);color:#ef4444}
.dark .tx-expand-btn.delete{background:rgba(239,68,68,.2);color:#f87171}
.dark .tx-expand-btn.attach{flex:none;width:100%;background:rgba(16,185,129,.2);color:#34d399}
.tx-expand-btn .material-icons{font-size:18px}

/* Receipt thumbnail in expand panel */
.tx-receipt-thumb{position:relative;flex:1;min-width:0;border-radius: 12px;overflow:hidden;background:#000;aspect-ratio:16/10}
.tx-receipt-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.tx-rm-receipt{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s}
.tx-rm-receipt:hover{background:rgba(239,68,68,.8)}

/* Split items section in expand panel */
.split-items-section{width:100%;margin-bottom:8px}
.split-items-header{display:flex;align-items:center;gap:6px;padding:8px 10px;background:rgba(139,92,246,.1);border-radius:8px 8px 0 0;font-size:12px;font-weight:700;color:#8b5cf6}
.dark .split-items-header{background:rgba(139,92,246,.15);color:#a78bfa}
.split-items-header .split-ico{font-size:16px}
.split-item-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}
.split-item-row:last-child{border-radius:0 0 8px 8px;border-bottom:none}
.split-item-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.split-item-info{flex:1;min-width:0;display:flex;flex-direction:column}
.split-item-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.split-item-cat{font-size:11px;color:var(--text-muted)}
.split-item-amt{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;flex-shrink:0}

/* Split edit mode in modal */
.split-edit-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(139,92,246,.1);border-radius: 50px;margin-bottom:10px;font-size:13px;font-weight:700;color:#8b5cf6}
.dark .split-edit-header{background:rgba(139,92,246,.15);color:#a78bfa}
.split-edit-header .split-total-badge{background:var(--accent);color:#fff;padding:2px 10px;border-radius:20px;font-size:12px}
.split-edit-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-secondary);border-radius: 50px;margin-bottom:8px;border:1px solid var(--border)}
.split-edit-row .split-idx{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.split-edit-row .split-edit-fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.split-edit-row .split-field{display:flex;gap:6px;align-items:center}
.split-edit-row .split-field label{font-size:11px;color:var(--text-muted);width:55px;flex-shrink:0}
.split-edit-row .split-field input,.split-edit-row .split-field select{flex:1;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text);font-size:13px;min-width:0}
.split-edit-row .split-field input:focus,.split-edit-row .split-field select:focus{outline:none;border-color:var(--accent)}
.split-edit-row .split-remove{width:32px;height:32px;border-radius: 50px;border:none;background:rgba(239,68,68,.1);color:#ef4444;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.split-edit-row .split-remove:hover{background:rgba(239,68,68,.2)}
.split-add-row-btn{width:100% !important;padding:14px 12px !important;border:none !important;background:transparent !important;color:#9ca3af !important;font-size:13px !important;font-weight:500 !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;margin-top:4px !important;transition:color .15s !important}
.split-add-row-btn:hover{color:var(--accent)}
.dark .split-edit-row{background:rgba(30,30,50,.6)}


/* Split badge indicator on transaction row */
.tx-split-badge{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius: 50px;background:rgba(139,92,246,.15);color:#8b5cf6;font-size:10px;font-weight:700;margin-left:6px;vertical-align:middle}
.dark .tx-split-badge{background:rgba(139,92,246,.2);color:#a78bfa}
.tx-split-badge .material-icons{font-size:12px}

/* Receipt preview modal */
/* Receipt source picker dialog */
.receipt-source-modal{background:var(--card);border-radius:16px;width:92%;max-width:340px;overflow:hidden;display:flex;flex-direction:column}
.rs-options{padding:20px;display:flex;flex-direction:column;gap:12px}
.rs-opt-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:1px solid var(--border);border-radius: 50px;background:var(--bg);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}
.rs-opt-btn:active{background:var(--border)}
.rs-opt-btn .material-icons{font-size:22px}

/* Receipt preview modal */
.receipt-preview-modal{background:var(--card);border-radius:16px;width:92%;max-width:400px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column}
.rp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.rp-title{font-weight:700;font-size:15px;color:var(--text)}
.rp-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rp-img-wrap{padding:16px;display:flex;justify-content:center;overflow:hidden}
.rp-preview{max-width:100%;max-height:50vh;object-fit:contain;border-radius: 12px}
.rp-actions{display:flex;gap:10px;padding:12px 20px 20px}
.rp-btn{flex:1;height:44px;border:none;border-radius: 50px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}
.rp-btn:active{opacity:.8}
.rp-cancel{background:var(--bg);color:var(--text)}
.rp-save{background:#10b981;color:#fff}
.rp-save:disabled{opacity:.5;cursor:wait}

/* tx-content stays horizontal and compact */
/* Hide inline action buttons by default — shown only when .tx-expanded */
.tx-content{display:flex;align-items:center;gap:10px;padding:12px;width:100%;background:var(--bg)}
.tx-act, .tx-right{display:none}
.tx-item.tx-expanded .tx-act, .tx-item.tx-expanded .tx-right{display:flex;gap:4px;align-items:center}
.tx-item.tx-expanded .tx-right{justify-content:flex-end}
.tx-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.tx-ico.income{background:var(--primary-light)}
.tx-ico.expense{background:var(--danger-light)}
.tx-info{flex:1}
.tx-name{font-size:13px;font-weight:600}
.tx-date{font-size:11px;color:var(--text3)}
.tx-wallet{font-size:10px;color:var(--primary);font-weight:600;margin-top:2px}
.tx-right{text-align:right}
.tx-amt{font-size:14px;font-weight:700}
.tx-amt.income{color:var(--success)}
.tx-amt.expense{color:var(--danger)}
.tx-amt.transfer{color:var(--text2)}
.tx-ico.transfer{background:var(--border)}
.tx-amt.transfer{color:var(--text2)}
.tx-ico.transfer{background:var(--border)}
.tx-act{display:flex;gap:4px;margin-top:4px;justify-content:flex-end}
.tx-act button{width:28px;height:28px;border-radius:50%;background:var(--card);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tx-act button .material-icons{font-size:16px}

/* FILTER BAR */
.filter-bar{display:flex;gap:8px;margin-bottom:16px}
.filter-sel{padding:8px 12px;border:1.5px solid var(--border);border-radius:12px;font-size:13px;background:var(--card);color:var(--text);outline:none;font-family:inherit}

/* FORM */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px}
.form-inp{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-family:inherit;background:var(--card);color:var(--text);outline:none}
.form-inp:focus{border-color:var(--primary)}
select.form-inp{padding:12px 36px 12px 14px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
select.form-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.type-btn{padding:10px;border:2px solid var(--border);border-radius: 50px;background:var(--card);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.type-btn.expense-btn.active{border-color:var(--danger);background:#fee2e2;color:#dc2626}
.type-btn.income-btn.active{border-color:var(--success);background:#d1fae5;color:#059669}
.btn-primary{display:block;width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius: 50px;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px}
.btn-secondary{display:block;width:100%;padding:12px;background:transparent;color:var(--text2);border:none;font-size:13px;font-weight:600;cursor:pointer;margin-top:8px}
.bill-modal-actions{display:flex;gap:10px;margin-top:8px}
.bill-modal-actions .btn-secondary{flex:1;margin-top:0;background:var(--bg2);border-radius:50px;font-weight:700}
.bill-modal-actions .btn-primary{flex:1;margin-top:0}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions .btn-secondary{flex:1;margin-top:0;background:var(--bg2);border-radius:50px;font-weight:700}
.modal-actions .btn-primary{flex:1;margin-top:0}
.btn-today{padding:10px 14px;background:var(--primary);color:#fff;border:none;border-radius: 50px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.dark .btn-today{background:#4a4a4a;color:#e8e8e8}

/* BOTTOM NAV */
/* BOTTOM NAV (Pill with FAB) */
.bnav{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  width:auto;max-width:420px;
  background:rgba(248,249,250,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  padding:8px 6px 8px;z-index:100;
  box-shadow:0 4px 24px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;padding:8px 14px;border-radius:20px;
  position:relative;transition:all .25s;
  min-width:44px;
}
.nav-item:active{background:rgba(59,130,246,.08);}
.nav-item.active{
  background:var(--primary);
  flex-direction:row;gap:6px;
  box-shadow:0 2px 12px rgba(59,130,246,.3);
}
.nav-ico{font-size:22px;color:var(--text3);transition:all .25s;line-height:1}
.nav-item.active .nav-ico{color:#fff;transform:none}
.nav-lbl{
  font-size:0;font-weight:600;color:var(--text3);
  transition:font-size .25s,color .25s;
  white-space:nowrap;overflow:hidden;
  max-height:0;opacity:0;
}
.nav-item.active .nav-lbl{
  font-size:13px;color:#fff;
  max-height:20px;opacity:1;
}

/* FAB (In-pill) */
.nav-item.nav-fab{
  position:relative;
  padding:0;min-width:0;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  border-radius:50%;
  width:52px;height:52px;
  margin:0 8px;
  margin-top:-26px;
  box-shadow:0 4px 20px rgba(59,130,246,.35),0 2px 8px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  flex-direction:row!important;
  transition:transform .2s,box-shadow .2s;
}
.nav-item.nav-fab:hover{transform:scale(1.08)}
.nav-item.nav-fab:active{transform:scale(.95)}
.nav-item.nav-fab svg{width:24px;height:24px;stroke:#fff;stroke-width:2.5;fill:none}
.nav-item.nav-fab .nav-lbl{display:none}

/* FAB Floating (bottom-right corner) */
.fab-float{
  position:fixed;bottom:96px;right:20px;
  width:56px;height:56px;border-radius:50%;border:none;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(59,130,246,.4),0 2px 8px rgba(0,0,0,.15);
  z-index:150;transition:transform .2s,box-shadow .2s;
}
.fab-float:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(59,130,246,.5),0 4px 12px rgba(0,0,0,.2)}
.fab-float:active{transform:scale(.92)}

/* Dark mode */
.dark .bnav{
  background:rgba(22,22,35,.88);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 24px rgba(0,0,0,.3),0 1px 4px rgba(0,0,0,.2);
}
.dark .nav-item:active{background:rgba(59,130,246,.12)}
.dark .nav-item.active{background:var(--primary);box-shadow:0 2px 12px rgba(59,130,246,.4)}


/* MODAL */
/* MODALS - all centered popup */
.modal-ov{position:fixed;z-index:9998;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center}
.modal-ov.active{display:flex!important}
.modal{background:var(--card);border-radius:20px;padding:20px;width:90%;max-width:480px;max-height:85vh;overflow-y:auto;animation:modalFadeIn .3s ease}


@keyframes modalFadeIn{
  from{opacity:0;transform:scale(.95) translateY(-10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-ttl{font-size:16px;font-weight:700}
.modal-x{width:28px;height:28px;border-radius:50%;background:var(--bg);border:none;font-size:12px;cursor:pointer}

/* WALLET MODAL */
.wallet-modal{padding:0;border-radius:24px 24px 0 0}
.wm-header{text-align:center;padding:24px 24px 20px;position:relative}
.wm-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--border);border:none;font-size:16px;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wm-icon{font-size:36px;margin-bottom:12px}
.wm-icon .material-icons{font-size:36px}
.wm-title{font-size:20px;font-weight:700;margin-bottom:4px}
.wm-subtitle{font-size:13px;color:var(--text2)}
.wm-form{padding:0 24px 20px}
.wm-field{margin-bottom:14px}
.wm-field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text)}
.wm-field .req{color:var(--danger)}
.wm-inp{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--text);outline:none}
.wm-inp:focus{border-color:var(--primary)}
.wm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wm-inp-sm{font-size:14px}
.wm-check{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--bg);border-radius:12px;margin-bottom:16px;cursor:pointer}
.wm-check input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);margin-top:2px;flex-shrink:0}
.wm-check-title{font-size:14px;font-weight:600;display:block}
.wm-check-desc{font-size:12px;color:var(--text3);display:block;margin-top:2px}
.wm-actions{display:flex;gap:12px;padding:0 24px 24px}
.wm-btn{flex:1;padding:14px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;border:none}
.wm-btn-cancel{background:transparent;color:var(--text2);border:1.5px solid var(--border)}
.wm-btn-save{background:#16a34a;color:#fff}

.empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px;line-height:1.6}
.empty .material-icons{font-size:48px;display:block;margin:0 auto 8px;opacity:.25}
.empty .empty-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:4px}
.empty .empty-desc{font-size:12px}

/* SALDO PAGE */
/* Saldo Page */
.saldo-hd{margin-bottom:16px}
.saldo-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.saldo-page-title{font-size:24px;font-weight:800;color:var(--text)}
.saldo-sub{font-size:13px;color:var(--text2);margin-top:4px}
.saldo-add-fab{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.saldo-add-fab:active{transform:scale(.93)}
.saldo-add-fab .material-icons{font-size:22px}

/* Total Balance Card */
.saldo-total-card{
  background:#EBF5FF;
  border-radius:24px;
  padding:20px 24px;
  color:#1A3A5C;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:100px;
}
.saldo-total-left{flex:1;min-width:0}
.saldo-total-label{font-size:13px;color:#4A6B8A;font-weight:500;margin-bottom:4px;letter-spacing:.3px}
.saldo-total-amount{font-size:28px;font-weight:800;letter-spacing:-.5px;white-space:nowrap;color:#1A3A5C}
.saldo-total-amount.negative{color:#ef4444}
.saldo-total-icon{width:52px;height:52px;border-radius:50%;background:rgba(26,58,92,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.saldo-total-icon .material-icons{font-size:26px;color:#1A3A5C}

/* Wallet Cards - Premium Design */
.wallet-card{
  border-radius:24px;padding:22px;position:relative;overflow:hidden;
  background:var(--card);
  border:1.5px solid var(--border);
  transition:transform .2s,box-shadow .2s;
  cursor:pointer;
}
.wallet-card::after{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;border-radius:50%;
  opacity:.06;
}
.wallet-card.type-Bank::after{background:#3b82f6}
.wallet-card.type-E-Wallet::after{background:#8b5cf6}
.wallet-card.type-Cash::after{background:#10b981}
.wallet-card:active{transform:scale(.98);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.wallet-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}

.wallet-card .w-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.wallet-card .w-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wallet-card.type-Bank .w-ico{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.wallet-card.type-E-Wallet .w-ico{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}
.wallet-card.type-Cash .w-ico{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.wallet-card .w-ico .material-icons{font-size:22px}

.wallet-card .w-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.wallet-card .w-type{font-size:11px;color:var(--text3);margin-top:1px}
.wallet-card .w-badge{margin-left:auto;padding:3px 10px;border-radius:16px;font-size:10px;font-weight:700;background:rgba(255,209,102,.15);color:#c9940a}

.wallet-card .w-amount{font-size:28px;font-weight:800;letter-spacing:-.5px;color:var(--text);line-height:1.1}
.wallet-card .w-amount.negative{color:#ef4444}
.wallet-card .w-currency{font-size:11px;font-weight:600;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:1px}

.wallet-card .w-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.wallet-card .w-date{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px}
.wallet-card .w-date::before{content:'';width:5px;height:5px;border-radius:50%;background:#10b981}
.wallet-card .w-actions{display:none;gap:6px}
.wallet-card.tap-open .w-actions{display:flex!important}
.wallet-card .w-act{width:36px;height:36px;border-radius:10px;background:var(--bg);border:none;color:var(--text3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.wallet-card .w-act:hover{color:var(--text);background:var(--border)}
.wallet-card .w-act:active{transform:scale(.9)}
.wallet-card .w-act .material-icons{font-size:18px}

/* Add New Account Card */
.wallet-add-card{
  border-radius:20px;padding:32px 20px;
  background:var(--card);
  border:2px dashed var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;cursor:pointer;transition:all .2s;
}
.wallet-add-card:active{transform:scale(.97);border-color:var(--primary)}
.wallet-add-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.wallet-add-icon .material-icons{font-size:28px;color:var(--text3)}
.wallet-add-text{font-size:14px;font-weight:600;color:var(--text3)}

/* REPORT */
.report-card{background:var(--card);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.rpt-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.rpt-row:last-child{border-bottom:none}
.rpt-label{color:var(--text2);font-size:13px}
.rpt-val{font-weight:700;font-size:14px}

/* TRANSACTION PAGE */
.tx-page-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.tx-page-icon{width:52px;height:52px;background:var(--primary-light);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:26px}
.tx-page-icon .material-icons{font-size:26px}
.tx-page-hd h1{font-size:24px;font-weight:800;color:var(--text);font-family:'Outfit',sans-serif}
.tx-page-sub{font-size:13px;color:var(--text2);margin-top:2px}
.tx-actions{display:flex;gap:10px;margin-bottom:16px}
.tx-btn-outline{flex:1;padding:12px;background:var(--card);border:1.5px solid var(--border);border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .2s ease}
.tx-btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.tx-btn-primary{flex:1;padding:13px 16px;background:var(--primary);color:#fff;border:none;border-radius:50px;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.tx-btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(59,130,246,.4);transform:translateY(-1px)}
/* FILTER CARD - consolidated above */

/* BUDGET PAGE */
/* Budget Page */
.budget-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.budget-page-title{font-size:24px;font-weight:800;color:var(--text)}
.budget-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.budget-add-fab{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.budget-add-fab:active{transform:scale(.93)}
.budget-add-fab .material-icons{font-size:22px}

/* Target Card */
.budget-target-card{
  background:#EBF5FF;border-radius:24px;padding:24px;
  margin-bottom:16px;
}
.budget-target-label{font-size:13px;color:#4A6B8A;font-weight:600;display:block;margin-bottom:8px}
.budget-target-amount{font-size:32px;font-weight:800;color:#1A3A5C;letter-spacing:-.5px;display:block;margin-bottom:16px}
.budget-target-sub{font-size:13px;color:#4A6B8A;display:block}

.budget-progress-row{display:flex;align-items:center;gap:10px}
.budget-progress-bar{flex:1;height:8px;background:rgba(59,130,246,.15);border-radius:4px;overflow:hidden}
.budget-progress-fill{height:100%;background:#3b82f6;border-radius:3px;transition:width .5s ease}
.budget-pct-badge{font-size:14px;font-weight:700;color:#3b82f6;white-space:nowrap}
.budget-edit-btn{width:36px;height:36px;border-radius: 50px;background:rgba(59,130,246,.1);border:none;color:#3b82f6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.budget-edit-btn:hover{background:rgba(59,130,246,.2)}

.dark .budget-target-card{background:#0A4C92}
.dark .budget-target-label{color:rgba(255,255,255,.6)}
.dark .budget-target-amount{color:#fff}
.dark .budget-target-sub{color:rgba(255,255,255,.5)}
.dark .budget-progress-bar{background:rgba(255,255,255,.15)}
.dark .budget-progress-fill{background:#60a5fa}
.dark .budget-pct-badge{color:#60a5fa}
.dark .budget-edit-btn{background:rgba(255,255,255,.12);color:#fff}
.dark .budget-edit-btn:hover{background:rgba(255,255,255,.2)}

/* Hero Grid */
.budget-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}

/* Wallet Card */
.budget-wallet-card{
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:24px;padding:24px;
  color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:180px;
}
.wallet-label{font-size:13px;color:rgba(255,255,255,.85);font-weight:600;display:block;margin-bottom:8px}
.wallet-amount{font-size:32px;font-weight:800;color:#fff;letter-spacing:-.5px;display:block;margin-bottom:8px}
.wallet-sub{font-size:12px;color:rgba(255,255,255,.7);display:block}
.wallet-breakdown{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.wallet-item{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.8);padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.wallet-item:last-child{border:none}
.wallet-item-name{font-weight:500}
.wallet-item-val{font-weight:700}

.dark .budget-wallet-card{background:linear-gradient(135deg,#065f46 0%,#064e3b 100%)}

/* Stats Row */
.budget-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.budget-stat-card{
  background:var(--card);border-radius:16px;padding:16px;text-align:center;
  border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px;
}
.budget-stat-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.budget-stat-ico .material-icons{font-size:20px}
.budget-stat-card.income .budget-stat-ico{background:rgba(16,185,129,.1);color:#10b981}
.budget-stat-card.expense .budget-stat-ico{background:rgba(239,68,68,.1);color:#ef4444}
.budget-stat-card.saving .budget-stat-ico{background:rgba(59,130,246,.1);color:#3b82f6}
.budget-stat-label{font-size:11px;color:var(--text3);font-weight:500}
.budget-stat-value{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Budget Per Category Card */
.budget-percat-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border)}
.budget-percat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.budget-percat-title{font-size:16px;font-weight:700;color:var(--text)}

.budget-percat-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;padding:16px;background:var(--bg);border-radius:12px}
.budget-percat-summary-item{display:flex;flex-direction:column;align-items:center}
.budget-percat-summary-label{font-size:11px;color:var(--text3);margin-bottom:4px}
.budget-percat-summary-value{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.budget-percat-list{display:flex;flex-direction:column;gap:10px}
.budget-percat-item{padding:14px 16px;background:var(--bg);border-radius:14px}
.budget-percat-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.budget-percat-item-left{display:flex;align-items:center;gap:10px}
.budget-percat-item-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.budget-percat-item-name{font-size:14px;font-weight:600;color:var(--text)}
.budget-percat-item-pct{font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px}
.budget-percat-bar-wrap{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:6px}
.budget-percat-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.budget-percat-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.budget-percat-item-amounts{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);flex:1;margin-right:8px;gap:8px;flex-wrap:wrap}
.budget-percat-item-amounts .spent{font-weight:600;white-space:nowrap}
.budget-percat-item-actions{display:flex;gap:6px;flex-shrink:0}
.budget-percat-item-edit{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius: 50px;opacity:.4;transition:all .15s;flex-shrink:0}
.budget-percat-item-edit .material-icons{font-size:18px}
.budget-percat-item-edit:hover{opacity:1;background:rgba(59,130,246,.1);color:#3b82f6}
.budget-percat-item-delete{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius: 12px;opacity:.4;transition:all .15s;flex-shrink:0}
.budget-percat-item-delete .material-icons{font-size:18px}
.budget-percat-item-delete:hover{opacity:1;background:rgba(239,68,68,.1);color:var(--danger)}

/* Analysis Card */
.budget-analysis-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;display:flex;align-items:center;gap:16px;border:1.5px solid var(--border)}
.budget-analysis-icon{font-size:28px;flex-shrink:0;color:#f59e0b}
.budget-analysis-icon .material-icons{font-size:28px}
.budget-analysis-text{font-size:14px;line-height:1.5;color:var(--text2)}

/* History Card */
.budget-history-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border)}
.budget-history-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.budget-history-title .material-icons{font-size:20px}
.budget-history-list{display:flex;flex-direction:column;gap:10px}
.budget-history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg);border-radius:12px}
.budget-history-item .hist-month{font-size:14px;font-weight:600;color:var(--text);min-width:80px}
.budget-history-item .hist-detail{display:flex;align-items:center;gap:10px}
.budget-history-item .hist-saving{font-size:13px;font-weight:500}
.budget-history-item .hist-saving.pos{color:#10b981}
.budget-history-item .hist-saving.neg{color:#ef4444}
.budget-history-item .hist-target{font-size:12px;color:var(--text2)}
.budget-history-item .hist-pct{font-size:12px;font-weight:700;padding:4px 10px;border-radius:10px}

/* Budget Category Colors */
.budget-cat-makan_minum .budget-percat-item-icon{background:rgba(249,115,22,.1);color:#f97316}
.budget-cat-transport .budget-percat-item-icon{background:rgba(59,130,246,.1);color:#3b82f6}
.budget-cat-belanja .budget-percat-item-icon{background:rgba(168,85,247,.1);color:#a855f7}
.budget-cat-tagihan .budget-percat-item-icon{background:rgba(239,68,68,.1);color:#ef4444}
.budget-cat-hiburan .budget-percat-item-icon{background:rgba(236,72,153,.1);color:#ec4899}
.budget-cat-kesehatan .budget-percat-item-icon{background:rgba(16,185,129,.1);color:#10b981}
.budget-cat-pendidikan .budget-percat-item-icon{background:rgba(245,158,11,.1);color:#f59e0b}
.budget-cat-packaging .budget-percat-item-icon{background:rgba(99,102,241,.1);color:#6366f1}
.budget-cat-ongkir .budget-percat-item-icon{background:rgba(20,184,166,.1);color:#14b8a6}
.budget-cat-supplier .budget-percat-item-icon{background:rgba(107,114,128,.1);color:#6b7280}
.budget-cat-gaji .budget-percat-item-icon{background:rgba(16,185,129,.1);color:#10b981}
.budget-cat-sewa .budget-percat-item-icon{background:rgba(139,92,246,.1);color:#8b5cf6}
.budget-cat-operasional .budget-percat-item-icon{background:rgba(99,102,241,.1);color:#6366f1}
.budget-cat-lainnya .budget-percat-item-icon{background:rgba(156,163,175,.1);color:#9ca3af}
.hist-pct.high{background:#10b981;color:#fff}
.hist-pct.mid{background:#f59e0b;color:#fff}
.hist-pct.low{background:#ef4444;color:#fff}
.hist-pct.negative{background:#6b7280;color:#fff}

/* ====== NEW DASHBOARD ELEMENTS ====== */

/* Quick Actions */
.quick-actions{display:flex;gap:10px;padding:0 20px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick-actions::-webkit-scrollbar{display:none}
.qa-btn{flex-shrink:0;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;min-width:130px}
.qa-btn:hover{border-color:var(--primary);box-shadow:0 2px 12px rgba(59,130,246,.1)}
.qa-btn:active{transform:scale(.97)}
.qa-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.qa-icon.material-icons{font-size:22px}
.qa-btn:nth-child(1) .qa-icon{background:rgba(59,130,246,.1)}
.qa-btn:nth-child(2) .qa-icon{background:rgba(239,68,68,.1)}
.qa-btn:nth-child(3) .qa-icon{background:rgba(59,130,246,.1)}
.qa-btn:nth-child(4) .qa-icon{background:rgba(245,158,11,.1)}
.qa-btn:nth-child(5) .qa-icon{background:rgba(139,92,246,.1)}
.qa-label{font-size:12px;font-weight:600;white-space:nowrap}

/* Quick Stats */
.quick-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;padding:0 16px 12px;width:100%;box-sizing:border-box;min-width:0}
.quick-stats > .qs-card{min-width:0}
.qs-card{background:var(--card);border-radius:16px;padding:14px 12px 12px;box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.qs-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.qs-card.green::before{background:#10b981}
.qs-card.red::before{background:#ef4444}
.qs-card.blue::before{background:#3b82f6}
.qs-card.amber::before{background:#f59e0b}
.qs-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.qs-icon.material-icons{font-size:18px}
.qs-card.green .qs-icon{background:#10b981;color:#fff}
.qs-card.red .qs-icon{background:#ef4444;color:#fff}
.qs-card.blue .qs-icon{background:#3b82f6;color:#fff}
.qs-card.amber .qs-icon{background:#f59e0b;color:#fff}
.qs-label{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.qs-rp{font-size:11px;font-weight:600;color:var(--text);margin-bottom:1px}
.qs-value{font-size:16px;font-weight:800;line-height:1.2;margin-bottom:4px}
.qs-value.green{color:#10b981}
.qs-value.red{color:#ef4444}
.qs-sub{font-size:10px;color:var(--text3);margin-top:auto;line-height:1.3}
.qs-sub .up{color:var(--success)}
.qs-sub .down{color:var(--danger)}

/* Dark mode quick-stats */
.dark .qs-card{background:#2a2a2e}
.dark .qs-label{color:#888}
.dark .qs-rp{color:#ccc}
.dark .qs-sub{color:#888}

/* Alerts */
.alerts{padding:0 20px 16px;display:flex;flex-direction:column;gap:8px}
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:12px;font-weight:500}
.alert.warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.alert.danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert.info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.alert-icon{font-size:16px;flex-shrink:0}
.alert-icon.material-icons{font-size:20px}
.alert-text{flex:1;line-height:1.4}
.alert-text strong{font-weight:700}
.alert-x{background:none;border:none;font-size:14px;cursor:pointer;color:inherit;opacity:.5;padding:0}

/* Insight */
.insight-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:16px 20px;color:#fff;margin:0 20px 16px}
.insight-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.insight-emoji{font-size:20px}
.insight-emoji.material-icons{font-size:24px}
.insight-title{font-size:13px;font-weight:700;opacity:.9}
.insight-text{font-size:12px;line-height:1.5;opacity:.85}
.insight-text strong{opacity:1}

/* Bills */
/* Bills Page */
.bills-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.bills-page-title{font-size:24px;font-weight:800;color:var(--text)}
.bills-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.bills-add-fab{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.bills-add-fab:active{transform:scale(.93)}
.bills-add-fab .material-icons{font-size:22px}

.bills-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.bills-summary-card{background:var(--card);border-radius:16px;padding:16px;border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.bills-summary-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.bills-summary-ico .material-icons{font-size:20px}
.bills-summary-card.upcoming .bills-summary-ico{background:rgba(245,158,11,.1)}
.bills-summary-card.upcoming .bills-summary-ico .material-icons{color:#f59e0b}
.bills-summary-card.paid .bills-summary-ico{background:rgba(16,185,129,.1)}
.bills-summary-card.paid .bills-summary-ico .material-icons{color:#10b981}
.bills-summary-card.income .bills-summary-ico{background:rgba(16,185,129,.1)}
.bills-summary-card.income .bills-summary-ico .material-icons{color:#10b981}
.bills-badge{position:absolute;top:8px;right:8px;font-size:9px;padding:2px 6px;border-radius:8px;background:var(--border);color:var(--text3);font-weight:600}
.bills-badge.active{background:rgba(239,68,68,.1);color:#ef4444}
.bills-summary-card{position:relative}
.bills-summary-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.bills-summary-value{font-size:20px;font-weight:800;color:var(--text)}
.bills-summary-sub{font-size:12px;color:var(--text3);font-weight:600}

.bills-form-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border)}
.bills-form-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px}
.bills-form{display:flex;flex-direction:column;gap:12px}

.bills-section-title{font-size:15px;font-weight:700;padding:0 4px;margin:20px 0 10px;display:flex;align-items:center;gap:6px;color:var(--text)}
.bills-section-title .material-icons{font-size:18px;color:var(--text3)}

/* === TRANSFER PAGE === */
.transfer-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.transfer-page-title{font-size:24px;font-weight:800;color:var(--text)}
.transfer-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.transfer-add-fab{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.transfer-add-fab:active{transform:scale(.93)}
.transfer-add-fab .material-icons{font-size:22px}

.transfer-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.transfer-summary-card{background:var(--card);border-radius:16px;padding:16px;border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.transfer-summary-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.transfer-summary-ico .material-icons{font-size:20px}
.transfer-summary-card.total .transfer-summary-ico{background:rgba(59,130,246,.1)}
.transfer-summary-card.total .transfer-summary-ico .material-icons{color:#3b82f6}
.transfer-summary-card.month .transfer-summary-ico{background:rgba(16,185,129,.1)}
.transfer-summary-card.month .transfer-summary-ico .material-icons{color:#10b981}
.transfer-summary-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.transfer-summary-value{font-size:20px;font-weight:800;color:var(--text)}
.transfer-summary-sub{font-size:12px;color:var(--text3);font-weight:600}

.transfer-form-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--primary)}
.transfer-form-title{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.transfer-form-title::before{content:"💸";font-size:18px}
.transfer-form{display:flex;flex-direction:column;gap:12px}

.transfer-section-title{font-size:15px;font-weight:700;padding:0 4px;margin:20px 0 10px;display:flex;align-items:center;gap:6px;color:var(--text)}
.transfer-section-title .material-icons{font-size:18px;color:var(--text3)}

.bills-list{padding:0 4px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bill-card{
  background:var(--card);
  border-radius:16px;
  padding:16px;
  border:1.5px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  transition:background .15s;
}


.dark .bills-summary-card{background:var(--card)}
.dark .bills-form-card{background:var(--card)}
.dark .transfer-form-card{background:var(--card)}
.dark .transfer-summary-card{background:var(--card)}





/* Budget Progress List (mini) */
.budget-progress-list{padding:0 20px 16px;display:flex;flex-direction:column;gap:10px}
.bp-card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.bp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bp-cat{display:flex;align-items:center;gap:8px}
.bp-cat-icon{font-size:16px;flex-shrink:0}
.bp-cat-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-pct{font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;flex-shrink:0}
.bp-pct.ok{background:rgba(16,185,129,.1);color:var(--success)}
.bp-pct.warn{background:rgba(245,158,11,.1);color:#f59e0b}
.bp-pct.danger{background:rgba(239,68,68,.1);color:var(--danger)}
.bp-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-bottom:6px}
.bp-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.bp-bar-fill.ok{background:var(--success)}
.bp-bar-fill.warn{background:#f59e0b}
.bp-bar-fill.danger{background:var(--danger)}
.bp-detail{display:flex;justify-content:space-between;font-size:11px;color:var(--text3)}

/* Goals Mini */
.goals-mini{padding:0 20px 16px;display:flex;flex-direction:column;gap:10px}
.goals-mini-card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
.goals-mini-icon{font-size:24px;flex-shrink:0}
.goals-mini-info{flex:1;min-width:0}
.goals-mini-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goals-mini-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-top:4px}
.goals-mini-bar-fill{height:100%;border-radius:3px}
.goals-mini-right{text-align:right;flex-shrink:0}
.goals-mini-pct{font-size:14px;font-weight:700}
.goals-mini-sub{font-size:11px;color:var(--text3)}

/* Section Title (reusable) */
.section-title{font-size:15px;font-weight:700;padding:0 20px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.section-title .material-icons{font-size:18px}
.section-title a{font-size:12px;color:var(--primary);font-weight:600;text-decoration:none;cursor:pointer}

/* ====== DARK MODE ====== */
.dark-btn{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.dark-btn .material-icons{font-size:20px}
.dark body{background:var(--bg)}


/* TRANSACTION TABLE - horizontal scroll, stable layout */
.tx-table-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.tx-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Header row */
.tx-table-hd{display:flex;min-width:780px;padding:14px 16px;background:var(--bg);font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:2}
.tx-table-hd span{flex:1;text-align:center;white-space:nowrap}
.tx-table-hd span:nth-child(1){flex:0 0 80px}  /* Tanggal */
.tx-table-hd span:nth-child(2){flex:1 1 0}     /* Deskripsi - fluid */
.tx-table-hd span:nth-child(3){flex:0 0 100px} /* Kategori */
.tx-table-hd span:nth-child(4){flex:0 0 100px} /* Dompet */
.tx-table-hd span:nth-child(5){flex:0 0 130px} /* Jumlah */
.tx-table-hd span:nth-child(6){flex:0 0 100px} /* Aksi */

/* Body rows */
.tx-table-body .tx-row{display:flex;min-width:780px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--border);transition:background .15s}
.tx-table-body .tx-row:last-child{border-bottom:none}
.tx-table-body .tx-row:hover{background:var(--bg)}

/* Cells - match header flex values exactly */
.tx-row .col-date{flex:0 0 80px;font-size:12px;color:var(--text2);text-align:center;white-space:nowrap;line-height:1.4}
.tx-row .col-desc{flex:1 1 0;font-size:13px;font-weight:600;word-wrap:break-word;overflow-wrap:break-word}
.tx-row .col-cat{flex:0 0 100px;font-size:12px;color:var(--text2);text-align:center;white-space:nowrap}
.tx-row .col-wallet{flex:0 0 100px;font-size:13px;font-weight:600;color:var(--text);text-align:center;white-space:nowrap}
.tx-row .col-amt{flex:0 0 130px;font-size:14px;font-weight:700;text-align:right;white-space:nowrap;padding-right:8px}
.tx-row .col-amt.income{color:var(--success)}
.tx-row .col-amt.expense{color:var(--danger)}
.tx-row .col-act{flex:0 0 100px;text-align:center;display:flex;gap:4px;align-items:center;justify-content:center}
.tx-row .col-act button{background:none;border:none;cursor:pointer;opacity:.5;transition:opacity .2s;padding:6px;display:inline-flex;align-items:center;justify-content:center;border-radius: 50px}
.tx-row .col-act button .material-icons{font-size:20px}
.tx-row .col-act button:hover{opacity:1}


.dark .tx-table-card,.dark .filter-card,.dark .card,.dark .bal-card,.dark .cal-card,.dark .report-card,.dark .budget-cat-item{background:var(--card)}
.dark .card{border:1px solid var(--border)}
.dark .filter-sel2,.dark .form-inp,.dark .wm-inp,.dark .tx-btn-outline{background:var(--bg);border-color:var(--border);color:var(--text)}
.dark select.form-inp{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.dark select.filter-sel2{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
.dark .filter-sel2:focus,.dark .form-inp:focus,.dark .wm-inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.dark .search-clear-btn:hover{background:var(--card);color:var(--text)}


/* Remove border on last row cells */

.dark 
.dark .tx-table-body,.dark .tx-table-row{border-bottom-color:var(--border)}
.dark .tx-table-row:hover{background:rgba(255,255,255,.04)}
.dark .wm-check{background:var(--bg)}
.dark .tx-act button{background:var(--bg)}
.dark .modal{background:var(--card)}
.dark .modal-x{background:var(--border);color:var(--text)}

/* Quick Tap Settings Panel */
.qt-settings-panel{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:20px;padding:20px;width:90%;max-width:420px;
  max-height:85vh;overflow-y:auto;animation:modalFadeIn .3s ease;
  position:relative;z-index:10000;
}
.qt-settings-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  font-size:16px;font-weight:700;color:var(--text);
}
.qt-settings-desc{font-size:13px;color:var(--text2);margin-bottom:16px}
.qt-settings-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:60vh;overflow-y:auto}
.qt-settings-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg);border-radius:12px;border:1px solid var(--border);
  cursor:default;user-select:none;
}
.qt-drag-handle{
  display:flex;align-items:center;cursor:grab;color:var(--text3);flex-shrink:0;
  padding:4px;margin:-4px 0;
}
.qt-drag-handle:active{cursor:grabbing}
.qt-drag-handle .material-icons{font-size:20px}
.qt-settings-item .material-icons:not(.qt-drag-handle .material-icons){font-size:22px;color:var(--text2)}
.qt-settings-item-name{flex:1;font-size:14px;font-weight:500;color:var(--text)}
.qt-settings-item-amount{
  width:80px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);font-size:13px;text-align:center;
}
.qt-settings-item-amount:focus{outline:none;border-color:var(--primary)}
.qt-toggle{
  position:relative;width:44px;height:24px;flex-shrink:0;
}
.qt-toggle input{opacity:0;width:0;height:0}
.qt-toggle .slider{
  position:absolute;inset:0;background:var(--border);border-radius: 50px;
  transition:.2s;cursor:pointer;
}
.qt-toggle .slider::before{
  content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;
}
.qt-toggle input:checked + .slider{background:var(--primary)}
.qt-toggle input:checked + .slider::before{transform:translateX(20px)}
.qt-settings-footer{display:flex;gap:10px}
.qt-settings-reset{
  flex:1;padding:10px;background:transparent;color:var(--text2);border:1px solid var(--border);
  border-radius: 12px;font-size:14px;font-weight:600;cursor:pointer;
}
.qt-settings-save{
  flex:2;padding:10px;background:var(--primary);color:#fff;border:none;
  border-radius: 12px;font-size:14px;font-weight:700;cursor:pointer;
}
.qt-settings-reset:hover{background:var(--bg)}
.qt-settings-save:hover{background:var(--primary-dark)}

/* Edit Transaction Modal */
.edit-type-toggle{display:flex;gap:8px;margin-bottom:16px}
.edit-type-btn{flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius: 50px;background:var(--card);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;font-family:inherit;transition:all .15s}
.edit-type-btn .material-icons{font-size:18px}
.edit-type-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.edit-type-btn.active[data-type="income"]{border-color:#10b981;background:rgba(16,185,129,.1);color:#10b981}
.edit-type-btn.active[data-type="expense"]{border-color:#ef4444;background:rgba(239,68,68,.1);color:#ef4444}
.edit-type-btn:active{transform:scale(.97)}
.dark .type-btn{background:var(--card);border-color:var(--border);color:var(--text)}
.dark .expense-btn.active{background:#dc262622;color:#ef4444}
.dark .income-btn.active{background:#10b98122;color:#10b981}
.dark .wm-btn-cancel{background:transparent;border-color:var(--border);color:var(--text2)}
.dark .cal-arrow{background:var(--card);color:var(--text)}
.dark .cal-date.has-tx{background:#3b82f633;color:#4dd9b0}
.dark .chart{background:transparent}

.dark .bal-card{background:linear-gradient(135deg,#3b82f633,#3b82f622,#3b82f611)}
.dark .saldo-total-card{background:#0A4C92;color:#fff}
.dark .saldo-total-label{color:rgba(255,255,255,.65)}
.dark .saldo-total-amount{color:#fff}
.dark .saldo-total-amount.negative{color:#fca5a5}
.dark .saldo-total-icon{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.dark .saldo-total-icon .material-icons{color:#FFD54F;font-size:28px}
.dark .bal-item{background:rgba(255,255,255,.05)}
.dark .tx-item{background:var(--bg)}
.dark .tx-ico{background:var(--primary-light)}
.dark .tx-ico.expense{background:var(--danger-light)}
.dark .tx-wallet{color:#34c759}
.dark .stat-pill{background:var(--bg)}
.dark .stat-pill.up{background:#10b98122}
.dark .stat-pill.down{background:#ef444422}
.dark .upgrade-banner{background:linear-gradient(135deg,#3b82f633,#3b82f622)}
.dark .upgrade-title{color:#fff}
.dark .cat-ico{background:var(--bg)}
.dark .progress-bar{background:var(--bg)}
.dark .trend-bar-wrap{background:var(--bg)}
.dark .avatar{background:#fbbf24}
.dark .avatar.large{background:#fbbf24}
.avatar.large{width:80px;height:80px;border-radius:50%;background:#fbbf24;color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;margin:0 auto 16px}
/* Profile Page */
.profile-header-card{background:var(--card);border-radius:24px;padding:24px;margin-bottom:16px;border:1.5px solid var(--border);display:flex;align-items:center;gap:16px}
.profile-avatar-wrap{flex-shrink:0}
.profile-avatar{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.profile-display-name{font-size:20px;font-weight:800;color:var(--text)}
.profile-tg{font-size:13px;color:var(--text3);margin-top:2px}

.profile-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.profile-stat-card{background:var(--card);border-radius:16px;padding:16px;border:1.5px solid var(--border);display:flex;flex-direction:column;gap:4px}
.profile-stat-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.profile-stat-ico .material-icons{font-size:20px}
.profile-stat-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.profile-stat-value{font-size:16px;font-weight:700;color:var(--text)}

.profile-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border)}
.profile-card-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.profile-card-title .material-icons{font-size:20px;color:var(--text3)}
.widget-settings-btn{background:none;border:none;color:var(--primary);cursor:pointer;padding:4px 8px;border-radius: 50px;transition:background .15s;display:flex;align-items:center;justify-content:center;margin-left:auto}
.widget-settings-btn:hover{background:var(--primary-light)}

.profile-settings{display:flex;flex-direction:column;gap:0}
.profile-setting-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.profile-setting-item:last-child{border-bottom:none}
.profile-setting-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text)}
.profile-setting-label .material-icons{font-size:18px;color:var(--text3)}
.profile-setting-arrow{font-size:20px;color:var(--text3);transition:color .15s}
.profile-setting-item:hover .profile-setting-arrow{color:var(--primary)}

.profile-select{background:var(--bg);border:1.5px solid var(--border);border-radius: 12px;padding:8px 12px;font-size:13px;color:var(--text);outline:none;font-family:inherit;min-width:160px}

.profile-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.profile-form-inline{display:flex;flex-direction:column;gap:10px}
.profile-form-inline .profile-input{padding:10px 12px;font-size:13px}
.profile-form-inline .profile-save-btn{max-width:200px}
.profile-form-group{display:flex;flex-direction:column;gap:6px}
.profile-form-group label{font-size:13px;font-weight:600;color:var(--text2)}
.profile-input{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--text);outline:none;font-family:inherit;transition:border-color .15s}
.profile-input:focus{border-color:var(--primary)}

.profile-save-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.profile-save-btn:hover{background:var(--primary-dark)}
.profile-save-btn:active{transform:scale(.98)}

.dark .profile-avatar{background:linear-gradient(135deg,#60a5fa,#818cf8)}
.dark .profile-stat-card{background:var(--card)}
.dark .profile-card{background:var(--card)}

/* SETTINGS */
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--text3);transition:.2s;border-radius:24px}
.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%}
.toggle-switch input:checked+.toggle-slider{background:var(--primary)}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}
/* New dashboard dark mode */
.dark .alert.warn{background:#422006;color:#fbbf24;border-color:#854d0e}
.dark .alert.danger{background:#450a0a;color:#fca5a5;border-color:#991b1b}
.dark .alert.info{background:#1e3a5f;color:#93c5fd;border-color:#2563eb}
.dark .bill-due.urgent{background:rgba(239,68,68,.2)}
.dark .bill-due.soon{background:rgba(245,158,11,.2)}
.dark .bill-due.ok{background:rgba(16,185,129,.15)}
.dark .bp-pct.ok{background:rgba(16,185,129,.15)}
.dark .bp-pct.warn{background:rgba(245,158,11,.15)}
.dark .bp-pct.danger{background:rgba(239,68,68,.15)}
.dark .insight-card{background:linear-gradient(135deg,#4f46e5,#7c3aed)}

/* ANALYTICS PAGE */
/* Analytics Page */
.analytics-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.analytics-page-title{font-size:24px;font-weight:800;color:var(--text)}
.analytics-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.analytics-period{background:var(--bg);border:1.5px solid var(--border);border-radius: 12px;padding:6px 12px;font-size:13px;color:var(--text);outline:none;font-family:inherit;flex-shrink:0;height:36px}
.analytics-badge{background:rgba(59,130,246,.1);color:#3b82f6;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600}

/* Hero Summary Row */
.analytics-hero-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.analytics-hero-card{background:var(--card);border-radius:20px;padding:18px 16px;border:1.5px solid var(--border);display:flex;flex-direction:column;gap:4px}
.analytics-hero-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.analytics-hero-ico .material-icons{font-size:22px}
.analytics-hero-card.income .analytics-hero-ico{background:rgba(16,185,129,.1)}
.analytics-hero-card.income .analytics-hero-ico .material-icons{color:#10b981}
.analytics-hero-card.expense .analytics-hero-ico{background:rgba(239,68,68,.1)}
.analytics-hero-card.expense .analytics-hero-ico .material-icons{color:#ef4444}
.analytics-hero-card.saving .analytics-hero-ico{background:rgba(59,130,246,.1)}
.analytics-hero-card.saving .analytics-hero-ico .material-icons{color:#3b82f6}
.analytics-hero-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.analytics-hero-value{font-size:18px;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.2}
.analytics-hero-trend{font-size:11px;font-weight:700;display:flex;align-items:center;gap:2px}
.analytics-hero-trend .material-icons{font-size:14px}
.analytics-hero-trend.up{color:#10b981}
.analytics-hero-trend.down{color:#ef4444}
.analytics-hero-sub{font-size:12px;color:var(--text3)}

/* Insight Card */
.analytics-insight-card{background:#EBF5FF;border-radius:20px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:14px;border:1.5px solid rgba(59,130,246,.15)}
.analytics-insight-ico{width:40px;height:40px;border-radius:12px;background:rgba(245,158,11,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.analytics-insight-ico .material-icons{font-size:22px;color:#f59e0b}
.analytics-insight-text{font-size:14px;line-height:1.5;color:#1A3A5C;font-weight:500}

.dark .analytics-insight-card{background:#0A4C92;border-color:transparent}
.dark .analytics-insight-text{color:#D4E4F0}

/* Cards */
.analytics-card{background:var(--card);border-radius:20px;padding:20px;border:1.5px solid var(--border)}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.analytics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.analytics-title{font-size:13px;font-weight:700;color:var(--text)}
.analytics-subtext{font-size:10px;color:var(--muted);font-weight:500}
.analytics-chart-wrap{position:relative;width:100%;height:200px}
.analytics-chart-wrap canvas, .analytics-chart-wrap div[id$='Chart']{width:100% !important;height:100% !important}
.analytics-pie-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.analytics-pie-chart{flex-shrink:0;max-width:220px;width:100%;position:relative}
.analytics-pie-chart canvas, .analytics-pie-chart div[id$='Chart']{max-width:220px;width:100% !important;height:auto !important}
.analytics-pie-legend{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto;padding-right:4px}
.analytics-pie-legend-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--bg)}
.analytics-pie-legend-color{width:14px;height:14px;border-radius:5px;flex-shrink:0}
.analytics-pie-legend-label{color:var(--text);font-weight:500;flex:1;font-size:13px}
.analytics-pie-legend-amount{font-weight:700;color:var(--text);white-space:nowrap;font-size:13px}

/* Top Category List */
.analytics-list{display:flex;flex-direction:column;gap:10px}
.analytics-list-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg);border-radius:16px}
.analytics-list-rank{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.analytics-list-item:nth-child(1) .analytics-list-rank{background:rgba(249,115,22,.12);color:#f97316}
.analytics-list-item:nth-child(2) .analytics-list-rank{background:rgba(59,130,246,.12);color:#3b82f6}
.analytics-list-item:nth-child(3) .analytics-list-rank{background:rgba(168,85,247,.12);color:#a855f7}
.analytics-list-item:nth-child(n+4) .analytics-list-rank{background:var(--border);color:var(--text3)}
.analytics-list-info{flex:1;min-width:0}
.analytics-list-name{font-size:14px;font-weight:600;color:var(--text)}
.analytics-list-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:6px}
.analytics-list-bar-fill{height:100%;border-radius:3px;transition:width .5s ease;background:var(--primary)}
.analytics-list-amount{font-size:15px;font-weight:800;color:var(--text);text-align:right;white-space:nowrap;flex-shrink:0}
.analytics-list-pct{font-size:12px;color:var(--text3);font-weight:600}

/* 7-Day Expense Bars */
.day7-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:8px 4px 0}
.day7-bar-item{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.day7-bar-amount{font-size:10px;font-weight:700;color:var(--text3);margin-bottom:4px;white-space:nowrap}
.day7-bar-track{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px;position:relative}
.day7-bar-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:4px}
.day7-bar-fill.low{background:linear-gradient(90deg,#10b981,#34d399)}
.day7-bar-fill.medium{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.day7-bar-fill.high{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.day7-bar-fill.very-high{background:linear-gradient(90deg,#ef4444,#f87171)}
.day7-bar-day{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:2px}
.day7-bar-item.today .day7-bar-day{color:var(--primary);font-weight:700}
.day7-bar-item.today .day7-bar-amount{color:var(--primary)}

.dark .day7-bar-track{background:rgba(255,255,255,.06)}

/* GOALS PAGE */
/* Goals Page */
.goals-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.goals-page-title{font-size:24px;font-weight:800;color:var(--text);margin-bottom:4px}
.goals-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.goals-add-fab{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.goals-add-fab:active{transform:scale(.93)}
.goals-add-fab .material-icons{font-size:22px}

.goals-summary-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.goals-summary-item{background:var(--card);border-radius:16px;padding:16px;border:none;box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.goals-summary-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.goals-summary-ico .material-icons{font-size:20px}
.goals-summary-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.goals-summary-value{font-size:18px;font-weight:800;color:var(--text)}

.goals-list{display:flex;flex-direction:column;gap:12px;margin-bottom:80px}
.goal-card{background:var(--card);border-radius:20px;padding:20px 20px 20px 24px;border:none;box-shadow:0 2px 8px rgba(0,0,0,.06);position:relative;overflow:hidden}
.goal-card-accent{position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:20px 0 0 20px}
.goal-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.goal-card-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.goal-card-name{font-size:16px;font-weight:700;color:var(--text);flex:1}
.goal-card-status{font-size:11px;padding:3px 10px;border-radius: 12px;font-weight:600;display:flex;align-items:center;gap:4px;flex-shrink:0}
.goal-card-status .material-icons{font-size:14px}
.goal-card-status.active{background:rgba(59,130,246,.1);color:#3b82f6}
.goal-card-status.completed{background:rgba(16,185,129,.1);color:#10b981}
.goal-card-status.paused{background:rgba(107,114,128,.1);color:#6b7280}
.goal-card-deadline{font-size:12px;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:4px}
.goal-card-amounts{display:flex;justify-content:space-between;margin-bottom:8px}
.goal-card-current{font-size:18px;font-weight:700;color:var(--text)}
.goal-card-target{font-size:13px;color:var(--text3)}
.goal-card-progress-wrap{height:10px;background:var(--border);border-radius:5px;overflow:hidden;margin-bottom:10px}
.goal-card-progress-fill{height:100%;border-radius:5px;transition:width .5s ease}
.goal-card-footer{display:flex;justify-content:space-between;align-items:center}
.goal-card-pct{font-size:14px;font-weight:700}
.goal-card-actions{display:flex;gap:6px}
.goal-card-actions button{background:none;border:none;padding:6px 10px;border-radius: 50px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;color:var(--text3)}
.goal-card-actions button:hover{background:var(--bg);color:var(--text)}
.goal-card-actions button .material-icons{font-size:16px}
.goal-card-actions .goal-delete-btn{color:var(--danger)}
.goal-card-actions .goal-delete-btn:hover{background:rgba(239,68,68,.1);color:var(--danger)}
.goal-card-actions .goal-contribute-btn{color:var(--primary)}
.goal-card-actions .goal-contribute-btn:hover{background:rgba(59,130,246,.1);color:var(--primary)}

.dark .goal-card{background:var(--card)}
.dark .goals-summary-item{background:var(--card)}

/* Goal icon & color picker */
.goal-icon-picker{display:flex;gap:8px;flex-wrap:wrap}
.goal-icon-opt{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border:2px solid transparent;transition:all .15s;background:var(--bg)}
.goal-icon-opt.active{border-color:var(--primary);background:var(--primary-light)}
.goal-color-picker{display:flex;gap:10px}
.goal-color-opt{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s}
.goal-color-opt.active{border-color:var(--text);transform:scale(1.15)}

/* DRAWER NAVIGATION */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;display:none;opacity:0;transition:opacity .3s}
.drawer-overlay.active{display:block;opacity:1}
.drawer{
  position:fixed;top:0;left:0;right:0;
  max-width:480px;margin:0 auto;
  max-height:100vh;overflow-y:auto;
  background:var(--card);
  border-radius:0 0 24px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:50;
  transform:translateY(-110%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.active{transform:translateY(0)}
.drawer.active ~ .header-modern,
.header-modern.drawer-open{
  border-bottom-color:transparent !important;
  background:var(--card) !important;
  border-radius:0 !important;
}
.drawer-nav{flex:1;padding:16px 12px 8px}
.drawer-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;border-radius:14px;
  color:var(--text2);cursor:pointer;
  font-size:15px;font-weight:500;
  margin-bottom:2px;transition:all .15s;
}
.drawer-item:hover{background:rgba(59,130,246,.06);color:var(--primary)}
.drawer-item:hover .drawer-item-ico{opacity:1}
.drawer-item.active{background:#E8F0FE;color:#007AFF;font-weight:700;position:relative}
.drawer-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:#007AFF}
.drawer-item.active .drawer-item-ico{color:#007AFF !important;opacity:1 !important;text-shadow:0 0 8px rgba(0,122,255,.5)}
.drawer-item-ico{width:22px;text-align:center;font-size:21px;opacity:.45;transition:all .2s}
.drawer-item-ico.material-icons{font-size:21px;width:21px;height:21px}
.drawer-item-lbl{flex:1}
.drawer-divider{height:1px;background:var(--border);margin:6px 12px}
/* ===== DRAWER GROUPS (rumahweb-style accordion) ===== */
.drawer-group{margin-bottom:4px;position:relative}
.drawer-group:not(:last-child)::after{content:'';display:block;height:1px;background:var(--border);margin:4px 16px;opacity:.5}
.drawer-group-header:hover{background:rgba(59,130,246,.06)}
.drawer-group-header{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-radius:10px;transition:all .15s}
.drawer-group-title{flex:1;font-size:14px;font-weight:600;color:var(--text);letter-spacing:.2px}
.drawer-group-ico{font-family:'Material Symbols Rounded';font-size:20px;color:var(--text);opacity:1;font-weight:600;font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20}
.drawer-group-chevron{font-size:20px;opacity:.45;transition:opacity .15s}
.drawer-group-header:hover .drawer-group-chevron{opacity:.7}
.drawer-group-items{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
.drawer-group-items.expanded{max-height:800px;opacity:1}
.drawer-group-items.collapsed{max-height:0;opacity:0}

/* Sub-items (nested) */
.drawer-item[data-group]{
  padding:10px 16px 10px 52px;font-size:14px;font-weight:500;
  border-radius:50px;margin:1px 8px;transition:all .15s;
}
.drawer-item[data-group] .drawer-item-ico{font-size:18px;opacity:.5}
.drawer-item[data-group]:hover{background:rgba(59,130,246,.08);color:var(--primary)}
.drawer-item[data-group]:hover .drawer-item-ico{opacity:.8}
.drawer-item[data-group].active{
  background:rgba(59,130,246,.10);color:#007AFF;font-weight:600;
  position:relative;
}
.drawer-item[data-group].active::before{
  content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:#007AFF;
}
.drawer-item[data-group].active .drawer-item-ico{color:#007AFF !important;opacity:.9 !important}
.drawer-dark-toggle{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;cursor:pointer;
  color:var(--text2);font-size:14px;font-weight:500;
  transition:all .15s;border-radius: 50px;
}
.drawer-dark-toggle:hover{background:rgba(59,130,246,.06)}
.drawer-dark-ico{font-size:21px;width:21px;opacity:.45;transition:opacity .2s}
.drawer-dark-toggle:hover .drawer-dark-ico{opacity:1}
.drawer-dark-lbl{flex:1}
.drawer-dark-switch{
  width:44px;height:24px;border-radius: 50px;
  background:var(--border);position:relative;
  transition:background .2s;flex-shrink:0;
}
.drawer-dark-switch.active{background:#007AFF}
.drawer-dark-knob{
  width:20px;height:20px;border-radius:50%;
  background:#fff;position:absolute;top:2px;left:2px;
  transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.drawer-dark-switch.active .drawer-dark-knob{transform:translateX(20px)}
.dark .drawer-dark-knob{background:#1a1a2e}
.drawer-footer{
  padding:0 12px 16px;
}
.drawer-footer-btn{
  display:none;
}
.drawer-footer-btn:hover{background:rgba(59,130,246,.12);color:var(--primary)}
.drawer-footer-btn .material-icons{font-size:18px}
.drawer-profile-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:4px;
}
.drawer-profile-row .drawer-profile{flex:1;padding:8px 12px;margin-top:0}
.drawer-profile-row .drawer-dark-toggle{flex-shrink:0;padding:8px 12px}
.drawer-profile{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:12px;
  transition:background .2s;
}
.drawer-profile:hover{background:rgba(59,130,246,.06)}
.drawer-profile.active{background:rgba(59,130,246,.1);position:relative}
.drawer-profile.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:#007AFF}
.drawer-profile.active .drawer-name{color:#007AFF;font-weight:700;text-shadow:0 0 8px rgba(0,122,255,.3)}
.drawer-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;flex-shrink:0;
}
.drawer-name{font-size:14px;font-weight:500;color:var(--text)}
.drawer-brand-text{
  font-size:10px;color:var(--text3);text-align:center;
  padding:10px 8px 4px;opacity:.5;line-height:1.2;
}

/* DARK MODE - ANALYTICS & GOALS */
.dark .analytics-card{background:var(--card)}
.dark .analytics-list-rank{background:rgba(255,255,255,.08)}
.dark .analytics-list-item:nth-child(n+4) .analytics-list-rank{background:rgba(255,255,255,.06);color:var(--text3)}
.dark .goal-icon-opt{background:var(--bg)}

/* BUDGET PAGE */
.budget-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.budget-item{display:flex;flex-direction:column;gap:4px}
.budget-label{font-size:12px;color:var(--text3);font-weight:600}
.budget-value{font-size:18px;font-weight:800}
.budget-value.income{color:var(--success)}
.budget-bar-wrap{height:10px;background:var(--bg);border-radius:5px;overflow:hidden;margin-bottom:8px}
.budget-bar{height:100%;background:var(--primary);border-radius:5px;transition:width .3s}
.budget-bar.over{background:var(--danger)}
.budget-pct{font-size:12px;color:var(--text2);text-align:right}
.budget-cat-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg);border-radius:12px;margin-bottom:8px}
.budget-cat-ico{width:36px;height:36px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:16px}
.budget-cat-info{flex:1}
.budget-cat-name{font-size:14px;font-weight:600}
.budget-cat-bar{height:6px;background:var(--border);border-radius:3px;margin-top:6px;overflow:hidden}
.budget-cat-fill{height:100%;border-radius:3px;transition:width .3s}
.budget-cat-fill.ok{background:var(--primary)}
.budget-cat-fill.warn{background:#f59e0b}
.budget-cat-fill.over{background:var(--danger)}
.budget-cat-amt{text-align:right;font-size:13px;font-weight:700}
.budget-cat-sub{font-size:11px;color:var(--text3)}
.budget-cat-del{width:28px;height:28px;border-radius: 12px;background:transparent;border:none;font-size:12px;cursor:pointer;color:var(--danger)}

/* DARK BUDGET */
.dark .budget-cat-item{background:var(--bg)}
.dark .budget-cat-ico{background:rgba(59,130,246,.15)}
.dark .budget-cat-bar{background:var(--border)}

/* NO BOTTOM NAV */

.app{padding-bottom:80px}

/* PREMIUM BALANCE CARD */
.bal-premium-card{
  background:linear-gradient(145deg,#2d2d3d 0%,#1a1a2e 50%,#16213e 100%);
  border-radius:24px;
  padding:28px 24px 48px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
}
.bal-premium-card::before{
  content:'';position:absolute;top:-40%;right:-20%;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);
  pointer-events:none;
}
.bal-premium-card::after{
  content:'';position:absolute;bottom:-30%;left:-10%;width:250px;height:250px;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
  pointer-events:none;
}
.bal-premium-top{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  position:relative;z-index:1;
}
.bal-premium-label{
  font-size:13px;color:rgba(255,255,255,.6);font-weight:500;
}
.bal-premium-circles{display:flex;align-items:center;}
.bal-circle{width:26px;height:26px;border-radius:50%;display:block;}
.bal-circle-red{background:#eb001b;margin-right:-8px;opacity:.9;}
.bal-circle-orange{background:#f79e1b;opacity:.9;}
.bal-premium-amount{
  font-size:26px;font-weight:800;color:#f0c040;
  margin-bottom:24px;position:relative;z-index:1;
  text-shadow:0 0 20px rgba(240,192,64,.15);
  letter-spacing:-.5px;
}
.bal-premium-amount.hidden{color:rgba(255,255,255,.8);letter-spacing:8px;user-select:none;}
.bal-premium-stat-val.hidden{color:rgba(255,255,255,.5);letter-spacing:4px;user-select:none;}
.bal-premium-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;
  position:relative;z-index:1;
  padding-right:20px;
}
.bal-premium-stat{display:flex;flex-direction:column;gap:4px;}
.bal-premium-stat:first-child{}
.bal-premium-stat:last-child{text-align:right;}
.bal-premium-stat-label{font-size:12px;color:rgba(255,255,255,.45);font-weight:500;}
.bal-premium-stat-val{font-size:16px;font-weight:700;}
.bal-premium-stat-val.income{color:#10b981;}
.bal-premium-stat-val.expense{color:#ef4444;}
.bal-premium-visibility{
  position:absolute;top:24px;right:20px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:none;
  cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  opacity:.5;transition:all .2s;
}
.bal-premium-visibility:hover{opacity:.8;background:rgba(255,255,255,.1);}
.bal-wave{
  position:absolute;top:50%;left:0;width:100%;height:200px;
  pointer-events:none;z-index:0;
  transform:translateY(-50%);
}

.dark .bal-premium-card{
  background:linear-gradient(145deg,#1e1e2e 0%,#141425 50%,#0f1a2e 100%);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}

/* ========== CHART SECTION (Dark) ========== */
.chart-section{
  background:#1a1a2e;
  border-radius:24px;
  padding:20px 16px 16px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.chart-header{display:flex;justify-content:flex-end;margin-bottom:12px;}
.chart-title{font-size:14px;font-weight:700;color:var(--text)}
.chart-title .material-icons{font-size:16px}
.chart-pct-badge{
  background:rgba(16,185,129,.15);color:#10b981;
  font-size:13px;font-weight:600;padding:6px 14px;
  border-radius:20px;display:inline-flex;align-items:center;gap:4px;
}
.chart-pct-badge::before{content:'↗';font-size:12px;}
.chart-export-btn{
  background:rgba(255,255,255,.08);border:none;border-radius:50%;
  width:32px;height:32px;cursor:pointer;color:rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;margin-left:8px;
}
.chart-export-btn:hover{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);}
.chart-export-btn .material-icons{font-size:18px;}
.chart-canvas-wrap{position:relative;height:180px;margin-bottom:16px;}
#lineChart{width:100%;height:100%;display:block;}
.chart-tooltip{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(15,23,42,.92);border-radius:12px;padding:10px 14px;
  font-size:12px;color:#fff;min-width:150px;pointer-events:none;
  z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.1);
  display:none;
}
.chart-tooltip.visible{display:block !important;}
.chart-tooltip-date{font-weight:700;font-size:13px;margin-bottom:6px;color:#fff}
.chart-tooltip-amt{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px;}
.chart-tooltip-sub{font-size:12px;color:rgba(255,255,255,.85);line-height:1.6;}

/* Fix quick stats on small screens */
@media (max-width: 380px) {
  .quick-stats { gap: 8px; padding: 0 12px 10px; }
  .qs-card { padding: 12px 10px 10px; }
  .qs-value { font-size: 14px; }
  .qs-icon { width: 28px; height: 28px; }
  .qs-label { font-size: 9px; }
  .qs-rp { font-size: 10px; }
  .qs-sub { font-size: 9px; }
}

/* Fix quick actions on small screens */
@media (max-width: 380px) {
  .qa-btn { min-width: 120px; padding: 12px 14px; }
  .qa-icon { width: 32px; height: 32px; font-size: 16px; }
  .qa-label { font-size: 11px; }
}

/* Fix bill cards on small screens */
@media (max-width: 380px) {
  .bill-card { padding: 12px; gap: 8px; }
  .bill-icon { width: 36px; height: 36px; font-size: 16px; }
  .bill-amount { font-size: 13px; }
  .bill-due { font-size: 9px; padding: 2px 6px; }
}

/* Fix budget progress on small screens */
@media (max-width: 380px) {
  .bp-card { padding: 12px; }
  .bp-pct { font-size: 11px; padding: 2px 6px; }
  .bp-detail { font-size: 10px; }
}

/* Fix goals mini on small screens */
@media (max-width: 380px) {
  .goals-mini-card { padding: 12px; gap: 8px; }
  .goals-mini-icon { font-size: 20px; }
  .goals-mini-pct { font-size: 13px; }
  .goals-mini-sub { font-size: 10px; }
}

/* Fix insight card on small screens */
@media (max-width: 380px) {
  .insight-card { padding: 14px 16px; }
  .insight-text { font-size: 11px; }
}

/* Fix alerts on small screens */
@media (max-width: 380px) {
  .alert { padding: 10px 12px; font-size: 11px; }
  .alert-icon { font-size: 14px; }
}

/* Fix section titles on small screens */
@media (max-width: 380px) {
  .section-title { font-size: 14px; padding: 0 16px; }
  .section-title a { font-size: 11px; }
}

/* Fix quick actions and stats padding on small screens */
@media (max-width: 380px) {
  .quick-actions { padding: 0 16px 12px; }
  .quick-stats { padding: 0 12px 10px !important; }
  .alerts { padding: 0 16px 12px; }
  .insight-card { margin: 0 16px 12px; }
  .bills-list { padding: 0 16px 12px; }
  .budget-progress-list { padding: 0 16px 12px; }
  .goals-mini { padding: 0 16px 12px; }
  .tx-list { padding: 0 16px 12px; }
}

/* Fix page padding on small screens */
@media (max-width: 380px) {
  .page { padding: 20px 16px 0 16px; }
  .card { padding: 18px 16px; }
}

/* Fix bottom nav safe area (iPhone notch) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bnav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .app {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Fix landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .bnav { display: none; }
  .fab-float { display: none; }
  .app { padding-bottom: 20px; }
  .page { padding: 16px; }
  .header { padding: 8px 16px; }
}

/* Fix wallet cards on small screens */
@media (max-width: 380px) {
  .wallet-card { padding: 18px 16px; }
  .wallet-card .w-amount { font-size: 24px; }
  .wallet-card .w-ico { width: 40px; height: 40px; }
}

/* Fix budget target card on small screens */
/* Fix mobile page top padding (header is shorter on mobile) */
@media (max-width: 480px) {
  .page { padding-top: 18px; }
  .health-page-hd { margin: 0 0 14px 0 !important; padding: 0 !important; }
  .health-page-title { margin: 0 !important; padding: 0 !important; line-height: 1.2; }
  .health-page-sub { margin: 0 !important; padding: 0 !important; }
}

@media (max-width: 480px) {
  .budget-target-card { padding: 20px; }
  .budget-target-amount { font-size: 26px; }
}

/* Fix budget stats row on small screens */
@media (max-width: 380px) {
  .budget-stats-row { gap: 6px; }
  .budget-stat-card { padding: 10px 6px; }
  .budget-stat-value { font-size: 12px; }
  .budget-stat-label { font-size: 10px; }
  .budget-stat-ico { width: 30px; height: 30px; }
  .budget-stat-ico .material-icons { font-size: 16px; }
  .budget-percat-summary { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .budget-percat-summary-item { flex-direction: row; justify-content: space-between; align-items: center; }
  .budget-percat-summary-value { font-size: 14px; }
}

/* Fix budget values on medium-small screens (380-420px) */
@media (min-width: 381px) and (max-width: 420px) {
  .budget-stats-row { gap: 8px; }
  .budget-stat-card { padding: 12px 8px; }
  .budget-stat-value { font-size: 13px; }
  .qs4-value { font-size: 18px; }
  .budget-percat-summary-value { font-size: 13px; }
}

/* Hero grid responsive */
@media (max-width: 640px) {
  .budget-hero-grid { grid-template-columns: 1fr; }
  .wallet-amount, .budget-target-amount { font-size: 28px; }
}

/* Fix goals summary on small screens */
@media (max-width: 380px) {
  .goals-summary-card { gap: 8px; }
  .goals-summary-item { padding: 12px; }
  .goals-summary-value { font-size: 16px; }
}

/* Fix analytics hero on small screens */
@media (max-width: 420px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-hero-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .analytics-hero-card { padding: 14px 10px; }
  .analytics-hero-ico { width: 34px; height: 34px; border-radius: 10px; }
  .analytics-hero-ico .material-icons { font-size: 18px; }
  .analytics-hero-label { font-size: 9px; }
  .analytics-hero-value { font-size: 14px; }
  .analytics-hero-card:last-child { grid-column: 1 / -1; }
}

/* Fix analytics pie wrap on small screens */
@media (max-width: 380px) {
  .analytics-pie-wrap { flex-direction: column; gap: 16px; }
  .analytics-pie-chart { max-width: 200px; }
  .analytics-pie-chart canvas, .analytics-pie-chart div[id$='Chart'] { max-width: 200px; }
  .analytics-pie-legend { width: 100%; gap: 6px; }
  .analytics-pie-legend-item { padding: 6px 0; border-bottom: 1px solid var(--border); gap: 8px; }
  .analytics-pie-legend-item:last-child { border-bottom: none; }
  .analytics-pie-legend-label { font-size: 12px; }
  .analytics-pie-legend-amount { font-size: 12px; }
}

/* Fix transaction table on small screens - already has overflow-x */
.tx-table-scroll { -webkit-overflow-scrolling: touch; }

/* Fix modal on very tall screens */
@media (min-height: 800px) {
  .modal { max-height: 70vh; }
}

/* Fix notification panel on small screens */
@media (max-width: 380px) {
  .notif-panel { width: calc(100vw - 24px); right: 12px; }
}

/* Fix sidebar on small screens */
@media (max-width: 380px) {
  .sidebar { width: 260px; }
}

/* Fix premium balance card on small screens */
@media (max-width: 380px) {
  .bal-premium-card { padding: 24px 20px 40px; }
  .bal-premium-amount { font-size: 22px; }
  .bal-premium-stat-val { font-size: 14px; }
}

/* Fix chart section on small screens */
@media (max-width: 380px) {
  .chart-section { padding: 16px 12px 12px; }
  .chart-toggle-btn { font-size: 13px; padding: 8px 12px; }
  .chart-date-day { font-size: 12px; }
.chart-date-day{color:var(--text);font-weight:600;}
.chart-date-item.active .chart-date-day{color:var(--primary);font-weight:700;}
.dark .chart-date-day{color:var(--text);}
.dark .chart-date-item.active .chart-date-item.active .chart-date-day{color:var(--primary);font-weight:700;}
.chart-date-label{font-size:10px;color:var(--text3);margin-top:1px;}
.chart-date-item.active .chart-date-label{color:var(--text2);}
}

/* Fix summary card on small screens */
@media (max-width: 380px) {
  .summary-card { padding: 18px 16px; }
  .summary-icon-box { width: 40px; height: 40px; font-size: 20px; }
  .summary-amount { font-size: 16px; }
  .summary-row { gap: 10px; }
}

/* Fix form rows on small screens */
@media (max-width: 380px) {
  .form-row { gap: 8px; }
  .wm-row { gap: 8px; }
}

/* Fix budget per category on small screens */
@media (max-width: 380px) {
  .budget-percat-summary { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .budget-percat-item { padding: 12px; }
}

/* Fix analytics list on small screens */
@media (max-width: 380px) {
  .analytics-list-item { gap: 8px; padding: 10px 12px; }
  .analytics-list-rank { width: 24px; font-size: 13px; }
  .analytics-list-name { font-size: 13px; }
  .analytics-list-amount { font-size: 13px; }
}

/* Fix goal cards on small screens */
@media (max-width: 380px) {
  .goal-card { padding: 16px 16px 16px 20px; }
  .goal-card-icon { width: 40px; height: 40px; font-size: 20px; }
  .goal-card-current { font-size: 16px; }
  .goal-card-actions button { padding: 6px 10px; font-size: 11px; }
}

/* Fix category management on small screens */
@media (max-width: 380px) {
  .cat-item { gap: 8px; padding: 8px 0; }
  .cat-item-btn { width: 28px; height: 28px; }
}

/* ====== SCAN STRUK (OCR) ====== */
.scan-upload-area{border:2px dashed var(--border);border-radius:16px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s}
.scan-upload-area:hover{border-color:var(--primary);background:var(--primary-light)}
.scan-upload-icon{font-size:48px;margin-bottom:8px}
.scan-upload-icon .material-icons{font-size:48px}
.conf-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px}
.conf-badge.ok{background:rgba(16,185,129,.1);color:var(--success)}
.conf-badge.warn{background:rgba(245,158,11,.1);color:#f59e0b}
.conf-badge.danger{background:rgba(239,68,68,.1);color:var(--danger)}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOADING OVERLAY FOR MODALS */
.modal-loading-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.35);border-radius:16px;z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal-loading-overlay.active{display:flex}
.modal-loading-popup{background:#fff;border-radius:20px;padding:24px 36px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 16px 48px rgba(0,0,0,.2);animation:loaderPopIn .25s ease;min-width:180px}
.dark .modal-loading-popup{background:#1e1e2e;color:#ccc}
.modal-loading-popup .modal-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
.modal-loading-popup span{font-size:14px;font-weight:600;color:var(--text)}

/* ====== END MOBILE FIXES ====== */

/* CONFIRM MODAL */
.confirm-modal{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 28px 24px;text-align:center;
  max-width:320px;margin:0 auto;
  border-radius:24px;
  backdrop-filter:blur(10px);
}
.confirm-icon{
  width:56px;height:56px;border-radius:16px;
  background:rgba(239,68,68,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin-bottom:20px;flex-shrink:0;
  color:#ef4444;
}
.confirm-icon .material-icons{font-size:28px;}
.confirm-title{
  font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;
  letter-spacing:-0.2px;
}
.confirm-message{
  font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:28px;
  max-width:260px;
}
.confirm-actions{
  display:flex;gap:10px;width:100%;
}
.confirm-btn{
  flex:1;padding:14px 16px;border-radius:14px;font-size:15px;font-weight:600;
  cursor:pointer;border:none;transition:all .15s ease;
  letter-spacing:-0.1px;
}
.confirm-btn:active{transform:scale(.97);}
.confirm-btn-cancel{
  background:var(--bg-secondary,#f2f2f7);color:var(--text,#007AFF);
  border:1.5px solid transparent;
}
.confirm-btn-cancel:hover{background:var(--bg-tertiary,#e5e5ea);}
.confirm-btn-danger{
  background:#ef4444;color:#fff;
  box-shadow:0 4px 14px rgba(239,68,68,.35);
}
.confirm-btn-danger:hover{background:#dc2626;box-shadow:0 6px 18px rgba(239,68,68,.45);}

.dark .confirm-modal{background:rgba(28,28,30,.95);}

/* DELETE BUTTON - SPLIT BILL */
.btn-delete-split{
  width:36px;height:36px;border-radius: 50px;border:none;
  background:rgba(239,68,68,.1);color:#ef4444;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s ease;flex-shrink:0;
}
.btn-delete-split:hover{background:rgba(239,68,68,.2);}
.btn-delete-split:active{transform:scale(.92);}
.btn-delete-split .material-icons{font-size:20px;}
.dark .confirm-icon{background:rgba(239,68,68,.12);}
.dark .confirm-btn-cancel{background:rgba(44,44,46,.8);color:#0A84FF;}
.dark .confirm-btn-cancel:hover{background:rgba(58,58,62,.9);}

/* Confirm modal centered override */
#confirmModal .confirm-modal{
  border-radius:24px !important;
  margin:auto !important;
  animation:confirmPop .25s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes confirmPop{
  from{opacity:0;transform:scale(.88) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* NOTIFICATION BUTTON */
.notif-btn{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;color:var(--text)}
.notif-btn:hover{background:var(--border)}
.notif-btn .material-icons{font-size:20px}
.notif-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;background:#ef4444;color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* NOTIFICATION PANEL */
.notif-panel{position:fixed;top:56px;right:12px;width:320px;max-height:70vh;background:var(--card);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:250;display:none;animation:panelSlide .2s ease;overflow:hidden}
.notif-panel.active{display:block}
@keyframes panelSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.notif-panel-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.notif-panel-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px}
.notif-panel-title .material-icons{font-size:16px;vertical-align:middle}
.notif-panel-clear{font-size:12px;color:var(--primary);cursor:pointer;background:none;border:none;font-weight:600}

.notif-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.notif-filter-tab {
  flex: 1;
  padding: 6px 12px;
  border: none;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text3);
  transition: all 0.2s;
}

.notif-filter-tab:hover {
  background: var(--card);
  color: var(--text);
}

.notif-filter-tab.active {
  background: var(--primary);
  color: #fff;
}

.notif-panel-list{overflow-y:auto;max-height:calc(70vh - 48px)}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;cursor:pointer;transition:background .15s}
.notif-item:hover{background:var(--primary-light)}
.notif-item.unread{border-left:3px solid var(--primary);background:rgba(59,130,246,.03)}
.notif-item-icon{font-size:20px;flex-shrink:0;margin-top:2px}
.notif-item-body{flex:1;min-width:0}
.notif-item-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.notif-item-desc{font-size:12px;color:var(--text2);line-height:1.4}
.notif-item-time{font-size:11px;color:var(--text3);margin-top:4px}

.notif-action-btn {
  margin-top: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(59,130,246,0.1);
  color: var(--primary);
  transition: all 0.2s;
}

.notif-action-btn:hover {
  background: rgba(59,130,246,0.2);
}

.notif-dismiss{position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:var(--text3);color:var(--card);border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.notif-item:hover .notif-dismiss{opacity:.7}
.notif-dismiss:hover{opacity:1!important;background:#dc2626}
.notif-empty{padding:32px 16px;text-align:center;color:var(--text3);font-size:13px}

/* IMPORT MODAL */
.import-drop{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;margin-bottom:16px;cursor:pointer;transition:all .2s}
.import-drop:hover,.import-drop.dragover{border-color:var(--primary);background:var(--primary-light)}
.import-drop-icon{font-size:32px;margin-bottom:8px}
.import-drop-text{font-size:13px;color:var(--text2)}
.import-drop-text b{color:var(--primary)}
#importFileInput{display:none}

/* IMPORT PREVIEW */
.import-preview{margin-top:12px;max-height:200px;overflow-y:auto;font-size:12px;color:var(--text2)}
.import-preview table{width:100%;border-collapse:collapse}
.import-preview th,.import-preview td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--border)}
.import-preview th{background:var(--bg);font-weight:600}

.dark .notif-btn{background:var(--bg);color:var(--text)}
.dark .notif-btn .material-icons{color:#fff}
.dark .dark-btn .material-icons{color:#fff}
.dark .notif-item:hover{background:rgba(59,130,246,.08)}
.dark .import-drop{background:var(--bg)}
.dark .import-drop:hover,.dark .import-drop.dragover{border-color:var(--primary);background:rgba(59,130,246,.08)}

/* CATEGORY MANAGEMENT */
.cat-mgmt-header{display:flex;justify-content:space-between;align-items:center}
.btn-add-sm{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:var(--primary);color:#fff;border:none;border-radius: 50px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.4}
.btn-add-sm:active{transform:scale(0.96)}
.cat-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.cat-item:last-child{border-bottom:none}
.cat-item-icon{font-size:22px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg);flex-shrink:0}
.cat-item-info{flex:1;min-width:0}
.cat-item-name{font-size:14px;font-weight:600;color:var(--text)}
.cat-item-slug{font-size:12px;color:var(--text3)}
.cat-item-actions{display:flex;gap:6px}
.cat-item-btn{width:30px;height:30px;border-radius: 50px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s}
.cat-item-btn.edit{background:rgba(59,130,246,.1);color:#3b82f6}
.cat-item-btn.edit:hover{background:rgba(59,130,246,.2)}
.cat-item-btn.delete{background:rgba(239,68,68,.1);color:#ef4444}
.cat-item-btn.delete:hover{background:rgba(239,68,68,.2)}

/* NET WORTH PAGE */
.chart-wrap{background:var(--card);border-radius:16px;padding:16px;margin-top:12px}

/* RECEIPT THUMBNAIL */
.receipt-thumb{cursor:pointer;font-size:16px;padding:4px;opacity:.7;transition:opacity .15s}
.receipt-thumb:hover{opacity:1}
.dark .receipt-thumb{opacity:.5}
.dark .receipt-thumb:hover{opacity:1}

/* RECEIPT MODAL */
#receiptModal{display:none;align-items:center;justify-content:center;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);backdrop-filter:blur(8px)}

/* Net Worth Snapshot Items */
.nw-snapshot-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border-radius:12px;margin-bottom:8px}
.nw-snapshot-icon{width:40px;height:40px;border-radius:12px;background:rgba(139,92,246,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nw-snapshot-icon .material-icons{font-size:22px;color:#8b5cf6}
.nw-snapshot-info{flex:1;min-width:0}
.nw-snapshot-amount{font-size:15px;font-weight:700;color:var(--text)}
.nw-snapshot-date{font-size:11px;color:var(--text3);margin-top:2px}
.nw-snapshot-actions{display:flex;gap:4px;flex-shrink:0}
.nw-act-delete:hover{background:rgba(239,68,68,.1)!important;color:var(--danger)!important}
.tx-title-gradient{background:linear-gradient(135deg,#1e3a8a,#3b82f6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}

/* Mobile Transaction Table */
@media (max-width: 800px) {
  .tx-table { min-width: 0 !important; display: block; }
  .tx-table thead { display: none !important; }
  .tx-table tbody { display: block; }
  .tx-table tbody tr {
    display: block;
    padding: 14px !important;
    margin: 0 0 12px 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    box-shadow: var(--shadow);
  }
  .tx-table tbody td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.04) !important;
    white-space: normal !important;
    text-align: right !important;
    font-size: 13px !important;
  }
  .tx-table tbody tr td:last-child { border-bottom: none !important; }
  .tx-table .col-date { color: var(--text3) !important; font-size: 11px !important; }
  .tx-table .col-date::before { content: "Tanggal"; font-weight: 700; color: var(--text2); font-size: 11px; margin-right: auto; }
  .tx-table .col-desc { font-weight: 600 !important; }
  .tx-table .col-desc::before { content: "Deskripsi"; font-weight: 700; color: var(--text2); font-size: 11px; margin-right: auto; }
  .tx-table .col-cat::before { content: "Kategori"; font-weight: 700; color: var(--text2); font-size: 11px; margin-right: auto; }
  .tx-table .col-amt::before { content: "Jumlah"; font-weight: 700; color: var(--text2); font-size: 11px; margin-right: auto; }
  .tx-table .col-amt { font-size: 14px !important; font-weight: 700 !important; }
  .tx-table .col-act {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-bottom: none !important;
  }
  .tx-table .col-act::before { display: none !important; }
  .tx-table .col-act button { padding: 8px !important; }
}

/* ============================================================
   DRAWER RESPONSIVE & DARK MODE
   ============================================================ */

/* Background Blobs */
.bg-blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:.12;pointer-events:none;z-index:0}
.dark .bg-blob{opacity:.06}
.shape-1{width:400px;height:400px;top:-100px;left:-100px;background:radial-gradient(circle,#3b82f6,#8b5cf6)}
.shape-2{width:350px;height:350px;bottom:-80px;right:-80px;background:radial-gradient(circle,#06b6d4,#3b82f6)}
.shape-3{width:300px;height:300px;top:40%;left:50%;background:radial-gradient(circle,#f59e0b,#ef4444);transform:translate(-50%,-50%)}

/* Dark mode: drawer */
.dark .drawer{background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.dark .header-modern.drawer-open{background:var(--card) !important;border-bottom-color:transparent !important}
.dark .drawer-item{color:var(--text2)}
.dark .drawer-item:hover{background:rgba(255,255,255,.06)}
.dark .drawer-item.active{background:rgba(59,130,246,.15);color:#60A5FA;font-weight:700;position:relative}
.dark .drawer-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:#60A5FA}
.dark .drawer-item.active .drawer-item-ico{color:#60A5FA !important;opacity:1 !important;text-shadow:0 0 8px rgba(96,165,250,.5)}
.dark .drawer-group-header:hover{background:rgba(255,255,255,.06)}
.dark .drawer-group-ico{color:var(--text);opacity:1;font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 20}
.dark .drawer-group:not(:last-child)::after{background:rgba(255,255,255,.1)}
.dark .drawer-item[data-group]{color:var(--text2)}
.dark .drawer-item[data-group]:hover{background:rgba(255,255,255,.08);color:#60A5FA}
.dark .drawer-item[data-group].active{background:rgba(59,130,246,.15);color:#60A5FA}
.dark .drawer-item[data-group].active::before{background:#60A5FA;left:16px;width:3px;height:20px}
.dark .drawer-item[data-group].active .drawer-item-ico{color:#60A5FA !important;opacity:.9 !important;text-shadow:none}
.dark .drawer-footer{border-top-color:rgba(255,255,255,.08)}
.dark .drawer-footer-btn{background:rgba(59,130,246,.1);color:var(--text2)}
.dark .drawer-footer-btn:hover{background:rgba(59,130,246,.18);color:#60A5FA}
.dark .drawer-profile:hover{background:rgba(255,255,255,.06)}
.dark .drawer-profile.active{background:rgba(59,130,246,.15);position:relative}
.dark .drawer-profile.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:24px;border-radius:0 4px 4px 0;background:#60A5FA}
.dark .drawer-profile.active .drawer-name{color:#60A5FA;font-weight:700;text-shadow:0 0 8px rgba(96,165,250,.3)}
.dark .drawer-name{color:var(--text)}

/* Drawer responsive */
@media(max-width:800px){
  .header-modern{border-radius:0 !important}
  .header-content{padding:10px 16px !important}
  .header-subtitle{display:none !important}
  .page{padding-top:12px !important}
}
@media(max-width:480px){
  #pgHealth .health-score-card{padding:16px}
  #pgHealth .health-gauge{width:100px;height:100px;font-size:28px}
  #pgHealth .health-page-title{font-size:18px}
}

/* Bottom nav with Lucide icons */

/* Responsive adjustments */
@media(max-width:480px){
  .bg-blob{filter:blur(60px);opacity:.08}
  .shape-1{width:250px;height:250px}
  .shape-2{width:200px;height:200px}
  .shape-3{width:180px;height:180px}
}

/* ===== DASHBOARD REDESIGN (May 10 2026) ===== */

/* 2-column dashboard grid */
.dashboard-grid{
  display:grid;grid-template-columns:1fr 300px;gap:20px;padding:0 20px 20px;
}
@media(max-width:900px){
  .dashboard-grid{grid-template-columns:1fr;gap:16px;padding:0 16px 16px;}
}

/* Hero Balance Card — gradient, no wave */
.hero-balance{
  background:linear-gradient(135deg,#1e3a5f,#2563eb 50%,#6366f1);
  border-radius:20px;padding:28px 24px;color:#fff;
  position:relative;overflow:hidden;margin-bottom:12px;
}
.hero-balance::after{
  content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;
  background:rgba(255,255,255,.05);border-radius:50%;
}
.hero-label{font-size:13px;opacity:.8;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.hero-amount{font-size:32px;font-weight:800;margin-bottom:16px;letter-spacing:-.5px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-amount.hidden{user-select:none;letter-spacing:2px}
.hero-stat-val.hidden{user-select:none;letter-spacing:2px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-stat{background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.hero-stat-label{font-size:11px;opacity:.7;margin-bottom:4px}
.hero-stat-val{font-size:16px;font-weight:700}
.hero-stat-val.income{color:#34d399}
.hero-stat-val.expense{color:#f87171}
.hero-visibility{
  position:absolute;top:16px;right:16px;background:rgba(255,255,255,.15);
  border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;
  color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:10;pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
.hero-balance::after{
  content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;
  background:rgba(255,255,255,.05);border-radius:50%;
  z-index:0;pointer-events:none;
}

/* Mobile: smaller hero amount to prevent overflow */
@media(max-width:480px){
  .hero-amount{font-size:22px!important}
  .hero-balance{padding:20px 16px}
  .hero-label{font-size:12px}
  .hero-stat-val{font-size:14px}
  .hero-stat-label{font-size:10px}
}

/* Quick Stats 4-card grid — 2x2 layout */

/* Quick Tap Bar */
.quick-tap-bar{
  display:flex;gap:8px;justify-content:flex-start;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  padding:4px 2px;margin-bottom:8px;
  scrollbar-width:none;
}
.quick-tap-bar::-webkit-scrollbar{display:none}
.quick-tap-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--bg);border:1px solid var(--border);cursor:pointer;
  padding:6px 10px;border-radius: 50px;
  transition:all .15s;min-width:52px;
  color:var(--text2);
}
.quick-tap-btn:hover{border-color:var(--qt-color,var(--primary))}
.quick-tap-btn:active{transform:scale(.93);background:var(--qt-color,var(--primary))}
.quick-tap-btn .material-icons{font-size:20px;color:var(--qt-color,var(--text2));line-height:1;transition:color .15s}
.quick-tap-btn:hover .material-icons{color:var(--qt-color,var(--primary))}
.quick-tap-btn:active .material-icons{color:#fff}
.quick-tap-label{font-size:10px;color:var(--text3);font-weight:500;line-height:1;transition:color .15s;white-space:nowrap}
.quick-tap-btn:hover .quick-tap-label{color:var(--qt-color,var(--primary))}
.quick-tap-btn:active .quick-tap-label{color:#fff}
.quick-tap-edit{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  padding:6px 8px;border-radius: 50px;
  transition:all .15s;min-width:36px;
}
.quick-tap-edit:hover{background:var(--primary-light)}
.quick-tap-edit:active{transform:scale(.9)}
.quick-tap-edit .material-icons{font-size:18px;color:var(--text3)}
.quick-tap-edit:hover .material-icons{color:var(--primary)}
.dark .quick-tap-btn{background:var(--card);border-color:var(--qt-color,var(--border));border-width:2px}
.dark .quick-tap-btn .material-icons{color:var(--qt-color,var(--text2))}
.dark .quick-tap-btn .quick-tap-label{color:var(--text3)}
.dark .quick-tap-btn:hover{background:rgba(59,130,246,.15);border-color:var(--qt-color,var(--primary))}
.dark .quick-tap-btn:active{background:var(--qt-color,var(--primary));border-color:var(--qt-color,var(--primary))}
.dark .quick-tap-btn:active .material-icons,.dark .quick-tap-btn:active .quick-tap-label{color:#fff}

.quick-stats-4{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  padding:2px 20px 14px!important;
}
.qs4-card{
  background:var(--card);border-radius:12px;padding:10px 10px;
  border-left:4px solid var(--primary);box-shadow:var(--shadow);
  transition:transform .15s;
}
.qs4-card:hover{transform:translateY(-2px)}
.qs4-card.green{border-left-color:#10b981}
.qs4-card.red{border-left-color:#ef4444}
.qs4-card.blue{border-left-color:#3b82f6}
.qs4-card.amber{border-left-color:#f59e0b}
.qs4-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.qs4-rp{font-size:12px;color:var(--text3);margin-bottom:2px}
.qs4-value{font-size:20px;font-weight:800;word-break:break-all;overflow-wrap:break-word}
.qs4-value.hidden{user-select:none;letter-spacing:2px}
.qs4-value.green{color:#10b981}
.qs4-value.red{color:#ef4444}
.qs4-sub{font-size:11px;color:var(--text3);margin-top:4px}

/* Quick Actions — pill grid */
.qa-pill-grid{
  display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px;
}
/* Center orphaned last item */
.qa-pill:last-child{margin-left:auto;margin-right:auto}
.qa-pill{
  display:flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:50px;border:none;cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s;background:var(--card);color:var(--text);
  box-shadow:var(--shadow);
}
.qa-pill:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.qa-pill .material-icons{font-size:18px}
.qa-pill.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.qa-pill.primary:hover{box-shadow:0 4px 16px rgba(59,130,246,.3)}
/* Ensure non-primary pills have visible border for shape consistency */
.qa-pill:not(.primary){border:1.5px solid var(--border)}

/* Chart panel — inside card */
.chart-panel{
  background:var(--card);border-radius:16px;padding:20px;
  box-shadow:var(--shadow);margin:0 20px 16px;
}
.chart-panel .chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.chart-panel .chart-pct-badge{
  background:#10b981;color:#fff;padding:4px 10px;border-radius:20px;
  font-size:13px;font-weight:700;
}
.chart-panel .chart-x-labels{display:flex;justify-content:space-between;padding:0 4px}
.chart-panel .chart-x-label{font-size:11px;color:var(--text);text-align:center}
.dark .chart-panel .chart-x-label{color:rgba(255,255,255,.4)}
.chart-panel .chart-toggle{display:flex;gap:4px;justify-content:center;margin-top:12px}
.chart-panel .chart-toggle-btn{
  padding:6px 16px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;
}
.chart-panel .chart-toggle-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Sidebar panel */
.dash-sidebar{display:flex;flex-direction:column;gap:16px}
.dash-sidebar .card{border-radius:16px;box-shadow:var(--shadow);overflow:hidden}

/* Dark mode overrides */
.dark .hero-balance{background:linear-gradient(135deg,#0f172a,#1e40af 50%,#4338ca)}
.dark .hero-stat{background:rgba(255,255,255,.06)}
.dark .hero-visibility{background:rgba(255,255,255,.1)}
.dark .qa-pill{background:#2a2a2e;color:#e0e0e0}
.dark .qa-pill:hover{background:#333}

/* ===== CHART REDESIGN (May 10 2026) ===== */
.chart-panel{
  background:var(--card);border-radius:18px;padding:20px 16px;
  box-shadow:var(--shadow);margin:0 20px 16px;
  position:relative;overflow:hidden;
}
.chart-panel-title{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.chart-panel-title h3{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--text);margin:0;
}
.chart-panel-title h3 .material-icons{color:var(--primary);font-size:22px}
.chart-badge{
  padding:4px 14px;border-radius:20px;font-size:13px;font-weight:700;
}
.chart-badge.surplus{background:rgba(16,185,129,.15);color:#10b981}
.chart-badge.deficit{background:rgba(239,68,68,.15);color:#ef4444}

/* Tab toggle - pill style */
.chart-tabs{
  display:flex;background:rgba(128,128,128,.1);border-radius: 50px;
  padding:4px;margin-bottom:16px;justify-content:center;
}
.chart-tab{
  padding:8px 20px;border-radius: 50px;border:none;cursor:pointer;
  font-size:14px;font-weight:600;background:transparent;color:var(--text3);
  transition:all .2s;
}
.chart-tab.active{
  background:var(--card);color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.dark .chart-tab.active{background:#2a2a2e;color:#fff}

/* Legend */
.chart-legend{
  display:flex;justify-content:center;gap:20px;margin-bottom:16px;
}
.chart-legend-item{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);font-weight:500;
}
.chart-legend-dot{
  width:14px;height:14px;border-radius:50%;border:2px solid;
}
.chart-legend-dot.green{border-color:#10b981}
.chart-legend-dot.red{border-color:#ef4444}

/* Dual line chart area */
.chart-canvas-wrap{position:relative;width:100%;height:200px}
.chart-canvas-wrap canvas, .chart-canvas-wrap div{width:100%!important;height:100%!important}

/* Tooltip */



/* X-axis labels */
.chart-x-labels{
  display:flex;justify-content:space-between;margin-top:8px;padding:0 4px;
}
.chart-x-label{font-size:11px;color:#4b5563;text-align:center}
.dark .chart-x-label{color:rgba(255,255,255,.4)}

/* Dark mode */
.dark .chart-panel{background:#1e1e22}
.dark .chart-tabs{background:rgba(255,255,255,.06)}
.dark .chart-tab.active{background:#2a2a2e;color:#fff}
.dark .chart-canvas-wrap canvas, .dark .chart-canvas-wrap div{opacity:.9}

.chart-date-item.active .chart-date-label{color:var(--text);}
/* ===== Chart Redesign — Analisis Arus Kas ===== */
.cf-card{
  background:#fff;border-radius:28px;padding:24px 20px 20px;
  box-shadow:0 4px 24px rgba(0,0,0,.07);margin-bottom:24px;
}
.dark .cf-card{background:#1e1e24;box-shadow:0 4px 24px rgba(0,0,0,.4)}
.cf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cf-head-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:#1a1a2e;margin:0}
.dark .cf-head-title{color:#e8e8f0}
.cf-head-ico{width:24px;height:24px;stroke:#2563eb;stroke-width:2.5}
.cf-badge{padding:8px 18px;border-radius:20px;font-size:14px;font-weight:700}
.cf-badge.surplus{background:#e8f5e9;color:#1b7a3d}
.cf-badge.deficit{background:#fdecea;color:#c0392b}
.cf-badge.neutral{background:var(--bg,#f0f0f0);color:var(--text2,#999)}
.dark .cf-badge.surplus{background:rgba(16,185,129,.15);color:#34d399}
.dark .cf-badge.deficit{background:rgba(239,68,68,.15);color:#f87171}
.dark .cf-badge.neutral{background:var(--bg,#333);color:var(--text3,#666)}
/* Tabs */
.cf-tabs{display:flex;background:#f1f3f7;border-radius:16px;padding:4px;margin-bottom:20px;max-width:340px;margin-left:auto;margin-right:auto}
.dark .cf-tabs{background:#2a2a32}
.cf-tab{flex:1;padding:10px 0;border:none;border-radius: 50px;background:transparent;font-size:14px;font-weight:700;color:#888;cursor:pointer;transition:all .25s}
.cf-tab.active{background:#1a1a2e;color:#fff;box-shadow:0 2px 8px rgba(26,26,46,.3)}
.dark .cf-tab.active{background:#3b3b44;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* Legend */
.cf-legend{display:flex;justify-content:flex-end;gap:20px;margin-bottom:16px}
.cf-leg{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#666}
.dark .cf-leg{color:#999}
.cf-leg-circle{width:14px;height:14px;border-radius:50%;border:2.5px solid;box-sizing:border-box}
.cf-leg-circle.green{border-color:#10b981;background:transparent}
.cf-leg-circle.red{border-color:#ef4444;background:transparent}
/* Chart area */
.cf-wrap{position:relative;height:220px;margin-bottom:4px}
.cf-wrap canvas{width:100%!important;height:220px!important}
/* Tooltip */
.cf-tip{
  display:none;position:absolute;
  background:rgba(26,26,46,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;padding:12px 16px;border-radius:14px;
  font-size:12px;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  pointer-events:none;z-index:10;transition:left .15s ease, top .15s ease, bottom .15s ease;
}
.dark .cf-tip{background:rgba(42,42,52,.8)}
.cf-tip.visible{display:block}
.cf-tip.visible{display:block}
.cf-tip-date{font-size:15px;font-weight:800;margin-bottom:8px}
.cf-tip-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}
.cf-tip-sq{width:10px;height:10px;border-radius:3px;display:inline-block}
.cf-tip-sq.green{background:#10b981}
.cf-tip-sq.red{background:#ef4444}
.cf-tip-row b{margin-left:auto;font-weight:700}
/* X labels */
.cf-x{display:flex;justify-content:space-between;padding:0 4px}
.cf-x-label{font-size:11px;color:#aab;font-weight:500}
.dark .cf-x-label{color:#667}
.chart-date-items{display:flex;gap:8px;flex:1;justify-content:center;align-items:center}
.chart-date-item{display:flex;flex-direction:column;align-items:center;padding:4px 8px;border-radius:12px;cursor:pointer;min-width:32px}
.chart-date-item.active{background:rgba(37,99,235,.1);border-radius:12px}
.chart-date-item.has-tx .chart-date-dot{background:var(--primary)}
.chart-date-dot{width:4px;height:4px;border-radius:50%;margin-top:4px;background:transparent}
.chart-date-arrow{background:none;border:none;font-size:18px;cursor:pointer;padding:8px;color:#999}
.chart-date-arrow:disabled{opacity:.3;cursor:default}
.dark .chart-date-arrow{color:#667}
.dark .chart-date-item.active{background:rgba(59,130,246,.15)}
/* Fix date overflow */
.cf-x{overflow:hidden;padding:0 8px}
.chart-date-items{gap:4px;flex:1;justify-content:space-between}
.chart-date-item{padding:2px 2px;min-width:24px}
.chart-date-day{font-size:13px;font-weight:600;line-height:1.2}
.chart-date-label{font-size:10px;color:#999;margin-top:0}
.dark .chart-date-label{color:#667}
.chart-date-arrow{font-size:14px;padding:4px 8px;flex-shrink:0}

/* ===== Ringkasan Bulan Card Redesign ===== */
.summary-card{
  background:#fff;border-radius:20px;padding:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);margin-bottom:16px;
}
.dark .summary-card{background:#1e1e22;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.summary-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.summary-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#333}
.dark .summary-title{color:#e8e8e8}
.summary-dots{font-size:20px;color:#999}
.summary-set-target{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius: 12px;border:none;background:transparent;font-size:13px;font-weight:600;color:#666;cursor:pointer;transition:all .15s}
.summary-set-target .material-icons{font-size:16px}
.summary-set-target:hover{background:rgba(59,130,246,.08);color:#2563eb}
.dark .summary-set-target{color:#999}
.dark .summary-set-target:hover{background:rgba(59,130,246,.15);color:#60a5fa}
.summary-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0}
.summary-row+.summary-row{border-top:1px solid #f0f0f0}
.dark .summary-row+.summary-row{border-top-color:#2a2a30}
.summary-icon-box{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.summary-icon-box.wallet{background:rgba(37,99,235,.1);color:#2563eb}
.summary-icon-box.budget{background:rgba(245,158,11,.1);color:#f59e0b}
.dark .summary-icon-box.wallet{background:rgba(59,130,246,.15)}
.dark .summary-icon-box.budget{background:rgba(245,158,11,.15)}
.summary-body{flex:1;min-width:0}
.summary-label{font-size:13px;font-weight:600;color:#666;margin-bottom:8px}
.dark .summary-label{color:#999}
.summary-bar-wrap{
  width:100%;height:6px;border-radius:3px;background:#f0f0f0;overflow:hidden;
}
.dark .summary-bar-wrap{background:#2a2a30}
.summary-sub{font-size:11px;color:#aaa;margin-top:4px}
.dark .summary-sub{color:#666}
.summary-bar{height:100%;border-radius:3px;transition:width .3s ease}
.summary-bar.green{background:linear-gradient(90deg,#10b981,#34d399)}
.summary-bar.red{background:linear-gradient(90deg,#ef4444,#f87171)}
.summary-right{flex-shrink:0;text-align:right;min-width:95px}
.summary-amount{font-size:16px;font-weight:800;color:#333;line-height:1.2}
.dark .summary-amount{color:#fff}
.summary-pct{font-size:13px;font-weight:700;margin-top:2px}
.summary-pct.green{color:#10b981}
.summary-pct.red{color:#ef4444}
.summary-pct.yellow{color:#f59e0b}
.summary-pct.blue{color:#3b82f6}
.summary-bar.yellow{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.summary-bar.blue{background:linear-gradient(90deg,#3b82f6,#60a5fa)}

/* Analytics link button */
.link-btn{
  background:none;border:none;padding:6px 12px;border-radius: 50px;
  font-size:13px;font-weight:600;color:#666;cursor:pointer;
  transition:all .2s;
}
.link-btn:hover{background:#f5f5f5;color:#333}
.dark .link-btn{color:#999}
.dark .link-btn:hover{background:#2a2a30;color:#e8e8e8}

/* === CARD VIEW for Transactions === */
/* === TRANSACTION CARDS === */
.tx-cards-list,
.tx-cards-wrap{
  padding:0 4px;
}

.tx-cards-scroll-wrap{
  max-height:calc(100vh - 180px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:20px;
}

.tx-date-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 4px 8px;font-size:13px;font-weight:600;color:var(--text2);
  border-bottom:1px solid var(--border);margin-bottom:8px;
  position:-webkit-sticky;
  position:sticky;
  top:0;z-index:5;
  background:var(--bg);
}
.tx-date-total{font-size:12px;font-weight:700}
.tx-date-total.green{color:#10b981}
.tx-date-total.red{color:#ef4444}

.tx-card-item{
  display:flex;flex-direction:column;
  padding:14px 16px;margin-bottom:8px;
  background:var(--card);border-radius:14px;
  border:1px solid var(--border);
  transition:transform .1s;
}
.tx-card-item:active{transform:scale(.99)}
.tx-card-row{display:flex;justify-content:space-between;align-items:center;width:100%}

/* Hide inline buttons by default — shown only when .tx-card-expanded */
.tx-card-btns{display:none}

/* Expand panel — hidden by default */
.tx-card-expand{display:none;width:100%;padding-top:12px;gap:8px}
.tx-card-item.tx-card-expanded .tx-card-expand{display:flex;flex-direction:column;gap:8px}
.tx-card-item.tx-card-expanded .tx-card-btns{display:flex;gap:6px;justify-content:flex-end}
.tx-card-item.tx-card-expanded{border-radius:14px}

.tx-card-left{flex:1;min-width:0;padding-right:12px}
.tx-card-desc{font-size:14px;font-weight:600;color:var(--text);word-wrap:break-word;overflow-wrap:break-word;line-height:1.3}
.tx-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.tx-card-cat{font-size:12px;color:var(--text3)}
.tx-wallet-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius: 50px;font-size:12px;font-weight:600;background:rgba(59,130,246,.08);color:#3b82f6}
.tx-wallet-ico{font-size:14px !important}
.dark .tx-wallet-pill{background:rgba(59,130,246,.12);color:#60a5fa}
.tx-card-tags{display:inline-flex;flex-wrap:wrap;gap:3px}
.tx-tag-chip{display:inline-block;padding:1px 7px;border-radius: 50px;background:rgba(99,102,241,.1);color:#6366f1;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;line-height:1.4}
.tx-tag-chip:hover{background:rgba(99,102,241,.2);transform:scale(1.05)}
.dark .tx-tag-chip{background:rgba(99,102,241,.15);color:#818cf8}

.tx-card-right{flex-shrink:0;text-align:right;min-width:120px}
.tx-card-amt{font-size:14px;font-weight:700;margin-bottom:8px}
.tx-card-amt.green{color:#10b981}
.tx-card-amt.red{color:#ef4444}
.tx-receipt-btn{
  width:28px;height:28px;border-radius: 50px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text3);transition:all .15s;
  margin-top:4px;
}
.tx-receipt-btn:hover{background:#f0f0f0;color:var(--text)}
.dark .tx-receipt-btn:hover{background:#333;color:#e8e8e8}
.tx-receipt-btn .material-icons{font-size:18px}

/* .tx-card-btns: hidden by default, shown only when .tx-card-expanded (see line 2281) */
.tx-btn-icon{
  width:34px;height:34px;border-radius: 50px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:#f0f0f0;color:#666;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.tx-btn-icon:active{transform:scale(.92)}
.tx-btn-icon:hover{background:#e0e0e0;color:#333}
.tx-btn-icon .material-icons{font-size:18px}
.tx-btn-danger:hover{background:#fee2e2;color:#ef4444}
.dark .tx-btn-icon{background:#2a2a30;color:#999}
.dark .tx-btn-icon:hover{background:#333;color:#e8e8e8}
.dark .tx-btn-danger:hover{background:rgba(239,68,68,.12);color:#f87171}

@media(max-width:480px){
  .tx-cards-wrap{padding:0 2px}
  .tx-card-item{padding:12px 14px;margin-bottom:6px;border-radius:12px}
  .tx-card-desc{font-size:13px}
  .tx-card-amt{font-size:13px;margin-bottom:6px}
  .tx-card-right{min-width:110px}
  .tx-btn-icon{width:30px;height:30px;border-radius: 50px}
  .tx-btn-icon .material-icons{font-size:16px}
}

/* Net Worth Page */
.nw-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.nw-page-title{font-size:24px;font-weight:800;color:var(--text)}
.nw-page-sub{font-size:13px;color:var(--text2);margin-top:4px}
.nw-add-fab{width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.nw-add-fab:active{transform:scale(.93)}
.nw-add-fab .material-icons{font-size:22px}

.nw-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.nw-summary-card{background:var(--card);border-radius:16px;padding:16px;border:1.5px solid var(--border);display:flex;flex-direction:column;gap:4px;text-align:center}
.nw-summary-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 4px}
.nw-summary-ico .material-icons{font-size:20px}
.nw-summary-card.assets .nw-summary-ico{background:rgba(59,130,246,.1)}
.nw-summary-card.assets .nw-summary-ico .material-icons{color:#3b82f6}
.nw-summary-card.change .nw-summary-ico{background:rgba(16,185,129,.1)}
.nw-summary-card.change .nw-summary-ico .material-icons{color:#10b981}
.nw-summary-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.nw-summary-value{font-size:18px;font-weight:800;color:var(--text)}
.nw-summary-sub{font-size:12px;font-weight:600}
.nw-summary-sub.pos{color:#10b981}
.nw-summary-sub.neg{color:#ef4444}

.nw-chart-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border)}
.nw-chart-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.nw-chart-title .material-icons{font-size:20px;color:var(--text3)}
.nw-chart-wrap{position:relative;width:100%;height:250px}
.nw-chart-wrap canvas, .nw-chart-wrap div[id$='Chart']{width:100% !important;height:100% !important}

.nw-history-card{background:var(--card);border-radius:20px;padding:20px;margin-bottom:80px;border:1.5px solid var(--border)}
.nw-history-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.nw-history-title .material-icons{font-size:20px;color:var(--text3)}
.nw-history-list{display:flex;flex-direction:column;gap:10px}
.nw-history-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg);border-radius:14px}
.nw-history-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);flex-shrink:0}
.nw-history-info{flex:1;min-width:0}
.nw-history-date{font-size:13px;font-weight:600;color:var(--text)}
.nw-history-note{font-size:12px;color:var(--text3);margin-top:2px}
.nw-history-amount{font-size:15px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap;flex-shrink:0}
.nw-history-actions{display:flex;gap:4px;flex-shrink:0}
.nw-history-actions button{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius: 50px;transition:all .15s}
.nw-history-actions button .material-icons{font-size:16px}
.nw-history-actions button:hover{background:var(--border);color:var(--text)}
.nw-history-actions .nw-delete:hover{background:rgba(239,68,68,.1);color:var(--danger)}

.dark .nw-summary-card{background:var(--card)}
.dark .nw-chart-card{background:var(--card)}
.dark .nw-history-card{background:var(--card)}
.dark .nw-history-item{background:var(--bg)}

/* Calendar Page */
.cal-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.cal-page-title{font-size:24px;font-weight:800;color:var(--text)}
.cal-page-sub{font-size:13px;color:var(--text2);margin-top:4px}

.cal-card{background:var(--card);border-radius:20px;padding:20px;border:1.5px solid var(--border);margin-bottom:16px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cal-nav-btn{background:var(--bg);border:1.5px solid var(--border);color:var(--text);width:36px;height:36px;border-radius: 50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.cal-nav-btn:hover{background:var(--border);color:var(--text)}
.cal-nav-btn .material-icons{font-size:20px}
.cal-month-label{font-size:18px;font-weight:700;color:var(--text)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid.week-mode{display:block}
.cal-day-header{padding:8px 0;text-align:center;font-size:11px;font-weight:600;color:var(--text3)}
.cal-day{padding:8px 2px;text-align:center;min-height:52px;border-radius: 12px;cursor:pointer;transition:all .15s;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.cal-day:hover{background:var(--bg)}
.cal-day.today{background:rgba(59,130,246,.1)}
.cal-day.today .cal-day-num{color:#3b82f6;font-weight:800}
.cal-day.selected{background:var(--primary);color:#fff}
.cal-day.selected .cal-day-num{color:#fff;font-weight:800}
.cal-day.selected .cal-day-dot{background:rgba(255,255,255,.7)}
.cal-day.other-month{opacity:.3;pointer-events:none}
.cal-day-num{font-size:13px;font-weight:500;color:var(--text)}
.cal-day-dots{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;max-width:100%}
.cal-day-dot{width:5px;height:5px;border-radius:50%}
.cal-day-dot.income{background:#10b981}
.cal-day-dot.expense{background:#ef4444}

/* Heat map levels */
.cal-day.heat-1{background:rgba(16,185,129,.06)}
.cal-day.heat-2{background:rgba(16,185,129,.12)}
.cal-day.heat-3{background:rgba(251,191,36,.12)}
.cal-day.heat-4{background:rgba(251,191,36,.22)}
.cal-day.heat-5{background:rgba(239,68,68,.15)}
.cal-day.heat-6{background:rgba(239,68,68,.25)}
.dark .cal-day.heat-1{background:rgba(16,185,129,.1)}
.dark .cal-day.heat-2{background:rgba(16,185,129,.18)}
.dark .cal-day.heat-3{background:rgba(251,191,36,.15)}
.dark .cal-day.heat-4{background:rgba(251,191,36,.25)}
.dark .cal-day.heat-5{background:rgba(239,68,68,.18)}
.dark .cal-day.heat-6{background:rgba(239,68,68,.3)}

/* Budget overlay indicator */
.cal-day.over-budget{box-shadow:inset 0 -3px 0 rgba(239,68,68,.5)}
.cal-day.under-budget{box-shadow:inset 0 -3px 0 rgba(16,185,129,.4)}

/* Income/Expense split bars */
.cal-day-bars{display:flex;gap:2px;width:100%;height:4px;padding:0 2px;margin-top:1px}
.cal-day-bar{border-radius:2px;height:100%;min-width:2px;transition:width .2s}
.cal-day-bar.inc{background:#10b981}
.cal-day-bar.exp{background:#ef4444}

/* View Toggle */
.cal-view-toggle{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.cal-view-btn{padding:6px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.cal-view-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.cal-view-btn:hover:not(.active){background:var(--border)}

/* Weekly View */
.cal-week-info{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.cal-week-label{font-size:13px;font-weight:600;color:var(--text)}
.cal-week-nav{background:none;border:none;color:var(--primary);font-size:18px;cursor:pointer;padding:4px 8px;border-radius: 12px}
.cal-week-nav:hover{background:var(--bg)}
.cal-week-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cal-week-scroll::-webkit-scrollbar{display:none}
.cal-day-card{flex:0 0 48px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;border-radius:12px;cursor:pointer;transition:all .15s;background:var(--bg);border:1.5px solid transparent;min-height:90px}
.cal-day-card:hover{background:var(--border)}
.cal-day-card.today{border-color:var(--primary);background:rgba(59,130,246,.08)}
.cal-day-card.selected{background:var(--primary);color:#fff}
.cal-day-card.selected .cal-week-dayname,
.cal-day-card.selected .cal-week-datenumb,
.cal-day-card.selected .cal-week-amount{color:#fff}
.cal-week-dayname{font-size:10px;font-weight:600;color:var(--text3);margin-bottom:4px}
.cal-week-datenumb{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.cal-week-amount{font-size:8px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.cal-week-amount.exp{color:#ef4444}
.cal-week-amount.inc{color:#10b981}
.cal-week-amount.zero{color:var(--text3)}

/* Budget Info */
.cal-budget-info{background:var(--bg);border-radius:12px;padding:10px 14px;margin-top:12px;margin-bottom:4px}
.cal-budget-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}

/* Weekly day cells - taller for more info */
.cal-week .cal-day{min-height:80px;min-width:0}

.cal-summary-card{background:var(--bg);border-radius:16px;padding:16px;margin-top:16px}
.cal-summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cal-summary-date{font-size:15px;font-weight:700;color:var(--text)}
.cal-summary-close{background:none;border:none;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius: 50px}
.cal-summary-close:hover{background:var(--border);color:var(--text)}
.cal-summary-close .material-icons{font-size:18px}

.cal-summary-totals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.cal-total-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:12px;background:var(--card)}
.cal-total-item .material-icons{font-size:18px}
.cal-total-item.income .material-icons{color:#10b981}
.cal-total-item.expense .material-icons{color:#ef4444}
.cal-total-item.net .material-icons{color:#3b82f6}
.cal-total-label{font-size:10px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.cal-total-value{font-size:13px;font-weight:700;color:var(--text)}

.cal-summary-tx{display:flex;flex-direction:column;gap:8px}
.cal-tx-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border-radius:12px}
.cal-tx-cat{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.cal-tx-info{flex:1;min-width:0}
.cal-tx-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-tx-meta{font-size:11px;color:var(--text3);margin-top:1px}
.cal-tx-amount{font-size:13px;font-weight:700;text-align:right;flex-shrink:0}
.cal-tx-amount.income{color:#10b981}
.cal-tx-amount.expense{color:#ef4444}

.dark .cal-nav-btn{background:var(--bg);color:var(--text)}
.dark .cal-day.today{background:rgba(59,130,246,.15)}
.dark .cal-summary-card{background:var(--bg)}
.dark .cal-total-item{background:var(--card)}
.dark .cal-tx-item{background:var(--card)}

/* ==========================================
   RECURRING (pgRecurring) — Redesign
   ========================================== */
.rec-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.rec-page-title{font-size:24px;font-weight:800;color:var(--text)}
.rec-page-sub{font-size:13px;color:var(--text2);margin-top:4px}

.rec-summary-card{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
  background:var(--card);border-radius:20px;padding:16px;
  border:1.5px solid var(--border);margin-bottom:16px;
}
.rec-summary-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 8px}
.rec-summary-ico{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.rec-summary-ico .material-icons{font-size:20px}
.rec-summary-ico.active{background:rgba(59,130,246,.1)}
.rec-summary-ico.active .material-icons{color:#3b82f6}
.rec-summary-ico.paused{background:rgba(245,158,11,.1)}
.rec-summary-ico.paused .material-icons{color:#f59e0b}
.rec-summary-ico.total{background:rgba(16,185,129,.1)}
.rec-summary-ico.total .material-icons{color:#10b981}
.rec-summary-label{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.3px}
.rec-summary-value{font-size:18px;font-weight:800;color:var(--text)}

.rec-card{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;
}
.rec-card-title{
  font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.rec-card-title .material-icons{font-size:20px;color:var(--primary)}

.rec-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.rec-form-group{margin-bottom:12px}
.rec-form-group label{display:block;font-size:12px;font-weight:600;color:var(--text3);margin-bottom:6px;letter-spacing:.3px}
.rec-form-group input,
.rec-form-group select,
.rec-inp{
  width:100%;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--bg);
  color:var(--text);font-size:14px;font-weight:500;
  outline:none;transition:border-color .15s;
  box-sizing:border-box;
}
.rec-form-group input:focus,
.rec-form-group select:focus,
.rec-inp:focus{border-color:var(--primary)}

.rec-add-btn{
  width:100%;padding:12px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.rec-add-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.4)}

.rec-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.rec-item{
  background:var(--card);border-radius:16px;padding:16px;
  border:1.5px solid var(--border);
  display:flex;align-items:center;gap:14px;
  transition:all .15s;position:relative;overflow:hidden;
}
.rec-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:0 4px 4px 0;
}
.rec-item.active::before{background:linear-gradient(180deg,#3b82f6,#2563eb)}
.rec-item.paused::before{background:#f59e0b}
.rec-item .rec-ico{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rec-item .rec-ico.expense{background:rgba(239,68,68,.1)}
.rec-item .rec-ico.expense .material-icons{color:#ef4444}
.rec-item .rec-ico.income{background:rgba(16,185,129,.1)}
.rec-item .rec-ico.income .material-icons{color:#10b981}
.rec-item .rec-ico .material-icons{font-size:22px}
.rec-item .rec-info{flex:1;min-width:0}
.rec-item .rec-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-item .rec-meta{font-size:12px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rec-item .rec-meta-badge{
  display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:600;
}
.rec-item .rec-meta-badge.monthly{background:rgba(59,130,246,.1);color:#3b82f6}
.rec-item .rec-meta-badge.weekly{background:rgba(168,85,247,.1);color:#a855f7}
.rec-item .rec-meta-badge.yearly{background:rgba(245,158,11,.1);color:#f59e0b}
.rec-item .rec-amount{font-size:15px;font-weight:800;text-align:right;flex-shrink:0}
.rec-item .rec-amount.expense{color:#ef4444}
.rec-item .rec-amount.income{color:#10b981}
.rec-item .rec-actions{display:flex;gap:6px;flex-shrink:0}
.rec-item .rec-action-btn{
  width:32px;height:32px;border-radius: 50px;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;
}
.rec-item .rec-action-btn .material-icons{font-size:18px}
.rec-item .rec-action-btn.edit{background:rgba(59,130,246,.1);color:#3b82f6}
.rec-item .rec-action-btn.edit:hover{background:rgba(59,130,246,.2)}
.rec-item .rec-action-btn.toggle{background:rgba(245,158,11,.1);color:#f59e0b}
.rec-item .rec-action-btn.toggle:hover{background:rgba(245,158,11,.2)}
.rec-item .rec-action-btn.delete{background:rgba(239,68,68,.1);color:#ef4444}
.rec-item .rec-action-btn.delete:hover{background:rgba(239,68,68,.2)}

.rec-item.paused{opacity:.7}
.rec-item.paused .rec-name{color:var(--text3)}

.rec-empty{
  text-align:center;padding:32px 16px;color:var(--text3);
}
.rec-empty .material-icons{font-size:48px;opacity:.3;margin-bottom:8px;display:block}
.rec-empty p{font-size:14px;margin:0}

.dark .rec-card{background:var(--card)}
.dark .rec-summary-card{background:var(--card)}
.dark .rec-item{background:var(--card)}
.dark .rec-item .rec-action-btn.edit{background:rgba(59,130,246,.15)}
.dark .rec-item .rec-action-btn.toggle{background:rgba(245,158,11,.15)}
.dark .rec-item .rec-action-btn.delete{background:rgba(239,68,68,.15)}

/* ==========================================
   SCAN STRUK (pgScan) — Redesign
   ========================================== */
.scan-page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.scan-page-title{font-size:24px;font-weight:800;color:var(--text)}
.scan-page-sub{font-size:13px;color:var(--text2);margin-top:4px}

.scan-card{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;
}
.scan-upload-area-redesign{
  border:2px dashed var(--border);border-radius:20px;padding:40px 20px;text-align:center;
  cursor:pointer;transition:all .2s;
  background:var(--bg);
}
.scan-upload-area-redesign:hover{border-color:var(--primary);background:rgba(59,130,246,.04)}
.scan-upload-area-redesign:active{transform:scale(.98)}
.scan-upload-icon-wrap{
  width:64px;height:64px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(168,85,247,.1));
  display:flex;align-items:center;justify-content:center;
}
.scan-upload-icon-wrap .material-icons{font-size:28px;color:var(--primary)}
.scan-upload-area-redesign p{margin:4px 0;font-size:13px;color:var(--text)}
.scan-upload-area-redesign p.sub{font-size:12px;color:var(--text3)}

.scan-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.scan-action-btn{
  padding:12px;border-radius:14px;border:none;
  font-size:13px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.scan-action-btn.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.scan-action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(59,130,246,.4)}
.scan-action-btn.secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
.scan-action-btn.secondary:hover{background:var(--border)}
.scan-action-btn .material-icons{font-size:18px}

.scan-preview-card{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;
  text-align:center;
}
.scan-preview-img{
  width:100%;border-radius:16px;max-height:300px;object-fit:contain;
  border:1px solid var(--border);
}

/* Persistent photo result */
.scan-result-photo{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;text-align:center;
}
.scan-result-photo img{
  width:100%;border-radius:16px;max-height:400px;object-fit:contain;
  border:1px solid var(--border);
}
.scan-photo-actions{
  display:flex;gap:10px;margin-top:14px;justify-content:center;
}
.scan-photo-actions .scan-action-btn{flex:1;max-width:200px}

/* Items breakdown */
.scan-items-section{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;
}
.scan-items-header{
  display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  color:var(--text);margin-bottom:14px;
}
.scan-items-header .material-icons{font-size:20px;color:var(--primary)}
.scan-items-count{
  background:var(--primary);color:#fff;font-size:12px;font-weight:700;
  padding:2px 8px;border-radius:10px;margin-left:auto;
}
.scan-items-list{display:flex;flex-direction:column;gap:8px}
.scan-item-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:var(--bg);border-radius:12px;
  border:1px solid var(--border);
  gap: 8px;
}

.scan-item-name-input,
.scan-item-price-input {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.scan-item-name-input {
  flex: 1;
}

.scan-item-price-input {
  width: 100px;
  text-align: right;
  font-weight: 700;
  color: var(--primary);
}

.scan-item-name-input:focus,
.scan-item-price-input:focus {
  outline: none;
  background: rgba(59,130,246,0.05);
}

.scan-item-remove {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.scan-item-remove:hover {
  background: rgba(239,68,68,0.2);
  transform: scale(1.1);
}

.scan-item-remove .material-icons {
  font-size: 16px;
}

.scan-item-name{font-size:14px;font-weight:500;color:var(--text);flex:1}
.scan-item-price{font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap;margin-left:12px}
.scan-items-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;margin-top:8px;border-top:2px solid var(--primary);
  font-weight:700;font-size:15px;
}

.scan-bulk-save-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.scan-bulk-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

.scan-bulk-save-btn .material-icons {
  font-size: 20px;
}

.scan-loading{
  text-align:center;padding:40px 20px;
}
.scan-loading-spinner{
  width:48px;height:48px;border:4px solid var(--border);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin 1s linear infinite;margin:0 auto 16px;
}
.scan-loading p{color:var(--text2);font-size:14px;margin:0}

.scan-loading-progress {
  width: 200px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 16px auto 0;
  overflow: hidden;
}

.scan-loading-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #10b981);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

.scan-result-card{
  background:var(--card);border-radius:20px;padding:20px;
  border:1.5px solid var(--border);margin-bottom:16px;
}
.scan-result-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.scan-result-title{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.scan-result-title .material-icons{font-size:20px;color:var(--primary)}
.scan-confidence-badge{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  border-radius:8px;font-size:12px;font-weight:700;
}
.scan-confidence-badge.high{background:rgba(16,185,129,.1);color:#10b981}
.scan-confidence-badge.medium{background:rgba(245,158,11,.1);color:#f59e0b}
.scan-confidence-badge.low{background:rgba(239,68,68,.1);color:#ef4444}

.scan-retry-btn {
  padding: 6px;
  border: none;
  border-radius: 50px;
  background: rgba(59,130,246,0.1);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.scan-retry-btn:hover {
  background: rgba(59,130,246,0.2);
}

.scan-retry-btn .material-icons {
  font-size: 18px;
}

.scan-rescan-btn {
  padding: 6px;
  border: none;
  border-radius: 50px;
  background: rgba(16,185,129,0.1);
  color: #10b981;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.scan-rescan-btn:hover {
  background: rgba(16,185,129,0.2);
}

.scan-rescan-btn .material-icons {
  font-size: 18px;
}

.scan-rotate-btn {
  padding: 8px;
  border: none;
  border-radius: 50px;
  background: rgba(139,92,246,0.1);
  color: #8b5cf6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.scan-rotate-btn:hover {
  background: rgba(139,92,246,0.2);
  transform: scale(1.05);
}

.scan-rotate-btn .material-icons {
  font-size: 20px;
}

.scan-result-form .scan-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.scan-result-form .scan-form-group{margin-bottom:12px}
.scan-result-form .scan-form-group label{display:block;font-size:12px;font-weight:600;color:var(--text3);margin-bottom:6px;letter-spacing:.3px}
.scan-result-form .scan-form-group input,
.scan-result-form .scan-form-group select{
  width:100%;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--bg);
  color:var(--text);font-size:14px;font-weight:500;
  outline:none;transition:border-color .15s;box-sizing:border-box;
}
.scan-result-form .scan-form-group input:focus,
.scan-result-form .scan-form-group select:focus{border-color:var(--primary)}

.scan-save-btn{
  width:100%;padding:14px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;box-shadow:0 4px 12px rgba(16,185,129,.3);
}
.scan-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,.4)}
.scan-save-btn .material-icons{font-size:18px}

.scan-raw-toggle{
  background:var(--bg);border-radius: 50px;padding:12px 16px;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--border);transition:all .15s;
}
.scan-raw-toggle:hover{background:var(--border)}
.scan-raw-toggle span{font-size:13px;font-weight:600;color:var(--text2)}
.scan-raw-toggle .arrow{transition:transform .2s}
.scan-raw-toggle .arrow.open{transform:rotate(90deg)}
.scan-raw-text{
  display:none;margin-top:10px;padding:14px;border-radius:12px;
  background:var(--bg);font-size:12px;color:var(--text3);
  white-space:pre-wrap;max-height:200px;overflow-y:auto;
  border:1px solid var(--border);font-family:monospace;
}

.dark .scan-card{background:var(--card)}
.dark .scan-upload-area-redesign{background:var(--bg)}
.dark .scan-result-card{background:var(--card)}
.dark .scan-action-btn.secondary{background:var(--bg);border-color:var(--border)}
.dark .scan-raw-toggle{background:var(--bg);border-color:var(--border)}
.dark .scan-raw-text{background:var(--bg);border-color:var(--border)}
.dark .scan-gallery-header{background:var(--card)}
.dark .scan-gallery-grid{background:var(--card)}
.dark .gallery-item{background:var(--bg)}
.dark .gallery-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dark .gallery-item-thumb{background:#333}
.dark .gallery-item-desc{color:var(--text)}

/* Scan form inputs */
.scan-result-form .scan-form-group input,
.scan-result-form .scan-form-group select,
.scan-inp{
  width:100%;padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--border);background:var(--bg);
  color:var(--text);font-size:14px;font-weight:500;
  outline:none;transition:border-color .15s;box-sizing:border-box;
}
.scan-result-form .scan-form-group input:focus,
.scan-result-form .scan-form-group select:focus,
.scan-inp:focus{border-color:var(--primary)}

@media(max-width:480px){
  .rec-summary-card{grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px}
  .rec-summary-value{font-size:15px}
  .rec-summary-ico{width:36px;height:36px;border-radius:10px}
  .rec-summary-ico .material-icons{font-size:18px}
  .rec-summary-label{font-size:10px}
  .scan-actions-row{grid-template-columns:1fr 1fr;gap:8px}
}

/* ========== INSTALL BANNER ========== */
.install-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9000;
  padding:12px 16px;
  background:linear-gradient(135deg,rgba(0,122,255,.12),rgba(0,71,214,.08));
  border-top:1px solid var(--border);
  backdrop-filter:blur(10px);
  animation:slideUp .3s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.install-banner-inner{
  display:flex;align-items:center;gap:12px;max-width:600px;margin:0 auto;
}
.install-banner-text{flex:1}
.install-banner-text strong{display:block;font-size:14px;color:var(--text)}
.install-banner-text span{font-size:12px;color:var(--text2)}
.install-banner-install{
  padding:8px 20px;border-radius:20px;border:none;
  background:var(--primary);color:#fff;font-weight:600;font-size:13px;cursor:pointer;
}
.install-banner-dismiss{
  width:32px;height:32px;border-radius:50%;border:none;
  background:transparent;color:var(--text2);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ========== TRANSFER HISTORY ========== */
.transfer-history-title{font-size:14px;font-weight:600;margin-bottom:10px;color:var(--text)}
.transfer-history-list{max-height:200px;overflow-y:auto}
.transfer-history-item{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);
}
.transfer-history-item:last-child{border-bottom:none}
.transfer-history-icon{font-size:20px}
.transfer-history-info{flex:1}
.transfer-history-route{font-size:13px;font-weight:500;color:var(--text)}
.transfer-history-date{font-size:11px;color:var(--text3)}
.transfer-history-amount{font-size:14px;font-weight:600;color:var(--primary)}

/* === CLEAN TRANSFER HISTORY ITEM === */
.transfer-history-item{
  background:var(--card);
  border-radius:12px;
  padding:12px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  transition:background .15s;
}
.transfer-history-item:active { background:var(--bg); }
.tf-accent { width:3px; height:30px; border-radius:2px; background:#6366f1; flex-shrink:0; }
.tf-info { flex:1; min-width:0; }
.tf-route { font-size:13px; font-weight:600; color:var(--text); }
.tf-date { font-size:11px; color:var(--text3); margin-top:1px; }
.tf-amount { font-size:14px; font-weight:700; color:#6366f1; text-align:right; flex-shrink:0; }
.tf-actions-row {
  display:none;
  gap:8px;
  padding:0 12px 10px 16px;
  margin-top:-4px;
}
.tf-act-btn {
  flex:1;
  padding:9px;
  border-radius:50px;
  border:1.5px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:all .15s;
}
.tf-act-btn .material-icons { font-size:18px; }
.tf-act-btn:hover { background:var(--bg); }
.tf-act-btn.del { color:#ef4444; border-color:rgba(239,68,68,.2); }
.tf-act-btn.del:hover { background:rgba(239,68,68,.08); }
.dark .transfer-history-item { background:var(--card); }
.tf-edit-route{font-size:15px;font-weight:600;color:var(--text);padding:10px 14px;background:var(--bg);border-radius: 50px;text-align:center}

/* ========== BUDGET CHART ========== */
.budget-chart-card{
  background:var(--card);border-radius:16px;padding:20px;margin-top:16px;
  border:1px solid var(--border);
}
.budget-chart-title{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text)}
.budget-chart-title .material-icons{font-size:20px;color:var(--primary)}
.budget-chart-wrap{position:relative}

/* ========== ONBOARDING ========== */
.onboarding-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:90%;max-width:400px;max-height:85vh;
  background:var(--card);border-radius:24px;padding:32px 24px 24px;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
  text-align:center;z-index:10001;
  overflow-y:auto;
}
.onboarding-skip{
  position:absolute;top:16px;right:16px;
  font-size:13px;color:var(--text3);cursor:pointer;font-weight:500;
  background:none;border:none;
}
.onboarding-skip:hover{color:var(--text)}
.onboarding-dots{display:flex;justify-content:center;gap:8px;margin-bottom:24px}
.onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .2s}
.onboarding-dot.active{background:var(--primary);width:24px;border-radius:4px}
.onboarding-icon{font-size:56px;margin-bottom:16px}
.onboarding-step h2{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text)}
.onboarding-step>p{font-size:14px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.onboarding-input{
  width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--bg);color:var(--text);font-size:15px;outline:none;
  transition:border-color .2s;box-sizing:border-box;
}
.onboarding-input:focus{border-color:var(--primary)}
.onboarding-theme{text-align:left;margin-top:16px}
.onboarding-theme-options{display:flex;gap:12px;margin-top:8px}
.theme-opt{
  flex:1;padding:12px;border-radius:12px;border:2px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s;
}
.theme-opt.active{border-color:var(--primary);background:rgba(0,122,255,.1)}
.onboarding-tx-type{display:flex;gap:12px;margin-bottom:16px}
.ob-tx-btn{
  flex:1;padding:12px;border-radius: 50px;border:2px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s;
}
.ob-tx-btn.active{border-color:var(--primary);background:rgba(0,122,255,.1)}
.onboarding-nav{display:flex;justify-content:space-between;margin-top:24px;gap:12px}
.onboarding-back,.onboarding-next{
  padding:12px 24px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;
  transition:all .2s;
}
.onboarding-back{background:var(--bg2);color:var(--text)}
.onboarding-next{background:var(--primary);color:#fff}
.onboarding-next:hover{opacity:.9}

/* Splash Screen */
.onboarding-splash-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.onboarding-splash-tagline{font-size:15px;color:var(--text2);margin-bottom:24px;text-align:center}
.onboarding-splash-features{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.onboarding-splash-feature{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:12px;background:var(--bg)}
.onboarding-splash-btn{width:100%;padding:14px;font-size:16px}

/* ========== WIDGET SETTINGS ========== */
.widget-settings-list{display:flex;flex-direction:column;gap:6px}
.widget-settings-item{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:12px;background:var(--bg);
  transition:background .15s;font-size:14px;color:var(--text);
}
.widget-settings-item:hover{background:var(--bg2)}
.widget-settings-label{
  flex:1;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.widget-settings-label input[type="checkbox"]{
  width:20px;height:20px;accent-color:var(--primary);flex-shrink:0;
}
.widget-reorder-btn{
  width:32px;height:32px;border:none;border-radius: 50%;;
  background:transparent;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.widget-reorder-btn:hover{background:var(--border);color:var(--text)}
.widget-reorder-btn:disabled{opacity:.25;cursor:default}
.widget-reorder-btn:disabled:hover{background:transparent;color:var(--text3)}

/* ========== SIDEBAR TRANSFER ITEM ========== */

/* ========== PWA INSTALL BANNER ANIMATION ========== */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========== RECEIPT GALLERY ========== */
.scan-gallery-section {
  margin-top: 20px;
}
.scan-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 14px 14px 0 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}
.scan-gallery-header:active {
  background: var(--card-hover, var(--card));
}
.scan-gallery-arrow {
  transition: transform .2s ease;
}

/* Receipt Gallery Filter Bar */
.scan-gallery-filters {
  background: var(--card);
  border-radius: 0 0 14px 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 180px;
  background: var(--bg, #f5f5f5);
  border-radius: 8px;
  padding: 6px 10px;
}
.filter-search .material-icons {
  font-size: 18px;
  color: var(--text2);
}
.filter-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}
.filter-row select {
  border: 1px solid var(--border);
  background: var(--bg, #f5f5f5);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.filter-row select:focus {
  border-color: var(--primary);
}
.filter-count {
  font-size: 12px;
  color: var(--text2);
  margin-top: 6px;
}

.scan-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 14px;
  background: var(--card);
  border-radius: 0 0 14px 14px;
}

.scan-gallery-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text3);
}

.scan-gallery-empty .material-icons {
  font-size: 48px;
  color: var(--text3);
  opacity: 0.5;
  margin-bottom: 12px;
}

.scan-gallery-empty p {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 600;
}

.scan-gallery-empty p.sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

.gallery-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg, #f5f5f5);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  padding: 8px;
  position: relative;
}

.gallery-item-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.2s;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.gallery-item:hover .gallery-item-delete {
  opacity: 1;
  transform: scale(1.1);
}

.gallery-item-delete:hover {
  color: #dc2626;
  transform: scale(1.15);
}

.gallery-item-delete .material-icons {
  font-size: 20px;
  font-weight: 600;
}

.gallery-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.gallery-item-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e8e8;
}
.gallery-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item-info {
  flex: 1;
  min-width: 0;
}
.gallery-item-desc {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text, #1a1a2e);
  margin-bottom: 4px;
}
.gallery-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.gallery-item-amount {
  font-size: 14px;
  font-weight: 700;
}
.gallery-item-amount.expense {
  color: #ef4444;
}
.gallery-item-amount.income {
  color: #10b981;
}
.gallery-item-date {
  font-size: 12px;
  color: var(--text3, #999);
}

/* Receipt Lightbox */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== 10 ANIMATIONS ========== */

/* 1. Counting Up - for number animations */
.count-up {
  display: inline-block;
}

/* 2. Page Transitions */
.page {
  animation: pageFadeIn 0.3s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Skeleton Loading (Shimmer) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg, #e8e8e8) 25%, var(--card, #f5f5f5) 50%, var(--bg, #e8e8e8) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
.dark .skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, var(--card) 50%, var(--bg) 75%);
  background-size: 200% 100%;
}

/* 4. Button Ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.3) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform .5s, opacity .5s;
}
.btn-ripple:active::after {
  transform: scale(0);
  opacity: .3;
  transition: 0s;
}

/* 5. Card Hover Lift */
.card-hover-lift {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* 6. Chart Animation */
@keyframes chartBarUp {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.chart-bar-animate {
  transform-origin: bottom;
  animation: chartBarUp .6s easeOutQuart both;
}
@keyframes easeOutQuart {
  /* Handled via JS easing */
}

/* 7. List Item Stagger */
@keyframes listItemSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.list-stagger-item {
  animation: listItemSlideUp .35s ease both;
}

/* 8. Toast Slide-In (enhanced) */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

/* 9. Empty State Improved */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: .6;
  animation: emptyBounce 2s ease infinite;
}
@keyframes emptyBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.empty-state-text {
  font-size: 14px;
  color: var(--text3, #999);
  margin-bottom: 16px;
}
.empty-state-btn {
  background: var(--primary, #007AFF);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.empty-state-btn:hover {
  opacity: .9;
  transform: scale(1.02);
}

/* 10. Pulse Dot for active indicators */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulseDot 1.5s ease infinite;
}

/* ========== WOW FACTOR 1: LOADING PROGRESS BAR ========== */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #007AFF, #5AC8FA, #007AFF);
  background-size: 200% 100%;
  animation: progressShimmer 1s linear infinite;
  z-index: 99999;
  transition: width .3s ease, opacity .4s ease;
  opacity: 0;
  width: 0%;
}
.progress-bar.active {
  opacity: 1;
  width: 70%;
}
.progress-bar.complete {
  opacity: 0;
  width: 100%;
}
@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========== WOW FACTOR 2: ANIMATED HERO GRADIENT ========== */
.hero-gradient-animated {
  background: linear-gradient(135deg, #1e3a5f, #2563eb 25%, #6366f1 50%, #8b5cf6 75%, #1e3a5f) !important;
  background-size: 400% 400% !important;
  animation: heroGradientShift 10s ease infinite !important;
}
.hero-gradient-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(255,255,255,.1) 0%, transparent 40%),
              radial-gradient(circle at 70% 20%, rgba(255,255,255,.06) 0%, transparent 35%);
  pointer-events: none;
  z-index: 1;
}
@keyframes heroGradientShift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}
.dark .hero-gradient-animated {
  background: linear-gradient(135deg, #0f172a, #1e40af 25%, #4338ca 50%, #312e81 75%, #0f172a) !important;
  background-size: 400% 400% !important;
  animation: heroGradientShiftDark 14s ease infinite !important;
}
@keyframes heroGradientShiftDark {
  0% { background-position: 0% 50%; }
  33% { background-position: 70% 30%; }
  66% { background-position: 30% 80%; }
  100% { background-position: 0% 50%; }
}

/* ========== WOW FACTOR 3: CONFETTI ========== */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall 3s ease-out forwards;
}
.confetti-piece.circle {
  border-radius: 50%;
}
.confetti-piece.strip {
  width: 6px;
  height: 14px;
  border-radius: 3px;
}
@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(50vh) rotate(180deg) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0);
  }
}

/* ========== WOW: Badge Pulse Animation ========== */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.badge-pulse {
  animation: badgePulse 2s ease infinite;
}

/* ========== DARK MODE: RECURRING PAGE ========== */
.dark .rec-page-hd{color:var(--text)}
.dark .rec-page-sub{color:var(--text3)}
.dark .rec-summary-card{background:var(--card)}
.dark .rec-card{background:var(--card)}
.dark .rec-inp{background:var(--bg);border-color:var(--border);color:var(--text)}
.dark .rec-inp:focus{border-color:var(--primary)}
.dark .rec-add-btn{background:var(--primary)}
.dark .rec-add-btn:hover{opacity:.9}
.dark .rec-item{background:var(--card);border-color:var(--border)}
.dark .rec-item:hover{background:var(--bg)}
.dark .rec-empty{color:var(--text3)}
.dark .rec-empty .material-icons{color:var(--text3)}
.dark .rec-summary-ico.active{background:rgba(16,185,129,.15);color:#10b981}
.dark .rec-summary-ico.paused{background:rgba(245,158,11,.15);color:#f59e0b}
.dark .rec-summary-ico.total{background:rgba(0,122,255,.15);color:#007AFF}

/* ========== DARK MODE: CALENDAR PAGE ========== */
.dark .cal-card{background:var(--card)}
.dark .cal-nav-btn{background:var(--bg);color:var(--text)}
.dark .cal-nav-btn:hover{background:var(--border)}
.dark .cal-month-label{color:var(--text)}
.dark .cal-day-header{color:var(--text3)}
.dark .cal-day{border:1px solid var(--border)}
.dark .cal-day:hover{background:var(--card)}
.dark .cal-day.today{border-color:var(--primary)}
.dark .cal-day.has-tx{background:rgba(0,122,255,.08)}
.dark .cal-day.other-month{opacity:.4}
.dark .cal-day.selected{background:var(--primary);color:#fff}
.dark .cal-day .cal-dot{background:var(--primary)}
.dark .cal-summary-card{background:var(--card)}
.dark .cal-summary-date{color:var(--text)}
.dark .cal-total-item{background:var(--bg)}
.dark .cal-total-value{color:var(--text)}
.dark .cal-total-label{color:var(--text3)}
.dark .cal-summary-tx .tx-item{background:var(--bg);border-color:var(--border)}
.dark .cal-summary-close{color:var(--text3)}
.dark .cal-summary-close:hover{color:var(--text)}

/* ========== DARK MODE: NET WORTH PAGE ========== */
.dark .nw-page-title{color:var(--text)}
.dark .nw-page-sub{color:var(--text3)}
.dark .nw-add-fab{background:var(--primary)}
.dark .nw-summary-card{background:var(--card)}
.dark .nw-summary-card.assets .nw-summary-ico{background:rgba(16,185,129,.15);color:#10b981}
.dark .nw-summary-card.change .nw-summary-ico{background:rgba(0,122,255,.15);color:#007AFF}
.dark .nw-summary-value{color:var(--text)}
.dark .nw-summary-label{color:var(--text3)}
.dark .nw-summary-sub{color:var(--text3)}
.dark .nw-chart-card{background:var(--card)}
.dark .nw-chart-title{color:var(--text)}
.dark .nw-history-card{background:var(--card)}
.dark .nw-history-title{color:var(--text)}
.dark .nw-snapshot-item{background:var(--bg);border-color:var(--border)}
.dark .nw-snapshot-item:hover{background:var(--card)}
.dark .nw-snapshot-value{color:var(--text)}
.dark .nw-snapshot-note{color:var(--text3)}
.dark .nw-snapshot-date{color:var(--text3)}
.dark .nw-empty{color:var(--text3)}

/* ========== SMART INSIGHTS (renamed to avoid conflict with .insight-card) ========== */
.smart-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.smart-insight-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card, #fff);
  border-left: 4px solid var(--primary, #007AFF);
  font-size: 13px;
  line-height: 1.4;
  animation: pageFadeIn .4s ease both;
}
.smart-insight-card:nth-child(2) { animation-delay: .1s; }
.smart-insight-card:nth-child(3) { animation-delay: .2s; }
.smart-insight-card.insight-positive {
  border-left-color: #10b981;
  background: rgba(16,185,129,.05);
}
.smart-insight-card.insight-warning {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,.05);
}
.smart-insight-card.insight-info {
  border-left-color: #007AFF;
  background: rgba(0,122,255,.05);
}
.smart-insight-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.smart-insight-text {
  color: var(--text, #1a1a2e);
  font-weight: 500;
}

/* ========== DYNAMIC GREETING ========== */
.greeting-section {
  margin-bottom: 16px;
}
.greeting-emoji {
  font-size: 20px;
  vertical-align: middle;
  animation: emptyBounce 2s ease infinite;
  display: inline-block;
}

/* ========== DAILY TIP ========== */
.daily-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(139,92,246,.06);
  border-radius: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text2, #666);
  line-height: 1.4;
}
.tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.tip-text {
  font-style: italic;
}

/* ========== DARK MODE: SMART INSIGHTS ========== */
.dark .smart-insight-card { background: var(--card); }
.dark .smart-insight-card.insight-positive { background: rgba(16,185,129,.08); }
.dark .smart-insight-card.insight-warning { background: rgba(245,158,11,.08); }
.dark .smart-insight-card.insight-info { background: rgba(0,122,255,.08); }
.dark .daily-tip { background: rgba(139,92,246,.1); }

/* ========== DAILY TIP NEXT BUTTON ========== */
.tip-next-btn {
  background: transparent;
  border: none;
  color: var(--text3, #999);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: all .15s ease;
}
.tip-next-btn:hover {
  background: rgba(139,92,246,.15);
  color: #8b5cf6;
}
.tip-next-btn .material-icons {
  font-size: 18px;
}

/* ========== TIPS MANAGEMENT IN PROFILE ========== */
.tips-mgmt {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
}
.tip-mgmt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg, #f5f5f5);
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text2, #666);
}
.tip-mgmt-item .tip-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.tip-order-btn {
  background: transparent;
  border: none;
  color: var(--text3, #999);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
}
.tip-order-btn:hover { color: var(--primary, #007AFF); }
.tip-order-btn:disabled { opacity: 0.3; cursor: default; }
.dark .tip-mgmt-item { background: var(--bg); }

/* ========== WIDGET EXPAND/COLLAPSE ========== */
.widget-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border, #e8e8e8);
  color: var(--text2, #666);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.widget-expand-btn:hover {
  background: var(--bg, #f5f5f5);
}
.widget-expand-btn .material-icons {
  font-size: 18px;
  transition: transform .2s ease;
}
.widget-expand-btn.expanded .material-icons {
  transform: rotate(180deg);
}
.dark .widget-expand-btn {
  border-top-color: var(--border, #333);
}
.dark .widget-expand-btn:hover {
  background: var(--bg, #1a1a2e);
}

/* ═══════════════════════════════════════════
   ANIMATIONS & MICRO-INTERACTIONS (Phase 1)
   Safe additions — no existing CSS modified
   ═══════════════════════════════════════════ */

/* ── Bill Type Toggle ── */
.bill-type-toggle{display:flex;gap:8px;margin-bottom:8px}
.bill-type-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;border:2px solid var(--border);border-radius: 50px;
  background:var(--bg);color:var(--text2);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s}
.bill-type-btn .material-icons{font-size:18px}
.bill-type-btn[data-type="expense"].active{
  border-color:#ef4444;background:rgba(239,68,68,.08);color:#ef4444}
.bill-type-btn[data-type="income"].active{
  border-color:#10b981;background:rgba(16,185,129,.08);color:#10b981}
/* Bill type badge */
.bill-type-badge{padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.3px}
.bill-type-badge.income{background:rgba(16,185,129,.12);color:#10b981}
.bill-type-badge.expense{background:rgba(239,68,68,.1);color:#ef4444}
/* Bill amount income color */
.bill-amount.income{color:#10b981!important}
/* Bills summary income card */
.bills-summary-card.income .bills-summary-ico span{color:#10b981}
.bills-summary-card.income{border-color:rgba(16,185,129,.2)}


/* ── Page Transitions ── */
.page {
  animation: pageFadeIn 0.3s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Hover Lift ── */
.cf-card,
.tx-item,
.bp-card,
.goal-card,
.saldo-card,
.summary-card,
.stat-card,
.budget-card,
.bill-card,
.calendar-event,
.wallet-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cf-card:hover,
.tx-item:hover,
.bp-card:hover,
.goal-card:hover,
.saldo-card:hover,
.summary-card:hover,
.stat-card:hover,
.budget-card:hover,
.bill-card:hover,
.wallet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.dark .cf-card:hover,
.dark .tx-item:hover,
.dark .bp-card:hover,
.dark .goal-card:hover,
.dark .saldo-card:hover,
.dark .summary-card:hover,
.dark .stat-card:hover,
.dark .budget-card:hover,
.dark .bill-card:hover,
.dark .wallet-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* ── Button Press Effect ── */
.btn-primary,
.btn-danger,
.add-btn,
.btn,
.qa-pill,
.sidebar-v2-item,
.widget-toggle-btn,
.widget-expand-btn {
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:active,
.btn-danger:active,
.add-btn:active,
.btn:active,
.qa-pill:active {
  transform: scale(0.97);
}

/* ── Input Focus Glow ── */
input,select,textarea{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
input:focus,
select:focus,
textarea:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color .35s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ── Transaction List Stagger Fade-In ── */
.tx-item {
  animation: txSlideIn 0.3s ease forwards;
  opacity: 0;
}
.tx-item:nth-child(1)  { animation-delay: 0.02s; }
.tx-item:nth-child(2)  { animation-delay: 0.04s; }
.tx-item:nth-child(3)  { animation-delay: 0.06s; }
.tx-item:nth-child(4)  { animation-delay: 0.08s; }
.tx-item:nth-child(5)  { animation-delay: 0.10s; }
.tx-item:nth-child(6)  { animation-delay: 0.12s; }
.tx-item:nth-child(7)  { animation-delay: 0.14s; }
.tx-item:nth-child(8)  { animation-delay: 0.16s; }
.tx-item:nth-child(9)  { animation-delay: 0.18s; }
.tx-item:nth-child(10) { animation-delay: 0.20s; }
.tx-item:nth-child(n+11) { animation-delay: 0.22s; }
@keyframes txSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Toast Notification ── */
.toast-container {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--bg);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 2.7s forwards;
  pointer-events: auto;
  white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;
  max-width:calc(100vw - 24px);
}
.toast.toast-success { background: #10b981; color: #fff; }
.toast.toast-error   { background: #ef4444; color: #fff; }
.toast.toast-info    { background: #3b82f6; color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* ── Modal Scale Entrance ── */
.modal-overlay {
  animation: modalFadeIn 0.2s ease forwards;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-content {
  animation: modalScaleIn 0.25s ease forwards;
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── PWA Install Banner ── */
#installBanner {
  position:fixed;bottom:0;left:0;right:0;
  background:var(--primary);color:#fff;
  padding:14px 16px;display:flex;align-items:center;gap:10px;
  z-index:10000;font-family:system-ui;font-size:14px;
  box-shadow:0 -2px 12px rgba(0,0,0,.15);
  animation:slideUp .3s ease;
}
@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
#installBanner .banner-text { flex:1;display:flex;align-items:center;gap:6px }
#installBanner .banner-text .material-icons { font-size:20px }
#installBannerBtn {
  background:#fff;color:var(--primary);border:none;
  padding:8px 16px;border-radius:50px;font-weight:600;
  cursor:pointer;font-size:13px;white-space:nowrap;
  transition:transform .1s;
}
#installBannerBtn:active { transform:scale(0.95) }
#installBannerClose {
  background:transparent;color:rgba(255,255,255,.7);
  border:none;font-size:20px;cursor:pointer;padding:0 4px;line-height:1;
}
.dark #installBanner { background:var(--primary-dark,#0055d4) }


/* ── Skeleton Loading Shimmer ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Pulse for Balance Updates ── */
.balance-pulse {
  animation: balancePulse 0.6s ease;
}
@keyframes balancePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Quick Add Form Slide ── */
.quick-add-enter {
  animation: quickAddSlide 0.3s ease forwards;
}
@keyframes quickAddSlide {
  from { opacity: 0; max-height: 0; transform: translateY(-10px); }
  to   { opacity: 1; max-height: 400px; transform: translateY(0); }
}

/* ── Scroll Reveal (used with JS) ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Ripple Effect on Buttons ── */
.btn-primary,
.btn-danger,
.add-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-danger::after,
.add-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.btn-primary:active::after,
.btn-danger:active::after,
.add-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
}

/* ── Smooth Number Counter ── */
.count-up {
  transition: all 0.3s ease;
}


/* ── Floating Action Button Pulse ── */
.add-btn {
  animation: fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
  50%      { box-shadow: 0 4px 20px rgba(59,130,246,0.5); }
}

/* ═══════════════════════════════════════════
   MONTHLY COMPARISON CARD
   ═══════════════════════════════════════════ */
.monthly-comparison {
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.monthly-comparison:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.mc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mc-ico {
  font-size: 20px;
  color: var(--primary);
}
.mc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mc-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: background 0.2s ease;
}
.mc-label {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 4px;
  font-weight: 500;
}
.mc-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.2;
  word-break: break-all;
}
.mc-change {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.mc-change.up { color: #10b981; }
.mc-change.down { color: #ef4444; }
.mc-change.neutral { color: var(--text3); }
.mc-sub {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 380px) {
  .mc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
  }
  .mc-label { margin: 0; }
  .mc-val { margin: 0; }
  .mc-change { margin: 0; }
}

.dark .monthly-comparison {
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dark .monthly-comparison:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════
   WIDGET ENTRY BUTTON (Profile)
   ═══════════════════════════════════════════ */
.widget-entry-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.widget-entry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.3);
}
.widget-entry-btn:active {
  transform: scale(0.98);
}
.widget-entry-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.widget-entry-icon .material-icons {
  font-size: 22px;
  color: #fff;
}
.widget-entry-text {
  flex: 1;
}
.widget-entry-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.widget-entry-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}
.widget-entry-arrow {
  font-size: 22px;
  color: rgba(255,255,255,0.6);
  transition: transform 0.2s ease;
}
.widget-entry-btn:hover .widget-entry-arrow {
  transform: translateX(3px);
  color: rgba(255,255,255,0.9);
}

/* ═══════════════════════════════════════════
   WIDGET SETTINGS MODAL
   ═══════════════════════════════════════════ */
.ws-modal {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
}
.ws-header {
  text-align: center;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ws-header-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary), #6366f1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.ws-header-icon .material-icons {
  font-size: 24px;
  color: #fff;
}
.ws-header-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.ws-header-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.ws-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.ws-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .2s;
}
.ws-x:hover { background: rgba(59,130,246,.1); color: var(--primary); }
.ws-list {
  padding: 12px 16px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ws-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: background 0.15s ease, opacity 0.15s ease;
  cursor: grab;
  will-change: transform;
}
.ws-item:hover {
  background: var(--bg2);
}
/* Drag target highlight (no flicker) */
.ws-item.ws-drag-target {
  border: 2px solid var(--primary);
  background: rgba(59,130,246,.06);
  transition: border-color 0.15s, background 0.15s;
}
.ws-item.ws-drag-above {
  border-top: 3px solid var(--primary);
}

/* Drop indicator line (pointer events drag) */
.ws-drop-line {
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
  margin: -2px 0;
  transition: opacity 0.1s;
  box-shadow: 0 0 8px rgba(59,130,246,0.4);
  z-index: 1;
  position: relative;
}
.ws-drop-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(59,130,246,0.5);
}
.ws-drag-handle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: grab;
  color: var(--text3);
  border-radius: 4px;
  transition: color 0.15s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ws-drag-handle:hover {
  color: var(--primary);
}
.ws-drag-handle .material-icons {
  font-size: 20px;
}
/* Item being dragged - ghost style */
.ws-item.ws-dragging {
  opacity: 0.35;
  pointer-events: none;
}

/* Floating clone */
.ws-drag-clone {
  position: fixed;
  z-index: 10005;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 12px;
  background: var(--card);
  will-change: left, top;
}
.ws-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.ws-item-icon {
  width: 36px;
  height: 36px;
  background: var(--card);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ws-item-icon .material-icons {
  font-size: 18px;
  color: var(--primary);
}
.ws-item-info {
  min-width: 0;
}
.ws-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-item-order {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}
.ws-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ws-item-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-reorder-btn {
  width: 28px;
  height: 22px;
  border-radius: 50px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.ws-reorder-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ws-reorder-btn:disabled {
  opacity: 0.2;
  cursor: default;
  background: var(--bg);
}
.ws-reorder-btn:disabled:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text3);
}

/* Toggle switch inside widget modal */
.ws-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.ws-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ws-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: 0.2s ease;
}
.ws-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ws-toggle input:checked + .ws-toggle-slider {
  background: var(--primary);
}
.ws-toggle input:checked + .ws-toggle-slider::before {
  transform: translateX(18px);
}

.ws-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px 20px;
}
.ws-cancel,
.ws-close {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.ws-cancel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.ws-cancel:hover {
  background: var(--border);
  transform: translateY(-1px);
}
.ws-cancel:active {
  transform: scale(0.98);
}
.ws-close {
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: #fff;
  border: none;
}
.ws-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.ws-close:active {
  transform: scale(0.98);
}

/* Dark mode tweaks */
.dark .ws-modal {
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.dark .ws-item-icon {
  background: #1e2132;
}
.dark .ws-drag-handle { color: #5f6368; }
.dark .ws-drag-handle:hover { color: #60A5FA; }
.dark .ws-item.ws-drag-target { border-color: #60A5FA; background: rgba(96,165,250,.08); }

/* ===== PIUTANG/HUTANG PAGE ===== */
.piutang-page-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}
.piutang-page-title{font-size:24px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.piutang-page-sub{font-size:13px;color:var(--text3);margin:4px 0 0}
.piutang-add-fab{width:48px;height:48px;border-radius:16px;border:none;background:var(--primary);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,123,255,.3);transition:all .2s}
.piutang-add-fab:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,123,255,.4)}
.piutang-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.piutang-summary-card{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden}
.piutang-summary-card.piutang{border-left:4px solid #34c759}
.piutang-summary-card.hutang{border-left:4px solid #ff3b30}
.piutang-summary-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.piutang-summary-card.piutang .piutang-summary-ico{background:rgba(52,199,89,.12);color:#34c759}
.piutang-summary-card.hutang .piutang-summary-ico{background:rgba(255,59,48,.12);color:#ff3b30}
.piutang-summary-label{font-size:12px;color:var(--text3);font-weight:500}
.piutang-summary-value{font-size:20px;font-weight:800;margin:4px 0 2px}
.piutang-summary-sub{font-size:11px;color:var(--text3)}
.piutang-tabs{display:flex;gap:6px;margin-bottom:12px}
.piutang-tab{flex:1;padding:10px;border-radius: 50px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.piutang-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.piutang-status-tabs{display:flex;gap:6px;margin-bottom:16px}
.piutang-stab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.piutang-stab.active{background:var(--bg2);color:var(--text);border-color:var(--text3)}
.debt-list{display:flex;flex-direction:column;gap:10px}
.debt-card{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border);transition:all .2s}
.debt-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.debt-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.debt-card-person{font-size:15px;font-weight:700}
.debt-card-desc{font-size:12px;color:var(--text3);margin-top:2px}
.debt-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}
.debt-badge.piutang{background:rgba(52,199,89,.1);color:#34c759}
.debt-badge.hutang{background:rgba(255,59,48,.1);color:#ff3b30}
.debt-status-badge{padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:6px}
.debt-status-badge.active{background:rgba(59,130,246,.1);color:#3b82f6}
.debt-status-badge.partial{background:rgba(245,158,11,.1);color:#f59e0b}
.debt-status-badge.paid{background:rgba(52,199,89,.1);color:#34c759}
.debt-status-badge.cancelled{background:rgba(150,150,150,.1);color:#969696}
.debt-amounts{display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.debt-original{font-size:18px;font-weight:800}
.debt-remaining{font-size:13px;color:var(--text3)}
.debt-progress{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-bottom:12px}
.debt-progress-fill{height:100%;border-radius:3px;transition:width .3s}
.debt-progress-fill.piutang{background:linear-gradient(90deg,#34c759,#30d158)}
.debt-progress-fill.hutang{background:linear-gradient(90deg,#ff3b30,#ff6961)}
.debt-due{font-size:11px;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;gap:4px}
.debt-due.overdue{color:#ff3b30;font-weight:600}
.debt-actions{display:flex;gap:8px}
.debt-action-btn{flex:1;padding:10px;border-radius: 50px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.debt-action-btn.pay{border-color:rgba(52,199,89,.3);color:#34c759}
.debt-action-btn.pay:hover{background:rgba(52,199,89,.08)}
.debt-action-btn.edit{border-color:rgba(59,130,246,.3);color:#3b82f6}
.debt-action-btn.edit:hover{background:rgba(59,130,246,.08)}
.debt-action-btn.del{border-color:rgba(255,59,48,.3);color:#ff3b30}
.debt-action-btn.del:hover{background:rgba(255,59,48,.08)}
.debt-action-btn span.material-icons{font-size:16px}
.debt-type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.debt-type-btn{padding:14px;border-radius:14px;border:2px solid var(--border);background:var(--card);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.debt-type-btn.active{border-color:var(--primary);background:rgba(0,123,255,.06);color:var(--primary)}
.pay-debt-info{padding:14px;background:var(--bg);border-radius:14px;margin-bottom:16px;font-size:14px}
.pay-debt-info .pay-info-label{font-size:12px;color:var(--text3);margin-bottom:4px}
.pay-debt-info .pay-info-val{font-weight:700;font-size:16px}
.pay-debt-quick{display:flex;gap:8px;margin-bottom:16px}
.pay-quick-btn{flex:1;padding:10px;border-radius: 50px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.pay-quick-btn:hover{border-color:var(--primary);color:var(--primary)}

/* ===== LAPORAN BULANAN PAGE ===== */
.laporan-page-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.laporan-page-title{font-size:22px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.laporan-page-sub{font-size:13px;color:var(--text3);margin:4px 0 0}
.laporan-month-nav{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:6px}
.laporan-month-btn{width:36px;height:36px;border-radius: 50px;border:none;background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.laporan-month-btn:hover{background:var(--bg2)}
.laporan-month-label{font-size:14px;font-weight:700;min-width:120px;text-align:center}
.laporan-hero-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.laporan-hero-card{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border);text-align:center;position:relative;overflow:hidden}
.laporan-hero-card.income{border-top:3px solid #34c759}
.laporan-hero-card.expense{border-top:3px solid #ff3b30}
.laporan-hero-card.cf{border-top:3px solid #3b82f6}
.laporan-hero-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.laporan-hero-card.income .laporan-hero-ico{background:rgba(52,199,89,.12);color:#34c759}
.laporan-hero-card.expense .laporan-hero-ico{background:rgba(255,59,48,.12);color:#ff3b30}
.laporan-hero-card.cf .laporan-hero-ico{background:rgba(59,130,246,.12);color:#3b82f6}
.laporan-hero-label{font-size:11px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.laporan-hero-value{font-size:18px;font-weight:800;margin:4px 0 2px}
.laporan-hero-change{font-size:11px;font-weight:700}
.laporan-hero-change.up{color:#34c759}
.laporan-hero-change.down{color:#ff3b30}
.laporan-hero-change.neutral{color:var(--text3)}
.laporan-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.laporan-stat-card{padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.laporan-stat-label{font-size:11px;color:var(--text3);font-weight:500}
.laporan-stat-value{font-size:16px;font-weight:800}
.laporan-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px}
.laporan-card-title{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.laporan-card-title .material-icons{font-size:18px;color:var(--primary)}
.laporan-chart-wrap{position:relative;width:100%;height:200px}
.laporan-cat-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.laporan-cat-item:last-child{border-bottom:none}
.laporan-cat-rank{width:24px;height:24px;border-radius:50%;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text3)}
.laporan-cat-info{flex:1}
.laporan-cat-name{font-size:13px;font-weight:600}
.laporan-cat-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-top:4px}
.laporan-cat-bar-fill{height:100%;border-radius:3px;background:var(--primary);transition:width .3s}
.laporan-cat-amount{text-align:right}
.laporan-cat-amount .amt{font-size:14px;font-weight:700}
.laporan-cat-amount .pct{font-size:11px;color:var(--text3)}
.laporan-income-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.laporan-income-item:last-child{border-bottom:none}
.laporan-income-desc{font-size:13px;font-weight:600;color:var(--text)}
.laporan-income-amt{font-size:14px;font-weight:700;color:#34c759}
.laporan-biggest{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,59,48,.04);border-radius:12px;border:1px solid rgba(255,59,48,.1)}
.laporan-biggest-icon{width:40px;height:40px;border-radius: 12px;background:rgba(255,59,48,.1);display:flex;align-items:center;justify-content:center}
.laporan-biggest-icon .material-icons{color:#ff3b30;font-size:22px}
.laporan-biggest-info{flex:1}
.laporan-biggest-desc{font-size:14px;font-weight:700}
.laporan-biggest-date{font-size:11px;color:var(--text3)}
.laporan-biggest-amt{font-size:18px;font-weight:800;color:#ff3b30}
.laporan-projection{display:flex;justify-content:space-between;align-items:center}
.laporan-proj-label{font-size:13px;color:var(--text3)}
.laporan-proj-value{font-size:18px;font-weight:800;color:var(--text)}

/* ===== BUDGET ROLLOVER ===== */
.budget-rollover-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;background:rgba(168,85,247,.1);color:#a855f7}
.budget-rollover-info{font-size:11px;color:var(--text3);margin-top:4px}
.budget-rollover-info span{color:#a855f7;font-weight:600}

/* Dark mode: Piutang & Laporan */
.dark .piutang-summary-card,
.dark .piutang-tab,
.dark .debt-card,
.dark .debt-type-btn,
.dark .pay-debt-info,
.dark .pay-quick-btn,
.dark .debt-action-btn,
.dark .laporan-hero-card,
.dark .laporan-stat-card,
.dark .laporan-card,
.dark .laporan-month-nav { background:#1a1a1e; border-color:#2a2a2e; }
.dark .piutang-tab.active { background:#007AFF; }
.dark .laporan-biggest { background:rgba(255,59,48,.08); border-color:rgba(255,59,48,.15); }
.dark .debt-progress { background:#2a2a2e; }

/* Fix laporan hero card truncation */
.laporan-hero-value{
  font-size:clamp(14px, 4vw, 18px);
  word-break:break-all;
  overflow-wrap:break-word;
  line-height:1.2;
}
.laporan-hero-card{
  padding:14px 10px;
  min-width:0;
}
@media(max-width:480px){
  .laporan-hero-row{grid-template-columns:1fr}
  .laporan-hero-card{padding:16px}
  .laporan-hero-value{font-size:18px;word-break:normal}
}

/* INVESTMENTS PAGE */
.inv-page-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}
.inv-page-title{font-size:24px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.inv-page-sub{font-size:13px;color:var(--text3);margin:4px 0 0}
.inv-add-fab{width:48px;height:48px;border-radius:16px;border:none;background:var(--primary);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,123,255,.3);transition:all .2s}
.inv-add-fab:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,123,255,.4)}
.inv-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.inv-summary-card{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden}
.inv-summary-card.total{border-left:4px solid #8b5cf6}
.inv-summary-card.change{border-left:4px solid #f59e0b}
.inv-summary-ico{width:36px;height:36px;border-radius: 12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.inv-summary-card.total .inv-summary-ico{background:rgba(139,92,246,.1)}
.inv-summary-card.total .inv-summary-ico .material-icons{color:#8b5cf6}
.inv-summary-card.change .inv-summary-ico{background:rgba(245,158,11,.1)}
.inv-summary-card.change .inv-summary-ico .material-icons{color:#f59e0b}
.inv-summary-label{font-size:12px;color:var(--text3);margin-bottom:4px}
.inv-summary-value{font-size:18px;font-weight:800;color:var(--text)}
.inv-summary-sub{font-size:12px;margin-top:4px}
.inv-tabs{display:flex;gap:12px;margin-bottom:20px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:rgba(128,128,128,.35) transparent;transition:scrollbar-color .3s}
.inv-tabs.hide-sb{scrollbar-width:none;scrollbar-color:transparent transparent}
.inv-tabs.hide-sb::-webkit-scrollbar{height:0}
.inv-tabs::-webkit-scrollbar{height:5px}
.inv-tabs::-webkit-scrollbar-track{background:transparent;border-radius:4px}
.inv-tabs::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:4px;transition:opacity .3s}
.inv-tab{padding:10px 20px;border-radius:24px;border:none;background:var(--bg);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.inv-tab.active{background:var(--primary);color:#fff}
.inv-list{display:flex;flex-direction:column;gap:12px}
.inv-card{padding:12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.inv-card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.inv-card-symbol{font-size:16px;font-weight:800;color:var(--text)}
.inv-card-type{font-size:11px;padding:4px 8px;border-radius:8px;background:var(--bg);color:var(--text2);text-transform:capitalize}
.inv-card-name{font-size:14px;color:var(--text);margin-bottom:12px}
.inv-card-units{font-size:12px;color:var(--text2);margin-bottom:4px}
.inv-card-prices{display:flex;gap:16px;font-size:12px;color:var(--text2);margin-bottom:8px}
.inv-card-values{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px}
.inv-card-invested{font-weight:600;color:var(--text2)}
.inv-card-current.gain{color:#10b981;font-weight:700}
.inv-card-current.loss{color:#ef4444;font-weight:700}
.inv-card-actions{display:flex;gap:8px;justify-content:flex-end}
.inv-card-btn{width:32px;height:32px;border-radius: 50px;border:none;background:var(--bg);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.inv-card-btn .material-icons{font-size:18px}
.inv-card-btn.delete{background:rgba(239,68,68,.1);color:#ef4444}
.inv-card-btn:hover{background:var(--primary);color:#fff}
.inv-card-btn.delete:hover{background:#ef4444;color:#fff}

/* INVESTMENT MODAL — uses standard .modal-ov structure, no special rules needed */

/* CASH FLOW DAILY LIST */
.chart .cf-daily-list{display:flex!important;flex-direction:column!important;gap:0!important;max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch;height:auto!important;align-items:stretch!important;padding-top:12px!important}
#cashFlowChart{height:auto!important;display:block!important;align-items:stretch!important;padding-top:0!important}
.cf-daily-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);gap:10px}
.cf-daily-row:last-child{border-bottom:none}
.cf-daily-date{display:flex;flex-direction:column;align-items:center;min-width:36px}
.cf-daily-daynum{font-size:18px;font-weight:700;color:var(--text);line-height:1}
.cf-daily-dayname{font-size:10px;color:var(--text3);margin-top:2px;text-transform:capitalize}
.cf-daily-vals{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-daily-inc,.cf-daily-exp{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-daily-inc{font-size:12px}
.cf-daily-exp{font-size:12px}
.cf-daily-net{font-size:13px;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap;min-width:80px;text-align:center}

/* === TAP TO SHOW ACTIONS === */
/* Universal: tap item → reveal action buttons, tap elsewhere → hide */
.tap-actions{display:none!important}
.tap-open .tap-actions{display:flex!important}
.tap-open{background:rgba(0,0,0,.04)!important}

/* === CLEAN BILL CARD LAYOUT === */
.bill-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background .15s;
}
.bill-card:active { background: var(--bg); }
.bill-card-accent {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}
.bill-card-accent.urgent { background: #ef4444; }
.bill-card-accent.soon { background: #f59e0b; }
.bill-card-accent.ok { background: #10b981; }
.bill-info { flex: 1; min-width: 0; }
.bill-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.bill-date-text { font-size: 12px; color: var(--text3); margin-top: 2px; }
.bill-right { text-align: right; flex-shrink: 0; }
.bill-amount { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bill-amount.urgent { color: #ef4444; }
.bill-amount.soon { color: #f59e0b; }
.bill-amount.ok { color: var(--text); }
.bill-meta { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.bill-due-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.bill-due-badge.urgent { background: rgba(239,68,68,.1); color: #ef4444; }
.bill-due-badge.soon { background: rgba(245,158,11,.1); color: #f59e0b; }
.bill-due-badge.ok { background: rgba(16,185,129,.1); color: #10b989; }
.bill-freq-badge { font-size: 11px; color: var(--text3); white-space: nowrap; }

/* Bill actions row (below card, shown on tap) */
.bill-actions-row {
  display: none;
  gap: 8px;
  padding: 0 16px 12px 0;
  margin-top: -4px;
}
.bill-actions-row .bill-act-btn {
  flex: 1;
  padding: 10px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.bill-act-btn .material-icons { font-size: 18px; }
.bill-act-btn:hover { background: var(--bg); }
.bill-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.bill-act-btn.del:hover { background: rgba(239,68,68,.08); }

.dark .bill-card { background: var(--card); }
.dark .bill-due-badge.urgent { background: rgba(239,68,68,.15); }
.dark .bill-due-badge.soon { background: rgba(245,158,11,.15); }
.dark .bill-due-badge.ok { background: rgba(16,185,129,.15); }

/* Paid bill card */
.bill-card.paid { opacity: .7; }

/* Mini bill cards (home page) */
.bill-card-mini {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bill-mini-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bill-mini-icon .material-icons { font-size: 18px; color: var(--text2); }
.bill-mini-info { flex: 1; min-width: 0; }
.bill-mini-name { font-size: 13px; font-weight: 600; color: var(--text); }
.bill-mini-due { font-size: 11px; color: var(--text3); margin-top: 1px; }
.bill-mini-right { text-align: right; flex-shrink: 0; }
.bill-mini-amount { font-size: 13px; font-weight: 700; color: var(--text); }
.bill-mini-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-top: 3px; display: inline-block; }
.bill-mini-badge.urgent { background: rgba(239,68,68,.1); color: #ef4444; }
.bill-mini-badge.soon { background: rgba(245,158,11,.1); color: #f59e0b; }
.bill-mini-badge.ok { background: rgba(16,185,129,.1); color: #10b989; }

/* === CLEAN INVESTMENT CARD === */
.inv-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background .15s;
}
.inv-card:active { background: var(--bg); }
.inv-card-accent{position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:16px 0 0 16px}
.inv-card-info{flex:1;min-width:0;overflow:hidden}
.inv-top-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.inv-symbol{font-size:15px;font-weight:700;color:var(--text)}
.inv-type-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--bg);color:var(--text3);text-transform:capitalize}
.inv-meta-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-top:2px}
.inv-meta-dot{opacity:.5;font-size:14px;font-weight:700}
.inv-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;text-align:right;min-width:0}
.inv-now{font-size:15px;font-weight:800;color:var(--text);white-space:nowrap}
.inv-gain-row{display:flex;align-items:center;gap:8px;white-space:nowrap}
.inv-gain{font-size:12px;font-weight:600}
.inv-gain.gain{color:#10b981}
.inv-gain.loss{color:#ef4444}
.inv-actions-row{
  display:none;
  gap:8px;
  padding:0 16px 12px 18px;
  margin-top:-4px;
}
.inv-act-btn {
  flex: 1;
  padding: 10px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.inv-act-btn .material-icons { font-size: 18px; }
.inv-act-btn:hover { background: var(--bg); }
.inv-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.inv-act-btn.del:hover { background: rgba(239,68,68,.08); }
.dark .inv-card { background: var(--card); }
.dark .inv-gain.gain { color: #34c759; }
.dark .inv-gain.loss { color: #ff453a; }

/* === INVESTMENT: HEADER ACTIONS === */
.inv-header-actions{display:flex;align-items:center;gap:8px}
.inv-refresh-btn{
  width:36px;height:36px;border-radius: 50px;border:1px solid var(--border);
  background:var(--card);color:var(--text2);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .2s;
}
.inv-refresh-btn:hover{color:#3b82f6;border-color:#3b82f6}
.inv-refresh-btn .material-icons{font-size:20px;display:inline-block}
.inv-refresh-btn.spinning .material-icons{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.inv-price-status{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px}
.inv-price-status .dot{width:6px;height:6px;border-radius:50%;background:#10b981}
.inv-price-status .dot.stale{background:#f59e0b}
.inv-price-status .dot.offline{background:#ef4444}

/* === LIVE PRICES MODAL === */
.live-prices-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.live-prices-time{font-size:12px;color:var(--text3)}

/* Crypto price card in modal */
.lp-section{margin-bottom:16px}
.lp-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.lp-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--border);
  margin-bottom:6px;transition:all .2s;
}
.lp-card:hover{border-color:rgba(59,130,246,.3)}
.lp-left{display:flex;align-items:center;gap:12px}
.lp-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff}
.lp-icon.btc{background:linear-gradient(135deg,#f7931a,#e8850f)}
.lp-icon.eth{background:linear-gradient(135deg,#627eea,#4a6cf7)}
.lp-icon.sol{background:linear-gradient(135deg,#9945ff,#14f195)}
.lp-icon.bnb{background:linear-gradient(135deg,#f3ba2f,#d4a017)}
.lp-icon.ada{background:linear-gradient(135deg,#0033ad,#001f7a)}
.lp-icon.xrp{background:linear-gradient(135deg,#23292f,#1a1e22)}
.lp-icon.doge{background:linear-gradient(135deg,#c2a633,#b8982e)}
.lp-icon.dot{background:linear-gradient(135deg,#e6007a,#c40067)}
.lp-icon.trx{background:linear-gradient(135deg,#ff0013,#d40010)}
.lp-icon.avax{background:linear-gradient(135deg,#e84142,#d03536)}
.lp-icon.link{background:linear-gradient(135deg,#2a5ada,#2049a8)}
.lp-icon.ton{background:linear-gradient(135deg,#0098ea,#007bb8)}
.lp-icon.usdt{background:linear-gradient(135deg,#26a17b,#1e8c6c)}
.lp-icon.gold{background:linear-gradient(135deg,#ffd700,#d4af37)}
.lp-icon.forex{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.lp-name{font-size:14px;font-weight:700;color:var(--text)}
.lp-symbol{font-size:11px;color:var(--text3)}
.lp-right{text-align:right}
.lp-price{font-size:14px;font-weight:800;color:var(--text)}
.lp-change{font-size:12px;font-weight:600}
.lp-change.up{color:#10b981}
.lp-change.down{color:#ef4444}

/* === INVESTMENT: LIVE PRICE INDICATOR === */
.inv-live-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:6px;background:rgba(59,130,246,.1);color:#3b82f6;
  cursor:pointer;white-space:nowrap;
}
.inv-live-badge .dot{width:5px;height:5px;border-radius:50%;background:#3b82f6;animation:pulse 2s infinite}
.inv-sparkline{width:60px;height:28px;display:block;margin-top:4px}

/* === INVESTMENT: MODAL TYPE SELECT === */
.inv-type-badge{
  display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;
  background:var(--bg);color:var(--text3);text-transform:capitalize;white-space:nowrap;
}

/* === DARK MODE: LIVE PRICES === */
.dark .lp-card{background:var(--card)}
.dark .inv-live-badge{background:rgba(59,130,246,.15)}

/* === CRYPTO CHART MODAL === */
#cryptoChartContent{padding:16px}
.chart-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.chart-stat{text-align:center;padding:8px;background:var(--bg);border-radius:10px;border:1px solid var(--border)}
.chart-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.chart-stat-value{font-size:14px;font-weight:800;color:var(--text);margin-top:2px}
.chart-stat-value.up{color:#10b981}
.chart-stat-value.down{color:#ef4444}
.chart-canvas-wrap{position:relative;height:260px;margin-bottom:12px}
.chart-canvas-wrap canvas, .chart-canvas-wrap div{width:100%!important;height:100%!important}
.chart-time-tabs{display:flex;gap:4px;margin-bottom:12px}
.chart-time-tab{
  flex:1;padding:8px;text-align:center;border-radius: 50px;border:1px solid var(--border);
  background:transparent;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;
}
.chart-time-tab.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
.chart-time-tab:hover:not(.active){color:var(--text);border-color:var(--text2)}

/* === INVESTMENT: CARD LAYOUT === */
.inv-card-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px}
.inv-card-info{flex:1;min-width:0;overflow:hidden}
.inv-top-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.inv-meta-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-top:2px}
.inv-meta-dot{opacity:.5;font-size:14px;font-weight:700}
.inv-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;text-align:right;min-width:0}
.inv-now{font-size:15px;font-weight:800;color:var(--text);white-space:nowrap}
.inv-gain-row{display:flex;align-items:center;gap:8px;white-space:nowrap}
.inv-gain{font-size:12px;font-weight:600}
.inv-gain.gain{color:#10b981}
.inv-gain.loss{color:#ef4444}
.inv-sparkline-wrap{width:70px;height:30px;flex-shrink:0;margin-left:8px}
.inv-sparkline-wrap canvas{width:100%!important;height:100%!important}

/* === DARK MODE: CHART === */
.dark .chart-stat{background:var(--card)}

/* === CLEAN DEBT CARD === */
.debt-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background .15s;
}
.debt-card:active { background: var(--bg); }
.debt-card-accent {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}
.debt-info { flex: 1; min-width: 0; }
.debt-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.debt-type-badge { font-size: 10px; font-weight: 700; text-transform: capitalize; }
.debt-sub { font-size: 12px; color: var(--text3); margin-top: 1px; }
.debt-due-info { font-size: 11px; color: var(--text3); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.debt-status-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.debt-status-tag.active { background: rgba(59,130,246,.1); color: #3b82f6; }
.debt-status-tag.partial { background: rgba(245,158,11,.1); color: #f59e0b; }
.debt-status-tag.paid { background: rgba(16,185,129,.1); color: #10b989; }
.debt-status-tag.cancelled { background: rgba(107,114,128,.1); color: #6b7280; }
/* Debt progress bar */
.debt-progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.debt-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.debt-progress-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
.debt-progress-pct { font-size: 11px; font-weight: 700; color: var(--text2); min-width: 32px; text-align: right; }
.dark .debt-progress-bar { background: #3a3a3e; }
.debt-right { text-align: right; flex-shrink: 0; }
.debt-original { font-size: 13px; color: var(--text2); }
.debt-remaining { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.debt-actions-row {
  display: none;
  gap: 8px;
  padding: 0 16px 12px 0;
  margin-top: -4px;
}
.debt-act-btn {
  flex: 1;
  padding: 10px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.debt-act-btn .material-icons { font-size: 18px; }
.debt-act-btn:hover { background: var(--bg); }
.debt-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.debt-act-btn.del:hover { background: rgba(239,68,68,.08); }
.debt-act-btn.pay { color: #10b989; border-color: rgba(16,185,129,.2); }
.debt-act-btn.pay:hover { background: rgba(16,185,129,.08); }
.dark .debt-card { background: var(--card); }
.dark .debt-gain.gain { color: #34c759; }
.dark .debt-gain.loss { color: #ff453a; }

/* === CLEAN GOAL CARD === */
.goal-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background .15s;
}
.goal-card:active { background: var(--bg); }
.goal-info { flex: 1; min-width: 0; }
.goal-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.goal-status-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: capitalize; }
.goal-status-tag.active { background: rgba(16,185,129,.1); color: #10b989; }
.goal-status-tag.paused { background: rgba(245,158,11,.1); color: #f59e0b; }
.goal-status-tag.completed { background: rgba(59,130,246,.1); color: #3b82f6; }
.goal-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.goal-progress-wrap { height: 6px; background: var(--bg); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.goal-amounts { font-size: 12px; color: var(--text3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.goal-amounts span:nth-child(3) { font-weight: 700; margin-left: auto; }
.goal-pct { font-size: 13px !important; font-weight: 700 !important; }

/* FIX: Goal actions row - horizontal scroll on mobile */
.goal-actions-row {
  display: none;
  gap: 8px;
  padding: 0 16px 12px 0;
  margin-top: -4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  scrollbar-width: none;
}
.goal-actions-row::-webkit-scrollbar { display: none; }
.goal-act-btn {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
  white-space: nowrap;
  min-width: fit-content;
}
.goal-act-btn .material-icons { font-size: 16px; }
.goal-act-btn:hover { background: var(--bg); }
.goal-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.goal-act-btn.del:hover { background: rgba(239,68,68,.08); }
.dark .goal-card { background: var(--card); }

/* === CLEAN NET WORTH ITEM === */
.nw-item {
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background .15s;
}
.nw-item:active { background: var(--bg); }
.nw-item-accent {
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: #8b5cf6;
  flex-shrink: 0;
}
.nw-info { flex: 1; min-width: 0; }
.nw-date { font-size: 13px; font-weight: 600; color: var(--text); }
.nw-note { font-size: 11px; color: var(--text3); margin-top: 1px; }
.nw-amount { font-size: 14px; font-weight: 700; color: var(--text); text-align: right; flex-shrink: 0; }
.nw-actions-row {
  display: none;
  gap: 8px;
  padding: 0 14px 10px 18px;
  margin-top: -2px;
}
.nw-act-btn {
  flex: 1;
  padding: 9px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.nw-act-btn .material-icons { font-size: 18px; }
.nw-act-btn:hover { background: var(--bg); }
.nw-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.nw-act-btn.del:hover { background: rgba(239,68,68,.08); }
.dark .nw-item { background: var(--card); }

/* === CLEAN CATEGORY ITEM === */
.cat-item {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background .15s;
}
.cat-item:active { background: var(--bg); }
.cat-ico { font-size: 28px; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 10px; }
.cat-info { flex: 1; min-width: 0; }
.cat-name { font-size: 14px; font-weight: 600; color: var(--text); }
.cat-slug { font-size: 11px; color: var(--text3); margin-top: 1px; }
.cat-type-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: capitalize; }
.cat-type-badge.income { background: rgba(16,185,129,.1); color: #10b989; }
.cat-type-badge.expense { background: rgba(239,68,68,.1); color: #ef4444; }
.cat-actions-row {
  display: none;
  gap: 8px;
  padding: 0 12px 10px 16px;
  margin-top: -4px;
}
.cat-act-btn {
  flex: 1;
  padding: 9px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.cat-act-btn .material-icons { font-size: 18px; }
.cat-act-btn:hover { background: var(--bg); }
.cat-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.cat-act-btn.del:hover { background: rgba(239,68,68,.08); }
.dark .cat-item { background: var(--card); }

/* === CLEAN BUDGET PER-CAT === */
.budget-percat-item {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background .15s;
}
.budget-percat-item:active { background: var(--bg); }
.bp-accent { width: 4px; height: 40px; border-radius: 2px; flex-shrink: 0; }
.bp-info { flex: 1; min-width: 0; }
.bp-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.bp-ico { display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; }
.bp-ico .material-icons { font-size: 14px; }
.bp-progress-wrap { height: 5px; background: var(--bg); border-radius: 3px; margin-top: 6px; overflow: hidden; position: relative; cursor: pointer; }
.bp-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }

.bp-progress-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}

.bp-progress-wrap:hover .bp-progress-tooltip {
  opacity: 1;
}
.bp-amounts { font-size: 12px; color: var(--text3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.bp-pct { font-size: 11px; font-weight: 700; margin-left: auto; }
.bp-pct.low { color: #ef4444; }
.bp-pct.mid { color: #f59e0b; }
.bp-pct.high { color: #10b989; }
.bp-actions-row {
  display: none;
  gap: 8px;
  padding: 0 16px 12px 0;
  margin-top: -4px;
}
.bp-act-btn {
  flex: 1;
  padding: 10px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.bp-act-btn .material-icons { font-size: 18px; }
.bp-act-btn:hover { background: var(--bg); }
.bp-act-btn.del { color: #ef4444; border-color: rgba(239,68,68,.2); }
.bp-act-btn.del:hover { background: rgba(239,68,68,.08); }

/* Rollover pill badge on budget card name */
.rollover-pill { font-size: 13px; vertical-align: middle; margin-left: 4px; }

/* Rollover toggle button in action row */
.bp-act-btn.rollover-btn { color: #fff; background: linear-gradient(135deg, #6b7280, #4b5563); border-color: transparent; }
.bp-act-btn.rollover-btn.on { color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: transparent; }
.bp-act-btn.rollover-btn:hover { opacity: 0.9; transform: scale(1.03); }
.dark .budget-percat-item { background: var(--card); }

/* Transfer transactions in main list */
.tx-card-item.transfer-tx {
  background: rgba(99,102,241,.04);
  border-color: rgba(99,102,241,.12);
}
.dark .tx-card-item.transfer-tx { background: rgba(99,102,241,.06); }
.tx-transfer-label {
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#6366f1;
  background:rgba(99,102,241,.1);padding:2px 7px;border-radius:5px;
  margin-bottom:3px;
}
.tx-transfer-label .material-icons{font-size:13px}
.tx-card-amt.blue{color:#6366f1}
.dark .tx-card-amt.blue{color:#818cf8}

/* Transfer items in home page recent transactions */
.tx-item.transfer-item { background: rgba(99,102,241,.04); border-color: rgba(99,102,241,.1); }
.dark .tx-item.transfer-item { background: rgba(99,102,241,.06); }
.tx-ico.transfer { background:transparent; }

/* Filter toggle active state */
.tx-filter-btn.active { background:var(--primary); color:#fff; }
.tx-filter-btn.active .material-icons { color:#fff; }
.dark .tx-filter-btn.active { background:var(--primary); color:#fff; }
.dark .tx-filter-btn.active .material-icons { color:#fff; }

/* Insight Tabs */
.insight-tabs { display: flex; gap: 8px; margin-bottom: 20px; background: var(--bg); border-radius: 50px; padding: 4px; }
.insight-tab-btn { flex: 1; padding: 10px 16px; border: none; border-radius: 50px; background: transparent; color: var(--text3); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.insight-tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Rekap Components */
.rekap-month-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.rekap-month-btn { width: 36px; height: 36px; border-radius: 50px; border: none; background: var(--card); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.rekap-month-btn:hover { background: var(--bg); }
.rekap-month-label { font-size: 15px; font-weight: 700; min-width: 100px; text-align: center; }
.rekap-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.rekap-hero-card { background: var(--card); border-radius: 16px; padding: 18px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rekap-hero-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rekap-hero-ico .material-icons { font-size: 20px; }
.rekap-hero-card.income .rekap-hero-ico { background: rgba(16,185,129,.1); color: #10b981; }
.rekap-hero-card.expense .rekap-hero-ico { background: rgba(239,68,68,.1); color: #ef4444; }
.rekap-hero-card.cashflow .rekap-hero-ico { background: rgba(59,130,246,.1); color: #3b82f6; }
.rekap-hero-card.tx .rekap-hero-ico { background: rgba(245,158,11,.1); color: #f59e0b; }
.rekap-hero-card.savings .rekap-hero-ico { background: rgba(16,185,129,.1); color: #10b981; }
.rekap-hero-card.daily .rekap-hero-ico { background: rgba(99,102,241,.1); color: #6366f1; }
.rekap-hero-card.nospend .rekap-hero-ico { background: rgba(107,114,128,.1); color: #6b7280; }
.rekap-hero-card.projected .rekap-hero-ico { background: rgba(6,182,212,.1); color: #06b6d4; }
.rekap-hero-label { font-size: 11px; color: var(--text3); font-weight: 500; margin-bottom: 4px; }
.rekap-hero-value { font-size: 16px; font-weight: 800; }
.rekap-hero-change { font-size: 11px; margin-top: 2px; }
.rekap-hero-change.up { color: #10b981; }
.rekap-hero-change.down { color: #ef4444; }
.rekap-hero-change.neutral { color: var(--text3); }
.rekap-section-title { font-size: 14px; font-weight: 700; margin: 20px 0 12px; display: flex; align-items: center; gap: 6px; }
.rekap-section-title .material-icons { font-size: 18px; }
.rekap-cat-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rekap-cat-item:last-child { border-bottom: none; }
.rekap-cat-rank { width: 24px; height: 24px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text3); flex-shrink: 0; }
.rekap-cat-info { flex: 1; min-width: 0; }
.rekap-cat-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rekap-cat-bar { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.rekap-cat-bar-fill { height: 100%; border-radius: 2px; transition: width .5s; }
.rekap-cat-amount { text-align: right; flex-shrink: 0; }
.rekap-cat-amount .amt { font-size: 13px; font-weight: 700; }
.rekap-cat-amount .pct { font-size: 11px; color: var(--text3); }
.rekap-income-item { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--card); border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border); }
.rekap-income-desc { font-size: 13px; font-weight: 500; }
.rekap-income-amt { font-size: 13px; font-weight: 700; color: #10b981; }
.rekap-biggest { display: flex; align-items: center; gap: 16px; padding: 18px 16px; background: var(--card); border-radius: 16px; border: 1px solid var(--border); }
.rekap-biggest-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(239,68,68,.1); color: #ef4444; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rekap-biggest-info { flex: 1; }
.rekap-biggest-desc { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.rekap-biggest-date { font-size: 12px; color: var(--text3); }
.rekap-biggest-amt { font-size: 16px; font-weight: 800; color: #ef4444; flex-shrink: 0; }

@media (max-width: 480px) {
  .rekap-hero-row { grid-template-columns: 1fr; }
  .insight-tabs { gap: 4px; padding: 3px; }
  .insight-tab-btn { font-size: 13px; padding: 8px 12px; }
}

/* Sidebar Reorder Modal (smooth, same as widget settings) */
.sr-modal {
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp .3s ease;
}
.sr-header {
  text-align: center;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sr-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.sr-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .2s;
}
.sr-close:hover { background: rgba(59,130,246,.1); color: var(--primary); }
.sr-desc {
  font-size: 13px;
  color: var(--text3);
  padding: 12px 20px 8px;
  text-align: center;
}
.sr-list {
  padding: 12px 16px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 12px;
  margin-bottom: 6px;
  transition: background .15s ease, opacity .15s ease;
  will-change: transform;
}
.sr-item:hover { background: var(--bg2); }
.sr-drag-handle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: grab;
  color: var(--text3);
  border-radius: 4px;
  transition: color .15s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sr-drag-handle:hover { color: var(--primary); }
.sr-drag-handle .material-icons { font-size: 20px; }
.sr-icon {
  width: 36px;
  height: 36px;
  background: var(--card);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-icon .material-icons { font-size: 18px; color: var(--primary); }
.sr-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-group-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text3);
  cursor: pointer;
  transition: all .15s;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sr-group-chip:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.05);
}
.sr-group-chip:active {
  transform: scale(0.95);
}
/* Toggle switch for show/hide */
.sr-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
}
.sr-toggle input { display: none; }
.sr-toggle-slider {
  width: 36px;
  height: 20px;
  background: #4ade80;
  border-radius: 10px;
  position: relative;
  transition: background .2s;
}
.sr-toggle-slider::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 18px;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sr-toggle-off .sr-toggle-slider {
  background: #d1d5db;
}
.sr-toggle-off .sr-toggle-slider::after {
  left: 2px;
}
.sr-item.sr-drag-source { opacity: .35; pointer-events: none; }
.sr-drag-clone {
  position: fixed;
  z-index: 10005;
  pointer-events: none;
  opacity: .95;
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
  border-radius: 12px;
  background: var(--card);
  will-change: left, top;
}
.sr-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
}
.sr-btn {
  flex: 1;
  padding: 12px;
  border-radius: 50px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.sr-btn-cancel {
  background: var(--bg);
  color: var(--text2);
}
.sr-btn-cancel:hover { background: var(--bg2); }
.sr-btn-save {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59,130,246,.3);
}
.sr-btn-save:hover { box-shadow: 0 6px 16px rgba(59,130,246,.4); transform: translateY(-1px); }
.sr-btn-reset {
  background: var(--bg2);
  color: var(--text2);
}
.sr-btn-reset:hover { background: var(--bg); color: var(--text); }

@media (max-width: 480px) {
  .sr-modal { max-height: 90vh; }
  .sr-list { padding: 8px 12px; }
  .sr-item { padding: 10px 12px; }
}

/* AI Badge */
.ai-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#3b82f6);
  color:#fff;border-radius: 50px;padding:2px 5px;
  font-size:9px;font-weight:600;gap:2px;
  margin-left:auto;flex-shrink:0;
}
.smart-insight-card{position:relative}
.smart-insight-card .ai-badge{
  position:absolute;top:8px;right:8px;
}


/* Insight widget section wrapper */


/* Insight widget section wrapper - visible even when children are empty */


/* Insight widget section - visible container */
#widgetInsightSection {
  display: block;
  background: var(--card, #fff);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 0 0 16px;
  border: 1px solid var(--border, #e5e7eb);
}
.dark #widgetInsightSection {
  display: block;
  background: var(--card, #1e1e2e);
  border-color: var(--border, #333);
}

/* Widget section header */
.widget-section-header{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.widget-section-ico{font-size:18px;color:var(--primary)}

/* Bills tabs (Manual / Auto-Detect) */
.bills-tabs{display:flex;gap:4px;padding:4px;background:var(--bg,#f3f4f6);border-radius:14px;margin-bottom:16px}
.dark .bills-tabs{background:#1a1a2e}
.bills-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:2px solid transparent;background:transparent;color:var(--text2,#6b7280);font-size:13px;font-weight:700;border-radius: 50px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;user-select:none}
.bills-tab.active{background:var(--primary,#3b82f6);border-color:var(--primary,#3b82f6);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.bills-tab:active{transform:scale(.97)}
.bills-tab .material-icons{font-size:18px}
.bills-tab-badge{background:#fff;color:#ef4444;font-size:10px;padding:1px 6px;border-radius: 50px;font-weight:700;min-width:16px;text-align:center}

/* Recurring header (inside tab) */
.recurring-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.recurring-header-title{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--text)}
.recurring-header-title .material-icons{font-size:20px;color:#7c3aed}
.recurring-header-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* Scan states in recurring list */
.recurring-scan-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}
.recurring-scan-icon{font-size:48px;color:var(--text3,#9ca3af);margin-bottom:12px}
.recurring-scan-icon.loading{color:#7c3aed;animation:recurringPulse 1.5s ease-in-out infinite}
.recurring-scan-icon.empty{color:#9ca3af}
.recurring-scan-icon.error{color:#ef4444}
.recurring-scan-icon.done{color:#10b981}
.recurring-scan-text{font-size:14px;color:var(--text2,#6b7280);line-height:1.5}
.recurring-scan-text b{color:var(--text,#111827)}
@keyframes recurringPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
.recurring-result-count{font-size:12px;color:var(--text3);text-align:center;margin-bottom:12px}
.recurring-summary{display:flex;gap:8px;margin-bottom:16px}
.recurring-summary-item{flex:1;background:var(--bg);border-radius: 12px;padding:12px;text-align:center}
.recurring-summary-label{font-size:11px;color:var(--text3);font-weight:500}
.recurring-summary-value{font-size:18px;font-weight:800;color:var(--text);margin-top:4px}

/* Existing recurring styles */
.recurring-section{background:var(--card,#fff);border-radius:16px;padding:16px;margin:0 0 16px;border:1px solid var(--border,#e5e7eb)}
.dark .recurring-section{background:var(--card,#1e1e2e);border-color:var(--border,#333)}
.recurring-total{margin-left:auto;font-size:12px;font-weight:600;color:var(--text2);background:var(--bg,#f5f7fa);padding:4px 10px;border-radius:8px}
.recurring-list{display:flex;flex-direction:column;gap:8px}
.recurring-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg,#f5f7fa);border-radius:12px}
.dark .recurring-item{background:rgba(255,255,255,.05)}
.recurring-item-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#ff9800,#f44336);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.recurring-item-icon.high{background:linear-gradient(135deg,#7c3aed,#3b82f6)}
.recurring-item-body{flex:1;min-width:0}
.recurring-item-name{font-weight:600;font-size:14px;color:var(--text)}
.recurring-item-meta{font-size:12px;color:var(--text2);margin-top:2px}
.recurring-item-amount{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap}
.recurring-badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600}
.recurring-badge.high{background:rgba(124,58,237,.12);color:#7c3aed}
.recurring-badge.medium{background:rgba(255,152,0,.12);color:#ff9800}
.recurring-badge.saved{background:rgba(76,175,80,.12);color:#4caf50}
.btn-recurring-convert{padding:4px 10px;border-radius: 50px;border:1px solid var(--primary);background:transparent;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer}
.btn-recurring-convert:hover{background:var(--primary);color:#fff}
.btn-recurring-ignore{padding:4px 10px;border-radius: 50px;border:1px solid var(--border,#e5e7eb);background:transparent;color:var(--text2);font-size:11px;cursor:pointer}
.btn-recurring-scan{width:100%;padding:10px;border-radius: 50px;border:none;background:var(--bg,#f5f7fa);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}
.btn-recurring-scan:hover{background:var(--border,#e5e7eb)}
.recurring-footer{margin-top:4px}

/* Mobile stacked investment cards */
@media(max-width:480px){
  .inv-card{position:relative;overflow:hidden;padding:12px 16px 12px 20px}
  .inv-card-info{flex:1;min-width:0}
  .inv-card-right{flex-shrink:0;text-align:right}
  .inv-card-inner{gap:12px;padding:0}
  .inv-meta-row{flex-wrap:wrap}
}

/* ============================
   TRANSFER MODE TABS & SPLIT / TEMPLATE UI
   ============================ */

.tf-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--bg, #f3f4f6);
  border-radius: 50px;
  padding: 4px;
}
.tf-mode-tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2, #6b7280);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.tf-mode-tab.active {
  background: var(--primary, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.tf-mode-tab:hover:not(.active) {
  background: rgba(99,102,241,.08);
}

/* Simple mode (default) */
#tfSimpleMode { display: block; }
#tfSplitMode { display: none; }
#tfTemplateMode { display: none; }

/* Split mode */
.tf-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tf-split-header span {
  font-size: 12px;
  color: var(--text2, #6b7280);
  font-weight: 600;
}
.tf-add-dest-btn {
  padding: 6px 12px;
  border: 1.5px dashed var(--primary, #6366f1);
  background: transparent;
  color: var(--primary, #6366f1);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.tf-add-dest-btn:hover {
  background: rgba(99,102,241,.08);
}

.tf-dest-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  position: relative;
}
.tf-dest-row select {
  flex: 1.5;
  min-width: 0;
}
.tf-dest-row input[type="search"] {
  flex: 1;
  min-width: 0;
}
.tf-dest-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
  font-size: 18px;
}
.tf-dest-remove:hover {
  background: rgba(239,68,68,.15);
}

.tf-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg, #f3f4f6);
  border-radius: 10px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.tf-total-label {
  font-size: 13px;
  color: var(--text2, #6b7280);
  font-weight: 600;
}
.tf-total-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111827);
}
.tf-total-value.over {
  color: #ef4444;
}

.tf-save-template-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--primary, #6366f1);
  background: transparent;
  color: var(--primary, #6366f1);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all .2s;
  font-family: inherit;
}
.tf-save-template-btn:hover {
  background: rgba(99,102,241,.08);
}

/* Template mode */
.tf-template-select-wrap {
  margin-bottom: 16px;
}
.tf-template-preview {
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.tf-template-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all .2s;
}
.tf-template-item:hover {
  border-color: var(--primary, #6366f1);
}
.tf-tpl-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #111827);
}
.tf-tpl-from {
  font-size: 12px;
  color: var(--text2, #6b7280);
  margin-top: 2px;
}
.tf-tpl-items {
  font-size: 12px;
  color: var(--text2, #6b7280);
  margin-top: 6px;
  padding-left: 8px;
}
.tf-tpl-items span {
  display: inline-block;
  background: var(--bg, #f3f4f6);
  padding: 2px 8px;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
}
.tf-tpl-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.tf-tpl-run-btn {
  padding: 8px 14px;
  background: var(--primary, #6366f1);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.tf-tpl-run-btn:hover {
  opacity: .85;
}
.tf-tpl-del-btn {
  padding: 8px 10px;
  background: rgba(239,68,68,.08);
  color: #ef4444;
  border: none;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-tpl-del-btn:hover {
  background: rgba(239,68,68,.15);
}
.tf-no-templates {
  text-align: center;
  padding: 24px;
  color: var(--text2, #6b7280);
  font-size: 13px;
}
.tf-dest-row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--bg, #f3f4f6);
  border-radius: 8px;
  font-size: 13px;
}
.tf-dest-row-inline .tf-inline-to {
  font-weight: 600;
  color: var(--text, #111827);
}
.tf-dest-row-inline .tf-inline-arrow {
  color: var(--text2, #6b7280);
}
.tf-dest-row-inline .tf-inline-amt {
  font-weight: 600;
  color: var(--primary, #6366f1);
}

/* ===== HEALTH SCORE PAGE ===== */
.health-page-hd { margin-bottom: 8px }
.health-page-title { font-size: 22px; font-weight: 800 }
.health-page-sub { font-size: 13px; color: var(--text3); margin-top: 2px }

.health-score-card {
  padding: 12px 24px;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 20px;
}

.health-gauge {
  width: 120px; height: 120px; margin: 0 auto 12px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: var(--text);
}

.health-level { font-size: 16px; font-weight: 600 }

.health-factors { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px }

.health-factor-row {
  background: var(--card); border-radius: 14px; padding: 16px;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}

.health-factor-name { font-size: 14px; font-weight: 700; margin-bottom: 2px }

.health-factor-bar {
  height: 10px; border-radius: 5px; background: var(--bg); overflow: hidden;
}

.health-factor-fill { height: 100%; border-radius: 5px; transition: width .5s ease }

.health-factor-meta {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--text3); margin-top: 0;
}

.health-tip {
  background: var(--primary-light); border-radius: 14px; padding: 14px 16px;
  font-size: 13px; display: flex; align-items: flex-start; gap: 8px;
}

/* HEALTH HISTORY CHART */
.health-history-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.health-history-header h3 {
  font-size: 15px; font-weight: 700; color: var(--text); margin: 0;
}
.btn-share-health,
.health-export-btn {
  padding: 8px 16px; border-radius: 50px; border: 1.5px solid var(--primary);
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.2s; white-space: nowrap;
}
.btn-share-health:hover,
.health-export-btn:hover { background: var(--primary); color: #fff; }
.btn-share-health:active,
.health-export-btn:active { transform: scale(.97); }
.btn-share-health:disabled,
.health-export-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.dark .health-export-btn { border-color: rgba(99,102,241,0.4); }
.dark .health-export-btn:hover { background: #6366f1; color: #fff; }
.dark .btn-share-health { border-color: rgba(99,102,241,0.4); }
.dark .btn-share-health:hover { background: #6366f1; color: #fff; }
.health-history-card {
  background: var(--card); border-radius: 16px; padding: 20px; margin-bottom: 16px;
}
.health-history-chart {
  width: 100%; overflow-x: auto;
}
.health-chart-bars {
  display: flex; align-items: flex-end; justify-content: space-around;
  min-height: 160px; padding: 0 4px; gap: 8px;
}
.health-chart-col {
  display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 40px;
}
.health-chart-val {
  width: 100%; max-width: 48px; border-radius: 8px 8px 4px 4px;
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 4px; transition: height 0.8s ease; position: relative;
}
.health-chart-val span {
  font-size: 11px; font-weight: 700; color: #fff; padding: 2px 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.health-chart-label {
  font-size: 9px; color: var(--text3); margin-top: 6px; text-align: center;
  white-space: nowrap;
}

/* HEALTH EXPORT BUTTON */
.health-export-btn {
  padding: 8px 16px; border-radius: 50px; border: 1.5px solid var(--primary);
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.2s;
}
.health-export-btn:hover { background: var(--primary); color: #fff; }
.health-export-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* DARK MODE OVERRIDES */
.dark .health-score-card { padding: 12px 24px; margin-bottom: 20px; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.dark .health-history-card { background: rgba(255,255,255,0.03); }
.dark .health-factor-row { background: rgba(255,255,255,0.03); }
.dark .health-factor-bar { background: rgba(255,255,255,0.08); }
.dark .health-tip { background: rgba(99,102,241,0.1); }
.dark .health-export-btn { border-color: rgba(99,102,241,0.4); }
.dark .health-export-btn:hover { background: #6366f1; color: #fff; }
.dark .health-chart-label { color: rgba(255,255,255,0.4); }

/* GOAL MILESTONE BAR */
.milestone-bar{display:flex;align-items:center;margin-top:8px;padding:4px 0}
.milestone-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.milestone-dot{width:20px;height:20px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;transition:all .3s}
.milestone-dot.done{background:#10b981}
.milestone-label{font-size:9px;color:var(--text3);margin-top:2px;white-space:nowrap}
.milestone-label.done{color:#10b981}
.milestone-line{flex:1;height:2px;background:var(--border);min-width:20px;margin:0 2px;margin-bottom:12px}
.milestone-line.done{background:#10b981}

/* GOAL HISTORY */
.history-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.history-item:last-child{border-bottom:none}
.history-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.history-info{flex:1;min-width:0}
.history-amount{font-size:14px}
.history-meta{font-size:11px;color:var(--text3);margin-top:2px}
.history-desc{font-size:11px;color:var(--text2);margin-top:2px;font-style:italic}

/* GOAL REMAINING */
.goal-remaining{font-size:12px;color:var(--text2)}

/* TEMPLATE ITEM */
.tf-template-item{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--card-bg);border-radius:12px;margin-bottom:8px;border:1px solid var(--border)}
.tf-tpl-name{font-weight:600;font-size:14px}
.tf-tpl-from{font-size:12px;color:var(--text3);margin-top:2px}
.tf-tpl-items{font-size:12px;color:var(--text2);margin-top:4px;display:flex;flex-direction:column;gap:2px}
.tf-tpl-actions{display:flex;gap:4px;flex-shrink:0}
.tf-tpl-run-btn{background:var(--primary);color:#fff;border:none;padding:6px 12px;border-radius: 50px;cursor:pointer;font-size:12px;font-weight:600}
.tf-tpl-del-btn{background:none;border:none;cursor:pointer;color:var(--red);padding:4px}
.edit-tpl-item{display:flex;gap:8px;margin-bottom:8px;align-items:center}

/* SMART CATEGORY CONFIDENCE COLORS */
.chat-preview-confidence.high{color:#34c759}
.chat-preview-confidence.medium{color:#ff9500}
.chat-preview-confidence.low{color:#ff3b30}

/* CHAT RECEIPT BUTTON (SVG states) */
.chat-receipt-btn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:100%;padding:16px 20px;
  border:none;border-radius:16px;
  background:var(--card);border:1.5px solid var(--border);
  color:var(--text);font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;overflow:hidden;
}
.chat-receipt-btn:active{transform:scale(.98);}
.chat-receipt-btn #chatReceiptIcon{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;transition:all .3s;
}
.chat-receipt-btn #chatReceiptIcon svg{width:24px;height:24px;stroke:currentColor;}
.chat-receipt-btn.loading{
  border-color:var(--primary);color:#fff;
  background:var(--primary);pointer-events:none;
}
.chat-receipt-btn.loading #chatReceiptIcon svg{
  animation:spin 1s linear infinite;stroke:#fff;
}
.chat-receipt-btn.success{
  border-color:#34c759;color:#34c759;
  background:rgba(52,199,89,.08);pointer-events:none;
}
.chat-receipt-btn.success #chatReceiptIcon svg{stroke:#34c759;}

/* DID YOU MEAN? ALTERNATIVES */
.chat-cat-suggestions{
  display:flex;gap:6px;flex-wrap:wrap;padding:6px 0;
}
.chat-cat-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius: 50px;font-size:12px;font-weight:500;
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.15);
  color:var(--primary);cursor:pointer;transition:all .15s;
}
.chat-cat-chip:active{transform:scale(.96);opacity:.8;}

/* AI badge on suggestion chip */
.ai-badge{
  font-size:9px;font-weight:700;padding:1px 5px;border-radius: 50px;
  background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;
  letter-spacing:.5px;margin-left:2px;vertical-align:middle;
}

.chat-cat-suggestions[data-alt="1"]{
  border-top:1px solid var(--border);
  padding-top:8px;
  margin-top:4px;
}
.chat-cat-suggestions[data-alt="1"]::before{
  content:'Kurang yakin, mungkin maksudnya:';
  font-size:11px;
  color:var(--text2);
  display:block;
  margin-bottom:4px;
}

/* Invest Quick Action Buttons */
.inv-qa-btn{
  display:flex;align-items:center;gap:6px;padding:12px 16px;
  background:var(--card);border:1.5px solid var(--border);border-radius:14px;
  font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s;
  white-space:nowrap;min-height:44px;
}
.inv-qa-btn:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(59,130,246,.1)}
.inv-qa-btn:active{transform:scale(.96)}
.inv-qa-btn span:first-child{font-size:18px;line-height:1}

/* Donut Chart Center Text - auto syncs with theme via CSS var */
.inv-donut-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
  font-weight:bold;font-size:11px;color:var(--text);
}

/* Analytics Pie Chart Center Text - same pattern */
.pie-donut-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);
  text-align:center;pointer-events:none;line-height:1.3;width:80%;
}
.pie-donut-center .pie-total{
  display:block;font-weight:700;font-size:16px;color:var(--text);
}
.pie-donut-center .pie-subtitle{
  display:block;font-weight:500;font-size:11px;color:var(--text2);margin-top:2px;
}

/* Top Gainer/Loser Cards */
.inv-mover-card{
  border:1px solid var(--border);border-radius:16px;padding:14px;position:relative;overflow:hidden;
}
.inv-mover-card.gain{border-left:3px solid #10b981}
.inv-mover-card.loss{border-left:3px solid #ef4444}
.inv-mover-symbol{font-size:16px;font-weight:800;color:var(--text)}
.inv-mover-pct{font-size:14px;font-weight:700;margin-top:2px}
.inv-mover-card.gain .inv-mover-pct{color:#10b981}
.inv-mover-card.loss .inv-mover-pct{color:#ef4444}
.inv-mover-name{font-size:11px;color:var(--text3);margin-top:2px}
/* Quick Action Button Colors (SVG inherits color) */
.qa-btn-dca{color:#007AFF}
.qa-btn-div{color:#10b981}
.qa-btn-snap{color:#8b5cf6}

.menu-btn-modern {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s ease;
}
.menu-btn-modern:hover {
  background: rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.menu-btn-modern:active {
  transform: scale(0.95);
}
.menu-btn-modern .material-icons {
  font-size: 20px;
}

/* ========== MODERN HEADER GLASS ========== */
.header-modern {
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.header-gradient {
  display: none;
}

.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-icon-glow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-icon-glow::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
  border-radius: 12px;
  filter: blur(6px);
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.app-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  position: relative;
}

.app-icon .material-icons {
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 12px rgba(96,165,250,0.8);
}

.header-text {
  display: flex;
  align-items: center;
}
.header-logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

/* Dark/Light mode logo swap */
.header-logo-light { display: block; }
.header-logo-dark { display: none; }
.dark .header-logo-light { display: none; }
.dark .header-logo-dark { display: block; }

.header-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
  transition: color .35s ease;
}

.header-subtitle {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text3);
  transition: color .35s ease;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-btn {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 0.2s ease;
  position: relative;
}

.header-btn:hover {
  transform: translateY(-1px);
}

.header-btn:active {
  transform: scale(0.95);
}

.header-btn .material-icons {
  font-size: 20px;
}

.header-btn .notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(239,68,68,0.5);
}

/* Dark mode - glass header */
.dark .header-modern {
  background: rgba(15,17,23,0.45);
  border-bottom-color: rgba(255,255,255,0.04);
}

.dark .header-btn {
  background: transparent;
  border: none;
  color: var(--text);
}

.dark .menu-btn-modern {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}
.dark .menu-btn-modern:hover {
  background: rgba(255,255,255,0.15);
}

.dark .header-subtitle {
  color: rgba(255,255,255,0.4);
}


.menu-btn-modern svg,
.header-btn svg {
  width: 20px;
  height: 20px;
  color: var(--text);
  flex-shrink: 0;
  transition: color .35s ease;
}

.app-icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
  stroke: #fff;
}

@media (max-width: 480px) {
  .menu-btn-modern svg,
  .header-btn svg { width: 18px; height: 18px; }
  .app-icon svg { width: 20px; height: 20px; }
}

/* Responsive */
@media (max-width: 480px) {
  .header-content { padding: 14px 16px; }
  .app-icon { width: 36px; height: 36px; border-radius: 8px; }
  .app-icon .material-icons { font-size: 20px; }
  .header-title { font-size: 20px; }
  .header-subtitle { font-size: 10px; }
  .header-btn { width: 36px; height: 36px; border-radius: 50px; }
}

/* Footer */
.app-footer{
  text-align:center;
  padding:20px 16px 24px;
  background:transparent;
  border-top:1px solid var(--border);
}
.app-footer p{
  font-size:11px;
  font-weight:500;
  color:var(--text2);
  opacity:.6;
  margin:0;
  line-height:1.4;
}
.dark .app-footer p{color:rgba(255,255,255,.5)}
@media (max-width: 480px){
  .app-footer{padding:16px 12px 20px}
}
/* ════════════════════════════════════════════
   UI POLISH: Expand/collapse animations, empty states, loading skeletons
   ════════════════════════════════════════════ */

/* Smooth expand/collapse */
.tx-expand-panel{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 12px;
  gap:0;
  transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .3s ease;
}
.tx-item.tx-expanded .tx-expand-panel{
  display:block;
  max-height:800px;
  opacity:1;
  padding:0 12px 12px;
  gap:8px;
}

/* Chevron rotation on expand */
.tx-expand-arrow{transition:transform .25s ease;display:inline-block}
.tx-item.tx-expanded .tx-expand-arrow{transform:rotate(180deg)}

/* Better empty state */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;min-height:200px;
  animation:emptyFadeIn .5s ease both;
}
@keyframes emptyFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.empty-state-icon{font-size:56px;opacity:.3;margin-bottom:12px}
.empty-state-title{font-size:16px;font-weight:700;color:var(--text-secondary);margin-bottom:4px}
.empty-state-desc{font-size:13px;color:var(--text-muted);line-height:1.5;max-width:280px}
.empty-state-action{margin-top:16px;font-size:13px;color:var(--accent);cursor:pointer;font-weight:600}
.empty-state-action:hover{text-decoration:underline}

/* Skeleton loading */
.skeleton{
  background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;width:80%;margin:8px 0}
.skeleton-text.short{width:50%}
.skeleton-circle{border-radius:50%;width:36px;height:36px}
.skeleton-rect{height:64px;width:100%}

/* Loading overlay */
.loading-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);backdrop-filter:blur(2px);z-index:10;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.loading-spinner{
  width:32px;height:32px;border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;
}

/* Pulse dot for live indicators */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative;display:inline-block}
.pulse-dot::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:rgba(34,197,94,.4);animation:pulse 1.5s ease infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}

/* Improved transition for page switches */
.page{animation:pageSlideIn .3s ease both}
@keyframes pageSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Smooth number counter animation */
.counter-value{transition:all .3s ease}

/* Sidebar card wrapper for Budget & Goals mini */
.sidebar-card .card-hd{padding:16px 16px 12px}
.sidebar-card .card-hd .card-ttl{font-size:15px;font-weight:700}
.sidebar-card .card-hd a{font-size:12px;color:var(--primary);font-weight:600;text-decoration:none;cursor:pointer}
.sidebar-card .card-hd a:hover{text-decoration:underline}
.sidebar-card .goals-mini{padding:0 16px 16px}
.card .empty{padding:24px 16px;text-align:center;color:var(--text3);font-size:13px}
.card{transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.dark .card:hover{box-shadow:0 4px 16px rgba(0,0,0,.3)}
.dash-main .card + .card{margin-top:16px}

/* ========== ApexCharts Styling ========== */
.apexcharts-canvas{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important}
.apexcharts-svg{background:transparent !important}
.apexcharts-tooltip{background:rgba(15,23,42,.92) !important;border:none !important;border-radius:12px !important;box-shadow:0 4px 16px rgba(0,0,0,.2) !important;padding:10px 14px !important;font-size:12px !important;color:#fff !important}
.apexcharts-tooltip .apexcharts-tooltip-title{background:rgba(255,255,255,.08) !important;border-bottom:none !important;padding:6px 10px !important;font-size:11px !important;font-weight:600 !important}
.dark .apexcharts-tooltip{background:rgba(30,30,34,.95) !important;box-shadow:0 4px 16px rgba(0,0,0,.5) !important}
.apexcharts-tooltip .apexcharts-tooltip-text-y-value{color:#fff !important;font-weight:700 !important}
.apexcharts-tooltip .apexcharts-tooltip-text-y-label{color:rgba(255,255,255,.7) !important}
.apexcharts-xaxistooltip{background:rgba(15,23,42,.92) !important;color:#fff !important;border:none !important;border-radius:6px !important;font-size:11px !important;padding:4px 8px !important}
.apexcharts-yaxistooltip{background:rgba(15,23,42,.92) !important;color:#fff !important;border:none !important;border-radius:6px !important;font-size:11px !important}
.dark .apexcharts-xaxistooltip,.dark .apexcharts-yaxistooltip{background:rgba(30,30,34,.95) !important}
.apexcharts-gridline{stroke-dasharray:3 !important}
.apexcharts-bar-series .apexcharts-series path{transition:path .3s ease !important}
.apexcharts-legend-text{font-size:12px !important;padding-left:4px !important}
.apexcharts-datalabels-group{display:none !important}
.apexcharts-annotation-label{font-size:10px !important}

/* Fix ApexCharts overflow in containers */
.analytics-chart-wrap,.nw-chart-wrap,.budget-chart-wrap,.chart-canvas-wrap{overflow:hidden}

/* New pages CSS */
.page-hd-btn {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: none;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}
.page-hd-btn .material-icons {
    font-size: 22px;
}
#pgSplit .card, #pgForecast .card, #pgPatterns .card {
    margin-bottom: 12px;
}
.form-inp.split-person-name {
    margin-top: 6px;
}
.health-factor-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--bg);
}
.health-factor-name {
    font-size: 14px;
    font-weight: 700;
}
.health-factor-bar {
    height: 10px;
    background: var(--bg);
    border-radius: 5px;
    overflow: hidden;
}
.health-factor-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}
.health-factor-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text3);
}

/* Rotating spinner for loading states */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.material-icons.rotating {
  animation: spin 1s linear infinite;
}

/* Category card tap animation */
.cat-tap-card .chevron { transition: transform 0.2s; }
.cat-tap-card.tap-open .chevron { transform: rotate(90deg); }

/* ═══════════════════════════════════════
   REKAP SUMMARY — Compact Grid (2-col, dense)
   ═══════════════════════════════════════ */
.rekap-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.rekap-summary-card {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.rekap-summary-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rekap-summary-icon .material-icons { font-size: 18px; }
.rekap-summary-label {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.2;
  margin-bottom: 2px;
}
.rekap-summary-value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rekap-summary-card .rekap-hero-change {
  font-size: 10px;
  margin-top: 1px;
}
/* Responsive: 1 column on small screens */
@media (max-width: 360px) {
  .rekap-summary-grid { grid-template-columns: 1fr; }
}
/* Hide old rekap-hero CSS */
.rekap-hero-row { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   GOAL CARDS — REDESIGNED (v2)
   Compact, modern, flat design. Same HTML, new CSS.
   ═══════════════════════════════════════════════════════════ */

/* Card — flat, subtle top accent instead of left bar */
.goal-card {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px 14px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Replace left accent with top color strip */
.goal-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  bottom: auto;
  border-radius: 0;
}

/* Header row: emoji + name + status */
.goal-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 2px;
}

/* Make the emoji look like an avatar circle */
.goal-name {
  font-size: 13px;
}
.goal-name::before {
  content: '';
  display: none;
}

/* Style the emoji inside goal-name as an icon badge */
.goal-info > .goal-name {
  position: relative;
}

/* Status tag */
.goal-status-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: capitalize;
  flex-shrink: 0;
}

/* Subtitle / deadline */
.goal-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
  margin-bottom: 8px;
}

/* Progress bar — thicker, with visible track */
.goal-progress-wrap {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  margin-top: 0;
  overflow: hidden;
}

.goal-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}

/* Amounts row — better hierarchy */
.goal-amounts {
  font-size: 12px;
  color: var(--text3);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Current amount: big & bold */
.goal-amounts span:first-child {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

/* "dari Rp X" — small */
.goal-amounts span:nth-child(2) {
  font-size: 11px;
  color: var(--text3);
}

/* Percentage: right-aligned badge */
.goal-amounts span:nth-child(3) {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.04);
}

/* Remaining text */
.goal-remaining {
  font-size: 11px;
  color: var(--text2);
  margin-top: 6px;
  font-style: italic;
}

/* Milestone bar — compact but visible */
.milestone-bar {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 0;
}

.milestone-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  font-weight: 700;
  border: 1.5px solid var(--border);
  transition: all .3s;
}

.milestone-dot.done {
  background: #10b981;
  border-color: #10b981;
}

.milestone-label {
  font-size: 8px;
  color: var(--text3);
  margin-top: 2px;
  white-space: nowrap;
}

.milestone-label.done {
  color: #10b981;
  font-weight: 600;
}

.milestone-line {
  flex: 1;
  height: 1.5px;
  background: var(--border);
  min-width: 16px;
  margin: 0 3px;
  margin-bottom: 12px;
}

.milestone-line.done {
  background: #10b981;
}

/* Actions row */
.goal-actions-row {
  margin-top: 6px;
}

.goal-act-btn {
  padding: 7px 10px;
  border-radius: 50px;
  font-size: 11px;
}

/* Dark mode */
.dark .goal-card {
  border-color: rgba(255,255,255,.06);
}

.dark .goal-amounts span:nth-child(3) {
  background: rgba(255,255,255,.06);
}

.profile-setting-desc {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}

/* Budget Alerts */
.budget-alerts-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.budget-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  border-left: 4px solid;
  animation: slideInDown 0.3s ease;
}

.budget-alert-banner.critical {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, var(--card) 100%);
}

.budget-alert-banner.warning {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, var(--card) 100%);
}

.budget-alert-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.budget-alert-banner.critical .budget-alert-icon {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.budget-alert-banner.warning .budget-alert-icon {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}

.budget-alert-icon .material-icons {
  font-size: 22px;
}

.budget-alert-content {
  flex: 1;
  min-width: 0;
}

.budget-alert-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.budget-alert-banner.critical .budget-alert-title {
  color: #ef4444;
}

.budget-alert-banner.warning .budget-alert-title {
  color: #f59e0b;
}

.budget-alert-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.4;
}

.budget-alert-action {
  margin-top: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.budget-alert-banner.critical .budget-alert-action {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.budget-alert-banner.critical .budget-alert-action:hover {
  background: rgba(239,68,68,0.25);
}

.budget-alert-banner.warning .budget-alert-action {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}

.budget-alert-banner.warning .budget-alert-action:hover {
  background: rgba(245,158,11,0.25);
}

.budget-alert-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  transition: all 0.2s;
}

.budget-alert-dismiss:hover {
  background: var(--bg);
  color: var(--text);
}

.budget-alert-dismiss .material-icons {
  font-size: 18px;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.category-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--card);
  border-radius: 10px;
  margin-bottom: 8px;
  gap: 12px;
}

.category-tx-info {
  flex: 1;
  min-width: 0;
}

.category-tx-desc {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-tx-date {
  font-size: 12px;
  color: var(--text3);
}

.category-tx-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* Custom Confirm Modal */
.custom-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.custom-confirm-card {
  background: var(--card);
  border-radius: 20px;
  padding: 32px 24px 24px;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
  text-align: center;
}

.custom-confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239,68,68,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.custom-confirm-icon .material-icons {
  font-size: 32px;
  color: #ef4444;
}

.custom-confirm-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

.custom-confirm-message {
  font-size: 14px;
  color: var(--text2);
  margin: 0 0 24px;
  line-height: 1.5;
}

.custom-confirm-actions {
  display: flex;
  gap: 12px;
}

.custom-confirm-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-confirm-btn.cancel {
  background: var(--bg);
  color: var(--text);
}

.custom-confirm-btn.cancel:hover {
  background: var(--border);
}

.custom-confirm-btn.confirm {
  background: #ef4444;
  color: #fff;
}

.custom-confirm-btn.confirm:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === COSMETIC: Dompet WA Style Override === */
.tx-card-item{border-radius:20px !important;box-shadow:0 4px 20px -4px rgba(59,130,246,.08),0 2px 8px -2px rgba(0,0,0,.06) !important;margin-bottom:10px !important;border:1px solid var(--border) !important;background:#fff !important;transition:box-shadow .2s ease,transform .15s ease !important}
.dark .tx-card-item{background:#151f35 !important}
.tx-card-item:active{transform:scale(.995) !important}
.tx-item{border-radius:14px !important;box-shadow:0 4px 16px -4px rgba(59,130,246,.06),0 2px 6px -2px rgba(0,0,0,.04) !important;margin-bottom:6px !important;border:1px solid var(--border) !important;background:#fff !important}
.dark .tx-item{background:#151f35 !important}
.bal-card{border-radius:22px !important;box-shadow:0 8px 32px -8px rgba(59,130,246,.18),0 2px 8px -4px rgba(59,130,246,.08) !important;border:1px solid var(--border) !important;background:#fff !important}
.dark .bal-card{background:#151f35 !important}
.summary-card,.bills-summary-card{border-radius:20px !important;box-shadow:0 4px 20px -4px rgba(59,130,246,.08),0 2px 8px -2px rgba(0,0,0,.06) !important;border:1px solid var(--border) !important;background:#fff !important}
.dark .summary-card,.dark .bills-summary-card{background:#151f35 !important}
.analytics-card,.analytics-insight-card,.analytics-hero-card{border-radius:20px !important;box-shadow:0 4px 20px -4px rgba(59,130,246,.08),0 2px 8px -2px rgba(0,0,0,.06) !important;border:1px solid var(--border) !important;background:#fff !important}
.dark .analytics-card,.dark .analytics-insight-card,.dark .analytics-hero-card{background:#151f35 !important}
.btn-primary,.tx-btn-primary{border-radius:50px !important;box-shadow:0 4px 14px -2px rgba(59,130,246,.45) !important;font-weight:600 !important;border:none !important;transition:all .2s ease !important}
.btn-primary:hover,.tx-btn-primary:hover{background:#2563eb !important;box-shadow:0 6px 20px -2px rgba(59,130,246,.55) !important;transform:translateY(-1px) !important}
.btn-secondary,.tx-btn-outline{border-radius:50px !important;border:1.5px solid var(--border) !important;font-weight:600 !important;background:transparent !important;color:var(--primary) !important;transition:all .2s ease !important}
.btn-secondary:hover,.tx-btn-outline:hover{background:var(--primary-light) !important;border-color:var(--primary) !important}
.btn-danger{border-radius:50px !important;box-shadow:0 4px 14px -2px rgba(239,68,68,.35) !important;border:none !important}
input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="tel"],textarea,select{border:1.5px solid var(--border) !important;border-radius:12px !important;background:#fff !important;color:var(--text) !important;transition:border-color .2s ease,box-shadow .2s ease !important}
.chat-input-bar .chat-input-field,#chatInput{border:1px solid var(--border) !important;border-radius:12px !important;background:transparent !important;box-shadow:none !important;color:var(--text);padding:12px !important;min-height:44px !important;height:auto;line-height:20px !important;display:block}
.chat-input-bar .chat-input-field:focus,#chatInput:focus{border-color:#34c759 !important;box-shadow:0 0 0 3px rgba(52,199,89,.15) !important;outline:none !important}
.dark .chat-input-bar .chat-input-field:focus,.dark #chatInput:focus{border-color:#34c759 !important;box-shadow:0 0 0 3px rgba(52,199,89,.25) !important}
.chat-input-bar .chat-input-field::placeholder,#chatInput::placeholder{color:var(--text3) !important;-webkit-text-fill-color:var(--text3) !important;opacity:1 !important}
.chat-input-bar .chat-input-field::-webkit-input-placeholder,#chatInput::-webkit-input-placeholder{color:var(--text3) !important;opacity:1 !important}
.dark input[type="text"],.dark input[type="number"],.dark input[type="date"],.dark input[type="email"],.dark input[type="password"],.dark input[type="tel"],.dark textarea,.dark select{background:#151f35 !important}
.dark .chat-input-bar .chat-input-field,.dark #chatInput{background:transparent !important;color:var(--text)}
.dark .chat-input-bar .chat-input-field::placeholder,.dark #chatInput::placeholder{color:var(--text3) !important;-webkit-text-fill-color:var(--text3) !important}
.dark #chatInput::-webkit-input-placeholder{color:var(--text3) !important;opacity:1 !important}
input:focus,textarea:focus,select:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(59,130,246,.15) !important}
.badge-pulse,.tx-wallet-pill,.budget-badge,.budget-pill{border-radius:50px !important;font-weight:600 !important}
.side-item,.side-nav-item{border-radius:14px !important;transition:background .15s ease !important}
.side-item.active,.side-nav-item.active{background:var(--primary-light) !important}
.modal,.modal-content,.popup-content,.bill-modal{border-radius:22px !important;box-shadow:0 24px 80px rgba(0,0,0,.15) !important}
.chart-wrap,.analytics-chart-wrap,.analytics-pie-wrap{border-radius:16px !important}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text3);border-radius:3px}

/* ================================================================
   Fintel v2 Dev — Modern Cosmetic Redesign (Dompet WA Style)
   Theme: BLUE | Cosmetic ONLY | Safe to delete
   ================================================================ */

/* --- Card Polish: all transaction items --- */
.tx-card-item {
  background: var(--card) !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px -2px rgba(59,130,246,.06), 0 1px 4px -1px rgba(0,0,0,.04) !important;
  margin-bottom: 10px !important;
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease !important;
}
.tx-card-item:active { transform: scale(.995); box-shadow: 0 1px 6px -1px rgba(59,130,246,.1) !important; }
.tx-card-item:hover { border-color: rgba(59,130,246,.2); }
.dark .tx-card-item { background: var(--card) !important; }

/* --- Compact transaction items --- */
.tx-item {
  background: var(--card) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 10px -2px rgba(59,130,246,.05), 0 1px 3px -1px rgba(0,0,0,.04) !important;
  margin-bottom: 6px !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.tx-item:hover { border-color: rgba(59,130,246,.2); }
.dark .tx-item { background: var(--card) !important; }

/* --- Balance card: hero element --- */
.bal-card {
  background: var(--card) !important;
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px -8px rgba(59,130,246,.18), 0 2px 8px -4px rgba(59,130,246,.08) !important;
  transition: box-shadow .3s ease, transform .2s ease !important;
}
.bal-card:active { transform: scale(.997); }
.dark .bal-card { background: var(--card) !important; }

/* --- Summary cards --- */
.summary-card, .bills-summary-card, .cal-summary {
  background: var(--card) !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px -2px rgba(59,130,246,.06), 0 1px 4px -1px rgba(0,0,0,.04) !important;
}
.dark .summary-card, .dark .bills-summary-card, .dark .cal-summary { background: var(--card) !important; }

/* --- Analytics cards --- */
.analytics-card, .analytics-insight-card, .analytics-hero-card,
.info-card, .chart-card, .pie-card {
  background: var(--card) !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px -2px rgba(59,130,246,.06), 0 1px 4px -1px rgba(0,0,0,.04) !important;
}
.dark .analytics-card, .dark .analytics-insight-card, .dark .analytics-hero-card,
.dark .info-card, .dark .chart-card, .dark .pie-card { background: var(--card) !important; }

/* --- Buttons: pill shape + modern shadows --- */
.btn-primary, .tx-btn-primary, button[style*="background: var(--primary)"] {
  border-radius: 50px !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px -2px rgba(59,130,246,.45) !important;
  transition: all .2s ease !important;
}
.btn-primary:hover, .tx-btn-primary:hover {
  background: #2563eb !important;
  box-shadow: 0 6px 20px -2px rgba(59,130,246,.55) !important;
  transform: translateY(-1px) !important;
}
.btn-secondary, .tx-btn-outline {
  border-radius: 50px !important;
  border: 1.5px solid var(--border) !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--primary) !important;
  transition: all .2s ease !important;
}
.btn-secondary:hover, .tx-btn-outline:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
}
.btn-danger {
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 4px 14px -2px rgba(239,68,68,.35) !important;
}

/* --- Input fields: clean & modern --- */
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], input[type="tel"],
textarea, select {
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.dark input[type="text"], .dark input[type="number"], .dark input[type="date"],
.dark input[type="email"], .dark input[type="password"], .dark input[type="tel"],
.dark textarea, .dark select {
  background: var(--card) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  outline: none !important;
}
/* === DATE INPUT OVERFIX: prevent icon/text overlap === */
/* Use background icon instead of positioned element */
.filter-date-input, input.filter-date-input, input[type=date].filter-sel2, input[type=date].filter-date-input {
  padding: 10px 36px 10px 46px !important;
  background-image: url(data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2394a3b8%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27%3E%3C/rect%3E%3Cline x1=%2716%27 y1=%272%27 x2=%2716%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%278%27 y1=%272%27 x2=%278%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%273%27 y1=%2710%27 x2=%2721%27 y2=%2710%27%3E%3C/line%3E%3C/svg%3E) !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 18px 18px !important;
}
.dark .filter-date-input, .dark input.filter-date-input, .dark input[type=date].filter-sel2, .dark input[type=date].filter-date-input {
  padding-left: 46px !important;
  padding-right: 36px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* Hide the old positioned calendar icon since we use background-image now */
.filter-card-body .date-input-wrap .date-cal-icon {
  display: none !important;
}


/* --- Badges / Pills --- */
.badge-pulse, .tx-wallet-pill, .budget-badge, .budget-pill,
.analytics-badge {
  border-radius: 50px !important;
  font-weight: 600 !important;
}

/* --- Sidebar / Menu --- */
.side-menu, .side-nav {
  border-radius: 20px 0 0 20px !important;
}
.side-item, .side-nav-item {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: background .15s ease, color .15s ease !important;
}
.side-item.active, .side-nav-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.side-item:hover, .side-nav-item:hover {
  background: rgba(59,130,246,.06) !important;
}
.dark .side-item:hover, .dark .side-nav-item:hover {
  background: rgba(59,130,246,.1) !important;
}

/* --- Date separator --- */
.date-sep {
  border-radius: 50px !important;
  background: rgba(59,130,246,.06) !important;
  border: 1px solid rgba(59,130,246,.1) !important;
}
.dark .date-sep {
  background: rgba(59,130,246,.1) !important;
  border-color: rgba(59,130,246,.15) !important;
}

/* --- Modals / Dialogs --- */
.modal, .modal-content, .popup-content, .bill-modal {
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08) !important;
}

/* --- Chat preview section --- */
.chat-preview-card {
  border-radius: 20px !important;
  box-shadow: 0 4px 20px -4px rgba(59,130,246,.1) !important;
}

/* --- Chart containers --- */
.chart-wrap, .analytics-chart-wrap, .analytics-pie-wrap,
.pie-chart-container, .donut-wrap {
  border-radius: 16px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}
.dark .chart-wrap, .dark .analytics-chart-wrap, .dark .analytics-pie-wrap {
  background: var(--card) !important;
}

/* --- Scrollbar: slim & modern --- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text2); }

/* --- Selection highlight --- */
::selection { background: rgba(59,130,246,.2); color: var(--primary-dark); }

/* --- Smooth page transitions --- */
.page { animation: fadeUp .3s cubic-bezier(.4,0,.2,1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Fintel v2 Dev — POLISH ROUND 2 (Micro-interactions & Details)
   Theme: BLUE | Cosmetic ONLY | Safe to delete
   ================================================================ */

/* --- Quick Actions (horizontal scroll buttons) --- */
.quick-actions {
  padding: 0 20px 20px !important;
  gap: 8px !important;
  scrollbar-width: none !important;
}
.quick-actions::-webkit-scrollbar { display: none !important; }
.quick-actions button, .quick-actions .qa-btn, [class*="quick-btn"] {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.04) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
  color: var(--text) !important;
}
.quick-actions button:hover, [class*="quick-btn"]:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px -2px rgba(59,130,246,.12) !important;
  transform: translateY(-1px) !important;
}
.quick-actions button:active { transform: scale(.96) !important; }
.quick-actions .material-icons {
  font-size: 18px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;
}

/* --- Section titles: modern underline --- */
.section-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
  letter-spacing: .02em !important;
  padding: 0 20px 0 0 !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent) !important;
}
.section-title .material-icons {
  font-size: 18px !important;
  color: var(--primary) !important;
}

/* --- Amount colors: better dark mode --- */
.amt { font-weight: 700 !important; font-size: 14px !important; }
.green { color: #10b981 !important; }
.dark .green { color: #34d399 !important; }
.red { color: #ef4444 !important; }
.dark .red { color: #f87171 !important; }

/* --- Hero amount --- */
.hero-amount {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}

/* --- Balance circle/ico --- */
.bal-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.1) !important;
}
.bal-ico { font-size: 18px !important; }

/* --- Transaction list spacing --- */
.tx-list { display: flex !important; flex-direction: column !important; gap: 6px !important; }

/* --- Search input --- */
.search-input {
  width: 100% !important;
  padding: 12px 42px 12px 16px !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  transition: all .2s ease !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.04) !important;
}
.search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 4px 12px -2px rgba(59,130,246,.08) !important;
  outline: none !important;
}
.dark .search-input { background: var(--card) !important; }

/* --- Wallet pills --- */
.tx-wallet-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(59,130,246,.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(59,130,246,.12) !important;
  transition: all .15s ease !important;
}
.tx-wallet-pill:hover { background: rgba(59,130,246,.14) !important; }
.dark .tx-wallet-pill {
  background: rgba(59,130,246,.15) !important;
  color: #60a5fa !important;
  border-color: rgba(59,130,246,.2) !important;
}

/* --- Goal cards --- */
.goal-card {
  background: var(--card) !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px -2px rgba(59,130,246,.06), 0 1px 4px -1px rgba(0,0,0,.04) !important;
  padding: 18px 20px !important;
  transition: box-shadow .2s ease, transform .15s ease !important;
}
.goal-card:hover { box-shadow: 0 8px 24px -6px rgba(59,130,246,.12) !important; }

/* --- Progress bars --- */
.progress-bar, .progress-fill, [class*="progress"] {
  border-radius: 50px !important;
  overflow: hidden !important;
}
.progress-fill, [class*="progress-fill"] {
  background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
  transition: width .6s cubic-bezier(.4,0,.2,1) !important;
  border-radius: 50px !important;
}

/* --- Empty state --- */
.empty-state { padding: 48px 24px !important; text-align: center !important; }
.empty-state .material-icons {
  font-size: 56px !important;
  color: var(--text3) !important;
  margin-bottom: 16px !important;
  opacity: .5 !important;
}

/* --- Chat preview rows --- */
.chat-preview-row, [class*="chat-preview-row"] {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: background .15s ease !important;
  margin-bottom: 4px !important;
}
.chat-preview-row:hover, [class*="chat-preview-row"]:hover { background: var(--primary-light) !important; }

/* --- Analytics badge --- */
.analytics-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(59,130,246,.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(59,130,246,.1) !important;
}

/* --- Calendar items --- */
.cal-item, .calendar-item, [class*="cal-item"] {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  transition: background .15s ease, box-shadow .2s ease !important;
  margin-bottom: 4px !important;
}
.cal-item:hover, .calendar-item:hover {
  background: var(--primary-light) !important;
  box-shadow: 0 2px 8px -2px rgba(59,130,246,.08) !important;
}

/* --- Bill items --- */
.bills-item, [class*="bills-item"] {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  transition: all .2s ease !important;
  margin-bottom: 6px !important;
}
.bills-item:hover {
  background: var(--primary-light) !important;
  transform: translateX(2px) !important;
}

/* --- Modal animation --- */
.modal-content {
  animation: modalScaleIn .25s cubic-bezier(.4,0,.2,1) forwards !important;
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Links --- */
a { color: var(--primary) !important; text-decoration: none !important; transition: color .15s ease !important; }
a:hover { color: var(--primary-dark) !important; }

/* --- Tabs --- */
.tabs, .tab-bar, .segmented, [class*="tab"] { gap: 4px !important; }
.tab, .tab-item, [class*="tab-item"] {
  border-radius: 50px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
}
.tab.active, .tab-item.active {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -2px rgba(59,130,246,.3) !important;
}

/* --- Summary rows --- */
.summary-row, .bills-summary-row, [class*="summary-row"] {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: background .15s ease !important;
}
.summary-row:hover { background: var(--primary-light) !important; }

/* --- TX card description polish --- */
.tx-card-desc { font-weight: 600 !important; color: var(--text) !important; }
.tx-card-meta { gap: 6px !important; margin-top: 4px !important; }
.tx-card-cat { font-size: 12px !important; color: var(--text3) !important; }
.tx-card-amt { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.tx-card-amt.green { color: #10b981 !important; }
.tx-card-amt.red { color: #ef4444 !important; }
.dark .tx-card-amt.green { color: #34d399 !important; }
.dark .tx-card-amt.red { color: #f87171 !important; }

/* --- Bottom nav active --- */
.app-footer .nav-item.active, [class*="nav-item"].active {
  color: var(--primary) !important;
}
.app-footer .nav-item.active .material-icons {
  font-variation-settings: "FILL" 1 !important;
}

/* === BUTTON PILL OVERRIDE (highest specificity) === */
.btn-primary, .btn-secondary, .btn-danger, .btn-success,
.tx-btn-primary, .tx-btn-outline, .tx-btn-danger,
.qa-btn, .action-btn, .bills-add-fab,
.quick-actions button, .quick-actions .qa-btn,
button[class*="btn"], button[class*="action"],
button[class*="tx-btn"], button[class*="qa"],
.modal button, .popup button,
.card button, .summary-card button,
header button, footer button,
.app-header button,
input[type="submit"], input[type="button"] {
  border-radius: 50px !important;
}

/* === FINAL POLISH: remaining details === */

/* FAB hover glow */
.bills-add-fab:hover {
  box-shadow: 0 6px 20px rgba(59,130,246,.4) !important;
  transform: scale(1.05) !important;
}
.bills-add-fab:active {
  transform: scale(.95) !important;
}

/* Modal backdrop: glass overlay */
.modal-overlay {
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Small circular buttons (close, etc) */
button[style*=border-radius:6px], .close-btn, .btn-close {
  border-radius: 50% !important;
}

/* Filter select focus */
.filter-sel:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}

/* Smooth number transitions for amounts */
.hero-amount, .tx-card-amt, .bal-amount {
  font-variant-numeric: tabular-nums;
}

/* Subtle card gradient on hover */
.tx-card-item:hover {
  background: linear-gradient(135deg, var(--card), rgba(59,130,246,.02)) !important;
}

/* Dark mode: subtle card border glow */
.dark .tx-card-item {
  border-color: rgba(59,130,246,.1) !important;
}
.dark .bal-card {
  border-color: rgba(59,130,246,.15) !important;
  box-shadow: 0 8px 32px -8px rgba(59,130,246,.15), 0 2px 8px -4px rgba(59,130,246,.1) !important;
}

/* Smooth focus for all interactive elements */
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible {
  outline: none !important;
}

/* Print-friendly: hide decorative elements */
@media print {
  .app-footer, .header, .quick-actions, .bills-add-fab { display: none !important; }
  body { background: #fff !important; }
  .tx-card-item, .bal-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* === CATCH-ALL: Ensure ALL interactive elements are polished === */
[class*="btn"], [class*="action"], [class*="pill"], [class*="chip"],
[class*="badge"], [class*="filter"], [class*="select"], [class*="tab"],
[class*="toggle"], [class*="switch"], [class*="fab"], [class*="add-btn"],
[class*="quick-btn"], [class*="qa-"], [class*="tx-btn"], [class*="bills-"],
[class*="calendar-btn"], [class*="budget-btn"], [class*="goal-btn"],
[class*="invest-btn"], [class*="health-btn"] {
  border-radius: 50px !important;
  transition: all 0.2s ease !important;
}

/* Small icon buttons: circle */
button[style*="width:28px"], button[style*="width: 28px"],
button[style*="height:28px"], button[style*="height: 28px"],
.btn-icon, .icon-btn {
  border-radius: 50% !important;
}

/* === EMPTY STATE — ULTRA COMPACT === */
.empty{background:rgba(59,130,246,.02);border:1.5px dashed var(--border);border-radius:12px;margin:4px 0;padding:16px 12px}
.empty .material-icons{font-size:28px;display:block;margin:0 auto 6px;opacity:.25}
.empty .empty-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:4px}
.empty .empty-desc{font-size:11px;color:var(--text3);margin-bottom:0}

/* Dark mode empty states */
.dark .empty{background:rgba(59,130,246,.04)}
.dark .empty .material-icons{opacity:.2}

/* Override all specific empty locations */
/* Override all specific empty locations */
.card .empty{margin:0;padding:14px 10px}

/* === EMPTY STATE ACTION BUTTONS === */
.empty-action{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;margin-top:8px!important;padding:5px 14px!important;border-radius:var(--radius-pill)!important;background:transparent!important;color:var(--primary)!important;font-size:11px!important;font-weight:600!important;border:1.5px solid var(--primary)!important;cursor:pointer!important;transition:all .2s;letter-spacing:.01em;line-height:1.2!important}
.empty-action:hover{background:var(--primary);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px rgba(59,130,246,.2)}
.empty-action:active{transform:translateY(0)}
.empty-action .material-icons{font-size:15px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:normal!important;margin:0!important;padding:0!important;position:static!important;top:auto!important;vertical-align:baseline!important}
.dark .empty-action{color:#60a5fa;border-color:#60a5fa}
.dark .empty-action:hover{background:#3b82f6;color:#fff}

/* Empty state button inside .empty-state wrapper */
.empty-state .empty-action{margin-top:10px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center}