/* 设备类型颜色样式 */
.data-item.device-ctd::before { background: #00ff88; }
.data-item.device-adcp::before { background: #0088ff; }
.data-item.device-gravity::before { background: #ff6600; }
.data-item.device-magnetic::before { background: #ff0066; }
.data-item.device-wave::before { background: #00ffff; }
.data-item.device-depth::before { background: #8800ff; }
.data-item.device-radar::before { background: #ffff00; }
.data-item.device-multi::before { background: #00ff00; }
.data-item.device-buoy::before { background: #ff8800; }
.data-item.device-beidou::before { background: #ff4400; }
.data-item.device-wind::before { background: #4400ff; }
.data-item.device-weather::before { background: #88ff00; }
.data-item.device-sky::before { background: #ff0088; }
.data-item.device-turbulence::before { background: #0044ff; }
.data-item.device-lidar::before { background: #ff6600; }
.data-item.device-visibility::before { background: #66ff00; }
.data-item.device-cloud::before { background: #00aaff; }
.data-item.device-navigation::before { background: #aa00ff; }

.data-item.device-ctd .stream-device-icon { background: rgba(0, 255, 136, 0.2); border-color: #00ff88; }
.data-item.device-adcp .stream-device-icon { background: rgba(0, 136, 255, 0.2); border-color: #0088ff; }
.data-item.device-gravity .stream-device-icon { background: rgba(255, 102, 0, 0.2); border-color: #ff6600; }
.data-item.device-magnetic .stream-device-icon { background: rgba(255, 0, 102, 0.2); border-color: #ff0066; }
.data-item.device-wave .stream-device-icon { background: rgba(0, 255, 255, 0.2); border-color: #00ffff; }
.data-item.device-depth .stream-device-icon { background: rgba(136, 0, 255, 0.2); border-color: #8800ff; }
.data-item.device-radar .stream-device-icon { background: rgba(255, 255, 0, 0.2); border-color: #ffff00; }
.data-item.device-multi .stream-device-icon { background: rgba(0, 255, 0, 0.2); border-color: #00ff00; }
.data-item.device-buoy .stream-device-icon { background: rgba(255, 136, 0, 0.2); border-color: #ff8800; }
.data-item.device-beidou .stream-device-icon { background: rgba(255, 68, 0, 0.2); border-color: #ff4400; }
.data-item.device-wind .stream-device-icon { background: rgba(68, 0, 255, 0.2); border-color: #4400ff; }
.data-item.device-weather .stream-device-icon { background: rgba(136, 255, 0, 0.2); border-color: #88ff00; }
.data-item.device-sky .stream-device-icon { background: rgba(255, 0, 136, 0.2); border-color: #ff0088; }
.data-item.device-turbulence .stream-device-icon { background: rgba(0, 68, 255, 0.2); border-color: #0044ff; }
.data-item.device-lidar .stream-device-icon { background: rgba(255, 102, 0, 0.2); border-color: #ff6600; }
.data-item.device-visibility .stream-device-icon { background: rgba(102, 255, 0, 0.2); border-color: #66ff00; }
.data-item.device-cloud .stream-device-icon { background: rgba(0, 170, 255, 0.2); border-color: #00aaff; }
.data-item.device-navigation .stream-device-icon { background: rgba(170, 0, 255, 0.2); border-color: #aa00ff; }

/* 数据流动画效果 */
.data-item {
    opacity: 0;
    transform: translateX(-20px);
    animation: streamItemEnter 0.4s ease forwards;
}