:root { --ps-navy: #162b4d; --ps-blue: #1769e0; }
body { min-height: 100vh; display: flex; flex-direction: column; background: #f6f8fb; color: #1f2937; }
.auth-page { min-height: 100vh; background: linear-gradient(135deg, var(--ps-navy), var(--ps-blue)); }
.brand-mark { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--ps-blue); color: #fff; font-size: 1.25rem; font-weight: 800; }
.metric-card { border-left: .25rem solid var(--bs-primary); }
.metric-card:nth-child(2) { border-left-color: var(--bs-warning); }
footer { margin-top: auto; }
.timeline { border-left: 2px solid #dbe3ee; margin-left: .35rem; padding-left: 1.25rem; }
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ps-blue); left: -1.6rem; top: .35rem; }
.message-preview { white-space: normal; min-height: 15rem; line-height: 1.6; }
.tracker { display: flex; justify-content: space-between; gap: .15rem; }
.tracker-step { flex: 1; position: relative; text-align: center; color: #8893a2; font-size: .8rem; }
.tracker-step::before { content: ''; height: .2rem; background: #d9e0e8; position: absolute; left: -50%; right: 50%; top: .75rem; z-index: 0; }
.tracker-step:first-child::before { display: none; }
.tracker-step span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin: 0 auto .45rem; position: relative; z-index: 1; border-radius: 50%; background: #d9e0e8; color: #4b5563; font-weight: 700; }
.tracker-step small { display: block; font-size: .72rem; }
.tracker-step.is-complete { color: var(--ps-blue); }
.tracker-step.is-complete span, .tracker-step.is-complete::before { background: var(--ps-blue); color: #fff; }