.usage-overview-container{width:100%;max-width:1200px;margin:2rem auto;padding:0 1rem}.usage-overview-card{background:#0d6efd;border-radius:1rem;padding:2rem;display:flex;align-items:center;gap:2rem;box-shadow:0 10px 30px rgba(102,126,234,.3);transition:transform .3s ease,box-shadow .3s ease}.usage-overview-card:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(102,126,234,.4)}.usage-overview-icon{font-size:3rem;color:#fff;background:hsla(0,0%,100%,.2);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.usage-overview-content{flex:1;display:flex;flex-direction:column;gap:1rem}.usage-overview-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.2)}.usage-overview-percentage{display:flex;align-items:center;gap:1.5rem}.percentage-text{font-size:2.5rem;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.2);min-width:120px}.percentage-bar-small{flex:1;height:1rem;background:hsla(0,0%,100%,.2);border-radius:.5rem;overflow:hidden;position:relative}.percentage-fill-small{height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:.5rem;transition:width .5s ease;box-shadow:0 0 15px rgba(16,185,129,.5)}.see-details-button{align-self:flex-start;background:#fff;color:#0d6efd;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px rgba(0,0,0,.1)}.see-details-button:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.15)}.see-details-button:active{transform:translateY(0)}@media (max-width:768px){.usage-overview-card{flex-direction:column;text-align:center;padding:1.5rem}.usage-overview-icon{width:60px;height:60px;font-size:2rem}.usage-overview-title{font-size:1.25rem}.usage-overview-percentage{flex-direction:column;gap:1rem}.percentage-text{font-size:2rem;min-width:auto}.percentage-bar-small{width:100%}.see-details-button{align-self:center;width:100%}}