/* ===============================
   MyBabyTracker — Soft Girly Pink Theme
   =============================== */

:root{
  /* Palette (soft, not eye‑sore) */
  --bg: #0f1020;           /* deep eggplant/navy */
  --bg-2:#141632;          /* panels */
  --text:#ffeef7;          /* soft pink-white */
  --muted:#a9b3d6;         /* desaturated periwinkle */
  --line:#243055;          /* borders */

  --accent:#ff74c5;        /* pink */
  --accent-2:#ffc9e8;      /* pale pink */
  --accent-3:#ffd3f0;      /* softer */
  --ring: rgba(255,116,197,.35);

  --success:#79e2b2;
  --danger:#ff7a86;
  --warning:#ffd37d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1400px 1400px at -15% -15%, rgba(255,116,197,.18), transparent 65%),
    radial-gradient(1200px 1200px at 115% 5%, rgba(255,201,232,.15), transparent 65%),
    radial-gradient(800px 800px at 50% 100%, rgba(255,116,197,.1), transparent 70%),
    linear-gradient(180deg,var(--bg) 0%, #0e1226 30%, #121433 70%, #0c0f26 100%);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(90deg,
      transparent,
      transparent 98px,
      rgba(255,116,197,.02) 100px,
      rgba(255,116,197,.02) 102px
    ),
    repeating-linear-gradient(0deg,
      transparent,
      transparent 98px,
      rgba(255,116,197,.02) 100px,
      rgba(255,116,197,.02) 102px
    );
  pointer-events:none;
  z-index:-1;
}
a{color:inherit}

.container{max-width:1600px;margin:0 auto;padding:24px}

/* Header & Nav */
header{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
  background:rgba(20, 22, 50, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,116,197,.2);
  border-radius:24px;
  padding:20px 28px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    0 1px 0 rgba(255,116,197,.1) inset,
    0 -1px 0 rgba(0,0,0,.2) inset;
}
.header-brand{
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
}
.header-brand .pill{
  background:rgba(26, 31, 66, 0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,116,197,.3);
  box-shadow:
    0 4px 16px rgba(255,116,197,.15),
    0 1px 0 rgba(255,201,232,.1) inset;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-brand .pill:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 25px rgba(255,116,197,.25),
    0 1px 0 rgba(255,201,232,.2) inset;
}
.app-title{
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--accent-2);
  font-size:18px;
}
.header-nav{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex:2;
}
.header-streak{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
}
.header-streak .streak-pill{
  background:rgba(43, 22, 61, 0.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,116,197,.3);
  box-shadow:
    0 4px 16px rgba(255,116,197,.2),
    0 1px 0 rgba(255,201,232,.1) inset;
  padding:10px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-streak .streak-pill:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 25px rgba(255,116,197,.3),
    0 1px 0 rgba(255,201,232,.2) inset;
}
.tab{
  border:1px solid rgba(36,48,85,.5);
  background:rgba(15,20,51,0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--text);
  padding:12px 20px;
  border-radius:16px;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight:500;
  font-size:14px;
  position:relative;
  overflow:hidden;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing:-.01em;
}
.tab::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,116,197,.1), transparent);
  transition:left 0.6s ease;
}
.tab:hover::before{
  left:100%;
}
.tab:hover{
  transform:translateY(-2px) scale(1.02);
  background:rgba(26, 31, 66, 0.8);
  border-color:rgba(255,116,197,.4);
  box-shadow:
    0 8px 25px rgba(255,116,197,.2),
    0 0 0 1px rgba(255,116,197,.1) inset;
  color:var(--accent-2);
  font-weight:600;
}
.tab.active{
  background:linear-gradient(135deg, rgba(255,116,197,0.9) 0%, rgba(212,155,199,0.9) 100%);
  border-color:rgba(255,116,197,.6);
  box-shadow:
    0 8px 25px rgba(255,116,197,.4),
    0 0 0 1px rgba(255,255,255,.1) inset;
  color:#ffffff;
  font-weight:700;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tab.active:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:
    0 12px 35px rgba(255,116,197,.5),
    0 0 0 1px rgba(255,255,255,.2) inset;
}

@keyframes glow {
  from {
    box-shadow:0 0 20px rgba(255,116,197,.6), 0 0 40px rgba(255,201,232,.4), 0 4px 15px rgba(0,0,0,.3);
  }
  to {
    box-shadow:0 0 25px rgba(255,116,197,.8), 0 0 50px rgba(255,201,232,.6), 0 4px 20px rgba(0,0,0,.4);
  }
}

/* Calendar specific styles */
.day-details-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(36,48,85,.6);
  border-radius: 8px;
  background: rgba(21, 26, 62, 0.4);
  padding: 8px;
}

.day-details-container::-webkit-scrollbar {
  width: 6px;
}

.day-details-container::-webkit-scrollbar-track {
  background: rgba(21, 26, 62, 0.3);
  border-radius: 3px;
}

.day-details-container::-webkit-scrollbar-thumb {
  background: rgba(255, 116, 197, 0.5);
  border-radius: 3px;
}

.day-details-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 116, 197, 0.7);
}

/* Todo improvements */
.todo-container {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 16px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(15, 20, 51, 0.3);
  border: 1px solid rgba(36,48,85,.3);
}

.todo-container::-webkit-scrollbar {
  width: 6px;
}

.todo-container::-webkit-scrollbar-track {
  background: rgba(21, 26, 62, 0.3);
  border-radius: 3px;
}

.todo-container::-webkit-scrollbar-thumb {
  background: rgba(255, 116, 197, 0.5);
  border-radius: 3px;
}

.todo-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 116, 197, 0.7);
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(21, 26, 62, 0.3);
  border: 1px solid rgba(36,48,85,.4);
  transition: all 0.2s ease;
}

.todo-item:hover {
  background: rgba(26, 31, 66, 0.5);
  border-color: rgba(255, 116, 197, 0.3);
}

.todo-item.completed {
  background: rgba(40, 167, 69, 0.2);
  border-color: rgba(40, 167, 69, 0.3);
}

.todo-checkbox {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: #ff74c5;
}

.todo-text {
  flex: 1;
  font-size: 14px;
  margin-right: 12px;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #6aa0a0;
}

.todo-delete {
  padding: 4px 8px;
  font-size: 12px;
  background: rgba(220, 53, 69, 0.7);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
}

.todo-delete:hover {
  background: rgba(220, 53, 69, 0.9);
}

/* Floating Action Bar */
.floating-action-bar {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  opacity: 0;
  animation: fabSlideIn 0.3s ease forwards;
}

@keyframes fabSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.1) inset;
  position: relative;
}

.fab-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  z-index: -1;
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.15) inset;
}

.fab-button:active {
  transform: scale(0.95);
}

.fab-button.expense {
  background: rgba(220, 53, 69, 0.9);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: white;
}

.fab-button.income {
  background: rgba(40, 167, 69, 0.9);
  border: 1px solid rgba(40, 167, 69, 0.5);
  color: white;
}

.fab-button.todo {
  background: rgba(0, 122, 204, 0.9);
  border: 1px solid rgba(0, 122, 204, 0.5);
  color: white;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
  to {
    opacity: 1;
  }
}

.modal {
  background: rgba(20, 22, 50, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(36,48,85,.6);
  border-radius: 20px;
  padding: 0;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  transform: scale(0.9) translateY(20px);
  animation: modalSlideIn 0.3s ease forwards;
}

@keyframes modalSlideIn {
  to {
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0 24px;
  border-bottom: 1px solid rgba(36,48,85,.4);
  margin-bottom: 24px;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.modal-form {
  padding: 0 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.btn-secondary {
  background: rgba(108, 117, 125, 0.8);
  border: 1px solid rgba(108, 117, 125, 0.5);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(108, 117, 125, 1);
  transform: translateY(-1px);
}

/* Mobile responsiveness for floating action bar */
@media (max-width: 768px) {
  .floating-action-bar {
    left: 10px;
    gap: 8px;
  }
  
  .fab-button {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .modal {
    min-width: 320px;
    margin: 20px;
    max-width: calc(100vw - 40px);
  }
  
  .modal-form {
    padding: 0 16px 16px 16px;
  }
  
  .modal-header {
    padding: 16px 16px 0 16px;
  }
}

/* AI Suggestion Tooltip */
.ai-suggestion-tooltip {
  position: absolute;
  top: -30px;
  right: 0;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1000;
  animation: aiTooltipSlide 0.3s ease;
}

.ai-suggestion-tooltip.ai-account-tooltip {
  background: rgba(0, 122, 204, 0.9);
}

.ai-suggestion-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(40, 167, 69, 0.9);
}

.ai-suggestion-tooltip.ai-account-tooltip::after {
  border-top: 5px solid rgba(0, 122, 204, 0.9);
}

@keyframes aiTooltipSlide {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(21, 26, 62, 0.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(36,48,85,.6);
  font-size:13px;
  font-weight:500;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pill:hover{
  transform:translateY(-1px);
  background:rgba(26, 31, 66, 0.9);
  border-color:rgba(255,116,197,.3);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.pill.primary {
  background: rgba(0, 122, 204, 0.8);
  border-color: rgba(0, 95, 153, 0.6);
  color: white;
}

.pill.success {
  background: rgba(40, 167, 69, 0.8);
  border-color: rgba(30, 126, 52, 0.6);
  color: white;
}

.pill.danger {
  background: rgba(220, 53, 69, 0.8);
  border-color: rgba(189, 33, 48, 0.6);
  color: white;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(36,48,85,.5);
  background:rgba(17, 24, 58, 0.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:12px;
  font-weight:500;
  color:var(--accent-3);
  transition:all 0.3s ease;
}
.tag:hover{
  transform:translateY(-1px);
  border-color:rgba(255,116,197,.3);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

button{cursor:pointer;font-weight:600}
.btn-primary{
  background:linear-gradient(135deg, rgba(90, 27, 64, 0.9) 0%, rgba(50, 17, 39, 0.9) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(111, 37, 90, 0.8);
  color:var(--text);
  border-radius:16px;
  padding:12px 20px;
  font-weight:600;
  font-size:14px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 12px rgba(0,0,0,.2),
    0 1px 0 rgba(255,116,197,.1) inset;
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(111, 37, 90, 0.9) 0%, rgba(70, 27, 49, 0.9) 100%);
  box-shadow:
    0 8px 25px rgba(255,116,197,.2),
    0 1px 0 rgba(255,116,197,.2) inset;
  border-color:rgba(255,116,197,.6);
}
.btn-danger{
  background:linear-gradient(135deg, rgba(90, 32, 32, 0.9) 0%, rgba(64, 18, 18, 0.9) 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(111, 37, 37, 0.8);
  color:var(--text);
  border-radius:16px;
  padding:12px 20px;
  font-weight:600;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-danger:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, rgba(111, 37, 37, 0.9) 0%, rgba(84, 27, 27, 0.9) 100%);
  box-shadow:0 8px 25px rgba(255,122,134,.2);
}

/* Inputs */
.input, select, button, .date{
  background:rgba(15, 20, 51, 0.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(36,48,85,.6);
  border-radius:16px;
  color:var(--text);
  padding:12px 16px;
  font-size:14px;
  font-weight:400;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.input:focus, select:focus, .date:focus{
  outline:none;
  border-color:rgba(255,116,197,.6);
  background:rgba(15, 20, 51, 0.9);
  box-shadow:
    0 0 0 3px rgba(255,116,197,.15),
    0 4px 12px rgba(0,0,0,.1);
  transform:translateY(-1px);
}
.input::placeholder{
  color:rgba(169,179,214,.6);
  font-weight:400;
}
select[multiple]{min-height:110px}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:24px}
.card{
  grid-column:span 12;
  background:rgba(20, 22, 50, 0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(36,48,85,.4);
  border-radius:24px;
  padding:24px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 8px 32px rgba(0,0,0,.15),
    0 1px 0 rgba(255,116,197,.05) inset;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,116,197,.3);
  box-shadow:
    0 12px 40px rgba(0,0,0,.2),
    0 1px 0 rgba(255,116,197,.1) inset;
}
.card h3{
  margin:0 0 16px;
  font-size:18px;
  font-weight:70;
  color:var(--accent-2);
  letter-spacing:-.02em;
}
.muted{color:var(--muted);font-size:13px;line-height:1.5}
.row{display:flex;gap:12px;flex-wrap:wrap}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.w-100{width:100%}

/* Table */
.table-wrapper{
  max-height:400px;
  overflow-y:auto;
  border-radius:20px;
  border:1px solid rgba(36,48,85,.4);
  background:rgba(15, 20, 51, 0.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(36,48,85,.3);
  text-align:left;
  font-size:14px;
  transition:all 0.2s ease;
}
.table th{
  color:var(--accent-2);
  font-weight:700;
  position:sticky;
  top:0;
  background:rgba(20, 22, 50, 0.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:1;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.table tr:hover td{
  background:rgba(18, 25, 74, 0.6);
  transform:scale(1.01);
}

/* Calendar */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calendar-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;color:var(--muted)}
.calendar .day{
  border:1px solid var(--line);border-radius:12px;
  min-height:92px;background:#0f173b;padding:8px;position:relative;
  cursor:pointer;transition:box-shadow .15s ease, transform .04s ease, background .15s ease;
}
.calendar .day:hover{box-shadow:0 0 0 2px var(--ring)}
.calendar .day:active{transform:translateY(1px)}
.calendar .day .d{font-weight:800;color:#a9c3ff}
.calendar .day .spent{position:absolute;bottom:8px;right:8px;font-size:12px;color:var(--success)}
.calendar .day.today{box-shadow:0 0 0 2px var(--ring)}
.calendar .day.selected{outline:2px solid var(--accent); outline-offset:-2px}

/* Spending level color coding */
.calendar .day.spending-low {
  background: linear-gradient(135deg, rgba(121, 226, 178, 0.1), rgba(121, 226, 178, 0.05));
  border-color: rgba(121, 226, 178, 0.3);
}
.calendar .day.spending-medium {
  background: linear-gradient(135deg, rgba(255, 211, 125, 0.1), rgba(255, 211, 125, 0.05));
  border-color: rgba(255, 211, 125, 0.3);
}
.calendar .day.spending-high {
  background: linear-gradient(135deg, rgba(255, 122, 134, 0.1), rgba(255, 122, 134, 0.05));
  border-color: rgba(255, 122, 134, 0.3);
}
.calendar .day.spending-extreme {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.08));
  border-color: rgba(220, 53, 69, 0.4);
}

/* Todo indicators */
.calendar .day.has-todos {
  border-left: 4px solid rgba(255, 116, 197, 0.6);
}
.calendar .day.has-completed-todos {
  border-right: 4px solid rgba(121, 226, 178, 0.6);
}

.todo-indicators {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.todo-count {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 8px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

.todo-count.incomplete {
  background: rgba(255, 116, 197, 0.8);
  color: white;
}

.todo-count.completed {
  background: rgba(121, 226, 178, 0.8);
  color: #0f1020;
}

/* Bank page */
.pillar{
  background: linear-gradient(135deg, rgba(255, 116, 197, 0.1), rgba(0, 122, 204, 0.1));
  border: 1px solid rgba(255, 116, 197, 0.2);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.big-number{
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-top: 8px;
  background: linear-gradient(135deg, #ff74c5, #007acc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#bankAllocList .alloc{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:#0f1537;min-width:220px
}
#bankAllocList .name{font-weight:700}
#bankAllocList .amount{font-variant-numeric:tabular-nums}

/* Weekly stats styling */
.weekly-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.weekly-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(21, 26, 62, 0.4);
  border: 1px solid rgba(36,48,85,.4);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.weekly-stat-item:hover {
  background: rgba(26, 31, 66, 0.6);
  border-color: rgba(255, 116, 197, 0.3);
}

.weekly-stat-item.positive {
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
  border-color: rgba(40, 167, 69, 0.5);
  background: rgba(40, 167, 69, 0.1);
}

.weekly-stat-item.negative {
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
  border-color: rgba(220, 53, 69, 0.5);
  background: rgba(220, 53, 69, 0.1);
}

.day-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.day-amount {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.day-amount.success {
  color: #28a745;
  text-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
}

.day-amount.danger {
  color: #dc3545;
  text-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
}

/* Account chips (settings) */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:999px;background:#101741;
  padding:6px 10px;font-size:12px
}
.chip .x{cursor:pointer;opacity:.75}
.chip .x:hover{opacity:1}

/* Auth */
.auth-wrap{
  height:100vh;
  width:100vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1400px 1400px at -15% -15%, rgba(255,116,197,.18), transparent 65%),
    radial-gradient(1200px 1200px at 115% 5%, rgba(255,201,232,.15), transparent 65%),
    radial-gradient(800px 800px at 50% 100%, rgba(255,116,197,.1), transparent 70%),
    linear-gradient(180deg,var(--bg) 0%, #0e1226 30%, #121433 70%, #0c0f26 100%);
  position:relative;
  overflow:hidden;
}
.auth-wrap::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(90deg,
      transparent,
      transparent 98px,
      rgba(255,116,197,.02) 100px,
      rgba(255,116,197,.02) 102px
    ),
    repeating-linear-gradient(0deg,
      transparent,
      transparent 98px,
      rgba(255,116,197,.02) 100px,
      rgba(255,116,197,.02) 102px
    );
  pointer-events:none;
}
.auth-card{
  width:min(500px,90vw);
  background:rgba(20, 22, 50, 0.8);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(255,116,197,.3);
  border-radius:32px;
  padding:40px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 1px 0 rgba(255,116,197,.1) inset,
    0 -1px 0 rgba(0,0,0,.2) inset;
  position:relative;
  transform:translateY(-20px);
  z-index:10;
}
.auth-card::before{
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  bottom:-2px;
  background:linear-gradient(45deg,
    rgba(255,116,197,.3) 0%,
    rgba(255,201,232,.2) 25%,
    rgba(255,116,197,.1) 50%,
    rgba(255,201,232,.2) 75%,
    rgba(255,116,197,.3) 100%
  );
  border-radius:34px;
  z-index:-1;
  animation:authGlow 4s ease-in-out infinite;
}
.auth-card h1{
  text-align:center;
  font-size:3rem;
  font-weight:800;
  margin:0 0 8px;
  background:linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-.03em;
}
.auth-card .muted{
  text-align:center;
  margin-bottom:32px;
  font-size:16px;
  color:var(--accent-3);
  opacity:0.8;
}
.auth-card h3{
  color:var(--accent-2);
  font-size:24px;
  font-weight:700;
  margin:0 0 24px;
  text-align:center;
  letter-spacing:-.02em;
}
.auth-card .input{
  margin-bottom:16px;
  background:rgba(15, 20, 51, 0.6);
  border:1px solid rgba(255,116,197,.2);
  font-size:16px;
  padding:14px 18px;
  width:100%;
  min-width:350px;
}
.auth-card .input:focus{
  border-color:rgba(255,116,197,.6);
  box-shadow:
    0 0 0 3px rgba(255,116,197,.15),
    0 6px 20px rgba(255,116,197,.1);
}
.auth-card .btn-primary{
  width:100%;
  margin:8px 0 16px;
  padding:16px;
  font-size:16px;
  font-weight:700;
  background:linear-gradient(135deg, rgba(255,116,197,0.9) 0%, rgba(212,155,199,0.9) 100%);
  border:none;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.auth-card .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(255,116,197,.3);
}
.auth-card .tab{
  width:100%;
  text-align:center;
  margin-top:8px;
  background:rgba(15, 20, 51, 0.4);
  border:1px solid rgba(255,116,197,.2);
  padding:12px;
  font-size:14px;
}

/* Love Letter Styling */
.love-letter{
  background:rgba(255,116,197,0.05);
  border:1px solid rgba(255,116,197,.2);
  border-radius:20px;
  padding:16px 20px;
  margin:20px auto 32px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 8px 32px rgba(255,116,197,.1),
    0 1px 0 rgba(255,116,197,.1) inset;
  width:fit-content;
  max-width:90%;
}

.letter-text{
  color:var(--accent-3);
  font-size:15px;
  line-height:1.6;
  margin:0 0 16px;
  font-weight:400;
  text-align:center;
  font-style:italic;
}

.letter-signature{
  color:var(--accent-2);
  font-size:16px;
  font-weight:600;
  text-align:center;
  margin:0;
  padding:0;
}

.signature-name{
  color:var(--accent);
  font-weight:700;
  font-size:18px;
  display:block;
  margin-top:8px;
  text-shadow:0 0 10px rgba(255,116,197,.3);
}

@keyframes authCardFloat {
  0% { transform:translateY(-20px) rotate(0deg); }
  100% { transform:translateY(-10px) rotate(0.5deg); }
}

@keyframes authGlow {
  0%, 100% { opacity:0.3; transform:scale(1); }
  50% { opacity:0.6; transform:scale(1.02); }
}

/* Capybara Animation */
.capybara-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.capybara{
  position:absolute;
  width:60px;
  height:60px;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  animation:fallAndStack linear infinite;
  opacity:0;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  transition:opacity 0.3s ease-in;
}

/* Left side capybaras */
.capybara:nth-child(1){
  left:2%;
  animation:fallAndStack 6s linear infinite;
  animation-delay:0s;
  background-image:url('https://s28164.pcdn.co/files/capybara-1920x1080-2024-600x400.jpg');
}

.capybara:nth-child(2){
  left:8%;
  animation:fallAndStackReverse 9s linear infinite;
  animation-delay:1.5s;
  background-image:url('https://cms.londonzoo.org/sites/default/files/styles/360w/public/2025-05/Gizmo%20the%20Capybara%20as%20a%20baby.jpg.webp?itok=1xIUfDSX');
}

.capybara:nth-child(3){
  left:15%;
  animation:fallAndStackWobble 7s linear infinite;
  animation-delay:3s;
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStRIRnTvDDamYMhQCUBM-C8NMwWGsm8mf_ZQ&s');
}

.capybara:nth-child(4){
  left:22%;
  animation:fallAndStack 11s linear infinite;
  animation-delay:0.8s;
  background-image:url('https://i.natgeofe.com/n/b35e2b97-d2a7-4da6-82fd-0a01d9e9a822/capybara_square.jpg?wp=1&w=357&h=357');
}

.capybara:nth-child(5){
  left:30%;
  animation:fallAndStackReverse 8s linear infinite;
  animation-delay:2.2s;
  background-image:url('https://i.natgeofe.com/n/b35e2b97-d2a7-4da6-82fd-0a01d9e9a822/capybara_16x9.jpg?w=1200');
}

/* Right side capybaras */
.capybara:nth-child(6){
  right:2%;
  animation:fallAndStackWobble 10s linear infinite;
  animation-delay:1.2s;
  background-image:url('https://dynamic-media-cdn.tripadvisor.com/media/photo-o/2a/7d/ba/87/miss-ringo-chilling-out.jpg?w=900&h=500&s=1');
}

.capybara:nth-child(7){
  right:8%;
  animation:fallAndStack 7.5s linear infinite;
  animation-delay:2.8s;
  background-image:url('https://www.allthingswild.co.uk/wp-content/uploads/2022/01/capy-2-2.jpg');
}

.capybara:nth-child(8){
  right:15%;
  animation:fallAndStackReverse 9.5s linear infinite;
  animation-delay:0.3s;
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBM8LYsYc9-vznICRcJeGp6uSK1gtT4R7-fw&s');
}

.capybara:nth-child(9){
  right:22%;
  animation:fallAndStackWobble 6.8s linear infinite;
  animation-delay:4.1s;
  background-image:url('https://media.istockphoto.com/id/1418210562/photo/brazil-wildlife-capybara-hydrochoerus-hydrochaeris-biggest-mouse-near-the-water-with-evening.jpg?s=612x612&w=0&k=20&c=4n7n90f6wotXEqt_Wg9R-zpHSrzuu275_4vMdQXToiM=');
}

.capybara:nth-child(10){
  right:30%;
  animation:fallAndStack 8.7s linear infinite;
  animation-delay:1.9s;
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkoaTLK5oLl4lXlUdH_NcVEip8sk12Ap_otg&s');
}

/* Center capybaras */
.capybara:nth-child(11){
  left:45%;
  animation:fallAndStackReverse 12s linear infinite;
  animation-delay:3.5s;
  background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTb49r2eHabfHFRZE4mcB7UtFUyfeSb5nZyQ&s');
}

.capybara:nth-child(12){
  left:55%;
  animation:fallAndStackWobble 5.5s linear infinite;
  animation-delay:0.7s;
  background-image:url('https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/15579121/GettyImages-460739676.0.0.1447444357.jpg?quality=90&strip=all&crop=0%2C6.9971310168951%2C100%2C86.00573796621&w=2400');
}

@keyframes fallAndStack{
  0%{
    top:-80px;
    transform:rotate(0deg) scale(0.8);
    opacity:0;
  }
  10%{
    opacity:0.9;
    transform:rotate(10deg) scale(1);
  }
  50%{
    transform:rotate(20deg) scale(1);
  }
  90%{
    transform:rotate(30deg) scale(1);
  }
  100%{
    top:calc(100vh + 60px);
    transform:rotate(40deg) scale(0.8);
    opacity:0;
  }
}

@keyframes fallAndStackReverse{
  0%{
    top:-80px;
    transform:rotate(0deg) scale(0.8);
    opacity:0;
  }
  10%{
    opacity:0.9;
    transform:rotate(-10deg) scale(1);
  }
  50%{
    transform:rotate(-20deg) scale(1);
  }
  90%{
    transform:rotate(-30deg) scale(1);
  }
  100%{
    top:calc(100vh + 60px);
    transform:rotate(-40deg) scale(0.8);
    opacity:0;
  }
}

@keyframes fallAndStackWobble{
  0%{
    top:-80px;
    transform:rotate(0deg) scale(0.8);
    opacity:0;
  }
  10%{
    opacity:0.9;
    transform:rotate(5deg) scale(1) translateX(3px);
  }
  30%{
    transform:rotate(-5deg) scale(1) translateX(-3px);
  }
  50%{
    transform:rotate(8deg) scale(1) translateX(2px);
  }
  70%{
    transform:rotate(-8deg) scale(1) translateX(-2px);
  }
  90%{
    transform:rotate(3deg) scale(1) translateX(1px);
  }
  100%{
    top:calc(100vh + 60px);
    transform:rotate(0deg) scale(0.8);
    opacity:0;
  }
}

/* Loading Screen */
.loading-wrap{
  height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(1200px 1200px at -10% -10%, rgba(255,116,197,.15), transparent 60%),
    radial-gradient(1000px 1000px at 110% 0%, rgba(255,201,232,.12), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, #121433 50%, #0c0f26 100%);
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  transition:opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.loading-wrap.fade-out{
  opacity:0;
  visibility:hidden;
}
.loading-content{
  text-align:center;
  animation:fadeInUp 0.8s ease-out;
}
.loading-heart{
  font-size:4rem;
  margin-bottom:2rem;
}
.loading-message{
  color:var(--accent-2);
  font-size:2rem;
  font-weight:700;
  margin:0 0 1rem;
  line-height:1.2;
  letter-spacing:-.02em;
}
.loading-name{
  color:var(--accent);
  font-size:2.5rem;
  font-weight:800;
  display:block;
  margin-top:0.5rem;
  text-shadow:0 0 20px rgba(255,116,197,.3);
}
.loading-spinner{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:2rem;
}
.spinner-ring{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  animation:bounce 1.4s ease-in-out infinite both;
}
.spinner-ring:nth-child(1){animation-delay:-0.32s;}
.spinner-ring:nth-child(2){animation-delay:-0.16s;}
.spinner-ring:nth-child(3){animation-delay:0s;}

@keyframes heartbeat {
  0%, 100% { 
    transform:scale(1) rotate(0deg);
    filter:drop-shadow(0 0 10px rgba(255,116,197,0.3));
  }
  20% { 
    transform:scale(1.03) rotate(1deg);
    filter:drop-shadow(0 0 15px rgba(255,116,197,0.4));
  }
  40% { 
    transform:scale(1.08) rotate(-1deg);
    filter:drop-shadow(0 0 20px rgba(255,116,197,0.5));
  }
  60% { 
    transform:scale(1.05) rotate(0.5deg);
    filter:drop-shadow(0 0 18px rgba(255,116,197,0.45));
  }
  80% { 
    transform:scale(1.02) rotate(-0.5deg);
    filter:drop-shadow(0 0 12px rgba(255,116,197,0.35));
  }
}

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

@keyframes bounce {
  0%, 80%, 100% {
    transform:scale(0);
    opacity:0.5;
  }
  40% {
    transform:scale(1);
    opacity:1;
  }
}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#2b1534;border:1px solid #4b2448;color:var(--accent-3);
  padding:10px 14px;border-radius:12px;display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}

/* Buttons as tiny tabs (secondary) */
button.tab{
  padding:8px 12px;border-radius:10px;background:#12163a;border:1px solid var(--line)
}
button.tab:hover{filter:brightness(1.05)}

/* Responsive */
@media (min-width:900px){
  .span-4{grid-column:span 4}
  .span-6{grid-column:span 6}
  .span-8{grid-column:span 8}
  .span-12{grid-column:span 12}
}

/* Inline edit styles */
.edit-input{
  font-size:14px;
  padding:6px 8px;
  margin:0;
  border-radius:8px;
}

/* Weekly Cost Insight Styles */
.card h3 + .row {
  justify-content:flex-end;
  gap:16px;
  margin-top:16px;
}

.card h3 + .row .tab {
  padding:14px 20px;
  font-size:16px;
  font-weight:600;
  min-width:140px;
  text-align:center;
}

.card h3 + .row .pill {
  padding:12px 16px;
  font-size:16px;
  font-weight:600;
  min-width:200px;
  text-align:center;
  background:linear-gradient(180deg, #1a1f42 0%, #0f1433 100%);
  border:1px solid var(--accent);
}

/* Dashboard Enhancements */
.dashboard-hero {
  background: linear-gradient(135deg, 
    rgba(255, 116, 197, 0.15) 0%, 
    rgba(0, 122, 204, 0.1) 50%, 
    rgba(255, 201, 232, 0.08) 100%
  );
  border: 1px solid rgba(255, 116, 197, 0.2);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 
    0 8px 32px rgba(255, 116, 197, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.hero-content h1.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #ff74c5, #ffc9e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--accent-3);
  margin: 0;
  opacity: 0.8;
}

.hero-stats {
  text-align: right;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ff74c5, #007acc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.dashboard-grid {
  grid-template-areas:
    "insights insights insights chart"
    "weekly weekly weekly weekly"
    "transactions transactions transactions transactions";
}

.insights-card {
  grid-area: insights;
}

.chart-card {
  grid-area: chart;
}

.weekly-card {
  grid-area: weekly;
}

.transactions-card {
  grid-area: transactions;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.card-header-full {
  margin-bottom: 20px;
}

.card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(255, 116, 197, 0.2), rgba(0, 122, 204, 0.15));
  border: 1px solid rgba(255, 116, 197, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card-title-group h3 {
  margin: 0 0 4px 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-2);
}

.card-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.8;
}

.insights-content {
  background: rgba(15, 20, 51, 0.4);
  border: 1px solid rgba(36, 48, 85, 0.4);
  border-radius: 16px;
  padding: 20px;
  min-height: 120px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chart-container {
  background: rgba(15, 20, 51, 0.3);
  border: 1px solid rgba(36, 48, 85, 0.3);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.chart-controls {
  justify-content: center;
  align-items: center;
}

.weekly-controls {
  background: rgba(15, 20, 51, 0.3);
  border: 1px solid rgba(36, 48, 85, 0.3);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.weekly-stats {
  background: rgba(15, 20, 51, 0.3);
  border: 1px solid rgba(36, 48, 85, 0.3);
  border-radius: 16px;
  padding: 16px;
  min-height: 120px;
}

.card-actions {
  gap: 16px;
  align-items: center;
}

.search-input {
  min-width: 200px;
  background: rgba(15, 20, 51, 0.6);
  border: 1px solid rgba(255, 116, 197, 0.2);
}

.search-input:focus {
  border-color: rgba(255, 116, 197, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 116, 197, 0.1);
}

/* Calendar Legend */
.calendar-legend {
  display: flex;
  gap: 24px;
  padding: 16px;
  background: rgba(21, 26, 62, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(36, 48, 85, 0.4);
  margin-bottom: 8px;
}

.legend-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--accent-2);
  font-weight: 600;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(36, 48, 85, 0.4);
}

.legend-color.spending-low {
  background: linear-gradient(135deg, rgba(121, 226, 178, 0.3), rgba(121, 226, 178, 0.1));
  border-color: rgba(121, 226, 178, 0.5);
}

.legend-color.spending-medium {
  background: linear-gradient(135deg, rgba(255, 211, 125, 0.3), rgba(255, 211, 125, 0.1));
  border-color: rgba(255, 211, 125, 0.5);
}

.legend-color.spending-high {
  background: linear-gradient(135deg, rgba(255, 122, 134, 0.3), rgba(255, 122, 134, 0.1));
  border-color: rgba(255, 122, 134, 0.5);
}

.legend-color.spending-extreme {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.3), rgba(220, 53, 69, 0.1));
  border-color: rgba(220, 53, 69, 0.5);
}

.legend-border-left, .legend-border-right {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(21, 26, 62, 0.5);
  border: 1px solid rgba(36, 48, 85, 0.4);
}

.legend-border-left {
  border-left: 4px solid rgba(255, 116, 197, 0.6);
}

.legend-border-right {
  border-right: 4px solid rgba(121, 226, 178, 0.6);
}

@media (max-width: 768px) {
  .calendar-legend {
    flex-direction: column;
    gap: 16px;
  }
  
  .legend-items {
    gap: 8px;
  }
}

/* ===============================
   Enhanced Bank Page Styles
   =============================== */

/* Progress bars */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(21, 26, 62, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

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

.progress-fill.success { background: linear-gradient(90deg, var(--success), #a4eed4); }
.progress-fill.danger { background: linear-gradient(90deg, var(--danger), #ffb3bb); }

/* Quick actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 116, 197, 0.1);
  border: 1px solid rgba(255, 116, 197, 0.2);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.action-btn:hover {
  background: rgba(255, 116, 197, 0.15);
  border-color: rgba(255, 116, 197, 0.3);
  transform: translateY(-1px);
}

.action-icon {
  font-size: 18px;
}

/* Account allocation improvements */
.account-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-allocation-item {
  background: rgba(21, 26, 62, 0.3);
  border: 1px solid rgba(36, 48, 85, 0.4);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}

.account-allocation-item:hover {
  background: rgba(21, 26, 62, 0.5);
  border-color: rgba(255, 116, 197, 0.3);
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.account-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-name {
  font-weight: 600;
  color: var(--text);
}

.account-percentage {
  font-size: 12px;
  color: var(--muted);
}

.account-amount {
  font-weight: 700;
  color: var(--accent);
  font-size: 16px;
}

.allocation-bar {
  width: 100%;
  height: 6px;
  background: rgba(21, 26, 62, 0.5);
  border-radius: 3px;
  overflow: hidden;
}

.allocation-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Weekly trend visualization */
.weekly-trend-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.trend-day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(21, 26, 62, 0.3);
  border: 1px solid rgba(36, 48, 85, 0.4);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.trend-day-item:hover {
  background: rgba(21, 26, 62, 0.5);
  transform: translateY(-2px);
}

.day-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.day-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-bottom: 8px;
}

.income-bar {
  width: 8px;
  background: linear-gradient(0deg, var(--success), #a4eed4);
  border-radius: 2px;
  min-height: 2px;
}

.expense-bar {
  width: 8px;
  background: linear-gradient(0deg, var(--danger), #ffb3bb);
  border-radius: 2px;
  min-height: 2px;
}

.net-amount {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.net-amount.positive { color: var(--success); }
.net-amount.negative { color: var(--danger); }

.day-date {
  font-size: 11px;
  color: var(--muted);
}

/* Performance table improvements */
.performance-table {
  margin-top: 16px;
}

.performance-table .table th {
  background: rgba(21, 26, 62, 0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.performance-table .table td.success {
  background: rgba(121, 226, 178, 0.1);
  color: var(--success);
  font-weight: 600;
}

/* Empty states */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--muted);
}

/* Color coding for numbers */
.big-number.success { color: var(--success); }
.big-number.warning { color: var(--warning); }
.big-number.danger { color: var(--danger); }

.tag.success {
  background: rgba(121, 226, 178, 0.2);
  color: var(--success);
}

.tag.danger {
  background: rgba(255, 122, 134, 0.2);
  color: var(--danger);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .weekly-trend-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .trend-day-item {
    padding: 8px 4px;
  }
  
  .day-bars {
    height: 40px;
  }
  
  .account-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .quick-actions {
    gap: 8px;
  }
  
  .action-btn {
    padding: 10px 12px;
    font-size: 13px;
  }
}