:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw}.toggle-btn{position:fixed;top:60px;left:50%;transform:translate(-50%);z-index:100;padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:0 0 20px 20px;cursor:pointer;transition:all .3s ease}.sidebar.hidden+.toggle-btn{top:0}.toggle-btn:hover{background:#2980b9;transform:translate(-50%) scale(1.05)}.sidebar{width:100%;height:60px;position:relative;background:#2c3e50;color:#fff;transition:height .3s ease;display:flex;justify-content:center;align-items:center}.sidebar ul{display:flex;list-style:none;padding:0 20px;margin:0;gap:20px}.sidebar a{color:#fff;text-decoration:none;padding:10px 15px;border-radius:4px;transition:background .2s}.topbarItem>a:hover{background:#34495e}.content{flex:1;width:100%;padding:0;background:#f8f9fa;overflow:auto}.content>div{height:100%;width:100%;padding:20px}.sidebar.hidden{height:0}nav ul .topbarItem{position:relative;height:100%}.tooltip{visibility:hidden;width:max-content;background-color:#333;color:#fff;text-align:center;border-radius:4px;padding:5px;position:absolute;z-index:1;top:120%;left:0%;opacity:0;transition:opacity .3s}.topbarItem:hover .tooltip{visibility:visible;opacity:1}.topbarItem a:hover{text-decoration:underline white}.btn{background-color:#4caf50}.transform-container{--i: 0;font-family:Segoe UI,sans-serif;max-width:800px;margin:2rem auto;padding:2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 20px 40px #0000001a;color:#fff}.transform-title{text-align:center;font-size:2rem;margin-bottom:2rem;font-weight:600}.option-list{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}.option-btn{padding:.75rem 1.5rem;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:25px;color:#fff;font-size:1rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.option-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.option-btn.active{background:#fff;color:#667eea;font-weight:600;border-color:#fff}.content-wrapper{height:300px;overflow:hidden;position:relative;border-radius:12px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.content-item{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:500;transform:translateY(calc(var(--i) * -10%));transition:transform .8s cubic-bezier(.2,.8,.2,1)}.btn{margin:20px 30px;background-color:#4caf50;color:#fff;border:none}.alert p{color:red}:root{--primary: #4361ee;--secondary: #3f37c9;--accent: #4cc9f0;--info: #7dd3fc;--dark: #1e293b;--light: #f8fafc;--gray: #94a3b8;--card-bg: #ffffff;--dashboard-bg: #f1f5f9;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--border-radius: 12px;--transition: all .4s ease}.dashboard{min-height:100vh;background:var(--dashboard-bg);padding:24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media(max-width:768px){.dashboard{padding:16px}}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}@media(max-width:768px){.dashboard-header{flex-direction:column;align-items:flex-start}}.greeting-section .greeting{font-size:28px;font-weight:700;color:var(--dark);margin:0 0 8px}.greeting-section .greeting .user-name{color:var(--primary);position:relative}.greeting-section .greeting .user-name:after{content:"";position:absolute;bottom:2px;left:0;width:100%;height:2px;background:var(--primary);transform:scaleX(0);transition:var(--transition)}.greeting-section .greeting .user-name:hover:after{transform:scaleX(1)}.greeting-section .current-time{font-size:14px;color:var(--gray);margin:0}.header-actions{display:flex;gap:16px;align-items:center}@media(max-width:768px){.header-actions{width:100%;justify-content:space-between}}.search-box{position:relative;display:flex;align-items:center}.search-box .search-input{padding:10px 16px 10px 40px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;width:240px;transition:var(--transition)}.search-box .search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4361ee1a}@media(max-width:768px){.search-box .search-input{width:180px}}.search-box .search-icon{position:absolute;left:12px;color:var(--gray)}.user-profile .avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;cursor:pointer;transition:var(--transition)}.user-profile .avatar:hover{transform:scale(1.1);box-shadow:var(--shadow)}.dashboard-content .animation-cards .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.section-title{font-size:20px;font-weight:600;color:var(--dark);margin:0 0 20px}.animation-card{background:var(--card-bg);border-radius:var(--border-radius);padding:24px;box-shadow:var(--shadow);transition:var(--transition);cursor:pointer;position:relative;overflow:hidden;height:240px}.animation-card.active{transform:translateY(-5px);box-shadow:var(--shadow-hover)}.animation-card .card-icon{font-size:28px;margin-bottom:12px}.animation-card .card-title{font-size:18px;font-weight:600;color:var(--dark);margin:0 0 8px}.animation-card .card-description{font-size:14px;color:var(--gray);margin:0 0 16px}.animation-card .card-animation-area{position:absolute;bottom:20px;right:20px;width:80px;height:80px;border-radius:50%;background:var(--card-color);display:flex;align-items:center;justify-content:center;transition:all .4s ease}.animation-card .card-animation-area.animate-1{animation:rotate3d 2s ease-out}.animation-card .card-animation-area.animate-2{animation:lightBeam 1.5s ease-out}.animation-card .card-animation-area.animate-2:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;box-shadow:0 0 #0000001a,0 0 #0000001a,0 0 #0000001a,0 0 #0000001a;animation:shadowExpand 1.5s ease-out;z-index:-1}.animation-card .card-animation-area.animate-3{animation:slideInFromLeft 3s ease-out}.animation-card .card-animation-area.animate-4{animation:explodeEffect 1.5s ease-out}.animation-card .card-animation-area .card-content{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:hidden;transition:all .5s ease}.animation-card .card-animation-area .card-content .animated-element{width:100%;height:100%;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.animation-card .card-animation-area .card-content .animated-element .effect-overlay{position:absolute;top:0;left:0;width:100%;height:100%}@keyframes rotate3d{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes lightBeam{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradientShift{0%{background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);background-size:400% 400%;background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes slideInFromLeft{0%{transform:translate(120%)}10%{transform:translate(-50%)}20%{transform:translate(50%)}33%{transform:translate(-30%)}40%{transform:translate(20%)}60%{transform:translate(-10%)}75%{transform:translate(10%)}83%{transform:translate(-5%)}to{transform:translate(0)}}@keyframes explodeEffect{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes shadowExpand{0%{box-shadow:0 0 #0000001a,0 0 #0000001a,0 0 #0000001a,0 0 #0000001a}30%{box-shadow:0 0 5px 2px #0003,0 0 10px 4px #00000026,0 0 #0000001a,0 0 #0000001a}60%{box-shadow:0 0 10px 4px #00000040,0 0 15px 6px #0003,0 0 5px 2px #00000026,0 0 #0000001a}to{box-shadow:0 0 15px 6px #0000004d,0 0 20px 8px #00000040,0 0 10px 4px #0003,0 0 5px 2px #00000026}}.card-animation-area.animate-2 .card-content .animated-element .effect-overlay{animation:gradientShift 1.5s ease-out}.card-animation-area.animate-4 .card-content{animation:explodeEffect 1.5s ease-out}.animation-card{animation:initialSlideInFromLeft .8s ease-out .2s both}.animation-card:nth-child(2){animation-delay:.4s}.animation-card:nth-child(3){animation-delay:.6s}.animation-card:nth-child(4){animation-delay:.8s}@keyframes initialSlideInFromLeft{0%{transform:translate(-50px);opacity:0}to{transform:translate(0);opacity:1}}.login-container{min-height:100vh;min-width:100vw;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#0f0c29,#302b63,#24243e);font-family:Arial,sans-serif;overflow:hidden;position:relative}.login-card{width:380px;padding:40px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 15px 35px #0003;border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}.glow-text{color:#fff;text-align:center;margin-bottom:30px;font-size:2em;text-shadow:0 0 10px rgba(255,255,255,.5);animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #e60073,0 0 10px #e60073}to{text-shadow:0 0 20px #fff,0 0 30px #ff4da0,0 0 40px #ff4da0,0 0 50px #ff4da0}}.input-group{margin-bottom:25px}.input-group label{display:block;color:#fff;margin-bottom:8px;font-weight:700;letter-spacing:1px}.input-field{width:100%;padding:12px 15px;background:#ffffff26;border:none;border-radius:10px;color:#fff;font-size:16px;transition:all .3s ease;border:1px solid rgba(255,255,255,.1)}.input-field::placeholder{color:#fff9}.input-field:focus{outline:none;background:#ffffff40;transform:translateY(-2px);box-shadow:0 5px 15px #0000004d;border-color:#ffffff4d}.error-message{background:#ff4757;color:#fff;padding:10px;border-radius:8px;margin-bottom:20px;text-align:center;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.login-btn{width:100%;padding:14px;background:linear-gradient(45deg,#ff6b6b,#ee5a24);border:none;border-radius:10px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;letter-spacing:1px}.login-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #ee5a2466}.login-btn:active{transform:translateY(-1px)}.pulse:after{content:"";position:absolute;top:50%;left:50%;width:300px;height:300px;background:#fff6;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:ripple 2s infinite}@keyframes ripple{0%{width:0;height:0;opacity:.5}to{width:300px;height:300px;opacity:0}}.particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:-1;border-radius:20px}.particle{position:absolute;background:#ffffff80;border-radius:50%;pointer-events:none;animation:float 6s infinite ease-in-out}.particle:nth-child(1){width:8px;height:8px;top:20%;left:30%;animation-delay:0s}.particle:nth-child(2){width:5px;height:5px;top:50%;left:70%;animation-delay:2s}.particle:nth-child(3){width:10px;height:10px;top:80%;left:20%;animation-delay:4s}@keyframes float{0%{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-20px) rotate(180deg);opacity:.5}to{transform:translateY(0) rotate(360deg);opacity:1}}