*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.5;color:#172B4D;background:#F4F5F7;
  display:grid;
  grid-template-columns:228px 1fr;
  grid-template-rows:56px 1fr;
  height:100vh;overflow:hidden;
}

/* ===== SIDEBAR ===== */
.sidebar{
  grid-row:1/3;grid-column:1;
  background:#1C2B3B;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  z-index:20;
  transition:transform 0.25s ease;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 16px;height:56px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  text-decoration:none;flex-shrink:0;
}
.brand-logo{
  width:28px;height:28px;border-radius:6px;background:transparent;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.brand-name{display:block;max-width:120px;height:22px;object-fit:contain}
.sidebar-section{padding:16px 8px 6px}
.sidebar-label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.09em;color:rgba(255,255,255,0.28);
  padding:0 8px;margin-bottom:4px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;border-radius:4px;
  text-decoration:none;color:rgba(255,255,255,0.62);
  font-size:13.5px;font-weight:400;
  transition:background 0.12s,color 0.12s;cursor:pointer;
}
.nav-item:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.92)}
.nav-item.active{background:rgba(0,82,204,0.32);color:#fff;font-weight:500}
.nav-item .material-symbols-outlined{font-size:17px;flex-shrink:0}
.sidebar-divider{height:1px;background:rgba(255,255,255,0.07);margin:8px 8px}
.sidebar-bottom{margin-top:auto;padding:8px;border-top:1px solid rgba(255,255,255,0.07);position:relative}
.user-row{
  display:flex;align-items:center;gap:9px;padding:8px;
  border-radius:4px;cursor:pointer;width:100%;border:none;background:transparent;text-align:left;
}
.user-row:hover{background:rgba(255,255,255,0.07)}
.acc-switcher-wrap{position:relative}
.acc-switcher-btn{width:100%}
.acc-switcher-dropdown{
  position:absolute;bottom:calc(100% + 4px);left:0;right:0;
  background:#1e2634;border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;box-shadow:0 -4px 20px rgba(0,0,0,0.4);
  z-index:1000;overflow:hidden;min-width:180px;
}
.asd-header{padding:8px 12px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.35)}
.asd-section-lbl{padding:4px 12px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.25)}
.asd-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  cursor:pointer;color:rgba(255,255,255,0.75);font-size:13px;
  border:none;background:transparent;width:100%;text-align:left;
}
.asd-item:hover,.asd-item.active{background:rgba(255,255,255,0.07);color:#fff}
.asd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.asd-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asd-sub{font-size:11px;color:rgba(255,255,255,0.3)}
.asd-divider{height:1px;background:rgba(255,255,255,0.08);margin:2px 0}
.user-avatar-sm{
  width:28px;height:28px;border-radius:50%;background:#0052CC;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;flex-shrink:0;
}
.user-name-text{font-size:13px;font-weight:500;color:rgba(255,255,255,0.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-plan-text{font-size:11px;color:rgba(255,255,255,0.35)}
.sidebar-close-btn{
  display:none;position:absolute;top:12px;right:12px;
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;
  align-items:center;justify-content:center;font-size:16px;
}
.sidebar-close-btn .material-symbols-outlined{font-size:17px}

/* ===== SIDEBAR BACKDROP (mobile) ===== */
.sidebar-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0);
  z-index:500;
  transition:background 0.25s;
  pointer-events:none;
}
body.sidebar-open .sidebar-backdrop{display:block;background:rgba(0,0,0,0.45);pointer-events:all}

/* ===== HEADER ===== */
.header{
  grid-column:2;grid-row:1;
  background:#fff;border-bottom:1px solid #DFE1E6;
  display:flex;align-items:center;padding:0 20px;gap:12px;
  z-index:200;overflow:visible;position:relative;
}
.ham-btn{
  display:none;width:34px;height:34px;border-radius:6px;border:none;
  background:transparent;color:#5E6C84;cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;
}
.ham-btn:hover{background:#F4F5F7}
.ham-btn .material-symbols-outlined{font-size:22px}

/* ===== SEARCH ===== */
.search-wrap{flex:1;max-width:400px;position:relative;transition:max-width 0.25s ease}
@media(min-width:841px){
  .search-wrap.search-expanded{max-width:680px}
}
.search-wrap input{
  width:100%;height:32px;background:#F4F5F7;
  border:1px solid #DFE1E6;border-radius:4px;
  padding:0 12px 0 32px;font-size:13px;color:#172B4D;
  font-family:inherit;outline:none;transition:border-color 0.15s,box-shadow 0.15s;
}
.search-wrap input::placeholder{color:#7A869A}
.search-wrap input:focus{background:#fff;border-color:#0052CC;box-shadow:0 0 0 2px rgba(0,82,204,0.15)}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:16px;color:#7A869A;pointer-events:none}

/* Search dropdown — two-column */
.search-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border:1px solid #DFE1E6;border-radius:6px;
  box-shadow:0 4px 20px rgba(9,30,66,0.14);z-index:300;overflow:hidden;
  min-width:320px;
}
.search-dropdown.open{display:block}
.sd-two-col{display:flex;min-height:160px}
.sd-col-left{
  flex:0 0 56%;border-right:1px solid #F4F5F7;
  overflow-y:auto;max-height:340px;
}
.sd-col-right{flex:1;display:flex;flex-direction:column;overflow:hidden}
.sd-col-right-top{flex:1;overflow-y:auto;border-bottom:1px solid #F4F5F7;max-height:170px}
.sd-col-right-bottom{flex:1;overflow-y:auto;max-height:170px}
.sd-section-lbl{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.07em;color:#7A869A;padding:10px 14px 4px;
}
.sd-item{
  display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;
  color:#172B4D;font-size:13px;text-decoration:none;
}
.sd-item:hover{background:#F4F5F7}
.sd-item .material-symbols-outlined{font-size:16px;color:#7A869A;flex-shrink:0}
.sd-divider{height:1px;background:#F4F5F7;margin:4px 0}
.sd-item-del{margin-left:auto;color:#C1C7D0;font-size:14px;background:none;border:none;cursor:pointer;padding:0 2px;line-height:1}
.sd-item-del:hover{color:#7A869A}
.sd-result-name{font-size:13px;color:#172B4D;line-height:1.3}
.sd-result-meta{font-size:11px;color:#7A869A;margin-top:1px}
@media(max-width:540px){
  .sd-two-col{flex-direction:column}
  .sd-col-left{flex:none;border-right:none;border-bottom:1px solid #F4F5F7;max-height:160px}
  .sd-col-right{flex:none}
  .sd-col-right-top,.sd-col-right-bottom{max-height:unset}
}
.sd-footer{
  padding:7px 14px 8px;border-top:1px solid #F4F5F7;
  font-size:10.5px;color:#7A869A;
  display:flex;align-items:center;gap:6px;
}
.sd-footer .material-symbols-outlined{font-size:13px;flex-shrink:0;color:#C1C7D0}
.sd-see-all{display:block;padding:8px 14px;font-size:12px;color:#0052CC;text-decoration:none;border-top:1px solid #F4F5F7;margin-top:2px}
.sd-see-all:hover{background:#F4F5F7}
.sd-empty-hint{padding:16px 14px;font-size:12.5px;color:#7A869A;display:flex;align-items:center;gap:8px}
.sd-empty-hint .material-symbols-outlined{font-size:18px}
.sd-no-results{padding:10px 14px;font-size:13px;color:#7A869A}
.sd-scyler-lbl{color:#7C3AED!important}
.sd-scyler-thinking{display:flex;align-items:center;gap:7px;padding:10px 14px;font-size:12.5px;color:#7C3AED}
.sd-scyler-dot{width:6px;height:6px;border-radius:50%;background:#7C3AED;animation:sdDotPulse 1.2s ease-in-out infinite;display:inline-block}
.sd-scyler-dot:nth-child(2){animation-delay:0.2s}
.sd-scyler-dot:nth-child(3){animation-delay:0.4s}
@keyframes sdDotPulse{0%,100%{opacity:0.2}50%{opacity:1}}
.sd-scyler-tbl-wrap{overflow-x:auto;padding:6px 14px 10px}
.sd-scyler-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sd-scyler-tbl th{background:#F8F9FA;color:#7A869A;font-weight:600;padding:5px 8px;text-align:left;border-bottom:1px solid #DFE1E6;white-space:nowrap}
.sd-scyler-tbl td{padding:5px 8px;border-bottom:1px solid #F4F5F7;color:#172B4D;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-scyler-tbl tr:last-child td{border-bottom:none}
.sd-scyler-tbl a{color:#0052CC;text-decoration:none}
.sd-scyler-tbl a:hover{text-decoration:underline}

/* ===== HEADER RIGHT ===== */
.header-right{display:flex;align-items:center;gap:4px;margin-left:auto;position:relative}
.icon-btn{
  width:32px;height:32px;border-radius:50%;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:#5E6C84;cursor:pointer;position:relative;flex-shrink:0;
  text-decoration:none;
}
.icon-btn:hover{background:#F4F5F7}
.icon-btn .material-symbols-outlined{font-size:20px}
.icon-btn.active{background:#F4F5F7}
.notif-dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:#DE350B;border:2px solid #fff;
}

/* Notifications wrapper + dropdown */
.notif-wrap{position:relative}
.notif-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  width:340px;background:#fff;border:1px solid #DFE1E6;border-radius:8px;
  box-shadow:0 8px 28px rgba(9,30,66,0.16);z-index:300;overflow:hidden;
}
.nd-list{
  max-height:380px;
  overflow-y:auto;
}
.nd-spinner{
  display:flex;justify-content:center;padding:12px;
}
.nd-spinner-dot{
  width:18px;height:18px;
  border:2px solid #DFE1E6;
  border-top-color:#0052CC;
  border-radius:50%;
  animation:ndSpin 0.7s linear infinite;
}
@keyframes ndSpin{to{transform:rotate(360deg)}}
.notif-dropdown.open{display:block}
.nd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #F4F5F7;
}
.nd-title{font-size:13.5px;font-weight:600;color:#172B4D}
.nd-markall{font-size:12px;color:#0052CC;text-decoration:none;cursor:pointer}
.nd-markall:hover{text-decoration:underline}
.nd-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 16px;border-bottom:1px solid #F4F5F7;
  cursor:pointer;transition:background 0.1s;
}
.nd-item:last-of-type{border-bottom:none}
.nd-item:hover{background:#F8F9FA}
.nd-item.unread{background:#F0F7FF}
.nd-item.unread:hover{background:#E3EFFE}
a.nd-item{color:#172B4D;text-decoration:none}
a.nd-item:hover{color:#0052CC}
/* Keyboard shortcuts modal */
.kbd-table{width:100%;border-collapse:collapse;font-size:13px}
.kbd-table th{text-align:left;padding:8px 10px;border-bottom:2px solid #DFE1E6;font-size:11.5px;text-transform:uppercase;letter-spacing:0.4px;color:#7A869A;font-weight:600}
.kbd-table td{padding:8px 10px;border-bottom:1px solid #F4F5F7;color:#172B4D;vertical-align:middle}
.kbd-table tr:last-child td{border-bottom:none}
.kbd-key-input{width:44px;text-align:center;font-size:13px;font-weight:600;text-transform:uppercase;border:1px solid #DFE1E6;border-radius:4px;padding:5px 4px;background:#F4F5F7;color:#172B4D;cursor:pointer;outline:none;caret-color:transparent}
.kbd-key-input:focus{background:#fff;border-color:#0052CC;box-shadow:0 0 0 2px rgba(0,82,204,0.18)}
.nd-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.nd-icon .material-symbols-outlined{font-size:16px}
.ni-warn{background:#FFFAE6;color:#E56910}
.ni-info{background:#DEEBFF;color:#0052CC}
.ni-success{background:#E3FCEF;color:#006644}
.ni-red{background:#FFEBE6;color:#BF2600}
.nd-content{flex:1;min-width:0}
.nd-msg{font-size:13px;color:#172B4D;line-height:1.4}
.nd-time{font-size:11px;color:#7A869A;margin-top:2px}
.nd-unread-dot{width:7px;height:7px;border-radius:50%;background:#0052CC;margin-top:6px;flex-shrink:0}
.nd-footer{padding:10px 16px;text-align:center;border-top:1px solid #F4F5F7}
.nd-footer a{font-size:12.5px;color:#0052CC;text-decoration:none}
.nd-footer a:hover{text-decoration:underline}

/* User chip (profile trigger) */
.user-chip{
  display:flex;align-items:center;gap:7px;
  padding:3px 10px 3px 4px;border-radius:20px;
  border:1px solid #DFE1E6;cursor:pointer;margin-left:4px;
  position:relative;user-select:none;transition:background 0.1s,border-color 0.1s;
}
.user-chip:hover,.user-chip.active{background:#F4F5F7;border-color:#C1C7D0}
.user-chip-avatar{
  width:26px;height:26px;border-radius:50%;background:#0052CC;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.user-chip-name{font-size:13px;font-weight:500;color:#172B4D}
.user-chip-caret{font-size:14px;color:#7A869A;transition:transform 0.2s}
.user-chip.active .user-chip-caret{transform:rotate(180deg)}

/* Profile dropdown */
.profile-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  width:230px;background:#fff;border:1px solid #DFE1E6;border-radius:8px;
  box-shadow:0 8px 28px rgba(9,30,66,0.16);z-index:300;overflow:hidden;
}
.profile-dropdown.open{display:block}
.pd-head{padding:14px 16px 12px;border-bottom:1px solid #F4F5F7;display:flex;align-items:center;gap:10px}
.pd-avatar{
  width:36px;height:36px;border-radius:50%;background:#0052CC;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;
}
.pd-name{font-size:13px;font-weight:600;color:#172B4D}
.pd-email{font-size:11px;color:#7A869A}
.pd-plan{display:inline-block;margin-top:3px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;background:#DEEBFF;color:#0747A6}
.pd-item{
  display:flex;align-items:center;gap:10px;padding:9px 16px;
  cursor:pointer;color:#172B4D;font-size:13px;text-decoration:none;
}
.pd-item:hover{background:#F4F5F7}
.pd-item .material-symbols-outlined{font-size:16px;color:#5E6C84}
.pd-divider{height:1px;background:#F4F5F7}
.pd-item.danger{color:#BF2600}
.pd-item.danger .material-symbols-outlined{color:#BF2600}

/* Dark mode toggle in profile dropdown */
.pd-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;cursor:pointer;
}
.pd-toggle-row:hover{background:#F4F5F7}
.pd-toggle-left{display:flex;align-items:center;gap:10px;font-size:13px;color:#172B4D}
.pd-toggle-left .material-symbols-outlined{font-size:16px;color:#5E6C84}
.toggle-sw{
  width:36px;height:20px;border-radius:10px;
  background:#DFE1E6;position:relative;
  transition:background 0.2s;flex-shrink:0;
}
.toggle-sw.on{background:#0052CC}
.toggle-sw::after{
  content:'';position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle-sw.on::after{transform:translateX(16px)}

/* ===== MAIN ===== */
.main{
  grid-column:2;grid-row:2;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
}
.main::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar-thumb{background:#DFE1E6;border-radius:3px}
.page-wrap{padding:20px 24px 40px;width:100%;flex:1}

/* ===== PAGE TITLE ===== */
.page-title-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.page-title-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-top:4px}
.breadcrumb{display:flex;align-items:center;gap:5px;font-size:12px;color:#7A869A;margin-bottom:3px}
.breadcrumb a{color:#0052CC;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb-sep{color:#C1C7D0}
h1.ptitle{font-size:20px;font-weight:600;color:#172B4D;letter-spacing:-0.3px}
.today-badge{font-size:12px;color:#5E6C84;background:#F4F5F7;border:1px solid #DFE1E6;border-radius:4px;padding:4px 10px}

/* Add transaction button */
.add-tx-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:4px;
  background:#0052CC;color:#fff;
  border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;
  transition:background 0.15s,box-shadow 0.15s;
  flex-shrink:0;
}
.add-tx-btn:hover{background:#0747A6;box-shadow:0 2px 8px rgba(0,82,204,0.3)}
.add-tx-btn .material-symbols-outlined{font-size:16px}
.add-tx-btn .btn-text{white-space:nowrap}
@media(max-width:540px){
  .add-tx-btn .btn-text{display:none}
  .add-tx-btn{padding:6px 10px}
}

/* Mobile FAB — absolute sibling above bar notch, never clipped */
.mob-add-btn{
  position:absolute;
  top:-28px;
  left:0;right:0;margin-left:auto;margin-right:auto; /* pure margin centering — immune to parent scale */
  width:56px!important;height:56px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#2979ff 0%,#0044cc 100%)!important;
  color:#fff!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:unset!important;padding:0!important;gap:0!important;
  border:none;cursor:pointer;flex-shrink:0;
  box-shadow:0 6px 24px rgba(0,82,204,0.65),inset 0 1.5px 0 rgba(255,255,255,0.4),inset 0 -2px 0 rgba(0,0,0,0.18);
  z-index:1;
}
.mob-add-btn .material-symbols-outlined{font-size:28px!important}

/* ===== MONTH TRACKER ===== */
.month-tracker{
  background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  padding:16px 20px 14px;margin-bottom:18px;border-left:3px solid #FFAB00;
}
.mt-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mt-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5E6C84}
.mt-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:3px;background:#FFFAE6;color:#974F0C}
.track-wrap{height:8px;background:#F4F5F7;border-radius:100px;overflow:hidden;margin-bottom:8px}
.track-fill{height:100%;border-radius:100px;background:#FFAB00}
.track-labels{display:flex;align-items:center;justify-content:space-between}
.track-l,.track-r{font-size:12px;color:#7A869A}
.track-c{font-size:13px;font-weight:600;color:#172B4D}
.mt-badge-ok{background:#E3FCEF;color:#006644}
.mt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #F4F5F7}
.mt-stat{background:#F8F9FA;border:1px solid #EBECF0;border-radius:6px;padding:11px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.mt-stat-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:0.07em;color:#7A869A;display:flex;align-items:center;gap:3px;justify-content:center;line-height:1.3}
.mt-stat-val{font-size:15px;font-weight:700;color:#172B4D;line-height:1.2}
.mt-stat-val.warn{color:#D04900}

/* ===== COMPARISON SECTION (inside month-tracker) ===== */
.cmp-divider{border:none;border-top:1px solid #F4F5F7;margin:16px 0 14px}
.cmp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cmp-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5E6C84;display:flex;align-items:center;gap:5px}
.cmp-current-badge{font-size:13px;font-weight:700;padding:3px 10px;background:#F4F5F7;border-radius:3px;color:#172B4D}
.cmp-alert{padding:10px 14px;border-radius:4px;font-size:12.5px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.cmp-alert-success{background:#E3FCEF;color:#006644}
.cmp-alert-warning{background:#FFFAE6;color:#974F0C}
.cmp-alert-danger{background:#FFEBE6;color:#BF2600}
.cmp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cmp-card{background:#F8F9FA;border:1px solid #EBECF0;border-radius:6px;padding:13px 15px;border-top:3px solid #EBECF0}
.cmp-card-over{border-top-color:#FFAB00}
.cmp-card-title{font-size:10.5px;font-weight:600;color:#5E6C84;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px}
.cmp-card-amt{font-size:19px;font-weight:700;color:#172B4D;line-height:1.15;margin-bottom:6px}
.cmp-card-cur{font-size:12px;font-weight:400;color:#7A869A}
.cmp-card-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cmp-pct{font-size:12px;font-weight:600;padding:2px 6px;border-radius:3px;white-space:nowrap}
.cmp-pct.over{background:#FFEBE6;color:#BF2600}
.cmp-pct.under{background:#E3FCEF;color:#006644}
/* Badge + tooltip */
.cmp-badge-wrap{position:relative;display:inline-flex}
.cmp-badge-wrap::after{content:'';position:absolute;bottom:100%;left:-4px;right:-4px;height:14px}
.cmp-badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px;background:#DEEBFF;color:#0747A6;cursor:default;display:inline-flex;align-items:center;gap:3px;user-select:none}
.cmp-tooltip{
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#172B4D;color:#fff;border-radius:7px;padding:11px 14px;
  min-width:220px;z-index:300;pointer-events:none;opacity:0;
  transition:opacity 0.15s;box-shadow:0 6px 20px rgba(9,30,66,0.25);
  white-space:nowrap;
}
.cmp-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#172B4D}
.cmp-badge-wrap:hover .cmp-tooltip{opacity:1;pointer-events:auto}
.cmt-head{font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,0.12)}
.cmt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px}
.cmt-month{color:rgba(255,255,255,0.65);min-width:64px}
.cmt-amt{font-weight:600;color:#fff;text-align:right;flex:1}
.cmt-arrow{font-size:11px;font-weight:700;min-width:14px;text-align:center}
.cmt-arrow.below{color:#57D9A3}
.cmt-arrow.above{color:#FF8F73}
@media(max-width:600px){.cmp-cards{grid-template-columns:1fr}.cmp-tooltip{left:auto;right:0;transform:none}.cmp-tooltip::after{left:auto;right:14px;transform:none}}

/* ===== KPI CARDS ===== */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid #DFE1E6;border-radius:4px;padding:15px 16px;position:relative}
.kpi-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5E6C84;margin-bottom:8px}
.kpi-val{font-size:22px;font-weight:600;color:#172B4D;letter-spacing:-0.4px;line-height:1.1}
.kpi-unit{font-size:13px;font-weight:400;color:#7A869A}
.kpi-delta{font-size:12px;font-weight:500;margin-top:5px;display:flex;align-items:center;gap:3px}
.d-up{color:#BF2600}.d-down{color:#006644}.d-neutral{color:#5E6C84}
.kpi-icon{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center}
.kpi-icon .material-symbols-outlined{font-size:17px}
.ki-warn{background:#FFFAE6;color:#FF8B00}
.ki-info{background:#DEEBFF;color:#0052CC}
.ki-red{background:#FFEBE6;color:#BF2600}

/* ===== ALERT ===== */
.page-alert{
  display:flex;align-items:flex-start;gap:10px;
  background:#FFFAE6;border:1px solid #FFD380;
  border-radius:4px;padding:12px 16px;margin-bottom:18px;
}
.page-alert .material-symbols-outlined{font-size:19px;color:#E56910;flex-shrink:0;margin-top:1px}
.alert-title{font-size:13.5px;font-weight:600;color:#172B4D;margin-bottom:2px}
.alert-body{font-size:13px;color:#44546F}

/* ===== GRIDS ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.three-col{display:grid;grid-template-columns:7fr 5fr;gap:12px;margin-bottom:18px}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}

/* ===== CARD ===== */
.card{background:#fff;border:1px solid #DFE1E6;border-radius:4px}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 11px;border-bottom:1px solid #F4F5F7}
.card-hd-title{font-size:13.5px;font-weight:600;color:#172B4D;display:flex;align-items:center;gap:8px}
.card-link{font-size:12px;color:#0052CC;text-decoration:none}
.card-link:hover{text-decoration:underline}
.card-body{padding:16px}

/* ===== BADGES ===== */
.badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:3px}
.bg-blue{background:#DEEBFF;color:#0747A6}
.bg-green{background:#E3FCEF;color:#006644}
.bg-amber{background:#FFFAE6;color:#974F0C}
.bg-red{background:#FFEBE6;color:#BF2600}
.bg-teal{background:#E6FCFF;color:#006477}

/* ===== TABLE ===== */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.07em;color:#5E6C84;
  padding:8px 14px;text-align:left;
  border-bottom:2px solid #DFE1E6;background:#F4F5F7;white-space:nowrap;
}
.tbl td{padding:10px 14px;color:#172B4D;border-bottom:1px solid #F4F5F7}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#F8F9FA}
.tbl a{color:#0052CC;text-decoration:none}
.tbl a:hover{text-decoration:underline}
.tbl .mono{font-variant-numeric:tabular-nums;font-weight:600}
.tbl .muted{font-size:12px;color:#7A869A}
.tbl-wrap{overflow-x:auto}

/* ===== PROGRESS ===== */
.prog{height:6px;background:#F4F5F7;border-radius:100px;overflow:hidden;min-width:60px}
.prog-fill{height:100%;border-radius:100px}
.p-blue{background:#0052CC}.p-green{background:#36B37E}.p-amber{background:#FFAB00}.p-red{background:#DE350B}

/* ===== CAT CARDS ===== */
.cat{background:#fff;border:1px solid #DFE1E6;border-radius:4px;padding:13px 14px}
.cat-name{font-size:13px;font-weight:600;color:#172B4D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.cat-period{font-size:11px;color:#7A869A;margin-bottom:7px}
.cat-amt{font-size:17px;font-weight:600;color:#172B4D;letter-spacing:-0.3px;line-height:1.2;font-variant-numeric:tabular-nums}
.cat-amt small{font-size:11px;font-weight:400;color:#7A869A}
.cat-delta{font-size:11.5px;font-weight:500;margin-top:4px}
.cat-delta-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px;flex-wrap:wrap;gap:2px}
.cat-delta-left{font-size:11.5px;font-weight:500;color:#7A869A}
.cat-delta-right{font-size:11px;font-weight:600;cursor:help;white-space:nowrap}
.cpd-custom{display:flex;align-items:center;gap:4px;cursor:default}
.budg-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px;border-top:1px solid #F4F5F7}
.budg-stat-card{background:#F8F9FA;border:1px solid #DFE1E6;border-radius:6px;padding:11px 13px;position:relative;overflow:visible}
.budg-stat-ttl{font-size:12px;color:#5E6C84;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:8px}
.budg-stat-main{font-size:14px;font-weight:400;color:#172B4D;margin-bottom:4px}
.budg-stat-main strong{font-size:15px}
.budg-stat-dim{font-size:11px;color:#7A869A;font-weight:400}
.budg-stat-sub{font-size:11.5px;color:#7A869A;margin-top:5px;padding-top:5px;border-top:1px solid #F4F5F7}
@media(max-width:900px){.budg-stats-grid{grid-template-columns:repeat(2,1fr)}}
[data-theme="dark"] .budg-stat-card{background:#21262D;border-color:#30363D}
[data-theme="dark"] .budg-stat-main{color:#C9D1D9}
[data-theme="dark"] .budg-stat-sub{border-color:#30363D;color:#6E7681}
.cat-tx-tooltip{position:fixed;background:#fff;border:1px solid #DFE1E6;border-radius:6px;box-shadow:0 8px 24px rgba(9,30,66,0.18);z-index:600;width:290px;max-height:220px;overflow-y:auto;font-size:12px;display:none}
.ctt-item{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid #F4F5F7;gap:8px}
.ctt-item:last-child{border-bottom:none}
.ctt-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172B4D}
.ctt-right{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:1px}
.ctt-amt{font-family:monospace;font-weight:600;color:#BF2600;font-size:12px}
.ctt-date{font-size:10.5px;color:#7A869A}
.ctt-loading{text-align:center;padding:14px;color:#7A869A;font-size:12px}
a.hover-blue{text-decoration:none;color:#7A869A}
a.hover-blue:hover{color:#378ed6;text-decoration:none}
.ctt-header{display:flex;align-items:center;gap:7px;padding:8px 12px 7px;border-bottom:1px solid #DFE1E6;font-size:12px;font-weight:600;color:#172B4D;position:sticky;top:0;background:#fff;border-radius:6px 6px 0 0}
.ctt-header .ctt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ctt-hname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctt-hbody{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;overflow:hidden}
.ctt-hperiod{font-size:10.5px;color:#7A869A;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctt-total{font-size:11px;color:#7A869A;font-weight:400;flex-shrink:0}
[data-theme="dark"] .ctt-header{background:#161B22;border-color:#21262D;color:#C9D1D9}
[data-theme="dark"] .cat-tx-tooltip{background:#161B22;border-color:#21262D;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
[data-theme="dark"] .ctt-item{border-color:#21262D}
[data-theme="dark"] .ctt-desc{color:#C9D1D9}
[data-theme="dark"] .ctt-amt{color:#FF8F73}
[data-theme="dark"] .ctt-loading{color:#6E7681}
.c-up{color:#BF2600}.c-down{color:#006644}

/* ===== SECTION ROW ===== */
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.sec-title{font-size:13.5px;font-weight:600;color:#172B4D}
.sec-sub{font-size:13px;font-weight:400;color:#7A869A}

/* ===== CHARTS ===== */
.chart-box{position:relative;height:230px}
.donut-box{position:relative;height:190px;display:flex;align-items:center;justify-content:center}
.donut-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:12px;font-size:12px}
.dl-item{display:flex;align-items:center;gap:6px;color:#5E6C84}
.dl-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.chart-legend{display:flex;align-items:center;gap:18px;margin-top:10px;font-size:11.5px;color:#7A869A;flex-wrap:wrap}
.cl-item{display:flex;align-items:center;gap:5px}
.cl-line{display:inline-block;height:2px;width:18px;vertical-align:middle}
.cl-dot{display:inline-block;width:9px;height:9px;border-radius:2px}

/* Chart horizontal scroll (mobile) */
.chart-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100%}
.chart-scroll-wrap::-webkit-scrollbar{height:4px}
.chart-scroll-wrap::-webkit-scrollbar-thumb{background:#DFE1E6;border-radius:2px}
@media(min-width:541px) and (max-width:840px){
  .chart-scroll-inner{min-width:520px}
}

/* ===== TIP CARD ===== */
.tip-card{
  background:#DEEBFF;border:1px solid #B3D4FF;
  border-radius:4px;padding:10px 14px;
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-size:13px;color:#0747A6;
}
.tip-card .material-symbols-outlined{font-size:17px;flex-shrink:0}

/* ===== ADD TRANSACTION MODAL ===== */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(9,30,66,0.54);
  z-index:700;
  align-items:center;justify-content:center;
  padding:16px;
}
.modal-overlay.open{display:flex}
.modal{
  background:#fff;border-radius:8px;
  width:100%;max-width:480px;
  box-shadow:0 20px 60px rgba(9,30,66,0.28);
  max-height:90vh;overflow-y:auto;
  animation:modal-in 0.18s ease;
}
@keyframes modal-in{
  from{opacity:0;transform:translateY(-8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 14px;border-bottom:1px solid #DFE1E6;position:sticky;top:0;background:#fff;z-index:1;
}
.modal-title{font-size:15px;font-weight:600;color:#172B4D;display:flex;align-items:center;gap:8px}
.modal-title .material-symbols-outlined{font-size:18px;color:#0052CC}
.modal-close{
  width:28px;height:28px;border-radius:50%;
  border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:#7A869A;cursor:pointer;
}
.modal-close:hover{background:#F4F5F7;color:#172B4D}
.modal-close .material-symbols-outlined{font-size:18px}
.modal-body{padding:20px}
.modal-footer{
  padding:14px 20px;border-top:1px solid #DFE1E6;
  display:flex;justify-content:flex-end;gap:8px;
  position:sticky;bottom:0;background:#fff;
}
/* Standalone confirm modal (delete confirmations, etc.) */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(9,30,66,0.54);z-index:400;
}
/* Only standalone modals (NOT those nested inside .modal-overlay) get position:fixed */
.modal-backdrop ~ .modal[role="dialog"],
body > .modal[role="dialog"] {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:401;width:100%;max-width:440px;padding:0;
  background:#fff;border-radius:6px;box-shadow:0 8px 32px rgba(9,30,66,0.24);
}
/* Shared styling for all [role=dialog] modals */
.modal[role="dialog"]{
  background:#fff;border-radius:6px;
  box-shadow:0 8px 32px rgba(9,30,66,0.24);
  width:100%;max-width:440px;padding:0;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid #DFE1E6;
}
.modal-header .modal-title{font-size:15px;font-weight:600;color:#172B4D}
.modal-header .modal-close{
  background:none;border:none;cursor:pointer;color:#7A869A;
  font-size:20px;line-height:1;padding:0 4px;
}
.modal-header .modal-close:hover{color:#172B4D}
.modal[role="dialog"] .modal-body{padding:16px 20px}
.modal[role="dialog"] .modal-footer{
  padding:12px 20px;border-top:1px solid #DFE1E6;
  display:flex;justify-content:flex-end;gap:8px;background:#fff;
  border-radius:0 0 6px 6px;
}
[data-theme="dark"] .modal[role="dialog"]{background:#161B22;border-color:#21262D}
[data-theme="dark"] .modal-header{border-color:#21262D}
[data-theme="dark"] .modal-header .modal-title{color:#C9D1D9}
[data-theme="dark"] .modal[role="dialog"] .modal-footer{background:#161B22;border-color:#21262D}
.form-group{margin-bottom:15px}
.form-label{
  display:block;font-size:11px;font-weight:600;color:#44546F;
  margin-bottom:5px;text-transform:uppercase;letter-spacing:0.06em;
}
.form-input,.form-select,.form-textarea{
  width:100%;height:36px;
  box-sizing:border-box;
  background:#F4F5F7;border:1px solid #DFE1E6;border-radius:4px;
  padding:0 12px;font-size:13.5px;color:#172B4D;
  font-family:inherit;outline:none;
  transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  background:#fff;border-color:#0052CC;
  box-shadow:0 0 0 2px rgba(0,82,204,0.15);
}
.form-textarea{height:72px;padding:8px 12px;resize:vertical}
.form-select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A869A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.type-toggle{display:flex;margin-bottom:16px;border:1px solid #DFE1E6;border-radius:4px;overflow:hidden}
.type-btn{
  flex:1;padding:8px 0;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;
  transition:background 0.15s,color 0.15s;
  background:#F4F5F7;color:#7A869A;
}
.type-btn:first-child{border-right:1px solid #DFE1E6}
.type-btn.active-expense{background:#FFEBE6;color:#BF2600}
.type-btn.active-income{background:#E3FCEF;color:#006644}
.amount-wrap{position:relative}
.amount-currency{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#7A869A;font-weight:600;pointer-events:none;
}
.amount-wrap .form-input{padding-right:48px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{
  padding:7px 16px;border-radius:4px;
  font-family:inherit;font-size:13px;font-weight:500;
  cursor:pointer;border:none;
  transition:background 0.15s,box-shadow 0.1s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-ghost{background:transparent;color:#5E6C84;border:1px solid #DFE1E6}
.btn-ghost:hover{background:#F4F5F7}
.btn-primary{background:#0052CC;color:#fff}
.btn-primary:hover{background:#0747A6;box-shadow:0 2px 6px rgba(0,82,204,0.3)}
.btn-danger{background:#DE350B;color:#fff;border:none}
.btn-danger:hover{background:#BF2600}
.btn-secondary{background:#F4F5F7;color:#172B4D;border:1px solid #DFE1E6}
.btn-secondary:hover{background:#EBECF0}
.btn .material-symbols-outlined{font-size:15px}

/* ===== MOBILE BOTTOM NAV ===== */
/* Outer wrapper */
.mobile-nav{
  display:none;
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:400;width:372px;
  transition:transform 0.3s ease,bottom 0.3s ease;
}
/* Slide partway into the bottom edge when scrolled — no scale/opacity (both break backdrop-filter) */
.mobile-nav.mob-nav-scrolled{
  transform:translateX(-50%) scale(0.82);
  bottom:4px;
}
/* Glass bar — NO mask-image (mask-image creates a compositing group that isolates backdrop-filter) */
.mob-nav-bar{
  width:100%;box-sizing:border-box;height:59px;
  display:flex;align-items:center;gap:4px;padding:8px 14px;
  border-radius:28px;
  /* Fallback glass for Chrome (backdrop-filter:url() ignored, blur used instead) */
  background:linear-gradient(180deg,rgba(255,255,255,0.16) 0px,rgba(14,22,52,0.44) 3px,rgba(8,14,42,0.50) 100%);
  backdrop-filter:blur(18px) saturate(200%);
  -webkit-backdrop-filter:blur(18px) saturate(200%);
  /* Shadow — follows border-radius since no clip/mask */
  box-shadow:0 8px 24px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.18);
}
[data-theme="dark"] .mob-nav-bar{
  background:linear-gradient(180deg,rgba(255,255,255,0.12) 0px,rgba(4,8,24,0.60) 3px,rgba(2,4,14,0.68) 100%);
}
/* Spacer reserves FAB width in flex so buttons stay symmetric */
.mob-nav-gap{width:56px;flex-shrink:0;}
/* Nav buttons — fixed equal width keeps left/right symmetric */
.mob-nav-btn{
  display:flex;flex-direction:column;align-items:center;
  width:68px;padding:5px 6px;border-radius:16px;cursor:pointer;
  color:rgba(255,255,255,0.85);gap:2px;border:none;background:none;
  transition:background 0.15s,color 0.15s;flex-shrink:0;text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
.mob-nav-btn:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.95)}
.mob-nav-btn.active{
  background:linear-gradient(145deg,rgba(41,121,255,0.8),rgba(0,68,204,0.7));
  color:#fff;
  box-shadow:0 2px 10px rgba(0,82,204,0.45),inset 0 1px 0 rgba(255,255,255,0.2);
}
.mob-nav-btn .material-symbols-outlined{font-size:21px}
.mob-nav-lbl{font-size:10px;font-weight:500;line-height:1}
.mob-nav-half,.mob-nav-sep{display:none}

/* ===== DARK MODE ===== */
[data-theme="dark"] body{color:#C9D1D9;background:#0D1117}
[data-theme="dark"] .sidebar{background:#010409;border-right:1px solid #21262D}
[data-theme="dark"] .sidebar-brand{border-bottom-color:rgba(255,255,255,0.05)}
[data-theme="dark"] .sidebar-divider{background:rgba(255,255,255,0.05)}
[data-theme="dark"] .sidebar-bottom{border-top-color:rgba(255,255,255,0.05)}
[data-theme="dark"] .header{background:#161B22;border-bottom-color:#21262D}
[data-theme="dark"] .search-wrap input{background:#21262D;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .search-wrap input::placeholder{color:#6E7681}
[data-theme="dark"] .search-wrap input:focus{background:#0D1117;border-color:#388BFD;box-shadow:0 0 0 2px rgba(56,139,253,0.15)}
[data-theme="dark"] .search-dropdown,
[data-theme="dark"] .notif-dropdown,
[data-theme="dark"] .profile-dropdown{background:#161B22;border-color:#30363D;box-shadow:0 8px 28px rgba(0,0,0,0.55)}
[data-theme="dark"] .sd-section-lbl{color:#6E7681}
[data-theme="dark"] .sd-item{color:#C9D1D9}
[data-theme="dark"] .sd-item:hover{background:#21262D}
[data-theme="dark"] .sd-item .material-symbols-outlined{color:#6E7681}
[data-theme="dark"] .sd-item-del{color:#6E7681}
[data-theme="dark"] .sd-divider{background:#21262D}
[data-theme="dark"] .sd-col-left{border-right-color:#21262D}
[data-theme="dark"] .sd-col-right-top{border-bottom-color:#21262D}
[data-theme="dark"] .sd-result-name{color:#C9D1D9}
[data-theme="dark"] .sd-result-meta{color:#6E7681}
[data-theme="dark"] .sd-footer{border-top-color:#21262D;color:#6E7681}
[data-theme="dark"] .sd-footer .material-symbols-outlined{color:#444C56}
[data-theme="dark"] .sd-see-all{color:#388BFD;border-color:#21262D}
[data-theme="dark"] .sd-see-all:hover{background:#21262D}
[data-theme="dark"] .sd-empty-hint{color:#6E7681}
[data-theme="dark"] .sd-no-results{color:#6E7681}
[data-theme="dark"] .sd-scyler-lbl{color:#A78BFA!important}
[data-theme="dark"] .sd-scyler-thinking{color:#A78BFA}
[data-theme="dark"] .sd-scyler-dot{background:#A78BFA}
[data-theme="dark"] .sd-scyler-tbl th{background:#21262D;color:#6E7681;border-color:#30363D}
[data-theme="dark"] .sd-scyler-tbl td{border-color:#21262D;color:#C9D1D9}
[data-theme="dark"] .icon-btn{color:#8B949E}
[data-theme="dark"] .icon-btn:hover,[data-theme="dark"] .icon-btn.active{background:#21262D}
[data-theme="dark"] .notif-dot{border-color:#161B22}
[data-theme="dark"] .user-chip{border-color:#30363D}
[data-theme="dark"] .user-chip:hover,[data-theme="dark"] .user-chip.active{background:#21262D;border-color:#444C56}
[data-theme="dark"] .user-chip-name{color:#C9D1D9}
[data-theme="dark"] .user-chip-caret{color:#8B949E}
[data-theme="dark"] .pd-head{border-bottom-color:#21262D}
[data-theme="dark"] .pd-name{color:#C9D1D9}
[data-theme="dark"] .pd-email{color:#6E7681}
[data-theme="dark"] .pd-plan{background:#1C2B3B;color:#58A6FF}
[data-theme="dark"] .pd-item{color:#C9D1D9}
[data-theme="dark"] .pd-item:hover{background:#21262D}
[data-theme="dark"] .pd-item .material-symbols-outlined{color:#8B949E}
[data-theme="dark"] .pd-divider{background:#21262D}
[data-theme="dark"] .pd-toggle-row{color:#C9D1D9}
[data-theme="dark"] .pd-toggle-row:hover{background:#21262D}
[data-theme="dark"] .pd-toggle-left .material-symbols-outlined{color:#8B949E}
[data-theme="dark"] .nd-head{border-bottom-color:#21262D}
[data-theme="dark"] .nd-title{color:#C9D1D9}
[data-theme="dark"] .nd-item{border-bottom-color:#21262D}
[data-theme="dark"] .nd-item:hover{background:#21262D}
[data-theme="dark"] .nd-item.unread{background:#0C2044}
[data-theme="dark"] .nd-item.unread:hover{background:#162B4D}
[data-theme="dark"] a.nd-item{color:#B8C4D1}
[data-theme="dark"] a.nd-item:hover{color:#4C9AFF}
[data-theme="dark"] .kbd-table th{border-color:#30363D;color:#6E7681}
[data-theme="dark"] .kbd-table td{border-color:#21262D;color:#C9D1D9}
[data-theme="dark"] .kbd-key-input{background:#21262D;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .kbd-key-input:focus{background:#161B22;border-color:#4C9AFF}
[data-theme="dark"] .nd-msg{color:#C9D1D9}
[data-theme="dark"] .nd-time{color:#6E7681}
[data-theme="dark"] .ni-warn{background:#2D2000;color:#F0B429}
[data-theme="dark"] .ni-info{background:#0C2044;color:#388BFD}
[data-theme="dark"] .ni-success{background:#0A2A1A;color:#3FB950}
[data-theme="dark"] .ni-red{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .nd-footer{border-top-color:#21262D}
[data-theme="dark"] .nd-footer a{color:#388BFD}
[data-theme="dark"] .nd-markall{color:#388BFD}
[data-theme="dark"] .kpi{background:#161B22;border-color:#21262D}
[data-theme="dark"] .kpi-lbl{color:#8B949E}
[data-theme="dark"] .kpi-val{color:#C9D1D9}
[data-theme="dark"] .kpi-unit{color:#6E7681}
[data-theme="dark"] .ki-warn{background:#2D2000;color:#F0B429}
[data-theme="dark"] .ki-info{background:#0C2044;color:#388BFD}
[data-theme="dark"] .ki-red{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .card{background:#161B22;border-color:#21262D}
[data-theme="dark"] .card-hd{border-bottom-color:#21262D}
[data-theme="dark"] .card-hd-title{color:#C9D1D9}
[data-theme="dark"] .card-link{color:#388BFD}
[data-theme="dark"] .month-tracker{background:#161B22;border-color:#21262D;border-left-color:#F0B429}
[data-theme="dark"] .cmp-divider{border-top-color:#21262D}
[data-theme="dark"] .cmp-current-badge{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .cmp-alert-success{background:#0A2A1A;color:#57D9A3}
[data-theme="dark"] .cmp-alert-warning{background:#2D2000;color:#F0B429}
[data-theme="dark"] .cmp-alert-danger{background:#2D0500;color:#FF7B72}
[data-theme="dark"] .cmp-card{background:#21262D;border-color:#30363D;border-top-color:#30363D}
[data-theme="dark"] .cmp-card-over{border-top-color:#F0B429}
[data-theme="dark"] .cmp-card-title{color:#8B949E}
[data-theme="dark"] .cmp-card-amt{color:#C9D1D9}
[data-theme="dark"] .cmp-card-cur{color:#6E7681}
[data-theme="dark"] .cmp-pct.over{background:#2D0500;color:#FF7B72}
[data-theme="dark"] .cmp-pct.under{background:#0A2A1A;color:#57D9A3}
[data-theme="dark"] .cmp-badge{background:#0C2044;color:#388BFD}
[data-theme="dark"] .cmp-tooltip{background:#0D1117;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
[data-theme="dark"] .cmp-tooltip::after{border-top-color:#0D1117}
[data-theme="dark"] .mt-label{color:#8B949E}
[data-theme="dark"] .mt-badge{background:#2D2000;color:#F0B429}
[data-theme="dark"] .track-wrap{background:#21262D}
[data-theme="dark"] .track-l,[data-theme="dark"] .track-r{color:#6E7681}
[data-theme="dark"] .track-c{color:#C9D1D9}
[data-theme="dark"] .mt-stats{border-top-color:#21262D}
[data-theme="dark"] .mt-stat{background:#21262D;border-color:#30363D}
[data-theme="dark"] .mt-stat-lbl{color:#6E7681}
[data-theme="dark"] .mt-stat-val{color:#C9D1D9}
[data-theme="dark"] .mt-stat-val.warn{color:#FF7B72}
[data-theme="dark"] .page-alert{background:#2D2000;border-color:#4D3300}
[data-theme="dark"] .page-alert .material-symbols-outlined{color:#F0B429}
[data-theme="dark"] .alert-title{color:#C9D1D9}
[data-theme="dark"] .alert-body{color:#8B949E}
[data-theme="dark"] .tip-card{background:#0C2044;border-color:#1C3A6B;color:#58A6FF}
[data-theme="dark"] .tip-card .material-symbols-outlined{color:#58A6FF}
[data-theme="dark"] .tbl th{background:#21262D;border-bottom-color:#30363D;color:#8B949E}
[data-theme="dark"] .tbl td{color:#C9D1D9;border-bottom-color:#21262D}
[data-theme="dark"] .tbl tbody tr:hover td{background:#21262D}
[data-theme="dark"] .tbl a{color:#388BFD}
[data-theme="dark"] .tbl .muted{color:#6E7681}
[data-theme="dark"] .cat{background:#161B22;border-color:#21262D}
[data-theme="dark"] .cat-name{color:#C9D1D9}
[data-theme="dark"] .cat-amt{color:#C9D1D9}
[data-theme="dark"] .cat-period{color:#6E7681}
[data-theme="dark"] .badge.bg-blue{background:#0C2044;color:#388BFD}
[data-theme="dark"] .badge.bg-green{background:#0A2A1A;color:#3FB950}
[data-theme="dark"] .badge.bg-amber{background:#2D2000;color:#F0B429}
[data-theme="dark"] .badge.bg-red{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .badge.bg-teal{background:#002933;color:#39D0E4}
[data-theme="dark"] .prog{background:#21262D}
[data-theme="dark"] .sec-title{color:#C9D1D9}
[data-theme="dark"] .sec-sub{color:#6E7681}
[data-theme="dark"] h1.ptitle{color:#C9D1D9}
[data-theme="dark"] .breadcrumb{color:#6E7681}
[data-theme="dark"] .breadcrumb a{color:#388BFD}
[data-theme="dark"] .breadcrumb-sep{color:#444C56}
[data-theme="dark"] .today-badge{background:#21262D;border-color:#30363D;color:#8B949E}
[data-theme="dark"] .donut-legend .dl-item{color:#8B949E}
[data-theme="dark"] .chart-legend{color:#8B949E}
[data-theme="dark"] .chart-scroll-wrap::-webkit-scrollbar-thumb{background:#30363D}
[data-theme="dark"] .modal-hd,[data-theme="dark"] .modal-footer{background:#161B22}
[data-theme="dark"] .modal{background:#161B22}
[data-theme="dark"] .modal-hd{border-bottom-color:#21262D}
[data-theme="dark"] .modal-title{color:#C9D1D9}
[data-theme="dark"] .modal-footer{border-top-color:#21262D}
[data-theme="dark"] .modal-close{color:#6E7681}
[data-theme="dark"] .modal-close:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .form-label{color:#8B949E}
[data-theme="dark"] .form-input,[data-theme="dark"] .form-textarea{background:#21262D;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .form-select{background-color:#21262D;border-color:#30363D;color:#C9D1D9;background-repeat:no-repeat;background-position:right 12px center}
[data-theme="dark"] .form-input:focus,[data-theme="dark"] .form-textarea:focus{background:#0D1117;border-color:#388BFD;box-shadow:0 0 0 2px rgba(56,139,253,0.15)}
[data-theme="dark"] .form-select:focus{background-color:#0D1117;border-color:#388BFD;box-shadow:0 0 0 2px rgba(56,139,253,0.15)}
[data-theme="dark"] .form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7681' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
[data-theme="dark"] .type-toggle{border-color:#30363D}
[data-theme="dark"] .type-btn{background:#21262D;color:#6E7681}
[data-theme="dark"] .type-btn:first-child{border-right-color:#30363D}
[data-theme="dark"] .type-btn.active-expense{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .type-btn.active-income{background:#0A2A1A;color:#3FB950}
[data-theme="dark"] .amount-currency{color:#6E7681}
[data-theme="dark"] .btn-ghost{color:#8B949E;border-color:#30363D}
[data-theme="dark"] .btn-ghost:hover{background:#21262D}
[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.72)}
[data-theme="dark"] .mob-nav-half{display:none}

/* ===== SITE FOOTER ===== */
.site-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:14px 24px 18px;
  margin-top:auto;
  border-top:1px solid #EBECF0;
  font-size:12px;color:#7A869A;
}
.site-footer-copy{white-space:nowrap}
.site-footer-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer-links a{color:#7A869A;text-decoration:none;transition:color 0.12s}
.site-footer-links a:hover{color:#0052CC}
[data-theme="dark"] .site-footer{border-top-color:#21262D;color:#6E7681}
[data-theme="dark"] .site-footer-links a{color:#6E7681}
[data-theme="dark"] .site-footer-links a:hover{color:#388BFD}
@media(max-width:540px){.site-footer{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px 90px}}

/* ===== PRIVACY MODE ===== */
[data-privacy="1"] .privacy-blur,
[data-privacy="1"] .kpi-val,
[data-privacy="1"] .cat-amt,
[data-privacy="1"] .tbl .mono,
[data-privacy="1"] .recent-tx-amt,
[data-privacy="1"] .upcoming-amount,
[data-privacy="1"] .dtl-amount,
[data-privacy="1"] .dal-amount,
[data-privacy="1"] .page-stat-val,
[data-privacy="1"] .budg-stat-main strong,
[data-privacy="1"] .acc-stat-val,
[data-privacy="1"] .mt-stat-val,
[data-privacy="1"] .cgc-stat-val{
  filter:blur(6px);
  user-select:none;
  transition:filter 0.2s;
}
[data-privacy="1"] .privacy-blur:hover,
[data-privacy="1"] .kpi-val:hover,
[data-privacy="1"] .cat-amt:hover,
[data-privacy="1"] .tbl .mono:hover,
[data-privacy="1"] .recent-tx-amt:hover,
[data-privacy="1"] .upcoming-amount:hover,
[data-privacy="1"] .dtl-amount:hover,
[data-privacy="1"] .dal-amount:hover,
[data-privacy="1"] .page-stat-val:hover,
[data-privacy="1"] .budg-stat-main strong:hover,
[data-privacy="1"] .acc-stat-val:hover,
[data-privacy="1"] .mt-stat-val:hover,
[data-privacy="1"] .cgc-stat-val:hover{
  filter:none;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .three-col{grid-template-columns:1fr}
}
@media(max-width:840px){
  body{grid-template-columns:1fr;grid-template-rows:56px 1fr;overflow-x:hidden}
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;width:270px;
    z-index:600;transform:translateX(-270px);
    grid-row:auto;grid-column:auto;
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-close-btn{display:flex}
  .header{grid-column:1;grid-row:1}
  .main{grid-column:1;grid-row:2;padding-bottom:90px}
  .ham-btn{display:flex}
  .mobile-nav{display:block}
  .two-col{grid-template-columns:1fr}
  .search-wrap{max-width:none;flex:1}
  .user-chip-name{display:none}
}
@media(max-width:540px){
  .page-wrap{padding:14px 14px 90px}
  .kpi-row{grid-template-columns:1fr 1fr}
  .cats-grid{grid-template-columns:1fr 1fr}
  .mt-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .donut-box{height:160px}
}

/* =====================================================================
   CATEGORIES PAGE
   ===================================================================== */

/* ── Summary stat cards ── */
.page-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.page-stat-card{background:#fff;border:1px solid #DFE1E6;border-radius:4px;padding:14px 16px}
.page-stat-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5E6C84;margin-bottom:4px}
.page-stat-val{font-size:20px;font-weight:600;color:#172B4D;letter-spacing:-0.3px;line-height:1.2}
.page-stat-sub{font-size:12px;color:#7A869A;margin-top:2px}

/* ── Filter / toolbar row ── */
.filter-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.filter-search-wrap{position:relative;flex:1;min-width:180px;max-width:320px}
.filter-search-wrap .material-symbols-outlined{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:16px;color:#7A869A;pointer-events:none;
}
.filter-search{
  width:100%;height:34px;
  background:#F4F5F7;border:1px solid #DFE1E6;border-radius:4px;
  padding:0 12px 0 32px;font-size:13px;color:#172B4D;
  font-family:inherit;outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.filter-search::placeholder{color:#7A869A}
.filter-search:focus{background:#fff;border-color:#0052CC;box-shadow:0 0 0 2px rgba(0,82,204,0.15)}
.filter-count{font-size:12px;color:#7A869A;white-space:nowrap;margin-left:auto}

/* ── Category color dot ── */
.cat-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.cat-name-cell{display:flex;align-items:center;gap:9px}
.cat-name-text{font-weight:500;color:#172B4D}

/* ── Sortable column headers ── */
.tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.sortable:hover{color:#172B4D;background:#EBECF0}
.sort-arrows{display:inline-flex;flex-direction:column;margin-left:4px;vertical-align:middle;line-height:1;gap:0px;opacity:0.35}
.sort-arrows span{font-size:8px;line-height:1.1}
th.sort-asc .sort-arrows,th.sort-desc .sort-arrows{opacity:1}
th.sort-asc .sort-arrows .arr-down{opacity:0.25}
th.sort-desc .sort-arrows .arr-up{opacity:0.25}

/* ── Row action buttons (reveal on hover) ── */
.tbl-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity 0.12s}
tr:hover .tbl-actions{opacity:1}
.tbl-action-btn{
  width:26px;height:26px;border-radius:4px;border:none;
  background:transparent;color:#7A869A;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.1s,color 0.1s;
}
.tbl-action-btn:hover{background:#F4F5F7;color:#172B4D}
.tbl-action-btn.danger:hover{background:#FFEBE6;color:#BF2600}
.tbl-action-btn .material-symbols-outlined{font-size:15px}

/* ── Empty state ── */
.empty-state{text-align:center;padding:48px 24px}
.empty-state .material-symbols-outlined{font-size:40px;color:#C1C7D0;display:block;margin-bottom:10px}
.empty-state-title{font-size:15px;font-weight:600;color:#172B4D;margin-bottom:4px}
.empty-state-sub{font-size:13px;color:#7A869A}

/* ── Color picker (modal) ── */
.color-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.color-swatch{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;
  transition:transform 0.12s,border-color 0.12s;
  outline:none;
  position:relative;
}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.selected{border-color:#172B4D;box-shadow:0 0 0 2px #fff inset}
.color-swatch:focus-visible{outline:2px solid #0052CC;outline-offset:2px}

/* ── Dark mode ── */
[data-theme="dark"] .page-stat-card{background:#161B22;border-color:#21262D}
[data-theme="dark"] .page-stat-lbl{color:#8B949E}
[data-theme="dark"] .page-stat-val{color:#C9D1D9}
[data-theme="dark"] .page-stat-sub{color:#6E7681}
[data-theme="dark"] .filter-search{background:#21262D;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .filter-search::placeholder{color:#6E7681}
[data-theme="dark"] .filter-search:focus{background:#0D1117;border-color:#388BFD;box-shadow:0 0 0 2px rgba(56,139,253,0.15)}
[data-theme="dark"] .filter-search-wrap .material-symbols-outlined{color:#6E7681}
[data-theme="dark"] .filter-count{color:#6E7681}
[data-theme="dark"] .cat-name-text{color:#C9D1D9}
[data-theme="dark"] .tbl th.sortable:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .tbl-action-btn:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .tbl-action-btn.danger:hover{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .empty-state .material-symbols-outlined{color:#444C56}
[data-theme="dark"] .empty-state-title{color:#C9D1D9}
[data-theme="dark"] .empty-state-sub{color:#6E7681}
[data-theme="dark"] .color-swatch.selected{border-color:#C9D1D9;box-shadow:0 0 0 2px #161B22 inset}

/* ── Responsive ── */
@media(max-width:768px){
  .page-summary{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:540px){
  .page-summary{grid-template-columns:1fr 1fr}
  .page-stat-card:last-child{grid-column:1/-1}
  .filter-search-wrap{max-width:none;flex:1}
  /* hide less-critical columns on small screens — table remains h-scrollable */
  .col-created,.col-share{display:none}
}

/* =====================================================================
   GROUPS PAGE
   ===================================================================== */

/* Smooth anchor-jump scrolling inside the main scroll container */
.main{scroll-behavior:smooth}

/* ── Group type buttons in modal ── */
.type-btn.active-credit{background:#DEEBFF;color:#0052CC}
.type-btn.active-normal{background:#E3FCEF;color:#006644}
[data-theme="dark"] .type-btn.active-credit{background:#0C2044;color:#388BFD}
[data-theme="dark"] .type-btn.active-normal{background:#0A2A1A;color:#3FB950}

/* ── Two-column page layout ── */
.groups-layout{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.groups-main{min-width:0} /* prevent grid blowout on narrow viewports */

/* ── Sticky Jump To sidebar ── */
.groups-jumpto{position:sticky;top:20px}

/* ── Jump To card ── */
.jumpto-card{background:#fff;border:1px solid #DFE1E6;border-radius:4px;overflow:hidden}
.jumpto-create-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;padding:11px 14px;border:none;
  background:#0052CC;color:#fff;
  font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
  transition:background 0.15s;
}
.jumpto-create-btn:hover{background:#0747A6}
.jumpto-create-btn .material-symbols-outlined{font-size:17px}
.jumpto-nav{border-top:1px solid #DFE1E6}
.jumpto-link{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;font-size:12.5px;
  color:#44546F;text-decoration:none;
  border-bottom:1px solid #F4F5F7;
  transition:background 0.1s,color 0.1s;
}
.jumpto-link:last-child{border-bottom:none}
.jumpto-link:hover{background:#F4F5F7;color:#172B4D}
.jumpto-link .material-symbols-outlined{font-size:16px;color:#7A869A;flex-shrink:0}
.jl-text{flex:1;min-width:0;line-height:1.3}
.jumpto-link-badge{
  flex-shrink:0;font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:10px;
  background:#DFE1E6;color:#44546F;
  min-width:20px;text-align:center;
}
.jumpto-link.active{background:#DEEBFF;color:#0052CC;border-bottom-color:#C8E0FF}
.jumpto-link.active .material-symbols-outlined{color:#0052CC}
.jumpto-link.active .jumpto-link-badge{background:#0052CC;color:#fff}

/* ── Section headings ── */
.groups-section{margin-bottom:28px;scroll-margin-top:20px}
.groups-section:last-child{margin-bottom:0}
.groups-section-hd{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding-bottom:9px;
  border-bottom:2px solid #DFE1E6;
}
.groups-section-title{font-size:14px;font-weight:600;color:#172B4D}
.groups-section-count{
  font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:10px;
  background:#DFE1E6;color:#44546F;
}

/* ── Overdue row tint ── */
tr.is-overdue td{background:rgba(255,235,230,0.5)!important}

/* ── Dark mode ── */
[data-theme="dark"] .jumpto-card{background:#161B22;border-color:#21262D}
[data-theme="dark"] .jumpto-nav{border-top-color:#21262D}
[data-theme="dark"] .jumpto-link{color:#8B949E;border-bottom-color:#21262D}
[data-theme="dark"] .jumpto-link:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .jumpto-link .material-symbols-outlined{color:#6E7681}
[data-theme="dark"] .jumpto-link-badge{background:#30363D;color:#8B949E}
[data-theme="dark"] .jumpto-link.active{background:#0C2044;color:#388BFD;border-bottom-color:#163353}
[data-theme="dark"] .jumpto-link.active .material-symbols-outlined{color:#388BFD}
[data-theme="dark"] .jumpto-link.active .jumpto-link-badge{background:#388BFD;color:#fff}
[data-theme="dark"] .groups-section-hd{border-bottom-color:#21262D}
[data-theme="dark"] .groups-section-title{color:#C9D1D9}
[data-theme="dark"] .groups-section-count{background:#21262D;color:#8B949E}
[data-theme="dark"] tr.is-overdue td{background:rgba(45,10,0,0.3)!important}

/* ── Responsive ── */
@media(max-width:1100px){
  .groups-layout{grid-template-columns:175px 1fr}
}
@media(max-width:840px){
  .groups-layout{grid-template-columns:1fr;gap:16px}
  .groups-jumpto{position:static}
  .jumpto-card{
    display:flex;flex-direction:row;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .jumpto-card::-webkit-scrollbar{display:none}
  .jumpto-create-btn{
    flex-shrink:0;width:auto;border-radius:0;
    padding:10px 16px;white-space:nowrap;
    border-right:1px solid rgba(255,255,255,0.2);
  }
  .jumpto-nav{
    display:flex;flex-direction:row;
    border-top:none;border-left:1px solid #DFE1E6;
    flex:1;
  }
  .jumpto-link{
    border-bottom:none;border-right:1px solid #F4F5F7;
    flex-direction:column;gap:3px;
    padding:8px 10px;white-space:nowrap;
    flex:1;min-width:80px;
    justify-content:center;align-items:center;text-align:center;
  }
  .jumpto-link:last-child{border-right:none}
  .jumpto-link .material-symbols-outlined{font-size:18px}
  .jl-text{font-size:11px;line-height:1.2}
  .jumpto-link-badge{margin-left:0}
  .jumpto-link.active{border-bottom:none}
  [data-theme="dark"] .jumpto-nav{border-left-color:#21262D}
  [data-theme="dark"] .jumpto-link{border-right-color:#21262D;border-bottom-color:transparent}
}
@media(max-width:540px){
  .jumpto-link{min-width:70px;padding:7px 8px}
  .jumpto-link .material-symbols-outlined{font-size:16px}
}

/* =====================================================================
   BUDGETS PAGE
   ===================================================================== */

/* ── Period selector ── */
.budget-period-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.budget-period-ctrl{display:flex;align-items:center;border:1px solid #DFE1E6;border-radius:4px;overflow:hidden}
.period-nav-btn{
  width:34px;height:34px;border:none;background:#F4F5F7;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#5E6C84;font-size:20px;transition:background 0.1s;flex-shrink:0;
}
.period-nav-btn:hover{background:#EBECF0;color:#172B4D}
.period-display{
  padding:0 18px;height:34px;display:flex;align-items:center;
  font-size:14px;font-weight:600;color:#172B4D;
  background:#fff;border-left:1px solid #DFE1E6;border-right:1px solid #DFE1E6;
  min-width:140px;justify-content:center;
}
.budget-period-sub{font-size:12px;color:#7A869A}

/* ── Summary chips ── */
.budget-status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.budget-stat-chip{
  background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  padding:10px 14px;display:flex;align-items:center;gap:10px;
}
.bsc-icon{font-size:22px}
.bsc-icon.ok{color:#006644}.bsc-icon.warn{color:#E56910}.bsc-icon.over{color:#BF2600}.bsc-icon.neutral{color:#5E6C84}
.bsc-info{display:flex;flex-direction:column}
.bsc-val{font-size:20px;font-weight:700;color:#172B4D;line-height:1.1}
.bsc-lbl{font-size:11px;color:#7A869A;margin-top:1px}

/* ── Budget accordion ── */
.budget-accordion{display:flex;flex-direction:column;gap:4px}
.budget-acc-item{background:#fff;border:1px solid #DFE1E6;border-radius:4px;overflow:hidden}
.budget-acc-header{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:11px 16px;border:none;
  background:transparent;cursor:pointer;text-align:left;
  transition:background 0.1s;
}
.budget-acc-header:hover{background:#F8F9FA}
.budget-acc-item.open .budget-acc-header{background:#F8F9FA;border-bottom:1px solid #DFE1E6}
.ba-name{
  font-size:13.5px;font-weight:500;color:#44546F;
  display:flex;align-items:center;gap:9px;flex:1;
}
.ba-name.has-budget{color:#006644;font-weight:600}
.ba-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.ba-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:3px;
}
.ba-chip .material-symbols-outlined{font-size:13px}
.ba-chip.ok{background:#E3FCEF;color:#006644}
.ba-chip.warn{background:#FFFAE6;color:#974F0C}
.ba-chip.over{background:#FFEBE6;color:#BF2600}
.ba-chip.none{background:#F4F5F7;color:#7A869A}
.ba-chevron{font-size:20px;color:#7A869A;transition:transform 0.2s;flex-shrink:0}
.budget-acc-item.open .ba-chevron{transform:rotate(180deg)}

/* ── Accordion body ── */
.budget-acc-body{padding:16px}
.ba-section-lbl{
  display:block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:#0052CC;margin-bottom:8px;
}
.budget-status-icon{font-size:18px;vertical-align:middle}
.budget-status-icon.ok{color:#006644}
.budget-status-icon.warn{color:#E56910}
.budget-status-icon.over{color:#BF2600}
.bv-ok{color:#006644;font-weight:600}
.bv-warn{color:#D04900;font-weight:600}
.bv-over{color:#BF2600;font-weight:600}

/* ── Add budget section ── */
.budget-add-section{margin-top:12px}
.budget-add-toggle{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:4px;
  border:1px dashed #C1C7D0;background:transparent;
  color:#0052CC;font-family:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;transition:background 0.1s,border-color 0.1s;
}
.budget-add-toggle:hover{background:#DEEBFF;border-color:#4C9AFF}
.budget-add-toggle .material-symbols-outlined{font-size:16px}
.budget-add-form{
  background:#F8F9FA;border:1px solid #DFE1E6;border-radius:4px;
  padding:14px 16px;margin-top:10px;
}
.baf-grid{
  display:grid;
  grid-template-columns:160px 1fr 140px 150px;
  gap:10px;align-items:end;
}
.baf-actions{display:flex;gap:8px;align-items:center;margin-top:10px}

/* ── Dark mode ── */
[data-theme="dark"] .budget-period-ctrl{border-color:#30363D}
[data-theme="dark"] .period-display{background:#161B22;color:#C9D1D9;border-left-color:#30363D;border-right-color:#30363D}
[data-theme="dark"] .period-nav-btn{background:#21262D;color:#8B949E}
[data-theme="dark"] .period-nav-btn:hover{background:#30363D;color:#C9D1D9}
[data-theme="dark"] .budget-period-sub{color:#6E7681}
[data-theme="dark"] .budget-stat-chip{background:#161B22;border-color:#21262D}
[data-theme="dark"] .bsc-val{color:#C9D1D9}
[data-theme="dark"] .bsc-lbl{color:#6E7681}
[data-theme="dark"] .budget-acc-item{background:#161B22;border-color:#21262D}
[data-theme="dark"] .budget-acc-header:hover{background:#21262D}
[data-theme="dark"] .budget-acc-item.open .budget-acc-header{background:#21262D;border-bottom-color:#30363D}
[data-theme="dark"] .ba-name{color:#8B949E}
[data-theme="dark"] .ba-name.has-budget{color:#3FB950}
[data-theme="dark"] .ba-chip.ok{background:#0A2A1A;color:#3FB950}
[data-theme="dark"] .ba-chip.warn{background:#2D2000;color:#F0B429}
[data-theme="dark"] .ba-chip.over{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .ba-chip.none{background:#21262D;color:#6E7681}
[data-theme="dark"] .ba-chevron{color:#6E7681}
[data-theme="dark"] .ba-section-lbl{color:#388BFD}
[data-theme="dark"] .budget-add-toggle{border-color:#30363D;color:#388BFD}
[data-theme="dark"] .budget-add-toggle:hover{background:#0C2044;border-color:#388BFD}
[data-theme="dark"] .budget-add-form{background:#21262D;border-color:#30363D}
[data-theme="dark"] .bv-ok{color:#3FB950}
[data-theme="dark"] .bv-warn{color:#F0B429}
[data-theme="dark"] .bv-over{color:#FF7B72}

/* ── Responsive ── */
@media(max-width:1100px){.budget-status-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:840px){
  .baf-grid{grid-template-columns:1fr 1fr}
  .budget-period-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:540px){
  .budget-status-row{grid-template-columns:1fr 1fr}
  .baf-grid{grid-template-columns:1fr}
  .ba-right{display:none} /* save space on mobile */
}

/* =====================================================================
   MONTH PICKER DROPDOWN
   ===================================================================== */
.month-picker{position:relative;display:inline-block}
.month-picker-btn{
  display:flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;
  border:1px solid #DFE1E6;border-radius:4px;
  background:#fff;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:600;color:#172B4D;
  min-width:155px;transition:border-color 0.15s,background 0.15s;
}
.month-picker-btn:hover{background:#F4F5F7;border-color:#C1C7D0}
.month-picker.open .month-picker-btn{border-color:#0052CC;box-shadow:0 0 0 2px rgba(0,82,204,0.15)}
.month-picker-btn .material-symbols-outlined{font-size:17px;color:#7A869A}
.mp-caret{font-size:17px;color:#7A869A;transition:transform 0.2s;flex-shrink:0;margin-left:auto}
.month-picker.open .mp-caret{transform:rotate(180deg)}
.month-picker-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid #DFE1E6;border-radius:8px;
  box-shadow:0 4px 20px rgba(9,30,66,0.14);
  z-index:350;width:272px;padding:12px;
}
.month-picker.open .month-picker-dropdown{display:block}
.mp-year-strip{
  display:flex;gap:4px;flex-wrap:wrap;
  margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid #F4F5F7;
}
.mp-year-btn{
  padding:4px 10px;border-radius:4px;border:none;
  background:transparent;font-family:inherit;font-size:12.5px;
  font-weight:600;color:#5E6C84;cursor:pointer;
  transition:background 0.1s,color 0.1s;
}
.mp-year-btn:hover{background:#F4F5F7;color:#172B4D}
.mp-year-btn.active{background:#DEEBFF;color:#0052CC}
.mp-months{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mp-month-btn{
  padding:7px 4px;border-radius:4px;border:none;
  background:transparent;font-family:inherit;font-size:12px;
  font-weight:500;color:#172B4D;cursor:pointer;text-align:center;
  transition:background 0.1s,color 0.1s;
}
.mp-month-btn:hover{background:#F4F5F7}
.mp-month-btn.selected{background:#0052CC;color:#fff}
.mp-month-btn.today-month{outline:2px solid #0052CC;outline-offset:-2px;color:#0052CC}
.mp-month-btn.selected.today-month{background:#0052CC;color:#fff;outline:none}

[data-theme="dark"] .month-picker-btn{background:#161B22;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .month-picker-btn:hover{background:#21262D}
[data-theme="dark"] .month-picker.open .month-picker-btn{border-color:#388BFD;box-shadow:0 0 0 2px rgba(56,139,253,0.15)}
[data-theme="dark"] .month-picker-btn .material-symbols-outlined,[data-theme="dark"] .mp-caret{color:#6E7681}
[data-theme="dark"] .month-picker-dropdown{background:#161B22;border-color:#30363D;box-shadow:0 8px 28px rgba(0,0,0,0.55)}
[data-theme="dark"] .mp-year-strip{border-bottom-color:#21262D}
[data-theme="dark"] .mp-year-btn{color:#8B949E}
[data-theme="dark"] .mp-year-btn:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .mp-year-btn.active{background:#0C2044;color:#388BFD}
[data-theme="dark"] .mp-month-btn{color:#C9D1D9}
[data-theme="dark"] .mp-month-btn:hover{background:#21262D}
[data-theme="dark"] .mp-month-btn.selected{background:#0052CC;color:#fff}
[data-theme="dark"] .mp-month-btn.today-month{outline-color:#388BFD;color:#388BFD}

/* =====================================================================
   TRANSACTIONS PAGE
   ===================================================================== */

/* ── Two-column layout ── */
.tx-layout{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:start}
.tx-main{min-width:0}

/* ── Active credit group cards (left sidebar) ── */
.credit-cards-sidebar{position:sticky;top:20px}
.credit-sidebar-lbl{
  display:block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;
  color:#5E6C84;margin-bottom:8px;
}
.cgc{
  background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  padding:11px 12px;margin-bottom:6px;
  transition:box-shadow 0.12s;
}
.cgc:last-child{margin-bottom:0}
.cgc:hover{box-shadow:0 2px 8px rgba(9,30,66,0.1)}
.cgc-hd{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cgc-name{font-size:12px;font-weight:600;color:#172B4D;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgc-prog{margin-bottom:7px}
.cgc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.cgc-stat-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:0.06em;color:#7A869A}
.cgc-stat-val{font-size:11.5px;font-weight:600;color:#172B4D}
.cgc-due{
  display:flex;align-items:center;gap:4px;margin-top:7px;
  font-size:11px;color:#7A869A;padding-top:7px;border-top:1px solid #F4F5F7;
}
.cgc-due .material-symbols-outlined{font-size:13px}

/* ── Collapsible section ── */
.collapsible-card{
  background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  margin-bottom:12px;overflow:hidden;
}
.collapsible-hd{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  cursor:pointer;user-select:none;transition:background 0.1s;
}
.collapsible-hd:hover{background:#F8F9FA}
.collapsible-title{font-size:13.5px;font-weight:600;color:#172B4D;flex:1}
.collapsible-icon{font-size:20px;color:#7A869A;transition:transform 0.2s}
.collapsible-card.open .collapsible-icon{transform:rotate(180deg)}
.collapsible-body{padding:0 16px 16px}

/* ── Transaction amount colors ── */
.tx-expense{color:#BF2600;font-weight:600}
.tx-income{color:#006644;font-weight:600}

/* ── Table toolbar (filter row inside card) ── */
.tbl-toolbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid #F4F5F7;
  flex-wrap:wrap;
}
.tbl-toolbar .form-select{
  height:34px;font-size:13px;width:auto;
  padding:0 28px 0 10px;
}

/* ── Dark mode ── */
[data-theme="dark"] .cgc{background:#161B22;border-color:#21262D}
[data-theme="dark"] .cgc:hover{box-shadow:0 2px 8px rgba(0,0,0,0.3)}
[data-theme="dark"] .cgc-name{color:#C9D1D9}
[data-theme="dark"] .cgc-stat-lbl{color:#6E7681}
[data-theme="dark"] .cgc-stat-val{color:#C9D1D9}
[data-theme="dark"] .cgc-due{color:#6E7681;border-top-color:#21262D}
[data-theme="dark"] .credit-sidebar-lbl{color:#8B949E}
[data-theme="dark"] .collapsible-card{background:#161B22;border-color:#21262D}
[data-theme="dark"] .collapsible-hd:hover{background:#21262D}
[data-theme="dark"] .collapsible-title{color:#C9D1D9}
[data-theme="dark"] .collapsible-icon{color:#6E7681}
[data-theme="dark"] .tbl-toolbar{border-bottom-color:#21262D}

/* ── Responsive ── */
@media(max-width:1100px){.tx-layout{grid-template-columns:165px 1fr}}
@media(max-width:840px){
  .tx-layout{grid-template-columns:1fr;gap:16px}
  .credit-cards-sidebar{position:static;display:flex;flex-wrap:wrap;gap:8px}
  .cgc{flex:1;min-width:140px;margin-bottom:0}
}
@media(max-width:540px){.cgc{min-width:100%}}

/* =====================================================================
   ACCOUNTS PAGE
   ===================================================================== */

/* ── Cards grid ── */
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}

/* ── Account card ── */
.acc-card{background:#fff;border:1px solid #DFE1E6;border-radius:6px;overflow:hidden}
.acc-card.active-account{border-color:#0052CC;border-width:2px}
.acc-card-hd{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px;border-bottom:1px solid #F4F5F7;
}
.acc-icon{
  width:40px;height:40px;border-radius:8px;background:#0052CC;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#fff;
}
.acc-icon.secondary{background:#6B778C}
.acc-icon .material-symbols-outlined{font-size:22px}
.acc-card-title{font-size:15px;font-weight:600;color:#172B4D;line-height:1.2}
.acc-card-settings{margin-left:auto;flex-shrink:0;position:relative}

/* ── Settings dropdown ── */
.acc-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  background:#fff;border:1px solid #DFE1E6;border-radius:4px;
  box-shadow:0 4px 12px rgba(9,30,66,0.12);
  z-index:100;min-width:140px;overflow:hidden;
}
.acc-dropdown-menu.open{display:block}
.acc-dropdown-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:13px;color:#172B4D;
  background:none;border:none;width:100%;text-align:left;
  cursor:pointer;font-family:inherit;
}
.acc-dropdown-item:hover{background:#F4F5F7}
.acc-dropdown-item.danger{color:#BF2600}
.acc-dropdown-item.danger:hover{background:#FFEBE6}
.acc-dropdown-item .material-symbols-outlined{font-size:16px;flex-shrink:0}

/* ── Stats row ── */
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #F4F5F7}
.acc-stat{text-align:center;padding:12px 6px;border-right:1px solid #F4F5F7}
.acc-stat:last-child{border-right:none}
.acc-stat-val{font-size:20px;font-weight:700;color:#172B4D;line-height:1.1}
.acc-stat-lbl{font-size:11px;color:#7A869A;margin-top:2px}

/* ── Metadata section ── */
.acc-meta{padding:12px 16px}
.acc-meta-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;border-bottom:1px solid #F4F5F7;
  font-size:13px;color:#44546F;
}
.acc-meta-row:last-child{border-bottom:none}
.acc-meta-lbl{flex:1;font-weight:500}
.acc-meta-val{color:#172B4D;font-size:12.5px}
.acc-meta-add{
  margin-left:4px;color:#0052CC;cursor:pointer;
  background:none;border:none;padding:2px;
  display:flex;align-items:center;
}
.acc-meta-add:hover{color:#0747A6}
.acc-meta-add .material-symbols-outlined{font-size:18px}

/* ── "New account" dashed card ── */
.acc-card-new{
  border:2px dashed #C1C7D0;background:transparent;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  min-height:180px;cursor:pointer;
  transition:border-color 0.15s,background 0.15s;
  text-decoration:none;color:#7A869A;gap:8px;
  font-family:inherit;width:100%;
}
.acc-card-new:hover{border-color:#0052CC;background:rgba(0,82,204,0.04);color:#0052CC}
.acc-card-new .material-symbols-outlined{font-size:36px}
.acc-card-new-lbl{font-size:14px;font-weight:500}

/* ── Section headings ── */
.acc-section-title{
  font-size:14px;font-weight:600;color:#172B4D;
  margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
  padding-bottom:9px;border-bottom:2px solid #DFE1E6;
}

/* ── Grant access: permission card selection ── */
.access-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
.access-type-card{
  border:2px solid #DFE1E6;border-radius:6px;padding:14px;
  cursor:pointer;transition:border-color 0.15s,background 0.15s;
  user-select:none;
}
.access-type-card.selected{border-color:#0052CC;background:#DEEBFF}
.access-type-card input{display:none}
.access-type-card-title{font-size:13px;font-weight:700;color:#172B4D;margin-bottom:5px}
.access-type-card-desc{font-size:12px;color:#44546F;line-height:1.4}

/* ── Dark mode ── */
[data-theme="dark"] .acc-card{background:#161B22;border-color:#21262D}
[data-theme="dark"] .acc-card.active-account{border-color:#388BFD}
[data-theme="dark"] .acc-card-hd{border-bottom-color:#21262D}
[data-theme="dark"] .acc-card-title{color:#C9D1D9}
[data-theme="dark"] .acc-stats{border-bottom-color:#21262D}
[data-theme="dark"] .acc-stat{border-right-color:#21262D}
[data-theme="dark"] .acc-stat-val{color:#C9D1D9}
[data-theme="dark"] .acc-stat-lbl{color:#6E7681}
[data-theme="dark"] .acc-meta-row{border-bottom-color:#21262D;color:#8B949E}
[data-theme="dark"] .acc-meta-val{color:#C9D1D9}
[data-theme="dark"] .acc-meta-add{color:#388BFD}
[data-theme="dark"] .acc-section-title{color:#C9D1D9;border-bottom-color:#21262D}
[data-theme="dark"] .acc-card-new{border-color:#30363D;color:#6E7681}
[data-theme="dark"] .acc-card-new:hover{border-color:#388BFD;color:#388BFD}
[data-theme="dark"] .acc-dropdown-menu{background:#161B22;border-color:#30363D}
[data-theme="dark"] .acc-dropdown-item{color:#C9D1D9}
[data-theme="dark"] .acc-dropdown-item:hover{background:#21262D}
[data-theme="dark"] .acc-dropdown-item.danger{color:#FF7B72}
[data-theme="dark"] .acc-dropdown-item.danger:hover{background:#2D0A00}
[data-theme="dark"] .access-type-card{border-color:#30363D}
[data-theme="dark"] .access-type-card.selected{border-color:#388BFD;background:#0C2044}
[data-theme="dark"] .access-type-card-title{color:#C9D1D9}
[data-theme="dark"] .access-type-card-desc{color:#8B949E}

/* ── Responsive ── */
@media(max-width:1100px){.acc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.acc-grid{grid-template-columns:1fr}}

/* =====================================================================
   OFFCANVAS (slide-in panel from right)
   ===================================================================== */
.offcanvas-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(9,30,66,0.42);z-index:650;
}
.offcanvas-backdrop.open{display:block}
.offcanvas-panel{
  position:fixed;top:0;right:-680px;
  width:min(680px,100vw);height:100%;
  background:#fff;z-index:660;
  box-shadow:-4px 0 24px rgba(9,30,66,0.18);
  transition:right 0.28s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.offcanvas-panel.open{right:0}
.offcanvas-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid #DFE1E6;flex-shrink:0;
}
.offcanvas-hd h3{font-size:18px;font-weight:600;color:#172B4D;margin:0}
.offcanvas-body{flex:1;overflow-y:auto;padding:20px 24px}
.offcanvas-footer{
  padding:14px 24px;border-top:1px solid #DFE1E6;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}

[data-theme="dark"] .offcanvas-panel{background:#161B22}
[data-theme="dark"] .offcanvas-hd{border-bottom-color:#21262D}
[data-theme="dark"] .offcanvas-hd h3{color:#C9D1D9}
[data-theme="dark"] .offcanvas-footer{border-top-color:#21262D}

/* =====================================================================
   RESOURCE PAGES  (resources.php?t=ID  /  ?c=ID etc.)
   ===================================================================== */

/* ── Header card ── */
.res-header-card .card-body{padding:16px 20px}
.res-header-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.res-header-icon{
  width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.res-header-icon.income{background:#E3FCEF;color:#006644}
.res-header-icon.expense{background:#FFEBE6;color:#BF2600}
.res-header-icon.neutral{background:#DEEBFF;color:#0052CC}
.res-header-icon .material-symbols-outlined{font-size:28px}
.res-header-info{flex:1;min-width:0}
.res-title{font-size:20px;font-weight:700;color:#172B4D;margin:0 0 3px;letter-spacing:-0.2px}
.res-subtitle{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;color:#7A869A;margin:0 0 6px;
}
.res-subtitle a{color:#0052CC;text-decoration:none}
.res-subtitle a:hover{text-decoration:underline}
.res-extra-link{font-size:12.5px;color:#0052CC;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.res-extra-link:hover{text-decoration:underline}
.res-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}

/* ── Button tooltips (data-tip) ── */
.tip{position:relative}
.tip[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#172B4D;color:#fff;font-size:11px;font-weight:500;font-family:'Inter',sans-serif;white-space:nowrap;
  padding:4px 9px;border-radius:4px;pointer-events:none;
  opacity:0;transition:opacity 0.15s;z-index:600;
}
.tip[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#172B4D;
  pointer-events:none;opacity:0;transition:opacity 0.15s;z-index:600;
}
.tip[data-tip]:hover::after,.tip[data-tip]:hover::before{opacity:1}
.tip-end[data-tip]::after{left:auto;right:0;transform:none}
.tip-end[data-tip]::before{left:auto;right:10px;transform:none}
.tip-start[data-tip]::after{left:0;transform:none}
.tip-start[data-tip]::before{left:10px;transform:none}
/* Multi-line tooltip variant — rendering handled by JS (fixed-position) */
.tip-ml[data-tip]{position:relative;cursor:default}
.tip-ml[data-tip]::after,.tip-ml[data-tip]::before{display:none!important}
[data-theme="dark"] .tip[data-tip]::after{background:#E6EDF3;color:#0D1117}
[data-theme="dark"] .tip[data-tip]::before{border-top-color:#E6EDF3}

/* ── Page layout ── */
.res-layout{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:start;margin-top:16px}

/* ── KPI tiles row inside resource page ── */
.res-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}

/* ── Detail info rows ── */
.res-detail-card{padding:12px 16px}
.res-detail-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid #F4F5F7;font-size:13px;
}
.res-detail-row:last-child{border-bottom:none}
.res-detail-lbl{color:#5E6C84;font-weight:500;flex-shrink:0}
.res-detail-val{color:#172B4D;text-align:right}
.res-detail-val a{color:#0052CC;text-decoration:none}
.res-detail-val a:hover{text-decoration:underline}
.res-divider{height:1px;background:#F4F5F7;margin:8px 0}

/* ── Chart legend toggles ── */
.chart-legend-toggles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chart-toggle-btn{
  display:flex;align-items:center;gap:5px;
  font-size:11.5px;color:#7A869A;
  background:none;border:none;cursor:pointer;font-family:inherit;
  padding:2px 0;transition:opacity 0.15s;
}
.chart-toggle-btn.hidden-ds{opacity:0.35}
.chart-toggle-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.chart-period-selector{font-size:12px;color:#5E6C84}

/* ── Current transaction row highlight ── */
tr.res-current-row td{background:rgba(0,82,204,0.06)!important;font-weight:500}
tr.res-current-row:hover td{background:rgba(0,82,204,0.1)!important}

/* ── Inline notice inside form ── */
.form-notice{
  background:#FFFAE6;border:1px solid #FFD380;border-radius:4px;
  padding:10px 12px;font-size:12.5px;color:#44546F;margin-bottom:14px;
  display:flex;align-items:flex-start;gap:8px;
}
.form-notice .material-symbols-outlined{font-size:16px;color:#E56910;flex-shrink:0;margin-top:1px}

/* ── Dark mode ── */
[data-theme="dark"] .res-header-icon.income{background:#0A2A1A;color:#3FB950}
[data-theme="dark"] .res-header-icon.expense{background:#2D0A00;color:#FF7B72}
[data-theme="dark"] .res-header-icon.neutral{background:#0C2044;color:#388BFD}
[data-theme="dark"] .res-title{color:#C9D1D9}
[data-theme="dark"] .res-subtitle{color:#6E7681}
[data-theme="dark"] .res-detail-row{border-bottom-color:#21262D}
[data-theme="dark"] .res-detail-lbl{color:#8B949E}
[data-theme="dark"] .res-detail-val{color:#C9D1D9}
[data-theme="dark"] .res-divider{background:#21262D}
[data-theme="dark"] tr.res-current-row td{background:rgba(56,139,253,0.08)!important}
[data-theme="dark"] tr.res-current-row:hover td{background:rgba(56,139,253,0.14)!important}
[data-theme="dark"] .chart-toggle-btn{color:#6E7681}
[data-theme="dark"] .form-notice{background:#2D2000;border-color:#4D3300;color:#8B949E}
[data-theme="dark"] .form-notice .material-symbols-outlined{color:#F0B429}

/* ── Responsive ── */
@media(max-width:1100px){
  .res-layout{grid-template-columns:1fr}
  .res-left{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:840px){
  .res-tiles{grid-template-columns:repeat(3,1fr)}
  .res-left{grid-template-columns:1fr}
  .offcanvas-panel{width:100vw;right:-100vw}
}
@media(max-width:540px){
  .res-tiles{grid-template-columns:1fr 1fr}
  .res-header-actions{width:100%;margin-left:0}
  .res-header-inner{align-items:flex-start}
}

/* =====================================================================
   TABLE PAGINATION
   ===================================================================== */

/* ── Pagination bar ── */
.tbl-pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-top:1px solid #F4F5F7;
  flex-wrap:wrap;gap:8px;
}
.tbl-pagination-info{font-size:12.5px;color:#7A869A}
.tbl-pagination-btns{display:flex;align-items:center;gap:3px}

/* ── Page number / nav buttons ── */
.tbl-page-btn{
  min-width:30px;height:30px;padding:0 8px;
  border-radius:4px;border:1px solid #DFE1E6;
  background:#fff;color:#172B4D;
  font-size:12.5px;font-weight:500;
  cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.1s,border-color 0.1s;
}
.tbl-page-btn:hover:not(:disabled){background:#F4F5F7}
.tbl-page-btn.active{background:#0052CC;color:#fff;border-color:#0052CC;font-weight:600}
.tbl-page-btn:disabled{opacity:0.3;cursor:default}
.tbl-page-btn .material-symbols-outlined{font-size:15px}
.tbl-page-ellipsis{
  min-width:24px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;color:#7A869A;
}

/* ── Page-size chip button ── */
.page-size-btn{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 6px 3px 10px;border-radius:12px;border:none;
  background:#DEEBFF;color:#0052CC;
  font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background 0.12s;
}
.page-size-btn:hover{background:#B3D4FF}
.page-size-btn .material-symbols-outlined{font-size:13px}

/* ── Dark mode ── */
[data-theme="dark"] .tbl-pagination{border-top-color:#21262D}
[data-theme="dark"] .tbl-pagination-info{color:#6E7681}
[data-theme="dark"] .tbl-page-btn{background:#161B22;border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .tbl-page-btn:hover:not(:disabled){background:#21262D}
[data-theme="dark"] .tbl-page-btn.active{background:#0052CC;color:#fff;border-color:#0052CC}
[data-theme="dark"] .tbl-page-ellipsis{color:#6E7681}
[data-theme="dark"] .page-size-btn{background:#0C2044;color:#388BFD}
[data-theme="dark"] .page-size-btn:hover{background:#163353}

/* =====================================================================
   DASHBOARD 2 — Enhanced Homepage Components
   ===================================================================== */

/* ── 5-column KPI grid ── */
.kpi-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
@media(max-width:1200px){.kpi-row-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.kpi-row-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.kpi-row-5{grid-template-columns:1fr 1fr}}

/* ── Health Score ring ── */
.health-ring{
  width:54px;height:54px;border-radius:50%;
  position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.health-ring::after{
  content:'';position:absolute;width:40px;height:40px;
  border-radius:50%;background:#fff;
}
.health-ring-num{position:relative;z-index:1;font-size:14px;font-weight:700;color:#172B4D;line-height:1}

/* Score colours */
.ring-good   { background:conic-gradient(#36B37E 78%,#F4F5F7 78%); }
.ring-warn   { background:conic-gradient(#FFAB00 60%,#F4F5F7 60%); }
.ring-danger { background:conic-gradient(#DE350B 40%,#F4F5F7 40%); }

/* ── Pace / safe-to-spend mini gauge ── */
.hp2-gauge-wrap{
  height:6px;background:#F4F5F7;border-radius:100px;
  overflow:hidden;margin:8px 0 4px;
}
.hp2-gauge-fill{height:100%;border-radius:100px}
.hp2-gauge-label{display:flex;justify-content:space-between;font-size:11px;color:#7A869A}

/* ── Insight items ── */
.insight-list{display:flex;flex-direction:column;gap:8px}
.insight-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 13px;border-radius:4px;border:1px solid #DFE1E6;
  border-left-width:3px;background:#fff;
}
.insight-item.success{border-left-color:#36B37E;background:#F3FBF7}
.insight-item.warn   {border-left-color:#FFAB00;background:#FFFCF0}
.insight-item.danger {border-left-color:#DE350B;background:#FFF3F0}
.insight-item.info   {border-left-color:#0052CC;background:#F0F5FF}
.insight-icon{font-size:17px;flex-shrink:0;margin-top:1px}
.insight-item.success .insight-icon{color:#006644}
.insight-item.warn    .insight-icon{color:#974F0C}
.insight-item.danger  .insight-icon{color:#BF2600}
.insight-item.info    .insight-icon{color:#0052CC}
.insight-title{font-size:12.5px;font-weight:600;color:#172B4D;margin-bottom:2px}
.insight-body{font-size:11.5px;color:#44546F;line-height:1.4}

/* ── Upcoming payment items ── */
.upcoming-list{padding:10px 16px}
.upcoming-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 0;border-bottom:1px solid #F4F5F7;
}
.upcoming-item:last-child{border-bottom:none}
.upcoming-info{flex:1;min-width:0}
.upcoming-name{font-size:13px;font-weight:500;color:#172B4D;line-height:1.2}
.upcoming-due{font-size:11px;color:#7A869A;margin-top:1px}
.upcoming-amount{font-size:13px;font-weight:600;color:#172B4D;white-space:nowrap}
.upcoming-amount.urgent{color:#BF2600}
.upcoming-days-badge{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
  background:#FFEBE6;color:#BF2600;white-space:nowrap;flex-shrink:0;
}

/* ── Savings goal progress ── */
.goal-item{padding:10px 0;border-bottom:1px solid #F4F5F7}
.goal-item:last-child{border-bottom:none}
.goal-hd{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.goal-name{font-size:13px;font-weight:500;color:#172B4D}
.goal-amounts{font-size:11.5px;color:#7A869A}
.goal-sub{font-size:11px;color:#7A869A;margin-top:3px}

/* ── Subscription items ── */
.sub-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid #F4F5F7;font-size:13px;
}
.sub-item:last-child{border-bottom:none}
.sub-icon{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sub-icon .material-symbols-outlined{font-size:16px}
.sub-name{flex:1;font-weight:500;color:#172B4D}
.sub-monthly{color:#7A869A;font-size:12px}
.sub-yearly{font-weight:600;color:#172B4D;white-space:nowrap}

/* ── Recent transaction rows ── */
.recent-tx-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid #F4F5F7;
}
.recent-tx-row:last-child{border-bottom:none}
.recent-tx-left{flex:1;min-width:0}
.recent-tx-desc{font-size:13px;font-weight:500;color:#172B4D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-tx-meta{font-size:11px;color:#7A869A;margin-top:1px;display:flex;align-items:center;gap:5px}
.recent-tx-amt{font-size:13px;font-weight:600;white-space:nowrap}

/* ── Cash flow legend ── */
.cf-legend{display:flex;align-items:center;gap:16px;font-size:11.5px;color:#7A869A;margin-top:10px;flex-wrap:wrap}
.cf-legend-item{display:flex;align-items:center;gap:5px}
.cf-legend-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* ── FI progress ── */
.fi-wrap{padding:12px 16px}
.fi-number{font-size:24px;font-weight:700;color:#172B4D;letter-spacing:-0.5px;line-height:1.1}
.fi-sub{font-size:11.5px;color:#7A869A;margin-top:3px}
.fi-prog-bar{height:8px;background:#F4F5F7;border-radius:100px;overflow:hidden;margin:10px 0 5px}
.fi-prog-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#0052CC,#36B37E)}
.fi-labels{display:flex;justify-content:space-between;font-size:11px;color:#7A869A}

/* ── Section header (dashboard2 style) ── */
.hp2-sec-hd{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:#172B4D;
  margin-bottom:10px;padding-bottom:9px;border-bottom:2px solid #DFE1E6;
}
.hp2-sec-hd .material-symbols-outlined{font-size:16px;color:#0052CC}

/* ── Dark mode ── */
[data-theme="dark"] .health-ring::after{background:#161B22}
[data-theme="dark"] .health-ring-num{color:#C9D1D9}
[data-theme="dark"] .ring-good  {background:conic-gradient(#3FB950 78%,#21262D 78%)}
[data-theme="dark"] .ring-warn  {background:conic-gradient(#F0B429 60%,#21262D 60%)}
[data-theme="dark"] .ring-danger{background:conic-gradient(#FF7B72 40%,#21262D 40%)}
[data-theme="dark"] .hp2-gauge-wrap{background:#21262D}
[data-theme="dark"] .insight-item{border-color:#21262D;background:#161B22}
[data-theme="dark"] .insight-item.success{background:#0A1F14;border-left-color:#3FB950}
[data-theme="dark"] .insight-item.warn   {background:#1F1800;border-left-color:#F0B429}
[data-theme="dark"] .insight-item.danger {background:#1F0500;border-left-color:#FF7B72}
[data-theme="dark"] .insight-item.info   {background:#0C1A2E;border-left-color:#388BFD}
[data-theme="dark"] .insight-item.success .insight-icon{color:#3FB950}
[data-theme="dark"] .insight-item.warn    .insight-icon{color:#F0B429}
[data-theme="dark"] .insight-item.danger  .insight-icon{color:#FF7B72}
[data-theme="dark"] .insight-item.info    .insight-icon{color:#388BFD}
[data-theme="dark"] .insight-title{color:#C9D1D9}
[data-theme="dark"] .insight-body{color:#8B949E}
[data-theme="dark"] .upcoming-item{border-bottom-color:#21262D}
[data-theme="dark"] .upcoming-name{color:#C9D1D9}
[data-theme="dark"] .upcoming-due{color:#6E7681}
[data-theme="dark"] .upcoming-amount{color:#C9D1D9}
[data-theme="dark"] .goal-item{border-bottom-color:#21262D}
[data-theme="dark"] .goal-name{color:#C9D1D9}
[data-theme="dark"] .goal-amounts,[data-theme="dark"] .goal-sub{color:#6E7681}
[data-theme="dark"] .sub-item{border-bottom-color:#21262D}
[data-theme="dark"] .sub-name{color:#C9D1D9}
[data-theme="dark"] .sub-monthly{color:#6E7681}
[data-theme="dark"] .sub-yearly{color:#C9D1D9}
[data-theme="dark"] .recent-tx-row{border-bottom-color:#21262D}
[data-theme="dark"] .recent-tx-desc{color:#C9D1D9}
[data-theme="dark"] .recent-tx-meta{color:#6E7681}
[data-theme="dark"] .cf-legend{color:#6E7681}
[data-theme="dark"] .fi-number{color:#C9D1D9}
[data-theme="dark"] .fi-sub{color:#6E7681}
[data-theme="dark"] .fi-prog-bar{background:#21262D}
[data-theme="dark"] .fi-labels{color:#6E7681}
[data-theme="dark"] .hp2-sec-hd{color:#C9D1D9;border-bottom-color:#21262D}
[data-theme="dark"] .hp2-sec-hd .material-symbols-outlined{color:#388BFD}

/* ── Chart period dropdown ── */
.chart-period-wrap{position:relative;display:inline-flex;align-items:center}
.chart-period-btn{
  font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;
  padding:2px 7px;border-radius:3px;border:none;
  background:#DEEBFF;color:#0747A6;
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
}
.chart-period-btn::after{
  content:'▾';font-size:10px;opacity:0.7;margin-left:1px;
}
.chart-period-btn:hover{background:#B3D4FF}
.chart-period-dropdown{
  position:absolute;top:calc(100% + 4px);right:0;z-index:200;
  background:#fff;border:1px solid #DFE1E6;border-radius:6px;
  box-shadow:0 4px 12px rgba(9,30,66,0.12);min-width:160px;
  display:none;padding:4px 0;
}
.chart-period-dropdown.open{display:block}
.cpd-item{
  padding:7px 14px;font-size:12.5px;color:#42526E;cursor:pointer;
  transition:background 0.12s;white-space:nowrap;
}
.cpd-item:hover{background:#F4F5F7}
.cpd-item.active{color:#0052CC;font-weight:600;background:#EAF2FF}

/* ── Chart loading overlay ── */
.chart-box.chart-loading,.donut-box.chart-loading{opacity:0.4;pointer-events:none;transition:opacity 0.2s}

/* ── Dark mode: chart period dropdown ── */
[data-theme="dark"] .chart-period-btn{background:#0C2044;color:#388BFD}
[data-theme="dark"] .chart-period-btn:hover{background:#0E2C55}
[data-theme="dark"] .chart-period-dropdown{background:#161B22;border-color:#30363D;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
[data-theme="dark"] .cpd-item{color:#C9D1D9}
[data-theme="dark"] .cpd-item:hover{background:#21262D}
[data-theme="dark"] .cpd-item.active{color:#388BFD;background:#0C1A2E}

/* ── Page preloader ── */
#scyPreloader{
  position:fixed;
  z-index:9999;
  background:rgba(255,255,255,0.94);
  display:none;align-items:center;justify-content:center;
  opacity:1;transition:opacity 0.22s;
  /* top/left/width/height set dynamically by JS */
}
#scyPreloader.scy-pl-visible{display:flex}
#scyPreloader.scy-pl-fading{opacity:0}
.scy-loader-logo{position:relative;width:50px;height:50px}
.scy-logo-top,.scy-logo-bottom{position:absolute;width:auto;height:auto}
.scy-logo-top{
  top:0;left:-10px;z-index:1;
  animation:scyReveal 1.2s ease-in-out infinite;
}
.scy-logo-bottom{
  top:10px;left:2px;z-index:2;
  animation:scyReveal 1.2s ease-in-out infinite;
  animation-delay:0.6s;
}
@keyframes scyReveal{
  0%  {clip-path:inset(100% 0 0 0);opacity:0}
  10% {opacity:1}
  50% {clip-path:inset(0 0 0 0);opacity:1}
  90% {clip-path:inset(0 0 0 0);opacity:1}
  100%{clip-path:inset(100% 0 0 0);opacity:0}
}
[data-theme="dark"] #scyPreloader{background:rgba(13,17,23,0.94)}

/* ===== DASHBOARD BOTTOM 3-COL GRID ===== */
.dash-bottom-grid{display:grid;grid-template-columns:1.15fr 1fr 260px;gap:18px;margin-bottom:20px}
.dash-bottom-grid > *{min-width:0}
.three-col > *{min-width:0}
.two-col > *{min-width:0}
@media(max-width:1200px){.dash-bottom-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1200px){.dash-stat-col{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:700px){.dash-bottom-grid{grid-template-columns:1fr}.dash-stat-col{grid-template-columns:1fr}}
/* Activity list (col 2) */
.dash-activity-list{display:flex;flex-direction:column}
/* Timeline (replaces activity list) */
.dash-timeline{padding:4px 0}
.dtl-item{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 14px;text-decoration:none;color:inherit;position:relative;transition:background 0.1s}
.dtl-item:hover{background:#F8F9FA}
.dtl-item::before{content:'';position:absolute;left:29px;top:0;bottom:0;width:2px;background:#F4F5F7;z-index:0}
.dtl-item:first-child::before{top:50%}
.dtl-item:last-child::before{bottom:50%}
.dtl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;position:relative}
.dtl-in{background:#E3FCEF;color:#006644}
.dtl-out{background:#FFEBE6;color:#BF2600}
.dtl-body{flex:1;min-width:0}
.dtl-cat{font-size:12.5px;font-weight:700;color:#172B4D;display:flex;align-items:center;gap:5px;margin-bottom:2px}
.dtl-desc{font-size:12px;color:#44546F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.dtl-when{font-size:11px;color:#7A869A}
.dtl-amount{font-size:13px;font-weight:600;text-align:right;white-space:nowrap;line-height:1.3}
.dal-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #F4F5F7;text-decoration:none;transition:background 0.1s;color:inherit}
.dal-item:last-child{border-bottom:none}
.dal-item:hover{background:#F8F9FA}
.dal-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dal-icon .material-symbols-outlined{font-size:16px}
.dal-in{background:#E3FCEF;color:#006644}
.dal-out{background:#FFEBE6;color:#BF2600}
.dal-body{flex:1;min-width:0}
.dal-desc{font-size:13px;font-weight:500;color:#172B4D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dal-cat{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#7A869A;margin-top:2px}
.dal-amount{font-size:13px;font-weight:600;text-align:right;flex-shrink:0;line-height:1.3}
/* Stat cards (col 3) */
.dash-stat-col{display:flex;flex-direction:column;gap:14px}
.dash-stat-card{padding:18px 20px}
.dsc-title{font-size:12.5px;color:#44546F;margin-bottom:10px;font-weight:500}
.dsc-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px;margin-bottom:12px}
.dsc-good{background:#E3FCEF;color:#006644}
.dsc-bad{background:#FFEBE6;color:#BF2600}
.dsc-row{display:flex;gap:0;border-top:1px solid #F4F5F7;padding-top:12px;margin-top:4px}
.dsc-col{flex:1}
.dsc-col-right{text-align:right}
.dsc-lbl{font-size:11.5px;font-weight:600;color:#7A869A;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:4px}
.dsc-val{font-size:22px;font-weight:700;color:#172B4D;line-height:1.1}
.dsc-cur{font-size:12px;font-weight:400;color:#7A869A}
.dsc-val-income{color:#006644}
.dsc-val-expense{color:#172B4D}
/* dark mode */
[data-theme="dark"] .dal-item:hover{background:#21262D}
[data-theme="dark"] .dal-item{border-bottom-color:#21262D}
[data-theme="dark"] .dal-desc{color:#C9D1D9}
[data-theme="dark"] .dal-in{background:#0A3622;color:#3FB950}
[data-theme="dark"] .dal-out{background:#3D0B0B;color:#FF7B72}
[data-theme="dark"] .dsc-title{color:#8B949E}
[data-theme="dark"] .dsc-lbl{color:#6E7681}
[data-theme="dark"] .dsc-val{color:#C9D1D9}
[data-theme="dark"] .dsc-row{border-top-color:#21262D}
.tut-card{position:fixed;bottom:22px;right:22px;z-index:1100;width:296px;background:#fff;border-radius:12px;box-shadow:0 4px 28px rgba(9,30,66,0.18);overflow:hidden;animation:tut-in 0.3s ease;transition:opacity 0.3s,transform 0.3s}
.tut-hidden-start{display:none}
@keyframes tut-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.tut-progress-bar{height:3px;background:#F4F5F7}
.tut-progress-fill{height:3px;background:#0052CC;transition:width 0.4s ease}
.tut-inner{padding:14px 16px 16px}
.tut-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tut-step-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#7A869A}
.tut-close{width:24px;height:24px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:#7A869A;cursor:pointer;padding:0}
.tut-close:hover{background:#F4F5F7;color:#172B4D}
.tut-icon-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tut-icon-wrap{width:34px;height:34px;border-radius:8px;background:#EBF2FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0052CC}
.tut-title{font-size:14px;font-weight:700;color:#172B4D;line-height:1.3}
.tut-desc{font-size:12.5px;color:#44546F;line-height:1.55;margin:0 0 12px}
.tut-actions{display:flex;flex-direction:column;gap:6px}
.tut-btn-main{width:100%;padding:9px 14px;background:#0052CC;color:#fff;border:none;border-radius:4px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s}
.tut-btn-main:hover:not(:disabled){background:#0747A6}
.tut-btn-main:disabled{opacity:.65;cursor:not-allowed}
/* Page info alert (tutorial) */
.tut-info-alert{display:flex;align-items:flex-start;gap:10px;background:#EBF2FF;border:1px solid #B3D4FF;border-radius:6px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#172B4D;line-height:1.55}
.tut-info-alert .material-symbols-outlined{font-size:18px;color:#0052CC;flex-shrink:0;margin-top:1px}
/* No-credits layout */
.tx-layout.no-credits{grid-template-columns:1fr}
.tx-layout.no-credits .credit-cards-sidebar{display:none}
/* Transaction row selection */
#txTableBody tr.tx-selected td{background:#EBF2FF !important}
[data-theme="dark"] #txTableBody tr.tx-selected td{background:#0C2044 !important}
#txTableBody tr.tx-sel-clickable td:first-child{cursor:pointer;user-select:none}
#txTableBody tr.tx-sel-clickable td:first-child:hover span{opacity:.7}
/* Selection sum panel */
.tx-sel-panel{position:fixed;bottom:80px;left:80px;z-index:800;background:#fff;border-radius:10px;box-shadow:0 4px 24px rgba(9,30,66,0.18);padding:14px 18px;min-width:230px;animation:tut-in 0.2s ease;user-select:none}
.tx-sel-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tx-sel-count{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:#7A869A}
.tx-sel-x{background:none;border:none;font-size:18px;line-height:1;color:#7A869A;cursor:pointer;padding:0 0 0 8px}
.tx-sel-x:hover{color:#172B4D}
.tx-sel-total{font-size:22px;font-weight:700;font-family:'Inter',sans-serif;line-height:1.2}
.tx-sel-breakdown{font-size:12px;color:#7A869A;margin-top:5px}
[data-theme="dark"] .tx-sel-panel{background:#161B22;box-shadow:0 4px 24px rgba(0,0,0,0.5)}
[data-theme="dark"] .tx-sel-count{color:#6E7681}
[data-theme="dark"] .tx-sel-breakdown{color:#6E7681}
/* Highlight ring */
.tutorial-hl{outline:2.5px solid #0052CC !important;outline-offset:3px !important;border-radius:4px !important;animation:tut-pulse 1.5s ease-in-out infinite}
@keyframes tut-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,82,204,0.3)}50%{box-shadow:0 0 0 8px rgba(0,82,204,0)}}
/* Email confirmation alert banner */
.email-confirm-alert{display:flex;align-items:center;gap:10px;background:#FFFAE6;border:1px solid #FFD700;border-radius:6px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#172B4D}
.email-confirm-alert a{color:#0052CC;text-decoration:none;font-weight:500}
.email-confirm-alert a:hover{text-decoration:underline}
/* Dark mode */
[data-theme="dark"] .tut-card{background:#161B22}
[data-theme="dark"] .tut-progress-bar{background:#21262D}
[data-theme="dark"] .tut-step-badge{color:#6E7681}
[data-theme="dark"] .tut-close:hover{background:#21262D}
[data-theme="dark"] .tut-icon-wrap{background:#0C2044}
[data-theme="dark"] .tut-title{color:#C9D1D9}
[data-theme="dark"] .tut-desc{color:#8B949E}
[data-theme="dark"] .email-confirm-alert{background:#161B22;border-color:#E5A200;color:#C9D1D9}

/* ===== ONBOARDING WIZARD ===== */
.ob-overlay{position:fixed;inset:0;z-index:950;background:rgba(9,30,66,0.6);display:none;align-items:center;justify-content:center;padding:16px}
.ob-overlay.active{display:flex}
.ob-card{background:#fff;border-radius:16px;width:100%;max-width:760px;max-height:92vh;overflow:hidden;box-shadow:0 24px 80px rgba(9,30,66,0.32);display:flex;flex-direction:column;animation:ob-in 0.26s ease}
@keyframes ob-in{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:none}}
.ob-progress{display:flex;align-items:center;padding:20px 28px 0;gap:0}
.ob-step-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:#F4F5F7;color:#7A869A;transition:all 0.22s;flex-shrink:0}
.ob-step-dot.active{background:#0052CC;color:#fff;box-shadow:0 0 0 4px rgba(0,82,204,0.15)}
.ob-step-dot.done{background:#36B37E;color:#fff}
.ob-step-line{flex:1;height:2px;background:#F4F5F7;transition:background 0.3s}
.ob-step-line.done{background:#36B37E}
.ob-body{display:flex;flex:1;overflow:hidden;min-height:0}
.ob-left{width:240px;flex-shrink:0;background:linear-gradient(160deg,#EBF2FF 0%,#F0F7FF 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;text-align:center}
.ob-illus{width:160px;height:auto;margin-bottom:0}
.ob-iltext{font-size:12.5px;color:#44546F;line-height:1.6;margin:0}
.ob-right{flex:1;padding:28px 32px;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.ob-step-title{font-size:20px;font-weight:700;color:#172B4D;margin-bottom:4px}
.ob-step-sub{font-size:13px;color:#7A869A;margin-bottom:22px;line-height:1.5}
.ob-footer{padding:14px 24px;border-top:1px solid #F4F5F7;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#fff}
.ob-footer-left{display:flex;gap:8px}
.ob-footer-right{display:flex;gap:8px;align-items:center}
.ob-back{display:flex;align-items:center;gap:4px;padding:9px 14px;background:transparent;color:#172B4D;border:1px solid #DFE1E6;border-radius:4px;font-family:inherit;font-size:13px;cursor:pointer;transition:background 0.12s}
.ob-back:hover{background:#F4F5F7}
.ob-skip{font-size:13px;color:#7A869A;background:none;border:none;cursor:pointer;padding:9px 14px;border-radius:4px;font-family:inherit}
.ob-skip:hover{background:#F4F5F7;color:#172B4D}
.ob-skip:disabled,.ob-next:disabled{opacity:.6;cursor:not-allowed}
.ob-next{display:flex;align-items:center;gap:6px;padding:9px 20px;background:#0052CC;color:#fff;border:none;border-radius:4px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s}
.ob-next:hover:not(:disabled){background:#0747A6}
/* Category picker */
.ob-cat-group-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#7A869A;margin:12px 0 6px}
.ob-cat-group-label:first-child{margin-top:0}
.ob-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:4px}
.ob-cat-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1.5px solid #DFE1E6;border-radius:6px;cursor:pointer;font-size:12.5px;color:#172B4D;transition:all 0.13s;user-select:none}
.ob-cat-item:hover{border-color:#0052CC;background:#F0F7FF}
.ob-cat-item.selected{border-color:#0052CC;background:#E3F0FF;color:#0052CC}
.ob-cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ob-custom-add{display:flex;gap:8px;align-items:center}
/* Budget step */
.ob-bud-list{display:flex;flex-direction:column;gap:8px}
.ob-bud-row{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center;padding:10px 14px;background:#F8F9FA;border-radius:6px}
.ob-bud-label{display:flex;align-items:center;font-size:13px;color:#172B4D}
/* Dark mode */
[data-theme="dark"] .ob-card{background:#161B22}
[data-theme="dark"] .ob-left{background:linear-gradient(160deg,#0D1117 0%,#0C2044 100%)}
[data-theme="dark"] .ob-iltext{color:#8B949E}
[data-theme="dark"] .ob-step-title{color:#C9D1D9}
[data-theme="dark"] .ob-step-sub{color:#6E7681}
[data-theme="dark"] .ob-step-dot{background:#21262D;color:#6E7681}
[data-theme="dark"] .ob-step-line{background:#21262D}
[data-theme="dark"] .ob-footer{background:#161B22;border-color:#21262D}
[data-theme="dark"] .ob-back{border-color:#30363D;color:#C9D1D9}
[data-theme="dark"] .ob-back:hover{background:#21262D}
[data-theme="dark"] .ob-skip:hover{background:#21262D;color:#C9D1D9}
[data-theme="dark"] .ob-cat-item{border-color:#30363D;color:#C9D1D9;background:transparent}
[data-theme="dark"] .ob-cat-item:hover{border-color:#4C9AFF;background:#0C2044}
[data-theme="dark"] .ob-cat-item.selected{border-color:#4C9AFF;background:#0C2044;color:#4C9AFF}
[data-theme="dark"] .ob-bud-row{background:#21262D}
[data-theme="dark"] .ob-bud-label{color:#C9D1D9}
@media(max-width:600px){
  .ob-left{display:none}
  .ob-cat-grid{grid-template-columns:repeat(2,1fr)}
  .ob-card{max-height:98vh;border-radius:10px}
  .ob-right{padding:20px}
  .ob-progress{padding:16px 20px 0}
}