:root{--primary: #10b981;--primary-hover: #059669;--secondary: #f59e0b;--bg-dark: #0f172a;--card-bg: rgba(30, 41, 59, .7);--card-border: rgba(255, 255, 255, .1);--text-main: #f8fafc;--text-muted: #94a3b8;--error: #ef4444;--success: #10b981;--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--sidebar-width: 280px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-dark);color:var(--text-main);line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 10% 20%,rgba(16,185,129,.05) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(245,158,11,.05) 0%,transparent 40%);min-height:100vh}h1,h2,h3,h4{font-family:var(--font-heading)}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:24px;padding:40px;box-shadow:0 25px 50px -12px #00000080}.login-card{width:100%;max-width:450px;text-align:center}.logo-container{margin-bottom:32px}.logo-text{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:8px}.logo-text span{color:var(--secondary)}.input-group{margin-bottom:20px;text-align:left}.input-label{display:block;font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:8px}.input-field{width:100%;background:#0f172a80;border:1px solid var(--card-border);border-radius:12px;padding:14px 16px;color:#fff;font-family:var(--font-body);transition:all .2s}.input-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #10b9811a}.btn{width:100%;border:none;border-radius:12px;padding:16px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 15px -3px #10b9814d}.portal-layout{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh}.sidebar{background:#0f172acc;border-right:1px solid var(--card-border);padding:32px 24px;display:flex;flex-direction:column}.nav-links{margin-top:48px;display:flex;flex-direction:column;gap:8px;flex:1}.nav-link{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;color:var(--text-muted);text-decoration:none;font-weight:600;transition:all .2s;cursor:pointer}.nav-link:hover,.nav-link.active{background:#ffffff0d;color:var(--primary)}.main-content{padding:48px;max-width:1200px;width:100%;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.welcome-text h1{font-size:32px;font-weight:800;margin-bottom:8px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}.stat-card{padding:32px}.stat-label{font-size:14px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}.stat-value{font-size:36px;font-weight:800;font-family:var(--font-heading)}.ledger-section{width:100%}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.ledger-table{width:100%;border-collapse:collapse}.ledger-row{border-bottom:1px solid var(--card-border);transition:background .2s}.ledger-row:hover{background:#ffffff05}.ledger-cell{padding:20px;font-size:14px}.ledger-amount{font-weight:700;font-family:var(--font-heading)}.amount-negative{color:var(--error)}.amount-positive{color:var(--success)}.status-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#0f172ae6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--card-border);padding:12px 24px;z-index:1000;justify-content:space-around;align-items:center}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-muted);font-size:10px;font-weight:700;text-transform:uppercase;transition:all .2s;cursor:pointer;flex:1}.mobile-nav-item.active{color:var(--primary)}.mobile-nav-item svg{margin-bottom:2px}@media (max-width: 1024px){.portal-layout{grid-template-columns:1fr;padding-bottom:80px}.sidebar{display:none}.mobile-nav{display:flex}.main-content{padding:24px;max-width:100%}.dashboard-header{flex-direction:column;align-items:flex-start;gap:16px;padding-top:10px}.dashboard-header .glass-card{width:100%;justify-content:space-between}.stats-grid{grid-template-columns:1fr;gap:16px}.stat-card{padding:24px}.stat-value{font-size:32px}}@media (max-width: 640px){.glass-card{padding:20px;border-radius:20px}.main-content{padding:16px}.welcome-text h1{font-size:26px}.logo-text{font-size:24px}.stat-value{font-size:28px}.ledger-cell{padding:16px 12px;font-size:13px;white-space:nowrap}.top-up-grid{grid-template-columns:1fr!important}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .5s ease-out forwards}