:root{color:#f5f7ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#060816;font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#6260ff59,#0000 18rem),radial-gradient(circle at 100% 100%,#00baff40,#0000 24rem),linear-gradient(135deg,#060816 0%,#11162b 45%,#060816 100%);min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}#root{min-height:100vh}.auth-shell{place-items:center;min-height:100vh;padding:24px;display:grid;position:relative;overflow:hidden}.auth-shell:before,.auth-shell:after{content:"";filter:blur(40px);opacity:.35;border-radius:50%;width:18rem;height:18rem;animation:7s ease-in-out infinite pulse;position:absolute;inset:auto}.auth-shell:before{background:#786eff73;top:-3rem;left:-4rem}.auth-shell:after{background:#00bcff59;animation-delay:2s;bottom:-4rem;right:-3rem}.auth-card{z-index:1;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#070c18cc;border:1px solid #ffffff1f;border-radius:28px;width:min(100%,460px);padding:32px;animation:.7s fadeInUp;position:relative;box-shadow:0 20px 60px #00000059}.auth-card h2{color:#f7f7ff;margin:0 0 8px;font-size:2rem}.auth-card p{color:#94a3b8;margin:0 0 24px}.auth-form{gap:14px;display:grid}.input-field{color:#f8fafc;background:#ffffff14;border:1px solid #ffffff1f;border-radius:14px;outline:none;width:100%;padding:14px 16px;transition:border-color .2s,transform .2s}.input-field:focus{border-color:#66d9ef;transform:translateY(-1px)}.primary-button,.ghost-button,.role-button,.top-up-button{border:0;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s}.primary-button:hover,.ghost-button:hover,.role-button:hover,.top-up-button:hover{transform:translateY(-2px)}.primary-button{color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#22c55e 100%);padding:12px 16px;box-shadow:0 10px 30px #7c3aed4d}.primary-button:disabled{opacity:.65;cursor:wait;transform:none}.ghost-button{color:#dbeafe;background:#ffffff14;padding:10px 14px}.form-error{color:#fda4af;margin:0;font-size:.95rem}.dashboard-shell{grid-template-columns:300px 1fr;gap:24px;min-height:100vh;padding:24px;animation:.7s fadeInUp;display:grid}.dashboard-sidebar,.glass-card,.panel{-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#070c18c2;border:1px solid #ffffff1f;box-shadow:0 20px 45px #00000047}.dashboard-sidebar{border-radius:26px;flex-direction:column;gap:20px;padding:24px;display:flex}.brand-pill{color:#d8b4fe;letter-spacing:.08em;text-transform:uppercase;background:#7c3aed29;border-radius:999px;align-self:flex-start;padding:8px 12px;font-size:.78rem;display:inline-flex}.dashboard-sidebar h2{color:#f8fafc;margin:0}.dashboard-sidebar p{color:#94a3b8;margin:0}.nav-stack{gap:10px;display:grid}.nav-button{text-align:left;color:#e2e8f0;background:0 0;border:1px solid #0000;border-radius:14px;padding:12px 14px;transition:all .2s}.nav-button.active{color:#fff;background:#22c55e29;border-color:#22c55e47}.nav-button:hover{background:#ffffff14}.sidebar-card,.hero-card,.panel,.metric-card{border-radius:20px}.sidebar-card{background:linear-gradient(135deg,#22c55e2e,#7c3aed29);padding:16px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#7dd3fc;margin-bottom:6px;font-size:.74rem}.dashboard-main{flex-direction:column;gap:18px;display:flex}.dashboard-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.dashboard-header h1{color:#f8fafc;margin:4px 0 0;font-size:clamp(1.5rem,2.4vw,2.1rem)}.hero-card{background:linear-gradient(135deg,#7c3aed3d,#06b6d433);border:1px solid #ffffff1f;justify-content:space-between;align-items:center;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}.hero-card:after{content:"";background:#ffffff14;border-radius:50%;width:220px;height:220px;animation:5s ease-in-out infinite float;position:absolute;top:-80px;right:-80px}.hero-card h3{color:#fff;margin:0 0 6px;font-size:1.2rem}.hero-card p{color:#dbeafe;margin:0}.hero-metrics{flex-wrap:wrap;gap:12px;display:flex}.hero-metrics .mini-chip{background:#ffffff1a;border-radius:14px;min-width:110px;padding:10px 12px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.metric-card{background:#070c18b8;border:1px solid #ffffff1f;padding:16px;animation:.6s fadeInUp}.metric-card strong{color:#fff;margin-top:6px;font-size:1.4rem;display:block}.panel-grid{grid-template-columns:1.45fr .9fr;gap:18px;display:grid}.panel{padding:18px}.panel h4{color:#fff;margin:0 0 12px}.list-row,.transaction-row{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.list-row:last-child,.transaction-row:last-child{border-bottom:none}.badge{color:#fff;background:#ffffff1f;border-radius:999px;justify-content:center;align-items:center;padding:6px 10px;font-size:.8rem;display:inline-flex}.badge.customer{background:#06b6d438}.badge.agent{background:#7c3aed3d}.badge.admin{background:#22c55e38}.role-row{flex-wrap:wrap;gap:8px;display:flex}.role-button{color:#f8fafc;background:#ffffff14;padding:8px 12px}.role-button.active{background:linear-gradient(135deg,#7c3aed,#22c55e)}.top-up-controls{gap:8px;margin-top:8px;display:flex}.top-up-controls input{color:#f8fafc;background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;flex:1;min-width:90px;padding:10px 12px}.top-up-button{color:#fff;background:linear-gradient(135deg,#22c55e,#14b8a6);padding:10px 12px}.table-stack{gap:10px;display:grid}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translate(0,0)}50%{transform:translateY(10px)}}@keyframes pulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:.2;transform:scale(1.08)}}@media (width<=1024px){.dashboard-shell,.panel-grid,.stats-grid,.dashboard-shell{grid-template-columns:1fr}}