:root {
  --marsh-primary: #5A1F89;    /* Primary Corporate Dark Navy */
  --marsh-accent: #FFFFFF;     /* Active Action Amber */
  --marsh-text-dark: #2D3748;  /* Accessible Body Text */
  --marsh-bg-canvas: #F7FAFC;  /* Element Split Neutral Fill */
  --marsh-border-line: #E2E8F0;/* Interface Wire Border */
}

.marsh-budgeter-widget {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 1rem auto;
  background: #FFFFFF;
  border: 1px solid var(--marsh-border-line);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  color: var(--marsh-text-dark);
  padding; 5px;
}

.marsh-widget-header {
  background-color: var(--marsh-primary);
  color: #FFFFFF;
  padding: 1rem 2rem;
}
.marsh-widget-header h3 { margin: 0 0 0.5rem 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.5px; color: #FFFFFF;}
.marsh-widget-header p { margin: 0; font-size: 0.95rem; opacity: 0.85; line-height: 1.5; }


.marsh-widget-body { padding: 2rem; }

/* Structural Controls Container Groupings */
.marsh-controls-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.marsh-controls-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .marsh-controls-grid { grid-template-columns: 1fr; }
}

.marsh-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--marsh-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Button Multi-Select Architecture Layout */
.marsh-tier-buttons {
  display: flex;
  background: var(--marsh-bg-canvas);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--marsh-border-line);
  flex-wrap: wrap;
}

.marsh-tier-btn {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: none;
  padding: 10px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4A5568;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.marsh-tier-btn:hover { color: var(--marsh-primary); background: rgba(0, 45, 98, 0.04); }
.marsh-tier-btn.active {
  background: #FFFFFF;
  color: var(--marsh-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Visual Display Output Grid Execution */
.marsh-display-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  background: var(--marsh-bg-canvas);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--marsh-border-line);
  
}
@media (max-width: 680px) {
  .marsh-display-grid { grid-template-columns: 1fr; padding: 1.25rem; }
}

.marsh-total-box {
  background: #FFFFFF;
  border: 1px solid var(--marsh-border-line);
  border-radius: 8px;
  padding: 7px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.marsh-total-label { font-size: 0.62rem; color: #718096; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.marsh-total-amount { font-size: 2rem; font-weight: 800; color: var(--marsh-primary); margin: 0.6rem 0; letter-spacing: -1px; }
.marsh-deposit-badge { font-size: 0.82rem; background: #EBF8FF; color: #2B6CB0; padding: 5px 12px; border-radius: 20px; font-weight: 600; margin-bottom: 1.5rem; }

.marsh-cta-btn {
  display: block;
  width: 70%;
  background: #5A1F89;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.1s, background-color 0.2s;
  margin-top: -6px;
}


/* Visualization Distribution Progress Rails */
.marsh-breakdown h4 { margin: 0 0 1.25rem 0; color: var(--marsh-primary); font-size: 1.15rem; font-weight: 700; }
.marsh-bar-row { margin-bottom: 1.25rem; }
.marsh-bar-row:last-child { margin-bottom: 0; }
.marsh-bar-info { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 6px; font-weight: 500; }
.marsh-bar-info small { color: #A0AEC0; font-weight: normal; }
.marsh-bar-bg { background: #E2E8F0; height: 10px; border-radius: 5px; overflow: hidden; }
.marsh-bar-fill { height: 100%; width: 0%; transition: width 0.5s cubic-bezier(0.1, 0.8, 0.2, 1); }

.fill-finance { background-color: var(--marsh-primary); }
.fill-insurance { background-color: #3182CE; }
.fill-fixed { background-color: #38A169; }

.marsh-widget-footer {
  background: #FAFBFD;
  border-top: 1px solid var(--marsh-border-line);
  padding: 1rem 1rem;
  font-size: 0.78rem;
  color: #718096;
  line-height: 1.6;
}
.marsh-widget-footer p { margin: 0 0 0.75rem 0; }
.marsh-widget-footer p:last-child { margin: 0; }