/* Final Events activity layout. Loaded after legacy preview overrides. */
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-calendar,
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-filter,
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-calendar:active,
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-filter:active {
  width: 36px !important;
  height: 36px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-calendar svg,
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  > .app-screen-header
  .app-screen-header-action.action-filter svg {
  width: 28px !important;
  height: 28px !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-filter-row {
  gap: 8px !important;
  margin: 3px 0 12px !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-filter-row button {
  min-height: 40px !important;
  border: 1px solid rgba(235, 241, 238, 0.13) !important;
  border-radius: 12px !important;
  background: #141716 !important;
  background-image: none !important;
  color: #e8ecea !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-filter-row button.active {
  border-color: #4d82ff !important;
  background: #2563eb !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-filter-row button.active::before {
  display: none !important;
  content: none !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) 24px !important;
  align-items: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  height: 98px !important;
  min-height: 98px !important;
  padding: 6px !important;
  overflow: visible !important;
  border: 1px solid rgba(235, 241, 238, 0.11) !important;
  border-radius: 14px !important;
  background: linear-gradient(115deg, #11181b 0%, #0c1215 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card > .reference-alert-thumb {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #0b0d0c !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card > .reference-alert-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card > .reference-alert-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-status-icon {
  display: none !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-copy strong {
  overflow: hidden !important;
  color: #f4f6f5 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: -.2px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-copy > span,
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-copy time {
  overflow: hidden !important;
  color: #a4aca8 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card .reference-alert-copy > small {
  color: #b8bfbc !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-card > .reference-alert-overflow-wrap {
  position: relative !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-overflow {
  width: 24px !important;
  height: 44px !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #edf1ef !important;
  box-shadow: none !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-overflow svg {
  width: 22px !important;
  height: 22px !important;
}

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
  .reference-alert-overflow-menu {
  position: absolute !important;
  z-index: 55 !important;
  top: 60px !important;
  right: 0 !important;
  width: 176px !important;
  padding: 6px !important;
  border: 1px solid rgba(235,241,238,0.13) !important;
  border-radius: 12px !important;
  background: #1a1d1c !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45) !important;
}

@media (max-width: 370px) {
  html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
    .reference-alert-card {
    grid-template-columns: 102px minmax(0, 1fr) 32px !important;
    gap: 8px !important;
  }

  html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active
    .reference-alert-card > .reference-alert-thumb {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    height: 72px !important;
    min-height: 72px !important;
  }
}


html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-group-heading { display:flex; align-items:center; justify-content:space-between; margin:20px 0 10px; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-group-heading h2 { margin:0!important; color:#f5f6f8; font:600 18px/1.2 Arial,Helvetica,sans-serif!important; letter-spacing:-.2px!important; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-group-heading > span { color:#a7b0bd; font:13px Arial,sans-serif; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-duration { position:absolute; bottom:4px; left:4px; z-index:2; padding:3px 5px; border-radius:5px; background:#000b; color:#fff; font:11px Arial,sans-serif; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-category { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:#237dee; color:white; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-category.warning { background:#e0444d; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-category svg { width:18px; height:18px; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-list { gap:10px!important; }
html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card .reference-alert-copy { flex:1; }
@media(max-width:374px) { html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card { grid-template-columns:92px minmax(0,1fr) 22px!important; gap:8px!important; } html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card > .reference-alert-thumb { width:92px!important; min-width:92px!important; max-width:92px!important; height:82px!important; } html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card > .reference-alert-main { gap:10px!important; } html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-alert-card .reference-alert-copy strong { font-size:12px!important; } }

html body .phone-shell-wrap.persistent-bottom-nav-shell.events-shell-active .reference-event-new-badge { position:absolute; top:5px; right:5px; z-index:2; padding:3px 6px; border:1px solid #82bdff66; border-radius:6px; background:#0878ee; color:#fff; font:600 10px/1.1 Arial,Helvetica,sans-serif; box-shadow:0 1px 5px #0005; }