:root { --activity-border: #d8dee8; --activity-panel: #fff; --activity-muted: #667085; --activity-accent: #563d7c; --activity-online: #167a3f; }
.activity-shell { max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; }
.activity-heading, .activity-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.activity-heading { margin-bottom: 16px; }
.activity-heading h1, .activity-panel h2 { margin: 0; }
.activity-eyebrow { margin: 0 0 4px; color: var(--activity-muted); font-weight: 700; text-transform: uppercase; }
.activity-heading button, .activity-panel select { min-height: 40px; border: 1px solid var(--activity-border); border-radius: 6px; background: #fff; padding: 8px 12px; font: inherit; }
.activity-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.activity-metric, .activity-panel { border: 1px solid var(--activity-border); border-radius: 8px; background: var(--activity-panel); padding: 16px; }
.activity-metric { display: grid; gap: 8px; }
.activity-metric span, .activity-panel-heading span { color: var(--activity-muted); }
.activity-metric strong { color: var(--activity-accent); font-size: 32px; }
.activity-panel { margin-bottom: 16px; }
.activity-panel-heading { margin-bottom: 12px; }
.activity-panel-heading label { display: grid; gap: 4px; color: var(--activity-muted); font-size: 13px; }
.activity-table-wrap { overflow-x: auto; }
.activity-panel table { width: 100%; border-collapse: collapse; }
.activity-panel th, .activity-panel td { border-top: 1px solid var(--activity-border); padding: 10px 8px; text-align: left; vertical-align: top; }
.activity-panel th { color: var(--activity-muted); font-size: 13px; }
.activity-user { display: grid; gap: 2px; }
.activity-user small { color: var(--activity-muted); }
.activity-state { white-space: nowrap; }
.activity-state--online { color: var(--activity-online); font-weight: 700; }
#activity-status { min-height: 24px; color: var(--activity-muted); }
@media (max-width: 700px) { .activity-shell { padding: 16px 8px 32px; } .activity-heading, .activity-panel-heading { align-items: stretch; flex-direction: column; } .activity-metrics { grid-template-columns: 1fr; } .activity-panel { padding: 12px; } }