/* Community layer — leans on tokens already defined in css/styles.css. */
/* Dropdown component animations (js/community/dropdown.js). */
@keyframes ddDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ddSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Standings position-change badge (js/community/standing-delta.js). A brief fade-rise so
   the arrows read as "the board just moved"; the default state is already visible, and the
   inline animation-delay staggers it down the list. */
@keyframes sdIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.sd-badge { animation: sdIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .sd-badge { animation: none; } }

/* Themed confirm / prompt dialog (js/community/modal.js) — replaces native
   window.confirm / window.prompt. Sits above every other overlay in the app. */
.cx-modal-back {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 6, 8, 0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: ddDrop 0.16s ease;
}
.cx-modal {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
}
.cx-modal-title { font-family: var(--font-bold); font-weight: 800; font-size: 18px; color: var(--text); margin: 0 0 8px; }
.cx-modal-msg { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0 0 18px; white-space: pre-line; }
.cx-modal-input {
  width: 100%; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 13px 15px; color: var(--text);
  font-family: var(--font-body); font-size: 15px; outline: none; margin: 0 0 18px;
}
.cx-modal-input:focus { border-color: var(--lime); }
.cx-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cx-modal-btn {
  cursor: pointer; border-radius: 12px; padding: 11px 18px;
  font-family: var(--font-bold); font-weight: 800; font-size: 14px; border: 1.5px solid var(--border-strong);
  background: transparent; color: var(--text);
}
.cx-modal-btn.primary { border: none; background: var(--lime); color: var(--ink); }
.cx-modal-btn.danger { border: none; background: var(--pink); color: var(--ink); }
.cx-modal-btn:disabled { opacity: 0.6; cursor: default; }

.page-title { font-family: var(--font-display, sans-serif); margin: 0; }
.card { background: var(--surface, #151A24); border: 1px solid var(--border, #1E2530);
  border-radius: var(--r-card, 20px); padding: 18px; margin: 12px auto; max-width: var(--maxw, 480px); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm, 14px);
  border: 1px solid var(--border-strong, #2A2F3A); background: var(--bg, #0B0E14); color: var(--text, #F5F7FA); }
.btn-primary { background: var(--lime, #CBFF2E); color: var(--ink, #0B0E14); border: none;
  padding: 12px 16px; border-radius: var(--r-sm, 14px); font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-ghost { background: transparent; color: var(--text-2, #C4CBD6);
  border: 1px solid var(--border-strong, #2A2F3A); padding: 8px 12px; border-radius: var(--r-sm, 14px); cursor: pointer; text-decoration: none; }
.muted { color: var(--muted, #8A93A3); }