#view-events {
  --event-ink: #eef4fb;
  --event-muted: #aebccd;
  --event-gold: #f2cc87;
  --event-cyan: #8ce6ee;
  --event-frame: #384858;
  --event-panel: #111a24;
  color: var(--event-ink);
  font-size: 14px;
}
.events-list-header, .events-section-heading, .events-bar-heading, .events-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.events-list-header { margin-bottom: 16px; }
.events-list-header h2 { margin: 0; font-size: 1.15rem; }
.events-status:empty { display: none; }
.events-status { margin: 0 0 16px; color: var(--event-cyan); }
.events-list { display: grid; gap: 24px; }
.events-card {
  overflow: hidden;
  border: 1px solid var(--event-frame);
  border-top: 2px solid var(--event-gold);
  border-radius: 10px;
  background: var(--event-panel);
  box-shadow: 0 20px 42px #0005;
}
.events-hero {
  position: relative;
  padding: clamp(26px, 6vw, 64px) clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--event-frame);
  background:
    linear-gradient(90deg, #0a131f 3%, #0b1421eb 41%, #0c162365),
    linear-gradient(0deg, #0a131f 1%, transparent 70%),
    url('/assets/cabal-world.png') center 43% / cover;
}
.events-intro { max-width: 540px; }
.events-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #428e92;
  border-radius: 4px;
  background: #12363e;
  color: var(--event-cyan);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.events-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.events-kicker { color: var(--event-gold); font-size: .69rem; font-weight: 800; letter-spacing: .18em; }
.events-intro .events-kicker { margin: 22px 0 4px; }
.events-hero h2 { margin: 0; color: var(--event-ink); font: 700 clamp(2.05rem, 5.4vw, 4.3rem)/1.05 Georgia, serif; }
.events-subtitle { margin: 10px 0 0; color: var(--event-gold); font-size: clamp(1rem, 2.3vw, 1.42rem); }
.events-window { margin: 12px 0 0; color: var(--event-muted); font-size: .8rem; }
.events-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, 1fr);
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(16px, 3vw, 32px);
}
.events-tracker, .events-rewards { min-width: 0; }
.events-body h3 { margin: 0; color: var(--event-ink); font-size: 1.08rem; }
.events-body p, .events-bar-heading span { color: var(--event-muted); line-height: 1.55; }
.events-counter { color: var(--event-gold); font-weight: 700; }
.events-bar-heading { margin-top: 22px; font-variant-numeric: tabular-nums; }
.events-bar-heading strong { color: var(--event-cyan); font-size: 1.12rem; }
.events-tracker progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 14px;
  margin: 8px 0 16px;
  overflow: hidden;
  border: 1px solid var(--event-frame);
  border-radius: 4px;
  background: #080e16;
  accent-color: var(--event-cyan);
}
.events-tracker progress::-webkit-progress-bar { background: #080e16; }
.events-tracker progress::-webkit-progress-value { background: linear-gradient(90deg, #2e9ab3, var(--event-cyan)); }
.events-tracker progress::-moz-progress-bar { background: linear-gradient(90deg, #2e9ab3, var(--event-cyan)); }
.events-milestones, .events-options { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.events-milestone {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--event-frame);
  border-radius: 6px;
  background: #0d151e;
}
.events-milestone small { display: block; color: var(--event-muted); overflow-wrap: anywhere; font-size: .78rem; }
.events-step { display: grid; place-items: center; min-height: 34px; background: #263341; color: var(--event-gold); font-weight: 800; }
.events-done { color: var(--event-cyan); font-weight: 600; }
.events-rewards { align-self: start; padding: 16px; border: 1px solid var(--event-frame); border-radius: 8px; background: #0c151f; }
.events-rewards .events-kicker { margin: 0 0 6px; color: var(--event-gold); }
.events-loot { display: block; width: 100%; max-width: 274px; height: auto; margin: 12px auto 16px; border-radius: 4px; }
.events-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.events-options li { display: grid; gap: 3px; border-left: 2px solid #4b7c8c; padding: 8px; background: #172532; }
.events-options span, .events-note { color: var(--event-muted); font-size: .79rem; }
.events-form { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid #53848a; border-radius: 8px; background: #12212b; }
.events-form label { display: grid; gap: 6px; }
.events-form select { min-height: 44px; width: 100%; }
.events-form p { margin: 0; }
.events-form-status:empty { display: none; }
.events-actions { justify-content: flex-start; }
#view-events button { min-height: 44px; }
#view-events button:disabled { opacity: .62; cursor: default; }
@media (max-width: 920px) {
  .events-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 450px) {
  .events-milestone { grid-template-columns: 32px minmax(0, 1fr); }
  .events-milestone > :nth-child(3) { grid-column: 2; justify-self: start; }
  .events-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #view-events button { transition: none; }
}