.wk-events { margin: 14px 0; max-width: 100%; box-sizing: border-box; }

.wk-ev-list {
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  max-width: 100%;
}
.wk-ev-empty { color: #9aa0ad; font-size: 13px; }

.wk-ev-card {
  box-sizing: border-box;
  min-width: 0;                 
  max-width: 100%;
  background: #20222a; border: 1px solid #2c3038; border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.wk-ev-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.wk-ev-name {
  margin: 0; font-size: 15px; color: #ffd97a; line-height: 1.3;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.wk-ev-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #2f333d; color: #cfd3dd; white-space: nowrap; margin-left: auto;
}
.wk-ev-range { font-size: 12px; color: #9aa0ad; overflow-wrap: anywhere; }
.wk-ev-note { margin: 0; font-size: 13px; color: #d6d9e0; overflow-wrap: anywhere; }
.wk-ev-meta { font-size: 12px; color: #9aa0ad; overflow-wrap: anywhere; }


.wk-ev-bar {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; max-width: 100%;
  height: 10px; border: 0; border-radius: 999px;
  background: #2c3038; overflow: hidden;
}
.wk-ev-bar::-webkit-progress-bar { background: #2c3038; border-radius: 999px; }
.wk-ev-bar::-webkit-progress-value { background: #ffd97a; border-radius: 999px; transition: width .4s ease; }
.wk-ev-bar::-moz-progress-bar { background: #ffd97a; border-radius: 999px; }


.wk-ev-card.is-active   .wk-ev-bar::-webkit-progress-value { background: #ffd97a; }
.wk-ev-card.is-active   .wk-ev-bar::-moz-progress-bar     { background: #ffd97a; }
.wk-ev-card.is-upcoming .wk-ev-bar::-webkit-progress-value { background: #6b7280; }
.wk-ev-card.is-upcoming .wk-ev-bar::-moz-progress-bar     { background: #6b7280; }
.wk-ev-card.is-ended    .wk-ev-bar::-webkit-progress-value { background: #4b5563; }
.wk-ev-card.is-ended    .wk-ev-bar::-moz-progress-bar     { background: #4b5563; }
.wk-ev-card.is-ended    .wk-ev-name { color: #8b8f9c; }
.wk-ev-card.is-upcoming .wk-ev-name { color: #cfd3dd; }
.wk-ev-card.is-error    { border-color: #8b2b2b; }
.wk-ev-card.is-error    .wk-ev-meta { color: #e08a8a; }


.wk-ev-c-金 .wk-ev-bar::-webkit-progress-value { background: #ffd97a; }
.wk-ev-c-绿 .wk-ev-bar::-webkit-progress-value { background: #57c07a; }
.wk-ev-c-蓝 .wk-ev-bar::-webkit-progress-value { background: #5aa9e6; }
.wk-ev-c-紫 .wk-ev-bar::-webkit-progress-value { background: #a98bf0; }
.wk-ev-c-红 .wk-ev-bar::-webkit-progress-value { background: #e06c75; }
.wk-ev-c-金 .wk-ev-bar::-moz-progress-bar { background: #ffd97a; }
.wk-ev-c-绿 .wk-ev-bar::-moz-progress-bar { background: #57c07a; }
.wk-ev-c-蓝 .wk-ev-bar::-moz-progress-bar { background: #5aa9e6; }
.wk-ev-c-紫 .wk-ev-bar::-moz-progress-bar { background: #a98bf0; }
.wk-ev-c-红 .wk-ev-bar::-moz-progress-bar { background: #e06c75; }


@media (max-width: 640px) { .wk-ev-list { grid-template-columns: 1fr; } }