body{margin:0;font-family:Segoe UI,sans-serif;background:#f0f2f5;color:#333;line-height:1.5}body.dark-mode{background:#121212;color:#eee}.app{max-width:1400px;margin:auto;display:flex;flex-direction:column;min-height:100vh}header{display:flex;flex-direction:column;gap:10px;padding:20px;background:#fff;box-shadow:0 2px 5px #0000001a}body.dark-mode header{background:#1e1e1e}header h1{margin:0;font-size:1.8rem}.tabs{display:flex;gap:10px;flex-wrap:wrap}.tabs button{flex:1;padding:8px 20px;border:none;border-radius:5px;background:#ddd;cursor:pointer;font-weight:700;transition:all .2s}.tabs button.active{background:#007bff;color:#fff}body.dark-mode .tabs button{background:#333;color:#eee}body.dark-mode .tabs button.active{background:#0d6efd}.controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.controls .filter-group{display:flex;flex-wrap:wrap;gap:.5rem}.controls input,.controls select,.controls button{padding:.5rem .8rem;border-radius:5px;border:1px solid #ccc;font-size:.95rem;background:#fff;color:#333;transition:all .2s}.controls button.dark-mode-toggle{background:#007bff;color:#fff;border:none}body.dark-mode .controls input,body.dark-mode .controls select,body.dark-mode .controls button{background:#333;color:#eee;border-color:#555}main{flex:1;padding:20px;display:grid;gap:20px}.toilettes-list,.sensor-list,.bridge-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.toilette-card,.sensor-card,.bridge-card{background:#fff;padding:15px;border-radius:10px;box-shadow:0 2px 6px #0000001a;transition:transform .2s,box-shadow .2s}.toilette-card:hover,.sensor-card:hover,.bridge-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px #0003}body.dark-mode .toilette-card,body.dark-mode .sensor-card,body.dark-mode .bridge-card{background:#1e1e1e;color:#eee;box-shadow:0 2px 6px #ffffff0d}table{width:100%;border-collapse:collapse;font-family:sans-serif;margin-bottom:2rem}th,td{border:1px solid #ddd;padding:10px 12px;text-align:left}th{background-color:#007bff;color:#fff;font-weight:600}tr:nth-child(2n){background-color:#f2f2f2}tr:hover{background-color:#e2e6ea}body.dark-mode table{border-color:#555}body.dark-mode th{background-color:#1a73e8}body.dark-mode tr:nth-child(2n){background-color:#333}body.dark-mode tr:hover{background-color:#444}.notifications{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:1000}.notification{padding:10px 15px;border-radius:5px;color:#fff;font-weight:700;box-shadow:0 2px 6px #0003;animation:slideIn .5s ease}.notification.sensor{background-color:#ff5722}.notification.toilette{background-color:#4caf50}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (max-width: 1024px){.toilettes-list,.sensor-list,.bridge-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media (max-width: 768px){.tabs button{flex:1 1 48%}.controls .filter-group{flex-direction:column;width:100%}.controls input,.controls select,.controls button{width:100%}}@media (max-width: 480px){header h1{font-size:1.5rem}.tabs button{font-size:.9rem;padding:6px 12px}.controls input,.controls select,.controls button{font-size:.9rem;padding:6px 8px}}