@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root { --primary:#6d28d9; --primary-dark:#4c1d95; --bg:#f8fafc; --text:#0f172a; --shadow:0 10px 40px -10px rgba(109,40,217,0.15); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:'Plus Jakarta Sans',sans-serif; background:#e2e8f0; color:var(--text); }

/* AUTH (LOGIN/REGISTER) */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#fff; }
.auth-box { width:100%; max-width:400px; padding:40px; text-align:center; }
.inp-grp { position:relative; margin-bottom:15px; }
.inp-grp i { position:absolute; left:15px; top:16px; color:var(--primary); }
.inp-grp input { width:100%; padding:14px 14px 14px 45px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; outline:none; }
.btn-auth { width:100%; padding:15px; background:var(--primary); color:#fff; border:none; border-radius:12px; font-weight:800; cursor:pointer; }

/* MEMBER APP */
.app-container { max-width:480px; margin:0 auto; background:#fff; min-height:100vh; position:relative; padding-bottom:90px; box-shadow:0 0 50px rgba(0,0,0,0.05); }
.header-super { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); padding:40px 20px 80px; color:#fff; border-radius:0 0 35px 35px; }
.wallet-box { background:#fff; margin:-50px 20px 20px; padding:20px; border-radius:20px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; position:relative; z-index:10; }
.wallet-val { font-size:1.4rem; font-weight:800; display:block; color:#111; }
.wallet-lbl { font-size:0.7rem; color:#64748b; font-weight:700; letter-spacing:1px; }
.menu-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 10px; padding:0 20px; margin-bottom:25px; }
.menu-item { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.icon-wrap { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 4px 10px rgba(0,0,0,0.04); }
.c1 { background:#ecfdf5; color:#10b981; } .c2 { background:#eff6ff; color:#3b82f6; } .c3 { background:#fff1f2; color:#f43f5e; }
.c4 { background:#fefce8; color:#eab308; } .c5 { background:#f3e8ff; color:#8b5cf6; } .c6 { background:#f1f5f9; color:#64748b; }
.banner-scroll { display:flex; gap:15px; overflow-x:auto; padding:0 20px 25px; scrollbar-width:none; }
.banner-item { min-width:280px; height:140px; border-radius:16px; background-size:cover; box-shadow:var(--shadow); }
.product-grid { padding:0 20px; display:grid; gap:15px; }
.prod-card { background:#fff; padding:12px; border-radius:16px; display:flex; gap:15px; border:1px solid #f1f5f9; cursor:pointer; }
.prod-img { width:90px; height:90px; border-radius:12px; background:#eee; background-size:cover; }
.bottom-nav { position:absolute; bottom:0; width:100%; background:#fff; padding:15px 30px 25px; display:flex; justify-content:space-between; border-radius:25px 25px 0 0; box-shadow:0 -5px 30px rgba(0,0,0,0.05); }
.nav-btn { display:flex; flex-direction:column; align-items:center; color:#94a3b8; font-size:1.4rem; cursor:pointer; }
.nav-btn.active { color:var(--primary); }

/* DASHBOARD PROFILE */
.dash-card { background:#fff; padding:20px; border-radius:20px; text-align:center; margin-top:-50px; position:relative; z-index:10; box-shadow:var(--shadow); }
.av-circle { width:80px; height:80px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:-50px auto 10px; border:4px solid #fff; font-size:2rem; font-weight:800; }
.stat-row { display:flex; justify-content:space-around; margin-top:20px; padding-top:20px; border-top:1px solid #f1f5f9; }

/* ADMIN */
.adm-layout { display:flex; min-height:100vh; max-width:100%; }
.adm-side { width:260px; background:#fff; padding:25px; border-right:1px solid #e2e8f0; display:flex; flex-direction:column; }
.adm-cont { flex:1; padding:30px; overflow-y:auto; }
.adm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; margin-bottom:30px; }
.st-box { background:#fff; padding:25px; border-radius:16px; box-shadow:var(--shadow); }
.adm-tbl { width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; }
.adm-tbl th, .adm-tbl td { padding:15px; text-align:left; border-bottom:1px solid #f1f5f9; }
.badge { padding:5px 12px; border-radius:50px; font-size:0.8rem; font-weight:600; }
.st-Pending { background:#fff7ed; color:#c2410c; } .st-Approved { background:#f0fdf4; color:#15803d; } .st-Rejected { background:#fef2f2; color:#b91c1c; }

/* MODAL */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; justify-content:center; align-items:flex-end; }
.modal-bg { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px); }
.modal-box { background:#fff; width:100%; max-width:480px; border-radius:25px 25px 0 0; padding:30px; position:relative; max-height:90vh; overflow-y:auto; animation:up 0.3s ease; }
@keyframes up { from{transform:translateY(100%)} to{transform:translateY(0)} }