:root{
  --bg:#081322;
  --panel:#0d2330;
  --muted:#8ea3af;
  --accent:#2bd6a1;
  --card-grad-1:#07222b;
  --card-grad-2:#0c2e38;
}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:var(--bg);color:#d7e6ef;font-size:14px}

/* Plan selector (monthly/annual) */
.cf-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.cf-plan-option{cursor:pointer;display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);transition:border-color .15s ease,background-color .15s ease,transform .1s ease}
.cf-plan-option:hover{border-color:rgba(43,214,161,0.28);background:rgba(43,214,161,0.04);transform:translateY(-1px)}
.cf-plan-option input{margin-top:3px;accent-color:var(--accent)}
.cf-plan-option-body{display:block;min-width:0}
.cf-plan-option-title{font-weight:800;letter-spacing:.2px}
.cf-plan-option-meta{color:var(--muted);margin-top:2px}
.cf-plan-option.is-selected{border-color:rgba(43,214,161,0.55);background:rgba(43,214,161,0.08)}
.cf-plan-option.is-selected .cf-plan-option-title{color:#eafff7}

/* Scheduled Transactions */
.cf-page-subtitle{color:var(--muted);margin-top:-6px;margin-bottom:12px}
.cf-sched-top{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.cf-tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cf-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:#d7e6ef;text-decoration:none;font-weight:700}
.cf-tab.is-active{border-color:rgba(43,214,161,0.55);background:rgba(43,214,161,0.08)}

.cf-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cf-filter-group{display:flex;gap:8px;align-items:center}
.cf-filter-label{color:var(--muted);font-weight:700}
.cf-pill-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cf-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:#d7e6ef;text-decoration:none;font-weight:700;font-size:12px}
.cf-pill.is-active{border-color:rgba(43,214,161,0.55);background:rgba(43,214,161,0.08)}

.cf-sched-cal{margin-top:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:12px}
.cf-sched-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cf-cal-title{text-transform:lowercase;font-weight:900;letter-spacing:.2px}
.cf-cal-arrow{color:#d7e6ef;text-decoration:none;font-weight:900;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
.cf-cal-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;color:var(--muted);font-weight:800;font-size:12px;margin-bottom:8px}
.cf-cal-weekdays>div{padding-left:4px}
.cf-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cf-day{display:block;min-height:92px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(7,34,43,0.55),rgba(12,46,56,0.35));padding:10px;color:inherit;text-decoration:none;position:relative}
.cf-day.is-out{opacity:.55}
.cf-day.is-selected{border-color:rgba(43,214,161,0.75);box-shadow:0 0 0 1px rgba(43,214,161,0.15) inset}
.cf-day-num{font-weight:900;color:#eafff7}
.cf-day-badges{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.cf-evt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);width:max-content;max-width:100%}
.cf-evt-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:rgba(255,255,255,0.06);font-size:11px}
.cf-evt.is-expense{color:#FF6B6B}
.cf-evt.is-income{color:#34D065}

.cf-sched-pending{margin-top:14px}
.cf-sched-pending-title{font-weight:900;margin-bottom:10px}
.cf-pending-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;margin-bottom:10px}
.cf-pending-tags{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}
.cf-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
.cf-tag.is-expense{color:#FF6B6B}
.cf-tag.is-income{color:#34D065}
.cf-tag.is-secondary{color:var(--muted)}
.cf-tag.is-active{color:#34D065;border-color:rgba(52,208,101,0.35);background:rgba(52,208,101,0.08)}

.cf-pending-main{min-width:0}
.cf-pending-title{font-weight:900}
.cf-pending-meta{color:var(--muted);margin-top:2px}
.cf-pending-right{text-align:right}
.cf-pending-value{font-weight:900;font-size:16px}
.cf-pending-value.is-expense{color:#FF6B6B}
.cf-pending-value.is-income{color:#34D065}
.cf-pending-date{color:var(--muted);margin-top:2px}

.cf-pending-actions{grid-column:1 / -1;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.cf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#d7e6ef;font-weight:900;cursor:pointer}
.cf-btn-primary{background:rgba(43,214,161,0.08);border-color:rgba(43,214,161,0.35)}
.cf-btn-secondary{color:var(--muted)}

/* Scheduled modals: use the app's generic modal overlay (.cf-modal-overlay.show + .cf-modal)
  but keep scheduled-specific spacing and sections in dedicated classes. */
.cf-sched-modal{max-width:520px;width:100%;padding:0;overflow:hidden;max-height:calc(100vh - 48px)}
.cf-sched-modal-head{padding:14px 14px 10px 14px}
.cf-sched-modal-title{font-weight:900;font-size:16px;margin:0;color:#cfe6f2}
.cf-sched-modal-body{padding:0 14px 14px 14px;display:flex;flex-direction:column;gap:12px}
.cf-field .cf-hint{color:var(--muted);font-size:12px;margin-top:4px}
.cf-sched-modal-warning{margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);font-weight:900}
.cf-sched-modal-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:14px;border-top:1px solid rgba(255,255,255,0.06)}

.cf-list{display:flex;flex-direction:column;gap:10px}
.cf-list-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
.cf-list-right{text-align:right}

.cf-recurrences{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cf-rec-card{border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);border-radius:14px;padding:12px}
.cf-rec-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cf-rec-value{font-weight:900;font-size:18px}
.cf-rec-actions{display:flex;gap:8px}
.cf-icon-btn{border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#d7e6ef;border-radius:10px;padding:6px 10px;cursor:pointer}
.cf-rec-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cf-rec-meta{margin-top:10px;display:flex;flex-direction:column;gap:6px}

@media (max-width: 900px){
  .cf-recurrences{grid-template-columns:1fr}
}

/* Use a single (browser) scrollbar: let the page scroll normally */
body.cf-app{overflow:auto}
.cf-wrapper{display:flex;min-height:100vh;overflow:visible;align-items:stretch}

/* Desktop: fixed sidebar occupying left side independently from page content */
.cf-sidebar{width:209px;background:#071322;padding:20px 16px;display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;align-items:stretch;position:fixed;left:0;top:0;bottom:0;z-index:60;overflow-y:auto}
.cf-brand{font-weight:700;color:#1BB788;font-size:22px;margin-bottom:6px;display:flex;align-items:center;gap:8px}


.cf-logo{height:28px;width:auto;border-radius:10px;object-fit:cover;}
.cf-nav-icon-img {
  width: 22px;              /* tamanho do ícone aumentado em ~20% */
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Cor dos ícones de navegação */
.cf-icon-tint{
  width:18px;
  height:18px;
  display:inline-block;
  background-color: var(--icon-color, #1BB788) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
}

/* Ícones de dashboard */

.cf-icon-dashboard{
  --mask-url: url('/Imagens/dashboard.png');
  --icon-color: #1BB788; 
}

.cf-icon-transactions{
  --mask-url: url('/Imagens/trans.png');
  --icon-color: #1BB788; 
}

.cf-icon-categoria{
  --mask-url: url('/Imagens/pasta-aberta.png');
  --icon-color: #1BB788; 
}

.cf-icon-calendario{
  --mask-url: url('/Imagens/calendario.png');
  --icon-color: #1BB788; 
}

.cf-icon-meta{
  --mask-url: url('/Imagens/seta-de-alvo.png');
  --icon-color: #1BB788; 
}

.cf-icon-trans_agenda{
  --mask-url: url('/Imagens/relogio.png');
  --icon-color: #1BB788; 
}

.cf-icon-cartao{
  --mask-url: url('/Imagens/cartao-de-credito.png');
  --icon-color: #1BB788; 
}

.cf-icon-banco{
  --mask-url: url('/Imagens/banco.png');
  --icon-color: #1BB788; 
}
.cf-icon-relatorios{
  --mask-url: url('/Imagens/relatorio-de-dados.png');
  --icon-color: #1BB788; 
}
.cf-icon-tutoriais{
  --mask-url: url('/Imagens/livro.png');
  --icon-color: #1BB788; 
}

.cf-icon-wallet{
  --mask-url: url('/Imagens/wallet.png');
  --icon-color: #ffffff; 
}

.cf-icon-cima{
  --mask-url: url('/Imagens/seta-cima.png');
  --icon-color: #34D065; 
 
}

.cf-icon-baixo{
  --mask-url: url('/Imagens/seta-baixo.png');
  --icon-color: #FF6B6B; 
}

.cf-top{padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.02);margin-bottom:12px}
.cf-nav{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px}
.nav-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:8px;color:#9fb0bd;text-decoration:none;font-size:15px}
.nav-item .icon{width:22px;text-align:center}
.nav-item{transition:background-color .18s ease,color .12s ease,transform .12s ease}
.nav-item .cf-icon-tint{transition:background-color .18s ease,opacity .12s ease}
.nav-item.active{background:#0f2b36;color:#fff}

/* hover state for left navigation */
.nav-item:hover{
  background: rgba(255,255,255,0.03);
  color: #fff;
  transform: translateX(2px);
}

/* tintable masked icons change color on hover */
.nav-item:hover .cf-icon-tint{
  background-color: var(--icon-hover-color, #2bd6a1) !important;
}
.cf-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,0.02);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.cf-bottom .small{color:#9fb0bd;text-decoration:none;font-size:120%}
.cf-main{flex:1;padding:20px 28px;overflow:visible;min-height:0;margin-left:209px}
.cf-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cf-header h1{margin:0;font-size:18px;font-weight:600}
.period-select{color:var(--muted);font-size:13px;margin-top:4px}
.btn-link{background:transparent;border:0;color:var(--accent);cursor:pointer}
.cf-new{background:linear-gradient(90deg,#12a57a,#2bd6a1);color:#042427;padding:8px 12px;border-radius:10px;border:0;font-weight:600}
.cf-top-cards{display:flex;gap:12px;margin-bottom:16px}
.card{flex:1;display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:12px;background:linear-gradient(90deg,var(--card-grad-1),var(--card-grad-2));box-shadow:0 6px 18px rgba(3,10,18,0.5)}
.card-left{display:flex;flex-direction:column}
.card-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.card-value{font-size:18px;font-weight:700}
.card-icon{font-size:20px;opacity:0.9;display:flex;align-items:center;justify-content:center;min-width:40px}
.card .icon, .card .cf-icon-tint{width:34px;height:34px}
.cf-card-icon-img{width:34px;height:34px;object-fit:contain;display:block}
.card.income .card-value{color:#34d07a}
.card.expense .card-value{color:#ff6b6b}
.cf-panels{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.panel{background:var(--panel);padding:14px;border-radius:12px;min-height:110px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.panel.big{grid-column:span 2}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.panel h3{margin:0;color:#cfe6f2;font-size:15px}
.legend{color:var(--muted);font-size:12px}
.dot{display:inline-block;width:10px;height:8px;border-radius:3px;margin:0 8px 0 12px}
.dot.income{background:#34d07a}
.dot.expense{background:#ff7b7b}
.empty{color:var(--muted);padding:26px 0;text-align:center}
.result{font-size:20px;font-weight:700}
.delta{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}
.delta.positive{background:#e6fff5;color:#056a4d;border:1px solid rgba(5,106,77,0.1)}
.delta.negative{background:rgba(255,123,123,0.12);color:#ff6b6b;border:1px solid rgba(255,107,107,0.12)}
.split{display:flex;flex-direction:column;gap:8px;margin-top:12px;color:var(--muted)}
.amount.income{color:#34d07a}
.amount.expense{color:#ff7b7b}
canvas{max-width:100%}

/* Goals summary (dashboard) */
.cf-goals-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cf-goal-item{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.06)}
.cf-goal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.cf-goal-name{font-weight:700;color:#d7e6ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-goal-pct{color:var(--muted);font-size:12px}
.cf-progress{height:10px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}
.cf-progress-bar{height:100%;background:var(--accent);border-radius:999px}
.cf-goal-values{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-top:8px}

/* Agenda / FullCalendar (scoped) */
#cf-calendar{background:rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px}
.cf-calendar-msg{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.06);color:var(--muted);font-size:12px}
#cf-calendar .fc{color:#d7e6ef}
#cf-calendar .fc a{color:inherit;text-decoration:none}
#cf-calendar .fc .fc-toolbar-title{color:#d7e6ef}
#cf-calendar .fc .fc-header-toolbar{margin-bottom:10px}
#cf-calendar .fc .fc-toolbar{flex-wrap:wrap;gap:10px}
#cf-calendar .fc .fc-toolbar-chunk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#cf-calendar .fc .fc-col-header-cell-cushion{color:var(--muted)}
#cf-calendar .fc .fc-daygrid-day-number{color:#d7e6ef}
#cf-calendar .fc .fc-button{background:#071c26;border:1px solid rgba(255,255,255,0.10);color:#d7e6ef;border-radius:10px;padding:7px 10px;font-weight:600}
#cf-calendar .fc .fc-button:hover{border-color:rgba(43,214,161,0.35);color:var(--accent)}
#cf-calendar .fc .fc-button-primary:not(:disabled).fc-button-active,
#cf-calendar .fc .fc-button-primary:not(:disabled):active{background:rgba(43,214,161,0.18);border-color:rgba(43,214,161,0.35);color:var(--accent)}
#cf-calendar .fc .fc-scrollgrid{border:1px solid rgba(255,255,255,0.06)}
#cf-calendar .fc-theme-standard td,
#cf-calendar .fc-theme-standard th{border-color:rgba(255,255,255,0.06)}
#cf-calendar .fc .fc-daygrid-day-frame{border-radius:10px;overflow:hidden}
#cf-calendar .fc .fc-daygrid-day:hover{background:rgba(255,255,255,0.02)}
#cf-calendar .fc .fc-day-other{background:rgba(0,0,0,0.02)}
#cf-calendar .fc .fc-day-today{background:rgba(255,255,255,0.04)}
#cf-calendar .fc .fc-event{background:rgba(43,214,161,0.18);border:1px solid rgba(43,214,161,0.35);color:#d7e6ef;border-radius:10px;padding:2px 6px}
#cf-calendar .fc .fc-event-title{font-weight:600}
#cf-calendar .fc .fc-daygrid-event{white-space:normal}
#cf-calendar .fc .fc-daygrid-event .fc-event-title{white-space:normal;overflow:visible;text-overflow:unset}
#cf-calendar .fc .fc-daygrid-event .fc-event-time{white-space:nowrap}
#cf-calendar .fc .fc-daygrid-event .fc-event-main{white-space:normal}
#cf-calendar .fc .fc-popover{background:#071c26;border:1px solid rgba(255,255,255,0.10);color:#d7e6ef}
#cf-calendar .fc .fc-popover-header{background:rgba(0,0,0,0.08);border-bottom:1px solid rgba(255,255,255,0.06)}

@media(max-width:520px){
  #cf-calendar{padding:10px}
  #cf-calendar .fc .fc-toolbar-title{font-size:14px}
  #cf-calendar .fc .fc-button{padding:7px 9px}
}

/* Profile page */
.profile-page .panel{max-width:820px;margin:0 auto}
.profile-page.center-vertical{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:28px}
.profile-page.center-vertical .panel{width:100%;max-width:720px}
/* Make profile form fields stack vertically when inside centered profile page */
.profile-page.center-vertical .cf-form-grid{grid-template-columns:1fr !important;gap:12px}
.profile-page.center-vertical .cf-field{width:100%}
.profile-page.center-vertical .cf-actions{justify-content:flex-start}
.profile-key{color:var(--muted);font-size:13px;margin-bottom:6px}
.profile-value{background:#071c26;padding:12px;border-radius:8px;color:#d7e6ef}

/* Transactions / forms / tables */
.cf-alert{padding:10px 12px;border-radius:10px;background:linear-gradient(90deg,var(--card-grad-1),var(--card-grad-2));border:1px solid rgba(255,255,255,0.05)}
.cf-alert-success{border-color:rgba(43,214,161,0.25)}
.cf-form{margin-top:6px}
.cf-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cf-field{display:flex;flex-direction:column;gap:6px}
.cf-label{color:var(--muted);font-size:12px}
.cf-input,.cf-select{background:#071c26;border:1px solid rgba(255,255,255,0.08);color:#d7e6ef;border-radius:10px;padding:10px 10px;outline:none}
.cf-input:focus,.cf-select:focus{border-color:rgba(43,214,161,0.45)}

/* Improve native select dropdown legibility (best-effort across browsers) */
select.cf-select, .cf-select select, select.cf-input, .cf-modal select {
  background: #071c26;
  color: #d7e6ef;
}
select.cf-select option, .cf-select option, select.cf-input option, .cf-modal option {
  background: #071c26;
  color: #d7e6ef;
}
select.cf-select option:disabled, .cf-select option:disabled, select.cf-input option:disabled, .cf-modal option:disabled {
  color: #9fb0bd;
}

/* Attempt to improve native dropdown contrast on WebKit/Blink */
.cf-modal select, select.cf-input {
  -webkit-appearance: menulist-button;
  appearance: menulist-button;
}
.cf-error{color:#ff7b7b;font-size:12px}
.cf-actions{display:flex;gap:10px;margin-top:10px}
.cf-btn{background:linear-gradient(90deg,#12a57a,#2bd6a1);color:#042427;padding:10px 12px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.cf-btn-danger{background:rgba(255,123,123,0.15);color:#ff7b7b;border:1px solid rgba(255,123,123,0.35)}
.cf-btn-danger:hover{background:rgba(255,123,123,0.22)}
.cf-link{color:var(--accent);text-decoration:none}
.cf-link:hover{text-decoration:underline}
.cf-table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,0.06)}
.cf-table{width:100%;border-collapse:collapse;min-width:860px}
.cf-table thead th{color:var(--muted);font-weight:600;text-align:left;font-size:12px;padding:10px;background:rgba(0,0,0,0.08)}
.cf-table tbody td{padding:10px;border-top:1px solid rgba(255,255,255,0.06)}
.cf-table tbody tr:hover{background:rgba(255,255,255,0.02)}
.cf-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,0.08)}
.cf-pill-income{color:#34d07a;background:rgba(52,208,122,0.10);border-color:rgba(52,208,122,0.25)}
.cf-pill-expense{color:#ff7b7b;background:rgba(255,123,123,0.10);border-color:rgba(255,123,123,0.25)}
.cf-pagination{margin-top:10px}
/* Laravel default pagination view uses Tailwind and renders SVG icons without explicit size.
  Because this app uses dashboard.css (not Tailwind), set a safe size so arrows don't explode. */
.cf-pagination svg{width:20px;height:20px;display:block}
.cf-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cf-pre{background:#071c26;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px;white-space:pre-wrap;overflow:auto}

/* Categories */
.cf-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cf-cat-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:linear-gradient(90deg,var(--card-grad-1),var(--card-grad-2));border:1px solid rgba(255,255,255,0.06)}
.cf-cat-dot{width:34px;height:34px;border-radius:999px;flex:0 0 34px;border:2px solid rgba(255,255,255,0.18)}
.cf-cat-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.cf-cat-name{font-weight:700;color:#d7e6ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-cat-badges{display:flex;gap:8px;flex-wrap:wrap}
.cf-pill-default{color:var(--muted);background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.10)}

/* Auth pages */
.cf-auth-wrap{max-width:520px;margin:0 auto}
.cf-auth-card{background:var(--panel);padding:16px;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.cf-auth-title{margin:0 0 12px 0;font-size:18px;font-weight:700;color:#d7e6ef}
.cf-auth-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}

/* Modal (generic) */
.cf-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:80;align-items:center;justify-content:center;padding:16px}
.cf-modal-overlay.show{display:flex}
.cf-modal{width:min(760px,100%);background:var(--panel);border:1px solid rgba(255,255,255,0.08);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);padding:14px}
.cf-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cf-modal-title{margin:0;color:#cfe6f2;font-size:15px}
.cf-modal-close{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:18px;padding:6px 8px;border-radius:8px;line-height:1}
.cf-modal-close:hover{color:#d7e6ef;background:rgba(255,255,255,0.03)}
.cf-empty-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0}
.cf-divider{height:1px;background:rgba(255,255,255,0.06);margin:12px 0}

@media(max-width:900px){
  .cf-form-grid{grid-template-columns:1fr}
  .cf-kv{grid-template-columns:1fr}
  .cf-cat-grid{grid-template-columns:1fr}
}

/* Fixed chart containers (prevents infinite resize growth) */
.cf-chart{position:relative;width:100%;height:160px;}
.cf-chart-balance{height:220px;}
.cf-chart canvas{display:block;width:100% !important;height:100% !important;}

/* Prevent charts from expanding to fill parent unexpectedly */

.cf-whatsapp{position:fixed;right:20px;bottom:20px;background:#25D366;color:#fff;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 8px 20px rgba(37,211,102,0.18);font-size:22px}

/* hamburger button (hidden on desktop; enabled on mobile below) */
.cf-hamburger{display:none;background:transparent;border:0;color:var(--accent);font-size:22px;padding:6px;border-radius:8px;cursor:pointer;position:relative}

/* Mobile sidebar overlay behaviour */
@media(max-width:900px){
  .cf-sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;transform:translateX(-110%);z-index:60;box-shadow:8px 0 30px rgba(0,0,0,0.6);transition:transform .28s ease}
  .cf-sidebar.open{transform:translateX(0)}
  .cf-sidebar .cf-top,.cf-sidebar .cf-nav,.cf-sidebar .cf-bottom{padding-left:14px;padding-right:14px}
  .cf-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:50;transition:opacity .2s}
  .cf-sidebar-overlay.show{display:block}

  .cf-main{padding:14px 12px;margin-left:0}
  .cf-header{flex-direction:column;align-items:flex-start;gap:10px}
  .cf-header-right{width:100%;display:flex;align-items:center;gap:8px}
  .cf-new{display:none}
  .period-select form{width:100%}
  .cf-panels{grid-template-columns:1fr}
  .cf-top-cards{flex-direction:column}

  .cf-hamburger{display:block}
}

@media(max-width:520px){
  .cf-chart{height:150px}
  .cf-chart-balance{height:210px}
  .card{padding:12px}
  .card-value{font-size:16px}
  .panel{padding:12px}
  .btn-link{padding:6px 0}
  .cf-input,.cf-select{width:100%}
}

/* prevent body scroll when nav open */
.cf-nav-open, .cf-nav-open body{overflow:hidden}

/* ensure hamburger visible above header elements */
.cf-hamburger{z-index:70}

/* Stripe page styles */
.cf-stripe-card {
  padding: 18px;
}

.cf-stripe-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .cf-stripe-grid {
    grid-template-columns: 1fr;
  }
}

.cf-card-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.cf-muted {
  opacity: .85;
  font-size: 13px;
  line-height: 1.4;
}

.cf-form-row {
  margin-top: 12px;
}

.cf-label {
  display: block;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

.cf-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e9f0ff;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
}

.cf-input:focus {
  border-color: rgba(115, 180, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(115, 180, 255, 0.12);
}

.cf-info-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.cf-status {
  margin-top: 12px;
  font-size: 12px;
  opacity: .9;
}

.cf-status--info { color: #9ec7ff; }
.cf-status--error { color: #ffb4b4; }