.dashboard-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); padding: 18px 20px; border: 1px solid #c7e4df; border-radius: var(--radius-lg); background: linear-gradient(100deg, #eefaf8 0%, #fbfdfb 65%); }
.demo-banner__copy { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.demo-banner__icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: var(--radius-sm); background: var(--color-teal-700); color: var(--color-white); }
.demo-banner__icon svg { width: 20px; height: 20px; }
.demo-banner__title { color: var(--color-navy-950); font-size: 13px; font-weight: 750; }
.demo-banner__text { margin-top: 3px; color: var(--color-gray-600); font-size: 11px; }
.demo-banner__status { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.demo-banner__progress { width: min(260px, 30vw); }
.demo-banner__step { color: var(--color-teal-700); font-size: 10px; font-weight: 750; white-space: nowrap; }
.flow-card { margin-bottom: var(--space-5); }
.workflow { display: flex; align-items: flex-start; padding: 6px 0 2px; overflow-x: auto; }
.workflow__item { display: flex; min-width: 92px; flex: 1; align-items: center; flex-direction: column; }
.workflow__node { display: grid; position: relative; z-index: 1; width: 32px; height: 32px; place-items: center; border: 2px solid var(--color-border-strong); border-radius: 50%; background: var(--color-white); color: var(--color-gray-400); }
.workflow__node svg { width: 15px; height: 15px; }
.workflow__item:not(:last-child) .workflow__node::after { position: absolute; top: 14px; left: 30px; width: calc(100% + 62px); min-width: 62px; height: 2px; background: var(--color-border); content: ""; }
.workflow__item.is-complete .workflow__node { border-color: var(--color-teal-700); background: var(--color-teal-700); color: var(--color-white); }
.workflow__item.is-complete:not(:last-child) .workflow__node::after { background: var(--color-teal-700); }
.workflow__item.is-current .workflow__node { border-color: var(--color-yellow-500); background: var(--color-yellow-100); color: var(--color-orange-600); box-shadow: 0 0 0 5px rgba(244,185,66,.16); }
.workflow__label { margin-top: 9px; color: var(--color-gray-600); font-size: 10px; font-weight: 650; text-align: center; white-space: nowrap; }
.workflow__item.is-current .workflow__label { color: var(--color-orange-600); font-weight: 750; }
.queue-table .data-table { min-width: 650px; }
.queue-priority { display: inline-flex; align-items: center; gap: 5px; color: var(--color-gray-600); font-size: 10px; }
.queue-priority::before { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gray-300); content: ""; }
.queue-priority--high::before { background: var(--color-red-700); }
.queue-priority--medium::before { background: var(--color-yellow-500); }
.status-pipeline { display: flex; flex-direction: column; gap: 14px; }
.status-pipeline__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.status-pipeline__label { color: var(--color-gray-600); font-size: 10px; font-weight: 650; }
.status-pipeline__count { color: var(--color-navy-950); font-size: 12px; font-weight: 750; text-align: right; }
.capacity-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.capacity-card__value { color: var(--color-navy-950); font-size: 30px; font-weight: 750; letter-spacing: -.04em; }
.capacity-card__unit { color: var(--color-gray-500); font-size: 11px; }
.capacity-card__meter { margin-top: 18px; }
.capacity-card__meter-line { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--color-gray-500); font-size: 10px; }
.mini-list { display: flex; flex-direction: column; gap: 11px; }
.mini-list__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-list__main { display: flex; min-width: 0; align-items: center; gap: 9px; }
.mini-list__icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 6px; background: var(--color-gray-100); color: var(--color-gray-600); }
.mini-list__icon svg { width: 14px; height: 14px; }
.mini-list__label { overflow: hidden; color: var(--color-gray-700); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mini-list__meta { color: var(--color-gray-500); font-size: 10px; }
.chart-box { min-height: 210px; }
.chart-box__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; color: var(--color-gray-500); font-size: 10px; }
.chart-legend { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend::before { width: 8px; height: 8px; border-radius: 2px; background: var(--color-teal-600); content: ""; }
.chart-legend--yellow::before { background: var(--color-yellow-500); }
.chart-legend--navy::before { background: var(--color-navy-800); }
.sparkline { width: 100%; height: 176px; }
.sparkline text { fill: var(--color-gray-400); font-family: var(--font-sans); font-size: 9px; }
.sparkline .grid-line { stroke: var(--color-gray-200); stroke-width: 1; }
.sparkline .area { fill: url(#throughputGradient); }
.sparkline .line { fill: none; stroke: var(--color-teal-700); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.sparkline .dot { fill: var(--color-white); stroke: var(--color-teal-700); stroke-width: 2; }

@media (max-width: 1280px) { .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-banner { align-items: flex-start; flex-direction: column; } .demo-banner__status { flex-wrap: wrap; } .demo-banner__progress { width: min(280px, 75vw); } .workflow__item { min-width: 76px; } .workflow__item:not(:last-child) .workflow__node::after { width: calc(100% + 46px); min-width: 46px; } }
.flow-card__header { padding: 0 0 16px; }
.demo-transaction-card > .card__header { padding: 0 0 15px; }
.capacity-split__details { flex: 1; margin-left: 24px; }
@media (max-width: 560px) { .capacity-split { align-items: flex-start; flex-direction: column; } .capacity-split__details { width: 100%; margin-top: 14px; margin-left: 0; } }