/* ---------- Auth pages ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--space-5);
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: var(--space-6);
}
.auth-brand i { color: var(--accent); font-size: 20px; }
.auth-heading { margin-bottom: var(--space-1); font-size: 24px; }
.auth-sub { color: var(--muted); font-size: 14px; margin-bottom: var(--space-6); }
.auth-footer { text-align: center; margin-top: var(--space-5); font-size: 14px; color: var(--muted); }
.auth-footer a { color: var(--primary); font-weight: 600; }
.auth-locked {
  text-align: center;
  padding: var(--space-7) var(--space-4);
}
.auth-locked i { font-size: 40px; color: var(--danger); margin-bottom: var(--space-4); }

/* ---------- App shell (post-login) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main {
  flex: 1;
  padding: var(--space-5);
  padding-bottom: 90px; /* clears tabbar on mobile */
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 900px) {
  .app-main { padding-bottom: var(--space-5); max-width: 760px; }
}

/* ---------- Wallet header (User) ---------- */
.wallet-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--ink) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-5);
}
.wallet-label { font-size: 13px; opacity: 0.7; margin-bottom: var(--space-1); }
.wallet-amount { font-family: var(--font-mono); font-size: 32px; font-weight: 600; }
.wallet-amount .naira { color: var(--accent); }

/* ---------- Task card ---------- */
.task-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.task-card-info { flex: 1; min-width: 0; }
.task-card-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.task-card-meta { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.task-card-rate { font-family: var(--font-mono); font-weight: 600; color: var(--success); white-space: nowrap; }

/* ---------- Video player ---------- */
.video-wrap { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); background: var(--ink); }
.video-wrap video { width: 100%; display: block; }
.video-progress-bar { height: 4px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-4); }
.video-progress-fill { height: 100%; background: var(--accent); transition: width 0.15s linear; }

/* ---------- Section headings ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.section-head h3 { font-size: 16px; }

/* ---------- Lists / tables ---------- */
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,18,32,0.5);
  display: flex; align-items: flex-end;
  z-index: 50;
}
@media (min-width: 640px) { .modal-overlay { align-items: center; justify-content: center; } }
.modal {
  background: var(--paper-raised);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
}
@media (min-width: 640px) { .modal { border-radius: var(--radius-lg); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.modal-close { font-size: 18px; color: var(--muted); }