body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #121212; color: #f4f4f9; } .navbar { background-color: #1e1e1e; color: #f4f4f9; display: flex; justify-content: center; align-items: center; padding: 1rem 2rem; position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .notification { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #4caf50; color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; opacity: 0; transition: opacity 0.3s ease, top 0.3s ease; text-align: center; } .notification.show { opacity: 1; } .notification.error { background-color: #f44336; } .notification-buttons { margin-top: 10px; } .notification-buttons button { margin: 0 5px; padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; } .notification-buttons button.confirm { background-color: #4caf50; color: white; } .notification-buttons button.cancel { background-color: #f44336; color: white; } .hamburger-menu { font-size: 1.5rem; cursor: pointer; transition: transform 0.3s ease; position: absolute; left: 2rem; } .logo { font-size: 1.5rem; font-weight: bold; background: linear-gradient(45deg, #6e45e2, #88d3ce); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } .hamburger-menu:hover { transform: scale(1.1); } .sidebar { background-color: #1e1e1e; position: fixed; top: 0; left: 0; width: 200px; height: 100%; padding-top: 60px; z-index: 999; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.active { transform: translateX(0); } .sidebar a { display: block; padding: 16px; color: #f4f4f9; text-decoration: none; border-bottom: 1px solid #2c2c2c; transition: background-color 0.3s ease; } .sidebar a:hover { background-color: #2c2c2c; } .main-content { margin-top: 80px; padding: 2rem; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .protection-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .stat-box { background-color: #1e1e1e; color: #f4f4f9; padding: 1.5rem; border-radius: 10px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .stat-box:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .stat-box h3 { margin-top: 0; font-size: 1.2rem; font-weight: 300; color: #88d3ce; } .stat-box span { font-size: 2rem; font-weight: bold; color: #6e45e2; } .toggle-switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-top: 10px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f44336; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #4caf50; } input:checked + .slider:before { transform: translateX(26px); } .action-buttons { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; } .action-button { padding: 0.5rem 1rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; } .action-button.save { background-color: #4caf50; color: white; } .action-button.reset { background-color: #f44336; color: white; } .action-button.save:hover { background-color: #45a049; } .action-button.reset:hover { background-color: #e53935; }