:root{--primary-color: #2563eb;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--dark-bg: #1f2937;--card-bg: #f8fafc}body{background-color:#f1f5f9;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0}.navbar{background:linear-gradient(135deg,var(--primary-color),#1d4ed8);box-shadow:0 4px 6px -1px #0000001a}.card{border:none;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a;transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:0 10px 25px -5px #00000026}.status-online{color:var(--success-color)}.status-offline{color:var(--danger-color)}.status-warning{color:var(--warning-color)}.stat-card{background:#fff;border-left:4px solid var(--primary-color)}.stat-value{font-size:2.5rem;font-weight:700;color:var(--primary-color)}.log-item{border-left:3px solid transparent;transition:all .3s ease}.log-item:hover{border-left-color:var(--primary-color);background-color:var(--card-bg)}.log-error{border-left-color:var(--danger-color);background-color:#fef2f2}.device-card{border-left:4px solid var(--success-color)}.device-card.offline{border-left-color:var(--danger-color)}.mqtt-control{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.log-timestamp{font-size:.85rem;color:#64748b}.command-badge{font-size:.75rem;padding:.25rem .5rem}.refresh-btn{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tab-pane{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.sortable:hover{background-color:#ffffff1a}.device-table th.sortable:hover{background-color:#0000001a}.blink{animation:blink 2s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.master-data-tabs .nav-tabs{border-bottom:2px solid var(--primary-color)}.master-data-tabs .nav-link.active{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.form-control.is-invalid,.form-select.is-invalid{border-color:var(--danger-color);background-image:none}.modal{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1055!important}.modal-dialog{position:relative!important;margin:auto!important;max-height:90vh!important;display:flex!important;flex-direction:column!important}.modal-xl{max-width:900px!important;width:100%!important}.modal-content{border-radius:12px;border:none;box-shadow:0 20px 25px -5px #0000001a;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{border-bottom:1px solid #e5e7eb;background-color:#f9fafb;border-radius:12px 12px 0 0;flex-shrink:0}.modal-body{flex:1;overflow-y:auto;max-height:calc(90vh - 120px)}.modal-footer{flex-shrink:0;border-top:1px solid #e5e7eb}.btn-group .btn{transition:all .2s ease}.btn-group .btn:hover{box-shadow:0 4px 8px -2px #0000001a}.badge{font-weight:500}@media (max-width: 768px){.stat-value{font-size:2rem}.card-body{padding:1rem}.table-responsive{border-radius:8px}.modal-dialog{margin:1rem}.modal-xl{max-width:calc(100vw - 1rem)!important;width:calc(100vw - 1rem)!important;margin:.5rem auto!important}}