.pipeline-page { max-width: 1440px; }
.pipeline-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.pipeline-view-switch { display: flex; gap: .25rem; padding: .25rem; background: #edeeef; border-radius: .65rem; }
.pipeline-view-switch a { padding: .65rem 1rem; border-radius: .45rem; color: #737b81; font-size: .875rem; font-weight: 600; }
.pipeline-view-switch a[aria-current=page] { color: var(--accent); background: white; box-shadow: 0 1px 3px #21272b0c; }
.pipeline-toolbar, .pipeline-options { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.pipeline-toolbar { justify-content: space-between; margin-bottom: .75rem; }
.pipeline-text-link { color: var(--accent); font-size: .875rem; font-weight: 600; cursor: pointer; padding-block: .5rem; }
.pipeline-text-link:hover { text-decoration: underline; }
.pipeline-roadmaps { container: deal-roadmaps / inline-size; display: grid; gap: 1.25rem; }
.pipeline-deal { border: 1px solid #e5e7e9; background: #fff; padding: 1.5rem 1.5rem 1rem; border-radius: .85rem; scroll-margin-top: 5rem; min-width: 0; }
.pipeline-deal-header { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.pipeline-avatar { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .65rem; display: grid; place-items: center; background: #ebf3f8; color: var(--accent); font-weight: 650; }
.pipeline-deal-name { flex: 1; min-width: 0; }
.pipeline-deal-name h2 { font-size: .95rem; font-weight: 650; color: #25282b; overflow-wrap: anywhere; }
.pipeline-deal-title { display: block; color: #71797f; font-size: .8rem; margin-top: .15rem; overflow-wrap: anywhere; }
.pipeline-deal-name a:hover { text-decoration: underline; }
.pipeline-current-stage { color: var(--accent); background: #ebf3f8; padding: .4rem .65rem; border-radius: .5rem; font-size: .75rem; font-weight: 650; }
.pipeline-current-stage span { font-size: .6rem; margin-right: .2rem; }
.pipeline-needs-reply { background: #fff1d9; color: #8b5315; }
.pipeline-money { color: #354048; text-align: right; font-weight: 650; font-size: 1rem; font-variant-numeric: tabular-nums; }
.pipeline-money small { display: block; color: #71797f; font-size: .7rem; font-weight: 400; }
.pipeline-money-empty { color: #71797f; font-size: .8rem; font-weight: 400; }
.pipeline-route { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); padding: 0; margin: 1.5rem 0 .5rem; }
.pipeline-route li { position: relative; min-width: 0; }
.pipeline-route li::after { content: ""; position: absolute; height: 1px; background: #e5e7e9; top: 17px; left: 50%; width: 100%; }
.pipeline-route li:last-child::after { display: none; }
.pipeline-step { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; width: 100%; min-height: 76px; gap: .6rem; padding: 3px 3px 8px; border-radius: .5rem; color: #71797f; background: transparent; font-size: .75rem; line-height: 1.3; cursor: pointer; }
.pipeline-step:hover:not(:disabled) { background: #f5f9fc; color: var(--accent); }
.pipeline-dot { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #e5e7e9; border-radius: 50%; background: white; font-size: .7rem; flex: none; }
.pipeline-step[aria-current=step] { color: var(--accent); font-weight: 700; cursor: default; }
.pipeline-step[aria-current=step] .pipeline-dot { color: white; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px #ebf3f8; }
.pipeline-deal[data-detail=full] .pipeline-route { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .75rem; }
.pipeline-deal[data-detail=full] .pipeline-route li:nth-child(6n)::after { display: none; }
.pipeline-deal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #eff1f2; padding-top: .75rem; }
.pipeline-context { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .75rem; color: #71797f; }
.pipeline-stage-form { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pipeline-stage-form label { color: #71797f; font-size: .75rem; }
.pipeline-stage-form select { max-width: 220px; min-width: 0; border: 1px solid #e5e7e9; border-radius: .4rem; background-color: white; color: #25282b; font-size: .8rem; padding: .55rem 1.75rem .55rem .6rem; }
.pipeline-stage-form input[type=submit] { border: 1px solid #e5e7e9; border-radius: .4rem; padding: .55rem .75rem; font-size: .8rem; font-weight: 600; color: var(--accent); cursor: pointer; }
.pipeline-stage-form input[type=submit]:disabled { opacity: .45; cursor: default; }
.pipeline-page :is(a, button, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pipeline-feedback:empty, .pipeline-save-error:empty { display: none; }
.pipeline-feedback { margin-bottom: 1rem; }
.pipeline-saved { color: var(--accent); font-size: .875rem; padding: .75rem 1rem; background: #ebf3f8; border-radius: .6rem; }
.pipeline-save-error { color: #963b2b; font-size: .875rem; margin-top: .75rem; }
.pipeline-empty { text-align: center; background: white; border: 1px dashed #c7d6e1; border-radius: .85rem; padding: 3rem 1rem; }
.pipeline-empty-icon { display: grid; place-items: center; margin: 0 auto 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #ebf3f8; color: var(--accent); font-size: 1.2rem; }
@container deal-roadmaps (max-width: 620px) {
  .pipeline-deal { padding: 1rem .75rem .75rem; }
  .pipeline-route, .pipeline-deal[data-detail=full] .pipeline-route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; }
  .pipeline-route li:nth-child(3n)::after { display: none; }
  .pipeline-current-stage { order: 4; }
  .pipeline-money { font-size: .875rem; margin-left: auto; order: 5; }
  .pipeline-deal-name { flex-basis: calc(100% - 3.5rem); }
  .pipeline-stage-form { width: 100%; }
  .pipeline-stage-form select { flex: 1; width: 0; max-width: none; font-size: 1rem; }
}
@media (max-width: 520px) {
  .pipeline-view-switch { width: 100%; }
  .pipeline-view-switch a { flex: 1; text-align: center; }
}