/* Activity Page Specific Styles for Layout 1 */
.activity-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #e5e7eb;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.activity-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.activity-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.auto-refresh {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toggle-switch-sm {
  width: 28px;
  height: 16px;
  background: #3b82f6;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.toggle-switch-sm::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
}
.time-filters {
  display: flex;
  gap: 8px;
}
.time-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
}
.time-btn.active {
  color: #3b82f6;
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; left: 16px;
  bottom: 0; width: 1px;
  background: #e5e7eb;
}
.timeline-item {
  position: relative;
  margin-bottom: 24px;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-icon {
  position: absolute;
  left: -32px;
  top: 0;
  width: 32px; height: 32px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 12px;
  z-index: 1;
}
.timeline-content {
  padding-left: 16px;
}
.timeline-title {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  margin-bottom: 4px;
}
.timeline-title a { color: #3b82f6; text-decoration: none; font-weight: 600; }
.timeline-time {
  font-size: 10px;
  color: #9ca3af;
}

/* Event Cards */
.event-card {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
}
.event-date {
  background: #eff6ff;
  border: 1px dashed #bfdbfe;
  border-radius: 8px;
  width: 48px; height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-date span:first-child { font-size: 10px; color: #3b82f6; font-weight: 600; text-transform: uppercase; }
.event-date span:last-child { font-size: 16px; color: #1e3a8a; font-weight: 700; }
.event-img {
  width: 80px; height: 48px;
  border-radius: 6px;
  object-fit: cover;
}
.event-info { flex: 1; }
.event-info .meta { font-size: 10px; color: #3b82f6; font-weight: 600; margin-bottom: 2px; }
.event-info h4 { font-size: 13px; font-weight: 600; color: #111827; margin: 0 0 4px; }
.event-info p { font-size: 11px; color: #6b7280; margin: 0; line-height: 1.4; }

/* Progress Card */
.prog-card {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.prog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.prog-title { display: flex; gap: 8px; align-items: center; }
.prog-title i { color: #8b5cf6; background: #f3e8ff; padding: 6px; border-radius: 6px; font-size: 12px; }
.prog-title h4 { font-size: 13px; font-weight: 600; color: #111827; margin: 0; }
.prog-title p { font-size: 10px; color: #6b7280; margin: 2px 0 0; }
.prog-btn { font-size: 11px; font-weight: 600; color: #3b82f6; background: none; border: none; cursor: pointer; }
.prog-stats { display: flex; align-items: center; gap: 24px; font-size: 11px; }
.prog-item { display: flex; align-items: center; gap: 8px; }
.prog-item span { color: #6b7280; font-weight: 500; }
.prog-item a { color: #3b82f6; text-decoration: none; font-weight: 600; }
.prog-bar { width: 100px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
.prog-bar-fill { width: 70%; height: 100%; background: #22c55e; }
.prog-avatars { display: flex; }
.prog-avatars img, .prog-avatars span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; }
.prog-avatars span { background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; }

/* Conference Card */
.conf-card {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
  text-align: center;
}
.conf-img { width: 120px; margin-bottom: 12px; }
.conf-card h4 { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.conf-card p { font-size: 11px; color: #6b7280; margin: 0; }
.conf-badge { background: #dcfce7; color: #166534; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; margin-left: 6px; }

/* Team Card */
.team-card {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  gap: 16px;
  flex-wrap: wrap;
}
.team-info-left { display: flex; gap: 12px; align-items: center; }
.team-icon { width: 36px; height: 36px; background: #eff6ff; color: #3b82f6; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; }
.team-info h4 { font-size: 13px; font-weight: 700; color: #111827; margin: 0 0 2px; }
.team-info p { font-size: 11px; color: #6b7280; margin: 0; }
.team-stats { display: flex; gap: 24px; align-items: center; }
.team-stat { text-align: right; }
.team-stat span { display: block; font-size: 9px; color: #9ca3af; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.stars { color: #f59e0b; font-size: 10px; }
.team-btn { background: #3b82f6; color: #fff; border: none; padding: 6px 16px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }

/* Help Cards */
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .help-grid { grid-template-columns: 1fr; }
}
.help-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.help-content {
  position: relative;
  z-index: 2;
  max-width: 70%;
}
.help-card h4 { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 8px; }
.help-card p { font-size: 12px; color: #6b7280; line-height: 1.5; margin: 0 0 16px; }
.help-link { font-size: 10px; font-weight: 700; color: #3b82f6; text-decoration: none; text-transform: uppercase; }
.help-img {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 80px;
  opacity: 0.8;
  z-index: 1;
}