/* =====================================================================
   assets/css/style.css
   90 Day Meme Blitz - clean, modern, mobile-friendly theme.
   ===================================================================== */

:root {
  --color-primary: #2b6cb0;   /* steel blue */
  --color-primary-dark: #1a4971;
  --color-gold: #d4a017;
  --color-gold-light: #f4c94c;
  --color-bg: #f4f6f9;
  --color-card: #ffffff;
  --color-text: #1f2933;
  --radius: 14px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.app-navbar {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}

.btn-gold {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: #2a2000;
  font-weight: 600;
}
.btn-gold:hover {
  background-color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: #2a2000;
}

.btn-primary-steel {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary-steel:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.card-glass {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(43, 108, 176, 0.15);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 40, 70, 0.08);
  backdrop-filter: blur(6px);
}

.stat-card {
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--color-card);
  border: 1px solid #e6eaf0;
  height: 100%;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: #6b7684;
}

.progress {
  height: 1.25rem;
  border-radius: 999px;
  background-color: #e6eaf0;
}
.progress-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid #e6eaf0;
  background: #fff;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checklist-item:hover {
  border-color: var(--color-primary);
}
.checklist-item.checked {
  background: #eaf3ff;
  border-color: var(--color-primary);
}
.checklist-item.locked {
  cursor: not-allowed;
  opacity: 0.75;
}
.checklist-item input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
}

.day-badge {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0.2rem;
}
.day-badge.complete {
  background: var(--color-primary);
  color: #fff;
}
.day-badge.incomplete {
  background: #f8d7da;
  color: #842029;
}
.day-badge.future {
  background: #e9ecef;
  color: #adb5bd;
}

.leaderboard-row.top-1 { background: linear-gradient(90deg, #fff8e1, transparent); }
.leaderboard-row.top-2 { background: linear-gradient(90deg, #f1f3f5, transparent); }
.leaderboard-row.top-3 { background: linear-gradient(90deg, #fbe9e7, transparent); }

.app-footer {
  color: #8592a3;
  font-size: 0.85rem;
}

.motivation-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: 1.5rem;
  max-width: 420px;
  margin-left: auto;
  z-index: 1080;
}

@media (max-width: 576px) {
  .stat-value { font-size: 1.5rem; }
}