.server-events-module { margin: 28px 0 24px; }
.server-events-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 0 12px; }
.server-events-eyebrow { display: none; }
.server-events-heading h2 { margin: 0; color: #eff7ff; font-size: 18px; }
.server-events-hint { color: #7189a8; font-size: 10px; }
.server-events-table { overflow: visible; border: 1px solid rgba(74, 133, 204, .2); }
.server-event-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(92px, 122px); gap: 14px; align-items: center; min-height: 0; padding: 9px 14px; border-bottom: 1px solid rgba(74, 133, 204, .1); }
.server-event-row:last-child { border-bottom: 0; }
.server-event-row:nth-child(odd) { background: rgba(20, 24, 46, .52); }
.server-event-row:nth-child(even) { background: rgba(33, 39, 66, .42); }
.server-event-name { display: flex; align-items: center; gap: 9px; min-width: 0; color: #e7f2ff; font-size: 12px; }
.server-event-name strong { overflow-wrap: anywhere; }
.server-event-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #55e6ff; box-shadow: 0 0 9px rgba(85, 230, 255, .75); }
.server-event-state { white-space: nowrap; font-size: 10px; font-weight: 800; }
.server-event-state.is-ready { color: #4ee89d; }
.server-event-state.is-pending { color: #f0c56f; }
.server-event-action { position: relative; display: flex; justify-content: flex-end; }
.server-event-more { padding: 3px 0; border: 0; border-bottom: 1px solid rgba(98, 228, 255, .42); background: transparent; color: #62e4ff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.server-event-more:hover, .server-event-more:focus-visible { color: #fff; border-bottom-color: #62e4ff; outline: none; }
.server-event-popover { position: absolute; right: 0; top: calc(100% + 9px); z-index: 30; display: none; width: min(350px, calc(100vw - 34px)); padding: 13px 14px; border: 1px solid rgba(98, 228, 255, .45); border-radius: 6px; background: linear-gradient(145deg, rgba(7, 17, 33, .99), rgba(16, 25, 49, .99)); box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 18px rgba(0, 177, 255, .14); }
.server-event-action:hover .server-event-popover, .server-event-action:focus-within .server-event-popover { display: block; }
.server-event-popover-title { margin-bottom: 9px; color: #f0c56f; font-size: 13px; font-weight: 900; }
.server-event-popover dl { display: grid; gap: 6px; margin: 0; }
.server-event-popover dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
.server-event-popover dt { color: #7f9cbd; font-size: 10px; }
.server-event-popover dd { margin: 0; color: #e8f4ff; font-size: 10px; line-height: 1.35; }
.server-event-rewards { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.server-event-rewards li { position: relative; padding-left: 9px; }
.server-event-rewards li::before { position: absolute; left: 0; content: '•'; color: #62e4ff; }
.server-event-coming { padding: 7px 0 4px; color: #f0c56f; font-size: 14px; font-weight: 900; text-align: center; }
@media (max-width: 680px) {
    .server-events-heading { align-items: start; flex-direction: column; gap: 4px; }
    .server-event-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 10px 12px; }
    .server-event-state { grid-column: 1; padding-left: 15px; }
    .server-event-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .server-event-popover { position: fixed; right: 12px; left: 12px; top: auto; bottom: 12px; width: auto; }
}