*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:#e8ecf0;color:#1a1a2e;display:flex;height:100vh;overflow:hidden}#root{display:flex;width:100%;height:100%}.sidebar{width:56px;background:#1a2332;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;flex-shrink:0;z-index:10}.sidebar .logo{width:44px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;cursor:pointer}.sidebar .logo .logo-img{width:40px;height:auto}.nav-btn{width:42px;height:42px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#7a8a9e;transition:all .15s;position:relative}.nav-btn:hover{background:#2a3444;color:#c0ccda}.nav-btn.active{background:#2a3444;color:#fff}.nav-btn.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#2a7de1;border-radius:0 3px 3px 0}.nav-btn svg{width:20px;height:20px;fill:currentColor}.nav-btn span{font-size:8px;letter-spacing:.3px}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.topbar{background:linear-gradient(90deg,#1a2332,#1e3a5f);color:#fff;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:44px}.topbar .title-area{display:flex;align-items:center;gap:12px}.topbar .title-icon{width:28px;height:28px;background:#ffffff1f;border-radius:6px;display:flex;align-items:center;justify-content:center}.topbar .title-icon svg{width:18px;height:18px;fill:#fff}.topbar h1{font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.topbar .timestamp{font-size:12px;color:#ffffffb3}.content{flex:1;display:flex;gap:16px;overflow-y:auto;padding:16px 20px}.cards-area{flex:1;min-width:0;overflow-x:hidden}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sensor-card{background:#fff;border:2px solid #dde2e8;border-radius:10px;padding:14px 16px;position:relative;transition:border-color .2s;overflow:hidden;min-width:0}.sensor-card.alerted{border-color:#e74c3c}.sensor-card .card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.sensor-card .card-name{font-size:var(--card-name-size, 14px);font-weight:700;color:#1a2332;text-transform:uppercase}.sensor-card .alert-icon{width:24px;height:24px;background:#e74c3c;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;box-shadow:0 2px 6px #e74c3c66}.sensor-card .alert-icon.hidden{display:none}.sensor-card .big-value{font-size:36px;font-weight:800;color:#1a2332;line-height:1.1;margin:4px 0 8px}.sensor-card .big-value .unit{font-size:20px;font-weight:600;color:#555}.sensor-card .sparkline{width:100%;height:80px;overflow:hidden}.sensor-card.faded{background:#f0f0f0;border-color:#ccc;opacity:.7}.sensor-card.faded .big-value{color:#888}.sensor-card.dark-mode{background:#1a1a2e;border-color:#2d2d44;color:#e0e0e0}.sensor-card.dark-mode .card-name{color:#c8d0da}.sensor-card.dark-mode .big-value{color:#e0e0e0}.sensor-card.dark-mode .big-value .unit{color:#a0a8b4}.alert-feed{background:#fff;border-radius:10px;border:2px solid #dde2e8;overflow:hidden}.alert-feed .feed-header{padding:12px 16px;font-size:15px;font-weight:800;color:#1a2332;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid #e8ecf0}.alert-feed table{width:100%;border-collapse:collapse;font-size:12px}.alert-feed th{padding:8px 10px;text-align:left;font-weight:700;font-size:10px;text-transform:uppercase;color:#666;letter-spacing:.5px;background:#f7f8fa;border-bottom:1px solid #e8ecf0;position:sticky;top:0}.alert-feed td{padding:7px 10px;border-bottom:1px solid #f2f3f5;vertical-align:top}.alert-feed .alert-icon-sm{display:inline-flex;width:18px;height:18px;background:#e74c3c;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;margin-right:4px;vertical-align:middle}.alert-feed .feed-scroll{max-height:calc(100vh - 160px);overflow-y:auto}.alert-detail{color:#555;font-size:11px;line-height:1.3}.box-list{display:flex;flex-direction:column;gap:12px;max-width:600px;margin:0 auto}.box-card{background:#fff;border:2px solid #2a7de1;border-radius:12px;padding:16px 20px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.box-card.inactive-box{background:#fdf2f2;border-color:#e74c3c}.box-card .box-name{font-size:20px;font-weight:800;color:#1a2332}.box-card .box-status{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}.box-card .status-dot{width:12px;height:12px;border-radius:50%}.box-card .status-dot.active{background:#2ecc71}.box-card .status-dot.inactive{background:#e74c3c}.box-card .box-metrics{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:6px}.box-card .metric{display:flex;flex-direction:column}.box-card .metric-label{font-size:10px;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:.3px}.box-card .metric-value{font-size:18px;font-weight:800;color:#1a2332}.box-card.inactive-box .metric-value,.box-card.inactive-box .box-name{color:#888}.box-card .status-text-inactive{color:#e74c3c;font-weight:700}.box-info-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#fff;border-radius:8px;border:1px solid #dde2e8;max-width:600px;margin:0 auto 12px}.box-info-bar .info-item{font-size:12px;color:#555}.box-info-bar .info-item strong{color:#1a2332}.data-page{flex-direction:column!important}.full-table-wrap{background:#fff;border-radius:10px;border:2px solid #dde2e8;overflow:hidden;flex:1}.full-table-wrap .table-header{padding:12px 16px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;border-bottom:2px solid #e8ecf0}.full-table{width:100%;border-collapse:collapse;font-size:13px}.full-table thead th{padding:10px 14px;text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;color:#666;background:#f7f8fa;border-bottom:2px solid #e8ecf0;position:sticky;top:0}.full-table tbody td{padding:8px 14px;border-bottom:1px solid #f2f3f5}.full-table tbody tr:hover{background:#f8fafd}.table-scroll-full{max-height:calc(100vh - 180px);overflow-y:auto}.cell-high{background:#e74c3c1f!important}.cell-low{background:#2a72b41f!important}.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700;text-transform:uppercase}.badge-high{background:#e74c3c1f;color:#c0392b}.badge-low{background:#2a72b41f;color:#2272b4}.badge-ok{background:#2ecc711f;color:#27ae60}@media(max-width:1100px){.card-grid{grid-template-columns:repeat(2,1fr)}.alert-area{width:280px;padding-top:38px}}@media(max-width:800px){.card-grid{grid-template-columns:1fr}.content{flex-direction:column}.alert-area{width:100%;padding-top:0}}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#1a2332d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;color:#fff;gap:16px;transition:opacity .3s}.loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#2a7de1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:14px;color:#ffffffb3}.refresh-badge{position:fixed;top:8px;right:12px;color:#ffffff59;font-size:9px;padding:2px 6px;border-radius:4px;z-index:100;display:flex;align-items:center;gap:4px}.refresh-dot{width:5px;height:5px;background:#2ecc71;border-radius:50%;opacity:.5;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.filter-bar{margin-bottom:12px;display:flex;align-items:center;gap:10px}.filter-bar label{font-size:12px;font-weight:700;color:#1a2332;text-transform:uppercase;letter-spacing:.5px}.filter-dropdown{position:relative;min-width:200px}.filter-toggle{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border:2px solid #dde2e8;border-radius:6px;font-size:13px;font-weight:600;color:#1a2332;background:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}.filter-toggle:hover{border-color:#b0bec5}.filter-toggle.open{border-color:#2a7de1;border-radius:6px 6px 0 0}.filter-toggle .arrow{font-size:10px;color:#888;transition:transform .2s}.filter-toggle.open .arrow{transform:rotate(180deg)}.filter-panel{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #2a7de1;border-top:none;border-radius:0 0 6px 6px;z-index:20;max-height:220px;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.filter-panel.open{display:block}.filter-panel .filter-actions{display:flex;gap:8px;padding:6px 10px;border-bottom:1px solid #e8ecf0}.filter-panel .filter-actions button{font-size:11px;font-weight:600;color:#2a7de1;background:none;border:none;cursor:pointer;padding:0}.filter-panel .filter-actions button:hover{text-decoration:underline}.filter-panel .filter-option{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;font-size:13px;color:#1a2332;transition:background .1s}.filter-panel .filter-option:hover{background:#f0f4f8}.filter-panel .filter-option input[type=checkbox]{accent-color:#2a7de1;width:14px;height:14px;cursor:pointer}.alert-area{width:340px;flex-shrink:0;padding-top:38px}.settings-section{margin-bottom:24px}.settings-label{font-size:15px;font-weight:700;color:#1a2332;margin-bottom:4px}.settings-desc{font-size:12px;color:#666;margin-bottom:14px;line-height:1.4}.settings-slider-row{display:flex;align-items:center;gap:12px}.settings-slider-label{font-size:12px;color:#888;font-weight:600;min-width:36px}.settings-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#dde2e8;border-radius:3px;outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#2a7de1;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.settings-slider::-moz-range-thumb{width:18px;height:18px;background:#2a7de1;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.settings-slider-value{font-size:14px;font-weight:800;color:#2a7de1;min-width:40px;text-align:center}.threshold-list{display:flex;flex-direction:column;gap:10px}.threshold-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f7f8fa;border-radius:8px;border:1px solid #e8ecf0}.threshold-row .asset-name{font-size:13px;font-weight:700;color:#1a2332;min-width:110px;text-transform:uppercase;letter-spacing:.3px}.threshold-row .threshold-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#dde2e8;border-radius:3px;outline:none}.threshold-row .threshold-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#e74c3c;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.threshold-row .threshold-slider::-moz-range-thumb{width:16px;height:16px;background:#e74c3c;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.threshold-row .threshold-val{font-size:13px;font-weight:800;color:#e74c3c;min-width:60px;text-align:center}.threshold-row .threshold-reset{font-size:11px;color:#2a7de1;background:none;border:none;cursor:pointer;font-weight:600;padding:2px 6px}.threshold-row .threshold-reset:hover{text-decoration:underline}.threshold-global-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px 14px;background:#fff;border-radius:8px;border:2px solid #2a7de1}.threshold-global-bar .global-label{font-size:12px;font-weight:700;color:#2a7de1;min-width:90px}.threshold-global-bar .threshold-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#dde2e8;border-radius:3px;outline:none}.threshold-global-bar .threshold-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#2a7de1;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.threshold-global-bar .threshold-slider::-moz-range-thumb{width:16px;height:16px;background:#2a7de1;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0003}.threshold-global-bar .threshold-val{font-size:13px;font-weight:800;color:#2a7de1;min-width:60px;text-align:center}.threshold-global-bar button.apply-all{font-size:11px;font-weight:700;color:#fff;background:#2a7de1;border:none;border-radius:4px;padding:5px 12px;cursor:pointer}.threshold-global-bar button.apply-all:hover{background:#1e5faa}.toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:24px;transition:.25s}.toggle-switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s}.toggle-switch input:checked+.slider{background:#2a7de1}.toggle-switch input:checked+.slider:before{transform:translate(20px)}.toggle-label{font-size:13px;font-weight:600;color:#1a2332}.settings-section.disabled{opacity:.45;pointer-events:none}