@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #F0F4FF;
  --surface: #FFFFFF;
  --surface2: #E8EEFF;
  --border: rgba(79,70,229,0.1);
  --indigo: #4F46E5;
  --indigo-light: rgba(79,70,229,0.08);
  --indigo-mid: rgba(79,70,229,0.18);
  --green: #10B981;
  --green-light: rgba(16,185,129,0.1);
  --amber: #F59E0B;
  --amber-light: rgba(245,158,11,0.1);
  --red: #EF4444;
  --red-light: rgba(239,68,68,0.08);
  --text: #111827;
  --muted: #6B7280;
  --card-radius: 18px;
  --max-w: 480px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse   { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes shimmer { from { background-position:-200% 0; } to { background-position:200% 0; } }

.fade-in  { animation: fadeIn  0.3s var(--transition) both; }
.slide-up { animation: slideUp 0.35s var(--transition) both; }

/* Délais d'animation pour les listes */
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.10s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.20s; }
.anim-delay-5 { animation-delay: 0.25s; }

/* ── TYPOGRAPHY ── */
.font-display { font-family: 'Space Grotesk', sans-serif; }
h1,h2,h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing:-0.3px; }

/* ── LAYOUT ── */
.page-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px 88px;
}

/* ── NAV ── */
.topnav {
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  transition: box-shadow var(--transition);
}

.topnav.scrolled { box-shadow: 0 2px 20px rgba(79,70,229,0.08); }

.topnav .logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text); text-decoration: none;
}
.topnav .logo span { color: var(--indigo); }

.badge-fpay {
  background: var(--indigo-light);
  border: 1px solid rgba(79,70,229,0.2);
  color: var(--indigo);
  padding: 6px 13px; border-radius: 20px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px;
  transition: background var(--transition);
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--indigo);
  display: flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight: 700; color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  position: fixed; bottom:0; left:0; right:0;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex; padding: 8px 0 20px;
  box-shadow: 0 -4px 24px rgba(79,70,229,0.06);
  z-index: 100;
}

.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:4px; cursor:pointer; text-decoration:none; color:var(--muted);
  transition: color var(--transition);
  position: relative;
}

.nav-item .ni-icon { width:24px; height:24px; transition: transform var(--transition); }
.nav-item .ni-label { font-size:10px; letter-spacing:0.2px; font-weight:500; }
.nav-item.active .ni-label { color:var(--indigo); font-weight:600; }
.nav-item.active .ni-icon { color:var(--indigo); transform: translateY(-1px); }
.nav-dot { width:4px; height:4px; border-radius:50%; background:var(--indigo); margin:0 auto; }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 16px;
  transition: box-shadow var(--transition), transform var(--transition);
}

/* ── BALANCE CARD ── */
.balance-card {
  background: var(--indigo);
  border-radius: var(--card-radius);
  padding: 24px 22px 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(79,70,229,0.25);
}

.balance-card::before {
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px;
  background: rgba(255,255,255,0.07);
  border-radius:50%;
}

.balance-card::after {
  content:'';
  position:absolute; bottom:-40px; right:50px;
  width:140px; height:140px;
  background: rgba(255,255,255,0.04);
  border-radius:50%;
}

.balance-label { font-size:11px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; font-weight:500; }
.balance-amount { font-family:'Space Grotesk',sans-serif; font-size:44px; font-weight:700; color:#fff; letter-spacing:-2px; line-height:1; margin-bottom:3px; }
.balance-usd { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:20px; }

.stat-pill {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:10px 14px; flex:1;
  transition: background var(--transition);
}
.stat-pill:hover { background: rgba(255,255,255,0.15); }
.stat-pill .s-label { font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:3px; font-weight:500; }
.stat-pill .s-val { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:#fff; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 20px; border-radius:12px; border:none; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
  text-decoration:none; transition: all var(--transition);
  position: relative; overflow: hidden;
}

.btn::after {
  content:'';
  position:absolute; inset:0;
  background: rgba(255,255,255,0);
  transition: background var(--transition);
}

.btn:hover::after { background: rgba(255,255,255,0.1); }
.btn:active { transform: scale(0.97); }

.btn-primary { background:var(--indigo); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,0.25); }
.btn-primary:hover { box-shadow:0 6px 20px rgba(79,70,229,0.35); transform:translateY(-1px); }
.btn-white   { background:#fff; color:var(--indigo); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.btn-white:hover { box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.btn-green   { background:var(--green); color:#fff; box-shadow:0 4px 12px rgba(16,185,129,0.25); }
.btn-red     { background:var(--red); color:#fff; }
.btn-ghost   { background:var(--indigo-light); color:var(--indigo); border:1px solid rgba(79,70,229,0.15); }
.btn-ghost:hover { background:var(--indigo-mid); }
.btn-block   { width:100%; }
.btn-sm      { padding:7px 14px; font-size:13px; border-radius:9px; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--text); margin-bottom:6px; }

.form-control {
  width:100%; padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface);
  font-size:15px; color:var(--text); font-family:'Inter',sans-serif;
  outline:none; transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}

.form-control:focus {
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(79,70,229,0.1);
}

.form-select {
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}

/* ── SECTION TITLES ── */
.section-title {
  font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600;
  color:var(--text); margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
}
.section-title .count { background:var(--surface2); border-radius:20px; padding:2px 10px; font-size:12px; color:var(--muted); font-weight:500; }
.section-title a { font-size:13px; color:var(--indigo); font-weight:600; text-decoration:none; }

/* ── MISSION CARDS ── */
.mission-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:15px;
  display:flex; align-items:center; gap:13px;
  cursor:pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.mission-card:hover {
  box-shadow:0 4px 20px rgba(79,70,229,0.1);
  border-color:rgba(79,70,229,0.25);
  transform:translateY(-1px);
}

.mission-card:active { transform:scale(0.98); }

/* ── PLATFORM ICONS ── */
.platform-icon {
  width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform var(--transition);
}
.platform-icon.tiktok   { background:#F3F0FF; }
.platform-icon.facebook { background:#EFF6FF; }
.mission-card:hover .platform-icon { transform:scale(1.05); }

.mission-target { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.mission-sub { font-size:12px; color:var(--muted); }
.reward-val { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--green); }

/* ── STATUS BADGES ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-green  { background:var(--green-light); color:var(--green); }
.badge-amber  { background:var(--amber-light); color:var(--amber); }
.badge-red    { background:var(--red-light); color:var(--red); }
.badge-indigo { background:var(--indigo-light); color:var(--indigo); }
.badge-gray   { background:var(--surface2); color:var(--muted); }

/* ── HISTORY ITEMS ── */
.history-item { display:flex; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); gap:12px; transition:background var(--transition); }
.history-item:last-child { border-bottom:none; }

.status-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.status-icon.validated { background:var(--green-light); }
.status-icon.pending   { background:var(--amber-light); }
.status-icon.rejected  { background:var(--red-light); }

.h-title { font-size:14px; font-weight:500; }
.h-date  { font-size:12px; color:var(--muted); margin-top:2px; }
.h-amount { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; }
.h-amount.credit   { color:var(--green); }
.h-amount.debit    { color:var(--red); }
.h-amount.pending  { color:var(--amber); }
.h-amount.rejected { color:#D1D5DB; text-decoration:line-through; }

/* ── ALERTS ── */
.alert { padding:12px 16px; border-radius:12px; font-size:14px; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px; }
.alert-icon { flex-shrink:0; width:18px; height:18px; margin-top:1px; }
.alert-success { background:var(--green-light); color:#065f46; border:1px solid rgba(16,185,129,0.2); }
.alert-error   { background:var(--red-light); color:#991b1b; border:1px solid rgba(239,68,68,0.2); }
.alert-info    { background:var(--indigo-light); color:#3730a3; border:1px solid rgba(79,70,229,0.2); }
.alert-warning { background:var(--amber-light); color:#92400e; border:1px solid rgba(245,158,11,0.2); }

/* ── UTILS ── */
.mt-16 { margin-top:16px; }
.mt-12 { margin-top:12px; }
.mb-16 { margin-bottom:16px; }
.mb-12 { margin-bottom:12px; }
.gap-10 { gap:10px; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }

/* ── ADMIN ── */
.admin-body { background:#F8FAFF; }

.admin-sidebar {
  position:fixed; left:0; top:0; bottom:0; width:240px;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:200;
  box-shadow:2px 0 20px rgba(79,70,229,0.05);
}

.admin-main { margin-left:240px; min-height:100vh; padding:24px; }

.admin-topbar {
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}

.sidebar-logo { padding:20px; border-bottom:1px solid var(--border); }
.sidebar-nav  { flex:1; padding:16px 12px; overflow-y:auto; }

.sidebar-link {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; color:var(--muted); text-decoration:none;
  font-size:14px; font-weight:500; margin-bottom:4px;
  transition: all var(--transition);
}

.sidebar-link:hover { background:var(--indigo-light); color:var(--indigo); }
.sidebar-link.active { background:var(--indigo-light); color:var(--indigo); font-weight:600; }
.sidebar-link svg { width:18px; height:18px; flex-shrink:0; }

.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; transition:box-shadow var(--transition); }
.stat-card:hover { box-shadow:0 4px 16px rgba(79,70,229,0.08); }
.stat-card .sc-label { font-size:11px; color:var(--muted); margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; }
.stat-card .sc-val { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; letter-spacing:-1px; }
.stat-card .sc-sub { font-size:12px; color:var(--muted); margin-top:4px; }

.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:640px)  { .stats-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px)  { .stats-grid { grid-template-columns:repeat(6,1fr); } }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:10px 14px; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; border-bottom:2px solid var(--border); }
td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg); }

/* Online indicator */
.online-dot {
  width:8px; height:8px; border-radius:50%; background:var(--green);
  display:inline-block; box-shadow:0 0 0 2px rgba(16,185,129,0.3);
  animation: pulse 2s infinite;
}

@media(max-width:768px) {
  .admin-sidebar { display:none; }
  .admin-main { margin-left:0; padding:16px; }
}

/* ── SPINNER ── */
.spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--indigo); border-radius:50%; animation:spin 0.7s linear infinite; }

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, #e8eeff 50%, var(--surface2) 75%);
  background-size:200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius:8px;
}

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:48px 20px; }
.empty-state .es-icon { width:56px; height:56px; margin:0 auto 16px; opacity:0.3; }
.empty-state .es-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; margin-bottom:6px; }
.empty-state .es-sub { font-size:14px; color:var(--muted); line-height:1.5; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(17,24,39,0.5);
  backdrop-filter:blur(4px);
  z-index:500; display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn 0.2s ease both;
}

.modal-box {
  background:var(--surface); border-radius:24px 24px 0 0; padding:24px;
  width:100%; max-width:var(--max-w);
  animation:slideUp 0.3s var(--transition) both;
  box-shadow:0 -8px 40px rgba(79,70,229,0.15);
}

.modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700; margin-bottom:16px; }

/* ── SVG ICONS (inline) ── */
.icon { display:inline-flex; align-items:center; justify-content:center; }