.recommended-events { margin: 0 0 24px; padding: 14px 16px 12px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px #0f172a05; min-width: 0; }
.recommended-events[hidden], .recommendation-control [hidden] { display: none; }
.recommended-events-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.recommended-events-heading h2 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; }
.recommended-events-heading h2 span { color: #f59e0b; margin-right: 4px; }
.recommended-events-navigation { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 11px; white-space: nowrap; }
.recommended-events-navigation button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e2e8f0; font-size: 22px; line-height: 1; background: #f8fafc; }
.recommended-events-navigation button:disabled { opacity: .35; cursor: default; }
.recommended-events-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; padding: 2px 2px 8px; }
@media (any-pointer: fine) {
    .recommended-events-track, .recommended-events-track .recommended-event-card { cursor: grab; }
    .recommended-events-track { user-select: none; -webkit-user-select: none; }
}
.recommended-events-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.recommended-events-track.has-autoscroll { scroll-snap-type: none; scroll-behavior: auto; }
.recommended-events-navigation button[hidden] { display: none; }
.recommended-events-track.is-dragging, .recommended-events-track.is-dragging * { cursor: grabbing; }
.recommended-event-card { flex: 0 0 160px; min-width: 0; scroll-snap-align: start; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; text-decoration: none; background: #fff; transition: border-color .15s; }
.recommended-event-card:hover { border-color: #0ea5e9; }
.recommended-event-card img, .recommended-event-placeholder { display: block; width: 100%; height: 88px; object-fit: cover; background: #f0f9ff; }
.recommended-event-placeholder { display: grid; place-items: center; font-size: 28px; }
.recommended-event-date { display: block; padding: 6px 8px 0; font-size: 10px; line-height: 16px; color: #0284c7; white-space: nowrap; }
.recommended-event-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: 36px; margin: 1px 8px 8px; font-size: 12px; font-weight: 700; line-height: 18px; color: #334155; white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
.recommendation-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; font-size: 11px; max-width: 100%; }
.recommendation-control label { color: #64748b; }
.recommendation-control select { background: white; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 3px; max-width: 100%; }
.recommendation-control button { color: #a16207; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 8px; font-weight: 700; }
.recommendation-control button:disabled { opacity: .5; }
.recommendation-control [data-recommendation-remove] { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
.recommendation-status { flex-basis: 100%; color: #64748b; text-align: right; }
.recommendation-status:empty { display: none; }
.recommended-events :focus-visible, .recommendation-control :focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
[data-timeline-post] { scroll-margin-top: 100px; }
@media (max-width: 640px) {
    .recommended-events { padding: 12px 10px 8px; margin-bottom: 20px; }
    .recommended-events-heading h2 { font-size: 13px; }
    .recommended-events-navigation > span { display: none; }
    .recommended-event-card { flex-basis: 140px; }
    .recommended-event-card img, .recommended-event-placeholder { height: 76px; }
    .recommended-events-track { gap: 9px; }
}

.recommendation-control input[type="number"] { width: 64px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px; }
.recommendation-help { flex-basis: 100%; text-align: right; color: #64748b; font-size: 10px; }
.recommended-event-date { overflow: hidden; text-overflow: ellipsis; }
[data-recommended-position] { border-color: #ddd6fe; }
[data-recommended-position] .recommended-event-date { color: #7c3aed; }
[data-timeline-ad] { scroll-margin-top: 100px; }