<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0a1628">
    <meta name="description" content="CCFTA - Infrastructure fintech africaine pour tontines numeriques">
    <title>CCFTA - Community Credit & Financial Trust Alliance</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        :root {
            --primary: #1a5f4a;
            --primary-light: #2a8f6a;
            --primary-dark: #0f3d2e;
            --secondary: #c9a227;
            --secondary-light: #e8c547;
            --accent: #2563eb;
            --danger: #dc2626;
            --warning: #f59e0b;
            --success: #16a34a;
            --bg: #f0f4f8;
            --bg-dark: #0a1628;
            --bg-card: #ffffff;
            --text: #1e293b;
            --text-light: #64748b;
            --text-lighter: #94a3b8;
            --border: #e2e8f0;
            --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
            --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
            --radius: 12px;
            --radius-sm: 8px;
            --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--text-lighter); border-radius: 3px; }

        /* Animations */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        .fade-in { animation: fadeIn 0.4s ease-out; }
        .slide-up { animation: slideUp 0.5s ease-out; }
        .slide-in-right { animation: slideInRight 0.4s ease-out; }
        .scale-in { animation: scaleIn 0.3s ease-out; }

        /* App Container */
        .app { min-height: 100vh; display: flex; flex-direction: column; }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--bg-dark) 0%, #0f2240 100%);
            color: white;
            padding: 0 1.25rem;
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            backdrop-filter: blur(20px);
        }

        .header-content {
            max-width: 1200px; margin: 0 auto;
            height: 56px; display: flex; align-items: center; justify-content: space-between;
        }

        .header-brand {
            display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem;
            letter-spacing: -0.02em;
        }

        .header-brand i { color: var(--secondary-light); font-size: 1.3rem; }

        .header-brand span { background: linear-gradient(135deg, #fff 0%, var(--secondary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        .header-actions { display: flex; align-items: center; gap: 12px; }

        .header-btn {
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
            color: white; width: 36px; height: 36px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: var(--transition); position: relative;
        }

        .header-btn:hover { background: rgba(255,255,255,0.15); }

        .header-btn .badge {
            position: absolute; top: -4px; right: -4px;
            background: var(--danger); color: white; font-size: 0.6rem;
            width: 16px; height: 16px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 600;
        }

        /* Main Content */
        .main { flex: 1; padding-top: 56px; padding-bottom: 72px; }

        .page { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }

        /* Cards */
        .card {
            background: var(--bg-card); border-radius: var(--radius);
            box-shadow: var(--shadow); border: 1px solid var(--border);
            overflow: hidden; transition: var(--transition);
        }

        .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

        .card-header {
            padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
        }

        .card-title { font-weight: 600; font-size: 1rem; color: var(--text); }

        .card-body { padding: 1.25rem 1.5rem; }

        .card-footer {
            padding: 1rem 1.5rem; border-top: 1px solid var(--border);
            background: #fafbfc;
        }

        /* Balance Card */
        .balance-card {
            background: linear-gradient(135deg, var(--bg-dark) 0%, #0f2240 50%, var(--primary-dark) 100%);
            color: white; border-radius: var(--radius); padding: 1.75rem;
            position: relative; overflow: hidden; margin-bottom: 1.25rem;
            box-shadow: var(--shadow-lg);
        }

        .balance-card::before {
            content: ''; position: absolute; top: -50%; right: -20%;
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(201,162,39,0.15) 0%, transparent 70%);
            pointer-events: none;
        }

        .balance-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }

        .balance-amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; }

        .balance-currency { font-size: 0.95rem; font-weight: 500; opacity: 0.7; margin-left: 0.5rem; }

        .balance-actions { display: flex; gap: 10px; margin-top: 1.25rem; }

        .balance-stat { text-align: center; }

        .balance-stat-value { font-size: 0.95rem; font-weight: 700; }

        .balance-stat-label { font-size: 0.7rem; opacity: 0.5; text-transform: uppercase; }

        /* Trust Score Badge */
        .trust-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 20px; font-size: 0.8rem;
            font-weight: 600;
        }

        .trust-badge.excellent { background: rgba(22,163,74,0.12); color: #16a34a; }
        .trust-badge.good { background: rgba(37,99,235,0.12); color: #2563eb; }
        .trust-badge.average { background: rgba(245,158,11,0.12); color: #d97706; }
        .trust-badge.poor { background: rgba(220,38,38,0.12); color: #dc2626; }

        /* Buttons */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 0.65rem 1.25rem; border-radius: var(--radius-sm);
            font-weight: 600; font-size: 0.875rem; cursor: pointer;
            border: none; transition: var(--transition); font-family: inherit;
            white-space: nowrap;
        }

        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,95,74,0.3); }

        .btn-secondary { background: var(--secondary); color: #1e293b; }
        .btn-secondary:hover { background: var(--secondary-light); }

        .btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: rgba(26,95,74,0.04); }

        .btn-ghost { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.15); }
        .btn-ghost:hover { background: rgba(255,255,255,0.2); }

        .btn-danger { background: var(--danger); color: white; }
        .btn-sm { padding: 0.45rem 0.85rem; font-size: 0.8rem; }

        .btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }

        .btn-block { width: 100%; }

        /* Forms */
        .form-group { margin-bottom: 1.25rem; }

        .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; }

        .form-input {
            width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--border);
            border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit;
            color: var(--text); background: white; transition: var(--transition);
        }

        .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,95,74,0.1); }

        .form-input::placeholder { color: var(--text-lighter); }

        select.form-input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M3 5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2.5rem; }

        /* Grid */
        .grid { display: grid; gap: 1.25rem; }

        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }

        @media (max-width: 768px) {
            .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
            .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
        }

        /* Stats Grid */
        .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 1.25rem; }

        @media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

        .stat-card {
            background: var(--bg-card); border-radius: var(--radius-sm);
            padding: 1rem; border: 1px solid var(--border); text-align: center;
            transition: var(--transition);
        }

        .stat-card:hover { border-color: var(--primary-light); }

        .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 1.1rem; }

        .stat-icon.blue { background: rgba(37,99,235,0.1); color: var(--accent); }
        .stat-icon.green { background: rgba(22,163,74,0.1); color: var(--success); }
        .stat-icon.gold { background: rgba(201,162,39,0.1); color: var(--secondary); }
        .stat-icon.red { background: rgba(220,38,38,0.1); color: var(--danger); }

        .stat-value { font-size: 1.25rem; font-weight: 700; color: var(--text); }

        .stat-label { font-size: 0.7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

        /* Transaction List */
        .tx-list { display: flex; flex-direction: column; gap: 0; }

        .tx-item {
            display: flex; align-items: center; gap: 12px; padding: 1rem 0;
            border-bottom: 1px solid var(--border); transition: var(--transition);
        }

        .tx-item:last-child { border-bottom: none; }

        .tx-item:hover { padding-left: 4px; }

        .tx-icon {
            width: 42px; height: 42px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem; flex-shrink: 0;
        }

        .tx-icon.in { background: rgba(22,163,74,0.1); color: var(--success); }
        .tx-icon.out { background: rgba(220,38,38,0.1); color: var(--danger); }
        .tx-icon.contribution { background: rgba(37,99,235,0.1); color: var(--accent); }
        .tx-icon.loan { background: rgba(201,162,39,0.1); color: var(--secondary); }

        .tx-details { flex: 1; min-width: 0; }

        .tx-title { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .tx-meta { font-size: 0.75rem; color: var(--text-light); margin-top: 1px; }

        .tx-amount { text-align: right; flex-shrink: 0; }

        .tx-amount-value { font-weight: 700; font-size: 0.9rem; }

        .tx-amount-value.positive { color: var(--success); }
        .tx-amount-value.negative { color: var(--danger); }

        .tx-status { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; font-weight: 500; }

        .tx-status.completed { background: rgba(22,163,74,0.1); color: var(--success); }
        .tx-status.pending { background: rgba(245,158,11,0.1); color: var(--warning); }
        .tx-status.failed { background: rgba(220,38,38,0.1); color: var(--danger); }

        /* Tontine Card */
        .tontine-card { 
            background: var(--bg-card); border-radius: var(--radius); 
            border: 1px solid var(--border); padding: 1.25rem; 
            transition: var(--transition); cursor: pointer; 
        }

        .tontine-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

        .tontine-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; }

        .tontine-name { font-weight: 700; font-size: 1rem; color: var(--text); }

        .tontine-code { font-size: 0.75rem; color: var(--text-lighter); font-family: monospace; background: var(--bg); padding: 2px 8px; border-radius: 4px; }

        .tontine-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0.75rem; }

        .tontine-stat { text-align: center; padding: 8px; background: var(--bg); border-radius: var(--radius-sm); }

        .tontine-stat-value { font-weight: 700; font-size: 0.85rem; color: var(--text); }

        .tontine-stat-label { font-size: 0.65rem; color: var(--text-light); text-transform: uppercase; }

        .tontine-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }

        .tontine-status.active { background: rgba(22,163,74,0.12); color: var(--success); }
        .tontine-status.pending { background: rgba(245,158,11,0.12); color: var(--warning); }
        .tontine-status.suspended { background: rgba(220,38,38,0.12); color: var(--danger); }

        /* Progress Ring */
        .progress-ring { position: relative; width: 80px; height: 80px; }

        .progress-ring svg { transform: rotate(-90deg); }

        .progress-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }

        .progress-ring-fill { fill: none; stroke: var(--primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }

        .progress-ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.1rem; color: var(--text); }

        /* Navigation Bottom */
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
            border-top: 1px solid var(--border); z-index: 100;
            display: flex; justify-content: space-around; padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        }

        .nav-item {
            display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 6px 12px; color: var(--text-lighter); text-decoration: none;
            font-size: 0.65rem; font-weight: 500; transition: var(--transition);
            cursor: pointer; border: none; background: none; flex: 1;
        }

        .nav-item i { font-size: 1.25rem; transition: var(--transition); }

        .nav-item.active { color: var(--primary); }

        .nav-item.active i { transform: translateY(-2px); }

        .nav-item:hover { color: var(--primary); }

        /* Bottom Sheet */
        .sheet-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            z-index: 200; opacity: 0; visibility: hidden;
            transition: all 0.3s ease;
        }

        .sheet-overlay.active { opacity: 1; visibility: visible; }

        .sheet {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: white; border-radius: 20px 20px 0 0;
            padding: 1.5rem; z-index: 201;
            transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 85vh; overflow-y: auto;
        }

        .sheet.active { transform: translateY(0); }

        .sheet-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 1.25rem; }

        /* Modal */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.6);
            z-index: 200; display: flex; align-items: center; justify-content: center;
            padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s ease;
        }

        .modal-overlay.active { opacity: 1; visibility: visible; }

        .modal {
            background: white; border-radius: var(--radius);
            max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0,0,0,0.25); transform: scale(0.95);
            transition: transform 0.3s ease;
        }

        .modal-overlay.active .modal { transform: scale(1); }

        .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

        .modal-title { font-weight: 700; font-size: 1.1rem; }

        .modal-close { background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 1.25rem; padding: 4px; }

        .modal-body { padding: 1.5rem; }

        /* Loan Card */
        .loan-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: 1.25rem; margin-bottom: 0.75rem; }

        .loan-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

        .loan-amount { font-weight: 800; font-size: 1.1rem; color: var(--text); }

        .loan-status { padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }

        .loan-status.pending { background: rgba(245,158,11,0.12); color: var(--warning); }
        .loan-status.approved { background: rgba(37,99,235,0.12); color: var(--accent); }
        .loan-status.active { background: rgba(22,163,74,0.12); color: var(--success); }
        .loan-status.repaid { background: rgba(22,163,74,0.12); color: var(--success); }
        .loan-status.defaulted { background: rgba(220,38,38,0.12); color: var(--danger); }
        .loan-status.late { background: rgba(220,38,38,0.08); color: var(--danger); }

        .loan-progress { margin-top: 0.75rem; }

        .progress-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }

        .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 3px; transition: width 0.5s ease; }

        /* Auth Pages */
        .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(135deg, var(--bg-dark) 0%, #0f2240 100%); }

        .auth-card { background: white; border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }

        .auth-logo { text-align: center; margin-bottom: 1.5rem; }

        .auth-logo i { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; }

        .auth-logo h1 { font-size: 1.5rem; font-weight: 800; color: var(--text); }

        .auth-logo p { font-size: 0.85rem; color: var(--text-light); margin-top: 0.25rem; }

        .auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-light); }

        .auth-footer a { color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; }

        /* Skeleton Loading */
        .skeleton { background: linear-gradient(90deg, var(--border) 25%, #e8ecf1 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }

        .skeleton-text { height: 14px; margin-bottom: 8px; }

        .skeleton-title { height: 20px; width: 60%; margin-bottom: 12px; }

        .skeleton-avatar { width: 42px; height: 42px; border-radius: 50%; }

        /* Toast */
        .toast-container { position: fixed; top: 70px; right: 1rem; z-index: 300; display: flex; flex-direction: column; gap: 8px; }

        .toast {
            background: white; border-radius: var(--radius-sm); padding: 1rem 1.25rem;
            box-shadow: var(--shadow-lg); border-left: 4px solid var(--primary);
            display: flex; align-items: center; gap: 10px; min-width: 280px;
            animation: slideInRight 0.3s ease; font-size: 0.875rem;
        }

        .toast.success { border-left-color: var(--success); }
        .toast.error { border-left-color: var(--danger); }
        .toast.warning { border-left-color: var(--warning); }

        /* Tabs */
        .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }

        .tab { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.85rem; color: var(--text-light); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: var(--transition); }

        .tab.active { color: var(--primary); border-bottom-color: var(--primary); }

        .tab:hover { color: var(--text); }

        /* Trust Score Ring */
        .trust-ring-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; }

        .trust-score-value { font-size: 2.5rem; font-weight: 800; }

        .trust-score-value.excellent { color: var(--success); }
        .trust-score-value.good { color: var(--accent); }
        .trust-score-value.average { color: var(--warning); }
        .trust-score-value.poor { color: var(--danger); }

        /* Admin Dashboard */
        .admin-header { background: var(--bg-dark); color: white; padding: 1rem 1.25rem; }

        .admin-grid { display: grid; gap: 1rem; }

        @media (min-width: 768px) { .admin-grid { grid-template-columns: repeat(2, 1fr); } }

        @media (min-width: 1024px) { .admin-grid { grid-template-columns: repeat(3, 1fr); } }

        .admin-card { background: var(--bg-card); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); }

        .admin-metric { font-size: 1.75rem; font-weight: 800; color: var(--text); }

        .admin-metric-label { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }

        /* Table */
        .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        .table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

        .table th { text-align: left; padding: 0.75rem; font-weight: 600; color: var(--text-light); border-bottom: 2px solid var(--border); white-space: nowrap; }

        .table td { padding: 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); }

        .table tr:hover td { background: rgba(26,95,74,0.02); }

        /* Risk Level */
        .risk-level { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }

        .risk-level.low { background: rgba(22,163,74,0.12); color: var(--success); }
        .risk-level.medium { background: rgba(245,158,11,0.12); color: #d97706; }
        .risk-level.high { background: rgba(220,38,38,0.12); color: var(--danger); }
        .risk-level.critical { background: rgba(220,38,38,0.2); color: #991b1b; }

        /* AI Badge */
        .ai-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }

        .ai-badge i { font-size: 0.6rem; }

        /* Empty State */
        .empty-state { text-align: center; padding: 3rem 1rem; }

        .empty-state i { font-size: 3rem; color: var(--border); margin-bottom: 1rem; }

        .empty-state h3 { font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }

        .empty-state p { color: var(--text-light); font-size: 0.875rem; }

        /* Responsive */
        @media (min-width: 769px) {
            .main { padding-bottom: 1rem; }
            .bottom-nav { display: none; }
            .page { padding: 2rem; }
            .header-content { height: 64px; }
            .main { padding-top: 64px; }
        }

        @media (max-width: 768px) {
            .header-brand span { display: none; }
            .page { padding: 1rem; }
            .balance-amount { font-size: 1.8rem; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }

        /* Section Title */
        .section-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; color: var(--text); }

        .section-subtitle { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1.25rem; }

        /* Quick Actions */
        .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.25rem; }

        .quick-action { 
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 1rem 0.5rem; background: var(--bg-card); border: 1px solid var(--border);
            border-radius: var(--radius); cursor: pointer; transition: var(--transition);
            text-decoration: none; color: var(--text);
        }

        .quick-action:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow); }

        .quick-action i { font-size: 1.25rem; color: var(--primary); }

        .quick-action span { font-size: 0.7rem; font-weight: 600; text-align: center; }

        @media (max-width: 380px) { .quick-actions { grid-template-columns: repeat(2, 1fr); } }

        /* Loading Spinner */
        .spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

        .loading-container { display: flex; align-items: center; justify-content: center; padding: 3rem; }

        /* Chart placeholder */
        .chart-placeholder { height: 200px; background: var(--bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-lighter); font-size: 0.85rem; }
    </style>
</head>
<body>
    <div id="app" class="app">
        <!-- Dynamic content loaded by JavaScript -->
    </div>

    <script>
        // ============================================
        // CCFTA SPA - Application JavaScript
        // ============================================
        
        const API_BASE = window.location.origin + '/api/v1';
        
        // State
        let state = {
            user: null,
            token: localStorage.getItem('ccfta_token'),
            refreshToken: localStorage.getItem('ccfta_refresh'),
            currentPage: 'dashboard',
            tontines: [],
            transactions: [],
            loans: [],
            notifications: [],
            dashboard: null
        };

        // Router
        function navigate(page) {
            state.currentPage = page;
            render();
        }

        // API Helper
        async function api(endpoint, options = {}) {
            const url = `${API_BASE}/${endpoint}`;
            const headers = {
                'Content-Type': 'application/json',
                ...options.headers
            };
            
            if (state.token) {
                headers['Authorization'] = `Bearer ${state.token}`;
            }
            
            try {
                const response = await fetch(url, {
                    ...options,
                    headers
                });
                
                const data = await response.json();
                
                if (response.status === 401) {
                    localStorage.removeItem('ccfta_token');
                    state.token = null;
                    state.user = null;
                    navigate('login');
                    return null;
                }
                
                return data;
            } catch (error) {
                console.error('API Error:', error);
                showToast('Erreur de connexion', 'error');
                return null;
            }
        }

        // Auth
        async function login(email, password) {
            const data = await api('auth/login', {
                method: 'POST',
                body: JSON.stringify({ email, password })
            });
            
            if (data?.success) {
                state.token = data.data.token;
                state.refreshToken = data.data.refresh_token;
                state.user = data.data.user;
                localStorage.setItem('ccfta_token', state.token);
                localStorage.setItem('ccfta_refresh', state.refreshToken);
                showToast('Connexion reussie', 'success');
                navigate('dashboard');
            } else {
                showToast(data?.message || 'Erreur de connexion', 'error');
            }
        }

        async function register(userData) {
            const data = await api('auth/register', {
                method: 'POST',
                body: JSON.stringify(userData)
            });
            
            if (data?.success) {
                state.token = data.data.token;
                state.user = data.data.user;
                localStorage.setItem('ccfta_token', state.token);
                showToast('Inscription reussie', 'success');
                navigate('dashboard');
            } else {
                showToast(data?.message || 'Erreur', 'error');
            }
        }

        function logout() {
            state.token = null;
            state.user = null;
            state.dashboard = null;
            localStorage.removeItem('ccfta_token');
            localStorage.removeItem('ccfta_refresh');
            navigate('login');
            showToast('Deconnecte', 'success');
        }

        async function loadDashboard() {
            const data = await api('dashboard');
            if (data?.success) {
                state.dashboard = data.data;
            }
        }

        async function loadTontines() {
            const data = await api('tontines');
            if (data?.success) {
                state.tontines = data.data.tontines;
            }
        }

        async function loadTransactions() {
            const data = await api('transactions');
            if (data?.success) {
                state.transactions = data.data.transactions;
            }
        }

        async function loadLoans() {
            const data = await api('loans?mine=1');
            if (data?.success) {
                state.loans = data.data.loans;
            }
        }

        // Toast notification
        function showToast(message, type = 'info') {
            const container = document.getElementById('toast-container') || createToastContainer();
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            
            const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', warning: 'fa-exclamation-triangle', info: 'fa-info-circle' };
            toast.innerHTML = `<i class="fas ${icons[type]}"></i> ${message}`;
            
            container.appendChild(toast);
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transform = 'translateX(100%)';
                setTimeout(() => toast.remove(), 300);
            }, 4000);
        }

        function createToastContainer() {
            const container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'toast-container';
            document.body.appendChild(container);
            return container;
        }

        // Format currency
        function formatFCFA(amount) {
            return new Intl.NumberFormat('fr-FR').format(amount) + ' FCFA';
        }

        function formatDate(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
        }

        // Render functions
        function render() {
            const app = document.getElementById('app');
            
            if (!state.token && state.currentPage !== 'login' && state.currentPage !== 'register') {
                state.currentPage = 'login';
            }
            
            switch (state.currentPage) {
                case 'login':
                    app.innerHTML = renderLogin();
                    attachLoginListeners();
                    break;
                case 'register':
                    app.innerHTML = renderRegister();
                    attachRegisterListeners();
                    break;
                case 'dashboard':
                    if (!state.dashboard) loadDashboard();
                    app.innerHTML = renderHeader() + renderDashboardPage() + renderBottomNav();
                    break;
                case 'tontines':
                    if (state.tontines.length === 0) loadTontines();
                    app.innerHTML = renderHeader() + renderTontinesPage() + renderBottomNav();
                    break;
                case 'wallet':
                    if (!state.dashboard) loadDashboard();
                    app.innerHTML = renderHeader() + renderWalletPage() + renderBottomNav();
                    break;
                case 'loans':
                    if (state.loans.length === 0) loadLoans();
                    app.innerHTML = renderHeader() + renderLoansPage() + renderBottomNav();
                    break;
                case 'trust':
                    app.innerHTML = renderHeader() + renderTrustPage() + renderBottomNav();
                    break;
                case 'profile':
                    app.innerHTML = renderHeader() + renderProfilePage() + renderBottomNav();
                    break;
                case 'admin':
                    app.innerHTML = renderHeader() + renderAdminPage() + renderBottomNav();
                    break;
                default:
                    navigate('dashboard');
            }
        }

        function renderHeader() {
            const unreadCount = state.dashboard?.notifications?.unread || 0;
            return `
                <header class="header">
                    <div class="header-content">
                        <div class="header-brand">
                            <i class="fas fa-shield-halved"></i>
                            <span>CCFTA</span>
                        </div>
                        <div class="header-actions">
                            <button class="header-btn" onclick="showNotifications()">
                                <i class="fas fa-bell"></i>
                                ${unreadCount > 0 ? `<span class="badge">${unreadCount}</span>` : ''}
                            </button>
                            <button class="header-btn" onclick="navigate('profile')">
                                <i class="fas fa-user"></i>
                            </button>
                        </div>
                    </div>
                </header>
            `;
        }

        function renderBottomNav() {
            const items = [
                { page: 'dashboard', icon: 'fa-home', label: 'Accueil' },
                { page: 'tontines', icon: 'fa-users', label: 'Tontines' },
                { page: 'wallet', icon: 'fa-wallet', label: 'Wallet' },
                { page: 'loans', icon: 'fa-hand-holding-dollar', label: 'Prets' },
                { page: 'trust', icon: 'fa-shield-halved', label: 'Trust' }
            ];
            
            if (state.user?.role === 'super_admin') {
                items.push({ page: 'admin', icon: 'fa-gear', label: 'Admin' });
            }
            
            return `
                <nav class="bottom-nav">
                    ${items.map(item => `
                        <button class="nav-item ${state.currentPage === item.page ? 'active' : ''}" onclick="navigate('${item.page}')">
                            <i class="fas ${item.icon}"></i>
                            <span>${item.label}</span>
                        </button>
                    `).join('')}
                </nav>
            `;
        }

        // Login Page
        function renderLogin() {
            return `
                <div class="auth-page">
                    <div class="auth-card slide-up">
                        <div class="auth-logo">
                            <i class="fas fa-shield-halved"></i>
                            <h1>CCFTA</h1>
                            <p>Community Credit & Financial Trust Alliance</p>
                        </div>
                        <form id="login-form">
                            <div class="form-group">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-input" name="email" placeholder="votre@email.com" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Mot de passe</label>
                                <input type="password" class="form-input" name="password" placeholder="••••••••" required minlength="6">
                            </div>
                            <button type="submit" class="btn btn-primary btn-block btn-lg" style="margin-top: 0.5rem;">
                                <i class="fas fa-sign-in-alt"></i> Connexion
                            </button>
                        </form>
                        <div class="auth-footer">
                            Pas encore de compte ? <a onclick="navigate('register')">S'inscrire</a>
                        </div>
                    </div>
                </div>
            `;
        }

        function attachLoginListeners() {
            document.getElementById('login-form')?.addEventListener('submit', (e) => {
                e.preventDefault();
                const form = e.target;
                login(form.email.value, form.password.value);
            });
        }

        // Register Page
        function renderRegister() {
            return `
                <div class="auth-page">
                    <div class="auth-card slide-up">
                        <div class="auth-logo">
                            <i class="fas fa-shield-halved"></i>
                            <h1>CCFTA</h1>
                            <p>Rejoignez l'alliance financiere communautaire</p>
                        </div>
                        <form id="register-form">
                            <div class="form-group">
                                <label class="form-label">Prenom</label>
                                <input type="text" class="form-input" name="first_name" placeholder="Jean" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Nom</label>
                                <input type="text" class="form-input" name="last_name" placeholder="Dupont" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-input" name="email" placeholder="jean@email.com" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Telephone</label>
                                <input type="tel" class="form-input" name="phone" placeholder="+237XXXXXXXX" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Mot de passe</label>
                                <input type="password" class="form-input" name="password" placeholder="Min. 8 caracteres" required minlength="8">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Code PIN</label>
                                <input type="password" class="form-input" name="pin" placeholder="4-6 chiffres" required minlength="4" maxlength="6">
                            </div>
                            <button type="submit" class="btn btn-primary btn-block btn-lg" style="margin-top: 0.5rem;">
                                <i class="fas fa-user-plus"></i> Creer mon compte
                            </button>
                        </form>
                        <div class="auth-footer">
                            Deja un compte ? <a onclick="navigate('login')">Se connecter</a>
                        </div>
                    </div>
                </div>
            `;
        }

        function attachRegisterListeners() {
            document.getElementById('register-form')?.addEventListener('submit', (e) => {
                e.preventDefault();
                const form = e.target;
                register({
                    first_name: form.first_name.value,
                    last_name: form.last_name.value,
                    email: form.email.value,
                    phone: form.phone.value,
                    password: form.password.value,
                    pin: form.pin.value,
                    consent_level: 1
                });
            });
        }

        // Dashboard Page
        function renderDashboardPage() {
            const d = state.dashboard;
            if (!d) {
                return `<div class="main"><div class="loading-container"><div class="spinner"></div></div></div>`;
            }
            
            return `
                <main class="main">
                    <div class="page fade-in">
                        <!-- Balance Card -->
                        <div class="balance-card">
                            <div class="balance-label">Solde disponible</div>
                            <div class="balance-amount">
                                ${formatFCFA(d.wallet?.balance || 0)}
                                <span class="balance-currency">XAF</span>
                            </div>
                            <div style="display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap;">
                                <div class="balance-stat">
                                    <div class="balance-stat-value">${formatFCFA(d.wallet?.locked || 0)}</div>
                                    <div class="balance-stat-label">Verrouille</div>
                                </div>
                                <div class="balance-stat">
                                    <div class="balance-stat-value">${formatFCFA(d.activity?.inflow_30d || 0)}</div>
                                    <div class="balance-stat-label">Entrees 30j</div>
                                </div>
                                <div class="balance-stat">
                                    <div class="balance-stat-value">${formatFCFA(d.activity?.outflow_30d || 0)}</div>
                                    <div class="balance-stat-label">Sorties 30j</div>
                                </div>
                            </div>
                            <div class="balance-actions">
                                <button class="btn btn-ghost btn-sm" onclick="openTransferSheet()">
                                    <i class="fas fa-paper-plane"></i> Transfert
                                </button>
                                <button class="btn btn-ghost btn-sm" onclick="navigate('wallet')">
                                    <i class="fas fa-plus"></i> Depot
                                </button>
                            </div>
                        </div>

                        <!-- Quick Actions -->
                        <div class="quick-actions">
                            <div class="quick-action" onclick="navigate('tontines')">
                                <i class="fas fa-users"></i>
                                <span>Tontines</span>
                            </div>
                            <div class="quick-action" onclick="navigate('loans')">
                                <i class="fas fa-hand-holding-dollar"></i>
                                <span>Emprunter</span>
                            </div>
                            <div class="quick-action" onclick="openTransferSheet()">
                                <i class="fas fa-paper-plane"></i>
                                <span>Transferer</span>
                            </div>
                            <div class="quick-action" onclick="navigate('trust')">
                                <i class="fas fa-shield-halved"></i>
                                <span>Trust Score</span>
                            </div>
                        </div>

                        <!-- Trust Score Mini -->
                        <div class="card" style="margin-bottom: 1.25rem;">
                            <div class="card-body" style="display: flex; align-items: center; justify-content: space-between;">
                                <div>
                                    <div style="font-size: 0.8rem; color: var(--text-light); margin-bottom: 4px;">Trust Score</div>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <span style="font-size: 1.5rem; font-weight: 800; color: ${getScoreColor(d.trust_score?.score || 0)};">${d.trust_score?.score || 50}</span>
                                        <span class="trust-badge ${d.trust_score?.status || 'average'}">${d.trust_score?.status || 'average'}</span>
                                    </div>
                                    <div style="font-size: 0.75rem; color: var(--text-light); margin-top: 4px;">
                                        ${d.trust_score?.can_borrow ? '<i class="fas fa-check-circle" style="color: var(--success);"></i> Eligible au pret' : '<i class="fas fa-times-circle" style="color: var(--danger);"></i> Non eligible'}
                                    </div>
                                </div>
                                <div class="progress-ring" style="width: 70px; height: 70px;">
                                    <svg width="70" height="70">
                                        <circle class="progress-ring-bg" cx="35" cy="35" r="30"/>
                                        <circle class="progress-ring-fill" cx="35" cy="35" r="30"
                                            stroke-dasharray="${2 * Math.PI * 30}"
                                            stroke-dashoffset="${2 * Math.PI * 30 * (1 - (d.trust_score?.score || 50) / 100)}"/>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <!-- Stats -->
                        <div class="stats-grid" style="margin-bottom: 1.25rem;">
                            <div class="stat-card">
                                <div class="stat-icon blue"><i class="fas fa-users"></i></div>
                                <div class="stat-value">${d.tontines?.count || 0}</div>
                                <div class="stat-label">Tontines</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon green"><i class="fas fa-hand-holding-dollar"></i></div>
                                <div class="stat-value">${d.loans?.active_count || 0}</div>
                                <div class="stat-label">Prets actifs</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon gold"><i class="fas fa-chart-line"></i></div>
                                <div class="stat-value">${d.trust_score?.score || 50}</div>
                                <div class="stat-label">Trust Score</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon red"><i class="fas fa-clock"></i></div>
                                <div class="stat-value">${d.notifications?.unread || 0}</div>
                                <div class="stat-label">Alertes</div>
                            </div>
                        </div>

                        <!-- Recent Transactions -->
                        <div class="card">
                            <div class="card-header">
                                <span class="card-title"><i class="fas fa-list-ul" style="color: var(--primary); margin-right: 8px;"></i>Transactions recentes</span>
                                <button class="btn btn-sm btn-outline" onclick="navigate('wallet')">Voir tout</button>
                            </div>
                            <div class="card-body" style="padding: 0 1.5rem;">
                                ${d.transactions?.data?.length ? renderTxList(d.transactions.data.slice(0, 5)) : renderEmptyState('Aucune transaction')}
                            </div>
                        </div>
                    </div>
                </main>
            `;
        }

        function renderTxList(transactions) {
            const typeIcons = {
                'p2p_transfer': { icon: 'fa-exchange-alt', class: 'out' },
                'tontine_contribution': { icon: 'fa-users', class: 'contribution' },
                'tontine_payout': { icon: 'fa-gift', class: 'in' },
                'microcredit': { icon: 'fa-hand-holding-dollar', class: 'loan' },
                'repayment': { icon: 'fa-undo', class: 'out' },
                'deposit': { icon: 'fa-arrow-down', class: 'in' },
                'withdrawal': { icon: 'fa-arrow-up', class: 'out' }
            };
            
            return `<div class="tx-list">
                ${transactions.map(tx => {
                    const ti = typeIcons[tx.type] || { icon: 'fa-circle', class: 'out' };
                    const isIncoming = tx.to_user_id == (state.user?.id || state.dashboard?.user?.id);
                    const amount = isIncoming ? tx.amount : -tx.amount;
                    
                    return `
                        <div class="tx-item">
                            <div class="tx-icon ${isIncoming ? 'in' : 'out'}">
                                <i class="fas ${ti.icon}"></i>
                            </div>
                            <div class="tx-details">
                                <div class="tx-title">${tx.description || tx.type}</div>
                                <div class="tx-meta">${formatDate(tx.created_at)} · ${tx.reference?.slice(0, 15) || ''}</div>
                            </div>
                            <div class="tx-amount">
                                <div class="tx-amount-value ${amount >= 0 ? 'positive' : 'negative'}">${amount >= 0 ? '+' : ''}${formatFCFA(Math.abs(amount))}</div>
                                <div class="tx-status ${tx.status}">${tx.status}</div>
                            </div>
                        </div>
                    `;
                }).join('')}
            </div>`;
        }

        function renderEmptyState(message) {
            return `
                <div class="empty-state">
                    <i class="fas fa-inbox"></i>
                    <h3>${message}</h3>
                    <p>Aucune donnee disponible pour le moment</p>
                </div>
            `;
        }

        function getScoreColor(score) {
            if (score >= 85) return '#16a34a';
            if (score >= 70) return '#2563eb';
            if (score >= 50) return '#d97706';
            return '#dc2626';
        }

        // Tontines Page
        function renderTontinesPage() {
            return `
                <main class="main">
                    <div class="page fade-in">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;">
                            <h2 class="section-title" style="margin-bottom: 0;">Mes Tontines</h2>
                            <button class="btn btn-primary btn-sm" onclick="openCreateTontineModal()">
                                <i class="fas fa-plus"></i> Creer
                            </button>
                        </div>
                        
                        <div class="grid grid-2">
                            ${state.tontines.length ? state.tontines.map(t => `
                                <div class="tontine-card" onclick="showTontineDetail('${t.uuid}')">
                                    <div class="tontine-header">
                                        <div>
                                            <div class="tontine-name">${t.name}</div>
                                            <div class="tontine-code">${t.code}</div>
                                        </div>
                                        <span class="tontine-status ${t.status}">${t.status}</span>
                                    </div>
                                    <div style="font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.5rem;">
                                        <i class="fas fa-coins" style="color: var(--secondary);"></i> ${formatFCFA(t.contribution_amount)} / ${t.frequency}
                                    </div>
                                    <div class="tontine-stats">
                                        <div class="tontine-stat">
                                            <div class="tontine-stat-value">${t.member_count || 0}/${t.max_members}</div>
                                            <div class="tontine-stat-label">Membres</div>
                                        </div>
                                        <div class="tontine-stat">
                                            <div class="tontine-stat-value">${t.current_cycle}/${t.total_cycles}</div>
                                            <div class="tontine-stat-label">Cycles</div>
                                        </div>
                                        <div class="tontine-stat">
                                            <div class="tontine-stat-value">${t.allow_loans ? 'Oui' : 'Non'}</div>
                                            <div class="tontine-stat-label">Prets</div>
                                        </div>
                                    </div>
                                </div>
                            `).join('') : renderEmptyState('Aucune tontine')}
                        </div>
                    </div>
                </main>
            `;
        }

        // Wallet Page
        function renderWalletPage() {
            const d = state.dashboard;
            return `
                <main class="main">
                    <div class="page fade-in">
                        <h2 class="section-title">Mon Wallet</h2>
                        
                        <div class="balance-card" style="margin-bottom: 1.25rem;">
                            <div class="balance-label">Solde total</div>
                            <div class="balance-amount">
                                ${formatFCFA(d?.wallet?.balance || 0)}
                                <span class="balance-currency">XAF</span>
                            </div>
                            <div style="display: flex; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap;">
                                <button class="btn btn-ghost" onclick="openDepositSheet()">
                                    <i class="fas fa-plus"></i> Depot
                                </button>
                                <button class="btn btn-ghost" onclick="openWithdrawSheet()">
                                    <i class="fas fa-minus"></i> Retrait
                                </button>
                                <button class="btn btn-ghost" onclick="openTransferSheet()">
                                    <i class="fas fa-paper-plane"></i> Transfert
                                </button>
                            </div>
                        </div>

                        <!-- Recent Transactions -->
                        <div class="card">
                            <div class="card-header">
                                <span class="card-title">Historique</span>
                            </div>
                            <div class="card-body" style="padding: 0 1.5rem;">
                                ${d?.transactions?.data?.length ? renderTxList(d.transactions.data) : renderEmptyState('Aucune transaction')}
                            </div>
                        </div>
                    </div>
                </main>
            `;
        }

        // Loans Page
        function renderLoansPage() {
            const statusLabels = {
                pending: 'En attente', approved: 'Approuve', disbursed: 'Decaisse',
                active: 'Actif', repaid: 'Rembourse', defaulted: 'Defaut', late: 'Retard'
            };
            
            return `
                <main class="main">
                    <div class="page fade-in">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;">
                            <h2 class="section-title" style="margin-bottom: 0;">Mes Prets</h2>
                            <button class="btn btn-primary btn-sm" onclick="openLoanRequestSheet()">
                                <i class="fas fa-plus"></i> Demander
                            </button>
                        </div>

                        <div class="tabs">
                            <button class="tab active" onclick="filterLoans('all', this)">Tous</button>
                            <button class="tab" onclick="filterLoans('active', this)">Actifs</button>
                            <button class="tab" onclick="filterLoans('pending', this)">En attente</button>
                            <button class="tab" onclick="filterLoans('repaid', this)">Rembourses</button>
                        </div>
                        
                        ${state.loans.length ? state.loans.map(l => `
                            <div class="loan-card">
                                <div class="loan-header">
                                    <span class="loan-amount">${formatFCFA(l.amount)}</span>
                                    <span class="loan-status ${l.status}">${statusLabels[l.status] || l.status}</span>
                                </div>
                                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 0.8rem; color: var(--text-light);">
                                    <div><i class="fas fa-percentage"></i> ${l.interest_rate}%</div>
                                    <div><i class="fas fa-calendar"></i> ${l.duration_days}j</div>
                                    <div><i class="fas fa-undo"></i> ${formatFCFA(l.total_repayable)}</div>
                                </div>
                                ${l.status === 'active' || l.status === 'late' ? `
                                    <div class="loan-progress">
                                        <div style="display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 4px;">
                                            <span>Rembourse</span>
                                            <span>${Math.round((l.amount_repaid / l.total_repayable) * 100)}%</span>
                                        </div>
                                        <div class="progress-bar">
                                            <div class="progress-bar-fill" style="width: ${(l.amount_repaid / l.total_repayable) * 100}%"></div>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary btn-sm btn-block" style="margin-top: 0.75rem;" onclick="repayLoan('${l.uuid}')">
                                        <i class="fas fa-undo"></i> Rembourser
                                    </button>
                                ` : ''}
                                ${l.ai_recommendation ? `
                                    <div style="margin-top: 0.5rem;">
                                        <span class="ai-badge"><i class="fas fa-robot"></i> IA: ${l.ai_recommendation}</span>
                                    </div>
                                ` : ''}
                            </div>
                        `).join('') : renderEmptyState('Aucun pret')}
                    </div>
                </main>
            `;
        }

        // Trust Score Page
        function renderTrustPage() {
            const d = state.dashboard;
            const score = d?.trust_score?.score || 50;
            const components = d?.trust_score?.components || {};
            
            return `
                <main class="main">
                    <div class="page fade-in">
                        <h2 class="section-title">Trust Score</h2>
                        <p class="section-subtitle">Votre reputation financiere communautaire</p>
                        
                        <!-- Score Card -->
                        <div class="card" style="margin-bottom: 1.25rem;">
                            <div class="trust-ring-container">
                                <div class="progress-ring" style="width: 120px; height: 120px;">
                                    <svg width="120" height="120">
                                        <circle class="progress-ring-bg" cx="60" cy="60" r="52" stroke-width="8"/>
                                        <circle class="progress-ring-fill" cx="60" cy="60" r="52" stroke-width="8"
                                            stroke="${getScoreColor(score)}"
                                            stroke-dasharray="${2 * Math.PI * 52}"
                                            stroke-dashoffset="${2 * Math.PI * 52 * (1 - score / 100)}"/>
                                    </svg>
                                    <div class="progress-ring-text" style="font-size: 1.75rem;">${score}</div>
                                </div>
                                <div style="text-align: center;">
                                    <span class="trust-badge ${d?.trust_score?.status || 'average'}">${d?.trust_score?.status || 'average'}</span>
                                    <div style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
                                        ${d?.trust_score?.can_borrow ? '<i class="fas fa-check-circle" style="color: var(--success);"></i> Eligible aux prets' : '<i class="fas fa-times-circle" style="color: var(--danger);"></i> Non eligible aux prets'}
                                    </div>
                                    <div style="margin-top: 0.25rem; font-size: 0.8rem; color: var(--text-lighter);">
                                        Prob. remboursement: ${d?.trust_score?.repayment_probability || 50}%
                                    </div>
                                </div>
                                <button class="btn btn-outline btn-sm" onclick="recalculateScore()">
                                    <i class="fas fa-sync-alt"></i> Recalculer
                                </button>
                            </div>
                        </div>

                        <!-- Components -->
                        <div class="card">
                            <div class="card-header">
                                <span class="card-title">Composantes du Score</span>
                            </div>
                            <div class="card-body">
                                ${Object.entries(components).map(([key, value]) => `
                                    <div style="margin-bottom: 1rem;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
                                            <span style="font-size: 0.85rem; text-transform: capitalize;">${key.replace(/_/g, ' ')}</span>
                                            <span style="font-weight: 600; font-size: 0.85rem;">${value}/100</span>
                                        </div>
                                        <div class="progress-bar">
                                            <div class="progress-bar-fill" style="width: ${value}%; opacity: ${value > 50 ? 1 : 0.6};"></div>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                </main>
            `;
        }

        // Profile Page
        function renderProfilePage() {
            const u = state.user || state.dashboard?.user;
            if (!u) return `<div class="main"><div class="loading-container"><div class="spinner"></div></div></div>`;
            
            return `
                <main class="main">
                    <div class="page fade-in">
                        <h2 class="section-title">Profil</h2>
                        
                        <div class="card" style="text-align: center; padding: 2rem; margin-bottom: 1.25rem;">
                            <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; font-weight: 700;">
                                ${u.first_name?.[0]}${u.last_name?.[0]}
                            </div>
                            <h3 style="font-weight: 700;">${u.first_name} ${u.last_name}</h3>
                            <p style="color: var(--text-light); font-size: 0.85rem;">${u.email}</p>
                            <div style="margin-top: 0.5rem;">
                                <span class="trust-badge ${u.kyc_status === 'verified' ? 'good' : 'average'}">
                                    <i class="fas ${u.kyc_status === 'verified' ? 'fa-check' : 'fa-clock'}"></i> KYC: ${u.kyc_status}
                                </span>
                            </div>
                        </div>

                        <div class="card" style="margin-bottom: 1.25rem;">
                            <div class="card-body" style="padding: 0;">
                                <div style="padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
                                    <span><i class="fas fa-phone" style="width: 24px; color: var(--primary);"></i> ${u.phone || '-'}</span>
                                </div>
                                <div style="padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
                                    <span><i class="fas fa-shield-halved" style="width: 24px; color: var(--primary);"></i> Consentement Niveau ${u.consent_level || 1}</span>
                                </div>
                                <div style="padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
                                    <span><i class="fas fa-user-tag" style="width: 24px; color: var(--primary);"></i> Role: ${u.role}</span>
                                </div>
                                <div style="padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between;">
                                    <span><i class="fas fa-calendar" style="width: 24px; color: var(--primary);"></i> Inscrit le ${formatDate(u.created_at)}</span>
                                </div>
                            </div>
                        </div>

                        <button class="btn btn-danger btn-block" onclick="logout()">
                            <i class="fas fa-sign-out-alt"></i> Deconnexion
                        </button>
                    </div>
                </main>
            `;
        }

        // Admin Page
        function renderAdminPage() {
            if (state.user?.role !== 'super_admin') {
                return `<main class="main"><div class="page"><div class="empty-state"><i class="fas fa-lock"></i><h3>Acces refuse</h3></div></div></main>`;
            }
            
            return `
                <main class="main">
                    <div class="page fade-in">
                        <h2 class="section-title">Administration</h2>
                        <p class="section-subtitle">Super Admin - Controle total de la plateforme</p>
                        
                        <div class="stats-grid" style="margin-bottom: 1.25rem;">
                            <div class="stat-card">
                                <div class="stat-icon blue"><i class="fas fa-users"></i></div>
                                <div class="stat-value">-</div>
                                <div class="stat-label">Utilisateurs</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon green"><i class="fas fa-piggy-bank"></i></div>
                                <div class="stat-value">-</div>
                                <div class="stat-label">Tontines</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon gold"><i class="fas fa-exchange-alt"></i></div>
                                <div class="stat-value">-</div>
                                <div class="stat-label">Transactions</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon red"><i class="fas fa-exclamation-triangle"></i></div>
                                <div class="stat-value">-</div>
                                <div class="stat-label">Alertes</div>
                            </div>
                        </div>

                        <div class="admin-grid">
                            <div class="admin-card">
                                <div class="admin-metric-label">Gestion Utilisateurs</div>
                                <div style="margin-top: 0.75rem;">
                                    <button class="btn btn-primary btn-sm btn-block" onclick="showToast('Chargement...', 'info')">
                                        <i class="fas fa-users"></i> Voir les utilisateurs
                                    </button>
                                </div>
                            </div>
                            <div class="admin-card">
                                <div class="admin-metric-label">Gestion Tontines</div>
                                <div style="margin-top: 0.75rem;">
                                    <button class="btn btn-primary btn-sm btn-block" onclick="showToast('Chargement...', 'info')">
                                        <i class="fas fa-piggy-bank"></i> Voir les tontines
                                    </button>
                                </div>
                            </div>
                            <div class="admin-card">
                                <div class="admin-metric-label">Trust Scores</div>
                                <div style="margin-top: 0.75rem;">
                                    <button class="btn btn-outline btn-sm btn-block" onclick="recalculateAllScores()">
                                        <i class="fas fa-sync-alt"></i> Recalculer tous
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="margin-top: 1.25rem;">
                            <div class="card-header">
                                <span class="card-title"><i class="fas fa-cog" style="color: var(--primary); margin-right: 8px;"></i>Parametres Systeme</span>
                            </div>
                            <div class="card-body">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
                                    <div>
                                        <label class="form-label">Frais transaction (%)</label>
                                        <input type="number" class="form-input" value="1" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Score min. pret</label>
                                        <input type="number" class="form-input" value="50" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Mode maintenance</label>
                                        <select class="form-input" disabled><option>Desactive</option></select>
                                    </div>
                                    <div>
                                        <label class="form-label">IA Scoring</label>
                                        <select class="form-input" disabled><option>Active</option></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            `;
        }

        // Sheet / Modal functions
        function openTransferSheet() {
            showSheet('Transfert', `
                <form id="transfer-form">
                    <div class="form-group">
                        <label class="form-label">Destinataire (ID ou Telephone)</label>
                        <input type="text" class="form-input" name="to_user" placeholder="ID utilisateur" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Montant (FCFA)</label>
                        <input type="number" class="form-input" name="amount" placeholder="5000" min="100" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <input type="text" class="form-input" name="description" placeholder="Optionnel">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">
                        <i class="fas fa-paper-plane"></i> Transferer
                    </button>
                </form>
            `, (content) => {
                content.querySelector('#transfer-form')?.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const f = e.target;
                    const result = await api('transfer', {
                        method: 'POST',
                        body: JSON.stringify({
                            to_user: f.to_user.value,
                            amount: parseInt(f.amount.value),
                            description: f.description.value
                        })
                    });
                    if (result?.success) {
                        showToast('Transfert effectue', 'success');
                        closeSheet();
                        loadDashboard();
                    } else {
                        showToast(result?.message || 'Erreur', 'error');
                    }
                });
            });
        }

        function openDepositSheet() {
            showSheet('Depot', `
                <form id="deposit-form">
                    <div class="form-group">
                        <label class="form-label">Montant (FCFA)</label>
                        <input type="number" class="form-input" name="amount" placeholder="10000" min="100" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">
                        <i class="fas fa-plus"></i> Deposer
                    </button>
                </form>
            `, (content) => {
                content.querySelector('#deposit-form')?.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const result = await api('wallet/deposit', {
                        method: 'POST',
                        body: JSON.stringify({ amount: parseInt(e.target.amount.value) })
                    });
                    if (result?.success) {
                        showToast('Depot effectue', 'success');
                        closeSheet();
                        loadDashboard();
                    }
                });
            });
        }

        function openWithdrawSheet() {
            showSheet('Retrait', `
                <form id="withdraw-form">
                    <div class="form-group">
                        <label class="form-label">Montant (FCFA)</label>
                        <input type="number" class="form-input" name="amount" placeholder="5000" min="1000" required>
                    </div>
                    <button type="submit" class="btn btn-danger btn-block btn-lg">
                        <i class="fas fa-minus"></i> Retirer
                    </button>
                </form>
            `, (content) => {
                content.querySelector('#withdraw-form')?.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const result = await api('wallet/withdraw', {
                        method: 'POST',
                        body: JSON.stringify({ amount: parseInt(e.target.amount.value) })
                    });
                    if (result?.success) {
                        showToast('Retrait effectue', 'success');
                        closeSheet();
                        loadDashboard();
                    }
                });
            });
        }

        function openLoanRequestSheet() {
            showSheet('Demande de Pret', `
                <form id="loan-form">
                    <div class="form-group">
                        <label class="form-label">Tontine</label>
                        <select class="form-input" name="tontine_id" required>
                            <option value="">Choisir une tontine</option>
                            ${state.tontines.map(t => `<option value="${t.id}">${t.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Montant (FCFA)</label>
                        <input type="number" class="form-input" name="amount" placeholder="50000" min="5000" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Duree (jours)</label>
                        <input type="number" class="form-input" name="duration" placeholder="30" min="7" max="365" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">
                        <i class="fas fa-hand-holding-dollar"></i> Demander
                    </button>
                </form>
            `, (content) => {
                content.querySelector('#loan-form')?.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const f = e.target;
                    const result = await api('loans', {
                        method: 'POST',
                        body: JSON.stringify({
                            tontine_id: parseInt(f.tontine_id.value),
                            amount: parseInt(f.amount.value),
                            duration_days: parseInt(f.duration.value)
                        })
                    });
                    if (result?.success) {
                        showToast('Demande soumise', 'success');
                        closeSheet();
                        loadLoans();
                    } else {
                        showToast(result?.message || 'Erreur', 'error');
                    }
                });
            });
        }

        function openCreateTontineModal() {
            showModal('Creer une Tontine', `
                <form id="create-tontine-form">
                    <div class="form-group">
                        <label class="form-label">Nom</label>
                        <input type="text" class="form-input" name="name" placeholder="Tontine Famille" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <textarea class="form-input" name="description" rows="2" placeholder="Objectif de la tontine"></textarea>
                    </div>
                    <div class="grid grid-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Cotisation (FCFA)</label>
                            <input type="number" class="form-input" name="contribution_amount" placeholder="10000" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Max membres</label>
                            <input type="number" class="form-input" name="max_members" placeholder="10" min="2" required>
                        </div>
                    </div>
                    <div class="grid grid-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label class="form-label">Frequence</label>
                            <select class="form-input" name="frequency">
                                <option value="weekly">Hebdo</option>
                                <option value="monthly" selected>Mensuel</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Cycles</label>
                            <input type="number" class="form-input" name="total_cycles" placeholder="12" min="1" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Date debut</label>
                        <input type="date" class="form-input" name="start_date" required>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 1rem;">
                        <input type="checkbox" id="allow_loans" name="allow_loans" style="width: 18px; height: 18px; accent-color: var(--primary);">
                        <label for="allow_loans" style="font-size: 0.85rem; cursor: pointer;">Autoriser les prets</label>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">Creer la tontine</button>
                </form>
            `, (modal) => {
                modal.querySelector('#create-tontine-form')?.addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const f = e.target;
                    const result = await api('tontines', {
                        method: 'POST',
                        body: JSON.stringify({
                            name: f.name.value,
                            description: f.description.value,
                            contribution_amount: parseInt(f.contribution_amount.value),
                            max_members: parseInt(f.max_members.value),
                            frequency: f.frequency.value,
                            total_cycles: parseInt(f.total_cycles.value),
                            start_date: f.start_date.value,
                            allow_loans: f.allow_loans.checked
                        })
                    });
                    if (result?.success) {
                        showToast('Tontine creee', 'success');
                        closeModal();
                        loadTontines();
                    } else {
                        showToast(result?.message || 'Erreur', 'error');
                    }
                });
            });
        }

        // Sheet/Modal helpers
        function showSheet(title, content, onShow) {
            const existing = document.querySelector('.sheet-overlay');
            if (existing) existing.remove();
            
            const overlay = document.createElement('div');
            overlay.className = 'sheet-overlay';
            overlay.innerHTML = `
                <div class="sheet">
                    <div class="sheet-handle"></div>
                    <h3 style="font-weight: 700; margin-bottom: 1.25rem;">${title}</h3>
                    <div class="sheet-content">${content}</div>
                </div>
            `;
            
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) closeSheet();
            });
            
            document.body.appendChild(overlay);
            requestAnimationFrame(() => {
                overlay.classList.add('active');
                overlay.querySelector('.sheet').classList.add('active');
            });
            
            if (onShow) onShow(overlay.querySelector('.sheet-content'));
        }

        function closeSheet() {
            const overlay = document.querySelector('.sheet-overlay');
            if (overlay) {
                overlay.classList.remove('active');
                overlay.querySelector('.sheet')?.classList.remove('active');
                setTimeout(() => overlay.remove(), 300);
            }
        }

        function showModal(title, content, onShow) {
            const existing = document.querySelector('.modal-overlay');
            if (existing) existing.remove();
            
            const overlay = document.createElement('div');
            overlay.className = 'modal-overlay';
            overlay.innerHTML = `
                <div class="modal">
                    <div class="modal-header">
                        <span class="modal-title">${title}</span>
                        <button class="modal-close" onclick="closeModal()"><i class="fas fa-times"></i></button>
                    </div>
                    <div class="modal-body">${content}</div>
                </div>
            `;
            
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) closeModal();
            });
            
            document.body.appendChild(overlay);
            requestAnimationFrame(() => overlay.classList.add('active'));
            
            if (onShow) onShow(overlay.querySelector('.modal'));
        }

        function closeModal() {
            const overlay = document.querySelector('.modal-overlay');
            if (overlay) {
                overlay.classList.remove('active');
                setTimeout(() => overlay.remove(), 300);
            }
        }

        // Actions
        async function recalculateScore() {
            const result = await api('trust-score/recalculate', { method: 'POST' });
            if (result?.success) {
                showToast('Score recalcule: ' + result.data.score, 'success');
                loadDashboard();
            }
        }

        async function recalculateAllScores() {
            const result = await api('admin/trust-scores/recalculate-all', { method: 'POST' });
            if (result?.success) showToast('Tous les scores recalcules', 'success');
        }

        async function repayLoan(uuid) {
            const amount = prompt('Montant du remboursement (FCFA):');
            if (!amount) return;
            
            const result = await api(`loans/${uuid}/repay`, {
                method: 'POST',
                body: JSON.stringify({ amount: parseInt(amount) })
            });
            
            if (result?.success) {
                showToast('Remboursement effectue', 'success');
                loadLoans();
            } else {
                showToast(result?.message || 'Erreur', 'error');
            }
        }

        function showTontineDetail(uuid) {
            showToast('Chargement...', 'info');
        }

        function showNotifications() {
            showToast('Notifications - en cours', 'info');
        }

        function filterLoans(status, el) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            showToast('Filtre: ' + status, 'info');
        }

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            // Check for stored token
            if (state.token) {
                loadDashboard();
            }
            render();
        });
    </script>
</body>
</html>
