/* Contests list styles – romantic, a tiny bit "giccses" on purpose */
/* Default: LIGHT THEME palette */
:root {
  --contest-pink: #ff69b4;
  --contest-deeppink: #ff1493;
  --contest-bg: #ffffff;
  --contest-fg: #111111;
  --contest-muted: #555555;
  --contest-card: #ffffff;
  --contest-border: #e6e6e6;
  --contest-pill-bg: #f5f5f5;
  --contest-pill-bd: #e0e0e0;
}

/* Dark mode overrides */
body.dark-mode {
  --contest-bg: #0d0d0d;
  --contest-fg: #ffffff;
  --contest-muted: #bbbbbb;
  --contest-card: #151515;
  --contest-border: #2a2a2a;
  --contest-pill-bg: #202020;
  --contest-pill-bd: #333333;
}

.contests-hero {
  margin: 12px auto 20px;
  max-width: 1100px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--contest-fg);
  background: radial-gradient(1200px 400px at 10% -20%, rgba(255, 105, 180, .18), rgba(0,0,0,0)),
              linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
  border: 1px solid var(--contest-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(255, 105, 180, .08);
}
.contests-hero h1{
  margin: 0;
  font-size: 1.6rem;
}
.contests-hero p{
  margin: 0;
  opacity: .85;
}

.contest-section{
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 8px;
}
.contest-section h2{
  color: var(--contest-fg);
  border-left: 4px solid var(--contest-pink);
  padding-left: 10px;
  margin: 18px 0 14px;
}
.contest-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.contest-card{
  position: relative;
  background: var(--contest-card);
  border: 1px solid var(--contest-border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--contest-fg);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contest-card::after{
  content: "";
  position: absolute; inset: -1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,105,180,.08), rgba(255,20,147,.06));
  mix-blend-mode: screen;
}
.contest-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(255,105,180,.14);
  border-color: #d7d7d7;
}

.card-head{
  padding: 14px 14px 8px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent);
  border-bottom: 1px solid var(--contest-border);
}
.card-title{
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .heart{ color: var(--contest-pink); }
.card-meta{
  color: var(--contest-muted);
  font-size: 13px;
  display:flex; gap:12px; align-items:center; flex-wrap: wrap;
}
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background: var(--contest-pill-bg); border:1px solid var(--contest-pill-bd); color: var(--contest-muted); font-size:12px; }
.pill.hot{ background: linear-gradient(90deg, rgba(255,20,147,.08), rgba(255,105,180,.12)); color:#b31963; border-color: rgba(255,20,147,.25); }

.card-body{ padding: 12px 14px 16px; }
.card-desc{ color: var(--contest-muted); min-height: 48px; }
.card-actions{ margin-top: 12px; display:flex; gap: 10px; }
.card-actions .btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:10px 14px; border-radius:10px; border:1px solid #dddddd;
  color: var(--contest-fg); background: #f5f5f5; transition: .15s ease;
}
.card-actions .btn:hover{ background:#efefef; border-color:#cfcfcf; }
.card-actions .btn-primary{
  background: linear-gradient(90deg, var(--contest-deeppink), var(--contest-pink));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(255,105,180,.25);
}
.card-actions .btn-primary:hover{ filter: brightness(1.05); }

.empty-note{
  color: var(--contest-muted); background:#fafafa; border:1px dashed #e0e0e0; padding:20px; border-radius:10px; text-align:center;
}

@media (max-width: 600px){
  .contests-hero{ flex-direction: column; align-items:flex-start; }
}