/* ---- Neumorphic "timbul" (raised) styling ---- */
  .btn, .small-add-btn, .mini-add-btn, .paid-btn, .icon-btn-static, .del-btn-static, .cat-chip, .status-badge, .edit-btn, .nav-btn {
    box-shadow: 4px 4px 9px rgba(var(--shadow-d-rgb),0.28), -4px -4px 9px rgba(var(--shadow-l-rgb),0.9);
    transition: box-shadow 0.12s, transform 0.12s;
  }
  .btn:active, .small-add-btn:active, .mini-add-btn:active, .paid-btn:active, .icon-btn-static:active, .del-btn-static:active, .cat-chip:active {
    box-shadow: inset 2px 2px 5px rgba(var(--shadow-d-rgb),0.32), inset -2px -2px 5px rgba(var(--shadow-l-rgb),0.8);
  }
  .cat-chip.active {
    box-shadow: inset 2px 2px 5px rgba(58,46,86,0.35), inset -2px -2px 5px rgba(var(--shadow-l-rgb),0.12);
  }
  .nav-btn.active {
    box-shadow: inset 2px 2px 5px rgba(var(--shadow-d-rgb),0.25), inset -2px -2px 5px rgba(var(--shadow-l-rgb),0.8);
    border-radius: 12px;
    margin: 4px;
  }
  .nav-btn:not(.active) { box-shadow: none; }

  .balance-card, .bill-card, .reminder-row, .commitment-empty, .modal, .commitment-row {
    box-shadow: 6px 6px 14px rgba(var(--shadow-d-rgb),0.26), -6px -6px 14px rgba(var(--shadow-l-rgb),0.9);
  }

  .field-input {
    border-color: transparent;
    box-shadow: inset 3px 3px 6px rgba(var(--shadow-d-rgb),0.18), inset -3px -3px 6px rgba(var(--shadow-l-rgb),0.85);
  }
  .field-input:focus {
    box-shadow: inset 2px 2px 5px rgba(var(--shadow-d-rgb),0.22), inset -2px -2px 5px rgba(var(--shadow-l-rgb),0.85), 0 0 0 2px var(--primary);
  }
  select.field-input option { background: var(--paper); color: var(--ink); }

  .date-picker-wrap { position: relative; }
  .date-picker-btn { display: flex; align-items: center; gap: 7px; width: 100%; border: none; border-radius: 8px; padding: 10px 11px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); background: #FFFFFF; cursor: pointer;
    box-shadow: inset 3px 3px 6px rgba(var(--shadow-d-rgb),0.18), inset -3px -3px 6px rgba(var(--shadow-l-rgb),0.85); }
  .calendar-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--paper); border-radius: 18px; padding: 20px; width: 340px; max-width: calc(100vw - 60px);
    box-shadow: 8px 8px 18px rgba(var(--shadow-d-rgb),0.35), -6px -6px 14px rgba(var(--shadow-l-rgb),0.6); }
  .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .cal-nav-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--panel); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 3px 6px rgba(var(--shadow-d-rgb),0.24), -3px -3px 6px rgba(var(--shadow-l-rgb),0.8); }
  .cal-nav-btn:active { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(255,255,255,0.15); }
  .cal-nav-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
  .cal-month-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; text-transform: capitalize; color: var(--ink); }
  .calendar-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
  .calendar-dow-row span { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; }
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .cal-day { position: relative; aspect-ratio: 1; border: none; border-radius: 10px; background: var(--panel); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0;
    box-shadow: 2px 2px 5px rgba(var(--shadow-d-rgb),0.22), -2px -2px 5px rgba(var(--shadow-l-rgb),0.9); }
  .cal-day.today { border: 1.5px solid var(--primary); }
  .cal-day.selected { background: var(--primary); color: var(--primary-text); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(255,255,255,0.15); }
  .cal-day.disabled { opacity: 0.3; cursor: default; box-shadow: none; background: transparent; }
  .cal-day-blank { aspect-ratio: 1; }

  .cat-icon, .cat-icon.income {
    box-shadow: 2px 2px 5px rgba(var(--shadow-d-rgb),0.22), -2px -2px 5px rgba(var(--shadow-l-rgb),0.9);
  }

  .logo-mark {
    box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.3), -3px -3px 7px rgba(var(--shadow-l-rgb),0.5);
  }
  .sync-badge { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-right: 8px; }
  .sync-badge.local { background: #C9C2C2; }
  .sync-badge.syncing { background: #E0B34D; animation: pulse-sync 1s infinite; }
  .sync-badge.synced { background: #5FB87A; }
  .sync-badge.error { background: #D9695F; }
  @keyframes pulse-sync { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }