body { font-family: Georgia, "Times New Roman", serif; margin: 0; background: #f3efe7; color: #26312f; }
.app-shell { max-width: 1400px; margin: 0 auto; padding: 42px 32px 56px; }
.app-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; gap: 20px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: end; }
.eyebrow { margin: 0 0 8px; color: #b45f13; font: 700 11px/1.2 Arial, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; }
h1, h2 { margin: 0; font-weight: 400; } h1 { font-size: clamp(30px, 4vw, 48px); } h2 { font-size: 22px; }
.workspace { display: grid; grid-template-columns: 270px 1fr; gap: 22px; align-items: start; }
.calendar-sidebar, .timeline-section { background: #fffdf8; border: 1px solid #d7d0c3; }
.calendar-sidebar { padding: 20px 18px; } .sidebar-heading { display: flex; justify-content: space-between; align-items: center; }
.calendar-count { color: #8b918b; font: 12px Arial, sans-serif; } .sidebar-help { color: #68716b; font: 13px/1.45 Arial, sans-serif; margin: 10px 0 22px; }
.calendar-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-top: 1px solid #eee9df; }
.visibility-toggle { display: flex; align-items: center; cursor: pointer; }
.visibility-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.calendar-name { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 8px; border: 0; background: transparent; color: #26312f; cursor: pointer; font: 14px Arial, sans-serif; text-align: left; }
.calendar-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-dot { width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid var(--bank-color); border-radius: 50%; box-sizing: border-box; background: transparent; }
.visibility-toggle input:checked + .color-dot { background: var(--bank-color); }
.delete-button, .icon-button { border: 0; background: transparent; color: #8d918c; cursor: pointer; font-size: 20px; line-height: 1; padding: 5px; }
.delete-button:hover, .icon-button:hover { color: #a53d43; } .primary-button, .secondary-button { border: 0; cursor: pointer; font: 700 13px Arial, sans-serif; padding: 11px 16px; }
.primary-button { background: #26312f; color: #fffdf8; } .secondary-button { background: #e9e3d7; color: #26312f; }
.timeline-section { padding: 14px; }

#visualization {
  border: 1px solid #d0d3d8;
  border-radius: 6px;
  background: #ffffff;
}

.vis-labelset {
  width: 0 !important;
}
.vis-label { display: none; }
.vis-itemset .vis-background {
  min-height: 68px;
}

/* Event bar styling */
.vis-item {
  background-color: var(--bank-color);
  border-color: var(--bank-color);
  color: #ffffff;
  border-radius: 2px;
  font: 12px Arial, sans-serif;
}
.vis-item.event-membership, .vis-item.event-account, .vis-item.event-rate, .vis-item.event-allowance { opacity: .8; font-weight: 400; }
.event-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 15px 4px 2px; }
.filter-button { border: 1px solid #c8c1b5; background: #fffdf8; color: #68716b; cursor: pointer; font: 700 11px Arial, sans-serif; padding: 8px 11px; }
.filter-button.active { background: #26312f; border-color: #26312f; color: #fffdf8; }
.legend-swatch.allowance { opacity: .58; border: 1px dashed #26312f; box-sizing: border-box; background: transparent; }
.vis-current-time { background-color: #d64545; width: 2px; }
dialog { border: 0; padding: 0; width: min(520px, calc(100% - 32px)); color: #26312f; box-shadow: 0 20px 70px #26312f33; }
dialog::backdrop { background: #26312f66; } dialog form { padding: 26px; background: #fffdf8; }
.dialog-header { display: flex; justify-content: space-between; margin-bottom: 22px; } label, legend { font: 700 12px Arial, sans-serif; }
label input { display: block; box-sizing: border-box; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid #d7d0c3; background: #fff; font: 14px Arial, sans-serif; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } fieldset { border: 0; border-top: 1px solid #e4ddd1; padding: 18px 0 0; margin: 22px 0 0; }
legend { padding: 0 8px 0 0; } .account-field { border-top: 1px solid #eee9df; padding: 16px 0; } .account-heading { display: flex; align-items: end; gap: 8px; } .account-heading label { flex: 1; }
.field-caption { margin: 14px 0 7px; color: #68716b; font: 700 11px Arial, sans-serif; text-transform: uppercase; } .rate-row { display: grid; grid-template-columns: 1fr 1fr 75px 28px; gap: 6px; align-items: end; margin-bottom: 9px; }
.rate-row input { min-width: 0; } .dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 28px; }
@media (max-width: 760px) { .app-shell { padding: 28px 16px; } .workspace { grid-template-columns: 1fr; } .calendar-sidebar { order: 2; } .timeline-section { order: 1; } .app-header { align-items: start; gap: 16px; } .rate-row { grid-template-columns: 1fr 1fr 60px 24px; } }

/* Today marker */
.vis-current-time {
  background-color: #d64545;
  width: 2px;
}