:root{--primary-color: #1a73e8;--secondary-color: #34a853;--danger-color: #ea4335;--warning-color: #fbbc04;--bg-dark: #1e1e2d;--bg-card: #2a2a3d;--bg-card-hover: #32324a;--text-primary: #ffffff;--text-secondary: #a0a0b0;--border-color: #3a3a4a;--success-color: #34a853;--info-color: #4285f4}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#1a73e8,#0d47a1);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000004d}.header h1{font-size:1.5rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.header-status{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.status-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s infinite}.status-dot.connected{background-color:var(--success-color)}.status-dot.disconnected{background-color:var(--danger-color)}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.main-content{flex:1;padding:1.5rem;max-width:1600px;margin:0 auto;width:100%}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:1.5rem}.card{background-color:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.card-title{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.card-icon.temperature{background:#ea433533;color:var(--danger-color)}.card-icon.ph{background:#fbbc0433;color:var(--warning-color)}.card-icon.current{background:#4285f433;color:var(--info-color)}.card-icon.power{background:#34a85333;color:var(--success-color)}.card-value{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.card-unit{font-size:1rem;color:var(--text-secondary);font-weight:400}.card-status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;margin-top:.5rem}.status-indicator{width:8px;height:8px;border-radius:50%}.status-indicator.normal{background-color:var(--success-color)}.status-indicator.warning{background-color:var(--warning-color)}.status-indicator.danger{background-color:var(--danger-color)}.chart-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;margin-bottom:1.5rem}.chart-card{background-color:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.chart-title{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.history-section{background-color:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.history-title{font-size:1rem;font-weight:600;margin-bottom:1rem}.history-table{width:100%;border-collapse:collapse}.history-table th,.history-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border-color)}.history-table th{color:var(--text-secondary);font-weight:500;font-size:.85rem;text-transform:uppercase}.history-table tr:hover{background-color:var(--bg-card-hover)}.badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500}.badge-success{background:#34a85333;color:var(--success-color)}.badge-warning{background:#fbbc0433;color:var(--warning-color)}.badge-danger{background:#ea433533;color:var(--danger-color)}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:var(--text-secondary)}.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-right:1rem}@keyframes spin{to{transform:rotate(360deg)}}.alert{padding:1rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}.alert-warning{background:#fbbc041a;border:1px solid rgba(251,188,4,.3);color:var(--warning-color)}.alert-danger{background:#ea43351a;border:1px solid rgba(234,67,53,.3);color:var(--danger-color)}.toast-container{position:fixed;top:1rem;right:1rem;z-index:1000;display:flex;flex-direction:column;gap:.5rem;max-width:400px}.toast{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:8px;background-color:var(--bg-card);border:1px solid var(--border-color);box-shadow:0 4px 20px #0006;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-success{border-left:4px solid var(--success-color)}.toast-warning{border-left:4px solid var(--warning-color)}.toast-danger{border-left:4px solid var(--danger-color)}.toast-info{border-left:4px solid var(--info-color)}.toast-icon{font-size:1.2rem}.toast-message{flex:1;font-size:.9rem}.toast-close{background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:.25rem;line-height:1}.toast-close:hover{color:var(--text-primary)}.event-log-card{background-color:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border-color)}.event-log-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.event-log-title{font-size:1rem;font-weight:600}.event-log-count{font-size:.8rem;color:var(--text-secondary);background:#ffffff1a;padding:.25rem .75rem;border-radius:20px}.event-log-list{max-height:300px;overflow-y:auto}.event-log-empty{text-align:center;padding:2rem;color:var(--text-secondary)}.event-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border-radius:8px;margin-bottom:.5rem;transition:background .2s}.event-item:hover{background-color:var(--bg-card-hover)}.event-icon{font-size:1rem;flex-shrink:0}.event-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.event-message{font-size:.85rem}.event-time{font-size:.75rem;color:var(--text-secondary)}.event-connection{border-left:3px solid var(--info-color)}.event-sensor{border-left:3px solid var(--success-color)}.event-error{border-left:3px solid var(--danger-color)}.event-default{border-left:3px solid var(--text-secondary)}@media (max-width: 768px){.header{flex-direction:column;gap:.5rem;text-align:center}.chart-section{grid-template-columns:1fr}.card-value{font-size:2rem}.toast-container{left:1rem;right:1rem;max-width:none}}