body{font-family:Arial}
.sisdim-app{color:#123}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#071b35;color:#fff;border-radius:20px}
.topbar a{color:#fff;text-decoration:none;margin:8px}
.brand{font-size:25px;font-weight:800}
.btn,.pulse,.outline{padding:13px 25px;border-radius:30px;border:0;cursor:pointer}
.btn,.pulse{background:#16a34a;color:#fff!important}
.dark{background:#fff;color:#071b35!important}
.hero{margin-top:25px;display:flex;justify-content:space-between;align-items:center;padding:70px;background:linear-gradient(120deg,#0066cc,#16a34a);color:white;border-radius:35px}
.hero h1{font-size:45px}
.floating-card{background:#fff;color:#075985;padding:35px;border-radius:25px;font-size:35px;animation:float 3s infinite}
.floating-card span{display:block;font-size:16px}
@keyframes float{50%{transform:translateY(-15px)}}
.modules,.dashboard{padding:40px 0}
.grid,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px}
.card,.stat{padding:30px;background:#fff;border-radius:25px;box-shadow:0 10px 30px #0002;transition:.3s}
.card:hover,.stat:hover{transform:translateY(-10px)}
.stat b{font-size:45px;color:#0066cc;display:block}
.circle{width:180px;height:180px;border-radius:50%;background:conic-gradient(#16a34a 92%,#ddd 0);display:flex;align-items:center;justify-content:center;margin:20px;font-size:35px}
.circle div{background:white;width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.progress div{height:25px;background:#ddd;border-radius:20px}.progress span{display:block;width:85%;height:100%;background:#16a34a;border-radius:20px}