.plan-main { max-width: 1640px; }
.plan-switcher { flex-wrap: wrap; justify-content: flex-end; }
.plan-switcher select { min-width: 230px; }
.danger-text { min-height: 40px; color: #a9412d; }
.danger-text:hover { color: #7f2e1f; background: #f7e3dc; border-radius: 8px; }
.plan-guide { margin-bottom: 18px; }
.plan-view-tabs {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 18px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
.plan-view-tab {
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.plan-view-tab:hover { color: var(--accent-deep); background: rgba(190,104,66,.08); }
.plan-view-tab.is-active { background: var(--accent); color: #fff; }
.plan-view-panel[hidden] { display: none !important; }
.plan-summary { margin-top: 0; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 18px; }
.plan-save-status { padding-top: 4px; color: var(--accent-deep); font-size: 11px; }
.plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.plan-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.plan-form .wide-field { grid-column: 1 / -1; }
.plan-form input,
.plan-form select,
.plan-section-name,
.plan-item-row input,
.plan-item-row select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}
.plan-form input:focus,
.plan-form select:focus,
.plan-section-name:focus,
.plan-item-row input:focus,
.plan-item-row select:focus {
  outline: 2px solid rgba(190,104,66,.2);
  border-color: var(--accent);
}
.plan-form textarea {
  min-height: 84px;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.suffix-field { position: relative; display: block; }
.suffix-field input { padding-right: 32px; }
.suffix-field > span { position: absolute; top: 50%; right: 11px; color: var(--muted); transform: translateY(-50%); }
.category-overview { display: grid; gap: 14px; }
.category-overview-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: end; }
.category-overview-row strong { font-size: 13px; }
.category-overview-row output { color: var(--accent-deep); font: 500 12px "DM Mono", monospace; }
.category-overview-track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: #e8e0d4; }
.category-overview-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #d99a78); }
.category-overview-empty { margin: 0; color: var(--muted); font-size: 12px; }
.plan-items-panel { min-width: 0; margin-top: 18px; }
.plan-item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.plan-sections,
.plan-section,
.plan-item-table { min-width: 0; }
.plan-sections { display: grid; gap: 16px; }
.plan-section { border: 1px solid var(--line); background: var(--surface-2); }
.plan-section-head { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.plan-section-name { min-height: 36px; background: transparent; font-weight: 700; }
.plan-section-total { color: var(--accent-deep); font: 500 13px "DM Mono", monospace; white-space: nowrap; }
.plan-section-remove,
.plan-item-remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
}
.plan-section-remove:hover,
.plan-item-remove:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.plan-item-table { overflow-x: auto; }
.plan-item-header,
.plan-item-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.35fr) minmax(105px, .65fr) minmax(80px, .45fr) minmax(72px, .4fr) 92px minmax(115px, .65fr) minmax(150px, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-width: 980px;
  padding: 8px 14px;
}
.plan-item-header { padding-top: 10px; padding-bottom: 6px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.plan-item-row { border-top: 1px solid rgba(223,211,195,.72); background: var(--surface); }
.plan-item-row input,
.plan-item-row select { min-height: 34px; padding: 5px 8px; border-radius: 7px; font-size: 12px; }
.plan-item-row input[type="number"] { font-family: "DM Mono", monospace; text-align: right; }
.plan-item-total { color: var(--ink); font: 500 12px "DM Mono", monospace; text-align: right; white-space: nowrap; }
.per-episode-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.per-episode-field input { width: 16px; min-height: 16px; accent-color: var(--accent); }
.plan-section-empty { margin: 0; padding: 18px; color: var(--muted); background: var(--surface); font-size: 12px; text-align: center; }
.plan-empty { padding: 26px; color: var(--muted); border: 1px dashed var(--line); text-align: center; }
.metric-card.negative strong { color: var(--over-budget); }
.accent-card.negative { background: linear-gradient(135deg, var(--over-budget-deep), var(--accent)); }

/* Budget schedule */
.gantt-panel {
  --gantt-1: #be6842;
  --gantt-2: #6f7d55;
  --gantt-3: #5e7392;
  --gantt-4: #94705d;
  --gantt-5: #8a6f98;
  --gantt-6: #b58a3b;
  min-width: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.gantt-panel-head { align-items: flex-end; }
.gantt-lead { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.gantt-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 8px; }
.gantt-controls .plan-save-status { align-self: center; min-width: 92px; padding: 0 4px; text-align: right; }
.gantt-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.gantt-controls input,
.gantt-controls select {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 500 11px "DM Mono", monospace;
}
.gantt-controls input:focus,
.gantt-controls select:focus,
.gantt-date-fields input:focus { outline: 2px solid rgba(190,104,66,.2); border-color: var(--accent); }
.gantt-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 20px 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.gantt-summary > div { min-width: 180px; padding: 10px 14px; border-right: 1px solid var(--line); }
.gantt-summary small,
.gantt-summary strong { display: block; }
.gantt-summary small { margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.gantt-summary strong { font: 500 12px "DM Mono", monospace; }
.budget-gantt { min-width: 0; border-top: 1px solid var(--line); }
.gantt-scroll { max-width: 100%; overflow-x: hidden; }
.gantt-table { width: 100%; min-width: 0; background: var(--surface); }
.gantt-header,
.gantt-row { display: grid; grid-template-columns: clamp(280px, 30%, 390px) minmax(0, 1fr); }
.gantt-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 40px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.gantt-header-side,
.gantt-item-side {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.gantt-header-side {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: var(--surface-2);
}
.gantt-header-side strong { font-size: 11px; }
.gantt-header-side small { color: var(--muted); font-size: 9px; }
.gantt-month-grid { display: grid; grid-template-columns: repeat(var(--gantt-month-count), minmax(0, 1fr)); min-width: 0; }
.gantt-month-head {
  display: grid;
  place-content: center;
  border-left: 1px solid rgba(223,211,195,.8);
  color: var(--muted);
  text-align: center;
}
.gantt-month-head strong,
.gantt-month-head small { display: block; }
.gantt-month-head strong { color: var(--ink); font-size: 11px; }
.gantt-month-head strong span { font-size: .82em; }
.gantt-month-head small { margin-bottom: 0; font: 400 7px "DM Mono", monospace; }
.gantt-table.is-dense .gantt-month-head strong { font-size: 9px; }
.gantt-table.is-dense .gantt-month-head strong span { display: none; }
.gantt-table.is-dense .gantt-month-head small { font-size: 7px; }
.gantt-table.is-very-dense .gantt-month-head strong { font-size: 8px; }
.gantt-month-head.is-current { background: var(--accent-soft); }
.gantt-section > header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  background: #f1ece4;
}
.gantt-section > header > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gantt-accent); }
.gantt-section > header strong { font-size: 11px; }
.gantt-section > header small { color: var(--muted); font-size: 9px; }
.gantt-row { min-height: 60px; border-bottom: 1px solid rgba(223,211,195,.72); }
.gantt-row:last-child { border-bottom-color: var(--line); }
.gantt-item-side { display: grid; grid-template-columns: 1fr; align-content: center; gap: 3px; padding: 5px 8px 5px 10px; }
.gantt-role-group { border-bottom: 1px solid var(--line); }
.gantt-role-group > .gantt-row:last-child { border-bottom: 0; }
.gantt-role-row { background: var(--surface); }
.gantt-item-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.gantt-item-copy > div { min-width: 0; }
.gantt-item-copy strong,
.gantt-item-copy small { display: block; }
.gantt-item-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gantt-item-copy small { margin-top: 2px; color: var(--muted); font: 400 9px "DM Mono", monospace; }
.gantt-add-assignee {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}
.gantt-add-assignee:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.gantt-assignee-row { min-height: 52px; }
.gantt-assignee-row .gantt-item-side {
  position: sticky;
  padding-left: 28px;
  background: color-mix(in srgb, var(--surface-2) 76%, white);
}
.gantt-assignee-row .gantt-month-grid { background: color-mix(in srgb, var(--surface-2) 48%, white); }
.gantt-assignee-copy { position: relative; display: flex; align-items: center; min-width: 0; }
.gantt-child-guide {
  position: absolute;
  left: -17px;
  width: 10px;
  height: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--gantt-accent) 48%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--gantt-accent) 48%, var(--line));
}
.gantt-assignee-copy select {
  width: min(100%, 210px);
  min-height: 28px;
  padding: 3px 24px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 10px;
}
.gantt-assignee-copy select:focus { outline: 2px solid rgba(190,104,66,.2); border-color: var(--accent); }
.gantt-assignee-row .gantt-cell::before { inset-block: 8px; opacity: .68; }
.gantt-date-fields { display: flex; align-items: center; gap: 4px; }
.gantt-date-fields input {
  width: 96px;
  min-height: 27px;
  padding: 1px 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 9px "DM Mono", monospace;
}
.gantt-date-fields > span { color: var(--muted); font-size: 9px; }
.gantt-date-fields button {
  width: 27px;
  height: 27px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
}
.gantt-date-fields button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.gantt-cell {
  position: relative;
  min-width: 0;
  border: 0;
  border-left: 1px solid rgba(223,211,195,.64);
  background: transparent;
  cursor: default;
  touch-action: none;
}
.gantt-row:not(.has-schedule) .gantt-cell { cursor: crosshair; }
.gantt-cell::before {
  position: absolute;
  inset: 10px 0;
  background: transparent;
  content: "";
  transition: background .12s ease, opacity .12s ease;
}
.gantt-cell:hover::before { background: color-mix(in srgb, var(--gantt-accent) 18%, transparent); }
.gantt-cell.is-current { background: rgba(190,104,66,.045); }
.gantt-cell.is-in-range::before,
.gantt-cell.is-drag-preview::before { background: var(--gantt-accent); opacity: .82; }
.gantt-cell.is-range-start::before,
.gantt-cell.is-preview-start::before { border-radius: 7px 0 0 7px; }
.gantt-cell.is-range-end::before,
.gantt-cell.is-preview-end::before { border-radius: 0 7px 7px 0; }
.gantt-cell.is-range-start.is-range-end::before,
.gantt-cell.is-preview-start.is-preview-end::before { border-radius: 7px; }
.gantt-range-handle {
  position: absolute;
  top: 6px;
  bottom: 6px;
  z-index: 2;
  width: 12px;
  cursor: ew-resize;
}
.gantt-range-handle::after {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 24px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--gantt-accent) 55%, #3b2d25);
  box-shadow: 0 0 0 2px rgba(255,255,255,.78);
  content: "";
  transform: translateY(-50%);
  transition: width .12s ease, background .12s ease;
}
.gantt-range-handle:hover::after { width: 4px; background: var(--accent-deep); }
.gantt-range-handle.is-start { left: -6px; }
.gantt-range-handle.is-start::after { left: 5px; }
.gantt-range-handle.is-end { right: -6px; }
.gantt-range-handle.is-end::after { right: 5px; }
.gantt-row.is-dragging .gantt-cell.is-preview-outside::before { background: transparent; opacity: 1; }
.gantt-row.is-dragging .gantt-item-side { background: var(--accent-soft); }

@media (max-width: 1120px) {
  .plan-layout { grid-template-columns: 1fr; }
  .gantt-panel-head { align-items: stretch; flex-direction: column; }
  .gantt-controls { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .plan-switcher { width: 100%; justify-content: stretch; }
  .plan-switcher .period-field,
  .plan-switcher button { width: 100%; }
  .plan-form { grid-template-columns: 1fr; }
  .plan-form .wide-field { grid-column: auto; }
  .plan-section-head { grid-template-columns: 1fr auto; }
  .plan-section-total { grid-column: 1; }
  .plan-section-head .outline-btn { grid-column: 1 / -1; }
  .plan-item-actions { width: 100%; justify-content: stretch; }
  .plan-item-actions .outline-btn { flex: 1 1 180px; }
  .plan-view-tabs { display: flex; }
  .plan-view-tab { flex: 1; }
  .gantt-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .gantt-controls .plan-save-status,
  .gantt-controls .outline-btn { grid-column: 1 / -1; }
  .gantt-controls input,
  .gantt-controls select { width: 100%; }
  .gantt-summary { margin-inline: 12px; }
  .gantt-summary > div { flex: 1 1 130px; min-width: 0; }
  .gantt-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
  .gantt-table { min-width: calc(270px + var(--gantt-month-count) * 24px); }
  .gantt-header,
  .gantt-row { grid-template-columns: 270px minmax(0, 1fr); }
  .gantt-month-grid { grid-template-columns: repeat(var(--gantt-month-count), minmax(24px, 1fr)); }
  .gantt-item-side { grid-template-columns: 1fr; gap: 5px; }
  .gantt-date-fields input { width: 98px; }
}

