.dashboard header nav { display: flex; gap: .15rem; }
.dashboard header nav button { text-transform: capitalize; }
.nav-active { background: #dff0e5; color: #17633b; border-radius: 6px; padding: .5rem .7rem; }
.page { padding: clamp(3rem, 7vw, 6rem) 0; }
.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 2rem; }
.page-heading h1 { font: 500 clamp(3rem, 6vw, 5rem)/1 Georgia, serif; letter-spacing: -.055em; margin: .6rem 0; }
.page-heading p { color: #68746d; }
.count { font: 500 3rem Georgia, serif; color: #268453; }
.journey { display: grid; margin-top: 1.5rem; }
.journey button { display: flex; gap: 1rem; text-align: left; background: transparent; border-top: 1px solid #dedfd9; padding: 1.1rem .2rem; color: #268453; font-weight: 800; }
.journey button span { display: grid; gap: .25rem; color: #102019; }
.journey small { font-weight: 400; }
.spread { justify-content: space-between; }
.spread button { background: #dff0e5; color: #17633b; border-radius: 6px; padding: .55rem .8rem; }
.agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.agent-grid select { width: 100%; padding: .85rem; border: 1px solid #ccd2cd; border-radius: 8px; background: #fff; margin: 1rem 0; }
.primary { display: block; width: 100%; padding: .85rem; border-radius: 8px; background: #102019; color: #fff; font-weight: 700; }
.agent-state { font: 700 .68rem ui-monospace, monospace; color: #268453; text-transform: uppercase; }
.result { margin-top: 1rem; padding: 1rem; border-radius: 8px; background: #eef3ee; line-height: 1.5; }
@media (max-width: 900px) { .dashboard header nav { display: none; } }
@media (max-width: 800px) { .agent-grid { grid-template-columns: 1fr; } }