@import "https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600&display=swap";
.Design{color:#fff;background:linear-gradient(135deg,#2a2a72 0%,#009ffd 74%);border-radius:5px;justify-content:center;align-items:center;min-height:100vh;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif;display:flex;overflow:hidden}.Design :root{--primary-color:#06f;--sidebar-width:280px;--sidebar-collapsed-width:80px;--transition-speed:.3s}.Design *{box-sizing:border-box;margin:0;padding:0}.Design .container{-webkit-backdrop-filter:blur(30px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:24px;width:90%;height:85vh;display:flex;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.1)}.Design .sidebar{width:var(--sidebar-width);-webkit-backdrop-filter:blur(20px);height:100%;transition:width var(--transition-speed)ease;background:rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.08);flex-direction:column;padding:30px 15px;display:flex;position:relative}.Design .logo{text-align:center;margin-bottom:40px}.Design .logo i{color:#fff;opacity:.9;font-size:36px}.Design .menu ul{margin:0;padding:0;list-style:none}.Design .menu li{border-radius:16px;margin-bottom:8px;transition:all .2s;position:relative}.Design .menu li:hover{cursor:pointer;background:rgba(255,255,255,.2)}.Design .menu li.active{background:rgba(255,255,255,.25)}.Design .menu li.active:before{content:"";background:var(--primary-color);border-radius:0 4px 4px 0;width:4px;height:20px;position:absolute;top:50%;left:-15px;transform:translateY(-50%)}.Design .menu a{color:#fff;letter-spacing:.3px;cursor:pointer;align-items:center;padding:12px 16px;font-weight:500;text-decoration:none;display:flex}.Design .menu a i{text-align:center;min-width:22px;margin-right:14px;font-size:20px}.Design .profile{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);border-radius:16px;align-items:center;margin-top:auto;padding:16px;display:flex}.Design .avatar{border:2px solid rgba(255,255,255,.3);border-radius:50%;width:45px;height:45px;margin-right:12px;overflow:hidden}.Design .avatar img{object-fit:cover;width:100%;height:100%}.Design .user-info h3{margin-bottom:2px;font-size:16px;font-weight:500}.Design .user-info p{opacity:.8;font-size:12px}.Design .content{flex-direction:column;flex:1;height:100%;padding:40px;display:flex;overflow-y:auto}.Design header{margin-bottom:30px}.Design header h1{margin-bottom:8px;font-size:32px;font-weight:600}.Design header p{opacity:.8;font-size:16px}.Design .card-container{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:30px;display:grid}.Design .card{-webkit-backdrop-filter:blur(10px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:20px;align-items:center;padding:24px;transition:transform .3s,box-shadow .3s;display:flex}.Design .card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}.Design .card-icon{background:var(--primary-color);border-radius:14px;justify-content:center;align-items:center;width:50px;height:50px;margin-right:16px;display:flex}.Design .card-icon i{font-size:22px}.Design .card-info h3{margin-bottom:4px;font-size:24px;font-weight:600}.Design .card-info p{opacity:.8;font-size:14px}.Design .menu li:after{content:"";border-radius:16px;transition:box-shadow .3s;position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0)}.Design .menu li:hover:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}@media (max-width:1024px){.Design .sidebar{width:var(--sidebar-collapsed-width)}.Design .menu a span,.Design .user-info{display:none}.Design .profile{justify-content:center}.Design .avatar{margin-right:0}.Design .content{padding:30px}.Design .card-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.Design .container{width:95%;height:90vh}.Design .card-container{grid-template-columns:1fr}}