:root {
  --live-teal: #008b8f;
  --live-deep: #003d46;
  --live-ink: #10243d;
  --live-muted: #667b8f;
}

* { box-sizing: border-box; }
body.live-activity-page { margin: 0; background: #f3f8f8; color: var(--live-ink); }

.live-activity-main {
  width: min(100%, 900px);
  display: grid;
  gap: 14px;
  margin: 0 auto;
  padding: 14px 12px 32px;
}

.live-activity-hero {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #004a54, #008b8f 72%, #05bfc4);
  box-shadow: 0 16px 38px rgba(0, 61, 70, .16);
}

.live-activity-hero p { margin: 0 0 5px; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.live-activity-hero h1 { margin: 0; font-size: clamp(29px, 7vw, 42px); line-height: 1; letter-spacing: -.04em; }
.live-activity-hero span { display: block; margin-top: 9px; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 650; }

.live-activity-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid #dbe8e8;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,61,70,.07);
  scrollbar-width: none;
}
.live-activity-tabs::-webkit-scrollbar { display: none; }
.live-activity-tabs button { min-height: 42px; flex: 1 0 max-content; padding: 0 15px; border: 0; border-radius: 12px; color: #536a7e; background: transparent; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.live-activity-tabs button.active { color: #fff; background: var(--live-teal); box-shadow: 0 7px 16px rgba(0,139,143,.23); }

.live-activity-feed { overflow: hidden; border: 1px solid #dbe8e8; border-radius: 22px; background: #fff; box-shadow: 0 14px 36px rgba(0,61,70,.08); }
.live-activity-feed > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #e7eeee; }
.live-activity-feed > header strong { font-size: 16px; }
.live-activity-feed > header span { color: var(--live-teal); font-size: 12px; font-weight: 850; }
.live-activity-list { padding: 5px 15px 16px; }
.live-activity-empty { padding: 42px 16px; color: #718498; text-align: center; font-size: 14px; }

.live-activity-page .command-home-live-date { margin: 15px 0 6px; color: #60778a; font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.live-activity-page .command-home-live-row { min-height: 65px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #edf2f2; }
.live-activity-page .command-home-live-row:last-child { border-bottom: 0; }
.live-activity-page .command-home-live-icon,
.live-activity-page .command-home-live-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 14px; color: var(--live-teal); background: #e7f7f5; }
.live-activity-page .command-home-live-icon svg { width: 23px; height: 23px; }
.live-activity-page .command-home-live-avatar { padding: 0; cursor: pointer; }
.live-activity-page .command-home-live-avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-activity-page .command-home-live-label,
.live-activity-page .command-home-live-row > strong { min-width: 0; margin: 0; color: var(--live-ink); font-size: 13px; font-weight: 800; line-height: 1.35; text-align: left; }
.live-activity-page .command-home-live-label-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.live-activity-page .command-home-live-row time { color: #789; font-size: 10px; font-weight: 750; white-space: nowrap; }

@keyframes live-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .live-activity-main { padding: 10px 10px 26px; }
  .live-activity-hero { min-height: 112px; padding: 18px; border-radius: 20px; }
  .live-activity-hero span { max-width: 230px; }
  .live-activity-tabs button { flex-grow: 0; }
  .live-activity-list { padding-inline: 12px; }
  .live-activity-page .command-home-live-row { grid-template-columns: 40px minmax(0, 1fr); }
  .live-activity-page .command-home-live-row time { grid-column: 2; margin-top: -7px; }
}