*{margin:0;padding:0;box-sizing:border-box}
 body{
 font-family:'Poppins',sans-serif;
 background:linear-gradient(135deg,#eef2ff,#e0f2fe,#f3e8ff);
 position:relative;
 overflow-x:hidden;
 }
 
 /* ========== ANIMATED BACKGROUND CHARTS ========== */
 .bg-animation{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
 }
 
 .chart-element{
    position:absolute;
    opacity:0.12;
 }
 
 /* BOTTOM-LEFT: Animated Bar Chart */
 .bar-chart-container{
    bottom:5%;
    left:3%;
    width:200px;
    height:140px;
    animation:floatSlow 15s infinite ease-in-out;
 }
 .bar-wrapper{
    display:flex;
    align-items:flex-end;
    height:100%;
    gap:8px;
    padding:10px;
    background:rgba(255,255,255,0.4);
    border-radius:20px;
    backdrop-filter:blur(10px);
    box-shadow:0 20px 60px rgba(79,70,229,0.15);
 }
 .bar{
    flex:1;
    background:linear-gradient(180deg,#4f46e5,#818cf8);
    border-radius:8px 8px 0 0;
    position:relative;
    animation:barPulse 3s infinite ease-in-out;
    box-shadow:0 -5px 15px rgba(79,70,229,0.3);
 }
 .bar::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30%;
    background:linear-gradient(180deg,rgba(255,255,255,0.5),transparent);
    border-radius:8px 8px 0 0;
 }
 .bar:nth-child(1){height:45%;animation-delay:0s}
 .bar:nth-child(2){height:75%;animation-delay:0.3s}
 .bar:nth-child(3){height:60%;animation-delay:0.6s}
 .bar:nth-child(4){height:90%;animation-delay:0.9s}
 .bar:nth-child(5){height:70%;animation-delay:1.2s}
 .bar:nth-child(6){height:85%;animation-delay:1.5s}
 
 /* TOP-LEFT: Growing Pie Chart */
 .pie-chart-container{
    top:8%;
    left:5%;
    width:180px;
    height:180px;
    animation:floatMedium 12s infinite ease-in-out;
 }
 .pie-outer{
    width:100%;
    height:100%;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(10px);
    padding:20px;
    box-shadow:0 25px 70px rgba(79,70,229,0.2);
    position:relative;
 }
 .pie-chart{
    width:100%;
    height:100%;
    border-radius:50%;
    background:conic-gradient(
       from 0deg,
       #4f46e5 0deg,
       #4f46e5 var(--deg1,120deg),
       #818cf8 var(--deg1,120deg),
       #818cf8 var(--deg2,240deg),
       #c7d2fe var(--deg2,240deg),
       #c7d2fe 360deg
    );
    animation:pieGrow 4s infinite ease-in-out;
    box-shadow:inset 0 0 30px rgba(0,0,0,0.1);
    position:relative;
 }
 .pie-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:50%;
    background:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#4f46e5;
    font-size:18px;
    animation:numberCount 4s infinite ease-in-out;
 }
 
 /* TOP-RIGHT: Line Chart with Glow */
 .line-chart-container{
    top:12%;
    right:8%;
    width:250px;
    height:120px;
    animation:floatFast 10s infinite ease-in-out;
 }
 .line-wrapper{
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(10px);
    border-radius:20px;
    padding:15px;
    box-shadow:0 20px 60px rgba(79,70,229,0.15);
 }
 .line-chart svg{
    width:100%;
    height:100%;
    filter:drop-shadow(0 0 8px rgba(79,70,229,0.5));
 }
 .chart-line{
    fill:none;
    stroke:url(#lineGradient);
    stroke-width:4;
    stroke-linecap:round;
    stroke-dasharray:500;
    animation:drawLine 5s infinite ease-in-out;
 }
 .chart-dots{
    fill:#4f46e5;
    animation:dotPulse 2s infinite ease-in-out;
 }
 
 /* BOTTOM-RIGHT: 3D Donut Chart */
 .donut-container{
    bottom:15%;
    right:10%;
    width:150px;
    height:150px;
    animation:rotate3D 20s infinite linear;
    transform-style:preserve-3d;
 }
 .donut-wrapper{
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.4);
    backdrop-filter:blur(10px);
    border-radius:50%;
    padding:15px;
    box-shadow:0 25px 70px rgba(79,70,229,0.2);
 }
 .donut-chart{
    width:100%;
    height:100%;
    position:relative;
 }
 .donut-chart svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
    filter:drop-shadow(0 5px 15px rgba(79,70,229,0.3));
 }
 .donut-segment{
    fill:none;
    stroke-width:18;
    stroke-linecap:round;
    animation:segmentGrow 3s infinite ease-in-out;
 }
 .donut-segment:nth-child(1){
    stroke:#4f46e5;
    stroke-dasharray:90 283;
    animation-delay:0s;
 }
 .donut-segment:nth-child(2){
    stroke:#818cf8;
    stroke-dasharray:120 283;
    animation-delay:0.5s;
 }
 .donut-segment:nth-child(3){
    stroke:#c7d2fe;
    stroke-dasharray:73 283;
    animation-delay:1s;
 }
 
 /* CENTER-LEFT: Data Grid Animation */
 .data-grid{
    top:45%;
    left:8%;
    width:160px;
    height:160px;
    animation:floatSlow 14s infinite ease-in-out;
 }
 .grid-container{
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(10px);
    border-radius:20px;
    padding:15px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    box-shadow:0 20px 60px rgba(79,70,229,0.15);
 }
 .grid-cell{
    background:linear-gradient(135deg,#4f46e5,#818cf8);
    border-radius:6px;
    animation:cellPulse 2s infinite ease-in-out;
 }
 .grid-cell:nth-child(odd){animation-delay:0s}
 .grid-cell:nth-child(even){animation-delay:0.5s}
 
 /* CENTER-RIGHT: Floating Dashboard Cards */
 .dashboard-cards{
    top:55%;
    right:15%;
    width:180px;
    animation:floatMedium 13s infinite ease-in-out;
 }
 .mini-card{
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(10px);
    border-radius:15px;
    padding:15px;
    margin-bottom:12px;
    box-shadow:0 15px 40px rgba(79,70,229,0.12);
    animation:cardSlide 3s infinite ease-in-out;
 }
 .mini-card:nth-child(1){animation-delay:0s}
 .mini-card:nth-child(2){animation-delay:0.5s}
 .mini-card:nth-child(3){animation-delay:1s}
 .card-bar{
    height:6px;
    background:linear-gradient(90deg,#4f46e5,#818cf8);
    border-radius:3px;
    animation:barProgress 3s infinite ease-in-out;
 }
 
 /* FLOATING ICONS */
 .floating-icon{
    position:absolute;
    font-size:40px;
    color:#4f46e5;
    opacity:0.1;
    animation:iconFloat 8s infinite ease-in-out;
 }
 .icon-1{top:30%;left:35%;animation-delay:0s}
 .icon-2{top:65%;left:45%;animation-delay:2s}
 .icon-3{top:20%;right:30%;animation-delay:4s}
 .icon-4{bottom:30%;left:25%;animation-delay:6s}
 
 /* PARTICLES */
 .particles{
    position:absolute;
    width:100%;
    height:100%;
 }
 .particle{
    position:absolute;
    width:4px;
    height:4px;
    background:#4f46e5;
    border-radius:50%;
    animation:particleFloat 15s infinite ease-in-out;
 }
 .particle:nth-child(1){top:10%;left:15%;animation-delay:0s}
 .particle:nth-child(2){top:30%;left:25%;animation-delay:2s}
 .particle:nth-child(3){top:50%;left:35%;animation-delay:4s}
 .particle:nth-child(4){top:70%;left:45%;animation-delay:6s}
 .particle:nth-child(5){top:20%;right:20%;animation-delay:1s}
 .particle:nth-child(6){top:40%;right:30%;animation-delay:3s}
 .particle:nth-child(7){top:60%;right:40%;animation-delay:5s}
 .particle:nth-child(8){top:80%;right:25%;animation-delay:7s}
 
 /* ========== ANIMATIONS ========== */
 @keyframes floatSlow{
    0%,100%{transform:translateY(0) translateX(0)}
    25%{transform:translateY(-15px) translateX(5px)}
    50%{transform:translateY(-8px) translateX(-5px)}
    75%{transform:translateY(-12px) translateX(3px)}
 }
 @keyframes floatMedium{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-20px) scale(1.05)}
 }
 @keyframes floatFast{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-25px) rotate(2deg)}
 }
 @keyframes barPulse{
    0%,100%{transform:scaleY(1)}
    50%{transform:scaleY(1.15)}
 }
 @keyframes pieGrow{
    0%{--deg1:0deg;--deg2:0deg;transform:rotate(0deg)}
    50%{--deg1:140deg;--deg2:260deg;transform:rotate(180deg)}
    100%{--deg1:120deg;--deg2:240deg;transform:rotate(360deg)}
 }
 @keyframes numberCount{
    0%{content:'0%'}
    100%{content:'100%'}
 }
 @keyframes drawLine{
    0%{stroke-dashoffset:500;opacity:0.5}
    50%{stroke-dashoffset:0;opacity:1}
    100%{stroke-dashoffset:-500;opacity:0.5}
 }
 @keyframes dotPulse{
    0%,100%{r:4}
    50%{r:6}
 }
 @keyframes rotate3D{
    0%{transform:rotateY(0deg) rotateX(10deg)}
    100%{transform:rotateY(360deg) rotateX(10deg)}
 }
 @keyframes segmentGrow{
    0%,100%{stroke-dasharray:0 283}
    50%{stroke-dasharray:var(--dash) 283}
 }
 @keyframes cellPulse{
    0%,100%{opacity:0.6;transform:scale(1)}
    50%{opacity:1;transform:scale(1.1)}
 }
 @keyframes cardSlide{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-10px)}
 }
 @keyframes barProgress{
    0%{width:0%}
    100%{width:100%}
 }
 @keyframes iconFloat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-20px) rotate(10deg)}
 }
 @keyframes particleFloat{
    0%,100%{transform:translateY(0) scale(1);opacity:0.3}
    50%{transform:translateY(-50px) scale(1.5);opacity:0.6}
 }
 
 .main-container{
 min-height:100vh;
     display:flex;
     align-items:center;
     justify-content:center;
     padding:20px;
     position:relative;
     z-index:1;
 }
 .login-container{
     width:100%;
     max-width:1200px;
     display:flex;
     border-radius:30px;
     overflow:hidden;
     background:rgba(255,255,255,0.95);
     box-shadow:0 40px 100px rgba(0,0,0,0.15);
     backdrop-filter:blur(10px);
 }
 /* LEFT PANEL */
 .left-panel{ flex:1; padding:40px; }
 .left-panel h2{ font-weight:700; margin-bottom:35px; color:#4f46e5; }
 .modules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
 .module-card{ perspective:1000px; }
 .module-inner{
     position:relative;
     width:100%;
     height:185px;
     transform-style:preserve-3d;
     transition:transform 0.7s;
 }
 .module-card:hover .module-inner{ transform:rotateY(180deg); }
 .module-front,.module-back{
     position:absolute;
     width:100%;
     height:100%;
     border-radius:20px;
     backface-visibility:hidden;
     padding:25px;
     display:flex;
     align-items:center;
     box-shadow:0 15px 40px rgba(0,0,0,0.08);
 }
 .module-front{ background:white; }
 .module-back{
     background:linear-gradient(135deg, #b3b4bc, #7ea9ff);
     color:white;
     transform:rotateY(180deg);
 }
 .module-icon{ font-size:35px; margin-right:18px; min-width:40px; }
 .module-content h6{ margin:0; font-weight:700; font-size:18px; }
 .module-content p{ margin:6px 0 0; font-size:15px; }
 /* RIGHT PANEL */
 .login-card{
     flex:1;
     background:white;
     padding:35px;
     display:flex;
     flex-direction:column;
     justify-content:center;
 }
 .login-logo{ max-width:180px; transition:0.4s; }
 .login-logo:hover{ transform:scale(1.05); }
 .form-control{
     height:52px;
     border-radius:15px;
     border:2px solid #e2e8f0;
     transition:0.3s;
     font-size:15px;
 }
 .form-control:focus{
 border-color:#cfcfcf;
 box-shadow:0 0 0 .05rem rgb(215 215 215 / 20%)
 }
 .error_input{
     border:1px solid #ef4444 !important;
     box-shadow:0 0 0 .5px rgba(239,68,68,0.2) !important;
     animation:shake 0.4s;
 }
 @keyframes shake{
     0%{transform:translateX(0)}
     25%{transform:translateX(-5px)}
     50%{transform:translateX(5px)}
     75%{transform:translateX(-5px)}
     100%{transform:translateX(0)}
 }
 .btn-login{
     background:linear-gradient(90deg,#d1d5db,#9ca3af,#d1d5db);
     background-size:200%;
     border:none;
     border-radius:50px;
     height:52px;
     color:#111827;
     font-weight:700;
     letter-spacing:1px;
     transition:0.4s;
 }
 .btn-login:hover{
     background-position:right center;
     transform:translateY(-4px);
     box-shadow:0 15px 35px rgba(0,0,0,0.15);
 }
 @media(max-width:992px){ 
    .login-container{ flex-direction:column; }
    .chart-element{ opacity:0.06; }
 }
 @media(max-width:576px){ 
    .modules-grid{ grid-template-columns:1fr; }
    .chart-element,.floating-icon,.particles{ display:none; }
 }