/* Main MUI-style circular loader */
 .mui-loader {
     position: relative;
     width: 40px;
     height: 40px;
 }
 
 .mui-loader svg {
     animation: mui-rotate 1.4s linear infinite;
     width: 100%;
     height: 100%;
 }
 
 .mui-loader circle {
     stroke: #1976d2;
     stroke-width: 4;
     stroke-linecap: round;
     stroke-dasharray: 80, 200;
     stroke-dashoffset: 0;
     fill: none;
     animation: mui-dash 1.4s ease-in-out infinite;
 }
 
 @keyframes mui-rotate {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 @keyframes mui-dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
     }
     50% {
         stroke-dasharray: 100, 200;
         stroke-dashoffset: -15;
     }
     100% {
         stroke-dasharray: 100, 200;
         stroke-dashoffset: -120;
     }
 }
 
 /* Alternative sizes */
 .mui-loader-small {
     width: 24px;
     height: 24px;
 }
 
 .mui-loader-large {
     width: 60px;
     height: 60px;
 }
 
 /* Color variations */
 .mui-loader-secondary circle {
     stroke: #dc004e;
 }
 
 .mui-loader-success circle {
     stroke: #2e7d32;
 }
 
 .mui-loader-warning circle {
     stroke: #ed6c02;
 }
 
 .mui-loader-error circle {
     stroke: #d32f2f;
 }
 
 /* Full screen overlay loader */
 .loader-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(2px);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }

 /* Demo sections */
 .demo-section {
     text-align: center;
     padding: 20px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     margin: 10px;
 }
 
 .demo-section h3 {
     color: #333;
     margin-bottom: 20px;
     font-weight: 400;
 }
 
 .loader-container {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }
 
 button {
     background: #1976d2;
     color: white;
     border: none;
     padding: 8px 16px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
     transition: background-color 0.2s;
 }
 
 button:hover {
     background: #1565c0;
 }
 
 .hidden {
     display: none;
 }