.drawer{position:fixed;top:0;right:0;width:400px;height:100%;background:#fdfdfd;border-left:1px solid #ccc;box-shadow:-3px 0 8px #0000001a;padding:20px;overflow-y:auto;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{right:-400px;opacity:0}to{right:0;opacity:1}}.drawer-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:10px}.close-btn{background:none;border:none;font-size:22px;cursor:pointer}.drawer-body{margin-top:15px}.loader{width:40px;height:40px;border:5px solid #ccc;border-top:5px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:2rem auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body{font-family:Segoe UI,sans-serif;margin:0;padding:20px;background-color:#f9f9f9;color:#333}h1,h2{text-align:center;margin-bottom:20px}input[type=date]{margin:10px auto;padding:6px;font-size:16px;display:block}.chart-container{max-width:1000px;height:auto;padding:20px;margin:0 auto}canvas{max-height:500px}button:hover{opacity:.9}.centered-date{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.drawer{position:fixed;top:0;right:0;width:350px;height:100%;background:#fff;border-left:1px solid #ccc;padding:20px;overflow-y:auto;box-shadow:-4px 0 8px #0000001a}