/*
 * BudgetFlow Pro — Unified Design System CSS
 * 
 * @package BudgetFlow Pro
 * ALL STYLES scoped under .budgetflow-app wrapper
 * No global body/html/theme selectors
 * 
 * Typography Scale:
 *   Plugin title:    24px / 800 weight
 *   Section title:   18px / 700 weight
 *   Card title:      15px / 700 weight
 *   Body text:       14px / 400 weight
 *   Helper text:     13px / 400 weight
 *   Tab text:        13px / 600 weight
 *   Metric value:    22px / 800 weight
 */

/* =========================================
   CSS Variables — Design Tokens
   ========================================= */
.budgetflow-app {
  --bf-primary: #4f46e5;
  --bf-primary-dark: #4338ca;
  --bf-primary-light: #6366f1;
  --bf-primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --bf-primary-gradient-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  --bf-success: #059669;
  --bf-success-light: #10b981;
  --bf-success-bg: rgba(5, 150, 105, 0.08);
  --bf-danger: #dc2626;
  --bf-danger-light: #ef4444;
  --bf-danger-bg: rgba(220, 38, 38, 0.08);
  --bf-warning: #d97706;
  --bf-warning-light: #f59e0b;
  --bf-warning-bg: rgba(217, 119, 6, 0.08);
  --bf-text-primary: #111827;
  --bf-text-secondary: #374151;
  --bf-text-muted: #6b7280;
  --bf-text-inverse: #ffffff;
  --bf-bg-primary: #ffffff;
  --bf-bg-secondary: #f8fafc;
  --bf-bg-tertiary: #f3f4f6;
  --bf-bg-card: #ffffff;
  --bf-border: #e5e7eb;
  --bf-border-strong: #d1d5db;
  --bf-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --bf-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --bf-shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --bf-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --bf-radius-xs: 4px;
  --bf-radius-sm: 6px;
  --bf-radius: 10px;
  --bf-radius-lg: 14px;
  --bf-transition: all 0.18s ease;
  
  /* Typography scale */
  --bf-font-title: 24px;
  --bf-font-section: 18px;
  --bf-font-card: 15px;
  --bf-font-body: 14px;
  --bf-font-helper: 13px;
  --bf-font-tab: 13px;
  --bf-font-metric: 22px;
  
  /* Spacing */
  --bf-space-xs: 0.25rem;
  --bf-space-sm: 0.5rem;
  --bf-space-md: 0.75rem;
  --bf-space-lg: 1rem;
  --bf-space-xl: 1.5rem;
  --bf-space-2xl: 2rem;
  
  box-sizing: border-box;
}

/* =========================================
   Main App Container
   ========================================= */
.budgetflow-app {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: var(--bf-space-2xl) var(--bf-space-xl);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--bf-font-body);
  color: var(--bf-text-primary);
  background: var(--bf-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* =========================================
   Privacy Banner
   ========================================= */
.budgetflow-app .budgetflow-pro__privacy-note {
  font-size: var(--bf-font-helper);
  line-height: 1.5;
}

.budgetflow-app .budgetflow-pro__privacy-note--banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--bf-primary);
  color: var(--bf-text-inverse);
  border-radius: var(--bf-radius);
  margin-bottom: 1rem;
  font-size: var(--bf-font-helper);
}

.budgetflow-app .budgetflow-pro__privacy-note--banner .budgetflow-pro__privacy-note__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.budgetflow-app .budgetflow-pro__privacy-note--banner .budgetflow-pro__privacy-note__text {
  flex: 1;
  line-height: 1.5;
}

.budgetflow-app .budgetflow-pro__privacy-note--banner .budgetflow-pro__privacy-note__dismiss {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__privacy-note--banner .budgetflow-pro__privacy-note__dismiss:hover {
  background: rgba(255,255,255,0.35);
}

/* Privacy Note — Inline */
.budgetflow-app .budgetflow-pro__privacy-note--inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__privacy-note--inline .budgetflow-pro__privacy-note__icon {
  font-size: 0.875rem;
  flex-shrink: 0;
}

.budgetflow-app .budgetflow-pro__privacy-note--inline .budgetflow-pro__privacy-note__text {
  line-height: 1.4;
}

/* =========================================
   App Header / Brand
   ========================================= */
.budgetflow-app .app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  margin-bottom: 1.25rem;
  border: 1px solid var(--bf-border);
  position: relative;
  overflow: hidden;
}

.budgetflow-app .app-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bf-primary-gradient);
}

.budgetflow-app .app-header h1 {
  font-size: var(--bf-font-title);
  font-weight: 800;
  color: var(--bf-text-primary);
  margin: 0 0 0.375rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.budgetflow-app .app-header h1::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 34px;
  background: var(--bf-primary-gradient);
  border-radius: 9px;
  flex-shrink: 0;
}

.budgetflow-app .app-tagline {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  margin: 0;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* =========================================
   Tab Navigation — Unified Style
   ========================================= */
.budgetflow-app .tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .tab-btn {
  flex: 1 1 auto;
  min-width: 88px;
  padding: 0.6875rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-tab);
  font-weight: 600;
  color: var(--bf-text-secondary);
  cursor: pointer;
  transition: var(--bf-transition);
  text-align: center;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0.01em;
}

.budgetflow-app .tab-btn:hover {
  background: var(--bf-bg-tertiary);
  color: var(--bf-text-primary);
}

.budgetflow-app .tab-btn--active {
  background: var(--bf-primary);
  color: var(--bf-text-inverse);
  box-shadow: 0 2px 6px rgba(79,70,229,0.3);
}

.budgetflow-app .tab-btn--active:hover {
  background: var(--bf-primary-dark);
  box-shadow: 0 4px 10px rgba(79,70,229,0.35);
  transform: translateY(-1px);
}

/* =========================================
   Tab Content Area
   ========================================= */
.budgetflow-app .tab-content {
  min-height: 280px;
}

.budgetflow-app .tab-content section {
  background: var(--bf-bg-card);
  padding: 1.75rem;
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

/* =========================================
   Section Headers — Consistent Heading Style
   ========================================= */
.budgetflow-app .tab-content section h2 {
  font-size: var(--bf-font-section);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bf-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.budgetflow-app .section-description {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  margin: -0.75rem 0 1.5rem;
  line-height: 1.65;
}

/* =========================================
   Summary Cards — Dashboard Grid
   ========================================= */
.budgetflow-app .summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.budgetflow-app .summary-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem 1rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transition: var(--bf-transition);
  position: relative;
  overflow: hidden;
}

.budgetflow-app .summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bf-primary-gradient);
}

.budgetflow-app .summary-card--good::before,
.budgetflow-app .summary-card.income-card::before {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.budgetflow-app .summary-card--danger::before,
.budgetflow-app .summary-card.expense-card::before {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.budgetflow-app .summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .summary-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.budgetflow-app .summary-value {
  font-size: var(--bf-font-metric);
  font-weight: 800;
  color: var(--bf-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.budgetflow-app .summary-card.income-card .summary-value {
  color: var(--bf-success);
}

.budgetflow-app .summary-card.expense-card .summary-value {
  color: var(--bf-danger);
}

/* =========================================
   Empty State — Unified Component
   ========================================= */
.budgetflow-app .empty-state {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
  display: block;
}

.budgetflow-app .empty-state__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .empty-state__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.65;
  margin: 0 0 0.875rem;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.budgetflow-app .empty-state__note {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* =========================================
   Recent Expenses Table
   ========================================= */
.budgetflow-app .recent-expenses {
  margin-top: 1.75rem;
}

.budgetflow-app .recent-expenses h3 {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bf-border);
}

/* =========================================
   Tables — Unified Style
   ========================================= */
.budgetflow-app table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: var(--bf-font-body);
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-sm);
  overflow: hidden;
  border: 1px solid var(--bf-border);
}

.budgetflow-app thead tr {
  background: var(--bf-bg-tertiary);
}

.budgetflow-app th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-text-secondary);
  border-bottom: 2px solid var(--bf-border);
}

.budgetflow-app tbody tr {
  transition: var(--bf-transition);
}

.budgetflow-app tbody tr:hover {
  background: var(--bf-bg-tertiary);
}

.budgetflow-app td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-text-primary);
}

.budgetflow-app tbody tr:last-child td {
  border-bottom: none;
}

/* =========================================
   Forms — Unified Style
   ========================================= */
.budgetflow-app .form-group {
  margin-bottom: 1rem;
}

.budgetflow-app .form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--bf-font-helper);
  font-weight: 600;
  color: var(--bf-text-secondary);
  letter-spacing: 0.01em;
}

.budgetflow-app .form-group input,
.budgetflow-app .form-group select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-family: inherit;
  color: var(--bf-text-primary);
  background: var(--bf-bg-primary);
  transition: var(--bf-transition);
  outline: none;
  line-height: 1.5;
}

.budgetflow-app .form-group input:focus,
.budgetflow-app .form-group select:focus {
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

.budgetflow-app .form-group input::placeholder {
  color: var(--bf-text-muted);
}

.budgetflow-app .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.budgetflow-app .expense-form {
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

/* =========================================
   Buttons — Unified System
   ========================================= */
.budgetflow-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.6875rem 1.25rem;
  border: none;
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--bf-transition);
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.budgetflow-app .btn--primary {
  background: var(--bf-primary-gradient);
  color: white;
  box-shadow: 0 2px 6px rgba(79,70,229,0.25);
}

.budgetflow-app .btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.35);
  background: var(--bf-primary-gradient-hover);
}

.budgetflow-app .btn--primary:active {
  transform: translateY(0);
}

.budgetflow-app .btn--secondary {
  background: var(--bf-bg-card);
  color: var(--bf-text-primary);
  border: 1.5px solid var(--bf-border);
}

.budgetflow-app .btn--secondary:hover {
  background: var(--bf-bg-tertiary);
  border-color: var(--bf-border-strong);
}

.budgetflow-app .btn--small {
  padding: 0.5rem 0.875rem;
  font-size: var(--bf-font-helper);
}

.budgetflow-app .btn--danger {
  background: var(--bf-danger);
  color: white;
  box-shadow: 0 2px 6px rgba(220,38,38,0.2);
}

.budgetflow-app .btn--danger:hover {
  background: var(--bf-danger-light);
  box-shadow: 0 4px 10px rgba(220,38,38,0.3);
}

/* =========================================
   Income Section
   ========================================= */
.budgetflow-app .income-section {
  max-width: 100%;
}

.budgetflow-app .income-section h2 {
  margin-bottom: 1.25rem;
}

.budgetflow-app .income-section .form-group {
  max-width: 400px;
}

.budgetflow-app .input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}

.budgetflow-app .input-symbol {
  position: absolute;
  left: 0.875rem;
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-secondary);
}

.budgetflow-app .income-section .input-with-symbol input {
  padding-left: 2.25rem;
  font-size: var(--bf-font-card);
  font-weight: 600;
}

/* =========================================
   Expenses Section
   ========================================= */
.budgetflow-app .expenses-section h2 {
  margin-bottom: 0.75rem;
}

/* =========================================
   App Footer
   ========================================= */
.budgetflow-app .app-footer {
  text-align: center;
  padding: 1.25rem 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--bf-border);
}

.budgetflow-app .disclaimer-text {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

.budgetflow-app .storage-summary {
  text-align: center;
  padding: 0.75rem;
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-sm);
  margin-top: 1rem;
  border: 1px solid var(--bf-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   Privacy Note Footer/Inline Variants
   ========================================= */
.budgetflow-app .budgetflow-pro__privacy-note--footer {
  padding: 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  margin-top: 1.25rem;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__privacy-note__content {
  max-width: 640px;
  margin: 0 auto;
}

.budgetflow-app .budgetflow-pro__text-muted {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  line-height: 1.6;
}

.budgetflow-app .budgetflow-pro__text-danger {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__text-success {
  font-size: var(--bf-font-helper);
  color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__text-warning {
  font-size: var(--bf-font-helper);
  color: var(--bf-warning);
}

/* =========================================
   Settings Section
   ========================================= */
.budgetflow-app .settings-section .settings-group {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .settings-section .settings-group h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-secondary);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* =========================================
   Data Controls — Unified
   ========================================= */
.budgetflow-app .data-controls {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .data-controls__header {
  margin-bottom: 1rem;
}

.budgetflow-app .data-controls__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .data-controls__privacy {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.budgetflow-app .data-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.budgetflow-app .data-controls__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: var(--bf-font-helper);
  font-weight: 600;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-bg-card);
  color: var(--bf-text-primary);
  cursor: pointer;
  transition: var(--bf-transition);
  font-family: inherit;
}

.budgetflow-app .data-controls__action:hover {
  background: var(--bf-bg-tertiary);
  border-color: var(--bf-border-strong);
}

.budgetflow-app .data-controls__action--danger {
  color: var(--bf-danger);
  border-color: var(--bf-danger);
}

.budgetflow-app .data-controls__action--danger:hover {
  background: var(--bf-danger-bg);
}

.budgetflow-app .data-controls__confirm {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--bf-danger-bg);
  border-radius: var(--bf-radius);
  border: 1px solid rgba(220,38,38,0.2);
}

.budgetflow-app .data-controls__confirm__content h4 {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-danger);
  margin: 0 0 0.5rem;
}

.budgetflow-app .data-controls__confirm__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.budgetflow-app .data-controls__info {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .data-controls__info__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.875rem;
}

.budgetflow-app .data-controls__keys {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  margin: 0 0 0.375rem;
}

.budgetflow-app .data-controls__entries {
  margin-top: 0.875rem;
}

.budgetflow-app .data-controls__entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--bf-border);
  font-size: var(--bf-font-helper);
}

.budgetflow-app .data-controls__entry:last-child {
  border-bottom: none;
}

.budgetflow-app .data-controls__entry__key {
  font-weight: 600;
  color: var(--bf-text-primary);
  min-width: 100px;
}

.budgetflow-app .data-controls__entry__type {
  color: var(--bf-text-muted);
}

.budgetflow-app .data-controls__entry__size {
  color: var(--bf-text-muted);
  margin-left: auto;
}

/* =========================================
   Budgets Tab — Category Budget Limits
   ========================================= */
.budgetflow-app .budgetflow-pro__budgets-section {
  padding: 0;
}

.budgetflow-app .budgetflow-pro__budgets-section__header {
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__section-title {
  font-size: var(--bf-font-section);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.625rem;
  letter-spacing: -0.01em;
}

.budgetflow-app .budgetflow-pro__section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__section-icon {
  font-size: 1.25rem;
}

.budgetflow-app .budgetflow-pro__section-description {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  margin: -0.5rem 0 1.25rem;
  line-height: 1.65;
}

/* Budget stat cards grid */
.budgetflow-app .budgetflow-pro__dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.budgetflow-app .budgetflow-pro__dashboard-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.125rem 1rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.budgetflow-app .budgetflow-pro__dashboard-card__header {
  margin-bottom: 0.25rem;
}

.budgetflow-app .budgetflow-pro__dashboard-card__title {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.budgetflow-app .budgetflow-pro__dashboard-card__value {
  font-size: var(--bf-font-metric);
  font-weight: 800;
  color: var(--bf-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.budgetflow-app .budgetflow-pro__dashboard-card__value--danger {
  color: var(--bf-danger);
}

/* Budget Category Cards */
.budgetflow-app .budgetflow-pro__budget-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  margin-bottom: 0.875rem;
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__budget-card:hover {
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .budgetflow-pro__budget-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__budget-card__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.25rem;
}

.budgetflow-app .budgetflow-pro__budget-card__subtitle {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  margin: 0;
}

.budgetflow-app .budgetflow-pro__budget-card__status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__budget-card__status--over {
  background: var(--bf-danger-bg);
  color: var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__budget-card__status--warning {
  background: var(--bf-warning-bg);
  color: var(--bf-warning);
}

.budgetflow-app .budgetflow-pro__budget-card__status--ok {
  background: var(--bf-success-bg);
  color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__budget-card__status--none {
  background: var(--bf-bg-tertiary);
  color: var(--bf-text-muted);
}

/* Budget limit input row */
.budgetflow-app .budgetflow-pro__budget-card__limit-input {
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__budget-card__limit-label {
  display: block;
  font-size: var(--bf-font-helper);
  font-weight: 600;
  color: var(--bf-text-secondary);
  margin-bottom: 0.375rem;
}

.budgetflow-app .budgetflow-pro__input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__input-symbol {
  position: absolute;
  left: 0.75rem;
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-secondary);
}

.budgetflow-app .budgetflow-pro__form-input--amount {
  padding-left: 2rem;
  font-size: var(--bf-font-body);
}

.budgetflow-app .budgetflow-pro__budget-card__limit-input .budgetflow-pro__text-muted {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Progress bar */
.budgetflow-app .budgetflow-pro__budget-card__progress {
  margin-top: 0.875rem;
}

.budgetflow-app .budgetflow-pro__budget-card__progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.budgetflow-app .budgetflow-pro__budget-card__progress-label .budgetflow-pro__text-muted {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__budget-card__progress-value {
  font-size: var(--bf-font-helper);
  font-weight: 700;
  color: var(--bf-text-secondary);
}

.budgetflow-app .budgetflow-pro__budget-card__progress-value--over {
  color: var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__budget-card__progress-value--warning {
  color: var(--bf-warning);
}

/* Generic progress-value variants (used outside budget-card context) */
.budgetflow-app .budgetflow-pro__progress-value--over {
  color: var(--bf-danger);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__progress-value--warning {
  color: var(--bf-warning);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__budget-card__progress-bar {
  height: 6px;
  background: var(--bf-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.budgetflow-app .budgetflow-pro__budget-card__progress-fill {
  height: 100%;
  background: var(--bf-primary-gradient);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.budgetflow-app .budgetflow-pro__budget-card__progress-fill--over {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

.budgetflow-app .budgetflow-pro__budget-card__progress-fill--warning {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

/* Budget summary row */
.budgetflow-app .budgetflow-pro__budget-card__summary {
  display: flex;
  justify-content: space-between;
  padding-top: 0.875rem;
  border-top: 1px solid var(--bf-border);
  margin-top: 0.875rem;
  gap: 1rem;
}

.budgetflow-app .budgetflow-pro__budget-card__summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.budgetflow-app .budgetflow-pro__budget-card__summary-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.budgetflow-app .budgetflow-pro__budget-card__summary-value {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__budget-card__summary-value--over {
  color: var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__budget-card__summary-value--warning {
  color: var(--bf-warning);
}

/* Empty budgets */
.budgetflow-app .budgetflow-pro__empty-budgets,
.budgetflow-app .budgetflow-pro__empty-budgets-list {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  margin-top: 1rem;
}

.budgetflow-app .budgetflow-pro__empty-budgets__icon,
.budgetflow-app .budgetflow-pro__empty-budgets-list__icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
  display: block;
}

.budgetflow-app .budgetflow-pro__empty-budgets__title,
.budgetflow-app .budgetflow-pro__empty-budgets-list__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-budgets__message,
.budgetflow-app .budgetflow-pro__empty-budgets-list__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.65;
  margin: 0 0 0.75rem;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.budgetflow-app .budgetflow-pro__empty-budgets__note {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* Utility classes */
.budgetflow-app .budgetflow-pro__mt-1 { margin-top: 0.5rem; }
.budgetflow-app .budgetflow-pro__mt-2 { margin-top: 1rem; }
.budgetflow-app .budgetflow-pro__mt-3 { margin-top: 1.5rem; }
.budgetflow-app .budgetflow-pro__mt-4 { margin-top: 2rem; }
.budgetflow-app .budgetflow-pro__mb-2 { margin-bottom: 1rem; }
.budgetflow-app .budgetflow-pro__mb-3 { margin-bottom: 1.5rem; }
.budgetflow-app .budgetflow-pro__ml-1 { margin-left: 0.5rem; }

/* =========================================
   Savings Goals Tab
   ========================================= */
.budgetflow-app .budgetflow-pro__savings-section {
  padding: 0;
}

/* Contribution tracker — subdued */
.budgetflow-app .budgetflow-pro__contribution-tracker {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__contribution-tracker__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.875rem;
}

.budgetflow-app .budgetflow-pro__contribution-form {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* =========================================
   Monthly Rollover Section
   ========================================= */
.budgetflow-app .rollover-section {
  margin-top: 1.5rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .rollover-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--bf-border);
}

.budgetflow-app .rollover-section h2 {
  font-size: var(--bf-font-section);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.budgetflow-app .rollover-trigger-btn {
  background: var(--bf-primary-gradient);
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-weight: 600;
  cursor: pointer;
  transition: var(--bf-transition);
  box-shadow: 0 2px 6px rgba(79,70,229,0.25);
}

.budgetflow-app .rollover-trigger-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.35);
  background: var(--bf-primary-gradient-hover);
}

.budgetflow-app .rollover-panel {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  margin: 0.25rem;
}

.budgetflow-app .rollover-panel-content {
  padding: 1.5rem;
}

.budgetflow-app .rollover-header {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.budgetflow-app .rollover-description {
  font-size: var(--bf-font-body);
  color: var(--bf-text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.budgetflow-app .rollover-preview {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .rollover-preview-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bf-border);
}

.budgetflow-app .rollover-preview-item:last-child {
  border-bottom: none;
}

.budgetflow-app .rollover-label {
  font-size: var(--bf-font-body);
  color: var(--bf-text-secondary);
}

.budgetflow-app .rollover-value {
  font-size: var(--bf-font-body);
  font-weight: 600;
  color: var(--bf-text-primary);
}

.budgetflow-app .rollover-amount {
  color: var(--bf-success);
  font-size: 1.125rem;
}

.budgetflow-app .rollover-warning {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  background: var(--bf-warning-bg);
  border-radius: var(--bf-radius-sm);
  margin-bottom: 1.25rem;
}

.budgetflow-app .rollover-warning .warning-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.budgetflow-app .rollover-warning .warning-text {
  font-size: var(--bf-font-body);
  color: var(--bf-text-primary);
  flex: 1;
}

/* =========================================
   Rollover Help Copy & Empty States
   ========================================= */
.budgetflow-app .rollover-section-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.budgetflow-app .rollover-section-info .rollover-info-text {
  font-size: var(--bf-font-body);
  color: var(--bf-text-secondary);
  line-height: 1.5;
}

.budgetflow-app .rollover-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.budgetflow-app .rollover-empty-state .empty-state {
  max-width: 320px;
}

.budgetflow-app .rollover-empty-state .empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.budgetflow-app .rollover-empty-state .empty-state__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.75rem;
}

.budgetflow-app .rollover-empty-state .empty-state__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.budgetflow-app .rollover-zero-amount .rollover-info-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .rollover-zero-amount .rollover-info-icon {
  font-size: 1.25rem;
}

.budgetflow-app .rollover-zero-amount .rollover-info-text {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
}

/* Goals list */
.budgetflow-app .budgetflow-pro__savings-goals-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__savings-goal-card:hover {
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .budgetflow-pro__savings-goal-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__name {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__savings-goal-card__status--success {
  background: var(--bf-success-bg);
  color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__savings-goal-card__status--warning {
  background: var(--bf-warning-bg);
  color: var(--bf-warning);
}

.budgetflow-app .budgetflow-pro__savings-goal-card__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__info-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__info-value {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-primary);
}

/* Savings progress bar */
.budgetflow-app .budgetflow-pro__savings-goal-card__progress {
  margin-bottom: 0.875rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__progress-bar {
  height: 6px;
  background: var(--bf-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__progress-fill {
  height: 100%;
  background: var(--bf-primary-gradient);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.budgetflow-app .budgetflow-pro__savings-goal-card__progress-text {
  display: flex;
  justify-content: space-between;
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

/* Goal card actions */
.budgetflow-app .budgetflow-pro__savings-goal-card__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--bf-border);
  flex-wrap: wrap;
}

/* Empty goals */
.budgetflow-app .budgetflow-pro__empty-goals {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__empty-goals__icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
  display: block;
}

.budgetflow-app .budgetflow-pro__empty-goals__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-goals__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.65;
  margin: 0 0 0.875rem;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.budgetflow-app .budgetflow-pro__empty-goals__example {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius-sm);
  padding: 0.875rem 1.25rem;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
  font-size: var(--bf-font-helper);
}

.budgetflow-app .budgetflow-pro__empty-goals__example strong {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  display: block;
  margin-bottom: 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-goals__example ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__empty-goals__example li {
  margin-bottom: 0.25rem;
}

/* =========================================
   Debt Planner Tab
   ========================================= */
.budgetflow-app .budgetflow-pro__debt-planner {
  padding: 0;
}

.budgetflow-app .budgetflow-pro__debt-planner__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__summary-item {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__summary-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.budgetflow-app .budgetflow-pro__debt-planner__summary-value {
  font-size: var(--bf-font-metric);
  font-weight: 800;
  color: var(--bf-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Debt list */
.budgetflow-app .budgetflow-pro__debt-planner__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card:hover {
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__name {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--bf-font-helper);
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__detail-row span:first-child {
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__balance {
  font-size: var(--bf-font-metric);
  font-weight: 800;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__balance--high {
  color: var(--bf-danger);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__balance--medium {
  color: var(--bf-warning);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__balance--low {
  color: var(--bf-success);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__detail-value--warning {
  color: var(--bf-warning);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__progress {
  margin-top: 0.875rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__progress-bar {
  height: 6px;
  background: var(--bf-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__progress-fill {
  height: 100%;
  background: var(--bf-primary-gradient);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.budgetflow-app .budgetflow-pro__debt-planner__debt-card__progress-text {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  text-align: right;
}

/* Empty debts */
.budgetflow-app .budgetflow-pro__empty-debts {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__empty-debts__icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
  display: block;
}

.budgetflow-app .budgetflow-pro__empty-debts__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-debts__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.65;
  margin: 0 0 0.75rem;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.budgetflow-app .budgetflow-pro__empty-debts__note {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* Debt form */
.budgetflow-app .budgetflow-pro__form {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  margin-bottom: 0;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Disclaimer section */
.budgetflow-app .budgetflow-pro__disclaimer-section {
  margin-top: 1.5rem;
}

.budgetflow-app .budgetflow-pro__disclaimer-content {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__disclaimer-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.budgetflow-app .budgetflow-pro__disclaimer-text h4 {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.375rem;
}

.budgetflow-app .budgetflow-pro__disclaimer-text p {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__disclaimer-text p:last-child {
  margin-bottom: 0;
}

.budgetflow-app .budgetflow-pro__disclaimer-list {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__disclaimer-list li {
  margin-bottom: 0.25rem;
}

/* =========================================
   Responsive Breakpoints
   ========================================= */
@media (max-width: 1024px) {
  .budgetflow-app {
    padding: 1.5rem 1rem;
  }
  
  .budgetflow-app .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .budgetflow-app {
    padding: 1rem;
  }
  
  .budgetflow-app .app-header {
    padding: 1.25rem 1rem;
  }
  
  .budgetflow-app .app-header h1 {
    font-size: 1.375rem;
  }
  
  .budgetflow-app .tab-nav {
    flex-wrap: wrap;
  }
  
  .budgetflow-app .tab-btn {
    min-width: 70px;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .budgetflow-app .summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .budgetflow-app .form-row,
  .budgetflow-app .budgetflow-pro__form-row {
    grid-template-columns: 1fr;
  }
  
  .budgetflow-app .tab-content section {
    padding: 1.25rem;
  }
  
  .budgetflow-app .budgetflow-pro__dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .budgetflow-app .budgetflow-pro__debt-planner__summary {
    grid-template-columns: 1fr;
  }
  
  .budgetflow-app .budgetflow-pro__savings-goal-card__info {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .budgetflow-app {
    padding: 0.75rem;
  }
  
  .budgetflow-app .summary-cards {
    grid-template-columns: 1fr 1fr;
  }
  
  .budgetflow-app .summary-card {
    padding: 1rem 0.875rem;
  }
  
  .budgetflow-app .summary-value {
    font-size: 1.25rem;
  }
  
  .budgetflow-app .tab-nav {
    flex-direction: column;
  }
  
  .budgetflow-app .tab-btn {
    width: 100%;
    justify-content: center;
  }
  
  .budgetflow-app table {
    font-size: 0.8125rem;
  }
  
  .budgetflow-app th,
  .budgetflow-app td {
    padding: 0.625rem 0.75rem;
  }
  
  .budgetflow-app .budgetflow-pro__dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .budgetflow-app .budgetflow-pro__savings-goal-card__info {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .budgetflow-app .budgetflow-pro__contribution-form {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =========================================
   v1.2 Recurring Transactions CSS
   ========================================= */

/* Recurring Section */
.budgetflow-app .budgetflow-pro__recurring-section {
  padding: 0;
}

.budgetflow-app .budgetflow-pro__recurring-section__header {
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__recurring-section__header h2 {
  margin-bottom: 0.5rem;
}

/* Summary Cards Grid */
.budgetflow-app .budgetflow-pro__recurring-section__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

/* Filter Tabs */
.budgetflow-app .budgetflow-pro__recurring-section__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.budgetflow-app .budgetflow-pro__recurring-filters__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.budgetflow-app .budgetflow-pro__filter-btn {
  padding: 0.5rem 0.875rem;
  background: var(--bf-bg-card);
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-helper);
  font-weight: 600;
  color: var(--bf-text-secondary);
  cursor: pointer;
  transition: var(--bf-transition);
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__filter-btn:hover {
  background: var(--bf-bg-tertiary);
}

.budgetflow-app .budgetflow-pro__filter-btn--active {
  background: var(--bf-primary);
  color: white;
  border-color: var(--bf-primary);
}

/* Recurring Card Grid */
.budgetflow-app .budgetflow-pro__recurring-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

/* Recurring Card */
.budgetflow-app .budgetflow-pro__recurring-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__recurring-card:hover {
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .budgetflow-pro__recurring-card--status--active {
  border-left: 4px solid var(--bf-success);
}

.budgetflow-app .budgetflow-pro__recurring-card--status--paused {
  border-left: 4px solid var(--bf-warning);
}

.budgetflow-app .budgetflow-pro__recurring-card--status--overdue {
  border-left: 4px solid var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__recurring-card--status--completed {
  border-left: 4px solid var(--bf-text-muted);
}

/* Recurring Card Header */
.budgetflow-app .budgetflow-pro__recurring-card__header {
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0;
  flex: 1;
  margin-right: 0.75rem;
}

/* Status Badges */
.budgetflow-app .budgetflow-pro__status-active {
  background: rgba(5, 150, 105, 0.12);
  color: var(--bf-success);
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__status-paused {
  background: rgba(217, 119, 6, 0.12);
  color: var(--bf-warning);
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__status-completed {
  background: rgba(107, 114, 128, 0.12);
  color: var(--bf-text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__status-overdue {
  background: rgba(220, 38, 38, 0.12);
  color: var(--bf-danger);
  padding: 0.25rem 0.5rem;
  border-radius: var(--bf-radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__recurring-card__amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__recurring-card__amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__recurring-card__amount-label {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

/* Next Due */
.budgetflow-app .budgetflow-pro__recurring-card__nextdue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue-label {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  font-weight: 600;
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue-date {
  font-weight: 700;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue--active {
  color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue--paused {
  color: var(--bf-warning);
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue--completed {
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__recurring-card__nextdue--overdue {
  color: var(--bf-danger);
  font-weight: 700;
}

/* Card nextdue alias classes (used by RecurringCard STATUS_CONFIG) */
.budgetflow-app .budgetflow-pro__card-nextdue--active {
  color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__card-nextdue--paused {
  color: var(--bf-warning);
}

.budgetflow-app .budgetflow-pro__card-nextdue--completed {
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__card-nextdue--overdue {
  color: var(--bf-danger);
  font-weight: 700;
}

.budgetflow-app .budgetflow-pro__recurring-card__overdue-warning {
  font-size: var(--bf-font-body);
  color: var(--bf-danger);
  font-weight: 600;
  white-space: nowrap;
}

/* Category */
.budgetflow-app .budgetflow-pro__recurring-card__category {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0;
}

.budgetflow-app .budgetflow-pro__recurring-card__category-label {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  font-weight: 600;
}

.budgetflow-app .budgetflow-pro__recurring-card__category-name {
  font-weight: 600;
  color: var(--bf-text-primary);
}

/* Stats */
.budgetflow-app .budgetflow-pro__recurring-card__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__recurring-card__stat-label {
  font-size: 0.625rem;
  color: var(--bf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions */
.budgetflow-app .budgetflow-pro__recurring-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Instances */
.budgetflow-app .budgetflow-pro__recurring-card__instances {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__recurring-card__instances-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-card {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius-sm);
  padding: 0.75rem;
  cursor: pointer;
  transition: var(--bf-transition);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-card:hover {
  background: rgba(243, 244, 246, 0.6);
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__instance-status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__instance-pending {
  background: rgba(245, 158, 11, 0.12);
  color: var(--bf-warning);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__instance-completed {
  background: rgba(5, 150, 105, 0.12);
  color: var(--bf-success);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__instance-skipped {
  background: rgba(156, 163, 175, 0.12);
  color: var(--bf-text-muted);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__instance-cancelled {
  background: rgba(220, 38, 38, 0.12);
  color: var(--bf-danger);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--bf-radius-xs);
}

.budgetflow-app .budgetflow-pro__instance-date {
  font-size: var(--bf-font-body);
  color: var(--bf-text-primary);
  font-weight: 600;
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-details {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-xs);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bf-text-primary);
  margin-bottom: 0.75rem;
}

.budgetflow-app .budgetflow-pro__recurring-card__instance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.budgetflow-app .budgetflow-pro__instance-action-buttons {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Empty Budgets */
.budgetflow-app .budgetflow-pro__empty-budgets {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__empty-budgets__icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  display: block;
}

.budgetflow-app .budgetflow-pro__empty-budgets__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-budgets__message {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

.budgetflow-app .budgetflow-pro__empty-budgets__note {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  font-style: italic;
}

/* Utility classes */
.budgetflow-app .budgetflow-pro__mt-2 {
  margin-top: 0.5rem;
}

.budgetflow-app .budgetflow-pro__mt-4 {
  margin-top: 1rem;
}

/* =========================================
   v1.2 Rollover CSS
   ========================================= */

/* Rollover Section */
.budgetflow-app .budgetflow-pro__rollover-section {
  padding: 0;
}

.budgetflow-app .budgetflow-pro__rollover-section__header {
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__rollover-section__header h2 {
  margin-bottom: 0.5rem;
}

/* Summary Grid */
.budgetflow-app .budgetflow-pro__rollover-section__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}

/* Filter Tabs */
.budgetflow-app .budgetflow-pro__rollover-section__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.budgetflow-app .budgetflow-pro__rollover-filters__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Tab Buttons */
.budgetflow-app .budgetflow-pro__rollover-tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.budgetflow-app .budgetflow-pro__rollover-tab-btn {
  padding: 0.5rem 1rem;
  background: var(--bf-bg-card);
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-weight: 600;
  color: var(--bf-text-secondary);
  cursor: pointer;
  transition: var(--bf-transition);
  white-space: nowrap;
}

.budgetflow-app .budgetflow-pro__rollover-tab-btn:hover {
  background: var(--bf-bg-tertiary);
}

.budgetflow-app .budgetflow-pro__rollover-tab-btn--active {
  background: var(--bf-primary);
  color: white;
  border-color: var(--bf-primary);
}

/* Config Grid */
.budgetflow-app .budgetflow-pro__rollover-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
}

/* Rollover Config Card */
.budgetflow-app .budgetflow-pro__rollover-config-card {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.25rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__rollover-config-card:hover {
  box-shadow: var(--bf-shadow-md);
}

.budgetflow-app .budgetflow-pro__rollover-config-card--enabled {
  border-color: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__rollover-config-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0;
}

/* Toggle Switch */
.budgetflow-app .budgetflow-pro__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

/* Rollover config toggle — scoped variant */
.budgetflow-app .budgetflow-pro__rollover-config-card__toggle {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.budgetflow-app .budgetflow-pro__toggle__checkbox {
  display: none;
}

.budgetflow-app .budgetflow-pro__toggle__box {
  position: relative;
  width: 40px;
  height: 24px;
  background: #d1d5db;
  border-radius: 24px;
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__toggle__box::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: var(--bf-transition);
}

.budgetflow-app .budgetflow-pro__toggle__checkbox:checked + .budgetflow-pro__toggle__box {
  background: var(--bf-success);
}

.budgetflow-app .budgetflow-pro__toggle__checkbox:checked + .budgetflow-pro__toggle__box::before {
  transform: translateX(16px);
}

.budgetflow-app .budgetflow-pro__toggle__thumb {
  width: 100%;
  height: 100%;
}

.budgetflow-app .budgetflow-pro__toggle__text {
  font-size: var(--bf-font-body);
  font-weight: 600;
  color: var(--bf-text-secondary);
  margin-left: 0.25rem;
}

/* Settings Area */
.budgetflow-app .budgetflow-pro__rollover-config-card__settings {
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__setting-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__setting-label {
  font-size: var(--bf-font-body);
  font-weight: 600;
  color: var(--bf-text-secondary);
  flex: 1;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__cap-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__currency-symbol {
  position: absolute;
  left: 0.875rem;
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-secondary);
}

.budgetflow-app .budgetflow-pro__rollover-config-card__cap-input {
  width: 100%;
  padding: 0.6875rem 0.875rem 0.6875rem 2rem;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-family: inherit;
  color: var(--bf-text-primary);
  background: var(--bf-bg-primary);
  transition: var(--bf-transition);
  outline: none;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__cap-input:focus {
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

.budgetflow-app .budgetflow-pro__rollover-config-card__cap-hint {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.6;
  margin: 0.375rem 0;
  padding-left: 1.25rem;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__cap-hint:first-child {
  margin-top: 0;
}

/* Footer */
.budgetflow-app .budgetflow-pro__rollover-config-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.budgetflow-app .budgetflow-pro__rollover-config-card__category-id {
  font-size: 0.6875rem;
  color: var(--bf-text-muted);
}

/* Ledger History */
.budgetflow-app .budgetflow-pro__rollover-history {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  padding: 1.5rem;
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__rollover-history__header {
  margin-bottom: 1.25rem;
}

.budgetflow-app .budgetflow-pro__rollover-history__title {
  font-size: var(--bf-font-section);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.375rem;
}

.budgetflow-app .budgetflow-pro__rollover-history__table {
  overflow-x: auto;
}

.budgetflow-app .budgetflow-pro__rollover-history__table-inner {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bf-font-body);
}

.budgetflow-app .budgetflow-pro__rollover-history__th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bf-text-secondary);
  border-bottom: 2px solid var(--bf-border);
  background: var(--bf-bg-tertiary);
}

.budgetflow-app .budgetflow-pro__rollover-history__td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__rollover-history__tr:last-child td {
  border-bottom: none;
}

/* =========================================
   Form Elements
   ========================================= */

.budgetflow-app .budgetflow-pro__form-group {
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--bf-font-helper);
  font-weight: 600;
  color: var(--bf-text-secondary);
  letter-spacing: 0.01em;
}

.budgetflow-app .budgetflow-pro__form-input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-family: inherit;
  color: var(--bf-text-primary);
  background: var(--bf-bg-primary);
  transition: var(--bf-transition);
  outline: none;
  line-height: 1.5;
}

.budgetflow-app .budgetflow-pro__form-input:focus {
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

.budgetflow-app .budgetflow-pro__form-input--small {
  max-width: 100px;
}

.budgetflow-app .budgetflow-pro__form-select {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-family: inherit;
  color: var(--bf-text-primary);
  background: var(--bf-bg-primary);
  transition: var(--bf-transition);
  outline: none;
  cursor: pointer;
}

.budgetflow-app .budgetflow-pro__form-select:focus {
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

.budgetflow-app .budgetflow-pro__form-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.budgetflow-app .budgetflow-pro__form-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.budgetflow-app .budgetflow-pro__form-currency-symbol {
  position: absolute;
  left: 0.875rem;
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-text-secondary);
}

.budgetflow-app .budgetflow-pro__form-row .budgetflow-pro__form-input {
  max-width: 100px;
}

.budgetflow-app .budgetflow-pro__form-suffix {
  padding-left: 0.5rem;
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* =========================================
   Button System (budgetflow-pro__ prefixed)
   ========================================= */

.budgetflow-app .budgetflow-pro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.6875rem 1.25rem;
  border: none;
  border-radius: var(--bf-radius-sm);
  font-size: var(--bf-font-body);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--bf-transition);
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
}

.budgetflow-app .budgetflow-pro__btn--primary {
  background: var(--bf-primary-gradient);
  color: white;
  box-shadow: 0 2px 6px rgba(79,70,229,0.25);
}

.budgetflow-app .budgetflow-pro__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.35);
  background: var(--bf-primary-gradient-hover);
}

.budgetflow-app .budgetflow-pro__btn--primary:active {
  transform: translateY(0);
}

.budgetflow-app .budgetflow-pro__btn--secondary {
  background: var(--bf-bg-card);
  color: var(--bf-text-primary);
  border-color: var(--bf-border);
}

.budgetflow-app .budgetflow-pro__btn--secondary:hover {
  background: var(--bf-bg-tertiary);
  border-color: var(--bf-border-strong);
}

.budgetflow-app .budgetflow-pro__btn--small {
  padding: 0.5rem 0.875rem;
  font-size: var(--bf-font-helper);
}

.budgetflow-app .budgetflow-pro__btn--micro {
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
}

.budgetflow-app .budgetflow-pro__btn--danger {
  background: var(--bf-danger);
  color: white;
  box-shadow: 0 2px 6px rgba(220,38,38,0.2);
}

.budgetflow-app .budgetflow-pro__btn--danger:hover {
  background: var(--bf-danger-light);
  box-shadow: 0 4px 10px rgba(220,38,38,0.3);
}

.budgetflow-app .budgetflow-pro__btn--warning {
  background: var(--bf-warning);
  color: white;
  box-shadow: 0 2px 6px rgba(217,119,6,0.2);
}

.budgetflow-app .budgetflow-pro__btn--warning:hover {
  background: #f97316;
  box-shadow: 0 4px 10px rgba(217,119,6,0.3);
}

.budgetflow-app .budgetflow-pro__btn--success {
  background: var(--bf-success);
  color: white;
  box-shadow: 0 2px 6px rgba(5,150,105,0.2);
}

.budgetflow-app .budgetflow-pro__btn--success:hover {
  background: var(--bf-success-light);
  box-shadow: 0 4px 10px rgba(5,150,105,0.3);
}

/* =========================================
   Modal System
   ========================================= */

.budgetflow-app .budgetflow-pro__modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.budgetflow-app .budgetflow-pro__modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.budgetflow-app .budgetflow-pro__modal__content {
  position: relative;
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius);
  box-shadow: var(--bf-shadow-lg);
  max-height: 90vh;
  overflow: auto;
  width: 100%;
  max-width: 560px;
  z-index: 1001;
}

.budgetflow-app .budgetflow-pro__modal .budgetflow-pro__recurring-form__modal {
  max-height: 90vh;
  overflow-y: auto;
}

/* Recurring Form */
.budgetflow-app .budgetflow-pro__recurring-form {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-md);
}

.budgetflow-app .budgetflow-pro__recurring-form__header {
  margin-bottom: var(--bf-space-sm);
}

.budgetflow-app .budgetflow-pro__recurring-form__header h3 {
  margin: 0 0 var(--bf-space-xs) 0;
  font-size: var(--bf-font-section);
  font-weight: 700;
  color: var(--bf-text-primary);
}

.budgetflow-app .budgetflow-pro__recurring-form__header p {
  margin: 0;
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__recurring-form__content {
  width: 100%;
  max-width: 640px;
}

/* =========================================
   Toggle Switch
   ========================================= */

.budgetflow-app .budgetflow-pro__form-row .budgetflow-pro__toggle {
  grid-column: 1 / -1;
}

.budgetflow-app .budgetflow-pro__form-date-group .budgetflow-pro__toggle {
  margin-top: 0.5rem;
}

/* =========================================
   Data Controls
   ========================================= */

.budgetflow-app .budgetflow-pro__data-controls {
  background: var(--bf-bg-card);
  border-radius: var(--bf-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--bf-shadow-sm);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__data-controls--compact {
  padding: 1rem;
}

.budgetflow-app .budgetflow-pro__data-controls__header {
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__data-controls__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__data-controls__privacy {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.budgetflow-app .budgetflow-pro__data-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.budgetflow-app .budgetflow-pro__data-controls__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: var(--bf-font-helper);
  font-weight: 600;
  border: 1.5px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-bg-card);
  color: var(--bf-text-primary);
  cursor: pointer;
  transition: var(--bf-transition);
  font-family: inherit;
}

.budgetflow-app .budgetflow-pro__data-controls__action:hover {
  background: var(--bf-bg-tertiary);
  border-color: var(--bf-border-strong);
}

.budgetflow-app .budgetflow-pro__data-controls__action--danger {
  color: var(--bf-danger);
  border-color: var(--bf-danger);
}

.budgetflow-app .budgetflow-pro__data-controls__action--danger:hover {
  background: var(--bf-danger-bg);
}

.budgetflow-app .budgetflow-pro__data-controls__confirm {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--bf-danger-bg);
  border-radius: var(--bf-radius);
  border: 1px solid rgba(220,38,38,0.2);
}

.budgetflow-app .budgetflow-pro__data-controls__confirm__content {
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__data-controls__confirm__content h4 {
  font-size: var(--bf-font-body);
  font-weight: 700;
  color: var(--bf-danger);
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__data-controls__confirm__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.budgetflow-app .budgetflow-pro__data-controls__info {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--bf-bg-tertiary);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
}

.budgetflow-app .budgetflow-pro__data-controls__info__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0 0 0.875rem;
}

.budgetflow-app .budgetflow-pro__data-controls__keys {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
  margin: 0 0 0.375rem;
}

.budgetflow-app .budgetflow-pro__data-controls__entries {
  margin-top: 0.875rem;
}

.budgetflow-app .budgetflow-pro__data-controls__entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--bf-border);
  font-size: var(--bf-font-helper);
}

.budgetflow-app .budgetflow-pro__data-controls__entry:last-child {
  border-bottom: none;
}

.budgetflow-app .budgetflow-pro__data-controls__entry__key {
  font-weight: 600;
  color: var(--bf-text-primary);
  min-width: 100px;
}

.budgetflow-app .budgetflow-pro__data-controls__entry__type {
  color: var(--bf-text-muted);
}

.budgetflow-app .budgetflow-pro__data-controls__entry__size {
  color: var(--bf-text-muted);
  margin-left: auto;
}

/* =========================================
   Contribution Utilities
   ========================================= */

.budgetflow-app .budgetflow-pro__contribution-note {
  font-size: var(--bf-font-body);
  color: var(--bf-text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__mt-1 {
  margin-top: 0.25rem;
}

.budgetflow-app .budgetflow-pro__mb-1 {
  margin-bottom: 0.25rem;
}


/* =========================================
   Responsive Breakpoints for v1.2 Features
   ========================================= */

@media (max-width: 768px) {
  /* Recurring Section */
  .budgetflow-app .budgetflow-pro__recurring-section__filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-section__summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .budgetflow-app .budgetflow-pro__recurring-card-grid {
    grid-template-columns: 1fr;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-card__title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-card__status-badge {
    margin-top: 0.5rem;
    align-self: flex-start;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-card__stats {
    flex-direction: row;
    justify-content: center;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-card__actions {
    flex-direction: column;
  }
  
  /* Rollover Section */
  .budgetflow-app .budgetflow-pro__rollover-section__filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .budgetflow-app .budgetflow-pro__rollover-section__summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .budgetflow-app .budgetflow-pro__rollover-config-grid {
    grid-template-columns: 1fr;
  }
  
  .budgetflow-app .budgetflow-pro__rollover-config-card__setting-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .budgetflow-app .budgetflow-pro__rollover-config-card__cap-input-wrapper {
    flex: none;
  }
  
  /* Modal */
  .budgetflow-app .budgetflow-pro__modal__content {
    width: 95%;
    margin: 1rem;
  }
  
  .budgetflow-app .budgetflow-pro__recurring-form__content {
    width: 95%;
    margin: 1rem;
  }
  
  /* Data Controls */
  .budgetflow-app .budgetflow-pro__data-controls__confirm__actions {
    flex-direction: column;
  }
  
  .budgetflow-app .budgetflow-pro__data-controls__confirm__actions .budgetflow-pro__btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* Recurring Summary */
  .budgetflow-app .budgetflow-pro__recurring-section__summary {
    grid-template-columns: 1fr;
  }
  
  /* Form */
  .budgetflow-app .budgetflow-pro__form-row {
    grid-template-columns: 1fr;
  }
  
  .budgetflow-app .budgetflow-pro__form-date-group {
    width: 100%;
  }
  
  /* Buttons */
  .budgetflow-app .budgetflow-pro__btn {
    width: 100%;
  }
  
  .budgetflow-app .budgetflow-pro__data-controls__confirm__actions {
    flex-direction: column;
  }
  
  .budgetflow-app .budgetflow-pro__data-controls__confirm__actions .budgetflow-pro__btn {
    width: 100%;
  }
}


/* =========================================
   Upcoming Bills Section (v1.3)
   ========================================= */

/* Bill Status Badge */
.budgetflow-app .budgetflow-pro__bill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.budgetflow-app .budgetflow-pro__bill-badge__icon {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.budgetflow-app .budgetflow-pro__bill-badge__label {
  white-space: nowrap;
}

/* Bill Card */
.budgetflow-app .budgetflow-pro__bill-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.2s ease;
}

.budgetflow-app .budgetflow-pro__bill-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #d1d5db;
}

.budgetflow-app .budgetflow-pro__bill-card--overdue {
  border-left: 4px solid #dc2626;
}

.budgetflow-app .budgetflow-pro__bill-card--overdue .budgetflow-pro__bill-card__name h3 {
  color: #dc2626;
}

.budgetflow-app .budgetflow-pro__bill-card--due-soon {
  border-left: 4px solid #d97706;
}

.budgetflow-app .budgetflow-pro__bill-card--unpaid {
  border-left: 4px solid #6b7280;
}

.budgetflow-app .budgetflow-pro__bill-card--paid {
  border-left: 4px solid #059669;
  opacity: 0.75;
}

.budgetflow-app .budgetflow-pro__bill-card__header {
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.budgetflow-app .budgetflow-pro__bill-card__name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.budgetflow-app .budgetflow-pro__bill-card__name h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.budgetflow-app .budgetflow-pro__bill-card__badge {
  font-size: 0.8125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
}

.budgetflow-app .budgetflow-pro__bill-card__badge.overdue {
  background: #dc2626;
  color: white;
}

.budgetflow-app .budgetflow-pro__bill-card__badge.due-soon {
  background: #d97706;
  color: white;
}

.budgetflow-app .budgetflow-pro__bill-card__amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.budgetflow-app .budgetflow-pro__bill-card__currency {
  font-size: 0.875rem;
  margin-right: 0.125rem;
  color: #6b7280;
}

.budgetflow-app .budgetflow-pro__bill-card__amount-value {
  color: #111827;
}

.budgetflow-app .budgetflow-pro__bill-card__body {
  padding: 1rem 1.25rem;
}

.budgetflow-app .budgetflow-pro__bill-card__due-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.budgetflow-app .budgetflow-pro__bill-card__due-label {
  font-size: 0.8125rem;
  color: #6b7280;
  font-weight: 500;
}

.budgetflow-app .budgetflow-pro__bill-card__due-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.budgetflow-app .budgetflow-pro__bill-card__due-remaining {
  font-size: 0.75rem;
  color: #9ca3af;
}

.budgetflow-app .budgetflow-pro__bill-card__status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.budgetflow-app .budgetflow-pro__bill-card__paid-date {
  font-size: 0.6875rem;
  color: #059669;
}

.budgetflow-app .budgetflow-pro__bill-card__category {
  font-size: 0.6875rem;
  color: #6b7280;
}

.budgetflow-app .budgetflow-pro__bill-card__notes {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e5e7eb;
}

.budgetflow-app .budgetflow-pro__bill-card__notes-label {
  font-size: 0.6875rem;
  color: #6b7280;
  margin-right: 0.25rem;
}

.budgetflow-app .budgetflow-pro__bill-card__notes-text {
  font-size: 0.75rem;
  color: #4b5563;
}

.budgetflow-app .budgetflow-pro__bill-card__actions {
  padding: 0.875rem 1.25rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 0.5rem;
}

.budgetflow-app .budgetflow-pro__bill-card__btn {
  flex: 1;
  padding: 0.5625rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.budgetflow-app .budgetflow-pro__bill-card__btn--primary {
  background: #4f46e5;
  color: white;
}

.budgetflow-app .budgetflow-pro__bill-card__btn--primary:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

.budgetflow-app .budgetflow-pro__bill-card__btn--secondary {
  background: #e5e7eb;
  color: #374151;
}

.budgetflow-app .budgetflow-pro__bill-card__btn--secondary:hover {
  background: #d1d5db;
}

.budgetflow-app .budgetflow-pro__bill-card__btn-group {
  display: flex;
  gap: 0.5rem;
}

.budgetflow-app .budgetflow-pro__bill-card__btn-group .budgetflow-pro__bill-card__btn {
  flex: 0 0 auto;
}

/* Bill Date Group */
.budgetflow-app .budgetflow-pro__bill-date-group {
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__bill-date-group__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.budgetflow-app .budgetflow-pro__bill-date-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .budgetflow-app .budgetflow-pro__bill-date-group__cards {
    grid-template-columns: 1fr;
  }
}

/* Upcoming Bills Empty State */
.budgetflow-app .budgetflow-pro__empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: #fff;
  border-radius: 16px;
  border: 2px dashed #e5e7eb;
  margin-top: 2rem;
}

.budgetflow-app .budgetflow-pro__empty-state__icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.budgetflow-app .budgetflow-pro__empty-state__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__empty-state__message {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.budgetflow-app .budgetflow-pro__empty-state__actions {
  display: flex;
  justify-content: center;
}

.budgetflow-app .budgetflow-pro__btn {
  padding: 0.6875rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.budgetflow-app .budgetflow-pro__btn--primary {
  background: #4f46e5;
  color: white;
}

.budgetflow-app .budgetflow-pro__btn--primary:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

/* Upcoming Bills Tab */
.budgetflow-app .budgetflow-pro__upcoming-bills {
  padding: 0 0.5rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin-left: 0.5rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.budgetflow-app .budgetflow-pro__filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background: white;
  cursor: pointer;
  min-width: 140px;
}

.budgetflow-app .budgetflow-pro__filter-select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.budgetflow-app .budgetflow-pro__upcoming-bills__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.budgetflow-app .budgetflow-pro__stat-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: all 0.18s ease;
}

.budgetflow-app .budgetflow-pro__stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.budgetflow-app .budgetflow-pro__stat-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.budgetflow-app .budgetflow-pro__stat-card__value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111827;
}

.budgetflow-app .budgetflow-pro__stat-card--overdue .budgetflow-pro__stat-card__value { 
  color: #dc2626; 
}

.budgetflow-app .budgetflow-pro__stat-card--due-soon .budgetflow-pro__stat-card__value { 
  color: #d97706; 
}

.budgetflow-app .budgetflow-pro__stat-card--paid .budgetflow-pro__stat-card__value { 
  color: #059669; 
}

.budgetflow-app .budgetflow-pro__stat-card__amount {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__total {
  text-align: center;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  margin-top: 1.5rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__total-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
}

.budgetflow-app .budgetflow-pro__upcoming-bills__total-value.highlight {
  color: #4f46e5;
}

@media (max-width: 768px) {
  .budgetflow-app .budgetflow-pro__upcoming-bills__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .budgetflow-app .budgetflow-pro__upcoming-bills__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .budgetflow-app .budgetflow-pro__upcoming-bills__actions {
    width: 100%;
  }
  .budgetflow-app .budgetflow-pro__filter-select {
    width: 100%;
  }
}

/* Responsive Grid for Bill Cards */
@media (max-width: 992px) {
  .budgetflow-app .budgetflow-pro__bill-date-group__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .budgetflow-app .budgetflow-pro__bill-date-group__cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   DARK THEME — .theme-dark on .budgetflow-app
   ========================================= */
.budgetflow-app.theme-dark {
  --bf-text-primary: #f1f5f9;
  --bf-text-secondary: #cbd5e1;
  --bf-text-muted: #94a3b8;
  --bf-text-inverse: #0f172a;
  --bf-bg-primary: #1e293b;
  --bf-bg-secondary: #0f172a;
  --bf-bg-tertiary: #334155;
  --bf-bg-card: #1e293b;
  --bf-border: #334155;
  --bf-border-strong: #475569;
  background: var(--bf-bg-secondary);
  color: var(--bf-text-primary);
}

.budgetflow-app.theme-dark .app-header { background: var(--bf-bg-card); border-color: var(--bf-border); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.budgetflow-app.theme-dark .app-header h1 { color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .app-tagline { color: var(--bf-text-muted); }
.budgetflow-app.theme-dark .tab-nav { background: var(--bf-bg-card); border-color: var(--bf-border); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.budgetflow-app.theme-dark .tab-btn { color: var(--bf-text-secondary); }
.budgetflow-app.theme-dark .tab-btn:hover { background: var(--bf-bg-tertiary); color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .tab-btn--active { background: var(--bf-primary); color: var(--bf-text-inverse); }
.budgetflow-app.theme-dark .tab-content section { background: var(--bf-bg-card); border-color: var(--bf-border); box-shadow: 0 1px 3px rgba(0,0,0,0.4); color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .tab-content section h2 { color: var(--bf-text-primary); border-color: var(--bf-border); }
.budgetflow-app.theme-dark .summary-card { background: var(--bf-bg-card); border-color: var(--bf-border); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.budgetflow-app.theme-dark .summary-card::before { background: var(--bf-primary-gradient); }
.budgetflow-app.theme-dark .summary-label { color: var(--bf-text-muted); }
.budgetflow-app.theme-dark .summary-value { color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .empty-state { background: var(--bf-bg-card); border-color: var(--bf-border); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.budgetflow-app.theme-dark .empty-state__title { color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .empty-state__message { color: var(--bf-text-muted); }
.budgetflow-app.theme-dark .empty-state__note { color: var(--bf-text-secondary); }
.budgetflow-app.theme-dark input[type="text"],
.budgetflow-app.theme-dark input[type="number"],
.budgetflow-app.theme-dark select,
.budgetflow-app.theme-dark textarea { background: var(--bf-bg-tertiary); border-color: var(--bf-border-strong); color: var(--bf-text-primary); }
.budgetflow-app.theme-dark input:focus,
.budgetflow-app.theme-dark select:focus { border-color: var(--bf-primary); outline: none; }
.budgetflow-app.theme-dark table { background: var(--bf-bg-card); border-color: var(--bf-border); }
.budgetflow-app.theme-dark th { background: var(--bf-bg-tertiary); color: var(--bf-text-secondary); border-color: var(--bf-border); }
.budgetflow-app.theme-dark td { color: var(--bf-text-primary); border-color: var(--bf-border); }
.budgetflow-app.theme-dark tbody tr:hover { background: var(--bf-bg-tertiary); }
.budgetflow-app.theme-dark .btn { background: var(--bf-primary); color: var(--bf-text-inverse); }
.budgetflow-app.theme-dark .btn:hover { background: var(--bf-primary-dark); }
.budgetflow-app.theme-dark .btn--secondary { background: var(--bf-bg-tertiary); color: var(--bf-text-primary); border: 1px solid var(--bf-border-strong); }
.budgetflow-app.theme-dark .budgetflow-pro__budget-card { background: var(--bf-bg-card); border-color: var(--bf-border); color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .budgetflow-pro__budget-card__title { color: var(--bf-text-primary); }
.budgetflow-app.theme-dark .budgetflow-pro__budget-card__subtitle { color: var(--bf-text-muted); }

/* =========================================
   TEMPLATE CARDS — Grid + Card Styling
   ========================================= */
.budgetflow-app .budgetflow-pro__template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.budgetflow-app .budgetflow-pro__template-card {
  background: var(--bf-bg-card);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  padding: 1.125rem;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.budgetflow-app .budgetflow-pro__template-card:hover {
  border-color: var(--bf-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.budgetflow-app .budgetflow-pro__template-card__title {
  font-size: var(--bf-font-card);
  font-weight: 700;
  color: var(--bf-text-primary);
  margin: 0;
}

.budgetflow-app .budgetflow-pro__template-card__desc {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-muted);
  margin: 0;
  line-height: 1.5;
}

.budgetflow-app .budgetflow-pro__template-card__stats {
  font-size: var(--bf-font-helper);
  color: var(--bf-text-secondary);
}

.budgetflow-app .budgetflow-pro__template-card__income {
  font-size: var(--bf-font-helper);
  color: var(--bf-primary-light);
  margin: 0;
}