*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}body{background:#f5f7fb}.app-container{display:flex;height:100vh}.sidebar{width:250px;background:#0f172a;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:20px}.logo{font-size:24px;font-weight:700;margin-bottom:30px;text-align:center}.menu{display:flex;align-items:center;gap:12px;padding:12px;color:#fff;text-decoration:none;border-radius:8px;margin-bottom:8px}.menu:hover{background:#1e293b}.active{background:#2563eb}.logout{border:none;background:#dc2626;color:#fff;padding:12px;border-radius:8px;cursor:pointer;display:flex;gap:10px;justify-content:center;align-items:center}.main-content{flex:1;display:flex;flex-direction:column}.header{background:#fff;padding:18px 25px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #00000014}.header-right{display:flex;align-items:center;gap:20px}.search-box{display:flex;align-items:center;background:#f3f4f6;padding:8px 15px;border-radius:8px}.search-box input{border:none;background:none;outline:none;margin-left:10px}.content{padding:30px;flex:1;overflow:auto}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:25px}.card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 10px #00000014}.card h4{color:gray;margin-bottom:10px}.recent{margin-top:40px;background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 10px #00000014}.recent ul{margin-top:20px;padding-left:20px}.recent li{margin-bottom:12px}.footer{background:#fff;padding:15px;text-align:center}@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.sidebar{width:80px}.menu span{display:none}.logo{font-size:18px}}@media (max-width:700px){.cards{grid-template-columns:1fr}.header{flex-direction:column;gap:15px}}