*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f7fa;color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.container{margin:0 auto;max-width:1200px;padding:20px}.header{background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:12px;box-shadow:0 4px 20px #0000001a;color:#fff;margin-bottom:1.5rem;padding:1.5rem;text-align:center}.header h1{font-size:2rem;font-weight:600;margin-bottom:.5rem}.header p{font-size:1rem;opacity:.9}.card{background:#fff;border:1px solid #e1e8ed;border-radius:10px;box-shadow:0 2px 10px #00000014;margin:1rem 0;padding:1.5rem}.card h3{align-items:center;color:#2c3e50;display:flex;font-size:1.2rem;font-weight:600;gap:.5rem;margin-bottom:1rem}.card h4{color:#34495e;font-size:1rem;font-weight:600;margin-bottom:.75rem}.main-data-section{display:flex;flex-direction:column;gap:1rem}.data-grid{display:grid;gap:1rem}.health-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.metric{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:1rem;position:relative;text-align:center;transition:all .2s ease}.metric-icon{font-size:1.5rem;margin-bottom:.5rem}.metric-value{color:#2c3e50;font-size:1.8rem;font-weight:700;margin-bottom:.25rem}.metric-label{color:#6c757d;font-size:.85rem;font-weight:500;margin-bottom:.5rem}.metric-status{border-radius:5px;display:inline-block;font-size:.75rem;font-weight:600;padding:.2rem .6rem;position:absolute;right:.5rem;top:.5rem;z-index:10}.normal{background:#d4edda;color:#155724}.warning{background:#fff3cd;color:#856404}.critical{background:#f8d7da;color:#721c24}.low{background:#d1ecf1;color:#0c5460}.high{background:#f8d7da;color:#721c24}.active{background:#d4edda;color:#155724}.inactive,.recording{background:#f8d7da;color:#721c24}.stopped{color:#383d41}.stopped,.unknown{background:#e2e3e5}.unknown{color:#6c757d}.activity-device-data{background:#f8f9fa;border:1px solid #e9ecef}.data-row{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.data-column{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:1rem}.compact-metrics{display:flex;flex-direction:column;gap:.5rem}.compact-metric{align-items:center;border-bottom:1px solid #f1f3f4;display:flex;justify-content:space-between;padding:.5rem 0}.compact-metric:last-child{border-bottom:none}.compact-label{color:#6c757d;font-size:.85rem;font-weight:500}.compact-value{border-radius:5px;color:#2c3e50;font-size:.9rem;font-weight:600;padding:.1rem .5rem}.update-info{background:#e3f2fd;border:1px solid #bbdefb;border-radius:5px;padding:1rem}.update-details{flex-wrap:wrap;gap:1rem;justify-content:space-between}.update-details,.update-item{align-items:center;display:flex}.update-item{flex-direction:row;gap:.5rem}.update-label{color:#1976d2;font-size:.8rem;font-weight:600}.update-value{color:#1565c0;font-size:.9rem;font-weight:500}.waiting-data{background:#fff3e0;border:1px solid #ffcc02;padding:2rem;text-align:center}.waiting-data h3{color:#f57c00;margin-bottom:.75rem}.waiting-data p{color:#ef6c00;margin-bottom:1rem}.test-section{background:#f8f9fa;border:1px solid #e9ecef;margin:1.5rem 0}.test-section h3{color:#495057;margin-bottom:1rem}.test-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.test-info{color:#6c757d;font-size:.9rem;margin:0;text-align:center}.test-button{background:#4caf50;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.test-button:hover{background:#388e3c;transform:translateY(-1px)}.refresh-button{background:#ff9800;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.refresh-button:hover{background:#f57c00;transform:translateY(-1px)}.clear-button{background:#dc3545;border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.clear-button:hover{background:#c82333;transform:translateY(-1px)}.history-card{background:#fff}.history-list{display:flex;flex-direction:column;gap:.5rem}.history-item{align-items:center;background:#f8f9fa;border-left:3px solid #007bff;border-radius:6px;display:flex;justify-content:space-between;padding:.75rem}.history-time{color:#495057;font-size:.85rem;font-weight:600}.history-device{color:#6c757d;font-size:.8rem;min-width:80px}.history-stats{align-items:center;display:flex;gap:.75rem}.history-stat{background:#e9ecef;border-radius:12px;color:#495057;font-size:.75rem;font-weight:600;padding:.2rem .5rem}.no-data{color:#6c757d;padding:1.5rem;text-align:center}@media (max-width:768px){.container{padding:15px}.header h1{font-size:1.5rem}.data-grid,.data-row{grid-template-columns:1fr}.data-row{gap:1rem}.history-item,.update-details{align-items:flex-start;flex-direction:column}.history-item{gap:.5rem}.history-stats{align-self:stretch;justify-content:space-between}}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-height:80vh;max-width:500px;overflow:hidden;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{align-items:center;background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;display:flex;justify-content:space-between;padding:1.5rem}.modal-header h2{font-size:1.3rem;font-weight:600;margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:2rem;height:40px;justify-content:center;padding:0;transition:background-color .2s ease;width:40px}.modal-close:hover{background:#fff3}.modal-body{max-height:60vh;overflow-y:auto;padding:2rem}.modal-footer{border-top:1px solid #e9ecef;display:flex;justify-content:flex-end;padding:1.5rem}.modal-button{background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:background-color .2s ease}.modal-button:hover{background:#0056b3}.wifi-info-grid{display:grid;gap:1rem}.wifi-info-item{align-items:center;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;display:flex;justify-content:space-between;padding:1rem}.wifi-label{color:#495057}.wifi-label,.wifi-value{font-size:.9rem;font-weight:600}.wifi-value{background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#2c3e50;min-width:120px;padding:.25rem .75rem;text-align:center}.no-wifi-data{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;color:#6c757d;padding:2rem;text-align:center}.clickable-cow{cursor:pointer;display:inline-block;transition:transform .2s ease,filter .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.clickable-cow:hover{filter:brightness(1.2);transform:scale(1.1)}.clickable-cow:active{transform:scale(.95)}